/* =====================================================================
   DonutRich — main stylesheet
   1. Tokens & base         5. Home / race / profile
   2. Components            6. Games (one block per game)
   3. App shell & layout    7. Light theme
   4. Menus, modals, toasts 8. Responsive & motion
   ===================================================================== */

/* ---------- 1. Tokens & base ---------- */
:root{
  --bg:#0b0b0c;--bg2:#07060a;
  --p1:rgba(20,19,22,.74);--p2:rgba(36,34,38,.8);--p3:rgba(48,45,50,.85);
  --surface:#141317;--surface2:#1b1a1f;--raised:#232128;
  --line:#3a3425;--line2:rgba(255,255,255,.08);--line3:rgba(255,255,255,.14);
  --text:#f4efe1;--mute:#a0977f;--dim:#6f6858;
  --glaze:#d4af37;--sun:#f2cf66;--gold-1:#fff0b3;--gold-2:#e8b84a;--gold-3:#a8780f;
  --mint:#5fcf9a;--bad:#e5636f;
  --r-sm:10px;--r:14px;--r-lg:18px;--r-xl:22px;
  --sh-1:0 4px 14px rgba(0,0,0,.35);--sh-2:0 18px 48px rgba(0,0,0,.55);
  --rail-w:236px;--chat-w:320px;--top-h:64px;--bnav-h:0px;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-d:'Chakra Petch','Inter',system-ui,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg2);color:var(--text);font-family:var(--font);font-weight:400;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.005em;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none}
[hidden]{display:none!important}
img,svg,canvas{max-width:100%}
a{color:var(--sun)}
h1,h2,h3,h4{line-height:1.2}
h1{margin:0;font-size:2.2rem;font-weight:600;letter-spacing:-.5px}h1 span{color:var(--glaze)}
::selection{background:rgba(212,175,55,.35);color:#fff}
:focus{outline:none}
:focus-visible{outline:2px solid var(--sun);outline-offset:2px;border-radius:6px}
button{-webkit-user-select:none;user-select:none;touch-action:manipulation}
button:not(:disabled){cursor:pointer}
.skip{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:10px;background:var(--glaze);color:#1a1405;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:calc(10px + var(--safe-t))}
/* thin, unobtrusive scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.28) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(212,175,55,.22);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(212,175,55,.4);background-clip:padding-box}

/* ---------- 2. Components ---------- */
.ic{width:1em;height:1em;vertical-align:-.14em;display:inline-block;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hint{color:var(--mute);font-size:.78rem;flex-basis:100%}
.note{color:var(--mute);font-size:.8rem;margin:4px 0 12px}
.msg{min-height:1.6em;font-weight:500;text-align:center;margin-top:8px}.win{color:var(--mint)}.lose{color:var(--bad)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;justify-content:center}

input[type=number],input[type=text],input[type=search],select,textarea{width:100px;min-height:42px;padding:9px 12px;border-radius:var(--r-sm);border:1px solid var(--line3);background-color:rgba(0,0,0,.35);color:var(--text);font:inherit;font-size:max(16px,1rem);transition:border-color .2s,box-shadow .2s,background .2s}
input::placeholder,textarea::placeholder{color:var(--dim)}
input[type=number]:hover,input[type=text]:hover,select:hover,textarea:hover{border-color:rgba(212,175,55,.35)}
input[type=number]:focus,input[type=text]:focus,input[type=search]:focus,select:focus,textarea:focus{border-color:var(--glaze);box-shadow:0 0 0 3px rgba(212,175,55,.18);background-color:rgba(0,0,0,.45);outline:none}
textarea{width:100%;resize:vertical;min-height:84px}
select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
input[type=range]{width:100%;accent-color:var(--glaze)}

.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:7px 13px;border-radius:var(--r-sm);border:1px solid var(--line3);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));color:var(--text);font:inherit;font-weight:500;line-height:1.1;transition:border-color .18s,background .18s,color .18s,transform .12s}
.chip:hover:not(:disabled){border-color:rgba(212,175,55,.55);background:linear-gradient(180deg,rgba(212,175,55,.16),rgba(212,175,55,.05))}
.chip:active:not(:disabled){transform:translateY(1px)}
.chip.on{border-color:var(--glaze);color:var(--sun);background:rgba(212,175,55,.12)}
.chip:disabled{opacity:.45;cursor:default}

.act{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 22px;border:0;border-radius:var(--r);background:linear-gradient(180deg,#f8dc7f,#d2a72f 60%,#b88d1d);color:#1a1405;font:inherit;font-weight:700;font-size:1rem;line-height:1.1;box-shadow:0 4px 0 #7a5f10,0 8px 18px rgba(212,175,55,.18),inset 0 1px 0 rgba(255,255,255,.55);transition:filter .15s,transform .1s,box-shadow .1s}
.act:hover:not(:disabled){filter:brightness(1.07)}
.act:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #7a5f10,inset 0 1px 0 rgba(255,255,255,.4)}
.act:disabled{opacity:.45;cursor:default;filter:saturate(.6)}
.act.alt{background:linear-gradient(180deg,#26232a,#18161b);color:var(--sun);border:1.5px solid var(--glaze);box-shadow:0 4px 0 #000,inset 0 1px 0 rgba(255,255,255,.06)}
.act.alt:active:not(:disabled){box-shadow:0 1px 0 #000}

.iconbtn{display:inline-grid;place-items:center;position:relative;width:42px;height:42px;flex:none;padding:0;border-radius:12px;border:1px solid var(--line3);background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));color:var(--text);font:inherit;font-size:1.1rem;transition:border-color .2s,background .2s,color .2s}
.iconbtn:hover{border-color:rgba(212,175,55,.55);color:var(--sun)}
.dot{position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--bg)}

.pill{display:inline-flex;gap:8px;align-items:center;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--line3);background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));color:var(--text);font:inherit;font-size:.84rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:border-color .2s,background .2s,transform .15s}
.pill:hover{border-color:rgba(212,175,55,.55);background:linear-gradient(180deg,rgba(212,175,55,.14),rgba(212,175,55,.05))}
.pill b{font-family:var(--font-d);font-weight:600;font-size:.95rem;color:var(--sun);letter-spacing:.04em;font-variant-numeric:tabular-nums}

.tb{height:8px;border-radius:999px;background:rgba(0,0,0,.45);overflow:hidden;margin:6px 0}.tb i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-3),var(--sun))}
.tog{width:40px;height:22px;border-radius:99px;background:rgba(255,255,255,.14);position:relative;flex:none;transition:background .15s}
.tog:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.tog.on{background:var(--glaze)}.tog.on:after{transform:translateX(18px)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.stat{background:var(--p1);border:1px solid var(--line2);border-radius:var(--r);padding:10px 14px;min-width:0}
.stat b{display:block;font-family:var(--font-d);font-size:1.15rem;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat span{color:var(--mute);font-size:.76rem}
.hist{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;font-size:.84rem}
.hist i{font-style:normal;padding:4px 10px;border-radius:999px;background:var(--p2);border:1px solid var(--line2)}
.hist .w{color:var(--mint)}.hist .l{color:var(--bad)}
.accode{font:700 22px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px;background:rgba(0,0,0,.3);border:1px dashed rgba(255,255,255,.25);border-radius:10px;padding:12px;text-align:center;user-select:all;margin:8px 0;overflow-wrap:anywhere}

/* section = page card */
section{display:none;background:var(--p1);border:1px solid var(--line2);border-radius:var(--r-xl);padding:18px;box-shadow:var(--sh-1)}
section.on{display:block;animation:fi .3s ease}
@keyframes fi{from{opacity:0;transform:translateY(6px)}}
section.game-sec{content-visibility:auto;contain-intrinsic-size:800px}
section.game-sec:not(.on){display:none}

/* ---------- 3. App shell & layout ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg2);pointer-events:none}
.bg canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85;transform:scale(1.04)}
.orb{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.o1{width:640px;height:640px;left:50%;top:-260px;margin-left:-320px;background:#d4af37;opacity:.18;animation:dr1 26s ease-in-out infinite alternate}
.o2{width:520px;height:520px;left:-160px;bottom:-200px;background:#a8661a;opacity:.18;animation:dr2 32s ease-in-out infinite alternate}
.o3{width:560px;height:560px;right:-180px;top:30%;background:#6b4a12;opacity:.2;animation:dr3 38s ease-in-out infinite alternate}
@keyframes dr1{to{transform:translate(120px,70px) scale(1.12)}}@keyframes dr2{to{transform:translate(160px,-90px) scale(1.15)}}@keyframes dr3{to{transform:translate(-130px,80px) scale(1.1)}}
.vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 38%,transparent 30%,rgba(0,0,0,.72) 100%)}

.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr) var(--chat-w);height:100vh;height:100dvh;padding-top:var(--safe-t)}
.rail,.chat{display:flex;flex-direction:column;min-height:0;background:rgba(12,11,14,.78);backdrop-filter:blur(10px) saturate(1.15);-webkit-backdrop-filter:blur(10px) saturate(1.15)}
.rail{border-right:1px solid rgba(212,175,55,.14);overflow-y:auto;overscroll-behavior:contain;padding:10px 10px calc(14px + var(--safe-b))}
.chat{border-left:1px solid rgba(212,175,55,.14)}
.mainc{position:relative;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-behavior:smooth;scroll-padding-top:calc(var(--top-h) + 12px)}
.wrap{max-width:1060px;margin:0 auto;padding:16px 18px calc(28px + var(--bnav-h) + var(--safe-b))}

/* logo */
.logo{display:inline-block;font-family:var(--font-d);font-size:1.6rem;font-weight:700;letter-spacing:-.2px;color:var(--text);text-decoration:none;line-height:1}
.logo span{background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));-webkit-background-clip:text;background-clip:text;color:transparent}

