/* EVE Sans Neue — CCP asset, served locally (web/fonts/ is deploy-time,
   not committed); the stack falls back cleanly when absent. */
@font-face {
    font-family: "EVE Sans Neue";
    src: url("/fonts/evesansneue-regular.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "EVE Sans Neue";
    src: url("/fonts/evesansneue-bold.otf") format("opentype");
    font-weight: 700;
    font-display: swap;
}

* { box-sizing: border-box; }

body.hub {
    margin: 0;
    font-size: 175%;
    min-height: 100vh;
    min-height: 100dvh; /* mobile browser chrome */
    background: #000;
    color: #fff;
    font-family: "EVE Sans Neue", "Segoe UI", Roboto, system-ui, sans-serif;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------------ nav */

.hub-nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 26px 34px 0;
}

/* Desktop: the panel is transparent to layout (header stays a spread row). */
.nav-panel { display: contents; }
.nav-toggle { display: none; }

.nav-left { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.nav-right { display: flex; gap: 28px; align-items: center; }

.nav-link {
    background: none;
    border: none;
    padding: 0 0 5px;
    border-bottom: 3px solid transparent;
    color: #fff;
    font: inherit;
    font-size: .8em;
    letter-spacing: .22em;
    text-decoration: none;
    text-transform: uppercase;
    opacity: .75;
    cursor: pointer;
}
.nav-link:hover { opacity: 1; border-bottom-color: #f7941d; }
.nav-link.disabled { opacity: .25; cursor: default; }
.nav-link.disabled:hover { border-bottom-color: rgba(255, 255, 255, .3); }

/* ----------------------------------------------------------------- hero */

.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

.hero h1 {
    position: relative;
    margin: 0;
    font-weight: 700;
    font-size: min(4.2em, 5vw);
    letter-spacing: .28em;
}


/* Chromatic aberration twitch: red/cyan ghost layers, shown only while
   .glitching (triggered at random intervals from hub.mjs). */
.hero h1::before,
.hero h1::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.hero h1::before { color: #f0f; }
.hero h1::after { color: #0ff; }

.hero h1.glitching { animation: glitch-jitter .22s steps(2, jump-none) both; }
.hero h1.glitching::before { opacity: .8; animation: glitch-red .22s steps(3, jump-none) both; }
.hero h1.glitching::after { opacity: .8; animation: glitch-cyan .22s steps(3, jump-none) both; }

@keyframes glitch-jitter {
    0% { transform: translate(0, 0); }
    40% { transform: translate(1px, -1px) skewX(.4deg); }
    100% { transform: translate(0, 0); }
}
@keyframes glitch-red {
    0% { transform: translate(-3px, 1px); clip-path: inset(12% 0 58% 0); }
    50% { transform: translate(4px, -1px); clip-path: inset(52% 0 8% 0); }
    100% { transform: translate(-2px, 0); clip-path: inset(28% 0 40% 0); }
}
@keyframes glitch-cyan {
    0% { transform: translate(3px, -1px); clip-path: inset(55% 0 10% 0); }
    50% { transform: translate(-4px, 1px); clip-path: inset(6% 0 66% 0); }
    100% { transform: translate(2px, 0); clip-path: inset(38% 0 30% 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero h1.glitching,
    .hero h1.glitching::before,
    .hero h1.glitching::after { animation: none; opacity: 0; }
}

.hero-sub {
    margin: 14px 0 0;
    font-size: min(.95em, 2vw);
    letter-spacing: .34em;
    opacity: .6;
}

/* Scramble letters (hero text only): fixed-width spans so glyph swaps
   don't reflow; scrambled glyphs get a chromatic split. */
.scr-letter {
    display: inline-block;
    text-align: center;
    white-space: pre;
}
.scr-letter.scrambled {
    text-shadow: -2px 0 rgba(255, 0, 255, .8), 2px 0 rgba(0, 255, 255, .8);
    opacity: .95;
}

.cta {
    display: inline-block;
    text-align: center;
    margin-top: 54px;
    padding: 16px 54px;
    border: 1px solid #fff;
    color: #fff;
    font-size: min(.9em, 2.2vw);
    font-weight: 700;
    letter-spacing: .26em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .15s, color .15s;
}
.cta:hover { background: #fff; color: #000; }
.cta.signed-in { border-color: rgba(255, 255, 255, .4); }
.cta.signed-in:hover { background: none; color: #fff; }
.cta.disabled { opacity: .3; cursor: default; border-color: rgba(255, 255, 255, .4); }
.cta.disabled:hover { background: none; color: #fff; }

/* ------------------------------------------------------------- ambience */

.ambience-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Emitters are invisible between plays; only the ring shows. */
.ambience-emitter {
    position: absolute;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
}

.ambience-emitter::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--size, 80px);
    height: var(--size, 80px);
    transform: translate(-50%, -50%) scale(.2);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    opacity: 0;
}

.ambience-emitter.playing::before {
    animation: ambience-ring var(--duration, 4s) ease-out both;
}

@keyframes ambience-ring {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
    12% { opacity: .5; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ambience-emitter.playing::before { animation: none; }
}

/* ---------------------------------------------------------------- footer */

.hub-foot { text-align: center; padding: 18px; }
.hub-foot p { margin: 0; font-size: .68em; letter-spacing: .1em; opacity: .3; }

/* --------------------------------------------------------------- options */

#options-dialog {
    background: #050505;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 28px 32px;
    width: min(510px, 90vw);
    font-family: inherit;
}
#options-dialog::backdrop { background: rgba(0, 0, 0, .7); }
#options-dialog h2 { margin: 0 0 2px; font-size: .95em; letter-spacing: .26em; }
.options-note { margin: 0 0 18px; font-size: .75em; letter-spacing: .06em; opacity: .5; }

#options-dialog label {
    display: block;
    margin: 14px 0 5px;
    font-size: .72em;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .7;
}

#options-dialog select {
    width: 100%;
    padding: 9px 10px;
    background: #0d0d0d;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    font: inherit;
}

#options-dialog input[type="range"] {
    width: 100%;
    accent-color: #fff;
    background: transparent;
}

.range-value { opacity: .6; margin-left: 6px; letter-spacing: .05em; }

.options-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 26px;
}

.dialog-button {
    padding: 9px 22px;
    background: none;
    border: 1px solid #fff;
    color: #fff;
    font: inherit;
    font-size: .75em;
    letter-spacing: .2em;
    cursor: pointer;
}
.dialog-button:hover { background: #fff; color: #000; }
.dialog-button.secondary { border-color: rgba(255, 255, 255, .3); }

/* ------------------------------------------------------------- overlays */

/* Full-page tool overlay (DNA), closed with the X. */
/* `display: flex` would override the hidden attribute — keep them agreeing. */
#dna-overlay[hidden] { display: none; }

#dna-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, .82);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* One self-contained box, centred, with a fixed-height results area so it
   never changes size as matches come and go. */
.overlay-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1240px, 95vw);
    height: min(640px, calc(100dvh - 40px));
    background: #050505;
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 26px 30px 30px;
}

.overlay-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font: inherit;
    font-size: .8em;
    line-height: 1;
    padding: 8px 12px;
    cursor: pointer;
}
.overlay-close:hover { border-color: #f7941d; color: #f7941d; }

.overlay-title { margin: 0 0 4px; font-size: 1.1em; font-weight: 700; letter-spacing: .26em; }
.overlay-sub { margin: 0 0 22px; font-size: .62em; letter-spacing: .12em; opacity: .5; }

/* Status sits inside the search field, right-aligned and greyed. */
.search-row { position: relative; }

#search {
    width: 100%;
    padding: 14px 130px 14px 16px;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font: inherit;
    font-size: .75em;
    letter-spacing: .08em;
}
#search:focus { outline: none; border-color: #f7941d; }

#status {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .55em;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .4);
    pointer-events: none;
    white-space: nowrap;
}

/* List left, DNA right — both exactly the same height. */
.dna-columns {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 16px;
    margin-top: 18px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.dna-list { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

#detail {
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 16px 18px;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* Title and meta hold one line each so the panel height never shifts. */
#detail h3 {
    margin: 0 0 12px;
    font-size: .82em;
    letter-spacing: .18em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fixed height (about four wrapped lines) so short and long DNA occupy
   exactly the same box; anything longer scrolls inside it. */
.dna-box {
    font-family: Consolas, monospace;
    font-size: .62em;
    line-height: 1.45;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 12px 14px;
    flex: 1;
    overflow-y: auto;
    word-break: break-all;
    user-select: all;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.detail-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.detail-actions .dialog-button { font-size: .62em; padding: 8px 14px; }
.dialog-button:disabled { opacity: .3; cursor: default; }
.dialog-button:disabled:hover { background: none; color: #fff; }

#results-window {
    flex: 1;
    min-height: 120px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, .12);
    border-top: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .3) transparent;
}

/* Name | skin id | type id — one grid template shared by head and rows. */
#results-head,
#results li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5em 5.5em;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
}

#results-head {
    border: 1px solid rgba(255, 255, 255, .12);
    border-bottom-color: rgba(255, 255, 255, .2);
    font-size: .58em;
    letter-spacing: .18em;
    opacity: .45;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}
