/* Sight Word Train (based on Memory for Kids) — same palette, type and chunky buttons as the other games. */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --navy: #1f5fa4;
  --crimson: #ef5b5b;
  --gold: #ffcf3f;
  --green: #4cbb6c;
  --green-dark: #2f8f4c;
  --cream: #fff8ec;
  --ink: #23324a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(#8fd4ff 0%, #bfe7ff 45%, #ffe9b8 100%);
  color: var(--ink);
  font-family: "Baloo 2", "Fredoka", "Quicksand", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 700;
  touch-action: manipulation;
  user-select: none;
}

.screen { position: fixed; inset: 0; display: none; }
.screen.show { display: flex; flex-direction: column; }

/* ------------------------------ home ------------------------------ */
.home-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: calc(var(--sat) + 34px) 18px calc(var(--sab) + 28px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 560px; }
.brand-words { min-width: 0; }
.brand-mascot { width: 132px; height: 132px; flex: 0 0 auto; filter: drop-shadow(0 5px 4px rgba(20,50,90,.22)); }
.mascot-img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-kicker { margin: 0; font-size: 17px; color: var(--navy); }
.brand-name { margin: -2px 0 0; font-size: clamp(38px,11vw,56px); line-height: .95; color: #fff; -webkit-text-stroke: 5px var(--navy); paint-order: stroke fill; text-shadow: 0 5px 0 var(--navy); letter-spacing: 0; }
.brand-sub { margin: 6px 0 0; font-size: 14px; color: #4b6b52; }
.game-title { width: 100%; max-width: 560px; margin: 2px 0 -4px; color: var(--navy); font-size: clamp(28px,7vw,42px); line-height: 1; text-align: center; text-shadow: 0 3px 0 #fff; letter-spacing: 0; }

.card {
  background: var(--cream);
  border: 4px solid #fff;
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 8px 0 rgba(31,95,164,.18), 0 14px 26px rgba(20,50,90,.16);
}
.card-title { margin: 0 0 8px; font-size: 18px; color: var(--navy); }
.card-note { margin: 0; font-size: 15px; color: #5b6b86; }

.name-input {
  width: 100%;
  font: inherit;
  font-size: 24px;
  padding: 12px;
  border-radius: 16px;
  border: 4px solid #ffd98a;
  background: #fff;
  text-align: center;
}
.name-input:focus { outline: none; border-color: var(--navy); }

.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.level {
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 4px solid #d8e6f5;
  border-radius: 18px;
  padding: 14px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  min-height: 92px;
}
.level-name { font-size: 18px; }
.level-note { font-size: 12px; color: #5b6b86; text-align: center; }
.level.lv-easy, .level.lv-medium, .level.lv-hard { background: #fff; border-color: #d8e6f5; }
.level.sel { border-color: var(--gold); background: #fffdf3; box-shadow: 0 0 0 4px rgba(255,207,63,.35); }
.level:active { transform: translateY(2px); }
.level-dots { display: flex; gap: 4px; }
.level-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d7e3f5; }
.level-dots i.on { background: var(--gold); }

.play-btn {
  font: inherit; font-size: 24px; cursor: pointer;
  border: 0; border-radius: 18px; padding: 14px;
  color: #fff; background: var(--navy); box-shadow: 0 6px 0 #001a45;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.play-btn.small { font-size: 18px; padding: 10px 18px; }
.play-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #001a45; }
.play-tri { width: 0; height: 0; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.home-play { width: 100%; min-height: 76px; border-radius: 26px; background: linear-gradient(#57d47c,#3aa85c); box-shadow: 0 8px 0 var(--green-dark), 0 16px 26px rgba(20,80,40,.28); border: 4px solid #fff; }
.home-play:active { box-shadow: 0 3px 0 var(--green-dark); }

.home-toggles { display: flex; gap: 8px; justify-content: center; }
.toggle {
  font: inherit; cursor: pointer; font-size: 14px;
  border-radius: 999px; padding: 8px 16px;
  border: 3px solid #d7e3f5; background: #fff; color: #8795ad;
}
.toggle[aria-pressed="true"] { border-color: var(--navy); color: var(--navy); background: #e6efff; }

.voice-pick { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 14px; }
.voice-pick select, .voice-pick button {
  font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 10px;
  border: 3px solid #d7e3f5; background: #fff; color: var(--ink);
}
.voice-pick button { cursor: pointer; }

.star-line { margin: 0; text-align: center; font-size: 14px; color: var(--crimson); min-height: 18px; }
.footer-note { margin: 0; text-align: center; font-size: 12px; color: #8795ad; }

/* ------------------------------ game ------------------------------ */
.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: calc(var(--sat) + 6px) 10px 6px;
  background: var(--navy); color: #fff;
}
.tb-btn {
  font: inherit; font-size: 18px; cursor: pointer; line-height: 1;
  width: 40px; height: 40px; border-radius: 12px;
  border: 0; background: rgba(255,255,255,.16); color: #fff;
}
.tb-btn.off { opacity: .45; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.scores { display: flex; flex-direction: column; line-height: 1.15; }
.scores span { font-size: 16px; }
.scores .moves { font-size: 12px; opacity: .85; }

.board-wrap {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
}
.board { display: grid; width: max-content; max-width: 100%; margin: auto; }

.mcard {
  position: relative;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  aspect-ratio: 4 / 5;
  perspective: 700px;
}
.mface {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border-radius: 14px;
  backface-visibility: hidden;
  transition: transform .34s ease;
  overflow: hidden;
}
.mback {
  background: var(--navy);
  border: 3px solid #001a45;
  box-shadow: 0 4px 0 #001a45;
  transform: rotateY(0deg);
}
.mback img { width: 100%; height: 100%; object-fit: cover; }
.mfront {
  background: #fff;
  border: 3px solid #d7e3f5;
  box-shadow: 0 4px 0 #d7e3f5;
  transform: rotateY(180deg);
  padding: 6px 4px 4px;
}
.mfront img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.mname {
  font-size: clamp(11px, 2.4vw, 17px);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mcard.flipped .mback { transform: rotateY(-180deg); }
.mcard.flipped .mfront { transform: rotateY(0deg); }
.mcard.done .mfront { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(251,191,36,.45), 0 4px 0 #e0a90f; }
.mcard.done { animation: pop .45s ease; }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }

.board.calm .mface { transition: none; }
.board.calm .mcard.done { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .mface { transition: none; }
  .mcard.done { animation: none; }
}

.tip { flex: 0 0 auto; margin: 0; padding: 4px 10px calc(var(--sab) + 10px); text-align: center; font-size: 14px; color: #5b6b86; }

/* ---------------------------- overlays ---------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,22,46,.72); padding: 16px;
}
.overlay[hidden] { display: none; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.win-card, .gate-card {
  position: relative;
  background: #fff; border-radius: 22px; padding: 20px;
  width: min(460px, 100%); text-align: center;
  box-shadow: 0 12px 0 rgba(0,0,0,.18);
}
.win-burst { font-size: 54px; }
.win-card h2 { margin: 6px 0; color: var(--navy); font-size: 26px; }
.win-card p { margin: 4px 0; color: #5b6b86; }
.win-stars { font-size: 32px; letter-spacing: .08em; }
.win-btns { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ghost-btn {
  font: inherit; cursor: pointer; font-size: 16px;
  border-radius: 14px; padding: 12px 18px;
  border: 3px solid #d7e3f5; background: #fff; color: var(--navy);
}
.ghost-btn.wide { width: 100%; }

.gate-title { margin: 0 0 6px; color: var(--navy); font-size: 22px; }
.gate-pic { font-size: 50px; line-height: 1.1; }
.gate-q { margin: 6px 0 10px; font-size: 40px; letter-spacing: .06em; color: var(--ink); }
.gate-say { margin: 0 0 8px; font-size: 18px; color: #5b6b86; }
.gate-say .lit, .gate-q .lit { color: var(--gold); }
.gate-choices { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gate-choice {
  font: inherit; cursor: pointer; font-size: 30px; min-width: 92px;
  padding: 14px 8px; border-radius: 18px;
  border: 0; background: var(--navy); color: #fff; box-shadow: 0 5px 0 #001a45;
}
.gate-choice:active { transform: translateY(3px); box-shadow: none; }
.gate-choice.wrong { background: #b9c4d6; box-shadow: none; opacity: .6; }
.gate-msg { margin: 10px 0 0; min-height: 20px; color: var(--crimson); }
.gate-again { margin-top: 10px; }
.gate-card.correct { background: #fffaf0; }

/* Match Maze Adventures: use the tablet's landscape width, not browser height. */
@media (orientation: landscape) and (min-width: 820px) {
  .home-scroll { display: grid; grid-template-columns: minmax(300px,1fr) minmax(340px,1.05fr); grid-template-areas: "brand title" "about levels" "name levels" "play levels" "tog tog" "voice voice" "back back" "star star"; gap: 10px 24px; align-content: start; justify-content: center; max-width: 1060px; padding-top: calc(var(--sat) + 18px); padding-bottom: calc(var(--sab) + 18px); }
  .brand { grid-area: brand; max-width: none; }
  .game-title { grid-area: title; max-width: none; align-self: end; margin: 0 0 -2px; font-size: 34px; }
  #aboutCard { grid-area: about; }
  #nameCard { grid-area: name; }
  #levelCard { grid-area: levels; align-self: start; }
  .home-play { grid-area: play; }
  .home-toggles { grid-area: tog; }
  .voice-pick { grid-area: voice; }
  .ghost-btn.wide { grid-area: back; justify-self: center; }
  .star-line { grid-area: star; }
  .footer-note { display: none; }
  .brand-name { font-size: 34px; }
  .brand-mascot { width: 96px; height: 96px; }
  .card { padding: 12px; }
  .level { min-height: 78px; padding: 10px 4px; }
  .gate-q { font-size: 32px; }
  .gate-choice { font-size: 24px; min-width: 76px; padding: 10px 8px; }
  .gate-pic { font-size: 38px; }
  .tip { display: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .brand-mascot { width: 96px; height: 96px; }
  .brand-name { font-size: 34px; }
  .home-play { min-height: 66px; font-size: 27px; }
  .home-scroll { align-content: start; gap: 11px; padding-top: calc(var(--sat) + 18px); }
}


body.calm .crate-wrap, body.calm .train { transition: none !important; } body.calm .fcard { animation: none !important; }
.win-banner-overlay { align-items: flex-start; padding-top: calc(var(--sat) + 70px); background: rgba(10,30,60,.25); }
@keyframes wobble { 0%,100% { transform: none; } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes land { 0% { transform: translate(-50%,-14px); } 60% { transform: translate(-50%,3px) scaleY(.9); } 100% { transform: translateX(-50%); } }
@keyframes swing { 0% { transform: translate(-50%, -120%); } 70% { transform: translate(-50%, 6%); } 100% { transform: translateX(-50%); } }
@keyframes puff { 0% { transform: scale(.4); opacity: .95; } 100% { transform: translate(-40px,-90px) scale(2.6); opacity: 0; } }
.puffs { position: absolute; inset: 0; pointer-events: none; }
.puff { position: absolute; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; animation: puff 1.6s ease-out forwards; }
.crate-wrap.swing-in { animation: swing .6s ease-out; } .crate-wrap.drop { transform: translate(-50%, 40%) scale(.5); opacity: .2; } .crate-wrap.hide { opacity: 0; }
.fcard { font: inherit; font-size: clamp(30px, 7vh, 64px); cursor: pointer; text-transform: lowercase; min-height: 96px; border-radius: 22px; border-style: solid; border-color: #fff; }
.fcard:nth-child(1) { border-color: #9fd3ff; } .fcard:nth-child(2) { border-color: #ffd36b; } .fcard:nth-child(3) { border-color: #ff9f9f; }
.fcard.right { border-color: #fff; animation: pop .45s ease; } .fcard.wobble { animation: wobble .45s ease; }
.ask { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 10px 4px; color: var(--navy); font-size: clamp(18px, 3.4vh, 26px); }
.hear-btn { font: inherit; font-size: 24px; width: 52px; height: 52px; border-radius: 50%; border: 4px solid #fff; cursor: pointer; }
.hear-btn:active { transform: translateY(2px); }
.flash { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 8px 12px calc(var(--sab) + 14px); min-height: 30%; }

/* ===================== Sight Word Train v2 — storybook art ===================== */
.topbar { background: linear-gradient(#2a6fbf, #1f5fa4 55%, #17497f); box-shadow: 0 3px 0 #0d2c55; }
.tb-title { flex: 1; text-align: center; font-size: 18px; text-shadow: 0 2px 0 #0d2c55; }
.tb-right { margin-left: 0; }
.tb-btn { background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.1)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 2px 0 #0d2c55; }
.tb-btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.2); }
.tb-btn.train-menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: auto; min-width: 140px; flex-shrink: 0; padding: 0 12px;
  background: var(--gold); color: var(--ink); border-radius: 12px;
  box-shadow: inset 0 -3px 0 var(--green-dark);
}
.train-menu-btn:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
@media (max-width: 480px) {
  .topbar .tb-title { display: none; }
  .topbar .tb-right { margin-left: auto; }
}

.depot { position: relative; flex: 1 1 52%; min-height: 230px; overflow: hidden; --px: 0;
  background: linear-gradient(#6fc3ff 0%, #b5e3ff 55%, #e9f6ff 100%); }
.far { position: absolute; left: -10%; right: -10%; top: 0; bottom: 22%;
  background: url(../art/bg-far.webp) center 72% / cover no-repeat;
  transform: translateX(calc(var(--px) * -6px)); transition: transform 1.2s ease; }
.train.leave ~ .far { transition-duration: 2.4s; }
.clouds { position: absolute; inset: 0 0 50% 0; pointer-events: none; }
.cl { position: absolute; width: 120px; height: 36px; border-radius: 40px; background: #fff; opacity: .92;
  box-shadow: 30px -16px 0 6px #fff, 64px -6px 0 0 #fff, 0 6px 10px rgba(80,140,200,.15);
  animation: drift 70s linear infinite; }
.c1 { top: 14%; left: -10%; } .c2 { top: 30%; left: 30%; transform: scale(.7); animation-duration: 95s; animation-delay: -30s; }
.c3 { top: 8%; left: 60%; transform: scale(.85); animation-duration: 80s; animation-delay: -55s; }
.c4 { top: 24%; left: 90%; transform: scale(.6); animation-duration: 110s; animation-delay: -10s; }
@keyframes drift { from { margin-left: -20vw; } to { margin-left: 120vw; } }

.mid { position: absolute; left: -14%; right: -14%; bottom: 26%; height: 62%;
  transform: translateX(calc(var(--px) * -18px)); transition: transform 1.2s ease; }
.mid img { position: absolute; bottom: 0; filter: drop-shadow(0 6px 4px rgba(20,60,30,.25)); }
.tower { left: 18%; height: 100%; max-height: 260px; }
.oak { height: 62%; max-height: 170px; }
.o1 { left: 6%; height: 50%; } .o2 { left: 38%; } .o3 { left: 64%; height: 48%; } .o4 { left: 84%; height: 70%; }

.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(#7fd06a, #57ad4c 60%, #4a9a42); box-shadow: inset 0 4px 0 #9be27f; }
.track { position: absolute; left: 0; right: 0; bottom: 6%; height: 30px; }
.ballast { position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  background: radial-gradient(circle at 30% 40%, #b7b2a8 1.5px, transparent 2px) 0 0 / 7px 6px,
              radial-gradient(circle at 70% 70%, #8e877b 1.5px, transparent 2px) 0 0 / 9px 7px,
              linear-gradient(#a59e92, #7b7468);
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); }
.ties { position: absolute; left: 0; right: 0; bottom: 8px; height: 10px;
  background: repeating-linear-gradient(90deg, transparent 0 8px, #6e4528 8px 10px, #8a5a35 10px 22px, #5a3720 22px 24px, transparent 24px 30px); }
.rail { position: absolute; left: 0; right: 0; bottom: 16px; height: 7px; border-radius: 2px;
  background: linear-gradient(#f4f8ff 0 25%, #a8b3c4 26% 60%, #4d5868 61%); box-shadow: 0 2px 2px rgba(0,0,0,.3); }

.depot-sign { position: absolute; left: 12px; top: 8px; z-index: 3; animation: sway 4s ease-in-out infinite; transform-origin: 50% -20px; }
.chain { position: absolute; top: -10px; width: 4px; height: 14px; background: repeating-linear-gradient(#c9a84c 0 4px, #8a6406 4px 6px); }
.chain.l { left: 22%; } .chain.r { right: 22%; }
.sign-board { display: flex; flex-direction: column; align-items: center; padding: 6px 16px 7px; border-radius: 12px;
  background: repeating-linear-gradient(0deg, #b0743f 0 9px, #9d6534 9px 10px), #a86c39;
  border: 4px solid #6b4426; box-shadow: inset 0 0 0 2px #e0a96c, 0 5px 0 #4a2e18, 0 8px 12px rgba(0,0,0,.25);
  color: #ffe9a8; text-shadow: 0 2px 0 #4a2e18; line-height: 1.1; }
.sign-kicker { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #fff4cf; }
#carLine { font-size: 18px; } #trainLine { font-size: 12px; opacity: .9; }
@keyframes sway { 0%,100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }

.train { position: absolute; left: 0; bottom: calc(6% + 18px); display: flex; align-items: flex-end; gap: 10px; z-index: 2;
  transition: transform .9s cubic-bezier(.45,.05,.3,1); will-change: transform; }
.train.leave { transition: transform 2.4s cubic-bezier(.5,0,.8,.6); }
.engine, .car { animation: chug .5s ease-in-out infinite alternate; }
.car:nth-child(odd) { animation-delay: -.25s; }
@keyframes chug { from { translate: 0 0; } to { translate: 0 -1.5px; } }
.engine { position: relative; width: 172px; height: 124px; }
.loco { position: absolute; left: 0; top: 0; width: 172px; height: 112px; filter: drop-shadow(0 4px 3px rgba(0,0,0,.25)); }
.cabwin { position: absolute; left: 13px; top: 25px; width: 34px; height: 28px; border-radius: 5px; overflow: hidden; }
.cabwin img { width: 46px; margin-left: -6px; margin-top: -2px; }
.stack { position: absolute; left: 131px; top: 6px; width: 1px; height: 1px; }
.wheel { position: absolute; bottom: 0; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #1d2430;
  background: radial-gradient(circle, #ffd84a 0 16%, #8a6406 17% 22%, transparent 23%),
              repeating-conic-gradient(#2b3442 0 10deg, transparent 10deg 45deg),
              radial-gradient(circle, #e2412f 0 62%, #1d2430 64%);
  box-shadow: inset 0 0 0 2px #ffcf3f; }
.wheel.big { width: 40px; height: 40px; }
.engine .w1 { left: 10px; } .engine .w2 { left: 62px; } .engine .w3 { left: 106px; } .engine .w4 { left: 148px; width: 22px; height: 22px; }
.rod { position: absolute; left: 78px; bottom: 16px; width: 48px; height: 6px; border-radius: 3px; background: linear-gradient(#e8edf3, #7d8798); z-index: 1; }
.train.moving .wheel { animation: spin .5s linear infinite; }
.train.moving .rod { animation: rod .5s linear infinite; }
@keyframes spin { to { rotate: -360deg; } }
@keyframes rod { 0% { transform: translate(-5px, 0); } 25% { transform: translate(0, -5px); } 50% { transform: translate(5px, 0); } 75% { transform: translate(0, 5px); } 100% { transform: translate(-5px, 0); } }
.train.moving .wheel { animation-direction: reverse; }

.car { position: relative; width: 116px; height: 76px; }
.flat { position: absolute; left: 0; bottom: 14px; width: 116px; height: 60px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.22)); }
.car .w1 { left: 14px; } .car .w2 { right: 14px; }
.coupler { position: absolute; right: -13px; bottom: 26px; width: 16px; height: 6px; border-radius: 3px; background: #2b3442; box-shadow: inset 0 1px 0 #7d8798; }
.load { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); }
.car.loaded .load { animation: land .45s cubic-bezier(.3,1.6,.5,1); }

.crate-wrap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  transition: transform .5s cubic-bezier(.5,0,.7,1), opacity .2s; z-index: 4; }
.crate-wrap .cable { width: 4px; height: clamp(10px, 4vh, 40px); background: linear-gradient(90deg,#2b3442,#7d8798,#2b3442); }
.crate { width: clamp(110px, 22vh, 170px); height: clamp(110px, 22vh, 170px); border-radius: 14px; position: relative;
  background: repeating-linear-gradient(90deg, #e2ab70 0 24px, #cf9459 24px 26px, #d9a066 26px 30px);
  border: 6px solid #8a5a35;
  box-shadow: inset 0 0 0 5px #f0c287, inset 0 -10px 18px rgba(90,50,10,.25), 0 10px 18px rgba(40,30,10,.28);
  display: flex; align-items: center; justify-content: center; }
.crate::before, .crate::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 3px; background: #6b7686; box-shadow: inset 0 1px 0 #cfd6e0; }
.crate::before { left: 4px; top: 4px; } .crate::after { right: 4px; bottom: 4px; }
.crate img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 4px 2px rgba(0,0,0,.2)); }
.crate.small { width: 64px; height: 64px; border-width: 4px; border-radius: 9px; box-shadow: inset 0 0 0 3px #f0c287, 0 3px 4px rgba(0,0,0,.25); }
.crate.small::before, .crate.small::after { width: 7px; height: 7px; left: 2px; top: 2px; }
.crate.small::after { left: auto; top: auto; right: 2px; bottom: 2px; }

.puffs { z-index: 5; }
.puff { background: radial-gradient(circle at 35% 35%, #fff, #e3e9f1 70%, #c8d2df); }
.spark { position: absolute; font-size: 20px; color: #ffd23f; text-shadow: 0 0 8px #fff3a0; pointer-events: none;
  animation: spark .85s ease-out forwards; }
@keyframes spark { from { transform: translate(-50%,-50%) scale(.4); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2); opacity: 0; } }

.ask { background: linear-gradient(#fff8ec, #f6ead2); border-top: 4px solid #e0c08a; }
.hear-btn { background: radial-gradient(circle at 35% 30%, #fff3a8, #ffcf3f 55%, #e0a90f); box-shadow: 0 5px 0 #b78400, 0 0 0 0 rgba(255,207,63,.5); transition: box-shadow .2s; }
.hear-btn:hover { box-shadow: 0 5px 0 #b78400, 0 0 16px 4px rgba(255,207,63,.6); }
.flash { background: #f6ead2; }
.fcard { position: relative; background: linear-gradient(#fffdf6, #f6e6c6); border-width: 6px; color: #1f3350;
  box-shadow: inset 0 3px 0 #fff, inset 0 -6px 0 rgba(160,110,40,.18), 0 8px 0 #c9a46a, 0 14px 20px rgba(80,50,10,.22);
  transition: transform .12s, box-shadow .12s; text-shadow: 0 2px 0 #fff; }
.fcard:hover { box-shadow: inset 0 3px 0 #fff, inset 0 -6px 0 rgba(160,110,40,.18), 0 8px 0 #c9a46a, 0 0 18px 4px rgba(255,207,63,.55); }
.fcard:active { transform: translateY(5px); box-shadow: inset 0 3px 0 #fff, 0 3px 0 #c9a46a; }
.fcard.right { background: linear-gradient(#dcffd9, #86e08f); box-shadow: 0 8px 0 #3aa85c, 0 0 22px 6px rgba(120,230,130,.6); }

.play-btn, .ghost-btn, .toggle, .level { transition: transform .1s, box-shadow .15s; }
.play-btn:hover, .ghost-btn:hover { filter: brightness(1.06); box-shadow: 0 6px 0 #001a45, 0 0 16px 3px rgba(255,207,63,.45); }
.home-play:hover { box-shadow: 0 8px 0 var(--green-dark), 0 0 20px 4px rgba(120,230,130,.55); }
.ghost-btn { box-shadow: 0 4px 0 #b9c9de; } .ghost-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b9c9de; }

/* golden ticket win banner */
.win-card.ticket { padding: 30px 26px 20px; border-radius: 16px; overflow: visible;
  background: radial-gradient(circle at 0 50%, transparent 16px, transparent 17px) left / 51% 100% no-repeat,
              radial-gradient(circle at 100% 50%, transparent 16px, transparent 17px) right / 51% 100% no-repeat;
  background-color: transparent; }
.win-card.ticket::before { content: ""; position: absolute; inset: 0; border-radius: 16px; z-index: -1;
  background: linear-gradient(135deg, #fff6c9, #ffd95a 45%, #f2b81f);
  -webkit-mask: radial-gradient(circle 16px at 0 50%, transparent 98%, #000) , radial-gradient(circle 16px at 100% 50%, transparent 98%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  box-shadow: 0 12px 0 rgba(0,0,0,.18); }
.win-card.ticket::after { content: ""; position: absolute; inset: 9px 22px; border: 3px dashed rgba(138,100,6,.55); border-radius: 10px; pointer-events: none; }
.ticket-ribbon { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); white-space: nowrap; z-index: 2;
  padding: 7px 26px; font-size: 18px; color: #fff; letter-spacing: .08em; background: linear-gradient(#ff6b6b, #c93a3a);
  border-radius: 8px; box-shadow: 0 4px 0 #7a1c1c; text-shadow: 0 2px 0 #7a1c1c; }
.ticket-bryce { width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0,0,0,.2)); }
.ticket-kicker { margin: 0 !important; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8a6406 !important; }
.win-card.ticket h2 { color: #7a1c1c; font-size: 28px; text-shadow: 0 2px 0 #fff3b0; }
.win-card.ticket p { color: #5e4510; }
.win-card.ticket .win-btns { position: relative; z-index: 1; }

body.calm .engine, body.calm .car, body.calm .cl, body.calm .depot-sign, body.calm .wheel, body.calm .rod { animation: none !important; }
body.calm .far, body.calm .mid { transition: none; }
@media (max-height: 560px) { .depot-sign { transform: scale(.82); transform-origin: 0 0; } }