:root{--bg:var(--arcade-ground);--text:var(--arcade-ink);--muted:var(--arcade-muted);--faint:var(--arcade-faint);--line:var(--arcade-border);--teal:var(--arcade-brand);--accent:var(--arcade-brand);font-family:var(--arcade-font);scroll-behavior:smooth}
body{background:radial-gradient(ellipse at 10% 5%,var(--arcade-wash),transparent 35%),var(--bg)}
button{border-radius:8px}
button:disabled{cursor:default;opacity:.45}
a:hover{color:var(--accent)}
.arcade-nav{max-width:1500px;margin:auto;padding:25px 5%;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:50px}
.arcade-brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:800;letter-spacing:-1.2px}
.brand-icon{background:var(--teal);color:var(--arcade-ground);font-size:26px;border-radius:8px;padding:0 7px}
.brand-light{font-weight:400;color:var(--arcade-soft);margin-left:6px}
.arcade-nav nav{display:flex;gap:28px;font-size:12px;color:var(--arcade-soft);flex:1}
.arcade-nav nav span{border:1px solid var(--line);padding:3px 6px;border-radius:5px;margin-left:4px;font-size:10px}
.nav-wallet{display:flex;align-items:center;gap:18px}
.test-badge{font:10px 'Wheel Mono',monospace;letter-spacing:1px;color:var(--arcade-soft);white-space:nowrap}
.test-badge i,.live-dot{display:inline-block;width:6px;height:6px;background:var(--arcade-brand-light);border-radius:50%;margin-right:6px}
.outline{border:1px solid var(--arcade-border-strong);padding:11px 16px;background:color-mix(in srgb,var(--teal) 4%,transparent);font-size:12px}
.outline:hover{background:color-mix(in srgb,var(--teal) 9%,transparent)}
.quiet,.text-link{background:none;border:0;color:var(--arcade-muted);padding:6px 0;font-size:11px}
.quiet:hover,.text-link:hover{color:var(--accent)}
main{max-width:1350px;margin:auto;padding:0 36px}
.intro-row{display:flex;justify-content:space-between;align-items:center;padding:62px 0 48px}
.kicker,.label{font:10px 'Wheel Mono',monospace;letter-spacing:1.7px;color:var(--arcade-muted)}
.intro-row .kicker{color:var(--teal);margin:0 0 24px}
h1{font:650 clamp(52px,6.1vw,82px)/1.07 var(--arcade-heading-font);letter-spacing:-4px;margin:0}
h1 em{font-style:normal;color:var(--teal)}
.intro-copy{padding:0 40px}
.intro-copy p{font-size:22px;line-height:1.35;letter-spacing:-.7px;color:var(--arcade-soft);margin:0 0 15px}
.intro-copy>span{font-size:12px;color:var(--arcade-muted)}
.test-note{font:10px/1.7 'Wheel Mono',monospace;color:var(--arcade-faint);margin-top:25px}
.section-line{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}
.section-line h2{font-size:16px;font-weight:500;letter-spacing:-.3px;margin:0}
.section-line>span{font:9px 'Wheel Mono',monospace;letter-spacing:1.5px;color:var(--arcade-faint)}
.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.collection{--card-accent:var(--teal);position:relative;overflow:hidden;min-height:144px;border:1px solid var(--line);background:var(--arcade-inset);border-radius:8px;text-align:left;padding:25px;transition:transform .2s,border-color .2s}
.collection:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 95% 50%,color-mix(in srgb,var(--card-accent) 16%,transparent),transparent 75%);pointer-events:none}
.collection:hover{transform:translateY(-3px);border-color:var(--card-accent)}
.collection[aria-pressed=true]{border-color:var(--card-accent);background:var(--arcade-surface);box-shadow:inset 0 2px 0 var(--card-accent)}
.collection small{font:8px 'Wheel Mono',monospace;letter-spacing:1.5px;color:var(--arcade-muted)}
.collection h3{font-size:24px;font-weight:500;letter-spacing:-1px;margin:12px 0 14px;position:relative;z-index:1}
.collection p{font-size:10px;color:var(--arcade-muted);margin:0}
.collection p b{color:var(--card-accent);font-weight:400}
.collection .coin-stack{position:absolute;right:18px;top:45px;display:flex;transform:rotate(-15deg);opacity:.5}
.mini-coin{width:44px;height:44px;display:grid;place-items:center;background:var(--arcade-surface);border:1px solid var(--card-accent);color:var(--card-accent);border-radius:50%;font-size:14px;font-weight:700;margin-left:-14px;box-shadow:2px 3px 0 var(--arcade-ground)}
.arcade-play{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr);margin:38px 0 46px;border:1px solid var(--line);border-radius:12px;background:var(--arcade-inset);overflow:hidden;scroll-margin-top:25px}
.device-panel{min-width:0;background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 69%),var(--arcade-device-bg);display:flex;flex-direction:column;justify-content:space-between}
.device-topline{display:flex;justify-content:space-between;padding:25px 27px 0;font:9px 'Wheel Mono',monospace;color:var(--arcade-faint);letter-spacing:1px}
.device-topline>div{display:flex;gap:15px}
.device-topline .quiet{font-size:9px}
.device-panel .machine-space{width:100%;margin:auto;max-width:790px;aspect-ratio:1.03}
.device-panel .machine-tilt{width:99%}
.device-panel .machine-display strong{font-size:12cqw}
.device-panel #screen-wordmark{font-family:var(--arcade-font);font-weight:700;font-size:64px;letter-spacing:-3px}
.device-panel .screen-brand-divider{display:none}
.device-caption{display:flex;justify-content:space-between;padding:0 26px 24px;color:var(--arcade-faint);font:8px 'Wheel Mono',monospace;gap:10px}
.checkout{padding:34px 32px;background:var(--arcade-surface);border-left:1px solid var(--line)}
.checkout>.kicker{color:var(--accent);font-size:9px;letter-spacing:1.2px}
.checkout h2{font:500 38px var(--arcade-heading-font);letter-spacing:-1.6px;margin:14px 0 12px}
.muted{font-size:12px;color:var(--arcade-muted);line-height:1.6}
.price-line{display:flex;align-items:center;justify-content:space-between;margin:27px 0 24px;border-top:1px solid var(--line);padding-top:23px}
.price-line strong{display:block;font:500 50px var(--arcade-heading-font);margin-top:9px;letter-spacing:-2px}
.price-line strong span{font-size:29px;color:var(--arcade-faint)}
.max-prize{font:9px/1.6 'Wheel Mono',monospace;color:var(--arcade-faint);text-align:right;letter-spacing:1px}
.max-prize b{font-size:25px;color:var(--accent);font-weight:400}
.label{font-size:8px;letter-spacing:1.1px}
#payment{border:0;padding:0;margin:0}
#payment legend{margin-bottom:12px}
#payment-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
#payment-options button{border:1px solid var(--line);background:var(--arcade-ground);color:var(--arcade-muted);font-size:12px;padding:11px 0;position:relative}
#payment-options button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--arcade-ground))}
#payment-options small{display:block;font-size:8px;opacity:.6;margin-top:4px}
.payment-detail{display:flex;justify-content:space-between;margin:13px 0 20px;font:9px 'Wheel Mono',monospace;color:var(--arcade-muted);gap:10px}
.pull-button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 21px;border:0;background:var(--accent);color:var(--arcade-ground);font-size:16px;font-weight:600;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 45%,#000);transition:transform .12s,filter .12s}
.pull-button:hover{filter:brightness(1.08)}
.pull-button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--arcade-border-strong)}
.pull-button>span:last-child{font-size:24px;font-weight:400}
.fee-note{font-size:10px;line-height:1.7;color:var(--arcade-faint);margin:15px 0}
.status{font-size:11px;color:var(--arcade-brand-light);line-height:1.6;margin:12px 0;overflow-wrap:anywhere}
.status[data-error=true]{color:var(--arcade-error)}
.faucet-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--arcade-faint);border-top:1px solid var(--line);padding:10px 0;margin-top:15px;gap:10px}
.faucet-row .text-link{font-size:10px;color:var(--arcade-brand-light)}
.reserve-card{border-top:1px solid var(--line);margin-top:10px;padding-top:16px;font-size:10px;color:var(--arcade-faint)}
.reserve-card>div{display:flex;justify-content:space-between;margin-bottom:9px}
.reserve-card>div:first-child{justify-content:flex-start;align-items:center;color:var(--arcade-soft);margin-bottom:15px}
.reserve-card b,.reserve-card strong{font-weight:400}
.reserve-card strong{color:var(--arcade-soft);font-family:'Wheel Mono',monospace;font-size:9px}
.reserve-track{height:3px;background:var(--arcade-border-strong);border-radius:3px;overflow:hidden}
.reserve-track span{height:100%;background:var(--accent);width:0}
.reserve-card small{font-size:9px;line-height:1.5}
.inside-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;margin-bottom:55px}
.contents{display:grid;gap:9px}
.token-row{display:flex;align-items:center;gap:14px;border:1px solid var(--line);padding:13px 16px;border-radius:8px;background:var(--arcade-inset)}
.token-icon{width:36px;height:36px;background:color-mix(in srgb,var(--accent) 9%,var(--arcade-ground));border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);color:var(--accent);border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700}
.token-row>div:nth-child(2){flex:1}
.token-row h3{font-size:12px;margin:0 0 5px;font-weight:500}
.token-row small{font-size:9px;color:var(--arcade-faint)}
.token-row>a{font:9px 'Wheel Mono',monospace;color:var(--arcade-muted)}
.odds-row{display:grid;grid-template-columns:1.1fr 1fr .6fr;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:11px;gap:10px}
.odds-row>span:first-child{display:flex;gap:10px;align-items:center}
.odds-row i{width:7px;height:7px;border-radius:50%;background:var(--tier)}
.odds-row strong{font:10px 'Wheel Mono',monospace;font-weight:400;color:var(--arcade-soft)}
.odds-row>span:last-child{text-align:right;color:var(--arcade-faint);font:10px 'Wheel Mono',monospace}
.fine-print{font-size:11px;line-height:1.8;color:var(--arcade-faint);margin:18px 0 0}
.bags{padding:32px 0;border-top:1px solid var(--line);scroll-margin-top:20px}
.bags .kicker{font-size:8px;margin:0 0 12px;color:var(--arcade-faint)}
.bags h2{font-size:24px}
.bags h2 span{font-size:11px;color:var(--arcade-faint);margin-left:8px}
.bag-actions{display:flex;gap:20px;align-items:center}
.empty-bags{padding:45px 20px;text-align:center;border:1px dashed var(--arcade-border-strong);border-radius:12px}
.empty-bags>span{font-size:36px;color:var(--arcade-border-strong)}
.empty-bags h3{font-weight:400;font-size:17px;margin:15px 0 9px}
.empty-bags p{color:var(--arcade-faint);font-size:11px}
.draw-row{display:flex;align-items:center;gap:16px;padding:17px 12px;border-bottom:1px solid var(--line)}
.draw-row .draw-title{flex:1}
.draw-row h3{font-size:13px;font-weight:400;margin:0 0 6px}
.draw-row small{font:8px 'Wheel Mono',monospace;color:var(--arcade-faint)}
.draw-row .draw-controls{display:flex;gap:14px;align-items:center}
.draw-row .draw-controls button{font-size:10px}
.draw-row a{font-size:10px;color:var(--arcade-muted)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:35px 0 45px}
.how-grid article>span{color:var(--arcade-faint);font:9px 'Wheel Mono',monospace}
.how-grid h3{font-size:16px;letter-spacing:-.4px;font-weight:500;margin:16px 0 12px}
.how-grid p{font-size:11px;color:var(--arcade-faint);line-height:1.8;margin:0}
.technical{border-top:1px solid var(--line);padding:20px 0 35px;color:var(--arcade-faint);font-size:11px;line-height:1.8}
.technical summary{cursor:pointer;color:var(--arcade-muted)}
.technical a{text-decoration:underline}
.technical p{max-width:900px}
footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 5%;color:var(--arcade-faint)}
footer .arcade-brand{font-size:18px}
footer>span{font:8px 'Wheel Mono',monospace;letter-spacing:1.3px}
footer>a:last-child{font-size:10px}
.reveal{width:min(420px,calc(100vw - 30px));padding:40px 32px 24px;border:1px solid color-mix(in srgb,var(--teal) 25%,transparent);border-radius:12px;background:radial-gradient(ellipse at 50% 23%,color-mix(in srgb,var(--teal) 6%,transparent),transparent 65%),var(--arcade-surface);color:var(--text);text-align:center}
.reveal::backdrop{background:color-mix(in srgb,var(--arcade-ground) 91%,transparent);backdrop-filter:blur(10px)}
.reveal .close{position:absolute;right:15px;top:12px;background:none;border:0;color:var(--arcade-faint);font-size:25px}
.reveal-coin{width:125px;height:125px;margin:26px auto;border:2px solid var(--accent);border-radius:50%;display:grid;place-items:center;font-size:35px;font-weight:700;color:var(--accent);box-shadow:0 0 65px color-mix(in srgb,var(--accent) 15%,transparent),inset 0 0 40px color-mix(in srgb,var(--accent) 10%,transparent);transform:rotate(-10deg)}
.tier-tag{font:8px 'Wheel Mono',monospace;letter-spacing:2px;color:var(--accent)}
.reveal h2{font:500 34px var(--arcade-heading-font);letter-spacing:-1px;margin:17px 0 10px}
.reveal>p:not(.kicker){font-size:11px;color:var(--arcade-soft);line-height:1.6}
.reveal .pull-button{margin-top:25px;justify-content:center;font-size:13px}
.reveal .outline{width:100%;margin:15px 0 10px}
.reveal .fine-print{font-size:9px!important}
.reveal[open]{animation:reveal-card .3s ease-out}
#reveal-net{min-height:28px}

