/* Theory games build on Staff Reading's tactile cards and calibrated notation. */
.theory-game{--theory-accent:#7040d9;--theory-soft:#eee4ff;--theory-light:#f8f4ff}
.theory-triad{--theory-accent:#a64b26;--theory-soft:#ffe1bb;--theory-light:#fff7ed}
.theory-detective{--theory-accent:#267569;--theory-soft:#bceadd;--theory-light:#effaf6}
.theory-game .play-heading{background:linear-gradient(125deg,var(--theory-soft),#fff 80%)}
.theory-game .heading-symbol{color:var(--theory-accent);font-size:5rem;font-weight:900;transform:rotate(-12deg)}
.theory-body{padding:28px 32px 36px}.theory-dev-note{font-weight:800;font-size:.68rem;letter-spacing:.08em;color:#665675;margin:0 0 24px}
.theory-row{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.theory-row p{margin:0}
.theory-level-grid,.theory-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.theory-level{background:#fff;border:2px solid #ded6e8;border-radius:15px;padding:16px;text-align:left;min-height:103px;transition:transform .16s,border-color .16s,box-shadow .16s}
.theory-level strong,.theory-level small{display:block}.theory-level small{color:#62546f;margin-top:7px;line-height:1.4;font-size:.78rem}
.theory-chip,.theory-number,.theory-quality{border:2px solid #ded5e8;min-height:48px;background:#fff;border-radius:13px;padding:10px 17px;color:#352644;font-weight:800;box-shadow:0 3px 0 #ddd4e7;transition:transform .13s,border-color .13s,background .13s,box-shadow .13s}
.theory-chip:hover,.theory-number:hover,.theory-quality:hover,.theory-level:hover{transform:translateY(-3px);border-color:var(--theory-accent)}
.theory-game button:active{transform:translateY(2px) scale(.98);box-shadow:none}
.theory-game .selected{border-color:var(--theory-accent);background:var(--theory-soft);color:#271835;box-shadow:0 3px 0 var(--theory-accent)}
.theory-lab-link{display:flex;align-items:center;gap:15px;margin-top:8px;padding:16px 20px;width:100%;border:1px dashed var(--theory-accent);border-radius:14px;background:var(--theory-light);text-align:left;color:#633118}
.theory-lab-link strong{white-space:nowrap}.theory-lab-link span{font-size:.85rem;line-height:1.4}
.theory-session-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.theory-session-top p{margin:0;font-size:.75rem}.theory-session-top .clear-filters{padding:8px}
.theory-scoreboard{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0 18px}.theory-scoreboard span{display:flex;gap:8px;align-items:center;border:1px solid #e6deec;background:#f8f5fb;border-radius:11px;padding:8px 16px;font-size:.8rem;font-weight:700}.theory-scoreboard strong{font-size:1.15rem;color:#5b2bb4}
.theory-intro{text-align:center;margin:18px auto;max-width:700px}.theory-intro h2{margin:0;font-size:clamp(1.5rem,3vw,2.15rem);letter-spacing:-.045em}.theory-intro p{font-size:.98rem;line-height:1.55;color:#62566d;margin:10px 0}
.theory-stage{position:relative;max-width:740px;margin:0 auto 22px;border:1px solid #d8cfe3;border-radius:23px;background:linear-gradient(135deg,var(--theory-light),#fff 65%);box-shadow:inset 0 1px 0 #fff,0 5px 0 #ede6f2;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.theory-stage-label{display:block;padding-top:18px;text-align:center;font-size:.62rem;letter-spacing:.18em;font-weight:900;color:var(--theory-accent)}
.theory-stage svg{width:100%;height:auto;max-height:272px;overflow:visible;margin:5px auto 0}.theory-audio-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:6px 14px 16px}.theory-audio-controls .theory-chip{min-height:40px;font-size:.8rem;padding:8px 14px}
.theory-note.active ellipse{filter:drop-shadow(0 0 7px #9b68ef88)}.theory-stage.is-correct{border-color:#2b8c5d;box-shadow:0 5px 0 #8ccbaf,0 0 28px #58bb7d25;animation:theory-settle .35s ease}
.theory-answer-field{padding:0;border:0;margin:20px 0}.theory-answer-field legend,.theory-control-label{text-align:center;font-size:.87rem;font-weight:850;color:#4e3e5e;margin-bottom:12px;width:100%}.theory-control-label small{display:block;margin-top:6px;font-size:.68rem;font-weight:600;color:#72657d}
.theory-number-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.theory-number{padding:12px 5px;min-width:0;font-size:.92rem;min-height:60px}
.theory-quality-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:690px;margin:16px auto}.theory-quality{padding:13px 8px;font-size:.92rem}
.theory-letter-row{display:flex;justify-content:center;gap:9px}.theory-letter-row .theory-chip{font-size:1.25rem;flex:1;max-width:78px;padding:10px 0;min-height:55px}.theory-accidentals{margin-top:12px}.theory-accidentals .theory-chip{font-size:.8rem}
.theory-note-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;max-width:640px;margin:16px auto 23px}
.theory-slot{display:flex;flex-direction:column;align-items:center;gap:7px;min-height:135px;border:2px dashed #c6b5d8;border-radius:19px;padding:14px 8px;background:#fcfaff;color:#4d3664;transition:transform .15s,background .15s}
.theory-slot.root{background:var(--theory-soft);border-style:solid;border-color:var(--theory-soft)}.theory-slot.selected{border-style:solid}.theory-slot small{font-weight:900;font-size:.68rem;letter-spacing:.12em}.theory-slot strong{font-size:2rem;line-height:1.1}.theory-slot span{font-size:.7rem;font-weight:650}.theory-slot:hover{transform:translateY(-3px)}
.theory-picker{max-width:690px;margin:0 auto}.theory-feedback{min-height:42px;margin:18px auto 12px;max-width:740px;text-align:center;line-height:1.55;font-size:.91rem;font-weight:650;border-radius:13px;padding:8px 12px}.theory-feedback.good{background:#e2f5e9;color:#196041}.theory-feedback.error{background:#fff0e5;color:#823819}
.theory-session-actions{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}.theory-session-actions .primary-button{min-width:175px}.theory-check{display:block;margin:20px auto 0}.theory-hint{font-size:.78rem;color:#776682;text-align:center;line-height:1.5}
.theory-lesson-progress{display:flex;gap:6px;max-width:600px;margin:20px auto 0}.theory-lesson-progress span{flex:1;height:6px;border-radius:6px;background:#e3daed}.theory-lesson-progress .done{background:var(--theory-accent)}
.theory-count-path{display:flex;align-items:center;justify-content:center;gap:12px}.theory-count-note{min-width:60px;min-height:73px;padding:10px;background:#fff;border:2px solid #e0d4ed;border-radius:16px;color:#513279;box-shadow:0 4px 0 #e6ddf0}.theory-count-note strong{display:block;font-size:1.45rem}.theory-count-note small{display:block;font-weight:800;font-size:.72rem}.theory-count-note.counted{background:var(--theory-soft);border-color:var(--theory-accent)}
.theory-checkpoint{margin:22px 0 0;padding:17px;border:1px solid #dfd5e8;border-radius:17px;background:#f9f6fc}.theory-checkpoint .theory-row{gap:8px}.theory-checkpoint .theory-chip{font-size:.85rem}
.theory-recipe{max-width:650px;margin:18px auto;text-align:center;line-height:1.6;font-size:.9rem;color:#5c4770}.theory-family-info{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:15px}.theory-family-info span{padding:12px;border-radius:12px;background:var(--theory-soft);font-size:.75rem;font-weight:800}
.theory-piano{display:flex;justify-content:center;max-width:680px;min-height:105px;margin:18px auto;gap:3px}.theory-piano button{flex:1;min-width:0;align-self:stretch;border:2px solid #3a2a4f;border-radius:0 0 8px 8px;background:#fff;color:#392448;font-size:.76rem;font-weight:850;padding:54px 0 10px}.theory-piano .black{background:#30233f;color:#fff;max-height:75px;padding-top:35px}.theory-piano .lit{border-color:#7d49dd;box-shadow:inset 0 -8px 0 #aa7cec}.theory-lab-root{display:flex;align-items:center;justify-content:center;gap:14px;font-weight:800;margin:20px}.theory-lab-root select{font:inherit;padding:10px 22px;border:2px solid #c7b4d7;border-radius:12px;background:#fff;min-height:46px}
.card-interval{--art-bg:#dbc8ff;--art-accent:#6831b9;--art-rotate:-8deg}.card-triad{--art-bg:#ffddae;--art-accent:#a25028;--art-rotate:8deg}.card-chorddetective{--art-bg:#bee7d8;--art-accent:#226d5d;--art-rotate:-10deg}.card-interval .art-icon img,.card-triad .art-icon img,.card-chorddetective .art-icon img{width:88px;height:88px}
@keyframes theory-settle{0%{transform:scale(.985)}65%{transform:scale(1.008)}100%{transform:scale(1)}}
@media(max-width:900px){.theory-body{padding:24px}.theory-number-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.theory-body{padding:20px 14px 28px}.theory-mode-grid,.theory-level-grid{grid-template-columns:1fr}.theory-level{min-height:78px}.theory-session-top{align-items:flex-start;flex-direction:column;gap:10px}.theory-session-top .theory-row{width:100%;justify-content:space-between}.theory-quality-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theory-number-grid{gap:7px}.theory-number{min-height:51px}.theory-letter-row{gap:5px}.theory-letter-row .theory-chip{min-height:48px;font-size:1.1rem}.theory-chip{padding:9px 12px}.theory-note-slots{gap:7px}.theory-slot{min-height:112px;padding:12px 4px}.theory-slot strong{font-size:1.7rem}.theory-slot span{font-size:.6rem}.theory-stage{border-radius:17px}.theory-stage svg{max-height:none;min-height:150px}.theory-intro p{font-size:.89rem}.theory-count-path{gap:7px}.theory-count-note{min-width:0;flex:1;max-width:65px}.theory-count-note strong{font-size:1.2rem}.theory-scoreboard{gap:6px}.theory-scoreboard span{padding:7px 10px}.theory-lab-link{flex-direction:column;align-items:flex-start;gap:5px}.theory-piano button{font-size:.6rem}.theory-feedback{padding-inline:4px}.theory-checkpoint{padding:12px}.theory-session-actions>*{flex:1}.theory-game .heading-symbol{display:none}.card-interval .art-icon img,.card-triad .art-icon img,.card-chorddetective .art-icon img{width:62px;height:62px}}
@media(prefers-reduced-motion:reduce){.theory-game *,.theory-game *::before,.theory-game *::after{animation:none!important;transition:none!important}.theory-game button:hover,.theory-game button:active{transform:none}}
.theory-game .play-heading h1{color:#261b33}.theory-game .play-heading p{color:#685573}.theory-game .play-heading .eyebrow{color:var(--theory-accent)}
/* Keep the notation and answer controls together on school laptops. */
@media(min-width:1050px){
 .theory-practicing .play-heading{padding:15px 24px}.theory-practicing .play-heading h1{font-size:1.85rem}.theory-practicing .play-heading p:not(.eyebrow){display:none}.theory-practicing .play-heading .eyebrow{margin:0 0 5px;font-size:.64rem}.theory-practicing .heading-symbol{font-size:2.5rem}
 .theory-practicing .theory-body{padding:18px 24px 24px}
 .theory-practicing [data-theory-screen="session"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:20px;grid-template-areas:"top top" "score score" "timer timer" "progress progress" "intro intro" "stage controls" "feedback feedback" "actions actions"}
 .theory-practicing [data-context]{font-size:.7rem}.theory-practicing .theory-session-top{grid-area:top;margin-bottom:8px}.theory-practicing [data-scoreboard]{grid-area:score;margin:4px 0 10px}.theory-practicing [data-timer]{grid-area:timer}.theory-practicing [data-lesson-progress]{grid-area:progress}
 .theory-practicing [data-intro]{grid-area:intro;margin:8px auto 16px}.theory-practicing [data-intro] h2{font-size:1.65rem}.theory-practicing [data-stage]{grid-area:stage;align-self:start;width:100%;margin:0}.theory-practicing [data-notation]{max-height:240px;min-height:190px}.theory-practicing [data-interaction]{grid-area:controls;min-width:0}.theory-practicing [data-feedback]{grid-area:feedback;margin:12px auto 7px;min-height:30px}.theory-practicing [data-actions]{grid-area:actions}
 .theory-practicing .theory-number-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.theory-practicing .theory-answer-field{margin:0 0 15px}.theory-practicing .theory-answer-field legend{margin-bottom:9px}.theory-practicing .theory-number{min-height:51px}.theory-practicing .theory-quality-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin:8px auto}.theory-practicing .theory-note-slots{margin:0 auto 16px;gap:8px}.theory-practicing .theory-slot{min-height:112px}.theory-practicing .theory-letter-row{gap:5px}.theory-practicing .theory-letter-row .theory-chip{min-height:49px}.theory-practicing .theory-control-label small{font-size:.65rem}.theory-practicing .theory-audio-controls{gap:7px}.theory-practicing .theory-audio-controls .theory-chip{font-size:.75rem;padding:8px 10px}
}