:root{color-scheme:dark;--bg:#0c1422;--panel:#162234;--panel2:#1c2b40;--line:#304258;--txt:#f3f6fb;--muted:#9aacc2;--accent:#5de0b6;--red:#ff7f88}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -20%,#213955,var(--bg) 60%);color:var(--txt);font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}.app{max-width:1050px;margin:auto;padding:18px clamp(14px,3vw,32px) 40px}header,.brand,.row,.gamehead{display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{justify-content:start}.brandmark{display:grid;place-items:center;background:var(--accent);color:#092c26;width:43px;height:43px;border-radius:13px;font-size:29px;font-weight:800}.brand strong{display:block;font-size:19px;letter-spacing:-.4px}.brand small,.muted,footer{color:var(--muted)}.iconbtn{background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--txt);font-size:22px;padding:6px 12px}nav{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:23px 0}nav button{border:0;background:transparent;color:var(--muted);padding:12px 17px;font-weight:650;border-bottom:3px solid transparent}nav button.active{color:var(--accent);border-bottom-color:var(--accent)}button,select{font:inherit;cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.modegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.mode{display:flex;flex-direction:column;align-items:start;gap:8px;min-height:94px;padding:14px;background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:14px;text-align:left;font-weight:650}.mode b{font-size:25px;color:var(--muted);line-height:1}.mode.active{border-color:var(--accent);background:#193b3b}.mode.active b{color:var(--accent)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(15px,3vw,27px);margin-bottom:16px}.gamehead{align-items:start}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--accent)}h1{font-size:clamp(22px,4vw,30px);line-height:1.2;margin:8px 0}h2{font-size:18px;margin:0 0 12px}p{margin:5px 0 0;color:var(--muted)}.scorebox{min-width:70px;text-align:center;background:var(--panel2);border-radius:12px;padding:8px}.scorebox small{display:block;color:var(--muted);font-size:10px;letter-spacing:1px}.scorebox strong{display:block;font-size:30px;color:var(--accent);line-height:1.3}.scorebox #timerDisplay{font-size:15px;color:#fff}.fretwrap{overflow-x:auto;margin:23px -6px 18px;padding:4px 6px 12px}.fretboard{position:relative;min-width:610px;height:230px;border-radius:8px;background:linear-gradient(135deg,#4a3329,#624538 50%,#372a28);overflow:hidden;user-select:none;touch-action:pan-x}.fretboard .string{position:absolute;left:49px;right:13px;height:1px;background:#d9dce0;box-shadow:0 1px 2px #0009;pointer-events:none}.fretboard .fret{position:absolute;top:19px;bottom:27px;width:3px;background:linear-gradient(90deg,#9ba5af,#f0f0ef,#7d8793);pointer-events:none}.fretboard .nut{width:6px;background:#f6e8cc}.fretboard .dot{position:absolute;width:13px;height:13px;border-radius:50%;background:#c4ab86aa;transform:translate(-50%,-50%);pointer-events:none}.fretboard .stringlabel{position:absolute;left:7px;transform:translateY(-50%);color:#f5dfbb;font-weight:800;font-size:14px;pointer-events:none}.fretboard .fretlabel{position:absolute;bottom:4px;transform:translateX(-50%);font-size:10px;color:#eee1d3;pointer-events:none}.position{position:absolute;transform:translate(-50%,-50%);height:30px;width:30px;border:0;border-radius:50%;background:transparent;color:transparent;display:grid;place-items:center;font-weight:850;z-index:2;padding:0}.position.target{background:var(--accent);color:#10382e;box-shadow:0 0 0 5px #5de0b63b}.position.selected{background:#75b8ff;color:#0b2440}.position.correct{background:var(--accent);color:#10382e}.position.wrong{background:var(--red);color:#40151b}.position:focus-visible{outline:2px solid white}.answers{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.answers button{border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:10px;min-height:47px;font-weight:700}.answers button:disabled{cursor:default;opacity:.65}.answers button.correct{border-color:var(--accent);background:#1b5a4b;opacity:1}.answers button.wrong{border-color:var(--red);background:#61313a;opacity:1}.feedback{min-height:27px;margin-top:13px;font-weight:650}.feedback.good{color:var(--accent)}.feedback.bad{color:var(--red)}.bottom{border-top:1px solid var(--line);padding-top:14px;margin-top:8px;color:var(--muted)}.primary{background:var(--accent);color:#092e27;border:0;padding:10px 17px;border-radius:10px;font-weight:800}.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);padding:9px 13px;border-radius:10px}.mini .ministats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.ministats>div,.statgrid>div{background:var(--panel2);padding:14px;border-radius:12px}.ministats strong,.statgrid strong{font-size:23px;display:block;color:var(--accent)}.ministats small,.statgrid small{display:block;color:var(--muted)}.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 28px}.barrow{display:grid;grid-template-columns:60px 1fr 85px;gap:12px;align-items:center;margin:12px 0}.bar{height:10px;background:#304258;border-radius:10px;overflow:hidden}.bar>div{height:100%;background:var(--accent)}.weakitem{padding:8px 0;border-bottom:1px solid var(--line)}.danger{margin-top:24px;border:1px solid #9e4c57;background:transparent;color:#ff929b;padding:10px 15px;border-radius:10px}label{display:block;margin:18px 0;color:var(--txt);font-weight:650}select{display:block;width:100%;margin-top:7px;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:11px}.checks{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}.checks label{margin:0;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-weight:500}.checks input{accent-color:var(--accent)}footer{text-align:center;font-size:12px;padding:10px}@media(max-width:650px){.modegrid{grid-template-columns:repeat(2,1fr)}.mode{min-height:75px;flex-direction:row;align-items:center}.mode b{font-size:23px}.answers{grid-template-columns:repeat(4,1fr)}.gamehead{gap:6px}.statgrid{grid-template-columns:repeat(2,1fr)}.ministats>div{padding:10px}.ministats strong{font-size:19px}nav button{padding:10px 12px}.barrow{grid-template-columns:45px 1fr 75px}}