/* Tykva v tapochkah: Premium Halloween Theme, Effects & Audio Controls. ASCII-only build. */
.night-sky{z-index:0}
.site-wrap{position:relative;z-index:1}

/* ---------- СТАРТОВЫЙ ВАУ-ЭФФЕКТ: КНОПКА СТАРТА И ПЕРСОНАЖИ ---------- */
.hero-art{transition:transform .18s cubic-bezier(.2,.8,.3,1);will-change:transform}
.hero-art img{filter:drop-shadow(0 14px 38px rgba(255,106,61,.28));animation:fx-hero-float 4.8s ease-in-out infinite alternate}
@keyframes fx-hero-float{from{transform:translateY(0) scale(1)}to{transform:translateY(-10px) scale(1.02)}}

/* Энергичная пульсирующая кнопка «Создать комнату» */
.hero-card .btn-primary, [data-phase="lobby"] #create-room-btn{
  position:relative;
  box-shadow:0 0 0 0 rgba(255,106,61,.6), 0 12px 30px rgba(255,106,61,.35);
  animation:fx-btn-pulse 2.4s infinite cubic-bezier(.66,0,0,1);
  transition:all .22s ease-out;
}
.hero-card .btn-primary:hover, [data-phase="lobby"] #create-room-btn:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 0 25px rgba(255,106,61,.7), 0 16px 36px rgba(255,106,61,.5);
}
@keyframes fx-btn-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,106,61,.6), 0 12px 30px rgba(255,106,61,.35)}
  70%{box-shadow:0 0 0 18px rgba(255,106,61,0), 0 12px 30px rgba(255,106,61,.35)}
  100%{box-shadow:0 0 0 0 rgba(255,106,61,0), 0 12px 30px rgba(255,106,61,.35)}
}

/* Код комнаты в лобби — сочный неоновый фокус */
.room-code-display{
  text-shadow:0 0 24px rgba(255,106,61,.6), 0 0 40px rgba(255,106,61,.2);
  letter-spacing:0.08em;
}

/* Гирлянда */
.fx-garland{position:absolute;left:0;right:0;top:0;height:34px;display:flex;justify-content:space-around;pointer-events:none}
.fx-garland i{width:9px;height:12px;margin-top:14px;border-radius:50% 50% 45% 45%;background:hsl(calc(28 + var(--i) * 37 % 3 * 110) 95% 64%);box-shadow:0 0 12px 3px hsl(calc(28 + var(--i) * 37 % 3 * 110) 95% 60% / .55);animation:fx-twinkle 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * -0.37s)}
@keyframes fx-twinkle{0%,100%{opacity:.35}50%{opacity:1}}

/* Свечи по краям */
.fx-candle{position:absolute;width:10px;height:34px;border-radius:3px;background:linear-gradient(#fff4e0,#e9cfa6);opacity:.4;animation:fx-float 7s ease-in-out infinite;animation-delay:var(--d)}
.fx-candle b{position:absolute;left:50%;top:-15px;width:10px;height:15px;margin-left:-5px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff6c2 0 25%,#ffb347 45%,rgba(255,120,40,0) 70%);filter:drop-shadow(0 0 10px #ffb347);transform-origin:50% 100%;animation:fx-flame 1.4s ease-in-out infinite alternate}
@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes fx-flame{from{transform:scale(1,1) rotate(-3deg)}to{transform:scale(.9,1.12) rotate(3deg)}}
body[data-role=player] .fx-candle{display:none}
@media (max-width:1499.98px){.fx-candle{display:none}}

/* Мышь */
.fx-bat{position:absolute;left:-80px;width:56px;color:#120d18;opacity:0;pointer-events:none}
.fx-bat.is-flying{animation:fx-bat 7s ease-in-out both}
.fx-bat svg{display:block;width:100%;animation:fx-flap .22s ease-in-out infinite alternate}
@keyframes fx-bat{0%{opacity:0;transform:translate(0,0)}8%{opacity:.85}50%{transform:translate(55vw,-40px)}92%{opacity:.85}100%{opacity:0;transform:translate(115vw,10px)}}
@keyframes fx-flap{from{transform:scaleY(1)}to{transform:scaleY(.55)}}

/* Карточки и результаты */
.fx-card-in{animation:fx-card-in .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes fx-card-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.fx-reveal{animation:fx-reveal .6s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes fx-reveal{from{opacity:0;transform:perspective(900px) rotateX(-55deg) translateY(-12px)}to{opacity:1;transform:none}}
.answer-panel:not(.is-false){box-shadow:0 0 0 1px rgba(94,214,160,.25),0 18px 60px rgba(94,214,160,.12)}
.answer-panel.is-false{box-shadow:0 0 0 1px rgba(198,91,207,.28),0 18px 60px rgba(198,91,207,.14)}
.fx-stamp{animation:fx-stamp .7s cubic-bezier(.2,1.6,.4,1) .15s both}
@keyframes fx-stamp{0%{opacity:0;transform:scale(2.6) rotate(-25deg)}60%{opacity:1;transform:scale(.9) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
.fx-bump{display:inline-block;animation:fx-bump .6s cubic-bezier(.2,1.8,.4,1)}
@keyframes fx-bump{0%{transform:scale(1)}40%{transform:scale(1.55);color:#5ed6a0}100%{transform:scale(1)}}
.fx-rise{animation:fx-rise .6s ease-out both}
@keyframes fx-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.fx-podium{animation:fx-podium .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes fx-podium{from{opacity:0;transform:translateY(60px) scale(.85)}to{opacity:1;transform:none}}
.podium-player:first-child{box-shadow:0 0 40px rgba(246,196,83,.25)}
.fx-confetti{position:fixed;inset:0;z-index:999;overflow:hidden;pointer-events:none}
.fx-confetti span{position:absolute;top:-40px;animation:fx-fall linear both}
@keyframes fx-fall{to{transform:translate(var(--x),110vh) rotate(var(--r))}}

/* Кнопки управления аудио (Музыка и Голос) */
.fx-bgm-button, .fx-voice-button{font-size:18px;line-height:1}
body[data-role=player] .fx-bgm-button, body[data-role=player] .fx-voice-button{display:none}

@media (prefers-reduced-motion:reduce){
  .fx-garland i,.fx-candle,.fx-candle b,.fx-bat,.fx-confetti,.hero-art img,.hero-card .btn-primary{animation:none!important}
  .fx-bat,.fx-confetti{display:none}
}
html.motion-paused .fx-garland i,html.motion-paused .fx-candle,html.motion-paused .fx-candle b,.hero-art img,.hero-card .btn-primary{animation:none!important}
html.motion-paused .fx-bat,html.motion-paused .fx-confetti{display:none}
/* END fx.css */