.home-page{--seasonal-accent:#ffe631;--seasonal-glow:#ffe63124}
.home-page[data-theme=fire]{--seasonal-accent:#ffbd5c;--seasonal-glow:#ff7a2828}
.home-page[data-theme=halloween]{--seasonal-accent:#d4a4ff;--seasonal-glow:#a445ff30}
.seasonal-fire,.seasonal-haunt{display:none;pointer-events:none}
[data-theme=fire] .hero-smoke{display:none}

[data-theme=halloween] .hero-smoke{filter:hue-rotate(225deg);opacity:.65}
[data-theme=halloween] .seasonal-haunt{display:block;background-image:url('/seasonal/haunted.webp');opacity:0;z-index:2}
.haunting .hero-blink,.haunting .hero-trace{visibility:hidden}

.paused .seasonal-fire::before,.hero-offscreen .seasonal-fire::before,.page-hidden .seasonal-fire::before{animation-play-state:paused}
.page-hidden .seasonal-haunt{opacity:0!important}
.mystery-clock{width:min(600px,calc(100% - 48px));margin:24px auto 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:22px 16px;border:0;border-radius:18px;background:radial-gradient(ellipse at center,var(--seasonal-glow),transparent 85%);box-shadow:inset 0 0 26px var(--seasonal-glow),0 0 24px var(--seasonal-glow)}
.mystery-clock[hidden]{display:none}
.clock-unit{text-align:center;min-width:0;padding:8px 0}
.clock-unit+.clock-unit{border-left:1px solid color-mix(in srgb,var(--seasonal-accent) 18%,transparent)}
.clock-unit>span{display:block;font-family:'Barlow Condensed',Arial,sans-serif;font-size:clamp(36px,6vw,64px);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.05;color:var(--seasonal-accent);text-shadow:0 0 24px var(--seasonal-glow)}
.clock-unit>small{display:block;margin-top:10px;color:#cecdc6;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:480px){.mystery-clock{width:calc(100% - 36px);gap:0;padding:18px 4px;margin-bottom:8px}.clock-unit>small{font-size:10px;letter-spacing:.04em}.clock-unit>span{font-size:40px}}
@media(prefers-reduced-motion:reduce){[data-theme=halloween] .seasonal-haunt{opacity:0!important}}


/* The full scene puts the flames behind daCAT. Only the background glow moves. */
[data-theme=fire] .seasonal-fire{display:block;background-image:url('/seasonal/fire-hero-v2.webp');opacity:1;overflow:hidden}
[data-theme=fire] .seasonal-fire::before{content:"";position:absolute;inset:0;background-image:url("/seasonal/fire.webp");background-repeat:no-repeat;background-size:100% 250%;background-position:center bottom;mask-image:url('/seasonal/behind-character.svg');mask-size:100% 100%;mix-blend-mode:screen;opacity:.15;animation:fire-glow 6s ease-in-out infinite alternate}
@keyframes fire-glow{from{background-position:center bottom;opacity:.1;filter:brightness(.9)}to{background-position:center 94%;opacity:.28;filter:brightness(1.2)}}
[data-theme=halloween].haunt-ready[data-haunt=on].paused .seasonal-haunt{opacity:1!important}
@media(prefers-reduced-motion:reduce){[data-theme=fire] .seasonal-fire::before{animation:none;opacity:.12}[data-theme=halloween].haunt-ready[data-haunt=on] .seasonal-haunt{opacity:1!important}}

/* Desktop game tiles flank the mystery countdown; mobile retains its clock. */
.countdown-game-tile{display:none}
@media(min-width:1024px){
.countdown-game-row{display:grid;grid-template-columns:minmax(210px,1fr) minmax(360px,1.6fr) minmax(210px,1fr);align-items:center;gap:clamp(20px,3vw,46px);width:90%;max-width:1280px;margin:36px auto 44px}
.countdown-game-row .mystery-clock{width:100%;margin:0;padding:24px 12px;gap:6px}
.countdown-game-row .clock-unit>span{font-size:clamp(42px,4.4vw,64px)}
.countdown-game-tile{display:block;position:relative;min-width:0;aspect-ratio:4/3;overflow:hidden;border:1px solid #ffe63155;border-radius:16px;background:#111710;color:#fff;text-decoration:none;isolation:isolate}
.countdown-tile-art,.arcade-tile-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arcade-tile-cat{position:absolute;height:77%;width:50%;object-fit:contain;left:25%;top:2%;image-rendering:pixelated}
.countdown-game-tile:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#080a09 0%,#080a09dd 21%,#080a0920 70%);z-index:1;pointer-events:none}
.countdown-tile-copy{position:absolute;z-index:2;bottom:18px;left:20px;right:16px}
.tile-kicker{display:block;font-size:12px;line-height:1.3;letter-spacing:.12em;color:#fff3ab;font-weight:600}
.countdown-tile-copy h2{font-size:clamp(25px,2.6vw,36px);line-height:1.05;margin:5px 0 9px;letter-spacing:0}
.tile-status{display:flex;align-items:center;gap:8px;color:#ffe631;font-size:14px;font-weight:600;line-height:1.4}
.tile-status svg{width:20px;height:20px}
.hatverse-teaser{cursor:pointer}
.arcade-teaser{transition:border-color .2s,box-shadow .2s}
.arcade-teaser:hover{border-color:#ffe631;box-shadow:0 0 24px #ffe63120}
.arcade-teaser:focus-visible{outline:3px solid #ffe631;outline-offset:5px}
.countdown-game-row:has(.mystery-clock[hidden]){grid-template-columns:repeat(2,minmax(210px,300px));justify-content:center}
}

/* Mobile: countdown first, then two compact game cards with readable captions. */
@media(max-width:1023px){
.countdown-game-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"clock clock" "hatverse arcade";align-items:stretch;gap:16px 12px;width:calc(100% - 32px);max-width:640px;margin:24px auto 32px}
.countdown-game-row .mystery-clock{grid-area:clock;width:100%;margin:0 0 4px;box-sizing:border-box}
.hatverse-teaser{grid-area:hatverse;cursor:pointer}
.arcade-teaser{grid-area:arcade}
.countdown-game-tile{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #ffe63145;border-radius:13px;background:#111510;color:#fff;text-decoration:none}
.countdown-game-tile>.countdown-tile-art,.arcade-tile-scene{display:block;position:relative;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;flex:none;overflow:hidden}
.arcade-tile-scene>.countdown-tile-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arcade-tile-cat{position:absolute;left:25%;top:5%;width:50%;height:90%;object-fit:contain;image-rendering:pixelated}
.countdown-tile-copy{display:flex;flex-direction:column;flex:1;padding:12px;gap:6px;min-width:0}
.tile-kicker{display:block;color:#e6d994;font-size:12px;line-height:1.4;letter-spacing:.035em;font-weight:600}
.countdown-tile-copy h2{font-size:clamp(20px,5vw,28px);line-height:1.1;margin:0 0 5px;letter-spacing:0;overflow-wrap:normal}
.tile-status{display:flex;align-items:center;gap:6px;margin-top:auto;color:#ffe631;font-size:14px;line-height:1.4;font-weight:600}
.tile-status svg{width:18px;height:18px;flex:none}
.arcade-teaser:active{background:#222819;border-color:#ffe631}
.arcade-teaser:focus-visible{outline:3px solid #ffe631;outline-offset:4px}
.countdown-game-row:has(.mystery-clock[hidden]){grid-template-areas:"hatverse arcade"}
}

.clock-teaser{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;margin:8px 0 0;padding:8px 6px 0;font-size:14px;line-height:1.5;color:#d8d5cc}
.clock-teaser .clock-date{font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.24em;color:var(--seasonal-accent)}
.arcade-teaser#arcade{scroll-margin-top:130px}
@media(max-width:480px){.clock-teaser{margin-top:10px;font-size:14px;padding-inline:12px}}

.hatverse-teaser{cursor:pointer;transition:border-color .2s,box-shadow .2s}
.hatverse-teaser:hover{border-color:#ffe631;box-shadow:0 0 24px #ffe63120}
.hatverse-teaser:focus-visible{outline:3px solid #ffe631;outline-offset:5px}
.hatverse-teaser:active{background:#222819;border-color:#ffe631}