:root{--ink:#142d2d;--cream:#ffe5ae;--paper:#fff1cf;--coral:#f2583e;--red:#c9362b;--teal:#168f85;--yellow:#f5b92f}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink)}body{font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none}#app{position:relative;isolation:isolate}canvas{position:absolute;width:100%;height:100%;top:0;right:0;bottom:0;left:0;touch-action:none;image-rendering:pixelated}.screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;padding:clamp(24px,6vw,90px);transition:opacity .25s,transform .25s}.screen.hidden,.hidden{opacity:0!important;pointer-events:none!important;visibility:hidden}#menu{background:linear-gradient(90deg,rgba(20,45,45,.16),transparent 60%),url(./sloppy-bird-key-art-D7kjiWcO.png) center/cover}#menu{image-rendering:pixelated}#menu:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(90deg,rgba(255,222,164,.96) 0%,rgba(255,213,142,.7) 30%,transparent 60%)}.menu-copy{width:min(480px,48vw);transform:rotate(-1deg)}.eyebrow{font:700 clamp(10px,1.3vw,14px)/1.3 "Courier New",monospace;letter-spacing:.12em;margin:0 0 10px}h1{font-size:clamp(76px,12vw,174px);letter-spacing:-.075em;line-height:.7;margin:0 0 28px;text-shadow:4px 5px 0 var(--cream),8px 9px 0 var(--ink)}h1 span{color:var(--coral);-webkit-text-stroke:3px var(--ink)}.hook{font-size:clamp(20px,2.4vw,32px);font-weight:800;line-height:.95;text-transform:uppercase}button{border:3px solid var(--ink);background:var(--yellow);box-shadow:5px 5px 0 var(--ink);padding:14px 22px;font:900 19px Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;letter-spacing:.04em;cursor:pointer;color:var(--ink);transition:transform .08s,box-shadow .08s}button:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}button:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}button b{margin-left:22px}.controls{margin-top:24px;display:flex;gap:9px;align-items:center;font:700 10px Courier New,monospace}.controls kbd{background:var(--paper);border:2px solid var(--ink);padding:5px 7px;box-shadow:2px 2px var(--ink);font-family:inherit}.controls i{width:1px;height:20px;background:var(--ink);margin:0 5px;opacity:.4}.controls strong{color:var(--red)}.best{position:absolute;top:25px;right:28px;font:700 11px Courier New,monospace;background:#fff1cfd9;padding:7px 10px;transform:rotate(1deg)}.best strong{font-size:17px;margin-left:7px}#sound{position:absolute;z-index:9;right:20px;bottom:20px;width:42px;height:42px;padding:0;border-radius:50%;background:var(--paper)}#dive{position:absolute;z-index:8;left:20px;bottom:20px;width:74px;height:74px;padding:5px;border-radius:50%;background:var(--coral);color:var(--paper);text-shadow:2px 2px var(--ink);touch-action:none}#dive span{font-size:25px;line-height:.5}#hud{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;padding:22px 26px;pointer-events:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;color:var(--paper);text-shadow:2px 2px var(--ink)}.score span,.slop span{display:block;font:700 10px Courier New,monospace;letter-spacing:.12em}.score strong{display:block;font-size:52px;line-height:.9}.combo{text-align:center;transform:scale(1);transition:transform .12s}.combo.pop{transform:scale(1.25) rotate(-3deg)}.combo span{font-size:30px;font-style:italic;color:var(--yellow)}.combo div,.slop div{width:130px;height:7px;border:2px solid var(--paper);background:var(--ink);box-shadow:2px 2px var(--ink)}.combo i,.slop i{display:block;width:0%;height:100%;background:var(--yellow);transition:width .1s}.lives{justify-self:end;font-size:24px;letter-spacing:4px;color:var(--coral)}.slop{position:absolute;right:26px;top:64px;text-align:right}.slop i{background:var(--coral)}.zone{position:absolute;left:50%;top:23%;transform:translate(-50%,-50%) rotate(-2deg);text-align:center;color:var(--ink);text-shadow:none;background:var(--paper);border:4px solid var(--ink);box-shadow:6px 6px var(--ink);padding:8px 24px;transition:opacity .2s,transform .2s}.zone small{display:block;font:700 9px Courier New,monospace;letter-spacing:.2em}.zone strong{display:block;font-size:30px;line-height:.9;color:var(--coral)}.compact{justify-content:center;background:#142d2db8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.card{width:min(470px,90vw);background:var(--paper);padding:38px;border:4px solid var(--ink);box-shadow:12px 12px #142d2dcc;transform:rotate(-1deg)}.card h2{font-size:clamp(45px,7vw,72px);line-height:.83;margin:10px 0 28px;letter-spacing:-.04em}.card h2 em{color:var(--coral);font-style:italic}.lesson{display:flex;align-items:center;gap:18px;padding:14px 0;border-top:2px solid rgba(20,45,45,.2)}.lesson span{flex:0 0 54px;height:54px;display:grid;place-items:center;font-size:46px;font-weight:900}.target-icon{color:var(--red);border:5px solid var(--red);border-radius:50%;line-height:1}.hazard-icon{color:var(--yellow);background:var(--ink);clip-path:polygon(50% 0,100% 100%,0 100%);padding-top:13px}.dive-icon{color:var(--paper);background:var(--coral);border:4px solid var(--ink)}.lesson p{margin:0;font:700 13px/1.4 Courier New,monospace}.card button{margin-top:20px;width:100%}.result{text-align:center}.result-grid{display:grid;grid-template-columns:1fr 1fr;border:3px solid var(--ink)}.result-grid div{padding:15px}.result-grid div+div{border-left:3px solid var(--ink)}.result-grid span{display:block;font:700 10px Courier New,monospace}.result-grid strong{font-size:42px}.new-best{background:var(--coral);color:var(--paper);padding:6px;font:700 12px Courier New,monospace;transform:rotate(1deg)}.text-button{background:transparent;box-shadow:none;border:0;text-decoration:underline;font-size:15px;margin-top:8px!important}@media(max-width:700px){#menu{background-position:62% center;align-items:flex-end;padding:24px 20px 70px}#menu:after{background:linear-gradient(0deg,rgba(255,223,169,.98) 0%,rgba(255,211,140,.78) 48%,transparent 80%)}.menu-copy{width:100%}h1{font-size:78px;margin-bottom:20px}.hook{font-size:18px}.controls{flex-wrap:wrap}.card{padding:28px 22px}#hud{padding:14px}.slop{right:14px;top:52px}.combo div,.slop div{width:90px}}