/* Base layer, forked from RustCMS's Monument 1.3.0. Kept so every view that
   leans on Monument's class names (store cards, server cards, tickets) keeps
   working. Orange literals replaced with accent-derived colours. */
:root {
    color-scheme: dark;

    --bg:        var(--cms-bg, #05070B);
    --bg-2:      #080C13;
    --panel:     var(--cms-pane, #101724);
    --panel-2:   #141D2C;
    --line:      var(--cms-line, rgba(255, 255, 255, 0.07));
    --line-2:    rgba(255, 255, 255, 0.12);

    --txt:       var(--cms-txt, #FFFFFF);
    --txt-2:     var(--cms-dim, #A6A6AE);
    --txt-3:     #7C8CA3;

    --accent:    var(--cms-accent, #35C8F2);
    --accent-2:  var(--cms-accent-2, #7C8CFF);
    --accent-dim:color-mix(in srgb, var(--accent) 12%, transparent);

    --discord:   #5865F2;
    --discord-2: #6B76F4;
    --live:      #3BA55D;

    --r:      var(--cms-radius, 6px);
    --r-sm:   var(--cms-btn-radius, 4px);

    --disp: var(--cms-disp, 'Barlow Condensed', 'Vazirmatn', system-ui, sans-serif);
    --sans: var(--cms-sans, 'Barlow', 'Vazirmatn', system-ui, sans-serif);

    --pad:  clamp(18px, 4vw, 40px);
    --wide: 1180px;
    --gap:  clamp(56px, 7vw, 92px);

    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    --z-sticky: 100; --z-drawer: 200; --z-modal: 300;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The owner can nudge every size at once from the admin. */
html { font-size: calc(100% * var(--cms-text-scale, 1)); }
/* How hard the banner picture is darkened. The template's own shading is
   left alone; this only dims the picture underneath it, so a busy photo
   can be pushed back without redrawing anything the designer did. */
body[data-overlay="none"]  .hero-bg img { filter: none; }
body[data-overlay="light"] .hero-bg img { filter: brightness(0.72); }
body[data-overlay="heavy"] .hero-bg img { filter: brightness(0.42); }

body {
    margin: 0;
    background: var(--bg);
    color: var(--txt);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--cms-btn-txt, #04121A); }

.wrap { width: min(100% - var(--pad) * 2, var(--wide)); margin-inline: auto; }
/* The owner asked for the full width of the screen. */
body.is-wide { --wide: 100%; }
.only-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.disp {
    font-family: var(--disp);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0.005em;
    margin: 0;
}
.disp em { font-style: normal; color: var(--accent); }

.eyebrow {
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0;
}

.sec-head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.sec-head .disp { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-top: 0.5rem; letter-spacing: 0.02em; }

.body-copy { color: var(--txt-2); margin: 0; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
    white-space: nowrap;
    padding: 0.85rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.btn i { font-size: 1.15em; }
.btn-fill { background: var(--accent); color: var(--cms-btn-txt, #fff); }
.btn-fill:hover { background: var(--accent-2); }
.btn-ghost { background: var(--panel); border-color: var(--line-2); color: var(--txt); }
.btn-ghost:hover { border-color: var(--txt-3); background: var(--panel-2); }
.btn-line { border-color: var(--accent); color: var(--accent); }
.btn-line:hover { background: var(--accent); color: var(--cms-btn-txt, #fff); }
.btn-discord { background: var(--discord); color: #fff; }
.btn-discord:hover { background: var(--discord-2); }
.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.75rem; }
.btn-wide { width: 100%; }

.hdr {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: rgba(11, 11, 13, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 24px; height: 74px; }

.brand { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 0.6rem; font-family: var(--disp);
         font-weight: 700; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
.brand > span { white-space: nowrap; }
.brand .glyph { flex: 0 0 auto; }
.brand em { font-style: normal; color: var(--accent); }
.brand img { max-height: 36px; width: auto; }
.brand .glyph {
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    background: var(--accent); border-radius: var(--r-sm);
    color: #fff; font-size: 1.1rem;
}

.hdr nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.hdr nav a {
    position: relative;
    padding: 0.55rem 0.85rem;
    font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--txt-2);
    transition: color 160ms var(--ease);
}
.hdr nav a:hover { color: var(--txt); }
.hdr nav a[aria-current] { color: var(--accent); }
.hdr nav a[aria-current]::after {
    content: ""; position: absolute; inset-inline: 0.85rem; bottom: 0;
    height: 2px; background: var(--accent);
}

.burger { display: none; padding: 10px; border-radius: var(--r-sm); }
.burger:hover { background: var(--panel); }
.burger span, .burger span::before, .burger span::after {
    display: block; width: 20px; height: 2px; background: var(--txt); border-radius: 2px;
}
.burger span::before, .burger span::after { content: ""; position: relative; }
.burger span::before { top: -6px; }
.burger span::after  { top: 4px; }

.drawer { display: none; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.drawer[data-open] { display: block; }
.drawer a {
    display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--line);
    font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-2);
}
.drawer a:last-child { border-bottom: 0; }

.hero { position: relative; isolation: isolate; overflow: hidden; }

.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, var(--bg) 4%, rgba(11,11,13,0.82) 38%, rgba(11,11,13,0.15) 78%),
        linear-gradient(180deg, rgba(11,11,13,0.75) 0%, transparent 32%, rgba(11,11,13,0.92) 100%);
}

.hero-in { padding-block: clamp(48px, 7vw, 86px) 0; }

/* The owner can make the opening screen taller or shorter from the admin. */
.hero-short .hero-in { padding-block: clamp(28px, 4vw, 52px) 0; }
.hero-tall .hero-in { padding-block: clamp(72px, 11vw, 140px) 0; }
.hero-full { min-height: 100svh; display: grid; align-items: center; }
.hero-full .hero-in { padding-block: clamp(48px, 7vw, 86px); }
.hero-copy { max-width: 600px; display: grid; gap: 1.1rem; justify-items: start; }

.hero-eyebrow { display: flex; align-items: center; gap: 0.9rem; }
.hero-eyebrow::after { content: ""; width: 42px; height: 2px; background: var(--accent); }

.hero h1 { font-size: clamp(3rem, 7.4vw, 5.6rem); letter-spacing: 0.004em; }
.hero .sub { font-family: var(--disp); font-size: clamp(1.05rem, 1.9vw, 1.4rem);
             font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: -0.35rem 0 0; }
.hero .sub em { font-style: normal; color: var(--accent); }
.hero .body-copy { max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 0.4rem; }

.stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(28px, 4vw, 46px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(11, 11, 13, 0.72);
    backdrop-filter: blur(6px);
    overflow: hidden;
}
.stat { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.15rem; border-inline-start: 1px solid var(--line); }
.stat:first-child { border-inline-start: 0; }
.stat > i { font-size: 1.35rem; color: var(--accent); flex: none; }
.stat b { display: block; font-family: var(--disp); font-size: 1.15rem; font-weight: 700;
          letter-spacing: 0.02em; line-height: 1.1; }
.stat span { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.11em;
             text-transform: uppercase; color: var(--txt-3); }

.section { padding-block: var(--gap); }
.section + .section { padding-block-start: 0; }

.feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 0;
    border-radius: var(--r);
    overflow: hidden;
}
.feat {
    padding: clamp(20px, 2vw, 28px) 1rem;
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--line);
    margin: -1px 0 0 -1px;
    display: grid; gap: 0.7rem; align-content: start;
    transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.feat:hover { background: var(--panel-2); border-color: var(--line-2); }

.feat i { font-size: 2rem; line-height: 1; min-height: 2rem; color: var(--accent); }

.feat h3 { font-family: var(--disp); font-size: 0.9375rem; font-weight: 700; text-transform: uppercase;
           letter-spacing: 0.05em; margin: 0; min-height: 2.2em; display: grid; align-content: center; }
.feat p { font-size: 0.8125rem; color: var(--txt-2); margin: 0; line-height: 1.55; }

.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.panel {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: clamp(20px, 2.2vw, 30px);
    display: grid; gap: 1rem; align-content: start;
}
.panel-bg { position: absolute; inset: 0; z-index: -2; }
.panel-bg img { width: 100%; height: 100%; object-fit: cover; }

.panel-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(17,17,20,0.80) 0%, rgba(17,17,20,0.72) 40%, rgba(17,17,20,0.93) 100%);
}
.panel:has(.panel-bg) { background: transparent; }

.panel h2 { font-family: var(--disp); font-size: 1.375rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.03em; margin: 0; }
.panel h2 + .rule { width: 34px; height: 2px; background: var(--accent); border: 0; margin: -0.4rem 0 0; }
.panel p { color: var(--txt-2); margin: 0; font-size: 0.9375rem; }

.spec { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.spec li { display: grid; grid-template-columns: 22px 1fr auto; gap: 0.85rem; align-items: center; }
.spec i { color: var(--accent); font-size: 1.05rem; }
.spec dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--txt-3); }
.spec dd { margin: 0; font-weight: 600; font-size: 0.9375rem; }
.spec .copy { color: var(--txt-3); padding: 4px; border-radius: var(--r-sm); }
.spec .copy:hover { color: var(--accent); background: var(--panel-2); }

.members { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.8125rem; color: var(--txt-2); }
.members::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }

.ftr { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: clamp(36px, 4.5vw, 54px) 26px; }
.ftr-grid { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 1fr)); gap: clamp(24px, 3vw, 48px); }
.ftr h3 { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
          color: var(--accent); margin: 0 0 0.35rem; }
.ftr h3 + .rule { width: 26px; height: 2px; background: var(--accent); border: 0; margin: 0 0 0.9rem; opacity: 0.5; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ftr-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 1rem; }
.ftr a { color: var(--txt-2); font-size: 0.875rem; }
.ftr a:hover { color: var(--txt); }
.ftr .body-copy { font-size: 0.8125rem; margin-top: 0.9rem; }

.socials { display: flex; gap: 10px; }
.socials a {
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    color: var(--txt-2); font-size: 1.05rem;
    transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
}
.socials a:hover { color: #fff; background: var(--accent); border-color: var(--accent); }

body {
    --cms-bg: var(--bg);
    --cms-pane: var(--panel);
    --cms-line: var(--line);
    --cms-txt: var(--txt);
    --cms-dim: var(--txt-2);
    --cms-accent: var(--accent);
    --cms-accent-hot: var(--accent-2);
    --cms-radius: var(--r);
    --cms-btn-radius: var(--r-sm);
    --cms-section: var(--gap);
}
.cms-block { max-width: var(--wide); padding-inline: var(--pad); }
main > .cms-block:first-child { margin-block-start: var(--gap); }
main > .cms-block:last-child { margin-block-end: var(--gap); }
.cms-title, .cms-banner-title { font-family: var(--disp); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.cms-kicker { font-family: var(--sans); letter-spacing: 0.18em; }
.cms-btn { border-radius: var(--r-sm); text-transform: uppercase; letter-spacing: 0.09em;
           font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.cms-card { background: var(--panel); border-color: var(--line); }
.cms-card:hover { border-color: var(--line-2); transform: none; }
.cms-stat { background: var(--panel); border-color: var(--line); }
.cms-stat-value { font-family: var(--disp); }

.sec-intro { color: var(--txt-2); max-width: 62ch; margin: 0.7rem auto 0; }
.srv-empty { color: var(--txt-2); text-align: center; padding: 2rem 0; }

.srv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 18px; }

.srv {
    display: flex; flex-direction: column; gap: 14px;
    background: var(--panel); border: 1px solid var(--line); padding: 22px 22px 24px;
    border-radius: var(--r);
    position: relative;
}
.srv[data-live] { border-color: color-mix(in srgb, var(--accent) 42%, transparent); }

.srv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.srv-top h3 { font-family: var(--disp); font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }

.srv-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; text-transform: uppercase;
           letter-spacing: 0.08em; color: var(--txt-2); white-space: nowrap; }
.srv-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--txt-2); display: block; }
.srv[data-live] .srv-dot { color: var(--live); }
.srv[data-live] .srv-dot i { background: var(--live); box-shadow: 0 0 0 3px rgba(59, 165, 93, 0.2); }

.srv-count { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.srv-count b { font-family: var(--disp); font-size: 2.4rem; line-height: 1; color: var(--txt); }
.srv-count span { color: var(--txt-2); font-size: 1rem; }
.srv-count em { font-style: normal; color: var(--txt-2); font-size: 0.78rem; text-transform: uppercase;
                letter-spacing: 0.08em; margin-inline-start: 4px; }

.srv-bar { height: 4px; background: var(--line-2); overflow: hidden; }
.srv-bar span { display: block; height: 100%; background: var(--accent); }

.srv-facts { display: grid; gap: 9px; margin: 0; }
.srv-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                   border-top: 1px solid var(--line); padding-top: 9px; }
.srv-facts > div:first-child { border-top: 0; padding-top: 0; }
.srv-facts dt { display: inline-flex; align-items: center; gap: 8px; color: var(--txt-2); font-size: 0.82rem; margin: 0; }
.srv-facts dt i { color: var(--accent); font-size: 1rem; }
.srv-facts dd { margin: 0; font-size: 0.86rem; font-weight: 600; text-align: end; }
.srv-facts code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }

.srv-go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 560px) {
    .srv-facts > div { flex-direction: column; align-items: flex-start; gap: 3px; }
    .srv-facts dd { text-align: start; }
}

.st-alert { border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent);
            padding: .9rem 1.1rem; margin-bottom: 1.6rem; }
