/* În Bătătură.
   Cromatica urmează masa de joc din imaginea de brand: placă de lemn cald, contur
   de țară în neon cyan (banda LED), studio întunecat în jur. Culorile de tabără se
   amestecă parțial cu lemnul în JS (vezi peLemn în app.js), ca harta să citească a
   tablă de joc, nu a diagramă statistică. */
:root{
  --fund:#0E1420; --fund2:#161E2D; --fund3:#1F2A3D; --linie:#27354A;
  --lemn-harta:#B98A52; --neon:#38D2FF;
  --text:#E8EAED; --sub:#98A1B0;
  --stejar:#D49B55; --lemn:#8C5835; --aur:#FFB800; --foc:#E2542B;
  --sus:env(safe-area-inset-top,0px); --jos:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--fund);color:var(--text);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none}
button,input{font:inherit;color:inherit}
.ascuns{display:none!important}
.sub{color:var(--sub);font-size:13px}
.centrat{text-align:center}
.flex1{flex:1;min-width:0}
.marunt{color:var(--sub);font-size:11.5px;margin-top:9px}
h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--sub);
  margin:20px 0 9px}

#harta{position:fixed;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
#harta:active{cursor:grabbing}

/* Vigneta de jar: calmă când harta doarme, aprinsă când se dă bătălia.
   Intensitatea o urcă JS-ul prin --jar, în funcție de cuceririle recente. */
.jar{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:var(--jar,.25);
  transition:opacity .9s ease;
  background:
    radial-gradient(120% 75% at 50% 118%, rgba(226,84,43,.42), transparent 62%),
    radial-gradient(120% 60% at 50% 108%, rgba(56,210,255,.22), transparent 58%),
    radial-gradient(120% 75% at 50% -18%, rgba(255,184,0,.28), transparent 62%),
    radial-gradient(85% 120% at -12% 50%, rgba(226,84,43,.26), transparent 60%),
    radial-gradient(85% 120% at 112% 50%, rgba(226,84,43,.26), transparent 60%)}

/* ---------------------------------------------------------------- bara sus */
#bara{position:fixed;top:0;left:0;right:0;z-index:14;display:flex;align-items:center;
  gap:9px;padding:9px 11px;padding-top:calc(9px + var(--sus));
  background:linear-gradient(180deg,rgba(14,20,32,.97) 55%,rgba(14,20,32,0))}
.marca{font-weight:800;letter-spacing:.13em;font-size:14px;white-space:nowrap;
  background:linear-gradient(92deg,#fff,var(--stejar));-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
  position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}
.cron{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--aur);font-weight:700;
  font-size:12.5px;background:rgba(255,184,0,.11);border:1px solid rgba(255,184,0,.3);
  padding:5px 10px;border-radius:999px;white-space:nowrap}
.ic{background:var(--fund2);border:1px solid var(--linie);width:38px;height:38px;
  border-radius:11px;font-size:16px;cursor:pointer;flex:none}
.ic:active{background:var(--fund3)}

/* ---------------------------------------------------------------- subsol */
#subsol{position:fixed;bottom:var(--banda,0px);left:0;right:0;z-index:13;display:flex;gap:8px;
  align-items:center;padding:9px 11px;padding-bottom:calc(9px + var(--jos));
  background:linear-gradient(0deg,rgba(14,20,32,.97) 55%,rgba(14,20,32,0))}
.pastila-pioni{background:rgba(255,184,0,.12);border:1px solid rgba(255,184,0,.34);
  color:var(--aur);padding:8px 15px;border-radius:999px;font-size:13px;cursor:pointer;
  white-space:nowrap}
.pastila-pioni b{font-size:16px;font-weight:800}
.pastila-sec{margin-left:auto;background:var(--fund2);border:1px solid var(--linie);
  padding:8px 13px;border-radius:999px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.pastila-sec b{color:var(--stejar)}
/* butonul de conversie: sticlă (glassmorphism) cu conturul NEON al țării —
   aceeași bandă LED cyan, la aceeași grosime ca haloul din jurul României */
.cta-pioni{flex:1;text-align:center;color:#EAFBFF;font-weight:800;font-size:14px;
  padding:9px 8px;border-radius:999px;text-decoration:none;white-space:nowrap;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,
    rgba(56,210,255,.12));
  backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);
  border:3px solid #38D2FF;
  box-shadow:0 0 18px rgba(56,210,255,.55), 0 4px 14px rgba(0,0,0,.35),
    inset 0 0 14px rgba(56,210,255,.16), inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 0 9px rgba(56,210,255,.55)}
.cta-pioni:active{transform:translateY(1px);box-shadow:0 0 26px rgba(56,210,255,.7),
  inset 0 0 16px rgba(56,210,255,.22)}
