/* Velvet Casino — black and gold
   Layout: sticky header + game rail, a stage for the current view, and a live social rail on wide screens. */
:root{
  --bg:#050506; --bg-2:#0b0a0e; --panel:rgba(17,16,21,.86); --panel-2:#141318; --raise:#1b1a20;
  --line:rgba(212,175,55,.16); --line-2:rgba(212,175,55,.38);
  --gold:#d4af37; --gold-hi:#f4dd98; --gold-lo:#8c6b1d; --gold-grad:linear-gradient(135deg,#fbecb6 0%,#e2bf5a 28%,#b8902c 55%,#f0d488 78%,#9c7a26 100%);
  --ivory:#f5eedc; --muted:#a8a194; --dim:#6e695f;
  --felt:#073325; --felt-2:#0f5139; --felt-line:rgba(244,221,152,.28);
  --rouge:#c3302a; --win:#6fdc9a; --lose:#ff7a6e; --vip:#b98cff; --staff:#7cc8ff;
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --body:"Manrope","Segoe UI",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --r:14px; --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{background:var(--bg);color:var(--ivory);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 520px at 15% -12%,rgba(212,175,55,.10),transparent 60%),
    radial-gradient(900px 600px at 105% 0%,rgba(140,107,29,.10),transparent 60%),
    radial-gradient(1400px 800px at 50% 120%,rgba(212,175,55,.06),transparent 60%);
  background-attachment:fixed}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>")}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{position:relative;z-index:1;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1440px;margin:0 auto}
.gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;border:1px solid var(--line-2);background:rgba(212,175,55,.06);color:var(--ivory);padding:8px 14px;border-radius:10px;font-weight:600;font-size:13px;letter-spacing:.01em;transition:transform .15s var(--ease),background .2s,border-color .2s,box-shadow .2s}
.btn:not(.gold):not(.danger):hover:not(:disabled){background:rgba(212,175,55,.14);border-color:var(--gold);box-shadow:0 0 0 1px rgba(212,175,55,.25),0 6px 24px -8px rgba(212,175,55,.45)}
.btn:active:not(:disabled){transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.gold{background:var(--gold-grad);background-size:200% 200%;color:#17130a;border-color:#f6e2a2;box-shadow:0 0 0 1px rgba(246,226,162,.25),0 8px 28px -10px rgba(212,175,55,.8),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.gold:hover:not(:disabled){background:var(--gold-grad);background-size:200% 200%;border-color:#f6e2a2;box-shadow:0 0 0 1px rgba(246,226,162,.5),0 10px 36px -8px rgba(212,175,55,.95),inset 0 1px 0 rgba(255,255,255,.6);filter:brightness(1.08)}
.btn.gold::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn.gold:hover::after{transform:translateX(120%)}
.btn.big{padding:12px 24px;font-size:15px;border-radius:12px}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover:not(:disabled){border-color:var(--line-2)}
.btn.red{background:rgba(195,48,42,.16);border-color:rgba(255,122,110,.45)}
.btn.glow{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 1px rgba(246,226,162,.25),0 8px 28px -10px rgba(212,175,55,.8)}50%{box-shadow:0 0 0 1px rgba(246,226,162,.6),0 0 34px -2px rgba(212,175,55,.75)}}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px solid var(--line-2);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi);background:rgba(212,175,55,.08)}
.livedot{width:7px;height:7px;border-radius:50%;background:#ff4a3d;box-shadow:0 0 0 0 rgba(255,74,61,.6);animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,74,61,.6)}70%{box-shadow:0 0 0 7px rgba(255,74,61,0)}100%{box-shadow:0 0 0 0 rgba(255,74,61,0)}}

/* ---------- role tags + avatars ---------- */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:1px 6px;border-radius:5px;vertical-align:middle;line-height:1.6}
.tag.owner{background:var(--gold-grad);color:#17130a}
.tag.staff{background:rgba(124,200,255,.14);color:var(--staff);border:1px solid rgba(124,200,255,.4)}
.tag.vip{background:rgba(185,140,255,.14);color:var(--vip);border:1px solid rgba(185,140,255,.45)}
.av{--h:40;position:relative;flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;
  background:radial-gradient(circle at 35% 30%,hsl(var(--h) 55% 45%),hsl(var(--h) 60% 22%));box-shadow:0 0 0 1.5px rgba(212,175,55,.55),0 2px 8px rgba(0,0,0,.5)}
.av.owner{box-shadow:0 0 0 2px #f0d488,0 0 14px rgba(212,175,55,.6)}
.av.staff{box-shadow:0 0 0 2px var(--staff)}
.av.vip{box-shadow:0 0 0 2px var(--vip)}
.av.lg{width:92px;height:92px;font-size:40px}
.av.md{width:44px;height:44px;font-size:19px}
.av.sm{width:22px;height:22px;font-size:10px}
.namebtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.namebtn:hover .nm-t{color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}
.namebtn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:6px}
.nm-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}

/* ---------- header ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:#050506}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(5,5,6,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .bar{display:flex;align-items:center;gap:14px;padding-block:10px;flex-wrap:wrap;z-index:3}
.brand{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;margin-right:auto}
.mark{width:38px;height:38px;display:block;border-radius:50%;filter:drop-shadow(0 4px 12px rgba(212,175,55,.45));transition:transform .6s var(--ease)}
.brand:hover .mark{transform:rotate(-20deg) scale(1.05)}
.brand b{font-family:var(--display);font-style:italic;font-weight:500;font-size:24px;letter-spacing:.01em;line-height:1}
.brand small{display:block;font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.purse{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.balance{display:flex;align-items:center;gap:9px;padding:5px 14px 5px 6px;border:1px solid var(--line-2);border-radius:999px;background:linear-gradient(180deg,rgba(212,175,55,.10),rgba(0,0,0,.2))}
.coin{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#e2bf5a 40%,#8c6b1d 100%);box-shadow:inset 0 0 0 3px rgba(23,19,10,.25),0 0 12px rgba(212,175,55,.5);animation:coinspin 6s linear infinite}
@keyframes coinspin{0%,80%{transform:rotateY(0)}90%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.balance b{font-family:var(--mono);font-weight:500;font-size:17px;font-variant-numeric:tabular-nums;transition:color .3s}
.balance b.up{color:var(--win)} .balance b.down{color:var(--lose)}
.balance span{font-size:10px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase}
.menu-wrap{position:relative}
.me-btn{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--line)}
.me-btn:hover{border-color:var(--line-2)}
.me-btn:focus-visible{outline:2px solid var(--gold-hi)}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:12px;padding:6px;box-shadow:0 20px 60px rgba(0,0,0,.6);z-index:30;animation:pop .18s var(--ease)}
.menu button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 12px;border-radius:8px;font-weight:600}
.menu button:hover,.menu button:focus-visible{background:rgba(212,175,55,.1);color:var(--gold-hi)}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

.games{display:flex;gap:2px;overflow-x:auto;padding-block:8px;scrollbar-width:none}
.games::-webkit-scrollbar{display:none}
.tab{flex:none;border:0;background:transparent;padding:8px 14px;border-radius:9px;color:var(--muted);font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:7px;position:relative;transition:color .2s}
.tab:hover{color:var(--ivory)}
.tab[aria-selected="true"]{color:var(--gold-hi)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:var(--gold-grad);box-shadow:0 0 12px rgba(212,175,55,.8)}
.tab .livedot{width:6px;height:6px}

.conn-note{margin-top:12px;padding:10px 14px;border:1px solid var(--line-2);border-radius:10px;color:var(--muted);font-size:13px;background:rgba(212,175,55,.05)}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;padding-block:18px 50px;align-items:start}
@media (max-width:1100px){.layout{grid-template-columns:minmax(0,1fr)}}
.stage{min-width:0}
.view{animation:viewin .45s var(--ease)}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgba(244,221,152,.35),transparent 30%,transparent 70%,rgba(212,175,55,.2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.gamehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.gamehead h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,40px);margin:0;line-height:1;letter-spacing:-.01em;text-wrap:balance}
.gamehead p{margin:6px 0 0;color:var(--muted);font-size:13px}
.statusbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.clock{font-family:var(--mono);font-size:24px;color:var(--gold-hi);text-shadow:0 0 18px rgba(212,175,55,.45);min-width:3ch;text-align:right}
.clock.urgent{color:var(--lose);text-shadow:0 0 18px rgba(255,122,110,.5)}
.msg{min-height:30px;text-align:center;font-family:var(--display);font-style:italic;font-size:22px;color:var(--gold-hi);margin:8px 0}
.msg.win{color:var(--win);text-shadow:0 0 22px rgba(111,220,154,.45);animation:msgpop .5s var(--ease)}
.msg.lose{color:var(--lose)}
@keyframes msgpop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.06)}100%{transform:none;opacity:1}}
.controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;margin-top:16px}
@media (max-width:680px){.controls{grid-template-columns:minmax(0,1fr)}}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:680px){.actions{justify-content:stretch}.actions .btn{flex:1}}

/* ---------- felt ---------- */
.felt{position:relative;border-radius:22px;padding:22px;background:
   radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.08),transparent 55%),
   radial-gradient(ellipse at 50% 40%,var(--felt-2),var(--felt) 75%);
  border:1px solid rgba(244,221,152,.25);
  box-shadow:inset 0 0 0 8px rgba(0,0,0,.25),inset 0 0 0 9px rgba(212,175,55,.35),inset 0 0 90px rgba(0,0,0,.55),0 30px 60px -30px rgba(0,0,0,.9)}
.felt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>")}
.felt-print{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--display);font-style:italic;color:var(--felt-line);text-align:center;pointer-events:none;letter-spacing:.06em;white-space:nowrap}

