/* Тема «Хэллоуин-нуар» — та же дизайн-система, что в «Своей игре»
   (SIGame Design System): токены, шрифты, кнопки со срезанными углами,
   пергаментные панели, вывески-баннеры, эмблемы и декор по краям экрана.
   Это общая часть темы; стили страниц голосования — в style.css. */
@import url("https://fonts.googleapis.com/css2?family=Yeseva+One&family=Oswald:wght@500;600;700&family=PT+Sans:ital,wght@0,400;0,700;1,400&display=swap");


:root {
  /* Ночь: фон и тёмные панели */
  --night-950: #0a0c11;   /* фон страницы */
  --night-900: #10141c;   /* тёмные плашки под цифрами */
  --night-800: #171d29;   /* тёмные панели («эксперт»), поля ввода */
  --night-700: #232c3c;   /* линии на тёмном */
  --occult: #8da2c0;      /* оккультная геометрия фона (с малой прозрачностью) */

  /* Пергамент */
  --paper-200: #e6d7b4;   /* плитки на пергаменте */
  --paper-300: #d9c7a0;   /* панель */
  --paper-500: #b8a88a;   /* потёртости, сыгранные плитки */
  --paper-600: #9c8b68;   /* табличка с названием */
  --paper-800: #6b5a3c;   /* рамка на пергаменте */
  --paper-ink: #1c150d;   /* текст на пергаменте */

  /* Акценты */
  --cream: #f3e6cf;       /* заголовки и текст на тёмном */
  --muted: #a3acbc;       /* второстепенный текст на тёмном */
  --red: #c8302a;         /* кнопки, эмблемы */
  --red-deep: #7e1a16;
  --on-red: #fffaf2;      /* текст на красном: 5.2:1 (кремовый дал бы 4.35:1) */
  --navy: #1f3550;
  --pumpkin: #ff7518;     /* хэллоуинский акцент: «прочитанный» текст, тыквы */
  --mint: #7cffd6;        /* цены, очки, ключевые цифры */
  --gold: #e3b341;        /* отвечающий игрок, «эксперт»-рамка */
  --green: #6fbf4a;       /* категория, «верно» */
  --violet: #a77bf0;      /* категория */

  /* Подписные цвета игроков (как цвета героев на экранах загрузки) */
  --amber: #f0a032;
  --vermilion: #e4572e;
  --magenta: #cf55c3;
  --teal: #2fbf9f;
  --indigo: #7f72f2;

  /* Шрифты */
  --font-display: "Yeseva One", "Playfair Display", Georgia, serif;
  --font-label: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "PT Sans", "Trebuchet MS", sans-serif;

  /* Тени: жёсткие, без размытия */
  --shadow-hard: 5px 5px 0 #000;
  --shadow-hard-sm: 3px 3px 0 #000;

  /* Срезанные углы */
  --cut: 10px;

  /* Анимация «штамп» */
  --stamp: 180ms cubic-bezier(.3, 1.6, .5, 1);

  /* Фактуры (SVG в data-URI) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 -1.4 .9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --occult-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke='%238da2c0' stroke-width='1.2'%3E%3Ccircle cx='500' cy='500' r='420'/%3E%3Ccircle cx='500' cy='500' r='300'/%3E%3Ccircle cx='500' cy='500' r='296'/%3E%3Cpath d='M500 200 676 743 214 407H786L324 743Z'/%3E%3Cpath d='M80 500H920M500 80V920M203 203 797 797M797 203 203 797'/%3E%3Ccircle cx='500' cy='80' r='14'/%3E%3Ccircle cx='920' cy='500' r='14'/%3E%3Ccircle cx='500' cy='920' r='14'/%3E%3Ccircle cx='80' cy='500' r='14'/%3E%3Ccircle cx='203' cy='203' r='8'/%3E%3Ccircle cx='797' cy='797' r='8'/%3E%3Ccircle cx='797' cy='203' r='8'/%3E%3Ccircle cx='203' cy='797' r='8'/%3E%3C/svg%3E");
  --halftone: radial-gradient(circle, rgba(0, 0, 0, .28) 1.1px, transparent 1.5px) 0 0 / 7px 7px;
  --hatch: repeating-linear-gradient(135deg, rgba(60, 44, 22, .10) 0 2px, transparent 2px 9px);
}


/* ---------- Подписной цвет игрока ----------
   acc-0…acc-5 (номер приходит с сервера, выдаётся по порядку входа): акцент,
   тёмная «подложка» плаката, текст на акценте, нижняя грань и узор. */
:root, .acc-0 {
  --acc: var(--red); --acc-ground: var(--navy); --acc-ink: var(--on-red);
  --acc-deep: var(--red-deep); --acc-shadow: 4px 4px 0 #000; --acc-pattern: var(--halftone);
}
.acc-1 { --acc: var(--amber); --acc-ground: #2a1d0e; --acc-ink: var(--paper-ink); --acc-deep: #a8650f; --acc-shadow: none;
         --acc-pattern: repeating-linear-gradient(118deg, transparent 0 16px, rgba(0, 0, 0, .38) 16px 30px); }
.acc-2 { --acc: var(--vermilion); --acc-ground: #160f0d; --acc-ink: var(--paper-ink); --acc-deep: #9a3216; --acc-shadow: none; --acc-pattern: var(--halftone); }
.acc-3 { --acc: var(--magenta); --acc-ground: #3a2470; --acc-ink: var(--paper-ink); --acc-deep: #8a2b80; --acc-shadow: none; --acc-pattern: var(--halftone); }
.acc-4 { --acc: var(--teal); --acc-ground: #0f2f30; --acc-ink: var(--paper-ink); --acc-deep: #1b7a66; --acc-shadow: none;
         --acc-pattern: repeating-linear-gradient(60deg, transparent 0 10px, rgba(0, 0, 0, .3) 10px 13px); }
.acc-5 { --acc: var(--indigo); --acc-ground: #1c1a48; --acc-ink: var(--paper-ink); --acc-deep: #4b40b8; --acc-shadow: none; --acc-pattern: var(--halftone); }

/* ---------- Основа ---------- */
html { min-height: 100%; background: var(--night-950); }
body {
  font-family: var(--font-body);
  color: var(--cream);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--occult-map) center / min(130vh, 130vw) no-repeat fixed, var(--night-950);
}
/* Приглушаем оккультную геометрию до едва заметной подложки и добавляем виньетку. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0, 0, 0, .7) 100%),
    rgba(10, 12, 17, .9);
}
/* Зерно поверх всего интерфейса. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background: var(--grain); opacity: .09; mix-blend-mode: overlay;
}
body > *:not(.hw-decor) { position: relative; z-index: 1; }

h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .95;
  text-shadow: 3px 3px 0 #000;
}
h1 { font-size: 56px; margin: 8px 0 16px; }
h2 { font-size: 34px; margin: 12px 0 8px; }

/* Мелкий капс над заголовком («JOINING THE FIGHT AS…») */
.kicker {
  font-family: var(--font-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  font-size: 16px; color: var(--muted);
}

.code-line a { color: var(--amber); text-decoration: underline; }
.code-line a:hover { color: var(--vermilion); }

:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }

/* ---------- Поля ввода ---------- */
input {
  font-family: var(--font-body);
  background: var(--night-800);
  color: var(--cream);
  border: 2px solid #4a5468;
  border-radius: 0;
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .45);
}
input::placeholder { color: #8b95a7; }
input:focus { border-color: var(--mint); outline: none; }
input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* ---------- Кнопки: срезанные углы, штамп ---------- */
button {
  font-family: var(--font-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--red);
  color: var(--on-red);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 -4px 0 var(--red-deep), inset 0 0 0 2px rgba(0, 0, 0, .25);
  transition: transform var(--stamp), filter 80ms;
}
button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(2px) scale(.98); box-shadow: inset 0 -1px 0 var(--red-deep), inset 0 0 0 2px rgba(0, 0, 0, .3); }
/* Срезанные углы обрезали бы и рамку фокуса — на фокусе углы прямые. */
button:focus-visible { clip-path: none; }
button:disabled { cursor: default; }
/* Вторичная кнопка — контурная. */
button.ghost {
  background: transparent; color: var(--cream);
  box-shadow: inset 0 0 0 2px var(--cream);
}

/* Подтверждающая кнопка («Верно») — зелёная категория, тёмный текст. */
button.ok { background: var(--green); color: var(--paper-ink); box-shadow: inset 0 -4px 0 #3f7a26, inset 0 0 0 2px rgba(0, 0, 0, .2); }


/* ---------- Панель-пергамент ---------- */
.panel {
  position: relative;
  color: var(--paper-ink);
  background:
    var(--speckle),
    radial-gradient(ellipse at 18% 25%, rgba(110, 82, 40, .22), transparent 38%),
    radial-gradient(ellipse at 85% 80%, rgba(110, 82, 40, .18), transparent 32%),
    var(--paper-300);
  border: 2px solid var(--paper-800);
  outline: 1px solid var(--paper-800); outline-offset: -8px;
  padding: 18px;
  /* Надорванные углы. */
  clip-path: polygon(calc(0% - 40px) 0, 94% 0, 95.5% 1.2%, 97% 0, 100% 2.5%, 100% 100%, 4% 100%, 2.5% 98.6%, 1% 100%, calc(0% - 40px) 100%);
}
/* Орнаментальные уголки внутри двойной рамки. */
.panel::before {
  content: ""; position: absolute; inset: 11px; pointer-events: none;
  --c: var(--paper-800);
  background:
    linear-gradient(var(--c), var(--c)) top left / 16px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 16px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 16px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 16px no-repeat;
}
/* Пулевое отверстие в правом верхнем углу. */
.panel.holed::after {
  content: ""; position: absolute; top: 34px; right: 26px; width: 30px; height: 30px; pointer-events: none;
  background: radial-gradient(circle, #05070a 0 7px, #2a2014 8px 9px, rgba(70, 52, 28, .55) 10px 12px, transparent 13px);
}
.panel-hatch { background-image: var(--hatch); }
/* Панели с жёсткой тенью: тень на обёртке, т.к. clip-path её обрезал бы. */
.panel-wrap { filter: drop-shadow(6px 6px 0 #000); }

/* Тёмная «экспертная» панель с золотой рамкой (аналог Tier 4). */
.panel-dark {
  position: relative;
  background: var(--night-800);
  color: var(--cream);
  border: 2px solid var(--gold);
  outline: 1px solid var(--gold); outline-offset: -7px;
  box-shadow: var(--shadow-hard);
  padding: 18px;
}
.panel-dark .caption { font-style: italic; color: var(--gold); font-family: var(--font-body); }

/* ---------- Вывеска-баннер с лентами ---------- */
.banner {
  position: relative; display: inline-block;
  background: var(--night-900);
  color: var(--cream);
  padding: 8px 46px 6px;
  border: 2px solid var(--paper-800);
  outline: 1px solid #3c3122; outline-offset: -6px;
  box-shadow: var(--shadow-hard-sm);
  text-align: center;
}
.banner::before, .banner::after {
  /* хвосты ленты */
  content: ""; position: absolute; top: 50%; width: 26px; height: 70%;
  transform: translateY(-50%); background: var(--paper-800);
}
.banner::before { left: -26px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.banner::after { right: -26px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.banner-title { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; letter-spacing: .04em; line-height: 1; display: block; }
.banner-sub { font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--pumpkin); display: block; margin-top: 3px; }

/* ---------- Шильдик с ценой / очками: мята на тёмной плашке ---------- */
.plate {
  display: inline-block;
  font-family: var(--font-label); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mint);
  background: var(--night-900);
  padding: .08em .45em .04em;
  line-height: 1.1;
  text-shadow: 0 0 10px rgba(124, 255, 214, .55);
  box-shadow: inset 0 0 0 1px #2f3a4c, var(--shadow-hard-sm);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.plate.neg { color: #ff8a80; text-shadow: 0 0 10px rgba(255, 90, 80, .45); }

/* ---------- Эмблемы: красные круги с плакатными знаками ---------- */
.emblems { display: flex; gap: 14px; }
.emblem {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--acc);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), var(--shadow-hard-sm);
  display: grid; place-items: center;
}
/* Эмблема: тёмный круг, ободок цвета игрока/набора, внутри портрет монстра. */
.emblem { background: var(--night-900); box-shadow: inset 0 0 0 3px var(--acc), var(--shadow-hard-sm); }
.emblem img { width: 74%; height: 74%; object-fit: contain; display: block; }


/* ---------- Формы ---------- */
.form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.form input, .form button { font-size: 18px; padding: 12px 18px; margin: 0; }
.form input { flex: 1 1 220px; min-width: 0; max-width: 360px; }

#err { color: #ff8a80; font-family: var(--font-label); letter-spacing: .04em; }

/* ---------- Декорации по краям (рисует halloween.js) ---------- */
.hw-decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hw-decor svg, .hw-decor img { position: absolute; display: block; user-select: none; }

.hw-web { width: 220px; height: 220px; opacity: .28; }
.hw-web.tl { top: 0; left: 0; }
.hw-web.tr { top: 0; right: 0; transform: scaleX(-1); }
.hw-web.bl { bottom: 0; left: 0; transform: scaleY(-1); width: 150px; height: 150px; opacity: .18; }

/* Призраки парят у верхнего края. */
.hw-ghost { top: 18px; width: 74px; opacity: .85; animation: hw-hover 6s steps(12) infinite; }
.hw-ghost.g2 { width: 64px; animation-duration: 7.5s; animation-delay: -3s; }
@keyframes hw-hover {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(26px) rotate(4deg); }
}

.hw-bat { width: 84px; top: 40px; left: -110px; opacity: .9; animation: hw-fly 16s linear infinite; }
.hw-bat.b2 { width: 60px; top: 110px; animation-duration: 21s; animation-delay: -8s; }
.hw-bat.b3 { width: 48px; top: 70px; animation-duration: 26s; animation-delay: -15s; }
@keyframes hw-fly {
  0% { transform: translate(0, 0); }
  25% { transform: translate(28vw, 30px); }
  50% { transform: translate(56vw, -10px); }
  75% { transform: translate(84vw, 25px); }
  100% { transform: translate(calc(100vw + 160px), 0); }
}


.hw-zombie { left: 4px; bottom: -6px; width: 170px; animation: hw-rise 4s steps(8) infinite alternate; }
@keyframes hw-rise { from { transform: translateY(14px) rotate(-2deg); } to { transform: translateY(0) rotate(2deg); } }

.hw-vampire { right: 4px; bottom: -6px; width: 196px; }

@media (max-width: 600px) {
  .hw-web { width: 130px; height: 130px; }
  .hw-zombie { width: 96px; opacity: .85; }
  .hw-vampire { width: 110px; opacity: .85; }
  .hw-bat { width: 52px; }
  .hw-ghost { width: 44px; }
  h1 { font-size: 40px; }
  .form { flex-direction: column; align-items: stretch; }
  .form input, .form button { flex: 0 0 auto; max-width: none; width: 100%; box-sizing: border-box; font-size: 18px; }
  .banner { padding: 6px 30px 4px; }
  .banner-title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}