/* ===================== FONTS (self-hosted) ===================== */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/f0.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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/f1.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/f2.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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/f3.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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/f4.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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/f5.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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/f0.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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/f1.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/f2.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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/f3.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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/f4.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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/f5.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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/f0.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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/f1.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/f2.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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/f3.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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/f4.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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/f5.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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/f6.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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/f7.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/f8.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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/f9.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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/f10.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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/f11.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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/f6.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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/f7.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/f8.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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/f9.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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/f10.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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/f11.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:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/f6.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:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/f7.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/f8.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:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/f9.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:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/f10.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:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/f11.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;}
/* Michroma (SIL OFL, fonts/Michroma-OFL.txt): one weight, declared for all of
   them so browsers never fake a bold; drawn at 86% because it runs wide. */
@font-face{font-family:'Michroma';font-style:normal;font-weight:100 900;font-display:swap;size-adjust:86%;src:url("../fonts/michroma-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:'Michroma';font-style:normal;font-weight:100 900;font-display:swap;size-adjust:86%;src:url("../fonts/michroma-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 / RESET ===================== */
:root{
  --green:#5cff9d; --cyan:#2ee6ff; --purple:#b07cff; --pink:#ff5ce0; --yellow:#ffd35c; --red:#ff6b6b;
  --bg:#07100c; --ink:#e9f3ec; --muted:#9fc0a8; --muted-dim:#5f8a72; --muted-mid:#c4ddc8;
  --muted-soft:#cfe6d4; --muted-bright:#f0f7f1;
  --card-bd:rgba(255,255,255,.09);
  --card-bg:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-head:'Michroma',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  /* responsive scale — overridden in the breakpoints below */
  --nav-pad:14px 30px;
  --nav-gap:28px;
  --main-pad:0 30px;
  /* The scroll sidebar is position:fixed at the left edge. This is how much
     room the page has to leave for it: its 16px offset, its own width, and a
     gap so text never sits right against it. */
  --sidebar-reserve:176px;
  --hero-cols:1.05fr .95fr;
  --hero-gap:40px;
  --hero-pad:60px 0 36px;
  --hero-h1:60px;
  --hero-stats-gap:30px;
  --hero-art-min:420px;
  --how-cols:repeat(3,1fr);
  --lb-cols:54px 1fr 130px 86px;
  --lb-gap:14px;
  --lb-head-pad:14px 24px;
  --lb-row-pad:15px 24px;
  --hud-pad:20px 30px;
  --hud-gap:20px;
  --hud-stats-gap:30px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);}
body{color:var(--ink); font-family:var(--font-body); overflow-x:hidden;}
a{color:inherit;}
button{font:inherit;}
img{max-width:100%;}
::selection{background:var(--green); color:var(--bg);}
.hidden{display:none !important;}
/* For screen readers only: there, but not drawn. */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
/* Buttons that are styled like the links they used to be. */
button.btn-primary,button.btn-secondary,button.signin-btn,button.sidebar__signin,button.link-cyan{cursor:pointer;}
button.btn-primary{border:none;}
button.sidebar__signin{background:none; border:none;}
button.link-cyan{display:inline-flex; align-items:center; min-height:24px;}
.ta-r{text-align:right;}
.hl{color:var(--muted-soft);}
.config-warning{background:#3a2b0a; color:var(--yellow); font-family:var(--font-mono); font-size:12px; line-height:1.4; padding:8px 16px; text-align:center;}
:focus-visible{outline:2px solid var(--green); outline-offset:2px;}

/* ===================== KEYFRAMES ===================== */
@keyframes fireBeam{0%{transform:scaleX(0);opacity:.25}55%{opacity:1}100%{transform:scaleX(1);opacity:1}}
@keyframes impactPulse{0%{transform:scale(.3);opacity:.15}40%{opacity:1}100%{transform:scale(2.4);opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(16px,-20px)}100%{transform:translate(0,0)}}
@keyframes blink{0%,92%,100%{opacity:1}96%{opacity:.3}}
@keyframes lockon{0%{opacity:0; transform:translate(-50%,-50%) scale(.15) rotate(-110deg)}100%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0)}}
@keyframes tpulse{0%,100%{box-shadow:0 0 6px currentColor, inset 0 0 6px currentColor}50%{box-shadow:0 0 18px currentColor, 0 0 30px currentColor, inset 0 0 8px currentColor}}
@keyframes hitburst{0%{opacity:1; transform:translate(-50%,-50%) scale(.3)}100%{opacity:0; transform:translate(-50%,-50%) scale(2.3)}}
@keyframes countpop{0%{opacity:0; transform:translate(-50%,-50%) scale(2.4)}30%{opacity:1}100%{opacity:0; transform:translate(-50%,-50%) scale(.55)}}
@keyframes risein{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:translateY(0)}}
@keyframes fizzleBeam{0%{opacity:1}55%{opacity:.55; filter:blur(1px)}100%{opacity:0; filter:blur(4px)}}
@keyframes fizzleImpact{0%{opacity:1; transform:scale(1)}100%{opacity:0; transform:scale(2.6)}}

