/* Бумажный СКИН зального экрана — «игры с задней парты».
 *
 * Тетрадь в клетку, поля с красной чертой, шариковая ручка у игроков и
 * карандаш у разметки поля. Это один из режимов show.html (второй, где он
 * есть, — 3D), а не отдельная страница: переключает их зритель кнопкой,
 * см. public/js/arena-show.js.
 *
 * Файл общий для всех тетрадных игр и задуман как ШАБЛОН: чтобы одеть в
 * бумагу новую игру, ничего здесь править не нужно — различия живут в карте
 * марок, которую страница игры передаёт в ArenaPaper.renderer().
 *
 * Почему не в games.css: это не игровой клиент, а зальная страница арены —
 * у неё своя палитра «бумаги», которой в лобби делать нечего.
 *
 * Свечения/неона тут нет намеренно: лист бумаги не светится (гейт вёрстки
 * ловит glow, и правильно делает).
 */

/* Рукописный шрифт — ЛОКАЛЬНО, из public/fonts: внешние хосты сюда не ходят
 * (и CSP их режет). На хосте arena.* путь /fonts/ пропускается к общему static
 * — см. ARENA_SHARED_STATIC в server/index.js, — поэтому лист одинаково одет
 * и с arena.roomcomm.xyz, и с /arena на общем хосте.
 *
 * ⚠️ Файлы 400 и 700 у Caveat ПОБАЙТНО ОДИНАКОВЫ: шрифт вариативный, вес —
 * ось внутри файла. Поэтому здесь ОДНО начертание на подмножество с
 * диапазоном `font-weight: 400 700`, а не два одинаковых лица: два лица
 * заставили бы браузер тянуть тот же файл дважды.
 *
 * unicode-range взят из public/fonts/CAVEAT-FACES.txt. Игровые значки
 * (✕ ◯ ● ◆ ─ │ ╱ ╲ ╳ ⚽ ✱ 💥 🐂 🐄 и стрелки ← → ↖ ↘) в эти диапазоны НЕ входят
 * и падают на следующий шрифт стека — так и задумано: рукописной стрелки в
 * Caveat нет, а показать вместо неё квадрат-плейсхолдер хуже. */
@font-face {
  font-family: 'Caveat';
  src: url('/fonts/caveat-400-cyrillic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  src: url('/fonts/caveat-400-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

body.skin-paper {
  /* Тетрадь: клетка 5 мм, поля 25 мм — школьный стандарт, от него всё считается */
  --cell: 5mm;
  --margin-x: 25mm;

  --sheet: #fdfbf3;
  --sheet-edge: #e7e2d2;
  --grid: rgba(86, 122, 176, .30);
  --grid-strong: rgba(86, 122, 176, .44);
  --margin-line: #d2716f;

  --ink1: #26379b;   /* синяя паста — первый игрок */
  --ink2: #c1332c;   /* красная паста — второй */
  --ink3: #2f7a43;   /* зелёная — третий, если сядет */
  --pencil: #8a8a84; /* карандашная разметка поля */
  --ink-note: #47506b;

  /* Caveat первым; дальше системные рукописные — на случай, если файл не
   * доехал, и для значков, которых в его подмножествах нет. */
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', 'Chalkboard SE',
          'Comic Sans MS', ui-rounded, cursive, sans-serif;

  margin: 0;
  min-height: 100%;
  background: var(--sheet-edge);
  color: var(--ink-note);
  font-family: var(--hand);
}

/* Лист. Клетка и красное поле — фоном, чтобы доска могла лечь ровно по клеткам. */
.sheet {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 14mm 10mm 18mm var(--margin-x);
  background-color: var(--sheet);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  box-shadow: 0 0 0 1px var(--sheet-edge);
}

/* Красная вертикаль полей — как в тетради, слева. */
.sheet::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--margin-x) - 2mm);
  width: 1px;
  background: var(--margin-line);
  opacity: .75;
}

.sheet-head { margin-bottom: 6mm; }

.title {
  font-size: 34px;
  font-weight: 700;
  color: var(--ink1);
  letter-spacing: .4px;
  transform: rotate(-.5deg);
}

.meta {
  margin-top: 2mm;
  font-size: 17px;
  color: var(--pencil);
}

/* Подписи игроков — почерком, цветом своей пасты. */
.players { display: flex; flex-wrap: wrap; gap: 8mm; margin-bottom: 5mm; }
.player { font-size: 20px; line-height: 1.3; }
.player .name { font-weight: 700; }
.player .sub { display: block; font-size: 15px; color: var(--pencil); }
.player.pen1 .name { color: var(--ink1); }
.player.pen2 .name { color: var(--ink2); }
.player.pen3 .name { color: var(--ink3); }
/* Чей ход — подчёркнуто от руки, а не подсвечено. */
.player.now .name { text-decoration: underline wavy; text-underline-offset: 4px; }
/* Волнистая черта «сейчас ходит» съедала строку подписи под именем. */
.player.now { padding-bottom: 3px; }
.player .sub { margin-top: 2px; }

.boards { display: flex; flex-wrap: wrap; gap: 9mm; align-items: flex-start; }

.board { max-width: 100%; }
.board-title { font-size: 19px; font-weight: 700; margin-bottom: 2mm; }
.board-note { margin-top: 2mm; font-size: 15px; color: var(--pencil); max-width: 90mm; }
.board-title[data-hot]::after {
  content: ' — ' attr(data-hot);
  color: var(--ink2);
  font-weight: 400;
}
.board svg { display: block; max-width: 100%; height: auto; }
/* Шрифт доски задаётся ПРАВИЛОМ, а не атрибутом font-family="var(--hand)":
 * var() в презентационном атрибуте SVG не резолвится, и подпись молча съехала
 * бы на дефолтный шрифт браузера (та же грабля, что с var() в canvas fillStyle). */
.board svg text { font-family: var(--hand); }

.status {
  margin-top: 7mm;
  font-size: 20px;
  color: var(--ink-note);
  max-width: 150mm;
}

.verdict {
  margin-top: 5mm;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink2);
  transform: rotate(-1.2deg);
}

.badge {
  position: fixed;
  right: 8px;
  bottom: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--pencil);
  border: 1px solid var(--sheet-edge);
  border-radius: 6px;
  padding: 3px 8px;
  background: var(--sheet);
}

@media (max-width: 700px) {
  body.skin-paper { --cell: 4mm; --margin-x: 12mm; }
  .sheet { padding: 8mm 5mm 12mm var(--margin-x); }
  .title { font-size: 24px; }
}