/* ============================================================
   NEONBET · Mobile shell — top bar + bottom tab bar + left drawer
   (frontend-redesign-v2 · faithful port of the designer package)
   ------------------------------------------------------------
   Ported verbatim-in-spirit from neonbet-design-ref (components.css
   + base.css), re-expressed on tokens.css. Renders the designer's
   .topnav / .bottombar / .mobile-drawer. js/nav.js injects the markup
   and wires every control to EXISTING production flows (auth modal,
   office panel, deposit, setLang, balance APIs) — no backend changes.

   Loaded after style.css. Legacy header chrome is hidden (not removed)
   so existing app.js functions keep resolving their elements harmlessly.
   ============================================================ */

/* ---- Retire legacy nav chrome (kept in DOM, hidden) ---- */
#main-screen > header.header,
#mobile-menu,
#hamburger-btn { display: none !important; }

/* ---- Clear the fixed top bar (+ bottom bar on mobile) ---- */
#main-screen { padding-top: calc(var(--nav-height-mobile) + env(safe-area-inset-top)); }
@media (min-width: 1200px) {
  #main-screen { padding-top: calc(var(--nav-height) + env(safe-area-inset-top)); }
}
@media (max-width: 1199px) {
  #main-screen { padding-bottom: calc(var(--bottombar-height) + env(safe-area-inset-bottom)); }
  /* The game overlay stops above the bottom bar wherever the bar exists,
     so the bar (z 50, below the overlay's z 3000) stays visible and the
     iframe is resized above it — never covered. Desktop (≥1200px, bar
     display:none) keeps the fullscreen inset:0 overlay. */
  #game-iframe-overlay { bottom: calc(var(--bottombar-height) + env(safe-area-inset-bottom)); }
}
body.is-drawer-open { overflow: hidden; }

/* Redesigned screens use the Archivo body font (--font-body collides with the
   legacy Rajdhani token, so reach through the non-colliding --font-sans). */
#main-screen, #auth-screen { font-family: var(--font-sans); }

/* ---- Layout primitive ---- */
.topnav .container,
.container.topnav-inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
@media (min-width: 768px) {
  .topnav .container { padding: 0 var(--space-8); }
}

/* ============================================================
   Buttons (designer primitive — collision-free in production)
   ============================================================ */
.btn {
  --btn-h: 44px; --btn-px: var(--space-5);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  height: var(--btn-h); padding: 0 var(--btn-px);
  border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-base); letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-sm { --btn-h: 36px; --btn-px: var(--space-4); font-size: var(--text-xs); }
.btn-lg { --btn-h: 52px; --btn-px: var(--space-6); font-size: var(--text-base); }
.btn-primary {
  background: var(--grad-primary); background-size: 200% 200%;
  color: var(--text-inverse); position: relative;
}
.btn-primary:hover { box-shadow: var(--glow-magenta); background-position: 100% 100%; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--grad-primary); filter: blur(18px); opacity: 0.35; z-index: -1;
}
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-subtle); }
.btn-secondary:hover { border-color: var(--border-strong); background: rgba(255,255,255,0.04); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.btn-icon { --btn-px: 0; width: var(--btn-h); padding: 0; border-radius: var(--radius-md); }

/* ============================================================
   Top navigation
   ============================================================ */
.topnav {
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(var(--nav-height-mobile) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--bg-surface-1);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  z-index: var(--z-nav);
}
@media (min-width: 1200px) {
  .topnav { height: calc(var(--nav-height) + env(safe-area-inset-top)); }
}
.topnav-inner { height: 100%; display: flex; align-items: center; gap: var(--space-4); }

.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -0.02em; color: var(--text-primary); text-decoration: none;
}
.brand-suffix { color: var(--text-secondary); font-weight: 500; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; isolation: isolate;
  transition: transform 380ms var(--ease-spring), filter 320ms var(--ease-out);
}
.brand-mark svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px rgba(255,46,147,0.35)); }
.brand:hover .brand-mark { transform: scale(1.08) rotate(15deg); filter: drop-shadow(0 0 12px rgba(255,46,147,0.55)); }