/* rail */
.rail-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 6px 14px}
.rail-x{display:none}
#nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nv{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--mute);font:inherit;font-weight:500;text-align:left;transition:background .18s,color .18s,border-color .18s}
.nv:hover:not(:disabled){background:rgba(255,255,255,.05);color:var(--text)}
.nv.on{background:linear-gradient(90deg,rgba(212,175,55,.18),rgba(212,175,55,.04));border-color:rgba(212,175,55,.35);color:var(--sun)}
.nv.on:before{content:"";position:absolute;left:-10px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--sun);box-shadow:0 0 10px var(--sun)}
.nv:disabled{opacity:.4;cursor:default}.nv em{margin-left:auto;font-style:normal;font-size:.6rem;color:var(--mute)}
.nv.goff{opacity:.4;text-decoration:line-through}
.ni{display:grid;place-items:center;width:28px;height:28px;flex:none}.ni svg{width:28px;height:28px}
.ng{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding:14px 12px 6px;font-weight:600}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;display:flex;gap:8px;align-items:center;min-height:var(--top-h);padding:10px 18px;background:rgba(10,9,12,.72);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid rgba(212,175,55,.14)}
.tb-logo{display:none;font-size:1.3rem;margin-right:4px}
.tb-left{display:flex;gap:8px;align-items:center;min-width:0}
.tb-grow{flex:1 1 auto;min-width:0}
.balwal{display:flex;align-items:stretch;height:44px;border-radius:13px;border:1px solid rgba(212,175,55,.35);background:linear-gradient(180deg,rgba(212,175,55,.1),rgba(0,0,0,.25));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:box-shadow .35s,border-color .35s}
.bal{display:flex;align-items:center;gap:10px;padding:0 14px 0 10px;min-width:0;cursor:default}
.bal .bc,.bet-in .bc{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;font-size:1.5rem}
.bal .bc .ic,.bet-in .bc .ic{filter:drop-shadow(0 0 6px rgba(255,200,60,.45))}
.bal .bv{display:flex;flex-direction:column;line-height:1;gap:3px;min-width:0}
.bal small{font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:600}
.bal b{font-family:var(--font-d);font-weight:600;font-size:1.1rem;letter-spacing:.03em;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap;transition:color .35s}
.balwal:has(.bal.gu){border-color:#5fd36b;box-shadow:0 0 0 1px rgba(95,211,107,.45),0 0 20px rgba(95,211,107,.28)}
.balwal:has(.bal.gd){border-color:#f0646e;box-shadow:0 0 0 1px rgba(240,100,110,.45),0 0 20px rgba(240,100,110,.25)}
.bal.gu b{color:#7fe3a0}.bal.gd b{color:#f58a93}
.wal-wrap{position:relative;display:flex}
.walbtn{display:flex;align-items:center;gap:8px;margin:3px;padding:0 14px;border:0;border-radius:10px;background:linear-gradient(180deg,#f8dc7f,#d2a72f 60%,#b88d1d);color:#1a1405;font:inherit;font-weight:700;font-size:.86rem;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:filter .15s}
.walbtn:hover{filter:brightness(1.08)}.walbtn .ic{font-size:1.05rem}
.acbtn{display:flex;align-items:center;gap:9px;height:44px;padding:0 12px 0 6px;max-width:190px;border-radius:13px;border:1px solid var(--line3);background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));color:var(--text);font:inherit;font-weight:600;font-size:.86rem;transition:border-color .2s}
.acbtn:hover{border-color:rgba(212,175,55,.55)}
.acbtn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#acav{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px;overflow:hidden;background:var(--p2);font-size:1rem}
#chatbtn{display:none}

/* bet bar */
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--p1);border:1px solid var(--line2);border-radius:var(--r-lg);padding:10px 12px;margin-bottom:12px}
.bar>label{color:var(--mute);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding-left:2px}
.bet-in{display:flex;align-items:center;gap:8px;flex:0 1 200px;min-width:120px;height:44px;padding:0 6px 0 10px;border-radius:12px;border:1px solid var(--line3);background:rgba(0,0,0,.35);transition:border-color .2s,box-shadow .2s}
.bet-in:focus-within{border-color:var(--glaze);box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.bet-in .bc{font-size:1.25rem;width:20px;height:20px}
.bet-in input{flex:1;width:auto!important;min-width:0;min-height:0;padding:0;border:0!important;background:none!important;box-shadow:none!important;font-family:var(--font-d);font-weight:600;font-size:max(16px,1.05rem);font-variant-numeric:tabular-nums}
.bar .chip{min-width:46px;height:44px;font-weight:600}
.betv{color:var(--mute);font-size:.82rem;font-variant-numeric:tabular-nums;flex:1 1 auto;white-space:nowrap}
.bethint{flex-basis:100%;font-size:.72rem;color:var(--dim);padding-left:2px}
body:not([data-pg="game"]) .stats,body:not([data-pg="game"]) .hist,body:not([data-pg="game"]) #reset{display:none}

/* chat */
.ch-h{display:flex;align-items:center;gap:10px;min-height:var(--top-h);padding:10px 14px;border-bottom:1px solid rgba(212,175,55,.14)}
.ch-h b{font-family:var(--font-d);font-size:1.2rem;letter-spacing:.02em}
.ch-on{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:6px}.ch-on .hint{flex:none}
.ch-on i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(95,207,154,.18);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(95,207,154,0)}}
#chx{display:none}
.rain{margin:10px;padding:12px;background:radial-gradient(ellipse at 0% 0%,rgba(212,175,55,.16),transparent 60%),var(--p2);border:1px solid rgba(212,175,55,.25);border-radius:var(--r)}
.rn-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.rn-top>div:first-child{min-width:0}.rn-top b{font-family:var(--font-d);font-size:1.15rem;color:var(--sun)}
.rn-b{display:flex;gap:6px;flex:none}.rn-b .act{min-height:36px;padding:7px 14px;font-size:.85rem;box-shadow:none}.rn-b .chip{min-height:36px}
.ch-l{flex:1;min-height:120px;overflow-y:auto;overscroll-behavior:contain;padding:6px 12px;display:flex;flex-direction:column;gap:10px}
.cm{display:flex;gap:9px;align-items:flex-start;animation:fi .25s ease}
.cav{font-size:1.4rem;width:34px;height:34px;display:grid;place-items:center;background:var(--p2);border-radius:10px;flex:0 0 auto;overflow:hidden}
.cb{min-width:0;flex:1}.ct{display:flex;gap:8px;align-items:baseline}
.cn{background:none;border:0;color:var(--sun);font:inherit;font-weight:600;font-size:.85rem;padding:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ctm{color:var(--dim);font-size:.68rem;flex:none}
.cx{font-size:.9rem;overflow-wrap:anywhere;color:#e9e3d3}
.ch-note{padding:0 14px}
.ch-in{display:flex;gap:8px;padding:10px 12px 4px;border-top:1px solid var(--line2)}
.ch-in input{flex:1 1 auto;width:auto;min-width:0}
.ch-in .act{flex:none;width:46px;min-height:42px;padding:0;box-shadow:none;font-size:1.1rem}
.ch-cnt{text-align:right;padding:0 14px calc(8px + var(--safe-b));font-size:.7rem}

/* drawers backdrop + bottom nav (mobile) */
.scrim{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.bnav{display:none}

/* ---------- 4. Menus, modals, toasts ---------- */
.wal-drop,.ac-drop{position:absolute;top:calc(100% + 10px);right:0;min-width:250px;max-height:calc(100dvh - 90px);overflow-y:auto;padding:6px;border-radius:16px;background:linear-gradient(180deg,#1f1c22,#141317);border:1px solid rgba(212,175,55,.22);box-shadow:var(--sh-2);z-index:90;transform-origin:top right;animation:pop .16s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.wal-drop{display:none}.wal-drop.on{display:block}
.wal-drop button,.ac-drop button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 12px;border:none;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-weight:500;text-align:left;transition:background .15s,color .15s}
.wal-drop button:hover,.ac-drop button:hover,.wal-drop button:focus-visible,.ac-drop button:focus-visible{background:rgba(212,175,55,.1);color:var(--sun)}
.ac-drop button>.ic{font-size:1.05rem;color:var(--mute)}.ac-drop button:hover>.ic{color:var(--sun)}
.wal-drop button .wico{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:rgba(212,175,55,.1);color:var(--sun)}
.wal-drop button .wico .ic{width:17px;height:17px}
.wal-drop button .wmeta{margin-left:auto;font-size:.75rem;color:var(--sun);font-weight:600}
.wal-drop .wsep,.ac-drop .ac-sep{height:1px;background:var(--line2);margin:5px 8px}
.ac-drop .ac-row{justify-content:space-between}
.ac-drop .ac-out{color:#ff8a96}.ac-drop .ac-out>.ic{color:#ff8a96}
.ac-drop .ac-snd{display:none}

.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;padding-bottom:calc(16px + var(--safe-b));background:rgba(0,0,0,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);overflow-y:auto;animation:fade .2s}
.md{position:relative;width:min(400px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:22px;background:linear-gradient(180deg,#1f1c22,#131216);border:1px solid rgba(212,175,55,.3);border-radius:20px;box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.05);animation:mdin .25s cubic-bezier(.2,1,.3,1)}
@keyframes mdin{from{opacity:0;transform:translateY(14px) scale(.97)}}
.md h3{margin:0;font-family:var(--font-d);font-size:1.25rem;letter-spacing:.02em}
.md input,.md select{width:100%}
.avs{display:flex;gap:6px;flex-wrap:wrap}.avs button{font-size:1.5rem;width:46px;height:46px;border-radius:12px;border:1px solid var(--line3);background:var(--p2)}.avs button.on{border-color:var(--glaze)}
.acprev{display:flex;align-items:center;gap:12px}.cav.big{width:56px;height:56px;border-radius:12px;overflow:hidden;flex:0 0 auto;display:block}

/* wallet modals */
.wmodal .md{max-width:440px;width:100%;padding:24px 22px 20px}
.wmodal .whero{text-align:center;margin-bottom:6px}
.wmodal .whero .wico-lg{display:grid;place-items:center;width:58px;height:58px;margin:0 auto;border-radius:16px;background:radial-gradient(circle at 30% 30%,rgba(242,207,102,.3),rgba(242,169,60,.06));border:1px solid rgba(242,207,102,.25);box-shadow:0 0 30px rgba(242,207,102,.12)}
.wmodal .whero .wico-lg .ic{width:28px;height:28px;color:var(--sun)}
.wmodal .winput .wico .ic{width:18px;height:18px;opacity:.75}
.wmodal h3.wtitle{margin:10px 0 4px;font-size:1.3rem;letter-spacing:.1em;font-weight:700}
.wmodal .wbar{height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin:10px auto 14px;overflow:hidden;width:60%}
.wmodal .wbar>i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--gold-3),var(--sun));border-radius:2px}
.wmodal label.wl{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:12px 0 6px;font-weight:600}
.wmodal .winput{display:flex;align-items:center;gap:8px;min-height:50px;background:rgba(0,0,0,.35);border:1px solid var(--line3);border-radius:12px;padding:0 14px;transition:border-color .2s,box-shadow .2s}
.wmodal .winput:focus-within{border-color:var(--glaze);box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.wmodal .winput input{flex:1;width:auto;min-width:0;min-height:0;padding:0;border:none;background:transparent;box-shadow:none;color:var(--text);font-family:var(--font-d);font-size:max(16px,1.05rem);outline:none}
.wmodal .winput .wmax{border:none;background:rgba(212,175,55,.12);border-radius:8px;color:var(--sun);font:inherit;font-weight:700;font-size:.8rem;padding:6px 10px}
.wmodal .wnote{background:rgba(242,169,60,.08);border:1px solid rgba(242,169,60,.22);border-radius:10px;padding:10px 12px;font-size:.82rem;color:#e8c98a;margin:10px 0;line-height:1.45}
.wmodal .wbtn{width:100%;min-height:50px;margin-top:14px;padding:14px;border:none;border-radius:12px;background:linear-gradient(180deg,#f8dc7f,#d2a72f 60%,#b88d1d);color:#1a1405;font:inherit;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.95rem;box-shadow:0 4px 0 #7a5f10,inset 0 1px 0 rgba(255,255,255,.5);transition:filter .15s,transform .1s}
.wmodal .wbtn:hover:not(:disabled){filter:brightness(1.07)}.wmodal .wbtn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #7a5f10}
.wmodal .wbtn:disabled{opacity:.45;cursor:not-allowed}
.wmodal .wbtn.alt{background:rgba(255,255,255,.08);color:var(--text);box-shadow:none;border:1px solid var(--line3)}
.wmodal .wbtn.ghost{background:transparent;border:1px solid var(--line3);color:var(--mute);box-shadow:none}
.wmodal .wclose{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line3);background:rgba(255,255,255,.05);color:var(--text);transition:border-color .2s,color .2s}
.wmodal .wclose:hover{border-color:var(--glaze);color:var(--sun)}.wmodal .wclose .ic{width:15px;height:15px}
.wmodal .whist{margin-top:16px}
.wmodal .whist h4{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
.wmodal .whrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line2);font-size:.88rem}
.wmodal .whrow .stag{margin-left:auto;font-size:.7rem;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:6px;background:rgba(95,207,154,.15);color:#5fcf9a}
.wmodal .whrow .stag.p{background:rgba(242,207,102,.12);color:var(--sun)}.wmodal .whrow .stag.x{background:rgba(229,99,111,.15);color:#e5636f}
.wmodal .wcmd{background:rgba(0,0,0,.4);border:1px dashed rgba(212,175,55,.4);border-radius:10px;padding:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;user-select:all;text-align:center;margin:12px 0;overflow-wrap:anywhere}
.wmodal .wspin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--sun);border-radius:50%;animation:wspin .8s linear infinite;vertical-align:middle;margin-right:8px}
@keyframes wspin{to{transform:rotate(360deg)}}

/* profile modal */
.pf-modal .md{width:min(440px,100%);padding:0;overflow:hidden auto}
.pf-modal .pf-hero{padding:28px 20px 12px;text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(242,169,60,.22),transparent 60%)}
.pf-modal .pf-hero h3{margin:0;letter-spacing:.14em;font-size:.95rem;opacity:.9}
.pf-modal .pf-user{display:flex;align-items:center;gap:12px;padding:8px 20px 16px}
.pf-modal .pf-user .av{width:52px;height:52px;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.25)}
.pf-modal .pf-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 16px}
.pf-modal .pf-stat{background:rgba(0,0,0,.25);border:1px solid var(--line2);border-radius:12px;padding:12px;text-align:center}
.pf-modal .pf-stat span{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-bottom:4px}
.pf-modal .pf-stat b{font-family:var(--font-d);font-size:1.05rem}

/* toasts */
.toasts{position:fixed;left:50%;bottom:calc(18px + var(--bnav-h) + var(--safe-b));transform:translateX(-50%);display:flex;flex-direction:column-reverse;gap:8px;z-index:120;align-items:center;width:max-content;max-width:calc(100vw - 24px);pointer-events:none}
.toast{display:flex;align-items:center;gap:8px;max-width:100%;padding:11px 16px 11px 14px;border-radius:12px;background:rgba(28,26,31,.96);border:1px solid rgba(212,175,55,.45);border-left:4px solid var(--glaze);box-shadow:var(--sh-2);font-weight:500;font-size:.92rem;pointer-events:auto;animation:tin .3s cubic-bezier(.2,1.2,.3,1)}
.toast.win{border-color:rgba(95,207,154,.5);border-left-color:var(--mint)}.toast.lose{border-color:rgba(229,99,111,.5);border-left-color:var(--bad)}
@keyframes tin{from{opacity:0;transform:translateY(12px) scale(.96)}}

/* announcements & maintenance */
.ann{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:9px 18px;font-size:13px;background:#1d4ed8;color:#fff}
.ann a{color:#fff;text-decoration:underline}.ann.warning{background:#b45309}.ann.danger{background:#b91c1c}.ann.success{background:#15803d}
.ann .chip{min-height:30px;padding:4px 10px;color:#fff;border-color:rgba(255,255,255,.4)}.ann .chip:empty:after{content:"✕"}
#mnt{position:fixed;inset:0;z-index:99999;background:rgba(11,15,25,.96);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
#mnt .mnb{max-width:420px;padding:24px}

/* ---------- 5. Home / race / profile ---------- */
#home{background:transparent;border:0;box-shadow:none;padding:0}
.hm-cards{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:12px;margin-bottom:22px}
.hm-c{position:relative;display:flex;gap:14px;align-items:center;min-width:0;background:linear-gradient(180deg,rgba(32,29,24,.9),rgba(18,17,20,.92));border:1px solid var(--line2);border-radius:var(--r-lg);padding:16px;overflow:hidden;box-shadow:var(--sh-1)}
.hm-c:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.6),transparent)}
.hm-c>div{min-width:0}.hm-c b{font-family:var(--font-d);font-size:1.05rem;letter-spacing:.02em}
.hm-c .tb{margin:8px 0 4px;min-width:120px}
.hm-c .act,.hm-c .chip{min-height:40px}
.hm-cards .hm-c:nth-child(2){background:radial-gradient(ellipse at 100% 0%,rgba(212,175,55,.2),transparent 60%),linear-gradient(180deg,rgba(32,29,24,.9),rgba(18,17,20,.92))}
.hm-cards .hm-c:nth-child(3){background:radial-gradient(ellipse at 100% 0%,rgba(95,207,154,.14),transparent 60%),linear-gradient(180deg,rgba(32,29,24,.9),rgba(18,17,20,.92))}
.hm-av{font-size:2.4rem;width:60px;height:60px;display:grid;place-items:center;border-radius:14px;background:var(--p2);border:2px solid var(--glaze);flex:0 0 auto;overflow:hidden;box-shadow:0 0 18px rgba(212,175,55,.25)}
.hm-h{position:sticky;top:calc(var(--top-h) - 1px);z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 -4px 12px;padding:10px 4px;background:linear-gradient(180deg,rgba(9,8,11,.92) 70%,transparent)}
.hm-h h2,.hm-t{margin:0;font-family:var(--font-d);font-size:1.35rem;letter-spacing:.04em}
.hm-h input{width:min(280px,55%);padding-left:38px;background:rgba(0,0,0,.4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0977f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%/17px}
.gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.gg:empty:before{content:"No game matches your search.";grid-column:1/-1;text-align:center;color:var(--mute);padding:30px 0}
.gc{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 14px;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.07);background:radial-gradient(ellipse at 50% 30%,rgba(var(--c,212,175,55),.5),transparent 66%),radial-gradient(ellipse at 50% 120%,rgba(0,0,0,.7),transparent 60%),linear-gradient(180deg,rgba(34,30,18,.9),rgba(14,13,16,.95));color:var(--text);font:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}
.gc:hover:not(.soon),.gc:focus-visible{transform:translateY(-4px);border-color:rgba(var(--c,212,175,55),.8);box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 26px rgba(var(--c,212,175,55),.25)}
.gc:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(-120%);transition:transform .7s;pointer-events:none}
.gc:hover:not(.soon):before{transform:translateX(120%)}
.gc:after{content:"";position:absolute;left:12%;right:12%;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(var(--c,212,175,55),.9),transparent)}
.gc .gi{display:grid;place-items:center}
.gc .gi svg{width:118px;height:118px;filter:drop-shadow(0 10px 10px rgba(0,0,0,.6));animation:gfl 4.2s ease-in-out infinite;transition:transform .25s}
.gc:nth-child(2n) .gi svg{animation-delay:-1.4s}.gc:nth-child(3n) .gi svg{animation-delay:-2.6s}
.gc:hover:not(.soon) .gi svg{transform:scale(1.08) rotate(-2deg);animation-play-state:paused}
.gc b{font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1.2}
.gc.soon{opacity:.82;filter:saturate(.8);cursor:default}.gc.soon .gi svg{animation:none}
.gc em{position:absolute;top:8px;right:8px;font-style:normal;font-size:.6rem;background:var(--p2);padding:1px 7px;border-radius:999px;color:var(--mute)}
@keyframes gfl{0%,100%{translate:0 0}50%{translate:0 -5px}}
.rct{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.prs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:12px 0}.prs div{background:var(--p2);border:1px solid var(--line2);border-radius:12px;padding:10px 12px}.prs span{display:block;color:var(--mute);font-size:.72rem}.prs b{font-family:var(--font-d);font-size:1.1rem;color:var(--sun)}
.cb-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px;margin:12px 0;border-radius:14px;background:linear-gradient(135deg,rgba(255,200,60,.14),rgba(255,140,0,.06));border:1px solid rgba(255,200,60,.35)}
.cb-card span{font-size:.8rem;opacity:.7;text-transform:uppercase;letter-spacing:.08em}.cb-card b{font-family:var(--font-d);font-size:2rem;color:#ffd23f}
#tixlist .hm-c{padding:12px 14px;transition:border-color .2s}#tixlist .hm-c:hover{border-color:rgba(212,175,55,.45)}
#tixview{background:var(--p2)}

/* ---------- 6. Games ---------- */

/* --- Shared game bits: coin, tiles, roulette, reels, felt, blackjack spots --- */
.coin{width:130px;height:130px;border-radius:50%;margin:10px auto;display:grid;place-items:center;font-size:3.2rem;background:radial-gradient(circle at 35% 30%,#ffe69a,#e0a02a);color:#5b3a00;font-weight:600;border:5px solid #b97d00;transition:transform 1.6s cubic-bezier(.25,.1,.25,1)}
.big{font-size:3.6rem;font-weight:600;text-align:center;margin:6px 0;font-variant-numeric:tabular-nums}
canvas{width:100%;background:var(--bg);border-radius:14px;display:block}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:380px;margin:10px auto}
.tile{aspect-ratio:1;border-radius:14px;border:2px solid var(--line);background:var(--p2);font-size:1.6rem;cursor:pointer;color:var(--text);transition:transform .15s}
.tile:not(:disabled):hover{transform:translateY(-2px);border-color:var(--glaze)}
.tile.safe,.tile.mine{animation:sc .3s ease}@keyframes sc{from{transform:scale(.75);opacity:.5}}
.tile.safe{background:var(--glaze);border-color:var(--glaze)}.tile.mine{background:var(--bad);border-color:var(--bad)}
input[type=range]{width:100%;accent-color:var(--glaze)}
.rc{display:inline-block;min-width:84px;padding:6px 10px;border-radius:12px;font-weight:600}
.rl{width:110px;height:110px;margin:8px auto;border-radius:50%;display:grid;place-items:center;font-size:2.6rem;font-weight:600;border:5px solid var(--line);background:var(--p2)}
.rwrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center}
#wc{width:310px;max-width:100%;height:auto}
.tblw{overflow-x:auto;padding-bottom:6px}
.tbl{display:grid;grid-template-columns:repeat(14,1fr);gap:3px;min-width:540px;margin-top:12px}
.tc{position:relative;padding:11px 0;border-radius:8px;border:2px solid var(--line);color:var(--text);font:inherit;font-weight:600;cursor:pointer;background:var(--p2)}
.tc.r{background:#b3262f;color:#fff}.tc.n{background:#151516;color:#fff}.tc.v{background:#169a72;color:#fff}
.tc:hover{border-color:var(--sun)}
.tc i{position:absolute;right:-3px;top:-9px;background:var(--sun);color:#2b1d00;border-radius:999px;font-style:normal;font-size:.72rem;padding:1px 7px}
.reels{display:flex;gap:10px;justify-content:center;margin:10px 0}
.reel{width:92px;height:100px;border-radius:16px;background:var(--bg);border:3px solid var(--glaze);display:grid;place-items:center;font-size:3rem}
.felt{background:radial-gradient(ellipse at 50% 0%,#27272b,#0c0c0d);border:6px solid #b8922a;border-radius:26px 26px 110px 110px/26px 26px 80px 80px;padding:14px 10px 24px;position:relative;overflow:hidden}
.shoe{position:absolute;right:12px;top:10px;width:58px;height:82px;border-radius:9px;background:repeating-linear-gradient(45deg,#d4af37 0 6px,#1a1405 6px 12px);border:4px solid #fff;box-shadow:3px 3px 0 #d8d2e0,6px 6px 0 #b9b2c4,9px 9px 12px rgba(0,0,0,.4);display:grid;place-items:end center;color:#fff;font-weight:600;font-size:.8rem}
#dh{display:flex;justify-content:center;min-height:132px}
#ph{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;min-height:150px;margin-top:8px}
.hand{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 8px;border-radius:14px;border:2px solid transparent;transition:border-color .4s,background .4s}
.hand.act{border-color:var(--sun);background:rgba(255,200,87,.1)}
.hc{position:relative;height:92px;width:64px;transition:width calc(.6s * var(--bjf,1)) ease;perspective:700px}
.hl{color:#fff;font-weight:500;font-size:.9rem;min-height:1.3em}.hl .win{color:#ffe27a}.hl .lose{color:#ffb0b8}
.slot{position:absolute;top:0;width:64px;height:92px}
.card{width:64px;height:92px;position:relative;transform-style:preserve-3d;transition:transform calc(.7s * var(--bjf,1)) ease-in-out}
.card.down{transform:rotateY(180deg)}
.f{position:absolute;inset:0;border-radius:9px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 3px 8px rgba(0,0,0,.45)}
.fr{background:#fffdf8;color:#1d1d26;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:600;font-size:1.15rem;line-height:1.1}
.fr span{font-size:1.7rem}.fr.rd{color:#d62839}
.bk{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#d4af37 0 6px,#1a1405 6px 12px);border:4px solid #fff}
.spots{display:flex;justify-content:center;align-items:flex-end;gap:16px;margin-top:20px}
.spot{width:80px;height:80px;border-radius:50%;border:3px dashed rgba(212,175,55,.75);background:rgba(0,0,0,.2);color:#fff;font:inherit;position:relative;cursor:pointer;display:grid;place-items:center;padding:4px}
.spot.main{width:100px;height:100px}.spot span{font-size:.72rem;line-height:1.15;text-align:center}.spot:hover{border-color:var(--sun)}
.spot em{display:none;font-style:normal}.spot.has em{display:block;position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);background:var(--sun);color:#2b1d00;border-radius:999px;padding:2px 11px;font-weight:600;font-size:.85rem}
.pts{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.pt{flex:1 1 220px;background:var(--p2);border:2px solid var(--line);border-radius:12px;padding:8px 12px;font-size:.8rem;color:var(--mute)}.pt b{color:var(--text)}

/* --- Coinflip · Crash · Dice · Plinko · Blackjack · Hi-Lo --- */
.cf-scene{height:320px;border-radius:20px;background:radial-gradient(ellipse at 50% 100%,var(--p2),var(--bg) 85%);border:2px solid var(--line);position:relative;overflow:hidden;perspective:1100px}
.cf-scene::before{content:"";position:absolute;left:50%;top:-40px;width:260px;height:260px;margin-left:-130px;background:radial-gradient(circle,rgba(255,235,170,.22),transparent 70%);pointer-events:none}
.cf-coin{position:absolute;left:50%;bottom:66px;width:140px;height:140px;margin-left:-70px;transform-style:preserve-3d;will-change:transform}
.cf-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;align-content:center}
.cf-a{transform:translateZ(8px);background:radial-gradient(circle at 34% 28%,#fff0b3,#f3bc3a 52%,#c98a10);border:7px solid #e0a82c;box-shadow:inset 0 0 0 3px #b57d14,inset 0 0 18px rgba(120,70,0,.45)}
.cf-b{transform:rotateX(180deg) translateZ(8px);background:radial-gradient(circle at 34% 28%,#ffffff,#c9cdd6 52%,#8b92a1);border:7px solid #b4bac6;box-shadow:inset 0 0 0 3px #7d8493,inset 0 0 18px rgba(20,20,40,.45)}
.cf-face b{font-size:3.2rem;line-height:1;filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}.cf-face small{font-weight:600;letter-spacing:.14em;font-size:.7rem;color:rgba(60,25,0,.7);margin-top:2px}.cf-b small{color:rgba(30,30,45,.75)}
.cf-edge{position:absolute;inset:0;border-radius:50%}
.cf-shadow{position:absolute;left:50%;bottom:40px;width:130px;height:28px;margin-left:-65px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(7px)}
.cf-pick{display:flex;gap:10px;margin:14px 0}
.cf-side{flex:1;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;border:2px solid var(--line);background:var(--p2);color:var(--text);font:inherit;cursor:pointer;transition:border-color .25s,background .25s}
.cf-side.on{border-color:var(--sun);background:var(--bg)}.cf-side b{font-size:1.1rem}.cf-side small{margin-left:auto;color:var(--mint);font-weight:500}
.mc{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;color:#4a2a00;box-shadow:inset 0 0 0 3px rgba(0,0,0,.15)}
.mc.g{background:radial-gradient(circle at 34% 28%,#fff0b3,#f3bc3a 55%,#c98a10)}.mc.p{background:radial-gradient(circle at 34% 28%,#fff,#c9cdd6 55%,#8b92a1);color:#2a2a3a}
.cf-meta{display:flex;justify-content:space-between;color:var(--mute);font-size:.85rem;margin:2px 4px 8px}
.cf-hist{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-height:30px;margin-top:8px}
.cf-hist i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:600;color:#3a2000;border:2px solid transparent}
.cf-hist i.g{background:#f3bc3a}.cf-hist i.p{background:#c9cdd6;color:#22222e}.cf-hist i.w{border-color:var(--mint)}.cf-hist i.l{opacity:.55}
.cr-wrap{position:relative;border-radius:20px;overflow:hidden;border:2px solid var(--line);background:#0d0618}
.cr-wrap canvas{border-radius:0;display:block;background:#0d0618}
.cr-hud{position:absolute;left:18px;top:12px;pointer-events:none}
.cr-m{font-size:3.4rem;font-weight:600;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6);font-variant-numeric:tabular-nums;line-height:1.05}
.cr-m.bad{color:#ff7a88}.cr-sub{color:rgba(255,255,255,.8);font-size:.95rem}
.cr-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cr-hist{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px;min-height:30px}
.cr-hist i{font-style:normal;font-size:.8rem;font-weight:500;padding:4px 10px;border-radius:999px;background:var(--p2);border:1px solid var(--line)}
.cr-hist .w{color:var(--mint)}.cr-hist .m{color:var(--sun)}.cr-hist .l{color:var(--bad)}
.cr-m{font-family:'Inter',system-ui,sans-serif;font-size:1.8rem;line-height:1.3;text-shadow:3px 3px 0 rgba(0,0,0,.55)}.cr-sub{text-shadow:2px 2px 0 rgba(0,0,0,.55);font-weight:500}
.cr-wrap{background:#14110a}.cr-wrap canvas{background:#14110a}
.dc-stats{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.dc-stats>div{flex:1 1 100px;background:var(--p2);border:2px solid var(--line);border-radius:14px;padding:8px 12px}
.dc-stats span{display:block;color:var(--mute);font-size:.75rem}.dc-stats b{font-size:1.25rem;color:var(--sun)}
.dc-stage{position:relative;text-align:center;padding:16px 0 8px;border-radius:16px;background:radial-gradient(ellipse at 50% 0,#2a2310,transparent 70%);display:flex;justify-content:center;align-items:center;gap:14px}
.dc-diceicon{font-size:2.6rem;display:inline-block}.dc-diceicon.rolling{animation:dcspin .7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes dcspin{to{transform:rotate(360deg)}}
.dc-num{font-size:4.2rem;font-weight:600;font-variant-numeric:tabular-nums;min-width:5.2ch;color:var(--text);line-height:1.1}
.dc-num.rolling{color:var(--mute)}.dc-num.w{color:var(--mint);text-shadow:0 0 22px rgba(95,207,154,.55);animation:dcp .45s ease}
.dc-num.l{color:var(--bad);text-shadow:0 0 22px rgba(229,99,111,.5);animation:dcp .45s ease}
@keyframes dcp{0%{transform:scale(1.2)}100%{transform:scale(1)}}
.dc-float{position:absolute;left:50%;top:4px;transform:translateX(-50%);font-weight:600;font-size:1.3rem;opacity:0;pointer-events:none}
.dc-float.go{animation:dcf 1.3s ease-out}.dc-float.w{color:var(--mint)}.dc-float.l{color:var(--bad)}
@keyframes dcf{0%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-34px)}}
.dc-tw{position:relative;margin:44px 0 4px;height:34px}
.dc-pin{position:absolute;top:-38px;transform:translateX(-50%);text-align:center;opacity:0;pointer-events:none;z-index:3}
.dc-pin b{display:block;background:var(--glaze);color:#1a1405;border-radius:8px;padding:2px 9px;font-size:.82rem;font-variant-numeric:tabular-nums}
.dc-pin i{display:block;width:0;height:0;margin:0 auto;border:6px solid transparent;border-top-color:var(--glaze)}
.dc-pin.w b{background:var(--mint)}.dc-pin.w i{border-top-color:var(--mint)}.dc-pin.l b{background:var(--bad);color:#fff}.dc-pin.l i{border-top-color:var(--bad)}
.dc-track{position:absolute;left:15px;right:15px;top:11px;height:12px;border-radius:999px;border:2px solid var(--line)}
.dc-track.fw{animation:dcw .8s ease-out}.dc-track.fl{animation:dcl .8s ease-out}
@keyframes dcw{0%{box-shadow:0 0 0 0 rgba(95,207,154,.8)}100%{box-shadow:0 0 0 20px rgba(95,207,154,0)}}
@keyframes dcl{0%{box-shadow:0 0 0 0 rgba(229,99,111,.8)}100%{box-shadow:0 0 0 20px rgba(229,99,111,0)}}
.dc-r{-webkit-appearance:none;appearance:none;position:absolute;left:0;top:0;width:100%;height:34px;margin:0;background:transparent;cursor:pointer;z-index:2}
.dc-r::-webkit-slider-runnable-track{background:transparent;height:34px}
.dc-r::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:30px;height:30px;margin-top:2px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff0b3,#d4af37 60%,#8a6d14);border:3px solid #1a1405;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.dc-r::-moz-range-track{background:transparent;height:34px}
.dc-r::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#d4af37;border:3px solid #1a1405}
.dc-scale{display:flex;justify-content:space-between;color:var(--mute);font-size:.75rem;padding:0 10px}
.dc-mode{display:flex;gap:8px;margin:14px 0}.dc-mode .chip{flex:1;padding:10px}.dc-mode b{color:var(--sun)}
.dc-h{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px;min-height:28px}
.dc-h i{font-style:normal;font-size:.8rem;font-weight:500;padding:3px 10px;border-radius:999px;border:1px solid;background:var(--p2)}
.dc-h .w{color:var(--mint);border-color:rgba(95,207,154,.5)}.dc-h .l{color:var(--bad);border-color:rgba(229,99,111,.45)}
.pl-top{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px}
.pl-lv{display:flex;gap:8px;flex:1 1 300px}
.pl-lvb{flex:1;padding:8px 12px;border-radius:14px;border:2px solid var(--line);background:var(--p2);color:var(--text);font:inherit;cursor:pointer;text-align:left;transition:border-color .25s,background .25s,opacity .25s}
.pl-lvb b{display:block}.pl-lvb small{color:var(--mute);font-size:.72rem}.pl-lvb.on{border-color:var(--glaze);background:var(--bg)}.pl-lvb:disabled{opacity:.55;cursor:default}
.pl-cnt{display:flex;gap:6px;align-items:center;color:var(--mute);font-size:.85rem}
.pl-wrap{border-radius:20px;border:2px solid var(--line);overflow:hidden;background:#0c0c0d}
.pl-wrap canvas{display:block;width:100%;height:auto;background:transparent;border-radius:0}
.pl-hist{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px;min-height:28px}
.pl-hist i{font-style:normal;font-size:.8rem;font-weight:600;padding:3px 10px;border-radius:8px}
#bj .bj-table{position:relative;background:radial-gradient(ellipse at 50% 0,#26262a,#0c0c0d 75%);border:2px solid #b8922a;border-radius:22px;padding:16px 14px 18px;box-shadow:inset 0 0 0 6px #0c0c0d,inset 0 0 0 7px rgba(184,146,42,.4)}
.bj-rule{text-align:center;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(212,175,55,.75);margin-bottom:12px}
.bj-tag{text-align:center;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.bj-mid{min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:8px 0 10px;padding:6px 0;border-top:1px solid rgba(212,175,55,.22);border-bottom:1px solid rgba(212,175,55,.22)}
.bj-mid .msg{margin:0;min-height:1.4em;font-size:1.05rem}.bj-sd{font-size:.8rem;color:var(--sun);min-height:1.2em;text-align:center}
#bj .spots{display:flex;gap:10px;margin-top:16px;justify-content:center;align-items:stretch}
#bj .spot{flex:1 1 0;max-width:210px;min-width:0;width:auto;height:auto;border-radius:14px;border:2px solid rgba(212,175,55,.4);background:rgba(0,0,0,.35);padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text);cursor:pointer;transition:border-color .2s,background .2s}
#bj .spot.main{flex:1.35;border-color:rgba(212,175,55,.75)}
#bj .spot:hover{border-color:var(--sun)}#bj .spot.has{background:rgba(212,175,55,.12);border-color:var(--glaze)}
.spot small{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.spot .amt{font-size:1.35rem;color:var(--sun);line-height:1.25}.spot .hnt{font-size:.66rem;color:var(--mute);text-align:center}
.hl{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:28px}
.bj-tot{background:#0c0c0d;border:1px solid rgba(212,175,55,.6);color:#fff;border-radius:999px;padding:1px 11px;font-weight:600;font-size:.95rem;min-width:34px;text-align:center}
.bj-tot.bust{border-color:var(--bad);color:var(--bad)}.bj-bet{font-size:.78rem;color:var(--mute)}
.bj-res{font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.bj-res.w{background:var(--mint);color:#052a1f}.bj-res.l{background:var(--bad);color:#fff}.bj-res.n{background:#44444a;color:#fff}
.bj-panel{margin-top:14px;background:var(--p1);border:2px solid var(--line);border-radius:16px;padding:12px}
#bj[data-ph="bet"] .bj-actions{display:none}#bj:not([data-ph="bet"]) .bj-bets{display:none}
.bj-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bjb{padding:15px 6px;border-radius:12px;border:2px solid var(--line);background:var(--p2);color:var(--text);font:inherit;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s}
.bjb:hover:not(:disabled){border-color:var(--glaze);color:var(--sun)}.bjb:disabled{opacity:.35;cursor:default}
.bj-deal{width:100%;padding:14px;font-size:1.05rem}
.bj-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;justify-content:space-between}
.bj-presets{display:flex;gap:6px;flex-wrap:wrap}.bj-sum{color:var(--mute);font-size:.85rem;margin-right:4px}
.pt h4{margin:0 0 6px;font-size:.9rem;color:var(--sun)}.pt div{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--line);font-size:.82rem}
.pt b{color:var(--text)}.pt p{margin:6px 0 0;font-size:.72rem}
.bj-speed{display:flex;gap:6px;align-items:center;justify-content:center;margin-bottom:10px;color:var(--mute);font-size:.78rem}.bj-speed .chip{padding:5px 11px;font-size:.78rem}
.hl-table{background:radial-gradient(ellipse at 50% 0,#26262a,#0c0c0d 75%);border:2px solid #b8922a;border-radius:22px;padding:14px 14px 16px;box-shadow:inset 0 0 0 6px #0c0c0d,inset 0 0 0 7px rgba(184,146,42,.4);transition:box-shadow .5s}
.hl-table.win{box-shadow:inset 0 0 0 6px #0c0c0d,inset 0 0 0 7px rgba(184,146,42,.4),0 0 34px rgba(212,175,55,.45)}
.hl-table.lose{box-shadow:inset 0 0 0 6px #0c0c0d,inset 0 0 0 7px rgba(184,146,42,.4),0 0 34px rgba(229,99,111,.45)}
.hl-shake{animation:hlsh .5s}@keyframes hlsh{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.hl-top{display:flex;gap:8px;margin-bottom:12px}.hl-stat{flex:1;background:rgba(0,0,0,.35);border:1px solid rgba(212,175,55,.3);border-radius:12px;padding:7px 12px}
.hl-stat span{display:block;color:var(--mute);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.hl-stat b{font-size:1.2rem;color:var(--sun);display:inline-block}
.hl-stat b.pop{animation:hlpop .45s ease}@keyframes hlpop{0%{transform:scale(1.3);color:#fff}100%{transform:scale(1)}}
.hl-stage{--cs:16px;display:flex;justify-content:center;align-items:center;gap:26px;padding:10px 0 6px}
.hl-slot,.hl-deck{font-size:var(--cs);width:7em;height:9.75em;border-radius:.7em;position:relative}
.hl-slot{border:2px dashed rgba(212,175,55,.3)}.hl-slot.nx::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;color:rgba(212,175,55,.35);font-size:3em;font-weight:600}
.hl-slot:has(.hlw)::after{display:none}
.hl-deck{background:repeating-linear-gradient(45deg,#d4af37 0 .4em,#1a1405 .4em .8em);border:.3em solid #f4efe1;box-shadow:.25em .25em 0 #d8d2e0,.5em .5em 0 #b9b2c4,.8em .8em 1.2em rgba(0,0,0,.5);display:grid;place-items:end center;color:#fff;font-weight:600;font-size:calc(var(--cs) * .75)}
.hl-deck span{background:rgba(0,0,0,.6);padding:.1em .5em;border-radius:.4em;margin-bottom:.4em}
.hlw{font-size:var(--cs);width:7em;height:9.75em;position:relative;perspective:50em}.hlw.mini{font-size:6px}
.hlc{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s ease-in-out}.hlc.down{transform:rotateY(180deg)}
.hlf{position:absolute;inset:0;border-radius:.7em;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 .2em .6em rgba(0,0,0,.5)}
.hlfr{background:#fffdf8;color:#1d1d26}.hlfr.rd{color:#d62839}
.hlfr .cn{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;font-weight:600}.hlfr .cn b{font-size:1.5em}.hlfr .cn i{font-style:normal;font-size:1.3em}
.hlfr .tl{top:.45em;left:.5em}.hlfr .br{bottom:.45em;right:.5em;transform:rotate(180deg)}
.hlfr .cs{position:absolute;inset:0;display:grid;place-items:center;font-size:4.2em}
.hlb{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#d4af37 0 .4em,#1a1405 .4em .8em);border:.3em solid #f4efe1}
.hl-trail{display:flex;gap:8px;overflow-x:auto;min-height:86px;padding:8px 4px 4px;justify-content:flex-start;scroll-behavior:smooth}
.hl-mini{display:flex;flex-direction:column-reverse;align-items:center;gap:3px;flex:0 0 auto}
.hl-ar{font-size:.7rem;font-weight:600;padding:1px 7px;border-radius:999px;background:#44444a;color:#fff}.hl-ar.up{background:var(--mint);color:#052a1f}.hl-ar.down{background:var(--bad)}
.hl-msg{margin:6px 0 0;text-align:center;min-height:1.5em}
.hl-panel{margin-top:14px;background:var(--p1);border:2px solid var(--line);border-radius:16px;padding:12px}
#hilo[data-ph="bet"] .hl-play{display:none}#hilo:not([data-ph="bet"]) .hl-bets{display:none}
.hl-choices{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-bottom:8px}
.hl-ch{padding:12px 8px;border-radius:14px;border:2px solid var(--line);background:var(--p2);color:var(--text);font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:2px;align-items:center;transition:border-color .2s}
.hl-ch b{font-size:1.05rem}.hl-ch small{color:var(--sun);font-size:.78rem}.hl-ch:hover:not(:disabled){border-color:var(--glaze)}.hl-ch:disabled{opacity:.35;cursor:default}
.hl-ch.sk{padding:12px 16px;justify-content:center}
@media (max-width:520px){.hl-stage{--cs:12px;gap:14px}}

/* --- Daily case modal --- */
.dcm .md{width:min(760px,94vw)}.dc-win{position:relative;overflow:hidden;border-radius:14px;background:#0c0b0e;border:2px solid var(--line);height:164px;margin:8px 0}
.dc-win:before,.dc-win:after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}.dc-win:before{left:0;background:linear-gradient(90deg,#0c0b0e,transparent)}.dc-win:after{right:0;background:linear-gradient(270deg,#0c0b0e,transparent)}
.dc-ptr{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--sun,#e8b84a);z-index:3;box-shadow:0 0 12px var(--sun,#e8b84a)}
.dc-ptr:before{content:"";position:absolute;top:-1px;left:-6px;border:7px solid transparent;border-top-color:var(--sun,#e8b84a)}
.dc-strip{display:flex;gap:8px;padding:10px 0;position:absolute;left:0;top:0;will-change:transform}
.dc-it{flex:0 0 112px;height:144px;border-radius:12px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 40%,var(--rg),transparent 68%),repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 7px),linear-gradient(180deg,#1f1d25,#0f0f13);border:1px solid #2e2b36;border-bottom:4px solid var(--rc);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1px;padding-bottom:8px}
.dc-it:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 38%);pointer-events:none}.dc-it img{width:88px;height:88px;position:absolute;top:8px;left:12px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.5))}
.dc-it b{font-size:1.1rem;color:#fff;font-weight:600;position:relative}.dc-it small{color:var(--rc);font-size:.64rem;letter-spacing:.06em;position:relative}.dc-it.win{box-shadow:0 0 26px var(--rc),inset 0 0 22px var(--rg)}
#dcc{display:block;width:100%;height:auto;margin:4px 0 0}.dc-ptr.tick:before{animation:dctick .16s ease-out}@keyframes dctick{0%{transform:translateY(-5px) rotate(-14deg)}100%{transform:none}}
.dc-tab{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px;margin:6px 0 12px}.dc-tab div{background:var(--p1);border:1px solid var(--line);border-bottom:3px solid var(--rc);border-radius:10px;padding:7px 4px;text-align:center;font-size:.82rem}.dc-tab span{display:block;color:var(--rc);font-size:.74rem}

/* --- Mines --- */
.mn-wrap{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:18px;align-items:start}@media(max-width:820px){.mn-wrap{grid-template-columns:1fr}}
.mn-side{display:flex;flex-direction:column;gap:12px}.mn-ctl,.mn-stats{background:var(--p1);border:2px solid var(--line);border-radius:16px;padding:14px}
.mn-lab{display:flex;justify-content:space-between;align-items:center;color:var(--mute);font-size:.9rem}.mn-lab b{color:var(--sun);font-size:1.3rem}
#mc{width:100%;margin:10px 0 2px;accent-color:#d4af37}.mn-ends{display:flex;justify-content:space-between;color:var(--mute);font-size:.72rem}
.mn-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.mn-chips button{background:var(--p2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:5px 11px;font:inherit;cursor:pointer}.mn-chips button.on{border-color:var(--glaze);color:var(--sun)}.mn-chips button:disabled,#mc:disabled{opacity:.45;cursor:default}
.mn-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mn-stats span{display:block;color:var(--mute);font-size:.74rem}.mn-stats b{font-size:1.1rem}#mmu{color:var(--sun)}
.mn-btns{display:flex;flex-wrap:wrap;gap:8px}.mn-btns .act{flex:1}
.mn-board{display:flex;justify-content:center;background:radial-gradient(ellipse at 50% 20%,rgba(212,175,55,.12),transparent 70%),var(--p1);border:2px solid var(--line);border-radius:18px;padding:16px}
#mg{max-width:520px;width:100%;gap:10px;margin:0}
#mg .tile{padding:0;display:grid;place-items:center;border-radius:14px;border:2px solid #34301f;background:radial-gradient(circle at 35% 28%,#3a3524,#181610 70%);box-shadow:0 5px 0 #0b0a07,inset 0 1px 0 rgba(255,255,255,.08);transition:transform .15s,box-shadow .15s}
#mg .tile:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 8px 0 #0b0a07,0 0 16px rgba(212,175,55,.25);border-color:var(--glaze)}#mg .tile:not(:disabled):active{transform:translateY(2px);box-shadow:0 2px 0 #0b0a07}
#mg .tile svg{width:68%;height:68%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
#mg .tile.safe{background:radial-gradient(circle at 50% 40%,#1c6f55,#0a2f24 75%);border-color:#37e3a5;box-shadow:0 0 18px rgba(55,227,165,.45),inset 0 0 14px rgba(55,227,165,.25);animation:mpop .35s cubic-bezier(.3,1.6,.5,1)}
#mg .tile.mine{background:radial-gradient(circle at 50% 40%,#8a1c24,#2a0a0d 75%);border-color:#ff4a56;box-shadow:0 0 22px rgba(255,74,86,.6);animation:mshake .45s}
#mg .tile.ghost{opacity:.4;animation:mfade .3s}#mg .tile.mine.ghost{background:#1c1012;border-color:#4a2024;box-shadow:none}
@keyframes mpop{from{transform:scale(.7)}to{transform:scale(1)}}@keyframes mshake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}@keyframes mfade{from{opacity:0}}
.mch{width:100%;height:100%;display:block;object-fit:cover;image-rendering:pixelated;border-radius:inherit}
.hm-av,.cav{overflow:hidden}.hm-av .mch,.cav .mch{border-radius:inherit}
.rav{width:28px;height:28px;border-radius:6px;overflow:hidden;display:block}

/* --- Profile --- */
.pf-wrap{display:grid;grid-template-columns:210px 1fr;gap:16px;align-items:start}@media(max-width:820px){.pf-wrap{grid-template-columns:1fr}.pf-tabs{flex-direction:row!important;overflow-x:auto}}
.pf-tabs{display:flex;flex-direction:column;gap:6px}.pf-tabs button{display:flex;align-items:center;gap:10px;white-space:nowrap;padding:10px 12px;border-radius:12px;border:2px solid transparent;background:transparent;color:var(--mute);font:inherit;font-weight:500;cursor:pointer;text-align:left}
.pf-tabs button:hover{background:var(--p2);color:var(--text)}.pf-tabs button.on{background:var(--p2);border-color:var(--glaze);color:var(--sun)}
.pf-pane{display:none;flex-direction:column;gap:12px}.pf-pane.on{display:flex}.pf-pane h3{margin:0}
.pf-card{background:var(--p2);border:2px solid var(--line);border-radius:14px;padding:12px 14px}.pf-code{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}.pf-code b{font-size:1.4rem;letter-spacing:.12em;color:var(--sun)}
.pf-rtp{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;margin-top:8px}.pf-rtp div{display:flex;justify-content:space-between;background:var(--p1);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:.85rem}
.lbl{display:flex;flex-direction:column;gap:6px}.lbr{display:grid;grid-template-columns:34px 32px 1fr auto;gap:10px;align-items:center;padding:8px 12px;background:var(--p2);border:2px solid var(--line);border-radius:12px}.lbr.me{border-color:var(--glaze)}.lbr b{color:var(--sun)}.lbr .rav{width:30px;height:30px}
.pf-sw{display:flex;align-items:center;gap:12px;cursor:pointer}.pf-sw input{display:none}.pf-sw i{width:52px;height:30px;border-radius:999px;background:var(--p2);border:2px solid var(--line);position:relative;transition:background .2s}.pf-sw i:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--mute);transition:transform .2s,background .2s}
.pf-sw input:checked+i{background:rgba(212,175,55,.3);border-color:var(--glaze)}.pf-sw input:checked+i:after{transform:translateX(22px);background:var(--sun)}
.pf-themes{display:flex;gap:12px;flex-wrap:wrap}.pf-th{display:flex;flex-direction:column;gap:8px;align-items:center;padding:12px;border-radius:14px;border:2px solid var(--line);background:var(--p2);color:var(--text);font:inherit;cursor:pointer}.pf-th.on{border-color:var(--glaze)}
.pf-th i{display:block;width:120px;height:72px;border-radius:10px;border:1px solid #888}.pf-th i.d{background:linear-gradient(135deg,#0b0b0c 55%,#d4af37 55%)}.pf-th i.l{background:linear-gradient(135deg,#f5f2ea 55%,#b08a17 55%)}

/* --- PvP Duels --- */
.fc-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}.fc-bar{flex:1;height:8px;background:var(--p2);border-radius:99px;overflow:hidden}.fc-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e5424c,#f2cf66)}
.fc-wrap canvas{display:block;width:100%;height:auto;border-radius:16px;border:2px solid var(--glaze);background:#0a0806}
.fc-cards{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin:12px 0}@media(max-width:640px){.fc-cards{grid-template-columns:1fr}.fc-vs{display:none}}
.fc-card{--fc:#d4af37;background:var(--p1);border:2px solid var(--line);border-top:5px solid var(--fc);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .2s,border-color .2s}.fc-card.pick{border-color:var(--fc);box-shadow:0 0 22px var(--fc)}
.fc-card b{font-size:1.05rem}.fc-odds{font-size:1.8rem;font-weight:600;color:var(--sun)}
.fc-st div{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;font-size:.72rem;color:var(--mute);margin:3px 0}.fc-st i{display:block;height:7px;background:var(--p2);border-radius:99px;overflow:hidden}.fc-st u{display:block;height:100%;background:var(--fc);border-radius:99px;text-decoration:none}
.fc-vs{align-self:center;font-weight:800;font-size:1.4rem;color:var(--sun)}
.fc-hist{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.fc-hist i{font-style:normal;font-size:.78rem;padding:3px 10px;border-radius:99px;border:2px solid var(--line);background:var(--p2)}
.fc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.fc-tab{padding:9px 16px;border-radius:12px;border:2px solid var(--line);background:var(--p2);color:var(--text);font:inherit;font-weight:500;cursor:pointer}.fc-tab.on{border-color:var(--glaze);color:var(--sun)}
.fc-id{display:flex;align-items:center;gap:10px}.fc-id canvas{width:48px;height:48px;image-rendering:pixelated;border-radius:6px;border:2px solid var(--line)}

/* --- 3D dice · playing cards · roulette table --- */
.d3-scene{width:120px;height:120px;perspective:520px;position:relative;display:inline-block;flex:0 0 auto}
.d3-cube{position:absolute;left:28px;top:20px;width:64px;height:64px;transform-style:preserve-3d;will-change:transform}
.d3f{position:absolute;inset:0;background-size:100% 100%;border-radius:10px;backface-visibility:hidden}
.d3f.f1{transform:translateZ(32px)}.d3f.f2{transform:rotateY(90deg) translateZ(32px)}.d3f.f3{transform:rotateX(90deg) translateZ(32px)}.d3f.f4{transform:rotateX(-90deg) translateZ(32px)}.d3f.f5{transform:rotateY(-90deg) translateZ(32px)}.d3f.f6{transform:rotateY(180deg) translateZ(32px)}
.d3-sh{position:absolute;left:50%;bottom:4px;width:74px;height:16px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.65),transparent 70%);transform:translateX(-50%)}
#mg .tile{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(0,0,0,.3)),var(--stone,#2c2c34);background-size:auto,96px 96px;border:2px solid #55524a;box-shadow:0 6px 0 #17150f,0 10px 16px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.22),inset 0 -4px 8px rgba(0,0,0,.4)}
#mg .tile img.mi{width:80%;height:80%;filter:drop-shadow(0 4px 5px rgba(0,0,0,.6));animation:mpopi .55s cubic-bezier(.3,1.7,.5,1)}
#mg .tile.safe{background:radial-gradient(circle at 50% 42%,rgba(55,227,165,.55),rgba(5,40,28,.95) 80%),var(--stone,#2c2c34);background-size:auto,96px 96px;animation:mflip .55s cubic-bezier(.3,1.3,.5,1)}
#mg .tile.mine{background:radial-gradient(circle at 50% 45%,rgba(255,120,30,.75),rgba(60,10,6,.96) 80%),var(--stone,#2c2c34);background-size:auto,96px 96px;animation:mflip .35s ease-out,mshake .45s .2s}
#mg .tile.ghost img.mi{opacity:.6;transform:scale(.8);animation:none}
@keyframes mflip{0%{transform:perspective(400px) rotateY(90deg) scale(.85)}60%{transform:perspective(400px) rotateY(-12deg) scale(1.08)}100%{transform:none}}
@keyframes mpopi{from{transform:scale(.2) rotate(-25deg)}}
.mn-board.mshk{animation:mbshake .5s}@keyframes mbshake{0%,100%{transform:none}15%{transform:translate(-5px,3px)}35%{transform:translate(5px,-3px)}55%{transform:translate(-3px,-2px)}75%{transform:translate(3px,2px)}}
.fr,.hlfr{background:var(--paper,none),linear-gradient(145deg,#fffef8,#ece4d0);color:#1d1d26;border:1px solid rgba(0,0,0,.28)}
.f.fr{display:block}.fr.rd,.hlfr.rd{color:#c4202e}
.fr .cn,.hlfr .cn{color:inherit;background:none;cursor:default;position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;font-weight:700;font-family:Georgia,'Times New Roman',serif;z-index:2}
.fr .cn b{font-size:14px}.fr .cn i{font-style:normal;font-size:12px}.fr .tl{top:3px;left:4px}.fr .br{bottom:3px;right:4px;transform:rotate(180deg)}
.fr .pips,.hlfr .pips{position:absolute;left:25%;right:25%;top:16%;bottom:16%}.fr .pips span,.hlfr .pips span{position:absolute;transform:translate(-50%,-50%);line-height:1;font-size:13px;font-weight:400;display:block}
.fr .ace,.hlfr .ace{position:absolute;inset:0;display:grid;place-items:center;font-size:34px}
.fr .face,.hlfr .face{position:absolute;left:18%;top:12%;width:64%;height:76%;border-radius:2px;box-shadow:0 0 0 1px rgba(120,90,20,.5)}
.hlfr .pips span{font-size:1.45em}.hlfr .pips{left:20%;right:20%}.hlfr .ace{font-size:5em}.hlfr .cn b{font-size:1.5em}.hlfr .cn i{font-size:1.3em;font-style:normal}.hlfr .tl{top:.35em;left:.45em}.hlfr .br{bottom:.35em;right:.45em;transform:rotate(180deg)}
.bk,.hlb,.shoe,.hl-deck{background:var(--cback,none) center/100% 100%,#5a0f1a!important;border:2px solid #f6f1e3}.hl-deck{border:.2em solid #f6f1e3}.hl-deck span{display:none}
.felt,.hl-table,#bj .bj-table{background:radial-gradient(ellipse at 50% 18%,rgba(255,255,255,.15),rgba(0,0,0,.55) 92%),var(--felt,#0e5a3a)!important;box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.tblw{background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.12),rgba(0,0,0,.55) 95%),var(--felt,#0e5a3a);border:4px solid #5a3a1c;border-radius:16px;padding:8px;box-shadow:inset 0 0 40px rgba(0,0,0,.65),0 6px 18px rgba(0,0,0,.5)}
.tc{border:2px solid rgba(255,255,255,.6);background:rgba(0,0,0,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 0 rgba(0,0,0,.35);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.tc.r{background:linear-gradient(180deg,#d63a45,#9a1a24)}.tc.n{background:linear-gradient(180deg,#2a2a2e,#0c0c0e)}.tc.v{background:linear-gradient(180deg,#1fb88a,#0c7a58)}.tc:hover{border-color:#ffe27a}
.tc i{right:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;display:grid;place-items:center;border-radius:50%;padding:0;font-weight:700;font-size:.66rem;color:#2b1d00;text-shadow:none;background:radial-gradient(circle,#fff6d0 0 46%,transparent 47%),conic-gradient(#d4af37 0 12.5%,#fff 0 25%,#d4af37 0 37.5%,#fff 0 50%,#d4af37 0 62.5%,#fff 0 75%,#d4af37 0 87.5%,#fff 0);box-shadow:0 3px 5px rgba(0,0,0,.6),inset 0 0 0 2px rgba(0,0,0,.25);z-index:2;pointer-events:none}

/* --- Cases --- */
#cases{--cc:212,175,55;padding:18px 18px 22px;background:radial-gradient(ellipse at 50% -10%,rgba(var(--cc),.1),transparent 55%),var(--p1)}
.cs-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.cs-ht h2{margin:0;font-size:1.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;background:linear-gradient(180deg,#fff3b8,#e8b84a 55%,#a8780f);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-ht p{margin:2px 0 0;color:var(--mute);font-size:.84rem}.cs-ht p b{color:#ffd45a;font-weight:600}
.cs-pills{display:flex;gap:6px;flex-wrap:wrap}.cs-pills span{font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--mute)}
.cs-pills span:first-child{color:#7fe3a0;border-color:rgba(127,227,160,.35)}
.cs-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:12px}
.cs-case{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:12px 8px 12px;border-radius:18px;border:1.5px solid var(--line);overflow:hidden;background:radial-gradient(ellipse at 50% 38%,rgba(var(--cc),.2),transparent 68%),linear-gradient(180deg,#1b1922,#0f0e13);color:inherit;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .25s}
.cs-case:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);transform:translateX(-120%);transition:transform .7s;pointer-events:none}
.cs-case:hover:not(:disabled):before{transform:translateX(120%)}
.cs-case img{width:100%;max-width:132px;height:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cs-case b{font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;margin-top:2px}.cs-case small{font-size:.68rem;color:var(--mute)}
.cs-case .cs-vol{position:absolute;top:8px;left:8px;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid rgba(var(--cc),.55);color:rgb(var(--cc))}
.cs-case .cs-top{position:absolute;top:6px;right:6px;width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(var(--cc),.8));animation:csfl 3s ease-in-out infinite}
@keyframes csfl{50%{transform:translateY(-3px) rotate(6deg)}}
.cs-case .cs-top.egg{filter:brightness(1.9) saturate(1.4) drop-shadow(0 0 7px #c24cff)}.cs-case:hover:not(:disabled){transform:translateY(-4px)}.cs-case:hover:not(:disabled) img{transform:scale(1.08) rotate(-2deg)}
.cs-case.on{border-color:rgb(var(--cc));box-shadow:0 0 0 1px rgba(var(--cc),.5),0 8px 30px rgba(var(--cc),.35),inset 0 0 30px rgba(var(--cc),.16);transform:translateY(-2px)}
.cs-case.on img{animation:csbob 2.6s ease-in-out infinite}@keyframes csbob{50%{transform:translateY(-4px)}}
.cs-case:disabled{opacity:.5;cursor:default}
.cs-stage{position:relative;border-radius:22px;border:1.5px solid rgba(var(--cc),.4);padding:8px 12px 12px;overflow:hidden;background:radial-gradient(ellipse at 50% 95%,rgba(var(--cc),.3),transparent 58%),radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.05),transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 2px,transparent 2px 6px),linear-gradient(180deg,#16131d,#09080c);box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 0 60px rgba(0,0,0,.45);transition:border-color .4s}
#csc{display:block;width:100%;height:auto;background:transparent;position:relative;z-index:1}
.cs-vig{position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 55%,transparent 55%,rgba(0,0,0,.5))}
.cs-info{position:absolute;z-index:3;top:12px;left:16px;font-size:.66rem;color:rgba(255,255,255,.6);letter-spacing:.09em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08)}
.cs-win{position:relative;z-index:3;margin:2px 0 0;border:1.5px solid rgba(var(--cc),.45);border-radius:16px;box-shadow:inset 0 0 34px rgba(0,0,0,.75),0 0 30px rgba(var(--cc),.16);background:linear-gradient(180deg,#0e0d13,#08070b)}
.cs-win:before{background:linear-gradient(90deg,#08070b,transparent)!important;width:90px!important}.cs-win:after{background:linear-gradient(270deg,#08070b,transparent)!important;width:90px!important}
.cs-win .dc-ptr{background:linear-gradient(180deg,#fff3b8,#ffc93d);box-shadow:0 0 14px #ffc93d,0 0 34px rgba(255,201,61,.55);width:3px}
.cs-ptb{position:absolute;left:50%;bottom:-1px;margin-left:-7px;z-index:4;border:7px solid transparent;border-bottom-color:#ffc93d;filter:drop-shadow(0 0 6px #ffc93d)}
.cs-bar{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.cs-stat{flex:1 1 110px;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:8px 14px;border-radius:14px;background:linear-gradient(180deg,#1a1820,#111016);border:1px solid var(--line)}
.cs-stat span{font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}.cs-stat b{font-size:1.05rem;font-weight:600}
.cs-stat:nth-child(2) b{color:#ffd45a}
.cs-sw{display:flex;align-items:center;gap:9px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#1a1820,#111016);color:var(--mute);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s}
.cs-sw i{position:relative;width:34px;height:18px;border-radius:99px;background:#2b2933;transition:background .2s}.cs-sw i:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#8a8796;transition:transform .2s,background .2s}
.cs-sw.on{color:#ffd45a;border-color:rgba(255,201,61,.5)}.cs-sw.on i{background:#6b4d0c}.cs-sw.on i:after{transform:translateX(16px);background:#ffc93d;box-shadow:0 0 8px #ffc93d}
.cs-open{flex:1.4 1 190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:10px 18px;border-radius:16px;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;position:relative;overflow:hidden;animation:csglow 2.4s ease-in-out infinite}
.cs-open small{font-size:.74rem;letter-spacing:.04em;opacity:.78;text-transform:none;font-weight:500}
.cs-open:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-130%);animation:cssh 3.2s ease-in-out infinite}
@keyframes cssh{55%,100%{transform:translateX(130%)}}@keyframes csglow{50%{box-shadow:0 0 26px rgba(255,201,61,.55)}}
.cs-open:disabled{animation:none;filter:saturate(.6)}.cs-open:disabled:before{display:none}
.cs-res{display:flex;align-items:center;gap:14px;margin:10px 0 2px;padding:10px 16px;border-radius:16px;border:1.5px solid var(--rc);background:radial-gradient(ellipse at 8% 50%,var(--rg),transparent 60%),linear-gradient(180deg,#1b1922,#0f0e13);box-shadow:0 0 28px var(--rg);animation:csin .5s cubic-bezier(.2,1.2,.3,1)}
@keyframes csin{from{opacity:0;transform:translateY(10px) scale(.96)}}
.cs-res img{width:60px;height:60px;filter:drop-shadow(0 0 12px var(--rc))}.cs-res div{flex:1;min-width:0}.cs-res em{font-style:normal;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rc)}
.cs-res b{display:block;font-size:1.1rem;font-weight:600}.cs-res span{font-size:1.5rem;font-weight:700;color:var(--rc)}.cs-res strong{font-size:1.25rem;font-weight:700;white-space:nowrap}.cs-res strong.w{color:#7fe3a0}.cs-res strong.l{color:#f07a85}
#csm.msg:empty{display:none}
.cs-sec{margin-top:16px}.cs-t{margin:0 0 8px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:600;display:flex;align-items:center;gap:10px}.cs-t:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.cs-h{display:flex;gap:6px;flex-wrap:wrap;min-height:40px}.cs-h:empty:before{content:"No drops yet — open your first crate.";color:var(--mute);font-size:.78rem;align-self:center}
.cs-hc{display:flex;align-items:center;gap:4px;padding:3px 9px 3px 4px;border-radius:10px;background:linear-gradient(180deg,#1b1922,#111016);border:1px solid var(--line);border-bottom:3px solid var(--rc);animation:fi .3s}
.cs-hc img{width:26px;height:26px}.cs-hc b{font-size:.78rem;font-weight:600;color:var(--rc)}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px}
.cs-ci{position:relative;display:flex;flex-direction:column;align-items:center;padding:12px 6px 9px;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 28%,var(--rg),transparent 70%),linear-gradient(180deg,#1f1d25,#0f0f13);border:1px solid #2e2b36;border-bottom:4px solid var(--rc);transition:transform .2s,box-shadow .2s}
.cs-ci:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);transform:translateX(-120%);transition:transform .6s;pointer-events:none}
.cs-ci:hover{transform:translateY(-3px);box-shadow:0 8px 22px var(--rg)}.cs-ci:hover:before{transform:translateX(120%)}
.cs-ci img{width:62px;height:62px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55));transition:transform .25s}.cs-ci:hover img{transform:scale(1.1) rotate(-3deg)}
.cs-ci b{font-size:.72rem;font-weight:600;color:#fff;margin-top:5px;text-align:center}.cs-ci span{font-size:1.05rem;font-weight:700;color:var(--rc)}.cs-ci small{font-size:.66rem;color:#9a98a6}.cs-ci i{font-style:normal;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rc);opacity:.9}
.cs-ci u{display:block;width:70%;height:3px;border-radius:2px;background:rgba(255,255,255,.08);margin:4px 0 3px;overflow:hidden;text-decoration:none}.cs-ci u:after{content:"";display:block;height:100%;width:var(--w);background:var(--rc);border-radius:2px}
.dc-it small{max-width:104px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.cs-ht h2{font-size:1.35rem}.cs-stat{flex:1 1 80px;padding:7px 10px}.cs-open{flex:1 1 100%}.cs-sw{padding:8px 12px}}

/* --- Daily race --- */
#race{--rg:212,175,55;padding:20px 20px 24px;background:radial-gradient(ellipse at 50% -8%,rgba(212,175,55,.14),transparent 55%),var(--p1)}
.rc-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.rc-ht h2{margin:0;font-size:1.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;background:linear-gradient(180deg,#fff3b8,#e8b84a 55%,#a8780f);-webkit-background-clip:text;background-clip:text;color:transparent}
.rc-ht p{margin:3px 0 0;color:var(--mute);font-size:.84rem;max-width:460px}
.rc-clock{min-width:190px;padding:10px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));display:flex;flex-direction:column;gap:3px}
.rc-clock span{font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:600}.rc-clock b{font-family:"Chakra Petch","Inter",sans-serif;font-size:1.8rem;font-weight:600;letter-spacing:.06em;color:#ffd45a;line-height:1;font-variant-numeric:tabular-nums}
.rc-clock i{display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:4px}.rc-clock u{display:block;height:100%;width:0;background:linear-gradient(90deg,#a8780f,#ffd45a);border-radius:3px;transition:width 1s linear;text-decoration:none}
.rc-pool{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:8px;margin:14px 0 6px}
.rc-pool div{padding:8px 14px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,#1a1820,#111016);display:flex;flex-direction:column;gap:2px}
.rc-pool span{font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600}.rc-pool b{font-family:"Chakra Petch","Inter",sans-serif;font-size:1.05rem;font-weight:600}
.rc-pool b.g{color:#ffd45a}.rc-pool b.s{color:#d6dde8}.rc-pool b.b{color:#e0975a}
.rc-pod{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:10px;align-items:end;margin:16px auto 12px;max-width:640px;padding-top:44px;position:relative}
.rc-pod:before{content:"";position:absolute;left:50%;top:30px;width:420px;height:300px;margin-left:-210px;background:radial-gradient(ellipse at 50% 20%,rgba(255,215,90,.22),transparent 65%);pointer-events:none}
.rc-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.rc-pl{display:flex;flex-direction:column;align-items:center;gap:3px;margin-bottom:8px;text-align:center;min-width:0;max-width:100%;position:relative;z-index:1}
.rc-pl b{font-size:.92rem;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rc-pl small{font-size:.68rem;color:var(--mute);font-variant-numeric:tabular-nums}
.rc-av{position:relative;width:64px;height:64px;border-radius:16px;overflow:hidden;border:2.5px solid var(--mc,#aaa);box-shadow:0 0 22px var(--mg,rgba(255,255,255,.2)),0 6px 14px rgba(0,0,0,.5);background:#1a1820;display:grid;place-items:center;font-size:1.8rem}
.rc-av .rav,.rc-av img{width:100%;height:100%;border-radius:0;display:block}.rc-av img{image-rendering:pixelated}
.rc-slot.r1 .rc-av{width:84px;height:84px;border-radius:20px;--mc:#ffd45a;--mg:rgba(255,200,60,.65)}.rc-slot.r2{--mc:#d6dde8;--mg:rgba(214,221,232,.45)}.rc-slot.r3{--mc:#e0975a;--mg:rgba(224,151,90,.45)}
.rc-slot.r2 .rc-av{--mc:#d6dde8;--mg:rgba(214,221,232,.45)}.rc-slot.r3 .rc-av{--mc:#e0975a;--mg:rgba(224,151,90,.45)}
.rc-crown{position:absolute;top:-34px;font-size:1.9rem;filter:drop-shadow(0 4px 8px rgba(255,200,60,.7));animation:rccr 2.6s ease-in-out infinite}@keyframes rccr{50%{transform:translateY(-4px) rotate(5deg)}}
.rc-ped{width:100%;border-radius:14px 14px 4px 4px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:12px;gap:2px;position:relative;overflow:hidden;transform-origin:bottom}
.rc-ped:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-130%);animation:rcsh 4.5s ease-in-out infinite}@keyframes rcsh{60%,100%{transform:translateX(130%)}}
.rc-ped em{font-style:normal;font-family:"Chakra Petch","Inter",sans-serif;font-weight:700;font-size:2.4rem;line-height:1;text-shadow:0 2px 0 rgba(255,255,255,.35),0 -1px 0 rgba(0,0,0,.4)}
.rc-ped span{font-size:.8rem;font-weight:600;letter-spacing:.04em;opacity:.9}
.rc-slot.r1 .rc-ped{height:150px;background:linear-gradient(180deg,#ffe58a,#e0a418 55%,#8a6208);color:#4a3203;box-shadow:0 0 38px rgba(255,200,60,.35)}
.rc-slot.r2 .rc-ped{height:112px;background:linear-gradient(180deg,#f2f5fa,#aab4c4 55%,#5f6a7c);color:#2a313e}
.rc-slot.r3 .rc-ped{height:84px;background:linear-gradient(180deg,#f0b27a,#c27a3a 55%,#6e3f15);color:#3d2008}
.rc-slot.empty .rc-ped{filter:grayscale(.85) brightness(.55)}.rc-slot.empty .rc-av{border-style:dashed;--mc:#555;--mg:transparent;color:#777}.rc-slot.empty .rc-pl b{color:var(--mute)}
.rc-slot.me .rc-av{outline:2px solid #5fd36b;outline-offset:3px}
.rc-pod.rise .rc-ped{animation:rcup .9s cubic-bezier(.2,1,.3,1) both}.rc-pod.rise .rc-slot.r1 .rc-ped{animation-delay:.25s}.rc-pod.rise .rc-slot.r3 .rc-ped{animation-delay:.1s}
.rc-pod.rise .rc-pl{animation:rcpl .7s cubic-bezier(.2,1.2,.3,1) both;animation-delay:.7s}@keyframes rcup{from{transform:scaleY(0)}}@keyframes rcpl{from{opacity:0;transform:translateY(24px) scale(.8)}}
.rc-ped:before{animation-name:rcsh}
.rc-me{display:none;align-items:center;gap:14px;padding:12px 16px;border-radius:16px;border:1.5px solid rgba(95,211,107,.45);background:radial-gradient(ellipse at 0% 50%,rgba(95,211,107,.14),transparent 60%),linear-gradient(180deg,#1a1d1b,#101311);margin:6px 0 4px}.rc-me.on{display:flex}
.rc-mr{font-family:"Chakra Petch","Inter",sans-serif;font-size:1.9rem;font-weight:700;color:#7fe3a0;min-width:56px;text-align:center}
.rc-mt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.rc-mt b{font-size:.92rem}.rc-mt span{font-size:.76rem;color:var(--mute)}
.rc-mt i,.rc-rm i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:3px}.rc-mt u,.rc-rm u{display:block;height:100%;background:linear-gradient(90deg,#3fa66a,#7fe3a0);border-radius:3px;text-decoration:none;transition:width .6s}
.rc-mp{text-align:right;display:flex;flex-direction:column;gap:1px}.rc-mp small{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}.rc-mp b{font-family:"Chakra Petch","Inter",sans-serif;font-size:1.1rem;color:#ffd45a}
.rc-sec{margin-top:14px}
.rr{display:grid;grid-template-columns:44px 38px 1fr auto;gap:12px;align-items:center;padding:8px 14px;background:linear-gradient(180deg,#1a1820,#111016);border:1px solid var(--line);border-radius:12px;transition:transform .15s,border-color .2s}
.rr:hover{transform:translateX(3px);border-color:rgba(212,175,55,.4)}.rr.me{border-color:rgba(95,211,107,.55);background:linear-gradient(180deg,#18201b,#101311)}
.rc-rk{font-family:"Chakra Petch","Inter",sans-serif;font-weight:700;color:var(--mute);font-size:1rem}.rc-av.sm{width:36px;height:36px;border-radius:9px;border-width:1.5px;--mc:#3a3745;--mg:transparent;box-shadow:none}
.rc-rm{min-width:0}.rc-rm b{font-weight:600;font-size:.88rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rc-rm u{width:var(--sh);background:linear-gradient(90deg,#a8780f,#ffd45a)}
.rr strong{font-family:"Chakra Petch","Inter",sans-serif;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
@media(max-width:600px){.rc-pool{grid-template-columns:1fr 1fr}.rc-pod{gap:6px}.rc-slot.r1 .rc-av{width:68px;height:68px}.rc-av{width:52px;height:52px}.rc-ped em{font-size:1.9rem}.rc-ht h2{font-size:1.35rem}.rr{grid-template-columns:34px 34px 1fr auto;gap:8px}}

/* --- Chicken Road · Tower · Pool --- */
#chicken{--cc:255,201,61;padding:18px 18px 22px;background:radial-gradient(ellipse at 50% -10%,rgba(var(--cc),.1),transparent 55%),var(--p1)}
.ck-diff{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.ck-d{--c:95,211,107;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:9px 6px;border-radius:14px;border:1.5px solid var(--line);background:linear-gradient(180deg,#1b1922,#0f0e13);color:var(--text);cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.ck-d.m{--c:255,201,61}.ck-d.h{--c:255,138,61}.ck-d.x{--c:255,77,94}
.ck-d b{font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--c))}.ck-d small{font-size:.66rem;color:var(--mute)}
.ck-d:hover:not(:disabled){transform:translateY(-2px)}.ck-d.on{border-color:rgb(var(--c));box-shadow:0 0 22px rgba(var(--c),.3),inset 0 0 22px rgba(var(--c),.12);background:radial-gradient(ellipse at 50% 0%,rgba(var(--c),.18),transparent 70%),linear-gradient(180deg,#1b1922,#0f0e13)}.ck-d:disabled:not(.on){opacity:.45;cursor:default}
.ck-stage{padding:0;border-color:rgba(255,201,61,.35)}.ck-stage #csc,.ck-stage canvas{width:100%;height:auto;display:block;background:transparent}
.ck-stage .cs-info{top:auto;bottom:10px}.ck-stage .cs-vig{background:radial-gradient(ellipse at 50% 55%,transparent 62%,rgba(0,0,0,.45))}
.ck-out{flex:1 1 200px;border-radius:16px!important;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase}
#chicken .cs-open{flex:1.4 1 220px}
@media(max-width:600px){.ck-diff small{font-size:.58rem}.ck-out{flex:1 1 100%}}
#tower{--cc:255,201,61;padding:18px 18px 22px;background:radial-gradient(ellipse at 50% -10%,rgba(var(--cc),.1),transparent 55%),var(--p1)}
.tw-d{--c:95,211,107;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:9px 6px;border-radius:14px;border:1.5px solid var(--line);background:linear-gradient(180deg,#1b1922,#0f0e13);color:var(--text);cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.tw-d.m{--c:255,201,61}.tw-d.h{--c:255,77,94}.tw-d b{font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--c))}.tw-d small{font-size:.64rem;color:var(--mute);text-align:center}
.tw-d:hover:not(:disabled){transform:translateY(-2px)}.tw-d.on{border-color:rgb(var(--c));box-shadow:0 0 22px rgba(var(--c),.3),inset 0 0 22px rgba(var(--c),.12);background:radial-gradient(ellipse at 50% 0%,rgba(var(--c),.18),transparent 70%),linear-gradient(180deg,#1b1922,#0f0e13)}.tw-d:disabled:not(.on){opacity:.45;cursor:default}
#twdf{grid-template-columns:repeat(3,1fr)}
.tw-wrap{max-width:560px;margin:0 auto 12px;border-radius:20px;padding:10px 14px 14px;border:1.5px solid rgba(255,201,61,.3);background:radial-gradient(ellipse at 50% 0%,rgba(255,201,61,.14),transparent 55%),repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 2px,transparent 2px 6px),linear-gradient(180deg,#16131d,#09080c);box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 0 50px rgba(0,0,0,.4)}
.tw-top{text-align:center;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#3d2a02;padding:7px;border-radius:10px;margin-bottom:10px;background:linear-gradient(180deg,#ffe58a,#e0a418 60%,#a8780f);box-shadow:0 0 22px rgba(255,200,60,.35)}
.tw-board{display:flex;flex-direction:column;gap:7px;position:relative}
.tw-board.shake{animation:twsh .5s}@keyframes twsh{20%{transform:translate(-6px,2px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,3px)}80%{transform:translate(3px,-2px)}}
.tw-r{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center;transition:opacity .3s,transform .3s}
.tw-r.off{opacity:.5}.tw-r.cur{opacity:1}.tw-r.done{opacity:1}
.tw-m{font-family:"Chakra Petch","Inter",sans-serif;font-weight:700;font-size:.92rem;text-align:center;padding:6px 0;border-radius:9px;background:rgba(40,26,10,.7);border:1px solid rgba(200,150,80,.35);color:#c9a878}
.tw-r.cur .tw-m{background:#6a4520;border-color:#ffd45a;color:#ffe9a0;box-shadow:0 0 14px rgba(255,201,61,.4)}.tw-r.done .tw-m{background:#d9a517;border-color:#ffe27a;color:#3d2a02}
.tw-ts{display:flex;gap:7px}
.tw-t{position:relative;flex:1;height:50px;padding:0;border:0;background:none;cursor:default;perspective:400px}
.tw-f,.tw-b{position:absolute;inset:0;border-radius:9px;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .2s;backface-visibility:hidden}
.tw-f{background:var(--tt) 0 0/48px 48px;image-rendering:pixelated;box-shadow:inset 0 3px 0 rgba(255,255,255,.2),inset 0 -4px 0 rgba(0,0,0,.4),0 3px 0 rgba(0,0,0,.5),0 5px 10px rgba(0,0,0,.4);border:1px solid #2a2a30}
.tw-b{transform:rotateX(-180deg);display:grid;place-items:center;overflow:hidden}.tw-b img{width:38px;height:38px;image-rendering:pixelated;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.tw-t.rev .tw-f{transform:rotateX(180deg)}.tw-t.rev .tw-b{transform:rotateX(0)}
.tw-t.safe .tw-b{background:radial-gradient(circle at 50% 40%,rgba(80,230,220,.5),rgba(10,60,64,.9));border:1.5px solid #4ae8ee;box-shadow:0 0 18px rgba(74,232,238,.5)}
.tw-t.bad .tw-b{background:radial-gradient(circle at 50% 40%,rgba(255,110,80,.55),rgba(80,12,8,.95));border:1.5px solid #ff6a4d;box-shadow:0 0 18px rgba(255,90,60,.55)}
.tw-t.ghost .tw-b{opacity:.55;box-shadow:none}.tw-t.ghost .tw-b img{width:30px;height:30px}
.tw-r.cur .tw-t:not(.rev){cursor:pointer}.tw-r.cur .tw-t:not(.rev) .tw-f{animation:twpl 1.8s ease-in-out infinite}@keyframes twpl{50%{box-shadow:inset 0 3px 0 rgba(255,255,255,.25),inset 0 -4px 0 rgba(0,0,0,.4),0 0 0 1.5px rgba(255,201,61,.7),0 0 14px rgba(255,201,61,.35),0 5px 10px rgba(0,0,0,.4)}}
.tw-r.cur .tw-t:not(.rev):hover .tw-f{box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -4px 0 rgba(0,0,0,.35),0 0 0 2px #ffd45a,0 0 20px rgba(255,201,61,.55),0 5px 10px rgba(0,0,0,.4);filter:brightness(1.25)}
.tw-fx.boom{position:absolute;inset:-10px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff 0,#ffd45a 25%,#ff6a2a 55%,transparent 72%);animation:twb .7s ease-out forwards;z-index:3}@keyframes twb{from{transform:scale(.2);opacity:1}to{transform:scale(2.4);opacity:0}}
.tw-t u{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;background:#ffe27a;border-radius:1px;pointer-events:none;z-index:3;text-decoration:none;animation:twp .7s ease-out forwards}@keyframes twp{to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.tw-rnd{height:46px;border-radius:14px;padding:0 18px}
#tower .cs-open{flex:1.4 1 200px}#tower .ck-out{flex:1 1 180px}
@media(max-width:600px){.tw-d small{font-size:.56rem}.tw-r{grid-template-columns:50px 1fr}.tw-t{height:44px}}
#pool{--cc:255,201,61;padding:18px 18px 22px;background:radial-gradient(ellipse at 50% -10%,rgba(var(--cc),.1),transparent 55%),var(--p1)}
.pq-stage{padding:0;border-color:rgba(255,201,61,.3);border-radius:18px;overflow:hidden}.pq-stage canvas{display:block;width:100%;height:auto;background:transparent;touch-action:none;cursor:crosshair;position:relative;z-index:1}
.pq-stage .cs-vig{background:radial-gradient(ellipse at 50% 50%,transparent 70%,rgba(0,0,0,.35))}
.pq-lgs{display:flex;flex-wrap:wrap;gap:8px}.pq-lg{display:flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,#1b1922,#111016)}
.pq-lg i{position:relative;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--bc);box-shadow:inset -3px -4px 6px rgba(0,0,0,.4),inset 3px 3px 6px rgba(255,255,255,.35),0 2px 5px rgba(0,0,0,.5);overflow:hidden;font-style:normal}
.pq-lg i b{position:relative;z-index:1;width:15px;height:15px;border-radius:50%;background:#f8f6ee;color:#111;font-size:.58rem;display:grid;place-items:center;font-weight:700}.pq-lg i u{position:absolute;inset:0;background:linear-gradient(180deg,#f6f3ea 0 24%,transparent 24% 76%,#f6f3ea 76%);text-decoration:none}
.pq-lg span{font-family:"Chakra Petch","Inter",sans-serif;font-weight:600;font-size:.9rem}.pq-lg.jp{border-color:#ffd45a;box-shadow:0 0 16px rgba(255,201,61,.3)}.pq-lg.jp span{color:#ffd45a}
.pq-lg i.hit{outline:2px solid #5fd36b;outline-offset:2px;animation:pqh .8s}@keyframes pqh{from{transform:scale(1.5)}}
.pq-pw{flex:1 1 200px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:6px 14px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#1a1820,#111016)}.pq-pw label{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600}.pq-pw input{width:100%;accent-color:#ffc93d}
#pool .cs-open{flex:1.4 1 200px}#pool .ck-out{flex:0 1 150px}
@media(max-width:600px){#pool .ck-out{flex:1 1 100%}}

/* ---------- 7. Light theme ---------- */
html[data-theme=light]{--bg:#f6f3ec;--bg2:#efe9dc;--p1:rgba(255,255,255,.9);--p2:rgba(239,233,218,.96);--p3:#e6dfcc;--surface:#fff;--surface2:#f7f3ea;--raised:#fff;--line:#d8cdb0;--line2:rgba(60,45,10,.12);--line3:rgba(60,45,10,.2);--text:#1d1a12;--mute:#6b6350;--dim:#8c846f;--glaze:#a8841a;--sun:#7a5c06;--mint:#14885a;--bad:#c42f3b;color-scheme:light}
html[data-theme=light] body,html[data-theme=light] .bg{background:var(--bg2)}
html[data-theme=light] .bg canvas{opacity:.12}html[data-theme=light] .orb{opacity:.22}html[data-theme=light] .vig{display:none}
html[data-theme=light] .rail,html[data-theme=light] .chat{background:rgba(255,255,255,.86);border-color:var(--line2)}
html[data-theme=light] .topbar{background:rgba(255,255,255,.85);border-color:var(--line2)}
html[data-theme=light] .hm-h{background:linear-gradient(180deg,rgba(239,233,220,.95) 70%,transparent)}
html[data-theme=light] .logo{color:var(--text)}
html[data-theme=light] .hm-c{background:#fff!important;border-color:var(--line2)}
html[data-theme=light] .balwal{background:linear-gradient(180deg,rgba(168,132,26,.12),#fff);border-color:rgba(168,132,26,.4)}
html[data-theme=light] .chip,html[data-theme=light] .pill,html[data-theme=light] .iconbtn,html[data-theme=light] .acbtn{background:#fff;border-color:var(--line3)}
html[data-theme=light] input[type=number],html[data-theme=light] input[type=text],html[data-theme=light] input[type=search],html[data-theme=light] select,html[data-theme=light] textarea,html[data-theme=light] .bet-in{background-color:#fff}
html[data-theme=light] .cx{color:var(--text)}
html[data-theme=light] .wal-drop,html[data-theme=light] .ac-drop{background:#fff;border-color:var(--line3)}
html[data-theme=light] .toast{background:#fff;color:var(--text)}
html[data-theme=light] .dot{box-shadow:0 0 0 2px #fff}
/* game boards, crates and dark-art panels stay dark for readability of their artwork */
html[data-theme=light] .gc,html[data-theme=light] .pl-wrap,html[data-theme=light] .dc-win,html[data-theme=light] .dc-it,html[data-theme=light] .mn-board,html[data-theme=light] .bj-panel,html[data-theme=light] .hl-panel,html[data-theme=light] .bj-table,html[data-theme=light] .md,html[data-theme=light] .cs-stage,html[data-theme=light] .tw-wrap,html[data-theme=light] .cr-wrap{--p1:rgba(20,19,22,.92);--p2:rgba(36,34,38,.95);--line:#3a3425;--line2:rgba(255,255,255,.08);--line3:rgba(255,255,255,.14);--text:#f4efe1;--mute:#b5ac94;--dim:#8a8370;--glaze:#d4af37;--sun:#f2cf66;color:#f4efe1}
html[data-theme=light] .mn-board,html[data-theme=light] .bj-panel,html[data-theme=light] .hl-panel,html[data-theme=light] .pl-wrap{background-color:#16151a}
html[data-theme=light] .md input,html[data-theme=light] .md select,html[data-theme=light] .md textarea{background-color:rgba(0,0,0,.35)}
html[data-theme=light] .md .chip{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))}

/* ---------- 8. Responsive & motion ---------- */
@media (max-width:1279px){
  .app{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .chat{position:fixed;right:0;top:0;bottom:0;width:min(360px,100vw);z-index:50;transform:translateX(105%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s;box-shadow:var(--sh-2);padding-top:var(--safe-t);background:rgba(14,13,16,.97)}
  .chat.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  #chatbtn,#chx{display:inline-grid}
}
@media (max-width:1100px){
  .tb-left .pill span{display:none}
  .hm-cards{grid-template-columns:1fr 1fr}.hm-cards .hm-c:first-child{grid-column:1/-1}
}
@media (max-width:899px){
  :root{--top-h:58px;--bnav-h:64px}
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);z-index:50;transform:translateX(-105%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s;box-shadow:var(--sh-2);padding-top:calc(10px + var(--safe-t));padding-bottom:calc(14px + var(--safe-b));background:rgba(14,13,16,.97)}
  .rail.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .rail-x{display:inline-grid}
  .topbar{padding:8px 12px;gap:6px}
  .tb-logo{display:inline-block}
  .tb-left,#snd,#chatbtn{display:none!important}
  .ac-drop .ac-snd{display:flex}
  .acbtn{padding:0 6px;gap:0}.acbtn b{display:none}#acav{width:32px;height:32px}
  .walbtn span{display:none}.walbtn{padding:0 11px}
  .bal{padding:0 10px 0 8px;gap:8px}
  .wal-drop,.ac-drop{position:fixed;top:calc(var(--top-h) + var(--safe-t) + 6px);left:10px;right:10px;min-width:0;max-height:calc(100dvh - var(--top-h) - var(--bnav-h) - var(--safe-t) - var(--safe-b) - 20px)}
  .wrap{padding:12px 12px calc(24px + var(--bnav-h) + var(--safe-b))}
  section{padding:14px;border-radius:var(--r-lg)}
  .bethint{display:none}
  .bar{padding:8px;gap:6px;position:sticky;top:calc(var(--top-h) + 6px);z-index:6;background:rgba(17,16,19,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 20px rgba(0,0,0,.35)}
  .bar>label{display:none}
  .bet-in{flex:1 1 120px}
  .bar .chip{min-width:44px;padding:0 10px}
  .betv{flex:0 0 100%;order:9;font-size:.74rem;padding-left:4px;min-height:0}
  .betv:empty{display:none}
  .stats{gap:6px}.stat{padding:8px 10px}.stat b{font-size:1rem}
  .hm-cards{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .hm-cards .hm-c:first-child{grid-column:1/-1}
  .hm-c{padding:14px}
  .hm-cards .hm-c:not(:first-child){padding:12px;align-items:stretch}
  .hm-cards .hm-c:not(:first-child)>div{display:flex;flex-direction:column;width:100%}
  .hm-cards .hm-c:not(:first-child) .hint{flex:1;font-size:.72rem}
  .hm-cards .hm-c:not(:first-child) .act,.hm-cards .hm-c:not(:first-child) .chip{width:100%;padding:8px 10px;font-size:.86rem}
  .hm-h{margin:0 -12px 10px;padding:8px 12px}
  .hm-h h2{font-size:1.15rem}
  .gg{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .gc{padding:10px 4px 10px;gap:4px;border-radius:14px}
  .gc .gi svg{width:76px;height:76px}
  .gc b{font-size:.7rem;letter-spacing:.04em}
  .chat{width:100vw}
  .ch-cnt{padding-bottom:8px}
  .bnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--bnav-h) + var(--safe-b));padding:0 4px var(--safe-b);background:rgba(12,11,14,.92);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-top:1px solid rgba(212,175,55,.18)}
  .bnav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--mute);font:inherit;font-size:.66rem;font-weight:600;letter-spacing:.03em;transition:color .15s}
  .bnav button .ic{font-size:1.4rem;transition:transform .2s}
  .bnav button.on{color:var(--sun)}
  .bnav button.on:before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--sun);box-shadow:0 0 12px var(--sun)}
  .bnav button.on .ic{transform:translateY(-1px) scale(1.08)}
  .bnav .dot{top:9px;right:calc(50% - 18px)}
  html[data-theme=light] .bnav{background:rgba(255,255,255,.94);border-color:var(--line2)}
  html[data-theme=light] .bar{background:rgba(255,255,255,.95)}
  html[data-theme=light] .rail,html[data-theme=light] .chat{background:rgba(255,255,255,.98)}
  /* lighter background on phones: big blurs are expensive */
  .orb{filter:blur(50px);animation:none}
  .bg canvas{opacity:.6}
}

/* mines actions: primary button on its own row */
.mn-btns .act,.mn-btns .chip{flex:1 1 40%;white-space:nowrap}
#mgo{flex-basis:100%;min-height:48px}

/* game layouts on phones: board first, big thumb-friendly actions */
@media (max-width:899px){
  .mn-board{order:-1;padding:12px}
  #mg{gap:8px}
  .mn-btns .act,.mn-btns .chip{min-height:50px}
  #fgo,#dgo,#pgo,#cgo,#cout{flex:1 1 auto;min-height:50px}
  .bj-deal,.cs-open{min-height:54px}
  .cf-scene{height:250px}
  .cf-coin{width:120px;height:120px;margin-left:-60px;bottom:58px}
  .cf-pick{gap:8px}
  .cf-side{min-width:0;padding:10px;gap:8px}
  .cf-side b{font-size:1rem}
  .rwrap{gap:10px}
  #wc{width:min(260px,72vw)}
  .bj-actions .bjb{min-height:52px}
  .hl-choices .hl-ch{min-height:56px}
}
@media (max-width:640px){
  .tblw{overflow:visible;padding:6px}
  .tbl.vert{grid-template-columns:40px 40px repeat(3,minmax(0,1fr));min-width:0;gap:3px;margin-top:6px}
  .tbl.vert .tc{padding:8px 0;font-size:.95rem;min-height:38px}
  .tbl.vert .tc[data-k^="dz"],.tbl.vert .tc[data-k="low"],.tbl.vert .tc[data-k="even"],.tbl.vert .tc[data-k="red"],.tbl.vert .tc[data-k="black"],.tbl.vert .tc[data-k="odd"],.tbl.vert .tc[data-k="high"]{writing-mode:vertical-rl;text-orientation:mixed;padding:0;font-size:.82rem;letter-spacing:.04em}
  .tbl.vert .tc[data-k^="cl"]{font-size:.8rem}
  .cf-side small{display:none}
  .dc-stage{gap:4px}.dc-stage .d3-scene{zoom:.8}#dr,.dc-num{font-size:3rem;min-width:0}
  .rc-pod:before{width:100%;margin-left:0;left:0}
  #bj .bj-table{padding:12px 10px 14px}
  .shoe{width:40px;height:58px;right:8px;top:8px;font-size:.62rem;border-width:3px}
  .bj-speed{justify-content:flex-start;flex-wrap:wrap;gap:4px;padding-right:52px;margin-bottom:8px}
  .bj-speed .chip{min-height:30px;padding:4px 9px;font-size:.74rem}
  .bj-rule{padding-right:48px;text-align:left;font-size:.6rem;letter-spacing:.12em}
}
@media (max-width:599px){
  .modal{place-items:end center;padding:0}
  .md{width:100%;max-width:none!important;max-height:92dvh;border-radius:22px 22px 0 0;border-bottom:0;padding-bottom:calc(22px + var(--safe-b));animation:sheet .28s cubic-bezier(.2,1,.3,1)}
  .md:before{content:"";position:sticky;top:-12px;align-self:center;flex:none;width:40px;height:4px;margin:-10px 0 2px;border-radius:99px;background:rgba(255,255,255,.2)}
  .pf-modal .md:before{position:absolute;top:8px;left:50%;margin-left:-20px}
  .wmodal .md{width:100%}
  @keyframes sheet{from{transform:translateY(40px);opacity:.4}}
  .rc-pool{grid-template-columns:1fr 1fr}
  .toasts{width:calc(100vw - 24px)}.toast{width:100%}
}
@media (max-width:379px){
  .bal small{display:none}.bal b{font-size:.98rem}
  .tb-logo{font-size:1.1rem}
  .gc .gi svg{width:64px;height:64px}
  .gg{gap:6px}
}
@media (hover:none){
  .gc:hover:not(.soon){transform:none}
  .gc:active:not(.soon){transform:scale(.97)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .orb{animation:none}
}