/* ============================================================
   SQWARE site styles
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
    /* Base layers */
    --bedrock:   #0E0F13;
    --deepslate: #1A1C22;
    --deepslate-2: #15171C;
    --stone:     #2A2D35;
    --stone-2:   #3A3E48;

    /* Light & text */
    --quartz:    #E8E9EC;
    --andesite:  #7C828E;
    --andesite-faint: #5A5F69;

    /* Accents */
    --aether:        #5DD3FF;
    --aether-dim:    #2A8FB8;
    --aether-glow:   rgba(93, 211, 255, 0.10);
    --ember:         #FF6B3D;
    --ember-dim:     #B3471F;
    --ember-glow:    rgba(255, 107, 61, 0.10);
    --online:        #46D17F;
    --online-glow:   rgba(70, 209, 127, 0.45);

    /* Functional */
    --border:        #232730;
    --border-strong: #2F343F;
    --inner-top:     rgba(255, 255, 255, 0.04);
    --inner-top-strong: rgba(255, 255, 255, 0.07);

    /* Type */
    --font-display: "Inter", system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, monospace;

    /* Space */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;
    --s-24: 96px;

    /* Radius */
    --r-1: 4px;
    --r-2: 6px;
    --r-3: 8px;
    --r-4: 12px;

    /* Motion */
    --t-fast: 120ms ease-out;
    --t-settle: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    background: var(--bedrock);
    color-scheme: dark;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.55;
    color: var(--quartz);
    background: var(--bedrock);
    overflow-x: hidden;
    font-feature-settings: "ss01", "cv11", "tnum";
}

::selection { background: var(--aether); color: var(--bedrock); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bedrock); }
::-webkit-scrollbar-thumb { background: var(--stone); border: 2px solid var(--bedrock); border-radius: var(--r-2); }
::-webkit-scrollbar-thumb:hover { background: var(--stone-2); }

/* ---------- TYPOGRAPHIC PRIMITIVES ---------- */
.mono {
    font-family: var(--font-mono);
    font-feature-settings: "tnum", "zero";
    letter-spacing: -0.01em;
}

.text-aether {
    color: var(--aether);
}

.label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--andesite);
}

.label-aether { color: var(--aether); }
.label-ember  { color: var(--ember); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--quartz);
}

/* ---------- LAYOUT ---------- */
.shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--s-6);
}

.section {
    padding: var(--s-20) 0;
    border-top: 1px solid var(--border);
}

.section:first-of-type { border-top: none; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-6);
    margin-bottom: var(--s-10);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--border);
}

.section-head h2 {
    font-size: 22px;
    font-weight: 700;
}

.section-head .section-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--andesite-faint);
}

/* ---------- BLOCK (the core surface element) ---------- */
.block {
    position: relative;
    background: var(--deepslate);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    overflow: hidden;
}

.block::before {
    /* Subtle top highlight */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--inner-top);
    pointer-events: none;
}

.block.interactive {
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}

.block.interactive:hover {
    border-color: var(--border-strong);
    background: var(--deepslate-2);
}

.block.interactive:hover::after {
    /* Accent top edge */
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 2px;
    background: var(--aether);
    box-shadow: 0 0 12px var(--aether-glow);
    pointer-events: none;
}

/* ---------- HEADER ---------- */
.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    background: rgba(14, 15, 19, 0.72);
    border-bottom: 1px solid transparent;
    transition: background var(--t-settle), border-color var(--t-settle);
}

.header.scrolled {
    background: rgba(14, 15, 19, 0.92);
    border-bottom-color: var(--border);
}

.header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--s-4) var(--s-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.brand-mark {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: var(--deepslate);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-2);
    position: relative;
}

.brand-mark::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--inner-top-strong);
}

.brand-mark-glyph {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--aether);
    border-radius: 2px;
    position: relative;
    box-shadow: 0 0 8px var(--aether-glow);
}

.brand-mark-glyph::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: var(--aether);
    border-radius: 1px;
}

.brand-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--quartz);
}

.brand-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--andesite);
    margin-left: var(--s-1);
    letter-spacing: 0.08em;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-1);
    flex-wrap: wrap;
}

