/* «Позывной»: общий стиль доски и пульта (callsign-spec.md §9). Мир — «плакат-табло» в духе «На одной волне»:
   сплошная сочная заливка на весь экран, толстый чёрный контур, широкий сверхжирный шрифт, никаких градиентов и стекла.
   Заливка — цвет ходящей команды (красная или синяя); смена хода — шторка цветом новой команды.
   Поле — сетка плиток 5×5: закрытая плитка белая, открытая заливается цветом команды / песочным (нейтраль) / чёрным (ловушка).
   Свой язык игры — переворот плитки с отскоком; картинки серые на светло-серой подложке. */
:root {
  --ink: #111;
  --paper: #fff;
  --red: #ff4a3d;
  --blue: #2f9bff;
  --sand: #d9d3c3;
  --hot: #ff2d2d;
  --bg: #7a7a7a;
  --team: var(--red);
  --f: "Roboto Flex", "Arial Black", system-ui, sans-serif;
  --press: cubic-bezier(.2, 1.6, .4, 1);
  --lang-switch-bg: var(--paper);
  --lang-switch-border: var(--ink);
  --lang-switch-fg: var(--ink);
  --lang-switch-active-bg: var(--ink);
  --lang-switch-active-fg: var(--paper);
  --lang-switch-active-border: var(--ink);
  --lang-switch-font: var(--f);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 600 17px/1.3 var(--f); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }
.hidden { display: none !important; }
/* лобби и вход: поле пополам — красные слева, синие справа, косой шов */
body.home { background: linear-gradient(104deg, var(--red) 0 50%, var(--blue) 50% 100%); }

/* line-height меньше единицы режет «Й» и «Ё» — запас сверху */
.shout { font-weight: 1000; font-stretch: 151%; font-variation-settings: "wdth" 151; text-transform: uppercase; line-height: .9; letter-spacing: -.01em; margin: 0; padding-top: .12em; }
.eyebrow { font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }

/* шторка смены цвета: новый цвет растёт кругом из центра поля */
.wipe { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; clip-path: circle(0 at 50% 50%); animation: wipe .55s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes wipe { to { clip-path: circle(150% at 50% 50%); } }

/* аватар игрока: кружок с эмодзи на белом, контур в цвет игрока */
.av { display: inline-grid; place-items: center; flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--paper); border: .1em solid var(--pc, var(--ink)); font-style: normal; font-size: inherit; line-height: 1; }

.conn { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--paper); padding: 6px 12px; font-weight: 800; visibility: hidden; max-width: calc(100% - 32px); text-align: center; pointer-events: none; }
.conn.on { visibility: visible; }

