/* ==========================================================================
   SkullClub - hot blue

   The hub screenshot is the point, so it is shown at close to full brightness
   and the copy sits on frosted glass instead of under a blackout gradient.
   Tier colours are the exact values from the server's ranks.yml.
   ========================================================================== */

:root {
    /* Ground - deep navy, cool */
    --sk-void:  #060b18;
    --sk-deep:  #0a1226;
    --sk-pit:   #0e1830;   /* card */
    --sk-raise: #16223f;   /* elevated cell */
    --sk-sunk:  #040812;   /* inputs */

    /* Hairlines are alpha, so a card on a card still shows an edge */
    --sk-line:        rgba(180, 205, 255, .12);
    --sk-line-strong: rgba(180, 205, 255, .24);

    /* Ink */
    --sk-white: #eaf1ff;
    --sk-dust:  #a3b4d0;
    --sk-smoke: #8194b4;

    /* Hot blue */
    --sk-blue:      #2b7fff;
    --sk-blue-lit:  #5aa0ff;
    --sk-blue-dim:  rgba(43, 127, 255, .12);
    --sk-blue-line: rgba(43, 127, 255, .4);
    --sk-cyan:      #22d3ee;

    --sk-ok:   #3ddc97;
    --sk-warn: #ffc107;

    /* Tier accents - straight out of ranks.yml */
    --sk-guard:    #b0bec5;
    --sk-vanguard: #4dd0e1;
    --sk-premium:  #ffc107;
    --sk-p2w:      #ff5252;

    /* Type */
    --sk-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --sk-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Shape - larger and softer than the usual game-store card */
    --sk-r-xl: 22px;
    --sk-r-lg: 18px;
    --sk-r:    14px;
    --sk-r-sm: 10px;

    --sk-shadow:    0 8px 26px rgba(3, 8, 20, .45);
    --sk-shadow-lg: 0 22px 60px rgba(3, 8, 20, .6);
    --sk-glow:      0 10px 30px rgba(43, 127, 255, .3);

    --sk-section: clamp(3.75rem, 8vw, 7rem);

    /* Bootstrap bridge */
    --bs-body-bg: var(--sk-void);
    --bs-body-color: var(--sk-dust);
    --bs-emphasis-color: var(--sk-white);
    --bs-border-color: var(--sk-line);
    --bs-link-color: var(--sk-blue-lit);
    --bs-link-hover-color: var(--sk-white);
    --bs-font-sans-serif: var(--sk-body);
    --bs-border-radius: var(--sk-r);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    background-color: var(--sk-void);
    color: var(--sk-dust);
    font-family: var(--sk-body);
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
}

/* Backdrop: the block grid the game is actually made of, tiled at 64px and kept
   quiet. Scrolls with the page rather than sitting fixed, so it reads as a wall
   behind the content instead of a parallax effect. Sits at -1 so content paints
   over it, and the hero is unaffected because it isolates its own context. */
body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url('../img/blocks.png');
    background-size: 64px 64px;
    background-repeat: repeat;
    opacity: .55;
}

body {
    position: relative;
}

/* --------------------------------------------------------------------------
   Section divider
   -------------------------------------------------------------------------- */

/* A seam of blocks rather than a rule with an ornament on it. Same 8px unit as
   the backdrop grid, fading out at both ends, with one lit block in the middle. */
.sk-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 8px;
}

.sk-divider::before,
.sk-divider::after {
    content: '';
    flex: 1;
    height: 8px;
    background-image: repeating-linear-gradient(90deg,
        var(--sk-line-strong) 0 8px, transparent 8px 16px);
}

.sk-divider::before {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 85%);
    mask-image: linear-gradient(90deg, transparent, #000 85%);
}

.sk-divider::after {
    -webkit-mask-image: linear-gradient(90deg, #000 15%, transparent);
    mask-image: linear-gradient(90deg, #000 15%, transparent);
}

.sk-divider span {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background: var(--sk-blue);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sk-display);
    color: var(--sk-white);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
}

a {
    color: var(--sk-blue-lit);
    text-decoration: none;
    transition: color .15s ease;
}

a:hover { color: var(--sk-white); }

::selection {
    background: var(--sk-blue);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--sk-blue-lit);
    outline-offset: 3px;
    border-radius: 6px;
}

code {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: .88em;
    color: var(--sk-cyan);
    background: rgba(34, 211, 238, .1);
    padding: .14em .45em;
    border-radius: 6px;
}

hr { border-color: var(--sk-line); opacity: 1; }

/* Small capsule label */
.sk-eyebrow {
    display: inline-block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sk-blue-lit);
    background: var(--sk-blue-dim);
    border: 1px solid var(--sk-blue-line);
    border-radius: 999px;
    padding: .32rem .9rem;
    margin-bottom: 1.15rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    font-family: var(--sk-body);
    font-size: .94rem;
    font-weight: 600;
    border-radius: var(--sk-r-sm);
    padding: .75rem 1.5rem;
    border: 1px solid transparent;
    transition: background-color .16s ease, color .16s ease,
                border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

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

.btn-primary,
.sk-btn {
    background: var(--sk-blue);
    border-color: var(--sk-blue);
    color: #fff;
    box-shadow: var(--sk-glow);
}

.btn-primary:hover,
.sk-btn:hover,
.btn-primary:focus-visible,
.sk-btn:focus-visible {
    background: var(--sk-blue-lit);
    border-color: var(--sk-blue-lit);
    color: #fff;
    box-shadow: 0 14px 38px rgba(43, 127, 255, .45);
}

