:root {
  color-scheme: light;
  --ink: #17334a;
  --muted: #6e7f8e;
  --paper: #fffdf6;
  --cream: #fff4d8;
  --yellow: #f7b928;
  --yellow-dark: #d99212;
  --asphalt: #596774;
  --asphalt-dark: #394856;
  --green: #60b982;
  --coral: #ef6c67;
  --teal: #25aaa2;
  --blue: #4f87e8;
  --violet: #9568d7;
  --orange: #ed933d;
  --mint: #63b883;
  --shadow: 0 18px 44px rgba(26, 45, 61, .2);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #dce9e2;
  color: var(--ink);
  font-family: "Avenir Next", Avenir, "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

body,
button,
a {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

button,
a { touch-action: manipulation; }

button { font: inherit; }

.game-shell {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 55px rgba(33, 55, 69, .2);
  touch-action: manipulation;
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  min-height: 100dvh;
  overflow: hidden;
}

.screen.active { display: flex; }

.campus-bg,
.play-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(255, 249, 226, .05), rgba(250, 245, 220, .3)), url("campus-background.webp");
  background-position: center top;
  background-size: cover;
}

.campus-bg::after,
.play-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 251, 237, .04) 0%, rgba(255, 251, 237, .23) 44%, rgba(249, 245, 226, .9) 100%);
}

.campus-bg.soft { filter: blur(2px) saturate(.82); transform: scale(1.02); }
.campus-bg.dark::after { background: rgba(30, 43, 54, .38); }

