/* Hallmark · genre: atmospheric · macrostructure: Stat-Led · theme: Terminal
 * enrichment: none (typography only) · nav: N9 edge-aligned · footer: Ft2 inline
 * tone: technical/utilitarian · anchor hue: phosphor 148
 * pre-emit critique: P4 H5 E4 S5 R5 V4
 */

@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: clip;
  margin: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Одно фосфорное свечение за цифрой — атмосфера темы, не декор.
   Не анимировано, фиксировано, около 25% площади. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  background: radial-gradient(
    46rem 30rem at 18% 22%,
    oklch(80% 0.18 148 / 0.075),
    transparent 68%);
}

.wrap {
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: var(--space-lg);
  position: relative;
  z-index: var(--z-raised);
  /* Колонка на всю высоту, чтобы подвал прижимался к низу экрана,
     а не повисал посреди страницы на больших мониторах. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* ─────────────────────── шапка · N9 edge-aligned ─────────────────────── */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.mark {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}

.top-right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-ink-faint);
  flex: none;
}

[data-state="up"] .dot {
  background: var(--color-accent);
  animation: breathe 2.4s var(--ease-in-out) infinite;
}

[data-state="down"] .dot { background: var(--color-danger); }

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ─────────────────────── герой · Stat-Led ─────────────────────── */

.hero {
  padding-block: var(--space-3xl) var(--space-2xl);
}

.figure {
  font-size: var(--text-figure);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  display: flex;
  align-items: baseline;
  gap: 0.06em;
  overflow-wrap: anywhere;
  min-width: 0;
}

[data-state="down"] .figure { color: var(--color-ink-faint); }

.figure .slash {
  color: var(--color-ink-faint);
  font-weight: 400;
  font-size: 0.42em;
  letter-spacing: -0.02em;
}

.figure-label {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.headline {
  margin: var(--space-xl) 0 0;
  font-size: var(--text-3xl);
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 22ch;
  overflow-wrap: anywhere;
  min-width: 0;
}

.qualifier {
  margin: var(--space-sm) 0 0;
  color: var(--color-ink-muted);
  max-width: 46ch;
}

/* Адрес + копирование — контурный чип по канону Stat-Led */
.address {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-sm);
}

.address-value {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

/* ─────────────────────── кнопки ─────────────────────── */

.btn {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid var(--color-accent-dim);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}

.btn:hover, .btn.is-hover {
  background: var(--color-paper-3);
  border-color: var(--color-accent);
}

.btn:active, .btn.is-active { transform: translateY(1px); }

.btn:focus-visible, .btn.is-focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn[disabled], .btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--color-ink-faint);
  border-color: var(--color-rule);
}

.btn[data-busy="1"] { color: var(--color-ink-muted); }

/* Компактный вариант для шапки — заметный, но не спорит с «Скопировать». */
.btn--sm {
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn--danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn--danger:hover { background: var(--color-paper-3); }

.btn--quiet {
  color: var(--color-ink-muted);
  border-color: var(--color-rule);
}
.btn--quiet:hover { color: var(--color-ink); border-color: var(--color-ink-faint); }

/* ─────────────────────── таблица характеристик ─────────────────────── */

.specs {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-xl);
}

.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-variant-numeric: tabular-nums;
}

.spec-row:last-child { border-bottom: 0; }

.spec-key {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  align-self: center;
}

.spec-val { color: var(--color-ink); overflow-wrap: anywhere; min-width: 0; }

@media (max-width: 30rem) {
  .spec-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}

/* ─────────────────────── кто в игре ─────────────────────── */

.who {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-xl) var(--space-3xl);
}

.who h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--text-2xl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.players {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.players li {
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.empty { color: var(--color-ink-faint); margin: 0; }

/* Игрок из вайтлиста, который прямо сейчас в игре. */
.players li.is-on {
  color: var(--color-accent);
  border-color: var(--color-accent-dim);
}

.hint {
  margin: 0 0 var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  max-width: 52ch;
}

/* ─────────────────────── подвал · Ft2 inline ─────────────────────── */

.foot {
  margin-top: auto;
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-lg) var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

.foot a {
  color: var(--color-ink-faint);
  text-decoration: none;
  border-bottom: var(--rule-hair) solid transparent;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}

.foot a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent-dim); }
.foot a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ─────────────────────── диалог входа ─────────────────────── */