@media(max-width:560px){.cta-pioni{font-size:13px;padding:9px 4px;border-width:2.5px}}

/* ---------------------------------------------------------------- flux */
.flux{position:fixed;left:11px;bottom:calc(66px + var(--banda,0px));z-index:11;display:flex;
  flex-direction:column-reverse;gap:5px;max-width:min(330px,74vw);pointer-events:none}
.anunt{background:rgba(26,31,41,.95);border:1px solid var(--linie);
  border-left:3px solid var(--stejar);border-radius:8px;padding:6px 10px;font-size:12px;
  animation:intra .28s ease}
@keyframes intra{from{opacity:0;transform:translateX(-16px)}}

/* ---------------------------------------------------------------- tooltip */
.tooltip{position:fixed;z-index:15;background:rgba(26,31,41,.97);border:1px solid var(--linie);
  border-radius:9px;padding:7px 11px;font-size:12.5px;pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5);white-space:nowrap}
.tooltip b{display:block;font-size:14px;margin-bottom:1px}
.tooltip .tt-f{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--sub)}

/* ---------------------------------------------------------------- foaie UAT */
.foaie{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(58px + var(--banda,0px));z-index:16;
  width:min(430px,calc(100vw - 20px));background:var(--fund2);border:1px solid var(--linie);
  border-radius:18px;padding:16px;box-shadow:0 20px 55px rgba(0,0,0,.65);
  animation:sus .24s cubic-bezier(.2,.8,.3,1)}
