:root{--bg-0:#0a0710;--bg-1:#15101f;--accent:#a974ff;--accent-2:#6cf6e0;--accent-deep:#5a2db0;--ink:#f3eefb;--muted:#9b8fb5;--stage-w:min(96vw,1040px);--stage-h:min(64vh,680px)}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--ink);background:radial-gradient(120% 90% at 50% -10%,#1c1430 0%,var(--bg-1)38%,var(--bg-0)78%),var(--bg-0);display:flex;padding:max(18px,env(safe-area-inset-top))16px max(22px,env(safe-area-inset-bottom));overflow:hidden;-webkit-tap-highlight-color:transparent;flex-direction:column;justify-content:center;align-items: center;gap:clamp(14px,3vmin,30px);min-height:100dvh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}body:before{content:"";position:fixed;pointer-events:none;z-index:0;opacity:.85;animation:breathe 8s ease-in-out infinite;background:radial-gradient(70% 50% at 50% 64%,#a974ff1a,#0000 70%);inset:0}@keyframes breathe{0%,to{opacity:.55}50%{opacity:1}}body:after{content:"";position:fixed;pointer-events:none;z-index:0;inset:0;box-shadow:inset 0 0 220px 40px #000000a6}.title{position:relative;z-index:2;letter-spacing:.22em;text-transform:lowercase;color:var(--muted);text-shadow:0 0 22px #a974ff40;user-select:none;margin:0;padding-left:.22em;font-size:clamp(15px,3.4vmin,20px);font-weight:600}.title b{color:var(--ink);font-weight:700}.stage{position:relative;z-index:1;width:var(--stage-w);height:var(--stage-h);max-width:100%}.stage canvas{display:block;cursor:grab;touch-action:none;outline:none;filter:drop-shadow(0 18px 26px #00000073);border-radius:16px;width:100%;height:100%}.stage canvas:active{cursor:grabbing}.stage.spinning canvas{will-change:transform}.sparks{position:absolute;z-index:3;pointer-events:none;width:0;height:0;top:50%;left:50%}.spark{position:absolute;background:radial-gradient(circle at 50% 50%,#fff 0%,var(--accent)45%,#a974ff00 75%);will-change:transform,opacity;border-radius:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;top:0;left:0}.roll-btn{position:relative;z-index:2;font:inherit;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);cursor:pointer;backdrop-filter:blur(6px);user-select:none;background:linear-gradient(#a974ff38,#5a2db029),#140e20b3;border:1px solid #a974ff8c;border-radius:999px;padding:15px 42px;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .25s,background .25s;font-size:clamp(13px,2.5vmin,15px);font-weight:600;box-shadow:0 0 0 1px #0000004d,0 10px 30px -8px #783cdc8c,inset 0 1px #ffffff1f}.roll-btn:hover{border-color:#a974ffe6;transform:translateY(-1px);box-shadow:0 0 0 1px #0000004d,0 14px 38px -8px #8c50f0bf,inset 0 1px #ffffff2e}.roll-btn:active{transform:translateY(1px)scale(.985)}.roll-btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px}.stage canvas:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px}.hint{position:relative;z-index:2;letter-spacing:.04em;color:var(--muted);user-select:none;text-align:center;margin:0;font-size:clamp(12px,2.2vmin,14px)}.sr-only{position:absolute;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0}@media (prefers-reduced-motion:reduce){.roll-btn{transition:background .2s,border-color .2s}body:before{animation:none;opacity:.85}}