/* Транссиб — M1 styling. Night-train palette: deep blue-green + brass. */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0e1b21;
  --bg-raised: #14252d;
  --bg-card: #1a303a;
  --ink: #e8e2d4;
  --ink-dim: #8fa1a8;
  --brass: #d4a94e;
  --brass-dim: #8a743f;
  --ok: #7fb98a;
  --err: #d4685e;
  --hint: #e8c877;
  /* The band under a keycap names the ore that unlocked the letter, so the
     six mine colours (ORE_TONE, pixels.js) reappear here — lifted a few
     steps, because 3px of coal or oil at their true tone is black on a dark
     cap. --band-free is for the keys no mine sells: space and Shift. */
  --ore-az: #8fb0d6; --ore-buki: #d8814e; --ore-stone: #b8ab8e;
  --ore-vedi: #e59ae0; --ore-coal: #7f8494; --ore-oil: #8b6fc4;
  --band-free: #4f6f7a;
  --hand-l-bg: #12242e; --hand-r-bg: #1c2527;
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- top bar ---------- */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid #23404c;
}
#wordmark {
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--brass);
  font-weight: bold;
}
#wordmark span { color: var(--ink-dim); }
#topbar-right { display: flex; align-items: center; gap: 26px; }
#session-stats { display: flex; gap: 28px; }
#btn-sound, #btn-settings {
  background: none; border: none; cursor: pointer;
  font-size: 16px; opacity: 0.7;
}
#btn-sound:hover, #btn-settings:hover { opacity: 1; }
.stat { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.stat-value { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-label { font-size: 11px; color: var(--ink-dim); letter-spacing: 1px; }

/* ---------- main ---------- */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 8px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  overflow-x: clip;
  min-height: 0;
}
/* narrow windows: shrink the keyboard visually, keep geometry intact */
@media (max-width: 760px) {
  #keyboard { transform: scale(0.66); transform-origin: top center; margin-bottom: -80px; }
  .current-line { font-size: 26px; }
  /* narrower gutters and a smaller colophon keep the footer one row down to
     about a 430px window */
  footer { padding: 10px 12px 16px; column-gap: 10px; }
  #colophon { font-size: 11px; }
}
/* below that the row genuinely cannot hold both, so the colophon drops under
   the links rather than being clipped */
@media (max-width: 430px) {
  footer { grid-template-columns: 1fr; row-gap: 6px; }
  #footer-links, #colophon { grid-column: 1; justify-self: center; }
}

/* ---------- the works ---------- */
body.night #factory-mount canvas { filter: brightness(0.45) saturate(0.8); }
/* the playfield takes all vertical space the drill + keyboard don't need */
#playfield {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: stretch;
  flex: 1;
  min-height: 150px;
}
#factory { position: relative; flex: 1; min-width: 0; display: flex; }
/* integer pixel upscale: JS sizes the canvas; the mount letterboxes the rest */
/* the caption under the map: what the place is, what the chosen menu row does */
#place-caption {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  max-width: 94%; padding: 4px 12px; box-sizing: border-box;
  background: rgba(23, 22, 26, 0.88); border: 1px solid #3a4a52; border-radius: 6px;
  color: var(--ink); font-size: 13px; line-height: 1.35; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
#place-caption.hidden { display: none; }
#place-caption.ok { border-color: var(--ok); }
#place-caption.no { border-color: var(--err); }
#place-caption.dim { color: var(--ink-dim); }
#place-caption b { color: var(--brass); }
#factory-mount {
  flex: 1;
  min-width: 0;
  border: 1px solid #23404c;
  border-radius: 10px;
  overflow: hidden;
  background: #17161a;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
}
#factory-mount canvas { display: block; image-rendering: pixelated; }
.current-line { font-size: 27px; }

