:root {
    color-scheme: light;
    --ink: #173b35;
    --ink-soft: #315e4b;
    --muted: #55665d;
    --paper: #f8f8f1;
    --line: #d5dccf;
    --accent: #d7f283;
    --leaf: #4f7f3a;
    --focus: #2f7a4d;
    --amber: #fff1b4;
    --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
    --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-pixel: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* Runner info panel: a pixel-game card that belongs to the village scene. */
    --panel-ground: #faf3d9;
    --panel-ink: #243e38;
    --panel-frame: #294f46;
    --panel-button: #42665a;
    --panel-cream: #fff2cf;
    --panel-rule: #d7d5b7;
    --panel-muted: #55654f;
}

* { box-sizing: border-box; }

::selection { background: var(--accent); color: var(--ink); }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Top bar ─────────────────────────────── */
.topbar {
    min-height: 72px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4vw;
    gap: 16px;
}
.back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.back:hover { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; }
.brand {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .12em;
    white-space: nowrap;
}
.brand b { color: var(--leaf); }
.brand-divider { padding: 0 12px; color: #8a9885; font-weight: 500; }
.edition { font-size: 12px; letter-spacing: .12em; color: var(--muted); white-space: nowrap; }

/* ── Heading ─────────────────────────────── */
main { max-width: 1700px; margin: auto; padding: 40px 4vw 24px; }

.heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 3.4rem);
    line-height: 1.05;
    margin: 0 0 12px;
    font-weight: 800;
    letter-spacing: -.035em;
    text-wrap: balance;
}
h1 em { font-style: normal; color: var(--leaf); }
.event-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}
.event-name .sep { padding: 0 6px; }
.tagline { display: inline-flex; align-items: center; color: var(--ink); font-weight: 600; }
.live-dot {
    display: inline-block;
    background: var(--leaf);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

.count { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.count strong {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.count span { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ── World ───────────────────────────────── */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr); }

.world {
    position: relative;
    height: 640px;
    min-height: 420px;
    overflow: hidden;
    border-radius: 20px;
    background: #c2dcb6;
    border: 1px solid #b0c6a5;
    box-shadow: 0 1px 2px rgb(23 59 53 / .06), 0 12px 32px -12px rgb(23 59 53 / .18);
}
#world {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
    /* Keep scaled pixel scenery crisp; the backing store follows screen density. */
    image-rendering: pixelated;
}
#world:active, #world.dragging-runner { cursor: grabbing; }

.world-top, .world-bottom {
    position: absolute;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    z-index: 1;
    pointer-events: none;
}
.world-top { top: 20px; }
.world-bottom { bottom: 18px; flex-wrap: wrap; }
.world-label, #visible-count, .hint {
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.world-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgb(248 248 240 / .94);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}
#visible-count {
    background: var(--ink);
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.hint {
    background: rgb(248 248 240 / .94);
    font-weight: 500;
    color: var(--ink);
}
.controls { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; pointer-events: auto; }

#world-message {
    position: absolute;
    top: 45%;
    left: 15%;
    right: 15%;
    text-align: center;
    background: var(--paper);
    padding: 20px;
    border-radius: 14px;
    font-size: 15px;
}

