@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--gold:#d6ad58;--bg:#090b0e;--muted:#a9adb2;--border:#d6ad5844}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#f6f6f5;font-family:Inter,Arial,sans-serif}a{text-decoration:none;color:inherit}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Barlow Condensed',Impact,sans-serif;line-height:1}em{font-style:normal;color:var(--gold)}.header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:#0b0d10;border-bottom:1px solid var(--border);position:relative;z-index:10}.brand{display:flex;align-items:center;gap:12px}.brand img{width:58px;height:58px;object-fit:contain}.brand span{display:flex;flex-direction:column;line-height:.92}.brand strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:37px;letter-spacing:1px}.brand small{color:var(--gold);font-size:13px;letter-spacing:8px;text-align:center}.nav{display:flex;align-items:center;gap:clamp(12px,2vw,35px);font-size:13px;font-weight:700}.nav a:hover,.text-link:hover{color:var(--gold)}.nav .panel{border:1px solid var(--gold);border-radius:6px;padding:12px}.menu{display:none;background:none;border:1px solid var(--gold);color:#fff;border-radius:6px;padding:7px 11px;font-size:21px}.hero{min-height:620px;position:relative;display:flex;align-items:center;padding:65px 5vw;background:linear-gradient(90deg,#07090bed 0%,#07090bc9 42%,#07090b28 100%),url('/assets/images/hero-winter.svg') center/cover}.hero-content{max-width:690px;z-index:1}.kicker{font-size:11px;color:var(--gold);letter-spacing:3px;font-weight:800;margin-bottom:16px}.hero h1{font-size:clamp(56px,7.5vw,104px);font-weight:900;letter-spacing:-1px;margin-bottom:12px}.hero h3{font-size:clamp(24px,2.7vw,36px);margin-bottom:14px}.hero-content>p:not(.kicker){font-size:14px;color:#d8dbdc;max-width:450px;line-height:1.65}.btn{display:inline-flex;align-items:center;gap:20px;background:var(--gold);color:#0c0c0c;font-size:13px;font-weight:800;padding:14px 20px;border-radius:7px;margin-top:8px}.btn:hover{background:#f0c76c}.btn.small{padding:11px 14px;font-size:12px}.promo{position:absolute;right:5%;bottom:45px;width:295px;border:1px solid var(--gold);border-radius:9px;padding:23px;background:linear-gradient(130deg,#0c1014f5,#252018ef);box-shadow:0 15px 35px #0008}.promo h2{font-size:36px;margin-bottom:10px}.promo>p:not(.kicker){font-size:12px;line-height:1.6;color:#d3d4d5}.wrap{max-width:1360px;margin:auto;padding:75px 30px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:25px}.section-heading h2,.center h2,.community h2{font-size:clamp(38px,4vw,54px);margin-bottom:0}.text-link{font-size:12px;font-weight:800;color:var(--gold)}.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.game{position:relative;display:block;height:225px;overflow:hidden;border:1px solid #ffffff30;border-radius:9px;background:#141a20;transition:transform .2s,border-color .2s}.game:hover{transform:translateY(-4px);border-color:var(--gold)}.game img{width:100%;height:100%;object-fit:cover}.game:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#030405f5)}.game-label{position:absolute;z-index:1;bottom:15px;left:15px;right:10px;display:flex;flex-direction:column;gap:4px}.game-label b{font-size:16px}.game-label small{font-size:11px;color:#d5d5d5;line-height:1.35}.disclaimer{color:#a3a8ab;font-size:11px;margin:22px 0 0;line-height:1.5}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:30px 5vw;background:linear-gradient(90deg,#101417,#1a1712,#101417);border-block:1px solid var(--border)}.features>div{display:grid;grid-template-columns:40px 1fr;gap:3px 8px}.features span{grid-row:span 2;color:var(--gold);font-size:29px}.features b{font-size:13px;color:var(--gold)}.features small{font-size:11px;color:#c7c9c9}.center{text-align:center;max-width:780px}.center>p:not(.kicker){color:#b9bdc0;line-height:1.7;font-size:14px}.location{padding:25px 5vw;background:#101418;border-block:1px solid #ffffff1c;display:flex;flex-direction:column;gap:5px}.location b{font-size:13px;color:var(--gold)}.location small{font-size:11px;color:#b4b8bb}.community{max-width:1360px;margin:auto;padding:70px 30px;display:flex;align-items:center;justify-content:space-between;gap:25px}.community p:not(.kicker){color:#b9bdc0;font-size:13px;line-height:1.7;max-width:600px}footer{border-top:1px solid var(--border);padding:22px 5vw;display:flex;justify-content:space-between;gap:20px;color:#aeb1b3;font-size:11px}.directory{min-height:75vh}.directory h1,.detail h1{font-size:clamp(52px,6vw,78px)}.directory>p:not(.kicker){color:#bec2c4}.directory-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:30px}.detail{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center;min-height:650px}.detail>img{width:100%;border-radius:9px;border:1px solid var(--border)}.detail>div>p:not(.kicker){color:#c3c6c8;line-height:1.7}.detail .status{color:var(--gold)!important;font-weight:700;font-size:12px}
.snow {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}

