/* ============================================================
   AUTH GATE — the front desk of the factory
   ------------------------------------------------------------
   Direction: the sign-in panel is a print bed. The wordmark is
   additively manufactured on load (layer bands rise, a nozzle
   line sweeps once), the auth card sits on a plate with heated-
   bed glow at its base, and every label is set in the machine's
   own mono voice. Palette and type come from the game's design
   system in reset.css so the landing page and the workshop read
   as one product; the layer build is where the boldness goes.
   ============================================================ */

.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    background: var(--bg-0);
    /* Blueprint grid, same texture as the workshop floor */
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center top;
    /* The grid stays put while the page scrolls. Without this it slides past the
       fixed bloom below and the two backdrops visibly disagree. */
    background-attachment: fixed;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

/**
 * Warm bloom over the grid, as if the bed were on.
 *
 * `fixed`, not `absolute`: an absolute layer inside a scroll container is only
 * as tall as one screenful and scrolls away with the content, which left the
 * raw blueprint grid exposed below the fold and drew a hard seam across the
 * page. Fixed keeps one backdrop behind however far the player scrolls.
 */
.auth-gate::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 50% at 50% 0%, rgba(255, 158, 44, 0.16), transparent 72%),
        radial-gradient(70% 55% at 88% 82%, rgba(98, 168, 229, 0.06), transparent 70%),
        linear-gradient(180deg, rgba(16, 16, 19, 0.55), rgba(16, 16, 19, 0.88));
}

.auth-gate.gate-closing {
    animation: gateExit 420ms ease forwards;
}

@keyframes gateExit {
    to { opacity: 0; visibility: hidden; }
}

/* While the gate is up, nothing of the game shows through */
body.auth-pending #game-app,
body.auth-pending #splash {
    visibility: hidden;
}

/* Text needs to be selectable here even though the game disables it */
.auth-gate,
.auth-gate input,
.auth-gate p,
.auth-gate label {
    user-select: text;
}

/* ---------- Top bar ---------- */

.auth-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    /* Full-bleed on purpose: the crest holds the left edge, the controls hold
       the right, and the empty middle is what makes both ends read as anchors
       rather than as one crowded cluster. */
    padding: 18px clamp(16px, 4vw, 40px);
    border-bottom: 1px solid var(--line);
    background: rgba(16, 16, 19, 0.72);
    backdrop-filter: blur(6px);
}

/* The crest already reads as the name, so the bar needs no text beside it */
.auth-mark {
    display: flex;
    align-items: center;
}

.auth-mark img {
    height: 42px;
    width: auto;
    image-rendering: pixelated;
}

/* The bar's right side is three separate things — where you can go, what
   language you read in, what you can do here. They need room between them or
   they read as one long run of small caps. */
.auth-bar-right {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 30px);
}

.auth-langswitch {
    display: flex;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    overflow: hidden;
}

.auth-langswitch button {
    padding: 5px 11px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    background: transparent;
    transition: color 140ms ease, background 140ms ease;
}

.auth-langswitch button:hover { color: var(--text-1); }

.auth-langswitch button[aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-ink);
}

.auth-barlinks {
    display: flex;
    align-items: center;
    /* Three uppercase mono labels 16px apart are one string with gaps in it.
       Wide enough spacing is what makes them read as three separate links. */
    gap: clamp(18px, 2.2vw, 34px);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.auth-barlinks a {
    position: relative;
    padding: 6px 0;
    color: var(--text-3);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 140ms ease, border-color 140ms ease;
}

/*
 * A hairline dot between links. Small enough to be punctuation rather than
 * decoration, and it does the work a wider gap alone cannot: it says the
 * labels are a list, not a sentence.
 */
.auth-barlinks a + a::before {
    content: '';
    position: absolute;
    left: calc(clamp(18px, 2.2vw, 34px) / -2 - 1.5px);
    top: 50%;
    width: 3px;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 50%;
    background: var(--line-strong);
}

/* The current page is stated, not just available */
.auth-barlinks a[aria-current="page"] {
    color: var(--text-1);
    border-bottom-color: var(--accent);
}

.auth-barlinks a:hover {
    color: var(--text-1);
    border-bottom-color: var(--accent);
}

/* Marks the boundary between the bar's info links, its language switch, and
   its one live action — without one, all three read as a single loose row. */
.auth-bar-divider {
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
}

/* Sign in / Register live in the bar on the home page; a single Back replaces
   them once the player is inside a form. */
.auth-bar-actions {
    display: flex;
    gap: var(--sp-3);
}

.auth-bar-btn {
    padding: 7px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.auth-bar-btn:hover {
    border-color: var(--accent-dim);
    background: var(--bg-2);
}

.auth-bar-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.auth-bar-btn-primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--accent-ink);
}

