/* ================================================================
   CASINO CITY
   Design language borrowed from pixr.fi: acid slabs used as SURFACE
   (not accent), oversized Inter 900 display type with hard offset
   shadows, JetBrains Mono micro-labels, inverted paper documents,
   hard edges, zero radius, zero blur.
   ================================================================ */
:root{
  --amber:#ff9f43;
  --black:#070b16;
  --ink:#0c1322;
  --panel:#101827;
  --panel-2:#162034;
  --line:#2a3852;
  --line-soft:#1b2740;
  --muted:#8ea0c0;
  --soft:#5d6f92;
  --paper:#eef3ff;
  --blue:#22d3ee;
  --pink:#ff5c5c;
  --green:#33d69f;
  --violet:#6c7dff;
  --sans:"Inter",Arial,sans-serif;
  --mono:"JetBrains Mono",SFMono-Regular,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --nav:54px;
  --ticker:32px;
  --foot:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--black);color:var(--paper);font-family:var(--sans);
  overflow:hidden;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase}
.lbl{font-size:9px;color:var(--soft);letter-spacing:.2em}
button,a{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;text-decoration:none}
input{font-family:var(--mono)}
::selection{background:var(--amber);color:var(--black)}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;z-index:200;background:var(--black);display:grid;place-items:center;
  transition:opacity .5s var(--ease),visibility .5s}
#boot.done{opacity:0;visibility:hidden}
.boot-inner{width:min(460px,84vw);text-align:center}
.boot-mark{width:96px;height:96px;margin:0 auto 22px;
  background:url(./assets/logo.png) 50% 25%/320% auto no-repeat;box-shadow:6px 6px 0 rgba(255,159,67,.16)}
.boot-name{font-weight:900;font-size:44px;letter-spacing:-.045em;line-height:1;
  text-shadow:4px 4px 0 rgba(255,159,67,.22)}
.boot-bar{margin:24px 0 10px;height:3px;background:#1a2438;overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:var(--amber);transition:width .35s var(--ease)}
.boot-log{font-size:9px;color:var(--soft)}

/* ---------- acid nav ---------- */
#nav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:80;
  background:var(--amber);color:var(--black);border-bottom:2px solid var(--black);
  display:flex;align-items:stretch;gap:0}
.logo{display:flex;align-items:center;gap:10px;padding:0 16px;border-right:2px solid var(--black);
  cursor:pointer;transition:.14s var(--ease)}
.logo:hover{background:rgba(7,11,22,.12)}
.logo:active{transform:translateY(1px)}
.logo-mark{width:30px;height:30px;flex:0 0 auto;border:1px solid rgba(7,11,22,.5);
  background:url(./assets/logo.png) 50% 25%/320% auto no-repeat}
.logo-txt{font-weight:900;font-size:16px;letter-spacing:-.035em;white-space:nowrap}
.nav-links{display:flex;align-items:stretch}
.nav-links a{display:flex;align-items:center;padding:0 16px;font-size:10px;font-weight:500;
  border-right:1px solid rgba(7,11,22,.22);transition:.14s var(--ease)}
.nav-links a:hover{background:rgba(7,11,22,.1)}
.nav-links a.on{background:var(--black);color:var(--amber);font-weight:700}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;padding:0 12px}
.chip-balance{font-size:10px;color:var(--black);border:2px solid var(--black);padding:6px 9px;font-weight:500}
.chip-balance b{font-weight:700}

/* ---------- buttons: hard edges, hard shadows ---------- */
.btn{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:10px 14px;border:2px solid var(--black);transition:.14s var(--ease);white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px;justify-content:center}
.btn-black{background:var(--black);color:var(--amber);box-shadow:4px 4px 0 rgba(7,11,22,.35)}
.btn-black:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(7,11,22,.45)}
.btn-amber{background:var(--amber);color:var(--black);box-shadow:5px 5px 0 var(--black)}
.btn-amber:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--black)}
.btn-outline{background:transparent;color:var(--amber);border-color:var(--amber);box-shadow:5px 5px 0 rgba(255,159,67,.18)}
.btn-outline:hover{background:var(--amber);color:var(--black)}
.btn-paper{background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 rgba(7,11,22,.75)}
.btn-paper:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(7,11,22,.85)}
.btn-ghost{border:1px solid var(--line);color:var(--muted);box-shadow:none;font-weight:500}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn-lg{padding:16px 22px;font-size:11px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.arw{transition:transform .16s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- activity ticker ---------- */
#ticker{position:fixed;top:var(--nav);left:0;right:0;height:var(--ticker);z-index:70;
  background:var(--black);border-bottom:1px solid var(--line-soft);display:flex;align-items:stretch;overflow:hidden}
.ticker-lbl{flex:0 0 auto;display:flex;align-items:center;padding:0 12px;font-size:9px;
  background:var(--panel-2);color:var(--muted);border-right:1px solid var(--line-soft)}
.ticker-track{flex:1;overflow:hidden;position:relative;display:flex;align-items:center}
.ticker-run{display:flex;gap:26px;white-space:nowrap;font-size:9px;color:var(--muted);
  padding-left:16px;will-change:transform}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{display:inline-flex;gap:8px;align-items:center}
.tk i{width:5px;height:5px;background:var(--green);font-style:normal}
.tk b{color:var(--paper);font-weight:500}
.tk u{color:var(--amber);text-decoration:none}

/* ---------- stage ---------- */
#stage{position:fixed;top:calc(var(--nav) + var(--ticker));left:0;right:0;bottom:var(--foot)}
#city{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#city.drag{cursor:grabbing}

/* ---------- hero gate ---------- */
#hero{position:absolute;inset:0;z-index:50;padding:0 clamp(20px,6vw,86px);
  display:flex;flex-direction:column;justify-content:center;gap:22px;
  background:linear-gradient(100deg,rgba(7,11,22,.97) 34%,rgba(7,11,22,.78) 58%,rgba(7,11,22,.15) 92%);
  transition:opacity .45s var(--ease),visibility .45s}
#hero.gone{opacity:0;visibility:hidden}
/* while the gate is up, the HUD stays out of the way */
body.intro .panel,body.intro .dock,body.intro .hud-hint{opacity:0;pointer-events:none}
.panel,.dock,.hud-hint{transition:opacity .4s var(--ease)}
.hero-kicker{font-size:10px;color:var(--amber);letter-spacing:.26em}
.hero-h1{font-size:clamp(40px,6.6vw,88px);font-weight:900;letter-spacing:-.05em;line-height:.84;
  text-transform:uppercase;text-shadow:4px 4px 0 var(--black),9px 9px 0 rgba(255,159,67,.3)}
