/* Ядро: страница, холст 640×360 и слои поверх него.
   Все размеры — в точках холста: --px = сколько пикселей экрана в одной точке (ставит ui.js). */
:root {
  --font: 'Press Start 2P', 'Courier New', monospace;
  --ink: #1b1720;
  --dark: #2e2e36;
  --text: #fff7e6;
  --muted: #c9c3cf;
  --accent: #ffb43a;
  --accent-dark: #b9631a;
  --btn-text: #2a1404;
  --ghost: #d9cfc0;
  --ghost-dark: #8d8476;
  --best: #ffe08a;
  --good: #7dff9a;
  --bad: #ff4a3a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0e0c12;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; /* долгое касание на телефоне — без меню «сохранить картинку» */
  touch-action: none; /* и без прокрутки и зума от пальцев на чёрных полях */
  overscroll-behavior: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  /* на телефоне лёжа — мимо выреза под камеру и полоски «домой» (размер холста считает ui.js) */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  font-family: var(--font);
  color: var(--text);
}

.core {
  --px: 2px;
  position: relative;
  overflow: hidden;
  touch-action: none;
  background: var(--ink);
  box-shadow: 0 0 0 4px #000, 0 20px 60px rgba(0, 0, 0, 0.6);
  font-size: calc(var(--px) * 8);
  line-height: 1.6;
}

.core-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated; /* холст маленький — растягиваем крупным пикселем */
  image-rendering: crisp-edges;
}

.core-hidden { display: none !important; }

/* ---- Полоса счёта ---- */
.core-hud {
  position: absolute;
  left: calc(var(--px) * 6);
  right: calc(var(--px) * 32); /* справа — кнопка паузы */
  top: calc(var(--px) * 5);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  pointer-events: none;
  white-space: pre-line;
  line-height: 1.5;
}
.core-slot {
  text-shadow:
    var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink),
    0 var(--px) 0 var(--ink), 0 calc(var(--px) * -1) 0 var(--ink),
    var(--px) var(--px) 0 var(--ink);
}
.core-slot.left { justify-self: start; font-size: calc(var(--px) * 16); }
.core-slot.center { justify-self: center; text-align: center; }
.core-slot.right { justify-self: end; text-align: right; }

/* ---- Надпись по центру ---- */
.core-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  text-align: center;
  font-size: calc(var(--px) * 16);
  opacity: 0;
  pointer-events: none;
  text-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 #000;
}
.core-banner.show { animation: core-pop 0.35s ease-out forwards; }
.core-banner.count { font-size: calc(var(--px) * 24); color: var(--accent); }
.core-banner.go { font-size: calc(var(--px) * 24); color: var(--good); }
.core-banner.good { color: var(--good); }
.core-banner.bad { color: var(--bad); }
@keyframes core-pop {
  from { opacity: 0; transform: scale(1.6); }
  to { opacity: 1; transform: scale(1); }
}

/* ---- Кнопка паузы ---- */
.core-pausebtn {
  position: absolute;
  top: calc(var(--px) * 4);
  right: calc(var(--px) * 4);
  width: calc(var(--px) * 18);
  height: calc(var(--px) * 18);
  padding: 0;
  border: var(--px) solid rgba(0, 0, 0, 0.6);
  background: rgba(27, 23, 32, 0.55);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.core-pausebtn svg { width: 60%; height: 60%; fill: currentColor; }

/* ---- Экранные кнопки: только на сенсорных экранах (или ?pads) — класс touch ставит ui.js ---- */
.core-pads { display: none; }
.touch .core-pads { display: block; }
.core-pad {
  position: absolute;
  padding: 0;
  border-radius: 50%;
  border: calc(var(--px) * 2) solid rgba(0, 0, 0, 0.55);
  background: radial-gradient(circle at 35% 30%, #ffd37a, #e0862a 60%, #9a4d12);
  color: #3a1d06;
  font-family: var(--font);
  font-size: calc(var(--px) * 16);
  opacity: 0.5;
  touch-action: none;
  box-shadow: 0 calc(var(--px) * 2) 0 rgba(0, 0, 0, 0.45);
}
.core-pad.small { font-size: calc(var(--px) * 8); }
.core-pad.active { opacity: 0.9; transform: translateY(var(--px)); }

/* ---- Экраны ---- */
.core-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 23, 32, 0.35);
}
.core-overlay.gate { background: rgba(27, 23, 32, 0.92); cursor: pointer; }

