/* ---------------------------------------------------------------------------
   The trading simulator, scoped to #gm.

   Every rule here is prefixed with the id on the wrapper around the interactive
   part of the page. Ten of the game's class names are already taken by the site
   stylesheet, card, chip, field, sheet, faq, up, down, flat, num and lede among
   them, so scoping by id rather than by class decides the collision on
   specificity instead of on which file happens to load second.

   This file is loaded by the simulator page and by nothing else, which is why
   it is its own asset rather than eighteen kilobytes added to the stylesheet
   every other page on the site downloads.

   The tokens below are the ones the site does not already own. --ink, --body,
   --muted, --surface, --line and --accent are deliberately absent: they are
   inherited, so the light chrome around the game follows the site's theme in
   both modes. The panel family is the game's own, because the trading surfaces
   stay dark in both themes so the chart colours carry.
   --------------------------------------------------------------------------- */
#gm{
  --bg:#F6F7F9;
  --panel:#0C1017; --panel-2:#141A23; --panel-3:#1B2430;
  --panel-line:#232D3A; --panel-ink:#E9EEF5; --panel-muted:#93A0B0; --panel-faint:#6E7C8C;
  --up:#16C784; --up-deep:#0B8F5D; --up-soft:rgba(22,199,132,.14);
  --down:#F0364A; --down-deep:#B31B2C; --down-soft:rgba(240,54,74,.14);
  --gold:#F2B233; --info:#3D8BFD;
  --r:14px;
  --mono:var(--f-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
}
:root[data-theme="dark"] #gm{ --bg:#0A0C11 }
/* The wrapper is a plain block; the site section around it does the spacing. */
#gm{display:block}
/* The shell already put the page inside a .wrap, so the .wrap inside each game
   section was capping and padding a second time. That cost about 110px of
   chart. Neutralised here rather than by stripping the class out of the
   markup, because the centring opt-out rules in theme.py key on .sec > .wrap
   and would stop applying to the copy sections if the class went. */
#gm .wrap{max-width:none;padding-inline:0}

#gm .num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
#gm .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
#gm .tagrow{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
#gm .tag{font-size:12.5px; font-weight:700; letter-spacing:.02em; padding:5px 11px; border-radius:999px; border:1px solid var(--panel-line); color:var(--panel-muted); background:rgba(255,255,255,.04)}
#gm .tag.live{color:var(--up); border-color:rgba(22,199,132,.42); background:var(--up-soft)}
#gm .btn{appearance:none; border:0; border-radius:12px; padding:14px 24px; font:inherit; font-weight:700;
  font-size:16px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:9px;}
#gm .btn-primary{background:var(--up); color:#04170F}
#gm .btn-primary:hover{background:#13E092; color:#04170F}
#gm .btn-ghost{background:transparent; color:var(--panel-ink); border:1px solid var(--panel-line)}
#gm .btn-ghost:hover{border-color:var(--panel-ink)}
#gm .setup-card{background:var(--panel-2); border:1px solid var(--panel-line); border-radius:18px; padding:22px;
  box-shadow:0 22px 60px rgba(0,0,0,.42);}
#gm .setup-card h2{color:#fff; font-size:17px; margin:0 0 14px}
#gm .setup-row{display:grid; gap:9px; margin-bottom:16px}
#gm .setup-row .lbl{font-size:12.5px; font-weight:700; color:var(--panel-muted)}
#gm .pairpick{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px}
#gm .pairbtn{background:var(--panel-3); border:1px solid var(--panel-line); color:var(--panel-ink);
  border-radius:12px; padding:13px 12px; cursor:pointer; text-align:left; font:inherit; line-height:1.3;}