/* ---------- Small-screen navigation ----------
   The hamburger and its panel exist in the markup on every screen and are
   revealed by the breakpoint at the bottom of this file. Keeping them out of
   the media query means the panel's own look is described once, in one place,
   instead of being assembled out of overrides. */

.auth-burger {
    display: none;
    width: 46px;
    height: 46px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: rgba(29, 29, 33, 0.9);
    color: var(--text-1);
    transition: border-color 140ms ease, background 140ms ease;
    -webkit-tap-highlight-color: transparent;
}

.auth-burger:hover,
.auth-burger[aria-expanded="true"] {
    border-color: var(--accent-dim);
    background: var(--bg-2);
}

.auth-burger-bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 20px;
    height: 16px;
}

.auth-burger-bars i {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 1px;
    transition: transform 200ms ease, opacity 140ms ease;
}

/* Bars fold into a cross while the panel is open, so the one button reads as
   both "open menu" and "close menu". */
.auth-burger[aria-expanded="true"] .auth-burger-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.auth-burger[aria-expanded="true"] .auth-burger-bars i:nth-child(2) { opacity: 0; }
.auth-burger[aria-expanded="true"] .auth-burger-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.auth-menu {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: none;
    pointer-events: none;
    /* Clips the panel while it is parked off-screen to the right. Without it
       the closed panel still counts towards scroll width, which is how an
       invisible horizontal scrollbar appears on a page that fits perfectly. */
    overflow: hidden;
}

.auth-menu.open {
    pointer-events: auto;
}

.auth-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 10, 0.66);
    opacity: 0;
    transition: opacity 220ms ease;
}

.auth-menu.open .auth-menu-backdrop {
    opacity: 1;
}

.auth-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
    border-left: 1px solid var(--line-strong);
    box-shadow: -20px 0 46px rgba(0, 0, 0, 0.55);
    /* Translated rather than mounted and unmounted: the slide is then a single
       composited transform, which is what keeps it smooth on a mid-range phone. */
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.auth-menu.open .auth-menu-panel {
    transform: translateX(0);
}

.auth-menu-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.auth-menu-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-3);
}

.auth-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-2);
}

.auth-menu-close:hover {
    border-color: var(--accent-dim);
    color: var(--text-1);
}

.auth-menu-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 16px 28px;
}

.auth-menu-group + .auth-menu-group {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
}

.auth-menu-label {
    display: block;
    margin-bottom: var(--sp-2);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
}

.auth-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 13px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.auth-menu-item + .auth-menu-item {
    margin-top: var(--sp-2);
}

.auth-menu-item:hover {
    border-color: var(--accent-dim);
    background: var(--bg-2);
}

.auth-menu-item-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.auth-menu-item-primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--accent-ink);
}

/* An anchor styled as a menu row: same box, but it keeps link semantics so it
   can be opened in a new tab or shared. */
.auth-menu-item-link {
    gap: var(--sp-3);
    justify-content: flex-start;
    text-decoration: none;
}

.auth-menu-item-link .bx-icon {
    color: var(--text-3);
}

.auth-menu-item-link:hover .bx-icon,
.auth-menu-item-link[aria-current="page"] .bx-icon {
    color: var(--accent);
}

.auth-menu-item-link[aria-current="page"] {
    border-color: var(--accent-dim);
    color: var(--accent);
}

/**
 * The guest route: still the lesser option, but a button like the two above it.
 *
 * Stripping its border and setting it in body type made it read as a caption
 * on the sign-in button rather than a third thing you could press — on a touch
 * screen there is no hover to reveal otherwise. It keeps the same box and the
 * same 50px target; what marks it as the quiet choice is the dimmer line and
 * text, not the absence of a control.
 */
.auth-menu-item-quiet {
    border-color: var(--line);
    color: var(--text-3);
}

.auth-menu-item-quiet:hover {
    border-color: var(--line-strong);
    background: var(--bg-2);
    color: var(--text-2);
}

.auth-menu-lang button {
    flex: 1;
    min-height: 44px;
    font-size: 12px;
}

/* ---------- Card stage (every screen that is a form) ---------- */

