:root{--night-0:#0f0420;--night-1:#1b0838;--night-2:#2d0f58;--plum:#4b1a86;--cherry:#d61f33;--cherry-deep:#8e0f20;--gold-1:#fff1b0;--gold-2:#ffc93a;--gold-3:#d48a00;--cream:#fff7e8;--ink:#2a1236;--muted:#b9a6d6;--ok:#3fbf6a;--font-display:"Lilita One", "Arial Black", system-ui, sans-serif;--font-body:"Mitr", system-ui, -apple-system, "Segoe UI", sans-serif;--radius-card:22px;--radius-pill:999px;--shadow-pop:0 18px 50px #0800148c, 0 0 0 1px #ffdc8c2e inset;--ease-pop:cubic-bezier(.2, 1.4, .4, 1);--dur-fast:.14s;--dur-normal:.32s}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:radial-gradient(1200px 700px at 30% 20%, #7b34c959, transparent 60%), radial-gradient(900px 600px at 80% 90%, #d61f332e, transparent 60%), var(--night-0);color:var(--cream);font-family:var(--font-body);-webkit-tap-highlight-color:transparent;overflow-x:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--gold-2);outline-offset:3px}.app{justify-content:center;align-items:center;gap:28px;min-height:100dvh;padding:16px;display:flex}.stage{flex:none}.frame{aspect-ratio:9/16;background:var(--night-1);isolation:isolate;-webkit-user-select:none;user-select:none;border-radius:28px;height:min(100dvh - 32px,177.778vw - 56.8889px,900px);position:relative;overflow:hidden;box-shadow:0 30px 80px #0009,0 0 0 2px #ffc93a59,0 0 60px #7b34c959}.canvas-host{position:absolute;inset:0}.canvas-host canvas{display:block}.hud-top{z-index:6;pointer-events:none;justify-content:space-between;align-items:center;padding:14px 14px 0;display:flex;position:absolute;inset:0 0 auto}.hud-top>*{pointer-events:auto}.hud-left,.hud-right{align-items:center;gap:8px;display:flex}.chip{color:var(--cream);white-space:nowrap;border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background var(--dur-fast), transform var(--dur-fast);background:#14052b8c;border:1px solid #ffdc8c59;padding:7px 14px;font-size:13px}.chip:hover{background:#4b1a86bf}.chip:active{transform:scale(.95)}.chip[aria-pressed=false]{color:var(--muted)}.hud-bottom{padding:0 24px calc(26px + env(safe-area-inset-bottom));z-index:2;background:linear-gradient(#0000,#0f0420d9 70%);flex-direction:column;align-items:center;gap:14px;padding-top:40px;display:flex;position:absolute;inset:auto 0 0}.frame.has-overlay .hud-bottom{visibility:hidden}.message{min-height:1.6em;font-family:var(--font-display);letter-spacing:.02em;text-align:center;color:var(--cream);text-shadow:0 2px #00000073;margin:0;font-size:clamp(18px,4.6vh,30px)}.message.is-win{color:var(--gold-2);text-shadow:0 3px #5e0814,0 0 18px #ffc93abf;animation:pop var(--dur-normal) var(--ease-pop)}.message.is-miss{color:var(--muted)}.spin-btn{border-radius:var(--radius-pill);width:min(72%,280px);font-family:var(--font-display);letter-spacing:.08em;color:#fff;background:linear-gradient(180deg, #ff5a6a, var(--cherry) 55%, var(--cherry-deep));box-shadow:0 7px 0 #5e0814, 0 12px 30px #d61f338c, 0 0 0 3px var(--gold-2) inset;text-shadow:0 2px #00000059;transition:transform var(--dur-fast), box-shadow var(--dur-fast), filter var(--dur-fast);border:none;padding:14px 0 16px;font-size:clamp(26px,5.4vh,40px)}.spin-btn:not(:disabled):hover{filter:brightness(1.08)}.spin-btn:not(:disabled):active{box-shadow:0 2px 0 #5e0814, 0 6px 16px #d61f3380, 0 0 0 3px var(--gold-2) inset;transform:translateY(5px)}.spin-btn:not(:disabled){animation:1.8s ease-in-out infinite breathe}.spin-btn:disabled{cursor:default;filter:grayscale(.55)brightness(.75)}.overlay{z-index:5;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade var(--dur-normal) ease-out;background:#0c031ab8;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.overlay[hidden]{display:none}.overlay-soft{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(#0c031a26,#0c031ac7 70%);align-items:end;padding-bottom:9%}.card{border-radius:var(--radius-card);text-align:center;background:radial-gradient(120% 80% at 50% 0%, #ffc93a29, transparent 60%), linear-gradient(180deg, var(--night-2), var(--night-1));width:min(100%,340px);box-shadow:var(--shadow-pop);animation:pop var(--dur-normal) var(--ease-pop);padding:26px 22px 22px;position:relative}.card-intro{box-shadow:none;background:0 0}.card-title{font-family:var(--font-display);color:var(--gold-2);text-shadow:0 3px #0006;margin:0 0 8px;font-size:30px;font-weight:400}.logo-title{font-family:var(--font-display);white-space:nowrap;background:linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3));color:#0000;filter:drop-shadow(0 4px #5e0814e6);-webkit-background-clip:text;background-clip:text;margin:0 0 6px;font-size:clamp(34px,6.2vh,50px);font-weight:400;line-height:1.05}.card-text{color:var(--cream);margin:0 0 14px;font-size:15px;line-height:1.5}.note{color:var(--muted);margin:14px 0 16px;font-size:13px}.countdown{font-family:var(--font-display);color:var(--gold-2);font-variant-numeric:tabular-nums;margin:0 0 16px;font-size:26px}.gate-progress{margin:0 0 8px;font-weight:600}.meter{border-radius:var(--radius-pill);background:#ffffff1f;height:10px;margin-bottom:18px;overflow:hidden}.meter span{background:linear-gradient(90deg, var(--gold-3), var(--gold-2));width:0;height:100%;transition:width var(--dur-normal) ease-out;display:block}.row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.btn{border-radius:var(--radius-pill);color:var(--ink);background:linear-gradient(180deg, var(--gold-1), var(--gold-2));box-shadow:0 4px 0 var(--gold-3);transition:transform var(--dur-fast), box-shadow var(--dur-fast);border:none;padding:11px 20px;font-size:15px;font-weight:600}.btn:hover{filter:brightness(1.05)}.btn:active{box-shadow:0 1px 0 var(--gold-3);transform:translateY(3px)}.btn-ghost{color:var(--cream);background:#ffffff14;box-shadow:inset 0 0 0 1px #ffdc8c66}.btn-ghost:active{box-shadow:inset 0 0 0 1px #ffdc8c66}.btn-big{font-family:var(--font-display);letter-spacing:.04em;padding:12px 54px 14px;font-size:26px;font-weight:400}.result-amount{font-family:var(--font-display);background:linear-gradient(180deg, var(--gold-1), var(--gold-2) 55%, var(--gold-3));color:#0000;filter:drop-shadow(0 4px #5e0814e6);-webkit-background-clip:text;background-clip:text;margin:4px 0 6px;font-size:64px;line-height:1}.result-amount:empty{display:none}.burst{background:conic-gradient(from 0deg, transparent 0 8deg, #ffc93a2e 8deg 16deg, transparent 16deg 30deg);pointer-events:none;height:160px;animation:12s linear infinite spin;display:none;position:absolute;inset:-40px -20px auto;-webkit-mask:radial-gradient(circle,#000 20%,#0000 70%);mask:radial-gradient(circle,#000 20%,#0000 70%)}.card-result.is-win .burst{display:block}@keyframes pop{0%{opacity:0;transform:scale(.85)}}@keyframes fade{0%{opacity:0}}@keyframes breathe{50%{transform:scale(1.03)}}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (max-width:420px){.hud-top{padding:12px 10px 0}.hud-left,.hud-right{gap:5px}.chip{padding:6px 9px;font-size:12px}}@media (max-width:640px){.app{padding:0;display:block}.frame{aspect-ratio:auto;width:100vw;height:100dvh;box-shadow:none;border-radius:0}}