#gm .pairbtn .pairmarks{display:flex; align-items:center; margin:0 0 9px}
#gm .pairbtn .pairmarks img{width:26px; height:26px; object-fit:contain; display:block; margin:0}
#gm .pairbtn .pairmarks img + img{margin-left:-7px}
#gm .pairmarks img[data-l="dark"]{filter:drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 0 3px rgba(255,255,255,.3))}
#gm .pairbtn b{display:block; font-size:15px}
#gm .pairbtn span{display:block; font-size:12px; color:var(--panel-faint); margin-top:2px}
#gm .pairbtn[aria-pressed="true"]{border-color:var(--up); background:var(--up-soft); box-shadow:inset 0 0 0 1px var(--up)}
#gm .livepick{display:grid; gap:9px}
#gm .livepick input{width:100%; background:var(--panel-3); border:1px solid var(--panel-line); color:var(--panel-ink);
  border-radius:12px; padding:12px 14px; font:inherit; font-size:15px;}
#gm .livepick input::placeholder{color:var(--panel-faint)}
#gm .livepick input:focus-visible{outline:2px solid var(--up); outline-offset:1px}
#gm .live-chosen{font-size:13px; font-weight:700; color:var(--up); background:var(--up-soft);
  border:1px solid var(--up); border-radius:10px; padding:9px 12px;}
#gm .live-status{font-size:13px; color:var(--panel-faint); padding:2px 2px 0}
#gm .live-results{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:7px;
  max-height:212px; overflow-y:auto; padding-right:2px;}
#gm .live-results:empty{display:none}
#gm .livehit{display:flex; align-items:baseline; gap:7px; text-align:left; font:inherit; cursor:pointer;
  background:var(--panel-3); border:1px solid var(--panel-line); color:var(--panel-ink);
  border-radius:10px; padding:9px 11px; min-width:0;}
#gm .livehit:hover{border-color:var(--up)}
#gm .livehit b{font-size:13.5px; flex:0 0 auto}
#gm .livehit .lh-i{width:20px; height:20px; flex:0 0 auto; object-fit:contain; align-self:center}
#gm .livehit .lh-r{font-family:var(--mono); font-size:11px; color:var(--panel-faint); flex:0 0 auto; margin-left:auto}
#gm .livehit .lh-n{font-size:12px; color:var(--panel-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#gm .live-empty{font-size:13px; color:var(--panel-faint); padding:8px 2px}
#gm .tfset{display:contents}
#gm .tfset[hidden]{display:none}
@media (max-width:560px){#gm .pairpick{grid-template-columns:1fr}}
#gm .stake{display:flex; align-items:baseline; gap:10px; padding:14px 16px; border-radius:12px; background:var(--panel-3); border:1px solid var(--panel-line)}
#gm .stake b{font-family:var(--mono); font-size:30px; color:#fff; letter-spacing:-.03em}
#gm .stake span{font-size:13px; color:var(--panel-faint)}
#gm .disclose{background:var(--surface); border-bottom:1px solid var(--line)}
#gm .disclose-in{display:flex; gap:14px; align-items:flex-start; padding-block:14px; font-size:14.5px; color:var(--muted)}
#gm .disclose-in b{color:var(--ink)}
#gm .disclose .dot{flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:8px}
#gm .game{padding-block:clamp(26px,4vw,40px)}
#gm .game-grid{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:20px; align-items:start}
#gm .game-grid>*{min-width:0}
@media (max-width:1080px){#gm .game-grid{grid-template-columns:minmax(0,1fr)}}
#gm .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; padding:0}
#gm .card.dark{background:var(--panel); border-color:var(--panel-line); color:var(--panel-ink)}
#gm .chart-card{position:relative; min-width:0}
#gm .ctop{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; border-bottom:1px solid var(--panel-line); background:var(--panel-2)}
#gm .pairtag{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; color:#fff; letter-spacing:-.02em}
#gm .pairtag .glyph{width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg,#1C6FE0,#0E3C86); display:grid; place-items:center; color:#fff; font-size:12px; font-weight:800; letter-spacing:.02em}
#gm .glyph>img,#gm .lh-i,#gm .pairmarks img{margin:0; border:0; border-radius:0}
#gm .glyph{position:relative}
#gm .glyph>img{grid-area:1/1; width:100%; height:100%; object-fit:contain; display:block}
#gm .glyph.has-mark{background:none; color:transparent}
#gm .glyph>img[data-l="dark"],#gm .lh-i[data-l="dark"]{filter:drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 0 3px rgba(255,255,255,.3))}
#gm .livepx{display:flex; align-items:baseline; gap:10px; margin-left:4px}
#gm .livepx .p{font-family:var(--mono); font-size:22px; font-weight:700; color:#fff; letter-spacing:-.03em}
#gm .livepx .c{font-family:var(--mono); font-size:14px; font-weight:700; padding:3px 8px; border-radius:7px}
#gm .up{color:var(--up); background:var(--up-soft)}
#gm .down{color:var(--down); background:var(--down-soft)}
#gm .flat{color:var(--panel-muted); background:rgba(255,255,255,.06)}
#gm .ctop-right{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
#gm .chips{display:flex; gap:4px; padding:10px 16px; border-bottom:1px solid var(--panel-line); background:var(--panel); overflow-x:auto; scrollbar-width:none}
#gm .chips::-webkit-scrollbar{display:none}
#gm .chip{background:transparent; border:1px solid transparent; color:var(--panel-muted); font:inherit; font-size:13px; font-weight:700;
  padding:6px 12px; border-radius:8px; cursor:pointer; white-space:nowrap;}
#gm .chip:hover{color:#fff; background:var(--panel-3)}
#gm .chip[aria-pressed="true"]{background:var(--panel-3); color:#fff; border-color:var(--panel-line)}
#gm .chips .sep{width:1px; background:var(--panel-line); margin:4px 8px}
#gm .chart-stage{position:relative; background:var(--panel); padding:0}
#gm #chart{display:block; width:100%; height:clamp(340px,50vh,560px); touch-action:pan-y}
#gm .readout{position:absolute; top:12px; left:16px; display:flex; gap:12px; flex-wrap:wrap; font-family:var(--mono);
  font-size:12.5px; color:var(--panel-muted); pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.7);}