.auth-stage {
    position: relative;
    z-index: 1;
    flex: 1;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(28px, 5vh, 64px) clamp(16px, 4vw, 40px) clamp(40px, 6vh, 72px);
}

/**
 * Sign-in and friends: the card, plus a panel saying what the account is for.
 * A form alone in the middle of a wide viewport reads as unfinished, and the
 * player has no reason yet to want an account — this is where that reason goes.
 */
.auth-stage-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    align-items: center;
    justify-items: stretch;
    gap: clamp(28px, 6vw, 80px);
    place-items: center stretch;
}

.auth-aside {
    max-width: 46ch;
    justify-self: end;
}

.auth-aside-crest {
    height: 96px;
    width: auto;
    image-rendering: pixelated;
    margin-bottom: var(--sp-4);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}

.auth-aside-lead {
    font-family: var(--font-display);
    font-size: clamp(21px, 2.4vw, 29px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: 0.005em;
    color: var(--text-1);
    margin-bottom: var(--sp-5);
}

.auth-points {
    list-style: none;
    display: grid;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.auth-points li {
    display: grid;
    gap: 3px;
    padding-left: var(--sp-4);
    border-left: 2px solid var(--accent-dim);
}

.auth-point-title {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

.auth-point-body {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-2);
}

/* ---------- Home page ---------- */

.auth-home {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px) clamp(48px, 8vh, 96px);
}

.auth-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(36px, 7vh, 84px) 0 clamp(32px, 6vh, 64px);
}

.auth-hero .auth-tagline {
    max-width: 54ch;
    margin-bottom: clamp(24px, 3.5vh, 40px);
    font-size: clamp(15px, 1.5vw, 17.5px);
}

.auth-hero-cta {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    justify-content: center;
}

/* The buttons are full width inside the card; on the home page they size to
   their labels instead, side by side. */
.auth-hero-cta .auth-btn,
.auth-closing .auth-btn {
    width: auto;
    min-width: 200px;
}

.auth-freebadge {
    margin-top: var(--sp-3);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
}

/**
 * The escape hatch from having an account at all. Deliberately unstyled next
 * to the real CTAs — a text link, not a button — so it reads as the quieter,
 * discouraged option rather than a third equally-weighted choice.
 */
.auth-guest-link {
    margin-top: var(--sp-4);
    font-size: 12.5px;
    color: var(--text-3);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color 140ms ease, text-decoration-color 140ms ease;
}

.auth-guest-link:hover {
    color: var(--text-2);
    text-decoration-color: var(--text-3);
}

/* Inside a card the link sits under the footer as one more quiet line */
.auth-footer + .auth-guest-link {
    display: block;
    margin-top: var(--sp-3);
    text-align: center;
    width: 100%;
}

.auth-hero .auth-stats {
    margin-top: var(--sp-6);
    max-width: 620px;
    width: 100%;
}

/**
 * Sections are separated by a rule that fades out at both ends rather than a
 * full-width border. A hard line stopping dead at the content edge is what made
 * the page look like a box sitting on a background instead of a page.
 */
/*
 * Vertical rhythm.
 *
 * The page is four stacked bands of centred text, and with the old spacing the
 * heading, the sub-heading and the cards sat 8–12px apart — close enough that
 * the whole section read as one paragraph with different type sizes in it.
 * Each level of the hierarchy now gets a clearly bigger gap than the one below
 * it: inside a card < between cards < heading to grid < between sections.
 */
.auth-section {
    position: relative;
    padding: clamp(44px, 9vh, 104px) 0;
    text-align: center;
}

.auth-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
}

.auth-section-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--text-1);
    margin-bottom: var(--sp-3);
}

.auth-section-sub {
    max-width: 58ch;
    margin: 0 auto clamp(26px, 4vh, 48px);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-2);
}

/* The loop: three steps, in order, because the order is the point */
.auth-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 26px);
    text-align: left;
}

.auth-step {
    position: relative;
    padding: var(--sp-5) var(--sp-5) var(--sp-5);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1) 65%);
    overflow: hidden;
}

/* A deposited layer along the top edge marks the card as a stage in a run */
.auth-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-dim));
}

.auth-step-num {
    position: absolute;
    top: 10px;
    right: 14px;
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    /* Big enough to structure the card, quiet enough not to shout over the text */
    color: rgba(255, 158, 44, 0.16);
    pointer-events: none;
}

.auth-step h3,
.auth-mcard h3 {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-1);
    margin-bottom: var(--sp-3);
    padding-right: 46px;
}