.nav-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--andesite);
    padding: 8px 12px;
    border-radius: var(--r-2);
    transition: color var(--t-fast), background var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-link:hover, .nav-link:focus-visible { color: var(--quartz); background: var(--deepslate); }
.nav-link.active { color: var(--quartz); background: var(--deepslate); }
.nav-link.active::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--aether);
    border-radius: 50%;
    margin-right: 2px;
    box-shadow: 0 0 6px var(--aether-glow);
}

.nav-cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--quartz);
    padding: 8px 14px;
    background: var(--deepslate);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-2);
    transition: border-color var(--t-fast), color var(--t-fast);
    position: relative;
}

.nav-cta::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--inner-top);
    border-radius: var(--r-2) var(--r-2) 0 0;
}

.nav-cta:hover { border-color: var(--aether-dim); color: var(--aether); }

/* ---------- LIVE STATUS PILL ---------- */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    margin-right: var(--s-1);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.03em;
    color: var(--andesite);
    background: var(--deepslate);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    white-space: nowrap;
    user-select: none;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--andesite-faint);
    flex-shrink: 0;
    transition: background var(--t-fast);
}

[data-state="online"] .status-dot {
    background: var(--online);
    box-shadow: 0 0 8px var(--online-glow);
    animation: pulse 2.4s ease-in-out infinite;
}

[data-state="offline"] .status-dot {
    background: var(--ember);
    box-shadow: 0 0 8px var(--ember-glow);
}

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

[data-state="unknown"] .status-dot {
    background: var(--andesite-faint);
}

.status-pill[data-state="online"] .status-text { color: var(--quartz); }

/* ---------- HERO ---------- */
.hero {
    padding: 160px 0 var(--s-16);
    border-top: none;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 6px 10px;
    background: var(--deepslate);
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    margin-bottom: var(--s-6);
}

.hero-tag-dot {
    width: 6px; height: 6px;
    background: var(--aether);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--aether-glow);
    animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.hero-tag-text {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--andesite);
    text-transform: uppercase;
}

.hero-title {
    font-size: clamp(40px, 5.6vw, 64px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    color: var(--quartz);
    max-width: 18ch;
    margin-bottom: var(--s-6);
}

.hero-title em {
    font-style: normal;
    color: var(--aether);
}

.hero-lede {
    font-size: 17px;
    line-height: 1.55;
    color: var(--andesite);
    max-width: 52ch;
    margin-bottom: var(--s-10);
}

/* Primary IP block */
.ip-block {
    display: inline-flex;
    align-items: stretch;
    background: var(--deepslate);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-3);
    overflow: hidden;
    position: relative;
    transition: border-color var(--t-fast);
    cursor: pointer;
    user-select: none;
}

.ip-block::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--inner-top-strong);
}

.ip-block:hover {
    border-color: var(--aether-dim);
}

.ip-block:hover::after {
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 2px;
    background: var(--aether);
    box-shadow: 0 0 14px var(--aether-glow);
    pointer-events: none;
}

.ip-info {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 240px;
}

.ip-info-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--andesite);
}

.ip-info-value {
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 500;
    color: var(--quartz);
    letter-spacing: -0.01em;
}

.ip-action {
    display: grid;
    place-items: center;
    padding: 0 18px;
    border-left: 1px solid var(--border);
    color: var(--andesite);
    transition: color var(--t-fast), background var(--t-fast);
    font-size: 18px;
}

.ip-block:hover .ip-action { color: var(--aether); background: var(--aether-glow); }

.ip-hint {
    margin-top: var(--s-4);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--andesite-faint);
    letter-spacing: 0.04em;
}

/* ---------- HERO LAYOUT ---------- */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--s-12);
    align-items: start;
}

.hero-left { min-width: 0; }

/* Stacked cube visual */
.core-sample {
    background: var(--deepslate);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    overflow: hidden;
    position: relative;
    margin-bottom: var(--s-4);
}

.core-sample::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--inner-top);
    z-index: 2;
}

.core-sample-svg {
    display: block;
    width: 100%;
    height: 240px;
    padding: var(--s-5) 0 var(--s-4);
}

.core-sample-svg .vein {
    filter: drop-shadow(0 0 6px rgba(93, 211, 255, 0.45));
}

.core-sample-foot {
    border-top: 1px solid var(--border);
    padding: 10px var(--s-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--andesite-faint);
    background: var(--deepslate-2);
}

.core-sample-foot .accent { color: var(--aether); }

/* Detail panel */
.manifest {
    background: var(--deepslate);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    overflow: hidden;
    position: relative;
}

.manifest::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--inner-top);
}

.manifest-head {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--deepslate-2);
}

.manifest-head-title {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--andesite);
}

.manifest-head-dot {
    width: 6px; height: 6px;
    background: var(--aether);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--aether-glow);
}

.manifest-rows {
    list-style: none;
}

.manifest-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 9px var(--s-4);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 12px;
}

.manifest-row:last-child { border-bottom: none; }

.manifest-row-key {
    color: var(--andesite-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
}

.manifest-row-val {
    color: var(--quartz);
    letter-spacing: -0.01em;
    text-align: right;
}

.manifest-row-val .accent { color: var(--aether); }

/* ---------- SHORTCUT STRIP ---------- */
.pulse {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--deepslate-2);
}

.pulse-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--s-6);
    display: grid;
    grid-template-columns: 1.05fr 1.25fr 0.9fr 0.8fr 0.8fr;
}

.pulse-cell {
    padding: var(--s-5) var(--s-6) var(--s-5) 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid var(--border);
}

.pulse-cell:last-child { border-right: none; }
.pulse-cell:not(:first-child) { padding-left: var(--s-6); }

.pulse-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--andesite-faint);
}

.pulse-value {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 500;
    color: var(--quartz);
    letter-spacing: -0.01em;
    transition: color 80ms ease-out;
}

@keyframes flash {
    0%   { background-color: var(--aether-glow); }
    100% { background-color: transparent; }
}

/* Brief highlight when a live value changes (background-based, so it works
   regardless of the element's text colour). */
.flash { animation: flash 700ms ease-out; }

/* ---------- ONLINE NOW ---------- */
.online-strip {
    border-bottom: 1px solid var(--border);
    background: var(--bedrock);
}

.online-now {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: var(--s-5);
    align-items: center;
    padding: var(--s-4) 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    position: relative;
}

.online-now::before {
    content: none;
}

.online-now-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.online-now-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--andesite-faint);
}

.online-now-count {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--aether);
}

.online-player-list {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    align-items: center;
}

.online-player,
.online-empty {
    font-family: var(--font-mono);
    font-size: 12px;
}

.online-player {
    max-width: 180px;
    overflow: hidden;
    color: var(--quartz);
    background: var(--deepslate);
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.player-name,
.online-player > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-rank {
    flex-shrink: 0;
    font-size: 9px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bedrock);
    background: var(--aether);
    border-radius: 3px;
    padding: 1px 4px;
}

.player-rank-premium { background: #F5C542; }
.player-rank-partner { background: #B642FF; color: var(--quartz); }
.player-rank-mod { background: #2B98FD; color: var(--quartz); }
.player-rank-admin { background: #FF3B5C; color: var(--quartz); }
.player-rank-founder { background: #FFD24A; }
.player-rank-member { background: var(--andesite); color: var(--bedrock); }

.online-empty {
    color: var(--andesite);
}

/* ---------- PILLARS ---------- */
.pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
}

.pillar {
    padding: var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    min-height: 220px;
}

.pillar-heading {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}

.pillar-glyph {
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    color: var(--aether);
    background: var(--deepslate-2);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    font-size: 18px;
    position: relative;
}

.pillar-glyph::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--inner-top);
}

.pillar-body { flex: 1; }

.pillar-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0;
    min-width: 0;
}

.pillar-desc {
    font-size: 13.5px;
    color: var(--andesite);
    line-height: 1.5;
}

.pillar-meta {
    padding-top: var(--s-4);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pillar-meta-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--andesite-faint);
}

.pillar-meta-value {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--quartz);
}

/* ---------- JOIN ---------- */
.join-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
}

.join-card {
    padding: var(--s-8);
}

.join-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--border);
}

.join-card-title {
    font-size: 17px;
    font-weight: 600;
}

.join-card-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--andesite);
    padding: 4px 8px;
    background: var(--deepslate-2);
    border: 1px solid var(--border);
    border-radius: var(--r-1);
}

.join-steps {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    list-style: none;
}

.join-step {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--s-4);
    align-items: baseline;
}

.join-step-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--aether);
    padding-top: 1px;
}

.join-step-text {
    font-size: 14px;
    color: var(--quartz);
    line-height: 1.5;
}

.join-step-text .ext {
    color: var(--andesite);
    font-size: 13px;
    display: block;
    margin-top: 2px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--quartz);
    background: var(--deepslate-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-1);
    padding: 3px 8px;
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
    position: relative;
}

.chip:hover { border-color: var(--aether-dim); color: var(--aether); }
.chip::after {
    content: "copy";
    font-size: 10px;
    color: var(--andesite-faint);
    margin-left: 2px;
}

.server-status-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}

.server-status-inline #sp-players {
    color: var(--andesite);
    font-size: 13px;
}

/* ---------- RULES ---------- */
.rules-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    overflow: hidden;
}

.rule {
    background: var(--deepslate);
    padding: var(--s-6);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-4);
    align-items: start;
}

.rule-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--andesite-faint);
    letter-spacing: 0.08em;
    padding-top: 4px;
}

.rule-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--quartz);
    margin-bottom: 4px;
}

.rule-desc {
    font-size: 13px;
    color: var(--andesite);
    line-height: 1.5;
}

/* ---------- FOOTER ---------- */
.footer {
    border-top: 1px solid var(--border);
    padding: var(--s-12) 0 var(--s-10);
    background: var(--bedrock);
}

.footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--s-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
}

.footer-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--andesite-faint);
    letter-spacing: 0.04em;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--andesite);
}

.footer-links a {
    transition: color var(--t-fast);
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--aether);
}

.footer-discl {
    font-size: 11px;
    color: var(--andesite-faint);
    max-width: 48ch;
    text-align: right;
}

/* ---------- LEADERBOARDS ---------- */
.page-head {
    padding: 144px 0 var(--s-10);
}

.page-head-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aether);
    margin-bottom: var(--s-4);
}

.page-head-title {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: var(--s-4);
}

.page-head-lede {
    font-size: 16px;
    color: var(--andesite);
    max-width: 60ch;
}

.leaderboard-shell {
    padding-top: var(--s-8);
    padding-bottom: var(--s-20);
}

.leaderboard-head {
    border-bottom: 1px solid var(--border);
}

.leaderboard-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
    margin-bottom: var(--s-8);
}

.leaderboard-stat {
    background: var(--deepslate);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    padding: var(--s-4);
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s-3);
    position: relative;
}

.leaderboard-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--inner-top);
}

.leaderboard-stat-label,
.leaderboard-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--andesite-faint);
}

.leaderboard-stat-meta {
    font-family: var(--font-mono);
    color: var(--aether);
    font-size: 12px;
}

.leaderboard-stat-meta.copyable,
.leaderboard-card-meta code.copyable,
.command-row code.copyable {
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
}

.leaderboard-stat-meta.copyable:hover,
.leaderboard-stat-meta.copyable:focus-visible,
.leaderboard-card-meta code.copyable:hover,
.leaderboard-card-meta code.copyable:focus-visible,
.command-row code.copyable:hover,
.command-row code.copyable:focus-visible {
    color: var(--quartz);
}

.leaderboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
}

.leaderboard-card {
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.leaderboard-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-5);
    border-bottom: 1px solid var(--border);
}

.leaderboard-card-head h2 {
    font-size: 20px;
    margin-top: var(--s-1);
}

.leaderboard-card-head i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--aether);
    background: var(--deepslate-2);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    font-size: 18px;
    flex-shrink: 0;
}

.leaderboard-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    background: var(--deepslate-2);
    border-bottom: 1px solid var(--border);
}

.leaderboard-card-meta span {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--andesite-faint);
}

.leaderboard-card-meta code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--aether);
}

.leaderboard-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 108px;
    gap: var(--s-4);
    align-items: center;
    padding: 12px var(--s-5);
    border-bottom: 1px solid var(--border);
}

.leaderboard-row-head {
    background: var(--deepslate-2);
}

.leaderboard-row-head span {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--andesite-faint);
}

.leaderboard-rank {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--aether);
}

.leaderboard-player {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: var(--quartz);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}

.leaderboard-player .player-name {
    min-width: 0;
}

.leaderboard-score {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--andesite);
    text-align: right;
}

.leaderboard-empty {
    min-height: 142px;
    flex: 1;
    display: grid;
    place-items: center;
    padding: var(--s-8);
    color: var(--andesite);
    font-size: 14px;
    text-align: center;
}

/* ---------- SERVER STATUS PANEL ---------- */
.server-status {
    margin-bottom: var(--s-6);
}

.server-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--border);
    background: var(--deepslate-2);
}

.server-status-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--quartz);
}

.server-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--andesite);
}

.server-status[data-state="online"] .server-status-badge { color: var(--online); }
.server-status[data-state="offline"] .server-status-badge { color: var(--ember); }
.server-status[data-state="unknown"] .server-status-badge { color: var(--andesite); }

.server-status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
}

.server-status-grid > div {
    background: var(--deepslate);
    padding: var(--s-4) var(--s-5);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.server-status-grid span {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--andesite-faint);
}

.server-status-grid strong {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 500;
    color: var(--quartz);
    letter-spacing: -0.01em;
}

.server-status-grid .copyable { cursor: pointer; transition: color var(--t-fast); }
.server-status-grid .copyable:hover { color: var(--aether); }

.server-status-motd {
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--andesite);
}

/* ---------- GUIDE (Docs) ---------- */
.guide-head {
    border-bottom: 1px solid var(--border);
}

.guide-head-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--s-10);
    align-items: start;
}

.guide-join {
    align-self: stretch;
}

.guide-join-head {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--deepslate-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--quartz);
}

.guide-join-head i {
    color: var(--aether);
    font-size: 16px;
}

.guide-ip {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: inherit;
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    cursor: pointer;
    text-align: left;
}

.guide-ip:hover .guide-ip-value,
.guide-join-meta a:hover,
.quick-specs .copyable:hover,
.guide-steps .copyable:hover {
    color: var(--aether);
}

.guide-ip-label,
.guide-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--andesite-faint);
}

.guide-ip-value {
    font-family: var(--font-mono);
    font-size: 22px;
    color: var(--quartz);
    transition: color var(--t-fast);
}

.guide-join-meta {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 0;
    padding: var(--s-3) var(--s-5) var(--s-5);
    font-family: var(--font-mono);
    font-size: 12px;
}

.guide-join-meta span,
.guide-join-meta strong,
.guide-join-meta a {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.guide-join-meta span {
    color: var(--andesite-faint);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.guide-join-meta strong,
.guide-join-meta a {
    color: var(--quartz);
    font-weight: 500;
    text-align: right;
    transition: color var(--t-fast);
}

.guide-join-meta span:nth-last-child(-n + 2),
.guide-join-meta a:last-child {
    border-bottom: 0;
}

.guide-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: var(--s-12);
    padding-top: var(--s-16);
    padding-bottom: var(--s-20);
}

.guide-index {
    position: sticky;
    top: 92px;
    align-self: start;
    border-left: 1px solid var(--border);
    padding-left: var(--s-4);
}

.guide-index-title {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--andesite-faint);
    margin-bottom: var(--s-3);
}

.guide-index a {
    display: block;
    padding: 7px 0;
    font-size: 13px;
    color: var(--andesite);
    transition: color var(--t-fast);
}

.guide-index a:hover,
.guide-index a:focus-visible {
    color: var(--aether);
}

.guide-content {
    min-width: 0;
}

.guide-section {
    scroll-margin-top: 96px;
    padding-bottom: var(--s-16);
    margin-bottom: var(--s-16);
    border-bottom: 1px solid var(--border);
}

.guide-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.guide-section-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
    margin-bottom: var(--s-6);
}

.guide-section-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--aether);
    padding-top: 7px;
}

.guide-section h2 {
    font-size: 24px;
    margin-bottom: var(--s-2);
}

.guide-section-head p {
    color: var(--andesite);
    max-width: 72ch;
}

.quick-specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
    margin-bottom: var(--s-6);
}

.spec-tile {
    background: var(--deepslate);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    padding: var(--s-4);
    min-height: 112px;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    position: relative;
}

.spec-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--inner-top);
}

.spec-tile i {
    color: var(--aether);
    font-size: 20px;
    margin-bottom: auto;
}

.spec-tile span {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--andesite-faint);
}

.spec-tile strong {
    font-size: 13px;
    color: var(--quartz);
    font-weight: 600;
    transition: color var(--t-fast);
}

.guide-steps {
    list-style: none;
    display: grid;
    gap: var(--s-3);
}

.guide-steps li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
    padding: var(--s-5);
    background: var(--deepslate);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    position: relative;
}

.guide-steps.compact li {
    padding: var(--s-4) var(--s-5);
}

.guide-steps li::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--inner-top);
}

.guide-steps li > span {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--aether);
    padding-top: 2px;
}

.guide-steps p {
    color: var(--andesite);
}

.guide-steps strong {
    color: var(--quartz);
    font-weight: 500;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
}

.feature-card {
    background: var(--deepslate);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    padding: var(--s-5);
    min-height: 186px;
    position: relative;
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--inner-top);
}

.feature-card-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}

.feature-card i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--aether);
    background: var(--deepslate-2);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    font-size: 18px;
}

.feature-card h3 {
    font-size: 15px;
    margin-bottom: 0;
    min-width: 0;
}

.feature-card p {
    font-size: 13.5px;
    color: var(--andesite);
}

.guide-callout {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
    padding: var(--s-5);
    margin-bottom: var(--s-5);
    background: var(--aether-glow);
    border: 1px solid rgba(93, 211, 255, 0.22);
    border-radius: var(--r-2);
}

.guide-callout i {
    color: var(--aether);
    font-size: 22px;
}

.guide-callout p {
    color: var(--quartz);
    max-width: 78ch;
}

.command-table {
    display: grid;
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    overflow: hidden;
    background: var(--border);
    gap: 1px;
}

.command-table.two-col {
    grid-template-columns: repeat(2, 1fr);
}

.command-row {
    display: grid;
    grid-template-columns: minmax(160px, 0.54fr) minmax(0, 1fr);
    gap: var(--s-4);
    align-items: baseline;
    padding: var(--s-4) var(--s-5);
    background: var(--deepslate);
}

.command-table.two-col .command-row {
    grid-template-columns: 146px minmax(0, 1fr);
}

.command-row code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--aether);
    white-space: nowrap;
}

.command-row span {
    color: var(--andesite);
    font-size: 13.5px;
}

.guide-crossplay {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}

.guide-crossplay > div {
    background: var(--deepslate);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    padding: var(--s-5);
    position: relative;
}

.guide-crossplay > div::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--inner-top);
}

.guide-crossplay strong {
    display: block;
    margin: var(--s-2) 0;
    font-family: var(--font-mono);
    font-size: 17px;
    color: var(--quartz);
}

.guide-crossplay p {
    color: var(--andesite);
    font-size: 13.5px;
}

.guide-rules {
    margin-top: var(--s-2);
}

/* ---------- TOAST ---------- */
.toast {
    position: fixed;
    bottom: var(--s-6);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--deepslate);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-2);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--quartz);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-settle), transform var(--t-settle);
    z-index: 100;
}

.toast::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--inner-top-strong);
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast-dot { width: 6px; height: 6px; background: var(--aether); border-radius: 50%; box-shadow: 0 0 6px var(--aether-glow); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
    .pillars { grid-template-columns: repeat(2, 1fr); }
    .pulse-inner { grid-template-columns: repeat(3, 1fr); }
    .pulse-cell { border-top: 0; }
    .pulse-cell:nth-child(3),
    .pulse-cell:nth-child(5) { border-right: none; }
    .pulse-cell:nth-child(n + 4) { border-top: 1px solid var(--border); }
    .join-grid { grid-template-columns: 1fr; }
    .rules-list { grid-template-columns: 1fr; }
    .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
    .guide-head-grid { grid-template-columns: 1fr; }
    .leaderboard-summary { grid-template-columns: repeat(2, 1fr); }
    .leaderboard-grid { grid-template-columns: 1fr; }
    .guide-layout { grid-template-columns: 1fr; gap: var(--s-8); padding-top: var(--s-10); }
    .guide-index {
        position: static;
        border-left: 0;
        border-bottom: 1px solid var(--border);
        padding-left: 0;
        padding-bottom: var(--s-4);
        display: flex;
        flex-wrap: wrap;
        gap: var(--s-1) var(--s-4);
    }
    .guide-index-title { width: 100%; margin-bottom: var(--s-1); }
    .guide-index a { padding: 4px 0; }
    .quick-specs { grid-template-columns: repeat(2, 1fr); }
    .feature-grid { grid-template-columns: 1fr; }
    .command-table.two-col { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .shell, .header-inner, .pulse-inner, .footer-inner { padding-left: var(--s-4); padding-right: var(--s-4); }
    .pillars { grid-template-columns: 1fr; }
    .hero { padding-top: 168px; }
    .page-head { padding-top: 164px; }
    .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
    .footer-links { justify-content: flex-start; }
    .footer-discl { text-align: left; }
    .header-inner { flex-direction: column; align-items: stretch; gap: var(--s-3); }
    .brand { padding-top: 0; }
    .nav {
        justify-content: flex-start;
        max-width: 100%;
        flex-wrap: wrap;
        overflow-x: visible;
        row-gap: var(--s-2);
    }
    .nav-link,
    .nav-cta {
        padding: 7px 10px;
    }
    .nav .status-pill { display: none; }
    .leaderboard-summary { grid-template-columns: 1fr; }
    .pulse-inner { grid-template-columns: repeat(2, 1fr); }
    .pulse-cell:nth-child(3),
    .pulse-cell:nth-child(5) { border-right: 1px solid var(--border); }
    .pulse-cell:nth-child(2),
    .pulse-cell:nth-child(4) { border-right: none; }
    .pulse-cell:nth-child(3),
    .pulse-cell:nth-child(4),
    .pulse-cell:nth-child(5) { border-top: 1px solid var(--border); }
    .pulse-cell:nth-child(5) { grid-column: span 2; }
    .online-now {
        grid-template-columns: 1fr;
        gap: var(--s-4);
    }
    .leaderboard-card { min-height: 260px; }
    .leaderboard-card-meta { align-items: flex-start; flex-direction: column; gap: var(--s-1); }
    .leaderboard-row { grid-template-columns: 46px minmax(0, 1fr) 82px; gap: var(--s-2); }
    .leaderboard-empty { min-height: 108px; padding: var(--s-5); }
    .guide-join-meta { grid-template-columns: 74px 1fr; }
    .guide-layout { padding-bottom: var(--s-16); }
    .guide-section {
        scroll-margin-top: 120px;
        margin-bottom: var(--s-12);
        padding-bottom: var(--s-12);
    }
    .guide-section-head { grid-template-columns: 1fr; gap: var(--s-2); }
    .guide-section-num { padding-top: 0; }
    .quick-specs { grid-template-columns: 1fr; }
    .guide-steps li,
    .guide-callout {
        grid-template-columns: 1fr;
        gap: var(--s-2);
    }
    .guide-crossplay { grid-template-columns: 1fr; }
    .server-status-grid { grid-template-columns: repeat(2, 1fr); }
    .command-row,
    .command-table.two-col .command-row {
        grid-template-columns: 1fr;
        gap: var(--s-2);
    }
}