/* Тактичка онлайн — чёрно-белая подложка без картинок и размытия (лёгкая отрисовка);
   цветные только смысловые пометки: рамки отрядов, состояния, атака/защита, графики. */
:root {
  --night: #0b0b0b; --moon: #ffffff; --cream: #f2f2f2; --stone: #8a8a8a;
  --bg: #000; --panel: #141414; --panel-solid: #1a1a1a; --popover: #1f1f1f; --sunk: #101010;
  --line: rgba(255, 255, 255, .14); --line-strong: rgba(255, 255, 255, .3);
  --fg: #f2f2f2; --muted: #a6a6a6;
  --ok: #6fbf73; --warn: #e0b04a; --bad: #e06a5a; --info: #7fb4e0;
  --att: #e08a5a; --def: #7fb4e0;
  --radius: 10px; --gap: 16px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --small: 13px; --body: 15px; --h2: 18px; --title: 30px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: var(--body); }
body { padding: 16px; }
@media (max-width: 480px) { body { padding: 8px; } }
a { color: var(--moon); }
button, input, select, textarea { font: inherit; color: inherit; }

.shell {
  max-width: 1280px; margin: 0 auto; border-radius: var(--radius);
  background: var(--night);
  padding: clamp(12px, 3vw, 40px); display: grid; gap: var(--gap); min-height: calc(100vh - 32px);
  align-content: start;
}

/* шапка */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.brand { font-family: var(--serif); font-size: 22px; color: var(--moon); text-decoration: none; white-space: nowrap; }
.brand::before { content: "◆ "; font-size: .55em; vertical-align: middle; color: var(--cream); }
.nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.nav a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--fg);
  border: 1px solid transparent; font-size: var(--small); background: var(--panel-solid); }
.nav a[aria-current="page"] { background: var(--moon); color: var(--night); }
.nav a:hover { border-color: var(--line-strong); }
.who { display: flex; align-items: center; gap: 8px; font-size: var(--small); }
.who .me { color: var(--moon); }
.who input { width: 11rem; }

/* панели */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(12px, 2vw, 22px); display: grid; gap: 10px; align-content: start; min-width: 0; }
.card > h2, .card > header h2 { font-size: var(--h2); font-weight: 500; margin: 0; }
.card > h2::before, .card > header h2::before { content: "◆ "; color: var(--moon); font-size: .7em; vertical-align: middle; }
.card > header { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.card h3 { font-size: var(--body); font-weight: 600; margin: 4px 0 0; }
.page-title { font-family: var(--serif); font-weight: 400; font-size: var(--title); margin: 8px 0 0;
  color: var(--moon); text-align: center; text-wrap: balance; }
.lede { text-align: center; color: var(--muted); margin: 0 auto; max-width: 70ch; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--gap); }
.grid.narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row.end { justify-content: flex-end; }
.stack { display: grid; gap: 8px; }
.muted { color: var(--muted); }
.small { font-size: var(--small); }
.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* плитки */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 10px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px;
  display: grid; gap: 2px; }
.tile b { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--moon); font-variant-numeric: tabular-nums; }
.tile span { color: var(--muted); font-size: var(--small); }

/* формы */
input[type=text], input[type=search], input[type=number], input[type=password], input[type=datetime-local], select, textarea {
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; min-width: 0; }
input[type=number] { width: 5.5rem; }
input.saved { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }  /* значение подтверждено в базе */
textarea { width: 100%; min-height: 4rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--moon); outline-offset: 2px; }
label { display: grid; gap: 4px; font-size: var(--small); color: var(--muted); }
label.inline { display: inline-flex; align-items: center; gap: 6px; }
.form { display: grid; gap: 10px; }
.form .row > label { flex: 1 1 8rem; }

.btn { border: 1px solid var(--line-strong); background: var(--panel-solid); color: var(--fg); border-radius: 8px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--moon); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--moon); color: var(--night); border-color: var(--moon); font-weight: 600; }
.btn.danger { border-color: rgba(224, 106, 90, .6); color: #f3b3a9; }
.btn.small { padding: 3px 9px; font-size: var(--small); }
.btn.ghost { background: transparent; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: var(--small); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--night); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--moon); color: var(--night); border-color: var(--moon); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap; background: var(--night); }
.badge.moon { border-color: var(--moon); color: var(--moon); }
.badge.ok { border-color: var(--ok); color: var(--ok); }
.badge.warn { border-color: var(--warn); color: var(--warn); }
.badge.bad { border-color: var(--bad); color: var(--bad); }
.badge.info { border-color: var(--info); color: var(--info); }

/* таблицы */
.tablewrap { max-height: 34rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: var(--small); font-variant-numeric: tabular-nums; }
th { position: sticky; top: 0; background: var(--panel-solid); text-align: left; font-weight: 500;
  border-bottom: 1px solid var(--line); z-index: 1; padding: 0; }
th button { background: none; border: 0; padding: 8px 10px; width: 100%; text-align: inherit; cursor: pointer; white-space: nowrap; }
th.plain { padding: 8px 10px; }
td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: rgba(255, 255, 255, .05); }
tr.dead td { color: var(--stone); text-decoration: line-through; }
@media (max-width: 720px) { .wide-only { display: none; } }

/* отряды */
.squads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 12px; }
.squad { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 6px;
  background: var(--sunk); }