.nav-links { display: none; align-items: center; gap: var(--space-1); margin-left: var(--space-6); }
@media (min-width: 1200px) { .nav-links { display: flex; } }
.nav-link {
  position: relative; padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-secondary);
  border-radius: var(--radius-md); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--text-primary); }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: -2px;
  height: 2px; background: var(--grad-primary); border-radius: var(--radius-pill); box-shadow: var(--glow-magenta);
}

.nav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.nav-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-search-btn:hover { border-color: var(--neon-cyan); color: var(--text-primary); background: var(--bg-surface-2); }
.nav-search-btn svg { width: 18px; height: 18px; }

/* ---- Desktop language selector (topnav; hidden ≤1199px — see media query below,
   where the drawer's Language section takes over). A native <details> disclosure
   so it's keyboard-operable and needs no bespoke open/close state. ---- */
/* ── Language selector (desktop) ───────────────────────────
   button + role="listbox". The previous <details> disclosure announced as
   the wrong widget type; at 20+ locales that is the difference between
   usable and not. No flags: a flag is a country, not a language. */
.lang-switcher { position: relative; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 6px 10px;
  font-family: inherit; font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary); background: transparent;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  cursor: pointer; transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.lang-trigger:hover { border-color: var(--neon-cyan); color: var(--text-primary); background: var(--bg-surface-2); }
.lang-trigger:focus-visible { outline: none; border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(0,229,255,0.35); }
.lang-switcher .lang-globe { flex-shrink: 0; }
.lang-switcher .lang-caret { font-size: 0.7em; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-out); }
.lang-switcher.is-open .lang-trigger { border-color: var(--border-strong); color: var(--text-primary); }
.lang-switcher.is-open .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: calc(var(--z-nav) + 2);
  min-width: 220px; max-height: 60vh; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.lang-menu[hidden] { display: none; }
.lang-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; min-height: 40px;
  font-size: var(--text-sm); color: var(--text-secondary);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang-opt:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.lang-opt:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--neon-cyan) inset; }
.lang-opt.is-active { color: var(--text-primary); background: rgba(0,229,255,0.06); box-shadow: 0 0 0 1px var(--neon-cyan) inset; }
.lang-opt-label { font-weight: 500; }
/* The English name is a wayfinding aid for someone stranded in a language
   they cannot read — deliberately secondary, never the identifier. */
.lang-opt-en { margin-left: auto; padding-left: 10px; font-size: var(--text-xs); color: var(--text-muted); }
.lang-opt-check { color: var(--neon-cyan); font-size: 0.9em; flex-shrink: 0; margin-left: 6px; }

/* Accessible-only text (live region for the language-change announcement). */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.nav-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-md);
  color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-subtle); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav-burger:hover { background: var(--bg-surface-2); border-color: var(--border-strong); }
.nav-burger svg { width: 22px; height: 22px; }
@media (min-width: 1200px) { .nav-burger { display: none; } }

/* On mobile, hide secondary controls — they live in the drawer.
   Burger pinned left, brand pushes the rest to the right edge. */
@media (max-width: 1199px) {
  .nav-actions .nav-search-btn,
  .nav-actions .lang-switcher,
  .nav-actions .btn-icon,                /* bell + account → bottom bar / drawer on mobile */
  .nav-actions .btn-ghost.btn-sm,
  .nav-actions > a.btn-primary.btn-sm { display: none; }
  .nav-burger { order: -1; margin-right: var(--space-3); }
  .brand { margin-right: auto; }
}
/* Phones: drop the decorative .casino suffix so the brand stays compact and the
   balance pill always has room (the balance outranks the suffix). Returns at ≥600. */