/* ---------- drill (fixed height — nothing shifts when docking) ---------- */
#drill {
  width: 100%;
  text-align: center;
  padding: 0;
  height: 52px;
  overflow: hidden;
}
.line { line-height: 1.6; }
.current-line { font-size: 34px; letter-spacing: 1px; }
.preview-line { font-size: 20px; color: #45606c; margin-top: 6px; }

.ch { border-radius: 3px; padding: 0 1px; white-space: pre; }
.ch.done { color: #5d7d70; }
.ch.caret {
  background: rgba(212, 169, 78, 0.22);
  box-shadow: 0 2px 0 var(--brass);
  display: inline-block;
  transform: scale(1.12);
}
.ch.err {
  background: rgba(212, 104, 94, 0.35);
  box-shadow: 0 2px 0 var(--err);
}

#gloss-line {
  margin-top: 2px;
  font-size: 16px;
  font-style: italic;
  color: var(--ink-dim);
  opacity: 0;
  transition: opacity 0.4s;
  min-height: 22px;
}
#gloss-line.visible { opacity: 1; }
#gloss-line b { color: var(--brass); font-style: normal; }
.collect-mark { color: var(--ok); font-style: normal; font-size: 13px; margin-left: 8px; }

/* ---------- keyboard ---------- */
/* Keys are absolutely positioned by app.js using real ANSI geometry, with a
   visual gap splitting the board between the hands. */
#keyboard {
  position: relative;
  user-select: none;
}
.keycap {
  position: absolute;
  height: 42px;
  border-radius: 6px;
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: var(--ink);
  /* set per key by refreshKeyboard: the ore's colour once unlocked, nothing
     before. A locked cap is otherwise a normal cap — the band is the tell. */
  border-bottom: 3px solid var(--ore, transparent);
}
.keycap.hand-l { background: var(--hand-l-bg); }
.keycap.hand-r { background: var(--hand-r-bg); }
/* Tab, Enter, the digits: scenery, not game content. No band — a band means
   an ore bought this key, and no ore ever buys these. */
.keycap.inert {
  background: #0f1a20;
  color: #31454e;
  font-size: 13px;
}
.cap-shift {
  position: absolute;
  top: 3px;
  right: 7px;
  font-size: 10px;
  color: var(--ink-dim);
}
.keycap.home::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: #3d545e;
}
/* .locked carries no styling of its own: an unreached letter is printed on
   its cap as plainly as any other, it simply has no ore band under it. The
   class stays because the unlock card and the tests read it. */
.keycap.hint {
  color: #1a1508;
  background: rgba(232, 200, 119, 1);
  box-shadow: 0 0 18px rgba(232, 200, 119, 0.7);
}
/* the tier-4 taper: the rescue still comes, but faint (hint-free from T5) */
.keycap.hint.dim {
  background: rgba(232, 200, 119, 0.45);
  box-shadow: 0 0 8px rgba(232, 200, 119, 0.3);
  color: var(--ink);
}
/* lesson lights: the docked bench's letters glow steadily on the keyboard */
.keycap.lesson {
  box-shadow: inset 0 -3px 0 var(--brass);
  color: var(--brass);
}
.keycap.lesson.hint { color: #1a1508; }
/* materials flying from bench to the inventory panel */
.fly-mat {
  position: fixed;
  z-index: 60;
  width: 24px; height: 24px;
  pointer-events: none;
  image-rendering: pixelated;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.9, 0.6), opacity 0.6s;
}
.keycap.unlock-glow {
  background: var(--brass);
  color: #1a1508;
  box-shadow: 0 0 24px rgba(212, 169, 78, 0.9);
  animation: pulse 1s infinite alternate;
}
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.12); } }

#hint-note {
  font-size: 13px;
  color: #55707c;
  font-style: italic;
}

/* ---------- footer ---------- */
/* three columns, the outer two equal: the links sit dead centre in the window
   however wide the colophon grows, and the colophon fills space the row was
   already wasting — so the bar is the same height it was with links alone */
footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  column-gap: 16px;
  padding: 10px 28px 16px;
}
#footer-links {
  grid-column: 2;
  display: flex;
  justify-content: center;
  gap: 26px;
}
#colophon {
  grid-column: 3;
  justify-self: end;
  font-size: 12px;
  color: #47606b;
  white-space: nowrap;
}
#colophon a {
  color: #55707c;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#colophon a:hover { color: var(--ink-dim); }