#gm .readout b{font-weight:700}
#gm .flashlayer{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .16s ease}
#gm .flashlayer.on-up{background:radial-gradient(120% 90% at 50% 100%, rgba(22,199,132,.42), transparent 70%); opacity:1}
#gm .flashlayer.on-down{background:radial-gradient(120% 90% at 50% 0%, rgba(240,54,74,.44), transparent 70%); opacity:1}
#gm .stagebadge{position:absolute; right:14px; bottom:34px; font-size:11.5px; font-weight:800; letter-spacing:.07em;
  color:var(--panel-faint); border:1px solid var(--panel-line); padding:4px 9px; border-radius:6px; background:rgba(0,0,0,.42);}
#gm .shake{animation:shk .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shk{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
#gm .stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--panel-line); border-top:1px solid var(--panel-line)}
@media (max-width:620px){#gm .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
#gm .stat{background:var(--panel-2); padding:14px 16px; min-height:82px; display:flex; flex-direction:column; justify-content:center; gap:3px}
#gm .stat .k{font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--panel-faint)}
#gm .stat .v{font-family:var(--mono); font-size:21px; font-weight:700; color:#fff; letter-spacing:-.03em; line-height:1.15}
#gm .stat .s{font-size:12px; color:var(--panel-muted)}
#gm .stat.pos .v{color:var(--up)}
#gm .stat.neg .v{color:var(--down)}
#gm .pulse{animation:pls .55s ease}
@keyframes pls{0%{transform:scale(1)}35%{transform:scale(1.085)}100%{transform:scale(1)}}
#gm .swap{background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--r); color:var(--panel-ink); overflow:hidden; position:sticky; top:88px}
@media (max-width:1080px){#gm .swap{position:static}}
#gm .swap-h{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--panel-line); background:var(--panel-2)}
#gm .swap-h b{font-size:15.5px; color:#fff}
#gm .swap-h .sub{font-size:12px; color:var(--panel-faint); margin-left:auto}
#gm .swap-body{padding:16px}
#gm .field{background:var(--panel-2); border:1px solid var(--panel-line); border-radius:12px; padding:13px 14px}
#gm .field + .field{margin-top:8px}
#gm .field .fh{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--panel-faint); margin-bottom:7px}
#gm .field .fh .bal{cursor:pointer}
#gm .field .fh .bal:hover{color:var(--up)}
#gm .field .fb{display:flex; align-items:center; gap:10px}
#gm .field input{flex:1; min-width:0; background:transparent; border:0; color:#fff; font-family:var(--mono);
  font-size:26px; font-weight:700; letter-spacing:-.03em; padding:0; width:100%;}
#gm .field input:focus{outline:none}
#gm .field input::placeholder{color:#3F4C5C}
#gm .tokpill{display:flex; align-items:center; gap:8px; background:var(--panel-3); border:1px solid var(--panel-line); border-radius:999px; padding:7px 13px 7px 8px; font-weight:700; font-size:14px; white-space:nowrap}
#gm .tokpill .glyph{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:9.5px; font-weight:800; color:#fff}
#gm .g-ocx{background:linear-gradient(140deg,#1C6FE0,#0E3C86)}
#gm .g-usdc{background:linear-gradient(140deg,#2775CA,#1A56A0)}
#gm .g-sol{background:linear-gradient(140deg,#9945FF,#14F195); color:#06110C}
#gm .field .usd{font-size:12px; color:var(--panel-faint); margin-top:6px; font-family:var(--mono)}
#gm .flip{display:grid; place-items:center; margin:-9px 0; position:relative; z-index:2}
#gm .flip button{width:38px; height:38px; border-radius:11px; background:var(--panel-3); border:1px solid var(--panel-line);
  color:var(--panel-ink); cursor:pointer; font-size:15px; display:grid; place-items:center;}
