/* ==========================================================================
   COZYHOUSE SMP — SPATIAL UI & 3D BREAKOUT DESIGN SYSTEM (GPU-OPTIMIZED)
   ========================================================================== */

:root {
    --bg-dark-base: #040a07;
    --mint-bright: #6ee7b7;
    --emerald-primary: #34d399;
    --riolu-blue: #38bdf8;
    --finest-amber: #fbbf24;
}

/* Base Spatial Environment */
body {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-dark-base);
    background-image: 
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(52, 211, 153, 0.14), transparent 70%),
        radial-gradient(rgba(110, 231, 183, 0.045) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px;
}

h1, h2, h3, .font-display {
    font-family: 'Chakra Petch', sans-serif;
    letter-spacing: -0.01em;
}

.font-pixel {
    font-family: 'Silkscreen', 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #040907;
}

::-webkit-scrollbar-thumb {
    background: #0f3826;
    border-radius: 9999px;
    border: 1px solid rgba(110, 231, 183, 0.3);
}

::-webkit-scrollbar-thumb:hover {
    background: #34d399;
}

/* ==========================================================================
   PERFORMANCE: CONTENT-VISIBILITY FOR BELOW-THE-FOLD SECTIONS
   ========================================================================== */

/* content-visibility removed: placeholder heights made ScrollTrigger measure the
   pinned builds reel and the sections below it in the wrong place. */

/* ==========================================================================
   SPATIAL UI GLASS SURFACES & SPECULAR RIM LIGHTING
   ========================================================================== */

/* Primary Spatial Glass Surface (VisionOS-style Specular Rim + Depth Shadow) */
.hud-panel {
    position: relative;
    background: linear-gradient(
        160deg,
        rgba(18, 46, 33, 0.72) 0%,
        rgba(9, 25, 18, 0.84) 55%,
        rgba(5, 15, 11, 0.92) 100%
    );
    border: 1px solid rgba(167, 243, 208, 0.22);
    border-radius: 26px;
    box-shadow: 
        0 24px 48px -12px rgba(0, 0, 0, 0.72),
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1.5px 0 0 rgba(255, 255, 255, 0.28),
        inset 1px 0 0 0 rgba(167, 243, 208, 0.14),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.5);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

/* Floating Spatial Pill Dock (Top Navbar) */
.spatial-dock {
    background: linear-gradient(
        180deg,
        rgba(16, 42, 30, 0.78) 0%,
        rgba(7, 20, 14, 0.88) 100%
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(167, 243, 208, 0.28);
    border-radius: 9999px;
    box-shadow: 
        0 20px 50px -10px rgba(0, 0, 0, 0.78),
        0 0 30px rgba(16, 185, 129, 0.12),
        inset 0 1.5px 0 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.45);
}

/* Subtle Spatial Glare / Specular Sheen instead of flat scanlines */
.hud-scanlines {
    background-image: radial-gradient(
        120% 80% at 15% 0%,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 60%
    );
}

/* Clean Spatial Corner Accents */
.hud-brackets {
    position: relative;
}

/* Notched / Chamfered Spatial Ticket Cutout */
.hud-notched-ticket {
    -webkit-mask-image: 
        radial-gradient(circle at 0% 50%, transparent 10px, black 11px),
        radial-gradient(circle at 100% 50%, transparent 10px, black 11px);
    -webkit-mask-composite: destination-in;
    mask-image: 
        radial-gradient(circle at 0% 50%, transparent 10px, black 11px),
        radial-gradient(circle at 100% 50%, transparent 10px, black 11px);
    mask-composite: intersect;
}

/* ==========================================================================
   SPATIAL 3D TACTILE PILL & GLASS BUTTONS
   ========================================================================== */

.game-btn-primary {
    position: relative;
    background: linear-gradient(180deg, #6ee7b7 0%, #10b981 100%);
    color: #03140c;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid #d1fae5;
    border-radius: 16px;
    box-shadow: 
        0 10px 24px -4px rgba(16, 185, 129, 0.45),
        0 4px 0 #065f46,
        inset 0 1.5px 0 rgba(255, 255, 255, 0.65);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, filter 0.2s ease;
}

.game-btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-3px) scale(1.01);
    box-shadow: 
        0 16px 32px -4px rgba(110, 231, 183, 0.55),
        0 6px 0 #065f46,
        inset 0 1.5px 0 rgba(255, 255, 255, 0.8);
}

.game-btn-primary:active {
    transform: translateY(2px);
    box-shadow: 
        0 4px 12px rgba(16, 185, 129, 0.35),
        0 1px 0 #065f46;
}

/* Spatial 3D Aura Blue Button for Riolu Card */
.game-btn-blue {
    position: relative;
    background: linear-gradient(180deg, #7dd3fc 0%, #0284c7 100%);
    color: #021824;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid #e0f2fe;
    border-radius: 16px;
    box-shadow: 
        0 10px 24px -4px rgba(14, 165, 233, 0.45),
        0 4px 0 #075985,
        inset 0 1.5px 0 rgba(255, 255, 255, 0.65);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, filter 0.2s ease;
}

.game-btn-blue:hover {
    filter: brightness(1.06);
    transform: translateY(-3px) scale(1.01);
    box-shadow: 
        0 16px 32px -4px rgba(56, 189, 248, 0.6),
        0 6px 0 #075985,
        inset 0 1.5px 0 rgba(255, 255, 255, 0.8);
}

.game-btn-blue:active {
    transform: translateY(2px);
    box-shadow: 
        0 4px 12px rgba(14, 165, 233, 0.35),
        0 1px 0 #075985;
}

.game-btn-secondary {
    position: relative;
    background: linear-gradient(165deg, rgba(20, 54, 38, 0.78) 0%, rgba(8, 24, 17, 0.9) 100%);
    color: #d1fae5;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    border: 1px solid rgba(167, 243, 208, 0.35);
    border-radius: 16px;
    box-shadow: 
        0 12px 28px -6px rgba(0, 0, 0, 0.6),
        0 4px 0 rgba(3, 16, 10, 0.95),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.game-btn-secondary:hover {
    border-color: #6ee7b7;
    transform: translateY(-3px) scale(1.01);
    box-shadow: 
        0 16px 34px -6px rgba(110, 231, 183, 0.28),
        0 6px 0 rgba(3, 16, 10, 0.95),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.4);
}

.game-btn-secondary:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(3, 16, 10, 0.95);
}

/* ==========================================================================
   SPATIAL 3D BREAKOUT CHARACTER SELECT CARDS
   ========================================================================== */

.trainer-roster {
    perspective: 1000px;
}

#creatorCardLeftScroll,
#creatorCardCenterScroll,
#creatorCardRightScroll,
.creator-avatar-scroll-stage,
#rioluScrollStage,
.riolu-idle-stage {
    transform-style: preserve-3d;
}

/* Outer Wrapper allows 3D overflow so characters float cleanly in front of the glass pane.
   IMPORTANT: Never set opacity < 1 or transition: transform here — opacity < 1 forces
   transform-style: flat per W3C spec (causing a 3D snap), and JS rAF lerp handles smooth 3D motion. */
.trainer-card {
    position: relative;
    overflow: visible !important;
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    z-index: 10;
}

.trainer-card:hover {
    z-index: 30;
}

/* Inner Clipped Spatial Glass Chassis */
.trainer-chassis {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(
        165deg,
        rgba(16, 46, 32, 0.8) 0%,
        rgba(7, 22, 15, 0.9) 60%,
        rgba(4, 13, 9, 0.96) 100%
    );
    border: 1.5px solid rgba(0, 255, 163, 0.28);
    box-shadow: 
        0 28px 60px -12px rgba(0, 0, 0, 0.82),
        0 6px 0 rgba(4, 24, 16, 0.95),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.3),
        inset 1px 0 0 rgba(0, 255, 163, 0.15);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Dynamic Border Glow: Cyan/Teal #00FFA3 for ShoCkZ */
.trainer-card--mint:hover .trainer-chassis {
    border-color: rgba(0, 255, 163, 0.85) !important;
    box-shadow: 
        0 32px 65px -10px rgba(0, 255, 163, 0.45),
        0 0 28px rgba(0, 255, 163, 0.35),
        0 6px 0 #065f46,
        inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
        inset 0 0 34px rgba(0, 255, 163, 0.2);
}

.trainer-card--amber .trainer-chassis {
    border-color: rgba(255, 184, 0, 0.32);
    background: linear-gradient(
        165deg,
        rgba(42, 28, 9, 0.82) 0%,
        rgba(22, 14, 5, 0.92) 60%,
        rgba(12, 8, 3, 0.96) 100%
    );
    box-shadow: 
        0 28px 60px -12px rgba(0, 0, 0, 0.82),
        0 6px 0 rgba(45, 26, 4, 0.95),
        inset 0 1.5px 0 rgba(254, 243, 199, 0.3),
        inset 1px 0 0 rgba(255, 184, 0, 0.15);
}

/* Dynamic Border Glow: Amber Gold #FFB800 for Finest */
.trainer-card--amber:hover .trainer-chassis {
    border-color: rgba(255, 184, 0, 0.88) !important;
    box-shadow: 
        0 32px 65px -10px rgba(255, 184, 0, 0.46),
        0 0 28px rgba(255, 184, 0, 0.36),
        0 6px 0 #92400e,
        inset 0 1.5px 0 rgba(254, 243, 199, 0.5),
        inset 0 0 34px rgba(255, 184, 0, 0.22);
}

.trainer-card--partner .trainer-chassis {
    border-color: rgba(0, 163, 255, 0.35);
    background: linear-gradient(
        165deg,
        rgba(12, 42, 62, 0.82) 0%,
        rgba(6, 22, 35, 0.92) 60%,
        rgba(3, 12, 20, 0.96) 100%
    );
    box-shadow: 
        0 28px 60px -12px rgba(0, 0, 0, 0.82),
        0 6px 0 rgba(6, 38, 60, 0.95),
        inset 0 1.5px 0 rgba(224, 242, 254, 0.32),
        inset 1px 0 0 rgba(0, 163, 255, 0.18);
}

/* Dynamic Border Glow: Deep Blue #00A3FF for Center CozyHouse Card */
.trainer-card--partner:hover .trainer-chassis {
    border-color: rgba(0, 163, 255, 0.88) !important;
    box-shadow: 
        0 32px 65px -10px rgba(0, 163, 255, 0.48),
        0 0 30px rgba(0, 163, 255, 0.38),
        0 6px 0 #0369a1,
        inset 0 1.5px 0 rgba(224, 242, 254, 0.52),
        inset 0 0 36px rgba(0, 163, 255, 0.24);
}

/* Filter-Free Radial Glow Halos behind 3D Breakout Avatars (Zero GPU filter flattening!) */
.avatar-glow {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.avatar-glow--mint {
    background: radial-gradient(circle, rgba(0, 255, 163, 0.38) 0%, rgba(16, 185, 129, 0.14) 45%, transparent 72%);
}

.avatar-glow--blue {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(0, 163, 255, 0.44) 0%, rgba(14, 165, 233, 0.16) 45%, transparent 72%);
}

.avatar-glow--amber {
    background: radial-gradient(circle, rgba(255, 184, 0, 0.38) 0%, rgba(245, 158, 11, 0.14) 45%, transparent 72%);
}

/* Breakout Avatar / Character Pedestal (Controlled synchronously in 3D via rAF lerp) */
.breakout-avatar-stage {
    position: relative;
    margin-top: -3.25rem;
    z-index: 35;
    pointer-events: none;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 28px);
}

/* Riolu Full-Body Breakout Stage */
.riolu-breakout-figure {
    position: relative;
    margin-top: -4.5rem;
    margin-bottom: -0.5rem;
    z-index: 40;
    pointer-events: none;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 34px);
}

.riolu-img {
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 22px rgba(56, 189, 248, 0.45));
}

/* Holographic Pedestal Ring under Breakout Characters */
.holo-pedestal-ring {
    width: 140px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(110, 231, 183, 0.45) 0%, rgba(16, 185, 129, 0.15) 55%, transparent 75%);
    border: 1px solid rgba(110, 231, 183, 0.5);
    box-shadow: 0 0 18px rgba(110, 231, 183, 0.35);
    transform: rotateX(65deg);
}

.holo-pedestal-ring--blue {
    background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.5) 0%, rgba(14, 165, 233, 0.18) 55%, transparent 75%);
    border-color: rgba(125, 211, 252, 0.6);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

.holo-pedestal-ring--amber {
    background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.45) 0%, rgba(245, 158, 11, 0.15) 55%, transparent 75%);
    border-color: rgba(251, 191, 36, 0.55);
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.35);
}

/* Spatial Pill Social Buttons inside Trainer Cards */
.social-slot-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.95rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(14, 38, 27, 0.75) 0%, rgba(6, 18, 13, 0.9) 100%);
    border: 1px solid rgba(167, 243, 208, 0.22);
    box-shadow: 
        0 6px 14px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, border-color 0.2s ease, background 0.2s ease;
}

.social-slot-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 10px 20px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.social-slot-btn:active {
    transform: translateY(1px);
}

/* Stat Bar Segmented Fill */
.stat-bar-track {
    height: 8px;
    border-radius: 9999px;
    background: rgba(3, 10, 7, 0.9);
    border: 1px solid rgba(110, 231, 183, 0.22);
    overflow: hidden;
    position: relative;
}

.stat-bar-fill {
    height: 100%;
    background-image: repeating-linear-gradient(
        90deg,
        currentColor 0px,
        currentColor 8px,
        transparent 8px,
        transparent 10px
    );
}

/* ==========================================================================
   GPU-OPTIMIZED AMBIENT ORBS, LIGHTNING & SPOTLIGHT
   ========================================================================== */

@keyframes bounceSubtle {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -4px, 0); }
}

.animate-bounce-subtle {
    animation: bounceSubtle 3.5s ease-in-out infinite;
}

.backdrop-blur-xl {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.backdrop-blur-2xl {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Spatial Card Tile Container */
[data-lightning-card] {
    position: relative;
    overflow: hidden !important;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

[data-lightning-card]:hover {
    border-color: transparent !important;
    box-shadow: 
        0 28px 55px -10px rgba(0, 0, 0, 0.8),
        0 0 28px rgba(110, 231, 183, 0.22),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.38);
}

[data-lightning-card][data-lightning-color="blue"]:hover {
    box-shadow: 
        0 28px 55px -10px rgba(0, 0, 0, 0.8),
        0 0 34px rgba(56, 189, 248, 0.38),
        inset 0 1.5px 0 rgba(224, 242, 254, 0.45);
}

[data-lightning-card][data-lightning-color="amber"]:hover {
    box-shadow: 
        0 28px 55px -10px rgba(0, 0, 0, 0.8),
        0 0 34px rgba(251, 191, 36, 0.38),
        inset 0 1.5px 0 rgba(254, 243, 199, 0.45);
}

/* Subtle Pale Mint Glow Ring for ShoCkZ PFP */
.pfp-glow-ring {
    border-radius: 9999px !important;
    border: 2px solid rgba(110, 231, 183, 0.65) !important;
    box-shadow: 0 0 12px rgba(110, 231, 183, 0.4) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.pfp-glow-ring:hover {
    border-color: #6ee7b7 !important;
    box-shadow: 0 0 18px rgba(110, 231, 183, 0.65) !important;
    transform: scale(1.05) !important;
}

/* Full Static Neon Lightning Canvas Layer */
.lightning-card-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 25;
    mix-blend-mode: screen;
    border-radius: inherit;
    transition: opacity 0.25s ease;
}

/* Smooth Focus States for Accessibility */
a:focus-visible, button:focus-visible {
    outline: 2px solid #34d399;
    outline-offset: 3px;
}

/* Prefers Reduced Motion Accessibility Handling */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    #tsparticles {
        display: none !important;
    }
}

/* GPU-Accelerated Ambient Orbs (Uses soft radial-gradients instead of expensive CSS blur(130px) filter!) */
@keyframes drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(35px, -40px, 0) scale(1.08); }
}
@keyframes drift-slow {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-35px, 45px, 0) scale(1.05); }
}
@keyframes drift-reverse {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(30px, 30px, 0) scale(1.06); }
}

.orb {
    will-change: transform;
    contain: layout paint;
    filter: none !important; /* Eliminates heavy per-frame Gaussian blur pass */
}

.orb-diamond-blue {
    top: 6%;
    left: 5%;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(80, 220, 255, 0.14) 0%, rgba(80, 220, 255, 0.05) 40%, transparent 70%);
}

.orb-sculk-teal {
    top: 36%;
    right: 4%;
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(0, 150, 160, 0.18) 0%, rgba(0, 150, 160, 0.06) 42%, transparent 70%);
}

.orb-emerald-green {
    bottom: 6%;
    left: 24%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 160, 90, 0.16) 0%, rgba(0, 160, 90, 0.05) 42%, transparent 70%);
}

.animate-drift {
    animation: drift 18s infinite ease-in-out;
}
.animate-drift-slow {
    animation: drift-slow 22s infinite ease-in-out;
}
.animate-drift-reverse {
    animation: drift-reverse 25s infinite ease-in-out reverse;
}

/* Spatial Specular Cursor Spotlight Effect */
.glass-card-spotlight {
    position: relative;
    overflow: hidden;
}

.glass-card-spotlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 0%), 
        rgba(255, 255, 255, 0.09),
        transparent 45%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 10;
}

.glass-card-spotlight:hover::before {
    opacity: 1;
}

/* Copy Button Shatter Animation */
@keyframes shatter {
    0% { transform: scale(1) rotate(0); }
    25% { transform: scale(1.05) rotate(1.2deg) translate3d(2px, -2px, 0); }
    50% { transform: scale(1.05) rotate(-1.2deg) translate3d(-2px, 2px, 0); }
    75% { transform: scale(0.97) rotate(0.5deg); }
    100% { transform: scale(1) rotate(0); }
}

.animate-shatter {
    animation: shatter 0.35s ease-out;
}

/* FAQ height is now handled by the grid-rows accordion in the PARALLAX PASS block. */

/* Native Spatial Dialog Modal & Backdrop */
dialog.spatial-dialog {
    background: transparent;
    border: none;
    padding: 0;
    max-width: 34rem;
    width: calc(100% - 2rem);
    color: inherit;
    margin: auto;
}