@media (max-width: 599px) {
  .topnav .brand-suffix { display: none; }
}
/* Smallest phones (MEDIUM-2): drop the topnav wordmark too — the chip mark keeps
   brand identity while freeing ~80px so the balance pill shows the FULL balance
   (not an ellipsised one) at 320–360. The drawer brand keeps its wordmark. */
@media (max-width: 360px) {
  .topnav .brand > span:not(.brand-mark) { display: none; }
}

/* ---- Dual-balance pill ---- */
.balance-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-3) 0 8px;
  background: linear-gradient(180deg, rgba(26,28,44,0.95) 0%, rgba(14,15,26,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md);
  color: var(--text-primary); font-variant-numeric: tabular-nums; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.balance-pill:hover { border-color: rgba(0,240,255,0.45); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 3px rgba(0,240,255,0.08); }
.balance-pill-icon {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--neon-cyan);
  background: radial-gradient(circle at 50% 50%, rgba(0,240,255,0.18) 0%, rgba(0,240,255,0.04) 70%);
}
.balance-pill-icon svg { width: 16px; height: 16px; }
.balance-pill-stack { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.05; gap: 3px; }
.balance-pill-row { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.balance-pill-row .lbl { font-family: var(--font-display); color: var(--text-muted); text-transform: uppercase; font-weight: 400; font-size: 0.58rem; letter-spacing: 0.14em; }
.balance-pill-row .val { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.balance-pill-real .val { color: var(--text-primary); font-size: 0.92rem; }
.balance-pill-bonus .val { color: #d9b97a; font-size: 0.74rem; opacity: 0.92; }
.balance-pill-bonus .lbl { color: rgba(217,185,122,0.7); }
@media (max-width: 599px) {
  .balance-pill { height: 40px; padding-right: var(--space-2); gap: 6px; }
  .balance-pill-icon { width: 26px; height: 26px; }
  .balance-pill-row .lbl { display: none; }
  .balance-pill-real .val { font-size: 0.82rem; }
  .balance-pill-bonus .val { font-size: 0.68rem; }
}
/* MEDIUM-2 — the balance pill can never push past the viewport edge.
   Brand + burger hold their width; the pill shrinks and the value
   ellipsis-truncates inside the on-screen, tappable pill (a tap opens the
   office panel with the full balance). Pure layout safety — only engages
   when space is genuinely tight (e.g. 7-digit balance on a 320px phone). */
.brand { flex-shrink: 0; }
.nav-burger { flex-shrink: 0; }
.nav-actions { min-width: 0; }
.balance-pill { min-width: 0; flex-shrink: 1; }
.balance-pill-icon { flex-shrink: 0; }
.balance-pill-stack,
.balance-pill-row { min-width: 0; }
.balance-pill-row .val { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ============================================================
   Bottom tab bar (mobile)
   ============================================================ */
.bottombar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--bottombar-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(7,7,12,0.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-subtle);
  z-index: var(--z-nav); display: flex;
}
@media (min-width: 1200px) { .bottombar { display: none; } }
.bottombar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 0.68rem; font-weight: 500; color: var(--text-muted); text-decoration: none;
  min-width: 44px; min-height: 44px;
  transition: color var(--dur-fast) var(--ease-out);
}
.bottombar a svg { width: 22px; height: 22px; }
.bottombar a:hover { color: var(--text-primary); }
.bottombar a[aria-current="page"] { color: var(--neon-cyan); }
.bottombar a[aria-current="page"] svg { filter: drop-shadow(0 0 6px var(--neon-cyan)); }

/* ============================================================
   Mobile slide-in drawer (left)
   ============================================================ */
.drawer-scrim {
  position: fixed; inset: 0; background: rgba(7,7,12,0.65);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; z-index: calc(var(--z-nav) + 1);
  transition: opacity 220ms var(--ease-out);
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
/* The drawer IS the scroller — the same shape already proven on the Games
   filter drawer (.gv-filter, css/pages/games.css). Two faults were fixed here,
   both previously diagnosed on that drawer:

   1. `top:0 + bottom:0` resolves against iOS Safari's LAYOUT viewport, not the
      visible one, so with the URL bar and toolbar on screen the box ran past
      the bottom of the display. Everything after "Privacy" — Cookies,
      Responsible Gambling, Sign out, the footer — sat in that off-screen tail.
      Height now comes from the dynamic viewport (100dvh, 100vh fallback).
   2. `.drawer-body` was a NESTED scroller (`flex:1` + `overflow-y:auto`) with
      no `min-height:0`, so it could not shrink below its content and never
      became a scroller at all — and that nested shape is precisely what WebKit
      was proven on a real iPhone not to drive. There is now ONE scroll owner.

   That shape scrolls DOWN on device but sticks going back UP, so this element is
   now driven by js/filter-drag.js — the SAME module already proven on a real
   iPhone for .gv-filter, extended to cover this drawer rather than duplicated.
   The property set below is therefore matched to .gv-filter deliberately: that
   exact combination is the one the module is known to work with.

   The single intentional divergence is that `will-change: transform` has been
   REMOVED. .gv-filter never had it, and here it promoted the SCROLLING element
   itself to its own compositing layer — a long-standing cause of stuck scroll on
   iOS. The slide-in still composites fine without it. */
.mobile-drawer {
  position: fixed; top: 0; left: 0;
  height: 100vh; height: 100dvh; max-height: 100dvh;
  width: min(420px, 88vw); max-width: 100vw; z-index: calc(var(--z-nav) + 2);
  display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; touch-action: pan-y;
  background: var(--bg-base); border-right: 1px solid var(--border-subtle);
  box-shadow: 16px 0 60px rgba(0,0,0,0.55);
  transform: translateX(-100%); transition: transform 280ms var(--ease-out);
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer[hidden] { display: none; }
@media (min-width: 1200px) { .mobile-drawer, .drawer-scrim { display: none !important; } }

/* Pinned by sticky rather than by being a flex rail around a nested scroller.
   Needs its own opaque background (the drawer's colour) so rows passing
   underneath do not show through, and clears the notch since the drawer starts
   at the true top of the viewport. */
.drawer-head { flex: 0 0 auto; position: sticky; top: 0; z-index: 2; background: var(--bg-base); display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); padding-top: calc(var(--space-5) + env(safe-area-inset-top)); border-bottom: 1px solid var(--border-subtle); }
.drawer-brand { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text-primary); text-decoration: none; }
.drawer-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.drawer-close:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.drawer-close svg { width: 20px; height: 20px; }
/* Plain document flow — NOT a scroller. Do not reintroduce overflow or height
   limits here: that nested shape is what iOS refused to drive.
   `flex: 1 0 auto` keeps both behaviours the old `flex:1` was meant to give:
   it GROWS to fill the drawer when the menu is short, so .drawer-section-end's
   margin-top:auto still parks Sign out at the bottom; and it never SHRINKS
   below its content when the menu is long, so the drawer above scrolls it.
   Bottom padding clears the fixed bottombar and the home indicator, so the
   last row is fully visible and tappable rather than sitting under them. */
.drawer-body { flex: 1 0 auto; min-height: auto; overflow: visible; padding: var(--space-5) var(--space-5) calc(var(--bottombar-height) + var(--space-8) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--space-5); }

.drawer-user { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(217,70,239,0.08), rgba(99,102,241,0.06)); border: 1px solid var(--border-subtle); }
.drawer-user-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-inverse); font-size: var(--text-lg); flex-shrink: 0; }
.drawer-user-info { flex: 1; min-width: 0; }
.drawer-user-name { font-weight: 600; color: var(--text-primary); font-size: var(--text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-user-balances { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.drawer-bal { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.drawer-bal .lbl { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; }
.drawer-bal .val { font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.drawer-bal.sub .val { color: var(--gold-premium); font-size: 0.78rem; }
.drawer-user-link { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-secondary); background: var(--bg-surface); flex-shrink: 0; }

.drawer-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.drawer-cta-row:has(> .drawer-cta:only-child) { grid-template-columns: 1fr; }
.drawer-cta { width: 100%; justify-content: center; }

.drawer-section { display: flex; flex-direction: column; gap: var(--space-3); }
.drawer-section-end { margin-top: auto; padding-top: var(--space-3); }
.drawer-section-title { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted); margin: 0; padding: 0 var(--space-2); }

.drawer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.drawer-link { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--text-base); font-weight: 500; min-height: 48px; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.drawer-link:hover, .drawer-link:focus-visible { background: var(--bg-surface); color: var(--text-primary); outline: none; }
.drawer-link-arrow { color: var(--text-muted); font-size: var(--text-xl); line-height: 1; }
.drawer-list-sm .drawer-link { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); min-height: 40px; }

/* ── Language row in the drawer (mobile entry point) ─────── */
.drawer-lang-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; padding: 10px 12px;
  font-family: inherit; font-size: var(--text-sm); color: var(--text-secondary);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
}
.drawer-lang-row:hover { border-color: var(--border-strong); color: var(--text-primary); }
.drawer-lang-row:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,229,255,0.35); }
.drawer-lang-row-icon { display: inline-flex; flex-shrink: 0; color: var(--text-muted); }
.drawer-lang-row-value { margin-left: auto; color: var(--text-primary); font-weight: 500; }
.drawer-lang-row-arrow { color: var(--text-muted); flex-shrink: 0; }

