/* Halloween visual layer 1. Load AFTER styles.css. No game logic changes. */
:root {
  --bg:#1e1626;
  --panel:#2a2032;
  --panel-soft:#34283d;
  --border:#55415c;
  --text:#fff4e0;
  --muted:#c7b8ca;
  --orange:#ff995e;
  --orange-light:#ffb583;
  --lavender:#d1b8ef;
  --green:#5ed6a0;
  --rose:#c65bcf;
  --font:Manrope,Arial,sans-serif;
}
/* Explicit centering: independent of Bootstrap container defaults. */
.page-container { width:100%; margin-inline:auto; }
.site-wrap { min-width:0; }
.hero-copy, .hero-art { min-width:0; }
.scene-image { width:100%; max-width:560px; margin-inline:0; }
.sky-glow {
  background:radial-gradient(circle,rgba(242,140,40,.10),transparent 65%);
}
#home-title, #lobby-title, #player-lobby-title, #standings-title {
  font-family:'Ruslan Display',Manrope,Arial,sans-serif;
  font-weight:400;
  letter-spacing:.01em;
  line-height:1.15;
}
#lobby-title, #standings-title { font-size:clamp(32px,3.6vw,52px); }
/* Keep long questions, explanations and controls in the readable sans-serif. */
#question-text { font-family:var(--font); letter-spacing:-.025em; line-height:1.35; }
.hero-description { color:var(--muted); }
.hero-facts { font-size:13px; }
.small-note { font-size:12px; }
.btn { transition-duration:180ms; }
.btn:focus-visible { outline:3px solid var(--lavender); outline-offset:4px; }
@media (min-width:1200px) {
  body:not([data-role=player]) #question-text { font-size:clamp(36px,3.2vw,52px); }
}
@media (max-width:767.98px) {
  .hero-copy h1 { font-size:clamp(40px,9vw,60px); letter-spacing:0; }
  .hero-facts { font-size:12px; gap:10px; }
  .hero-description { font-size:16px; }
  .hero-copy>.small-note { font-size:12px; }
  .scene-image { width:300px; max-width:100%; }
  #question-text { font-size:clamp(23px,5.8vw,32px); line-height:1.4; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none!important; transition:none!important; }
}
html.motion-paused { scroll-behavior:auto; }
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after {
  animation:none!important; transition:none!important;
}

/* Уведомления: центрирование без transform, конфликтующего с анимацией */
#toast.toast-message {
  left: 0;
  right: 0;
  width: fit-content;
  max-width: min(560px, calc(100% - 32px));
  margin-inline: auto;
  box-sizing: border-box;

  transform: none;
  white-space: normal;
  overflow-wrap: anywhere;

  font-size: 14px;
  line-height: 1.5;
  animation: toast-appear 180ms ease-out both;
}

@keyframes toast-appear {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #toast.toast-message {
    animation: none;
  }
}

html.motion-paused #toast.toast-message {
  animation: none;
}