*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:#111;justify-content:center;align-items:center;min-height:100vh;font-family:monospace;display:flex}#game-wrapper{background:#faf4c5;width:320px;height:568px;position:relative;overflow:hidden}#game-canvas{image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;display:block;position:absolute;inset:0}#sky-layer{position:absolute;inset:0}#saturn-layer,#planet-layer{pointer-events:none;opacity:.75;filter:drop-shadow(0 0 18px #fffad2a6)drop-shadow(0 0 40px #fffad266)drop-shadow(0 0 70px #fffad238);position:absolute;top:0}#monster-layer{pointer-events:none;position:absolute;inset:0;overflow:hidden}#monster-layer img,.monster-icon{filter:saturate(1.9)hue-rotate(15deg)brightness(1.08)}#monster-layer img{pointer-events:none;position:absolute;top:0;left:0}#player-overlay-canvas{bottom:0;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none;position:absolute;inset:0}#game-canvas.scene-enter{transform:translateY(-130px)}#game-canvas.scene-enter-active{transition:transform .7s cubic-bezier(.3,0,.6,1);transform:translateY(0)}#start-scene{pointer-events:none;transition:opacity .2s ease-in .7s;position:absolute;inset:0;overflow:hidden}#start-scene-inner{position:absolute;inset:0}#start-scene img:not(#start-scene-logo img){image-rendering:pixelated;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;position:absolute;bottom:0}#start-scene .bop-stage{width:320px;height:480px;position:absolute;bottom:0;left:0}#start-scene .bop-layer{width:320px;height:480px;left:0}#start-scene .bop-sun{display:none}#start-scene .bop-bushes{transform-origin:160px 480px;animation:3.2s ease-in-out infinite alternate bop-sway}#start-scene .bop-bg-fade{-webkit-mask-image:radial-gradient(330px 102px at 160px 500px,#000 96%,#0000 100%);mask-image:radial-gradient(330px 102px at 160px 500px,#000 96%,#0000 100%)}#start-scene .bop-speaker-left{clip-path:inset(0 50% 0 0);transform-origin:89px 468px;animation:.5s ease-out infinite bop-bounce}#start-scene .bop-speaker-right{clip-path:inset(0 0 0 50%);transform-origin:233px 468px;animation:.5s ease-out infinite bop-bounce}#start-scene .bop-notes{pointer-events:none;position:absolute;inset:0}#start-scene .bop-note{pointer-events:none;text-shadow:1px 1px #00000059;font-family:Segoe UI Symbol,sans-serif;line-height:1;animation:1.4s ease-out forwards bop-note-float;position:absolute}@keyframes bop-bounce{0%{transform:scale(1)}18%{transform:scale(1.16)}45%{transform:scale(1)}to{transform:scale(1)}}@keyframes bop-sway{0%{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}@keyframes bop-note-float{0%{opacity:0;transform:translate(0)scale(.5)rotate(0)}12%{opacity:1}to{transform:translate(var(--dx,10px), -70px) scale(1.15) rotate(var(--rot,14deg));opacity:0}}#start-scene-logo{pointer-events:none;justify-content:center;align-items:flex-start;padding-top:30px;display:flex;position:absolute;inset:0}#start-scene-logo img{max-width:80%;height:auto;margin-top:-63px}.logo-sparkles{pointer-events:none;position:absolute;inset:0}.pixel-star{color:#ffe066;filter:drop-shadow(0 0 1.5px #0006);background:currentColor;width:2px;height:2px;animation:1.6s ease-in-out infinite pixel-twinkle;position:absolute;box-shadow:0 -4px,0 4px,-4px 0,4px 0}.pixel-star.pink{color:#f5b5d2}.pixel-star.blue{color:#8fd3ff}.pixel-star.small{width:1px;height:1px;box-shadow:0 -3px,0 3px,-3px 0,3px 0}@keyframes pixel-twinkle{0%,to{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}#start-scene .start-bg{object-fit:cover;width:320px;height:568px;top:0;left:0}#start-scene.jumping{opacity:0}#start-scene.jumping #start-scene-inner{transition:transform .7s cubic-bezier(.3,0,.6,1);transform:translateY(650px)}.screen{color:#fff;text-align:center;background:#000000c7;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex;position:absolute;inset:0}.hud-pause-btn{cursor:pointer;background:#00000073;border:2px solid #ffffff80;border-radius:6px;justify-content:center;align-items:center;gap:4px;width:34px;height:34px;padding:0;display:flex;position:absolute;top:10px;left:10px}.hud-pause-btn:hover{background:#000000a6}.hud-pause-btn:active{transform:translate(1px,1px)}.pixel-pause-bar{background:#fff;width:4px;height:14px}.hidden{display:none}.screen-start{color:#2b2b2b;background:0 0;justify-content:flex-start;gap:6px;max-height:615px;padding-top:38%;padding-bottom:0;overflow:hidden}.screen-start #top-scores{color:#4a4a4a;background:#ffffffe0;border-radius:10px;min-height:24px;padding:4px 14px}.screen-start .top-score-row{color:#b8860b}.screen-start input[type=text]{color:#2b2b2b;background:#fffc;border-color:#66bb6a;box-shadow:inset 2px 2px #00000014}.screen-start input[type=text]::placeholder{color:#6b6b6b}.screen-start input[type=text]:focus{background:#fffffff2;border-color:#2e7d32}.screen h2{color:#66bb6a;margin-bottom:4px;font-size:22px;font-weight:700}.screen p{color:#ccc;font-size:13px}input[type=text],input[type=email]{color:#fff;background:#1a1a1a;border:3px solid #444;border-radius:5px;outline:none;width:100%;max-width:240px;padding:8px 12px;font-family:monospace;font-size:14px;box-shadow:inset 2px 2px #0006}input[type=text]:focus,input[type=email]:focus{border-color:#66bb6a}.btn{cursor:pointer;letter-spacing:1px;border:3px solid #1a1a1a;border-radius:5px;padding:9px 20px;font-family:monospace;font-size:14px;font-weight:700;box-shadow:3px 3px #00000059}.btn:active{box-shadow:none;transform:translate(3px,3px)}.btn-small{letter-spacing:.5px;padding:5px 12px;font-size:11px}.btn-primary{color:#fff;background:#2e7d32}.btn-primary:hover{background:#388e3c}.btn-secondary{color:#ccc;background:#333}.btn-secondary:hover{background:#444}.btn-art{width:100px;box-shadow:none;appearance:none;color:#0000;background-color:#0000;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:0;padding:0;font-size:0}.btn-art:active{box-shadow:none;transform:none}.btn-art-play{aspect-ratio:357/141;background-image:url(/assets/Buttons/play-idle.png)}.btn-art-play:hover{background-image:url(/assets/Buttons/play-hover.png)}.btn-art-play:active{background-image:url(/assets/Buttons/play-pressed.png)}.btn-art-leaderboard{aspect-ratio:372/143;background-image:url(/assets/Buttons/leaderboard-idle.png)}.btn-art-leaderboard:hover{background-image:url(/assets/Buttons/leaderboard-hover.png)}.btn-art-leaderboard:active{background-image:url(/assets/Buttons/leaderboard-pressed.png)}.btn-art-controls{aspect-ratio:356/142;background-image:url(/assets/Buttons/controls-idle.png)}.btn-art-controls:hover{background-image:url(/assets/Buttons/controls-hover.png)}.btn-art-controls:active{background-image:url(/assets/Buttons/controls-pressed.png)}.btn-row{justify-content:center;gap:10px;display:flex}.screen-start .btn-row{width:100%;max-width:240px}.screen-start .btn-row .btn{flex:1}.screen-start .btn-row .btn-art{flex:none}#top-scores{color:#aaa;min-height:56px;font-size:13px;line-height:1.8}.top-score-row{color:#fff176}#gameover-card{background:#0000008c;border:2px solid #333;border-radius:10px;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:260px;padding:18px 20px 16px;display:flex}#gameover-mascot{width:56px;height:auto;margin-bottom:-4px}#gameover-card h2{margin-bottom:-4px}#gameover-stats{gap:10px;width:100%;display:flex}.stat-tile{background:#ffffff0f;border:2px solid #444;border-radius:6px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 6px;display:flex}.stat-label{letter-spacing:1px;text-transform:uppercase;color:#999;font-size:10px}.stat-value{color:#66bb6a;font-size:22px;font-weight:700}.stat-tile-best .stat-value{color:#fff176}#email-section{width:100%}#email-submit-row{align-items:center;gap:4px;width:100%;display:flex}#email-submit-row input[type=email]{flex:1;width:auto;min-width:0;max-width:none}.btn-icon{flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;padding:0;font-size:16px;line-height:1;display:flex}.btn-stack{flex-direction:column;gap:8px;width:100%;display:flex}.btn-stack .btn{width:100%}#gameover-card .prize-prompt{color:#fff176;white-space:nowrap;font-size:10px;line-height:1.5}.error-msg{color:#ef5350;margin-top:-4px;font-size:12px}.submitted-msg{color:#66bb6a;font-size:13px}.existing-best-msg{color:#aaa;margin-top:4px;font-size:12px}.existing-best-msg strong{color:#fff176}#pause-card{background:#000000c7;border:2px solid #333;border-radius:10px;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:260px;padding:18px 20px 16px;display:flex}#pause-card h2{margin-bottom:0}#screen-leaderboard{background:#0a051e47;justify-content:center;padding:16px}#leaderboard-card{background:#000000b8;border:2px solid #333;border-radius:10px;flex-direction:column;align-items:center;gap:10px;width:100%;padding:18px 20px 14px;display:flex}#leaderboard-card h2{margin-bottom:0}#leaderboard-table{border-collapse:collapse;width:100%;font-size:13px}#leaderboard-table th,#leaderboard-table td{text-align:left;border-bottom:1px solid #333;padding:5px 8px}#leaderboard-table th{color:#66bb6a;letter-spacing:1px;font-size:11px}#leaderboard-table td:last-child{text-align:right;color:#fff176}#leaderboard-table tr:first-child td{color:gold;font-weight:700}#screen-howtoplay{padding:16px}#howtoplay-card{background:#000000d1;border:2px solid #333;border-radius:10px;flex-direction:column;align-items:center;gap:10px;width:100%;height:100%;padding:16px 16px 14px;display:flex}#howtoplay-card h2{flex-shrink:0;margin-bottom:0}#howtoplay-body{flex-direction:column;flex:1;gap:14px;width:100%;min-height:0;padding-right:4px;display:flex;overflow-y:auto}.howto-section h3{color:#fff176;letter-spacing:.5px;text-align:left;margin-bottom:4px;font-size:12px}.howto-section p{color:#ccc;text-align:left;font-size:12px;line-height:1.4}.howto-touch-diagram{gap:6px;margin-top:6px;display:flex}.howto-touch-zone{background:#ffffff0f;border:2px dashed #555;border-radius:6px;flex-direction:column;flex:1;align-items:center;gap:4px;padding:10px 4px;display:flex}.howto-touch-arrow{color:#66bb6a;font-size:20px;line-height:1}.howto-touch-label{color:#ccc;text-align:center;font-size:10px;line-height:1.3}.howto-sprite-row{gap:10px;margin-top:6px;display:flex}.howto-sprite{background:#ffffff0f;border:2px solid #444;border-radius:6px;justify-content:center;align-items:center;width:56px;height:48px;display:flex;overflow:hidden}.howto-sprite img{image-rendering:auto;max-width:100%;max-height:100%}.howto-sprite-speaker{object-fit:none;object-position:-67px -415px;width:49px;max-width:none;height:47px;max-height:none;transform:rotate(85deg)scale(.8)}.howtoplay-scroll-hint{opacity:1;visibility:visible;flex-shrink:0;justify-content:center;transition:opacity .25s,visibility linear;display:flex}.howtoplay-scroll-hint.hidden{opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s;display:flex}.pixel-scroll-arrow{color:#66bb6a;background:currentColor;width:5px;height:5px;margin:4px 10px;animation:1.4s ease-in-out infinite pixel-scroll-bounce;position:relative;box-shadow:5px 0,10px 0,15px 0,20px 0,5px 5px,10px 5px,15px 5px,10px 10px}@keyframes pixel-scroll-bounce{0%,to{opacity:.45;transform:translate(-10px)translateY(0)}50%{opacity:1;transform:translate(-10px)translateY(6px)}}#btn-howtoplay-close{flex-shrink:0;width:100%;max-width:240px}#factorama-card{background:#000000d1;border:2px solid #333;border-radius:10px;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:260px;padding:18px 20px 14px;display:flex}#factorama-card h2{margin-bottom:0}.factorama-subhead{color:#fff176;letter-spacing:.5px;margin-top:-4px;font-size:13px;font-weight:700}#factorama-body{color:#ccc;text-align:center;width:100%;max-height:260px;line-height:1.5;overflow-y:auto}#fact-text{font-size:13px}#btn-factorama-close{flex-shrink:0;width:100%;max-width:200px}#flagged-card{background:#000000d1;border:2px solid #333;border-radius:10px;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:260px;padding:18px 20px 14px;display:flex}#flagged-card h2{color:#fff176;margin-bottom:0}.flagged-msg{color:#ccc;font-size:13px;line-height:1.5}#btn-flagged-close{flex-shrink:0;width:100%;max-width:200px}#name-blocked-card{background:#000000d1;border:2px solid #333;border-radius:10px;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:260px;padding:18px 20px 14px;display:flex}#name-blocked-card h2{color:#f5b5d2;margin-bottom:0}.name-blocked-msg{color:#ccc;font-size:13px;line-height:1.5}#btn-name-blocked-close{flex-shrink:0;width:100%;max-width:200px}