@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700&family=Bungee&display=swap";
:root{--bg-deep:#090d20;--bg-mid:#11183a;--bg-sheen:#0d3053;--surface-1:#080d1fbd;--surface-2:#11162fd9;--line-soft:#74adff40;--line-hard:#74adff80;--text-main:#eff4ff;--text-dim:#b6c4ec;--accent-core:#29f0ff;--accent-hot:#ff3ea5;--positive:#39f59b;--negative:#ff7d95;--font-display:"Bungee","Trebuchet MS","Segoe UI",sans-serif;--font-body:"Baloo 2","Trebuchet MS","Segoe UI",sans-serif;--space:8px}*{box-sizing:border-box}html,body{min-height:100%;margin:0;padding:0}body{font-family:var(--font-body);color:var(--text-main);background:radial-gradient(circle at 80% 20%,#ff3ea533 0%,transparent 42%),radial-gradient(circle at 12% 82%,#29f0ff38 0%,transparent 45%),linear-gradient(150deg,var(--bg-deep),var(--bg-mid)50%,var(--bg-sheen))}.arcade-shell{gap:16px;width:min(1120px,100% - 24px);margin:24px auto;display:grid}.hud-card,.game-card{border:1px solid var(--line-soft);background:linear-gradient(165deg,var(--surface-1),var(--surface-2));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:24px;padding:20px;box-shadow:0 18px 52px #00000057}.hud-card{gap:18px;display:grid}.overline{letter-spacing:.18em;text-transform:uppercase;color:var(--accent-core);margin:0 0 6px;font-size:.78rem}h1{font-family:var(--font-display);text-wrap:balance;margin:0;font-size:clamp(1.3rem,2vw,2rem);line-height:1.15}.player-input{color:var(--text-dim);gap:6px;font-size:.95rem;display:grid}.mode-switch{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.mode-switch-3{grid-template-columns:repeat(3,minmax(0,1fr))}.mode-chip{text-align:left;border:1px solid var(--line-soft);background:#080d1f80;align-content:center;gap:2px;min-height:58px;display:grid}.mode-chip small{color:var(--text-dim);font-size:.76rem}.mode-chip.active{background:linear-gradient(120deg,#29f0ff3d,#ff3ea52e);border-color:#29f0ffcc;box-shadow:inset 0 1px #fff3,0 0 14px #29f0ff38}.player-input div{flex-wrap:wrap;align-items:stretch;gap:12px;display:flex}.player-save{background:linear-gradient(125deg,#29f0ff52,#ff3ea542);border-color:#29f0ff75;flex:140px;width:100%;padding:10px 14px;font-weight:700;line-height:1.2;box-shadow:inset 0 1px #ffffff42,0 0 10px #29f0ff40}.player-save:hover{border-color:#29f0ffc7;transform:translateY(-1px)}input{border:1px solid var(--line-soft);color:var(--text-main);font:inherit;background:#060c1ddb;border-radius:12px;flex:240px;width:100%;min-width:0;padding:10px 12px}input:focus-visible,button:focus-visible{outline:2px solid var(--accent-core);outline-offset:2px}button{font:inherit;color:var(--text-main);cursor:pointer;border:1px solid #0000;border-radius:12px;padding:10px 14px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;display:grid}.stats-grid article{border:1px solid var(--line-soft);background:#0a0e22e0;border-radius:14px;padding:10px 12px}.stats-grid span{color:var(--text-dim);font-size:.86rem;display:block}.stats-grid strong{font-family:var(--font-display);font-size:1.32rem}.level-progress{color:var(--text-dim);margin:2px 0 0;font-size:.9rem}.progress-panel{border:1px solid var(--line-soft);background:#0a0e229e;border-radius:14px;padding:10px 12px}.progress-panel-wide{grid-column:1/-1}.progress-panel h2{letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin:0 0 8px;font-size:.95rem}.progress-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.progress-grid article{border:1px solid var(--line-soft);background:#080c1eb3;border-radius:10px;padding:8px 10px}.progress-grid span{color:var(--text-dim);font-size:.78rem;display:block}.progress-grid strong{font-family:var(--font-display);font-size:1rem}.game-card{grid-template-rows:auto auto minmax(220px,1fr);gap:14px;transition:box-shadow .3s,border-color .3s;display:grid}.game-card.playing{border-color:var(--accent-core);animation:1.2s ease-in-out infinite pulse-glow;box-shadow:0 0 30px #29f0ff59,0 0 60px #29f0ff33,inset 0 0 30px #29f0ff1a}@keyframes pulse-glow{0%,to{box-shadow:0 0 30px #29f0ff59,0 0 60px #29f0ff33,inset 0 0 30px #29f0ff1a}50%{box-shadow:0 0 50px #29f0ff8c,0 0 100px #29f0ff4d,inset 0 0 50px #29f0ff33}}.round-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.round-actions button{white-space:nowrap;width:100%;min-height:44px}.cta{background:linear-gradient(120deg,#29f0ff45,#ff3ea53b);border-color:#29f0ff80;box-shadow:inset 0 1px #ffffff38,0 0 14px #29f0ff52}.game-card.playing .cta{background:linear-gradient(120deg,#29f0ff80,#ff3ea566);animation:.6s ease-in-out infinite cta-pulse}@keyframes cta-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.ghost{border-color:var(--line-soft);background:#080d1f80}.feedback{border:1px solid var(--line-soft);background:#0a0e22b3;border-radius:12px;margin:0;padding:12px 14px}.feedback.correct{color:#ceffe8;border-color:#39f59b8c}.feedback.wrong{color:#ffd8df;border-color:#ff7d958c}.note-ui-pads{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;display:grid}.note-ui-piano{display:none}.piano{border:1px solid var(--line-soft);background:#060a18e6;border-radius:14px;gap:0;display:grid;position:relative;overflow:hidden}.piano-whites{grid-template-columns:repeat(7,minmax(0,1fr));display:grid}.piano-white{color:#0f1f49;min-height:156px;font-family:var(--font-display);background:linear-gradient(#f8fbff 0%,#dce7ff 100%);border:1px solid #090c1c42;border-top:none;border-bottom-width:3px;justify-content:center;align-items:flex-end;padding:0 0 10px;font-size:.9rem;display:flex}.piano-white:disabled{opacity:.35;cursor:not-allowed}.piano-black{color:#eef3ff;background:linear-gradient(#171717 0%,#030303 100%);border:1px solid #050814f2;border-radius:0 0 8px 8px;justify-content:center;align-items:flex-end;width:68%;min-height:102px;margin:0 auto;padding:0 0 8px;font-size:.7rem;display:flex;transform:translateY(-2px);box-shadow:0 6px 14px #0009}.piano-black:disabled{opacity:1;cursor:not-allowed}.piano-black.is-unavailable{opacity:1;color:#eef3ffd1;background:linear-gradient(#111 0%,#000 100%);border-color:#141414f2}.piano-blacks{pointer-events:none;z-index:2;grid-template-columns:repeat(14,minmax(0,1fr));padding:0 2px;display:grid;position:absolute;top:0;left:0;right:0}.piano-blacks .piano-black{pointer-events:auto}.note-pad{border:1px solid var(--line-hard);min-height:88px;font-family:var(--font-display);background:linear-gradient(160deg,#11183af2,#0b0e24e6);font-size:1.2rem;transition:transform .12s,border-color .18s,box-shadow .18s;box-shadow:inset 0 1px #ffffff29,0 12px 20px #00000040}.note-pad:not(:disabled):hover{border-color:#29f0ffc7;transform:translateY(-2px)scale(1.01);box-shadow:inset 0 1px #ffffff3d,0 0 18px #29f0ff42}.note-pad:disabled{opacity:.44;cursor:not-allowed}@media (min-width:900px){body{justify-content:center;align-items:center;min-height:100vh;padding:16px;display:flex;overflow:hidden}.arcade-shell{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr 1.35fr;align-items:stretch;height:calc(100vh - 32px);margin:0}.hud-card,.game-card{height:100%;min-height:0}.hud-card{gap:12px;padding:16px;overflow:hidden}.hud-card .mode-chip{min-height:48px;padding:8px 10px}.hud-card .stats-grid article{padding:8px 10px}.hud-card .stats-grid strong{font-size:1.08rem}.game-card{grid-template-rows:auto auto minmax(155px,.7fr);overflow:auto}.progress-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.note-ui-pads{display:none}.note-ui-piano{align-self:stretch;height:auto;min-height:0;display:block}.note-ui-piano .piano{height:100%;min-height:155px}.note-ui-piano .piano-whites{height:100%}.note-ui-piano .piano-white{height:100%;min-height:0}.note-ui-piano .piano-blacks{align-items:start;height:56%}.note-ui-piano .piano-black{height:100%;min-height:0}.round-actions button{min-height:60px}.feedback{align-items:flex-start;min-height:96px;display:flex}}