*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1a3a5c,#0a1628 70%,#050d18);font-family:"Press Start 2P",monospace;color:#e8f4ff;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}#app{position:relative;width:480px;height:720px;max-width:100vw;max-height:100dvh;box-shadow:0 0 0 4px #2a5a8a,0 0 40px #50b4ff4d,0 20px 60px #0009;border-radius:4px;outline:none;touch-action:manipulation;overflow:hidden}#game{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#0d1f33}#hud{position:absolute;top:12px;left:12px;right:12px;z-index:5;pointer-events:none;display:flex;flex-direction:column;gap:8px;text-shadow:2px 2px 0 #000}#score{font-size:14px;color:#ffe566}#combo{font-size:10px;color:#ff6b9d;min-height:14px}#height{font-size:8px;color:#8ec8ff;opacity:.8}#overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:auto;cursor:default;overflow:hidden}#overlay.hidden{display:none}.menu-screen{display:flex;flex-direction:column;background-color:#9b2222;background-image:linear-gradient(90deg,#7a7a7a 0,#7a7a7a 6px,transparent 6px),linear-gradient(0deg,#7a7a7a 0,#7a7a7a 4px,transparent 4px);background-size:64px 32px;background-position:0 0}.menu-screen:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 58px,rgba(0,0,0,.08) 58px,rgba(0,0,0,.08) 64px),repeating-linear-gradient(0deg,transparent 0,transparent 26px,rgba(0,0,0,.06) 26px,rgba(0,0,0,.06) 32px);pointer-events:none}.menu-version{position:absolute;top:8px;right:10px;font-family:"Press Start 2P",monospace;font-size:7px;color:#fff;text-shadow:1px 1px 0 #000;z-index:2}.menu-header{position:relative;height:180px;flex-shrink:0;z-index:1}.harold-head{position:absolute;top:8px;left:4px;width:130px;height:150px;background:url(/harold.png) no-repeat center top;background-size:contain;image-rendering:pixelated;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.5))}.graffiti-title{position:absolute;top:24px;right:8px;left:120px;display:flex;flex-direction:column;align-items:flex-end;gap:0;line-height:.9}.graffiti-line{font-family:Impact,Arial Black,sans-serif;font-size:52px;font-weight:900;font-style:italic;letter-spacing:2px;background:linear-gradient(180deg,#7fff00,#ff0,#f90,#f36,#c4f 72%,#48f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;paint-order:stroke fill;-webkit-text-stroke:3px #000;filter:drop-shadow(3px 4px 0 #444) drop-shadow(1px 1px 0 #000)}.login-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px 24px;z-index:1;cursor:default}.login-label{font-family:Impact,Arial Black,sans-serif;font-size:14px;color:#fff;-webkit-text-stroke:.8px #000;text-shadow:2px 2px 0 #000;letter-spacing:.5px;text-align:center;line-height:1.3;max-width:90%}.login-center .score-name-input{width:min(220px,80%);font-size:18px;text-align:center;border-bottom-width:3px;padding:6px 0;caret-color:#ff0}.menu-play{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px}.menu-play-row{display:flex;align-items:center;gap:8px}.menu-play .menu-cursor{position:static;image-rendering:pixelated;filter:drop-shadow(1px 2px 0 #000)}.menu-play .graffiti-item{font-size:28px}.shop-look-btn{font-size:20px;margin-top:2px}.login-center .controls-hint{margin-top:4px;text-align:center}.menu-footer{flex-shrink:0;padding:8px 12px 14px;z-index:1}.menu-footer .highscores-panel{display:grid;grid-template-columns:1fr 1fr;gap:12px}.menu-body{position:absolute;left:0;right:0;bottom:0;top:200px;display:grid;grid-template-columns:1fr 1.15fr;gap:8px;padding:8px 10px 16px;z-index:1}.menu-left{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding-bottom:8px;position:relative;padding-left:36px}.menu-cursor{position:absolute;left:0;bottom:108px;image-rendering:pixelated;filter:drop-shadow(1px 2px 0 #000)}.graffiti-item{font-family:Impact,Arial Black,sans-serif;font-size:18px;font-weight:900;font-style:italic;text-align:left;background:linear-gradient(180deg,#7fff00,#ff0,#f90,#f36,#c4f,#48f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px #000;filter:drop-shadow(2px 2px 0 #333);border:none;background-color:transparent;padding:0;cursor:pointer}.graffiti-item.dim{-webkit-text-fill-color:rgba(255,255,255,.35);background:none;cursor:default;font-size:14px}.graffiti-item.active:hover{filter:drop-shadow(2px 2px 0 #333) brightness(1.15)}.controls-hint{font-family:"Press Start 2P",monospace;font-size:6px;color:#fff;text-shadow:1px 1px 0 #000;line-height:1.8;margin-top:4px}.controls-hint-mobile{display:none}.highscores-panel{cursor:default}.scores-block{width:100%}.scores-header,.scores-row{display:grid;grid-template-columns:1.4fr 1fr .7fr .7fr 1fr;gap:4px;align-items:center}.scores-header{font-family:Impact,Arial Black,sans-serif;font-size:11px;color:#fff;-webkit-text-stroke:.8px #000;text-shadow:2px 2px 0 #000;margin-bottom:4px;letter-spacing:.5px}.scores-list{display:flex;flex-direction:column;gap:2px;margin-bottom:4px;min-height:48px}.scores-row{font-family:Impact,Arial Black,sans-serif;font-size:12px;color:#fff;-webkit-text-stroke:.6px #000;text-shadow:1px 1px 0 #000}.scores-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-rank{font-size:10px;opacity:.85}.score-name-input{width:100%;font-family:Impact,Arial Black,sans-serif;font-size:12px;color:#ff6;-webkit-text-stroke:.6px #000;text-shadow:1px 1px 0 #000;background:transparent;border:none;border-bottom:2px solid rgba(255,255,255,.5);outline:none;padding:2px 0;text-transform:uppercase}.score-name-input::placeholder{color:#ffffffb3;letter-spacing:2px}.score-name-input:focus{border-bottom-color:#ff0;color:#fff}.score-name-input.shake{animation:login-shake .35s ease}@keyframes login-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.login-row .score-name-input{caret-color:#ff0}.touch-controls{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:flex-end;justify-content:space-between;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none}.touch-controls.hidden{display:none}.touch-btn{pointer-events:auto;width:72px;height:72px;border:3px solid rgba(126,211,252,.7);border-radius:50%;background:#0a1e35bf;color:#e8f4ff;font-family:Impact,Arial Black,sans-serif;font-size:32px;font-weight:900;line-height:1;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;box-shadow:0 4px #00000059;transition:transform .08s,background .08s}.touch-btn:active{transform:scale(.94) translateY(2px);background:#1e4a7ae6}.touch-left,.touch-right{margin-bottom:4px}.touch-jump{width:80px;height:80px;border-color:#ffe666cc;color:#ffe566}.touch-controls .touch-left{margin-right:auto}.touch-controls .touch-right{margin-left:12px;margin-right:auto}.touch-controls .touch-jump{margin-left:auto}.combos-block .scores-list{min-height:24px}.scores-list{min-height:36px}.game-over-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;font-family:Impact,Arial Black,sans-serif;font-size:16px;color:#fff;-webkit-text-stroke:1px #000;text-shadow:2px 2px 0 #000;background:#000000a6;padding:12px 16px;text-align:center;line-height:1.6;pointer-events:none}.game-over-banner.hidden{display:none}#player-name-hud{font-size:8px;color:#7dd3fc;opacity:.9}#player-name-hud.hidden{display:none}.mute-btn{position:absolute;top:12px;right:12px;z-index:6;width:36px;height:36px;border:2px solid #3a6a9f;border-radius:4px;background:#0a1e35d9;color:#7dd3fc;font-family:inherit;font-size:14px;cursor:pointer;pointer-events:auto;transition:filter .1s,transform .1s}.mute-btn:hover{filter:brightness(1.2);transform:scale(1.05)}.mute-btn.muted{color:#5a7a9a;opacity:.7}.mute-btn.hidden{display:none}@media(max-width:520px),(max-height:780px){body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#app{border-radius:0;box-shadow:none}.menu-header{height:130px}.harold-head{width:90px;height:110px}.graffiti-title{top:12px;left:88px}.graffiti-line{font-size:36px;-webkit-text-stroke:2px #000}.login-center{gap:12px;padding:8px 16px}.login-label{font-size:11px}.login-center .score-name-input{width:min(200px,85%);font-size:16px;min-height:44px}.menu-play .graffiti-item{font-size:22px}.shop-look-btn{font-size:16px}.menu-play .menu-cursor{width:22px;height:32px}.menu-footer{padding:6px 8px 10px}.menu-footer .highscores-panel{grid-template-columns:1fr;gap:8px}.scores-header{font-size:8px}.scores-row{font-size:9px}.scores-list{min-height:28px}.combos-block .scores-list{min-height:20px}#start-btn{min-height:44px;min-width:44px}.mute-btn{top:calc(8px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));width:44px;height:44px}.controls-hint-desktop{display:none}.controls-hint-mobile{display:block;font-size:5px;line-height:2}.game-over-banner{font-size:13px;width:min(90%,320px)}}@media(hover:none)and (pointer:coarse){.graffiti-item.active:hover{filter:drop-shadow(2px 2px 0 #333)}.mute-btn:hover{filter:none;transform:none}}