:root{color-scheme:dark;--bg:#160207;--panel:#2a0812;--gold:#f4d78a;--gold-2:#c9a04a;--red:#c81e35;--red-2:#8a1226;--muted:#a89a8a;--ink:#f7ecd6;font-family:Arial,Helvetica,sans-serif;font-size:15px}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% -20%,#4a0c1f 0%,#160207 55%) fixed;color:var(--ink);min-height:100dvh}
button,input,select{font:inherit}
button{cursor:pointer;color:inherit;background:#ffffff08;border:1px solid #ffffff22;border-radius:7px;padding:10px 14px;min-height:42px;transition:background .18s,transform .18s}
button:hover{background:#ffffff14}
button:active{transform:translateY(1px)}
button:disabled{cursor:default;opacity:.45;transform:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
main{max-width:1480px;margin:auto;padding:36px 4vw 12px}

.home-btn{position:fixed;top:14px;left:14px;padding:8px 14px;background:rgba(20,4,10,0.85);color:var(--gold);text-decoration:none;border:1px solid #4d1a24;border-radius:4px;font:700 12px system-ui;letter-spacing:1px;backdrop-filter:blur(6px);z-index:500}
.home-btn:hover{background:rgba(60,15,30,0.9)}

/* ── LOBBY / FLOOR CARD ─────────────────────────────────── */
.floor{padding:80px 20px 20px;display:flex;justify-content:center}
.floor-hero{max-width:720px;text-align:center}
.eyebrow{letter-spacing:3px;font:700 11px system-ui;color:var(--gold-2);margin-bottom:16px}
.floor-hero h1{font:clamp(48px,7vw,84px)/1 Georgia,serif;letter-spacing:-1px;margin-bottom:14px;background:linear-gradient(135deg,#ffe58a 0%,#c9a04a 60%,#a97a1a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.floor-hero h1 em{font-style:normal;color:#fff;background:none;-webkit-background-clip:initial;background-clip:initial}
.tagline{font-size:15px;color:var(--muted);line-height:1.7;max-width:560px;margin:0 auto 32px}
.floor-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.floor-facts>div{padding:16px;border:1px solid #4d1a24;border-radius:8px;background:#22050e}
.fact-label{display:block;font:700 9px system-ui;letter-spacing:2px;color:var(--gold-2);margin-bottom:8px}
.floor-facts strong{font:32px Georgia,serif;color:var(--gold);font-variant-numeric:tabular-nums}
.floor-occ{color:var(--gold);font-size:12px;margin-bottom:14px;letter-spacing:1px}
.primary{background:linear-gradient(120deg,#eec86b 0%,#c9a04a 100%);border:1px solid #f5dfa6;color:#17091a;min-height:48px;font-weight:bold;letter-spacing:1.5px}
.primary:hover{background:linear-gradient(120deg,#f4d78a 0%,#d4b45a 100%)}
.primary.big{padding:14px 40px;font-size:16px;letter-spacing:2px}
.floor-note{margin-top:14px;color:var(--muted);font-size:12px}
.muted{color:var(--muted)!important}

/* ── TOP BAR ─────────────────────────────────────────────── */
.topbar{display:grid;grid-template-columns:auto 1fr auto auto;gap:20px;align-items:center;padding:20px 8px 12px}
.topbar-brand{display:flex;align-items:center;gap:12px}
.brand-mark{display:grid;place-items:center;width:44px;height:44px;background:linear-gradient(120deg,#eec86b,#c9a04a);color:#3a0a12;border-radius:8px;font:700 24px Georgia,serif;box-shadow:0 3px 0 #6b532c}
.brand-name{font:700 18px Georgia,serif;color:var(--gold);letter-spacing:1px}
.brand-sub{font:700 10px system-ui;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-top:2px}
.topbar-wallet,.topbar-jack{padding:8px 16px;border:1px solid #4d1a24;border-radius:8px;background:#22050e;text-align:right}
.wallet-label{display:block;font:700 9px system-ui;letter-spacing:2px;color:var(--muted);margin-bottom:2px}
.topbar-wallet strong,.topbar-jack strong{font:22px Georgia,serif;font-variant-numeric:tabular-nums;color:var(--gold)}
.top-actions{display:flex;gap:8px;align-items:center}
.icon-button{font:700 11px system-ui;letter-spacing:1px;min-height:36px;padding:6px 12px}
.connection{color:var(--muted);font-size:11px;padding:6px 10px;border-radius:6px}
.connection.live{color:#7ce4a6}
.connection.live:before{content:'●';margin-right:4px}
.floor-meta{display:flex;justify-content:space-between;align-items:center;padding:0 8px 12px;color:var(--muted);font-size:12px}
.text-button{background:none;border-color:transparent;color:var(--gold);font-size:12px}

/* ── SEATS ────────────────────────────────────────────────── */
.seats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.seat{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #4d1a24;border-radius:8px;background:#22050e;min-width:0}
.seat.you{border-color:#f5c25c;background:#3a1a22}
.avatar{flex-shrink:0;width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(130deg,#4a1826,#2a0812);border:1px solid #6b3846;color:var(--gold);font:18px Georgia}
.seat.empty .avatar{background:transparent;color:#7a5560;border-style:dashed}
.seat-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:normal;color:var(--ink)}
.seat-copy small{display:block;color:var(--muted);font-size:9px;margin-top:4px;letter-spacing:1px;text-transform:uppercase}

/* ── PLAY LAYOUT ─────────────────────────────────────────── */
.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:stretch}
.play-layout.chat-hidden{grid-template-columns:minmax(0,1fr)}
.machine-column{min-width:0}
.cabinet{padding:14px 18px 10px;border:1px solid #f5c25c8f;border-radius:16px;background:linear-gradient(135deg,#6a0f1c 0%,#1a0308 15%,#1a0308 80%,#6a0f1c 100%);box-shadow:0 20px 50px #0007,inset 0 0 0 4px #0a0104,inset 0 0 0 5px #f5c25c55}
.cabinet-top{display:flex;justify-content:space-between;font:700 9px system-ui;letter-spacing:1px;color:var(--gold-2);padding-bottom:10px;margin-bottom:8px}

/* ── REEL WINDOW ─────────────────────────────────────────── */
.reel-window{position:relative;isolation:isolate;border:2px solid #f5c25c;border-radius:8px;background:#0a0104;overflow:hidden;box-shadow:inset 0 0 40px #000c;aspect-ratio:5/3;max-width:650px;max-height:390px;width:100%;margin:0 auto}
.reels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative;z-index:1;width:100%;height:100%}
.reel{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));border-right:1px solid #f5c25c40;min-width:0;min-height:0;background:linear-gradient(180deg,#1a0308,#3a0a12 50%,#1a0308)}
.reel:last-child{border:0}
.symbol{display:grid;place-items:center;min-height:0;position:relative;border-bottom:1px solid #ffffff08}
.symbol svg{width:86%;height:94%;max-height:120px;filter:drop-shadow(0 5px 6px #000b)}
.symbol.win{background:#f5c25c33;box-shadow:inset 0 0 22px #f5c25c66}
.reel.spinning{animation:reel-shimmer .2s linear infinite}
.reel.spinning .symbol{overflow:hidden}
.reel.spinning .symbol svg{animation:reel-scroll .22s linear infinite;filter:blur(1.6px);opacity:.92;will-change:transform}
.reel.spinning .symbol:nth-child(1) svg{animation-delay:0s}
.reel.spinning .symbol:nth-child(2) svg{animation-delay:-.075s}
.reel.spinning .symbol:nth-child(3) svg{animation-delay:-.15s}
.reel[data-reel="0"].spinning .symbol svg{animation-duration:.20s}
.reel[data-reel="1"].spinning .symbol svg{animation-duration:.22s}
.reel[data-reel="2"].spinning .symbol svg{animation-duration:.24s}
.reel[data-reel="3"].spinning .symbol svg{animation-duration:.26s}
.reel[data-reel="4"].spinning .symbol svg{animation-duration:.28s}
.paylines{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;filter:drop-shadow(0 0 6px #ffe58a)}
.paylines polyline{fill:none;stroke:#ffe58a;stroke-width:3;stroke-linejoin:round}
.reel-watermark{position:absolute;inset:0;display:grid;place-items:center;z-index:2;font:clamp(16px,3vw,32px) Georgia;letter-spacing:5px;color:#f5d791;text-shadow:0 3px 8px #000;background:#0a010480;pointer-events:none}

/* ── WHEEL BONUS OVERLAY ─────────────────────────────────── */
.wheel-overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:radial-gradient(ellipse at center,#000 0%,#000c 50%,#000c 100%);animation:wheel-fade-in .35s ease-out both}
.wheel-stage{position:relative;width:min(72%,340px);aspect-ratio:1;display:grid;place-items:center}
.wheel-disc{width:100%;height:100%;filter:drop-shadow(0 8px 20px #000c);transform-origin:center;transition:transform 4.2s cubic-bezier(.15,.7,.15,1)}
.wheel-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid #ffe58a;z-index:2;filter:drop-shadow(0 2px 4px #000)}
.wheel-hub{position:absolute;width:28%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 30%,#ffe58a,#c9a04a 60%,#6b3600);border:3px solid #3d0810;display:grid;place-items:center;box-shadow:0 4px 10px #000a,inset 0 0 12px #6b3600;z-index:3}
.wheel-hub-label{font:700 12px Georgia,serif;color:#3d0810;letter-spacing:2px}
.wheel-hub-sub{font:700 9px system-ui;color:#3d0810;letter-spacing:2px}
.wheel-caption{position:absolute;bottom:16px;left:0;right:0;text-align:center;font:18px Georgia,serif;color:var(--gold);text-shadow:0 3px 8px #000}
.wheel-caption strong{color:#fff;font-size:26px}
@keyframes wheel-fade-in{from{opacity:0}to{opacity:1}}

/* ── RESULT / CONTROLS ───────────────────────────────────── */
.result-strip{min-height:60px;padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.result-strip>span{font-size:14px;color:var(--gold-2)}
.result-strip>strong{font-size:14px;font-weight:normal;color:var(--muted);text-align:right}
.result-strip.big-win>strong{color:var(--gold);font-size:22px}
.controls{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid #ffffff16;border-radius:12px;background:#22050e}
.label{font-size:9px;letter-spacing:1.5px;color:var(--muted)}
.bet-block{min-width:145px}
.bet-stepper{display:flex;align-items:center;gap:15px;margin:5px 0}
.bet-stepper button{border-radius:50%;width:38px;min-height:38px;padding:0;font-size:22px;background:#3a1018}
.bet-stepper strong{min-width:58px;text-align:center;font-size:23px;font-variant-numeric:tabular-nums;color:var(--gold)}
.bet-block>small{font-size:10px;color:var(--muted)}
.spin-wrap{margin-left:auto;min-width:180px;text-align:center}
.spin{width:100%;min-height:70px;display:flex;align-items:center;justify-content:center;gap:16px;border:2px solid #ffe58a;border-radius:12px;background:linear-gradient(130deg,#c81e35 0%,#8a1226 100%);color:#ffe58a;box-shadow:0 5px 0 #4a0812,0 6px 22px #c81e3533;font-weight:bold;font-size:22px;letter-spacing:3px}
.spin:hover{background:linear-gradient(130deg,#d92e45 0%,#9a2236 100%)}
.spin:disabled{background:#3a1018;box-shadow:none}
.spin-arrow{font-size:28px}
.spin-wrap>small{display:block;margin-top:10px;font-size:9px;color:var(--muted)}
.machine-footer{display:flex;justify-content:space-between;padding-top:12px;font-size:9px;color:var(--muted)}

/* ── CHAT PANEL ──────────────────────────────────────────── */
.chat-panel{display:flex;flex-direction:column;border:1px solid #ffffff14;border-radius:12px;padding:20px 15px;background:#22050e;min-height:0;max-height:650px}
.chat-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.chat-heading h2{font:20px Georgia;margin:0;color:var(--gold)}
.chat-live{font:700 9px system-ui;color:#7ce4a6;letter-spacing:1px}
.chat-intro{font-size:11px;color:var(--muted);line-height:1.7;border-bottom:1px solid #ffffff14;padding-bottom:14px;margin-bottom:8px}
.chat-messages{flex:1;min-height:150px;overflow-y:auto;max-height:360px;padding:8px 0;overflow-wrap:anywhere}
.chat-message{margin-bottom:12px;font-size:12px;line-height:1.6}
.chat-message strong{display:block;color:var(--gold);font-size:10px;margin-bottom:3px}
.room-event{font-size:11px;color:#7ce4a6;line-height:1.6;padding:10px 0;border-top:1px solid #ffffff13}
#chat-form{display:flex;border:1px solid #ffffff23;border-radius:8px;padding:3px;background:#160207;margin-top:8px}
input{border:0;background:none;flex:1;font-size:12px;padding:9px;color:var(--ink)}
#chat-form button{border:none;background:none;color:var(--gold);font-size:20px;padding:7px 12px}
.bot-disclosure{color:#7a5560;font-size:9px;line-height:1.6;margin-top:10px}

/* ── DIALOG ──────────────────────────────────────────────── */
dialog{color:var(--ink);background:#2a0812;border:1px solid #f5c25c90;border-radius:16px;padding:0;width:min(520px,calc(100% - 24px));box-shadow:0 25px 100px #000c}
dialog::backdrop{background:#02010160;backdrop-filter:blur(8px)}
.dialog-inner{position:relative;padding:36px}
.dialog-inner h2{font:30px/1.1 Georgia;margin:8px 0 12px;color:var(--gold)}
.dialog-inner p{color:#b8a89a;font-size:13px;line-height:1.7}
.dialog-inner .primary{width:100%;margin:14px 0}
.dialog-close{position:absolute;right:12px;top:10px;border:0;background:none;font-size:24px;color:var(--gold)}
.button-link{display:block;text-align:center;text-decoration:none;padding:12px;border-radius:7px;color:var(--muted)}
.paytable-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.pay-symbol{padding:10px;border:1px solid #ffffff1c;border-radius:8px;text-align:center;background:#160207}
.pay-symbol svg{width:60px;height:60px}
.pay-symbol strong{display:block;color:var(--gold);font-size:11px;margin:6px 0}
.pay-symbol p{font-size:10px;color:var(--muted);margin:0}
.wheel-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wheel-legend div{padding:8px;text-align:center;border-radius:6px;font:700 12px Georgia,serif;color:#3d0810}
.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{border:1px solid #ffffff25;border-radius:8px;padding:14px;font-size:10px;color:var(--muted)}
.stat strong{display:block;font-size:22px;color:var(--gold);margin-top:8px}
.bot-toggle{display:flex;gap:10px;align-items:center;font-size:13px;padding:20px 0}
.bot-toggle input{width:20px;height:20px}

/* ── KEYFRAMES ───────────────────────────────────────────── */
@keyframes reel-shimmer{0%{opacity:.65}50%{opacity:1}100%{opacity:.65}}
@keyframes reel-scroll{0%{transform:translateY(-140%)}100%{transform:translateY(140%)}}

@media(max-width:900px){
  .play-layout{grid-template-columns:1fr}
  .chat-panel{max-height:350px}
  .floor-facts{grid-template-columns:1fr;gap:10px}
  .topbar{grid-template-columns:1fr auto;grid-template-areas:'brand actions' 'wallet jack';gap:12px}
  .topbar-brand{grid-area:brand}
  .top-actions{grid-area:actions}
  .topbar-wallet{grid-area:wallet;text-align:left}
  .topbar-jack{grid-area:jack;text-align:right}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ── PERSISTENT WHEEL TOPPER (Frank 2026-09-26) ─────────────────────────
   Big decorative wheel visible above the reels at all times so the game
   reads as a wheel-of-fortune slot. Same segment layout as the bonus
   overlay disc; the JS renders both from the same config.wheelSegments. */
.wheel-topper {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: center;
  padding: 12px 20px 20px;
  margin-bottom: 8px;
}
.wheel-topper-stage {
  position: relative;
  width: 220px; height: 220px;
  display: grid; place-items: center;
}
.wheel-disc-static {
  width: 100%; height: 100%;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.55));
  animation: wheel-idle-spin 22s linear infinite;
  transform-origin: center;
}
.wheel-pointer-static {
  position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid #ffe58a;
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8));
}
.wheel-hub-static {
  position: absolute;
  width: 28%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #ffe58a, #c9a04a 60%, #6b3600);
  border: 3px solid #3d0810;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 0 10px #6b3600;
  z-index: 3;
}
.wheel-hub-static .wheel-hub-label { font: 700 9px Georgia, serif; color: #3d0810; letter-spacing: 1px; }
.wheel-hub-static .wheel-hub-sub   { font: 700 7px system-ui;      color: #3d0810; letter-spacing: 1px; text-align: center; }

.wheel-topper-caption {
  color: #f4d78a;
  font: 15px Georgia, serif;
  line-height: 1.6;
}
.wheel-topper-caption strong { display: block; font-size: 17px; margin-bottom: 4px; }
.wheel-topper-caption span   { font-size: 12px; color: #b8a89a; }
.wheel-topper-caption .wheel-scatter {
  color: #ffe58a;
  font-weight: 700;
  padding: 2px 8px;
  border: 1px solid #c9a04a;
  border-radius: 4px;
  margin: 0 4px;
}

@keyframes wheel-idle-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 720px) {
  .wheel-topper { grid-template-columns: 1fr; text-align: center; }
  .wheel-topper-stage { margin: 0 auto; width: 160px; height: 160px; }
}