@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    --dir-bg: #0C1422;
    --dir-rail: #09101C;
    --dir-surface: #121C2E;
    --dir-raised: #172436;
    --dir-line: #243044;
    --dir-line-soft: rgba(36, 48, 68, .9);
    --dir-crumbs: #0F1A2B;
    --dir-text: #E7EEF6;
    --dir-muted: #93A4B8;
    --dir-faint: #6E8298;
    --dir-accent: #E2A53A;
    --dir-accent-bright: #F0C36A;
    --dir-live: #3DDC8C;
    --dir-players: #E2A53A;
    --dir-peak: #8C6840;
    --dir-worlds: #7EB8C4;
    --dir-shadow-card: 0 12px 30px rgba(0, 0, 0, .18);
    --dir-shadow-card-hover: 0 18px 38px rgba(0, 0, 0, .28);
    --dir-shadow-promo: 0 24px 70px rgba(0, 0, 0, .3);
    --dir-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dir-serif: var(--dir-sans);
    --dir-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

.directory-body {
    min-height: 100vh;
    margin: 0;
    background: var(--dir-bg);
    color: var(--dir-text);
    color-scheme: dark;
    font-family: var(--dir-sans);
    font-size: 15px;
    line-height: 1.55;
}
.directory-body a { color: inherit; text-decoration: none; }
.directory-body a:hover { color: var(--dir-text); }
.directory-body h1,
.directory-body h2,
.directory-body h3,
.directory-body p { margin: 0; }
.directory-body h1,
.directory-body h2,
.directory-body h3 { font-family: var(--dir-sans); font-weight: 700; letter-spacing: -0.01em; }
.directory-body em { color: var(--dir-text); font-style: normal; }
.directory-body code,
.directory-body .directory-kicker { font-family: var(--dir-mono); }

.directory-skip {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 20;
    padding: 9px 14px;
    background: var(--dir-accent);
    color: var(--dir-bg) !important;
}
.directory-skip:focus { left: 0; }
.directory-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; }
.directory-mobile-menu,
.directory-drawer-backdrop { display: none; }

.directory-shell { display: grid; grid-template-columns: 288px minmax(0, 1fr); min-height: 100vh; }

/* The rail: brand, explore links, genres with counts, the glance figures, developers, about. */
.directory-rail {
    display: flex;
    flex-direction: column;
    padding: 24px 14px 22px;
    background: var(--dir-rail);
    border-right: 1px solid var(--dir-line);
}
/* The drawer: the brand's nav, genres, glance and footer. On a wide screen it is simply the rest of the
   sidebar, filling the space under the brand row and pushing its own footer to the bottom. Under 800px it
   becomes the sliding panel (see the media query below). */
.directory-rail-drawer {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
}
.directory-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
}
.directory-brand-mark { display: block; flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; }
.directory-brand strong { display: block; color: var(--dir-text); font-family: var(--dir-sans); font-size: 18px; font-weight: 700; letter-spacing: .14em; line-height: 1.1; text-transform: uppercase; }
.directory-brand small { display: block; margin-top: 4px; color: var(--dir-muted); font-family: var(--dir-sans); font-size: 14px; letter-spacing: .02em; text-transform: none; }
#directory-rail-navigation { margin-top: 26px; }
#directory-rail-navigation > * + * { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--dir-line); }
.directory-nav-label { margin: 0 12px 10px !important; color: var(--dir-muted); font-family: var(--dir-sans); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.directory-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 8px 12px 8px 9px;
    border-left: 3px solid transparent;
    border-radius: 8px;
    color: var(--dir-text) !important;
    font-size: 15px;
}
.directory-nav-link:hover { background: var(--dir-surface); color: var(--dir-text) !important; }
.directory-nav-active,
.directory-nav-active:hover { background: var(--dir-raised); border-left-color: var(--dir-accent); color: var(--dir-accent) !important; }
.directory-nav-link b { margin-left: auto; color: var(--dir-muted); font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; }
.directory-icon { display: inline-grid; flex: 0 0 20px; place-items: center; width: 20px; height: 20px; color: var(--dir-muted); }
.directory-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.directory-nav-active .directory-icon { color: var(--dir-accent); }
.directory-glance p { display: flex; align-items: center; gap: 12px; margin: 0; padding: 7px 12px; color: var(--dir-text); font-size: 15px; }
.directory-glance p b { margin-right: -7px; font-weight: 700; }
.directory-dot { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--dir-live); box-shadow: 0 0 0 4px rgba(61, 220, 140, .12); }
.directory-glance .directory-dot { margin: 0 6px; }
.directory-nav-link .directory-dot { margin-left: 2px; }
.directory-rail-footer { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding: 18px 12px 0; border-top: 1px solid var(--dir-line); }
.directory-rail-footer a { color: var(--dir-muted); font-size: 14px; }
.directory-rail-footer a:hover { color: var(--dir-text); }

/* The top bar: Explore and How to play, account links and the gold button. Every link and the button
   keep to one line; on a narrow phone the gold button and "How to play" fall back to short text instead
   of wrapping (the long/short pair below), and "Get the client" moves into the rail's drawer footer. */