.sk-btn-ghost,
.btn-secondary {
    background: rgba(234, 241, 255, .06);
    border-color: var(--sk-line-strong);
    color: var(--sk-white);
    box-shadow: none;
}

.sk-btn-ghost:hover,
.btn-secondary:hover {
    background: rgba(234, 241, 255, .12);
    border-color: var(--sk-white);
    color: var(--sk-white);
}

.sk-btn-tier {
    background: transparent;
    border-color: color-mix(in srgb, var(--tier, var(--sk-blue)) 45%, transparent);
    color: var(--tier, var(--sk-blue));
    box-shadow: none;
}

.sk-btn-tier:hover,
.sk-btn-tier:focus-visible {
    background: var(--tier, var(--sk-blue));
    border-color: var(--tier, var(--sk-blue));
    color: #071021;
}

.btn-lg { font-size: 1rem; padding: .92rem 1.9rem; }

/* --------------------------------------------------------------------------
   Navbar - top tabs
   -------------------------------------------------------------------------- */

.sk-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(6, 11, 24, .55);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border-bottom: 0;
    padding: .7rem 0;
    transition: background-color .25s ease, box-shadow .25s ease, padding .25s ease;
}

/* A lit hairline instead of a flat border: brightest under the brand, fading
   out toward the edges. */
.sk-nav::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--sk-blue-line) 18%,
        rgba(180, 205, 255, .22) 50%,
        var(--sk-blue-line) 82%,
        transparent 100%);
}

/* Set by a scroll listener once the page moves, so the bar is airy over the
   hero and solid once it is sitting on content. */
.sk-nav.is-stuck {
    background: rgba(6, 11, 24, .88);
    box-shadow: 0 10px 34px rgba(3, 8, 20, .55);
    padding: .5rem 0;
}

.sk-nav .navbar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-family: var(--sk-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--sk-white);
}

.sk-nav .navbar-brand:hover { color: var(--sk-white); }

/* The wordmark already says the name, so the brand is the image alone. */
.sk-nav__logo {
    display: block;
    height: 38px;
    width: auto;
    filter: drop-shadow(0 0 14px rgba(43, 127, 255, .35));
    transition: height .25s ease, filter .2s ease, transform .2s ease;
}

.sk-nav .navbar-brand:hover .sk-nav__logo {
    filter: drop-shadow(0 0 22px rgba(43, 127, 255, .65));
    transform: translateY(-1px);
}

.sk-nav.is-stuck .sk-nav__logo {
    height: 32px;
}

/* Live server pill, right of the tabs */
.sk-navlive {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--sk-dust);
    background: rgba(234, 241, 255, .05);
    border: 1px solid var(--sk-line);
    border-radius: 999px;
    padding: .35rem .8rem;
    white-space: nowrap;
}

.sk-navlive b { color: var(--sk-white); font-weight: 600; }

.sk-navlive__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--sk-ok);
    box-shadow: 0 0 0 3px rgba(61, 220, 151, .18);
}

.sk-navlive__dot--off {
    background: var(--sk-smoke);
    box-shadow: 0 0 0 3px rgba(129, 148, 180, .16);
}

/* The tab row itself */
.sk-nav .navbar-nav.sk-tabs {
    gap: .2rem;
    background: rgba(234, 241, 255, .04);
    border: 1px solid var(--sk-line);
    border-radius: 999px;
    padding: .25rem;
}

.sk-nav .sk-tabs .nav-link {
    font-size: .9rem;
    font-weight: 500;
    color: var(--sk-dust);
    padding: .45rem 1.05rem;
    border-radius: 999px;
    transition: color .15s ease, background-color .15s ease;
}

.sk-nav .sk-tabs .nav-link:hover {
    color: var(--sk-white);
    background: rgba(234, 241, 255, .07);
}

.sk-nav .sk-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--sk-blue), #1a6ae8);
    box-shadow: 0 6px 20px rgba(43, 127, 255, .45),
                inset 0 1px 0 rgba(255, 255, 255, .28);
}

.sk-nav .dropdown-menu {
    background: rgba(14, 24, 48, .96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    box-shadow: var(--sk-shadow-lg);
    padding: .4rem;
    margin-top: .5rem;
}

.sk-nav .dropdown-item {
    font-size: .9rem;
    color: var(--sk-dust);
    border-radius: var(--sk-r-sm);
    padding: .55rem .8rem;
}

.sk-nav .dropdown-item:hover,
.sk-nav .dropdown-item.active {
    background: var(--sk-blue-dim);
    color: var(--sk-white);
}

.sk-nav .navbar-toggler {
    border-color: var(--sk-line-strong);
    border-radius: var(--sk-r-sm);
    padding: .4rem .6rem;
}

.sk-nav .navbar-toggler:focus { box-shadow: none; }

/* --------------------------------------------------------------------------
   Hero - the hub is shown, not buried
   -------------------------------------------------------------------------- */

.sk-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: min(86vh, 800px);
    padding: clamp(4rem, 9vw, 7rem) 0 clamp(3.5rem, 7vw, 5.5rem);
    overflow: hidden;
}

.sk-hero__plate {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image: url('../img/hub.jpg');
    background-size: cover;
    background-position: 60% 42%;
    /* Close to full brightness. The copy gets legibility from its own glass
       panel rather than from a blackout over the whole picture. */
    filter: saturate(1.05) contrast(1.02) brightness(.94);
}

