/* Трансляция партий на весь экран: проектор, телевизор, второй монитор.
 *
 * Всё меряется от двух величин, которые считает app.js по размеру окна:
 *   --b  сторона доски в пикселях;
 *   --u  «единица» шрифта = сторона доски / 100.
 * Поэтому одна и та же разметка годится и для одной партии на всю стену,
 * и для двенадцати досок турнира: меньше доска - мельче подписи, но все они
 * остаются в своём масштабе и ничего не наезжает. Прокрутки нет никогда.
 */

:root {
  --bg: #090806;
  --card: #151412;
  --line: rgba(255, 255, 255, 0.08);
  --t1: #ffffff;
  --t2: rgba(255, 255, 255, 0.62);
  --t3: rgba(255, 255, 255, 0.4);
  --amber: #fcd34d;
  --live: #ef4444;
  --sq-l: #efd9a6;
  --sq-d: #a4703f;
  --last: rgba(255, 213, 79, 0.45);
  --b: 400px;
  --u: 4px;
  --gap: 2.2vh;
  color-scheme: dark;
}

/* Светлая тема - для зала, где проектор светит поверх дневного света: там
   тёмная картинка сереет. Выбор хранится в браузере (localStorage). */
:root[data-theme="light"] {
  --bg: #f4f1ea;
  --card: #ffffff;
  --line: rgba(0, 0, 0, 0.08);
  --t1: #14120f;
  --t2: rgba(20, 18, 15, 0.65);
  --t3: rgba(20, 18, 15, 0.42);
  --amber: #b45309;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--t1);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.idle { cursor: none; }

/* ─── Шапка ─── */

.top {
  height: 9vh;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 2vh;
  padding: 0 3vh;
}
.top .logo { height: 5.4vh; min-height: 30px; width: auto; border-radius: 22%; }
.top .brand { font-weight: 800; font-size: 2.6vh; letter-spacing: -0.01em; white-space: nowrap; }
.top .title { font-weight: 800; font-size: 3.4vh; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .spacer { flex: 1; }
.top .count {
  display: inline-flex; align-items: center; gap: 1vh;
  font-weight: 700; font-size: 2.4vh; color: var(--live); white-space: nowrap;
}
.top .clock { font-weight: 700; font-size: 3vh; font-variant-numeric: tabular-nums; color: var(--t2); }
.top .btn {
  border: 1px solid var(--line); background: transparent; color: var(--t2);
  border-radius: 999px; height: 5vh; min-height: 30px; padding: 0 1.8vh;
  font: inherit; font-size: 1.9vh; cursor: pointer; transition: opacity 0.3s;
}
.top .btn:hover { color: var(--t1); }
body.idle .top .btn { opacity: 0; }

.dot {
  width: 1.4vh; height: 1.4vh; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  70% { box-shadow: 0 0 0 1.4vh rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ─── Поле досок ─── */

.stage {
  height: calc(100vh - max(9vh, 48px) - 4.5vh);
  padding: 0 3vh;
  display: grid;
  gap: var(--gap);
  align-content: center;
  justify-content: center;
}

.foot {
  height: 4.5vh;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7vh; color: var(--t3);
}

/* Карточка партии. Две раскладки, выбирает app.js:
   .card--col  - доска, над ней чёрные, под ней белые (узкие ячейки);
   .card--side - доска слева, справа игроки и запись (широкие ячейки). */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--u) * 3.5);
  padding: calc(var(--u) * 3);
  display: grid;
  gap: calc(var(--u) * 2);
  min-width: 0;
}
.card--col { grid-template-columns: var(--b); grid-template-rows: auto auto var(--b) auto auto; }
.card--side {
  grid-template-columns: var(--b) calc(var(--b) * 0.72);
  grid-template-rows: var(--b);
  column-gap: calc(var(--u) * 4);
}
.card--side .info { display: flex; flex-direction: column; gap: calc(var(--u) * 2.4); min-width: 0; }

.head { display: flex; align-items: center; gap: calc(var(--u) * 2); min-width: 0; }
.head .what { flex: 1; min-width: 0; }
.head .kind { font-weight: 800; font-size: calc(var(--u) * 4.6); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head .place { font-size: calc(var(--u) * 3.4); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chip {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 1.4);
  border-radius: 999px; padding: calc(var(--u) * 0.9) calc(var(--u) * 2.6);
  font-weight: 700; font-size: calc(var(--u) * 3.4); white-space: nowrap; flex: none;
}
.chip .dot { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); }
.chip--live { background: rgba(239, 68, 68, 0.14); color: #fca5a5; }
.chip--ready { background: rgba(252, 211, 77, 0.14); color: var(--amber); }
.chip--over { background: var(--line); color: var(--t2); }
:root[data-theme="light"] .chip--live { color: #b91c1c; }

.player { display: flex; align-items: center; gap: calc(var(--u) * 2.2); min-width: 0; }
.player .stone {
  width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; flex: none;
  border: max(1px, calc(var(--u) * 0.35)) solid;
}
.player .stone--w { background: #f4f4f5; border-color: #a1a1aa; }
.player .stone--b { background: #18181b; border-color: #71717a; }
.player .name { font-weight: 700; font-size: calc(var(--u) * 4.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.player .rating { font-size: calc(var(--u) * 3.6); color: var(--t3); flex: none; font-variant-numeric: tabular-nums; }
.player.won .name { color: var(--amber); }

/* ─── Доска ─── */

.board {
  position: relative;
  width: var(--b); height: var(--b);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: calc(var(--u) * 1.4);
  overflow: hidden;
  box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 5) rgba(0, 0, 0, 0.45);
}
.sq { position: relative; }
.sq--l { background: var(--sq-l); }
.sq--d { background: var(--sq-d); }
.sq--last::before { content: ""; position: absolute; inset: 0; background: var(--last); }
.sq img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sq .coord {
  position: absolute; font-weight: 700; font-size: calc(var(--u) * 2.4); line-height: 1;
  opacity: 0.75; pointer-events: none;
}
.sq--l .coord { color: var(--sq-d); }
.sq--d .coord { color: var(--sq-l); }
.coord--rank { left: 6%; top: 6%; }
.coord--file { right: 7%; bottom: 5%; }

/* Итог - плашкой поверх доски: в зале его читают издалека. */
.result {
  position: absolute; left: 6%; right: 6%; top: 50%; transform: translateY(-50%);
  background: rgba(9, 8, 6, 0.86);
  border: 1px solid rgba(252, 211, 77, 0.45);
  border-radius: calc(var(--u) * 3);
  padding: calc(var(--u) * 4) calc(var(--u) * 4);
  text-align: center;
  backdrop-filter: blur(4px);
}
.result .big { font-weight: 900; font-size: calc(var(--u) * 7.5); color: #fde68a; line-height: 1.1; }
.result .small { margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 3.8); color: rgba(255, 255, 255, 0.75); }

.moves {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(var(--u) * 3.6); color: var(--t2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card--side .moves { white-space: normal; line-height: 1.45; flex: 1; overflow: hidden; }
.moves b { color: var(--t1); font-weight: 700; }
.meta { font-size: calc(var(--u) * 3.2); color: var(--t3); }

/* ─── Пусто ─── */

.empty {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 2.4vh; padding: 0 8vw;
}
.empty .knight { width: 14vh; height: 14vh; opacity: 0.9; }
.empty h1 { margin: 0; font-size: 7vh; font-weight: 900; letter-spacing: -0.03em; }
.empty p { margin: 0; font-size: 3vh; color: var(--t2); max-width: 70vw; line-height: 1.4; }
.empty .site { font-size: 2.6vh; color: var(--amber); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}