@media(max-width:1000px){.arcade-nav{gap:25px}
.arcade-play{grid-template-columns:minmax(0,1.2fr) minmax(290px,1fr)}
.checkout{padding:25px}
.intro-copy{padding-right:0}
.collection{padding:20px}
.collection h3{font-size:20px}
.collection .coin-stack{right:10px;opacity:.25}
.device-topline{padding:20px 18px 0;font-size:8px}
.device-caption{padding:0 18px 20px;font-size:7px}
.inside-grid{gap:35px}
}

@media(max-width:760px){main{padding:0 20px}
.arcade-nav{padding:18px 20px;gap:15px;flex-wrap:wrap}
.arcade-brand{font-size:21px}
.arcade-nav nav{order:3;flex-basis:100%;font-size:11px;margin-top:5px}
.nav-wallet{margin-left:auto;gap:9px}
.nav-wallet .outline{font-size:10px;padding:9px 10px}
.test-badge{font-size:8px}
.intro-row{padding:40px 0 30px}
.intro-row .kicker{font-size:8px;margin-bottom:18px;letter-spacing:1px}
h1{font-size:58px;letter-spacing:-3px}
.intro-copy{max-width:190px}
.intro-copy p{font-size:15px;letter-spacing:-.3px}
.intro-copy>span{font-size:10px;line-height:1.7;display:block}
.test-note{font-size:8px;margin-top:15px}
.collection-grid{gap:8px}
.collection{padding:15px 12px;min-height:125px}
.collection small{font-size:6px;letter-spacing:.7px}
.collection h3{font-size:16px;letter-spacing:-.4px;margin:14px 0}
.collection p{font-size:8px;line-height:1.6}
.collection .coin-stack{display:none}
.section-line h2{font-size:14px}
.arcade-play{grid-template-columns:1fr;margin-top:25px}
.device-panel .machine-space{max-width:580px}
.device-topline{padding:20px 22px 0}
.device-caption{padding:0 22px 18px;font-size:8px}
.checkout{border-left:0;border-top:1px solid var(--line);padding:26px}
.checkout h2{font-size:33px}
.inside-grid{grid-template-columns:1fr;gap:30px;margin-bottom:20px}
.how-grid{grid-template-columns:1fr;gap:27px;padding:30px 0}
.how-grid h3{margin:10px 0}
.bags h2{font-size:20px}
.bags h2 span{display:block;margin:8px 0 0}
.bag-actions{gap:12px}
.bag-actions .outline{font-size:10px;padding:9px 10px}
.draw-row{flex-wrap:wrap;gap:12px;padding:17px 0}
.draw-row .draw-controls{width:100%;justify-content:flex-end}
.draw-row .draw-title{min-width:190px}
footer{padding:22px 20px;flex-wrap:wrap}
footer>span{order:3;flex-basis:100%;font-size:7px}
.technical{font-size:10px}
.machine-display{top:28.8%!important}
.screen-mascot{opacity:.75}
}