/* A cool wash that pulls the warm hub toward the blue palette, plus a fade at
   the very bottom so the photo meets the page instead of cutting off. */
.sk-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(6, 11, 24, .55) 0%, transparent 22%, transparent 62%, rgba(6, 11, 24, .85) 92%, var(--sk-void) 100%),
        linear-gradient(0deg, rgba(12, 30, 70, .35), rgba(12, 30, 70, .35));
}

/* The panel is deliberately narrow. Everything to the right of it is the hub
   and the wordmark, at close to full brightness. */
.sk-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

/* --------------------------------------------------------------------------
   Hero wordmark - pops in on load, then breathes
   -------------------------------------------------------------------------- */

.sk-hero__logo {
    display: grid;
    place-items: center;
}

.sk-hero__logo img {
    width: min(100%, clamp(280px, 32vw, 560px));
    height: auto;
    /* Two shadows: a dark one to lift it off the bright sky in the photo, and a
       blue one so it belongs to the palette rather than sitting on top of it. */
    filter: drop-shadow(0 16px 42px rgba(3, 8, 20, .8))
            drop-shadow(0 0 34px rgba(43, 127, 255, .35));
    /* The float is delayed until the pop has landed, and both animate transform,
       so the later one takes over cleanly at a matching value. */
    animation: sk-logo-pop .9s cubic-bezier(.2, .9, .25, 1.2) both,
               sk-logo-float 4.5s ease-in-out .95s infinite;
    will-change: transform;
}

@keyframes sk-logo-pop {
    0%   { opacity: 0; transform: scale(.72) translateY(28px); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes sk-logo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* The glass panel. This is what makes the photo usable. */
.sk-glass {
    background: rgba(6, 11, 24, .72);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid var(--sk-line-strong);
    border-radius: var(--sk-r-xl);
    box-shadow: var(--sk-shadow-lg);
}

.sk-hero__panel {
    max-width: min(560px, 100%);
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

.sk-hero__title {
    font-family: var(--sk-display);
    font-size: clamp(2.4rem, 5vw, 3.9rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.03em;
    color: var(--sk-white);
    margin: 0 0 1.1rem;
}

.sk-hero__title span {
    background: linear-gradient(96deg, var(--sk-blue-lit), var(--sk-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sk-hero__lede {
    font-size: clamp(.98rem, 1.3vw, 1.08rem);
    color: var(--sk-dust);
    max-width: 48ch;
    margin: 0 0 1.75rem;
}

.sk-hero__lede strong { color: var(--sk-white); font-weight: 600; }

.sk-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
}

.sk-ip {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: .84rem;
    color: var(--sk-white);
    background: rgba(234, 241, 255, .06);
    border: 1px solid var(--sk-line-strong);
    border-radius: var(--sk-r-sm);
    padding: .78rem 1.05rem;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}

.sk-ip:hover {
    border-color: var(--sk-blue);
    background: var(--sk-blue-dim);
}

.sk-ip__hint { color: var(--sk-smoke); font-size: .72rem; }

.sk-live {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 1.4rem 0 0;
    font-size: .88rem;
    color: var(--sk-dust);
}

.sk-live__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--sk-ok);
    box-shadow: 0 0 0 4px rgba(61, 220, 151, .18);
}

.sk-live__dot--off {
    background: var(--sk-smoke);
    box-shadow: 0 0 0 4px rgba(129, 148, 180, .16);
}

.sk-live b { color: var(--sk-white); font-weight: 600; }

/* Compact rank list beside the hero copy */
.sk-heropanel { padding: 1.1rem; }

.sk-heropanel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem .65rem .9rem;
    border-bottom: 1px solid var(--sk-line);
    margin-bottom: .35rem;
}

.sk-heropanel__title { font-size: 1rem; margin: 0; }
.sk-heropanel__all { font-size: .84rem; font-weight: 500; }

.sk-herorank {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .65rem;
    border-radius: var(--sk-r-sm);
    transition: background-color .15s ease;
}

.sk-herorank:hover { background: rgba(234, 241, 255, .06); }

.sk-herorank__chip {
    width: 8px; height: 32px;
    border-radius: 999px;
    background: var(--tier);
    flex: 0 0 auto;
}

.sk-herorank__name {
    font-family: var(--sk-display);
    font-size: .98rem;
    font-weight: 600;
    color: var(--sk-white);
    line-height: 1.25;
}

.sk-herorank__adds { font-size: .78rem; color: var(--sk-smoke); }

.sk-herorank__price {
    margin-left: auto;
    font-weight: 600;
    color: var(--sk-white);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Tier strip - prices near the top without covering the hero photo
   -------------------------------------------------------------------------- */

.sk-tierstrip {
    background: var(--sk-deep);
    border-top: 1px solid var(--sk-line);
    border-bottom: 1px solid var(--sk-line);
}

.sk-tierstrip__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.sk-tierslot {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1.15rem 1.15rem;
    border-left: 1px solid var(--sk-line);
    transition: background-color .15s ease;
}

.sk-tierslot:first-child { border-left: 0; }

.sk-tierslot:hover { background: rgba(234, 241, 255, .04); }

.sk-tierslot__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    color: var(--tier);
    background: color-mix(in srgb, var(--tier) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier) 34%, transparent);
}

.sk-tierslot__icon svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tier) 60%, transparent));
}

