/* ============================================================================
   Abyss Floors — web portal styles.
   Dark-fantasy identity matched to the game client's design tokens (AbyssTokens):
   ember-gold primary, teal secondary, violet-black ground. The /Account flow uses
   the two-column "descent" shell (AuthLayout + the .auth-* system below); the rest
   of the portal (Home / Play / Manage, via MainLayout) shares the same palette
   through the .portal-* chrome.
   ============================================================================ */

:root {
    /* ground + panels */
    --bg: #131219;
    --bg-2: #0D0C12;
    --panel: #191820;
    --panel-2: #211F2A;
    --field: #14131A;

    /* text */
    --ink: #ECEAF2;
    --muted: #9A96A8;          /* violet-biased grey — chosen, not a default mid-grey */

    /* brand accents (from AbyssTokens) */
    --accent: #E0A14B;         /* ember gold — primary */
    --accent-bright: #F2C879;
    --accent-deep: #A8762F;
    --accent-2: #43C9C2;       /* teal — secondary */
    --ember-wash: rgba(224, 161, 75, 0.12);

    /* semantics */
    --ok: #5FB86A;
    --err: #E0605A;

    /* lines */
    --line: rgba(224, 161, 75, 0.16);
    --line-soft: rgba(236, 234, 242, 0.08);
    --shadow: rgba(0, 0, 0, 0.55);

    /* the abyss shaft — always dark */
    --shaft-top: #1B1926;
    --shaft-bottom: #07060B;
    --shaft-muted: #8E8A9E;

    --radius: 14px;
    --ease: cubic-bezier(.22, .61, .36, 1);
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ============================ Shared portal chrome (MainLayout pages) ======== */

.portal-shell {
    max-width: 860px;
    margin: 0 auto;
    padding: 1rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.portal-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.portal-brand {
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
}

.portal-nav-links {
    display: flex;
    gap: 1.1rem;
    align-items: center;
}

.portal-nav-links a { color: var(--ink); text-decoration: none; }
.portal-nav-links a:hover { color: var(--accent); }
.portal-nav-user { color: var(--muted); font-size: 0.9rem; }

/* CSS-only burger: hidden control + burger glyph. Desktop shows the flat link row;
   Terms/Privacy stay in the footer (hidden here) until the mobile menu is opened. */
.portal-nav-checkbox { display: none; }
.portal-burger {
    display: none;
    cursor: pointer; user-select: none;
    font-size: 1.4rem; line-height: 1;
    color: var(--ink); padding: 2px 6px;
}
.portal-nav-legal { display: none; }

@media (max-width: 640px) {
    .portal-nav { flex-wrap: wrap; }
    .portal-burger { display: block; }
    .portal-nav-links {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
        padding: 0.7rem 0 0.2rem;
    }
    .portal-nav-checkbox:checked ~ .portal-nav-links { display: flex; }
    .portal-nav-user { overflow-wrap: anywhere; max-width: 100%; }
    .portal-nav-legal { display: block; }
}

.portal-main { flex: 1; padding: 1.75rem 0; }

.portal-footer {
    padding: 1.1rem 0;
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    border-top: 1px solid var(--line-soft);
}

.portal-card {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1.1rem 1.35rem;
    margin: 1rem 0;
}

.portal-note { color: var(--muted); font-size: 0.9rem; }
/* teal link colour for real links only — NOT the .portal-cta buttons (which set their own dark/ink text on the fill) */
.portal-note a, .portal-main a:not(.portal-cta) { color: var(--accent-2); }

.portal-inline-form { display: inline; }

.portal-link-button {
    background: none; border: none; color: var(--accent-2);
    cursor: pointer; padding: 0; font: inherit; text-decoration: underline;
}

/* ---- form controls (shared by /Account forms AND Manage) ------------------- */

.portal-field {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.portal-field label {
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.portal-field input {
    padding: 0.72rem 0.85rem;
    background: var(--field);
    border: 1px solid var(--line-soft);
    color: var(--ink);
    border-radius: 10px;
    font-size: 0.95rem;
    transition: border-color .18s, box-shadow .18s;
}

.portal-field input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }

.portal-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ember-wash);
}

.portal-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    background: linear-gradient(180deg, var(--accent-bright), var(--accent));
    color: #1a140a;
    border: 1px solid transparent;
    border-radius: 11px;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    box-shadow: 0 14px 30px -14px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .12s var(--ease), filter .2s;
}