/* ── Buttons ─────────────────────────────── */
button { font: inherit; }
button {
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    border-radius: 10px;
    padding: 10px 14px;
    min-height: 44px;
    transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
button:hover:not(:disabled) { background: var(--accent); border-color: #b9d567; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; padding: 0; }
.controls button:not(.icon-btn) { font-size: 13px; font-weight: 600; }
#follow[aria-pressed="true"] { background: var(--amber); border-color: #e3cd7a; }
#motion[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

button:focus-visible, a:focus-visible, #world:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}
#world:focus-visible { outline-offset: -4px; }

/* ── Runner info panel ───────────────────── */
.runner-panel {
    position: absolute;
    z-index: 6;
    width: 308px;
    background: var(--panel-ground);
    color: var(--panel-ink);
    border: 3px solid var(--panel-frame);
    box-shadow: 3px 3px 0 #a7b992, 6px 6px 0 rgb(41 79 70 / .33);
    font-family: var(--font-pixel);
}
.runner-panel[hidden] { display: none; }
.runner-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--panel-frame);
    color: #f8edc8;
    padding: 4px 4px 4px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
}
.runner-panel button {
    border-radius: 0;
    border: 2px solid var(--panel-frame);
    background: var(--panel-button);
    color: var(--panel-cream);
    font: 700 13px var(--font-pixel);
}
.runner-panel button:hover:not(:disabled) { background: var(--panel-frame); border-color: var(--panel-frame); }
.runner-panel button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
#runner-close {
    display: inline-grid;
    place-items: center;
    width: 36px;
    min-height: 36px;
    padding: 0;
    border-color: #90ab88;
    font-size: 22px;
    line-height: 1;
}
.runner-profile { display: flex; align-items: center; gap: 12px; padding: 14px 12px; }
#runner-portrait {
    width: 72px;
    height: 84px;
    flex-shrink: 0;
    image-rendering: pixelated;
    border: 2px solid #a4b88b;
    background: #d4dfb5;
}
.runner-status { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #4a6a36; }
.runner-panel h2 { margin: 6px 0; font: 700 17px/1.25 var(--font-pixel); overflow-wrap: anywhere; }
.runner-bib-label { font-size: 12px; color: var(--panel-muted); }
.runner-bib-label strong { color: var(--panel-frame); font-variant-numeric: tabular-nums; }
.runner-facts { margin: 0 12px; border-top: 2px solid var(--panel-rule); }
.runner-facts > div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; padding: 8px 0; font-size: 12px; }
.runner-facts dt { color: var(--panel-muted); }
.runner-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
#runner-mine {
    display: inline-block;
    margin: 2px 12px 10px;
    padding: 3px 8px;
    background: var(--accent);
    font-size: 12px;
    font-weight: 700;
    color: var(--panel-ink);
}
#runner-mine[hidden] { display: none; }
.runner-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 12px;
    background: #e8e6c9;
    font-size: 12px;
    color: var(--panel-muted);
}
#runner-follow { min-height: 40px; padding: 6px 14px; }
#runner-follow[aria-pressed="true"] { background: var(--amber); color: var(--panel-ink); }
#runner-follow[aria-pressed="true"]:hover:not(:disabled) { background: #f3dd8a; color: var(--panel-ink); }

footer { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); padding-top: 22px; }

/* ── Entry gate ──────────────────────────── */
.gate-page { min-height: 100vh; display: flex; flex-direction: column; }
.gate {
    flex: 1;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
    padding-top: clamp(40px, 8vh, 96px);
    padding-bottom: clamp(40px, 8vh, 96px);
}
.gate-lede { max-width: 46ch; margin: 22px 0 0; font-size: 17px; line-height: 1.6; color: var(--muted); }

.gate-ticket {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgb(23 59 53 / .06), 0 18px 40px -18px rgb(23 59 53 / .28);
}
.gate-ticket-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    background: var(--ink);
    color: #f1f5ea;
    border-radius: 19px 19px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.gate-ticket-head .icon { color: var(--accent); }
