/* Twelve Worlds: a lobby of themed cabinets. Each theme is a set of tokens on [data-theme]; the same tokens style the lobby card and the game. */
:root{--body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
[data-theme]{--tt:uppercase;--ls:.06em;--h1w:700;--h1s:32px}
[data-theme="lobby"]{--bg:radial-gradient(ellipse 90% 60% at 15% 0%,#3a1e5e 0%,transparent 60%),radial-gradient(ellipse 80% 60% at 90% 10%,#0e4a5a 0%,transparent 60%);--night:#0a0816;--ink:#f3eefc;--muted:#ab9fc7;--line:#2e2650;--btn:#1a1430;--a1:#ffc35a;--a2:#ff5f8f;--gold:#ffd166;--title:"Chakra Petch",sans-serif;--display:"Chakra Petch",sans-serif;--onacc:#1a0a10}
[data-theme="stars"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#1a2160 0%,transparent 60%);--night:#070b1f;--line:#2a3670;--ink:#e8ecff;--muted:#9aa6d6;--a1:#5ee7ff;--a2:#ff5fc8;--gold:#ffd166;--win:#7dffb0;--btn:#121a44;--well:#0a0f2a;--frame:#3a4890;--details:#0d1434;--cellmap:#1c2558;--onacc:#0a0618;
  --machine:linear-gradient(180deg,#1a2358,#0b1030 60%,#0a0e2a);--screen:radial-gradient(ellipse 60% 70% at 20% 30%,#3b1d6e66,transparent 70%),radial-gradient(ellipse 55% 60% at 85% 75%,#0d5a7a55,transparent 70%),#050818;
  --title:"Chakra Petch","Arial Narrow",sans-serif;--display:"Chakra Petch","Arial Narrow",sans-serif}
[data-theme="valley"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#3a2a12 0%,transparent 62%);--night:#0d0a07;--line:#4a3a20;--ink:#f6ead0;--muted:#c3ad85;--a1:#3fd0c9;--a2:#e8b84a;--gold:#ffd77a;--win:#9cf0d8;--btn:#21190f;--well:#120e09;--frame:#8a6a2a;--details:#17120b;--cellmap:#2e2414;--onacc:#1a1206;
  --machine:linear-gradient(180deg,#2a2114,#15100a 60%,#110d08);--screen:radial-gradient(ellipse 70% 60% at 50% 40%,#2b4fa840,transparent 70%),repeating-linear-gradient(90deg,#ffffff05 0 2px,transparent 2px 20%),linear-gradient(180deg,#141b3a,#0b0f22);
  --title:"Cinzel",Georgia,serif;--display:"Cinzel",Georgia,serif;--ls:.08em}
[data-theme="sphinx"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#5a2a4a 0%,transparent 62%);--night:#1a0f22;--line:#5a3450;--ink:#fff1dc;--muted:#d6b39a;--a1:#ffb04a;--a2:#ff6f91;--gold:#ffd27a;--win:#a8ffcf;--btn:#2a1828;--well:#160c18;--frame:#b0703a;--details:#1f1222;--cellmap:#3a2238;--onacc:#2a0a10;
  --machine:linear-gradient(180deg,#3a2238,#1d1120 60%,#170d1a);--screen:linear-gradient(180deg,#2a1747 0%,#5a2a5e 45%,#9a4a46 80%,#7a5028 100%);
  --title:"Marcellus SC",Georgia,serif;--display:"Cinzel",Georgia,serif;--tt:none;--h1w:400;--ls:.03em;--h1s:34px}
[data-theme="rapanui"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#0f4a56 0%,transparent 62%);--night:#06161c;--line:#24434a;--ink:#e6fbf7;--muted:#93bfb8;--a1:#2fd3c0;--a2:#ff7a59;--gold:#ffc857;--win:#b4ff8a;--btn:#12262b;--well:#091519;--frame:#5b7d7a;--details:#0b1c20;--cellmap:#16323a;--onacc:#06161c;
  --machine:linear-gradient(180deg,#1d3036,#0f1b1f 60%,#0c1619);--screen:radial-gradient(ellipse 80% 40% at 50% 100%,#ff7a5940,transparent 70%),linear-gradient(180deg,#0a1f36 0%,#0e4a5a 60%,#0a3340 100%);
  --title:"Teko","Arial Narrow",sans-serif;--display:"Teko","Arial Narrow",sans-serif;--h1s:44px;--ls:.05em;--h1w:600}
[data-theme="aloha"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#7a2a5a 0%,transparent 62%);--night:#1a0c2a;--line:#5a2a66;--ink:#fff4ec;--muted:#e0b2c8;--a1:#19d3c5;--a2:#ff5f8f;--gold:#ffc35a;--win:#a8ffdf;--btn:#2a1238;--well:#170a22;--frame:#ff8fb1;--details:#200e30;--cellmap:#3a1a4a;--onacc:#1a0a20;
  --machine:linear-gradient(180deg,#3a1844,#1d0e2a 60%,#170a22);--screen:linear-gradient(180deg,#24154f 0%,#6b2a6a 55%,#a24a52 80%,#173f5e 100%);
  --title:"Pacifico",cursive;--display:"Figtree",sans-serif;--tt:none;--ls:0;--h1w:400;--h1s:34px}
[data-theme="nostradamus"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#2e1a52 0%,transparent 62%);--night:#0c0716;--line:#3e2e5a;--ink:#f3e8cf;--muted:#b8a6cf;--a1:#b48cff;--a2:#ffb347;--gold:#ffd98a;--win:#9dffc9;--btn:#1e1530;--well:#100a1a;--frame:#9b7a3a;--details:#140d22;--cellmap:#2a1f40;--onacc:#140a20;
  --machine:linear-gradient(180deg,#2a1d3e,#150e22 60%,#110b1c);--screen:radial-gradient(ellipse 60% 60% at 50% 40%,#4a2a8a55,transparent 70%),#0d0818;
  --title:"IM Fell English SC",Georgia,serif;--display:"Cinzel",Georgia,serif;--tt:none;--h1w:400;--ls:.02em;--h1s:36px}

[data-theme="chicago"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#173a30 0%,transparent 62%);--night:#08090b;--line:#3a3426;--ink:#f5ecd6;--muted:#b8ab8a;--a1:#e8b84a;--a2:#3fbf8a;--gold:#ffd98a;--win:#8affc4;--btn:#17150f;--well:#0c0b08;--frame:#b08a3a;--details:#12110c;--cellmap:#2a2618;--onacc:#120e04;
  --machine:linear-gradient(180deg,#24201a,#100e0a 60%,#0c0a08);--screen:repeating-linear-gradient(90deg,#ffffff06 0 1px,transparent 1px 12px),radial-gradient(ellipse 80% 50% at 50% 100%,#e0b04a30,transparent 70%),linear-gradient(180deg,#0a1626 0%,#16182a 55%,#22160e 100%);
  --title:"Limelight",Georgia,serif;--display:"Teko","Arial Narrow",sans-serif;--h1s:36px;--ls:.05em;--h1w:400}
[data-theme="super777"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#6a0a1a 0%,transparent 62%);--night:#0e0408;--line:#4a1424;--ink:#fff1f1;--muted:#e0a8b4;--a1:#ffd23a;--a2:#ff2e4a;--gold:#ffd23a;--win:#8affb0;--btn:#2a0a14;--well:#12040a;--frame:#d4a02a;--details:#1a060c;--cellmap:#3a1020;--onacc:#2a0008;
  --machine:linear-gradient(180deg,#3a0c18,#18040b 60%,#12030a);--screen:radial-gradient(ellipse 80% 70% at 50% 50%,#5a0a1e,#1a0408);
  --title:"Bungee",sans-serif;--display:"Bungee",sans-serif;--h1s:32px;--ls:.03em;--h1w:400}
[data-theme="lion"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#7a3a10 0%,transparent 62%);--night:#140a06;--line:#5a3418;--ink:#fff1dc;--muted:#e0b88a;--a1:#ffb02e;--a2:#ff5a2a;--gold:#ffd27a;--win:#c8ff8a;--btn:#2a160a;--well:#160a04;--frame:#c07a2a;--details:#1e1008;--cellmap:#3a2010;--onacc:#2a0e04;
  --machine:linear-gradient(180deg,#3a2010,#1c0e06 60%,#160a04);--screen:linear-gradient(180deg,#2a1440 0%,#6a2a3a 45%,#b8582a 76%,#4a2210 100%);
  --title:"Lilita One",sans-serif;--display:"Lilita One",sans-serif;--h1s:38px;--ls:.04em;--h1w:400}
[data-theme="acropolis"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#1a3a6a 0%,transparent 62%);--night:#06101e;--line:#24406a;--ink:#f2f6ff;--muted:#9fb4d6;--a1:#6ac8ff;--a2:#ffd23a;--gold:#ffd98a;--win:#9dffc9;--btn:#0e1c34;--well:#081224;--frame:#c9b07a;--details:#0a162a;--cellmap:#1a2c4a;--onacc:#06101e;
  --machine:linear-gradient(180deg,#1c2e4c,#0c1628 60%,#0a1222);--screen:radial-gradient(ellipse 60% 40% at 50% 100%,#ffb04a40,transparent 70%),linear-gradient(180deg,#08183a 0%,#163c72 60%,#2a4a7a 100%);
  --title:"Cinzel Decorative","Cinzel",Georgia,serif;--display:"Cinzel",Georgia,serif;--h1s:30px;--ls:.04em;--tt:none}
[data-theme="souls"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#2a1a4a 0%,transparent 62%);--night:#07060e;--line:#2e2848;--ink:#ece8ff;--muted:#a49cc8;--a1:#6affd8;--a2:#b46cff;--gold:#e8d08a;--win:#6affd8;--btn:#141026;--well:#0a0816;--frame:#7a6aa8;--details:#100c20;--cellmap:#221c3a;--onacc:#07060e;
  --machine:linear-gradient(180deg,#1e1832,#0e0b1a 60%,#0a0814);--screen:radial-gradient(ellipse 70% 50% at 50% 100%,#3ad8b833,transparent 70%),radial-gradient(ellipse 60% 50% at 50% 0%,#b46cff22,transparent 70%),linear-gradient(180deg,#0c0a1c,#120e26 60%,#0a1418);
  --title:"Pirata One",Georgia,serif;--display:"Cinzel",Georgia,serif;--tt:none;--h1w:400;--h1s:42px;--ls:.03em}
[data-theme="fishing"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#0e6a7a 0%,transparent 62%),radial-gradient(ellipse 80% 40% at 50% 100%,#0a3a2a 0%,transparent 70%);--night:#031820;--line:#1e5260;--ink:#effcff;--muted:#9ccfd8;--a1:#ffd23a;--a2:#ff7a2a;--gold:#ffd166;--win:#b8ff8a;--btn:#0a2e38;--well:#051c24;--frame:#c8904a;--details:#082530;--cellmap:#124450;--onacc:#1a0a04;
  --machine:repeating-linear-gradient(90deg,transparent 0 58px,#00000030 58px 61px),linear-gradient(180deg,#6a4424,#4a2e16 45%,#33200e);
  --screen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M22 100q-12-18 0-36t0-36' stroke='%23177a4a' stroke-width='6' opacity='.55'/%3E%3Cpath d='M36 100q10-16 0-30t2-26' stroke='%232a9a5a' stroke-width='5' opacity='.5'/%3E%3Cpath d='M362 100q12-20 0-40t0-38' stroke='%23177a4a' stroke-width='6' opacity='.55'/%3E%3Cpath d='M378 100q-8-14 0-28t-2-24' stroke='%232a9a5a' stroke-width='5' opacity='.5'/%3E%3Cpath d='M200 100q-6-10 0-20' stroke='%232a9a5a' stroke-width='4' opacity='.4'/%3E%3C/g%3E%3Cpath d='M0 100V88Q60 80 120 86T240 84T400 86V100Z' fill='%23d8b878' opacity='.55'/%3E%3Cg fill='%23f2e2b8' opacity='.6'%3E%3Ccircle cx='90' cy='92' r='2'/%3E%3Ccircle cx='280' cy='94' r='1.6'/%3E%3Cpath d='M150 96l6-6 6 6Z'/%3E%3C/g%3E%3C/svg%3E") bottom/100% 34% no-repeat,radial-gradient(ellipse 70% 30% at 50% -4%,#fff6c455,transparent 70%),repeating-conic-gradient(from 160deg at 50% -18%,#ffffff16 0 5deg,transparent 5deg 13deg),linear-gradient(180deg,#7ad8f2 0%,#2c96bc 13%,#0e5e82 48%,#073a52 80%,#0a3446 100%);
  --title:"Bangers",sans-serif;--display:"Teko","Arial Narrow",sans-serif;--h1s:48px;--ls:.06em;--h1w:400}
[data-theme="fishing"] .screen::before{content:"";position:absolute;inset:0 0 auto;height:7%;z-index:3;pointer-events:none;background:radial-gradient(ellipse 12px 5px at 50% 100%,#ffffff55,transparent) 0 0/34px 100% repeat-x,linear-gradient(180deg,#ffffff40,transparent);animation:surf 3s linear infinite}
@keyframes surf{to{background-position:34px 0,0 0}}
[data-theme="fishing"] .topper{background:radial-gradient(ellipse 70% 90% at 50% 100%,#3ad8ff33,transparent 70%),linear-gradient(180deg,#ffffff14,transparent 60%),#06222c}
[data-theme="fishing"] .console{background:linear-gradient(180deg,#ffffff10,#0000 40%),#06222c}
[data-theme="fishing"] .cab{background:linear-gradient(180deg,#8a5a2a,#2a1608 40%,#6a4020)}
[data-theme="poker"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#1a2a8a 0%,transparent 62%);--night:#040820;--line:#24357a;--ink:#f2f6ff;--muted:#a8b4e0;--a1:#ffd23a;--a2:#ff3a2a;--gold:#ffd23a;--win:#ff4a3a;--btn:#0c1640;--well:#060c2a;--frame:#d4a83a;--details:#08102e;--cellmap:#1a2a6a;--onacc:#1a0a04;
  --machine:linear-gradient(180deg,#1e2e86,#0e1650 60%,#0a1040);--screen:repeating-linear-gradient(45deg,#ffffff05 0 2px,transparent 2px 6px),radial-gradient(ellipse 80% 70% at 50% 30%,#3050d0,#14288a 70%,#0c1860);
  --title:"Bungee",sans-serif;--display:"Teko","Arial Narrow",sans-serif;--h1s:34px;--ls:.03em;--h1w:400}
[data-theme="roulette"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#5a0e1e 0%,transparent 62%);--night:#12040a;--line:#4a1a26;--ink:#fff4e8;--muted:#d8b8a8;--a1:#ffd27a;--a2:#e8203a;--gold:#ffd27a;--win:#7dffb0;--btn:#2a0a14;--well:#14040a;--frame:#c9a24a;--details:#1a060c;--cellmap:#3a1020;--onacc:#2a0a04;
  --machine:linear-gradient(180deg,#4a0e1e,#22060e 60%,#1a040a);--screen:repeating-linear-gradient(45deg,#ffffff04 0 2px,transparent 2px 6px),radial-gradient(ellipse 80% 70% at 50% 35%,#1f8a54,#0b4a2a 75%,#06301a);
  --title:"Cinzel Decorative","Cinzel",Georgia,serif;--display:"Cinzel",Georgia,serif;--h1s:30px;--ls:.04em;--tt:none}
[data-theme="dice"]{--bg:radial-gradient(ellipse 120% 80% at 50% 0%,#4a0e6a 0%,transparent 62%);--night:#0a0418;--line:#3a1a5a;--ink:#f6eeff;--muted:#bca8e0;--a1:#ff3ad8;--a2:#3ad8ff;--gold:#ffd23a;--win:#7dffb0;--btn:#1a0a34;--well:#0c0420;--frame:#b46cff;--details:#120828;--cellmap:#2a1450;--onacc:#140420;
  --machine:linear-gradient(180deg,#2a0e4a,#140626 60%,#0e041c);--screen:repeating-linear-gradient(45deg,#ffffff05 0 2px,transparent 2px 6px),radial-gradient(ellipse 80% 70% at 50% 35%,#3a2a9a,#1a0e5a 75%,#100838);
  --title:"Bungee",sans-serif;--display:"Teko","Arial Narrow",sans-serif;--h1s:36px;--ls:.04em;--h1w:400}

[hidden]{display:none!important}
html,body{min-height:100%;margin:0}
body{background:var(--bg),var(--night);background-attachment:fixed;color:var(--ink);font-family:var(--body);font-size:15px;transition:background-color .4s}
.wrap{max-width:780px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 28px;display:flex;flex-direction:column;gap:14px;animation:fadein .35s ease-out}
.wrap.lobby{max-width:1080px}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}}
header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hright{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lang{display:flex;border:1px solid var(--line);border-radius:20px;overflow:hidden}.lang button{border:0;background:var(--btn);color:var(--muted);font:700 12px var(--body);letter-spacing:.08em;padding:9px 11px;cursor:pointer}.lang button[aria-pressed="true"]{background:linear-gradient(90deg,var(--a1),var(--a2));color:var(--onacc)}
.snd{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--btn);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.snd svg{width:20px;height:20px}
button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fine{color:var(--muted);opacity:.8;font-size:12px;text-align:center;line-height:1.5;margin:6px 0 0}

/* ---------- lobby */
.brand{font:700 clamp(30px,6vw,46px)/1 var(--title);letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(90deg,#5ee7ff,#ffd166 30%,#ff9a4a 50%,#ff5f8f 70%,#b48cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lhead p{margin:6px 0 0;color:var(--muted);font-size:14px}
.chip{display:flex;align-items:baseline;gap:8px;border:1px solid var(--line);background:var(--btn);border-radius:20px;padding:8px 14px}
.chip span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chip b{font:700 18px var(--display);font-variant-numeric:tabular-nums}
.lintro{margin:0;color:var(--muted);max-width:70ch;line-height:1.55}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;border:5px solid transparent;background:var(--machine) padding-box,linear-gradient(160deg,color-mix(in srgb,var(--frame) 40%,#fff),var(--frame) 25%,color-mix(in srgb,var(--frame) 45%,#000) 55%,var(--frame) 80%) border-box;box-shadow:0 14px 40px #0008;transition:transform .2s,box-shadow .2s;color:var(--ink);font-family:var(--body)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#ffffff26 48%,transparent 60%) -200% 0/250% 100% no-repeat;transition:background-position .9s}
.card:hover::after{background-position:200% 0}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 50px #000a,0 0 30px color-mix(in srgb,var(--a1) 30%,transparent)}
.card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.art{position:relative;aspect-ratio:4/3;background:var(--screen);overflow:hidden;border-bottom:1px solid var(--frame)}
.art .rays{position:absolute;left:50%;top:42%;width:170%;aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(color-mix(in srgb,var(--gold) 20%,transparent) 0 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 60%);mask:radial-gradient(circle,#000 8%,transparent 60%);animation:rays 30s linear infinite}
.art svg{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 16px #000b)}
.art .hero{position:absolute;left:50%;top:5%;width:58%;translate:-50% 0;animation:float 4s ease-in-out infinite}
.art .pkhero{width:40%;top:4%}
.art .rhero{width:64%;top:2%}.art .rhero .rwheel{filter:none}
.art .dhero{width:62%;top:6%}
.art .hero svg{filter:drop-shadow(0 12px 18px #000c) drop-shadow(0 0 26px color-mix(in srgb,var(--gold) 45%,transparent))}
.art .l,.art .r{position:absolute;top:24%;width:25%;transition:transform .3s}
.art .l{left:2%;rotate:-12deg}.art .r{right:2%;rotate:12deg}
.art::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--night) 85%,transparent));pointer-events:none}
.art .logo{position:absolute;z-index:2;left:6px;right:6px;bottom:7%;margin:0;text-align:center;font:var(--h1w) 34px/1 var(--title);letter-spacing:var(--ls);text-transform:var(--tt);text-wrap:balance;padding:0 4px 4px}
[data-theme="rapanui"] .art .logo{font-size:44px}
.card:hover .hero{animation-duration:1.4s}.card:hover .rays{animation-duration:6s}.card:hover .l{transform:translateX(-4px) rotate(-6deg)}.card:hover .r{transform:translateX(4px) rotate(6deg)}
@keyframes float{50%{transform:translateY(-6px) scale(1.04)}}
/* 3D logo: gradient face, light rim, stacked extrusion */
.logo3d,.topper h1{background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--a1) 50%,#fff) 30%,var(--a1) 52%,var(--a2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px #ffffff55;
  filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--a2) 45%,#000)) drop-shadow(0 1px 0 color-mix(in srgb,var(--a2) 35%,#000)) drop-shadow(0 1px 0 color-mix(in srgb,var(--a2) 25%,#000)) drop-shadow(0 2px 0 #000) drop-shadow(0 6px 10px #000d)}
.ctext{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.ctext p{margin:0;color:var(--muted);font-size:14px;flex:1}
.play{align-self:flex-start;margin-top:8px;font:700 14px var(--display);letter-spacing:.1em;text-transform:uppercase;padding:9px 18px;border-radius:20px;background:linear-gradient(90deg,var(--a1),var(--a2));color:var(--onacc)}
[data-theme="rapanui"] .play{font-size:18px;padding:6px 18px 4px}

/* ---------- game */
.back{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--btn);color:var(--ink);border-radius:20px;padding:9px 14px 9px 10px;font:600 14px var(--body);cursor:pointer}
.back svg{width:18px;height:18px}.back:disabled{opacity:.4;cursor:default}
.gtitle h1{margin:0;font:var(--h1w) var(--h1s)/1.1 var(--title);letter-spacing:var(--ls);text-transform:var(--tt);background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent;text-wrap:balance;padding-bottom:2px}
.gtitle p{margin:2px 0 0;color:var(--muted);font-size:13px}
.machine{position:relative;border:9px solid transparent;border-radius:22px;padding:0 14px 14px;
  background:var(--machine) padding-box,linear-gradient(160deg,color-mix(in srgb,var(--frame) 40%,#fff),var(--frame) 22%,color-mix(in srgb,var(--frame) 45%,#000) 50%,var(--frame) 74%,color-mix(in srgb,var(--frame) 55%,#fff)) border-box;
  box-shadow:0 0 0 1px #000,0 30px 80px #000c,0 0 70px color-mix(in srgb,var(--a1) 16%,transparent),inset 0 2px 0 #ffffff22,inset 0 -2px 0 #0008}
/* topper: marquee with chasing bulbs and the game logo */
.topper{position:relative;margin:0 -14px 12px;padding:22px 16px 14px;text-align:center;border-bottom:2px solid color-mix(in srgb,var(--frame) 70%,#000);
  background:radial-gradient(ellipse 70% 90% at 50% 100%,color-mix(in srgb,var(--a1) 22%,transparent),transparent 70%),linear-gradient(180deg,#ffffff10,transparent 60%),color-mix(in srgb,var(--night) 70%,transparent);border-radius:13px 13px 0 0;overflow:hidden}
.topper::before,.topper::after{content:"";position:absolute;left:10px;right:10px;height:8px;pointer-events:none;
  background:radial-gradient(circle,#fff 0 1.4px,var(--gold) 1.6px 3px,transparent 3.6px) 0 50%/18px 8px repeat-x;filter:drop-shadow(0 0 4px var(--gold));animation:chase .9s steps(2) infinite}
.topper::before{top:7px}.topper::after{bottom:4px;animation-delay:-.45s;opacity:.7}
.machine.party .topper::before,.machine.party .topper::after{animation-duration:.18s}
@keyframes chase{50%{background-position:9px 50%;filter:drop-shadow(0 0 2px var(--gold)) brightness(.55)}}
.topper h1{margin:0;font:var(--h1w) calc(var(--h1s) * 1.15)/1.05 var(--title);letter-spacing:var(--ls);text-transform:var(--tt);text-wrap:balance;padding:0 4px 3px;
  background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--a1) 60%,#fff) 35%,var(--a1) 55%,var(--a2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #0009) drop-shadow(0 0 14px color-mix(in srgb,var(--a1) 45%,transparent))}
.topper p{margin:4px 0 0;color:var(--muted);font-size:12px;letter-spacing:.04em}
.banner{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:30px;margin-bottom:8px;font:600 14px var(--display);letter-spacing:.04em;color:var(--muted);flex-wrap:wrap}
[data-theme="rapanui"] .banner{font-size:18px}
.banner b{color:var(--gold)}
.banner .fs{display:flex;align-items:center;gap:8px;color:var(--a2)}
.banner .fs .mini{width:28px;height:28px}
.cab{display:grid;grid-template-columns:22px 1fr 22px;gap:5px;padding:7px 5px;border-radius:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--frame) 55%,#000),#000 40%,color-mix(in srgb,var(--frame) 40%,#000));box-shadow:inset 0 1px 0 #ffffff30,inset 0 -1px 0 #0009,0 6px 18px #0009}
.tabs{position:relative}
.tab{position:absolute;left:0;right:0;height:17px;margin-top:-8.5px;border-radius:5px;display:grid;place-items:center;font:700 10px/1 var(--body);color:#0b0b14;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lc) 55%,#fff),var(--lc) 45%,color-mix(in srgb,var(--lc) 60%,#000));box-shadow:inset 0 1px 0 #fff8,0 1px 2px #000;opacity:.55;transition:opacity .2s,box-shadow .2s,transform .2s}
.tab.on{opacity:1;transform:scale(1.15);box-shadow:inset 0 1px 0 #fff8,0 0 10px var(--lc),0 0 3px var(--lc)}
.screen{position:relative;aspect-ratio:5/3;max-width:100%;border-radius:8px;overflow:hidden;background:var(--screen);box-shadow:0 0 0 2px #000,0 0 0 4px color-mix(in srgb,var(--gold) 70%,var(--frame)),0 0 0 5px #000a}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#000a 0%,transparent 14%,transparent 86%,#000a 100%),linear-gradient(115deg,transparent 40%,#ffffff0d 48%,transparent 56%);z-index:3}
canvas#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}
canvas#amb{position:absolute;inset:0;width:100%;height:100%}
.reels{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr)}
.reel{position:relative;overflow:hidden;border-right:2px solid #0009;box-shadow:inset -1px 0 0 color-mix(in srgb,var(--gold) 35%,transparent)}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,#000b 0%,#0000 18%,#ffffff0a 46%,#ffffff0a 54%,#0000 82%,#000b 100%),linear-gradient(90deg,#0005,transparent 12%,transparent 88%,#0005)}
.reel.spinning .strip{filter:blur(1.4px) brightness(1.08)}
.reel.tease{box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 30px color-mix(in srgb,var(--gold) 55%,transparent)}
.reel.tease::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--gold) 30%,transparent),transparent) 0 0/100% 50%;animation:tease .5s linear infinite}
@keyframes tease{to{background-position:0 200%}}
.reel:last-child{border-right:0}
.strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.cell{height:var(--cell,60px);display:grid;place-items:center;padding:7%;box-sizing:border-box;position:relative}
.cell svg{width:100%;height:100%;filter:drop-shadow(0 2px 6px #0009)}
svg text{font-family:var(--display)}
.cell.win svg{animation:pop .7s ease-in-out infinite}
/* action: landing squash, scatter slam, win splash, shake, flash, side art */
.reel.land .cell svg{animation:land .34s cubic-bezier(.3,1.6,.5,1)}
@keyframes land{0%{transform:translateY(-10%) scaleY(1.1)}55%{transform:translateY(3%) scale(1.04,.92)}100%{transform:none}}
.cell.slam svg{animation:slam .55s cubic-bezier(.2,1.5,.4,1)!important}
@keyframes slam{0%{transform:scale(1.7);filter:brightness(2.2) drop-shadow(0 0 22px var(--gold))}100%{transform:none}}
.cell.win[data-s] svg{animation:hit .8s ease-in-out infinite}
@keyframes hit{0%,100%{transform:none}20%{transform:scale(1.18) rotate(-4deg);filter:brightness(1.3) drop-shadow(0 0 14px var(--lc,var(--gold)))}40%{transform:scale(1.12) rotate(3deg)}60%{transform:scale(1.15)}}
.splash{position:absolute;z-index:6;left:50%;top:50%;translate:-50% -50%;text-align:center;pointer-events:none;animation:splash 1.6s cubic-bezier(.2,1.3,.4,1) both;white-space:nowrap}
.splash b{display:block;font:var(--h1w) clamp(28px,7vw,56px)/1 var(--title);letter-spacing:var(--ls);text-transform:var(--tt);padding:0 6px 4px}
.splash span{display:block;font:700 clamp(22px,5vw,40px)/1.1 var(--display);color:var(--win);text-shadow:0 0 18px color-mix(in srgb,var(--win) 60%,transparent),0 3px 0 #000}
@keyframes splash{0%{transform:scale(.2) rotate(-8deg);opacity:0}18%{transform:scale(1.15) rotate(2deg);opacity:1}30%{transform:scale(1)}82%{transform:scale(1.04);opacity:1}100%{transform:scale(1.4);opacity:0}}
.machine.shake{animation:shake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{translate:-2px 1px}20%,80%{translate:4px -2px}30%,50%,70%{translate:-6px 2px}40%,60%{translate:6px -1px}}
.flash{position:absolute;inset:0;z-index:8;background:radial-gradient(circle,#fff,color-mix(in srgb,var(--gold) 70%,#fff) 40%,transparent 80%);pointer-events:none;animation:flash .7s ease-out forwards}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.sideart{position:fixed;inset:0;pointer-events:none;z-index:0;display:none}
.sideart span{position:absolute;top:50%;width:min(300px,calc((100vw - 820px) / 2 - 30px));translate:-50% -50%;animation:float 5s ease-in-out infinite}
.sideart span:first-child{left:calc((100vw - 780px) / 4)}
.sideart span:last-child{left:calc(100vw - (100vw - 780px) / 4);animation-delay:-2.5s}
.sideart svg{width:100%;height:auto;filter:drop-shadow(0 20px 30px #000c) drop-shadow(0 0 40px color-mix(in srgb,var(--gold) 35%,transparent))}
@media (min-width:1180px){body:not([data-theme="lobby"]) .sideart{display:block}}
.wrap{position:relative;z-index:1}
/* cascades + multiplier ladder */
.cell.boom svg{animation:boom .3s ease-in forwards!important}
@keyframes boom{40%{transform:scale(1.3);filter:brightness(2.5) drop-shadow(0 0 16px var(--gold))}100%{transform:scale(0);opacity:0}}
.mults{display:inline-flex;gap:4px;margin-left:10px;vertical-align:middle}
.mults i{font:700 13px/1 var(--display);font-style:normal;padding:4px 7px;border-radius:8px;border:1px solid var(--line);color:var(--muted);background:var(--well);transition:all .2s}
.mults i.on{color:var(--onacc);background:linear-gradient(180deg,#fff8,transparent 60%),linear-gradient(90deg,var(--a1),var(--a2));border-color:var(--gold);box-shadow:0 0 12px var(--a1);transform:scale(1.15)}
.mpop{position:absolute;z-index:6;right:6%;top:8%;font:var(--h1w) clamp(34px,8vw,64px)/1 var(--title);color:var(--gold);text-shadow:0 3px 0 #000,0 0 22px var(--gold);pointer-events:none;animation:mpop 1s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes mpop{0%{transform:scale(.2) rotate(-20deg);opacity:0}25%{transform:scale(1.3) rotate(6deg);opacity:1}75%{transform:scale(1);opacity:1}100%{transform:translateY(-20px);opacity:0}}
/* gamble panel over the cabinet */
.gamble{height:40px;border-radius:20px;padding:0 14px;border:1px solid #000;cursor:pointer;font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#fff6,transparent 50%),linear-gradient(90deg,#d0102a,#14141c);box-shadow:0 0 0 2px var(--gold),0 0 16px #d0102a88;animation:breathe 1.6s ease-in-out infinite}
.gpanel{position:absolute;inset:0;z-index:20;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;
  background:radial-gradient(ellipse 70% 50% at 50% 35%,color-mix(in srgb,var(--a2) 22%,transparent),transparent 70%),color-mix(in srgb,var(--night) 94%,transparent);backdrop-filter:blur(3px);animation:fadein .25s ease-out}
.gpanel h2{margin:0;font:var(--h1w) clamp(32px,7vw,48px)/1 var(--title);letter-spacing:var(--ls);text-transform:var(--tt);padding:0 6px 4px}
.gcard{width:min(150px,36vw);aspect-ratio:100/140;transition:transform .16s ease-in;filter:drop-shadow(0 12px 18px #000c)}
.gcard svg{width:100%;height:100%}
.gcard text{font-family:var(--display)}
.gcard.half{transform:scaleX(0)}
.gcard.good{filter:drop-shadow(0 0 26px #7dffb0) drop-shadow(0 12px 18px #000c)}
.gcard.bad{filter:drop-shadow(0 0 26px #ff3a3a) drop-shadow(0 12px 18px #000c);animation:shake .5s}
.gstake{margin:0}.gstake span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gstake b{font:700 30px var(--display);color:var(--win);text-shadow:0 0 14px color-mix(in srgb,var(--win) 50%,transparent)}
.gtxt{margin:0;color:var(--muted);font-size:14px;max-width:36ch;line-height:1.45}
.gbtns{display:flex;gap:12px}
.gbtns button,.gtake{border:0;cursor:pointer;border-radius:26px;font:700 16px var(--display);letter-spacing:.06em;text-transform:uppercase;padding:14px 22px;min-width:130px;color:#fff;box-shadow:0 0 0 3px #000,0 0 0 5px var(--gold),0 6px 0 2px #0008}
.gred{background:linear-gradient(180deg,#ff6a7a,#c8001a 60%,#7a0010)}
.gblack{background:linear-gradient(180deg,#5a5a6a,#1a1a22 60%,#000)}
.gtake{min-width:0;padding:10px 20px;font-size:13px;color:var(--onacc);background:linear-gradient(90deg,var(--a1),var(--a2));box-shadow:0 0 0 2px #000,0 0 0 3px var(--gold)}
.gbtns button:disabled,.gtake:disabled{filter:grayscale(.7) brightness(.6);cursor:default}
.gbtns button:active:not(:disabled),.gtake:active:not(:disabled){transform:translateY(2px)}
.ghist{display:flex;gap:5px;min-height:24px}
.ghist i{font-style:normal;width:22px;height:24px;display:grid;place-items:center;border-radius:4px;background:#fffdf6;font-size:15px}
.ghist i.r{color:#d0102a}.ghist i.b{color:#14141c}
@media (max-width:480px){.mults i{font-size:11px;padding:3px 5px}.mults{margin-left:4px;gap:2px}.gbtns button{min-width:0;padding:12px 16px;font-size:14px}.gamble{padding:0 10px;font-size:11px}}
/* ---------- Joker Draw (video poker): blue cabinet, LED digits, button deck */
.led{display:block;position:relative;font:700 20px/1.2 "Orbitron",ui-monospace,monospace;color:#ff4a32;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;
  text-shadow:0 0 5px #ff2a1a,0 0 12px #ff2a1a99;background:#140404;border:2px solid #000;border-radius:4px;padding:3px 8px;box-shadow:inset 0 0 10px #000,0 0 0 1px #6a1a10}
.led::before{content:"8888888";position:absolute;right:8px;color:#ff3a2a16;text-shadow:none}
.ptable{display:grid;grid-template-columns:1fr 1fr;gap:3px 14px;padding:10px 12px;margin-bottom:8px;border-radius:8px;background:linear-gradient(180deg,#14246e,#0c164a);border:2px solid #000;box-shadow:0 0 0 2px var(--frame),inset 0 0 20px #0008;font:600 15px/1.25 var(--display);letter-spacing:.05em;text-transform:uppercase}
.ptr{display:flex;align-items:center;gap:8px;padding:1px 4px;border-radius:3px}
.ptr span{flex:1;color:#ffe066;text-shadow:0 1px 0 #000,0 0 6px #ffd23a66}
.ptr .led{font-size:13px;padding:1px 6px;min-width:64px}.ptr .led::before{right:6px}
.ptr.cur span{color:#fff}
.ptr.won{background:linear-gradient(90deg,#e0201a,#e0201a 55%,transparent);animation:blink .5s steps(2) infinite}.ptr.won span{color:#fff;text-shadow:0 1px 0 #600}
@keyframes blink{50%{filter:brightness(.5)}}
.pstatus{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 2px 8px;min-height:30px}
.phint{font:600 18px var(--display);letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(180deg,#fff6a0,#ffb02e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #000)}
.pphase{font:700 13px var(--body);letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:6px 18px;border-radius:16px;background:linear-gradient(180deg,#ff6a5a,#c8101a 55%,#8a0008);box-shadow:0 0 0 2px #000,0 0 0 3px #ff8a7a88,0 0 12px #ff2a1a66}
.felt{position:relative;border-radius:10px;padding:26px 10px 14px;background:var(--screen);box-shadow:0 0 0 2px #000,0 0 0 4px var(--frame),inset 0 0 50px #000a;overflow:hidden}
.felt::after{content:"★ Joker Draw ★";position:absolute;left:0;right:0;bottom:3px;text-align:center;font:400 12px var(--title);letter-spacing:.3em;color:#ffffff18;pointer-events:none}
.hand{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.pcard{all:unset;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.pcard .hold{position:absolute;left:0;right:0;top:-22px;text-align:center;font:700 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#ffe066;text-shadow:0 1px 0 #000,0 0 8px #ffd23a;visibility:hidden}
.pcard .hold::after{content:" ▾"}
.pcard.held .hold{visibility:visible}
.pcard .cv{width:100%;aspect-ratio:100/140;border-radius:8%;transition:transform .14s ease-in,translate .2s;filter:drop-shadow(0 8px 10px #000b)}
.pcard .cv svg{width:100%;height:100%;display:block}
.pcard .cv.half{transform:scaleX(0)}
.pcard.held .cv{translate:0 -6px}
.pcard.win .cv{filter:drop-shadow(0 0 12px #fff) drop-shadow(0 0 20px var(--gold))}
.pcard:disabled{cursor:default}.pcard:focus-visible .cv{outline:2px solid var(--gold);outline-offset:3px}
.pleds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;padding:8px;border-radius:8px;background:linear-gradient(180deg,color-mix(in srgb,var(--btn) 75%,#fff2),var(--well));border:2px solid #000;box-shadow:0 0 0 2px var(--frame)}
.pleds span{display:block;font:700 15px var(--display);letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(180deg,#fff6a0,#ffb02e);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:2px}
.pdeck{display:flex;gap:12px;align-items:stretch;margin-top:8px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#f2f4f6,#aab2ba 48%,#dde2e6);box-shadow:inset 0 2px 0 #fff,inset 0 -3px 6px #0005,0 0 0 2px #000}
.pholds{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;flex:5}
.pmain{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:2.1}
.pbtn{aspect-ratio:1;border-radius:12px;border:3px solid #1a1a1a;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:3px;min-width:0;
  background:linear-gradient(180deg,#ff8a6a,#d0301e 45%,#8a1008);box-shadow:inset 0 3px 0 #fff7,inset 0 -4px 0 #0006,0 5px 0 #2a2a2a,0 7px 8px #0008;font:700 13px/1.05 var(--display);letter-spacing:.06em;color:#3a0804;text-transform:uppercase;transition:transform .06s,filter .15s}
.pbtn span{opacity:.5}.pbtn span.on{opacity:1;color:#fff;text-shadow:0 0 6px #fff,0 1px 0 #0008}
.pbtn.lit{filter:brightness(1.15) saturate(1.2);box-shadow:inset 0 3px 0 #fff7,inset 0 -4px 0 #0006,0 5px 0 #2a2a2a,0 0 16px #ff6a4a}
.pbtn:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 3px 0 #fff7,inset 0 -2px 0 #0006,0 1px 0 #2a2a2a}
.pbtn:disabled{filter:saturate(.35) brightness(.75);cursor:default}
.pbtn.cream{background:linear-gradient(180deg,#fffcec,#ece0b4 45%,#b8a880);color:#3a2a10}.pbtn.cream span.on{color:#1a0e04;text-shadow:0 0 6px #fff}
.pbtn.green{background:linear-gradient(180deg,#9affdc,#1ac88a 45%,#0a7a50);color:#04261a}.pbtn.green.lit{box-shadow:inset 0 3px 0 #fff7,inset 0 -4px 0 #0006,0 5px 0 #2a2a2a,0 0 18px #3affb0}
.pmachine-refill{margin-top:8px}
.pgamble{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.pgamble .gcard{width:min(120px,28vw)}
.pgamble .gbtns button{min-width:120px}
.gsmall{background:linear-gradient(180deg,#7ab8ff,#1a5ac8 60%,#0a2a6a)}.gbig{background:linear-gradient(180deg,#ff8a6a,#d0401a 60%,#6a1a0a)}
.ghist i.n{color:#14141c}
@media (max-width:560px){.ptable{grid-template-columns:1fr;font-size:13px;padding:8px}.ptr .led{font-size:11px;min-width:56px}.hand{gap:5px}.pcard .hold{font-size:11px;top:-18px;letter-spacing:.06em}
  .pdeck{flex-wrap:wrap;padding:10px;gap:8px}.pholds{flex:1 1 100%;gap:5px}.pmain{flex:1 1 100%}.pmain .pbtn{aspect-ratio:auto;height:56px;flex-direction:row;gap:10px}.pbtn{font-size:10px;border-width:2px;border-radius:9px}
  .led{font-size:14px;padding:2px 5px}.pleds span{font-size:12px}.phint{font-size:14px}.pphase{font-size:11px;padding:5px 12px}.pgamble .gbtns button{min-width:0}}
/* ---------- shared bet tables (roulette, dice): chips, cells */
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.chipb{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--body);color:#fff;text-shadow:0 1px 0 #0008;
  background:radial-gradient(circle,var(--cc) 0 42%,#fff 43% 47%,var(--cc) 48%),var(--cc);box-shadow:inset 0 0 0 4px #ffffff55,inset 0 0 0 5px var(--cc),0 3px 0 #0008;
  -webkit-mask:radial-gradient(circle,#000 70%,transparent 71%);background-image:repeating-conic-gradient(var(--cc) 0 30deg,#fff 30deg 45deg),radial-gradient(circle,var(--cc) 58%,transparent 59%);background-blend-mode:normal;transition:transform .12s}
.chipb>span{display:grid;place-items:center;width:62%;height:62%;border-radius:50%;background:var(--cc);border:1.5px dashed #ffffffaa}
.chipb[aria-pressed="true"]{transform:translateY(-5px) scale(1.08);filter:drop-shadow(0 0 8px var(--gold))}
.chipb:focus-visible{outline:2px solid var(--gold)}
.chip{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;min-width:24px;height:24px;padding:0 3px;border-radius:12px;display:grid;place-items:center;font:700 11px var(--body);color:#fff;pointer-events:none;
  background:var(--cc);box-shadow:inset 0 0 0 2px #ffffffaa,0 2px 0 #0009,0 0 0 1px #000;animation:chipin .2s cubic-bezier(.2,1.6,.4,1)}
@keyframes chipin{from{transform:translateY(-14px) scale(1.4);opacity:0}}
.tbtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tbtns button{border:1px solid #000;border-radius:16px;padding:8px 12px;font:600 13px var(--body);color:var(--ink);background:linear-gradient(180deg,#ffffff22,transparent),var(--btn);box-shadow:0 0 0 1px var(--frame);cursor:pointer}
.tbtns button:disabled{opacity:.4;cursor:default}
.tcontrols{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:10px}
.tcontrols .left{display:flex;flex-direction:column;gap:8px}
.hist{display:flex;gap:4px;flex-wrap:wrap;min-height:26px}
.hist i{font:700 12px/1 var(--body);font-style:normal;min-width:24px;height:24px;padding:0 4px;display:grid;place-items:center;border-radius:12px;color:#fff;box-shadow:inset 0 0 0 1px #ffffff44}
.hist i:first-child{transform:scale(1.15);box-shadow:inset 0 0 0 2px var(--gold)}
.hr{background:#c8102a}.hb{background:#16161c}.hg{background:#0e8a3e}
/* roulette */
.rmain{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px;align-items:start}
.rwheelbox{position:relative;border-radius:12px;padding:10px;background:var(--screen);box-shadow:0 0 0 2px #000,0 0 0 4px var(--frame),inset 0 0 40px #000a}
.rwheel{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 18px #000c)}
.rwheelbox .rrot{transition:transform 5.2s cubic-bezier(.12,.55,.12,1)}
.rwheelbox .rballrot{transition:transform 5.2s cubic-bezier(.08,.6,.18,1)}
.rwheelbox .rball{transition:transform .8s cubic-bezier(.3,1.7,.5,1) 4.3s}
.rres{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.rnum{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font:700 26px var(--display);color:#fff;box-shadow:0 0 0 3px var(--gold),0 0 18px #000;background:#1a1a1a}
.rnum.pop{animation:zoomin .4s cubic-bezier(.2,1.6,.4,1)}
.rtable{display:grid;grid-template-columns:1fr 1fr 1.1fr 1.1fr 1.1fr;gap:3px;padding:8px;border-radius:10px;background:var(--screen);box-shadow:0 0 0 2px #000,0 0 0 4px var(--frame),inset 0 0 30px #0008}
.rc{all:unset;box-sizing:border-box;position:relative;cursor:pointer;min-height:28px;display:grid;place-items:center;border:1.5px solid #ffffffb0;border-radius:4px;font:600 14px var(--display);color:#fff;text-align:center;line-height:1.05;padding:2px;transition:filter .15s,box-shadow .15s}
.rc:hover{filter:brightness(1.3)}.rc:focus-visible{outline:2px solid var(--gold)}
.rc.n{font-size:16px}.rc.red{background:#c8102a}.rc.blk{background:#16161c}.rc.zero{background:#0e8a3e;grid-column:3/6}
.rc.vert{writing-mode:vertical-rl;transform:rotate(180deg);font-size:13px;letter-spacing:.06em}
.rc.dia{font-size:0}.rc.dia::before{content:"";width:60%;height:62%;background:var(--dc);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border:1px solid #fff}
.rc.vert .chip{writing-mode:horizontal-tb;transform:rotate(180deg)}
.rc.hit{box-shadow:0 0 0 2px var(--gold),0 0 16px var(--gold);filter:brightness(1.3)}
.rc.res{animation:resp .6s ease-in-out infinite}
@keyframes resp{50%{box-shadow:0 0 0 3px #fff,0 0 22px #fff}}
.rc.lost .chip{opacity:0;transform:scale(.3);transition:all .6s}
/* dice */
.dtray{position:relative;display:flex;justify-content:center;align-items:center;gap:clamp(24px,8vw,70px);height:190px;border-radius:12px;background:var(--screen);box-shadow:0 0 0 2px #000,0 0 0 4px var(--frame),inset 0 0 50px #000c;perspective:700px;overflow:hidden;--ds:78px}
.dtray::after{content:"";position:absolute;inset:auto 10% 18px;height:16px;border-radius:50%;background:radial-gradient(#0008,transparent 70%);pointer-events:none}
.die{width:var(--ds);height:var(--ds);position:relative;z-index:1;transform-style:preserve-3d}
.tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-30deg)}
.die:nth-child(2) .tilt{transform:rotateX(-24deg) rotateY(26deg)}
.die.toss{animation:toss 1.25s cubic-bezier(.3,.6,.4,1)}
.die:nth-child(2).toss{animation-delay:.06s}
@keyframes toss{0%{transform:translate(-160px,-90px)}35%{transform:translate(-40px,10px)}50%{transform:translate(-14px,-26px)}70%{transform:translate(0,4px)}82%{transform:translate(0,-6px)}100%{transform:none}}
.cube{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.25s cubic-bezier(.2,.65,.25,1)}
.face{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:13%;border-radius:18%;background:radial-gradient(circle at 30% 25%,#ff6a7a,#d0102a 60%,#8a0016);box-shadow:inset 0 0 0 2px #ff9aa8,inset 0 -6px 12px #0005;backface-visibility:hidden}
.f2,.f6{filter:brightness(.62)}.f3,.f4{filter:brightness(.8)}.f5{filter:brightness(1.12)}
.face i{border-radius:50%;margin:12%;background:radial-gradient(circle at 40% 35%,#fff,#e8e8f0);box-shadow:inset 0 -2px 2px #0003}
.face i.x{visibility:hidden}
.f1{transform:translateZ(calc(var(--ds) / 2))}.f6{transform:rotateY(180deg) translateZ(calc(var(--ds) / 2))}
.f3{transform:rotateY(90deg) translateZ(calc(var(--ds) / 2))}.f4{transform:rotateY(-90deg) translateZ(calc(var(--ds) / 2))}
.f5{transform:rotateX(90deg) translateZ(calc(var(--ds) / 2))}.f2{transform:rotateX(-90deg) translateZ(calc(var(--ds) / 2))}
.dsum{position:absolute;z-index:2;top:10px;right:14px;font:400 38px/1 var(--title);color:#fff;text-shadow:0 0 14px var(--a1),0 3px 0 #000}
.dhist{margin-top:8px}
.dfields{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.df{all:unset;box-sizing:border-box;position:relative;cursor:pointer;min-height:76px;border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;
  background:linear-gradient(180deg,#ffffff1a,transparent 60%),var(--btn);border:2px solid color-mix(in srgb,var(--a2) 60%,#000);box-shadow:inset 0 0 18px #0008;transition:filter .15s,box-shadow .15s}
.df b{font:400 20px/1 var(--title);color:#fff;letter-spacing:.04em}.df small{font:600 13px var(--display);letter-spacing:.08em;color:var(--a2)}
.df:hover{filter:brightness(1.25)}.df:focus-visible{outline:2px solid var(--gold)}
.df.hit{box-shadow:0 0 0 3px var(--gold),0 0 22px var(--gold);filter:brightness(1.3)}
.df.lost .chip{opacity:0;transform:scale(.3);transition:all .6s}
.df .chip{top:auto;bottom:6px;translate:-50% 0}
.df.wide{grid-column:span 1}
@media (max-width:640px){.rmain{grid-template-columns:1fr}.rwheelbox{max-width:320px;margin:0 auto;width:100%}}
@media (max-width:480px){.tcontrols{grid-template-columns:1fr}.tcontrols .spin{justify-self:center}.chipb{width:40px;height:40px}.dtray{height:160px;--ds:62px}.dfields{grid-template-columns:repeat(2,1fr)}.df{min-height:66px}.df b{font-size:16px}.rc{min-height:26px;font-size:12px}.rc.n{font-size:14px}}
/* symbol finish: light sweep on high symbols, rotating aura + sparkles on top symbol and wild */
.sy .sweep{animation:sweep 4.2s ease-in-out infinite}
@keyframes sweep{0%,62%{transform:translateX(0)}92%,100%{transform:translateX(250px)}}
.sy .rays{transform-origin:50px 50px;animation:spinr 14s linear infinite}
@keyframes spinr{to{transform:rotate(360deg)}}
.sy .aura>circle{transform-origin:50px 50px;animation:auraP 2.6s ease-in-out infinite}
@keyframes auraP{50%{transform:scale(1.08);opacity:.75}}
.sy .spk{transform-box:view-box;animation:twinkle 2.1s ease-in-out infinite;opacity:0}
@keyframes twinkle{0%,100%{opacity:0;scale:.2}45%{opacity:1;scale:1}60%{opacity:.9;scale:.8}}
.cell[data-s="N"] svg,.cell[data-s="W"] svg{animation:hover 3s ease-in-out infinite}
@keyframes hover{50%{transform:translateY(-3%) scale(1.03)}}
.reel.spinning .sy *,.reel.spinning .cell svg{animation:none!important}
.cell.win::before{content:"";position:absolute;inset:3px;border-radius:10px;border:3px solid var(--lc,var(--gold));box-shadow:0 0 12px var(--lc,var(--gold)),inset 0 0 14px color-mix(in srgb,var(--lc,var(--gold)) 45%,transparent);animation:box .7s ease-in-out infinite}
@keyframes box{50%{box-shadow:0 0 22px var(--lc,var(--gold)),inset 0 0 22px color-mix(in srgb,var(--lc,var(--gold)) 60%,transparent)}}
.cell.dim{opacity:.35}
@keyframes pop{50%{transform:scale(1.1);filter:drop-shadow(0 0 12px var(--gold))}}
.expand{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,color-mix(in srgb,var(--a2) 22%,transparent),color-mix(in srgb,var(--a1) 14%,transparent));border-left:2px solid var(--a2);border-right:2px solid var(--a2);animation:grow .45s ease-out both}
.expand svg{width:86%;height:auto}
@keyframes grow{from{transform:scaleY(.2);opacity:0}to{transform:none;opacity:1}}
svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
svg.lines polyline{filter:drop-shadow(0 0 4px #000) drop-shadow(0 0 6px var(--lc))}
.lamt{position:absolute;z-index:5;transform:translate(-50%,-50%);padding:3px 10px;border-radius:12px;font:700 15px var(--display);color:#111;white-space:nowrap;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,var(--lc));box-shadow:0 0 0 2px #000,0 0 14px var(--lc);animation:zoomin .3s cubic-bezier(.2,1.4,.4,1) both}
.overlay{z-index:6;position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:color-mix(in srgb,var(--night) 86%,transparent);backdrop-filter:blur(2px);padding:16px}
.overlay.big{overflow:hidden}
.overlay.big::before{content:"";position:absolute;left:50%;top:50%;width:180%;aspect-ratio:1;translate:-50% -50%;z-index:-1;
  background:repeating-conic-gradient(color-mix(in srgb,var(--gold) 28%,transparent) 0 9deg,transparent 9deg 22.5deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 62%);mask:radial-gradient(circle,#000 10%,transparent 62%);animation:rays 9s linear infinite}
.overlay>div{position:relative;z-index:1}
@keyframes rays{to{rotate:360deg}}
.overlay h2{margin:0 0 6px;font:var(--h1w) clamp(26px,6vw,48px)/1.1 var(--title);letter-spacing:var(--ls);text-transform:var(--tt);background:linear-gradient(180deg,#fff6d6,var(--gold) 55%,#ff9f3a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--gold) 50%,transparent));animation:zoomin .5s cubic-bezier(.2,1.4,.4,1) both;padding:0 6px 4px}
.overlay .amt{font:700 clamp(30px,8vw,64px)/1.1 var(--display);color:var(--win);text-shadow:0 0 24px color-mix(in srgb,var(--win) 60%,transparent);font-variant-numeric:tabular-nums}
@keyframes zoomin{from{transform:scale(.3);opacity:0}}
.overlay p{margin:0;color:var(--muted)}
.overlay .pick{width:min(120px,22vw);height:min(120px,22vw);margin:12px auto}
.console{margin:12px -4px 0;padding:12px;border-radius:14px;background:linear-gradient(180deg,#ffffff0d,#0000 40%),color-mix(in srgb,var(--night) 80%,#000);border:1px solid #000;box-shadow:inset 0 1px 0 #ffffff1a,inset 0 10px 24px #0007}
.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.readout div{background:linear-gradient(180deg,#000,#0b0b12);border:1px solid color-mix(in srgb,var(--frame) 50%,#000);border-radius:8px;padding:6px 10px 5px;min-width:0;box-shadow:inset 0 2px 8px #000,0 1px 0 #ffffff14}
.readout span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.readout b{display:block;font:700 23px var(--display);transition:color .2s;font-variant-numeric:tabular-nums lining-nums;color:var(--gold);text-shadow:0 0 10px color-mix(in srgb,var(--gold) 55%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme="rapanui"] .readout b{font-size:29px;line-height:1}
.readout .w b{color:var(--win);text-shadow:0 0 10px color-mix(in srgb,var(--win) 55%,transparent)}
.msg{min-height:20px;margin-top:8px;text-align:center;color:var(--gold);font:600 14px var(--display);letter-spacing:.03em}
[data-theme="rapanui"] .msg{font-size:18px}
.controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:6px}
.bet{display:flex;align-items:center;gap:8px}
.bet button,.auto{width:44px;height:44px;border-radius:50%;border:1px solid #000;color:var(--ink);font:700 20px var(--body);cursor:pointer;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--btn) 60%,#fff3),var(--btn) 60%,#000);box-shadow:0 0 0 2px color-mix(in srgb,var(--frame) 70%,#000),0 3px 6px #000a,inset 0 1px 0 #fff3}
.bet button:active:not(:disabled),.auto:active{transform:translateY(1px)}
.bet button:disabled{opacity:.4;cursor:default}
.bet .v{min-width:92px;text-align:center;font:600 12px var(--body);color:var(--muted)}
.bet .v b{display:block;font:700 18px var(--display);color:var(--ink);font-variant-numeric:lining-nums}
.right{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.auto{width:auto;min-width:64px;height:40px;border-radius:20px;padding:0 12px;font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.auto[aria-pressed="true"]{color:var(--onacc);background:linear-gradient(180deg,#fff8,transparent 50%),linear-gradient(90deg,var(--a1),var(--a2));box-shadow:0 0 0 2px var(--gold),0 0 16px var(--a1)}
.auto:disabled{opacity:.4;cursor:default}
.spin{position:relative;width:92px;height:92px;border-radius:50%;border:0;cursor:pointer;padding:0;font:700 16px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--onacc);
  background:radial-gradient(ellipse 52% 30% at 50% 17%,#ffffffb0,#fff0 75%),radial-gradient(circle at 50% 35%,var(--a1) 0%,var(--a2) 75%,color-mix(in srgb,var(--a2) 60%,#000) 100%);
  box-shadow:0 0 0 4px #000,0 0 0 7px color-mix(in srgb,var(--gold) 80%,#000),0 0 0 9px #000,0 8px 0 2px #0009,0 0 34px color-mix(in srgb,var(--a2) 45%,transparent)}
[data-theme="rapanui"] .spin{font-size:24px;padding-top:4px}
.spin:not(:disabled){animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 4px #000,0 0 0 7px var(--gold),0 0 0 9px #000,0 8px 0 2px #0009,0 0 50px color-mix(in srgb,var(--a2) 70%,transparent),0 0 16px var(--gold)}}
.spin:active:not(:disabled){transform:translateY(3px) scale(.98)}
.spin:disabled{filter:grayscale(.7) brightness(.6);cursor:default}
.refill{border:1px solid var(--gold);background:none;color:var(--gold);border-radius:8px;padding:8px 12px;font:600 14px var(--body);cursor:pointer}
details{background:var(--details);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
summary{cursor:pointer;font:600 15px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--a1)}
.pt{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.pt div{display:flex;gap:10px;align-items:center;background:var(--well);border-radius:8px;padding:6px 8px}
.pt svg{width:44px;height:44px;flex-shrink:0}
.pt small{display:block;color:var(--muted);font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums}
.pt b{font:600 13px var(--body)}
.rules{color:var(--muted);font-size:13px;line-height:1.55;margin:12px 0 0;max-width:68ch}
.linemap{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:10px}
.linemap svg{width:100%;height:auto;background:var(--well);border-radius:6px}
.linemap text{font-family:var(--body)}
@media (max-width:480px){.machine{padding:0 8px 10px;border-width:6px}.topper{margin:0 -8px 10px}.readout b{font-size:18px}.bet .v{min-width:56px}.bet button{width:38px;height:38px}.cab{grid-template-columns:16px 1fr 16px;gap:3px;padding:5px 3px}.tab{height:13px;margin-top:-6.5px;font-size:8px;border-radius:3px}.console{margin:10px -2px 0;padding:10px 8px}.spin{width:80px;height:80px;font-size:14px}.controls{gap:6px}.auto{min-width:52px;padding:0 8px}.lamt{font-size:12px}[data-theme] .topper h1{font-size:calc(var(--h1s) * .95)}.cards{grid-template-columns:1fr}.back span{display:none}.back{padding:9px 10px}}
@media (prefers-reduced-motion:reduce){.mpop,.gamble,.gcard,.reel.land .cell svg,.cell.slam svg,.splash,.machine.shake,.flash,.sideart span,.art .hero,.art .rays,.sy *,.cell[data-s] svg,.cell.win svg,.cell.win::before,.topper::before,.topper::after,.overlay.big::before,.reel.tease::before,.spin:not(:disabled),.overlay h2,.art .c svg,.wrap{animation:none}}