.portal-cta:hover { transform: translateY(-1px); filter: brightness(1.04); }
.portal-cta:active { transform: translateY(0); }

.portal-cta-secondary {
    background: var(--field);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: none;
}

.portal-cta-secondary:hover { border-color: var(--accent); color: var(--accent); filter: none; }

.portal-cta-row { display: flex; gap: 0.75rem; }

/* ---- status + validation -------------------------------------------------- */

.portal-status {
    padding: 0.7rem 0.95rem;
    border-radius: 10px;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.portal-status-ok { background: rgba(95, 184, 106, 0.14); border: 1px solid rgba(95, 184, 106, 0.5); color: #bfe9c6; }
.portal-status-error { background: rgba(224, 96, 90, 0.14); border: 1px solid rgba(224, 96, 90, 0.5); color: #f2b7b3; }

.validation-message { color: var(--err); font-size: 0.82rem; }

/* ============================================================================
   The /Account descent shell (AuthLayout)
   ============================================================================ */

.auth-stage {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
}

/* ---- LEFT: the abyss / descent -------------------------------------------- */

.auth-abyss {
    position: relative;
    overflow: hidden;
    color: var(--ink);
    padding: clamp(28px, 4.4vw, 64px);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
    background:
        radial-gradient(120% 90% at 30% 6%, rgba(224, 161, 75, 0.10), transparent 60%),
        linear-gradient(180deg, var(--shaft-top), var(--shaft-bottom) 92%);
}

/* faint vertical shaft rules + a slow rising ember shimmer (CSS-only, no JS) */
.auth-abyss::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent 0 11%, rgba(255,255,255,.03) 11% 11.15%, transparent 11.15% 89%, rgba(255,255,255,.03) 89% 89.15%, transparent 89.15%);
    -webkit-mask: linear-gradient(180deg, #000, transparent 96%);
    mask: linear-gradient(180deg, #000, transparent 96%);
}

.auth-abyss::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
    background: radial-gradient(60% 40% at 50% 100%, rgba(224, 161, 75, 0.14), transparent 70%);
    animation: abyssGlow 7s ease-in-out infinite alternate;
}

@keyframes abyssGlow { from { opacity: .5; } to { opacity: 1; } }

.auth-abyss__inner { position: relative; display: flex; flex-direction: column; flex: 1; }

.auth-brand { display: flex; align-items: center; gap: 14px; }

.auth-sigil {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1px solid var(--accent); border-radius: 11px; color: var(--accent);
    font-family: Georgia, serif; font-weight: 700; font-size: 1.25rem;
    box-shadow: 0 0 22px -6px var(--accent), inset 0 0 14px -8px var(--accent);
}

.auth-wordmark {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    /* engraved metallic gold */
    background: linear-gradient(180deg, #F7E6BE 0%, var(--accent) 55%, var(--accent-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-tagline {
    margin: 26px 0 0;
    font-size: 0.8rem; letter-spacing: 0.34em; text-transform: uppercase;
    color: var(--accent); font-weight: 600;
}

.auth-lede {
    margin: 12px 0 0;
    max-width: 36ch;
    color: var(--shaft-muted);
    font-size: 1.02rem; line-height: 1.62;
}

.auth-depths {
    list-style: none;
    position: relative;
    margin: auto 0 0; padding: 26px 0 0;
    display: flex; flex-direction: column; gap: 2px;
}

.auth-depths::before {
    content: "THE DESCENT";
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.64rem; letter-spacing: 0.34em;
    color: var(--shaft-muted); opacity: .7;
    margin-bottom: 10px;
}

/* the spine threading the descent — sits BEHIND the floor nodes so each opaque
   circle masks the line inside it and the connector shows only between nodes */
.auth-depths::after {
    content: ""; position: absolute; left: 8px; top: 44px; bottom: 10px; width: 1px; z-index: 0;
    background: linear-gradient(180deg, var(--accent-deep), transparent 92%);
}

.auth-floor {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
    padding: 8px 12px 8px 26px; border-radius: 9px;
    color: var(--shaft-muted); border: 1px solid transparent;
}

/* the node on the spine at each floor; the current floor's node glows */
.auth-floor::before {
    content: ""; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--shaft-bottom); border: 1px solid var(--shaft-muted);
}
.auth-floor.is-current::before {
    background: var(--accent); border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}

.auth-floor .code { font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.06em; opacity: .75; }
.auth-floor .name { font-size: 0.95rem; }
.auth-floor .depth { font-family: ui-monospace, Consolas, monospace; font-size: 0.74rem; font-variant-numeric: tabular-nums; opacity: .7; }

.auth-floor.is-current {
    color: var(--ink);
    background: var(--ember-wash);
    border-color: var(--line);
    box-shadow: inset 2px 0 0 var(--accent);
}
.auth-floor.is-current .code, .auth-floor.is-current .depth { color: var(--accent); opacity: 1; }

.auth-floor.d1 { opacity: .84; }
.auth-floor.d2 { opacity: .60; }
.auth-floor.d3 { opacity: .38; }

.auth-features {
    list-style: none;
    margin: 26px 0 0; padding: 20px 0 0;
    border-top: 1px solid var(--line-soft);
    display: flex; flex-wrap: wrap; gap: 8px;
}

.auth-features li {
    font-size: 0.76rem; color: var(--shaft-muted);
    padding: 6px 12px; border: 1px solid var(--line-soft); border-radius: 999px;
}
.auth-features li b { color: var(--ink); font-weight: 600; }

/* ---- RIGHT: the gate (form card) ------------------------------------------ */

.auth-gate {
    position: relative;
    background: var(--bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px;
    padding: clamp(28px, 4vw, 56px) clamp(20px, 3.5vw, 52px);
}

/* a soft vignette so the card sits in a pool of light */
.auth-gate::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(130% 90% at 50% -8%, transparent 55%, rgba(0, 0, 0, 0.22));
}

.auth-status {
    position: absolute; top: 22px; left: 0; right: 0; margin: auto; width: max-content;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.auth-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }

.auth-card {
    position: relative;
    width: 100%; max-width: 412px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: 0 30px 60px -30px var(--shadow);
}

/* a thin gold crown accent along the card's top edge */
.auth-card::before {
    content: ""; position: absolute; top: -1px; left: 26px; right: 26px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.55;
}

.auth-switch {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
    padding: 4px; margin-bottom: 22px;
    background: var(--field); border: 1px solid var(--line-soft); border-radius: 11px;
}

.auth-tab {
    display: flex; align-items: center; justify-content: center; min-height: 100%;
    text-align: center; text-decoration: none;
    padding: 9px 6px; border-radius: 8px;
    color: var(--muted); font-size: 0.82rem; font-weight: 600;
    transition: color .2s, background .2s;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.is-active {
    color: #1a140a;
    background: linear-gradient(180deg, var(--accent-bright), var(--accent));
    box-shadow: 0 6px 16px -8px var(--accent);
}

/* the page body rendered inside the card */
.auth-body h1 {
    margin: 0;
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-weight: 400; font-size: 1.6rem; letter-spacing: 0.01em;
    text-wrap: balance;
}

/* auth forms get full-width CTAs; non-auth pages (Home/Play/Manage) keep inline buttons */
.auth-body .portal-cta { width: 100%; }
.auth-body .portal-field:last-of-type { margin-bottom: 1.25rem; }

.auth-body > p { color: var(--muted); font-size: 0.92rem; margin: 6px 0 20px; }
.auth-body a { color: var(--accent-2); text-decoration: none; }
.auth-body a:hover { text-decoration: underline; }
.auth-body ul { color: var(--muted); font-size: 0.92rem; padding-left: 1.1rem; }
.auth-body strong { color: var(--ink); font-weight: 600; }
.auth-body ol.auth-steps { color: var(--muted); font-size: 0.92rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 1.25rem; }
.auth-body ol.auth-steps li::marker { color: var(--accent); font-weight: 700; }

/* pre-release opt-in checkboxes (Register) */
.auth-optins { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 20px; }
.auth-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; }
.auth-check input[type="checkbox"] { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--accent); }
.auth-check span { display: flex; flex-direction: column; gap: 2px; }
.auth-check strong { color: var(--ink); font-weight: 600; font-size: 0.9rem; }
.auth-check small { color: var(--muted); font-size: 0.8rem; line-height: 1.4; }

/* the "Sign in with Steam" block */
.portal-external { margin-top: 4px; }
.portal-external > p, .auth-or {
    display: flex; align-items: center; gap: 14px;
    margin: 16px 0; color: var(--muted);
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.portal-external > p::before, .portal-external > p::after,
.auth-or::before, .auth-or::after { content: ""; height: 1px; flex: 1; background: var(--line-soft); }

/* a tidy footer link row + line */
.auth-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 18px; font-size: 0.86rem; }
.auth-foot { text-align: center; color: var(--muted); font-size: 0.88rem; margin: 16px 0 0; }
.auth-foot a { color: var(--accent); font-weight: 600; }

.auth-legal { max-width: 412px; text-align: center; color: var(--muted); font-size: 0.76rem; line-height: 1.5; margin: 0; }
.auth-legal a { color: var(--muted); text-decoration: underline; }

/* ---- focus + motion ------------------------------------------------------- */

:where(a, button, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---- responsive: stack the descent above the form ------------------------- */

@media (max-width: 900px) {
    .auth-stage { grid-template-columns: 1fr; }
    .auth-abyss { border-right: none; border-bottom: 1px solid var(--line); }
    .auth-abyss__inner { flex: none; }
    .auth-depths { margin-top: 0; }
    .auth-status { position: static; margin: 4px auto -4px; }
}

/* ============================================================================
   Signed-in / landing portal (MainLayout: Home / Play / Manage)
   ============================================================================ */

body {
    background: radial-gradient(120% 70% at 50% -12%, rgba(224, 161, 75, 0.06), transparent 55%), var(--bg);
    background-attachment: fixed;
}

.portal-shell { max-width: 940px; }

.portal-brand {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: 1.05rem; letter-spacing: 0.16em;
}

.portal-main h1 {
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.1rem);
    letter-spacing: 0.01em; margin: 0.2rem 0 0.6rem; text-wrap: balance;
}
.portal-main h2 {
    font-family: Georgia, "Iowan Old Style", serif; font-weight: 400;
    font-size: 1.12rem; margin: 0 0 0.5rem; color: var(--ink);
}
.portal-main > p, .portal-card > p { color: var(--muted); }

.portal-card h2 { padding-bottom: 0.5rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--line-soft); }
.portal-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; color: var(--muted); }
.portal-card strong { color: var(--accent); font-weight: 600; }

