/* =============================================================================
   VERDICT UI v2 — limbajul vizual reîmprospătat
   Sticlă adevărată (Apple-grade), glow cald discret, butoane cu viață,
   temă LIGHT completă. Servit din _navbar către toate paginile.
   Componentele de referință (uiverse) sunt adaptate paletei: aur/navy/violet.
   ============================================================================= */

/* ---------- TEMA LIGHT: tokenii se rescriu în static/tokens.css ---------- */
html[data-theme="light"] body{
  background:
    radial-gradient(1000px 560px at 82% -12%, rgba(96,130,255,.10), transparent 62%),
    radial-gradient(800px 480px at 8% 112%, rgba(184,137,47,.10), transparent 60%),
    var(--ground) !important;
  color:var(--text);
}
html[data-theme="light"]{ background:var(--ground); }

/* ---------- ORBI AMBIENTALI: culoarea din spatele sticlei ----------
   Sticla se citește doar dacă are ce blura. Doi orbi calzi + unul violet,
   ficși, în derivă lentă — subtili, dar suficienți cât blur-ul să respire. */
.vd-orbs{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.vd-orbs i{ position:absolute; display:block; border-radius:50%; will-change:transform; }
.vd-orbs .o1{ width:52vmax; height:52vmax; left:-14vmax; top:-18vmax;
  background:radial-gradient(circle, rgba(var(--gold-rgb),.10), transparent 62%);
  animation:vd-drift1 26s ease-in-out infinite alternate; }
.vd-orbs .o2{ width:46vmax; height:46vmax; right:-16vmax; top:22vh;
  background:radial-gradient(circle, rgba(139,92,246,.09), transparent 60%);
  animation:vd-drift2 32s ease-in-out infinite alternate; }
.vd-orbs .o3{ width:40vmax; height:40vmax; left:24vw; bottom:-22vmax;
  background:radial-gradient(circle, rgba(34,211,238,.05), transparent 58%);
  animation:vd-drift1 38s ease-in-out infinite alternate-reverse; }
@keyframes vd-drift1{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(6vmax,4vmax,0); } }
@keyframes vd-drift2{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-5vmax,6vmax,0); } }
html[data-theme="light"] .vd-orbs .o1{ background:radial-gradient(circle, rgba(184,137,47,.12), transparent 62%); }
html[data-theme="light"] .vd-orbs .o2{ background:radial-gradient(circle, rgba(120,110,255,.10), transparent 60%); }
html[data-theme="light"] .vd-orbs .o3{ background:radial-gradient(circle, rgba(14,127,158,.07), transparent 58%); }
@media (prefers-reduced-motion:reduce){ .vd-orbs i{ animation:none; } }

/* ---------- CARDUL v2: sticlă fără echivoc ----------
   Trei straturi: fundal translucid cu gradient de lumină, blur+saturație
   puternice, muchie de lumină sus (semnătura sticlei Apple). */
.card{
  background:
    linear-gradient(165deg, rgba(255,255,255,.085), rgba(255,255,255,.028) 42%, rgba(255,255,255,.055)) !important;
  backdrop-filter:blur(26px) saturate(1.55) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.55) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(255,255,255,.035),
    0 18px 46px rgba(2,6,18,.38) !important;
}
html[data-theme="light"] .card{
  background:
    linear-gradient(165deg, rgba(255,255,255,.62), rgba(255,255,255,.38) 45%, rgba(255,255,255,.52)) !important;
  backdrop-filter:blur(26px) saturate(1.5) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.5) !important;
  border:1px solid rgba(28,39,64,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 16px 40px rgba(30,48,90,.12) !important;
}

/* ---------- GLOW CALD (card5 adaptat): doar pe cardurile-erou ----------
   Aura aur→chihlimbar în spatele cardului. Fină — se simte, nu deranjează.
   Se aplică manual, cu clasa .glow, doar pe piesele mari. */