#gm .flip button:hover{border-color:var(--up); color:var(--up)}
#gm .pcts{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:12px 0}
#gm .pct{background:var(--panel-2); border:1px solid var(--panel-line); color:var(--panel-muted); border-radius:9px; padding:8px 0; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer}
#gm .pct:hover{color:#fff; border-color:var(--panel-faint)}
#gm .quote{border-top:1px dashed var(--panel-line); margin-top:12px; padding-top:12px; display:grid; gap:7px}
#gm .qrow{display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--panel-muted)}
#gm .qrow .qv{font-family:var(--mono); color:var(--panel-ink)}
#gm .qrow .qv.warn{color:var(--gold)}
#gm .qrow .qv.bad{color:var(--down)}
#gm .act{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px}
#gm .act .btn{justify-content:center; padding:15px 12px; font-size:16px; border-radius:12px}
#gm .btn-sellx{background:var(--down); color:#fff}
#gm .btn-sellx:hover{background:#FF4A5D}
#gm .btn:disabled{opacity:.42; cursor:not-allowed}
#gm .act-wide{margin-top:9px}
#gm .act-wide .btn{width:100%; justify-content:center; background:var(--panel-3); color:var(--panel-ink); border:1px solid var(--panel-line); padding:12px; font-size:14.5px; border-radius:12px}
#gm .act-wide .btn:hover{border-color:var(--down); color:var(--down)}
#gm .poscard{margin:0 16px 16px; background:var(--panel-2); border:1px solid var(--panel-line); border-radius:12px; padding:14px}
#gm .poscard .ph{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--panel-faint); margin-bottom:9px}
#gm .poscard .pg{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px}
#gm .poscard .pk{font-size:11.5px; color:var(--panel-faint)}
#gm .poscard .pv{font-family:var(--mono); font-size:15.5px; font-weight:700; color:#fff}
#gm .poscard .pv.up{color:var(--up); background:none}
#gm .poscard .pv.down{color:var(--down); background:none}
#gm .lower{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px; margin-top:20px}
#gm .lower>*{min-width:0}
@media (max-width:820px){#gm .lower{grid-template-columns:minmax(0,1fr)}}
#gm .pnl-h{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--panel-line); background:var(--panel-2)}
#gm .pnl-h b{color:#fff; font-size:15px}
#gm .pnl-h .cnt{margin-left:auto; font-size:12px; color:var(--panel-faint); font-family:var(--mono)}
#gm .feed{max-height:330px; overflow-y:auto; padding:6px 0}
#gm .feed-item{display:grid; grid-template-columns:auto 1fr; gap:12px; padding:12px 16px; border-bottom:1px solid var(--panel-line)}
#gm .feed-item:last-child{border-bottom:0}
#gm .feed .imp{width:5px; border-radius:3px; background:var(--panel-faint)}
#gm .feed .imp.b{background:var(--up)}
#gm .feed .imp.s{background:var(--down)}
#gm .feed .imp.v{background:var(--gold)}
#gm .feed .hl{font-size:14.5px; color:var(--panel-ink); font-weight:600; line-height:1.4}
#gm .feed .mt{font-size:11.5px; color:var(--panel-faint); font-family:var(--mono); margin-top:4px}
#gm .feed .empty{padding:26px 16px; color:var(--panel-faint); font-size:14px; text-align:center}
#gm .logrow{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--panel-line); font-size:13.5px}
#gm .logrow:last-child{border-bottom:0}
#gm .logrow .side{font-weight:800; font-size:11.5px; letter-spacing:.05em; padding:3px 8px; border-radius:6px}
#gm .logrow .amt{font-family:var(--mono); color:var(--panel-ink)}
#gm .logrow .rp{font-family:var(--mono); font-weight:700; text-align:right}
#gm .toasts{position:fixed; right:clamp(12px,3vw,26px); bottom:clamp(12px,3vw,26px); z-index:80; display:grid; gap:10px; width:min(358px,calc(100vw - 24px)); pointer-events:none}
#gm .toast{pointer-events:auto; background:var(--panel-2); border:1px solid var(--panel-line); border-left:4px solid var(--info);
  border-radius:12px; padding:13px 15px; color:var(--panel-ink); box-shadow:0 16px 40px rgba(0,0,0,.45);
  animation:tin .32s cubic-bezier(.2,.8,.3,1) both;}
