:root{color-scheme:dark;--bg:#060908;--panel:#0c1210;--panel2:#101915;--felt:#0b3a2b;--felt2:#06271d;--gold:#d7ad59;--gold2:#f1d28a;--text:#f5f2e9;--muted:#a8b2ad;--line:#26362f;--red:#d64b45;--green:#2fa86f;--blue:#5c91df;--shadow:0 18px 55px #0009}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#163b2e 0,#08110d 34%,#050706 75%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}button{cursor:pointer}.app{max-width:1180px;margin:auto;padding:18px 18px 90px}.topbar{position:sticky;top:0;z-index:20;margin:0 -4px 18px;padding:12px 10px;display:flex;gap:12px;align-items:center;justify-content:space-between;background:linear-gradient(#07100de8,#07100dc7 75%,transparent);backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:11px}.brandmark{width:40px;height:40px;border:1px solid #7d673a;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#214d3a,#0a1812);color:var(--gold2);font-size:20px;box-shadow:0 0 24px #d7ad5920}.brand h1{font-size:18px;margin:0;letter-spacing:.02em}.version{font-size:11px;color:var(--gold2);letter-spacing:.12em;text-transform:uppercase}.top-actions{display:flex;gap:8px;align-items:center}.bank{padding:9px 12px;border:1px solid #4b513f;border-radius:12px;background:#0a0f0d;font-weight:800;color:var(--gold2)}.iconbtn,.secondary,.primary,.danger,.chip,.action{border:1px solid #3a463f;border-radius:12px;background:#111814;color:var(--text);padding:10px 14px;font-weight:750}.iconbtn{padding:10px 12px}.primary{background:linear-gradient(180deg,#e0b85f,#b78937);border-color:#f3d48b;color:#151109}.danger{border-color:#713b39;background:#2a1110;color:#ffc4c0}.secondary:hover,.iconbtn:hover,.action:hover{border-color:#7b8a82}.primary:hover{filter:brightness(1.08)}.hero{border:1px solid #4b553f;border-radius:26px;padding:28px;background:linear-gradient(135deg,#102b21e8,#09120f 62%),radial-gradient(circle at 80% 20%,#d7ad5924,transparent 40%);box-shadow:var(--shadow);overflow:hidden;position:relative}.hero:after{content:"♠  ♥  ♦  ♣";position:absolute;right:24px;top:18px;color:#d7ad5919;font-size:68px;letter-spacing:4px;transform:rotate(-7deg)}.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);font-weight:800}.hero h2{font-size:clamp(34px,7vw,72px);line-height:.95;margin:10px 0 12px;max-width:780px}.hero p{max-width:720px;color:#c4cdc8;font-size:17px;line-height:1.55;margin:0}.hero-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.pill{border:1px solid #435249;border-radius:999px;padding:7px 10px;background:#08110d;color:#c9d2cd;font-size:12px;font-weight:700}.section-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:30px 2px 12px}.section-title h3{margin:0;font-size:22px}.section-title span{color:var(--muted);font-size:13px}.gamegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.gamecard{position:relative;min-height:190px;border:1px solid #36483e;border-radius:20px;padding:20px;background:linear-gradient(145deg,#111b16,#090e0c);overflow:hidden;box-shadow:0 12px 30px #0005;transition:.18s transform,.18s border-color;text-align:left;color:var(--text)}.gamecard:hover{transform:translateY(-2px);border-color:#9b814c}.gamecard .art{position:absolute;right:-8px;bottom:-18px;font-size:92px;opacity:.11;transform:rotate(-8deg)}.gamecard .tag{color:var(--gold2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}.gamecard h4{font-size:24px;margin:8px 0 5px}.gamecard p{color:var(--muted);line-height:1.45;margin:0;max-width:75%}.gamecard .go{position:absolute;left:20px;bottom:18px;color:var(--gold2);font-weight:800}.screen{display:none}.screen.active{display:block}.backrow{display:flex;align-items:center;gap:10px;margin-bottom:12px}.backrow h2{margin:0;font-size:24px}.table{border:1px solid #48604f;border-radius:28px;min-height:590px;background:radial-gradient(ellipse at 50% 35%,#14513b 0,#0a3929 48%,#06261c 100%);box-shadow:inset 0 0 0 6px #08110c,inset 0 0 0 8px #7b6338,0 20px 55px #0009;padding:22px;position:relative;overflow:hidden}.table:before{content:"TECHNICALLY WORKS";position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);font-weight:900;font-size:clamp(28px,6vw,70px);letter-spacing:.12em;color:#ffffff08;white-space:nowrap}.table-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;position:relative;z-index:2}.table-title small{display:block;color:#b9c6bf;margin-top:3px}.rulesbtn{white-space:nowrap}.dealer,.player{position:relative;z-index:2;text-align:center}.dealer{margin-top:18px}.player{margin-top:90px}.label{font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:#c3cec8;font-weight:800}.cards{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;min-height:104px;margin-top:9px}.card{width:70px;height:100px;border-radius:9px;background:#f6f3ec;color:#111;box-shadow:0 8px 14px #0007;border:1px solid #ddd;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:6px;font-weight:900;font-size:22px;animation:deal .25s ease-out}.card.red{color:#bf2f2b}.card.back{background:repeating-linear-gradient(45deg,#162e25,#162e25 5px,#c7a24f 5px,#c7a24f 7px);border:3px solid #eee;color:transparent}.card.mini{width:52px;height:74px;font-size:17px}.card .suit{font-size:24px;align-self:center}.card.best{box-shadow:0 0 0 3px var(--gold2),0 8px 18px #0008}@keyframes deal{from{transform:translateY(-30px) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}.total{display:inline-block;margin-top:7px;padding:5px 9px;border-radius:999px;background:#06120eaa;border:1px solid #416051;font-weight:800}.status{position:relative;z-index:2;margin:18px auto 10px;max-width:680px;text-align:center;min-height:26px;font-weight:800;color:#fff}.betbar{position:relative;z-index:3;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px}.chip{border-radius:999px;min-width:52px;background:#151915;border:3px dashed #d6c58d;padding:10px 12px}.chip.selected{outline:3px solid #fff4;transform:translateY(-2px)}.actions{position:relative;z-index:3;display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:15px}.action{min-width:88px;background:#0a120fdd}.action.gold{background:#c89c47;color:#151009;border-color:#f0d189}.action:disabled{opacity:.35;cursor:not-allowed}.betread{position:relative;z-index:2;text-align:center;color:#d4ddd8;font-size:13px;margin-top:8px}.variant-tabs{display:flex;gap:8px;overflow:auto;padding:2px 1px 12px;scrollbar-width:none}.variant-tabs::-webkit-scrollbar{display:none}.variant{white-space:nowrap;border:1px solid #34443b;border-radius:999px;padding:9px 12px;background:#0b110e;color:#cbd4cf;font-weight:750}.variant.on{background:#c69a47;color:#171109;border-color:#f0d18a}.roulette-wrap{position:relative;z-index:2;display:grid;grid-template-columns:270px 1fr;gap:18px;margin-top:20px}.wheel{width:250px;height:250px;border-radius:50%;margin:auto;border:12px solid #b58a42;box-shadow:inset 0 0 0 8px #15100b,0 12px 30px #0008;background:conic-gradient(#c63a36 0 9.7deg,#181818 9.7deg 19.4deg,#c63a36 19.4deg 29.1deg,#181818 29.1deg 38.8deg,#c63a36 38.8deg 48.5deg,#181818 48.5deg 58.2deg,#c63a36 58.2deg 67.9deg,#181818 67.9deg 77.6deg,#c63a36 77.6deg 87.3deg,#181818 87.3deg 97deg,#c63a36 97deg 106.7deg,#181818 106.7deg 116.4deg,#c63a36 116.4deg 126.1deg,#181818 126.1deg 135.8deg,#c63a36 135.8deg 145.5deg,#181818 145.5deg 155.2deg,#c63a36 155.2deg 164.9deg,#181818 164.9deg 174.6deg,#c63a36 174.6deg 184.3deg,#181818 184.3deg 194deg,#c63a36 194deg 203.7deg,#181818 203.7deg 213.4deg,#c63a36 213.4deg 223.1deg,#181818 223.1deg 232.8deg,#c63a36 232.8deg 242.5deg,#181818 242.5deg 252.2deg,#c63a36 252.2deg 261.9deg,#181818 261.9deg 271.6deg,#c63a36 271.6deg 281.3deg,#181818 281.3deg 291deg,#c63a36 291deg 300.7deg,#181818 300.7deg 310.4deg,#c63a36 310.4deg 320.1deg,#181818 320.1deg 329.8deg,#c63a36 329.8deg 339.5deg,#181818 339.5deg 349.2deg,#167447 349.2deg 360deg);position:relative;transition:transform 2s cubic-bezier(.12,.75,.18,1)}.wheel:after{content:"◆";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#0b0d0c;border:5px solid #d4ad60;color:#d4ad60;font-size:24px}.wheel.spin{transform:rotate(1260deg)}.roulette-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.rbet{border:1px solid #d6e1db55;border-radius:6px;background:#111;color:#fff;min-height:42px;font-weight:800}.rbet.red{background:#8f2825}.rbet.green{background:#17623f}.rbet.on{outline:3px solid #f4d37e;transform:scale(.96)}.history{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0}.history span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#111;border:1px solid #555;font-weight:800}.history .red{background:#8f2825}.history .green{background:#17623f}.uth-layout{position:relative;z-index:2}.betcircles{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:14px 0}.betcircle{width:90px;height:90px;border-radius:50%;border:2px solid #c8aa6b88;display:grid;place-items:center;text-align:center;background:#071a13aa;font-size:12px;font-weight:800}.betcircle strong{display:block;color:var(--gold2);font-size:16px}.community{display:flex;justify-content:center;gap:7px;min-height:104px;margin:18px 0}.steps{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0}.step{padding:7px 10px;border:1px solid #466052;border-radius:999px;color:#aebdb5;font-size:12px}.step.done,.step.now{background:#c89d49;color:#161009;border-color:#f0d28c}.three-bets{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px 0}.three-bets .betcircle{width:105px;height:76px;border-radius:16px}.settings-panel,.modal{position:fixed;inset:0;z-index:100;background:#000b;display:none;align-items:center;justify-content:center;padding:18px}.settings-panel.open,.modal.open{display:flex}.sheet{width:min(680px,100%);max-height:88vh;overflow:auto;border:1px solid #4b5c52;border-radius:22px;background:#0c1210;box-shadow:var(--shadow);padding:22px}.sheet h3{margin:0 0 16px;font-size:24px}.setting{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid #27342e}.setting small{display:block;color:var(--muted);margin-top:4px}.setting input,.setting select{width:145px;background:#070b09;color:#fff;border:1px solid #3c4b43;border-radius:10px;padding:10px}.rules{color:#c7d0cb;line-height:1.55}.rules h4{color:var(--gold2);margin:18px 0 6px}.rules ul{padding-left:20px}.footer-note{text-align:center;color:#6f7d75;font-size:11px;margin-top:26px}.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(30px);opacity:0;z-index:150;padding:11px 16px;border-radius:999px;background:#f2d083;color:#171008;font-weight:900;transition:.2s}.toast.show{opacity:1;transform:translateX(-50%)}@media(max-width:760px){.app{padding:10px 10px 80px}.topbar{padding-top:14px}.brand h1{font-size:15px}.bank{font-size:13px;padding:8px}.hero{padding:22px 18px}.hero:after{font-size:42px}.gamegrid{grid-template-columns:1fr}.gamecard{min-height:170px}.table{padding:14px 10px;border-radius:22px;min-height:620px}.player{margin-top:70px}.card{width:58px;height:84px;font-size:18px}.card .suit{font-size:20px}.roulette-wrap{grid-template-columns:1fr}.wheel{width:205px;height:205px}.roulette-grid{grid-template-columns:repeat(6,1fr)}.rbet{min-height:38px;padding:2px}.betcircle{width:78px;height:78px}.top-actions .secondary{display:none}}
/* v1.0.3 — merged patches, scrollable felt, posted paytables */
.gamecard{display:flex;flex-direction:column;align-items:flex-start}
.gamecard p{position:relative;z-index:2;margin-bottom:12px}
.gamecard .go{position:static;margin-top:auto;padding-top:8px;z-index:3}
.table{overflow:auto}
.screen{overflow:auto}
#uth .player{margin-top:16px}
#three .player{margin-top:20px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sheet-head h3{margin:0}
.sheet-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}

