@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";html,body,#root{margin:0;min-height:100%}:root{font-family:Trebuchet MS,Segoe UI,sans-serif;color:#101214;background:#f6f7f9}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 15% 0%,#ffffff 0%,transparent 38%),radial-gradient(circle at 88% 12%,#eceef2 0%,transparent 45%),#f6f7f9}button,select{font:inherit}.app-shell{min-height:100vh;width:100%;padding:12px}.app-shell.menu-mode{display:grid;place-items:center;padding:0}.app-shell.game-mode{display:block}.game-over{width:min(680px,92vw);border:1px solid #d9dde3;background:#fffffff0;border-radius:20px;padding:36px;text-align:center;box-shadow:0 20px 40px #13181e14}.landing{width:100%;min-height:100vh;text-align:center;padding:20px 25vh;padding-bottom:calc(20px + 10vh);margin:0;border:none;background-image:url(/assets/piano-banner-BqOPfveZ.png);background-size:100% auto;background-position:center top;background-repeat:no-repeat;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.landing-buttons{display:grid;gap:10px;justify-items:center;margin-top:20px}.landing-connect-slot{position:relative;width:30vw}.landing-buttons .test-button{margin-top:0}.landing-buttons button{width:30vw;height:auto;line-height:1.1;border:none;background:transparent;color:var(--btn-fg, #0f1113);position:relative;isolation:isolate}.landing-buttons button:before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);background:#5a626b;z-index:0}.landing-buttons button:after{content:"";position:absolute;inset:2px;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);background:var(--btn-bg, #ffffff);z-index:1}.landing-button-label{position:relative;z-index:2}h1,h2,p{margin:0}.landing p,.game-over p{color:#4f5761;margin-top:12px;margin-bottom:24px}.landing h1{font-family:Avenir Next,Segoe UI,Helvetica Neue,Arial,sans-serif;font-size:clamp(2.8rem,8vw,5.5rem);font-weight:900;letter-spacing:.01em}.crawl-title{margin-top:50px;margin-bottom:10px;color:#090b0d;text-transform:uppercase;transform:perspective(560px) rotateX(24deg);transform-origin:center bottom;letter-spacing:.08em;text-shadow:0 1px 0 #ffffff,0 10px 26px rgba(10,14,18,.14)}.start-button{width:270px;height:70px;border:1px solid #0f1113;border-radius:0;background:#0f1113;color:#fff;font-size:1.2rem;font-weight:800;cursor:pointer;box-shadow:0 10px 24px #0f111333;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}.start-button:hover{filter:brightness(1.08)}.test-button{margin-top:12px;min-width:180px}.primary{border:none;border-radius:12px;padding:12px 20px;background:linear-gradient(135deg,#0f1113,#24282d);color:#fff;font-weight:700;cursor:pointer}.primary:hover{filter:brightness(1.08)}.secondary{border:1px solid #0f1113;border-radius:0;padding:12px 20px;background:#fff;color:#0f1113;font-weight:700;cursor:pointer;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}.landing-buttons .start-button,.landing-buttons .secondary{height:auto;padding:10px 0;border:none}.landing-connect-button{--btn-bg: #ffffff;--btn-fg: #0f1113;width:100%}.landing-piano-indicator{position:absolute;top:50%;left:calc(100% + 10px);transform:translateY(-50%);width:30px;height:30px;border-radius:999px;display:inline-grid;place-items:center;border:2px solid currentColor;background:#ffffffeb;box-shadow:0 8px 18px #0f11131f;font-size:.95rem;font-weight:900;line-height:1}.landing-piano-indicator.is-connected{color:#1f9a45}.landing-piano-indicator.is-disconnected{color:#c53a3a}.landing-buttons>button:nth-child(odd){--btn-bg: #ffffff;--btn-fg: #0f1113}.landing-buttons>button:nth-child(2n){--btn-bg: #0f1113;--btn-fg: #ffffff;width:18.9vw}.secondary:hover{filter:brightness(.98)}.game-over-actions{display:inline-flex;gap:10px}.error{margin-top:12px;color:#b62525}.landing-status{max-width:min(560px,82vw);margin-top:14px;padding:10px 14px;border-radius:12px;background:#ffffffe0;font-weight:600;line-height:1.45;box-shadow:0 10px 24px #0f111314}.landing-status.is-success{color:#1f6d43}.landing-status.is-info{color:#335776}.landing-status.is-error{color:#9b2f2f}.game{width:100%;min-height:calc(100vh - 24px);display:flex;flex-direction:column}.hud{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;background:#fffffff5;border:1px solid #d9dde3;border-radius:12px;padding:10px 14px;font-weight:600;color:#14181c;min-height:48px}.hud span{line-height:1.1;white-space:nowrap}.lane{position:relative;flex:1;min-height:0;border-radius:16px;overflow:hidden;background:linear-gradient(to bottom,#1c21296b,#12161c8f),#1b2028;border:1px solid #d8dde5}.staff{position:absolute;inset:0;--staff-step: 64px;--staff-line: rgba(248, 252, 255, .38);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--staff-step) - 2px),var(--staff-line) calc(var(--staff-step) - 2px),var(--staff-line) var(--staff-step));background-size:100% var(--staff-step);animation:staffDrift .8s linear infinite}@keyframes staffDrift{0%{background-position:0 0}to{background-position:0 var(--staff-step)}}.bullet-layer{position:absolute;inset:0;z-index:4;pointer-events:none}.bullet-dot{position:absolute;width:8px;height:8px;border-radius:999px;background:#8dd83d;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #070a0e47}.particle-dot{position:absolute;width:5.2px;height:5.2px;border-radius:999px;background:#f7fbff;transform:translate(-50%,-50%)}.note{position:absolute;transform:translate(-50%,-50%);width:160px;z-index:3}.note-sprite{display:block;width:100%;height:auto;border-radius:10px}.chord-left{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:#121417;color:#fff;font-size:.72rem;font-weight:800;box-shadow:0 6px 14px #0000004d}.note span{font-size:1rem;font-weight:800;line-height:1.2}.piano-image{position:absolute;left:50%;bottom:6px;transform:translate(-50%);width:min(650px,85.8vw);max-height:20%;object-fit:contain;z-index:1;pointer-events:none}.modal-backdrop{position:fixed;inset:0;background:#080a0d6b;display:grid;place-items:center;padding:18px}.modal{position:relative;width:min(430px,94vw);border-radius:16px;border:1px solid #d8dde4;background:#fff;padding:20px;display:grid;gap:14px;color:#161a1f}.landing-modal{width:min(360px,90vw);min-height:auto;gap:10px;padding:22px 20px 20px}.input-picker-modal{width:min(460px,94vw);gap:16px}.game-guide-modal{width:min(900px,96vw);gap:16px;padding:20px}.game-guide-modal h2{text-align:center;margin-bottom:0}.game-guide-image{display:block;width:100%;height:auto;max-height:76vh;object-fit:contain;border-radius:12px}.landing-modal h2{text-align:center;margin-bottom:0;font-size:1.25rem}.landing-modal .modal-divider{display:none}.landing-modal .modal-field span{color:#6a737d;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.landing-modal input[type=range]{width:100%;accent-color:#0f1113;appearance:none;height:20px;background:transparent}.landing-modal input[type=range]::-webkit-slider-runnable-track{height:6px;background:#d8dde4;border-radius:999px}.landing-modal input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:999px;background:#0f1113;border:2px solid #ffffff;margin-top:-5px;box-shadow:0 2px 6px #0f111340}.landing-modal input[type=range]::-moz-range-track{height:6px;background:#d8dde4;border-radius:999px}.landing-modal input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:999px;background:#0f1113;border:2px solid #ffffff;box-shadow:0 2px 6px #0f111340}.modal-button{border:1px solid #0f1113;border-radius:10px;padding:10px 16px;background:#fff;color:#0f1113;font-weight:700;cursor:pointer}.landing-modal .modal-button{margin-top:0;width:100%;padding:12px 14px;border-radius:12px;background:#f7f8fa;font-size:.92rem;text-align:center}.modal-button:hover{filter:brightness(.98)}.modal-close{position:absolute;top:10px;right:10px;border:none;background:transparent;color:#8a9099;font-size:1.4rem;line-height:1;cursor:pointer}.modal-divider{height:1px;width:100%;background:#d8dde4}.modal-field{display:grid;gap:10px;font-size:.95rem;color:#1a1f25}.toggle-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.toggle-button{border:1px solid #cfd5dc;background:#f7f8fa;padding:9px 12px;font-weight:700;cursor:pointer;border-radius:12px;color:#303741;font-size:.9rem;transition:background-color .14s ease,color .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease}.toggle-button.is-active{border-color:#0f1113;background:#0f1113;color:#fff;box-shadow:0 8px 18px #0f111329}.toggle-button:hover{border-color:#0f1113;transform:translateY(-1px)}.modal-placeholder{color:#4f5761;font-size:.95rem}.under-construction-wrap{flex:1;display:grid;place-items:center;width:100%;padding:12px 0}.under-construction-wrap--leaderboard{min-height:min(560px,58vh)}.under-construction-image{width:min(280px,100%);max-width:100%;height:auto;display:block;border:6px solid #000000;border-radius:18px;box-sizing:border-box}.modal-helper{margin:0;color:#4f5761;line-height:1.45}.input-picker-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.input-picker-button{display:grid;width:100%;gap:4px;align-content:start;padding:12px 14px;border:1px solid #cfd5de;border-radius:14px;background:#fff;color:#11161b;text-align:left;cursor:pointer;box-shadow:0 8px 18px #0f11130f;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.input-picker-button:hover{transform:translateY(-1px);border-color:#11161b;box-shadow:0 12px 24px #0f11131a}.input-picker-button.is-dark{background:linear-gradient(180deg,#151a20,#0e1217);color:#f7fbff;border-color:#0e1217}.input-picker-label{font-size:.95rem;font-weight:800}.input-picker-caption{font-size:.84rem;line-height:1.35;color:#566473}.input-picker-button.is-dark .input-picker-caption{color:#f7fbffc2}.input-picker-status.is-success{color:#1f6d43}.input-picker-status.is-info{color:#335776}.modal label{display:grid;gap:8px;font-size:.95rem}.modal select{border:1px solid #cfd5de;border-radius:10px;padding:9px;background:#fff;color:#171b21}.tester-modal{width:min(760px,94vw)}.tester-copy{color:#4f5761;margin:0}.tester-readout{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:#f5f7fa;border:1px solid #d8dde5;font-weight:700;color:#171b21}.tester-scale{position:relative;padding:30px 12px 0}.tester-track{height:14px;border-radius:999px;background:linear-gradient(90deg,#dfe5ec,#cbd4de);border:1px solid #bcc6d1;box-shadow:inset 0 1px 2px #11161c24}.tester-indicator{position:absolute;top:7px;width:18px;height:30px;border-radius:999px;background:#15191d;transform:translate(-50%);box-shadow:0 8px 18px #0e131840}.tester-indicator.is-stable{background:#0d6a32}.tester-ticks{margin-top:14px;display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:0}.tester-tick{position:relative;display:grid;justify-items:center;gap:8px;color:#22272d;font-size:.82rem;font-weight:700}.tester-tick:before{content:"";width:1px;height:14px;background:#aeb8c4}.picker-backdrop{position:fixed;inset:0;background:#080a0d75;display:grid;place-items:center;padding:18px}.picker-modal{width:min(920px,96vw);border-radius:18px;border:1px solid #d8dde4;background:#fff;padding:18px;display:grid;gap:14px;position:relative}.loading-backdrop{position:fixed;inset:0;display:grid;place-items:center;background:#090c1047;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2000}.loading-card{width:120px;height:120px;border-radius:18px;background:#fffffff5;display:grid;place-items:center;box-shadow:0 18px 36px #0c101533}.loading-spinner{width:86%;height:86%;border-radius:50%;border:6px solid #d8dde4;border-top-color:#0f1113;animation:loadingSpin .9s linear infinite}@keyframes loadingSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.picker-modal h2{font-size:1.18rem;color:#171b21}.game-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.game-card{border:none;background:transparent;padding:0;display:grid;gap:12px;text-align:center;color:#1a1f25}.game-card.is-active{cursor:pointer}.game-card.is-active:hover{filter:brightness(.98)}.game-card:disabled{opacity:.58}.game-card-art{width:100%;aspect-ratio:1 / 1;border-radius:12px;border:1px dashed #b7bec8;background:linear-gradient(160deg,#f4f6f9,#eef2f6)}.game-card-copy{display:grid;gap:4px;justify-items:center;text-align:center}.game-card-title{font-size:1.12rem;font-weight:800;line-height:1.2}.game-card-subtitle{color:#6f7883;font-size:.76rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.ear-game-shell{width:100%;min-height:calc(100vh - 24px);display:grid;place-items:center}.ear-game-window{width:min(1200px,92vw);height:min(860px,90vh);border-radius:18px;border:1px solid #1f252d;position:relative;overflow:hidden;background:radial-gradient(circle at 40% 20%,#1b232d 0%,transparent 45%),linear-gradient(180deg,#11151b,#090b0f);background-size:cover;background-position:center;box-shadow:0 24px 42px #0000006b}.ear-game-window.is-aiming-shake{animation:aimShake .28s linear infinite}@keyframes aimShake{0%{transform:translate(0)}20%{transform:translate(-3px,1px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(3px,1px)}to{transform:translate(0)}}.conductor-sprite,.conductor-fallback{position:absolute;left:50%;top:8%;transform:translate(-50%)}.conductor-sprite{width:min(340px,34vw);max-height:42%;object-fit:contain}.conductor-fallback{min-width:180px;padding:16px 20px;border-radius:12px;border:1px solid #2d3947;background:#0c0f15cc;color:#e8eff6;text-transform:uppercase;text-align:center;font-weight:700}.round-badge{position:absolute;left:22px;top:18px;color:#f2f5fa;font-weight:700;letter-spacing:.02em}.revolver-panel{position:absolute;left:40px;bottom:20px}.revolver-panel.is-shaking{animation:revolverShake .24s ease-in-out}.revolver-sprite{width:min(420px,54vw);height:auto}.revolver-fallback{width:min(290px,33vw);height:min(175px,19vw);border-radius:12px;border:1px solid #2d3947;background:#0c0f15d1;color:#f5f8fd;display:grid;place-items:center;font-size:2.1rem;font-weight:700}@keyframes revolverShake{0%{transform:translate(0)}25%{transform:translate(-3px,1px)}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,1px)}to{transform:translate(0)}}.ear-right-ui{position:absolute;right:22px;top:60%;transform:translateY(-50%);display:grid;gap:12px;width:min(190px,28vw)}.timer-pill{border-radius:12px;border:1px solid #2f3946;background:#080b0fc7;color:#f6f9ff;padding:18px 12px;text-align:center;font-size:2rem;font-weight:800}.note-feedback{border-radius:12px;border:1px solid #2f3946;background:#080b0fb8;color:#f6f9ff;min-height:66px;display:grid;place-items:center;font-size:1.22rem;font-weight:800}.ear-flash-overlay{position:absolute;inset:0;background:#ffffff9e;pointer-events:none}.ear-game-over{width:100%;min-height:calc(100vh - 24px);display:grid;place-content:center;text-align:center;gap:10px;background:#000;color:#fff}@media(max-width:760px){.hud{font-size:.84rem;flex-wrap:wrap}.note{width:128px}.start-button{width:230px;height:62px;border-radius:16px;font-size:1.1rem}.landing-buttons button{width:30vw;height:auto;padding:10px 0}.landing-buttons button:nth-child(2n){width:18.9vw}.landing-connect-button{width:100%}.tester-readout{flex-direction:column;align-items:flex-start}.tester-scale{padding-left:4px;padding-right:4px}.tester-tick{font-size:.62rem}.game-card-grid{grid-template-columns:1fr}.input-picker-actions{display:grid;grid-template-columns:1fr}.ear-game-window{width:96vw;height:90vh}.conductor-sprite{width:min(260px,60vw)}.revolver-sprite{width:min(255px,47vw)}.revolver-fallback{width:min(195px,37vw);height:min(115px,22vw);font-size:1.7rem}.ear-right-ui{right:12px;width:min(140px,34vw)}.timer-pill{font-size:1.5rem}}.landing-modal .modal-field{gap:6px}.leaderboard-modal{width:min(820px,96vw);gap:18px;padding:24px}.leaderboard-header h2{text-align:center;margin:0;font-size:1.3rem}.leaderboard-divider{height:2px;width:100%;background:#0f1113;margin-top:10px}.leaderboard-filter{width:50%;margin:14px auto 0}.leaderboard-select{width:100%;border:2px solid #0f1113;border-radius:0;padding:10px 12px;background:#fff;font-family:"Press Start 2P",VT323,Courier New,monospace;font-size:.75rem;text-transform:uppercase}.leaderboard-list{display:grid;gap:16px;max-height:min(560px,58vh);overflow-y:auto;padding-right:6px}.leaderboard-entry{width:min(600px,100%);height:180px;margin:0 auto;border:8px solid #000000;background:#fff;display:grid;grid-template-columns:120px 1fr 170px;align-items:center;gap:20px;padding:20px;font-family:"Press Start 2P",VT323,Courier New,monospace;color:#000;box-sizing:border-box}.leaderboard-avatar{width:120px;height:120px;border:8px solid #000000;background:#fff;display:grid;place-items:center;box-sizing:border-box;image-rendering:pixelated}.leaderboard-avatar-image{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.leaderboard-avatar-fallback{font-size:2rem;line-height:1;color:#000}.leaderboard-name{font-size:clamp(1.2rem,2.6vw,2.1rem);line-height:1.2}.leaderboard-stats{display:grid;gap:10px;justify-items:start}.leaderboard-stat{display:inline-flex;align-items:center;gap:10px;justify-content:flex-start}.leaderboard-stat-icon{width:54px;height:54px;display:grid;place-items:center;overflow:hidden}.leaderboard-stat-icon img{width:100%;height:100%;object-fit:contain;image-rendering:auto;display:block}.leaderboard-stat-value{font-size:1.1rem}