.core-panel {
  background: rgba(27, 23, 32, 0.88);
  border: calc(var(--px) * 2) solid #000;
  outline: var(--px) solid rgba(255, 180, 58, 0.55);
  padding: calc(var(--px) * 12) calc(var(--px) * 16);
  max-width: 88%;
  max-height: 92%;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 calc(var(--px) * 4) 0 rgba(0, 0, 0, 0.5);
}
.core-panel.wide { width: 88%; }

.core-title {
  font-size: calc(var(--px) * 16);
  color: var(--accent);
  text-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 #000;
  margin: 0 0 calc(var(--px) * 8);
}
.core-title.bad { color: var(--bad); }
.core-sub { margin: 0 0 calc(var(--px) * 6); }
.core-hint { margin: calc(var(--px) * 8) 0 0; color: var(--muted); }

.core-row {
  display: flex;
  gap: calc(var(--px) * 8);
  justify-content: center;
  align-items: center;
}
.core-row.spread { justify-content: space-between; margin-top: calc(var(--px) * 10); }
.core-row.end { justify-content: flex-end; margin-top: calc(var(--px) * 10); }
.core-col {
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 6);
  align-items: center;
}
.core-col .core-btn { min-width: calc(var(--px) * 112); }

.core-btn {
  font-family: var(--font);
  font-size: calc(var(--px) * 8);
  line-height: 1;
  padding: calc(var(--px) * 6) calc(var(--px) * 10);
  color: var(--btn-text);
  background: var(--accent);
  border: calc(var(--px) * 2) solid #000;
  box-shadow: inset 0 calc(var(--px) * -2) 0 var(--accent-dark), 0 calc(var(--px) * 2) 0 #000;
  cursor: pointer;
}
.core-btn.ghost { background: var(--ghost); box-shadow: inset 0 calc(var(--px) * -2) 0 var(--ghost-dark), 0 calc(var(--px) * 2) 0 #000; }
.core-btn.focus { outline: var(--px) solid var(--text); outline-offset: calc(var(--px) * 2); filter: brightness(1.12); }
.core-btn:active { transform: translateY(var(--px)); }

/* Шапка экранов старта и результата: портрет + текст */
.core-head {
  display: flex;
  gap: calc(var(--px) * 12);
  align-items: flex-start;
  text-align: left;
}
.core-head-text { min-width: calc(var(--px) * 200); }
.core-name { color: var(--muted); }
.core-gametitle {
  font-size: calc(var(--px) * 16);
  line-height: 1.4;
  color: var(--accent);
  text-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 #000;
  margin: calc(var(--px) * 2) 0 calc(var(--px) * 6);
}
.core-goal { margin-bottom: calc(var(--px) * 2); }
.core-controls {
  margin-top: calc(var(--px) * 10);
  text-align: left;
  line-height: 2;
}
.core-controls b { color: var(--accent); font-weight: normal; }
.core-score { font-size: calc(var(--px) * 24); line-height: 1.3; }
.core-score small { font-size: calc(var(--px) * 8); color: var(--muted); }
.core-lines { margin: calc(var(--px) * 4) 0; line-height: 1.9; }
.core-best { color: var(--best); }
.core-best.new { color: var(--good); }

/* Имя для турнирной таблицы: поле и кнопка */
.core-sign { justify-content: flex-start; margin-top: calc(var(--px) * 12); }
.core-text {
  width: calc(var(--px) * 120);
  padding: calc(var(--px) * 5) calc(var(--px) * 6);
  font-family: var(--font);
  font-size: calc(var(--px) * 8);
  line-height: 1;
  color: var(--text);
  text-transform: uppercase;
  background: var(--dark);
  border: calc(var(--px) * 2) solid #000;
  border-radius: 0;
  outline: none;
  -webkit-user-select: text; /* иначе на iPhone в поле не напечатать */
  user-select: text;
}
.core-text::placeholder { color: var(--ghost-dark); opacity: 1; }
.core-text.focus, .core-text:focus { outline: var(--px) solid var(--text); outline-offset: calc(var(--px) * 2); }
.core-text.need { animation: core-need 0.25s steps(1) 3; } /* пустое имя — рамка мигает */
@keyframes core-need { 50% { border-color: var(--bad); } }

/* Турнирная таблица */
.core-board { min-width: calc(var(--px) * 300); margin-top: calc(var(--px) * 8); text-align: left; }
.core-board.empty { padding: calc(var(--px) * 16) 0; color: var(--muted); text-align: center; }
.core-board.empty .core-btn { margin-top: calc(var(--px) * 8); } /* «ПОВТОРИТЬ», когда нет связи */
.core-board-row {
  display: grid;
  grid-template-columns: calc(var(--px) * 24) 1fr auto;
  gap: calc(var(--px) * 10);
  padding: var(--px) calc(var(--px) * 6);
}
.core-board-row:nth-child(odd) { background: rgba(255, 247, 230, 0.05); }
.core-board-place { color: var(--muted); text-align: right; }
.core-board-score { color: var(--best); }
.core-board-row.mark { background: var(--accent); color: var(--btn-text); }
.core-board-row.mark span { color: inherit; }
.core-board-gap { padding: 0 calc(var(--px) * 6); color: var(--muted); line-height: 1; }

.core-portrait {
  flex: none;
  width: calc(var(--px) * 64);
  height: calc(var(--px) * 64);
  border: calc(var(--px) * 2) solid #000;
  outline: var(--px) solid rgba(255, 180, 58, 0.55);
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--px) * 24);
  color: var(--accent);
}
.core-portrait.small { width: calc(var(--px) * 32); height: calc(var(--px) * 32); font-size: calc(var(--px) * 16); }
.core-portrait img { width: 100%; height: 100%; image-rendering: pixelated; }

