:root{color-scheme:light;font-family:Avenir Next,Trebuchet MS,Segoe UI,sans-serif;line-height:1.45;font-weight:400;--page-bg: #f5f1e8;--page-bg-deep: #eee6d8;--surface: rgba(255, 253, 248, .94);--surface-muted: #f7f2e9;--border: #ddd2c0;--border-strong: #cab9a2;--text: #20303d;--text-soft: #5f707b;--accent: #35556b;--accent-strong: #284457;--accent-soft: #dbe5eb;--warm: #b76c49;--warm-soft: #f1e2d8;--success: #5f8569;--success-soft: #e6efe8;background:radial-gradient(circle at top,rgba(255,255,255,.82),transparent 28rem),linear-gradient(180deg,var(--page-bg) 0%,var(--page-bg-deep) 100%);color:var(--text)}*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-width:320px;min-height:100dvh;color:var(--text);background:radial-gradient(circle at top,rgba(255,255,255,.82),transparent 28rem),linear-gradient(180deg,var(--page-bg) 0%,var(--page-bg-deep) 100%);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font:inherit}button:focus-visible{outline:3px solid rgba(53,85,107,.24);outline-offset:3px}.page-shell{width:min(1240px,calc(100vw - 20px));margin:0 auto;padding:10px 0 14px}.game-panel{border:1px solid var(--border);border-radius:28px;background:var(--surface);box-shadow:0 18px 40px #20303d14;min-height:calc(100dvh - 24px);padding:16px;display:flex;flex-direction:column}.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.game-title{margin:0;color:var(--text);font-size:clamp(1.5rem,2.4vw,2rem);line-height:.94;letter-spacing:-.05em;white-space:nowrap}.toolbar-stats{display:flex;flex:1;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}.difficulty-picker{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.difficulty-button{border:1px solid var(--border);border-radius:999px;padding:9px 14px;background:var(--surface-muted);color:var(--accent);font-size:.95rem;font-weight:700;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease}.difficulty-button.is-active{border-color:var(--warm);background:var(--warm-soft);color:var(--warm)}.difficulty-button:hover:not(.is-active){border-color:var(--border-strong)}.mode-badge,.tier-label,.timer-value{border-radius:999px;padding:8px 14px;font-size:.95rem;font-weight:700}.mode-badge{background:var(--accent-soft);color:var(--accent)}.mode-badge.is-recall{background:var(--warm-soft);color:var(--warm)}.tier-label{background:var(--surface-muted);color:var(--text-soft)}.timer-value{background:var(--surface-muted);color:var(--text);font-variant-numeric:tabular-nums}.restart-button{border:1px solid var(--border);border-radius:999px;padding:11px 18px;background:var(--surface-muted);color:var(--accent);font-weight:700;cursor:pointer;white-space:nowrap}.restart-button:hover{border-color:var(--border-strong)}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}.stat-card{border:1px solid var(--border);border-radius:18px;background:var(--surface-muted);padding:10px 12px;text-align:center}.stat-label{display:block;color:var(--text-soft);font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.stat-card strong{display:block;margin-top:4px;font-size:1.35rem;line-height:1}.message{margin:12px 0 0;min-height:1.4em;text-align:center;color:var(--text-soft);font-size:1.02rem}.message.is-shake{animation:shake .42s ease}@keyframes correct-pulse{0%{box-shadow:0 0 #5f856947}to{box-shadow:0 0 0 18px #5f856900}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.playfield{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;min-height:0}.staff-host{width:min(720px,100%);flex:1;display:flex;align-items:flex-start;justify-content:center;padding-top:clamp(0px,1.8dvh,16px);min-height:0;border-radius:24px;transition:background-color .16s ease,box-shadow .16s ease}.playfield.is-correct .staff-host{background:#5f856914;animation:correct-pulse .52s ease-out}.playfield.is-wrong .staff-host{background:#b76c491f;box-shadow:inset 0 0 0 2px #b76c495c;animation:shake .42s ease}.staff-svg{width:100%;max-height:min(47dvh,330px);height:auto}.staff-line,.ledger-line{stroke:var(--text);stroke-width:2;stroke-linecap:round}.treble-clef-symbol,.bass-clef-symbol{fill:var(--text);font-family:Bravura,Petaluma,Opus,Maestro,Apple Symbols,Noto Music,Segoe UI Symbol,serif;font-style:normal;font-weight:400;text-anchor:middle;-webkit-user-select:none;user-select:none}.treble-clef-symbol{font-size:170px}.bass-clef-symbol{font-size:64px}.note-head{fill:var(--text)}.letter-buttons{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:min(760px,100%);min-height:clamp(86px,15dvh,128px);border:2px solid var(--text);border-radius:18px;overflow:hidden;background:var(--text);box-shadow:0 12px 26px #20303d1a}.letter-button{position:relative;min-width:0;min-height:0;border:0;border-right:2px solid var(--text);border-radius:0;background:#fffdf8;color:var(--accent-strong);font-size:clamp(1.35rem,3.2vw,2rem);font-weight:800;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:0 0 16px;box-shadow:inset 0 -8px #20303d0a}.letter-button:last-child{border-right:0}.letter-button.has-black-key-after:after{content:"";position:absolute;top:0;right:calc(-1*clamp(12px,2vw,18px));z-index:2;width:clamp(24px,4vw,36px);height:58%;border-radius:0 0 8px 8px;background:var(--text);pointer-events:none}.letter-button:hover:not(:disabled){background:#f8efe7;color:var(--warm)}.letter-button.is-correct,.letter-button.is-correct:disabled{background:var(--success-soft);color:var(--success);opacity:1}.letter-button.is-wrong,.letter-button.is-wrong:disabled{background:var(--warm-soft);color:var(--warm);opacity:1}.letter-button:disabled{opacity:.72;cursor:not-allowed}.end-dialog{border:1px solid var(--border);border-radius:24px;padding:24px;max-width:28rem;background:var(--surface);color:var(--text)}.end-dialog::backdrop{background:#20303d47}.end-dialog h2{margin:0 0 10px;font-size:1.6rem}.end-dialog p{margin:0 0 18px;color:var(--text-soft)}@media(orientation:landscape)and (min-width:900px){.game-panel{padding:14px 18px 18px}.toolbar{flex-wrap:nowrap}.stats-grid,.message{margin-top:8px}.playfield{flex-direction:column;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}.staff-host{flex:1;max-width:none;align-items:flex-start}.staff-svg{max-height:min(50dvh,360px)}.letter-buttons{width:min(820px,88vw);min-height:clamp(92px,16dvh,132px)}}@media(max-width:720px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}