/* Стиль 90-х на плёнке (документ 09, раздел 6): выцветшие тёплые цвета, малиновый и золото.
   Слева тёмная панель сводок, справа карта или раздел на «газетной» бумаге. */

:root {
  --side-bg: #1f1a15;
  --side-card: #2a241d;
  --side-card-hover: #342c23;
  --side-ink: #ece3cf;
  --side-muted: #a89c84;
  --side-line: #3d342a;
  --paper: #efe6d2;
  --paper-2: #e4d8bf;
  --ink: #2a241c;
  --muted: #6b604f;
  --line: #c9bc9f;
  --crimson: #9e1b32;
  --crimson-ink: #fff4ee;
  --gold: #c9a227;
  --gold-soft: #e0c25c;
  --green: #4f8a3c;
  --alarm: #c0392b;
  --focus: #e0c25c;
  --side-w: 300px;
  --font-sign: "Russo One", "Arial Black", system-ui, sans-serif;
  --font-text: system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Courier New", "Lucida Console", monospace;
}

html, body { height: 100%; margin: 0; font-family: var(--font-text); background: var(--side-bg); color: var(--ink); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- вход и регистрация --- */
#screen { display: flex; justify-content: center; padding: 10vh 16px 0; }
#screen:empty { display: none; }
.card {
  width: 100%; max-width: 340px; background: var(--paper); border-radius: 6px; padding: 18px 20px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 8px;
}
.card h1 { margin: 0; font: 26px var(--font-sign); color: var(--crimson); }
.card label { font-size: 13px; margin-top: 6px; }
.card input[type=text], .card input[type=date], .card input[type=password] { padding: 7px 8px; font-size: 15px; }
.card .stack { display: flex; flex-direction: column; gap: 8px; }
.card .check { display: flex; gap: 6px; align-items: flex-start; }

/* --- раскладка игры: сводки слева, сцена справа --- */
#game { height: 100%; display: grid; grid-template-columns: var(--side-w) 1fr; }
#side {
  background-color: var(--side-bg); color: var(--side-ink); overflow-y: auto; display: flex; flex-direction: column;
  border-right: 1px solid #000; font-size: 14px; line-height: 1.4;
  /* зерно плёнки */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.side-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 8px; }
.brand { font: 24px var(--font-sign); color: var(--gold); letter-spacing: 1px; text-shadow: 2px 2px 0 var(--crimson); }
.city { display: block; font: 11px var(--font-text); color: var(--side-muted); letter-spacing: 3px; text-transform: uppercase; text-shadow: none; }
button.ghost { background: none; color: var(--side-muted); border: 1px solid var(--side-line); border-radius: 4px; margin: 0; }
button.ghost:hover { color: var(--side-ink); border-color: var(--side-muted); }

.sums { display: flex; flex-direction: column; gap: 8px; padding: 4px 10px 14px; }
.sum {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 5px;
  background: var(--side-card); border: 1px solid var(--side-line); border-left: 4px solid var(--side-line);
  color: inherit; text-decoration: none; transition: background 0.15s, border-color 0.15s;
}
a.sum { cursor: pointer; }
a.sum:hover { background: var(--side-card-hover); border-left-color: var(--gold); }
.sum.active { border-left-color: var(--crimson); background: var(--side-card-hover); }
.sum-title {
  font: 13px var(--font-sign); color: var(--gold-soft); letter-spacing: 1px; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px; text-decoration: none;
}
a.sum .sum-title::after { content: "›"; margin-left: auto; color: var(--side-muted); font-size: 16px; }
.sum-line { display: block; }
.sum-line.between { display: flex; justify-content: space-between; gap: 6px; }
#side .muted { color: var(--side-muted); }
.strong { font-weight: 700; font-size: 15px; }
.sum-list { display: flex; flex-direction: column; gap: 1px; }
.sum-skill { display: flex; justify-content: space-between; }
.sum-money { font: 22px var(--font-sign); color: var(--gold); }
.badge { font: 700 11px var(--font-text); background: var(--crimson); color: var(--crimson-ink);
  border-radius: 9px; padding: 1px 7px; letter-spacing: 0; text-transform: none; }
.badge.alarm { background: var(--alarm); }
.hint { margin-top: 4px; }
#side .bar { background: #3a3128; }
#plan .row button:first-child:not(:disabled) { background: var(--crimson); border-color: var(--crimson); color: var(--crimson-ink); }

/* плавающая панель навигации и ходов: поверх карты, положение задаёт игрок */
.nav-panel {
  position: absolute; top: 12px; right: 12px; z-index: 1000; box-sizing: border-box;
  width: min(300px, calc(100% - 24px)); max-height: calc(100% - 24px); display: flex; flex-direction: column;
  background: var(--side-bg); color: var(--side-ink); border: 1px solid #000; border-left: 4px solid var(--crimson);
  border-radius: 5px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5); font-size: 14px; line-height: 1.4;
}
.nav-grip { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px 6px 11px;
  cursor: grab; touch-action: none; user-select: none; border-bottom: 1px solid var(--side-line); border-radius: 5px 5px 0 0; }
.nav-grip:active { cursor: grabbing; }
.nav-grip:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.nav-title { font: 13px var(--font-sign); color: var(--gold-soft); letter-spacing: 1px; text-transform: uppercase; }
.nav-grip button { margin: 0; padding: 0 8px; min-width: 32px; min-height: 28px; }
.nav-body { padding: 8px 11px 10px; overflow-y: auto; min-height: 0; max-height: 360px; }
.plan-stop { display: flex; gap: 8px; margin-top: 4px; }
.plan-stop-name { min-width: 48px; }
.nav-panel.collapsed .nav-body { display: none; }
.nav-panel.collapsed .nav-grip { border-bottom: none; border-radius: 5px; }
.nav-panel .muted { color: var(--side-muted); }
.nav-panel button:not(.ghost) { background: var(--side-card-hover); color: var(--side-ink); border: 1px solid var(--side-muted); border-radius: 4px; }
.nav-panel button:disabled { opacity: 0.5; cursor: default; }