dialog {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  color: var(--color-ink);
  padding: var(--space-xl);
  width: min(24rem, calc(100vw - 2rem));
  font-family: var(--font-body);
}

dialog::backdrop { background: oklch(8% 0.01 155 / 0.72); }

dialog h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--text-xl);
  font-style: normal;
  font-weight: 700;
}

.field {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-base);
}

.field:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-accent-dim);
}

.dialog-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  margin-top: var(--space-lg);
}

.note {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
  min-height: 1.4em;
  color: var(--color-danger);
}

.note[data-tone="ok"] { color: var(--color-accent); }
.note[data-tone="muted"] { color: var(--color-ink-muted); }

/* ─────────────────────── админ-панель ─────────────────────── */

.panel[hidden] { display: none; }

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.panel-head h1 {
  margin: 0;
  font-size: var(--text-2xl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
}

.console-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-bottom: var(--space-lg);
}

.console-row .field { flex: 1 1 14rem; min-width: 0; width: auto; }

/* Блоки внутри панели */
.block {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-lg);
}

.block h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--text-xl);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
}

.count {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-ink-faint);
  font-variant-numeric: tabular-nums;
}

/* Фишка вайтлиста: имя + кнопка убрать */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-2xs);
}

/* Лицо из скина. Пиксель-арт нельзя сглаживать — иначе каша. */
.face {
  width: 20px;
  height: 20px;
  flex: none;
  display: block;
  border-radius: 1px;
  background: var(--color-paper-3);
  image-rendering: pixelated;
}

.row-label {
  margin: var(--space-md) 0 var(--space-xs);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.controls--tight { padding-block: 0; }

.chip-x {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-faint);
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}

.chip-x:hover, .chip-x.is-hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.chip-x:focus-visible, .chip-x.is-focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.chip-x[disabled] { opacity: 0.4; cursor: not-allowed; }

.log {
  margin: 0 0 var(--space-2xl);
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
  max-height: 24rem;
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ─────────────────────── постоянные настройки ─────────────────────── */

.setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xs) var(--space-md);
  align-items: center;
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.setting:last-child { border-bottom: 0; }

.setting-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  min-width: 0;
}

.setting-name { overflow-wrap: anywhere; }

.setting-hint {
  flex-basis: 100%;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  max-width: 52ch;
}

/* Метка «правка сделана, сервер её ещё не читал». */
.setting-mark {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-paper);
  background: var(--color-accent-dim);
  padding: 0 var(--space-2xs);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.setting-mark[hidden] { display: none; }

.setting-control { justify-self: end; min-width: 0; }

.setting-control--text {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  width: 100%;
  justify-self: stretch;
}

.setting-control--text .field { flex: 1 1 14rem; width: auto; min-width: 0; }

/* Сегментированный переключатель: радиокнопки без своей отрисовки.
   Инпуты не display:none — иначе они перестают ловить фокус и стрелки. */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.seg-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.seg-label {
  display: block;
  padding: var(--space-2xs) var(--space-sm);
  border-left: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}

.seg-label:first-of-type { border-left: 0; }

.seg-label:hover { background: var(--color-paper-3); color: var(--color-ink); }

.seg-input:checked + .seg-label {
  background: var(--color-accent-dim);
  color: var(--color-paper);
  font-weight: 700;
}

.seg-input:focus-visible + .seg-label {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.seg-input:disabled + .seg-label {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Полоса «правки сделаны, сервер их ещё не прочитал». */
.pending {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-accent-dim);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
}

.pending[hidden] { display: none; }

@media (max-width: 40rem) {
  .setting {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
  }
  .setting-control { justify-self: start; }
}

/* ─────────────────────── доступность ─────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}