.course-hero {padding:24px 0 12px;}
.course-hero .lead {max-width:650px;}
.course-progress {padding:20px 24px;border:1px solid var(--gold-dim);border-radius:14px;background:rgba(207,171,87,.05);margin:20px 0 28px;}
.course-progress progress {width:100%;height:10px;accent-color:var(--gold);margin:10px 0;}
.course-small,.content .course-small {font-size:13px;color:var(--cream-dim);}
.course-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 32px;}
.course-card {border:1px solid rgba(217,188,125,.2);border-radius:14px;padding:22px;display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(135deg,rgba(24,62,46,.5),rgba(14,23,18,.8));}
.course-card:last-child {grid-column:1/-1;}
.content .course-card h3 {font-size:21px;margin:8px 0;}
.course-card p {flex:1;}
.course-card .course-status {font-size:13px;margin:8px 0 14px;color:var(--gold-bright);}
.course-card button,.course-answers button,.course-secondary {font:600 14px var(--font-body);cursor:pointer;padding:12px 18px;min-height:44px;border:1px solid var(--gold-dim);border-radius:9px;background:transparent;color:var(--cream);}
.course-card button:hover,.course-secondary:hover {background:rgba(207,171,87,.12);}
.course-secondary {margin:10px 8px 0 0;}
.course button:focus-visible,.course a:focus-visible {outline:2px solid var(--gold-bright);outline-offset:4px;}
#lessonPanel {scroll-margin-top:90px;border:1px solid var(--gold-dim);border-radius:16px;padding:clamp(16px,4vw,30px);margin:24px 0;background:#10231b;}
#lessonPanel[hidden] {display:none;}
#lessonPanel h2 {margin-top:10px;}
.lesson-tip {border-left:3px solid var(--gold);padding-left:15px;}
.content .question-progress {font-size:13px;margin-top:28px;color:var(--gold);}
.content .course-hand {font-size:clamp(21px,4vw,30px);margin:10px 0 20px;}
.course-answers {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.course-answers button {background:#152e23;text-align:left;font-size:17px;}
.course-answers button:disabled {cursor:default;opacity:.65;}
.course-answers button.correct {background:#24553e;border-color:#8ac69f;opacity:1;}
.course-answers button.incorrect {background:#552b28;border-color:#e1a09a;opacity:1;}
#lessonFeedback {min-height:32px;padding:16px 0 0;}
.course-review {border-top:1px solid var(--gold-dim);margin:20px 0;}
.course-review li {margin-bottom:16px;}
.course-result-actions {display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.course-result-actions .deal-btn {display:inline-block;text-decoration:none;white-space:normal;}
#nextQuestion {margin-right:10px;white-space:normal;}
@media(max-width:600px){.course-grid{grid-template-columns:1fr}.course-card:last-child{grid-column:auto}.course-card{padding:18px}.course-result-actions>*{width:100%}.course-progress{padding:16px}.course-hero{padding-top:8px}}
/* Course-specific controls avoid inherited game-button color collisions. */
.course .course-button {display:inline-flex;justify-content:center;align-items:center;gap:8px;box-sizing:border-box;min-height:50px;padding:13px 20px;border:2px solid #ddbd77;border-radius:11px;font:700 16px/1.35 var(--font-body);text-align:center;text-decoration:none;cursor:pointer;white-space:normal;}
.course .course-button.primary {background:#ddbd77;color:#162219;}
.course .course-button.secondary {background:#244d39;color:#fff6e3;border-color:#9cbeaa;}
.course .course-button:hover {filter:brightness(1.08);}
.course [hidden] {display:none!important;}
.course-card.is-complete {border-color:#6eaa86;background:linear-gradient(130deg,#183629,#10251c);}
.course-card.is-active {box-shadow:inset 3px 0 #ddbd77;}
.course-card .course-status {display:flex;flex-wrap:wrap;align-items:center;gap:10px;line-height:1.5;}
.completion-badge {display:inline-block;padding:5px 10px;border-radius:20px;background:#244d39;color:#c4f0d5;font-weight:700;}
.completion-badge.in-progress {background:#423b24;color:#f3d991;}
.course .course-done {color:#c4f0d5;margin:10px 0 0;font-weight:600;}
.course-progress .course-button {margin-top:8px;}
.lesson-open .course-hero,.lesson-open .course-support,.lesson-open #resumeCourse,.lesson-open #continueCourse {display:none;}
.lesson-open .course-progress {margin:8px 0 16px;padding:14px 18px;}
.lesson-open #courseStorage {display:none;}
#courseListTitle {scroll-margin-top:90px;}
#lessonPanel {margin-top:16px;}
.course-back {min-height:44px;padding:8px 0;margin:0 0 18px;border:0;background:none;color:#ead29b;font:600 14px var(--font-body);cursor:pointer;}
.result-heading {display:flex;align-items:center;gap:14px;}
.result-check {display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:#28553e;color:#cef2d8;font-size:30px;}
.content .result-heading h2 {font-size:clamp(24px,4vw,32px);margin:5px 0;line-height:1.15;}
.content .result-saved {margin-top:16px;}
.result-score {display:grid;grid-template-columns:1fr 1fr;border:1px solid #3e5d48;border-radius:12px;margin:20px 0;overflow:hidden;background:#142b20;}
.result-score>div {display:flex;flex-direction:column;gap:5px;padding:18px;}
.result-score>div+div {border-left:1px solid #3e5d48;}
.result-score strong {font:700 32px var(--font-display);color:#f3e9d1;}
.result-score strong span {font-size:18px;color:#bacabb;}
.result-score div>span {font-size:13px;color:#c2cfc4;}
.course-result-actions {display:grid;grid-template-columns:1fr;gap:12px;margin:18px 0 14px;}
.course-review {border:1px solid #3e5d48;border-radius:10px;padding:0 16px;}
.course-review summary,#lessonPanel details>summary {min-height:44px;padding:12px 0;cursor:pointer;color:#e8d19c;}
.course-review ul {margin-top:12px;}
.result-footer {display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:16px;}
.result-footer .course-secondary {margin:0;}
.result-footer>a {display:inline-flex;align-items:center;min-height:44px;}
.content .question-progress {display:flex;flex-direction:column;gap:8px;}
.question-progress progress {width:100%;height:6px;accent-color:#ddbd77;}
#nextQuestion {margin:0 0 8px;}
#lessonFeedback:not(:empty) {padding:16px;margin:14px 0;background:#1b3829;border-radius:10px;}
#lessonFeedback p {margin:0;}
@media(max-width:600px){
 .course-hero h1 {font-size:30px;line-height:1.13;}
 .course-hero .lead {font-size:16px;}
 .course-grid {gap:12px;}
 .course-card {padding:16px;}
 .course-card p {font-size:14px;margin-bottom:6px;}
 .course-card button {width:100%;min-height:48px;}
 .course .course-button {width:100%;}
 .course-result-actions>* {min-width:0;}
 .result-score>div {padding:14px 12px;}
 .result-score strong {font-size:28px;}
 .result-check {width:42px;height:42px;font-size:26px;}
 .result-heading {gap:10px;}
 .content .result-heading h2 {font-size:24px;}
 #lessonPanel {scroll-margin-top:72px;padding:16px;}
 #lessonPanel>p,#lessonPanel details p {font-size:15px;line-height:1.55;}
 .course-answers button {min-height:52px;padding:12px;font-size:16px;}
 #pauseLesson {width:100%;margin:4px 0 0;}
 .result-footer {align-items:stretch;gap:10px;}
 .result-footer>* {width:100%;justify-content:center;text-align:center;}
}
@media(prefers-reduced-motion:reduce){.course *{scroll-behavior:auto!important;transition:none!important;}}
