.sng-game{--sng-bg:#f7f8fb;--sng-panel:#fff;--sng-text:#172033;--sng-muted:#596579;--sng-border:#d9deea;--sng-accent:#4657d9;--sng-accent-strong:#2f3fb5;--sng-correct:#16734a;--sng-wrong:#b42318;box-sizing:border-box;max-width:860px;margin:2rem auto;padding:clamp(1rem,3vw,2rem);border:1px solid var(--sng-border);border-radius:24px;background:var(--sng-panel);color:var(--sng-text);font-family:inherit;box-shadow:0 18px 50px rgba(23,32,51,.08)}.sng-game *,.sng-game *:before,.sng-game *:after{box-sizing:inherit}.sng-game__header{text-align:center}.sng-game__eyebrow{margin:0 0 .35rem;color:var(--sng-accent);font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.sng-game__title{margin:0;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.08}.sng-game__intro{max-width:620px;margin:.8rem auto 0;color:var(--sng-muted)}.sng-game__toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:1.5rem}.sng-field{display:grid;gap:.35rem;color:var(--sng-muted);font-size:.88rem;font-weight:700}.sng-field select{width:100%;min-height:44px;padding:.55rem .7rem;border:1px solid var(--sng-border);border-radius:12px;background:#fff;color:var(--sng-text);font:inherit}.sng-field select:focus-visible,.sng-game button:focus-visible{outline:3px solid rgba(70,87,217,.28);outline-offset:2px}.sng-game__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1rem 0}.sng-game__stats>div{padding:.75rem;border:1px solid var(--sng-border);border-radius:14px;background:var(--sng-bg);text-align:center}.sng-game__stats span{display:block;color:var(--sng-muted);font-size:.78rem}.sng-game__stats strong{display:block;margin-top:.15rem;font-size:1.25rem}.sng-game__stage{display:grid;justify-items:center;gap:.9rem}.sng-staff-wrap{width:100%;overflow:hidden;border:1px solid var(--sng-border);border-radius:18px;background:#fff}.sng-staff{display:block;width:100%;height:auto;min-height:240px}.sng-staff__lines line,.sng-staff__ledger line,.sng-staff__note line{stroke:currentColor;stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}.sng-staff__ledger line{stroke-width:3}.sng-staff__note ellipse{fill:currentColor}.sng-staff__clef{fill:currentColor;font-family:"Noto Music","Segoe UI Symbol","Apple Symbols",serif}.sng-staff__clef--treble{font-size:86px}.sng-staff__clef--bass{font-size:72px}.sng-game__clef-label{margin:-.25rem 0 0;color:var(--sng-muted);font-size:.9rem;font-weight:700}.sng-game__answers{display:grid;grid-template-columns:repeat(7,minmax(50px,1fr));gap:.55rem;width:min(100%,660px)}.sng-game__answers button,.sng-game__restart{min-height:48px;border:1px solid var(--sng-border);border-radius:14px;background:#fff;color:var(--sng-text);font:inherit;font-weight:800;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background-color .12s ease}.sng-game__answers button:hover:not(:disabled),.sng-game__restart:hover{border-color:var(--sng-accent);transform:translateY(-1px)}.sng-game__answers button:disabled{cursor:default;opacity:.72}.sng-game__answers button[data-result=correct]{border-color:var(--sng-correct);background:rgba(22,115,74,.1);color:var(--sng-correct)}.sng-game__answers button[data-result=wrong]{border-color:var(--sng-wrong);background:rgba(180,35,24,.08);color:var(--sng-wrong)}.sng-game__feedback{min-height:2.2rem;text-align:center}.sng-game__feedback p{margin:0;color:var(--sng-muted);font-weight:700}.sng-game__feedback p[data-state=correct]{color:var(--sng-correct)}.sng-game__feedback p[data-state=wrong]{color:var(--sng-wrong)}.sng-game__restart{padding:.65rem 1rem;background:var(--sng-accent);border-color:var(--sng-accent);color:#fff}.sng-game__restart:hover{background:var(--sng-accent-strong);border-color:var(--sng-accent-strong)}.sng-game__noscript{margin:1rem 0 0;padding:.8rem;border-radius:12px;background:#fff4e5;color:#663c00}@media (max-width:700px){.sng-game__toolbar{grid-template-columns:1fr}.sng-game__answers{grid-template-columns:repeat(4,1fr)}.sng-staff{min-height:190px}}@media (max-width:430px){.sng-game{border-radius:16px}.sng-game__stats{gap:.4rem}.sng-game__answers{grid-template-columns:repeat(3,1fr)}}@media (prefers-reduced-motion:reduce){.sng-game__answers button,.sng-game__restart{transition:none}}