/* ЭПОХА — браузерный клиент.
   Тёмный «штабной стол»: тёплая бумага на угле, тонкие линии, прямые углы,
   цифры моноширинные. Никаких градиентных кнопок, теней и свечений. */

:root {
  /* фон и панели */
  --bg: #12100d;
  --bg-2: #1b1813;
  --panel: #221e18;
  --panel-2: #272219;
  --line: #3a332a;
  --line-2: #4a4236;

  /* текст */
  --text: #e8e0cf;
  --muted: #9e9483;
  --dim: #6f675a;

  /* акценты */
  --sand: #c9a961;
  --sand-dim: #8a7440;
  --danger: #b8432f;
  --calm: #5b8c5a;
  --water: #2c4a63;

  /* размеры */
  --top-h: 40px;
  --log-h: 152px;
  --side-w: 288px;
  --r: 2px;

  --mono: ui-monospace, Consolas, "Liberation Mono", monospace;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 var(--ui);
  overflow: hidden;
}

.mono, .num, .hud, .pill, code { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.tiny { font-size: 11px; }
.pad { padding: 12px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
[hidden] { display: none !important; }

/* ── Кнопки и поля ─────────────────────────────────────────────────── */

.btn {
  appearance: none;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #2f2920; border-color: var(--line-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 1px solid var(--sand);
  outline-offset: 1px;
}
.btn-primary { border-color: var(--sand-dim); color: var(--sand); background: #2a2419; }
.btn-primary:hover:not(:disabled) { background: #332b1d; border-color: var(--sand); }
.btn-danger { border-color: #6b2a20; color: #d9836f; background: #241713; }
.btn-danger:hover:not(:disabled) { background: #2e1c17; border-color: var(--danger); }
.btn-sm { padding: 3px 7px; font-size: 11px; }
.btn-block { display: block; width: 100%; text-align: left; }

input[type="text"], input[type="number"], textarea, select {
  background: #16130f;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  width: 100%;
}
textarea { resize: vertical; font-family: var(--mono); font-size: 11px; }
select { cursor: pointer; }

.field { display: block; margin: 8px 0; }
.field-label {
  display: block;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.field-inline { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.field-inline > .field-label { margin: 0; min-width: 92px; }
.field-inline > input, .field-inline > select { width: auto; min-width: 62px; }
.check { display: flex; align-items: center; gap: 6px; margin: 8px 0; font-size: 12px; color: var(--muted); }
.check input { width: auto; }

/* ── Экраны ────────────────────────────────────────────────────────── */

.screen { position: fixed; inset: 0; }

/* ── Вход ──────────────────────────────────────────────────────────── */

.login {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(360px, 460px);
  gap: 28px;
  justify-content: center;
  align-content: center;
  padding: 24px;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, #ffffff08 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, #ffffff08 39px 40px),
    var(--bg);
}
.login-side { align-self: center; border-left: 2px solid var(--sand-dim); padding-left: 18px; }
.brand {
  font-size: 40px;
  line-height: 1;
  letter-spacing: .34em;
  margin: 0 0 6px;
  color: var(--sand);
  font-weight: 500;
}
.brand-sm { font-size: 14px; letter-spacing: .26em; margin: 0; color: var(--sand); }
.brand-sub { color: var(--muted); margin: 0 0 18px; letter-spacing: .04em; }
.brand-list { margin: 0 0 18px; padding-left: 16px; color: var(--muted); }
.brand-list li { margin-bottom: 6px; }
.brand-note { color: var(--dim); font-size: 11px; margin: 0; }
.login-main { align-self: center; display: flex; flex-direction: column; gap: 12px; }
.reg-result { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.warn { color: #d9836f; font-size: 12px; margin: 0 0 8px; }

/* ── Панели ────────────────────────────────────────────────────────── */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
}
.panel-flush { padding: 0; overflow: hidden; }
.panel-title {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 8px;
  font-weight: 600;
}
.side-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.side-title { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sand); }

.note { border: 1px solid var(--line); padding: 8px 10px; font-size: 12px; background: var(--panel); border-radius: var(--r); }
.note-error { border-color: #6b2a20; color: #e5a08e; background: #241713; }

/* ── Мои партии ────────────────────────────────────────────────────── */

.page-head {
  height: var(--top-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.page-head-left { display: flex; align-items: baseline; gap: 12px; }
.page-body { height: calc(100% - var(--top-h)); overflow: auto; padding: 12px; }
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 12px; align-items: start; }
.sect-title {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 8px;
}

table.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
table.tbl th {
  text-align: left;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  padding: 5px 8px;
}
table.tbl td { border-bottom: 1px solid #2b251d; padding: 5px 8px; vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl .right { text-align: right; }
.seat-dot { display: inline-block; width: 8px; height: 8px; border: 1px solid #00000066; vertical-align: -1px; margin-right: 4px; }
.tag {
  display: inline-block;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 0 4px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag-mine { border-color: var(--sand-dim); color: var(--sand); }
.tag-turn { border-color: var(--calm); color: #9fc79c; }
.tag-done { border-color: #6b2a20; color: #d9836f; }
.code-box {
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: .16em;
  color: var(--sand);
  border: 1px dashed var(--sand-dim);
  padding: 6px 8px;
  text-align: center;
  border-radius: var(--r);
}

/* ── Партия ────────────────────────────────────────────────────────── */

#scr-game { display: grid; grid-template-rows: var(--top-h) minmax(0, 1fr) var(--log-h); background: var(--bg); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  overflow: hidden;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.match-name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.match-code { color: var(--dim); font-size: 11px; letter-spacing: .1em; }
.pill { border: 1px solid var(--line-2); padding: 1px 6px; font-size: 11px; color: var(--muted); border-radius: var(--r); white-space: nowrap; }
.hud { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; border-left: 1px solid var(--line); padding-left: 8px; }
.hud-k { font-family: var(--ui); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hud-delta { color: var(--calm); font-size: 11px; }
.hud-delta.neg { color: #d9836f; }
.hud-deadline .mono { color: var(--sand); }

.game { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); min-height: 0; }

.map-wrap { position: relative; overflow: hidden; background: #0d0c0a; min-width: 0; }
#map { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#map.dragging { cursor: grabbing; }
.map-hint {
  position: absolute;
  left: 8px;
  bottom: 6px;
  font-size: 10px;
  color: #b3a68c;
  background: #12100dcc;
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: var(--r);
  pointer-events: none;
}
.banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #12100dee;
  border: 1px solid var(--sand-dim);
  border-left: 3px solid var(--sand);
  padding: 6px 14px;
  font-size: 14px;
  color: var(--sand);
  letter-spacing: .02em;
  pointer-events: none;
  white-space: nowrap;
}
.banner.danger { border-color: #6b2a20; border-left-color: var(--danger); color: #eda893; }
.legend {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #12100dee;
  border: 1px solid var(--line);
  padding: 6px 8px;
  font-size: 11px;
  color: var(--muted);
  max-width: 220px;
}
.legend div + div { margin-top: 3px; }
.legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: 0; }
.toast {
  position: fixed;
  z-index: 30;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: #241713ee;
  border: 1px solid #6b2a20;
  color: #eda893;
  padding: 6px 12px;
  font-size: 12px;
  max-width: 70%;
  border-radius: var(--r);
}

.side { border-left: 1px solid var(--line); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: var(--bg-2); }
#minimap { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); image-rendering: pixelated; }
#tile-readout { padding: 5px 8px; margin: 0; }
.side-grow { display: grid; grid-template-rows: auto minmax(0, 1fr); border-left: none; border-right: none; border-bottom: none; border-top: 1px solid var(--line); }
.side-players { border: none; border-top: 1px solid var(--line); }
.tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.tab {
  flex: 1;
  appearance: none;
  background: none;
  border: none;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  letter-spacing: .06em;
  padding: 6px 4px;
  cursor: pointer;
}
.tab:last-child { border-right: none; }
.tab.active { color: var(--sand); background: var(--panel); box-shadow: inset 0 -2px 0 var(--sand-dim); }
.tab-body { overflow: auto; padding: 8px; min-height: 0; }
.players { padding: 5px 8px 8px; overflow: auto; max-height: 148px; }
.player-row { display: flex; align-items: baseline; gap: 6px; font-size: 11px; padding: 2px 0; }
.player-row .who { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-row.active .who { color: var(--sand); }

/* карточки отрядов и городов */
.card { border: 1px solid var(--line); background: var(--panel); margin-bottom: 6px; }
.card.sel { border-color: var(--sand-dim); }
.card-head { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.card-icon { font-family: var(--mono); width: 16px; text-align: center; color: var(--sand); }
.card-name { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-body { padding: 6px 7px; }
.stat-line { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); }
.stat-line b { font-weight: 500; color: var(--text); font-family: var(--mono); }
.bar { height: 4px; background: #16130f; border: 1px solid var(--line); margin: 4px 0 6px; }
.bar > i { display: block; height: 100%; background: var(--calm); }
.bar.hp > i { background: var(--sand); }
.bar.low > i { background: var(--danger); }
.chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.chip {
  appearance: none;
  background: #1a1712;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
}
.chip:hover { border-color: var(--line-2); color: var(--text); }
.chip.on { border-color: var(--sand-dim); color: var(--sand); }
.chip .cost { color: var(--dim); font-family: var(--mono); margin-left: 4px; }
.tech-row { display: flex; gap: 6px; align-items: baseline; border-top: 1px solid #2b251d; padding: 5px 0; }
.tech-row:first-child { border-top: none; }
.tech-row .tech-name { font-size: 12px; }
.tech-row .tech-desc { color: var(--dim); font-size: 11px; }
.empty { color: var(--dim); font-size: 12px; padding: 8px 2px; }

.log-wrap { border-top: 1px solid var(--line); background: var(--bg-2); display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.log { overflow: auto; padding: 4px 8px 8px; font-size: 12px; }
.log-row { display: flex; gap: 8px; padding: 1px 0; border-bottom: 1px solid #221e18; }
.log-row .n { color: var(--dim); font-family: var(--mono); font-size: 11px; min-width: 34px; }
.log-row .turn { color: var(--dim); font-family: var(--mono); font-size: 11px; min-width: 40px; }
.log-row .txt { flex: 1; }
.log-row.type-city_founded .txt { color: var(--sand); }
.log-row.type-combat .txt, .log-row.type-city_captured .txt { color: #d9836f; }

/* ── Модальное окно ────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; background: #0b0a08cc; display: grid; place-items: center; z-index: 20; }
.modal-box { background: var(--panel); border: 1px solid var(--line-2); padding: 16px; width: 380px; max-width: calc(100vw - 32px); border-radius: var(--r); }

@media (max-width: 1200px) {
  .hud-deadline, .match-code { display: none; }
}
/* В партии сообщение стоит над лентой событий, а не поверх неё. */
body:has(#scr-game:not([hidden])) .toast { bottom: calc(var(--log-h) + 30px); }

/* Подсказки и кнопки, которые нужны только на узком экране или только мышью. */
.only-narrow { display: none; }
.hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
}

@media (max-width: 1080px) {
  .side { display: none; }
  .only-narrow { display: inline-flex; }
  /* Панель выезжает снизу поверх карты по кнопке «Панель». */
  .game.side-open .side {
    display: grid;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(62vh, 560px);
    z-index: 15;
    border-left: none;
    border-top: 1px solid var(--line-2);
    box-shadow: 0 -8px 24px #0009;
    overflow: auto;
  }
  /* Миникарта и «наведи курсор» на телефоне не нужны: вся высота — вкладкам. */
  .game.side-open .side { grid-template-rows: minmax(0, 1fr) auto; }
  .game.side-open .side > .panel:first-child { display: none; }
  #btn-panel[aria-expanded="true"] { border-color: var(--sand-dim); color: var(--sand); }
  /* Верхняя панель переносится, а не обрезает «Завершить ход». */
  #scr-game { grid-template-rows: auto minmax(0, 1fr) 96px; }
  body:has(#scr-game:not([hidden])) .toast { bottom: 126px; max-width: calc(100vw - 32px); }
  /* Плашка «Ходит …» и легенда игроков не должны наезжать друг на друга. */
  .legend { top: auto; bottom: 34px; right: 8px; }
  .banner { white-space: normal; max-width: calc(100% - 24px); text-align: center; }
  .topbar { flex-wrap: wrap; height: auto; padding: 4px 8px; row-gap: 4px; }
  .topbar-right { flex-wrap: wrap; row-gap: 4px; }
  .match-name { max-width: 40vw; }
  /* Таблицы лобби прокручиваются вбок внутри карточки: кнопка «Открыть» не теряется. */
  table.tbl { display: block; overflow-x: auto; }
  /* Панель скрыта — её колонку тоже убрать, иначе карта сжимается в полоску. */
  .game { grid-template-columns: minmax(0, 1fr); }
  .lobby-grid { grid-template-columns: minmax(0, 1fr); }
  .login { grid-template-columns: minmax(0, 1fr); align-content: start; overflow: auto; }
  .login-side { display: none; }
}

/* ── Старинный шрифт «Порубежья» ─────────────────────────────────────
   Заголовки, кнопки, вкладки, названия городов — летописным шрифтом; цифры и плотный
   текст (лента, таблицы) остаются системными, чтобы читались мелко на телефоне.
   Выбор между кандидатами — ?font=triodion|ponomar|prata (запоминается в браузере). */
:root { --display: 'Triodion', Georgia, serif; }
:root[data-font="ponomar"] { --display: 'Ponomar', Georgia, serif; }
:root[data-font="prata"] { --display: 'Prata', Georgia, serif; }

.brand, .brand-sm, .panel-title, .sect-title, .side-title, .match-name, .btn, .tab, .banner, .modal-box h3 {
  font-family: var(--display);
}
.brand { letter-spacing: .04em; font-size: 46px; font-weight: 400; }
.brand-sm { letter-spacing: .03em; font-size: 19px; }
.panel-title, .sect-title { text-transform: none; letter-spacing: .02em; font-size: 17px; font-weight: 400; }
.side-title { text-transform: none; letter-spacing: .02em; font-size: 14px; }
.btn { font-size: 14px; letter-spacing: 0; padding: 4px 10px; }
.tab { font-size: 14px; letter-spacing: 0; }
.match-name { font-size: 16px; }
.banner { font-size: 17px; }

/* Кнопка хода просит внимания (Civ5): отряд без приказа, город без стройки, знание не выбрано. */
#btn-end-turn.btn-attention { background: #2c2416; border-color: var(--sand); color: var(--sand); }

/* ── Летопись ─────────────────────────────────────────────────────────
   Свиток: тёплая бумага, летописный шрифт, киноварь в начале года. */
.chronicle-box {
  background: #e9dfc6;
  color: #2a2016;
  border: 1px solid #8a7440;
  width: 640px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 14px 18px 10px;
  border-radius: var(--r);
  box-shadow: 0 10px 40px #000a;
}
.chronicle-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chronicle-head .btn { background: #d8ccb0; color: #2a2016; border-color: #a8956b; }
.chronicle-title { font-family: var(--display); font-weight: 400; font-size: 26px; margin: 0; color: #7a1f12; }
.chronicle-sub { font-family: var(--display); margin: 2px 0 10px; color: #6b5a3c; font-size: 15px; }
.chronicle-body { overflow: auto; font-family: var(--display); font-size: 18px; line-height: 1.45; padding-right: 6px; }
.chronicle-year { margin: 0 0 10px; }
.chronicle-year b { color: #9b2a17; font-weight: 400; }
.chronicle-year.quiet { color: #8a7a5c; }
.chronicle-year.quiet b { color: #a0876a; }
.chronicle-body .muted { color: #6b5a3c; }