/* Video inspired gameplay upgrade: moving western train, urgent race, unmistakable feedback. */
.verdict-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 90;
  display: grid;
  min-width: min(310px, 78%);
  padding: 18px 26px 20px;
  transform: translate(-50%, -50%) scale(.72);
  place-items: center;
  border: 7px solid currentColor;
  border-radius: 28px;
  box-shadow: 0 22px 60px rgba(24, 35, 57, .34), inset 0 0 0 5px rgba(255, 255, 255, .7);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  line-height: 1;
}

.verdict-flash[hidden] { display: none; }
.verdict-flash.correct { color: #08783f; background: #dffff0; }
.verdict-flash.wrong { color: #c32222; background: #fff0ed; }
.verdict-flash.timing { color:#9a580a;background:#fff0c8; }
.verdict-flash.show { animation: verdict-pop .72s cubic-bezier(.2, 1.42, .35, 1) both; }
.verdict-symbol { display: block; font-size: clamp(74px, 11vw, 118px); font-weight: 1000; line-height: .8; }
.verdict-flash strong { margin-top: 9px; font-size: clamp(27px, 4vw, 43px); letter-spacing: .08em; }
.verdict-flash span { margin-top: 8px; font-size: clamp(18px, 2.4vw, 25px); font-weight: 900; }

@keyframes verdict-pop {
  0% { transform: translate(-50%, -50%) scale(.62) rotate(-7deg); opacity: 0; }
  20%, 76% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.08); opacity: 0; }
}

#timingFeedback.feedback-correct,
#trainFeedback.feedback-correct,
#matchFeedback.feedback-correct,
#raceFeedback.feedback-correct {
  color: #08783f !important;
  background: #e5fff1 !important;
  border: 4px solid #25a866 !important;
  font-weight: 1000 !important;
}

#timingFeedback.feedback-wrong,
#trainFeedback.feedback-wrong,
#matchFeedback.feedback-wrong,
#raceFeedback.feedback-wrong {
  color: #b81f1f !important;
  background: #fff0ed !important;
  border: 4px solid #e2433b !important;
  font-weight: 1000 !important;
}
#timingFeedback.feedback-timing { color:#885100 !important;background:#fff4d7 !important;border:4px solid #e9aa3c !important;font-weight:1000 !important; }

