.practice-page { background: #f3f6f8; }
.practice-shell { width: min(1320px, calc(100% - 48px)); margin: 26px auto 40px; }
.practice-page .landing-header { width: min(1320px, calc(100% - 48px)); }
.practice-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 26px; }
.eyebrow { color: #346954; font-size: .875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; }
.practice-heading h1 { font-size: clamp(2rem, 4vw, 3rem); color: #0b1f3a; letter-spacing: -.045em; margin: 0; line-height: 1.1; }
.practice-heading p:not(.eyebrow) { margin: 12px 0 0; color: #526374; font-size: 1rem; }
.session-score { display: grid; gap: 4px; text-align: right; min-width: 140px; color: #536477; font-size: .875rem; }
.session-score strong { color: #0b1f3a; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.session-score small { font-size: .875rem; }
.lesson-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px; }
.lesson-list button, .lesson-list > span { background: #e8edf0; border: 1px solid #d7e0e6; border-radius: 8px; padding: 13px 10px; font-size: .875rem; text-align: left; font-weight: 700; }
.lesson-list button[aria-current="step"] { background: #0b1f3a; color: white; border-color: #0b1f3a; }
.lesson-list button .lesson-number { display: inline-block; margin-right: 6px; opacity: .75; }
.practice-workspace { max-width: 960px; margin-inline: auto; min-width: 0; }
.field-card { background: #12392e; border: 1px solid #174b3c; color: #effaf5; border-radius: 16px; overflow: hidden; }
.field-topline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 18px 20px 0; font-size: .875rem; font-weight: 700; }
#role-label { color: #ffdf6b; }
.field-viewport { position: relative; height: clamp(300px, 38vw, 480px); width: 100%; }
.field-viewport canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.field-viewport svg { width: 100%; height: 100%; display: block; }
.field-message { position: absolute; bottom: 8px; left: 16px; right: 16px; padding: 8px 12px; font-size: .875rem; border-radius: 6px; background: #0b231fe6; margin: 0; }
.field-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 8px 12px 16px; font-size: .875rem; color: #d5e8df; }
.field-legend span { display: inline-flex; align-items: center; gap: 6px; }
.field-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.legend-you { background: #ffca28; }.legend-defense { background: #c1ddff; }.legend-runner { background: #ff8979; }
.field-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; border-top: 1px solid #ffffff24; background: #0c2b23; }
.practice-page button, .practice-page select { font: inherit; cursor: pointer; }
.field-controls button, .field-controls select { color: #effaf5; background: #21483d; border: 1px solid #5b7b6f; border-radius: 7px; min-height: 44px; padding: 8px 10px; font-size: .875rem; }
.field-controls label { display: flex; align-items: center; gap: 6px; font-size: .875rem; }
.practice-page button:disabled { opacity: .5; cursor: default; }
.motion-setting { display: flex; align-items: center; gap: 8px; padding: 0 16px 16px; background: #0c2b23; font-size: .875rem; }
.motion-setting input { width: 18px; height: 18px; accent-color: #ffca28; }
.decision-card { background: white; padding: 26px; border: 1px solid #dce3e9; border-radius: 16px; box-shadow: 0 8px 30px #0b1f3a06; }
.scenario-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: #426152; font-size: .875rem; font-weight: 700; }
.decision-card h2 { color: #0b1f3a; font-size: 1.6rem; letter-spacing: -.025em; margin: 18px 0 12px; }
.decision-card p { font-size: 1rem; line-height: 1.6; }
#situation { color: #526374; }
.decision-question { font-weight: 750; color: #0b1f3a; }
.answer-list { display: grid; gap: 10px; }
.answer-list button { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 14px; min-height: 56px; border: 1px solid #c9d5df; border-radius: 9px; background: #f8fafc; font-size: 1rem; line-height: 1.35; }
.answer-list button:hover:not(:disabled) { border-color: #326c56; background: #eef7f1; }
.answer-list button:disabled { opacity: 1; }
.answer-letter { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e5ebf0; font-size: .875rem; font-weight: 800; flex: 0 0 30px; }
.answer-list .answer-correct { border-color: #258047; background: #eaf7ed; }
.answer-list .answer-selected { border-color: #ad6933; background: #fff4e8; }
.answer-state { font-size: .875rem; font-weight: 700; }
.decision-cue { color: #677786; font-size: .875rem !important; padding-top: 6px; }
.decision-feedback { margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid #dce3e9; }
.decision-feedback h3 { margin: 0; color: #205b3e; font-size: 1.2rem; }
.decision-feedback details { border-radius: 8px; padding: 12px; background: #f0f5f2; }
.decision-feedback summary { font-weight: 750; cursor: pointer; line-height: 1.5; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.feedback-actions button, .practice-summary button { border: 1px solid #c0ced9; border-radius: 7px; padding: 12px; min-height: 44px; background: white; font-size: .875rem; font-weight: 700; }
#variation, #next, .practice-summary button { color: white; background: #0b1f3a; border-color: #0b1f3a; }
.practice-notes { margin-top: 22px; color: #5b6b78; font-size: .875rem; line-height: 1.5; }
.practice-notes p { margin: 6px 0; }
.practice-summary { margin-top: 22px; border: 1px solid #b8d6c6; padding: 22px; border-radius: 12px; background: #eaf6ee; }
.practice-summary h2 { margin-top: 0; }
.situation-coach { margin: 18px 0; padding: 14px; border: 1px solid #b8cec3; border-radius: 10px; background: #f1f7f3; }
.situation-coach summary { cursor: pointer; font-weight: 750; line-height: 1.5; min-height: 30px; }
.practice-coach-heading { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.practice-coach-heading img { border-radius: 50%; }
.situation-coach label { display: block; font-size: .875rem; font-weight: 700; margin-bottom: 8px; }
.situation-coach label span { font-weight: 400; }
.situation-coach textarea { width: 100%; padding: 12px; border: 1px solid #adbdc7; border-radius: 8px; resize: vertical; background: white; font-size: 1rem; }
.situation-coach button, #feedback-audio { padding: 12px; min-height: 44px; border: 1px solid #aebfc7; border-radius: 7px; background: white; font-size: .875rem; font-weight: 700; }
#ask-situation { margin-top: 10px; background: #0b1f3a; color: white; }
.practice-coach-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.practice-coach-messages { overflow-wrap: anywhere; }
.practice-coach-messages p { border-top: 1px solid #d4e2da; padding-top: 10px; white-space: pre-wrap; }
.practice-sound { display: flex; gap: 8px; align-items: center; font-size: .875rem; line-height: 1.5; margin-bottom: 18px; }
.practice-sound input { width: 20px; height: 20px; flex-shrink: 0; }
.practice-finish-video { display: block; width: min(100%, 720px); aspect-ratio: 16 / 9; object-fit: contain; background: #0b1f3a; border-radius: 12px; }
#feedback-audio-status:empty, #finish-video-status:empty { display: none; }
@media (max-width: 740px) { .practice-page .field-viewport { height: 430px; }.practice-coach-actions button { flex: 1; } }
.skip-link { position: absolute; left: 10px; top: -100px; z-index: 100; background: white; padding: 14px; }.skip-link:focus { top: 10px; }
.practice-page :focus-visible { outline: 3px solid #bc6600; outline-offset: 4px; }
.field-card :focus-visible { outline-color: #ffca28; }
@media (max-width: 980px) { .decision-card { padding: 20px; }.lesson-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 740px) { .practice-shell, .practice-page .landing-header { width: calc(100% - 28px); }.practice-heading { align-items: start; }.practice-heading h1 { font-size: 2rem; }.session-score { min-width: 98px; }.lesson-list { grid-template-columns: repeat(2, 1fr); }.field-viewport { height: 350px; }.practice-page .landing-header { position: static; flex-wrap: wrap; gap: 10px; padding: 16px 0; }.practice-page .landing-navigation { width: 100%; }.decision-card { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { .practice-page { scroll-behavior: auto; } }

/* Situation and quiz share the Question panel. */
.lesson-intro { padding: 20px 24px; margin-bottom: 18px; background: white; border: 1px solid #dce3e9; border-radius: 14px; }
.lesson-intro h2 { margin: 12px 0 8px; color: #0b1f3a; }
.lesson-intro #situation { margin: 0; line-height: 1.6; }
.lesson-roadmap { color: #235f45; font-weight: 700; margin: 12px 0 0; font-size: .875rem; }
.lesson-primary-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; background: #0c2b23; }
.lesson-primary-actions button { min-height: 48px; padding: 12px 16px; border: 1px solid #789c8c; border-radius: 8px; background: #21483d; color: white; font-weight: 750; }
.lesson-primary-actions #watch { background: #ffdf6b; color: #12392e; border-color: #ffdf6b; flex: 1; }
.field-options > summary { cursor: pointer; padding: 16px; background: #0c2b23; font-weight: 700; }
.decision-card { border: 2px solid #40785b; }
.decision-card #quiz-title { margin-top: 8px; }
.quiz-instruction { color: #526374; }
#question, #feedback-title, #scenario-title { scroll-margin-top: 24px; }

/* Questions and coaching follow the normal page flow. */
.play-result { padding: 8px 10px; background: #eaf7ed; color: #205b3e; border-radius: 7px; font-weight: 700; }
#lesson-player { scroll-margin-top: 8px; }
.field-options { margin-top: 14px; color: #effaf5; border-radius: 10px; overflow: hidden; }
@media (max-width: 740px) {
  .lesson-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lesson-list button { width: 100%; min-height: 44px; }
  .lesson-intro { padding: 18px; }
  .field-card { display: flex; flex-direction: column; min-height: 0; border: 0; border-radius: 0; }
  .practice-page .field-viewport { flex: none; height: clamp(300px, 48svh, 520px); }
  .field-topline { padding: 4px 12px; font-size: .75rem; }
  .field-legend { padding: 4px 8px; gap: 8px; font-size: .7rem; }
  .field-legend span:last-child { display: none; }
  .lesson-primary-actions { flex-wrap: nowrap; gap: 5px; padding: 6px; overflow-x: auto; flex-shrink: 0; }
  .lesson-primary-actions button { min-height: 44px; padding: 7px 8px; font-size: .75rem; white-space: nowrap; }
  .decision-card { padding: 10px 12px 18px; border: 0; border-radius: 0; }
  .decision-card > .eyebrow { margin: 0 0 4px; font-size: .7rem; }
  .decision-card #quiz-title, .quiz-instruction:not(#question-watch-note) { display: none; }
  .decision-card .decision-question { font-size: .95rem; line-height: 1.3; margin: 4px 0 8px; }
  .answer-list { gap: 6px; }
  .answer-list button { min-height: 44px; padding: 8px; gap: 8px; font-size: .875rem; }
  .answer-letter { width: 24px; height: 24px; flex-basis: 24px; }
  .decision-card .play-result { margin: 4px 0 8px; font-size: .8rem; line-height: 1.3; }
  .decision-cue { margin: 8px 0; }
}
@media (max-width: 740px) and (max-height: 450px) {
  .lesson-primary-actions { flex-wrap: wrap; }
}

/* Settings expand on demand without reducing the playing surface. */
.field-card { overflow: visible; }
.field-viewport { overflow: hidden; }
.field-options { position: relative; margin: 0; border-radius: 0 0 12px 12px; overflow: visible; flex-shrink: 0; }
.field-options > summary { min-height: 44px; padding: 10px 14px; font-size: .8rem; }
.settings-expand, .settings-collapse { float: right; color: #ffdf6b; }
.settings-collapse, .field-options[open] .settings-expand { display: none; }
.field-options[open] .settings-collapse { display: inline; }
.field-settings-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: #0c2b23; border: 1px solid #5b7b6f; border-radius: 0 0 10px 10px; box-shadow: 0 8px 20px #0004; }
@media (min-width: 741px) { .field-viewport { height: clamp(380px, 44vw, 580px); } }

/* A distinct final step, revealed after the last play finishes. */
.practice-summary { border: 2px solid #c59b34; background: #fff8e4; padding: 22px; box-shadow: 0 8px 28px #0b1f3a12; }
.practice-summary h2 { margin: 8px 0 12px; }
#finish-title { scroll-margin-top: 24px; }
#practice-finish-message { font-size: 1.15rem; font-weight: 750; color: #0b1f3a; }
#finish-video-play { display: block; width: 100%; margin: 12px 0; font-size: 1rem; min-height: 52px; }

.practice-courses { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.practice-courses a { padding: 12px 16px; border: 1px solid #b8cec3; border-radius: 8px; color: #173e2e; background: white; font-weight: 750; text-decoration: none; }
.practice-courses a[aria-current="page"] { background: #173e2e; color: white; }
#baserunning-note { padding: 14px; background: #fff8e4; border-radius: 8px; line-height: 1.5; }
.pitcher-panel { padding: 12px; border-bottom: 1px solid #ffffff30; }
.pitcher-caption { display: grid; gap: 5px; font-size: .8rem; }
.pitcher-caption strong { font-size: .95rem; color: #fff5d2; }
.pitcher-viewport { height: clamp(260px, 30vw, 340px); position: relative; overflow: hidden; border-radius: 8px; margin-top: 8px; }
.pitcher-viewport canvas, .pitcher-viewport svg { width: 100%; height: 100%; display: block; }
.pitcher-viewport svg { position: absolute; inset: 0; }
#pitcher-cue { margin: 4px 0; font-size: .85rem; line-height: 1.4; }

/* Two native-height panels share one position in the page. */
.lesson-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; position: sticky; top: 8px; z-index: 30; padding: 6px; margin-bottom: 12px; border: 1px solid #c1d2c8; border-radius: 12px; background: #edf3ef; box-shadow: 0 3px 12px #0b1f3a12; }
.lesson-tabs button { min-height: 48px; border: 0; border-radius: 8px; padding: 10px; background: transparent; color: #173e2e; font-weight: 800; }
.lesson-tabs button[aria-selected="true"] { background: #173e2e; color: white; box-shadow: 0 2px 5px #0b1f3a16; }
.practice-workspace [role="tabpanel"] { min-width: 0; }
.lesson-intro { margin-bottom: 10px; }
.field-card { border-radius: 14px; }
.field-question { padding: 0 16px; margin: 12px 0 0; line-height: 1.4; font-weight: 700; }
.field-next { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; background: #0c2b23; border-radius: 0 0 14px 14px; }
.field-next p { flex-basis: 100%; margin: 0; font-size: .875rem; line-height: 1.4; }
.field-next button, .preview-field { min-height: 44px; padding: 10px 14px; border: 1px solid #a6bcae; border-radius: 8px; font-weight: 750; }
#field-question-link { flex: 1; background: #ffdf6b; color: #12392e; border-color: #ffdf6b; }
#field-coach-stop { background: #21483d; color: white; }
.preview-field { margin: 0 0 12px; background: #edf5ef; color: #173e2e; }
#question-motion-status { padding: 10px; background: #fff8e4; color: #573e0f; font-size: .875rem; }
.answer-review > summary { min-height: 44px; cursor: pointer; font-weight: 700; padding: 12px 0; color: #173e2e; }
.answer-review[open] > summary:not([hidden]) { margin-bottom: 10px; border-bottom: 1px solid #dce3e9; }
.practice-summary { margin: 0 0 18px; }
#question, #feedback-title, #finish-title { scroll-margin-top: 88px; }
@media (max-width: 740px) {
  .lesson-intro { padding: 14px; }
  .lesson-intro .eyebrow { font-size: .7rem; margin-bottom: 6px; }
  .lesson-intro h2 { margin-top: 8px; font-size: 1.2rem; }
  .lesson-intro #situation { font-size: .9rem; line-height: 1.4; }
  .lesson-roadmap { font-size: .75rem; }
  .decision-card { border: 1px solid #b8cec3; border-radius: 14px; padding: 14px; }
  .practice-page .field-viewport { height: clamp(280px, 40svh, 430px); }
  .field-question { padding: 0 12px; margin: 8px 0; font-size: .875rem; }
  .lesson-primary-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .lesson-primary-actions button { white-space: normal; padding: 6px 4px; }
  .field-next { padding: 10px 12px; }
  .baserunning-workspace .pitcher-viewport { height: 210px; }
  .baserunning-workspace .field-viewport { height: 140px; }
}
@media (min-width: 741px) {
  .lesson-tabs { top: 90px; }
  #lesson-player { scroll-margin-top: 90px; }
  .baserunning-workspace .field-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baserunning-workspace .lesson-primary-actions, .baserunning-workspace .field-question, .baserunning-workspace .field-topline, .baserunning-workspace .field-legend, .baserunning-workspace .field-options, .baserunning-workspace .field-next { grid-column: 1 / -1; }
  .baserunning-workspace .pitcher-panel { grid-column: 1; grid-row: 4; border-bottom: 0; }
  .baserunning-workspace .field-viewport { grid-column: 2; grid-row: 4; height: 100%; min-height: 340px; }
  .baserunning-workspace .pitcher-viewport { height: 300px; }
}