:root { color-scheme: dark; --background:#090b0f; --surface:#11151b; --raised:#181d25; --line:rgba(255,255,255,.1); --line-strong:rgba(255,255,255,.18); --text:#f5f7fa; --muted:#8c95a2; --accent:#67e8f9; --violet:#a78bfa; --correct:#86efac; --wrong:#fb7185; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { min-height:100vh; background:radial-gradient(circle at 78% 8%,rgba(103,232,249,.07),transparent 29%),var(--background); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,select { font:inherit; cursor:pointer; }
button:focus-visible,select:focus-visible,.fret:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.app { min-height:100vh; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px clamp(20px,4vw,56px); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:9px; color:var(--text); font-size:13px; font-weight:700; text-decoration:none; }
.brand-mark { width:10px; height:10px; background:linear-gradient(135deg,var(--accent),var(--violet)); border-radius:50%; box-shadow:0 0 14px rgba(103,232,249,.42); }
.site-header>p { margin:0; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; padding:24px clamp(20px,4vw,56px) 20px; }
.eyebrow,.prompt-label { margin:0 0 6px; color:var(--muted); font-size:9px; font-weight:750; letter-spacing:.17em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(27px,3.3vw,44px); font-weight:610; letter-spacing:-.05em; }
.page-heading>p { max-width:480px; margin:0 0 3px; color:var(--muted); font-size:12px; line-height:1.55; }
.game-shell { margin:0 clamp(20px,4vw,56px) 32px; }
.settings { display:grid; grid-template-columns:repeat(3,minmax(130px,1fr)) repeat(2,minmax(110px,.75fr)) minmax(140px,.9fr); align-items:end; gap:9px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:12px 12px 0 0; }
.setting>span,.toggle>span { display:block; margin-bottom:6px; color:var(--muted); font-size:9px; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.setting select,.toggle,.start-button { width:100%; height:40px; border:1px solid var(--line); border-radius:7px; }
.setting select { padding:0 34px 0 11px; appearance:none; background:linear-gradient(45deg,transparent 50%,var(--muted) 50%) calc(100% - 16px) 17px/5px 5px no-repeat,linear-gradient(135deg,var(--muted) 50%,transparent 50%) calc(100% - 11px) 17px/5px 5px no-repeat,var(--raised); color:var(--text); }
.toggle { padding:0 11px; display:flex; align-items:center; justify-content:space-between; background:var(--raised); color:var(--text); text-align:left; }
.toggle>span { margin:0; }.toggle strong { color:var(--muted); font-size:11px; }.toggle.active strong { color:var(--accent); }
.start-button { padding:0 16px; background:var(--accent); color:#071014; border-color:transparent; font-size:12px; font-weight:800; }
.start-button:hover { background:#a5f3fc; }
.game-status { min-height:130px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:30px; padding:17px 20px; background:var(--raised); border-right:1px solid var(--line); border-left:1px solid var(--line); }
.target-line { display:flex; align-items:baseline; gap:14px; min-height:52px; }
.target-note { font-size:clamp(38px,5vw,62px); line-height:.9; letter-spacing:-.06em; }.target-string { color:var(--text); font-size:clamp(14px,1.5vw,19px); }
.feedback { min-height:18px; margin:7px 0 0; color:var(--muted); font-size:11px; }.feedback.correct { color:var(--correct); }.feedback.wrong { color:var(--wrong); }
.stats { display:grid; grid-template-columns:repeat(5,minmax(66px,1fr)); gap:8px; }
.stats div { min-width:70px; padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:7px; }
.stats span { display:block; margin-bottom:5px; color:var(--muted); font-size:8px; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }.stats strong { font-size:18px; font-weight:650; }
.fretboard-panel { background:var(--surface); border:1px solid var(--line); border-radius:0 0 12px 12px; overflow:hidden; }
.fretboard-meta { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 15px; border-bottom:1px solid var(--line); }.fretboard-meta p,.legend { margin:0; color:var(--muted); font-size:9px; }.fretboard-meta p strong { color:var(--text); font-weight:650; }
.legend { display:flex; gap:15px; }.legend span { display:flex; align-items:center; gap:6px; }.legend i { width:9px; height:9px; background:rgba(167,139,250,.35); border:1px solid rgba(196,181,253,.6); border-radius:50%; }.legend i.answer { background:var(--correct); border-color:var(--correct); }
.fretboard-scroll { overflow-x:auto; overflow-y:hidden; padding:25px 20px 10px; scrollbar-color:#3b424d transparent; scrollbar-width:thin; }
.fretboard-stage { min-width:1570px; }
.fretboard,.fret-numbers { display:grid; grid-template-columns:60px repeat(22,minmax(62px,1fr)); }
.fretboard { background:linear-gradient(90deg,#303742 0 60px,#6f3519 60px,#8d4b24 100%); border:1px solid #4b5563; border-radius:7px 7px 0 0; overflow:hidden; }
.fret { position:relative; height:clamp(50px,6vh,62px); display:flex; align-items:center; justify-content:center; padding:0; background:transparent; border:0; border-right:2px solid rgba(229,231,235,.72); color:transparent; }
.fret::before { content:""; position:absolute; left:0; right:0; height:1px; background:rgba(255,255,255,.28); }.fret.open { background:rgba(35,42,52,.86); border-right:5px solid #e5e7eb; }
.fret.inlay::after { content:""; position:absolute; width:7px; height:7px; right:6px; bottom:5px; border-radius:50%; background:rgba(255,255,255,.25); }.fret.double-inlay::after { content:"••"; position:absolute; right:5px; bottom:3px; color:rgba(255,255,255,.35); font-size:10px; letter-spacing:3px; }
.marker { position:relative; z-index:2; width:34px; height:34px; display:grid; place-items:center; background:rgba(167,139,250,.16); color:transparent; border:1px solid rgba(196,181,253,.5); border-radius:50%; font-size:12px; font-weight:750; opacity:0; transform:scale(.8); transition:opacity .12s,transform .12s,background .12s; }
.fret.in-range .marker { opacity:.32; transform:scale(.88); }.fret.out-of-range { opacity:.3; }
.fret.in-range:not(.correct):not(.wrong):not(.reveal):hover .marker,.fret.in-range:not(.correct):not(.wrong):not(.reveal):focus-visible .marker { opacity:1; background:rgba(167,139,250,.72); border-color:#c4b5fd; box-shadow:0 0 0 4px rgba(167,139,250,.16),0 0 18px rgba(167,139,250,.5); transform:scale(1.08); }.fret.correct .marker { opacity:1!important; background:var(--correct); border-color:var(--correct); transform:scale(1.08); }.fret.wrong .marker { opacity:1!important; background:var(--wrong); border-color:var(--wrong); transform:scale(1.08); }.fret.reveal .marker { opacity:1!important; background:var(--correct); border-color:var(--correct); }
.fret.out-of-range { cursor:default; }.fret-number { height:27px; display:grid; place-items:center; color:var(--muted); font-size:10px; font-weight:650; }
@media(max-width:1000px){.settings{grid-template-columns:repeat(2,minmax(0,1fr))}.start-button{grid-column:1/-1}.game-status{grid-template-columns:1fr}.stats{width:100%}}
@media(max-width:620px){.site-header,.page-heading{padding-right:16px;padding-left:16px}.page-heading{align-items:start;flex-direction:column;gap:10px}.game-shell{margin-right:16px;margin-left:16px}.settings{grid-template-columns:1fr}.start-button{grid-column:auto}.game-status{padding:16px}.stats{grid-template-columns:1fr 1fr}.fretboard-meta{align-items:start;flex-direction:column;gap:7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}