.directory-main { min-width: 0; padding: 0; background: var(--dir-bg); }
.directory-topbar { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; height: 56px; padding: 0 32px; border-bottom: 1px solid var(--dir-line); }
.directory-topbar nav { display: flex; align-items: stretch; gap: 28px; }
.directory-topbar nav > * { display: flex; align-items: center; }
.directory-topbar nav a,
.directory-topbar-actions a { white-space: nowrap; }
.directory-topbar nav a { color: var(--dir-muted); font-size: 15px; }
.directory-topbar nav a:hover { color: var(--dir-text); }
.directory-topbar nav a.is-current { color: var(--dir-text); box-shadow: inset 0 -2px 0 var(--dir-accent); }
.directory-topbar-actions { display: flex; align-items: center; gap: 18px; }
.directory-topbar-actions > a:not(.directory-topbar-button) { color: var(--dir-muted); font-size: 14px; }
.directory-topbar-actions > a:not(.directory-topbar-button):hover { color: var(--dir-text); }
.directory-topbar-button { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 8px; background: var(--dir-accent); color: #14100A !important; font-size: 14px; font-weight: 600; line-height: 1.1; }
.directory-topbar-button:hover { background: var(--dir-accent-bright); color: #14100A !important; }
.topbar-short { display: none; }
/* The page fills the main column, as the mockups do; the ceiling only keeps rows readable on very wide screens. */
.directory-page { max-width: 1600px; margin-inline: auto; padding: 28px 32px 40px; }

/* The breadcrumbs band: full width, one step lighter than the page and top bar, one step darker than a
   card. Rendered by _Layout directly under the top bar when the page sets ViewData["Crumbs"]. */
.directory-crumbs { display: flex; align-items: center; height: 40px; padding: 0 32px; background: var(--dir-crumbs); border-bottom: 1px solid var(--dir-line); overflow: hidden; }
.directory-crumbs ol { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; }
.directory-crumbs li { display: flex; flex-shrink: 0; align-items: center; gap: 6px; color: var(--dir-muted); font-size: 14px; white-space: nowrap; }
.directory-crumbs li + li { padding-left: 6px; }
.directory-crumbs li + li::before { content: "/"; color: var(--dir-faint); }
.directory-crumbs a { color: var(--dir-muted); }
.directory-crumbs a:hover { color: var(--dir-text); }
/* The arrow is decoration: the empty alternative text keeps screen readers from announcing it. */
.directory-crumbs a.crumb-back::before { content: "\2190\00a0"; content: "\2190\00a0" / ""; }
.directory-crumbs [aria-current="page"] { color: var(--dir-text); }
/* Only the current page's crumb gives way: a long name shortens with an ellipsis while the crumbs before it
   keep their size. */
.directory-crumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.directory-crumbs li:last-child > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 800px) {
    .directory-crumbs { padding: 0 16px; }
}

.directory-kicker { color: var(--dir-faint); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.directory-kicker span { margin: 0 6px; color: var(--dir-line); }

.directory-note { margin-top: 14px !important; color: var(--dir-faint); font-family: var(--dir-mono); font-size: 9px; }

.directory-client-promo { display: grid; grid-template-columns: .72fr 1.28fr; gap: 38px; margin-top: 78px; padding: 30px; overflow: hidden; border-radius: 18px; background: linear-gradient(110deg, rgba(226, 165, 58, .08), var(--dir-raised) 58%); box-shadow: var(--dir-shadow-promo); }
.directory-client-promo-copy { padding: 6px 0 32px; }
.directory-client-promo h2 { margin-top: 12px; font-size: 36px; letter-spacing: -.045em; line-height: .9; }
.directory-client-promo-copy > p:not(.directory-kicker) { max-width: 39ch; margin-top: 17px !important; color: var(--dir-muted); font-size: 13px; }
.directory-client-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 23px; }
.directory-client-actions a { color: var(--dir-accent-bright); font-size: 11px; }
.directory-client-actions a:first-child { display: inline-flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--dir-accent); }
.directory-client-shot { align-self: center; min-width: 0; margin: 0; padding: clamp(8px, 1.2vw, 16px); }
.directory-client-shot img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 clamp(32px, 4vw, 56px) 8px rgba(0, 0, 0, .58), 0 0 20px 2px rgba(0, 0, 0, .38); }
.directory-open { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; margin-top: 78px; padding: 34px 32px; background: var(--dir-surface); }
.directory-open h2 { margin-top: 12px; font-size: 36px; line-height: .9; }
.directory-open > div:first-child > p:last-child { max-width: 39ch; margin-top: 17px !important; color: var(--dir-muted); font-size: 13px; }
.directory-open-list { border-top: 1px solid var(--dir-line); }
.directory-open-list a { display: grid; grid-template-columns: 28px 1fr 16px; gap: 11px; align-items: center; min-height: 64px; border-bottom: 1px solid var(--dir-line); }
.directory-open-list a > span,
.directory-open-list a > b { color: var(--dir-accent); font-family: var(--dir-mono); font-weight: 400; }
.directory-open-list strong { color: var(--dir-text); font-size: 12px; font-weight: 500; }
.directory-open-list small { display: block; margin-top: 3px; color: var(--dir-faint); font-size: 10px; font-weight: 400; }
.directory-open-list b { font-size: 15px; }
.directory-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 32px; padding: 16px 0 24px; border-top: 1px solid var(--dir-line); color: var(--dir-faint); font-family: var(--dir-mono); font-size: 9px; text-transform: uppercase; }
.directory-footer a { color: var(--dir-accent); }

/* Keep the structure legible without turning every section into a panel. */
.directory-open-list,
.directory-open-list a,
.directory-footer { border-color: var(--dir-line-soft); }

@media (max-width: 1100px) {
    .directory-client-promo,
    .directory-open { grid-template-columns: 1fr; gap: 35px; }
}
@media (max-width: 800px) {
    .directory-shell { display: block; }
    .directory-rail { display: block; padding: 18px 16px 14px; border-right: 0; border-bottom: 1px solid var(--dir-line); }
    .directory-rail-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 13px; align-items: start; }
    .directory-brand { padding: 0; gap: 9px; }
    .directory-brand-mark { flex-basis: 44px; width: 44px; height: 44px; }
    .directory-brand strong { font-size: 16px; }
    .directory-mobile-menu { display: grid; grid-column: 3; grid-row: 1; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; background: var(--dir-surface); color: var(--dir-text); }
    .directory-menu-lines { display: grid; gap: 4px; }
    .directory-menu-lines i { display: block; width: 16px; height: 1px; background: currentColor; }
    .directory-topbar { gap: 12px; padding: 0 16px; }
    .directory-topbar nav { gap: 18px; }
    .directory-topbar-actions { gap: 12px; }
    .directory-topbar-button { padding: 8px 12px; font-size: 13px; }
    .directory-page { padding: 20px 16px 32px; }
    .directory-client-promo,
    .directory-open { margin-top: 62px; padding: 24px 20px; }
    .directory-client-promo h2 { font-size: 34px; }
    .directory-open { margin-top: 62px; }
    .directory-footer { align-items: start; flex-direction: column; margin: 0 16px; }

    /* The drawer: always present under 800px, off canvas until body.directory-rail-open slides it in.
       Visibility is delayed on the way out so the panel is not interactive mid-slide, and undelayed on
       the way in so it appears the instant the transform starts. */
    .directory-rail-drawer {
        position: fixed;
        z-index: 25;
        inset: 0 auto 0 0;
        width: min(320px, 86vw);
        height: 100vh;
        overflow-y: auto;
        padding: 24px 20px 22px;
        background: var(--dir-rail);
        box-shadow: 18px 0 40px rgba(0, 0, 0, .32);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 240ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 240ms;
    }
    .directory-rail-open .directory-rail-drawer { transform: none; visibility: visible; transition-delay: 0s; }

    .directory-rail-open { overflow: hidden; }
    .directory-drawer-backdrop {
        display: block;
        position: fixed;
        z-index: 24;
        inset: 0;
        padding: 0;
        border: 0;
        background: rgba(0, 0, 0, .68);
        opacity: 0;
        pointer-events: none;
        transition: opacity 240ms cubic-bezier(.2, .8, .2, 1);
    }
    .directory-rail-open .directory-drawer-backdrop { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .directory-rail-drawer,
    .directory-drawer-backdrop { transition: none; }
}

/* Below 1000px "Get the client" leaves the top bar; it stays reachable in the drawer's footer. Below
   600px the gold button and "How to play" fall back to their short text instead of wrapping. */
/* The rail footer's copy of "Get the client" shows only when the top bar's is gone. */
.directory-rail-client { display: none; }
@media (max-width: 1000px) {
    .directory-topbar-client { display: none; }
    .directory-rail-footer .directory-rail-client { display: inline; }
}
@media (max-width: 600px) {
    .topbar-long { display: none; }
    .topbar-short { display: inline; }
}

/* The home page's own pieces, on top of the directory shell above. DM Sans for names,
   headings and sentences, DM Mono only for counts, times and labels. */
.home a:focus-visible { outline: 1px solid var(--dir-accent); outline-offset: 3px; }