/* Without this the label column refuses to shrink below its longest word and
   pushes the price out of the slot on narrow screens. The icon is excluded
   because it is a fixed-size box, not a shrinkable text column. */
.sk-tierslot > span:not(.sk-tierslot__icon) {
    min-width: 0;
}

.sk-tierslot__name,
.sk-tierslot__adds {
    overflow-wrap: anywhere;
}

.sk-tierslot__name {
    display: block;
    font-family: var(--sk-display);
    font-size: .96rem;
    font-weight: 600;
    color: var(--sk-white);
    line-height: 1.25;
}

.sk-tierslot__adds {
    display: block;
    font-size: .76rem;
    color: var(--sk-smoke);
}

.sk-tierslot__price {
    margin-left: auto;
    font-weight: 700;
    color: var(--sk-white);
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .sk-tierstrip__grid { grid-template-columns: repeat(2, 1fr); }

    .sk-tierslot {
        padding: .95rem .8rem;
        gap: .6rem;
    }

    .sk-tierslot:nth-child(odd) { border-left: 0; }
    .sk-tierslot:nth-child(n+3) { border-top: 1px solid var(--sk-line); }

    /* The unlock summary is the first thing to go when there is no room. */
    .sk-tierslot__adds { display: none; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.sk-section { padding: var(--sk-section) 0; }

/* Alternating band. A flat lifted panel with a hard edge top and bottom, the
   way one material meets another. No bloom: the glow belongs on the buttons and
   the tier accents, not smeared across whole sections. */
.sk-section--tint {
    position: relative;
    background: rgba(180, 205, 255, .04);
}

.sk-section--tint::before,
.sk-section--tint::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--sk-line);
}

.sk-section--tint::before { top: 0; }
.sk-section--tint::after { bottom: 0; }

.sk-section__head {
    max-width: 58ch;
    margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.sk-section__head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sk-section__title {
    font-size: clamp(1.85rem, 3.4vw, 2.75rem);
    margin: 0 0 .8rem;
}

.sk-section__sub { color: var(--sk-dust); margin: 0; }

/* --------------------------------------------------------------------------
   Feature cards
   -------------------------------------------------------------------------- */

.sk-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}

.sk-feature {
    background: var(--sk-pit);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    padding: 1.85rem 1.6rem;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.sk-feature:hover {
    transform: translateY(-4px);
    border-color: var(--sk-blue-line);
    box-shadow: var(--sk-shadow);
}

.sk-feature__icon {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: var(--sk-r);
    background: var(--sk-blue-dim);
    border: 1px solid var(--sk-blue-line);
    color: var(--sk-blue-lit);
    font-size: 1.3rem;
    margin-bottom: 1.15rem;
}

.sk-feature__title { font-size: 1.22rem; margin: 0 0 .5rem; }
.sk-feature__body { font-size: .95rem; color: var(--sk-dust); margin: 0; }

/* --------------------------------------------------------------------------
   The ladder
   -------------------------------------------------------------------------- */

.sk-ladder {
    position: relative;
    padding-left: clamp(2.25rem, 4vw, 3.5rem);
}

/* The spine is a stack of blocks rather than a drawn line: the tier gradient
   punched through a repeating mask on the same 8px unit as the backdrop. */
.sk-ladder::before {
    content: '';
    position: absolute;
    left: clamp(.5rem, 1.1vw, .9rem);
    top: 1rem;
    bottom: 2.5rem;
    width: 4px;
    background: linear-gradient(180deg,
        var(--sk-guard) 0%, var(--sk-vanguard) 34%, var(--sk-premium) 67%, var(--sk-p2w) 100%);
    -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 8px, transparent 8px 15px);
    mask-image: repeating-linear-gradient(180deg, #000 0 8px, transparent 8px 15px);
}

.sk-tier {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    background: var(--sk-pit);
    border: 1px solid var(--sk-line);
    border-left: 3px solid var(--tier);
    border-radius: var(--sk-r-lg);
    padding: clamp(1.4rem, 2.5vw, 1.9rem);
    margin-bottom: 1.1rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

.sk-tier:hover {
    transform: translateX(4px);
    box-shadow: var(--sk-shadow), -10px 0 34px color-mix(in srgb, var(--tier) 14%, transparent);
}

/* Node on the spine. A block, not a bead. */
.sk-tier::before {
    content: '';
    position: absolute;
    left: calc(-1 * clamp(2.25rem, 4vw, 3.5rem) + clamp(.5rem, 1.1vw, .9rem) - 4px);
    top: clamp(1.6rem, 2.6vw, 2.1rem);
    width: 12px; height: 12px;
    background: var(--tier);
    box-shadow: 0 0 0 4px var(--sk-void), 0 0 18px color-mix(in srgb, var(--tier) 60%, transparent);
}

.sk-tier__icon {
    display: grid;
    place-items: center;
    width: clamp(56px, 9vw, 76px);
    height: clamp(56px, 9vw, 76px);
    align-self: start;
    color: var(--tier);
    background: color-mix(in srgb, var(--tier) 10%, var(--sk-sunk));
    border: 1px solid color-mix(in srgb, var(--tier) 38%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tier) 26%, transparent);
}

.sk-tier__icon svg {
    width: 58%;
    height: 58%;
    filter: drop-shadow(0 2px 9px color-mix(in srgb, var(--tier) 65%, transparent));
}

.sk-tier__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .75rem;
    margin-bottom: .9rem;
}

