:root {
  --bg: #10151b;
  --bg2: #161d25;
  --panel: #1c2530;
  --panel2: #232e3b;
  --line: #33414f;
  --txt: #e8eef4;
  --dim: #9fb0c0;
  --red: #d8422f;
  --red2: #f2603f;
  --gold: #f0b429;
  --green: #4cc38a;
  --blue: #4aa3e0;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--txt);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

#app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
  max-width: 1500px;
  margin: 0 auto;
  background: linear-gradient(180deg, #121820, #0d1117);
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #1d2733, #161e27);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.lineNo {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-family: Manrope, Inter, sans-serif;
  font-weight: 800;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);
  flex: 0 0 auto;
}

.brandTxt { min-width: 0; }
.lineName {
  font-family: Manrope, Inter, sans-serif;
  font-weight: 800; font-size: 15px; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lineSub { font-size: 11px; color: var(--dim); letter-spacing: .5px; text-transform: uppercase; }

.topActions { margin-left: auto; display: flex; gap: 8px; }

.iconBtn {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--txt);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.iconBtn:hover { background: #2c3a4a; }
.iconBtn:active { transform: scale(.94); }
.iconBtn.small { width: 32px; height: 32px; font-size: 14px; border-radius: 9px; }
@media (pointer: coarse) {
  .iconBtn.small { width: 42px; height: 42px; font-size: 17px; }
}
.iconBtn.langBtn { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #cfe0ee; }
/* «На головну» у верхньому правому куті — видно, поки йде поїздка */
.homeTopBtn {
  background: linear-gradient(180deg, #2b3d52, #223040);
  border-color: rgba(150,190,225,.42);
  color: #dbeaf7;
}
.homeTopBtn svg { display: block; }
.homeTopBtn:hover { background: linear-gradient(180deg, #354b64, #27394c); }
/* «Пауза» — поруч із будиночком, теж лише під час поїздки. Поки рейс на паузі,
   іконка міняється на «продовжити», а кнопка стає бурштиновою. */
.pauseBtn {
  background: linear-gradient(180deg, #2b3d52, #223040);
  border-color: rgba(150,190,225,.42);
  color: #dbeaf7;
}
.pauseBtn svg { display: block; }
.pauseBtn:hover { background: linear-gradient(180deg, #354b64, #27394c); }
.pauseBtn .playIco { display: none; }
.pauseBtn.paused {
  background: linear-gradient(180deg, #5b4a1d, #3c3013);
  border-color: rgba(255,214,120,.55);
  color: #ffd479;
}
.pauseBtn.paused:hover { background: linear-gradient(180deg, #6e5a24, #4a3b18); }
.pauseBtn.paused .pauseIco { display: none; }
.pauseBtn.paused .playIco { display: block; }

/* ---------- route strip ---------- */
.routeWrap {
  position: relative;
  background: linear-gradient(180deg, #141c25, #101820);
  border-bottom: 1px solid var(--line);
  padding: 4px 0 0;
}
#routeCanvas { display: block; width: 100%; height: auto; }
.routeLegend {
  display: flex; gap: 15px; justify-content: center;
  font-size: 11px; color: #b6c4d2;
  padding: 1px 10px 7px;
  flex-wrap: wrap;
}
.routeLegend span { display: inline-flex; align-items: center; gap: 5px; }
.lg { width: 16px; height: 5px; border-radius: 3px; display: inline-block; }
.lg-station { background: #e8eef4; }
.lg-depot { background: #1a222a; border: 1px solid #e0e6ec; }
.lg-tunnel { background: #6b5a4a; }
.lg-viaduct { background: #9aa7b2; }
.lg-bridge { background: #5b6b78; }
.lg-limit { background: var(--gold); color: #16202a; font-size: 9px; font-weight: 800; width: 18px; height: 12px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- scene ---------- */
.sceneWrap {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #0a0f14;
}
#sceneCanvas { display: block; width: 100%; height: 100%; }

.sceneHud {
  position: absolute; top: 8px; left: 8px;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.hudChip {
  background: rgba(12, 18, 25, .7);
  border: 1px solid rgba(255,255,255,.17);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12.5px;
  display: flex; align-items: baseline; gap: 7px;
  min-width: 108px;
}
.hudLabel { color: #a9b9c8; font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; }
.hudChip > span:nth-child(2) { font-weight: 600; }
.hudSub { color: var(--gold); font-size: 11.5px; margin-left: auto; }
.hudChip.warn { border-color: rgba(240, 180, 41, .75); background: rgba(64, 46, 12, .78); color: #ffd98a; font-weight: 600; }
.hudChip.bad { border-color: rgba(226, 90, 70, .8); background: rgba(66, 22, 16, .8); color: #ffb6a6; font-weight: 600; }
.hudChip.warn, .hudChip.bad { min-width: 0; }
.hudChip.rocket { border-color: rgba(90,170,255,.7); background: rgba(14,32,60,.8); color: #cfe4ff; font-weight: 600; min-width: 0; }

/* «Запустити ракету» — велика червона кнопка, що пульсує (фірмовий рейс
   «Ракета на старт», див. src/rocket.js) */
.rocketBtn {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 6;
  padding: 14px 26px;
  font-size: 17px; font-weight: 800; letter-spacing: .4px;
  color: #fff;
  background: linear-gradient(180deg, #e8492f, #b62213);
  border: 2px solid #ff8f74;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(190,40,20,.55), 0 0 0 0 rgba(232,73,47,.5);
  cursor: pointer;
  font-family: inherit;
  animation: rocketPulse 1.5s infinite;
}
.rocketBtn[hidden] { display: none; }
.rocketBtn:hover { filter: brightness(1.08); }
.rocketBtn:active { transform: translateX(-50%) translateY(1px) scale(.99); }
@keyframes rocketPulse {
  0% { box-shadow: 0 6px 22px rgba(190,40,20,.55), 0 0 0 0 rgba(232,73,47,.55); }
  70% { box-shadow: 0 6px 22px rgba(190,40,20,.55), 0 0 0 16px rgba(232,73,47,0); }
  100% { box-shadow: 0 6px 22px rgba(190,40,20,.55), 0 0 0 0 rgba(232,73,47,0); }
}

/* «Дзвінок» фунікулера — звичайна кнопка пульта внизу (Кирило: «кнопка
   подзвонити має бути як звичайна знизу»). Світиться бурштином, коли дзвонити
   можна, і тьмяніє, коли дзвінок уже дано (див. syncBellBtn у src/funicular.js) */
#funiBellBtn .ico { font-size: 19px; }
#funiBellBtn .ico svg { width: 21px; height: 21px; display: block; }
#funiBellBtn.on .ico,
#funiBellBtn.ready .ico {
  color: #ffe6b4;
  background: radial-gradient(circle at 36% 26%, #ffce7a, #d4771a 54%, #6b3305 100%);
  box-shadow: 0 0 0 2.5px #39434e, 0 0 0 4.5px #060a0e,
    inset 0 2px 3px rgba(255,247,224,.55), inset 0 -3px 5px rgba(84,38,0,.6),
    0 0 16px rgba(255,168,54,.6);
  animation: bellPulse 1.3s infinite;
}
#funiBellBtn.ready .lbl { color: #ffd894; }
#funiBellBtn.done .ico { opacity: .55; animation: none; }
/* «Час дзвонити»: зустрічний вагон ось-ось рушить, і саме цей дзвінок
   поставить обидва вагони в графік (див. syncBellBtn у src/funicular.js) */
#funiBellBtn.now .ico {
  color: #eaffe8;
  background: radial-gradient(circle at 36% 26%, #d6ffcf, #3fbf6a 54%, #0b3f1e 100%);
  box-shadow: 0 0 0 2.5px #39434e, 0 0 0 4.5px #060a0e,
    inset 0 2px 3px rgba(238, 255, 232, .55), inset 0 -3px 5px rgba(6, 52, 24, .6),
    0 0 18px rgba(86, 226, 140, .7);
  animation: bellNow .85s infinite;
}
#funiBellBtn.now .lbl { color: #b6f2cd; }
@keyframes bellNow {
  0% { box-shadow: 0 0 0 2.5px #39434e, 0 0 0 4.5px #060a0e, inset 0 2px 3px rgba(238,255,232,.55), inset 0 -3px 5px rgba(6,52,24,.6), 0 0 0 0 rgba(86,226,140,.75); }
  70% { box-shadow: 0 0 0 2.5px #39434e, 0 0 0 4.5px #060a0e, inset 0 2px 3px rgba(238,255,232,.55), inset 0 -3px 5px rgba(6,52,24,.6), 0 0 0 14px rgba(86,226,140,0); }
  100% { box-shadow: 0 0 0 2.5px #39434e, 0 0 0 4.5px #060a0e, inset 0 2px 3px rgba(238,255,232,.55), inset 0 -3px 5px rgba(6,52,24,.6), 0 0 0 0 rgba(86,226,140,0); }
}
@keyframes bellPulse {
  0% { box-shadow: 0 0 0 2.5px #39434e, 0 0 0 4.5px #060a0e, inset 0 2px 3px rgba(255,247,224,.55), inset 0 -3px 5px rgba(84,38,0,.6), 0 0 0 0 rgba(255,168,54,.65); }
  70% { box-shadow: 0 0 0 2.5px #39434e, 0 0 0 4.5px #060a0e, inset 0 2px 3px rgba(255,247,224,.55), inset 0 -3px 5px rgba(84,38,0,.6), 0 0 0 13px rgba(255,168,54,0); }
  100% { box-shadow: 0 0 0 2.5px #39434e, 0 0 0 4.5px #060a0e, inset 0 2px 3px rgba(255,247,224,.55), inset 0 -3px 5px rgba(84,38,0,.6), 0 0 0 0 rgba(255,168,54,0); }
}
.hudChip.ok { border-color: rgba(96,220,160,.75); background: rgba(12,54,34,.8); color: #b6f2cd; font-weight: 600; min-width: 0; }

/* ---------- рація диспетчера (лише зимова лінія, див. `radio` у src/maps.js) ---------- */
.radioBox {
  position: absolute; top: 8px; right: 8px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  max-width: min(64%, 320px);
  z-index: 3;
  text-align: left;
}
.radioBtn {
  position: relative; flex: none;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; cursor: pointer;
  color: #cfe2f2;
  background: rgba(12, 18, 25, .72);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  transition: background .16s, color .16s, border-color .16s;
}
.radioBtn:hover { background: rgba(30, 48, 66, .86); }
.radioBtn[aria-pressed="true"], .radioBtn.live { color: #9fe0ff; border-color: rgba(120, 200, 255, .55); }
.radioBtn.live::after {
  content: ""; position: absolute; inset: -3px; border-radius: 14px;
  border: 1px solid rgba(140, 210, 255, .5);
  animation: radioPing 1.4s ease-out 3;
  pointer-events: none;
}
@keyframes radioPing { from { opacity: .9; transform: scale(.86); } to { opacity: 0; transform: scale(1.16); } }
.radioDot {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: #e2554a; color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px rgba(10, 16, 22, .85);
}
.radioBubble {
  position: relative; width: 100%;
  box-sizing: border-box;
  background: rgba(13, 20, 29, .9);
  border: 1px solid rgba(122, 170, 210, .42);
  border-radius: 13px;
  padding: 8px 11px 7px;
  font-size: 12.5px; line-height: 1.4; color: #e4eefa;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  animation: radioIn .22s ease;
}
@keyframes radioIn { from { opacity: 0; transform: translateY(-7px); } }
.radioBubble::before {
  content: ""; position: absolute; top: -6px; right: 12px;
  width: 11px; height: 11px;
  background: rgba(16, 24, 34, .98);
  border-left: 1px solid rgba(122, 170, 210, .42);
  border-top: 1px solid rgba(122, 170, 210, .42);
  transform: rotate(45deg); border-radius: 2px 0 0 0;
}
.radioHead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 10px; letter-spacing: .9px; text-transform: uppercase; color: #8fb6d6;
}
.radioWho { color: #7d95ad; letter-spacing: .6px; }
.radioMsg { margin-top: 2px; overflow-wrap: anywhere; }
.radioMsg.blank { color: #86a0b6; font-style: italic; }
.radioFoot {
  display: none; justify-content: space-between; gap: 8px;
  margin-top: 6px; padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: #8fb6d6;
}
.radioCount { color: #cfe2f2; }
.radioLog { display: none; margin-top: 2px; max-height: 112px; overflow: auto; }
.radioBubble.open .radioFoot { display: flex; }
.radioBubble.open .radioLog { display: block; }
.radioRow {
  display: flex; gap: 7px;
  padding: 4px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 11.5px; color: #c3d5e6;
}
.radioRow:first-child { border-top: 0; }
.radioRow > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.radioTime { flex: none; color: #7d97ad; font-variant-numeric: tabular-nums; }
.radioFrom { flex: none; font-weight: 700; white-space: nowrap; }
.radioRow.who-master .radioFrom { color: #ffca7a; }
.radioRow.who-chief .radioFrom { color: #d9b3ff; }
.radioRow.who-self .radioFrom { color: #9dbdd6; }
.radioRow.who-self { color: #9fb4c6; }
.radioRow.who-pax .radioFrom { color: #a8e6a1; }
.radioText { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.plowBtn {
  display: flex; align-items: center; gap: 7px;
  max-width: 100%; padding: 9px 13px;
  border-radius: 12px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; text-align: left; line-height: 1.2;
  color: #1b1305;
  background: linear-gradient(180deg, #ffd479, #eea92f);
  border: 1px solid rgba(255, 238, 190, .7);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
  animation: radioIn .22s ease;
}
.plowBtn .ico { font-size: 14px; flex: none; }
.plowBtn:hover { filter: brightness(1.07); }
.plowBtn[data-mode="off"] {
  color: #16202a;
  background: linear-gradient(180deg, #e2eaf3, #b4c5d5);
  border-color: rgba(255, 255, 255, .62);
}

/* ---------- бокове скло (видно платформу, коли стоїмо на зупинці) ---------- */

@keyframes swIn { from { opacity: 0; transform: translateY(-10px); } }
.swHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.swTitle { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: #a9b9c8; }
.swState { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.swState.ok { color: #9df0b8; background: rgba(30, 90, 54, .55); }
.swState.wait { color: #ffd98a; background: rgba(86, 62, 12, .6); }
.swState.warn { color: #ffb6a6; background: rgba(86, 28, 20, .68); }
  display: block; width: 100%; height: auto; border-radius: 9px;
  background: #141b22;
  box-shadow: inset 0 0 0 2px rgba(120,140,160,.35), inset 0 0 22px rgba(0,0,0,.55);
}
.swFoot { margin-top: 5px; font-size: 10.5px; color: var(--dim); }
.endRemarks { font-size: 12px; margin: -6px 0 14px; padding: 8px 11px; border-radius: 10px; line-height: 1.45; }
.endRemarks.ok { background: rgba(30, 90, 54, .32); color: #a8ecc0; }
.endRemarks.bad { background: rgba(86, 28, 20, .38); color: #ffc2b2; }

.announceBar {
  position: absolute; left: 50%; bottom: 12px;
  transform: translateX(-50%);
  background: rgba(16, 24, 33, .86);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
  max-width: 92%;
  overflow: hidden; text-overflow: ellipsis;
  animation: pop .25s ease;
}
@keyframes pop { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- overlays ---------- */
/* Шар на весь екран (не лише сцена): на телефоні сцена всього ~250–430 px заввишки,
   і картка результатів у ній не вміщалася — зникали заголовок і кнопка «Нова поїздка».
   Тепер картка центрується auto-відступами (коли місця досить) і прокручується, коли
   не досить (низькі екрани в ландшафті). */
.overlay {
  position: fixed; inset: 0;
  display: flex;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(6, 10, 14, .72);
  backdrop-filter: blur(3px);
  z-index: 6;
  padding: 14px 14px max(14px, env(safe-area-inset-bottom));
}
.overlay > .card { margin: auto; }

/* ---------- екран завантаження: 5 с перед головним меню ---------- */
.bootOverlay {
  z-index: 9;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(130% 130% at 50% 0%, #182430, #0a0f15 72%);
  backdrop-filter: none;
}
.bootCard {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
  min-width: min(300px, 74vw);
}
.bootBrand {
  font-family: Manrope, Inter, sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 9vw, 46px);
  letter-spacing: 1.6px;
  color: #f7fafd;
  text-shadow: 0 12px 34px rgba(0, 0, 0, .6);
}
.bootBrand span { color: var(--red2); }
.bootTrack {
  position: relative;
  width: 100%;
  height: 24px;
  border-bottom: 2px solid rgba(255, 255, 255, .16);
}
.bootTram {
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 36px;
  height: 15px;
  border-radius: 5px 7px 3px 3px;
  background: linear-gradient(180deg, #f6f9fc, #c6d2dd);
  box-shadow: 0 0 14px rgba(255, 206, 136, .5);
  animation: bootRun 1.7s ease-in-out infinite alternate;
}
.bootTram::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 22px;
  height: 5px;
  border-radius: 2px;
  background: rgba(255, 214, 150, .95);
}
.bootTram::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: repeating-linear-gradient(90deg, #3a444e 0 3px, transparent 3px 6px);
}
@keyframes bootRun {
  from { left: 0; }
  to { left: calc(100% - 36px); }
}
.bootText { font-size: 13px; color: var(--dim); letter-spacing: .3px; }
.bootBarWrap {
  width: min(280px, 72vw);
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.bootBar {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red2), #ffce88);
  transition: width .2s linear;
}
.card {
  background: linear-gradient(180deg, #1e2833, #161e27);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 22px;
}
.startCard { text-align: center; max-width: 400px; width: 100%; }
.startTitle {
  font-family: Manrope, Inter, sans-serif; font-weight: 800;
  font-size: 26px; letter-spacing: .3px;
  background: linear-gradient(90deg, #fff, #ffb38a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.startSub { color: var(--dim); font-size: 13px; margin: 6px 0 14px; }
.startFacts {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-bottom: 18px;
}
.startFacts span {
  font-size: 11px; color: #cfe0ee;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  padding: 4px 9px; border-radius: 999px;
}
.primaryBtn {
  width: 100%;
  padding: 13px;
  border: none; border-radius: 12px;
  background: linear-gradient(180deg, var(--red2), var(--red));
  color: #fff; font-size: 16px; font-weight: 700;
  font-family: Manrope, Inter, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(216, 66, 47, .32);
  transition: transform .1s, filter .15s;
}
.primaryBtn:hover { filter: brightness(1.08); }
.primaryBtn:active { transform: translateY(1px) scale(.99); }
.buildTag { margin-top: 12px; font-size: 10px; color: #5f7183; letter-spacing: .5px; }

/* ---------- головна сторінка: усі лінії ---------- */
.homeCard { max-width: 700px; width: 100%; padding: 14px; }
.homeHead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 11px;
}
.homeBrand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.homeTitle {
  font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 19px;
  background: linear-gradient(90deg, #fff, #ffb38a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* градієнт ріжеться по рамці елемента, тож якщо текст ширший за неї —
     «хвіст» стає прозорим. Тримаємо заголовок в один рядок, щоб він не рвався. */
  white-space: nowrap;
}
.homeSub { color: var(--dim); font-size: 11.5px; margin-top: 2px; }
.homeSection { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; margin: 0 0 8px; }
.homeSection > span:first-child {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #9fb3c4;
}
.homeSectionHint { font-size: 10.5px; color: var(--dim); }
.homeMaps { margin-bottom: 2px; }
.homeTrains { margin-bottom: 2px; }
/* на головній карток багато (3 лінії + 3 потяги) — тримаємо їх щільніше */
.homeMaps, .homeTrains { gap: 8px; }

/* дві шпальти на головній: лінії | потяги (на вузькому екрані — одна під одною) */
.homeCols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; }
@media (min-width: 720px) {
  .homeCard { max-width: 960px; }
  .homeCols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
}

/* перемикач режимів перевезень на головній (пасажирські / вантажні / фірмові) */
.modeTabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 4px; margin-bottom: 12px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
}
.modeTab {
  border: none; background: none; color: var(--dim);
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  font-family: Manrope, Inter, sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: .01em; line-height: 1.15;
  transition: background .15s, color .15s, box-shadow .15s;
}
.modeTab:hover { background: rgba(255,255,255,.05); color: #dbe6f0; }
.modeTab.sel {
  background: linear-gradient(180deg, var(--red2), var(--red));
  color: #fff;
  box-shadow: 0 4px 12px rgba(216,66,47,.3);
}

/* «тут поки що пусто» — порожній вантажний режим */
.emptyBox {
  position: relative;
  margin-top: 4px; padding: 30px 18px 32px;
  text-align: center;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 15px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 12px, rgba(255,255,255,0) 12px 24px),
    rgba(255,255,255,.015);
}
.emptyIco { font-size: 32px; line-height: 1; margin-bottom: 10px; }
.emptyTitle {
  font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 14.5px;
  margin-bottom: 6px;
}
.emptyText { font-size: 12px; color: var(--dim); line-height: 1.5; max-width: 380px; margin: 0 auto; }

@media (max-width: 560px) {
  /* вузький екран: заголовок і кнопки не вміщаються в один рядок — переносимо їх */
  .homeHead { flex-wrap: wrap; row-gap: 8px; }
  .modeTab { font-size: 11.5px; padding: 8px 7px; }
}
@media (max-width: 400px) {
  /* найдрібніші телефони: заголовок мусить уміститися в рядок із номером лінії */
  .homeTitle { font-size: 16.5px; }
}
.homeFoot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 8px 12px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line);
}
.homeFoot .buildTag { margin-top: 0; }

.endCard { max-width: 420px; width: 100%; }
.endTitle {
  font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 21px;
  margin-bottom: 14px; text-align: center;
}
.endGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.endItem {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px; padding: 9px 11px;
}
.endItem b { display: block; font-size: 18px; font-family: Manrope, Inter, sans-serif; }
/* ---------- пауза ---------- */
.pauseOverlay { z-index: 7; }
.pauseCard { max-width: 360px; width: 100%; text-align: center; }
.pauseGlyph { color: #ffd479; display: flex; justify-content: center; margin-bottom: 10px; }
.pauseGlyph svg { display: block; }
.pauseTitle {
  font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 24px;
  letter-spacing: .3px; margin-bottom: 7px;
}
.pauseHint { color: var(--dim); font-size: 13px; line-height: 1.5; margin-bottom: 18px; }
.pauseCard .ghostBtn { margin-top: 9px; }
.endItem span { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .7px; }

/* Низькі екрани: картки старту/результатів мусять уміститися цілком (заголовок,
   усі показники й кнопка внизу), тому стискаємо відступи, кеглі та сітку. */
@media (max-height: 780px) {
  .card { padding: 15px; }
  .endTitle { font-size: 18px; margin-bottom: 9px; }
  .endGrid { gap: 6px; margin-bottom: 11px; }
  .endItem { padding: 6px 9px; }
  .endItem b { font-size: 16px; }
  .endItem span { font-size: 9.5px; letter-spacing: .4px; }
  .endRemarks { font-size: 11px; margin: -4px 0 10px; padding: 6px 9px; }
  .primaryBtn { padding: 11px; font-size: 15px; }
  .buildTag { margin-top: 8px; }
}
@media (max-height: 660px) {
  .card { padding: 12px; }
  .endGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .endTitle { font-size: 16px; margin-bottom: 7px; }
  .endItem b { font-size: 14.5px; }
  .endItem span { font-size: 8.5px; letter-spacing: .2px; }
  .endRemarks { font-size: 10px; margin: -2px 0 8px; padding: 5px 8px; line-height: 1.35; }
  .primaryBtn { padding: 9px; font-size: 14px; }
  .startTitle { font-size: 20px; }
  .startSub { font-size: 12px; margin: 4px 0 10px; }
  .startFacts { margin-bottom: 11px; gap: 5px; }
  .startFacts span { font-size: 10px; padding: 3px 7px; }
  .buildTag { margin-top: 6px; }
}

/* ---------- control bar ---------- */
.controlBar {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) minmax(150px, 210px);
  grid-template-rows: auto auto auto;
  gap: 10px;
  padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #182029, #111820);
  border-top: 1px solid var(--line);
  align-items: stretch;
}
.ebBox { grid-column: 1; grid-row: 1 / span 2; }
.dashBox { grid-column: 2; grid-row: 1; }
.btnBox { grid-column: 2 / 4; grid-row: 2; }
.wheelBox { grid-column: 3; grid-row: 1; }
.statusBox { grid-column: 1 / -1; grid-row: 3; }

/* ---------- пульт провідника (фірмовий маршрут) ----------
   Показується ЗАМІСТЬ пульта машиніста, доки активний режим провідника:
   тоді гравець не керує потягом, а виконує обов'язки (див. src/conductor.js) */
.condBar {
  display: none;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0 10px;
}
body.condMode .condBar { display: flex; }
body.condMode .controlBar > .ebBox,
body.condMode .controlBar > .dashBox,
body.condMode .controlBar > .wheelBox,
body.condMode .controlBar > .btnBox { display: none !important; }
/* рація диспетчера — частина рейсу машиніста (її події веде gameLogic, якого
   в режимі провідника немає), тож кнопку рації тут ховаємо. Натомість
   показуємо ВЛАСНІ повідомлення провідника (#condMsgCols: рація + пасажири). */
body.condMode #radioBox { display: none !important; }
body:not(.condMode) .condRadioBox { display: none !important; }
body:not(.condMode) .condMsgCols { display: none !important; }
/* у режимі провідника лишаємо максимум місця самій лінії: легенду розкладки
   й «пульт» стискаємо до мінімуму (прохання Кирила «щоб було місце на карту») */
body.condMode .routeLegend { display: none; }
body.condMode .topbar { padding: 5px 10px; }
body.condMode .brandTxt { min-width: 0; }
body.condMode .lineName { font-size: 13px; }
body.condMode .lineSub { font-size: 9.5px; }
body.condMode .coinChip { padding: 2px 7px; font-size: 11px; }
body.condMode .iconBtn { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }

.condBox {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; padding: 5px 9px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}
.condWho { flex: 0 0 auto; }
/* кнопки — на всю решту ширини пульта: підказок унизу більше немає, усе, що
   треба знати, приходить по рації (прохання Кирила) */
.condActions { flex: 1 1 auto; border: 0; background: none; padding: 0; }
.condTop { display: flex; align-items: center; gap: 8px; }
.condName { font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 13.5px; color: #eef4fa; white-space: nowrap; }
.condRoute { font-size: 11px; color: var(--dim); white-space: nowrap; }
.condMeters { display: flex; align-items: center; gap: 7px; }
/* шкала чистоти вагона: повна — щойно вимито, коротка — брудний */
.condCleanRow { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.condCleanTrack {
  flex: 0 0 auto; width: 54px; height: 5px;
  border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden;
}
.condCleanTrack > i {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #3f9e6a, #6fd39a); transition: width .3s;
}
.condCleanTrack > i.bad { background: linear-gradient(90deg, #b3622a, #e0a13b); }
.condCleanVal { font-family: Manrope, Inter, sans-serif; font-size: 10px; font-weight: 700; color: var(--dim); }
.condBtns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.condBtn {
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: #dfe9f2; padding: 8px 11px; border-radius: 9px; cursor: pointer;
  font-family: Manrope, Inter, sans-serif; font-size: 11.5px; font-weight: 700;
  transition: background .15s, border-color .15s, opacity .15s;
  white-space: nowrap;
}
.condBtn:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.condBtn.primary { background: linear-gradient(180deg, #2f9e63, #237c4c); border-color: transparent; color: #fff; }
.condBtn.primary.open { background: linear-gradient(180deg, #d8422f, #a82f20); }
.condBtn.white { background: linear-gradient(180deg, #dbeaff, #a9c8e8); color: #13293d; border-color: transparent; }
/* біле світло перекриває «червоне» (open) — інакше кнопка, якою показують БІЛИЙ
   сигнал, світилася червоним (специфічність .primary.open сильніша за .white) */
.condBtn.primary.open.white { background: linear-gradient(180deg, #eef5ff, #b9d4ef); color: #10293d; box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset; }
.condBtn.hot { border-color: rgba(242,96,63,.75); box-shadow: 0 0 0 1px rgba(242,96,63,.28) inset; animation: condHot 1.6s ease-in-out infinite; }
@keyframes condHot { 0%,100% { box-shadow: 0 0 0 0 rgba(242,96,63,.45); } 50% { box-shadow: 0 0 10px 2px rgba(242,96,63,.32); } }
.condBtn.ghost { background: none; }
/* туалет зачинено — видно з кнопки, навіть коли вона не «гаряча» */
.condBtn.ghost.closed { background: rgba(240,180,41,.16); border-color: rgba(240,180,41,.5); }
.condBtn.ghost.closed.hot { background: rgba(240,180,41,.24); border-color: rgba(240,180,41,.7); animation: none; }
/* кнопка ніколи не «мертва»: якщо дія зараз недоречна — вона просто тьмяніша,
   а клік пояснює, чому саме (раніше кнопки були disabled і мовчали) */
.condBtn:disabled { opacity: .42; cursor: default; }
.condBtn.dim { opacity: .58; }
.condBtn.dim:hover { background: rgba(255,255,255,.05); }

/* ---------- повідомлення провіднику (рація + пасажири) ---------- */
.condMsgCols {
  position: absolute; top: 8px; right: 8px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  max-width: min(70%, 320px);
  z-index: 3; text-align: left;
}
.condMsgCols .radioBox { position: static; max-width: 100%; }
.condMsgCols .radioTop { display: flex; align-items: center; gap: 8px; }
.radioTag {
  font-family: Manrope, Inter, sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px;
  color: #9ec8e8; background: rgba(74,163,224,.14); border: 1px solid rgba(74,163,224,.34);
}
.paxTag { color: #ffdca0; background: rgba(224,161,59,.15); border-color: rgba(224,161,59,.42); }
.paxBtn { color: #ffe0a3; }
.paxBtn.live { color: #ffd479; border-color: rgba(255,206,120,.6); }
.paxDot { background: #e0a13b; }

/* ---------- міні-карта вагона (режим провідника) ----------
   Постійно висне зверху сцени (по центру) — компактна схема вагона гравця:
   зайняті місця, замовлення чаю й де зараз провідник. Заголовок згортає її,
   щоб не заважала оглянути сцену (див. src/conductor.js + src/coach.js). */
.miniMapWrap {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  width: min(48%, 500px);
  display: flex; justify-content: center;
  pointer-events: none;
}
.miniMap {
  position: relative; width: 100%;
  pointer-events: auto;
  background: rgba(11, 17, 24, .78);
  border: 1px solid rgba(120, 170, 210, .38);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .42);
  backdrop-filter: blur(7px);
}
.miniHead {
  display: flex; align-items: center; gap: 7px;
  width: 100%; box-sizing: border-box;
  padding: 4px 9px;
  border: 0; border-radius: 12px 12px 0 0; cursor: pointer;
  background: none; color: #d8e8f6; text-align: left;
  font-family: Manrope, Inter, sans-serif;
}
.miniHead:hover { background: rgba(255,255,255,.06); }
.miniChev { flex: none; width: 9px; font-size: 9px; color: #8fb6d6; }
.miniTitle { flex: 1 1 auto; min-width: 0; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.miniChips { margin-left: auto; flex: none; display: flex; gap: 5px; }
.miniChip {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(74,163,224,.16); border: 1px solid rgba(74,163,224,.4);
  font-size: 9.5px; color: #cfe6f8;
}
.miniChip b { font-size: 11px; font-weight: 800; }
.miniChip i { font-style: normal; color: #9dbdd6; }
.miniChip.free { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }
/* окремо «чистий вагон» і окремо «робота провідника» (прохання Кирила) */
.miniChip.clean { background: rgba(95,214,160,.14); border-color: rgba(95,214,160,.36); }
.miniChip.clean.bad { background: rgba(242,96,63,.16); border-color: rgba(242,96,63,.45); color: #ffcbbc; }
.miniChip.work { background: rgba(178,124,255,.14); border-color: rgba(178,124,255,.38); }
.miniChip.work.hot { background: rgba(240,180,41,.18); border-color: rgba(240,180,41,.5); }
.miniBody { position: relative; padding: 0 4px 4px; }
#miniCanvas { display: block; width: 100%; border-radius: 8px; cursor: pointer; }
.miniTip { z-index: 4; }
body:not(.condMode) .miniMapWrap { display: none !important; }

/* ---------- БЛАНК ПРОВІДНИКА ---------- */
.blankOverlay { z-index: 40; }
.blankCard {
  width: min(1180px, 96vw);
  max-height: 96vh;
  overflow: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px 10px;
}
.blankHead { display: flex; align-items: center; gap: 12px; }
.blankTitles { flex: 1 1 auto; min-width: 0; }
.blankTitle { font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 17px; color: #eef4fa; }
.blankSub { font-size: 11.5px; color: var(--dim); }
.blankCounters { display: flex; gap: 7px; }
.paxChip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(74,163,224,.14); border: 1px solid rgba(74,163,224,.44);
  font-size: 10.5px; color: #cfe6f8;
}
.paxChip b { font-family: Manrope, Inter, sans-serif; font-size: 14px; }
.paxChip.free { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: var(--dim); }
.blankHint {
  font-size: 12px; line-height: 1.35; color: #cfdcea;
  background: rgba(255,255,255,.04); border-left: 3px solid rgba(150,180,210,.45);
  border-radius: 7px; padding: 5px 9px;
}
.blankHint.act { border-left-color: var(--red2); background: rgba(242,96,63,.12); color: #ffe6de; }
.blankMapWrap { position: relative; width: 100%; }
#blankCanvas { display: block; width: 100%; border-radius: 10px; cursor: pointer; }
.seatTip {
  position: absolute; z-index: 2; pointer-events: none;
  min-width: 132px; max-width: 210px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 9px; border-radius: 10px;
  background: rgba(12,19,27,.95);
  border: 1px solid rgba(140,190,230,.5);
  box-shadow: 0 10px 22px rgba(0,0,0,.5);
  font-size: 11.5px; color: #e6f0fa;
}
.seatTip b { font-family: Manrope, Inter, sans-serif; font-size: 12px; }
.seatTip span { color: #b9cbdd; }
.seatTip span.nextOff { color: #c9a6ff; font-weight: 700; }
.blankLegend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: #b6c4d2;
}
.blankLegend span { display: inline-flex; align-items: center; gap: 5px; }
.lgPad { width: 15px; height: 9px; border-radius: 3px; display: inline-block; }
.lgPad.busy { background: #38669a; border: 1px solid rgba(180,215,245,.6); }
.lgPad.free { background: rgba(255,255,255,.05); border: 1px dashed rgba(120,145,170,.8); }
.lgPad.exit { background: rgba(242,96,63,.25); border: 1px solid var(--red2); }
.lgPad.next { background: rgba(150,112,220,.35); border: 1px solid #b07cff; }
.lgPad.tea { background: rgba(240,180,41,.25); border: 1px solid var(--gold); }
.blankReport { display: flex; flex-direction: column; gap: 6px; }
.repTitle { font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 13px; color: #eef4fa; }
.repGrid { display: flex; flex-wrap: wrap; gap: 7px; }
.blankSignWrap { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.signCanvas { border-bottom: 1px solid rgba(200,220,240,.45); }
.signFoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.signHint { font-size: 11px; color: var(--dim); }
.blankFoot { display: flex; gap: 8px; justify-content: flex-end; }

/* на ПК/ландшафті пульт машиніста розкладено по БОКАХ сцени (display:contents),
   тож у режимі провідника сцена займає весь верх, а пульт — окремий рядок знизу */
@media (min-width: 1000px) and (orientation: landscape) {
  body.condMode .sceneWrap { grid-area: 3 / 1 / 4 / 5; }
  body.condMode .condBar { grid-area: 4 / 1 / 5 / 5; }
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 999px) {
  body.condMode .sceneWrap { grid-area: 3 / 1 / 4 / 5; }
  body.condMode .condBar { grid-area: 4 / 1 / 5 / 5; }
  /* короткий ландшафт (телефон боком): пульт мусить бути зовсім низьким, щоб
     сцені лишалось місце — підказок унизу вже немає, лише кнопки */
  .condBar { gap: 4px; padding: 0 7px; }
  .condBox { padding: 4px 7px; }
  .condActions { flex: 1 1 62%; }
  .condBtn { flex: 1 1 30%; padding: 4px 6px; font-size: 10.5px; }
}
/* вузький екран: пульт провідника стає двома рядками, кнопки — на всю ширину */
@media (max-width: 900px) {
  .condBar { flex-wrap: wrap; }
  .condWho { flex: 0 0 auto; }
  .condActions { flex: 1 1 auto; }
  .condBtns { justify-content: center; }
  .condBtn { flex: 1 1 30%; text-align: center; justify-content: center; }
  .miniMapWrap { width: min(66%, 420px); }
}
@media (max-width: 700px) {
  .condName { font-size: 12.5px; }
  /* сьома кнопка (туалет) додала рядок — кнопки трохи нижчі, щоб пульт не
     з'їдав місце у сцени */
  .condBtn { flex: 1 1 44%; font-size: 11px; padding: 6px 7px; }
  .condBtns { gap: 5px; }
  .blankCard { width: 98vw; padding: 9px 9px 8px; }
  .blankTitle { font-size: 15px; }
  .blankCounters { display: none; }
  .condMsgCols { max-width: 84%; }
  /* телефон: міні-карта — тонка смуга на всю ширину, а HUD і повідомлення
     зсуваємо під неї, щоб нічого не налазило одне на одного */
  .miniMapWrap { top: 5px; left: 6px; right: 6px; width: auto; transform: none; }
  /* на телефоні чіпи робимо дрібнішими, щоб у смузі вмістилися і чистота, і
     робота провідника, і зайнятість місць */
  .miniChips { gap: 4px; }
  .miniChip { padding: 1px 5px; font-size: 9px; }
  .miniChip b { font-size: 10px; }
  body.condMode .sceneHud { top: 96px; max-width: 44%; }
  body.condMode .condMsgCols { top: 96px; max-width: 48%; }
  .radioTag { font-size: 9px; padding: 2px 6px; letter-spacing: .06em; }
  .condMsgCols .radioTop { gap: 5px; }
}

/* заголовок групи елементів пульта — щоб було видно, що до чого належить */
.grpHead {
  width: 100%;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fa3b6;
  text-align: center;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex: 0 0 auto;
}
.grpHead::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--red);
  vertical-align: 1px;
}
.grpSub {
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7b8fa1;
  text-align: left;
  margin-top: 1px;
}
.grpHint {
  font-size: 9px;
  line-height: 1.25;
  color: #7d8fa0;
  text-align: center;
}

.dashBox {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 6px;
}
#speedCanvas { display: block; }
.dashInfo { width: 100%; display: flex; flex-direction: column; gap: 3px; padding: 0 4px; }
.readRow {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 11px;
  background: rgba(0,0,0,.24);
  border-radius: 8px;
  padding: 3px 8px;
}
.readRow .k { color: var(--dim); }
.readRow .v { font-weight: 800; font-family: Manrope, Inter, sans-serif; color: #dbe6f0; }

.reverser {
  display: flex; align-items: center;
  gap: 3px; margin-top: 2px;
  background: rgba(0,0,0,.25); border-radius: 9px; padding: 3px;
}
.reverser button {
  flex: 1; border: none; background: rgba(255,255,255,.06); color: var(--dim);
  border-radius: 7px; font-size: 10.5px; padding: 4px 0; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.reverser button.sel { background: var(--red); color: #fff; }

.btnBox {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 6px 7px;
}
.btnRow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; }
/* у групі лишилась одна кнопка (дзвінок прибрано) — розтягуємо її на всю ширину */
.btnRow > .ctlBtn:only-child { grid-column: 1 / -1; }
/* кнопки пульта — круглі, з виступаючим чорним обідком і підписом під ними,
   як на справжньому пульті трамвая */
.ctlBtn {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 5px;
  padding: 1px 2px 2px;
  border: none;
  background: none;
  color: var(--txt);
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ctlBtn .ico {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
  color: #c9d5e0;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.15), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 50% 58%, #2e3843, #1b232b 62%, #0e141a 100%);
  box-shadow:
    0 0 0 2.5px #39434e,
    0 0 0 4.5px #060a0e,
    inset 0 1px 1px rgba(255,255,255,.13),
    inset 0 -2px 4px rgba(0,0,0,.62),
    0 4px 6px rgba(0,0,0,.5);
  transition: box-shadow .16s, color .16s, background .16s;
}
.btnGroup { display: flex; flex-direction: column; gap: 3px; }
.ctlBtn .ico { font-weight: 500; }
.ctlBtn .lbl {
  font-size: 9.5px; line-height: 1.15; text-align: center;
  font-weight: 600; letter-spacing: .02em; color: #9fb0c1;
}
.ctlBtn:hover .ico {
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.2), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 50% 58%, #38434f, #212a33 62%, #11171e 100%);
}
.ctlBtn:active .ico { transform: scale(.95); }
.ctlBtn:active .ico {
  box-shadow:
    0 0 0 2.5px #39434e,
    0 0 0 4.5px #060a0e,
    inset 0 3px 6px rgba(0,0,0,.72),
    inset 0 -1px 2px rgba(255,255,255,.08),
    0 1px 2px rgba(0,0,0,.5);
}
.ctlBtn.on .ico { color: #fff; }
.ctlBtn.on .lbl { color: #dce8f3; }
.ctlBtn:disabled { opacity: .4; cursor: default; }
/* підсвічені кнопки — як на фото: бурштин, синє, зелене, біле, червоне */
#pantoBtn.on .ico {
  background: radial-gradient(circle at 36% 26%, #ffd489, #e08a1c 54%, #6f3a05 100%);
  box-shadow: 0 0 0 3px #1a222b, 0 0 0 4.5px #0a0f14,
    inset 0 2px 3px rgba(255,247,224,.55), inset 0 -3px 5px rgba(84,38,0,.6),
    0 0 16px rgba(255,168,54,.55);
}
#doorsOpenBtn.on .ico {
  background: radial-gradient(circle at 36% 26%, #aadcff, #2b8fe0 54%, #0b3d72 100%);
  box-shadow: 0 0 0 3px #1a222b, 0 0 0 4.5px #0a0f14,
    inset 0 2px 3px rgba(240,250,255,.55), inset 0 -3px 5px rgba(6,40,80,.6),
    0 0 16px rgba(58,158,255,.55);
}
#doorsCloseBtn.on .ico {
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.22), rgba(255,255,255,0) 62%),
    radial-gradient(circle at 50% 58%, #2f7554, #17452f 62%, #0a2a1c 100%);
  box-shadow: 0 0 0 3px #1a222b, 0 0 0 4.5px #0a0f14,
    inset 0 1px 2px rgba(240,255,246,.26), inset 0 -2px 4px rgba(4,48,24,.6),
    0 0 6px rgba(66,208,128,.2);
}
#headBtn.on .ico {
  background: radial-gradient(circle at 36% 26%, #fffdf0, #f2dd93 54%, #7f6915 100%);
  box-shadow: 0 0 0 3px #1a222b, 0 0 0 4.5px #0a0f14,
    inset 0 2px 3px rgba(255,255,255,.7), inset 0 -3px 5px rgba(96,78,10,.6),
    0 0 18px rgba(255,236,164,.6);
}
#cabinBtn.on .ico {
  background: radial-gradient(circle at 36% 26%, #ffe3b6, #d99a43 54%, #6b4410 100%);
  box-shadow: 0 0 0 3px #1a222b, 0 0 0 4.5px #0a0f14,
    inset 0 2px 3px rgba(255,250,238,.55), inset 0 -3px 5px rgba(86,54,8,.6),
    0 0 14px rgba(232,176,96,.5);
}
.keyHint {
  margin-top: auto;
  font-size: 9.5px;
  line-height: 1.3;
  color: #8ba0b5;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 4px;
}

.statusGroup {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.statusRow { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chip {
  font-size: 11px;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #c6d5e3;
  white-space: nowrap;
}
.chip.ok { color: #a9e8c8; border-color: rgba(76,195,138,.4); background: rgba(76,195,138,.12); }
.chip.bad { color: #ffb3a7; border-color: rgba(242,96,63,.4); background: rgba(242,96,63,.12); }

.wheelBox {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 6px;
  touch-action: none;
}
.wheelRow { display: flex; align-items: center; justify-content: center; gap: 10px; }
.wheelCol { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; }

/* ручне (аварійне) гальмо: червоний важіль у власній панелі збоку від пульта */
.ebBox {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 5px;
  background: linear-gradient(180deg, #1c242e, #121820);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  padding: 8px 4px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.ebFoot { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ebLever {
  position: relative;
  width: 100%; max-width: 124px;
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 330px;
  outline: none;
}
.ebLever:focus-visible { box-shadow: 0 0 0 2px rgba(120,200,255,.45); border-radius: 10px; }
.ebSvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ebSector { fill: url(#ebRedSec); stroke: rgba(58,16,9,.55); stroke-width: .7; }
.ebSectorEdge { stroke: rgba(255,206,182,.3); stroke-width: 1.1; stroke-linecap: round; }
.ebBrace { fill: url(#ebRedDark); stroke: rgba(38,9,5,.75); stroke-width: .9; }
.ebBraceHole { fill: #16110e; stroke: rgba(0,0,0,.5); stroke-width: .5; }
.ebRod { fill: url(#ebRedCyl); stroke: rgba(58,16,9,.7); stroke-width: .9; }
.ebRodIn { stroke: rgba(70,18,8,.22); stroke-width: 1.8; stroke-linecap: round; }
.ebRodShade { stroke: rgba(64,20,11,.34); stroke-width: 3.6; stroke-linecap: round; }
.ebSheen { stroke: rgba(255,222,204,.34); stroke-width: 2.1; stroke-linecap: round; }
.ebPlateShadow { fill: rgba(0,0,0,.34); }
.ebPlate { fill: url(#ebRedPlate); stroke: rgba(38,9,5,.8); stroke-width: .9; }
.ebPlateTop { fill: rgba(255,255,255,.07); }
.ebPlateEdge { stroke: rgba(255,205,180,.16); stroke-width: 1.4; stroke-linecap: round; }
.ebRim { stroke: rgba(255,190,165,.22); stroke-width: 1.6; stroke-linecap: round; }
.ebSectorIn { stroke: rgba(60,14,7,.28); stroke-width: 3.4; stroke-linecap: round; }
.ebWasher { fill: #1e242a; stroke: rgba(0,0,0,.55); stroke-width: .8; }
.ebPawl { fill: url(#ebSteelCyl); stroke: rgba(0,0,0,.55); stroke-width: .8; }
.ebPawlBolt { fill: url(#ebBolt); stroke: rgba(0,0,0,.5); stroke-width: .6; }
.ebHole { fill: #16110e; stroke: rgba(255,190,160,.26); stroke-width: .8; }
.ebPivot { fill: url(#ebBolt); stroke: rgba(0,0,0,.5); stroke-width: .7; }
.ebHex { fill: #2b333a; stroke: rgba(0,0,0,.55); stroke-width: .6; }
.ebHexLit { fill: rgba(190,205,218,.5); }
.ebArmG {
  transform-box: view-box;
  transform-origin: 63px 157px;
  transform: rotate(-8deg);
  transition: transform .22s cubic-bezier(.24,1.3,.4,1);
}
.ebBox.on .ebArmG { transform: rotate(18deg); }
.ebState {
  display: flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  font-family: Manrope, Inter, sans-serif; color: var(--dim);
}
.ebLed {
  width: 9px; height: 9px; border-radius: 50%;
  background: #24303c; box-shadow: inset 0 0 2px rgba(0,0,0,.8);
  transition: background .18s, box-shadow .18s;
}
.ebBox.on .ebLed { background: #ff5a3c; box-shadow: 0 0 12px rgba(255,90,50,1), 0 0 4px #ff8a6a; }
.ebBox.on .ebState { color: #ffb2a0; }
#wheelCanvas { display: block; cursor: grab; touch-action: none; }
#wheelCanvas:active { cursor: grabbing; }
.wheelBtns { display: flex; gap: 8px; margin-top: 2px; }
.wheelBtn {
  width: 50px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(198,152,88,.5);
  background: linear-gradient(180deg, #6d4526, #43291a);
  color: #f0dcb4;
  font-size: 17px; font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,225,180,.22), 0 1px 2px rgba(0,0,0,.4);
}
.wheelBtn:hover { background: linear-gradient(180deg, #7d502c, #4d301d); }
.wheelBtn:active { transform: scale(.95); }
.wheelHint {
  font-size: 9.5px; color: #7d8fa0; text-align: center; line-height: 1.25; max-width: 200px;
}

/* ---------- modals ---------- */
.modal {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 12, .7);
  backdrop-filter: blur(3px);
  padding: 14px;
}
.modalCard { max-width: 560px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; padding: 0; }
.modalHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 16px;
}
.modalBody { padding: 16px; overflow-x: hidden; overflow-y: auto; }
.helpRow { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.helpIco {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.helpRow b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.helpRow p { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.45; }

/* ---------- довідка: вкладки, опис лінії, правові документи ---------- */
.infoTabs { flex-wrap: wrap; margin-bottom: 14px; }
.infoTabs button { flex: 1 1 auto; white-space: nowrap; }
.infoLead { margin: 0 0 12px; font-size: 12.8px; line-height: 1.55; color: var(--dim); }
.infoFacts, .infoMeta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.infoFact, .infoMeta span {
  font-size: 11.5px; color: var(--dim);
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  padding: 3px 9px; border-radius: 999px;
}
.infoNeed { margin: 0 0 12px; font-size: 12.5px; color: #ffd08a; line-height: 1.45; }
.infoSecTitle {
  font-weight: 700; font-size: 13px; margin: 14px 0 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.infoDoc p { margin: 0 0 11px; font-size: 12.6px; line-height: 1.6; color: var(--dim); }
.infoDoc p:last-child { color: #8fb6d8; }
@media (max-width: 430px) {
  .infoTabs button { padding: 5px 8px; font-size: 11.5px; }
}
.setRow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
}
.setVal { color: var(--dim); font-size: 12px; }
.seg { display: flex; gap: 4px; background: rgba(0,0,0,.28); padding: 3px; border-radius: 10px; }
.seg button {
  border: none; background: none; color: var(--dim);
  padding: 5px 11px; border-radius: 8px; font-size: 12px; cursor: pointer;
  font-family: inherit;
}
.seg button.sel { background: var(--red); color: #fff; font-weight: 600; }
.ghostBtn {
  margin-top: 16px; width: 100%;
  padding: 10px; border-radius: 11px;
  border: 1px solid var(--line); background: none; color: var(--txt);
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.ghostBtn:hover { background: rgba(255,255,255,.06); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .controlBar {
    grid-template-columns: 56px minmax(0, 1fr) 118px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 6px; padding: 7px;
  }
  .ebBox { padding: 6px 3px; gap: 4px; }
  .grpHead { font-size: 7.5px; letter-spacing: .05em; padding-bottom: 2px; }
  .grpHead::before { width: 4px; height: 4px; margin-right: 3px; }
  .grpHint { display: none; }
  .ebLever { min-height: 68px; max-height: 190px; max-width: 68px; }
  .ebState { font-size: 8.5px; }
  .dashBox {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 3px 8px; padding: 4px 6px;
  }
  .dashBox .grpHead { flex: 0 0 100%; }
  .dashInfo { width: auto; flex: 1 1 42%; min-width: 0; }
  .readRow { font-size: 10px; padding: 2px 6px; }
  .grpSub { font-size: 7.5px; }
  .btnBox { padding: 5px; gap: 4px; }
  .btnRow { gap: 5px; }
  .ctlBtn { gap: 4px; }
  .ctlBtn .ico { width: 38px; height: 38px; font-size: 14px; }
  .ctlBtn .lbl { font-size: 8.5px; }
  .keyHint { display: none; }
  .wheelBox { padding: 5px; gap: 3px; }
  .wheelHint { font-size: 8.5px; max-width: 110px; line-height: 1.2; }
  .statusGroup { margin-top: 4px; padding-top: 4px; gap: 3px; }
  .statusRow { gap: 4px; }
  .chip { font-size: 10px; padding: 3px 7px; }
  .wheelRow { flex-direction: column; gap: 6px; }
}

@media (max-height: 700px) and (orientation: landscape) and (max-width: 999px) {
  .controlBar {
    grid-template-columns: 52px minmax(0, 1fr) 140px;
    gap: 6px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  }
  .ebBox { padding: 5px 3px; }
  .grpHead { font-size: 7px; letter-spacing: .03em; }
  .ebLever { max-width: 58px; min-height: 58px; max-height: 150px; }
  .dashBox { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
  .dashBox .grpHead { flex: 0 0 100%; }
  .dashInfo { width: auto; flex: 1 1 46%; min-width: 0; }
  .btnRow { gap: 4px; }
  .ctlBtn { gap: 3px; }
  .ctlBtn .ico { width: 34px; height: 34px; font-size: 13px; }
  .ctlBtn .lbl { font-size: 8px; }
  .grpSub { display: none; }
  .keyHint { display: none; }
  .wheelHint { display: none; }
  .statusGroup { display: none; }
}

@media (max-width: 560px) {
  .topbar { padding: 4px 8px; gap: 5px; }
  .lineNo { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }
  .lineName { font-size: 13px; }
  .lineSub { display: none; }
  .iconBtn { width: 31px; height: 31px; border-radius: 10px; }
  .topActions { gap: 4px; }
  .coinChip { padding: 3px 7px; font-size: 11.5px; gap: 4px; }
  /* легенду смуги рейсу на телефоні ховаємо — вона з'їдала ~24 px, а всю
     потрібну інформацію видно на самій смузі; сцена через це вища */
  .routeLegend { display: none; }
  .hudChip { font-size: 11px; min-width: 88px; padding: 4px 7px; }
  .hudLabel { font-size: 9.5px; }
  .startTitle { font-size: 22px; }
  /* Вузький (телефонний) екран: сцена — «карта, де їде потяг» — має бути якнайбільшою,
     тому пульт стискаємо по висоті: кнопки, ручне гальмо й проміжки менші, а прилади
     та контролер (спідометр і керманич) лишаємо того ж розміру. */
  .controlBar {
    grid-template-columns: 46px minmax(0, 1fr) 108px;
    grid-template-rows: auto auto;
    gap: 5px;
    padding: 5px 7px max(7px, env(safe-area-inset-bottom));
  }
  .ebBox { grid-column: 1; grid-row: 1; padding: 4px 2px; gap: 3px; }
  .ebLever { min-height: 40px; max-height: 82px; max-width: 46px; }
  .ebState { font-size: 8px; gap: 3px; }
  .ebLed { width: 6px; height: 6px; }
  .dashBox {
    grid-column: 2; grid-row: 1;
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 3px 5px; padding: 4px 5px;
  }
  .dashBox .grpHead { flex: 0 0 100%; }
  .dashInfo { width: auto; flex: 1 1 66px; min-width: 0; gap: 2px; padding: 0; }
  .readRow { font-size: 9px; padding: 2px 5px; }
  .reverser { flex-direction: column; gap: 2px; padding: 2px; }
  .reverser button { font-size: 9px; padding: 3px 0; }
  .wheelBox { grid-column: 3; grid-row: 1; padding: 4px; gap: 3px; }
  .wheelHint { display: none; }
  .wheelBtn { width: 40px; height: 26px; font-size: 14px; }
  /* кнопки систем — сітка 3×2: пульт короткий, а сцені лишається більше місця */
  .btnBox {
    grid-column: 1 / -1; grid-row: 2;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 3px; align-items: start; padding: 4px 5px;
  }
  .btnBox > .grpHead { grid-column: 1 / -1; }
  .btnBox > .statusGroup { grid-column: 1 / -1; }
  .btnGroup { display: contents; }
  .btnGroup .btnRow { display: contents; }
  /* «самітні» кнопки (двигун, дзвінок) теж займають одну комірку, а не весь
     рядок — інакше кожна з них з'їдала цілий рядок висоти */
  .btnRow > .ctlBtn:only-child { grid-column: auto / span 1; }
  .btnRow { gap: 3px; }
  .ctlBtn { gap: 3px; }
  .ctlBtn .ico {
    width: 30px; height: 30px; font-size: 12px;
    box-shadow:
      0 0 0 2px #39434e,
      0 0 0 3.5px #060a0e,
      inset 0 1px 1px rgba(255,255,255,.13),
      inset 0 -2px 4px rgba(0,0,0,.62),
      0 3px 4px rgba(0,0,0,.5);
  }
  .ctlBtn .lbl { font-size: 8px; line-height: 1.1; }
  .grpHead { font-size: 6.5px; letter-spacing: .02em; }
  .grpHead::before { display: none; }
  .grpSub { display: none; }
  .keyHint { display: none; }
  .statusGroup { gap: 2px; margin-top: 3px; padding-top: 3px; }
  .statusRow { gap: 3px; }
  .chip { font-size: 8.5px; padding: 2px 5px; letter-spacing: .01em; }
  #speedCanvas { max-width: min(86px, 24vw); max-height: 86px; flex: 0 0 auto; }
  .swFoot { display: none; }
  /* рація на телефоні: іконка менша, «хмаринка» вужча й дрібнішим шрифтом */
  .radioBox { top: 5px; right: 6px; gap: 7px; max-width: 56%; }
  .radioBtn { width: 33px; height: 33px; border-radius: 10px; }
  .radioBtn svg { width: 17px; height: 17px; }
  .radioBubble { font-size: 11px; padding: 6px 9px; border-radius: 11px; }
  .radioHead { font-size: 9px; letter-spacing: .7px; }
  .radioLog { max-height: 96px; }
  .radioRow { font-size: 10.5px; }
  .plowBtn { font-size: 11.5px; padding: 9px 11px; border-radius: 10px; gap: 5px; min-height: 38px; }
  .plowBtn .ico { font-size: 12px; }
}

/* дуже вузькі телефони (320–400px): ті самі панелі, але ще вужчі —
   прилади й керманич мусять уміститися в один рядок, а не переноситись униз */
@media (max-width: 400px) {
  .controlBar { grid-template-columns: 42px minmax(0, 1fr) 96px; }
  .ebLever { max-width: 42px; max-height: 92px; }
  .dashBox { gap: 2px 4px; padding: 3px 4px; }
  .dashInfo { flex: 1 1 60px; }
  .readRow { font-size: 8.5px; }
  .reverser button { font-size: 8.5px; }
  .wheelBox { padding: 3px; }
  .ctlBtn .ico { width: 28px; height: 28px; font-size: 11px; }
  .ctlBtn .lbl { font-size: 7.5px; }
  #speedCanvas { max-width: min(108px, 30vw); }
  .routeLegend { gap: 6px; font-size: 8px; padding: 0 6px 4px; }
  .lg { width: 12px; height: 4px; }
  .lg-limit { width: 14px; height: 9px; font-size: 7px; }
}

/* зовсім маленькі екрани (320–340px): підписи груп і проміжки геть,
   прилади стискаємо так, щоб спідометр лишався поруч із показами */
@media (max-width: 340px) {
  .grpHead { display: none; }
  .dashInfo { flex: 1 1 50px; min-width: 0; }
  .readRow { font-size: 8px; padding: 1px 4px; }
  .reverser button { font-size: 8px; }
  #speedCanvas { max-width: min(92px, 27vw); }
  .ctlBtn .ico { width: 26px; height: 26px; font-size: 10px; }
  .ctlBtn .lbl { font-size: 7px; }
  .chip { font-size: 8px; padding: 1px 4px; }
}

/* низькі екрани (SE-клас, 568px заввишки): прибираємо те, що дублює кнопки,
   щоб сцені лишилося більше висоти */
@media (max-width: 560px) and (max-height: 660px) {
  .statusGroup { display: none; }
  .routeLegend { display: none; }
  .controlBar { padding: 4px 6px max(5px, env(safe-area-inset-bottom)); gap: 4px; }
}

/* Телефон у ландшафті (низький екран): сцена займає всю висоту посередині,
   а пульт розкладається по боках — як «кабіна» на ПК. Без цього нижня панель
   вища за екран і сцена діставала нульову висоту. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 999px) {
  #app {
    max-width: none;
    grid-template-columns: 62px 170px minmax(0, 1fr) 184px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    column-gap: 5px;
  }
  .topbar { grid-area: 1 / 1 / 2 / 5; padding: 5px 8px; gap: 8px; }
  .lineNo { width: 28px; height: 28px; font-size: 14px; border-radius: 8px; }
  .lineName { font-size: 12px; }
  .lineSub { display: none; }
  .iconBtn { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
  .routeWrap { grid-area: 2 / 1 / 3 / 5; padding: 2px 0 0; }
  .routeLegend { display: none; }
  .sceneHud { top: 6px; left: 6px; gap: 4px; }
  .hudChip { font-size: 10.5px; padding: 3px 7px; min-width: 74px; }
  .hudLabel { font-size: 9px; }
  .radioBox { top: 6px; right: 6px; }
  .miniMapWrap { top: 6px; width: min(46%, 220px); }
  /* вузька смуга (телефон у ландшафті): лишаємо тільки те, що просив Кирило —
     чистоту вагона й роботу провідника (зайнятість місць видно на самій схемі) */
  .miniChips { gap: 3px; }
  .miniChip { padding: 1px 4px; font-size: 8.5px; }
  .miniChip b { font-size: 9.5px; }
  .miniChips .miniChip:not(.clean):not(.work) { display: none; }
  .miniChips .miniChip.work i { display: none; }
  .radioBubble { font-size: 11px; padding: 6px 9px; }
  .radioLog { max-height: 96px; }

  .controlBar { display: contents; }
  .sceneWrap { grid-area: 3 / 3 / 5 / 4; margin: 6px; }
  .ebBox { grid-area: 3 / 1 / 5 / 2; margin: 6px 0 6px 6px; padding: 4px 2px; gap: 3px; }
  .ebBox .grpHint { display: none; }
  .ebLever { min-height: 60px; max-height: 220px; max-width: 52px; }
  .dashBox {
    grid-area: 3 / 2 / 4 / 3; margin: 6px 0 5px;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 5px; padding: 3px 4px;
  }
  .dashBox .grpHead { flex: 0 0 100%; }
  .dashBox .grpSub { display: none; }
  .dashInfo { width: auto; flex: 1 1 60px; min-width: 0; gap: 1px; padding: 0; }
  .readRow { font-size: 8.5px; padding: 1.5px 5px; }
  .reverser { flex-direction: column; gap: 1px; padding: 1px; }
  .reverser button { font-size: 8.5px; padding: 2px 0; }
  #speedCanvas { max-width: min(56px, 16vh); max-height: min(56px, 16vh); flex: 0 0 auto; }
  .wheelBox { grid-area: 4 / 2 / 5 / 3; margin: 0 0 6px; padding: 3px 4px; gap: 3px; }
  #wheelCanvas { max-width: min(100px, 27vh); max-height: min(100px, 27vh); }
  .wheelBtn { width: 42px; height: 26px; font-size: 14px; }
  .btnBox {
    grid-area: 3 / 4 / 5 / 5; margin: 6px 6px 6px 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 4px; align-items: start; padding: 4px 5px;
  }
  .btnBox > .grpHead { grid-column: 1 / -1; }
  .btnBox > .statusGroup { grid-column: 1 / -1; }
  .btnGroup { display: contents; }
  .btnGroup .btnRow { display: contents; }
  .ctlBtn { gap: 3px; }
  .ctlBtn .ico { width: 34px; height: 34px; font-size: 14px; }
  .ctlBtn .lbl { font-size: 8.5px; line-height: 1.1; }
  .keyHint { display: none; }
  .swFoot { display: none; }
}

/* ---------- ПК: «кабіна» з боковими панелями ----------
   На широкому екрані панель керування знизу виглядала як розтягнута телефонна:
   великі порожні проміжки, пласкі кнопки на всю ширину. Тут пульт розкладається
   на дві бокові панелі (прилади — ліворуч, кнопки — праворуч), а сцена стає
   нормальним вікном посередині. */
@media (min-width: 1000px) and (orientation: landscape) {
  #app {
    max-width: 1720px;
    grid-template-columns: 138px 236px minmax(0, 1fr) 244px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .topbar { grid-area: 1 / 1 / 2 / 5; padding: 9px max(18px, calc((100% - 1340px) / 2)); }
  .routeWrap { grid-area: 2 / 1 / 3 / 5; }
  .controlBar { display: contents; }
  /* Ручне гальмо на ПК — компактна панель за розміром вмісту (а не колона
     на всю висоту: раніше важіль «розтягувався» на весь екран, а панель
     прилипала впритул до приладів — Кирило: «щоб нічого не було один на одному»). */
  .ebBox {
    grid-area: 3 / 1 / 4 / 2;
    align-self: start;
    justify-content: flex-start;
    margin: 10px 10px 0 10px;
    padding: 8px 6px 10px;
    gap: 6px;
  }
  .ebLever { flex: 0 0 auto; height: clamp(150px, 26vh, 280px); min-height: 0; max-height: none; max-width: 118px; }
  .ebBox .grpHint { font-size: 8.5px; line-height: 1.2; }
  .ebBox .ebState { font-size: 10px; }
  .dashBox { grid-area: 3 / 2 / 4 / 3; margin: 10px 0 8px 0; }
  .wheelBox { grid-area: 4 / 2 / 5 / 3; margin: 0 0 10px 0; }
  .sceneWrap { grid-area: 3 / 3 / 5 / 4; margin: 10px; }
  .btnBox { grid-area: 3 / 4 / 5 / 5; margin: 10px 10px 10px 0; }
  .btnBox { justify-content: space-between; gap: 8px; padding: 10px 12px; }
  .btnBox > .btnGroup:first-of-type { padding-top: 20px; }
  .btnGroup { gap: 6px; flex: 1 1 0; max-height: 140px; }
  .keyHint { margin-top: 0; }
  .btnRow { gap: 7px; }
  .ctlBtn { gap: 8px; }
  .ctlBtn .ico { width: 60px; height: 60px; font-size: 22px; }
  .ctlBtn .lbl { font-size: 11px; max-width: 100%; }
  .statusRow { flex-direction: column; gap: 4px; }
  .statusRow .chip { text-align: center; }
  .chip { font-size: 11.5px; padding: 4px 10px; }
  .grpHead { font-size: 9px; }
  .grpSub { font-size: 9px; }
  .keyHint { font-size: 9.5px; }
  .wheelHint { max-width: 214px; font-size: 10px; }
  .routeLegend { gap: 20px; font-size: 12px; padding-bottom: 8px; }
  .lg { width: 20px; height: 6px; }
  .lg-limit { width: 22px; height: 14px; font-size: 11px; }
  .hudChip { font-size: 13.5px; padding: 7px 12px; }
  .hudLabel { font-size: 11px; }
}

/* низькі «кабінні» екрани (ноутбук 1366×600 тощо): пульт стискається,
   щоб кнопки й статус не вилазили за нижній край */
@media (min-width: 1000px) and (orientation: landscape) and (max-height: 740px) {
  .btnBox { justify-content: flex-start; gap: 7px; padding: 8px 10px; }
  .keyHint { display: none; }
  .btnGroup { gap: 4px; }
  .grpSub { font-size: 8.5px; }
  .ctlBtn { gap: 5px; }
  .ctlBtn .ico { width: 50px; height: 50px; font-size: 18px; }
  .ctlBtn .lbl { font-size: 10.5px; }
  .chip { font-size: 10px; padding: 3px 7px; }
  .statusGroup { margin-top: auto; padding-top: 5px; }
}

@media (min-width: 1000px) and (orientation: landscape) and (max-height: 600px) {
  .grpSub { display: none; }
  .grpHead { padding-bottom: 2px; }
  .ctlBtn { gap: 4px; }
  .ctlBtn .ico { width: 44px; height: 44px; font-size: 16px; }
  .ctlBtn .lbl { font-size: 10px; }
  .chip { font-size: 9.5px; padding: 2px 6px; }
  .statusRow { gap: 4px; }
  /* низька «кабіна»: керманич ділить ліву колонку зі спідометром,
     інакше прилади не вміщаються у свою смугу */
  #wheelCanvas { max-width: min(118px, 20vh); max-height: min(118px, 20vh); }
}

/* ---------- монети, депо, потяги ---------- */
[hidden] { display: none !important; }

.coinChip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(240, 180, 41, .12);
  border: 1px solid rgba(240, 180, 41, .42);
  color: #ffd98a; font-weight: 700; font-size: 12.5px;
  font-family: Manrope, Inter, sans-serif;
  white-space: nowrap;
}
.coinIco {
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff3c8, #f0b429 58%, #a9740f);
  box-shadow: 0 0 5px rgba(240, 180, 41, .5);
  flex: 0 0 auto;
}

/* картки потягів і ліній (головний екран) */
.shopList { display: flex; flex-direction: column; gap: 10px; }
.shopItem {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px; align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px; padding: 9px 11px;
}
.shopItem.sel { border-color: rgba(76, 195, 138, .55); background: rgba(76, 195, 138, .09); }
.shopPrev {
  grid-column: 1 / -1;
  display: block; width: 100%; height: auto; aspect-ratio: 1240 / 155;
  border-radius: 9px;
  background: linear-gradient(180deg, #bcd9ea, #e8f2f4);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.shopName { font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 14px; }
.shopDesc { font-size: 11.5px; color: var(--dim); margin: 2px 0 5px; line-height: 1.35; }
.shopSpecs { display: flex; flex-wrap: wrap; gap: 4px; }
.shopSpec {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: #cfe0ee;
}
.shopRight { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.shopPrice { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #ffd98a; font-weight: 700; }
.shopBtn {
  border: none; border-radius: 10px; padding: 9px 13px;
  font-family: Manrope, Inter, sans-serif; font-weight: 700; font-size: 12.5px;
  cursor: pointer; white-space: nowrap;
}
.shopBtn.select { background: linear-gradient(180deg, #eef4f8, #c9d6e0); color: #14202b; }
.shopBtn.buy { background: linear-gradient(180deg, #f0b429, #c98a10); color: #241803; }
.shopBtn.cur { background: rgba(76, 195, 138, .18); color: #a9e8c8; cursor: default; }
.shopBtn.locked { background: rgba(255,255,255,.05); color: #7d8b99; border: 1px solid rgba(255,255,255,.08); cursor: default; }
@media (max-width: 560px) {
  .shopItem { grid-template-columns: minmax(0, 1fr); }
  .shopRight { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .shopBtn { padding: 8px 12px; }
}

/* ---------- важіль (потяг-експрес: один важіль замість керманича) ---------- */
.leverRow {
  display: flex; gap: 7px; align-items: stretch; justify-content: center;
  width: 100%; flex: 1 1 auto; min-height: 0;
}
.lever {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1 1 0; min-width: 0; max-width: 62px;
  cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent;
  border-radius: 10px; outline: none;
}
.lever:active { cursor: grabbing; }
.lever:focus-visible { box-shadow: 0 0 0 2px rgba(120,200,255,.45); }
.leverRail {
  position: relative; flex: 1 1 auto; width: 100%; max-width: 42px;
  min-height: 92px; border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(240,180,41,.17) 0 50%, rgba(90,170,255,.17) 50% 100%),
    linear-gradient(180deg, #232b33, #11161b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 2px 7px rgba(0,0,0,.62);
}
.leverRail::before {
  content: ""; position: absolute; left: 50%; top: 20%; bottom: 20%; width: 7px;
  transform: translateX(-50%); border-radius: 4px;
  background: linear-gradient(180deg, #080b0e, #2b333b, #080b0e);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.leverRail::after {
  content: ""; position: absolute; left: 7%; right: 7%; top: calc(50% - 1px); height: 2px;
  border-radius: 2px; background: rgba(255,255,255,.4); box-shadow: 0 0 6px rgba(255,255,255,.22);
}
.leverTick {
  position: absolute; left: 11%; right: 11%; height: 1px;
  background: rgba(255,255,255,.17);
}
.leverTick:nth-child(1) { top: calc(20% - 0.5px); }
.leverTick:nth-child(2) { top: calc(30% - 0.5px); }
.leverTick:nth-child(3) { top: calc(40% - 0.5px); }
.leverTick:nth-child(4) { top: calc(50% - 0.5px); opacity: 0; }
.leverTick:nth-child(5) { top: calc(60% - 0.5px); }
.leverTick:nth-child(6) { top: calc(70% - 0.5px); }
.leverTick:nth-child(7) { top: calc(80% - 0.5px); }
.leverGrip {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 18px; margin-left: -17px;
  transform: translateY(-50%);
  border-radius: 7px; z-index: 2;
  background: linear-gradient(180deg, #cfdae4, #6d7d8c);
  box-shadow: 0 0 0 2px #1b232c, inset 0 1px 0 rgba(255,255,255,.55), 0 3px 7px rgba(0,0,0,.6);
  transition: top .15s ease, background .18s ease, box-shadow .18s ease;
}
.lever.dragging .leverGrip { transition: none; }
.leverGrip::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 3px;
  margin: -1.5px 0 0 -8px; border-radius: 2px; background: rgba(16,22,28,.5);
}
.lever.pw .leverGrip {
  background: linear-gradient(180deg, #f0b429, #a2660f);
  box-shadow: 0 0 0 2px #2a1e08, inset 0 1px 0 rgba(255,255,255,.55), 0 3px 7px rgba(0,0,0,.6), 0 0 12px rgba(240,180,41,.35);
}
.lever.pw .leverGrip::after { background: rgba(40,26,4,.55); }
.lever.bk .leverGrip {
  background: linear-gradient(180deg, #6f93bd, #2b4c73);
  box-shadow: 0 0 0 2px #0d151d, inset 0 1px 0 rgba(255,255,255,.45), 0 3px 7px rgba(0,0,0,.6), 0 0 12px rgba(90,170,255,.3);
}
.lever.bk .leverGrip::after { background: rgba(8,14,22,.6); }
.lever.pw .leverRail { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 2px 7px rgba(0,0,0,.62), 0 0 12px rgba(240,180,41,.26); }
.lever.bk .leverRail { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 2px 7px rgba(0,0,0,.62), 0 0 12px rgba(90,170,255,.26); }
.leverCap {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: 700; letter-spacing: .03em; line-height: 1;
  pointer-events: none; white-space: nowrap;
}
.leverCap.top { top: 4px; color: #e6bd70; }
.leverCap.bot { bottom: 4px; color: #8fb6de; }
.leverState { font-size: 12px; font-weight: 800; font-family: Manrope, Inter, sans-serif; color: #dbe6f0; }

/* Старий важіль «Нічного Експреса»: потемніла латунь, пошарпане полотно,
   бакелітова ручка — видно, що це стара машина (Кирило: «важіль старіший») */
#leverBox.old .leverRail {
  background:
    linear-gradient(180deg, rgba(196,150,66,.2) 0 50%, rgba(92,120,150,.14) 50% 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 2px, rgba(0,0,0,.06) 2px 4px),
    linear-gradient(180deg, #2a251c, #14110c);
  box-shadow: inset 0 0 0 1px rgba(214,190,140,.24), inset 0 2px 8px rgba(0,0,0,.7);
}
#leverBox.old .leverRail::before {
  width: 9px;
  background: linear-gradient(180deg, #0a0906, #3a3225, #0a0906);
  box-shadow: inset 0 0 0 1px rgba(214,190,140,.16);
}
#leverBox.old .leverRail::after { background: rgba(206,178,120,.5); box-shadow: 0 0 6px rgba(206,178,120,.28); }
#leverBox.old .leverTick { background: rgba(206,178,120,.22); }
#leverBox.old .leverGrip {
  border-radius: 9px;
  background: linear-gradient(180deg, #b98a4a, #5e3f1c);
  box-shadow: 0 0 0 2px #241a0d, inset 0 1px 0 rgba(255,236,190,.5), 0 3px 8px rgba(0,0,0,.66);
}
#leverBox.old .leverGrip::after { background: rgba(30,20,6,.55); }
#leverBox.old .lever.pw .leverGrip {
  background: linear-gradient(180deg, #d8a23c, #7c4f12);
  box-shadow: 0 0 0 2px #241a0d, inset 0 1px 0 rgba(255,236,190,.5), 0 3px 8px rgba(0,0,0,.66), 0 0 12px rgba(216,162,60,.32);
}
#leverBox.old .lever.pw .leverGrip::after { background: rgba(40,26,4,.5); }
#leverBox.old .lever.bk .leverGrip {
  background: linear-gradient(180deg, #7c8ba0, #38414f);
  box-shadow: 0 0 0 2px #10161c, inset 0 1px 0 rgba(226,236,246,.4), 0 3px 8px rgba(0,0,0,.66), 0 0 12px rgba(120,160,200,.26);
}
#leverBox.old .lever.bk .leverGrip::after { background: rgba(8,14,22,.6); }
#leverBox.old .lever.pw .leverRail { box-shadow: inset 0 0 0 1px rgba(214,190,140,.26), inset 0 2px 8px rgba(0,0,0,.7), 0 0 12px rgba(216,162,60,.24); }
#leverBox.old .lever.bk .leverRail { box-shadow: inset 0 0 0 1px rgba(214,190,140,.26), inset 0 2px 8px rgba(0,0,0,.7), 0 0 12px rgba(120,160,200,.24); }
#leverBox.old .leverCap.top { color: #d9b878; }
#leverBox.old .leverCap.bot { color: #a9b7c4; }
#leverBox.old .leverState { color: #e3d3ac; }
.autoBtn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; margin-top: 2px; padding: 6px 7px;
  border-radius: 9px; border: 1px solid rgba(120,200,255,.34);
  background: rgba(255,255,255,.05); color: #cfe4f2;
  font-family: inherit; font-size: 10px; font-weight: 600; cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.autoBtn .ico { font-size: 13px; }
.autoBtn:hover { background: rgba(255,255,255,.09); }
.autoBtn.on {
  background: linear-gradient(180deg, #2b8fe0, #175a91);
  color: #fff; border-color: rgba(190,230,255,.6);
  box-shadow: 0 0 14px rgba(58,158,255,.5);
}
.autoBtn:disabled { opacity: .45; cursor: default; }
@media (max-width: 560px) {
  .leverRail { min-height: 74px; max-width: 36px; }
  .leverGrip { width: 28px; height: 15px; margin-left: -14px; }
  .leverCap { display: none; }
  .leverState { font-size: 11px; }
  .autoBtn { font-size: 9px; padding: 5px; }
}


/* ---------- карта: прев'ю у списку ---------- */
.mapPrev {
  display: block;
  width: 100%;
  max-width: 260px;
  height: 62px;
  border-radius: 8px;
  border: 1px solid rgba(140,160,175,0.35);
  background: #dfe6ea;
}
@media (min-width: 640px) {
  .mapPrev { width: 260px; height: 62px; }
}

/* картка лінії: прев'ю на всю ширину, під ним опис і кнопка */
.mapItem .mapPrev { grid-column: 1 / -1; max-width: none; width: 100%; height: auto; aspect-ratio: 1240 / 200; }
.homeMaps .mapPrev { border-radius: 11px; }
.mapItem.locked .mapPrev { filter: grayscale(.5) brightness(.68); }
.mapItem.locked .shopDesc { opacity: .72; }
.mapBadge {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; vertical-align: 1px;
  background: rgba(76, 195, 138, .2); color: #a9e8c8;
}
.mapLockIco { margin-left: 7px; font-size: 11px; }
.mapProg {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px;
  margin-top: 7px; font-size: 10.5px; color: var(--dim);
}
.mapProgBar {
  flex: 0 0 auto; width: 86px; height: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); overflow: hidden;
}
.mapProgBar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f0b429, #dd8c0e); }
.mapProg.done .mapProgBar i { background: linear-gradient(90deg, #4cc38a, #2f9c69); }
.shopBtn.go {
  background: linear-gradient(180deg, var(--red2), var(--red));
  color: #fff; box-shadow: 0 5px 14px rgba(216, 66, 47, .3);
}

/* банер «відкрито нову лінію» на екрані фінішу */
.endUnlock {
  margin: -3px 0 12px; padding: 9px 12px; border-radius: 11px; text-align: center;
  font-size: 12.5px; font-weight: 700; color: #ffd98a;
  background: rgba(240, 180, 41, .13); border: 1px solid rgba(240, 180, 41, .35);
}
.endCard .ghostBtn { margin-top: 9px; }

/* ============================================================================
   «ПРО ГРУ», ПРОМОКОД, ПОСИЛАННЯ Й СПИСОК МОВ (сесія 23.09.2026, дев'яноста перша)
   ============================================================================ */

/* ---------- список мов: кнопка «UK/EN/DE» показує всі три одразу ---------- */
.langPop {
  position: fixed; top: 52px; right: 12px; z-index: 45;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 148px; padding: 5px;
  background: linear-gradient(180deg, #1e2833, #161e27);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
}
.langPop button {
  border: none; background: none; color: var(--txt);
  font-family: inherit; font-size: 13px; text-align: left;
  padding: 8px 11px; border-radius: 8px; cursor: pointer;
}
.langPop button:hover { background: rgba(255, 255, 255, .08); }
.langPop button.sel { background: var(--red); color: #fff; font-weight: 600; }

/* ---------- промокод і посилання в підвалі головного екрана ---------- */
.homeFoot { justify-content: flex-start; align-items: center; }
.homeFoot .buildTag { margin-left: auto; }
/* поле промокоду ховається за кнопкою: доки її не натиснули — рядка не видно */
.promoOpenBtn {
  flex: 0 0 auto; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  border: 1px dashed rgba(143, 182, 216, .5); background: rgba(255, 255, 255, .04);
  color: #9dc2e2; font-family: inherit; font-size: 12.5px;
}
.promoOpenBtn:hover { color: #cfe6fa; border-color: rgba(180, 215, 245, .75); background: rgba(255, 255, 255, .08); }
.promoOpenBtn.open { border-style: solid; border-color: rgba(180, 215, 245, .5); color: #7c93a8; }
.promoRow { display: flex; gap: 6px; flex: 1 1 100%; max-width: 430px; }
.promoInput {
  flex: 1 1 auto; min-width: 0;
  padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .3);
  color: var(--txt); font-family: inherit; font-size: 13px;
  text-transform: uppercase; letter-spacing: .6px;
}
.promoInput::placeholder { color: #6b7c8c; text-transform: none; letter-spacing: .3px; }
.promoBtn {
  flex: 0 0 auto; padding: 9px 13px; border: none; border-radius: 10px;
  background: linear-gradient(180deg, var(--red2), var(--red)); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.promoBtn:active { transform: translateY(1px); }
.promoMsg { flex: 1 1 100%; margin-top: -2px; font-size: 12px; line-height: 1.4; }
.promoMsg.ok { color: #7fe0a6; }
.promoMsg.bad { color: #ff9a8a; }
/* ---------- «підтримати нас» (банка Monobank) ---------- */
.supportCta { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; }
.supportBtn {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 8px 15px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(180deg, #ff5d7a, #e0344f); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .2px;
  box-shadow: 0 3px 12px rgba(224, 52, 79, .3);
}
.supportBtn:hover { filter: brightness(1.08); }
.supportBtn:active { transform: translateY(1px); }
.supportBtn.off { background: rgba(255, 255, 255, .08); color: #6b7c8c; box-shadow: none; cursor: default; }
.supportIco { font-size: 13px; line-height: 1; color: #fff; }
.supportBtn.off .supportIco { color: #6b7c8c; }
.supportHint { flex: 1 1 220px; font-size: 11.5px; line-height: 1.35; color: var(--dim); text-align: left; }
.aboutSupportHint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--dim); text-align: center; }
.aboutLink.sup { border-color: rgba(224, 52, 79, .5); color: #ffb3c0; }
.homeLinks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.homeLink {
  color: #8fb6d8; font-size: 12px; text-decoration: none;
  border-bottom: 1px dashed rgba(143, 182, 216, .45);
}
.homeLink:hover { color: #b8d6ef; }
.homeLink.off { color: #6b7c8c; border-bottom-color: rgba(107, 124, 140, .35); cursor: default; }
.homeLink.off:hover { color: #6b7c8c; }
.homeLink .soon, .aboutLink .soon { font-style: normal; font-size: 11px; opacity: .78; margin-left: 5px; }
/* «Умови використання» / «Політика конфіденційності» у підвалі головної —
   кнопки (відкривають довідку), але виглядають як решта посилань */
.linkBtn {
  border: none; background: none; padding: 0; cursor: pointer; font-family: inherit;
  color: #8fb6d8; font-size: 12px;
  border-bottom: 1px dashed rgba(143, 182, 216, .45);
}
.linkBtn:hover { color: #b8d6ef; }
.setLinks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* ---------- «Про гру»: один раз перед найпершим відкриттям ---------- */
.aboutOverlay { z-index: 8; }
.aboutCard {
  max-width: 780px; width: 100%; padding: 0;
  display: flex; flex-direction: column; max-height: 92vh;
}
.aboutScroll {
  padding: 20px 20px 6px; min-height: 0;
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.aboutBrand {
  font-family: Manrope, Inter, sans-serif; font-weight: 800;
  font-size: clamp(26px, 6vw, 38px); letter-spacing: 1.4px; color: #f7fafd;
  text-align: center;
}
.aboutBrand span { color: var(--red2); }
.aboutLead {
  color: var(--dim); font-size: 13.5px; line-height: 1.55;
  text-align: center; margin: 8px auto 16px; max-width: 580px;
}
.aboutHero { margin: 0 0 12px; }
.aboutHero img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.aboutHero figcaption { color: var(--dim); font-size: 11.5px; margin-top: 6px; text-align: center; }
.aboutGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aboutGrid figure { margin: 0; }
.aboutGrid img { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.aboutGrid figcaption { color: var(--dim); font-size: 11px; margin-top: 5px; line-height: 1.35; }
.aboutLinks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 4px; }
.aboutLink {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  color: #dbe7f2; font-size: 12.5px;
}
.aboutLink.tg { border-color: rgba(93, 169, 236, .45); color: #a8d4f5; }
.aboutLink:hover { background: rgba(255, 255, 255, .1); }
.aboutLink.off { color: #6b7c8c; cursor: default; }
.aboutLink.off:hover { background: rgba(255, 255, 255, .05); }
.aboutFoot {
  flex: 0 0 auto;
  padding: 12px 20px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.setLink { color: #8fb6d8; font-size: 12.5px; }
.setOpenBtn { margin-top: 0; width: auto; padding: 6px 13px; font-size: 12px; }

@media (max-width: 560px) {
  .aboutGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aboutScroll { padding: 15px 14px 4px; }
  .aboutFoot { padding: 11px 14px max(14px, env(safe-area-inset-bottom)); }
}