/* ---- Home: the landing hero ---- */
.portal-hero {
    max-width: 660px; margin: clamp(2rem, 6vh, 4.5rem) auto;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0;
}
.hero-crest {
    width: 64px; height: 64px; display: grid; place-items: center; color: var(--accent);
    border: 1px solid var(--line); border-radius: 16px; margin-bottom: 22px;
    box-shadow: 0 0 40px -14px var(--accent), inset 0 0 20px -12px var(--accent);
    background: radial-gradient(120% 120% at 50% 0%, var(--ember-wash), transparent 70%);
}
.portal-hero h1 {
    font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: 0.14em; text-transform: uppercase; margin: 0;
    background: linear-gradient(180deg, #F7E6BE 0%, var(--accent) 55%, var(--accent-deep) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-tag { margin: 14px 0 0; font-size: 0.82rem; letter-spacing: 0.36em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.hero-lede { margin: 16px 0 0; max-width: 46ch; color: var(--muted); font-size: 1.06rem; line-height: 1.6; }
.portal-hero .portal-cta-row { justify-content: center; margin-top: 1.6rem; }
.hero-features { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2rem 0 0; padding: 0; }
.hero-features li { font-size: 0.78rem; color: var(--muted); padding: 7px 14px; border: 1px solid var(--line-soft); border-radius: 999px; }
.hero-features li b { color: var(--ink); font-weight: 600; }

/* ---- Play: the launch gateway ---- */
.portal-launch {
    max-width: 480px; margin: clamp(2rem, 6vh, 4rem) auto; text-align: center;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 2.2rem 2rem; box-shadow: 0 30px 60px -30px var(--shadow);
}
.portal-launch h1 { margin-top: 0; }
.portal-launch form { margin: 1.3rem 0 0; }
.portal-launch .portal-cta { min-width: 220px; }
.portal-launch .portal-note { margin-top: 1rem; }

/* ---- legal documents (Terms / Privacy) ---- */
.legal-doc { max-width: 72ch; margin: 0.5rem auto 3rem; }
.legal-head { border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.legal-doc h1 { margin: 0 0 0.4rem; }
.legal-meta { color: var(--muted); font-size: 0.82rem; margin: 0; font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.02em; }
.legal-doc h2 {
    font-family: Georgia, "Iowan Old Style", serif; font-weight: 400; font-size: 1.18rem; color: var(--ink);
    margin: 2rem 0 0.5rem;
}
.legal-doc p, .legal-doc li { color: var(--muted); line-height: 1.7; }
.legal-doc ul { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; margin: 0.5rem 0; }
.legal-doc a { color: var(--accent-2); }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 1.25rem 0 0; font-size: 0.88rem; }
.legal-toc a { color: var(--accent-2); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

.portal-footer { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; align-items: center; }
.portal-footer-links a { color: var(--muted); text-decoration: none; }
.portal-footer-links a:hover { color: var(--accent); }

/* ---- admin: sign-up requests ---- */
.admin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0 1.5rem; }
.admin-chip { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.85rem; }
.admin-chip b { color: var(--accent); font-weight: 700; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.9rem; }
.admin-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); }
.admin-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-export { display: block; margin-top: 1rem; color: var(--muted); font-size: 0.8rem; }
.admin-export textarea { display: block; width: 100%; margin-top: 0.4rem; background: var(--field); border: 1px solid var(--line-soft); border-radius: 8px; color: var(--ink); font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem; padding: 0.6rem; resize: vertical; }
.admin-approve { appearance: none; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: 600 0.78rem/1 system-ui, sans-serif; padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: background .18s, color .18s; }
.admin-approve:hover { background: var(--accent); color: #1a140a; }
.admin-badge { color: var(--ok); font-size: 0.82rem; font-weight: 600; }

/* ============================================================================
   Alerot STUDIO front (Home + /games/*) — "Living Systems" direction.
   The identity is grounded in what the studio makes: systems that keep running
   whether or not you're watching. The hero is a live counter (studio-live.js)
   that never stops; ornament is stripped (no mono micro-labels, no numbered
   section counts, no hairline-rule headers, no grid texture). Display is a
   tight sans; monospace appears ONLY on live numbers, where it's honest. The
   three game accents carry the colour. Everything scoped under .studio.
   ============================================================================ */
.studio {
    /* raw palette */
    --ink:#0E1014; --panel:#161A22; --line:#262C38; --mist:#8A93A6; --ivory:#ECE7DA; --brass:#C8A24A;
    --factory:#43B7A4; --entropy:#C664A6; --abyss:#D0473A;

    /* semantic tokens — default = dark */
    --bg:var(--ink); --surface:var(--panel); --border:var(--line);
    --text:var(--ivory); --muted:var(--mist); --accent:var(--brass);
    --glow:rgba(200,162,74,.10);

    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"Cascadia Code","SF Mono","Segoe UI Mono",Menlo,Consolas,monospace;
    --maxw:1120px; --radius:6px;

    position:relative; min-height:100vh; display:flex; flex-direction:column;
    background:var(--bg); color:var(--text);
    font-family:var(--sans); font-size:1.0625rem; line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme: light) {
    .studio:not(.theme-dark) {
        --bg:#F4F1E9; --surface:#FBFAF5; --border:#E0DACB;
        --text:#181A1E; --muted:#5C6270; --accent:#8A6A17; --glow:rgba(138,106,23,.10);
    }
}
.studio.theme-light {
    --bg:#F4F1E9; --surface:#FBFAF5; --border:#E0DACB;
    --text:#181A1E; --muted:#5C6270; --accent:#8A6A17; --glow:rgba(138,106,23,.10);
}

.studio *, .studio *::before, .studio *::after { box-sizing:border-box; }
.studio a { color:inherit; text-decoration:none; }
.studio .wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,44px); }
.studio :focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.studio .studio-main { flex:1; }
.studio section { padding:clamp(44px,8vh,88px) 0; }
.studio .sec-title { font-size:clamp(1.15rem,2.6vw,1.5rem); font-weight:700; letter-spacing:-.01em; margin:0 0 28px; color:var(--text); }
/* Per-game accent as CLASSES (not inline style="--c:…"): the strict portal CSP is style-src 'self' with no
   'unsafe-inline', so inline style attributes are blocked — a class is the only way to set --c per game. */