.glow{ position:relative; z-index:1; }
.glow::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(135deg, var(--gold-hi) 0%, #7fd6a0 60%, #22d3ee 135%);
  transform:scale(.93) translateY(12px);
  filter:blur(30px); opacity:.17;
  transition:opacity .5s;
}
.glow:hover::before{ opacity:.26; }
html[data-theme="light"] .glow::before{
  background:linear-gradient(135deg, #f2d894 0%, var(--gold-hi) 55%, #cdbcf5 130%);
  opacity:.30; }
html[data-theme="light"] .glow:hover::before{ opacity:.42; }
@media (max-width:760px){ .glow::before{ filter:blur(22px); opacity:.14; } }

/* ---------- BUTOANE v2 ---------- */
/* aurul primar: gradient radial viu + flash de lumină la hover (button2 adaptat) */
.btn-gold, .btn-primary{
  position:relative; overflow:hidden;
  /* The gold fill is forced here, so the ink has to be forced with it — otherwise
     .btn-primary keeps its dark-theme near-white label and reads as pale-on-gold. */
  color:var(--gold-ink) !important;
  background:radial-gradient(120% 160% at 30% 20%, #f4dd9d, var(--gold-hi) 45%, #c0923c 100%) !important;
  box-shadow:0 6px 22px rgba(199,154,68,.30), inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 6px rgba(120,80,10,.25) !important;
  transition:transform .18s, box-shadow .25s;
}
.btn-gold:hover, .btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(199,154,68,.42), inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 6px rgba(120,80,10,.25) !important;
}
.btn-gold:active, .btn-primary:active{ transform:translateY(1px) scale(.99); }
.btn-gold::before, .btn-primary::before{
  content:""; position:absolute; top:7%; left:0; width:14px; height:86%;
  background:#fff; box-shadow:0 0 40px 22px rgba(255,255,255,.9);
  transform:skewX(-20deg); opacity:0; pointer-events:none;
}
.btn-gold:hover::before, .btn-primary:hover::before{ animation:vd-sheen .55s linear; }
@keyframes vd-sheen{ from{ opacity:0; left:-10%; } 50%{ opacity:.85; } to{ opacity:0; left:105%; } }

/* butoanele moi/ghost: sticlă + măturare de lumină discretă */
.btn-soft, .btn-ghost{
  position:relative; overflow:hidden;
  transition:border-color .2s, background .2s, transform .15s;
}
/* no backdrop-filter on .btn-soft: it is opaque (tokens.css), and a blur inside a
   blurred card is what iOS draws as a blank white pill */
.btn-ghost{ backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.btn-soft:hover, .btn-ghost:hover{ border-color:var(--line-gold) !important; transform:translateY(-1px); }
.btn-soft::before, .btn-ghost::before{
  content:""; position:absolute; top:7%; left:0; width:10px; height:86%;
  background:rgba(255,255,255,.85); box-shadow:0 0 26px 14px rgba(255,255,255,.35);
  transform:skewX(-20deg); opacity:0; pointer-events:none;
}
.btn-soft:hover::before, .btn-ghost:hover::before{ animation:vd-sheen .6s linear; }

/* CTA-ul ORBITAL (button1 adaptat): nucleul auriu radial + orbite blurate
   în culorile lumii — DOAR pentru chemarea principală de pe landing. */
.cta-orbit{
  position:relative; cursor:pointer; border:none; border-radius:999px;
  padding:0; display:inline-block; text-align:center; overflow:visible;
  font-weight:600; font-size:16px; letter-spacing:.02em; color:var(--gold-ink);
  background:radial-gradient(circle, var(--gold-pale), var(--gold-hi) 78%);
  box-shadow:0 0 16px rgba(var(--gold-rgb),.55);
}
.cta-orbit::before{
  content:""; position:absolute; inset:0; z-index:3; border-radius:999px; pointer-events:none;
  box-shadow:inset 0 3px 10px rgba(246,227,174,.85), inset 0 -3px 10px rgba(199,154,68,.85);
}
.cta-orbit .wrapper{
  position:relative; display:block; overflow:hidden; border-radius:999px; min-width:210px;
  padding:14px 34px;
  -webkit-mask-image:-webkit-radial-gradient(white, black);
}
.cta-orbit .wrapper span{ position:relative; z-index:2; display:inline-block; }
.cta-orbit .circle{
  position:absolute; left:50%; top:50%; width:26px; height:26px; border-radius:50%;
  filter:blur(var(--blur,9px)); background:var(--bg); transform:translate(-50%,-50%);
  animation:vd-orbit var(--dur,7s) linear infinite; animation-delay:var(--del,0s);
  z-index:1;
}
.cta-orbit .c1{ --bg:rgba(var(--gold-rgb),.85); --dur:6.4s; --del:0s; }
.cta-orbit .c2{ --bg:rgba(139,92,246,.4); --dur:7.6s; --del:-1.4s; --blur:13px; }
.cta-orbit .c3{ --bg:rgba(224,138,106,.75); --dur:6.9s; --del:-2.8s; }
.cta-orbit .c4{ --bg:rgba(34,211,238,.45); --dur:8.4s; --del:-4s; --blur:14px; }
.cta-orbit .c5{ --bg:rgba(246,227,174,.9); --dur:5.8s; --del:-5.2s; --blur:7px; }
.cta-orbit .c6{ --bg:rgba(199,154,68,.8); --dur:9s; --del:-3.4s; --blur:11px; }
@keyframes vd-orbit{
  from{ transform:translate(-50%,-50%) rotate(0deg) translateX(52px) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg) translateX(52px) rotate(-360deg); }
}
.cta-orbit:hover{ box-shadow:0 0 26px rgba(var(--gold-rgb),.8); }
.cta-orbit:active{ transform:scale(.98); }
@media (prefers-reduced-motion:reduce){ .cta-orbit .circle{ animation:none; opacity:.35; } }

/* ---------- INPUTURI: focus cu inel de aur, sticlă fină ---------- */
.field, input.field, input[type="email"], input[type="password"], input[type="text"], input[type="number"]{
  transition:border-color .2s, box-shadow .25s, background .2s;
}
.field:focus, input:focus{
  outline:none;
  border-color:var(--line-gold) !important;
  box-shadow:0 0 0 3px rgba(var(--gold-rgb),.16), 0 4px 18px rgba(0,0,0,.18) !important;
}
html[data-theme="light"] input.field{
  background:rgba(255,255,255,.8); color:var(--text); border-color:var(--line);
}
/* wrapperul .field e doar grupare — nu are voie sa picteze nimic */
.field{ background:none !important; border:none !important; box-shadow:none !important; }

/* ---------- COMUTATORUL DE TEMĂ (soare/lună, compact) ---------- */
.vd-theme{ --w:46px; --h:24px; position:relative; display:inline-block;
  width:var(--w); height:var(--h); flex:none; cursor:pointer; }
.vd-theme input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.vd-theme .tr{ position:absolute; inset:0; border-radius:999px; overflow:hidden;
  background:linear-gradient(180deg,#0e1526,#1b2440);
  border:1px solid rgba(240,237,230,.14);
  transition:background .4s, border-color .4s; }
.vd-theme .orb{ position:absolute; top:2px; left:2px; width:calc(var(--h) - 6px); height:calc(var(--h) - 6px);
  border-radius:50%; background:#e8e4d8;
  box-shadow:inset -3px -2px 0 0 #b9b3a4;      /* luna */
  transition:transform .4s cubic-bezier(.5,1.4,.4,1), box-shadow .3s, background .3s; }
.vd-theme .st{ position:absolute; border-radius:50%; background:rgba(240,237,230,.8);
  transition:opacity .3s; }
.vd-theme .s1{ width:2px; height:2px; right:9px; top:6px; }
.vd-theme .s2{ width:1.5px; height:1.5px; right:15px; top:13px; }
.vd-theme .s3{ width:2px; height:2px; right:20px; top:8px; }
.vd-theme input:checked + .tr{ background:linear-gradient(180deg,#7ec3f2,#cfe8fb); border-color:rgba(30,60,120,.2); }
.vd-theme input:checked + .tr .orb{ transform:translateX(calc(var(--w) - var(--h) + 1px));
  background:#ffd215; box-shadow:0 0 10px 2px rgba(255,210,21,.55); }
.vd-theme input:checked + .tr .st{ opacity:0; }

/* ---------- NAVBAR: sticlă mai fermă + hover cu viață ---------- */
/* Near-opaque: the text scrolling under the bar must not show through. The blur
   alone was not enough (where backdrop-filter is not drawn, the 8-12% left of
   the page under it read as ghost words over the logo). */
.gnav.scrolled{
  background:rgba(10,13,22,.97) !important;
  backdrop-filter:blur(26px) saturate(1.5) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.5) !important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.05), 0 10px 34px rgba(0,0,0,.28);
}
.gnav-link{ position:relative; overflow:hidden; transition:color .2s, background .2s; }
.gnav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  border-radius:2px; background:linear-gradient(90deg, transparent, var(--gold, var(--gold-hi)), transparent);
  transform:scaleX(0); transition:transform .28s; }
.gnav-link:hover::after, .gnav-link.on::after{ transform:scaleX(1); }
html[data-theme="light"] .gnav.scrolled{
  background:rgba(255,255,255,.97) !important;
  border-color:rgba(28,39,64,.08) !important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.7), 0 10px 30px rgba(30,48,90,.10);
}
html[data-theme="light"] .gnav a, html[data-theme="light"] .gnav-link{ color:#3b4763; }
html[data-theme="light"] .gnav-link.on{ color:#7a5509; background:rgba(184,137,47,.10); }   /* --gold on this tint: 4.27:1 */
html[data-theme="light"] .gnav-user{ color:var(--text); border-color:rgba(28,39,64,.14);
  background:rgba(255,255,255,.5); }
html[data-theme="light"] .gscore b{ color:var(--text); }
html[data-theme="light"] .gnav-lang{ color:#566173;   /* was 2.8:1 */ }
html[data-theme="light"] .audio-toggle{ border-color:rgba(28,39,64,.14); background:rgba(255,255,255,.5); }
html[data-theme="light"] .audio-toggle svg{ stroke:#46536f; }

/* dockul mobil pe light */
html[data-theme="light"] .gbnav{
  background:rgba(255,255,255,.98); border-top-color:rgba(28,39,64,.08); }
html[data-theme="light"] .gbnav a{ color:#4f5a6e;   /* was 3.4:1 */ }
html[data-theme="light"] .gbnav a.on{ color:var(--gold); }

/* footer pe light */
html[data-theme="light"] .vfoot{ color:#525d77; }   /* 5.5:1 on the light ground (#6a7590 was 4.1) */

/* snackbarul de notificari si panoul, pe light */
html[data-theme="light"] .vn-ask{
  background:rgba(255,255,255,.9); border-color:rgba(28,39,64,.12); color:var(--text); }
html[data-theme="light"] .vn-ask-h b{ color:var(--text); }
html[data-theme="light"] .vn-ask p{ color:#5a6580; }
html[data-theme="light"] .vn-panel{ background:#fafbfe; color:var(--text); }   /* opaque: the page showed through */

/* ---------- SCROLLBAR pe light ---------- */
html[data-theme="light"] ::-webkit-scrollbar-thumb{ background:rgba(184,137,47,.35); }
html[data-theme="light"] ::-webkit-scrollbar-track{ background:rgba(28,39,64,.06); }

/* ---------- LIGHT: identitate si detalii care nu traiesc prin tokeni ---------- */
/* logo-ul: wordmarkul alb devine navy pe fundal deschis */
html[data-theme="light"] .gnav-logo{ content:url('/static/brand/logo-horizontal-light.png?v=bd069e04a9'); }   /* ?v=: the file's hash (the name came in with Veros) */
@media (max-width:1220px){   /* the round mark on phones and tablets (navbar.css) */
  html[data-theme="light"] .gnav-logo{ content:url('/static/brand/logo-icon.png'); }
}
/* partenerii din footer: logo-ul alb terminal43 se intoarce in cerneala */
/* clopotelul si iconitele line-art din bara */
html[data-theme="light"] .gnav svg{ stroke:#46536f; }
html[data-theme="light"] .gnav .gnav-cta{ color:var(--gold-ink); }
/* tile-ul hartii de pe Home: pastreaza-si noaptea — e o fereastra spre joc */
html[data-theme="light"] .play-big.map{
  background:linear-gradient(160deg,#0d2733,#0a1a26) !important; color:#e8f4f8 !important;
  border-color:rgba(34,211,238,.3) !important; }
html[data-theme="light"] .play-event{ color:#f3edff !important; }
/* randurile de meci si listele: liniile fine se inchid la culoare */
html[data-theme="light"] .m-row{ border-bottom-color:rgba(28,39,64,.08); }

/* ---------- LIGHT: pop-urile de detalii (ranguri, monede, badge-uri) ---------- */
html[data-theme="light"] .pc-pop,
html[data-theme="light"] .cit-pop,
html[data-theme="light"] .shc-pop,
html[data-theme="light"] .shc-tip{
  background:linear-gradient(165deg, rgba(255,255,255,.97), rgba(243,246,252,.97)) !important;
  border-color:rgba(28,39,64,.14) !important;
  box-shadow:0 24px 60px rgba(30,48,90,.18) !important;
  color:var(--text);
}
html[data-theme="light"] .pc-pop h4{ color:var(--dim); }
html[data-theme="light"] .pr:hover{ background:rgba(28,39,64,.05); }
html[data-theme="light"] .pr.cur{ background:rgba(184,137,47,.10); }
html[data-theme="light"] .rank-next{ border-bottom-color:var(--line); }
html[data-theme="light"] .cit-pop b, html[data-theme="light"] .shc-tip b{ color:var(--gold); }
/* hoverul „scufundat" al randurilor si intrarilor de meniu */
html[data-theme="light"] .m-row:hover{ background:rgba(28,39,64,.04); }

/* ---------- LIGHT: formularele de logare/inregistrare ---------- */
html[data-theme="light"] .field input, html[data-theme="light"] .field select,
html[data-theme="light"] input.field, html[data-theme="light"] textarea{
  background:rgba(255,255,255,.85) !important; color:var(--text) !important;
  border-color:var(--line) !important;
}
html[data-theme="light"] .field label{ color:var(--dim); }
html[data-theme="light"] .auth-sub{ color:var(--soft); }
html[data-theme="light"] .switch, html[data-theme="light"] .switch a{ color:var(--soft); }

/* ---------- SCENELE INTUNECATE (arena, harta): chromul ramane de noapte ----------
   Canvasul lor e mereu intunecat; textul inchis al temei light ar muri pe el. */
html[data-theme="light"] .dark-stage .gnav a,
html[data-theme="light"] .dark-stage .gnav-link{ color:#c9c2b4; }
html[data-theme="light"] .dark-stage .gnav-link.on{ color:var(--gold-hi); background:rgba(var(--gold-rgb),.09); }
html[data-theme="light"] .dark-stage .gnav svg{ stroke:#c9c2b4; }
html[data-theme="light"] .dark-stage .gnav-user{ color:#f0ede6; border-color:rgba(240,237,230,.12);
  background:rgba(255,255,255,.04); }
html[data-theme="light"] .dark-stage .gscore b{ color:#f0ede6; }
html[data-theme="light"] .dark-stage .gnav-lang{ color:#7d7a70; }
html[data-theme="light"] .dark-stage .audio-toggle{ border-color:rgba(240,237,230,.14);
  background:rgba(255,255,255,.05); }
html[data-theme="light"] .dark-stage .audio-toggle svg{ stroke:#c9c2b4; }
html[data-theme="light"] .dark-stage .gnav.scrolled{
  background:rgba(10,13,22,.97) !important; border-color:rgba(240,237,230,.08) !important; }
html[data-theme="light"] .dark-stage .gnav-logo{ content:url('/static/brand/logo-horizontal.png?v=732e43f908'); }
@media (max-width:1220px){
  html[data-theme="light"] .dark-stage .gnav-logo{ content:url('/static/brand/logo-icon.png'); }
}
@media (max-width:760px){
  html[data-theme="light"] .dark-stage .gbnav{ background:rgba(9,12,20,.97);
    border-top-color:rgba(240,237,230,.09); }
  html[data-theme="light"] .dark-stage .gbnav a{ color:#8f8b7f; }
  html[data-theme="light"] .dark-stage .gbnav a.on{ color:var(--gold-hi); }
}

/* ---------- AVATARUL din navbar: inel de aur, viu la hover ---------- */
.gnav-user img{
  box-shadow:0 0 0 2px var(--ground-2, #0d1424), 0 0 0 3.5px var(--gold, var(--gold-hi)),
    0 2px 10px rgba(0,0,0,.35);
  transition:transform .18s, box-shadow .25s;
}
.gnav-user:hover img{
  transform:scale(1.07);
  box-shadow:0 0 0 2px var(--ground-2, #0d1424), 0 0 0 3.5px var(--gold, var(--gold-hi)),
    0 0 14px rgba(var(--gold-rgb),.55);
}
html[data-theme="light"] .gnav-user img{
  box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--gold), 0 2px 10px rgba(30,48,90,.25);
}

/* ---------- AUTOFILL: fara albastrul Chrome peste campuri ---------- */
input:-webkit-autofill, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #10192e inset !important;
  -webkit-text-fill-color:#f0ede6 !important;
  caret-color:#f0ede6;
  transition:background-color 99999s ease-in-out 0s;
}
html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] input:-webkit-autofill:hover,
html[data-theme="light"] input:-webkit-autofill:focus,
html[data-theme="light"] input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color:#1c2740 !important;
  caret-color:#1c2740;
}
/* textul campurilor pe light: cerneala, nu gri */
html[data-theme="light"] .field input{ color:#1c2740 !important; font-weight:500; }

/* ---------- LIGHT: etichetele formularului — text simplu, fara chenar ---------- */
html[data-theme="light"] .field label{
  background:transparent !important; border:none !important;
  color:#5a6580; font-weight:600;
}
html[data-theme="light"] .field input{
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(28,39,64,.16) !important;
}

/* ---------- LIGHT: scara de ranguri (sina + cerculete) ---------- */
html[data-theme="light"] .ladline .railbg{
  background:#dce3f0;
  box-shadow:inset 0 1px 2px rgba(30,48,90,.18), inset 0 -1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] .ladline .dot{
  background:#ffffff; border-color:rgba(28,39,64,.28);
}
html[data-theme="light"] .ladline .dot.on{ border-color:#b8892f; background:var(--gold-hi); }
html[data-theme="light"] .ladline .dot.cur{
  border-color:#b8892f; background:#d9b45a;
  box-shadow:0 0 0 3px rgba(184,137,47,.20), 0 0 10px rgba(184,137,47,.55);
}
html[data-theme="light"] .ladline .fill{
  background:linear-gradient(90deg,var(--gold-deep),#e3bd62);
  box-shadow:0 0 10px rgba(184,137,47,.45);
}

/* ---------- NAVBAR IDENTIC PESTE TOT ----------
   Paginile de scena (arena, harta) isi definesc propriile stiluri de .audio-toggle;
   aici le tintuim pe standardul barei, indiferent de pagina. */
.gnav .audio-toggle{
  display:inline-grid !important; place-items:center !important;
  width:30px !important; height:30px !important; flex:none !important;
  padding:0 !important; margin:0 !important;
  border-radius:9px !important;
  border:1px solid rgba(240,237,230,.14) !important;
  background:rgba(255,255,255,.05) !important;
  position:static !important; box-shadow:none !important;
}
.gnav .audio-toggle svg{ width:16px !important; height:16px !important; stroke:#c9c2b4 !important; }
.gnav .audio-toggle:hover{ border-color:rgba(var(--gold-rgb),.5) !important; }
.gnav .audio-toggle:hover svg{ stroke:var(--gold-hi) !important; }
html[data-theme="light"] body:not(.dark-stage) .gnav .audio-toggle{
  border-color:rgba(28,39,64,.14) !important; background:rgba(255,255,255,.5) !important; }
html[data-theme="light"] body:not(.dark-stage) .gnav .audio-toggle svg{ stroke:#46536f !important; }

/* etichetele formularelor: text pur, nimic desenat in jurul lor — pe orice tema */
.field label, #auth-form label{
  background:none !important; border:none !important; box-shadow:none !important;
  outline:none !important; text-shadow:none !important;
}

/* =============================================================================
   LIGHT: interfata Hartii Lumii — pastile, dock, panouri si popupul de cucerire
   ============================================================================= */
html[data-theme="light"] #mapmode,
html[data-theme="light"] .globe-app .dock{
  background:linear-gradient(160deg, rgba(255,255,255,.86), rgba(244,247,252,.78)) !important;
  border:1px solid rgba(28,39,64,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(30,48,90,.12);
}
html[data-theme="light"] #mapmode button{ color:#46536f; }
html[data-theme="light"] #mapmode button.active{
  background:linear-gradient(180deg,#e3bd62,#b8892f) !important; color:var(--gold-ink) !important; }   /* white on gold was 2.35:1 */
html[data-theme="light"] #mapmode .mm-theme{ color:#7a5509;
  background-image:linear-gradient(45deg,transparent 50%,#7a5509 50%),linear-gradient(135deg,#7a5509 50%,transparent 50%); }
/* the rank name and the big gold numbers start from a pale gold made for the
   night: on white their first letters faded out */
html[data-theme="light"] .pc-rankbig span, html[data-theme="light"] .rankbig #p-rank,
html[data-theme="light"] .pp-rank span, html[data-theme="light"] .wdp-rank span,
html[data-theme="light"] .acc-big{
  background:linear-gradient(160deg,#7a5408,#5e4006 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
html[data-theme="light"] #mapmode a{ color:var(--gold) !important; }
html[data-theme="light"] .globe-app .btn{ color:#46536f; background:rgba(28,39,64,.05); }
html[data-theme="light"] .globe-app .btn:hover{ background:rgba(28,39,64,.10); }
html[data-theme="light"] .globe-app .btn--primary{
  color:#6b4c0d; background:linear-gradient(180deg, rgba(var(--gold-rgb),.55), rgba(199,154,68,.30));
  border:1px solid rgba(184,137,47,.4) !important; }
html[data-theme="light"] .globe-app .hint{   /* #5a6580 on .7: 4.45:1 at worst on a phone */
  color:#46516c; background:rgba(255,255,255,.88); border-color:rgba(28,39,64,.10); }
html[data-theme="light"] .globe-app{ color:var(--text); }

/* panoul lateral (clasamentul Domniei, imperiul meu) */
html[data-theme="light"] .st-tab{ background:rgba(28,39,64,.05); color:#46536f;
  border-color:rgba(28,39,64,.12); }
html[data-theme="light"] .st-tab:hover{ background:rgba(28,39,64,.10); }
html[data-theme="light"] .st-tab.is-active{
  background:linear-gradient(95deg,#f0d488,#d9ad55); color:var(--gold-ink); }
html[data-theme="light"] .st-x{ background:rgba(28,39,64,.06); color:#46536f; }
html[data-theme="light"] .st-x:hover{ background:rgba(28,39,64,.12); color:#1c2740; }
html[data-theme="light"] .st-season{ border-bottom-color:rgba(28,39,64,.10); }
html[data-theme="light"] .st-season .sname{ color:var(--gold); }
html[data-theme="light"] .st-season .scount,
html[data-theme="light"] .st-sub, html[data-theme="light"] .st-stat span{ color:#5a6580; }
html[data-theme="light"] .st-season .sleft b,
html[data-theme="light"] .st-num{ color:var(--text); }
html[data-theme="light"] .st-season .sleft span,
html[data-theme="light"] .st-num small, html[data-theme="light"] .st-empty{ color:var(--dim); }
html[data-theme="light"] .st-rank, html[data-theme="light"] .st-stat b{ color:var(--gold); }
html[data-theme="light"] .standings .st-row{ border-color:rgba(28,39,64,.10); background:rgba(255,255,255,.6); }
html[data-theme="light"] .standings .st-row.mine{ border-color:rgba(184,137,47,.5); background:rgba(var(--gold-rgb),.14); }
html[data-theme="light"] .st-stat{ background:rgba(255,255,255,.65); border:1px solid rgba(28,39,64,.08); }

/* popupul de cucerire a teritoriului */
html[data-theme="light"] .cyber-modal__backdrop{
  background:radial-gradient(900px 600px at 50% -10%, rgba(184,137,47,.10), transparent 60%),
    rgba(226,234,247,.66); }
html[data-theme="light"] .cyber-modal__dialog{
  color:var(--text);
  background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(243,246,252,.88));
  border-color:rgba(28,39,64,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 30px 70px rgba(30,48,90,.20); }
html[data-theme="light"] .cyber-modal__dialog h1, html[data-theme="light"] .cyber-modal__dialog h2,
html[data-theme="light"] .cyber-modal__dialog h3, html[data-theme="light"] .cyber-modal__dialog h4,
html[data-theme="light"] .cyber-modal__dialog p, html[data-theme="light"] #result-title{ color:var(--text); }
html[data-theme="light"] .cyber-modal__dialog b{ color:#6b4c0d; }
html[data-theme="light"] .cyber-modal__header{ border-bottom-color:rgba(28,39,64,.10); }
html[data-theme="light"] .cyber-pill{ color:var(--gold-ink); background:linear-gradient(95deg,#f0d488,#d9ad55); }   /* ink on gold: white was 2.3:1 */
html[data-theme="light"] .cyber-close{ background:rgba(28,39,64,.06); color:#46536f; }
html[data-theme="light"] .cyber-close:hover{ background:rgba(28,39,64,.12); color:#1c2740; }
html[data-theme="light"] .scenario-summary{ color:var(--soft); }
html[data-theme="light"] .scenario-meta{ color:var(--dim); }

/* ---------- GRUPUL DE CONTROALE: sunet · temă · clopoțel, identice ---------- */
.gnav-ctrls{ display:inline-flex; align-items:center; gap:6px; }
.vd-theme-in{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.gnav .audio-toggle, .vd-theme-btn{
  position:relative; display:inline-grid !important; place-items:center !important;
  width:32px !important; height:32px !important; flex:none !important; padding:0 !important;
  border:1px solid rgba(255,255,255,.1) !important; border-radius:10px !important;
  background:rgba(255,255,255,.03) !important; cursor:pointer;
  transition:border-color .15s, background .15s; box-shadow:none !important;
}
.gnav .audio-toggle svg, .vd-theme-btn svg{
  width:17px !important; height:17px !important; fill:none; stroke:#c9c2b4; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .15s; }
.gnav .audio-toggle:hover, .vd-theme-btn:hover{
  border-color:rgba(var(--gold-rgb),.5) !important; background:rgba(var(--gold-rgb),.07) !important; }
.gnav .audio-toggle:hover svg, .vd-theme-btn:hover svg{ stroke:var(--gold-hi); }
/* soare/luna: doar una vizibila, cu rotire scurta la schimb */
.vd-theme-btn .ic-sun{ display:none; }
.vd-theme-btn.is-light .ic-moon{ display:none; }
.vd-theme-btn.is-light .ic-sun{ display:block; stroke:#e8a93a; }
.vd-theme-btn:active svg{ transform:rotate(-25deg); }
/* pe tema light, cardurile de control se albesc odata cu bara */
html[data-theme="light"] .gnav .audio-toggle, html[data-theme="light"] .vd-theme-btn,
html[data-theme="light"] .vn-bell{
  border-color:rgba(28,39,64,.14) !important; background:rgba(255,255,255,.55) !important; }
html[data-theme="light"] .gnav .audio-toggle svg, html[data-theme="light"] .vd-theme-btn svg,
html[data-theme="light"] .vn-bell svg{ stroke:#46536f; }
html[data-theme="light"] .gnav .audio-toggle:hover, html[data-theme="light"] .vd-theme-btn:hover,
html[data-theme="light"] .vn-bell:hover{
  border-color:rgba(184,137,47,.6) !important; background:rgba(var(--gold-rgb),.20) !important; }
html[data-theme="light"] .gnav .audio-toggle:hover svg,
html[data-theme="light"] .vd-theme-btn:hover svg, html[data-theme="light"] .vn-bell:hover svg{ stroke:#8a6410; }
html[data-theme="light"] .vd-theme-btn.is-light .ic-sun{ stroke:#c98a12; }
/* vechiul comutator glisant nu se mai foloseste */
.vd-theme{ display:none !important; }

/* ---------- LIGHT: accentele de hover devin albastre (aurul dispare pe alb) ---------- */
html[data-theme="light"] .card:hover{ border-color:rgba(58,96,180,.34) !important; }
html[data-theme="light"] .btn-soft:hover, html[data-theme="light"] .btn-ghost:hover{
  border-color:rgba(58,96,180,.45) !important;
  background:linear-gradient(rgba(58,96,180,.08), rgba(58,96,180,.08)), rgba(255,255,255,.88) !important; }
html[data-theme="light"] .glow::before{
  background:linear-gradient(135deg, #7fa4e8 0%, #a8c4f0 55%, #dfe8fa 130%) !important;
  opacity:.42 !important; }
html[data-theme="light"] .glow:hover::before{ opacity:.55 !important; }

/* ---------- grupul de controale: strans, cu limba alaturi ---------- */
.gnav-scores{ gap:8px !important; }
.gnav-scores .vn-bell + .audio-toggle{ margin-left:-2px; }
.gnav-scores .gnav-lang{ padding:0 2px !important; margin-left:2px; }
.gnav .audio-toggle{ margin:0 !important; }

/* ---------- hover sunet/temă/clopoțel pe LIGHT (peste stilurile paginii) ---------- */
html[data-theme="light"] .gnav .audio-toggle:hover,
html[data-theme="light"] .gnav .vd-theme-btn:hover,
html[data-theme="light"] .gnav .vn-bell:hover,
html[data-theme="light"] .audio-toggle:hover{
  border-color:rgba(58,96,180,.45) !important;
  background:rgba(58,96,180,.10) !important;
}
html[data-theme="light"] .gnav .audio-toggle:hover svg,
html[data-theme="light"] .gnav .vd-theme-btn:hover svg,
html[data-theme="light"] .gnav .vn-bell:hover svg,
html[data-theme="light"] .audio-toggle:hover svg{ stroke:#2b4c8f !important; }
html[data-theme="light"] .vd-theme-btn.is-light:hover .ic-sun{ stroke:#c98a12 !important; }

/* =============================================================================
   LIGHT: skeletoane si ecrane de incarcare — nimic intunecat pe tema deschisa
   ============================================================================= */
html[data-theme="light"] .cskel{
  background:linear-gradient(160deg, #eef2f9, #e2e8f4) !important; }
html[data-theme="light"] .cskel i,
html[data-theme="light"] .skrow, html[data-theme="light"] .skc,
html[data-theme="light"] .tskel, html[data-theme="light"] .askel,
html[data-theme="light"] .hskel{
  background:linear-gradient(160deg, rgba(28,39,64,.10), rgba(28,39,64,.05)) !important;
  box-shadow:inset 0 0 0 1px rgba(28,39,64,.06) !important;
}
html[data-theme="light"] .cskel::after, html[data-theme="light"] .hskel::after,
html[data-theme="light"] .askel::after, html[data-theme="light"] .skrow::after{
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.85), transparent) !important;
}
html[data-theme="light"] #pgbar{
  background:linear-gradient(90deg, var(--gold-deep), #e3bd62) !important; }
/* fundalul instant al paginilor standalone (arena/harta) pe light */
html[data-theme="light"] body{ background-color:var(--ground) !important; }

/* imaginile deja incarcate nu au voie sa poarte fundal de skeleton */
html[data-theme="light"] img.sk.ldd,
html[data-theme="light"] img.sk.skbare:not(.ldd){ background:none !important; box-shadow:none !important; }

/* Pe tema light imaginile nu primesc skeleton propriu — gazdele (.cskel/.hskel) acopera
   deja zona, si un fundal ramas pe un icon incarcat se vede ca o pata gri. */
html[data-theme="light"] img.sk, html[data-theme="light"] img.sk:not(.ldd),
html[data-theme="light"] :where(img.sk){
  background:none !important; box-shadow:none !important; animation:none !important;
}

/* ---------- LIGHT: lizibilitate pe butoane si popupuri ---------- */
/* butonul soft (Exploreaza harta) nu se mai inchide la hover */
html[data-theme="light"] .btn-soft:hover, html[data-theme="light"] .btn-ghost:hover,
html[data-theme="light"] .hero-ctas .btn-soft:hover{
  background:linear-gradient(rgba(58,96,180,.08), rgba(58,96,180,.08)), rgba(255,255,255,.88) !important;
  color:#1c2740 !important;
  border-color:rgba(58,96,180,.45) !important;
}
html[data-theme="light"] .btn-soft, html[data-theme="light"] .btn-ghost{ color:#33415f; }
/* v32: butoanele soft (Setări / Log out de pe cont) aveau fundalul navy de pe
   dark — pe alb ieșeau aproape negre. Pe light devin albe, cu contur discret. */
html[data-theme="light"] .btn-soft{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(28,39,64,.2) !important; }
/* butonul Marii Judecati din arena: text lizibil pe violet deschis */
html[data-theme="light"] #btn-gj{
  background:linear-gradient(180deg,#8b5cf6,#6d34d6) !important;
  color:#fff !important; border-color:rgba(109,52,214,.5) !important;
  text-shadow:0 1px 2px rgba(30,10,60,.35); }
html[data-theme="light"] #btn-gj:hover{
  background:linear-gradient(180deg,#7c4ce8,#5c27c4) !important; }
/* numele jucatorului de pe popupul arenei */
html[data-theme="light"] .idp-nm{
  background:linear-gradient(160deg,#8a6410,#6b4c0d 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- LIGHT: bara/panoul de notificari — text lizibil ---------- */
html[data-theme="light"] .vn-panel{ color:var(--text) !important; }
html[data-theme="light"] .vn-head h4, html[data-theme="light"] .vn-item b,
html[data-theme="light"] .vn-item .vn-t{ color:var(--text) !important; }
html[data-theme="light"] .vn-item, html[data-theme="light"] .vn-item p,
html[data-theme="light"] .vn-item .vn-b{ color:#46536f !important; }
html[data-theme="light"] .vn-item small, html[data-theme="light"] .vn-ago,
html[data-theme="light"] .vn-empty{ color:#7b869c !important; }
html[data-theme="light"] .vn-item{ border-color:rgba(28,39,64,.10) !important; }
html[data-theme="light"] .vn-item:hover{ background:rgba(28,39,64,.05) !important; }
html[data-theme="light"] .vn-head, html[data-theme="light"] .vn-foot{
  border-color:rgba(28,39,64,.10) !important; }
html[data-theme="light"] .vn-foot button{ color:#46536f !important; }
html[data-theme="light"] .vn-foot button:hover{ color:var(--gold) !important; }
html[data-theme="light"] .vn-x{ color:#46536f !important; }
html[data-theme="light"] #vn-toasts .vn-toast{
  background:rgba(255,255,255,.95) !important; color:var(--text) !important;
  border-color:rgba(28,39,64,.12) !important;
  box-shadow:0 18px 44px rgba(30,48,90,.18) !important; }
html[data-theme="light"] #vn-toasts .vn-toast b{ color:var(--text) !important; }
html[data-theme="light"] #vn-toasts .vn-toast p{ color:#46536f !important; }

/* ---------- LIGHT: popoverul de volum al sunetului ---------- */
html[data-theme="light"] .audio-pop{
  background:linear-gradient(160deg, rgba(255,255,255,.97), rgba(243,246,252,.97)) !important;
  border-color:rgba(28,39,64,.14) !important;
  box-shadow:0 16px 44px rgba(30,48,90,.20) !important;
}
/* the slider element is a tall transparent hit area now: only its track is drawn */
html[data-theme="light"] .audio-range::-webkit-slider-runnable-track{ background:rgba(28,39,64,.16) !important; }
html[data-theme="light"] .audio-range::-moz-range-track{ background:rgba(28,39,64,.16) !important; }
html[data-theme="light"] .audio-range::-webkit-slider-thumb{
  background:#b8892f !important; box-shadow:0 1px 5px rgba(30,48,90,.28) !important; }
html[data-theme="light"] .audio-range::-moz-range-thumb{ background:#b8892f !important; }
html[data-theme="light"] .audio-val{ color:#8a6410 !important; }

/* ---------- LIGHT: bannerul de cookie-uri ---------- */
html[data-theme="light"] #cookie{
  background:linear-gradient(160deg, rgba(255,255,255,.96), rgba(243,246,252,.96)) !important;
  border-color:rgba(28,39,64,.14) !important; color:var(--text) !important;
  box-shadow:0 18px 44px rgba(30,48,90,.18) !important; }
html[data-theme="light"] #cookie p, html[data-theme="light"] #cookie span{ color:#46536f !important; }
html[data-theme="light"] #cookie a{ color:#8a6410 !important; }

/* =============================================================================
   ACCESIBILITATE: focusul se vede, tastatura conteaza
   ============================================================================= */
:focus-visible{
  outline:2px solid var(--gold, var(--gold-hi)) !important;
  outline-offset:2px;
  /* no border-radius here: it reshaped the element itself, so every round
     button turned into a rectangle on focus. The outline follows the element's
     own rounding. */
}
html[data-theme="light"] :focus-visible{ outline-color:#8a6410 !important; }
.skip-link{
  position:fixed; top:-48px; left:14px; z-index:300;
  padding:10px 18px; border-radius:0 0 12px 12px;
  background:var(--gold, var(--gold-hi)); color:var(--gold-ink); font-weight:600; font-size:13.5px;
  text-decoration:none; transition:top .2s;
}
.skip-link:focus{ top:0; }
html[data-theme="light"] .skip-link{ color:#fff; }
/* the map's own language switch: the gold it is given inline was 4.49:1 on the light dock */
html[data-theme="light"] .globe-app .dock a[style*="var(--gold)"]{ color:#7a5509 !important; }   /* dark ink on the light theme's gold was 3.3:1 */
/* the skip-link targets take focus only so Tab continues from there: no ring */
#main[tabindex="-1"]:focus, #app[tabindex="-1"]:focus, #lobby[tabindex="-1"]:focus{ outline:none; }

/* =============================================================================
   FOOTERUL UNIC (.vfoot, markup in templates/_footer.html)
   Acelasi pe toate paginile: aceeasi inaltime, aceleasi distante. O singura
   grila de 5 coloane, ca fiecare set de socialuri sa stea fix sub logo-ul
   partenerului lui, pe acelasi rand cu VERDICT si cu linkurile.
   Socialurile: o capsula de sticla per partener; glifa atinsa se aprinde in
   aur (ca .btn-gold) si isi arata numele deasupra.
   ============================================================================= */
.vfoot{ position:relative; z-index:2; flex:none; width:100%; max-width:var(--w-wide,1280px);
  margin:0 auto; padding:0 28px 22px; color:var(--dim); font-size:13px;
  view-transition-name:gfoot; }
.vfoot a{ color:inherit; text-decoration:none; }
.vf-grid{ display:grid; grid-template-columns:1fr auto auto auto 1fr;
  column-gap:24px; align-items:center; justify-items:center; }

/* randul 1-2: eticheta + partenerii, in penumbra pana la hover */
.vf-lbl{ grid-area:1/2/2/5; margin:14px 0 10px; font-size:11px;
  letter-spacing:.3em; text-transform:uppercase; }
.vf-p1{ grid-area:2/2; } .vf-x{ grid-area:2/3; } .vf-p2{ grid-area:2/4; }
.vf-p{ display:flex; align-items:center; gap:9px; }
.vf-p b{ font-weight:500; font-size:13.5px; letter-spacing:.05em; color:var(--soft); }
.vf-t43{ height:26px; width:auto; display:block; }
.vf-jur{ height:18px; width:auto; display:block; border-radius:3px; }
.vf-x{ font-family:var(--disp); font-style:italic; font-size:15px; }
/* the partners were at 35% opacity and grey (about 2:1 against the footer): they
   are named here, so they have to be readable; hover brings the full colour */
.vf-p, .vf-x, .vf-brand{ opacity:.9; filter:saturate(.45);
  transition:opacity .35s, filter .35s; }
.vf-grid:hover .vf-p, .vf-grid:hover .vf-x, .vf-brand:hover{ opacity:1; filter:none; }

/* linia: aceeasi hairline ca inainte, cu un abur de aur deasupra socialurilor */
.vf-rule{ grid-area:3/1/4/-1; justify-self:stretch; height:1px; margin-top:12px;
  background:linear-gradient(90deg, var(--line), var(--line-gold) 50%, var(--line)); }

/* randul 3: VERDICT · socialuri · socialuri · linkuri */
.vf-brand{ grid-area:4/1; justify-self:start; display:flex; align-items:center; gap:9px; }
.vf-brand img{ height:24px; width:auto; display:block; }
.vf-brand b{ font-weight:500; font-size:14px; letter-spacing:.05em; color:var(--soft); }
.vf-s1{ grid-area:4/2; } .vf-s2{ grid-area:4/4; }
.vf-links{ grid-area:4/5; justify-self:end; display:flex; gap:22px; flex-wrap:wrap; }
.vf-links a{ transition:color .2s; }
.vf-links a:hover{ color:var(--text); }
.vf-brand, .vf-soc, .vf-links{ margin-top:13px; }

/* capsula: sticla aproape invizibila in repaus. La hover conturul se aprinde in
   aur (::after, doar opacity) si sub glifa atinsa aluneca o pastila de aur
   (::before, doar transform) — ambele ruleaza pe compositor, deci raman fluide.
   :has() spune pastilei pe ce pozitie sa stea (--i) si daca sa se arate (--on). */
.vf-soc{ --w:24px; --g:2px; --i:0; --on:0;
  position:relative; isolation:isolate; display:inline-flex; align-items:center;
  gap:var(--g); padding:2px; border-radius:999px;
  border:1px solid rgba(240,237,230,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); }
.vf-soc::before{ content:""; position:absolute; z-index:-1; left:2px; top:2px;
  width:var(--w); height:calc(100% - 4px); border-radius:999px;
  background:radial-gradient(120% 120% at 50% 0%, rgba(var(--gold-rgb),.30), rgba(var(--gold-rgb),.10));
  box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.38);
  opacity:var(--on); transform:translateX(calc(var(--i) * (var(--w) + var(--g))));
  will-change:transform, opacity;
  transition:transform .24s cubic-bezier(.3,1.3,.5,1), opacity .15s ease; }
.vf-soc::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(90deg, rgba(var(--gold-rgb),.10), rgba(var(--gold-rgb),.75) 50%, rgba(var(--gold-rgb),.10));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0; pointer-events:none; will-change:opacity; transition:opacity .2s ease; }
.vf-soc:hover, .vf-soc:focus-within{ --on:1; }
.vf-soc:hover::after, .vf-soc:focus-within::after{ opacity:1; }
.vf-soc:has(.vf-ic:nth-child(2):hover), .vf-soc:has(.vf-ic:nth-child(2):focus-visible){ --i:1; }
.vf-soc:has(.vf-ic:nth-child(3):hover), .vf-soc:has(.vf-ic:nth-child(3):focus-visible){ --i:2; }
.vf-soc:has(.vf-ic:nth-child(4):hover), .vf-soc:has(.vf-ic:nth-child(4):focus-visible){ --i:3; }
.vf-soc:has(.vf-ic:nth-child(5):hover), .vf-soc:has(.vf-ic:nth-child(5):focus-visible){ --i:4; }
.vf-soc:has(.vf-ic:nth-child(6):hover), .vf-soc:has(.vf-ic:nth-child(6):focus-visible){ --i:5; }
.vf-ic{ position:relative; display:grid; place-items:center; width:var(--w); height:20px;
  border-radius:999px; color:var(--dim);
  transition:color .15s, opacity .15s, transform .2s cubic-bezier(.3,1.3,.5,1); }
.vf-ic svg{ width:12.5px; height:12.5px; fill:currentColor; }
/* restul glifelor se retrag putin, ca privirea sa cada pe cea atinsa */
.vf-soc:hover .vf-ic{ opacity:.55; }
.vf-soc .vf-ic:hover, .vf-ic:focus-visible{ outline:none; opacity:1; color:var(--gold);
  transform:scale(1.12); }
/* numele retelei: o eticheta mica de aur, deasupra */
.vf-ic::after{ content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 9px);
  transform:translate(-50%, 4px); padding:3px 8px; border-radius:6px; white-space:nowrap;
  font:600 9.5px/1.4 'Outfit',system-ui,sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); background:#0d1019;
  border:1px solid var(--line-gold);
  opacity:0; pointer-events:none; z-index:5; transition:opacity .14s, transform .14s; }
.vf-ic:hover::after, .vf-ic:focus-visible::after{ opacity:1; transform:translate(-50%, 0); }

/* light */
html[data-theme="light"] .vf-soc{ background:rgba(255,255,255,.7); border-color:rgba(28,39,64,.10);
  box-shadow:0 1px 2px rgba(30,48,90,.05); }
html[data-theme="light"] .vf-soc::before{
  background:radial-gradient(120% 120% at 50% 0%, rgba(184,137,47,.22), rgba(184,137,47,.08));
  box-shadow:inset 0 0 0 1px rgba(184,137,47,.42); }
html[data-theme="light"] .vf-soc .vf-ic:hover,
html[data-theme="light"] .vf-ic:focus-visible{ color:var(--gold); }
html[data-theme="light"] .vf-ic::after{ color:#6b4a0c; background:rgba(255,255,255,.96);
  border-color:rgba(184,137,47,.42); }
html[data-theme="light"] .vf-t43{ filter:invert(.82) sepia(.1); }
html[data-theme="light"] .vf-brand img{ filter:invert(.82); }

/* mobil: partenerii cu socialurile dedesubt, apoi linia, apoi VERDICT si linkurile */
@media (max-width:760px){
  .vfoot{ padding:0 16px 20px; margin-bottom:58px; }   /* deasupra barei fixe de jos */
  .vf-grid{ column-gap:12px; }
  .vf-s1{ grid-area:3/2; } .vf-s2{ grid-area:3/4; }
  .vf-soc{ margin-top:10px; }
  .vf-soc{ --w:22px; }
  .vf-ic{ height:22px; }
  .vf-rule{ grid-area:4/1/5/-1; margin-top:16px; }
  .vf-brand{ grid-area:5/1/6/-1; justify-self:center; margin-top:14px; }
  .vf-links{ grid-area:6/1/7/-1; justify-self:center; justify-content:center;
    gap:12px 16px; margin-top:10px; }
  .vf-p, .vf-x, .vf-brand{ opacity:.85; }
}
@media (prefers-reduced-motion:reduce){
  .vf-ic, .vf-ic::after, .vf-soc, .vf-soc::before{ transition:none; }
  .vf-soc .vf-ic:hover{ transform:none; }
}


/* ===== v32: provocarea de teritoriu (harta lumii) pe tema alba =====
   Textele modalului erau vopsite inline pentru noaptea (#f0ede6 etc.) —
   pe cardul alb deveneau invizibile. Le readucem la culorile temei. */
html[data-theme="light"] #quiz-q{ color:var(--text) !important; }
html[data-theme="light"] #quiz-opts .opt{
  color:var(--text) !important; background:rgba(28,39,64,.05) !important;
  border-color:rgba(28,39,64,.14) !important; }
html[data-theme="light"] #quiz-opts .opt:hover{
  background:rgba(143,100,16,.1) !important; border-color:rgba(143,100,16,.4) !important; }
html[data-theme="light"] #terr-history{ color:var(--dim) !important; }
html[data-theme="light"] .cyber-modal [style*="#9fb3d6"]{ color:#47617e !important; }
html[data-theme="light"] .cyber-modal [style*="#b9b3a4"]{ color:var(--dim) !important; }
html[data-theme="light"] #result-body, html[data-theme="light"] #terr-msg{ color:var(--text); }
/* the answer reveal and the review after a map challenge */
html[data-theme="light"] #quiz-opts .opt.ok{ background:rgba(31,122,61,.12) !important; border-color:#1f7a3d !important; }
html[data-theme="light"] #quiz-opts .opt.bad{ background:rgba(168,52,30,.1) !important; border-color:#a8341e !important; }
html[data-theme="light"] #quiz-opts .opt.ok::before,
html[data-theme="light"] .quiz-verdict.ok,
html[data-theme="light"] .quiz-review .qr-a b.ok{ color:#1f7a3d; }
html[data-theme="light"] #quiz-opts .opt.bad::before,
html[data-theme="light"] .quiz-verdict.bad,
html[data-theme="light"] .quiz-review .qr-a b.bad{ color:#a8341e; }
html[data-theme="light"] .quiz-review .qr{ background:rgba(28,39,64,.04); border-color:rgba(28,39,64,.14); }
html[data-theme="light"] .quiz-review .qr.ok{ border-color:rgba(31,122,61,.45); }
html[data-theme="light"] .quiz-review .qr.bad{ border-color:rgba(168,52,30,.4); }
html[data-theme="light"] .quiz-review .qr-a{ color:var(--text); }
html[data-theme="light"] .quiz-review .qr-why{ color:var(--soft); }

/* ===== v33: cardul Arene pe tema alba — glassy, nu opac ===== */
html[data-theme="light"] #rooms-card{
  background:linear-gradient(168deg, rgba(255,255,255,.72), rgba(238,244,252,.66)) !important;
  border-color:rgba(28,39,64,.14) !important;
  backdrop-filter:blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(140%) !important;
  box-shadow:0 30px 80px rgba(28,39,64,.22), inset 0 1px 0 rgba(255,255,255,.65) !important; }
html[data-theme="light"] .rrow{
  background:rgba(28,39,64,.05); border-color:rgba(28,39,64,.1); }
html[data-theme="light"] .rrow:hover{
  background:rgba(28,39,64,.08); border-color:rgba(143,100,16,.3); }
html[data-theme="light"] .rrow .rmeta b{ color:var(--text); }
html[data-theme="light"] .rrow .av{ border-color:rgba(28,39,64,.16); }
/* only the plain tags: GRATUIT / 10 DENARI / the subject of the week keep their own colours */
/* the neutral look is for tags WITHOUT a meaning: this rule used to outrank the
   live / private / host-pays colours below, and every tag came out grey */
html[data-theme="light"] .rtag:not(.free):not(.cit):not(.week):not(.live):not(.lock):not(.hostp){ background:rgba(28,39,64,.08); color:#46536f; }
html[data-theme="light"] .rweek{ color:#7a5410; }
html[data-theme="light"] .rweek b{ color:var(--gold); }
html[data-theme="light"] .rtag.week{ color:#7a5410; border-color:rgba(143,100,16,.45); background:rgba(143,100,16,.1); }
html[data-theme="light"] .rtag.live{ color:#8a3a22; background:rgba(224,138,106,.16); }
html[data-theme="light"] .rtag.lock{ color:#5b3fa8; background:rgba(139,92,246,.14); }
html[data-theme="light"] .rtag.hostp{ color:#2c6b3a; background:rgba(127,187,138,.18); }
html[data-theme="light"] .rrow .seats, html[data-theme="light"] .rb-bal{ color:#7a5509; }   /* --gold on the grey card: 4.4:1 */
html[data-theme="light"] .rrow .rspec{
  background:rgba(255,255,255,.75); color:#33415f; border-color:rgba(28,39,64,.18); }
html[data-theme="light"] .rrow .rspec:hover{ color:var(--text); border-color:rgba(143,100,16,.45); }
html[data-theme="light"] .rsect{ color:#647082; }
html[data-theme="light"] .rb-empty{ border-color:rgba(28,39,64,.18); color:#647082; }
html[data-theme="light"] .rb-bal{ background:rgba(143,100,16,.08); border-color:rgba(143,100,16,.3); }

/* v33: pe alb, butonul „Intră · 25" avea auriul WCAG întunecat (maro) —
   primește exact veșmântul butonului „Deschide o arenă" */
/* only the gold "Join" buttons: the free duel stays green and the Great Judgment
   violet, as on the dark theme (this rule used to turn them all gold) */
html[data-theme="light"] .rrow .rjoin:not(.jfree):not(.jgj){
  color:var(--gold-ink);
  background:radial-gradient(120% 160% at 30% 20%, #f4dd9d, var(--gold-hi) 45%, #c0923c 100%); }
html[data-theme="light"] .rrow .rjoin .denic{ stroke:var(--gold-ink); }

/* <img> carries its file's width/height so the browser holds the space while it
   loads (no jump). With zero specificity, any rule that sizes an image wins;
   this only keeps a CSS width from pairing with the attribute's height. */
:where(img[width][height]){ height:auto; }

/* The Treasury (the Denarii dialog, .cit-box in navbar.css) stayed a dark violet
   slab on the light theme (audit #187, found with the conquest modal). */
html[data-theme="light"] .cit-overlay{ background:rgba(28,39,64,.34); }
html[data-theme="light"] .cit-box{ border-color:rgba(124,95,196,.35);
  background:linear-gradient(160deg,#ffffff,#f4f1fb);
  box-shadow:0 30px 80px rgba(30,48,90,.25), 0 0 40px rgba(139,92,246,.10); }
html[data-theme="light"] .cit-box h3, html[data-theme="light"] .den-box .den-title{ color:#2b1f5c; }
html[data-theme="light"] .den-box{ border-color:rgba(184,137,47,.45);
  box-shadow:0 30px 80px rgba(30,48,90,.22), 0 0 40px rgba(var(--gold-rgb),.16); }
html[data-theme="light"] .cit-offer{ background:#fff; border-color:rgba(28,39,64,.12); color:#1c2740; }
html[data-theme="light"] .cit-offer .qty, html[data-theme="light"] .cit-offer .den-qty{ color:#2b1f5c; }
html[data-theme="light"] .cit-offer .price{ color:var(--gold); }
html[data-theme="light"] .cit-note{ color:#5b45a8; }
html[data-theme="light"] .cit-close{ color:#566173; }
html[data-theme="light"] .den-legend{ color:#566173; }
html[data-theme="light"] .den-legend b{ color:#1c2740; }
html[data-theme="light"] .den-tabs button{ background:#fff; border-color:rgba(28,39,64,.16); color:#33415f; }
html[data-theme="light"] .den-tabs button.on{ background:rgba(var(--gold-rgb),.22); border-color:rgba(184,137,47,.55); color:#5a3f08; }
html[data-theme="light"] .den-sub, html[data-theme="light"] .den-plan-note{ color:#566173; }
html[data-theme="light"] .cit-note.den-note{ color:#7a5a12; }
html[data-theme="light"] .den-plan-note.den-mine{ color:#2e7d43; }

/* ===== touch screens: fields at 16px =====
   iOS Safari zooms the whole page in when a field under 16px gets the focus
   (sign-in, settings, the map's theme picker were 10.5-14.5px), and the layout
   stays zoomed after. 16px is the size it leaves alone. */
@media (pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select, textarea{ font-size:16px !important; }
}

/* ===== the chip: a small rounded button that filters or jumps =====
   One definition for the rulebook chapters, the notification filters and the
   arena's subjects (each page had its own, at 12-13px and three paddings).
   .on / .active = selected. */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--r-pill);
  font-family:var(--sans); font-size:13px; font-weight:400; line-height:1.2; white-space:nowrap;
  color:var(--soft); border:1px solid var(--line); background:rgba(255,255,255,.04);
  text-decoration:none; cursor:pointer; transition:color .15s, border-color .15s, background .15s; }
.chip:hover{ color:var(--gold); border-color:var(--line-gold); }
.chip.on, .chip.active{ color:var(--gold); border-color:var(--line-gold); background:rgba(var(--gold-rgb),.12); }
.chip-sm{ padding:6px 12px; font-size:12px; }
html[data-theme="light"] .chip{ background:rgba(28,39,64,.04); }
html[data-theme="light"] .chip.on, html[data-theme="light"] .chip.active{ background:rgba(143,100,16,.10); }

/* ===== the arena's cards stand over the moving 3D board: solid, not glass =====
   The glass .card above let the board show through the text of the lobby. */
#lobby .card, .overlay .card{
  background:linear-gradient(168deg, rgba(22,28,46,.98), rgba(11,15,27,.985)) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html[data-theme="light"] #lobby .card, html[data-theme="light"] .overlay .card,
html[data-theme="light"] #rooms-card{
  background:linear-gradient(168deg, rgba(255,255,255,.985), rgba(241,245,251,.985)) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* ===== reduced motion: one rule for the whole site =====
   Pages added their own "reduce" rules one by one, and some lost to a more
   specific selector (the background orbs, the landing "DICT", the Great
   Judgment's aura and embers kept moving). Asked for less motion, every
   animation and transition now ends at once. The end events still fire, so
   code that waits for them carries on. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important; transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
}

/* the end screen's lines carry a cream colour inline, made for the dark card:
   on the light theme's card they were cream on cream */
html[data-theme="light"] #go-duel-text, html[data-theme="light"] #go-cta-text{ color:var(--text) !important; }

/* the territory card's ruler block writes its colours inline, for the night:
   on the light dialog they were 1.2-2.5:1. Each one, in ink. */
html[data-theme="light"] .cyber-modal [style*="#dfe6f2"]{ color:var(--text) !important; }
html[data-theme="light"] .cyber-modal [style*="#b9c6dd"],
html[data-theme="light"] .cyber-modal [style*="#9fb0ca"],
html[data-theme="light"] .cyber-modal [style*="#8fa0ba"]{ color:var(--soft) !important; }
html[data-theme="light"] .cyber-modal [style*="#7c889c"],
html[data-theme="light"] .cyber-modal [style*="#6b7689"]{ color:var(--dim) !important; }
html[data-theme="light"] .cyber-modal [style*="#e8c773"]{ color:#7a5509 !important; }
html[data-theme="light"] .cyber-modal [style*="#ff9d5c"]{ color:#a5472a !important; }
html[data-theme="light"] .cyber-modal [style*="#8fd0a0"]{ color:#1f7a3d !important; }
html[data-theme="light"] .cyber-modal [style*="#c4a6ff"]{ color:#5b3fa8 !important; }

/* Tab scrolls the focused control only just into view: on a phone that was
   under the bottom bar (and, going up, under the top bar). */
html{ scroll-padding-top:calc(var(--nav-h,64px) + 12px); scroll-padding-bottom:calc(var(--bnav-h,0px) + 16px); }

/* a failure message inside a grid (the avatar picker) spans the whole row,
   not one 106px cell */
.vd-fail{ grid-column:1 / -1; }