.hero-h1 em{font-style:normal;color:var(--amber)}
.hero-p{max-width:440px;font-size:13px;line-height:1.7;color:var(--muted)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
.hero-stats{display:flex;gap:34px;margin-top:14px;border-top:1px solid var(--line-soft);padding-top:16px;max-width:520px}
.hero-stats div{display:flex;flex-direction:column;gap:4px}
.hero-stats b{font-family:var(--sans);font-size:22px;font-weight:900;letter-spacing:-.03em}
.hero-stats span{font-size:8px;color:var(--soft);letter-spacing:.18em}

/* ---------- panels ---------- */
.panel{position:absolute;top:18px;width:252px;z-index:20;
  background:var(--panel);border:1px solid var(--line);box-shadow:7px 7px 0 rgba(0,0,0,.55);
  display:flex;flex-direction:column;max-height:calc(100% - 216px)}
.panel-left{left:18px}
.panel-right{right:18px;width:312px}
.panel-head{display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--panel-2);border-bottom:1px solid var(--line)}
.panel-head .lbl{flex:1}
.panel-num{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--line);letter-spacing:-.02em}
.panel-toggle{font-size:11px;color:var(--soft);line-height:1;padding:2px 4px}
.panel-toggle:hover{color:var(--amber)}
.panel-body{padding:12px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.panel.collapsed .panel-body,.dock.collapsed .dock-body{display:none}
.panel-body::-webkit-scrollbar,.dock-body::-webkit-scrollbar{width:5px;height:5px}
.panel-body::-webkit-scrollbar-thumb,.dock-body::-webkit-scrollbar-thumb{background:var(--line)}

.districts{list-style:none;display:flex;flex-direction:column;gap:2px}
.districts li{display:flex;align-items:center;gap:9px;padding:8px;cursor:pointer;
  border-left:3px solid transparent;transition:.14s var(--ease)}
.districts li:hover{background:#1a2438}
.districts li.on{background:var(--amber);color:var(--black);border-left-color:var(--black)}
.districts li.on .dp{color:rgba(7,11,22,.65)}
.zone-mark{display:grid;place-items:center;flex:0 0 auto;color:var(--zc)}
.zone-mark .ico{width:17px;height:17px;display:block}
.districts li.on .zone-mark{color:var(--black)}
.hold-mark .ico{width:20px;height:20px}
.districts .dn{font-size:11px;font-weight:800;letter-spacing:-.015em;flex:1}
.districts .dp{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.08em}

.segmented{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.segmented button{font-size:9px;padding:8px 2px;color:var(--soft);letter-spacing:.1em}
.segmented button+button{border-left:1px solid var(--line)}
.segmented button.on{background:var(--amber);color:var(--black);font-weight:700}
.jump{display:grid;grid-template-columns:1fr 1fr auto;gap:6px}
.jump input{background:var(--black);border:1px solid var(--line);color:var(--paper);
  padding:9px 8px;font-size:10px;width:100%;text-align:center;letter-spacing:.1em}
.jump input:focus{outline:0;border-color:var(--amber)}

/* ---------- parcel deed: inverted paper document ---------- */
.empty{font-size:10px;color:var(--soft);text-align:center;padding:30px 6px;line-height:2}
.empty span{color:var(--line);font-size:9px;letter-spacing:.1em}
.deed-card{background:var(--paper);color:var(--ink);padding:14px 14px 14px 30px;position:relative}
.deed-card::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:1px;background:rgba(255,92,92,.5)}
.deed-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:20px;
  background:repeating-linear-gradient(180deg,transparent 0 13px,rgba(12,19,34,.09) 13px 14px)}
.deed-stamp{position:absolute;right:12px;top:12px;font-family:var(--mono);font-size:8px;letter-spacing:.16em;
  border:1px solid var(--ink);padding:3px 6px}
.deed-code{font-weight:900;font-size:42px;letter-spacing:-.05em;line-height:.85;text-transform:uppercase}
.deed-sub{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#63756c;margin-top:6px}
.deed-art{height:96px;margin:12px 0;border:1px solid rgba(12,19,34,.2);overflow:hidden}
.deed-art canvas{width:100%;height:100%;display:block}
.deed-row{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10px;
  padding:6px 0;border-bottom:1px dotted rgba(12,19,34,.25)}
.deed-row dt{color:#6b7c9c;letter-spacing:.14em;font-size:9px}
.deed-row dd{font-weight:700}
.deed-note{font-family:var(--mono);font-size:8px;line-height:1.9;letter-spacing:.08em;color:#6b7c9c;margin-top:10px}
.deed-price{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  background:var(--ink);color:var(--paper);padding:11px 12px;margin-top:12px}
.deed-price b{font-size:26px;font-weight:900;letter-spacing:-.04em;color:var(--amber)}
.deed-price span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--muted)}
.owner-pill{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  color:var(--ink);border:1px solid var(--ink);padding:7px 8px;margin-top:10px}
.owner-pill i{width:8px;height:8px;background:var(--pink);flex:0 0 auto}
.owner-pill.you i{background:var(--green)}
.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.build{border:1px solid var(--line);padding:9px;text-align:left;transition:.14s var(--ease);background:var(--panel-2)}
.build:hover:not(:disabled){border-color:var(--amber);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--black)}
.build b{display:block;font-size:11px;font-weight:800;letter-spacing:-.015em;margin-bottom:3px}
.build span{font-family:var(--mono);font-size:8px;color:var(--muted);letter-spacing:.1em}
.build.owned{border-color:var(--green);background:rgba(51,214,159,.08)}

/* ---------- dock ---------- */
.dock{position:absolute;left:18px;right:18px;bottom:18px;z-index:20;
  background:var(--panel);border:1px solid var(--line);box-shadow:7px 7px 0 rgba(0,0,0,.55)}
.dock-head{display:flex;align-items:center;gap:14px;padding:9px 12px;background:var(--panel-2);
  border-bottom:1px solid var(--line)}
.dock-tabs{display:flex;margin-left:auto;border:1px solid var(--line)}
.dock-tabs button{font-size:9px;padding:7px 12px;color:var(--soft)}
.dock-tabs button+button{border-left:1px solid var(--line)}
.dock-tabs button.on{background:var(--amber);color:var(--black);font-weight:700}
.dock-body{height:126px;overflow:auto;padding:10px 12px}
.hold-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(182px,1fr));gap:8px}
.hold{border:1px solid var(--line);padding:9px;display:flex;gap:9px;align-items:center;cursor:pointer;
  transition:.14s var(--ease);background:var(--panel-2)}
.hold:hover{border-color:var(--amber);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--black)}
.hold .sw{width:24px;height:24px;flex:0 0 auto}
.hold b{display:block;font-size:12px;font-weight:900;letter-spacing:-.02em}
.hold span{font-family:var(--mono);font-size:8px;color:var(--muted);letter-spacing:.12em}
.sum{display:flex;gap:22px;align-items:baseline;padding-bottom:9px;margin-bottom:9px;
  border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:9px;color:var(--soft);letter-spacing:.14em}
.sum b{font-family:var(--sans);font-size:16px;font-weight:900;letter-spacing:-.03em;color:var(--paper);margin-right:6px}
.sum .up{color:var(--green)}
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;
  padding:7px 0;border-bottom:1px dotted var(--line-soft);font-family:var(--mono);font-size:10px}
.row:last-child{border-bottom:0}
.row .t{color:var(--soft);font-size:9px}
.row .a{color:var(--paper)}
.row .p{color:var(--amber);text-align:right}
.row .d{color:var(--muted);font-size:9px;text-align:right}
.rank{width:20px;color:var(--soft);font-size:9px}
.dock-empty{font-family:var(--mono);font-size:10px;color:var(--soft);letter-spacing:.12em;padding:26px;text-align:center}

.hud-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(18px + 176px);
  font-size:8px;color:#2b3d34;z-index:10;pointer-events:none}
#tooltip{position:absolute;z-index:40;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--amber);color:var(--black);border:2px solid var(--black);padding:5px 8px;font-size:9px;
  font-weight:700;white-space:nowrap;transform:translate(12px,12px)}
#tooltip.on{opacity:1}

/* ---------- price strip ---------- */
#footer{position:fixed;left:0;right:0;bottom:0;height:var(--foot);z-index:70;
  background:var(--black);border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:9px;color:var(--soft)}