@keyframes tin{from{opacity:0; transform:translateY(14px) scale(.97)}to{opacity:1; transform:none}}
#gm .toast.out{animation:tout .28s ease forwards}
@keyframes tout{to{opacity:0; transform:translateX(24px)}}
#gm .toast .tt{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.05em; color:var(--panel-faint); margin-bottom:5px}
#gm .toast .tb{font-size:14.5px; line-height:1.45}
#gm .toast .tn{font-size:12.5px; color:var(--panel-muted); margin-top:6px}
#gm .toast.bull{border-left-color:var(--up)}
#gm .toast.bull .tt{color:var(--up)}
#gm .toast.bear{border-left-color:var(--down)}
#gm .toast.bear .tt{color:var(--down)}
#gm .toast.vol{border-left-color:var(--gold)}
#gm .toast.vol .tt{color:var(--gold)}
#gm .toast.coach{border-left-color:var(--info)}
#gm .toast.coach .tt{color:var(--info)}
#gm .toast .tacts{display:flex; gap:8px; margin-top:10px}
#gm .toast .tacts button{background:var(--panel-3); border:1px solid var(--panel-line); color:var(--panel-ink); border-radius:8px; padding:7px 12px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer}
#gm .toast .tacts button:hover{border-color:var(--up); color:var(--up)}
#gm .modal{position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:clamp(12px,3vw,28px); background:rgba(6,8,12,.76); backdrop-filter:blur(6px)}
#gm .modal[open]{display:grid}
#gm .sheet{width:min(700px,100%); max-height:92vh; overflow:auto; background:var(--panel); border:1px solid var(--panel-line); border-radius:18px; color:var(--panel-ink); box-shadow:0 30px 90px rgba(0,0,0,.6)}
#gm .sheet-h{padding:26px 26px 18px; border-bottom:1px solid var(--panel-line); text-align:center; background:radial-gradient(90% 130% at 50% 0%, rgba(22,199,132,.16), transparent 70%)}
#gm .sheet-h.lose{background:radial-gradient(90% 130% at 50% 0%, rgba(240,54,74,.18), transparent 70%)}
#gm .sheet-h .rank{font-size:12.5px; font-weight:800; letter-spacing:.1em; color:var(--panel-faint)}
#gm .sheet-h h2{color:#fff; font-size:clamp(26px,4.4vw,36px); margin:8px 0 4px}
#gm .sheet-h .big{font-family:var(--mono); font-size:clamp(38px,7vw,58px); font-weight:800; letter-spacing:-.04em; line-height:1.05}
#gm .sheet-h .sub{color:var(--panel-muted); font-size:14.5px; margin-top:6px}
#gm .sheet-b{padding:22px 26px 26px}
#gm .rgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:20px}
#gm .rtile{background:var(--panel-2); border:1px solid var(--panel-line); border-radius:12px; padding:13px 14px}
#gm .rtile .k{font-size:11.5px; color:var(--panel-faint); margin-bottom:3px}
#gm .rtile .v{font-family:var(--mono); font-size:19px; font-weight:700; color:#fff}
#gm .lesson{background:var(--panel-2); border:1px solid var(--panel-line); border-left:4px solid var(--gold); border-radius:12px; padding:15px 16px; margin-bottom:18px}
#gm .lesson b{color:#fff; display:block; margin-bottom:5px; font-size:14.5px}
#gm .lesson p{color:var(--panel-muted); font-size:14px; margin:0; max-width:none}
#gm #cardcanvas{width:100%; height:auto; border-radius:12px; border:1px solid var(--panel-line); display:block; margin-bottom:16px}
#gm .shares{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:9px}
#gm .shares a,#gm .shares button{display:flex; align-items:center; justify-content:center; gap:7px; background:var(--panel-2);
  border:1px solid var(--panel-line); color:var(--panel-ink); border-radius:11px; padding:12px 10px;
  font:inherit; font-size:13.5px; font-weight:700; text-decoration:none; cursor:pointer;}
#gm .shares a:hover,#gm .shares button:hover{border-color:var(--up); color:var(--up)}
#gm .again{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px}
#gm .again .btn{justify-content:center; padding:14px}
#gm .sec{padding-block:clamp(34px,5vw,58px)}
#gm .sec-alt{background:var(--surface); border-block:1px solid var(--line)}
#gm .lede{font-size:clamp(17px,1.8vw,19.5px); color:var(--muted); max-width:70ch}
#gm .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:20px; margin-top:26px}
#gm .tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px}
#gm .sec-alt .tile{background:var(--bg)}
#gm .tile h3{font-size:18.5px; margin-bottom:.45em}
#gm .tile p{font-size:15.5px; color:var(--muted); margin:0}
#gm .tile p + p{margin-top:.7em}
#gm .faq{margin-top:26px; border-top:1px solid var(--line)}
#gm .faq details{border-bottom:1px solid var(--line)}
#gm .faq summary{cursor:pointer; padding:17px 46px 17px 0; font-weight:700; color:var(--ink); font-size:17px; position:relative; list-style:none}
#gm .faq summary::-webkit-details-marker{display:none}
#gm .faq summary::after{content:"+"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--accent); font-weight:400}
#gm .faq details[open] summary::after{content:"\2013"}
#gm .faq .ans{padding:0 0 18px; color:var(--muted); font-size:15.5px; max-width:74ch}
#gm .linkrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
#gm .linkrow a{background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-size:14.5px; font-weight:600; color:var(--body); text-decoration:none}
#gm .linkrow a:hover{border-color:var(--accent); color:var(--accent)}
#gm .sec-alt .linkrow a{background:var(--bg)}
@media (prefers-reduced-motion:reduce){#gm .flashlayer{display:none}}
@media (max-width:560px){#gm .act{grid-template-columns:1fr 1fr}#gm .stat .v{font-size:19px}}
#gm .modepick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
#gm .modebtn{background:var(--panel-3);border:1px solid var(--panel-line);color:var(--panel-ink);
  border-radius:12px;padding:12px 12px;cursor:pointer;text-align:left;font:inherit;line-height:1.3}
#gm .modebtn b{display:block;font-size:14.5px}
#gm .modebtn span{display:block;font-size:11.5px;color:var(--panel-faint);margin-top:2px}
#gm .modebtn[aria-pressed="true"]{border-color:var(--up);background:var(--up-soft);
  box-shadow:inset 0 0 0 1px var(--up)}
#gm .levpick{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
#gm .levbtn{background:var(--panel-3);border:1px solid var(--panel-line);color:var(--panel-ink);
  border-radius:10px;padding:9px 4px;cursor:pointer;text-align:center;font:inherit;line-height:1.2}
#gm .levbtn b{display:block;font-size:13px;font-family:var(--mono)}
#gm .levbtn span{display:block;font-size:10.5px;color:var(--panel-faint);margin-top:2px}
#gm .levbtn[data-lev="500"] span,#gm .levbtn[data-lev="1000"] span{color:var(--down)}
#gm .levbtn[aria-pressed="true"]{border-color:var(--gold);background:rgba(242,178,51,.12);
  box-shadow:inset 0 0 0 1px var(--gold)}
#gm .levbtn[aria-pressed="true"][data-lev="500"],#gm .levbtn[aria-pressed="true"][data-lev="1000"]{border-color:var(--down);
  background:var(--down-soft);box-shadow:inset 0 0 0 1px var(--down)}
@media (max-width:620px){#gm .modepick{grid-template-columns:minmax(0,1fr)}#gm .levpick{grid-template-columns:repeat(4,minmax(0,1fr))}}
#gm .modetag{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(242,178,51,.4);
  background:rgba(242,178,51,.1);border-radius:999px;padding:3px 9px;margin-left:8px}
#gm .lev-note{font-size:12.5px;color:var(--panel-faint);border:1px solid var(--panel-line);
  border-radius:10px;padding:9px 11px;margin-bottom:12px;background:var(--panel-3)}
#gm .lev-side{font-family:var(--mono);font-size:12.5px;font-weight:700}
#gm .lev-side.up{color:var(--up)}
#gm .lev-side.down{color:var(--down)}
#gm .lev-room{height:7px;border-radius:999px;background:var(--panel-3);overflow:hidden;
  margin:10px 0 6px}
#gm .lev-room-b{display:block;height:100%;border-radius:999px;background:var(--up);
  transition:width .25s linear}
#gm .lev-room-b.warn{background:var(--gold)}
#gm .lev-room-b.crit{background:var(--down)}
#gm .lev-room-t{font-size:11.5px;color:var(--panel-faint);margin-bottom:10px}
@media (prefers-reduced-motion:reduce){#gm .lev-room-b{transition:none}}
#gm .chart-card.is-fs{position:fixed; inset:0; z-index:200; border-radius:0; border:0;
  display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);}
#gm .chart-card.is-fs .chart-stage{flex:1 1 auto; min-height:0}
#gm .chart-card.is-fs #chart{height:100%}
#gm .chart-card.is-fs .stats{flex:0 0 auto}
@media (max-width:620px){#gm .chart-card.is-fs .ctop{flex-wrap:nowrap; overflow-x:auto; gap:10px; padding:10px 12px;
    scrollbar-width:none}#gm .chart-card.is-fs .ctop::-webkit-scrollbar{display:none}#gm .chart-card.is-fs .ctop-right{flex-wrap:nowrap}#gm .chart-card.is-fs .pairtag{font-size:15px; flex:0 0 auto; white-space:nowrap}#gm .chart-card.is-fs .livepx{flex:0 0 auto; white-space:nowrap}#gm .chart-card.is-fs .readout{font-size:11.5px}#gm .chart-card.is-fs .livepx .p{font-size:18px}#gm .chart-card.is-fs .stats{display:flex; overflow-x:auto; scrollbar-width:none}#gm .chart-card.is-fs .stats::-webkit-scrollbar{display:none}#gm .chart-card.is-fs .stat{flex:0 0 45%; min-height:56px; padding:8px 12px}#gm .chart-card.is-fs .stat .v{font-size:16px}#gm .chart-card.is-fs .stat .s{display:none}}