/* пейджер: зелёный экранчик с бегущей строкой */
.pager { display: block; overflow: hidden; white-space: nowrap; background: #9fb08a; color: #1d2616;
  border: 3px solid #111; border-radius: 4px; padding: 3px 6px; font: 700 13px var(--font-mono);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35); }
.pager-text { display: inline-block; padding-left: 100%; animation: pager 12s linear infinite; }
.pager.big { font-size: 16px; padding: 8px 10px; margin: 10px 0; }
@keyframes pager { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .pager-text { animation: none; padding-left: 0; } }

#stage { position: relative; min-width: 0; min-height: 0; }
#map { position: absolute; inset: 0; z-index: 0; }  /* свой слой: значки карты не перекрывают раздел справа */
/* значки и подсказки на карте (mapkit.js) */
.map-marker { cursor: pointer; }
.map-tooltip { position: absolute; left: 50%; top: 0; z-index: 2; padding: 2px 6px; border-radius: 3px; width: max-content; max-width: 220px;
  background: #fffdf5; color: var(--ink); border: 1px solid #5c5240; font-size: 12px; line-height: 1.3; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.map-tooltip.wp-label { padding: 1px 4px; font-size: 11px; }
.maplibregl-popup-content { color: var(--ink); font-family: var(--font-text); border-radius: 5px; }
.maplibregl-ctrl-top-left { z-index: 2; }

/* раздел поверх карты */
#page { position: absolute; inset: 0; z-index: 1100; overflow-y: auto; background: var(--paper); outline: none; }
.page-head { position: sticky; top: 0; z-index: 2; background: var(--paper-2); border-bottom: 2px solid var(--ink); }
.page-bar { display: flex; align-items: center; gap: 14px; padding: 8px 20px 0; }
.page-title { font: 15px var(--font-sign); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
#page-body { max-width: 720px; padding: 16px 24px 40px; }
.page-wait { padding: 20px 0; }


button { padding: 6px 10px; cursor: pointer; margin-top: 4px; font: inherit; font-size: 13px; }
button.wide { width: 100%; padding: 9px; font-size: 15px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row input { flex: 1; min-width: 0; padding: 7px 8px; }
.between { justify-content: space-between; }
.muted { color: var(--muted); }
.error { color: var(--alarm); }

.waypoint { width: 14px; height: 14px; margin: 3px; border-radius: 50%; background: var(--crimson); border: 2px solid #fff; box-sizing: border-box; }
.wp-label { font-size: 11px; padding: 1px 4px; }
.plan-total { margin-top: 6px; font-weight: 600; }
.small { font-size: 12px; }

.poi-capturable { background: var(--crimson); }
.poi-neutral { background: #3f6e8c; }
.poi-safe { background: var(--green); }
.poi-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; }
.avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 3px solid #222; box-sizing: border-box; }
/* на велосипеде: крупнее, малиновая обводка и золотое кольцо */
.avatar.on-bike { width: 22px; height: 22px; border: 3px solid var(--crimson); box-shadow: 0 0 0 2px var(--gold), 0 0 8px rgba(0, 0, 0, 0.6); }
.plan-walk { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 13px; cursor: pointer; min-height: 28px; }
.plan-walk input { width: 16px; height: 16px; margin: 0; accent-color: var(--gold); }

/* стрелка к гопнику за краем обзора: элемент поворачивается из JS (transform), остриём наружу */
.hint-arrow { position: relative; width: 0; height: 0; pointer-events: none; }
.hint-arrow .hint-rot { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.hint-arrow .hint-tip { position: absolute; left: -11px; top: -22px; width: 0; height: 0;
  border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 20px solid var(--crimson);
  filter: drop-shadow(0 0 2px var(--gold)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)); }
.hint-arrow .hint-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap;
  background: #111; color: var(--gold-soft); border: 1px solid var(--gold); border-radius: 3px;
  padding: 0 5px; font: 700 12px var(--font-mono); }

.bar { display: block; height: 6px; background: #d6cbb2; border-radius: 3px; overflow: hidden; margin: 3px 0; }
.bar-fill { display: block; height: 100%; background: var(--crimson); transition: width 0.4s; }
.bar.xp .bar-fill { background: var(--gold); }
.hp-bar .bar-fill { background: var(--green); }
.hp-bar .bar-fill.low { background: var(--alarm); }
button.danger { background: var(--crimson); color: var(--crimson-ink); border: 1px solid #5c1010; border-radius: 4px; }
button.on { background: #2c3e50; color: #fff; }
button:disabled { opacity: 0.45; cursor: default; }

.gopnik { width: 24px; height: 24px; border-radius: 50%; background: #8e1b1b; color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid #f1c40f; box-sizing: border-box;
  font-size: 13px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
.gopnik.silhouette { background: #555; border-color: #999; }
.bot-popup { display: flex; flex-direction: column; gap: 2px; min-width: 130px; }

/* содержимое разделов */
.sheet h2 { margin: 0 0 6px; font: 26px var(--font-sign); color: var(--ink); }
.sheet h3 { margin: 18px 0 6px; font: 14px var(--font-sign); letter-spacing: 1px; text-transform: uppercase;
  border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
.sheet button { background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); }
.sheet button:hover:not(:disabled) { border-color: var(--ink); }
.sheet button.danger { background: var(--crimson); color: var(--crimson-ink); border-color: #5c1010; }
.item { padding: 7px 0; border-bottom: 1px dashed var(--line); gap: 8px; }
.item-name { font-weight: 600; }
.broken { color: var(--alarm); font-weight: 700; }
.req-low { color: var(--alarm); font-weight: 700; }
/* таблица слотов, как в Ganjawars: «Слот | Содержимое», строки через одну темнее */
.slots { width: 100%; table-layout: fixed; border-collapse: collapse; border: 2px solid var(--ink); font-size: 14px; }
.slots th, .slots td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
  overflow-wrap: anywhere; }
.slots thead th { background: var(--ink); color: var(--paper); font: 12px var(--font-sign); letter-spacing: 1px;
  text-transform: uppercase; }
.slots thead th:first-child { width: 32%; }
.slots tbody tr:nth-child(even) { background: var(--paper-2); }
.slots .slot-name { font-weight: 600; color: var(--muted); border-right: 1px solid var(--line); }
.slot-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; }
.slots .row button { margin-top: 0; padding: 2px 9px; font-size: 12px; }
@media (pointer: coarse) { .slots .row button { min-height: 36px; padding: 4px 12px; } }
.slot-item + .slot-item { margin-top: 2px; }
.slot-free { color: var(--muted); font-style: italic; opacity: 0.8; }
.slot-totals { margin-top: 8px; padding: 6px 8px; border-left: 4px solid var(--gold); background: var(--paper-2);
  font-size: 14px; font-weight: 600; }
.stat { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.skill { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.wallet { margin: 6px 0; font-weight: 600; }

.overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 16, 12, 0.6);
  display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; }
#toast { position: fixed; z-index: 3000; left: 50%; bottom: 24px; transform: translateX(-50%);
  max-width: calc(100% - 32px); background: #111; color: var(--paper); padding: 9px 14px; border-radius: 4px;
  border-left: 4px solid var(--gold); font-size: 14px; }

/* Экран боя: тёмный двор, подсвеченная парковка; лог — распечатка с матричного принтера (документ 09, раздел 6).
   Раскладка по образцу Ganjawars: [Свои | шапка, поле, панель хода, распечатка | Враги]. */
.battle-overlay { background: #15130f; color: #e8e2d0; align-items: stretch; }
.battle-loading { width: 100%; padding: 30vh 16px 0; text-align: center; font-size: 20px; box-sizing: border-box; }
.battle {
  width: 100%; max-width: 1480px; margin: 0 auto; box-sizing: border-box; font-size: 13px; line-height: 1.35;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: grid; gap: 8px 12px; align-content: start;
  grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(200px, 250px);
  grid-template-areas: "friends head enemies" "friends field enemies" "friends turn enemies" "friends log enemies";
  grid-template-rows: auto auto auto 1fr;
}
.battle .muted { color: #a59e8a; }
.battle .small { font-size: 11px; }

/* шапка: раунд и таймер слева, HP справа */
.battle-head { grid-area: head; display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap;
  align-items: baseline; padding: 5px 10px; background: #211f19; border: 1px solid #3a372c; border-radius: 4px; }
.head-left, .head-right { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.battle-head b { font: 15px var(--font-sign); letter-spacing: 1px; color: var(--gold-soft); }
.battle-head .low { color: #e74c3c; font-weight: 700; }
.timer { font: 700 16px var(--font-mono); color: #f1c40f; }
.timer.hurry { color: #e74c3c; }
.night { color: #8fa8d8; }

/* колонки «Свои» / «Враги» */
.roster { min-width: 0; display: flex; flex-direction: column; gap: 6px; align-self: start; }
.roster.friends { grid-area: friends; }
.roster.enemies { grid-area: enemies; }
.roster-title { margin: 0; padding: 4px 8px; font: 13px var(--font-sign); letter-spacing: 2px; text-transform: uppercase;
  text-align: center; border-radius: 3px; color: var(--crimson-ink); }
.friends .roster-title { background: var(--crimson); }
.enemies .roster-title { background: #2f5a24; }
.rc { background: #211f19; border: 1px solid #3a372c; border-left: 4px solid #4a4536; border-radius: 4px;
  padding: 5px 7px; overflow-wrap: anywhere; }
.rc.me { border-left-color: var(--gold); }
.rc[role=button] { cursor: pointer; }
.rc[role=button]:hover { background: #2a2720; }
.rc.reach { border-left-color: #27ae60; }
.rc.far { border-left-color: #c0392b; }
.rc.target { box-shadow: 0 0 0 2px #f1c40f; }
.rc.out { opacity: 0.45; }
.rc-name { display: flex; gap: 5px; align-items: baseline; font-size: 13px; }
.rc-num { color: #8d8672; }
.rc-tag { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold-soft); }
.rc-line { font-size: 11.5px; color: #c9c1aa; }
.rc.reach .rc-reach { color: #6fcf8f; }
.rc.far .rc-reach { color: #e07a6e; }
.rc-ko { color: #e74c3c; font-weight: 700; }

/* поле: три полосы, подсвеченная парковка */
.field { grid-area: field; background: radial-gradient(ellipse at center, #34321f 0%, #1b1913 60%, #15130f 100%);
  border: 1px solid #3a372c; border-radius: 6px; padding: 8px; }
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; min-height: 76px; }
.lane { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  border-left: 1px dotted #3a372c; }
.lane:first-child { border-left: none; }
.midline { border-top: 2px dashed #6b6450; margin: 6px 0; }
.fighter { width: 100%; max-width: 190px; background: #24221b; border: 2px solid #4a4536; border-radius: 6px;
  padding: 4px 6px; box-sizing: border-box; font-size: 12px; overflow-wrap: anywhere; }
.fighter.me { border-color: #d4a017; }
.fighter.enemy { cursor: pointer; }
.fighter.reach { border-color: #27ae60; }
.fighter.far { border-color: #c0392b; }
.fighter.target { box-shadow: 0 0 0 2px #f1c40f; }
.fighter.out { opacity: 0.45; }
.fighter-name { font-weight: 700; font-size: 12.5px; }
.hp { height: 5px; background: #4a1c1c; border-radius: 3px; overflow: hidden; margin: 3px 0; }
.hp-fill { height: 100%; background: #2ecc71; }
.hp-fill.low { background: #e74c3c; }

/* панель хода: 4 блока в ряд, как в Ganjawars */
.turn, .battle .result { grid-area: turn; }
.turn { background: #211f19; border: 1px solid #3a372c; border-radius: 6px; padding: 8px; display: flex;
  flex-direction: column; gap: 8px; }
.turn-bar { display: flex; justify-content: flex-end; }
.turn-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 8px; }
.turn-block { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.turn-title { font: 12px var(--font-sign); letter-spacing: 1px; text-transform: uppercase; color: var(--gold-soft);
  border-bottom: 1px solid #4a4536; padding-bottom: 2px; overflow-wrap: anywhere; }
.turn-go { justify-content: space-between; }
.choice { display: flex; flex-wrap: wrap; gap: 4px; }
.choice.stack { flex-direction: column; }
.choice button { flex: 1; min-width: 0; margin: 0; padding: 6px; min-height: 32px; background: #35322a;
  color: #e8e2d0; border: 1px solid #5a5544; border-radius: 4px; font-size: 12.5px; text-align: left; }
.choice:not(.stack) button { flex: 1 1 auto; text-align: center; }
.choice button:hover:not(:disabled) { border-color: #a59e8a; }
.choice button.reach { border-left: 4px solid #27ae60; }
.choice button.far { border-left: 4px solid #c0392b; }
.choice button.on { background: #d4a017; color: #15130f; border-color: #d4a017; font-weight: 700; }
.battle .check { display: flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; min-height: 28px; }
.battle .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); flex: none; }
button.ready { background: var(--crimson); color: var(--crimson-ink); border: 1px solid #5c1010; border-radius: 4px;
  font: 15px var(--font-sign); letter-spacing: 1px; text-transform: uppercase; margin: 0; }
button.ready:hover:not(:disabled) { background: #b8213b; }
button.ready-big { width: 100%; min-height: 48px; box-shadow: 0 2px 0 #5c1010; }
.turn > button.ready-big { min-height: 56px; font-size: 20px; }
.turn-hint { font-size: 12px; text-align: center; }
.turn-wait { padding: 10px; text-align: center; color: #a59e8a; }
.battle .result { background: #211f19; border: 2px solid #4a4536; border-radius: 6px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px; }
.result.win { border-color: #27ae60; }
.result.loss { border-color: #c0392b; }
.result h2 { margin: 0; font: 22px var(--font-sign); }
.battle .result button.wide { min-height: 44px; background: #35322a; color: #e8e2d0; border: 1px solid #a59e8a;
  border-radius: 4px; }

/* распечатка под панелью */
.printout { grid-area: log; min-height: 120px; max-height: 38vh; overflow-y: auto; color: #2a2a2a; padding: 10px 14px;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.55;
  background: repeating-linear-gradient(#f3f0e4 0 3.1em, #dfe9d6 3.1em 6.2em);
  border-left: 10px dotted #bbb4a0; border-right: 10px dotted #bbb4a0; }
.printout-head { text-align: center; font-weight: 700; letter-spacing: 2px; margin-bottom: 4px; }
.printout-line, .pr-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.printout:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* раунд: заголовок один раз, под ним ходы бойцов */
.pr-round { padding: 2px 0 6px; border-radius: 2px; }
.pr-round.fresh { animation: pr-fresh 2.5s ease-out; }
@keyframes pr-fresh { from { background: rgba(224, 194, 92, 0.55); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .pr-round.fresh { animation: none; outline: 1px dashed #b08a1a; } }
.pr-title { text-align: center; font-weight: 700; letter-spacing: 2px; color: #4a4232; margin: 6px 0 2px; }
.pr-turn { padding: 3px 0 3px 6px; border-left: 2px solid #c8c0a8; margin: 3px 0; }
.pr-who, .pr-act, .pr-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; overflow-wrap: anywhere; }
.pr-act { padding-left: 10px; }
.pr-name { font-weight: 700; }
.pr-name.ours { color: #9e1b32; }
.pr-name.theirs { color: #1f5f2a; }
.pr-name.me { text-decoration: underline; text-underline-offset: 2px; }
.pr-meta { color: #6b604f; font-size: 0.88em; }
.pr-arrow { color: #6b604f; }
/* исходы — штампом */
.pr-tag { display: inline-block; padding: 0 5px; border: 1px solid currentColor; font-size: 0.82em; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; line-height: 1.45; }
.pr-tag.hit { color: #2a241c; }
.pr-tag.crit { color: #fff4ee; background: #c0392b; border-color: #8e1b1b; }
.pr-tag.miss { color: #7a7060; border-style: dashed; font-weight: 400; }
.pr-tag.dodge { color: #5c4f80; border-style: dashed; }
.pr-tag.heal { color: #1f5f2a; }
.pr-tag.grenade { color: #fff4ee; background: #6b4a12; border-color: #6b4a12; }
.pr-tag.ko { color: #fff4ee; background: #2a241c; border-color: #2a241c; }
.pr-tag.knock { color: #6b4a12; }
.pr-tag.timeout { color: #8a6d14; border-style: dotted; font-weight: 400; }
.pr-dmg { font-weight: 700; font-size: 1.3em; color: #b0182c; }
.pr-hp { color: #4a4232; }
.pr-heal { font-weight: 700; font-size: 1.15em; color: #1f7a33; }
.pr-note { margin: 3px 0; padding-left: 6px; }
.pr-note.battle_end { justify-content: center; text-align: center; margin-top: 6px; padding: 3px 0; font-weight: 700; letter-spacing: 1px;
  border-top: 1px dashed #4a4232; border-bottom: 1px dashed #4a4232; }

/* ноутбук поуже: колонки бойцов уходят под поле */
@media (max-width: 999px) {
  .battle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "head head" "field field" "turn turn" "friends enemies" "log log"; }
  .turn-grid { grid-template-columns: 1fr 1fr; }
}

/* телефон: одна колонка, подробности бойцов свёрнуты, кнопки не меньше 44px */
@media (max-width: 760px) {
  .battle { grid-template-columns: minmax(0, 1fr); gap: 8px;
    grid-template-areas: "head" "field" "turn" "friends" "enemies" "log"; }
  .lanes { min-height: 58px; gap: 4px; }
  .fighter { padding: 3px 4px; font-size: 11px; }
  .fighter .small { display: none; }
  .turn-grid { grid-template-columns: minmax(0, 1fr); }
  .choice.stack { flex-direction: row; }
  .choice button { min-height: 44px; text-align: center; }
  .battle .check { min-height: 44px; font-size: 14px; }
  .turn-bar { justify-content: flex-start; }
  .rc-more { display: none; }
  .printout { max-height: none; }
}

/* --- Почта (документ 17, раздел 11): плотно и читаемо, как в Ganjawars --- */
.sum-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mail { font-size: 14px; }
.sheet h2.mail-head { font-size: 22px; }
.mail-tabs { display: flex; flex-wrap: wrap; margin: 6px 0 10px; border-bottom: 2px solid var(--ink); }
.mail-tab { padding: 8px 12px; color: var(--crimson); font-weight: 700; text-decoration: none; border: 1px solid transparent;
  border-bottom: none; border-radius: 4px 4px 0 0; margin-bottom: -2px; }
.mail-tab:hover { text-decoration: underline; }
.mail-tab.on { color: var(--ink); background: var(--paper-2); border-color: var(--ink); border-bottom: 2px solid var(--paper-2); }
.mail-tools { margin: 4px 0 8px; gap: 10px; }
.mail-check { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; min-height: 32px; }
.mail-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--crimson); flex: none; }
.sheet .mail-btn { margin: 0; padding: 6px 12px; min-height: 34px; font-size: 13px; display: inline-flex;
  align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); cursor: pointer; }
.sheet .mail-btn.primary { background: var(--crimson); color: var(--crimson-ink); border-color: #5c1010; font-weight: 700; }
.sheet .mail-btn.primary:hover:not(:disabled) { background: #b8213b; }
.mail-input { width: 100%; box-sizing: border-box; padding: 7px 8px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 4px; background: #fbf7ee; color: var(--ink); }
.mail-input:focus { border-color: var(--ink); }
.mail-label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; margin-bottom: 8px; }
.mail-error { margin: 4px 0 0; }
.mail-empty { padding: 16px 0; }
.mail-note { padding: 8px 10px; background: var(--paper-2); border-left: 4px solid var(--gold); margin: 8px 0; }

/* список переписок: строки как в Ganjawars, через одну темнее */
.mail-list { border-top: 2px solid var(--ink); }
.mail-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  padding: 7px 8px 7px 6px; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; cursor: pointer; }
.mail-row.pickable { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.mail-row:nth-child(even) { background: var(--paper-2); }
.mail-row:hover { background: #e9dcc0; }
.mail-row.unread { border-left-color: var(--crimson); }
.mail-row.unread .mail-nick, .mail-row.unread .mail-title { font-weight: 800; }
.mail-kind { width: 22px; text-align: center; color: var(--muted); font-size: 16px; }
.mail-kind.kind-npc { color: var(--crimson); }
.mail-kind.kind-broadcast { color: #8a6d14; }
.mail-row-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mail-row-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mail-title { font-weight: 600; overflow-wrap: anywhere; }
.sheet button.mail-nick { background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 600;
  color: var(--crimson); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.mail-flag { font-size: 11px; color: var(--muted); border: 1px dashed var(--line); padding: 0 4px; border-radius: 3px; }
.mail-unread { font-size: 11px; }
.mail-preview { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted);
  text-decoration: none; font-size: 13px; }
.mail-row.unread .mail-preview { color: var(--ink); }
.mail-date { color: var(--muted); font-size: 12px; white-space: nowrap; align-self: start; padding-top: 2px; }
.sheet .mail-more { margin-top: 10px; }
.mail-confirm { padding: 8px 10px; margin: 6px 0; border: 2px solid var(--crimson); background: #f6e3df; }
.mail-confirm p { margin: 0 0 6px; }
.mail-actions { gap: 8px; margin-top: 8px; }
.mail-block-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  padding: 6px 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.mail-block-row:nth-child(even) { background: var(--paper-2); }

/* переписка: пузыри, свои справа, чужие слева */
.mail-thread-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 6px;
  border-bottom: 2px solid var(--ink); }
.mail-thread-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sheet .mail-thread-title h3 { margin: 0; border: none; padding: 0; font: 15px var(--font-sign); letter-spacing: 1px;
  text-transform: none; overflow-wrap: anywhere; }
.mail-thread-title h3 .mail-nick { font: inherit; }
.mail-back { white-space: nowrap; }
.mail-keep { margin: 4px 0 8px; }
.sheet .mail-older { display: flex; margin: 0 auto 8px; }
.mail-feed { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.mail-day { align-self: center; font-size: 12px; color: var(--muted); padding: 1px 10px; border: 1px solid var(--line);
  border-radius: 10px; margin: 6px 0 2px; background: var(--paper-2); }
.mail-msg { display: flex; flex-direction: column; max-width: min(78%, 520px); }
.mail-msg.mine { align-self: flex-end; align-items: flex-end; }
.mail-msg.theirs { align-self: flex-start; align-items: flex-start; }
.mail-bubble { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fbf7ee;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); max-width: 100%; box-sizing: border-box; }
.mail-msg.mine .mail-bubble { background: #f3dcd8; border-color: #d9a9a6; border-bottom-right-radius: 2px; }
.mail-msg.theirs .mail-bubble { border-bottom-left-radius: 2px; }
.mail-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.mail-attach { margin-top: 4px; font: 700 12px var(--font-mono); color: var(--muted); }
.sheet button.mail-attach { background: none; border: none; padding: 0; color: var(--crimson); text-decoration: underline;
  cursor: pointer; text-align: left; }
.mail-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--muted); padding: 1px 4px; }
.sheet button.mail-report-btn { background: none; border: none; padding: 0 2px; margin: 0; font-size: 11px;
  color: var(--alarm); text-decoration: underline; cursor: pointer; opacity: 0; }
.mail-msg:hover .mail-report-btn, .mail-msg:focus-within .mail-report-btn,
.mail-msg.show-actions .mail-report-btn { opacity: 1; }
.mail-filtered { padding: 0 4px; font-style: italic; }
.mail-safety { margin: 0 0 6px; padding: 6px 8px; font-size: 12.5px; border-left: 4px solid var(--alarm); background: #f6e3df; }
.mail-thread .mail-compose { position: sticky; bottom: 0; background: var(--paper); padding: 8px 0 4px;
  border-top: 2px solid var(--ink); }
.mail-compose .mail-text { resize: vertical; min-height: 64px; max-height: 40vh; }
.mail-compose-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.mail-keys { flex: 1; }
.sheet .mail-send { min-width: 120px; }
.mail-cannot { margin-top: 10px; }

/* всплывающие окна почты: карточка игрока, жалоба */
.mail-modal-back { position: fixed; inset: 0; z-index: 2500; background: rgba(20, 16, 12, 0.6); display: flex;
  align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.mail-modal { width: 100%; max-width: 380px; max-height: 100%; overflow-y: auto; background: var(--paper);
  border-radius: 6px; padding: 14px 16px; box-sizing: border-box; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); }
.sheet.mail-modal h3 { margin-top: 0; overflow-wrap: anywhere; }
.mail-report fieldset { border: 1px solid var(--line); border-radius: 4px; margin: 0 0 8px; padding: 4px 10px 8px;
  display: flex; flex-direction: column; }
.mail-report legend { font-weight: 700; padding: 0 4px; }

/* телефон и сенсор: кнопки не меньше 44px, без горизонтальной прокрутки */
@media (max-width: 760px), (pointer: coarse) {
  .sheet .mail-btn { min-height: 44px; padding: 8px 14px; font-size: 14px; }
  .mail-tab { padding: 12px 10px; }
  .mail-check { min-height: 44px; }
  .mail-msg { max-width: 88%; }
  .mail-keys { display: none; }
  .mail-compose-bar { justify-content: space-between; }
  .sheet .mail-send { flex: 1; }
  .mail-input { font-size: 16px; }
}
@media (pointer: coarse) { .sheet button.mail-report-btn { min-height: 32px; } }

/* --- карточка предмета (#/item/<code>), как в Ganjawars: картинка слева, свойства справа --- */
:root {
  --ic-frame: #d9ccb0;
  --ic-ink: #3a3026;
}
a.item-link { color: inherit; text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
a.item-link:hover { color: var(--crimson); text-decoration-color: var(--crimson); }
.rc-line a.item-link { text-decoration-color: currentColor; }
.sheet button.ic-back { margin: 0 0 10px; padding: 4px 10px; font-size: 13px; }
.item-card .ic-head { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start; }
.item-card h2 { overflow-wrap: anywhere; }
.ic-pic { position: relative; margin: 0; padding: 8px 8px 4px; background: var(--paper-2); border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ic-frame); text-align: center; }
.ic-pic svg { display: block; width: 100%; height: auto; background: repeating-linear-gradient(45deg,
  transparent 0 6px, rgba(0, 0, 0, 0.03) 6px 7px); }
.ic-fill { fill: var(--ic-ink); }
.ic-line { fill: none; stroke: var(--ic-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ic-hole { fill: var(--paper-2); }
.ic-pic figcaption { font: 10px var(--font-mono); color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.ic-tier { position: absolute; top: 4px; right: 4px; min-width: 22px; padding: 1px 4px; background: var(--crimson);
  color: var(--crimson-ink); font: 12px var(--font-sign); border-radius: 2px; }
.ic-props { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); font-size: 14px; }
.ic-props th, .ic-props td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
  overflow-wrap: anywhere; }
.ic-props th { width: 48%; font-weight: 600; color: var(--muted); border-right: 1px solid var(--line); }
.ic-props tr:nth-child(even) { background: var(--paper-2); }
.ic-stats { margin: 0; padding: 0; list-style: none; columns: 2 220px; column-gap: 24px; font-size: 14px; }
.ic-stats li { padding: 3px 0; border-bottom: 1px dashed var(--line); break-inside: avoid; }
.ic-desc { margin: 0; line-height: 1.5; font-style: italic; }
.ic-sec p { margin: 0; }
.ic-sec a { color: var(--crimson); font-weight: 600; }
.ic-error { margin-top: 10px; padding: 8px 10px; border-left: 4px solid var(--alarm); background: var(--paper-2); }
@media (max-width: 480px) {
  /* телефон: картинка и название в строку, таблица — на всю ширину под ними */
  .item-card .ic-head { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center; }
  .item-card .ic-main { display: contents; }
  .item-card .ic-head h2 { font-size: 21px; }
  .item-card .ic-props { grid-column: 1 / -1; }
  .ic-props th, .ic-props td { padding: 4px 6px; font-size: 13px; }
}
@media (pointer: coarse) { .sheet button.ic-back { min-height: 36px; } }

/* --- точки на карте: класс (размер), уровень (число), владелец (цвет), иммунитет (кольцо) --- */
.poi-dot { display: flex; align-items: center; justify-content: center; color: #fff; font: 700 10px var(--font-text);
  line-height: 1; box-shadow: 0 0 3px rgba(0, 0, 0, 0.55); }
.poi-dot.poi-mine { background: var(--gold); color: #1a1a1a; border-color: var(--crimson); }
.poi-dot.poi-foreign { background: #7a1226; }
/* ничья (в обзоре): пустой малиновый круг — «бери» */
.poi-dot.poi-free { background: #fff; color: var(--crimson); border-color: var(--crimson); }
.poi-dot.poi-stale { border-style: dashed; }
/* вне обзора: состояние неизвестно — серая, мельче, без тени (документ 18, раздел 8.1) */
.poi-dot.poi-unknown { background: #8a8072; color: #fff; border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: none; font-size: 9px; }
.poi-dot.poi-unknown.poi-c-large { font-size: 10px; }
.poi-dot.poi-immune { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.poi-dot.poi-c-large { font-size: 12px; }
/* банкомат: не боевая точка — ромб, бирюзовый цвет, без номера уровня; отличается от кругов захвата */
.poi-dot.poi-atm { background: #6a3fb5; border-color: #fff; border-radius: 2px; transform: rotate(45deg); }
/* отель: крупный тёмно-синий квадрат с буквой H; не захватывается, но это точка назначения найма */
.poi-dot.poi-hotel { background: #1b2f5a; border: 2px solid #fff; border-radius: 4px; font-size: 13px; font-weight: 800; }

/* карточка района на мелком масштабе: только числа, без ников (документ 18, раздел 8.1) */
.district-card { box-sizing: border-box; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 176px;
  padding: 5px 8px; background: rgba(239, 230, 210, 0.95); color: var(--ink); border: 2px solid var(--ink); border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); font: 11.5px/1.35 var(--font-text); cursor: pointer; }
.district-card.has-mine { border-color: var(--crimson); box-shadow: 0 0 0 2px var(--gold), 0 2px 6px rgba(0, 0, 0, 0.45); }
.district-card .dc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.district-card .dc-title { font: 12px var(--font-sign); letter-spacing: 1px; text-transform: uppercase; color: var(--crimson); }
.district-card .dc-count { font-weight: 700; white-space: nowrap; }
.district-card.compact { width: auto; white-space: nowrap; padding: 3px 7px; display: flex; gap: 6px; align-items: baseline; }
.district-card .dc-mine { color: var(--crimson); font-weight: 700; }
.map-marker:focus-visible .district-card, .map-marker:focus-visible .poi-dot { outline: 3px solid var(--focus); outline-offset: 2px; }
.map-marker:focus { outline: none; }

/* карточка точки поверх карты */
.poi-card { position: absolute; z-index: 1050; left: 12px; bottom: 12px; width: min(320px, calc(100% - 24px)); box-sizing: border-box;
  max-height: calc(100% - 24px); overflow-y: auto; padding: 10px 12px; background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-left: 6px solid var(--crimson); border-radius: 4px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
  font-size: 14px; line-height: 1.4; outline: none; }
.poi-card .pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.poi-card .pc-title { font: 17px var(--font-sign); overflow-wrap: anywhere; }
.poi-card .pc-close { margin: 0; padding: 0 8px; min-width: 32px; min-height: 32px; background: none; border: 1px solid var(--line);
  border-radius: 4px; color: var(--muted); }
.poi-card .pc-close:hover { border-color: var(--ink); color: var(--ink); }
.poi-card .pc-line { padding: 1px 0; }
.poi-card .pc-line.strong { font-size: 14px; }
.poi-card .pc-mine { font-weight: 700; color: var(--crimson); }
.pc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.poi-card button, .pt-sheet button.pt-btn { margin: 0; padding: 6px 12px; min-height: 36px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font-size: 13px; }
.poi-card button:hover:not(:disabled), .pt-sheet button.pt-btn:hover:not(:disabled) { border-color: var(--ink); }
.poi-card button.primary, .pt-sheet button.pt-btn.primary { background: var(--crimson); color: var(--crimson-ink); border-color: #5c1010; font-weight: 700; }
.poi-card button.danger, .pt-sheet button.pt-btn.danger { background: var(--alarm); color: #fff; border-color: #5c1010; }
.pt-confirm { display: block; flex-basis: 100%; }
.pt-abandon { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 760px) { .poi-card { left: 8px; bottom: 8px; width: calc(100% - 16px); } }

/* панель «Мои точки» */
.pt-limit { font: 18px var(--font-sign); }
.pt-cap, .pt-tip { margin-top: 2px; }
.pt-warn { margin-top: 6px; padding: 6px 8px; border-left: 4px solid var(--alarm); background: var(--paper-2); font-weight: 600; }
.pt-list { list-style: none; margin: 12px 0 0; padding: 0; }
.pt-row { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.pt-row.is-over { opacity: 0.8; }
.pt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pt-name { font-weight: 700; overflow-wrap: anywhere; }
.pt-info { margin-top: 3px; font-size: 14px; }

/* --- Пейджер и друзья (этап 6: 6.18, экран друзей) --- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nt-head, .fr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nt-head h2, .fr-head h2 { margin: 0 0 6px; }
.nt-list, .fr-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.nt-row, .fr-row { padding: 9px 8px 9px 10px; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
.nt-row:nth-child(even), .fr-row:nth-child(even) { background: var(--paper-2); }
.nt-row.unread { border-left-color: var(--crimson); }
.nt-row.unread .nt-text { font-weight: 700; }
.nt-text { overflow-wrap: anywhere; line-height: 1.35; }
.nt-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.nt-actions, .fr-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sheet .nt button, .sheet .fr button, .fr-dialog button { margin: 0; min-height: 34px; padding: 6px 12px; font-size: 13px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); }
.sheet .fr button.primary, .fr-dialog button.primary { background: var(--crimson); color: var(--crimson-ink);
  border-color: #5c1010; font-weight: 700; }
.sheet .fr button.danger { background: var(--alarm); color: #fff; border-color: #5c1010; }
.nt-link, .fr-link { color: var(--crimson); font-weight: 700; padding: 6px 4px; }
.nt-more { margin-top: 10px !important; }
.fr-section h3 { margin-top: 18px; }
.fr-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0 4px; }
.fr-add-label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; flex: 1 1 200px; }
.fr-input { box-sizing: border-box; width: 100%; padding: 7px 8px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 4px; background: #fbf7ee; color: var(--ink); }
.fr-input:focus { border-color: var(--ink); }
.fr-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.fr-nick { font-weight: 700; overflow-wrap: anywhere; }
.fr-flag { font-size: 11px; color: var(--muted); border: 1px dashed var(--line); padding: 0 4px; border-radius: 3px; }
.fr-share { font-size: 13px; margin-top: 2px; }
.fr-share.on { color: var(--green); font-weight: 600; }
.fr-row .fr-actions { margin-top: 6px; }
.fr-early { flex-basis: 100%; }
.fr-advice { padding: 6px 8px; border-left: 4px solid var(--gold); background: var(--paper-2); }
.fr-error { margin: 6px 0 0; padding: 6px 8px; border-left: 4px solid var(--alarm); background: #f6e3df; font-weight: 600; }

/* окно «Показать себя для …» */
.fr-back { position: fixed; inset: 0; z-index: 2500; background: rgba(20, 16, 12, 0.6); display: flex;
  justify-content: center; align-items: flex-start; overflow-y: auto; padding: 8vh 12px 24px; box-sizing: border-box; }
.fr-dialog { width: 100%; max-width: 440px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  border-left: 6px solid var(--crimson); border-radius: 4px; padding: 14px 16px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  font-size: 14px; line-height: 1.4; }
.fr-dialog-title { margin: 0 0 8px; font: 20px var(--font-sign); }
.fr-dialog p { margin: 0 0 8px; }
.fr-durations { border: 1px solid var(--line); border-radius: 4px; margin: 8px 0; padding: 6px 10px; }
.fr-durations p { margin: 4px 0 0; }
.fr-duration { display: flex; gap: 8px; align-items: center; min-height: 32px; cursor: pointer; }
.fr-duration input { width: 18px; height: 18px; margin: 0; accent-color: var(--crimson); }
.fr-actions { margin-top: 8px; }

/* аватар друга на карте: бирюзовая метка с ником (не путать с гопниками и точками) */
.friend-avatar { position: relative; width: 0; height: 0; }
.friend-dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; box-sizing: border-box;
  border-radius: 50%; background: #2b8a8a; border: 3px solid #f4efe0; box-shadow: 0 0 0 2px #1d5c5c, 0 1px 5px rgba(0, 0, 0, 0.6); }
.friend-name { position: absolute; left: 0; top: 12px; transform: translateX(-50%); white-space: nowrap;
  font: 700 12px var(--font-text); color: #10302f; background: rgba(244, 239, 224, 0.92); border: 1px solid #1d5c5c;
  border-radius: 3px; padding: 0 5px; pointer-events: none; }
.friend-popup { min-width: 150px; }
@media (max-width: 760px) { .fr-back { padding-top: 4vh; } }

/* --- стрелки (6.16): кнопка в карточке точки, экран стрелки, списки --- */
.poi-card .pc-challenge { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); }
.poi-card .pc-why { color: var(--alarm); font-weight: 600; flex-basis: 100%; }
.ch-sheet .ch-back { display: inline-block; margin-bottom: 8px; color: var(--crimson); }
.ch-sheet .ch-title { margin-top: 0; overflow-wrap: anywhere; }
.ch-status { margin: 8px 0; padding: 8px 10px; background: var(--paper-2); border-left: 4px solid var(--gold); }
.ch-status p { margin: 6px 0 0; }
.ch-state { font: 13px var(--font-sign); letter-spacing: 1px; text-transform: uppercase; }
.ch-state.st-started { color: var(--crimson); }
.ch-state.st-failed, .ch-state.st-canceled { color: var(--muted); }
.ch-timer { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ch-clock { font: 26px var(--font-mono); font-variant-numeric: tabular-nums; }
.ch-who { margin: 6px 0; font-weight: 600; }
.ch-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.sheet .ch-actions button, .sheet .ch-invite button, .sheet .ch-open button, .sheet .ch-row button {
  margin: 0; padding: 8px 14px; min-height: 40px; font-size: 14px; }
.sheet .ch-actions button.primary, .sheet .ch-row button.primary {
  background: var(--crimson); color: var(--crimson-ink); border-color: #5c1010; font-weight: 700; }
.sheet .ch-actions button:disabled, .sheet .ch-row button:disabled { opacity: 0.55; cursor: default; }
.ch-records { display: flex; gap: 8px; align-items: center; min-height: 36px; margin: 4px 0; }
.ch-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.ch-side h3 { margin-top: 6px; }
.ch-side.attackers h3 { border-bottom-color: var(--crimson); }
.ch-players, .ch-list { list-style: none; margin: 6px 0 0; padding: 0; }
.ch-player { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.ch-nick { overflow-wrap: anywhere; }
.ch-nick.hidden-nick { color: var(--muted); font-style: italic; }
.ch-tag { font: 700 10px var(--font-text); letter-spacing: 1px; text-transform: uppercase; padding: 1px 5px;
  border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
.ch-tag.me { color: var(--crimson); border-color: var(--crimson); }
.ch-row { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.ch-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ch-row-info { margin-top: 3px; font-size: 14px; }
.ch-link { display: inline-block; margin-top: 6px; color: var(--crimson); }
.ch-open .pc-actions, .ch-row .pc-actions { margin-top: 6px; }
.ch-row .pc-why { color: var(--alarm); font-weight: 600; font-size: 13px; }
.battle .result-point { margin-top: 6px; padding: 6px 8px; border-left: 4px solid var(--gold); background: #2a2720; font-weight: 600; }
.battle .result-point.pending { color: #a59e8a; font-weight: 400; }
@media (max-width: 640px) {
  .ch-sides { grid-template-columns: 1fr; }
}
.reset-box { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.reset-box .row { gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

/* --- Жильё (шаг 12): экран «Жильё», квартира, доска, склад Управы, зона дома на карте --- */
.hs h2 { overflow-wrap: anywhere; }
.hs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hs-head h2, .hs-head h3 { margin-bottom: 6px; }
.hs-back { display: inline-block; margin-bottom: 8px; color: var(--crimson); font-weight: 700; }
.hs-big { font: 20px var(--font-sign); }
.hs-slots { margin: 6px 0 4px; }
.hs-debt, .hs-alarm { margin: 8px 0; padding: 7px 10px; border-left: 4px solid var(--alarm); background: #f6e3df; font-weight: 600; }
.hs-note { margin: 6px 0; padding: 5px 9px; border-left: 4px solid var(--gold); background: var(--paper-2); font-size: 13px; }
.hs-why { color: var(--alarm); font-weight: 600; font-size: 13px; margin: 4px 0; }
.hs-next { margin: 6px 0; padding: 6px 9px; border-left: 4px solid var(--gold); background: var(--paper-2); font-weight: 600; }
.hs-list, .hs-items { list-style: none; margin: 8px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.hs-items { border-top: 1px solid var(--line); }
.hs-flat, .hs-offer { padding: 10px 8px 10px 10px; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
.hs-flat:nth-child(even), .hs-offer:nth-child(even) { background: var(--paper-2); }
.hs-flat-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
.hs-flat-title { overflow-wrap: anywhere; }
.hs-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hs-tag { font: 700 10px var(--font-text); letter-spacing: 1px; text-transform: uppercase; padding: 1px 6px;
  border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
.hs-tag.gold { color: #6b5200; border-color: var(--gold); background: #f4e7b4; }
.hs-tag.on { color: var(--green); border-color: var(--green); }
.hs-tag.alarm { color: var(--alarm); border-color: var(--alarm); }
.hs-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.hs-nav { margin-bottom: 4px; }
.hs-link { color: var(--crimson); font-weight: 700; padding: 6px 4px; }
.sheet.hs button, .hs-dialog button { margin: 0; min-height: 34px; padding: 6px 12px; font-size: 13px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); }
.sheet.hs button:hover:not(:disabled) { border-color: var(--ink); }
.sheet.hs button.primary, .hs-dialog button.primary { background: var(--crimson); color: var(--crimson-ink); border-color: #5c1010; font-weight: 700; }
.sheet.hs button.danger, .hs-dialog button.danger { background: var(--alarm); color: #fff; border-color: #5c1010; }
.hs-dialog button:disabled { opacity: 0.5; cursor: default; }
.hs-label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.hs-select, .hs-input { box-sizing: border-box; padding: 7px 8px; font: inherit; font-size: 15px; min-height: 36px;
  background: #fffdf5; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); max-width: 100%; }
.hs-select:focus, .hs-input:focus { border-color: var(--ink); }
.hs-qty { width: 64px; box-sizing: border-box; padding: 5px 6px; font: inherit; border: 1px solid var(--line); border-radius: 4px; background: #fffdf5; }
.hs-field { margin: 8px 0; }
.hs-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0; }
.hs-pick { display: flex; gap: 8px; align-items: center; min-height: 34px; cursor: pointer; }
.hs-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--crimson); }
.hs-flash { position: relative; margin: 8px 0; padding: 8px 90px 8px 10px; border-left: 4px solid var(--green); background: #e4eed8; font-weight: 600; }
.hs-flash .hs-flash-x { position: absolute; right: 6px; top: 6px; }
.hs-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 7px 4px; border-bottom: 1px dashed var(--line); }
.hs-item-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
.hs-up { padding: 8px 4px; border-bottom: 1px dashed var(--line); }
.hs-up-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hs-inside { font-weight: 700; color: var(--green); }
.hs-sub { font-size: 12px; margin-top: 14px; }
.hs-pay { margin: 8px 0; }
.ch-lock { margin: 6px 0; padding: 7px 10px; border-left: 4px solid var(--alarm); background: var(--paper-2); }

/* карта: зона дома, метка «ты в квартире», значок «можно напасть» */
.hs-home-dot { width: 16px; height: 16px; margin: 1px; box-sizing: border-box; border-radius: 3px 3px 50% 50%;
  background: var(--gold); border: 2px solid #3b2f12; box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.45); }
.hs-house { width: 26px; height: 26px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; background: var(--crimson); color: var(--crimson-ink); border: 2px solid var(--gold);
  font: 700 15px var(--font-sign); box-shadow: 0 0 8px rgba(158, 27, 50, 0.8); }
.hs-house-card { min-width: 190px; color: var(--ink); font-size: 13px; line-height: 1.35; }
.hs-house-card button { margin: 6px 6px 0 0; min-height: 34px; padding: 5px 11px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font-size: 13px; }
.hs-house-card button.primary, .hs-house-card button.danger { background: var(--crimson); color: var(--crimson-ink); border-color: #5c1010; font-weight: 700; }
.hs-house-card .hs-actions { margin-top: 4px; }
.hs-inside-chip { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 1000; display: flex; gap: 10px;
  align-items: center; max-width: calc(100% - 24px); padding: 6px 10px; background: var(--side-bg); color: var(--side-ink);
  border: 1px solid #000; border-left: 4px solid var(--gold); border-radius: 5px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5); font-size: 13px; }
.hs-inside-chip button { margin: 0; min-height: 30px; padding: 3px 10px; background: var(--side-card-hover);
  color: var(--side-ink); border: 1px solid var(--side-muted); border-radius: 4px; }
@media (max-width: 760px) {
  .hs-flash { padding-right: 10px; padding-bottom: 44px; }
  .hs-item-actions { margin-left: 0; width: 100%; }
  .sheet.hs button, .hs-dialog button { min-height: 44px; }
  .hs-select, .hs-input { min-height: 44px; }
  .hs-inside-chip { bottom: 28px; }
}

/* --- боковая панель: «приборная доска» персонажа; разделы — вкладки страницы --- */
#side { padding: 10px 10px 12px; --tap: 32px; overflow-x: hidden; }
.sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (pointer: coarse), (max-width: 900px) { #side, #page { --tap: 44px; } }
#side :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.navbtn, .menu-toggle, .q, .tscroll { margin-top: 0; }
.navbtn { width: 100%; min-height: 56px; padding: 0 12px; border: 0; border-radius: 4px; flex: none;
  background: var(--crimson); color: var(--crimson-ink); box-shadow: 0 3px 0 #5c0f1d; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px; font: 20px var(--font-sign); letter-spacing: .03em; }
.navbtn:hover { background: #b5223c; }
.navbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #5c0f1d; }
.navbtn .badge { background: var(--gold-soft); color: #1b1610; font: 700 15px/1.4 var(--font-text); border-radius: 12px; padding: 0 8px; }
.menu-toggle { display: none; }
.sb-tokens { display: none; }
.badge { font-size: 13px; }
.who { margin: 8px 4px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.who b { font: 18px var(--font-sign); overflow-wrap: anywhere; }
.who span { color: var(--side-muted); font-size: 14px; white-space: nowrap; }
.dash { margin-top: 8px; padding: 6px 10px 8px; background: var(--side-card); border: 1px solid var(--side-line); border-radius: 4px; }
.dash-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--side-muted); }
.dash-h .v { letter-spacing: 0; text-transform: none; font: 700 16px var(--font-text); color: var(--side-ink); }
.dash-h .v.bad, .dmg .bad { color: #ff7b68; }
.ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wn { flex: 1 1 auto; text-align: right; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--side-ink); }
.q { position: relative; flex: none; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--side-muted);
  background: transparent; color: var(--side-muted); font: 700 13px/20px var(--font-text); text-align: center; margin-left: 6px; cursor: pointer; }
.q::after { content: ""; position: absolute; inset: -11px; }
.q[aria-expanded="true"] { background: var(--gold-soft); color: #1b1610; border-color: var(--gold-soft); }
.qtext { margin: 4px 0 2px; font-size: 14px; color: var(--side-ink); }
.dash-note { margin: 2px 0 0; font-size: 14px; color: var(--side-muted); }
.dash-note.bad { color: #ff7b68; font-weight: 700; }
#side .bar { position: relative; display: block; height: 10px; background: #2c241b; border: 1px solid #7a6b55;
  border-radius: 2px; overflow: hidden; margin-top: 4px; }
#side .bar > i, #side .bar-fill { display: block; height: 100%; background: #5fa84a; }
#side .bar.low > i { background: #e5533f; }
.dstats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.dstats li { padding: 3px 6px; border: 1px solid var(--side-line); border-radius: 3px; background: var(--side-bg); min-width: 0; }
.dstats .n { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 14px; color: var(--side-muted); text-decoration: none; }
.dstats .n:hover { color: var(--gold-soft); }
.dstats b { font: 19px/1.15 var(--font-sign); color: var(--gold-soft); }
.dstats small { display: block; min-height: 1.25em; font-size: 14px; color: var(--side-ink); line-height: 1.25; }
.zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
.zones div { text-align: center; padding: 2px 0; border: 1px solid var(--side-line); border-radius: 3px; background: var(--side-bg);
  font-size: 14px; color: var(--side-muted); }
.zones b { display: block; font: 18px/1.2 var(--font-sign); color: var(--side-ink); }
.zones .brk b { color: #ff7b68; }
.dmg { margin: 2px 0 0; font: 21px/1.15 var(--font-sign); color: var(--gold-soft); }
.dmg small { font: 14px var(--font-text); color: var(--side-muted); margin-left: 6px; }
.dskills { list-style: none; margin: 2px 0 0; padding: 0; font-size: 15px; }
.dskills li { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dotted var(--side-line); }
.dskills li:last-child { border-bottom: 0; }
.dskills span:last-child { color: var(--side-muted); }
.dskills .dash-empty { color: var(--side-muted); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pair .dash { margin-top: 0; min-width: 0; }
.big { margin: 0; font: 22px/1.2 var(--font-sign); color: var(--gold-soft); }
.big .hero-money { font: inherit; color: inherit; text-decoration: none; white-space: nowrap; }
.nav-body details.hint summary { cursor: pointer; }

@media (min-width: 901px) and (max-height: 800px) {
  #side { padding: 8px; }
  #side .navbtn { min-height: 48px; }
  #side .dash { margin-top: 6px; padding: 4px 8px 6px; }
  #side .who { margin-top: 6px; }
  #side .who b { font-size: 17px; }
  #side .dstats li { padding: 2px 6px; }
  #side .dstats b { font-size: 18px; }
  #side .pair { margin-top: 6px; }
  #side .pair .dash { margin-top: 0; }
  #side .dash-h { min-height: 20px; }
  #side .dash-h .q { width: 20px; height: 20px; line-height: 18px; }
  #side .dash-note { margin-top: 0; line-height: 1.25; }
  #side .dskills li { padding: 1px 0; }
}

/* --- вкладки страницы --- */
.tabs-wrap { display: flex; align-items: flex-end; gap: 4px; padding: 6px 12px 0; }
.tabbar { position: relative; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 0 2px; }
.tabbar::-webkit-scrollbar { display: none; }
.tablist { display: flex; gap: 4px; width: max-content; }
.tab { flex: 0 0 auto; min-height: var(--tap, 32px); padding: 0 14px; display: inline-flex; align-items: center; gap: 6px;
  font: 15px var(--font-sign); letter-spacing: .03em; white-space: nowrap; text-decoration: none;
  background: var(--paper); color: var(--muted); border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; }
.tab:hover { color: var(--ink); background: #f6efdd; }
.tab.active { background: var(--ink); color: var(--gold-soft); border-color: var(--ink); }
.tab:focus-visible { outline: 3px solid #1b1610; outline-offset: -4px; }
.tab.active:focus-visible { outline-color: var(--focus); }
.tab .badge { font: 700 14px/1.4 var(--font-text); background: var(--crimson); color: var(--crimson-ink); border-radius: 10px; padding: 0 7px; }
.tab .badge.alarm { background: #a3261b; color: #fff; }
.tab.active .badge { outline: 1px solid var(--gold-soft); }
.tab-detail.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tscroll { flex: none; width: var(--tap, 32px); min-height: var(--tap, 32px); margin-bottom: 2px; border: 1px solid var(--ink);
  border-radius: 4px; background: var(--paper); color: var(--ink); font: 700 22px/1 var(--font-text); cursor: pointer; }
.tscroll:hover:not(:disabled) { background: var(--ink); color: var(--gold-soft); }
.tscroll:disabled { opacity: .35; cursor: default; }
.tscroll:focus-visible { outline: 3px solid #1b1610; outline-offset: -4px; }
#page-body:has(.sheet-wide, .gear) { max-width: 1120px; }

/* телефон и планшет в портрете (до 900 px): доска — липкая полоса сверху (кнопка + «Показатели» + здоровье + жетоны) */
@media (max-width: 900px) {
  #game { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  #side { order: 0; max-height: 75vh; padding: 6px 12px; border-right: none; border-bottom: 2px solid var(--gold); display: block; }
  #stage { order: 1; }
  .side-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nav tg" "hp tk" "bar bar";
    gap: 0 10px; align-items: center; }
  .navbtn { grid-area: nav; }
  .menu-toggle { grid-area: tg; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; padding: 0 12px;
    background: var(--side-card); color: var(--side-ink); border: 1px solid var(--side-line); border-radius: 4px; cursor: pointer; font: inherit; }
  .side-bar .who { display: none; }
  .side-bar .dash { display: contents; }
  .side-bar .dash-h { grid-area: hp; margin: 4px 0 0; min-height: var(--tap); }
  .side-bar .dash-h .q, .side-bar .qtext { display: none; }
  .side-bar .bar { grid-area: bar; margin: 0 0 4px; }
  .side-bar .dash-note { grid-column: 1 / -1; }
  .sb-tokens { grid-area: tk; display: block; margin: 0; color: var(--gold-soft); font-weight: 700; padding: 0 4px; text-align: right; }
  .side-more { display: none; padding-bottom: 6px; }
  #side.open .side-more { display: block; }
  .side-more .dash:first-child { margin-top: 8px; }
  .page-bar { padding: 6px 16px 0; }
  .tabs-wrap { padding: 6px 8px 0; }
  #page-body { padding: 12px 16px 32px; }
  .nav-panel { top: 8px; right: 8px; width: min(300px, calc(100% - 16px)); max-height: 60%; }
}

/* --- справочник --- */
a.cx-link { color: inherit; text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
a.cx-link:hover { color: var(--crimson); text-decoration-color: var(--crimson); }
.codex .cx-search { width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 15px; margin: 4px 0 0;
  border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); color: var(--ink); }
.cx-list, .cx-bullets, .cx-chips { margin: 0; padding: 0; list-style: none; }
.cx-row { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.cx-row > a { font-weight: 600; color: var(--crimson); text-decoration: none; }
.cx-row > a:hover { text-decoration: underline; }
.cx-bullets li { padding: 5px 0 5px 16px; position: relative; border-bottom: 1px dashed var(--line); }
.cx-bullets li::before { content: "▪"; position: absolute; left: 2px; color: var(--crimson); }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-chips li { padding: 3px 9px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; }
.cx-lead { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.cx-body { margin: 0 0 8px; line-height: 1.5; }
.cx-crumbs { margin-bottom: 4px; }
.cx-crumbs a { color: var(--crimson); }
.cx-formula { display: block; padding: 8px 10px; background: var(--paper-2); border-left: 4px solid var(--gold);
  font: 14px var(--font-mono); overflow-wrap: anywhere; }
.cx-manage { display: inline-block; margin-top: 18px; padding: 8px 14px; background: var(--crimson); color: var(--crimson-ink);
  border-radius: 4px; text-decoration: none; font-weight: 700; }
.cx-manage:hover { background: #b8213b; }

/* --- наёмники (документ 24): окно поверх карты или анкеты (ui/blocks/mercs.js), кнопка в карточке отеля, бой --- */
.mc-dialog { max-width: 520px; }
.mc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mc-head .fr-dialog-title { margin-bottom: 2px; outline-offset: 4px; }
.fr-dialog.mc-dialog button { min-height: 44px; }
.mc-dialog .mc-close { flex: none; min-width: 44px; padding: 0; background: none; color: var(--muted); font-size: 16px; }
.mc-dialog .mc-close:hover { color: var(--ink); border-color: var(--ink); }
.mc-dialog .mc-ghost { background: transparent; }
.mc-dialog button.danger { background: var(--alarm); color: #fff; border-color: #5c1010; font-weight: 700; }
.mc-dialog button:hover:not(:disabled) { border-color: var(--ink); }
.mc-dialog button.primary:hover:not(:disabled), .mc-dialog button.danger:hover:not(:disabled) { background: #b8213b; }
.mc-dialog button:disabled { opacity: 0.5; cursor: default; }
.mc-sub { color: var(--muted); }
.mc-note { margin: 6px 0 0; padding: 6px 8px; border-left: 4px solid var(--green); background: #e4eed8; font-weight: 600; }
.mc-slots { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin: 8px 0 0; }
.mc-slots b { font: 16px var(--font-sign); }
.mc-wallet { color: var(--muted); }
.mc-empty { margin: 8px 0 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 4px; color: var(--muted); }
.mc-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.mc-row { padding: 9px 8px 10px 10px; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
.mc-row:nth-child(even) { background: var(--paper-2); }
.mc-row:nth-child(even) .mc-actions > button:not(.primary):not(.danger) { background: var(--paper); }
.mc-row.is-busy { border-left-color: var(--gold); }
.mc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 10px; flex-wrap: wrap; }
.mc-name { overflow-wrap: anywhere; font-size: 15px; }
.mc-status { font: 700 11px var(--font-text); letter-spacing: 1px; text-transform: uppercase; padding: 1px 6px;
  border: 1px solid currentColor; border-radius: 3px; white-space: nowrap; }
.mc-status.ready { color: #1f4a15; background: #dfead2; }
.mc-status.wounded { color: #8a1f14; background: #f6e3df; }
.mc-status.fighting { color: #5a4300; background: #f4e7b4; }
.mc-info { font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.mc-actions button { flex: 1 1 auto; }
.mc-busy { margin: 6px 0 0; font-size: 13px; color: #5a4300; }
.mc-form { margin-top: 8px; padding: 6px 10px 10px; background: #fffbea; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 3px; }
.mc-form-danger { border-left-color: var(--alarm); }
.mc-form p { margin: 4px 0 0; }
.mc-q { font-weight: 700; overflow-wrap: anywhere; }
.mc-field { margin: 8px 0 0; padding: 2px 10px 4px; min-width: 0; border: 1px solid var(--line); border-radius: 4px; }
.mc-field legend { padding: 0 4px; font-weight: 700; font-size: 13px; }
.mc-opt { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 6px 0; box-sizing: border-box; cursor: pointer; }
.mc-opt + .mc-opt { border-top: 1px dashed var(--line); }
.mc-opt input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--crimson); }
.mc-opt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.mc-opt-hint { color: var(--muted); font-size: 12.5px; }
.mc-h3 { margin: 16px 0 0; font: 14px var(--font-sign); letter-spacing: 1px; text-transform: uppercase;
  border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
.mc-total { margin: 8px 0; font-size: 15px; }
.mc-total b { font: 18px var(--font-sign); }
.mc-hire .mc-go { width: 100%; font-size: 15px; }
.mc-hint { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.mc-warn { margin: 6px 0 0; padding: 6px 8px; border-left: 4px solid var(--alarm); background: var(--paper-2); font-weight: 600; }
.mc-dialog :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus); }
@media (max-width: 480px) {
  .fr-back.mc-back { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .mc-dialog { padding: 12px; }
  .mc-head .fr-dialog-title { font-size: 18px; }
}
/* кнопка «Наёмники» в карточке отеля */
.poi-card .pc-mercs { padding-top: 6px; border-top: 1px dashed var(--line); }
.poi-card .pc-mercs button { min-height: 44px; padding: 6px 16px; }
/* пункт «Наёмники» в анкете */
.cs-mercs { margin-top: 14px; }
.cs-mercs .cs-btn { margin-top: 10px; }
/* бой: наёмник в колонке своих — подпись и значок тактики; в протоколе — пометка */
.rc.merc { border-left-style: double; }
.rc.merc .rc-tag { white-space: nowrap; }
.rc-tactic { display: inline-block; padding: 0 6px; border: 1px solid #6b6450; border-radius: 3px; color: var(--gold-soft);
  font-size: 11px; letter-spacing: 0.5px; cursor: help; }
.pr-merc { font-style: italic; }

/* --- здания на карте: значок своего здания, режим выбора, карточка (документ 12, раздел 9е) --- */
.bd-dot { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; box-sizing: border-box;
  background: var(--gold); color: #1a1a1a; border: 2px solid var(--crimson); border-radius: 3px;
  font: 700 11px var(--font-text); line-height: 1; box-shadow: 0 0 3px rgba(0, 0, 0, 0.55); }
.map-marker:focus-visible .bd-dot { outline: 3px solid var(--focus); outline-offset: 2px; }
.bd-pick { margin: 6px 0 0; padding: 6px 12px; min-height: 36px; }
.bd-pick[aria-pressed="true"] { background: var(--gold); color: #1a1a1a; border-color: var(--gold-soft); font-weight: 700; }
#stage.bd-picking #map { cursor: crosshair; }

/* карточка здания: те же правила, свой класс (на .poi-card у точек стоят тесты) */
.bd-card { position: absolute; z-index: 1050; left: 12px; bottom: 12px; width: min(320px, calc(100% - 24px)); box-sizing: border-box;
  max-height: calc(100% - 24px); overflow-y: auto; padding: 10px 12px; background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-left: 6px solid var(--crimson); border-radius: 4px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
  font-size: 14px; line-height: 1.4; outline: none; }
.bd-card .pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.bd-card .pc-title { font: 17px var(--font-sign); overflow-wrap: anywhere; }
.bd-card .pc-close { margin: 0; padding: 0 8px; min-width: 32px; min-height: 32px; background: none; border: 1px solid var(--line);
  border-radius: 4px; color: var(--muted); }
.bd-card .pc-close:hover { border-color: var(--ink); color: var(--ink); }
.bd-card .pc-line { padding: 1px 0; }
.bd-card .pc-line.strong { font-size: 14px; }
.bd-card .pc-mine { font-weight: 700; color: var(--crimson); }
.bd-card button { margin: 0; padding: 6px 12px; min-height: 36px; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font-size: 13px; }
.bd-card button:hover:not(:disabled) { border-color: var(--ink); }
.bd-card button.primary { background: var(--crimson); color: var(--crimson-ink); border-color: #5c1010; font-weight: 700; }
.bd-card button.danger { background: var(--alarm); color: #fff; border-color: #5c1010; }
@media (max-width: 760px) { .bd-card { left: 8px; bottom: 8px; width: calc(100% - 16px); } }

.bd-card .pc-challenge { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); }
.bd-card .pc-why { color: var(--alarm); font-weight: 600; flex-basis: 100%; }

/* своё здание: постройка, склад, рецепты и очередь (ЗД4.2); сырьё в итоге боя */
.bd-own { margin-top: 8px; }
.bd-own[hidden] { display: none; }
.bd-sec { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); }
.bd-sec h3 { margin: 0 0 4px; font: 15px var(--font-sign); }
.bd-sec h4 { margin: 8px 0 2px; font-size: 13px; color: var(--muted); }
.bd-list { list-style: none; margin: 4px 0 0; padding: 0; }
.bd-row, .bd-job { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: space-between; padding: 3px 0; }
.bd-job { display: block; font-size: 13px; }
.bd-job.is-paused { color: var(--alarm); }
.bd-name { font-weight: 600; overflow-wrap: anywhere; }
.bd-act { display: inline-flex; gap: 6px; align-items: center; }
.bd-recipe { margin-top: 6px; }
.bd-own input.bd-qty { width: 56px; min-height: 36px; box-sizing: border-box; padding: 4px 6px; margin: 0; background: var(--paper-2);
  color: var(--ink); border: 1px solid var(--line); border-radius: 4px; font-size: 13px; }
.bd-own button.bd-mini { min-height: 36px; }
.bd-card button:focus-visible, .bd-own input:focus-visible, .bd-shift select:focus-visible, .bd-shift button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* смена и ремонт (ЗД4.3) */
.bd-shift { margin-top: 8px; }
.bd-shift[hidden] { display: none; }
.bd-shift select.bs-hours { min-height: 36px; padding: 4px 6px; margin: 0; background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px; font-size: 13px; }
.bd-shift .bs-bar { width: 100%; height: 10px; accent-color: var(--gold); }
.bd-shift .bs-active { border-top-color: var(--gold); }
.bd-shift .pc-why { color: var(--alarm); font-weight: 600; flex-basis: 100%; }
.bd-shift button.primary { background: var(--crimson); color: var(--crimson-ink); border-color: #5c1010; font-weight: 700; }
.bd-shift button.danger { background: var(--alarm); color: #fff; border-color: #5c1010; }
.cs input.cs-qty { width: 64px; min-height: var(--tap); box-sizing: border-box; padding: 0 8px; margin-right: 6px; border: 1px solid var(--ink);
  border-radius: 4px; background: var(--paper); color: var(--ink); font: inherit; }
.battle .result-loot { margin-top: 6px; padding: 6px 8px; border-left: 4px solid var(--gold); background: #2a2720; font-weight: 600; }