:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#0a1320;color:#eaf2f8}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 20%,#16313c,transparent 65%),#0a1320}#flashcards{max-width:570px;margin:auto;padding:24px 20px 18px}#flashcards button,#flashcards select{font:inherit;color:#eaf2f8;background:#182c3b;border:1px solid #3c5666;border-radius:9px;min-height:44px;padding:0 13px;cursor:pointer}#flashcards button:focus-visible,#flashcards select:focus-visible{outline:3px solid #ffd18c;outline-offset:2px}#flashcards button:disabled{opacity:.45;cursor:default}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{font-size:10px;letter-spacing:.18em;color:#99b5c0;margin:0 0 5px}#flashcards h1{font-size:27px;letter-spacing:-1px;margin:0;font-weight:600}#help{min-width:44px}.setup-row{display:flex;align-items:center;gap:10px;margin:16px 0}.setup-row label,.setup-row span{font-size:12px;color:#b1c2cc}.setup-row span{margin-left:auto}#mute{font-size:11px!important}.stats{display:flex;justify-content:space-between;padding:10px 4px 14px}.stats span{display:flex;flex-direction:column;gap:4px}.stats span:last-child{text-align:right}.stats small{font-size:9px;letter-spacing:.15em;color:#a4b9c8}.stats strong{font-size:21px;font-weight:500;font-variant-numeric:tabular-nums}.card-stack{position:relative;margin:0 5px 16px}.card-stack:before,.card-stack:after{content:'';position:absolute;inset:8px -5px -8px;border-radius:17px;background:#223e4a;border:1px solid #44606a;transform:rotate(-1.5deg);z-index:0}.card-stack:after{inset:4px -2px -4px;background:#1a303e;transform:rotate(1deg)}.card{position:relative;z-index:1;border:1px solid #52717a;border-radius:15px;background:linear-gradient(135deg,#193440,#101f2e);padding:14px 16px 8px;box-shadow:0 12px 30px #0003;overflow:hidden}.card-heading{position:relative;margin-bottom:8px}.card-heading>span:first-child{font-size:12px;color:#b2c9ce}#flashcards h2{font-size:24px;letter-spacing:-.6px;margin:1px 0 0;font-weight:600}.card-mark{position:absolute;right:0;top:0;font-size:35px;color:#91dbc2}#board{position:relative;width:286px;max-width:100%;margin:auto;display:grid;grid-template-columns:22px repeat(6,1fr);--fret-height:40px;grid-auto-rows:40px;padding-bottom:0;isolation:isolate}.string-name,.fret-label{display:flex;align-items:center;justify-content:center;font-size:11px;color:#b6c7ce}.string-name{height:22px}.fret-label{font-variant-numeric:tabular-nums}.cell{position:relative;display:grid;place-items:center;border-bottom:1px solid #65767c;background:#142631}.cell:before{content:'';position:absolute;height:100%;width:1px;left:50%;background:#9eacaf;z-index:-0}.cell.low:before{width:2px}.cell.nut{border-top:3px solid #c6c1ab}.cell.open{background:transparent;border-bottom:3px solid #c6c1ab}.cell.open:before{background:transparent}#flashcards .note{position:relative;width:100%;height:100%;min-height:0;padding:0;border:0;background:transparent;border-radius:0;display:grid;place-items:center;touch-action:manipulation}#flashcards .note:disabled{opacity:1}.note span{display:grid;place-items:center;border-radius:50%;width:27px;height:27px;background:#dce9ee;color:#112b34;border:2px solid #fff7;font-size:12px;font-weight:750;box-shadow:0 2px 5px #0005}.note.root span{background:#9ce8c7;border:2px solid #effff8;color:#103626}.note.wrong span{background:#f9aaa3;color:#51201d}.note.root span:after{content:'';position:absolute;width:33px;height:33px;border:1px solid #b3ffe1;border-radius:50%}#feedback{height:34px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:550;text-align:center;color:#c5dedb}#overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:22px;background:#102330f5;backdrop-filter:blur(9px)}#overlay[hidden]{display:none}#overlay strong{font-size:27px;letter-spacing:-1px}#overlay p{font-size:14px;line-height:1.7;white-space:pre-line;color:#b9cfd6}#flashcards #begin{background:#a2e8cb;color:#132f2b;border:0;min-width:170px;font-weight:650}.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.actions button{font-size:12px!important;padding:0 5px!important}.footnote{font-size:11px;text-align:center;color:#90aaba;margin:12px 0 0;min-height:15px}#sound-status:not(:empty){margin-right:9px;color:#a2e8cb}dialog{background:#122936;color:#eaf2f8;border:1px solid #567380;border-radius:14px;max-width:450px;width:calc(100% - 32px);line-height:1.6}dialog::backdrop{background:#020913ba}dialog p{font-size:14px}.reveal{animation:reveal .23s ease-out}@keyframes reveal{from{transform:translateY(4px);opacity:.75}to{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){.reveal{animation:none}*{scroll-behavior:auto!important}}@media(max-width:640px){#flashcards{padding:10px 12px 10px}.eyebrow{font-size:8px}#flashcards h1{font-size:23px}.setup-row{margin:8px 0;gap:7px}.setup-row label{display:none}.setup-row select{font-size:13px!important}.setup-row span{font-size:11px}.stats{padding:4px 3px 9px}.stats strong{font-size:18px}.stats small{font-size:8px}.card{padding:9px 12px 3px}#flashcards h2{font-size:21px}.card-heading{margin-bottom:4px}#board{--fret-height:36px;grid-auto-rows:36px}.card-stack{margin-bottom:13px}#feedback{height:30px;font-size:11px}.footnote{margin-top:7px}}@media(min-width:768px){#flashcards{padding-top:32px}.card{padding:20px 30px 10px}#board{width:330px;--fret-height:46px;grid-auto-rows:46px}.card-heading{margin-bottom:14px}.stats{padding-top:16px;padding-bottom:20px}.card-stack{margin-bottom:23px}.actions button{min-height:48px!important}}