/* рамки отрядов: зелёная — может действовать, синяя — ждёт череда, жёлтая — уже ходил в этом ходу, красная — уничтожен */
.squad.st-active { border: 2px solid var(--ok); }
.squad.st-done { border: 2px solid var(--warn); }
.squad.st-waiting { border: 2px solid var(--info); }
.squad.st-destroyed { border: 2px solid var(--bad); opacity: .85; }
.frame-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); }
.frame-legend .fl { display: inline-flex; align-items: center; gap: 6px; }
.frame-legend .fl::before { content: ""; width: 14px; height: 10px; border-radius: 3px; border: 2px solid; }
.frame-legend .fl.active::before { border-color: var(--ok); }
.frame-legend .fl.done::before { border-color: var(--warn); }
.frame-legend .fl.waiting::before { border-color: var(--info); }
.frame-legend .fl.destroyed::before { border-color: var(--bad); }
.squad .name { font-weight: 600; }
.squad .stats { display: flex; gap: 10px; font-variant-numeric: tabular-nums; }
.squad .stats b { color: var(--moon); font-weight: 600; }
.figs { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: var(--small); }
.figs li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.figs .nom { color: var(--muted); }
.st-damaged { color: var(--warn); }
.st-discard, .st-reserve, .st-dump, .st-dead { color: var(--stone); text-decoration: line-through; }

/* бой */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
@media (max-width: 720px) { .versus { grid-template-columns: 1fr; } .versus .vs { display: none; } }
.vs { align-self: center; font-family: var(--serif); font-size: 28px; color: var(--moon); }
.side { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; background: var(--panel); }
.side.attacker { border-color: rgba(224, 138, 90, .55); }
.side.defender { border-color: rgba(127, 180, 224, .55); }
.side .power { font-family: var(--serif); font-size: 34px; color: var(--moon); font-variant-numeric: tabular-nums; }
.parts { list-style: none; margin: 0; padding: 0; font-size: var(--small); color: var(--muted); display: grid; gap: 2px; }
.parts li { display: flex; justify-content: space-between; gap: 8px; }
.queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.queue li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 6px; background: var(--sunk); }
.queue li.current { border-color: var(--moon); box-shadow: 0 0 0 1px var(--moon) inset; }
.queue li.done { opacity: .85; }
.queue li.unavailable, .queue li.skipped, .queue li.waiting { opacity: .55; }
.queue .who-side { font-size: 12px; }
.queue .who-side.attacker { color: var(--att); }
.queue .who-side.defender { color: var(--def); }
.phase-head { font-size: var(--small); color: var(--moon); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.die { display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 8px; border: 1px solid var(--moon);
  font-family: var(--serif); font-size: 20px; color: var(--moon); }
.outcome { font-family: var(--serif); font-size: 22px; color: var(--moon); text-align: center; }

/* ход */
.order { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: ord; }
.order li { counter-increment: ord; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: var(--small); }
.order li::before { content: counter(ord) ". "; color: var(--muted); }
.order li.now { background: var(--moon); color: var(--night); border-color: var(--moon); }
.order li.now::before { color: var(--night); }

/* журнал */
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--small); }
.log li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.log li.reverted { opacity: .5; text-decoration: line-through; }
.log time { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .log li { grid-template-columns: 1fr; gap: 0; } }

/* окно и уведомления */
dialog { background: var(--popover); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0; width: min(40rem, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
dialog::backdrop { background: rgba(0, 0, 0, .7); }
dialog .dlg { padding: 18px; display: grid; gap: 12px; }
dialog .dlg h2 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--moon); }
.toast-box { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50;
  width: min(36rem, calc(100vw - 24px)); }
.toast-box[popover] { inset: auto; bottom: 16px; left: 50%; margin: 0; padding: 0; border: 0; background: transparent;
  overflow: visible; color: inherit; }
.toast { background: var(--popover); border: 1px solid var(--line-strong); border-left: 4px solid var(--ok); border-radius: 8px;
  padding: 10px 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.toast.error { border-left-color: var(--bad); }
.empty { color: var(--muted); font-size: var(--small); padding: 6px 0; }
.loading { color: var(--muted); text-align: center; padding: 30px; }
.foot { text-align: center; color: var(--muted); font-size: var(--small); margin: 0; }
/* Плашка «на ваш отряд напали» — на любой странице, над содержимым */
.alerts { display: grid; gap: 8px; }
.alert-attack { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px;
  border: 2px solid var(--bad); border-radius: var(--radius); background: var(--panel-solid);
  color: var(--fg); font-weight: 600; }
.alert-attack > span { flex: 1 1 16rem; }
details > summary { cursor: pointer; color: var(--muted); font-size: var(--small); }
.prop-desc { color: var(--muted); font-size: var(--small); }

/* статистика игры: графики как в дашборде */
.chart { position: relative; }
.chart svg { display: block; overflow: visible; }
.chart text { fill: var(--muted); font-size: 12px; font-family: var(--sans); }
.chart text.strong { fill: var(--fg); }
.chart line.grid { stroke: rgba(255, 255, 255, .10); }
.chart line.axis { stroke: rgba(255, 255, 255, .35); }
.chart-tip { position: absolute; pointer-events: none; background: var(--popover); border: 1px solid var(--line-strong);
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); padding: 6px 10px; font-size: var(--small); z-index: 3; white-space: nowrap; }
.chart-tip .t { color: var(--muted); margin-bottom: 2px; }
.chart-tip .r { display: flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; }
.chart-tip i, .chart-legend i, .tile.state i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--small); color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tile.big b { font-size: 40px; line-height: 1; }
.tile.state b { display: inline-flex; align-items: center; gap: 8px; }
/* инструкции */
.help-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: var(--small); line-height: 1.45; }