/* ---------- cards ---------- */
.hand{display:flex;justify-content:center;min-height:100px;padding-left:28px}
.hand .card{margin-left:-28px}
.hand.spread{padding-left:0;gap:8px}.hand.spread .card{margin-left:0}
.card{--w:66px;width:var(--w);height:calc(var(--w)*1.4);perspective:700px;flex:none;position:relative}
.card .cin{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s var(--ease)}
.card.down .cin{transform:rotateY(180deg)}
.cface{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 4px 14px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.4) inset}
.front{background:linear-gradient(160deg,#fffdf6,#f1e8d4);color:#17130f;padding:5px 6px;display:grid;grid-template-rows:auto 1fr auto}
.front .ix{font-family:var(--display);font-weight:700;font-size:calc(var(--w)*.3);line-height:.9;display:flex;flex-direction:column;align-items:center;width:max-content}
.front .ix i{font-style:normal;font-size:.75em;line-height:1}
.front .pip{display:grid;place-items:center;font-size:calc(var(--w)*.55);line-height:1}
.front .ix.b{justify-self:end;transform:rotate(180deg)}
.card.red .front{color:#b3171b}
.back{transform:rotateY(180deg);background:
  repeating-linear-gradient(45deg,rgba(212,175,55,.22) 0 2px,transparent 2px 7px),
  repeating-linear-gradient(-45deg,rgba(212,175,55,.22) 0 2px,transparent 2px 7px),
  radial-gradient(circle at 50% 50%,#2a0d13,#120408);
  border:3px solid #f1e8d4;outline:1px solid rgba(212,175,55,.6);outline-offset:-7px}
.card.sm{--w:44px}.card.sm .front{padding:3px 4px}
.card.xs{--w:34px}
.hand .card.sm{margin-left:-14px}.hand:has(.card.sm){padding-left:14px}
.card.deal{animation:dealIn .5s var(--ease) both}
.card.deal .cin{animation:flipIn .5s .18s var(--ease) both}
.card.down.deal .cin{animation:none}
@keyframes dealIn{from{transform:translate(var(--dx,180px),var(--dy,-160px)) rotate(-28deg);opacity:0}to{transform:none;opacity:1}}
@keyframes flipIn{from{transform:rotateY(180deg)}to{transform:rotateY(0)}}
.card.glow .front{box-shadow:0 0 0 2px var(--gold-hi),0 0 22px rgba(212,175,55,.8)}
.total{display:inline-grid;place-items:center;min-width:34px;padding:2px 9px;border-radius:999px;font-family:var(--mono);font-size:13px;background:rgba(0,0,0,.55);border:1px solid var(--line-2);color:var(--ivory)}
.total:empty{display:none}
.total.bust{border-color:rgba(255,122,110,.6);color:var(--lose)}
.total.bj{background:var(--gold-grad);color:#17130a;border-color:#f6e2a2}
.shoe{position:absolute;right:22px;top:18px;width:62px;height:84px;border-radius:8px 18px 8px 8px;background:linear-gradient(160deg,#2a2622,#0e0c0b);border:1px solid rgba(212,175,55,.4);box-shadow:0 8px 18px rgba(0,0,0,.6)}
.shoe::after{content:"";position:absolute;left:8px;right:12px;top:10px;height:56px;border-radius:5px;background:repeating-linear-gradient(0deg,#f1e8d4 0 2px,#d8cdb6 2px 3px);transform:skewX(-8deg)}
@media (max-width:680px){.shoe{display:none}}

/* ---------- chips ---------- */
.chipset{display:flex;gap:7px;flex-wrap:wrap}
.chip{--c:#2b5fb4;position:relative;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:500;color:#fff;
  background:radial-gradient(circle,var(--c) 0 52%,transparent 53%),repeating-conic-gradient(var(--c) 0 22.5deg,#f6f1e4 22.5deg 30deg);
  box-shadow:0 0 0 2px rgba(0,0,0,.35),0 3px 0 rgba(0,0,0,.5),inset 0 0 0 5px rgba(0,0,0,.12);transition:transform .15s var(--ease),box-shadow .2s;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.chip::after{content:"";position:absolute;inset:9px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.45)}
.chip:hover:not(:disabled){transform:translateY(-3px)}
.chip.sel{transform:translateY(-4px);box-shadow:0 0 0 2px var(--gold-hi),0 0 18px rgba(212,175,55,.75),0 3px 0 rgba(0,0,0,.5)}
.chip:disabled{opacity:.4}
.chip.c10{--c:#2b5fb4}.chip.c50{--c:#b8322c}.chip.c100{--c:#151515}.chip.c500{--c:#6b3aa0}.chip.c1000{--c:#b18a2c}.chip.c5000{--c:#0f6b62}
.stack{position:relative;width:34px;height:34px;display:inline-block}
.stack .disc{position:absolute;left:0;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,var(--c) 0 50%,transparent 51%),repeating-conic-gradient(var(--c) 0 22.5deg,#f6f1e4 22.5deg 30deg);box-shadow:0 2px 0 rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.35);animation:chipdrop .35s var(--ease) both}
@keyframes chipdrop{from{transform:translateY(-26px);opacity:0}to{opacity:1}}
.stack-amt{display:block;text-align:center;font-family:var(--mono);font-size:11px;color:var(--gold-hi);margin-top:4px;text-shadow:0 1px 2px #000}
.betctl{display:flex;flex-direction:column;gap:9px;min-width:0}
.betrow{display:flex;align-items:baseline;gap:10px}
.betrow output{font-family:var(--mono);font-size:24px;color:var(--gold-hi)}
.betops{display:flex;gap:6px;flex-wrap:wrap}
.betops button{border:1px solid var(--line);background:transparent;border-radius:7px;padding:4px 11px;font-size:12px;color:var(--muted);font-weight:600}
.betops button:hover:not(:disabled){color:var(--ivory);border-color:var(--gold)}

/* ---------- auth ---------- */
.auth{position:relative;min-height:100vh;display:grid;place-items:center;padding-block:40px;overflow:hidden}
.auth canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.auth-card{position:relative;z-index:1;width:min(440px,100%);background:rgba(12,11,15,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:22px;padding:34px 30px;box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px -30px rgba(212,175,55,.4);animation:viewin .8s var(--ease)}
.auth-logo{font-family:var(--display);font-style:italic;font-weight:500;font-size:54px;margin:0;line-height:.95;letter-spacing:-.01em}
.auth .tag-line{color:var(--muted);margin:10px 0 24px}
.auth-tabs{display:flex;gap:4px;margin-bottom:18px;background:rgba(0,0,0,.35);padding:4px;border-radius:12px;border:1px solid var(--line)}
.auth-tabs button{flex:1;border:0;background:transparent;border-radius:9px;padding:9px;color:var(--muted);font-weight:700}
.auth-tabs button[aria-selected="true"]{background:var(--gold-grad);color:#17130a}
.auth form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.04em}
.input,.field input,.field select,.field textarea{background:rgba(0,0,0,.4);border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;font-size:15px;color:var(--ivory);transition:border-color .2s,box-shadow .2s;width:100%}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.check{display:flex;align-items:flex-start;gap:10px;line-height:1.45;font-size:13px;color:var(--muted)}
.check input{margin-top:3px;accent-color:var(--gold);width:16px;height:16px}
.err{color:var(--lose);min-height:20px;font-size:13px;margin:0}
.fine{font-size:12px;color:var(--dim);margin:20px 0 0}

/* ---------- lobby ---------- */
.hero{position:relative;overflow:hidden;border-radius:24px;padding:clamp(26px,5vw,56px);border:1px solid var(--line-2);
  background:radial-gradient(700px 360px at 85% 30%,rgba(212,175,55,.22),transparent 60%),radial-gradient(500px 300px at 10% 110%,rgba(212,175,55,.12),transparent 60%),linear-gradient(160deg,#0f0e13,#060507)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}
.hero-in{position:relative;max-width:620px}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(40px,7vw,78px);line-height:.95;margin:12px 0 14px;letter-spacing:-.02em;text-wrap:balance}
.hero h1 em{font-style:italic}
.hero p{color:var(--muted);font-size:16px;max-width:46ch;margin:0 0 22px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-stats{display:flex;gap:26px;margin-top:28px;flex-wrap:wrap}
.hero-stats div b{display:block;font-family:var(--mono);font-size:24px;font-weight:500;color:var(--gold-hi)}
.hero-stats div span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.section-h{display:flex;align-items:baseline;justify-content:space-between;margin:34px 0 14px}
.section-h h2{font-family:var(--display);font-weight:500;font-size:28px;margin:0}
.grid-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.gcard{all:unset;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:250px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#0c0b0f;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s var(--ease),border-color .3s,box-shadow .3s;box-shadow:0 20px 40px -24px rgba(0,0,0,.9)}
.gcard:hover,.gcard:focus-visible{border-color:var(--gold);box-shadow:0 0 0 1px rgba(212,175,55,.4),0 30px 60px -20px rgba(212,175,55,.35)}
.gcard:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.gcard .art{position:absolute;inset:0;display:grid;place-items:center;transition:transform .6s var(--ease)}
.gcard:hover .art{transform:scale(1.06)}
.gcard .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(5,5,6,.92) 85%)}
.gcard .shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,240,200,.18) 50%,transparent 65%);transform:translateX(-100%);transition:transform .9s var(--ease);pointer-events:none}
.gcard:hover .shine{transform:translateX(100%)}
.gcard .meta{position:relative;padding:18px}
.gcard h3{font-family:var(--display);font-weight:500;font-size:26px;margin:0 0 2px}
.gcard p{margin:0;color:var(--muted);font-size:13px}
.gcard .corner{position:absolute;top:14px;left:14px;z-index:1;display:flex;gap:6px}
.gcard .count{position:absolute;top:14px;right:14px;z-index:1;font-size:12px;color:var(--ivory);background:rgba(0,0,0,.55);border:1px solid var(--line);padding:2px 9px;border-radius:999px}
.art-bj{background:radial-gradient(circle at 50% 35%,#14573f,#062a1e 70%)}
.art-pk{background:radial-gradient(circle at 50% 35%,#4a1220,#14040a 70%)}
.art-rl{background:radial-gradient(circle at 50% 35%,#2b2108,#0a0803 70%)}
.art-bc{background:radial-gradient(circle at 50% 35%,#0e2c52,#040b16 70%)}
.art-hr{background:radial-gradient(circle at 50% 30%,#2f5d1f,#0b1707 70%)}
.art-cr{background:radial-gradient(circle at 50% 70%,#3a0f2a,#07030a 70%)}
.art-sl{background:radial-gradient(circle at 50% 35%,#4a3208,#120b02 70%)}
.art-dc{background:radial-gradient(circle at 50% 35%,#252033,#08070c 70%)}
.art .em{position:relative;z-index:0;font-family:var(--display);font-size:120px;line-height:1;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.art svg{position:relative;z-index:0;width:72%;max-height:78%;filter:drop-shadow(0 12px 30px rgba(0,0,0,.6))}

/* ---------- side rail ---------- */
.side{display:flex;flex-direction:column;gap:16px;min-width:0}
.side h3{font-family:var(--display);font-weight:500;font-size:20px;margin:0 0 12px;display:flex;justify-content:space-between;align-items:baseline}
.side h3 small{font-family:var(--body);font-size:10px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.plist li{display:flex;align-items:center;gap:10px;min-width:0}
.plist .who{flex:1;min-width:0;display:flex;flex-direction:column}
.plist .sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist .amt{font-family:var(--mono);font-size:13px;color:var(--gold-hi)}
.plist .rank{width:20px;font-family:var(--display);font-style:italic;font-size:16px;color:var(--dim);text-align:center}
.plist li:nth-child(1) .rank{color:#f0d488}.plist li:nth-child(2) .rank{color:#cfd3d8}.plist li:nth-child(3) .rank{color:#d39a62}
.feed li{animation:slidein .45s var(--ease)}
.feed .amt{color:var(--win)}
@keyframes slidein{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.empty{color:var(--dim);font-size:13px}
.mini-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mini-list li{display:flex;align-items:center;gap:7px;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 3px;font-size:12px}
.mini-list li b{font-family:var(--mono);font-weight:500;color:var(--gold-hi)}
.mini-list li.win{border-color:rgba(111,220,154,.5)}.mini-list li.win b{color:var(--win)}
.mini-list li.me{border-color:var(--gold)}

/* ---------- table pickers ---------- */
.tablepick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tablepick button{border:1px solid var(--line);background:rgba(0,0,0,.3);border-radius:12px;padding:9px 14px;text-align:left;color:var(--ivory);transition:border-color .2s,background .2s}
.tablepick button small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.tablepick button[aria-pressed="true"]{background:linear-gradient(180deg,rgba(212,175,55,.18),rgba(212,175,55,.04));border-color:var(--gold)}

/* ---------- blackjack ---------- */
.bj-table{min-height:470px;padding-top:28px;border-radius:24px 24px 50% 50% / 24px 24px 120px 120px}
.bj-dealer{display:flex;flex-direction:column;align-items:center;gap:8px}
.bj-print{position:relative;left:auto;transform:none;margin:14px auto 0;font-size:15px}
.bj-print small{display:block;font-family:var(--body);font-style:normal;font-size:10px;letter-spacing:.3em;text-transform:uppercase;margin-top:4px}
.bj-seats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:56px;padding-bottom:20px}
.bseat{position:relative;width:132px;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translateY(var(--arc,0px));transition:transform .4s var(--ease)}
.bseat .spot{width:58px;height:58px;border-radius:50%;border:1.5px solid var(--felt-line);display:grid;place-items:center;position:relative}
.bseat.turn .spot{border-color:var(--gold-hi);box-shadow:0 0 0 4px rgba(212,175,55,.18),0 0 26px rgba(212,175,55,.6);animation:turnpulse 1.4s ease-in-out infinite}
@keyframes turnpulse{50%{box-shadow:0 0 0 7px rgba(212,175,55,.1),0 0 34px rgba(212,175,55,.75)}}
.bseat .hand{min-height:62px}
.bseat .bst{font-size:12px;color:var(--ivory);display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;text-align:center}
.bseat .res{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.5)}
.bseat .res.win{color:#17130a;background:var(--win);box-shadow:0 0 16px rgba(111,220,154,.6)}
.bseat .res.lose{color:var(--lose)}
.bseat.me .namebtn .nm-t{color:var(--gold-hi)}
.bj-empty{color:rgba(244,238,220,.6);font-style:italic;font-family:var(--display);font-size:18px;text-align:center;width:100%;padding:20px}

/* ---------- poker ---------- */
.ptable{position:relative;aspect-ratio:16/9;max-width:100%;margin:22px 10px 64px;border-radius:999px;
  background:radial-gradient(ellipse at 50% 35%,var(--felt-2),var(--felt) 72%);
  border:14px solid transparent;background-clip:padding-box;
  box-shadow:0 0 0 14px #1a0f0a,0 0 0 15px rgba(212,175,55,.55),0 0 0 16px #0a0605,inset 0 0 80px rgba(0,0,0,.55),0 40px 80px -30px #000}
.ptable::before{content:"";position:absolute;inset:-14px;border-radius:inherit;background:linear-gradient(160deg,#3a2216,#140a06 60%,#2a170e);z-index:-1}
.pcenter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.pot{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:14px;background:rgba(0,0,0,.5);padding:4px 14px 4px 6px;border-radius:999px;color:var(--gold-hi);border:1px solid var(--line-2)}
.seat{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;min-width:104px;z-index:1}
.seat .who{display:flex;align-items:center;gap:8px;background:rgba(8,7,10,.9);border:1px solid var(--line-2);border-radius:14px;padding:5px 12px 5px 5px;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.seat .who .t{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.seat .who .t span{font-family:var(--mono);font-size:12px;color:var(--gold-hi)}
.seat.turn .who{border-color:var(--gold-hi);box-shadow:0 0 0 3px rgba(212,175,55,.25),0 0 30px rgba(212,175,55,.5)}
.seat.out{opacity:.45}
.seat .act{font-size:11px;color:var(--muted);min-height:16px;font-weight:700;letter-spacing:.06em}
.seat .bet{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;color:var(--gold-hi)}
.seat .mini{display:flex;gap:3px}
.seat.empty .who{border-style:dashed;color:var(--dim);padding:6px 12px}
.dealerbtn{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(#fff,#ddd);color:#111;font-size:10px;font-weight:900;box-shadow:0 2px 4px rgba(0,0,0,.5)}
.p0{left:50%;top:100%}.p1{left:9%;top:80%}.p2{left:9%;top:20%}.p3{left:50%;top:0}.p4{left:91%;top:20%}.p5{left:91%;top:80%}
@media (max-width:680px){.ptable{aspect-ratio:4/5;border-radius:44%/30%;margin:48px 6px 72px}.seat{min-width:76px}.seat .who{padding:3px 8px 3px 3px}.seat .who .av{width:22px;height:22px;font-size:10px}.p1{left:12%;top:72%}.p2{left:12%;top:28%}.p4{left:88%;top:28%}.p5{left:88%;top:72%}}
.pk-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.pk-ctl .raise{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
input[type=range]{accent-color:var(--gold)}
.pk-ctl input[type=range]{width:170px}
.turnbar{height:3px;background:var(--gold-grad);border-radius:2px;transition:width .25s linear;box-shadow:0 0 10px rgba(212,175,55,.7);margin-bottom:10px}
.pklog{margin-top:14px;max-height:140px;overflow:auto;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;font-family:var(--mono)}
.buyin{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}

/* ---------- roulette ---------- */
.rl-top{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:center}
@media (max-width:760px){.rl-top{grid-template-columns:minmax(0,1fr);justify-items:center}}
.wheelbox{position:relative;width:min(300px,82vw);aspect-ratio:1}
.wheelbox canvas{position:absolute;inset:0;width:100%;height:100%}
#rl-wheel{transition:transform 6s cubic-bezier(.12,.62,.1,1)}
.wheelbox::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,transparent 62%,rgba(212,175,55,.25) 64%,transparent 70%);filter:blur(6px)}
.rl-status{display:flex;flex-direction:column;gap:12px;min-width:0;width:100%}
.rl-result{display:inline-grid;place-items:center;width:70px;height:70px;border-radius:50%;font-family:var(--mono);font-size:28px;border:2px solid var(--gold);animation:msgpop .6s var(--ease);box-shadow:0 0 30px rgba(212,175,55,.45)}
.hist{display:flex;gap:4px;flex-wrap:wrap}
.hist span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px}
.r-red{background:var(--rouge);color:#fff}.r-black{background:#141212;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}.r-green{background:#13804f;color:#fff}
.tablewrap{overflow-x:auto;margin-top:20px;padding:6px 4px 8px}
.rgrid{display:grid;grid-template-columns:48px repeat(12,minmax(38px,1fr)) 52px;grid-template-rows:repeat(3,48px) 40px 40px;gap:3px;min-width:620px}
.rcell{position:relative;border:1px solid rgba(244,238,220,.45);border-radius:5px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:17px;color:#fff;background:transparent;transition:filter .15s,box-shadow .2s}
.rcell:hover:not(:disabled){filter:brightness(1.3);box-shadow:inset 0 0 0 1px var(--gold-hi)}
.rcell:disabled{cursor:not-allowed}
.rcell.zero{grid-row:1/4;grid-column:1;border-radius:24px 5px 5px 24px}
.rcell.out{font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.06em;background:rgba(0,0,0,.18)}
.rcell .stake{position:absolute;right:-6px;top:-8px;z-index:2}
.rcell.hit{box-shadow:inset 0 0 0 3px var(--gold-hi),0 0 24px rgba(212,175,55,.8);animation:hitpulse 1s ease-in-out 3}
@keyframes hitpulse{50%{filter:brightness(1.6)}}
.mini-chip{display:grid;place-items:center;min-width:26px;height:26px;padding:0 5px;border-radius:13px;font-family:var(--mono);font-size:10px;font-weight:500;color:#17130a;background:var(--gold-grad);box-shadow:0 2px 6px rgba(0,0,0,.6),0 0 0 2px rgba(0,0,0,.3);animation:chipdrop .3s var(--ease)}

/* ---------- baccarat ---------- */
.bac-hands{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.bac-hands{grid-template-columns:1fr}}
.bac-box{border:1.5px solid var(--felt-line);border-radius:18px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:170px;transition:box-shadow .4s,border-color .4s}
.bac-box.won{border-color:var(--gold-hi);box-shadow:0 0 0 4px rgba(212,175,55,.15),0 0 40px rgba(212,175,55,.45)}
.bac-box h4{margin:0;font-family:var(--display);font-weight:500;font-size:22px;display:flex;gap:10px;align-items:center}
.spots{display:grid;grid-template-columns:1fr .8fr 1fr;gap:10px;margin-top:16px}
.spot-b{position:relative;border:1.5px solid rgba(244,238,220,.4);border-radius:16px;padding:16px 10px;background:rgba(0,0,0,.18);color:var(--ivory);text-align:center;transition:border-color .2s,background .2s,box-shadow .3s}
.spot-b b{display:block;font-family:var(--display);font-size:24px;font-weight:500}
.spot-b small{color:rgba(244,238,220,.65)}
.spot-b:hover:not(:disabled){border-color:var(--gold-hi);background:rgba(212,175,55,.08)}
.spot-b .stake{position:absolute;right:10px;top:10px}
.spot-b.won{box-shadow:inset 0 0 0 2px var(--gold-hi),0 0 30px rgba(212,175,55,.5)}
.beads{display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,22px);grid-auto-columns:22px;gap:3px;overflow-x:auto;padding:8px;background:#f4efe2;border-radius:10px;width:max-content;max-width:100%}
.beads span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;font-family:var(--mono)}
.bead-P{background:#2563c4;color:#fff}.bead-B{background:#c3302a;color:#fff}.bead-T{background:#13804f;color:#fff}

/* ---------- crash ---------- */
.crashbox{position:relative;height:clamp(260px,38vw,380px);border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 20% 100%,#1d0b1c,#050307 70%);border:1px solid var(--line-2);box-shadow:inset 0 0 80px rgba(0,0,0,.6)}
.crashbox canvas{width:100%;height:100%;display:block}
.crashbox .mult{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:clamp(46px,8vw,76px);color:var(--ivory);pointer-events:none;text-shadow:0 0 30px rgba(212,175,55,.5),0 4px 20px rgba(0,0,0,.8)}
.crashbox .mult.boom{color:var(--lose);text-shadow:0 0 40px rgba(255,74,61,.7);animation:shake .5s}
.crashbox .mult.cashed{color:var(--win)}
.crashbox.flash{animation:flash .6s}
@keyframes flash{0%{box-shadow:inset 0 0 0 999px rgba(255,74,61,.35)}100%{box-shadow:inset 0 0 80px rgba(0,0,0,.6)}}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.crhist{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}
.crhist span{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.crhist span.hi{color:var(--win);border-color:rgba(111,220,154,.35)}.crhist span.lo{color:var(--lose)}
.field.inline input{width:130px;padding:8px 10px;font-size:14px}

/* ---------- slots ---------- */
.cabinet{position:relative;padding:22px;border-radius:26px;background:linear-gradient(180deg,#1e1608,#0b0804);border:1px solid var(--gold-lo);box-shadow:inset 0 0 0 2px rgba(244,221,152,.15),0 30px 60px -20px rgba(0,0,0,.9),0 0 60px -20px rgba(212,175,55,.35)}
.cabinet .marquee{display:flex;justify-content:center;gap:10px;margin-bottom:14px}
.cabinet .marquee i{width:9px;height:9px;border-radius:50%;background:#f4dd98;box-shadow:0 0 10px #f4dd98;animation:bulbs 1.2s infinite}
.cabinet .marquee i:nth-child(2n){animation-delay:.6s}
@keyframes bulbs{50%{opacity:.25;box-shadow:none}}
.cabinet.win .marquee i{animation-duration:.25s}
.reels{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px;background:#050403;border-radius:16px;border:2px solid var(--gold);box-shadow:inset 0 0 30px rgba(0,0,0,.9)}
.reel{position:relative;height:calc(var(--sh) * 3);overflow:hidden;border-radius:10px;background:linear-gradient(180deg,#cfc6b0,#fffdf5 22%,#fffdf5 78%,#cfc6b0);--sh:92px}
@media (max-width:520px){.reel{--sh:72px}}
.strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.sym{height:var(--sh);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:calc(var(--sh)*.6);line-height:1}
.sym.s7{color:#b3171b;text-shadow:0 2px 0 #f4dd98,0 4px 8px rgba(0,0,0,.35)}
.sym.sBAR span{font-family:var(--body);font-weight:900;font-size:calc(var(--sh)*.28);color:#f4dd98;background:#14110c;padding:6px 10px;border-radius:6px;letter-spacing:.08em;box-shadow:inset 0 0 0 2px #d4af37}
.sym.sstar{color:#c2961f}.sym.sdia{color:#c3302a}.sym.shrt{color:#d43a46}.sym.sclb{color:#17130f}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 28%,transparent 72%,rgba(0,0,0,.55))}
.payline{position:absolute;left:4px;right:4px;top:50%;height:2px;transform:translateY(-1px);background:rgba(195,48,42,.6);pointer-events:none;z-index:2;transition:background .3s,box-shadow .3s}
.cabinet.win .payline{background:var(--gold-hi);box-shadow:0 0 16px var(--gold)}
.paytable{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 18px;margin-top:16px;font-size:13px;color:var(--muted)}
.paytable div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:4px}
.paytable b{color:var(--gold-hi);font-family:var(--mono);font-weight:500}

/* ---------- dice ---------- */
.dice-face{font-family:var(--mono);font-size:clamp(56px,10vw,88px);text-align:center;color:var(--ivory);line-height:1.1;text-shadow:0 0 30px rgba(212,175,55,.35)}
.dice-face.win{color:var(--win)}.dice-face.lose{color:var(--lose)}
.dtrack{position:relative;height:16px;border-radius:999px;background:var(--lose);margin:24px 6px 10px;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.dtrack .zone{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--win);transition:left .2s,width .2s}
.dtrack .puck{position:absolute;top:50%;width:30px;height:30px;margin-left:-15px;border-radius:8px;background:var(--gold-grad);transform:translateY(-50%) rotate(45deg);box-shadow:0 4px 14px rgba(0,0,0,.6);transition:left .7s var(--ease)}
.dtrack .ticks{position:absolute;left:0;right:0;top:22px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--dim)}
.dstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}
.dstats div{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.dstats b{display:block;font-family:var(--mono);font-size:20px;font-weight:500;color:var(--gold-hi)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.seg button{border:0;background:transparent;padding:7px 14px;color:var(--muted);font-weight:700}
.seg button[aria-pressed="true"]{background:var(--gold-grad);color:#17130a}
.range{width:100%}

/* ---------- horses ---------- */
.hr-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.hr-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.hr-meta b{color:var(--ivory);font-weight:600}
.track{position:relative;height:clamp(300px,42vw,400px);border-radius:20px;overflow:hidden;border:1px solid var(--line-2);
  background:linear-gradient(180deg,#0c1a2a 0%,#1b3554 22%,#23492b 22.5%,#2f6a32 40%,#276026 100%);box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.track .sky{position:absolute;left:0;right:0;top:0;height:22%;overflow:hidden}
.track .stand{position:absolute;bottom:0;height:60%;width:220px;background:linear-gradient(180deg,#2b2a33,#16151b);border-top:3px solid #d4af37;box-shadow:0 -4px 0 #0c0b0f inset}
.track .stand::before{content:"";position:absolute;inset:8px 6px 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 3px,transparent 3px 9px),repeating-linear-gradient(0deg,rgba(244,221,152,.12) 0 2px,transparent 2px 8px)}
.track .turf{position:absolute;left:0;right:0;top:22%;bottom:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 60px,rgba(0,0,0,.035) 60px 120px)}
.track .rail{position:absolute;left:0;right:0;height:5px;background:#f4efe2;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.track .rail.top{top:25%}.track .rail.bot{bottom:5%}
.track .post{position:absolute;top:22%;width:4px;height:22px;background:#f4efe2;transform:translateX(-50%)}
.track .post b{position:absolute;left:8px;top:-2px;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(0,0,0,.5);padding:0 4px;border-radius:3px;white-space:nowrap}
.track .finish{position:absolute;top:25%;bottom:5%;width:10px;background:repeating-linear-gradient(0deg,#fff 0 10px,#111 10px 20px);transform:translateX(-50%);box-shadow:0 0 18px rgba(255,255,255,.5)}
.track .finish b{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-family:var(--display);font-style:italic;color:var(--gold-hi);font-size:15px;white-space:nowrap}
.track .stalls{position:absolute;top:25%;bottom:5%;width:30px;background:repeating-linear-gradient(0deg,#d8d2c2 0 6px,#8a8577 6px 8px);opacity:.85;transform:translateX(-100%);border-right:3px solid #b3202a}
.horse{position:absolute;left:0;top:0;width:var(--hw,118px);height:calc(var(--hw,118px)*.525);transform:translate(-100%,-50%);will-change:transform;filter:drop-shadow(0 6px 4px rgba(0,0,0,.35))}
.horse svg{width:100%;height:100%;overflow:visible}
.horse .no{position:absolute;left:39%;top:32%;width:16px;height:16px;border-radius:3px;display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:700;color:#111;background:#fff;z-index:1}
.horse.gallop .legs-f{animation:legf .32s linear infinite}
.horse.gallop .legs-b{animation:legb .32s linear infinite}
.horse.gallop .body{animation:bob .32s ease-in-out infinite}
@keyframes legf{0%{transform:rotate(-28deg)}50%{transform:rotate(26deg)}100%{transform:rotate(-28deg)}}
@keyframes legb{0%{transform:rotate(24deg)}50%{transform:rotate(-30deg)}100%{transform:rotate(24deg)}}
@keyframes bob{50%{transform:translateY(-3px)}}
.horse.leader::after{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(244,221,152,.35),transparent 65%);z-index:-1}
.commentary{position:absolute;left:12px;right:12px;bottom:10px;z-index:3;background:rgba(5,5,6,.78);border:1px solid var(--line-2);border-radius:10px;padding:7px 12px;font-family:var(--display);font-style:italic;font-size:16px;color:var(--gold-hi);text-align:center;backdrop-filter:blur(6px)}
.racepos{position:absolute;right:10px;top:10px;z-index:3;display:flex;flex-direction:column;gap:3px}
.racepos span{display:flex;align-items:center;gap:6px;background:rgba(5,5,6,.7);border-radius:6px;padding:2px 8px 2px 3px;font-size:11px;font-weight:700}
.silk{display:inline-block;width:18px;height:18px;border-radius:4px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.podium{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:rgba(5,5,6,.6);backdrop-filter:blur(3px);animation:viewin .5s var(--ease)}
.podium .pd{text-align:center}
.podium h3{font-family:var(--display);font-weight:500;font-size:clamp(26px,5vw,42px);margin:6px 0}
.podium ol{list-style:none;margin:12px 0 0;padding:0;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;color:var(--muted)}
.racecard{width:100%;border-collapse:separate;border-spacing:0 6px;margin-top:14px}
.racecard th{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:left;padding:0 10px}
.racecard td{background:rgba(255,255,255,.025);padding:9px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);vertical-align:middle}
.racecard td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px}
.racecard td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0}
.racecard tr.mine td{background:rgba(212,175,55,.07);border-color:rgba(212,175,55,.35)}
.racecard .rn{display:flex;align-items:center;gap:10px}
.racecard .rn b{display:block;font-weight:700}
.racecard .rn small{color:var(--muted)}
.racecard .odds{font-family:var(--mono);font-size:16px;color:var(--gold-hi)}
.racecard .form{font-family:var(--mono);color:var(--muted);letter-spacing:.1em}
.racecard .bets{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.racecard .bets .btn{padding:6px 10px;font-size:12px}
.racecard .mybet{font-family:var(--mono);font-size:11px;color:var(--gold-hi);display:block;text-align:right;margin-top:4px}
.rc-wrap{overflow-x:auto}
@media (max-width:640px){.racecard .hide-s{display:none}}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(3,3,4,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:start center;padding:max(30px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));overflow:auto;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.sheet{position:relative;width:min(820px,100%);background:linear-gradient(180deg,#141318,#0b0a0e);border:1px solid var(--line-2);border-radius:22px;padding:24px;box-shadow:0 40px 120px rgba(0,0,0,.8);animation:sheetin .4s var(--ease)}
@keyframes sheetin{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.sheet.narrow{width:min(520px,100%)}
.sheet.wide{width:min(1000px,100%)}
.tiles.prof{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.tiles.prof{grid-template-columns:repeat(2,minmax(0,1fr))}}
.atable .sub{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.sheet h2{font-family:var(--display);font-weight:500;font-size:30px;margin:0}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.x{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-size:18px;color:var(--muted)}
.x:hover{border-color:var(--gold);color:var(--gold-hi)}
.x:focus-visible{outline:2px solid var(--gold-hi)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:16px 0}
.tiles div{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.tiles b{display:block;font-family:var(--mono);font-size:20px;font-weight:500;color:var(--gold-hi);margin-top:2px;overflow-wrap:anywhere}
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:8px 0 14px}
.subtabs button{border:0;background:transparent;padding:9px 14px;color:var(--muted);font-weight:700;position:relative}
.subtabs button[aria-selected="true"]{color:var(--gold-hi)}
.subtabs button[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--gold-grad)}
.atable{width:100%;border-collapse:collapse;font-size:13px}
.atable th{text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px;border-bottom:1px solid var(--line)}
.atable td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.atable td.num{font-family:var(--mono);text-align:right;white-space:nowrap}
.atable input{width:96px;background:rgba(0,0,0,.4);border:1px solid var(--line-2);border-radius:7px;padding:6px 8px}
.tscroll{overflow-x:auto}
.toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}
.toggle input{accent-color:var(--gold)}
.onlinedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--win);margin-left:6px;box-shadow:0 0 6px var(--win)}

/* profile */
.prof-banner{position:relative;height:120px;margin:-24px -24px 0;border-radius:22px 22px 0 0;overflow:hidden;
  background:radial-gradient(400px 160px at 20% 120%,rgba(212,175,55,.5),transparent 70%),linear-gradient(135deg,#1a1408,#0b0a0e 60%,#2a1f08)}
.prof-banner::after{content:"";position:absolute;inset:0;opacity:.35;background-image:repeating-linear-gradient(45deg,rgba(212,175,55,.25) 0 1px,transparent 1px 14px)}
.prof-head{display:flex;gap:18px;align-items:flex-end;margin-top:-46px;position:relative;flex-wrap:wrap}
.prof-head .av.lg{box-shadow:0 0 0 4px #0b0a0e,0 0 0 6px var(--gold),0 12px 30px rgba(0,0,0,.6)}
.prof-head .av.lg.owner{box-shadow:0 0 0 4px #0b0a0e,0 0 0 6px #f0d488,0 0 40px rgba(212,175,55,.7)}
.prof-name{font-family:var(--display);font-weight:500;font-size:34px;margin:0;line-height:1.05;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.prof-sub{color:var(--muted);font-size:13px;margin-top:4px}
.prof-bio{margin:16px 0 0;color:var(--ivory);font-size:14px;max-width:60ch}
.showcase{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.cabinet-group h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:18px 0 10px;font-weight:700}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:12px}
.badge{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 6px;border-radius:14px;border:1px solid transparent;cursor:default}
.badge.pickable{cursor:pointer}
.badge.pickable:hover{border-color:var(--line-2)}
.badge.picked{border-color:var(--gold);background:rgba(212,175,55,.08)}
.badge .bn{font-size:12px;font-weight:700;line-height:1.2}
.badge .bd{font-size:11px;color:var(--muted);line-height:1.3}
.badge.locked .medal{filter:grayscale(1) brightness(.4)}
.badge.locked .bn{color:var(--dim)}
.medal{--ring:conic-gradient(from 0deg,#8a8577,#d9d4c7,#8a8577,#d9d4c7,#8a8577);position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--ring);box-shadow:0 6px 16px rgba(0,0,0,.6)}
.medal::before{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a2620,#0c0b0e 75%)}
.medal span{position:relative;font-family:var(--display);font-size:26px;line-height:1;color:var(--c,#e8e3d6);text-shadow:0 0 12px currentColor}
.medal.big{width:110px;height:110px}.medal.big span{font-size:52px}
.medal.common{--c:#e8e3d6}
.medal.rare{--ring:conic-gradient(from 0deg,#1e5f9e,#7cc8ff,#1e5f9e,#7cc8ff,#1e5f9e);--c:#9fd6ff}
.medal.epic{--ring:conic-gradient(from 0deg,#5b2a96,#c9a2ff,#5b2a96,#c9a2ff,#5b2a96);--c:#d4b6ff}
.medal.legendary{--ring:conic-gradient(from 0deg,#8c6b1d,#fbecb6,#b8902c,#f0d488,#8c6b1d);--c:#f4dd98;box-shadow:0 6px 16px rgba(0,0,0,.6),0 0 22px rgba(212,175,55,.45)}
.medal.mythic{--ring:conic-gradient(from 0deg,#ff6a3d,#f4dd98,#ff3d8a,#7cc8ff,#f4dd98,#ff6a3d);--c:#fff3c4;box-shadow:0 6px 16px rgba(0,0,0,.6),0 0 26px rgba(255,180,100,.5);animation:mythic 6s linear infinite}
@keyframes mythic{to{filter:hue-rotate(40deg)}}
.rarity{font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.rarity.common{color:#bdb7a8}.rarity.rare{color:#7cc8ff}.rarity.epic{color:#c9a2ff}.rarity.legendary{color:var(--gold-hi)}.rarity.mythic{color:#ffb27a}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{width:30px;height:30px;border-radius:50%;border:2px solid transparent}
.swatches button[aria-pressed="true"]{border-color:var(--gold-hi);box-shadow:0 0 12px rgba(212,175,55,.6)}
.glyphs{display:flex;gap:6px;flex-wrap:wrap}
.glyphs button{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:rgba(0,0,0,.3);font-family:var(--display);font-size:18px}
.glyphs button[aria-pressed="true"]{border-color:var(--gold);background:rgba(212,175,55,.15);color:var(--gold-hi)}
.glyphs button:disabled{opacity:.25}

/* badge celebration */
.celebrate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(circle,rgba(20,16,6,.75),rgba(3,3,4,.9));animation:fade .3s;padding:20px}
.celebrate .cb{text-align:center;max-width:420px}
.celebrate .rays{position:absolute;width:420px;height:420px;left:50%;top:50%;margin:-210px 0 0 -210px;background:repeating-conic-gradient(rgba(244,221,152,.16) 0 8deg,transparent 8deg 20deg);border-radius:50%;-webkit-mask:radial-gradient(circle,#000 20%,transparent 70%);mask:radial-gradient(circle,#000 20%,transparent 70%);animation:spin 12s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.celebrate .medal{margin:0 auto;animation:medalin .8s var(--ease)}
@keyframes medalin{0%{transform:scale(.2) rotate(-180deg);opacity:0}70%{transform:scale(1.12)}100%{transform:none;opacity:1}}
.celebrate h3{font-family:var(--display);font-weight:500;font-size:36px;margin:18px 0 4px}
.celebrate p{color:var(--muted);margin:6px 0 20px}
canvas#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}

/* responsible play */
.rg-box{border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:14px;background:rgba(0,0,0,.25)}
.rg-box h3{margin:0 0 6px;font-size:16px}
.rg-box p{margin:0 0 12px;color:var(--muted);font-size:13px}
.help{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.6}
.help b{color:var(--ivory)}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;background:linear-gradient(180deg,#1c1a20,#111015);color:var(--ivory);border:1px solid var(--line-2);padding:11px 18px;border-radius:12px;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 30px -10px rgba(212,175,55,.5);max-width:calc(100% - 32px);animation:toastin .35s var(--ease)}
@keyframes toastin{from{opacity:0;transform:translate(-50%,12px)}}
.foot{position:relative;z-index:1;color:var(--dim);font-size:12px;padding-block:10px 40px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;border-top:1px solid var(--line);margin-top:10px}
.foot button{all:unset;cursor:pointer;color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}
.age{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--dim);font-size:10px;font-weight:800;color:var(--muted);margin-right:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  #rl-wheel{transition:none!important}
}
.atable .toggle input{width:auto;padding:0}
#pk-board .card{--w:58px}
@media (max-width:680px){#pk-board .card{--w:38px}.seat .card.sm{--w:30px}.seat .mini{gap:2px}#pk-board.hand.spread{gap:4px}}

/* =====================================================================
   v4 — depth, lighting and new games
   ===================================================================== */
:root{--t-bronze:#c98a55;--t-silver:#cfd6de;--t-gold:#f0d488;--t-platinum:#9fe3e0;--t-diamond:#a9c8ff;--t-black:#f4dd98}
/* stage lighting: a soft spotlight that follows the page */
.stage{position:relative}
.stage::before{content:"";position:absolute;inset:-40px -20px auto;height:520px;pointer-events:none;z-index:-1;background:radial-gradient(600px 300px at 50% 0%,rgba(244,221,152,.10),transparent 70%)}
/* padded leather rail + brass trim on every felt */
.felt{border:0;box-shadow:
  0 0 0 2px #2a170e,0 0 0 9px #3b2013,0 0 0 10px rgba(212,175,55,.7),0 0 0 12px #120906,
  inset 0 0 0 1px rgba(244,221,152,.3),inset 0 0 120px rgba(0,0,0,.6),0 40px 80px -30px rgba(0,0,0,.95),0 0 120px -40px rgba(212,175,55,.25);
  margin:12px}
.felt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse 60% 45% at 50% 18%,rgba(255,250,230,.12),transparent 70%)}
/* 2.5D tilt for table games: hit-testing still matches what you see */
.tilt{transform:perspective(1600px) rotateX(9deg);transform-origin:50% 100%}
.bj-table{transform:perspective(1500px) rotateX(13deg);transform-origin:50% 90%}
.bj-table .card,.dt-table .card{transform:translateZ(0)}
.card .front{background:linear-gradient(160deg,#fffef9 0%,#f6eedb 60%,#e9dfc6 100%);box-shadow:0 6px 14px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.7) inset,0 -1px 0 rgba(0,0,0,.08) inset}
.card .front::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.35),transparent 40%);pointer-events:none}
.wheelbox{transform:perspective(1000px) rotateX(32deg);transform-origin:50% 60%;filter:drop-shadow(0 30px 30px rgba(0,0,0,.6))}
.wheelbox::after{content:"";position:absolute;left:8%;right:8%;bottom:-14%;height:18%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);z-index:-1}
.rgrid{transform:perspective(1400px) rotateX(18deg);transform-origin:50% 100%}
@media (max-width:680px){.bj-table,.tilt{transform:none}.rgrid{transform:none}.wheelbox{transform:perspective(900px) rotateX(24deg)}}

/* slot machine cabinet */
.cabinet{transform:perspective(1400px) rotateX(4deg);background:linear-gradient(180deg,#2b1f0a,#0f0a04 55%,#1d1407);border:2px solid #8c6b1d;box-shadow:inset 0 2px 0 rgba(244,221,152,.35),inset 0 -20px 40px rgba(0,0,0,.6),0 40px 80px -24px #000,0 0 80px -20px rgba(212,175,55,.45);padding:26px 30px 30px;margin-right:56px}
.cabinet::before{content:"VELVET SEVENS";display:block;text-align:center;font-family:var(--display);font-style:italic;font-size:clamp(20px,3vw,30px);letter-spacing:.08em;margin:-6px 0 10px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 28px rgba(212,175,55,.35)}
.cabinet .reels{box-shadow:inset 0 0 40px rgba(0,0,0,.95),0 0 0 6px #120c05,0 0 0 8px #d4af37}
.reel{box-shadow:inset 0 10px 18px rgba(0,0,0,.45),inset 0 -10px 18px rgba(0,0,0,.45)}
.reel::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 18%,transparent 82%,rgba(0,0,0,.25))}
.lever{position:absolute;right:-48px;top:40px;width:18px;height:160px;border-radius:9px;background:linear-gradient(90deg,#555,#ddd 45%,#777);transform-origin:50% 100%;transition:transform .35s var(--ease);cursor:pointer;border:0;padding:0}
.lever::before{content:"";position:absolute;left:50%;top:-26px;width:40px;height:40px;margin-left:-20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a7a,#b3171b 60%,#5a0a0c);box-shadow:0 6px 14px rgba(0,0,0,.6)}
.lever::after{content:"";position:absolute;left:-10px;right:-10px;bottom:-12px;height:24px;border-radius:6px;background:linear-gradient(#3a2a10,#140c04);border:1px solid #8c6b1d}
.lever.pull{transform:rotateX(55deg) scaleY(.6)}
.cabinet .credit{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-family:var(--mono);font-size:13px;color:#ff6b5a;background:#0a0503;border:1px solid #3a2a10;border-radius:8px;padding:8px 12px;text-shadow:0 0 8px rgba(255,90,70,.8)}
@media (max-width:620px){.cabinet{margin-right:0;padding:18px}.lever{display:none}}

/* racing depth */
.track{background:linear-gradient(180deg,#081320 0%,#14304e 18%,#1f3e26 22.5%,#2b5e2d 38%,#336f31 70%,#3c7c36 100%)}
.track .turf{background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 70px,rgba(0,0,0,.05) 70px 140px),linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%)}
.track .sky::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 70% 0%,rgba(255,230,170,.25),transparent 70%)}
.horse{transform-origin:0 0}
.horse .shadow{position:absolute;left:12%;right:18%;bottom:-4%;height:16%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.45),transparent 70%)}

/* avatars with pictures and VIP frames */
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.av.t-silver{box-shadow:0 0 0 2px var(--t-silver)}
.av.t-gold{box-shadow:0 0 0 2px var(--t-gold),0 0 10px rgba(240,212,136,.5)}
.av.t-platinum{box-shadow:0 0 0 2px var(--t-platinum),0 0 12px rgba(159,227,224,.55)}
.av.t-diamond{box-shadow:0 0 0 2px var(--t-diamond),0 0 14px rgba(169,200,255,.65)}
.av.t-black{box-shadow:0 0 0 2px #0b0a0e,0 0 0 3.5px #f4dd98,0 0 16px rgba(212,175,55,.7)}
.av.owner{box-shadow:0 0 0 2px #0b0a0e,0 0 0 3.5px #f0d488,0 0 18px rgba(212,175,55,.8)}
.tierchip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:1px 8px;border-radius:999px;border:1px solid currentColor}
.tierchip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tab-gold{color:var(--gold-hi)}

/* side panels for solo games */
.panel-lite{background:rgba(12,11,15,.7);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.panel-lite .field{color:var(--muted)}
.panel-lite .tiles{margin:0}

/* plinko */
.plinko-wrap,.mines-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
@media (max-width:860px){.plinko-wrap,.mines-wrap{grid-template-columns:minmax(0,1fr)}}
.plinko-board{position:relative;aspect-ratio:1/0.92;border-radius:22px;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,#2a2138,#0b0a10 70%);border:1px solid var(--line-2);box-shadow:inset 0 0 80px rgba(0,0,0,.7),0 30px 60px -30px #000}
.plinko-board canvas{width:100%;height:100%;display:block}
.pl-recent{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px}
.pl-recent span{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:6px;color:#17130a;font-weight:500;animation:slidein .3s var(--ease)}

/* bombs */
.mines-board{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:18px;border-radius:22px;background:radial-gradient(ellipse at 50% 0%,#1b2a3a,#07090d 75%);border:1px solid var(--line-2);box-shadow:inset 0 0 60px rgba(0,0,0,.7),0 30px 60px -30px #000;transform:perspective(1200px) rotateX(10deg);transform-origin:50% 100%}
@media (max-width:620px){.mines-board{gap:6px;padding:10px;transform:none}}
.tile{position:relative;aspect-ratio:1;border:0;border-radius:14px;cursor:pointer;background:linear-gradient(160deg,#3a3f52,#232634 60%,#1a1c26);box-shadow:0 6px 0 #0c0d12,0 10px 18px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .15s var(--ease),box-shadow .15s,filter .2s;display:grid;place-items:center;font-size:clamp(22px,5vw,40px)}
.tile:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.2)}
.tile:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #0c0d12,0 4px 8px rgba(0,0,0,.5)}
.tile:disabled{cursor:default}
.tile.gem{background:radial-gradient(circle at 50% 40%,#1d5a46,#0b2a21);box-shadow:0 2px 0 #06140f,inset 0 0 20px rgba(111,220,154,.35);animation:flipT .4s var(--ease)}
.tile.bomb{background:radial-gradient(circle at 50% 40%,#6a1712,#2a0705);box-shadow:0 2px 0 #140302,inset 0 0 22px rgba(255,90,70,.5);animation:flipT .4s var(--ease)}
.tile.bomb.hit{animation:boom .6s var(--ease);box-shadow:0 0 0 3px #ff4a3d,0 0 40px rgba(255,74,61,.8)}
.tile.dim{opacity:.55}
.tile .ic{filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
@keyframes flipT{from{transform:rotateY(90deg)}to{transform:none}}
@keyframes boom{0%{transform:scale(.6)}40%{transform:scale(1.25)}100%{transform:none}}

/* dragon tiger */
.dt-row{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.dt-side{border:1.5px solid var(--felt-line);border-radius:20px;padding:16px;text-align:center;min-height:200px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:box-shadow .4s,border-color .4s}
.dt-side h4{margin:0;font-family:var(--display);font-weight:500;font-size:28px;letter-spacing:.04em}
.dt-side.dragon h4{color:#ff9a8f;text-shadow:0 0 20px rgba(255,90,70,.5)}
.dt-side.tiger h4{color:#ffcf6e;text-shadow:0 0 20px rgba(255,190,80,.5)}
.dt-side.won{border-color:var(--gold-hi);box-shadow:0 0 0 4px rgba(212,175,55,.15),0 0 50px rgba(212,175,55,.5)}
.dt-slot .card{--w:86px}
.dt-vs{font-family:var(--display);font-style:italic;font-size:30px;color:var(--gold-hi)}
@media (max-width:520px){.dt-slot .card{--w:62px}.dt-side{min-height:160px;padding:10px}.dt-side h4{font-size:22px}}
.bead-D{background:#c3302a;color:#fff}.bead-T2{background:#d99a1a;color:#111}


/* VIP club */
.vip-hero{position:relative;overflow:hidden;border-radius:24px;padding:clamp(22px,4vw,40px);border:1px solid var(--line-2);background:radial-gradient(600px 300px at 90% 20%,rgba(212,175,55,.25),transparent 60%),linear-gradient(160deg,#121016,#060507)}
.vip-hero .row{gap:22px;align-items:center}
.vip-medal{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:44px;font-style:italic;color:#17130a;box-shadow:0 0 0 4px #0b0a0e,0 0 0 6px currentColor,0 0 40px currentColor}
.vip-hero h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,5vw,46px);margin:4px 0}
.vip-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:16px 0 6px;box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.vip-bar i{display:block;height:100%;border-radius:inherit;background:var(--gold-grad);box-shadow:0 0 18px rgba(212,175,55,.7);transition:width 1s var(--ease)}
.vip-claims{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}
.vip-claims .panel-lite b{font-family:var(--mono);font-size:24px;color:var(--gold-hi);font-weight:500}
.vip-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.vtier{border-radius:18px;padding:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.2));position:relative}
.vtier.cur{border-color:currentColor;box-shadow:0 0 0 1px currentColor,0 0 40px -10px currentColor}
.vtier h3{margin:0 0 2px;font-family:var(--display);font-weight:500;font-size:24px}
.vtier ul{margin:12px 0 0;padding:0 0 0 18px;color:var(--ivory);font-size:13px;line-height:1.7}
.vtier .at{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* leaderboards */
.lb-seg{flex-wrap:wrap}
.podium3{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;align-items:end;margin:22px 0}
.pod{text-align:center;border-radius:18px 18px 8px 8px;padding:18px 10px 14px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(212,175,55,.12),rgba(0,0,0,.3));display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.pod.p1{padding-top:26px;box-shadow:0 0 50px -16px rgba(212,175,55,.7)}
.pod .place{font-family:var(--display);font-style:italic;font-size:30px;line-height:1}
.pod .val{font-family:var(--mono);color:var(--gold-hi);font-size:16px}
.pod .namebtn{justify-content:center;flex-wrap:wrap}
.lb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:lb 3}
.lb-list li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid var(--line);counter-increment:lb}
.lb-list li::before{content:counter(lb);width:26px;font-family:var(--display);font-style:italic;color:var(--dim);font-size:16px;text-align:center}
.lb-list li .v{margin-left:auto;font-family:var(--mono);color:var(--gold-hi)}
.lb-list li.me{border-color:var(--gold)}

/* chat dock */
.chat-fab{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid #f6e2a2;background:var(--gold-grad);color:#17130a;font-weight:800;box-shadow:0 14px 40px -10px rgba(212,175,55,.8),0 0 0 4px rgba(5,5,6,.6)}
.chat-fab:focus-visible{outline:2px solid #fff}
.chat-unread{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#c3302a;color:#fff;font-size:11px;display:grid;place-items:center}
.chat{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:41;width:min(380px,calc(100vw - 32px));height:min(520px,calc(100vh - 140px));display:flex;flex-direction:column;background:rgba(12,11,15,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-2);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.7);animation:sheetin .3s var(--ease);overflow:hidden}
.chat-head{display:flex;gap:8px;align-items:center;padding:10px;border-bottom:1px solid var(--line)}
.chat-head select{flex:1;padding:8px 10px;font-size:14px}
.chat-log{list-style:none;margin:0;padding:10px 12px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.chat-log li{display:flex;gap:9px;align-items:flex-start;animation:slidein .25s var(--ease)}
.chat-log .bubble{min-width:0;flex:1}
.chat-log .meta{display:flex;align-items:center;gap:6px;font-size:12px;flex-wrap:wrap}
.chat-log .meta time{color:var(--dim);font-size:11px}
.chat-log .txt{font-size:14px;line-height:1.4;overflow-wrap:anywhere;color:var(--ivory)}
.chat-log li.mine .txt{color:var(--gold-hi)}
.chat-log .mod{all:unset;cursor:pointer;color:var(--dim);font-size:11px;margin-left:auto}
.chat-log .mod:hover{color:var(--lose)}
.chat-log .sys{justify-content:center;color:var(--dim);font-size:12px;font-style:italic}
.chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat-form input{flex:1;padding:10px 12px;font-size:14px}
.chat-rules{margin:0;padding:0 12px 10px;font-size:11px;color:var(--dim)}
.nm-t.tc-silver{color:var(--t-silver)}.nm-t.tc-gold{color:var(--t-gold)}.nm-t.tc-platinum{color:var(--t-platinum)}.nm-t.tc-diamond{color:var(--t-diamond)}.nm-t.tc-black{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-pic{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
@media (max-width:680px){.foot{padding-bottom:90px}}
.art-dt{background:radial-gradient(circle at 50% 35%,#5a1410,#140403 70%)}
.art-mw{background:radial-gradient(circle at 50% 35%,#3a2b08,#0c0802 70%)}
.art-pl{background:radial-gradient(circle at 50% 35%,#2a2138,#09080d 70%)}
.art-mn{background:radial-gradient(circle at 50% 35%,#1b2a3a,#05070a 70%)}

.card .front{overflow:hidden}
.dt-slot .card .pip{font-size:calc(var(--w)*.46)}
@media (max-width:620px){.plinko-board{aspect-ratio:1/1.05;border-radius:16px}}
.btn.gold:disabled{filter:saturate(.4) brightness(.7)}

/* owner reset */
.reset-box h3{font-family:var(--serif,Georgia,serif);margin:4px 0 6px;font-size:20px}
.reset-box>p{margin:0 0 14px;font-size:13px}
.reset-opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.reset-opt{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid rgba(212,175,55,.22);border-radius:12px;background:rgba(255,255,255,.025);cursor:pointer;transition:border-color .2s,background .2s}
.reset-opt:not(:has(input:checked)):hover{border-color:rgba(212,175,55,.5)}
.reset-opt:has(input:checked){border-color:#e05a4a;background:rgba(224,90,74,.08)}
.reset-opt input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:#e05a4a}
.reset-opt b{display:block;font-size:15px;margin-bottom:3px}
.reset-opt small{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}
#hp-reset-confirm{max-width:220px;letter-spacing:.12em;font-family:"DM Mono",monospace}
.btn.danger{background:linear-gradient(180deg,#d9503f,#9e2a1e);color:#fff;border:1px solid #f08a7a55}
.btn.danger:disabled{opacity:.4;cursor:not-allowed}

/* email verification */
.verify{text-align:center;animation:viewin .5s var(--ease)}
.verify .vf-icon{width:72px;height:72px;margin:6px auto 12px;border-radius:50%;display:grid;place-items:center;color:var(--gold-2,#f0d488);background:radial-gradient(circle at 35% 30%,rgba(255,240,190,.18),rgba(212,175,55,.06) 60%,transparent 70%);border:1px solid var(--line-2)}
.verify h2{font-family:var(--display);font-weight:500;font-size:26px;margin:0 0 6px}
.vf-text{color:var(--muted);font-size:14.5px;line-height:1.5;margin:0 0 16px}
.verify form{text-align:left;display:grid;gap:12px}
.vf-code{font-family:var(--mono);font-size:28px!important;letter-spacing:.45em;text-align:center;padding:14px 10px!important}
.vf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:14px}
.linkbtn{background:none;border:0;color:var(--gold-2,#f0d488);font:inherit;font-size:13.5px;cursor:pointer;padding:6px 2px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(240,212,136,.35)}
.linkbtn:hover{text-decoration-color:currentColor}
.linkbtn:disabled{color:var(--muted);cursor:default;text-decoration:none}
.vf-fine{margin-top:12px}
.hp-email{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);word-break:break-all}

/* ================= crates ================= */
.art-c8{background:radial-gradient(circle at 50% 40%,#2c2233,#07060a 72%)}
.c8-art{position:relative;width:230px;height:160px}
.c8-a{position:absolute;bottom:0;width:120px;filter:drop-shadow(0 16px 18px rgba(0,0,0,.6))}
.c8-a svg{width:100%;height:auto;display:block}
.c8-l{left:0;transform:scale(.78) rotate(-8deg);transform-origin:bottom}
.c8-r{right:0;transform:scale(.78) rotate(8deg);transform-origin:bottom}
.c8-m{left:55px;z-index:1;bottom:12px;animation:c8float 4s ease-in-out infinite}
@keyframes c8float{50%{transform:translateY(-8px)}}
.cr8-shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
@media (max-width:760px){.cr8-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.cr8-crate{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 10px 14px;border-radius:18px;border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--cc) 22%,transparent),transparent 65%),#0d0c10;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;text-align:center}
.cr8-crate:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--cc) 60%,transparent)}
.cr8-crate:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.cr8-crate.sel{border-color:var(--cc);box-shadow:0 0 0 1px var(--cc),0 18px 40px -16px var(--cc)}
.cr8-crate .crate-svg{width:min(118px,80%);height:auto;transition:transform .4s var(--ease)}
.cr8-crate.sel .crate-svg{animation:c8float 3s ease-in-out infinite}
.cr8-crate .nm{font-family:var(--display);font-size:18px;color:var(--text,#f4efe2)}
.cr8-crate .tg{font-size:12px;color:var(--muted)}
.cr8-crate .pr{margin-top:6px;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:14px;color:#f4dd98;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid rgba(212,175,55,.25)}
.coin-sm{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#d4af37 55%,#6b4f15);display:inline-block}
.cr8-stage{position:relative;border-radius:20px;padding:18px 0 14px;background:linear-gradient(180deg,#0f0d12,#08070a);border:1px solid var(--line-2);box-shadow:inset 0 2px 30px rgba(0,0,0,.7)}
.cr8-reel{position:relative;height:156px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cr8-strip{display:flex;gap:12px;padding:0 6px;will-change:transform;height:100%;align-items:center}
.cr8-strip.idle{animation:c8drift 60s linear infinite}
@keyframes c8drift{to{transform:translateX(-50%)}}
.cr8-marker{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:linear-gradient(180deg,#fff3c4,#d4af37 40%,#d4af37 60%,#fff3c4);box-shadow:0 0 14px rgba(244,221,152,.9);z-index:2}
.cr8-marker::before,.cr8-marker::after{content:"";position:absolute;left:50%;margin-left:-9px;border:9px solid transparent}
.cr8-marker::before{top:0;border-top-color:#f4dd98}
.cr8-marker::after{bottom:0;border-bottom-color:#f4dd98}
.cr8-item{flex:none;width:120px;height:136px;box-sizing:border-box;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--rc) 28%,transparent),transparent 70%),#15131a;border:1px solid color-mix(in srgb,var(--rc) 45%,transparent);border-bottom:3px solid var(--rc);position:relative;transition:transform .3s var(--ease),box-shadow .3s}
.cr8-item .ic{font-size:44px;line-height:1;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.cr8-item b{font-size:12px;font-weight:600;line-height:1.2;max-height:2.4em;overflow:hidden;color:#f4efe2}
.cr8-item .v{font-family:var(--mono);font-size:12px;color:var(--rc)}
.cr8-item.r-legendary,.cr8-item.r-mythic{box-shadow:0 0 22px -4px var(--rc)}
.cr8-item.landed{transform:scale(1.08);box-shadow:0 0 0 2px var(--rc),0 0 40px var(--rc);z-index:1}
.cr8-reel.spinning .cr8-item{filter:saturate(1.1)}
.cr8-result{min-height:86px;display:grid;place-items:center;padding:10px 16px 0;text-align:center}
.cr8-won{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;animation:viewin .5s var(--ease);text-align:left}
.cr8-won .ic{font-size:54px;filter:drop-shadow(0 0 18px var(--rc))}
.cr8-won h3{font-family:var(--display);font-weight:500;font-size:26px;margin:2px 0}
.cr8-won p{margin:0;font-size:14px;color:var(--muted)}
.cr8-won p.good{color:#6fdc9a}
.cr8-won p.bad{color:#ff8a7a}
.cr8-controls{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:16px 0 22px}
.cr8-controls .btn.big{min-width:220px}
.cr8-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px}
@media (max-width:860px){.cr8-cols{grid-template-columns:minmax(0,1fr)}}
.cr8-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cr8-h h3{font-family:var(--display);font-weight:500;font-size:20px;margin:0}
.cr8-odds ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cr8-odds li{display:grid;grid-template-columns:34px minmax(0,1fr) auto 64px;gap:10px;align-items:center;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.025);border-left:3px solid var(--rc)}
.cr8-odds .ic{font-size:22px;text-align:center}
.cr8-odds .nm b{display:block;font-size:13.5px;font-weight:600}
.cr8-odds .nm small{font-size:11.5px;color:var(--rc)}
.cr8-odds .v{font-family:var(--mono);font-size:13px}
.cr8-odds .v.up{color:#6fdc9a}.cr8-odds .v.down{color:#ff8a7a}
.cr8-odds .pc{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right}
.cr8-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;max-height:460px;overflow:auto;padding:2px}
.cr8-own{all:unset;cursor:pointer;position:relative;border-radius:14px}
.cr8-own .cr8-item{width:100%;height:124px}
.cr8-own .cr8-item .ic{font-size:36px}
.cr8-own .sell{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;background:rgba(8,7,10,.78);color:#f4dd98;font-weight:700;opacity:0;transition:opacity .2s}
.cr8-own:hover .sell,.cr8-own:focus-visible .sell{opacity:1}
.cr8-own:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
@media (max-width:620px){.cr8-item{width:104px;height:124px}.cr8-item .ic{font-size:38px}.cr8-reel{height:140px}.cr8-controls .btn.big{width:100%}}
@media (prefers-reduced-motion:reduce){.cr8-strip.idle,.c8-m,.cr8-crate.sel .crate-svg{animation:none}}

/* logo on the sign-in card */
.auth-emblem{display:block;width:132px;height:132px;margin:14px auto 8px;filter:drop-shadow(0 12px 30px rgba(212,175,55,.35));animation:emblemIn 1.1s var(--ease) both}
@keyframes emblemIn{from{opacity:0;transform:rotateY(90deg) scale(.7)}to{opacity:1;transform:none}}
.auth-card .auth-logo{text-align:center}
@media (prefers-reduced-motion:reduce){.auth-emblem{animation:none}}
#auth:not([hidden]) ~ #chatFab,#auth:not([hidden]) ~ #chat{display:none!important}
.btn.danger:hover:not(:disabled){filter:brightness(1.1)}

/* photo crop tool */
.crop-sheet{width:min(420px,100%)}
.crop-stage{position:relative;width:min(320px,78vw);aspect-ratio:1;margin:6px auto 0;border-radius:16px;overflow:hidden;touch-action:none;cursor:grab;background:#111;outline:none;user-select:none;-webkit-user-select:none}
.crop-stage.drag{cursor:grabbing}
.crop-stage:focus-visible{box-shadow:0 0 0 2px var(--gold-hi)}
.crop-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.crop-ring{position:absolute;inset:0;pointer-events:none;border-radius:16px;background:radial-gradient(circle closest-side,transparent 99%,rgba(5,5,6,.62) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.crop-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(244,221,152,.85);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 24px rgba(212,175,55,.35)}
.crop-zoom{display:flex;align-items:center;gap:10px;width:min(320px,78vw);margin:16px auto 0}
.crop-zoom input{flex:1;accent-color:var(--gold)}
.crop-zoom .btn{width:40px;height:40px;padding:0;font-size:20px;line-height:1;border-radius:50%;display:grid;place-items:center}
.crop-tip{text-align:center;color:var(--muted);font-size:13px;margin:10px 0 16px}
.crop-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.crop-actions #cropReset{margin-right:auto}
#cropper{z-index:80}

/* ================= house panel v6 ================= */
.hp-tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.hp-tabs::-webkit-scrollbar{display:none}
.hp-tabs button{white-space:nowrap}
.hp-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:#c3302a;color:#fff;font-size:11px;font-weight:800;vertical-align:1px}
.hp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hp-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.hp-grid,.hp-grid.two{grid-template-columns:minmax(0,1fr)}}
.hp-card h3{font-family:var(--display);font-weight:500;font-size:19px;margin:0 0 4px}
.hp-card>.empty{margin:2px 0 10px;font-size:13px}
.hp-card textarea{width:100%;box-sizing:border-box;resize:vertical;font:inherit;font-size:14px;padding:10px 12px}
.ov-bars{display:grid;grid-template-columns:repeat(14,1fr);gap:5px;align-items:end;height:150px;margin-top:14px}
.ov-bar{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.ov-bar i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,rgba(244,221,152,.85),rgba(140,107,29,.5));min-height:4px;transition:height .6s var(--ease)}
.ov-bar.today i{background:var(--gold-grad);box-shadow:0 0 14px rgba(212,175,55,.6)}
.ov-bar span{position:absolute;top:-2px;font-family:var(--mono);font-size:10px;color:var(--gold-hi);transform:translateY(-100%)}
.ov-bar small{margin-top:5px;font-size:10px;color:var(--muted)}
.ov-stats{display:grid;gap:0;margin:8px 0 0}
.ov-stats div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ov-stats dt{color:var(--muted);font-size:13.5px}
.ov-stats dd{margin:0;font-family:var(--mono);font-size:13.5px;color:#f4efe2}
.ov-stats dd.warn{color:#ffb35c}
.ov-games{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.ov-games li{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:13.5px}
.ov-games i{display:block;height:10px;border-radius:999px;background:var(--gold-grad);min-width:4px}
.ov-games b{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--gold-hi)}
.ov-list{margin:8px 0 0;padding-left:20px;display:grid;gap:4px}
.ov-list li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.ov-list li span{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.ov-list .linkbtn{padding:0}
.danger-text{color:#ff8a7a!important}
.ban-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.ban-card{border:1px solid rgba(224,90,74,.35);border-left:4px solid #e05a4a;border-radius:14px;padding:14px 16px;background:linear-gradient(180deg,rgba(224,90,74,.07),rgba(255,255,255,.015));display:flex;flex-direction:column;gap:8px}
.ban-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ban-len-tag{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(255,179,92,.14);color:#ffb35c;white-space:nowrap}
.ban-len-tag.perm{background:rgba(224,90,74,.18);color:#ff8a7a}
.ban-why{margin:0;font-size:14.5px;line-height:1.45;color:#f4efe2}
.ban-card .row{gap:8px;flex-wrap:wrap;margin-top:2px}
.ban-empty{padding:30px;text-align:center;grid-column:1/-1}
.chip-quick{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip-quick button{border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:#e9e2cf;border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;cursor:pointer;transition:border-color .2s,background .2s}
.chip-quick button:hover{border-color:var(--gold);background:rgba(212,175,55,.1)}
#banReason{width:100%;box-sizing:border-box;resize:vertical;font:inherit;font-size:14px;padding:10px 12px}
.ban-len{display:flex;flex-wrap:wrap;margin-top:6px}
.ban-len button{flex:1 1 auto}
#hpBan .err{min-height:18px}
#hpBan,#hpPlayer{z-index:70}
/* player sheet */
.ap-sheet{width:min(940px,100%)}
.ap-head{display:flex;align-items:center;gap:14px}
.ap-head h2{margin:0;font-family:var(--display);font-weight:500;font-size:28px}
.ap-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ap-tag{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.06);color:#d9d2c0}
.ap-tag.gold{background:rgba(212,175,55,.16);color:var(--gold-hi)}
.ap-tag.bad{background:rgba(224,90,74,.18);color:#ff8a7a}
.ap-tag.good{background:rgba(111,220,154,.14);color:#6fdc9a}
.ap-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:4px 0 16px}
.ap-stats div{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);min-width:0}
.ap-stats dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ap-stats dd{margin:3px 0 0;font-family:var(--mono);font-size:13.5px;color:#f4efe2;overflow-wrap:anywhere}
.ap-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:760px){.ap-cols{grid-template-columns:minmax(0,1fr)}}
.ap-side{display:grid;gap:14px;align-content:start}
.ap-cols .hp-card>.label{display:block;margin:12px 0 6px}
.ap-cols textarea{width:100%;box-sizing:border-box;resize:vertical;font:inherit;font-size:14px;padding:10px 12px}
.ap-btns{gap:8px;flex-wrap:wrap;margin-top:8px}
.ap-banbox{border-radius:12px;padding:10px 12px;background:rgba(224,90,74,.1);border:1px solid rgba(224,90,74,.3);margin:8px 0 4px}
.ap-banbox .label{color:#ff8a7a}
.ap-banbox p{margin:4px 0 0;font-size:14px}
.ap-notes,.ap-hist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;max-height:260px;overflow:auto}
.ap-notes li,.ap-hist li{padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.03);position:relative}
.ap-notes li p,.ap-hist li p{margin:2px 0 4px;font-size:13.5px;line-height:1.4;overflow-wrap:anywhere}
.ap-notes .linkbtn{position:absolute;right:8px;top:6px;font-size:12px}
.ap-hist li{border-left:3px solid var(--muted)}
.ap-hist li.k-warn{border-left-color:#ffb35c}.ap-hist li.k-bad{border-left-color:#e05a4a}.ap-hist li.k-good{border-left-color:#6fdc9a}
.ap-hist b{font-size:13px}
.ap-notes .empty,.ap-hist .empty{background:none;padding:4px 0}
/* suspended screen */
.banned-screen{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 30%,rgba(122,21,48,.45),transparent 60%),#050506}
.banned-screen[hidden]{display:none}
.bs-card{width:min(460px,100%);text-align:center;padding:34px 28px 28px;border-radius:22px;background:rgba(16,12,14,.92);border:1px solid rgba(224,90,74,.45);box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 80px -30px rgba(224,90,74,.6);animation:viewin .6s var(--ease)}
.bs-icon{width:76px;height:76px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;color:#ff8a7a;background:rgba(224,90,74,.12);border:1px solid rgba(224,90,74,.4)}
.bs-card h2{font-family:var(--display);font-weight:500;font-size:28px;margin:0 0 8px;line-height:1.15}
.bs-sub{color:var(--muted);margin:0 0 18px;font-size:14.5px}
.bs-reason{text-align:left;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.bs-reason p{margin:4px 0 0;font-size:15.5px;line-height:1.45;color:#f4efe2;overflow-wrap:anywhere}
.bs-when{margin:16px 0 6px;font-size:14.5px;color:#e9e2cf}
.bs-when b{color:#ffb35c}
.bs-when span{color:var(--muted)}
.bs-fine{color:var(--muted);font-size:12.5px;margin:12px 0 18px}
/* warning + announcement popup */
.notice-ov{z-index:90}
.notice-card{text-align:center;padding-top:30px}
.nt-icon{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:900;background:rgba(212,175,55,.14);border:1px solid rgba(212,175,55,.45);color:var(--gold-hi)}
.notice-ov.warn .nt-icon{background:rgba(255,179,92,.14);border-color:rgba(255,179,92,.55);color:#ffb35c;font-family:var(--display)}
.notice-card h2{font-family:var(--display);font-weight:500;font-size:26px;margin:6px 0 10px}
.nt-text{font-size:16px;line-height:1.5;color:#f4efe2;margin:0 0 12px;overflow-wrap:anywhere}
.notice-card .btn.big{width:100%;margin-top:14px}
.notice-ov.warn .notice-card{border-color:rgba(255,179,92,.45)}
.overlay{grid-template-columns:minmax(0,1fr)}
.overlay>.sheet{justify-self:center;max-width:100%;min-width:0;box-sizing:border-box}

/* phones and tablets: no double-tap zoom, and no auto-zoom when tapping a text box */
@media (pointer:coarse){
  html,body{touch-action:manipulation}
  button,a,label,input,select,textarea,canvas,.tile,.chip,.spot-b,.cr8-crate{touch-action:manipulation}
  input,select,textarea{font-size:16px!important}
}

.mail-test{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
.mt-out{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.mt-out.good{color:#6fdc9a}
.mt-out.bad{color:#ffb35c}

/* forgot password + delete */
.forgot-link{display:block;margin:10px auto 0;font-size:13.5px}
.ap-owner{margin-top:16px;padding-top:12px;border-top:1px dashed rgba(224,90,74,.35)}
.ap-owner>.label{display:block;margin-bottom:6px;color:#ff8a7a}
.del-btn{margin-top:10px;width:100%}
.del-warn{padding:12px 14px;border-radius:12px;background:rgba(224,90,74,.1);border:1px solid rgba(224,90,74,.35);font-size:14px;line-height:1.45}
.del-warn b{color:#ff8a7a}
#hpDel{z-index:75}
#hpDel .err{min-height:18px}

/* crate item illustrations */
.ic .art-ic{display:block;width:1.4em;height:1.4em}
.ic .art-ic svg{width:100%;height:100%;display:block;overflow:visible}
.cr8-item .ic{line-height:1}
.cr8-odds .ic .art-ic{width:30px;height:30px}
.cr8-odds li{grid-template-columns:38px minmax(0,1fr) auto 64px}
.cr8-won .ic .art-ic{width:84px;height:84px}

/* typed bet amounts */
.bet-in{width:7.5em;text-align:right;font-family:var(--mono);font-size:22px!important;background:rgba(0,0,0,.35);border:1px solid var(--line-2);border-radius:8px;padding:4px 8px;color:var(--gold-hi);font-size:inherit;font-weight:500}
.bet-in:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,.25)}
.bet-in:disabled{opacity:.5}
.chip-custom{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 6px 0 10px;border-radius:999px;border:1px dashed rgba(212,175,55,.45);background:rgba(0,0,0,.3);cursor:text}
.chip-custom span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chip-custom input{width:5.2em;border:0;background:transparent;color:var(--gold-hi);font-size:15px;outline:none;padding:4px 0}
.chip-custom.sel{border-style:solid;border-color:var(--gold-hi);box-shadow:0 0 0 2px rgba(244,221,152,.25),0 0 16px rgba(212,175,55,.35)}
.chip-custom.sel span{color:var(--gold-hi)}

/* ---------- phone layout ---------- */
.rcell{grid-column:var(--dc);grid-row:var(--dr)}
.purse .btn .sm{display:none}
@media (max-width:680px){
  .top .bar{flex-wrap:nowrap;gap:8px;padding-block:7px}
  .brand{gap:8px;flex:none}
  .mark{width:32px;height:32px}
  .brand b{font-size:19px}
  .brand small{display:none}
  .purse{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:6px;flex-wrap:wrap;row-gap:6px}
  .balance{padding:4px 10px 4px 4px;gap:6px}
  .balance .coin{width:20px;height:20px}
  .balance b{font-size:15px}
  .balance span{display:none}
  .purse .btn{padding:7px 11px;font-size:13px;min-height:34px;white-space:nowrap}
  .purse .btn .lg{display:none}
  .purse .btn .sm{display:inline}
  .me-btn{padding:3px;gap:4px}
  .me-btn .nm-t,.me-btn>[aria-hidden]{display:none}
  .menu{min-width:0;width:min(300px,calc(100vw - 24px));max-height:calc(100dvh - 90px);overflow-y:auto}
  .menu button{padding:13px 14px}
  .games{margin-inline:-16px;padding-inline:10px;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
  .tab{scroll-snap-align:center;padding:9px 12px;min-height:40px}
  /* round chat button, chat opens as a sheet */
  .chat-fab{padding:0;width:54px;height:54px;justify-content:center;font-size:20px;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .chat-fab .t{display:none}
  .chat-fab .chat-unread{position:absolute;top:-4px;right:-4px}
  .chat{left:0;right:0;bottom:0;width:auto;height:min(78dvh,620px);border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .chat-form input,.chat-head select{font-size:16px}
  /* roulette table turns upright so it fits the screen */
  .tablewrap{overflow:visible;padding:6px 0 8px}
  .rgrid{min-width:0;max-width:420px;margin:0 auto;grid-template-columns:40px 40px repeat(3,minmax(0,1fr));grid-template-rows:44px repeat(12,40px) 40px}
  .rcell{grid-column:var(--mc);grid-row:var(--mr)}
  .rcell.zero{border-radius:22px 22px 5px 5px}
  .rcell.side{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px}
  .rcell.side[data-k=red],.rcell.side[data-k=black]{writing-mode:horizontal-tb;transform:none}
  .rcell .stake{right:-4px;top:-6px}
}
@media (max-width:400px){
  .brand>span{display:none}
}
/* nothing may widen the page sideways on a phone */
html,body{overflow-x:clip}
.wheelbox{overflow:clip;overflow-clip-margin:16px}
.dstats{grid-template-columns:repeat(3,minmax(0,1fr))}
.dstats b{overflow-wrap:anywhere}
@media (max-width:420px){.dstats{gap:6px}.dstats div{padding:8px}.dstats b{font-size:16px}.dstats .label{font-size:10px}}
@media (max-width:680px){.chat-fab .ico{width:24px;height:24px}}
@media (max-width:420px){.dstats .label{letter-spacing:.04em;overflow-wrap:anywhere;line-height:1.2}}

/* ---------- blackjack table ---------- */
.bj-table{min-height:500px;padding-top:24px}
.bj-table .shoe{display:none}
.bj-shoe{position:absolute;right:26px;top:18px;width:78px;height:96px;z-index:4;--fill:1}
.bj-shoe::before{content:"";position:absolute;inset:0;border-radius:10px 26px 10px 10px;background:linear-gradient(160deg,#3a2d22,#140e0a 70%);border:1px solid rgba(212,175,55,.55);box-shadow:0 12px 22px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.12)}
.bj-shoe-stack{position:absolute;left:10px;right:16px;bottom:12px;height:calc(62px * var(--fill));border-radius:4px;background:repeating-linear-gradient(0deg,#efe5cf 0 2px,#cfc2a6 2px 3px);transform:skewX(-10deg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);transition:height .6s var(--ease)}
.bj-mouth{position:absolute;left:-6px;bottom:6px;width:46px;height:62px;border-radius:6px;transform:rotate(-14deg);background:repeating-linear-gradient(45deg,rgba(212,175,55,.25) 0 2px,transparent 2px 7px),radial-gradient(circle,#2a0d13,#120408);border:2px solid #f1e8d4;box-shadow:0 6px 12px rgba(0,0,0,.5)}
.bj-shoe-left{position:absolute;left:0;right:0;bottom:-20px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:rgba(244,238,220,.55)}
.bj-shoe-left::after{content:" cards"}
.bj-discard{position:absolute;left:26px;top:22px;width:56px;height:76px;border-radius:8px;border:1.5px dashed rgba(244,238,220,.22);background:rgba(0,0,0,.15);z-index:1}
.bj-discard::before{content:"";position:absolute;inset:6px;border-radius:5px;background:repeating-linear-gradient(0deg,rgba(241,232,212,.5) 0 1px,transparent 1px 3px);opacity:.35}
.bj-discard.bump{animation:trayBump .5s .45s var(--ease)}
@keyframes trayBump{40%{transform:scale(1.08)}}
.bj-dlabel{font-size:11px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,238,220,.72);display:flex;align-items:center;gap:8px}
.bj-dealer .hand{min-height:96px}
.bj-table .card.bjc{will-change:transform}
.total.tw{border-color:rgba(244,221,152,.7);color:var(--gold-hi)}
.total.bump{animation:totBump .35s var(--ease)}
@keyframes totBump{40%{transform:scale(1.22)}}
.bj-seats{gap:12px;margin-top:40px}
.bseat{width:auto;min-width:118px}
.bseat.leaving{opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s}
.bs-hands{display:flex;gap:10px;justify-content:center;min-height:62px}
.bs-hand{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 4px 2px;border-radius:12px;transition:background .25s,box-shadow .25s}
.bs-hand.active{background:rgba(212,175,55,.1);box-shadow:inset 0 0 0 1px rgba(244,221,152,.55)}
.bseat.split .bs-hand:not(.active){opacity:.82}
.bs-hand .hand{min-height:62px}
.bs-meta{display:flex;gap:5px;align-items:center;min-height:20px}
.bs-meta .res:empty{display:none}
.bseat .res.push{color:var(--ivory)}
.bseat .res.bj{background:var(--gold-grad);color:#17130a;box-shadow:0 0 18px rgba(212,175,55,.7)}
.bseat .spot{width:62px;height:62px}
.bseat .spot .ring{position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(var(--gold-hi) calc(var(--p,0) * 360deg),transparent 0);-webkit-mask:radial-gradient(circle,transparent 62%,#000 64%);mask:radial-gradient(circle,transparent 62%,#000 64%);opacity:0;transition:opacity .3s}
.bseat.turn .spot .ring{opacity:1}
.bseat .spot .stack-w{transform:translateY(4px)}
.bs-name{max-width:140px}
.bseat .bst{min-height:16px;font-size:11px;color:rgba(244,238,220,.7);letter-spacing:.04em}
.bseat.turn .bst{color:var(--gold-hi);font-weight:700}
.bs-net{position:absolute;left:50%;top:40%;transform:translate(-50%,0);font-family:var(--mono);font-weight:600;font-size:18px;pointer-events:none;opacity:0;white-space:nowrap;text-shadow:0 2px 8px #000}
.bs-net.show{animation:netUp 2.6s var(--ease) forwards}
.bs-net.win{color:var(--win)}.bs-net.lose{color:var(--lose)}
@keyframes netUp{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}15%{opacity:1;transform:translate(-50%,-14px) scale(1.1)}70%{opacity:1;transform:translate(-50%,-26px)}100%{opacity:0;transform:translate(-50%,-40px)}}
.bj-turnbar{height:4px;border-radius:4px;margin:10px 4px 0;background:rgba(255,255,255,.05);overflow:hidden}
.bj-turnbar i{display:block;height:100%;background:var(--gold-grad);transform-origin:left;transform:scaleX(0);transition:transform .2s linear}
.bj-turnbar i.urgent{background:linear-gradient(90deg,#e0533f,#ff8a70)}
.bj-acts kbd{font-family:var(--mono);font-size:10px;opacity:.55;margin-left:6px;padding:1px 5px;border-radius:4px;border:1px solid currentColor}
.bj-acts .btn.hint{box-shadow:0 0 0 2px var(--win),0 0 18px rgba(111,220,154,.55)}
.bj-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}
.bj-foot .btn.sm{padding:6px 12px;font-size:12px}
.bj-foot .btn[aria-pressed="true"]{border-color:var(--win);color:var(--win)}
.bj-tip{color:var(--win);font-weight:700}
.bj-rules{margin-left:auto;color:var(--dim)}
@media (pointer:coarse){.bj-acts kbd{display:none}}
@media (max-width:680px){
  .bj-table{min-height:420px;padding:16px 10px 10px;border-radius:20px 20px 46% 46% / 20px 20px 70px 70px}
  .bj-shoe{right:12px;top:12px;transform:scale(.7);transform-origin:top right}
  .bj-discard{left:12px;top:14px;width:38px;height:52px}
  .bj-table .statusbar{padding-inline:46px 64px;justify-content:center;text-align:center}
  .bj-dealer .hand{min-height:80px}
  .bj-dealer .card{--w:52px}
  .bj-print{font-size:12px;margin-top:8px}
  .bj-seats{gap:6px;margin-top:20px}
  .bseat{min-width:0;flex:0 1 auto}
  .bs-hands{gap:4px}
  .bseat .card.sm{--w:38px}
  .bseat .spot{width:46px;height:46px}
  .bj-acts.playing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .bj-acts.playing .btn{min-height:50px;font-size:16px}
  .bj-rules{margin-left:0}
}
.bs-name{max-width:150px}.bs-name .tag{display:none}
.bseat.me .bs-name::after{content:"You";display:block;text-align:center;font-size:9px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:2px}
@media (max-width:680px){.bj-table{min-height:340px}.bs-name{max-width:96px}}
.bseat .spot .stack-w{transform:none}.bseat .spot .stack-amt{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%)}.bseat .bs-name{margin-top:12px}
.bs-net{top:-30px}

/* ===================== game categories (header + lobby) ===================== */
.games{display:block;overflow:visible;padding-block:6px 0}
.cats,#subtabs,.lobby-filter{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cats::-webkit-scrollbar,#subtabs::-webkit-scrollbar,.lobby-filter::-webkit-scrollbar{display:none}
.cats{padding-block:2px 6px}
.cat{flex:none;display:flex;align-items:center;gap:7px;border:1px solid transparent;background:transparent;color:var(--muted);font-weight:700;font-size:13.5px;padding:7px 13px;border-radius:999px;position:relative;transition:color .2s,background .2s,border-color .2s;white-space:nowrap}
.cat .ci{font-size:13px;line-height:1;opacity:.75;font-family:var(--display)}
.cat:hover{color:var(--ivory);background:rgba(255,255,255,.04)}
.cat[aria-selected="true"]{color:#17130a;background:var(--gold-grad);border-color:#f6e2a2;box-shadow:0 4px 18px -6px rgba(212,175,55,.7)}
.cat[aria-selected="true"] .ci{opacity:1}
.cat-gold{color:var(--gold-hi)}
.cat .tab-dot{position:absolute;top:3px;right:5px;margin:0}
#subtabs{gap:2px;border-top:1px solid var(--line);padding-block:4px}
#subtabs[hidden],.tgroup[hidden]{display:none}
.tgroup{display:flex;gap:2px;flex:none}
.tab{white-space:nowrap}

.lobby-filter{margin:-4px 0 18px;gap:6px;padding-bottom:2px}
.lobby-filter button{flex:none;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;white-space:nowrap;transition:all .2s}
.lobby-filter button span{font-family:var(--mono);font-weight:500;font-size:11px;opacity:.7;margin-left:3px}
.lobby-filter button:hover{color:var(--ivory);border-color:rgba(212,175,55,.4)}
.lobby-filter button[aria-pressed="true"]{color:var(--gold-hi);border-color:var(--gold);background:rgba(212,175,55,.12)}
.lobby-cats{display:flex;flex-direction:column;gap:30px}
.lcat[hidden]{display:none}
.lcat-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.lcat-h h3{font-family:var(--display);font-weight:500;font-size:24px;margin:0;color:var(--gold-hi)}
.lcat-h h3 span{font-family:var(--mono);font-size:12px;color:var(--muted);vertical-align:middle;padding:2px 8px;border:1px solid var(--line);border-radius:999px;margin-left:4px}
.lcat-h p{margin:0;color:var(--muted);font-size:13px}
.grid-games.one{grid-template-columns:minmax(0,1fr)}
.grid-games.one .gcard{min-height:200px}

@media (max-width:680px){
  .games{margin-inline:0;padding-inline:0;-webkit-mask-image:none;mask-image:none;scroll-snap-type:none}
  .cats,#subtabs{margin-inline:-16px;padding-inline:12px;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
  .cat{scroll-snap-align:center;min-height:40px;padding:8px 13px;font-size:13px}
  #subtabs .tab{min-height:40px;padding:9px 12px}
  .lobby-filter{margin-inline:-16px;padding-inline:16px}
  .lobby-filter button{min-height:40px}
  .lobby-cats{gap:24px}
  .lcat-h{gap:4px 10px}
  .lcat-h h3{font-size:21px}
  /* two games side by side on phones, so each category fits on one screen */
  .lcat .grid-games{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lcat .grid-games.one{grid-template-columns:minmax(0,1fr)}
  .lcat .gcard{min-height:176px;border-radius:16px}
  .lcat .gcard .art>*{transform:scale(.7) translateY(-14%)}
  .lcat .gcard .meta{padding:12px}
  .lcat .gcard h3{font-size:19px}
  .lcat .gcard p{font-size:11.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lcat .gcard .corner{top:9px;left:9px}.lcat .gcard .corner .pill{font-size:10px;padding:2px 7px}
  .lcat .gcard .count{right:9px;top:9px;font-size:10px;padding:1px 7px}
  .lcat .grid-games.one .gcard{min-height:170px}
  .lcat .grid-games.one .gcard .art>*{transform:scale(.82) translateY(-10%)}
}
@media (max-width:360px){.lcat .gcard h3{font-size:17px}.lcat .gcard p{display:none}}