:root {
  --gold: #d4af37;
  --gold-2: #f6e27a;
  --gold-3: #a8841f;
  --red: #8e1b1b;
  --ink: #0b0806;
  --panel: rgba(14, 10, 8, 0.82);
  --line: rgba(212, 175, 55, 0.35);
  --text: #f3e9d2;
  --muted: #b7a98a;
  --serif: Georgia, 'Times New Roman', 'Book Antiqua', serif;
  --sans: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050403; color: var(--text); font-family: var(--sans); user-select: none; -webkit-user-select: none; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }

.gold-text {
  font-family: var(--serif);
  background: linear-gradient(180deg, #fff6c4 0%, #f6e27a 25%, #d4af37 55%, #8a6a16 80%, #f6e27a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6)) drop-shadow(0 0 12px rgba(212,175,55,0.35));
  letter-spacing: 0.06em;
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); backdrop-filter: blur(6px); }

.btn { border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; font-weight: 700; letter-spacing: 0.05em; color: var(--text); transition: transform .1s, filter .2s; }
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .5; cursor: default; filter: grayscale(.6); }
.btn-gold { background: linear-gradient(180deg, #f6e27a, #d4af37 45%, #a8841f); color: #1a1205; border-color: #fff3b0; text-shadow: 0 1px 0 rgba(255,255,255,.4); box-shadow: 0 6px 20px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-dark { background: linear-gradient(180deg, #2a1e16, #140d09); }
.btn-big { font-size: 18px; padding: 14px 28px; }
.x { background: none; border: none; color: var(--muted); font-size: 18px; padding: 4px 8px; }
.x:hover { color: var(--text); }

/* ---------------- Start screen ---------------- */
.screen { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background:
  radial-gradient(ellipse at 50% 30%, rgba(142,27,27,.55), transparent 60%),
  radial-gradient(ellipse at 50% 120%, rgba(212,175,55,.25), transparent 50%),
  repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 40px), rgba(10,6,5,.45); }
.start-card { width: min(560px, 92vw); padding: 28px 32px; border-radius: 18px; background: rgba(12,8,6,.88); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 6px rgba(212,175,55,.06); display: flex; flex-direction: column; gap: 14px; }
.logo { text-align: center; }
.logo h1 { font-size: clamp(30px, 6vw, 46px); margin: 4px 0; }
.logo-sub { font-family: var(--serif); font-style: italic; color: var(--muted); }
.logo-tag { font-size: 12px; letter-spacing: .25em; color: var(--gold); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.field input, .field select { background: #1a120d; border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 10px 12px; font-size: 16px; user-select: text; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 -4px 8px rgba(0,0,0,.4); }
.swatch.active { border-color: var(--gold-2); transform: scale(1.12); }
.swatch:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.status { min-height: 18px; font-size: 13px; color: var(--muted); text-align: center; }
.controls-help { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; }
.legal { font-size: 11px; text-align: center; color: #7d705a; }
.multiplayer-link-panel { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(212,175,55,.06); min-width: 0; }
.multiplayer-link-panel p { margin: 2px 0; line-height: 1.5; }
.multiplayer-link-row { display: flex; flex-wrap: wrap; gap: 8px; }
.multiplayer-link-row input { flex: 1 1 200px; width: 100%; min-width: 0; -webkit-user-select: text; }
.multiplayer-link-row .btn { flex: 0 0 auto; }
.multiplayer-link-panel .status { text-align: left; }
.multiplayer-link-panel :focus-visible, .multiplayer-copy-dialog :focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
#hud-top-left { position: absolute; top: 14px; left: 14px; padding: 10px 14px; min-width: 200px; }
.hud-name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 6px currentColor; }
.hud-balance { margin-top: 4px; font-size: 18px; font-family: var(--serif); color: var(--gold-2); }
.hud-balance .label { font-size: 11px; color: var(--muted); font-family: var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.hud-room { font-size: 11px; color: var(--muted); margin-top: 2px; }
.hud-voice { font-size: 11px; color: var(--muted); margin-top: 2px; }
.hud-voice.private { color: #e9c8ff; }
.mic-field select { background: #1a120d; border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; width: 100%; }
.mic-field select:disabled { opacity: .6; }
#speaker-hint { margin: 4px 0 10px; }
.mic-meter { height: 6px; margin: 8px 0 4px; border-radius: 3px; background: #1a120d; border: 1px solid var(--line); overflow: hidden; }
.mic-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3ad06a, #ffc94d 70%, #ff4d4d); transition: width .08s linear; }
#minimap-wrap { position: absolute; top: 14px; right: 14px; padding: 8px; }
#minimap { display: block; width: 264px; height: 156px; border-radius: 8px; }
.minimap-legend { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--muted); margin-top: 4px; max-width: 264px; }
.minimap-legend .lg-row { display: flex; flex-wrap: wrap; gap: 3px 9px; justify-content: center; }
.minimap-legend .lg-slots { font-size: 9.5px; }
.minimap-legend span { white-space: nowrap; }
.minimap-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.lg-you { background: #fff; } .lg-peer { background: #4fc3f7; } .lg-slot { background: var(--gold); border-radius: 2px !important; }
.lg-don { background: #111; box-shadow: 0 0 0 1.5px #d4af37; }
.minimap-legend i.lg-local { width: 6px; height: 6px; background: #cfd3d8; box-shadow: 0 0 0 1px rgba(0,0,0,.75); }
.minimap-legend i.lg-shop { background: #3a2a20; border-radius: 1px; box-shadow: inset 0 0 0 1px #d4af37; }
.minimap-legend i.lg-2x2 { background: #ff7a52; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.minimap-legend i.lg-3x3 { background: #5be08a; }
.minimap-legend i.lg-4x4 { background: #d4af37; border-radius: 1px; }
.minimap-legend i.lg-5x5 { background: #3ad0ff; border-radius: 1px; transform: rotate(45deg) scale(.82); }
.minimap-legend i.lg-6x6 { background: #c77dff; border-radius: 1px; transform: rotate(45deg) scale(.82); }
.minimap-legend i.lg-home { background: #5a3524; border-radius: 1px; box-shadow: inset 0 0 0 1px #e0a060; }
.minimap-legend i.lg-subway { width: 9px; height: 9px; background: #1b4d2e; border-radius: 50%; box-shadow: inset 0 0 0 1px #7dffa8; }
.minimap-legend i.lg-door { width: 9px; height: 4px; border-radius: 1px; background: #c8a46a; }
.minimap-legend i.lg-bus { width: 11px; height: 5px; border-radius: 1px; background: #f2f4f6; box-shadow: inset 0 -2px 0 #2a5aa8; }
.minimap-legend i.lg-stop { background: #e8c020; border-radius: 1px; box-shadow: inset 0 0 0 1px #3a2a08; }
.minimap-legend i.lg-train { width: 11px; height: 5px; border-radius: 1px; background: #b8c0c8; box-shadow: inset 0 -1.5px 0 #2a5aa8; }
.minimap-legend i.lg-booth { background: #6a4a2a; border-radius: 1px; box-shadow: inset 0 0 0 1px #ffd23a; }
.minimap-key { display: none; }
/* phones: a compact map; the key folds away behind a small toggle */
@media (max-width: 600px), (max-height: 520px) {
  #minimap-wrap { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); padding: 4px; border-radius: 10px; max-width: 46vw; }
  #minimap-wrap #minimap { width: 128px; height: 76px; border-radius: 6px; }
  .minimap-key { display: block; width: 100%; margin-top: 3px; padding: 2px 0; font: 600 9.5px/1.2 inherit; font-family: inherit; color: var(--muted); background: rgba(255,255,255,.06); border: 1px solid rgba(212,175,55,.35); border-radius: 5px; cursor: pointer; }
  .minimap-key[aria-expanded="true"] { color: var(--gold-2, #f3d98a); }
  #minimap-wrap:not(.show-key) .minimap-legend { display: none; }
  #minimap-wrap.show-key .minimap-legend { max-width: 128px; font-size: 8.5px; }
  #minimap-wrap.show-key .minimap-legend .lg-slots { font-size: 8px; }
}
#zone-fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .26s ease; z-index: 40; }
#zone-fade.on { opacity: 1; }
#prompt { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); padding: 12px 20px; border-radius: 12px; background: rgba(10,7,5,.85); border: 1px solid var(--gold); font-size: 16px; text-align: center; box-shadow: 0 0 30px rgba(212,175,55,.3); pointer-events: none; }
#prompt kbd, kbd { display: inline-block; background: linear-gradient(#f6e27a, #b8901f); color: #1a1205; border-radius: 5px; padding: 1px 8px; font-weight: 800; font-family: var(--sans); box-shadow: 0 2px 0 #6d5212; margin: 0 3px; }
#hud-bottom-right { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; }
.round-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); font-size: 20px; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.round-btn.off { background: rgba(120,20,20,.85); }
.round-btn.live { box-shadow: 0 0 0 3px rgba(76,175,80,.8), 0 6px 18px rgba(0,0,0,.5); }
#hud-hint { position: absolute; left: 14px; bottom: 14px; font-size: 12px; color: var(--muted); background: rgba(0,0,0,.4); padding: 6px 10px; border-radius: 8px; pointer-events: none; }
#touch-joystick { position: absolute; left: 30px; bottom: 60px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.08); border: 2px solid rgba(212,175,55,.4); touch-action: none; }
#touch-joystick .stick { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(212,175,55,.6); }

#player-popup { position: fixed; z-index: 30; padding: 12px; min-width: 210px; }
#player-popup .pp-name { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 8px; }
#player-popup .pp-row { display: flex; gap: 8px; margin-top: 10px; }
#player-popup .pp-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.side-panel { position: fixed; z-index: 30; right: 14px; top: 210px; width: 280px; padding: 12px; max-height: 60vh; overflow: auto; }
.side-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 8px; }
.settings-audio-title { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
#settings-multiplayer-btn { width: 100%; margin-top: 4px; }
#settings-multiplayer-link-panel { margin-top: 10px; }
.player-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; }
.player-row:hover { background: rgba(255,255,255,.05); }
.player-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-row .meta { font-size: 11px; color: var(--muted); }
.player-row button { font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: #1d140f; color: var(--text); }
.player-row button.muted-on { background: #6b1414; }
.speaking-ind { width: 8px; height: 8px; border-radius: 50%; background: #333; }
.speaking-ind.on { background: #4caf50; box-shadow: 0 0 8px #4caf50; }
.slider { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin: 8px 0; }
.slider input { width: 100%; accent-color: var(--gold); }

#toasts { position: fixed; z-index: 80; top: 90px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: rgba(14,10,8,.92); border: 1px solid var(--gold); border-radius: 12px; padding: 10px 16px; display: flex; gap: 12px; align-items: center; animation: toastIn .4s ease-out, toastOut .5s ease-in 3.6s forwards; box-shadow: 0 0 30px rgba(212,175,55,.25); }
.toast .ti { font-size: 26px; }
.toast .tt { font-weight: 800; color: var(--gold-2); }
.toast .td { font-size: 12px; color: var(--muted); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }

/* ---------------- Modals ---------------- */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.modal-card { width: min(520px, 94vw); max-height: 88vh; overflow: auto; background: linear-gradient(180deg, #1a110c, #0d0806); border: 1px solid var(--gold); border-radius: 16px; padding: 18px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.8), inset 0 0 0 4px rgba(212,175,55,.08); }
.modal-card.wide { width: min(980px, 96vw); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modal-head h2 { margin: 0 0 4px; font-size: 26px; }
.multiplayer-copy-dialog { color: var(--text); text-align: center; padding: 28px; }
.multiplayer-copy-dialog::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(5px); }
.multiplayer-copy-badge { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 16px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-2); background: rgba(212,175,55,.1); box-shadow: 0 0 28px rgba(212,175,55,.15); }
.multiplayer-copy-dialog h2 { margin: 0; font-size: clamp(22px, 5vw, 28px); }
.multiplayer-copy-dialog p { line-height: 1.6; }
.multiplayer-copy-dialog ol { text-align: left; padding-left: 24px; line-height: 1.6; }
.multiplayer-copy-dialog li { margin: 12px 0; padding-left: 4px; }
.multiplayer-copy-dialog li::marker { color: var(--gold-2); font-weight: 700; }
.multiplayer-copy-dialog .btn { width: 100%; margin-top: 8px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 14px; }
.ach { position: relative; border-radius: 12px; padding: 12px; background: linear-gradient(180deg, #221710, #120c08); border: 1px solid rgba(255,255,255,.06); filter: grayscale(.9) brightness(.7); }
.ach.done { filter: none; border-color: var(--gold); box-shadow: 0 0 18px rgba(212,175,55,.18); }
.ach .ai { font-size: 30px; }
.ach .at { font-weight: 800; margin-top: 4px; color: var(--gold-2); }
.ach .ad { font-size: 12px; color: var(--muted); margin-top: 2px; min-height: 30px; }
.ach .ap { height: 6px; border-radius: 3px; background: #2b211a; margin-top: 8px; overflow: hidden; }
.ach .ap > div { height: 100%; background: linear-gradient(90deg, #a8841f, #f6e27a); }
.ach .when { position: absolute; top: 10px; right: 10px; font-size: 10px; color: var(--gold); }
.ach .cat { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8d7b5c; }

/* ---------------- Slot overlay ---------------- */
#slot-overlay { position: fixed; inset: 0; z-index: 40; background:
  radial-gradient(ellipse at 50% 0%, rgba(142,27,27,.45), transparent 55%),
  radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.9), rgba(0,0,0,.65)); backdrop-filter: blur(5px) saturate(1.1); display: grid; place-items: center; animation: fadeIn .35s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
.slot-stage { display: grid; grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 250px); align-items: center; gap: 14px; width: min(1400px, 100vw); height: 100vh; padding: 10px 16px; }
#mobster-wrap { height: min(88vh, 720px); display: flex; align-items: flex-end; justify-content: center; position: relative; }
#mobster-wrap svg { height: 100%; width: auto; max-width: 100%; overflow: visible; }

.cabinet { --cab-w: min(560px, calc(100vh - 290px), 46vw); width: calc(var(--cab-w) + 56px); border-radius: 26px 26px 18px 18px; padding: 0 18px 16px; position: relative;
  background: linear-gradient(90deg, #2a0909 0%, #6d1515 8%, #8e1b1b 50%, #6d1515 92%, #2a0909 100%);
  border: 3px solid #b8901f; box-shadow: 0 0 0 2px #3a2a08, 0 0 60px rgba(212,175,55,.25), 0 40px 80px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.2); }
.cabinet::before { content: ''; position: absolute; inset: 6px; border-radius: 22px 22px 14px 14px; border: 1px solid rgba(246,226,122,.25); pointer-events: none; }
.topper { position: relative; margin: -46px -10px 10px; padding: 18px 10px 12px; text-align: center; border-radius: 120px 120px 14px 14px;
  background: radial-gradient(ellipse at 50% 120%, #3b0d0d, #120404 70%); border: 3px solid #d4af37; box-shadow: 0 0 30px rgba(212,175,55,.4), inset 0 0 30px rgba(0,0,0,.8); overflow: hidden; }
.topper-title { font-size: clamp(22px, 3.2vw, 38px); font-weight: 900; }
.topper-sub { font-size: 11px; letter-spacing: .25em; color: #f0d9a0; opacity: .85; }
.bulbs { position: absolute; inset: 4px; border-radius: 116px 116px 10px 10px; pointer-events: none;
  background: radial-gradient(circle, #fff7c8 0 2.5px, rgba(255,214,90,.6) 3.5px, transparent 5px) 0 0 / 18px 18px;
  -webkit-mask: linear-gradient(#000 0 0) top/100% 10px no-repeat, linear-gradient(#000 0 0) bottom/100% 10px no-repeat;
  mask: linear-gradient(#000 0 0) top/100% 10px no-repeat, linear-gradient(#000 0 0) bottom/100% 10px no-repeat;
  animation: chase 0.6s steps(2) infinite; }
.fs-mode .bulbs { animation-duration: .25s; filter: hue-rotate(-30deg) saturate(1.6); }
@keyframes chase { to { background-position: 9px 0; } }
@keyframes chase-sm { to { background-position: 6px 0; } }

.fs-bar { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 10px; align-items: center; padding: 8px 12px; margin-bottom: 8px; border-radius: 10px; background: linear-gradient(180deg, #2b0a0a, #120404); border: 1px solid #ff9f43; box-shadow: 0 0 20px rgba(255,120,40,.35); }
.fs-bar .label { display: block; font-size: 10px; letter-spacing: .15em; color: #ffcf8a; }
.fs-bar b { font-family: var(--serif); font-size: 20px; color: #fff3c4; }
.heat { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.heat-meter { height: 12px; border-radius: 6px; background: #1b0606; border: 1px solid #7a2a10; overflow: hidden; }
#heat-fill { height: 100%; width: 4%; background: linear-gradient(90deg, #ffd166, #ff8c42, #ff3d3d, #ff00aa); transition: width .5s cubic-bezier(.2,1.4,.4,1); box-shadow: 0 0 12px #ff8c42; }
#heat-mult { color: #ffb347 !important; text-shadow: 0 0 10px #ff6a00; font-size: 24px !important; }
#heat-mult.pulse { animation: pulse .6s ease-out; }
@keyframes pulse { 0% { transform: scale(1.8); } 100% { transform: scale(1); } }

.reel-bezel { position: relative; width: var(--cab-w); height: var(--cab-w); margin: 0 auto; border-radius: 14px; padding: 10px;
  background: linear-gradient(145deg, #fff6c4, #b8901f 20%, #6d5212 50%, #d4af37 80%, #fff6c4);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.6); }
#reels { width: 100%; height: 100%; display: block; border-radius: 8px; background: #0a0606; }
.glass { position: absolute; inset: 10px; border-radius: 8px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 28%, transparent 30%, transparent 70%, rgba(255,255,255,.05) 85%, transparent 100%),
              linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 14%, transparent 86%, rgba(0,0,0,.55) 100%);
  box-shadow: inset 0 0 30px rgba(0,0,0,.8); }
.win-pop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 22px; border-radius: 12px; background: rgba(0,0,0,.78); border: 2px solid var(--gold); font-family: var(--serif); font-size: 30px; font-weight: 900; color: var(--gold-2); text-shadow: 0 0 14px rgba(246,226,122,.7); pointer-events: none; animation: popIn .35s cubic-bezier(.2,1.6,.4,1); white-space: nowrap; }
.win-pop small { display: block; font-size: 13px; color: var(--muted); font-family: var(--sans); text-align: center; }
@keyframes popIn { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
.spectate-tag { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); background: rgba(10,30,60,.85); border: 1px solid #4fc3f7; color: #cfefff; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; }

.message-bar { margin: 10px auto 8px; text-align: center; font-family: var(--serif); font-style: italic; color: #f8e6b8; min-height: 22px; text-shadow: 0 1px 2px #000; }
.deck { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #1b0f0b, #0b0705); border: 1px solid #5c4513; box-shadow: inset 0 2px 8px rgba(0,0,0,.8); }
.meter { background: #060403; border: 1px solid #3a2a08; border-radius: 8px; padding: 4px 8px; text-align: center; box-shadow: inset 0 0 10px rgba(0,0,0,.9); }
.meter .label { display: block; font-size: 10px; letter-spacing: .15em; color: #9c8a63; }
.meter b { font-family: 'Consolas', 'Courier New', monospace; color: #ffdf6b; text-shadow: 0 0 8px rgba(255,200,60,.6); font-size: 17px; }
.bet-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mini { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #b8901f; background: linear-gradient(#3a2a08, #1a1205); color: var(--gold-2); font-weight: 900; font-size: 16px; line-height: 1; }
.mini:disabled { opacity: .4; }
.deck-buttons { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
.deck-btn { min-width: 70px; height: 46px; border-radius: 10px; border: 1px solid #b8901f; background: linear-gradient(180deg, #3b2a12, #1a1006); color: #f6e27a; font-weight: 800; font-size: 11px; letter-spacing: .08em; line-height: 1.1; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 3px 0 #0a0603; }
.deck-btn.on { background: linear-gradient(180deg, #2e7d32, #0f3d12); border-color: #8bc34a; color: #e8ffd0; }
.deck-btn.buy { background: linear-gradient(180deg, #b71c1c, #5a0a0a); border-color: #ffcf6b; color: #fff2c6; }
.deck-btn:disabled { opacity: .45; cursor: default; }
.spin-btn { width: 84px; height: 84px; border-radius: 50%; border: 4px solid #fff3b0; background: radial-gradient(circle at 50% 35%, #ffe680, #d4af37 45%, #7a5a10 100%); color: #2a1a03; font-weight: 900; font-size: 17px; letter-spacing: .08em; box-shadow: 0 0 0 4px #5c4513, 0 8px 22px rgba(212,175,55,.45), inset 0 -6px 14px rgba(0,0,0,.35); transition: transform .12s; }
.spin-btn:hover { transform: scale(1.05); }
.spin-btn:active { transform: scale(.95); }
.spin-btn.spinning span { display: inline-block; animation: spinTxt 1s linear infinite; }
.spin-btn.stop { background: radial-gradient(circle at 50% 35%, #ff8a80, #c62828 45%, #5a0a0a 100%); color: #fff; }
.spin-btn:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
@keyframes spinTxt { to { transform: rotate(360deg); } }
.replay-controls { text-align: center; padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.slot-side { display: flex; flex-direction: column; gap: 10px; align-self: center; }
.side-box { padding: 10px 12px; }
.side-title { font-weight: 800; color: var(--gold-2); margin-bottom: 6px; font-size: 13px; letter-spacing: .05em; }
.kv { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; }
.kv b { color: #ffdf6b; font-family: 'Consolas', monospace; }
.spectator { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.rtp-note { text-align: center; }

.bigwin { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; background: radial-gradient(circle, rgba(60,30,0,.55), rgba(0,0,0,.8)); pointer-events: auto; cursor: pointer; }
#coin-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bigwin-title { position: relative; font-family: var(--serif); font-weight: 900; font-size: clamp(48px, 9vw, 120px); letter-spacing: .04em;
  background: linear-gradient(180deg, #fffbe0 0%, #f6e27a 30%, #d4af37 55%, #7a5a10 75%, #f6e27a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 #3a2a08) drop-shadow(0 0 30px rgba(255,200,60,.7)); animation: bigIn .7s cubic-bezier(.2,1.6,.4,1), wobble 1.6s ease-in-out .7s infinite; }
.bigwin-amount { position: relative; font-family: 'Consolas', monospace; font-size: clamp(36px, 6vw, 72px); font-weight: 900; color: #fff; text-shadow: 0 0 20px #ffcf40, 0 4px 0 #6d5212; }
@keyframes bigIn { from { transform: scale(.2) rotate(-8deg); opacity: 0; } }
@keyframes wobble { 50% { transform: scale(1.05) rotate(1deg); } }
.fs-intro { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(0,0,0,.65); pointer-events: auto; cursor: pointer; }
.fs-intro-card { text-align: center; padding: 30px 50px; border-radius: 20px; background: radial-gradient(ellipse at 50% 0%, #6d1515, #1a0505 70%); border: 3px solid #d4af37; box-shadow: 0 0 80px rgba(255,120,40,.5); animation: bigIn .6s cubic-bezier(.2,1.6,.4,1); }
.fs-intro-title { font-size: clamp(36px, 6vw, 70px); font-weight: 900; }
.fs-intro-sub { font-size: clamp(22px, 3vw, 36px); font-weight: 900; color: #fff; margin: 6px 0; text-shadow: 0 0 20px #ff8c42; }
.fs-intro-desc { color: #f0d9a0; font-family: var(--serif); font-style: italic; }

.buy-body { text-align: center; }
.briefcase-art { display: flex; justify-content: center; margin: 6px 0; }
.briefcase-art canvas { width: 140px; height: 140px; }
.buy-cost { font-size: 22px; margin: 10px 0; font-family: var(--serif); }
.buy-cost b { color: var(--gold-2); }
.row-gap { display: flex; gap: 10px; justify-content: center; }
.auto-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.info-body { display: grid; gap: 14px; margin-top: 8px; }
.info-body h3 { margin: 6px 0; color: var(--gold-2); font-family: var(--serif); }
.pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pay-item { display: flex; gap: 10px; align-items: center; background: #160e0a; border: 1px solid rgba(212,175,55,.2); border-radius: 10px; padding: 8px; }
.pay-item canvas { width: 64px; height: 64px; flex: none; }
.pay-item .pn { font-weight: 800; }
.pay-item .pt { font-size: 10px; letter-spacing: .1em; color: #8d7b5c; text-transform: uppercase; }
.pay-item .pv { font-size: 12px; font-family: 'Consolas', monospace; color: #ffdf6b; }
.info-body p, .info-body li { color: #e6d9bb; font-size: 14px; line-height: 1.5; }

#error-banner { position: fixed; z-index: 99; left: 50%; top: 14px; transform: translateX(-50%); background: #5a0a0a; border: 1px solid #ff8a80; padding: 10px 16px; border-radius: 10px; max-width: 90vw; }

@media (max-width: 980px) {
  .slot-stage { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow: auto; height: 100%; align-content: start; padding-top: 50px; }
  #mobster-wrap { position: fixed; left: -20px; bottom: 0; height: 40vh; opacity: .9; pointer-events: none; z-index: -1; }
  .cabinet { --cab-w: min(92vw - 56px, 60vh); margin: 0 auto; }
  .slot-side { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  #minimap { width: 176px; height: 104px; }
  .minimap-legend { max-width: 176px; font-size: 9px; }
  .minimap-legend .lg-slots { font-size: 8.5px; }
}

/* ---- mobster speech bubble, misc ---- */
.mob-bubble { position: absolute; top: -10px; left: 52%; max-width: 270px; background: #fffaf0; color: #1a0f08; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.35; padding: 10px 14px; border-radius: 16px; border: 2px solid #d4af37; box-shadow: 0 8px 24px rgba(0,0,0,.6); animation: bubbleIn .35s cubic-bezier(.2,1.5,.4,1); z-index: 2; pointer-events: none; }
.mob-bubble::after { content: ''; position: absolute; bottom: -12px; left: 18%; border: 12px solid transparent; border-top-color: #fffaf0; border-bottom: 0; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px) scale(.85); } }
.mob-plate { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 14px 4px; border-radius: 6px; background: linear-gradient(#1c1510, #0a0705); border: 1px solid #a8842e; box-shadow: 0 3px 10px rgba(0,0,0,.65); white-space: nowrap; pointer-events: none; z-index: 3; animation: fadeIn .4s ease-out; }
.mob-plate b { font-family: var(--serif); font-size: 12px; letter-spacing: .12em; color: #f3d98a; }
.mob-plate span { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: #b9a882; }
.mob-plate[data-tier="2x2"] { border-color: #6b5e48; } .mob-plate[data-tier="2x2"] b { color: #d9cfb4; }
.mob-plate[data-tier="3x3"] { border-color: #d8b040; } .mob-plate[data-tier="3x3"] b { color: #ffd84a; }
.mob-plate[data-tier="5x5"] { border-color: #e9e2cf; } .mob-plate[data-tier="5x5"] b { color: #fbf6e6; }
.mob-plate[data-tier="6x6"] { border-color: #f3d98a; background: linear-gradient(#2a1036, #0e0614); box-shadow: 0 0 16px rgba(243,217,138,.45), 0 3px 10px rgba(0,0,0,.65); }
.mob-plate[data-tier="6x6"] b { font-size: 15px; letter-spacing: .3em; color: #ffe9a8; text-shadow: 0 0 8px rgba(255,210,110,.6); }
.meter .label { text-transform: uppercase; }
#player-popup .slider { margin: 8px 0 0; }
#player-popup .pp-name .x { font-size: 14px; }
@media (max-width: 980px) { .mob-bubble, .mob-plate { display: none; } }
/* ---- fit the cabinet to the viewport height ---- */
.slot-stage { overflow-y: auto; align-items: safe center; }
.cabinet { --cab-w: min(560px, calc(100vh - 360px), 46vw); margin-top: 40px; }
.cabinet.fs-mode { --cab-w: min(560px, calc(100vh - 420px), 46vw); }
@media (max-height: 820px) {
  .cabinet { --cab-w: min(560px, calc(100vh - 300px), 46vw); margin-top: 34px; }
  .cabinet.fs-mode { --cab-w: min(560px, calc(100vh - 350px), 46vw); }
  .topper { margin-top: -34px; padding: 10px 10px 8px; margin-bottom: 6px; }
  .topper-title { font-size: clamp(20px, 2.6vw, 30px); }
  .message-bar { margin: 6px auto 6px; font-size: 14px; }
  .deck { padding: 6px 8px; gap: 6px; }
  .deck-buttons { margin-top: 0; }
  .spin-btn { width: 66px; height: 66px; font-size: 14px; }
  .deck-btn { height: 38px; min-width: 62px; }
  .fs-bar { padding: 4px 10px; margin-bottom: 6px; }
  .fs-bar b { font-size: 17px; }
}
@media (hover: hover) and (pointer: fine) { #touch-joystick { display: none; } }
@media (max-width: 980px) { .cabinet, .cabinet.fs-mode { --cab-w: min(92vw - 56px, 60vh); } }@media (max-width: 640px) {
  #hud-hint { display: none; }
  .deck-buttons { gap: 6px; flex-wrap: nowrap; }
  .deck-btn { min-width: 0; padding: 0 8px; height: 40px; font-size: 10px; }
  .spin-btn { width: 64px; height: 64px; font-size: 13px; flex: none; }
  .deck { padding: 6px; }
  .meter b { font-size: 14px; }
  .topper-sub { font-size: 9px; letter-spacing: .15em; }
}#prompt { pointer-events: auto; cursor: pointer; }
#prompt:hover { border-color: var(--gold-2); }

/* ---------------- v2: 5x5 cabinet, features, buy options, duel layer ---------------- */
/* 5x5 "Don's Empire": midnight-blue cabinet with chrome trim, like the machines in the blue NE bank */
.cabinet.v5x5 { background: linear-gradient(90deg, #030a1a 0%, #0b2350 8%, #123a7a 50%, #0b2350 92%, #030a1a 100%); border-color: #c9d3e0;
  box-shadow: 0 0 0 2px #0a1830, 0 0 60px rgba(58,160,255,.3), 0 40px 80px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.2); }
.cabinet.v5x5::before { border-color: rgba(160,210,255,.3); }
.cabinet.v5x5 .topper { background: radial-gradient(ellipse at 50% 120%, #0f3d8a, #030a1c 70%); border-color: #c9d3e0; box-shadow: 0 0 30px rgba(58,160,255,.45), inset 0 0 30px rgba(0,0,0,.8); }
.cabinet.v5x5 .topper-sub { color: #9fdcff; opacity: 1; }
.cabinet.v5x5 .reel-bezel { background: linear-gradient(145deg, #f3f6ff, #9aa7b8 20%, #4c5868 50%, #c9d3e0 80%, #f3f6ff); }
/* 2x2 "Don's Trattoria" (Little Italy): walnut and cream, basil-green / tomato-red trim */
.cabinet.v2x2 { background: linear-gradient(90deg, #160b05 0%, #4a2a14 8%, #6a3c1c 50%, #4a2a14 92%, #160b05 100%); border-color: #e8dcc0;
  box-shadow: 0 0 0 2px #2a1408, 0 0 60px rgba(255,122,82,.25), 0 40px 80px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.2); }
.cabinet.v2x2 .topper { background: linear-gradient(90deg, rgba(31,138,76,.55) 0 33%, rgba(244,236,220,.12) 33% 67%, rgba(206,43,55,.55) 67%), radial-gradient(ellipse at 50% 120%, #4a1a0a, #140603 70%); border-color: #e8dcc0; }
.cabinet.v2x2 .topper-sub { color: #fff0d0; opacity: 1; }
.cabinet.v2x2 .reel-bezel { background: linear-gradient(145deg, #fff6e0, #d9b98a 20%, #6a4a24 50%, #d9b98a 80%, #fff6e0); }

/* slot overlay backdrop matches the machine colour: 2x2 trattoria, 3x3 green, 5x5 blue, 6x6 purple & gold */
#slot-overlay.bg-2x2 { background:
  radial-gradient(ellipse at 15% 0%, rgba(31,138,76,.4), transparent 45%),
  radial-gradient(ellipse at 85% 0%, rgba(206,43,55,.42), transparent 45%),
  radial-gradient(ellipse at 50% 100%, rgba(26,10,4,.92), rgba(40,18,8,.72)); }
#slot-overlay.bg-3x3 { background:
  radial-gradient(ellipse at 50% 0%, rgba(46,204,113,.5), transparent 55%),
  radial-gradient(ellipse at 50% 100%, rgba(2,22,10,.94), rgba(6,48,24,.75)); }
#slot-overlay.bg-5x5 { background:
  radial-gradient(ellipse at 50% 0%, rgba(58,160,255,.5), transparent 55%),
  radial-gradient(ellipse at 50% 100%, rgba(2,8,24,.94), rgba(8,28,70,.75)); }
#slot-overlay.bg-6x6 { background:
  repeating-conic-gradient(from 0deg at 50% -10%, rgba(242,207,99,.07) 0deg 3deg, transparent 3deg 12deg),
  radial-gradient(ellipse at 50% 0%, rgba(242,207,99,.42), transparent 45%),
  radial-gradient(ellipse at 50% 100%, rgba(18,4,30,.95), rgba(74,20,120,.78)); }
#slot-overlay.bg-6x6::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 3px solid rgba(242,207,99,.55); box-shadow: inset 0 0 0 9px rgba(74,20,120,.6), inset 0 0 0 11px rgba(242,207,99,.35), inset 0 0 120px rgba(176,96,255,.35); }
/* 3x3 "Don's Hustle" (Low Rollers): walnut cabinet, money-green topper, brass bezel */
.cabinet.v3x3 { background: linear-gradient(90deg, #120a04 0%, #3a2410 8%, #5a3a1a 50%, #3a2410 92%, #120a04 100%); border-color: #5be08a; }
.cabinet.v3x3 .topper { background: radial-gradient(ellipse at 50% 120%, #16733a, #03140a 70%); border-color: #d4af37; box-shadow: 0 0 30px rgba(91,224,138,.45), inset 0 0 30px rgba(0,0,0,.8); }
.cabinet.v3x3 .topper-sub { color: #9dffb8; opacity: 1; }
.cabinet.v3x3 .reel-bezel { background: linear-gradient(145deg, #fff0b8, #d4af37 20%, #6b4a10 50%, #d4af37 80%, #fff0b8); box-shadow: 0 0 22px rgba(91,224,138,.4), inset 0 0 18px rgba(0,0,0,.6); }
.fs-bar { --fc: #ff9f43; border-color: var(--fc); box-shadow: 0 0 20px color-mix(in srgb, var(--fc) 45%, transparent); grid-template-columns: auto 1fr auto auto; }
.fs-bar .fs-count .label { color: var(--fc); font-weight: 800; white-space: nowrap; }
.fs-sticky { display: flex; flex-direction: column; align-items: center; }
.fs-sticky .locks { display: flex; gap: 4px; }
.fs-sticky .locks b { font-size: 15px !important; padding: 1px 6px; border-radius: 6px; background: #3a0606; border: 1px solid #ff4d4d; color: #ffd0d0 !important; box-shadow: 0 0 8px rgba(255,60,60,.5); }
.fs-sticky .locks i { color: #8d7b5c; }
.cabinet.fs-sitdown .bulbs { filter: hue-rotate(160deg) saturate(1.6); }
.cabinet.fs-godfather .bulbs { filter: hue-rotate(-60deg) saturate(2.2) brightness(1.2); animation-duration: .18s; }
.fs-intro { --fc: #d4af37; }
.fs-intro-card { border-color: var(--fc); box-shadow: 0 0 80px color-mix(in srgb, var(--fc) 55%, transparent); }
.duel-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }

.buy-card-wrap { width: min(1040px, 96vw); }
.buy-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.buy-card { --fc: #d4af37; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 12px 16px; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--fc) 30%, #1a0d08), #0d0705 72%); border: 2px solid var(--fc);
  box-shadow: 0 0 24px color-mix(in srgb, var(--fc) 30%, transparent), inset 0 0 30px rgba(0,0,0,.6); transition: transform .15s ease; }
.buy-card:hover { transform: translateY(-3px); }
.buy-card canvas { width: 110px; height: 110px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.7)); }
.buy-card .bc-name { font-family: var(--serif); font-weight: 900; font-size: 22px; color: var(--fc); text-shadow: 0 0 12px color-mix(in srgb, var(--fc) 60%, transparent); }
.buy-card .bc-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.buy-card .bc-tags span { font-size: 10px; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid color-mix(in srgb, var(--fc) 60%, transparent); color: #f6ead0; }
.buy-card .bc-desc { font-size: 12px; color: var(--muted); min-height: 64px; }
.buy-card .bc-cost { font-family: var(--serif); }
.buy-card .bc-cost b { display: block; font-size: 24px; color: var(--gold-2); }
.buy-card .bc-cost small { color: #a8957a; }
.buy-card .btn { width: 100%; margin-top: auto; }
.buy-note { text-align: center; margin-top: 12px; }
@media (max-width: 760px) { .buy-options { grid-template-columns: 1fr; } .buy-card .bc-desc { min-height: 0; } .buy-card canvas { width: 80px; height: 80px; } }

/* ---------------- v2: tailor / wardrobe ---------------- */
.wardrobe-card { width: min(900px, 96vw); }
.wardrobe { display: grid; grid-template-columns: 300px 1fr; gap: 18px; margin: 12px 0; }
.wardrobe-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wardrobe-preview canvas { width: 300px; height: 380px; border-radius: 14px; border: 2px solid var(--gold); background: #120b07; box-shadow: inset 0 0 40px rgba(0,0,0,.8); }
.wardrobe-opts { display: flex; flex-direction: column; gap: 12px; }
.wr-row .wr-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.wr-row .swatches { gap: 6px; }
.wr-row .swatch { width: 28px; height: 28px; cursor: pointer; }
.wr-row input[type=color] { width: 34px; height: 28px; border: 1px solid var(--gold); border-radius: 6px; background: transparent; padding: 0; cursor: pointer; }
.wr-fabrics { display: flex; gap: 6px; flex-wrap: wrap; }
.wr-fabrics button { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(212,175,55,.4); background: #1a110c; color: #f0d9a0; cursor: pointer; font-size: 12px; }
.wr-fabrics button.active { border-color: var(--gold-2); background: #3a2a10; color: #fff3c4; box-shadow: 0 0 10px rgba(212,175,55,.4); }
.wardrobe-card .modal-actions { position: sticky; bottom: -18px; z-index: 2; display: flex; gap: 10px; margin: 0 -22px -18px; padding: 12px 22px 18px; background: #0d0806; box-shadow: 0 -16px 14px -6px #0d0806; border-radius: 0 0 16px 16px; }
@media (max-width: 760px) { .wardrobe { grid-template-columns: 1fr; } .wardrobe-preview canvas { width: 220px; height: 280px; } }

/* ---------------- v2: bar ---------------- */
#bar-hud { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 30; display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 14px; background: rgba(14,10,8,.9); border: 1px solid var(--gold); box-shadow: 0 0 30px rgba(212,175,55,.25); }
#bar-hud .bar-title { font-family: var(--serif); color: var(--gold-2); font-weight: 800; margin-right: 6px; }
#bar-hud .btn { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
@media (max-width: 600px), (pointer: coarse) { #bar-hud { bottom: 200px; padding: 8px 10px; gap: 8px; max-width: 94vw; } #bar-hud .bar-title { white-space: nowrap; font-size: 14px; } #bar-hud .key-hint { display: none; } }

/* ---------------- Supreme Roller lounge cabinets ---------------- */
.cabinet.supreme { background: linear-gradient(90deg, #07020c 0%, #24083a 8%, #38105a 50%, #24083a 92%, #07020c 100%); border-color: #e8c35a;
  box-shadow: 0 0 0 2px #2a0a40, 0 0 70px rgba(176,96,255,.35), 0 40px 80px rgba(0,0,0,.85), inset 0 2px 0 rgba(255,255,255,.22); }
.cabinet.supreme::before { border-color: rgba(233,200,255,.3); }
.cabinet.supreme .topper { background: radial-gradient(ellipse at 50% 120%, #3c0f5e, #0c0314 70%); border-color: #f2cf63; box-shadow: 0 0 34px rgba(199,125,255,.55), inset 0 0 30px rgba(0,0,0,.8); }
.cabinet.supreme .topper-title { background: linear-gradient(180deg, #fff6cf, #f2cf63 45%, #b8861f); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 8px rgba(199,125,255,.7)); }
.cabinet.supreme .topper-sub { color: #e9c8ff; opacity: 1; }
.cabinet.supreme .reel-bezel { background: linear-gradient(145deg, #fff3c4, #e2b84a 20%, #6b4a10 50%, #e2b84a 80%, #fff3c4); box-shadow: 0 0 26px rgba(199,125,255,.45), inset 0 0 18px rgba(0,0,0,.6); }

/* ---------------- beat-up subway cabinets: faded paint, tarnished trim, cracked glass, duct tape, a dying topper ---------------- */
.cabinet.beat { background: linear-gradient(90deg, #1a0e0b 0%, #44221c 8%, #5a2e26 50%, #44221c 92%, #1a0e0b 100%); border-color: #6e5a32;
  box-shadow: 0 0 0 2px #1e160a, 0 0 30px rgba(120,90,40,.15), 0 40px 80px rgba(0,0,0,.85), inset 0 2px 0 rgba(255,255,255,.08); }
.cabinet.beat::before { border-color: rgba(160,140,90,.18); border-style: dashed; }
.cabinet.beat::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse 18% 9% at 8% 92%, rgba(110,58,28,.75), transparent 70%), radial-gradient(ellipse 10% 14% at 95% 30%, rgba(90,46,22,.6), transparent 70%),
    radial-gradient(ellipse 14% 6% at 70% 98%, rgba(60,30,14,.8), transparent 70%), linear-gradient(0deg, rgba(20,12,6,.55), transparent 12%); }
.cabinet.beat .topper { background: radial-gradient(ellipse at 50% 120%, #2a0d0b, #0c0404 70%); border-color: #7a6634; box-shadow: inset 0 0 30px rgba(0,0,0,.9); animation: beat-flicker 5.3s steps(1) infinite; }
.cabinet.beat .topper-title { opacity: .82; }
.cabinet.beat .bulbs { filter: grayscale(.6) brightness(.7); -webkit-mask: linear-gradient(90deg, #000 0 22%, transparent 22% 31%, #000 31% 64%, transparent 64% 70%, #000 70%) top/100% 10px no-repeat, linear-gradient(90deg, #000 0 45%, transparent 45% 58%, #000 58%) bottom/100% 10px no-repeat;
  mask: linear-gradient(90deg, #000 0 22%, transparent 22% 31%, #000 31% 64%, transparent 64% 70%, #000 70%) top/100% 10px no-repeat, linear-gradient(90deg, #000 0 45%, transparent 45% 58%, #000 58%) bottom/100% 10px no-repeat; }
.cabinet.beat .reel-bezel { background: linear-gradient(145deg, #a89a74, #6e5c2e 20%, #3a2e14 50%, #7a6634 80%, #a89a74); }
.cabinet.beat .reel-bezel::before, .cabinet.beat .reel-bezel::after { content: ''; position: absolute; z-index: 3; width: 22%; height: 26px; pointer-events: none; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 6px), linear-gradient(180deg, #c4c4bc, #9a9a92 45%, #85857e); box-shadow: 0 2px 4px rgba(0,0,0,.5); opacity: .93;
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 2%, 100% 0, 96% 50%, 100% 100%, 8% 96%, 3% 100%, 0 90%, 4% 50%); }
.cabinet.beat .reel-bezel::before { top: -6px; right: -12px; transform: rotate(32deg); }
.cabinet.beat .reel-bezel::after { bottom: 4px; left: -14px; transform: rotate(-26deg); }
.cabinet.beat .glass { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='rgba(255,255,255,.55)' stroke-width='.35' stroke-linecap='round'%3E%3Cpath d='M71 22 L58 4 M71 22 L92 9 M71 22 L99 31 M71 22 L84 47 L90 66 M71 22 L62 40 L44 52 L30 75 L22 99 M71 22 L52 21 L33 13 L14 2 M44 52 L18 49 L0 56 M62 40 L76 62 L72 85 M52 21 L48 34 M84 47 L99 52'/%3E%3Cpath d='M66 18 L76 18 L77 27 L67 28 Z M60 30 Q72 34 80 26 M58 15 Q70 12 82 17' stroke-width='.25'/%3E%3C/g%3E%3Ccircle cx='71' cy='22' r='1.6' fill='rgba(255,255,255,.35)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
  linear-gradient(115deg, rgba(255,255,255,.08) 0%, transparent 30%), radial-gradient(ellipse at 20% 90%, rgba(70,50,20,.25), transparent 50%), linear-gradient(180deg, rgba(0,0,0,.6) 0%, transparent 14%, transparent 86%, rgba(0,0,0,.6) 100%); }
.cabinet.beat .deck { background: linear-gradient(180deg, #17100c, #0a0705); border-color: #3e3012; }
@keyframes beat-flicker { 0%, 100% { filter: none; } 37% { filter: brightness(.45); } 38% { filter: none; } 39% { filter: brightness(.3); } 41% { filter: none; } 82% { filter: brightness(.55); } 83% { filter: none; } }

/* ================ Mobile lock: the page never scrolls, rubber-bands, pull-to-refreshes or zooms ================ */
/* touch-action is intersected up to the nearest scroller, so only real scroll panels (paytable, achievements,
   long lists) can pan their own content; everything else (3D view, slot, buttons) gets no browser gestures. */
html, body { position: fixed; inset: 0; width: 100%; height: 100%; overscroll-behavior: none; touch-action: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
#world, #touch-joystick, #slot-overlay, #hud { touch-action: none; }
.modal-card, .side-panel, .screen { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* start screen: centred when it fits, top-aligned (never clipped) when it doesn't */
.screen { display: flex; overflow-y: auto; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
.start-card { margin: auto; }
@media (pointer: coarse) { .controls-help { display: none; } }
@media (max-height: 520px) {
  .start-card { width: min(780px, 96vw); padding: 14px 20px; gap: 8px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-items: center; }
  .start-card > * { grid-column: 2; }
  .start-card > .logo { grid-column: 1; grid-row: 1 / 6; }
  .start-card > .legal { grid-column: 1; grid-row: 6; }
  .start-card .logo h1 { font-size: 30px; }
  .start-card .field input, .start-card .field select { padding: 8px 10px; }
  .start-card .btn-big { padding: 11px 20px; }
  .controls-help { display: none; }
  .side-panel { top: 10px; max-height: calc(100% - 20px); }
  .modal-card { max-height: 94vh; padding: 12px 16px; }
  .modal-head h2 { font-size: 20px; }
}

/* buy-feature cards: compact horizontal cards on phones so all three options fit on one screen */
@media (max-width: 760px), (max-height: 520px) {
  .buy-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "art name cost" "tags tags tags" "desc desc desc" "btn btn btn";
    column-gap: 10px; row-gap: 6px; align-items: center; text-align: left; padding: 10px 12px; }
  .buy-card canvas { grid-area: art; width: 56px; height: 56px; }
  .buy-card .bc-name { grid-area: name; font-size: 17px; }
  .buy-card .bc-tags { grid-area: tags; justify-content: flex-start; }
  .buy-card .bc-tags span { font-size: 9.5px; padding: 1px 6px; }
  .buy-card .bc-desc { grid-area: desc; font-size: 11px; min-height: 0; }
  .buy-card .bc-cost { grid-area: cost; text-align: right; }
  .buy-card .bc-cost b { font-size: 19px; }
  .buy-card .btn { grid-area: btn; padding: 8px; }
  .buy-card:hover { transform: none; }
  .buy-options { gap: 10px; margin-top: 8px; }
  .buy-note { margin-top: 8px; }
}
@media (max-width: 760px) { .buy-card .bc-desc { display: none; } }
@media (max-height: 520px) and (orientation: landscape) {
  .buy-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .buy-card { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "art name" "art tags" "cost cost" "btn btn"; padding: 8px; }
  .buy-card canvas { width: 44px; height: 44px; }
  .buy-card .bc-name { font-size: 14px; }
  .buy-card .bc-tags span { font-size: 9px; padding: 1px 5px; }
  .buy-card .bc-desc { display: none; }
  .buy-card .bc-cost { text-align: center; }
  .buy-card .bc-cost b { display: inline; font-size: 16px; margin-right: 6px; }
}

/* ---- slot view on phones/tablets: everything fits the screen, nothing scrolls (slotGame.fitToScreen trims the reels) ---- */
.slot-side .long { display: inline; }
@media (max-width: 980px) and (orientation: portrait) {
  .slot-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100vw; height: 100%; overflow: hidden;
    padding: calc(48px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)); }
  .slot-stage > .cabinet { margin: auto 0 0; flex: none; }
  .slot-stage > .slot-side { margin: 0 0 auto; }
  .cabinet, .cabinet.fs-mode { --cab-w: min(calc(92vw - 56px), 560px); container-type: inline-size; }
  .cabinet { width: max(calc(var(--cab-w) + 56px), min(calc(100vw - 16px), 340px)); }
  .topper { padding-top: 14px; padding-bottom: 11px; }
  .bulbs { inset: 2px; background-size: 12px 12px; animation-name: chase-sm;
    background-image: radial-gradient(circle, #fff7c8 0 1.6px, rgba(255,214,90,.6) 2.4px, transparent 3.4px);
    -webkit-mask-size: 100% 7px; mask-size: 100% 7px; }
  .topper-title { white-space: nowrap; font-size: min(30px, 6.8cqw); }
  .topper-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: min(11px, 3.2cqw); letter-spacing: .14em; }
  .message-bar { display: block; font-size: 13px; line-height: 1.3; height: 2.6em; min-height: 0; margin: 6px auto; overflow: hidden; }
  .fs-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "count win" "heat sticky"; gap: 3px 10px; padding: 5px 10px; }
  .fs-bar .fs-count { grid-area: count; } .fs-bar .fs-win { grid-area: win; text-align: right; }
  .fs-bar .heat { grid-area: heat; gap: 6px; grid-template-columns: minmax(0, 1fr) auto; }
  .fs-bar:has(.fs-sticky.hidden) .heat { grid-column: 1 / -1; }
  .fs-bar .heat .label { display: none; }
  .fs-bar .label { white-space: nowrap; }
  .fs-bar b { font-size: 17px; }
  #heat-mult { font-size: 18px !important; }
  .fs-sticky { grid-area: sticky; flex-direction: row; justify-content: flex-end; gap: 6px; }
  .fs-sticky .locks b { font-size: 12px !important; }
  .slot-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: min(100%, 560px); flex: none; }
  .slot-side .btn { padding: 9px 6px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .slot-side .long { display: none; }
  #btn-leave { order: 1; } #btn-music { order: 2; } #btn-slot-ach { order: 3; }
  .slot-side .side-box { padding: 6px 8px; min-width: 0; }
  .slot-side .ss-session { order: 4; grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .ss-session .side-title { display: none; }
  .ss-session .kv { gap: 5px; font-size: 11px; padding: 0; white-space: nowrap; }
  .slot-side .ss-spec { order: 5; display: flex; align-items: center; gap: 6px; overflow: hidden; }
  .ss-spec .side-title { margin: 0; font-size: 12px; }
  .ss-spec #spectator-list { font-size: 11px; display: flex; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .slot-side .ss-music { display: contents; }
  .ss-music .side-title, .ss-music .slider { display: none; }
  .slot-side .rtp-note { order: 6; grid-column: 1 / -1; font-size: 10px; }
}
@media (orientation: landscape) and (max-width: 980px), (orientation: landscape) and (max-height: 520px) {
  .slot-stage { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100vw; height: 100%; overflow: hidden;
    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .slot-stage > .cabinet { margin: 0 0 0 auto; flex: none; }
  .slot-stage > .slot-side { margin: 0 auto 0 0; }
  #mobster-wrap { position: fixed; left: -24px; bottom: 0; height: 72vh; opacity: .55; pointer-events: none; z-index: -1; }
  .mob-plate { display: none; }
  .cabinet, .cabinet.fs-mode { --cab-w: min(calc(100vh - 34px), calc(100vw - 400px), 560px); width: auto; margin: 0; padding: 8px 10px; border-radius: 18px;
    display: grid; grid-template-columns: var(--cab-w) 220px; grid-template-rows: auto auto minmax(0, 1fr) auto auto; column-gap: 12px;
    grid-template-areas: "reels top" "reels fs" "reels msg" "reels deck" "reels replay"; }
  @supports (height: 100dvh) { .cabinet, .cabinet.fs-mode { --cab-w: min(calc(100dvh - 34px), calc(100vw - 400px), 560px); } }
  .cabinet::before { border-radius: 14px; }
  .topper { grid-area: top; margin: 0 0 5px; padding: 10px 6px 8px; border-radius: 60px 60px 10px 10px; }
  .bulbs { inset: 2px; border-radius: 58px 58px 8px 8px; background-size: 12px 12px; animation-name: chase-sm;
    background-image: radial-gradient(circle, #fff7c8 0 1.6px, rgba(255,214,90,.6) 2.4px, transparent 3.4px);
    -webkit-mask-size: 100% 7px; mask-size: 100% 7px; }
  .topper-title { font-size: 14px; line-height: 1.15; white-space: nowrap; }
  .topper-sub { font-size: 8px; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fs-bar { grid-area: fs; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "count win" "heat sticky"; gap: 2px 8px; padding: 4px 8px; margin-bottom: 5px; }
  .fs-bar .fs-count { grid-area: count; } .fs-bar .fs-win { grid-area: win; text-align: right; }
  .fs-bar .heat { grid-area: heat; gap: 5px; grid-template-columns: minmax(0, 1fr) auto; }
  .fs-bar:has(.fs-sticky.hidden) .heat { grid-column: 1 / -1; }
  .fs-bar .heat .label { display: none; }
  .fs-sticky { grid-area: sticky; flex-direction: row; justify-content: flex-end; gap: 5px; }
  .fs-sticky .locks b { font-size: 11px !important; padding: 0 5px; }
  .fs-bar .label { font-size: 8px; }
  .fs-bar b { font-size: 14px; }
  #heat-mult { font-size: 16px !important; }
  .reel-bezel { grid-area: reels; margin: 0; align-self: center; }
  .message-bar { grid-area: msg; align-self: center; display: block; font-size: 12px; line-height: 1.3; min-height: 0; margin: 3px 0; max-height: 2.6em; overflow: hidden; }
  .deck { grid-area: deck; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; }
  .deck .meter.bet { grid-column: 1 / -1; order: 1; }
  .deck .deck-buttons { order: 2; }
  .meter { padding: 2px 6px; }
  .meter .label { font-size: 8px; }
  .meter b { font-size: 13px; }
  .mini { width: 24px; height: 24px; font-size: 14px; }
  .deck-buttons { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 30px 30px; gap: 5px 6px; margin-top: 2px; }
  #btn-buy { grid-column: 1; grid-row: 1; } #btn-auto { grid-column: 1; grid-row: 2; }
  #btn-spin { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  #btn-turbo { grid-column: 3; grid-row: 1; } #btn-info { grid-column: 3; grid-row: 2; }
  .deck-btn { min-width: 0; height: 30px; padding: 0 4px; font-size: 9px; letter-spacing: .04em; }
  .spin-btn { width: 60px; height: 60px; font-size: 12px; border-width: 3px; }
  .replay-controls { grid-area: replay; padding: 6px; }
  .slot-side { flex: none; display: flex; flex-direction: column; gap: 6px; width: 112px; align-self: center; }
  #btn-leave { order: 1; } #btn-music { order: 2; } #btn-slot-ach { order: 3; }
  .slot-side .ss-session { order: 4; } .slot-side .ss-spec { order: 5; } .slot-side .rtp-note { order: 6; }
  .slot-side .btn { padding: 8px 6px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .slot-side .long { display: none; }
  .slot-side .side-box { padding: 5px 8px; }
  .ss-session .side-title { display: none; }
  .ss-session .kv { font-size: 11px; padding: 1px 0; }
  .ss-spec .side-title { font-size: 11px; margin-bottom: 2px; }
  .ss-spec #spectator-list { font-size: 11px; max-height: 3em; overflow: hidden; }
  .slot-side .ss-music { display: contents; }
  .ss-music .side-title, .ss-music .slider { display: none; }
  .slot-side .rtp-note { font-size: 9px; }
}

/* ================ slot overlay v3: machine themes, Get Bonus, skip bonus, voices, music genre, info tab, MAX WIN ================ */
/* Machine colour themes. slotGame.applyTheme() puts one th-* class on #slot-overlay (variant, subway "beat" or
   Supreme lounge); the reel window (REEL_THEMES in reels.js), deck, side panels, free-spins bar and modals follow it. */
#slot-overlay {
  --th-a: #1b0f0b; --th-b: #0b0705; --th-line: #5c4513; --th-meter: #060403; --th-meter-line: #3a2a08;
  --th-panel: rgba(14,10,8,.82); --th-panel-line: rgba(212,175,55,.35); --th-btn-a: #2a1e16; --th-btn-b: #140d09;
  --th-fs-a: #2b0a0a; --th-fs-b: #120404; --th-modal-a: #1a110c; --th-modal-b: #0d0806; --th-card: #160e0a;
  --th-reel: #0b0505; --th-accent: #f6e27a; --th-stripe: none;
}
#slot-overlay.th-5x5 { --th-a: #0b1730; --th-b: #040914; --th-line: #3b5c8f; --th-meter: #02060f; --th-meter-line: #1c3258;
  --th-panel: rgba(5,12,30,.84); --th-panel-line: rgba(160,205,255,.32); --th-btn-a: #13274a; --th-btn-b: #08122a;
  --th-fs-a: #0d2148; --th-fs-b: #040b1c; --th-modal-a: #0c1a36; --th-modal-b: #050a18; --th-card: #081226; --th-reel: #02050d; --th-accent: #bfe3ff; }
#slot-overlay.th-3x3 { --th-a: #0c2214; --th-b: #040d07; --th-line: #2e6b3f; --th-meter: #020904; --th-meter-line: #174024;
  --th-panel: rgba(4,20,10,.84); --th-panel-line: rgba(110,224,150,.32); --th-btn-a: #123a20; --th-btn-b: #06180c;
  --th-fs-a: #0c2e18; --th-fs-b: #03120a; --th-modal-a: #0d2617; --th-modal-b: #040f08; --th-card: #071a0e; --th-reel: #020a05; --th-accent: #b6ffcb; }
#slot-overlay.th-6x6, #slot-overlay.th-supreme { --th-a: #200b33; --th-b: #0c0415; --th-line: #8a6a2a; --th-meter: #07020c; --th-meter-line: #3e1a5c;
  --th-panel: rgba(22,7,36,.84); --th-panel-line: rgba(242,207,99,.4); --th-btn-a: #34124f; --th-btn-b: #160626;
  --th-fs-a: #2e0d48; --th-fs-b: #10041c; --th-modal-a: #220b37; --th-modal-b: #0d0417; --th-card: #170828; --th-reel: #06020b; --th-accent: #f2cf63; }
#slot-overlay.th-2x2 { --th-a: #2b180c; --th-b: #120904; --th-line: #7a5a34; --th-meter: #0a0503; --th-meter-line: #4a3018;
  --th-panel: rgba(32,17,8,.86); --th-panel-line: rgba(232,220,192,.32); --th-btn-a: #3e2412; --th-btn-b: #1b0d05;
  --th-fs-a: #3a1d0c; --th-fs-b: #160a04; --th-modal-a: #2a170b; --th-modal-b: #110803; --th-card: #1f1108; --th-reel: #0a0603; --th-accent: #fff0d0;
  --th-stripe: linear-gradient(90deg, #1f8a4c 0 33%, #f4ecdc 33% 67%, #ce2b37 67%); }
#slot-overlay.th-beat { --th-a: #1d120e; --th-b: #0a0605; --th-line: #4a3a1c; --th-meter: #070403; --th-meter-line: #33260f;
  --th-panel: rgba(26,15,12,.88); --th-panel-line: rgba(150,130,80,.28); --th-btn-a: #2e1c16; --th-btn-b: #140b08;
  --th-fs-a: #2c1612; --th-fs-b: #100806; --th-modal-a: #23140f; --th-modal-b: #0d0705; --th-card: #1a0f0b; --th-reel: #090605; --th-accent: #d8c79a; }
/* backdrops for the cabinets that don't follow their grid size */
#slot-overlay.th-beat { background:
  radial-gradient(ellipse at 50% 0%, rgba(110,52,38,.38), transparent 55%),
  radial-gradient(ellipse at 18% 100%, rgba(74,60,28,.35), transparent 50%),
  radial-gradient(ellipse at 50% 100%, rgba(8,5,4,.95), rgba(34,20,15,.78)); }
#slot-overlay.th-supreme { background:
  repeating-conic-gradient(from 0deg at 50% -10%, rgba(242,207,99,.07) 0deg 3deg, transparent 3deg 12deg),
  radial-gradient(ellipse at 50% 0%, rgba(242,207,99,.42), transparent 45%),
  radial-gradient(ellipse at 50% 100%, rgba(18,4,30,.95), rgba(74,20,120,.78)); }
#slot-overlay #reels { background: var(--th-reel); }
#slot-overlay .deck { background: var(--th-stripe) top / 100% 2px no-repeat, linear-gradient(180deg, var(--th-a), var(--th-b)); border-color: var(--th-line); }
#slot-overlay .meter { background: var(--th-meter); border-color: var(--th-meter-line); }
#slot-overlay .slot-side .panel { background: var(--th-stripe) top / 100% 2px no-repeat, var(--th-panel); border-color: var(--th-panel-line); }
#slot-overlay .slot-side .btn-dark { background: linear-gradient(180deg, var(--th-btn-a), var(--th-btn-b)); border-color: var(--th-panel-line); }
#slot-overlay .fs-bar { background: linear-gradient(180deg, var(--th-fs-a), var(--th-fs-b)); }
#slot-overlay .heat-meter { background: var(--th-meter); }
#slot-overlay .modal-card { background: var(--th-stripe) top / 100% 3px no-repeat, linear-gradient(180deg, var(--th-modal-a), var(--th-modal-b)); }
#slot-overlay .modal-card .btn-dark { background: linear-gradient(180deg, var(--th-btn-a), var(--th-btn-b)); }
#slot-overlay .fs-intro-card { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--fc) 30%, var(--th-fs-a)), var(--th-fs-b) 72%); }
#slot-overlay .pay-item, #slot-overlay .vol-row, #slot-overlay .way-card { background: var(--th-card); }
#slot-overlay .buy-card { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--fc) 30%, var(--th-modal-a)), var(--th-modal-b) 72%); }

/* ---- Get Bonus (ante) toggle + bet badge ---- */
.meter.bet { position: relative; }
.bet-ante { position: absolute; top: 3px; right: 5px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .04em; line-height: 15px;
  color: #241703; background: linear-gradient(180deg, #fff1a8, #d4af37); box-shadow: 0 0 10px rgba(255,214,90,.65); animation: antePulse 1.8s ease-in-out infinite; }
@keyframes antePulse { 50% { box-shadow: 0 0 2px rgba(255,214,90,.3); } }
.deck-btn.ante { background: linear-gradient(180deg, #4a2f0a, #1e1204); border-color: #d4af37; color: #ffe9a8; }
.deck-btn.ante small { display: block; margin-top: 2px; font-size: 9px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; opacity: .8; }
.deck-btn.ante.on { background: linear-gradient(180deg, #fff1a8, #e2b84a 50%, #8a6a16); border-color: #fff3b0; color: #241703;
  box-shadow: 0 0 16px rgba(255,214,90,.7), inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 #3a2a08; }
.deck-btn.ante.on small { opacity: 1; }
/* ---- skip bonus ---- */
.deck-btn.skip { background: linear-gradient(180deg, #ffb35c, #c2601c 55%, #5a2408); border-color: #ffe0b0; color: #fffaf0; text-shadow: 0 1px 0 rgba(0,0,0,.45);
  animation: skipGlow 1.4s ease-in-out infinite; }
@keyframes skipGlow { 50% { box-shadow: 0 0 18px rgba(255,160,60,.75), inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #2a1004; } }
.skip-modal { z-index: 75; }
.skip-card { width: min(430px, 92vw); text-align: center; }
.skip-card h2 { margin: 0 0 4px; font-size: 28px; }
.skip-card p { margin: 8px 0 16px; color: #efe2c2; font-family: var(--serif); font-size: 16px; line-height: 1.45; }
.skip-card .row-gap { flex-wrap: wrap; }
.skip-card .btn { min-width: 140px; }
/* ---- free spins: HEAT gives the spin back ---- */
.fs-count b { display: inline-block; }
.fs-refund { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; vertical-align: 3px;
  color: #241703; background: linear-gradient(180deg, #fff1a8, #ff9f43); box-shadow: 0 0 12px rgba(255,160,60,.85); }
.fs-refund.pop { animation: refundPop 2.2s ease-out forwards; }
@keyframes refundPop { 0% { transform: scale(.3) translateY(6px); opacity: 0; } 12% { transform: scale(1.35); opacity: 1; } 24% { transform: scale(1); } 82% { opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
#fs-count.bump { animation: pulse .6s ease-out; color: #fff1a8; }
/* ---- buy modal: change the bet without closing it ---- */
.buy-bet { display: flex; align-items: center; justify-content: center; gap: 10px; width: max-content; max-width: 100%; margin: 6px auto 0; padding: 5px 12px; border-radius: 999px;
  background: var(--th-meter, #060403); border: 1px solid var(--th-meter-line, #3a2a08); box-shadow: inset 0 0 10px rgba(0,0,0,.9); }
.buy-bet .label { font-size: 10px; letter-spacing: .15em; color: #9c8a63; }
.buy-bet b { min-width: 86px; text-align: center; font-family: 'Consolas', 'Courier New', monospace; font-size: 19px; color: #ffdf6b; text-shadow: 0 0 8px rgba(255,200,60,.6); }
.buy-bet .mini { width: 30px; height: 30px; font-size: 18px; }

/* ---- side bar: music genre, deafen, nearby voices ---- */
.ss-music { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "t t" "s s" "m d" "g g"; column-gap: 8px; }
.ss-music > :where(.side-title) { grid-area: t; } .ss-music > :where(.slider) { grid-area: s; }
.ss-music > :where(#btn-music) { grid-area: m; } .ss-music > :where(#btn-deafen) { grid-area: d; } .ss-music > :where(.genre) { grid-area: g; }
.ss-music .btn.small { padding: 7px 6px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-music .genre { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 13px; }
#slot-music-genre { width: 100%; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--th-panel-line, var(--line)); background: var(--th-meter, #0b0806); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
#slot-music-genre:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 1px; }
#slot-music-genre option { background: #140d09; color: var(--text); }
#btn-deafen.on { background: linear-gradient(180deg, #8a1c1c, #3d0a0a); border-color: #ff8a7a; color: #fff; box-shadow: 0 0 12px rgba(255,80,60,.35); }
.talker-list { display: flex; flex-direction: column; gap: 3px; max-height: 168px; overflow-y: auto; }
.talker { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 2px 2px 2px 5px; border-radius: 8px; font-size: 12.5px; transition: background .2s, box-shadow .2s; }
.talker .dot { width: 9px; height: 9px; }
.talker .t-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.talker .t-mic { font-size: 12px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.talker.speaking { background: rgba(110,255,150,.08); box-shadow: inset 0 0 0 1px rgba(110,255,150,.35); }
.talker.speaking .t-mic { opacity: 1; transform: none; animation: micPulse .9s ease-in-out infinite; }
.talker.speaking .dot { box-shadow: 0 0 0 2px rgba(110,255,150,.55), 0 0 8px currentColor; }
.talker.muted .t-name { opacity: .5; text-decoration: line-through; }
.talker.muted .t-mic { filter: grayscale(1); opacity: .35; animation: none; }
.talker .t-mute { width: 28px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid var(--th-panel-line, var(--line)); background: rgba(0,0,0,.35); color: var(--text); font-size: 12px; line-height: 1; }
.talker .t-mute:hover { filter: brightness(1.3); }
.talker.muted .t-mute { background: rgba(150,28,28,.5); border-color: #ff8a7a; }
@keyframes micPulse { 50% { transform: scale(1.18); } }

/* ---- INFO tab: volatility meters ---- */
.vol-table { display: grid; gap: 8px; }
.vol-row { --bolt: color-mix(in srgb, #ff4a3d calc((var(--vs, 1) - 1) * 25%), #ffd84a); display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(64px, .6fr); grid-template-areas: "name meter label" "stats stats stats";
  align-items: center; gap: 4px 14px; padding: 8px 12px; border-radius: 10px; background: #160e0a; border: 1px solid rgba(212,175,55,.2); }
.vol-name { grid-area: name; display: flex; flex-direction: column; min-width: 0; }
.vol-name b { color: #f3e9d2; font-size: 14px; }
.vol-name small { color: #9c8a63; font-size: 11px; letter-spacing: .08em; }
.vol-meter { grid-area: meter; display: flex; gap: 3px; }
.vol-meter .bolt { width: 14px; height: 21px; fill: rgba(255,255,255,.07); stroke: rgba(212,175,55,.3); stroke-width: .8; }
.vol-meter .bolt.on { fill: var(--bolt); stroke: rgba(255,250,220,.6); filter: drop-shadow(0 0 4px var(--bolt)); }
.vol-label { grid-area: label; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--bolt); text-align: right; }
.vol-stats { grid-area: stats; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.vol-stats span { padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.4); border: 1px solid rgba(212,175,55,.2); color: #dccda8; font-family: 'Consolas', monospace; font-size: 11px; }
.vol-note { margin: 6px 0 0; }
/* ---- INFO tab: ways-to-win diagrams ---- */
.ways { display: grid; gap: 10px; }
.ways-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ways-rules { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: wr; }
.info-body .ways-rules li { counter-increment: wr; padding: 3px 10px 3px 4px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(212,175,55,.25); font-size: 12.5px; line-height: 1.4; }
.ways-rules li::before { content: counter(wr); display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: var(--gold); color: #1a1205; font-weight: 900; font-size: 11px; vertical-align: 1px; }
.ways-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.way-card { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 10px; border-radius: 12px; background: #160e0a; border: 1px solid rgba(212,175,55,.2); text-align: center; }
.way-card svg { display: block; width: 100%; max-width: 200px; height: auto; }
.way-card figcaption b { display: block; color: var(--gold-2); font-family: var(--serif); font-size: 15px; letter-spacing: .04em; }
.way-card figcaption span { display: block; margin-top: 2px; color: #cdbf9e; font-size: 11.5px; line-height: 1.35; }
.way-card.hero { border-color: rgba(246,226,122,.45); box-shadow: inset 0 0 24px rgba(246,226,122,.08); }
.way-card.hero figcaption b { font-size: 20px; }
@media (min-width: 560px) { .way-card.hero { grid-column: span 2; } .way-card.hero svg { max-width: 240px; } }
.w-bg { fill: var(--th-reel, #0b0705); stroke: rgba(212,175,55,.5); stroke-width: 1.2; }
.w-cell { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.07); }
.w-link { stroke: rgba(246,226,122,.2); stroke-width: .7; }
.w-node { fill: rgba(246,226,122,.65); }
.w-path { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.w-path.dash { stroke-dasharray: 4 3; }
.w-hit { fill: rgba(255,215,107,.16); stroke: #ffd76b; stroke-width: 1.4; }
.w-hit.wild { fill: rgba(255,120,90,.2); stroke: #ff8f6b; }
.w-hit.scatter { fill: rgba(255,215,107,.24); stroke: #fff0a8; stroke-dasharray: 3 2; }
.w-hit.dead { fill: rgba(255,82,82,.1); stroke: rgba(255,82,82,.55); }
.w-x path { fill: none; stroke: #ff5252; stroke-width: 2.6; stroke-linecap: round; }
@media (max-width: 420px) {
  .vol-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name meter" "label label" "stats stats"; gap: 3px 10px; padding: 7px 9px; }
  .vol-label { text-align: left; }
  .ways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .way-card { padding: 8px 6px; }
  .way-card.hero { grid-column: 1 / -1; }
  .way-card figcaption span { font-size: 10.5px; }
}

/* ---- MAX WIN ---- */
.bigwin-rays { position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: repeating-conic-gradient(from 0deg, rgba(255,215,107,.26) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 25%, transparent 55%); mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 25%, transparent 55%); }
.bigwin.max { background: radial-gradient(circle, rgba(130,80,0,.62), rgba(0,0,0,.88)); }
.bigwin.max .bigwin-rays { opacity: 1; animation: raysSpin 16s linear infinite; }
.bigwin.max .bigwin-title { font-size: clamp(40px, 10vw, 140px); max-width: 96vw; letter-spacing: .05em;
  background: linear-gradient(180deg, #ffffff 0%, #fff3b0 22%, #ffd24a 48%, #b8861f 70%, #fff3b0 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 6px 0 #3a2a08) drop-shadow(0 0 36px rgba(255,214,90,.95)) drop-shadow(0 0 90px rgba(255,150,30,.6));
  animation: bigIn .8s cubic-bezier(.2,1.6,.4,1), maxPulse 1.1s ease-in-out .8s infinite; }
.bigwin.max .bigwin-amount { font-size: clamp(42px, 7.5vw, 96px); }
.bigwin-sub { position: relative; max-width: 94vw; margin-top: 8px; padding: 6px 18px; border-radius: 999px; text-align: center; font-family: var(--serif); font-weight: 900; font-size: clamp(14px, 2.4vw, 26px); letter-spacing: .14em;
  color: #fff6d0; background: rgba(0,0,0,.45); border: 2px solid rgba(255,214,90,.75); box-shadow: 0 0 24px rgba(255,190,60,.5); text-shadow: 0 0 12px #ff9f1a, 0 2px 0 #3a2a08; }
@keyframes raysSpin { to { transform: rotate(360deg); } }
@keyframes maxPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08) rotate(-1deg); } }
#slot-overlay.maxwin .slot-stage { animation: maxShake .45s linear infinite; }
#slot-overlay.maxwin::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 140px rgba(255,200,60,.6); animation: maxFlash .65s ease-in-out infinite alternate; }
.cabinet.maxwin-glow { box-shadow: 0 0 0 2px #3a2a08, 0 0 50px rgba(255,214,90,.75), 0 0 130px rgba(255,170,40,.45), 0 40px 80px rgba(0,0,0,.8); animation: maxGlow 1.2s ease-in-out infinite alternate; }
@keyframes maxShake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-4px, 2px) rotate(-.25deg); } 40% { transform: translate(4px, -2px) rotate(.25deg); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(3px, 2px) rotate(.2deg); } }
@keyframes maxFlash { from { opacity: .35; } to { opacity: 1; } }
@keyframes maxGlow { from { filter: brightness(1); } to { filter: brightness(1.18) saturate(1.2); } }
@media (prefers-reduced-motion: reduce) {
  #slot-overlay.maxwin .slot-stage, .bigwin.max .bigwin-rays, .cabinet.maxwin-glow, .deck-btn.skip, .bet-ante { animation: none; }
}

/* ---- phones: the new controls in the compact layouts ---- */
.ss-music .genre-label { display: inline; }
@media (max-width: 980px) and (orientation: portrait) {
  .slot-side .ss-music > * { grid-area: auto; }
  .slot-side .ss-music .genre { order: 6; grid-column: span 2; display: flex; margin: 0; }
  .ss-music .genre-label { display: none; }
  #slot-music-genre { height: 100%; min-height: 34px; padding: 4px 6px; }
  .slot-side #btn-deafen { order: 7; margin: 0; }
  .slot-side .ss-talk { order: 8; grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
  .ss-talk .side-title { margin: 0; font-size: 12px; }
  .ss-talk .talker-list { flex-direction: row; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; max-height: none; scrollbar-width: none; }
  .ss-talk .talker { flex: none; max-width: 160px; }
  .slot-side .rtp-note { order: 9; }
  .deck-buttons.has-ante { gap: 5px; }
  .deck-buttons.has-ante .deck-btn { padding: 0 5px; letter-spacing: .03em; }
  .deck-btn.ante small { font-size: 8px; }
}
@media (max-width: 400px) and (orientation: portrait) {
  .deck-buttons.has-ante .deck-btn { font-size: 9px; }
  .deck-buttons.has-ante .spin-btn { width: 58px; height: 58px; }
}
@media (orientation: landscape) and (max-width: 980px), (orientation: landscape) and (max-height: 520px) {
  .slot-side .ss-music > * { grid-area: auto; }
  #btn-leave { order: 1; } #btn-music { order: 2; } #btn-deafen { order: 3; } .slot-side .ss-music .genre { order: 4; } #btn-slot-ach { order: 5; }
  .slot-side .ss-session { order: 6; } .slot-side .ss-spec { order: 7; } .slot-side .ss-talk { order: 8; } .slot-side .rtp-note { order: 9; }
  .slot-side .ss-music .genre { margin: 0; }
  .ss-music .genre-label { display: none; }
  #slot-music-genre { padding: 4px; font-size: 11px; }
  /* the side column scrolls instead of pushing the cabinet off a short screen; Music + an icon-only Deafen share a row */
  .slot-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .slot-side > *, .slot-side .ss-music > * { grid-column: 1 / -1; }
  .slot-side #btn-music { grid-column: 1; }
  .slot-side #btn-deafen { grid-column: 2; order: 2; width: 34px; margin: 0; padding: 8px 0; text-align: center; }
  #btn-deafen .dl, #btn-music .ml { display: none; }
  .ss-talk .side-title { display: none; }
  .ss-talk .talker-list { max-height: 4.6em; }
  .ss-talk .talker { gap: 4px; padding: 1px 1px 1px 3px; font-size: 11px; }
  .ss-talk .talker .t-mute { width: 22px; height: 18px; font-size: 10px; }
  .deck-buttons.has-ante { grid-template-rows: 30px 30px 22px; }
  #btn-skip { grid-column: 1; grid-row: 1; }
  #btn-ante { grid-column: 1 / -1; grid-row: 3; height: 22px; }
  #btn-ante br { display: none; }
  #btn-ante small { display: inline; margin: 0 0 0 6px; font-size: 9px; }
  .bet-ante { top: 1px; right: 3px; font-size: 8px; line-height: 12px; padding: 0 4px; }
  .fs-refund { font-size: 8px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }
  .buy-bet { margin-top: 2px; padding: 3px 10px; }
  .buy-bet b { font-size: 15px; min-width: 70px; }
  .buy-bet .mini { width: 26px; height: 26px; }
}
@media (max-width: 760px) {
  .skip-card p { font-size: 15px; }
  .fs-refund { font-size: 9px; padding: 0 5px; }
}
@media (max-width: 480px) {
  .bigwin-sub { font-size: 11px; letter-spacing: .06em; padding: 5px 12px; }
}
/* ---------------- avatar agent: tailor skin tone + shades rows ---------------- */
.wr-skin .swatch { box-shadow: inset 0 -4px 7px rgba(0,0,0,.3), 0 0 0 1px rgba(255,236,200,.22); }
.wr-skin .swatch.active { box-shadow: inset 0 -4px 7px rgba(0,0,0,.3), 0 0 10px rgba(212,175,55,.45); }
.wr-toggle button { min-width: 58px; }