.western-train-world {
  position: relative;
  min-height: 430px !important;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 13%, #fff7a8 0 34px, transparent 35px),
    linear-gradient(#74cce8 0 50%, #efb561 50% 82%, #75432d 82% 100%) !important;
}

.western-train-world::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 58px;
  height: 14px;
  border-top: 6px solid #2f2b2a;
  border-bottom: 5px solid #2f2b2a;
  background: repeating-linear-gradient(90deg, #5a3926 0 10px, transparent 10px 30px);
}

.western-scenery { position: absolute; inset: 0 -260px 0 0; z-index: 0; pointer-events: none; transform: translateX(var(--scene-shift, 0px)); }
.mesa { position: absolute; bottom: 76px; width: 220px; height: 94px; border-radius: 55% 60% 0 0; background: #c36f3f; opacity: .86; }
.mesa::after { content: ''; position: absolute; inset: 30px -70px 0; background: #d8894c; border-radius: 50% 50% 0 0; }
.mesa-a { left: 5%; transform: scale(.8); }
.mesa-b { right: 7%; transform: scale(1.1); }
.cactus { position: absolute; bottom: 79px; width: 12px; height: 58px; border-radius: 8px 8px 0 0; background: #337e55; }
.cactus::before, .cactus::after { content: ''; position: absolute; width: 20px; height: 10px; top: 23px; border: 8px solid #337e55; border-top: 0; }
.cactus::before { right: 7px; border-left: 0; border-radius: 0 0 9px 0; }
.cactus::after { left: 7px; border-right: 0; border-radius: 0 0 0 9px; }
.cactus-a { left: 35%; }
.cactus-b { right: 29%; transform: scale(.72); }

.western-train-world .timing-cloud {
  z-index: 16 !important;
  min-width: 132px !important;
  min-height: 58px !important;
  padding: 15px 29px 13px 26px !important;
  border: 4px solid #5e386c !important;
  border-radius: 52% 48% 45% 45% !important;
  color: #2d2241 !important;
  background: linear-gradient(180deg, #fff6b8, #f4bd64) !important;
  box-shadow: inset 0 -7px 0 rgba(186, 90, 47, .18), 0 8px 0 rgba(73, 49, 69, .2) !important;
  font-weight: 1000 !important;
}

.western-train-world .timing-cloud::before {
  content: '' !important;
  position: absolute !important;
  left: 26% !important;
  top: -14px !important;
  width: 48% !important;
  height: 15px !important;
  border: 4px solid #5e386c !important;
  border-bottom: 0 !important;
  border-radius: 50% 50% 0 0 !important;
  background: #dc7e4c !important;
}

.western-train-world .timing-cloud::after {
  content: '✦' !important;
  position: absolute !important;
  right: -27px !important;
  top: 10px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  color: #5e386c !important;
  background: #f7d373 !important;
  font-size: 25px !important;
  line-height: 29px !important;
}

.western-train-world .dropped-word {
  z-index: 30 !important;
  min-width: 86px !important;
  max-width: 138px !important;
  padding: 13px 15px !important;
  border: 5px ridge #8b4d24 !important;
  border-radius: 5px !important;
  color: white !important;
  background: linear-gradient(135deg, #b96f32, #7d3d1d) !important;
  box-shadow: 0 7px 0 rgba(61, 33, 24, .28) !important;
  font-weight: 1000 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.western-train-world .dropped-word.cargo-hit,
.western-train-world .dropped-word.cargo-miss { animation: cargo-impact .42s ease-out both; }
.western-train-world .dropped-word.cargo-hit { border-color:#30bb68 !important; box-shadow:0 0 0 5px #b2f4c4,0 7px 0 #56301b !important; }
.western-train-world .dropped-word.cargo-miss { border-color:#e63732 !important; box-shadow:0 0 0 5px #ffd1cc,0 7px 0 #56301b !important; }
.western-train-world .dropped-word.cargo-hit::after,
.western-train-world .dropped-word.cargo-miss::after { position:absolute; top:-39px; left:50%; transform:translateX(-50%); font-size:41px; line-height:1; font-weight:1000; text-shadow:0 2px 0 white,2px 0 0 white,-2px 0 0 white; }
.western-train-world .dropped-word.cargo-hit::after { content:'✓'; color:#17944f; }
.western-train-world .dropped-word.cargo-miss::after { content:'✕'; color:#d82626; }
.western-train-world .dropped-word.cargo-timing { border-color:#e9a42e !important;box-shadow:0 0 0 5px #ffefb9 !important; }
.western-train-world .dropped-word.cargo-timing::after { content:'✓';position:absolute;top:-39px;left:50%;transform:translateX(-50%);font-size:41px;color:#d79216;font-weight:1000;text-shadow:0 2px 0 white; }
@keyframes cargo-impact { 0% { translate:0 -7px; } 55% { translate:0 3px; } 100% { translate:0 0; } }

.western-train-world .express-train {
  z-index: 20 !important;
  display: flex !important;
  width: max-content !important;
  align-items: end !important;
  gap: 5px !important;
  filter: drop-shadow(0 8px 5px rgba(45, 28, 24, .32));
  animation: train-ride .28s ease-in-out infinite alternate;
}

.gq-upgrade-passenger { width: 154px; height: auto; pointer-events: none; }
.gq-upgrade-engine { width: 190px; height: auto; margin-left: -5px; pointer-events: none; }
.western-train-world .express-train > img:not(.gq-upgrade-passenger):not(.gq-upgrade-engine) { display: none !important; }
.western-train-world .catch-car { position: relative; z-index: 2; border: 5px solid #60311d !important; background: linear-gradient(#d18b3f, #9a5229) !important; color: #fff !important; }
.western-train-world .catch-car::after { content: 'TARGET'; display: block; margin-top: 4px; color: #ffeaa0; font-size: 11px; letter-spacing: .15em; }
.western-train-world .caught-words { position:absolute; left:7px; right:7px; bottom:24px; display:flex; gap:4px; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; white-space:nowrap; max-width:calc(100% - 14px); z-index:3; }
.western-train-world .stored-word { flex:0 0 auto; padding:2px 5px; border:1px solid #ffdc8a; border-radius:3px; color:#543016; background:#fff1bd; font-size:9px; line-height:1.3; font-weight:900; }
.western-train-world .catch-car:has(.stored-word) > strong { transform:translateY(-16px); }
.western-train-world .catch-car:has(.stored-word) > small { visibility:hidden; }
.western-train-world::after { background-position-x:var(--rail-shift, 0px); }
@keyframes train-ride { to { translate:0 2px; } }

.match-board, .race-road { position: relative; }
.match-board { overflow: visible; }

.continuous-race-note {
  display: flex;
  margin: 10px 0;
  padding: 11px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 3px solid #df3b34;
  border-radius: 15px;
  color: #9e1d1d;
  background: #fff0ed;
}
.continuous-race-note b { font-size: 18px; }
.continuous-race-note span { font-weight: 800; }

.continuous-road {
  background-position: center 0 !important;
  animation: urgent-road 1s linear infinite !important;
}
.race-is-running .continuous-road { animation-duration: 1.3s !important; }
.race-is-running #raceCar { animation: car-pressure .24s ease-in-out infinite alternate; }
#raceRemaining { padding:6px 10px; border-radius:9px; color:#184e56; background:#e5f3ef; font-size:15px; white-space:nowrap; }
.race-boost-help { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:10px 0 0; color:#315f66; font-size:13px; line-height:1.6; }
.race-boost-help kbd { padding:2px 7px; border:1px solid #a8c5c1; border-radius:5px; background:#fff; font:800 12px Nunito,Arial,sans-serif; }
#raceBoostState { margin-left:auto; padding:3px 9px; border-radius:8px; background:#e5f3ef; color:#225c60; white-space:nowrap; }
#raceBoostState.active { color:#9e431b; background:#ffe0a1; }
.race-road.boosting { border-color:#e7a447; box-shadow:0 0 0 4px #ffe29f; }
.race-road.boosting #raceCar { filter:drop-shadow(0 10px 7px #fdb34a); }
.race-road.boosting #raceCar::after { content:'✦ ✦'; position:absolute; left:50%; top:100%; transform:translateX(-50%); color:#ffca54; font-size:18px; white-space:nowrap; }
.race-is-running .continuous-road.boosting { animation-duration:.65s !important; }
.race-is-running .continuous-road.boosting-max { animation-duration:.43s !important; border-color:#f27638; box-shadow:0 0 0 6px #ffe29f; }
.race-road.boosting-max #raceCar { filter:drop-shadow(0 15px 10px #ff862a); }
.race-car svg { display:block; width:44px; height:66px; margin:auto; pointer-events:none; filter:drop-shadow(0 3px 2px #102f38); }

/* A crate tumbles through the full scene, bounces on impact, and remains as cargo. */
.western-train-world .dropped-word { background:repeating-linear-gradient(0deg,#ad672d 0 8px,#ba7639 8px 10px,#a35c29 10px 18px) !important; border:5px ridge #7b421f !important; box-shadow:inset 0 0 0 2px #dfaa61,0 8px 2px #4c291b55 !important; will-change:top,left,transform; }
.western-train-world .dropped-word::before { content:''; position:absolute; inset:0; border-left:4px solid #d6a057; border-right:4px solid #d6a057; pointer-events:none; }
.western-train-world .dropped-word.cargo-hit,.western-train-world .dropped-word.cargo-miss { animation:none !important; }
.western-train-world .dropped-word.cargo-miss { border-color:#ac3925 !important; box-shadow:inset 0 0 0 2px #e7a46c,0 0 0 4px #f4d1c6 !important; }
.western-train-world .dropped-word.cargo-hit { border-color:#3f754b !important; box-shadow:inset 0 0 0 2px #d9ae65,0 0 0 4px #b9efc5 !important; }
.western-train-world .caught-words { overflow-x:hidden !important; }
.train-answer-panel { margin:18px 0 8px;padding:17px;border:1px solid #cbded8;border-radius:15px;background:#f6faf6; }
.train-answer-head { display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px; }
.train-answer-head h3 { margin:0;color:#244e58;font-size:17px; }
.train-answer-head span { color:#58787e;font-size:12px;font-weight:800; }
.train-answer-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px; }
.train-answer-tile { display:flex;flex-direction:column;gap:4px;min-width:0;min-height:76px;padding:9px;border:1px solid #d8e4df;border-radius:9px;background:white;overflow-wrap:anywhere; }
.train-answer-tile small { color:#6d8587;font-size:10px;font-weight:900; }
.train-answer-tile strong { color:#214e56;font-size:13px;line-height:1.3; }
.train-answer-tile span { color:#678085;font-size:10px; }
.train-answer-tile.caught { border-color:#75c89a;background:#e8f7ec; }
.train-answer-tile.timing { border-color:#e9c776;background:#fff7df; }
.train-answer-tile.incorrect { border-color:#e5a59d;background:#fff0ed; }
.train-answer-tile.pending strong { color:#aab9b8; }
@media(max-width:900px){.train-answer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.train-answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.western-train-world .caught-words { left:5px;right:5px;bottom:44px;max-width:calc(100% - 10px);height:47px;align-items:end;overflow-x:auto;overflow-y:visible; }
.western-train-world .stored-word { flex:0 0 72px;display:grid;place-items:center;min-height:36px;padding:3px;white-space:normal;overflow-wrap:anywhere;border:4px ridge #79401d;border-radius:4px;background:repeating-linear-gradient(0deg,#b47135 0 8px,#cb8944 8px 10px);box-shadow:inset 0 0 0 1px #e4b879,0 3px 0 #5b321d;color:#fff;font-size:10px;line-height:1.1;text-shadow:0 1px 1px #613319;transform:rotate(-4deg); }
.western-train-world .stored-word:nth-child(even) { transform:rotate(5deg); }
.western-train-world .catch-car { border-top:0 !important;border-radius:5px 5px 11px 11px !important;background:linear-gradient(180deg,transparent 0 36%,#8b4828 37% 100%) !important; }
.western-train-world .catch-car::after { content:'';position:absolute;z-index:5;left:0;right:0;bottom:0;height:30px;margin:0;background:linear-gradient(#d7964b,#96502a);border-top:4px solid #68381e;box-shadow:inset 0 -5px 0 #703c22; }
.western-train-world .catch-car > strong { position:absolute;z-index:6;left:4px;right:4px;bottom:7px;color:#fff7d7;text-shadow:0 1px 2px #462517; }
.western-train-world .catch-car > small { display:none; }
.western-train-world .catch-car:has(.stored-word) > strong { transform:none;font-size:10px; }
.western-train-world .catch-car:has(.stored-word) > small { visibility:hidden; }

/* Speed is visible through moving lane markers, roadside streaks, and exhaust. */
.race-road::before,.race-road::after { content:'';position:absolute;z-index:1;top:100px;bottom:28px;width:10px;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 28px,#c6e3d5 28px 52px,transparent 52px 81px);background-position-y:var(--road-shift);opacity:.38; }
.race-road::before { left:8px; }.race-road::after { right:8px; }
.race-road.boosting .lane-lines { opacity:.82;filter:brightness(1.2); }
.race-road.boosting::before,.race-road.boosting::after { width:17px;opacity:.85;background:repeating-linear-gradient(180deg,transparent 0 14px,#fff1a5 14px 56px,transparent 56px 70px);background-position-y:var(--road-shift); }
.race-road.boosting-max::before,.race-road.boosting-max::after { background:repeating-linear-gradient(180deg,transparent 0 8px,#fff4bd 8px 57px,transparent 57px 65px);background-position-y:var(--road-shift); }
.race-road.boosting #raceCar::before { content:'';position:absolute;left:17px;right:17px;top:85%;height:64px;z-index:-1;background:radial-gradient(ellipse at top,#fff49d 0 16%,#ff9b3c 17% 44%,transparent 68%);filter:blur(1px);animation:exhaust .12s ease-in-out infinite alternate; }
.race-road.boosting-max #raceCar::before { height:95px;left:12px;right:12px;filter:drop-shadow(0 0 7px #ff9a39); }
.race-road.boosting #raceCar { animation:car-boost-shake .08s linear infinite alternate !important; }
@keyframes exhaust { to { transform:scaleX(.7) scaleY(1.25);opacity:.85; } }
@keyframes car-boost-shake { to { translate:1px 3px; } }

@keyframes urgent-road { to { background-position: center 150px; } }
@keyframes car-pressure { to { translate: 0 3px; } }

@media (max-width: 700px) {
  .western-train-world { min-height: 390px !important; }
  .gq-upgrade-passenger { display:none; }
  .gq-upgrade-engine { width:125px; }
  .western-train-world .timing-cloud { width: 100px !important; min-width: 100px !important; padding: 11px 10px !important; }
  .western-train-world .dropped-word { min-width:64px !important;max-width:92px !important;padding:8px 7px !important;font-size:10px !important; }
  .continuous-race-note { align-items: flex-start; flex-direction: column; gap: 3px; }
  .verdict-flash { min-width: 75%; padding: 15px 18px 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .continuous-road, .race-is-running #raceCar, .western-train-world .express-train { animation-duration: 2s !important; }
}