.snow::before,
.snow::after {
    content: "";
    position: absolute;
    inset: -100% 0 0;
    background-repeat: repeat;
    will-change: transform;
}

.snow::before {
    opacity: .55;
    background-image:
        radial-gradient(3px 3px at 30px 40px, #fff 60%, transparent 100%),
        radial-gradient(4px 4px at 130px 120px, #fff 55%, transparent 100%),
        radial-gradient(2px 2px at 210px 65px, #fff 70%, transparent 100%),
        radial-gradient(5px 5px at 300px 180px, #fff 45%, transparent 100%);
    background-size: 360px 240px;
    animation: snowfall-near 18s linear infinite;
}

.snow::after {
    opacity: .32;
    background-image:
        radial-gradient(2px 2px at 50px 90px, #fff 60%, transparent 100%),
        radial-gradient(3px 3px at 180px 30px, #fff 55%, transparent 100%),
        radial-gradient(2px 2px at 280px 160px, #fff 65%, transparent 100%);
    background-size: 320px 210px;
    animation: snowfall-far 32s linear infinite;
}

@keyframes snowfall-near {
    from { transform: translate3d(-15px, -240px, 0); }
    to   { transform: translate3d(45px, 240px, 0); }
}

@keyframes snowfall-far {
    from { transform: translate3d(20px, -210px, 0); }
    to   { transform: translate3d(-30px, 210px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .snow::before,
    .snow::after {
        animation: none;
    }
}
@media(prefers-reduced-motion:reduce){.snow{animation:none}*{scroll-behavior:auto!important}}@media(max-width:1050px){.nav{gap:13px}.brand strong{font-size:30px}.brand img{width:47px}.promo{width:255px}.hero-content{max-width:550px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:800px){.header{height:73px}.menu{display:block}.nav{display:none;position:absolute;top:73px;left:0;right:0;background:#0b0d10;padding:20px 25px;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--border)}.nav.open{display:flex}.nav a{padding:8px 0}.hero{min-height:770px;align-items:flex-start;padding-top:65px}.promo{left:5vw;right:auto;bottom:38px}.features{grid-template-columns:repeat(2,1fr)}.directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail{grid-template-columns:1fr;gap:25px}.detail>img{max-height:350px;object-fit:cover}}@media(max-width:550px){.hero{padding:50px 22px;min-height:780px}.hero h1{font-size:57px}.promo{left:22px;right:22px;width:auto}.wrap{padding:55px 20px}.section-heading{flex-direction:column;align-items:flex-start;gap:12px}.game-grid,.directory-grid{grid-template-columns:1fr}.features{gap:22px;padding:26px 20px}.features>div{grid-template-columns:28px 1fr}.features span{font-size:23px}.features b{font-size:11px}.features small{font-size:10px}.community{padding:55px 20px;flex-direction:column;align-items:flex-start}footer{flex-wrap:wrap}.brand strong{font-size:27px}.brand small{font-size:10px;letter-spacing:6px}}


/* RESPAWN GRAPHICAL SNOW V2 */
.snow {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
    background: none !important;
    opacity: 1 !important;
    animation: none !important;
}

.snow::before,
.snow::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.snowflake {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    color: white;
    font-size: var(--size);
    opacity: var(--opacity);
    line-height: 1;
    text-shadow: 0 0 4px rgba(255,255,255,.35);
    animation: respawn-flake-fall var(--duration) linear infinite;
    animation-delay: var(--delay);
    pointer-events: none;
    user-select: none;
}

@keyframes respawn-flake-fall {
    from {
        transform: translate3d(var(--x), -50px, 0) rotate(0deg);
    }
    to {
        transform: translate3d(
            calc(var(--x) + var(--drift)),
            calc(100vh + 80px),
            0
        ) rotate(var(--rotation));
    }
}

@media (prefers-reduced-motion: reduce) {
    .snowflake {
        animation: none !important;
        display: none !important;
    }
}


/* RESPAWN GAME CARDS V2 */

.game-grid {
    gap: 20px;
}

.game {
    height: 285px;
    border-radius: 12px;
    border: 1px solid rgba(214,173,88,.25);
    background: #111820;
    isolation: isolate;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.game img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.game::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0) 25%,
        rgba(0,0,0,.35) 55%,
        rgba(0,0,0,.95) 100%
    );
}

.game-label {
    position: absolute;
    z-index: 2;
    left: 18px;
    right: 18px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow-wrap: anywhere;
}

.game-label b {
    font-size: 19px;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 2px 8px #000;
}

.game-label small {
    font-size: 12px;
    line-height: 1.5;
    color: #d7d7d7;
    text-shadow: 0 1px 5px #000;
}

.game:hover {
    transform: translateY(-5px);
    border-color: #d6ad58;
    box-shadow: 0 12px 30px rgba(0,0,0,.4);
}

.game:hover img {
    transform: scale(1.06);
}

@media (max-width: 550px) {
    .game {
        height: 250px;
    }

    .game-label b {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .game,
    .game img {
        transition: none;
    }
}


/* RESPAWN FESTIVE ARTWORK V3 — removable seasonal layer */
.hero {
 background-image:linear-gradient(90deg,rgba(5,8,12,.97) 0%,rgba(5,8,12,.88) 31%,rgba(5,8,12,.28) 70%,rgba(5,8,12,.55) 100%),url('/assets/images/hero-christmas.webp') !important;
 background-size:cover !important;
 background-position:center center !important;
 border-bottom:1px solid rgba(214,173,88,.35);
}
.header::before {
 content:"";position:absolute;top:0;left:0;right:0;height:30px;
 background:url('/assets/images/christmas-snowcap.svg') top center/100% 100% no-repeat;
 pointer-events:none;z-index:2;
}
.header {overflow:visible;}
.promo {backdrop-filter:blur(8px);background:linear-gradient(145deg,rgba(9,12,16,.94),rgba(30,24,15,.92));box-shadow:0 14px 36px #000a;}
.game {height:285px;isolation:isolate;border-color:rgba(214,173,88,.42);}
.game img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.game::after {content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,transparent 35%,rgba(3,5,8,.4) 60%,rgba(3,5,8,.97) 100%);}
.game-label {position:absolute;z-index:2;bottom:18px;left:16px;right:16px;gap:6px;}
.game-label b {color:white;font-size:18px;line-height:1.2;text-shadow:0 2px 6px #000;}
.game-label small {color:#e4e4e4;font-size:12px;line-height:1.4;text-shadow:0 2px 5px #000;}
.game:hover {border-color:#d6ad58;box-shadow:0 14px 35px #0009;}
@media(max-width:800px){.hero{background-position:55% center !important}.header::before{height:21px}.promo{backdrop-filter:none}}
@media(max-width:550px){.hero{background-position:57% center !important}.game{height:255px}}

/* RESPAWN HERO TEMPORARY RESTORE */
.hero {
    background-image:
        linear-gradient(90deg, #07090bed 0%, #07090bc9 42%, #07090b28 100%),
        url('/assets/images/hero-winter.svg') !important;
}


/* RESPAWN V4 EXACT REFERENCE: desktop image with functional HTML hotspots */
@media (min-width:1000px) {
  body > .header, header.header { display:none !important; }
  section.hero, .hero {
    display:block !important; position:relative !important; width:100% !important;
    min-height:0 !important; height:auto !important; aspect-ratio:2048 / 682 !important;
    padding:0 !important; margin:0 !important; border:0 !important;
    background: url('/assets/images/hero-reference-v4.webp') center / 100% 100% no-repeat !important;
  }
  .hero > :not(.rh-v4-hotspots) {display:none !important;}
  .hero .rh-v4-hotspots {display:block !important;position:absolute;inset:0;z-index:4;}
  .rh-v4-hotspots a {position:absolute;display:block;border-radius:5px;text-decoration:none;outline-offset:2px;}
  .rh-v4-hotspots a:hover {background:rgba(255,190,0,.12);box-shadow:inset 0 0 0 1px rgba(255,190,0,.5);}
  .rh-v4-hotspots a:focus-visible {outline:3px solid #ffca39;background:rgba(0,0,0,.25);}
}
@media (max-width:999px) {
  .hero .rh-v4-hotspots {display:none !important;}
  .hero {background-image:linear-gradient(90deg,#07090bed 0%,#07090bc9 42%,#07090b28 100%),url('/assets/images/hero-winter.svg') !important;}
}
/* Self-contained snowfall, independent of the old snow animation */
#rh-v4-snow {position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:60;}
#rh-v4-snow .rh-flake {position:absolute;top:-12vh;color:#fff;opacity:.8;user-select:none;
  animation:rh-v4-fall var(--duration) linear infinite;animation-delay:var(--delay);
  font-size:var(--size);left:var(--left);text-shadow:0 0 5px #fff8;}
@keyframes rh-v4-fall {0%{transform:translate3d(0,-12vh,0) rotate(0)}
  100%{transform:translate3d(var(--drift),115vh,0) rotate(180deg)}}
@media(prefers-reduced-motion:reduce){#rh-v4-snow{display:none!important}}

/* RESPAWN V4.1 HOTSPOT AND GAME CARD FIXES */
@media(min-width:1000px){
 .rh-v4-hotspots a[aria-label="Join Respawn Hosting Discord"]{border:0!important;box-shadow:none!important;background:transparent!important;}
 .rh-v4-hotspots a[aria-label="Join Respawn Hosting Discord"]:hover{box-shadow:inset 0 0 0 2px #ffcc44!important;background:rgba(255,204,68,.08)!important;}
 .rh-v4-hotspots a[aria-label="Join Respawn Hosting Discord"]:focus-visible{outline:3px solid #ffcc44!important;}
}
.game{overflow:hidden!important;border-radius:12px!important;background:#0b0e12!important;}
.game img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;display:block!important;}
.game::after{background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.16) 56%,rgba(0,0,0,.94) 100%)!important;}
.game-label{left:16px!important;right:16px!important;bottom:16px!important;}
.game-label b{font-size:19px!important;line-height:1.2!important;}
.game-label small{font-size:12px!important;line-height:1.4!important;}

/* RESPAWN V4.2 RESPONSIVE FIX — retains the exact Christmas reference image */
/* Cap desktop scaling: prevents embedded navigation, headings and hero
   from becoming enormous on high-resolution displays. */
@media (min-width:1000px) {
  section.hero, .hero {
    width:100% !important;
    max-width:1760px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:2048 / 682 !important;
    background-size:100% 100% !important;
    background-position:center !important;
  }
  /* Make the rest of the viewport match the artwork's dark surround. */
  body {background-color:#080b0f !important;}
  /* All hotspots are invisible even when hovered or pressed. */
  .rh-v4-hotspots a,
  .rh-v4-hotspots a:hover,
  .rh-v4-hotspots a:active {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    outline:none !important;
  }
  /* Accessibility: visible focus only for keyboard navigation. */
  .rh-v4-hotspots a:focus-visible {
    outline:3px solid #ffce42 !important;
    outline-offset:2px !important;
    background:transparent !important;
    box-shadow:none !important;
  }
}
/* Preserve existing mobile HTML layout, snowfall and card styles. */


/* RESPAWN V4.3 NAVIGATION ENHANCEMENTS */
/* Keep the existing artwork and snow. Only improve viewport behavior for page containers. */
html { overflow-x: clip; }
body { min-width: 0; }
/* Existing V4 image overlays remain transparent; visible keyboard focus is preserved. */
a:focus-visible { outline: 2px solid #f4c24d; outline-offset: 3px; }

/* RESPAWN V4.4 — FULL-WIDTH LAYOUT CORRECTION */

/* Remove the restrictive desktop hero width cap */
@media (min-width:1000px) {
    section.hero,
    .hero {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        height: auto !important;
        aspect-ratio: 2048 / 682 !important;
        background-size: 100% 100% !important;
    }
}

/* Allow homepage content to use more screen space */
@media (min-width:1400px) {
    #games.wrap {
        max-width: 1760px !important;
        padding-left: 48px !important;
        padding-right: 48px !important;
    }

    #games .game-grid {
        gap: 24px !important;
    }
}

/* Preserve responsive behavior on smaller displays */
@media (max-width:1399px) {
    #games.wrap {
        max-width: 1360px;
    }
}

/* RESPAWN V4.5 — CONTROLLED DESKTOP HERO HEIGHT */
@media (min-width: 1400px) {
    section.hero,
    .hero {
        width: 100% !important;
        max-width: none !important;
        height: 500px !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        background-size: 100% 100% !important;
    }
}