/* Громкость */
.core-sliders {
  display: grid;
  gap: calc(var(--px) * 6);
  margin-top: calc(var(--px) * 12);
}
.core-slider {
  display: grid;
  grid-template-columns: calc(var(--px) * 64) 1fr;
  align-items: center;
  gap: calc(var(--px) * 8);
  text-align: left;
}
.core-range {
  -webkit-appearance: none;
  appearance: none;
  width: calc(var(--px) * 96);
  height: calc(var(--px) * 6);
  margin: 0;
  background: var(--dark);
  border: var(--px) solid #000;
}
.core-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 10);
  background: var(--accent);
  border: var(--px) solid #000;
  border-radius: 0;
}
.core-range::-moz-range-thumb {
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 10);
  background: var(--accent);
  border: var(--px) solid #000;
  border-radius: 0;
}
.core-range.focus { outline: var(--px) solid var(--text); outline-offset: calc(var(--px) * 2); }

/* ---- Телефон и планшет: кнопки под палец ---- */
.touch .core-btn { min-height: calc(var(--px) * 30); padding-left: calc(var(--px) * 12); padding-right: calc(var(--px) * 12); }
.touch .core-text { min-height: calc(var(--px) * 30); }
.touch .core-pausebtn { width: calc(var(--px) * 28); height: calc(var(--px) * 28); }
.touch .core-hud { right: calc(var(--px) * 40); }
.touch .core-range { width: calc(var(--px) * 128); height: calc(var(--px) * 10); }
.touch .core-range::-webkit-slider-thumb { width: calc(var(--px) * 14); height: calc(var(--px) * 22); }
.touch .core-range::-moz-range-thumb { width: calc(var(--px) * 14); height: calc(var(--px) * 22); }

/* ---- Телефон вертикально: игру закрывает подсказка «поверни» (время в игре стоит — core.js) ---- */
.core-rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  background: #0e0c12;
  color: var(--best);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
  white-space: pre-line;
}
.core-rotate-icon { font-family: sans-serif; font-size: 64px; line-height: 1; color: var(--accent); animation: core-turn 2s ease-in-out infinite; }
@keyframes core-turn {
  0%, 30% { transform: rotate(0); }
  60%, 100% { transform: rotate(90deg); }
}
@media (orientation: portrait) {
  .touch .core-rotate { display: flex; }
}