/* Halloween event screens: the Spooky Swap banner, picker and reveal, and the Halloween gallery.
   Looks for Spooky Wonderkin themselves (always shown) stay in style.css. */
.spooky-swap .spooky-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.spooky-swap button.spooky-go{background:linear-gradient(180deg,#ffa23a,#e8661c);color:#2a1206;border:0;border-bottom:3px solid #b84a10;border-radius:12px;padding:10px 16px;font-weight:800}
.spooky-swap button.spooky-go:disabled{opacity:.5}
.spooky-pick{display:inline-flex;align-items:center;gap:6px;background:#ffffff14;border:1px solid #ffffff30;border-radius:12px;padding:4px 10px 4px 4px;color:#ffeed8;font-weight:700}
.spooky-pick .pet-art{width:40px;height:40px}
.spooky-reveal{text-align:center}
.spooky-reveal .pet-art{width:180px;height:180px;animation:bob 3s infinite}
.spooky-reveal .pet-art{filter:drop-shadow(0 4px 16px #b781db60)}
/* A discoverable, read-only catalogue of every Halloween companion and form. */
.halloween-gallery-link{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 18px;padding:14px 16px;border:1px solid #dbc398;border-radius:14px;background:linear-gradient(110deg,#fff0d3,#f1e6fa);color:#513765;text-align:left}
.halloween-gallery-link>span:first-child{font-size:28px;flex:none}
.halloween-gallery-link>span:nth-child(2){display:grid;gap:4px;min-width:0}
.halloween-gallery-link strong{font-family:Outfit,system-ui,sans-serif;font-size:17px}
.halloween-gallery-link small{font-size:12px;line-height:1.4;color:#77647f}
.halloween-gallery-link>b{margin-left:auto;font-size:22px}
.gallery-tile{content-visibility:auto;contain-intrinsic-size:auto 205px}
.gallery-tile .gallery-status,.gallery-status{display:inline-block;border-radius:10px;padding:4px 7px;background:#eee7dd;color:#746458;font-size:11px;line-height:1.3}
.gallery-tile .gallery-status.collected,.gallery-status.collected{background:#e0edda;color:#356541}
.gallery-tile .gallery-preview-label{color:#715184;font-weight:700;margin-top:4px}
.gallery-form-picker{margin:10px 0 22px}
.gallery-form-picker .filter-chip{min-height:40px}
.halloween-preview .kin-portrait>p{font-size:11px;color:#77647f;margin:0}
.halloween-preview .spooky-swap{margin-top:18px}
@media(max-width:620px){.halloween-gallery-link{padding:12px;gap:9px}.halloween-gallery-link strong{font-size:16px}.halloween-gallery-link small{font-size:11px}.gallery-tile .gallery-status{font-size:9px;padding:3px 5px}.gallery-form-picker .filter-chip{min-height:40px}}
/* Each swap uses five copies chosen by the player, with a separate review before spending. */
.swap-picker h4,.swap-review h4{font:700 20px Outfit,system-ui,sans-serif;color:#ffcc85;margin:0 0 8px}
.spooky-swap .swap-selection-count{font-size:16px;font-weight:800;margin:14px 0;color:#fff0b4}
.swap-copy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}
.swap-copy{position:relative;display:flex;align-items:center;gap:9px;min-width:0;min-height:98px;width:100%;padding:12px 10px;border:2px solid #b994cd80;border-radius:12px;background:#ffffff0b;color:#fff0dd;text-align:left}
.swap-copy .pet-art{width:48px;height:48px;flex:none}
.swap-copy-info{display:grid;gap:4px;min-width:0;overflow-wrap:anywhere}
.swap-copy-info strong{font-size:14px}
.swap-copy-info small{font-size:11px;line-height:1.4;color:#e5d2ef}
.swap-copy-info small:empty{display:none}
.swap-copy.selected{border-color:#ffd18a;background:#80502466;box-shadow:inset 0 0 0 1px #ffd18a33}
.swap-copy:disabled{opacity:.5;cursor:default}
.swap-copy:focus-visible{outline:3px solid #f5d7ff;outline-offset:2px}
.swap-check{display:grid;place-items:center;align-self:flex-start;flex:none;width:21px;height:21px;border:1px solid #d9bddf;border-radius:6px;color:#fff;font-weight:800}
.selected .swap-check{background:#ffd18a;color:#382014;border-color:#ffd18a}
.swap-actions{position:sticky;bottom:-14px;z-index:2;display:flex;flex-wrap:wrap;gap:8px;background:#3b2154;padding:12px 0 2px;margin-top:12px;border-top:1px solid #a17eb66b}
.swap-actions button{min-height:44px}
.swap-actions .secondary{background:#f4e6d2;color:#47303e}
@media(max-width:620px){.swap-copy-grid{grid-template-columns:1fr}.swap-copy{min-height:90px}.swap-actions button{flex:1}.swap-actions .spooky-go{flex:1 0 100%}}