#loading[data-launch="trains"] {
  overflow: hidden;
  background: #a8c9a1;
}
#loading[data-home][data-launch="trains"] .loading-card { padding: 0; }
#loading[data-launch="trains"] :is(.loading-heading, .loading-art-frame) { display: none; }

#launch-trains:not([hidden]), .depot-viewport, .depot-picture,
.depot-fallback, .depot-markers, .depot-picture canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.depot-viewport { overflow: hidden; background: #a8c9a1; }
.depot-picture { touch-action: pan-y; }
[data-webgl] .depot-fallback { display: none; }
.depot-art, .depot-bridge, .depot-sprite, .depot-smoke, .depot-marker, .depot-train {
  position: absolute;
  translate: -50% -50%;
}
.depot-art {
  background: center / 100% 100% no-repeat url('./roundhouse-yard.webp');
}
[data-section="-1"] .depot-art { background-image: url('./roundhouse-yard-left.webp'); }
[data-section="1"] .depot-art { background-image: url('./roundhouse-yard-right.webp'); }
.depot-blank {
  position: absolute;
  inset: 0;
  background: center / 100% 100% no-repeat url('./roundhouse-blank.webp');
}
[data-section="-1"] .depot-blank { background-image: url('./roundhouse-blank-left.webp'); }
[data-section="1"] .depot-blank { background-image: url('./roundhouse-blank-right.webp'); }

.depot-toolbar {
  position: absolute;
  z-index: 2;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  align-items: start;
  gap: clamp(6px, 1.35vw, 14px);
  color: #fff8e5;
  pointer-events: none;
}
.depot-toolbar :is(a, button) { pointer-events: auto; }
.depot-home { display: grid; flex: none; place-items: center; width: 48px; }
.depot-title {
  padding: 5px 10px 6px;
  border: 2px solid #ffebbd;
  border-radius: 12px 8px 11px 9px;
  background: #29483f;
  box-shadow: 0 3px #29483f55;
}
.depot-title h2 { margin: 0; font-size: clamp(15px, 2.15vw, 24px); line-height: 1.2; }
.depot-title h2:focus { outline: none; }
.depot-title p { margin: 3px 0 0; font-size: clamp(11px, 1.4vw, 15px); line-height: 1.2; }
.depot-browse { display: flex; align-items: center; gap: clamp(4px, 1vw, 9px); margin-inline-start: auto; }
.depot-browse .kid-key { --art-size: 34px; width: 50px; padding: 0; }
.depot-dots { display: flex; gap: 4px; padding: 5px; border-radius: 20px; background: #29483f; }
.depot-dot { width: 7px; height: 7px; border: 1px solid #ffebbd; border-radius: 50%; }
.depot-dot[data-current] { background: #ffd66d; }
[data-dispatching] .depot-browse { visibility: hidden; }

#depot-confirm {
  width: min(86vw, 390px); max-height: calc(100% - 24px); box-sizing: border-box;
  padding: clamp(12px, 3vw, 23px);
  border: 3px solid #365447; border-radius: 25px 21px 24px 18px;
  background: #fff5d9; color: #29453c; box-shadow: 0 6px 0 #233a32, 0 18px 40px #1d362766;
  text-align: center;
}
#depot-confirm::backdrop { background: #1c382fb0; }
#depot-confirm h2 { margin: 0; font-size: clamp(22px, 5vw, 30px); }
#depot-confirm img {
  display: block; width: 100%; height: clamp(100px, 26vh, 166px); object-fit: contain;
  border-radius: 45% 42% 50% 38%; background: radial-gradient(ellipse, #e2edc6 43%, transparent 69%);
}
#depot-confirm img[hidden] { display: none; }
#depot-confirm-note { margin: 12px 0; font-weight: 750; }
.depot-confirm-actions { display: flex; gap: 12px; }
#depot-confirm .kid-key { --art-size: 34px; flex: 1; min-height: 54px; font-size: 18px; }
#depot-confirm-go { --kid-paper: #ccecb5; }

.depot-markers { z-index: 1; pointer-events: none; }
.depot-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  min-height: 1.46em;
  padding: 2px .34em;
  white-space: nowrap;
  background: #263e3b;
  border: 1px solid #f2dbad;
  color: #fff3d9;
  font: 850 clamp(9px, 1.25vw, 16px) / 1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  border-radius: 2px;
  box-shadow: 0 1px 1px #302a2a80;
}
.depot-marker[data-occupied] { color: #ffdf88; }
.depot-marker[data-selected] {
  background: var(--ui-selection-fill);
  border-color: var(--ui-selection-edge);
  color: var(--ui-selection-ink);
}
.depot-marker[data-offscreen], .depot-marker[hidden], .depot-train[hidden] { display: none; }
.depot-train {
  pointer-events: auto;
  padding: 0;
  border: 2px solid transparent;
  box-shadow: none;
  border-radius: 13px 10px 14px 11px;
  background: transparent;
  cursor: pointer;
}
.depot-train[aria-pressed="true"], .depot-train:focus-visible {
  border-color: var(--ui-selection-edge);
  outline: 2px solid var(--ui-selection-fill);
  outline-offset: -4px;
}
.depot-train:disabled { visibility: hidden; }
@media (hover: hover) {
  .depot-train:not(:disabled):hover {
    border-color: var(--ui-selection-edge);
    background: color-mix(in srgb, var(--ui-selection-fill) 20%, transparent);
  }
}
.depot-bridge {
  background: repeating-linear-gradient(90deg, #89684d 0 8%, #ce9f73 8% 11%);
  border-block: clamp(1px, .35vw, 5px) solid #b95843;
  box-shadow: 0 0 0 1px #435953, 0 2px 1px #51413270;
  pointer-events: none;
}
.depot-bridge::after {
  content: '';
  position: absolute;
  inset: 16% 0;
  border-block: max(1px, .15vw) solid #dfd9bf;
}
.depot-sprite {
  display: none;
  pointer-events: none;
  background: var(--depot-head) center / contain no-repeat;
}
.depot-sprite[data-model="classic"] { --depot-head: url('./roundhouse-head-classic.webp'); }
.depot-sprite[data-model="puyuma"] { --depot-head: url('./roundhouse-head-puyuma.webp'); }
.depot-sprite[data-model="emu3000"] { --depot-head: url('./roundhouse-head-emu3000.webp'); }
.depot-sprite[data-model="chukuang"] { --depot-head: url('./roundhouse-head-chukuang.webp'); }
.depot-sprite[data-model="emu400"] { --depot-head: url('./roundhouse-head-emu400.webp'); }
.depot-sprite[data-model="emu900"] { --depot-head: url('./roundhouse-head-emu900.webp'); }
.depot-sprite[data-model="mingri"] { --depot-head: url('./roundhouse-head-mingri.webp'); }
.depot-sprite[data-model="taroko"] { --depot-head: url('./roundhouse-head-taroko.webp'); }
.depot-sprite[data-model="n700st"] { --depot-head: url('./roundhouse-head-n700st.webp'); }
.depot-sprite[data-model="e1000"] { --depot-head: url('./roundhouse-head-e1000.webp'); }
.depot-sprite[data-model="emu700"] { --depot-head: url('./roundhouse-head-emu700.webp'); }
.depot-sprite[data-model="emu800"] { --depot-head: url('./roundhouse-head-emu800.webp'); }
.depot-sprite[data-model="haifeng"] { --depot-head: url('./roundhouse-head-haifeng.webp'); }
.depot-sprite[data-model="shanlan"] { --depot-head: url('./roundhouse-head-shanlan.webp'); }
.depot-sprite[data-model="ct273"] { --depot-head: url('./roundhouse-head-ct273.webp'); }
.depot-sprite[data-model="dr1000"] { --depot-head: url('./roundhouse-head-dr1000.webp'); }
.depot-sprite[data-model="breezyblue"] { --depot-head: url('./roundhouse-head-breezyblue.webp'); }
.depot-sprite[data-model="emu100"] { --depot-head: url('./roundhouse-head-emu100.webp'); }
.depot-sprite[data-model="emu1200"] { --depot-head: url('./roundhouse-head-emu1200.webp'); }
.depot-sprite[data-model="dr2700"] { --depot-head: url('./roundhouse-head-dr2700.webp'); }
.depot-sprite[data-moving] { display: block; }

.depot-shutter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  transform-origin: 0 0;
  pointer-events: none;
  background:
    linear-gradient(#bbc3b3, #bbc3b3) center 88% / 17% 4% no-repeat,
    repeating-linear-gradient(#687c7e 0 4%, #9eada6 4% 5.5%, #465b5f 5.5% 7.2%);
}

.depot-smoke { pointer-events: none; }
.depot-smoke > span {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 43% 49%, #f2f3ebbf 8%, #c4c9c4a0 31%, transparent 70%);
  animation: depot-smoke-puff 1.28s ease-out infinite;
}
.depot-smoke > :nth-child(2) { animation-delay: -.42s; }
.depot-smoke > :nth-child(3) { animation-delay: -.85s; }
@keyframes depot-smoke-puff {
  0% { opacity: .67; transform: scale(.67); }
  40% { opacity: .65; }
  100% { opacity: 0; transform: translate(62%, -208%) scale(2.4); }
}