.studio .accent-factory { --c:var(--factory); }
.studio .accent-entropy { --c:var(--entropy); }
.studio .accent-abyss { --c:var(--abyss); }

/* ---------- top bar ---------- */
.studio .topbar { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); border-bottom:1px solid var(--border); }
.studio .topbar .wrap { display:flex; align-items:center; justify-content:space-between; min-height:62px; gap:16px; }
.studio .mark { font-weight:800; letter-spacing:.02em; font-size:1.15rem; color:var(--text); }
.studio .mark .dot { color:var(--accent); }
.studio .topnav { display:flex; align-items:center; gap:22px; }
.studio .topnav a { font-size:.95rem; color:var(--muted); transition:color .16s ease; }
.studio .topnav a:hover { color:var(--text); }
.studio .theme-btn { font:inherit; font-size:.9rem; color:var(--muted); background:transparent; border:1px solid var(--border); border-radius:999px; padding:6px 13px; cursor:pointer; transition:color .16s ease, border-color .16s ease; }
.studio .theme-btn:hover { color:var(--text); border-color:var(--accent); }

/* ---------- hero: the living counter ---------- */
.studio .lead-hero { padding:clamp(64px,13vh,132px) 0 clamp(36px,6vh,64px); position:relative; }
/* The hero tints to the per-load game accent (--c set by the .accent-* class on .lead-hero), falling back to the
   studio brass when no game class is present. */