.auth-step p,
.auth-mcard p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-2);
}

.auth-mcards {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 26px);
    text-align: left;
}

.auth-mcard {
    padding: var(--sp-5);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1) 60%);
    transition: border-color 160ms ease, transform 160ms ease;
}

.auth-mcard h3 { padding-right: 0; }

.auth-mcard:hover {
    border-color: var(--accent-dim);
    transform: translateY(-2px);
}

.auth-closing {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(44px, 8vh, 84px) 0 0;
}

.auth-closing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
}

.auth-closing .auth-section-sub {
    max-width: 52ch;
    margin-bottom: var(--sp-5);
}

.auth-homefoot {
    position: relative;
    display: flex;
    justify-content: center;
    gap: var(--sp-5);
    margin-top: clamp(40px, 7vh, 72px);
    padding-top: var(--sp-4);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.auth-homefoot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.auth-homefoot a {
    color: var(--text-3);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.auth-homefoot a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ---------- Leaderboard (/stats) ---------- */

/* The page has no hero, so the first section must not sit against the bar */
.auth-boardpage { padding-top: clamp(24px, 5vh, 56px); }

.auth-board-head { padding-top: 0; }
.auth-board-head::before { display: none; }

/**
 * The two boards, side by side on a wide window.
 *
 * Equal columns on purpose: making the clean board wider would rank the two
 * kinds of run against each other again, in layout instead of in numbers. They
 * are separate lists precisely so neither is measured against the other.
 *
 * `align-items: start` so a short board keeps its height instead of stretching
 * its rows to match the taller one beside it.
 */
.auth-boards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3.5vw, 52px);
    align-items: start;
    max-width: 1020px;
    margin: 0 auto;
    text-align: left;
}

.auth-board-col { min-width: 0; }

.auth-board-col-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-1);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-2);
    /* A rule under the heading, so each column is labelled at a glance from
       the other side of the page. The clean board gets the accent — it is the
       one the page leads with; the overall board keeps the plain line, because
       it is the ordinary ranking and not a lesser one. */
    border-bottom: 1px solid var(--line-strong);
}

.auth-board-col-clean .auth-board-col-title { border-bottom-color: var(--accent-dim); }

.auth-board-col-sub {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-3);
    margin-bottom: var(--sp-3);
}

.auth-board {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0;
    text-align: left;
    counter-reset: none;
}

.auth-board-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1) 60%);
}

/* First place is the one the page exists to show; the rest recede in order */
.auth-board-row[data-place="1"] { border-color: var(--accent-dim); }

.auth-board-place {
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--text-3);
}

.auth-board-row[data-place="1"] .auth-board-place { color: var(--accent); }
.auth-board-row[data-place="2"] .auth-board-place { color: var(--text-1); }
.auth-board-row[data-place="3"] .auth-board-place { color: var(--text-2); }

/* Both boards rank the same way, so first place looks the same on either.
   Which board a row is on is said by the heading above it and, where it
   applies, by the tags beside the name — not by dimming a whole column. */

.auth-board-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-1);
    overflow-wrap: anywhere;
}

/**
 * The level, boxed beside the name.
 *
 * A filled chip rather than an outlined one, so it does not read as a third
 * caveat tag next to the two that are: those say something is qualified about
 * the run, this is a plain fact about it.
 */
.auth-board-level {
    flex: none;
    padding: 2px 7px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg-3);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
    white-space: nowrap;
}

/* Stated, not hidden: a tag reads as a note on the run, not an accusation */
.auth-board-flag {
    flex: none;
    padding: 2px 7px;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Two different kinds of caveat, so two colours — otherwise a row carrying
   both reads as one long yellow smear and neither tag is legible at a glance.
   Amber for a faster clock, blue for borrowed money: a financing fact, which
   is not the same claim as having played on easier terms. */
.auth-board-flag-boost { color: var(--warn); }
.auth-board-flag-loan  { color: var(--info); }

.auth-board-money {
    font-family: var(--font-mono);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
    white-space: nowrap;
}

.auth-board-note {
    max-width: 46ch;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-2);
}

/* Inside a column it stands where its rows would, not centred in the page */
.auth-board-note-col {
    margin: 0;
    padding: var(--sp-4) 0;
    font-size: 13px;
    color: var(--text-3);
}

.auth-board-foot {
    max-width: 62ch;
    margin: var(--sp-4) auto 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-3);
}

/* ---------- Hero wordmark ---------- */

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--sp-4);
}

.auth-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--accent);
}

