@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=Rubik:wght@400;500;700&display=swap');

/* Рукописный шрифт с кассеты — для имён игроков на всех экранах */
@font-face { font-family: 'Debby'; src: url('/fonts/Debby.ttf') format('truetype'); font-display: swap; }
.pn { font-family: 'Debby', var(--body); font-weight: normal; font-size: 1.4em; line-height: 1; text-transform: none; letter-spacing: 0; }

/* Ink Free — шрифт Windows; на других устройствах берётся копия из public/fonts */
@font-face { font-family: 'Ink Free'; src: local('Ink Free'), local('InkFree'), url('/fonts/Inkfree.ttf') format('truetype'); font-display: swap; }

/* Основной шрифт игры — лежит в проекте, интернет для него не нужен */
@font-face {
  font-family: 'Gagalin';
  src: url('/fonts/Gagalin-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg-1: #3a1236;
  --bg-2: #0f0710;
  --plate-1: #6a2a7e;
  --plate-2: #2c0f36;
  --plate-edge: #d77bff;
  --gold-1: #ffe27a;
  --gold-2: #e69a12;
  --red: #ff3b5c;
  --team0: #c94dff;
  --team1: #2fc4ff;
  --text: #ffffff;
  --muted: #d8bfd8;
  --display: 'Gagalin', 'Russo One','Arial Black', Impact, sans-serif;
  /* подсказки и обычный текст — Ink Free (как названия команд); крупные надписи — Gagalin (--display) */
  --body: 'Ink Free', 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font-family: var(--body);
  /* у шрифтов одно начертание — не даём браузеру рисовать «жирный» искусственно */
  font-synthesis: none;
  background: radial-gradient(ellipse at 50% 20%, var(--bg-1) 0%, var(--bg-2) 70%) fixed;
  background-color: var(--bg-2);
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: 14px;
  padding: 14px 18px;
  color: #fff;
  background: linear-gradient(180deg, var(--plate-1), var(--plate-2));
  border: 2px solid var(--plate-edge);
  font-weight: 700;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.4; cursor: default; transform: none; }

input {
  font: inherit;
  font-size: 20px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid var(--plate-edge);
  background: #1c0b20;
  color: #fff;
  -webkit-text-fill-color: #fff; /* некоторые телефонные браузеры иначе перекрашивают текст */
  caret-color: var(--gold-1);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  user-select: text;
  -webkit-user-select: text;
}
input::placeholder { color: #9a7a9e; -webkit-text-fill-color: #9a7a9e; }
input:focus { border-color: var(--gold-1); }

.gold-text {
  font-family: var(--display);
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.team0 { --team: var(--team0); }
.team1 { --team: var(--team1); }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  border-color: #fff3c2;
  color: #3a2200;
}
.btn-red {
  background: linear-gradient(180deg, #ff6262, #b80f0f);
  border-color: #ffb3b3;
}
.btn-team {
  background: linear-gradient(180deg, color-mix(in srgb, var(--team) 85%, #fff), color-mix(in srgb, var(--team) 70%, #000));
  border-color: color-mix(in srgb, var(--team) 50%, #fff);
}

/* Круглый таймер: --frac от 1 (полный) до 0 */
.ring {
  --size: 56px;
  --ring-color: var(--gold-1);
  width: var(--size); height: var(--size); border-radius: 50%;
  display: inline-grid; place-items: center; flex-shrink: 0;
  background: conic-gradient(var(--ring-color) calc(var(--frac, 0) * 360deg), rgba(255,255,255,.12) 0);
}
.ring > span {
  width: 78%; height: 78%; border-radius: 50%; display: grid; place-items: center;
  background: #1c0b20; font-family: var(--display); font-size: calc(var(--size) * .4);
}
.ring.low { --ring-color: var(--red); animation: pulse .5s ease-in-out infinite alternate; }
.ring.frozen { --ring-color: #8b93ad; }

/* Пауза — поверх всего экрана */
.pause-overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; text-align: center;
  background: rgba(15, 5, 14, .88); padding: 16px;
}
.pause-overlay .p-title { font-family: var(--display); font-size: clamp(40px, 12vmin, 140px); line-height: 1; }
.pause-overlay .p-sub { color: var(--muted); font-size: clamp(16px, 3vmin, 32px); margin-top: 12px; }
@keyframes pulse { to { transform: scale(1.08); } }

.hidden { display: none !important; }