.link-btn {
  background: none;
  border: none;
  color: #55707c;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--ink-dim); }
.link-btn.danger:hover { color: var(--err); }

/* ---------- overlay ---------- */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 15, 19, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#overlay.hidden { display: none; }
#overlay-card {
  background: var(--bg-card);
  border: 1px solid #2c4a58;
  border-radius: 12px;
  padding: 32px 40px;
  max-width: 520px;
  width: calc(100% - 40px);
  text-align: center;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  /* a short window scrolls the card instead of clipping the switches off it */
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
#overlay-card.wide { max-width: 660px; }
#overlay-card h2 { margin: 8px 0 14px; font-size: 26px; }
#overlay-card p { margin: 10px 0; line-height: 1.5; }
#overlay-card .muted { color: var(--ink-dim); font-size: 15px; }
.card-station {
  color: var(--brass);
  letter-spacing: 3px;
  font-size: 13px;
  text-transform: uppercase;
}
.big-letter { color: var(--brass); }
.pix-scene { image-rendering: pixelated; display: block; margin: 10px auto 0; }
.rules { text-align: left; margin: 14px 0 8px 20px; line-height: 1.7; font-size: 15px; }
.btn-primary {
  margin-top: 18px;
  background: var(--brass);
  color: #221a08;
  border: none;
  border-radius: 8px;
  padding: 10px 26px;
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.1); }
.summary-grid {
  display: flex;
  justify-content: center;
  gap: 34px;
  margin: 18px 0 6px;
}
.summary-grid .sum-val { display: block; font-size: 28px; color: var(--brass); font-variant-numeric: tabular-nums; }
.summary-grid .sum-label { font-size: 12px; color: var(--ink-dim); letter-spacing: 1px; }
.weak-chip {
  display: inline-block;
  background: var(--bg-raised);
  border-radius: 5px;
  padding: 2px 9px;
  margin: 0 2px;
  font-size: 17px;
}
.weak-chip small { color: var(--ink-dim); }
.soft-stop {
  background: rgba(212, 169, 78, 0.1);
  border: 1px solid var(--brass-dim);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
}
.flavor { font-style: italic; color: #b9c6c0; }
.night-offer { margin-top: 16px; font-size: 14px; }

/* night run: the whole room dims, keyboard goes dark */
body.night { background: #0a141a; }
body.night .keycap:not(.hint) { background: #0d161c; color: #2b3d46; border-bottom-color: #16232b; }
body.night .keycap.home::after { background: #23343d; }

/* ---------- loading card: markup AND styling both live in index.html, inlined
   in the head so the card paints and pulses on the first frame, before this
   file has even downloaded. Edit it there, not here. ---------- */

/* ---------- the map picker: one card per world, each with its own save ---------- */
.map-cards { display: flex; gap: 14px; justify-content: center; margin: 18px 0 4px; }
.map-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg-raised);
  border: 1px solid #2c4a58;
  border-radius: 10px;
  padding: 12px 12px 14px;
  color: var(--ink);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
}
.map-card:hover, .map-card:focus { border-color: var(--brass); background: #1a3038; outline: none; }
.map-card:focus-visible { box-shadow: 0 0 0 2px rgba(212, 169, 78, 0.35); }
.map-card.current { border-style: dashed; }
.map-thumb {
  width: 100%;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b151a;
  border-radius: 6px;
  padding: 6px;
}
.map-thumb img { image-rendering: pixelated; max-width: 100%; max-height: 100%; }
.map-card b { font-size: 18px; color: var(--brass); margin-top: 4px; }
/* Both text blocks reserve their tallest case, so translating the card (or
   going from "Untouched" to a progress line) does not resize the picker. */
.map-tagline { font-size: 13px; line-height: 1.4; min-height: 4.2em; }
.map-progress { font-size: 12px; color: var(--ink-dim); line-height: 1.4; min-height: 2.8em; }
.map-go {
  margin-top: 6px;
  background: var(--brass);
  color: #221a08;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 14px;
}
.map-card:hover .map-go, .map-card:focus .map-go { filter: brightness(1.1); }
.map-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

/* ---------- language + layout switches ---------- */
/* one grid for both rows, so the labels share a column and the switches share
   a left edge however many entries each of them grows to */
.switches {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  justify-items: start;
  gap: 9px 12px;
}
.switch-label { display: flex; align-items: center; color: var(--ink-dim); justify-self: end; }
.switch-icon { display: block; }
.set-label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.set-label .switch-icon { color: var(--ink-dim); }
/* the picker note keeps two lines of room: EN takes one, RU two */
.map-note { min-height: 3.1em; }
.flag-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; }
.flag { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.seg-btn:not(.active) .flag { opacity: 0.72; }
.seg-btn:hover:not(:disabled) .flag { opacity: 1; }
.seg-btn:disabled .flag { opacity: 0.38; filter: saturate(0.5); }

/* ---------- settings ---------- */
.seg-cur { padding: 6px 14px; font-size: 13px; letter-spacing: 1px; color: var(--brass); background: var(--bg-raised); }
.seg-cur + .seg-btn { border-left: 1px solid #2c4a58; }
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid #2c4a58;
  border-radius: 6px;
  overflow: hidden;
}
.seg-btn {
  background: none;
  border: none;
  color: #7d97a3;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 6px 14px;
  cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1px solid #2c4a58; }
.seg-btn.active { background: var(--bg-raised); color: var(--brass); }
.seg-btn:hover:not(.active):not(:disabled) { color: var(--ink); }
.seg-btn:disabled { color: #3d545e; cursor: default; }
.settings-body { text-align: left; margin-top: 14px; }
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0;
  min-height: 40px;   /* room for a label that wraps, so nothing jumps */
}
/* the control keeps its natural width; a long label wraps instead of
   squeezing the switch into two rows */
.set-row .seg { flex: 0 0 auto; }
.set-label { font-size: 15px; }
/* two lines of room: a translation that runs long must not resize the card */
.set-note { font-size: 12.5px; color: var(--ink-dim); margin: -6px 0 12px; min-height: 3.05em; }
.tip-box {
  margin-top: 18px;
  background: rgba(212, 169, 78, 0.07);
  border: 1px solid var(--brass-dim);
  border-radius: 8px;
  padding: 12px 14px 10px;
  text-align: center;
}
.tip-box .set-note { margin: 6px 0 10px; }
.tip-head { color: var(--brass); font-size: 15px; }
.tip-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.tip-btn {
  flex: 1;
  display: block;
  position: relative;
  background: var(--bg-raised);
  border: 1px solid #2c4a58;
  border-radius: 8px;
  padding: 14px 10px 8px;
  text-decoration: none;
  color: var(--ink);
}
.tip-btn b { display: block; font-size: 14px; }
.tip-btn span { display: block; font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.tip-btn:hover { border-color: var(--brass); background: var(--bg-raised); }
/* currency coins straddle each button's top edge — which rail is yours reads
   before any text does */
.tip-btn .tip-coins {
  position: absolute;
  top: -13px;
  left: 0;
  right: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.coin {
  font-style: normal;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: #221a08;
  background: radial-gradient(circle at 35% 30%, #f7e3a8, var(--brass) 55%, #9c7530);
  border: 1px solid #6f5624;
  animation: coin-glow 2.4s ease-in-out infinite alternate;
}
.coin + .coin { margin-left: -7px; }
.coin:nth-child(2) { animation-delay: 0.4s; }
.coin:nth-child(3) { animation-delay: 0.8s; }
@keyframes coin-glow {
  from { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 5px rgba(212, 169, 78, 0.25); }
  to { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 169, 78, 0.7); }
}
#set-reset { margin-top: 16px; }

/* ---------- passport ---------- */
#passport-body {
  max-height: 46vh;
  overflow-y: auto;
  text-align: left;
  margin-top: 10px;
  padding-right: 6px;
}
.pw-set h3 {
  font-size: 15px;
  color: var(--brass);
  margin: 14px 0 6px;
  font-weight: normal;
  letter-spacing: 1px;
}
.pw-set h3 small { color: var(--ink-dim); }
.pw-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.pw {
  background: var(--bg-raised);
  border-radius: 5px;
  padding: 2px 9px;
  font-size: 15px;
  border: 1px solid transparent;
}
.pw.locked { color: #3d545e; background: transparent; border: 1px dashed #22394395; }
.pw.rare { border-color: var(--brass-dim); color: var(--brass); }