/* Ladder position, set in the mono-ish display face at small size. */
.sk-tier__step {
    font-family: var(--sk-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--tier);
    opacity: .75;
}

.sk-tier__price {
    margin-left: auto;
}

/* Which tiers are folded into this one. Reads left to right as a stack, which
   is the actual selling point of the ladder. */
.sk-tier__stack {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--sk-smoke);
    background: rgba(234, 241, 255, .04);
    padding: .55rem .8rem;
    margin: 0 0 1.2rem;
}

.sk-tier__stack b { color: var(--sk-dust); font-weight: 600; }

.sk-tier__blocks {
    display: flex;
    gap: 3px;
    flex: 0 0 auto;
}

.sk-tier__blocks i {
    width: 9px;
    height: 16px;
    background: var(--tier);
}

.sk-tier__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.sk-tier__name {
    font-family: var(--sk-display);
    font-size: clamp(1.45rem, 2.5vw, 1.9rem);
    color: var(--tier);
    line-height: 1;
    margin: 0;
}

.sk-tier__price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sk-white);
    white-space: nowrap;
}

.sk-tier__price del {
    color: var(--sk-smoke);
    font-size: .85rem;
    font-weight: 400;
    margin-right: .35rem;
}

.sk-tier__adds { list-style: none; padding: 0; margin: 0 0 .9rem; }

.sk-tier__adds li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .4rem;
    color: var(--sk-white);
    font-size: .95rem;
}

.sk-tier__adds li::before {
    content: '';
    position: absolute;
    left: .15rem; top: .64em;
    width: 7px; height: 7px;
    border-radius: 2px;
    background: var(--tier);
}

.sk-tier__foot { display: flex; gap: .7rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.sk-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    counter-reset: sk-step;
}

.sk-step {
    counter-increment: sk-step;
    background: var(--sk-pit);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    padding: 1.85rem 1.6rem 1.6rem;
}

.sk-step::before {
    content: counter(sk-step);
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--sk-blue);
    color: #fff;
    font-family: var(--sk-display);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 1rem;
    box-shadow: var(--sk-glow);
}

.sk-step__title { font-size: 1.18rem; margin: 0 0 .5rem; }
.sk-step__body { font-size: .94rem; color: var(--sk-dust); margin: 0; }

/* --------------------------------------------------------------------------
   Server status
   -------------------------------------------------------------------------- */

.sk-servers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.sk-server {
    background: var(--sk-pit);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    padding: 1.6rem;
}

.sk-server__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sk-server__name { font-size: 1.28rem; margin: 0; }

.sk-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .76rem;
    font-weight: 600;
    padding: .3rem .75rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.sk-badge--on {
    color: var(--sk-ok);
    background: rgba(61, 220, 151, .1);
    border-color: rgba(61, 220, 151, .3);
}

.sk-badge--off {
    color: var(--sk-smoke);
    background: rgba(129, 148, 180, .1);
    border-color: var(--sk-line-strong);
}

.sk-server__meter {
    height: 7px;
    border-radius: 999px;
    background: rgba(234, 241, 255, .08);
    overflow: hidden;
    margin-bottom: .6rem;
}

.sk-server__meter span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sk-blue), var(--sk-cyan));
}

.sk-server__count { font-size: .88rem; color: var(--sk-dust); margin: 0 0 1.1rem; }
.sk-server__count b { color: var(--sk-white); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.sk-faq { display: grid; gap: .7rem; }

.sk-faq__item {
    background: var(--sk-pit);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    overflow: hidden;
    transition: border-color .18s ease;
}

.sk-faq__item[open] { border-color: var(--sk-blue-line); }

.sk-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    cursor: pointer;
    font-family: var(--sk-display);
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--sk-white);
    list-style: none;
}

.sk-faq__q::-webkit-details-marker { display: none; }

.sk-faq__q::after {
    content: '+';
    font-size: 1.4rem;
    line-height: 1;
    color: var(--sk-blue-lit);
    flex: 0 0 auto;
    transition: transform .2s ease;
}

.sk-faq__item[open] .sk-faq__q::after { transform: rotate(45deg); }

.sk-faq__a {
    padding: 0 1.35rem 1.25rem;
    margin: 0;
    color: var(--sk-dust);
    font-size: .95rem;
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.sk-cta {
    position: relative;
    overflow: hidden;
    border-radius: var(--sk-r-xl);
    border: 1px solid var(--sk-blue-line);
    background:
        radial-gradient(110% 150% at 50% 0%, rgba(43, 127, 255, .22), transparent 62%),
        var(--sk-pit);
    padding: clamp(2.4rem, 5vw, 3.75rem);
    text-align: center;
}

.sk-cta__title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 0 0 .8rem; }
.sk-cta__sub { color: var(--sk-dust); max-width: 52ch; margin: 0 auto 1.75rem; }

/* --------------------------------------------------------------------------
   Error page
   -------------------------------------------------------------------------- */

.sk-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(74vh, 680px);
    padding: clamp(3rem, 8vw, 6rem) 0;
    text-align: center;
}

.sk-404__inner {
    max-width: 60ch;
}

/* The code, drawn on the same grid as the backdrop so it reads as built out of
   the page rather than placed on top of it. */
.sk-404__mark {
    display: block;
    width: min(100%, clamp(240px, 40vw, 460px));
    height: auto;
    margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
    filter: drop-shadow(0 6px 26px rgba(3, 8, 20, .8))
            drop-shadow(0 0 30px rgba(43, 127, 255, .3));
}

