:root {
    --panel: rgba(30, 24, 17, 0.6);
    --line: rgba(242, 230, 200, 0.18);
    --cream: #f2e6c8;
    --muted: #cbbb96;
    --amber: #eba94f;
    --ink: #1f1911;
    --sky: #e9c49a;
    color-scheme: dark;
  }
  html, body { height: 100%; margin: 0; overflow: hidden; background: var(--sky); }
  [hidden] { display: none !important; }
  body { font: 400 14px/1.4 "Barlow", system-ui, sans-serif; color: var(--cream); }
  canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
  canvas#scene:active { cursor: grabbing; }

  .panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
  }

  .plate {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top, 0px));
    left: 16px;
    padding: 12px 16px 12px;
    display: grid;
    gap: 2px;
    pointer-events: none;
  }
  .eyebrow {
    font: 600 12px/1 "Barlow Condensed", "Arial Narrow", sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  #plateEyebrow { font-variant-numeric: tabular-nums; }   /* (the km digits keep one width: the plate no longer resizes with them — owner 2026-10-27) */
  .plate h1 {
    margin: 0;
    font: 700 56px/0.95 "Barlow Condensed", "Arial Narrow", sans-serif;
    letter-spacing: 0.01em;
    color: var(--cream);
  }
  .plate h1 span { color: var(--amber); }
  .specs { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 6px 0 0; padding: 0; list-style: none; font: 500 13px/1.3 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.04em; color: var(--muted); }
  .specs b { font-weight: 600; color: var(--cream); }

  .hint {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: 16px;
    white-space: nowrap;
    text-align: right;
    font: 500 13px/1.35 "Barlow Condensed", "Arial Narrow", sans-serif;
    letter-spacing: 0.04em;
    color: var(--ink);
    opacity: 0.72;
    pointer-events: none;
  }
  .hint kbd { font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; padding: 2px 5px; border: 1px solid rgba(31, 25, 17, 0.35); border-radius: 4px; }

  .controls {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 32px);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    padding: 10px 12px;
  }
  .speed { display: flex; align-items: center; gap: 10px; }
  .speed label { font: 600 13px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .speed input { width: 150px; accent-color: var(--amber); cursor: pointer; }
  .readout { font: 500 15px/1 "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; min-width: 8ch; text-align: right; color: var(--cream); }
  .readout small { font-size: 11px; color: var(--muted); }
  /* the line-speed limit beside the speed (runs.js lineLimit): plain within it, blinking yellow a little over, red more */
  .vlim { display: grid; gap: 2px; justify-items: start; min-width: 9ch; }
  .vlimnow { font: 500 15px/1 "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--cream); padding: 3px 6px; margin: -3px 0; border: 1px solid var(--line); border-radius: 5px; }
  .vlimnow small { font: 600 11px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .vlimnow b { font-weight: 500; }
  .vlimnext { font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
  .vlimnext:empty { display: none; }
  .vlim.over1 .vlimnow { animation: vlimYellow 1s steps(1, end) infinite; }
  .vlim.over2 .vlimnow { animation: vlimRed 0.5s steps(1, end) infinite; }
  .vlim.over1 .vlimnow, .vlim.over2 .vlimnow { color: var(--ink); }
  .vlim.over1 .vlimnow small, .vlim.over2 .vlimnow small { color: inherit; }
  @keyframes vlimYellow { 0% { background: #f2c230; border-color: #f2c230; } 50% { background: transparent; border-color: #f2c230; color: #f2c230; } }
  @keyframes vlimRed { 0% { background: #e0402c; border-color: #e0402c; color: #fff4e8; } 50% { background: transparent; border-color: #e0402c; color: #ff7a5c; } }
  @media (prefers-reduced-motion: reduce) {
    .vlim.over1 .vlimnow { animation: none; background: #f2c230; border-color: #f2c230; }
    .vlim.over2 .vlimnow { animation: none; background: #e0402c; border-color: #e0402c; color: #fff4e8; }
  }
  .sep { width: 1px; align-self: stretch; background: var(--line); }
  .btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
  .seg { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; }
  .sheetroute { margin-top: 12px; }
  .sheetroute .eyebrow { margin-bottom: 6px; }
  .sheet .seg button, .startscreen .seg button { flex: 1 1 0; border-color: transparent; background: transparent; padding: 8px 6px; }
  .sheet .seg button[aria-pressed="true"], .startscreen .seg button[aria-pressed="true"] { background: var(--amber); }
  /* the route dropdown (start card, train sheet; startscreen.js): a row showing the route, a list of the routes opening
     under it (in place, so it fits a phone's bottom box too) */
  .routepick { display: grid; gap: 4px; }
  .sheet .routebtn, .startscreen .routebtn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; text-align: left; }
  .routebtn b { flex: 1; font-weight: 600; text-transform: none; letter-spacing: 0.02em; font-size: 15px; }
  .routebtn i { width: 9px; height: 9px; margin: -4px 4px 0; border: solid var(--amber); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.15s; }
  .routebtn[aria-expanded="true"] i { margin-top: 4px; transform: rotate(225deg); }
  .sheet .routebtn[aria-expanded="true"], .startscreen .routebtn[aria-expanded="true"] { background: rgba(242, 230, 200, 0.16); color: var(--cream); border-color: var(--line); }
  .routelist { display: grid; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; }
  .routelist[hidden] { display: none; }
  .sheet .routelist button, .startscreen .routelist button {
    min-height: 44px; text-align: left; border-color: transparent; background: transparent; text-transform: none; letter-spacing: 0.03em; font-size: 15px;
  }
  .sheet .routelist button[aria-selected="true"], .startscreen .routelist button[aria-selected="true"] { background: var(--amber); color: var(--ink); }
  body[data-tod="noc"] .hint { color: var(--cream); }
  body[data-tod="noc"] .hint kbd { border-color: rgba(242, 230, 200, 0.35); }
  .controls button, .sheet button, .startscreen button, .mapchip {
    font: 600 14px/1 "Barlow Condensed", "Arial Narrow", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cream);
    background: rgba(242, 230, 200, 0.08);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .controls button:hover, .sheet button:hover, .startscreen button:hover, .mapchip:hover { background: rgba(242, 230, 200, 0.16); }
  .controls button[aria-pressed="true"], .sheet button[aria-pressed="true"], .startscreen button[aria-pressed="true"], .mapchip[aria-pressed="true"],
  .controls button[aria-expanded="true"] { background: var(--amber); color: var(--ink); border-color: var(--amber); }
  .controls button:focus-visible, .speed input:focus-visible, .sheet button:focus-visible, .startscreen button:focus-visible, .mapchip:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

  /* left column under the title plate: camera readout, then the F stats (they stack instead of overlapping) */
  .leftcol { position: fixed; left: 16px; top: calc(150px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; z-index: 5; }
  .stats {
    padding: 8px 12px; pointer-events: none;
    font: 500 12px/1.5 "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--cream);
    white-space: pre;
  }
  .stats b { color: var(--amber); font-weight: 500; }
  .routemap {
    position: fixed; left: 50%; transform: translateX(-50%); top: calc(12px + env(safe-area-inset-top, 0px));
    width: clamp(320px, calc(100% - 720px), 620px); box-sizing: border-box; padding: 6px 10px 4px;
  }
  .routemap canvas { display: block; width: 100%; height: 56px; cursor: pointer; }
  .routetip { font: 500 11px/1.3 "JetBrains Mono", ui-monospace, monospace; color: var(--muted); text-align: center; }
  /* the tip on a line of its own (one line, no jumps), under it the range buttons and "Kierunek", wrapping when narrow */
  .routerow { display: flex; flex-direction: column; gap: 2px; }
  .routerow .routetip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .routebtns { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
  .routebtns #btnDir { margin-left: auto; }
  .routerow button {
    font: 600 12px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--cream); background: rgba(242, 230, 200, 0.08); border: 1px solid var(--line); border-radius: 5px;
    padding: 3px 8px; margin: 1px 0 2px; cursor: pointer; white-space: nowrap;
  }
  .routerow button:hover { background: rgba(242, 230, 200, 0.16); }
  .routerow button[aria-pressed="true"] { background: var(--amber); color: var(--ink); border-color: var(--amber); }
  @media (max-width: 1040px) { .routemap { width: min(620px, calc(100% - 32px)); top: auto; bottom: calc(var(--barH, 60px) + 28px + env(safe-area-inset-bottom, 0px)); } }
  .viewpanel {
    display: grid; gap: 6px;
    font: 600 13px/1.2 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  }
  .viewpanel label { display: flex; justify-content: space-between; }
  .viewpanel output { font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--cream); letter-spacing: 0; text-transform: none; }
  .viewpanel input { width: 100%; accent-color: var(--amber); }
  .viewpanel .viewhead { margin: 8px 0 0; font: 600 12px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); }
  .viewpanel button { justify-self: start; }
  .viewpanel label { gap: 6px; align-items: center; }
  .viewpanel label output { margin-left: auto; }
  .viewpanel .viewcheck { justify-content: flex-start; cursor: pointer; }
  .viewpanel .viewcheck input { width: auto; margin: 0; }
  .viewpanel input:disabled { opacity: 0.45; }
  .viewpanel .viewreset { padding: 0 5px; min-width: 0; font-size: 13px; line-height: 16px; }
  .viewpanel .viewreset:disabled { opacity: 0.3; cursor: default; }
  .viewpanel .viewnote { margin: 2px 0 0; font: 400 12px/1.35 "Barlow", system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
  .attr {
    position: fixed; left: 16px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); margin: 0;
    font: 400 11px/1.3 "Barlow", system-ui, sans-serif; color: var(--ink); opacity: 0.7;
  }
  .attr a { color: inherit; }
  body[data-tod="noc"] .attr { color: var(--cream); }
  body.clean .panel, body.clean .hint, body.clean .attr, body.clean .startscreen, body.clean .scrim { display: none !important; }
  .toast {
    position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -6px);
    width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; padding: 8px 14px; pointer-events: none; background: rgba(30, 24, 17, 0.82);
    font: 600 14px/1.2 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cream); opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 40;
  }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }
  /* (a toast with a button — leaving a stop early — takes taps while it shows) */
  .toast.show.act { pointer-events: auto; }
  .toast .toastact {
    margin-left: 10px; padding: 6px 12px; min-height: 32px; vertical-align: middle; cursor: pointer; font: inherit; letter-spacing: 0.1em; text-transform: inherit;
    color: var(--ink); background: var(--amber); border: 1px solid var(--amber); border-radius: 6px;
  }
  @media (pointer: coarse) { .toast .toastact { min-height: 44px; } }
  /* name bubbles (src/app/bubbles.js): the named river, road, viaduct or border the train passes; a stack at the right
     edge under the key hints (a phone: above the bar). The box is a .panel only for #clean: no panel look of its own */
  .bubbles.panel {
    position: fixed; z-index: 4; right: 16px; top: calc(112px + env(safe-area-inset-top, 0px));
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: min(300px, calc(100% - 32px));
    background: none; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none;
  }
  .bubble {
    display: flex; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box; padding: 5px 12px 5px 6px;
    background: rgba(30, 24, 17, 0.72); border: 1px solid var(--line); border-radius: 18px;
    opacity: 0; transform: translateX(8px); transition: opacity 0.3s, transform 0.3s;
  }
  .bubble.show { opacity: 1; transform: none; }
  .bubble i { flex: none; position: relative; width: 24px; height: 24px; border-radius: 50%; background: rgba(242, 230, 200, 0.1); }
  .bubble i::after {
    content: ''; position: absolute; inset: 4px; background: var(--bc, var(--amber));
    -webkit-mask: var(--bi) center / contain no-repeat; mask: var(--bi) center / contain no-repeat;
  }
  .bubble span { display: grid; min-width: 0; }
  .bubble small { font: 600 10px/1.1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .bubble b { font: 600 15px/1.15 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.02em; color: var(--cream); overflow-wrap: anywhere; }
  /* the icons (masks, coloured --bc): waves, a level-crossing cross, a road deck over the rails, the rails over an arch, a border */
  .bubble[data-kind="water"] { --bc: #8cc4ea; --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 6c2-2 4-2 6 0s4 2 6 0 3-1.5 4-1M2 11c2-2 4-2 6 0s4 2 6 0 3-1.5 4-1M2 16c2-2 4-2 6 0s4 2 6 0 3-1.5 4-1'/%3E%3C/svg%3E"); }
  .bubble[data-kind="road"] { --bc: #f07a6a; --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 4l12 12M16 4L4 16'/%3E%3C/svg%3E"); }
  .bubble[data-kind="over"] { --bc: #c3d0de; --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 5h18M4 5v6M16 5v6M2 14h16M2 18h16'/%3E%3Cpath d='M6 14v4M10 14v4M14 14v4' stroke-width='1.2'/%3E%3C/svg%3E"); }
  .bubble[data-kind="under"] { --bc: #c3d0de; --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 3h18M1 7h18M4 19v-5a6 6 0 0 1 12 0v5'/%3E%3Cpath d='M6 3v4M10 3v4M14 3v4' stroke-width='1.2'/%3E%3C/svg%3E"); }
  .bubble[data-kind="border"] { --bc: var(--amber); --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v3M10 8.5v3M10 15v3'/%3E%3Cpath d='M5 6.5L2 10l3 3.5M15 6.5l3 3.5-3 3.5'/%3E%3C/svg%3E"); }
  @media (prefers-reduced-motion: reduce) { .bubble { transition: none; transform: none; } }
  /* a phone: above the bar at the right (the route map, its chip and the attribution are at the top) */
  @media (max-width: 640px), (max-height: 500px) {
    .bubbles.panel { right: 8px; top: auto; bottom: calc(var(--barH, 60px) + 16px + env(safe-area-inset-bottom, 0px)); max-width: min(280px, calc(100% - 16px)); }
    .bubble b { font-size: 14px; }
  }
  /* Street View debug orbs (src/app/svorbs.js, key O in the free camera): the hover label and the comparison panels (our
     view | the Street View image), side by side on a wide screen, stacked on a narrow one; .panel: #clean hides them */
  .svlabel.panel {
    position: fixed; z-index: 36; padding: 4px 9px; pointer-events: none; background: rgba(30, 24, 17, 0.85); white-space: nowrap;
    font: 600 13px/1.2 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.04em; color: var(--cream);
  }
  /* the orbs' name bubbles (the .bubble look of bubbles.js), each at its arrow's top: placed by transform, taking clicks */
  .svtags.panel {
    position: fixed; inset: 0; overflow: hidden; pointer-events: none;
    background: none; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .svtags .bubble { position: absolute; left: 0; top: 0; max-width: 260px; pointer-events: auto; cursor: pointer; transition: none; white-space: nowrap; }
  .svtags .bubble:hover { background: rgba(30, 24, 17, 0.9); border-color: #9cc8ff; }
  .svtags .bubble b { overflow: hidden; text-overflow: ellipsis; }
  .bubble[data-kind="sv"], .bubble[data-kind="pano"] { --bc: #6aa6ff; --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M2 6h4l2-2h4l2 2h4v10H2z'/%3E%3Ccircle cx='10' cy='11' r='3'/%3E%3C/svg%3E"); }
  .bubble[data-kind="pano"] { --bc: #b48cf0; }
  .svpanel.panel {
    position: fixed; z-index: 35; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100% - 32px); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 10px 12px 12px;
    background: rgba(30, 24, 17, 0.88);
  }
  .svhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .svtitle { display: grid; gap: 2px; min-width: 0; }
  .svtitle b { font: 700 20px/1.1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.03em; color: var(--cream); }
  .svtitle small { font: 500 12px/1.3 "JetBrains Mono", ui-monospace, monospace; color: var(--muted); overflow-wrap: anywhere; }
  .svbtns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; }
  .svpanel button, .svbtn {
    font: 600 13px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
    color: var(--cream); background: rgba(242, 230, 200, 0.08); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; cursor: pointer;
  }
  .svpanel button:hover, .svbtn:hover { background: rgba(242, 230, 200, 0.16); }
  .svpanel button:focus-visible, .svbtn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
  .svbody { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .svfig { margin: 0; min-width: 0; }
  .svfig figcaption { margin: 0 0 4px; font: 600 12px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .svmedia { position: relative; width: 100%; max-height: 62vh; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
  .svmedia canvas, .svmedia img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .svnone { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 12px; text-align: center; color: var(--muted); }
  .svnone p { margin: 0; overflow-wrap: anywhere; }
  .svnote { display: grid; gap: 6px; margin: 0 0 8px; }
  .svnote textarea {
    width: 100%; box-sizing: border-box; resize: vertical; font: 500 14px/1.35 "JetBrains Mono", ui-monospace, monospace;
    color: var(--cream); background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: 6px; padding: 8px;
  }
  .svnote textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
  .svnoterow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .svnotesay { font: 500 12px/1.3 "JetBrains Mono", ui-monospace, monospace; color: var(--muted); }
  .svwhat { margin: 8px 0 0; color: var(--muted); }
  .svwhat:empty { display: none; }
  @media (max-width: 900px) { .svbody { grid-template-columns: 1fr; } .svhead { flex-direction: column; } .svbtns { justify-content: flex-start; } }
  /* the measured terrain grid's legend (key N in the free camera, docs/ui/nmt_grid.md): in the left column under the
     plate, the colour code of NMT − our ground; .panel: #clean hides it */
  .nmtkey.panel {
    padding: 8px 12px; pointer-events: none; display: grid; gap: 3px;
    font: 500 12px/1.4 "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--cream);
  }
  .nmtkey b { font: 700 15px/1.15 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
  .nmtkey ul { list-style: none; margin: 2px 0; padding: 0; display: grid; gap: 1px; }
  .nmtkey li { display: flex; align-items: center; gap: 7px; }
  .nmtkey li i { width: 16px; height: 3px; border-radius: 1px; flex: none; }
  .nmtkey small { font: 400 11px/1.3 "Barlow", system-ui, sans-serif; color: var(--muted); }
  #loading {
    position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    font: 600 18px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink); background: var(--sky); transition: opacity 0.6s;
  }
  #loading.done { opacity: 0; pointer-events: none; }
  /* the loader (src/app/loader.js): the title, a bar with real progress and the phase under it; the shimmer runs on the
     compositor (transform only), so it moves while the main thread is busy */
  #loading .ldbox { display: grid; justify-items: center; gap: 14px; width: min(380px, calc(100vw - 48px)); text-align: center; }
  #loading .ldcrest { display: block; width: clamp(96px, 22vmin, 144px); height: auto; }
  #loading .ldbrand { font-size: clamp(26px, 6.5vw, 38px); line-height: 1.1; letter-spacing: 0.09em; }
  #loading .ldtitle { line-height: 1.25; overflow-wrap: anywhere; }
  #loading .ldbar { position: relative; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(31, 25, 17, 0.14); }
  #loading .ldbar i {
    position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--ink);
    transition: transform 0.25s ease-out;
  }
  #loading .ldbar::after {
    content: ""; position: absolute; inset: 0; width: 40%;
    background: linear-gradient(90deg, rgba(233, 196, 154, 0), rgba(233, 196, 154, 0.55), rgba(233, 196, 154, 0));
    transform: translateX(-100%); animation: ldshimmer 1.4s linear infinite;
  }
  @keyframes ldshimmer { to { transform: translateX(250%); } }
  #loading .ldtext {
    font: 500 13px/1.3 "Barlow", system-ui, sans-serif; letter-spacing: 0.02em; text-transform: none;
    color: rgba(31, 25, 17, 0.72); font-variant-numeric: tabular-nums; min-height: 1.3em;
  }
  @media (prefers-reduced-motion: reduce) {
    #loading .ldbar::after { animation: none; display: none; }
    #loading .ldbar i { transition: none; }
  }

  /* ---- sheets (Menu, Pociąg, Widok): a panel above the bar on the right; a bottom sheet on a phone (below) */
  .sheet {
    position: fixed; z-index: 30; right: 16px; bottom: calc(var(--barH, 60px) + 28px + env(safe-area-inset-bottom, 0px));
    width: 340px; max-width: calc(100% - 32px); max-height: calc(100% - var(--barH, 60px) - 60px); overflow: auto; overscroll-behavior: contain;
    box-sizing: border-box; padding: 10px 14px 14px; background: rgba(30, 24, 17, 0.82);
  }
  .sheet h3 {
    margin: 12px 0 6px; font: 600 12px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
  }
  .sheet .btns { justify-content: flex-start; }
  .sheet .appver { margin: 14px 0 0; font: 500 12px/1.3 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.06em; color: var(--muted); }
  .sheethead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 2px; }
  .sheethead h2 { margin: 0; font: 700 22px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.04em; color: var(--cream); }
  .sheet .sheetclose { padding: 6px 10px; min-width: 36px; font-size: 16px; letter-spacing: 0; }
  .scrim { position: fixed; inset: 0; z-index: 29; background: rgba(20, 16, 11, 0.35); display: none; }
  .viewpanel.sheet { width: 300px; }
  /* the keyboard-only controls (free camera, key hints) where there is no fine pointer with hover */
  @media not all and (hover: hover) and (pointer: fine) { .kbdonly, .hint { display: none !important; } }

  /* ---- train sheet: one card per consist, its liveries as chips with two colour swatches */
  .trainlist { display: grid; gap: 8px; margin-top: 8px; }
  .tcard { border: 1px solid var(--line); border-radius: 8px; padding: 4px; display: grid; gap: 4px; }
  .tcard.cur { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
  .sheet .tpick {
    display: grid; gap: 3px; text-align: left; text-transform: none; letter-spacing: 0.02em; border: 0; background: transparent; padding: 8px 8px 4px;
  }
  .sheet .tpick b { font: 700 20px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream); }
  .tcard.cur .tpick b { color: var(--amber); }
  .sheet .tpick[aria-pressed="true"] { background: transparent; color: var(--cream); }
  .tpick span { font: 400 13px/1.3 "Barlow", system-ui, sans-serif; color: var(--cream); letter-spacing: 0; }
  .tpick small { font: 500 11px/1.3 "JetBrains Mono", ui-monospace, monospace; color: var(--muted); letter-spacing: 0; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 6px; }
  .sheet .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; font-size: 13px; letter-spacing: 0.04em; text-transform: none; }
  .chip i { width: 18px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.35); background: linear-gradient(180deg, var(--a) 0 55%, var(--b) 55% 100%); flex: none; }

  /* ---- start screen: the diorama runs behind; only the cards take pointer events. Two boxes: the texts + Start
     (.starttop) and the choices (.startbot); on a phone each folds with its chevron (startscreen.js, .folded) */
  /* (on the left on a wide screen: the orbiting camera keeps the train in the middle) */
  .startscreen { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; padding: 16px; box-sizing: border-box; }
  @media (min-width: 1000px) and (min-height: 501px) { .startscreen { place-items: center start; padding-left: max(32px, 6vw); } }
  .startcol { width: min(420px, 100%); display: grid; gap: 10px; pointer-events: none; }
  .startcard {
    pointer-events: auto; position: relative; box-sizing: border-box; padding: 20px 22px 18px; display: grid; gap: 10px;
    background: rgba(30, 24, 17, 0.72);
  }
  .startbot { padding-top: 16px; padding-bottom: 16px; }
  .startfold, .startsummary, .starthead { display: none; }
  .starttitle { margin: 0; font: 700 54px/0.92 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.01em; color: var(--cream); }
  .starttitle span { color: var(--amber); display: block; font-size: 0.62em; }
  .startlead { margin: 0 0 4px; font: 400 14px/1.4 "Barlow", system-ui, sans-serif; color: var(--muted); }
  .startver { margin: 8px 0 0; font: 500 12px/1.3 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.06em; color: var(--muted); }
  .startscreen .startgo {
    display: grid; gap: 4px; justify-items: center; padding: 14px 16px; font-size: 28px; letter-spacing: 0.16em;
    background: var(--amber); color: var(--ink); border-color: var(--amber);
  }
  .startscreen .startgo:hover { background: #f4ba68; }
  .startgo small { font: 500 12px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0; text-transform: none; }
  .startscreen .startrow { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 48px; }
  .startrow span { color: var(--muted); }
  .startrow b { flex: 1; font-weight: 600; text-transform: none; letter-spacing: 0.02em; font-size: 15px; }
  .startrow i { font-style: normal; font-size: 20px; color: var(--amber); }
  .startdir button { text-transform: none; letter-spacing: 0.03em; font-size: 15px; min-height: 44px; }
  .startmore { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .startmore button { min-height: 44px; }
  .startkeys { margin: 2px 0 0; text-align: center; font: 500 12px/1.4 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: 0.04em; color: var(--muted); }
  .startkeys kbd { font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; padding: 2px 5px; border: 1px solid rgba(242, 230, 200, 0.3); border-radius: 4px; }
  /* while the start card shows, the driving UI is out of the way */
  body.starting .plate, body.starting .controls, body.starting .hint, body.starting .routemap, body.starting .mapchip, body.starting .leftcol { display: none !important; }

  /* the route-map chip (phones only: the map starts collapsed there) */
  .mapchip { display: none; }
  .mapchip[aria-pressed="false"] { background: var(--panel); }

  /* ---- coarse pointers: touch targets of at least 44 px */
  @media (pointer: coarse) {
    .controls button, .sheet button, .startscreen button, .mapchip { min-height: 44px; }
    .sheet .chip, .sheet .sheetclose { min-height: 44px; min-width: 44px; }
    .routerow button { min-height: 36px; padding: 6px 10px; }
    .speed input { height: 32px; }
  }

  /* ---- phone (portrait: narrow; landscape: low): compact plate, bar across the bottom, bottom sheets */
  @media (max-width: 640px), (max-height: 500px) {
    .plate { top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; padding: 6px 10px; max-width: calc(100% - 100px); box-sizing: border-box; }
    .plate h1 { font-size: 26px; }
    .plate .eyebrow { font-size: 10px; line-height: 1.25; }
    .plate .specs { display: none; }
    .sep { display: none; }
    /* the map's range / direction buttons: secondary, slim (30 px) in one row; the tap area reaches 40 px (::after) */
    .routerow button { position: relative; font-size: 11px; letter-spacing: 0.04em; padding: 0 8px; min-height: 30px; margin: 3px 0 2px; }
    .routerow button::after { content: ''; position: absolute; inset: -5px 0; }
    .mapchip:not([hidden]) { display: block; position: fixed; z-index: 6; top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; padding: 10px 14px; }
    .routemap {
      left: 8px; right: 8px; width: auto; transform: none; top: calc(72px + env(safe-area-inset-top, 0px)); bottom: auto;
    }
    .controls {
      left: 8px; right: 8px; transform: none; width: auto; max-width: none;
      bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 8px; gap: 8px;
    }
    .controls .speed { flex: 1 1 100%; gap: 8px; }
    .speed label { display: none; }
    .speed input { flex: 1; width: auto; min-width: 80px; }
    .readout { min-width: 7ch; }
    .barbtns { flex: 1 1 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
    .barbtns button { padding: 9px 2px; font-size: 13px; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .leftcol { top: calc(80px + env(safe-area-inset-top, 0px)); left: 8px; }
    .stats { font-size: 10px; }
    .attr { left: auto; right: 8px; bottom: auto; top: calc(62px + env(safe-area-inset-top, 0px)); font-size: 9px; max-width: 60%; text-align: right; }
    .sheet, .viewpanel.sheet {
      left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 75%; border-radius: 14px 14px 0 0;
      padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(30, 24, 17, 0.9);
    }
    .scrim:not([hidden]) { display: block; }
    /* the texts + Start pinned to the top, the choices to the bottom: the train shows between them */
    .startscreen { place-items: stretch center; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .startcol { gap: 6px; height: 100%; grid-template-rows: auto auto; align-content: space-between; }
    .startcard, .startbot { padding: 10px 12px; gap: 6px; }
    .startcard > .eyebrow { font-size: 10px; padding-right: 40px; line-height: 1.4; }
    .startbot .starthead { display: block; }
    .starttitle { font-size: 30px; line-height: 1; padding-right: 40px; }
    .starttitle span { display: block; font-size: 0.72em; }
    .startlead { font-size: 12px; line-height: 1.3; margin: 0; }
    .startscreen .startgo { font-size: 22px; padding: 7px 12px; gap: 2px; }
    .startgo small { font-size: 11px; }
    .startscreen .startrow { min-height: 44px; padding: 6px 12px; }
    .startrow b { font-size: 14px; }
    .startdir button { font-size: 14px; }
    .startmore { gap: 6px; }
    /* the fold chevron in the box's top right corner (44 px target), up = fold, down = unfold */
    .startscreen .startfold {
      display: block; position: absolute; top: 0; right: 0; width: 44px; height: 44px; min-height: 44px; padding: 0;
      background: transparent; border-color: transparent; z-index: 1;
    }
    .startfold::before {
      content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -2px 0 0 -5px;
      border: solid var(--muted); border-width: 2px 0 0 2px; transform: rotate(45deg);
    }
    .startscreen .startfold:hover, .startscreen .startfold:active { background: transparent; }
    .startcard.folded .startfold::before { margin-top: -7px; transform: rotate(225deg); }
    .startcard.folded .startfoldable { display: none !important; }
    .starttop.folded { gap: 6px; }
    /* the folded choices: one row with what is picked; a tap unfolds */
    .startbot.folded { padding: 0; }
    .startbot.folded .startsummary {
      display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 48px 0 12px; text-align: left;
      background: transparent; border: 0; border-radius: 8px; overflow: hidden; white-space: nowrap;
    }
    .startsummary span { flex: none; font-size: 12px; color: var(--muted); }
    .startsummary b { overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; text-transform: none; }
  }
  /* phone landscape: one row (the speed shrinks), the start card to the side, sheets not over the whole height */
  @media (max-height: 500px) and (min-width: 641px) {
    .controls { flex-wrap: nowrap; }
    .controls .speed { flex: 1 1 auto; }
    .barbtns { flex: 0 0 auto; display: flex; }
    .barbtns button { padding: 9px 10px; }
    .startscreen { place-items: center end; }
    .startcol { width: min(400px, 60%); height: auto; max-height: 100%; overflow: auto; align-content: start; }
    .sheet, .viewpanel.sheet { left: auto; width: min(420px, 70%); max-height: 92%; border-radius: 14px 0 0 0; }
    .routemap { left: 8px; right: 104px; width: auto; transform: none; top: calc(8px + env(safe-area-inset-top, 0px)); }
    body.mapopen .plate, body.mapopen .attr { display: none; }
  }

/* Train composer: controls sit above Jedź, selected vehicles scroll independently on a phone. */
.composer { min-width: 0; padding: 12px; display: grid; gap: 8px; color: var(--cream); }
.composer[hidden] { display: none; }
.comhead, .comactions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.comhead b { font: 600 16px/1.2 "Barlow Condensed", sans-serif; }
.composer button, .composer select { min-height: 44px; border: 1px solid var(--line); border-radius: 5px; background: #302a22; color: var(--cream); padding: 6px 10px; font: 500 13px/1.2 "Barlow", sans-serif; }
.composer button:disabled { opacity: .45; cursor: default; }
.composer button:focus-visible, .composer select:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.comwrap { display: flex; gap: 6px; min-width: 0; }
.comwrap > button { flex: 0 0 44px; }
.comwrap > button[hidden] { display: none; }
.comrow { display: flex; gap: 6px; overflow-x: auto; min-width: 0; flex: 1; scrollbar-width: thin; }
.comrow > button { flex: none; white-space: nowrap; }
.compicked { display: flex; gap: 6px; overflow-x: auto; max-height: 90px; scrollbar-width: thin; }
.comvehicle { flex: none; display: grid; gap: 3px; padding: 5px 8px; background: #181a1c; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
.comvehicle select { width: 100%; }
.composer small { font: 400 12px/1.3 "Barlow", sans-serif; color: var(--muted); }
.pkcompose { grid-area: compose; align-self: end; }
.picker.composing .pkdata .pkliv { display: none; }
.picker.composing .pkdata .pkkeys { display: none; }
@media (max-width: 900px), (max-height: 560px) {
  .pkcompose { padding: 8px; gap: 5px; }
  .picker.composing .pkdata { max-height: 105px; }
  .picker.composing .pkspecs, .picker.composing .pksil { display: none; }
  .picker.composing .pkdata h3 { font-size: 18px; }
  .comhead b { font-size: 14px; }
  .composer .comhead button, .composer .comactions button { font-size: 12px; letter-spacing: 0; text-transform: none; }
}

@media (max-height: 600px) and (min-width: 641px) {
  .picker.composing { grid-template: "head head" auto "list list" auto "stage compose" minmax(80px, 1fr) "foot foot" auto / 1fr 1fr; gap: 6px; padding: 8px; }
  .picker.composing .pkdata { display: none; }
  .picker.composing .pkcompose { min-height: 0; align-self: stretch; overflow-y: auto; }
  .picker.composing .pkstage { min-height: 80px; }
}
@media (max-height: 700px) and (max-width: 640px) {
  .picker.composing { grid-template: "head" auto "stage" minmax(80px, 1fr) "list" auto "compose" auto "foot" auto / 1fr; gap: 6px; padding: 8px; }
  .picker.composing .pkdata { display: none; }
  .picker.composing .pkcompose { max-height: 34vh; overflow-y: auto; }
  .picker.composing .pkstage { min-height: 80px; }
}