/* ---------- поле ---------- */
.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap, 8px); width: 100%; }
.tile { position: relative; display: block; padding: 0; margin: 0; border: 0; background: none; color: inherit; aspect-ratio: var(--tile-ar, 1.4 / 1); min-width: 0; perspective: 700px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tile .face { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; padding: 4%; overflow: hidden; background: var(--paper); border: var(--bw, 4px) solid var(--ink); transform-origin: 50% 50%; }
.tile .w { font-weight: 900; font-stretch: var(--ws, 100%); font-variation-settings: "wdth" var(--wd, 100); text-transform: uppercase; font-size: var(--wfs, 20px); line-height: 1; text-align: center; letter-spacing: .01em; white-space: nowrap; max-width: 100%; }
.tile img { width: 76%; height: 76%; max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.grid.pics .tile .face { background: #dcdcdc; }
.grid.pics .tile img { filter: contrast(1.3) brightness(.93); }
.grid.pics .tile[data-o="1"] .face { background: var(--fill); }
.grid.pics .tile[data-o="1"] img { filter: contrast(1.3); }
.grid.pics .tile[data-o="1"][data-t="x"] img { filter: invert(1); }

/* открытые плитки: заливка команды + белая рамка внутри чёрного контура (отличима от фона любого цвета), слово чёрное */
.tile[data-o="1"] { --fill: var(--sand); }
.tile[data-o="1"][data-t="red"] { --fill: var(--red); }
.tile[data-o="1"][data-t="blue"] { --fill: var(--blue); }
.tile[data-o="1"][data-t="x"] { --fill: var(--ink); }
.tile[data-o="1"] .face { background: var(--fill); box-shadow: inset 0 0 0 calc(var(--bw, 4px) * .9) var(--paper); }
.tile[data-o="1"] .w { color: var(--ink); opacity: .9; }
.tile[data-o="1"] img { mix-blend-mode: multiply; opacity: .75; filter: contrast(1.3); }
.tile[data-o="1"][data-t="x"] .face { box-shadow: inset 0 0 0 calc(var(--bw, 4px) * .9) var(--paper); }
.tile[data-o="1"][data-t="x"] .w { color: var(--paper); opacity: 1; }
.tile[data-o="1"][data-t="x"] img { mix-blend-mode: normal; opacity: .9; filter: invert(1); }
/* метка команды для тех, кто не различает цвета: красные — треугольник, синие — круг, ловушка — крест */
.tile[data-t] .face::after { position: absolute; right: 7%; top: 5%; font-size: var(--mfs, 14px); font-weight: 1000; line-height: 1; }
.tile[data-t="red"] .face::after { content: "▲"; }
.tile[data-t="blue"] .face::after { content: "●"; }
.tile[data-t="x"] .face::after { content: "✕"; }
.tile[data-o="1"][data-t="n"] .face::after { content: ""; }
.tile[data-o="1"][data-t="x"] .face::after { color: var(--paper); }

/* ключ капитана: закрытая плитка остаётся белой, но снизу — полоса цвета и метка; открытые гаснут */
.grid.key .tile[data-o="0"][data-t="red"] .face { box-shadow: inset 0 calc(var(--band, 12px) * -1) 0 var(--red); }
.grid.key .tile[data-o="0"][data-t="blue"] .face { box-shadow: inset 0 calc(var(--band, 12px) * -1) 0 var(--blue); }
.grid.key .tile[data-o="0"][data-t="x"] .face { box-shadow: inset 0 calc(var(--band, 12px) * -1) 0 var(--ink); }
.grid.key .tile[data-o="0"][data-t="red"] .face::after { color: var(--red); }
.grid.key .tile[data-o="0"][data-t="blue"] .face::after { color: var(--blue); }
.grid.key .tile[data-o="0"][data-t="x"] .face::after { color: var(--ink); }
/* после конца партии раскладка видна всем: закрытые плитки — с полосами и приглушены;
   полосы проявляются волной по диагонали (--d выставляет JS доски), ~1,2 с на всё поле */
.grid.over .tile[data-o="0"] .face { opacity: .8; }
.grid.over .tile[data-o="0"] .face { animation: keyin .5s var(--d, 0ms) both; }
.grid.over .tile[data-o="0"][data-t] .face::after { animation: fadein .4s var(--d, 0ms) both; }
@keyframes keyin { from { box-shadow: inset 0 0 0 0 transparent; transform: scale(.93); } 60% { transform: scale(1.04); } to { transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* переворот: плитка, только что открытая, вылетает ребром и встаёт с отскоком */
.tile.fresh .face { animation: flip .6s var(--press) both; }
@keyframes flip {
  0% { transform: rotateX(0); background: var(--paper); }
  38% { transform: rotateX(90deg); background: var(--paper); }
  39% { background: var(--fill, var(--sand)); }
  100% { transform: rotateX(0); background: var(--fill, var(--sand)); }
}
.tile.last .face { outline: calc(var(--bw, 4px) + 1px) solid var(--ink); outline-offset: 3px; }
.tile.live[data-o="0"] { cursor: pointer; }
.tile.live[data-o="0"]:active .face { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) { .tile.fresh .face, .grid.over .tile .face, .grid.over .tile .face::after { animation: none !important; } .wipe { animation-duration: .01s; } }

/* ---------- кнопки ---------- */
.btn { display: block; width: 100%; border: 4px solid var(--ink); background: var(--ink); color: var(--paper); font-weight: 1000; font-stretch: 130%; font-variation-settings: "wdth" 130; font-size: 22px; text-transform: uppercase; padding: 16px 14px; text-align: center; text-decoration: none; box-shadow: 0 7px 0 rgba(0, 0, 0, .28); transition: transform .08s, box-shadow .08s; }
.btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 rgba(0, 0, 0, .28); }
.btn:disabled { opacity: .45; box-shadow: none; }
.btn.ghost { background: var(--paper); color: var(--ink); }