.sk-404__mark rect {
    fill: var(--sk-white);
}

/* Accent cells, coloured by the shared tier map via their data-tier. */
.sk-404__mark rect.sk-404__ore {
    fill: var(--tier);
}

.sk-404__title {
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    margin: 0 0 .9rem;
}

.sk-404__body {
    color: var(--sk-dust);
    margin: 0 auto 2rem;
    max-width: 46ch;
}

.sk-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Inner page header - keeps the photo visible here too
   -------------------------------------------------------------------------- */

.sk-pagehead {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(200px, 26vw, 300px);
    padding: clamp(3.5rem, 7vw, 5rem) 0 clamp(2rem, 3.5vw, 3rem);
    overflow: hidden;
}

.sk-pagehead__plate {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image: url('../img/hub.jpg');
    background-size: cover;
    background-position: 60% 46%;
    filter: saturate(1.05) brightness(.8);
}

.sk-pagehead__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(6, 11, 24, .7) 0%, rgba(6, 11, 24, .35) 40%, rgba(6, 11, 24, .92) 88%, var(--sk-void) 100%),
        linear-gradient(0deg, rgba(12, 30, 70, .4), rgba(12, 30, 70, .4));
}

.sk-pagehead .sk-section__head { margin-bottom: 0; }

.sk-pagehead h1 {
    text-shadow: 0 2px 24px rgba(6, 11, 24, .8);
}

/* Long-form legal and wiki pages read better on a contained column */
.sk-prose {
    max-width: 76ch;
}

.sk-prose h2 {
    font-size: 1.35rem;
    margin: 2.4rem 0 .9rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--sk-line);
}

.sk-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.sk-prose p, .sk-prose li { color: var(--sk-dust); }
.sk-prose strong { color: var(--sk-white); }
.sk-prose .lead { font-size: 1.05rem; color: var(--sk-white); }

.sk-prose ul { padding-left: 1.2rem; }
.sk-prose li { margin-bottom: .4rem; }

.sk-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: .92rem;
}

.sk-prose th, .sk-prose td {
    border: 1px solid var(--sk-line);
    padding: .6rem .8rem;
    text-align: left;
    vertical-align: top;
}

.sk-prose th { background: var(--sk-raise); color: var(--sk-white); }

/* --------------------------------------------------------------------------
   Tier colours, keyed off the rank slug

   Colour lives here rather than in the templates so the ladder, the strip and
   the store cards all read from one place. Values are the exact ones from the
   server's ranks.yml.

   The default is set on the CONTAINERS, never on the tiered element itself, so
   it arrives by inheritance. A declaration on the element always beats an
   inherited value, which makes the map below win regardless of source order.
   Putting the default on the element instead would make this a specificity tie
   decided by whichever rule came last in the file.
   -------------------------------------------------------------------------- */

.sk-ranks,
.sk-ladder,
.sk-tierstrip__grid,
.sk-shelf__swatches {
    --tier: var(--sk-blue);
}

[data-tier="skull-guard"]    { --tier: var(--sk-guard); }
[data-tier="skull-vanguard"] { --tier: var(--sk-vanguard); }
[data-tier="skull-premium"]  { --tier: var(--sk-premium); }
[data-tier="skull-p2w"]      { --tier: var(--sk-p2w); }

/* --------------------------------------------------------------------------
   Store rank card
   -------------------------------------------------------------------------- */

.sk-ranks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
}

.sk-rank {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--sk-pit);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    padding: 1.5rem 1.4rem 1.4rem;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* A wash of the tier colour bleeding down from the top edge. */
.sk-rank::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--tier);
}

.sk-rank::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tier) 12%, transparent), transparent 42%);
}

.sk-rank > * { position: relative; z-index: 1; }

.sk-rank:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--tier) 45%, transparent);
    box-shadow: var(--sk-shadow-lg),
                0 0 34px color-mix(in srgb, var(--tier) 14%, transparent);
}

.sk-rank__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.1rem;
}

.sk-rank__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    border-radius: var(--sk-r-lg);
    color: var(--tier);
    background:
        radial-gradient(120% 120% at 50% 0%,
            color-mix(in srgb, var(--tier) 26%, transparent),
            color-mix(in srgb, var(--tier) 7%, transparent) 70%),
        var(--sk-sunk);
    border: 1px solid color-mix(in srgb, var(--tier) 42%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tier) 30%, transparent),
                0 8px 22px rgba(3, 8, 20, .45);
    overflow: hidden;
}

/* A soft bloom behind the glyph so the tile reads as lit rather than flat. */
.sk-rank__icon::after {
    content: '';
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at 50% 55%,
        color-mix(in srgb, var(--tier) 40%, transparent), transparent 62%);
    filter: blur(10px);
    pointer-events: none;
}

.sk-rank__icon svg {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--tier) 70%, transparent));
    transition: transform .25s cubic-bezier(.2, .8, .3, 1.1);
}

.sk-rank:hover .sk-rank__icon svg {
    transform: scale(1.12) rotate(-4deg);
}

.sk-rank__step {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tier);
    background: color-mix(in srgb, var(--tier) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier) 32%, transparent);
    border-radius: 999px;
    padding: .25rem .6rem;
    white-space: nowrap;
}

.sk-rank__name {
    font-family: var(--sk-display);
    font-size: 1.35rem;
    color: var(--sk-white);
    margin: 0 0 .4rem;
    line-height: 1.15;
}