@media(max-width:400px){.intro-copy{max-width:115px}
.intro-copy p{font-size:13px}
h1{font-size:48px}
.test-badge{display:none}
.collection h3{font-size:14px}
.intro-row .kicker{font-size:6.8px}
}

@media(max-width:600px){.intro-row{display:block;padding:35px 0 30px}
.intro-copy{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;max-width:none;margin-top:24px;padding:0}
.intro-copy p{font-size:14px;line-height:1.5;margin:0}
.intro-copy>span{display:none}
.intro-copy .test-note{margin:0;font-size:8px;line-height:1.7}
.intro-row .kicker{font-size:8px;letter-spacing:1px}
h1{font-size:58px;letter-spacing:-3.5px}
}

/* Composite the floating assembly before cursor tilt so the wrapper cannot
   occlude the native button during Chromium's 3D hit testing. */
.device-panel .machine-tilt{transform-style:flat}


/* The case, cap and display use the same blue/slate family. Effects stay on
   visual children so cursor tilt and the independent hit area are unaffected. */
.device-panel .wheel-art { filter: var(--arcade-case-filter); }
.device-panel .button-cap image { filter: var(--arcade-cap-filter); }
.device-panel .button-sidewall { filter: var(--arcade-cap-filter); }
.device-panel .display-caption { color: var(--arcade-soft); font-family: var(--arcade-font); }
.device-panel .machine-display strong { font-family: var(--arcade-font); }
.device-panel .screen-pointer { stroke: var(--arcade-brand-light); filter: drop-shadow(0 0 7px #69aac177); }
.device-panel .machine[data-button=hover] .button-plunger {
  filter: drop-shadow(2px 9px 6px #0009) drop-shadow(0 0 13px #69aac166) brightness(1.09);
}
::selection { background: color-mix(in srgb,var(--teal) 27%,transparent); color: var(--text); }
.collection:focus-visible { outline-offset: 4px; }
.reveal { max-height: calc(100svh - 32px); overflow-y: auto; }

/* Native switch: presentation only, always usable during a draw. */
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; flex-shrink: 0; border: 0; background: none; color: var(--arcade-soft); font-size: 10px; white-space: nowrap; }
.theme-toggle:hover { color: var(--text); }
.theme-track { position: relative; width: 31px; height: 18px; padding: 3px; border: 1px solid var(--arcade-border-strong); background: var(--arcade-surface); border-radius: 20px; }
.theme-track > span { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); transition: transform .18s ease; }
.theme-toggle[aria-checked=true] .theme-track { background: color-mix(in srgb,var(--teal) 16%,var(--arcade-ground)); border-color: var(--teal); }
.theme-toggle[aria-checked=true] .theme-track > span { transform: translateX(13px); }
:root[data-arcade-theme=og] h1 { font-size: clamp(52px,6.5vw,88px); font-weight: 600; line-height: .98; letter-spacing: -4.5px; }
:root[data-arcade-theme=og] .collection { border-radius: 13px; }
:root[data-arcade-theme=og] .collection[aria-pressed=true] { background: var(--arcade-inset); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--card-accent) 15%,transparent); }
:root[data-arcade-theme=og] .arcade-play { border-radius: 18px; }
:root[data-arcade-theme=og] .reveal { border-radius: 20px; }
:root[data-arcade-theme=og] .device-panel .machine-display strong,
:root[data-arcade-theme=og] .device-panel .display-caption { font-family: var(--arcade-heading-font); }
:root[data-arcade-theme=og] .device-panel .display-caption { color: #bdb3cc; }
:root[data-arcade-theme=og] .device-panel #screen-wordmark { font-family: Arial,Helvetica,sans-serif; font-weight: 800; }
:root[data-arcade-theme=og] .device-panel .screen-pointer { stroke: #cdfff6; filter: drop-shadow(0 0 7px #63eadf99); }
:root[data-arcade-theme=og] .device-panel .machine[data-button=hover] .button-plunger { filter: drop-shadow(2px 9px 6px #0009) drop-shadow(0 0 13px #63eadf55) brightness(1.09); }
@media (max-width: 1100px) { .arcade-nav { gap: 22px; } }
@media (max-width: 760px) {
  .arcade-nav { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px 12px; }
  .arcade-nav > .arcade-brand { grid-column: 1; grid-row: 1; font-size: 20px; }
  .arcade-nav > .theme-toggle { grid-column: 2; grid-row: 1; justify-self: end; }
  .arcade-nav nav { grid-column: 1; grid-row: 2; gap: 16px; margin: 0; font-size: 10px; }
  .nav-wallet { grid-column: 2; grid-row: 2; margin: 0; }
  .nav-wallet .test-badge { display: none; }
  :root[data-arcade-theme=og] h1 { font-size: 58px; letter-spacing: -3.5px; }
}
@media (max-width: 360px) {
  .arcade-nav { padding-inline: 16px; }
  .arcade-nav > .arcade-brand { font-size: 18px; gap: 7px; }
  .theme-toggle { font-size: 9px; gap: 5px; }
  .arcade-nav nav { gap: 10px; }
}