/* ============================================================
   01-tokens.css
   Design tokens, reset, base typography and scrollbars.
   Everything else reads the custom properties declared here.
   ------------------------------------------------------------
   Load order matters — see index.html. These files are the old
   app.css split at section boundaries, in the original order, so
   the cascade is unchanged.
   ============================================================ */
/* Fonts, served from this site rather than from Google: no visitor's address
   reaches a third party for them (a German court ruled Google-hosted fonts a
   GDPR breach), and they load over the connection already open. The files are
   Google's own subsets; unicode-range lets the browser fetch only the ones a
   page uses. Licences: assets/fonts/LICENSE.txt. */
@font-face{font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url(../assets/fonts/barlow-condensed-600-vietnamese.woff2) format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url(../assets/fonts/barlow-condensed-600-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url(../assets/fonts/barlow-condensed-600-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url(../assets/fonts/barlow-condensed-700-vietnamese.woff2) format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url(../assets/fonts/barlow-condensed-700-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url(../assets/fonts/barlow-condensed-700-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cinzel'; font-style:normal; font-weight:700; font-display:swap; src:url(../assets/fonts/cinzel-700-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cinzel'; font-style:normal; font-weight:700; font-display:swap; src:url(../assets/fonts/cinzel-700-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../assets/fonts/inter-cyrillic-ext.woff2) format('woff2'); unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../assets/fonts/inter-cyrillic.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../assets/fonts/inter-greek-ext.woff2) format('woff2'); unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../assets/fonts/inter-greek.woff2) format('woff2'); unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../assets/fonts/inter-vietnamese.woff2) format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../assets/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../assets/fonts/inter-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  /* deep navy base with warm gold accents, matching the design comp */
  --bg:#080b12; --bg-2:#0b1019;
  --surface:#111826; --surface-2:#16202f; --surface-3:#1e2a3c;
  --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.11); --line-3:rgba(var(--accent-rgb),.38);
  --text:#e9edf4; --text-dim:#93a1b5; --text-faint:#64738a;
  /* the small capitals over a block ("Mana curve", "Quick access"): lighter
     than faint, which read poorly at 11 px (5.5:1 on --surface, not 3.7:1) */
  --text-label:#8291a7;
  /* The accent family is the colour theme. settings.js sets all of these on
     <html> from the chosen preset; the values here are the gold default.
     --accent-rgb exists so tints can be written rgba(var(--accent-rgb),.3),
     --on-accent is the text on an accent-filled button. */
  --accent:#d9a441; --accent-hi:#f2c777; --accent-deep:#a87b28; --accent-rgb:217,164,65;
  --accent-soft:rgba(var(--accent-rgb),.12); --on-accent:#1a1205;
  /* warnings stay amber whatever the theme */
  --warn:#f2c777; --warn-rgb:240,168,51;
  /* the optional ring around card images */
  --frame:transparent; --frame-w:0px;
  --ok:#3fc78a; --ok-soft:rgba(63,199,138,.12);
  --bad:#ef5f5f; --bad-soft:rgba(239,95,95,.12);
  --info:#5aa9f0; --info-soft:rgba(90,169,240,.12);
  --w:#f3eeda; --u:#3aa5e8; --b:#9d90c0; --r:#f0604a; --g:#45c46f; --c:#a7aeb9;
  --r1:7px; --r2:12px; --r3:16px;
  --rail-w:250px;
  --shadow:0 12px 34px rgba(0,0,0,.55);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{
  /* The viewport meta's user-scalable=no is ignored by modern iOS/Android
     browsers; touch-action is the part they still honor, so it's the real
     pinch-zoom lock. pan-y ONLY: granting pan-x here let a sideways swipe drag
     the whole page instead of the control strip under the finger, which on iOS
     also widens the layout viewport and reflows the card grid to more columns.
     The strips that genuinely scroll sideways opt back in with pan-x. */
  touch-action:pan-y;
  overflow-x:hidden;
}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased;
  touch-action:pan-y;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(var(--accent-rgb),.055), transparent 68%),
    radial-gradient(900px 560px at 92% -4%, rgba(56,110,190,.10), transparent 70%),
    radial-gradient(700px 500px at 50% 105%, rgba(56,110,190,.06), transparent 70%);
}
h1,h2,h3,h4{font-family:'Barlow Condensed','Inter',sans-serif; margin:0; font-weight:600; line-height:1.15; letter-spacing:.02em; color:var(--text);}
.display{font-family:'Cinzel',Georgia,serif; letter-spacing:.04em; font-weight:700;}
a{color:var(--accent-hi); text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#2a303c;border-radius:6px;border:3px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#39414f;}

/* round language flags (js/flags.js) */
.lang-flag{
  display:inline-block; width:28px; height:28px; flex:0 0 28px; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), inset 0 0 0 1px rgba(0,0,0,.25);
}
.lang-flag svg{display:block; width:100%; height:100%;}