/* Halloween — самостоятельный слой. Основные CSS и геометрия игры не меняются. */
html.cc-halloween {
  --accent: #ffbb70;
  --accent-deep: #f5a64d;
  --accent-soft: #ffbb7014;
  --paper: #1b1721;
  --paper-raised: #292231;
  --line: #403344;
  --cc-halloween-glow: #ed833326;
}
html.cc-halloween body {
  background-color: #110e17;
  background-image: radial-gradient(ellipse at 8% 0%, #61311635, transparent 48%), radial-gradient(ellipse at 100% 20%, #54256b26, transparent 50%);
}
html.cc-halloween #header {
  background-color: #15111bec;
  background-image: url('./web.svg'), url('./moon.svg');
  background-position: right top, 68% center;
  background-size: 148px 100%, 100px 76px;
  background-repeat: no-repeat;
  border-bottom-color: #ffbb7038;
}
html.cc-halloween #nav button.active { color: var(--accent); border-color: var(--accent); }
html.cc-halloween .primary:hover:not(:disabled) { background: #ffd19b; border-color: #ffd19b; }
html.cc-halloween .primary:active:not(:disabled) { background: #f5a64d; }
html.cc-halloween .hero {
  background-image: url('./pumpkin.svg'), url('./haunted-hills.svg'), radial-gradient(ellipse at 100% 0%, #68338332, transparent 60%), radial-gradient(ellipse at 0% 100%, #d4782220, transparent 65%);
  background-position: right 18px top 18px, right bottom, center, center;
  background-size: 44px 44px, 100% auto, auto, auto;
  background-repeat: no-repeat;
  border-color: #855337;
}
html.cc-halloween .hero .eyebrow,
html.cc-halloween .document-hero .eyebrow { color: #ffbb70; }
html.cc-halloween .question-card {
  background: url('./web.svg') right top / 100px 75px no-repeat, linear-gradient(145deg, #302036, #1b1622 75%);
  border-color: #936244;
  box-shadow: inset 0 1px 0 #ffcb9526, 0 0 22px var(--cc-halloween-glow);
}
html.cc-halloween .question-card.has-result { border-color: #efb057; }
/* Поиск и сбор компании получают собственную сцену вместо вращающейся пиктограммы. */
html.cc-halloween .queue-screen,
html.cc-halloween .waiting-table {
  background: url('./moon.svg') right 12px top 12px / 104px 78px no-repeat,
    url('./haunted-hills.svg') center bottom / 100% auto no-repeat,
    radial-gradient(ellipse at 50% 15%, #9d5ba42b, transparent 70%), #19141f;
  border-radius: 20px;
}
html.cc-halloween .waiting-table { border-color: #a96c4280; }
html.cc-halloween .queue-screen .queue-spinner,
html.cc-halloween .waiting-table .table-mark {
  display: block; width: 64px; height: 72px; margin: 0 auto 12px;
  background: url('./ghost.svg') center / contain no-repeat;
  animation: none;
  filter: drop-shadow(0 6px 14px #ba83dc33);
}
html.cc-halloween .queue-screen .queue-spinner > svg,
html.cc-halloween .waiting-table .table-mark > svg { visibility: hidden; }
html.cc-halloween.cc-halloween-motion .queue-screen .queue-spinner,
html.cc-halloween.cc-halloween-motion .waiting-table .table-mark { animation: cc-halloween-ghost 3.6s ease-in-out infinite; }
html.cc-halloween .room-player.is-self { border-color: #bc783c; background-color: #ffbb7010; }
html.cc-halloween .hand-controls { border-color: #9b693d; }
html.cc-halloween .card-reaction-icon { color: #96603b; }
html.cc-halloween .document-hero { background: url('./web.svg') right top / 100px 75px no-repeat; }
/* Светлые карты сохраняют читаемость; состояния выбора остаются различимыми. */
html.cc-halloween .answer-card:not(.selected):not(.card-sent) { background-color: #f5eee3; }
html.cc-halloween .answer-card:hover:not(:disabled):not([aria-disabled="true"]):not(.selected) { background-color: #fff8ed; border-color: #ab682c; }
html.cc-halloween .answer-card.selected { background: #ffe4bd; border-color: #96531c; box-shadow: inset 0 0 0 1px #96531c, 0 2px 0 #96531c; }
html.cc-halloween .answer-card.selected .selection-number { background: #f3b367; color: #322014; }
html.cc-halloween .footer-main {
  border-top-color: #ffbb7038;
  background: url('./haunted-hills.svg') right bottom / min(100%, 620px) auto no-repeat;
}
html.cc-halloween .footer-main .brand::after {
  content: ''; display: inline-block; flex: none; width: 28px; height: 28px;
  background: url('./pumpkin.svg') center / contain no-repeat;
}
html.cc-halloween .cc-halloween-controls {
  max-width: 1280px; margin: 12px auto; padding: 8px 24px;
  display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  color: #c9b4d0; font-size: 12px;
}
html.cc-halloween .cc-halloween-toggle { min-height: 44px; padding: 8px 12px; font-size: 12px; }
html.cc-halloween .cc-halloween-sky {
  position: fixed; inset: 0 0 auto; height: 116px; overflow: hidden;
  pointer-events: none; user-select: none; z-index: 45; contain: strict;
}
html.cc-halloween .cc-halloween-bat {
  position: absolute; left: -80px; top: var(--cc-bat-y, 12px); width: 52px; height: 32px;
  color: #312036; filter: drop-shadow(0 0 2px #f2b367a6);
  animation: cc-halloween-flight 6s linear both; animation-delay: var(--cc-bat-delay, 0s);
}
html.cc-halloween .cc-bat-wing { transform-box: fill-box; animation: cc-halloween-wing .32s ease-in-out infinite alternate; }
html.cc-halloween .cc-bat-left { transform-origin: right center; }
html.cc-halloween .cc-bat-right { transform-origin: left center; }
@keyframes cc-halloween-wing { to { transform: scaleY(.38); } }
@keyframes cc-halloween-ghost {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-7px) rotate(3deg); }
}
@keyframes cc-halloween-flight {
  0% { transform: translate3d(0, 8px, 0) rotate(-8deg); opacity: 0; }
  10% { opacity: .9; }
  40% { transform: translate3d(42vw, -6px, 0) rotate(6deg); }
  70% { transform: translate3d(74vw, 14px, 0) rotate(-4deg); opacity: .9; }
  100% { transform: translate3d(calc(100vw + 160px), 0, 0); opacity: 0; }
}
@media (max-width: 600px) {
  html.cc-halloween .hero { background-position: right 6px top 6px, right bottom, center, center; background-size: 24px 24px, auto 90px, auto, auto; }
  html.cc-halloween #header { background-size: 100px 100%, 64px 48px; background-position: right top, 48% center; }
  html.cc-halloween .queue-screen, html.cc-halloween .waiting-table { background-size: 64px 48px, auto 95px, auto, auto; }
  html.cc-halloween .cc-halloween-sky { height: 64px; }
  html.cc-halloween .cc-halloween-bat { width: 38px; height: 25px; }
  html.cc-halloween .cc-halloween-controls { justify-content: flex-start; padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html.cc-halloween .cc-halloween-sky { display: none; }
  html.cc-halloween .cc-halloween-bat, html.cc-halloween .cc-bat-wing,
  html.cc-halloween.cc-halloween-motion .queue-screen .queue-spinner,
  html.cc-halloween.cc-halloween-motion .waiting-table .table-mark { animation: none; }
}