@font-face {
    font-family: "W95Fa";
    src: url("../fonts/W95FA.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "W95Fa", "Courier New", monospace;
    line-height: 1.5;
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    z-index: -3;
    background-color: var(--bg-color);
    background-image: url("../img/background.jpg");
    background-repeat: repeat;
    background-size: 40%;
    background-attachment: fixed;
    background-position: top left;
    filter: contrast(1.35) brightness(0.52);
    animation: bgFlicker 3s infinite alternate;
}

body::after {
    display: none;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

a {
    color: var(--accent-color);
}

.page-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 2.4vw, 34px);
}

.hud-shell {
    position: relative;
    width: min(100%, 1500px);
    aspect-ratio: 1672 / 941;
    min-height: 240px;
    padding: clamp(86px, 8.4vw, 138px) clamp(34px, 4vw, 66px)
        clamp(92px, 7.8vw, 142px);
    display: grid;
    grid-template-columns: minmax(160px, 0.82fr) minmax(430px, 720px) minmax(
            160px,
            0.82fr
        );
    grid-template-rows:
        minmax(30px, 0.55fr) minmax(220px, 1.35fr) minmax(90px, 0.55fr)
        auto;
    gap: clamp(12px, 1.5vw, 26px) clamp(18px, 2vw, 34px);
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(var(--panel-bg), var(--panel-bg)),
        url("../frames/frame-outer-background.png") center / 100% 100% no-repeat;
    box-shadow: 0 0 48px var(--shadow-color);
    overflow: hidden;
}

.hud-shell::before,
.hud-shell::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.hud-shell::before {
    inset: 0;
    z-index: 8;
    background: url("../frames/processed/frame-outer-with-footer.png") center /
        100% 100% no-repeat;
}

.hud-shell::after {
    display: none;
}

.hud-corner {
    display: none;
}

.content {
    position: absolute;
    top: 28.6%;
    left: 50%;
    z-index: 4;
    width: min(48%, 720px);
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    max-width: none;
    margin: 0;
}

.site-header {
    display: contents;
    gap: clamp(22px, 2vw, 30px);
    text-align: left;
}

.title-console,
.statement-panel,
.sigil-strip {
    position: relative;
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

.title-console {
    position: absolute;
    top: 4.1%;
    left: 50%;
    z-index: 4;
    width: min(56%, 820px);
    aspect-ratio: 2172 / 724;
    min-height: 0;
    margin-top: 0;
    padding: clamp(22px, 3vw, 46px) clamp(44px, 4.8vw, 82px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    background: url("../frames/processed/frame-title.png") center / 100% 100%
        no-repeat;
}

.title-console::before,
.statement-panel::before,
.sigil-strip::before {
    display: none;
}

.site-logo {
    width: min(100%, 650px);
    transform: translateY(-12%);
    filter: drop-shadow(0 0 8px var(--title-glow))
        drop-shadow(0 0 18px var(--glow-green));
}

.title-console a {
    display: flex;
    /* The anchor stretches to the console's inner width, so centre the capped
       logo inside it instead of letting it sit flush left. */
    width: 100%;
    justify-content: center;
    line-height: 0;
}

.title-console a:hover .site-logo {
    opacity: 0.82;
    transition: opacity 0.15s;
}

.statement-link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.statement-link:hover .statement-panel {
    opacity: 0.88;
    transition: opacity 0.15s;
}

.statement-panel {
    width: 100%;
    aspect-ratio: 1448 / 1086;
    margin: 0;
    /* Padding as a % of the panel itself (not viewport) so it tracks the
       frame's chrome inner-safe area at every breakpoint. */
    padding: 14% 14% 14% 14%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: url("../frames/processed/frame-statement-alt.png") center / 100%
        100% no-repeat;
}

.glowing-text {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    color: var(--text-color);
    /* Keeps the full-size text intact, then scales it down with the HUD. */
    font-size: clamp(0.85rem, 1.65vw, 1.56rem);
    transform: translateY(-10%);
    line-height: clamp(1.25, 1.8vw, 1.38);
    text-align: center;
    text-shadow: 0 0 8px var(--shadow-color);
}

.site-nav {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.artist-list {
    list-style: none;
}

.orbit-panel {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
}

.orbit-panel::after {
    display: none;
}

.about-frame-panel {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    text-shadow: 0 0 8px var(--shadow-color);
}

.about-frame-panel-primary {
    top: 18.8%;
    right: 3.4%;
    width: min(23.5%, 370px);
    aspect-ratio: 971 / 1619;
    padding: 5.8% 2.9%;
    background: url("../frames/vertical-frame.png") center / 100% 100% no-repeat;
}

.about-frame-panel-secondary {
    top: 20.8%;
    left: 3.4%;
    width: min(23%, 360px);
    aspect-ratio: 1;
    padding: 4.2% 2.6%;
    background: url("../frames/vertical-frame-s.png") center / 100% 100%
        no-repeat;
}

.about-frame-content {
    width: 100%;
    max-height: 100%;
    overflow: auto;
    font-size: clamp(0.95rem, 1.5vw, 1.35rem);
    line-height: 1.25;
    text-align: center;
}

.about-funder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.4vw, 22px);
}

.about-funder p {
    margin: 0;
}

.about-funder-link {
    display: block;
    line-height: 0;
}

.about-funder-logo {
    width: min(82%, 230px);
    filter: drop-shadow(0 0 10px var(--glow-blue));
}

.orbit-top {
    top: 17.5%;
}

.orbit-bottom {
    top: 55%;
}

.orbit-left {
    left: 7.5%;
}

.orbit-right {
    right: 7.5%;
}

.artist-orb {
    position: relative;
    z-index: 1;
    width: clamp(204px, 17.76vw, 293px);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--accent-color);
    text-decoration: none;
    background: url("../frames/processed/frame-orb.png") center / 100% 100%
        no-repeat;
    border: 0;
    box-shadow: none;
    transition:
        transform 0.18s,
        color 0.18s,
        box-shadow 0.18s;
}

