.oop-app{--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--ink:#23304a;--ink-soft:#5b6782;--card:rgba(255,255,255,0.94);--line:#d9e4f2;--teal:#2ec4b6;--teal-dark:#1c968a;--coral:#ff7a59;--coral-dark:#d65a3b;--sun:#ffd84d;position:fixed;inset:0;height:100dvh;overflow:hidden;background:#bfe3ff;color:var(--ink);font-family:Avenir Next,Nunito,Segoe UI,system-ui,sans-serif;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.oop-app [hidden]{display:none!important}.oop-app button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}.oop-app kbd{display:inline-block;min-width:20px;padding:1px 6px;border-radius:6px;border:solid #c4d1e4;border-width:1px 1px 2px;background:#fff;font:700 12px/1.4 ui-monospace,Menlo,monospace;color:var(--ink);text-align:center}.oop-scene{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}.oop-zone{position:absolute;left:0;bottom:0;width:62%;height:72%;z-index:5;display:none;touch-action:none}.oop-app[data-touch="1"][data-phase=play] .oop-zone{display:block}.oop-stick{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.28);border:3px solid rgba(255,255,255,.75);opacity:0;pointer-events:none;transition:opacity .12s}.oop-stick.on{opacity:1}.oop-knob{position:absolute;left:32px;top:32px;width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:0 4px 10px rgba(35,48,74,.25)}.oop-touch{position:absolute;right:calc(var(--safe-r) + 14px);bottom:calc(var(--safe-b) + 16px);z-index:12;display:none;gap:12px;align-items:flex-end}.oop-app[data-touch="1"][data-phase=play] .oop-touch{display:flex}.oop-tbtn{width:76px;height:76px;border-radius:50%;border:3px solid #fff;display:grid;place-items:center;align-content:center;grid-gap:0;gap:0;font-size:12px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:#fff;touch-action:none;box-shadow:0 5px 0 rgba(35,48,74,.25)}.oop-tbtn span{line-height:1}.oop-tbtn-jump{width:88px;height:88px;background:var(--coral)}.oop-tbtn-lower{background:var(--teal);margin-bottom:40px}.oop-tbtn.down{transform:translateY(3px) scale(.96);box-shadow:0 2px 0 rgba(35,48,74,.25)}.oop-keys{position:absolute;left:calc(var(--safe-l) + 16px);bottom:calc(var(--safe-b) + 14px);z-index:6;display:none;gap:14px;flex-wrap:wrap;font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(35,48,74,.5)}.oop-app[data-phase=play][data-touch="0"] .oop-keys{display:flex}@media (hover:none),(pointer:coarse){.oop-keys{display:none!important}}.oop-topbar{position:absolute;z-index:30;top:calc(var(--safe-t) + 10px);left:calc(var(--safe-l) + 12px);right:calc(var(--safe-r) + 12px);display:flex;justify-content:space-between;align-items:center;pointer-events:none}.oop-topbar>*{pointer-events:auto}.oop-brand{font-weight:900;font-size:18px;color:#fff;text-shadow:0 2px 6px rgba(35,48,74,.45);letter-spacing:-.2px}.oop-app[data-phase=countdown] .oop-brand,.oop-app[data-phase=lost] .oop-brand,.oop-app[data-phase=play] .oop-brand{visibility:hidden}.oop-topbtns{display:flex;gap:8px}.oop-round{width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.86);display:grid;place-items:center;box-shadow:0 3px 0 rgba(35,48,74,.18)}.oop-round .off,.oop-round.muted .on{display:none}.oop-round.muted .off{display:inline}.oop-play-only{display:none!important}.oop-app[data-phase=countdown] .oop-play-only,.oop-app[data-phase=play] .oop-play-only{display:grid!important}.oop-hud{position:absolute;z-index:20;top:calc(var(--safe-t) + 10px);left:50%;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:6px;width:min(560px,calc(100vw - 140px));pointer-events:none}.oop-app[data-phase=countdown] .oop-hud,.oop-app[data-phase=lost] .oop-hud,.oop-app[data-phase=play] .oop-hud,.oop-stats{display:flex}.oop-stats{gap:4px;background:var(--card);border-radius:16px;padding:6px 10px;box-shadow:0 4px 0 rgba(35,48,74,.15)}.oop-stat{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:0 6px}.oop-stat+.oop-stat{border-left:1px solid var(--line)}.oop-stat-time{min-width:96px}.oop-label{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-soft)}.oop-stat output{font-size:20px;font-weight:900;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;line-height:1.1}.oop-progress{display:flex;align-items:center;gap:6px;width:100%;font-size:18px}.oop-progress-track{position:relative;flex:1 1;height:10px;border-radius:6px;background:rgba(255,255,255,.55);border:2px solid #fff;overflow:visible}.oop-progress-fill{position:absolute;inset:0;border-radius:6px;background:linear-gradient(90deg,var(--teal),var(--sun));transform-origin:left;transform:scaleX(0)}.oop-progress-pin{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--coral);border:3px solid #fff;left:0}.oop-step{display:none;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:900;background:var(--teal);color:#fff;box-shadow:0 3px 0 rgba(35,48,74,.18)}.oop-step[data-ok="0"]{background:var(--coral);animation:oop-wobble .4s infinite alternate}.oop-app[data-mode=online][data-phase=play] .oop-step{display:block}@keyframes oop-wobble{0%{transform:rotate(-3deg)}to{transform:rotate(3deg)}}.oop-hint{position:absolute;z-index:14;left:50%;bottom:calc(var(--safe-b) + 22px);transform:translateX(-50%);margin:0;max-width:min(560px,calc(100vw - 32px));text-align:center;font-size:16px;font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(35,48,74,.6);pointer-events:none}.oop-app[data-touch="1"] .oop-hint{bottom:auto;top:calc(var(--safe-t) + 150px)}.oop-app:not([data-phase=play]) .oop-hint,.oop-count{display:none}.oop-count{position:absolute;z-index:25;inset:0;place-items:center;font-size:clamp(90px,18vw,180px);font-weight:900;color:#fff;text-shadow:0 6px 0 var(--coral),0 10px 30px rgba(35,48,74,.4);pointer-events:none}.oop-app[data-phase=countdown] .oop-count{display:grid}.oop-count.pop{animation:oop-pop .9s ease-out}@keyframes oop-pop{0%{transform:scale(1.6);opacity:0}25%{transform:scale(1);opacity:1}to{transform:scale(.9);opacity:.85}}.oop-toast{position:absolute;z-index:26;left:50%;top:34%;transform:translate(-50%,-50%) scale(.6) rotate(-4deg);opacity:0;padding:10px 20px;border-radius:18px;background:var(--sun);color:var(--ink);font-size:clamp(22px,4vw,34px);font-weight:900;box-shadow:0 6px 0 rgba(35,48,74,.2);pointer-events:none;transition:transform .22s cubic-bezier(.3,1.6,.5,1),opacity .18s;white-space:nowrap}.oop-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}.oop-replay-tag{position:absolute;z-index:35;top:calc(var(--safe-t) + 62px);left:50%;transform:translateX(-50%);display:none;align-items:center;gap:10px;padding:6px 8px 6px 14px;border-radius:999px;background:rgba(20,24,40,.8);color:#fff;font-size:14px;white-space:nowrap}.oop-app[data-replay="1"] .oop-replay-tag{display:flex}.oop-rec-dot{width:10px;height:10px;border-radius:50%;background:#ff4d4d;animation:oop-blink 1s infinite}@keyframes oop-blink{50%{opacity:.2}}.oop-replay-tag .oop-chip{min-height:36px;background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.4)}.oop-app[data-replay="1"]:after,.oop-app[data-replay="1"]:before{content:"";position:absolute;left:0;right:0;height:6vh;background:#0d1020;z-index:3;pointer-events:none}.oop-app[data-replay="1"]:before{top:0}.oop-app[data-replay="1"]:after{bottom:0}.oop-sheet{position:absolute;z-index:40;top:calc(var(--safe-t) + 64px);left:calc(var(--safe-l) + 18px);max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 82px);width:min(420px,40vw);overflow-y:auto;overscroll-behavior:contain;padding:22px 22px 18px;background:var(--card);border:2px solid #fff;border-radius:24px;box-shadow:0 10px 0 rgba(35,48,74,.12),0 18px 40px rgba(35,48,74,.2);display:flex;flex-direction:column;align-items:stretch;gap:10px;animation:oop-in .22s ease-out;touch-action:pan-y;-moz-user-select:text;user-select:text;-webkit-user-select:text}@keyframes oop-in{0%{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}.oop-dialog{z-index:45;left:50%;top:50%;transform:translate(-50%,-50%);max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 40px);animation:none}.oop-sheet h2{margin:0;font-size:24px;font-weight:900;letter-spacing:-.3px}.oop-sheet h3{margin:6px 0 0;font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft)}.oop-sheet p{margin:0;line-height:1.45}.oop-primary,.oop-secondary{min-height:52px;border-radius:14px;font-size:17px;font-weight:900;padding:10px 18px}.oop-primary{border:2px solid var(--coral-dark);background:var(--coral);color:#fff;box-shadow:0 4px 0 var(--coral-dark)}.oop-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--coral-dark)}.oop-primary.on{background:var(--teal);border-color:var(--teal-dark);box-shadow:0 4px 0 var(--teal-dark)}.oop-secondary{border:2px solid var(--line);background:#fff;color:var(--ink);box-shadow:0 3px 0 var(--line)}.oop-secondary:disabled{opacity:.5}.oop-big{min-height:72px;font-size:26px;border-radius:18px}.oop-kbd{margin-left:8px;vertical-align:middle}.oop-app[data-touch="1"] .oop-kbd{display:none}.oop-link{border:0;background:none;text-decoration:underline;text-underline-offset:3px;font-size:15px;min-height:44px;color:var(--ink);display:inline-flex;align-items:center;gap:4px;justify-content:center}.oop-chip{min-height:44px;padding:6px 14px;border-radius:999px;border:2px solid var(--line);background:#fff;font-size:13px;font-weight:800}.oop-chip[aria-pressed=false]{opacity:.55;text-decoration:line-through}.oop-row{display:flex;justify-content:center;gap:14px}.oop-menu{align-items:center;text-align:center}.oop-hero,.oop-menu>.oop-primary,.oop-menu>.oop-secondary{width:100%}.oop-hero{height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px;margin-bottom:4px}.oop-menu-name{font-size:13px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--coral)}.oop-menu-title{margin:0;font-size:clamp(24px,2.6vw,32px);line-height:1.08;font-weight:900;letter-spacing:-.6px;text-wrap:balance}.oop-menu-intro{font-size:15px;color:var(--ink-soft)}.oop-best{font-size:14px;color:var(--ink-soft);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.oop-settings{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.oop-menu-foot{font-size:13px}.oop-menu-foot a{color:var(--ink-soft)}.oop-steps{margin:4px 0;padding-left:22px;display:grid;grid-gap:8px;gap:8px;line-height:1.45;font-size:15px}.oop-touch-note{font-size:14px;color:var(--ink-soft)}.oop-app[data-touch="0"] .oop-touch-note{display:none}.oop-code-label,.oop-sheet-blurb{color:var(--ink-soft)}.oop-code-label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;margin-top:6px}.oop-code-row{display:flex;gap:8px}.oop-code-input{flex:1 1;min-width:0;min-height:52px;border-radius:14px;border:2px solid var(--line);padding:0 14px;font:900 22px/1 ui-monospace,Menlo,monospace;letter-spacing:4px;text-transform:uppercase;color:var(--ink);background:#fff;-moz-user-select:text;user-select:text;-webkit-user-select:text}.oop-status{min-height:1.4em;font-size:14px;font-weight:700;color:var(--coral-dark)}.oop-lobby{align-items:center;text-align:center}.oop-lobby>.oop-primary{width:100%}.oop-lobby-code{font:900 40px/1 ui-monospace,Menlo,monospace;letter-spacing:8px;color:var(--ink);padding:6px 0}.oop-players{list-style:none;margin:4px 0;padding:0;width:100%;display:grid;grid-gap:8px;gap:8px}.oop-player{display:grid;grid-template-columns:14px auto 1fr;grid-template-rows:auto auto;grid-column-gap:10px;column-gap:10px;align-items:center;text-align:left;padding:10px 12px;border-radius:14px;background:#f3f7fc}.oop-player .oop-dot{grid-row:span 2;width:14px;height:14px;border-radius:50%;background:var(--teal)}.oop-player[data-seat="1"] .oop-dot{background:var(--coral)}.oop-player b{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft)}.oop-player>span:not(.oop-dot){grid-column:2/4;font-weight:800}.oop-player em{grid-row:1;grid-column:3;justify-self:end;font-style:normal;font-size:12px;font-weight:900;color:var(--ink-soft)}.oop-player.ready em{color:var(--teal-dark)}.oop-player.empty{opacity:.6}.oop-lose{align-items:center;text-align:center;left:50%;top:50%;transform:translate(-50%,-50%);animation:none;width:min(440px,calc(100vw - 32px))}.oop-lose-art{width:100%;max-width:280px;height:auto;border-radius:16px}.oop-lose-title{font-size:40px!important;color:var(--coral)}.oop-lose-text{font-size:17px;font-weight:700}.oop-lose-stats{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:14px;color:var(--ink-soft)}.oop-lose-stats b{color:var(--ink);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.oop-lose>.oop-primary{width:100%}.oop-lose-note{font-size:14px;color:var(--ink-soft)}.oop-results{align-items:center;text-align:center}.oop-r-art{width:100%;max-width:300px;height:auto;border-radius:16px}.oop-r-title{font-size:34px!important;color:var(--teal-dark)}.oop-r-label{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-soft)}.oop-r-time{font-size:clamp(44px,5vw,60px);font-weight:900;letter-spacing:-1px;line-height:1;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.oop-r-best{font-size:14px;color:var(--ink-soft)}.oop-new{color:var(--coral)}.oop-r-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:6px;gap:6px;width:100%}.oop-r-grid div{display:flex;flex-direction:column;padding:8px 4px;border-radius:12px;background:#f3f7fc}.oop-r-grid span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft)}.oop-r-grid b{font-size:22px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.oop-r-actions{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;width:100%}.oop-r-actions .oop-link,.oop-r-actions .oop-primary{grid-column:1/-1}.oop-share-note{min-height:1.3em;font-size:14px;font-weight:700;color:var(--teal-dark)}.oop-board-wrap{display:none;width:100%;text-align:left}.oop-board-wrap.show{display:block}.oop-app[data-recording="1"] #oop-clip-btn{opacity:.6;pointer-events:none}.oop-webgl-error{position:absolute;z-index:80;inset:auto 16px 40% 16px;text-align:center;font-weight:800;background:#fff;border-radius:16px;padding:18px}.oop-loading{position:absolute;inset:0;z-index:70;display:none;place-items:center;background:#bfe3ff;padding:20px}.oop-loading.show{display:grid}@media (max-aspect-ratio:4/5),(max-width:700px){.oop-sheet:not(.oop-dialog):not(.oop-lose){top:auto;left:0;right:0;bottom:0;width:auto;max-height:min(74dvh,680px);border-radius:24px 24px 0 0;padding:18px 16px calc(var(--safe-b) + 16px);animation:oop-up .22s ease-out}@keyframes oop-up{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}.oop-dialog,.oop-lose{width:calc(100vw - 24px)}.oop-hero{aspect-ratio:16/7}.oop-menu-intro{display:none}.oop-hud{width:calc(100vw - 24px);top:calc(var(--safe-t) + 60px)}.oop-app[data-phase=play] .oop-brand{display:none}.oop-stat{min-width:44px;padding:0 4px}.oop-stat-time{min-width:84px}.oop-stat output{font-size:17px}.oop-lose-art,.oop-r-art{max-width:200px}.oop-toast{top:40%}}@media (max-height:500px){.oop-sheet:not(.oop-dialog):not(.oop-lose){top:calc(var(--safe-t) + 8px);bottom:calc(var(--safe-b) + 8px);left:calc(var(--safe-l) + 10px);right:auto;width:min(400px,52vw);max-height:none;border-radius:20px}.oop-app:not([data-phase=play]):not([data-phase=countdown]) .oop-brand,.oop-hero,.oop-r-art{display:none}.oop-lose{max-height:calc(100dvh - 16px)}.oop-lose-art{display:none}.oop-big{min-height:56px;font-size:22px}.oop-hud{top:calc(var(--safe-t) + 6px);width:min(460px,calc(100vw - 260px))}.oop-stats{padding:3px 8px}.oop-app[data-touch="1"] .oop-hint{top:calc(var(--safe-t) + 70px)}.oop-tbtn{width:64px;height:64px}.oop-tbtn-jump{width:74px;height:74px}.oop-tbtn-lower{margin-bottom:26px}.oop-replay-tag{top:calc(var(--safe-t) + 8px)}}@media (prefers-reduced-motion:reduce){.oop-count.pop,.oop-sheet,.oop-step[data-ok="0"]{animation:none}}