:root{--ink:#2b1a0e;--paper:#fff6e3;--red:#d7261e;--orange:#f57c1f;--green:#3f9b35;--gold:#ffd54a;font-family:"Baloo 2",Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100dvh;color:var(--paper);-webkit-user-select:none;user-select:none;background:#1b1410;margin:0;position:fixed;inset:0;overflow:hidden}#app{position:fixed;inset:0}#webcam{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .6s;position:absolute;inset:0;transform:scaleX(-1)}body.camera #webcam{opacity:.55}body.camera.shadow #webcam{opacity:0}#backdrop{background:radial-gradient(circle at 78% 22%,#ffbe5ae6 0 7%,#ffa03c00 18%),repeating-linear-gradient(90deg,#0000001f 0 2px,#0000 2px 120px),linear-gradient(#f6c177 0%,#d9824a 45%,#7a3f22 70%,#3d2014 100%);transition:opacity .6s;position:absolute;inset:0}body.camera.shadow #backdrop{background:radial-gradient(circle at 78% 22%,#ffbe5ae6 0 7%,#ffa03c00 18%),repeating-linear-gradient(90deg,#0000001a 0 2px,#0000 2px 120px),linear-gradient(#f6c177 0%,#e8a263 50%,#c9804f 80%,#a8643c 100%)}body.camera:not(.shadow) #backdrop{opacity:.35;background:radial-gradient(#0000 40%,#000000bf 100%),linear-gradient(#ffaa5040,#3c140a80)}#shadow{opacity:.55;filter:blur(3px);pointer-events:none;width:100%;height:100%;position:absolute;inset:0}#stage{touch-action:none;position:absolute;inset:0}#stage canvas{touch-action:none;width:100%;height:100%;display:block}#fx-overlay{pointer-events:none;transition:box-shadow .4s,background .4s;position:absolute;inset:0}body.fx-slowmo #fx-overlay{background:#78d2ff2e;box-shadow:inset 0 0 120px #a0e6ffe6}body.fx-frenzy #fx-overlay{animation:.8s linear infinite rainbow}body.fx-double #fx-overlay{box-shadow:inset 0 0 90px #ff3d8bcc}@keyframes rainbow{0%{box-shadow:inset 0 0 100px #ff4f4f}33%{box-shadow:inset 0 0 100px #4fff7a}66%{box-shadow:inset 0 0 100px #4fa3ff}to{box-shadow:inset 0 0 100px #ff4f4f}}.hidden{display:none!important}#btn-pause{right:max(20px, env(safe-area-inset-right));bottom:max(20px, env(safe-area-inset-bottom));border:4px solid var(--paper);width:64px;height:64px;color:var(--paper);cursor:pointer;z-index:5;background:#2b1a0eb3;border-radius:50%;font-size:28px;position:absolute}#btn-pause:hover{background:#2b1a0ef2}#framing{pointer-events:none;position:absolute;inset:0}.framing-card{bottom:max(3vh, env(safe-area-inset-bottom));text-align:center;border:4px solid var(--paper);width:min(92vw,820px);padding:max(10px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));background:#2b1a0ebf;border-radius:28px;position:absolute;left:50%;transform:translate(-50%)}#framing-text{color:var(--gold);text-shadow:0 3px 0 var(--ink);margin:0 0 10px;font-size:clamp(28px,4.2vw,48px);font-weight:800;line-height:1.1}#framing.done #framing-text{color:#b8f5a8}#framing-checks{flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none;display:flex}#framing-checks li{opacity:.55;border:3px solid #fff6e366;border-radius:999px;padding:4px 14px;font-size:20px;font-weight:800;transition:background .2s,opacity .2s}#framing-checks li.ok{opacity:1;border-color:var(--paper);background:var(--green)}#btn-framing-skip{left:max(20px, env(safe-area-inset-left));top:max(20px, env(safe-area-inset-top));pointer-events:auto;min-width:0;padding:10px 28px;font-size:22px;position:absolute}#paused{z-index:6;background:#1b1410b3}#hud{padding:max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));pointer-events:none;justify-content:space-between;align-items:flex-start;gap:16px;display:flex;position:absolute;inset:0 0 auto}#score-box{text-shadow:0 4px 0 var(--ink), 0 0 12px #00000080;align-items:center;gap:8px;min-width:160px;font-size:56px;font-weight:800;line-height:1;display:flex}#score.bump{animation:.25s ease-out bump}@keyframes bump{50%{color:var(--gold);transform:scale(1.3)}}#progress-box{text-align:center;flex:1;max-width:520px}#stage-label{text-shadow:0 3px 0 var(--ink);font-size:30px;font-weight:800}#progress{border:4px solid var(--paper);background:#2b1a0eb3;border-radius:20px;height:34px;position:relative;overflow:hidden}#progress-fill{background:linear-gradient(90deg, var(--green), #8bd35a);width:0;height:100%;transition:width .25s}#progress-text{text-shadow:0 2px 0 var(--ink);place-items:center;font-size:20px;font-weight:800;display:grid;position:absolute;inset:0}#effects{flex-direction:column;align-items:flex-end;gap:8px;min-width:160px;display:flex}.badge{background:#2b1a0eb3;border-radius:16px;align-items:center;gap:8px;padding:4px 12px;font-size:36px;display:flex}.badge-bar{background:#ffffff40;border-radius:6px;width:90px;height:12px;overflow:hidden}.badge-bar div{background:var(--gold);height:100%}#pop-layer{pointer-events:none;position:absolute;inset:0;overflow:hidden}.pop{color:#fff;text-shadow:0 4px 0 var(--ink), 0 0 10px #0009;white-space:nowrap;font-size:44px;font-weight:800;animation:1.1s ease-out forwards pop;position:absolute;transform:translate(-50%,-50%)}.pop.praise{color:#fffbd0;font-size:38px}.pop.gold{color:var(--gold);font-size:60px}.pop.combo{color:#7df9ff;font-size:58px}.pop.oops{color:#b6ff6a;font-size:60px}.pop.banner{font-size:72px;animation-duration:1.6s}.banner-slowmo{color:#bff3ff}.banner-frenzy{color:#ff9cf0}.banner-double{color:#ff6fae}.banner-boss{color:#ffb347;font-size:84px}body.boss-stage #progress-fill{background:linear-gradient(90deg,#e8741c,#ffd54a)}@keyframes pop{0%{opacity:0;transform:translate(-50%,-30%)scale(.5)}15%{opacity:1;transform:translate(-50%,-50%)scale(1.15)}30%{transform:translate(-50%,-55%)scale(1)}to{opacity:0;transform:translate(-50%,-140%)scale(1)}}#toast{bottom:max(22vh, env(safe-area-inset-bottom));border:4px solid var(--paper);pointer-events:none;background:#2b1a0ed9;border-radius:24px;padding:12px 28px;font-size:32px;font-weight:800;position:absolute;left:50%;transform:translate(-50%)}#join-hint{bottom:max(20px, env(safe-area-inset-bottom));border:3px solid var(--paper);text-align:center;pointer-events:none;background:#2b1a0ebf;border-radius:18px;padding:6px 18px 10px;font-size:22px;font-weight:800;position:absolute;left:50%;transform:translate(-50%)}.join-bar{background:#ffffff40;border-radius:4px;height:8px;margin-top:4px;overflow:hidden}#join-fill{background:var(--gold);width:0;height:100%;transition:width .1s linear}.logo{color:var(--gold);text-shadow:0 6px 0 var(--red), 0 12px 0 var(--ink), 0 0 30px #0006;letter-spacing:1px;margin:0;font-size:clamp(48px,9vw,110px);font-weight:800;line-height:.95}.logo span{color:#fff;text-shadow:0 6px 0 var(--green), 0 12px 0 var(--ink), 0 0 30px #0006;display:block}#menu-hint{top:max(5vh, env(safe-area-inset-top));text-align:center;pointer-events:none;width:100%;position:absolute}.hint{text-shadow:0 3px 0 var(--ink);margin:10px 0 0;font-size:30px;font-weight:800}#menu-hint .hint{bottom:max(8vh, env(safe-area-inset-bottom));width:100%;animation:1.4s ease-in-out infinite breathe;position:fixed}@keyframes breathe{50%{transform:scale(1.08)}}.screen{padding:max(0px, env(safe-area-inset-top)) max(0px, env(safe-area-inset-right)) max(0px, env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left));background:#1b141059;place-items:center;display:grid;position:absolute;inset:0}.card{text-align:center;max-width:720px;padding:32px 40px}.tagline{text-shadow:0 2px 0 var(--ink);margin:24px 0;font-size:28px;font-weight:600}.buttons{flex-direction:column;align-items:center;gap:16px;display:flex}button.big{font:inherit;color:#fff;background:var(--red);cursor:pointer;border:none;border-radius:999px;min-width:420px;min-height:44px;padding:14px 40px;font-size:32px;font-weight:800;transition:transform .1s;box-shadow:0 8px #7d140f}button.big.alt{background:var(--green);font-size:24px;box-shadow:0 8px #1f5a19}button.big:hover{transform:translateY(-2px)}button.big:active{box-shadow:none;transform:translateY(6px)}.options{justify-content:center;gap:24px;margin-top:24px;font-size:20px;font-weight:600;display:flex}.options input{vertical-align:middle;width:20px;height:20px}.options label{cursor:pointer;align-items:center;gap:4px;min-height:44px;display:inline-flex}#start-screen{overscroll-behavior:contain;touch-action:pan-y;align-items:safe center;overflow-y:auto}@media (height<=800px){#start-screen .card{padding-block:16px}#start-screen .logo{font-size:clamp(40px,7vw,78px)}}.camera-pick{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 12px;margin-top:18px;font-size:20px;font-weight:600;display:flex}.camera-pick select{font:inherit;border:3px solid var(--paper);max-width:min(420px,80vw);color:var(--paper);cursor:pointer;background:#2b1a0ed9;border-radius:12px;min-height:44px;padding:4px 10px;font-size:18px}.camera-pick small{opacity:.8;flex-basis:100%;font-size:15px}.fine{opacity:.85;font-size:16px}.error{color:#ffb4a8;font-size:20px;font-weight:800}#loading-text{text-shadow:0 2px 0 var(--ink);font-size:28px;font-weight:800}#loading-text .diag{color:var(--gold)}#loading-text small{margin-top:12px;font-size:18px;font-weight:600;display:block}.spinner{font-size:90px;animation:1.2s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#stage-clear h2,#paused h2{color:var(--gold);text-shadow:0 6px 0 var(--ink);margin:0;font-size:80px}#clear-stars span{filter:grayscale()brightness(.5);font-size:110px;display:inline-block;transform:scale(.6)}#clear-stars span.on{animation:.5s ease-out forwards star-in}@keyframes star-in{0%{filter:none;transform:scale(0)rotate(-90deg)}70%{filter:none;transform:scale(1.3)rotate(10deg)}to{filter:none;transform:scale(1)rotate(0)}}#clear-score{text-shadow:0 3px 0 var(--ink);margin:8px 0;font-size:40px;font-weight:800}.levels{justify-content:center;gap:16px;margin-top:24px;display:flex}.levels input{display:none}.levels span{cursor:pointer;background:#2b1a0e80;border:4px solid #fff6e366;border-radius:18px;min-height:44px;padding:8px 20px;font-size:22px;font-weight:800;display:block}.levels small{opacity:.8;font-size:15px;font-weight:600;display:block}.levels input:checked+span{border-color:var(--gold);background:#2b1a0ed9}#trophy{top:max(3vh, env(safe-area-inset-top));text-align:center;pointer-events:none;width:100%;position:absolute}#trophy h2{color:var(--gold);text-shadow:0 5px 0 var(--ink);margin:0;font-size:64px}.trophy-big{font-size:110px;line-height:1;animation:1.4s ease-in-out infinite breathe}#trophy-count{min-height:1em;font-size:40px}#trophy .hint{bottom:max(8vh, env(safe-area-inset-bottom));width:100%;animation:1.4s ease-in-out infinite breathe;position:fixed}@media (width<=700px){button.big{width:100%;min-width:0;font-size:24px}#score-box{min-width:0;font-size:36px}.options{flex-wrap:wrap}}