.st-alert ul { margin: 0; padding-inline-start: 1.1rem; }

.st-who {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    border: 1px solid var(--line); background: var(--panel);
    padding: .9rem 1.2rem; margin-bottom: 1.6rem;
}
.st-who p { margin: 0; display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--txt-2); }
.st-who i { color: var(--accent); font-size: 1.2rem; }
.st-who b { color: var(--txt); font-weight: 600; }
.st-who span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; opacity: .55; }
.st-who[data-known] { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

.st-whoform { display: flex; gap: .5rem; flex-wrap: wrap; }
.st-whoform input {
    width: 15rem; max-width: 100%; padding: .6rem .8rem;
    background: var(--bg-2); border: 1px solid var(--line-2);
    color: var(--txt); font: inherit; border-radius: var(--r-sm);
}
.st-whoform input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.st-steam { font-size: .82rem; color: var(--txt-3); text-decoration: underline; text-underline-offset: 3px; }
.st-steam:hover { color: var(--accent); }

.st-change {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: .8rem; color: var(--txt-3);
    text-decoration: underline; text-underline-offset: 3px;
}
.st-change:hover { color: var(--accent); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; align-items: stretch; }

.st-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--panel); border: 1px solid var(--line);
    transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.st-card:hover { border-color: var(--line-2); }

.st-card[data-featured] {
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-dim), transparent 32%), var(--panel);
}

.st-badge {
    position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 1;
    background: var(--accent); color: #fff;
    font-family: var(--disp); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    padding: .35rem .7rem;
}

.st-shot { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); }
.st-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.st-body { display: flex; flex-direction: column; gap: .9rem; padding: 26px 24px 28px; flex: 1; }

.st-name { font-family: var(--disp); font-size: 1.55rem; text-transform: uppercase;
           letter-spacing: .02em; margin: 0; line-height: 1.1; }
.st-summary { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--txt-2); }

.st-price {
    font-family: var(--disp); font-size: 2.9rem; line-height: 1;
    margin: .2rem 0 0; color: var(--txt); letter-spacing: -.01em;
}
.st-card[data-featured] .st-price { color: var(--accent); }