dialog.spatial-dialog::backdrop {
    background-color: rgba(2, 8, 5, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Sticky Mobile Bottom CTA Dock */
.sticky-mobile-cta {
    transform: translate3d(0, 140%, 0);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sticky-mobile-cta.is-visible {
    transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   CINEMATIC HERO INTRO & SCROLL-DRIVEN DYNAMICS (APPLE / LINEAR / AWWWARDS)
   ========================================================================== */

/* Base Neon Glow on "COBBLEVERSE SANCTUARY" */
.hero-word-neon {
    filter: drop-shadow(0 0 32px rgba(110, 231, 183, 0.42));
}

/* Momentary Teal/Cyan Neon Bloom Flash when "COBBLEVERSE SANCTUARY" locks into place */
@keyframes neonBloomLock {
    0% {
        filter: drop-shadow(0 0 32px rgba(110, 231, 183, 0.42)) brightness(1);
    }
    35% {
        filter: drop-shadow(0 0 58px rgba(45, 212, 191, 1)) drop-shadow(0 0 24px rgba(103, 232, 249, 0.95)) brightness(1.38);
    }
    100% {
        filter: drop-shadow(0 0 32px rgba(110, 231, 183, 0.45)) brightness(1);
    }
}

.neon-bloom-flash {
    animation: neonBloomLock 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Gentle Glowing Border Pulse once Small Top Pill Badge lands */
@keyframes badgeBorderPulse {
    0%, 100% {
        border-color: rgba(110, 231, 183, 0.35);
        box-shadow:
            0 20px 45px -12px rgba(0, 0, 0, 0.78),
            0 0 12px rgba(110, 231, 183, 0.12),
            inset 0 1.5px 0 rgba(255, 255, 255, 0.28);
    }
    50% {
        border-color: rgba(110, 231, 183, 0.85);
        box-shadow:
            0 20px 45px -12px rgba(0, 0, 0, 0.78),
            0 0 28px rgba(45, 212, 191, 0.42),
            inset 0 1.5px 0 rgba(255, 255, 255, 0.48);
    }
}

.hero-badge-landed {
    animation: badgeBorderPulse 3.2s ease-in-out infinite;
}

/* Interactive Glass Sheen Sweep Effect on Action Buttons */
.glass-sheen-btn {
    overflow: hidden;
}

.glass-sheen-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -135%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.38) 50%,
        transparent 100%
    );
    transform: skewX(-24deg);
    transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.glass-sheen-btn:hover::after {
    left: 145%;
}

/* Dual-Tone Ambient Backlight behind "SHOCKZ & FINEST" Header (Cyan #00FFA3 Left / Gold #FFB800 Right) */
.creators-title-backlight {
    position: absolute;
    width: 380px;
    height: 85px;
    border-radius: 9999px;
    background: linear-gradient(
        90deg,
        rgba(0, 255, 163, 0.34) 0%,
        rgba(0, 163, 255, 0.16) 50%,
        rgba(255, 184, 0, 0.34) 100%
    );
    filter: blur(26px);
    opacity: 0;
    transform: scale(0.75);
    z-index: -1;
}

/* Continuous Subtle Floating Idle Animation on Riolu (translateY: [0, -6px, 0] over 3.5s ease-in-out infinite) */
@keyframes rioluIdleFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -6px, 0);
    }
}

.riolu-idle-active {
    animation: rioluIdleFloat 3.5s ease-in-out infinite;
}

/* Progressive Enhancement: Native CSS Scroll-Driven Section Entry Effects (Modern Web Guidance) */
/* sectionRiseIn removed: one identical entrance on every section. Lists now reveal via GSAP batch. */

/* ==========================================================================
   BUILDERS SECTION: ANGEL (WHITE & PINK) & SPEEDY (BLACK & WHITE) + MODAL
   ========================================================================== */

#builderCardAngelScroll,
#builderCardSpeedyScroll {
    transform-style: preserve-3d;
}

.builders-title-backlight {
    position: absolute;
    width: 360px;
    height: 80px;
    border-radius: 9999px;
    background: linear-gradient(
        90deg,
        rgba(244, 114, 182, 0.36) 0%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(161, 161, 170, 0.34) 100%
    );
    filter: blur(26px);
    opacity: 0.85;
    z-index: -1;
}

/* Angel: White & Pink Blend Avatar & Chassis */
.builder-avatar-pink {
    background: linear-gradient(145deg, #ffffff 0%, #fbcfe8 38%, #ec4899 78%, #831843 100%);
}

.avatar-glow--pink {
    background: radial-gradient(circle, rgba(249, 168, 212, 0.5) 0%, rgba(255, 255, 255, 0.22) 42%, transparent 72%);
}

.holo-pedestal-ring--pink {
    background: radial-gradient(ellipse at center, rgba(249, 168, 212, 0.55) 0%, rgba(255, 255, 255, 0.22) 55%, transparent 75%);
    border-color: rgba(251, 207, 232, 0.7);
    box-shadow: 0 0 20px rgba(244, 114, 182, 0.45);
}

.builder-chassis--pink {
    border-color: rgba(251, 207, 232, 0.48);
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(244, 114, 182, 0.32) 48%,
        rgba(38, 10, 26, 0.94) 100%
    );
    box-shadow:
        0 28px 60px -12px rgba(0, 0, 0, 0.82),
        0 6px 0 rgba(74, 14, 46, 0.95),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
        inset 1px 0 0 rgba(251, 207, 232, 0.3);
}

.builder-card--pink:hover .builder-chassis--pink {
    border-color: rgba(251, 207, 232, 0.95) !important;
    box-shadow:
        0 32px 65px -10px rgba(244, 114, 182, 0.5),
        0 0 32px rgba(251, 207, 232, 0.42),
        0 6px 0 #9d174d,
        inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
        inset 0 0 38px rgba(244, 114, 182, 0.26);
}

.game-btn-pink {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fbcfe8 48%, #f472b6 100%);
    color: #4a0424;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid #ffffff;
    border-radius: 16px;
    box-shadow:
        0 10px 24px -4px rgba(244, 114, 182, 0.5),
        0 4px 0 #9d174d,
        inset 0 1.5px 0 rgba(255, 255, 255, 0.9);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, filter 0.2s ease;
}

.game-btn-pink:hover {
    filter: brightness(1.05);
    transform: translateY(-2px) scale(1.01);
    box-shadow:
        0 16px 32px -4px rgba(249, 168, 212, 0.65),
        0 6px 0 #9d174d,
        inset 0 1.5px 0 #ffffff;
}

/* Speedy: Black & White Monochrome Blend Avatar & Chassis */
.builder-avatar-mono {
    background: linear-gradient(145deg, #ffffff 0%, #d4d4d8 32%, #27272a 72%, #050507 100%);
}

.avatar-glow--mono {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(161, 161, 170, 0.18) 45%, transparent 72%);
}

.holo-pedestal-ring--mono {
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(161, 161, 170, 0.18) 55%, transparent 75%);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.38);
}

.builder-chassis--mono {
    border-color: rgba(255, 255, 255, 0.42);
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(39, 39, 42, 0.86) 48%,
        rgba(5, 5, 7, 0.96) 100%
    );
    box-shadow:
        0 28px 60px -12px rgba(0, 0, 0, 0.88),
        0 6px 0 rgba(24, 24, 27, 0.98),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
        inset 1px 0 0 rgba(255, 255, 255, 0.22);
}

.builder-card--mono:hover .builder-chassis--mono {
    border-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow:
        0 32px 65px -10px rgba(255, 255, 255, 0.36),
        0 0 30px rgba(255, 255, 255, 0.32),
        0 6px 0 #3f3f46,
        inset 0 1.5px 0 rgba(255, 255, 255, 0.8),
        inset 0 0 36px rgba(255, 255, 255, 0.18);
}

.game-btn-mono {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #e4e4e7 52%, #a1a1aa 100%);
    color: #09090b;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid #ffffff;
    border-radius: 16px;
    box-shadow:
        0 10px 24px -4px rgba(255, 255, 255, 0.35),
        0 4px 0 #3f3f46,
        inset 0 1.5px 0 #ffffff;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, filter 0.2s ease;
}

.game-btn-mono:hover {
    filter: brightness(1.06);
    transform: translateY(-2px) scale(1.01);
    box-shadow:
        0 16px 32px -4px rgba(255, 255, 255, 0.5),
        0 6px 0 #52525b,
        inset 0 1.5px 0 #ffffff;
}

/* Builder Showcase Dialog Modal */
dialog.builder-showcase-dialog {
    max-width: 48rem;
    width: calc(100% - 1.5rem);
}

.builder-modal-chassis {
    border-radius: 28px;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.builder-modal--pink {
    background: linear-gradient(
        155deg,
        rgba(255, 240, 248, 0.18) 0%,
        rgba(131, 24, 67, 0.86) 45%,
        rgba(24, 6, 16, 0.97) 100%
    );
    border: 1.5px solid rgba(251, 207, 232, 0.55);
    box-shadow:
        0 35px 80px -12px rgba(0, 0, 0, 0.9),
        0 0 45px rgba(244, 114, 182, 0.32),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.55);
}

.builder-modal--mono {
    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(39, 39, 42, 0.9) 45%,
        rgba(7, 7, 9, 0.98) 100%
    );
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 35px 80px -12px rgba(0, 0, 0, 0.92),
        0 0 45px rgba(255, 255, 255, 0.24),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.55);
}

/* Builder Showcase Image Slider & Ken Burns Drift */
.builder-slide-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.0);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 5s linear, visibility 0.8s;
    will-change: transform, opacity;
}

.builder-slide-item.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1.05);
}

.builder-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Constant Auto-Shift Progress Bar */
.builder-slide-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #f472b6, #ffffff);
    box-shadow: 0 0 10px rgba(244, 114, 182, 0.8);
    z-index: 30;
    transition: width 0.1s linear;
}

.builder-modal--mono .builder-slide-progress-bar {
    background: linear-gradient(90deg, #a1a1aa, #ffffff);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Active Slot Highlight */
.builder-thumb-btn.is-active {
    border-color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 0 18px rgba(244, 114, 182, 0.35);
}

.builder-modal--mono .builder-thumb-btn.is-active {
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   THE BLUEPRINT ASSEMBLY: CREATORS TO BUILDERS TRANSITION
   ========================================================================== */

/* Isometric Blueprint Wireframe Floor */
.blueprint-grid-floor {
    position: absolute;
    bottom: -60px;
    left: -15%;
    right: -15%;
    height: 380px;
    background-image: 
        linear-gradient(to right, rgba(0, 245, 255, 0.18) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 245, 255, 0.18) 1px, transparent 1px);
    background-size: 36px 36px;
    transform: perspective(600px) rotateX(68deg);
    transform-origin: bottom center;
    mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, black 25%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, black 25%, transparent 85%);
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    will-change: opacity, transform;
}

/* Builder Section Title Clip-Path Wrapper & Neon Laser Scanline */
.builders-title-clip-wrapper {
    position: relative;
    display: inline-block;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    will-change: clip-path;
}

.builder-laser-scanline {
    position: absolute;
    top: -15%;
    bottom: -15%;
    width: 3px;
    left: 0;
    background: linear-gradient(180deg, transparent, #00f5ff, #ffffff, #f472b6, transparent);
    box-shadow: 0 0 14px #00f5ff, 0 0 24px #f472b6;
    pointer-events: none;
    opacity: 0;
    z-index: 25;
    will-change: transform, opacity;
}

/* Holographic Blueprint Wireframe Hover Overlay */
.holographic-wireframe-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        radial-gradient(rgba(0, 245, 255, 0.15) 1.2px, transparent 0),
        linear-gradient(to right, rgba(0, 245, 255, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 245, 255, 0.08) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 6;
    mix-blend-mode: screen;
}

.trainer-card:hover .holographic-wireframe-overlay {
    opacity: 0.6;
}

/* Voxel Lock Pulse Ring */
.voxel-lock-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 28px;
    opacity: 0;
    pointer-events: none;
    z-index: 15;
}

/* Angel: Neon Pink Explosion Ring */
.voxel-lock-pulse--pink {
    border: 2.5px solid #f472b6;
    box-shadow: 
        0 0 35px rgba(244, 114, 182, 0.95),
        0 0 70px rgba(236, 72, 153, 0.6),
        inset 0 0 25px rgba(244, 114, 182, 0.5);
}

/* Speedy: Stark Obsidian Black & Chrome Contrast Explosion Ring */
.voxel-lock-pulse--mono,
.voxel-lock-pulse--black {
    border: 2px solid #ffffff;
    box-shadow: 
        0 0 40px rgba(0, 0, 0, 0.98),
        0 0 65px rgba(0, 0, 0, 0.95),
        0 0 16px rgba(255, 255, 255, 0.8),
        inset 0 0 32px rgba(0, 0, 0, 0.98),
        inset 0 0 10px rgba(255, 255, 255, 0.45);
}

/* Floating Voxel Spark Cubes */
.builder-spark-cube {
    position: absolute;
    pointer-events: none;
    border-radius: 2px;
    z-index: 25;
    will-change: transform, opacity;
}

.builder-spark-cube--pink {
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.95), 0 0 22px rgba(236, 72, 153, 0.7);
}

.builder-spark-cube--black {
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.98), 0 0 6px rgba(255, 255, 255, 0.5);
}







/* ==========================================================================
   PARALLAX PASS (2026-10-16)
   Motion thesis: scrolling = walking into the Cobbleverse forest.
   Tokens from transitions.dev; scroll choreography lives in script.js (GSAP).
   ========================================================================== */
:root {
    --duration-stagger: 40ms;
    --duration-quick: 150ms;
    --duration-fast: 250ms;
    --duration-medium: 350ms;
    --duration-very-slow: 500ms;
    --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
    --blur-small: 2px;
    --forest-ink: #040a07;
    --mint-line: rgba(110, 231, 183, 0.22);
}

