:root{--glass: rgba(18, 12, 44, .55);--edge: rgba(255, 255, 255, .18);--ink: #f4f0ff;--hot: #ff5fd2;--cool: #5ffbf1;font-family:Segoe UI,system-ui,sans-serif;color:var(--ink)}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:#07041a;overscroll-behavior:none;user-select:none;-webkit-user-select:none}#stage{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none;display:block}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#hud>*{pointer-events:auto}button{font:inherit;color:inherit;cursor:pointer;border:0}#brand{position:absolute;top:calc(12px + env(safe-area-inset-top));left:16px;font-weight:700;letter-spacing:.22em;font-size:12px;pointer-events:none}#brand span{opacity:.5;font-weight:400;letter-spacing:.08em;margin-left:6px}#hint{position:absolute;top:calc(40px + env(safe-area-inset-top));left:16px;right:70px;font-size:14px;opacity:.8;pointer-events:none}#card,#result{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%);width:min(340px,calc(100vw - 32px));padding:18px 20px;border-radius:22px;background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);text-align:center}#card .swatch{width:46px;height:46px;border-radius:50%;margin:-42px auto 8px;border:2px solid var(--edge)}#card h2{margin:0;font-size:22px}#card .tag{margin:6px 0 2px;opacity:.8;font-style:italic}#card .odds{margin:0 0 14px;font-size:13px;color:var(--cool)}#back,#again{width:100%;padding:13px;border-radius:14px;font-weight:700;color:#14062e;background:linear-gradient(90deg,var(--hot),var(--cool))}#gate{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%);text-align:center}#gate .rail{width:68px;height:178px;margin:0 auto;padding:4px;border-radius:34px;background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}#gate .knob{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#14062e;background:linear-gradient(135deg,var(--hot),var(--cool));box-shadow:0 0 24px var(--hot);touch-action:none;cursor:grab}#gate .label{margin-top:8px;font-size:13px;opacity:.85}#strip{position:absolute;right:12px;top:calc(56px + env(safe-area-inset-top));width:32px;height:304px}.dot{position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;background:radial-gradient(circle at 30% 30%,#fff,var(--c) 45%,var(--c2));transition:transform .35s ease;outline:0 solid transparent}.dot.mine{box-shadow:0 0 0 3px #fff,0 0 14px #fff}.dot.following{outline:2px dashed var(--cool);outline-offset:5px}#cams{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:6px;padding:0 10px;flex-wrap:wrap}#cams button{padding:9px 13px;border-radius:999px;font-size:13px;background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#cams button.on{background:linear-gradient(90deg,var(--hot),var(--cool));color:#14062e;font-weight:700}#result{bottom:calc(66px + env(safe-area-inset-bottom))}#result .text{margin:0 0 12px;font-size:17px;font-weight:600}#result .replay{display:flex;gap:10px;align-items:center;margin-bottom:12px}#play{width:40px;height:40px;border-radius:50%;background:#ffffff24;flex:none}#scrub{flex:1;accent-color:var(--hot)}