.st-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.st-perks li { display: flex; align-items: flex-start; gap: .55rem; font-size: .86rem; line-height: 1.5; color: var(--txt-2); }
.st-perks i { color: var(--accent); font-size: .95rem; margin-top: .15rem; flex: none; }

.st-buy { display: grid; gap: .7rem; margin-top: auto; padding-top: .4rem; }
.st-field { display: grid; gap: .3rem; font-size: .78rem; }
.st-field > span { color: var(--txt-3); text-transform: uppercase; letter-spacing: .07em; }
.st-field input, .st-field select {
    width: 100%; box-sizing: border-box; padding: .65rem .8rem;
    background: var(--bg-2); border: 1px solid var(--line-2);
    color: var(--txt); font: inherit; border-radius: var(--r-sm);
}
.st-field input:focus-visible, .st-field select:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px;
}

.st-go { justify-content: center; min-height: 46px; gap: .5rem; }
.st-go i { transition: translate 200ms var(--ease); }
.st-go:hover i { translate: 3px 0; }

@media (max-width: 560px) {
    .st-who { flex-direction: column; align-items: flex-start; }
    .st-price { font-size: 2.4rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .rise { animation: rise 620ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
    @keyframes rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

    @supports (animation-timeline: view()) {
        .feat, .panel { animation: rise 520ms var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important;
    }
}
@media print {
    .rise, .feat, .panel {
        animation: none !important; opacity: 1 !important; translate: none !important;
    }
    .hero { min-height: auto; }
    .hero-bg, .hdr, .ftr nav { display: none; }
}

@media (max-width: 1080px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(3) { border-inline-start: 0; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
    .ftr-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
    .hdr nav { display: none; }
    .burger { display: block; margin-inline-start: auto; }
    .hdr .btn-connect { display: none; }
    .hero::before {
        background: linear-gradient(180deg, rgba(11,11,13,0.86) 0%, rgba(11,11,13,0.72) 40%, rgba(11,11,13,0.97) 100%);
    }
    .hero-copy { max-width: none; }
}

@media (max-width: 620px) {
    .stats { grid-template-columns: 1fr; }
    .stat { border-inline-start: 0 !important; border-top: 1px solid var(--line); }
    .stat:first-child { border-top: 0; }
    .ftr-grid { grid-template-columns: 1fr; }
    .hero-actions { width: 100%; }
    .hero-actions .btn { flex: 1; }
}

.burger { width: 44px; height: 44px; display: none; place-items: center; padding: 0; }
@media (max-width: 880px) { .burger { display: grid; } }

.spec .copy { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; }

.ftr li a, .ftr p a { display: inline-block; padding-block: 0.2rem; }

@media (pointer: coarse) {
    .socials a { width: 44px; height: 44px; }
    .spec .copy { width: 44px; height: 44px; }
    .ftr li a, .ftr p a { min-height: 44px; display: inline-flex; align-items: center; }
    .drawer a { min-height: 48px; display: flex; align-items: center; }
    .hdr nav a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* =========================================================================
   Haven layer.
   A night-raid look: moonlit sky, cold light rays, silhouettes, and panels
   framed with corner brackets. Every colour reads the owner's palette first
   (Settings -> Colours), so the whole template follows Look and feel.
   ========================================================================= */

:root {
    --wide: 1440px;

    --hv-hard:   'Anton', 'Barlow Condensed', 'Vazirmatn', system-ui, sans-serif;
    --hv-cond:   'Barlow Condensed', 'Vazirmatn', system-ui, sans-serif;
    --hv-scrawl: 'Permanent Marker', 'Barlow Condensed', cursive;

    --hv-ink:     #04060a;
    --hv-card:    color-mix(in srgb, var(--panel) 82%, #000);
    --hv-glass:   rgba(6, 10, 16, 0.86);
    --hv-bracket: color-mix(in srgb, var(--accent) 72%, transparent);
    --hv-soft:    color-mix(in srgb, var(--accent) 9%, transparent);
    --hv-edge:    color-mix(in srgb, var(--accent) 38%, transparent);

    --hv-sky-1: #02050a;
    --hv-sky-2: #06111f;
    --hv-sky-3: #0d2340;
    --hv-sky-4: #173a5f;

    --hv-sil-far:  #0a1a2d;
    --hv-sil-mid:  #050e19;
    --hv-sil-near: #020509;

    --hv-hdr-h: 88px;
}

body { font-size: 15.5px; }

/* ---- Corner brackets ---------------------------------------------------
   One pseudo element, eight gradients. Used on every framed panel. */
.hv-frame { position: relative; }
.hv-frame::before {
    content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 2;
    --b: var(--hv-bracket); --l: 20px; --t: 2px;
    background:
        linear-gradient(var(--b), var(--b)) top left     / var(--l) var(--t) no-repeat,
        linear-gradient(var(--b), var(--b)) top left     / var(--t) var(--l) no-repeat,
        linear-gradient(var(--b), var(--b)) top right    / var(--l) var(--t) no-repeat,
        linear-gradient(var(--b), var(--b)) top right    / var(--t) var(--l) no-repeat,
        linear-gradient(var(--b), var(--b)) bottom left  / var(--l) var(--t) no-repeat,
        linear-gradient(var(--b), var(--b)) bottom left  / var(--t) var(--l) no-repeat,
        linear-gradient(var(--b), var(--b)) bottom right / var(--l) var(--t) no-repeat,
        linear-gradient(var(--b), var(--b)) bottom right / var(--t) var(--l) no-repeat;
}

/* ---- Section heads: tracked caps and a ruled arrow -------------------- */
.hv-head {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    margin-bottom: clamp(18px, 2.4vw, 26px);
}
.hv-head h2 {
    margin: 0;
    font-family: var(--hv-cond); font-weight: 700;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    letter-spacing: 0.34em; text-transform: uppercase;
}
.hv-head .hv-rule {
    flex: 0 0 auto; width: 74px; height: 1px; background: var(--accent);
    position: relative; opacity: 0.85;
}
.hv-head .hv-rule::after {
    content: ""; position: absolute; right: -3px; top: -3px;
    width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg);
}
.hv-head .hv-aside {
    margin: 0 0 0 auto;
    font-family: var(--hv-cond); font-weight: 600;
    font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--txt-2);
}

/* ---- Header -------------------------------------------------------------- */
.hdr {
    background: linear-gradient(180deg, rgba(3, 5, 9, 0.92), rgba(3, 5, 9, 0.72));
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    transition: background 240ms var(--ease), border-color 240ms var(--ease);
}
.hdr-in { height: var(--hv-hdr-h); gap: 20px; }
.brand img { max-height: 42px; }

/* Over the hero the header starts see-through and fills in once you scroll. */
body:has(main > .hv-hero:first-child) .hdr:not([data-stuck]) {
    background: linear-gradient(180deg, rgba(2, 4, 8, 0.72), transparent);
    border-bottom-color: transparent;
    backdrop-filter: none;
}

.hdr nav {
    gap: 0; padding: 0 24px; height: 54px; margin-inline: auto;
    background: rgba(5, 9, 15, 0.78);
    clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Sized so ten items fit inside the 1440px column, which is all the room the
   menu ever gets, however wide the screen is. */
.hdr nav a {
    font-family: var(--hv-cond); font-size: 0.92rem; font-weight: 600;
    letter-spacing: 0.13em; color: #c9d4e2; padding: 0.5rem 0.74rem;
    white-space: nowrap;
}
.hdr nav a:hover { color: #fff; }
.hdr nav a[aria-current] {
    color: var(--accent);
    background: var(--hv-soft);
    box-shadow: inset 0 0 0 1px var(--hv-edge);
}
.hdr nav a[aria-current]::after { inset-inline: 0.74rem; bottom: 7px; }

.hv-hdr-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* The logo never gives up space to the menu: with ten menu items the brand
   was being squeezed to nothing on a 1366px laptop. */
.hdr .brand { flex: 0 0 auto; }
.hdr .brand img { max-width: none; }
.hdr nav { flex: 0 1 auto; min-width: 0; }

.hv-connect {
    display: inline-flex; align-items: center; gap: 0.7em;
    height: 48px; padding: 0 1.25rem;
    border: 1px solid var(--accent); color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    font-family: var(--hv-cond); font-weight: 700; font-size: 1.02rem;
    letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
    transition: background 180ms var(--ease), color 180ms var(--ease);
}
.hv-connect i { font-size: 1.25rem; }
.hv-connect:hover { background: var(--accent); color: var(--cms-btn-txt, #04121A); }

.hv-signin {
    display: inline-flex; align-items: center; gap: 0.6em;
    height: 48px; padding: 0 1.05rem;
    background: #06090e; border: 1px solid #202c3c; color: #eef3f9;
    font-family: var(--hv-cond); font-weight: 700; font-size: 0.95rem;
    letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.hv-signin i { font-size: 1.3rem; }
.hv-signin:hover { border-color: var(--hv-edge); }

/* ---- Hero ---------------------------------------------------------------- */
.hv-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column;
    min-height: min(100svh, 1000px);
    margin-top: calc(var(--hv-hdr-h) * -1);
    padding-top: var(--hv-hdr-h);
    background:
        radial-gradient(120% 70% at 50% 108%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 60%),
        linear-gradient(180deg, var(--hv-sky-1) 0%, var(--hv-sky-2) 34%, var(--hv-sky-3) 64%, var(--hv-sky-4) 84%, var(--hv-sky-2) 100%);
}
.hv-hero-short { min-height: min(78svh, 800px); }
.hv-hero-tall  { min-height: 100svh; }

/* The moon never sits lower than 210px: on a tall phone hero, "20% down"
   would otherwise land it behind the text. */
.hv-sky { position: absolute; inset: 0; z-index: -3; pointer-events: none; --sx: 74%; --sy: min(20%, 210px); }
@media (max-width: 620px) { .hv-sky { --sx: 84%; --sy: 118px; } }

.hv-stars {
    position: absolute; inset: 0 0 45% 0; opacity: 0.55;
    background-image:
        radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 27% 8%, #cfe9ff 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 38% 30%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 52% 12%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 61% 36%, #bfe6ff 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 88% 9%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 94% 31%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 6% 41%, #cfe9ff 50%, transparent 51%),
        radial-gradient(1px 1px at 19% 54%, #fff 50%, transparent 51%),
        radial-gradient(1.3px 1.3px at 44% 5%, #fff 50%, transparent 51%);
    background-size: 100% 100%;
}

.hv-glow {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at var(--sx) var(--sy), #f2fbff 0, #c8efff 1.6%,
            color-mix(in srgb, var(--accent) 70%, #fff) 3.4%,
            color-mix(in srgb, var(--accent) 34%, transparent) 10%,
            color-mix(in srgb, var(--accent) 12%, transparent) 24%, transparent 46%);
}

.hv-rays {
    position: absolute; inset: -30%;
    background:
        repeating-conic-gradient(from 0deg at var(--sx) var(--sy),
            rgba(190, 236, 255, 0.16) 0deg 1.4deg, transparent 1.4deg 5.2deg),
        repeating-conic-gradient(from 2deg at var(--sx) var(--sy),
            rgba(124, 200, 255, 0.10) 0deg 2.6deg, transparent 2.6deg 11deg);
    -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 0%, rgba(0,0,0,0.55) 24%, transparent 58%);
            mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 0%, rgba(0,0,0,0.55) 24%, transparent 58%);
    mix-blend-mode: screen;
}

/* Painterly grain over the whole sky, so the gradients stop looking digital. */
.hv-grain {
    position: absolute; inset: 0; opacity: 0.22; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.hv-hero-img { position: absolute; inset: 0; z-index: -4; }
.hv-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(0.82) brightness(0.62); }
.hv-hero.has-img { background: #05080d; }
.hv-hero.has-img .hv-sky { opacity: 0.72; }
.hv-hero.has-img .hv-hero-img::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(2, 5, 10, 0.78) 0%, rgba(2, 5, 10, 0.2) 36%, rgba(2, 5, 10, 0.55) 72%, var(--bg) 100%),
        linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
    mix-blend-mode: normal;
}
body[data-overlay="none"]  .hv-hero-img img { filter: saturate(0.9); }
body[data-overlay="light"] .hv-hero-img img { filter: saturate(0.85) brightness(0.78); }
body[data-overlay="heavy"] .hv-hero-img img { filter: saturate(0.75) brightness(0.42); }

.hv-hero .scene {
    position: absolute; z-index: -2; left: 0; right: 0; bottom: 0;
    width: 100%; height: clamp(250px, 36vw, 520px);
}
.sil-far   { fill: var(--hv-sil-far); }
.sil-mid   { fill: var(--hv-sil-mid); }
.sil-near  { fill: var(--hv-sil-near); }
.sil-mast  { fill: none; stroke: var(--hv-sil-far); stroke-width: 2.2; stroke-linejoin: round; }
.sil-window { fill: #ffcf82; filter: drop-shadow(0 0 6px #ffb347); }
.sil-beacon { fill: #ff5a5a; }
.hv-hero.has-img .scene { opacity: 0.9; }

/* Parked in front of the moon, so it reads as a silhouette against the light. */
.hv-heli {
    position: absolute; z-index: -2; width: clamp(64px, 6vw, 100px);
    right: 22%; top: 15%; fill: var(--hv-sil-near); opacity: 0.95;
}
.hv-heli .rotor { transform-origin: 60px 12px; }

.hv-fog {
    position: absolute; inset: auto 0 0 0; height: 46%; z-index: -1; pointer-events: none;
    background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 18%, transparent 100%);
}

/* One column that is exactly the width available. Centring the track itself
   (place-content) would size it to the longest unwrapped line instead, which
   pushes the whole page sideways on a phone. */
.hv-hero-in {
    flex: 1; display: grid; grid-template-columns: minmax(0, 1fr);
    align-content: center; justify-items: center; text-align: center;
    gap: 1.15rem; padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px);
    position: relative; z-index: 1;
}

.hv-kicker {
    display: flex; align-items: center; gap: 18px; margin: 0;
    font-family: var(--hv-cond); font-weight: 600;
    font-size: clamp(0.78rem, 1.1vw, 0.98rem); letter-spacing: 0.44em; text-transform: uppercase;
    color: #dbe7f3;
}
.hv-kicker::before, .hv-kicker::after {
    content: ""; width: clamp(28px, 5vw, 76px); height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent));
}
.hv-kicker::after { background: linear-gradient(90deg, var(--accent), transparent); }

.hv-title {
    margin: 0;
    font-family: var(--hv-hard); font-weight: 400;
    font-size: clamp(3.4rem, 9.6vw, 8.8rem); line-height: 0.88;
    letter-spacing: 0.006em; text-transform: uppercase;
    color: #f3f6fa;
    text-shadow: 0 8px 50px rgba(0, 0, 0, 0.55);
}
.hv-title em {
    font-style: normal; color: var(--accent);
    text-shadow: 0 0 42px color-mix(in srgb, var(--accent) 45%, transparent), 0 8px 50px rgba(0, 0, 0, 0.5);
}

.hv-highlights {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0;
    margin: 0.3rem 0 0; padding: 0; list-style: none;
    font-family: var(--hv-cond); font-weight: 700;
    font-size: clamp(0.95rem, 1.4vw, 1.25rem); letter-spacing: 0.16em; text-transform: uppercase;
    color: #eef3f8;
}
.hv-highlights li + li::before {
    content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 1.1em 0.18em;
    background: var(--accent); transform: rotate(45deg); vertical-align: middle;
}

.hv-lede {
    margin: 0; max-width: 62ch;
    font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.7; color: #b8c6d6;
}

.hv-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 0.6rem; }

.hv-btn {
    display: inline-grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px;
    min-width: 238px; padding: 13px 26px 13px 20px; text-align: start;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: filter 180ms var(--ease), transform 180ms var(--ease), background 180ms var(--ease);
}
.hv-btn:hover { transform: translateY(-2px); }
.hv-btn i { grid-row: span 2; font-size: 2.05rem; line-height: 1; }
.hv-btn b {
    font-family: var(--hv-cond); font-weight: 700; font-size: 1.5rem;
    letter-spacing: 0.07em; text-transform: uppercase; line-height: 1;
}
.hv-btn small {
    font-family: var(--hv-cond); font-weight: 600; font-size: 0.68rem;
    letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.78; margin-top: 3px;
}
.hv-btn-play {
    color: var(--cms-btn-txt, #04121A);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 48%, color-mix(in srgb, var(--accent) 78%, #000));
    box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--accent) 80%, transparent);
}
.hv-btn-play:hover { filter: brightness(1.08); }
.hv-btn-join {
    color: #fff; background: #05080d;
    box-shadow: inset 0 0 0 1px #243246;
}
.hv-btn-join:hover { box-shadow: inset 0 0 0 1px var(--accent); }

/* Anchored to the middle of the screen rather than its edge, so it always
   lands just past the end of the headline instead of on top of it. */
.hv-scrawl {
    position: absolute; z-index: 1; left: calc(50% + 440px); top: 31%;
    max-width: 16ch; margin: 0;
    font-family: var(--hv-scrawl); font-size: clamp(1.6rem, 2.5vw, 2.6rem); line-height: 1.02;
    color: #eef6fc; text-transform: uppercase; transform: rotate(-7deg);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}
.hv-scrawl::after, .hv-mark::after {
    content: ""; display: block; height: 0.42em; width: 92%; margin: 0.12em 0 0 4%;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'><path d='M2 15C60 7 150 3 298 7c-2 2-1 4 0 5C190 12 96 16 6 21 2 20 0 17 2 15Z'/></svg>") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'><path d='M2 15C60 7 150 3 298 7c-2 2-1 4 0 5C190 12 96 16 6 21 2 20 0 17 2 15Z'/></svg>") center / 100% 100% no-repeat;
}

/* ---- Stat strip ---------------------------------------------------------- */
.hv-strip {
    position: relative; z-index: 2; margin-bottom: clamp(18px, 3vw, 36px);
    display: flex; flex-wrap: wrap;
    background: var(--hv-glass);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.hv-cell {
    flex: 1 1 150px; min-width: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.06);
}
.hv-cell:first-child { border-inline-start: 0; }
.hv-cell > i { flex: none; font-size: 1.95rem; color: var(--accent); }
.hv-cell > div { min-width: 0; }
.hv-cell-lbl {
    display: block; font-family: var(--hv-cond); font-weight: 600; white-space: nowrap;
    font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.hv-cell-val {
    display: block; font-family: var(--hv-cond); font-weight: 700;
    font-size: 1.32rem; letter-spacing: 0.03em; line-height: 1.12; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv-cell-note { display: block; font-size: 0.8rem; line-height: 1.35; color: var(--txt-2); }

.hv-card-cell { flex: 1.8 1 290px; gap: 16px; }
.hv-emblem {
    flex: none; width: 118px; height: 76px; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%), #06101b;
    box-shadow: inset 0 0 0 1px var(--hv-edge);
}
.hv-emblem img { max-width: 78%; max-height: 78%; object-fit: contain; }
/* A cut-out logo carries its own glow, so it gets no box: a tile behind a
   glowing badge reads as a sticker. */
/* Sized in pixels on the image itself: a percentage height inside a grid box
   resolves as auto, which would let the logo render at its natural 220px. */
.hv-emblem-logo { display: block; width: auto; height: auto; background: none; box-shadow: none; }
.hv-emblem-logo img {
    display: block; height: 92px; width: auto; max-width: none; max-height: none;
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 30%, transparent));
}
@media (max-width: 620px) { .hv-emblem-logo img { height: 76px; } }
.hv-card-name {
    display: block; font-family: var(--hv-hard); font-weight: 400;
    font-size: 1.75rem; line-height: 0.95; text-transform: uppercase; color: #fff;
}
.hv-card-name em { font-style: normal; color: var(--accent); display: block; }
.hv-card-tags {
    display: block; margin-top: 7px;
    font-family: var(--hv-cond); font-weight: 600; font-size: 0.72rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--txt-2);
}

.hv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #5b6778; margin-inline-end: 8px; vertical-align: 1px; }
.hv-live .hv-dot { background: #3fd07a; box-shadow: 0 0 0 4px rgba(63, 208, 122, 0.18); animation: hv-pulse 2.2s ease-in-out infinite; }
@keyframes hv-pulse { 50% { box-shadow: 0 0 0 7px rgba(63, 208, 122, 0.06); } }

.hv-cell-connect { flex: 1.3 1 220px; }
.hv-copy {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--accent); text-decoration: underline; text-underline-offset: 4px;
    text-decoration-thickness: 1px; font-family: var(--hv-cond); font-weight: 700;
    font-size: 1.12rem; letter-spacing: 0.03em; padding: 0; text-align: start;
}
.hv-copy:hover { color: #fff; }

/* ---- Server information panel ------------------------------------------ */
.hv-info {
    display: grid; grid-template-columns: minmax(260px, 1fr) 2.3fr;
    background: var(--hv-card); border: 1px solid var(--line);
}
.hv-info-art {
    position: relative; isolation: isolate; overflow: hidden; min-height: 300px;
    background:
        radial-gradient(90% 70% at 30% 20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
        linear-gradient(160deg, #0b1d33, #050b14 70%);
}
.hv-info-art img.hv-info-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(0.85) brightness(0.8); }
.hv-info-art::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(4, 7, 12, 0.35), rgba(4, 7, 12, 0.72)), linear-gradient(90deg, transparent 70%, var(--hv-card));
}
.hv-info-art .hv-watermark {
    position: absolute; right: -8%; bottom: -10%; width: 78%; opacity: 0.16; z-index: -1;
    filter: drop-shadow(0 0 30px color-mix(in srgb, var(--accent) 60%, transparent));
}
.hv-mark {
    position: absolute; left: 26px; top: 26px; margin: 0; max-width: 13ch;
    font-family: var(--hv-scrawl); font-size: clamp(1.4rem, 1.9vw, 2rem); line-height: 1.05;
    text-transform: uppercase; color: #f1f6fb; transform: rotate(-6deg);
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.7);
}
.hv-info-art svg.hv-pines { position: absolute; left: -2%; bottom: -1px; width: 104%; height: 30%; fill: var(--hv-card); z-index: 0; }
.hv-info-body { padding: clamp(24px, 3vw, 40px); display: grid; align-content: start; }

.hv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 26px; }
.hv-tiles + .hv-tiles { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); gap: 18px 26px; }
.hv-tile { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.hv-tile > div { min-width: 0; overflow-wrap: anywhere; }
.hv-ibox {
    width: 54px; height: 54px; display: grid; place-items: center; flex: none;
    background: var(--hv-soft); box-shadow: inset 0 0 0 1px var(--hv-edge);
    color: var(--accent); font-size: 1.65rem;
}
.hv-tile h3 {
    margin: 0 0 4px; font-family: var(--hv-cond); font-weight: 700;
    font-size: 1.08rem; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.15;
}
.hv-tile p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--txt-2); }
.hv-tiles-sm .hv-ibox { width: 42px; height: 42px; font-size: 1.3rem; }
.hv-tiles-sm .hv-tile h3 { font-size: 0.95rem; }
.hv-tiles-sm .hv-tile p { font-size: 0.8rem; }

