:root{--bg-sky-top: #0a1a30;--bg-sky-mid: #1f3a5e;--bg-sky-bot: #2b568a;--paper: #fffaf0;--paper-soft: #f5ead0;--dark: #0f1e35;--dark-soft: #1d3855;--choco: #5a2510;--choco-light: #8a4220;--choco-shadow: #2b0e04;--choco-shine: #e5b083;--accent: #ffc955;--accent-2: #ff9c2d;--accent-dk: #a55a00;--good: #66c84b;--good-dk: #2e8a1c;--bad: #ff5a4d;--bad-dk: #b32a20;--shadow-soft: 0 2px 0 rgba(0,0,0,.2), 0 6px 14px rgba(0,0,0,.25);--shadow-press: 0 1px 0 rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.2);--scale: 1}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;color:var(--paper);font-family:Fredoka,ui-rounded,SF Pro Rounded,system-ui,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:radial-gradient(900px 600px at 30% 0%,#102545 0%,transparent 60%),linear-gradient(180deg,var(--bg-sky-top) 0%,var(--bg-sky-mid) 60%,var(--bg-sky-bot) 100%)}button{font-family:inherit;cursor:pointer}.app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}.stage{position:absolute;left:50%;top:50%;width:800px;height:600px;transform-origin:center center;transform:translate(-50%,-50%) scale(var(--scale));overflow:hidden;border-radius:14px;box-shadow:0 18px 50px #00000073;background:var(--dark)}.stage__bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.topbar{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:center;gap:10px;z-index:8;height:42px}.topbar__title{flex:1;text-align:center;font-size:22px;font-weight:700;color:var(--paper);text-shadow:0 2px 0 rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.45);letter-spacing:.5px;margin:0}.icon-btn{width:42px;height:42px;border-radius:999px;border:2.5px solid rgba(255,255,255,.45);background:#0006;color:var(--paper);font-size:18px;display:grid;place-items:center;box-shadow:var(--shadow-soft);padding:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.icon-btn:active{transform:translateY(2px);box-shadow:var(--shadow-press)}.icon-btn--small{width:38px;height:38px;font-size:16px}.hud{position:absolute;top:56px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:7;height:44px}.hud[hidden]{display:none}.pill{background:#fffffff2;border:2.5px solid var(--dark);border-radius:999px;padding:4px 14px 5px;display:flex;flex-direction:column;align-items:center;line-height:1;box-shadow:var(--shadow-soft);min-width:96px;height:44px;justify-content:center}.pill__label{font-size:9px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;color:var(--dark-soft)}.pill__value{font-size:20px;font-weight:700;color:var(--dark);font-variant-numeric:tabular-nums;margin-top:2px}.pill.bump .pill__value{animation:scoreBump .45s ease-out;display:inline-block}@keyframes scoreBump{0%{transform:scale(1)}40%{transform:scale(1.25);color:var(--good-dk)}to{transform:scale(1)}}.pill--lives{background:#fffffff2;border:2.5px solid var(--dark);border-radius:999px;padding:0 14px;display:flex;align-items:center;gap:7px;box-shadow:var(--shadow-soft);height:44px;flex-wrap:nowrap;min-width:110px;max-width:none}.life-dot{width:22px;height:20px;background:linear-gradient(180deg,#ff5a6b,#e6354a);clip-path:path("M12 21 L1.5 10 C-0.5 7.5 0.5 3 4 1.5 C7 0 10 2 12 4 C14 2 17 0 20 1.5 C23.5 3 24.5 7.5 22.5 10 Z");filter:drop-shadow(0 1px 0 #a02230);transition:opacity .25s,transform .2s,filter .2s;flex-shrink:0}.life-dot.lost{background:#c8bca0;filter:grayscale(1) brightness(.9);opacity:.4;transform:scale(.85)}.catch-zone{position:absolute;left:0;right:0;bottom:0;height:80px;pointer-events:none;z-index:3;background:linear-gradient(180deg,#ff5a4d00,#ff5a4d2e 60%,#ff5a4d52);opacity:0;transition:opacity .2s}.catch-zone.active{opacity:1;animation:dangerZone .55s ease-in-out infinite alternate}@keyframes dangerZone{0%{opacity:.55}to{opacity:1}}.fall{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none;overflow:hidden}.letter{position:absolute;transform:translate(-50%,-50%);width:88px;height:88px;display:grid;place-items:center;font-family:Fredoka,sans-serif;font-weight:700;font-size:72px;color:var(--choco);text-transform:uppercase;text-shadow:1px 1px 0 var(--choco-shadow),2px 2px 0 var(--choco-shadow),3px 3px 0 var(--choco-shadow),4px 4px 0 var(--choco-shadow),5px 5px 0 var(--choco-shadow),6px 6px 12px rgba(0,0,0,.55);background:repeating-linear-gradient(0deg,#e5b08300,#e5b08300 2px,#e5b0832e 3px,#e5b08300 5px);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:var(--choco);filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));transition:transform .18s ease-out,filter .18s;will-change:transform,top}.letter.danger{filter:drop-shadow(0 0 14px rgba(255,90,77,.85)) drop-shadow(0 4px 8px rgba(0,0,0,.55));animation:dangerPulse .55s ease-in-out infinite alternate}@keyframes dangerPulse{0%{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.08)}}.letter.caught{animation:letterCaught .42s cubic-bezier(.34,1.56,.64,1) forwards}.letter.smashed{animation:letterSmashed .42s ease-out forwards}@keyframes letterCaught{0%{transform:translate(-50%,-50%) scale(1.1) rotate(0);opacity:1}35%{transform:translate(-50%,-50%) scale(1.45) rotate(8deg)}to{transform:translate(-50%,-50%) scale(0) rotate(-20deg);opacity:0}}@keyframes letterSmashed{0%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}60%{transform:translate(-50%) scale(.85) rotate(25deg);opacity:.8}to{transform:translate(-50%,40%) scale(.6) rotate(50deg);opacity:0}}.crumb{position:absolute;width:8px;height:8px;border-radius:2px;background:var(--choco);pointer-events:none;z-index:6;animation:crumbFly .65s ease-out forwards}@keyframes crumbFly{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.4) rotate(360deg);opacity:0}}.target-badge{position:absolute;left:50%;top:114px;transform:translate(-50%);z-index:6;padding:6px 18px 8px;border-radius:22px;background:#0000008c;border:2.5px solid rgba(255,201,85,.7);display:flex;align-items:center;gap:12px;pointer-events:none;opacity:0;transition:opacity .22s,transform .22s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.target-badge.show{opacity:1}.target-badge__lbl{font-size:12px;letter-spacing:.8px;text-transform:uppercase;font-weight:600;opacity:.9}.target-badge__char{font-size:28px;font-weight:700;color:var(--accent);text-shadow:0 2px 0 rgba(0,0,0,.6);font-variant-numeric:tabular-nums;display:inline-block;min-width:24px;text-align:center}.target-badge.bump .target-badge__char{animation:targetBump .35s ease-out}@keyframes targetBump{0%{transform:scale(1)}50%{transform:scale(1.4);color:var(--good)}to{transform:scale(1)}}.last-key{position:absolute;left:50%;bottom:18px;transform:translate(-50%);padding:6px 18px;font-size:18px;font-weight:600;background:#00000080;border:2px solid rgba(255,255,255,.45);border-radius:22px;color:var(--paper);z-index:7;pointer-events:none;opacity:0;transition:opacity .15s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.last-key.show{opacity:1}.last-key.hit{border-color:var(--good);color:#d3ffc6}.last-key.miss{border-color:var(--bad);color:#ffd3cf}.score-pop{position:absolute;font-size:28px;font-weight:700;text-shadow:0 2px 0 #000;pointer-events:none;z-index:9;transform:translate(-50%);animation:scorePop 1s ease-out forwards}.score-pop--plus{color:var(--accent)}.score-pop--minus{color:var(--bad)}@keyframes scorePop{0%{transform:translate(-50%);opacity:1}to{transform:translate(-50%,-60px);opacity:0}}.kbd{position:absolute;left:6px;right:6px;bottom:6px;z-index:8;padding:6px;background:#0000008c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.18);border-radius:12px;display:flex;flex-direction:column;gap:4px}.kbd[hidden]{display:none}.kbd__row{display:flex;gap:4px;justify-content:center}.kbd__key{flex:1;max-width:56px;height:40px;border-radius:6px;background:var(--choco);border:1.5px solid var(--choco-shadow);color:var(--paper);font-family:Fredoka,sans-serif;font-size:18px;font-weight:600;display:grid;place-items:center;box-shadow:0 2px 0 var(--choco-shadow)}.kbd__key:active{transform:translateY(1.5px);box-shadow:0 0 0 var(--choco-shadow);background:var(--choco-light)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;display:none;align-items:center;justify-content:center;background:#000000b3;padding:24px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.overlay--visible{display:flex}.panel{background:var(--paper);color:var(--dark);border-radius:22px;padding:28px 32px 22px;text-align:center;max-width:480px;width:100%;box-shadow:0 16px 40px #00000073;border:3px solid var(--accent)}.panel__title{margin:0 0 8px;font-size:30px;font-weight:700;color:var(--dark)}.panel__intro{margin:0 0 14px;font-size:15px;line-height:1.45;color:var(--dark-soft)}.panel__rules{list-style:none;padding:0;margin:0 0 16px;font-size:14px;color:var(--dark-soft);text-align:left;display:inline-block}.panel__rules li{padding:4px 0 4px 22px;position:relative}.panel__rules li:before{content:"🍫";position:absolute;left:0;top:4px;font-size:14px}.panel__stats{display:flex;gap:12px;justify-content:center;margin:16px 0;flex-wrap:wrap}.stat{background:#fff;border:3px solid var(--dark);border-radius:14px;padding:10px 16px;min-width:92px}.stat__label{font-size:11px;opacity:.7;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.stat__value{font-size:26px;color:var(--accent-dk);font-weight:700;font-variant-numeric:tabular-nums}.panel__actions{display:flex;gap:10px;justify-content:center;margin-top:8px;flex-wrap:wrap}.btn{background:var(--accent);color:var(--dark);border:0;border-radius:14px;padding:12px 26px;font-size:17px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 4px 0 var(--accent-dk),0 6px 12px #0003;text-transform:uppercase;letter-spacing:.5px}.btn:hover{background:#ffd87a}.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--accent-dk),0 3px 6px #0003}.btn--primary{background:var(--accent);color:var(--dark)}