#results-head span + span { text-align: right; }

#results { list-style: none; margin: 0; padding: 0; }
#results li {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: .66em;
    letter-spacing: .06em;
    cursor: pointer;
}
#results li:hover { background: rgba(255, 255, 255, .07); }
#results li.selected { border-left: 3px solid #f7941d; background: rgba(247, 148, 29, .08); }
#results .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#results .id { text-align: right; opacity: .45; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- mobile */

@media (max-width: 1150px) {
    /* Hamburger nav: both menus collapse into one dropdown panel. */
    .hub-nav { padding: 18px 22px 0; }

    .nav-toggle {
        display: block;
        background: none;
        border: 1px solid rgba(255, 255, 255, .3);
        color: #fff;
        font-size: 1em;
        line-height: 1;
        padding: 8px 12px;
        cursor: pointer;
    }

    .nav-panel {
        display: none;
        position: absolute;
        top: 62px;
        left: 0;
        right: 0;
        z-index: 50;
        flex-direction: column;
        gap: 0;
        background: rgba(0, 0, 0, .96);
        border-bottom: 1px solid rgba(255, 255, 255, .18);
        padding: 6px 0 12px;
    }
    .nav-panel.open { display: flex; }

    .nav-panel .nav-left,
    .nav-panel .nav-right {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-panel .nav-link {
        padding: 13px 26px;
        border-bottom: none;
        font-size: .78em;
        text-align: left;
    }
    .nav-panel .nav-link:hover { border-bottom: none; background: rgba(255, 255, 255, .07); }

    /* Centre text scales with the device width. */
    .hero h1 {
        font-size: 5.4vw;
        letter-spacing: .14em;
    }
    .hero-sub {
        font-size: 3vw;
        letter-spacing: .18em;
        line-height: 1.7;
        max-width: 92vw;
    }
    .cta {
        margin-top: 40px;
        padding: 13px 8vw;
        font-size: 3.4vw;
    }

    /* Fenris line: one small line pinned at the bottom. */
    .hub-foot { padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); }
    .hub-foot p {
        font-size: .42em;
        letter-spacing: .06em;
        opacity: .4;
        white-space: nowrap;
    }
}