@keyframes sus{from{opacity:0;transform:translate(-50%,20px)}}
.maner{display:none}
.inchide{position:absolute;top:7px;right:11px;background:none;border:none;color:var(--sub);
  font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.foaie h2{font-size:21px;font-weight:800;padding-right:28px;line-height:1.15}
.panou-stare{display:flex;align-items:center;gap:11px;margin:13px 0;padding:11px;
  background:rgba(255,255,255,.035);border-radius:11px}
.steag{width:26px;height:26px;border-radius:7px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.p-fact{font-weight:700}
.eticheta{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding:4px 8px;
  border-radius:6px;white-space:nowrap;font-weight:700}
.et-vecin{background:rgba(46,139,74,.16);color:#5FD98C;border:1px solid rgba(46,139,74,.4)}
.et-departe{background:rgba(226,84,43,.14);color:#FF9166;border:1px solid rgba(226,84,43,.38)}
.et-al-meu{background:rgba(255,184,0,.14);color:var(--aur);border:1px solid rgba(255,184,0,.38)}
.avert{background:rgba(255,184,0,.11);border:1px solid rgba(255,184,0,.32);color:var(--aur);
  padding:9px 11px;border-radius:9px;font-size:12.5px;margin-bottom:11px}
.rapid{display:flex;gap:6px;margin-bottom:9px}
.rapid button{flex:1;background:var(--fund);border:1px solid var(--linie);border-radius:9px;
  padding:9px 4px;font-size:13px;font-weight:700;cursor:pointer}
.rapid button:active{border-color:var(--stejar)}
.rapid button.desant{border-color:rgba(226,84,43,.5);color:#FF9166}
.trimite{display:flex;gap:8px}
.trimite input{width:88px;background:var(--fund);border:1px solid var(--linie);
  border-radius:11px;padding:12px;font-size:16px;text-align:center;font-weight:700}
.principal{flex:1;background:linear-gradient(96deg,var(--stejar),var(--lemn));color:#1A1206;
  border:none;border-radius:11px;padding:13px;font-weight:800;font-size:15px;cursor:pointer}
.principal:disabled{opacity:.4}
.principal.mare{width:100%;margin-top:14px}

/* ---------------------------------------------------------------- ecrane pline */
.ecran{position:fixed;inset:0;z-index:22;background:var(--fund);display:flex;
  flex-direction:column;padding-top:var(--sus);padding-bottom:var(--jos)}
.cautare-cap{display:flex;gap:9px;align-items:center;padding:11px;border-bottom:1px solid var(--linie)}
.cautare-cap input{flex:1;background:var(--fund2);border:1px solid var(--linie);
  border-radius:11px;padding:12px 14px;font-size:16px}
.ecran-titlu{flex:1;font-size:18px;font-weight:800}
.text{background:none;border:none;color:var(--stejar);font-size:14px;cursor:pointer;padding:8px}
.judete-rand{display:flex;gap:6px;overflow-x:auto;padding:10px 11px;
  border-bottom:1px solid var(--linie);scrollbar-width:none}
.judete-rand::-webkit-scrollbar{display:none}
.jud-chip{background:var(--fund2);border:1px solid var(--linie);border-radius:999px;
  padding:6px 12px;font-size:12.5px;cursor:pointer;white-space:nowrap;flex:none}
.jud-chip.activ{background:rgba(212,155,85,.16);border-color:var(--stejar);color:var(--stejar)}
.rezultate{flex:1;overflow-y:auto;padding:6px 11px 20px;-webkit-overflow-scrolling:touch}
.rez{display:flex;align-items:center;gap:11px;padding:12px 10px;border-bottom:1px solid var(--linie);
  cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left}
.rez:active{background:var(--fund2)}
.rez-nume{font-weight:600}
.rez-jos{color:var(--sub);font-size:12px}
.rez-p{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;font-size:13px;
  color:var(--sub);white-space:nowrap}
.sumar{display:flex;gap:9px;padding:13px 11px}
.sumar div{flex:1;background:var(--fund2);border:1px solid var(--linie);border-radius:12px;
  padding:11px;text-align:center}
.sumar b{display:block;font-size:22px;font-weight:800;color:var(--stejar)}
.sumar span{font-size:11px;color:var(--sub)}
.gol{text-align:center;color:var(--sub);padding:40px 20px;font-size:13.5px}

/* ---------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:32;background:rgba(10,12,17,.92);display:flex;
  align-items:center;justify-content:center;padding:16px;overflow:auto}
.modal-cutie{background:var(--fund2);border:1px solid var(--linie);border-radius:20px;
  padding:22px;width:min(470px,100%)}
.modal-cutie h1{font-size:24px;font-weight:800;text-align:center}
.factiuni{display:grid;gap:7px;margin-top:16px}
.fact{display:grid;grid-template-columns:auto 1fr;gap:2px 11px;align-items:center;
  text-align:left;background:var(--fund);border:1px solid var(--linie);border-radius:12px;
  padding:11px 13px;cursor:pointer}
.fact.activ{border-color:var(--aur);background:rgba(255,184,0,.07)}
.pastila{width:15px;height:15px;border-radius:5px;grid-row:span 2;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.fact-nume{font-weight:700}
.fact-deviza{color:var(--sub);font-size:12px;grid-column:2}
.camp{display:block;margin-top:15px}
.camp span{display:block;color:var(--sub);font-size:12.5px;margin-bottom:6px}
.camp input{width:100%;background:var(--fund);border:1px solid var(--linie);
  border-radius:11px;padding:12px;font-size:16px}

/* ---------------------------------------------------------------- lateral */
.lateral{position:fixed;top:0;right:0;bottom:0;z-index:24;width:min(350px,90vw);
  background:var(--fund2);border-left:1px solid var(--linie);padding:16px;overflow-y:auto;
  padding-top:calc(16px + var(--sus));animation:dinDreapta .24s ease}
@keyframes dinDreapta{from{transform:translateX(100%)}}
.file{display:flex;gap:6px;margin:4px 30px 4px 0}
.fila{flex:1;background:var(--fund);border:1px solid var(--linie);border-radius:10px;
  padding:9px;font-size:12.5px;cursor:pointer}
.fila.activ{background:rgba(212,155,85,.15);border-color:var(--stejar);color:var(--stejar);font-weight:700}
.rand{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:6px 0}
.rand-nume{font-size:13.5px}
.rand-n{font-weight:800;font-variant-numeric:tabular-nums;font-size:13.5px}
.bara{grid-column:1/-1;height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.bara i{display:block;height:100%;border-radius:2px}
.titlu-aur{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linie)}
.rang{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--aur);
  background:rgba(255,184,0,.12);border-radius:5px;padding:3px 7px;font-weight:700;flex:none}
.sezon-cap{font-weight:800;margin:16px 0 6px;color:var(--stejar)}

/* ---------------------------------------------------------------- mobil */
@media(max-width:560px){
  .foaie{left:0;right:0;bottom:var(--banda,0px);width:100%;transform:none;border-radius:20px 20px 0 0;
    padding:8px 16px calc(16px + var(--jos));animation:sheetUp .26s cubic-bezier(.2,.8,.3,1)}
  @keyframes sheetUp{from{transform:translateY(100%)}}
  .maner{display:block;width:38px;height:4px;border-radius:2px;background:var(--linie);
    margin:2px auto 10px}
  .inchide{top:10px}
  .flux{bottom:auto;top:calc(56px + var(--sus));max-width:calc(100vw - 22px)}
  .marca{font-size:12.5px;letter-spacing:.1em}
  .tooltip{display:none}
}

/* ------------------------------------------------------- mod spectator */
/* /spectator — hartă pe tot ecranul pentru OBS: fără butoane, fără meniuri,
   doar ce trebuie să se vadă în transmisiune. */
body.spectator #bara,body.spectator #subsol,body.spectator #panou,
body.spectator #meniu,body.spectator #cautare,body.spectator #istoric,
body.spectator #onboarding,body.spectator #tooltip{display:none!important}
body.spectator #harta{cursor:default}
.sp{position:fixed;z-index:20;pointer-events:none}
.sp-cap{top:0;left:0;right:0;display:flex;align-items:center;gap:18px;padding:20px 26px;
  background:linear-gradient(180deg,rgba(14,20,32,.94),transparent)}
.sp-cap img{width:56px;height:56px}
.sp-titlu{font-weight:800;letter-spacing:.16em;font-size:24px;
  background:linear-gradient(92deg,#fff,var(--stejar));-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text}
.sp-cron{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--aur);font-weight:800;
  font-size:30px;background:rgba(255,184,0,.12);border:2px solid rgba(255,184,0,.4);
  padding:8px 20px;border-radius:14px}
.sp-scor{bottom:0;left:0;right:0;display:flex;gap:0;height:64px;
  box-shadow:0 -10px 30px rgba(0,0,0,.5)}
.sp-scor div{display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#12151C;font-weight:800;transition:flex-grow .7s cubic-bezier(.2,.8,.3,1)}
.sp-scor b{font-size:21px;line-height:1}
.sp-scor span{font-size:11px;opacity:.8;text-transform:uppercase;letter-spacing:.07em}
.sp-flux{right:26px;top:110px;width:390px;display:flex;flex-direction:column;gap:9px}
.sp-anunt{background:rgba(22,30,45,.94);border:1px solid var(--linie);
  border-left:5px solid var(--stejar);border-radius:11px;padding:12px 15px;font-size:16px;
  animation:spIntra .45s cubic-bezier(.2,.9,.3,1)}
.sp-anunt .mic{display:block;color:var(--sub);font-size:13px;margin-top:3px}
@keyframes spIntra{from{opacity:0;transform:translateX(40px) scale(.94)}}

/* ------------------------------------------------- subsolul meniului + legal */
.meniu-subsol{margin-top:22px;padding-top:14px;border-top:1px solid var(--linie)}
.legaturi-legale{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px}
.legaturi-legale a{color:var(--stejar);text-decoration:none}
.legaturi-legale a:hover{text-decoration:underline}
.leg{color:var(--stejar);text-decoration:none}
.turnstile-box{display:flex;justify-content:center;min-height:70px;align-items:center}

/* ------------------------------------------------------------- brand */
/* Sigla din stânga-sus: mare, ca o pecete. Se revarsă DOAR în jos, peste hartă
   (align-self:flex-start) — cu margini negative în sus ar ieși deasupra
   ecranului și pe mobil s-ar vedea doar jumătatea de jos. */
.sigla-bara{width:84px;height:84px;flex:none;align-self:flex-start;margin:-4px 0 -46px -4px;
  cursor:zoom-in;border-radius:14px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.8))}
.banner{display:block;width:calc(100% + 44px);margin:-22px -22px 10px;border-radius:20px 20px 0 0}
@media(max-width:560px){.sigla-bara{width:60px;height:60px;margin:-2px 0 -28px -2px}}

/* sigla pe tot ecranul */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(6,9,14,.9);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lightbox img{max-width:min(88vw,720px);max-height:82vh;border-radius:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.8), 0 0 40px rgba(56,210,255,.25)}

/* bursa bătăturii: banda de anunțuri care curge în buclă */
:root{--banda:42px}
.banda{position:fixed;left:0;right:0;bottom:0;height:var(--banda);z-index:12;
  display:flex;align-items:center;overflow:hidden;
  background:rgba(9,13,21,.95);border-top:1px solid var(--linie)}
.banda-fir{display:flex;align-items:center;gap:38px;white-space:nowrap;
  padding-left:24px;will-change:transform;animation:curge 55s linear infinite}
.banda:hover .banda-fir{animation-play-state:paused}
.banda-fir a{color:var(--sub);text-decoration:none;font-size:13px;display:flex;
  align-items:center;gap:9px}
.banda-fir a:hover{color:var(--stejar)}
.banda-fir img{width:20px;height:20px;border-radius:5px}
@keyframes curge{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.banda-fir{animation:none}}
body.spectator .banda{display:none!important}

/* insignele SAL/SOL + social în meniul hărții */
.sal-sol-mic{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.sal-sol-mic img{width:201px;max-width:100%;height:auto;border-radius:6px;background:#fff;display:block}
.social-rand{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12.5px}
.social-rand a{color:var(--stejar);text-decoration:none;font-weight:700}
.social-rand:empty{display:none}

/* avatarul de plătitor (rangul pachetului) */
.avatar-mic{width:21px;height:21px;border-radius:6px;vertical-align:-5px;margin-right:5px;
  border:1px solid rgba(255,255,255,.3);box-shadow:0 1px 4px rgba(0,0,0,.4)}