/* Pixel-Lok: the Reise (window and line), the depot section with its picker and the route map. */

/* Canvas: drawn at whole pixels per sprite pixel, never smoothed. */
.uhrschnell-page .us-lok-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* The Reise: a window onto the line at a fixed pixel scale and the line below it (js/vienna-stage.js).
   --lok-s is css px per sprite px: 2 while the Reise is narrower than 600px, 3 from there. The window is
   64 sprite px tall; wider means more of the world, never smaller pixels. */
.uhrschnell-page .us-reise {
  container: reise / inline-size;
  min-width: 0;
  background: var(--surface-card);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--pixel-shadow);
}
.uhrschnell-page .us-reise-window, .uhrschnell-page .us-reise-line { --lok-s: 2; }
@container reise (min-width: 600px) {
  .uhrschnell-page .us-reise-window, .uhrschnell-page .us-reise-line { --lok-s: 3; }
}
.uhrschnell-page .us-reise-window {
  position: relative;
  box-sizing: content-box;
  height: calc(64px * var(--lok-s));
  overflow: hidden;
  background: #8CC7F5;
  border-bottom: 3px solid var(--ink);
}
:root[data-theme="dark"] .uhrschnell-page .us-reise-window { background: #121738; }

/* Sign boards above the posts: the stop name in Uhrschnell Pixel at 8px × scale, 13 sprite px tall, as wide
   as the name. Placed per step by translate; the chosen stop in signal yellow. */
.uhrschnell-page .us-reise-signs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.uhrschnell-page .us-reise-window[data-blink] .us-reise-signs { visibility: hidden; }
.uhrschnell-page .us-lok-sign {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: calc(13px * max(2, var(--lok-s)));
  margin: 0;
  padding: 0 calc(3px * max(2, var(--lok-s))) 0;
  background: var(--parchment);
  color: var(--ink);
  border: calc(1px * max(2, var(--lok-s))) solid var(--ink);
  font: 500 calc(8px * max(2, var(--lok-s)))/1 var(--font-pixel);
  white-space: nowrap;
  pointer-events: none;
}
.uhrschnell-page .us-stop { top: calc(4px * var(--lok-s)); cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.uhrschnell-page .us-stop[aria-pressed="true"] { background: #ffd24a; }

/* The line: trip status, six landmark stops on one rail with the mini loco, the search tile. On S at most
   108px tall including its edges (the device reserves that room, simulator.css). */
.uhrschnell-page .us-reise-line { display: grid; gap: 6px; padding: 6px; }
.uhrschnell-page .us-reise-status { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .625rem; min-height: 20px; margin: 0; color: var(--text); }
.uhrschnell-page .us-reise-status-name { font: 500 calc(8px * var(--lok-s))/1.25 var(--font-pixel); }
.uhrschnell-page .us-reise-status-name:empty { display: none; }
.uhrschnell-page .us-reise-status-text { font: 750 var(--fs-small)/1.4 var(--font-ui); color: var(--text-secondary); }
.uhrschnell-page .us-reise-stops { position: relative; display: flex; gap: 2px; }
.uhrschnell-page .us-reise-stations { display: contents; }
.uhrschnell-page .us-reise-stop {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.uhrschnell-page .us-reise-tile {
  display: grid;
  place-items: center;
  width: min(100%, 44px);
  aspect-ratio: 1;
  background: var(--surface-card);
  color: var(--text);
  border: 2px solid var(--control-border);
}
.uhrschnell-page .us-reise-tile .us-glyph { width: 32px; height: 32px; }
.uhrschnell-page .us-reise-stop:hover .us-reise-tile { background: var(--surface-subtle); }
.uhrschnell-page .us-reise-stop[aria-pressed="true"] .us-reise-tile { background: var(--text); color: var(--surface-card); border-color: var(--text); }
.uhrschnell-page .us-reise-stop:focus-visible { outline: none; }
.uhrschnell-page .us-reise-stop:focus-visible .us-reise-tile { outline: 3px solid var(--focus); outline-offset: 2px; }
/* While the loco drives there, the target blinks in held steps (still under reduced motion). */
.uhrschnell-page .us-reise-stop.is-target .us-reise-tile { animation: us-reise-blink .5s steps(1, end) infinite; }
@keyframes us-reise-blink { 50% { border-color: #ffd24a; box-shadow: 0 0 0 2px #ffd24a; } }
.uhrschnell-page .us-reise-dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin: 6px 0 2px;
  background: var(--surface-card);
  border: 2px solid var(--text);
}
.uhrschnell-page .us-reise-stop[aria-pressed="true"] .us-reise-dot { background: var(--text); }
/* The search tile stands apart: narrower on S, dashed, without a dot on the rail. */
.uhrschnell-page .us-reise-stop.is-search { flex: 0 0 auto; padding-left: 2px; border-left: 2px dashed var(--separator); }
.uhrschnell-page .us-reise-stop.is-search .us-reise-tile { width: 36px; border-style: dashed; }
.uhrschnell-page .us-reise-stop.is-search .us-reise-dot { visibility: hidden; }
/* Names under the tiles from 600px (at most two lines, breaking only at the soft hyphen), from 960px the landmark too. */
.uhrschnell-page :is(.us-reise-name, .us-reise-landmark) { display: none; }
.uhrschnell-page .us-reise-rail, .uhrschnell-page .us-reise-fill { position: absolute; z-index: 0; top: calc(var(--rail-y, 0px) - 2px); height: 4px; pointer-events: none; }
.uhrschnell-page .us-reise-rail { left: var(--rail-left, 0px); width: var(--rail-width, 0px); background: var(--text); }
.uhrschnell-page .us-reise-fill { background: #ffd24a; }
.uhrschnell-page .us-reise-fill[hidden] { display: none; }
.uhrschnell-page .us-reise-mini {
  position: absolute;
  z-index: 2;
  left: 0;
  top: calc(var(--rail-y, 0px) - 12px);
  width: 18px;
  height: 10px;
  shape-rendering: crispEdges;
  pointer-events: none;
}
/* At night the mini loco's ink parts (roof, chimney, buffer, wheels) would vanish on the dark card: they turn
   steel grey and the body a brighter red, here and on the Streckenplan. The day look stays as drawn. */
:root[data-theme="dark"] .uhrschnell-page :is(.us-reise-mini, .us-ladder-mini) .us-mini-ink { fill: #8ea3b6; }
:root[data-theme="dark"] .uhrschnell-page :is(.us-reise-mini, .us-ladder-mini) .us-mini-body { fill: #e8463f; }
@container reise (min-width: 600px) {
  .uhrschnell-page .us-reise-line { gap: 10px; padding: 12px 16px 16px; }
  .uhrschnell-page .us-reise-stops { gap: 8px; }
  .uhrschnell-page .us-reise-tile { width: 48px; }
  .uhrschnell-page .us-reise-dot { margin-top: 14px; }
  .uhrschnell-page .us-reise-mini { top: calc(var(--rail-y, 0px) - 22px); width: 36px; height: 20px; }
  .uhrschnell-page .us-reise-stop.is-search { flex: 1 1 0; padding-left: 8px; }
  .uhrschnell-page .us-reise-stop.is-search .us-reise-tile { width: 48px; }
  .uhrschnell-page .us-reise-name { display: block; max-width: 100%; margin-top: 2px; font: 750 var(--fs-small)/1.25 var(--font-ui); text-align: center; hyphens: manual; overflow-wrap: normal; word-break: normal; }
}
@container reise (min-width: 960px) {
  .uhrschnell-page .us-reise-landmark { display: block; max-width: 100%; margin-top: 2px; font: 400 var(--fs-small)/1.3 var(--font-ui); color: var(--text-secondary); text-align: center; }
}
/* S: the window scrolls away under the header, the line stays right below it while the device is read and
   leaves with the end of the stage (the sticky box is the Reise; its window hides behind the header). */
@media (max-width: 639px) {
  .uhrschnell-page .us-reise { position: sticky; top: calc(var(--navigation-height, 64px) - 131px); z-index: 13; }
}

/* Hit area over the drawn train: no fill of its own, a visible focus ring. */
.uhrschnell-page .us-lok-tap {
  position: absolute;
  z-index: 3;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.uhrschnell-page .us-lok-tap[hidden] { display: none; }
.uhrschnell-page .us-lok-tap:focus-visible { outline: 3px solid var(--parchment); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }

/* Depot section (head: the shared .section-head; spacing in uhrschnell.css) */
.uhrschnell-page .us-depot h3 { margin: 0 0 .75rem; font: 750 var(--fs-h3)/1.3 var(--font-ui); letter-spacing: -.02em; color: var(--text); }

/* The depot stage: the Reise's window with a fixed camera (js/lok.js, layout 'depot'), 64 sprite px tall at
   --lok-s 2 (128px) and 3 (192px) once the depot is 900px wide; the longest train (two coaches behind the
   E-Lok, 212 sprite px) then still stands beside the entry tunnel. The "Lok-Depot" sign is an HTML board. On S
   the stage stays under the header while the visitor picks (sticky within the depot yard). */
.uhrschnell-page .us-depot-yard { container: depot / inline-size; }
.uhrschnell-page .us-depot-stage {
  --lok-s: 2;
  position: relative;
  box-sizing: content-box;
  height: calc(64px * var(--lok-s));
  overflow: hidden;
  background: #8CC7F5;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--pixel-shadow);
}
@container depot (min-width: 900px) {
  .uhrschnell-page .us-depot-stage { --lok-s: 3; }
}
:root[data-theme="dark"] .uhrschnell-page .us-depot-stage { background: #121738; }
.uhrschnell-page .us-depot-stage .us-lok-sign { z-index: 2; }
.uhrschnell-page .us-depot-hint {
  position: absolute;
  z-index: 2;
  top: .5rem;
  left: .5rem;
  padding: .3rem .6rem;
  background: var(--parchment);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  font: 750 var(--fs-small)/1.25 var(--font-ui);
  pointer-events: none;
}
.uhrschnell-page .us-depot-hint:empty { display: none; }
/* The hint stands over the entry tunnel's hill, clear of the sign and of the moon at night. A narrow window has
   no tunnel and no free sky beside the sign and the loco: the hint stays away (the train still whistles). */
@container depot (max-width: 599px) {
  .uhrschnell-page .us-depot-hint { display: none; }
}

/* Picker: one shelf per choice (Lok, Lackierung, Wagen, Verzierung), chips with the app's sprite as preview.
   M and L: 2 × 2 shelves with wrapping chips. S: each shelf is a rail that swipes sideways, snaps to a chip and
   runs to the screen edge, so the next chip shows cut off. */
.uhrschnell-page .us-depot-picker { display: grid; gap: 1rem 2rem; margin-top: 1.25rem; }
.uhrschnell-page .us-depot-group { min-width: 0; }
.uhrschnell-page .us-depot-label { display: block; margin-bottom: .5rem; font: 750 var(--fs-body)/1.4 var(--font-ui); color: var(--text); }
.uhrschnell-page .us-depot-chips { display: flex; flex-wrap: wrap; gap: .75rem; }
.uhrschnell-page .us-depot-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .5rem .85rem .5rem .6rem;
  background: var(--surface-card);
  color: var(--text);
  border: 1.5px solid var(--control-border);
  box-shadow: 4px 4px 0 var(--pixel-shadow);
  font: 650 var(--fs-small)/1.3 var(--font-ui);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .16s ease-out, background-color .16s ease-out;
}
.uhrschnell-page .us-depot-chip:hover { background: var(--surface-subtle); transform: translate(-1px, -1px); }
.uhrschnell-page .us-depot-chip[aria-checked="true"], .uhrschnell-page .us-depot-chip[aria-pressed="true"] { background: var(--action); color: var(--on-action); border-color: var(--action); }
.uhrschnell-page .us-depot-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.uhrschnell-page .us-depot-preview-slot { display: flex; align-items: flex-end; min-width: 0; }
.uhrschnell-page .us-depot-preview-slot:empty { display: none; }
.uhrschnell-page .us-depot-preview {
  display: block;
  height: 40px;
  background-repeat: no-repeat;
  background-position: 0 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex: none;
}
.uhrschnell-page .us-depot-note { margin: 1.25rem 0 0; max-width: 60ch; font-size: var(--fs-small); line-height: 1.6; color: var(--text-secondary); }
@media (min-width: 640px) {
  .uhrschnell-page .us-depot-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 1.5rem; }
  /* M: the half-width shelves take two or three chips per row with the sprite above the name. */
  @container depot (max-width: 899px) {
    .uhrschnell-page .us-depot-chip { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .35rem; padding: .55rem .7rem .6rem; }
  }
}
@media (max-width: 639px) {
  .uhrschnell-page .us-depot-stage { position: sticky; top: var(--navigation-height, 64px); z-index: 12; }
  .uhrschnell-page .us-depot-chips {
    flex-wrap: nowrap;
    gap: .625rem;
    margin-right: calc(-1 * var(--layout-gutter));
    padding: 0 var(--layout-gutter) 8px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .uhrschnell-page .us-depot-chips::-webkit-scrollbar { display: none; }
  .uhrschnell-page .us-depot-chip { scroll-snap-align: start; }
  /* A chip reached by keyboard scrolls into view below the stuck stage, not behind it. */
  .uhrschnell-page .us-depot-chip { scroll-margin-top: calc(var(--navigation-height, 64px) + 128px + 6px + 1rem); }
}

/* Route map: the 25 levels as a line like the Reise's (one rail, a dot per level, the level sign above in
   Uhrschnell Pixel 16px, the unlock below in Manrope 14px), scrolled sideways with snapping. The unlocks keep
   the app's full wording: a stop is 160px wide, so they take at most three lines.
   The main line runs solid up to level 20, the extension 21–25 dashed; level 20, the engine the website shows,
   keeps its inverted sign, the mini loco on the rail and its flag. */
.uhrschnell-page .us-ladder-wrap { margin-top: 2rem; }
.uhrschnell-page .us-ladder-intro { margin: 0 0 1rem; max-width: 60ch; font-size: var(--fs-small); line-height: 1.6; color: var(--text-secondary); }
.uhrschnell-page .us-ladder-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  background: var(--surface-card);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--pixel-shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--control-border) var(--surface-subtle);
}
.uhrschnell-page .us-ladder-scroll::-webkit-scrollbar { height: 10px; }
.uhrschnell-page .us-ladder-scroll::-webkit-scrollbar-track { background: var(--surface-subtle); }
.uhrschnell-page .us-ladder-scroll::-webkit-scrollbar-thumb { background: var(--control-border); border: 2px solid var(--surface-subtle); }
.uhrschnell-page .us-ladder-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.uhrschnell-page .us-ladder {
  --ladder-sign: 32px;   /* sign height */
  --ladder-gap: 24px;    /* sign to rail: the post, and room for the mini loco */
  --ladder-rail: calc(var(--ladder-sign) + var(--ladder-gap) + 5px);
  display: flex;
  width: max-content;
  margin: 0;
  padding: 12px 0 14px;
  list-style: none;
}
.uhrschnell-page .us-ladder-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 160px;
  scroll-snap-align: center;
  text-align: center;
}
/* The rail: each stop carries its share of it, from the middle of the gap before it to the middle of the gap
   after it, so the rail runs on unbroken; it begins and ends at the outer dots. */
.uhrschnell-page .us-ladder-stop::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--ladder-rail) - 2px);
  left: 0;
  right: 0;
  height: 4px;
  background: var(--text);
}
.uhrschnell-page .us-ladder-stop:first-child::before { left: 50%; }
.uhrschnell-page .us-ladder-stop:last-child::before { right: 50%; }
.uhrschnell-page .us-ladder-stop.is-extension::before { background: repeating-linear-gradient(90deg, var(--text) 0 10px, transparent 10px 17px); }
.uhrschnell-page .us-ladder-stop.is-website::before { right: 50%; }
.uhrschnell-page .us-ladder-stop.is-website::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--ladder-rail) - 2px);
  left: 50%;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--text) 0 10px, transparent 10px 17px);
}
.uhrschnell-page .us-ladder-sign {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 3.5rem;
  height: var(--ladder-sign);
  padding: 0 .55rem;
  background: var(--parchment);
  color: var(--ink);
  border: 2px solid var(--ink);
  font: 500 var(--fs-tag)/1 var(--font-pixel);
  letter-spacing: .03em;
  white-space: nowrap;
}
.uhrschnell-page .us-ladder-stop.is-extension .us-ladder-sign { border-style: dashed; }
.uhrschnell-page .us-ladder-stop.is-website .us-ladder-sign { background: var(--ink); color: var(--parchment); box-shadow: 3px 3px 0 #ffd24a; }
/* At night the inverted ink sign would sink into the dark card: it turns signal amber under ink lettering with a
   parchment offset, the brightest sign on the line. The day look stays as drawn. */
:root[data-theme="dark"] .uhrschnell-page .us-ladder-stop.is-website .us-ladder-sign { background: #ffd24a; color: var(--ink); box-shadow: 3px 3px 0 var(--parchment); }
/* The post from the sign down to the rail. */
.uhrschnell-page .us-ladder-sign::after { content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: var(--ladder-gap); background: var(--text); transform: translateX(-50%); }
.uhrschnell-page .us-ladder-dot {
  position: relative;
  z-index: 1;
  flex: none;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  margin-top: var(--ladder-gap);
  background: var(--surface-card);
  border: 2px solid var(--text);
}
.uhrschnell-page .us-ladder-stop.is-website .us-ladder-dot { background: #ffd24a; border-color: var(--ink); }
.uhrschnell-page .us-ladder-mini {
  position: absolute;
  z-index: 2;
  top: calc(var(--ladder-rail) - 22px);
  left: calc(50% - 46px);
  width: 36px;
  height: 20px;
  shape-rendering: crispEdges;
}
.uhrschnell-page .us-ladder-name {
  display: block;
  max-width: calc(100% - 16px);
  margin-top: 8px;
  font: 650 var(--fs-small)/1.35 var(--font-ui);
  color: var(--text);
  hyphens: manual;
  overflow-wrap: normal;
}
.uhrschnell-page .us-ladder-stop.is-extension .us-ladder-name { color: var(--text-secondary); }
.uhrschnell-page .us-ladder-flag { display: block; margin-top: .35rem; padding: .15rem .45rem; background: var(--surface-subtle); color: var(--text); font: 750 var(--fs-small)/1.3 var(--font-ui); }

@media (min-width: 1024px) {
  .uhrschnell-page .us-ladder-wrap { margin-top: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .uhrschnell-page .us-reise-stop.is-target .us-reise-tile { animation: none; border-color: #ffd24a; box-shadow: 0 0 0 2px #ffd24a; }
  .uhrschnell-page .us-depot-chip { transition: none; }
  .uhrschnell-page .us-depot-chip:hover { transform: none; }
  .uhrschnell-page .us-ladder-scroll { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .uhrschnell-page .us-depot-chip, .uhrschnell-page .us-depot-stage, .uhrschnell-page .us-depot-hint, .uhrschnell-page .us-ladder-sign, .uhrschnell-page .us-ladder-scroll { box-shadow: none; border-color: ButtonText; }
  .uhrschnell-page .us-lok-tap:focus-visible { outline-color: Highlight; box-shadow: none; }
  .uhrschnell-page .us-reise, .uhrschnell-page .us-lok-sign { box-shadow: none; }
  .uhrschnell-page .us-reise-stop[aria-pressed="true"] .us-reise-tile { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}