@font-face {
    font-family: "Alfa Slab One";
    src: url("/theme/fonts/alfa-slab-one.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Karla;
    src: url("/theme/fonts/karla.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --ink: #e9e2d0;
    --muted: #b9c3ad;
    --gold: #d9a441;
    --gold-hover: #f2c36a;
    --green: #c0ceb4;
    --line: #2b4431;
    --control-line: #687e62;
    --surface: #1a2a20;
    --surface-hover: #263e2d;
    --deep: #121c16;
    --heading: "Alfa Slab One", Georgia, serif;
    font: 1rem/1.55 Karla, system-ui, sans-serif;
}

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

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: radial-gradient(ellipse at 50% 4%, #23372a 0, var(--deep) 68%),
        var(--deep);
    isolation: isolate;
}

body::before, body::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    inset: 0 auto 0 0;
    width: min(29vw, 26rem);
    background: url("/theme/foliage.svg") left top / 100% auto no-repeat;
    opacity: .38;
}

body::after { inset: 0 0 0 auto; transform: scaleX(-1); }

a { color: var(--gold); text-underline-offset: .21em; }
a:hover { color: var(--gold-hover); }

.skip-link {
    position: absolute;
    z-index: 8;
    top: .75rem;
    left: .75rem;
    padding: .6rem .85rem;
    background: var(--gold);
    color: var(--deep);
    transform: translateY(calc(-100% - 1rem));
}
.skip-link:focus { transform: none; color: var(--deep); outline-color: var(--ink); }

.site-header {
    position: relative;
    z-index: 1;
    background: var(--deep);
    border-bottom: 1px solid var(--line);
}

.site-header-inner {
    max-width: 75rem;
    margin: auto;
    padding: .8rem clamp(1rem, 4vw, 3rem);
    min-height: 4.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem 1.5rem;
    flex-wrap: wrap;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: .72rem;
    color: var(--ink);
    text-decoration: none;
    font: 400 clamp(1.1rem, 2.4vw, 1.55rem)/1.1 var(--heading);
    letter-spacing: .035em;
}

.site-brand small {
    display: block;
    margin-top: .28rem;
    color: var(--gold);
    font: 700 .68rem/1 Karla, system-ui, sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.site-mark {
    flex: none;
    width: auto;
    height: clamp(2.75rem, 4.6vw, 3.5rem);
}

.site-nav { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .28rem; }
.portal-voice {
    display: grid;
    grid-template-columns: 4.65rem 9.4rem;
    grid-template-rows: auto 2.45rem;
    align-items: center;
    gap: 0 .55rem;
}
.portal-voice[hidden] { display: none; }
.portal-voice > button { position: relative; min-height: 44px; padding-inline: .35rem; }
.portal-voice > button[data-connected], .portal-voice > button[data-connected]:hover {
    background: #2b4433;
    border-color: var(--gold);
    color: var(--gold-hover);
    box-shadow: inset 0 0 0 1px var(--gold);
}
.portal-voice > button[data-connected]::after {
    content: "";
    position: absolute;
    inset-block-start: .32rem;
    inset-inline-end: .36rem;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: #ff7064;
    animation: voice-connection-pulse 1.7s ease-out infinite;
}
@keyframes voice-connection-pulse {
    0% { box-shadow: 0 0 0 0 #ff7064b0; }
    75%, 100% { box-shadow: 0 0 0 .32rem #ff706400; }
}
@media (prefers-reduced-motion: reduce) {
    .portal-voice > button[data-connected]::after { animation: none; }
}
.portal-voice > [data-voice-status] {
    grid-column: 1 / -1;
    min-width: 0;
    align-self: start;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.25;
}
.site-nav a, .site-menu summary {
    display: flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: .45rem;
    color: var(--muted);
    font-size: .93rem;
    font-weight: 700;
    text-decoration: none;
    padding: .45rem .7rem;
}
.site-nav a:hover, .site-nav a[aria-current="page"],
.site-menu summary:hover, .site-menu[open] summary,
.site-menu:has([aria-current="page"]) summary { color: var(--gold); background: var(--surface-hover); }

.site-menu { position: relative; }
.site-menu summary { cursor: pointer; list-style: none; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary::after { content: "▾"; margin-inline-start: .35em; color: var(--gold); }
.site-menu-panel {
    position: absolute;
    z-index: 5;
    top: calc(100% + .4rem);
    right: 0;
    width: min(17rem, calc(100vw - 2rem));
    padding: .38rem;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: var(--surface);
    box-shadow: 0 .7rem 1.7rem #0008;
}
.site-menu[open]:focus-within .site-menu-panel { z-index: 6; }
.site-menu-panel form { display: block; margin: .2rem 0 0; }
.site-menu-panel button { width: 100%; text-align: left; }

.voice-settings-panel {
    width: min(21rem, calc(100vw - 2rem));
    max-height: min(65vh, 34rem);
    overflow: auto;
    padding: .75rem;
}
.voice-settings-panel fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
.voice-settings-panel fieldset + fieldset { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.voice-settings-panel legend { font-weight: 700; color: var(--ink); padding: 0 .25rem 0 0; }
.voice-settings-panel p { margin: .3rem 0 0; font-size: .87rem; color: var(--muted); }
.voice-slider { display: grid; gap: .12rem; margin: .4rem 0; }
.voice-slider span, .voice-meter { display: flex; justify-content: space-between; gap: .5rem; }
.voice-slider input { width: 100%; accent-color: var(--gold); }
.voice-slider output { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--gold-hover); }
.voice-meter { align-items: center; margin: .45rem 0; }
.voice-meter meter { width: 50%; }
.voice-toggle { display: flex; gap: .45rem; align-items: center; min-height: 1.9rem; }
.voice-toggle input { accent-color: var(--gold); }
.voice-settings-panel .voice-mute {
    width: 6.5rem;
    min-height: 2.45rem;
    text-align: center;
    margin: .25rem 0;
}
.voice-settings-panel ul { list-style: none; padding: 0; margin: 0; }
.voice-settings-panel li { padding: .45rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.voice-settings-panel li:last-child { border-bottom: 0; }

main {
    width: min(calc(100% - clamp(2rem, 12vw, 9rem)), 69rem);
    margin: clamp(1.15rem, 4vw, 3.5rem) auto 2rem;
    padding: clamp(1rem, 3vw, 2rem);
    background: #16241beb;
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 1.2rem 4rem #0006;
    overflow-wrap: anywhere;
}

main > a:first-child { font-size: .86rem; }
main h1, main h2, main h3 { font: 400 1.2rem/1.12 var(--heading); }
main h1 { margin: .3em 0 .38em; font-size: clamp(1.85rem, 4.4vw, 3.4rem); letter-spacing: -.025em; }
main h2 { margin: 1.25em 0 .45em; font-size: clamp(1.25rem, 2.7vw, 1.75rem); }
main h3 { margin: 1.15em 0 .55em; font-size: 1.15rem; }
main p { color: var(--muted); margin: .55rem 0 1rem; }

.portal-hero {
    position: relative;
    isolation: isolate;
    min-height: 17rem;
    display: grid;
    align-content: center;
    align-items: start;
    justify-items: start;
    padding: clamp(1.3rem, 4.5vw, 3.5rem);
    overflow: hidden;
    background: linear-gradient(90deg, #121c16 2%, #121c16dd 48%, #121c1659 100%),
        url("/theme/jungle.svg") center / cover no-repeat, var(--deep);
}
.portal-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: url("/theme/emblem.svg") right 4% center / min(35%, 25rem) auto no-repeat;
    opacity: .29;
    pointer-events: none;
}

main:has(> .landing-hero) {
    width: min(calc(100% - 2rem), 74rem);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.landing-hero {
    min-height: clamp(24rem, 39vw, 32rem);
    padding: clamp(1.5rem, 6vw, 5rem);
    background-image: linear-gradient(90deg, #111a14ec 7%, #111a14c9 40%, #121c1610 90%),
        url("/theme/jungle.svg");
}
.landing-hero::before {
    background-position: right -2.3rem top 52%;
    background-size: min(49%, 37rem) auto;
    opacity: .92;
}
.landing-hero h1 {
    margin: .1em 0 .18em;
    font-size: clamp(2.4rem, 6.3vw, 4.7rem);
}
.landing-hero p:not(.eyebrow) {
    max-width: min(42ch, 57%);
    font-size: clamp(1rem, 2vw, 1.2rem);
    margin-bottom: 1.45rem;
}
.portal-hero h1, .portal-hero p { max-width: 34rem; }
.portal-hero p { color: var(--ink); }
.portal-hero .eyebrow {
    color: var(--gold);
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
}
.portal-hero .hero-tag {
    font-size: .78rem;
    letter-spacing: .07em;
    padding: .25rem .6rem;
    border: 1px solid var(--control-line);
    border-radius: 5rem;
}
.dashboard-hero { min-height: 15rem; }

.portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: .9rem;
    margin: 1rem 0;
}

section, fieldset {
    min-width: 0;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: .72rem;
    background-color: var(--surface);
}

main > section, main > fieldset { margin: .9rem 0; }
section h2:first-child { margin-top: 0; }
section legend, fieldset legend { padding: 0 .35rem; color: var(--gold); }
main dl {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: .55rem .9rem;
    margin: .75rem 0;
}
dt { color: var(--green); font-size: .9rem; font-weight: 650; }
dd { margin: 0; }

ul { padding-left: 1.1rem; }
li { margin: .4rem 0; }
li::marker { color: var(--green); }

.player-list {
    max-height: min(25rem, 55vh);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: .5rem;
    scrollbar-color: var(--control-line) var(--deep);
}
.player-table { width: 100%; border-spacing: 0; text-align: left; font-size: .9rem; }
.player-table th, .player-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--line); }
.player-table th { position: sticky; top: 0; background: var(--surface-hover); color: var(--ink); white-space: nowrap; }
.player-table td:first-child, .player-table td:nth-child(n+3) { white-space: nowrap; }
.player-table td:nth-child(2) { min-width: 8rem; }
.player-table tbody tr:nth-child(even) { background: var(--deep); }
.player-table tbody tr:hover, .player-table tbody tr:focus-within { background: var(--surface-hover); }
.player-list p { margin: .65rem .75rem; }
.player-list-pages { display: flex; align-items: center; gap: 1rem; margin-top: .65rem; }

form {
    display: flex;
    align-items: end;
    gap: .65rem;
    flex-wrap: wrap;
    margin: .8rem 0;
}
label { color: var(--muted); }
form label { display: grid; gap: .25rem; }
form label:has(input[type="checkbox"]) { display: flex; align-items: center; }
input, select, textarea, button, .button {
    max-width: 100%;
    font: inherit;
    border: 1px solid var(--control-line);
    border-radius: .45rem;
}
input:not([type="range"]):not([type="checkbox"]), select, textarea {
    min-height: 44px;
    padding: .42rem .6rem;
    background: var(--deep);
    color: var(--ink);
}
textarea { min-height: 5rem; resize: vertical; }
input[type="range"], input[type="checkbox"], meter { accent-color: var(--gold); }
button, .button {
    display: inline-block;
    min-height: 44px;
    padding: .5rem .85rem;
    background: var(--line);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
button:hover:not(:disabled), .button:hover { background: #344d37; color: var(--ink); }
button:disabled { opacity: .55; cursor: default; }
button[aria-pressed="true"], .button-primary {
    color: var(--deep);
    background: var(--gold);
    border-color: var(--gold);
}
button[aria-pressed="true"]:hover:not(:disabled), .button-primary:hover:not(:disabled) {
    color: var(--deep);
    background: var(--gold-hover);
}
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.site-footer {
    width: min(calc(100% - 2rem), 69rem);
    margin: 0 auto 2rem;
    color: var(--muted);
    text-align: center;
    font-size: .78rem;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.livemap h1 { margin-bottom: .22em; }
.livemap [hidden] { display: none; }
.map-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 1rem 0 .6rem;
    padding: .65rem;
}
.map-controls button { min-width: 44px; }
.map-status {
    margin-inline-start: auto;
    padding: .3rem .68rem;
    border: 1px solid var(--control-line);
    border-radius: 999px;
    color: var(--green);
    font-weight: 700;
    font-size: .9rem;
}
[data-status="live"] .map-status { background: #2b4431; color: #dfefc9; }
[data-status="stale"] .map-status,
[data-status="interrupted"] .map-status { color: var(--gold-hover); }
.map-canvas {
    overflow: hidden;
    border: 1px solid var(--control-line);
    border-radius: .65rem;
    background-color: #10242c;
    background-image:
        linear-gradient(90deg, #9ab8aa26 1px, transparent 1px),
        linear-gradient(#9ab8aa26 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
}
.map-canvas svg {
    display: block;
    width: 100%;
    height: clamp(18rem, 58vw, 42rem);
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.map-canvas svg:active { cursor: grabbing; }
.map-canvas svg:focus-visible { outline-offset: -4px; }
.map-pin { fill: #92d6eb; }
.map-pin--self, .map-pin--selected { fill: #ffd17c; }
.map-pin--marker { fill: #f2e4bc; }
.map-pin--shared { fill: #c6e290; }
.map-pin circle { stroke: #121c16; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.map-pin text {
    fill: #fff5dc;
    stroke: #0b1510;
    stroke-width: 3px;
    paint-order: stroke;
    vector-effect: non-scaling-stroke;
    font-weight: 700;
}
.map-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    color: var(--muted);
    font-size: .9rem;
    margin-top: .55rem;
}
.livemap [data-map-message]:empty { display: none; }
.livemap [data-map-message] { color: var(--gold-hover); }
.livemap [data-marker-list] { list-style: none; padding: 0; }
.livemap [data-marker-list] li { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.map-switch { display: flex; align-items: center; gap: .55rem; }
.livemap input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex: none; }

@media (max-width: 700px) {
    body::before, body::after { width: 33vw; opacity: .28; }
    .site-header-inner { padding-block: .65rem; }
    .site-nav { flex-basis: 100%; }
    .site-nav a, .site-menu summary { padding-inline: .53rem; }
    .site-menu { position: static; }
    .site-menu-panel { left: 0; right: auto; }
    .portal-voice { position: relative; flex-basis: 100%; }
    .voice-settings-panel { left: 0; }
    main { width: calc(100% - 2rem); }
    .portal-hero { background-position: 64% center; }
    .landing-hero { min-height: 23rem; }
    .landing-hero::before { background-size: clamp(14rem, 71%, 25rem) auto; opacity: .25; }
    .landing-hero p:not(.eyebrow) { max-width: 36ch; }
    .dashboard-hero { min-height: 15rem; }
    main dl { grid-template-columns: 1fr; gap: .1rem; }
    main dd { margin-bottom: .55rem; }
    form > label:not(:has(input[type="checkbox"])) { flex: 1 1 13rem; }
    form input, form select { width: 100%; }
    .map-status { margin-inline-start: 0; }
}

@media (max-width: 360px) {
    .landing-hero h1 { font-size: 2rem; }
}