.paytables{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px auto 0;max-width:560px;width:100%}
.paytables table{width:100%;border-collapse:collapse;background:#07140fcc;border:1px solid #c8aa6b55;border-radius:12px;overflow:hidden;font-size:11px}
.paytables caption{caption-side:top;text-align:left;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);font-size:10px;padding:7px 10px 4px}
.paytables th{text-align:left;font-weight:700;color:#e8eee9;padding:3px 10px 4px}
.paytables td{text-align:right;font-weight:800;color:var(--gold2);padding:3px 10px 4px;white-space:nowrap}
.paytables tr.hit{background:#d7ad5930}
.paytables tr.hit th,.paytables tr.hit td{color:#fff}

.payout-line{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:680px;margin:8px auto 0;min-height:0}
.payout-line:empty{display:none}
.payout-line span{border:1px solid #416051;background:#06120eaa;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800;color:#d4ddd8}
.payout-line span small{display:block;font-weight:650;color:#9eaea6;font-size:9px;letter-spacing:.02em}
.payout-line .up{border-color:#2fa86f;color:#b8f0d0}
.payout-line .down{border-color:#d64b45;color:#ffc4c0}
.payout-line .total-net{background:#c89c47;color:#151009;border-color:#f0d189}

.swap-felt{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:430px;margin:4px auto 0;padding:6px 10px 3px;border-radius:18px}
.swap-hand{min-width:0;text-align:center;padding:4px;border-radius:14px}
.swap-hand.active-hand{box-shadow:0 0 0 2px #e8c36a inset,0 0 16px #e8c36a55}
.swap-slots{display:grid;grid-template-columns:repeat(2,minmax(38px,46px));justify-content:center;gap:5px;min-height:62px}
.swap-slot{min-width:38px;min-height:58px;border:1px dashed #ffffff26;border-radius:8px;display:flex;align-items:center;justify-content:center}
.swap-felt.ready .swap-slot.second{border:2px solid #e8c36a;box-shadow:0 0 10px #e8c36a44}
.swap-arrow{display:none;position:absolute;left:50%;top:27px;transform:translateX(-50%);font-size:27px;line-height:1;color:#f2d27d;text-shadow:0 2px 8px #000;font-weight:900;z-index:4}
.swap-felt.ready .swap-arrow{display:block}

.roulette-wrap{grid-template-columns:120px 1fr;gap:8px;align-items:center}
.wheel{width:112px;height:112px;border-width:7px}
.wheel:after{width:38px;height:38px;border-width:3px;font-size:16px}
.roulette-ball{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;left:50%;top:4px;transform:translateX(-50%);box-shadow:0 0 6px #fff;z-index:5;transform-origin:50% 50px}
.wheel.spin .roulette-ball{animation:ballOrbit 2s cubic-bezier(.18,.75,.16,1)}
@keyframes ballOrbit{0%{transform:translateX(-50%) rotate(0deg) translateY(0)}100%{transform:translateX(-50%) rotate(-1800deg) translateY(0)}}
.roulette-grid{grid-template-columns:repeat(14,minmax(20px,1fr));gap:2px;align-content:center}
.roulette-grid.mini{position:relative;cursor:zoom-in}
.roulette-grid.mini .rbet{min-height:29px;font-size:8px;padding:0}
.roulette-grid.mini:after{content:'Tap board to enlarge';position:absolute;right:4px;bottom:4px;background:#050806d9;border:1px solid #d7ad59;border-radius:999px;padding:4px 7px;color:#f1d28a;font-size:9px;font-weight:900;pointer-events:none}
.rbet.zero{grid-row:span 3;background:#17623f}
.rbet.outside{background:#075b38}
.rbet.wide4{grid-column:span 4}
.rbet.wide2{grid-column:span 2}
.roulette-timer{font-size:11px;color:#f1d28a;text-align:center;margin-top:4px;position:relative;z-index:2}
.roulette-expanded{position:fixed;inset:0;z-index:140;background:#000d;display:none;align-items:center;justify-content:center;padding:12px}
.roulette-expanded.open{display:flex}
.roulette-expanded .sheet{width:min(900px,100%);max-height:96dvh;padding:12px}
.roulette-expanded .roulette-grid{display:grid;grid-template-columns:repeat(14,minmax(22px,1fr));gap:3px}
.roulette-expanded .rbet{min-height:42px;font-size:12px}
.expand-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.expand-head h3{margin:0}

@media(max-width:760px){
  .paytables{grid-template-columns:1fr;max-width:100%}
  .paytables table{font-size:12px}
  .roulette-wrap{grid-template-columns:108px 1fr}
  .wheel{width:98px;height:98px}
  .payout-line span{font-size:10px}
}

/* v1.0.4 — compact felt so Deal/Hit stay on screen; faster table rhythm */
.table{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
#blackjack .table,
#uth .table,
#three .table{
  min-height:min(560px, calc(100dvh - 148px));
  max-height:calc(100dvh - 132px);
}
.dealer{margin-top:8px}
.player{margin-top:16px}
#blackjack .player,
#uth .player,
#three .player{margin-top:14px}
.cards{min-height:88px}
.status{margin:10px auto 4px;min-height:22px}
.betread{margin-top:4px}
.table-head,.betbar,.actions{flex-shrink:0}
.dealer,.player{flex:0 0 auto}
#blackjack .status{
  margin:8px auto 4px;
  padding:6px 12px;
  background:#06120ed9;
  border:1px solid #416051;
  border-radius:10px;
  z-index:4;
  width:fit-content;
  max-width:90%;
}
#blackjack .actions,
#uth .actions,
#three .actions{
  position:sticky;
  bottom:0;
  z-index:5;
  padding:10px 0 4px;
  background:linear-gradient(transparent,#06261c 36%);
}
.backrow{margin-bottom:8px}
.topbar{margin-bottom:8px}

@media(max-width:760px){
  .app{padding:8px 8px 20px}
  .table{padding:12px 8px 8px;border-radius:18px;min-height:0}
  #blackjack .table,
  #uth .table,
  #three .table{min-height:min(520px, calc(100dvh - 138px));max-height:calc(100dvh - 120px)}
  .player{margin-top:12px}
  .card{width:52px;height:74px;font-size:16px}
  .card.mini{width:42px;height:60px;font-size:14px}
  .cards{min-height:74px;margin-top:6px}
  .backrow h2{font-size:20px}
  .action{min-width:72px;padding:10px 12px}
}

/* v1.0.5 — no card jump, shoe + count, cleaner felt */
.card{animation:none}
.card.fresh{animation:deal .22s ease-out}
.topbar{
  background:#07100d;
  margin:0 0 10px;
}
.backrow{position:relative;z-index:5}
.table:before{top:62%;font-size:clamp(18px,4vw,42px);opacity:.7;pointer-events:none;z-index:0}
.shoe-tabs{
  display:flex;
  gap:6px;
  overflow:auto;
  padding:0 1px 10px;
  scrollbar-width:none;
}
.shoe-tabs::-webkit-scrollbar{display:none}
.shoe-tabs[hidden]{display:none}
.shoe-tabs button{
  white-space:nowrap;
  border:1px solid #34443b;
  border-radius:999px;
  padding:7px 11px;
  background:#0b110e;
  color:#cbd4cf;
  font-weight:700;
  font-size:12px;
}
.shoe-tabs button.on{
  background:#1d3d32;
  color:#f1d28a;
  border-color:#d7ad59;
}
.count-hud{
  position:relative;
  z-index:3;
  margin:6px auto 0;
  max-width:100%;
  text-align:center;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  color:#f1d28a;
  background:#06120ecc;
  border:1px solid #d7ad5944;
  border-radius:999px;
  padding:6px 12px;
}
.count-hud[hidden]{display:none}
#bjSubtitle{display:block;line-height:1.3}

/* v1.0.6 — roulette board, ball track, poker showdown, compact felt odds */
.backrow{gap:12px;align-items:center}
.backrow .iconbtn{flex-shrink:0}
.backrow h2{flex:1;min-width:0;line-height:1.15}

.card.kicker{opacity:.4;transform:scale(.88)}
.hand-name{
  position:relative;z-index:3;
  margin:6px auto 0;padding:5px 10px;width:fit-content;max-width:92%;
  border-radius:999px;border:1px solid #d7ad5955;background:#06120ed9;
  color:#f1d28a;font-size:12px;font-weight:800;letter-spacing:.02em;
}
.kickers{display:flex;justify-content:center;gap:6px;min-height:0;margin:4px 0}
.cards.made{justify-content:center}

.paytables.compact{margin:6px 0 8px;gap:6px}
.paytables.compact table{font-size:9px;background:#07140fe6}
.paytables.compact th,.paytables.compact td{padding:1px 5px;line-height:1.25}
.paytables.compact caption{font-size:9px;letter-spacing:.14em}

#uth .table,#three .table,#roulette .table{overflow:auto}
#uth .actions,#three .actions,#roulette .actions{position:sticky;bottom:0}

.roulette-wrap{
  display:grid;
  grid-template-columns:minmax(140px,168px) minmax(0,1fr);
  gap:10px;
  align-items:start;
  margin-top:10px;
}
.board-col{min-width:0}
.wheel-wrap{
  position:relative;
  width:168px;height:168px;
  margin:4px auto;
}
.wheel-wrap .wheel{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  border-width:10px;
}
.wheel-wrap .wheel:after{width:46px;height:46px;font-size:16px;border-width:3px}
.ball-track{
  position:absolute;inset:14%;
  border-radius:50%;pointer-events:none;z-index:6;
}
.roulette-ball{
  position:absolute;left:50%;top:2px;
  width:9px;height:9px;margin:0;
  border-radius:50%;background:#f6f1e4;
  box-shadow:0 0 7px #fff;transform:translateX(-50%);
}
.wheel-wrap.spin .wheel{transform:rotate(1080deg);transition:transform 2s cubic-bezier(.12,.75,.18,1)}
.wheel-wrap.spin .ball-track{animation:ballSpin 2s cubic-bezier(.12,.75,.18,1)}
@keyframes ballSpin{to{transform:rotate(-1980deg)}}
.wheel.spin .roulette-ball{animation:none}

.roulette-grid{
  display:grid;
  grid-template-columns:1.25fr repeat(12,minmax(0,1fr)) .95fr;
  grid-template-rows:repeat(6,minmax(22px,1fr)) minmax(28px,auto) minmax(28px,auto);
  gap:2px;width:100%;min-width:0;
}
.roulette-grid.mini:after{content:none;display:none}
.rbet{
  min-width:0;min-height:22px;padding:1px 2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:10px;line-height:1.05;
}
.rbet.zero{grid-row:auto;background:#17623f}
.rbet .rchip{color:#f1d28a;font-size:8px;font-weight:900;line-height:1}
.board-hint{
  display:block;margin:8px auto 0;
  border:1px solid #d7ad59;border-radius:999px;
  background:#050806d9;color:#f1d28a;
  font-size:11px;font-weight:800;padding:6px 12px;
}
.roulette-expanded{
  position:fixed;inset:0;z-index:9999;
  background:#050806f2;
  display:none;align-items:center;justify-content:center;padding:12px;
}
.roulette-expanded.open{display:flex !important}
.roulette-expanded .sheet{width:min(980px,100%);max-height:96dvh;overflow:auto;background:#0c1210;border:1px solid #d7ad59}
.roulette-expanded .sheet{width:min(980px,100%);overflow:auto}
.roulette-expanded .roulette-grid{
  grid-template-rows:repeat(6,minmax(36px,auto)) minmax(40px,auto) minmax(40px,auto);
}
.roulette-expanded .rbet{min-height:36px;font-size:13px}
.roulette-expanded .rbet .rchip{font-size:10px}

@media(max-width:760px){
  .roulette-wrap{grid-template-columns:1fr}
  .wheel-wrap{width:132px;height:132px}
  .rbet{font-size:9px;min-height:20px}
  .paytables.compact{grid-template-columns:1fr 1fr}
  .hand-name{font-size:11px}
}

/* v1.0.7 — win/loss callout */
.toast.up{background:#2fa86f;color:#07140c}
.toast.down{background:#d64b45;color:#fff}
.toast.even{background:#c9d2cd;color:#171008}
.bank{position:relative}
.bank-delta{
  position:absolute;left:50%;top:-16px;
  transform:translateX(-50%);
  font-size:12px;font-weight:900;white-space:nowrap;
  animation:bankRise 1.6s ease-out forwards;
  pointer-events:none;
}
.bank-delta.up{color:#3dce7a}
.bank-delta.down{color:#ff8b80}
.bank-delta.even{color:#f1d28a}
@keyframes bankRise{
  0%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(-18px)}
}



/* v1.0.9 — real floor tables + compact 21 that fits the phone */
html,body{height:100%;min-height:100svh}
.app{min-height:100svh;display:flex;flex-direction:column;padding:10px 10px 12px}
.topbar{flex:0 0 auto;margin:0 0 8px}
.screen.active{flex:1;min-height:0}

#lobby.screen.active{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid #5a4630;
  border-radius:20px;
  padding:10px;
  background:
    radial-gradient(ellipse at 22% 22%,rgba(241,210,138,.16),transparent 36%),
    radial-gradient(ellipse at 78% 22%,rgba(241,210,138,.12),transparent 36%),
    radial-gradient(ellipse at 22% 78%,rgba(241,210,138,.1),transparent 36%),
    radial-gradient(ellipse at 78% 78%,rgba(241,210,138,.14),transparent 36%),
    repeating-linear-gradient(90deg,#1c120e 0 18px,#16100d 18px 19px),
    #140e0b;
  box-shadow:inset 0 0 80px #000a,0 16px 40px #0006;
}
.floor{
  flex:1;
  min-height:0;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:8px;
}
.pit{
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 6px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:center;
}
.pit:hover{transform:translateY(-2px)}
.rail{
  width:min(92%, 230px);
  padding:7px;
  border-radius:50%;
  background:linear-gradient(180deg,#e3c37a,#8a6a32);
  box-shadow:0 10px 22px #0009,0 0 18px #d7ad5922;
}
.rail-bj{border-radius:46% / 54%;width:min(96%,250px)}
.rail-poker{border-radius:50%}
.rail-wheel{border-radius:50%;width:min(78%,190px)}
.rail-three{border-radius:28px;width:min(92%,230px)}
.felt-top{
  border-radius:inherit;
  background:radial-gradient(ellipse at 50% 35%,#1b704f,#0b3a2b 58%,#062018);
  min-height:72px;
  height:clamp(72px, 18vh, 130px);
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 3px #08140f,inset 0 8px 18px #0005;
}
.pit-icon{width:min(72%,88px);height:auto;display:block;filter:drop-shadow(0 4px 6px #0007)}
.pit b{font-size:clamp(14px,4vw,18px);font-weight:900;letter-spacing:.01em}
.pit small{color:var(--gold2);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}

#blackjack.screen.active,
#uth.screen.active,
#three.screen.active,
#roulette.screen.active{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#blackjack .backrow,
#blackjack .variant-tabs,
#blackjack .shoe-tabs{flex:0 0 auto}
#blackjack .table,
#uth .table,
#three .table{
  flex:1;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden;
}
#blackjack .eyebrow{display:none}
#blackjack .betbar{margin-top:auto}

@media(max-width:760px){
  .app{padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .topbar{margin-bottom:4px;padding:6px 6px}
  .brandmark{width:32px;height:32px;font-size:16px}
  .brand h1{font-size:13px}
  .version{font-size:9px}
  .bank{padding:6px 9px;font-size:12px}
  .iconbtn{padding:8px 9px}
  .backrow{margin-bottom:4px}
  .backrow h2{font-size:18px}
  .variant-tabs{padding-bottom:6px;gap:6px}
  .variant{padding:6px 10px;font-size:12px}
  .shoe-tabs{padding-bottom:6px}
  .shoe-tabs button{padding:5px 9px;font-size:11px}
  #lobby.screen.active{padding:8px;border-radius:16px}
  .felt-top{height:clamp(64px,16vh,110px)}
  #blackjack .table{padding:8px 8px 6px;border-radius:16px}
  #blackjack .table-head{margin:0}
  #blackjack .dealer{margin-top:2px}
  #blackjack .player{margin-top:8px}
  #blackjack .cards{min-height:0;margin-top:4px;gap:5px}
  #blackjack .card{width:44px;height:62px;font-size:14px;padding:4px}
  #blackjack .card .suit{font-size:16px}
  #blackjack .total{margin-top:4px;padding:3px 7px;font-size:12px}
  #blackjack .status{margin:6px auto 2px;padding:4px 8px;font-size:12px;min-height:0}
  #blackjack .betread{margin-top:2px;font-size:11px}
  #blackjack .betbar{margin-top:auto;gap:5px}
  #blackjack .chip{min-width:44px;padding:7px 8px;font-size:12px}
  #blackjack .actions{margin-top:6px;padding:6px 0 0;gap:6px}
  #blackjack .action{min-width:64px;padding:8px 10px;font-size:13px}
  #bjSubtitle{font-size:12px}
}