:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #20242a; background: #e6e8eb; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
button, input { font: inherit; }
button { border: 2px solid #414951; background: #fff; color: #20242a; border-radius: 8px; padding: 5px 10px; cursor: pointer; font-weight: 650; }
button:focus-visible, input:focus-visible { outline: 4px solid #1a2f42; outline-offset: 2px; }
button:disabled { opacity: .55; cursor: default; }
[hidden] { display: none !important; }
#game { position: relative; width: 100vw; height: 100dvh; min-height: 420px; overflow: hidden; background: #e8eaed; }
.question-band { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: 28%; padding: .7vh 1.35vw; background: #f7f8f9; border-bottom: 4px solid #404850; display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.45fr) auto; gap: .3vh; }
.top-line, .prompt-line, .question-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.2vw; min-width: 0; }
.top-line { min-height: 29px; }
.title-stack { display: flex; gap: 1vw; align-items: baseline; white-space: nowrap; }
#phase-label { font-size: clamp(18px, 1.5vw, 28px); font-weight: 800; text-transform: uppercase; letter-spacing: .025em; }
#progress-label { font-size: clamp(16px, 1.25vw, 24px); font-weight: 650; }
.teacher-controls { display: flex; align-items: center; gap: .35vw; white-space: nowrap; }
.teacher-controls button { font-size: clamp(13px, .94vw, 18px); padding: .3vh .55vw; }
#start-button { background: #303a44; color: #fff; }
.prompt-line { min-height: 0; }
#question-title { margin: 0; font-size: clamp(27px, 2.45vw, 46px); line-height: 1.13; font-weight: 800; max-height: 100%; overflow-y: auto; overflow-wrap: anywhere; }
#question-title.long-question { font-size: clamp(21px, 1.8vw, 34px); line-height: 1.05; }
#timer { flex: 0 0 auto; font-size: clamp(20px, 1.9vw, 34px); font-weight: 800; font-variant-numeric: tabular-nums; }
.choices { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .3vh .75vw; min-height: 0; }
.choice { display: flex; align-items: center; gap: .5vw; border: 2px solid #8a9299; border-radius: 7px; min-width: 0; padding: .05vh .55vw; font-size: clamp(20px, 1.75vw, 34px); font-weight: 650; line-height: 1.05; overflow: hidden; }
.choice .letter { display: inline-grid; place-items: center; width: clamp(29px, 2.55vw, 48px); height: clamp(29px, 2.55vw, 48px); flex: none; border-radius: 5px; background: #2b353d; color: #fff; font-weight: 800; }
.choice .choice-text { max-height: 100%; overflow-y: auto; overflow-wrap: anywhere; }
.choice.correct { border-width: 4px; border-color: #141b21; background: #e0e5e9; }
.question-footer { min-height: 24px; font-size: clamp(15px, 1.2vw, 23px); font-weight: 650; white-space: nowrap; }
#discussion-cue { overflow: hidden; text-overflow: ellipsis; }
#response-status { font-variant-numeric: tabular-nums; }
.battlefield { position: absolute; top: 28%; left: 0; width: 100%; height: 72%; overflow: hidden; background: linear-gradient(#e8eaed, #d8dde1); }
.battlefield::before, .battlefield::after { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; width: 5%; background: repeating-linear-gradient(0deg, #8897a0 0 10%, #d4dde1 10% 19%, #8897a0 19% 29%); opacity: .45; animation: road-scroll 9s linear infinite; }
.battlefield::before { left: 1%; } .battlefield::after { right: 1%; }
.road { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 12%, #9ba5ad 12.2% 12.8%, transparent 13% 25%), linear-gradient(145deg, #c7d0d6 0 33%, #707c85 33% 67%, #c7d0d6 67%); opacity: .6; animation: road-scroll 9s linear infinite; }
.destination { position: absolute; left: 43%; bottom: 7%; width: 14%; padding: 1vh; border: 4px solid #36414a; border-radius: 50%; background: #dde9ef; text-align: center; font-weight: 900; letter-spacing: .1em; }
.boss, .crew { position: absolute; border: 3px solid #3b444c; background: #f4f5f6; box-shadow: 0 7px 0 #b7bec4; text-align: center; }
.boss { left: 36%; top: 2%; width: 28%; height: 50%; min-height: 220px; border-radius: 21px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: .5vh .5vw; font-size: clamp(17px, 1.6vw, 29px); transform: translateY(calc(var(--march-progress, 0) * 45px)); }
.boss-art { display: block; flex: none; width: min(18vw, 250px); height: 24vh; object-fit: contain; animation: boss-march 1.8s ease-in-out infinite; }
.final-target { display: none; position: absolute; left: 50%; transform: translateX(-50%); width: clamp(42px, 4vw, 72px); height: clamp(42px, 4vw, 72px); place-items: center; border: 5px solid #fff; border-radius: 50%; background: #20242a; color: #fff; font-size: clamp(27px, 2.5vw, 46px); font-weight: 900; box-shadow: 0 0 0 8px #20242a88; animation: target-flash .45s steps(2, end) infinite; }
#game[data-final-target="head"] .final-target { display: grid; top: 12%; }
#game[data-final-target="chest"] .final-target { display: grid; top: 29%; }
#game[data-final-target="hip"] .final-target { display: grid; top: 46%; }
#boss-progress { font-size: clamp(15px, 1.15vw, 23px); font-weight: 700; }
.crews { position: absolute; inset: 0; }
.crew { width: 21%; height: 31%; min-height: 145px; border-radius: 13px; padding: .55vh .55vw; display: grid; grid-template-rows: auto auto auto auto; align-content: space-around; font-size: clamp(15px, 1.2vw, 24px); }
.crew-0 { left: 2%; top: 31%; }
.crew-1 { left: 19%; top: 64%; }
.crew-2 { left: 60%; top: 64%; }
.crew-3 { left: 77%; top: 31%; }
.crew { animation: ship-hover 4s ease-in-out infinite; }
.crew-1, .crew-3 { animation-delay: -2s; }
.crew.firing::before { content: "✦"; position: absolute; left: 50%; top: -2.5rem; color: #f7f8f9; text-shadow: 0 0 8px #1e3947; font-size: 3rem; animation: blast .7s linear 2; }
.crew-head { display: flex; justify-content: space-between; align-items: center; gap: .5vw; font-weight: 800; }
.crew-head .score { font-variant-numeric: tabular-nums; }
.role-row { display: flex; align-items: center; justify-content: center; gap: .4vw; }
.role-label { font-size: clamp(11px, .85vw, 16px); font-weight: 800; letter-spacing: .04em; }
.card { display: inline-flex; align-items: center; justify-content: center; border: 2px solid #414951; min-width: clamp(31px, 2.8vw, 54px); min-height: clamp(31px, 2.8vw, 54px); padding: 0 .2vw; border-radius: 7px; background: #e2e5e8; font-size: clamp(23px, 2vw, 39px); font-weight: 800; font-variant-numeric: tabular-nums; }
.card.active { background: #303a44; color: #fff; }
.card.received { outline: 4px solid #7a858d; outline-offset: 2px; }
.talk-row .card { min-width: clamp(25px, 2.1vw, 42px); min-height: clamp(25px, 2.1vw, 42px); font-size: clamp(17px, 1.5vw, 29px); }
.crew-foot { display: flex; justify-content: center; align-items: center; gap: .4vw; font-size: clamp(13px, 1vw, 20px); font-weight: 700; }
.crew-foot span { white-space: nowrap; }
.station-label { font-size: clamp(19px, 1.5vw, 30px); letter-spacing: .02em; }
#game[data-phase="finalCue"] .question-band { grid-template-rows: auto minmax(0, 1fr) auto; }
#game[data-phase="finalCue"] .choices { display: none; }
#game[data-phase="finalCue"] #question-title { max-height: none; overflow: visible; font-size: clamp(45px, 5vw, 84px); line-height: 1; }
.system-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 3.6vh; min-height: 24px; z-index: 8; background: #303a44; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 1.2vw; font-size: clamp(14px, 1vw, 20px); font-weight: 650; }
.setup-panel, .system-overlay, .results, .simulation-panel { position: absolute; z-index: 9; background: #fff; border: 4px solid #343e46; border-radius: 16px; box-shadow: 0 12px 0 #8a969f; }
.setup-panel { top: 33%; left: 31%; width: 38%; max-height: 61%; overflow-y: auto; padding: 1.2vh 1.4vw; font-size: clamp(16px, 1.25vw, 24px); }
.setup-panel h2, .setup-panel p { margin: .5vh 0; }
.setup-panel h2 { font-size: clamp(25px, 2vw, 38px); }
.file-label { display: block; margin: 1vh 0 .35vh; font-weight: 750; }
#pack-file { width: 100%; }
.pace-fields { display: grid; grid-template-columns: 1fr; gap: .7vw; margin-top: .75vh; font-weight: 750; }
.pace-fields label { white-space: nowrap; }
.pace-fields input { width: 3.4em; padding: .15vh .2vw; text-align: center; }
#pace-summary { font-size: .85em; font-weight: 650; }
#pack-error { color: #6b1f18; font-weight: 750; }
.setup-note { border-top: 2px solid #9ba4ac; padding-top: .7vh; }
.system-overlay { top: 34%; left: 33%; width: 34%; padding: 2vh 2vw; font-size: clamp(22px, 1.65vw, 32px); text-align: center; }
.results { top: 22%; left: 28%; width: 44%; padding: 2vh 2vw; font-size: clamp(21px, 1.65vw, 33px); text-align: center; }
.results h2 { margin: 0 0 1vh; font-size: clamp(34px, 3vw, 58px); }
.results p { margin: .6vh 0; }
.results .standings { text-align: left; display: grid; grid-template-columns: 1fr auto; gap: .5vh 1vw; margin-top: 1.4vh; }
.simulation-panel { right: 1%; bottom: 5%; width: min(700px, 65vw); max-height: 65%; overflow-y: auto; padding: 1vh 1vw; }
.simulation-row { display: flex; align-items: center; gap: .4vw; margin: .4vh 0; }
.simulation-row strong { min-width: 70px; }
.simulation-row button { min-width: 45px; }
#game[data-reduced-motion="true"] *, #game[data-reduced-motion="true"] *::before, #game[data-reduced-motion="true"] *::after,
#game[data-capture-mode="true"] *, #game[data-capture-mode="true"] *::before, #game[data-capture-mode="true"] *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
@keyframes road-scroll { to { background-position: 0 160px, 0 0; } }
@keyframes boss-march { 50% { transform: translateY(8px) rotate(1deg); } }
@keyframes ship-hover { 50% { transform: translateY(-8px); } }
@keyframes blast { from { transform: translateY(0) scale(.5); opacity: 1; } to { transform: translateY(-80px) scale(1.5); opacity: 0; } }
@keyframes target-flash { 50% { background: #eef5f8; color: #17202a; } }
@media (max-width: 1050px) { .teacher-controls button { padding: 2px 5px; } .crew { width: 23%; } .crew-1 { left: 17%; } .crew-2 { left: 60%; } }