:root{--u: clamp(11px, 2.3vmin, 18px);--panel: rgba(18, 22, 30, .82);--accent: #ffb020}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#5c6675}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#game{position:fixed;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}[hidden]{display:none!important}#hud{position:fixed;top:max(10px,env(safe-area-inset-top));left:72px;right:110px;display:flex;justify-content:center;pointer-events:none}.sides{display:flex;align-items:center;gap:calc(var(--u) * .6);padding:calc(var(--u) * .3) calc(var(--u) * .7);background:var(--panel);border-radius:999px;box-shadow:0 4px 14px #00000040;max-width:100%}.side{display:flex;align-items:center;gap:.4em;padding:.2em .7em;border-radius:999px;font-size:var(--u);opacity:.6;transition:opacity .2s,background .2s;min-width:0}.side.active{opacity:1;background:#ffffff1f;box-shadow:inset 0 0 0 2px var(--accent)}.side .group{font-size:.85em;opacity:.85;white-space:nowrap}.balls{display:flex;gap:2px}.mini{width:.8em;height:.8em;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px #00000059}.mini.stripe{background:linear-gradient(#f6f3ea 0 25%,var(--c) 25% 75%,#f6f3ea 75%)}.mini.gone{opacity:.2}.turn{font-size:calc(var(--u) * .85);font-weight:700;color:var(--accent);white-space:nowrap}@media(max-width:640px){#hud{left:8px;right:8px;top:calc(max(10px,env(safe-area-inset-top)) + 52px)}.side .group{display:none}}.corner{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));display:flex;gap:8px}.round{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.45);background:var(--panel);font-size:20px;line-height:1}.power{position:fixed;left:max(14px,env(safe-area-inset-left));top:50%;transform:translateY(-50%);width:14px;height:40vh;background:var(--panel);border-radius:999px;overflow:hidden;border:2px solid rgba(255,255,255,.4)}#power-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(#ff5a3c,#ffb020 50%,#6ee08a);border-radius:999px}.fine{position:fixed;left:calc(50% - 40px);bottom:max(12px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:6px 14px;background:var(--panel);border-radius:999px;font-size:22px;touch-action:none;cursor:ew-resize}.fine .track{width:min(46vw,260px);height:26px;border-radius:999px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 2px,transparent 2px 12px);position:relative;overflow:hidden}#fine-thumb{position:absolute;left:50%;top:3px;width:6px;height:20px;margin-left:-3px;border-radius:3px;background:var(--accent)}.spin-box{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));display:grid;justify-items:center;gap:4px;padding:8px 8px 6px;background:var(--panel);border-radius:16px;width:112px}.spin{position:relative;width:clamp(64px,11vmin,88px);aspect-ratio:1;border-radius:50%;cursor:crosshair;background:radial-gradient(circle at 35% 30%,#fff,#e6e1d3 60%,#b9b3a3);box-shadow:0 0 0 3px #00000059,0 4px 12px #0000004d;touch-action:none}.spin .cross{position:absolute;top:12%;right:12%;bottom:12%;left:12%;border-radius:50%;pointer-events:none;background:linear-gradient(#0000002e,#0000002e) center / 1px 100% no-repeat,linear-gradient(90deg,#0000002e,#0000002e) center / 100% 1px no-repeat}#spin-dot{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#d23a3a;box-shadow:0 0 0 2px #fff;pointer-events:none}.spin-label{font-size:11px;line-height:1.2;text-align:center;min-height:2.4em;opacity:.9}.elev{display:grid;justify-items:center;gap:2px;font-size:10px;opacity:.85}.elev input{width:92px;accent-color:var(--accent)}.hint{position:fixed;left:50%;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 54px);transform:translate(-50%);padding:.45em 1em;background:var(--panel);border-radius:999px;font-size:calc(var(--u) * .9);white-space:nowrap;pointer-events:none;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}.flash{position:fixed;left:50%;top:30%;transform:translate(-50%,-50%);padding:.35em .9em;border-radius:14px;background:var(--panel);font-size:calc(var(--u) * 1.4);font-weight:800;pointer-events:none;white-space:nowrap}.flash.bad{color:#ff8a7a}.flash.pop{animation:pop 1.6s ease-out forwards}@keyframes pop{0%{opacity:0;transform:translate(-50%,-40%) scale(.9)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}to{opacity:0}}.paused{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0a0e1673;font-size:calc(var(--u) * 2);font-weight:700}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:72px 16px 16px;background:#12161e59}.card{width:min(560px,100%);max-height:100%;overflow:auto;padding:calc(var(--u) * 1.4);text-align:center;background:var(--panel);border-radius:calc(var(--u) * 1.3);box-shadow:0 10px 40px #00000059}h1,h2{margin:0;font-size:calc(var(--u) * 2.4);letter-spacing:-.02em}.sub{margin:.4em 0 1.1em;opacity:.8;font-size:calc(var(--u) * 1.05)}.choices{display:flex;gap:calc(var(--u) * .7);justify-content:center;flex-wrap:wrap}.choices button{flex:1 1 0;min-width:120px;min-height:52px;padding:.7em .9em;border:0;border-radius:calc(var(--u) * .9);background:#fff;color:#1d2433;display:grid;gap:.15em;box-shadow:0 4px #00000040;transition:transform .1s}.choices button b{font-size:calc(var(--u) * 1.25)}.choices button small{font-size:calc(var(--u) * .8);opacity:.7}.choices button:hover{transform:translateY(-2px)}.choices button.last{outline:3px solid var(--accent);outline-offset:2px}.how{margin:1.2em 0 0;font-size:calc(var(--u) * .85);line-height:1.45;opacity:.78}.fatal{position:fixed;top:0;right:0;bottom:0;left:0;margin:0;padding:16px;color:#fff;background:#222;white-space:pre-wrap}@media(max-width:640px){.fine{left:max(10px,env(safe-area-inset-left));transform:none;padding:6px 10px}.fine .track{width:calc(100vw - 230px)}.hint{top:calc(max(10px,env(safe-area-inset-top)) + 96px);bottom:auto}}