/* ===================== PAGE FRAME ===================== */
.page{position:relative; min-height:100vh; background:radial-gradient(130% 100% at 50% -10%, #0c2117 0%, #08130d 45%, #060d0a 100%);}
.bg-frame{position:fixed; inset:0; pointer-events:none; z-index:2; overflow:hidden;}
.bg-frame__corners{position:absolute; inset:0; background:
  radial-gradient(60% 42% at 0% 0%, rgba(20,80,45,.55), transparent 70%),
  radial-gradient(60% 42% at 100% 0%, rgba(16,70,60,.5), transparent 70%),
  radial-gradient(70% 45% at 0% 100%, rgba(18,75,40,.55), transparent 70%),
  radial-gradient(70% 45% at 100% 100%, rgba(14,62,52,.5), transparent 70%);}
.bg-frame__grid{position:absolute; inset:0; opacity:.4; background-image:linear-gradient(rgba(92,255,157,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(92,255,157,.05) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(circle at 50% 42%, transparent 32%, #000 78%); -webkit-mask-image:radial-gradient(circle at 50% 42%, transparent 32%, #000 78%);}
.bg-frame__vignette{position:absolute; inset:0; box-shadow:inset 0 0 200px 60px rgba(3,8,6,.9);}
.leaf,.firefly{position:absolute;}

.corner-chameleon{position:fixed; background:none; border:none; padding:0; cursor:pointer; pointer-events:auto; z-index:40; transition:opacity .4s, filter .4s, transform .4s;}
.corner-chameleon img{width:100%; height:100%; object-fit:contain;}
.corner-chameleon--left{left:-30px; bottom:-16px; width:150px; height:104px; opacity:.5;}
.corner-chameleon--left img{transform:scaleX(-1); filter:brightness(.62) drop-shadow(0 0 1px rgba(92,255,157,.3));}
.corner-chameleon--left:hover,.corner-chameleon--left:focus-visible{opacity:.9; filter:drop-shadow(0 0 10px rgba(92,255,157,.4)); transform:translateY(-3px);}
.corner-chameleon--right{right:-26px; bottom:-12px; width:132px; height:92px; opacity:.42;}
.corner-chameleon--right img{filter:brightness(.6) drop-shadow(0 0 1px rgba(46,230,255,.3));}
.corner-chameleon--right:hover,.corner-chameleon--right:focus-visible{opacity:.85; filter:drop-shadow(0 0 10px rgba(46,230,255,.4)); transform:translateY(-3px);}
/* The top-right chameleon was removed from the markup. This keeps a stale copy
   of index.html from rendering it unsized and unpositioned at natural scale. */
.corner-chameleon--top{display:none !important;}
/* Defensive: a corner chameleon must never exceed its intended footprint. */
.corner-chameleon{max-width:150px; max-height:104px;}

/* ===================== NAVBAR ===================== */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(7,16,12,.74); border-bottom:1px solid rgba(92,255,157,.12);}
.nav{position:relative; max-width:1240px; margin:0 auto; padding:var(--nav-pad); display:flex; align-items:center; gap:var(--nav-gap);}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; position:relative; flex:none; z-index:30;}
.brand__mark{position:relative; width:50px; height:50px; display:flex; align-items:center;}
.brand__glow{position:absolute; inset:-7px; border-radius:50%; background:radial-gradient(circle, rgba(92,255,157,.4), transparent 70%); filter:blur(4px);}
.brand__mark img{position:relative; width:50px; height:50px; filter:drop-shadow(0 0 6px rgba(92,255,157,.5));}
/* The nav beam starts on the logo's own laser line (assets/logo.png), so the two
   read as one. That line leaves the disc at 97.55% across, 34.53% down, and is
   drawn 0.75px thick at the 50px size -- twice a body line, and the width the
   beam starts at before it flares to 4px (.beam-line). The origin sits 1px
   inside the edge so the beam's rounded end overlaps the drawn line instead of
   leaving a notch. Re-measure if the logo changes. */
.brand__mouth{position:absolute; left:95.5%; top:34.53%; width:0; height:0;}
.brand__title{font-family:var(--font-head); font-weight:700; font-size:22px; letter-spacing:.07em; background:linear-gradient(92deg,#5cff9d,#2ee6ff 55%,#b07cff); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1;}
.brand__sub{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.4em; color:var(--muted-dim); margin-top:3px; line-height:1;}

.nav-list{list-style:none; margin:0 0 0 auto; padding:0; display:flex; align-items:center; gap:6px;}
.nav-list li{position:relative;}
.nav-link{position:relative; display:inline-flex; align-items:center; padding:9px 15px; border-radius:9px; text-decoration:none; color:var(--muted-mid); font-family:var(--font-head); font-weight:500; font-size:14.5px; letter-spacing:.015em; cursor:pointer; transition:color .15s; z-index:30; user-select:none;}
.nav-link:hover,.nav-link:focus-visible{color:#fff; text-shadow:0 0 12px rgba(255,255,255,.55);}
.nav-link__label{position:relative; z-index:2;}
.nav-link__graze{position:absolute; inset:0; border-radius:9px; pointer-events:none; z-index:1; mix-blend-mode:screen; transition:opacity .12s ease-out; opacity:0;}
.nav-link__hl{position:absolute; inset:-3px -7px; border-radius:10px; pointer-events:none; z-index:1; transform-origin:center; transition:opacity .16s ease-out, transform .16s ease-out; transform:scale(.8); opacity:0;}

.signin-btn{flex:none; margin-left:6px; padding:9px 18px; border-radius:999px; border:1px solid rgba(92,255,157,.45); color:var(--green); background:rgba(92,255,157,.06); text-decoration:none; font-family:var(--font-head); font-weight:600; font-size:14px; letter-spacing:.02em; transition:all .15s; z-index:30; cursor:pointer; white-space:nowrap;}
.signin-btn:hover{background:rgba(92,255,157,.16); box-shadow:0 0 18px rgba(92,255,157,.35);}

.user-chip{flex:none; margin-left:6px; display:flex; align-items:center; gap:10px; padding:5px 8px 5px 5px; border-radius:999px; border:1px solid rgba(92,255,157,.3); background:rgba(92,255,157,.06); z-index:30;}
.user-chip__avatar{position:relative; width:32px; height:32px; border-radius:50%; overflow:hidden; flex:none; background:#0a1810; border:1px solid rgba(92,255,157,.4);}
.user-chip__avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.user-chip__meta{line-height:1.15;}
.user-chip__label{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.16em; color:var(--muted-dim);}
.user-chip__name{font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--ink); letter-spacing:.03em;}
.user-chip__signout{margin-left:2px; width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--muted); cursor:pointer; font-size:12px; line-height:1;}
.user-chip__signout:hover{border-color:var(--red); color:var(--red);}

/* hamburger — desktop hides it, mobile breakpoint shows it */
.hamburger{display:none; margin-left:auto; flex:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:9px; border:1px solid rgba(92,255,157,.3); background:rgba(92,255,157,.06); color:var(--green); cursor:pointer; z-index:30;}
.hamburger__bars{display:block; width:18px; height:2px; background:currentColor; position:relative;}
.hamburger__bars::before,.hamburger__bars::after{content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor;}
.hamburger__bars::before{top:-6px;}
.hamburger__bars::after{top:6px;}

.mobile-menu{display:flex; flex-direction:column; gap:2px; position:absolute; top:100%; left:0; right:0; padding:10px 16px 16px; background:rgba(7,16,12,.98); backdrop-filter:blur(14px); border-bottom:1px solid rgba(92,255,157,.16); box-shadow:0 20px 40px rgba(0,0,0,.4); z-index:29;}
.mobile-menu__link{display:block; padding:12px 10px; border-radius:9px; text-decoration:none; color:var(--muted-mid); font-family:var(--font-head); font-weight:600; font-size:16px;}
.mobile-menu__link:hover,.mobile-menu__link:focus-visible{color:#fff; background:rgba(92,255,157,.08);}

.beam-wrap{position:absolute; height:4px; margin-top:-2px; transform-origin:0 50%; pointer-events:none; z-index:45;}
/* The beam leaves the logo at the drawn laser's 0.75px (41%-59% of 4px) and
   flares to its full 4px over the first 18px -- thin inside the mark, wider out
   in the open. */
.beam-line{width:100%; height:100%; border-radius:4px; transform-origin:left center;
  clip-path:polygon(0 41%, 18px 0, 100% 0, 100% 100%, 18px 100%, 0 59%);}
.beam-line.is-firing{animation:fireBeam .14s ease-out;}
.beam-line.is-fizzling{animation:fizzleBeam .42s ease-out forwards;}
.beam-impact{position:absolute; width:12px; height:12px; margin-left:-6px; margin-top:-6px; border-radius:50%; background:#fff; pointer-events:none; z-index:46;}
.beam-impact.is-firing{animation:impactPulse .42s ease-out;}
.beam-impact.is-fizzling{animation:fizzleImpact .45s ease-out forwards;}

/* ===================== SCROLL SIDEBAR ===================== */
.sidebar{position:fixed; left:16px; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:4px; padding:12px 10px; border-radius:14px; border:1px solid rgba(92,255,157,.16); background:rgba(7,16,12,.85); backdrop-filter:blur(12px); box-shadow:0 10px 40px rgba(0,0,0,.45); animation:risein .25s ease-out;}
.sidebar__logo{display:flex; justify-content:center; padding:2px 0 8px; border-bottom:1px solid rgba(92,255,157,.14); margin-bottom:6px; text-decoration:none;}
.sidebar__logo img{width:30px; height:auto; filter:drop-shadow(0 0 5px rgba(92,255,157,.45));}
.sidebar__link{display:block; padding:8px 12px; border-radius:8px; text-decoration:none; font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:.03em; transition:all .15s; color:var(--muted-mid);}
.sidebar__link:hover{color:#fff; text-shadow:0 0 10px rgba(255,255,255,.5);}
.sidebar__link.is-active{box-shadow:inset 2px 0 0 currentColor;}
.sidebar__foot{border-top:1px solid rgba(92,255,157,.14); margin-top:6px; padding-top:9px; display:flex; justify-content:center;}
.sidebar__avatar{display:block; width:30px; height:30px; border-radius:50%; overflow:hidden; position:relative; background:#0a1810; border:1px solid rgba(92,255,157,.45); box-shadow:0 0 10px rgba(92,255,157,.3);}
.sidebar__avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.sidebar__signin{font-family:var(--font-head); font-weight:600; font-size:12px; color:var(--green); text-decoration:none; letter-spacing:.04em; padding:4px 8px; cursor:pointer;}
.sidebar__signin:hover{text-shadow:0 0 10px rgba(92,255,157,.6);}

/* ===================== MAIN / SHARED ===================== */
main{position:relative; z-index:10; max-width:1240px; margin:0 auto; padding:var(--main-pad);}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.24em; margin-bottom:10px;}
.section-title{font-family:var(--font-head); font-weight:700; font-size:40px; letter-spacing:-.015em; margin:0; text-wrap:balance;}
.card{border:1px solid var(--card-bd); border-radius:18px; background:var(--card-bg);}
.section{padding:48px 0 30px;}
.section__intro{margin-bottom:24px;}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px;}
.unit{font-size:.55em;}

/* ===================== HERO ===================== */
.hero{display:grid; grid-template-columns:var(--hero-cols); gap:var(--hero-gap); align-items:center; padding:var(--hero-pad);}
.hero__badge{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; color:var(--green); border:1px solid rgba(92,255,157,.3); border-radius:999px; padding:6px 13px; margin-bottom:24px;}
.hero__dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:blink 4s infinite;}
.hero h1{font-family:var(--font-head); font-weight:700; font-size:calc(var(--hero-h1) * .86); line-height:1.16; letter-spacing:-.01em; margin:0 0 20px; text-wrap:balance;}
.hero h1 .grad{background:linear-gradient(95deg,#5cff9d,#2ee6ff 50%,#b07cff); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{font-size:18px; line-height:1.6; color:var(--muted); max-width:480px; margin:0 0 30px; text-wrap:pretty;}
.hero p .hl{color:#d7ecdb;}
.hero__ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px;}
.btn-primary{display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:11px; text-decoration:none; font-family:var(--font-head); font-weight:600; font-size:15.5px; color:#06140d; background:linear-gradient(95deg,#5cff9d,#2ee6ff); box-shadow:0 0 26px rgba(92,255,157,.4); transition:transform .15s,box-shadow .15s; border:none; cursor:pointer;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 38px rgba(92,255,157,.6);}
.btn-secondary{display:inline-flex; align-items:center; padding:14px 24px; border-radius:11px; text-decoration:none; font-family:var(--font-head); font-weight:600; font-size:15.5px; color:var(--ink); border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.03); transition:all .15s;}
.btn-secondary:hover{border-color:rgba(46,230,255,.5); color:var(--cyan);}
.hero__stats{display:flex; flex-wrap:wrap; gap:14px var(--hero-stats-gap);}
.hero > *{min-width:0;}
.hero__stat-num{font-family:var(--font-head); font-weight:700; font-size:26px; color:#fff;}
.hero__stat-num span{font-size:15px; color:var(--green);}
.hero__stat-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--muted-dim); margin-top:3px;}
.hero__divider{width:1px; background:rgba(255,255,255,.1);}
.hero__art{position:relative; display:flex; justify-content:center; align-items:center; min-height:var(--hero-art-min);}
.hero__art-glow{position:absolute; width:min(470px,100%,92vw); height:min(470px,100%,92vw); border-radius:50%; background:radial-gradient(circle at 62% 42%, rgba(255,92,224,.2), transparent 60%), radial-gradient(circle at 38% 60%, rgba(46,230,255,.18), transparent 64%); opacity:0;}
.hero__art-img{position:relative; width:100%; max-width:560px;
  filter:drop-shadow(0 22px 55px var(--glow-a)) drop-shadow(0 0 30px var(--glow-b)); transition:filter 3s ease;}
/* The hero chameleon (heroChameleon() in app.js). It comes out of camouflage
   the way a chameleon would -- in blotches, left to right: the tail, a patch
   of the crest, a back leg, the middle... the head last -- drawn on a canvas
   over the first palette. Then it floats, and changes colour the same way,
   the next palette spreading over the last in blotches (the drawings match
   stroke for stroke). Exactly one palette is shown as an image at a time; the
   canvas draws the changes. Hidden until the script starts it; a <noscript>
   rule shows the first palette without it. */
.cham{position:relative;}
.cham__pal{display:block; width:100%; height:auto; opacity:0;}
.cham__pal + .cham__pal, .cham__reveal{position:absolute; inset:0; width:100%; height:100%;}
.cham__pal.is-on{opacity:1; z-index:2;}
.cham__reveal{z-index:3; pointer-events:none;}
.hero__art.is-ready .hero__art-img{animation:chamFloat 11s ease-in-out 3.2s infinite;}
.hero__art.is-ready .hero__art-glow{animation:chamGlow 3s ease-out both;}
@keyframes chamFloat{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  25%    {transform:translate(12px,-14px) rotate(-1.4deg);}
  50%    {transform:translate(-2px,-24px) rotate(.4deg);}
  75%    {transform:translate(-14px,-9px) rotate(1.2deg);}
}
@keyframes chamGlow{from{opacity:0} to{opacity:1}}
/* Its glow follows the palette. */
.hero__art{--glow-a:rgba(255,92,224,.32); --glow-b:rgba(46,230,255,.28);}
.hero__art[data-pal="toxic"]{--glow-a:rgba(150,255,60,.26); --glow-b:rgba(40,255,170,.24);}
.hero__art[data-pal="inferno"]{--glow-a:rgba(255,70,60,.3); --glow-b:rgba(255,170,40,.24);}
.hero__art[data-pal="arctic"]{--glow-a:rgba(70,140,255,.3); --glow-b:rgba(170,240,255,.26);}
.hero__art[data-pal="synthwave"]{--glow-a:rgba(255,70,190,.3); --glow-b:rgba(255,160,70,.24);}
.hero__art[data-pal="woodland"]{--glow-a:rgba(110,128,62,.26); --glow-b:rgba(169,149,107,.18);}
.hero__art[data-pal="desert"]{--glow-a:rgba(196,160,100,.24); --glow-b:rgba(150,110,66,.2);}
.hero__art[data-pal="urban"]{--glow-a:rgba(140,150,156,.22); --glow-b:rgba(176,182,178,.16);}
.hero__art[data-pal="multicam"]{--glow-a:rgba(160,146,104,.24); --glow-b:rgba(112,122,80,.2);}
.hero__art[data-pal="marpat"]{--glow-a:rgba(92,112,70,.24); --glow-b:rgba(134,112,82,.18);}
.hero__art[data-pal="stealth"]{--glow-a:rgba(120,126,134,.16); --glow-b:rgba(80,86,94,.14);}
.hero__art[data-pal="m81"]{--glow-a:rgba(84,112,62,.26); --glow-b:rgba(160,138,100,.18);}
.hero__art[data-pal="sand"]{--glow-a:rgba(206,176,124,.24); --glow-b:rgba(160,120,80,.2);}

/* ===================== HOW IT WORKS ===================== */
.how{padding:24px 0 26px;}
.how__grid{display:grid; grid-template-columns:var(--how-cols); gap:16px;}
.how__card{border-radius:16px; padding:24px 24px 22px;}
.how__card--plain{border:1px solid rgba(255,255,255,.09); background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));}
.how__card--cyan{border:1px solid rgba(46,230,255,.18); background:linear-gradient(180deg, rgba(46,230,255,.06), rgba(46,230,255,.015));}
.how__num{font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; margin-bottom:14px;}
.how__card h3{font-family:var(--font-head); font-weight:700; font-size:19px; margin:0 0 8px; letter-spacing:.01em;}
.how__card p{font-size:14px; color:var(--muted); margin:0 0 14px; line-height:1.55;}
.how__card--plain p{margin-bottom:0;}
.link-cyan{font-family:var(--font-head); font-weight:600; font-size:13.5px; color:var(--cyan); text-decoration:none; cursor:pointer; background:none; border:none; padding:0;}
.link-cyan:hover{text-shadow:0 0 12px rgba(46,230,255,.6);}

/* ===================== LEADERBOARD ===================== */
.tabs{display:flex; gap:6px; padding:5px; border-radius:13px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);}
.tab-btn{padding:8px 16px; border-radius:9px; border:none; cursor:pointer; font-family:var(--font-head); font-weight:600; font-size:13.5px; letter-spacing:.02em; transition:all .15s; color:var(--muted); background:transparent;}
.tab-btn.is-active{color:#06140d; background:linear-gradient(95deg,#5cff9d,#2ee6ff); box-shadow:0 0 16px rgba(92,255,157,.4);}
.lb{border-radius:18px; overflow:hidden;}
.lb__head{display:grid; grid-template-columns:var(--lb-cols); gap:var(--lb-gap); padding:var(--lb-head-pad); font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--muted-dim); border-bottom:1px solid rgba(255,255,255,.08);}
.lb__row{display:grid; grid-template-columns:var(--lb-cols); gap:var(--lb-gap); align-items:center; padding:var(--lb-row-pad); border-bottom:1px solid rgba(255,255,255,.05);}
.lb__row.is-you{background:rgba(255,211,92,.07);}
.lb__rank{font-family:var(--font-head); font-weight:700; font-size:20px;}
.lb__op{display:flex; align-items:center; gap:14px; min-width:0;}
.lb__avatar{flex:none; width:42px; height:42px; border-radius:11px; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);}
.lb__avatar img{width:100%; height:100%; object-fit:cover;}
.lb__meta{min-width:0; flex:1;}
.lb__name{font-family:var(--font-head); font-weight:600; font-size:15.5px; letter-spacing:.01em; color:var(--muted-bright); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lb__name.is-you{color:var(--yellow);}
.lb__bartrack{margin-top:7px; height:5px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden;}
.lb__bar{height:100%; border-radius:3px; background:linear-gradient(90deg,#5cff9d,#2ee6ff); box-shadow:0 0 8px rgba(92,255,157,.5);}
.lb__bar.is-you{background:linear-gradient(90deg,#ffd35c,#ff9a3c); box-shadow:0 0 8px rgba(255,211,92,.6);}
.lb__time{text-align:right; font-family:var(--font-mono); font-weight:700; font-size:17px; color:#fff; font-variant-numeric:tabular-nums;}
.lb__runs{text-align:right; font-family:var(--font-mono); font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums;}
.lb__foot{padding:15px 24px; text-align:center;}
.lb__empty{padding:34px 24px; text-align:center; font-size:14px; color:var(--muted);}

/* ===================== PROFILE ===================== */
.profile-head{padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; margin-bottom:18px;}
.profile-head__id{display:flex; align-items:center; gap:20px;}
.profile-head__avatar{position:relative; width:78px; height:78px; border-radius:50%; overflow:hidden; flex:none; background:#0a1810; border:2px solid rgba(255,255,255,.2);}
.profile-head__avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.profile-head__label{font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; color:var(--muted-dim);}
.profile-head__name{font-family:var(--font-head); font-weight:700; font-size:34px; line-height:1.1; margin:2px 0 4px; word-break:break-word;}
.profile-head__change{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:.04em; color:var(--cyan); text-decoration:none;}
.profile-head__change:hover{text-shadow:0 0 12px rgba(46,230,255,.6);}
.profile-head__stats{display:flex; gap:12px; flex-wrap:wrap;}
.stat-box{min-width:96px; flex:1; padding:16px 18px; border-radius:13px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); text-align:center;}
.stat-box__num{font-family:var(--font-head); font-weight:700; font-size:30px; line-height:1; font-variant-numeric:tabular-nums;}
.stat-box__label{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; color:var(--muted-dim); margin-top:7px;}

.profile-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:18px; align-items:start;}
.progress-card,.log-card{padding:24px 26px;}
.progress-card__top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px;}
.progress-card__top > div:first-child{flex:1; min-width:0;}
.progress-card h3,.log-card h3{font-family:var(--font-head); font-weight:700; font-size:22px; letter-spacing:.02em; margin:0;}
.progress-card__sub{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--muted-dim); margin-top:8px;}
/* Top right of the chart card: the period buttons, and the average of every
   shot in that period. */
.chart-avg{flex:none; display:flex; flex-direction:column; align-items:flex-end; text-align:right;}
.chart-avg .range-picker{margin:0 0 10px;}
.chart-avg .range-btn{padding:7px 11px;}
/* Phones: no room beside the title, so the block goes under it: the buttons,
   then the average (beside them where it fits). */
@media (max-width:699px){
  .progress-card__top{flex-wrap:wrap;}
  .progress-card__top > div:first-child{flex:1 1 100%;}
  .chart-avg{width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 12px; text-align:left;}
  .chart-avg .range-picker{margin:0;}
}
.chart-avg__label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; color:var(--muted-dim);}
.chart-avg__num{font-family:var(--font-head); font-size:26px; line-height:1.25; color:var(--cyan); font-variant-numeric:tabular-nums;}
.chart-avg__sub{font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--muted);}
.game-picker{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 14px;}
.game-btn{padding:7px 13px; border-radius:8px; border:1px solid rgba(255,255,255,.1); cursor:pointer; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; transition:all .15s; color:var(--muted); background:rgba(255,255,255,.03);}
.game-btn.is-active{border-color:transparent; color:#06140d; background:linear-gradient(95deg,#5cff9d,#2ee6ff); box-shadow:0 0 14px rgba(92,255,157,.4);}
/* Progress chart (drawn by renderChart in app.js). Grid recessive, whole
   seconds heavier; series colours are marks only -- text stays in ink. */
.chart-wrap{position:relative;}
.chart{width:100%; height:250px; display:block; overflow:visible;}
.chart .grid-minor{stroke:rgba(255,255,255,.055); stroke-width:1;}
.chart .grid-major{stroke:rgba(255,255,255,.2); stroke-width:1;}
.chart .chart-axis{fill:var(--muted-dim); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em;}
.chart .chart-axis--first{fill:rgba(46,230,255,.75);}
.chart .chart-axis--split{fill:#ff8a1f; font-size:10px;}
.range-picker{display:flex; gap:0; margin:-4px 0 14px; width:max-content; max-width:100%; border:1px solid rgba(255,255,255,.14); border-radius:999px; overflow:hidden;}
.range-btn{appearance:none; border:0; background:transparent; color:var(--muted); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; padding:7px 14px; cursor:pointer; min-height:34px;}
.range-btn + .range-btn{border-left:1px solid rgba(255,255,255,.14);}
.range-btn.is-active{background:rgba(46,230,255,.14); color:var(--ink);}
.range-btn:focus-visible{outline:2px solid var(--accent, #2ee6ff); outline-offset:-2px;}
.chart .chart-latest{stroke:#5cff9d; stroke-width:1.5; stroke-dasharray:3 4; opacity:.45;}
/* One hover / touch / keyboard target over the whole plot; the picked shot
   gets a guide line and a ring. Dividers mark where a day (or month) begins. */
.chart .chart-hit{cursor:crosshair; outline:none; touch-action:pan-y;}
.chart .chart-hit:focus-visible{stroke:var(--cyan); stroke-opacity:.7; stroke-width:1.5;}
.chart .chart-sel{stroke:#fff; stroke-opacity:.4; stroke-width:1; pointer-events:none;}
.chart .chart-sel-dot{fill:none; stroke:#fff; stroke-width:1.5; pointer-events:none;}
.chart .chart-divider{stroke:rgba(255,255,255,.1); stroke-width:1;}
.chart-legend{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin:0 0 10px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em; color:var(--muted);}
.chart-legend__item{display:inline-flex; align-items:center; gap:7px;}
.chart-legend__toggle{padding:5px 10px; margin:-5px 0; border-radius:999px; border:1px solid rgba(255,138,31,.45); background:rgba(255,138,31,.08); color:var(--ink); font:inherit; cursor:pointer;}
.chart-legend__toggle[aria-pressed="false"]{border-color:rgba(255,255,255,.14); background:transparent; color:var(--muted-dim);}
.chart-legend__toggle[aria-pressed="false"] .chart-key{opacity:.35;}
.chart-key{display:inline-block; width:10px; height:10px; border-radius:50%; flex:none;}
.chart-key--first{background:#2ee6ff;}
.chart-key--split{background:#ff8a1f; box-shadow:0 0 8px rgba(255,138,31,.6);}
.chart-key--centre{background:var(--muted-soft);}
.chart-key--outer{border:2px solid var(--muted-soft); width:9px; height:9px; box-sizing:border-box;}
.chart-tip{position:absolute; top:34px; z-index:5; min-width:150px; max-width:240px; padding:9px 11px; border-radius:10px; background:rgba(6,16,11,.96); border:1px solid rgba(255,255,255,.14); box-shadow:0 8px 24px rgba(0,0,0,.45); font-family:var(--font-mono); font-size:12px; line-height:1.5; color:var(--ink); pointer-events:none; font-variant-numeric:tabular-nums;}
.chart-tip__head{color:var(--muted); font-size:11px; letter-spacing:.04em; margin-bottom:2px;}
.chart-tip__split::before{content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:#ff8a1f; margin-right:6px; vertical-align:1px;}
.chart-note{margin-top:10px; font-size:12.5px; color:var(--muted); line-height:1.5;}
.chart-note a{color:var(--cyan);}
.sessions-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--muted-dim); margin:26px 0 8px;}
.session-row{display:grid; grid-template-columns:78px 1fr auto; gap:16px; align-items:center; padding:13px 14px; border-radius:9px; border-bottom:1px solid rgba(255,255,255,.05);}
.session-row.is-latest{background:rgba(92,255,157,.08);}
.session-row__date{font-family:var(--font-mono); font-size:13px; color:var(--muted);}
.session-row__game{font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--muted-bright); letter-spacing:.01em;}
.session-row__extra{display:block; margin-top:2px; font-family:var(--font-mono); font-weight:400; font-size:11.5px; color:var(--muted); letter-spacing:.02em;}
.session-row__time{font-family:var(--font-mono); font-weight:700; font-size:16px; font-variant-numeric:tabular-nums;}
.empty-note{font-size:13.5px; color:var(--muted-dim); padding:10px 2px;}

.field-label{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--muted-dim); margin-bottom:9px;}
.field-input{width:100%; padding:14px 16px; border-radius:11px; border:1px solid rgba(255,255,255,.14); background:rgba(7,16,12,.6); color:var(--ink); font-family:var(--font-mono); font-size:16px; outline:none; transition:all .15s; margin-bottom:20px;}
.field-input:focus{border-color:var(--cyan); box-shadow:0 0 16px rgba(46,230,255,.25);}
.field-static{width:100%; padding:14px 16px; border-radius:11px; border:1px solid rgba(255,255,255,.14); background:rgba(7,16,12,.6); color:var(--ink); font-family:var(--font-head); font-weight:600; font-size:16px; margin-bottom:24px;}
.log-card p{font-size:14.5px; color:var(--muted); margin:10px 0 22px; line-height:1.5;}

/* ===================== AVATARS ===================== */
.avatars-intro p{font-size:16px; color:var(--muted); margin:12px 0 0; max-width:580px;}
.cat-picker{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px;}
.cat-btn{display:inline-flex; align-items:center; gap:8px; padding:9px 17px; border-radius:10px; border:1px solid rgba(255,255,255,.1); cursor:pointer; font-family:var(--font-head); font-weight:600; font-size:14px; letter-spacing:.02em; transition:all .15s; color:var(--muted-mid); background:rgba(255,255,255,.03);}
.cat-btn.is-active{border-color:transparent; color:#06140d; background:linear-gradient(95deg,#5cff9d,#2ee6ff); box-shadow:0 0 16px rgba(92,255,157,.4);}
.cat-btn.is-locked{opacity:.6;}
.cat-btn__badge{font-family:var(--font-mono); font-size:11px; opacity:.85;}
.avatar-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(252px,1fr)); gap:18px;}
.avatar-tile{position:relative; display:block; width:100%; height:300px; padding:0; border-radius:18px; overflow:hidden; cursor:pointer; text-align:left; border:1px solid rgba(255,255,255,.1); transition:all .18s ease-out; background:#0b1410;}
.avatar-tile.is-selected{transform:translateY(-2px);}
.avatar-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.avatar-tile img.is-contain{object-fit:contain; padding:18px 14px 46px;}
.avatar-tile__shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,16,12,.05) 40%, rgba(7,16,12,.9) 100%);}
.avatar-tile__tag{position:absolute; top:11px; left:13px; z-index:2; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-shadow:0 1px 4px rgba(0,0,0,.7);}
.avatar-tile__check{position:absolute; top:10px; right:12px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#06140d; z-index:3; opacity:0; transform:scale(.4); transition:all .18s;}
.avatar-tile.is-selected .avatar-tile__check{opacity:1; transform:scale(1);}
.avatar-tile__name{position:absolute; left:16px; bottom:14px; z-index:2; font-family:var(--font-head); font-weight:700; font-size:17px; letter-spacing:.04em; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6);}
.locked-panel{border:1px solid rgba(255,255,255,.1); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); padding:54px 40px; text-align:center;}
.locked-panel__icon{font-size:46px; margin-bottom:12px; filter:drop-shadow(0 0 14px rgba(255,211,92,.5));}
.locked-panel__title{font-family:var(--font-head); font-weight:700; font-size:26px; letter-spacing:.04em; color:var(--yellow);}
.locked-panel p{font-size:15.5px; color:var(--muted); margin:12px auto 22px; max-width:430px; line-height:1.55;}
.locked-panel strong{color:var(--ink);}
.locked-panel__bar-wrap{max-width:360px; margin:0 auto;}
.locked-panel__track{height:8px; border-radius:5px; background:rgba(255,255,255,.08); overflow:hidden;}
.locked-panel__bar{height:100%; border-radius:5px; background:linear-gradient(90deg,#ffd35c,#ff9a3c); box-shadow:0 0 10px rgba(255,211,92,.6);}
.locked-panel__legend{display:flex; justify-content:space-between; margin-top:9px; font-family:var(--font-mono); font-size:11.5px; color:var(--muted-dim);}

/* ===================== COMMUNITY PULSE ===================== */
.pulse-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:start;}
.pulse-feed{padding:14px 18px;}
.pulse-feed__head{display:flex; align-items:center; justify-content:space-between; padding:8px 6px 12px;}
.pulse-feed__label{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--muted-dim);}
.pulse-feed__live{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--green);}
.pulse-feed__live .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); animation:blink 3s infinite;}
.pulse-row{display:flex; align-items:center; gap:13px; padding:11px 6px; border-top:1px solid rgba(255,255,255,.05);}
.pulse-row__avatar{flex:none; width:38px; height:38px; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.12);}
.pulse-row__avatar img{width:100%; height:100%; object-fit:cover;}
.pulse-row__text{flex:1; min-width:0;}
.pulse-row__name{font-family:var(--font-head); font-weight:600; font-size:14.5px; color:var(--muted-bright);}
.pulse-row__action{color:var(--muted); font-size:13.5px;}
.pulse-row__time-val{font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--green);}
.pulse-row__time-val.neutral{color:var(--ink);}
.pulse-row__ago{font-family:var(--font-mono); font-size:11px; color:var(--muted-dim); width:48px; text-align:right;}
.pulse-stats{display:grid; gap:14px;}
.pulse-stat{padding:22px 24px;}
.pulse-stat__num{font-family:var(--font-head); font-weight:700; font-size:32px; line-height:1;}
.pulse-stat__label{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--muted-dim); margin-top:8px;}

/* ===================== CTA ===================== */
.cta{padding:40px 0 80px;}
.cta__panel{position:relative; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.1);}
.cta__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5;}
.cta__scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,16,12,.97) 30%, rgba(7,16,12,.55) 100%);}
.cta__content{position:relative; padding:54px 48px; max-width:640px;}
.cta__content h2{font-family:var(--font-head); font-weight:700; font-size:40px; line-height:1.05; letter-spacing:-.015em; margin:0 0 16px; text-wrap:balance;}
.cta__content p{font-size:17px; color:var(--muted-soft); margin:0 0 28px; line-height:1.55;}