.studio .lead-hero::before { content:""; position:absolute; inset:-10% -20% 30% 30%; z-index:0; background:radial-gradient(60% 60% at 70% 20%, color-mix(in srgb, var(--c, var(--accent)) 13%, transparent), transparent 70%); pointer-events:none; }
.studio .lead-hero .wrap { position:relative; z-index:1; max-width:960px; }
.studio .wordmark { font-weight:800; letter-spacing:-.02em; font-size:clamp(3.4rem,13vw,7.5rem); line-height:.92; margin:0; color:var(--text); }
.studio .wordmark .glyph { color:var(--c, var(--accent)); }

.studio .live { margin:34px 0 0; display:flex; flex-direction:column; gap:8px; }
.studio .live-num { font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; font-size:clamp(1.9rem,6vw,3.4rem); line-height:1; letter-spacing:-.01em; color:var(--text); }
.studio .live-num .caret { color:var(--c, var(--accent)); }
.studio .live-cap { font-size:.98rem; color:var(--muted); }
.studio .live-cap b { color:var(--c, var(--accent)); font-weight:600; }
.studio .live-sub { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.86rem; color:var(--muted); min-height:1.2em; }
.studio .live-link { align-self:flex-start; margin-top:4px; font-size:.9rem; font-weight:600; color:var(--c, var(--accent)); }
.studio .live-link:hover { text-decoration:underline; text-underline-offset:3px; }
.studio .tickstream { height:22px; margin:26px 0 0; border-radius:3px; background:repeating-linear-gradient(90deg, var(--muted) 0 1px, transparent 1px 13px); opacity:.32; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); animation:studio-drift 5.5s linear infinite; }
@keyframes studio-drift { from { background-position-x:0; } to { background-position-x:-13px; } }