.artist-orb::before {
    display: none;
}

.artist-orb::after {
    display: none;
}

.artist-orb span {
    position: relative;
    z-index: 1;
    max-width: 62%;
    color: currentColor;
    font-size: clamp(1.2rem, 2vw, 1.9rem);
    line-height: 1.05;
    text-align: center;
    text-shadow: 0 0 12px var(--glow-blue);
}

.artist-orb:hover,
.artist-orb:focus-visible {
    color: var(--highlight-color);
    transform: scale(1.04);
    outline: none;
    filter: drop-shadow(0 0 18px var(--glow-green));
}

.sigil-strip {
    position: absolute;
    left: 50%;
    bottom: 14.5%;
    z-index: 4;
    width: min(29%, 440px);
    aspect-ratio: 2172 / 724;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    transform: translateX(-50%);
    background: url("../frames/processed/frame-sigil.png") center / 100% 100%
        no-repeat;
}

.sigil-strip span {
    visibility: hidden;
}

footer.site-footer {
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 0.5vw, 46px);
    z-index: 9;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-color);
    font-size: clamp(0.9rem, 1.4vw, 1.25rem);
    text-align: center;
    text-shadow: 0 0 10px var(--glow-green);
}

@keyframes hudFlicker {
    0%,
    100% {
        opacity: 0.84;
    }
    48% {
        opacity: 0.68;
    }
    52% {
        opacity: 0.95;
    }
    74% {
        opacity: 0.76;
    }
}

@keyframes bgFlicker {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.78;
    }
    55% {
        opacity: 0.94;
    }
    70% {
        opacity: 0.62;
    }
    85% {
        opacity: 0.9;
    }
}

/* ── Mobile: drop the rectangular chrome frames (which would distort when stretched
   to portrait shapes) and replace with simple neon-bordered panels. The circular
   `.artist-orb` keeps its frame-orb image since aspect-ratio:1 is preserved. ── */