/* Loading */
.loading-screen {
  align-items: center;
  justify-content: flex-end;
  padding: max(30px, env(safe-area-inset-top)) 24px max(34px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #b9dff3 0 34%, #d7e89f 34% 44%, #52616e 44% 100%);
}

.loading-scene { position: absolute; inset: 0; overflow: hidden; }
.loading-scene::before {
  content: "";
  position: absolute;
  left: -10%; right: -10%; top: 27%; height: 18%;
  border-radius: 50% 50% 0 0;
  background: #9dcf6a;
  box-shadow: 0 -25px 0 #b4db82;
}
.loading-road { position: absolute; inset: 45% 0 0; overflow: hidden; }
.loading-road::before {
  content: "";
  position: absolute;
  top: 38%; left: -10%; width: 120%; height: 6px;
  background: repeating-linear-gradient(90deg, #f8e8ad 0 38px, transparent 38px 72px);
  opacity: .82;
}
.loading-road i { position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(36, 51, 63, .15); filter: blur(18px); }
.loading-road i:nth-child(1) { left: -30px; top: 12%; }
.loading-road i:nth-child(2) { right: -30px; top: 35%; }
.loading-road i:nth-child(3) { left: 35%; bottom: -40px; }

.loading-bus,
.result-bus {
  position: absolute;
  width: 174px;
  height: 78px;
  border: 4px solid #ca8210;
  border-radius: 25px 22px 18px 18px;
  background: linear-gradient(#ffd45c 0 17%, #f7b928 17% 75%, #e89c14 75%);
  box-shadow: inset 0 4px rgba(255,255,255,.45), 0 20px 24px rgba(22,35,45,.3);
}

.loading-bus { z-index: 1; left: calc(50% - 87px); top: 37%; animation: bus-bob 1.15s ease-in-out infinite; }
.loading-bus::before,
.result-bus::before {
  content: "";
  position: absolute; left: 16px; right: 18px; top: 17px; height: 24px;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, #315268 0 24px, #dbe8e6 24px 28px);
  border: 3px solid #80510c;
}
.loading-bus b,
.result-bus b { position: absolute; right: -2px; top: 32px; width: 27px; height: 31px; border-radius: 9px 16px 9px 6px; background: #f7b928; border: 4px solid #ca8210; }
.loading-bus span,
.loading-bus em,
.result-bus i,
.result-bus em { position: absolute; bottom: -14px; width: 28px; height: 28px; border: 6px solid #1d2c36; border-radius: 50%; background: #71808a; }
.loading-bus span:nth-of-type(1), .result-bus i:nth-of-type(1) { left: 23px; }
.loading-bus span:nth-of-type(2), .result-bus i:nth-of-type(2) { right: 22px; }
.loading-bus em:nth-of-type(1) { left: -18px; bottom: -7px; width: 10px; height: 5px; border: 0; background: rgba(255,255,255,.75); filter: blur(1px); }
.loading-bus em:nth-of-type(2) { left: -34px; bottom: -1px; width: 16px; height: 6px; border: 0; background: rgba(255,255,255,.48); filter: blur(2px); }

.loading-card {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 27px 24px 22px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 30px;
  background: rgba(255,253,246,.94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.loading-card p,
.title-lockup p,
.result-kicker { margin: 0 0 7px; color: #a16617; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.loading-card h1,
.title-lockup h1 { margin: 0; color: var(--ink); font-size: clamp(34px, 10vw, 48px); line-height: .88; letter-spacing: -.065em; }
.loading-card h1 span,
.title-lockup h1 span,
.result-screen h2 span { display: block; color: var(--yellow-dark); }
.loading-track { height: 11px; margin-top: 22px; overflow: hidden; border-radius: 999px; background: #eadfc8; box-shadow: inset 0 2px 4px rgba(56,65,73,.13); }
.loading-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f19a27, #ffd358); box-shadow: 0 0 14px rgba(247,185,40,.5); transition: width .18s ease-out; }
.loading-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; color: var(--muted); font-size: 11px; }
.loading-meta b { color: var(--ink); }
.loading-card > small { display: block; margin-top: 18px; color: #8b8e8d; font-size: 10px; }

/* Menu */
.menu-screen {
  flex-direction: column;
  justify-content: flex-end;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  background: #edf4e0;
}
.top-actions { position: absolute; z-index: 3; left: 17px; right: 17px; top: max(16px, env(safe-area-inset-top)); display: flex; justify-content: space-between; }
.round-button,
.hud-button {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 14px;
  background: rgba(255,253,246,.91);
  color: var(--ink);
  font-size: 23px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(33,48,59,.15);
  backdrop-filter: blur(9px);
}
.round-button:active,
.hud-button:active { transform: scale(.92); }
.sound-toggle.muted { color: #9aa5ab; }

.title-lockup { position: relative; z-index: 2; margin: 0 13px 16px; text-shadow: 0 2px rgba(255,255,255,.6); }
.title-lockup strong { display: block; margin-top: 10px; color: #38505e; font-size: 12px; }
.menu-card {
  position: relative;
  z-index: 2;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 28px;
  background: rgba(255,253,247,.94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(11px);
}
.trail-heading,
.save-row,
.pickup-heading,
.yard-heading,
.card-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trail-heading small,
.save-row small,
.card-label,
.pickup-heading,
.yard-heading small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.trail-heading strong { display: block; margin-top: 2px; font-size: 15px; }
.trail-heading > span { padding: 7px 10px; border-radius: 10px; background: var(--cream); color: #a56914; font-size: 11px; font-weight: 900; }
.save-row { margin: 14px -4px 15px; padding: 12px 4px; border-block: 1px solid #e8e6df; }
.save-row > div { flex: 1; padding: 0 8px; border-right: 1px solid #e3e1d9; }
.save-row > div:last-child { border-right: 0; }
.save-row strong { display: block; margin-top: 3px; font-size: 13px; }
.level-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.level-button {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #e0ddd4;
  border-radius: 12px;
  background: #f7f5ef;
  color: #7a8790;
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 -3px rgba(28,45,58,.05);
}
.level-button.unlocked { background: #fff; color: var(--ink); }
.level-button.selected { border-color: #e3a126; background: #fff1bc; color: #9f6112; box-shadow: 0 0 0 3px rgba(247,185,40,.24), inset 0 -3px rgba(185,115,13,.08); }
.level-button.complete::after { content: attr(data-stars); position: absolute; left: 0; right: 0; bottom: 2px; color: #df9e1e; font-size: 7px; letter-spacing: -1px; }
.level-button .pretty-lock { position: absolute; left: 50%; top: 50%; width: 11px; height: 9px; transform: translate(-50%,-28%); border-radius: 3px; background: #b5b8b8; box-shadow: inset 0 -2px rgba(65,75,80,.14); }
.level-button .pretty-lock::before { content: ""; position: absolute; left: 2px; top: -7px; width: 7px; height: 8px; border: 2px solid #b5b8b8; border-bottom: 0; border-radius: 7px 7px 0 0; }

.primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  margin-top: 15px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(180deg, #ffc94b, #f0a618);
  color: #4a3310;
  font-weight: 950;
  letter-spacing: .08em;
  box-shadow: inset 0 2px rgba(255,255,255,.45), 0 9px 18px rgba(178,112,11,.22);
}
.primary-button b { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 9px; background: rgba(255,255,255,.5); }
.primary-button:active { transform: translateY(2px) scale(.99); }
.menu-tip { margin: 12px 5px 0; color: var(--muted); font-size: 10px; line-height: 1.45; text-align: center; }
.signature { margin: 10px 0 0; color: #a1a5a3; font-size: 9px; text-align: center; }

/* Play */
.play-screen {
  flex-direction: column;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  background: #dce9d0;
}
.play-bg { filter: saturate(.72); }
.play-bg::after { background: rgba(247,246,230,.64); backdrop-filter: blur(2px); }
.game-header,
.student-card,
.pickup-card,
.yard-card,
.game-tools { position: relative; z-index: 2; }
.game-header { display: flex; align-items: center; justify-content: space-between; min-height: 43px; }
.hud-button { width: 39px; height: 39px; border-radius: 13px; font-size: 20px; }
.level-copy { text-align: center; text-shadow: 0 1px #fff; }
.level-copy small { display: block; color: #997028; font-size: 9px; font-weight: 950; letter-spacing: .16em; }
.level-copy strong { display: block; margin-top: 1px; font-size: 16px; }

.student-card,
.pickup-card,
.yard-card {
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 19px;
  background: rgba(255,253,247,.93);
  box-shadow: 0 9px 24px rgba(34,51,62,.13);
  backdrop-filter: blur(8px);
}
.student-card { padding: 9px 11px 10px; }
.card-label b { color: var(--ink); font-size: 9px; }
.card-label i { font-style: normal; }
.student-queue { display: flex; gap: 7px; min-height: 50px; margin-top: 7px; overflow: hidden; }
.student-group {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 58px;
  height: 49px;
  padding: 6px 19px 5px 6px;
  border: 1px solid color-mix(in srgb, var(--route) 38%, white);
  border-radius: 13px;
  background: color-mix(in srgb, var(--route) 13%, white);
  box-shadow: inset 0 -3px rgba(24,45,58,.04);
  transition: transform .2s ease, opacity .2s ease;
}
.student-group:first-child { box-shadow: 0 0 0 2px color-mix(in srgb, var(--route) 54%, transparent), inset 0 -3px rgba(24,45,58,.04); }
.student-group .kids { display: flex; align-items: flex-end; }
.mini-kid { position: relative; display: block; width: 20px; height: 29px; margin-right: -7px; }
.mini-kid::before { content: ""; position: absolute; left: 4px; top: 0; width: 13px; height: 13px; border-radius: 50%; background: #d99b6d; border: 2px solid #fff8e8; }
.mini-kid::after { content: ""; position: absolute; left: 2px; bottom: 0; width: 17px; height: 17px; border-radius: 8px 8px 5px 5px; background: var(--route); border: 2px solid #fff8e8; box-shadow: inset 0 -4px rgba(17,40,55,.12); }
.student-group strong { position: absolute; right: 5px; top: 5px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 6px; background: var(--route); color: white; font-size: 9px; box-shadow: inset 0 -2px rgba(0,0,0,.12); }
.student-group .mini-kid { animation: waiting-kid 1.8s ease-in-out infinite; }
.student-group .mini-kid:nth-child(2) { animation-delay: -.55s; }
.student-group .mini-kid:nth-child(3) { animation-delay: -1.1s; }
.student-group .mini-kid:nth-child(4) { animation-delay: -1.45s; }
.student-group.more::after { content: "+" attr(data-more); position: absolute; right: -30px; color: var(--muted); font-size: 10px; }
.empty-queue { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 45px; color: #5f9475; font-size: 10px; font-weight: 950; letter-spacing: .12em; }

.pickup-card { padding: 8px 10px 9px; }
.pickup-heading { margin-bottom: 6px; }
.pickup-heading b { color: var(--ink); font-size: 9px; }
.pickup-bays { display: grid; grid-template-columns: repeat(var(--bay-count), 1fr); gap: 7px; }
.pickup-bay {
  position: relative;
  height: 58px;
  overflow: hidden;
  border: 1px dashed #b9c5c9;
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(84,103,116,.12), rgba(84,103,116,.04));
}
.pickup-bay::before { content: "PICK UP"; position: absolute; inset: auto 0 5px; color: #9ca8ad; font-size: 7px; font-weight: 900; letter-spacing: .13em; text-align: center; }
.pickup-bay.occupied::before { display: none; }

.bay-bus { position: absolute; inset: 7px 5px 8px; animation: bay-arrive .36s cubic-bezier(.2,.8,.2,1) both; }
.bay-bus.departing { animation: bay-depart .4s ease-in both; }
.bay-bus.handoff { animation: bay-handoff .45s ease both; }
.bay-bus .tiny-bus { position: absolute; left: 3px; right: 3px; bottom: 5px; height: 29px; border: 2px solid #bf7709; border-radius: 7px 8px 6px 6px; background: linear-gradient(#ffd15d 0 28%, #efac1f 28% 100%); box-shadow: inset 0 2px rgba(255,255,255,.35), 0 5px 7px rgba(31,45,55,.16); }
.bay-bus .tiny-bus { border-color: color-mix(in srgb, var(--route) 72%, #26333d); background: linear-gradient(180deg, color-mix(in srgb, var(--route) 58%, white), var(--route)); }
.bay-bus .tiny-bus::before { content: ""; position: absolute; left: 6px; right: 13px; top: 6px; height: 9px; border-radius: 3px; background: repeating-linear-gradient(90deg,#315267 0 10px,#d7e7e4 10px 13px); }
.bay-bus .route-badge { position: absolute; right: 4px; top: 4px; width: 14px; height: 14px; border: 2px solid white; border-radius: 50%; background: var(--route); box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.window-riders { position: absolute; z-index: 2; left: 7px; right: 20px; top: 5px; display: flex; align-items: center; gap: 3px; height: 11px; overflow: hidden; }
.window-riders span { position: relative; width: 8px; height: 8px; flex: 0 0 8px; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: #d99b6d; box-shadow: 0 4px 0 -1px var(--route); }
.seat-meter { position: absolute; left: 7px; right: 7px; bottom: -1px; display: flex; gap: 2px; }
.seat-meter i { flex: 1; height: 3px; border-radius: 4px; background: rgba(29,48,60,.18); }
.seat-meter i.filled { background: var(--route); }

.yard-card { display: flex; flex: 1; min-height: 385px; flex-direction: column; padding: 10px; overflow: hidden; }
.yard-heading { margin-bottom: 7px; }
.yard-heading strong { display: block; margin-top: 1px; font-size: 12px; }
.mistake-pill { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 9px; background: #f3f0e8; color: #78868f; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.mistake-pill b { color: var(--ink); font-size: 12px; }
.lane-board {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-rows: repeat(var(--lane-count), minmax(42px, 1fr));
  gap: 5px;
  min-height: 300px;
  padding: 8px 4px;
  overflow: hidden;
  border-radius: 15px;
  background: linear-gradient(155deg, rgba(80,95,107,.98), rgba(48,63,75,.98));
  box-shadow: inset 0 3px 8px rgba(16,28,36,.35), inset 0 -2px rgba(255,255,255,.08);
  perspective: 800px;
}
.lane-board::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .42;
  background: linear-gradient(90deg, transparent 0 11%, rgba(255,255,255,.04) 11% 12%, transparent 12% 88%, rgba(255,255,255,.04) 88% 89%, transparent 89%);
  pointer-events: none;
}
.bus-lane {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 33px;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 22px, transparent 22px 40px) center bottom / auto 2px no-repeat;
}
.bus-lane.right { flex-direction: row-reverse; }
.bus-lane::after {
  content: attr(data-arrow);
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  color: rgba(255,237,174,.72);
  font-size: 18px;
  font-weight: 950;
}
.bus-lane.left::after { left: 8px; }
.bus-lane.right::after { right: 8px; }
.crosswalk-gate { position: absolute; z-index: 5; top: 5px; bottom: 5px; width: 8px; border-radius: 4px; background: repeating-linear-gradient(180deg,#fbe8a4 0 5px,#dd6f54 5px 10px); box-shadow: 0 0 0 2px rgba(37,48,55,.25), 0 3px 6px rgba(0,0,0,.2); }
.bus-lane.left .crosswalk-gate { left: 26px; }
.bus-lane.right .crosswalk-gate { right: 26px; }
.crosswalk-gate.open { animation: gate-open .45s ease both; }

.school-bus {
  --bus-w: 78px;
  position: relative;
  flex: 0 0 var(--bus-w);
  width: var(--bus-w);
  height: 35px;
  padding: 0;
  border: 0;
  border-radius: 10px 9px 7px 7px;
  background: linear-gradient(180deg, #ffe178 0 15%, #f9bd2d 15% 72%, #dd8b12 72% 100%);
  box-shadow: inset 0 2px rgba(255,255,255,.55), inset 0 -3px rgba(129,76,7,.18), 0 5px 6px rgba(19,30,38,.27);
  transform: translateZ(8px);
  transition: filter .2s ease, transform .2s ease;
}
.school-bus.cap-2 { --bus-w: 70px; }
.school-bus.cap-3 { --bus-w: 84px; }
.school-bus.cap-4 { --bus-w: 98px; }
.school-bus::before { content: ""; position: absolute; left: 11px; right: 12px; top: 8px; height: 10px; border-radius: 3px; background: repeating-linear-gradient(90deg,#2f5266 0 10px,#d9e7e3 10px 13px); border: 1px solid rgba(99,62,8,.65); }
.school-bus::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: -5px; height: 10px; background: radial-gradient(circle at 8px 50%, #1d2b34 0 5px, #73808a 5px 7px, transparent 7.5px), radial-gradient(circle at calc(100% - 8px) 50%, #1d2b34 0 5px, #73808a 5px 7px, transparent 7.5px); }
.school-bus .bus-nose { position: absolute; top: 16px; width: 14px; height: 14px; border-radius: 4px 8px 5px 4px; background: #f5b425; box-shadow: inset 0 -3px rgba(142,83,7,.16); }
.bus-lane.right .school-bus .bus-nose { right: -4px; }
.bus-lane.left .school-bus .bus-nose { left: -4px; transform: scaleX(-1); }
.school-bus .bus-nose::after { content: ""; position: absolute; right: 2px; top: 4px; width: 3px; height: 4px; border-radius: 3px; background: #fff3a8; box-shadow: 0 0 4px #fff3a8; }
.school-bus .route-strip { position: absolute; left: 12px; right: 11px; top: 3px; height: 4px; border-radius: 5px; background: var(--route); box-shadow: 0 1px 2px rgba(0,0,0,.16); }
.school-bus .capacity { position: absolute; left: 5px; bottom: 3px; display: flex; gap: 2px; }
.school-bus .capacity i { width: 4px; height: 4px; border-radius: 50%; background: rgba(80,53,13,.45); }
.school-bus.front { cursor: pointer; }
.school-bus.front:hover { filter: brightness(1.05); transform: translateZ(8px) translateY(-1px); }
.school-bus:not(.front) { filter: saturate(.86) brightness(.91); }
.school-bus.hinted { animation: bus-hint .72s ease-in-out 3; z-index: 4; }
.school-bus.blocked { animation: bus-shake .36s ease; }
.school-bus.leaving-right { animation: leave-right .48s cubic-bezier(.3,.1,.65,1) forwards; z-index: 10; }
.school-bus.leaving-left { animation: leave-left .48s cubic-bezier(.3,.1,.65,1) forwards; z-index: 10; }
.school-bus.route-coral, .student-group.route-coral, .bay-bus.route-coral { --route: var(--coral); }
.school-bus.route-teal, .student-group.route-teal, .bay-bus.route-teal { --route: var(--teal); }
.school-bus.route-blue, .student-group.route-blue, .bay-bus.route-blue { --route: var(--blue); }
.school-bus.route-violet, .student-group.route-violet, .bay-bus.route-violet { --route: var(--violet); }
.school-bus.route-orange, .student-group.route-orange, .bay-bus.route-orange { --route: var(--orange); }
.school-bus.route-mint, .student-group.route-mint, .bay-bus.route-mint { --route: var(--mint); }

/* True parking-lot puzzle board */
.lane-board {
  position: relative;
  display: block;
  flex: 1;
  min-height: 300px;
  padding: 0;
  overflow: visible;
  border: 5px solid rgba(255,255,255,.78);
  border-radius: 17px;
  background:
    linear-gradient(rgba(255,255,255,.105) 1px, transparent 1px) 0 0 / calc(100% / var(--cols)) calc(100% / var(--rows)),
    linear-gradient(90deg, rgba(255,255,255,.105) 1px, transparent 1px) 0 0 / calc(100% / var(--cols)) calc(100% / var(--rows)),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,235,171,.22) 31px 33px, transparent 33px 64px),
    linear-gradient(155deg, #63727e, #3b4a56);
  box-shadow: inset 0 4px 12px rgba(17,29,37,.42), inset 0 -2px rgba(255,255,255,.08), 0 6px 12px rgba(26,40,48,.1);
  perspective: 900px;
  isolation: isolate;
}
.lane-board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 11px;
  background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.08), transparent 52%);
  pointer-events: none;
}

.lot-bus {
  --cell-w: calc(100% / var(--cols));
  --cell-h: calc(100% / var(--rows));
  position: absolute;
  z-index: 2;
  left: calc(var(--x) * var(--cell-w) + 3px);
  top: calc(var(--y) * var(--cell-h) + 3px);
  width: calc((var(--horizontal) * var(--length) + (1 - var(--horizontal))) * var(--cell-w) - 6px);
  height: calc((var(--horizontal) + (1 - var(--horizontal)) * var(--length)) * var(--cell-h) - 6px);
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--route) 76%, #26333d);
  border-radius: 10px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--route) 76%, white), var(--route) 57%, color-mix(in srgb, var(--route) 72%, #26333d));
  box-shadow: inset 0 3px rgba(255,255,255,.48), inset 0 -4px rgba(28,40,48,.15), 0 5px 7px rgba(15,25,32,.35);
  cursor: pointer;
  transform: translateZ(7px);
  transition: filter .2s ease, transform .2s ease;
}
.lot-bus::before {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 5px;
  background: #294858;
  box-shadow: inset 0 2px rgba(197,231,235,.55);
}
.lot-bus::after { content: ""; position: absolute; z-index: 3; background: none; }
.lot-bus.dir-E::after,
.lot-bus.dir-W::after { left: 12%; right: 12%; bottom: -5px; height: 9px; background: radial-gradient(circle at 7px 50%,#182832 0 4px,#75838c 4px 6px,transparent 6.5px),radial-gradient(circle at calc(100% - 7px) 50%,#182832 0 4px,#75838c 4px 6px,transparent 6.5px); }
.lot-bus.dir-N::after,
.lot-bus.dir-S::after { top: 12%; bottom: 12%; right: -5px; width: 9px; background: radial-gradient(circle at 50% 7px,#182832 0 4px,#75838c 4px 6px,transparent 6.5px),radial-gradient(circle at 50% calc(100% - 7px),#182832 0 4px,#75838c 4px 6px,transparent 6.5px); }
.lot-bus.dir-E::before,
.lot-bus.dir-W::before { left: 17%; right: 17%; top: 18%; bottom: 31%; background: repeating-linear-gradient(90deg,#294858 0 12px,#c8d9d7 12px 15px); }
.lot-bus.dir-N::before,
.lot-bus.dir-S::before { top: 17%; bottom: 17%; left: 18%; right: 31%; background: repeating-linear-gradient(180deg,#294858 0 12px,#c8d9d7 12px 15px); }
.lot-bus .route-strip { position: absolute; z-index: 2; border-radius: 5px; background: #ffd866; box-shadow: 0 1px 3px rgba(28,35,40,.24); }
.lot-bus.dir-E .route-strip,
.lot-bus.dir-W .route-strip { left: 9%; right: 9%; top: 4px; height: 4px; }
.lot-bus.dir-N .route-strip,
.lot-bus.dir-S .route-strip { top: 9%; bottom: 9%; left: 4px; width: 4px; }
.lot-bus .roof-arrow {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 7px;
  background: rgba(25,42,53,.58);
  color: white;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  transform: translate(-50%,-50%);
  box-shadow: 0 2px 5px rgba(20,30,36,.25);
}
.lot-bus .capacity { position: absolute; z-index: 3; display: flex; gap: 2px; }
.lot-bus.dir-E .capacity,
.lot-bus.dir-W .capacity { left: 7px; bottom: 4px; }
.lot-bus.dir-N .capacity,
.lot-bus.dir-S .capacity { right: 4px; top: 7px; flex-direction: column; }
.lot-bus .capacity i { width: 4px; height: 4px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: #263a47; }
.lot-bus .bus-nose { position: absolute; z-index: 2; border-radius: 5px; background: #ffd55d; box-shadow: inset 0 -3px rgba(153,92,9,.2); }
.lot-bus.dir-E .bus-nose { right: -3px; top: 22%; bottom: 15%; width: 15%; }
.lot-bus.dir-W .bus-nose { left: -3px; top: 22%; bottom: 15%; width: 15%; }
.lot-bus.dir-S .bus-nose { bottom: -3px; left: 22%; right: 15%; height: 15%; }
.lot-bus.dir-N .bus-nose { top: -3px; left: 22%; right: 15%; height: 15%; }
.lot-bus .bus-nose::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff4aa; box-shadow: 0 0 5px #fff4aa; }
.lot-bus.dir-E .bus-nose::after { right: 1px; top: 4px; }
.lot-bus.dir-W .bus-nose::after { left: 1px; top: 4px; }
.lot-bus.dir-S .bus-nose::after { left: 4px; bottom: 1px; }
.lot-bus.dir-N .bus-nose::after { left: 4px; top: 1px; }
.lot-bus:hover { filter: brightness(1.08); transform: translateZ(7px) scale(1.025); }
.lot-bus.hinted { animation: lot-hint .72s ease-in-out 3; }
.lot-bus.blocked { animation: bus-shake .36s ease; filter: saturate(.7) brightness(.86); }
.lot-bus.leaving-E { animation: lot-leave-e .52s ease-in forwards; z-index: 20; }
.lot-bus.leaving-W { animation: lot-leave-w .52s ease-in forwards; z-index: 20; }
.lot-bus.leaving-N { animation: lot-leave-n .52s ease-in forwards; z-index: 20; }
.lot-bus.leaving-S { animation: lot-leave-s .52s ease-in forwards; z-index: 20; }
.path-flash { position: absolute; z-index: 1; border-radius: 10px; background: rgba(255,102,91,.23); box-shadow: inset 0 0 0 2px rgba(255,139,124,.38); pointer-events: none; animation: path-alert .48s ease both; }

/* Arcade HUD and coin feedback */
.coin-counter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 70px;
  height: 35px;
  padding: 0 10px 0 7px;
  border: 2px solid #fff1a8;
  border-radius: 999px;
  background: linear-gradient(180deg, #334c60, #173348);
  color: white;
  box-shadow: inset 0 2px rgba(255,255,255,.2), inset 0 -3px rgba(7,22,33,.35), 0 6px 12px rgba(28,45,56,.2);
  font-variant-numeric: tabular-nums;
}
.coin-counter i,
.result-coin-reward > i {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 2px solid #bd7210;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff8a5 0 10%, #ffd54f 12% 48%, #efa21b 50% 72%, #c8780e 74%);
  box-shadow: inset 0 0 0 2px rgba(255,242,121,.48), 0 2px 4px rgba(45,38,17,.28);
}
.coin-counter i::after,
.result-coin-reward > i::after { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff09a; font-size: 9px; text-shadow: 0 1px #ad6710; }
.coin-counter strong { min-width: 22px; font-size: 13px; line-height: 1; text-align: center; text-shadow: 0 2px rgba(0,0,0,.28); }
.menu-coin-counter { height: 39px; align-self: center; }
.game-header { display: grid; grid-template-columns: 39px minmax(0,1fr) auto 39px; gap: 7px; }
.play-coin-counter { height: 34px; min-width: 65px; padding-inline: 6px 9px; }
.coin-counter.coin-gain { animation: coin-counter-gain .58s ease; }
.coin-counter.coin-loss { animation: coin-counter-loss .55s ease; }

/* Turn the play screen into a game scene instead of stacked web cards. */
.play-screen { gap: 6px; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); background: #9fd68d; }
.play-bg { filter: saturate(1.05) contrast(1.03); transform: scale(1.025); }
.play-bg::after { background: linear-gradient(180deg, rgba(231,249,219,.3), rgba(244,238,196,.2) 35%, rgba(132,177,108,.2)); backdrop-filter: none; }
.game-header { padding: 3px 4px; border-radius: 17px; background: rgba(255,249,218,.8); box-shadow: 0 5px 0 rgba(102,119,68,.2), 0 8px 18px rgba(35,59,55,.15); }
.hud-button { border: 2px solid #fff9d9; background: linear-gradient(180deg,#ffcf52,#eca31c); color: #274153; box-shadow: inset 0 2px rgba(255,255,255,.5), inset 0 -4px rgba(155,93,9,.15), 0 4px 0 #b97513; }
.level-copy strong { overflow: hidden; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.departure-road { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 5px; height: 28px; margin: -1px 9px 0; padding: 0 10px; overflow: hidden; border: 3px solid #dce8e5; border-block-color: #f6f0c8 #83989c; border-radius: 9px; background: repeating-linear-gradient(90deg,transparent 0 18px,#f8e29c 18px 33px,transparent 33px 51px) center / auto 3px no-repeat,linear-gradient(180deg,#566873,#344651); color: #d8e8e9; box-shadow: inset 0 3px 6px rgba(11,27,35,.35),0 4px 0 rgba(31,58,63,.25); }
.departure-road span { padding-left: 6px; background: #40535f; font-size: 7px; font-weight: 950; letter-spacing: .13em; }
.departure-road b { color: #ffe470; font-size: 15px; }
.travel-trail { position: fixed; z-index: 9996; inset: 0; width: 100vw; height: 100vh; overflow: visible; pointer-events: none; }
.travel-trail polyline { fill: none; stroke: #ffe26b; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .001 .026; filter: drop-shadow(0 0 3px #fff3a0) drop-shadow(0 0 7px rgba(255,194,45,.82)); animation: particle-path .75s linear infinite; }
.travel-trail.trail-fade { animation: trail-away .34s ease forwards; }
.route-particle { position: fixed; z-index: 9997; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle,#fff 0 15%,color-mix(in srgb,var(--route) 48%,#fff486) 25% 52%,var(--route) 58%,transparent 72%); box-shadow: 0 0 5px color-mix(in srgb,var(--route) 72%,#fff),0 0 11px color-mix(in srgb,var(--route) 78%,transparent); pointer-events: none; animation: route-particle-fade .78s ease-out forwards; }
.moving-route-bus { position: fixed; z-index: 9998; width: 78px; height: 30px; border: 2px solid color-mix(in srgb,var(--route) 70%,#263844); border-radius: 8px 10px 6px 6px; background: linear-gradient(180deg,color-mix(in srgb,var(--route) 62%,white) 0 25%,var(--route) 26% 100%); box-shadow: inset 0 2px rgba(255,255,255,.52),inset 0 -3px rgba(17,39,50,.14),0 6px 9px rgba(15,33,42,.32); pointer-events: none; transform-origin: center; }
.moving-route-bus > i { position: absolute; left: 8px; right: 13px; top: 7px; height: 10px; border-radius: 3px; background: repeating-linear-gradient(90deg,#2e5064 0 10px,#e1efeb 10px 13px); }
.moving-route-bus > span { position: absolute; z-index: 2; left: 10px; right: 14px; top: 8px; display: flex; gap: 4px; overflow: hidden; }
.moving-route-bus > span b { width: 7px; height: 7px; flex: 0 0 7px; border: 1px solid white; border-radius: 50%; background: #d99b6d; box-shadow: 0 4px 0 -1px var(--route); }
.moving-route-bus::before { content: ""; position: absolute; right: -4px; top: 11px; width: 13px; height: 15px; border-radius: 4px 8px 5px 3px; background: color-mix(in srgb,var(--route) 76%,#ffd45c); }
.moving-route-bus::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -5px; height: 10px; background: radial-gradient(circle at 7px 50%,#1f2d35 0 4px,#7e8c92 4px 6px,transparent 6.5px),radial-gradient(circle at calc(100% - 7px) 50%,#1f2d35 0 4px,#7e8c92 4px 6px,transparent 6.5px); }
.student-card,
.pickup-card { border-width: 3px; backdrop-filter: none; }
.student-card { padding: 8px 9px 9px; border-color: #66b6cf; background: linear-gradient(180deg,#e7fbff,#c9edf5); box-shadow: inset 0 3px rgba(255,255,255,.8), inset 0 -5px rgba(37,122,154,.1), 0 5px 0 #3186a7, 0 10px 18px rgba(38,82,92,.2); }
.student-card::before { content: ""; position: absolute; left: 14px; right: 14px; top: -4px; height: 7px; border-radius: 7px 7px 2px 2px; background: repeating-linear-gradient(90deg,#f06a63 0 18px,#fff7de 18px 36px,#4f87e8 36px 54px,#fff7de 54px 72px); box-shadow: 0 2px 3px rgba(32,70,82,.18); }
.student-group { border-width: 2px; background: color-mix(in srgb, var(--route) 18%, white); box-shadow: inset 0 3px rgba(255,255,255,.55), inset 0 -4px rgba(24,45,58,.08), 0 3px 5px rgba(39,76,88,.12); }
.pickup-card { padding: 7px 9px 9px; border-color: #e7ad2c; background: linear-gradient(180deg,#fff5bd,#f7d970); box-shadow: inset 0 3px rgba(255,255,255,.72), inset 0 -5px rgba(170,105,10,.1), 0 5px 0 #bb7913, 0 10px 18px rgba(87,62,20,.18); }
.pickup-bay { border: 2px dashed rgba(114,89,36,.36); background: linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,247,212,.42)); box-shadow: inset 0 3px 6px rgba(89,65,23,.08); }
.yard-card { min-height: 390px; padding: 0; overflow: visible; border: 0; border-radius: 18px; background: transparent; box-shadow: none; backdrop-filter: none; }
.yard-heading { position: relative; z-index: 5; min-height: 45px; margin: 0 9px -4px; padding: 6px 10px 8px; border: 2px solid #ffd45a; border-radius: 14px 14px 8px 8px; background: linear-gradient(180deg,#345469,#17364a); color: white; box-shadow: inset 0 2px rgba(255,255,255,.16), 0 5px 0 rgba(15,39,53,.28); }
.yard-heading small { color: #b9d9e7; }
.yard-heading strong { color: white; text-shadow: 0 2px rgba(0,0,0,.25); }
.mistake-pill { border: 1px solid rgba(255,235,164,.45); background: rgba(255,255,255,.12); color: #d5e7ef; }
.mistake-pill b { color: #ffd75c; }
.lane-board { flex: 1; min-height: 320px; border: 7px solid #d6e6e8; border-bottom-color: #8aa2aa; background: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/calc(100% / var(--cols)) calc(100% / var(--rows)), linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/calc(100% / var(--cols)) calc(100% / var(--rows)), radial-gradient(circle at 50% 20%,#687985,#344652); box-shadow: inset 0 6px 14px rgba(10,25,34,.5), inset 0 -4px rgba(255,255,255,.08), 0 7px 0 #5c747c, 0 13px 22px rgba(24,48,55,.25); }
.board-message { position: relative; z-index: 6; min-height: 22px; margin: -2px 16px 0; padding: 5px 8px; border-radius: 0 0 10px 10px; background: #17364a; color: #d9eef6; box-shadow: 0 4px 0 rgba(12,34,46,.25); }
.board-message.danger { background: #963f43; color: #fff3e7; }
.game-tools { grid-template-columns: 72px 1fr 72px; margin-top: 3px; }
.game-tools button { border: 2px solid #fff0a5; background: linear-gradient(180deg,#ffd45c,#eca41d); box-shadow: inset 0 2px rgba(255,255,255,.46), inset 0 -4px rgba(137,77,4,.13), 0 4px 0 #aa6910; }
.game-tools button:active { transform: translateY(3px); box-shadow: inset 0 2px rgba(255,255,255,.4), 0 1px 0 #aa6910; }
.game-tools button i { color: #4e3b18; }
.route-key { border: 2px solid rgba(218,239,229,.72); background: rgba(24,57,70,.9); color: #edf9f5; box-shadow: 0 4px 0 rgba(13,36,47,.25); }

.result-coin-reward { display: grid; grid-template-columns: 24px auto; grid-template-rows: auto auto; align-items: center; column-gap: 7px; min-width: 122px; margin: 2px auto 4px; padding: 7px 12px; border: 2px solid #ffe78c; border-radius: 15px; background: linear-gradient(180deg,#fff4b0,#f6ca4e); color: #6d490e; box-shadow: inset 0 2px rgba(255,255,255,.65), 0 5px 0 #cc8c1a; text-align: left; }
.result-coin-reward > i { grid-row: 1 / 3; width: 24px; height: 24px; }
.result-coin-reward strong { font-size: 18px; line-height: 1; }
.result-coin-reward small { font-size: 7px; font-weight: 950; letter-spacing: .12em; }
.result-coin-reward.penalty { border-color: #ffc7b9; background: linear-gradient(#ffe3d8,#f6b0a1); color: #8c3436; box-shadow: inset 0 2px rgba(255,255,255,.6), 0 5px 0 #bc625e; }

.board-message { min-height: 17px; padding-top: 6px; color: #71808a; font-size: 9px; font-weight: 800; text-align: center; }
.board-message.danger { color: #ca544f; }
.game-tools { display: grid; grid-template-columns: 68px 1fr 68px; gap: 8px; min-height: 45px; }
.game-tools button { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 14px; background: rgba(255,253,246,.92); color: var(--ink); box-shadow: 0 7px 17px rgba(38,52,61,.12); }
.game-tools button i { color: #d58d16; font-size: 17px; font-style: normal; }
.game-tools button span { font-size: 8px; font-weight: 950; letter-spacing: .09em; }
.route-key { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 9px; border-radius: 14px; background: rgba(255,253,246,.8); color: #73808a; font-size: 8px; font-weight: 800; text-align: center; }
.route-key i { width: 12px; height: 12px; flex: 0 0 auto; border: 3px solid white; border-radius: 50%; background: linear-gradient(135deg,var(--coral) 0 33%,var(--teal) 33% 66%,var(--blue) 66%); box-shadow: 0 1px 4px rgba(0,0,0,.2); }

.toast { position: absolute; z-index: 20; left: 50%; top: 46%; padding: 9px 15px; border-radius: 12px; background: rgba(21,48,64,.92); color: white; font-size: 11px; font-weight: 950; letter-spacing: .12em; opacity: 0; transform: translate(-50%,-50%) scale(.8); pointer-events: none; }
.toast.show { animation: toast-in .95s ease both; }
.level-banner { position: absolute; z-index: 25; left: 50%; top: 50%; display: none; width: 76%; padding: 19px; border: 1px solid rgba(255,255,255,.8); border-radius: 22px; background: rgba(255,253,246,.95); box-shadow: 0 18px 45px rgba(24,39,49,.28); text-align: center; transform: translate(-50%,-50%); }
.level-banner.show { display: block; animation: banner .95s ease both; }
.level-banner span { display: block; color: #a06b19; font-size: 10px; font-weight: 950; letter-spacing: .18em; }
.level-banner strong { display: block; margin-top: 4px; font-size: 23px; }

/* Results */
.result-screen {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: max(32px, env(safe-area-inset-top)) 28px max(34px, env(safe-area-inset-bottom));
  text-align: center;
}
.result-screen > *:not(.campus-bg) { position: relative; z-index: 2; }
.result-kicker { margin-bottom: 8px; }
.result-screen h2 { margin: 0; font-size: clamp(42px, 12vw, 58px); line-height: .86; letter-spacing: -.06em; text-shadow: 0 2px #fff; }
.result-bus { position: relative; width: 200px; height: 88px; margin: 42px auto 25px; animation: result-drive .75s cubic-bezier(.2,.8,.2,1) both; }
.result-stars { min-height: 36px; color: #f3ad1e; font-size: 31px; letter-spacing: 5px; text-shadow: 0 3px #fff, 0 6px 12px rgba(167,105,16,.23); }
.result-copy { max-width: 310px; margin: 7px auto 5px; color: #536b79; font-size: 12px; line-height: 1.5; }
.result-screen .primary-button { max-width: 330px; }
.text-button { margin-top: 11px; padding: 4px 8px; border: 0; background: transparent; color: #617583; font-size: 11px; font-weight: 800; }
.result-screen .signature { margin-top: 16px; }
.fail-screen .result-kicker { color: #b4544e; }
.fail-screen h2 span { color: #cf554e; }
.jam-stack { position: relative; width: 240px; height: 115px; margin: 24px 0 15px; }
.jam-stack i { position: absolute; left: 50%; width: 125px; height: 44px; border: 3px solid #bd770b; border-radius: 13px; background: linear-gradient(#ffd25f,#eca71c); box-shadow: inset 0 3px rgba(255,255,255,.35), 0 10px 18px rgba(30,40,47,.18); }
.jam-stack i::before { content: ""; position: absolute; inset: 9px 17px auto; height: 12px; border-radius: 4px; background: repeating-linear-gradient(90deg,#355367 0 14px,#d7e6e3 14px 18px); }
.jam-stack i:nth-child(1) { top: 2px; transform: translateX(-50%) rotate(-7deg); }
.jam-stack i:nth-child(2) { top: 35px; transform: translateX(-63%) rotate(8deg); }
.jam-stack i:nth-child(3) { top: 68px; transform: translateX(-38%) rotate(-4deg); }

.flying-kid { position: fixed; z-index: 9999; pointer-events: none; animation: none !important; filter: drop-shadow(0 3px 2px rgba(26,52,61,.28)); }

@keyframes bus-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes bay-arrive { from { opacity: 0; transform: translateX(-70px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes bay-depart { to { opacity: 0; transform: translateX(100px) scale(.86); } }
@keyframes bay-handoff { 0%,35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateX(18px) scale(.72); filter: brightness(1.35); } }
@keyframes gate-open { to { opacity: 0; transform: translateY(-45px) rotate(15deg); } }
@keyframes bus-hint { 0%,100% { transform: translateZ(8px); } 50% { transform: translateZ(8px) translateY(-5px) scale(1.04); filter: brightness(1.15); box-shadow: 0 0 0 4px rgba(255,215,90,.42), 0 10px 12px rgba(19,30,38,.27); } }
@keyframes bus-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px) rotate(-2deg); } 50% { transform: translateX(5px) rotate(2deg); } 75% { transform: translateX(-3px); } }
@keyframes leave-right { 40% { transform: translateX(20px) translateY(-2px); } 100% { opacity: 0; transform: translateX(450px) translateY(-7px) scale(.92); } }
@keyframes leave-left { 40% { transform: translateX(-20px) translateY(-2px); } 100% { opacity: 0; transform: translateX(-450px) translateY(-7px) scale(.92); } }
@keyframes toast-in { 0% { opacity: 0; transform: translate(-50%,-40%) scale(.8); } 18%,72% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-60%) scale(.95); } }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%,-45%) scale(.85); } 18%,72% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-55%) scale(.97); } }
@keyframes result-drive { from { opacity: 0; transform: translateX(-220px) rotate(-4deg); } 75% { transform: translateX(8px) rotate(1deg); } to { opacity: 1; transform: none; } }
@keyframes lot-hint { 0%,100% { transform: translateZ(7px); } 50% { transform: translateZ(7px) scale(1.08); box-shadow: 0 0 0 4px rgba(255,219,92,.48), 0 10px 14px rgba(15,25,32,.35); } }
@keyframes lot-leave-e { to { opacity: 0; transform: translateX(520px) translateZ(7px) scale(.9); } }
@keyframes lot-leave-w { to { opacity: 0; transform: translateX(-520px) translateZ(7px) scale(.9); } }
@keyframes lot-leave-n { to { opacity: 0; transform: translateY(-620px) translateZ(7px) scale(.9); } }
@keyframes lot-leave-s { to { opacity: 0; transform: translateY(620px) translateZ(7px) scale(.9); } }
@keyframes path-alert { 0% { opacity: 0; } 25%,70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes coin-counter-gain { 0%,100% { transform: scale(1); } 35% { transform: scale(1.14); filter: brightness(1.25); box-shadow: 0 0 0 5px rgba(255,215,74,.34),0 7px 15px rgba(28,45,56,.22); } }
@keyframes coin-counter-loss { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-4px); background: #8f3f43; } 40%,80% { transform: translateX(4px); background: #8f3f43; } }
@keyframes particle-path { from { stroke-dashoffset: .22; opacity: .4; } 35% { opacity: 1; } to { stroke-dashoffset: 0; opacity: .62; } }
@keyframes trail-away { to { opacity: 0; filter: blur(2px); } }
@keyframes route-particle-fade { 0% { opacity: 0; transform: translate(0,0) scale(.2); } 18% { opacity: 1; transform: translate(-3px,1px) scale(var(--particle-scale)); } 100% { opacity: 0; transform: translate(var(--particle-x),var(--particle-y)) scale(.05); filter: blur(1px); } }
@keyframes waiting-kid { 0%,100% { transform: translateY(0) rotate(-1deg); } 45% { transform: translateY(-2px) rotate(1deg); } 60% { transform: translateY(-1px) rotate(0deg); } }

@media (max-height: 760px) {
  .play-screen { gap: 5px; padding-top: max(7px, env(safe-area-inset-top)); }
  .student-card { padding-block: 7px; }
  .student-queue { min-height: 43px; }
  .student-group { height: 42px; transform: scale(.92); transform-origin: left center; margin-right: -4px; }
  .pickup-bay { height: 51px; }
  .departure-road { height: 23px; }
  .yard-card { min-height: 330px; }
  .lane-board { min-height: 260px; }
  .game-tools { min-height: 40px; }
}

@media (min-width: 700px) {
  html[data-desktop-scroll="true"],
  html[data-desktop-scroll="true"] body { overflow-y: auto; overscroll-behavior-y: auto; }
  .game-shell { min-height: 920px; margin-block: 20px; border-radius: 24px; }
  .screen { min-height: 920px; }
  .play-screen { position: relative; min-height: 920px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}