:root {
  color-scheme: dark;
  --bg: #071321;
  --bg-soft: #0b1d31;
  --panel: #102844;
  --panel-2: #153452;
  --line: #2d5d85;
  --text: #f5fbff;
  --muted: #a7c8e6;
  --accent: #5cc8ff;
  --accent-2: #7a6cff;
  --good: #4dd596;
  --bad: #ff6d7e;
  --gold: #ffd34d;
  --gold-dark: #9b6600;
  --platinum: #d8f4ff;
  --platinum-dark: #5d8ca5;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  --radius: 20px;
  --animation-multiplier: 1;
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 50% -20%, #173a62 0, var(--bg) 38rem); color: var(--text); }
body { min-height: 100vh; overflow-x: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #8ad8ff; outline-offset: 3px; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; padding-bottom: 74px; }
.topbar { position: sticky; top: 0; z-index: 50; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: rgba(5,18,33,.92); border-bottom: 1px solid rgba(90,171,232,.28); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .01em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(145deg, #65d4ff, #6f5cff); box-shadow: inset 0 1px rgba(255,255,255,.55), 0 8px 18px rgba(58,137,255,.25); }
.icon-button, .pause-button { width: 40px; height: 40px; border: 1px solid #2b567c; border-radius: 13px; background: #102743; cursor: pointer; }
.wallet { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.wallet > span { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 12px; border: 1px solid #2b567c; border-radius: 999px; background: #102743; }
.wallet-star i { font-style: normal; }
.wallet-star-gold i { color: var(--gold); text-shadow: 0 0 8px rgba(255,211,77,.45); }
.wallet-star-platinum i { color: var(--platinum); text-shadow: 0 0 8px rgba(216,244,255,.45); }

.screen { width: min(1440px, 100%); margin: 0 auto; padding: 18px clamp(12px, 2vw, 28px) 36px; }
.bottom-nav { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; min-height: 70px; padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(5,17,31,.96); border-top: 1px solid rgba(90,171,232,.25); backdrop-filter: blur(18px); }
.bottom-nav button { border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; font-size: 18px; }
.bottom-nav button span { font-size: 11px; }
.bottom-nav button.active { color: #fff; background: linear-gradient(to top, rgba(67,159,222,.15), transparent); }

h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.65rem, 3vw, 2.8rem); line-height: 1.02; margin-bottom: .45rem; }
h2 { margin-bottom: .5rem; }
p { color: var(--muted); line-height: 1.55; }
.eyebrow { display: block; font-size: .69rem; font-weight: 950; letter-spacing: .14em; color: #79d7ff; margin-bottom: 7px; }
.section-title { display: flex; align-items: end; justify-content: space-between; margin: 12px 0 16px; }
.section-title p { margin: 0; }
.breadcrumb { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; color: var(--muted); }

.primary, .secondary, .ghost, .danger, .file-button { min-height: 44px; border-radius: 13px; padding: 0 17px; border: 1px solid transparent; cursor: pointer; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.primary { background: linear-gradient(145deg, #52c9ff, #675cff); color: white; box-shadow: 0 10px 24px rgba(63,132,255,.28); }
.secondary, .file-button { background: #153452; border-color: #3673a3; }
.ghost { background: transparent; border-color: #2d5d85; }
.danger { background: #4a1724; border-color: #9c354e; color: #ffd8df; }
button:disabled { opacity: .45; cursor: not-allowed; }

.install-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #3b2a0b; border: 1px solid #936a16; margin-bottom: 14px; }
.install-banner span { color: #f5dfad; }
.install-banner a { margin-left: auto; color: #fff; font-weight: 800; }

.hero { min-height: 310px; overflow: hidden; position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: center; padding: clamp(24px, 4vw, 54px); border: 1px solid #3476a6; border-radius: 28px; background: linear-gradient(135deg, rgba(23,68,108,.96), rgba(12,32,58,.98)); box-shadow: var(--shadow); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(103,115,255,.28), transparent 34%), linear-gradient(120deg, transparent 40%, rgba(73,198,255,.08)); pointer-events: none; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy p { max-width: 640px; font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-terminal { position: relative; height: 220px; border-radius: 24px; background: #234e42; border: 8px solid #5b9f78; box-shadow: inset 0 0 0 2px #1c453a, 0 20px 30px rgba(0,0,0,.25); transform: perspective(800px) rotateY(-6deg) rotateX(4deg); overflow: hidden; }
.mini-road { position: absolute; left: 10%; right: 10%; top: 48%; height: 12px; background: #d7c95a; box-shadow: 0 -50px 0 rgba(223,236,255,.08), 0 50px 0 rgba(223,236,255,.08); }
.mini-vehicle { position: absolute; border-radius: 18px 26px 26px 18px; box-shadow: inset 0 6px rgba(255,255,255,.24), 0 8px 18px rgba(0,0,0,.35); }
.mini-vehicle.car { width: 95px; height: 46px; background: #31c7d5; left: 16%; top: 25%; }
.mini-vehicle.bus { width: 155px; height: 52px; background: #f04464; right: 8%; bottom: 20%; }
.mini-crowd { position: absolute; left: 14px; right: 14px; bottom: 8px; display: flex; gap: 3px; align-items: end; }
.mini-crowd i { width: 8px; height: 19px; border-radius: 50% 50% 4px 4px; background: hsl(calc(var(--i) * 47deg), 76%, 62%); box-shadow: 0 -6px 0 -1px currentColor; }

.mode-grid, .stats-grid, .world-grid, .level-grid, .garage-grid, .profile-grid { display: grid; gap: 14px; }
.mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mode-card, .world-card, .level-card, .garage-card { text-align: left; position: relative; border: 1px solid #2c5d85; border-radius: 18px; background: linear-gradient(145deg, #112b48, #0c2139); padding: 18px; box-shadow: 0 10px 24px rgba(0,0,0,.15); cursor: pointer; }
.mode-card:hover, .world-card:hover, .level-card:hover, .garage-card:hover { border-color: #69caff; transform: translateY(-2px); }
.mode-card .tag { position: absolute; right: 12px; top: 12px; padding: 4px 8px; border-radius: 999px; font-size: .7rem; background: #1d466a; color: #bce8ff; }
.mode-icon { font-size: 2rem; display: block; margin-bottom: 12px; }
.mode-card p, .world-card p, .garage-card p { margin-bottom: 0; }
.stats-grid { grid-template-columns: repeat(4, 1fr); }
.stat-card { min-height: 105px; display: grid; align-content: center; padding: 18px; background: #102844; border: 1px solid #2d5d85; border-radius: 18px; }
.stat-card b { font-size: 1.6rem; }
.stat-card span { color: var(--muted); }
.stat-card.gold b { color: var(--gold); }
.stat-card.platinum b { color: var(--platinum); }

.world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.world-card { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.world-icon { font-size: 2.2rem; }
.world-copy h3 { margin-bottom: 4px; }
.world-copy p { margin-bottom: 4px; }
.world-stars { display: grid; gap: 5px; text-align: right; }
.world-stars .gold { color: var(--gold); }
.world-stars .platinum { color: var(--platinum); }
.world-card.locked, .level-card.locked { filter: grayscale(1); opacity: .5; }
.level-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.level-card { min-height: 118px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.level-number { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #1b466c; font-weight: 900; }
.level-card small { grid-column: 1 / -1; color: var(--muted); }
.compact-star-stack { display: inline-grid; gap: 1px; }
.compact-stars { white-space: nowrap; line-height: 1; }
.compact-stars i { font-style: normal; color: #35506a; font-size: .82rem; }
.compact-stars.gold i.earned { color: var(--gold); }
.compact-stars.platinum i.earned { color: var(--platinum); }

/* Game */
.game-header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 0 0 13px; }
.game-header h1 { font-size: clamp(1.25rem, 2.2vw, 1.8rem); margin-bottom: 2px; }
.game-header p { margin: 0; font-size: .82rem; }
.game-metrics { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.game-metrics > span { min-height: 38px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px; border-radius: 11px; background: #0c2139; border: 1px solid #2b567c; font-size: .8rem; }
.game-metrics i { width: 9px; height: 9px; border-radius: 50%; background: var(--swatch); }
.game-layout { display: grid; grid-template-columns: minmax(480px, 1.45fr) minmax(380px, .75fr); gap: 14px; align-items: start; }
.board-column { min-width: 0; }
.traffic-board { width: 100%; max-height: calc(100vh - 175px); min-height: 540px; position: relative; overflow: hidden; border: 12px solid #5b9c74; border-radius: 26px; background: radial-gradient(circle at 45% 20%, #397b60 0, #265c48 75%); box-shadow: inset 0 0 0 3px #173e31, inset 0 0 45px rgba(0,0,0,.23), var(--shadow); }
.board-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: calc(100% / var(--board-columns)) calc(100% / var(--board-rows)); }
.exit-marker { position: absolute; z-index: 3; padding: 4px 9px; border-radius: 999px; background: #074a31; border: 1px solid #5fba8f; color: #e8fff3; font-size: .68rem; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.exit-N { top: 4px; left: 50%; transform: translateX(-50%); }
.exit-S { bottom: 4px; left: 50%; transform: translateX(-50%); }
.exit-W { left: 4px; top: 50%; transform: translateY(-50%); }
.exit-E { right: 4px; top: 50%; transform: translateY(-50%); }
.board-vehicle { position: absolute; z-index: 5; border: 0; padding: 0; background: transparent; cursor: pointer; transition: filter .2s, transform .2s; }
.board-vehicle:hover { z-index: 8; filter: brightness(1.14) drop-shadow(0 10px 10px rgba(0,0,0,.28)); }
.board-vehicle.hinted { z-index: 12; animation: hintPulse 1s ease-in-out infinite; }
.board-vehicle.frozen::after, .board-vehicle.locked::after { position: absolute; inset: 12%; display: grid; place-items: center; border-radius: 14px; font-size: clamp(15px, 2.5vw, 28px); background: rgba(5,25,45,.72); border: 2px solid rgba(190,235,255,.8); }
.board-vehicle.frozen::after { content: "❄"; }
.board-vehicle.locked::after { content: "🔒"; }
.vehicle-graphic { position: absolute; left: 50%; top: 50%; transform-origin: center; filter: drop-shadow(0 8px 6px rgba(0,0,0,.38)); }
.vehicle-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vehicle-body-fill { stroke: rgba(255,255,255,.72); stroke-width: 1.5; }
.vehicle-art { filter: drop-shadow(0 2px 0 rgba(255,255,255,.18)); }
.vehicle-wheel { fill: #07111c; }
.vehicle-glass { fill: #9fd4e9; stroke: rgba(231,252,255,.9); stroke-width: 1; }
.vehicle-glass.coach { fill: #4d738e; }
.vehicle-detail { fill: none; stroke: rgba(7,28,45,.58); stroke-width: 2; }
.vehicle-bed { fill: rgba(38,49,61,.65); stroke: rgba(255,255,255,.25); stroke-width: 1.2; }
.vehicle-cargo { fill: var(--vehicle-color); stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.vehicle-window-row { fill: #5b829c; stroke: rgba(224,248,255,.7); stroke-width: 1; }
.vehicle-door { fill: rgba(32,53,70,.58); stroke: rgba(255,255,255,.6); stroke-width: 1; }
.vehicle-destination { fill: #172838; }
.vehicle-upper { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.4); }
.vehicle-luggage { fill: rgba(39,54,69,.5); stroke: rgba(255,255,255,.3); }
.vehicle-arrow circle { fill: #071827; stroke: #cceeff; stroke-width: 1.3; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.vehicle-arrow path { fill: none; stroke: white; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.capacity-badge { position: absolute; z-index: 8; right: 2px; bottom: 1px; min-width: 24px; height: 17px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center; background: #06111e; border: 1px solid #b8d9ef; font-size: .58rem; font-weight: 900; box-shadow: 0 2px 4px rgba(0,0,0,.45); }
.vehicle-name { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; font-size: .52rem; background: rgba(3,13,23,.8); padding: 2px 4px; border-radius: 5px; }
.board-instruction { margin: 10px 0 6px; text-align: center; color: #d5ebff; font-weight: 800; }
.deadlock-banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #4b1a24; border: 1px solid #b7465e; border-radius: 14px; margin-top: 8px; }
.deadlock-banner span { color: #ffd5dc; }
.operations-column { display: grid; gap: 12px; }
.panel { background: linear-gradient(145deg, rgba(17,43,72,.98), rgba(10,30,52,.98)); border: 1px solid #2f628c; border-radius: 19px; padding: 14px; box-shadow: 0 12px 25px rgba(0,0,0,.14); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.panel-heading h2 { font-size: 1.1rem; margin: 0; }
.panel-heading .eyebrow { margin-bottom: 3px; }
.panel-heading > strong { color: #dff5ff; }
.panel-note { margin: 9px 0 0; font-size: .75rem; }
.panel-note.warning { color: #ffd7a2; }
.bay-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.waiting-bay { min-height: 80px; border-radius: 14px; border: 2px dashed #4779a1; background: rgba(4,19,34,.42); }
.waiting-bay.empty { display: grid; place-items: center; align-content: center; color: #c8eaff; }
.waiting-bay.empty small { color: #799bb8; }
.waiting-bay.occupied { display: grid; grid-template-columns: minmax(65px,.8fr) 1fr; align-items: center; gap: 7px; border-style: solid; border-color: color-mix(in srgb, var(--bay-color), white 22%); padding: 6px; cursor: pointer; text-align: left; }
.waiting-bay.priority { box-shadow: 0 0 0 3px #fff, 0 0 18px var(--bay-color); }
.bay-vehicle { min-width: 0; }
.bay-vehicle .vehicle-svg { width: 100%; height: 52px; }
.bay-copy { display: grid; gap: 1px; min-width: 0; }
.bay-copy b { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bay-copy small { color: var(--muted); font-size: .64rem; }
.bay-copy strong { font-size: .75rem; }
.bay-progress { height: 6px; border-radius: 6px; background: #071827; overflow: hidden; }
.bay-progress i { display: block; height: 100%; background: var(--bay-color); border-radius: inherit; }
.tool-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.tool-button { min-height: 69px; border-radius: 12px; border: 1px solid #386d98; background: #173858; display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; padding: 5px 2px; }
.tool-button.active { border-color: #fff; box-shadow: 0 0 0 2px #57cfff; }
.tool-button > span { font-size: 1.1rem; }
.tool-button b { font-size: .65rem; }
.tool-button small { font-size: .53rem; color: #b8d4ea; }

.active-platform { min-height: 128px; position: relative; padding: 13px 10px 22px; border-radius: 16px; overflow: hidden; background: linear-gradient(#497a83 0 7px, #d1dbe0 7px 14px, #7d8990 14px 18px, #273c4d 18px 100%); box-shadow: inset 0 0 25px rgba(0,0,0,.4); }
.active-platform::before { content: ""; position: absolute; inset: 22px 0 0; background-image: linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; }
.curb-line { position: absolute; left: 0; right: 0; bottom: 6px; height: 7px; background: repeating-linear-gradient(90deg, #e5cf4d 0 24px, #273542 24px 48px); }
.active-crowd { position: relative; z-index: 2; min-height: 82px; display: flex; flex-wrap: wrap; gap: 7px 5px; align-content: end; justify-content: flex-start; }
.passenger { position: relative; display: inline-block; width: 25px; height: 47px; flex: 0 0 25px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.4)); animation: passengerIdle calc(1.8s * var(--animation-multiplier)) ease-in-out infinite alternate; }
.passenger:nth-child(3n) { animation-delay: -.6s; }
.passenger-head { position: absolute; left: 6px; top: 0; width: 13px; height: 13px; border-radius: 50%; background: #ffe0bd; border: 1px solid #8d613a; }
.passenger-body { position: absolute; left: 3px; top: 11px; width: 19px; height: 27px; border-radius: 9px 9px 5px 5px; background: linear-gradient(var(--passenger-color), var(--passenger-dark)); border: 1px solid rgba(255,255,255,.55); }
.passenger-body::before, .passenger-body::after { content: ""; position: absolute; top: 5px; width: 5px; height: 20px; border-radius: 5px; background: var(--passenger-color); }
.passenger-body::before { left: -5px; transform: rotate(7deg); }
.passenger-body::after { right: -5px; transform: rotate(-7deg); }
.passenger-symbol { position: absolute; left: 0; right: 0; top: 17px; text-align: center; font-size: 9px; color: white; text-shadow: 0 1px 2px #000; }
.passenger::before, .passenger::after { content: ""; position: absolute; top: 36px; width: 6px; height: 11px; background: #142232; border-radius: 0 0 5px 5px; }
.passenger::before { left: 5px; }.passenger::after { right: 5px; }
.passenger.vip::after { box-shadow: 0 -35px 0 -1px #ffd24a; }
.passenger.tiny { transform: scale(.62); transform-origin: bottom; margin-right: -8px; margin-top: -17px; }
.queue-empty { color: #9bb1c3; align-self: center; }
.reserve-heading { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 6px; }
.reserve-heading span { display: grid; }
.reserve-heading small { color: var(--muted); font-size: .67rem; }
.reserve-queue { min-height: 88px; display: grid; grid-template-columns: 44px 1fr; align-items: stretch; border-radius: 14px; overflow: hidden; background: #091c30; border: 1px solid #2c577a; }
.reserve-gate { writing-mode: vertical-rl; transform: rotate(180deg); display: grid; place-items: center; letter-spacing: .18em; font-size: .58rem; font-weight: 900; color: #f6d36b; background: repeating-linear-gradient(45deg, #273546 0 8px, #d49b21 8px 16px); text-shadow: 0 1px 2px #000; }
.reserve-crowd { display: flex; flex-wrap: wrap; align-content: end; gap: 0; padding: 9px 8px 3px; background: linear-gradient(to top, rgba(56,86,107,.4), transparent); overflow: hidden; }
.reserve-more { align-self: center; margin-left: 8px; padding: 4px 7px; border-radius: 999px; background: #234765; font-size: .68rem; }

.star-panel { padding-bottom: 16px; }
.star-group + .star-group { margin-top: 13px; padding-top: 12px; border-top: 1px solid #285371; }
.star-group-title { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; letter-spacing: .08em; margin-bottom: 7px; }
.star-group.gold .star-group-title { color: var(--gold); }
.star-group.platinum .star-group-title { color: var(--platinum); }
.star-criterion { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; padding: 6px 7px; border-radius: 10px; }
.star-criterion + .star-criterion { margin-top: 4px; }
.star-criterion.kept { background: rgba(255,255,255,.035); }
.star-criterion.lost { background: rgba(94,33,46,.38); opacity: .7; }
.star-criterion span:nth-child(2) { display: grid; }
.star-criterion b { font-size: .73rem; }
.star-criterion small { color: var(--muted); font-size: .63rem; }
.star-criterion em { font-style: normal; font-size: .66rem; color: #d9f2ff; }
.live-star { display: grid; place-items: center; width: 34px; height: 28px; border-radius: 9px; font-size: 1.35rem; font-style: normal; text-shadow: 0 2px 3px rgba(0,0,0,.6); }
.live-star.gold.kept { color: #ffe66d; background: linear-gradient(145deg, #7d5200, #c58b0a); border: 1px solid #ffd857; box-shadow: inset 0 1px rgba(255,255,255,.35), 0 0 12px rgba(255,210,52,.2); }
.live-star.platinum.kept { color: #f0fcff; background: linear-gradient(145deg, #466f85, #83b8cc); border: 1px solid #d8f6ff; box-shadow: inset 0 1px rgba(255,255,255,.55), 0 0 12px rgba(183,236,255,.2); }
.live-star.lost { color: #46596a; background: #10202f; border: 1px solid #344f64; text-decoration: line-through; filter: grayscale(1); }
.level-actions { display: flex; gap: 8px; margin-top: 13px; }
.level-actions button { flex: 1; min-height: 38px; font-size: .72rem; }

/* Modal, boarding and utility */
.modal-root { position: fixed; z-index: 100; inset: 0; }
.modal-backdrop { min-height: 100%; display: grid; place-items: center; padding: 20px; background: rgba(1,7,14,.76); backdrop-filter: blur(8px); }
.modal-card { width: min(520px, 100%); max-height: 90vh; overflow: auto; padding: 26px; border-radius: 24px; background: linear-gradient(145deg, #163a60, #0a1f35); border: 1px solid #4f94c5; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.win-stars { display: grid; gap: 8px; margin: 18px 0; }
.win-stars > div { display: grid; grid-template-columns: 85px 1fr auto; align-items: center; gap: 8px; padding: 9px; border-radius: 13px; background: rgba(255,255,255,.04); }
.win-stars span { display: flex; gap: 6px; }
.result-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.result-grid > div { padding: 9px; border-radius: 11px; background: #0b223b; }
.result-grid dt { color: var(--muted); font-size: .65rem; }
.result-grid dd { margin: 3px 0 0; font-weight: 900; }
.perfect-run { color: #ffe783; font-weight: 900; text-align: center; }
.toast-root { position: fixed; z-index: 120; right: 14px; top: 78px; display: grid; gap: 8px; pointer-events: none; }
.toast { max-width: 360px; padding: 11px 14px; border-radius: 12px; background: #173a5e; border: 1px solid #5599ca; box-shadow: var(--shadow); }
.toast.bad { background: #4a1925; border-color: #c64e67; }
.toast.good { background: #123f30; border-color: #48b384; }
.toast.star-loss { background: #3e2e10; border-color: #d49d2f; color: #ffecb1; }
.boarding-sprite { position: fixed; z-index: 110; width: 28px; height: 48px; pointer-events: none; }
.boarding-sprite > .passenger { transform: none; }

.garage-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.garage-card.selected { border-color: #70d6ff; box-shadow: 0 0 0 2px #70d6ff; }
.garage-preview { height: 120px; display: grid; place-items: center; border-radius: 15px; background: #234a3e; margin-bottom: 12px; }
.garage-preview .vehicle-svg { width: 85%; height: 90px; }
.garage-preview.midnight { filter: saturate(.7) brightness(.72) hue-rotate(18deg); }
.garage-preview.candy { filter: saturate(1.6) brightness(1.12); }
.garage-preview.heritage { filter: sepia(.35) saturate(.8); }
.profile-grid { grid-template-columns: 1fr 1fr; }
.profile-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.profile-stats > div { padding: 12px; background: #0b223a; border-radius: 12px; }
.profile-stats dt { color: var(--muted); font-size: .72rem; }
.profile-stats dd { margin: 4px 0 0; font-size: 1.3rem; font-weight: 900; }
.profile-stats dd.gold { color: var(--gold); }.profile-stats dd.platinum { color: var(--platinum); }
.panel label { display: grid; gap: 6px; color: var(--muted); }
.panel input, .panel select { width: 100%; min-height: 42px; border-radius: 10px; border: 1px solid #3f7299; background: #081d31; color: #fff; padding: 0 11px; }
.button-stack { display: grid; gap: 8px; margin-top: 12px; }
.file-button input { display: none; }
.settings-panel { max-width: 760px; }
.setting-row { grid-template-columns: 1fr auto !important; align-items: center; padding: 12px; border-bottom: 1px solid #285474; }
.setting-row input[type="checkbox"] { width: 22px; min-height: 22px; }
.setting-row select { width: 150px; }
.score-table { display: grid; gap: 4px; }
.score-row { display: grid; grid-template-columns: 42px minmax(120px,1fr) minmax(110px,1fr) 95px 100px; gap: 8px; align-items: center; min-height: 45px; padding: 5px 9px; border-radius: 9px; background: #0b223a; }
.score-row.header { background: transparent; color: var(--muted); font-size: .72rem; }
.offline-note, .empty-state, .loading { padding: 18px; text-align: center; color: var(--muted); }

@keyframes passengerIdle { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-3px) rotate(1deg); } }
@keyframes hintPulse { 0%,100% { filter: drop-shadow(0 0 0 #fff); } 50% { filter: drop-shadow(0 0 14px #fff) brightness(1.35); } }

.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.high-contrast { --bg: #000; --panel: #071b2a; --line: #7fd8ff; --muted: #d6efff; }
.large-ui { font-size: 118%; }

@media (max-width: 1080px) {
  .game-layout { grid-template-columns: 1fr; }
  .operations-column { grid-template-columns: 1fr 1fr; }
  .traffic-board { max-height: none; min-height: 620px; }
  .mode-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .level-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .screen { padding: 10px 8px 30px; }
  .topbar { padding-left: 8px; padding-right: 8px; }
  .brand span:last-child { display: none; }
  .wallet > span { padding: 0 8px; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 24px 18px; }
  .hero-terminal { height: 170px; }
  .mode-grid, .stats-grid, .world-grid, .garage-grid, .profile-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .level-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .game-header { grid-template-columns: auto 1fr; }
  .game-metrics { grid-column: 1 / -1; justify-content: flex-start; }
  .game-metrics > span { flex: 1; justify-content: center; }
  .game-layout { gap: 8px; }
  .operations-column { grid-template-columns: 1fr; }
  .traffic-board { min-height: 560px; border-width: 8px; border-radius: 20px; }
  .tool-grid { grid-template-columns: repeat(5,1fr); }
  .tool-button b { font-size: .58rem; }
  .tool-button small { display: none; }
  .bay-grid { grid-template-columns: repeat(2,1fr); }
  .passenger { width: 22px; height: 43px; flex-basis: 22px; transform-origin: bottom; }
  .passenger-head { left: 5px; width: 12px; height: 12px; }
  .passenger-body { left: 3px; width: 16px; height: 25px; }
  .result-grid { grid-template-columns: repeat(2,1fr); }
  .score-row { grid-template-columns: 30px 1fr 75px 78px; }
  .score-row > :nth-child(3) { display: none; }
}

@media (max-width: 430px) {
  .wallet-star { display: none !important; }
  .level-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .traffic-board { min-height: 500px; }
  .game-header p { font-size: .68rem; }
  .game-metrics > span { font-size: .68rem; padding: 0 6px; }
  .pause-button { width: 36px; }
  .panel { padding: 11px; }
  .star-criterion { grid-template-columns: 33px 1fr; }
  .star-criterion em { grid-column: 2; }
  .active-crowd { gap: 5px 2px; }
  .modal-card { padding: 20px 16px; }
}

.shop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.shop-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:15px; border-radius:17px; background:linear-gradient(145deg,#112b48,#0c2139); border:1px solid #2d5d85; }
.shop-card h3 { margin:0 0 3px; }
.shop-card p { margin:0 0 5px; font-size:.82rem; }
.shop-card small { color:var(--muted); }
.shop-icon { display:grid; place-items:center; width:50px; height:50px; border-radius:15px; background:#1c466b; font-size:1.5rem; }
.reward-panel,.premium-panel { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.reward-panel p,.premium-panel p { margin:0; }
@media(max-width:760px){.shop-grid{grid-template-columns:1fr}.shop-card{grid-template-columns:auto 1fr}.shop-card button{grid-column:1/-1}}

/* ========================================================================== */
/* V2.3 integrated terminal and causal staged movement                              */
/* ========================================================================== */
.game-layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .55fr);
  gap: 16px;
}
.terminal-workspace { min-width: 0; }
.hud-column { display: grid; gap: 12px; align-content: start; position: sticky; top: 78px; }
.terminal-scene {
  position: relative;
  overflow: hidden;
  border: 1px solid #3e7aa4;
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 8%, rgba(94,208,255,.12), transparent 25%),
    linear-gradient(180deg, #173954 0, #123048 38%, #173f4a 38.1%, #142d3d 100%);
  box-shadow: 0 22px 54px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.08);
}
.terminal-scene-heading {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px 11px;
  background: linear-gradient(180deg, rgba(5,20,35,.96), rgba(10,35,52,.92));
  border-bottom: 1px solid rgba(114,191,234,.25);
}
.terminal-scene-heading h2 { margin: 0; font-size: clamp(1rem, 2vw, 1.3rem); }
.terminal-scene-heading .eyebrow { margin-bottom: 2px; }
.terminal-flow-label {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  color: #cbefff;
  background: #0a2940;
  border: 1px solid #32688d;
  font-size: .63rem;
  font-weight: 950;
  letter-spacing: .08em;
}
.terminal-scene .traffic-board {
  width: calc(100% - 24px);
  margin: 12px 12px 0;
  max-height: none;
  min-height: clamp(520px, 67vh, 820px);
  border-width: 10px;
  border-radius: 22px 22px 12px 12px;
  box-shadow: inset 0 0 0 3px #173e31, inset 0 0 45px rgba(0,0,0,.23);
}
.board-exit-ramp {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -8px;
  width: min(210px, 34%);
  height: 32px;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 18px 18px 0 0;
  background: #263642;
  border: 2px solid #627987;
  border-bottom: 0;
}
.board-exit-ramp span { width: 28px; height: 4px; border-radius: 4px; background: #e8d654; }
.loading-concourse {
  position: relative;
  margin-top: -1px;
  padding: 48px 14px 16px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, #233946 0, #1b3443 45%, #173746 100%);
  background-size: 34px 34px, 34px 34px, auto;
  border-top: 5px solid #63747d;
}
.arrival-road {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  overflow: hidden;
  background: linear-gradient(#273642, #1d2a34);
  border-bottom: 2px solid #6d7c84;
}
.arrival-road::before,
.arrival-road::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 5px;
  border-radius: 4px;
  background: #e8d654;
}
.arrival-road::before { left: 12px; }
.arrival-road::after { right: 12px; }
.arrival-road i { width: 11%; height: 4px; border-radius: 4px; background: #f6e36a; opacity: .82; }
.arrival-road-label {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 3px 9px;
  border-radius: 999px;
  color: #eaf8ff;
  background: rgba(8,23,34,.82);
  border: 1px solid #506978;
  font-size: .55rem;
  font-weight: 950;
  letter-spacing: .13em;
}
.bay-apron {
  position: relative;
  z-index: 2;
  padding: 13px 12px 12px;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, rgba(8,31,44,.55), rgba(12,37,48,.18));
  border: 1px solid rgba(100,162,193,.32);
  border-bottom: 0;
}
.concourse-title { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.concourse-title h2 { margin: 0; font-size: 1rem; }
.concourse-title .eyebrow { margin-bottom: 1px; }
.concourse-title > strong { font-size: .75rem; color: #d8f2ff; }
.concourse-title.compact { align-items: center; }
.concourse-note { margin: 8px 0 0; color: #9fc5db; font-size: .68rem; line-height: 1.35; }
.bay-apron .bay-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 8px;
}
.bay-apron .waiting-bay {
  position: relative;
  min-height: 100px;
  overflow: hidden;
  border-radius: 12px 12px 6px 6px;
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(255,255,255,.08) 5% 7%, transparent 7% 93%, rgba(255,255,255,.08) 93% 95%, transparent 95%),
    linear-gradient(180deg, #263d49, #172b36);
  border: 1px solid #4a6c80;
  border-top: 3px solid #d6d9dc;
}
.bay-apron .waiting-bay::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 6px;
  height: 3px;
  border-radius: 4px;
  background: #f0db59;
  opacity: .55;
}
.bay-apron .waiting-bay.empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  color: #e3f7ff;
  border-style: dashed;
}
.bay-apron .waiting-bay.empty small { color: #8eb0c3; font-size: .58rem; }
.bay-apron .waiting-bay.occupied {
  grid-template-columns: 1fr;
  grid-template-rows: 56px auto;
  gap: 2px;
  padding: 5px 6px 9px;
  text-align: center;
}
.bay-apron .bay-vehicle { display: grid; place-items: center; min-width: 0; }
.bay-apron .bay-vehicle .vehicle-svg { width: 100%; height: 54px; }
.bay-apron .bay-copy { gap: 0; justify-items: center; }
.bay-apron .bay-copy b { max-width: 100%; font-size: .62rem; }
.bay-apron .bay-copy small { font-size: .55rem; }
.bay-apron .bay-copy strong { font-size: .66rem; }
.bay-apron .bay-progress { width: 100%; height: 5px; }
.bay-number {
  position: absolute;
  z-index: 3;
  top: 4px;
  left: 5px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  color: #fff;
  background: rgba(3,17,27,.82);
  border: 1px solid #6d8fa2;
  font-size: .56rem;
  font-weight: 900;
}
.passenger-concourse {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(360px, 1.5fr);
  gap: 0;
  min-height: 190px;
  border: 1px solid rgba(100,162,193,.32);
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, #17394a, #102b3b);
  overflow: hidden;
}
.reserve-zone,
.active-zone { min-width: 0; padding: 12px; }
.reserve-zone {
  position: relative;
  border-right: 4px solid #65747c;
  background: linear-gradient(135deg, rgba(24,40,52,.95), rgba(14,29,40,.95));
}
.reserve-zone::after {
  content: "";
  position: absolute;
  z-index: 4;
  right: -8px;
  top: 58px;
  width: 12px;
  height: 74px;
  border-radius: 6px;
  background: repeating-linear-gradient(0deg, #e2ad39 0 8px, #293946 8px 16px);
  border: 1px solid #192832;
}
.active-zone { background: linear-gradient(180deg, rgba(32,73,83,.55), rgba(14,43,56,.88)); }
.reserve-queue {
  min-height: 113px;
  grid-template-columns: 48px 1fr;
  border-radius: 12px;
  background: #0c2130;
}
.reserve-gate {
  writing-mode: initial;
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 4px;
  padding: 5px 0;
  letter-spacing: .08em;
  background: #172b37;
}
.reserve-gate i { width: 28px; height: 5px; border-radius: 4px; background: #e2ad39; box-shadow: 0 15px #e2ad39, 0 -15px #e2ad39; }
.reserve-gate b { font-size: .53rem; color: #ffe9a5; }
.reserve-crowd { min-height: 111px; align-content: end; padding-top: 18px; }
.active-platform {
  min-height: 126px;
  padding: 28px 54px 20px 12px;
  border-radius: 12px;
  background:
    linear-gradient(#78a6ad 0 6px, #d5e1e5 6px 12px, #6a767d 12px 17px, transparent 17px),
    linear-gradient(180deg, #2f5261, #243d4c);
  border: 1px solid #5b8398;
}
.platform-canopy {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 9px;
  right: 50px;
  height: 9px;
  border-radius: 7px;
  background: repeating-linear-gradient(90deg, #5cc8ff 0 32px, #f1f8fc 32px 64px);
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.active-crowd { min-height: 82px; padding-top: 10px; }
.boarding-crosswalk {
  position: absolute;
  z-index: 1;
  right: 4px;
  top: 23px;
  bottom: 7px;
  width: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 4px 6px;
  background: #253640;
  border-left: 2px solid #d7ca55;
}
.boarding-crosswalk i { height: 7px; background: #edf2f3; border-radius: 2px; }
.active-platform .curb-line { bottom: 5px; }
.arrival-masked { opacity: 0 !important; }
.interaction-locked .board-vehicle,
.interaction-locked .tool-button,
.interaction-locked .waiting-bay { pointer-events: none; }
.interaction-locked .traffic-board { box-shadow: inset 0 0 0 3px #173e31, inset 0 0 45px rgba(0,0,0,.23), 0 0 0 3px rgba(92,200,255,.12); }

.vehicle-drive-sprite {
  position: fixed;
  z-index: 47;
  pointer-events: none;
  transform-origin: center;
  filter: drop-shadow(0 13px 10px rgba(0,0,0,.48));
  will-change: transform, opacity;
}
.vehicle-drive-sprite .vehicle-svg { width: 100%; height: 100%; }
.vehicle-drive-sprite.parked { z-index: 47; }
.vehicle-drive-sprite.parked::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -5px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,.38);
  filter: blur(3px);
}
.existing-bay-sprite { display: grid; place-items: center; padding: 8px; }
.existing-bay-sprite .vehicle-svg { width: 92%; height: 72%; }
.boarding-sprite,
.promotion-sprite {
  position: fixed;
  z-index: 48;
  width: 28px;
  height: 48px;
  pointer-events: none;
  will-change: transform, opacity;
}
.boarding-sprite > .passenger,
.promotion-sprite > .passenger { transform: none; animation: none; }
.waiting-to-board { animation: waitingCircle 1.05s ease-in-out infinite alternate; }
.passenger-walking > .passenger { animation: walkingBob .22s linear infinite alternate; }
.passenger-walking > .passenger::before { animation: legLeft .24s linear infinite alternate; transform-origin: top center; }
.passenger-walking > .passenger::after { animation: legRight .24s linear infinite alternate; transform-origin: top center; }
.boarding-count-pop {
  position: fixed;
  z-index: 49;
  pointer-events: none;
  min-width: 84px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(5,24,37,.94);
  border: 1px solid #77d7ff;
  box-shadow: 0 7px 18px rgba(0,0,0,.34);
  text-align: center;
  font-size: .68rem;
  font-weight: 900;
}
body.game-animating .bottom-nav { opacity: .72; }

@keyframes waitingCircle {
  from { margin-left: -4px; margin-top: 1px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.4)); }
  to { margin-left: 4px; margin-top: -2px; filter: drop-shadow(0 6px 4px rgba(0,0,0,.5)) brightness(1.08); }
}
@keyframes walkingBob { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-4px) rotate(1deg); } }
@keyframes legLeft { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }
@keyframes legRight { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }

@media (max-width: 1180px) {
  .game-layout { grid-template-columns: 1fr; }
  .hud-column { position: static; grid-template-columns: 1fr 1fr; }
  .terminal-scene .traffic-board { min-height: 620px; }
}

@media (max-width: 820px) {
  .terminal-scene-heading { padding: 10px 12px; }
  .terminal-flow-label { display: none; }
  .terminal-scene .traffic-board { width: calc(100% - 12px); margin: 6px 6px 0; min-height: 560px; border-width: 7px; }
  .loading-concourse { padding-left: 7px; padding-right: 7px; }
  .bay-apron { padding-left: 7px; padding-right: 7px; overflow: hidden; }
  .bay-apron .bay-grid {
    grid-template-columns: repeat(5, minmax(126px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
  }
  .bay-apron .waiting-bay { scroll-snap-align: start; }
  .passenger-concourse { grid-template-columns: 1fr; }
  .reserve-zone { border-right: 0; border-bottom: 4px solid #65747c; }
  .reserve-zone::after { right: 20px; top: auto; bottom: -9px; width: 74px; height: 13px; }
  .hud-column { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .terminal-scene { border-radius: 18px; }
  .terminal-scene-heading h2 { font-size: .9rem; }
  .terminal-scene .traffic-board { min-height: 500px; border-radius: 16px 16px 9px 9px; }
  .loading-concourse { padding-top: 43px; }
  .arrival-road { height: 38px; }
  .bay-apron .bay-grid { grid-template-columns: repeat(5, 118px); }
  .passenger-concourse { min-height: 0; }
  .reserve-zone, .active-zone { padding: 9px; }
  .active-platform { padding-right: 42px; }
  .concourse-note { font-size: .62rem; }
}

/* ========================================================================== */
/* V2.3 continuous terminal choreography                                      */
/* ========================================================================== */
.terminal-scene {
  isolation: isolate;
  background:
    linear-gradient(90deg, #24343e 0 48px, transparent 48px calc(100% - 48px), #24343e calc(100% - 48px)),
    radial-gradient(circle at 50% 16%, rgba(93,210,255,.1), transparent 35%),
    linear-gradient(180deg, #102b42 0 76px, #1d3440 76px 100%);
}
.terminal-scene-heading {
  position: relative;
  z-index: 8;
  min-height: 62px;
  padding: 10px 17px;
  background: linear-gradient(180deg, rgba(4,18,31,.98), rgba(8,31,47,.95));
}
.terminal-scene .traffic-board {
  z-index: 3;
  width: calc(100% - 116px);
  margin: 12px 58px 0;
  min-height: clamp(520px, 65vh, 800px);
  border-radius: 20px 20px 8px 8px;
  border-width: 8px;
  box-shadow:
    inset 0 0 0 3px #173e31,
    inset 0 0 46px rgba(0,0,0,.24),
    0 0 0 8px #263741,
    0 10px 20px rgba(0,0,0,.3);
}
.terminal-scene .traffic-board::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px -50px -38px;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(246,225,93,.7) 38px 42px, transparent 42px 80px) left 18px top / 4px 100% no-repeat,
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(246,225,93,.7) 38px 42px, transparent 42px 80px) right 18px top / 4px 100% no-repeat;
}
.board-exit-ramp { display: none; }

.loading-concourse {
  position: relative;
  z-index: 4;
  margin-top: 0;
  padding: 52px 12px 0;
  border-top: 0;
  background:
    linear-gradient(180deg, #25343d 0 164px, #59656a 164px 170px, #b7c1c5 170px 178px, #53646b 178px 100%);
}
.arrival-road {
  z-index: 3;
  height: 52px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 35%),
    #26343d;
  border-top: 3px solid #657983;
  border-bottom: 3px solid #73858d;
  box-shadow: inset 0 6px 18px rgba(0,0,0,.28);
}
.arrival-road::before,
.arrival-road::after { width: 4px; top: 8px; bottom: 8px; background: #f5df5c; }
.arrival-road i { width: 10%; height: 4px; background: #f1dd63; opacity: .88; }
.arrival-road-label {
  font-size: .58rem;
  padding: 4px 11px;
  background: rgba(7,20,29,.9);
  border-color: #768b96;
}

.bay-apron {
  z-index: 4;
  padding: 15px 8px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.bay-status-sign,
.platform-sign,
.reserve-sign {
  position: absolute;
  z-index: 7;
  display: flex;
  width: auto;
  margin: 0;
  padding: 5px 9px;
  align-items: center;
  gap: 12px;
  border-radius: 7px;
  color: #eefaff;
  background: rgba(7,27,39,.9);
  border: 1px solid rgba(129,194,222,.55);
  box-shadow: 0 4px 10px rgba(0,0,0,.28);
}
.bay-status-sign { top: 58px; left: 20px; }
.platform-sign { top: 10px; left: 16px; }
.reserve-sign { top: 12px; left: 16px; }
.bay-status-sign h2,
.platform-sign h2,
.reserve-sign h2 { font-size: .72rem; line-height: 1; }
.bay-status-sign .eyebrow,
.platform-sign .eyebrow,
.reserve-sign .eyebrow { font-size: .46rem; }
.bay-status-sign > strong,
.platform-sign > strong,
.reserve-sign > strong { font-size: .64rem; }

.bay-apron .bay-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(105px, 1fr));
  gap: 8px;
  padding-top: 25px;
}
.bay-apron .waiting-bay {
  position: relative;
  min-height: 132px;
  padding: 7px 6px 8px;
  overflow: visible;
  border: 2px dashed rgba(238,224,111,.75);
  border-top: 5px solid #e4e8e9;
  border-radius: 5px 5px 12px 12px;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.045) 8% 9%, transparent 9% 91%, rgba(255,255,255,.045) 91% 92%, transparent 92%),
    linear-gradient(180deg, #2b3b43, #1f3039);
  box-shadow: inset 0 -14px 20px rgba(0,0,0,.22);
}
.bay-apron .waiting-bay::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -36px;
  width: 72%;
  height: 36px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, #edf1f2 0 10px, transparent 10px 20px);
  opacity: .78;
  clip-path: polygon(15% 0,85% 0,100% 100%,0 100%);
}
.bay-apron .waiting-bay::after { display: none; }
.bay-parking-space {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 76px;
  min-width: 0;
  overflow: visible;
}
.bay-outline {
  display: grid;
  place-items: center;
  width: 78%;
  height: 54%;
  border: 1px dashed rgba(213,238,249,.45);
  border-radius: 999px;
  color: rgba(216,241,251,.7);
  font-size: .58rem;
  letter-spacing: .12em;
}
.bay-apron .waiting-bay.occupied {
  display: grid;
  grid-template-rows: 76px auto;
  gap: 2px;
  text-align: center;
}
.bay-apron .bay-vehicle { width: 100%; height: 100%; display: grid; place-items: center; }
.bay-apron .bay-vehicle .vehicle-svg { width: 96%; height: 68px; }
.bay-apron .bay-copy { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 5px; }
.bay-apron .bay-copy b { font-size: .61rem; text-align: left; }
.bay-apron .bay-copy small { font-size: .52rem; text-align: left; }
.bay-apron .bay-copy strong { grid-column: 2; grid-row: 1 / span 2; font-size: .67rem; }
.bay-apron .bay-progress { grid-column: 1 / -1; height: 5px; }
.bay-number { top: -10px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; }
.waiting-bay.priority { outline: 3px solid #7ce8ff; outline-offset: 2px; }
.waiting-bay.vehicle-arriving { border-color: #7ce8ff; box-shadow: 0 0 22px rgba(93,219,255,.46); }
.waiting-bay.boarding-now { border-color: var(--bay-color, #7ce8ff); box-shadow: 0 0 26px color-mix(in srgb, var(--bay-color, #7ce8ff) 62%, transparent); }
.bay-vehicle-masked .bay-vehicle { visibility: hidden !important; }
.dispatch-source-hidden { opacity: 0 !important; visibility: hidden !important; }

.passenger-concourse {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 330px;
  margin: 0 -12px;
  overflow: hidden;
  border: 0;
  border-radius: 0 0 24px 24px;
  background: linear-gradient(180deg, #737e82 0 8px, #cbd4d7 8px 16px, #56656b 16px 100%);
}
.active-zone,
.reserve-zone {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.active-zone { order: 1; min-height: 182px; }
.reserve-zone { order: 2; min-height: 150px; border-top: 8px solid #35454d; }
.reserve-zone::before {
  content: "";
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: -12px;
  height: 18px;
  background:
    repeating-linear-gradient(90deg, #2b3d45 0 9px, transparent 9px 28px),
    linear-gradient(#a4b0b4 0 4px, transparent 4px 12px, #a4b0b4 12px 16px, transparent 16px);
}
.reserve-zone::after { display: none; }
.active-platform {
  min-height: 182px;
  padding: 55px 20px 22px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(180deg, #63737a, #4f626a);
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: inset 0 20px 22px rgba(0,0,0,.16);
}
.active-platform::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 36%);
  pointer-events: none;
}
.platform-canopy {
  z-index: 5;
  top: 28px;
  left: 14%;
  right: 14%;
  height: 11px;
  border-radius: 7px;
  background: repeating-linear-gradient(90deg, #5cc8ff 0 38px, #f1f8fc 38px 76px);
}
.platform-board-gates {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 1.5%;
  right: 1.5%;
  height: 42px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  pointer-events: none;
}
.platform-board-gates i {
  align-self: stretch;
  background: repeating-linear-gradient(90deg, rgba(245,248,249,.92) 0 10px, transparent 10px 20px);
  clip-path: polygon(18% 0,82% 0,100% 100%,0 100%);
  opacity: .72;
}
.active-platform .curb-line { top: 0; bottom: auto; height: 8px; background: repeating-linear-gradient(90deg, #ecd95c 0 30px, #2f3f47 30px 60px); }
.active-crowd {
  z-index: 5;
  min-height: 102px;
  gap: 8px 7px;
  align-content: end;
  justify-content: center;
}
.reserve-queue {
  min-height: 142px;
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: stretch;
  padding-top: 42px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, #334852, #253a44);
  background-size: 28px 28px, 28px 28px, auto;
}
.reserve-gate {
  writing-mode: initial;
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 8px;
  color: #ffe9a5;
  background: rgba(19,36,44,.8);
  border-right: 5px solid #9da9ad;
}
.reserve-gate i { width: 58px; height: 6px; border-radius: 4px; background: repeating-linear-gradient(90deg,#e2ad39 0 12px,#273944 12px 24px); box-shadow: none; }
.reserve-gate b { font-size: .55rem; letter-spacing: .08em; text-align: center; }
.reserve-crowd {
  min-height: 98px;
  padding: 13px 14px 5px;
  gap: 0;
  align-content: end;
  justify-content: center;
  background: transparent;
}

.vehicle-drive-sprite {
  z-index: 220;
  overflow: visible;
  filter: none;
  will-change: transform, opacity;
}
.vehicle-drive-sprite .vehicle-svg { position: relative; z-index: 3; width: 100%; height: 100%; filter: drop-shadow(0 7px 5px rgba(0,0,0,.42)); }
.vehicle-motion-shadow {
  position: absolute;
  z-index: 1;
  left: 10%;
  right: 10%;
  bottom: -6px;
  height: 13px;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  filter: blur(5px);
}
.vehicle-brake-lights {
  position: absolute;
  z-index: 4;
  left: 5%;
  top: 36%;
  width: 6px;
  height: 28%;
  border-radius: 4px;
  background: #ff354e;
  opacity: 0;
  box-shadow: 0 0 10px #ff354e;
}
.vehicle-drive-sprite.parked .vehicle-brake-lights,
.vehicle-drive-sprite.doors-open .vehicle-brake-lights { opacity: .95; }
.vehicle-drive-sprite.is-driving .vehicle-svg { animation: vehicleSuspension .24s linear infinite alternate; }
.vehicle-drive-sprite.departing .vehicle-svg { animation-duration: .17s; }
.vehicle-drive-sprite.doors-open::after {
  content: "";
  position: absolute;
  z-index: 5;
  right: 20%;
  bottom: 7%;
  width: 20%;
  height: 34%;
  border-radius: 4px;
  background: linear-gradient(90deg, #07131a, #6be3ff);
  box-shadow: 0 0 14px rgba(107,227,255,.8);
  transform: skewY(-6deg);
}
.existing-bay-sprite { padding: 3px; }
.existing-bay-sprite .vehicle-svg { width: 100%; height: 100%; }

.boarding-sprite,
.promotion-sprite {
  z-index: 230;
  pointer-events: none;
  overflow: visible;
  will-change: transform, opacity;
}
.boarding-sprite > .passenger,
.promotion-sprite > .passenger { width: 100%; height: 100%; transform: none; animation: none; }
.passenger-staged > .passenger { animation: passengerWait .65s ease-in-out infinite alternate; }
.boarding-called > .passenger { animation: passengerCalled .22s ease-in-out 3 alternate; filter: drop-shadow(0 0 8px #fff) brightness(1.22); }
.passenger-walking > .passenger { animation: walkingBob .17s linear infinite alternate; }
.passenger-walking > .passenger .passenger-body::before { animation: armLeft .19s linear infinite alternate; transform-origin: top center; }
.passenger-walking > .passenger .passenger-body::after { animation: armRight .19s linear infinite alternate; transform-origin: top center; }
.passenger-walking > .passenger::before { animation: legLeft .19s linear infinite alternate; transform-origin: top center; }
.passenger-walking > .passenger::after { animation: legRight .19s linear infinite alternate; transform-origin: top center; }
.boarding-count-pop { z-index: 240; }

@keyframes vehicleSuspension {
  from { transform: translateY(0) rotate(-.35deg); }
  to { transform: translateY(-2px) rotate(.35deg); }
}
@keyframes passengerWait { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes passengerCalled { from { transform: translateY(0) scale(1); } to { transform: translateY(-5px) scale(1.08); } }
@keyframes armLeft { from { transform: rotate(25deg); } to { transform: rotate(-24deg); } }
@keyframes armRight { from { transform: rotate(-24deg); } to { transform: rotate(25deg); } }

@media (max-width: 1180px) {
  .terminal-scene .traffic-board { min-height: 620px; }
}
@media (max-width: 820px) {
  .terminal-scene { background: linear-gradient(90deg, #24343e 0 25px, transparent 25px calc(100% - 25px), #24343e calc(100% - 25px)), linear-gradient(180deg, #102b42 0 76px, #1d3440 76px); }
  .terminal-scene .traffic-board { width: calc(100% - 54px); margin: 7px 27px 0; min-height: 560px; }
  .loading-concourse { padding-left: 7px; padding-right: 7px; }
  .bay-apron .bay-grid { grid-template-columns: repeat(5, minmax(112px, 1fr)); overflow-x: auto; padding: 25px 3px 8px; scroll-snap-type: x proximity; }
  .bay-apron .waiting-bay { scroll-snap-align: center; }
  .passenger-concourse { margin-left: -7px; margin-right: -7px; }
  .active-platform { padding-left: 12px; padding-right: 12px; }
  .reserve-queue { grid-template-columns: 86px 1fr; }
  .platform-board-gates { grid-template-columns: repeat(5, minmax(112px, 1fr)); width: 596px; right: auto; }
}
@media (max-width: 520px) {
  .terminal-scene-heading { min-height: 52px; }
  .terminal-scene .traffic-board { width: calc(100% - 40px); margin: 5px 20px 0; min-height: 490px; }
  .loading-concourse { padding-top: 46px; }
  .arrival-road { height: 46px; }
  .bay-status-sign { top: 51px; left: 12px; }
  .bay-apron .bay-grid { grid-template-columns: repeat(5, 108px); }
  .bay-apron .waiting-bay { min-height: 121px; }
  .bay-parking-space { height: 69px; }
  .active-platform { min-height: 165px; padding-top: 52px; }
  .active-crowd { justify-content: flex-start; }
  .reserve-queue { grid-template-columns: 72px 1fr; }
  .reserve-gate b { font-size: .46rem; }
}
.passenger-staged.waiting-to-board { animation: none !important; }
body.in-game .bottom-nav { transform: translateY(110%); opacity: 0; pointer-events: none; }
body.in-game .screen { padding-bottom: 26px; }

/* ========================================================================== */
/* V2.3 physical terminal, visible four-exit road network and staged motion   */
/* ========================================================================== */
.terminal-scene {
  position: relative;
  overflow: hidden;
  border: 1px solid #42677a;
  border-radius: 24px;
  background: #263840;
  box-shadow: 0 20px 46px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.08);
}
.terminal-scene-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 12px;
  align-items: center;
  background: linear-gradient(180deg,#071a2a,#102d42);
  border-bottom: 1px solid #42677a;
}
.animation-state-chip {
  display: grid;
  grid-template-columns: 10px auto;
  column-gap: 7px;
  align-items: center;
  min-width: 188px;
  padding: 6px 10px;
  border-radius: 10px;
  color: #c7e9fa;
  background: rgba(9,33,47,.88);
  border: 1px solid #3e6d84;
}
.animation-state-chip i { grid-row: 1 / span 2; width: 9px; height: 9px; border-radius: 50%; background: #50d89b; box-shadow: 0 0 10px rgba(80,216,155,.7); }
.animation-state-chip b { font-size: .66rem; letter-spacing: .08em; }
.animation-state-chip small { font-size: .52rem; color: #9abed1; }
.animation-state-chip.active i { background: #ffe15d; box-shadow: 0 0 12px rgba(255,225,93,.8); animation: statusPulse .7s ease-in-out infinite alternate; }
@keyframes statusPulse { to { transform: scale(1.35); opacity: .72; } }

.traffic-complex {
  position: relative;
  z-index: 3;
  padding: 56px 64px 48px;
  background:
    radial-gradient(circle at 50% 40%,rgba(108,211,255,.05),transparent 44%),
    #263840;
}
.terminal-scene .traffic-board {
  position: relative;
  z-index: 4;
  width: 100%;
  margin: 0;
  min-height: clamp(500px,60vh,760px);
  border: 7px solid #62a176;
  border-radius: 18px;
  box-shadow: inset 0 0 0 3px #173e31,inset 0 0 46px rgba(0,0,0,.24),0 10px 22px rgba(0,0,0,.32);
}
.terminal-road-network { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.road-surface,.exit-road-link {
  position: absolute;
  display: block;
  overflow: hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 35%),
    #2a3942;
  border: 3px solid #667a84;
  box-shadow: inset 0 7px 16px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.28);
}
.road-surface i,.exit-road-link i { position: absolute; inset: 0; opacity: .8; }
.road-top { left: 20px; right: 20px; top: 8px; height: 46px; border-radius: 24px 24px 8px 8px; }
.road-bottom { left: 20px; right: 20px; bottom: 0; height: 46px; border-radius: 8px; }
.road-left { left: 8px; top: 8px; bottom: 0; width: 46px; border-radius: 24px 8px 8px 24px; }
.road-right { right: 8px; top: 8px; bottom: 0; width: 46px; border-radius: 8px 24px 24px 8px; }
.road-top i,.road-bottom i { background: repeating-linear-gradient(90deg,transparent 0 34px,#eadb61 34px 48px,transparent 48px 82px) center / auto 4px no-repeat; }
.road-left i,.road-right i { background: repeating-linear-gradient(0deg,transparent 0 34px,#eadb61 34px 48px,transparent 48px 82px) center / 4px auto no-repeat; }
.exit-road-link { z-index: 2; border-radius: 5px; }
.exit-road-N { top: 43px; left: calc(50% - 25px); width: 50px; height: 30px; border-width: 0 3px; }
.exit-road-S { bottom: 35px; left: calc(50% - 25px); width: 50px; height: 30px; border-width: 0 3px; }
.exit-road-W { left: 43px; top: calc(50% - 25px); width: 30px; height: 50px; border-width: 3px 0; }
.exit-road-E { right: 43px; top: calc(50% - 25px); width: 30px; height: 50px; border-width: 3px 0; }
.exit-road-N i,.exit-road-S i { background: linear-gradient(90deg,transparent calc(50% - 2px),#eadb61 calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px)); }
.exit-road-W i,.exit-road-E i { background: linear-gradient(transparent calc(50% - 2px),#eadb61 calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px)); }
.road-direction { position: absolute; z-index: 3; padding: 2px 6px; border-radius: 5px; font-size: .48rem; font-weight: 900; letter-spacing: .08em; color: #eff8fb; background: rgba(8,24,33,.74); }
.road-direction-top { top: 22px; left: 50%; transform: translateX(-50%); }
.road-direction-bottom { bottom: 14px; left: 50%; transform: translateX(-50%); }
.exit-marker { z-index: 9; background: #06452f; border-color: #8bd6ad; font-weight: 900; }

.loading-concourse { position: relative; z-index: 4; margin: 0; padding: 0; background: #626f74; }
.arrival-road {
  position: relative;
  height: 62px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 3px solid #71858f;
  border-left: 0;
  border-right: 0;
  background: #293942;
  box-shadow: inset 0 8px 18px rgba(0,0,0,.28);
}
.arrival-road::before,.arrival-road::after { content:""; position:absolute; top:8px; bottom:8px; width:4px; background:#f2df62; }
.arrival-road::before { left: 12px; }.arrival-road::after { right: 12px; }
.arrival-road > i { width: 9%; height: 4px; border-radius: 2px; background: #f2df62; opacity: .9; }
.arrival-road-label { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; padding:4px 10px; border-radius:999px; color:#fff; background:#0a1e2a; border:1px solid #7894a2; font-size:.54rem; font-weight:900; letter-spacing:.1em; }
.departure-sign { position:absolute; bottom:3px; color:#cce6f1; font-size:.45rem; font-weight:900; letter-spacing:.08em; }
.departure-sign.left { left:23px; }.departure-sign.right { right:23px; }

.bay-apron { position:relative; padding: 38px 12px 12px; background: linear-gradient(180deg,#9aa7aa 0,#7a888d 18px,#66757a 100%); }
.bay-apron::before { content:""; position:absolute; left:0; right:0; top:0; height:12px; background:repeating-linear-gradient(90deg,#f3e45d 0 32px,#2d3b42 32px 64px); box-shadow:0 4px 0 #d7e0e3; }
.bay-status-sign { top: 18px; left: 18px; }
.bay-apron .bay-grid { display:grid; grid-template-columns:repeat(5,minmax(105px,1fr)); gap:10px; padding-top:20px; }
.bay-apron .waiting-bay {
  position:relative;
  min-height:136px;
  padding:6px 7px 8px;
  overflow:visible;
  border:0;
  border-radius:3px 3px 11px 11px;
  background:
    linear-gradient(90deg,#f3f5f5 0 4px,transparent 4px calc(100% - 4px),#f3f5f5 calc(100% - 4px)),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(26,40,47,.35)),
    #42525a;
  box-shadow: inset 0 -12px 20px rgba(0,0,0,.25);
}
.bay-apron .waiting-bay::before { content:""; position:absolute; left:0; right:0; top:-28px; height:30px; background:repeating-linear-gradient(90deg,#eef2f3 0 12px,transparent 12px 24px); clip-path:polygon(12% 0,88% 0,100% 100%,0 100%); opacity:.9; }
.bay-apron .waiting-bay.empty { display:grid; grid-template-rows:82px auto; color:#e7f7ff; }
.bay-parking-space { height:82px; position:relative; display:grid; place-items:center; }
.bay-outline { width:86%; height:58%; display:grid; place-items:center; align-content:center; border:2px solid rgba(240,245,246,.5); border-radius:8px; color:#eef9ff; }
.bay-outline b { font-size:.58rem; }.bay-outline small { font-size:.48rem; color:#c5dbe5; }
.bay-curb-sign { position:absolute; z-index:8; top:-34px; left:50%; transform:translateX(-50%); display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#081824; background:#f8e365; border:2px solid #fff; font-size:.62rem; font-weight:950; box-shadow:0 3px 7px rgba(0,0,0,.35); }
.bay-number { display:none; }
.bay-apron .waiting-bay.occupied { display:grid; grid-template-rows:82px auto; gap:2px; }
.bay-apron .bay-vehicle { transform-origin:center; transition:none; }
.bay-apron .bay-copy { padding:2px 3px; }
.waiting-bay.vehicle-arriving,.waiting-bay.boarding-now { outline:3px solid #7ce8ff; outline-offset:3px; }

.passenger-concourse { position:relative; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr); gap:0; min-height:250px; margin:0; border-radius:0 0 24px 24px; overflow:hidden; background:#52636a; }
.active-zone,.reserve-zone { position:relative; min-width:0; padding:0; background:transparent; }
.active-zone { border-right:7px solid #35464e; }
.reserve-zone { border-top:0; }
.active-platform { min-height:250px; padding:64px 20px 28px; overflow:hidden; background: linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(180deg,#6b7d83,#52666d); background-size:34px 34px,34px 34px,auto; }
.platform-canopy { top:28px; left:8%; right:8%; }
.platform-board-gates { top:0; left:2%; right:2%; height:48px; display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.platform-gate { position:relative; display:grid; place-items:center; align-content:start; height:48px; color:#071c29; font-size:.55rem; font-weight:950; }
.platform-gate::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,#f4f6f6 0 10px,transparent 10px 20px); opacity:.82; clip-path:polygon(17% 0,83% 0,100% 100%,0 100%); }
.platform-gate i { position:absolute; top:4px; left:50%; width:9px; height:9px; margin-left:-4px; border-radius:50%; background:#58d8ff; box-shadow:0 0 9px rgba(88,216,255,.8); }
.platform-gate b { position:relative; margin-top:17px; padding:1px 4px; border-radius:4px; background:#f7e266; }
.platform-muster-marks { position:absolute; z-index:2; left:3%; right:3%; top:70px; height:72px; display:grid; grid-template-columns:repeat(5,1fr); gap:10px; pointer-events:none; }
.platform-muster-mark { position:relative; display:grid; place-items:center; }
.platform-muster-mark::before { content:""; width:58px; height:34px; border:2px dashed rgba(205,237,249,.2); border-radius:50%; }
.platform-muster-mark i { position:absolute; width:7px; height:7px; border-radius:50%; background:rgba(121,220,255,.3); }
.pedestrian-spine { position:absolute; z-index:1; left:6%; right:6%; top:139px; height:19px; display:flex; justify-content:space-around; border-top:4px solid rgba(239,244,245,.62); border-bottom:4px solid rgba(239,244,245,.62); }
.pedestrian-spine i { width:4px; height:100%; background:rgba(239,244,245,.5); }
.active-crowd { z-index:5; min-height:88px; gap:8px 8px; align-content:end; justify-content:center; padding-top:86px; }
.platform-sign { top:10px; left:12px; }

.reserve-queue { position:relative; min-height:250px; display:grid; grid-template-columns:92px 1fr; padding-top:52px; overflow:hidden; border:0; border-radius:0; background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(180deg,#40535c,#2f444e); background-size:28px 28px,28px 28px,auto; }
.reserve-gate { position:relative; z-index:4; display:flex; writing-mode:initial; transform:none; flex-direction:column; align-items:center; justify-content:center; gap:17px; padding:6px; border-right:5px solid #a9b4b8; background:rgba(17,34,42,.9); }
.reserve-gate::after { content:""; position:absolute; right:-20px; top:50%; width:36px; height:52px; transform:translateY(-50%); border:4px solid #bdc7ca; border-left:0; border-radius:0 20px 20px 0; }
.reserve-gate i { width:54px; height:6px; border-radius:3px; background:repeating-linear-gradient(90deg,#e5ad38 0 12px,#273944 12px 24px); }
.promotion-lane { position:absolute; z-index:2; left:72px; right:8px; top:50%; height:42px; transform:translateY(-50%); border-top:3px dashed rgba(239,244,245,.55); border-bottom:3px dashed rgba(239,244,245,.55); }
.promotion-lane i { position:absolute; right:5px; top:50%; width:22px; height:3px; transform:translateY(-50%); background:#f7e064; box-shadow:-9px -5px 0 -3px #f7e064,-9px 5px 0 -3px #f7e064; }
.reserve-crowd { position:relative; z-index:3; min-height:190px; padding:16px 13px 8px; align-content:end; justify-content:center; }
.reserve-sign { top:11px; left:10px; }

.choreography-active .traffic-board .board-vehicle:not(.queued-for-dispatch) { opacity:.62; filter:saturate(.75); }
.choreography-active .waiting-bay.boarding-now,.choreography-active .waiting-bay.vehicle-arriving { opacity:1; }
.board-vehicle.queued-for-dispatch { z-index:16; opacity:1 !important; filter:brightness(1.25) drop-shadow(0 0 16px #7ce8ff) !important; animation:queuedPulse .65s ease-in-out infinite alternate; }
@keyframes queuedPulse { to { transform:scale(1.045); } }

.vehicle-drive-sprite { z-index:220; overflow:visible; filter:none; will-change:transform,opacity; transform-origin:center; }
.vehicle-drive-sprite .vehicle-svg { position:relative; z-index:3; width:100%; height:100%; filter:drop-shadow(0 7px 5px rgba(0,0,0,.42)); }
.vehicle-drive-sprite.engine-start .vehicle-svg { animation:engineStart .16s ease-in-out 3 alternate; }
.vehicle-drive-sprite.is-driving .vehicle-svg { animation:vehicleRoadBob .22s linear infinite alternate; }
.vehicle-drive-sprite.braking .vehicle-svg { animation:vehicleBrake .24s ease-out both; }
.vehicle-drive-sprite.departure-ready .vehicle-svg { animation:departureReady .28s ease-in-out both; }
.vehicle-drive-sprite.braking .vehicle-brake-lights,.vehicle-drive-sprite.departure-ready .vehicle-brake-lights { opacity:1; }
.vehicle-drive-sprite.parked .vehicle-brake-lights { opacity:.35; }
@keyframes engineStart { from { transform:translateY(0) rotate(-.3deg); } to { transform:translateY(-2px) rotate(.3deg); } }
@keyframes vehicleRoadBob { from { transform:translateY(0); } to { transform:translateY(-1.3px); } }
@keyframes vehicleBrake { 50% { transform:translateX(-3px) scaleX(.99); } 100% { transform:translateX(0); } }
@keyframes departureReady { 50% { transform:translateX(-2px); } 100% { transform:translateX(0); } }

.vehicle-door-portal { position:fixed; z-index:224; width:15px; height:24px; transform:translate(-50%,-50%) scaleX(.05); transform-origin:left center; border-radius:4px; opacity:0; background:linear-gradient(90deg,#051017,#77e7ff); border:1px solid #b7f4ff; box-shadow:0 0 16px rgba(119,231,255,.8); pointer-events:none; transition:transform calc(.22s * var(--animation-multiplier)) ease,opacity calc(.18s * var(--animation-multiplier)) ease; }
.vehicle-door-portal.open { opacity:1; transform:translate(-50%,-50%) scaleX(1); }
.vehicle-door-portal.door-bus,.vehicle-door-portal.door-coach,.vehicle-door-portal.door-double-decker { width:20px; height:29px; }

.boarding-muster-ring { position:fixed; z-index:221; width:96px; height:60px; transform:translate(-50%,-50%) scale(.5); border:2px dashed rgba(119,231,255,.88); border-radius:50%; opacity:0; pointer-events:none; box-shadow:0 0 0 8px rgba(66,193,244,.08),0 0 22px rgba(66,193,244,.25); transition:transform calc(.22s * var(--animation-multiplier)) ease,opacity calc(.22s * var(--animation-multiplier)) ease; }
.boarding-muster-ring.active { opacity:1; transform:translate(-50%,-50%) scale(1); animation:musterRotate 1.05s linear infinite; }
.boarding-muster-ring i { position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3px; border-radius:50%; background:#fff; box-shadow:0 0 10px #7ce8ff; }
.boarding-muster-ring b { position:absolute; left:50%; top:100%; transform:translate(-50%,5px); padding:2px 6px; border-radius:999px; color:#eaffff; background:#0b2634; border:1px solid #5592aa; font-size:.45rem; letter-spacing:.08em; }
@keyframes musterRotate { to { rotate:360deg; } }

.boarding-sprite,.promotion-sprite { z-index:230; pointer-events:none; overflow:visible; will-change:transform,opacity; }
.passenger-circling > .passenger { animation:passengerCircleLean .2s ease-in-out infinite alternate; }
.passenger-walking > .passenger { animation:walkingBob .16s linear infinite alternate; }
.passenger-walking > .passenger .passenger-body::before { animation:armLeft .16s linear infinite alternate; }
.passenger-walking > .passenger .passenger-body::after { animation:armRight .16s linear infinite alternate; }
.passenger-walking > .passenger::before { animation:legLeft .16s linear infinite alternate; }
.passenger-walking > .passenger::after { animation:legRight .16s linear infinite alternate; }
@keyframes passengerCircleLean { from { transform:translateY(0) rotate(-3deg); } to { transform:translateY(-2px) rotate(3deg); } }

@media (max-width:1180px) {
  .terminal-scene-heading { grid-template-columns:minmax(0,1fr) auto; }
  .terminal-flow-label { display:none; }
  .passenger-concourse { grid-template-columns:1fr; }
  .active-zone { border-right:0; border-bottom:7px solid #35464e; }
  .reserve-queue { min-height:190px; }
}
@media (max-width:820px) {
  .traffic-complex { padding:45px 40px 40px; }
  .terminal-scene .traffic-board { min-height:540px; }
  .road-top { left:10px; right:10px; height:38px; }
  .road-bottom { left:10px; right:10px; height:38px; }
  .road-left,.road-right { width:36px; }
  .exit-road-N { top:35px; }.exit-road-S { bottom:30px; }.exit-road-W { left:33px; }.exit-road-E { right:33px; }
  .bay-apron .bay-grid { grid-template-columns:repeat(5,112px); overflow-x:auto; padding:20px 3px 9px; scroll-snap-type:x proximity; }
  .bay-apron .waiting-bay { scroll-snap-align:center; }
  .platform-board-gates,.platform-muster-marks { width:592px; right:auto; }
  .animation-state-chip { min-width:150px; }
}
@media (max-width:520px) {
  .terminal-scene-heading { grid-template-columns:1fr auto; }
  .terminal-scene-heading > div h2 { font-size:.76rem; }
  .animation-state-chip { min-width:118px; padding:5px 7px; }
  .animation-state-chip small { display:none; }
  .traffic-complex { padding:38px 28px 34px; }
  .terminal-scene .traffic-board { min-height:470px; border-width:5px; }
  .road-top,.road-bottom { height:32px; }.road-left,.road-right { width:26px; }
  .exit-road-N { top:29px; }.exit-road-S { bottom:25px; }.exit-road-W { left:23px; }.exit-road-E { right:23px; }
  .arrival-road { height:50px; }
  .bay-apron .bay-grid { grid-template-columns:repeat(5,104px); }
  .bay-apron .waiting-bay { min-height:124px; }
  .bay-parking-space { height:72px; }
  .active-platform { min-height:225px; padding-left:10px; padding-right:10px; }
  .reserve-queue { grid-template-columns:70px 1fr; }
}

/* V2.3 physical door movement and entry occlusion */
.vehicle-drive-sprite .vehicle-door {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition: transform calc(.24s * var(--animation-multiplier)) cubic-bezier(.2,.75,.25,1),
              opacity calc(.2s * var(--animation-multiplier)) ease,
              filter calc(.2s * var(--animation-multiplier)) ease;
}
.vehicle-drive-sprite.doors-open .vehicle-door {
  transform: translateX(5px) scaleX(.12);
  opacity: .42;
  filter: drop-shadow(0 0 5px rgba(133,238,255,.95));
}
.vehicle-drive-sprite.doors-open .vehicle-svg {
  filter: drop-shadow(0 7px 5px rgba(0,0,0,.42)) drop-shadow(0 0 8px rgba(104,225,255,.28));
}
.boarding-sprite.entering-vehicle {
  z-index: 218 !important;
}

/* ========================================================================== */
/* Transit Tangle 2.6.0 - rapid dispatch and shared passenger circuit         */
/* ========================================================================== */

/* Vehicle input remains live while other vehicles drive or people board. */
body.game-animating .traffic-board .board-vehicle:not(.dispatch-source-hidden) {
  pointer-events: auto;
  opacity: 1;
  filter: none;
}
body.game-animating .bottom-nav { opacity: 1; }
.choreography-active .traffic-board .board-vehicle:not(.dispatch-source-hidden) {
  opacity: 1;
  filter: none;
}
.dispatch-source-hidden { opacity: 0 !important; pointer-events: none !important; }

.waiting-bay.reserved {
  display: grid;
  grid-template-rows: 82px auto;
  gap: 2px;
  color: #e7f7ff;
  outline: 2px solid color-mix(in srgb, var(--bay-color, #6ee7ff) 70%, white);
  outline-offset: 2px;
  background:
    linear-gradient(90deg,#f3f5f5 0 4px,transparent 4px calc(100% - 4px),#f3f5f5 calc(100% - 4px)),
    linear-gradient(135deg,rgba(92,224,255,.13),rgba(15,36,48,.5)),
    #42525a;
}
.waiting-bay.reserved .bay-outline.inbound {
  position: relative;
  overflow: hidden;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--bay-color, #6ee7ff) 72%, white);
}
.waiting-bay.reserved .bay-outline.inbound i {
  position: absolute;
  left: -45%;
  top: 0;
  width: 38%;
  height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);
  animation: inboundSweep .9s linear infinite;
}
.waiting-bay.departing-now { outline: 3px solid #8effcf; outline-offset: 3px; }
@keyframes inboundSweep { to { left: 120%; } }

/* A visible oval pedestrian loop, based on the reference animation: people
   run into the loop, circulate around it, then peel off toward the bay door. */
.boarding-orbit-trail {
  position: fixed;
  z-index: 220;
  transform: translate(-50%,-50%) scale(.82);
  pointer-events: none;
  opacity: 0;
  border: 3px solid rgba(120,232,255,.42);
  border-left-color: rgba(120,232,255,.96);
  border-right-color: rgba(255,255,255,.72);
  border-radius: 50%;
  box-shadow:
    0 0 0 7px rgba(39,176,225,.08),
    inset 0 0 18px rgba(90,221,255,.12),
    0 0 26px rgba(77,215,255,.24);
  transition: opacity calc(.18s * var(--animation-multiplier)) ease,
              transform calc(.22s * var(--animation-multiplier)) ease;
}
.boarding-orbit-trail.active {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
  animation: orbitTrailPulse .72s ease-in-out infinite alternate;
}
.boarding-orbit-trail::before,
.boarding-orbit-trail::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(232,250,255,.4);
  border-radius: 50%;
}
.boarding-orbit-trail::after {
  inset: 20px;
  border-color: rgba(120,232,255,.22);
}
.boarding-orbit-trail > i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e9fdff;
  box-shadow: 0 0 12px #64e6ff;
}
.boarding-orbit-trail > i:nth-child(1) { left: 4%; top: 49%; }
.boarding-orbit-trail > i:nth-child(2) { right: 8%; top: 15%; }
.boarding-orbit-trail > i:nth-child(3) { right: 22%; bottom: 3%; }
.boarding-orbit-trail > b {
  position: absolute;
  right: -4px;
  top: -19px;
  color: #ddfbff;
  font-size: 1.05rem;
  text-shadow: 0 0 10px #68eaff;
}
@keyframes orbitTrailPulse {
  from { filter: brightness(.88); }
  to { filter: brightness(1.18); }
}

.boarding-muster-ring {
  border-width: 2px;
  border-color: rgba(170,244,255,.62);
  box-shadow: none;
  background: transparent;
}
.boarding-muster-ring.active {
  animation: none;
}
.boarding-muster-ring i { display: none; }
.boarding-muster-ring b {
  top: auto;
  bottom: -19px;
  font-size: .48rem;
  white-space: nowrap;
  background: rgba(7,31,42,.88);
}

.passenger-circling {
  z-index: 232;
  filter: drop-shadow(0 5px 3px rgba(0,0,0,.42)) drop-shadow(0 0 5px rgba(105,231,255,.34));
}
.passenger-circling > .passenger {
  animation: orbitRunBob .14s linear infinite alternate;
}
.passenger-circling > .passenger .passenger-body::before { animation: armLeft .14s linear infinite alternate; }
.passenger-circling > .passenger .passenger-body::after { animation: armRight .14s linear infinite alternate; }
.passenger-circling > .passenger::before { animation: legLeft .14s linear infinite alternate; }
.passenger-circling > .passenger::after { animation: legRight .14s linear infinite alternate; }
@keyframes orbitRunBob {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-4px) rotate(2deg); }
}

.platform-muster-mark::before {
  width: 92px;
  height: 50px;
  border-color: rgba(205,237,249,.28);
  border-style: dashed;
}
.platform-muster-mark b {
  position: absolute;
  right: 11%;
  top: 18%;
  color: rgba(160,235,255,.52);
  font-size: .82rem;
}

@media (max-width: 820px) {
  .waiting-bay.reserved { min-height: 124px; }
  .platform-muster-mark::before { width: 82px; height: 45px; }
}


/* ========================================================================== */
/* Transit Tangle 2.6.0 — shared physical boarding circuit and concurrent flow */
/* ========================================================================== */
.platform-muster-marks,
.platform-muster-mark,
.boarding-orbit-trail,
.boarding-muster-ring { display:none !important; }

.passenger-concourse {
  display:block;
  min-height:430px;
  overflow:visible;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(180deg,#65777d 0 64%,#4b6068 64% 100%);
  background-size:34px 34px,34px 34px,auto;
}
.active-zone { border:0; min-height:260px; }
.reserve-zone { border:0; margin-top:-1px; }
.active-platform {
  position:relative;
  min-height:270px;
  padding:58px 18px 22px;
  overflow:hidden;
  background:transparent;
}
.platform-canopy { display:none; }
.platform-board-gates { z-index:8; top:0; left:2%; right:2%; height:50px; }
.platform-gate::after {
  content:"";
  position:absolute;
  left:50%; top:42px;
  width:3px; height:37px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,rgba(248,246,203,.88) 0 7px,transparent 7px 12px);
}

.boarding-circuit {
  position:absolute;
  z-index:2;
  left:3%; right:3%; top:55px; bottom:18px;
  border:20px solid rgba(35,49,56,.78);
  border-radius:56px;
  background:rgba(91,112,120,.20);
  box-shadow:
    inset 0 0 0 2px rgba(235,244,246,.54),
    inset 0 0 0 8px rgba(28,42,49,.58),
    0 0 0 2px rgba(235,244,246,.44),
    0 8px 17px rgba(0,0,0,.16);
  pointer-events:none;
}
.boarding-circuit::before,
.boarding-circuit::after,
.boarding-circuit .circuit-lane {
  content:"";
  position:absolute;
  border-radius:38px;
  pointer-events:none;
}
.boarding-circuit::before { inset:-12px; border:2px solid rgba(247,239,116,.72); }
.boarding-circuit::after { inset:4px; border:2px dashed rgba(231,245,248,.48); }
.boarding-circuit .circuit-lane-outer { inset:-7px; border:2px dashed rgba(134,222,245,.48); }
.boarding-circuit .circuit-lane-inner { inset:12px; border:2px dashed rgba(255,255,255,.28); }
.circuit-arrow {
  position:absolute; z-index:4;
  display:grid; place-items:center;
  width:22px; height:22px;
  border-radius:50%;
  color:#071d28; background:#f7e36b;
  border:2px solid #fff; font-weight:950; font-size:.72rem;
  box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.circuit-arrow-top { top:-21px; left:48%; }
.circuit-arrow-right { right:-21px; top:47%; }
.circuit-arrow-bottom { bottom:-21px; left:48%; }
.circuit-arrow-left { left:-21px; top:47%; }
.circuit-label {
  position:absolute; left:50%; top:-17px; transform:translateX(-50%);
  padding:2px 8px; border-radius:999px;
  color:#dff8ff; background:#132d38; border:1px solid #6fa1b3;
  font-size:.46rem; font-weight:950; letter-spacing:.08em; white-space:nowrap;
}
.circuit-gate-spurs {
  position:absolute; z-index:3;
  left:2%; right:2%; top:42px; height:48px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
  pointer-events:none;
}
.circuit-gate-spurs > span { position:relative; display:block; }
.circuit-gate-spurs > span i {
  position:absolute; left:50%; top:0; bottom:0; width:25px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(90deg,rgba(244,246,246,.86) 0 5px,transparent 5px 10px);
  clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);
  opacity:.72;
}
.active-crowd-stage {
  position:absolute; z-index:3;
  left:16%; right:16%; top:108px; bottom:45px;
  border:1px solid rgba(218,239,245,.32);
  border-radius:16px;
  background:rgba(27,48,57,.18);
  pointer-events:none;
}
.active-crowd-stage span {
  position:absolute; left:50%; top:7px; transform:translateX(-50%);
  color:rgba(225,245,250,.58); font-size:.44rem; font-weight:900; letter-spacing:.08em;
}
.active-crowd {
  position:absolute; z-index:5;
  left:17%; right:17%; top:125px; bottom:50px;
  min-height:0; padding:0;
  display:flex; flex-wrap:wrap; align-content:center; justify-content:center;
  gap:7px 8px;
}

.reserve-queue {
  min-height:170px;
  grid-template-columns:96px 1fr;
  padding-top:35px;
  border-top:0;
  background:transparent;
}
.reserve-zone::before {
  content:"";
  position:absolute; z-index:1;
  left:0; right:0; top:0; height:8px;
  background:linear-gradient(180deg,#263942,#344b54);
  box-shadow:0 5px 10px rgba(0,0,0,.2);
}
.reserve-gate { margin-top:8px; border-right-color:#b9c6ca; }
.reserve-gate::after { top:42%; }
.promotion-lane {
  left:90px; right:3%; top:30px; height:34px; transform:none;
  border-top:2px dashed rgba(241,245,246,.48);
  border-bottom:2px dashed rgba(241,245,246,.48);
}
.reserve-crowd { min-height:126px; padding:24px 13px 8px; }
.reserve-sign { top:13px; }

.boarding-circuit-highlight {
  position:fixed; z-index:221;
  pointer-events:none; opacity:0;
  border:4px solid rgba(104,230,255,.78);
  border-radius:56px;
  box-shadow:0 0 0 8px rgba(61,193,235,.08),inset 0 0 18px rgba(105,231,255,.12),0 0 22px rgba(74,213,255,.28);
  transform:scale(.985);
  transition:opacity calc(.16s * var(--animation-multiplier)) ease,transform calc(.18s * var(--animation-multiplier)) ease;
}
.boarding-circuit-highlight::before {
  content:""; position:absolute; inset:10px; border:2px dashed rgba(239,253,255,.55); border-radius:44px;
}
.boarding-circuit-highlight.active { opacity:1; transform:scale(1); animation:circuitFlowPulse .65s ease-in-out infinite alternate; }
.boarding-circuit-highlight[data-circuit-lane="1"] { border-color:rgba(255,231,104,.76); }
.boarding-circuit-highlight i { position:absolute; right:4%; top:48%; width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 12px #68eaff; }
.boarding-circuit-highlight b { position:absolute; left:50%; top:-19px; transform:translateX(-50%); padding:2px 7px; border-radius:999px; color:#eaffff; background:#0b2634; border:1px solid #5592aa; font-size:.45rem; white-space:nowrap; }
@keyframes circuitFlowPulse { from{filter:brightness(.9)} to{filter:brightness(1.18)} }

/* Multiple vehicle groups may board concurrently. They share the physical walk
   but use its two marked lanes; no bus can lock vehicle dispatch. */
.passenger-circling { z-index:232; filter:drop-shadow(0 5px 3px rgba(0,0,0,.42)) drop-shadow(0 0 5px rgba(105,231,255,.28)); }
.passenger-circling > .passenger { animation:orbitRunBob .14s linear infinite alternate; }
body.game-animating .traffic-board .board-vehicle:not(.dispatch-source-hidden) { pointer-events:auto !important; }

@media (max-width:820px) {
  .passenger-concourse { min-height:410px; }
  .active-platform { min-height:260px; overflow-x:hidden; }
  .platform-board-gates,.circuit-gate-spurs { width:auto; left:2%; right:2%; }
  .boarding-circuit { left:2.5%; right:2.5%; border-width:16px; border-radius:45px; }
  .active-crowd-stage { left:13%; right:13%; }
  .active-crowd { left:14%; right:14%; }
}
@media (max-width:520px) {
  .passenger-concourse { min-height:385px; }
  .active-platform { min-height:245px; padding-left:7px; padding-right:7px; }
  .boarding-circuit { top:53px; bottom:15px; border-width:13px; border-radius:36px; }
  .boarding-circuit::before { inset:-9px; }
  .boarding-circuit::after { inset:3px; }
  .active-crowd-stage { left:10%; right:10%; top:106px; bottom:40px; }
  .active-crowd { left:11%; right:11%; top:120px; bottom:43px; gap:5px 5px; }
  .circuit-arrow { width:18px; height:18px; font-size:.58rem; }
  .circuit-arrow-top { top:-17px; }.circuit-arrow-bottom { bottom:-17px; }
  .circuit-arrow-left { left:-17px; }.circuit-arrow-right { right:-17px; }
  .reserve-queue { grid-template-columns:72px 1fr; min-height:140px; }
}

/* Ambient active passengers live inside the platform so page scrolling cannot
   detach them from the physical walkway. */
.ambient-passenger {
  position:absolute;
  z-index:12;
  width:25px;
  height:47px;
  pointer-events:none;
  overflow:visible;
  will-change:transform;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.36));
}
.ambient-passenger > .passenger { width:100%; height:100%; transform:none; animation:walkingBob .19s linear infinite alternate; }
.ambient-passenger > .passenger .passenger-body::before { animation:armLeft .19s linear infinite alternate; }
.ambient-passenger > .passenger .passenger-body::after { animation:armRight .19s linear infinite alternate; }
.ambient-passenger > .passenger::before { animation:legLeft .19s linear infinite alternate; }
.ambient-passenger > .passenger::after { animation:legRight .19s linear infinite alternate; }


/* ========================================================================== */
/* Transit Tangle 2.6.0 — native viewport, dense active crowd, one shared gate */
/* ========================================================================== */
:root { --app-height: 100dvh; }
html { overscroll-behavior: none; }
body.in-game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: #06111d;
}
body.in-game .app-shell {
  height: 100%;
  min-height: 0;
  padding-bottom: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
body.in-game .bottom-nav { display: none !important; }
body.in-game .topbar { position: relative; flex: 0 0 auto; min-height: 52px; padding-top: max(7px, env(safe-area-inset-top)); padding-bottom: 7px; }
body.in-game .screen {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: none;
}
body.in-game button { touch-action: manipulation; }
body.in-game .game-header { flex: 0 0 auto; margin: 0 0 5px; min-height: 45px; }
body.in-game .game-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 7px;
  overflow: hidden;
}
body.in-game .terminal-workspace { min-height: 0; height: 100%; display: grid; grid-template-rows: minmax(0,1fr); overflow: hidden; }
body.in-game .terminal-scene {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1.08fr) minmax(0, .95fr);
  overflow: hidden;
  border-radius: 16px;
  contain: layout paint;
}
body.in-game .terminal-scene-heading { min-height: 42px; padding: 5px 9px; }
body.in-game .traffic-complex { min-height: 0; height: 100%; overflow: hidden; }
body.in-game .terminal-scene .traffic-board { height: 100%; min-height: 0; max-height: none; aspect-ratio: auto !important; }
body.in-game .loading-concourse {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 24px minmax(0, .54fr) minmax(0, 1fr);
  overflow: hidden;
}
body.in-game .arrival-road { min-height: 0; height: 24px; }
body.in-game .arrival-road-label { font-size: .48rem; }
body.in-game .bay-apron { min-height: 0; overflow: hidden; padding: 0 5px; }
body.in-game .bay-apron .bay-grid { height: 100%; min-height: 0; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; padding: 12px 0 3px; overflow: hidden; }
body.in-game .waiting-bay { min-height: 0; height: 100%; padding: 3px; border-radius: 8px; }
body.in-game .bay-parking-space { min-height: 0; }
body.in-game .bay-copy { font-size: .57rem; line-height: 1.04; }
body.in-game .bay-copy small { font-size: .48rem; }
body.in-game .bay-number { width: 17px; height: 17px; font-size: .48rem; }
body.in-game .passenger-concourse {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(72px, .34fr);
  overflow: hidden;
  background: linear-gradient(180deg,#65777d 0 68%,#50646b 68% 100%);
}
body.in-game .active-zone, body.in-game .reserve-zone { min-height: 0; overflow: hidden; }
body.in-game .active-platform { height: 100%; min-height: 0; padding: 37px 7px 7px; overflow: hidden; }
body.in-game .reserve-queue { height: 100%; min-height: 0; padding-top: 18px; grid-template-columns: 62px 1fr; overflow: hidden; }
body.in-game .reserve-crowd { min-height: 0; height: 100%; padding: 12px 5px 2px; align-content: center; overflow: hidden; }
body.in-game .reserve-sign, body.in-game .platform-sign { top: 3px; left: 6px; transform: scale(.82); transform-origin: top left; }
body.in-game .board-instruction { display: none; }
body.in-game .deadlock-banner { position: absolute; z-index: 90; left: 12px; right: 12px; bottom: 94px; }
body.in-game .hud-column {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, .56fr) minmax(0, 1fr);
  gap: 7px;
  overflow: hidden;
}
body.in-game .hud-column .panel { min-height: 0; overflow: auto; }

/* One real passenger exit gate. People leave the loop here, then use the one
   curbside sidewalk before branching to the selected bay. */
.platform-board-gates, .circuit-gate-spurs, .active-crowd-stage { display: none !important; }
.shared-boarding-walk {
  position: absolute;
  z-index: 8;
  left: 2%;
  right: 2%;
  top: -4px;
  height: 31px;
  border-top: 3px solid rgba(247,249,240,.92);
  border-bottom: 3px solid rgba(247,249,240,.92);
  background: repeating-linear-gradient(90deg,rgba(255,255,255,.88) 0 11px,rgba(255,255,255,.16) 11px 21px);
  opacity: .86;
  pointer-events: none;
}
.shared-boarding-walk > i { position:absolute; left:50%; top:0; bottom:0; width:4px; transform:translateX(-50%); background:#ffe664; box-shadow:0 0 8px rgba(255,230,100,.8); }
.shared-boarding-walk > span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:2px 7px; border-radius:999px; background:#102c38; color:#effcff; border:1px solid #8ab8c7; font-size:.43rem; font-weight:950; letter-spacing:.07em; white-space:nowrap; }
.shared-boarding-gate {
  position: absolute;
  z-index: 16;
  left: 50%;
  top: 24px;
  width: 62px;
  height: 32px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border: 3px solid #f8ed74;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: rgba(17,43,54,.95);
  box-shadow: 0 0 14px rgba(255,231,93,.42);
  pointer-events: none;
}
.shared-boarding-gate::after { content:""; position:absolute; left:50%; top:28px; width:24px; height:26px; transform:translateX(-50%); background:repeating-linear-gradient(90deg,#f7f7ef 0 5px,transparent 5px 9px); clip-path:polygon(30% 0,70% 0,100% 100%,0 100%); }
.shared-boarding-gate i { width: 34px; height: 4px; background: #f7e86d; border-radius: 4px; }
.shared-boarding-gate b { font-size: .43rem; letter-spacing: .07em; color: #fff7b4; }
.boarding-circuit { top: 48px; bottom: 8px; left: 1.5%; right: 1.5%; border-width: 13px; border-radius: 42px; }
.boarding-circuit .circuit-lane-mid { inset: 5px; border: 2px dashed rgba(255,236,104,.34); }
.boarding-circuit .circuit-lane-inner { inset: 17px; }
.active-crowd { position:absolute; inset:0; visibility:hidden; pointer-events:none; }
.active-crowd-accessible { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.ambient-passenger { width: 20px; height: 39px; }
.ambient-passenger > .passenger { width:100%; height:100%; }

/* Mobile game controls are a fixed native-style dock, not another page section. */
.star-rules-button { display: none; }
@media (max-width: 900px) {
  body.in-game .topbar { min-height: 49px; gap: 6px; padding-left: 6px; padding-right: 6px; }
  body.in-game .topbar .brand span:last-child { display:none; }
  body.in-game .wallet { gap:4px; }
  body.in-game .wallet > span { min-height:34px; padding:0 7px; }
  body.in-game .screen { padding:4px; }
  body.in-game .game-header { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:5px; min-height:42px; }
  body.in-game .game-header h1 { margin:0; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body.in-game .game-header p { display:none; }
  body.in-game .game-metrics { grid-column:auto; display:flex; gap:3px; justify-content:flex-end; min-width:0; }
  body.in-game .game-metrics > span { min-height:32px; padding:0 6px; font-size:.6rem; white-space:nowrap; }
  body.in-game .game-metrics > span:nth-child(3) { display:none; }
  body.in-game .pause-button { width:33px; height:33px; }
  body.in-game .game-layout { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 76px; gap:4px; }
  body.in-game .terminal-scene { grid-template-rows:minmax(0,1.06fr) minmax(0,.94fr); }
  body.in-game .terminal-scene-heading { display:none; }
  body.in-game .terminal-scene .traffic-board { border-width:5px; border-radius:12px 12px 5px 5px; }
  body.in-game .terminal-road-network { inset:0; }
  body.in-game .loading-concourse { grid-template-rows:18px minmax(0,.47fr) minmax(0,1fr); }
  body.in-game .arrival-road { height:18px; }
  body.in-game .departure-sign, body.in-game .arrival-road-label { transform:scale(.76); }
  body.in-game .bay-apron .bay-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding-top:8px; }
  body.in-game .waiting-bay { border-width:1px; }
  body.in-game .bay-copy > b, body.in-game .bay-copy > small, body.in-game .bay-progress { display:none; }
  body.in-game .bay-copy { position:absolute; left:2px; right:2px; bottom:2px; display:flex; justify-content:center; }
  body.in-game .bay-copy strong { font-size:.55rem; }
  body.in-game .bay-outline b { font-size:.48rem; }
  body.in-game .bay-outline small { font-size:.42rem; }
  body.in-game .passenger-concourse { grid-template-rows:minmax(0,1fr) minmax(62px,.28fr); }
  body.in-game .active-platform { padding-top:31px; }
  .shared-boarding-gate { top:18px; width:54px; height:27px; }
  .shared-boarding-gate::after { top:23px; height:21px; }
  .shared-boarding-walk { height:25px; }
  .shared-boarding-walk > span { display:none; }
  .boarding-circuit { top:40px; bottom:5px; border-width:10px; border-radius:31px; }
  .boarding-circuit::before { inset:-7px; }
  .boarding-circuit .circuit-lane-inner { inset:13px; }
  .circuit-label { font-size:.36rem; top:-13px; }
  .circuit-arrow { width:15px; height:15px; font-size:.48rem; }
  .circuit-arrow-top { top:-14px; }.circuit-arrow-bottom { bottom:-14px; }
  .circuit-arrow-left { left:-14px; }.circuit-arrow-right { right:-14px; }
  .ambient-passenger { width:17px; height:34px; }
  body.in-game .reserve-queue { grid-template-columns:47px 1fr; padding-top:12px; }
  body.in-game .reserve-gate b { font-size:.36rem; }
  body.in-game .reserve-crowd .passenger.tiny { width:12px; height:24px; }
  body.in-game .hud-column { height:76px; grid-template-columns:minmax(0,1fr) 112px; grid-template-rows:1fr; gap:4px; }
  body.in-game .hud-column .panel { height:76px; padding:4px; border-radius:11px; overflow:hidden; }
  body.in-game .tool-panel .panel-heading, body.in-game .tool-panel .panel-note { display:none; }
  body.in-game .tool-grid { height:100%; grid-template-columns:repeat(5,1fr); gap:3px; }
  body.in-game .tool-button { min-height:0; height:100%; padding:2px; border-radius:8px; }
  body.in-game .tool-button > span { font-size:1rem; }
  body.in-game .tool-button b { font-size:.48rem; }
  body.in-game .tool-button small { display:none; }
  body.in-game .star-panel { position:relative; display:grid; grid-template-rows:1fr 1fr; gap:1px; padding-right:31px !important; }
  body.in-game .star-panel .panel-heading, body.in-game .star-panel .star-group-title, body.in-game .star-panel .star-criterion span, body.in-game .star-panel .star-criterion em, body.in-game .star-panel .level-actions { display:none; }
  body.in-game .star-panel .star-group { margin:0; padding:0; border:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; }
  body.in-game .star-panel .star-criterion { min-height:0; padding:0; border:0; background:transparent; display:grid; place-items:center; }
  body.in-game .star-panel .live-star { font-size:1rem; }
  body.in-game .star-rules-button { display:block; position:absolute; right:3px; top:3px; bottom:3px; width:27px; padding:0; border:1px solid #3d6d91; border-radius:7px; background:#14334e; color:#dff5ff; font-size:.42rem; writing-mode:vertical-rl; transform:rotate(180deg); }
}
@media (max-width: 430px) {
  body.in-game .icon-button { width:34px; height:34px; }
  body.in-game .brand-mark { width:30px; height:30px; }
  body.in-game .wallet > span { font-size:.75rem; }
  body.in-game .game-layout { grid-template-rows:minmax(0,1fr) 70px; }
  body.in-game .hud-column, body.in-game .hud-column .panel { height:70px; }
  body.in-game .terminal-scene { border-radius:10px; }
  body.in-game .loading-concourse { grid-template-rows:16px minmax(0,.45fr) minmax(0,1fr); }
  body.in-game .passenger-concourse { grid-template-rows:minmax(0,1fr) 58px; }
  .ambient-passenger { width:15px; height:30px; }
  .boarding-circuit { border-width:8px; }
  body.in-game .reserve-crowd .passenger.tiny { width:10px; height:20px; }
}

/* Short, wide browser windows (screen recordings, split-screen tablets and
   mobile landscape) still reserve real height for the moving crowd. */
@media (min-width: 600px) and (max-width: 900px) and (max-height: 800px) {
  body.in-game .terminal-scene { grid-template-rows: minmax(0,.78fr) minmax(0,1.22fr); }
  body.in-game .loading-concourse { grid-template-rows: 16px minmax(30px,.30fr) minmax(0,1.70fr); }
  body.in-game .passenger-concourse { grid-template-rows: minmax(0,1fr) 57px; }
  body.in-game .active-platform { padding-top: 29px; }
  body.in-game .bay-apron .bay-grid { padding-top: 5px; }
  body.in-game .waiting-bay { padding: 2px; }
  .boarding-circuit { top: 37px; bottom: 4px; }
}

/* Keep the crowd visually dense on tablets and desktop without sacrificing the
   tighter phone layout. */
@media (min-width: 601px) {
  body.in-game .ambient-passenger { width: 26px; height: 50px; }
}

/* The reference gesture uses one physical exit on the right edge of the moving
   crowd. Everyone reaches this gate on the clockwise circuit, then walks up to
   the single curbside sidewalk and branches only after leaving the gate. */
.shared-boarding-gate {
  left: auto;
  right: 2px;
  top: 54%;
  width: 34px;
  height: 62px;
  transform: translateY(-50%);
  border: 3px solid #f8ed74;
  border-right: 0;
  border-bottom: 3px solid #f8ed74;
  border-radius: 13px 0 0 13px;
  grid-template-rows: 1fr auto;
}
.shared-boarding-gate::before {
  content:"";
  position:absolute;
  right:-3px;
  top:7px;
  bottom:7px;
  width:7px;
  border-radius:5px 0 0 5px;
  background:#081923;
}
.shared-boarding-gate::after {
  left: 7px;
  top: -30px;
  width: 20px;
  height: 32px;
  transform: none;
  clip-path: polygon(0 0,100% 0,76% 100%,24% 100%);
}
.shared-boarding-gate i { width: 4px; height: 30px; }
.shared-boarding-gate b { writing-mode: vertical-rl; transform: rotate(180deg); line-height:1; }
@media (max-width:900px) {
  .shared-boarding-gate { right:1px; top:55%; width:29px; height:52px; transform:translateY(-50%); }
  .shared-boarding-gate::after { top:-24px; height:27px; width:17px; left:6px; }
  .shared-boarding-gate i { height:24px; }
}

/* 2.6.0 interaction hardening: exit labels are scenery, never hit targets. */
.exit-marker { pointer-events: none !important; user-select: none; }

/* Respect the home indicator while keeping the entire game inside the visual viewport. */
body.in-game .screen { padding-bottom: max(4px, env(safe-area-inset-bottom)); }

/* Native game HUD cleanup: the physical bay and platform markings already name
   these spaces. Remove floating dashboard cards that covered vehicles/people on
   phone and tablet layouts, while keeping all counts available to assistive
   technology and in the rules/status surfaces. */
@media (max-width: 900px) {
  body.in-game .bay-status-sign,
  body.in-game .platform-sign { display: none !important; }
  body.in-game .reserve-sign {
    top: 2px;
    left: 5px;
    min-height: 16px;
    padding: 1px 5px;
    gap: 5px;
    transform: none;
    border-radius: 5px;
    box-shadow: none;
  }
  body.in-game .reserve-sign .eyebrow { display: none; }
  body.in-game .reserve-sign h2 { font-size: .46rem; letter-spacing: .03em; }
  body.in-game .reserve-sign > strong { font-size: .48rem; }
  body.in-game .bay-apron .bay-grid { padding-top: 4px; }
}