/* --- Browser surfaces -------------------------------------------------- */
html { scrollbar-color: #1d5a3f #040907; scrollbar-width: thin; }
::selection { background: #34d399; color: #031008; }
:focus-visible { outline: 2px solid #34d399; outline-offset: 3px; }
.faq-btn:focus-visible { outline-offset: -4px; border-radius: 1rem; }

/* --- Scroll progress hairline ----------------------------------------- */
.scroll-progress {
    position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none;
}
.scroll-progress__bar {
    display: block; height: 100%; width: 100%;
    background: linear-gradient(90deg, #34d399, #6ee7b7 60%, #a7f3d0);
    transform: scaleX(0); transform-origin: 0 50%;
    box-shadow: 0 1px 8px rgba(52, 211, 153, 0.55);
}

/* --- Forest scene ------------------------------------------------------ */
/* Lighter veil than before so the forest actually reads behind the hero. */
.forest-veil {
    background:
        radial-gradient(120% 80% at 50% 38%, rgba(4, 10, 7, 0.10) 0%, rgba(4, 10, 7, 0.55) 62%, rgba(4, 10, 7, 0.92) 100%),
        linear-gradient(to bottom, rgba(4, 10, 7, 0.55) 0%, rgba(7, 22, 15, 0.25) 35%, rgba(4, 10, 7, 0.75) 100%);
}
.forest-near-wrap { overflow: hidden; }
.forest-near {
    position: absolute; inset: -4%;
    width: 108%; height: 108%;
    object-fit: cover; object-position: center;
    transform-origin: 50% 46%;
    will-change: transform, opacity;
}
/* Default (no JS / reduced motion): shade sits at reading darkness. JS scrubs it from 0 in the hero. */
.forest-shade { background: var(--forest-ink); opacity: 0.72; will-change: opacity; }
.motion-ok .forest-shade { opacity: 0; }

/* --- Hero stage -------------------------------------------------------- */
.hero-stage {
    min-height: calc(100svh - 92px);
    display: flex; flex-direction: column; justify-content: center;
    padding-top: clamp(1.5rem, 4vh, 3rem); padding-bottom: clamp(5rem, 12vh, 8rem);
}
.hero-stage h1 { text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.hero-scroll-cue {
    position: absolute; left: 50%; bottom: clamp(1rem, 4vh, 2.25rem);
    transform: translateX(-50%);
    display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem;
    color: rgba(167, 243, 208, 0.75); text-decoration: none;
    font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
    transition: color var(--duration-fast) var(--ease-smooth-out);
}
.hero-scroll-cue:hover { color: #d1fae5; }
.hero-scroll-cue__track {
    width: 22px; height: 34px; border-radius: 999px;
    border: 1.5px solid rgba(110, 231, 183, 0.45);
    display: flex; justify-content: center; padding-top: 6px;
}
.hero-scroll-cue__dot {
    width: 4px; height: 7px; border-radius: 4px; background: #6ee7b7;
    animation: scrollCueDot 1.8s var(--ease-smooth-out) infinite;
}
@keyframes scrollCueDot {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    70% { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(12px); opacity: 0; }
}

/* --- Section headings: room to drift ---------------------------------- */
.section-heading { text-wrap: balance; }
.motion-ok .section-heading { will-change: transform; }

/* --- Builds reel ------------------------------------------------------- */
.builds-reel { position: relative; padding: 4.5rem 0 3rem; }
.builds-pin {
    position: relative;
    display: flex; flex-direction: column; justify-content: center; gap: clamp(1.25rem, 3vh, 2rem);
}
.builds-head { padding: 0 clamp(1rem, 5vw, 4rem); max-width: 72rem; margin: 0 auto; width: 100%; }
.builds-title {
    font-family: 'Chakra Petch', sans-serif; font-weight: 700; text-transform: uppercase;
    font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.02; letter-spacing: -0.01em; color: #fff;
}
.builds-title__name { color: #f9a8d4; text-shadow: 0 3px 18px rgba(244, 114, 182, 0.35); }
.builds-sub { margin-top: 0.6rem; color: #c8d6cf; font-size: clamp(0.95rem, 1.4vw, 1.05rem); max-width: 42ch; }

/* Default: a native scroll-snap row (works with no JS and with reduced motion) */
.builds-viewport {
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 0.5rem clamp(1rem, 5vw, 4rem) 1rem;
}
.builds-viewport::-webkit-scrollbar { display: none; }
.builds-track { display: flex; gap: clamp(1rem, 2.5vw, 2rem); width: max-content; list-style: none; margin: 0; padding: 0; }
.build-panel { scroll-snap-align: center; flex: none; width: min(78vw, 108vh, 980px); }
.build-figure { margin: 0; }
.build-frame {
    position: relative; overflow: hidden; border-radius: 1.25rem;
    aspect-ratio: 16 / 9.25;
    border: 1px solid rgba(249, 168, 212, 0.25);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.85), 0 10px 24px -12px rgba(0, 0, 0, 0.7);
    background: #0b1510;
}
.build-frame::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(4, 10, 7, 0.55), transparent 38%);
}
.build-img {
    position: absolute; top: 0; left: -8%;
    width: 116%; height: 100%; max-width: none;
    object-fit: cover; will-change: transform;
}
.build-caption {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 0.9rem 0.25rem 0;
}
.build-caption__name { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: #fff; }
.build-caption__by { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #f9a8d4; }
.builds-progress {
    margin: 0 auto; width: min(240px, 50vw); height: 3px; border-radius: 3px;
    background: rgba(255, 255, 255, 0.1); overflow: hidden; display: none;
}
.builds-progress__bar { display: block; height: 100%; background: #f9a8d4; transform: scaleX(0); transform-origin: 0 50%; }

/* JS-pinned mode (desktop, motion allowed): the row becomes a scroll-driven track */
.builds-reel.is-pinned .builds-pin { min-height: 100svh; padding: 5.5rem 0 2rem; }
.builds-reel.is-pinned .builds-viewport { overflow: visible; scroll-snap-type: none; }
.builds-reel.is-pinned .builds-track { will-change: transform; }
.builds-reel.is-pinned .builds-progress { display: block; }
.builds-reel.is-pinned { padding: 0; }

/* Stacked mode (phones): vertical cards, image drifts inside its frame */
@media (max-width: 767px) {
    .motion-ok .builds-viewport { overflow: visible; scroll-snap-type: none; }
    .motion-ok .builds-track { flex-direction: column; width: auto; gap: 2rem; }
    .motion-ok .build-panel { width: 100%; }
    .motion-ok .build-img { left: 0; width: 100%; top: -8%; height: 116%; }
}

/* --- Nav: sliding active pill (transitions.dev "tabs sliding") --------- */
.nav-tabs { position: relative; }
.nav-tab {
    position: relative; z-index: 1;
    color: rgba(209, 213, 219, 0.9);
    transition: color var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-fast) var(--ease-smooth-out);
}
.nav-tab:hover { color: #6ee7b7; background-color: rgba(255, 255, 255, 0.06); }
.nav-tab[aria-current="true"] { color: #d1fae5; }
.nav-tab[aria-current="true"]:hover { background-color: transparent; }
.nav-tabs__pill {
    position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0;
    border-radius: 999px; z-index: 0; pointer-events: none; opacity: 0;
    background: rgba(52, 211, 153, 0.16);
    box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.35);
    transition:
        transform var(--duration-fast) var(--ease-smooth-out),
        width var(--duration-fast) var(--ease-smooth-out),
        opacity var(--duration-quick) var(--ease-smooth-out);
}
.nav-tabs.has-active .nav-tabs__pill { opacity: 1; }

/* --- FAQ: grid-rows accordion (transitions.dev "accordion expand") ----- */
.t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-fast) var(--ease-smooth-out); }
.t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; }
.t-acc-panel-inner {
    overflow: hidden; min-height: 0; opacity: 0; filter: blur(var(--blur-small));
    transition: opacity var(--duration-fast) var(--ease-smooth-out), filter var(--duration-fast) var(--ease-smooth-out);
}
.t-acc[data-open="true"] .t-acc-panel-inner { opacity: 1; filter: blur(0); }
.t-acc-chevron { display: inline-flex; flex: none; transform: scaleY(1); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron { transform: scaleY(-1); }
.faq-item { transition: border-color var(--duration-fast) var(--ease-smooth-out); }
.t-acc[data-open="true"] { border-color: rgba(52, 211, 153, 0.5); }

/* --- Toast (transitions.dev "toast open / close") ---------------------- */
.t-toast {
    opacity: 0; pointer-events: none;
    transform: translateY(16px) scale(0.97); filter: blur(var(--blur-small));
    transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out), filter var(--duration-fast) var(--ease-smooth-out);
}
.t-toast.is-open {
    opacity: 1; pointer-events: auto;
    transform: translateY(0) scale(1); filter: blur(0);
    transition-duration: var(--duration-medium);
}
/* .hud-panel sets position: relative, which was silently overriding Tailwind's `fixed`
   and parking the toast at the very bottom of the page. Pin it to the viewport. */
#toast.t-toast { position: fixed; right: 1.5rem; bottom: 1.5rem; left: auto; top: auto; width: auto; max-width: calc(100vw - 2rem); }
@media (max-width: 767px) { #toast.t-toast { bottom: 5.5rem; right: 1rem; left: 1rem; } }

/* --- Reduced motion: calm, complete, nothing hidden -------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-cue__dot { animation: none; opacity: 1; }
    .forest-near { transform: none !important; }
    .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron, .nav-tabs__pill, .t-toast { transition-duration: 0.01ms !important; }
    .t-toast { transform: none; filter: none; }
}

/* Modpack step: official-source note under the CurseForge button */
.modpack-note { margin-top: 0.75rem; text-align: center; font-size: 0.8125rem; color: #c8d6cf; }
.modpack-note a { color: #6ee7b7; text-decoration: underline; text-underline-offset: 3px; }
.modpack-note a:hover { color: #a7f3d0; }

/* ==========================================================================
   INTERFACE POLISH PASS ("Make Interfaces Feel Better", 2026-10-16)
   ========================================================================== */

/* Typography: crisp rendering, balanced headings, no orphaned words, stable numbers */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption, dd { text-wrap: pretty; }
#serverStatusText, .builds-progress, .t-toast p { font-variant-numeric: tabular-nums; }

/* Surfaces: neutral 1px inset outline on photos and avatars (dark mode = pure white @ 10%) */
img:not(.forest-near):not([src*="riolu"]) { outline: 1px solid oklch(1 0 0 / 0.1); outline-offset: -1px; }

/* Concentric radii */
.featured-strip { border-radius: 18px; }                  /* 8px thumbnail + 10px padding */
#rules [data-lightning-card] > span:first-child { border-radius: 6px; }  /* 26px card − ~21px inset */

/* Never transition `all`: name what the hover states actually change */
.transition-all {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform, translate, scale, filter;
}
/* High-frequency hovers stay quick */
[data-lightning-card].duration-300, .faq-item.duration-300 { transition-duration: 150ms; }

/* Scale on press: 0.96, interruptible (CSS transition on the independent `scale` property,
   so it composes with GSAP/hover transforms instead of fighting them) */
.game-btn-primary, .game-btn-secondary, .sticky-cta-btn, .nav-join,
#how-to-join a.w-full, #copyIpStepCard, footer .footer-social,
#creators .trainer-card a[target="_blank"], #builders .trainer-card a, #builders .trainer-card button,
.builds-reel a, #legalDialog button, #builderShowcaseDialog button {
    transition-property: transform, translate, scale, box-shadow, filter, background-color, border-color, color, opacity;
}
.game-btn-primary:active, .game-btn-secondary:active, .sticky-cta-btn:active, .nav-join:active,
#how-to-join a.w-full:active, #copyIpStepCard:active, footer .footer-social:active,
#creators .trainer-card a[target="_blank"]:active, #builders .trainer-card a:active, #builders .trainer-card button:active,
#legalDialog button:active, #builderShowcaseDialog button:active {
    scale: 0.96;
}

/* Optical alignment: icon-side padding = text-side padding − 2px */
.nav-join { padding-left: 14px; }

/* Hit areas: ≥40px on desktop, ≥44px on touch, extended with pseudo-elements where the visual stays small */
.nav-tab, .nav-join, #copyIpStepCard { position: relative; }
.nav-tab::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 40px; transform: translateY(-50%); }
.nav-join { min-height: 40px; }  /* its sheen clips overflow, so grow the real box instead of a pseudo-element */
#copyIpStepCard::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
.footer-links a, .footer-links button { display: inline-flex; align-items: center; min-height: 40px; }
.footer-copyright { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 767px) {
    #mobileMenuBtn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    footer .footer-social { width: 44px; height: 44px; }
    .sticky-cta-btn { min-height: 44px; }
    .footer-links a, .footer-links button { min-height: 44px; }
}

/* Contextual icon swap (copy → check, menu → close): keep both icons in the DOM and cross-fade
   with opacity + scale 0.25→1 + blur 4px→0 */
.icon-swap { position: relative; display: inline-grid; place-items: center; }
.icon-swap > * { grid-area: 1 / 1; transition-property: opacity, filter, scale; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.icon-swap__b { opacity: 0; scale: 0.25; filter: blur(4px); }
.is-swapped .icon-swap__a { opacity: 0; scale: 0.25; filter: blur(4px); }
.is-swapped .icon-swap__b { opacity: 1; scale: 1; filter: blur(0); }
.copy-done-check { color: #6ee7b7; }

/* Mobile menu: grow from the nav with a soft fade; exit is a smaller, faster move */
.mobile-menu {
    transform-origin: top center;
    opacity: 0; translate: 0 -4px; scale: 0.98;
    transition-property: opacity, translate, scale;
    transition-duration: 150ms; transition-timing-function: ease-out;
}
.mobile-menu.is-open { opacity: 1; translate: 0 0; scale: 1; transition-duration: 250ms; }

@media (prefers-reduced-motion: reduce) {
    .game-btn-primary:active, .game-btn-secondary:active, .sticky-cta-btn:active, .nav-join:active,
    #how-to-join a.w-full:active, #copyIpStepCard:active, footer .footer-social:active { scale: 1; }
    .icon-swap > *, .mobile-menu { transition-duration: 0.01ms !important; }
    .icon-swap > * { filter: none !important; scale: 1 !important; }
}
.sticky-cta-btn, .nav-join, #how-to-join a.w-full, #copyIpStepCard, footer .footer-social,
#creators .trainer-card a[target="_blank"], #builders .trainer-card a, #builders .trainer-card button,
#legalDialog button, #builderShowcaseDialog button { transition-duration: 150ms; transition-timing-function: ease-out; }
.footer-links { column-gap: 1.5rem; row-gap: 0.25rem; }

/* ==========================================================================
   LIVE + EVENTS + MAP + QUICK ACTIONS + SEASONAL (2026-10-16)
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Shared section shell for the new sections */
.feature-section { position: relative; padding: 5rem 1rem; }
@media (min-width: 640px) { .feature-section { padding-inline: 1.5rem; } }
.feature-wrap { max-width: 72rem; margin: 0 auto; }
.feature-title { font-family: 'Chakra Petch', sans-serif; font-weight: 700; text-transform: uppercase; color: #fff;
    font-size: clamp(1.875rem, 4.5vw, 3rem); line-height: 1.05; text-align: center; margin: 0 0 2.75rem; }

/* Event-style buttons reused across new sections */
.event-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 46px; padding: 0 1.15rem;
    border-radius: 12px; border: 1px solid rgba(110, 231, 183, 0.35); background: rgba(11, 26, 19, 0.9); color: #e8f5ee;
    font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer;
    transition-property: background-color, border-color, color, scale; transition-duration: 150ms; transition-timing-function: ease-out; }
.event-btn:hover { border-color: rgba(110, 231, 183, 0.7); background: #0f241a; }
.event-btn:active { scale: 0.96; }
.event-btn--discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.event-btn--discord:hover { background: #4752c4; border-color: #4752c4; }
.event-btn--primary { background: #34d399; border-color: #34d399; color: #031008; font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.event-btn--primary:hover { background: #6ee7b7; border-color: #6ee7b7; }

/* --- Live banner ------------------------------------------------------- */
.live-banner { padding: 0 1rem; margin-top: -0.25rem; position: relative; z-index: 40; }
.live-banner[hidden] { display: none; }
.live-banner__inner { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0.6rem 0.55rem 0.75rem;
    border-radius: 18px; background: #1a1030; border: 1px solid rgba(167, 139, 250, 0.5); box-shadow: 0 16px 36px -18px rgba(124, 58, 237, 0.7);
    animation: liveIn 400ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes liveIn { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
.live-banner__avatar { position: relative; flex: none; }
.live-banner__avatar img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; display: block; }
.live-banner__tag { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; padding: 0 5px; border-radius: 4px; background: #e11d48; color: #fff;
    font: 700 9px/14px 'JetBrains Mono', monospace; letter-spacing: 0.08em; }
.live-banner__text { min-width: 0; flex: 1; color: #ede9fe; font-size: 0.95rem; }
.live-banner__text strong { color: #fff; }
.live-banner__title { display: block; color: #c4b5fd; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-banner__cta { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 12px; background: #8b5cf6; color: #fff;
    font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
    transition-property: background-color, scale; transition-duration: 150ms; transition-timing-function: ease-out; }
.live-banner__cta:hover { background: #7c3aed; }
.live-banner__cta:active { scale: 0.96; }

/* --- Watch section ----------------------------------------------------- */
.watch-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 860px) { .watch-grid { grid-template-columns: 1fr; } }
.watch-player { padding: 10px; border-radius: 26px; }
.watch-player__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #06120c; }
.watch-player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.watch-side { display: flex; flex-direction: column; gap: 0.9rem; }
.watch-side__title { margin: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 1.35rem; text-transform: uppercase; color: #fff; }
.creator-status { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.creator-status__row { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.75rem; border-radius: 16px; background: rgba(11, 26, 19, 0.85);
    border: 1px solid rgba(110, 231, 183, 0.16); transition: border-color 150ms ease-out; }
.creator-status__row img { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; flex: none; }
.creator-status__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.creator-status__who strong { color: #fff; }
.creator-status__state { font-size: 0.85rem; color: #a7c4b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creator-status__row.is-live { border-color: rgba(167, 139, 250, 0.55); }
.creator-status__row.is-live .creator-status__state { color: #c4b5fd; }
.creator-status__row.is-live .creator-status__state::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #e11d48; box-shadow: 0 0 8px #e11d48; vertical-align: 1px; }
.creator-status__link { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #c4b5fd; background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.3); transition-property: background-color, scale; transition-duration: 150ms; transition-timing-function: ease-out; }
.creator-status__link:hover { background: rgba(139, 92, 246, 0.25); }
.creator-status__link:active { scale: 0.96; }
.watch-side__yt { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 48px; border-radius: 14px; background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35); color: #fecaca; font-weight: 600; text-decoration: none;
    transition-property: background-color, scale; transition-duration: 150ms; transition-timing-function: ease-out; }
.watch-side__yt:hover { background: rgba(239, 68, 68, 0.22); }
.watch-side__yt:active { scale: 0.96; }

/* --- Events ------------------------------------------------------------ */
.events-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
.events-grid.is-empty { grid-template-columns: minmax(0, 40rem); justify-content: center; }
@media (max-width: 860px) { .events-grid { grid-template-columns: 1fr; } }
.event-next { position: relative; overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; padding: 1.75rem; border-radius: 26px; }
.event-next[hidden] { display: none; }
.event-next__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; outline: none !important; }
.event-next::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 10, 7, 0.97) 20%, rgba(4, 10, 7, 0.4) 75%, rgba(4, 10, 7, 0.25)); z-index: 1; }
.event-next__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.75rem; }
.event-next__tag { align-self: flex-start; padding: 0.3rem 0.75rem; border-radius: 999px; background: #34d399; color: #031008; font: 700 0.75rem 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.event-next__title { margin: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.05; text-transform: uppercase; color: #fff; }
.event-next__when { margin: 0; color: #c8d6cf; }
.event-countdown { display: flex; gap: 0.6rem; font-variant-numeric: tabular-nums; }
.event-countdown span { min-width: 64px; padding: 0.55rem 0.7rem; border-radius: 12px; background: rgba(11, 26, 19, 0.85); border: 1px solid rgba(110, 231, 183, 0.25); text-align: center; }
.event-countdown b { display: block; font: 700 1.6rem/1.1 'JetBrains Mono', monospace; color: #fff; }
.event-countdown small { font: 500 0.7rem 'JetBrains Mono', monospace; color: #a7c4b5; text-transform: uppercase; }
.event-next__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.event-list-wrap { display: flex; flex-direction: column; gap: 0.75rem; }
.event-list__title { margin: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 1.35rem; text-transform: uppercase; color: #fff; }
.event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.event-row { display: flex; align-items: center; gap: 1rem; padding: 0.9rem; border-radius: 18px; background: rgba(11, 26, 19, 0.85); border: 1px solid rgba(110, 231, 183, 0.16); }
.event-row__date { flex: none; width: 62px; padding: 0.45rem 0; border-radius: 12px; background: #0f241a; text-align: center; font-family: 'JetBrains Mono', monospace; }
.event-row__date small { display: block; font-size: 0.7rem; color: #6ee7b7; text-transform: uppercase; }
.event-row__date b { display: block; font-size: 1.3rem; color: #fff; font-variant-numeric: tabular-nums; }
.event-row__name { font-weight: 600; color: #fff; }
.event-row__meta { font-size: 0.85rem; color: #a7c4b5; }
.event-empty { padding: 2rem; border-radius: 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.event-empty[hidden] { display: none; }
.event-empty h3 { margin: 0; font-family: 'Chakra Petch', sans-serif; font-size: 1.4rem; text-transform: uppercase; color: #fff; }
.event-empty p { margin: 0; color: #c8d6cf; max-width: 44ch; }

/* --- World map --------------------------------------------------------- */
.map-shell { position: relative; overflow: hidden; border-radius: 26px; aspect-ratio: 16 / 8; min-height: 360px; padding: 0; }
@media (max-width: 640px) { .map-shell { aspect-ratio: 4 / 5; } }
.map-tiles { position: absolute; inset: 0; opacity: 0.55;
    background:
        radial-gradient(circle at 30% 40%, rgba(30, 58, 95, 0.95) 0 12%, transparent 13%),
        radial-gradient(circle at 72% 65%, rgba(30, 58, 95, 0.9) 0 9%, transparent 10%),
        conic-gradient(from 90deg at 1px 1px, transparent 25%, rgba(4, 10, 7, 0.35) 0) 0 0 / 28px 28px,
        linear-gradient(135deg, #2f7a3e, #3f8f4a 40%, #1f5a35 70%, #2f7a3e); }
.map-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(circle at center, rgba(4, 10, 7, 0.35), rgba(4, 10, 7, 0.85)); }
.map-overlay__card { max-width: 30rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 1.75rem; border-radius: 22px;
    background: rgba(6, 18, 12, 0.88); border: 1px solid rgba(110, 231, 183, 0.25); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.map-overlay__card h3 { margin: 0; font-family: 'Chakra Petch', sans-serif; font-size: 1.4rem; text-transform: uppercase; color: #fff; }
.map-overlay__card p { margin: 0; color: #c8d6cf; }
.map-overlay [hidden] { display: none; }
#mapFrame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-shell[data-state="live"] .map-overlay, .map-shell[data-state="live"] .map-tiles { display: none; }

/* --- Quick actions ----------------------------------------------------- */
.cmdk-trigger { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0 0.7rem; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(3, 13, 8, 0.6); color: #c8d6cf; cursor: pointer;
    transition-property: border-color, color, scale; transition-duration: 150ms; transition-timing-function: ease-out; }
.cmdk-trigger:hover { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.45); }
.cmdk-trigger:active { scale: 0.96; }
.cmdk-trigger__kbd { font: 600 0.7rem 'JetBrains Mono', monospace; padding: 0.1rem 0.4rem; border-radius: 6px; border: 1px solid rgba(110, 231, 183, 0.25); color: #a7c4b5; }
@media (max-width: 1100px) { .cmdk-trigger__kbd { display: none; } }
@media (max-width: 767px) { .cmdk-trigger { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; border: 0; background: transparent; } }
.cmdk { width: min(560px, calc(100vw - 2rem)); max-height: min(560px, calc(100vh - 6rem)); margin: 12vh auto auto; padding: 0; border-radius: 22px;
    background: #0b1a13; color: #e8f5ee; border: 1px solid rgba(110, 231, 183, 0.3); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95); overflow: hidden; }
.cmdk[open] { display: flex; flex-direction: column; animation: cmdkIn 200ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes cmdkIn { from { opacity: 0; scale: 0.97; translate: 0 -6px; } to { opacity: 1; scale: 1; translate: 0 0; } }
.cmdk::backdrop { background: rgba(2, 6, 4, 0.65); backdrop-filter: blur(3px); }
.cmdk__search { display: flex; align-items: center; gap: 0.75rem; padding: 0 1.1rem; border-bottom: 1px solid rgba(110, 231, 183, 0.16); color: #6ee7b7; }
.cmdk__search input { flex: 1; min-height: 60px; border: 0; background: transparent; color: #e8f5ee; font: 400 1.05rem 'Space Grotesk', sans-serif; outline: none; }
.cmdk__search kbd, .cmdk__foot { font: 500 0.75rem 'JetBrains Mono', monospace; color: #a7c4b5; }
.cmdk__search kbd { padding: 0.15rem 0.5rem; border: 1px solid rgba(110, 231, 183, 0.25); border-radius: 6px; }
.cmdk__list { list-style: none; margin: 0; padding: 0.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cmdk__item { display: flex; align-items: center; gap: 0.85rem; min-height: 56px; padding: 0.4rem 0.6rem; border-radius: 14px; cursor: pointer; transition: background-color 100ms ease-out; }
.cmdk__item[aria-selected="true"] { background: #123222; }
.cmdk__icon { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #0f241a; display: grid; place-items: center; color: #6ee7b7; }
.cmdk__text { display: flex; flex-direction: column; min-width: 0; }
.cmdk__label { font-weight: 600; }
.cmdk__hint { font-size: 0.82rem; color: #a7c4b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk__empty { margin: 1.5rem 1rem; color: #a7c4b5; }
.cmdk__foot { display: flex; gap: 1rem; padding: 0.6rem 1.1rem; border-top: 1px solid rgba(110, 231, 183, 0.16); }
.cmdk__foot-end { margin-left: auto; }
@media (max-width: 767px) { .cmdk__foot { display: none; } }

/* --- Seasonal: Halloween ---------------------------------------------- */
.season-fog, .season-lanterns { display: none; }
html.season-halloween {
    --season-accent: #fb923c;
    --season-accent-2: #f97316;
}
/* Forest goes from bioluminescent green to a moonlit violet with ember light */
/* Pre-tinted copies (same look as hue-rotate(-118deg) saturate(1.35) brightness(0.82)),
   so the browser doesn't recolor two full-screen layers on every scroll frame */
html.season-halloween #parallaxBg { background-image: url('Public/opt/bg_halloween.webp') !important; }
html.season-halloween .forest-veil {
    background:
        radial-gradient(120% 80% at 50% 38%, rgba(20, 8, 28, 0.05) 0%, rgba(14, 6, 20, 0.55) 62%, rgba(8, 4, 12, 0.93) 100%),
        linear-gradient(to bottom, rgba(14, 6, 20, 0.55) 0%, rgba(40, 14, 30, 0.2) 40%, rgba(8, 4, 12, 0.8) 100%);
}
html.season-halloween .orb { filter: hue-rotate(-140deg); }
html.season-halloween .season-fog { display: block; pointer-events: none; overflow: hidden; }
.season-fog span { position: absolute; left: -20%; width: 140%; height: 38%; border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(196, 181, 253, 0.16), transparent 70%); }
.season-fog span:nth-child(1) { bottom: 4%; animation: fogDrift 38s linear infinite alternate; }
.season-fog span:nth-child(2) { bottom: 22%; height: 30%; opacity: 0.7; animation: fogDrift 52s linear infinite alternate-reverse; }
@keyframes fogDrift { from { translate: -6% 0; } to { translate: 6% 0; } }

/* Blocky jack-o'-lanterns at different depths (GSAP pushes them past the camera on scroll) */
html.season-halloween .season-lanterns { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.lantern { position: absolute; display: block; aspect-ratio: 1; background: #c2410c; border: 3px solid #7c2d12;
    box-shadow: 0 0 60px rgba(251, 146, 60, 0.5), inset 0 -10px 0 rgba(0, 0, 0, 0.25), inset 0 6px 0 rgba(255, 255, 255, 0.08);
    will-change: transform; }
.lantern::before { content: ""; position: absolute; left: 42%; top: -16%; width: 16%; height: 18%; background: #3f6212; border: 2px solid #1a2e05; }
.lantern i { position: absolute; top: 28%; width: 22%; height: 22%; background: #fde68a; box-shadow: 0 0 14px #fbbf24; animation: flicker 3.2s ease-in-out infinite; }
.lantern i:nth-of-type(1) { left: 18%; }
.lantern i:nth-of-type(2) { right: 18%; }
.lantern b { position: absolute; left: 20%; right: 20%; top: 62%; height: 14%; background: #fde68a; box-shadow: 0 0 14px #fbbf24; animation: flicker 3.2s ease-in-out infinite; }
.lantern--a { width: 92px; left: 6%; bottom: 14%; rotate: -6deg; }
.lantern--b { width: 64px; right: 9%; bottom: 22%; rotate: 8deg; }
.lantern--c { width: 40px; right: 22%; bottom: 9%; rotate: -4deg; opacity: 0.85; }
.lantern--d { width: 34px; left: 20%; top: 18%; rotate: 5deg; opacity: 0.55; filter: blur(1px); }
.lantern--b i, .lantern--b b { animation-delay: -1.1s; }
.lantern--c i, .lantern--c b { animation-delay: -2.2s; }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.82; } 50% { opacity: 0.55; } 55% { opacity: 0.9; } }
@media (max-width: 767px) { .lantern--a { width: 60px; left: 4%; bottom: 8%; } .lantern--b { width: 44px; right: 5%; bottom: 12%; } .lantern--d { display: none; } }

/* Hero accents */
html.season-halloween .hero-word-neon { background-image: linear-gradient(90deg, #fed7aa, #fb923c 45%, #f97316) !important; }
html.season-halloween #heroBadge { border-color: rgba(251, 146, 60, 0.45); }
html.season-halloween .season-badge { display: inline-flex; }
.season-badge { display: none; align-items: center; padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(124, 45, 18, 0.6); border: 1px solid rgba(251, 146, 60, 0.55);
    color: #fed7aa; font: 600 0.72rem 'JetBrains Mono', monospace; }
html.season-halloween #heroWhitelistBtn { background: linear-gradient(180deg, #fb923c, #ea580c); color: #1c0a02; box-shadow: 0 6px 0 #9a3412, 0 14px 30px -8px rgba(249, 115, 22, 0.55); }
html.season-halloween .scroll-progress__bar { background: linear-gradient(90deg, #f97316, #fb923c 60%, #fed7aa); box-shadow: 0 1px 8px rgba(249, 115, 22, 0.55); }
html.season-halloween .hero-scroll-cue { color: rgba(254, 215, 170, 0.8); }
html.season-halloween .hero-scroll-cue__track { border-color: rgba(251, 146, 60, 0.5); }
html.season-halloween .hero-scroll-cue__dot { background: #fb923c; }
html.season-halloween ::selection { background: #fb923c; color: #1c0a02; }

@media (prefers-reduced-motion: reduce) {
    .season-fog span, .lantern i, .lantern b, .live-banner__inner, .cmdk[open] { animation: none !important; }
}

/* Header fit after adding Events + quick actions */
.nav-tab, .nav-join, #serverStatusText, .cmdk-trigger { white-space: nowrap; }
@media (max-width: 1480px) { .cmdk-trigger__kbd { display: none; } }
@media (min-width: 768px) and (max-width: 1360px) { .nav-tab { padding-left: 0.6rem !important; padding-right: 0.6rem !important; } }
@media (min-width: 768px) and (max-width: 1360px) { #serverStatusPill { display: none !important; } }
@media (min-width: 768px) and (max-width: 1100px) { #primaryNav .nav-tab[href="#hero"], #primaryNav .nav-tab[href="#faq"] { display: none; } }
/* Phones: the sticky bottom bar already has Join, so the header keeps logo, search and menu */
@media (max-width: 767px) { .nav-join { display: none !important; } }
@media (min-width: 768px) and (max-width: 960px) { .nav-join { display: none !important; } #primaryNav .nav-tab[href="#features"] { display: none; } }
section[id] { scroll-margin-top: 96px; }


/* ==========================================================================
   HALLOWEEN, SITEWIDE (quiet touches; the hero stays the main moment)
   ========================================================================== */
.season-wisps, .season-note { display: none; }

/* Will-o'-wisps: soft lights wandering slowly behind all content, fading in and out */
html.season-halloween .season-wisps { display: block; pointer-events: none; overflow: hidden; }
.wisp { position: absolute; width: 14px; height: 14px; border-radius: 50%; opacity: 0; will-change: transform, opacity;
    background: radial-gradient(circle, #fff7ed 0 18%, #fdba74 32%, rgba(249, 115, 22, 0.35) 55%, transparent 72%);
    box-shadow: 0 0 18px 6px rgba(249, 115, 22, 0.28), 0 0 46px 14px rgba(249, 115, 22, 0.12); }
.wisp--a { left: 12%; top: 30%; animation: wispWander 19s ease-in-out infinite, wispGlow 7s ease-in-out infinite; }
.wisp--b { left: 82%; top: 22%; width: 10px; height: 10px; animation: wispWander 23s ease-in-out infinite reverse, wispGlow 9s ease-in-out infinite -3s; }
.wisp--c { left: 68%; top: 66%; animation: wispWander 27s ease-in-out infinite -8s, wispGlow 8s ease-in-out infinite -5s; }
.wisp--d { left: 26%; top: 76%; width: 9px; height: 9px; animation: wispWander 21s ease-in-out infinite reverse -11s, wispGlow 6s ease-in-out infinite -1s; }
.wisp--e { left: 48%; top: 14%; width: 8px; height: 8px; animation: wispWander 31s ease-in-out infinite -4s, wispGlow 10s ease-in-out infinite -7s;
    background: radial-gradient(circle, #f5f3ff 0 18%, #c4b5fd 34%, rgba(139, 92, 246, 0.35) 56%, transparent 72%);
    box-shadow: 0 0 18px 6px rgba(139, 92, 246, 0.28), 0 0 40px 12px rgba(139, 92, 246, 0.12); }
.wisp--f { left: 90%; top: 58%; width: 11px; height: 11px; animation: wispWander 25s ease-in-out infinite -15s, wispGlow 8.5s ease-in-out infinite -2s; }
@keyframes wispWander {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(5vw, -4vh); }
    40%  { transform: translate(2vw, -9vh); }
    60%  { transform: translate(-4vw, -5vh); }
    80%  { transform: translate(-3vw, 2vh); }
    100% { transform: translate(0, 0); }
}
@keyframes wispGlow {
    0%, 100% { opacity: 0; }
    20% { opacity: 0.85; }
    50% { opacity: 0.55; }
    75% { opacity: 0.9; }
}
@media (max-width: 767px) { .wisp--e, .wisp--f { display: none; } }

/* Cobwebs hang from the corners of the screen (fixed, behind content), so they are
   always attached to a real edge instead of floating where a section happens to start */
.season-webs { display: none; }
html.season-halloween .season-webs { display: block; pointer-events: none; }
.season-webs span { position: absolute; width: 210px; height: 210px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 170'%3E%3Cpath d='M0 0L170.0 0.0M0 0L164.2 44.0M0 0L144.2 90.1M0 0L109.3 130.2M0 0L63.7 157.6M0 0L0.0 170.0M34.0 0.0Q29.0 3.8 32.8 8.8M32.8 8.8Q26.8 11.7 28.8 18.0M28.8 18.0Q22.1 19.2 21.9 26.0M21.9 26.0Q15.1 25.1 12.7 31.5M12.7 31.5Q5.6 28.7 0.0 34.0M62.0 0.0Q52.9 7.0 59.9 16.0M59.9 16.0Q48.9 21.3 52.6 32.9M52.6 32.9Q40.2 35.0 39.9 47.5M39.9 47.5Q27.5 45.7 23.2 57.5M23.2 57.5Q10.2 52.3 0.0 62.0M92.0 0.0Q78.4 10.3 88.9 23.8M88.9 23.8Q72.6 31.5 78.0 48.8M78.0 48.8Q59.7 51.9 59.1 70.5M59.1 70.5Q40.7 67.8 34.5 85.3M34.5 85.3Q15.1 77.7 0.0 92.0M124.0 0.0Q105.7 13.9 119.8 32.1M119.8 32.1Q97.8 42.5 105.2 65.7M105.2 65.7Q80.5 70.0 79.7 95.0M79.7 95.0Q54.9 91.4 46.5 115.0M46.5 115.0Q20.3 104.7 0.0 124.0M156.0 0.0Q133.0 17.5 150.7 40.4M150.7 40.4Q123.0 53.5 132.3 82.7M132.3 82.7Q101.3 88.0 100.3 119.5M100.3 119.5Q69.1 115.0 58.4 144.6M58.4 144.6Q25.6 131.7 0.0 156.0' fill='none' stroke='%23e9d5ff' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; background-size: contain; opacity: 0.17; }
.season-webs span:nth-child(1) { top: 0; left: 0; }
.season-webs span:nth-child(2) { bottom: 0; right: 0; transform: rotate(180deg); }
@media (max-width: 767px) { .season-webs span { width: 120px; height: 120px; opacity: 0.13; } .season-webs span:nth-child(2) { display: none; } }

/* Headings get a small green rule underneath */
html.season-halloween .section-heading::after,
html.season-halloween #creatorsHeaderTitle::after,
html.season-halloween #buildersHeaderTitle::after {
    content: ""; display: block; width: 72px; height: 3px; margin: 14px auto 0; border-radius: 3px;
    background: linear-gradient(90deg, transparent, #34d399, transparent); box-shadow: 0 0 12px rgba(52, 211, 153, 0.55);
}
html.season-halloween .builds-head .builds-title::after { margin-left: 0; }

/* Accents that pick up the ember color */
html.season-halloween .nav-tabs__pill { background: rgba(249, 115, 22, 0.16); box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.45); }
html.season-halloween .nav-tab[aria-current="true"] { color: #fed7aa; }
html.season-halloween .t-acc[data-open="true"] { border-color: rgba(251, 146, 60, 0.55); }
html.season-halloween .t-acc[data-open="true"] .t-acc-chevron { color: #fb923c; }
html.season-halloween #toast.t-toast { border-color: rgba(251, 146, 60, 0.55) !important; box-shadow: 0 0 30px rgba(249, 115, 22, 0.3) !important; }
html.season-halloween .event-next__tag { background: #fb923c; color: #1c0a02; }
html.season-halloween .scroll-progress__bar { height: 3px; }

/* Footer sign-off */
html.season-halloween .season-note { display: block; max-width: 80rem; margin: 2rem auto 0; text-align: center; color: #fdba74; font: 600 0.8rem 'JetBrains Mono', monospace; letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
    html.season-halloween .season-wisps { display: none; }
}

/* Header: the contents grew (Events, search, live player count), so the bar grows with them
   instead of squeezing the logo and pushing Join Server outside the border */
/* Header fit: nothing in the bar may squash (squashing made the last tab spill past the tab bar
   and clipped "Join Server"). Room comes from a wider bar on big screens and tighter spacing below. */
#navbar > .max-w-6xl { max-width: 1440px; gap: 0.75rem; }
#navbar > .max-w-6xl > * { flex-shrink: 0; min-width: auto; }
#navbar .nav-join, #serverStatusText { white-space: nowrap; }
@media (max-width: 1599px) { #navbar .cmdk-trigger__kbd { display: none; } }
@media (max-width: 1479px) {
    #primaryNav { gap: 0; }
    #primaryNav .nav-tab { padding-left: 0.7rem; padding-right: 0.7rem; }
}
@media (max-width: 1339px) { #serverStatusPill { display: none !important; } }
/* below this the eight tabs can't fit beside the logo and buttons: use the menu button instead */
@media (max-width: 1179px) {
    #primaryNav { display: none !important; }
    #mobileMenuBtn { display: inline-flex !important; }
    #mobileMenu:not(.hidden) { display: block !important; }
}
/* a soft fade behind the floating header so page text doesn't show above it while scrolling */
#navbar::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -18px 0; pointer-events: none;
    background: linear-gradient(180deg, #040a07 0%, rgba(4, 10, 7, 0.88) 45%, rgba(4, 10, 7, 0) 100%); }


/* ==========================================================================
   PERFORMANCE PASS (2026-10-16): same look, cheaper to draw.
   Measured in a scroll benchmark: these effects were ~2/3 of every frame.
   ========================================================================== */
/* Frosted-glass blur re-blurred everything behind it on every scroll frame.
   The panels are already 80–95% opaque, so a slightly denser fill gives the same look. */
.spatial-dock, .backdrop-blur-xl, .backdrop-blur-2xl, .builder-modal-chassis {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.spatial-dock { background: linear-gradient(180deg, rgba(14, 38, 27, 0.94) 0%, rgba(6, 18, 12, 0.96) 100%); }

/* Title backlights: a blurred bar (filter: blur(26px)) → soft radial gradients, no filter */
.creators-title-backlight {
    filter: none !important;
    background:
        radial-gradient(closest-side at 28% 50%, rgba(0, 255, 163, 0.30), transparent),
        radial-gradient(closest-side at 72% 50%, rgba(255, 184, 0, 0.30), transparent) !important;
}
.builders-title-backlight {
    filter: none !important;
    background:
        radial-gradient(closest-side at 28% 50%, rgba(244, 114, 182, 0.32), transparent),
        radial-gradient(closest-side at 72% 50%, rgba(212, 212, 216, 0.24), transparent) !important;
}

/* Blend layers force extra compositing even while invisible */
.holographic-wireframe-overlay { mix-blend-mode: normal; }

/* Background glows sit under the dark shade after the hero; animating them cost frames for no visible change */
.orb { animation: none !important; }
.season-fog span:nth-child(2) { display: none; }

/* ==========================================================================
   ANGEL: KAWAII PASTEL PROFILE (her own card only; same layout and motion as
   the other team cards). Original motifs: strawberry-milk pinks, cream polka
   dots, hearts and sparkles. Text colors hold ≥4.5:1 on the pastel fill.
   ========================================================================== */
.angel-kawaii { --k-ink: #831843; --k-berry: #be185d; --k-pink: #f472b6; --k-blush: #fbcfe8; --k-cream: #fff5f9; }

.builder-chassis--kawaii {
    border: 1.5px solid #fbcfe8 !important;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 2.2px, transparent 2.8px) 0 0 / 22px 22px,
        radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 2.2px, transparent 2.8px) 11px 11px / 22px 22px,
        linear-gradient(168deg, #fff5f9 0%, #ffe3ee 48%, #ffcadf 100%) !important;
    box-shadow:
        0 26px 50px -18px rgba(190, 24, 93, 0.45),
        0 6px 0 #f9a8d4,
        inset 0 2px 0 rgba(255, 255, 255, 0.9) !important;
    color: var(--k-ink);
}
.builder-card--pink.angel-kawaii:hover .builder-chassis--kawaii {
    border-color: #f472b6 !important;
    box-shadow:
        0 30px 60px -16px rgba(236, 72, 153, 0.55),
        0 0 0 4px rgba(251, 207, 232, 0.45),
        0 6px 0 #f472b6,
        inset 0 2px 0 #ffffff !important;
}
/* lightning reads on a light card when it isn't screen-blended */
.builder-chassis--kawaii .lightning-card-canvas { mix-blend-mode: normal; }
.angel-kawaii .holographic-wireframe-overlay { display: none; }

/* Avatar: thick white sticker frame + heart badge */
.kawaii-avatar { border-radius: 30px; border: 4px solid #ffffff; box-shadow: 0 12px 26px rgba(131, 24, 67, 0.45), 0 0 0 6px rgba(251, 207, 232, 0.55); }
.kawaii-avatar-heart { position: absolute; z-index: 11; right: -8px; bottom: -6px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: #ffffff; box-shadow: 0 4px 10px rgba(131, 24, 67, 0.35); rotate: 10deg; }
.kawaii-avatar-heart svg { width: 20px; height: 20px; fill: #f472b6; }

/* Type */
.kawaii-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.75rem; border-radius: 999px; background: #ffffff; border: 1.5px solid #f9a8d4;
    color: var(--k-berry); font: 700 0.7rem 'Fredoka', 'Space Grotesk', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.kawaii-name { margin: 0.35rem 0 0; font-family: 'Fredoka', 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.35rem); line-height: 1.05;
    color: #db2777; text-shadow: 0 2px 0 #ffffff, 0 4px 10px rgba(244, 114, 182, 0.35); letter-spacing: 0.01em; }
.kawaii-role { margin: 0.35rem 0 0; color: var(--k-ink); font: 500 0.82rem 'Space Grotesk', sans-serif; }

/* Featured build strip */
.kawaii-strip { background: rgba(255, 255, 255, 0.78) !important; border: 1.5px solid #fbcfe8; }
.kawaii-strip img { border: 2px solid #ffffff; box-shadow: 0 2px 6px rgba(131, 24, 67, 0.25); }
.kawaii-strip__label { display: block; font: 700 0.62rem 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--k-berry); }
.kawaii-strip__title { display: block; font: 700 0.8rem 'Space Grotesk', sans-serif; color: var(--k-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kawaii-chip { padding: 0.15rem 0.55rem; border-radius: 999px; background: #fce7f3; border: 1.5px solid #f9a8d4; color: var(--k-berry); font: 700 0.68rem 'Fredoka', sans-serif; white-space: nowrap; }

/* TikTok button: white candy pill */
.social-slot-btn.kawaii-social { background: #ffffff !important; border: 1.5px solid #f9a8d4 !important; color: var(--k-berry) !important;
    box-shadow: 0 4px 0 #fbcfe8 !important; transition-property: background-color, border-color, scale, box-shadow; transition-duration: 150ms; transition-timing-function: ease-out; }
.social-slot-btn.kawaii-social:hover { background: #fce7f3 !important; border-color: #f472b6 !important; }
.social-slot-btn.kawaii-social:active { scale: 0.96; box-shadow: 0 2px 0 #fbcfe8 !important; }
.social-slot-btn.kawaii-social:focus-visible { outline: 2px solid #db2777; outline-offset: 3px; }

/* Floating hearts and sparkles in the card's corners */
.kawaii-deco { position: absolute; z-index: 0; pointer-events: none; display: block; }
.kawaii-deco svg { width: 100%; height: 100%; display: block; }
.kawaii-deco--h1 { top: 18px; left: 18px; width: 18px; height: 18px; fill: #f9a8d4; animation: kawaiiFloat 5s ease-in-out infinite; }
.kawaii-deco--s1 { top: 46px; right: 22px; width: 16px; height: 16px; fill: #ffffff; animation: kawaiiTwinkle 3.2s ease-in-out infinite; }
.kawaii-deco--h2 { bottom: 74px; right: 18px; width: 14px; height: 14px; fill: #f472b6; opacity: 0.7; animation: kawaiiFloat 6s ease-in-out infinite -2s; }
.kawaii-deco--s2 { bottom: 120px; left: 16px; width: 12px; height: 12px; fill: #fbcfe8; animation: kawaiiTwinkle 4s ease-in-out infinite -1.2s; }
.builder-chassis--kawaii > :not(.kawaii-deco):not(.lightning-card-canvas) { position: relative; z-index: 1; }
@keyframes kawaiiFloat { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-5px) rotate(6deg); } }
@keyframes kawaiiTwinkle { 0%, 100% { transform: scale(0.8); opacity: 0.55; } 50% { transform: scale(1.1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kawaii-deco { animation: none !important; } }

/* ==========================================================================
   SHOCKZ: STORM CARD. Storm-navy glass, a bolt watermark that lights up on a
   strike every few seconds, electric cyan type, volt-yellow accents.
   ========================================================================== */
.shockz-storm { --st-cyan: #22d3ee; --st-cyan-soft: #7dd3fc; --st-volt: #fde047; --st-ink: #f0f9ff; }
.storm-chassis {
    border: 1.5px solid rgba(34, 211, 238, 0.32) !important;
    background:
        radial-gradient(120% 70% at 15% 0%, rgba(56, 189, 248, 0.20), transparent 60%),
        radial-gradient(80% 55% at 95% 8%, rgba(148, 163, 184, 0.16), transparent 62%),
        radial-gradient(70% 40% at 50% 105%, rgba(34, 211, 238, 0.10), transparent 70%),
        linear-gradient(170deg, #131d31 0%, #0a1121 55%, #050912 100%) !important;
    box-shadow: 0 28px 60px -12px rgba(0, 0, 0, 0.85), 0 6px 0 #0b1a2e, inset 0 1.5px 0 rgba(224, 242, 254, 0.28), inset 0 0 0 1px rgba(34, 211, 238, 0.05) !important;
}
.trainer-card--mint.shockz-storm:hover .storm-chassis {
    border-color: rgba(34, 211, 238, 0.9) !important;
    box-shadow: 0 32px 65px -10px rgba(34, 211, 238, 0.42), 0 0 30px rgba(34, 211, 238, 0.32), 0 6px 0 #0e4a63, inset 0 1.5px 0 rgba(224, 242, 254, 0.5), inset 0 0 36px rgba(34, 211, 238, 0.18) !important;
}
.storm-chassis > :not(.storm-watermark):not(.storm-flash):not(.storm-deco):not(.lightning-card-canvas) { position: relative; z-index: 1; }
.storm-watermark { position: absolute; z-index: 0; top: 34px; right: -26px; width: 190px; height: 190px; rotate: 14deg; pointer-events: none; }
.storm-watermark svg { width: 100%; height: 100%; fill: #fef9c3; opacity: 0.05; animation: stormBolt 8s linear infinite; filter: drop-shadow(0 0 14px rgba(253, 224, 71, 0.9)); }
.storm-flash { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(75% 60% at 80% 28%, rgba(240, 249, 255, 0.5), rgba(125, 211, 252, 0.16) 45%, transparent 78%); animation: stormStrike 8s linear infinite; }
.storm-deco { position: absolute; z-index: 0; pointer-events: none; display: block; }
.storm-deco svg { width: 100%; height: 100%; display: block; fill: var(--st-volt); }
.storm-deco--b1 { top: 20px; left: 20px; width: 16px; height: 16px; rotate: -12deg; opacity: 0.7; animation: stormFlicker 5.5s steps(1) infinite; }
.storm-deco--b2 { bottom: 96px; right: 20px; width: 12px; height: 12px; rotate: 18deg; opacity: 0.5; animation: stormFlicker 7s steps(1) infinite -2.3s; }
/* a strike: two quick pulses, then quiet */
@keyframes stormStrike { 0%, 89% { opacity: 0; } 90% { opacity: 0.9; } 91% { opacity: 0.12; } 92.5% { opacity: 0.6; } 96%, 100% { opacity: 0; } }
@keyframes stormBolt { 0%, 89% { opacity: 0.05; } 90% { opacity: 0.95; } 91% { opacity: 0.18; } 92.5% { opacity: 0.75; } 96%, 100% { opacity: 0.05; } }
@keyframes stormFlicker { 0%, 100% { opacity: 0.7; } 46% { opacity: 0.25; } 48% { opacity: 0.9; } 50% { opacity: 0.35; } 52% { opacity: 0.8; } }

.storm-avatar { border-radius: 24px; border: 2px solid var(--st-cyan); background: #0a1121;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.85), 0 0 0 4px rgba(34, 211, 238, 0.16), 0 0 26px rgba(34, 211, 238, 0.55); }
.storm-avatar img { outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
.storm-avatar-badge { position: absolute; z-index: 11; right: -8px; bottom: -6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, #fef9c3, #facc15 55%, #ca8a04); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 14px rgba(253, 224, 71, 0.55); rotate: -10deg; }
.storm-avatar-badge svg { width: 18px; height: 18px; fill: #1e293b; }

.storm-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 6px;
    background: rgba(253, 224, 71, 0.10); border: 1px solid rgba(253, 224, 71, 0.5); color: var(--st-volt); font: 400 10px/1.3 'Silkscreen', monospace; letter-spacing: 0.08em; }
.storm-badge svg { width: 10px; height: 10px; fill: currentColor; }
.storm-name { margin: 0.35rem 0 0; font: italic 700 clamp(1.6rem, 2.6vw, 1.95rem)/1.05 'Chakra Petch', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--st-ink);
    text-shadow: 0 0 2px #fff, 0 0 16px rgba(34, 211, 238, 0.6), 0 0 34px rgba(34, 211, 238, 0.25); }
.storm-role { margin: 0.3rem 0 0; font: 500 0.75rem 'JetBrains Mono', monospace; color: var(--st-cyan-soft); opacity: 0.9; }
.social-slot-btn.storm-social { background: linear-gradient(180deg, rgba(20, 34, 58, 0.85), rgba(8, 14, 28, 0.95)) !important; border: 1px solid rgba(34, 211, 238, 0.24) !important; }
.social-slot-btn.storm-social:hover { border-color: var(--st-cyan) !important; background: linear-gradient(180deg, rgba(14, 50, 72, 0.9), rgba(8, 20, 36, 0.95)) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(34, 211, 238, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; }
.social-slot-btn.storm-social:focus-visible { outline: 2px solid var(--st-cyan); outline-offset: 3px; }

/* ==========================================================================
   FINEST: GOLD VAULT CARD. Brushed dark bronze, a polished gold edge, stacked
   gold bars, gold-foil name, and a light sweep like light catching metal.
   ========================================================================== */
.finest-gold { --g-hi: #fef3c7; --g-mid: #fbbf24; --g-deep: #b45309; --g-cream: #ecd9a8; }
.gold-chassis {
    border: 1.5px solid #a16207 !important;
    background:
        repeating-linear-gradient(100deg, rgba(255, 236, 179, 0.022) 0 1px, transparent 1px 3px),
        radial-gradient(110% 60% at 50% 0%, rgba(251, 191, 36, 0.17), transparent 62%),
        radial-gradient(60% 40% at 50% 104%, rgba(217, 119, 6, 0.12), transparent 70%),
        linear-gradient(170deg, #21170a 0%, #140d05 55%, #0b0703 100%) !important;
    box-shadow: 0 28px 60px -12px rgba(0, 0, 0, 0.85), 0 6px 0 #3b2306, inset 0 1.5px 0 rgba(254, 243, 199, 0.42), inset 0 -1px 0 rgba(120, 53, 15, 0.6), inset 0 0 0 1px rgba(251, 191, 36, 0.06) !important;
}
.trainer-card--amber.finest-gold:hover .gold-chassis {
    border-color: #fbbf24 !important;
    box-shadow: 0 32px 65px -10px rgba(251, 191, 36, 0.42), 0 0 30px rgba(251, 191, 36, 0.3), 0 6px 0 #78350f, inset 0 1.5px 0 rgba(254, 243, 199, 0.6), inset 0 0 36px rgba(251, 191, 36, 0.16) !important;
}
.gold-chassis > :not(.gold-foil):not(.gold-shine):not(.gold-ingots):not(.gold-glint):not(.lightning-card-canvas) { position: relative; z-index: 1; }
.gold-foil { position: absolute; z-index: 0; top: 0; left: 12%; right: 12%; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, #fde68a 30%, #fff7d6 50%, #fde68a 70%, transparent); opacity: 0.85; }
.gold-shine { position: absolute; z-index: 0; inset: -20% -60%; pointer-events: none; translate: -55% 0;
    background: linear-gradient(105deg, transparent 40%, rgba(254, 243, 199, 0.14) 46%, rgba(255, 250, 230, 0.30) 50%, rgba(254, 243, 199, 0.14) 54%, transparent 60%);
    animation: goldShine 7s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.trainer-card--amber.finest-gold:hover .gold-shine { animation-duration: 2.4s; }
@keyframes goldShine { 0%, 62% { translate: -55% 0; } 88%, 100% { translate: 55% 0; } }
.gold-ingots { position: absolute; z-index: 0; pointer-events: none; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55)); }
.gold-ingots svg { width: 100%; height: 100%; display: block; }
.gold-ingots--stack { top: 16px; left: 14px; width: 62px; height: 38px; rotate: -4deg; opacity: 0.92; }
.gold-ingots--single { top: 22px; right: 12px; width: 44px; height: 26px; rotate: 9deg; opacity: 0.8; }
.gold-glint { position: absolute; z-index: 0; pointer-events: none; display: block; }
.gold-glint svg { width: 100%; height: 100%; display: block; fill: #fff7d6; }
.gold-glint--1 { top: 14px; left: 54px; width: 12px; height: 12px; animation: goldGlint 3.4s ease-in-out infinite; }
.gold-glint--2 { top: 20px; right: 46px; width: 9px; height: 9px; animation: goldGlint 4.2s ease-in-out infinite -1.6s; }
@keyframes goldGlint { 0%, 100% { transform: scale(0.4) rotate(0deg); opacity: 0; } 45% { transform: scale(1.05) rotate(45deg); opacity: 1; } 60% { transform: scale(0.7) rotate(60deg); opacity: 0.5; } }

.gold-avatar { padding: 4px; border-radius: 26px; background: linear-gradient(145deg, #fef3c7 0%, #f59e0b 32%, #92400e 58%, #fcd34d 84%, #fef3c7 100%);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.85), 0 0 24px rgba(251, 191, 36, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.gold-avatar img { border-radius: 22px; outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
.gold-avatar-badge { position: absolute; z-index: 11; right: -8px; bottom: -6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, #fff7d6, #fbbf24 50%, #b45309); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(120, 53, 15, 0.35); rotate: 10deg; }
.gold-avatar-badge svg { width: 18px; height: 18px; fill: #422006; }

.gold-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.9rem; clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, #fde68a 0%, #fbbf24 55%, #e08a0b 100%); color: #3b1a03; font: 700 10px/1.3 'Silkscreen', monospace; letter-spacing: 0.08em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); }
.gold-name { margin: 0.35rem 0 0; font: 700 clamp(1.6rem, 2.6vw, 1.95rem)/1.05 'Chakra Petch', sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
    background: linear-gradient(180deg, #fff7d6 0%, #fcd34d 40%, #f59e0b 62%, #b45309 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 rgba(66, 32, 6, 0.9)) drop-shadow(0 0 14px rgba(251, 191, 36, 0.3)); }
.gold-role { margin: 0.3rem 0 0; font: 500 0.75rem 'JetBrains Mono', monospace; color: var(--g-cream); opacity: 0.88; }
.social-slot-btn.gold-social { background: linear-gradient(180deg, rgba(48, 32, 10, 0.88), rgba(20, 13, 4, 0.95)) !important; border: 1px solid rgba(251, 191, 36, 0.28) !important; }
.social-slot-btn.gold-social:hover { border-color: #fbbf24 !important; background: linear-gradient(180deg, rgba(70, 46, 12, 0.92), rgba(28, 18, 5, 0.95)) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(251, 191, 36, 0.28), inset 0 1px 0 rgba(255, 236, 179, 0.3) !important; }
.social-slot-btn.gold-social:focus-visible { outline: 2px solid #fbbf24; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .storm-flash, .storm-watermark svg, .storm-deco, .gold-shine, .gold-glint { animation: none !important; }
    .gold-glint { opacity: 0.7; }
}

/* ==========================================================================
   SPEEDY: MOONLIT BELFRY CARD. Midnight violet, a pale moon rising in the
   corner with bats flapping across it, moonlit silver type.
   ========================================================================== */
.speedy-bat { --b-moon: #f5f0e1; --b-violet: #a78bfa; --b-violet-soft: #c4b5fd; --b-ink: #f5f3ff; }
.builder-chassis--bat {
    border: 1.5px solid rgba(167, 139, 250, 0.3) !important;
    background:
        radial-gradient(60% 45% at 50% 105%, rgba(139, 92, 246, 0.14), transparent 70%),
        linear-gradient(172deg, #17112a 0%, #0d0918 52%, #060409 100%) !important;
    box-shadow: 0 28px 60px -12px rgba(0, 0, 0, 0.88), 0 6px 0 #1a1030, inset 0 1.5px 0 rgba(237, 233, 254, 0.25), inset 0 0 0 1px rgba(167, 139, 250, 0.05) !important;
}
.builder-card--mono.speedy-bat:hover .builder-chassis--bat {
    border-color: rgba(196, 181, 253, 0.85) !important;
    box-shadow: 0 32px 65px -10px rgba(139, 92, 246, 0.42), 0 0 30px rgba(167, 139, 250, 0.3), 0 6px 0 #3b2470, inset 0 1.5px 0 rgba(237, 233, 254, 0.45), inset 0 0 36px rgba(167, 139, 250, 0.14) !important;
}
.speedy-bat .holographic-wireframe-overlay { display: none; }
.builder-chassis--bat > :not(.bat-moon):not(.bat-fly):not(.lightning-card-canvas) { position: relative; z-index: 1; }
/* the moon: a soft disc with faint craters and a halo, half out of frame */
.bat-moon { position: absolute; z-index: 0; top: -34px; right: -34px; width: 128px; height: 128px; border-radius: 50%; pointer-events: none;
    background:
        radial-gradient(circle at 40% 44%, rgba(214, 205, 179, 0.35) 0 6%, transparent 9%),
        radial-gradient(circle at 60% 66%, rgba(214, 205, 179, 0.28) 0 4%, transparent 7%),
        radial-gradient(circle at 38% 36%, #fbf8ee 0%, #ece5cf 60%, #ddd4ba 100%);
    box-shadow: 0 0 34px 8px rgba(245, 240, 225, 0.14), 0 0 90px 26px rgba(167, 139, 250, 0.14); opacity: 0.55; }
.bat-fly { position: absolute; z-index: 0; pointer-events: none; display: block; }
.bat-fly svg { width: 100%; height: 100%; display: block; fill: #0a0614; transform-origin: 50% 45%; animation: batFlap 0.42s ease-in-out infinite alternate; }
.bat-fly--1 { top: 30px; right: 26px; width: 40px; height: 19px; animation: batDrift1 9s ease-in-out infinite; }
.bat-fly--2 { top: 72px; right: 76px; width: 26px; height: 12px; opacity: 0.85; animation: batDrift2 11s ease-in-out infinite -3s; }
.bat-fly--2 svg { animation-duration: 0.34s; }
.bat-fly--3 { top: 20px; left: 22px; width: 24px; height: 11px; animation: batDrift1 13s ease-in-out infinite -6s; }
.bat-fly--3 svg { fill: rgba(196, 181, 253, 0.45); animation-duration: 0.5s; }
@keyframes batFlap { from { transform: scaleY(1); } to { transform: scaleY(0.6) translateY(1px); } }
@keyframes batDrift1 { 0%, 100% { translate: 0 0; } 25% { translate: -14px 6px; } 50% { translate: -4px -6px; } 75% { translate: 10px 4px; } }
@keyframes batDrift2 { 0%, 100% { translate: 0 0; } 30% { translate: 10px -5px; } 60% { translate: -8px 4px; } }

/* avatar: the round picture zoomed so its circle covers the rounded frame's corners (no dark corners) */
.bat-avatar { border-radius: 24px; overflow: hidden; background: #f5f0e1; border: 2px solid var(--b-moon);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.9), 0 0 0 4px rgba(167, 139, 250, 0.18), 0 0 26px rgba(167, 139, 250, 0.5); }
.bat-avatar img { scale: 1.28; }
.bat-avatar-badge { position: absolute; z-index: 11; right: -8px; bottom: -6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, #3b2a66, #1a1030 70%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(196, 181, 253, 0.45), 0 0 14px rgba(167, 139, 250, 0.45); rotate: -12deg; }
.bat-avatar-badge svg { width: 18px; height: 18px; fill: var(--b-moon); }

.bat-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem; border-radius: 6px;
    background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(196, 181, 253, 0.5); color: var(--b-violet-soft); font: 400 10px/1.3 'Silkscreen', monospace; letter-spacing: 0.08em; }
.bat-badge svg { width: 16px; height: 8px; fill: currentColor; }
.bat-name { margin: 0.35rem 0 0; font: 700 clamp(1.6rem, 2.6vw, 1.95rem)/1.05 'Chakra Petch', sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, #ede9fe 45%, #b8b0d4 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.45)); }
.bat-role { margin: 0.3rem 0 0; font: 500 0.75rem 'JetBrains Mono', monospace; color: #c9c2e0; opacity: 0.9; }
.bat-strip { background: rgba(23, 17, 42, 0.72) !important; border: 1px solid rgba(167, 139, 250, 0.24); }
.builder-card--mono.speedy-bat:hover .bat-strip { border-color: rgba(196, 181, 253, 0.55); }
.bat-strip__icon { background: #1d1534; border: 1px solid rgba(196, 181, 253, 0.32); color: var(--b-violet-soft); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.bat-strip__label { display: block; font: 500 9px/1.3 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #a59cc4; }
.bat-strip__title { display: block; font: 700 0.75rem 'Space Grotesk', sans-serif; color: var(--b-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bat-chip { padding: 0.15rem 0.5rem; border-radius: 6px; background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(196, 181, 253, 0.3); color: var(--b-violet-soft); font: 500 10px 'JetBrains Mono', monospace; white-space: nowrap; }
.social-slot-btn.bat-social { background: linear-gradient(180deg, rgba(32, 23, 58, 0.88), rgba(13, 9, 24, 0.95)) !important; border: 1px solid rgba(167, 139, 250, 0.3) !important; }
.social-slot-btn.bat-social:hover { border-color: var(--b-violet-soft) !important; background: linear-gradient(180deg, rgba(48, 34, 86, 0.92), rgba(18, 12, 34, 0.95)) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(167, 139, 250, 0.3), inset 0 1px 0 rgba(237, 233, 254, 0.25) !important; }
.social-slot-btn.bat-social:focus-visible { outline: 2px solid var(--b-violet-soft); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bat-fly, .bat-fly svg { animation: none !important; } }

/* ==========================================================================
   SENSEI RED: site credit. A small signature seal in the footer and a crimson
   creator card that deliberately breaks the site's mint palette.
   ========================================================================== */
:root { --sr-red: #f43f5e; --sr-hot: #fb7185; --sr-pale: #ffe4e6; --sr-deep: #4c0519; }
.footer-copyright-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.sr-seal { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 4px; border-radius: 999px; cursor: pointer;
    background: rgba(76, 5, 25, 0.25); border: 1px solid rgba(244, 63, 94, 0.25); color: #a8a29e; font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.04em;
    transition-property: border-color, background-color, box-shadow, color, scale; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
.sr-seal b { color: var(--sr-pale); font-weight: 700; }
.sr-seal__avatar { position: relative; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1.5px rgba(244, 63, 94, 0.6), 0 0 10px rgba(244, 63, 94, 0.35); }
.sr-seal__avatar img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
.sr-seal__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sr-red); box-shadow: 0 0 8px var(--sr-red); animation: srPulse 2.4s ease-in-out infinite; }
.sr-seal:hover { border-color: rgba(251, 113, 133, 0.75); background: rgba(76, 5, 25, 0.5); color: #fecdd3; box-shadow: 0 0 24px rgba(244, 63, 94, 0.3), inset 0 0 12px rgba(244, 63, 94, 0.15); }
.sr-seal:active { scale: 0.96; }
.sr-seal:focus-visible { outline: 2px solid var(--sr-hot); outline-offset: 3px; }
@keyframes srPulse { 0%, 100% { opacity: 0.45; scale: 0.85; } 50% { opacity: 1; scale: 1.1; } }

.sr-card { padding: 0; border: 0; background: transparent; color: var(--sr-pale); max-width: min(420px, calc(100vw - 32px)); width: 100%; overflow: visible; }
.sr-card::backdrop { background: radial-gradient(60% 60% at 50% 45%, rgba(76, 5, 25, 0.55), rgba(5, 1, 2, 0.88)); }
.sr-card__inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 92px 26px 26px; margin-top: 70px; border-radius: 28px;
    background:
        radial-gradient(90% 55% at 50% 0%, rgba(244, 63, 94, 0.28), transparent 65%),
        radial-gradient(70% 40% at 50% 105%, rgba(159, 18, 57, 0.25), transparent 70%),
        linear-gradient(175deg, #1f0a10 0%, #12050a 55%, #0a0306 100%);
    border: 1.5px solid rgba(244, 63, 94, 0.42);
    box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.9), 0 0 60px rgba(244, 63, 94, 0.22), inset 0 1.5px 0 rgba(255, 228, 230, 0.25); }
.sr-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; cursor: pointer;
    color: #fda4af; background: rgba(76, 5, 25, 0.35); border: 1px solid rgba(244, 63, 94, 0.25); transition-property: background-color, border-color, scale; transition-duration: 150ms; }
.sr-close:hover { background: rgba(76, 5, 25, 0.7); border-color: rgba(251, 113, 133, 0.6); }
.sr-close:active { scale: 0.96; }
.sr-close:focus-visible, .sr-link:focus-visible { outline: 2px solid var(--sr-hot); outline-offset: 3px; }
.sr-avatar { position: absolute; top: -70px; left: 50%; translate: -50% 0; width: 150px; height: 150px; }
.sr-avatar img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; border: 2px solid rgba(255, 228, 230, 0.85);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85), 0 0 34px rgba(244, 63, 94, 0.6); outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
@property --sr-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* a light that travels around the frame's edge */
.sr-avatar__aura { position: absolute; inset: -5px; z-index: 2; border-radius: 35px; padding: 3px; pointer-events: none;
    background: conic-gradient(from var(--sr-a), transparent 0 55%, rgba(251, 113, 133, 0.0) 60%, #fb7185 78%, #fff1f2 84%, transparent 90%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.9)); animation: srSpin 3.6s linear infinite; }
@keyframes srSpin { to { --sr-a: 360deg; } }
.sr-eyebrow { margin: 0; font: 500 11px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sr-hot); }
.sr-eyebrow__secret { display: none; color: #fecdd3; }
.sr-card[data-mode="secret"] .sr-eyebrow__secret { display: inline; }
.sr-name { margin: 2px 0 0; font: 700 clamp(2rem, 6vw, 2.6rem)/1 'Chakra Petch', sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, #ffe4e6 45%, #fb7185 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 16px rgba(244, 63, 94, 0.55)); }
.sr-line { margin: 4px 0 14px; color: #d6b8bd; font: 500 0.9rem/1.5 'Space Grotesk', sans-serif; max-width: 30ch; }
.sr-links { display: grid; gap: 10px; width: 100%; }
.sr-link { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 16px; cursor: pointer; text-align: left;
    background: linear-gradient(180deg, rgba(60, 14, 26, 0.85), rgba(24, 6, 12, 0.95)); border: 1px solid rgba(244, 63, 94, 0.28); color: var(--sr-pale);
    transition-property: border-color, box-shadow, scale, background-color; transition-duration: 180ms; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
.sr-link:hover { border-color: rgba(251, 113, 133, 0.8); box-shadow: 0 0 22px rgba(244, 63, 94, 0.28); }
.sr-link:active { scale: 0.96; }
.sr-link__icon { width: 20px; text-align: center; font-size: 18px; color: var(--sr-hot); }
.sr-link__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sr-link__label { font: 700 0.9rem 'Chakra Petch', sans-serif; letter-spacing: 0.04em; }
.sr-link__sub { font: 500 0.75rem 'JetBrains Mono', monospace; color: #c9a3aa; overflow-wrap: anywhere; }
.sr-link__end { font-size: 12px; color: #fda4af; opacity: 0.8; }
.sr-copy { position: relative; width: 16px; height: 16px; display: grid; place-items: center; }
.sr-copy i { position: absolute; transition-property: opacity, scale, filter; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
.sr-copy__b { opacity: 0; scale: 0.25; filter: blur(4px); color: #86efac; }
.sr-link.is-copied .sr-copy__a { opacity: 0; scale: 0.25; filter: blur(4px); }
.sr-link.is-copied .sr-copy__b { opacity: 1; scale: 1; filter: blur(0); }

/* entrances: a soft rise from the seal; a boss-style slam with a red flash for the secret */
.sr-card.is-in .sr-card__inner { animation: srIn 0.32s cubic-bezier(0.23, 1, 0.32, 1); }
.sr-card.is-in[data-mode="secret"] .sr-card__inner { animation: srSlam 0.55s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes srIn { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes srSlam { 0% { opacity: 0; transform: scale(1.35); } 40% { opacity: 1; transform: scale(0.97); } 55% { transform: scale(1.01) translateX(-5px); } 70% { transform: translateX(4px); } 85% { transform: translateX(-2px); } 100% { transform: none; } }
.sr-flash { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 45%, rgba(255, 228, 230, 0.9), rgba(244, 63, 94, 0.55) 35%, rgba(76, 5, 25, 0) 75%); }
.sr-flash.is-on { animation: srFlash 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes srFlash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .sr-seal__dot, .sr-avatar__aura { animation: none !important; }
    .sr-card.is-in .sr-card__inner, .sr-card.is-in[data-mode="secret"] .sr-card__inner { animation: none !important; }
}

/* ==========================================================================
   LOWER PAGE MOTION (How to Join, Events, Map, Features, Rules)
   ========================================================================== */
/* headings: the green underline is now part of every section title, and draws in */
.section-heading::after { content: ""; display: block; width: 72px; height: 3px; margin: 14px auto 0; border-radius: 3px;
    background: linear-gradient(90deg, transparent, #34d399, transparent); box-shadow: 0 0 12px rgba(52, 211, 153, 0.55); }
.motion-ok :is(#how-to-join, #events, #map, #features, #rules, #faq, #watch) .section-heading::after { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.motion-ok :is(#how-to-join, #events, #map, #features, #rules, #faq, #watch) .section-heading.hw-in::after { transform: scaleX(1); }
.builds-head .builds-title::after { margin-left: 0; }
.hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hw__i { display: inline-block; will-change: transform; }

/* How to Join: quest path */
.join-steps > [data-lightning-card] { position: relative; z-index: 1; }
.quest-path { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.quest-path__track { fill: none; stroke: rgba(110, 231, 183, 0.12); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.quest-path__glow { fill: none; stroke: #6ee7b7; stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.9)); }
.quest-orb { position: absolute; left: 0; top: 0; z-index: 2; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; opacity: 0;
    background: #f0fdfa; box-shadow: 0 0 8px 3px rgba(56, 189, 248, 0.95), 0 0 26px 10px rgba(52, 211, 153, 0.5), 0 0 60px 22px rgba(56, 189, 248, 0.15); transition: opacity 0.3s; }
.quest-orb.is-on { opacity: 1; }
.join-steps > [data-lightning-card] { transition-property: transform, border-color, box-shadow; transition-duration: 0.45s; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.join-steps > .is-lit { border-color: rgba(110, 231, 183, 0.55) !important; box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.18), 0 18px 50px -20px rgba(52, 211, 153, 0.45) !important; }
.join-steps > [data-lightning-card] .font-pixel { display: inline-block; transition: box-shadow 0.4s; }
.join-steps > .is-lit .font-pixel { animation: stepPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 0 16px rgba(110, 231, 183, 0.45); }
@keyframes stepPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.join-caret { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: #6ee7b7; opacity: 0; }
.join-caret.is-typing { opacity: 1; animation: caretBlink 0.9s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

/* Events: live dot, rolling digits, themed Halloween card */
.event-next__tag { display: inline-flex; align-items: center; gap: 0.45rem; }
.event-next__live { width: 7px; height: 7px; border-radius: 50%; background: #031008; box-shadow: 0 0 0 0 rgba(3, 16, 8, 0.6); animation: liveDot 1.6s ease-out infinite; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(3, 16, 8, 0.55); } 100% { box-shadow: 0 0 0 7px rgba(3, 16, 8, 0); } }
.event-countdown span { overflow: hidden; }
.event-countdown b.is-tick { animation: digitRoll 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes digitRoll { from { transform: translateY(-55%); opacity: 0.2; } to { transform: none; opacity: 1; } }
.event-next.is-inview .event-next__bg { animation: kenBurns 22s ease-in-out infinite alternate; }
@keyframes kenBurns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
.event-embers { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.event-next[data-theme="halloween"] .event-embers { display: block; }
.event-embers i { position: absolute; bottom: -10px; width: 5px; height: 5px; border-radius: 50%; background: #fdba74; box-shadow: 0 0 8px 2px rgba(251, 146, 60, 0.75); opacity: 0; }
.event-next.is-inview .event-embers i { animation: emberRise 6s linear infinite; }
.event-embers i:nth-child(1) { left: 8%;  animation-delay: 0s !important; }
.event-embers i:nth-child(2) { left: 22%; animation-delay: -1.4s !important; animation-duration: 7s !important; }
.event-embers i:nth-child(3) { left: 37%; animation-delay: -3.1s !important; }
.event-embers i:nth-child(4) { left: 51%; animation-delay: -0.7s !important; animation-duration: 8s !important; }
.event-embers i:nth-child(5) { left: 64%; animation-delay: -4.2s !important; }
.event-embers i:nth-child(6) { left: 76%; animation-delay: -2.3s !important; animation-duration: 6.5s !important; }
.event-embers i:nth-child(7) { left: 88%; animation-delay: -5s !important; }
.event-embers i:nth-child(8) { left: 95%; animation-delay: -1.9s !important; animation-duration: 7.5s !important; }
@keyframes emberRise { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 70% { opacity: 0.8; } 100% { transform: translate(28px, -360px) scale(0.4); opacity: 0; } }
.event-next[data-theme="halloween"] { border-color: rgba(251, 146, 60, 0.45) !important; box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.12), 0 30px 70px -30px rgba(234, 88, 12, 0.55) !important; }
.event-next[data-theme="halloween"]::before { background: linear-gradient(to top, rgba(12, 6, 2, 0.97) 20%, rgba(40, 14, 2, 0.45) 75%, rgba(60, 20, 2, 0.25)); }
.event-next[data-theme="halloween"] .event-next__bg { filter: sepia(0.6) hue-rotate(-25deg) saturate(1.6) brightness(0.85); }
.event-next[data-theme="halloween"] .event-next__tag { background: #fb923c; color: #2a0f02; }
.event-next[data-theme="halloween"] .event-countdown span { border-color: rgba(251, 146, 60, 0.35); background: rgba(30, 12, 3, 0.85); }
.event-next[data-theme="halloween"] .event-countdown small { color: #fdba74; }

/* Map: radar sweep, pins with pings, live coordinates */
.map-live-fx { position: absolute; inset: 0; pointer-events: none; }
.map-shell[data-state="live"] .map-live-fx { display: none; }
.map-radar { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0.55;
    background: conic-gradient(from 0deg, rgba(110, 231, 183, 0) 0deg, rgba(110, 231, 183, 0) 300deg, rgba(110, 231, 183, 0.28) 352deg, rgba(236, 253, 245, 0.55) 360deg); }
.map-shell.is-inview .map-radar { animation: radarSpin 5s linear infinite; }
@keyframes radarSpin { to { rotate: 360deg; } }
.map-pin { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 10px #34d399; opacity: 0; scale: 0.3; transition: opacity 0.4s, scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: var(--d); }
.map-pin::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(110, 231, 183, 0.7); opacity: 0; }
.map-pin::after { content: attr(data-label); position: absolute; left: 16px; top: 50%; translate: 0 -50%; white-space: nowrap; font: 600 11px 'JetBrains Mono', monospace; color: #ecfdf5; text-shadow: 0 1px 3px #000; letter-spacing: 0.04em; }
.map-shell.pins-in .map-pin { opacity: 1; scale: 1; }
.map-shell.is-inview.pins-in .map-pin::before { animation: pinPing 2.4s ease-out infinite; animation-delay: var(--d); }
@keyframes pinPing { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
.map-coords { position: absolute; left: 16px; bottom: 14px; padding: 6px 10px; border-radius: 10px; background: rgba(4, 10, 7, 0.75); border: 1px solid rgba(110, 231, 183, 0.25);
    font: 500 12px 'JetBrains Mono', monospace; color: #a7c4b5; font-variant-numeric: tabular-nums; }
.map-coords b { color: #ecfdf5; display: inline-block; min-width: 4ch; text-align: right; }

/* Features: pointer spotlight */
.feature-grid > [data-lightning-card] { position: relative; overflow: hidden; }
.feature-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
    background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(110, 231, 183, 0.14), transparent 65%); }
.feature-grid > [data-lightning-card] > :not(.feature-spot):not(.lightning-card-canvas) { position: relative; z-index: 1; }
.feature-grid.is-spot .feature-spot { opacity: 1; }

/* Rules: progress rail, read state, strike lights */
.rules-rail { position: absolute; left: -26px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: rgba(110, 231, 183, 0.12); }
.rules-rail i { position: absolute; inset: 0; border-radius: 2px; transform-origin: top; background: linear-gradient(#6ee7b7, #34d399); box-shadow: 0 0 10px rgba(52, 211, 153, 0.7); }
@media (max-width: 1000px) { .rules-rail { display: none; } }
.rules-list > [data-lightning-card] .font-pixel { transition: box-shadow 0.5s, border-color 0.5s; }
.rules-list > .is-read .font-pixel { box-shadow: 0 0 14px rgba(110, 231, 183, 0.35); border-color: rgba(110, 231, 183, 0.6); }
.strike-pips { display: inline-flex; gap: 5px; }
.strike-pips i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); transition: background-color 0.25s, box-shadow 0.25s, border-color 0.25s; }
.strike-pips.is-on i:nth-child(1) { background: #fbbf24; border-color: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.8); transition-delay: 0s; }
.strike-pips.is-on i:nth-child(2) { background: #fb923c; border-color: #fb923c; box-shadow: 0 0 8px rgba(251, 146, 60, 0.8); transition-delay: 0.35s; }
.strike-pips.is-on i:nth-child(3) { background: #ef4444; border-color: #ef4444; box-shadow: 0 0 12px rgba(239, 68, 68, 0.95); transition-delay: 0.7s; animation: strikeFlash 0.5s 0.7s 2; }
@keyframes strikeFlash { 50% { box-shadow: 0 0 22px 4px rgba(239, 68, 68, 1); } }

@media (prefers-reduced-motion: reduce) {
    .event-next__live, .event-countdown b.is-tick, .event-next .event-next__bg, .event-embers i, .map-radar, .map-pin::before, .join-caret, .strike-pips i { animation: none !important; }
    .map-pin { opacity: 1; scale: 1; }
    .strike-pips i:nth-child(1) { background: #fbbf24; } .strike-pips i:nth-child(2) { background: #fb923c; } .strike-pips i:nth-child(3) { background: #ef4444; }
}
.events-grid.is-single { grid-template-columns: minmax(0, 46rem); justify-content: center; }
.events-grid.is-single .event-list-wrap { display: none; }
.event-next__desc { margin: 0; color: #e7d9cf; max-width: 52ch; }
.event-next__desc[hidden] { display: none; }

/* ==========================================================================
   LOWER PAGE LIFE
   ========================================================================== */
/* ambient backdrop: aurora light + floating voxels, only past the builds reel */
.lower-ambient { opacity: 0; transition: opacity 1.2s ease; pointer-events: none; overflow: hidden; }
.lower-ambient.is-on { opacity: 1; }
.lower-ambient .aur { position: absolute; display: block; border-radius: 50%; will-change: transform; animation-play-state: paused; }
.lower-ambient.is-on .aur { animation-play-state: running; }
.aur--a { width: 70vw; height: 46vw; left: -18vw; top: 8vh; background: radial-gradient(closest-side, rgba(52, 211, 153, 0.13), transparent); animation: aurA 26s ease-in-out infinite alternate; }
.aur--b { width: 60vw; height: 40vw; right: -16vw; top: 38vh; background: radial-gradient(closest-side, rgba(45, 212, 191, 0.10), transparent); animation: aurB 32s ease-in-out infinite alternate; }
.aur--c { width: 50vw; height: 30vw; left: 26vw; bottom: -14vw; background: radial-gradient(closest-side, rgba(110, 231, 183, 0.08), transparent); animation: aurC 22s ease-in-out infinite alternate; }
@keyframes aurA { to { transform: translate3d(14vw, 10vh, 0) scale(1.15) rotate(8deg); } }
@keyframes aurB { to { transform: translate3d(-12vw, -8vh, 0) scale(1.1) rotate(-10deg); } }
@keyframes aurC { to { transform: translate3d(-10vw, -6vh, 0) scale(1.2); } }
.voxels { position: absolute; left: 0; right: 0; top: 0; height: 200vh; will-change: transform; }
/* an isometric voxel: top, left and right faces from one element */
.vx { position: absolute; display: block; transform: rotate(45deg) skew(-8deg, -8deg); border-radius: 2px;
    background: linear-gradient(135deg, rgba(167, 243, 208, 0.55) 0 50%, rgba(52, 211, 153, 0.35) 50% 100%);
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.35); animation: vxBob 7s ease-in-out infinite; animation-play-state: paused; }
.vx--gold { background: linear-gradient(135deg, rgba(253, 230, 138, 0.55) 0 50%, rgba(245, 158, 11, 0.35) 50% 100%); box-shadow: 0 0 10px rgba(251, 191, 36, 0.35); }
.lower-ambient.is-on .vx { animation-play-state: running; }
.voxels[data-depth="0.06"] .vx { opacity: 0.35; }
.voxels[data-depth="0.14"] .vx { opacity: 0.55; }
.voxels[data-depth="0.26"] .vx { opacity: 0.4; filter: blur(1px); }
@keyframes vxBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* marquee bands */
.marquee { position: relative; z-index: 5; overflow: hidden; margin: 8px 0; padding: 18px 0; rotate: -1.6deg; scale: 1.04;
    background: linear-gradient(180deg, rgba(4, 18, 11, 0.92), rgba(6, 26, 16, 0.92)); border-block: 1px solid rgba(110, 231, 183, 0.22);
    box-shadow: 0 0 40px rgba(52, 211, 153, 0.08); }
.marquee--rev { rotate: 1.4deg; }
.marquee__track { display: flex; width: max-content; animation: mq 38s linear infinite; animation-play-state: paused; }
.marquee.is-inview .marquee__track { animation-play-state: running; }
.marquee--rev .marquee__track { animation-name: mqRev; animation-duration: 30s; }
.marquee__set { display: flex; align-items: center; flex-shrink: 0; }
.mq-item { padding: 0 26px; font: 700 clamp(28px, 4.6vw, 58px)/1 'Chakra Petch', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1.2px rgba(110, 231, 183, 0.55); }
.mq-item--solid { color: #e8f5ee; -webkit-text-stroke: 0; text-shadow: 0 0 22px rgba(52, 211, 153, 0.35); }
.mq-star { color: #34d399; font-size: clamp(16px, 2vw, 26px); text-shadow: 0 0 12px rgba(52, 211, 153, 0.8); }
@keyframes mq { to { transform: translateX(-50%); } }
@keyframes mqRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* quest path: energy keeps flowing once all four steps are lit */
.quest-path__flow { fill: none; stroke: #ecfdf5; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 22; opacity: 0;
    filter: drop-shadow(0 0 5px rgba(110, 231, 183, 1)); transition: opacity 0.6s; animation: questFlow 1.4s linear infinite; animation-play-state: paused; }
#joinSteps.is-complete .quest-path__flow { opacity: 0.9; }
#joinSteps.is-complete.is-inview .quest-path__flow { animation-play-state: running; }
@keyframes questFlow { to { stroke-dashoffset: -25; } }
#joinSteps [data-lightning-card].is-lit .font-pixel { animation: stepPulse 2.8s ease-in-out infinite; }
@keyframes stepPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(110, 231, 183, 0); } 50% { box-shadow: 0 0 0 5px rgba(110, 231, 183, 0.12), 0 0 16px rgba(52, 211, 153, 0.35); } }

/* Halloween event card: a flickering lantern glow */
.event-lantern { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(60% 70% at 85% 100%, rgba(251, 146, 60, 0.30), transparent 70%), radial-gradient(40% 50% at 10% 0%, rgba(168, 85, 247, 0.16), transparent 70%); }
.event-next[data-theme="halloween"] .event-lantern { display: block; }
.event-next.is-inview[data-theme="halloween"] .event-lantern { animation: lantern 3.2s steps(1) infinite; }
@keyframes lantern { 0%, 100% { opacity: 1; } 12% { opacity: 0.82; } 14% { opacity: 1; } 47% { opacity: 0.9; } 49% { opacity: 0.7; } 51% { opacity: 1; } 78% { opacity: 0.86; } }

/* features: light wave rolling across the grid, icon bob, pointer tilt */
#featureGrid { perspective: 900px; }
#featureGrid [data-lightning-card] { position: relative; overflow: hidden; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s, box-shadow 0.3s; }
#featureGrid [data-lightning-card]:hover { transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-4px); }
.feature-wave { position: absolute; inset: -40% -60%; z-index: 0; pointer-events: none; translate: -60% 0;
    background: linear-gradient(105deg, transparent 42%, rgba(167, 243, 208, 0.08) 48%, rgba(236, 253, 245, 0.16) 50%, rgba(167, 243, 208, 0.08) 52%, transparent 58%);
    animation: featWave 6s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-delay: calc(var(--i) * 0.18s); animation-play-state: paused; }
#featureGrid.is-inview .feature-wave { animation-play-state: running; }
@keyframes featWave { 0%, 55% { translate: -60% 0; } 85%, 100% { translate: 60% 0; } }
#featureGrid .rounded-2xl { animation: iconBob 4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.6s); animation-play-state: paused; }
#featureGrid.is-inview .rounded-2xl { animation-play-state: running; }
@keyframes iconBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }

/* map: a few players wander while the radar sweeps */
.map-walker { position: absolute; z-index: 2; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fde68a; box-shadow: 0 0 8px rgba(253, 230, 138, 0.9);
    animation-duration: 18s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: paused; }
.map-shell.is-inview .map-walker { animation-play-state: running; }
.map-walker--a { left: 34%; top: 46%; animation-name: walkA; }
.map-walker--b { left: 64%; top: 58%; animation-name: walkB; animation-duration: 22s; background: #f9a8d4; box-shadow: 0 0 8px rgba(249, 168, 212, 0.9); }
.map-walker--c { left: 50%; top: 30%; animation-name: walkC; animation-duration: 26s; background: #bae6fd; box-shadow: 0 0 8px rgba(186, 230, 253, 0.9); }
@keyframes walkA { 0%, 100% { translate: 0 0; } 25% { translate: 60px 20px; } 50% { translate: 90px -30px; } 75% { translate: 20px -50px; } }
@keyframes walkB { 0%, 100% { translate: 0 0; } 30% { translate: -70px -10px; } 60% { translate: -30px 40px; } 80% { translate: 30px 20px; } }
@keyframes walkC { 0%, 100% { translate: 0 0; } 20% { translate: -40px 30px; } 55% { translate: 50px 50px; } 80% { translate: 70px 0; } }

@media (prefers-reduced-motion: reduce) {
    .lower-ambient .aur, .vx, .marquee__track, .quest-path__flow, #joinSteps [data-lightning-card].is-lit .font-pixel, .event-lantern, .feature-wave, #featureGrid .rounded-2xl, .map-walker { animation: none !important; }
    #featureGrid [data-lightning-card] { transform: none !important; }
}

/* Center card: room between Riolu's feet and the "Official Discord" badge */
.trainer-card--partner .trainer-chassis { padding-top: 4.25rem !important; }

/* ==========================================================================
   BUILT BY SPEEDY: full-width plates and a full-size viewer
   ========================================================================== */
.sb { position: relative; padding: 4.5rem 0 3rem; }
.sb-head { max-width: 72rem; margin: 0 auto 2rem; padding: 0 clamp(1rem, 5vw, 4rem); }
.sb-title__name { color: #c4b5fd; text-shadow: 0 3px 18px rgba(139, 92, 246, 0.45); }
.sb-plates { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.sbp__frame { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; height: min(56.25vw, 88vh); overflow: hidden; cursor: zoom-in;
    background: #0b0816; transform-origin: 50% 50%; }
.sbp__media { position: absolute; inset: -4% 0; display: block; }
.sbp__media img { width: 100%; height: 100%; object-fit: cover; display: block; outline: 1px solid oklch(1 0 0 / 0.1); outline-offset: -1px; }
/* caption: a soft scrim at the foot, the name set large */
.sbp__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
    padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 5vw, 4rem) clamp(1.1rem, 3vw, 2.4rem);
    background: linear-gradient(0deg, rgba(5, 3, 12, 0.82) 0%, rgba(5, 3, 12, 0.45) 45%, rgba(5, 3, 12, 0) 100%); pointer-events: none; }
.sbp__name { font: 700 clamp(1.6rem, 5vw, 4.25rem)/0.95 'Chakra Petch', sans-serif; text-transform: uppercase; letter-spacing: -0.01em; color: #f5f3ff;
    text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
.sbp__by { flex-shrink: 0; font: 600 clamp(0.8rem, 1.2vw, 0.95rem)/1.2 'Space Grotesk', sans-serif; color: #c4b5fd; }
.sbp__expand { position: absolute; z-index: 2; top: clamp(0.75rem, 2vw, 1.25rem); right: clamp(0.75rem, 2vw, 1.25rem); width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    color: #f5f3ff; background: rgba(11, 8, 22, 0.6); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    opacity: 0; scale: 0.92; transition-property: opacity, scale; transition-duration: 180ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.sbp__expand svg { width: 20px; height: 20px; }
.sbp__frame:hover .sbp__expand, .sbp__frame:focus-visible .sbp__expand { opacity: 1; scale: 1; }
.sbp__frame:focus-visible { outline: 3px solid #c4b5fd; outline-offset: -3px; }
@media (hover: none) { .sbp__expand { opacity: 0.9; scale: 1; } }

/* viewer */
.sbx { padding: 0; border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; color: #f5f3ff; overflow: hidden; }
.sbx::backdrop { background: rgba(5, 3, 12, 0.92); }
.sbx[open] { display: grid; place-items: center; }
.sbx__figure { margin: 0; display: grid; gap: 0.9rem; justify-items: center; width: min(92vw, calc((100dvh - 8rem) * 16 / 9)); }
.sbx__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 14px; background: #0b0816;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); outline: 1px solid oklch(1 0 0 / 0.1); outline-offset: -1px;
    opacity: 0; scale: 0.97; transition-property: opacity, scale; transition-duration: 260ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.sbx__img.is-in { opacity: 1; scale: 1; }
.sbx__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%; }
.sbx__name { font: 700 clamp(1.1rem, 2.4vw, 1.6rem)/1.1 'Chakra Petch', sans-serif; text-transform: uppercase; }
.sbx__count { font: 500 0.9rem 'Space Grotesk', sans-serif; color: #c4b5fd; font-variant-numeric: tabular-nums; }
.sbx__btn { all: unset; position: fixed; z-index: 2; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; cursor: pointer; color: #f5f3ff;
    background: rgba(29, 21, 52, 0.75); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(196, 181, 253, 0.25);
    transition-property: background-color, scale; transition-duration: 150ms; transition-timing-function: ease-out; }
.sbx__btn svg { width: 22px; height: 22px; }
.sbx__btn:hover { background: rgba(59, 42, 102, 0.9); }
.sbx__btn:active { scale: 0.96; }
.sbx__btn:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 3px; }
.sbx__btn--prev { left: max(16px, env(safe-area-inset-left)); top: 50%; translate: 0 -50%; }
.sbx__btn--next { right: max(16px, env(safe-area-inset-right)); top: 50%; translate: 0 -50%; }
.sbx__btn--close { right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); }
@media (max-width: 640px) {
    .sbx__btn--prev, .sbx__btn--next { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); translate: none; }
    .sbx__figure { width: 94vw; }
}
@media (prefers-reduced-motion: reduce) { .sbx__img { scale: 1; transition-property: opacity; } }
.bat-strip__thumb { border: 1px solid rgba(196, 181, 253, 0.32); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
a.bat-chip { text-decoration: none; transition: border-color 0.15s, background-color 0.15s; }
a.bat-chip:hover { border-color: rgba(196, 181, 253, 0.7); background: rgba(167, 139, 250, 0.22); }

/* ==========================================================================
   PERFORMANCE: below the hero, one baked background instead of four blended
   full-screen layers; ambient light holds still; voxels without blur.
   ========================================================================== */
.lower-bg { background: #03080a url('Public/opt/bg_lower.webp') center / cover no-repeat; opacity: 0; pointer-events: none; }
.past-hero .lower-bg { opacity: 1; }
.past-hero #parallaxBgScroll, .past-hero .forest-veil, .past-hero #forestNearWrap, .past-hero #forestShade { visibility: hidden; }
.lower-ambient .aur { animation: none !important; will-change: auto; }
.voxels[data-depth="0.26"] .vx { filter: none; opacity: 0.32; }

/* Nothing may widen the page sideways (cards waiting to slide in, the tilted marquee bands).
   `clip` cuts the overflow without creating a scroll container, so pinned sections keep working. */
html, body { overflow-x: clip; }

/* live event: the countdown counts to the end */
.event-countdown[data-mode="end"]::before { content: "Ends in"; align-self: center; margin-right: 6px; font: 600 0.78rem 'Space Grotesk', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #fdba74; }

/* ==========================================================================
   HALLOWEEN 2026 GUIDE (this section only: night purple + pumpkin orange)
   ========================================================================== */
.hw26 { --hw-night: #120a1c; --hw-ink: #f6f0ff; --hw-dim: #cbbfe0; --hw-orange: #fb923c; --hw-orange-hi: #fdba74; --hw-purple: #a855f7; --hw-line: rgba(251, 146, 60, 0.22);
    position: relative; z-index: 2; padding: clamp(3.5rem, 7vw, 6rem) 0; color: var(--hw-ink);
    background: radial-gradient(80% 50% at 50% 0%, rgba(124, 45, 18, 0.35), transparent 70%), radial-gradient(60% 40% at 90% 60%, rgba(88, 28, 135, 0.28), transparent 70%), linear-gradient(180deg, rgba(18, 10, 28, 0) 0%, var(--hw-night) 12%, var(--hw-night) 88%, rgba(18, 10, 28, 0) 100%); }
.hw26[hidden] { display: none; }
.hw-wrap { max-width: 68rem; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 3rem); display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
.hw-h3 { margin: 0 0 0.6rem; font: 700 clamp(1.5rem, 3vw, 2.1rem)/1.05 'Chakra Petch', sans-serif; text-transform: uppercase; letter-spacing: -0.005em; color: var(--hw-ink); text-wrap: balance; }
.hw-p { margin: 0 0 1rem; max-width: 60ch; color: var(--hw-dim); font: 400 1rem/1.6 'Space Grotesk', sans-serif; text-wrap: pretty; }
.hw-p strong, .hw-lede strong, .hw-pass strong { color: var(--hw-ink); font-weight: 700; }

/* header */
.hw-head { display: grid; justify-items: center; text-align: center; gap: 1rem; }
.hw-head__pumpkin { width: 64px; height: 64px; color: var(--hw-orange); filter: drop-shadow(0 6px 18px rgba(251, 146, 60, 0.45)); }
.hw-head__pumpkin svg { width: 100%; height: 100%; }
.hw-title { margin: 0; font: 700 clamp(2.4rem, 7vw, 5.25rem)/0.95 'Chakra Petch', sans-serif; text-transform: uppercase; letter-spacing: -0.02em; color: var(--hw-ink); text-wrap: balance;
    text-shadow: 0 4px 30px rgba(251, 146, 60, 0.35); }
.hw-lede { margin: 0; max-width: 52ch; color: var(--hw-dim); font: 400 clamp(1rem, 1.6vw, 1.15rem)/1.55 'Space Grotesk', sans-serif; }
.hw-countdown { display: flex; gap: 0.6rem; }
.hw-countdown span { display: grid; justify-items: center; min-width: 4.6rem; padding: 0.7rem 0.6rem 0.55rem; border-radius: 14px; background: rgba(30, 14, 8, 0.8);
    box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.32), 0 10px 26px -12px rgba(0, 0, 0, 0.7); }
.hw-countdown b { font: 700 clamp(1.6rem, 3.6vw, 2.2rem)/1 'Chakra Petch', sans-serif; color: var(--hw-ink); font-variant-numeric: tabular-nums; }
.hw-countdown small { margin-top: 4px; font: 600 0.7rem 'Space Grotesk', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hw-orange-hi); }
.hw-pass { margin: 0; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.1rem; border-radius: 999px; background: rgba(251, 146, 60, 0.1);
    box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.3); color: var(--hw-dim); font: 500 0.95rem/1.4 'Space Grotesk', sans-serif; text-align: left; }
.hw-pass i { color: var(--hw-orange); flex-shrink: 0; }

/* pumpkin hunt + podium */
.hw-hunt { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: end; }
.hw-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.hw-facts li { color: var(--hw-dim); font: 400 1rem/1.5 'Space Grotesk', sans-serif; }
.hw-facts li strong { color: var(--hw-orange-hi); }
.hw-facts__k { color: var(--hw-ink); font-weight: 700; }
.hw-podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; align-items: end; }
.hw-step { display: grid; gap: 0.7rem; align-content: end; }
.hw-step__prizes { display: grid; gap: 0.2rem; text-align: center; font: 500 0.88rem/1.35 'Space Grotesk', sans-serif; color: var(--hw-dim); }
.hw-step__prizes span:first-child { color: var(--hw-ink); font-weight: 700; }
.hw-step__prizes small { font-size: 0.75rem; color: #a99bc4; }
.hw-step__star { color: var(--hw-orange-hi) !important; font-size: 1rem; }
.hw-step__block { display: grid; place-items: center; border-radius: 14px 14px 6px 6px; transform-origin: 50% 100%;
    background: linear-gradient(180deg, #3b1d5c 0%, #22113a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(168, 85, 247, 0.3), 0 18px 34px -16px rgba(0, 0, 0, 0.8); }
.hw-step__block b { font: 700 clamp(1.3rem, 2.6vw, 1.8rem)/1 'Chakra Petch', sans-serif; color: var(--hw-ink); }
.hw-step--1 .hw-step__block { height: 9rem; background: linear-gradient(180deg, #c2410c 0%, #7c2d12 100%); box-shadow: inset 0 1px 0 rgba(255, 237, 213, 0.35), 0 0 40px rgba(251, 146, 60, 0.35), 0 18px 34px -16px rgba(0, 0, 0, 0.8); }
.hw-step--2 .hw-step__block { height: 6.5rem; }
.hw-step--3 .hw-step__block { height: 4.75rem; }
/* podium rises 3rd → 2nd → 1st the first time it's seen */
.motion-ok .hw-podium:not(.is-in) .hw-step__block { scale: 1 0.06; }
.motion-ok .hw-podium:not(.is-in) .hw-step__prizes { opacity: 0; translate: 0 10px; }
.hw-step__block, .hw-step__prizes { transition-property: scale, opacity, translate; transition-duration: 700ms, 400ms, 500ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.hw-step--3 .hw-step__block { transition-delay: 0ms; } .hw-step--3 .hw-step__prizes { transition-delay: 350ms; }
.hw-step--2 .hw-step__block { transition-delay: 200ms; } .hw-step--2 .hw-step__prizes { transition-delay: 550ms; }
.hw-step--1 .hw-step__block { transition-delay: 420ms; } .hw-step--1 .hw-step__prizes { transition-delay: 800ms; }

/* candy flow */
.hw-flow { display: grid; grid-template-columns: minmax(0, 1fr) 3rem auto 3rem minmax(0, 1fr); align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.hw-flow__label { display: block; margin-bottom: 0.6rem; font: 600 0.78rem 'Space Grotesk', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hw-orange-hi); }
.hw-srcs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.hw-src { padding: 0.4rem 0.75rem; border-radius: 999px; background: rgba(168, 85, 247, 0.12); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.32); color: var(--hw-ink); font: 500 0.88rem 'Space Grotesk', sans-serif; }
.hw-flow__pipe { height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--hw-orange) 0 8px, transparent 8px 16px); background-size: 16px 3px; opacity: 0.7;
    animation: hwFlow 0.9s linear infinite; animation-play-state: paused; }
.hw26.is-inview .hw-flow__pipe { animation-play-state: running; }
@keyframes hwFlow { to { background-position: 16px 0; } }
.hw-flow__core { display: grid; justify-items: center; gap: 0.5rem; padding: 0 0.4rem; }
.hw-flow__candy { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; color: #fff7ed;
    background: radial-gradient(circle at 35% 30%, #fdba74, #ea580c 70%); box-shadow: 0 0 0 6px rgba(251, 146, 60, 0.15), 0 0 46px rgba(251, 146, 60, 0.55);
    animation: hwGlow 3.2s ease-in-out infinite; animation-play-state: paused; }
.hw26.is-inview .hw-flow__candy { animation-play-state: running; }
@keyframes hwGlow { 0%, 100% { box-shadow: 0 0 0 6px rgba(251, 146, 60, 0.15), 0 0 40px rgba(251, 146, 60, 0.45); } 50% { box-shadow: 0 0 0 9px rgba(251, 146, 60, 0.1), 0 0 62px rgba(251, 146, 60, 0.7); } }
.hw-flow__name { font: 700 0.95rem 'Chakra Petch', sans-serif; text-transform: uppercase; color: var(--hw-ink); white-space: nowrap; }
.hw-shop { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.9rem; border-radius: 14px; background: rgba(30, 14, 8, 0.6); box-shadow: inset 0 0 0 1px var(--hw-line); }
.hw-shop + .hw-shop { margin-top: 0.5rem; }
.hw-shop i { margin-top: 3px; color: var(--hw-orange); }
.hw-shop b { display: block; font: 700 0.95rem 'Space Grotesk', sans-serif; color: var(--hw-ink); }
.hw-shop span { font: 400 0.85rem/1.4 'Space Grotesk', sans-serif; color: var(--hw-dim); }
.hw-wares { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.25rem; }
.hw-wares span { padding: 0.4rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: var(--hw-dim); font: 500 0.88rem 'Space Grotesk', sans-serif; }
.hw-wares .hw-wares__star { color: #1c0b02; background: linear-gradient(180deg, #fdba74, #fb923c); box-shadow: 0 6px 18px -6px rgba(251, 146, 60, 0.7); font-weight: 700; }

/* welcome gift chest */
.hw-gift { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.hw-chest { all: unset; position: relative; display: grid; justify-items: center; gap: 0.6rem; width: clamp(150px, 22vw, 200px); padding: 1rem; border-radius: 22px; cursor: pointer;
    background: rgba(30, 14, 8, 0.55); box-shadow: inset 0 0 0 1px var(--hw-line); transition-property: scale, box-shadow; transition-duration: 160ms; transition-timing-function: ease-out; }
.hw-chest:hover { box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.55), 0 0 30px rgba(251, 146, 60, 0.18); }
.hw-chest:active { scale: 0.96; }
.hw-chest:focus-visible { outline: 2px solid var(--hw-orange-hi); outline-offset: 4px; }
.hw-chest__art { width: 100%; height: auto; overflow: visible; }
.hw-chest__lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
.hw-chest[aria-expanded="true"] .hw-chest__lid { transform: translateY(-13px) rotate(-5deg); }
.hw-chest__glow { position: absolute; left: 50%; top: 42%; width: 70%; height: 30%; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0;
    background: radial-gradient(closest-side, rgba(253, 186, 116, 0.9), transparent); transition: opacity 400ms ease-out; }
.hw-chest[aria-expanded="true"] .hw-chest__glow { opacity: 1; }
.hw-chest__hint { font: 600 0.8rem 'Space Grotesk', sans-serif; color: var(--hw-orange-hi); }
.hw-loot { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hw-loot li { padding: 0.5rem 0.9rem; border-radius: 12px; background: rgba(251, 146, 60, 0.12); box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.35); color: var(--hw-ink); font: 600 0.92rem 'Space Grotesk', sans-serif;
    transition-property: opacity, translate, scale; transition-duration: 380ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.motion-ok .hw-gift:not(.is-open) .hw-loot li { opacity: 0.35; translate: 0 6px; scale: 0.96; }
.hw-loot li:nth-child(2) { transition-delay: 80ms; } .hw-loot li:nth-child(3) { transition-delay: 160ms; } .hw-loot li:nth-child(4) { transition-delay: 240ms; }

/* games & activities: a quest log */
.hw-quests { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hw-line); background: rgba(18, 10, 28, 0.6); }
.hw-quest { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem; transition: background-color 150ms ease-out; }
.hw-quest + .hw-quest { border-top: 1px solid rgba(251, 146, 60, 0.12); }
.hw-quest:hover { background: rgba(251, 146, 60, 0.05); }
.hw-quest__icon { width: 2.75rem; height: 2.75rem; border-radius: 12px; display: grid; place-items: center; color: var(--hw-orange); background: rgba(251, 146, 60, 0.1); font-size: 1.1rem; }
.hw-quest__name { margin: 0; font: 700 1.05rem 'Chakra Petch', sans-serif; text-transform: uppercase; letter-spacing: 0.01em; color: var(--hw-ink); }
.hw-quest__desc { margin: 0.2rem 0 0; color: var(--hw-dim); font: 400 0.92rem/1.5 'Space Grotesk', sans-serif; max-width: 62ch; }
.hw-quest__reward { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; max-width: 18rem; }
.hw-chip { padding: 0.32rem 0.65rem; border-radius: 999px; white-space: nowrap; background: rgba(251, 146, 60, 0.12); box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.32);
    color: var(--hw-orange-hi); font: 600 0.82rem 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
.hw-chip i { font-size: 0.8em; }
.hw-secret { margin: 1.25rem 0 0; display: flex; align-items: center; gap: 0.6rem; color: var(--hw-dim); font: 400 1rem/1.5 'Space Grotesk', sans-serif; }
.hw-secret i { color: var(--hw-purple); flex-shrink: 0; }
.hw-secret strong { color: var(--hw-ink); }

@media (max-width: 860px) {
    .hw-hunt, .hw-gift { grid-template-columns: 1fr; }
    .hw-gift { justify-items: start; }
    .hw-flow { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .hw-flow__pipe { width: 3px; height: 2rem; background: repeating-linear-gradient(180deg, var(--hw-orange) 0 8px, transparent 8px 16px); background-size: 3px 16px; animation-name: hwFlowV; }
    .hw-srcs { justify-content: center; }
    .hw-flow__col { width: 100%; }
    .hw-shop { text-align: left; }
}
@keyframes hwFlowV { to { background-position: 0 16px; } }
@media (max-width: 560px) {
    .hw-quest { grid-template-columns: 2.5rem minmax(0, 1fr); }
    .hw-quest__reward { grid-column: 2; justify-content: flex-start; max-width: none; }
    .hw-countdown span { min-width: 4rem; }
}
@media (prefers-reduced-motion: reduce) { .hw-flow__pipe, .hw-flow__candy { animation: none !important; } }

/* Halloween guide: teaser before the gates open; reveal at the opening moment */
.hw-teaser-note { display: none; margin: 0; color: var(--hw-dim); font: 500 0.95rem/1.5 'Space Grotesk', sans-serif; }
.hw-cd-s { display: none !important; }
.hw--teaser .hw-reveal { display: none; }
.hw--teaser .hw-teaser-note { display: block; }
.hw--teaser .hw-cd-s { display: grid !important; }
.hw--teaser { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hw--teaser .hw-head__pumpkin { animation: hwFlicker 3.6s steps(1) infinite; }
@keyframes hwFlicker { 0%, 100% { opacity: 1; } 8% { opacity: 0.55; } 10% { opacity: 1; } 52% { opacity: 0.8; } 54% { opacity: 1; } }
/* the gates open: the details rise in, one after another */
.hw--opening .hw-reveal { animation: hwReveal 900ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.hw--opening .hw-hunt { animation-delay: 120ms; } .hw--opening .hw-candy { animation-delay: 240ms; } .hw--opening .hw-gift { animation-delay: 360ms; } .hw--opening .hw-games { animation-delay: 480ms; }
@keyframes hwReveal { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .hw--teaser .hw-head__pumpkin, .hw--opening .hw-reveal { animation: none !important; } }
.hw-lede strong { white-space: nowrap; }

/* longer server IP (play.thisiscozyhouse.com): keep labels on one line and let the IP shrink a touch on phones */
#copyIpHeroBtn .font-pixel, #copyIpStepCard { white-space: nowrap; flex-shrink: 0; }
#heroIpText { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
    #copyIpHeroBtn { padding-left: 1rem; padding-right: 1rem; gap: 0.6rem; }
    #heroIpText { font-size: 0.92rem; }
}
/* step 4 ticket: size the IP to the ticket itself so the copy button never covers it */
.hud-notched-ticket { container-type: inline-size; gap: 0.6rem; }
.hud-notched-ticket > div:first-child { min-width: 0; }
#joinIpText { white-space: nowrap; font-size: min(1.125rem, calc((100cqi - 8.5rem) / 12.4)); }
@container (max-width: 360px) {
    #copyIpStepCard { padding: 0; width: 2.75rem; height: 2.75rem; justify-content: center; }
    #copyIpStepCard > span:not(.icon-swap) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    #joinIpText { font-size: min(1.125rem, calc((100cqi - 5.5rem) / 12.4)); }
}