/* The crest, printed rather than placed: it rises out of nothing the way a
   part comes off the bed, with a single nozzle pass along its base. */
.auth-title {
    position: relative;
    display: block;
    width: fit-content;
    /* The crest is the headline. Sitting 16px off the tagline made the two read
       as one block; the extra air is what lets the mark land on its own. */
    margin-bottom: clamp(16px, 2.6vh, 30px);
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
}

.auth-title img {
    display: block;
    height: clamp(150px, 21vw, 252px);
    width: auto;
    /* Pixel art: never let the browser smooth it into mush */
    image-rendering: pixelated;
    clip-path: inset(100% 0 0 0);
    transform: translateY(14px);
    animation: layerRise 780ms cubic-bezier(0.2, 0.8, 0.2, 1) 140ms forwards;
}

@keyframes layerRise {
    to {
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }
}

/* Nozzle pass — a single amber line travelling along the base of the crest */
.auth-title::after {
    content: '';
    position: absolute;
    left: -6%;
    bottom: 4px;
    width: 112%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-strong) 12%, var(--accent) 60%, transparent);
    transform-origin: left center;
    animation: nozzlePass 1200ms cubic-bezier(0.5, 0, 0.2, 1) 200ms forwards;
}

@keyframes nozzlePass {
    0% { transform: scaleX(0); opacity: 0; }
    18% { opacity: 1; }
    75% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}

.auth-tagline {
    max-width: 46ch;
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--text-2);
    margin-bottom: var(--sp-5);
}

/* ---------- Stats readout ---------- */

.auth-stats {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg-inset);
    max-width: 52ch;
}

.auth-stats-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
}

.auth-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
}

.auth-stat {
    padding: 12px;
    background: var(--bg-1);
}

.auth-stat-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.auth-stat-label {
    margin-top: 5px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* The green dot is reserved for one thing only: a live signal */
.auth-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 rgba(139, 197, 63, 0.55);
    animation: livePulse 2.4s ease-out infinite;
}

@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(139, 197, 63, 0.5); }
    70%, 100% { box-shadow: 0 0 0 9px rgba(139, 197, 63, 0); }
}

.auth-stat-offline .auth-stat-value { color: var(--text-3); }

/* ---------- The card: a print plate ---------- */

.auth-plate {
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 440px;
    animation: plateIn 560ms cubic-bezier(0.2, 0.8, 0.2, 1) 240ms both;
}

@keyframes plateIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Heated bed under the plate */
.auth-plate::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -14px;
    height: 14px;
    background: linear-gradient(180deg, rgba(255, 158, 44, 0.42), transparent);
    filter: blur(5px);
    pointer-events: none;
}

.auth-card {
    position: relative;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1) 42%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

/* Machine readout: reports the real position in the flow */
.auth-card-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 9px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-inset);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
}

.auth-card-rail b {
    color: var(--accent);
    font-weight: 600;
}

.auth-card-body {
    padding: clamp(20px, 3vw, 28px);
}

.auth-card h1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--text-1);
    margin-bottom: 6px;
}

.auth-card-sub {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-2);
    margin-bottom: var(--sp-5);
}

/* ---------- Fields ---------- */

.auth-field {
    margin-bottom: var(--sp-4);
}

.auth-field label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
}

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-gate input[type="text"],
.auth-gate input[type="email"],
.auth-gate input[type="password"] {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg-inset);
    color: var(--text-1);
    font-family: var(--font-body);
    font-size: 14.5px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.auth-gate input::placeholder { color: var(--text-3); }

.auth-gate input:hover { border-color: var(--accent-dim); }

.auth-gate input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 158, 44, 0.16);
}

.auth-gate input[aria-invalid="true"] {
    border-color: var(--bad);
}

.auth-input-wrap .auth-reveal {
    position: absolute;
    right: 4px;
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
}

.auth-input-wrap .auth-reveal:hover { color: var(--accent); }

/* Verification code: one wide, spaced field reads as a machine entry */
.auth-gate input.auth-code {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-align: center;
    padding: 14px 12px 14px 22px;
}

.auth-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
}

.auth-strength-track {
    flex: 1;
    height: 3px;
    background: var(--bg-3);
    overflow: hidden;
}

.auth-strength-fill {
    height: 100%;
    width: 0;
    background: var(--bad);
    transition: width 200ms ease, background 200ms ease;
}

.auth-strength[data-level="1"] .auth-strength-fill { width: 55%; background: var(--warn); }
.auth-strength[data-level="2"] .auth-strength-fill { width: 100%; background: var(--ok); }

