/* Horizon theme: Vital-style fonts + home page hero.
   Load AFTER horizon.css on every page. */

:root {
    --hz-blue: #08a9f5;
    --hz-blue-deep: #0b6fd6;
    --hz-ink: #070c16;
    --hz-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --hz-display: "Archivo", "Montserrat", system-ui, sans-serif;
}

/* ---------- Site-wide type ---------- */
body { font-family: var(--hz-ui); }
h1, h2, h3, .btn, button { font-family: var(--hz-ui); }

.site-nav a {
    font-family: var(--hz-ui);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.brand span { font-family: var(--hz-display); font-weight: 900; font-stretch: 125%; font-variation-settings: "wdth" 125; font-style: italic; letter-spacing: .02em; text-transform: uppercase; }

/* ---------- Home: header floats over the hero ---------- */
html body.home .site-header {
    position: absolute !important;
    top: 0 !important; left: 0; right: 0;
    z-index: 1000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.home main#main { position: relative; z-index: 0; }
body.home .site-nav a { color: rgba(255,255,255,.82); }
body.home .site-nav a:hover,
body.home .site-nav a.active { color: #fff; }

/* ---------- Hero ---------- */
.hz-hero {
    position: relative;
    isolation: isolate;
    min-height: min(100vh, 980px);
    min-height: min(100svh, 980px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(60% 55% at 78% 32%, rgba(64,116,190,.32), transparent 70%),
        radial-gradient(45% 40% at 18% 80%, rgba(8,169,245,.10), transparent 70%),
        linear-gradient(180deg, #121d31 0%, #0d1628 45%, #090f1c 100%);
}

.hz-snow { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hz-vignette {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7,12,22,.85) 0%, rgba(7,12,22,.35) 38%, transparent 60%),
        radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(5,9,17,.75) 100%);
}

.hz-hero-inner {
    position: relative;
    flex: 1;
    width: 100%;
    max-width: 1760px;
    margin: 0 auto;
    padding: clamp(110px, 16vh, 190px) clamp(20px, 5vw, 96px) 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hz-wordmark {
    margin: 0;
    font-family: var(--hz-display);
    font-weight: 900;
    font-stretch: 125%;
    font-variation-settings: "wdth" 125;
    text-transform: uppercase;
    font-size: clamp(56px, 10.5vw, 200px);
    line-height: .8;
    letter-spacing: -.045em;
    color: #fff;
    transform: skewX(-16deg);
    transform-origin: left bottom;
    margin-left: .06em;
    text-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.hz-tagline {
    margin: clamp(18px, 2.4vw, 34px) 0 0;
    font-weight: 800;
    font-size: clamp(13px, 1.05vw, 17px);
    letter-spacing: .32em;
    text-transform: uppercase;
    color: #fff;
}
.hz-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(22px, 2.6vw, 34px); align-items: center; }

.hz-play {
    position: relative;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 0 40px 0 34px;
    height: clamp(52px, 4.2vw, 62px);
    font-weight: 900; font-size: clamp(18px, 1.5vw, 24px); letter-spacing: .08em; text-transform: uppercase;
    color: #04121d; text-decoration: none;
    background: linear-gradient(180deg, #4cc3ff 0%, #08a9f5 55%, #0790d3 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
    transition: filter .15s, transform .15s;
}
.hz-play:hover { filter: brightness(1.1); transform: translateY(-1px); }
/* clip-path cuts off the normal focus outline, so draw it inside instead */
.hz-play:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px #fff; }
.hz-play:active, .hz-store:active { transform: translateY(1px); }
.hz-play svg { width: .7em; height: .7em; fill: currentColor; }
/* Same slanted shape as Play now, kept as a dark outline button.
   A clipped element can't show a normal border on the slant, so ::before draws the 1px frame. */
.hz-store {
    --cut: 18px;                       /* same slant as .hz-play */
    --edge: rgba(255,255,255,.28);
    position: relative;
    display: inline-flex; align-items: center; height: clamp(52px, 4.2vw, 62px);
    padding: 0 calc(22px + var(--cut)) 0 28px;
    font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
    color: #fff; text-decoration: none;
    background: rgba(8,14,26,.35);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
    transition: background .15s, transform .15s;
}
.hz-store::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--edge);
    clip-path: polygon(
        0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%, 0 0,
        1px 1px, 1px calc(100% - 1px), calc(100% - var(--cut) - .8px) calc(100% - 1px), calc(100% - 1.4px) 1px, 1px 1px);
    transition: background .15s;
}
.hz-store:hover { --edge: var(--hz-blue); background: rgba(8,169,245,.08); transform: translateY(-1px); }
.hz-store:focus-visible { outline: 0; --edge: #fff; background: rgba(255,255,255,.1); }

/* Bottom strip with the reflective floor, like a stage */
.hz-strip {
    position: relative;
    border-top: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(8,13,24,.55), rgba(7,11,20,.92));
}
.hz-strip::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(7,12,22,.65));
}
.hz-strip-inner {
    max-width: 1760px; margin: 0 auto;
    padding: 26px clamp(20px, 5vw, 96px);
    display: flex; flex-wrap: wrap; gap: 10px 34px; align-items: center;
    font-size: 15px; color: rgba(255,255,255,.75);
}
.hz-wipe { display: flex; align-items: center; gap: 12px; }
.hz-wipe::before { content: ""; width: 9px; height: 9px; background: var(--hz-blue); }
.hz-wipe b { color: #fff; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: 15px; }
.hz-wipe strong { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.hz-online { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hz-online a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.hz-online a:hover { border-color: var(--hz-blue); }
@media (prefers-reduced-motion: reduce) {
    .hz-play, .hz-store { transition: none; }
    .hz-play:hover, .hz-store:hover, .hz-play:active, .hz-store:active { transform: none; }
}

/* Content under the hero sits a little higher so it flows from the strip */
body.home .home-page { position: relative; z-index: 1; }

@media (max-width: 900px) {
    .hz-vignette { background: linear-gradient(180deg, rgba(7,12,22,.2), rgba(7,12,22,.75)); }
    .hz-online { margin-left: 0; }
}
@media (max-width: 600px) {
    .site-nav a { font-size: 12px; letter-spacing: .06em; }
    .hz-actions a { flex: 1 1 100%; justify-content: center; }
}



/* ---------- Header sign-in button (all pages) ---------- */
.hz-signin {
    display: inline-flex; align-items: center; gap: 9px;
    height: 40px; padding: 0 18px;
    font-family: var(--hz-ui); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; text-decoration: none;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(8,14,26,.35);
    transition: border-color .15s, background .15s;
    white-space: nowrap;
}
.hz-signin:hover { border-color: var(--hz-blue); background: rgba(8,169,245,.1); }
.hz-signin svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (max-width: 600px) {
    .hz-signin { height: 34px; padding: 0 12px; font-size: 11px; }
}

/* ---------- /link page (Atlas-style account setup) ---------- */
body.link-page main.hz-link {
    min-height: calc(100vh - 80px);
    background:
        radial-gradient(50% 40% at 50% 0%, rgba(8,169,245,.10), transparent 70%),
        linear-gradient(180deg, #0b1322, #080d18);
}
.hz-link-inner {
    max-width: 640px; margin: 0 auto;
    padding: clamp(56px, 9vh, 96px) 20px 90px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hz-pill {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 18px; border-radius: 999px;
    border: 1px solid rgba(8,169,245,.45); background: rgba(8,169,245,.08);
    color: var(--hz-blue); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.hz-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.hz-link-title {
    margin: 28px 0 0;
    font-family: var(--hz-ui); font-weight: 900;
    font-size: clamp(36px, 5vw, 56px); line-height: 1.05; letter-spacing: -.02em; color: #fff;
}
.hz-link-title span { color: var(--hz-blue); }
.hz-link-lead { margin: 18px 0 0; max-width: 560px; font-size: 17px; line-height: 1.6; color: rgba(225,234,246,.78); }

/* the linking panel that script.js fills in */
body.link-page .sync { width: 100%; margin-top: 48px; text-align: left; }
body.link-page .sync-panel {
    margin: 0; border-radius: 6px;
    border: 1px solid rgba(255,255,255,.08);
    background: #0d1524;
    box-shadow: none;
}
body.link-page .sync-badge { display: none; }
body.link-page .privacy-note { margin-top: 28px; max-width: 620px; text-align: left; }


/* ---------- Home top bar (own header, like Vital) ---------- */
.hz-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; gap: 24px;
    padding: 22px clamp(20px, 5vw, 96px);
    font-family: var(--hz-ui);
}
.hz-top-nav { display: flex; gap: clamp(18px, 2.2vw, 32px); }
.hz-top-nav a {
    color: rgba(255,255,255,.82); text-decoration: none;
    font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
}
.hz-top-nav a:hover, .hz-top-nav a[aria-current] { color: #fff; }
.hz-top-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.hz-cart { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; }
.hz-cart svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.hz-cart #cart-count[hidden] { display: inline !important; }
/* home has its own bar, so hide the old one if anything adds it */
body.hz-simple .site-header { display: none !important; }
body.hz-simple .hz-hero { min-height: 100vh; min-height: 100svh; }
@media (max-width: 600px) {
    .hz-top { padding: 14px 16px; gap: 12px; }
    .hz-top-nav { gap: 12px; }
    .hz-top-nav a { font-size: 11px; letter-spacing: .06em; }
    .hz-top-nav a[href*="discord"] { display: none; }
}


/* ---------- Home: no blue cover, let the site background show ---------- */
body.hz-simple .hz-hero { background: transparent !important; }
body.hz-simple main#main { padding-top: 0 !important; margin-top: 0 !important; background: transparent !important; }
body.hz-simple .hz-vignette {
    background: linear-gradient(90deg, rgba(5,9,17,.55) 0%, rgba(5,9,17,.15) 40%, transparent 60%) !important;
}
body.hz-simple .hz-strip { background: linear-gradient(180deg, rgba(8,13,24,.25), rgba(7,11,20,.7)) !important; }
body.hz-simple .hz-strip::before { display: none; }


/* ---------- Same top bar on every page ---------- */
html.hz-has-top .site-header { display: none !important; }
.hz-top--flow { position: relative; background: transparent; }
html.hz-has-top body.link-page main.hz-link { min-height: calc(100vh - 84px); }

/* ---------- Wordmark placement: top-left, lined up with the nav (like Vital) ---------- */
.hz-hero-inner, .hz-strip-inner { max-width: none !important; margin: 0 !important; }
body.hz-simple .hz-hero-inner {
    justify-content: flex-start;
    padding-top: clamp(130px, 22vh, 230px);
}
body.hz-simple .hz-wordmark {
    font-size: clamp(56px, 8.4vw, 168px);
    margin-left: -.01em;
}


/* Store credit + secure badge in the top bar */
.hz-secure, .hz-credit {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--hz-ui); font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.hz-secure { color: #2fd27a; }
.hz-secure svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.hz-credit { height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.7); }
.hz-credit strong { color: #2fd27a; font-weight: 900; letter-spacing: .02em; }
.hz-secure[hidden], .hz-credit[hidden] { display: none !important; }
@media (max-width: 760px) { .hz-secure, .hz-credit .lbl { display: none !important; } .hz-credit { height: 34px; padding: 0 10px; } }


/* Signed-in state of the top-right button */
.hz-signin.is-linked { border-color: rgba(47,210,122,.45); color: #fff; }
.hz-signin.is-linked svg { stroke: #2fd27a; stroke-width: 2.6; }
.hz-signin.is-linked:hover { border-color: #2fd27a; background: rgba(47,210,122,.08); }
.hz-top svg { flex: 0 0 auto; }

/* Discord locked until Steam is linked */
.sync .hz-locked { opacity: .45 !important; cursor: not-allowed !important; filter: grayscale(.6); }
.hz-steam-first {
    margin: 0 0 16px; padding: 12px 14px;
    border: 1px solid rgba(245,180,40,.45); background: rgba(245,180,40,.08);
    color: #ffd27a; font-weight: 700; font-size: 14px;
}
.hz-steam-first.hz-flash { animation: hz-shake .35s ease; }
@keyframes hz-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }


/* ---------- /servers page (Vital-style list) ---------- */
.hz-srv-wrap { max-width: 1760px; margin: 0 auto; padding: clamp(40px, 8vh, 90px) clamp(20px, 5vw, 96px) 110px; font-family: var(--hz-ui); color: #fff; }
.hz-srv-tabs { display: inline-flex; border: 1px solid rgba(255,255,255,.14); border-bottom: 0; background: rgba(8,13,24,.6); }
.hz-srv-tabs span { padding: 15px 20px 13px; font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 2px solid var(--hz-blue); }
.hz-srv-panel { border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(17,26,43,.92), rgba(11,18,31,.96)); padding: 26px 30px 12px; }
.hz-srv-panel h1 { margin: 0 0 18px; font-weight: 900; font-size: clamp(36px, 3.6vw, 50px); letter-spacing: .01em; text-transform: uppercase; line-height: 1; }
.hz-srv-head, .hz-srv-row { display: grid; grid-template-columns: minmax(200px, 1fr) 260px 280px 210px; gap: 0 28px; align-items: center; }
.hz-srv-head { padding: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hz-srv-row { padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.hz-srv-row:last-child { border-bottom: 0; }
.hz-srv-name { font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: .01em; }
.hz-srv-region { margin-top: 4px; color: rgba(255,255,255,.65); font-size: 15px; }
.hz-srv-players b { font-size: 22px; font-weight: 900; }
.hz-srv-players small { color: rgba(255,255,255,.55); font-size: 14px; margin-left: 2px; }
.hz-srv-bar { margin-top: 8px; height: 3px; background: rgba(255,255,255,.12); }
.hz-srv-bar i { display: block; height: 100%; background: #fff; }
.hz-srv-wipe b { display: block; font-size: 22px; font-weight: 900; }
.hz-srv-wipe span { display: block; margin-top: 4px; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.4; }
.hz-srv-actions { display: flex; gap: 10px; justify-content: flex-end; }
.hz-srv-copy {
    width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #fff; cursor: pointer; position: relative;
}
.hz-srv-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.hz-srv-copy:hover { border-color: var(--hz-blue); }
.hz-srv-copy.is-done { border-color: #2fd27a; color: #2fd27a; }
.hz-srv-connect {
    display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 30px 0 24px;
    font-weight: 900; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
    color: #04121d; background: linear-gradient(180deg, #4cc3ff 0%, #08a9f5 55%, #0790d3 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.hz-srv-connect:hover { filter: brightness(1.1); }
.hz-srv-connect.is-soon { background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); cursor: default; filter: none; }
.hz-srv-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 1001;
    padding: 12px 18px; background: #0d1626; border: 1px solid var(--hz-blue); color: #fff; font: 700 14px var(--hz-ui);
    transition: opacity .2s, transform .2s; pointer-events: none;
}
.hz-srv-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1000px) {
    .hz-srv-head { display: none; }
    .hz-srv-row { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
    .hz-srv-actions { grid-column: 1 / -1; justify-content: stretch; }
    .hz-srv-connect { flex: 1; }
}


/* ---------- Home: HORIZON shrinks into the top bar as soon as you scroll ---------- */
.hz-wm-space { height: 0; }
body.home .hz-wordmark { width: fit-content; }
html.hz-wm-ready body.home .hz-wordmark {
    position: fixed;
    z-index: 1001;
    top: var(--wm-top, 0px);
    left: var(--wm-left, 0px);
    margin: 0;
    transform-origin: left bottom;
    transform: skewX(-16deg);
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
    pointer-events: none;
}
html.hz-wm-ready body.home .hz-wm-space {
    height: var(--wm-h, 0px);
    transition: height .45s cubic-bezier(.2,.8,.2,1);
}
html.hz-wm-ready.hz-scrolled body.home .hz-wordmark {
    transform: translate(var(--wm-dx, 0px), var(--wm-dy, 0px)) scale(var(--wm-s, .25)) skewX(-16deg);
    pointer-events: auto;
}
html.hz-wm-ready.hz-scrolled body.home .hz-wm-space { height: calc(var(--wm-h, 0px) * .42); }

/* top bar turns solid and makes room for the small wordmark */
body.home .hz-top { transition: background-color .3s ease, box-shadow .3s ease; }
html.hz-scrolled body.home .hz-top {
    position: fixed;
    background: rgba(8, 12, 22, .9);
    box-shadow: 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.home .hz-top-nav { transition: margin-left .45s cubic-bezier(.2,.8,.2,1); }
html.hz-wm-ready.hz-scrolled body.home .hz-top-nav { margin-left: var(--wm-room, 0px); }

html.hz-wm-measuring body.home .hz-wordmark,
html.hz-wm-measuring body.home .hz-wm-space,
html.hz-wm-measuring body.home .hz-top-nav { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    body.home .hz-wordmark, body.home .hz-wm-space, body.home .hz-top-nav { transition: none !important; }
}
@media (max-width: 699px) {
    /* phones: no room for the nav next to the small wordmark once scrolled */
    html.hz-wm-ready.hz-scrolled body.home .hz-top-nav { visibility: hidden; }
}


/* ---------- Hero art (your own render/screenshot), Vital-style stage ---------- */
.hz-stage { position: absolute; inset: 0; z-index: -3; overflow: hidden; display: none; }
.hz-hero.has-art .hz-stage { display: block; }
.hz-stage-img, .hz-stage-film {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 72% 30%;
}
.hz-stage-film { opacity: 0; transition: opacity .8s ease; }
.hz-stage-film.is-on { opacity: 1; }
/* dark on the left so HORIZON stays readable, fade into the floor at the bottom */
.hz-hero.has-art .hz-vignette {
    background:
        linear-gradient(90deg, rgba(6,10,19,.92) 0%, rgba(6,10,19,.55) 32%, rgba(6,10,19,0) 58%),
        linear-gradient(180deg, rgba(6,10,19,.35) 0%, transparent 18%, transparent 70%, rgba(6,10,19,.85) 100%) !important;
}
/* mirrored floor under the art, like Vital's reflection */
.hz-strip { overflow: hidden; }
.hz-floor { position: absolute; inset: 0; z-index: -1; display: none; pointer-events: none; }
.hz-hero.has-art .hz-floor { display: block; }
.hz-floor-img {
    position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 100vh;
    object-fit: cover; object-position: 72% 30%;
    transform: scaleY(-1); transform-origin: top;
    opacity: .28; filter: blur(2px);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 0%, transparent 18%);
            mask-image: linear-gradient(180deg, transparent, #000 0%, transparent 18%);
}
@media (max-width: 900px) {
    .hz-stage-img, .hz-stage-film, .hz-floor-img { object-position: 78% 30%; }
    .hz-hero.has-art .hz-vignette { background: linear-gradient(180deg, rgba(6,10,19,.2), rgba(6,10,19,.8)) !important; }
}