.studio .hero-copy { margin:30px 0 0; max-width:56ch; font-size:1.12rem; line-height:1.62; color:var(--text); }
.studio .hero-copy .muted { color:var(--muted); }

/* ---------- games ---------- */
.studio .games { display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); }
.studio .card { --c:var(--accent); position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; color:inherit; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.studio a.card:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--c) 55%, var(--border)); box-shadow:0 20px 44px -26px color-mix(in srgb, var(--c) 75%, transparent); }
.studio .card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--c); z-index:3; }
.studio .capsule { position:relative; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--border); }
.studio .capsule svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
/* Theme-adaptive capsule art: art uses currentColor (= accent --c); background gradient stops are CSS-driven
   so the header pictures flip with the theme — tinted-dark in dark mode, warm-paper tint in light mode. */
.studio .capsule { color:var(--c); }
.studio .capsule .cap-a { stop-color:color-mix(in srgb, var(--c) 16%, var(--bg)); }
.studio .capsule .cap-b { stop-color:color-mix(in srgb, var(--c) 4%, var(--bg)); }
.studio .capsule .cap-hi { color:color-mix(in srgb, var(--c) 55%, var(--text)); }
.studio .cap-tag { position:absolute; left:13px; bottom:11px; z-index:2; font-size:.82rem; color:var(--text); background:color-mix(in srgb, var(--bg) 74%, transparent); border:1px solid var(--border); padding:3px 10px; border-radius:999px; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.studio .cap-status { position:absolute; right:13px; top:13px; z-index:2; font-size:.8rem; font-weight:600; color:var(--c); }
.studio .card-body { padding:20px 22px 22px; display:flex; flex-direction:column; gap:11px; flex:1; }
.studio .card h3 { font-weight:700; font-size:1.4rem; line-height:1.1; margin:0; letter-spacing:-.01em; color:var(--text); }
.studio .tags { font-size:.9rem; color:var(--muted); margin:-3px 0 0; }
.studio .pitch { margin:0; color:var(--muted); font-size:.98rem; line-height:1.6; }
.studio .pitch strong { color:var(--text); font-weight:600; }
.studio .card-foot { margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.studio .card-foot .avail { font-size:.88rem; color:var(--muted); }
.studio .card-foot .more { font-size:.95rem; font-weight:600; color:var(--c); }
.studio a.card:hover .more { text-decoration:underline; text-underline-offset:3px; }

/* ---------- CTA button (detail pages) ---------- */
.studio .cta { font-size:.98rem; font-weight:650; color:var(--bg); background:var(--c); padding:12px 20px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:9px; border:1px solid transparent; transition:transform .16s ease, filter .16s ease; }
.studio a.cta:hover { filter:brightness(1.07); transform:translateY(-1px); }
.studio .cta svg { width:14px; height:14px; }
.studio .cta.ghost { color:var(--text); background:transparent; border-color:var(--border); }
.studio a.cta.ghost:hover { border-color:var(--accent); filter:none; }

/* ---------- game detail page ---------- */
.studio .gdetail { --c:var(--accent); }
.studio .gdetail .wrap { max-width:900px; }
.studio .gback { display:inline-flex; align-items:center; gap:7px; font-size:.95rem; color:var(--muted); margin-bottom:26px; }
.studio .gback:hover { color:var(--text); }
.studio .gdetail .capsule { aspect-ratio:21/9; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:30px; }
.studio .gdetail h1 { font-weight:800; font-size:clamp(2.1rem,5.6vw,3.1rem); line-height:1.02; letter-spacing:-.02em; margin:0; color:var(--text); }
.studio .gdetail .genre { font-size:1rem; color:var(--c); font-weight:600; margin:12px 0 0; }
.studio .gdetail .desc { margin:22px 0 0; max-width:66ch; }
.studio .gdetail .desc p { margin:0 0 1.05em; color:var(--text); font-size:1.08rem; line-height:1.7; }
.studio .gdetail .desc p:last-child { margin-bottom:0; }
.studio .gdetail .desc em { color:var(--c); font-style:normal; font-weight:600; }
.studio .soon-badge { display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color:var(--abyss); border:1px solid color-mix(in srgb, var(--abyss) 55%, var(--border)); background:color-mix(in srgb, var(--abyss) 10%, transparent); border-radius:999px; padding:5px 14px; margin:16px 0 0; }
.studio .soon-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--abyss); }
.studio .facts { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none; }
.studio .facts li { font-size:.9rem; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:5px 13px; }
.studio .gcta { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0; }