.auth-strength-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* ---------- Consent ---------- */

.auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: var(--sp-4) 0 var(--sp-5);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-2);
}

.auth-consent input[type="checkbox"] {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--accent);
    cursor: pointer;
}

.auth-consent a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 158, 44, 0.4);
}

.auth-consent a:hover { border-bottom-color: var(--accent); }

/* ---------- Buttons ---------- */

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg-3);
    color: var(--text-1);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 90ms ease;
}

.auth-btn:hover:not(:disabled) {
    border-color: var(--accent-dim);
    background: #2e2e34;
}

.auth-btn:active:not(:disabled) { transform: translateY(1px); }

.auth-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.auth-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.auth-btn-primary:hover:not(:disabled) {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--accent-ink);
}

.auth-btn-danger {
    border-color: var(--bad);
    color: var(--bad);
    background: transparent;
}

.auth-btn-danger:hover:not(:disabled) {
    background: var(--bad);
    color: var(--text-1);
}

.auth-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-3);
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    padding: 8px;
    width: auto;
}

.auth-btn-ghost:hover:not(:disabled) {
    background: transparent;
    color: var(--accent);
}

/* Inline actions (a slot's Play/Delete, an account row's Save) sit next to
   other content rather than stretching to fill it like the full-width CTAs. */
.auth-btn-small {
    width: auto;
    padding: 7px 12px;
    font-size: 12px;
}

/* The gear icon in the bar: same pill as the other bar buttons, just centred
   on an icon instead of a text label. */
.auth-bar-icon-btn {
    padding: 7px 10px;
    line-height: 0;
}

.auth-btn[data-busy="true"] {
    position: relative;
    color: transparent;
}

.auth-btn[data-busy="true"]::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--accent-ink);
    animation: authSpin 620ms linear infinite;
}

.auth-btn:not(.auth-btn-primary)[data-busy="true"]::after { color: var(--text-2); }

@keyframes authSpin {
    to { transform: rotate(360deg); }
}

/* ---------- Messages ---------- */

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    margin-bottom: var(--sp-4);
    border-left: 3px solid var(--bad);
    background: rgba(225, 90, 78, 0.1);
    font-size: 13px;
    line-height: 1.5;
    color: #f4b6b0;
}

.auth-alert-ok {
    border-left-color: var(--ok);
    background: rgba(139, 197, 63, 0.1);
    color: #cfe6a4;
}

.auth-alert-warn {
    border-left-color: var(--warn);
    background: rgba(232, 185, 62, 0.1);
    color: #f0dda2;
}

.auth-alert-info {
    border-left-color: var(--info);
    background: rgba(98, 168, 229, 0.1);
    color: #bcd9f2;
}

.auth-hint {
    margin-top: var(--sp-3);
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-3);
}

.auth-footer {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--text-3);
    text-align: center;
}

.auth-footer button {
    color: var(--accent);
    font: inherit;
    padding: 0 2px;
}

.auth-footer button:hover { text-decoration: underline; }

.auth-inline-link {
    color: var(--accent);
    font: inherit;
    padding: 0;
}

.auth-inline-link:hover { text-decoration: underline; }

/* Save comparison for conflicts and migration */
.auth-choice {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.auth-choice-card {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg-inset);
    padding: 14px;
    text-align: left;
    transition: border-color 140ms ease, background 140ms ease;
    width: 100%;
}

.auth-choice-card:hover {
    border-color: var(--accent);
    background: var(--bg-2);
}

.auth-choice-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-1);
}

.auth-choice-when {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--text-3);
    text-transform: none;
}

.auth-choice-detail {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
}

.auth-slot-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-slot-actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: 8px;
}

.auth-progress {
    display: flex;
    gap: 4px;
    margin-bottom: var(--sp-4);
}

.auth-progress i {
    flex: 1;
    height: 3px;
    background: var(--bg-3);
}

.auth-progress i.done { background: var(--accent); }

/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   Three tiers, not one squeezed desktop:

   > 900px   the desktop bar, three-across steps, two-across cards
   ≤ 900px   header collapses to logo + hamburger; the panel carries the
             controls; content becomes one or two columns
   ≤ 600px   phone proper: full-bleed calls to action, compact stat readout,
             tightened vertical rhythm so the hero fits one screen

   The 900px number is repeated as MENU_BREAKPOINT in AuthGate.js, which needs
   it to release the scroll lock when the window grows past it.
   ============================================================ */

