/* Pumpkin Night (halloween.py): body.halloween while the event runs. The decor sits in the tower's
   roof and base (it scales and zooms with the tower), the night location, the violet-orange chrome
   with cobwebs, the event modal, the Pumpkin frame and the Pumpkin dragon skin. */

/* The night location and the page behind it. */
body.halloween.game-mode .tower-scroll { background:url('/assets/hw-location-night-860.webp') center bottom -110px / cover no-repeat local,#2b1a5e; }
body.halloween.game-mode { background:#22124a; }
body.halloween.game-mode::before { background:linear-gradient(180deg,#2a114fcc,#170936e6),url('/assets/cartoon-arena-empty.webp') center / cover no-repeat; }
body.halloween .tower-stack { filter:drop-shadow(0 10px 14px #12052d80); }

/* The tower decor: cobwebs under the eaves, bats over the roof, jack-o'-lanterns at the base. */
.hw-web,.hw-bats,.hw-pumpkins { position:absolute; pointer-events:none; user-select:none; height:auto; }
.hw-web { z-index:9; top:70%; width:25%; filter:drop-shadow(0 2px 2px #12052d99); }
.hw-web--l { left:13.5%; }
.hw-web--r { right:13.5%; transform:scaleX(-1); }
.hw-bats { z-index:9; top:-58%; left:58%; width:30%; animation:hw-bats 7s ease-in-out infinite; filter:drop-shadow(0 4px 6px #12052d88); }
@keyframes hw-bats { 0%,100% { transform:translate(0,0) rotate(-2deg); } 50% { transform:translate(10px,-12px) rotate(3deg); } }
.hw-pumpkins { z-index:8; bottom:4%; width:19%; filter:drop-shadow(0 0 14px #ff8a1f88) drop-shadow(0 6px 5px #12052daa); animation:hw-glow 2.6s ease-in-out infinite; }
.hw-pumpkins--l { left:11%; }
.hw-pumpkins--r { right:11%; transform:scaleX(-1); animation-delay:-1.3s; }
@keyframes hw-glow { 50% { filter:drop-shadow(0 0 22px #ffa53dcc) drop-shadow(0 6px 5px #12052daa); } }

/* The chrome: the tab bar and the cards go violet with orange accents and a cobweb in a corner. */
body.halloween .tabs { border-top-color:#ff9a3d; background:url('/assets/hw-cobweb-256.webp') left -2px top -2px / 58px auto no-repeat,url('/assets/hw-cobweb-r-256.webp') right -2px top -2px / 58px auto no-repeat,linear-gradient(#5a2f96,#3b1a70 65%,#240f4d); box-shadow:inset 0 2px #e5c8ff55,0 -8px 25px #1b073f88; }
body.halloween .tabs button { color:#f1dcff; text-shadow:0 2px #2a0f55; }
body.halloween .tabs button.active { border-color:#ffd9a6; background:linear-gradient(#ffc06b,#f07a1c 60%,#b84a0c); box-shadow:inset 0 2px #fff6,0 3px 0 #6e2a05; }
body.halloween .tabs button.active .ui-icon { filter:drop-shadow(0 0 7px #ffb15c); }
/* :where keeps this at (0,1,1): over the base .card skin, under every card that draws its own art or state. */
body.halloween :where(.card,.feature-card,.offer-summary,.roster-card,.siege-picker,.slot-current):where(:not(.hatchery,.dragon-sheet,.ranked-card,.profile-token,.rules-hero,.rules-token,.long-season,.treasury-card,.empty,.is-ripe,.is-coached)) { border-color:#c79bff; background:url('/assets/hw-cobweb-r-256.webp') right -3px top -3px / 54px auto no-repeat,linear-gradient(145deg,#5b34a6,#3a1f7a 50%,#24104f); box-shadow:inset 0 2px #f0deff55,0 5px 0 #2a1060,0 10px 17px #12052d77; }
body.halloween .meter-bar { border-color:#d2a8ffb3; background:linear-gradient(#6a3bb4e0,#3b1a70eb); }
body.halloween .today-card { border-color:#d2a8ff; background:url('/assets/hw-cobweb-r-256.webp') right -3px top -3px / 48px auto no-repeat,linear-gradient(155deg,#6a3bb4f2,#3b1a70f5 72%); }
body.halloween .resource-tile { border-color:#d2a8ff; border-bottom-color:#3b1a70; background:linear-gradient(180deg,#7b4bc4,#4d2596 64%,#2c1263); box-shadow:inset 0 2px #f1e0ff88,0 4px 0 #24104f,0 7px 12px #12052d66; }
body.halloween .resource-tile strong { text-shadow:0 2px #2a0f55; }
body.halloween :is(.menu-toggle,.ghost) { border-color:#e2c4ff; background:linear-gradient(#9b6ae0,#4d2596); box-shadow:inset 0 2px #f3e6ff88,0 4px 0 #24104f; }
body.halloween .tower-shortcuts button,body.halloween.game-mode .tower-rail button:not(.active) { border-color:#d2a8ff; background:linear-gradient(#8a5ad6,#4a2391); box-shadow:inset 0 2px #f1e0ff8a,0 3px 0 #24104f,0 7px 12px #12052d88; text-shadow:0 1px #2a0f55; }

/* The event button by the tower. */
body.game-mode .tower-shortcuts .shortcut-hw { grid-column:1; }
.tower-shortcuts .shortcut-hw,body.halloween .tower-shortcuts .shortcut-hw { border-color:#ffd9a6; background:linear-gradient(#ffb457,#e0640f 62%,#a33d07); box-shadow:inset 0 2px #fff4d68a,0 3px 0 #6e2a05,0 0 16px #ff8a1f88; text-shadow:0 1px #6e2a05; }
.shortcut-hw img { width:36px; height:36px; animation:hw-bob 2.2s ease-in-out infinite; }
@keyframes hw-bob { 50% { transform:translateY(-3px) rotate(-6deg); } }

/* The event modal: the whole overlay dims to the night (safe area under the Telegram buttons too). */
.battle-modal:has(.hw-modal) { background:radial-gradient(circle at 50% calc(var(--safe-top,0px) + 150px),#ff8a1f33,transparent 260px),linear-gradient(180deg,#14072ee8,#1d0b45f0 40%,#12052df5),url('/assets/hw-location-night-860.webp') center top / cover no-repeat,#12052d; }
.reveal-screen.hw-modal { background:none; }
.hw-buy .star-mark { width:18px; height:18px; vertical-align:-3px; }
.hw-modal { display:grid; gap:10px; justify-items:center; text-align:center; max-width:460px; margin-inline:auto; }
.hw-modal h2 { margin:0; }
.hw-modal h3 { justify-self:start; margin:8px 0 0; font:18px/1.1 DraklyBlack,'Trebuchet MS',sans-serif; color:#ffd59c; }
.hw-hero { width:min(210px,56vw); height:auto; margin:-6px 0 -8px; filter:drop-shadow(0 0 24px #ff8a1f66); animation:hw-bob 3.2s ease-in-out infinite; }
.hw-count { display:flex; gap:8px; align-items:center; }
.hw-count img { width:48px; height:48px; }
.hw-count b { font:34px/1 DraklyBlack,'Trebuchet MS',sans-serif; color:#ffd59c; text-shadow:0 3px #6e2a05; }
.hw-count span { color:#f1dcff; }
.hw-bar { display:block; width:100%; height:12px; border-radius:99px; background:#ffffff1f; box-shadow:inset 0 1px 3px #0008; overflow:hidden; }
.hw-bar > i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ffb457,#ff7a1a); box-shadow:0 0 10px #ff8a1f; }
.hw-bar--all > i { background:linear-gradient(90deg,#c79bff,#8a4dff); box-shadow:0 0 10px #a46bff; }
.hw-pk { width:22px; height:22px; flex:none; }
.hw-earn { display:grid; gap:6px; width:100%; margin:0; padding:0; list-style:none; text-align:left; }
.hw-earn li { display:flex; gap:8px; align-items:center; padding:7px 10px; border-radius:12px; background:#ffffff14; }
.hw-earn b { color:#ffd59c; }
.hw-earn .icon { width:16px; height:16px; color:#7dffa8; }
.hw-note,.hw-over { margin:0; font-size:13px; color:#ead8ff; text-align:left; justify-self:stretch; }
.hw-track { display:grid; gap:6px; width:100%; margin:0; padding:0; list-style:none; }
.hw-step { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:6px 10px 6px 6px; border-radius:14px; background:#ffffff12; text-align:left; }
.hw-step.is-ready { background:linear-gradient(90deg,#ff8a1f33,#ffffff12); box-shadow:inset 0 0 0 2px #ffb457; }
.hw-step.is-done { opacity:.6; }
.hw-step__art { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#12052d55; }
.hw-step__art :is(img,.ui-icon) { width:36px; height:36px; object-fit:contain; }
.hw-step__txt { display:grid; gap:1px; min-width:0; }
.hw-step__txt b { font-size:14px; }
.hw-step__txt small { color:#d9c2ff; font-size:12px; }
.hw-step em { display:inline-flex; gap:3px; align-items:center; font-style:normal; font-weight:800; color:#ffd59c; }
.hw-step em .hw-pk { width:18px; height:18px; }
.hw-step__ok .icon { width:20px; height:20px; color:#7dffa8; }
.hw-claim { min-height:36px; padding:6px 14px; }
.hw-rw__frame { width:34px; height:34px; border-radius:50%; background:conic-gradient(from 200deg,#ffd9a6,#ff7a1a,#5b2bb8,#c79bff,#ff7a1a,#ffd9a6); -webkit-mask:radial-gradient(circle,transparent 52%,#000 54%); mask:radial-gradient(circle,transparent 52%,#000 54%); }
.hw-chest { display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:center; width:100%; margin-top:6px; padding:10px; border-radius:16px; text-align:left; background:linear-gradient(135deg,#ff8a1f33,#5b2bb833); box-shadow:inset 0 0 0 2px #ffb45799; }
.hw-chest > img { width:96px; height:auto; filter:drop-shadow(0 0 14px #ff8a1f88); }
.hw-chest > div { display:grid; gap:6px; }
.hw-chest small { color:#f1dcff; font-size:12px; }

/* The Pumpkin frame and the Pumpkin dragon skin. */
.profile-frame.frame-halloween .profile-frame__ring { background:conic-gradient(from 200deg,#ffd9a6,#ff7a1a,#5b2bb8,#c79bff,#ff7a1a,#ffd9a6); box-shadow:0 0 0 2px #ffb45755,0 6px 18px #ff8a1f66; }
.avatar--halloween { --ring:conic-gradient(from 200deg,#ffd9a6,#ff7a1a,#5b2bb8,#c79bff,#ff7a1a,#ffd9a6); --glow:#ff8a1f99; }
/* The pumpkin skin itself (colour grade, glow) lives in skins.css with the other skins. */

@media (prefers-reduced-motion: reduce) {
  .hw-bats,.hw-pumpkins,.shortcut-hw img,.hw-hero { animation:none; }
}