.mission-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  margin-bottom:30px
}

.progress-box {
  min-width:245px
}

.progress-box>div {
  display:flex;
  justify-content:space-between;
  gap:28px;
  font:10px var(--mono);
  letter-spacing:.6px;
  color:var(--muted)
}

#score-label {
  color:var(--lime)
}

#progress {
  display:flex;
  gap:7px;
  list-style:none;
  padding:0;
  margin:13px 0 0
}

#progress li {
  height:5px;
  flex:1;
  background:#35464b;
  border-radius:3px
}

#progress li.current {
  background:var(--lime);
  box-shadow:0 0 0 3px #d5e99a13
}

#progress li.complete {
  background:#829769
}

.game-layout {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);
  align-items:start;
  gap:28px
}
.cockpit-toggle { display: none; }
.confidence-picker { border: 0; padding: 0; margin: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.confidence-picker legend { width: 100%; margin-bottom: 8px; color: #c8d5d8; font-size: 14px; }
.confidence-picker label { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid #485c62; border-radius: 6px; color: #d4dddf; font-size: 13px; cursor: pointer; }
.confidence-picker label:has(input:checked) { border-color: var(--lime); background: #283a31; color: #f1f4e8; }
.confidence-picker input { accent-color: var(--lime); }
.mastery-summary { margin: 26px 0; padding: 20px; background: #132328; border: 1px solid #40575d; border-radius: 9px; }
.mastery-summary h3 { margin-bottom: 16px; }
.mastery-row { display: grid; grid-template-columns: 105px 1fr 48px; gap: 12px; align-items: center; margin: 12px 0; }
.mastery-track { height: 9px; background: #35464b; border-radius: 9px; overflow: hidden; }
.mastery-fill { height: 100%; background: var(--lime); border-radius: inherit; }
.mastery-value { font: 12px var(--mono); text-align: right; color: #d7e7a6; }
.debrief-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.debrief-actions .primary-button { margin: 0; }
.debrief-actions .quiet-button { text-decoration: none; }

.decision-panel {
  padding:5px 0 0
}

.encounter-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:17px
}

.lesson-tag {
  border:1px solid #516174;
  color:var(--blue);
  padding:4px 8px;
  border-radius:4px;
  font:9px var(--mono)
}

.decision-panel>h2 {
  font:500 clamp(25px,2.5vw,33px)/1.18 var(--heading);
  letter-spacing:-.9px;
  margin-bottom:13px
}

.situation {
  color:#bdc8cb;
  font-size:13px;
  line-height:1.75;
  margin-bottom:21px
}

.transmission {
  background:#213239;
  border:1px solid #40545d;
  border-radius:9px;
  padding:17px 19px;
  margin-bottom:23px;
  position:relative
}

.transmission:before {
  content:'';
  position:absolute;
  left:-1px;
  top:40px;
  bottom:40px;
  width:3px;
  background:var(--blue);
  border-radius:2px
}

.transmission-heading {
  display:flex;
  align-items:center;
  gap:9px;
  font:8px var(--mono);
  letter-spacing:.6px;
  color:#b4cad7
}

.transmission-heading>span:last-child {
  margin-left:auto;
  color:#8ca9b7
}

.signal-icon {
  color:var(--blue);
  font-size:16px;
  letter-spacing:1px
}

blockquote {
  font:400 18px/1.55 var(--heading);
  margin:16px 0 20px;
  color:#edf2f0
}

.message-footer {
  font:7px var(--mono);
  letter-spacing:1px;
  color:#9eafb7
}

.message-footer .live-dot {
  width:4px;
  height:4px;
  margin-right:4px;
  background:var(--blue)
}

.response-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px
}

.response-heading h3 {
  font-size:12px;
  font-weight:500;
  margin:0
}

.response-heading>span {
  font:7px var(--mono);
  letter-spacing:.8px;
  color:#a0afb2
}

.responses {
  display:grid;
  gap:10px
}
.responses.visually-hidden-responses { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.interaction-area { margin-bottom: 18px; padding: 18px; border: 1px solid #557078; border-radius: 9px; background: #14272d; }
.interaction-area > label { display: block; font-weight: 650; font-size: 17px; }
.interaction-area > p { color: #bdcbce; margin: 6px 0 13px; }
.interaction-area select { width: 100%; padding: 13px; border-radius: 6px; border: 1px solid #74898f; background: #0f1e24; color: var(--text); font-size: 16px; }
.interaction-area .primary-button:disabled { opacity: .5; cursor: default; }
.game-layout[data-topic="weather"] .weather-display { box-shadow: 0 0 0 3px #efc08466; }
.game-layout[data-topic="equipment"] .equipment-row { outline: 3px solid #efc08466; outline-offset: 3px; border-radius: 5px; }
.game-layout[data-topic="radio"] .radio-panel { outline: 3px solid #9dbded55; outline-offset: 3px; }

.response {
  display:flex;
  text-align:left;
  align-items:flex-start;
  gap:12px;
  width:100%;
  border:1px solid #3e5056;
  border-radius:7px;
  padding:14px;
  background:#1b2b31;
  transition:background .15s,border-color .15s
}

.response:not(:disabled):hover {
  background:#283c3d;
  border-color:#a9bc84
}

.answer-letter {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:24px;
  height:25px;
  border:1px solid #4c6065;
  border-radius:4px;
  font:10px var(--mono);
  color:#bfcdce;
  margin-top:1px
}

.response strong {
  display:block;
  font-size:12px;
  line-height:1.55;
  font-weight:500
}

.response small {
  display:block;
  font-size:10px;
  color:#a9b9bd;
  margin-top:6px;
  line-height:1.5
}

.response.correct {
  background:#293d2e;
  border-color:#a0bb78
}

.response.correct .answer-letter {
  background:var(--lime);
  color:#27341d;
  border-color:var(--lime)
}

.response.incorrect {
  background:#3d3029;
  border-color:#bc9263
}

.response.incorrect .answer-letter {
  color:var(--amber);
  border-color:#a47d55
}

.response:disabled:not(.correct):not(.incorrect) {
  opacity:.55
}

.feedback {
  background:#23362d;
  border:1px solid #5e7952;
  border-radius:7px;
  padding:17px;
  margin-top:17px
}

.feedback.retry {
  background:#342f27;
  border-color:#94704a
}

.feedback .eyebrow {
  color:var(--lime);
  font-size:8px
}

.feedback.retry .eyebrow {
  color:var(--amber)
}

.feedback h3 {
  font:500 19px var(--heading);
  margin:7px 0
}

.feedback p {
  font-size:12px;
  line-height:1.65;
  color:#d0d8cb;
  margin-bottom:11px
}

.feedback a {
  font-size:10px
}

.learning-note {
  font-size:10px;
  color:#a0b0b4;
  margin:18px 0
}

.debrief {
  max-width:760px;
  margin:20px auto 50px;
  background:#1a2a2e;
  border:1px solid #42574b;
  border-radius:12px;
  padding:36px
}

.debrief h2 {
  font:500 32px var(--heading);
  letter-spacing:-1px;
  margin-bottom:12px
}

.debrief>p:not(.eyebrow) {
  color:#b9c9c7;
  line-height:1.7
}

.result-row {
  border-top:1px solid #3a4c4b;
  padding:16px 0;
  display:flex;
  gap:16px
}

.result-icon {
  font:12px var(--mono);
  color:var(--lime);
  min-width:35px
}

.result-row strong {
  font-size:13px
}

.result-row p {
  margin:5px 0 0;
  font-size:12px;
  color:#b4c5c5
}

.result-row a {
  font-size:10px
}

.debrief .primary-button {
  max-width:280px
}

@media(min-width:1450px) {
.response {
    padding:18px
  }
.response strong {
    font-size:14px
  }
.situation {
    font-size:14px
  }
}

@media(max-width:1050px) {
.game-layout {
    gap:22px;
    grid-template-columns:minmax(0,1.15fr) minmax(310px,1fr)
  }
.mission-header>.progress-box {
    min-width:190px
  }
}

@media(max-width:760px) {
.mission-header {
    display:block;
    margin-bottom:23px
  }
.progress-box {
    margin-top:22px;
    max-width:400px
  }
.game-layout {
    grid-template-columns:1fr;
    gap:30px
  }
.decision-panel {
    padding:0 4px
  }
.decision-panel>h2 {
    font-size:30px
  }
.response {
    padding:17px
  }
.response strong {
    font-size:13px
  }
.response small {
    font-size:11px
  }
.debrief {
    padding:24px
  }
}

@media(max-width:380px) {
.response-heading>span {
    display:none
  }
}

/* Mission decisions and key facts use comfortable reading sizes. */
.session-controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.session-controls > span { font-size: 14px; color: #c7d3d6; }
.mission-header .intro { font-size: 16px; }
.progress-box > div { font-size: 12px; line-height: 1.5; }
.game-layout { grid-template-columns: minmax(0, 1.25fr) minmax(350px, 1fr); }
.decision-panel .eyebrow, .lesson-tag { font-size: 12px; }
.situation { font-size: 17px; line-height: 1.75; color: #d6dfe1; }
.key-facts { background: #1e3035; border: 1px solid #637579; border-radius: 9px; padding: 4px 16px; margin: 0 0 24px; }
.key-facts > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid #465b61; }
.key-facts > div:last-child { border: 0; }
.key-facts dt { color: #b9ccd1; font-size: 14px; }
.key-facts dd { color: #f1f5eb; font-size: 16px; font-weight: 600; margin: 0; line-height: 1.6; }
.key-facts .fact-alert { color: #ffdc9b; }
.transmission-heading { font-size: 12px; line-height: 1.5; flex-wrap: wrap; }
blockquote { font-size: 21px; line-height: 1.6; }
.message-footer { font-size: 12px; line-height: 1.5; letter-spacing: .3px; }
.response-heading h3 { font-size: 18px; }
.response-heading > span { font-size: 12px; }
.response { padding: 18px 16px; }
.answer-letter { font-size: 14px; width: 28px; height: 28px; }
.response strong { font-size: 16px; line-height: 1.65; }
.response small { font-size: 14px; line-height: 1.6; color: #ccd8dc; }
.response:disabled:not(.correct):not(.incorrect) { opacity: .8; }
.feedback .eyebrow { font-size: 12px; }
.feedback h3 { font-size: 22px; }
.feedback p { font-size: 16px; }
.feedback a { font-size: 14px; }
.learning-note { font-size: 14px; line-height: 1.6; }
.result-icon, .result-row a { font-size: 14px; }
.result-row strong { font-size: 17px; }
.result-row p { font-size: 16px; line-height: 1.6; }
#choose-training { margin-top: 16px; }
@media (max-width: 900px) {
  .game-layout { grid-template-columns: 1fr; }
  .cockpit-toggle { display: block; width: 100%; order: 1; }
  .decision-panel { order: 0; }
  .cockpit { order: 2; }
  .cockpit.mobile-collapsed { display: none; }
  .mission-header { flex-wrap: wrap; }
  .mission-header .progress-box { width: 100%; max-width: 420px; }
}
@media print {
  .topbar,.session-controls,.mission-header,#game-layout,.page-footer,.debrief-actions { display: none !important; }
  body { background: white; color: #111; }
  main { padding: 0; }
  .debrief { display: block !important; border: 0; max-width: none; margin: 0; padding: 0; background: white; color: #111; }
  .debrief p,.result-row p { color: #222 !important; }
  .mastery-summary { background: white; border-color: #777; }
}
@media (max-width: 380px) {
  .key-facts > div { grid-template-columns: 1fr; gap: 3px; }
  .response-heading > span { display: none; }
  .response { padding: 14px 12px; gap: 10px; }
  .response strong { font-size: 16px; }
}

#progress { display: grid; gap: 7px; }

.difficulty-badge { color: #ffe3a9; background: #473b27; border: 1px solid #bb965b; padding: 4px 8px; border-radius: 4px; font: 12px var(--mono); margin-left: auto; }
.encounter-top { flex-wrap: wrap; }