/* ===================== FOOTER ===================== */
.site-footer{position:relative; z-index:10; border-top:1px solid rgba(92,255,157,.1); padding:34px 30px; max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;}
.site-footer__brand{display:flex; align-items:center; gap:11px;}
.site-footer__brand img{width:34px; height:auto; opacity:.85;}
.site-footer__brand span{font-family:var(--font-head); font-weight:700; letter-spacing:.07em; font-size:16px; color:var(--muted-soft);}
.site-footer__mid{display:flex; flex-direction:column; gap:12px; align-items:center;}
.site-footer__legal{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;}
.site-footer__legal a,.site-footer__legal button{color:var(--muted-dim); text-decoration:none; border:none; background:none; padding:0; cursor:pointer; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;}
.site-footer__legal a:hover,.site-footer__legal button:hover{color:var(--green);}
.site-footer__legal a{display:inline-block; padding:7px 4px;}
.site-footer__copy{font-family:var(--font-mono); font-size:11px; color:var(--muted-dim);}

/* ===================== COOKIE BANNER ===================== */
.btn-ghost{padding:11px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:var(--muted-mid); cursor:pointer; font-family:var(--font-head); font-weight:600; font-size:13.5px;}
.btn-ghost:hover{border-color:rgba(255,255,255,.4); color:#fff;}

/* ===================== MODALS ===================== */
.modal-overlay{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(4,9,7,.72); backdrop-filter:blur(8px); animation:risein .25s ease-out;}
.modal-close{position:absolute; width:32px; height:32px; border-radius:8px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--muted); cursor:pointer; font-size:15px; line-height:1;}
.modal-close:hover{border-color:var(--red); color:var(--red);}

