/* Halloween skin (shared) — VISUAL ONLY, thru Oct 31 2026. Revert: ~/backups-claude/halloween-rollout-*/revert-halloween.sh */
:root{--hw-orange:#ff7a18;--hw-orange-soft:#ffb347}
/* Seasonal banner — removable Nov 1 */
.mr-halloween-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.55rem 1rem;
  background: linear-gradient(90deg, #1a0b2e 0%, #2d1248 45%, #1a0b2e 100%);
  color: #ffe6c7;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255, 122, 24, 0.45);
  text-align: center;
  position: relative;
  z-index: 40;
}
.mr-halloween-banner p {
  margin: 0;
  line-height: 1.35;
}
.mr-halloween-banner .mr-halloween-ghost {
  font-size: 1.15rem;
  filter: drop-shadow(0 0 6px rgba(255, 184, 120, 0.55));
  animation: mrGhostFloat 3.2s ease-in-out infinite;
}
@keyframes mrGhostFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ===== SCARY upgrade v2 (pumpkins, ghosts, fog, bats, flicker) — visual only ===== */
.mr-halloween-banner{background:linear-gradient(90deg,#0a0614,#3b0d0d 50%,#0a0614)!important;color:#ffedd5!important;font-size:.95rem;text-shadow:0 0 8px rgba(255,122,24,.6)}
.mr-hw-bpk svg{width:30px;height:28px;display:block;filter:drop-shadow(0 0 8px #ff7a18);animation:mrFlicker 2.6s infinite}
.mr-pk path[fill="#fde047"]{filter:drop-shadow(0 0 3px #fde047)}
@keyframes mrFlicker{0%,100%{filter:drop-shadow(0 0 8px #ff7a18) brightness(1)}8%{filter:drop-shadow(0 0 2px #ff7a18) brightness(.7)}12%{filter:drop-shadow(0 0 14px #ffb347) brightness(1.2)}40%{filter:drop-shadow(0 0 10px #ff7a18)}43%{filter:drop-shadow(0 0 3px #ff7a18) brightness(.75)}46%{filter:drop-shadow(0 0 12px #ffb347) brightness(1.15)}}
.mr-hw-layer{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.mr-hw-layer span{position:absolute;display:block}
.mr-hw-layer .mr-gh{width:100%;height:100%;filter:drop-shadow(0 0 12px rgba(200,190,255,.7))}
.mr-hw-layer .g1{width:70px;height:88px;top:18%;left:-90px;opacity:.55;animation:mrGhostFly 22s linear infinite}
.mr-hw-layer .g2{width:52px;height:66px;top:52%;left:-90px;opacity:.4;animation:mrGhostFly 30s linear infinite -11s}
.mr-hw-layer .g3{width:44px;height:56px;top:75%;right:4%;opacity:.35;animation:mrGhostBob 5s ease-in-out infinite}
@keyframes mrGhostFly{0%{transform:translate(0,0) rotate(-6deg)}25%{transform:translate(30vw,-30px) rotate(6deg)}50%{transform:translate(60vw,20px) rotate(-6deg)}75%{transform:translate(90vw,-25px) rotate(6deg)}100%{transform:translate(115vw,0) rotate(-6deg)}}
@keyframes mrGhostBob{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-18px);opacity:.15}}
.mr-hw-layer .mr-bat{width:100%;height:100%}
.mr-hw-layer .b1,.mr-hw-layer .b2,.mr-hw-layer .b3{width:46px;height:19px;opacity:.85;animation:mrBat 14s linear infinite}
.mr-hw-layer .b1{top:10%;right:-60px}.mr-hw-layer .b2{top:16%;right:-60px;width:32px;height:13px;animation-delay:-5s}.mr-hw-layer .b3{top:34%;right:-60px;width:26px;height:11px;animation-delay:-9s}
.mr-hw-layer .mr-bat{animation:mrFlap .25s ease-in-out infinite alternate;transform-origin:center}
@keyframes mrBat{0%{transform:translate(0,0)}30%{transform:translate(-40vw,40px)}60%{transform:translate(-75vw,-10px)}100%{transform:translate(-115vw,30px)}}
@keyframes mrFlap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
.mr-hw-layer .p1,.mr-hw-layer .p2{bottom:6px;width:86px;height:80px;animation:mrFlicker 3s infinite}
.mr-hw-layer .p1{left:10px}.mr-hw-layer .p2{right:10px;width:66px;height:62px;animation-delay:-1.3s}
.mr-hw-layer .mr-pk{width:100%;height:100%}
.mr-hw-fog{position:absolute;left:-50%;bottom:-40px;width:200%;height:180px;background:radial-gradient(ellipse 25% 60% at 20% 70%,rgba(220,210,255,.18),transparent 70%),radial-gradient(ellipse 30% 55% at 60% 80%,rgba(200,190,240,.15),transparent 70%),radial-gradient(ellipse 22% 50% at 90% 75%,rgba(220,210,255,.16),transparent 70%);filter:blur(10px);animation:mrFog 26s linear infinite}
.mr-hw-fog.f2{bottom:-70px;opacity:.7;animation-duration:40s;animation-direction:reverse}
@keyframes mrFog{from{transform:translateX(0)}to{transform:translateX(25%)}}
@media (max-width:640px){.mr-hw-layer .p1{width:54px;height:50px}.mr-hw-layer .p2{width:42px;height:40px}.mr-hw-layer .g1{width:46px;height:58px}.mr-hw-layer .g2{display:none}.mr-hw-fog{height:110px}.mr-halloween-banner{font-size:.82rem}.mr-hw-bpk svg{width:22px;height:20px}}
@media (prefers-reduced-motion:reduce){.mr-hw-layer *,.mr-hw-layer span,.mr-hw-bpk svg{animation:none!important}.mr-hw-layer .g1{left:6%}.mr-hw-layer .g2{left:80%}.mr-hw-layer .b1,.mr-hw-layer .b2,.mr-hw-layer .b3{right:8%}}
.mr-hw-bpk svg{width:26px;height:24px;vertical-align:middle}
@media (max-width:640px){.mr-hw-layer .p1,.mr-hw-layer .p2{display:none!important}.mr-hw-layer .g1{width:40px;height:50px}.mr-hw-layer .g2,.mr-hw-layer .g3{display:none}.mr-hw-fog{height:90px;opacity:.7}.mr-halloween-banner{font-size:.8rem;padding:.45rem .6rem}.mr-hw-bpk svg{width:20px;height:18px}}
@media (prefers-reduced-motion:reduce){.mr-hw-layer *,.mr-hw-layer span,.mr-hw-bpk svg,.mr-halloween-banner *{animation:none!important}.mr-hw-layer .g1{left:6%}.mr-hw-layer .g2{left:80%}.mr-hw-layer .b1,.mr-hw-layer .b2,.mr-hw-layer .b3{right:8%}}
@media print{.mr-hw-layer,.mr-halloween-banner{display:none!important}}