/* ---- Feature cards ------------------------------------------------------ */
.hv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.hv-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--hv-card); border: 1px solid var(--line);
    transition: transform 220ms var(--ease), border-color 220ms var(--ease);
}
.hv-card:hover { transform: translateY(-3px); border-color: var(--hv-edge); }
.hv-card-art {
    position: relative; aspect-ratio: 5 / 4; overflow: hidden; isolation: isolate;
    display: grid; place-items: center;
    background:
        radial-gradient(70% 60% at 50% 38%, color-mix(in srgb, var(--hv-tint, var(--accent)) 30%, transparent), transparent 72%),
        linear-gradient(180deg, #0a1a2c, #060d17);
}
.hv-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 500ms var(--ease); }
.hv-card:hover .hv-card-art img { transform: scale(1.05); }
.hv-card-art::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, transparent 50%, var(--hv-card));
}
.hv-card-art > i { font-size: clamp(3.4rem, 5vw, 4.6rem); color: var(--hv-tint, var(--accent)); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--hv-tint, var(--accent)) 55%, transparent)); position: relative; z-index: 1; }
/* The treeline is the card's own colour and sits above the fade, so the
   picture area melts into the card body through the trees. */
.hv-card-art svg.hv-pines { position: absolute; left: -2%; right: -2%; bottom: -1px; width: 104%; height: 38%; fill: var(--hv-card); z-index: 1; }
.hv-card-art > i { z-index: 2; }
.hv-card:nth-child(3n+2) { --hv-tint: color-mix(in srgb, var(--accent) 55%, var(--accent-2)); }
.hv-card:nth-child(3n)   { --hv-tint: var(--accent-2); }
.hv-card .hv-ibox { position: relative; z-index: 2; width: 42px; height: 42px; font-size: 1.25rem; margin: -21px 0 0 16px; background: #05080d; }
.hv-card-body { padding: 12px 16px 20px; display: grid; gap: 6px; }
.hv-card-body h3 {
    margin: 0; font-family: var(--hv-cond); font-weight: 700;
    font-size: 1.1rem; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.15;
}
.hv-card-body p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--txt-2); }