@media(max-width:640px){#flashcards[data-phase="asking"] .setup-row,#flashcards[data-phase="feedback"] .setup-row{display:none}#flashcards[data-phase="asking"] .stats,#flashcards[data-phase="feedback"] .stats{padding-top:9px}.setup-row .bh-setup-sharing button{font-size:11px!important;padding:0 9px!important}.setup-row span{font-size:10px}}
@media(max-width:640px) and (max-height:700px){#flashcards .stats span{flex-direction:row;align-items:baseline;gap:5px}#flashcards .stats strong{font-size:16px}#flashcards .stats small{font-size:7px;letter-spacing:.04em}#flashcards .card-heading>span:first-child{display:none}#flashcards .card-heading h2:before{content:'Find the ';font-size:12px;font-weight:400;color:#b2c9ce}#flashcards .card-mark{font-size:25px}#flashcards .footnote{display:none}}

/* Sitewide fretboard vocabulary: SOC/framework beige neck, dark strings/frets,
   white inlays and black notes. The SVG sits behind unchanged, disjoint hit cells. */
#board .neck{position:absolute;left:22px;top:22px;width:calc(100% - 22px);height:calc(100% - 22px);overflow:visible;pointer-events:none;z-index:0}
#board .cell{background:transparent;border:0}
#board .cell:before{display:none}
#board .string-name,#board .fret-label{position:relative;z-index:1}
#flashcards .note{z-index:2}
#flashcards .note span{background:#080808;color:#fff;border:2px solid #f8fafc;box-shadow:0 2px 4px #0005}
#flashcards .note.root span{background:#080808;color:#fff;border-color:#f5cc75}
#flashcards .note.root span:after{border:2px solid #f5cc75;width:34px;height:34px}
#flashcards .note.wrong span{background:#953b36;color:#fff;border-color:#ffd2cb}
#flashcards .note:focus-visible{outline:none}
#flashcards .note:focus-visible span{outline:3px solid #efbc53;outline-offset:3px}
@media(hover:hover){#flashcards .note:not(:disabled):hover span{transform:scale(1.08);box-shadow:0 3px 7px #0007}}

/* A slimmer neck proportion, keeping fret height and aligned note hit columns. */
#flashcards #board{width:258px}
@media(min-width:768px){#flashcards #board{width:294px}}

#flashcards .actions{grid-template-columns:repeat(5,minmax(0,1fr))}
#scores-dialog{max-height:85svh;overflow:auto;width:min(430px,calc(100vw - 28px))}
#scores-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}
#scores-dialog h2{font-size:24px}#scores-scope{font-weight:600;color:#a2e8cb;margin-bottom:4px}
#scores-location,.score-note{font-size:11px!important;color:#aabdc8}
#score-entry{display:flex;gap:12px;align-items:end}#score-entry[hidden]{display:none}
#score-entry label{font-size:12px}#score-name{display:block;width:110px;margin-top:5px;padding:8px;background:#081824;color:#a2e8cb;border:1px solid #668894;border-radius:7px;font:700 25px monospace;letter-spacing:.15em}
#score-list{padding-left:26px}#score-list li{padding:8px 0;font:19px monospace}#score-list strong{float:right;color:#a2e8cb}#score-list small{display:block;font:11px system-ui;color:#aabdc8;margin-top:4px}#score-status{color:#a2e8cb;font-size:12px}

/* Use the available phone card width and enlarge the frets and note markers together. */
@media(max-width:640px){
 #flashcards #board{width:330px;--fret-height:44px;grid-auto-rows:44px}
 #flashcards .note span{width:32px;height:32px}
 #flashcards .note.root span:after{width:39px;height:39px}
}
@media(max-width:640px) and (max-height:700px){
 #flashcards #board{--fret-height:40px;grid-auto-rows:40px}
}