/* Той-Арена — дизайн-система: этно, «дорого и празднично» */
:root {
  --red: #c8102e;
  --red-dark: #8c0b20;
  --gold: #e8b54d;
  --gold-bright: #ffd77a;
  --white: #fff7ec;
  --night: #1a0308;
  --night-2: #2a0710;
  --night-3: #3d0d18;
  --green: #2fa36b;
  --ink: rgba(0, 0, 0, 0.45);
  --font: 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--white);
  background: radial-gradient(ellipse at 50% 0%, var(--night-3) 0%, var(--night-2) 45%, var(--night) 100%);
  background-attachment: fixed;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.02em;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  color: inherit;
}

.gold {
  color: var(--gold);
}
.red {
  color: var(--red);
}
.muted {
  opacity: 0.6;
}
.center {
  text-align: center;
}
.hidden {
  display: none !important;
}

/* ── кнопки ───────────────────────────────────────────────────────────── */
.btn {
  background: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%);
  color: var(--white);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), var(--shadow);
  border: 2px solid rgba(232, 181, 77, 0.5);
  transition: transform 0.06s;
}
.btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.btn.gold-btn {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #3a1a00;
  border-color: rgba(255, 255, 255, 0.5);
}
.btn.ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(232, 181, 77, 0.35);
}
.btn:disabled {
  opacity: 0.4;
  filter: grayscale(0.6);
}

/* ── карточки ─────────────────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1.5px solid rgba(232, 181, 77, 0.28);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
}

/* ── орнамент кочкор мүйүз (рамка) ────────────────────────────────────── */
.ornament-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* строго под контентом — рамка не должна перекрывать текст */
}
.ornament-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── водяной знак: имя хозяина вечера ─────────────────────────────────── */
/* Стоит на всех трёх устройствах и во всех фазах, кроме игрового поля.
   Намеренно бледный и некликабельный: это подпись автора вечера, а не
   элемент управления — перехватывать тапы над кнопками ему нельзя. */
.watermark {
  position: fixed;
  right: calc(10px + env(safe-area-inset-right));
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 2;
  pointer-events: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.42;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  max-width: 60vw;
  text-align: right;
}

/* ── тост ─────────────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(120%);
  background: rgba(26, 3, 8, 0.95);
  border: 2px solid var(--gold);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 14px;
  font-weight: 700;
  z-index: 999;
  /* ВАЖНО: одного translateY(120%) мало. У пустого тоста высота всего ~28px,
     120% от неё меньше отступа bottom — и на экране постоянно торчала тёмная
     полоска. На проекторе в зале это было видно весь вечер. Прячем прозрачностью. */
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s, opacity 0.25s;
  max-width: 90vw;
  text-align: center;
}
#toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── общие анимации ───────────────────────────────────────────────────── */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
@keyframes flash {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.pulse {
  animation: pulse 1.2s infinite ease-in-out;
}
.pop {
  animation: pop 0.35s ease-out;
}