/* ── Language bottom sheet (mobile) ────────────────────────
   Mirrors the drawer's scrim + is-open + body-lock idiom on purpose: one
   overlay pattern in this codebase, not two. Options sit in the thumb zone
   and the list scrolls internally, so 3 locales and 30 look the same. */
.lang-sheet-scrim {
  position: fixed; inset: 0; background: rgba(7,7,12,0.65);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; z-index: calc(var(--z-nav) + 3);
  transition: opacity 200ms var(--ease-out);
}
.lang-sheet-scrim.is-open { opacity: 1; pointer-events: auto; }
.lang-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-nav) + 4);
  display: flex; flex-direction: column;
  max-height: min(70dvh, 560px);
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg-surface); border-top: 1px solid var(--border-strong);
  border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,0.5);
  transform: translateY(100%); transition: transform 240ms var(--ease-out);
}
.lang-sheet.is-open { transform: translateY(0); }
.lang-sheet[hidden] { display: none; }
.lang-sheet-grab { width: 36px; height: 4px; margin: 4px auto 8px; border-radius: 2px; background: var(--border-strong); }
.lang-sheet-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 10px; }
.lang-sheet-title { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.lang-sheet-close {
  margin-left: auto; width: 36px; height: 36px; display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--text-secondary); background: transparent;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); cursor: pointer;
}
.lang-sheet-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,229,255,0.35); }
.lang-sheet-list { margin: 0; padding: 0 0 4px; list-style: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lang-sheet-opt {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 12px 10px;
  font-size: var(--text-base); color: var(--text-secondary);
  border-radius: var(--radius-sm); cursor: pointer;
}
.lang-sheet-opt + .lang-sheet-opt { border-top: 1px solid var(--border-subtle); }
.lang-sheet-opt:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--neon-cyan) inset; }
.lang-sheet-opt.is-active { color: var(--text-primary); background: rgba(0,229,255,0.06); }
body.is-lang-sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lang-sheet, .lang-sheet-scrim { transition: none; }
}

.drawer-signout { display: flex; align-items: center; justify-content: center; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-weight: 500; font-size: var(--text-sm); cursor: pointer; text-decoration: none; transition: all var(--dur-fast) var(--ease-out); }
.drawer-signout:hover { color: var(--neon-magenta); border-color: var(--neon-magenta); }
.drawer-footer { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); text-align: center; }
.drawer-foot-copy { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }