:root{
  --bg:#070E1F; --bg-2:#0a1730; --surface:#10213D; --surface-2:#0d1b34; --control:#173258; --control-hi:#1e3f6e; --inset:#0a1730;
  --border:#203d66; --border-soft:#ffffff12;
  --text:#F3F7FF; --muted:#a3b6d8; --dim:#7a8fb5;
  --accent:#4285FF; --accent-hi:#5b97ff; --accent-lo:#2f6ae6; --cyan:#65C7FF;
  --win:#2fe08f; --lose:#ff5470; --gold:#ffc94a;
  --side:228px; --head:64px; --wrap:1440px; --pad:32px;
  --r-sm:8px; --r:12px;
  --stage-h:clamp(420px, calc(var(--vh, 1vh) * 100 - var(--head) - 124px), 700px);
  --ring:0 0 0 3px #4285ff55;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:15px/1.45 Inter,system-ui,Segoe UI,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;min-height:calc(var(--vh, 1vh) * 100);
  background:
    radial-gradient(1100px 620px at 82% -8%, #1f56b84d, transparent 70%),
    radial-gradient(900px 560px at -6% 108%, #0e6fa833, transparent 70%),
    linear-gradient(180deg, #070e1fcc 0%, #070e1f00 30%, #070e1f00 70%, #070e1fcc 100%),
    url(../assets/game/bg_ambient.jpg) center top / cover no-repeat fixed,
    linear-gradient(#081228, var(--bg));
  background-color:var(--bg)}
/* extremely faint grain so large navy areas never band */
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:none;box-shadow:var(--ring)}
/* text inputs sit inside a wrapper that shows the focus ring (:focus-within); don't double-ring the input itself.
   Standalone .field inputs keep their own ring (higher specificity .field:focus). */
input:focus,input:focus-visible{box-shadow:none}
.ic{width:18px;height:18px;flex:none;display:block}
.disp{font-family:Anton,Impact,'Arial Narrow',sans-serif;font-weight:400;letter-spacing:.01em;text-transform:uppercase}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- sidebar ---------- */
aside{position:fixed;inset:0 auto 0 0;width:var(--side);z-index:30;display:flex;flex-direction:column;transition:width .2s,transform .25s;
  background:#0d121c;border-right:1px solid #ffffff10;box-shadow:none}
.side-top{height:var(--head);display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--border-soft);flex:none}
.iconbtn{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);cursor:pointer;flex:none}
.iconbtn:hover{background:var(--control);color:var(--text)}
.iconbtn .ic{width:20px;height:20px}
.brandbtn{flex:1;height:42px;border-radius:var(--r-sm);display:flex;align-items:center;gap:9px;padding:0 12px;font-weight:700;font-size:14.5px;overflow:hidden;white-space:nowrap;
  background:linear-gradient(110deg,#2b68e8,#4285ff 55%,#65c7ff);box-shadow:inset 0 1px 0 #ffffff40,0 8px 20px -10px #4285ff}
.brandbtn svg{width:24px;height:24px;flex:none}
.side-search{padding:14px;border-bottom:1px solid var(--border-soft);flex:none}
.inset{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--muted);transition:border-color .15s,box-shadow .15s}
.inset:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.inset input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:14.5px}
.inset input::placeholder{color:var(--dim)}
.navscroll{flex:1;overflow-y:auto;padding:8px 0;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.grp{padding:12px;border-bottom:1px solid #ffffff10}
.grp:last-child{border-bottom:0}
.nl{position:relative;display:flex;align-items:center;gap:12px;height:46px;padding:0 10px;color:#d7dee9;font-size:14px;font-weight:600;cursor:pointer;
  border:0;background:none;width:100%;text-align:left;white-space:nowrap;border-radius:7px;transition:background .15s,color .15s}
.nl:hover{color:var(--text);background:#ffffff08}
.nl.on{color:#7ecfff;background:#7ecfff07}
.nl.on .ic{color:var(--cyan)}
.nl.on:before{content:"";position:absolute;left:-12px;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--cyan)}
.nl .badge{font-style:normal;margin-left:auto;font-size:12px;font-weight:700;background:var(--accent);color:#fff;border-radius:6px;padding:2px 7px;min-width:22px;text-align:center}
.nl .badge.soft{background:var(--control);color:var(--muted)}
.nl .live{font-style:normal;margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--win);box-shadow:0 0 0 3px #2fe08f30;display:none}
.nl .live.on{display:block}
.nl .chev{font-style:normal;margin-left:auto;width:24px;height:24px;border-radius:6px;background:var(--control);display:grid;place-items:center;transition:transform .2s}
.nl .chev .ic{width:16px;height:16px}
.grp.closed .chev{transform:rotate(-90deg)}
.grp.closed .sub{display:none}
.sub .nl{padding-left:20px}
.side-foot{padding:14px 18px;border-top:1px solid var(--border-soft);font-size:12px;color:var(--dim);line-height:1.5;flex:none}
body.rail{--side:72px}
body.rail .brandbtn,body.rail .side-search,body.rail .nl span,body.rail .nl .badge,body.rail .nl .chev,body.rail .side-foot{display:none}
body.rail .side-top{justify-content:center}
body.rail .nl,body.rail .sub .nl{justify-content:center;padding:0}
body.rail .grp.closed .sub{display:block}

/* ---------- shell ---------- */
.shell{position:relative;z-index:1;margin-left:var(--side);min-height:calc(var(--vh, 1vh) * 100)}
header{position:sticky;top:0;z-index:20;height:var(--head);background:#0a1631d9;backdrop-filter:blur(10px);border-bottom:1px solid var(--border);box-shadow:0 10px 30px -20px #000}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
/* 3-part header: logo left, coin balance (+ deposit) centered, icon cluster right */
header .wrap{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.hdr-left{justify-self:start;display:flex;align-items:center;gap:14px;min-width:0}
.hdr-center{justify-self:center;display:flex;align-items:center;gap:8px;min-width:0}
.hdr-r{justify-self:end;display:flex;align-items:center;gap:10px;min-width:0}
.dep-btn{width:34px;height:34px;padding:0;line-height:1;flex:none;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  font-size:24px;font-weight:600;line-height:0;color:#fff;background:linear-gradient(180deg,#5592ff,#3a78f0);
  box-shadow:inset 0 1px 0 #ffffff50,0 6px 16px -8px var(--accent);transition:filter .15s,transform .08s}
.dep-btn:hover{filter:brightness(1.08)}
.dep-btn:active{transform:translateY(1px)}
.dep-btn:focus-visible{box-shadow:var(--ring)}
.logo{display:flex;align-items:center;gap:8px}
.logo-ic{width:37px;height:37px;flex:none;filter:none}
.logo-wm{font-family:Inter,sans-serif;font-weight:900;font-size:20px;letter-spacing:-.045em;color:#eaf5ff;line-height:1;text-transform:uppercase}
.logo-wm b{color:#7ecfff;font-weight:900}
body.rail .logo-wm{display:none}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.menu-mob{display:none}
.btn{position:relative;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;border:0;border-radius:var(--r-sm);font-size:15px;font-weight:700;cursor:pointer;
  transition:background .15s,box-shadow .15s,transform .08s,opacity .15s,color .15s,filter .15s;white-space:nowrap}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.pri{background:linear-gradient(180deg,#5592ff,#3a78f0);color:#fff;box-shadow:inset 0 1px 0 #ffffff40,0 8px 20px -10px #4285ff}
.btn.pri:hover:not(:disabled){background:linear-gradient(180deg,#679fff,#4285ff);box-shadow:inset 0 1px 0 #ffffff50,0 10px 24px -10px #4285ff}
.btn.pri:active:not(:disabled){background:linear-gradient(180deg,#3a78f0,#2f6ae6)}
.btn.sec{background:var(--control);color:var(--text);box-shadow:inset 0 1px 0 #ffffff10,inset 0 0 0 1px #ffffff08}
.btn.sec:hover:not(:disabled){background:var(--control-hi)}
.btn.win{background:linear-gradient(180deg,#4ff0a4,#22c97d);color:#03261a;box-shadow:inset 0 1px 0 #ffffff60,0 8px 22px -10px #2fe08f}
.btn.win:hover:not(:disabled){filter:brightness(1.06)}
.btn.warn{background:#3b2c10;color:#ffd27a;box-shadow:inset 0 0 0 1px #ffc94a40}
.btn.warn:hover:not(:disabled){background:#4a3814}
.btn.block{width:100%;height:50px;font-size:16px}
.btn .sub{font-weight:600;opacity:.8}
.btn .ic{width:18px;height:18px}
.bal{height:44px;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;transition:color .3s;min-width:150px}
.bal.up{color:var(--win)} .bal.down{color:#ffa3b3}
.coin{width:17px;height:17px;border-radius:50%;flex:none;display:inline-block;
  background:radial-gradient(circle,var(--bg) 0 24%,#5a9bff 26% 62%,#f2c27b 64% 100%)}

main.wrap{padding-top:22px;padding-bottom:48px}
.view{display:none}
.view.on{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- banners ---------- */
.banners{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.banner{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--surface);display:block;cursor:pointer;border:0;padding:0;text-align:left;font:inherit;color:inherit;
  box-shadow:0 16px 36px -20px #000,inset 0 0 0 1px #ffffff14;transition:transform .2s,box-shadow .2s}
.banner:hover{transform:translateY(-2px);box-shadow:0 22px 40px -20px #000,inset 0 0 0 1px #65c7ff40}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.banner:hover img{transform:scale(1.03)}
.banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#06102599 0%,#0610254d 40%,transparent 62%);pointer-events:none}
.banner .bt{position:absolute;left:20px;top:18px;bottom:18px;right:42%;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.tagchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;background:#fff;color:#0b1a36;border-radius:6px;padding:4px 8px}
.tagchip .ic{width:13px;height:13px;color:var(--accent)}
.banner h2{margin:2px 0 0;font-size:clamp(26px,2.5vw,42px);line-height:.95;color:#fff;text-shadow:0 3px 0 #0005,0 6px 18px #0007}
.banner h2 em{font-style:normal;color:#ffd84d}
.banner p{margin:auto 0 0;font-size:13.5px;font-weight:600;color:#eaf2ff;text-shadow:0 1px 6px #000}
.banner.cooling h2{opacity:.6}

/* ---------- toolbar ---------- */
.toolbar{display:flex;gap:14px;margin:16px 0 34px}
.tabs{display:flex;gap:4px;padding:5px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow-x:auto;scrollbar-width:none;flex:none;box-shadow:inset 0 1px 0 #ffffff0a}
.tab{height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.tab:hover{color:var(--text);background:#ffffff08}
.tab.on{background:var(--control);color:#fff;box-shadow:inset 0 1px 0 #ffffff14}
.tab.on .ic{color:var(--cyan)}
.tsearch{flex:1;display:flex;align-items:center;gap:10px;padding:0 8px 0 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);color:var(--muted);min-width:200px;transition:border-color .15s,box-shadow .15s}
.tsearch:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.tsearch input{flex:1;min-width:0;height:50px;background:none;border:0;outline:none;font-size:15px}
.tsearch input::placeholder{color:var(--dim)}
kbd{font:700 12px Inter,sans-serif;background:var(--control);color:var(--text);border-radius:6px;padding:5px 8px}

/* ---------- rows ---------- */
.row{margin-bottom:40px}
.rowhead{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.rowhead .ic{width:22px;height:22px;color:var(--cyan)}
.rowhead h3{margin:0;font-family:'Space Grotesk',Inter,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.015em}
.rowhead .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.pill{height:38px;padding:0 16px;border-radius:99px;border:0;background:var(--control);font-size:14px;font-weight:700;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.pill:hover{background:var(--control-hi)}
.circ{width:38px;height:38px;border-radius:50%;border:0;background:var(--control);display:grid;place-items:center;cursor:pointer;color:var(--text);transition:background .15s}
.circ:hover:not(:disabled){background:var(--control-hi)}
.circ:disabled{opacity:.35;cursor:default}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px, 12.5vw, 176px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 10px;margin:-6px -2px 0}
.strip::-webkit-scrollbar{display:none}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.gc{position:relative;aspect-ratio:5/7;border-radius:var(--r);overflow:hidden;scroll-snap-align:start;display:block;
  box-shadow:0 14px 28px -18px #000;transition:transform .18s ease,box-shadow .18s ease}
.gc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.gc:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff26;pointer-events:none;transition:box-shadow .18s}
.gc:hover{transform:translateY(-4px);box-shadow:0 20px 34px -18px #000}
.gc:hover:after,.gc:focus-visible:after{box-shadow:inset 0 0 0 2px #65c7ffaa}
.gc .tp{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;font-size:8.5px;font-weight:800;letter-spacing:.14em;padding:3px 10px 4px;border-radius:0 0 6px 6px;color:#fff;background:#0a1631b0}
.gc .nm{position:absolute;left:6px;right:6px;bottom:12px;z-index:1;text-align:center;color:#fff;font-size:clamp(20px,1.7vw,26px);line-height:1;text-shadow:0 2px 0 #0007,0 0 14px #000a}
.gc .shade{position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(transparent,#0009)}
.gc .fav{position:absolute;top:9px;right:9px;z-index:2;width:30px;height:30px;border-radius:50%;border:0;background:#0a1631cc;color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s}
.gc .fav .ic{width:15px;height:15px}
.gc:hover .fav,.gc .fav.on,.gc .fav:focus-visible{opacity:1}
.gc .fav.on{color:#ff6b97}
.gc .fav.on svg{fill:currentColor}
.gc .livetag{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;font-weight:800;background:var(--win);color:#03261a;border-radius:5px;padding:3px 6px;display:none}
.gc.live .livetag{display:block}
.empty{color:var(--muted);text-align:center;padding:36px;font-size:15px;background:var(--surface);border:1px dashed var(--border);border-radius:var(--r)}

/* ---------- tables ---------- */
.tbl{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:inset 0 1px 0 #ffffff0a}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:13px;padding:12px 18px;border-bottom:1px solid var(--border);background:#ffffff05}
th:not(:first-child),td:not(:first-child){text-align:right}
td{padding:12px 18px;border-bottom:1px solid #ffffff0a;font-weight:600;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#ffffff05}
td .gcell{display:flex;align-items:center;gap:10px}
td .gcell .ic{color:var(--cyan)}
.w{color:var(--win)} .l{color:var(--lose)}
.sumrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.sumrow .stat{background:var(--surface);padding:14px 16px}
.sumrow .stat b{font-size:20px}

/* ---------- shared game chrome ---------- */
.ghead{display:flex;align-items:center;gap:12px;height:44px;margin-bottom:14px}
.ghead a{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14.5px;font-weight:600}
.ghead a:hover{color:var(--text)}
.ghead h1{margin:0;font-size:24px;font-weight:700;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.ghead h1 .ic{color:var(--cyan);width:22px;height:22px}
.ghead .sp{margin-left:auto;display:flex;gap:8px}
.game{display:grid;grid-template-columns:clamp(300px, 24vw, 344px) 1fr;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  box-shadow:0 24px 50px -30px #000,inset 0 1px 0 #ffffff0d}
.ctrl{padding:20px;border-right:1px solid var(--border);display:flex;flex-direction:column;background:linear-gradient(180deg,#11244400,#0b1a3466)}
.stage{position:relative;height:var(--stage-h);overflow:hidden;background:#0a1428 center/cover no-repeat;isolation:isolate}
.lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:600;color:var(--muted);margin:16px 0 8px}
.lbl:first-child{margin-top:0}
.lbl b{color:var(--text);font-weight:700}
.betrow{display:flex;align-items:center;height:50px;background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 4px 4px 14px;transition:border-color .15s,box-shadow .15s}
.betrow:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.betrow.short{border-color:var(--lose)}
.betrow input{flex:1;min-width:0;background:none;border:0;outline:none;font-weight:700;font-size:17px;padding:0 10px;height:100%;font-variant-numeric:tabular-nums}
.betrow > .ic{color:var(--muted)}
.betrow button{height:100%;padding:0 11px;margin-left:4px;border:0;border-radius:6px;background:var(--control);font-size:14px;font-weight:700;cursor:pointer;transition:background .15s}
.betrow button:hover:not(:disabled){background:var(--control-hi)}
.betrow button:focus-visible{box-shadow:var(--ring)}
.betrow :disabled{cursor:not-allowed;opacity:.55}
/* big stakes: compact echo beside the label + quick chips that scale with the balance */
.lbl .betcmp{font-size:12.5px;font-weight:800;color:var(--cyan);letter-spacing:.01em}
.betq{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.betq button{height:28px;min-width:0;border:1px solid var(--border);border-radius:6px;background:var(--inset);color:var(--muted);font-size:12.5px;font-weight:800;
  cursor:pointer;font-variant-numeric:tabular-nums;transition:background .15s,color .15s,border-color .15s}
.betq button:hover:not(:disabled){background:var(--control);color:var(--text)}
.betq button.on{color:var(--text);border-color:var(--accent);background:var(--control)}
.betq button:disabled{cursor:not-allowed;opacity:.55}
.bethint{font-size:13px;font-weight:600;color:var(--lose);margin-top:6px;display:none}
.bethint.on{display:block}
.field{width:100%;height:48px;background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm);padding:0 12px;font-size:15px;font-weight:600;outline:none;transition:border-color .15s,box-shadow .15s}
.field:focus{border-color:var(--accent);box-shadow:var(--ring)}
.field:disabled{opacity:.6;cursor:not-allowed}
select.field option{background:var(--surface)}
.seg{display:flex;gap:4px;padding:4px;background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm)}
.seg button{flex:1;height:40px;border:0;border-radius:6px;background:none;color:var(--muted);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,color .15s}
.seg button:hover:not(:disabled){color:var(--text);background:#ffffff08}
.seg button.on{background:var(--control-hi);color:#fff;box-shadow:inset 0 1px 0 #ffffff14,inset 0 -2px 0 var(--accent)}
.seg button:disabled{cursor:not-allowed;opacity:.6}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.stat{background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;min-width:0}
.stat small{display:block;color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat b{font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.stat b.w{color:var(--win)} .stat b.l{color:var(--lose)}
.ctrl .btn.block{margin-top:16px}
.ctrl .note{color:var(--dim);font-size:13.5px;margin:auto 0 0;padding-top:16px;line-height:1.5}
.chips{position:absolute;top:14px;right:14px;left:14px;display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;z-index:5;pointer-events:none}
.chip{font-size:13px;font-weight:800;padding:5px 11px;border-radius:99px;background:#081228cc;border:1px solid #ffffff14;animation:fade .25s;font-variant-numeric:tabular-nums}
.chip.w{color:var(--win)} .chip.l{color:var(--lose)} .chip.g{color:var(--gold)}

/* outcome pill shared by every game */
.outcome{position:absolute;left:50%;bottom:20px;z-index:6;transform:translate(-50%,12px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;border-radius:99px;background:#081228ee;backdrop-filter:blur(6px);
  border:1px solid var(--border);font-weight:800;font-size:17px;white-space:nowrap;max-width:calc(100% - 20px);box-shadow:0 12px 30px -12px #000;transition:opacity .2s,transform .25s cubic-bezier(.2,.9,.3,1.2)}
.outcome.on{opacity:1;transform:translate(-50%,0)}
.outcome .tag{font-size:12px;letter-spacing:.08em;padding:4px 10px;border-radius:99px}
.outcome.win{border-color:#2fe08f77}.outcome.win .tag{background:var(--win);color:#03261a}.outcome.win .amt{color:var(--win)}
.outcome.loss{border-color:#ff547066}.outcome.loss .tag{background:var(--lose);color:#2b0710}.outcome.loss .amt{color:var(--lose)}
.outcome.push .tag{background:var(--control-hi)}
.outcome .det{color:var(--muted);font-weight:600;font-size:14px}

/* A short celebration for profitable card hands; keep the amount visible afterward. */
.outcome.card-result.win{background:linear-gradient(115deg,#0d392d,#071e21);border-color:#64efb69c;box-shadow:0 6px 24px #0005,0 0 18px #32de9a20}
.outcome.card-result.win .tag{display:inline-flex;align-items:center;gap:6px;letter-spacing:.02em;color:#cbffe9;background:#2fe08f1c}
.card-check{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#64efb6;color:#063225;font-size:12px;line-height:1}
.outcome.card-result.win.on{animation:card-win-glow .9s ease-out}
.outcome.card-result.win.on .amt{animation:card-win-amount .6s cubic-bezier(.2,.85,.3,1.2)}
.outcome.card-result.win.on .card-check{animation:card-win-check .45s cubic-bezier(.2,.9,.3,1.3)}
.outcome.card-result.win.on:after{content:"";position:absolute;inset:-1px;border:1px solid #6bffbf;border-radius:inherit;pointer-events:none;animation:card-win-ring .85s ease-out both}
@keyframes card-win-glow{0%{box-shadow:0 0 0 #51e6a500}35%{box-shadow:0 0 32px #51e6a55c,inset 0 0 16px #51e6a51a}100%{box-shadow:0 6px 24px #0005,0 0 18px #32de9a20}}
@keyframes card-win-ring{from{opacity:.7;transform:scale(.98)}to{opacity:0;transform:scale(1.14,1.5)}}
@keyframes card-win-amount{0%{opacity:0;transform:translateY(7px) scale(.94)}60%{opacity:1;transform:translateY(-2px) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes card-win-check{from{transform:scale(.25) rotate(-30deg)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.outcome.card-result.win.on,.outcome.card-result.win.on .amt,.outcome.card-result.win.on .card-check{animation:none}.outcome.card-result.win.on:after{display:none}}

/* toasts / drawer */
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:60}
.toast{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);padding:12px 16px;border-radius:var(--r);font-weight:600;font-size:14.5px;box-shadow:0 16px 36px #000a;animation:fade .2s;max-width:360px}
.toast .ic{color:var(--cyan)} .toast.w .ic{color:var(--win)} .toast.l .ic{color:var(--lose)}
.scrim{display:none;position:fixed;inset:0;background:#030814b0;z-index:25}

@media (max-width:1200px){ :root{--pad:24px} }
@media (max-width:900px){
  :root{--pad:16px;--head:60px;--stage-h:380px}
  aside{transform:translateX(-100%);width:256.5px}
  body.drawer aside{transform:none}
  body.drawer .scrim{display:block}
  body.rail{--side:0px}
  .shell{margin-left:0}
  .menu-mob{display:grid}
  body{background-attachment:scroll}
  .banners{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .banner{scroll-snap-align:start}
  .toolbar{flex-direction:column}
  .strip{grid-auto-columns:42%}
  .game{grid-template-columns:1fr}
  .ctrl{border-right:0;border-top:1px solid var(--border);order:2}
  .sumrow{grid-template-columns:1fr 1fr}
  #faucet span{display:none}
  #faucet{padding:0 13px}
  .bal{min-width:0}
  .rowhead h3{font-size:20px}
  .ghead h1{font-size:20px}
  .ghead .gfav span{display:none}
}
@media (max-width:520px){ .logo span{display:none} }
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* grid children must be allowed to shrink below their content width (fixes mobile clipping) */
.game > *{min-width:0}
.pill{white-space:nowrap}
@media (max-width:900px){
  .game{grid-template-columns:minmax(0,1fr)}
  .rowhead h3{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .rowhead .circ{display:none}
}
/* short laptop screens: keep the whole nav visible without scrolling */
@media (min-width:901px) and (max-height:860px){
  .nl{height:40px;font-size:13.5px}
  .grp{padding:8px 12px}
  .side-search{padding:10px 14px}
  .side-foot{display:none}
}

/* ---------- logo (Nano Banana wordmark + mark) ---------- */
.logo img.logo-full{height:48px;width:auto;display:block}
.logo img.logo-mark{height:42px;width:42px;object-fit:contain;display:none}
.brandbtn img{width:26px;height:26px;flex:none}
@media (max-width:520px){ .logo img.logo-full{display:none} .logo img.logo-mark{display:block} }

/* phone header: long balances must shrink, never widen the page */
@media (max-width:520px){
  header .wrap{gap:8px}
  .hdr-r{min-width:0;gap:6px}
  .bal{min-width:0;padding:0 10px;font-size:14px;max-width:46vw;overflow:hidden}
  .bal #bal-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #snd{width:36px}
}

/* Keep the established game scale; the desktop lobby is another 10% smaller. */
body{--ui-scale:.9;zoom:var(--ui-scale)}
@media (min-width:901px){
  body:has(#v-home.on,#v-list.on){--ui-scale:.81;min-height:calc(var(--vh, 1vh) * 100 / var(--ui-scale))}
  body:has(#v-home.on,#v-list.on) .shell{min-height:calc(var(--vh, 1vh) * 100 / var(--ui-scale))}
  #side{zoom:calc(.81 / var(--ui-scale))}
  .shell>header{zoom:calc(.81 / var(--ui-scale))}
  /* Match the header's visible bounds at every page scale. */
  .shell>main.wrap{max-width:calc(var(--wrap) * .81 / var(--ui-scale));padding-left:calc(var(--pad) * .81 / var(--ui-scale));padding-right:calc(var(--pad) * .81 / var(--ui-scale))}
  .shell{margin-left:calc(var(--side) * .81 / var(--ui-scale))}
}

.dep-btn>svg{display:block;width:19px;height:19px;pointer-events:none}
.toolbar{flex-wrap:wrap}
.toolbar>.tabs{max-width:100%;min-width:0}
.toolbar>.tsearch{max-width:100%}

/* Sidebar hover feedback uses transforms so the navigation never reflows. */
#side .nl{transition:background .2s,color .2s,transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
#side .nl>.ic{transition:transform .22s,color .2s}
@media(hover:hover){#side .nl:hover{transform:translateX(3px);background:#70c9ff10;box-shadow:inset 0 0 0 1px #79cfff0a}#side .nl:hover>.ic{transform:scale(1.09);color:#9bdcff}body.rail #side .nl:hover{transform:translateY(-2px)}}
#side .nl:focus-visible{outline:2px solid #70c9ff;outline-offset:-2px;background:#70c9ff12}
@media(prefers-reduced-motion:reduce){#side .nl,#side .nl>.ic{transition:none!important;transform:none!important}}

#side .side-profile-group{border-top:1px solid #304153;border-bottom:1px solid #304153;padding-top:10px;padding-bottom:10px;margin-top:8px;margin-bottom:8px}
#side .grp:has(+.side-profile-group){border-bottom:0}