:root{--vh: 1vh;--actual-vh: 100vh;--safe-area-inset-top: env(safe-area-inset-top);--safe-area-inset-bottom: env(safe-area-inset-bottom);--safe-area-inset-left: env(safe-area-inset-left);--safe-area-inset-right: env(safe-area-inset-right)}@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/PressStart2P.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*{margin:0;padding:0;box-sizing:border-box;touch-action:manipulation}body{font-family:"Press Start 2P",Courier New,monospace;background:linear-gradient(90deg,transparent 50%,rgba(45,45,45,.1) 50%),linear-gradient(0deg,transparent 50%,rgba(45,45,45,.1) 50%),linear-gradient(135deg,#e9df97,#f4a6d7,#9adbe8);background-size:8px 8px,8px 8px,100% 100%;color:#2d2d2d;overflow:hidden;touch-action:manipulation;font-size:12px}.game-viewport{width:100vw;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:linear-gradient(135deg,#f4a6d7,#9adbe8)}.game-viewport canvas{border:2px solid #2d2d2d;background:#000}.pause-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:none;justify-content:center;align-items:center;z-index:1000;backdrop-filter:blur(5px)}.pause-container{background:linear-gradient(135deg,#f4a6d7,#9adbe8);border:4px solid #2d2d2d;border-radius:16px;padding:32px;text-align:center;max-width:320px;width:90%;box-shadow:0 8px 32px #0000004d}.pause-title{font-family:"Press Start 2P",monospace;font-size:18px;color:#2d2d2d;margin-bottom:16px;text-shadow:2px 0px 0px white,-2px 0px 0px white,0px 2px 0px white,0px -2px 0px white}.pause-message{font-family:"Press Start 2P",monospace;font-size:12px;color:#2d2d2d;margin-bottom:24px;line-height:1.6;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white}.resume-button,.quit-button{background:#ffffffe6;border:3px solid #2d2d2d;border-radius:8px;color:#2d2d2d;font-family:"Press Start 2P",monospace;font-size:12px;padding:12px 16px;cursor:pointer;transition:all .1s ease;text-shadow:none;display:block;width:100%;max-width:200px;margin:8px auto}.resume-button:hover,.quit-button:hover{background:#e9df97;color:#2d2d2d;transform:translateY(-2px);box-shadow:0 4px 8px #0003}.resume-button:active,.quit-button:active{transform:translateY(0);box-shadow:0 2px 4px #0003}.score-display,.combo-display{font-family:"Press Start 2P",monospace;font-size:11px;color:#2d2d2d;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white;line-height:1.2;white-space:nowrap}.score-display span,.combo-display span{display:block;margin-top:2px;text-align:right}.pause-button{background:#fffc;border:2px solid #2d2d2d;border-radius:4px;color:#2d2d2d;font-family:"Press Start 2P",monospace;font-size:10px;padding:4px 6px;cursor:pointer;transition:all .1s ease;max-width:64px;overflow:hidden;text-overflow:ellipsis}.pause-button:hover{background:#f4a6d7;color:#fff}.canvas-container{flex:1;display:flex;justify-content:center;align-items:stretch;position:relative;min-height:0;padding:10px}.canvas-container canvas{width:auto!important;height:100%!important;max-width:100%;border:2px solid #2d2d2d;background:#000;margin:0 auto}.app-frame .loading-screen,.loading-screen{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(135deg,#b8e6d4,#9adbe8,#e9df97);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:1;transition:opacity .5s ease-out}.app-frame .loading-screen.fade-out,.loading-screen.fade-out{opacity:0;pointer-events:none}.loading-container{text-align:center;padding:20px;background:#fffffff2;border:4px solid #2d2d2d;border-radius:0;box-shadow:8px 8px #2d2d2d4d;max-width:400px;width:90%;max-height:90vh;overflow:hidden}.loading-title{font-family:"Press Start 2P",Courier New,monospace;font-size:clamp(16px,6vw,24px);font-weight:900;color:#2d2d2d;margin-bottom:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90vw;text-shadow:2px 0px 0px white,-2px 0px 0px white,0px 2px 0px white,0px -2px 0px white,2px 2px 0px white,-2px -2px 0px white,2px -2px 0px white,-2px 2px 0px white;animation:bounce8bit 2s ease-in-out infinite}.loading-subtitle{font-family:"Press Start 2P",Courier New,monospace;font-size:12px;color:#f4a6d7;margin-bottom:24px;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white}.loading-progress{margin-bottom:20px}.loading-bar{width:100%;height:20px;background:#2d2d2d;border:2px solid #2d2d2d;margin-bottom:12px;position:relative;overflow:hidden}.loading-fill{height:100%;background:linear-gradient(90deg,#f4a6d7,#9adbe8,#e9df97);width:0%;transition:width .3s ease-out;position:relative}.loading-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.loading-text{font-family:"Press Start 2P",Courier New,monospace;font-size:14px;color:#2d2d2d;font-weight:700;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white}.loading-status{font-family:"Press Start 2P",Courier New,monospace;font-size:10px;color:#9adbe8;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white;min-height:16px}@keyframes bounce8bit{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-8px)}60%{transform:translateY(-4px)}}.app-frame .loading-screen{z-index:9999}.start-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#e9df97,#f4a6d7,#9adbe8);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;padding:20px;gap:16px}.build-info{position:absolute;bottom:20px;right:20px;text-align:right;opacity:.7;font-size:10px;line-height:1.4;color:#2d2d2d}.build-version{font-weight:700;color:#f4a6d7;text-shadow:1px 1px 0px white;margin-bottom:2px}.build-details{font-family:Courier New,monospace;font-size:9px;color:#2d2d2d}.title{font-size:clamp(18px,8vw,32px);font-weight:900;color:#2d2d2d;margin-bottom:16px;text-align:center;line-height:1.2;white-space:normal;word-break:keep-all;overflow-wrap:break-word;max-width:95vw;text-shadow:2px 0px 0px white,-2px 0px 0px white,0px 2px 0px white,0px -2px 0px white,2px 2px 0px white,-2px -2px 0px white,2px -2px 0px white,-2px 2px 0px white;animation:bounce8bit 2s ease-in-out infinite}@keyframes bounce8bit{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.subtitle{font-size:14px;color:#2d2d2d;margin-bottom:16px;text-align:center;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white}.song-selection{margin-bottom:16px;width:100%;max-width:400px}.song-selection label{display:block;margin-bottom:8px;font-size:14px;color:#2d2d2d;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white}.song-list{max-height:300px;overflow-y:auto;overflow-x:hidden;width:100%;max-width:100%;box-sizing:border-box;border:3px solid #2d2d2d;border-radius:8px;background:#ffffffe6;box-shadow:4px 4px #2d2d2d4d;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}.song-item{padding:12px 16px;border-bottom:2px solid #e0e0e0;cursor:pointer;font-family:"Press Start 2P",monospace;font-size:10px;color:#2d2d2d;transition:all .1s ease;background:#fffc;touch-action:pan-y;-webkit-tap-highlight-color:transparent;white-space:normal;overflow-wrap:anywhere;word-break:break-word;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}.song-item:last-child{border-bottom:none}.song-item:hover{background:linear-gradient(45deg,#f4a6d7,#9adbe8);transform:translate(4px)}.song-item.selected{background:linear-gradient(45deg,#f4a6d7,#9adbe8);border-left:6px solid #2d2d2d;font-weight:700;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white}.song-left{display:inline-flex;align-items:center;gap:8px;min-width:0}.song-emoji{flex:0 0 auto}.song-title{flex:1 1 auto;min-width:0;white-space:normal;font-weight:700}.song-right{text-align:right;display:flex;flex-direction:column;gap:2px;min-width:100px}.song-meta{font-weight:400}.song-meta-sub{opacity:.8;font-size:9px;font-weight:400}.song-group-title{padding:8px 16px;background:linear-gradient(45deg,#e9df97,#f4a6d7);font-family:"Press Start 2P",monospace;font-size:8px;color:#2d2d2d;font-weight:700;border-bottom:2px solid #2d2d2d;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white;display:flex;align-items:center;justify-content:space-between}.song-group-left{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}.song-group-date{font-weight:700}.song-list::-webkit-scrollbar{width:8px}.song-list::-webkit-scrollbar-track{background:#e0e0e0;border-radius:4px}.song-list::-webkit-scrollbar-thumb{background:#f4a6d7;border-radius:4px;border:1px solid #2d2d2d}.song-list::-webkit-scrollbar-thumb:hover{background:#9adbe8}.difficulty-selection{margin-bottom:12px;width:100%;max-width:300px}.difficulty-selection label{display:block;margin-bottom:6px;font-size:12px;color:#2d2d2d;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white}.difficulty-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.difficulty-btn{background:#fffc;border:2px solid #2d2d2d;border-radius:6px;color:#2d2d2d;font-family:"Press Start 2P",monospace;font-size:12px;padding:12px 8px;cursor:pointer;transition:all .1s ease;display:flex;align-items:center;justify-content:center;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white}.difficulty-btn:hover{background:linear-gradient(45deg,#f4a6d7,#9adbe8);transform:translateY(-2px);box-shadow:2px 2px #2d2d2d4d}.difficulty-btn.selected{background:linear-gradient(45deg,#f4a6d7,#9adbe8);border-color:#2d2d2d;border-width:3px;font-weight:700}.start-button{background:linear-gradient(45deg,#f4a6d7,#9adbe8);border:3px solid #2d2d2d;border-radius:12px;color:#2d2d2d;font-family:"Press Start 2P",monospace;font-size:14px;padding:16px 24px;cursor:pointer;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white;box-shadow:8px 8px #2d2d2d4d;transition:all .1s ease}.start-button:hover:not(:disabled){transform:translate(4px,4px);box-shadow:4px 4px #2d2d2d4d}.start-button:active:not(:disabled){transform:translate(8px,8px);box-shadow:none}.start-button:disabled{background:linear-gradient(45deg,#ccc,#aaa);color:#666;cursor:not-allowed;opacity:.6}.banana-emoji{font-size:24px;margin:0 8px;animation:sway8bit 3s ease-in-out infinite}@keyframes sway8bit{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}.result-screen{background:linear-gradient(135deg,#e9df97,#f4a6d7,#9adbe8);display:none;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch}.result-container{background:#fffffff2;border:4px solid #2d2d2d;border-radius:16px;padding:24px;text-align:center;max-width:400px;width:100%;box-shadow:8px 8px #2d2d2d4d}.result-title{font-size:20px;font-weight:900;color:#2d2d2d;margin-bottom:16px;text-shadow:2px 0px 0px white,-2px 0px 0px white,0px 2px 0px white,0px -2px 0px white,2px 2px 0px white,-2px -2px 0px white,2px -2px 0px white,-2px 2px 0px white;animation:bounce8bit 2s ease-in-out infinite}.song-title-result{font-size:14px;font-weight:700;color:#f4a6d7;margin-bottom:24px;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white}.result-stats{margin-bottom:24px}.result-item{display:flex;justify-content:space-between;align-items:center;margin:12px 0;font-size:14px;color:#2d2d2d;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white}.result-label{font-weight:700}.result-value{font-size:16px;color:#f4a6d7;text-shadow:2px 0px 0px white,-2px 0px 0px white,0px 2px 0px white,0px -2px 0px white}.result-message{font-size:16px;color:#2d2d2d;margin-bottom:24px;text-shadow:2px 0px 0px white,-2px 0px 0px white,0px 2px 0px white,0px -2px 0px white}.result-buttons{display:flex;flex-direction:column;gap:12px}.result-button{background:linear-gradient(45deg,#f4a6d7,#9adbe8);border:3px solid #2d2d2d;border-radius:8px;color:#2d2d2d;font-family:"Press Start 2P",monospace;font-size:12px;padding:12px 16px;cursor:pointer;text-shadow:1px 0px 0px white,-1px 0px 0px white,0px 1px 0px white,0px -1px 0px white;box-shadow:4px 4px #2d2d2d4d;transition:all .1s ease}.result-button:hover{transform:translate(2px,2px);box-shadow:2px 2px #2d2d2d4d}.result-button:active{transform:translate(4px,4px);box-shadow:none}#shareResultButton{background:linear-gradient(45deg,#e9df97,#f4a6d7);order:-1}#shareResultButton:hover{background:linear-gradient(45deg,#f4a6d7,#e9df97)}#shareResultButton:disabled{background:linear-gradient(45deg,#ccc,#aaa);color:#666;cursor:not-allowed;opacity:.6}html,body{height:100%}body{display:grid;place-items:center;background:linear-gradient(135deg,#f4a6d7,#9adbe8);overflow:hidden}.app-frame{width:375px;height:500px;border:4px solid #2d2d2d;background:#fdf7e4;box-shadow:0 8px 24px #00000040;position:relative;overflow:hidden}.start-screen,.play-screen,.result-screen,.loading-screen,.pause-overlay{position:absolute;inset:0}.start-screen{display:flex;flex-direction:column;align-items:center;padding:12px;gap:8px}.title{font-size:18px;text-align:center;color:#2d2d2d;text-shadow:2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff}.subtitle{font-size:10px;color:#2d2d2d}.song-selection{width:100%;max-width:340px}.song-selection label{display:block;font-size:10px;margin:4px 0}.song-list{height:160px;overflow-y:auto;overflow-x:hidden;border:3px solid #2d2d2d;border-radius:8px;background:#ffffffe6}.song-item{padding:8px 10px;border-bottom:2px solid #eee;font-size:9px;white-space:normal;overflow-wrap:anywhere}.song-group-title{padding:6px 10px;font-size:8px;font-weight:700}.difficulty-selection{width:100%;max-width:340px}.difficulty-selection label{display:block;font-size:10px;margin:4px 0}.difficulty-buttons{display:flex;gap:6px}.difficulty-btn{flex:1;font-size:9px;padding:8px 0}.start-button{font-size:11px;padding:10px 14px;margin-top:6px}.build-info{position:absolute;bottom:6px;right:6px;font-size:8px;opacity:.8}.play-screen{display:none;flex-direction:column;padding:8px;gap:6px}.top-row{display:grid;grid-template-columns:160px 1fr;grid-auto-rows:90px;gap:6px;align-items:stretch}.youtube-container{height:90px;border:2px solid #2d2d2d;background:#000}#youtube-player{width:100%;height:100%}.game-ui-bar{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;grid-template-areas:"score pause" "combo pause";align-items:center;justify-content:stretch;row-gap:4px;column-gap:8px;font-size:10px;border:2px solid #2d2d2d;background:#ffffffe6;padding:6px 8px}.game-ui-bar .score-display{grid-area:score}.game-ui-bar .combo-display{grid-area:combo}.game-ui-bar .pause-button{grid-area:pause;justify-self:end;align-self:center;min-width:36px}.canvas-container{flex:1;display:grid;place-items:center}#gameCanvas{width:270px;height:360px;border:2px solid #2d2d2d;background:#000}.loading-screen{display:grid;place-items:center;background:#00000059}.loading-container{width:90%;max-width:320px;border:4px solid #2d2d2d;background:linear-gradient(135deg,#e9df97,#f4a6d7);border-radius:12px;padding:14px;text-align:center}.loading-title{font-size:14px;margin-bottom:6px}.loading-subtitle{font-size:9px;margin-bottom:8px}.loading-bar{width:100%;height:10px;border:3px solid #2d2d2d;background:#fff;border-radius:8px;overflow:hidden}.loading-fill{height:100%;width:0%;background:#9adbe8;transition:width .2s ease}.loading-text{font-size:10px;margin-top:6px}.pause-overlay{display:none;background:#000000b3}.pause-container{width:85%;max-width:280px;margin:auto;border:4px solid #2d2d2d;border-radius:12px;padding:16px;background:linear-gradient(135deg,#f4a6d7,#9adbe8);text-align:center}.pause-title{font-size:14px;margin-bottom:8px}.pause-message{font-size:10px;margin-bottom:10px}.resume-button,.quit-button{font-size:10px;padding:8px 12px;width:100%;margin:4px 0}.result-screen{display:none;padding:8px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.result-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}.result-title{font-size:14px}.song-title-result{font-size:10px}.result-item{font-size:10px;margin:3px 0}.result-button{font-size:10px;padding:6px 10px;margin:2px}