.f-stats{display:flex;gap:22px}
.f-stats b{color:var(--paper);font-weight:700}
.f-acid b{color:var(--amber)}

/* ---------- modal ---------- */
.ov{position:fixed;inset:0;z-index:150;background:rgba(3,6,14,.84);display:grid;place-items:center;padding:20px;
  animation:fade .18s var(--ease)}
@keyframes fade{from{opacity:0}}
.modal{width:min(460px,100%);background:var(--panel);border:2px solid var(--amber);
  box-shadow:12px 12px 0 rgba(0,0,0,.6);animation:pop .26s var(--ease)}
@keyframes pop{from{transform:translate(6px,10px);opacity:0}}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;
  background:var(--amber);color:var(--black)}
.modal-head .lbl{color:var(--black);font-weight:700}
.modal-head .panel-toggle{color:var(--black)}
.modal-body{padding:20px 18px;display:flex;flex-direction:column;gap:14px}
.modal-body h2{font-size:34px;font-weight:900;letter-spacing:-.045em;line-height:.9;text-transform:uppercase;
  text-shadow:3px 3px 0 rgba(255,159,67,.25)}
.modal-body p{font-size:12px;color:var(--muted);line-height:1.7}
.modal-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 18px 18px}
.wallets{display:flex;flex-direction:column;gap:8px}
.wallet{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid var(--line);
  transition:.14s var(--ease);text-align:left;background:var(--panel-2)}
.wallet:hover{border-color:var(--amber);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--amber)}
.wallet .ic{width:28px;height:28px;display:grid;place-items:center;font-size:14px;background:var(--black)}
.wallet b{display:block;font-size:12px;font-weight:800}
.wallet span{font-family:var(--mono);font-size:8px;color:var(--soft);letter-spacing:.12em}
.note{font-family:var(--mono);font-size:8px;color:var(--soft);line-height:2;letter-spacing:.08em;
  border-top:1px solid var(--line);padding-top:10px}
.deed{border:1px solid var(--line);background:var(--black);padding:12px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;
  border-bottom:1px dotted var(--line-soft);font-family:var(--mono);font-size:10px}