/* Ticket perforation: punched notches on both edges and a dashed tear line. */
.gate-ticket-body { position: relative; padding: 28px 24px 24px; border-top: 2px dashed var(--line); }
.gate-ticket-body::before, .gate-ticket-body::after {
    content: "";
    position: absolute;
    top: -12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--line);
}
.gate-ticket-body::before { left: -12px; clip-path: inset(0 0 0 50%); }
.gate-ticket-body::after { right: -12px; clip-path: inset(0 50% 0 0); }
.gate-ticket h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: -.03em;
    font-weight: 800;
    margin: 0 0 22px;
}
.gate-ticket label { display: block; font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.gate-ticket input {
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 1px solid #c4cdbf;
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    font: 700 22px var(--font-pixel);
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.gate-ticket input::placeholder { font-weight: 500; letter-spacing: .06em; color: #7b8a81; text-transform: none; }
.gate-ticket input:focus { outline: 3px solid var(--focus); outline-offset: 2px; background: #fff; }
.gate-ticket input[aria-invalid="true"] { border-color: #b3261e; background: #fff7f6; }
.gate-help, .gate-error { margin: 10px 0 20px; font-size: 14px; line-height: 1.5; }
.gate-help { color: var(--muted); }
.gate-help strong { color: var(--ink); }
.gate-error { color: #a1231b; font-weight: 600; }
.gate-submit {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    background: var(--ink);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.gate-submit:hover:not(:disabled) { background: var(--ink-soft); border-color: transparent; }
.gate-ticket-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--muted);
}
.gate-ticket-foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.gate-footer { max-width: 1700px; width: 100%; margin: 0 auto; padding: 0 4vw 24px; }

/* ── Responsive ──────────────────────────── */
@media (min-width: 1500px) { .world { height: 700px; } }

@media (max-width: 900px) {
    .gate { grid-template-columns: 1fr; align-items: start; gap: 28px; }
    .gate-lede { font-size: 15px; margin-top: 16px; }
}

@media (max-width: 1000px) {
    .edition { display: none; }
    .hint { display: none; }
    .world { height: 620px; }
}

@media (max-width: 700px) {
    .topbar { min-height: 56px; gap: 10px; }
    .back { font-size: 13px; gap: 6px; }
    .brand { font-size: 10px; letter-spacing: .1em; }
    .brand-divider { padding: 0 5px; }
    main { padding-top: 26px; }
    .heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 20px; }
    .event-name { flex-direction: column; align-items: flex-start; gap: 2px; }
    .event-name .sep { display: none; }
    .count strong { font-size: 2.25rem; }
    .world { height: min(72svh, 560px); border-radius: 16px; }
    .world-top, .world-bottom { left: 12px; right: 12px; }
    .world-top { top: 12px; }
    .world-bottom { bottom: 12px; }
    .world-label { font-size: 11px; padding: 9px 11px; }
    #visible-count { font-size: 11px; padding: 9px 10px; }
    .world-top { gap: 6px; }
    .controls { gap: 5px; flex-wrap: nowrap; }
    .controls button:not(.icon-btn) { font-size: 12px; padding: 8px 10px; white-space: nowrap; }
    /* On phones the panel docks under the top HUD so the controls stay reachable. */
    .runner-panel { width: calc(100% - 24px); left: 12px !important; top: 60px !important; bottom: auto; }
    .runner-profile { padding: 8px 12px; }
    #runner-portrait { width: 48px; height: 56px; }
    .runner-panel h2 { font-size: 15px; margin: 4px 0; }
    .runner-facts > div { padding: 5px 0; }
    footer > span:last-child { display: none; }
}

@media (max-width: 380px) {
    .world-label { font-size: 10px; }
    .brand-divider, .brand-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    button { transition: none; }
    button:active:not(:disabled) { transform: none; }
}

/* ── Full-screen village ─────────────────── */
/* The world is the page: no top bar, hero or footer, so the scene owns every pixel
   and the HUD pills carry identity, navigation and controls. */
.village-page { height: 100svh; overflow: hidden; overscroll-behavior: none; background: #c2dcb6; }
.village { max-width: none; height: 100svh; padding: 0; }
.village .world {
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    --hud-top: max(16px, env(safe-area-inset-top));
    --hud-side: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
    --hud-bottom: max(16px, env(safe-area-inset-bottom));
}
.village .world-top { top: var(--hud-top); left: var(--hud-side); right: var(--hud-side); align-items: flex-start; }
.village .world-bottom { bottom: var(--hud-bottom); left: var(--hud-side); right: var(--hud-side); align-items: flex-end; }
.village .world-label, .village #visible-count, .village .hint, .hud-title {
    box-shadow: 0 1px 2px rgb(23 59 53 / .08), 0 6px 16px -8px rgb(23 59 53 / .3);
}
.village .controls button { box-shadow: 0 1px 2px rgb(23 59 53 / .08), 0 6px 16px -8px rgb(23 59 53 / .3); }

.hud-title {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 4px 16px 4px 4px;
    border-radius: 12px;
    background: rgb(248 248 240 / .95);
    pointer-events: auto;
}
.hud-back {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    color: var(--ink);
    transition: background-color .18s var(--ease);
}
.hud-back:hover { background: var(--accent); }
.hud-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hud-brand {
    margin: 0;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hud-brand b { color: var(--leaf); }
.hud-brand-sub { font-weight: 700; color: var(--ink-soft); }
.hud-event { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.village #visible-count { flex-shrink: 0; padding: 14px 16px; }

.village .hint { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 14px; }
.hint-note { font-size: 12px; color: var(--muted); }

#world-message { color: var(--ink); }

@media (max-width: 1000px) {
    .village .hint { display: none; }
}

@media (max-width: 700px) {
    .village .world { --hud-top: max(10px, env(safe-area-inset-top)); --hud-side: max(10px, env(safe-area-inset-left), env(safe-area-inset-right)); --hud-bottom: max(10px, env(safe-area-inset-bottom)); }
    .hud-title { padding-right: 12px; }
    .hud-brand { font-size: 11px; }
    .hud-brand-sub { display: none; }
    /* Wrap rather than truncate: the date matters more than a single line. */
    .hud-event { font-size: 12px; white-space: normal; }
    .hud-date { white-space: nowrap; }
    .village #visible-count { padding: 9px 11px; font-size: 11px; line-height: 1.3; text-align: right; }
    .village #visible-count span { display: block; }
    .village .world-bottom { justify-content: center; }
    .village .controls { margin: 0 auto; }
    /* Dock the runner card under the top HUD on phones. */
    .village .runner-panel { top: calc(var(--hud-top) + 60px) !important; }
}