/* The one sentence at the top, with room around it and a short rule to sit on. */
.home .home-intro { display: block; padding: 36px 0 22px; }
.home-summary { max-width: 18ch; color: var(--dir-text); font-weight: 500; font-size: clamp(40px, 5vw, 68px); line-height: .98; letter-spacing: -0.04em; }
.home-summary::before { content: ""; display: block; width: 48px; height: 3px; margin-bottom: 18px; background: var(--dir-accent); }

/* The most-active banner: one plate at a time, the name and its numbers over it. */
.home .home-hero { margin: 8px 0 28px; }
.home .home-hero-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.home .home-hero-controls { display: flex; gap: 8px; }
.home .home-hero-controls button { width: 36px; height: 36px; border: 1px solid var(--dir-line); border-radius: 999px; background: var(--dir-surface); color: var(--dir-text); font-size: 20px; line-height: 1; cursor: pointer; }
.home .home-hero-controls button:hover { border-color: var(--dir-muted); color: var(--dir-text); }
/* A fixed band rather than an aspect ratio: short enough to leave the listing in view, fed the 20:7 hero strip. */
.home-hero-viewport { position: relative; overflow: hidden; border-radius: 16px; background: var(--dir-raised); height: clamp(220px, 24vw, 340px); }
.home .home-hero-slide { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.home .home-hero-slide.is-current { opacity: 1; pointer-events: auto; z-index: 1; }
.home .home-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.home .home-hero-plain { display: grid; place-items: center; width: 100%; height: 100%; color: var(--dir-faint); font-family: var(--dir-serif); font-size: 64px; }
.home .home-hero-copy { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; gap: 6px; padding: 64px 28px 22px; background: linear-gradient(to top, rgba(12, 20, 34, .9), transparent); }
.home-hero-copy strong { color: var(--dir-text); font-family: var(--dir-serif); font-size: clamp(28px, 3vw, 44px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.home .home-hero-copy em { color: var(--dir-muted); font-family: var(--dir-sans); font-size: 14px; font-style: normal; }
.home .home-hero-marks { position: absolute; z-index: 2; right: 22px; bottom: 22px; display: flex; gap: 7px; align-items: center; }
.home .home-hero-mark { width: 18px; height: 2px; padding: 0; border: 0; background: rgba(231, 238, 246, .38); cursor: pointer; }
.home .home-hero-mark.is-current { width: 34px; background: var(--dir-accent); }

.home .directory-kicker { color: var(--dir-faint); font-family: var(--dir-mono); font-size: 10px; letter-spacing: .14em; }

.home-facts { padding-top: 20px; border-top: 1px solid var(--dir-line-soft); }
.home-fact-row { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 0; }
.home-fact-row > div { display: flex; align-items: baseline; gap: 9px; padding-right: 24px; }
.home-fact-row > div + div { padding-left: 24px; border-left: 1px solid var(--dir-line-soft); }
.home .home-fact-row dt { margin: 0; color: var(--dir-faint); font-family: var(--dir-mono); font-size: 10px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.home-fact-row dd { margin: 0; color: var(--dir-text); font-family: var(--dir-mono); font-size: 14px; font-weight: 400; }
.home-fact-details { display: flex; flex-wrap: wrap; gap: 5px 22px; margin-top: 16px !important; color: var(--dir-faint); font-family: var(--dir-mono); font-size: 11px; }
.home .home-fact-details a { color: var(--dir-muted); }
.home .home-fact-details a:hover { color: var(--dir-text); }

.directory-client-promo { grid-template-columns: .82fr 1.18fr; gap: 34px; padding: 26px 26px 28px; border-radius: 14px; background: var(--dir-surface); box-shadow: none; }
.home .directory-client-promo-copy { align-self: center; padding: 0; }
.home .directory-client-promo h2 { margin-top: 10px; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; }
.home .directory-client-promo-copy > p:not(.directory-kicker) { max-width: 38ch; margin-top: 12px !important; color: var(--dir-muted); font-family: var(--dir-sans); font-size: 13.5px; line-height: 1.55; }
.home .directory-client-actions { gap: 18px; margin-top: 18px; }
.home .directory-client-actions a { padding: 0; border: 0; background: none; color: var(--dir-accent); font-size: 13px; }
.home .directory-client-actions a:first-child { display: inline; gap: 0; padding-bottom: 2px; border-bottom: 1px solid rgba(226, 165, 58, .45); text-decoration: none; }
.home .directory-client-actions a + a { color: var(--dir-muted); }
.home .directory-client-actions a:hover { color: var(--dir-text); }
.home .directory-client-shot { padding: 0; }
.home .directory-client-shot img { border-radius: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }

.directory-open { display: block; padding: 22px 0 0; border-top: 1px solid var(--dir-line-soft); background: transparent; }
.home .directory-open h2 { margin-top: 0; font-size: 18px; line-height: 1.2; letter-spacing: -0.015em; }
.home .directory-open > div:first-child > p:last-child { max-width: 62ch; margin-top: 10px !important; color: var(--dir-muted); font-family: var(--dir-sans); font-size: 13px; }
.home .directory-open-list { margin-top: 18px; }
.directory-open-list a { grid-template-columns: 26px 1fr 14px; min-height: 58px; transition: background .18s ease; }
.home .directory-open-list a:hover { background: var(--dir-surface); }
.home .directory-open-list a > span { font-size: 12px; }
.home .directory-open-list strong { font-size: 13px; }
.home .directory-open-list small { margin-top: 3px; color: var(--dir-faint); font-family: var(--dir-sans); font-size: 11.5px; }
.home .directory-open-list b { font-size: 13px; }

.directory-footer { padding-top: 14px; color: var(--dir-faint); font-family: var(--dir-mono); font-size: 10px; letter-spacing: .1em; }

.home-empty { font-size: 13px; }
.home-empty a { color: var(--dir-accent-bright); }
.directory-card-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--dir-muted); font-family: var(--dir-serif); font-size: 44px; letter-spacing: .04em; background: linear-gradient(145deg, var(--dir-raised), var(--dir-surface)); }
.directory-card-placeholder[hidden] { display: none; }
.directory-note,
.directory-kicker,
.directory-nav-label,
.directory-nav-link b { font-size: 11px; }

.directory-advanced {
    margin: 20px 0 18px;
    border: 1px solid var(--dir-line-soft);
    border-radius: 14px;
    background: var(--dir-surface);
}
.directory-advanced > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    color: var(--dir-accent-bright);
    font-family: var(--dir-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    list-style: none;
    border-radius: 14px;
}
.directory-advanced[open] > summary { border-radius: 14px 14px 0 0; }
.directory-advanced > summary::-webkit-details-marker { display: none; }
.directory-advanced > summary::after {
    content: "";
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--dir-accent);
    border-bottom: 1.5px solid var(--dir-accent);
    transform: rotate(45deg);
    transition: transform .15s ease;
}
.directory-advanced[open] > summary::after { transform: rotate(-135deg); translate: 0 3px; }
.directory-advanced-form { padding: 0 16px 16px; }
.directory-advanced-groups { display: grid; gap: 22px; }
.directory-field-legend {
    margin: 0 0 10px !important;
    color: var(--dir-faint);
    font-family: var(--dir-mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.directory-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.directory-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    color: var(--dir-muted);
    font-family: var(--dir-mono);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.directory-field-wide { grid-column: 1 / -1; }
.directory-field input,
.directory-field select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--dir-line);
    border-radius: 10px;
    background: var(--dir-rail);
    color: var(--dir-text);
    font-family: var(--dir-sans);
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}
.directory-field select {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23E0A040' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
}
.directory-field input:hover,
.directory-field select:hover { border-color: var(--dir-muted); }
.directory-field input:focus,
.directory-field select:focus {
    outline: 0;
    border-color: var(--dir-accent);
    box-shadow: 0 0 0 3px rgba(226, 165, 58, .18);
}
.directory-field input::placeholder { color: var(--dir-faint); }

.directory-select { position: relative; display: block; }
.directory-select.is-enhanced select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.directory-select-button {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 38px 0 14px;
    border: 1px solid var(--dir-line);
    border-radius: 10px;
    background: var(--dir-rail) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23E0A040' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat;
    color: var(--dir-text);
    font-family: var(--dir-sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}
.directory-select-button:hover { border-color: var(--dir-muted); background-color: var(--dir-raised); }
.directory-select-button:focus-visible {
    outline: 0;
    border-color: var(--dir-accent);
    box-shadow: 0 0 0 3px rgba(226, 165, 58, .18);
}
.directory-select.is-open .directory-select-button {
    border-color: var(--dir-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23F2C066' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m1 6.5 5-5 5 5'/%3E%3C/svg%3E");
}
.directory-select-button.is-placeholder { color: var(--dir-faint); }
.directory-select-menu {
    position: fixed;
    z-index: 40;
    margin: 0;
    padding: 6px;
    max-height: min(280px, 50vh);
    overflow: auto;
    list-style: none;
    border: 1px solid var(--dir-line);
    border-radius: 12px;
    background: var(--dir-surface);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.directory-select-menu[hidden] { display: none; }
.directory-select-option {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dir-text);
    font-family: var(--dir-sans);
    font-size: 13px;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.directory-select-option:hover,
.directory-select-option.is-active { background: var(--dir-raised); color: var(--dir-accent-bright); }
.directory-select-option.is-selected {
    background: rgba(226, 165, 58, .14);
    color: var(--dir-accent-bright);
}
.directory-players-min { width: 100%; }
.directory-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px 16px;
    min-height: 42px;
    padding-bottom: 4px;
    grid-column: 1 / -1;
}
.directory-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dir-muted);
    font-family: var(--dir-mono);
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
}
.directory-choice input {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--dir-line);
    border-radius: 5px;
    background: var(--dir-rail);
    cursor: pointer;
}
.directory-choice input:checked {
    border-color: var(--dir-accent);
    background: var(--dir-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%2314100A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m1.5 5 3 3 6-6'/%3E%3C/svg%3E") center / 12px 10px no-repeat;
}
.directory-choice input:focus-visible { outline: 1px solid var(--dir-accent-bright); outline-offset: 2px; }
.directory-advanced-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.directory-advanced-actions button {
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--dir-accent);
    color: var(--dir-bg);
    font-family: var(--dir-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
.directory-advanced-actions button:hover { background: var(--dir-accent-bright); }
.directory-advanced-actions button:focus-visible { outline: 1px solid var(--dir-accent-bright); outline-offset: 2px; }

.directory-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.directory-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 12px;
    border: 1px solid var(--dir-line);
    border-radius: 999px;
    background: var(--dir-surface);
    color: var(--dir-text) !important;
    font-family: var(--dir-mono);
    font-size: 11px;
}
.directory-chip:hover { border-color: var(--dir-accent); color: var(--dir-accent-bright) !important; }
.directory-chip-remove { color: var(--dir-faint); font-size: 14px; line-height: 1; }
.directory-chip-clear {
    display: inline-flex;
    align-items: center;
    padding: 6px 4px;
    color: var(--dir-accent-bright) !important;
    font-family: var(--dir-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.directory-main, .directory-shell { overflow-x: clip; }

@media (max-width: 1100px) {
    .directory-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .directory-client-promo { grid-template-columns: 1fr; gap: 26px; }
    .home .directory-client-promo-copy { align-self: start; }
}
@media (max-width: 800px) {
    .home .home-intro { padding: 30px 0 24px; }
    .home-summary { max-width: none; font-size: 36px; }
    .home-hero-viewport { height: auto; aspect-ratio: 4 / 3; }
    .home-summary::before { margin-bottom: 16px; }
    .directory-client-promo { padding: 20px; }
    .home-fact-row { gap: 10px 22px; }
    .home-fact-row > div { padding-right: 0; }
    .home-fact-row > div + div { padding-left: 0; border-left: 0; }
    .directory-fields { grid-template-columns: 1fr; }
}

/* Chart and leftover layout tokens, so world/client pages can share this sheet. */
.directory-body {
    --panel: var(--dir-surface);
    --line: var(--dir-line);
    --muted: var(--dir-muted);
    --accent: var(--dir-accent);
    --accent-bright: var(--dir-accent-bright);
    --text: var(--dir-text);
    --on-accent: var(--dir-bg);
    --measure: 720px;
    --font-sans: var(--dir-sans);
}

.directory-page { padding-top: 28px; padding-bottom: 48px; }
.tile-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--dir-muted); font-family: var(--dir-serif); font-size: 56px; background: linear-gradient(145deg, var(--dir-raised), var(--dir-surface)); }
.tile-placeholder[hidden] { display: none; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dir-faint); }
.dot-on { background: var(--dir-live); box-shadow: 0 0 0 4px rgba(61, 220, 140, .12); }
.btn { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--dir-accent); font-size: 13px; font-weight: 600; }
.btn-fill { background: var(--dir-accent); color: var(--dir-bg) !important; }
.btn-fill:hover { background: var(--dir-accent-bright); color: var(--dir-bg) !important; }
.btn-outline { color: var(--dir-text); border-color: var(--dir-line); }
.btn-outline:hover { border-color: var(--dir-accent); color: var(--dir-accent-bright); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; margin: 0; font-size: 13px; }
.fact { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--dir-line-soft); }
.facts dt { flex: none; width: 110px; color: var(--dir-faint); font-family: var(--dir-mono); font-size: 11px; text-transform: uppercase; }
.facts dd { margin: 0; min-width: 0; }
.sources-line { margin-top: 14px !important; color: var(--dir-muted); font-size: 13px; }
.sources-line a { color: var(--dir-accent-bright); }
.story { max-width: var(--measure); }
.story p { max-width: var(--measure); margin: 0 0 1em !important; color: var(--dir-muted); }
.mapping-note, .stats-note { color: var(--dir-muted); font-size: 14px; max-width: var(--measure); }
.chart-figure { margin: 0 0 16px; }
.chart-figure figcaption { padding-top: 6px; color: var(--dir-faint); font-family: var(--dir-mono); font-size: 11px; }
.chart { display: block; width: 100%; height: auto; border: 1px solid var(--dir-line); background: var(--dir-surface); }
.chart-offline { fill: var(--dir-line); opacity: .6; }
.chart-axis, .chart-tick { stroke: var(--dir-line); stroke-width: 1; }
.chart-line, .chart-avg { fill: none; stroke: var(--dir-players); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-bar { fill: var(--dir-players); opacity: .3; }
.chart-dot { fill: var(--dir-players); }
.chart-label { fill: var(--dir-muted); font-family: var(--dir-sans); font-size: 11px; }
.chart-data { font-size: 12px; color: var(--dir-muted); }
.chart-data summary { cursor: pointer; }
.chart-data table { margin-top: 6px; border-collapse: collapse; color: var(--dir-text); }
.chart-data th, .chart-data td { padding: 2px 12px 2px 0; text-align: left; border-bottom: 1px solid var(--dir-line); font-weight: 400; }
.copy { margin-left: 8px; padding: 0; border: 0; border-bottom: 1px solid var(--dir-line); background: none; color: var(--dir-accent-bright); font: inherit; font-size: 12px; cursor: pointer; }
.lead { max-width: var(--measure); color: var(--dir-muted); font-size: 16px; }
.section-label {
    margin: 40px 0 16px;
    padding-top: 10px;
    border-top: 1px solid var(--dir-line-soft);
    color: var(--dir-faint);
    font-family: var(--dir-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.plain-list { list-style: none; margin: 0 0 8px; padding: 0; max-width: var(--measure); }
.plain-list li { padding: 10px 0; border-bottom: 1px solid var(--dir-line-soft); color: var(--dir-muted); }
.plain-list li:last-child { border-bottom: 0; }
.screens { display: flex; flex-direction: column; gap: 24px; margin: 0 0 16px; }
.screen { margin: 0; padding: clamp(12px, 2.5vw, 32px); border-radius: 12px; background: var(--dir-raised); }
.screen img { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--dir-surface); box-shadow: 0 0 clamp(32px, 4vw, 56px) 8px rgba(0, 0, 0, .58), 0 0 20px 2px rgba(0, 0, 0, .38); }
.screen figcaption { padding: 22px 0 0; color: var(--dir-faint); font-family: var(--dir-mono); font-size: 11px; }
.claim-token {
    margin: 0 0 16px;
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--dir-bg);
}
.claim-token code {
    font-family: var(--dir-mono);
    font-size: 22px;
    letter-spacing: .03em;
    color: var(--dir-accent-bright);
}
.claim-result, .claim-wait { margin: 14px 0 0; }
#claim-actions { margin: 0; }
.owner { max-width: 760px; }
.owner.admin { max-width: none; }
.admin .owner-lede { max-width: 70ch; }
.admin-split h2 { margin: 0 0 12px; font-size: 16px; font-weight: 650; }
.owner-head { margin-bottom: 28px; }
.owner h1 { margin: 0 0 10px; font-size: clamp(32px, 4vw, 44px); font-weight: 500; letter-spacing: -.035em; line-height: .95; }
.owner-lede { max-width: 42ch; color: var(--dir-muted); font-size: 16px; }
.owner > .claim-result { margin: 0 0 22px; color: var(--dir-accent-bright); }
.owner-form { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.owner-card {
    padding: 22px 22px 20px;
    border: 1px solid var(--dir-line);
    border-radius: 12px;
    background: var(--dir-surface);
}
.owner-card + .owner-card { margin-top: 16px; }
.owner-form .owner-card + .owner-card { margin-top: 0; }
.owner-card-head { margin-bottom: 16px; }
.owner-card-head h2 {
    margin: 0;
    color: var(--dir-faint);
    font-family: var(--dir-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.owner-card-head p { margin-top: 6px !important; color: var(--dir-muted); font-size: 14px; }
.owner-fields { display: grid; gap: 14px; }
.owner-address { grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, .7fr); }
.owner-links { grid-template-columns: 1fr 1fr; }
.owner-about { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.owner-about label:first-child { grid-column: 1 / -1; }
.owner-engine { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin-top: 14px; }
.owner-fields label,
.owner-row label,
.owner-schema label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    color: var(--dir-text);
    font-size: 13px;
}
.owner-row { display: grid; gap: 14px 12px; }
.owner-card input,
.owner-card select,
.owner-card textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--dir-line);
    border-radius: 10px;
    background: var(--dir-rail);
    color: var(--dir-text);
    font: inherit;
    font-size: 14px;
}
.owner-card input,
.owner-card select { height: 42px; padding: 0 12px; }
.owner-card input[type="number"] { appearance: textfield; }
.owner-card input[type="number"]::-webkit-outer-spin-button,
.owner-card input[type="number"]::-webkit-inner-spin-button { margin: 0; appearance: none; }
.owner-card textarea { min-height: 9.5rem; padding: 12px; line-height: 1.5; resize: vertical; }
.owner-card input::placeholder { color: var(--dir-faint); }
.owner-card input:hover,
.owner-card select:hover,
.owner-card textarea:hover { border-color: var(--dir-muted); }
.owner-card input:focus,
.owner-card select:focus,
.owner-card textarea:focus {
    outline: 0;
    border-color: var(--dir-accent);
    box-shadow: 0 0 0 3px rgba(226, 165, 58, .18);
}
.owner-schema textarea {
    min-height: 18rem;
    border-radius: 12px;
    background: var(--dir-bg);
    color: var(--dir-text);
    font-family: var(--dir-mono);
    font-size: 12px;
    line-height: 1.6;
}
.owner-save { display: flex; justify-content: flex-end; margin: 4px 0 0 !important; }
.owner-form > .owner-save { margin-top: 2px !important; }
.owner .btn {
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--dir-sans);
    font-size: 14px;
}
.owner .btn:focus-visible { outline: 1px solid var(--dir-accent-bright); outline-offset: 2px; }
.owner-error { margin: 0 0 14px !important; color: #E07A5F; font-size: 14px; }
.owner-note { margin-top: 12px !important; color: var(--dir-faint); font-size: 13px; }
.owner-head .owner-note { margin-top: 14px !important; color: var(--dir-accent-bright); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th {
    padding: 0 12px 8px 0;
    color: var(--dir-faint);
    font-family: var(--dir-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}
.admin-table td { padding: 10px 12px 10px 0; border-top: 1px solid var(--dir-line-soft); vertical-align: baseline; }
.admin-table a { color: var(--dir-accent-bright); }
.admin-stats { display: flex; flex-wrap: wrap; gap: 18px 28px; margin: 0 0 18px; }
.admin-stats div { min-width: 5.5rem; }
.admin-stats dt { color: var(--dir-faint); font-size: 12px; }
.admin-stats dd { margin: 2px 0 0; font-size: 22px; font-weight: 650; letter-spacing: -.03em; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.admin-nav a { padding: 7px 14px; border-radius: 999px; color: var(--dir-muted); font-size: 14px; }
.admin-nav a[aria-current="page"] { background: var(--dir-raised); color: var(--dir-text); }
.admin-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.admin-split .owner-card + .owner-card,
.admin .owner-card + .owner-card { margin-top: 0; }
.admin-table td:last-child,
.admin-table th:last-child,
.admin-table th.num,
.admin-table td.num { text-align: right; white-space: nowrap; }
.admin-pager { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-top: 14px; color: var(--dir-faint); font-size: 14px; }
.admin-pager a { color: var(--dir-accent-bright); }
.admin-split h3, .admin-subhead { margin: 0 0 8px; font-size: 14px; font-weight: 650; }
.admin-subhead { margin-top: 22px; }
.owner-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 8px; }
.owner-facts .fact { display: block; padding: 0 0 10px; }
.owner-facts dt { width: auto; margin-bottom: 4px; }
.owner-facts dd { color: var(--dir-text); font-size: 14px; }
.owner-catalog { margin-top: 8px; }
.owner-catalog .section-label {
    margin: 14px 0 8px;
    padding-top: 12px;
    font-family: var(--dir-mono);
    font-weight: 400;
}
.owner-read {
    max-height: 9.5rem;
    margin: 0;
    padding: 12px 14px;
    overflow: auto;
    border-radius: 10px;
    background: var(--dir-bg);
    color: var(--dir-muted);
    font-family: var(--dir-mono);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
}
@media (max-width: 700px) {
    .owner-card { padding: 18px 16px 16px; }
    .owner-address,
    .owner-links,
    .owner-engine,
    .owner-facts { grid-template-columns: 1fr; }
    .owner-about,
    .account-link-row { grid-template-columns: minmax(0, 1fr) auto auto; }
    .account-link-address { display: none; }
    .account-worlds li { grid-template-columns: minmax(0, 1fr) auto; }
    .account-worlds span { display: none; }
}
.account-about { min-height: 5.5rem; }
.account-link-list { list-style: none; margin: 16px 0 0; padding: 0; }
.account-link-row {
    display: grid;
    grid-template-columns: minmax(0, 140px) minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: baseline;
    padding: 10px 0;
    border-top: 1px solid var(--dir-line-soft);
}
.account-link-name { color: var(--dir-text); }
.account-link-address { overflow: hidden; color: var(--dir-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-link-edit, .account-link-delete {
    padding: 0;
    border: 0;
    background: none;
    color: var(--dir-accent-bright);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.account-link-delete { color: var(--dir-faint); }
.account-link-delete:hover { color: #E07A5F; }
.account-link-empty { margin: 14px 0 0 !important; color: var(--dir-faint); font-size: 14px; }
.account-link-add { margin: 14px 0 0 !important; }
.account-dialog {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--dir-line);
    border-radius: 12px;
    background: var(--dir-surface);
    color: var(--dir-text);
}
.account-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.account-dialog-form { display: grid; gap: 14px; padding: 22px; }
.account-dialog-form h2 { margin: 0; font-size: 22px; }
.account-dialog-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.account-dialog-form input {
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--dir-line);
    border-radius: 10px;
    background: var(--dir-rail);
    color: var(--dir-text);
    font: inherit;
    font-size: 14px;
}
.account-dialog-form input:focus { outline: 0; border-color: var(--dir-accent); box-shadow: 0 0 0 3px rgba(226, 165, 58, .18); }
.account-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 0 !important; }
.account-worlds { list-style: none; margin: 0; padding: 0; }
.account-worlds li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 16px;
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid var(--dir-line-soft);
}
.account-worlds a:first-child { color: var(--dir-text); }
.account-worlds span { color: var(--dir-faint); font-family: var(--dir-mono); font-size: 12px; }
.account-worlds a:last-child { color: var(--dir-accent-bright); }
.account-signout {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dir-faint);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.account-signout:hover { color: var(--dir-accent-bright); }
.fact-owner { display: flex; flex-direction: column; gap: 4px; }
.fact-owner a { color: var(--dir-accent-bright); }
.account-panel { max-width: 420px; }
.account-panel h1 { margin: 0 0 8px; font-size: 32px; font-weight: 560; letter-spacing: -.03em; }
.account-form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.account-form .directory-field { text-transform: none; letter-spacing: 0; font-family: var(--dir-sans); font-size: 13px; }
.account-errors, .account-field-error { color: #E07A5F; font-family: var(--dir-sans); font-size: 13px; text-transform: none; letter-spacing: 0; }
.account-errors ul { margin: 0; padding-left: 18px; }
.account-submit {
    height: 42px;
    margin-top: 6px;
    border: 0;
    border-radius: 10px;
    background: var(--dir-accent);
    color: #14100A;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.account-submit:hover { background: var(--dir-accent-bright); }
.account-submit:focus-visible { outline: 1px solid var(--dir-accent-bright); outline-offset: 2px; }
.account-switch { margin-top: 18px; color: var(--dir-muted); font-size: 14px; }
.account-role { margin: 0 0 16px; color: var(--dir-accent-bright); font-family: var(--dir-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* The Night Atlas browse screen and its follow-on sections. The tokens are the site's own now. */
.home-summary { max-width: none; font-family: var(--dir-sans); font-size: clamp(32px, 4vw, 44px); font-weight: 700; letter-spacing: -.03em; }
.home-summary::before { display: none; }
.atlas-lede { margin-top: 8px !important; color: var(--dir-muted); font-size: 16px; }
.home-intro { padding: 36px 0 22px; }

/* The listing: a search bar and two selects, the count, then one row per world (400x160 plate, name,
   pills, a two-line blurb, one bottom pill, and the gold way in), then the numbered pager. */
.atlas-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; }
.atlas-search { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border: 1px solid var(--dir-line); border-radius: 10px; background: var(--dir-surface); }
.atlas-search:focus-within { border-color: var(--dir-faint); }
.atlas-search svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: var(--dir-muted); stroke-width: 1.8; }
.atlas-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--dir-text); font: inherit; font-size: 16px; }
.atlas-search input::placeholder { color: var(--dir-faint); }
.atlas-select { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border: 1px solid var(--dir-line); border-radius: 10px; background: var(--dir-surface); color: var(--dir-text); font-size: 16px; white-space: nowrap; }
.atlas-select:focus-within { border-color: var(--dir-faint); }
.atlas-select select {
    height: 100%;
    padding: 0 26px 0 2px;
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2393A4B8' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 2px center;
    color: var(--dir-text);
    font: inherit;
    cursor: pointer;
}
.atlas-select select { flex: 1; }
.atlas-select select option { background: var(--dir-surface); color: var(--dir-text); }
.atlas-select .directory-dot { box-shadow: none; }
.atlas-check { cursor: pointer; }
.atlas-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--dir-live); cursor: pointer; }
.directory-dot.is-off { background: var(--dir-faint); }
.atlas-count { margin: 14px 0 12px !important; color: var(--dir-muted); font-size: 14px; }
.atlas-rows { display: grid; gap: 14px; }
.atlas-row {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--dir-line);
    border-radius: 12px;
    background: var(--dir-surface);
}
.atlas-row:hover { border-color: var(--dir-faint); }
.atlas-row .atlas-art { align-self: stretch; height: auto; min-height: 160px; border-radius: 0; aspect-ratio: auto; }
.atlas-art { position: relative; display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 9; background: var(--dir-raised); }
.atlas-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.atlas-row .atlas-art img,
.atlas-row .atlas-art .directory-card-placeholder { position: absolute; inset: 0; }
.atlas-art .directory-card-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--dir-muted); font-family: var(--dir-serif); font-size: 28px; }
.atlas-art .directory-card-placeholder[hidden] { display: none; }
.atlas-copy { min-width: 0; }
.atlas-row .atlas-copy { padding: 12px 0; }
.atlas-copy h3 { font-family: var(--dir-sans); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.atlas-copy h3 a { color: var(--dir-text); }
.atlas-copy h3 a:hover { color: var(--dir-accent-bright); }
.atlas-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 6px !important; }
.atlas-pills span { padding: 3px 11px; border: 1px solid var(--dir-line); border-radius: 999px; color: var(--dir-muted); font-size: 13px; line-height: 1.4; }
.atlas-pills .is-live { padding-left: 4px; border: 0; color: var(--dir-text); }
.atlas-pills .is-live::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--dir-live); }
.atlas-blurb { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--dir-muted); font-size: 14.5px; line-height: 1.4; }
.atlas-tags span { display: inline-block; margin-top: 6px; padding: 3px 11px; border: 1px solid var(--dir-line); border-radius: 999px; color: var(--dir-muted); font-size: 13px; line-height: 1.4; }
.atlas-tags .atlas-beginner { border-color: rgba(61, 220, 140, .35); color: var(--dir-live); cursor: help; }
.atlas-beginner::before { content: "\2618\00a0"; }
.atlas-go { align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 0 28px; border-left: 1px solid var(--dir-line); color: var(--dir-accent) !important; font-size: 17px; font-weight: 600; white-space: nowrap; }
.atlas-go:hover { color: var(--dir-accent-bright) !important; }
.atlas-row .atlas-go { margin: 22px 0; }
/* The pager sits in the middle of the row, the showing line at the right, as in the mockup. */
.atlas-pagebar { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.atlas-pagebar .atlas-showing { position: absolute; right: 0; }
.atlas-pager { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-pager a,
.atlas-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 6px; color: var(--dir-muted); font-size: 15px; }
.atlas-pager a:hover { background: var(--dir-surface); color: var(--dir-text); }
.atlas-pager span[aria-current="page"] { background: var(--dir-accent); color: #14100A; font-weight: 600; }
.atlas-pager-next { font-size: 20px !important; }
.atlas-showing { color: var(--dir-muted); font-size: 14px; }

/* The advanced filters on /worlds, folded under the bar. */
.atlas-browse .directory-advanced { margin: 0 0 16px; border: 1px solid var(--dir-line); border-radius: 10px; background: var(--dir-surface); }
.atlas-browse .directory-advanced > summary { padding: 12px 16px; border-radius: 10px; color: var(--dir-muted); font-family: var(--dir-sans); font-size: 14px; letter-spacing: 0; text-transform: none; cursor: pointer; }
.atlas-browse .directory-advanced > summary:hover { color: var(--dir-text); }
.atlas-browse .directory-advanced > summary::after { border-color: var(--dir-muted); }
.atlas-browse .directory-field input,
.atlas-browse .directory-field select,
.atlas-browse .directory-choice { border-color: var(--dir-line); background: var(--dir-raised); color: var(--dir-text); }
.atlas-browse .directory-advanced-actions button { background: var(--dir-accent); color: #14100A; }
.atlas-browse .directory-advanced-actions button:hover { background: var(--dir-accent-bright); }
.home-hero-copy strong { font-family: var(--dir-sans); }
.home-hero-viewport { border: 1px solid var(--dir-line); border-radius: 16px; }
.home-hero-head .directory-kicker { font-family: var(--dir-sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--dir-muted); }
.atlas-follow { margin-top: 42px; }
.atlas-follow-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.atlas-follow h2 { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.atlas-follow-head a { color: var(--dir-accent-bright); font-weight: 650; }
.atlas-rows-compact { display: flex; flex-direction: column; gap: 12px; }
.atlas-arrive {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 14px 18px 14px 14px;
    border: 1px solid var(--dir-line);
    border-radius: 16px;
    background: var(--dir-surface);
}
.atlas-rows-compact .atlas-art { width: 148px; }
.home-facts { padding: 0; border: 0; }
.home-fact-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-fact-row > div,
.home-fact-row > div + div { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--dir-line); border-radius: 14px; background: var(--dir-surface); }
.home-fact-row dd { font-family: var(--dir-sans); font-size: 28px; font-weight: 650; letter-spacing: -.03em; }
.home-fact-details { gap: 8px; }
.home-fact-details span { padding: 8px 12px; border: 1px solid var(--dir-line); border-radius: 999px; background: var(--dir-surface); }
.directory-client-promo { border: 1px solid var(--dir-line); border-radius: 16px; background: var(--dir-surface); }
.directory-client-promo .directory-client-actions a.directory-topbar-button { display: inline-flex; padding: 8px 14px; border: 0; border-bottom: 0; border-radius: 8px; background: var(--dir-accent); color: #1A1408 !important; }
.directory-open { padding: 18px; border: 1px solid var(--dir-line); border-radius: 16px; background: var(--dir-surface); }
.directory-open-list a { border-radius: 12px; }
.directory-footer { border-top: 1px solid var(--dir-line); letter-spacing: 0; text-transform: none; font-family: var(--dir-sans); font-size: 13px; }
@media (max-width: 1100px) {
    /* The bar's four controls do not fit on one line beside the rail here: they wrap, the search
       field keeping at least 240px and taking whatever width its line has left. */
    .atlas-bar { display: flex; flex-wrap: wrap; }
    .atlas-search { flex: 1 1 240px; min-width: 240px; }
    .atlas-bar > .atlas-select { flex: 0 0 auto; }
}
@media (max-width: 800px) {
    .atlas-bar { display: grid; grid-template-columns: 1fr; }
    .atlas-search { min-width: 0; }
    .atlas-row,
    .atlas-arrive { grid-template-columns: 1fr; }
    .atlas-row { gap: 0; }
    .atlas-row .atlas-art { min-height: 180px; }
    .atlas-row .atlas-copy { padding: 14px 16px; }
    .atlas-go { justify-self: start; }
    .atlas-row .atlas-go { justify-self: stretch; margin: 0; padding: 12px 16px; border-left: 0; border-top: 1px solid var(--dir-line); }
    .atlas-pagebar { flex-direction: column; align-items: flex-start; }
    .atlas-pagebar .atlas-showing { position: static; }
}

/* A world's own page (/worlds/{id}): the shared breadcrumbs band, a full-bleed hero with the title over a
   bottom gradient, a chips-and-actions bar under a hairline, About beside the details card, then "A
   glimpse inside". Everything is scoped under .world-page; the bare .facts/.fact rules above serve the
   owner's edit page, so the card's variants stay under .world-card. The hero's negative margins equal
   .directory-page's horizontal padding (32px, 16px under 800px); the negative top margin cancels that
   same padding so the hero sits flush against the breadcrumbs band's bottom edge. */
.world-page { margin-top: -28px; }
.world-page .world-hero { position: relative; height: 320px; margin: 0 -32px; overflow: hidden; background: var(--dir-surface); }
.world-page .world-hero-art { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.world-page .world-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 20, 34, .05) 30%, rgba(12, 20, 34, .92) 100%); pointer-events: none; }
.world-page .world-hero .tile-placeholder:not([hidden]) { display: grid; place-items: center; height: 100%; font-size: 120px; color: var(--dir-line); }
.world-page .world-hero-copy { position: absolute; left: 32px; right: 32px; bottom: 26px; z-index: 1; display: grid; gap: 8px; justify-items: start; }
.world-page .world-hero-copy h1 { font-size: clamp(40px, 5vw, 60px); letter-spacing: -.02em; line-height: 1; }
.world-page .world-tagline { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 42rem; font-size: 22px; line-height: 1.3; color: var(--dir-muted); }
.world-page .world-verified { padding: 4px 12px; border: 1px solid var(--dir-line); border-radius: 999px; background: rgba(12, 20, 34, .5); font-size: 13px; color: var(--dir-muted); }
.world-page .art-caption { margin: 6px 0 0; color: var(--dir-faint); font-size: 12px; }

.world-page .world-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--dir-line); margin-bottom: 22px; }
.world-page .chips-line { display: flex; flex-wrap: wrap; gap: 8px; }
.world-page .chip { display: inline-flex; align-items: center; padding: 5px 14px; border: 1px solid var(--dir-line); border-radius: 999px; font-size: 14px; color: var(--dir-muted); }
.world-page a.chip:hover { border-color: var(--dir-accent); color: var(--dir-text); }
.world-page .chip-beginner { color: var(--dir-live); border-color: rgba(61, 220, 140, .35); }
.world-page .chip-adult { border-color: rgba(220, 96, 96, .45); cursor: help; }
.world-page .world-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.world-page .world-count { display: flex; align-items: center; gap: 8px; color: var(--dir-text); white-space: nowrap; }
.world-page .world-play-group { display: grid; justify-items: center; gap: 4px; }
.world-page .world-play { padding: 12px 22px; border-radius: 8px; background: var(--dir-accent); color: #14100A; font-weight: 600; }
.world-page .world-play:hover { background: var(--dir-accent-bright); color: #14100A; }
.world-page .world-play-group small { font-size: 12px; color: var(--dir-faint); }
.world-page .world-visit { padding-left: 22px; border-left: 1px solid var(--dir-line); color: var(--dir-text); white-space: nowrap; }

.world-page .world-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.world-page .world-about,
.world-page .world-card { padding: 22px 24px; background: var(--dir-surface); border: 1px solid var(--dir-line); border-radius: 12px; }
.world-page .world-about h2,
.world-page .world-card h2 { font-size: 22px; margin-bottom: 12px; }
.world-page .story { max-width: none; }
.world-page .story p { max-width: none; margin: 0 0 10px !important; color: var(--dir-muted); font-size: 16px; line-height: 1.6; }
.world-page .mapping-note { margin-top: 12px; }
.world-page .world-place-heading { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--dir-line); }
.world-page .world-place { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; }
.world-page .world-place div + div { border-left: 1px solid var(--dir-line); padding-left: 16px; }
.world-page .world-place dt { font-weight: 600; }
.world-page .world-place dd { margin: 4px 0 0; color: var(--dir-muted); font-size: 14px; }

.world-page .world-card .facts { display: block; margin: 0; font-size: 15px; }
.world-page .world-card .fact { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 0; }
.world-page .world-card .facts dt { width: auto; color: var(--dir-muted); font-family: var(--dir-sans); font-size: inherit; letter-spacing: 0; text-transform: none; }
.world-page .world-card .facts dd { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.world-page .world-card .facts dd.fact-owner { flex-direction: column; align-items: flex-start; gap: 4px; }
.world-page .world-card .facts-quiet { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dir-line); font-size: 14px; }
.world-page .world-connect { margin: 18px 0 8px; font-size: 15px; }
.world-page .world-address { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--dir-bg); border: 1px solid var(--dir-line); border-radius: 8px; }
.world-page .world-address code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--dir-mono); }
.world-page .world-address .copy { margin: 0; }
.world-page .world-address-note { margin-top: 18px; color: var(--dir-muted); }
.world-page .world-address-note a,
.world-page .world-links a,
.world-page .world-claim a { color: var(--dir-accent); }
.world-page .world-links { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-top: 14px; font-size: 14px; }
.world-page .world-links small { margin-left: auto; color: var(--dir-faint); font-size: 12px; }
.world-page .sources-line { margin-top: 10px !important; }
.world-page .world-claim { margin-top: 12px; font-size: 14px; }