@media (max-width: 900px) {
    /* --- Header becomes a mobile header --- */
    .auth-bar {
        position: sticky;
        top: 0;
        padding: 10px clamp(12px, 3vw, 20px);
        gap: var(--sp-3);
        /* The gate scrolls behind it, so the bar needs an opaque-enough backing
           of its own rather than relying on whatever is underneath. */
        background: rgba(16, 16, 19, 0.92);
    }

    /* Everything the bar used to hold now lives behind the hamburger. Leaving
       it in the flow and wrapping it is what turned the header into a
       three-line list on a phone. */
    .auth-bar-right { display: none; }

    .auth-burger { display: flex; }
    .auth-menu { display: block; }

    /* The panel is the scrolling surface while it is open. */
    .auth-gate.auth-menu-open { overflow: hidden; }

    .auth-mark img { height: 34px; }

    /* --- Content --- */
    /* Three steps side by side stop being readable well before they stop
       fitting, so they stack early. */
    .auth-steps { grid-template-columns: minmax(0, 1fr); }

    /* Stacked content stretched to the full 830px of a tablet gives short
       paragraphs an enormous measure and leaves the page looking half-empty.
       Capping it near the width of the stats readout keeps one column of
       content rather than one column and one wide gap. */
    .auth-steps,
    .auth-mcards {
        max-width: 660px;
        margin-inline: auto;
    }

    /* vw-based sizing shrinks the crest exactly where there is room for it —
       a tablet is not a small desktop. */
    .auth-title img { height: clamp(168px, 26vw, 232px); }

    .auth-home { padding-bottom: clamp(36px, 6vh, 64px); }
    .auth-hero { padding: clamp(28px, 5vh, 52px) 0 clamp(24px, 4vh, 44px); }
    .auth-section { padding: clamp(32px, 5vh, 56px) 0; }

    /* The fading rule was inset by 10% for a 1120px page; on a narrow one that
       reads as a short dash floating in the middle. */
    .auth-section::before,
    .auth-closing::before { left: 4%; right: 4%; }

    .auth-stage { padding: 24px clamp(12px, 3vw, 20px) 40px; }

    /* The pitch panel beside the form only works while there is a beside. In
       one column the form goes first — the player tapped "sign in", they did
       not ask to read the sales copy again — and the panel follows as a footer
       for anyone still deciding. */
    .auth-stage-split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-6);
        justify-items: center;
    }

    .auth-stage-split .auth-plate { order: 1; width: 100%; }
    .auth-stage-split .auth-aside { order: 2; justify-self: center; text-align: center; max-width: 46ch; }
    .auth-aside-crest { height: 72px; margin-inline: auto; }
    .auth-points { text-align: left; }

    /* --- Leaderboard --- */
    /* Two boards fit side by side on a desktop and nowhere near it here: at
       this width each column is about 40 characters wide, which is not enough
       for a rank, a name, two tags and a figure. They stack, and because the
       clean board is first in the markup it is the one the page opens on. */
    .auth-boards {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-6);
        max-width: 560px;
    }

    .auth-boardpage { padding-top: clamp(20px, 4vh, 40px); }
    .auth-board-row { padding: var(--sp-3); }
    .auth-board-place { font-size: 25px; }
}

