*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden;background:#fff}.app-root{width:100%;height:100%;display:flex;flex-direction:column;font-family:"Press Start 2P",monospace;background:#fff}body{overscroll-behavior:none;-webkit-overflow-scrolling:touch}.title-screen{width:100%;height:100%;background:#fff;display:flex;align-items:center;justify-content:center}.title-inner{display:flex;flex-direction:column;align-items:center;gap:24px;padding:32px 20px}.title-logo{font-family:"Press Start 2P",monospace;font-size:clamp(20px,6vw,48px);color:#4a5568;text-align:center;line-height:1.6;letter-spacing:2px;margin:0}.title-sub{font-family:"Press Start 2P",monospace;font-size:clamp(6px,1.8vw,12px);color:#4a5568;letter-spacing:3px;opacity:.6}.start-btn{font-family:"Press Start 2P",monospace;font-size:clamp(12px,3vw,20px);color:#fff;background:#4a5568;border:none;padding:16px 40px;cursor:pointer;letter-spacing:3px;image-rendering:pixelated;box-shadow:4px 4px #2d3748;transition:transform 80ms,box-shadow 80ms;-webkit-tap-highlight-color:transparent}.start-btn:active{transform:translate(3px,3px);box-shadow:1px 1px #2d3748}.start-btn:hover{background:#2d3748}.title-hint{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:"Press Start 2P",monospace;font-size:clamp(5px,1.4vw,9px);color:#4a5568;opacity:.55;letter-spacing:1px}.select-screen{width:100%;height:100%;background:#fff;display:flex;align-items:center;justify-content:center;overflow-y:auto}.select-inner{display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px 16px}.select-title{font-family:"Press Start 2P",monospace;font-size:clamp(14px,4vw,28px);color:#4a5568;text-align:center;line-height:1.6;letter-spacing:2px;margin:0}.char-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:620px;width:100%}.char-block{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px;width:108px;background:#fff;border:3px solid #cbd5e0;cursor:pointer;transition:transform 80ms,border-color 80ms,box-shadow 80ms;-webkit-tap-highlight-color:transparent}@media(max-width:560px){.char-block{width:28%;min-width:88px}}.char-block:hover{border-color:#4a5568}.char-block.selected{border-color:#4a5568;box-shadow:4px 4px #2d3748;transform:translate(-1px,-1px)}.char-face-wrap{position:relative;width:100%;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center}.char-face{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;-webkit-user-select:none;user-select:none}.char-name{font-family:"Press Start 2P",monospace;font-size:clamp(5px,1.4vw,8px);color:#4a5568;text-align:center;line-height:1.4;letter-spacing:.5px}.select-chosen{font-family:"Press Start 2P",monospace;font-size:clamp(6px,1.6vw,10px);color:#4a5568;opacity:.7;letter-spacing:1px}.game-wrapper{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;overflow:hidden}.game-hud{flex-shrink:0;background:#fff;padding:8px 14px}.hud-inner{display:flex;align-items:center;justify-content:space-between;font-family:"Press Start 2P",monospace}.hud-lives{display:flex;gap:10px;font-size:clamp(30px,6.75vw,45px)}.heart{display:inline-block;transform:scaleX(1.25);transition:opacity .2s;line-height:1}.heart.filled{color:#4a5568;opacity:1}.heart.empty{color:#4a5568;opacity:.2}.hud-center{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0}.hud-level{font-size:clamp(6px,1.5vw,10px);color:#4a5568;letter-spacing:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.hud-powerups{display:flex;gap:6px;min-height:10px}.pu{font-size:clamp(5px,1.3vw,8px);letter-spacing:1px;color:#fff;background:#4a5568;padding:2px 5px}.hud-score{font-size:clamp(17px,3.75vw,26px);color:#4a5568;letter-spacing:1px;flex-shrink:0}.canvas-container{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;touch-action:none}.game-canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%;max-height:100%;width:auto;height:auto;aspect-ratio:16 / 9;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}@media(min-width:768px){.canvas-container{align-items:stretch;justify-content:stretch}.game-canvas{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:unset}}.gameover-screen{width:100%;height:100%;background:#fff;display:flex;align-items:center;justify-content:center;overflow-y:auto}.gameover-inner{display:flex;flex-direction:column;align-items:center;gap:20px;padding:32px 20px;max-width:440px;width:100%}.gameover-title{font-family:"Press Start 2P",monospace;font-size:clamp(18px,5vw,36px);color:#4a5568;margin:0;text-align:center;letter-spacing:2px}.gameover-dist{font-family:"Press Start 2P",monospace;font-size:clamp(7px,2vw,11px);color:#4a5568;text-align:center;line-height:2;margin:0}.dist-num{font-size:clamp(14px,4vw,24px)}.name-form{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.name-label{font-family:"Press Start 2P",monospace;font-size:clamp(6px,1.6vw,10px);color:#4a5568;letter-spacing:2px}.name-input{font-family:"Press Start 2P",monospace;font-size:clamp(10px,2.5vw,16px);color:#4a5568;background:#fff;border:3px solid #4a5568;padding:10px 14px;width:100%;max-width:260px;text-align:center;text-transform:uppercase;letter-spacing:2px;outline:none;box-sizing:border-box}.name-input::placeholder{opacity:.35}.name-input:focus{border-color:#2d3748;box-shadow:3px 3px #2d3748}.submit-btn,.restart-btn{font-family:"Press Start 2P",monospace;font-size:clamp(9px,2.2vw,14px);color:#fff;background:#4a5568;border:none;padding:12px 28px;cursor:pointer;letter-spacing:2px;box-shadow:4px 4px #2d3748;transition:transform 80ms,box-shadow 80ms;-webkit-tap-highlight-color:transparent}.submit-btn:hover,.restart-btn:hover{background:#2d3748}.submit-btn:active,.restart-btn:active{transform:translate(3px,3px);box-shadow:1px 1px #2d3748}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.change-char-btn{font-family:"Press Start 2P",monospace;font-size:clamp(7px,1.8vw,11px);color:#4a5568;background:#fff;border:3px solid #4a5568;padding:10px 22px;cursor:pointer;letter-spacing:2px;transition:transform 80ms,box-shadow 80ms,background 80ms,color 80ms;-webkit-tap-highlight-color:transparent}.change-char-btn:hover{background:#4a5568;color:#fff}.change-char-btn:active{transform:translate(2px,2px)}.submitted-msg{font-family:"Press Start 2P",monospace;font-size:clamp(8px,2vw,12px);color:#4a5568;letter-spacing:2px;margin:0}.leaderboard{width:100%;max-width:340px;border:3px solid #4a5568;padding:16px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box}.lb-divider{height:2px;background:#4a5568;opacity:.3}.lb-section{display:flex;flex-direction:column;gap:8px}.lb-title{font-family:"Press Start 2P",monospace;font-size:clamp(6px,1.5vw,9px);color:#4a5568;letter-spacing:2px;opacity:.6}.lb-row{display:flex;justify-content:space-between;align-items:baseline;font-family:"Press Start 2P",monospace;font-size:clamp(8px,2vw,12px);color:#4a5568;gap:8px}.lb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-transform:uppercase}.lb-dist{flex-shrink:0;font-size:clamp(9px,2.2vw,13px)}.lb-empty{font-family:"Press Start 2P",monospace;font-size:clamp(6px,1.4vw,9px);color:#4a5568;opacity:.4;letter-spacing:1px}