:root{color-scheme:dark;--bg:#293236;--ink:#f3f5ee;--muted:#adb8b7;--green:#d2ed9d;--coral:#efb09a;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#242c30}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}button:disabled{opacity:.35;cursor:default}button:focus-visible{outline:2px solid var(--green);outline-offset:5px}[hidden]{display:none!important}#app{position:relative;width:100%;max-width:520px;height:100%;height:100dvh;min-height:400px;margin:0 auto;background:var(--bg);overflow:hidden;isolation:isolate}#game{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none}#hud{position:absolute;top:calc(var(--safe-top) + 18px);left:24px;right:17px;height:44px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;font-variant-numeric:tabular-nums;z-index:2}.players{display:flex;gap:9px;align-items:center}.player{display:flex;gap:8px;align-items:center;opacity:.44;font-size:17px;font-weight:500;padding:8px 0}.player-label{font-size:11px;font-weight:500;letter-spacing:.3px}.player.active{opacity:1}.player:first-child{color:var(--green)}.player:last-child{color:var(--coral)}.player b{font-size:19px;font-weight:550}.score-divider{font-size:15px;color:#869394}#frog-count{position:absolute;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);letter-spacing:.6px}#pause{pointer-events:auto;padding:12px 4px 12px 12px;font-size:12px;color:var(--muted)}.bottom-sheet{position:absolute;left:30px;right:30px;bottom:calc(var(--safe-bottom) + 29px);text-align:center;z-index:3}.bottom-sheet h1,.bottom-sheet h2{font-size:29px;line-height:1.15;letter-spacing:-.8px;font-weight:550;margin:0 0 10px}.bottom-sheet p{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 25px}.bottom-sheet small{display:block;font-size:11px;color:var(--muted);margin-top:17px}.primary{display:block;background:var(--green);color:#233224;width:100%;min-height:54px;border-radius:11px;font-size:16px;font-weight:550;padding:15px 20px;transition:background .12s,transform .12s}.primary:active{transform:scale(.985);background:#bedc88}#handoff,#result{left:30px;right:30px;bottom:calc(var(--safe-bottom) + 35px)}#handoff h2{color:var(--green)}#app[data-player="1"] #handoff h2{color:var(--coral)}.turn{position:absolute;left:0;right:0;bottom:calc(var(--safe-bottom) + 15px);height:211px;text-align:center;pointer-events:none;z-index:2}.turn p{margin:0}#turn-player{font-size:15px;font-weight:550;line-height:24px;color:var(--green)}#app[data-player="1"] #turn-player{color:var(--coral)}#cue{font-size:13px;color:var(--muted);line-height:22px;margin-top:3px}#frog-grab{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);width:130px;height:121px;padding:0;pointer-events:auto;touch-action:none;border-radius:50%}#frog-grab:active{background:#ffffff03}.grab-line{position:absolute;left:41%;right:41%;bottom:4px;height:3px;background:#9cad9e;border-radius:3px;opacity:.6}#tilt-note{position:absolute;bottom:0;left:0;right:0;font-size:10px;color:#93a2a1;letter-spacing:.1px}#app[data-phase="dragging"] .grab-line,#app[data-phase="settling"] .grab-line{opacity:0}#app[data-phase="settling"] #frog-grab{pointer-events:none}#cup-targets{position:absolute;inset:0;pointer-events:none;z-index:1}.cup-target{position:absolute;width:36px;height:36px;transform:translate(-50%,-50%);border-radius:50%;opacity:0;pointer-events:none;font-size:10px}.cup-target:focus-visible{opacity:1;background:#d2ed9d;color:#26342a;outline:2px solid #f4f8ec;outline-offset:3px}dialog{background:#333e42;color:var(--ink);border:0;border-radius:16px;padding:27px;width:calc(100% - 48px);max-width:420px;max-height:calc(100dvh - 60px);overflow:auto}dialog::backdrop{background:#131c20b8}dialog h2{font-size:23px;font-weight:550;letter-spacing:-.4px;margin:0 0 22px}dialog button{display:block;width:100%;min-height:49px;text-align:center;font-size:14px}dialog .primary{font-size:15px;margin-bottom:8px}dialog p{font-size:12px;line-height:1.65;color:var(--muted);margin:23px 0 0}.loading{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;z-index:8;font-size:13px;color:var(--muted);padding:40px;text-align:center}.loading h2{color:var(--ink);font-size:22px;font-weight:500;margin:0}.loading p{font-size:13px;line-height:1.6;margin:0;max-width:290px}.loading button{max-width:240px;margin-top:8px}.notice{position:absolute;bottom:calc(var(--safe-bottom) + 242px);left:25px;right:25px;text-align:center;font-size:12px;color:#e3e8de;opacity:0;pointer-events:none;z-index:5;transition:opacity .15s}#notice.visible{opacity:1}#app[data-phase="welcome"] #hud{display:none}#app[data-phase="calibrating"] #frog-grab{pointer-events:none}#app[data-phase="paused"] #turn{visibility:hidden}
@media(max-height:710px){.turn{height:182px;bottom:calc(var(--safe-bottom) + 10px)}#frog-grab{width:112px;height:101px;bottom:21px}.bottom-sheet{bottom:calc(var(--safe-bottom) + 20px)}.bottom-sheet h1,.bottom-sheet h2{font-size:26px}.bottom-sheet p{margin-bottom:20px;font-size:13px}.bottom-sheet small{margin-top:12px}#hud{top:calc(var(--safe-top) + 10px)}.notice{bottom:calc(var(--safe-bottom) + 202px)}}
@media(max-width:360px){#hud{left:19px;right:15px}.bottom-sheet{left:24px;right:24px}.bottom-sheet h1,.bottom-sheet h2{font-size:26px}.primary{min-height:51px;font-size:15px}.turn{height:183px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#rotate-notice{display:none;position:absolute;inset:0;z-index:20;background:var(--bg);align-items:center;justify-content:center;font-size:17px;padding:30px;text-align:center}
@media(orientation:landscape) and (max-height:520px){#rotate-notice{display:flex}}