/* The navbar's styles. They used to sit inline in _navbar.html, re-sent with every
   page; as a file they are cached once (see asset() in app.py). */
  /* ---------- mesaje globale: raspunsul produsului la orice actiune ---------- */
  #vd-toasts{ position:fixed; top:74px; left:50%; transform:translateX(-50%); z-index:var(--z-toast,220);
    display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
  .vd-toast{ display:flex; align-items:center; gap:10px; padding:11px 18px; border-radius:999px;
    font-family:'Outfit',system-ui,sans-serif; font-size:13.5px; font-weight:500; color:#f0ede6;
    background:linear-gradient(160deg, rgba(23,30,48,.97), rgba(13,19,34,.97));
    border:1px solid rgba(240,237,230,.14);
    box-shadow:0 14px 40px rgba(0,0,0,.45); pointer-events:auto;
    animation:vd-toast-in .28s cubic-bezier(.2,.9,.3,1.2); }
  .vd-toast::before{ content:""; width:8px; height:8px; border-radius:50%; flex:none;
    background:var(--tc,var(--gold-hi)); box-shadow:0 0 10px var(--tc,var(--gold-hi)); }
  .vd-toast.ok{ --tc:#9fd8a8; } .vd-toast.err{ --tc:#e08a6a; } .vd-toast.info{ --tc:var(--gold-hi); }
  .vd-toast.out{ animation:vd-toast-out .25s ease-in forwards; }
  @keyframes vd-toast-in{ from{ opacity:0; transform:translateY(-10px) scale(.95); } to{ opacity:1; } }
  @keyframes vd-toast-out{ to{ opacity:0; transform:translateY(-8px) scale(.96); } }
  html[data-theme="light"] .vd-toast{
    background:linear-gradient(160deg, rgba(255,255,255,.98), rgba(243,246,252,.98));
    color:#1c2740; border-color:rgba(28,39,64,.14); box-shadow:0 14px 40px rgba(30,48,90,.2); }
  @media (max-width:760px){ #vd-toasts{ top:auto; bottom:calc(86px + env(safe-area-inset-bottom)); width:calc(100vw - 24px); } .vd-toast{ width:100%; justify-content:center; } }

  /* ---------- dialog de confirmare: pentru tot ce nu se poate anula ---------- */
  .vd-cf{ position:fixed; inset:0; z-index:var(--z-confirm,230); display:none; align-items:center;
    justify-content:center; padding:22px;
    background:rgba(4,7,14,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  .vd-cf.show{ display:flex; }
  html[data-theme="light"] .vd-cf{ background:rgba(226,234,247,.7); }
  .vd-cf-box{ width:min(400px,94vw); padding:26px 28px; border-radius:20px; text-align:center;
    background:linear-gradient(160deg, rgba(23,30,48,.98), rgba(13,19,34,.98));
    border:1px solid rgba(240,237,230,.14); box-shadow:0 30px 80px rgba(0,0,0,.6);
    animation:vd-toast-in .22s ease-out; font-family:'Outfit',system-ui,sans-serif; }
  html[data-theme="light"] .vd-cf-box{
    background:linear-gradient(160deg, rgba(255,255,255,.99), rgba(243,246,252,.99));
    border-color:rgba(28,39,64,.14); box-shadow:0 30px 80px rgba(30,48,90,.25); }
  .vd-cf-box h3{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:20px;
    margin:0 0 8px; color:inherit; }
  .vd-cf-box p{ font-size:14px; line-height:1.55; color:#b9b3a4; margin:0 0 20px; }
  html[data-theme="light"] .vd-cf-box p{ color:#46536f; }
  .vd-cf-row{ display:flex; gap:10px; justify-content:center; }
  .vd-cf-row button{ flex:1; max-width:160px; padding:11px 16px; border-radius:999px;
    font-family:inherit; font-size:13.5px; font-weight:500; cursor:pointer; border:none; }
  .vd-cf-cancel{ background:rgba(255,255,255,.07); color:#b9b3a4;
    border:1px solid rgba(240,237,230,.14) !important; }
  html[data-theme="light"] .vd-cf-cancel{ background:rgba(28,39,64,.05); color:#46536f;
    border-color:rgba(28,39,64,.14) !important; }
  .vd-cf-go{ background:linear-gradient(180deg,#f4dd9d,var(--gold-deep)); color:var(--gold-ink); }
  .vd-cf-go.danger{ background:linear-gradient(180deg,#e0836a,#c05b3a); color:#fff; }

  /* Inaltimile celor doua bare, masurate de JS mai jos. Restul paginilor se
     asaza dupa ele in loc sa presupuna 64px — altfel, cand zoomul browserului
     ingusteaza viewportul si barele se rearanjeaza, tot ce sta lipit de ele
     ajunge dedesubt. Valorile de aici sunt doar plasa de siguranta. */
  :root{ --nav-h:64px; --bnav-h:0px; }
  .gnav{ position:fixed; top:0; left:0; right:0; z-index:var(--z-nav,60); font-family:'Outfit',system-ui,sans-serif;
    transition:background .3s, border-color .3s; border-bottom:1px solid transparent;
    view-transition-name:gnav; }
  .gnav.scrolled{ background:rgba(10,12,18,.68); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-color:rgba(240,237,230,.08); }
  .gnav-in{ max-width:var(--w-wide,1280px); margin:0 auto; padding:13px 28px; display:flex; align-items:center; gap:4px; }
  .gnav a{ text-decoration:none; }
  .gnav-brand{ display:flex; align-items:center; margin-right:20px; flex:none; }
  .gnav-logo{ height:50px; width:134px; aspect-ratio:1252/467; display:block;
    border-radius:8px; color:transparent; font-size:0; }   /* fixed box: nav never
    reflows while the logo loads; alt-ul ramane invizibil, nu un link albastru */
  .gnav-brand{ color:transparent; text-decoration:none; }
  .gnav-link{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
    font-size:14px; font-weight:400; color:#b9b3a4; transition:color .2s, background .2s; white-space:nowrap; }
  .gnav-link svg{ width:17px; height:17px; flex:none; display:block;
    stroke:currentColor; stroke-width:1.6; fill:none; overflow:visible; }
  /* the inactive icons were half grey at 75% opacity: dark bronze paintings on a
     navy bar, nearly invisible. A touch of desaturation is enough to say "not
     this one"; the active tab still gets its full colour. */
  .gnav-link .nvic{ width:21px; height:21px; flex:none; display:block;
    filter:saturate(.75) brightness(1.15); transition:filter .2s; }
  .gnav-link:hover .nvic, .gnav-link.on .nvic{ filter:none; }
  .gnav-link:hover{ color:#f0ede6; background:rgba(255,255,255,.05); }
  .gnav-link.on{ color:var(--gold-hi); background:rgba(var(--gold-rgb),.09); }
  .gnav-spacer{ margin-left:auto; }
  .gnav-scores{ display:flex; align-items:center; gap:14px; padding:0 10px; }
  /* ambient sound on/off — in the navbar here, floating on the standalone
     map/arena pages (audio.js creates it there if this one is absent) */
  .audio-toggle{ display:inline-grid; place-items:center; width:30px; height:30px; flex:none;
    padding:0; border:1px solid var(--line, rgba(255,255,255,.1)); border-radius:9px;
    background:rgba(255,255,255,.03); cursor:pointer; transition:border-color .15s, opacity .15s; }
  .audio-toggle svg{ width:16px; height:16px; fill:none; stroke:#c9c2b4; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round; }
  .audio-toggle:hover{ border-color:rgba(var(--gold-rgb),.5); }
  .audio-toggle:hover svg{ stroke:var(--gold-hi); }
  .audio-toggle.off{ opacity:.55; }
  .audio-toggle.off svg{ stroke:#8f8b7f; }
  /* varianta plutitoare are aceeași mărime de icon ca cea din navbar,
     doar ținta de atins e puțin mai generoasă */
  .audio-toggle.floating{ position:fixed; right:16px; bottom:16px; z-index:120;
    width:34px; height:34px; border-radius:10px; backdrop-filter:blur(8px);
    background:rgba(12,14,30,.7); border-color:rgba(255,255,255,.14); }
  .audio-toggle.floating svg{ width:16px; height:16px; }
  @media (max-width:760px){ .audio-toggle.floating{ right:12px; bottom:calc(var(--bnav-h,0px) + 14px); } }
  /* On a phone this is a thumb target, not a hover target — and at 30px with a
     grey icon it read as decoration. Bigger box, gold icon, real contrast. */
  @media (max-width:760px){
    .audio-toggle{ width:36px; height:36px; border-radius:11px;
      border-color:rgba(var(--gold-rgb),.42); background:rgba(var(--gold-rgb),.09); }
    .audio-toggle svg{ width:19px; height:19px; stroke:var(--gold-hi); }
    .audio-toggle.off{ opacity:1; border-color:rgba(240,237,230,.16);
      background:rgba(255,255,255,.03); }
    .audio-toggle.off svg{ stroke:#8f8b7f; }
  }

  .gscore{ display:inline-flex; align-items:center; gap:6px; }
  .gscore img{ width:22px; height:22px; display:block; }
  .gscore b{ font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
  .gscore.elo b{ color:#22d3ee; }
  .gscore.cit{ position:relative; background:none; border:none; padding:0; cursor:pointer;
    font-family:inherit; }
  .gscore.cit b{ color:#c4b5fd; }
  /* Denarii — the soft currency; shown everywhere so earning it is visible */
  /* e <button> acum (deschide Vistieria): resetul complet îl ține identic pe
     orice pagină — altfel moștenește chenarul și paddingul butoanelor locale */
  .gscore.den{ position:relative; background:none; border:none; padding:0; margin:0;
    cursor:pointer; font-family:inherit; font-size:inherit; color:inherit;
    appearance:none; -webkit-appearance:none; border-radius:0; box-shadow:none; }
  .gscore.den:hover{ background:none; border:none; box-shadow:none; transform:none; }
  .gscore.den svg{ width:19px; height:19px; fill:none; stroke:var(--coin, #f0c674); stroke-width:1.6;
    stroke-linecap:round; }
  .gscore.den b{ color:var(--coin, #f0c674); }
  .gscore.den:hover .cit-pop, .gscore.den:focus-visible .cit-pop{ opacity:1; transform:none; }
  .gscore.den .cit-pop b{ color:var(--coin, #f0c674); }
  .gscore.den b.bump{ animation:den-bump .5s ease; }
  @keyframes den-bump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.35); color:#fff; }
    100%{ transform:scale(1); } }
  .cit-plus{ width:15px; height:15px; margin-left:2px; border-radius:50%; flex:none;
    display:grid; place-items:center; font-size:12px; font-weight:700; line-height:1;
    color:var(--gold-ink); background:linear-gradient(180deg,#f2d894,var(--gold-deep));
    box-shadow:0 1px 5px rgba(199,154,68,.45); transition:transform .15s; }
  .gscore.cit:hover .cit-plus{ transform:scale(1.2); }
  /* aceeași sticlă ca popoverele din restul platformei (.pc-pop) */
  .cit-pop{ position:absolute; top:calc(100% + 14px); right:-10px; z-index:80; width:230px;
    padding:11px 13px; border-radius:14px; text-align:left; font-size:12px; line-height:1.5;
    color:#b9b3a4; border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(160deg,#131a2c,#0b101d);
    box-shadow:0 30px 70px rgba(0,0,0,.65); opacity:0; pointer-events:none;
    transform:translateY(6px); transition:opacity .18s, transform .18s; }
  .cit-pop b{ display:block; font-family:'Fraunces',serif; font-weight:500; font-size:13.5px;
    color:#c4b5fd; margin-bottom:3px; }
  .gscore.cit:hover .cit-pop{ opacity:1; transform:none; }
  /* Dialogul Vistieriei (pachetele de Denari) */
  /* Taller than the screen (a phone held sideways, the plans tab at 320px) the
     dialog used to be centred off both edges, with "Închide" out of reach: the
     overlay now scrolls, and the box's auto margins centre it only when it fits
     (flex-start, so an overflowing box starts at the top instead of above it). */
  .cit-overlay{ position:fixed; inset:0; z-index:var(--z-modal-2,210); display:none; align-items:flex-start;
    justify-content:center; background:rgba(4,7,16,.72);
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    padding:12px 0 calc(12px + env(safe-area-inset-bottom));
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    font-family:'Outfit',system-ui,sans-serif; }
  .cit-overlay.show{ display:flex; }
  .cit-box{ margin:auto; flex:none;
    width:min(430px,92vw); padding:28px 28px 24px; border-radius:20px; text-align:center;
    border:1px solid rgba(167,139,250,.45);
    background:linear-gradient(160deg, rgba(26,22,48,.97), rgba(12,14,30,.97));
    box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(139,92,246,.15); }
  .cit-box > img{ width:110px; height:110px; display:block; margin:-8px auto 6px;
    filter:drop-shadow(0 6px 16px rgba(139,92,246,.45)); }
  .cit-box h3{ font-family:'Fraunces',serif; font-weight:500; font-size:22px; color:#e9e2ff;
    margin-bottom:16px; }
  .cit-offers{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
  .cit-offer{ position:relative; padding:16px 12px 14px; border-radius:16px; cursor:pointer;
    border:1px solid rgba(240,237,230,.14); background:rgba(255,255,255,.04);
    color:#f0ede6; font-family:inherit; transition:border-color .18s, transform .18s; }
  .cit-offer:hover{ transform:translateY(-2px); border-color:rgba(167,139,250,.6); }
  .cit-offer .qty{ display:flex; align-items:center; justify-content:center; gap:7px;
    font-family:'Fraunces',serif; font-size:17px; color:#e9e2ff; }
  .cit-offer .qty img{ width:30px; height:30px; }
  .cit-offer .price{ margin-top:6px; font-size:14px; font-weight:600; color:var(--gold-hi); }
  .cit-offer .tag{ position:absolute; top:-9px; left:50%; transform:translateX(-50%);
    font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
    padding:3px 9px; border-radius:999px; color:#1a1206;
    background:linear-gradient(160deg,var(--gold-pale),var(--gold-hi)); }
  .cit-note{ min-height:18px; font-size:12.5px; color:#c4b5fd; margin-bottom:4px; }
  .cit-close{ background:none; border:none; color:#7d7a70; font-size:13px; cursor:pointer;
    font-family:inherit; text-decoration:underline; text-underline-offset:3px; }
  @media (max-width:760px){
    .gscore.cit{ position:static; }
    /* it is a button, and at 18px tall it was barely a tap target */
    .gscore.cit, .gscore.den{ min-height:34px; padding:0 4px; }
    .cit-pop{ display:none; }   /* on phones the tap opens the shop directly */
  }
  .gscore.pre b{ color:var(--gold-hi); }

  /* ================== the bell: global notification centre ==================
     Lives in the navbar, so it rings on every page — the map is where most
     notifications are *about*, but never where the player necessarily is. */
  .vn-bell{ position:relative; display:inline-grid; place-items:center; width:32px; height:32px;
    flex:none; padding:0; border:1px solid rgba(255,255,255,.1); border-radius:10px;
    background:rgba(255,255,255,.03); cursor:pointer; transition:border-color .15s, background .15s; }
  .vn-bell svg{ width:17px; height:17px; fill:none; stroke:#c9c2b4; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round; transition:stroke .15s; }
  .vn-bell:hover{ border-color:rgba(var(--gold-rgb),.5); background:rgba(var(--gold-rgb),.07); }
  .vn-bell:hover svg, .vn-bell.open svg{ stroke:var(--gold-hi); }
  .vn-bell.open{ border-color:rgba(var(--gold-rgb),.5); background:rgba(var(--gold-rgb),.09); }
  /* an unread bell rocks once, then holds still — a permanent animation is noise */
  .vn-bell.ring svg{ animation:vn-ring .7s ease-in-out; transform-origin:50% 15%; }
  @keyframes vn-ring{ 0%,100%{ transform:rotate(0); } 15%{ transform:rotate(14deg); }
    35%{ transform:rotate(-11deg); } 55%{ transform:rotate(7deg); } 75%{ transform:rotate(-4deg); } }
  .vn-dot{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
    border-radius:999px; background:linear-gradient(180deg,#ef8f6b,#d2603a); color:#fff;
    font-size:10px; font-weight:700; line-height:17px; text-align:center;
    font-family:'Outfit',system-ui,sans-serif; font-variant-numeric:tabular-nums;
    box-shadow:0 2px 8px rgba(210,96,58,.5); }
  .vn-dot[hidden]{ display:none; }

  /* --- the panel --- */
  .vn-scrim{ position:fixed; inset:0; z-index:149; background:rgba(4,7,16,.35);
    opacity:0; pointer-events:none; transition:opacity .22s; }
  .vn-scrim.show{ opacity:1; pointer-events:auto; }
  .vn-panel{ position:fixed; top:0; right:0; bottom:0; z-index:var(--z-drawer,150); width:min(382px,100vw);
    display:flex; flex-direction:column; font-family:'Outfit',system-ui,sans-serif;
    background:linear-gradient(165deg,#141b2e,#0a0e1a);
    border-left:1px solid rgba(var(--gold-rgb),.22);
    /* closed, it is hidden outright: parked just off-screen, its 94px shadow
       darkened the right edge of every page, and Tab still walked into it */
    box-shadow:none; visibility:hidden;
    transform:translateX(103%);
    transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s, box-shadow 0s linear .28s; }
  .vn-panel.show{ transform:none; visibility:visible; box-shadow:-24px 0 70px rgba(0,0,0,.6);
    transition:transform .28s cubic-bezier(.4,0,.2,1); }
  .vn-head{ display:flex; align-items:center; gap:10px; flex:none;
    padding:18px 18px 14px; border-bottom:1px solid rgba(240,237,230,.08); }
  /* ---- punga: teanc de jetoane ---- */
  .den-purse{ margin:2px 0 14px; }
  .den-stack{ display:flex; align-items:flex-end; justify-content:center; gap:2px;
    height:46px; margin-bottom:9px; }
  .den-col{ display:flex; flex-direction:column-reverse; gap:2px; }
  .den-chip{ width:26px; height:6px; border-radius:3px; transform-origin:50% 100%;
    animation:den-drop .34s cubic-bezier(.2,.9,.3,1.2) both; }
  .den-chip.k-own{ background:linear-gradient(180deg,#f0dca4,var(--gold-deep));
    box-shadow:0 1px 0 rgba(0,0,0,.35); }
  /* tranșa lunii: aceeași monedă, altă lumină — se stinge, nu se strânge */
  .den-chip.k-exp{ background:linear-gradient(180deg,#bda8ef,#7b5fc4);
    box-shadow:0 1px 0 rgba(0,0,0,.35); }
  @keyframes den-drop{ from{ transform:translateY(-14px) scaleY(.4); opacity:0; }
                       to{ transform:none; opacity:1; } }
  @media (prefers-reduced-motion: reduce){ .den-chip{ animation:none; } }
  .den-legend{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
    font-size:11.5px; color:#9a94b5; }
  .den-legend span{ display:inline-flex; align-items:center; gap:5px; }
  /* `hidden` wins over the flex above: "Din abonament: expiră 0" showed on every
     purse without a plan */
  .den-legend span[hidden], .den-stack[hidden], .cit-offers[hidden]{ display:none; }
  /* (.cit-offers[hidden]: "Monthly plan" showed the packs and the plans together) */
  .den-legend b{ color:#f0e3c0; font-variant-numeric:tabular-nums; }
  .den-legend small{ opacity:.75; }
  .den-legend i{ width:11px; height:5px; border-radius:3px; display:inline-block; }
  .den-legend i.k-own{ background:var(--gold-deep); } .den-legend i.k-exp{ background:#7b5fc4; }
  .den-box{ border-color:rgba(var(--gold-rgb),.45);
    box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(var(--gold-rgb),.14); }
  .den-box .den-ic{ width:84px; height:84px; display:block; margin:-4px auto 6px;
    stroke:var(--coin, var(--gold-hi)); fill:none; stroke-width:1.4;
    filter:drop-shadow(0 6px 16px rgba(var(--gold-rgb),.35)); }
  .den-box .den-title{ color:#f0e3c0; }
  .cit-offer .den-qty{ color:#f0e3c0; }   /* (was inline: the light theme could not reach it) */
  .den-sub{ display:block; font-size:10.5px; color:#9a94b5; margin-top:3px; }
  .cit-note.den-note{ color:#d9c690; }
  .den-plan-note.den-mine{ color:#9fd8a8; }
  .den-tabs{ display:flex; gap:6px; justify-content:center; margin:0 0 12px; }
  .den-explain{ margin:-2px auto 14px; max-width:42ch; text-align:center; font-size:13px; line-height:1.5;
    color:var(--soft, #b9b3a4); }
  .den-explain[hidden]{ display:none; }
  .den-tabs button{ background:rgba(255,255,255,.05); border:1px solid rgba(240,237,230,.14);
    color:#9a94b5; border-radius:999px; padding:6px 14px; font:inherit; font-size:12px;
    cursor:pointer; }
  .den-tabs button.on{ background:rgba(var(--gold-rgb),.16); border-color:rgba(var(--gold-rgb),.5);
    color:#f0e3c0; }
  .den-plan-note{ font-size:10.5px; color:#9a94b5; margin-top:3px; display:block; }

  .vn-snd svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round; }
  .vn-snd[aria-pressed="false"]{ opacity:.42; }
  .vn-head h4{ flex:1; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:18px;
    color:#f0ede6; margin:0; }
  .vn-x{ display:grid; place-items:center; width:30px; height:30px; flex:none; border:none;
    border-radius:9px; background:rgba(255,255,255,.05); color:#b9b3a4; font-size:19px;
    line-height:1; cursor:pointer; font-family:inherit; transition:color .15s, background .15s; }
  .vn-x:hover{ color:#f0ede6; background:rgba(255,255,255,.1); }
  .vn-list{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:12px 12px 18px; }
  .vn-foot{ flex:none; display:flex; gap:8px; padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(240,237,230,.08); }
  .vn-foot button{ flex:1; padding:8px 10px; border-radius:10px; cursor:pointer;
    border:1px solid rgba(240,237,230,.12); background:rgba(255,255,255,.03);
    color:#b9b3a4; font-family:inherit; font-size:12.5px; transition:color .15s, border-color .15s; }
  .vn-foot button:hover{ color:#f0ede6; border-color:rgba(var(--gold-rgb),.4); }
  .vn-foot button:disabled{ opacity:.4; cursor:default; }
  /* "See all" was a bare 14px line of text between two buttons */
  .vn-foot .vn-all{ flex:1; display:inline-flex; align-items:center; justify-content:center;
    min-height:34px; padding:8px 10px; border-radius:10px; color:inherit; text-decoration:none; }
  .vn-foot .vn-all:hover{ color:#f0ede6; }
  /* RO / EN: 18x15px on a desktop, now at least 28x28 */
  .gnav-lang a{ display:inline-flex; align-items:center; justify-content:center;
    min-width:28px; min-height:28px; border-radius:8px; text-decoration:none; }

  /* --- one notification --- */
  .vn-item{ position:relative; display:flex; gap:11px; width:100%; text-align:left;
    padding:12px 13px 12px 12px; margin-bottom:8px; border-radius:14px; cursor:pointer;
    border:1px solid rgba(240,237,230,.08); background:rgba(255,255,255,.028);
    font-family:inherit; color:inherit; transition:border-color .16s, background .16s, transform .16s; }
  .vn-item:hover{ background:rgba(255,255,255,.055); border-color:rgba(var(--gold-rgb),.3);
    transform:translateX(-2px); }
  .vn-item.unread{ background:rgba(var(--gold-rgb),.05); border-color:rgba(var(--gold-rgb),.2); }
  .vn-item.gone{ opacity:.6; }
  .vn-item.unread::after{ content:""; position:absolute; top:14px; right:12px; width:6px; height:6px;
    border-radius:50%; background:var(--vn-accent,var(--gold-hi)); box-shadow:0 0 8px var(--vn-accent,var(--gold-hi)); }
  /* colour-mix keeps one accent variable driving tint + border; the flat rgba
     before each is the fallback for browsers that don't support it. */
  .vn-ic{ display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:11px;
    background:rgba(var(--gold-rgb),.12); border:1px solid rgba(var(--gold-rgb),.3);
    background:color-mix(in srgb, var(--vn-accent,var(--gold-hi)) 14%, transparent);
    border-color:color-mix(in srgb, var(--vn-accent,var(--gold-hi)) 34%, transparent); }
  .vn-ic svg{ width:17px; height:17px; fill:none; stroke:var(--vn-accent,var(--gold-hi));
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
  .vn-body{ display:block; flex:1; min-width:0; padding-right:9px; overflow-wrap:anywhere; }
  .vn-t{ display:block; font-size:13.5px; font-weight:500; color:var(--vn-accent,var(--gold-hi));
    line-height:1.35; }
  .vn-b{ display:block; font-size:12.5px; color:#b9b3a4; line-height:1.5; margin-top:3px;
    overflow-wrap:anywhere; }
  .vn-when{ display:block; font-size:11px; color:#6f6c64; margin-top:5px; letter-spacing:.03em; }
  .vn-empty{ padding:56px 22px; text-align:center; color:#6f6c64; font-size:13px; line-height:1.65; }
  .vn-empty svg{ width:34px; height:34px; margin-bottom:12px; fill:none; stroke:#3d4152;
    stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

  /* --- the permission card ---
     A soft prompt of our own, shown shortly after arriving. It exists because
     Safari and Firefox refuse Notification.requestPermission() outside a user
     gesture, and because a native dialog fired at a stranger earns a reflex
     "Block" that can never be asked again. This asks first, in our own words. */
  .vn-ask{ position:fixed; top:74px; right:16px; z-index:141; width:min(330px, calc(100vw - 32px));
    padding:15px 16px 13px; border-radius:16px; font-family:'Outfit',system-ui,sans-serif;
    background:linear-gradient(160deg,#181f33,#0b101d);
    border:1px solid rgba(var(--gold-rgb),.35);
    box-shadow:0 22px 56px rgba(0,0,0,.6);
    animation:vn-in .32s cubic-bezier(.2,.9,.3,1.2); }
  .vn-ask.out{ animation:vn-out .28s ease-in forwards; }
  .vn-ask-h{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
  .vn-ask-h svg{ width:18px; height:18px; flex:none; fill:none; stroke:var(--gold-hi); stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round; }
  .vn-ask-h b{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:15px; color:#f0ede6; }
  .vn-ask p{ font-size:12.5px; line-height:1.55; color:#b9b3a4; margin:0 0 12px; }
  .vn-ask-row{ display:flex; gap:8px; }
  .vn-ask-row button{ flex:1; padding:9px 10px; border-radius:10px; cursor:pointer;
    font-family:inherit; font-size:12.5px; font-weight:500; border:1px solid transparent;
    transition:transform .15s, box-shadow .15s, color .15s, border-color .15s; }
  .vn-ask-yes{ color:var(--gold-ink); background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));
    box-shadow:0 6px 18px rgba(199,154,68,.3); }
  .vn-ask-yes:hover{ transform:translateY(-1px); box-shadow:0 9px 24px rgba(199,154,68,.42); }
  .vn-ask-no{ flex:0 0 auto; padding-inline:14px; color:#7d7a70;
    border-color:rgba(240,237,230,.12); background:rgba(255,255,255,.03); }
  .vn-ask-no:hover{ color:#b9b3a4; border-color:rgba(240,237,230,.25); }

  /* --- live toasts --- */
  #vn-toasts{ position:fixed; top:74px; right:16px; z-index:140; display:flex;
    flex-direction:column; gap:9px; width:min(340px, calc(100vw - 32px));
    pointer-events:none; font-family:'Outfit',system-ui,sans-serif; }
  .vn-toast{ display:flex; gap:10px; padding:12px 13px; border-radius:14px; cursor:pointer;
    pointer-events:auto; color:#f0ede6;
    background:linear-gradient(160deg,#171f33,#0b101d);
    border:1px solid rgba(var(--gold-rgb),.45);
    border-color:color-mix(in srgb, var(--vn-accent,var(--gold-hi)) 45%, transparent);
    box-shadow:0 18px 46px rgba(0,0,0,.55);
    animation:vn-in .3s cubic-bezier(.2,.9,.3,1.2); }
  .vn-toast.out{ animation:vn-out .3s ease-in forwards; }
  @keyframes vn-in{ from{ opacity:0; transform:translateX(28px) scale(.96); } }
  @keyframes vn-out{ to{ opacity:0; transform:translateX(28px) scale(.96); } }
  @media (prefers-reduced-motion:reduce){
    .vn-toast, .vn-bell.ring svg{ animation:none; }
    .vn-panel{ transition:none; }
  }
  @media (max-width:760px){
    #vn-toasts{ top:var(--nav-h,64px); right:10px; left:10px; width:auto; }
    /* opt-in-ul devine un snackbar discret deasupra dockului — nu mai acopera continutul */
    .vn-ask{ top:auto; bottom:calc(84px + env(safe-area-inset-bottom)); right:10px; left:10px;
      width:auto; padding:12px 14px; }
    .vn-ask p{ display:none; }
    .vn-ask-h{ margin-bottom:9px; }
    .vn-ask-h b{ font-size:13.5px; }
    .vn-ask-row button{ padding:8px 10px; font-size:12.5px; }
    .vn-panel{ width:100vw; border-left:none; }
    .vn-x{ width:44px; height:44px; }          /* the only way out of a full-screen panel */
  }

  @media (max-width:720px){ .gnav-scores{ display:none; } }
  .gnav-lang{ display:flex; gap:6px; font-size:12px; color:#8d8a80; padding:0 10px; flex:none; }
  .gnav-lang a{ color:inherit; } .gnav-lang a.on{ color:var(--gold-hi); }
  .gnav-user{ display:inline-flex; align-items:center; gap:9px; padding:4px 14px 4px 5px; border-radius:999px;
    border:1px solid rgba(240,237,230,.12); color:#f0ede6; font-size:14px; white-space:nowrap;
    background:rgba(255,255,255,.04); transition:border-color .2s; min-height:38px; }
  .gnav-user:not(:has(img)){ padding:9px 18px; }   /* signed-out chip matches the CTA height */
  .gnav-user:hover{ border-color:rgba(var(--gold-rgb),.4); }
  .gnav-user.on{ border-color:rgba(var(--gold-rgb),.4); }
  .gnav-user img{ width:34px; height:34px; border-radius:50%; display:block; }
  .gnav-user svg{ width:16px; height:16px; display:block; stroke:var(--gold-hi); stroke-width:1.6; fill:none; }
  .gnav-out{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
    border-radius:50%; color:#c9c2b4;   /* was #7d7a70, the faintest grey on the bar */ transition:color .2s, background .2s; cursor:pointer;
    background:none; border:none; padding:0; }
  .gnav-out svg{ width:17px; height:17px; display:block; stroke:currentColor; stroke-width:1.6; fill:none; }
  .gnav-out:hover{ color:#e08a6a; background:rgba(224,138,106,.09); }
  .gnav-cta{ display:inline-flex; align-items:center; padding:9px 20px; border-radius:999px; margin-left:6px;
    font-size:14px; font-weight:500; color:var(--gold-ink); white-space:nowrap;
    background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));
    box-shadow:0 6px 20px rgba(199,154,68,.25); transition:transform .2s, box-shadow .2s; }
  .gnav-cta:hover{ transform:translateY(-1px); box-shadow:0 9px 26px rgba(199,154,68,.38); }
  .gnav-cta svg{ width:16px; height:16px; margin-right:7px; flex:none; stroke:var(--gold-ink); stroke-width:1.8; fill:none; }
  /* just above the phone layout, four section links + the visitor's two buttons
     need tighter links (the bar clipped "Create account" at 761-780px) */
  @media (min-width:761px) and (max-width:860px){
    .gnav-link{ padding:8px 8px !important; }
    .gnav-brand{ margin-right:2px !important; }
    .gnav-lang{ padding:0 4px; }
  }
  @media (max-width:1060px){
    /* icon-only links keep their words for a screen reader (display:none took
       the name away: "link, link, link, link") */
    .gnav-link span{ position:absolute; width:1px; height:1px; overflow:hidden;
      clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
    .gnav-link{ padding:9px 11px; } .gnav-link svg{ width:19px; height:19px; }
    .gnav-brand{ margin-right:8px; }
  }
  /* Tablet. Every item in the bar could shrink without limit, so on 761-1000px
     the four section links came out 16-43px wide with their icons cut, and
     "Log out" 17px. Nothing shrinks below a tap target now; to make the room,
     the bar uses the round logo and the avatar alone (the name stays as the
     link's accessible name), as on a phone. */
  @media (min-width:761px){
    .gnav-brand, .gnav-link, .gnav-user, .gnav-out, .gnav-cta, .gnav-scores > *{ flex-shrink:0; }
    .gnav-link{ min-width:44px; min-height:44px; justify-content:center; }
    .gnav-out{ width:40px; height:40px; }
  }
  /* a long display name (20 characters) gives way with "…" instead of pushing
     the bar off the screen */
  @media (min-width:1221px){
    .gnav-uname{ display:inline-block; vertical-align:middle; max-width:110px;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  }
  @media (min-width:761px) and (max-width:1220px){
    .gnav-logo{ content:url('/static/brand/logo-icon.png'); height:38px; width:38px; }
    .gnav-uname{ position:absolute; width:1px; height:1px; overflow:hidden;
      clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
    .gnav-user:has(img){ gap:0; padding:3px; border-radius:50%; }
    .gnav-in{ gap:2px; padding-left:16px; padding-right:16px; }
  }
  /* ============ MOBILE (≤760px): identity top bar + fixed bottom nav ============ */
  .gbnav{ display:none; }
  @media (max-width:760px){
    .gnav-link{ display:none; }          /* section links live in the bottom bar */
    /* The language switch used to be hidden on phones, and a visitor had no other
       way to change it. Here it is one round button naming the OTHER language. */
    .gnav .gnav-lang{ padding:0; flex:none; }
    .gnav .gnav-lang span, .gnav .gnav-lang a.on{ display:none; }
    .gnav .gnav-lang a{ display:inline-flex; align-items:center; justify-content:center;
      width:34px; height:34px; border-radius:50%; font-size:11.5px; font-weight:600;
      letter-spacing:.06em; color:#cfc8b6; border:1px solid rgba(240,237,230,.14);
      background:rgba(255,255,255,.04); }
    html[data-theme="light"] .gnav .gnav-lang a{ color:#46536f; border-color:rgba(28,39,64,.16);
      background:rgba(28,39,64,.04); }
    .gnav-logo{ content:url('/static/brand/logo-icon.png'); height:34px; width:34px; }
    /* the logo stays 34px, the link around it is a 44px target */
    .gnav-brand{ margin-right:0; flex:none; min-width:44px; min-height:44px; justify-content:center; }
    .gnav-in{ padding:10px 10px; gap:6px; flex-wrap:nowrap; overflow:hidden; }
    .gnav-scores{ display:flex; gap:8px; padding:0 2px; margin-left:auto; flex:none; }
    .gscore{ gap:4px; }
    .gscore img{ width:18px; height:18px; } .gscore b{ font-size:12.5px; }
    .gnav-user:has(img){ gap:0; padding:3px; flex:none; min-width:0; border-radius:50%; }
    .gnav-uname{ display:none; }          /* pe mobil identitatea e avatarul, numele traieste pe profil */
    .gnav-user img{ width:30px; height:30px; }
    .gnav-out{ display:none; }            /* logout-ul are loc pe pagina de cont */
    .gnav-out{ width:30px; height:30px; flex:none; }
    .gnav-spacer{ display:none; }
    .gnav-cta{ padding:8px 12px; font-size:13px; margin-left:2px; flex:none; }
    .gnav-user:not(:has(img)){ padding:8px 12px; font-size:13px; margin-left:auto;
      border-radius:999px; flex:none; }
    /* the two guest buttons used to run off the right edge of a phone: on a
       small screen they go text-only, and on the narrowest ones "Sign in" keeps
       just its icon */
    .gnav-cta svg, .gnav-user:not(:has(img)) svg{ display:none; }

    @media (max-width:374px){
      /* signed in, the narrowest phones keep it in Settings (no room up here) */
      .gnav-scores .gnav-lang{ display:none; }
      .gnav-in{ gap:4px; }
    }
    /* A visitor's bar holds logo, sound, theme, language, sign-in and sign-up: below
       ~400px "Sign in" keeps just its icon (with the language button, the old
       374px threshold let "Create account" run 4px off a 375px phone). */
    @media (max-width:400px){
      .gnav-user:not(:has(img)) .gnav-ulabel{ display:none; }
      .gnav-user:not(:has(img)) svg{ display:block; }
      .gnav-user:not(:has(img)){ padding:8px; }
    }
    @media (max-width:360px){
      .gnav-in{ gap:3px; padding-left:8px; padding-right:8px; }
      .gnav-cta{ padding:8px 10px; font-size:12px; }
      .gnav .gnav-lang a{ width:30px; height:30px; }
    }

    .gbnav{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:var(--z-bnav,70);
      background:rgba(9,12,20,.97); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
      border-top:1px solid rgba(240,237,230,.09);
      padding:6px 6px calc(6px + env(safe-area-inset-bottom));
      font-family:'Outfit',system-ui,sans-serif; view-transition-name:gbnav; }
    .gbnav a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
      padding:5px 2px 3px; color:#8f8b7f; font-size:11.5px; letter-spacing:.02em;
      text-decoration:none; border-radius:12px; }
    .gbnav a svg{ width:22px; height:22px; stroke:currentColor; stroke-width:1.6;
      fill:none; display:block; overflow:visible; }
    .gbnav a .nvic{ width:24px; height:24px; display:block;
      filter:saturate(.75) brightness(1.15); }
    .gbnav a.on .nvic{ filter:none; }
    .gbnav a.on{ color:var(--gold-hi); }
  }
  /* telefon pe orizontala: dockul devine o lamela scunda, iconuri lateral */
  @media (max-height:520px) and (orientation:landscape){
    .gbnav{ padding:3px 6px calc(3px + env(safe-area-inset-bottom)); }
    .gbnav a{ flex-direction:row; gap:6px; padding:4px 2px; font-size:11px; }
    .gbnav a svg, .gbnav a .nvic{ width:17px; height:17px; }
  }
  ::view-transition-group(gbnav){ animation:none; }

  /* ================== loading system: premium skeletons ==================
     While an image loads, its box shows a glassy gold-tinted shimmer and the
     painted pixels are pushed out of frame (object-position) — so skeleton
     and content can NEVER be visible at the same time. On decode, the pixels
     slide back and fade in. Shapes follow each element's own border-radius. */
  img.sk:not(.ldd){
    background:
      linear-gradient(100deg, transparent 30%, rgba(var(--gold-rgb),.10) 46%,
        rgba(255,255,255,.13) 50%, rgba(var(--gold-rgb),.10) 54%, transparent 70%),
      linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.022));
    background-size:220% 100%, 100% 100%;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.055), inset 0 1px 0 rgba(255,255,255,.05);
    animation:skmove 1.5s ease-in-out infinite;
    object-position:-500vw 0;
  }
  img.sk.ldd{ animation:skfade .3s ease; }
  @keyframes skmove{ 0%{ background-position:120% 0, 0 0; } 100%{ background-position:-120% 0, 0 0; } }
  @keyframes skfade{ from{ opacity:0; } to{ opacity:1; } }
  /* niciun skeleton colțos: fallback rotunjit când elementul nu are raza lui
     (:where = specificitate zero, deci raza proprie a elementului câștigă mereu) */
  :where(img.sk:not(.ldd)){ border-radius:12px; }
  /* varianta „mută": pixelii stau ascunși până la decode, dar shimmerul
     îl poartă gazda întreagă (.hskel), nu iconul */
  img.sk.skbare:not(.ldd){ background:none; box-shadow:none; animation:none; }

  /* ---- skeleton pe întreaga componentă-gazdă (buton / link / card):
     sticlă rotunjită cu un fascicul de lumină care mătură tot cardul ---- */
  .hskel{ position:absolute; inset:0; z-index:5; border-radius:inherit; overflow:hidden;
    pointer-events:none;
    background:linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    transition:opacity .4s ease; }
  .hskel::after{ content:""; position:absolute; inset:-40px;
    background:linear-gradient(105deg, transparent 38%, rgba(var(--gold-rgb),.09) 46%,
      rgba(255,255,255,.14) 50%, rgba(var(--gold-rgb),.09) 54%, transparent 62%);
    transform:translateX(-130%);
    animation:csweep 1.8s cubic-bezier(.4,.2,.3,.9) infinite; }
  .hskel.done{ opacity:0; }
  @media (prefers-reduced-motion:reduce){ .hskel::after{ animation:none; } }

  /* text skeleton: a shimmer bar that lives INSIDE a dynamic element and is
     wiped automatically the moment JS writes real text into it */
  .tskel{ display:inline-block; height:.85em; vertical-align:baseline; border-radius:7px;
    background:
      linear-gradient(100deg, transparent 30%, rgba(var(--gold-rgb),.12) 48%,
        rgba(255,255,255,.14) 52%, transparent 70%),
      linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    background-size:220% 100%, 100% 100%;
    animation:skmove 1.5s ease-in-out infinite; }

  /* list-row / avatar-circle skeletons for async lists */
  .skrow{ height:46px; border-radius:13px; margin-bottom:9px;
    background:
      linear-gradient(100deg, transparent 30%, rgba(var(--gold-rgb),.09) 48%,
        rgba(255,255,255,.11) 52%, transparent 70%),
      linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    background-size:220% 100%, 100% 100%;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
    animation:skmove 1.5s ease-in-out infinite; }
  .skrow:nth-child(2){ animation-delay:.12s; opacity:.8; }
  .skrow:nth-child(3){ animation-delay:.24s; opacity:.6; }
  .skc{ width:52px; height:52px; border-radius:50%; display:inline-block; margin:0 9px;
    background:
      linear-gradient(100deg, transparent 30%, rgba(var(--gold-rgb),.1) 48%,
        rgba(255,255,255,.12) 52%, transparent 70%),
      linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
    background-size:220% 100%, 100% 100%;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
    animation:skmove 1.5s ease-in-out infinite; }
  .skc:nth-child(2){ animation-delay:.12s; } .skc:nth-child(3){ animation-delay:.24s; }
  @media (prefers-reduced-motion:reduce){
    img.sk:not(.ldd), .tskel, .skrow, .skc{ animation:none; }
  }

  /* ---- full-component skeletons: a glass card with content shapes and one
     wide light beam sweeping across the whole card — premium, not per-icon ---- */
  .cskel{ position:absolute; inset:0; z-index:6; border-radius:inherit; overflow:hidden;
    background:linear-gradient(160deg, #182036, #0d1322);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
    display:flex; flex-direction:column; justify-content:center; gap:12px;
    padding:22px 24px; transition:opacity .45s ease; }
  .cskel.done{ opacity:0; pointer-events:none; }
  .cskel::after{ content:""; position:absolute; inset:-40px;
    background:linear-gradient(105deg, transparent 38%, rgba(var(--gold-rgb),.06) 46%,
      rgba(255,255,255,.11) 50%, rgba(var(--gold-rgb),.06) 54%, transparent 62%);
    transform:translateX(-130%);
    animation:csweep 2s cubic-bezier(.4,.2,.3,.9) infinite; }
  @keyframes csweep{ 55%,100%{ transform:translateX(130%); } }
  .cskel i{ display:block; border-radius:8px; background:rgba(255,255,255,.055);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); }
  .cskel .c{ border-radius:50%; flex:none; }
  .cskel .row{ display:flex; align-items:center; gap:14px; background:none; box-shadow:none; }
  .cskel .col{ display:flex; flex-direction:column; gap:9px; flex:1; background:none; box-shadow:none; }
  .has-cskel{ position:relative; }
  @media (prefers-reduced-motion:reduce){ .cskel::after{ animation:none; } }

  /* ---- themed scrollbars: thin, dark track, quiet gold thumb ---- */
  *{ scrollbar-width:thin; scrollbar-color:rgba(var(--gold-rgb),.28) rgba(9,14,26,.6); }
  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-track{ background:rgba(9,14,26,.6); border-radius:99px; }
  ::-webkit-scrollbar-thumb{ background:rgba(var(--gold-rgb),.28); border-radius:99px;
    border:2px solid rgba(9,14,26,.9); background-clip:padding-box; }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(var(--gold-rgb),.5); }
  ::-webkit-scrollbar-corner{ background:transparent; }

  /* ---- navigation progress bar: thin gold thread across the top ---- */
  #pgbar{ position:fixed; top:0; left:0; height:2px; width:0; z-index:var(--z-loadbar,65);
    background:linear-gradient(90deg, var(--gold-2, var(--gold-deep)), #f2d894);
    box-shadow:0 0 10px rgba(var(--gold-rgb),.55); opacity:0;
    transition:width .3s ease, opacity .25s ease; pointer-events:none; }
  #pgbar.run{ opacity:1; }

/* text for screen readers only (the Denarii button's name, ...) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

  /* ============ phone: the "more" button (_navbar_more.html, navbar/more.js) ============
     Sound, theme and language go behind one button; what stays in the bar is
     what you touch often, each at least 44px (they were 32px, seven in a row). */
  .gnav-more{ display:none; position:relative; flex:none; }
  .gm-home{ display:none !important; }
  @media (max-width:760px){
    .gnav-more{ display:inline-flex; }
    .gnav-more-btn{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
      border-radius:50%; border:1px solid rgba(240,237,230,.14); background:rgba(255,255,255,.04);
      color:#cfc8b6; cursor:pointer; padding:0; }
    .gnav-more-btn svg{ width:20px; height:20px; fill:currentColor; }
    .gnav-more-btn[aria-expanded="true"]{ border-color:rgba(var(--gold-rgb),.55); color:var(--gold-hi); }
    html[data-theme="light"] .gnav-more-btn{ color:#46536f; border-color:rgba(28,39,64,.16); background:rgba(28,39,64,.04); }
    .gnav-more-panel{ position:fixed; top:calc(var(--nav-h,64px) + 6px); right:10px; z-index:var(--z-popover,80);
      width:min(330px, calc(100vw - 20px)); padding:8px; border-radius:16px; border:1px solid rgba(240,237,230,.12);
      background:#0c101c; box-shadow:0 18px 44px rgba(0,0,0,.5); }   /* opaque: the page showed through */
    html[data-theme="light"] .gnav-more-panel{ background:#ffffff; border-color:rgba(28,39,64,.14);
      box-shadow:0 18px 44px rgba(30,48,90,.18); }
    .gnav-more-panel[hidden]{ display:none; }
    .gm-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:52px; padding:4px 8px; }
    .gm-row + .gm-row{ border-top:1px solid rgba(240,237,230,.08); }
    html[data-theme="light"] .gm-row + .gm-row{ border-top-color:rgba(28,39,64,.08); }
    .gm-lbl{ font-size:14px; color:var(--text, #f0ede6); }
    .gm-slot{ display:inline-flex; align-items:center; }
    /* the volume, inside the panel: always there, next to the sound button. As a
       popover (audio.js) it opened on focus and covered the rows below it. */
    .gnav .gnav-more-panel .audio-ctl{ gap:8px; }
    .gnav .gnav-more-panel .audio-pop{ position:static !important; opacity:1 !important; pointer-events:auto !important;
      transform:none !important; box-shadow:none !important; border:none !important; background:none !important;
      padding:0 !important; gap:6px; }
    .gnav .gnav-more-panel .audio-pop::before{ display:none; }
    .gnav .gnav-more-panel .audio-range{ width:104px; }
    /* the controls, inside: 44px, and both languages shown */
    .gnav-more-panel .audio-toggle, .gnav-more-panel .vd-theme-btn{ width:44px !important; height:44px !important; }
    .gnav .gnav-more-panel .gnav-lang{ display:inline-flex; gap:6px; }
    .gnav .gnav-more-panel .gnav-lang span{ display:none; }
    .gnav .gnav-more-panel .gnav-lang a, .gnav .gnav-more-panel .gnav-lang a.on{ display:inline-flex;
      width:44px; height:44px; }
    .gnav .gnav-more-panel .gnav-lang a.on{ color:var(--gold-hi); border-color:rgba(var(--gold-rgb),.55); }
    html[data-theme="light"] .gnav .gnav-more-panel .gnav-lang a.on{ color:#7a5509; border-color:rgba(143,100,16,.5); }
    /* what stays in the bar: a finger's size */
    .vn-bell{ width:44px !important; height:44px !important; }
    .gscore.den{ min-height:44px; }
    .gnav-user:has(img){ padding:2px; }
    .gnav-user img{ width:38px; height:38px; }
    .gnav-user:not(:has(img)){ min-height:44px; min-width:44px; justify-content:center; }
    .gnav-cta{ min-height:44px; }
  }