/* ---------- "watch a fight" combat demo (combat-demo.js) ----------
   A fixed-dark game "screen" (reads as an embedded viewport in either studio theme). Bar widths + log lines are
   driven by JS via CSSOM property setters (CSP-safe); colours mirror the real combat view. */
.studio .combat-demo {
    --cd-green:#5FB86A; --cd-greenb:#8DE6A6; --cd-red:#E0605A; --cd-gold:#E6B45C; --cd-teal:#43C9C2; --cd-loot:#8FB8E8;
    --cd-ink:#100F17; --cd-panel:#171622; --cd-line:rgba(255,255,255,.09); --cd-dim:#8C8798; --cd-fg:#E8E6F0;
    margin:26px 0 0; border:1px solid var(--cd-line); border-radius:var(--radius); overflow:hidden; background:var(--cd-ink); color:var(--cd-fg);
}
.studio .cd-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; border-bottom:1px solid var(--cd-line); background:var(--cd-panel); }
.studio .cd-title { font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cd-gold); display:inline-flex; align-items:center; gap:9px; }
.studio .cd-title::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--cd-red); box-shadow:0 0 7px var(--cd-red); }
.studio .cd-zone { font-family:var(--mono); font-size:.74rem; color:var(--cd-dim); }
.studio .cd-bars { padding:14px 16px 6px; display:flex; flex-direction:column; gap:11px; }
.studio .cd-bar-label { display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:.73rem; color:var(--cd-dim); margin-bottom:4px; }
.studio .cd-bar-label .nm { color:var(--cd-fg); }
.studio .cd-track { height:9px; border-radius:5px; background:rgba(255,255,255,.06); overflow:hidden; }
.studio .cd-fill { height:100%; width:100%; border-radius:5px; }
.studio .cd-fill-enemy { background:linear-gradient(90deg,#B23A34,#E0605A); transition:width .18s linear; }
.studio .cd-fill-player { background:linear-gradient(90deg,#3E8F49,#5FB86A); transition:width .18s linear; }
.studio .cd-swing .cd-track { height:6px; }
.studio .cd-fill-swing { width:0; background:linear-gradient(90deg,#B07A2A,#E6B45C); }
.studio .cd-swing.is-respawn .cd-fill-swing { background:linear-gradient(90deg,#2E8F8A,#43C9C2); }
.studio .cd-log { list-style:none; margin:0; padding:12px 16px 16px; font-family:var(--mono); font-size:.82rem; line-height:1.7; min-height:11.9em; }
.studio .cd-line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.studio .cd-hit { color:var(--cd-green); }
.studio .cd-crit { color:var(--cd-greenb); font-weight:700; }
.studio .cd-ehit { color:var(--cd-red); }
.studio .cd-kill { color:var(--cd-greenb); }
.studio .cd-reward { color:var(--cd-gold); }
.studio .cd-loot { color:var(--cd-loot); }
.studio .cd-level { color:var(--cd-gold); font-weight:700; letter-spacing:.03em; }
.studio .cd-respawn { color:var(--cd-teal); }
@media (prefers-reduced-motion: reduce) { .studio .cd-fill-enemy, .studio .cd-fill-player { transition:none; } }

/* ---------- studio / about ---------- */
.studio .about .wrap { max-width:820px; }
.studio .about p { font-size:clamp(1.15rem,2.4vw,1.4rem); line-height:1.55; margin:0; color:var(--text); }
.studio .about p .k { color:var(--accent); font-weight:600; }
.studio .focus-list { margin:30px 0 0; padding:0; list-style:none; display:grid; gap:0; }
.studio .focus-list li { display:flex; gap:18px; padding:16px 0; border-top:1px solid var(--border); }
.studio .focus-list li:last-child { border-bottom:1px solid var(--border); }
.studio .focus-list .ft { flex:0 0 8.5rem; font-weight:600; color:var(--text); }
.studio .focus-list .fd { color:var(--muted); }

/* ---------- footer ---------- */
.studio footer { border-top:1px solid var(--border); padding:52px 0 44px; margin-top:24px; }
.studio footer .wrap { display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between; align-items:flex-start; }
.studio .fmark { font-weight:800; letter-spacing:.02em; font-size:1.05rem; color:var(--text); }
.studio .fmark .dot { color:var(--accent); }
.studio .tag { color:var(--muted); font-size:.98rem; margin:10px 0 0; max-width:34ch; }
.studio .flinks { display:flex; flex-direction:column; gap:9px; }
.studio .flinks .lab { font-size:.82rem; color:var(--muted); margin-bottom:2px; }
.studio .flinks a { color:var(--text); font-size:.98rem; transition:color .16s ease; }
.studio .flinks a:hover { color:var(--accent); }
.studio .legal { margin-top:38px; padding-top:20px; border-top:1px solid var(--border); font-size:.85rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; }

@media (max-width:560px) { .studio .topnav { gap:14px; } .studio .topnav .nav-link { display:none; } }
@media (prefers-reduced-motion: reduce) { .studio *, .studio *::before { animation:none !important; transition:none !important; } }