.sk-rank__desc {
    font-size: .9rem;
    color: var(--sk-dust);
    margin: 0 0 1.1rem;
}

.sk-rank__price {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    font-family: var(--sk-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--sk-white);
    margin-bottom: 1.1rem;
}

.sk-rank__price del {
    font-family: var(--sk-body);
    font-size: .85rem;
    font-weight: 400;
    color: var(--sk-smoke);
}

.sk-rank__price small {
    font-family: var(--sk-body);
    font-size: .74rem;
    font-weight: 500;
    color: var(--sk-smoke);
}

.sk-rank__foot { margin-top: auto; }

/* --------------------------------------------------------------------------
   Store shelves - the category grid on the store landing page
   -------------------------------------------------------------------------- */

.sk-shelves {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.sk-shelf {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--sk-pit);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    padding: 1.6rem 1.5rem;
    color: var(--sk-dust);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.sk-shelf:hover {
    transform: translateY(-4px);
    border-color: var(--sk-blue-line);
    box-shadow: var(--sk-shadow-lg);
    color: var(--sk-dust);
}

.sk-shelf__name {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.35rem;
    color: var(--sk-white);
    margin: 0 0 .3rem;
}

.sk-shelf__name i { color: var(--sk-blue-lit); }

.sk-shelf__count { font-size: .88rem; margin: 0; }

.sk-shelf__swatches { display: flex; gap: .4rem; }

.sk-shelf__swatch {
    width: 34px;
    height: 6px;
    border-radius: 999px;
    background: var(--tier);
}

.sk-shelf__go {
    margin-top: auto;
    font-size: .88rem;
    font-weight: 600;
    color: var(--sk-blue-lit);
}

.sk-shelf__go::after {
    content: ' \2192';
    transition: none;
}

.sk-shelf:hover .sk-shelf__go { color: var(--sk-white); }

/* --------------------------------------------------------------------------
   Cards, shop grid, sidebar
   -------------------------------------------------------------------------- */

.card {
    background: var(--sk-pit);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    color: var(--sk-dust);
}

.card-header,
.card-footer {
    background: var(--sk-raise);
    border-color: var(--sk-line);
    font-size: .86rem;
    font-weight: 600;
    color: var(--sk-dust);
}

.card-title { color: var(--sk-white); }

.sk-pkg {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--sk-pit);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.sk-pkg:hover {
    transform: translateY(-5px);
    border-color: var(--sk-blue-line);
    box-shadow: var(--sk-shadow-lg);
}

.sk-pkg__media {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--sk-raise);
    border-bottom: 1px solid var(--sk-line);
    overflow: hidden;
}

.sk-pkg__media img {
    width: 100%; height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    padding: 1rem;
    transition: transform .25s ease;
}

.sk-pkg:hover .sk-pkg__media img { transform: scale(1.05); }

.sk-pkg__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.4rem;
    gap: .45rem;
}

.sk-pkg__name {
    font-family: var(--sk-display);
    font-size: 1.3rem;
    color: var(--sk-white);
    margin: 0;
    line-height: 1.15;
}

.sk-pkg__price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sk-blue-lit);
    margin: 0;
}

.sk-pkg__price del {
    color: var(--sk-smoke);
    font-size: .82rem;
    font-weight: 400;
    margin-right: .35rem;
}

.sk-pkg__foot { margin-top: auto; padding-top: 1rem; }

.sk-side .list-group {
    border-radius: var(--sk-r);
    overflow: hidden;
    border: 1px solid var(--sk-line);
}

.sk-side .list-group-item {
    background: var(--sk-pit);
    border: 0;
    border-bottom: 1px solid var(--sk-line);
    color: var(--sk-dust);
    font-size: .93rem;
    font-weight: 500;
    padding: .85rem 1.1rem;
    transition: background-color .15s ease, color .15s ease;
}

.sk-side .list-group-item:last-child { border-bottom: 0; }

.sk-side .list-group-item:hover {
    background: var(--sk-raise);
    color: var(--sk-white);
}

.sk-side .list-group-item.active {
    background: var(--sk-blue-dim);
    color: var(--sk-blue-lit);
    box-shadow: inset 3px 0 0 var(--sk-blue);
}

.sk-side__user {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--sk-pit);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r);
    padding: 1.1rem;
    margin-bottom: 1rem;
}

.sk-side__user img { border-radius: var(--sk-r-sm); image-rendering: pixelated; }

.sk-side__name {
    font-family: var(--sk-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--sk-white);
    margin: 0;
    line-height: 1.2;
}

.sk-side__money { font-size: .82rem; color: var(--sk-blue-lit); margin: .15rem 0 0; }

/* --------------------------------------------------------------------------
   Forms, modal, alerts
   -------------------------------------------------------------------------- */

.form-control,
.form-select {
    background: var(--sk-sunk);
    border: 1px solid var(--sk-line-strong);
    border-radius: var(--sk-r-sm);
    color: var(--sk-white);
    padding: .72rem .9rem;
}

.form-control:focus,
.form-select:focus {
    background: var(--sk-sunk);
    border-color: var(--sk-blue);
    color: var(--sk-white);
    box-shadow: 0 0 0 3px rgba(43, 127, 255, .2);
}

.form-control::placeholder { color: var(--sk-smoke); }

.form-label { font-size: .86rem; font-weight: 600; color: var(--sk-dust); }

.modal-content {
    background: var(--sk-pit);
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-r-lg);
    box-shadow: var(--sk-shadow-lg);
}