/* ---- Why play here + wipe / news --------------------------------------- */
.hv-why { display: grid; grid-template-columns: 1.9fr 1fr; gap: 18px; }
.hv-why-main {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(26px, 3.4vw, 46px);
    background:
        radial-gradient(60% 90% at 88% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
        linear-gradient(120deg, #0a1523, #060b13 60%);
    border: 1px solid var(--line);
    display: grid; align-content: center; gap: 14px;
}
.hv-why-main img.hv-why-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: brightness(0.5) saturate(0.8); }
.hv-why-main::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(5, 8, 13, 0.94) 0%, rgba(5, 8, 13, 0.75) 45%, rgba(5, 8, 13, 0.25) 100%);
}
.hv-why-main h2 {
    margin: 0; font-family: var(--hv-hard); font-weight: 400;
    font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 0.95; text-transform: uppercase;
}
.hv-why-main .hv-sub {
    margin: -4px 0 0; font-family: var(--hv-cond); font-weight: 600;
    font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--txt-2);
}
.hv-why-main .hv-sub b { color: var(--accent); font-weight: 600; }
.hv-why-main p.hv-body { margin: 0; max-width: 58ch; color: #c2cedb; line-height: 1.7; }
.hv-why-main .hv-scrawl { top: auto; bottom: 16%; left: auto; right: 5%; font-size: clamp(1.4rem, 2.2vw, 2.3rem); }
.hv-why-main .hv-btn { justify-self: start; margin-top: 6px; }

.hv-news { background: var(--hv-card); border: 1px solid var(--line); padding: clamp(20px, 2.4vw, 30px); display: grid; align-content: start; gap: 4px; }
.hv-news .hv-head { margin-bottom: 10px; }
.hv-news .hv-head h2 { font-size: 1.1rem; letter-spacing: 0.26em; }
.hv-news-list { list-style: none; margin: 0; padding: 0; display: grid; }
.hv-news-list li { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.hv-news-list li:first-child { border-top: 0; padding-top: 4px; }
.hv-news-tag {
    display: inline-block; margin-bottom: 6px; padding: 2px 8px;
    font-family: var(--hv-cond); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent); box-shadow: inset 0 0 0 1px var(--hv-edge); background: var(--hv-soft);
}
.hv-news-list h3 { margin: 0; font-family: var(--hv-cond); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; }
.hv-news-list h3 a:hover { color: var(--accent); }
.hv-news-list p { margin: 3px 0 0; font-size: 0.8rem; color: var(--txt-2); line-height: 1.45; }
.hv-date { width: 52px; text-align: center; padding: 6px 0 7px; background: #05080d; box-shadow: inset 0 0 0 1px #223043; }
.hv-date span { display: block; font-family: var(--hv-cond); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--txt-2); }
.hv-date b { display: block; font-family: var(--hv-hard); font-weight: 400; font-size: 1.7rem; line-height: 1; }
.hv-news-all { justify-self: start; margin-top: 8px; font-family: var(--hv-cond); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.hv-news-all:hover { color: #fff; }

/* ---- Existing blocks, re-skinned --------------------------------------- */
.section { padding-block: clamp(26px, 3.4vw, 46px); }
.section + .section { padding-block-start: 0; }
main > .hv-hero + .section { padding-block-start: clamp(10px, 1.5vw, 20px); }

.sec-head .disp { font-family: var(--hv-hard); font-weight: 400; letter-spacing: 0.01em; font-size: clamp(2rem, 3.8vw, 3rem); }
.eyebrow { font-family: var(--hv-cond); font-size: 0.82rem; letter-spacing: 0.3em; }

.srv { background: var(--hv-card); border-radius: 0; }

/* One server on its own reads better as a band than as a lonely stretched card. */
.srv-grid:has(> .srv:only-child) { grid-template-columns: 1fr; }
.srv:only-child {
    display: grid; column-gap: clamp(24px, 4vw, 56px); row-gap: 12px; align-items: center;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
    grid-template-areas: "top facts go" "count facts go" "bar facts go";
    padding: 26px 30px;
}
.srv:only-child .srv-top   { grid-area: top; }
.srv:only-child .srv-count { grid-area: count; }
.srv:only-child .srv-bar   { grid-area: bar; }
.srv:only-child .srv-facts { grid-area: facts; }
.srv:only-child .srv-go    { grid-area: go; margin: 0; align-self: center; }
@media (max-width: 880px) {
    .srv:only-child { grid-template-columns: 1fr; grid-template-areas: "top" "count" "bar" "facts" "go"; }
    .srv:only-child .srv-go { justify-self: start; }
}
.srv-top h3 { font-family: var(--hv-cond); letter-spacing: 0.06em; }
.srv-count b { font-family: var(--hv-hard); font-weight: 400; }
.srv-bar { height: 3px; }

.panel { background: var(--hv-card); border-radius: 0; }
.panel h2 { font-family: var(--hv-cond); letter-spacing: 0.2em; font-size: 1.2rem; }

.st-card { background: var(--hv-card); }
.st-name { font-family: var(--hv-cond); letter-spacing: 0.06em; }
.st-price { font-family: var(--hv-hard); font-weight: 400; }
.st-badge { color: var(--cms-btn-txt, #04121A); }

.btn { font-family: var(--hv-cond); font-size: 0.92rem; letter-spacing: 0.14em; font-weight: 700; border-radius: 0; }
.btn-fill { color: var(--cms-btn-txt, #04121A); }

.cms-title, .cms-banner-title { font-family: var(--hv-hard); font-weight: 400; letter-spacing: 0.01em; }
.cms-card, .cms-stat { background: var(--hv-card); border-radius: 0; }
.cms-btn { border-radius: 0; font-family: var(--hv-cond); font-size: 0.92rem; letter-spacing: 0.14em; font-weight: 700; }

/* Inner pages have no hero, so give them a little sky at the top. */
body:not(:has(main > .hv-hero)) main {
    background:
        radial-gradient(80% 420px at 70% -120px, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
        linear-gradient(180deg, #06101c 0, transparent 420px);
}

/* ---- This wipe: map + last wipe's champions ------------------------------ */
.hv-wipe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; }
.hv-wipe-one { grid-template-columns: minmax(0, 1fr); }
.hv-wipe-map, .hv-wipe-champs {
    background: var(--hv-card); border: 1px solid var(--line);
    padding: clamp(22px, 2.6vw, 34px); display: grid; gap: 18px; align-content: start;
}
.hv-wipe .hv-head { margin-bottom: 0; }
.hv-wipe .hv-head h2 { font-family: var(--hv-hard); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.1rem); text-transform: uppercase; margin: 0; }

.hv-wipe-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hv-wipe-facts > div {
    display: grid; gap: 2px; padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line);
}
.hv-wipe-facts span { font-family: var(--hv-cond); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--txt-3); }
.hv-wipe-facts b { font-family: var(--hv-hard); font-weight: 400; font-size: 1.45rem; color: var(--txt); line-height: 1.15; }
.hv-wipe-facts small { color: var(--accent); font-size: 0.85rem; }
.hv-wipe-note { margin: 0; color: #b3bfcc; }
.hv-wipe-map .hv-btn { justify-self: start; }

.hv-champ-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.hv-champ-board h3 { margin: 0 0 10px; font-family: var(--hv-cond); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.hv-champ-board h3 a { color: var(--txt); text-decoration: none; }
.hv-champ-board h3 a:hover { color: var(--accent); }
.hv-champ-board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hv-champ {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 9px 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line);
}
.hv-champ-place {
    display: grid; place-items: center; width: 28px; height: 28px;
    font-family: var(--hv-hard); font-size: 1rem; color: #04121a; background: #6f7f92;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.hv-champ-1 .hv-champ-place { background: #ffc94a; }
.hv-champ-2 .hv-champ-place { background: #cfd8e3; }
.hv-champ-3 .hv-champ-place { background: #d98a4e; }
.hv-champ-1 { border-color: color-mix(in srgb, #ffc94a 35%, transparent); }
.hv-champ-name { color: var(--txt); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-champ-prize { color: var(--accent); font-family: var(--hv-cond); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; white-space: nowrap; }
.hv-champ-more { justify-self: start; color: var(--accent); font-family: var(--hv-cond); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.hv-champ-more:hover { color: var(--txt); }

@media (max-width: 1000px) { .hv-wipe { grid-template-columns: minmax(0, 1fr); } }

/* ---- Content pages ------------------------------------------------------
   Pages built from core blocks: heading, rich text, FAQ, buttons. Core gives
   each its own width and alignment - the heading centred in 1200px, the text
   a 68ch measure pinned left - so Rules, the FAQ and the legal pages read as
   a ragged column hard against the left edge. Here they share one centred
   column, and the parts people scan get some shape. Every selector starts at
   main so it outranks blocks.css, which loads after this file. */

/* The first block's top margin collapsed out of main and pushed the sky
   gradient down, leaving a dead band under the header. */
body:not(:has(main > .hv-hero)) main { display: flow-root; }

main > .cms-block { width: min(100% - var(--pad) * 2, var(--wide)); max-width: none; margin-inline: auto; padding-inline: 0; }
/* Cards and stats join the column too, or a row of them sticks out past the
   text on either side and the page loses its left edge. */
main > :is(.cms-heading, .cms-richtext, .cms-faq, .cms-buttons, .cms-cards, .cms-stats) { width: min(100% - var(--pad) * 2, 920px); }
main > .cms-richtext.cms-width-narrow { width: min(100% - var(--pad) * 2, 640px); }
main > .cms-richtext.cms-width-full { width: min(100% - var(--pad) * 2, var(--wide)); }
main > .cms-block:first-child { margin-block-start: clamp(44px, 6vw, 80px); }
main > .cms-heading + .cms-block { margin-block-start: clamp(20px, 2.6vw, 30px); }
main > .cms-faq + .cms-faq { margin-block-start: clamp(40px, 5vw, 60px); }

/* Body copy: a touch larger and lighter than core's, with the opening
   paragraph as a lede. */
main .cms-richtext { font-size: 1.03rem; line-height: 1.72; color: #b3bfcc; }
main .cms-richtext > p:first-child { font-size: 1.14rem; color: #d5dfe9; }
main .cms-richtext strong { color: var(--txt); font-weight: 600; }
main .cms-richtext a { color: var(--accent); text-decoration-color: var(--hv-edge); }
main .cms-richtext a:hover { text-decoration-color: var(--accent); }

/* Section heads: tracked caps between a diamond and a fading rule, the same
   language as the homepage section heads. */
main .cms-richtext :is(h2, h3) {
    display: flex; align-items: center; gap: 14px;
    margin: 2.5em 0 1em;
    font-family: var(--hv-cond); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; font-size: 1.06rem; color: var(--txt);
}
main .cms-richtext h2 { font-size: 1.24rem; }
main .cms-richtext :is(h2, h3)::before {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px;
    background: var(--accent); transform: rotate(45deg);
}
main .cms-richtext :is(h2, h3)::after {
    content: ""; flex: 1 1 auto; height: 1px;
    background: linear-gradient(90deg, var(--hv-edge), transparent);
}

/* Numbered lists are nearly always rules, and people quote them by number,
   so each one is a card with the number set large. */
main .cms-richtext ol { display: grid; gap: 10px; margin: 0 0 1.4em; }
main .cms-richtext ol > li {
    margin: 0; padding: 15px 20px 15px 64px; line-height: 1.6;
    background: var(--hv-card); border: 1px solid var(--line);
    border-inline-start: 2px solid var(--hv-edge);
    transition: border-color 160ms var(--ease);
}
main .cms-richtext ol > li:hover { border-color: var(--line-2); border-inline-start-color: var(--accent); }
main .cms-richtext ol > li::before {
    content: counter(cms-rule, decimal-leading-zero);
    inset-inline-start: 18px; top: 14px; min-width: 0;
    font-family: var(--hv-hard); font-weight: 400; font-size: 1.2rem;
    letter-spacing: 0.02em; line-height: 1.4; color: var(--accent);
}
/* A picture at the very top of a text block is a portrait (the Staff page). */
main .cms-richtext > img:first-child {
    display: block; width: 112px; height: 112px; object-fit: cover;
    margin: 0 0 22px; border-radius: 50%;
    box-shadow: 0 0 0 1px var(--hv-edge), 0 0 0 6px var(--hv-soft);
}

main .cms-richtext li > p { margin: 0; }
main .cms-richtext li > p + p { margin-block-start: 0.6em; }

/* Bulleted lists stay light, with the theme's diamond for a bullet. */
main .cms-richtext ul > li { padding-inline-start: 1.7em; margin-block-end: 0.7em; }
main .cms-richtext ul > li::before {
    width: 7px; height: 7px; border-radius: 0; transform: rotate(45deg);
    top: 0.7em; inset-inline-start: 0.3em;
}

/* Questions as panels rather than hairlines. */
main .cms-faq > .cms-title { font-size: clamp(26px, 3.2vw, 38px); }
main .cms-faq .cms-title + .cms-faq-item { margin-block-start: clamp(18px, 2.4vw, 26px); }
main .cms-faq-item,
main .cms-faq-item:first-of-type { border: 1px solid var(--line); background: var(--hv-card); transition: border-color 160ms var(--ease); }
main .cms-faq-item + .cms-faq-item { margin-block-start: 8px; }
main .cms-faq-item:hover { border-color: var(--line-2); }
main .cms-faq-item[open] { border-color: var(--hv-edge); }
main .cms-faq-item summary { padding: 17px 22px; font-size: 1.02rem; }
main .cms-faq-item[open] summary { color: var(--accent); }
main .cms-faq-answer { padding: 0 22px 20px; color: #b3bfcc; }
main .cms-faq-answer > :last-child { margin-block-end: 0; }

@media (max-width: 640px) {
    main .cms-richtext ol > li { padding: 14px 16px 14px 52px; }
    main .cms-richtext ol > li::before { inset-inline-start: 14px; font-size: 1.05rem; }
    main .cms-faq-item summary { padding: 15px 16px; }
    main .cms-faq-answer { padding: 0 16px 18px; }
}

/* ---- Footer ------------------------------------------------------------- */
.ftr { background: var(--hv-ink); border-top: 1px solid var(--line); position: relative; }
.ftr::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.55; }
.ftr .brand img { max-height: 40px; }
.ftr h3 { font-family: var(--hv-cond); font-size: 0.8rem; letter-spacing: 0.28em; }

/* ---- Responsive --------------------------------------------------------- */
/* The hero scrawl only has clear sky to sit in on wide screens. */
@media (max-width: 1679px) { .hv-hero .hv-scrawl { display: none; } }
@media (max-width: 1500px) {
    .hdr nav { padding: 0 18px; }
    .hdr nav a { padding: 0.5rem 0.6rem; letter-spacing: 0.1em; font-size: 0.86rem; }
    .hv-signin span { display: none; }
    .hv-connect { padding: 0 1rem; }
}
@media (max-width: 1320px) {
    .hdr-in { gap: 12px; }
    .hdr nav a { padding: 0.5rem 0.45rem; letter-spacing: 0.06em; font-size: 0.82rem; }
    .hv-connect span { display: none; }
    .hv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Ten items stop fitting well below here, so the menu moves behind the button. */
@media (max-width: 1150px) {
    .hdr nav { display: none; }
    .burger { display: grid; margin-inline-start: 0; }
    .hv-hdr-actions { margin-inline-start: auto; }
}
@media (max-width: 1100px) {
    .hv-scrawl { display: none; }
    .hv-why .hv-scrawl { display: none; }
    .hv-info { grid-template-columns: 1fr; }
    .hv-info-art { min-height: 200px; }
    .hv-why { grid-template-columns: 1fr; }
    .hv-card-cell { flex-basis: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .hv-card-cell + .hv-cell { border-inline-start: 0; }
}
@media (max-width: 880px) {
    :root { --hv-hdr-h: 70px; }
    .hv-hdr-actions { margin-inline-start: auto; }
    .hv-connect { display: none; }
    .hv-signin { height: 42px; padding: 0 0.8rem; }
    .burger { margin-inline-start: 0; }
    .hv-heli { display: none; }
    .hv-cell { flex-basis: 45%; border-top: 1px solid rgba(255, 255, 255, 0.06); }
}
@media (max-width: 620px) {
    .hv-kicker { letter-spacing: 0.26em; }
    .hv-kicker::before, .hv-kicker::after { display: none; }
    .hv-highlights { font-size: 0.9rem; letter-spacing: 0.1em; }
    .hv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hv-card-body { padding: 10px 12px 16px; }
    .hv-card-body h3 { font-size: 0.98rem; }
    .hv-card-body p { font-size: 0.8rem; }
    .hv-tiles { grid-template-columns: 1fr; }
    .hv-btn { min-width: 0; width: 100%; }
    .hv-actions { width: 100%; }
    .hv-cell { flex-basis: 100%; border-inline-start: 0; }
    .hv-head .hv-aside { margin-left: 0; width: 100%; }
    .hv-title { font-size: clamp(3rem, 15vw, 4.4rem); }
}

@media (prefers-reduced-motion: no-preference) {
    .hv-heli { animation: hv-hover 9s ease-in-out infinite; }
    @keyframes hv-hover { 50% { translate: -18px 8px; } }
    .sil-beacon { animation: hv-blink 1.8s steps(1) infinite; }
    @keyframes hv-blink { 50% { opacity: 0.15; } }
    .hv-hero-in > * { animation: rise 700ms var(--ease) backwards; }
    .hv-hero-in > :nth-child(2) { animation-delay: 80ms; }
    .hv-hero-in > :nth-child(3) { animation-delay: 160ms; }
    .hv-hero-in > :nth-child(4) { animation-delay: 240ms; }
    .hv-hero-in > :nth-child(5) { animation-delay: 320ms; }
    @supports (animation-timeline: view()) {
        .hv-card, .hv-info, .hv-why > * { animation: rise 520ms var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    }
}

/* ---- Our games: one card per server ------------------------------------ */
.hv-games-intro { margin: -8px 0 22px; max-width: 760px; color: var(--txt-2); line-height: 1.6; }
.hv-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 16px; }
.hv-game {
    --hv-tint: var(--accent);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--hv-card); border: 1px solid var(--line);
    transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.hv-game:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--hv-tint) 55%, transparent);
    box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--hv-tint) 70%, transparent);
}
.hv-game-art {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate;
    display: grid; place-items: center;
    background:
        radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--hv-tint) 34%, transparent), transparent 72%),
        linear-gradient(180deg, #0a1a2c, #060d17);
}
.hv-game-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 500ms var(--ease); }
.hv-game:hover .hv-game-art img { transform: scale(1.05); }
.hv-game-art::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, transparent 45%, var(--hv-card)); }
.hv-game-art > i {
    position: relative; z-index: 2; font-size: clamp(3.4rem, 5vw, 4.4rem); color: var(--hv-tint);
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--hv-tint) 60%, transparent));
}
.hv-game-art svg.hv-pines { position: absolute; left: -2%; bottom: -1px; width: 104%; height: 34%; fill: var(--hv-card); z-index: 1; }
.hv-game-label, .hv-game-status {
    position: absolute; top: 12px; z-index: 3;
    font-family: var(--hv-cond); font-weight: 700; font-size: 0.7rem;
    letter-spacing: 0.24em; text-transform: uppercase;
    padding: 5px 10px; background: rgba(5, 8, 13, 0.78); border: 1px solid var(--line);
}
.hv-game-label { left: 12px; color: var(--hv-tint); }
.hv-game-status { right: 12px; color: #7CE3A1; }
.hv-game-status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; vertical-align: 1px; }
.hv-game-soon .hv-game-status { color: #F5C451; }
.hv-game-soon .hv-game-art > i { opacity: 0.55; }
.hv-game-body { padding: 14px 18px 18px; display: grid; gap: 8px; flex: 1; align-content: start; }
.hv-game-body h3 {
    margin: 0; font-family: var(--hv-cond); font-weight: 700;
    font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1;
}
.hv-game-tag { margin: 0; color: var(--hv-tint); font-family: var(--hv-cond); font-weight: 600; letter-spacing: 0.08em; font-size: 0.92rem; }
.hv-game-facts { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.hv-game-facts li { position: relative; padding-left: 16px; font-size: 0.86rem; line-height: 1.45; color: var(--txt-2); }
.hv-game-facts li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--hv-tint); transform: rotate(45deg); }
.hv-game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.hv-game-copy, .hv-game-go, .hv-game-more {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px;
    font-family: var(--hv-cond); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em;
    text-decoration: none; cursor: pointer; border: 0;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.hv-game-copy { color: #fff; background: #05080d; box-shadow: inset 0 0 0 1px #243246; max-width: 100%; }
.hv-game-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-game-copy:hover { box-shadow: inset 0 0 0 1px var(--hv-tint); }
.hv-game-go { color: #04121A; background: var(--hv-tint); text-transform: uppercase; }
.hv-game-go:hover { filter: brightness(1.1); }
.hv-game-more { color: var(--txt); background: transparent; padding: 0 4px; text-transform: uppercase; }
.hv-game-more:hover { color: var(--hv-tint); }