.world-page .world-glimpse { margin-top: 18px; padding: 22px 24px; background: var(--dir-surface); border: 1px solid var(--dir-line); border-radius: 12px; }
.world-page .world-glimpse h2 { font-size: 22px; margin-bottom: 14px; }
.world-page .world-glimpse-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.world-page .world-glimpse-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.world-page .world-inset,
.world-page .world-around { margin: 0; min-width: 0; }
.world-page .world-inset-body { display: grid; gap: 14px; padding: 16px; background: var(--dir-bg); border: 1px solid var(--dir-line); border-radius: 8px; min-height: 200px; }
.world-page .world-inset-body .chart { border: 0; background: transparent; }
.world-page .world-around img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--dir-line); }
.world-page .world-inset figcaption,
.world-page .world-around figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--dir-muted); }
.world-page .world-inset figcaption span + span,
.world-page .world-around figcaption span + span { color: var(--dir-faint); text-align: right; }

@media (max-width: 800px) {
    .world-page .world-hero { height: 240px; margin: 0 -16px; }
    .world-page .world-hero-copy { left: 16px; right: 16px; bottom: 18px; }
    .world-page .world-tagline { font-size: 17px; }
    .world-page .world-split,
    .world-page .world-glimpse-grid,
    .world-page .world-place { grid-template-columns: minmax(0, 1fr); }
    .world-page .world-place div + div { border-left: 0; padding-left: 0; }
    .world-page .world-bar { flex-direction: column; align-items: stretch; }
    .world-page .world-bar-actions { justify-content: flex-start; }
    /* The play button and its note sit on the left edge, under the chips, not centred on the note. */
    .world-page .world-play-group { justify-items: start; text-align: left; }
    .world-page .world-visit { padding-left: 0; border-left: 0; }
}

/* The shared listing form's browser-only checkbox, the list of problems a post came back with, and the
   notice a new listing's owner sees on its world page. */
.owner-check { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--dir-text); font-size: 13px; }
.owner-card .owner-check input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--dir-accent); }
.owner-problems { display: grid; gap: 4px; padding-left: 18px; }
.owner-error a { color: var(--dir-accent-bright); text-decoration: underline; }
.world-notice { margin: 0 0 16px; padding: 12px 16px; border: 1px solid rgba(61,220,140,.35); border-radius: 10px; background: var(--dir-surface); color: var(--dir-text); }
.world-notice a { color: var(--dir-accent); }