.auth-modal{position:relative; width:min(420px,94vw); max-height:92vh; overflow-y:auto; border-radius:20px; border:1px solid rgba(92,255,157,.28); background:linear-gradient(180deg,#0c1a13,#0a160f); box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 56px rgba(92,255,157,.16); padding:34px 32px; animation:risein .3s ease-out;}
.auth-modal .modal-close{top:16px; right:16px;}
.auth-modal__brand{display:flex; align-items:center; gap:11px; margin-bottom:22px;}
.auth-modal__brand-mark{position:relative; width:40px; height:40px;}
.auth-modal__brand-mark img{position:relative; width:40px; height:auto; filter:drop-shadow(0 0 6px rgba(92,255,157,.5));}
.auth-modal__brand-name{font-family:var(--font-head); font-weight:700; font-size:19px; letter-spacing:.06em; background:linear-gradient(92deg,#5cff9d,#2ee6ff 55%,#b07cff); -webkit-background-clip:text; background-clip:text; color:transparent;}
.auth-modal h2{font-family:var(--font-head); font-weight:700; font-size:28px; letter-spacing:-.01em; margin:0 0 6px;}
.auth-modal__sub{font-size:14px; color:var(--muted); margin:0 0 22px; line-height:1.5;}
.auth-modal input[type=text],.auth-modal input[type=email],.auth-modal input[type=password]{width:100%; padding:13px 15px; border-radius:11px; border:1px solid rgba(255,255,255,.14); background:rgba(7,16,12,.6); color:var(--ink); font-family:var(--font-mono); font-size:15px; outline:none; transition:all .15s; margin-bottom:16px;}
.auth-modal input:focus{border-color:var(--cyan); box-shadow:0 0 16px rgba(46,230,255,.25);}
.consent-row{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--muted); line-height:1.45; margin:-6px 0 12px; cursor:pointer;}
.consent-row input{margin-top:2px; accent-color:var(--green); width:15px; height:15px; flex:none;}
.consent-row a{color:var(--cyan); text-decoration:none;}
.consent-row strong{color:var(--muted-soft);}
.auth-error{margin-bottom:14px; padding:10px 13px; border-radius:9px; border:1px solid rgba(255,107,107,.4); background:rgba(255,107,107,.08); color:#ff9c9c; font-size:13px; line-height:1.4;}
.auth-note{margin-bottom:14px; padding:10px 13px; border-radius:9px; border:1px solid rgba(46,230,255,.35); background:rgba(46,230,255,.08); color:#bfeeff; font-size:13px; line-height:1.4;}
.btn-block{width:100%; padding:15px; border-radius:12px; border:none; cursor:pointer; font-family:var(--font-head); font-weight:700; font-size:15.5px; letter-spacing:.04em; color:#06140d; background:linear-gradient(95deg,#5cff9d,#2ee6ff); box-shadow:0 0 24px rgba(92,255,157,.4); transition:transform .15s, box-shadow .15s;}
.btn-block:hover{transform:translateY(-2px); box-shadow:0 0 38px rgba(92,255,157,.6);}
.btn-block:disabled{opacity:.55; cursor:default; transform:none; box-shadow:none;}
.auth-modal__toggle{text-align:center; margin-top:18px; font-family:var(--font-body); font-size:13.5px; color:var(--muted);}
#authToggleAction{color:var(--cyan); font-weight:600; cursor:pointer; background:none; border:none; padding:0; font-size:inherit; font-family:inherit;}
.auth-modal__forgot{display:block; margin:-8px 0 16px auto; padding:0; background:none; border:none; cursor:pointer; color:var(--cyan); font-family:var(--font-body); font-size:13px;}
.auth-modal__forgot:hover{text-shadow:0 0 12px rgba(46,230,255,.6);}
#authToggleAction:hover{text-shadow:0 0 12px rgba(46,230,255,.6);}

.fulllb-modal{position:relative; width:min(620px,96vw); max-height:84vh; display:flex; flex-direction:column; border-radius:20px; border:1px solid rgba(46,230,255,.28); background:linear-gradient(180deg,#0c1a13,#0a160f); box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 56px rgba(46,230,255,.14); overflow:hidden;}
.fulllb-modal__head{display:flex; align-items:center; justify-content:space-between; padding:22px 26px; border-bottom:1px solid rgba(255,255,255,.08); flex:none;}
.fulllb-modal__head .modal-close{position:relative;}
.fulllb-modal__eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; color:var(--cyan);}
.fulllb-modal__title{font-family:var(--font-head); font-weight:700; font-size:24px; margin:7px 0 0;}
.fulllb-modal__body{overflow-y:auto; padding:8px 14px 14px;}
.fulllb-row{display:grid; grid-template-columns:48px 1fr auto; gap:14px; align-items:center; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.05);}
.fulllb-row.is-top{background:rgba(92,255,157,.05);}
.fulllb-row__rank{font-family:var(--font-head); font-weight:700; font-size:16px;}
.fulllb-row__op{display:flex; align-items:center; gap:12px; min-width:0;}
.fulllb-row__avatar{flex:none; width:34px; height:34px; border-radius:9px; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);}
.fulllb-row__avatar img{width:100%; height:100%; object-fit:cover;}
.fulllb-row__name{font-family:var(--font-head); font-weight:600; font-size:14.5px; color:var(--muted-bright); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fulllb-row__time{font-family:var(--font-mono); font-weight:700; font-size:15px; color:#fff; font-variant-numeric:tabular-nums;}

.sync-modal{position:relative; width:min(720px,96vw); max-height:88vh; overflow-y:auto; border-radius:20px; border:1px solid rgba(92,255,157,.28); background:linear-gradient(180deg,#0c1a13,#0a160f); box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 56px rgba(92,255,157,.16); padding:32px 34px;}
.sync-modal .modal-close{top:18px; right:18px;}
.sync-modal__eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; color:var(--green);}
.sync-modal h2{font-family:var(--font-head); font-weight:700; font-size:30px; letter-spacing:-.01em; margin:8px 0 4px;}
.sync-modal__sub{font-size:14.5px; color:var(--muted); margin:0 0 26px; line-height:1.55; max-width:520px;}
.sync-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.sync-method{border-radius:16px; padding:22px;}
.sync-method--fast{border:1px solid rgba(46,230,255,.25); background:rgba(46,230,255,.04);}
.sync-method--manual{border:1px solid rgba(92,255,157,.25); background:rgba(92,255,157,.04);}
.sync-method__head{display:flex; align-items:center; gap:9px; margin-bottom:14px; flex-wrap:wrap;}
.sync-badge{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; color:#06140d; border-radius:6px; padding:4px 8px;}
.sync-badge--fast{background:var(--cyan);}
.sync-badge--manual{background:var(--green);}
.sync-method__title{font-family:var(--font-head); font-weight:700; font-size:17px; color:var(--ink);}
.sync-method p{font-size:13px; color:var(--muted); margin:0; line-height:1.55;}
/* Link form in the Sync modal: ID, secret, optional name. */
.sync-form{margin-top:14px;}
.sync-form .field-input{margin-bottom:14px; font-size:15px; padding:12px 14px;}
.sync-form .rig-hint a{color:var(--cyan);}
.sync-signin{margin-top:14px;}
.sync-signin p{margin-bottom:12px;}
.field-optional{font-weight:400; letter-spacing:.04em; color:var(--muted-dim); text-transform:none; margin-left:6px;}
.sync-method strong{color:var(--ink);}
.sync-steps{margin:0; padding:0; list-style:none;}
.sync-steps li{position:relative; padding:0 0 13px 34px; font-size:13px; color:var(--muted-soft); line-height:1.5;}
.sync-steps li:last-child{padding-bottom:0;}
.sync-steps__num{position:absolute; left:0; top:-1px; width:22px; height:22px; border-radius:50%; background:rgba(92,255,157,.14); border:1px solid rgba(92,255,157,.4); color:var(--green); font-family:var(--font-mono); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;}
/* "Your data" on the profile: download a copy, delete the account. */
.data-card{margin-top:18px; padding:22px 24px; display:grid; grid-template-columns:1fr auto; gap:14px 24px; align-items:center;}
.data-card h3{font-family:var(--font-head); font-weight:700; font-size:18px; letter-spacing:.02em; margin:0 0 6px;}
.data-card p{margin:0; font-size:13.5px; line-height:1.55; color:var(--muted);}
.data-card a{color:var(--cyan); text-decoration:none;}
.data-card__actions{display:flex; gap:10px; flex-wrap:wrap;}
.data-card__delete{border-color:rgba(255,107,107,.4); color:#ff9c9c;}
.data-card__delete:hover{border-color:var(--red); color:#fff; background:rgba(255,107,107,.14);}
.data-card__delete:disabled{opacity:.45; cursor:not-allowed;}
.data-card__confirm,.data-card > .auth-note,.data-card > .auth-error{grid-column:1 / -1;}
.data-card > .auth-note,.data-card > .auth-error{margin:0;}
.data-card__confirm{padding-top:16px; border-top:1px solid rgba(255,255,255,.08);}
.data-card__confirm p{margin-bottom:14px; color:var(--muted-mid);}
.data-card__confirm .field-input{max-width:260px;}
.data-card__confirm-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
@media (max-width:699px){ .data-card{grid-template-columns:1fr;} }
/* The legal pages (privacy.html, terms.html): plain reading pages. */
.legal-page{background:var(--bg);}
.legal-header{display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:820px; margin:0 auto; padding:18px 20px;}
.legal-header .brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.legal-header .brand__mark{position:relative; width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none;}
.legal-header .brand__mark img{width:100%; height:100%; object-fit:cover;}
.legal-header__back{color:var(--cyan); text-decoration:none; font-size:14px; white-space:nowrap;}
.legal-header__back:hover{text-shadow:0 0 12px rgba(46,230,255,.6);}
.legal{max-width:820px; margin:0 auto; padding:26px 20px 70px; color:var(--muted-mid); font-size:16px; line-height:1.65;}
.legal h1{font-family:var(--font-head); font-size:34px; line-height:1.2; color:#fff; margin:0 0 6px;}
.legal h2{font-family:var(--font-head); font-size:19px; color:#fff; margin:38px 0 10px;}
.legal p{margin:0 0 14px;}
.legal ul{margin:0 0 14px; padding-left:1.2em;}
.legal li{margin:0 0 8px;}
.legal strong{color:var(--ink);}
.legal a{color:var(--cyan);}
.legal__date{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--muted-dim);}
.legal__lead{margin-top:20px; padding:16px 18px; border-radius:12px; border:1px solid rgba(92,255,157,.25); background:rgba(92,255,157,.05); color:var(--ink);}
.legal mark.todo{background:var(--yellow); color:#201800; padding:1px 6px; border-radius:4px; font-family:var(--font-mono); font-size:.85em;}
.skip-link{position:absolute; left:12px; top:-60px; z-index:200; padding:10px 14px; border-radius:9px; background:var(--green); color:#06140d; font-weight:600; text-decoration:none;}
.skip-link:focus{top:12px;}
@media (max-width:699px){ .legal h1{font-size:26px;} .legal{font-size:15.5px;} }
/* A short message for the whole page (e.g. "account deleted"). */
.site-notice{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:120; width:min(560px,92vw); padding:14px 18px; border-radius:12px;
  border:1px solid rgba(46,230,255,.35); background:rgba(7,16,12,.96); color:#bfeeff; font-size:14px; line-height:1.45; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.5);}
.data-note{margin-top:18px; padding:16px 18px; border-radius:12px; border:1px solid rgba(46,230,255,.22); background:rgba(46,230,255,.05);}
.data-note__label{font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; color:var(--cyan); margin-bottom:8px;}
.data-note p{margin:0; font-size:13px; line-height:1.55; color:var(--muted);}
.data-note a{color:var(--cyan); text-decoration:none;}
.fw-note{display:flex; align-items:center; gap:10px; margin-top:14px; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); font-family:var(--font-mono); font-size:12px; color:var(--muted);}
.fw-note .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); flex:none;}

/* ===================== GAUNTLET ===================== */
.gauntlet{position:fixed; inset:0; z-index:100; cursor:crosshair; background:radial-gradient(120% 90% at 50% 30%, #0c2117 0%, #060d0a 70%); overflow:hidden;}
.gauntlet__grid{position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(92,255,157,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(92,255,157,.06) 1px,transparent 1px); background-size:40px 40px;}
.gauntlet__vignette{position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 220px 70px rgba(3,8,6,.85);}
.gauntlet__hud{position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:var(--hud-gap); padding:var(--hud-pad); font-family:var(--font-mono); cursor:default;}
.gauntlet__brand{display:flex; align-items:center; gap:11px;}
.gauntlet__brand img{width:34px; height:auto; filter:drop-shadow(0 0 6px rgba(92,255,157,.5));}
.gauntlet__brand span{font-family:var(--font-head); font-weight:700; letter-spacing:.08em; color:var(--muted-soft); font-size:15px;}
.gauntlet__stats{display:flex; align-items:center; gap:var(--hud-stats-gap);}
.gauntlet__stat{text-align:center;}
.gauntlet__stat-label{font-size:10px; letter-spacing:.18em; color:var(--muted-dim);}
.gauntlet__stat-val{font-family:var(--font-head); font-weight:700; font-size:30px; font-variant-numeric:tabular-nums;}
.gauntlet__stat-val--time{color:var(--green); text-shadow:0 0 16px rgba(92,255,157,.5);}
.gauntlet__stat-val--targets{color:#fff;}
.gauntlet__stat-val--misses{color:var(--red);}
.gauntlet__exit{padding:9px 16px; border-radius:9px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:var(--muted-mid); cursor:pointer; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; white-space:nowrap;}
.gauntlet__exit:hover{border-color:var(--red); color:var(--red);}

.warning-panel,.results-panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(440px,86vw); border-radius:22px; text-align:center; cursor:default; animation:risein .3s ease-out;}
.warning-panel{padding:34px 32px; border:1px solid rgba(255,211,92,.35); background:rgba(8,18,12,.97); box-shadow:0 24px 80px rgba(0,0,0,.6), 0 0 46px rgba(255,211,92,.14);}
.warning-panel__eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.3em; color:var(--yellow);}
.warning-panel__title{font-family:var(--font-head); font-weight:700; font-size:26px; color:var(--yellow); letter-spacing:.01em; margin-top:12px;}
.warning-panel p{font-size:14px; color:var(--muted); line-height:1.6; margin:12px 0 24px;}
.warning-panel__actions,.results-panel__actions{display:flex; gap:11px;}
.btn-half{flex:1; padding:14px; border-radius:11px; cursor:pointer; font-family:var(--font-head); font-weight:600; font-size:14.5px;}
.btn-half--cancel{border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:var(--muted);}
.btn-half--cancel:hover{border-color:var(--red); color:var(--red);}
.btn-half--go{border:1px solid rgba(92,255,157,.4); background:rgba(92,255,157,.08); color:var(--green);}
.btn-half--go:hover{background:rgba(92,255,157,.16);}

.countdown-num{position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); font-family:var(--font-head); font-weight:700; font-size:clamp(90px,22vw,160px); color:var(--green); text-shadow:0 0 40px rgba(92,255,157,.6); animation:countpop .7s ease-out forwards; pointer-events:none;}
.countdown-sub{position:absolute; left:50%; top:64%; transform:translateX(-50%); font-family:var(--font-mono); font-size:13px; letter-spacing:.3em; color:var(--muted); pointer-events:none; text-align:center; width:90%;}

.target{position:absolute; background:transparent; border:none; padding:0; cursor:crosshair; z-index:5; animation:lockon .26s cubic-bezier(.2,1.5,.4,1); transform:translate(-50%,-50%);}
.target__ring{position:absolute; inset:0; border:2px solid currentColor; border-radius:50%; animation:tpulse 1.3s infinite;}
.target__ring--inner{inset:30%; opacity:.65; animation:none;}
.target__cross-v{position:absolute; left:50%; top:-7px; bottom:-7px; width:2px; transform:translateX(-50%); background:currentColor; opacity:.8;}
.target__cross-h{position:absolute; top:50%; left:-7px; right:-7px; height:2px; transform:translateY(-50%); background:currentColor; opacity:.8;}
.target__dot{position:absolute; left:50%; top:50%; width:9px; height:9px; transform:translate(-50%,-50%); background:currentColor; border-radius:50%; box-shadow:0 0 12px currentColor;}
.burst{position:absolute; width:58px; height:58px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; z-index:6; animation:hitburst .45s ease-out forwards;}

.results-panel{padding:38px 34px; border:1px solid rgba(92,255,157,.3); background:rgba(8,18,12,.96); box-shadow:0 24px 80px rgba(0,0,0,.6), 0 0 50px rgba(92,255,157,.18); animation-duration:.35s;}
.results-panel__eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.3em; color:var(--green);}
.results-panel__time{font-family:var(--font-head); font-weight:700; font-size:clamp(52px,14vw,74px); line-height:1; margin:14px 0 4px; color:#fff; text-shadow:0 0 30px rgba(92,255,157,.4); font-variant-numeric:tabular-nums;}
.results-panel__time span{font-size:.4em; color:var(--green);}
.results-panel__meta{display:flex; justify-content:center; gap:22px; font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-bottom:12px;}
.results-panel__meta .miss{color:var(--red);}
.results-panel__note{font-size:13px; color:var(--muted-dim); line-height:1.5; margin-bottom:24px;}

/* =====================================================================
   RESPONSIVE — breakpoints mirror the design: mobile <700, tablet <1020
   ===================================================================== */

/* --- SIDEBAR CLEARANCE --- */
/* main is a centred 1240px column, so its text starts at (viewport - 1240)/2
   + 30px of padding. The scroll sidebar is position:fixed at left:16px and is
   about 148px wide, so its right edge sits at ~164px. Those two numbers only
   clear each other above ~1530px -- on a 1440px laptop the text starts at
   130px and scrolls underneath the sidebar on every single screen.
   So: reserve the sidebar's lane, then taper the reservation away as the
   centring margins grow wide enough to do the job themselves. The taper keeps
   the text from jumping sideways as the window is resized. */
@media (min-width:1020px){
  main,.site-footer{padding-left:var(--sidebar-reserve);}
}
@media (min-width:1240px){
  /* Once the column stops growing, every extra pixel of viewport gives the
     content half a pixel of margin for free -- hand that back out of the
     padding, down to the normal 30px gutter (reached at about 1532px). */
  main,.site-footer{
    padding-left:max(30px, calc(var(--sidebar-reserve) - (100vw - 1240px) / 2));
  }
}

/* --- TABLET: 700px - 1019px --- */
@media (max-width:1019px){
  /* Below this the sidebar would cost a quarter of the screen to reserve for,
     which is a bad trade on a tablet. The nav still has every link. */
  .sidebar{display:none !important;}
  :root{ --hero-cols:1fr; --hero-h1:46px; }
  .profile-grid{grid-template-columns:1fr;}
  .pulse-grid{grid-template-columns:1fr;}
  .hero__art{order:-1;}
}

/* --- MOBILE: below 700px --- */
/* Between phone and wide desktop the full row of links no longer fits beside
   the signed-in name (six links, and Michroma runs wide): use the menu button
   here too. Signed out there are only two links, but one rule keeps it simple. */
@media (max-width:1179px){
  .nav-list{display:none;}
  .hamburger{display:inline-flex;}
  .signin-btn,.user-chip{margin-left:auto;}
  .signin-btn + .hamburger,.user-chip + .hamburger{margin-left:0;}
}
@media (max-width:699px){
  .hero__stat-num{font-size:21px;}
  .hero__stat-num span{font-size:12px;}
  :root{
    --nav-pad:12px 16px;
    --nav-gap:12px;
    --main-pad:0 16px;
    --hero-gap:28px;
    --hero-pad:34px 0 24px;
    --hero-h1:36px;
    --hero-stats-gap:18px;
    --hero-art-min:260px;
    --how-cols:1fr;
    --lb-cols:28px 1fr 62px 52px;
    --lb-gap:8px;
    --lb-head-pad:12px 14px;
    --lb-row-pad:12px 14px;
    --hud-pad:14px 16px;
    --hud-gap:10px;
    --hud-stats-gap:16px;
  }
  .nav-list{display:none;}
  .hamburger{display:inline-flex;}
  .signin-btn,.user-chip{margin-left:auto;}
  .signin-btn + .hamburger,.user-chip + .hamburger{margin-left:0;}
  .sidebar{display:none !important;}

  /* the nav must fit brand + auth control + hamburger inside 375px */
  .nav{gap:8px;}
  .brand{gap:9px; min-width:0;}
  .brand__mark{width:38px; height:38px;}
  .brand__mark img{width:38px; height:38px;}
  .brand__title{font-size:16px; letter-spacing:.05em;}
  .brand__sub{display:none;}
  .signin-btn{padding:8px 13px; font-size:13px;}
  .user-chip__meta{display:none;}

  .section{padding:34px 0 22px;}
  .section-title{font-size:29px;}
  .hero p{font-size:16px;}
  
  .lb__rank{font-size:15px;}
  .lb__op{gap:9px;}
  .lb__avatar{width:32px; height:32px; border-radius:8px;}
  .lb__name{font-size:13px;}
  .lb__time{font-size:14px;}
  .lb__runs{font-size:11px;}
  .lb__foot{padding:14px;}

  .profile-head{padding:18px; gap:18px;}
  .profile-head__avatar{width:60px; height:60px;}
  .profile-head__name{font-size:26px;}
  .profile-head__stats{width:100%;}
  .stat-box{min-width:0; padding:13px 10px;}
  .stat-box__num{font-size:23px;}
  .progress-card,.log-card{padding:20px 18px;}
  .session-row{grid-template-columns:60px 1fr auto; gap:10px; padding:11px 8px;}
  .session-row__game{font-size:13.5px;}

  .avatar-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
  .avatar-tile{height:210px;}
  .avatar-tile__name{font-size:14px; left:12px; bottom:11px;}
  .locked-panel{padding:38px 22px;}

  .cta{padding:26px 0 60px;}
  .cta__content{padding:34px 24px;}
  .cta__content h2{font-size:29px;}
  .cta__scrim{background:linear-gradient(180deg, rgba(7,16,12,.9) 30%, rgba(7,16,12,.97) 100%);}

  .site-footer{padding:26px 16px; justify-content:center; text-align:center;}

  .gauntlet__brand{display:none;}
  .gauntlet__stat-val{font-size:22px;}

  .auth-modal{padding:26px 20px;}
  .sync-modal{padding:24px 18px;}
  .sync-grid{grid-template-columns:1fr;}
  .modal-overlay{padding:12px;}

      
  .corner-chameleon--left{width:104px; height:72px;}
  .corner-chameleon--right{width:92px; height:64px;}
}

/* The smallest phones (320-360 px): Michroma runs wide, so the header name,
   the leaderboard tabs and the hero numbers come down a size to still fit. */
@media (max-width:360px){
  .brand__title{font-size:14px; letter-spacing:.03em;}
  .signin-btn{padding:7px 11px; font-size:12px;}
  .tabs{gap:2px; padding:4px;}
  .tab-btn{padding:8px 9px; font-size:12px; letter-spacing:0;}
  .hero__stat-num{font-size:18px;}
  .pulse-grid{grid-template-columns:minmax(0,1fr);}
  .pulse-row{gap:10px;}
  .pulse-row__name{font-size:13px;}
  .pulse-row__text{overflow-wrap:anywhere;}
  .pulse-row__ago{width:36px;}
  .warning-panel__title{font-size:22px;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* ===================== RIG PANEL + GAME SELECTOR ===================== */
.section__controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.rig-hint{font-size:12.5px; color:var(--muted-dim); line-height:1.5; margin:12px 0 0;}
.rig-hint code{font-family:var(--font-mono); font-size:11.5px; color:var(--muted); background:rgba(255,255,255,.05); padding:1px 5px; border-radius:4px;}
.rig-status{display:flex; align-items:center; gap:9px; margin:12px 0 4px; font-family:var(--font-mono); font-size:12px; color:var(--muted);}
.rig-status__dot{width:8px; height:8px; border-radius:50%; flex:none; background:var(--green); box-shadow:0 0 10px var(--green);}
.rig-status.is-stale .rig-status__dot{background:var(--muted-dim); box-shadow:none;}
.rig-unlink{width:100%; margin-top:18px; transition:border-color .15s,color .15s,background .15s;}
/* Unlinking is destructive and used to happen on a single click. The button
   arms first, and says what it is about to disconnect. */
.rig-unlink.is-confirming{border-color:var(--red); color:var(--red); background:rgba(255,107,107,.08);}
.rig-unlink.is-confirming:hover{border-color:var(--red); color:#fff; background:rgba(255,107,107,.18);}
.rig-unlink__cancel{display:block; width:100%; margin-top:8px; padding:7px; background:none; border:0;
  color:var(--muted-dim); font-family:var(--font-head); font-size:12px; letter-spacing:.04em; cursor:pointer;}
.rig-unlink__cancel:hover{color:var(--muted-mid);}
.rig-run{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:10px 8px; border-bottom:1px solid rgba(255,255,255,.05); font-size:13.5px;}
.rig-run__game{font-family:var(--font-head); font-weight:600; color:var(--muted-bright);}
.rig-run__seat{font-family:var(--font-mono); font-size:11px; color:var(--muted-dim);}
.rig-run__score{font-family:var(--font-mono); font-weight:700; font-size:14px; color:var(--cyan); font-variant-numeric:tabular-nums;}
.rig-run__score.is-scored{color:var(--green);}
.rig-run__score.is-void{color:var(--red); font-weight:400; font-size:12px;}
@media (max-width:699px){
  .section__controls{width:100%;}
  .section__controls .tabs{flex:1; justify-content:center;}
}