: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)}.haptics-cta{position:relative;z-index:2;display:flex;animation:cta-in .35s ease both;align-items: center;gap:6px}.haptics-cta[hidden]{display:none}.haptics-cta__enable,.haptics-cta__dismiss{font:inherit;color:var(--ink);cursor:pointer;backdrop-filter:blur(6px);user-select:none;background:#140e2099;border:1px solid #a974ff73;transition:border-color .25s,background .25s,color .25s}.haptics-cta__enable{letter-spacing:.04em;border-radius:999px;padding:8px 16px;font-size:clamp(12px,2.2vmin,14px)}.haptics-cta__enable:before{content:"✦";color:var(--accent-2);margin-right:7px}.haptics-cta__dismiss{display:grid;color:var(--muted);border-radius:999px;place-items: center;width:30px;height:30px;padding:0;font-size:18px;line-height:1}.haptics-cta__enable:hover{background:#1c142cb3;border-color:#a974ffe6}.haptics-cta__dismiss:hover{color:var(--ink);border-color:#a974ffe6}.haptics-cta__enable:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}.haptics-cta__dismiss:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}@keyframes cta-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.help-btn{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:5;display:grid;font:inherit;color:var(--ink);cursor:pointer;backdrop-filter:blur(6px);user-select:none;background:#140e2099;border:1px solid #a974ff73;border-radius:999px;place-items: center;width:38px;height:38px;transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .25s,background .25s;font-size:19px;font-weight:600}.help-btn:hover{background:#1c142cb3;border-color:#a974ffe6;transform:translateY(-1px)}.help-btn:active{transform:translateY(1px)scale(.97)}.help-btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}.help-dialog{color:var(--ink);animation:cta-in .3s ease both;background:linear-gradient(#a974ff1a,#5a2db00f),#140e20f0;border:1px solid #a974ff8c;border-radius:16px;max-width:min(92vw,420px);margin:auto;padding:clamp(20px,4.5vmin,30px);box-shadow:0 20px 60px -16px #783cdc99,inset 0 1px #ffffff1a}.help-dialog::backdrop{backdrop-filter:blur(3px);background:#06040c9e}.help-dialog__title{letter-spacing:.01em;margin:0 0 14px;font-size:clamp(17px,3.4vmin,20px)}.help-dialog__body{color:var(--muted);margin:0 0 18px;font-size:clamp(13px,2.4vmin,15px);line-height:1.55}.help-dialog__body p{margin:0 0 12px}.help-dialog__body p:last-child{margin-bottom:0}.help-dialog__body b{color:var(--ink)}.help-dialog form{margin:0}.help-dialog__close{font:inherit;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);cursor:pointer;user-select:none;background:linear-gradient(#a974ff38,#5a2db029),#140e20b3;border:1px solid #a974ff8c;border-radius:999px;padding:10px 26px;transition:border-color .25s,background .25s;font-size:clamp(12px,2.2vmin,14px);font-weight:600}.help-dialog__close:hover{border-color:#a974ffe6}.help-dialog__close:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}.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}.haptics-cta,.help-dialog{animation:none}.help-btn{transition:border-color .25s,background .25s}}