.modal-header, .modal-footer { border-color: var(--sk-line); }
.modal-title { font-family: var(--sk-display); color: var(--sk-white); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

.alert {
    border-radius: var(--sk-r);
    border: 1px solid var(--sk-line);
    background: var(--sk-pit);
    color: var(--sk-white);
    font-size: .93rem;
}

.alert-success { border-left: 3px solid var(--sk-ok); }
.alert-danger  { border-left: 3px solid var(--sk-p2w); }
.alert-warning { border-left: 3px solid var(--sk-warn); }
.alert-info    { border-left: 3px solid var(--sk-blue); }

.progress { background: rgba(234, 241, 255, .08); border-radius: 999px; height: 7px; }
.progress-bar { background: var(--sk-blue); }
.badge { font-weight: 600; border-radius: 999px; }
table { color: var(--sk-dust); }

/* --------------------------------------------------------------------------
   Recent purchases ticker
   -------------------------------------------------------------------------- */

.sk-killfeed {
    border-top: 1px solid var(--sk-line);
    border-bottom: 1px solid var(--sk-line);
    background: var(--sk-deep);
    padding: .85rem 0;
    overflow: hidden;
}

.sk-killfeed__track {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    white-space: nowrap;
    font-size: .86rem;
    animation: sk-scroll 42s linear infinite;
    width: max-content;
}

.sk-killfeed:hover .sk-killfeed__track { animation-play-state: paused; }

@keyframes sk-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.sk-kill { display: inline-flex; align-items: center; gap: .55rem; color: var(--sk-dust); }
.sk-kill__who  { color: var(--sk-white); font-weight: 600; }
.sk-kill__what { color: var(--sk-blue-lit); }
.sk-kill__when { color: var(--sk-smoke); font-size: .8rem; }

.sk-killfeed__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sk-blue-lit);
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.sk-footer {
    background: var(--sk-deep);
    border-top: 1px solid var(--sk-line);
    padding: clamp(3rem, 6vw, 4.5rem) 0 0;
    margin-top: auto;
}

.sk-footer__grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: clamp(1.75rem, 4vw, 3rem);
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.sk-footer__brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--sk-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--sk-white);
    margin: 0 0 .9rem;
}

.sk-footer__brand img {
    height: 34px;
    width: auto;
    filter: drop-shadow(0 0 14px rgba(43, 127, 255, .3));
}

.sk-footer__blurb {
    color: var(--sk-dust);
    font-size: .93rem;
    max-width: 40ch;
    margin: 0 0 1.25rem;
}

.sk-footer__heading {
    font-family: var(--sk-display);
    font-size: .95rem;
    font-weight: 600;
    color: var(--sk-white);
    margin: 0 0 1rem;
}

.sk-footer__links { list-style: none; padding: 0; margin: 0; }
.sk-footer__links li { margin-bottom: .5rem; }
.sk-footer__links a { color: var(--sk-dust); font-size: .92rem; }
.sk-footer__links a:hover { color: var(--sk-white); }

.sk-footer__bar {
    border-top: 1px solid var(--sk-line);
    padding: 1.4rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.sk-footer__note { font-size: .82rem; color: var(--sk-smoke); margin: 0; }

.sk-footer__social { display: flex; gap: .5rem; flex-wrap: wrap; }

.sk-footer__social a {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--sk-line-strong);
    border-radius: var(--sk-r-sm);
    color: var(--sk-dust);
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.sk-footer__social a:hover {
    border-color: var(--sk-blue);
    background: var(--sk-blue-dim);
    color: var(--sk-blue-lit);
}

/* --------------------------------------------------------------------------
   Entrance
   -------------------------------------------------------------------------- */

.sk-rise { animation: sk-rise .7s cubic-bezier(.2, .7, .2, 1) both; }

.sk-rise-1 { animation-delay: .04s; }
.sk-rise-2 { animation-delay: .12s; }
.sk-rise-3 { animation-delay: .2s; }
.sk-rise-4 { animation-delay: .28s; }
.sk-rise-5 { animation-delay: .36s; }

@keyframes sk-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .sk-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* Below this the 560px panel leaves the wordmark too little room to be worth a
   column of its own, so the hero stacks with the mark leading the copy. */
@media (max-width: 1199.98px) {
    .sk-hero__grid {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 4vw, 2.5rem);
    }

    .sk-hero__logo { order: -1; }

    .sk-hero__logo img { width: min(100%, 380px); }
}

@media (max-width: 991.98px) {
    .sk-footer__grid { grid-template-columns: 1fr 1fr; }

    .sk-nav .navbar-nav.sk-tabs {
        border-radius: var(--sk-r);
        margin: .6rem 0;
        padding: .35rem;
    }

    .sk-nav .sk-tabs .nav-link { border-radius: var(--sk-r-sm); }
}

@media (max-width: 767.98px) {
    .sk-hero__plate {
        background-image: url('../img/hub-sm.jpg');
        background-position: 58% 42%;
    }

    .sk-hero__logo img { width: min(100%, 270px); }

    .sk-nav__logo { height: 32px; }

    .sk-footer__grid { grid-template-columns: 1fr; gap: 2rem; }

    .sk-ladder { padding-left: 1.75rem; }
    .sk-ladder::before { left: .3rem; }
    .sk-tier::before { left: -1.6rem; }
    .sk-tier:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .sk-killfeed__track { animation: none; }
}