:root {
  color-scheme: light;
  --ink: #17333b;
  --navy: #173f48;
  --navy-dark: #0d2b32;
  --teal: #168b8c;
  --teal-light: #d8f1e9;
  --coral: #ee674d;
  --coral-dark: #a93629;
  --gold: #f5b942;
  --cream: #fff8e8;
  --paper: #fffdf7;
  --muted: #627276;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 900px; min-height: 620px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--navy-dark); }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #073f64; outline-offset: 4px; }

.station { position: relative; height: 100%; min-height: 620px; overflow: hidden; isolation: isolate; background: #d7ae71; }
.world { position: absolute; z-index: -4; inset: 0; background: url("./art/station-backdrop-01.webp") center / cover no-repeat; transform: scale(1.015); }
.sun-wash { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg,rgba(13,43,50,.33),rgba(255,205,125,.06) 36%,rgba(13,43,50,.18)); }
.station::after { position: absolute; z-index: -2; inset: 0; content: ""; background: linear-gradient(180deg,rgba(12,39,45,.46),transparent 18%,transparent 72%,rgba(12,39,45,.34)); pointer-events: none; }

.station-hud { position: absolute; z-index: 10; left: 24px; right: 24px; top: 20px; height: 72px; display: grid; grid-template-columns: 218px 1fr auto; align-items: center; gap: 22px; }
.station-sign,.route-meter,.scoreboard { border: 2px solid rgba(255,241,203,.7); background: rgba(19,55,63,.94); box-shadow: 0 6px 0 rgba(7,28,32,.55),0 12px 30px rgba(8,30,36,.2); color: white; backdrop-filter: blur(8px); }
.station-sign { align-self: stretch; display: grid; align-content: center; padding: 10px 17px; border-radius: 12px; }
.station-sign span,.scoreboard span,.route-meter span { color: #d9f0e6; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.station-sign strong { margin-top: 3px; color: #ffd66c; font-size: 17px; }
.route-meter { justify-self: center; width: min(360px,100%); padding: 10px 15px; border-radius: 12px; }
.route-meter > div { display: flex; align-items: center; justify-content: space-between; }
.route-meter strong { font-size: 12px; }.route-meter strong b { color: #ffd66c; font-size: 16px; }
.route-meter > i { display: block; height: 7px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.2); }
.route-meter > i b { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ffd66c,var(--coral)); transition: width 240ms ease-out; }
.scoreboard { height: 72px; display: flex; align-items: stretch; padding: 6px; border-radius: 12px; }
.scoreboard > div { min-width: 75px; display: grid; place-content: center; padding: 0 12px; text-align: center; }
.scoreboard > div + div { border-left: 1px solid rgba(255,255,255,.2); }
.scoreboard strong { margin-top: 3px; color: white; font-size: 22px; line-height: 1; }

.conductor-booth { position: absolute; z-index: 3; left: 20px; top: 112px; bottom: 96px; width: 236px; overflow: hidden; border: 2px solid rgba(255,238,199,.78); border-radius: 18px; background: linear-gradient(rgba(17,65,72,.9),rgba(9,41,49,.96)); box-shadow: 0 8px 0 rgba(8,30,35,.55),0 20px 44px rgba(8,29,34,.24); }
.speech { position: relative; z-index: 3; margin: 14px 13px 0; padding: 12px 13px; border-radius: 13px; color: var(--ink); background: var(--cream); box-shadow: 0 4px 0 #cfaa69; font-size: 13px; font-weight: 800; line-height: 1.3; }
.speech::after { position: absolute; left: 44px; bottom: -11px; width: 22px; height: 22px; content: ""; transform: rotate(45deg); background: var(--cream); }
.mascot { position: absolute; z-index: 2; left: -21px; bottom: -15px; width: 274px; max-width: none; filter: drop-shadow(0 10px 8px rgba(0,0,0,.28)); transform-origin: 48% 88%; transition: transform 180ms ease-out,filter 180ms ease-out; }
.booth-rail { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 43px; border-top: 4px solid #d8a842; background: repeating-linear-gradient(90deg,#173f48 0 24px,#245c62 24px 48px); box-shadow: inset 0 6px rgba(0,0,0,.2); }
.station.is-correct .mascot { animation: mascot-cheer 650ms ease-out; }
.station.is-miss .mascot { transform: rotate(-3deg) scale(.98); filter: drop-shadow(0 9px 7px rgba(0,0,0,.28)) saturate(.82); }

.mission-board { position: absolute; z-index: 4; left: 278px; right: 28px; top: 112px; bottom: 116px; display: grid; grid-template-rows: auto minmax(165px,1fr) auto auto auto; padding: 22px 28px 24px; overflow: hidden; border: 3px solid #704c2c; border-radius: 19px; background: linear-gradient(180deg,rgba(255,253,247,.98),rgba(255,247,226,.98)); box-shadow: 0 9px 0 rgba(91,57,29,.58),0 24px 55px rgba(30,22,11,.25); }
.mission-board::before { position: absolute; inset: 9px; content: ""; border: 1px solid rgba(151,112,66,.24); border-radius: 12px; pointer-events: none; }
.board-heading { position: relative; z-index: 1; text-align: center; }
.eyebrow { color: var(--coral-dark); font-size: 10px; font-weight: 1000; letter-spacing: .14em; text-transform: uppercase; }
.board-heading h1 { margin: 5px 0 4px; font-size: clamp(27px,3vw,42px); line-height: 1; letter-spacing: -.045em; }
.board-heading p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 700; }

.coupling-yard { position: relative; display: grid; place-items: center; min-height: 0; padding: 13px 10px 5px; }
.word-train { width: min(760px,96%); display: flex; align-items: center; justify-content: center; gap: 12px; }
.word-car { position: relative; min-width: 170px; min-height: 98px; display: grid; place-items: center; padding: 16px 23px 24px; border: 3px solid var(--navy-dark); border-radius: 15px 15px 9px 9px; color: white; background: linear-gradient(160deg,#249da0,#137173); box-shadow: inset 0 4px rgba(255,255,255,.17),0 7px 0 #0d5357; font-size: clamp(27px,3.2vw,43px); font-weight: 1000; letter-spacing: -.025em; }
.word-car::before,.word-car::after { position: absolute; bottom: -16px; width: 27px; height: 27px; content: ""; border: 4px solid var(--navy-dark); border-radius: 50%; background: var(--coral); box-shadow: inset 0 0 0 4px #e8aa39; }
.word-car::before { left: 27px; }.word-car::after { right: 27px; }
.coupler { width: 55px; height: 16px; border: 4px solid #714b22; border-radius: 999px; background: var(--gold); box-shadow: inset 0 3px rgba(255,255,255,.35); }
.result-ticket { position: relative; min-width: 250px; display: grid; place-items: center; padding: 17px 32px; border: 3px solid #a96020; border-radius: 9px; color: var(--navy-dark); background: #ffd775; box-shadow: inset 0 0 0 5px #fff0b3,0 7px 0 #bc762d; font-size: clamp(39px,5vw,64px); font-weight: 1000; letter-spacing: -.04em; }
.result-ticket::before,.result-ticket::after { position: absolute; top: 50%; width: 22px; height: 32px; content: ""; transform: translateY(-50%); border-radius: 50%; background: #fff9e8; }
.result-ticket::before { left: -13px; }.result-ticket::after { right: -13px; }
.apostrophe { color: var(--coral-dark); text-shadow: 0 2px white; }
.sentence-board { width: min(730px,96%); padding: 20px 26px; border: 2px solid #c6aa78; border-radius: 14px; background: white; box-shadow: 0 6px 0 #e4cfaa; text-align: center; font-size: clamp(24px,3vw,38px); font-weight: 900; }
.sentence-blank { display: inline-block; min-width: 116px; margin: 0 5px; padding: 2px 9px; border-bottom: 4px solid var(--teal); color: var(--coral-dark); }
.apostrophe-spark { position: absolute; z-index: 8; left: 50%; top: 48%; color: #fff5b8; opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(-14deg); text-shadow: 0 0 20px #f7a83d,0 4px var(--coral-dark); font: 1000 110px/1 Georgia,serif; pointer-events: none; }
.station.is-squishing .word-car:first-child { animation: couple-left 440ms ease-out both; }.station.is-squishing .word-car:last-child { animation: couple-right 440ms ease-out both; }
.station.is-squishing .apostrophe-spark { animation: apostrophe-pop 620ms ease-out both; }

.evidence-strip { min-height: 36px; display: grid; place-items: center; color: #315b5d; font-size: 13px; font-weight: 900; text-align: center; }
.evidence-strip b { margin: 0 4px; color: var(--coral-dark); font-size: 17px; }
.feedback { min-height: 29px; display: grid; place-items: center; color: #146c5d; font-size: 14px; font-weight: 900; text-align: center; }
.feedback.is-error { color: var(--coral-dark); }
.action-area { position: relative; z-index: 2; min-height: 76px; display: flex; align-items: center; justify-content: center; }
.choice-grid { width: min(760px,100%); display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.choice,.primary { min-height: 62px; border: 2px solid #b9aa8c; border-radius: 13px; background: white; box-shadow: 0 5px 0 #d8c9aa; font-weight: 1000; transition: transform 140ms ease-out,box-shadow 140ms ease-out,border-color 140ms ease-out; }
.choice { padding: 8px 12px; font-size: clamp(19px,2.2vw,29px); }.choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 800; }
.choice:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: 0 7px 0 #acd8cc; }.choice:active { transform: translateY(4px); box-shadow: 0 1px 0 #acd8cc; }
.match-grid .choice { font-size: 18px; }
.explain-grid .choice { font-size: 15px; line-height: 1.18; }
.primary { min-width: 230px; padding: 0 25px; border-color: var(--navy-dark); color: white; background: var(--teal); box-shadow: 0 6px 0 #0b5b60; font-size: 16px; }
.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #0b5b60; }.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #0b5b60; }
.primary.is-coral { border-color: var(--coral-dark); background: var(--coral); box-shadow: 0 6px 0 var(--coral-dark); }

.platform-train { position: absolute; z-index: 2; left: 258px; right: 0; bottom: -22px; height: 137px; pointer-events: none; }
.platform-train img { position: absolute; z-index: 3; left: 9px; bottom: 18px; width: 150px; filter: drop-shadow(0 8px 4px rgba(18,24,20,.38)); }
.carriage { position: absolute; z-index: 2; left: 140px; bottom: 33px; width: 285px; height: 76px; border: 5px solid var(--navy-dark); border-radius: 12px 19px 8px 8px; background: linear-gradient(#e16b49 0 67%,#a73e31 67%); box-shadow: inset 0 5px rgba(255,255,255,.16); }
.carriage i { position: absolute; top: 12px; width: 65px; height: 35px; border: 4px solid #e3ae4b; border-radius: 7px; background: #bce1d8; }.carriage i:first-child { left: 22px; }.carriage i:nth-child(2) { left: 101px; }
.carriage b { position: absolute; right: 12px; top: 17px; width: 72px; color: #fff3c5; font-size: 10px; letter-spacing: .08em; text-align: center; }
.carriage::before,.carriage::after { position: absolute; bottom: -19px; width: 35px; height: 35px; content: ""; border: 5px solid var(--navy-dark); border-radius: 50%; background: #e2a73b; }.carriage::before { left: 39px; }.carriage::after { right: 39px; }
.track { position: absolute; left: 0; right: 0; bottom: 20px; height: 18px; border-top: 6px solid #453326; border-bottom: 6px solid #453326; background: repeating-linear-gradient(90deg,#7a5637 0 19px,transparent 19px 34px); }
.station.is-level-up .platform-train { animation: train-chuff 850ms ease-out; }

.ticket-celebration { position: absolute; z-index: 30; right: -25px; bottom: -40px; width: 255px; opacity: 0; transform: translate(35px,35px) rotate(6deg) scale(.8); filter: drop-shadow(0 15px 9px rgba(28,25,13,.35)); pointer-events: none; }
.station.is-level-up .ticket-celebration { animation: case-pop 900ms ease-out both; }
.confetti { position: absolute; z-index: 28; left: 62%; top: 47%; pointer-events: none; }.confetti i { position: absolute; width: 12px; height: 18px; opacity: 0; border-radius: 3px; background: var(--gold); }
.confetti i:nth-child(2n) { background: var(--coral); }.confetti i:nth-child(3n) { background: var(--teal); }
.station.is-level-up .confetti i { animation: confetti 760ms ease-out both; }
.confetti i:nth-child(1){--x:-130px;--y:-120px}.confetti i:nth-child(2){--x:-55px;--y:-170px;animation-delay:50ms}.confetti i:nth-child(3){--x:25px;--y:-145px;animation-delay:90ms}.confetti i:nth-child(4){--x:120px;--y:-110px;animation-delay:120ms}.confetti i:nth-child(5){--x:150px;--y:5px;animation-delay:160ms}.confetti i:nth-child(6){--x:-150px;--y:15px;animation-delay:190ms}.confetti i:nth-child(7){--x:70px;--y:85px;animation-delay:220ms}.confetti i:nth-child(8){--x:-75px;--y:92px;animation-delay:250ms}
.toast { position: absolute; z-index: 40; left: 50%; bottom: 38px; max-width: 65%; padding: 11px 18px; opacity: 0; transform: translate(-50%,12px); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; color: white; background: var(--navy-dark); box-shadow: 0 7px 20px rgba(0,0,0,.26); pointer-events: none; font-size: 13px; font-weight: 900; transition: opacity 150ms ease-out,transform 150ms ease-out; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }
.station.is-miss .mission-board { animation: gentle-shake 330ms ease-out; }

@keyframes mascot-cheer { 45% { transform: translateY(-9px) rotate(2deg) scale(1.035); } }
@keyframes gentle-shake { 30% { transform: translateX(-7px); } 60% { transform: translateX(6px); } }
@keyframes couple-left { 55% { transform: translateX(38px) rotate(1deg); } }
@keyframes couple-right { 55% { transform: translateX(-38px) rotate(-1deg); } }
@keyframes apostrophe-pop { 35% { opacity: 1; transform: translate(-50%,-65%) scale(1.2) rotate(7deg); } 100% { opacity: 0; transform: translate(-50%,-100%) scale(.8) rotate(14deg); } }
@keyframes train-chuff { 50% { transform: translateX(18px); } }
@keyframes case-pop { 30%,75% { opacity: 1; transform: translate(0,0) rotate(-4deg) scale(1); } 100% { opacity: 0; transform: translate(8px,12px) rotate(0) scale(.95); } }
@keyframes confetti { 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) rotate(260deg); } }

@media (max-height: 730px) {
  .station-hud { top: 12px; height: 64px; }.station-sign,.scoreboard { height: 64px; }.conductor-booth,.mission-board { top: 90px; }.mission-board { bottom: 102px; padding-top: 16px; padding-bottom: 17px; }.board-heading h1 { font-size: 29px; }.word-car { min-height: 81px; }.action-area { min-height: 66px; }.choice,.primary { min-height: 54px; }.speech { font-size: 12px; }.mascot { width: 240px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }