:root {
    --background: #0c1419;
    --background-deep: #081015;
    --background-soft: #0e171d;
    --panel: #131e25;
    --card: #142027;
    --card-hover: #1a2a32;
    --foreground: #e8eeed;
    --foreground-soft: #c6d1d1;
    --muted: #9aabae;
    --dim: #809397;
    --border: #2a373e;
    --border-light: #3a515a;
    --amber: #f9a366;
    --amber-soft: #ffe0b3;
    --mint: #65dfcc;
    --danger: #f57777;
    --max-width: 1500px;
    --header-height: 88px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--foreground);
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(38, 67, 73, 0.35) 0,
            rgba(12, 20, 25, 0) 42%
        ),
        var(--background);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    border-radius: 0;
}

button {
    cursor: pointer;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 4px;
}

::selection {
    color: #111b20;
    background: var(--amber);
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9999;
    padding: 10px 14px;
    color: #111b20;
    background: var(--amber);
    border: 1px solid var(--amber);
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: translateY(-180%);
    transition: transform 0.18s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: relative;
    z-index: 1000;
    min-height: var(--header-height);
    background: rgba(12, 20, 25, 0.96);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
}

.site-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(249, 163, 102, 0.1) 20%,
        rgba(249, 163, 102, 0.55) 50%,
        rgba(101, 223, 204, 0.14) 80%,
        transparent 100%
    );
    pointer-events: none;
}

.site-header-inner {
    width: min(calc(100% - 48px), var(--max-width));
    min-height: var(--header-height);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 36px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: max-content;
}

.site-brand-mark {
    width: 46px;
    height: 52px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--amber);
    background:
        linear-gradient(
            145deg,
            rgba(249, 163, 102, 0.12),
            rgba(249, 163, 102, 0.02)
        );
    border: 1px solid rgba(249, 163, 102, 0.42);
    clip-path: polygon(
        18% 0,
        100% 0,
        100% 82%,
        82% 100%,
        0 100%,
        0 18%
    );
    font-family: monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.site-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}

.site-brand-copy strong {
    color: var(--foreground);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.site-brand-copy > span {
    margin-top: 6px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.site-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-left: auto;
}

.site-navigation > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 11px;
    color: #a9babc;
    border: 1px solid transparent;
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.site-navigation > a:hover {
    color: #ffffff;
    background: #1d2c34;
    border-color: #31464e;
}

.site-navigation > a[aria-current="page"] {
    color: var(--amber);
    background: rgba(249, 163, 102, 0.06);
    border-color: rgba(249, 163, 102, 0.3);
}

.site-navigation > a[aria-current="page"]::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: -1px;
    left: 10px;
    height: 1px;
    background: var(--amber);
    box-shadow: 0 0 12px rgba(249, 163, 102, 0.45);
}

.site-navigation .site-play-button {
    min-width: 118px;
    margin-left: 7px;
    color: #111b20;
    background: var(--amber);
    border-color: var(--amber);
    font-weight: 700;
}

.site-navigation .site-play-button:hover {
    color: #111b20;
    background: var(--amber-soft);
    border-color: var(--amber-soft);
    box-shadow: 0 0 24px rgba(249, 163, 102, 0.18);
}

.site-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 10px;
    color: var(--foreground);
    background: transparent;
    border: 1px solid var(--border-light);
}

.site-menu-toggle:hover {
    background: #1d2c34;
    border-color: var(--amber);
}

.site-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 4px 0;
    background: currentColor;
    transform-origin: center;
    transition:
        transform 0.18s ease,
        opacity 0.18s ease;
}

.site-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.site-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.site-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.site-brand-copy small {
    display: block;
    margin-top: 3px;
    color: var(--dim);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    position: relative;
    margin-top: 80px;
    color: var(--foreground-soft);
    background:
        linear-gradient(
            180deg,
            rgba(19, 30, 37, 0.98),
            rgba(8, 16, 21, 0.99)
        );
    border-top: 1px solid var(--border);
}

.site-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(249, 163, 102, 0.5),
        rgba(101, 223, 204, 0.18),
        transparent
    );
}

.site-footer-inner {
    width: min(calc(100% - 48px), var(--max-width));
    margin: 0 auto;
}

.site-footer-main {
    display: grid;
    grid-template-columns:
        minmax(320px, 1.5fr)
        minmax(160px, 0.75fr)
        minmax(170px, 0.85fr)
        minmax(210px, 1fr);
    gap: 54px;
    padding: 58px 0 46px;
}

.site-footer-brand {
    max-width: 560px;
}

.site-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.site-footer-mark {
    width: 42px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--amber);
    background: rgba(249, 163, 102, 0.06);
    border: 1px solid rgba(249, 163, 102, 0.35);
    clip-path: polygon(
        18% 0,
        100% 0,
        100% 82%,
        82% 100%,
        0 100%,
        0 18%
    );
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 700;
}

.site-footer-logo > span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.site-footer-logo strong {
    color: var(--foreground);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-footer-logo small {
    margin-top: 5px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.site-footer-brand > p {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.75;
}

.site-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.site-footer-play,
.site-footer-support {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid;
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.site-footer-play {
    color: #111b20;
    background: var(--amber);
    border-color: var(--amber);
}

.site-footer-play:hover {
    background: var(--amber-soft);
    border-color: var(--amber-soft);
    box-shadow: 0 0 24px rgba(249, 163, 102, 0.18);
}

.site-footer-support {
    color: var(--mint);
    background: transparent;
    border-color: rgba(101, 223, 204, 0.38);
}

.site-footer-support:hover {
    color: #d9fffa;
    background: rgba(101, 223, 204, 0.08);
    border-color: var(--mint);
}

.site-footer-column h2 {
    margin: 0 0 17px;
    color: var(--foreground);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-footer-column h2::after {
    content: "";
    display: block;
    width: 36px;
    height: 1px;
    margin-top: 10px;
    background: var(--amber);
    box-shadow: 0 0 9px rgba(249, 163, 102, 0.32);
}

.site-footer-column nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.site-footer-column nav a {
    position: relative;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
    transition:
        color 0.18s ease,
        padding-left 0.18s ease;
}

.site-footer-column nav a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--amber);
    transform: translateY(-50%);
    transition: width 0.18s ease;
}

.site-footer-column nav a:hover {
    color: var(--foreground);
    padding-left: 14px;
}

.site-footer-column nav a:hover::before {
    width: 7px;
}

.site-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    padding: 21px 0 25px;
    border-top: 1px solid var(--border);
    color: #70868c;
    font-family: monospace;
    font-size: 0.76rem;
    line-height: 1.6;
}

.site-footer-bottom p {
    margin: 0;
}

.site-footer-bottom p:last-child {
    max-width: 620px;
    text-align: right;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1180px) {
    .site-header-inner {
        width: min(calc(100% - 36px), var(--max-width));
        gap: 20px;
    }

    .site-navigation > a {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 0.78rem;
    }

    .site-navigation .site-play-button {
        min-width: 104px;
    }

    .site-footer-inner {
        width: min(calc(100% - 36px), var(--max-width));
    }

    .site-footer-main {
        grid-template-columns: 1.35fr 0.75fr 0.85fr;
        gap: 42px;
    }

    .site-footer-main .site-footer-column:last-child {
        grid-column: 1 / -1;
        padding-top: 6px;
        border-top: 1px solid var(--border);
    }

    .site-footer-main .site-footer-column:last-child nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 24px;
    }
}

@media (max-width: 960px) {
    :root {
        --header-height: 78px;
    }

    .site-header-inner {
        position: relative;
    }

    .site-brand-copy strong {
        font-size: 1.08rem;
    }

    .site-menu-toggle {
        display: block;
    }

    .site-navigation {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        background: rgba(12, 20, 25, 0.99);
        border: 1px solid var(--border);
        border-top: 0;
        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.34);
    }

    .site-navigation.is-open {
        display: flex;
    }

    .site-navigation > a {
        justify-content: flex-start;
        width: 100%;
        min-height: 48px;
        padding: 0 18px;
        border: 0;
        border-bottom: 1px solid var(--border);
        font-size: 0.86rem;
    }

    .site-navigation > a:hover,
    .site-navigation > a[aria-current="page"] {
        border-color: var(--border);
    }

    .site-navigation > a[aria-current="page"]::after {
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        width: 2px;
        height: auto;
    }

    .site-navigation .site-play-button {
        justify-content: center;
        width: auto;
        margin: 12px;
        border: 1px solid var(--amber);
    }

    .site-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 38px 46px;
    }

    .site-footer-brand {
        grid-column: 1 / -1;
        max-width: none;
    }

    .site-footer-main .site-footer-column:last-child {
        grid-column: auto;
        padding-top: 0;
        border-top: 0;
    }

    .site-footer-main .site-footer-column:last-child nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 9px;
    }
}

@media (max-width: 680px) {
    .site-header-inner {
        width: min(calc(100% - 24px), var(--max-width));
    }

    .site-brand {
        gap: 10px;
    }

    .site-brand-mark {
        width: 40px;
        height: 46px;
        font-size: 0.7rem;
    }

    .site-brand-copy strong {
        font-size: 0.94rem;
        letter-spacing: 0.055em;
    }

    .site-brand-copy > span {
        margin-top: 5px;
        font-size: 0.6rem;
        letter-spacing: 0.13em;
    }

    .site-menu-toggle {
        width: 42px;
        height: 42px;
    }

    .site-footer {
        margin-top: 56px;
    }

    .site-footer-inner {
        width: min(calc(100% - 24px), var(--max-width));
    }

    .site-footer-main {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 44px 0 38px;
    }

    .site-footer-brand {
        grid-column: auto;
    }

    .site-footer-brand > p {
        font-size: 0.95rem;
    }

    .site-footer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .site-footer-play,
    .site-footer-support {
        width: 100%;
    }

    .site-footer-bottom {
        flex-direction: column;
        gap: 10px;
        padding: 19px 0 22px;
    }

    .site-footer-bottom p:last-child {
        max-width: none;
        text-align: left;
    }
}

@media (max-width: 420px) {
    .site-brand-copy > span {
        display: none;
    }

    .site-brand-copy strong {
        font-size: 0.86rem;
    }

    .site-brand-mark {
        width: 38px;
        height: 44px;
    }

    .site-menu-toggle {
        width: 40px;
        height: 40px;
        padding: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   HOMEPAGE
========================================================= */

.home-page main {
    overflow: hidden;
}

.home-eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
}

/* =========================================================
   HERO
========================================================= */

.home-hero {
    position: relative;
    padding: 82px 24px 72px;
    background:
        radial-gradient(
            circle at 72% 18%,
            rgba(101, 223, 204, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 18% 10%,
            rgba(249, 163, 102, 0.08),
            transparent 34%
        );
    border-bottom: 1px solid var(--border);
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );
    background-size: 52px 52px;
    pointer-events: none;
}

.home-hero-grid {
    position: relative;
    z-index: 1;
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
    gap: 70px;
    align-items: center;
}

.home-hero-copy {
    max-width: 860px;
}

.home-hero-copy h1 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(3.4rem, 7vw, 7.2rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.91;
}

.home-hero-copy h1 span {
    display: block;
    margin-top: 12px;
    color: var(--amber);
}

.home-hero-lead {
    max-width: 760px;
    margin: 28px 0 0;
    color: #b0c0c2;
    font-size: clamp(1.08rem, 1.5vw, 1.28rem);
    line-height: 1.78;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-top: 34px;
}

.home-play-now {
    position: relative;
    min-width: 310px;
    min-height: 84px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 72px 15px 22px;
    color: #111b20;
    background: var(--amber);
    border: 1px solid var(--amber);
    overflow: hidden;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.home-play-now::after {
    content: "›";
    position: absolute;
    top: 50%;
    right: 23px;
    color: rgba(17, 27, 32, 0.72);
    font-family: monospace;
    font-size: 2.3rem;
    line-height: 1;
    transform: translateY(-53%);
    transition: right 0.18s ease;
}

.home-play-now span {
    margin-bottom: 3px;
    font-family: monospace;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-play-now strong {
    font-size: 1.62rem;
    line-height: 1;
    letter-spacing: 0.045em;
}

.home-play-now:hover {
    color: #111b20;
    background: var(--amber-soft);
    border-color: var(--amber-soft);
    box-shadow:
        0 0 36px rgba(249, 163, 102, 0.2),
        0 18px 45px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.home-play-now:hover::after {
    right: 18px;
}

.home-secondary-action {
    min-height: 84px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 26px;
    color: var(--foreground);
    background: rgba(20, 32, 39, 0.78);
    border: 1px solid var(--border-light);
    font-family: monospace;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-secondary-action:hover {
    color: var(--mint);
    background: #1b2a31;
    border-color: var(--mint);
}

.home-hero-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    gap: 1px;
    max-width: 760px;
    margin-top: 34px;
    background: var(--border);
    border: 1px solid var(--border);
}

.home-hero-meta span {
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 13px 16px;
    color: var(--dim);
    background: rgba(13, 23, 29, 0.96);
    font-family: monospace;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-hero-meta strong {
    margin-bottom: 2px;
    color: var(--foreground);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0;
}

.home-hero-panel {
    position: relative;
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 35, 44, 0.98),
            rgba(13, 23, 29, 0.98)
        );
    border: 1px solid var(--border-light);
    box-shadow:
        18px 18px 0 rgba(0, 0, 0, 0.12),
        0 28px 60px rgba(0, 0, 0, 0.2);
}

.home-hero-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 82px;
    height: 1px;
    background: var(--amber);
    box-shadow: 0 0 16px rgba(249, 163, 102, 0.4);
}

.home-panel-label {
    display: block;
    margin-bottom: 20px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.home-system-line {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    font-family: monospace;
    font-size: 0.84rem;
}

.home-system-line span {
    color: var(--dim);
}

.home-system-line strong {
    color: var(--foreground);
    font-weight: 500;
}

.home-system-line .status-online {
    position: relative;
    padding-left: 14px;
    color: var(--mint);
}

.home-system-line .status-online::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    background: var(--mint);
    box-shadow: 0 0 9px rgba(101, 223, 204, 0.7);
    transform: translateY(-50%);
}

.home-panel-divider {
    height: 1px;
    margin: 24px 0;
    background: linear-gradient(
        90deg,
        var(--amber),
        var(--border),
        transparent
    );
}

.home-hero-panel p {
    margin: 0;
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.75;
}

.home-hero-panel > a {
    display: inline-block;
    margin-top: 22px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.home-hero-panel > a:hover {
    color: #cffff8;
}

/* =========================================================
   SHARED SECTIONS
========================================================= */

.home-intro,
.home-planets,
.home-progression,
.home-faq-preview {
    padding: 90px 24px;
}

.home-intro,
.home-progression {
    background: #0d171d;
}

.home-planets,
.home-faq-preview {
    background: #101b21;
}

.home-section-heading {
    width: min(820px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.home-section-heading-left {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
}

.home-section-heading h2,
.home-progression-copy h2,
.home-free-game h2,
.home-final-cta h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.03;
}

.home-section-heading p,
.home-progression-copy p,
.home-free-game p {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* =========================================================
   FEATURES
========================================================= */

.home-intro > * {
    width: min(100%, var(--max-width));
}

.home-intro .home-section-heading {
    width: min(820px, 100%);
}

.home-feature-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.home-feature {
    position: relative;
    min-height: 310px;
    padding: 28px;
    background: var(--panel);
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.home-feature::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    border-right: 1px solid rgba(249, 163, 102, 0.25);
    border-bottom: 1px solid rgba(249, 163, 102, 0.25);
}

.home-feature:hover {
    background: #18262e;
    transform: translateY(-3px);
}

.home-feature-number {
    display: block;
    margin-bottom: 36px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
}

.home-feature h3 {
    margin: 0 0 14px;
    color: var(--foreground);
    font-size: 1.45rem;
}

.home-feature p {
    margin: 0;
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.75;
}

.home-feature a {
    display: inline-block;
    margin-top: 24px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.home-feature a:hover {
    color: #d6fff9;
}

/* =========================================================
   PLANETS
========================================================= */

.home-planets > * {
    width: min(100%, var(--max-width));
    margin-right: auto;
    margin-left: auto;
}

.home-planet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.home-planet {
    position: relative;
    min-height: 185px;
    padding: 28px;
    background:
        linear-gradient(
            135deg,
            rgba(27, 43, 52, 0.95),
            rgba(16, 27, 33, 0.98)
        );
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.home-planet::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    border-top: 1px solid rgba(101, 223, 204, 0.22);
    border-right: 1px solid rgba(101, 223, 204, 0.22);
}

.home-planet > span {
    color: var(--mint);
    font-family: monospace;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
}

.home-planet h3 {
    margin: 40px 0 9px;
    color: var(--foreground);
    font-size: 1.55rem;
    line-height: 1;
}

.home-planet p {
    margin: 0;
    color: var(--dim);
    font-size: 0.93rem;
}

.home-section-link {
    margin-top: 34px;
    text-align: center;
}

.home-section-link a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    color: var(--mint);
    border: 1px solid rgba(101, 223, 204, 0.32);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-section-link a:hover {
    color: #d9fffa;
    background: rgba(101, 223, 204, 0.07);
    border-color: var(--mint);
}

/* =========================================================
   PROGRESSION
========================================================= */

.home-progression-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    gap: 80px;
    align-items: center;
}

.home-progression-copy {
    max-width: 680px;
}

.home-inline-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    margin-top: 28px;
    padding: 0 20px;
    color: #111b20;
    background: var(--amber);
    border: 1px solid var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.home-inline-button:hover {
    color: #111b20;
    background: var(--amber-soft);
    border-color: var(--amber-soft);
}

.home-progression-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.home-progression-list > div {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px;
    background: var(--card);
}

.home-progression-list span {
    color: var(--amber);
    font-size: 2.15rem;
    font-weight: 700;
    line-height: 1;
}

.home-progression-list strong {
    margin-top: 12px;
    color: var(--foreground);
    font-size: 1rem;
}

.home-progression-list small {
    margin-top: 7px;
    color: var(--dim);
    font-size: 0.86rem;
    line-height: 1.55;
}

/* =========================================================
   FREE BROWSER GAME CTA
========================================================= */

.home-free-game {
    padding: 94px 24px;
    background:
        linear-gradient(
            90deg,
            rgba(249, 163, 102, 0.05),
            transparent 28%,
            transparent 72%,
            rgba(101, 223, 204, 0.05)
        ),
        #0a1318;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.home-free-game-inner {
    width: min(880px, 100%);
    margin: 0 auto;
    text-align: center;
}

.home-free-game p {
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
}

.home-play-now-centred {
    margin-top: 32px;
    text-align: left;
}

/* =========================================================
   FAQ
========================================================= */

.home-faq-preview > * {
    width: min(100%, var(--max-width));
    margin-right: auto;
    margin-left: auto;
}

.home-faq-preview .home-section-heading {
    width: min(820px, 100%);
}

.home-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.home-faq-grid article {
    min-height: 190px;
    padding: 28px;
    background: var(--panel);
}

.home-faq-grid h3 {
    margin: 0 0 13px;
    color: var(--foreground);
    font-size: 1.08rem;
    line-height: 1.4;
}

.home-faq-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.75;
}

/* =========================================================
   FINAL CTA
========================================================= */

.home-final-cta {
    position: relative;
    padding: 100px 24px;
    text-align: center;
    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(249, 163, 102, 0.13),
            transparent 42%
        ),
        #091216;
    border-top: 1px solid var(--border);
}

.home-final-cta-inner {
    width: min(900px, 100%);
    margin: 0 auto;
}

.home-final-cta p {
    margin: 20px 0 0;
    color: var(--muted);
    font-family: monospace;
    font-size: 0.9rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.home-final-play {
    min-height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    padding: 0 34px;
    color: #111b20;
    background: var(--amber);
    border: 1px solid var(--amber);
    box-shadow: 0 0 32px rgba(249, 163, 102, 0.12);
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.home-final-play:hover {
    color: #111b20;
    background: var(--amber-soft);
    border-color: var(--amber-soft);
    box-shadow: 0 0 42px rgba(249, 163, 102, 0.24);
}

/* =========================================================
   HOMEPAGE RESPONSIVE
========================================================= */

@media (max-width: 1180px) {
    .home-hero-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(310px, 0.8fr);
        gap: 44px;
    }

    .home-feature-grid {
        grid-template-columns: 1fr 1fr;
    }

    .home-progression-grid {
        gap: 50px;
    }
}

@media (max-width: 900px) {
    .home-hero {
        padding-top: 62px;
    }

    .home-hero-grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .home-hero-copy {
        max-width: none;
    }

    .home-hero-panel {
        max-width: 680px;
    }

    .home-planet-grid {
        grid-template-columns: 1fr 1fr;
    }

    .home-progression-grid {
        grid-template-columns: 1fr;
    }

    .home-progression-copy {
        max-width: 760px;
    }

    .home-progression-list {
        max-width: 760px;
    }
}

@media (max-width: 680px) {
    .home-hero,
    .home-intro,
    .home-planets,
    .home-progression,
    .home-faq-preview,
    .home-free-game,
    .home-final-cta {
        padding-right: 16px;
        padding-left: 16px;
    }

    .home-hero {
        padding-top: 48px;
        padding-bottom: 52px;
    }

    .home-hero-copy h1 {
        font-size: clamp(2.8rem, 15vw, 4.4rem);
    }

    .home-hero-lead {
        margin-top: 22px;
        font-size: 1.02rem;
    }

    .home-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .home-play-now {
        width: 100%;
        min-width: 0;
    }

    .home-secondary-action {
        width: 100%;
        min-height: 54px;
    }

    .home-hero-meta {
        grid-template-columns: 1fr 1fr;
    }

    .home-hero-panel {
        padding: 22px;
    }

    .home-intro,
    .home-planets,
    .home-progression,
    .home-faq-preview {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .home-section-heading {
        margin-bottom: 34px;
    }

    .home-feature-grid,
    .home-planet-grid,
    .home-faq-grid {
        grid-template-columns: 1fr;
    }

    .home-feature {
        min-height: 0;
    }

    .home-feature-number {
        margin-bottom: 24px;
    }

    .home-planet {
        min-height: 155px;
    }

    .home-planet h3 {
        margin-top: 30px;
    }

    .home-progression-list {
        grid-template-columns: 1fr;
    }

    .home-progression-list > div {
        min-height: 145px;
    }

    .home-free-game,
    .home-final-cta {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .home-play-now-centred {
        width: 100%;
    }

    .home-final-play {
        width: 100%;
        padding-right: 16px;
        padding-left: 16px;
        font-size: 0.82rem;
    }
}

@media (max-width: 420px) {
    .home-hero-copy h1 {
        font-size: 2.65rem;
    }

    .home-eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.11em;
    }

    .home-play-now {
        min-height: 78px;
        padding-right: 54px;
        padding-left: 17px;
    }

    .home-play-now strong {
        font-size: 1.4rem;
    }

    .home-play-now::after {
        right: 16px;
    }

    .home-hero-meta span {
        min-height: 76px;
        padding: 11px 12px;
    }

    .home-section-heading h2,
    .home-progression-copy h2,
    .home-free-game h2,
    .home-final-cta h2 {
        font-size: 2.1rem;
    }
}

/* =========================================================
   ABOUT PAGE
========================================================= */

.page-eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.5;
    text-transform: uppercase;
}

/* =========================================================
   ABOUT HERO
========================================================= */

.page-hero {
    position: relative;
    padding: 92px 24px 82px;
    background:
        radial-gradient(
            circle at 78% 10%,
            rgba(101, 223, 204, 0.07),
            transparent 32%
        ),
        radial-gradient(
            circle at 16% 0%,
            rgba(249, 163, 102, 0.08),
            transparent 35%
        ),
        #0e181e;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );
    background-size: 52px 52px;
    pointer-events: none;
}

.page-hero-inner {
    position: relative;
    z-index: 1;
    width: min(100%, var(--max-width));
    margin: 0 auto;
}

.page-hero h1 {
    max-width: 1050px;
    margin: 0;
    color: var(--foreground);
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.98;
}

.page-hero p {
    max-width: 820px;
    margin: 26px 0 0;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1.8;
}

/* =========================================================
   ABOUT INTRO
========================================================= */

.about-intro {
    padding: 90px 24px;
    background: #0d171d;
}

.about-intro-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
    gap: 76px;
    align-items: center;
}

.about-copy {
    max-width: 780px;
}

.about-copy h2,
.about-section-heading h2,
.about-worlds h2,
.about-fan-project h2,
.about-play h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.03;
}

.about-copy p,
.about-section-heading p,
.about-worlds p,
.about-fan-project p,
.about-play p {
    margin: 21px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.about-status-panel {
    position: relative;
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 35, 44, 0.98),
            rgba(13, 23, 29, 0.98)
        );
    border: 1px solid var(--border-light);
    box-shadow:
        18px 18px 0 rgba(0, 0, 0, 0.12),
        0 28px 60px rgba(0, 0, 0, 0.18);
}

.about-status-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 82px;
    height: 1px;
    background: var(--amber);
    box-shadow: 0 0 16px rgba(249, 163, 102, 0.4);
}

.about-status-label {
    display: block;
    margin-bottom: 20px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.about-status-row {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    font-family: monospace;
    font-size: 0.86rem;
}

.about-status-row:last-child {
    border-bottom: 0;
}

.about-status-row span {
    color: var(--dim);
}

.about-status-row strong {
    color: var(--foreground);
    font-weight: 500;
    text-align: right;
}

/* =========================================================
   ABOUT SYSTEMS
========================================================= */

.about-systems {
    padding: 90px 24px;
    background: #101b21;
}

.about-section-heading {
    width: min(820px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.about-system-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.about-system-grid article {
    position: relative;
    min-height: 245px;
    padding: 30px;
    background: var(--panel);
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.about-system-grid article:hover {
    background: #18262e;
    transform: translateY(-3px);
}

.about-system-grid article::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    border-right: 1px solid rgba(249, 163, 102, 0.25);
    border-bottom: 1px solid rgba(249, 163, 102, 0.25);
}

.about-system-grid article > span {
    display: block;
    margin-bottom: 34px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 0.13em;
}

.about-system-grid h3 {
    margin: 0 0 13px;
    color: var(--foreground);
    font-size: 1.5rem;
}

.about-system-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.75;
}

/* =========================================================
   ABOUT WORLDS
========================================================= */

.about-worlds {
    padding: 90px 24px;
    background: #0d171d;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.about-worlds-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.85fr);
    gap: 80px;
    align-items: center;
}

.about-worlds-grid > div:first-child {
    max-width: 720px;
}

.about-inline-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    padding: 0 22px;
    color: #111b20;
    background: var(--amber);
    border: 1px solid var(--amber);
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-inline-button:hover {
    color: #111b20;
    background: var(--amber-soft);
    border-color: var(--amber-soft);
    box-shadow: 0 0 26px rgba(249, 163, 102, 0.16);
}

.about-world-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.about-world-list span {
    min-height: 92px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    color: var(--foreground);
    background: var(--card);
    font-size: 1rem;
    font-weight: 700;
    transition:
        color 0.18s ease,
        background 0.18s ease;
}

.about-world-list span::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-right: 12px;
    flex: 0 0 auto;
    background: var(--mint);
    box-shadow: 0 0 9px rgba(101, 223, 204, 0.55);
}

.about-world-list span:hover {
    color: var(--mint);
    background: #18262e;
}

/* =========================================================
   FAN PROJECT
========================================================= */

.about-fan-project {
    padding: 92px 24px;
    background:
        linear-gradient(
            90deg,
            rgba(249, 163, 102, 0.04),
            transparent 28%,
            transparent 72%,
            rgba(101, 223, 204, 0.04)
        ),
        #0a1318;
}

.about-fan-project-inner {
    width: min(920px, 100%);
    margin: 0 auto;
    text-align: center;
}

.about-fan-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.about-fan-links a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 21px;
    color: var(--mint);
    background: transparent;
    border: 1px solid rgba(101, 223, 204, 0.34);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-fan-links a:hover {
    color: #d9fffa;
    background: rgba(101, 223, 204, 0.07);
    border-color: var(--mint);
}

/* =========================================================
   ABOUT PLAY CTA
========================================================= */

.about-play {
    padding: 100px 24px;
    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(249, 163, 102, 0.13),
            transparent 42%
        ),
        #091216;
    border-top: 1px solid var(--border);
    text-align: center;
}

.about-play-inner {
    width: min(900px, 100%);
    margin: 0 auto;
}

.about-play-button {
    min-height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    padding: 0 36px;
    color: #111b20;
    background: var(--amber);
    border: 1px solid var(--amber);
    box-shadow: 0 0 32px rgba(249, 163, 102, 0.12);
    font-family: monospace;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.about-play-button:hover {
    color: #111b20;
    background: var(--amber-soft);
    border-color: var(--amber-soft);
    box-shadow: 0 0 42px rgba(249, 163, 102, 0.24);
}

/* =========================================================
   ABOUT RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-copy {
        max-width: 820px;
    }

    .about-status-panel {
        max-width: 720px;
    }

    .about-system-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-worlds-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-worlds-grid > div:first-child {
        max-width: 820px;
    }

    .about-world-list {
        max-width: 820px;
    }
}

@media (max-width: 680px) {
    .page-hero,
    .about-intro,
    .about-systems,
    .about-worlds,
    .about-fan-project,
    .about-play {
        padding-right: 16px;
        padding-left: 16px;
    }

    .page-hero {
        padding-top: 62px;
        padding-bottom: 58px;
    }

    .page-hero h1 {
        font-size: clamp(2.6rem, 13vw, 4rem);
    }

    .page-hero p {
        font-size: 1rem;
    }

    .about-intro,
    .about-systems,
    .about-worlds {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .about-status-panel {
        padding: 22px;
    }

    .about-status-row {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        min-height: 68px;
    }

    .about-status-row strong {
        text-align: left;
    }

    .about-system-grid {
        grid-template-columns: 1fr;
    }

    .about-system-grid article {
        min-height: 0;
    }

    .about-system-grid article > span {
        margin-bottom: 24px;
    }

    .about-world-list {
        grid-template-columns: 1fr;
    }

    .about-world-list span {
        min-height: 72px;
    }

    .about-fan-project,
    .about-play {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .about-fan-links {
        flex-direction: column;
        align-items: stretch;
    }

    .about-fan-links a {
        width: 100%;
    }

    .about-play-button {
        width: 100%;
        padding-right: 18px;
        padding-left: 18px;
    }
}

@media (max-width: 420px) {
    .page-eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.11em;
    }

    .page-hero h1 {
        font-size: 2.55rem;
    }

    .about-copy h2,
    .about-section-heading h2,
    .about-worlds h2,
    .about-fan-project h2,
    .about-play h2 {
        font-size: 2.1rem;
    }
}

/* =========================================================
   HOW TO PLAY PAGE
========================================================= */

.guide-overview,
.guide-steps,
.guide-professions,
.guide-planets,
.guide-achievements,
.guide-ascension,
.guide-play {
    padding: 90px 24px;
}

.guide-overview,
.guide-professions,
.guide-achievements {
    background: #0d171d;
}

.guide-steps,
.guide-planets {
    background: #101b21;
}

/* =========================================================
   GUIDE OVERVIEW
========================================================= */

.guide-overview-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
    gap: 76px;
    align-items: center;
}

.guide-overview-grid > div:first-child {
    max-width: 780px;
}

.guide-overview h2,
.guide-section-heading h2,
.guide-professions h2,
.guide-achievements h2,
.guide-ascension h2,
.guide-play h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.03;
}

.guide-overview p,
.guide-section-heading p,
.guide-professions p,
.guide-achievements p,
.guide-ascension p,
.guide-play p {
    margin: 21px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.guide-status-panel {
    position: relative;
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 35, 44, 0.98),
            rgba(13, 23, 29, 0.98)
        );
    border: 1px solid var(--border-light);
    box-shadow:
        18px 18px 0 rgba(0, 0, 0, 0.12),
        0 28px 60px rgba(0, 0, 0, 0.18);
}

.guide-status-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 82px;
    height: 1px;
    background: var(--amber);
    box-shadow: 0 0 16px rgba(249, 163, 102, 0.4);
}

.guide-status-label {
    display: block;
    margin-bottom: 20px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.guide-status-row {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid var(--border);
}

.guide-status-row:last-child {
    border-bottom: 0;
}

.guide-status-row span {
    min-width: 30px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

.guide-status-row strong {
    color: var(--foreground);
    font-size: 0.94rem;
    font-weight: 600;
}

/* =========================================================
   GUIDE STEPS
========================================================= */

.guide-section-heading {
    width: min(820px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.guide-step-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.guide-step-grid article {
    position: relative;
    min-height: 250px;
    padding: 30px;
    background: var(--panel);
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.guide-step-grid article:hover {
    background: #18262e;
    transform: translateY(-3px);
}

.guide-step-grid article::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    border-right: 1px solid rgba(249, 163, 102, 0.25);
    border-bottom: 1px solid rgba(249, 163, 102, 0.25);
}

.guide-step-grid article > span {
    display: block;
    margin-bottom: 34px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 0.13em;
}

.guide-step-grid h3 {
    margin: 0 0 13px;
    color: var(--foreground);
    font-size: 1.5rem;
}

.guide-step-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.75;
}

/* =========================================================
   PROFESSIONS
========================================================= */

.guide-professions-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.85fr);
    gap: 80px;
    align-items: center;
}

.guide-professions-grid > div:first-child {
    max-width: 720px;
}

.guide-profession-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.guide-profession-list > div {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    background: var(--card);
}

.guide-profession-list span {
    margin-bottom: 10px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.guide-profession-list strong {
    color: var(--foreground);
    font-size: 1rem;
}

/* =========================================================
   PLANET FLOW
========================================================= */

.guide-planet-flow {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.guide-planet-flow > div {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px;
    background: var(--panel);
    transition: background 0.18s ease;
}

.guide-planet-flow > div:hover {
    background: #18262e;
}

.guide-planet-flow span {
    margin-bottom: 18px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.guide-planet-flow strong {
    color: var(--foreground);
    font-size: 1rem;
}

.guide-centred-link {
    margin-top: 34px;
    text-align: center;
}

.guide-centred-link a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    color: var(--mint);
    border: 1px solid rgba(101, 223, 204, 0.34);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guide-centred-link a:hover {
    color: #d9fffa;
    background: rgba(101, 223, 204, 0.07);
    border-color: var(--mint);
}

/* =========================================================
   ACHIEVEMENTS
========================================================= */

.guide-achievements-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    gap: 80px;
    align-items: center;
}

.guide-achievements-grid > div:first-child {
    max-width: 720px;
}

.guide-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.guide-stat-grid > div {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px;
    background: var(--card);
}

.guide-stat-grid span {
    color: var(--amber);
    font-size: 2.15rem;
    font-weight: 700;
    line-height: 1;
}

.guide-stat-grid strong {
    margin-top: 12px;
    color: var(--foreground);
    font-size: 0.95rem;
}

/* =========================================================
   ASCENSION
========================================================= */

.guide-ascension {
    background:
        linear-gradient(
            90deg,
            rgba(249, 163, 102, 0.04),
            transparent 28%,
            transparent 72%,
            rgba(101, 223, 204, 0.04)
        ),
        #0a1318;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.guide-ascension-inner {
    width: min(900px, 100%);
    margin: 0 auto;
    text-align: center;
}

/* =========================================================
   PLAY CTA
========================================================= */

.guide-play {
    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(249, 163, 102, 0.13),
            transparent 42%
        ),
        #091216;
    text-align: center;
}

.guide-play-inner {
    width: min(900px, 100%);
    margin: 0 auto;
}

.guide-play-button {
    min-height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    padding: 0 36px;
    color: #111b20;
    background: var(--amber);
    border: 1px solid var(--amber);
    box-shadow: 0 0 32px rgba(249, 163, 102, 0.12);
    font-family: monospace;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.guide-play-button:hover {
    color: #111b20;
    background: var(--amber-soft);
    border-color: var(--amber-soft);
    box-shadow: 0 0 42px rgba(249, 163, 102, 0.24);
}

/* =========================================================
   HOW TO PLAY RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
    .guide-overview-grid,
    .guide-professions-grid,
    .guide-achievements-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .guide-status-panel,
    .guide-profession-list,
    .guide-stat-grid {
        max-width: 820px;
    }

    .guide-step-grid {
        grid-template-columns: 1fr 1fr;
    }

    .guide-planet-flow {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 680px) {
    .guide-overview,
    .guide-steps,
    .guide-professions,
    .guide-planets,
    .guide-achievements,
    .guide-ascension,
    .guide-play {
        padding: 68px 16px;
    }

    .guide-status-panel {
        padding: 22px;
    }

    .guide-step-grid,
    .guide-profession-list,
    .guide-stat-grid {
        grid-template-columns: 1fr;
    }

    .guide-step-grid article {
        min-height: 0;
    }

    .guide-step-grid article > span {
        margin-bottom: 24px;
    }

    .guide-planet-flow {
        grid-template-columns: 1fr 1fr;
    }

    .guide-profession-list > div,
    .guide-stat-grid > div {
        min-height: 130px;
    }

    .guide-play-button {
        width: 100%;
        padding-right: 18px;
        padding-left: 18px;
    }
}

@media (max-width: 420px) {
    .guide-overview h2,
    .guide-section-heading h2,
    .guide-professions h2,
    .guide-achievements h2,
    .guide-ascension h2,
    .guide-play h2 {
        font-size: 2.1rem;
    }

    .guide-planet-flow {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   FEATURES PAGE
========================================================= */

.features-core,
.features-progression,
.features-worlds,
.features-ascension,
.features-audio,
.features-idle,
.features-play {
    padding: 90px 24px;
}

.features-core,
.features-ascension,
.features-idle {
    background: #0d171d;
}

.features-progression,
.features-worlds {
    background: #101b21;
}

.features-section-heading {
    width: min(820px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.features-section-heading h2,
.features-progression h2,
.features-ascension h2,
.features-audio h2,
.features-idle h2,
.features-play h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.03;
}

.features-section-heading p,
.features-progression p,
.features-ascension p,
.features-audio p,
.features-idle p,
.features-play p {
    margin: 21px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* =========================================================
   CORE SYSTEMS
========================================================= */

.features-core-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.features-core-grid article {
    position: relative;
    min-height: 270px;
    padding: 30px;
    background: var(--panel);
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.features-core-grid article:hover {
    background: #18262e;
    transform: translateY(-3px);
}

.features-core-grid article::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    border-right: 1px solid rgba(249, 163, 102, 0.25);
    border-bottom: 1px solid rgba(249, 163, 102, 0.25);
}

.features-core-grid article > span {
    display: block;
    margin-bottom: 34px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 0.13em;
}

.features-core-grid h3 {
    margin: 0 0 13px;
    color: var(--foreground);
    font-size: 1.5rem;
}

.features-core-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.75;
}

/* =========================================================
   PROGRESSION NUMBERS
========================================================= */

.features-progression-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 0.9fr);
    gap: 80px;
    align-items: center;
}

.features-progression-grid > div:first-child {
    max-width: 720px;
}

.features-number-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.features-number-grid > div {
    min-height: 185px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px;
    background: var(--card);
}

.features-number-grid span {
    color: var(--amber);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}

.features-number-grid strong {
    margin-top: 12px;
    color: var(--foreground);
    font-size: 1rem;
}

.features-number-grid small {
    margin-top: 8px;
    color: var(--dim);
    font-size: 0.86rem;
    line-height: 1.55;
}

/* =========================================================
   WORLDS
========================================================= */

.features-world-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.features-world-grid article {
    position: relative;
    min-height: 185px;
    padding: 28px;
    background:
        linear-gradient(
            135deg,
            rgba(27, 43, 52, 0.95),
            rgba(16, 27, 33, 0.98)
        );
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.features-world-grid article::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    border-top: 1px solid rgba(101, 223, 204, 0.22);
    border-right: 1px solid rgba(101, 223, 204, 0.22);
}

.features-world-grid article > span {
    color: var(--mint);
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
}

.features-world-grid h3 {
    margin: 40px 0 9px;
    color: var(--foreground);
    font-size: 1.55rem;
    line-height: 1;
}

.features-world-grid p {
    margin: 0;
    color: var(--dim);
    font-size: 0.95rem;
}

.features-centred-link {
    margin-top: 34px;
    text-align: center;
}

.features-centred-link a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    color: var(--mint);
    border: 1px solid rgba(101, 223, 204, 0.34);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.features-centred-link a:hover {
    color: #d9fffa;
    background: rgba(101, 223, 204, 0.07);
    border-color: var(--mint);
}

/* =========================================================
   ASCENSION
========================================================= */

.features-ascension-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.8fr);
    gap: 80px;
    align-items: center;
}

.features-ascension-grid > div:first-child {
    max-width: 720px;
}

.features-ascension-panel {
    position: relative;
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 35, 44, 0.98),
            rgba(13, 23, 29, 0.98)
        );
    border: 1px solid var(--border-light);
    box-shadow:
        18px 18px 0 rgba(0, 0, 0, 0.12),
        0 28px 60px rgba(0, 0, 0, 0.18);
}

.features-ascension-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 82px;
    height: 1px;
    background: var(--amber);
    box-shadow: 0 0 16px rgba(249, 163, 102, 0.4);
}

.features-panel-label {
    display: block;
    margin-bottom: 20px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.features-ascension-panel > div {
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid var(--border);
}

.features-ascension-panel > div:last-child {
    border-bottom: 0;
}

.features-ascension-panel > div span {
    color: var(--mint);
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

.features-ascension-panel > div strong {
    color: var(--foreground);
    font-size: 0.96rem;
}

/* =========================================================
   AUDIO
========================================================= */

.features-audio {
    background:
        linear-gradient(
            90deg,
            rgba(249, 163, 102, 0.04),
            transparent 28%,
            transparent 72%,
            rgba(101, 223, 204, 0.04)
        ),
        #0a1318;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.features-audio-inner {
    width: min(1000px, 100%);
    margin: 0 auto;
    text-align: center;
}

.features-audio-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 38px;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.features-audio-list span {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--foreground);
    background: var(--panel);
    font-size: 0.95rem;
    font-weight: 700;
}

/* =========================================================
   IDLE + ACTIVE
========================================================= */

.features-idle-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.9fr);
    gap: 80px;
    align-items: center;
}

.features-idle-grid > div:first-child {
    max-width: 720px;
}

.features-idle-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.features-idle-list > div {
    min-height: 155px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    background: var(--card);
}

.features-idle-list span {
    margin-bottom: 10px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.features-idle-list strong {
    color: var(--foreground);
    font-size: 0.96rem;
    line-height: 1.55;
}

/* =========================================================
   PLAY CTA
========================================================= */

.features-play {
    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(249, 163, 102, 0.13),
            transparent 42%
        ),
        #091216;
    text-align: center;
}

.features-play-inner {
    width: min(900px, 100%);
    margin: 0 auto;
}

.features-play-button {
    min-height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    padding: 0 36px;
    color: #111b20;
    background: var(--amber);
    border: 1px solid var(--amber);
    box-shadow: 0 0 32px rgba(249, 163, 102, 0.12);
    font-family: monospace;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.features-play-button:hover {
    color: #111b20;
    background: var(--amber-soft);
    border-color: var(--amber-soft);
    box-shadow: 0 0 42px rgba(249, 163, 102, 0.24);
}

/* =========================================================
   FEATURES RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
    .features-core-grid {
        grid-template-columns: 1fr 1fr;
    }

    .features-progression-grid,
    .features-ascension-grid,
    .features-idle-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .features-number-grid,
    .features-ascension-panel,
    .features-idle-list {
        max-width: 820px;
    }
}

@media (max-width: 850px) {
    .features-world-grid {
        grid-template-columns: 1fr 1fr;
    }

    .features-audio-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .features-core,
    .features-progression,
    .features-worlds,
    .features-ascension,
    .features-audio,
    .features-idle,
    .features-play {
        padding: 68px 16px;
    }

    .features-core-grid,
    .features-world-grid,
    .features-number-grid,
    .features-idle-list {
        grid-template-columns: 1fr;
    }

    .features-core-grid article {
        min-height: 0;
    }

    .features-core-grid article > span {
        margin-bottom: 24px;
    }

    .features-number-grid > div,
    .features-idle-list > div {
        min-height: 135px;
    }

    .features-audio-list {
        grid-template-columns: 1fr;
    }

    .features-play-button {
        width: 100%;
        padding-right: 18px;
        padding-left: 18px;
    }
}

@media (max-width: 420px) {
    .features-section-heading h2,
    .features-progression h2,
    .features-ascension h2,
    .features-audio h2,
    .features-idle h2,
    .features-play h2 {
        font-size: 2.1rem;
    }
}

/* =========================================================
   PLANETS PAGE
========================================================= */

.planets-overview,
.planets-list,
.planets-music,
.planets-progression,
.planets-play {
    padding: 90px 24px;
}

.planets-overview,
.planets-music {
    background: #0d171d;
}

.planets-list {
    background: #101b21;
}

.planets-overview-grid,
.planets-music-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.8fr);
    gap: 80px;
    align-items: center;
}

.planets-overview-grid > div:first-child,
.planets-music-grid > div:first-child {
    max-width: 720px;
}

.planets-overview h2,
.planets-section-heading h2,
.planets-music h2,
.planets-progression h2,
.planets-play h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.03;
}

.planets-overview p,
.planets-section-heading p,
.planets-music p,
.planets-progression p,
.planets-play p {
    margin: 21px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* =========================================================
   OVERVIEW PANEL
========================================================= */

.planets-overview-panel {
    position: relative;
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 35, 44, 0.98),
            rgba(13, 23, 29, 0.98)
        );
    border: 1px solid var(--border-light);
    box-shadow:
        18px 18px 0 rgba(0, 0, 0, 0.12),
        0 28px 60px rgba(0, 0, 0, 0.18);
}

.planets-overview-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 82px;
    height: 1px;
    background: var(--amber);
    box-shadow: 0 0 16px rgba(249, 163, 102, 0.4);
}

.planets-panel-label {
    display: block;
    margin-bottom: 20px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.planets-panel-row {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    font-family: monospace;
    font-size: 0.86rem;
}

.planets-panel-row:last-child {
    border-bottom: 0;
}

.planets-panel-row span {
    color: var(--dim);
}

.planets-panel-row strong {
    color: var(--foreground);
    font-size: 1rem;
}

/* =========================================================
   PLANET CARDS
========================================================= */

.planets-section-heading {
    width: min(820px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.planets-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.planets-grid article {
    position: relative;
    min-height: 365px;
    padding: 30px;
    background:
        linear-gradient(
            135deg,
            rgba(27, 43, 52, 0.96),
            rgba(16, 27, 33, 0.99)
        );
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.planets-grid article::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 72px;
    height: 72px;
    border-top: 1px solid rgba(101, 223, 204, 0.28);
    border-right: 1px solid rgba(101, 223, 204, 0.28);
}

.planets-number {
    display: block;
    margin-bottom: 30px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.planets-card-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 17px;
}

.planets-card-heading h3 {
    margin: 0;
    color: var(--foreground);
    font-size: 2rem;
    line-height: 1;
}

.planets-card-heading > span {
    color: var(--amber);
    font-family: monospace;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.planets-grid article > p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.75;
}

.planets-creatures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 28px;
    background: var(--border);
    border: 1px solid var(--border);
}

.planets-creatures span {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: var(--foreground-soft);
    background: rgba(13, 23, 29, 0.95);
    font-family: monospace;
    font-size: 0.78rem;
}

/* =========================================================
   MUSIC
========================================================= */

.planets-music-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.planets-music-list > div {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px;
    background: var(--card);
}

.planets-music-list span {
    margin-bottom: 10px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.planets-music-list strong {
    color: var(--foreground);
    font-size: 1rem;
}

/* =========================================================
   PROGRESSION CTA
========================================================= */

.planets-progression {
    background:
        linear-gradient(
            90deg,
            rgba(249, 163, 102, 0.04),
            transparent 28%,
            transparent 72%,
            rgba(101, 223, 204, 0.04)
        ),
        #0a1318;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.planets-progression-inner {
    width: min(900px, 100%);
    margin: 0 auto;
    text-align: center;
}

.planets-guide-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    padding: 0 22px;
    color: var(--mint);
    border: 1px solid rgba(101, 223, 204, 0.34);
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.planets-guide-button:hover {
    color: #d9fffa;
    background: rgba(101, 223, 204, 0.07);
    border-color: var(--mint);
}

/* =========================================================
   PLAY CTA
========================================================= */

.planets-play {
    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(249, 163, 102, 0.13),
            transparent 42%
        ),
        #091216;
    text-align: center;
}

.planets-play-inner {
    width: min(900px, 100%);
    margin: 0 auto;
}

.planets-play-button {
    min-height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    padding: 0 36px;
    color: #111b20;
    background: var(--amber);
    border: 1px solid var(--amber);
    box-shadow: 0 0 32px rgba(249, 163, 102, 0.12);
    font-family: monospace;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.planets-play-button:hover {
    color: #111b20;
    background: var(--amber-soft);
    border-color: var(--amber-soft);
    box-shadow: 0 0 42px rgba(249, 163, 102, 0.24);
}

/* =========================================================
   PLANETS RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
    .planets-overview-grid,
    .planets-music-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .planets-overview-panel,
    .planets-music-list {
        max-width: 820px;
    }
}

@media (max-width: 850px) {
    .planets-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .planets-overview,
    .planets-list,
    .planets-music,
    .planets-progression,
    .planets-play {
        padding: 68px 16px;
    }

    .planets-overview-panel {
        padding: 22px;
    }

    .planets-grid article {
        min-height: 0;
        padding: 24px;
    }

    .planets-card-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .planets-creatures {
        grid-template-columns: 1fr 1fr;
    }

    .planets-music-list {
        grid-template-columns: 1fr;
    }

    .planets-play-button {
        width: 100%;
        padding-right: 18px;
        padding-left: 18px;
    }
}

@media (max-width: 420px) {
    .planets-overview h2,
    .planets-section-heading h2,
    .planets-music h2,
    .planets-progression h2,
    .planets-play h2 {
        font-size: 2.1rem;
    }

    .planets-creatures {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   UPDATES PAGE
========================================================= */

.updates-latest,
.updates-status,
.updates-philosophy,
.updates-links,
.updates-play {
    padding: 90px 24px;
}

.updates-latest,
.updates-status {
    background: #0d171d;
}

.updates-section-heading {
    width: min(820px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.updates-section-heading h2,
.updates-status h2,
.updates-philosophy h2,
.updates-play h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.03;
}

.updates-section-heading p,
.updates-status p,
.updates-philosophy p,
.updates-play p {
    margin: 21px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* =========================================================
   UPDATE CARDS
========================================================= */

.updates-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.updates-grid article {
    position: relative;
    min-height: 300px;
    padding: 30px;
    background: var(--panel);
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.updates-grid article:hover {
    background: #18262e;
    transform: translateY(-3px);
}

.updates-grid article::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    border-right: 1px solid rgba(249, 163, 102, 0.25);
    border-bottom: 1px solid rgba(249, 163, 102, 0.25);
}

.updates-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 34px;
    font-family: monospace;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.updates-meta span {
    color: var(--dim);
}

.updates-meta strong {
    color: var(--amber);
    font-weight: 700;
}

.updates-grid h3 {
    margin: 0 0 15px;
    color: var(--foreground);
    font-size: 1.45rem;
    line-height: 1.25;
}

.updates-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.75;
}

/* =========================================================
   STATUS
========================================================= */

.updates-status-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.8fr);
    gap: 80px;
    align-items: center;
}

.updates-status-grid > div:first-child {
    max-width: 720px;
}

.updates-status-panel {
    position: relative;
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 35, 44, 0.98),
            rgba(13, 23, 29, 0.98)
        );
    border: 1px solid var(--border-light);
    box-shadow:
        18px 18px 0 rgba(0, 0, 0, 0.12),
        0 28px 60px rgba(0, 0, 0, 0.18);
}

.updates-status-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 82px;
    height: 1px;
    background: var(--amber);
    box-shadow: 0 0 16px rgba(249, 163, 102, 0.4);
}

.updates-panel-label {
    display: block;
    margin-bottom: 20px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.updates-status-panel > div {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    font-family: monospace;
    font-size: 0.86rem;
}

.updates-status-panel > div:last-child {
    border-bottom: 0;
}

.updates-status-panel > div span {
    color: var(--dim);
}

.updates-status-panel > div strong {
    color: var(--foreground);
    font-size: 1rem;
}

/* =========================================================
   DEVELOPMENT APPROACH
========================================================= */

.updates-philosophy {
    background:
        linear-gradient(
            90deg,
            rgba(249, 163, 102, 0.04),
            transparent 28%,
            transparent 72%,
            rgba(101, 223, 204, 0.04)
        ),
        #0a1318;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.updates-philosophy-inner {
    width: min(900px, 100%);
    margin: 0 auto;
    text-align: center;
}

/* =========================================================
   RELATED LINKS
========================================================= */

.updates-links {
    background: #101b21;
}

.updates-links-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.updates-links-grid a {
    min-height: 205px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
    background: var(--panel);
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.updates-links-grid a:hover {
    background: #18262e;
    transform: translateY(-3px);
}

.updates-links-grid span {
    margin-bottom: 14px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.updates-links-grid strong {
    color: var(--foreground);
    font-size: 1.35rem;
}

.updates-links-grid small {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

/* =========================================================
   PLAY CTA
========================================================= */

.updates-play {
    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(249, 163, 102, 0.13),
            transparent 42%
        ),
        #091216;
    text-align: center;
}

.updates-play-inner {
    width: min(900px, 100%);
    margin: 0 auto;
}

.updates-play-button {
    min-height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    padding: 0 36px;
    color: #111b20;
    background: var(--amber);
    border: 1px solid var(--amber);
    box-shadow: 0 0 32px rgba(249, 163, 102, 0.12);
    font-family: monospace;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.updates-play-button:hover {
    color: #111b20;
    background: var(--amber-soft);
    border-color: var(--amber-soft);
    box-shadow: 0 0 42px rgba(249, 163, 102, 0.24);
}

/* =========================================================
   UPDATES RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
    .updates-grid {
        grid-template-columns: 1fr 1fr;
    }

    .updates-status-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .updates-status-panel {
        max-width: 820px;
    }
}

@media (max-width: 760px) {
    .updates-links-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .updates-latest,
    .updates-status,
    .updates-philosophy,
    .updates-links,
    .updates-play {
        padding: 68px 16px;
    }

    .updates-grid {
        grid-template-columns: 1fr;
    }

    .updates-grid article {
        min-height: 0;
        padding: 24px;
    }

    .updates-status-panel {
        padding: 22px;
    }

    .updates-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        margin-bottom: 24px;
    }

    .updates-play-button {
        width: 100%;
        padding-right: 18px;
        padding-left: 18px;
    }
}

@media (max-width: 420px) {
    .updates-section-heading h2,
    .updates-status h2,
    .updates-philosophy h2,
    .updates-play h2 {
        font-size: 2.1rem;
    }
}

/* =========================================================
   FAQ PAGE
========================================================= */

.faq-overview,
.faq-list-section,
.faq-worlds,
.faq-saves,
.faq-project,
.faq-more,
.faq-play {
    padding: 90px 24px;
}

.faq-overview,
.faq-saves {
    background: #0d171d;
}

.faq-list-section,
.faq-worlds,
.faq-more {
    background: #101b21;
}

.faq-overview-grid,
.faq-saves-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.8fr);
    gap: 80px;
    align-items: center;
}

.faq-overview-grid > div:first-child,
.faq-saves-grid > div:first-child {
    max-width: 720px;
}

.faq-overview h2,
.faq-section-heading h2,
.faq-saves h2,
.faq-project h2,
.faq-play h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.03;
}

.faq-overview p,
.faq-saves p,
.faq-project p,
.faq-play p {
    margin: 21px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* =========================================================
   OVERVIEW / SAVE PANELS
========================================================= */

.faq-overview-panel,
.faq-save-panel {
    position: relative;
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 35, 44, 0.98),
            rgba(13, 23, 29, 0.98)
        );
    border: 1px solid var(--border-light);
    box-shadow:
        18px 18px 0 rgba(0, 0, 0, 0.12),
        0 28px 60px rgba(0, 0, 0, 0.18);
}

.faq-overview-panel::before,
.faq-save-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 82px;
    height: 1px;
    background: var(--amber);
    box-shadow: 0 0 16px rgba(249, 163, 102, 0.4);
}

.faq-panel-label {
    display: block;
    margin-bottom: 20px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.faq-overview-panel > div,
.faq-save-panel > div {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    font-family: monospace;
    font-size: 0.86rem;
}

.faq-overview-panel > div:last-child,
.faq-save-panel > div:last-child {
    border-bottom: 0;
}

.faq-overview-panel span,
.faq-save-panel span {
    color: var(--dim);
}

.faq-overview-panel strong,
.faq-save-panel strong {
    color: var(--foreground);
    font-size: 0.96rem;
    text-align: right;
}

/* =========================================================
   FAQ QUESTIONS
========================================================= */

.faq-section-heading {
    width: min(820px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.faq-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.faq-grid article {
    position: relative;
    min-height: 245px;
    padding: 30px;
    background: var(--panel);
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.faq-grid article:hover {
    background: #18262e;
    transform: translateY(-3px);
}

.faq-grid article::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    border-right: 1px solid rgba(249, 163, 102, 0.25);
    border-bottom: 1px solid rgba(249, 163, 102, 0.25);
}

.faq-grid article > span {
    display: block;
    margin-bottom: 28px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 0.13em;
}

.faq-grid h3 {
    margin: 0 0 14px;
    color: var(--foreground);
    font-size: 1.4rem;
    line-height: 1.3;
}

.faq-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.75;
}

/* =========================================================
   FAN PROJECT
========================================================= */

.faq-project {
    background:
        linear-gradient(
            90deg,
            rgba(249, 163, 102, 0.04),
            transparent 28%,
            transparent 72%,
            rgba(101, 223, 204, 0.04)
        ),
        #0a1318;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.faq-project-inner {
    width: min(900px, 100%);
    margin: 0 auto;
    text-align: center;
}

.faq-project-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    padding: 0 22px;
    color: var(--mint);
    border: 1px solid rgba(101, 223, 204, 0.34);
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.faq-project-button:hover {
    color: #d9fffa;
    background: rgba(101, 223, 204, 0.07);
    border-color: var(--mint);
}

/* =========================================================
   MORE LINKS
========================================================= */

.faq-more-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.faq-more-grid a {
    min-height: 205px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
    background: var(--panel);
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.faq-more-grid a:hover {
    background: #18262e;
    transform: translateY(-3px);
}

.faq-more-grid span {
    margin-bottom: 14px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.faq-more-grid strong {
    color: var(--foreground);
    font-size: 1.35rem;
}

.faq-more-grid small {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

/* =========================================================
   PLAY CTA
========================================================= */

.faq-play {
    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(249, 163, 102, 0.13),
            transparent 42%
        ),
        #091216;
    text-align: center;
}

.faq-play-inner {
    width: min(900px, 100%);
    margin: 0 auto;
}

.faq-play-button {
    min-height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    padding: 0 36px;
    color: #111b20;
    background: var(--amber);
    border: 1px solid var(--amber);
    box-shadow: 0 0 32px rgba(249, 163, 102, 0.12);
    font-family: monospace;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.faq-play-button:hover {
    color: #111b20;
    background: var(--amber-soft);
    border-color: var(--amber-soft);
    box-shadow: 0 0 42px rgba(249, 163, 102, 0.24);
}

/* =========================================================
   FAQ RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
    .faq-overview-grid,
    .faq-saves-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .faq-overview-panel,
    .faq-save-panel {
        max-width: 820px;
    }
}

@media (max-width: 760px) {
    .faq-more-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .faq-overview,
    .faq-list-section,
    .faq-worlds,
    .faq-saves,
    .faq-project,
    .faq-more,
    .faq-play {
        padding: 68px 16px;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .faq-grid article {
        min-height: 0;
        padding: 24px;
    }

    .faq-grid article > span {
        margin-bottom: 22px;
    }

    .faq-overview-panel,
    .faq-save-panel {
        padding: 22px;
    }

    .faq-play-button {
        width: 100%;
        padding-right: 18px;
        padding-left: 18px;
    }
}

@media (max-width: 420px) {
    .faq-overview h2,
    .faq-section-heading h2,
    .faq-saves h2,
    .faq-project h2,
    .faq-play h2 {
        font-size: 2.1rem;
    }

    .faq-overview-panel > div,
    .faq-save-panel > div {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        min-height: 68px;
    }

    .faq-overview-panel strong,
    .faq-save-panel strong {
        text-align: left;
    }
}

/* =========================================================
   SUPPORT PAGE
========================================================= */

.support-intro,
.support-options,
.support-paypal,
.support-purpose,
.support-independent,
.support-play {
    padding: 90px 24px;
}

.support-intro,
.support-paypal {
    background: #0d171d;
}

.support-options,
.support-purpose {
    background: #101b21;
}

.support-intro-grid,
.support-paypal-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.8fr);
    gap: 80px;
    align-items: center;
}

.support-intro-grid > div:first-child,
.support-paypal-grid > div:first-child {
    max-width: 720px;
}

.support-intro h2,
.support-section-heading h2,
.support-paypal h2,
.support-purpose h2,
.support-independent h2,
.support-play h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.03;
}

.support-intro p,
.support-section-heading p,
.support-paypal p,
.support-purpose p,
.support-independent p,
.support-play p {
    margin: 21px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* =========================================================
   STATUS PANEL
========================================================= */

.support-status-panel {
    position: relative;
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 35, 44, 0.98),
            rgba(13, 23, 29, 0.98)
        );
    border: 1px solid var(--border-light);
    box-shadow:
        18px 18px 0 rgba(0, 0, 0, 0.12),
        0 28px 60px rgba(0, 0, 0, 0.18);
}

.support-status-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 82px;
    height: 1px;
    background: var(--amber);
    box-shadow: 0 0 16px rgba(249, 163, 102, 0.4);
}

.support-panel-label {
    display: block;
    margin-bottom: 20px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.support-status-panel > div {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    font-family: monospace;
    font-size: 0.86rem;
}

.support-status-panel > div:last-child {
    border-bottom: 0;
}

.support-status-panel span {
    color: var(--dim);
}

.support-status-panel strong {
    color: var(--foreground);
    font-size: 0.96rem;
}

/* =========================================================
   SUPPORT OPTIONS
========================================================= */

.support-section-heading {
    width: min(820px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.support-options-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.support-options-grid article {
    position: relative;
    min-height: 315px;
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: var(--panel);
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.support-options-grid article:hover {
    background: #18262e;
    transform: translateY(-3px);
}

.support-options-grid article::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    border-right: 1px solid rgba(249, 163, 102, 0.25);
    border-bottom: 1px solid rgba(249, 163, 102, 0.25);
}

.support-options-grid article > span {
    display: block;
    margin-bottom: 34px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 0.13em;
}

.support-options-grid h3 {
    margin: 0 0 13px;
    color: var(--foreground);
    font-size: 1.45rem;
}

.support-options-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.75;
}

.support-options-grid a {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 24px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.support-options-grid a:hover {
    color: #d9fffa;
}

/* =========================================================
   PAYPAL
========================================================= */

.support-paypal-panel {
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 35, 44, 0.98),
            rgba(13, 23, 29, 0.98)
        );
    border: 1px solid var(--border-light);
}

.support-paypal-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 82px;
    height: 1px;
    background: var(--mint);
    box-shadow: 0 0 16px rgba(101, 223, 204, 0.4);
}

.support-paypal-panel > strong {
    color: var(--foreground);
    font-size: 2rem;
}

.support-paypal-panel > p {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.96rem;
}

.support-payment-status {
    align-self: flex-start;
    margin-top: 26px;
    padding: 12px 16px;
    color: var(--amber);
    background: rgba(249, 163, 102, 0.06);
    border: 1px solid rgba(249, 163, 102, 0.35);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* =========================================================
   SUPPORT PURPOSE
========================================================= */

.support-purpose-inner {
    width: min(100%, var(--max-width));
    margin: 0 auto;
}

.support-purpose-inner > .page-eyebrow,
.support-purpose-inner > h2 {
    text-align: center;
}

.support-purpose-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 48px;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.support-purpose-grid > div {
    min-height: 230px;
    padding: 28px;
    background: var(--panel);
}

.support-purpose-grid > div > span {
    display: block;
    margin-bottom: 28px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.support-purpose-grid strong {
    color: var(--foreground);
    font-size: 1.3rem;
}

.support-purpose-grid p {
    margin-top: 12px;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* =========================================================
   INDEPENDENT PROJECT
========================================================= */

.support-independent {
    background:
        linear-gradient(
            90deg,
            rgba(249, 163, 102, 0.04),
            transparent 28%,
            transparent 72%,
            rgba(101, 223, 204, 0.04)
        ),
        #0a1318;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.support-independent-inner {
    width: min(900px, 100%);
    margin: 0 auto;
    text-align: center;
}

.support-notice-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    padding: 0 22px;
    color: var(--mint);
    border: 1px solid rgba(101, 223, 204, 0.34);
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.support-notice-button:hover {
    color: #d9fffa;
    background: rgba(101, 223, 204, 0.07);
    border-color: var(--mint);
}

/* =========================================================
   PLAY CTA
========================================================= */

.support-play {
    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(249, 163, 102, 0.13),
            transparent 42%
        ),
        #091216;
    text-align: center;
}

.support-play-inner {
    width: min(900px, 100%);
    margin: 0 auto;
}

.support-play-button {
    min-height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    padding: 0 36px;
    color: #111b20;
    background: var(--amber);
    border: 1px solid var(--amber);
    box-shadow: 0 0 32px rgba(249, 163, 102, 0.12);
    font-family: monospace;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.support-play-button:hover {
    color: #111b20;
    background: var(--amber-soft);
    border-color: var(--amber-soft);
    box-shadow: 0 0 42px rgba(249, 163, 102, 0.24);
}

/* =========================================================
   SUPPORT RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
    .support-intro-grid,
    .support-paypal-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .support-status-panel,
    .support-paypal-panel {
        max-width: 820px;
    }

    .support-options-grid,
    .support-purpose-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .support-intro,
    .support-options,
    .support-paypal,
    .support-purpose,
    .support-independent,
    .support-play {
        padding: 68px 16px;
    }

    .support-options-grid,
    .support-purpose-grid {
        grid-template-columns: 1fr;
    }

    .support-options-grid article,
    .support-purpose-grid > div {
        min-height: 0;
        padding: 24px;
    }

    .support-status-panel,
    .support-paypal-panel {
        padding: 22px;
    }

    .support-play-button {
        width: 100%;
        padding-right: 18px;
        padding-left: 18px;
    }
}

@media (max-width: 420px) {
    .support-intro h2,
    .support-section-heading h2,
    .support-paypal h2,
    .support-purpose h2,
    .support-independent h2,
    .support-play h2 {
        font-size: 2.1rem;
    }

    .support-status-panel > div {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        min-height: 68px;
    }
}

/* =========================================================
   CREDITS PAGE
========================================================= */

.credits-project,
.credits-contributors,
.credits-network,
.credits-inspiration,
.credits-thanks,
.credits-play {
    padding: 90px 24px;
}

.credits-project,
.credits-network {
    background: #0d171d;
}

.credits-contributors,
.credits-thanks {
    background: #101b21;
}

.credits-project-grid,
.credits-network-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.8fr);
    gap: 80px;
    align-items: center;
}

.credits-project-grid > div:first-child,
.credits-network-grid > div:first-child {
    max-width: 720px;
}

.credits-project h2,
.credits-section-heading h2,
.credits-network h2,
.credits-inspiration h2,
.credits-thanks h2,
.credits-play h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.03;
}

.credits-project p,
.credits-section-heading p,
.credits-network p,
.credits-inspiration p,
.credits-thanks p,
.credits-play p {
    margin: 21px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* =========================================================
   PROJECT PANEL
========================================================= */

.credits-project-panel {
    position: relative;
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 35, 44, 0.98),
            rgba(13, 23, 29, 0.98)
        );
    border: 1px solid var(--border-light);
    box-shadow:
        18px 18px 0 rgba(0, 0, 0, 0.12),
        0 28px 60px rgba(0, 0, 0, 0.18);
}

.credits-project-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 82px;
    height: 1px;
    background: var(--amber);
    box-shadow: 0 0 16px rgba(249, 163, 102, 0.4);
}

.credits-panel-label {
    display: block;
    margin-bottom: 20px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.credits-project-panel > div {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    font-family: monospace;
    font-size: 0.86rem;
}

.credits-project-panel > div:last-child {
    border-bottom: 0;
}

.credits-project-panel span {
    color: var(--dim);
}

.credits-project-panel strong {
    color: var(--foreground);
    font-size: 0.94rem;
    text-align: right;
}

/* =========================================================
   CONTRIBUTOR AREAS
========================================================= */

.credits-section-heading {
    width: min(820px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.credits-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.credits-grid article {
    position: relative;
    min-height: 260px;
    padding: 30px;
    background: var(--panel);
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.credits-grid article:hover {
    background: #18262e;
    transform: translateY(-3px);
}

.credits-grid article::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    border-right: 1px solid rgba(249, 163, 102, 0.25);
    border-bottom: 1px solid rgba(249, 163, 102, 0.25);
}

.credits-grid article > span {
    display: block;
    margin-bottom: 32px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 0.13em;
}

.credits-grid h3 {
    margin: 0 0 13px;
    color: var(--foreground);
    font-size: 1.45rem;
}

.credits-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.75;
}

/* =========================================================
   NETWORK LINKS
========================================================= */

.credits-network-links {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.credits-network-links a {
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px;
    background: var(--card);
    transition: background 0.18s ease;
}

.credits-network-links a:hover {
    background: #18262e;
}

.credits-network-links span {
    margin-bottom: 10px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.credits-network-links strong {
    color: var(--foreground);
    font-size: 1.2rem;
}

/* =========================================================
   INSPIRATION
========================================================= */

.credits-inspiration {
    background:
        linear-gradient(
            90deg,
            rgba(249, 163, 102, 0.04),
            transparent 28%,
            transparent 72%,
            rgba(101, 223, 204, 0.04)
        ),
        #0a1318;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.credits-inspiration-inner {
    width: min(900px, 100%);
    margin: 0 auto;
    text-align: center;
}

.credits-notice-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    padding: 0 22px;
    color: var(--mint);
    border: 1px solid rgba(101, 223, 204, 0.34);
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.credits-notice-button:hover {
    color: #d9fffa;
    background: rgba(101, 223, 204, 0.07);
    border-color: var(--mint);
}

/* =========================================================
   THANKS
========================================================= */

.credits-thanks-inner {
    width: min(900px, 100%);
    margin: 0 auto;
    text-align: center;
}

/* =========================================================
   PLAY CTA
========================================================= */

.credits-play {
    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(249, 163, 102, 0.13),
            transparent 42%
        ),
        #091216;
    text-align: center;
}

.credits-play-inner {
    width: min(900px, 100%);
    margin: 0 auto;
}

.credits-play-button {
    min-height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
    padding: 0 36px;
    color: #111b20;
    background: var(--amber);
    border: 1px solid var(--amber);
    box-shadow: 0 0 32px rgba(249, 163, 102, 0.12);
    font-family: monospace;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.credits-play-button:hover {
    color: #111b20;
    background: var(--amber-soft);
    border-color: var(--amber-soft);
    box-shadow: 0 0 42px rgba(249, 163, 102, 0.24);
}

/* =========================================================
   CREDITS RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
    .credits-project-grid,
    .credits-network-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .credits-project-panel,
    .credits-network-links {
        max-width: 820px;
    }

    .credits-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .credits-project,
    .credits-contributors,
    .credits-network,
    .credits-inspiration,
    .credits-thanks,
    .credits-play {
        padding: 68px 16px;
    }

    .credits-grid {
        grid-template-columns: 1fr;
    }

    .credits-grid article {
        min-height: 0;
        padding: 24px;
    }

    .credits-project-panel {
        padding: 22px;
    }

    .credits-play-button {
        width: 100%;
        padding-right: 18px;
        padding-left: 18px;
    }
}

@media (max-width: 420px) {
    .credits-project h2,
    .credits-section-heading h2,
    .credits-network h2,
    .credits-inspiration h2,
    .credits-thanks h2,
    .credits-play h2 {
        font-size: 2.1rem;
    }

    .credits-project-panel > div {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        min-height: 68px;
    }

    .credits-project-panel strong {
        text-align: left;
    }
}

/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-intro,
.contact-reasons,
.contact-details,
.contact-guidance,
.contact-rights,
.contact-links {
    padding: 90px 24px;
}

.contact-intro,
.contact-details {
    background: #0d171d;
}

.contact-reasons,
.contact-guidance,
.contact-links {
    background: #101b21;
}

.contact-intro-grid,
.contact-details-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.8fr);
    gap: 80px;
    align-items: center;
}

.contact-intro-grid > div:first-child,
.contact-details-grid > div:first-child {
    max-width: 720px;
}

.contact-intro h2,
.contact-section-heading h2,
.contact-details h2,
.contact-guidance h2,
.contact-rights h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.03;
}

.contact-intro p,
.contact-section-heading p,
.contact-details p,
.contact-guidance p,
.contact-rights p {
    margin: 21px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* =========================================================
   STATUS PANEL
========================================================= */

.contact-status-panel {
    position: relative;
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 35, 44, 0.98),
            rgba(13, 23, 29, 0.98)
        );
    border: 1px solid var(--border-light);
    box-shadow:
        18px 18px 0 rgba(0, 0, 0, 0.12),
        0 28px 60px rgba(0, 0, 0, 0.18);
}

.contact-status-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 82px;
    height: 1px;
    background: var(--amber);
    box-shadow: 0 0 16px rgba(249, 163, 102, 0.4);
}

.contact-panel-label {
    display: block;
    margin-bottom: 20px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.contact-status-panel > div {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    font-family: monospace;
    font-size: 0.86rem;
}

.contact-status-panel > div:last-child {
    border-bottom: 0;
}

.contact-status-panel span {
    color: var(--dim);
}

.contact-status-panel strong {
    color: var(--foreground);
    font-size: 0.94rem;
}

/* =========================================================
   CONTACT REASONS
========================================================= */

.contact-section-heading {
    width: min(820px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.contact-reasons-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.contact-reasons-grid article {
    position: relative;
    min-height: 285px;
    padding: 30px;
    background: var(--panel);
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.contact-reasons-grid article:hover {
    background: #18262e;
    transform: translateY(-3px);
}

.contact-reasons-grid article::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    border-right: 1px solid rgba(249, 163, 102, 0.25);
    border-bottom: 1px solid rgba(249, 163, 102, 0.25);
}

.contact-reasons-grid article > span {
    display: block;
    margin-bottom: 32px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 0.13em;
}

.contact-reasons-grid h3 {
    margin: 0 0 13px;
    color: var(--foreground);
    font-size: 1.4rem;
}

.contact-reasons-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.75;
}

/* =========================================================
   NETWORK LINKS
========================================================= */

.contact-network-links {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.contact-network-links a {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px;
    background: var(--card);
    transition: background 0.18s ease;
}

.contact-network-links a:hover {
    background: #18262e;
}

.contact-network-links span {
    margin-bottom: 9px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.contact-network-links strong {
    color: var(--foreground);
    font-size: 1.2rem;
}

.contact-network-links small {
    margin-top: 9px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* =========================================================
   REPORTING GUIDANCE
========================================================= */

.contact-guidance-inner {
    width: min(100%, var(--max-width));
    margin: 0 auto;
}

.contact-guidance-inner > .page-eyebrow,
.contact-guidance-inner > h2 {
    text-align: center;
}

.contact-guidance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 48px;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.contact-guidance-grid > div {
    min-height: 220px;
    padding: 28px;
    background: var(--panel);
}

.contact-guidance-grid > div > span {
    display: block;
    margin-bottom: 27px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.contact-guidance-grid strong {
    color: var(--foreground);
    font-size: 1.16rem;
}

.contact-guidance-grid p {
    margin-top: 12px;
    font-size: 0.94rem;
    line-height: 1.7;
}

/* =========================================================
   RIGHTS
========================================================= */

.contact-rights {
    background:
        linear-gradient(
            90deg,
            rgba(249, 163, 102, 0.04),
            transparent 28%,
            transparent 72%,
            rgba(101, 223, 204, 0.04)
        ),
        #0a1318;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.contact-rights-inner {
    width: min(900px, 100%);
    margin: 0 auto;
    text-align: center;
}

.contact-notice-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    padding: 0 22px;
    color: var(--mint);
    border: 1px solid rgba(101, 223, 204, 0.34);
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-notice-button:hover {
    color: #d9fffa;
    background: rgba(101, 223, 204, 0.07);
    border-color: var(--mint);
}

/* =========================================================
   RELATED LINKS
========================================================= */

.contact-links-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.contact-links-grid a {
    min-height: 205px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
    background: var(--panel);
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.contact-links-grid a:hover {
    background: #18262e;
    transform: translateY(-3px);
}

.contact-links-grid span {
    margin-bottom: 14px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.contact-links-grid strong {
    color: var(--foreground);
    font-size: 1.3rem;
}

.contact-links-grid small {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

/* =========================================================
   CONTACT RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
    .contact-intro-grid,
    .contact-details-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .contact-status-panel,
    .contact-network-links {
        max-width: 820px;
    }

    .contact-reasons-grid,
    .contact-guidance-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .contact-links-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .contact-intro,
    .contact-reasons,
    .contact-details,
    .contact-guidance,
    .contact-rights,
    .contact-links {
        padding: 68px 16px;
    }

    .contact-reasons-grid,
    .contact-guidance-grid {
        grid-template-columns: 1fr;
    }

    .contact-reasons-grid article,
    .contact-guidance-grid > div {
        min-height: 0;
        padding: 24px;
    }

    .contact-status-panel {
        padding: 22px;
    }
}

@media (max-width: 420px) {
    .contact-intro h2,
    .contact-section-heading h2,
    .contact-details h2,
    .contact-guidance h2,
    .contact-rights h2 {
        font-size: 2.1rem;
    }

    .contact-status-panel > div {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        min-height: 68px;
    }
}

/* =========================================================
   LEGAL PAGES - TERMS
========================================================= */

.legal-intro,
.legal-content,
.legal-related {
    padding: 90px 24px;
}

.legal-intro {
    background: #0d171d;
}

.legal-content,
.legal-related {
    background: #101b21;
}

.legal-intro-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.8fr);
    gap: 80px;
    align-items: center;
}

.legal-intro-grid > div:first-child {
    max-width: 720px;
}

.legal-intro h2,
.legal-content h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.legal-intro p,
.legal-content p {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 1.06rem;
    line-height: 1.8;
}

/* =========================================================
   LEGAL STATUS PANEL
========================================================= */

.legal-status-panel {
    position: relative;
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 35, 44, 0.98),
            rgba(13, 23, 29, 0.98)
        );
    border: 1px solid var(--border-light);
    box-shadow:
        18px 18px 0 rgba(0, 0, 0, 0.12),
        0 28px 60px rgba(0, 0, 0, 0.18);
}

.legal-status-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 82px;
    height: 1px;
    background: var(--amber);
    box-shadow: 0 0 16px rgba(249, 163, 102, 0.4);
}

.legal-panel-label {
    display: block;
    margin-bottom: 20px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.legal-status-panel > div {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    font-family: monospace;
    font-size: 0.86rem;
}

.legal-status-panel > div:last-child {
    border-bottom: 0;
}

.legal-status-panel span {
    color: var(--dim);
}

.legal-status-panel strong {
    color: var(--foreground);
    font-size: 0.94rem;
    text-align: right;
}

/* =========================================================
   TERMS CONTENT
========================================================= */

.legal-content-inner {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.legal-content article {
    position: relative;
    padding: 34px;
    background: var(--panel);
}

.legal-content article > span {
    display: block;
    margin-bottom: 18px;
    color: var(--amber);
    font-family: monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.legal-content article h2 {
    font-size: 1.65rem;
}

.legal-content article p {
    margin-top: 15px;
    font-size: 1rem;
}

.legal-content article a {
    color: var(--mint);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.legal-content article a:hover {
    color: #d9fffa;
}

/* =========================================================
   RELATED LEGAL LINKS
========================================================= */

.legal-related-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.legal-related-grid a {
    min-height: 205px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
    background: var(--panel);
    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.legal-related-grid a:hover {
    background: #18262e;
    transform: translateY(-3px);
}

.legal-related-grid span {
    margin-bottom: 14px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.legal-related-grid strong {
    color: var(--foreground);
    font-size: 1.3rem;
}

.legal-related-grid small {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

/* =========================================================
   LEGAL RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
    .legal-intro-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .legal-status-panel {
        max-width: 820px;
    }
}

@media (max-width: 760px) {
    .legal-related-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .legal-intro,
    .legal-content,
    .legal-related {
        padding: 68px 16px;
    }

    .legal-status-panel {
        padding: 22px;
    }

    .legal-content article {
        padding: 26px 24px;
    }
}

@media (max-width: 420px) {
    .legal-intro h2 {
        font-size: 2.1rem;
    }

    .legal-content article h2 {
        font-size: 1.45rem;
    }

    .legal-status-panel > div {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        min-height: 68px;
    }

    .legal-status-panel strong {
        text-align: left;
    }
}

/* =========================================================
   PRIVACY PAGE
========================================================= */

.privacy-note {
    padding: 90px 24px;
    background:
        linear-gradient(
            90deg,
            rgba(249, 163, 102, 0.04),
            transparent 28%,
            transparent 72%,
            rgba(101, 223, 204, 0.04)
        ),
        #0a1318;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.privacy-note-inner {
    width: min(900px, 100%);
    margin: 0 auto;
    text-align: center;
}

.privacy-note h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.03;
}

.privacy-note p {
    margin: 21px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

@media (max-width: 680px) {
    .privacy-note {
        padding: 68px 16px;
    }
}

@media (max-width: 420px) {
    .privacy-note h2 {
        font-size: 2.1rem;
    }
}

/* =========================================================
   DISCLAIMER PAGE
========================================================= */

.disclaimer-highlight {
    padding: 90px 24px;
    background:
        linear-gradient(
            90deg,
            rgba(249, 163, 102, 0.04),
            transparent 28%,
            transparent 72%,
            rgba(101, 223, 204, 0.04)
        ),
        #0a1318;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.disclaimer-highlight-inner {
    width: min(900px, 100%);
    margin: 0 auto;
    text-align: center;
}

.disclaimer-highlight h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.03;
}

.disclaimer-highlight p {
    margin: 21px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.disclaimer-notice-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    padding: 0 22px;
    color: var(--mint);
    border: 1px solid rgba(101, 223, 204, 0.34);
    font-family: monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.disclaimer-notice-button:hover {
    color: #d9fffa;
    background: rgba(101, 223, 204, 0.07);
    border-color: var(--mint);
}

@media (max-width: 680px) {
    .disclaimer-highlight {
        padding: 68px 16px;
    }
}

@media (max-width: 420px) {
    .disclaimer-highlight h2 {
        font-size: 2.1rem;
    }
}

/* =========================================================
   FAN PROJECT NOTICE
========================================================= */

.fan-project-statement,
.fan-project-network {
    padding: 90px 24px;
}

.fan-project-statement {
    background:
        linear-gradient(
            90deg,
            rgba(249, 163, 102, 0.05),
            transparent 30%,
            transparent 70%,
            rgba(101, 223, 204, 0.05)
        ),
        #0a1318;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.fan-project-statement-inner {
    width: min(950px, 100%);
    margin: 0 auto;
    text-align: center;
}

.fan-project-statement h2,
.fan-project-network h2 {
    margin: 0;
    color: var(--foreground);
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.03;
}

.fan-project-statement p,
.fan-project-network p {
    margin: 21px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

/* =========================================================
   FAN PROJECT NETWORK
========================================================= */

.fan-project-network {
    background: #0d171d;
}

.fan-project-network-grid {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.8fr);
    gap: 80px;
    align-items: center;
}

.fan-project-network-grid > div:first-child {
    max-width: 720px;
}

.fan-project-network-links {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--border);
    border: 1px solid var(--border);
    gap: 1px;
}

.fan-project-network-links a {
    min-height: 135px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px;
    background: var(--card);
    transition: background 0.18s ease;
}

.fan-project-network-links a:hover {
    background: #18262e;
}

.fan-project-network-links span {
    margin-bottom: 10px;
    color: var(--mint);
    font-family: monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.fan-project-network-links strong {
    color: var(--foreground);
    font-size: 1.2rem;
}

/* =========================================================
   FAN PROJECT RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
    .fan-project-network-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .fan-project-network-links {
        max-width: 820px;
    }
}

@media (max-width: 680px) {
    .fan-project-statement,
    .fan-project-network {
        padding: 68px 16px;
    }
}

@media (max-width: 420px) {
    .fan-project-statement h2,
    .fan-project-network h2 {
        font-size: 2.1rem;
    }
}