@media (max-width: 600px) {
    /* --- Hero --- */
    .auth-eyebrow { font-size: 10px; letter-spacing: 0.16em; margin-bottom: var(--sp-3); }
    .auth-title img { height: clamp(132px, 42vw, 190px); }
    .auth-hero .auth-tagline {
        font-size: 15px;
        line-height: 1.55;
        max-width: 34ch;
        margin-bottom: var(--sp-4);
    }

    /* Two side-by-side calls to action become one full-width column. The
       minimum height is the thumb target, not the type size. */
    .auth-hero-cta {
        width: 100%;
        flex-direction: column;
        gap: var(--sp-2);
    }

    .auth-hero-cta .auth-btn,
    .auth-closing .auth-btn {
        width: 100%;
        min-width: 0;
        min-height: 52px;
    }

    .auth-guest-link {
        display: inline-block;
        min-height: 44px;
        padding: 12px 8px;
        margin-top: var(--sp-2);
    }

    /* --- Stats readout --- */
    /* Stacked, the three counters were three quarters of a screen of mostly
       empty boxes. Side by side they read as one instrument panel, which is
       what they are. */
    .auth-hero .auth-stats { margin-top: var(--sp-5); }
    .auth-stats-head { padding: 7px 10px; font-size: 9.5px; letter-spacing: 0.14em; }
    .auth-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .auth-stat { padding: 10px 8px; text-align: center; }
    .auth-stat-value { justify-content: center; font-size: 22px; gap: 5px; }
    .auth-stat-label { font-size: 8.5px; letter-spacing: 0.08em; line-height: 1.3; }
    .auth-live-dot { width: 6px; height: 6px; }

    /* --- Sections --- */
    .auth-section-title { font-size: clamp(23px, 7vw, 30px); }
    .auth-section-sub { font-size: 14px; max-width: 40ch; margin-bottom: var(--sp-4); }
    .auth-mcards { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
    .auth-step { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
    .auth-mcard { padding: var(--sp-4) var(--sp-3); }

    .auth-homefoot { gap: var(--sp-4); font-size: 10.5px; }
    .auth-homefoot a { min-height: 44px; display: inline-flex; align-items: center; }

    /* --- Leaderboard --- */
    /* Rank, name and money in one row leaves a 20-character nickname about
       eight characters of space. The rank keeps its column; the name and the
       amount stack beside it, so a long name wraps instead of squeezing the
       figure the page is actually ranking by. */
    .auth-board-row {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 4px var(--sp-3);
        padding: var(--sp-3) var(--sp-3);
    }

    .auth-board-place {
        grid-row: 1 / span 2;
        align-self: center;
        font-size: 24px;
    }

    .auth-board-name { font-size: 15.5px; gap: 6px; }
    .auth-board-money { font-size: 15px; }
    .auth-board-flag { font-size: 9px; padding: 2px 6px; letter-spacing: 0.08em; }
    .auth-board-level { font-size: 9.5px; padding: 2px 6px; }
    .auth-board-note { font-size: 13.5px; max-width: 36ch; }
    .auth-board-foot { font-size: 12px; max-width: 44ch; }

    /* Stacked, the second heading has to be unmistakably a new list starting
       rather than a caption on the rows above it. */
    .auth-boards { gap: var(--sp-5); }
    .auth-board-col-title { font-size: 15.5px; }
    .auth-board-col-sub { font-size: 12px; margin-bottom: var(--sp-2); }

    /* --- Form screens --- */
    .auth-card-body { padding: 18px; }
    .auth-card h1 { font-size: 24px; }
    .auth-gate input.auth-code { font-size: 21px; letter-spacing: 0.3em; }
}

/* A phone held sideways has ~390px of height: the hero has to give most of it
   to the crest and the buttons, not to breathing room. */
@media (max-height: 520px) and (orientation: landscape) {
    .auth-hero { padding: 20px 0 24px; }
    .auth-title img { height: clamp(96px, 22vh, 140px); }
    .auth-hero .auth-tagline { margin-bottom: var(--sp-3); }
    .auth-menu-panel { width: min(60vw, 340px); }
}

/* ============================================================
   ACCOUNT CARD — inside the in-game Settings modal
   Borrows the game's card and button styles; only the rows and
   the text inputs (which Settings never needed before) are new.
   ============================================================ */

.account-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 9px 0;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

.account-label {
    flex: none;
    min-width: 116px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}

.account-value {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    color: var(--text-1);
    overflow-wrap: anywhere;
}

.account-ok { color: var(--ok); }
.account-warn { color: var(--warn); }

.account-edit {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    min-width: 200px;
}

.account-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg-inset);
    color: var(--text-1);
    font-family: var(--font-body);
    font-size: 13.5px;
    user-select: text;
}

.account-input::placeholder { color: var(--text-3); }

.account-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 158, 44, 0.16);
}

.account-danger {
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    border-left: 3px solid var(--bad);
    background: rgba(225, 90, 78, 0.07);
}

.account-danger .card-title { color: var(--bad); }
.account-danger .account-edit { margin-top: var(--sp-2); }

.account-legal {
    display: flex;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.account-legal a {
    color: var(--text-3);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.account-legal a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .auth-title img,
    .auth-plate {
        animation: none;
        clip-path: none;
        opacity: 1;
        transform: none;
    }

    .auth-title::after,
    .auth-live-dot { animation: none; }
    .auth-mcard { transition: none; }
    .auth-mcard:hover { transform: none; }
    .auth-gate.gate-closing { animation: none; opacity: 0; visibility: hidden; }
    .auth-btn[data-busy="true"]::after { animation-duration: 2s; }
}