@media (max-width: 980px) {
    .page-container {
        align-items: flex-start;
        padding: clamp(12px, 3vw, 22px);
    }

    .hud-shell {
        min-height: auto;
        aspect-ratio: auto;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        padding: clamp(20px, 4vw, 32px);
        /* Row gap stays generous; the column gutter is tight so the two orbs
           in a row read as a pair. */
        gap: clamp(14px, 3vw, 22px) clamp(10px, 2.6vw, 18px);
        background: var(--panel-bg);
        border: 1px solid var(--border-color);
        border-radius: 18px;
        box-shadow:
            0 0 24px var(--shadow-color),
            inset 0 0 32px rgba(104, 255, 0, 0.05);
    }

    .hud-shell::before {
        display: none;
    }

    .title-console {
        position: relative;
        top: auto;
        left: auto;
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        aspect-ratio: auto;
        padding: clamp(18px, 4vw, 28px) clamp(20px, 4vw, 36px);
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: 14px;
        box-shadow: 0 0 18px var(--glow-green);
        transform: none;
    }

    .site-logo {
        width: min(100%, 420px);
        /* Desktop nudges the logo up to sit in frame-title.png's opening;
           the mobile panel is a plain box, so centre it properly. */
        transform: none;
    }

    .content {
        position: relative;
        top: auto;
        left: auto;
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        transform: none;
    }

    .statement-panel {
        aspect-ratio: auto;
        margin: 0;
        padding: clamp(20px, 4vw, 32px) clamp(22px, 4.5vw, 36px);
        background: var(--panel-bg-soft);
        border: 1px solid var(--accent-color);
        border-radius: 14px;
        box-shadow: 0 0 20px var(--glow-blue);
    }

    .glowing-text {
        font-size: clamp(0.95rem, 2.6vw, 1.15rem);
        /* Same reason as .site-logo: no raster frame to compensate for here. */
        transform: none;
    }

    .orbit-panel {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        /* frame-orb.png bakes in ~10% transparent margin at the sides but ~13%
           top and ~16% bottom, so equal grid gaps read airier vertically than
           horizontally. Pull the rows back by the difference. */
        margin-block: -10px;
        transform: none;
    }

    /* Each orb sits against the centre gutter rather than in the middle of its
       half of the shell, so the pair stays close together. */
    .orbit-left {
        justify-content: flex-end;
    }

    .orbit-right {
        justify-content: flex-start;
    }

    /* The about page has a single full-width orb — keep that one centred. */
    .about-page .orbit-panel {
        justify-content: center;
    }

    .about-frame-panel {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        max-width: 420px;
        min-height: 190px;
        justify-self: center;
        padding: clamp(24px, 6vw, 38px);
        background: var(--panel-bg-soft);
        border: 1px solid var(--accent-color);
        border-radius: 14px;
        box-shadow: 0 0 20px var(--glow-blue);
    }

    .about-frame-panel-primary {
        grid-column: 2;
        grid-row: 3;
        aspect-ratio: auto;
    }

    .about-frame-panel-secondary {
        grid-column: 1;
        grid-row: 3;
        aspect-ratio: auto;
    }

    .orbit-left.orbit-top {
        grid-column: 1;
        grid-row: 3;
    }
    .orbit-right.orbit-top {
        grid-column: 2;
        grid-row: 3;
    }
    .orbit-left.orbit-bottom {
        grid-column: 1;
        grid-row: 4;
    }
    .orbit-right.orbit-bottom {
        grid-column: 2;
        grid-row: 4;
    }

    .about-page .orbit-left.orbit-bottom {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .artist-orb {
        /* Capped on wide screens; below ~215px per column the orb shrinks with
           the column instead of eating into the gutter. */
        width: min(100%, 200px);
        aspect-ratio: 1;
    }

    .artist-orb span {
        font-size: clamp(0.95rem, 3vw, 1.3rem);
    }

    .sigil-strip {
        position: relative;
        left: auto;
        bottom: auto;
        grid-column: 1 / -1;
        grid-row: 5;
        width: 100%;
        max-width: 360px;
        aspect-ratio: auto;
        padding: 12px 22px;
        justify-self: center;
        gap: 14px;
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        box-shadow: 0 0 16px var(--glow-green);
        transform: none;
    }

    .sigil-strip span {
        visibility: visible;
        color: var(--border-color);
        font-size: 1.15rem;
        text-shadow: 0 0 8px var(--glow-green);
    }

    footer.site-footer {
        position: relative;
        left: auto;
        bottom: auto;
        grid-column: 1 / -1;
        grid-row: 6;
        margin-top: 4px;
        transform: none;
    }
}

@media (max-width: 560px) {
    .hud-shell {
        /* The orbs stay two-up here; only the full-width panels span both
           columns. */
        padding: 16px;
        gap: 14px clamp(8px, 2.4vw, 14px);
    }

    .title-console,
    .content,
    .about-frame-panel,
    .sigil-strip,
    footer.site-footer {
        grid-column: 1 / -1;
    }

    /* The orbs shrink with the columns down here, so the label has to track
       them or it starts crossing the chrome ring. */
    .artist-orb span {
        font-size: clamp(0.72rem, 4vw, 1.15rem);
    }

    /* The about page stacks its two text frames instead of sitting them
       side by side. */
    .about-frame-panel-secondary {
        grid-row: 3;
    }
    .about-frame-panel-primary {
        grid-row: 4;
    }
    .about-page .orbit-left.orbit-bottom {
        grid-row: 5;
    }
}