.kv:last-child{border-bottom:0}
.kv dt{font-size:9px;color:var(--soft);letter-spacing:.14em}
.kv dd{font-weight:700}
.guide-steps{display:flex;flex-direction:column;gap:12px}
.gstep{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.gstep b{font-family:var(--mono);font-size:11px;color:var(--amber);font-weight:700}
.gstep p{font-size:12px;color:var(--muted);line-height:1.6}
.gstep p strong{color:var(--paper);font-weight:700}

/* ---------- toasts ---------- */
#toasts{position:fixed;right:16px;bottom:calc(var(--foot) + 12px);z-index:160;display:flex;
  flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{background:var(--amber);color:var(--black);border:2px solid var(--black);
  box-shadow:5px 5px 0 rgba(0,0,0,.5);padding:10px 12px;min-width:230px;animation:slide .28s var(--ease)}
.toast.bad{background:var(--pink);color:var(--paper)}
.toast.good{background:var(--green);color:var(--black)}
@keyframes slide{from{transform:translateX(20px);opacity:0}}
.toast b{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.toast span{font-size:11px;opacity:.8}

@media (max-width:1180px){
  .nav-links a[data-nav="districts"]{display:none}
  .panel-left{width:216px}
  .panel-right{width:280px}
}
@media (max-width:900px){
  .nav-links{display:none}
  .panel{max-height:38vh}
}
@media (max-width:720px){
  :root{--nav:50px}
  .logo{padding:0 10px}
  .logo-txt{font-size:13px}
  .chip-balance{font-size:9px;padding:5px 7px}
  .btn{padding:8px 10px;font-size:9px}
  .hero-h1{text-shadow:3px 3px 0 var(--black),6px 6px 0 rgba(255,159,67,.3)}
  .hero-stats{gap:18px}
  .hero-stats b{font-size:17px}
  .panel{position:absolute;top:auto;left:8px;right:8px;width:auto!important;box-shadow:4px 4px 0 rgba(0,0,0,.5)}
  .panel-left{top:8px;max-height:112px}
  .panel-right{bottom:170px;top:auto;max-height:36vh}
  .dock{left:8px;right:8px;bottom:8px;box-shadow:4px 4px 0 rgba(0,0,0,.5)}
  .dock-body{height:94px}
  .hud-hint{display:none}
  .f-stats{gap:12px}
  .f-brand{display:none}
  .deed-code{font-size:34px}
}
@media (max-width:560px){
  .logo-txt{display:none}
  .dock-tabs button{padding:7px 8px}
}

/* ================= THE TABLE ================= */
body.at-table .panel,body.at-table .dock,body.at-table .hud-hint{opacity:0;pointer-events:none}
#tableOv{position:absolute;inset:0;z-index:60;background:
  radial-gradient(120% 90% at 50% 0%,#16233b 0%,#0a1020 55%,#070b16 100%);
  display:flex;flex-direction:column;animation:tblIn .3s var(--ease)}
@keyframes tblIn{from{transform:translateY(10px)}}

.tbl-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:rgba(7,11,22,.6)}
.tbl-id{display:flex;flex-direction:column;gap:3px}
.tbl-id b{font-size:17px;font-weight:900;letter-spacing:-.03em}
.tbl-house,.tbl-bank{font-size:9px;color:var(--soft)}
.tbl-house b,.tbl-bank b{color:var(--amber);font-size:12px;margin-left:6px}
.tbl-head .btn{margin-left:auto}

.tbl-main{flex:1;display:grid;grid-template-columns:320px 1fr;gap:20px;padding:18px;overflow:auto}
.tbl-left{position:relative;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;gap:14px;padding:8px 0}
#wheel{width:300px;height:300px;flex:0 0 auto}
.tbl-result{font-size:13px;letter-spacing:.14em;color:var(--muted);text-align:center;min-height:20px}
.tbl-result b{font-size:16px}
.tbl-result .win{color:var(--green)}
.tbl-result .lose{color:var(--pink)}
.tbl-history{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:300px}
.tbl-history .h{width:22px;height:22px;display:grid;place-items:center;font-size:9px;font-weight:700;
  border:1px solid var(--line)}
.tbl-history .h.red{background:var(--pink);color:#0b0f1a}
.tbl-history .h.black{background:#182238;color:var(--paper)}
.tbl-history .h.zero{background:var(--green);color:#08121a}

.tbl-right{display:flex;flex-direction:column;gap:12px;min-width:0}
.felt{background:#0e2233;border:1px solid var(--line);padding:12px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.55)}
.felt-row{display:flex;gap:3px}
.felt-grid{flex:1;display:grid;grid-auto-flow:column;grid-template-columns:44px repeat(12,1fr);
  grid-template-rows:repeat(3,minmax(30px,1fr));gap:3px}
.felt-grid .bet:first-child{grid-row:span 3}
.felt-cols{display:grid;grid-template-rows:repeat(3,1fr);gap:3px;width:54px;flex:0 0 auto}
.felt-dozens{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:3px}
.felt-outside{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin-top:3px}

.bet{position:relative;border:1px solid rgba(238,243,255,.16);background:#12283c;
  color:var(--paper);font-family:var(--mono);font-size:11px;font-weight:700;
  padding:6px 2px;transition:.12s var(--ease);min-height:30px}
.bet:hover{border-color:var(--amber);transform:translateY(-1px)}
.bet.red{background:#c0392f}
.bet.black{background:#131c2e}
.bet.zero{background:#14603f}
.bet.wide{font-size:10px;letter-spacing:.12em;padding:9px 2px}
.bet.hasbet{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}
.bet .stack{position:absolute;right:2px;bottom:2px;font-style:normal;font-size:9px;
  background:var(--amber);color:#0b0f1a;padding:1px 3px;display:none}
.bet .stack.on{display:block}

.tbl-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chips{display:flex;gap:6px}
.chip{width:42px;height:42px;border-radius:50%;border:2px dashed rgba(238,243,255,.35);
  background:#182238;color:var(--paper);font-family:var(--mono);font-size:11px;font-weight:700;
  transition:.14s var(--ease)}
.chip:hover{transform:translateY(-2px)}
.chip.on{background:var(--amber);color:#0b0f1a;border-color:#0b0f1a}
.tbl-stake{font-size:9px;color:var(--soft);margin-left:auto}
.tbl-stake b{color:var(--paper);font-size:13px;margin:0 4px}

.fair{display:flex;flex-wrap:wrap;gap:16px;font-size:8px;color:var(--soft);
  border-top:1px solid var(--line-soft);padding-top:10px;align-items:center}
.fair b{color:var(--muted)}
.fair u{color:var(--green);text-decoration:none}
.fair s{color:var(--pink)}
.fair input{background:var(--black);border:1px solid var(--line);color:var(--paper);
  font-size:9px;padding:4px 6px;width:130px;margin-left:6px}
.fair input:focus{outline:0;border-color:var(--amber)}

@media (max-width:860px){
  .tbl-main{grid-template-columns:1fr;padding:12px}
  .tbl-left{order:2}
  #wheel{width:230px;height:230px}
  .felt-grid{grid-template-columns:34px repeat(12,1fr);grid-template-rows:repeat(3,26px)}
  .bet{font-size:9px;min-height:26px;padding:3px 1px}
  .tbl-head{gap:10px;padding:10px}
  .tbl-house{display:none}
}

/* ================= TABLE POLISH ================= */
.pit{position:relative;display:grid;place-items:center;padding:6px}
.pit::before{content:"";position:absolute;width:400px;height:250px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,159,67,.16) 0%,rgba(255,159,67,0) 70%);filter:blur(6px)}
#wheel{width:440px;height:330px;position:relative;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55))}

/* felt gets a proper table surface */
.felt{position:relative;background:
    radial-gradient(120% 140% at 50% -20%,#1b3350 0%,#0d1c2e 55%,#0a1626 100%);
  border:2px solid rgba(255,159,67,.4);padding:14px;
  box-shadow:inset 0 0 70px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.45)}
.felt::after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,159,67,.16);pointer-events:none}
.felt.locked{pointer-events:none;filter:saturate(.6) brightness(.8)}

.bet{position:relative;border:1px solid rgba(238,243,255,.18);background:#12283c;
  color:var(--paper);font-family:var(--mono);font-size:11px;font-weight:700;
  padding:6px 2px;transition:.12s var(--ease);min-height:30px;
  text-shadow:0 1px 2px rgba(0,0,0,.6)}
.bet:hover{border-color:var(--amber);transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,0,0,.5),0 0 0 1px rgba(255,159,67,.5) inset}
.bet.red{background:linear-gradient(180deg,#b3242f,#8d1922)}
.bet.black{background:linear-gradient(180deg,#16223a,#0d1626)}
.bet.zero{background:linear-gradient(180deg,#1f8f6a,#146049)}
.bet.hasbet{border-color:var(--amber)}
.bet.win{animation:betwin .5s var(--ease) 5;border-color:#fff}
.bet.hit{box-shadow:0 0 0 2px #fff inset,0 0 22px rgba(255,255,255,.5)}
@keyframes betwin{
  0%,100%{box-shadow:0 0 0 0 rgba(255,159,67,0)}
  50%{box-shadow:0 0 0 2px var(--amber) inset,0 0 20px rgba(255,159,67,.8)}
}

/* stakes render as real chips */
.bet .stack{position:absolute;right:-4px;bottom:-4px;font-style:normal;
  width:24px;height:24px;border-radius:50%;display:none;place-items:center;
  font-size:8px;font-weight:700;color:#0b0f1a;
  background:radial-gradient(circle at 35% 30%,#ffd9a8,#ff9f43 60%,#c4762a);
  border:2px dashed rgba(11,15,26,.75);
  box-shadow:0 2px 6px rgba(0,0,0,.6)}
.bet .stack.on{display:grid;animation:chipdrop .22s var(--ease)}
@keyframes chipdrop{from{transform:translateY(-10px) scale(.6);opacity:0}}

/* result readout */
.tbl-result{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px}
.res-badge{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--sans);font-weight:900;font-size:18px;letter-spacing:-.03em;
  border:2px solid rgba(238,243,255,.35);animation:pop .35s var(--ease)}
.res-badge.red{background:#b3242f}
.res-badge.black{background:#16223a}
.res-badge.zero{background:#1f8f6a}

/* announcements slam in over the table */
/* the banner sits on the floor of the panel so it never covers the game */
.announce{position:absolute;inset:0;z-index:20;display:grid;place-items:end center;
  padding-bottom:16px;pointer-events:none}
.announce span{font-family:var(--sans);font-weight:900;font-size:clamp(16px,2.5vw,30px);
  letter-spacing:-.04em;text-transform:uppercase;color:var(--paper);text-align:center;
  max-width:92%;padding:8px 16px;border:2px solid var(--paper);background:rgba(7,11,22,.86);
  text-shadow:0 5px 0 rgba(7,11,22,.9);animation:slam .32s cubic-bezier(.2,1.5,.4,1)}
.announce.closed span{color:var(--pink);border-color:var(--pink)}
.announce.won span{color:var(--amber);border-color:var(--amber);
  box-shadow:0 0 40px rgba(255,159,67,.5)}
.announce.lost span{color:var(--muted);border-color:var(--line)}
.announce.out{opacity:0;transition:opacity .3s}
@keyframes slam{from{transform:scale(2.2) rotate(-3deg);opacity:0;filter:blur(6px)}}

/* falling chips on a win */
.shower{position:absolute;inset:0;z-index:19;overflow:hidden;pointer-events:none}
.shower i{position:absolute;top:-16px;width:12px;height:12px;border-radius:50%;
  border:2px dashed rgba(11,15,26,.6);animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.15}}

.tbl-left.shake{animation:shake .55s}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-6px,3px)}
  40%{transform:translate(5px,-3px)}
  60%{transform:translate(-4px,-2px)}
  80%{transform:translate(3px,2px)}
}

@media (max-width:860px){
  #wheel{width:100%;max-width:360px;height:auto}
  .pit::before{width:300px;height:190px}
}

/* ================= THE FLOOR ================= */
#gameOv{position:absolute;inset:0;z-index:60;background:
  radial-gradient(120% 90% at 50% 0%,#16233b 0%,#0a1020 55%,#070b16 100%);
  display:flex;flex-direction:column;animation:tblIn .3s var(--ease)}
.g-stage.shake{animation:shake .55s}

.g-switch{display:flex;border:1px solid var(--line);margin-left:6px;overflow:auto;max-width:100%;scrollbar-width:none}
.g-switch::-webkit-scrollbar{display:none}
.g-switch button{font-size:9px;padding:7px 10px;color:var(--soft);white-space:nowrap}
.g-switch button+button{border-left:1px solid var(--line)}
.g-switch button:hover{color:var(--paper)}
.g-switch button.on{background:var(--amber);color:#0b0f1a;font-weight:700}

.g-main{display:grid;grid-template-columns:1fr 300px;gap:18px;padding:18px;overflow:auto;align-items:start}
.g-stage{position:relative;overflow:hidden;display:grid;place-items:center;min-height:380px;
  background:radial-gradient(120% 140% at 50% -20%,#1b3350 0%,#0d1c2e 55%,#0a1626 100%);
  border:2px solid rgba(255,159,67,.35);box-shadow:inset 0 0 70px rgba(0,0,0,.6);padding:18px}
.g-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.g-bet{border:1px solid var(--line);background:var(--panel);padding:12px;display:flex;
  flex-direction:column;gap:9px}
.g-stakerow{display:flex;gap:6px;align-items:center}
.g-stakerow input[type=text],.g-stakerow input:not([type=range]){flex:1;background:var(--black);
  border:1px solid var(--line);color:var(--paper);padding:9px;font-size:13px;text-align:center;
  font-weight:700;letter-spacing:.06em}
.g-stakerow input:focus{outline:0;border-color:var(--amber)}
.g-stakerow input[type=range]{flex:1;accent-color:var(--amber)}
.g-mini{border:1px solid var(--line);color:var(--muted);padding:8px 10px;font-size:10px}
.g-mini:hover{border-color:var(--amber);color:var(--amber)}
.g-quick{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.g-quick button{border:1px solid var(--line-soft);color:var(--soft);font-size:9px;padding:6px 2px}
.g-quick button:hover{border-color:var(--amber);color:var(--amber)}
.g-opts:empty{display:none}
.g-opts{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line-soft);padding-top:9px}
.g-play{width:100%;padding:14px}
.g-limits{font-size:8px;color:var(--soft);text-align:center}
.g-hist{display:flex;flex-wrap:wrap;gap:4px}
.g-hist .hx{font-family:var(--mono);font-size:9px;padding:3px 6px;border:1px solid var(--line)}
.g-hist .hx.up{color:var(--green);border-color:rgba(51,214,159,.5)}
.g-hist .hx.down{color:var(--soft)}

/* deed: licensed games */
.game-list{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.gpick{border:1px solid var(--ink);color:var(--ink);font-size:9px;font-weight:700;padding:6px 8px;
  letter-spacing:.12em;background:rgba(12,19,34,.06)}
.gpick:hover{background:var(--ink);color:var(--paper)}

/* ---------- slots ---------- */
.slot-machine{display:flex;flex-direction:column;align-items:center;gap:14px}
.slot-window{display:flex;gap:10px;padding:14px;background:#070d18;
  border:3px solid var(--amber);box-shadow:0 0 36px rgba(255,159,67,.22) inset}
.slot-window.jackpot{animation:jack .35s 6}
@keyframes jack{50%{box-shadow:0 0 60px rgba(255,159,67,.9) inset;border-color:#fff}}
.reel{width:88px;height:104px;display:grid;place-items:center;background:
  linear-gradient(180deg,#101a2c,#1b2740 50%,#101a2c);border:1px solid var(--line);overflow:hidden}
.reel span{font-family:var(--sans);font-size:38px;font-weight:900;color:var(--paper)}
.reel.spin span{animation:reelspin .12s linear infinite}
@keyframes reelspin{from{transform:translateY(-60px);opacity:.2}to{transform:translateY(60px);opacity:.2}}
.reel.land span{animation:land .35s var(--ease)}
@keyframes land{from{transform:translateY(-40px) scale(1.3);color:var(--amber)}}
.slot-line{width:300px;height:2px;background:rgba(255,92,92,.6)}
.slot-pays{font-size:8px;color:var(--soft);text-align:center;line-height:2;max-width:460px}

/* ---------- dice ---------- */
.dice-stage{width:min(560px,100%);display:flex;flex-direction:column;gap:16px;align-items:center}
.dice-num{font-family:var(--sans);font-size:64px;font-weight:900;letter-spacing:-.04em}
.dice-num.win{color:var(--green)}
.dice-num.lose{color:var(--pink)}
.dice-track{position:relative;width:100%;height:16px;background:#101a2c;border:1px solid var(--line)}
.dice-track b{position:absolute;left:0;top:0;bottom:0;background:rgba(51,214,159,.35);display:block}
.dice-track i{position:absolute;top:-6px;width:3px;height:28px;background:var(--amber);
  transition:left .2s var(--ease)}
.dice-scale{display:flex;justify-content:space-between;width:100%;font-size:9px;color:var(--soft)}

/* ---------- limbo ---------- */
.limbo-stage{display:flex;flex-direction:column;align-items:center;gap:10px}
.limbo-num{font-family:var(--sans);font-size:78px;font-weight:900;letter-spacing:-.05em;
  color:var(--paper);text-shadow:0 6px 0 rgba(7,11,22,.7)}
.limbo-num.win{color:var(--green)}
.limbo-num.lose{color:var(--pink)}
.limbo-sub{font-size:9px;color:var(--soft)}

/* ---------- crash ---------- */
.crash-stage{position:relative;width:100%;display:grid;place-items:center}
#crashCv{width:100%;max-width:560px;height:260px}
.crash-mult{position:absolute;top:20px;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:56px;font-weight:900;letter-spacing:-.04em}
.crash-mult.win{color:var(--green)}
.crash-mult.lose{color:var(--pink)}
.crash-out{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);padding:12px 26px}

/* ---------- plinko ---------- */
.plinko-stage{display:flex;flex-direction:column;gap:8px;align-items:center;width:100%}
#plinkoCv{width:min(520px,100%);height:330px}
.plinko-buckets{display:grid;grid-template-columns:repeat(13,1fr);gap:2px;width:min(520px,100%)}
.plinko-buckets span{font-size:10px;font-weight:700;text-align:center;padding:7px 0;
  border:1px solid var(--line-soft);color:var(--paper);letter-spacing:.02em}
.plinko-buckets span[data-t="cold"]{background:#111c2f;color:#7b8aa8}
.plinko-buckets span[data-t="mid"]{background:#1a2740;color:#c3cfe4}
.plinko-buckets span[data-t="warm"]{background:linear-gradient(180deg,#3b46a8,#232c6b);color:#dfe4ff}
.plinko-buckets span[data-t="hot"]{background:linear-gradient(180deg,#ffb865,#e07d1c);color:#0b0f1a}
.plinko-buckets span.on{background:linear-gradient(180deg,#fff,#ffc27a);color:#0b0f1a;
  box-shadow:0 0 20px rgba(255,159,67,.9);transform:translateY(-2px)}

/* ---------- keno ---------- */
.keno-stage{display:flex;flex-direction:column;gap:12px;align-items:center}
.keno-grid{display:grid;grid-template-columns:repeat(8,44px);gap:5px}
.keno-cell{height:40px;border:1px solid var(--line);background:#101a2c;color:var(--paper);
  font-family:var(--mono);font-size:11px;font-weight:700;transition:.12s var(--ease)}
.keno-cell:hover{border-color:var(--amber)}
.keno-cell.picked{background:var(--amber);color:#0b0f1a}
.keno-cell.drawn{border-color:var(--muted);color:var(--soft);opacity:.65}
.keno-cell.hit{background:var(--green);color:#08121a;animation:pop .3s var(--ease)}
.keno-info{font-size:9px;color:var(--muted)}

/* ---------- money wheel ---------- */
.mw-stage{display:flex;flex-direction:column;align-items:center;gap:10px}
#mwCv{width:340px;height:376px;filter:drop-shadow(0 14px 24px rgba(0,0,0,.5))}
.mw-note{font-size:9px;color:var(--soft)}

@media (max-width:860px){
  .g-main{grid-template-columns:1fr;padding:12px}
  .g-stage{min-height:260px;padding:10px}
  .keno-grid{grid-template-columns:repeat(8,36px)}
  .keno-cell{height:34px;font-size:10px}
  .reel{width:64px;height:78px}
  .reel span{font-size:28px}
  .limbo-num{font-size:54px}
  .dice-num{font-size:44px}
}

/* ================= DEPTH ================= */
/* the felt lies on a table in front of you, not flat on the screen */
.felt{transform:perspective(1400px) rotateX(13deg);transform-origin:50% 100%;
  box-shadow:inset 0 0 70px rgba(0,0,0,.65),0 26px 40px rgba(0,0,0,.55),
             0 6px 0 #0a1220,0 8px 0 #060b15}
.bet{box-shadow:0 2px 0 rgba(0,0,0,.45)}
.bet:hover{transform:translateY(-3px) scale(1.03);z-index:2}
.bet.red{background:linear-gradient(170deg,#c62b36 0%,#a1202a 55%,#7d1620 100%)}
.bet.black{background:linear-gradient(170deg,#1c2a45 0%,#121c30 55%,#0a1220 100%)}
.bet.zero{background:linear-gradient(170deg,#25a67c 0%,#1a7256 60%,#0f4a37 100%)}

/* the pit: a lit well the wheel sits in */
.pit{position:relative;padding:10px 6px 22px;perspective:1200px}
.pit::after{content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:78%;height:16px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(7px)}

/* slots become a cabinet with a lit frame */
.slot-machine{perspective:1200px}
.slot-window{transform:rotateX(8deg);transform-style:preserve-3d;
  background:linear-gradient(180deg,#0a1220,#131f36);
  box-shadow:0 0 36px rgba(255,159,67,.25) inset,0 18px 30px rgba(0,0,0,.6),
             0 6px 0 #7a4a12,0 9px 0 #522f08}
.reel{position:relative;background:linear-gradient(180deg,#050a14 0%,#1b2740 22%,#22304d 50%,#1b2740 78%,#050a14 100%);
  box-shadow:inset 0 12px 18px rgba(0,0,0,.7),inset 0 -12px 18px rgba(0,0,0,.7)}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.16) 0 22%,rgba(255,255,255,0) 46%)}
.reel span{text-shadow:0 3px 0 rgba(0,0,0,.6)}

/* plinko board tips away from you */
.plinko-stage{perspective:1100px}
#plinkoCv{transform:rotateX(9deg);
  box-shadow:0 20px 34px rgba(0,0,0,.5);border:1px solid rgba(255,159,67,.22)}
.plinko-buckets span{box-shadow:0 3px 0 rgba(0,0,0,.5);
  background:linear-gradient(180deg,#16233a,#0d1728)}
.plinko-buckets span.on{background:linear-gradient(180deg,#ffc27a,#ff9f43);
  box-shadow:0 0 18px rgba(255,159,67,.7)}

/* keno board on a slight tilt, cells with a lip */
.keno-stage{perspective:1200px}
.keno-grid{transform:rotateX(10deg);transform-origin:50% 100%}
.keno-cell{background:linear-gradient(180deg,#1a2740,#0e1729);box-shadow:0 3px 0 rgba(0,0,0,.5)}
.keno-cell:hover{transform:translateY(-2px)}
.keno-cell.picked{background:linear-gradient(180deg,#ffc27a,#ff9f43);
  box-shadow:0 3px 0 #8a5312,0 0 16px rgba(255,159,67,.5)}
.keno-cell.hit{background:linear-gradient(180deg,#5ce8b4,#22a97c);box-shadow:0 3px 0 #0d5c42}

/* dice and limbo readouts get carved into the table */
.dice-num,.limbo-num{text-shadow:0 4px 0 rgba(0,0,0,.55),0 0 34px rgba(255,159,67,.25)}
.dice-track{box-shadow:inset 0 4px 8px rgba(0,0,0,.7);border-radius:2px}
.dice-track b{background:linear-gradient(180deg,rgba(51,214,159,.55),rgba(51,214,159,.2))}
.dice-track i{box-shadow:0 0 12px rgba(255,159,67,.9)}

/* crash: the curve sits in a lit box */
.crash-stage{perspective:1000px}
#crashCv{border:1px solid rgba(255,159,67,.2);box-shadow:0 18px 30px rgba(0,0,0,.5) ,
  inset 0 0 60px rgba(0,0,0,.5)}
.crash-mult{text-shadow:0 5px 0 rgba(0,0,0,.6)}

/* money wheel stands on the floor */
.mw-stage{perspective:1100px}
#mwCv{filter:drop-shadow(0 22px 26px rgba(0,0,0,.6))}

/* chips look pressed, not printed */
.chip{box-shadow:0 4px 0 rgba(0,0,0,.55),inset 0 2px 6px rgba(255,255,255,.25)}
.chip.on{box-shadow:0 4px 0 #8a5312,0 0 20px rgba(255,159,67,.55),
  inset 0 2px 6px rgba(255,255,255,.4)}
.bet .stack{box-shadow:0 3px 5px rgba(0,0,0,.7),inset 0 1px 3px rgba(255,255,255,.5)}

@media (max-width:760px){
  .felt{transform:none}
  .keno-grid,#plinkoCv,.slot-window{transform:none}
}

/* ================= SLOT CABINET ================= */
.slot-cab{width:min(600px,100%);display:flex;flex-direction:column;
  background:linear-gradient(180deg,#1a2941,#0a1120);
  border:2px solid var(--amber);
  box-shadow:0 24px 40px rgba(0,0,0,.6),0 0 60px rgba(255,159,67,.12),
             inset 0 1px 0 rgba(255,255,255,.12)}

/* marquee */
.slot-top{display:flex;align-items:center;gap:12px;padding:9px 14px;
  background:linear-gradient(180deg,#31456b,#16233a);
  border-bottom:2px solid rgba(255,159,67,.5)}
.slot-sign{font-family:var(--sans);font-weight:900;font-size:19px;letter-spacing:-.02em;
  color:#ffe2bb;white-space:nowrap;
  text-shadow:0 0 16px rgba(255,159,67,.9),0 2px 0 rgba(0,0,0,.6)}
.bulbs{display:flex;gap:6px;flex:1;justify-content:space-around}
.bulbs i{width:7px;height:7px;border-radius:50%;background:#4a3d24;
  box-shadow:0 0 6px rgba(255,159,67,.35);animation:bulb 1.1s infinite}
.bulbs i:nth-child(2n){animation-delay:.18s}
.bulbs i:nth-child(3n){animation-delay:.36s}
.bulbs i:nth-child(5n){animation-delay:.54s}
@keyframes bulb{
  0%,100%{background:#4a3d24;box-shadow:0 0 5px rgba(255,159,67,.25)}
  50%{background:#ffcf8a;box-shadow:0 0 12px rgba(255,159,67,.95)}
}

/* reels */
.slot-body{display:flex;align-items:stretch;gap:14px;padding:16px 14px}
.slot-window{position:relative;flex:1;display:flex;gap:8px;padding:10px;
  background:#05090f;border:3px solid #c9821f;
  box-shadow:inset 0 0 44px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)}
.slot-window.jackpot{animation:jack .35s 6}
@keyframes jack{50%{border-color:#fff;box-shadow:inset 0 0 60px rgba(255,159,67,.5),0 0 40px rgba(255,159,67,.9)}}
.reel{flex:1;height:172px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,#04080f 0%,#1b2a45 26%,#26375a 50%,#1b2a45 74%,#04080f 100%);
  box-shadow:inset 0 0 20px rgba(0,0,0,.85)}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(102deg,rgba(255,255,255,.18) 0 18%,rgba(255,255,255,0) 44%)}
.strip{display:flex;flex-direction:column;height:100%}
.sym{flex:1;display:grid;place-items:center;font-family:var(--sans);font-weight:900;
  line-height:1;transition:none}
.sym.off{opacity:.3;font-size:22px}
.sym.mid{font-size:46px;filter:drop-shadow(0 0 14px currentColor)}
.sym.mid.hit{animation:symhit .4s ease-in-out 5}
@keyframes symhit{50%{transform:scale(1.22)}}
.sym[data-s="7"]{color:#ff5c5c}
.sym[data-s="BAR"]{color:#ff9f43;font-size:26px}
.sym.mid[data-s="BAR"]{font-size:30px;letter-spacing:-.04em}
.sym[data-s="♦"]{color:#22d3ee}
.sym[data-s="♣"]{color:#33d69f}
.sym[data-s="★"]{color:#ffd76e}
.sym[data-s="♠"]{color:#eef3ff}
.sym[data-s="♥"]{color:#ff7bb0}
.sym[data-s="$"]{color:#9ad14f}
.reel.spin .strip{filter:blur(2.5px)}
.reel.land .sym.mid{animation:landdrop .4s var(--ease)}
@keyframes landdrop{from{transform:translateY(-34px) scale(1.25)}}

/* payline with arrows */
.payline{position:absolute;left:4px;right:4px;top:50%;height:2px;
  background:rgba(255,92,92,.45);transform:translateY(-1px);pointer-events:none}
.payline i{position:absolute;top:-6px;width:0;height:0;border:7px solid transparent}
.payline i:first-child{left:-4px;border-left-color:rgba(255,92,92,.7)}
.payline i:last-child{right:-4px;border-right-color:rgba(255,92,92,.7)}
.payline.hot{background:var(--amber);box-shadow:0 0 18px rgba(255,159,67,.95);animation:plflash .3s 6}
.payline.hot i:first-child{border-left-color:var(--amber)}
.payline.hot i:last-child{border-right-color:var(--amber)}
@keyframes plflash{50%{opacity:.25}}

/* lever */
.lever{width:44px;position:relative;background:none;padding:0}
.lever .knob{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ff9d9d,#c0202a 65%,#6d1017);
  box-shadow:0 4px 10px rgba(0,0,0,.6);transition:top .18s var(--ease)}
.lever .rod{position:absolute;top:26px;left:50%;transform:translateX(-50%);
  width:9px;height:120px;border-radius:5px;
  background:linear-gradient(90deg,#5b6a85,#e3ebf8 45%,#5b6a85);
  box-shadow:0 3px 8px rgba(0,0,0,.5);transition:height .18s var(--ease)}
.lever:hover .knob{top:14px}
.lever.pull .knob{top:96px}
.lever.pull .rod{height:34px;top:116px}

/* deck */
.slot-deck{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:12px;background:#080e1a;border-top:2px solid rgba(255,159,67,.35)}
.led{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8px;color:var(--soft);
  border:1px solid var(--line);background:#04080f;padding:8px 12px;letter-spacing:.18em;
  min-width:104px}
.led b{font-size:15px;color:var(--amber);letter-spacing:.04em;
  text-shadow:0 0 10px rgba(255,159,67,.7)}
.led.win b{color:var(--green);text-shadow:0 0 10px rgba(51,214,159,.6)}
.paytable{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.pt{font-family:var(--mono);font-size:10px;color:var(--paper);display:flex;
  align-items:center;justify-content:space-between;gap:6px;background:rgba(255,255,255,.05);
  padding:4px 8px;border:1px solid var(--line-soft)}
.pt .sym{font-style:normal;font-weight:900;font-size:14px;display:inline}
.pt-any{grid-column:1/-1;justify-content:center;color:var(--muted);letter-spacing:.16em}

/* ---------- crash, properly centred on its own canvas ---------- */
.crash-stage{position:relative;width:min(560px,100%);margin:0 auto;display:block}
#crashCv{display:block;width:100%;height:300px}
.crash-mult{position:absolute;top:50%;left:0;right:0;transform:translateY(-58%);text-align:center;
  font-size:clamp(38px,7vw,64px)}
.crash-out{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  transition:opacity .2s var(--ease)}
.crash-out:disabled{opacity:0;pointer-events:none}

/* ---------- small type that has to stay readable ---------- */
.g-limits{font-size:9px;color:var(--muted);letter-spacing:.14em}
.mw-note,.keno-info,.limbo-sub{font-size:10px;color:var(--muted);letter-spacing:.14em}
.fair{font-size:9px;color:var(--muted)}
.fair b{color:var(--paper)}
.dice-scale{font-size:10px;color:var(--muted)}

/* ---------- a landed plinko ball says its own number ---------- */
.floatwin{position:absolute;bottom:64px;font-family:var(--sans);font-weight:900;
  font-size:22px;letter-spacing:-.02em;pointer-events:none;z-index:18;
  text-shadow:0 3px 0 rgba(0,0,0,.7);animation:floatup 1.4s var(--ease) forwards}
.floatwin b{font-family:var(--mono);font-size:13px;font-weight:700;margin-right:6px}
.floatwin.up{color:var(--green)}
.floatwin.down{color:var(--soft)}
@keyframes floatup{
  0%{opacity:0;transform:translateY(10px) scale(.8)}
  18%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-70px) scale(1)}
}

@media (max-width:860px){
  .reel{height:132px}
  .sym.mid{font-size:34px}
  .lever{display:none}
}

/* ================= LIVE BET TICKER ================= */
#ticker{height:38px}
:root{--ticker:38px}
.ticker-run{gap:26px;align-items:center}
.ticker-track{contain:paint}
.tk{display:inline-flex;align-items:center;gap:8px;font-size:10px;
  padding:5px 10px 5px 5px;border:1px solid var(--line-soft);background:rgba(22,32,52,.65)}
.tk .ava{border-radius:50%;display:block;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 2px 4px rgba(0,0,0,.5)}
.tk b{color:var(--paper);font-weight:700;letter-spacing:.08em}
.tk .tk-act{color:var(--soft);letter-spacing:.08em}
.tk em{font-style:normal;font-weight:700;letter-spacing:.06em}
.tk em.up{color:var(--green)}
.tk em.down{color:#7d8ba6}
.tk.me{border-color:var(--amber);background:rgba(255,159,67,.12)}
.tk.me b{color:var(--amber)}

/* ================= DICE, READ AT A GLANCE ================= */
.dice-stage{width:min(600px,100%);display:flex;flex-direction:column;gap:14px;align-items:center}
.dice-head{font-size:11px;color:var(--muted);letter-spacing:.16em}
.dice-head b{color:var(--amber);font-size:13px}
.dice-num{font-family:var(--sans);font-size:66px;font-weight:900;letter-spacing:-.04em;
  color:var(--paper);line-height:1}
.dice-num.rolling{color:var(--soft)}
.dice-num.win{color:var(--green)}
.dice-num.lose{color:var(--pink)}
.dice-bar{position:relative;width:100%;height:34px;display:flex;
  border:1px solid var(--line);box-shadow:inset 0 4px 10px rgba(0,0,0,.6)}
.dice-bar .zone{display:grid;place-items:center;font-family:var(--mono);font-size:9px;
  letter-spacing:.2em;transition:width .18s var(--ease)}
.dice-bar .zone.win{background:linear-gradient(180deg,rgba(51,214,159,.45),rgba(51,214,159,.16));
  color:#bdf5df}
.dice-bar .zone.lose{background:linear-gradient(180deg,rgba(255,92,92,.35),rgba(255,92,92,.12));
  color:#ffd2d2}
.dice-bar .mark{position:absolute;top:-9px;bottom:-9px;width:3px;background:var(--paper);
  opacity:0;transition:left .25s var(--ease);box-shadow:0 0 12px rgba(255,255,255,.8)}
.dice-bar .mark.show{opacity:1}
.dice-bar .mark.win{background:var(--green);box-shadow:0 0 14px rgba(51,214,159,.9)}
.dice-bar .mark.lose{background:var(--pink);box-shadow:0 0 14px rgba(255,92,92,.9)}
.dice-bar .mark::after{content:attr(data-v);position:absolute;top:-18px;left:50%;
  transform:translateX(-50%);font-family:var(--mono);font-size:9px;color:var(--paper)}
.dice-scale{display:flex;justify-content:space-between;width:100%;font-size:9px;color:var(--soft)}

/* ================= INSIDE BETS ON THE LINES ================= */
.felt-grid{position:relative}
.hot-layer{position:absolute;inset:0;pointer-events:none;z-index:4}
.hot{position:absolute;width:20px;height:20px;transform:translate(-50%,-50%);border-radius:50%;
  pointer-events:auto;background:transparent;border:1px dashed transparent;
  font-family:var(--mono);font-size:8px;font-weight:700;color:#0b0f1a;
  display:grid;place-items:center;transition:.12s var(--ease)}
.hot:hover{border-color:var(--amber);background:rgba(255,159,67,.3);transform:translate(-50%,-50%) scale(1.15)}
.hot.hasbet{background:radial-gradient(circle at 35% 30%,#ffd9a8,#ff9f43 60%,#c4762a);
  border:2px dashed rgba(11,15,26,.75);box-shadow:0 3px 6px rgba(0,0,0,.7)}
.hot.win{animation:betwin .5s var(--ease) 5}

/* ================= HEADER ================= */
.tbl-id b{font-size:21px;font-weight:900;letter-spacing:-.03em}
.g-switch button{font-size:11px;padding:11px 15px;letter-spacing:.1em}
.g-switch button.on{box-shadow:inset 0 -3px 0 rgba(11,15,26,.35)}

/* ================= NO STRAY SELECTION ON THE TABLES ================= */
.g-stage,.tbl-left,.felt,.slot-cab,.tbl-head,.g-side{user-select:none;-webkit-user-select:none}
.g-stage canvas,.tbl-left canvas{pointer-events:none}
.crash-mult{pointer-events:none}
.crash-out{pointer-events:auto}
button:focus{outline:none}
button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.fair input,.g-stakerow input{user-select:text;-webkit-user-select:text}

/* games played on another lot: listed, but dimmed until you walk over */
.g-switch button.away{color:var(--soft);opacity:.7}
.g-switch button.away:hover{opacity:1;color:var(--paper)}
.tbl-house b{margin-left:4px;margin-right:4px}

/* ================= STORAGE NOTICE ================= */
.cookie{position:fixed;left:50%;bottom:calc(var(--foot) + 18px);transform:translateX(-50%);z-index:140;width:min(460px,calc(100vw - 36px));
  background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--amber);
  box-shadow:8px 8px 0 rgba(0,0,0,.6);padding:14px 16px 16px;animation:cookieIn .35s var(--ease)}
@keyframes cookieIn{from{transform:translate(-50%,18px);opacity:0}}
.cookie-head{font-size:9px;color:var(--amber);letter-spacing:.22em;margin-bottom:8px}
.cookie p{font-size:12px;line-height:1.65;color:var(--muted);margin-bottom:14px}
.cookie-actions{display:flex;gap:8px;flex-wrap:wrap}
.cookie-actions .btn{font-size:9px;padding:10px 12px}
@media (max-width:720px){.cookie{left:8px;right:8px;bottom:calc(var(--foot) + 8px);transform:none;width:auto}
  @keyframes cookieIn{from{transform:translateY(18px);opacity:0}}}

/* the mark reads as an object, not a bullet */
.districts li{gap:10px}
.districts .zone-mark{opacity:.92;transition:opacity .14s var(--ease),transform .14s var(--ease)}
.districts li:hover .zone-mark{opacity:1;transform:translateY(-1px)}

/* ================= SOON GATE ================= */
body.gated{overflow:hidden}
body.gated #nav,body.gated #ticker,body.gated #footer,
body.gated .panel,body.gated .dock,body.gated .hud-hint,body.gated #hero,
body.gated #cookie{display:none}
#soon[hidden]{display:none}   /* an id selector outranks the UA rule for [hidden] */
#soon{position:fixed;inset:0;z-index:190;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 50% -10%,rgba(22,35,59,.35) 0%,rgba(7,11,22,.72) 58%,rgba(7,11,22,.92) 100%)}
.soon-card{width:min(560px,100%);text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:18px;padding:38px 30px 30px;
  background:rgba(13,20,34,.94);border:1px solid var(--line);border-top:3px solid var(--amber);
  box-shadow:10px 10px 0 rgba(0,0,0,.6);animation:soonIn .5s var(--ease)}
@keyframes soonIn{from{transform:translateY(16px)}}
.soon-mark{width:84px;height:84px;background:url(./assets/logo.png) 50% 25%/320% auto no-repeat;
  box-shadow:6px 6px 0 rgba(255,159,67,.16)}
.soon-eyebrow{font-size:9px;color:var(--amber);letter-spacing:.26em}
.soon-h1{font-family:var(--sans);font-weight:900;font-size:clamp(64px,14vw,132px);
  letter-spacing:-.06em;line-height:.82;color:var(--paper);
  text-shadow:5px 5px 0 var(--black),10px 10px 0 rgba(255,159,67,.32)}
.soon-p{max-width:44ch;font-size:13px;line-height:1.7;color:var(--muted)}
.soon-stats{display:flex;gap:30px;border-top:1px solid var(--line-soft);padding-top:16px}
.soon-stats div{display:flex;flex-direction:column;gap:4px}
.soon-stats b{font-family:var(--sans);font-size:24px;font-weight:900;letter-spacing:-.03em;color:var(--paper)}
.soon-stats span{font-size:8px;color:var(--soft);letter-spacing:.2em}
.soon-foot{font-size:8px;color:var(--soft);letter-spacing:.18em}
@media (max-width:560px){
  .soon-card{padding:28px 18px 22px;gap:14px}
  .soon-stats{gap:20px}
}

/* wallet path is not open yet: listed, marked, not clickable */
.wallet.soon{cursor:not-allowed;opacity:.5;position:relative}
.wallet.soon:hover{border-color:var(--line);transform:none;box-shadow:none}
.wallet-soon{margin-left:auto;font-size:8px;letter-spacing:.2em;color:var(--amber);
  border:1px solid var(--amber);padding:4px 7px}