/* ============================================================================
   game3d.css — HUD voor de 3D-client.

   De HUD is bewust DOM (geen Babylon GUI): scherpe tekst op elk scherm, gratis
   toegankelijkheid, en het kost geen draw calls in de 3D-scene. Alleen de
   naamlabels worden per frame geprojecteerd; de rest is statisch gepositioneerd.
   ========================================================================== */

:root {
    --cyan: #31d8ff;
    --cyan-soft: rgba(49, 216, 255, 0.35);
    --magenta: #ff2fd0;
    --green: #3dffa0;
    --amber: #ffd166;
    --red: #ff3b6b;
    --panel: rgba(4, 10, 22, 0.72);
    --panel-line: rgba(49, 216, 255, 0.28);
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: 'Consolas', 'SF Mono', ui-monospace, monospace;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: #01030a;
    color: #dff3ff;
    font-family: var(--font);
    /*
      Alle vier de schrijfwijzen, en dat is geen plichtpleging: CrazyGames noemt
      ze met zoveel woorden als eis. Zonder `-moz-` kiest Firefox op Android bij
      een lange druk de HUD-tekst onder je duim, en dan sleep je een
      selectiehandvat in plaats van je schip. De ongeprefixte staat achteraan
      zodat hij wint zodra een browser hem kent.
    */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#view {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
    touch-action: none;
    cursor: crosshair;
}

.hidden {
    display: none !important;
}

/* ── HUD-raamwerk ───────────────────────────────────────────────────────── */

#hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--panel-line);
    border-radius: 10px;
    padding: 10px 12px;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.55), inset 0 0 22px rgba(49, 216, 255, 0.06);
}

.panel-title {
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--cyan);
    opacity: 0.85;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.hud-topleft {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(340px, 42vw);
}

.hud-topright {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

/* ── Stats + balken ─────────────────────────────────────────────────────── */

.stats .row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 9px;
    font-size: 11px;
    letter-spacing: 0.12em;
}

.stats .sep {
    flex: 1;
}

.stats .lbl {
    opacity: 0.5;
    font-size: 9px;
}

.stats .val {
    font-family: var(--mono);
    font-size: 13px;
    color: #fff;
}

.bar {
    position: relative;
    height: 15px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.bar i {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 8px;
    transition: width 0.12s linear;
}

.bar span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 10px;
    text-shadow: 0 1px 3px #000;
}

.bar.hp i {
    background: linear-gradient(90deg, #00ffa3, #00e5ff);
}

/* ── Ability-cooldowns ──────────────────────────────────────────────────── */

.abilities {
    display: flex;
    gap: 8px;
}

.ability {
    --fill: 100%;
    position: relative;
    flex: 1;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--panel-line);
    background: var(--panel);
    overflow: hidden;
    font-size: 9px;
    letter-spacing: 0.16em;
    opacity: 0.55;
    transition: opacity 0.15s;
}

.ability::before {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--fill);
    background: linear-gradient(90deg, rgba(49, 216, 255, 0.28), rgba(49, 216, 255, 0.05));
    transition: width 0.1s linear;
}

.ability.ready {
    opacity: 1;
    border-color: var(--cyan);
    box-shadow: 0 0 16px rgba(49, 216, 255, 0.35);
}

/* Thuis, en niemand valt aan (main.js, _zetThuisRustig): niets te repareren en
   niets te scoren. BOOST is `flex: 1` en vult dan de hele rij. Op touch blijft
   het vak van HEAL staan (visibility), anders verspringt de duimknoppen-rij. */
body.thuis-rustig #heal-cd,
body.thuis-rustig .stats .score-rij {
    display: none;
}

body.thuis-rustig #touch-controls [data-tap="heal"] {
    visibility: hidden;
}

.ability b,
.ability span {
    position: relative;
    display: block;
}

.ability b {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--cyan);
}

/* ── Leaderboard ────────────────────────────────────────────────────────── */

#leaderboard {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 190px;
}

#leaderboard li {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 0;
    font-size: 12px;
}

#leaderboard li.self .nm {
    color: var(--cyan);
    font-weight: 700;
}

#leaderboard i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    flex: none;
}

#leaderboard .nm {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#leaderboard .sc {
    font-family: var(--mono);
    opacity: 0.8;
}

/* ── Radar ──────────────────────────────────────────────────────────────── */

.radar-panel {
    padding: 6px;
    border-radius: 50%;
}

/* De radar zelf staat NIET hier maar in een shadow root (zie `_bouwRadar()` in
   main.js): hun SDK geeft het zoeken naar ons spelcanvas op zodra er meer dan
   één canvas in de boom staat. Een shadow root erft deze stijlen niet, dus ze
   staan daar -- op één plek, want twee plekken die hetzelfde zeggen en één die
   het echt doet is erger dan een regel op een onverwachte plaats. */

.telemetry {
    display: flex;
    gap: 10px;
    font-family: var(--mono);
    font-size: 10px;
    opacity: 0.55;
}

/* ── Boss ───────────────────────────────────────────────────────────────── */

#boss-bar {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, 60vw);
    text-align: center;
}

#boss-name {
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--magenta);
    margin-bottom: 5px;
    text-shadow: 0 0 14px rgba(255, 47, 208, 0.7);
}

.bar.boss {
    height: 10px;
}

.bar.boss i {
    background: linear-gradient(90deg, #ff2fd0, #ff8a3d);
    box-shadow: 0 0 16px rgba(255, 47, 208, 0.7);
}

/* ── Toasts / killfeed / hints ──────────────────────────────────────────── */

#announce {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.toast {
    padding: 7px 18px;
    border-radius: 20px;
    background: rgba(4, 10, 22, 0.8);
    border: 1px solid var(--panel-line);
    font-size: 12px;
    letter-spacing: 0.18em;
    white-space: nowrap;
    animation: toast-in 0.25s ease-out;
    transition: opacity 0.5s, transform 0.5s;
}

.toast.good {
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 0 20px rgba(61, 255, 160, 0.28);
}

.toast.bad {
    border-color: var(--red);
    color: var(--red);
    box-shadow: 0 0 20px rgba(255, 59, 107, 0.28);
}

.toast.out {
    opacity: 0;
    transform: translateY(-10px);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* ── Chat ─────────────────────────────────────────────── */

/*
 * Linksonder, tegenover de killfeed. Geen paneel met een rand eromheen: in een
 * spel waar je vliegt is elk vlak dat altijd in beeld staat een stuk uitzicht
 * dat je kwijt bent. Dus alleen tekst, met een verloop eronder zodat hij
 * leesbaar blijft boven een lichte stad.
 */
#chat {
    position: absolute;
    left: 16px;
    bottom: 96px;
    width: min(380px, 34vw);
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

/* Na een halve minuut stilte zakt hij weg, maar verdwijnt niet: je moet nog
   kunnen zien dát er iets gezegd is. */
#chat.stil { opacity: 0.28; }
#chat.typt { opacity: 1; }

/* ── "Er is hier een chat" ───────────────────────────────────────────────
   Een leeg chatvenster is niet stil, het is onzichtbaar. Deze regel is het
   enige wat een nieuwe speler vertelt dat T iets doet. */
.chat-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 5px 11px 5px 7px;
    border: 1px solid rgba(49, 216, 255, 0.22);
    border-radius: 999px;
    background: rgba(6, 14, 28, 0.72);
    color: #9fb6cc;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}

/* Zolang er nog nooit iets gezegd is, mag hij opvallen: dit is het moment
   waarop iemand moet ontdekken dat chatten kan. Zodra er verkeer is heeft hij
   zijn werk gedaan en gaat hij uit de weg. */
.chat-hint.roep {
    color: #d6ecff;
    border-color: rgba(49, 216, 255, 0.45);
    box-shadow: 0 0 18px rgba(49, 216, 255, 0.16);
    animation: hint-wenk 4.5s ease-in-out infinite;
}

.chat-hint.weg {
    opacity: 0;
    transform: translateY(4px);
}

@keyframes hint-wenk {
    0%, 88%, 100% { box-shadow: 0 0 18px rgba(49, 216, 255, 0.16); }
    94%           { box-shadow: 0 0 26px rgba(49, 216, 255, 0.42); }
}

@media (prefers-reduced-motion: reduce) {
    .chat-hint.roep { animation: none; }
}

/* Het toetsplaatje. Dezelfde vorm als bij SECTORKAART in het pauzemenu, zodat
   "een blokje met een letter" overal hetzelfde betekent. */
.chat-hint .key {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(49, 216, 255, 0.4);
    border-radius: 5px;
    background: rgba(49, 216, 255, 0.12);
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0;
}

#chat-regels {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 190px;
    overflow: hidden;
    /* Bovenaan uitvagen in plaats van hard afsnijden -- dat leest als "hier
       gaat het verder" in plaats van als een afgeknipt vlak. */
    mask-image: linear-gradient(to bottom, transparent, #000 26px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26px);
}

.chat-regel {
    font-family: var(--font);
    font-size: 12px;
    line-height: 1.45;
    color: #dcecff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.7);
    padding: 1px 0;
    word-break: break-word;
    animation: chatBinnen 0.28s ease-out;
}

.chat-regel b {
    color: var(--cyan);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.chat-regel b::after {
    content: ':';
    opacity: 0.5;
}

/* Je eigen regel: je moet in één blik kunnen zien of je bericht aankwam. */
.chat-regel.van-mij b { color: var(--green); }

/* Suggesties tijdens het typen: commando's en namen. */
#chat-suggesties {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--cyan-soft);
    border-left: 3px solid var(--cyan);
    border-radius: 0 5px 5px 0;
    overflow: hidden;
    box-shadow: 0 -6px 26px rgba(0, 0, 0, 0.55);
}

#chat-suggesties .sug {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 11px;
    cursor: pointer;
    border-left: 2px solid transparent;
}

#chat-suggesties .sug.aan {
    background: color-mix(in srgb, var(--cyan) 14%, transparent);
    border-left-color: var(--cyan);
}

#chat-suggesties .sug b {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--cyan);
    font-weight: 600;
    white-space: nowrap;
}

#chat-suggesties .sug i {
    font-style: normal;
    font-size: 10.5px;
    opacity: 0.5;
    margin-left: auto;
    text-align: right;
}

/* Een @naam in een bericht. */
.chat-tag {
    color: var(--cyan);
    text-decoration: none;
    font-weight: 600;
    background: color-mix(in srgb, var(--cyan) 14%, transparent);
    border-radius: 3px;
    padding: 0 3px;
}

/* Jij bent getagd. Een regel die over jou gaat mag opvallen tussen tien regels
   die dat niet doen -- anders is taggen een knop zonder gevolg. */
.chat-regel.getagd {
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    border-left: 2px solid var(--amber);
    padding-left: 6px;
    margin-left: -8px;
}

.chat-regel.getagd .chat-tag {
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 20%, transparent);
}

/* De uitnodiging aan een gast: hij wilde iets zeggen en kan dat niet. Dit is
   een KNOP en geen mededeling -- het brengt je naar het registratiescherm.
   Groen, want het is geen afwijzing maar een aanbod. */
.chat-regel.uitnodiging {
    pointer-events: auto;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
    border-left-width: 3px;
    border-radius: 0 4px 4px 0;
    padding: 6px 10px;
    margin: 3px 0;
    font-size: 11.5px;
}

.chat-regel.uitnodiging::after {
    content: ' →';
    opacity: 0.7;
}

.chat-regel.uitnodiging:hover {
    background: color-mix(in srgb, var(--green) 18%, transparent);
    border-color: var(--green);
}

/* "Je melding is aangekomen". Groen en rechtop, en niet amber-schuin zoals de
   weigeringen eronder: wie net iemand meldde omdat hij schrok, hoort te zien
   dat het gelukt is. */
.chat-regel.bevestiging {
    color: var(--green);
    font-size: 11.5px;
    border-left: 2px solid var(--green);
    padding-left: 6px;
    margin-left: -8px;
    background: color-mix(in srgb, var(--green) 8%, transparent);
}

/* "Even rustig" en "je bent gemute" -- geen naam, wel een kleur die zegt dat
   dit de server is en niet een speler. */
.chat-regel.waarschuwing {
    color: var(--amber);
    font-style: italic;
    font-size: 11px;
}

@keyframes chatBinnen {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
}

#chat-form {
    pointer-events: auto;
    display: flex;
}

#chat-invoer {
    width: 100%;
    padding: 7px 11px;
    font-family: var(--font);
    font-size: 12.5px;
    color: #eaf6ff;
    background: var(--panel);
    border: 1px solid var(--cyan-soft);
    /* Alleen links een dikke rand: dat is de streep die zegt "hier typ jij",
       zonder een doos om je uitzicht te trekken. */
    border-left: 3px solid var(--cyan);
    border-radius: 0 5px 5px 0;
    outline: none;
    box-shadow: 0 0 24px rgba(49, 216, 255, 0.16);
}

#chat-invoer::placeholder {
    color: #7fa0bd;
    opacity: 0.7;
}

#chat-invoer:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 30px rgba(49, 216, 255, 0.3);
}

/* Op een telefoon is er geen toetsenbord-T en veel minder ruimte. De regels
   blijven, het invoerveld komt van de knop in de HUD. */
@media (max-width: 720px) {
    #chat {
        left: 10px;
        bottom: 78px;
        width: 58vw;
    }
    #chat-regels { max-height: 110px; }
    .chat-regel { font-size: 11px; }
}

#killfeed {
    position: absolute;
    right: 16px;
    bottom: 90px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 11px;
    opacity: 0.75;
    font-family: var(--mono);
}

.hint {
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    border-radius: 18px;
    border: 1px solid var(--green);
    color: var(--green);
    background: rgba(4, 10, 22, 0.75);
    font-size: 11px;
    letter-spacing: 0.2em;
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

#death {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, transparent 30%, rgba(60, 0, 15, 0.55));
    text-align: center;
}

#death h2 {
    margin: 0;
    font-size: 34px;
    letter-spacing: 0.28em;
    color: var(--red);
    text-shadow: 0 0 30px rgba(255, 59, 107, 0.8);
}

#death p {
    opacity: 0.7;
    letter-spacing: 0.15em;
    font-size: 12px;
    max-width: 34ch;
}

/* ── Vizier + pointer-lock hint ─────────────────────────────────────────── */

#crosshair {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    opacity: 0.75;
}

#crosshair::before,
#crosshair::after {
    content: '';
    position: absolute;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
}

#crosshair::before {
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    margin-left: -0.5px;
}

#crosshair::after {
    top: 50%;
    left: 0;
    height: 1px;
    width: 100%;
    margin-top: -0.5px;
}

/* ── De tekstwolk van de begeleider ───────────────────────────── */

.gids-wolk {
    position: absolute;
    left: 0;
    top: 0;
    max-width: min(300px, 44vw);
    padding: 8px 12px 9px;
    border: 1px solid rgba(255, 179, 71, 0.55);
    border-radius: 12px;
    background: rgba(10, 8, 4, 0.82);
    /* Niet aanklikbaar: hij hangt midden in het beeld en mag nooit tussen de
       muis en het spel komen. De HUD staat al op none, maar deze wolk is een
       eigen laag en erft dat niet vanzelf als iemand hem later verplaatst. */
    pointer-events: none;
    transform-origin: 0 100%;
    transition: opacity 0.25s ease;
    /* Boven de rest van de HUD: thuis hangt Vega vaak rechtsboven, en dan
       schoof de radar (later in game.html) over zijn zin heen (F15). */
    z-index: 3;
}

.gids-wolk .gw-naam {
    display: block;
    font-size: 9px;
    letter-spacing: 0.24em;
    color: #ffb347;
    margin-bottom: 3px;
}

.gids-wolk .gw-tekst {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0.03em;
    color: #ffeeda;
}

/* Het staartje, naar het schip eronder. */
.gids-wolk::after {
    content: '';
    position: absolute;
    /* main.js schuift dit op zodra de wolk tegen de schermrand komt. */
    left: var(--staart-x, 22px);
    bottom: -7px;
    width: 11px;
    height: 11px;
    border-right: 1px solid rgba(255, 179, 71, 0.55);
    border-bottom: 1px solid rgba(255, 179, 71, 0.55);
    background: rgba(10, 8, 4, 0.82);
    transform: rotate(45deg);
}

/* In de bouwmodus draait de camera om je basis en is de begeleider vaak uit
   beeld, precies terwijl hij uitlegt hoe je een turret neerzet. Dan hangt de
   wolk vast bovenin, naast het bouwpaneel, zonder staartje (F15). */
.gids-wolk.gedokt {
    left: calc(min(320px, 44vw) + 32px);
    top: 16px;
    transform: none !important;
}

.gids-wolk.gedokt::after {
    display: none;
}

/* Op een telefoon is het scherm smal en de tekst het belangrijkst. */
@media (max-width: 720px) {
    .gids-wolk {
        max-width: 56vw;
        padding: 6px 10px 7px;
    }

    .gids-wolk.gedokt {
        max-width: calc(100vw - min(320px, 44vw) - 44px);
    }

    .gids-wolk .gw-tekst {
        font-size: 11px;
    }
}

/* ── De tutorialbalk ───────────────────────────────────────────────────── */

.tutorial-bar {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px 8px 16px;
    border: 1px solid var(--panel-line);
    border-radius: 999px;
    background: rgba(4, 10, 22, 0.72);
    /* De HUD zelf vangt geen muis; deze knop moet dat wel. */
    pointer-events: auto;
    max-width: min(560px, 92vw);
}

#tutorial-tekst {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* De knop zoals de andere knoppen in de HUD (BUILD, PLANET LOOK): een pil met
   de toets erin. Hij had de klasse `ghost`, en die bestaat alleen in het
   pauzemenu en het clanpaneel: hier was het een kale browserknop. */
#tutorial-skip {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--cyan-soft);
    border-radius: 999px;
    background: rgba(49, 216, 255, 0.1);
    color: var(--cyan);
    font: inherit;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    white-space: nowrap;
    cursor: pointer;
}

#tutorial-skip:hover:not(:disabled) {
    background: rgba(49, 216, 255, 0.22);
    box-shadow: 0 0 16px rgba(49, 216, 255, 0.3);
}

#tutorial-skip:disabled { opacity: 0.5; cursor: default; }

/* Het tweede hoofdstuk (F15): onderin staan thuis de rij met QUICK PLAY en
   BUILD (#planeet-knoppen) met DOCK — HANGAR erboven, en in een aanval de
   aanvalsbalk met de klok. Die gaan voor; bovenin het midden is het in allebei
   leeg. In de bouwmodus is hij weg (het paneel heeft daar zijn eigen
   sluitknop). */
.tutorial-bar.thuis {
    top: 16px;
    bottom: auto;
}

body.bouwmodus .tutorial-bar {
    display: none;
}

#tutorial-skip b {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(49, 216, 255, 0.14);
    border: 1px solid var(--cyan-soft);
    font-size: 11px;
    letter-spacing: 0;
}

/* Op een telefoon staan hier de duimen. Iets hoger, en de tekst mag wijken. */
@media (max-width: 720px) {
    .tutorial-bar {
        bottom: 96px;
        gap: 10px;
        padding: 6px 8px 6px 12px;
    }

    #tutorial-tekst {
        display: none;
    }
}

#lock-hint {
    position: absolute;
    left: 50%;
    top: calc(50% + 34px);
    transform: translateX(-50%);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--cyan);
    opacity: 0.7;
    white-space: nowrap;
    animation: pulse 1.8s ease-in-out infinite;
}

/* ── Gebied gewonnen, nog niet opgeeist ──────────────────────── */

/*
 * Rechtsboven en niet in het midden: hij blijft een kwartier staan, en alles
 * wat een kwartier midden in beeld staat gaat in de weg zitten bij het vliegen.
 * Groen omdat het goed nieuws is -- de rode en amberkleurige meldingen in deze
 * HUD betekenen allemaal dat er iets misgaat.
 */
#gast-claim {
    /* Geen eigen plek op het scherm: hij hangt als laatste kind in
       `.hud-topright`, en die is een flex-kolom. Zo schuift hij mee als de
       spelerslijst groeit in plaats van eronder te verdwijnen -- dat gebeurde
       met een vaste `top`, en dan zie je alleen nog een randje naast de radar. */
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    text-align: right;
    font-family: var(--font);
    color: #eaf6ff;
    background: var(--panel);
    border: 1px solid color-mix(in srgb, var(--green) 55%, transparent);
    border-right-width: 3px;
    border-radius: 6px;
    box-shadow: 0 0 22px color-mix(in srgb, var(--green) 22%, transparent);
    cursor: pointer;
    pointer-events: auto;
    animation: gastClaimBinnen 0.45s ease-out;
}

#gast-claim:hover {
    border-color: var(--green);
    box-shadow: 0 0 30px color-mix(in srgb, var(--green) 38%, transparent);
}

#gast-claim .gc-kop {
    font-size: 9px;
    letter-spacing: 0.24em;
    color: var(--green);
}

#gast-claim .gc-zone {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

#gast-claim .gc-actie {
    font-size: 10px;
    opacity: 0.78;
}

#gast-claim .gc-tijd {
    color: var(--amber);
    font-family: var(--mono);
}

@keyframes gastClaimBinnen {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: none; }
}

/* Op een telefoon staat de HUD al vol; dan alleen de kern. */
@media (max-width: 720px) {
    #gast-claim {
        padding: 7px 10px;
    }
    #gast-claim .gc-zone { font-size: 12px; }
    #gast-claim .gc-actie { font-size: 9px; }
}

/* ── Meldingen van spelers, alleen voor moderators ───────────────────────── */

/*
 * Zelfde plek en vorm als de gastclaim: een knop die als laatste in
 * `.hud-topright` hangt en meeschuift. Roze, de kleur van RN-Guard in de
 * console -- niet rood, want rood betekent in deze HUD dat JIJ iets kwijt bent.
 *
 * Hij blijft staan zolang er iets open staat, en pulseert alleen zolang er iets
 * nieuws is dat je nog niet bekeek. Een chip die altijd knippert leer je negeren.
 */
#mod-meldingen {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 13px;
    text-align: right;
    font-family: var(--font);
    color: #fff0f7;
    background: var(--panel);
    border: 1px solid color-mix(in srgb, #ff2f8f 55%, transparent);
    border-right-width: 3px;
    border-radius: 6px;
    box-shadow: 0 0 18px color-mix(in srgb, #ff2f8f 18%, transparent);
    cursor: pointer;
    pointer-events: auto;
}
#mod-meldingen.hidden { display: none; }

#mod-meldingen:hover {
    border-color: #ff2f8f;
    box-shadow: 0 0 28px color-mix(in srgb, #ff2f8f 36%, transparent);
}

#mod-meldingen .mm-rij {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: #ff7fbf;
}

#mod-meldingen .mm-aantal {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    margin-right: 4px;
    border-radius: 999px;
    background: #ff2f8f;
    color: #fff;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0;
    text-align: center;
}

#mod-meldingen .mm-wie {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
#mod-meldingen .mm-wie:empty { display: none; }

#mod-meldingen .mm-actie {
    font-size: 10px;
    opacity: 0.75;
}

#mod-meldingen.nieuw {
    animation: meldingBinnen 0.45s ease-out, meldingPuls 1.6s ease-in-out 0.45s infinite;
}

@keyframes meldingBinnen {
    from { opacity: 0; transform: translateX(28px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes meldingPuls {
    0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, #ff2f8f 22%, transparent); }
    50%      { box-shadow: 0 0 34px color-mix(in srgb, #ff2f8f 60%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    #mod-meldingen.nieuw { animation: none; }
}

@media (max-width: 720px) {
    #mod-meldingen { padding: 6px 10px; }
    #mod-meldingen .mm-wie { font-size: 12px; }
    #mod-meldingen .mm-actie { display: none; }
}

/* ── Naamlabels boven schepen ───────────────────────────────────────────── */

#nametags {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.nametag {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    font-size: 11px;
    text-shadow: 0 1px 4px #000;
    will-change: transform;
}

.nt-name {
    display: block;
    letter-spacing: 0.08em;
}

.nt-bar {
    display: block;
    width: 54px;
    height: 3px;
    margin: 2px auto 0;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    overflow: hidden;
}

.nt-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #00ffa3, #00e5ff);
}

/* ── Hulp ───────────────────────────────────────────────────────────────── */

#help {
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    background: var(--panel);
    border: 1px solid var(--panel-line);
    border-radius: 12px;
    padding: 16px 26px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#help h3 {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: 0.26em;
    color: var(--cyan);
}

#help ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1.8;
}

#help b {
    color: var(--cyan);
    font-family: var(--mono);
}

.help-hint {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    font-size: 10px;
    letter-spacing: 0.2em;
    opacity: 0.35;
}

.dim {
    opacity: 0.55;
}

.small {
    font-size: 11px;
}

/* ── Pauze + teams ──────────────────────────────────────────────────────── */

/* ── Het startscherm ─────────────────────────────────────────────────────
   De 3D-gang eronder is wat dit scherm gaaf maakt. Gaaf is alleen nog niet
   "ik wil spelen": daar is een knop voor nodig die niet te missen is, en een
   reden om erop te drukken. Alles hieronder dient die twee dingen. */

/* De titel mag schreeuwen. Hij stond op 24px in een kaartje van 420 breed;
   dit is het eerste wat iemand van dit spel ziet. */
.brand h1 {
    font-size: clamp(30px, 6.2vw, 62px);
    letter-spacing: 0.16em;
    line-height: 1.02;
    margin: 0;
    background: linear-gradient(180deg, #eafcff 0%, var(--cyan) 62%, #1d8fb8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 28px rgba(49, 216, 255, 0.45));
}

.brand .tagline {
    font-size: clamp(12px, 1.6vw, 15.5px);
    letter-spacing: 0.06em;
    opacity: 0.82;
    max-width: 34ch;
    margin: 10px auto 0;
    line-height: 1.5;
}

/* Op een smal maar HOOG scherm (een telefoon rechtop) blijft de pitch staan.
   De regel eerder in dit bestand zet .tagline op display:none onder 520px OF
   onder 620px hoog, en dat is te grof: bij weinig HOOGTE telt de knop zwaarder
   dan de zin, maar bij weinig breedte is er ruimte zat -- en die ene zin is het
   enige wat vertelt waar dit spel over gaat. */
@media (max-width: 520px) and (min-height: 621px) {
    .brand .tagline {
        display: block;
        font-size: 12px;
        letter-spacing: 0.04em;
        max-width: 26ch;
    }

    /* En dan mag de titel ook groot blijven; 22px is een kopje, geen merk. */
    .brand h1 { font-size: clamp(26px, 8.5vw, 40px); }
}

/* ── De speelknop ────────────────────────────────────────────────────────
   Dit is de hele bedoeling van het scherm. Hij is groot, hij ademt, en hij
   heeft een veeg licht die er elke paar seconden overheen loopt -- dat laatste
   is puur om het oog te vangen, en dat is hier geen ondeugd maar de opdracht. */
.speel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 4px 0 0;
    padding: 18px 26px;
    border: 1px solid rgba(49, 216, 255, 0.55);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(49, 216, 255, 0.22), rgba(49, 216, 255, 0.07));
    color: #eafcff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0 0 0 rgba(49, 216, 255, 0.45), 0 14px 40px rgba(0, 0, 0, 0.45);
    animation: speel-adem 3.4s ease-in-out infinite;
    transition: transform 0.16s, border-color 0.16s;
}

.speel:hover {
    transform: translateY(-2px);
    border-color: var(--cyan);
}

.speel:active { transform: translateY(0); }

.speel .speel-pijl {
    flex: 0 0 auto;
    font-size: 22px;
    color: var(--cyan);
    filter: drop-shadow(0 0 10px rgba(49, 216, 255, 0.8));
}

.speel .speel-tekst { display: block; }

.speel .speel-tekst b {
    display: block;
    font-size: clamp(16px, 2.4vw, 21px);
    letter-spacing: 0.2em;
    color: #fff;
}

.speel .speel-tekst i {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

/* De veeg. Een pseudo-element dat er langs schuift; `overflow: hidden` op de
   knop knipt hem af aan de randen. */
.speel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: skewX(-18deg);
    animation: speel-veeg 3.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes speel-adem {
    0%, 100% { box-shadow: 0 0 0 0 rgba(49, 216, 255, 0.34), 0 14px 40px rgba(0, 0, 0, 0.45); }
    50%      { box-shadow: 0 0 34px 3px rgba(49, 216, 255, 0.34), 0 14px 40px rgba(0, 0, 0, 0.45); }
}

@keyframes speel-veeg {
    0%, 62% { left: -40%; }
    92%, 100% { left: 115%; }
}

/* Wie beweging liever niet heeft, krijgt hem niet. Een knop die ademt is een
   uitnodiging; voor iemand met bewegingsgevoeligheid is het een probleem. */
@media (prefers-reduced-motion: reduce) {
    .speel { animation: none; }
    .speel::after { display: none; }
}

/* ── De cijfers ──────────────────────────────────────────────────────────
   Niet omdat ze indrukwekkend zijn (dat zijn ze nu juist niet), maar omdat ze
   zeggen dat er een wereld draait waar iets in gebeurt. Een startscherm zonder
   enig teken van leven zegt: hier is niemand. */
.welkom-cijfers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 16px 0 4px;
    border: 1px solid rgba(49, 216, 255, 0.16);
    border-radius: 12px;
    background: rgba(49, 216, 255, 0.14);
    overflow: hidden;
}

.welkom-cijfers > div {
    padding: 11px 8px;
    background: rgba(6, 14, 28, 0.86);
}

.welkom-cijfers b {
    display: block;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--cyan);
}

/* ── Terwijl de cijfers onderweg zijn ────────────────────────────────────
   Ze stonden op "—" tot de fetch binnen was, en een streepje leest als "er is
   niets" in plaats van als "even wachten". Een balkje dat glinstert zegt het
   wél, en het zegt bovendien dat er iets LEEFT aan de andere kant. */
.welkom-cijfers.laadt b {
    color: transparent;
    border-radius: 4px;
    background: linear-gradient(
        100deg,
        rgba(49, 216, 255, 0.08) 20%,
        rgba(49, 216, 255, 0.22) 42%,
        rgba(49, 216, 255, 0.08) 64%
    );
    background-size: 240% 100%;
    animation: cijfer-glans 1.25s linear infinite;
}

@keyframes cijfer-glans {
    from { background-position: 140% 0; }
    to   { background-position: -40% 0; }
}

/* En als ze er zijn, komen ze binnen in plaats van te verschijnen. Per kolom
   iets later, zodat het als één beweging leest. */
.welkom-cijfers.klaar > div {
    animation: cijfer-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.welkom-cijfers.klaar > div:nth-child(2) { animation-delay: 0.07s; }
.welkom-cijfers.klaar > div:nth-child(3) { animation-delay: 0.14s; }

@keyframes cijfer-in {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .welkom-cijfers.laadt b { animation: none; }
    .welkom-cijfers.klaar > div { animation: none; }
}

.welkom-cijfers i {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.55;
}

/* ── De zijdeur ──────────────────────────────────────────────────────────
   Inloggen is er voor wie al eens geweest is, en die weet waar hij moet zijn.
   Dus klein, maar niet verstopt: onderstreept en aanklikbaar over de hele
   regel, want het is een van de twee dingen die je hier kunt doen. */
.welkom-zijdeur {
    display: block;
    width: 100%;
    margin: 14px 0 0;
    padding: 9px;
    border: none;
    background: none;
    color: #9fb6cc;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 0.15s;
}

.welkom-zijdeur b {
    color: var(--cyan);
    letter-spacing: 0.16em;
    border-bottom: 1px solid rgba(49, 216, 255, 0.4);
    padding-bottom: 1px;
}

.welkom-zijdeur:hover { color: #d6ecff; }

.welkom-zijdeur:hover b { border-bottom-color: var(--cyan); }

/* Wie hier al met een account speelde: dan is inloggen geen zijdeur maar de
   tweede grote knop. PLAY NOW maakt een NIEUWE gast, en precies die klik
   haalde rdolleman uit zijn account (auth.js, _toonTerugkeer). */
.welkom-zijdeur.terugkeer {
    margin-top: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(49, 216, 255, 0.55);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(49, 216, 255, 0.14), rgba(49, 216, 255, 0.04));
    box-shadow: 0 0 18px rgba(49, 216, 255, 0.16);
    color: #d6ecff;
    font-size: 13px;
}

.welkom-zijdeur.terugkeer b {
    border-bottom: none;
    color: #fff;
    letter-spacing: 0.06em;
}

.welkom-zijdeur.terugkeer span {
    margin-left: 8px;
    color: var(--cyan);
    font-weight: 700;
    letter-spacing: 0.18em;
}

.welkom-zijdeur.terugkeer:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 24px rgba(49, 216, 255, 0.3);
}

/* ── De privacyregel ─────────────────────────────────────────────────────
   Onder de knoppen, kleiner dan de zijdeur, en met opzet saai. CrazyGames
   vraagt om een nette melding en geen blokkerende pop-up; dit is het dunste
   dat nog telt als "zichtbaar". Hij mag niet wedijveren met DIRECT SPELEN. */
.welkom-privacy {
    margin: 16px 0 0;
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: 0.04em;
    color: #6d879c;
    text-align: center;
}

.welkom-privacy a {
    color: #9fb6cc;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.welkom-privacy a:hover { color: var(--cyan); }

/* Een weg terug vanuit het inlogscherm. */
.auth-terug {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    padding: 8px;
    border: none;
    background: none;
    color: #7f93a8;
    font: inherit;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.auth-terug:hover { color: var(--cyan); }

/* Het seizoen, altijd in beeld zodra je pauzeert. */
.seizoen-strip {
    flex: 0 1 320px;
    min-width: 240px;
    padding: 12px 16px;
    border: 1px solid rgba(49, 216, 255, 0.22);
    border-radius: 12px;
    background: rgba(49, 216, 255, 0.05);
}

.sz-kop {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.sz-label {
    font-size: 9.5px;
    letter-spacing: 0.24em;
    opacity: 0.55;
}

.sz-naam {
    font-size: 17px;
    letter-spacing: 0.1em;
    color: var(--cyan);
    text-shadow: 0 0 18px rgba(49, 216, 255, 0.4);
}

/* Een balk die leegloopt. Een getal zegt "nog 41 dagen"; een balk die bijna
   op is zegt dat je iets moet gaan doen. */
.sz-baan {
    height: 5px;
    margin: 9px 0 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.sz-baan span {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--green));
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bijna om: dan hoort hij te schreeuwen in plaats van te informeren. */
.seizoen-strip.bijna .sz-baan span {
    background: linear-gradient(90deg, #ffb34d, #ff7a7a);
}

.seizoen-strip.bijna .sz-naam { color: #ffb34d; text-shadow: 0 0 18px rgba(255, 179, 77, 0.45); }

.sz-rest {
    display: block;
    font-style: normal;
    font-size: 11px;
    opacity: 0.7;
}

.team-panel {
    margin: 20px 0 18px;
    padding: 14px;
    border: 1px solid rgba(49, 216, 255, 0.18);
    border-radius: 10px;
    background: rgba(6, 14, 28, 0.6);
    text-align: left;
}

.team-explain {
    margin: 0 0 10px;
    line-height: 1.5;
}

#team-current {
    color: var(--green);
    letter-spacing: 0.1em;
}

#team-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    max-height: 132px;
    overflow-y: auto;
}

#team-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#team-list li:last-child {
    border-bottom: none;
}

#team-list .tname {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#team-list .tcount {
    font-family: var(--mono);
    opacity: 0.6;
    font-size: 11px;
}

#team-list button {
    padding: 3px 10px;
    font-size: 10px;
    letter-spacing: 0.14em;
    border-radius: 6px;
    border: 1px solid var(--panel-line);
    background: rgba(49, 216, 255, 0.1);
    color: var(--cyan);
    font-family: inherit;
    cursor: pointer;
}

#team-list button:hover {
    background: rgba(49, 216, 255, 0.24);
}

#team-list li.mine .tname {
    color: var(--green);
    font-weight: 700;
}

#team-list .empty {
    opacity: 0.45;
    font-size: 11px;
    border: none;
}

#team-create {
    display: flex;
    gap: 8px;
}

#team-create input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--panel-line);
    background: rgba(6, 14, 28, 0.9);
    color: #dff3ff;
    font: inherit;
    font-size: 12px;
    outline: none;
}

#team-create input:focus {
    border-color: var(--cyan);
}

#team-create button {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--cyan);
    background: rgba(49, 216, 255, 0.12);
    color: var(--cyan);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.14em;
    cursor: pointer;
    white-space: nowrap;
}

/* De erelijst van het vorige seizoen. Gedempter dan de levende standen
   eronder: dit is geschiedenis, geen wedstrijd die nog loopt. */
.erelijst {
    list-style: none;
    margin: 8px 0 14px;
    padding: 0;
    opacity: 0.8;
}

.erelijst li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    font-size: 11.5px;
}

.erelijst li.kop {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.5;
    padding-bottom: 2px;
}

.erelijst .pl {
    font-family: var(--mono);
    font-size: 10.5px;
    opacity: 0.5;
    min-width: 14px;
}

.erelijst .nm {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erelijst .sc {
    font-family: var(--mono);
    font-size: 10.5px;
    opacity: 0.65;
}

/* Dagelijkse opdrachten. Drie regels met een balkje: het getal is wat je wilt
   weten als je bijna klaar bent, het balkje wat je ziet zonder te lezen. */
.quest-panel {
    margin: 20px 0 18px;
    padding: 14px;
    border: 1px solid rgba(49, 216, 255, 0.18);
    border-radius: 10px;
    background: rgba(6, 14, 28, 0.6);
    text-align: left;
}

#quest-lijst {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

#quest-lijst li {
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#quest-lijst li:last-child {
    border-bottom: none;
}

#quest-lijst .qkop {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
}

#quest-lijst .qkop b {
    flex: 1;
    font-weight: 600;
}

#quest-lijst .qkop i {
    font-style: normal;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--green);
    white-space: nowrap;
}

#quest-lijst .qbaan {
    height: 4px;
    margin: 6px 0 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

#quest-lijst .qbaan span {
    display: block;
    height: 100%;
    background: var(--cyan);
    transition: width 0.3s;
}

#quest-lijst small {
    font-family: var(--mono);
    font-size: 10.5px;
    opacity: 0.6;
}

/* Gehaald: het balkje groen en de regel gedempt. Hij blijft staan -- een
   opdracht die verdwijnt zodra je hem haalt neemt het bewijs mee dat je hem
   gehaald hebt. */
#quest-lijst li.af .qbaan span {
    background: var(--green);
}

#quest-lijst li.af .qkop b {
    opacity: 0.55;
    text-decoration: line-through;
}

#quest-lijst li.af small {
    color: var(--green);
    opacity: 0.9;
}

.quest-bonus {
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    opacity: 0.75;
}

.quest-bonus.af {
    color: var(--green);
    opacity: 1;
}

/* De code van je eigen team. Mono en ruim uit elkaar, want dit is een reeks
   die wordt voorgelezen en overgetypt -- daar is `letter-spacing` geen
   versiering maar het verschil tussen goed en bijna goed. */
.team-code {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px dashed rgba(49, 216, 255, 0.28);
    border-radius: 8px;
    background: rgba(49, 216, 255, 0.05);
}

.team-code code {
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: 0.22em;
    color: var(--green);
    user-select: all;
}

.team-code button {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 10px;
    letter-spacing: 0.14em;
    border-radius: 6px;
    border: 1px solid var(--panel-line);
    background: rgba(49, 216, 255, 0.1);
    color: var(--cyan);
    font-family: inherit;
    cursor: pointer;
}

.team-code button:hover {
    background: rgba(49, 216, 255, 0.24);
}

/* Het join-formulier deelt zijn vorm met team-create: het staat eronder en het
   doet hetzelfde soort ding, dus het hoort er niet anders uit te zien. */
#team-join {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

#team-join input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--panel-line);
    background: rgba(6, 14, 28, 0.9);
    color: #dff3ff;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    outline: none;
}

#team-join input:focus {
    border-color: var(--cyan);
}

/* De uitnodigingsknop. Een echte actie en geen tekstlink: dit is wat
   CrazyGames van een multiplayer-spel verlangt, en het is het enige knopje in
   dit paneel waar een speler iemand anders mee binnenhaalt. Hij stond zonder
   klasse in de HTML en kwam dus als kale browserknop in beeld. */
#team-invite {
    display: block;
    width: 100%;
    margin: 4px 0 10px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 179, 71, 0.4);
    background: rgba(255, 179, 71, 0.1);
    color: #ffc978;
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.14em;
    cursor: pointer;
}

#team-invite:hover {
    background: rgba(255, 179, 71, 0.22);
}

#team-join button {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--panel-line);
    background: rgba(49, 216, 255, 0.08);
    color: var(--cyan);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.14em;
    cursor: pointer;
    white-space: nowrap;
}

#team-join button:hover {
    background: rgba(49, 216, 255, 0.2);
}

/* Eén regel onder de knoppen voor het antwoord van de server. Een weigering
   die je niet ziet is geen weigering maar een knop die niets doet. */
.team-melding {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--green);
}

.team-melding.fout {
    color: #ffb4b4;
}

.team-melding button.link {
    padding: 0;
    border: none;
    background: none;
    color: var(--cyan);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-decoration: underline;
    cursor: pointer;
}

/* ── Binnen het pauzescherm ──────────────────────────────────────────────
   Alles hieronder trekt het lichter en groter. De maten die in een kaartje
   van 420px klopten (10px tabs, 11px regels) zijn op 1180px te klein: dan is
   het geen compact paneel meer maar een groot vlak met muizenpootjes erin. */

#pause .team-panel,
#pause .quest-panel,
#pause .war-panel {
    border-color: rgba(49, 216, 255, 0.2);
    background: rgba(255, 255, 255, 0.045);
}

#pause .dim,
#pause .small {
    color: #a8c2da;
}

#pause .panel-title {
    font-size: 11.5px;
    letter-spacing: 0.2em;
}

/* ── De teamsectie ───────────────────────────────────────────────────────
   Twee kolommen met elk één vraag: links wat je hebt, rechts hoe je ergens
   bij komt. Binnen een kolom staat alles onder elkaar -- dat is wat de vorige
   versie miste, want daar vulde één raster alles in DOM-volgorde en belandde
   het naamveld naast een regel tekst. */
.team-kolommen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 14px;
}

@media (min-width: 860px) {
    .team-kolommen {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    /* Een scheidslijn tussen de twee, zodat het twee dingen zijn en niet zes. */
    .team-kolommen .team-kol + .team-kol {
        padding-left: 28px;
        border-left: 1px solid rgba(49, 216, 255, 0.14);
    }
}

.team-kol > * + * { margin-top: 12px; }

.team-kol .panel-title { margin-top: 0; }

/* "of begin een eigen team": een streep met een woord erin. */
.team-of {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 !important;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8fa9c2;
}

.team-of::before,
.team-of::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(49, 216, 255, 0.16);
}

#pause #team-create,
#pause #team-join {
    margin-top: 0;
}

#pause #team-create input,
#pause #team-join input {
    font-size: 13.5px;
    padding: 10px 12px;
}

#pause #team-create button,
#pause #team-join button {
    font-size: 12px;
    padding: 10px 16px;
}

#pause #team-list li { font-size: 13px; }

#pause .team-melding { font-size: 13px; }

/* ── De opdrachten ───────────────────────────────────────────────────────
   Leesbaar formaat: dit zijn zinnen die je scant, geen voetnoten. */
#pause #quest-lijst li { padding: 13px 0; }

#pause #quest-lijst .qkop { font-size: 15px; }

#pause #quest-lijst .qkop i { font-size: 12.5px; }

#pause #quest-lijst small { font-size: 13px; opacity: 0.75; }

#pause #quest-lijst .qbaan { height: 6px; }

#pause .quest-bonus { font-size: 13px; }

/* ── Territorium ─────────────────────────────────────────────────────────
   De eerste kop plakte tegen de tabbalk erboven. */
#pause .war-panel > .panel-title:first-child {
    margin-top: 6px;
}

#pause #war-seizoen-uitleg { font-size: 13px; }

#pause .erelijst li { font-size: 12.5px; }

/* Het paneel zelf heeft nu ook lucht boven de eerste regel nodig, want de
   tabbalk sluit er direct op aan. */
#pause [data-panel] { margin-top: 18px; }

#pause .primary {
    width: 100%;
    padding: 14px;
    border-radius: 9px;
    border: 1px solid var(--cyan);
    background: rgba(49, 216, 255, 0.14);
    color: var(--cyan);
    font: inherit;
    font-size: 14px;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

#pause .primary:hover {
    background: rgba(49, 216, 255, 0.26);
    box-shadow: 0 0 26px rgba(49, 216, 255, 0.3);
}

/* De sectorkaart: even breed als VERDER SPELEN maar een toon zachter, want
   het is niet de knop waar je standaard op drukt. Het toetsplaatje erin is de
   halve reden dat hij hier staat -- wie hem één keer ziet weet daarna dat K
   hetzelfde doet, en dan hoeft dit menu er niet meer aan te pas te komen. */
#pause .secondary {
    width: 100%;
    margin-top: 8px;
    padding: 11px;
    border-radius: 9px;
    border: 1px solid rgba(49, 216, 255, 0.34);
    background: rgba(49, 216, 255, 0.05);
    color: #a8e8ff;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

#pause .secondary:hover {
    background: rgba(49, 216, 255, 0.16);
    border-color: var(--cyan);
    color: #eaf6ff;
}

#pause .secondary .key {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border: 1px solid rgba(49, 216, 255, 0.45);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    vertical-align: 1px;
}

#pause .ghost {
    width: 100%;
    margin-top: 4px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 59, 107, 0.5);
    background: transparent;
    color: var(--red);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.16em;
    cursor: pointer;
}

#pause .ghost:hover {
    background: rgba(255, 59, 107, 0.14);
}

/* Teamgenoten krijgen een eigen kleur in het scorebord en boven hun schip. */
.teammate {
    color: var(--green) !important;
}

/* ── Oorlogsoverzicht (pauzemenu) ───────────────────────────────────────── */

.war-panel {
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(255, 209, 102, 0.18);
    border-radius: 10px;
    background: rgba(20, 14, 6, 0.5);
    text-align: left;
}

.war-panel .panel-title {
    color: var(--amber);
}

.war-panel .panel-title:not(:first-child) {
    margin-top: 12px;
}

.war-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 11px;
}

.war-panel li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 209, 102, 0.08);
}

.war-panel li:last-child {
    border-bottom: 0;
}

.war-panel li.empty {
    justify-content: center;
    opacity: 0.45;
    border: 0;
}

.war-panel li.mine {
    color: var(--green);
}

.war-panel .nm {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.war-panel .tcount {
    font-family: var(--mono);
    font-size: 9px;
    opacity: 0.6;
}

.war-panel .sc {
    font-family: var(--mono);
    color: var(--amber);
    min-width: 3em;
    text-align: right;
}

.war-panel li.mine .sc {
    color: var(--green);
}

/* ── Sectorkaart ────────────────────────────────────────────────────────── */

/* Smal scherm: kaart boven, paneel eronder. */

/* ── Gebiedslabel + grenswaarschuwing ───────────────────────────────────── */

.zone-tag {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--amber);
}

.zone-tag.safe {
    color: var(--green);
}

/* In de hub kun je niet vuren (Room3D laat er geen kogels ontstaan), dus is een
   vol richtkruis een leugen. */
#hud.safe-zone #crosshair {
    opacity: 0.25;
}

#edge-warn {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.28em;
    color: var(--amber);
    text-shadow: 0 0 18px rgba(255, 166, 60, 0.8);
    animation: edge-pulse 1.1s ease-in-out infinite;
}

@keyframes edge-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

/*
  De tweede regel: wat die poort je kost.

  Rood en niet amber, want dit is geen wegwijzer maar verlies -- en het is de
  enige plek in de HUD waar die twee vlak boven elkaar staan. Geen eigen
  knippering: hij deelt de puls van zijn ouder, anders staan er twee ritmes door
  elkaar op hetzelfde plekje.
*/
#edge-kost {
    display: none;
    margin-top: 4px;
    color: var(--red);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(255, 59, 107, 0.7);
}

#edge-warn.kost #edge-kost {
    display: block;
}

/*
  Besturing-uitleg: muis of duim, nooit allebei. `body.touch` komt uit
  _detectTouch(); zonder die klasse is de muisregel de waarheid.
*/
.alleen-touch { display: none; }
body.touch .alleen-muis { display: none; }
body.touch .alleen-touch { display: block; }

/* ── Starcoins in de HUD ───────────────────────────────── */

.stats .row.coins {
    gap: 6px;
}

.stats .coin {
    color: var(--amber);
    font-size: 12px;
    text-shadow: 0 0 12px rgba(255, 209, 102, 0.7);
}

.stats .row.coins .val {
    color: var(--amber);
}

/* ── Accountpaneel in het pauzemenu ────────────────────── */

.tm-panel .panel-title {
    margin-top: 14px;
}

.tm-panel .panel-title:first-child {
    margin-top: 0;
}

#acc-mail {
    margin: 0 0 8px;
    font-family: var(--mono);
    opacity: 0.45;
}

.acc-flag {
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 59, 107, 0.5);
    color: var(--red);
    font-size: 9px;
    letter-spacing: 0.18em;
}

.acc-flag.on {
    border-color: rgba(61, 255, 160, 0.5);
    color: var(--green);
}

.acc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 6px 0;
}

/* De ghost-knoppen van het accountpaneel zijn tekstlinks, net als in de
   overlay: dit zijn beheeracties en geen hoofdacties. */
.tm-panel button.ghost {
    padding: 4px 0;
    border: none;
    background: none;
    color: #8fa8c0;
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.tm-panel button.ghost:hover:not(:disabled) {
    color: var(--cyan);
}

.tm-panel button.ghost:disabled {
    opacity: 0.4;
    cursor: default;
    text-decoration: none;
}

.acc-form {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    width: 100%;
    margin: 4px 0 10px;
}

.acc-form label {
    width: 100%;
    margin: 0;
}

.acc-form input {
    flex: 1 1 150px;
    min-width: 0;
    padding: 8px 11px;
    border-radius: 7px;
    border: 1px solid var(--panel-line);
    background: rgba(6, 14, 28, 0.9);
    color: #dff3ff;
    font: inherit;
    font-size: 12px;
    outline: none;
}

.acc-form input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(49, 216, 255, 0.14);
}

.acc-form button {
    flex: none;
    padding: 8px 14px;
    border-radius: 7px;
    border: 1px solid var(--panel-line);
    background: rgba(49, 216, 255, 0.12);
    color: var(--cyan);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.16em;
    cursor: pointer;
}

.acc-form button:hover {
    background: rgba(49, 216, 255, 0.24);
}

/*
  Het gastblok in de datakern.

  Dit stond hier tot 2026-09-19 niet, en dat zag je: `#acc-register-btn` heeft
  `class="primary"`, maar die regel staat onder `#overlay button.primary` en de
  datakern zit niet in de overlay. Het gevolg was een kale grijze
  browserknop -- midden in een paneel waar verder alles van dit spel is. Zo'n
  knop leest als een storing, en het is nog de belangrijkste knop op dat scherm
  ook: dit is waar een gast zijn voortgang veiligstelt.

  Amber en niet cyaan: de rest van dit paneel is beheer, dit is het enige dat
  iets te verliezen heeft. Zelfde kleur als de waarschuwing over de gastmodus.
*/
#acc-gast {
    margin-bottom: 16px;
    padding: 12px 13px;
    border-radius: 9px;
    border: 1px solid rgba(255, 209, 102, 0.3);
    background: rgba(40, 32, 8, 0.4);
}

#acc-gast .panel-title {
    margin-top: 0;
    color: var(--amber);
}

#overlay #acc-register-btn,
#acc-register-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 209, 102, 0.5);
    background: rgba(255, 209, 102, 0.14);
    color: var(--amber);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: background 0.15s;
}

#acc-register-btn:hover {
    background: rgba(255, 209, 102, 0.26);
}

#acc-2fa-start {
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid rgba(61, 255, 160, 0.45);
    background: rgba(61, 255, 160, 0.1);
    color: var(--green);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.2em;
    cursor: pointer;
}

#acc-2fa-start:hover {
    background: rgba(61, 255, 160, 0.22);
}

/* De sleutel moet je foutloos kunnen overtypen: groot, monospace, en
   selecteerbaar (de rest van de pagina staat op user-select: none). */
.acc-secret {
    display: block;
    margin: 4px 0 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 209, 102, 0.4);
    background: rgba(30, 24, 6, 0.5);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.14em;
    word-break: break-all;
    -webkit-user-select: all;
    user-select: all;
}

.acc-link {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--cyan);
    font-size: 11px;
    letter-spacing: 0.1em;
}

.acc-codes {
    list-style: none;
    margin: 4px 0 10px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 5px 12px;
}

.acc-codes li {
    font-family: var(--mono);
    font-size: 12px;
    color: #dff3ff;
    -webkit-user-select: all;
    user-select: all;
}

.okmsg {
    color: var(--green);
    font-size: 12px;
    min-height: 18px;
    margin: 4px 0 0;
}

#acc-logout {
    margin-top: 6px;
}

/* ── Tabbalken ─────────────────────────────────────────── */

/* Eén stijl voor elke tabbalk: het pauzemenu en de datakern gebruiken hem
   allebei. Dit is het antwoord op panelen die volgepropt raken — niet kleiner
   maken, maar opdelen. */
.tabbar {
    display: flex;
    gap: 5px;
    margin: 12px 0;
    padding: 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.tabbar button {
    flex: 1;
    padding: 8px 6px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #9fb6cc;
    font: inherit;
    font-size: 10px;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.tabbar button:hover {
    background: rgba(49, 216, 255, 0.08);
}

.tabbar button.active {
    background: rgba(49, 216, 255, 0.16);
    border-color: var(--panel-line);
    color: var(--cyan);
}

.tab-streep {
    position: absolute;
    left: 28px;
    bottom: -1px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    box-shadow: 0 0 14px rgba(49, 216, 255, 0.7);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

/* Panelen komen binnen in plaats van te verschijnen. */
#pause [data-panel]:not(.hidden) {
    animation: paneel-in 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes paneel-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Met de ruimte die er nu is passen de lijsten naast elkaar in plaats van
   onder elkaar. Onder de 860px klapt alles terug naar één kolom. */
@media (min-width: 860px) {
    /* HIER STOND EEN RASTER OVER DE HELE SECTIE, en dat was de fout.
       Het vulde alles in DOM-volgorde over twee kolommen, dus in de teamsectie
       belandde het naamveld naast een regel tekst en de codeknop eronder in de
       andere kolom. Zes losse blokken schots en scheef, zonder dat je zag welk
       veld bij welke handeling hoorde.

       Kolommen zijn goed, maar dan met een BEDOELING: zie `.team-kolommen`,
       waar links staat wat je hebt en rechts hoe je ergens bij komt. De
       opdrachtenlijst hieronder houdt zijn eigen raster, want daar is de vorm
       per regel hetzelfde en werkt het wel. */

    #quest-lijst li {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2px 16px;
        align-items: center;
    }

    #quest-lijst .qkop { grid-column: 1; }
    #quest-lijst .qbaan { grid-column: 1; margin: 4px 0 0; }
    #quest-lijst small { grid-column: 2; grid-row: 1 / span 2; font-size: 12px; }
}

/* Het tweede bord is de datakern; koel in plaats van amber, zodat je de twee
   niet met elkaar verwart. */
.dock-sign.cool {
    border-color: rgba(49, 216, 255, 0.4);
    background: rgba(2, 8, 14, 0.62);
}

.dock-sign.cool .ds-icon {
    color: var(--cyan);
    text-shadow: 0 0 14px var(--cyan-soft);
}

.dock-sign.cool .ds-text b {
    color: #d6f2ff;
}

.dock-sign.cool .ds-dist {
    color: var(--cyan);
    border-left-color: rgba(49, 216, 255, 0.25);
}

.dock-sign.cool.near {
    border-color: var(--cyan);
    background: rgba(6, 30, 44, 0.8);
    box-shadow: 0 0 24px rgba(49, 216, 255, 0.3);
}

#dock-hint span i {
    font-style: normal;
    opacity: 0.75;
}

#dock-hint.cool {
    border-color: rgba(49, 216, 255, 0.5);
    background: rgba(2, 10, 18, 0.72);
    color: var(--cyan);
    animation: none;
    box-shadow: 0 0 26px rgba(49, 216, 255, 0.25);
}

#dock-hint.cool b {
    background: rgba(49, 216, 255, 0.16);
    border-color: rgba(49, 216, 255, 0.45);
}

/* ── Datakern ──────────────────────────────────────────── */

/* Zelfde opzet als de hangar: geen dichte achtergrond, want hieronder ligt de
   3D-ruimte op het canvas. Alleen de panelen vangen klikken. */
#terminal {
    position: fixed;
    inset: 0;
    z-index: 46;
    pointer-events: none;
    animation: toast-in 0.22s ease-out;
}

#terminal > * {
    pointer-events: auto;
}

.tm-head {
    position: absolute;
    top: 18px;
    left: 22px;
    right: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.tm-head h2 {
    margin: 0 0 2px;
    font-size: 20px;
    letter-spacing: 0.34em;
    color: var(--cyan);
    text-shadow: 0 0 26px rgba(49, 216, 255, 0.5);
}

.tm-head p {
    margin: 0;
}

.tm-who {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 8px 14px;
    border: 1px solid var(--panel-line);
    border-radius: 10px;
    background: rgba(4, 10, 22, 0.72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.tm-who b {
    font-size: 14px;
    letter-spacing: 0.12em;
}

.tm-panel {
    position: absolute;
    top: 96px;
    right: 22px;
    bottom: 22px;
    width: min(400px, 42vw);
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border: 1px solid var(--panel-line);
    border-radius: 12px;
    background: var(--panel);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    box-shadow: 0 0 34px rgba(0, 0, 0, 0.6);
    text-align: left;
}

.tm-panel .tabbar {
    margin-top: 0;
}

.tm-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

#tm-leave {
    margin-top: 10px;
    padding: 11px;
    border: 1px solid var(--panel-line);
    border-radius: 9px;
    background: rgba(49, 216, 255, 0.12);
    color: #eaf6ff;
    font-family: var(--font);
    font-size: 12px;
    letter-spacing: 0.24em;
    cursor: pointer;
}

#tm-leave:hover {
    background: rgba(49, 216, 255, 0.24);
    border-color: var(--cyan);
}

/* De QR moet op wit staan en scherp blijven: een scanner leest geen glans. */
.acc-qr {
    display: flex;
    justify-content: center;
    margin: 8px 0 10px;
}

.acc-qr svg {
    width: 190px;
    height: 190px;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    image-rendering: pixelated;
}

/* De sleutel met de hand invoeren is de terugval, dus ingeklapt. */
.acc-manual {
    margin-bottom: 10px;
}

.acc-manual summary {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #8fa8c0;
    cursor: pointer;
}

.acc-manual summary:hover {
    color: var(--cyan);
}

@media (max-width: 860px), (max-height: 620px) {
    .tm-head {
        top: 12px;
        left: 12px;
        right: 12px;
    }

    .tm-head h2 {
        font-size: 15px;
        letter-spacing: 0.24em;
    }

    .tm-head p {
        display: none;
    }

    .tm-panel {
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-height: 62vh;
    }

    .acc-qr svg {
        width: 150px;
        height: 150px;
    }
}

/* ── Auth in de gang ───────────────────────────────────── */

/* Voortgang: even veel stippen als haltes in de gang. Dit is geen versiering —
   het zegt hoeveel stappen er nog zijn voordat je binnen bent. */
.auth-progress {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin: -6px 0 18px;
}

.auth-progress i {
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.13);
    transition: background 0.4s, box-shadow 0.4s;
}

.auth-progress i.on {
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-soft);
}

.auth-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

#overlay .auth-tabs button {
    flex: 1;
    padding: 9px 6px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #9fb6cc;
    font-size: 11px;
    letter-spacing: 0.2em;
}

#overlay .auth-tabs button:hover {
    background: rgba(49, 216, 255, 0.08);
    box-shadow: none;
}

#overlay .auth-tabs button.active {
    background: rgba(49, 216, 255, 0.16);
    border-color: var(--panel-line);
    color: var(--cyan);
}

.auth-head {
    margin: 0 0 8px;
    font-size: 15px;
    letter-spacing: 0.26em;
    color: var(--cyan);
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    letter-spacing: 0.1em;
    opacity: 0.7;
    cursor: pointer;
    text-align: left;
}

#overlay .auth-check input {
    width: 15px;
    height: 15px;
    padding: 0;
    accent-color: var(--cyan);
    flex: none;
}

/* Codeveld: zes cijfers, dus groot en ruim uit elkaar. Je leest hier iets over
   van je telefoon; dat moet je in één blik kunnen controleren. */
#overlay .code-input {
    text-align: center;
    font-family: var(--mono);
    font-size: 26px;
    letter-spacing: 0.42em;
    padding: 13px 10px 13px 22px;
}

/* ── Direct spelen ─────────────────────────────────────────

   De scheiding onder het inlogformulier, met het woord "of" in de lijn. Twee
   halve lijnen naast een woord in plaats van een streep met een label erop:
   dat leest als één element en niet als twee dingen die toevallig naast
   elkaar staan.

   De knop erft de gewone #overlay-knopstijl (cyaan rand, zwak vlak) en is
   dus zichtbaar zonder de INLOGGEN-knop te overstemmen -- die is `.primary`
   en daarmee groter. Bewust NIET `.ghost`: dat is hier een onderstreept
   tekstlinkje, en dit is de belangrijkste knop op dit scherm. */
.auth-gast {
    margin-top: 22px;
}

.auth-of {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.4;
    margin-bottom: 16px;
}

.auth-of::before,
.auth-of::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
}

#overlay .auth-gast button {
    width: 100%;
}

/* De avatar van het portaal, boven "welkom terug". Rond en klein: het is een
   bevestiging dat je de goede persoon bent, geen profielfoto om naar te kijken.
   `object-fit` omdat de bron van hun server komt en wij niet weten hoe vierkant
   die is -- een uitgerekt hoofd is erger dan geen hoofd. */
#start-avatar {
    display: block;
    margin: 0 auto 10px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--panel-line);
    background: rgba(255, 255, 255, 0.04);
    object-fit: cover;
}

/* Hetzelfde blok, maar op het startscherm: daar is de gast al binnen en is de
   vraag niet "wil je spelen" maar "wil je het houden". Een randje erboven zodat
   het niet bij de LANCEREN-knop lijkt te horen -- dat is een andere handeling. */
#start-gast {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--panel-line);
}

#overlay #start-gast button {
    width: 100%;
    margin-top: 10px;
}

/* Eén regel met een vinkje: "uitloggen na inactiviteit". Een <label> om het
   hele blok, zodat de tekst ernaast ook klikt -- een vinkje van 13 pixels is op
   een aanraakscherm geen doel. */
.acc-schakel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 12px;
    padding: 9px 11px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--panel-line);
    border-radius: 5px;
    cursor: pointer;
}

.acc-schakel:hover {
    border-color: var(--cyan-soft);
}

.acc-schakel input {
    margin: 2px 0 0;
    accent-color: var(--cyan);
    cursor: pointer;
    flex: none;
}

.acc-schakel span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.acc-schakel b {
    font-size: 11.5px;
    letter-spacing: 0.04em;
}

.acc-schakel i {
    font-style: normal;
    font-size: 10.5px;
    opacity: 0.55;
    line-height: 1.45;
}

#start-gast .auth-fijn {
    opacity: 0.68;
}

/* Het zinnetje eronder is het antwoord op "en straks dan?" -- de vraag die
   iemand tegenhoudt die geen account wil maken maar ook niet voor niets wil
   spelen. Klein, want het is geruststelling en geen aankondiging. */
.auth-fijn {
    margin: 10px 2px 0;
    font-size: 10.5px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    opacity: 0.5;
    text-align: center;
}

.auth-links {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
}

#overlay button.ghost {
    padding: 6px 4px;
    border: none;
    background: none;
    color: #8fa8c0;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#overlay button.ghost:hover {
    background: none;
    box-shadow: none;
    color: var(--cyan);
}

#overlay button.ghost:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ── De flits van onweer (renderer.js, _tickBliksem) ─────────────────────
   Boven het canvas en onder de HUD: de lucht licht op, je knoppen niet.
   `screen` maakt alleen lichter, nooit een grijze waas over donkere delen.
   De dekking zet de renderer per frame (style.opacity). */
#bliksem-flits {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    background: radial-gradient(ellipse at var(--bx, 50%) 0%, rgba(235, 242, 255, 0.95) 0%, rgba(170, 195, 255, 0.55) 40%, rgba(90, 110, 170, 0.2) 100%);
}

/* ── Crossfade tussen de gang en het spel ──────────────── */

/* Ligt boven alles behalve niets: dit vlak dekt het moment waarop de ene scene
   stopt en de andere begint. Zonder dit zie je één frame leeg canvas. */
#crossfade {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0;
    transition: opacity 520ms ease;
    background:
        radial-gradient(circle at 50% 50%, #dff4ff 0%, #6fd6ff 30%, #05213a 75%, #01030a 100%);
}

#crossfade.on {
    opacity: 1;
}

/* Naar een aanval (Planet Wars, _reisDirect): rood, zoals het aftellen dat erop
   volgt. Het cyaan hierboven is de warp van een gewone reis. */
#crossfade.aanval {
    background:
        radial-gradient(circle at 50% 50%, #ffe3ea 0%, #ff5c84 30%, #3a0716 75%, #0a0104 100%);
}

@media (max-width: 520px), (max-height: 620px) {
    .overlay-inner {
        padding: 16px 16px 18px;
    }

    .brand h1 {
        font-size: 22px;
    }

    .tagline {
        display: none;
    }

    #overlay .code-input {
        font-size: 21px;
        letter-spacing: 0.3em;
    }
}

/* ── Bord bij de hangar ────────────────────────────────── */

/* Ligt in de HUD-laag en blijft daar pointer-events: none: dit is een bord,
   geen knop. Aanmeren gaat via #dock-hint als je dichtbij genoeg bent. */
.dock-sign {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 13px;
    border: 1px solid rgba(255, 209, 102, 0.4);
    border-radius: 8px;
    background: rgba(8, 7, 2, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    transform-origin: 50% 100%;
    scale: var(--sign-scale, 1);
    transition: border-color 0.2s, background 0.2s;
}

.dock-sign .ds-icon {
    font-size: 17px;
    color: var(--amber);
    text-shadow: 0 0 14px rgba(255, 209, 102, 0.85);
}

.dock-sign .ds-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.dock-sign .ds-text b {
    font-size: 12px;
    letter-spacing: 0.26em;
    color: #ffe9bd;
}

.dock-sign .ds-text i {
    font-style: normal;
    font-size: 9px;
    letter-spacing: 0.14em;
    opacity: 0.55;
}

.dock-sign .ds-dist {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--amber);
    opacity: 0.8;
    padding-left: 4px;
    border-left: 1px solid rgba(255, 209, 102, 0.25);
}

/* Binnen aanmeerbereik: het bord wordt de bevestiging dat je goed staat. */
.dock-sign.near {
    border-color: var(--amber);
    background: rgba(38, 26, 4, 0.8);
    box-shadow: 0 0 24px rgba(255, 166, 60, 0.3);
}

/* ── Aanmeren bij de hangar ────────────────────────────── */

/* Ligt in de HUD-laag (pointer-events: none), dus expliciet weer aan: dit is
   op een aanraakscherm de knop zelf. */
#dock-hint {
    position: absolute;
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 209, 102, 0.5);
    border-radius: 999px;
    background: rgba(10, 8, 2, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    cursor: pointer;
    animation: dock-pulse 1.8s ease-in-out infinite;
}

#dock-hint b {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(255, 209, 102, 0.16);
    border: 1px solid rgba(255, 209, 102, 0.45);
    font-size: 11px;
    letter-spacing: 0;
}

#dock-hint:hover {
    border-color: var(--amber);
    background: rgba(30, 22, 4, 0.85);
}

/* ── De boss ──────────────────────────────────────────────
   De hp-balk hoort te laten zien dat er drie gevechten in zitten en niet één
   emmer: per fase een andere kleur, en pulseren zolang hij een aanval oplaadt
   (dezelfde waarschuwing als de ring om hem heen in de wereld). */
#boss-bar[data-phase="2"] .bar.boss i {
    background: linear-gradient(90deg, #ff8a3d, #ffd166);
}

#boss-bar[data-phase="3"] .bar.boss i {
    background: linear-gradient(90deg, #ff2f5e, #ff8a3d);
}

/* ── Verbinding kwijt ─────────────────────────────────────
   Een sluier en geen scherm: de bevroren wereld blijft er doorheen te zien.
   Dat is het verschil tussen "even wachten" en "het spel is weg", en dat
   verschil bepaalt of iemand het tabblad dichtgooit. */
#reconnect {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse at center, rgba(4, 6, 14, 0.55), rgba(2, 3, 8, 0.86));
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 60;
    animation: rc-in 0.35s var(--ease-out);
}

#reconnect.away {
    animation: rc-out 0.45s var(--ease-out) forwards;
}

.rc-box {
    text-align: center;
    padding: 26px 34px;
    border: 1px solid rgba(255, 209, 102, 0.28);
    border-radius: 4px;
    background: rgba(8, 10, 20, 0.72);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

.rc-spin {
    width: 34px;
    height: 34px;
    margin: 0 auto 16px;
    border: 2px solid rgba(255, 209, 102, 0.18);
    border-top-color: var(--amber);
    border-radius: 50%;
    animation: rc-spin 0.9s linear infinite;
}

.rc-title {
    font-size: 13px;
    letter-spacing: 0.34em;
    color: var(--amber);
    text-shadow: 0 0 16px rgba(255, 209, 102, 0.6);
}

.rc-line {
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.82);
}

.rc-hint {
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.42);
}

/* Dezelfde vorm als de knoppen in het pauzemenu, maar in amber: dit scherm
   gaat over een storing en niet over een keuze, en de knop hoort de rustigste
   van de drie regels te zijn -- geen uitnodiging, een uitweg. */
#rc-out {
    margin-top: 18px;
    padding: 9px 18px;
    border-radius: 9px;
    border: 1px solid rgba(255, 209, 102, 0.3);
    background: rgba(255, 209, 102, 0.05);
    color: rgba(255, 233, 186, 0.85);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#rc-out:hover {
    background: rgba(255, 209, 102, 0.16);
    border-color: var(--amber);
    color: #fff6e0;
}

/* Gelukt. Even groen, dan weg -- zonder deze halve seconde weet je niet of het
   gelukt is of dat het scherm gewoon verdween. */
#reconnect.ok .rc-title {
    color: var(--lime, #a6ff5c);
    text-shadow: 0 0 16px rgba(166, 255, 92, 0.6);
}

#reconnect.ok .rc-spin {
    border-color: rgba(166, 255, 92, 0.2);
    border-top-color: var(--lime, #a6ff5c);
    animation: none;
}

@keyframes rc-spin { to { transform: rotate(360deg); } }
@keyframes rc-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rc-out { to { opacity: 0; visibility: hidden; } }

/* Een speler die zijn verbinding kwijt is, gezien door de anderen. Zijn
   naamplaatje zegt het, want een schip dat stilhangt en niets aanneemt hoort
   geen raadsel te zijn. */
.nametag.offline {
    opacity: 0.55;
    filter: grayscale(1);
}

.nametag.offline .nt-name::after {
    content: ' · offline';
    color: var(--amber);
    letter-spacing: 0.1em;
}

/* Een bot (Planet Wars fase 6), of een speler wiens schip een bot vliegt tot hij
   terug is: een AI-plaatje voor de naam. Gewoon te beschieten, dus niet grijs. */
.nametag.bot .nt-name::before {
    content: 'AI';
    display: inline-block;
    margin-right: 5px;
    padding: 0 4px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 9px;
    line-height: 13px;
    letter-spacing: 0.12em;
    vertical-align: 1px;
}

/* ── De fasegrenzen en de zwakke punten op de bossbalk ────
   Twee lijntjes en drie pips. Ze staan hier bij elkaar omdat ze hetzelfde
   doen: van één lang getal (hp) iets maken waar structuur in zit. */
.bar.boss {
    position: relative;
}

.bar.boss .seg {
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 1px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
    pointer-events: none;
}

#boss-nodes {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 5px;
}

#boss-nodes i {
    width: 26px;
    height: 3px;
    border-radius: 2px;
    /* Aan: het knooppunt staat er nog, en zijn romp is dus bepantserd. */
    background: var(--amber);
    box-shadow: 0 0 8px rgba(255, 209, 102, 0.8);
    transition: background 0.25s, box-shadow 0.25s, opacity 0.25s;
}

/* Bijna eraf: het laatste stuk hoort het duidelijkst te zijn. */
#boss-nodes i.low {
    animation: boss-node-low 0.4s ease-in-out infinite alternate;
}

#boss-nodes i.dead {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
    opacity: 0.5;
}

@keyframes boss-node-low {
    from { background: var(--amber); }
    to   { background: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, 0.9); }
}

/* Alle drie eraf: de romp is open. Dan is de balk zelf het verhaal. */
#boss-bar.open .bar.boss {
    box-shadow: 0 0 14px rgba(255, 47, 94, 0.55);
}

#boss-bar.winding #boss-name {
    animation: boss-wind 0.45s ease-in-out infinite alternate;
}

@keyframes boss-wind {
    from { color: inherit; text-shadow: none; }
    to   { color: var(--amber); text-shadow: 0 0 16px rgba(255, 209, 102, 0.9); }
}

/* ── De bakengang ─────────────────────────────────────────
   Geen knop maar een FLUISTERING: geen rand, geen achtergrond, geen toetscap,
   kleine letter. De aanmeer-hint erboven is een spelregel en mag pulseren;
   dit is iets dat je zelf gevonden hebt door tegen een gevel stil te gaan
   hangen, en dan hoort het scherm niet te gaan roepen. Hij fade't in over een
   seconde, zodat hij aankomt als "hé, wat staat daar" en niet als een melding. */
#beacon-hint {
    position: absolute;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    border: 0;
    background: none;
    padding: 4px 10px;
    color: #7fc9e8;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: lowercase;
    cursor: pointer;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
    animation: beacon-whisper 1s ease-out both;
}

#beacon-hint b {
    color: #eaf6ff;
    letter-spacing: 0;
    font-weight: 600;
}

#beacon-hint:hover {
    color: #eaf6ff;
}

@keyframes beacon-whisper {
    from { opacity: 0; letter-spacing: 0.6em; }
    to   { opacity: 0.78; letter-spacing: 0.34em; }
}

/* De balk terwijl je binnen loopt. Hij staat er de HELE tijd -- zolang je in
   de toren bent kun je er niet uit vliegen, dus de uitgang mag geen ding zijn
   dat je moet onthouden. Bovenaan, want onderin kijk je naar je voeten. */
#beacon-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 44;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 9px 20px;
    background: linear-gradient(rgba(2, 10, 18, 0.86), rgba(2, 10, 18, 0.5));
    border-bottom: 1px solid rgba(49, 216, 255, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: #9ed7f2;
    pointer-events: none;
}

.bb-left {
    display: flex;
    align-items: baseline;
    gap: 14px;
    white-space: nowrap;
}

.bb-title {
    color: var(--cyan);
    font-family: var(--font);
    font-size: 14px;
    letter-spacing: 0.3em;
    text-shadow: 0 0 14px var(--cyan-soft);
}

.bb-floor i {
    font-style: normal;
    color: #eaf6ff;
}

.bb-keys {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0.72;
    font-size: 10px;
}

.bb-keys b {
    color: #eaf6ff;
    letter-spacing: 0;
}

/* De uitgang is de enige regel die je altijd moet kunnen vinden, dus die is de
   enige met een rand eromheen. */
.bb-exit {
    padding: 5px 12px;
    border: 1px solid rgba(255, 209, 102, 0.5);
    border-radius: 999px;
    color: var(--amber);
    font-size: 10px;
    white-space: nowrap;
}

.bb-exit b {
    color: #fff3d6;
    letter-spacing: 0;
}

@media (max-width: 720px) {
    #beacon-bar { flex-wrap: wrap; justify-content: center; gap: 8px; }
    .bb-keys { display: none; }
}

@keyframes dock-pulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255, 166, 60, 0.2); }
    50% { box-shadow: 0 0 34px rgba(255, 166, 60, 0.45); }
}

/* Op een aanraakscherm is er geen G-toets om te tonen; dan is de hint zelf de
   knop en mag hij ook wat groter. */
@media (pointer: coarse) {
    #dock-hint b {
        display: none;
    }

    /* Het bord blijft, maar de ondertitel valt weg: op een telefoon is het
       bord anders breder dan het halve scherm. */
    .dock-sign .ds-text i {
        display: none;
    }

    .dock-sign {
        padding: 5px 10px;
        gap: 7px;
    }

    #dock-hint {
        bottom: 22%;
        padding: 13px 26px;
        font-size: 13px;
    }
}

/* ── Hangar ──────────────────────────────────────── */

/* Geen dichte achtergrond: hieronder ligt de hangar-scene op het canvas, en
   daar mag je met de muis om je schip heen draaien. Alleen de panelen vangen
   klikken. */
#hangar {
    position: fixed;
    inset: 0;
    z-index: 46;
    pointer-events: none;
    animation: toast-in 0.22s ease-out;
}

#hangar > * {
    pointer-events: auto;
}

.hg-head {
    position: absolute;
    top: 18px;
    left: 22px;
    right: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.hg-head h2 {
    margin: 0 0 2px;
    font-size: 20px;
    letter-spacing: 0.34em;
    color: var(--cyan);
    text-shadow: 0 0 26px rgba(49, 216, 255, 0.5);
}

.hg-head p {
    margin: 0;
}

.hg-wallet {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 209, 102, 0.35);
    border-radius: 10px;
    background: rgba(4, 10, 22, 0.72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.hg-wallet .coin {
    color: var(--amber);
    font-size: 15px;
    text-shadow: 0 0 14px rgba(255, 209, 102, 0.8);
}

.hg-wallet b {
    font-family: var(--mono);
    font-size: 20px;
    color: var(--amber);
}

/* De scheepskaart staat linksonder, onder het model: dat is de plek die de
   camera-offset vrijhoudt. */
.hg-readout {
    position: absolute;
    left: 22px;
    bottom: 22px;
    width: min(300px, 34vw);
    padding: 11px 13px;
    border: 1px solid var(--panel-line);
    border-radius: 10px;
    background: var(--panel);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.hg-readout ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.hg-readout li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
}

.hg-readout li span {
    flex: 1;
    opacity: 0.55;
    font-size: 9px;
    letter-spacing: 0.16em;
}

.hg-readout li b {
    font-family: var(--mono);
    font-size: 13px;
    color: #fff;
}

.hg-readout li i {
    font-style: normal;
    opacity: 0.4;
    font-size: 9px;
    min-width: 62px;
}

/* Het modulepaneel: rechts, waar de camera het schip vandaan houdt. */
.hg-panel {
    position: absolute;
    top: 96px;
    right: 22px;
    bottom: 22px;
    width: min(392px, 40vw);
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border: 1px solid var(--panel-line);
    border-radius: 12px;
    background: var(--panel);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    box-shadow: 0 0 34px rgba(0, 0, 0, 0.6);
}

#hg-modules {
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0;
    flex: 1;
    overflow-y: auto;
    display: grid;
    gap: 8px;
    align-content: start;
}

#hg-modules .empty {
    opacity: 0.45;
    font-size: 12px;
}

.module {
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.15s, background 0.15s;
}

.module:hover {
    border-color: var(--panel-line);
    background: rgba(49, 216, 255, 0.05);
}

.module.full {
    border-color: rgba(61, 255, 160, 0.28);
    background: rgba(61, 255, 160, 0.05);
}

/* Niet kunnen betalen is geen fout maar een doel; dus dimmen, niet rood. */
.module.locked {
    opacity: 0.62;
}

.m-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.m-name {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #fff;
}

.m-pips {
    display: flex;
    gap: 3px;
}

.m-pips i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
}

.m-pips i.on {
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-soft);
}

.m-blurb {
    margin: 4px 0 7px;
    font-size: 11px;
    line-height: 1.35;
    opacity: 0.5;
}

.m-bot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.m-bot .step {
    font-family: var(--mono);
    font-size: 11px;
    opacity: 0.6;
}

.m-bot .step b {
    color: var(--green);
    opacity: 1;
}

.m-bot .max {
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--green);
}

.m-buy {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border: 1px solid rgba(255, 209, 102, 0.45);
    border-radius: 7px;
    background: rgba(255, 209, 102, 0.1);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.m-buy:hover:not(:disabled) {
    background: rgba(255, 209, 102, 0.24);
    border-color: var(--amber);
}

.m-buy:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

#hg-leave {
    margin-top: 10px;
    padding: 11px;
    border: 1px solid var(--panel-line);
    border-radius: 9px;
    background: rgba(49, 216, 255, 0.12);
    color: #eaf6ff;
    font-family: var(--font);
    font-size: 12px;
    letter-spacing: 0.24em;
    cursor: pointer;
}

#hg-leave:hover {
    background: rgba(49, 216, 255, 0.24);
    border-color: var(--cyan);
}

/* Smal scherm: de panelen onder elkaar in plaats van om het schip heen. De
   camera schuift het schip dan naar boven (zie HangarScene._applyOffset). */
@media (max-width: 860px), (max-height: 620px) {
    .hg-head {
        top: 12px;
        left: 12px;
        right: 12px;
    }

    .hg-head h2 {
        font-size: 15px;
        letter-spacing: 0.24em;
    }

    .hg-head p {
        display: none;
    }

    /* De scheepskaart valt weg: hij staat al in de modulelijst als "wat het nu
       is", en op een telefoon is de ruimte er niet voor. */
    .hg-readout {
        display: none;
    }

    .hg-panel {
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-height: 58vh;
    }
}

/* ── Start-overlay ──────────────────────────────────────────────────────── */

/* Geen dichte achtergrond: hieronder ligt de gang (corridor.js) op het canvas,
   en die IS het inlogscherm. Alleen een donkere waas naar de randen toe, zodat
   de tekst leesbaar blijft zonder de 3D te verstoppen. */
#overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(1, 4, 12, 0.55) 0%, rgba(1, 4, 12, 0.82) 70%, rgba(1, 4, 12, 0.94) 100%);
}

.overlay-inner {
    width: min(440px, 90vw);
    text-align: center;
    padding: 24px 26px 26px;
    border: 1px solid rgba(49, 216, 255, 0.16);
    border-radius: 16px;
    background: rgba(3, 8, 18, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(49, 216, 255, 0.04);
}

.brand {
    margin-bottom: 18px;
}

.brand-3d {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--magenta);
    color: var(--magenta);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    box-shadow: 0 0 20px rgba(255, 47, 208, 0.35);
}

.brand h1 {
    margin: 12px 0 6px;
    font-size: clamp(26px, 6vw, 40px);
    letter-spacing: 0.2em;
    text-shadow: 0 0 34px rgba(49, 216, 255, 0.55);
}

.tagline {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.16em;
    opacity: 0.5;
}

#overlay form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

#overlay input,
#overlay select {
    padding: 11px 14px;
    border-radius: 9px;
    border: 1px solid var(--panel-line);
    background: rgba(6, 14, 28, 0.9);
    color: #dff3ff;
    font: inherit;
    outline: none;
}

#overlay input:focus,
#overlay select:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(49, 216, 255, 0.14);
}

#overlay button {
    padding: 12px 18px;
    border-radius: 9px;
    border: 1px solid var(--cyan);
    background: rgba(49, 216, 255, 0.12);
    color: var(--cyan);
    font: inherit;
    letter-spacing: 0.2em;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}

#overlay button:hover {
    background: rgba(49, 216, 255, 0.22);
    box-shadow: 0 0 26px rgba(49, 216, 255, 0.32);
}

#overlay button:active {
    transform: translateY(1px);
}

#overlay button.primary {
    width: 100%;
    margin-top: 16px;
    padding: 15px;
    font-size: 15px;
}

#overlay button:disabled {
    opacity: 0.5;
    cursor: wait;
}

.field {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    font-size: 12px;
    letter-spacing: 0.14em;
    opacity: 0.85;
}

.field span {
    flex: none;
}

.field select {
    flex: 1;
}

.error {
    color: var(--red);
    font-size: 12px;
    min-height: 18px;
    margin: 4px 0 0;
}

.bad {
    color: var(--red);
    letter-spacing: 0.24em;
}

/*
  ALLEEN LOKAAL: een schakelaar die iets uitzet wat normaal beveiliging is.
  Amber en niet rood: er is niets stuk, er staat iets open -- en die twee horen
  er niet hetzelfde uit te zien. Een kader eromheen omdat een regeltje tekst
  onder een formulier precies het soort ding is dat je na twee dagen niet meer
  leest.
*/
.dev-let-op {
    margin: 10px 0 0;
    padding: 8px 10px;
    border: 1px solid rgba(255, 209, 102, 0.45);
    border-left-width: 3px;
    border-radius: 4px;
    background: rgba(255, 209, 102, 0.08);
    color: var(--amber);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dev-let-op small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 209, 102, 0.72);
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: none;
}

code {
    font-family: var(--mono);
    background: rgba(49, 216, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 2px solid rgba(49, 216, 255, 0.18);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}

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

#boot-status {
    font-size: 12px;
    letter-spacing: 0.16em;
    opacity: 0.65;
}

/* ── Touch-bediening ────────────────────────────────────────────────────── */

#touch-controls {
    position: absolute;
    inset: 0;
    /* De laag zelf vangt niets af — alleen de knoppen erin. Anders zou hij de
       stuur- en bewegingsduimen van het canvas afhouden. */
    pointer-events: none;
}

.tc-right,
.tc-top {
    position: absolute;
    display: flex;
    gap: 10px;
}

/* Eén kolom, in de RECHTERONDERHOEK. Krappe marge en krappe tussenruimte:
   deze kolom staat precies waar je duim rondkijkt, dus alles wat hij breder of
   hoger wordt gaat van je uitzicht af.
   
   Onderaan en niet gecentreerd, en dat is opgemeten: op een landschapstelefoon
   (844x390) is de kolom 234px hoog, en gecentreerd liep de bovenste knop dwars
   door de radar. Bovendien ligt je duim daar toch al. */
.tc-right {
    right: max(6px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    flex-direction: column;
    gap: 7px;
}

.tc-top {
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
}

.tc-btn {
    pointer-events: auto;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 1px solid var(--panel-line);
    background: rgba(4, 10, 22, 0.6);
    color: var(--cyan);
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0.1em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background 0.1s, transform 0.1s;
}

.tc-btn:active,
.tc-btn.held {
    background: rgba(49, 216, 255, 0.3);
    transform: scale(0.93);
}

/*
  Fullscreen levert het portaal zelf, en een tweede knop ernaast is bij
  CrazyGames een afwijsgrond ("Games should not have their own fullscreen
  button"). Weg dus zodra we ingelijst zijn -- en alleen dan: op
  cosmicsurvivor.nl is dit op een telefoon de enige manier om de browserbalken
  kwijt te raken, want touch kent geen pointer lock.

  `body.ingelijst` wordt gezet in main.js::boot(), uit `Portaal.ingelijst()`.
*/
body.ingelijst .tc-btn[data-tap="fullscreen"] {
    display: none;
}

/*
  En de datakern bestaat in hun frame ook niet.

  Alles achter die knop is voor een portaalspeler leeg of verboden: geen
  wachtwoord om te wijzigen en dus geen tweestapsverificatie, geen e-mailadres
  om meldingen heen te sturen, geen uitloggen (dat mag daar niet), en zijn naam
  is die van hén -- die hoort hij bij ons juist níét te kunnen veranderen, want
  dan herkennen zijn vrienden hem niet meer. Wat overblijft is een deur naar een
  lege kamer, met een uitlogknop erin.

  Hier verbergen en niet uitzetten. Buiten een frame wordt deze knop grijs met
  "de datakern zit in NEXUS" erbij, want dan is er een reden die je kunt geven;
  hier is die er niet.
*/
body.ingelijst #terminal-btn {
    display: none;
}

/* De hoogteknoppen: het grootst, want je hóudt ze vast terwijl je vliegt en
   dan is een randje mis een duik. */
.tc-btn.tc-hold {
    width: 70px;
    height: 70px;
    font-size: 24px;
}

/* Boost en heal: kleiner, want je tikt ze aan. Zo blijft de kolom kort. */
.tc-btn.tc-tap {
    width: 54px;
    height: 54px;
    font-size: 10px;
}

.tc-btn.tc-small {
    width: 44px;
    height: 44px;
    font-size: 14px;
    opacity: 0.75;
}

/* Cooldown-feedback: dof zolang de actie nog niet klaar is. */
.tc-btn.cooling {
    opacity: 0.35;
    color: #7c8aa0;
    border-color: rgba(255, 255, 255, 0.12);
}

/* ── Mobiel ─────────────────────────────────────────────────────────────── */

/*
   Hier stond `@media (pointer: coarse), (max-height: 540px)`, en die tweede
   helft was de valkuil. **Een lage viewport is geen telefoon.** Een spelportaal
   zet ons in een frame dat op een gewone laptop zomaar onder de 540 pixels
   blijft, en dan kreeg een muisspeler de telefoon-HUD: alles op 62%, bij
   devicePixelRatio 1. Gemeten op 1280x539 in een frame van deze maat:

       zonetag        9px   x 0,62  =  5,6 px
       SCORE / KILLS  10,5  x 0,62  =  6,5 px
       paneelkop      11    x 0,62  =  6,8 px
       levensbalk     13    x 0,62  =  8,1 px

   Dat is geen kleine tekst meer maar grijze mist, en "leesbaar bij
   devicePixelRatio 1" is met zoveel woorden een eis van CrazyGames -- inclusief
   de zin dat je het in een klein frame moet testen en niet op je eigen scherm.
   Op precies die viewport past de HUD ongeschaald trouwens ruim: 231 pixels
   hoog links, 256 rechts, van de 539. Het verkleinen loste daar niets op.

   Nu staat het op `body.touch`, en dat is geen omweg maar de bron zelf.
   `_detectTouch()` in main.js zet die klasse op
   `(pointer: coarse) || navigator.maxTouchPoints > 0` -- ruimer dan de
   mediaquery, want een aanraakapparaat dat zichzelf `fine` noemt telt mee -- en
   diezelfde regel bepaalt of de aanraakknoppen er überhaupt zijn. Alles
   hieronder hoort bij die knoppen, dus het hoort bij die schakelaar.

   Wat er wél op hoogte hoort te staan (het pauzemenu, de boss-balk, de plek van
   de killfeed) staat in het blok hieronder, en dat geldt nog steeds voor
   allebei.
*/

/* De HUD in zijn geheel verkleinen houdt de verhoudingen intact en is
   veel minder foutgevoelig dan elk onderdeel apart bijstellen. */
body.touch .hud-topleft {
    transform: scale(0.62);
    transform-origin: top left;
    width: 340px;
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
}

body.touch .hud-topright {
    transform: scale(0.62);
    transform-origin: top right;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
}

body.touch #killfeed {
    font-size: 9px;
    transform: scale(0.85);
    transform-origin: bottom right;
}

body.touch #crosshair {
    transform: scale(0.8);
}

/* Geen muis, dus geen muisuitleg en geen pointer lock om aan te kondigen.
   Op een laag venster mét muis blijft `#lock-hint` juist staan -- dat is de
   regel die vertelt dat je moet klikken om te kunnen kijken. */
body.touch .help-hint,
body.touch #help,
body.touch #lock-hint {
    display: none;
}

/* Op een lage landschapsviewport botst de rechterkolom met de radar.
   Iets kleiner en iets lager: onder de radar door, en nog steeds ruim
   boven de zone waar je duim stuurt. */
body.touch .tc-btn {
    width: 54px;
    height: 54px;
    font-size: 10px;
}

/* Op een lage landschapsviewport is de kolom van vier knoppen het krapst.
   Samen met de tussenruimte komt hij zo op ~215px, en dat past onder de
   radar door zonder de halve rechterkant op te eten. */
body.touch .tc-btn.tc-hold {
    width: 62px;
    height: 62px;
    font-size: 22px;
}

body.touch .tc-btn.tc-tap {
    width: 46px;
    height: 46px;
    font-size: 9px;
}

body.touch .tc-btn.tc-small {
    width: 38px;
    height: 38px;
    font-size: 12px;
}

body.touch .tc-right {
    gap: 5px;
}

/* ── De chat op touch (Nathan 2026-09-29: "je kan niet in de chat op mobiel")
   De knop CHAT bovenin vervangt de aanwijzing "T chat": er is geen T, en de
   aanwijzing was geen knop. Tijdens het typen gaat de chat naar boven: onderin
   ligt dan het toetsenbord, en een telefoon in landschap houdt daarboven maar
   een strook over. Het veld eerst, de regels eronder. */
body.touch .tc-btn.tc-chat {
    font-size: 8.5px;
    letter-spacing: 0.06em;
}

body.touch .chat-hint {
    display: none;
}

/* Onder de rij knoppen bovenin (CHAT, 3P, ⛶, ❚❚), niet ernaast: anders ligt
   het veld over de CHAT-knop en kun je hem niet meer aantikken om te sluiten. */
body.touch #chat.typt {
    top: calc(max(8px, env(safe-area-inset-top)) + 46px);
    bottom: auto;
    left: max(10px, env(safe-area-inset-left));
    width: min(440px, calc(100vw - 20px));
    z-index: 30;
}

body.touch #chat.typt #chat-form { order: -2; }
body.touch #chat.typt #chat-suggesties { order: -1; }

body.touch #chat.typt #chat-invoer {
    /* Onder 16px zoomt iOS in op het veld, en dan staat de HUD scheef. */
    font-size: 16px;
    padding: 9px 12px;
}

body.touch #chat.typt #chat-regels {
    max-height: 30vh;
    background: rgba(2, 8, 18, 0.72);
    border-radius: 0 0 6px 6px;
    padding: 4px 8px;
}

/* De toets ENTER bestaat niet op een telefoon: daar een pijl. */
body.touch #snel-knop b,
body.touch #snel-thuis b {
    font-size: 0;
    letter-spacing: 0;
}

body.touch #snel-knop b::before,
body.touch #snel-thuis b::before {
    content: '▶';
    font-size: 16px;
}

body.touch #snel-thuis b::before {
    font-size: 11px;
}

/* In de bouwmodus tik je gebouwen aan; praten kan weer zodra je in je schip
   zit (zoals op een staande telefoon, zie de bouwmodus hieronder). */
body.touch.bouwmodus #chat {
    display: none;
}

/* ── Lage viewport, ongeacht het apparaat ───────────────────────────────── */

/*
   Alleen wat écht over verticale ruimte gaat: iets dat anders niet past of
   niet meer in beeld staat. Geen lettergroottes en geen schaal op de HUD --
   die horen bij het apparaat en staan hierboven.
*/
@media (max-height: 540px) {
    #boss-bar {
        transform: translateX(-50%) scale(0.7);
        transform-origin: top center;
        top: 54px;
    }

    #announce {
        top: 22%;
        transform: translateX(-50%) scale(0.8);
    }

    #killfeed {
        bottom: 12px;
    }

    #death h2 {
        font-size: 22px;
    }

    /* Het pauzemenu moet op een lage landschapsviewport nog passen. */
    #pause {
        padding: 16px 16px 12px;
        max-height: 92vh;
        overflow-y: auto;
    }

    #pause h2 {
        font-size: 18px;
    }

    .team-panel {
        margin: 12px 0 12px;
        padding: 10px;
    }

    #team-list {
        max-height: 96px;
    }

    #pause .primary {
        padding: 12px;
    }

    .card {
        width: 40vw;
        max-width: 190px;
        padding: 12px 10px;
    }

    .card .ic {
        font-size: 24px;
    }
}

/* Smalle schermen: scorebord inkorten, er is simpelweg geen plek. */
@media (max-width: 820px), (max-height: 540px) {
    #leaderboard {
        min-width: 150px;
    }

    #leaderboard li:nth-child(n+5) {
        display: none;
    }
}

/* ── Credits ─────────────────────────────────────────────────────────────
   Zelfde opzet als de datakern: een 3D-scene met een HUD erover. Het paneel
   staat rechts en de scene schuift daarvoor naar links (credits.js kantelt zijn
   kijkpunt mee), zodat tekst en beeld elkaar nooit overlappen. */
#credits {
    position: fixed;
    inset: 0;
    z-index: 47;
    pointer-events: none;
    animation: toast-in 0.28s ease-out;
}

#credits > * {
    pointer-events: auto;
}

.cr-head {
    position: absolute;
    top: 18px;
    left: 22px;
    right: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.cr-head h2 {
    margin: 0 0 2px;
    font-size: 20px;
    letter-spacing: 0.34em;
    color: var(--cyan);
    text-shadow: 0 0 26px rgba(49, 216, 255, 0.5);
}

.cr-head p {
    margin: 0;
}

.cr-x {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border: 1px solid var(--panel-line);
    border-radius: 9px;
    background: rgba(4, 10, 22, 0.72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    color: #cfe6f7;
    font-family: var(--font);
    font-size: 10px;
    letter-spacing: 0.26em;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}

.cr-x b {
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 9px;
    letter-spacing: 0.1em;
}

.cr-x:hover {
    background: rgba(49, 216, 255, 0.18);
    border-color: var(--cyan);
}

/* Het kaartje. Eén accentlijn links in plaats van een volledig kader: dat laat
   de 3D erachter meer ruimte en leest rustiger bij lange lijstjes. */
.cr-panel {
    position: absolute;
    top: 104px;
    right: 22px;
    bottom: 92px;
    width: min(440px, 44vw);
    display: flex;
    flex-direction: column;
    padding: 16px 18px 14px;
    border: 1px solid var(--panel-line);
    border-left: 2px solid var(--cyan);
    border-radius: 12px;
    background: linear-gradient(105deg, rgba(6, 14, 28, 0.86), rgba(4, 9, 20, 0.62));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(49, 216, 255, 0.05);
    text-align: left;
}

.cr-kicker {
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--cyan);
    opacity: 0.9;
}

#cr-name {
    margin: 6px 0 4px;
    font-size: 25px;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #f2fbff;
    text-shadow: 0 0 30px rgba(49, 216, 255, 0.35);
}

.cr-role {
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 12px;
    line-height: 1.5;
    color: var(--amber);
}

.cr-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
}

.cr-list,
.cr-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr-list li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 16px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #dbeeff;
}

/* Streepje in plaats van een bolletje: past bij de rest van de HUD. */
.cr-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 1px;
    background: var(--cyan);
    opacity: 0.75;
}

.cr-rows li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1px 12px;
    margin-bottom: 11px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cr-rows li b {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #f2fbff;
}

.cr-rows li em {
    grid-column: 1 / -1;
    font-size: 11.5px;
    font-style: normal;
    color: #9fb8cc;
}

.cr-rows li span {
    align-self: start;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-align: right;
    color: var(--cyan);
    opacity: 0.85;
}

.cr-note {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Navigatie onderaan, gecentreerd: dit is het enige waar je hier op klikt. */
.cr-nav {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.cr-arrow {
    width: 40px;
    height: 40px;
    border: 1px solid var(--panel-line);
    border-radius: 50%;
    background: rgba(4, 10, 22, 0.72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    color: #dff3ff;
    font-family: var(--font);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s;
}

.cr-arrow:hover {
    background: rgba(49, 216, 255, 0.2);
    border-color: var(--cyan);
    transform: scale(1.06);
}

.cr-dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Zelfde taal als de stippen in de gang: hoeveel haltes er zijn en waar je
   bent. Hier zijn ze wel aanklikbaar, want dit is geen voortgang die je moet
   verdienen. */
.cr-dots button {
    width: 30px;
    height: 4px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: background 0.35s, box-shadow 0.35s, height 0.2s;
}

.cr-dots button:hover {
    background: rgba(255, 255, 255, 0.4);
    height: 6px;
}

.cr-dots button.on {
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan-soft);
}

@media (max-width: 860px), (max-height: 620px) {
    .cr-head {
        top: 12px;
        left: 12px;
        right: 12px;
    }

    .cr-head h2 {
        font-size: 15px;
        letter-spacing: 0.24em;
    }

    .cr-head p {
        display: none;
    }

    .cr-panel {
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 74px;
        width: auto;
        max-height: 52vh;
        padding: 12px 14px 10px;
    }

    #cr-name {
        font-size: 19px;
    }

    .cr-nav {
        bottom: 16px;
        gap: 12px;
    }
}

/* ============================================================================
   Makeover 2026-09 — typografie, frames, vizier, radar, dood, zonetitel, gang.

   Bewust als overrides ONDERAAN, niet verspreid door het bestand: de blokken
   hierboven blijven de plek waar iets gedefinieerd is, hier staat alleen wat de
   makeover anders wil. Zoek je waarom iets er zo uitziet, kijk dan eerst hier.
   ========================================================================== */

:root {
    /* Rajdhani voor titels en labels, Share Tech Mono voor getallen. Beide
       met echte terugval: zonder netwerk valt de HUD terug op Segoe/Consolas
       en blijft leesbaar, alleen minder 'schip'. */
    --display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    --font: 'Rajdhani', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: 'Share Tech Mono', 'Consolas', 'SF Mono', ui-monospace, monospace;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Rajdhani is compacter dan Segoe op dezelfde puntgrootte: de kleinste labels
   een stap omhoog, anders worden ze 8px-ruis. */
.panel-title {
    font-size: 11px;
    font-weight: 600;
}

.stats .lbl {
    font-size: 10px;
    letter-spacing: 0.16em;
}

.stats .val {
    font-size: 14px;
}

/* Getallen die elk kwart seconde veranderen mogen niet heen en weer springen. */
.stats .val,
.telemetry,
.bar span,
#leaderboard .sc,
#hp-text,
.hg-wallet b {
    font-variant-numeric: tabular-nums;
}

.brand h1,
#death h2,
#pause h2,
#zonemap h2,
#hangar h2,
#terminal h2,
#credits h2 {
    font-family: var(--display);
    font-weight: 700;
}

/* ── Frames ─────────────────────────────────────────────────────────────── */

/* Eén frame-taal voor alle HUD-panelen: afgeschuinde hoeken (rechtsboven en
   linksonder), een hoekbeugel linksboven, een lichte bovenrand, dunne
   scanlijnen en glas dat kleur doorlaat (saturate) in plaats van grijs te
   vervagen. De ronde kaart met 1px-lijn is weg. De clip-path snijdt de
   buitenste gloed af; die is vervangen door de binnenlijn. */
.panel {
    position: relative;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 26%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px),
        var(--panel);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 0 22px rgba(49, 216, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.panel::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    border-left: 2px solid var(--cyan);
    border-top: 2px solid var(--cyan);
    opacity: 0.7;
    pointer-events: none;
}

/* ── Vizier ─────────────────────────────────────────────────────────────── */

/* Vier tikken met een gat in het midden, een stip, en een vage ring. Bij een
   treffer (#crosshair.hit, gezet op het bulletHit-bericht van de server)
   schieten de tikken kort naar buiten en flitsen ze op: de hit-marker. */
/* Dikker en dekkender dan de eerste versie (1,5 px op 0,85 dekking): een
   vizier moet je zien staan tegen een felle stad zonder ernaar te zoeken. De
   tikken zijn 3 px, vol dekkend, met een donkere rand eronder zodat ze ook op
   een lichte gevel leesbaar blijven. */
#crosshair {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    opacity: 1;
    border-radius: 50%;
    border: 1px solid rgba(49, 216, 255, 0.4);
    background: radial-gradient(circle, #fff 0 1.6px, var(--cyan) 1.6px 2.6px, transparent 3.2px);
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.85));
}

#crosshair::before {
    width: 3px;
    margin-left: -1.5px;
    background: linear-gradient(to bottom, var(--cyan) 0 30%, transparent 30% 70%, var(--cyan) 70%);
    box-shadow: 0 0 6px rgba(49, 216, 255, 0.9);
}

#crosshair::after {
    height: 3px;
    margin-top: -1.5px;
    background: linear-gradient(to right, var(--cyan) 0 30%, transparent 30% 70%, var(--cyan) 70%);
    box-shadow: 0 0 6px rgba(49, 216, 255, 0.9);
}

#crosshair.hit::before,
#crosshair.hit::after {
    animation: hit-tick 0.16s var(--ease-out);
}

@keyframes hit-tick {
    0% {
        transform: scale(1.55);
        filter: brightness(2.4) drop-shadow(0 0 6px var(--cyan));
    }

    100% {
        transform: scale(1);
        filter: none;
    }
}

/* In een veilige haven mag je niet schieten: het vizier valt uiteen tot een
   gestippelde ring (bovenop het dimmen dat hierboven al gebeurt). */
#hud.safe-zone #crosshair {
    border-style: dashed;
    border-color: rgba(49, 216, 255, 0.45);
}

/* ── Lage HP ────────────────────────────────────────────────────────────── */

/* Onder 25% (#hud.critical, gezet in _updateHud naast de kleurdrempels van de
   balk) klopt een rode rand mee met de balk. Complementeert de rode flits van
   de renderer bij een treffer; die is kort, dit blijft zolang het kritiek is. */
#hud.critical::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 160px rgba(255, 59, 107, 0.35);
    animation: critical-pulse 0.9s ease-in-out infinite;
}

@keyframes critical-pulse {
    50% {
        box-shadow: inset 0 0 90px rgba(255, 59, 107, 0.1);
    }
}

#hud.critical .bar.hp {
    animation: critical-bar 0.9s ease-in-out infinite;
}

@keyframes critical-bar {
    50% {
        box-shadow: 0 0 16px rgba(255, 59, 107, 0.85);
    }
}

/* ── Zonetitel ──────────────────────────────────────────────────────────── */

/* 'major' (gezet door _enterZone): een titelkaart in plaats van een pil. De
   letters komen van wijd uit elkaar naar hun plek, twee haarlijnen vegen
   open. De kleur komt nog steeds van .good/.bad. */
.toast.major {
    position: relative;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(22px, 3.4vw, 38px);
    letter-spacing: 0.32em;
    padding: 10px 46px;
    border-radius: 0;
    border-color: transparent;
    background: linear-gradient(90deg, transparent, rgba(4, 10, 22, 0.85) 18%, rgba(4, 10, 22, 0.85) 82%, transparent);
    box-shadow: none;
    text-shadow: 0 0 28px currentColor;
    animation: major-in 0.7s var(--ease-out);
}

.toast.major::before,
.toast.major::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    animation: major-line 0.7s var(--ease-out);
}

.toast.major::before {
    top: 0;
}

.toast.major::after {
    bottom: 0;
}

@keyframes major-in {
    from {
        opacity: 0;
        letter-spacing: 0.7em;
        filter: blur(4px);
    }
}

@keyframes major-line {
    from {
        transform: scaleX(0);
    }
}

#killfeed div {
    font-family: var(--mono);
    animation: kf-in 0.22s var(--ease-out);
}

@keyframes kf-in {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
}

/* ── Dood ───────────────────────────────────────────────────────────────── */

/* Het dramatischste moment kreeg een display-toggle. Nu: het rood vloeit in,
   de titel komt van een strakke regel met een rood/cyaan gespleten schaduw
   naar zijn brede spatiëring, de regels eronder volgen na een tel. */
#death:not(.hidden) {
    animation: death-in 0.5s ease-out;
}

#death h2 {
    font-size: clamp(30px, 5vw, 54px);
    animation: death-title 0.8s var(--ease-out);
}

#death p {
    animation: toast-in 0.6s ease-out 0.25s both;
}

@keyframes death-in {
    from {
        opacity: 0;
    }
}

@keyframes death-title {
    0% {
        opacity: 0;
        letter-spacing: 0.05em;
        text-shadow: -6px 0 0 rgba(49, 216, 255, 0.8), 6px 0 0 rgba(255, 59, 107, 0.8);
    }

    60% {
        text-shadow: -2px 0 0 rgba(49, 216, 255, 0.6), 2px 0 0 rgba(255, 59, 107, 0.6);
    }

    100% {
        letter-spacing: 0.28em;
        text-shadow: 0 0 30px rgba(255, 59, 107, 0.8);
    }
}

/* ── De gang (inlogscherm) ──────────────────────────────────────────────── */

/* De waas over de gang stond op 55% in het midden tot 94% aan de randen: de
   mooiste scene van het spel was een donker behang achter een kaart. Het glas
   van de kaart draagt de leesbaarheid nu zelf. */
#overlay {
    background: radial-gradient(ellipse at 50% 50%, rgba(1, 4, 12, 0.1) 0%, rgba(1, 4, 12, 0.38) 70%, rgba(1, 4, 12, 0.62) 100%);
}

.overlay-inner {
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 22%),
        rgba(3, 8, 18, 0.55);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: inset 0 0 40px rgba(49, 216, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.brand h1 {
    letter-spacing: 0.26em;
}

/* ── Sectorkaart als melkweg (2026-09) ─────────────────────────────────────
   De kaart is geen plat schijfje meer maar een 3D-scene waar je doorheen
   beweegt (galaxy.js). Dit blok zet het oude vlak om in een doorzichtige laag
   over die scene heen: de knopen blijven DOM (klikbaar, leesbaar, met
   toetsenbord te bedienen) maar krijgen hun plek per frame uit de projectie
   van de 3D-marker. Vandaar pixels in plaats van percentages. */

/* ============================================================================
   De HUD, 2026-09-16 — hij mag zeggen wat er te halen valt.

   DONKER BLIJFT HIER WEL DONKER, en dat is een keuze en geen vergetelheid. In
   een pauzescherm zoek je knoppen en lees je regels; daar werkt duisternis
   tegen je, en daarom is dat scherm lichter geworden. De HUD is het
   tegenovergestelde geval: je kijkt er niet naar, je ziet hem terwijl je op
   iets anders let. Wat hier moest veranderen is niet de kleur maar het volume
   — de maten waren zo klein dat de helft van wat er stond nooit gelezen werd,
   en de dingen die iets te vertellen hadden deden dat zwijgend.
   ========================================================================== */

/* ── De cijfers ─────────────────────────────────────────────────────────── */

/* Score en kills waren 14px in een paneel van 340px breed. Dat is de maat van
   een voetnoot, terwijl dit de twee getallen zijn waar het spel om draait. */
.stats .val {
    font-size: 17px;
    line-height: 1;
}

.stats .lbl {
    font-size: 10.5px;
    opacity: 0.62;
}

/* Starcoins zijn geen derde getal maar de reden dat je nog een golf doet:
   groter dan de rest, in de muntkleur, en met de munt ervoor op maat. */
.stats .row.coins {
    position: relative;
    align-items: center;
}

.stats .row.coins .val {
    font-size: 21px;
    color: #ffd166;
    text-shadow: 0 0 14px rgba(255, 209, 102, 0.45);
}

.stats .row.coins .coin {
    font-size: 15px;
}

/* Het vliegertje bij een bijschrijving. Absoluut, zodat de rij niet verspringt
   op het moment dat er iets gebeurt — een HUD die van maat verandert terwijl
   je stuurt is erger dan een HUD die niets zegt. */
.coin-pop {
    position: absolute;
    /* Op de helft van de rij en niet links: hij stijgt uit de muntenrij op naar
       de rij erboven, en daar is de linkerkant bezet door SCORE en de
       rechterkant door KILLS. De ruimte ertussen is precies waar hij langs kan
       zonder iets af te dekken. */
    left: 50%;
    bottom: 100%;
    font-family: var(--mono);
    font-size: 15px;
    color: #ffd166;
    text-shadow: 0 0 12px rgba(255, 209, 102, 0.8);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

/* De tijdkromme staat hier op `linear` en per stap in de keyframes zelf. Dat
   lijkt omslachtig, maar met één `ease-out` over het geheel zat het vliegertje
   al op een kwart dekking voordat je het gelezen had: die kromme haast zich
   naar het einde, en het einde is hier "weg". Nu klapt hij op, staat hij stil,
   en vertrekt hij pas daarna. */
.coin-pop.op {
    animation: coin-op 1.35s linear forwards;
}

@keyframes coin-op {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.85);
        animation-timing-function: var(--ease-out);
    }

    16% {
        opacity: 1;
        transform: translateY(0) scale(1.16);
        animation-timing-function: ease-out;
    }

    30% {
        opacity: 1;
        transform: translateY(-2px) scale(1);
        animation-timing-function: linear;
    }

    /* Ruim een halve seconde stilstaan: dit is het moment zelf. */
    70% {
        opacity: 1;
        transform: translateY(-8px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-24px) scale(1);
    }
}

/* En het saldo zelf knippert één tel mee, anders komt het vliegertje ergens
   vandaan waar niets verandert. */
.stats .row.coins .val.op {
    animation: coin-tel 0.42s ease-out;
}

@keyframes coin-tel {
    0% {
        transform: scale(1.22);
        text-shadow: 0 0 26px rgba(255, 209, 102, 0.95);
    }

    100% {
        transform: scale(1);
    }
}

/* ── De levensbalk ──────────────────────────────────────────────────────── */

/* Dit is de balk waar je leven aan hangt en hij was 15px hoog met 10px tekst,
   even hoog als de cooldownknopjes eronder. */
.bar.hp {
    height: 22px;
    border-radius: 3px;
}

.bar.hp i {
    border-radius: 2px;
}

.bar.hp span {
    font-size: 13px;
    letter-spacing: 0.06em;
    /* Boven de vulling. Dit is geen detail: zodra de vulling hierboven een
       eigen laag kreeg verdween "140 / 140" eronder, want de tekst lag tot dan
       toe alleen maar bovenop omdat hij lager in de DOM staat. */
    z-index: 2;
}

/* Het schaduwspoor: het ligt eronder, het loopt de balk achterna, en het is
   het enige dat de GROOTTE van een klap laat zien. `transition-delay` is wat
   het doet werken — hij blijft staan waar de balk was en zakt daarna pas. */
/* De vulling moet BOVEN het spoor liggen, en daar is een regel voor nodig:
   het spoor is absoluut gepositioneerd en zou anders over de vulling heen
   getekend worden. Dan zie je een bleke balk in plaats van een bleke rest. */
.bar.hp i:not(.ghost) {
    position: relative;
    z-index: 1;
}

.bar.hp .ghost {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    transition: width 0.45s ease-out 0.22s;
}

/* Omhoog (repareren) hoort er niet achteraan te lopen: daar is de balk zelf
   het nieuws, en een spoor dat nog bijtrekt zou een reparatie laten lijken op
   schade die nog komt. De klasse wordt door main.js gezet. */
.bar.hp .ghost.bij {
    transition: width 0.12s linear;
}

/* ── De twee acties ─────────────────────────────────────────────────────── */

/* R en E waren 9px letters op 55% dekking: onleesbaar, en juist de twee toetsen
   die een nieuwe speler moet vinden. */
.ability {
    padding: 9px 12px;
    opacity: 0.68;
}

.ability b {
    font-size: 15px;
    letter-spacing: 0.04em;
}

.ability span {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    margin-top: 2px;
}

/* En het moment dat hij klaar is, is een moment. Zonder dit verschilt "bijna"
   van "nu" alleen in een balkje dat je niet aankijkt. */
.ability.ready {
    animation: ability-klaar 0.5s var(--ease-out);
}

@keyframes ability-klaar {
    0% {
        box-shadow: 0 0 0 0 rgba(49, 216, 255, 0.55), 0 0 16px rgba(49, 216, 255, 0.35);
    }

    60% {
        box-shadow: 0 0 0 7px rgba(49, 216, 255, 0), 0 0 26px rgba(49, 216, 255, 0.7);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(49, 216, 255, 0), 0 0 16px rgba(49, 216, 255, 0.35);
    }
}

/* ── Het opdrachtspoor ──────────────────────────────────────────────────── */

#hud-opdracht {
    padding: 10px 12px 11px;
    text-align: left;
    animation: opdracht-in 0.4s var(--ease-out);
}

.op-kop {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
}

.op-titel {
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: var(--cyan);
    opacity: 0.85;
}

/* De teller van de dag staat in de kop en niet ergens onderaan: "1/3" is het
   antwoord op de vraag of het de moeite is om door te spelen. */
.op-teller {
    font-family: var(--mono);
    font-size: 12px;
    opacity: 0.7;
}

.op-loon {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 13px;
    color: #ffd166;
}

.op-tekst {
    font-size: 14px;
    line-height: 1.25;
    margin-bottom: 7px;
}

/* De baan is hier een HOUDER voor twee dingen: het balkje bovenin en het cijfer
   eronder. Vandaar dat de rand en de achtergrond van `.bar` weggehaald worden
   en op een pseudo-element komen — op 8px hoogte past geen tekst, en een baan
   die hoog genoeg is voor tekst weegt te zwaar naast je levensbalk. */
.bar.op-baan {
    height: auto;
    overflow: visible;
    background: none;
    border: none;
    border-radius: 0;
}

.bar.op-baan::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-sizing: border-box;
}

.bar.op-baan i {
    position: relative;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ffd166, #ff9f1c);
    transition: width 0.5s var(--ease-out);
}

.bar.op-baan span {
    position: static;
    display: block;
    text-align: right;
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.8;
}

/* Net binnen: één tel goud, zodat je ziet dat er iets veranderd is aan een
   paneel waar je verder overheen kijkt. */
#hud-opdracht.vers {
    animation: opdracht-vers 0.9s ease-out;
}

@keyframes opdracht-vers {
    0% {
        box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.9), 0 0 26px rgba(255, 209, 102, 0.45);
    }

    100% {
        box-shadow: none;
    }
}

@keyframes opdracht-in {
    0% {
        opacity: 0;
        transform: translateX(-12px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/* Alle drie gehaald: het paneel blijft staan, maar zegt iets anders. Weghalen
   zou de beloning onzichtbaar maken op precies het moment dat hij verdiend is. */
#hud-opdracht.klaar .op-titel {
    color: #ffd166;
}

#hud-opdracht.klaar .bar.op-baan {
    display: none;
}

#hud-opdracht.klaar .op-tekst {
    opacity: 0.85;
}

/* De dagchest onderaan het paneel (Nathan 2026-09-29): een bolletje per
   opdracht die af is, dan de chest. Staat hij klaar, dan gloeit de regel en
   wiebelt de chest; na het openen dof. */
.op-kist {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 209, 102, 0.16);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: rgba(255, 209, 102, 0.75);
}

.op-kist.hidden { display: none; }

.op-pips { display: flex; gap: 4px; }

.op-pips i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(255, 209, 102, 0.55);
    transition: background 0.3s, box-shadow 0.3s;
}

.op-pips i.aan {
    background: #ffd166;
    box-shadow: 0 0 6px rgba(255, 209, 102, 0.8);
}

.op-kist-ikoon {
    width: 18px;
    height: 15px;
    flex: none;
    fill: rgba(255, 209, 102, 0.18);
    stroke: #ffd166;
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.op-kist.klaar {
    color: #fff3d0;
    text-shadow: 0 0 10px rgba(255, 209, 102, 0.7);
    animation: op-kist-gloed 1.6s ease-in-out infinite;
}

.op-kist.klaar .op-kist-ikoon {
    fill: rgba(255, 209, 102, 0.55);
    filter: drop-shadow(0 0 5px rgba(255, 209, 102, 0.9));
    animation: kist-klop 1.6s ease-in-out infinite;
}

.op-kist.gehaald { opacity: 0.55; }

@keyframes op-kist-gloed {
    0%, 100% { border-top-color: rgba(255, 209, 102, 0.2); }
    50% { border-top-color: rgba(255, 209, 102, 0.8); }
}

/* ── Rust ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .stats .row.coins .val.op,
    .ability.ready,
    #hud-opdracht,
    #hud-opdracht.vers,
    .op-kist.klaar,
    .op-kist.klaar .op-kist-ikoon {
        animation: none;
    }

    /* Het vliegertje zou anders nooit zichtbaar worden: zonder animatie blijft
       het op opacity 0 staan. Hier staat het gewoon een tel stil in beeld. */
    .coin-pop.op {
        animation: none;
        opacity: 1;
        transform: translateY(-10px);
    }

    .bar.hp .ghost,
    .bar.op-baan i {
        transition: none;
    }
}

/* ============================================================================
   De opdrachtmelding, 2026-09-16 — een moment in plaats van een regel.

   Dit was een pil van 12px die tussen de andere toasts door schoof: dezelfde
   vorm als "GRAFISCH: HOOG" en "je bent uit het team gezet". Terwijl dit het
   enige moment in het spel is waarop je iets AF hebt — de rest is voortgang,
   en voortgang heeft geen einde.

   Hij staat in `#announce` en niet los daarvan, en dat is met opzet: zo kan hij
   nooit over een zonetitel heen vallen. Die kolom stapelt.
   ========================================================================== */

.opdracht-af {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: min(420px, 82vw);
    padding: 18px 34px 16px;
    text-align: center;
    white-space: normal;
    background: linear-gradient(180deg, rgba(8, 18, 32, 0.94), rgba(4, 10, 22, 0.94));
    border: 1px solid rgba(61, 255, 160, 0.42);
    /* Dezelfde afgeschuinde hoeken als de HUD-panelen: dit hoort bij het schip,
       niet bij het besturingssysteem. */
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
    animation: oa-in 0.42s var(--ease-out);
}

.opdracht-af.bonus {
    border-color: rgba(255, 209, 102, 0.6);
    min-width: min(460px, 86vw);
}

.opdracht-af.uit {
    opacity: 0;
    transform: translateY(-14px) scale(0.98);
    transition: opacity 0.45s, transform 0.45s;
}

@keyframes oa-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.94);
    }
}

/* ── Het zegel ──────────────────────────────────────────────────────────── */

/* Een stempel, en dat is precies het gebaar dat ontbrak: iets wat AF is krijgt
   een merk. De ring eromheen slaat naar buiten weg, zodat het klapt in plaats
   van te verschijnen. */
.oa-zegel {
    position: relative;
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--green);
    color: var(--green);
    font-size: 22px;
    line-height: 1;
    animation: oa-stempel 0.5s var(--ease-out);
}

.opdracht-af.bonus .oa-zegel {
    border-color: #ffd166;
    color: #ffd166;
    width: 54px;
    height: 54px;
    font-size: 26px;
}

.oa-zegel::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation: oa-schok 0.7s var(--ease-out) forwards;
}

@keyframes oa-stempel {
    0% {
        opacity: 0;
        transform: scale(2.2) rotate(-18deg);
    }

    55% {
        opacity: 1;
        transform: scale(0.92) rotate(2deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

@keyframes oa-schok {
    0% {
        opacity: 0.85;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(2.1);
    }
}

/* ── De regels ──────────────────────────────────────────────────────────── */

.oa-kop {
    font-family: var(--display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.34em;
    /* De `letter-spacing` staat ook in de animatie; zonder deze marge staat de
       tekst een halve letter uit het midden, want de spatiëring telt ook achter
       het laatste teken. */
    text-indent: 0.34em;
    color: var(--green);
    text-shadow: 0 0 22px rgba(61, 255, 160, 0.45);
    animation: oa-wijd 0.55s var(--ease-out);
}

.opdracht-af.bonus .oa-kop {
    font-size: 23px;
    color: #ffd166;
    text-shadow: 0 0 26px rgba(255, 209, 102, 0.5);
}

@keyframes oa-wijd {
    from {
        opacity: 0;
        letter-spacing: 0.9em;
        filter: blur(3px);
    }
}

.oa-tekst {
    margin-top: 4px;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: #cfe3f5;
}

.oa-loon {
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 30px;
    line-height: 1;
    color: #ffd166;
    text-shadow: 0 0 20px rgba(255, 209, 102, 0.5);
}

.oa-loon i {
    font-style: normal;
    font-size: 21px;
    opacity: 0.85;
}

/* ── De drie van vandaag ────────────────────────────────────────────────── */

/* Dit is waar de melding zijn werk doet. "+400" zegt wat je kreeg; de drie
   stippen zeggen dat er nog iets te halen valt, en dat is de enige reden om
   door te spelen die in dit venster past. */
.oa-pips {
    display: flex;
    gap: 9px;
    margin-top: 13px;
}

.oa-pips i {
    width: 40px;
    /* Zeven en geen vijf: op een scherm van 1080 hoog is vijf pixels een haartje,
       en dan is de belangrijkste regel van de kaart het minst zichtbare dat
       erop staat. */
    height: 7px;
    border-radius: 3px;
    /* De lege plek krijgt een rand: zonder die rand is het geen leeg vakje maar
       een vlek, en dan tel je niet mee hoeveel er nog te gaan zijn. */
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    transform-origin: center;
}

.oa-pips i.vol {
    background: linear-gradient(90deg, #ffd166, #ff9f1c);
    box-shadow: 0 0 12px rgba(255, 209, 102, 0.55);
}

.opdracht-af.bonus .oa-loon {
    font-size: 38px;
}

/* Alleen de stip die NU volloopt klapt op. De rest stond er al, en die opnieuw
   laten knipperen maakt van een mijlpaal een lichtshow. */
.oa-pips i.nu {
    animation: oa-pip 0.5s var(--ease-out) 0.28s backwards;
}

@keyframes oa-pip {
    0% {
        transform: scaleX(0.2);
        filter: brightness(2.2);
    }

    100% {
        transform: scaleX(1);
    }
}

.oa-rest {
    margin-top: 10px;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    color: #8fa9c2;
}

.opdracht-af.bonus .oa-rest {
    color: #cbb27a;
}

/* ── Rust ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .opdracht-af,
    .oa-zegel,
    .oa-kop,
    .oa-pips i.nu {
        animation: none;
    }

    /* De ring is puur beweging; zonder animatie is het een tweede rand om het
       zegel en dan lijkt het stuk. */
    .oa-zegel::after {
        display: none;
    }
}

/* ── Planet Wars: tokens, de bouwknop en de bouwmodus ───────────────────────
   Tokens zijn violet, zodat ze nooit voor Starcoins (amber) worden aangezien:
   het zijn twee munten met een ander doel (besluit 4). Het bouwpaneel volgt
   de panelen van de HUD; de bouwknop de aanmeerpil, maar in cyaan -- amber
   betekent in dit spel "de hangar". */

.stats .row.tokens {
    align-items: center;
    gap: 6px;
    margin-top: -4px;
}

.stats .token {
    color: #b98bff;
    font-size: 13px;
    text-shadow: 0 0 12px rgba(185, 139, 255, 0.7);
}

.stats .row.tokens .val {
    color: #d6c2ff;
    font-size: 15px;
}

/* De knoppen op je planeet: BUILD en (fase 8) BATTLE LOG, naast elkaar. */
#planeet-knoppen {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    /* Zonder dit krijgt een rij die op 50% begint maar de halve breedte, en
       braken de knopteksten in tweeën ("PLANET / LOOK"). Nu past hij zich aan
       en gaat hij pas op een smal scherm naar een tweede rij. */
    width: max-content;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

#planeet-knoppen > button { white-space: nowrap; }

#bouw-knop,
#log-knop {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border: 1px solid var(--cyan-soft);
    border-radius: 999px;
    background: rgba(2, 10, 20, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    cursor: pointer;
}

#bouw-knop b,
#log-knop b,
#kist-knop b,
#look-knop b {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(49, 216, 255, 0.14);
    border: 1px solid var(--cyan-soft);
    font-size: 11px;
    letter-spacing: 0;
}

#bouw-knop:hover,
#log-knop:hover {
    border-color: var(--cyan);
    background: rgba(4, 22, 36, 0.86);
}

#bouw-knop.hidden,
#log-knop.hidden {
    display: none;
}

/* Er is iets gebeurd dat je nog niet zag: een stip op de knop. */
#log-knop .log-nieuw {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 10px var(--red);
}

#log-knop .log-nieuw.hidden {
    display: none;
}

/* In de bouwmodus vlieg je niet: vizier, vlieghint, vaardigheden en het
   statpaneel (het bouwpaneel toont je saldo zelf) gaan weg, en de cursor is
   weer een pijl. */
body.bouwmodus #crosshair,
body.bouwmodus #lock-hint,
body.bouwmodus .hud-topleft,
body.bouwmodus .help-hint,
body.bouwmodus #dock-hint,
/* Het bord van de hangar hing midden boven je grid (op een liggende telefoon
   gezien, 2026-09-29): in de bouwmodus vlieg je nergens heen. */
body.bouwmodus .dock-sign {
    display: none !important;
}

body.bouwmodus #view {
    cursor: default;
}

/* De chat schuift in de bouwmodus naast het paneel: linksonder stond hij over
   de hintregel en de knoppen van de bouwmodus heen. */
body.bouwmodus #chat {
    left: calc(min(320px, 44vw) + 32px);
}

#bouw {
    position: absolute;
    top: 16px;
    left: 16px;
    width: min(320px, 44vw);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    pointer-events: auto;
    background: var(--panel);
    border: 1px solid var(--panel-line);
    border-radius: 10px;
    padding: 12px;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.55), inset 0 0 22px rgba(49, 216, 255, 0.06);
    font-size: 12px;
}

.bw-kop {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.bw-titel {
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.3em;
    color: var(--cyan);
}

.bw-nexus {
    flex: 1;
    min-width: 0;
    text-align: left;
    font: inherit;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: inherit;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 3px 6px;
    margin-left: -6px;
    opacity: 0.85;
    cursor: pointer;
}

.bw-nexus b {
    margin-left: 4px;
    color: var(--green);
    font-weight: normal;
    letter-spacing: 0.14em;
}

.bw-nexus:hover,
.bw-nexus.actief {
    opacity: 1;
    border-color: var(--cyan-soft);
    background: rgba(49, 216, 255, 0.06);
}

.bw-sluit {
    font: inherit;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--cyan);
    background: rgba(49, 216, 255, 0.08);
    border: 1px solid var(--cyan-soft);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
}

.bw-sluit b {
    margin-left: 4px;
    opacity: 0.7;
}

.bw-saldo {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 11px;
    opacity: 0.9;
}

.bw-saldo b {
    font-family: var(--mono);
    font-size: 14px;
}

.bw-saldo span:first-child i,
.bw-saldo span:first-child b {
    color: var(--amber);
    font-style: normal;
}

.bw-saldo span:last-child i,
.bw-saldo span:last-child b {
    color: #c9a8ff;
    font-style: normal;
}

.bw-slot {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 10px;
    color: var(--green);
    background: rgba(61, 255, 160, 0.07);
    border: 1px solid rgba(61, 255, 160, 0.3);
}

.bw-slot.bezig {
    color: var(--amber);
    background: rgba(255, 209, 102, 0.07);
    border-color: rgba(255, 209, 102, 0.35);
}

.bw-lijst {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bw-kaart {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    font: inherit;
    color: inherit;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--panel-line);
    border-left: 3px solid var(--cyan);
    background: rgba(49, 216, 255, 0.04);
    cursor: pointer;
}

.bw-kaart:hover {
    background: rgba(49, 216, 255, 0.1);
}

.bw-kaart.actief {
    border-color: var(--cyan);
    background: rgba(49, 216, 255, 0.16);
}

.bw-kaart.kan-niet {
    opacity: 0.55;
}

.bw-kaart.dicht {
    border-left-color: rgba(255, 255, 255, 0.25);
    opacity: 0.4;
}

.bw-k-kop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.bw-k-kop b {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: #fff;
}

.bw-k-kop i {
    font-style: normal;
    font-size: 10px;
    opacity: 0.55;
}

.bw-k-blurb {
    font-size: 11px;
    opacity: 0.62;
    line-height: 1.3;
}

.bw-k-voet {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 11px;
    margin-top: 2px;
}

.bw-prijs {
    color: var(--amber);
}

.bw-aantal {
    opacity: 0.7;
}

.bw-k-voet em {
    font-style: normal;
    letter-spacing: 0.16em;
    opacity: 0.8;
}

.bw-keuze {
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--cyan-soft);
    background: rgba(49, 216, 255, 0.06);
}

.bw-keuze-naam {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: #fff;
}

.bw-keuze-pips {
    display: flex;
    gap: 4px;
    margin: 6px 0;
}

.bw-keuze-pips i {
    width: 22px;
    height: 5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
}

.bw-keuze-pips i.on {
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
}

.bw-keuze-uitleg {
    font-size: 11px;
    opacity: 0.7;
    margin-bottom: 8px;
    line-height: 1.3;
}

.bw-keuze-knoppen {
    display: flex;
    gap: 6px;
}

.bw-keuze-knoppen button {
    flex: 1;
    font: inherit;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--cyan);
    background: rgba(49, 216, 255, 0.1);
    border: 1px solid var(--cyan-soft);
    border-radius: 6px;
    padding: 7px 6px;
    cursor: pointer;
}

.bw-keuze-knoppen button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bw-keuze-knoppen button.actief {
    background: rgba(49, 216, 255, 0.25);
    border-color: var(--cyan);
}

/* Herstellen (fase 3): als het er staat, is het wat je nu wilt doen. Een
   eigen regel bovenaan, in de kleur van geld, in plaats van een derde knop die
   zijn prijs over drie regels moet breken. */
.bw-keuze-knoppen {
    flex-wrap: wrap;
}

.bw-keuze-knoppen button[data-bouw="herstel"] {
    order: -1;
    flex-basis: 100%;
    color: var(--amber);
    background: rgba(255, 209, 102, 0.1);
    border-color: rgba(255, 209, 102, 0.5);
}

.bw-fout {
    min-height: 16px;
    margin-top: 8px;
    color: var(--red);
    font-size: 11.5px;
}

.bw-hint {
    font-size: 10.5px;
    opacity: 0.5;
    line-height: 1.35;
}

/* Timers boven structuren in aanbouw: klein, en ze hangen aan het model. */
#bouw-timers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bouw-timer {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 8px 5px;
    border-radius: 6px;
    background: rgba(10, 8, 2, 0.7);
    border: 1px solid rgba(255, 209, 102, 0.4);
    font-family: var(--mono);
    white-space: nowrap;
}

.bouw-timer b {
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--amber);
    font-weight: normal;
}

.bouw-timer span {
    font-size: 13px;
    color: #fff;
}

.bouw-timer i {
    display: block;
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.bouw-timer u {
    display: block;
    height: 100%;
    width: 0;
    background: var(--amber);
}

/* De bouwmodus op een telefoon (f2-09). Links een kolom van 320 px laat in
   portret niets van je grid over; hier wordt het een strook onderin met de
   kaarten naast elkaar, die je kunt inklappen tot de kop. De vingers bedienen
   de camera (bouwmodus.js), dus de stuurknoppen van het vliegen gaan weg. */
.bw-klap {
    display: none;
}

body.bouwmodus #touch-controls {
    display: none !important;
}

@media (max-width: 760px), (orientation: portrait) and (max-width: 1024px) {
    #bouw {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        max-height: 48vh;
        border-radius: 12px 12px 0 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }

    .bw-klap {
        display: block;
        font: inherit;
        font-size: 14px;
        line-height: 1;
        color: var(--cyan);
        background: rgba(49, 216, 255, 0.08);
        border: 1px solid var(--cyan-soft);
        border-radius: 6px;
        padding: 4px 9px;
        cursor: pointer;
    }

    .bw-lijst {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }

    .bw-kaart {
        flex: 0 0 158px;
        scroll-snap-align: start;
    }

    .bw-k-blurb {
        display: none;
    }

    .bw-saldo,
    .bw-slot {
        margin-bottom: 6px;
    }

    #bouw.ingeklapt .bw-lijst,
    #bouw.ingeklapt .bw-keuze,
    #bouw.ingeklapt .bw-hint,
    #bouw.ingeklapt .bw-saldo {
        display: none;
    }

    #bouw.ingeklapt .bw-slot {
        margin-bottom: 0;
    }

    /* De chat ligt linksonder, precies over de eerste kaart. In de bouwmodus
       tik je daar een gebouw aan; praten kan weer zodra je terug in je schip
       zit. */
    body.bouwmodus #chat {
        display: none;
    }

    /* De bouwknop staat daar waar het paneel komt; die mag wat hoger. */
    #planeet-knoppen {
        bottom: calc(14% + env(safe-area-inset-bottom));
    }
}

/* ── Planet Wars fase 3: aanvallen ─────────────────────────────────────────
   Rood is aanval, zoals in de rest van de HUD; AI-planeten krijgen een eigen
   merkje zodat je nooit denkt dat je een echte speler aanvalt als dat niet zo
   is (besluit 12: duidelijk gemarkeerd). */

/* Met Planet Wars is kiezen wie je aanvalt het werk van deze kolom: iets
   breder, zodat een pilotennaam niet na acht letters ophoudt. */

/* ── Troepen trainen (fase 4) ───────────────────────────────────────────── */

/* Een gebouw gekozen: de catalogus uit beeld (bouwmodus.js). */
#bouw.gekozen .bw-lijst {
    display: none;
}

.bw-train {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(49, 216, 255, 0.18);
    display: grid;
    gap: 7px;
}

.bw-train-kop {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: #fff;
}

.bw-train-plek {
    color: var(--amber);
    letter-spacing: 0.08em;
}

.bw-train-balk {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.bw-train-balk u {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--amber));
    transition: width 0.3s;
}

.bw-train-soorten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.bw-troep {
    display: grid;
    gap: 3px;
    padding: 8px 6px;
    border-radius: 7px;
    border: 1px solid rgba(61, 255, 160, 0.4);
    background: rgba(61, 255, 160, 0.07);
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.bw-troep b {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: #fff;
}

.bw-troep-info {
    font-family: var(--mono);
    font-size: 9px;
    opacity: 0.75;
}

.bw-troep:hover:not(.dicht) {
    background: rgba(61, 255, 160, 0.16);
}

.bw-troep.kan-niet {
    opacity: 0.55;
}

.bw-troep.dicht {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.15);
    background: transparent;
}

.bw-train-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 10.5px;
}

.bw-train-rij.leeg {
    opacity: 0.55;
}

.bw-rij-item {
    font-family: var(--mono);
    padding: 3px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
}

.bw-rij-item i {
    font-style: normal;
    color: var(--amber);
    margin-left: 4px;
}

/* De eerste in de rij wordt nu getraind: een balkje dat vol loopt. */
.bw-rij-item.eerst {
    background: linear-gradient(90deg, rgba(61, 255, 160, 0.3) calc(var(--deel) * 100%), rgba(255, 255, 255, 0.06) 0);
}

.bw-train-thuis {
    font-size: 10.5px;
    opacity: 0.75;
}

#troepen-rij .token {
    color: var(--green);
}

/* ── De ploeg in het kaartpaneel (fase 4) ───────────────────────────────── */

/* Met een planeet gekozen moet ATTACK in beeld blijven: de lijst krimpt, de
   info gaat in twee kolommen, en als het dan nog niet past scrollt de kolom. */

/* ── De erelijst op de kaart (besluit 59) ──────────────────────────────────
   Goud, en linksonder op de melkweg in plaats van in het zijpaneel: daar
   staat de lijst met doelwitten al, en een erelijst die je moet zoeken is
   er geen. Tot F15 stond dit op het monument in NEXUS. */

.zm-erelijst {
    width: 280px;
    padding: 12px 14px 10px;
    border: 1px solid rgba(255, 209, 102, 0.55);
    border-radius: 10px;
    background: rgba(4, 10, 22, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 28px rgba(255, 209, 102, 0.16), inset 0 0 22px rgba(255, 209, 102, 0.06);
    /* Bediening, geen kaart: galaxy.js laat pointers die hier beginnen met
       rust (zie _wireInput). */
    cursor: default;
    touch-action: auto;
}

.ze-kop {
    margin-bottom: 8px;
    color: #ffd166;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-shadow: 0 0 12px rgba(255, 209, 102, 0.5);
}

.ze-kop small {
    color: #cfe8ff;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.ze-kroon {
    font-size: 15px;
}

#ze-top {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#ze-top li.empty {
    padding: 4px 0;
    font-size: 11px;
    opacity: 0.7;
}

#ze-top button,
#ze-top .ze-rij {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 12px;
    text-align: left;
}

#ze-top button {
    cursor: pointer;
}

#ze-top button:hover,
#ze-top button:focus-visible {
    border-color: rgba(255, 209, 102, 0.5);
    background: rgba(255, 209, 102, 0.08);
}

#ze-top .pl {
    border-radius: 4px;
    font-family: var(--mono);
    font-weight: 700;
    text-align: center;
    opacity: 0.75;
}

#ze-top .nm {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#ze-top .sc {
    color: #ffd166;
    font-family: var(--mono);
}

#ze-top .goud .pl {
    background: #ffd166;
    box-shadow: 0 0 10px rgba(255, 209, 102, 0.7);
    color: #1a1300;
    opacity: 1;
}

#ze-top .goud .nm {
    color: #ffd166;
    font-weight: 700;
}

#ze-top .zilver .pl {
    background: #d6e2ee;
    color: #0c1118;
    opacity: 1;
}

#ze-top .brons .pl {
    background: #e0a46b;
    color: #1a0d02;
    opacity: 1;
}

#ze-top .mine .ze-rij,
#ze-top .mine button {
    border-color: var(--green);
}

#ze-top .ik {
    margin-top: 4px;
}

.ze-vorige {
    margin: 8px 0 0;
    color: #ffd166;
    font-size: 11px;
    opacity: 0.85;
}

.ze-tip {
    margin: 6px 0 0;
    font-size: 10px;
    opacity: 0.55;
}

/* Smal scherm: onder het zijpaneel, in de kolom. */

/* ── Verkennen (f3-12) ──────────────────────────────────────────────────── */

/* Tijdens het verkennen ben je geen schip: geen hp, geen vaardigheden, geen
   missie, geen vizier. Radar, planeetinfo en de aanvalsbalk blijven. */
#hud.verkennen .hud-topleft,
#hud.verkennen #crosshair,
#hud.verkennen #killfeed,
#hud.verkennen .help-hint,
#hud.verkennen #dock-hint,
#hud.verkennen #planeet-knoppen,
#hud.meekijken .hud-topleft,
#hud.meekijken #crosshair,
#hud.meekijken .help-hint,
#hud.meekijken #dock-hint,
#hud.meekijken #planeet-knoppen {
    display: none !important;
}

/* Na je dood meekijken (f3-06): onder de aanvalsbalk, rood omrand. */
#meekijk-balk {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 14px;
    background: rgba(24, 4, 10, 0.82);
    border: 1px solid rgba(255, 59, 107, 0.55);
    pointer-events: auto;
    text-align: center;
    max-width: calc(100vw - 32px);
}

.mb-kop {
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.12em;
    color: #ffd7e0;
}

.mb-dood {
    color: var(--red);
    letter-spacing: 0.24em;
    margin-right: 6px;
}

.mb-kop b {
    color: #fff;
}

.mb-info {
    font-size: 11.5px;
    opacity: 0.7;
}

.mb-weg {
    font: inherit;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #9fe0ff;
    background: rgba(127, 214, 255, 0.08);
    border: 1px solid rgba(127, 214, 255, 0.45);
}

#verken-balk {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 12px 20px 10px;
    border-radius: 14px;
    background: rgba(2, 14, 26, 0.82);
    border: 1px solid rgba(127, 214, 255, 0.55);
    box-shadow: 0 0 30px rgba(127, 214, 255, 0.18);
    pointer-events: auto;
    text-align: center;
    max-width: calc(100vw - 32px);
}

/* Loopt er ook een aanval, dan staat die balk bovenaan en deze eronder. */
#aanval-hud:not(.hidden) ~ #verken-balk {
    top: 64px;
}

.vb-kop {
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.14em;
    color: #fff;
}

.vb-oog {
    color: #7fd6ff;
    letter-spacing: 0.26em;
    margin-right: 6px;
}

.vb-oog::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #7fd6ff;
    box-shadow: 0 0 10px #7fd6ff;
    animation: edge-pulse 1.4s ease-in-out infinite;
    vertical-align: 1px;
}

.vb-info {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    color: var(--amber);
}

.vb-knoppen {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.vb-knoppen button {
    font: inherit;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.vb-aanval {
    color: #fff;
    background: rgba(255, 59, 107, 0.24);
    border: 1px solid rgba(255, 59, 107, 0.7);
}

.vb-aanval:hover:not(:disabled) {
    background: rgba(255, 59, 107, 0.4);
    box-shadow: 0 0 18px rgba(255, 59, 107, 0.4);
}

.vb-aanval:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vb-weg {
    color: #9fe0ff;
    background: rgba(127, 214, 255, 0.08);
    border: 1px solid rgba(127, 214, 255, 0.45);
}

.vb-weg:hover {
    background: rgba(127, 214, 255, 0.18);
}

.vb-hint {
    font-size: 11px;
    opacity: 0.6;
}

@media (max-width: 760px) {
    #verken-balk {
        top: 64px;
        padding: 10px 12px 8px;
    }

    .vb-kop {
        font-size: 12.5px;
    }

    .vb-hint {
        display: none;
    }
}

#aanval-hud {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(24, 4, 10, 0.78);
    border: 1px solid rgba(255, 59, 107, 0.55);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    white-space: nowrap;
    box-shadow: 0 0 24px rgba(255, 59, 107, 0.2);
}

#aanval-hud.verdediger {
    border-color: rgba(49, 216, 255, 0.55);
    background: rgba(2, 12, 24, 0.8);
}

.ah-kop {
    color: var(--red);
    letter-spacing: 0.26em;
}

#aanval-hud.verdediger .ah-kop {
    color: var(--cyan);
}

.ah-tijd {
    font-size: 16px;
    color: #fff;
    transition: color 0.3s, font-size 0.3s;
}

/* De laatste minuut: de klok amber, dan rood en kloppend, en de balk gloeit
   mee (main.js::_tijdsdruk). */
#aanval-hud.druk-minuut .ah-tijd { color: var(--amber); font-size: 18px; }

#aanval-hud.druk-kort .ah-tijd {
    color: var(--red);
    font-size: 20px;
    text-shadow: 0 0 12px rgba(255, 59, 107, 0.8);
    animation: ah-klop 1s ease-in-out infinite;
}

#aanval-hud.druk-kort {
    border-color: var(--red);
    animation: ah-gloed 1s ease-in-out infinite;
}

#aanval-hud.verdediger.druk-kort .ah-tijd { color: var(--cyan); text-shadow: 0 0 12px rgba(49, 216, 255, 0.8); }

#aanval-hud.verdediger.druk-kort { border-color: var(--cyan); }

@keyframes ah-klop {
    0%, 100% { transform: scale(1); }
    12% { transform: scale(1.18); }
}

@keyframes ah-gloed {
    0%, 100% { box-shadow: 0 0 24px rgba(255, 59, 107, 0.25); }
    12% { box-shadow: 0 0 42px rgba(255, 59, 107, 0.7); }
}

/* De randen van het scherm kloppen rood mee in de laatste dertig seconden. */
body.aanval-krap::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    box-shadow: inset 0 0 120px rgba(255, 30, 70, 0.45);
    animation: krap-klop 1s ease-in-out infinite;
}

@keyframes krap-klop {
    0%, 100% { opacity: 0.35; }
    12% { opacity: 1; }
}

/* Het aftellen vanaf 10: groot, midden in beeld, elke seconde een inslag. */
#aanval-aftel {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    z-index: 31;
    color: var(--red);
    font-family: var(--mono);
    text-align: center;
}

#aanval-aftel.verdediger { color: var(--cyan); }

.aa-getal {
    /* Block, niet inline: op een inline element doet `transform` niets, en
       dan sloeg het getal niet in maar verscheen het alleen. */
    display: block;
    font-size: 150px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 18px currentColor, 0 0 50px var(--red), 0 0 110px rgba(255, 59, 107, 0.6);
}

#aanval-aftel.verdediger .aa-getal {
    text-shadow: 0 0 18px currentColor, 0 0 50px var(--cyan), 0 0 110px rgba(49, 216, 255, 0.6);
}

.aa-onder {
    font-size: 13px;
    letter-spacing: 0.4em;
    text-shadow: 0 0 12px currentColor;
}

#aanval-aftel.tik .aa-getal { animation: aa-inslag 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) both; }

#aanval-aftel.laatste .aa-getal { font-size: 190px; }

@keyframes aa-inslag {
    0% { transform: scale(1.9); opacity: 0; filter: blur(6px); }
    18% { transform: scale(0.94); opacity: 1; filter: blur(0); }
    30% { transform: scale(1.04); }
    100% { transform: scale(1); opacity: 0.82; }
}

@media (max-width: 760px) {
    .aa-getal { font-size: 96px; }
    #aanval-aftel.laatste .aa-getal { font-size: 120px; }
}

@media (prefers-reduced-motion: reduce) {
    #aanval-aftel.tik .aa-getal,
    #aanval-hud.druk-kort,
    #aanval-hud.druk-kort .ah-tijd,
    body.aanval-krap::after { animation: none; }
}

.ah-schild {
    color: #7fd6ff;
    min-width: 5.5em;
}

/* De Nexus in de aanvalsbalk: blauw zolang het schild staat, amber en rood
   als hij open ligt, en hij licht op bij elke treffer. */
.ah-nexus {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ah-nexus b {
    font-weight: normal;
    opacity: 0.75;
}

.ah-nexus-balk {
    position: relative;
    width: 120px;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(127, 214, 255, 0.45);
    overflow: hidden;
}

.ah-nexus-balk u {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: repeating-linear-gradient(135deg, #7fd6ff 0 6px, #4aa8d8 6px 12px);
    transition: width 0.15s linear;
}

.ah-nexus.open .ah-nexus-balk {
    border-color: rgba(255, 138, 61, 0.7);
}

.ah-nexus.open .ah-nexus-balk u {
    background: linear-gradient(90deg, var(--red), #ff8a3d 60%, var(--amber));
}

.ah-nexus.raak .ah-nexus-balk {
    animation: ah-raak 0.22s ease-out;
}

@keyframes ah-raak {
    from { box-shadow: 0 0 14px rgba(255, 180, 92, 0.95); filter: brightness(1.8); }
    to { box-shadow: none; filter: none; }
}

.ah-schild.open {
    color: var(--amber);
}

.ah-deel {
    opacity: 0.8;
}

/* ── Live verdedigen (fase 5) ───────────────────────────────────────────────
   Boven alles, ook boven de kaart en de bouwmodus: dit is het moment waarop
   je planeet op het spel staat. Onder de aanvalsbalk, want als je zelf ergens
   aanvalt staat die er ook. */
#verdedig-balk {
    position: fixed;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 62;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 18px;
    border-radius: 999px;
    background: rgba(40, 4, 14, 0.9);
    border: 1px solid rgba(255, 59, 107, 0.8);
    box-shadow: 0 0 30px rgba(255, 59, 107, 0.35);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    white-space: nowrap;
    pointer-events: auto;
    animation: vdb-klop 1.6s ease-in-out infinite;
}

.vdb-kop {
    color: #ff8aa6;
    letter-spacing: 0.2em;
}

.vdb-wie {
    color: #fff;
    opacity: 0.75;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fase 7: de leden van je clan en wat ieder bijdroeg (§42). */
.clan-leden {
    list-style: none;
    margin: 6px 0 10px;
    padding: 0;
    display: grid;
    gap: 4px;
}

.clan-leden li {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid rgba(0, 229, 255, 0.14);
    border-radius: 6px;
    background: rgba(0, 229, 255, 0.04);
    font-size: 12px;
}

.clan-leden li.ik {
    border-color: rgba(61, 255, 160, 0.35);
}

.clan-leden .stip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

.clan-leden li.online .stip {
    background: #3dffa0;
    box-shadow: 0 0 6px #3dffa0;
}

.clan-leden .leider {
    margin-left: 6px;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--amber);
}

.clan-leden .bijdrage {
    color: #ffd166;
    opacity: 0.85;
    white-space: nowrap;
}

.clan-leden button.klein {
    padding: 2px 8px;
    font-size: 10px;
}

/* Fase 6: tot je er bent vliegt een bot je schip (besluit 32). */
.vdb-ai {
    color: #9fe8ff;
    font-size: 0.85em;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

#verdedig-knop {
    display: flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    letter-spacing: 0.24em;
    color: #fff;
    background: var(--red);
    border: 0;
    border-radius: 999px;
    padding: 5px 16px 5px 6px;
    cursor: pointer;
}

/* De toets in de knop (V, J), zoals op de knoppen onder je planeet. */
#verdedig-knop b,
#clan-aanval-knop b {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    font-size: 11px;
    letter-spacing: 0;
}

#verdedig-knop:disabled {
    opacity: 0.5;
    cursor: default;
}

@keyframes vdb-klop {
    50% { box-shadow: 0 0 44px rgba(255, 59, 107, 0.6); }
}

/* Fase 7 (§35): je clan valt aan. Dezelfde vorm als DEFEND, maar groen: dit
   is een kans, geen alarm. */
#clan-aanval-balk {
    position: fixed;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 61;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 18px;
    border-radius: 999px;
    background: rgba(4, 30, 20, 0.92);
    border: 1px solid rgba(61, 255, 160, 0.75);
    box-shadow: 0 0 28px rgba(61, 255, 160, 0.3);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    white-space: nowrap;
    pointer-events: auto;
}

.cab-kop {
    color: #3dffa0;
    letter-spacing: 0.2em;
}

.cab-doel {
    color: #fff;
    opacity: 0.8;
    max-width: 30ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

#clan-aanval-knop {
    display: flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    letter-spacing: 0.24em;
    color: #02130c;
    background: #3dffa0;
    border: 0;
    border-radius: 999px;
    padding: 5px 16px 5px 6px;
    cursor: pointer;
}

#clan-aanval-knop b { border-color: rgba(2, 19, 12, 0.5); background: rgba(2, 19, 12, 0.14); }

.cab-weg {
    font: inherit;
    color: #fff;
    opacity: 0.6;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px 6px;
}

@media (max-width: 640px) {
    #clan-aanval-balk { top: auto; bottom: 150px; }
    .cab-doel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    #verdedig-balk { animation: none; }
}

@media (max-width: 640px) {
    #verdedig-balk { top: auto; bottom: 150px; }
    .vdb-wie, .vdb-ai { display: none; }
}

#verdediger-neer {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 18px 28px;
    border-radius: 14px;
    background: rgba(24, 4, 10, 0.78);
    border: 1px solid rgba(255, 59, 107, 0.6);
    font-family: var(--mono);
    letter-spacing: 0.16em;
    pointer-events: none;
    z-index: 55;
}

#verdediger-neer b {
    font-size: 22px;
    color: var(--red);
    letter-spacing: 0.3em;
}

.vn-tijd {
    font-size: 15px;
    color: #fff;
}

.vn-levens {
    font-size: 11px;
    opacity: 0.75;
}

/* Fase 4: de ploeg. Groen zoals in het kaartpaneel; kloppend zolang je hem nog kunt neerzetten. */
.ah-troepen {
    font: inherit;
    letter-spacing: 0.12em;
    color: var(--green);
    background: none;
    border: 0;
    padding: 0;
    cursor: default;
}

.ah-troepen.klaar {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(61, 255, 160, 0.7);
    background: rgba(61, 255, 160, 0.14);
    color: #d9ffe9;
    cursor: pointer;
    animation: ah-klop 1.2s ease-in-out infinite;
}

@keyframes ah-klop {
    50% { box-shadow: 0 0 18px rgba(61, 255, 160, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
    .ah-troepen.klaar { animation: none; }
}

.hp-balk {
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 5px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
    overflow: hidden;
    pointer-events: none;
}

.hp-balk u {
    display: block;
    height: 100%;
    background: var(--green);
}

.hp-balk.laag u {
    background: var(--red);
}

.bw-herstel-alles {
    width: 100%;
    margin-bottom: 10px;
    font: inherit;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--amber);
    background: rgba(255, 209, 102, 0.08);
    border: 1px solid rgba(255, 209, 102, 0.45);
    border-radius: 6px;
    padding: 7px;
    cursor: pointer;
}

#aanval-kaart {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    background: rgba(1, 3, 10, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: 16px;
}

.ak-box {
    width: min(460px, 100%);
    padding: 22px 24px;
    border-radius: 12px;
    background: var(--panel);
    border: 1px solid var(--panel-line);
    text-align: center;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

#aanval-kaart.goed .ak-box {
    border-color: rgba(255, 209, 102, 0.6);
    box-shadow: 0 0 40px rgba(255, 209, 102, 0.18);
}

#aanval-kaart.slecht .ak-box {
    border-color: rgba(255, 59, 107, 0.55);
}

.ak-kop {
    margin: 0 0 6px;
    font-family: var(--mono);
    font-size: 26px;
    letter-spacing: 0.24em;
    line-height: 1.2;
    text-wrap: balance;
    color: #fff;
}

#aanval-kaart.goed .ak-kop {
    color: var(--amber);
    text-shadow: 0 0 18px rgba(255, 209, 102, 0.5);
}

#aanval-kaart.slecht .ak-kop {
    color: var(--red);
}

.ak-sub {
    margin: 0 0 14px;
    opacity: 0.8;
    font-size: 13px;
}

.ak-regels {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ak-regels li {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.ak-regels b {
    font-family: var(--mono);
    font-size: 18px;
    color: #fff;
}

.ak-regels span {
    font-size: 12px;
    opacity: 0.7;
}

.ak-hint {
    min-height: 14px;
    margin: 0 0 14px;
    font-size: 11.5px;
    opacity: 0.6;
}

/* Het moment waar een aanval om draait: de kaart springt in beeld, de regels
   komen één voor één, en een overwinning gloeit na. */
#aanval-kaart:not(.hidden) .ak-box {
    animation: ak-in 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

#aanval-kaart:not(.hidden) .ak-regels li {
    animation: ak-regel 0.36s ease-out both;
}

#aanval-kaart:not(.hidden) .ak-regels li:nth-child(1) { animation-delay: 0.18s; }
#aanval-kaart:not(.hidden) .ak-regels li:nth-child(2) { animation-delay: 0.32s; }
#aanval-kaart:not(.hidden) .ak-regels li:nth-child(3) { animation-delay: 0.46s; }
#aanval-kaart:not(.hidden) .ak-regels li:nth-child(n+4) { animation-delay: 0.6s; }

#aanval-kaart.goed:not(.hidden) .ak-kop {
    animation: ak-gloed 1.4s ease-in-out 0.4s infinite alternate;
}

#aanval-kaart.goed .ak-regels li:first-child b {
    font-size: 26px;
    color: var(--amber);
}

@keyframes ak-in {
    from { opacity: 0; transform: scale(0.86) translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes ak-regel {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes ak-gloed {
    from { text-shadow: 0 0 10px rgba(255, 209, 102, 0.3); }
    to { text-shadow: 0 0 28px rgba(255, 209, 102, 0.85), 0 0 60px rgba(255, 209, 102, 0.25); }
}

@media (prefers-reduced-motion: reduce) {
    #aanval-kaart:not(.hidden) .ak-box,
    #aanval-kaart:not(.hidden) .ak-regels li,
    #aanval-kaart.goed:not(.hidden) .ak-kop {
        animation: none;
    }
}

.ak-verder {
    min-width: 180px;
    padding: 11px 22px;
    border-radius: 9px;
    border: 1px solid var(--cyan);
    background: rgba(49, 216, 255, 0.14);
    color: var(--cyan);
    font: inherit;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.22em;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.ak-verder:hover {
    background: rgba(49, 216, 255, 0.26);
    box-shadow: 0 0 26px rgba(49, 216, 255, 0.3);
}

#aanval-kaart.goed .ak-verder {
    border-color: var(--amber);
    color: var(--amber);
    background: rgba(255, 209, 102, 0.12);
}

#aanval-kaart.goed .ak-verder:hover {
    background: rgba(255, 209, 102, 0.24);
    box-shadow: 0 0 26px rgba(255, 209, 102, 0.3);
}

@media (max-width: 760px) {
    #aanval-hud {
        top: 64px;
        gap: 8px;
        padding: 6px 10px;
        font-size: 10px;
    }

    .ah-nexus-balk {
        width: 64px;
    }

    .ah-nexus b,
    .ah-deel {
        display: none;
    }

    .ah-tijd {
        font-size: 13px;
    }

    .ak-kop {
        font-size: 20px;
    }
}

/* ── Planet Wars fase 8: de knoppen op de aanvalskaart ─────────────────────── */

.ak-knoppen {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ak-knoppen button.hidden {
    display: none;
}

/* ── Planet Wars fase 8: de log (f8-02) ──────────────────────────────────────
   Dezelfde laag als de aanvalskaart, maar breder: een lijst om door te lezen.
   Links een balk in de kleur van de uitslag, zodat je de lijst scant zonder
   te lezen: groen gehouden, rood verloren. */

#gevecht-log {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    background: rgba(1, 3, 10, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: 16px;
}

#gevecht-log.hidden {
    display: none;
}

.gl-box {
    width: min(620px, 100%);
    max-height: min(640px, calc(100vh - 32px));
    display: flex;
    flex-direction: column;
    padding: 18px 20px 14px;
    border-radius: 12px;
    background: var(--panel);
    border: 1px solid var(--panel-line);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    animation: ak-in 0.32s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.gl-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.gl-head h2 {
    margin: 0;
    font-family: var(--mono);
    font-size: 20px;
    letter-spacing: 0.24em;
    color: #fff;
}

.gl-tabs {
    display: flex;
    gap: 4px;
    margin-right: auto;
}

.gl-tabs button {
    padding: 5px 12px;
    border: 1px solid var(--panel-line);
    border-radius: 999px;
    background: transparent;
    color: #9fc3d8;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    cursor: pointer;
}

.gl-tabs button.actief {
    border-color: var(--cyan);
    background: rgba(49, 216, 255, 0.14);
    color: var(--cyan);
}

.gl-dicht {
    width: 32px;
    height: 32px;
    border: 1px solid var(--panel-line);
    border-radius: 50%;
    background: transparent;
    color: #dff3ff;
    cursor: pointer;
}

.gl-uitleg {
    margin: 10px 0;
    font-size: 12px;
    opacity: 0.7;
}

.gl-lijst {
    list-style: none;
    margin: 0;
    padding: 0 2px 0 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gl-lijst li.leeg {
    padding: 24px 8px;
    text-align: center;
    font-size: 13px;
    opacity: 0.7;
}

.gl-regel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid var(--red);
    background: rgba(255, 255, 255, 0.035);
}

.gl-regel.goed {
    border-left-color: var(--green);
}

.gl-regel.grijs {
    border-left-color: #6b7690;
}

.gl-regel.nieuw {
    background: rgba(255, 59, 107, 0.08);
}

.gl-wie {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.gl-uitslag {
    flex: none;
    padding: 1px 7px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    background: rgba(255, 59, 107, 0.16);
    color: #ff8aa6;
}

.gl-regel.goed .gl-uitslag {
    background: rgba(61, 255, 160, 0.14);
    color: var(--green);
}

.gl-regel.grijs .gl-uitslag {
    background: rgba(160, 170, 200, 0.14);
    color: #b3bdd4;
}

.gl-naam {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: #fff;
}

.gl-wanneer {
    flex: none;
    font-size: 11px;
    opacity: 0.55;
}

.gl-cijfers {
    grid-column: 1;
    font-size: 12px;
    opacity: 0.8;
}

.gl-acties {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    gap: 6px;
    align-items: center;
}

.gl-acties button {
    padding: 6px 11px;
    border: 1px solid var(--cyan-soft);
    border-radius: 999px;
    background: rgba(2, 10, 20, 0.6);
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    cursor: pointer;
}

.gl-acties button:hover {
    border-color: var(--cyan);
    background: rgba(4, 22, 36, 0.9);
}

.gl-acties button.wraak {
    border-color: rgba(255, 59, 107, 0.6);
    color: #ff8aa6;
}

.gl-acties .geen {
    font-size: 11px;
    opacity: 0.45;
}

@media (max-width: 560px) {
    .gl-regel {
        grid-template-columns: minmax(0, 1fr);
    }

    .gl-acties {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ── Planet Wars fase 8: een gevecht terugkijken (f8-03) ─────────────────────
   Het beeld is het canvas van het spel (een eigen scene), dus deze laag is in
   het midden doorzichtig. Boven de HUD van het spel, onder de DEFEND-balk: als
   je planeet intussen wordt aangevallen, zie je dat. */

#terugkijken {
    position: fixed;
    inset: 0;
    z-index: 58;
    font-family: var(--font);
    color: #dff3ff;
}

#terugkijken.hidden {
    display: none;
}

body.terugkijken #hud,
body.terugkijken #aanval-kaart,
body.terugkijken #gevecht-log {
    display: none !important;
}

.tk-podium {
    position: absolute;
    inset: 0;
    cursor: grab;
    touch-action: none;
}

.tk-podium:active {
    cursor: grabbing;
}

.tk-namen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.tk-kop {
    position: absolute;
    top: 12px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    pointer-events: none;
}

.tk-titel {
    min-width: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(2, 8, 18, 0.72);
    border: 1px solid var(--panel-line);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.tk-titel h2 {
    margin: 4px 0 2px;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    background: rgba(255, 59, 107, 0.18);
    color: #ff8aa6;
}

.tk-badge.goed {
    background: rgba(255, 209, 102, 0.16);
    color: var(--amber);
}

.tk-sub {
    margin: 0;
    font-size: 12px;
    opacity: 0.7;
}

.tk-dicht {
    margin-left: auto;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--panel-line);
    border-radius: 50%;
    background: rgba(2, 8, 18, 0.72);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    pointer-events: auto;
}

.tk-camera {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.tk-camkop {
    flex: none;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    opacity: 0.6;
    text-shadow: 0 1px 4px #000;
}

.tk-chips {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    pointer-events: auto;
}

.tk-chip,
.tk-gebouwkeuze {
    flex: none;
    padding: 6px 12px;
    border: 1px solid var(--panel-line);
    border-radius: 999px;
    background: rgba(2, 8, 18, 0.72);
    color: #dff3ff;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    cursor: pointer;
}

.tk-chip.mijn { color: #8ff3ff; }
.tk-chip.ander { color: #ff8aa6; }

.tk-chip.bot::before {
    content: 'AI';
    margin-right: 5px;
    padding: 0 3px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 9px;
}

.tk-chip.actief,
.tk-gebouwkeuze.actief {
    border-color: var(--cyan);
    background: rgba(49, 216, 255, 0.2);
}

.tk-gebouwkeuze option {
    background: #06101e;
    color: #dff3ff;
}

.tk-meldingen {
    position: absolute;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.tk-melding {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(2, 8, 18, 0.8);
    border: 1px solid var(--panel-line);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    white-space: nowrap;
    transition: opacity 0.4s, transform 0.4s;
    animation: ak-regel 0.3s ease-out both;
}

.tk-melding.goed { color: var(--green); border-color: rgba(61, 255, 160, 0.5); }
.tk-melding.slecht { color: #ff8aa6; border-color: rgba(255, 59, 107, 0.55); }
.tk-melding.weg { opacity: 0; transform: translateY(-6px); }

.tk-balk {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(2, 8, 18, 0.78);
    border: 1px solid var(--panel-line);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.tk-speel,
.tk-snel {
    flex: none;
    min-width: 40px;
    height: 36px;
    border: 1px solid var(--cyan-soft);
    border-radius: 8px;
    background: rgba(49, 216, 255, 0.1);
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 13px;
    cursor: pointer;
}

.tk-tijd {
    flex: none;
    font-family: var(--mono);
    font-size: 12px;
    opacity: 0.85;
    min-width: 86px;
    text-align: center;
}

.tk-spoor {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 28px;
}

.tk-spoor::before,
.tk-gedaan {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    height: 4px;
    border-radius: 2px;
}

.tk-spoor::before {
    right: 0;
    background: rgba(255, 255, 255, 0.14);
}

.tk-gedaan {
    width: 0;
    background: var(--cyan);
    box-shadow: 0 0 8px rgba(49, 216, 255, 0.6);
}

.tk-schuif {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.tk-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tk-marker {
    position: absolute;
    top: 6px;
    width: 10px;
    height: 16px;
    margin-left: -5px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: #ff8a3d;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    pointer-events: auto;
    z-index: 1;
}

.tk-marker:hover { transform: scaleY(1.25); }
.tk-marker.nexus { background: #ff3b5c; width: 12px; margin-left: -6px; }
.tk-marker.schip { background: #ff4d6d; border-radius: 50%; width: 9px; height: 9px; top: 10px; }
.tk-marker.troepen { background: var(--green); }
.tk-marker.wachter { background: var(--amber); }
.tk-marker.begin { background: #dff3ff; width: 3px; margin-left: -1px; }

.tk-status {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    background: rgba(1, 3, 10, 0.86);
    font-family: var(--mono);
    letter-spacing: 0.2em;
    text-align: center;
    padding: 16px;
}

.tk-status[hidden] {
    display: none;
}

.tk-status p {
    margin: 0;
}

.tk-status.fout p {
    color: #ff8aa6;
    letter-spacing: 0.06em;
    font-family: var(--font);
}

.tk-status button[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .tk-kop { left: 8px; right: 8px; top: 8px; }
    .tk-titel h2 { font-size: 14px; }
    .tk-camera { left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); }
    .tk-camkop { display: none; }
    .tk-balk { left: 8px; right: 8px; gap: 8px; padding: 6px 8px; }
    .tk-tijd { min-width: 0; font-size: 11px; }
    .tk-meldingen { top: 84px; }
    .tk-melding { font-size: 11px; }
}

/* De replay is de knop waar het om draait (f8-04): even groot als CONTINUE en
   voller van kleur; de log ernaast is een rustige tweede. */
.ak-kijk,
.ak-log {
    padding: 11px 18px;
    border-radius: 9px;
    font: inherit;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.18em;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.ak-kijk {
    border: 1px solid var(--cyan);
    background: rgba(49, 216, 255, 0.3);
    color: #fff;
    box-shadow: 0 0 18px rgba(49, 216, 255, 0.25);
}

.ak-kijk:hover {
    background: rgba(49, 216, 255, 0.42);
}

.ak-log {
    border: 1px solid var(--panel-line);
    background: transparent;
    color: #9fc3d8;
}

.ak-log:hover {
    border-color: var(--cyan-soft);
    color: #dff3ff;
}

/* De Nexus in de replay: dezelfde kleuren als in de aanvalsbalk. */
.tk-nexus {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
}

.tk-nexus span {
    opacity: 0.7;
}

.tk-nexus i {
    position: relative;
    width: 110px;
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(127, 214, 255, 0.45);
    overflow: hidden;
}

.tk-nexus u {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(135deg, #7fd6ff 0 6px, #4aa8d8 6px 12px);
}

.tk-nexus em {
    font-style: normal;
    color: #7fd6ff;
}

.tk-nexus.open i {
    border-color: rgba(255, 138, 61, 0.7);
}

.tk-nexus.open u {
    background: linear-gradient(90deg, var(--red), #ff8a3d 60%, var(--amber));
}

.tk-nexus.open em {
    color: var(--amber);
}

.tk-nexus.weg em {
    color: var(--red);
}

/* Besluit 42: een knop per soort troepen in je hand. De gekozen soort (wat G
   neerzet) licht op; tikken zet meteen neer. */
.ah-soorten {
    display: flex;
    gap: 6px;
}

.ah-soort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(61, 255, 160, 0.35);
    background: rgba(61, 255, 160, 0.06);
    color: #bfffe0;
    font: inherit;
    letter-spacing: 0.1em;
    cursor: pointer;
    pointer-events: auto;
}

.ah-soort kbd {
    display: inline-grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(61, 255, 160, 0.5);
    font: inherit;
    font-size: 10px;
    letter-spacing: 0;
}

.ah-soort.gekozen {
    border-color: var(--green);
    background: rgba(61, 255, 160, 0.22);
    color: #fff;
    box-shadow: 0 0 12px rgba(61, 255, 160, 0.35);
}

@media (max-width: 760px) {
    .ah-soort { padding: 3px 7px; }
}

/* De aanvalsbalk groeide met de Nexus-balk en de troepenknoppen; op een smal
   scherm schoof hij over de panelen links en rechts. Onder 1100 px gaat het
   percentage (dat zegt de Nexus-balk al) eruit en wordt de balk korter. */
@media (max-width: 1100px) {
    #aanval-hud { gap: 10px; }
    #aanval-hud .ah-deel { display: none; }
    .ah-nexus-balk { width: 80px; }
}

/* Tussen telefoon en breed scherm is er bovenin geen plek tussen de panelen
   links en rechts (gemeten op 1024 px: 300 px vrij, de balk is 600). Dan gaat
   hij onderaan staan: daar staat tijdens een aanval niets anders. */
@media (min-width: 761px) and (max-width: 1280px) {
    #aanval-hud {
        top: auto;
        bottom: calc(18px + env(safe-area-inset-bottom));
    }
}

/* ── Planet Wars fase 9: de dagchest ──────────────────────────────────────────
   Amber, want amber is in dit spel de kleur van Starcoins en van de hangar;
   goud is een tint warmer. Het deksel klapt open, de gloed komt op, en de
   inhoud komt regel voor regel. */

#kist-knop {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border: 1px solid rgba(255, 209, 102, 0.6);
    border-radius: 999px;
    background: rgba(28, 18, 2, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    cursor: pointer;
    animation: kist-klop 1.6s ease-in-out infinite;
}

#kist-knop.hidden {
    display: none;
}

.kist-aantal {
    font-style: normal;
    opacity: 0.8;
}

@keyframes kist-klop {
    50% { box-shadow: 0 0 20px rgba(255, 209, 102, 0.45); }
}

.quest-kist {
    margin-top: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 209, 102, 0.6);
    border-radius: 8px;
    background: rgba(255, 209, 102, 0.12);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    cursor: pointer;
}

/* De dagchest openen, schermvullend (Nathan 2026-09-29: "die slaat nergens op.
   Het is niet eens full screen."). Standen als klasse op #kist-kaart:
     klaar   de kist zweeft, de stralen draaien langzaam
     schudt  OPEN is gedrukt: steeds harder schudden, de naad gaat gloeien
     open    flits, deksel eraf, lichtstraal, vonken, de inhoud als kaarten
     goud    alles in goud, meer vonken, snellere stralen
   Amber, want amber is in dit spel de kleur van Starcoins. */
#kist-kaart {
    --kk-kleur: #ffd166;
    --kk-gloed: rgba(255, 209, 102, 0.55);
    position: fixed;
    inset: 0;
    z-index: 61;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 46%, rgba(70, 44, 6, 0.55) 0%, rgba(8, 6, 14, 0.9) 55%, rgba(2, 3, 8, 0.97) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-align: center;
    animation: kk-in 0.35s ease-out both;
}

#kist-kaart.hidden { display: none; }

#kist-kaart.goud { --kk-kleur: #ffb13b; --kk-gloed: rgba(255, 177, 59, 0.75); }

@keyframes kk-in { from { opacity: 0; } to { opacity: 1; } }

/* De stralen: een draaiende waaier achter de kist, naar de randen toe weg. */
.kk-stralen {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 180vmax;
    height: 180vmax;
    margin: -90vmax 0 0 -90vmax;
    background: repeating-conic-gradient(from 0deg, rgba(255, 209, 102, 0.13) 0deg 7deg, transparent 7deg 18deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 12%, transparent 34%);
    mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 12%, transparent 34%);
    animation: kk-draai 40s linear infinite;
    opacity: 0.7;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

#kist-kaart.schudt .kk-stralen { animation-duration: 8s; opacity: 0.9; }
#kist-kaart.open .kk-stralen { animation-duration: 18s; opacity: 1; }
#kist-kaart.goud .kk-stralen {
    background: repeating-conic-gradient(from 0deg, rgba(255, 177, 59, 0.26) 0deg 7deg, rgba(255, 240, 200, 0.05) 7deg 18deg);
    animation-duration: 10s;
}

@keyframes kk-draai { to { transform: rotate(360deg); } }

.kk-kop-blok,
.kk-podium,
.kk-inhoud,
.kk-meer,
.kk-knoppen { position: relative; }

.kk-kop-blok {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.kk-kicker {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.42em;
    color: var(--kk-kleur);
    opacity: 0.85;
}

.kk-kop {
    margin: 0;
    font-family: var(--mono);
    font-size: 34px;
    letter-spacing: 0.26em;
    color: #fff;
    text-shadow: 0 0 22px var(--kk-gloed);
}

#kist-kaart.open .kk-kop { animation: kk-kop-slag 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) both; color: var(--kk-kleur); }

@keyframes kk-kop-slag {
    0% { transform: scale(1.8); opacity: 0; filter: blur(6px); }
    40% { transform: scale(0.95); opacity: 1; filter: none; }
    100% { transform: scale(1); }
}

.kk-sub {
    margin: 0;
    max-width: 520px;
    font-size: 13px;
    opacity: 0.75;
}

/* ── De kist ─────────────────────────────────────────────────────────────── */

.kk-podium {
    display: grid;
    place-items: center;
    width: min(44vmin, 340px);
    aspect-ratio: 240 / 210;
}

.kk-kist {
    position: relative;
    width: 100%;
}

.kk-kist svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.kk-s1 { stop-color: #2a3b56; }
.kk-s2 { stop-color: #0f1726; }
.kk-s3 { stop-color: #3b5378; }
.kk-b1 { stop-color: #8a6a24; }
.kk-b2 { stop-color: #ffe29a; }
.kk-k1 { stop-color: #ffd166; }
.kk-k2 { stop-color: rgba(255, 150, 40, 0); }

#kist-kaart.goud .kk-s1 { stop-color: #5a3f0e; }
#kist-kaart.goud .kk-s2 { stop-color: #241603; }
#kist-kaart.goud .kk-s3 { stop-color: #8a6516; }
#kist-kaart.goud .kk-b2 { stop-color: #fff3c4; }

.kk-rand { fill: none; stroke: var(--kk-kleur); stroke-width: 2.5; stroke-linejoin: round; }
.kk-lijn { fill: none; stroke: rgba(255, 209, 102, 0.28); stroke-width: 1.5; }
.kk-slot { fill: #1b2638; stroke: var(--kk-kleur); stroke-width: 2; }
.kk-klinken circle { fill: #ffe29a; }
.kk-greep { fill: #1b2638; stroke: var(--kk-kleur); stroke-width: 2; }
.kk-schaduw { fill: rgba(0, 0, 0, 0.55); }
.kk-gloed { fill: var(--kk-gloed); opacity: 0.25; transition: opacity 0.5s ease; }

.kk-kern { transform-box: fill-box; transform-origin: center; animation: kk-kern 1.6s ease-in-out infinite; }

@keyframes kk-kern {
    0%, 100% { opacity: 0.7; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* De naad tussen deksel en romp: daar komt het licht als eerste uit. */
.kk-naad {
    fill: none;
    stroke: #fff2c8;
    stroke-width: 3;
    opacity: 0;
    filter: drop-shadow(0 0 6px var(--kk-kleur)) drop-shadow(0 0 14px var(--kk-kleur));
}

.kk-binnen { fill: #fff6d8; opacity: 0; filter: drop-shadow(0 0 16px var(--kk-kleur)); }

.kk-deksel {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

/* Klaar: zweven. */
#kist-kaart.klaar:not(.schudt):not(.open) .kk-kist { animation: kk-zweef 2.6s ease-in-out infinite; }

@keyframes kk-zweef {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-10px) rotate(-1.2deg); }
}

/* Schudden: steeds harder (kk-opbouw loopt de hele spanning door), de naad en
   de gloed komen op, en de kist zwelt een beetje. */
#kist-kaart.schudt .kk-kist { animation: kk-opbouw 1.15s ease-in both; }
#kist-kaart.schudt .kk-kist svg { animation: kk-schud 0.09s linear infinite; }
#kist-kaart.schudt .kk-naad { animation: kk-naad-op 1.15s ease-in both; }
#kist-kaart.schudt .kk-gloed { opacity: 0.8; transition-duration: 1.1s; }

@keyframes kk-opbouw {
    from { transform: scale(1); filter: brightness(1); }
    to { transform: scale(1.1); filter: brightness(1.45); }
}

@keyframes kk-schud {
    0% { transform: translate(0, 0) rotate(0); }
    25% { transform: translate(-4px, 1px) rotate(-2.5deg); }
    50% { transform: translate(3px, -1px) rotate(1.5deg); }
    75% { transform: translate(4px, 1px) rotate(2.5deg); }
    100% { transform: translate(0, 0) rotate(0); }
}

@keyframes kk-naad-op {
    0% { opacity: 0; }
    60% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Open: het deksel knalt eraf en vliegt draaiend uit beeld (bleef hij zweven,
   dan hing hij over de titel), het binnenste gloeit. */
#kist-kaart.open .kk-deksel { animation: kk-deksel-weg 1s cubic-bezier(0.2, 0.7, 0.4, 1) both; }
#kist-kaart.open .kk-binnen { animation: kk-binnen 0.6s ease-out both; }
#kist-kaart.open .kk-naad { opacity: 0; }
#kist-kaart.open .kk-gloed { opacity: 1; }
#kist-kaart.open .kk-kist { animation: kk-klap 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both; }

@keyframes kk-deksel-weg {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    30% { transform: translate(-40px, -120px) rotate(-28deg); opacity: 1; }
    100% { transform: translate(-190px, -420px) rotate(-110deg); opacity: 0; }
}

@keyframes kk-binnen {
    0% { opacity: 0; transform: scaleX(0.6); }
    100% { opacity: 1; transform: scaleX(1); }
}

@keyframes kk-klap {
    0% { transform: scale(1.12) translateY(0); }
    35% { transform: scale(0.94, 1.06) translateY(4px); }
    100% { transform: scale(1) translateY(0); }
}

/* De lichtstraal die uit de open kist omhoog schiet. */
.kk-straal {
    position: absolute;
    left: 50%;
    bottom: 48%;
    width: 64%;
    height: 170%;
    margin-left: -32%;
    background: linear-gradient(to top, rgba(255, 240, 200, 0.95), rgba(255, 209, 102, 0.35) 45%, transparent 100%);
    clip-path: polygon(22% 100%, 78% 100%, 100% 0, 0 0);
    filter: blur(6px);
    transform-origin: 50% 100%;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
}

#kist-kaart.open .kk-straal { animation: kk-straal 1.4s cubic-bezier(0.2, 0.9, 0.3, 1) both; }

@keyframes kk-straal {
    0% { transform: scaleY(0); opacity: 1; }
    30% { transform: scaleY(1.08); opacity: 1; }
    100% { transform: scaleY(1); opacity: 0.55; }
}

/* Vonken en munten: main.js geeft elk een eigen baan (--x, --y), draai (--r),
   vertraging (--d) en duur (--t). */
.kk-vonken {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.kk-vonken i {
    position: absolute;
    left: 0;
    top: 0;
    font-style: normal;
    line-height: 1;
    opacity: 0;
    animation: kk-vonk var(--t, 1.2s) var(--d, 0s) cubic-bezier(0.1, 0.8, 0.3, 1) both;
}

.kk-vonken i.vonk {
    width: 6px;
    height: 6px;
    margin: -3px;
    border-radius: 50%;
    background: #fff2c8;
    box-shadow: 0 0 10px var(--kk-kleur), 0 0 20px var(--kk-kleur);
}

.kk-vonken i.munt {
    margin: -10px;
    font-size: 20px;
    color: var(--kk-kleur);
    text-shadow: 0 0 10px var(--kk-gloed);
}

.kk-vonken i.token {
    margin: -9px;
    font-size: 18px;
    color: #b18cff;
    text-shadow: 0 0 10px rgba(177, 140, 255, 0.8);
}

@keyframes kk-vonk {
    0% { transform: translate(0, 0) scale(0.3) rotate(0); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); opacity: 0; }
}

/* ── De inhoud: kaarten die uit de kist komen ────────────────────────────── */

.kk-inhoud {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    min-height: 92px;
}

.kk-prijs {
    --p-kleur: var(--kk-kleur);
    display: grid;
    grid-template-rows: auto auto auto;
    justify-items: center;
    gap: 2px;
    min-width: 132px;
    padding: 10px 16px 9px;
    border: 1px solid var(--p-kleur);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(20, 16, 8, 0.85), rgba(6, 8, 16, 0.9));
    box-shadow: 0 0 26px color-mix(in srgb, var(--p-kleur) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: kk-prijs 0.6s calc(0.45s + var(--i, 0) * 0.28s) cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.kk-prijs.token { --p-kleur: #b18cff; }
.kk-prijs.thema { --p-kleur: #ff8ae6; }

.kk-prijs i {
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    color: var(--p-kleur);
    text-shadow: 0 0 12px var(--p-kleur);
}

.kk-prijs b {
    font-family: var(--mono);
    font-size: 22px;
    color: #fff;
    letter-spacing: 0.04em;
}

.kk-prijs span {
    font-size: 11px;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

@keyframes kk-prijs {
    0% { transform: translateY(-70px) scale(0.3); opacity: 0; }
    60% { transform: translateY(4px) scale(1.06); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

.kk-meer { min-height: 14px; margin: 0; font-size: 12px; opacity: 0.7; }

/* ── Knoppen, met hun toets erop ─────────────────────────────────────────── */

.kk-knoppen { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.kk-open,
.kk-dicht {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 10px;
    font: inherit;
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.22em;
    cursor: pointer;
}

/* `hidden` is een attribuut; zonder deze regel wint display: inline-flex. */
.kk-open[hidden],
.kk-dicht[hidden] { display: none; }

.kk-open b,
.kk-dicht b {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 10px;
    letter-spacing: 0.06em;
}

.kk-open {
    min-width: 190px;
    justify-content: center;
    border: 1px solid var(--kk-kleur);
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.34), rgba(255, 209, 102, 0.12));
    box-shadow: 0 0 30px rgba(255, 209, 102, 0.3);
    color: #fff;
}

.kk-open b { border: 1px solid var(--kk-kleur); background: rgba(255, 209, 102, 0.2); color: var(--kk-kleur); }

.kk-open:hover:not(:disabled) { box-shadow: 0 0 44px rgba(255, 209, 102, 0.5); }

.kk-open:disabled { opacity: 0.45; cursor: default; }

/* De knoppen komen terug bij de samenvatting, na de kaarten. */
#kist-kaart.samenvatting .kk-knoppen { animation: kk-knoppen 0.4s 0.5s ease-out both; }

@keyframes kk-knoppen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.kk-dicht {
    border: 1px solid var(--panel-line);
    background: rgba(4, 10, 20, 0.6);
    color: #9fc3d8;
}

.kk-dicht b { border: 1px solid var(--panel-line); color: #9fc3d8; }

/* De flits: over alles heen, één keer bij het openen. */
.kk-flits {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.95), rgba(255, 220, 150, 0.55) 30%, transparent 70%);
    opacity: 0;
    pointer-events: none;
}

#kist-kaart.open .kk-flits { animation: kk-flits 0.7s ease-out both; }

@keyframes kk-flits {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Eén item tegelijk, met de teller rechtsonder (Nathan 2026-09-29) ────────
   "Ik wil de iconische items remaining counter rechtsonderin, met een kans op
   een zeldzame grote reward die altijd het laatste is wat je krijgt, waarbij de
   items remaining counter gaat knipperen."
     open                 het item staat groot voor de kist, TAP voor het volgende
     zeldzaam-volgt       het volgende is het zeldzame: de teller knippert en de
                          kist gloeit magenta
     zeldzaam-nu          het zeldzame staat er: alles in magenta, meer vonken
     samenvatting         alles op een rij, met de knoppen */

#kist-kaart.zeldzaam-nu { --kk-kleur: #ff6ad5; --kk-gloed: rgba(255, 106, 213, 0.75); }

#kist-kaart.zeldzaam-nu .kk-stralen {
    background: repeating-conic-gradient(from 0deg, rgba(255, 106, 213, 0.26) 0deg 7deg, rgba(255, 220, 245, 0.05) 7deg 18deg);
    animation-duration: 7s;
}

.kk-item {
    position: absolute;
    left: 50%;
    top: 47%;
    translate: -50% -50%;
    z-index: 2;
    display: none;
    grid-template-rows: auto auto auto auto;
    justify-items: center;
    gap: 4px;
    min-width: 250px;
    max-width: 88vw;
    padding: 18px 26px 16px;
    border: 2px solid var(--i-kleur, var(--kk-kleur));
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(26, 18, 6, 0.94), rgba(6, 8, 18, 0.96));
    box-shadow: 0 0 60px color-mix(in srgb, var(--i-kleur, var(--kk-kleur)) 45%, transparent), 0 20px 50px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.kk-item.token { --i-kleur: #b18cff; }
.kk-item.thema { --i-kleur: #ff6ad5; }
.kk-item.jackpot { --i-kleur: #ff6ad5; }

#kist-kaart.open:not(.samenvatting) .kk-item.in { display: grid; animation: kk-item-in 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

@keyframes kk-item-in {
    0% { transform: translateY(90px) scale(0.2); opacity: 0; }
    60% { transform: translateY(-6px) scale(1.08); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

.kk-item-zeldzaam {
    display: none;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--i-kleur);
    color: #1a0514;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3em;
}

.kk-item.zeldzaam .kk-item-zeldzaam { display: block; }

.kk-item-ikoon {
    font-style: normal;
    font-size: 54px;
    line-height: 1.05;
    color: var(--i-kleur, var(--kk-kleur));
    text-shadow: 0 0 22px var(--i-kleur, var(--kk-kleur));
}

.kk-item-waarde {
    font-family: var(--mono);
    font-size: 40px;
    letter-spacing: 0.04em;
    color: #fff;
}

.kk-item-naam {
    font-size: 13px;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

/* Het zeldzame: groter, een stralenkrans erachter, en het slaat harder in. */
#kist-kaart.open:not(.samenvatting) .kk-item.zeldzaam.in { animation: kk-item-zeldzaam 0.9s cubic-bezier(0.2, 1.3, 0.4, 1) both; }

.kk-item.zeldzaam::before {
    content: '';
    position: absolute;
    inset: -60%;
    z-index: -1;
    background: repeating-conic-gradient(from 0deg, rgba(255, 106, 213, 0.35) 0deg 10deg, transparent 10deg 24deg);
    /* Een ring om de kaart, niet eroverheen: het midden blijft leeg. */
    -webkit-mask-image: radial-gradient(circle, transparent 0 24%, #000 32%, transparent 60%);
    mask-image: radial-gradient(circle, transparent 0 24%, #000 32%, transparent 60%);
    animation: kk-draai 6s linear infinite;
}

@keyframes kk-item-zeldzaam {
    0% { transform: translateY(90px) scale(0.1) rotate(-8deg); opacity: 0; filter: brightness(3); }
    45% { transform: translateY(-10px) scale(1.28) rotate(2deg); opacity: 1; filter: brightness(1.6); }
    70% { transform: scale(1.08) rotate(0); }
    100% { transform: scale(1.14); opacity: 1; filter: none; }
}

/* "Tik voor het volgende", zacht knipperend onder het item. */
.kk-verder {
    position: absolute;
    left: 50%;
    bottom: 15%;
    translate: -50% 0;
    z-index: 2;
    display: none;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.34em;
    color: #fff;
    opacity: 0.7;
    pointer-events: none;
    animation: kk-verder 1.4s ease-in-out infinite;
}

#kist-kaart.open:not(.samenvatting) .kk-verder { display: block; }

@keyframes kk-verder {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.9; }
}

/* ── De teller rechtsonder ───────────────────────────────────────────────── */

.kk-teller {
    position: absolute;
    right: max(28px, env(safe-area-inset-right));
    bottom: max(28px, env(safe-area-inset-bottom));
    z-index: 2;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 10px 12px;
    border: 2px solid var(--kk-kleur);
    border-radius: 14px;
    background: rgba(8, 8, 16, 0.85);
    box-shadow: 0 0 26px var(--kk-gloed);
    font-family: var(--mono);
    text-align: left;
    pointer-events: none;
}

#kist-kaart.open:not(.samenvatting) .kk-teller { display: flex; }

.kk-teller-n {
    display: grid;
    place-items: center;
    min-width: 58px;
    height: 58px;
    border-radius: 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--kk-kleur) 45%, transparent), color-mix(in srgb, var(--kk-kleur) 12%, transparent));
    border: 1px solid var(--kk-kleur);
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    text-shadow: 0 0 12px var(--kk-kleur);
}

.kk-teller span {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.24em;
    color: var(--kk-kleur);
}

.kk-teller.tik .kk-teller-n { animation: kk-teller-tik 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

@keyframes kk-teller-tik {
    0% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

.kk-teller.leeg { opacity: 0.55; }

/* Het volgende is het zeldzame: de teller knippert, magenta en amber door
   elkaar, en de open kist gloeit magenta. */
#kist-kaart.zeldzaam-volgt .kk-teller { animation: kk-teller-knip 0.45s steps(1, end) infinite; }
#kist-kaart.zeldzaam-volgt .kk-binnen { fill: #ffc4ef; filter: drop-shadow(0 0 22px #ff6ad5); animation: kk-rare-puls 0.9s ease-in-out infinite; }
#kist-kaart.zeldzaam-volgt .kk-gloed { fill: rgba(255, 106, 213, 0.6); }

@keyframes kk-teller-knip {
    0% { border-color: #ff6ad5; box-shadow: 0 0 34px rgba(255, 106, 213, 0.9); }
    50% { border-color: #ffd166; box-shadow: 0 0 14px rgba(255, 209, 102, 0.5); }
}

@keyframes kk-rare-puls {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* De samenvatting: het item en de teller weg, de rij en de knoppen erbij. Tot
   dan houden de knoppen hun plek (visibility), zodat de kist niet verspringt. */
#kist-kaart.open:not(.samenvatting) .kk-knoppen { visibility: hidden; }

.kk-prijs.zeldzaam { --p-kleur: #ff6ad5; }

/* Een liggende telefoon: kleiner, zodat kop, kist, kaarten en knoppen erop passen. */
@media (max-height: 540px) {
    #kist-kaart { gap: 6px; padding: 8px 16px; }
    .kk-kop { font-size: 22px; }
    .kk-sub { display: none; }
    .kk-podium { width: min(34vmin, 240px); }
    .kk-inhoud { min-height: 70px; gap: 8px; }
    .kk-prijs { min-width: 104px; padding: 6px 10px; }
    .kk-prijs b { font-size: 17px; }
    .kk-prijs i { font-size: 16px; }
    .kk-open, .kk-dicht { padding: 9px 16px; font-size: 12px; }
    .kk-item { min-width: 200px; padding: 10px 18px; gap: 2px; }
    .kk-item-ikoon { font-size: 36px; }
    .kk-item-waarde { font-size: 28px; }
    .kk-teller { right: 16px; bottom: 12px; padding: 6px 12px 6px 8px; }
    .kk-teller-n { min-width: 42px; height: 42px; font-size: 24px; }
    .kk-verder { bottom: 8%; }
}

@media (max-width: 520px) {
    .kk-kop { font-size: 24px; }
    .kk-podium { width: min(64vw, 300px); }
}

@media (prefers-reduced-motion: reduce) {
    #kist-knop,
    #kist-kaart *,
    #kist-kaart { animation: none !important; }
    #kist-kaart.open .kk-deksel { opacity: 0; }
    #kist-kaart.open .kk-binnen,
    #kist-kaart.open .kk-straal { opacity: 0.8; transform: none; }
}

/* ── Planet Wars fase 9: trofeeën ─────────────────────────────────────────────
   Oranje met een kroon: niet het amber van de Starcoins en niet het violet van
   de tokens, want het is geen munt maar een stand. */

.stats .row.trofeeen {
    align-items: center;
    gap: 6px;
    margin-top: -4px;
}

.stats .row.trofeeen .token {
    color: #ffa94d;
    text-shadow: 0 0 12px rgba(255, 169, 77, 0.65);
}

.stats .row.trofeeen .val {
    color: #ffd8b0;
    font-size: 15px;
}

/* Het SEASON-paneel: je eigen stand groot, de top eronder. */
.war-trofeeen { margin: 4px 0 12px; }

.wt-eigen {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 169, 77, 0.35);
    border-radius: 10px;
    background: rgba(255, 169, 77, 0.07);
}

.wt-kroon {
    font-size: 24px;
    color: #ffa94d;
    text-shadow: 0 0 16px rgba(255, 169, 77, 0.7);
}

.wt-eigen b {
    font-family: var(--mono);
    font-size: 26px;
    color: #fff;
}

.wt-uitleg {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    opacity: 0.75;
}

.wt-uitleg i { font-style: normal; }

.war-trofeeen .erelijst { opacity: 1; }

.war-trofeeen .erelijst li.mine .nm,
.war-trofeeen .erelijst li.mine .sc,
.erelijst li.mine .nm { color: #ffa94d; }

.war-trofeeen .erelijst .sc { color: #ffd8b0; opacity: 0.9; }

/* Een gast: de uitnodiging in het amber van het gastblok in de datakern
   (#acc-gast), en zijn eigen regel onderaan gestippeld, want hij staat er
   nog niet echt. */
.wt-gast {
    margin: 10px 0 4px;
    padding: 11px 13px;
    border-radius: 9px;
    border: 1px solid rgba(255, 209, 102, 0.35);
    background: rgba(40, 32, 8, 0.45);
}

.wt-gast .panel-title { margin-top: 0; color: var(--amber); }

.wt-gast p { margin: 6px 0 0; color: #ffe6b0; }

#wt-gast-knop {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 209, 102, 0.55);
    background: rgba(255, 209, 102, 0.16);
    color: var(--amber);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: background 0.15s;
}

#wt-gast-knop:hover { background: rgba(255, 209, 102, 0.28); }

.war-trofeeen .erelijst li.guest {
    border: 1px dashed rgba(255, 209, 102, 0.45);
    border-radius: 6px;
    opacity: 0.8;
}

/* ── Planet Wars fase 10: je planeet aanpassen ────────────────────────────────
   Magenta, de kleur van het rimlicht: dit gaat over hoe je planeet eruitziet,
   niet over geld (amber) of bouwen (cyaan). Het paneel staat opzij en zonder
   waas ervoor, want het punt is dat je je planeet ziet veranderen. */

#look-knop {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border: 1px solid rgba(255, 47, 208, 0.5);
    border-radius: 999px;
    background: rgba(20, 4, 20, 0.74);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ff8ae6;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    cursor: pointer;
}

#look-knop.hidden { display: none; }

#look-knop b { background: rgba(255, 47, 208, 0.14); border-color: rgba(255, 47, 208, 0.5); }

#kist-knop b { background: rgba(255, 209, 102, 0.14); border-color: rgba(255, 209, 102, 0.55); }

#uiterlijk {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    display: flex;
    align-items: center;
    padding: 16px;
    pointer-events: none;
}

#uiterlijk.hidden { display: none; }

.ui-box {
    pointer-events: auto;
    width: min(400px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 20px 20px 18px;
    border-radius: 12px;
    background: var(--panel);
    border: 1px solid rgba(255, 47, 208, 0.45);
    box-shadow: 0 0 40px rgba(255, 47, 208, 0.1), 0 0 40px rgba(0, 0, 0, 0.6);
    animation: ak-in 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.ui-kop {
    margin: 0 0 4px;
    font-family: var(--mono);
    font-size: 20px;
    letter-spacing: 0.22em;
    color: #ff8ae6;
}

.ui-sub { margin: 0 0 14px; font-size: 12.5px; opacity: 0.75; }

.ui-sectie h3 {
    margin: 0 0 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: #fff;
}

.ui-uitleg {
    display: block;
    margin-top: 2px;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0;
    opacity: 0.6;
    font-weight: normal;
}

.ui-themas {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ui-themas .leeg { grid-column: 1 / -1; opacity: 0.6; font-size: 12px; }

.ui-thema button {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--panel-line);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.03);
    color: #d8e6f0;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.ui-thema button:hover { border-color: rgba(255, 138, 230, 0.6); }

.ui-staal {
    position: relative;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
}

/* Het accent en de warme kleur als twee lichtjes in de lucht. */
.ui-staal i {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    bottom: 8px;
    box-shadow: 0 0 8px currentColor;
}

.ui-staal i:first-child { left: 10px; }
.ui-staal i:last-child { left: 24px; }

.ui-thema b { font-size: 12px; font-weight: 600; }

.ui-thema em {
    font-style: normal;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.ui-thema.te-koop em { color: var(--amber); opacity: 1; }
.ui-thema.actief em { color: #6bff9c; opacity: 1; }
.ui-thema.gekozen button { border-color: #ff8ae6; box-shadow: 0 0 0 1px #ff8ae6 inset; }
.ui-thema.actief button { background: rgba(107, 255, 156, 0.06); }

.ui-melding { min-height: 16px; margin: 0 0 10px; font-size: 12px; color: #ffb3c8; }

.ui-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }

.ui-actie,
.ui-dicht {
    padding: 10px 16px;
    border-radius: 9px;
    font: inherit;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    cursor: pointer;
}

.ui-actie {
    flex: 1;
    border: 1px solid #ff8ae6;
    background: rgba(255, 47, 208, 0.18);
    color: #fff;
}

.ui-actie:disabled { opacity: 0.5; cursor: default; }

.ui-dicht {
    border: 1px solid var(--panel-line);
    background: transparent;
    color: #9fc3d8;
}

/* Op een telefoon onderaan, en de planeet erboven blijft zichtbaar. */
@media (max-width: 760px) {
    #uiterlijk { top: auto; left: 0; align-items: flex-end; padding: 8px; }
    .ui-box { width: 100%; max-height: 58vh; }
    .ui-themas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .ui-staal { height: 30px; }
}

/* De tijd van de dag (en straks het weer): een rij knoppen, de gekozen licht op. */
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }

.ui-chips button {
    padding: 7px 11px;
    border: 1px solid var(--panel-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: #d8e6f0;
    font: inherit;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    cursor: pointer;
}

.ui-chips button:hover { border-color: rgba(255, 138, 230, 0.6); }

.ui-chips button.actief {
    border-color: #ff8ae6;
    background: rgba(255, 47, 208, 0.18);
    color: #fff;
}

/* Onweer, het enige betaalde weer: goud, met de prijs erop tot je het hebt. */
.ui-chips button.betaald {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-color: rgba(255, 209, 102, 0.6);
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.16), rgba(140, 170, 255, 0.1));
    color: #ffe7a8;
    box-shadow: 0 0 14px rgba(255, 209, 102, 0.18);
}

.ui-chips button.betaald:hover { border-color: #ffd166; }

.ui-chips button.betaald.voorbeeld {
    border-color: #ffd166;
    box-shadow: 0 0 20px rgba(255, 209, 102, 0.45);
    color: #fff;
}

.ui-chips button.betaald.actief {
    border-color: #ffd166;
    background: rgba(255, 209, 102, 0.24);
    color: #fff;
}

.ui-chips .ui-bliksem {
    font-size: 13px;
    letter-spacing: 0;
    filter: drop-shadow(0 0 4px rgba(255, 230, 140, 0.9));
}

.ui-chips button small {
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 209, 102, 0.22);
    color: #ffd166;
    font-size: 10px;
    letter-spacing: 0.04em;
}

/* ── Grafische instellingen (bl-01) ───────────────────────────────────────────
   Een eigen scherm over het pauzemenu heen. De pauze gaat zolang onzichtbaar
   (`behind`), zodat je achter dit paneel het spel ziet veranderen als je iets
   omzet; de rand van het scherm blijft daarom bijna doorzichtig. Drie kleuren
   voor de drie groepen, ook op de balkjes van de presets: groen de processor,
   cyaan de grafische kaart, magenta het videogeheugen. */

#pause.behind { visibility: hidden; }

/* De deur in het pauzemenu: wat er nu geldt staat erop. */
#graphics,
#store {
    position: fixed;
    inset: 0;
    z-index: 48;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: radial-gradient(ellipse at center, rgba(2, 6, 16, 0.2) 0%, rgba(2, 6, 16, 0.7) 100%);
    animation: toast-in 0.18s ease-out;
}

.gfx-panel {
    width: min(1180px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 22px 26px 18px;
    border: 1px solid var(--panel-line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(6, 14, 30, 0.92), rgba(3, 8, 20, 0.9));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #d6ecfb;
    font-family: var(--font);
}

.gfx-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.gfx-kicker {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.4em;
    color: var(--cyan);
    opacity: 0.8;
}

.gfx-head h2 {
    margin: 4px 0 6px;
    font-size: 30px;
    letter-spacing: 0.28em;
    color: #fff;
    text-shadow: 0 0 22px rgba(49, 216, 255, 0.45);
}

.gfx-sub {
    margin: 0;
    max-width: 580px;
    font-size: 12px;
    line-height: 1.5;
    color: #9fbfd6;
}

.gfx-live {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    flex: none;
}

.gfx-fps {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--mono);
}

.gfx-fps b {
    min-width: 2.2ch;
    font-size: 34px;
    color: var(--green);
    text-shadow: 0 0 16px rgba(61, 255, 160, 0.5);
}

.gfx-fps span {
    font-size: 11px;
    letter-spacing: 0.3em;
    opacity: 0.7;
}

.gfx-gpu {
    max-width: 280px;
    font-size: 11px;
    color: #8fb0c8;
}

.gfx-auto {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--amber);
}

.gfx-kop {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.32em;
    color: #7fa3bd;
}

.gfx-custom {
    color: var(--amber);
    letter-spacing: 0.18em;
}

.gfx-reset {
    margin-left: auto;
    padding: 6px 12px;
    border: 1px solid rgba(255, 209, 102, 0.5);
    border-radius: 999px;
    background: rgba(255, 209, 102, 0.1);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    cursor: pointer;
}

.gfx-reset:hover { background: rgba(255, 209, 102, 0.22); }

.gfx-preset-lijst {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.gfx-preset {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 12px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    color: #b8d4ea;
    font-family: var(--font);
    text-align: left;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.gfx-preset b {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    color: #fff;
}

.gfx-preset > span:not(.gfx-minis) {
    font-size: 11px;
    line-height: 1.35;
    color: #8fb0c8;
}

.gfx-preset:hover {
    border-color: var(--cyan-soft);
    background: rgba(49, 216, 255, 0.07);
}

.gfx-preset.on {
    border-color: var(--cyan);
    background: rgba(49, 216, 255, 0.14);
    box-shadow: 0 0 24px rgba(49, 216, 255, 0.22), inset 0 0 0 1px rgba(49, 216, 255, 0.35);
}

.gfx-preset.on b { color: var(--cyan); }

/* Gekozen, maar met eigen keuzes eroverheen. */
.gfx-preset.eigen { border-style: dashed; }

.gfx-minis {
    display: flex;
    gap: 4px;
    margin-top: auto;
    padding-top: 4px;
}

.gfx-mini {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.gfx-mini u {
    display: block;
    height: 100%;
}

.gfx-mini.cpu u { background: var(--green); }
.gfx-mini.gpu u { background: var(--cyan); }
.gfx-mini.vram u { background: var(--magenta); }

.gfx-groepen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.gfx-groep {
    --acc: var(--cyan);
    --acc-zacht: rgba(49, 216, 255, 0.35);
    padding: 14px 14px 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 2px solid var(--acc);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.gfx-groep.cpu { --acc: var(--green); --acc-zacht: rgba(61, 255, 160, 0.35); }
.gfx-groep.vram { --acc: var(--magenta); --acc-zacht: rgba(255, 47, 208, 0.35); }

.gfx-groep-kop {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gfx-afk {
    padding: 3px 7px;
    border: 1px solid var(--acc);
    border-radius: 5px;
    color: var(--acc);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
}

.gfx-groep-kop h3 {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.26em;
    color: #fff;
}

.gfx-blurb {
    min-height: 3em;
    margin: 8px 0 10px;
    font-size: 11px;
    line-height: 1.45;
    color: #8fb0c8;
}

.gfx-meter {
    position: relative;
    height: 18px;
    margin-bottom: 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.gfx-meter u {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--acc-zacht), var(--acc));
    opacity: 0.8;
    transition: width 0.35s ease;
}

.gfx-meter span {
    position: relative;
    display: block;
    padding: 0 8px;
    line-height: 18px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.24em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.gfx-rij {
    position: relative;
    padding: 9px 0 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Anders dan de preset: een amber streepje ervoor. */
.gfx-rij.anders::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 12px;
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: var(--amber);
}

.gfx-rij.uit { opacity: 0.45; }

.gfx-label b {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #e8f5ff;
}

.gfx-label small {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.35;
    color: #7f9fb6;
}

.gfx-opties {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 7px;
}

.gfx-opties button {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: #9fbfd6;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.gfx-opties button:hover:not(:disabled) {
    border-color: var(--acc);
    color: #fff;
}

.gfx-opties button.on {
    border-color: var(--acc);
    background: var(--acc);
    color: #02121a;
    font-weight: 700;
    box-shadow: 0 0 14px var(--acc-zacht);
}

/* Wat de preset zou kiezen, als je iets anders koos. */
.gfx-opties button.preset { border: 1px dashed rgba(255, 209, 102, 0.6); }

.gfx-opties button:disabled { cursor: not-allowed; }

.gfx-voet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.gfx-voet p {
    margin: 0;
    font-size: 10.5px;
    color: #6f8ea6;
}

.gfx-done {
    flex: none;
    padding: 10px 26px;
    border: 1px solid var(--cyan);
    border-radius: 999px;
    background: rgba(49, 216, 255, 0.16);
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    cursor: pointer;
}

.gfx-done:hover { background: rgba(49, 216, 255, 0.28); }

.gfx-done kbd {
    margin-left: 8px;
    padding: 1px 5px;
    border: 1px solid var(--cyan-soft);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.05em;
}

@media (max-width: 960px) {
    .gfx-preset-lijst { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .gfx-groepen { grid-template-columns: 1fr; }
    .gfx-blurb { min-height: 0; }
}

@media (max-width: 620px) {
    .gfx-panel { padding: 16px 14px 14px; border-radius: 12px; }
    .gfx-head { flex-direction: column; gap: 10px; }
    .gfx-live { align-items: flex-start; text-align: left; }
    .gfx-head h2 { font-size: 24px; }
    .gfx-preset > span:not(.gfx-minis) { display: none; }
    .gfx-voet { flex-direction: column; align-items: stretch; }
}

/* ── Reclames in de bouwmodus (fase 12) ───────────────────────────────────────
   Amber, de kleur van wat iets kost of oplevert, en met een afspeelteken: dit
   is de enige knop in het paneel die je een reclame laat zien, en dat hoort
   hij te zeggen voordat je klikt. */
#bouw .bw-reclame {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 6px 0 0;
    padding: 8px 12px;
    border: 1px solid rgba(255, 209, 102, 0.5);
    border-radius: 8px;
    background: rgba(255, 209, 102, 0.1);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-align: left;
    cursor: pointer;
}

#bouw .bw-reclame:hover:not(:disabled) { background: rgba(255, 209, 102, 0.22); }

#bouw .bw-reclame:disabled { opacity: 0.6; cursor: default; }

#bouw .bw-reclame b {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--amber);
    color: #1a1204;
    font-size: 8px;
}

#bouw .bw-reclame i {
    margin-left: auto;
    font-style: normal;
    opacity: 0.7;
}

#bouw .bw-reclame.hidden { display: none; }

/* In de knoppenrij onder een gekozen gebouw: een eigen regel eronder, en in
   amber in plaats van cyaan (de regel hierboven wint op specificiteit niet
   van `.bw-keuze-knoppen button`, vandaar de herhaling). */
.bw-keuze-knoppen { flex-wrap: wrap; }

#bouw .bw-keuze-knoppen .bw-reclame {
    flex: 1 0 100%;
    color: var(--amber);
    background: rgba(255, 209, 102, 0.1);
    border-color: rgba(255, 209, 102, 0.5);
}

/* ── De winkel (fase 12, besluit 52) ───────────────────────────────────────────
   Zelfde paneel als het grafische scherm (.gfx-*); hier alleen de producten.
   Stil gebouwd: zonder de vlag `iap` is de knop ernaartoe er niet. */
.store-panel { width: min(900px, 100%); }

.store-test {
    margin: 16px 0 0;
    padding: 8px 12px;
    border: 1px dashed rgba(255, 209, 102, 0.6);
    border-radius: 8px;
    color: var(--amber);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-align: center;
}

.store-fout {
    min-height: 1.4em;
    margin: 10px 0 0;
    color: #ff9fb8;
    font-size: 12px;
}

.store-fout.ok {
    color: var(--green);
    font-family: var(--mono);
    letter-spacing: 0.14em;
}

.store-lijst {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.store-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.store-item.builder { border-color: rgba(61, 255, 160, 0.4); background: rgba(61, 255, 160, 0.05); }

.store-icoon {
    font-size: 28px;
    line-height: 1;
    color: var(--amber);
    text-shadow: 0 0 16px rgba(255, 209, 102, 0.5);
}

.store-item.builder .store-icoon { color: var(--green); text-shadow: 0 0 16px rgba(61, 255, 160, 0.5); }

.store-item b {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: #fff;
}

.store-blurb { font-size: 11.5px; line-height: 1.4; color: #8fb0c8; }

.store-prijs {
    margin-top: auto;
    font-family: var(--mono);
    font-size: 18px;
    color: #fff;
}

.store-item button {
    padding: 8px 12px;
    border: 1px solid var(--amber);
    border-radius: 8px;
    background: rgba(255, 209, 102, 0.14);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    cursor: pointer;
}

.store-item button:hover:not(:disabled) { background: rgba(255, 209, 102, 0.28); }

.store-item button:disabled {
    border-color: rgba(255, 255, 255, 0.15);
    background: transparent;
    color: #7f9fb6;
    cursor: default;
}

.store-leeg { color: #8fb0c8; }

/* ── De winkel, tweede ronde (Nathan, 2026-10-02: "moet er vetter uitzien") ──
   Vier kaarten op één rij. Elk een medaillon dat gloeit in zijn eigen kleur:
   groen voor de bouwer, goud voor starcoins, en hoe groter het pakket hoe
   feller. Het pakket met de beste verhouding krijgt een lint; de prijs en de
   knop staan onderaan op dezelfde hoogte, wat er ook boven staat. */
.store-panel { width: min(980px, 100%); }

.store-kop {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

#store-title {
    background: linear-gradient(180deg, #fff6d8 0%, #ffd166 55%, #e89a2c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 18px rgba(255, 209, 102, 0.35));
}

.store-saldo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 209, 102, 0.35);
    border-radius: 10px;
    background: rgba(255, 209, 102, 0.06);
}

.store-saldo span {
    color: #c9b27a;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.24em;
}

.store-saldo b {
    color: #ffe7a8;
    font-family: var(--mono);
    font-size: 18px;
    letter-spacing: 0.04em;
}

.store-saldo i { color: var(--amber); font-style: normal; }
.store-saldo em { font-style: normal; }

.store-lijst {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 10px;
}

.store-item {
    --gloed: 255, 209, 102;
    position: relative;
    align-items: center;
    gap: 8px;
    padding: 22px 14px 14px;
    border: 1px solid rgba(var(--gloed), 0.28);
    border-radius: 16px;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(var(--gloed), 0.16), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    text-align: center;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Een glans die over de kaart trekt als je erop wijst: dit is iets om te
   kopen, en dat mag het laten merken. */
.store-item::after {
    content: '';
    position: absolute;
    inset: -40% auto -40% -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transform: skewX(-18deg) translateX(0);
    opacity: 0;
    pointer-events: none;
}

.store-item:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--gloed), 0.7);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 26px rgba(var(--gloed), 0.22);
}

.store-item:hover::after {
    opacity: 1;
    transition: transform 0.7s ease, opacity 0.2s;
    transform: skewX(-18deg) translateX(420%);
}

.store-item.builder { --gloed: 61, 255, 160; border-color: rgba(61, 255, 160, 0.4); background:
    radial-gradient(120% 70% at 50% 0%, rgba(61, 255, 160, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); }

.si-medaille {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 4px;
    border-radius: 50%;
    border: 1px solid rgba(var(--gloed), 0.6);
    background: radial-gradient(circle at 50% 35%, rgba(var(--gloed), 0.4), rgba(var(--gloed), 0.06) 70%);
    box-shadow: 0 0 22px rgba(var(--gloed), 0.35), inset 0 0 14px rgba(var(--gloed), 0.25);
}

.store-icoon {
    font-size: 30px;
    color: rgb(var(--gloed));
    text-shadow: 0 0 14px rgba(var(--gloed), 0.8);
}

.store-item.builder .store-icoon { color: var(--green); text-shadow: 0 0 14px rgba(61, 255, 160, 0.8); }

/* Hoe groter het pakket, hoe feller het medaillon. */
.store-item.trap-2 .si-medaille { width: 70px; height: 70px; box-shadow: 0 0 30px rgba(var(--gloed), 0.45), inset 0 0 16px rgba(var(--gloed), 0.3); }
.store-item.trap-3 .si-medaille { width: 76px; height: 76px; box-shadow: 0 0 40px rgba(var(--gloed), 0.6), inset 0 0 20px rgba(var(--gloed), 0.4); }
.store-item.trap-3 .store-icoon { font-size: 36px; animation: si-puls 2.4s ease-in-out infinite; }

@keyframes si-puls {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.08); filter: brightness(1.25); }
}

.store-item b.si-naam {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    color: #fff;
    text-transform: uppercase;
}

.si-hoeveel {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: #fff;
    font-family: var(--mono);
    font-size: 24px;
    letter-spacing: 0.02em;
    text-shadow: 0 0 16px rgba(var(--gloed), 0.45);
}

.si-hoeveel i {
    color: rgb(var(--gloed));
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0.16em;
}

.store-item .store-blurb {
    min-height: 2.8em;
    font-size: 11.5px;
    color: #9ab8cc;
}

.si-bonus {
    color: var(--green);
    font-family: var(--mono);
    letter-spacing: 0.04em;
}

.store-item .store-prijs {
    margin-top: auto;
    font-size: 22px;
    letter-spacing: 0.04em;
}

.store-item button {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 209, 102, 0.85);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 209, 102, 0.34), rgba(232, 154, 44, 0.22));
    color: #fff4d6;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 16px rgba(255, 209, 102, 0.18);
}

.store-item button:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(255, 209, 102, 0.5), rgba(232, 154, 44, 0.34));
    box-shadow: 0 0 24px rgba(255, 209, 102, 0.4);
}

.store-item button.si-heb {
    border-color: rgba(61, 255, 160, 0.5);
    background: rgba(61, 255, 160, 0.08);
    color: var(--green);
    text-shadow: none;
    box-shadow: none;
}

/* Het lint van het pakket met de beste verhouding. */
.store-item.beste {
    border-color: rgba(255, 209, 102, 0.75);
    box-shadow: 0 0 30px rgba(255, 209, 102, 0.22);
}

.si-lint {
    position: absolute;
    top: 14px;
    right: -34px;
    width: 130px;
    padding: 4px 0;
    background: linear-gradient(90deg, #ffd166, #ff9a3c);
    color: #2a1400;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-align: center;
    transform: rotate(38deg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

@media (max-width: 860px) {
    .store-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .store-kop { flex-direction: column; align-items: flex-start; }
    .store-saldo { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .store-item.trap-3 .store-icoon { animation: none; }
    .store-item:hover { transform: none; }
}

/* De knop op je planeet: goud, want het gaat over geld. */
#store-knop {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border: 1px solid rgba(255, 209, 102, 0.55);
    border-radius: 999px;
    background: rgba(24, 16, 2, 0.74);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    cursor: pointer;
}

#store-knop:hover { border-color: var(--amber); box-shadow: 0 0 18px rgba(255, 209, 102, 0.3); }

#store-knop.hidden { display: none; }

#store-knop b {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255, 209, 102, 0.55);
    border-radius: 5px;
    background: rgba(255, 209, 102, 0.14);
    font-size: 11px;
    letter-spacing: 0;
}

/* "Finish now" in de bouwmodus: een eigen regel, in groen (het is geen reclame). */
#bouw .bw-keuze-knoppen .bw-koop {
    flex: 1 0 100%;
    color: var(--green);
    background: rgba(61, 255, 160, 0.08);
    border-color: rgba(61, 255, 160, 0.45);
}

#bouw .bw-koop i { font-style: normal; opacity: 0.6; margin-left: 6px; }

#bouw .bw-koop.hidden { display: none; }

/* ── Het aftellen vóór een aanval (qp-03) ──────────────────────────────────────
   Vervangt de raketvlucht, dus het moet iets zijn (en Nathan, dezelfde dag:
   "de countdown moet nog cooler"). Het beeld zakt weg in een gekleurd vignet
   met scanlijnen en filmbalken, de HUD gaat weg (body.aftellen, onderaan), de
   naam van de planeet ontcijfert zich, eronder wie tegen wie, en in het midden
   een ring die per seconde leegloopt met een getal dat inslaat: een schokgolf,
   een kleurschift, een buitenring die draait en vizierhoeken die elke seconde
   dichterbij komen. Bij nul GO: een flits, een scanlijn over het hele scherm,
   en de HUD start weer op (body.hud-terug). Rood voor de aanvaller, cyaan voor
   de verdediger. */
#aanval-start {
    --as-kleur: #ff3b6b;
    --as-gloed: rgba(255, 59, 107, 0.55);
    --as-stap: 0;
    position: absolute;
    inset: 0;
    z-index: 32;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    pointer-events: none;
    font-family: var(--mono);
    color: #fff;
    text-align: center;
    overflow: hidden;
}

#aanval-start.verdediger { --as-kleur: #31d8ff; --as-gloed: rgba(49, 216, 255, 0.55); }

/* De laatste seconde: alles een tint feller en onrustiger. */
#aanval-start.laatste { --as-gloed: rgba(255, 59, 107, 0.8); }
#aanval-start.verdediger.laatste { --as-gloed: rgba(49, 216, 255, 0.8); }

.as-vignet {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
        radial-gradient(ellipse at center, rgba(4, 6, 16, 0.2) 28%, rgba(4, 6, 16, 0.84) 100%);
    box-shadow: inset 0 0 180px var(--as-gloed);
    animation: as-vignet-in 0.5s ease-out both;
}

#aanval-start.laatste .as-vignet { animation: as-puls 0.5s ease-in-out infinite alternate; }

@keyframes as-vignet-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes as-puls {
    from { box-shadow: inset 0 0 160px var(--as-gloed); }
    to { box-shadow: inset 0 0 260px var(--as-gloed); }
}

/* Filmbalken: zolang het aftelt is dit een filmpje, bij GO weer een spel. */
.as-balk {
    position: absolute;
    left: 0;
    right: 0;
    height: 9vh;
    background: #000;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

.as-balk-boven { top: 0; border-bottom: 1px solid var(--as-gloed); animation: as-balk-boven 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.as-balk-onder { bottom: 0; border-top: 1px solid var(--as-gloed); animation: as-balk-onder 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both; }

@keyframes as-balk-boven { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes as-balk-onder { from { transform: translateY(100%); } to { transform: none; } }

#aanval-start.go .as-balk-boven { animation: as-balk-boven-weg 0.5s 0.15s ease-in both; }
#aanval-start.go .as-balk-onder { animation: as-balk-onder-weg 0.5s 0.15s ease-in both; }

@keyframes as-balk-boven-weg { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes as-balk-onder-weg { from { transform: none; } to { transform: translateY(100%); } }

.as-kop, .as-ring, .as-onder { position: relative; }

.as-kop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.as-kicker {
    font-size: 12px;
    letter-spacing: 0.5em;
    color: var(--as-kleur);
    text-shadow: 0 0 14px var(--as-gloed);
    animation: as-omhoog 0.4s 0.05s ease-out both;
}

.as-titel {
    font-size: 30px;
    letter-spacing: 0.3em;
    text-shadow: 0 0 24px var(--as-gloed);
    white-space: nowrap;
}

/* Wie tegen wie. De twee namen schuiven vanaf hun kant naar het midden. */
.as-vs {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    letter-spacing: 0.22em;
}

.as-vs span {
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.as-wij { animation: as-van-links 0.5s 0.15s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.as-zij { animation: as-van-rechts 0.5s 0.15s cubic-bezier(0.2, 0.9, 0.3, 1) both; opacity: 0.85; }

.as-vs i {
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    padding: 2px 8px;
    border: 1px solid var(--as-kleur);
    border-radius: 4px;
    color: var(--as-kleur);
    text-shadow: 0 0 10px var(--as-gloed);
    animation: as-inslag 0.6s 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes as-van-links { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes as-van-rechts { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 0.85; } }
@keyframes as-omhoog { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.as-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: min(620px, 92vw);
}

.as-chip {
    padding: 3px 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(4, 8, 18, 0.6);
    font-size: 10px;
    letter-spacing: 0.22em;
    opacity: 0.9;
    animation: as-omhoog 0.35s calc(0.35s + var(--i, 0) * 0.08s) ease-out both;
}

/* Quick play stuurde bij: groen naar makkelijker, amber naar zwaarder. */
.as-chip.makkelijk { border-color: var(--green); color: var(--green); }
.as-chip.zwaar { border-color: var(--amber); color: var(--amber); }

.as-ring {
    display: grid;
    place-items: center;
    width: 240px;
    height: 240px;
}

.as-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

/* De buitenring: streepjes die blijven draaien, als een vizier dat zoekt. */
.as-buiten {
    fill: none;
    stroke: var(--as-kleur);
    stroke-width: 1.5;
    stroke-dasharray: 3 9;
    opacity: 0.6;
    transform-origin: 100px 100px;
    animation: as-draai 6s linear infinite;
}

#aanval-start.laatste .as-buiten { animation-duration: 1.6s; opacity: 0.9; }

@keyframes as-draai { to { transform: rotate(360deg); } }

.as-baan {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 4;
}

.as-voort {
    fill: none;
    stroke: var(--as-kleur);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 553;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 8px var(--as-kleur));
}

/* Elke seconde: de ring loopt in die seconde leeg. */
#aanval-start.tik .as-voort { animation: as-leeg 1s linear both; }

@keyframes as-leeg {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 553; }
}

/* Vizierhoeken: vier hoekjes om de ring die elke seconde een stap dichterbij
   komen (--as-stap loopt 0, 1, 2), en bij GO vastklikken. */
.as-hoeken {
    position: absolute;
    inset: calc(-34px + var(--as-stap) * 14px);
    transition: inset 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.as-hoeken i {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 0 solid var(--as-kleur);
    filter: drop-shadow(0 0 6px var(--as-kleur));
}

.as-hoeken i:nth-child(1) { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
.as-hoeken i:nth-child(2) { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; }
.as-hoeken i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; }
.as-hoeken i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; }

#aanval-start.go .as-hoeken { inset: 6px; }
#aanval-start.go .as-hoeken i { border-color: #fff; }

/* De schokgolf: een ring die uit het getal naar buiten slaat. */
.as-schok {
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    border: 3px solid var(--as-kleur);
    opacity: 0;
}

#aanval-start.tik .as-schok { animation: as-schok 0.7s ease-out both; }

@keyframes as-schok {
    0% { transform: scale(0.4); opacity: 0.9; border-width: 6px; }
    100% { transform: scale(2.6); opacity: 0; border-width: 1px; }
}

.as-getal {
    position: relative;
    display: block;
    font-size: 132px;
    line-height: 1;
    font-weight: 700;
    text-shadow: 0 0 20px var(--as-kleur), 0 0 60px var(--as-gloed);
}

#aanval-start.tik .as-getal { animation: as-inslag 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) both; }

/* De inslag, met een kleurschift (rood en cyaan uit elkaar) die dichtklapt. */
@keyframes as-inslag {
    0% {
        transform: scale(2.2);
        opacity: 0;
        filter: blur(8px);
        text-shadow: -14px 0 rgba(255, 40, 90, 0.9), 14px 0 rgba(40, 220, 255, 0.9);
    }
    22% {
        transform: scale(0.92);
        opacity: 1;
        filter: blur(0);
        text-shadow: -5px 0 rgba(255, 40, 90, 0.8), 5px 0 rgba(40, 220, 255, 0.8), 0 0 40px var(--as-gloed);
    }
    36% { transform: scale(1.05); }
    100% {
        transform: scale(1);
        text-shadow: 0 0 20px var(--as-kleur), 0 0 60px var(--as-gloed);
    }
}

.as-onder {
    font-size: 11px;
    letter-spacing: 0.4em;
    opacity: 0.7;
}

#aanval-start.laatste .as-onder { color: var(--as-kleur); opacity: 1; }

/* De witte flits en de scanlijn bij GO: de lijn veegt van boven naar beneden,
   en de HUD start mee op (body.hud-terug). */
.as-flits,
.as-scan {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
}

.as-flits {
    top: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.35) 60%, transparent 100%);
}

.as-scan {
    top: 0;
    height: 3px;
    background: #fff;
    box-shadow: 0 0 24px 6px var(--as-kleur), 0 0 60px 12px var(--as-gloed);
}

#aanval-start.go.tik .as-flits { animation: as-flits 0.45s ease-out both; }
#aanval-start.go.tik .as-scan { animation: as-scan 0.6s 0.05s cubic-bezier(0.5, 0, 0.7, 1) both; }

@keyframes as-flits {
    0% { opacity: 0.85; }
    100% { opacity: 0; }
}

@keyframes as-scan {
    0% { top: 0; opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* GO: de ring vol en fel, het woord breder, en alles lost op. */
#aanval-start.go .as-voort { animation: none; stroke-dashoffset: 0; stroke: #fff; }

#aanval-start.go .as-getal { font-size: 88px; letter-spacing: 0.12em; color: #fff; }

#aanval-start.go.tik { animation: as-weg 1.1s ease-in both; }

#aanval-start.go .as-onder { visibility: hidden; }

#aanval-start.go .as-ring { animation: as-uitdijen 1.1s ease-in both; }

@keyframes as-uitdijen {
    0%, 30% { transform: none; }
    100% { transform: scale(1.6); }
}

@keyframes as-weg {
    0%, 50% { opacity: 1; }
    100% { opacity: 0; }
}

@media (max-width: 760px) {
    .as-ring { width: 170px; height: 170px; }
    .as-getal { font-size: 92px; }
    .as-titel { font-size: 20px; }
}

/* Een liggende telefoon (±920×410): de ring kleiner, anders valt de kop
   onder de filmbalk. */
@media (max-height: 540px) {
    #aanval-start { gap: 10px; }
    .as-balk { height: 6vh; }
    .as-ring { width: 150px; height: 150px; }
    .as-getal { font-size: 84px; }
    #aanval-start.go .as-getal { font-size: 60px; }
    .as-titel { font-size: 20px; }
    .as-hoeken { inset: calc(-24px + var(--as-stap) * 10px); }
    .as-chips { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    #aanval-start *,
    #aanval-start.go.tik { animation: none !important; }
    #aanval-start.go.tik { opacity: 0; transition: opacity 0.6s 0.4s; }
}

/* ── De HUD weg tijdens het aftellen (Nathan 2026-09-29) ─────────────────────
   "de complete HUD en alle knopjes en controls verbergen terwijl de countdown
   loopt. En zorg dat ze weer getoond worden met een animatie."

   Alles in #hud behalve het aftellen zelf en de verbindingsmelding. Niet in de
   bouwmodus: daar zit een verdediger die op DEFEND moet kunnen klikken (en de
   DEFEND-balk staat buiten #hud, die blijft sowieso). `:where` houdt de
   specificiteit laag, zodat de regels per paneel hieronder winnen. */
/* ── De briefing vóór een aanval (Nathan, 2026-10-02) ──────────────────────
   Een filmpje over de basis met de feiten erbij: filmbalken, de naam bovenin,
   links wat je meeneemt (cyaan), rechts wat er staat (rood), twee spelden in
   de wereld, en onderin een balk die de tijd van de server aftelt. De HUD is
   weg (body.briefing); dit is het enige wat er staat. */
#aanval-briefing {
    --ab-rood: #ff3b6b;
    --ab-cyaan: #31d8ff;
    position: absolute;
    inset: 0;
    z-index: 31;
    pointer-events: none;
    font-family: var(--mono);
    color: #fff;
}

#aanval-briefing.hidden { display: none; }

.ab-balk {
    position: absolute;
    left: 0;
    right: 0;
    height: 9vh;
    background: #000;
    transition: transform 0.45s cubic-bezier(.2, .8, .2, 1);
}

.ab-boven { top: 0; }
.ab-onder { bottom: 0; }

#aanval-briefing:not(.weg) .ab-balk { animation: ab-balk-in 0.5s cubic-bezier(.2, .8, .2, 1) both; }
#aanval-briefing.weg .ab-boven { transform: translateY(-100%); }
#aanval-briefing.weg .ab-onder { transform: translateY(100%); }

@keyframes ab-balk-in {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.ab-kop {
    position: absolute;
    top: calc(9vh + 18px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    animation: ab-kop-in 0.6s 0.1s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes ab-kop-in {
    from { opacity: 0; transform: translate(-50%, -14px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.ab-kicker {
    padding: 3px 12px;
    border: 1px solid rgba(255, 59, 107, 0.6);
    border-radius: 999px;
    background: rgba(255, 59, 107, 0.14);
    color: #ffc2d0;
    font-size: 11px;
    letter-spacing: 0.32em;
}

.ab-titel {
    font-size: clamp(26px, 4.4vw, 50px);
    letter-spacing: 0.14em;
    text-shadow: 0 0 26px rgba(255, 59, 107, 0.55), 0 2px 10px rgba(0, 0, 0, 0.8);
}

.ab-sub {
    color: #c6d6e4;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.ab-paneel {
    position: absolute;
    top: 50%;
    width: min(300px, 28vw);
    padding: 14px 16px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(4, 10, 22, 0.82), rgba(4, 10, 22, 0.66));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    transition: opacity 0.35s, transform 0.35s;
}

.ab-wij {
    left: 28px;
    border: 1px solid rgba(49, 216, 255, 0.45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 26px rgba(49, 216, 255, 0.12);
    animation: ab-links-in 0.55s 0.2s cubic-bezier(.2, .8, .2, 1) both;
}

.ab-zij {
    right: 28px;
    border: 1px solid rgba(255, 59, 107, 0.5);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 26px rgba(255, 59, 107, 0.14);
    animation: ab-rechts-in 0.55s 0.3s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes ab-links-in {
    from { opacity: 0; transform: translate(-40px, -50%); }
    to { opacity: 1; transform: translate(0, -50%); }
}

@keyframes ab-rechts-in {
    from { opacity: 0; transform: translate(40px, -50%); }
    to { opacity: 1; transform: translate(0, -50%); }
}

#aanval-briefing.weg .ab-paneel,
#aanval-briefing.weg .ab-kop,
#aanval-briefing.weg .ab-pin,
#aanval-briefing.weg .ab-voet {
    opacity: 0;
    transition: opacity 0.3s;
}

.ab-paneel h3 {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: 0.3em;
}

.ab-wij h3 { color: var(--ab-cyaan); }
.ab-zij h3 { color: #ff8ea8; }

.ab-lijst {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ab-lijst li {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 12px;
    animation: ab-rij-in 0.4s cubic-bezier(.2, .8, .2, 1) both;
}

/* De rijen komen een voor een binnen. */
.ab-lijst li:nth-child(1) { animation-delay: 0.45s; }
.ab-lijst li:nth-child(2) { animation-delay: 0.55s; }
.ab-lijst li:nth-child(3) { animation-delay: 0.65s; }
.ab-lijst li:nth-child(4) { animation-delay: 0.75s; }
.ab-lijst li:nth-child(5) { animation-delay: 0.85s; }
.ab-lijst li:nth-child(n + 6) { animation-delay: 0.95s; }

@keyframes ab-rij-in {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: none; }
}

.ab-lijst li i { font-style: normal; text-align: center; opacity: 0.85; }
.ab-wij .ab-lijst li i { color: var(--ab-cyaan); }
.ab-zij .ab-lijst li i { color: var(--ab-rood); }
.ab-lijst li span { color: #dce9f4; text-transform: capitalize; }
.ab-lijst li b { color: #fff; font-size: 12px; letter-spacing: 0.06em; }
.ab-lijst li.leeg { opacity: 0.6; }
.ab-lijst li.schip b { color: #9fe8ff; }
.ab-lijst li.nexus { background: rgba(255, 59, 107, 0.12); }
.ab-lijst li.nexus b { color: #ffc2d0; font-size: 10px; letter-spacing: 0.2em; }

.ab-inzet {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ab-inzet.hidden { display: none; }
.ab-inzet h3 { color: #ffd166; }

.ab-inzet-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ab-inzet-rij span {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 13px;
}

.ab-inzet-rij .munt { color: #ffd166; }
.ab-inzet-rij .token { color: #c3a6ff; }
.ab-inzet-rij .trofee { color: #ffe7a8; }

/* De spelden in de wereld: waar jij begint (cyaan), en de Nexus (rood). */
.ab-pin {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    will-change: transform;
}

.ab-pin span {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    white-space: nowrap;
}

.ab-pin i {
    width: 2px;
    height: 34px;
}

.ab-pin-jij span { border: 1px solid var(--ab-cyaan); background: rgba(4, 30, 44, 0.85); color: #bff4ff; box-shadow: 0 0 18px rgba(49, 216, 255, 0.45); }
.ab-pin-jij i { background: linear-gradient(180deg, var(--ab-cyaan), transparent); }
.ab-pin-nexus span { border: 1px solid var(--ab-rood); background: rgba(44, 4, 16, 0.85); color: #ffc2d0; box-shadow: 0 0 18px rgba(255, 59, 107, 0.45); }
.ab-pin-nexus i { background: linear-gradient(180deg, var(--ab-rood), transparent); }

.ab-voet {
    position: absolute;
    bottom: calc(9vh + 18px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(560px, 80vw);
    animation: ab-kop-in 0.6s 0.4s cubic-bezier(.2, .8, .2, 1) both;
}

.ab-voet-tekst {
    flex: 0 0 auto;
    color: #ffc2d0;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.ab-voortgang {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.ab-voortgang u {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--ab-cyaan), var(--ab-rood));
    box-shadow: 0 0 10px rgba(255, 59, 107, 0.6);
}

.ab-tijd {
    min-width: 1.4em;
    font-size: 22px;
    text-align: right;
    text-shadow: 0 0 14px rgba(255, 59, 107, 0.6);
}

/* De overdracht aan het aftellen: de balken van de briefing gaan meteen weg
   (die van het aftellen liggen er dan al, zonder in te schuiven), de rest
   lost snel op. Zo zit er geen gat tussen (Nathan, 2026-10-02). */
#aanval-briefing.overdracht .ab-balk { display: none; }

#aanval-briefing.overdracht .ab-paneel,
#aanval-briefing.overdracht .ab-kop,
#aanval-briefing.overdracht .ab-pin,
#aanval-briefing.overdracht .ab-voet {
    transition: opacity 0.18s;
}

#aanval-start.na-briefing .as-balk { animation: none; }

/* De HUD weg zolang de briefing loopt; alleen hij staat er. */
body.briefing #hud > :where(:not(#aanval-briefing, #reconnect)) {
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 860px) {
    .ab-paneel { top: auto; bottom: calc(9vh + 64px); width: calc(50vw - 24px); padding: 10px; }
    .ab-wij { left: 12px; }
    .ab-zij { right: 12px; }
    @keyframes ab-links-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes ab-rechts-in { from { opacity: 0; } to { opacity: 1; } }
    .ab-lijst li { font-size: 11px; padding: 5px 6px; }
    .ab-voet-tekst { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    #aanval-briefing *, #aanval-briefing { animation: none !important; }
}

/* ── Het overzicht tijdens het gevecht (rechts, op halve hoogte) ───────────
   Wat er van de verdediging nog staat, per soort, met een balkje; en je
   ploeg. Rood voor de aanvaller (dat moet weg), cyaan voor de verdediger
   (dat moet blijven staan). */
#aanval-overzicht {
    --ao-kleur: 255, 59, 107;
    position: absolute;
    right: 16px;
    /* Onder de voicestrook (rechts op 38%), niet ertegenaan. */
    bottom: 24%;
    width: 210px;
    padding: 12px 12px 10px;
    border: 1px solid rgba(var(--ao-kleur), 0.4);
    border-radius: 12px;
    background: rgba(4, 10, 22, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: var(--mono);
    pointer-events: none;
}

#aanval-overzicht.verdediger { --ao-kleur: 49, 216, 255; }
#aanval-overzicht.hidden { display: none; }

.ao-kop {
    margin: 0 0 8px;
    color: rgb(var(--ao-kleur));
    font-size: 10px;
    letter-spacing: 0.26em;
}

.ao-kop.hidden { display: none; }
.ao-ploeg-kop { margin-top: 12px; }

.ao-lijst {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ao-lijst li {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 6px 6px;
    font-size: 11px;
}

.ao-lijst li span { color: #d6e6f2; text-transform: capitalize; }
.ao-lijst li b { color: #fff; font-size: 12px; }
.ao-lijst li b i { color: #7f9fb6; font-style: normal; font-size: 10px; }

.ao-lijst li u {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--ao-kleur), 0.9) var(--deel), rgba(255, 255, 255, 0.1) var(--deel));
}

.ao-lijst li.weg { opacity: 0.4; }
.ao-lijst li.weg span { text-decoration: line-through; }

@media (max-width: 860px) {
    #aanval-overzicht { display: none; }
}

body.aftellen:not(.bouwmodus) #hud > :where(:not(#aanval-start, #reconnect)) {
    opacity: 0 !important;
    filter: blur(3px);
    transition: opacity 0.3s ease-out, filter 0.3s ease-out !important;
    pointer-events: none !important;
}

/* Terug: elk paneel start op vanaf zijn eigen rand, met een korte flikkering,
   na elkaar; boven eerst, het midden, dan onderin. Met `translate` en niet met
   `transform`, want veel panelen staan met een transform op hun plek (het
   midden van de onderrand bijvoorbeeld). */
body.hud-terug #hud > :where(:not(#aanval-start, #reconnect)) {
    animation: hud-in-vaag 0.7s 0.25s ease-out both;
}

body.hud-terug #hud > #aanval-hud { animation: hud-in-boven 0.7s 0.1s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
body.hud-terug #hud > .hud-topleft { animation: hud-in-links 0.7s 0.18s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
body.hud-terug #hud > .hud-topright { animation: hud-in-rechts 0.7s 0.24s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
body.hud-terug #hud > #crosshair { animation: hud-in-vizier 0.6s 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
body.hud-terug #hud > #planeet-knoppen,
body.hud-terug #hud > #chat,
body.hud-terug #hud > #killfeed,
body.hud-terug #hud > .help-hint,
body.hud-terug #hud > #touch-controls { animation: hud-in-onder 0.7s 0.36s cubic-bezier(0.2, 0.9, 0.3, 1) both; }

@keyframes hud-in-vaag {
    0% { opacity: 0; }
    30% { opacity: 1; }
    42% { opacity: 0.3; }
    60%, 100% { opacity: 1; }
}

@keyframes hud-in-boven {
    0% { opacity: 0; translate: 0 -40px; filter: brightness(2.2) blur(3px); }
    35% { opacity: 1; }
    48% { opacity: 0.35; }
    65% { opacity: 1; filter: none; }
    100% { opacity: 1; translate: 0 0; filter: none; }
}

@keyframes hud-in-links {
    0% { opacity: 0; translate: -60px 0; filter: brightness(2.2) blur(3px); }
    35% { opacity: 1; }
    48% { opacity: 0.35; }
    65% { opacity: 1; filter: none; }
    100% { opacity: 1; translate: 0 0; filter: none; }
}

@keyframes hud-in-rechts {
    0% { opacity: 0; translate: 60px 0; filter: brightness(2.2) blur(3px); }
    35% { opacity: 1; }
    48% { opacity: 0.35; }
    65% { opacity: 1; filter: none; }
    100% { opacity: 1; translate: 0 0; filter: none; }
}

@keyframes hud-in-onder {
    0% { opacity: 0; translate: 0 40px; filter: brightness(2.2) blur(3px); }
    35% { opacity: 1; }
    48% { opacity: 0.35; }
    65% { opacity: 1; filter: none; }
    100% { opacity: 1; translate: 0 0; filter: none; }
}

@keyframes hud-in-vizier {
    0% { opacity: 0; scale: 2.4; }
    60% { opacity: 1; scale: 0.9; }
    100% { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body.hud-terug #hud > * { animation: hud-in-zacht 0.4s ease-out both !important; }
}

@keyframes hud-in-zacht {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Quick play (qp-01) ───────────────────────────────────────────────────────
   De grote knop rechtsonder op de uitslagkaart: meteen een nieuw potje. Groen,
   want het is de weg vooruit, en met de toets erop (Enter). */
#snel-knop {
    position: absolute;
    right: 28px;
    bottom: 28px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    padding: 16px 26px 16px 18px;
    border: 1px solid var(--green);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(61, 255, 160, 0.22), rgba(61, 255, 160, 0.08));
    box-shadow: 0 0 40px rgba(61, 255, 160, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #eafff4;
    font-family: var(--mono);
    text-align: left;
    cursor: pointer;
    animation: snel-in 0.5s 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

#snel-knop:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(61, 255, 160, 0.34), rgba(61, 255, 160, 0.14));
    box-shadow: 0 0 56px rgba(61, 255, 160, 0.45);
}

#snel-knop:disabled { opacity: 0.6; cursor: default; }

#snel-knop b {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    min-width: 58px;
    height: 44px;
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid rgba(61, 255, 160, 0.6);
    border-bottom-width: 3px;
    background: rgba(61, 255, 160, 0.16);
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* Quick play op je eigen planeet (qp-01): het groen van PLAY AGAIN, zodat je
   hem herkent, en de toets ENTER uitgeschreven. Vooraan in de rij. */
#snel-thuis {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px 7px 8px;
    border: 1px solid var(--green);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(61, 255, 160, 0.24), rgba(2, 20, 12, 0.8));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 22px rgba(61, 255, 160, 0.28);
    color: #eafff4;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    cursor: pointer;
}

#snel-thuis b {
    display: grid;
    place-items: center;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid rgba(61, 255, 160, 0.6);
    background: rgba(61, 255, 160, 0.18);
    color: var(--green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

#snel-thuis:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(61, 255, 160, 0.36), rgba(4, 30, 18, 0.88));
    box-shadow: 0 0 32px rgba(61, 255, 160, 0.42);
}

#snel-thuis:disabled { opacity: 0.6; cursor: default; }

#snel-thuis.hidden { display: none; }

#snel-knop span {
    font-size: 18px;
    letter-spacing: 0.24em;
    color: #fff;
}

#snel-knop i {
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--green);
    opacity: 0.85;
}

#snel-knop.hidden { display: none; }

@keyframes snel-in {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (max-width: 760px) {
    #snel-knop { right: 16px; bottom: 16px; padding: 12px 18px 12px 12px; }
    #snel-knop span { font-size: 14px; }
}

/* Een liggende telefoon (±920×410, Nathan 2026-09-29): rechtsonder lag PLAY
   AGAIN over CONTINUE heen, want de kaart vult dan bijna de hele hoogte. Op een
   laag scherm staat de knop daarom naast de kaart, onderaan gelijk met de
   knoppen erin, en wordt de kaart compacter (en scrollt hij als hij toch niet
   past). */
@media (max-height: 540px) {
    #aanval-kaart:has(#snel-knop:not(.hidden)) {
        grid-template-columns: minmax(0, 440px) auto;
        justify-content: center;
        /* Anders rekt de rij tot de volle hoogte en staat "onderaan" op de
           rand van het scherm in plaats van onder de kaart. */
        align-content: center;
        column-gap: 18px;
    }

    #aanval-kaart .ak-box {
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        padding: 14px 18px;
    }

    #aanval-kaart .ak-kop { font-size: 20px; }
    #aanval-kaart .ak-sub { margin-bottom: 10px; }
    #aanval-kaart .ak-regels { gap: 3px; margin-bottom: 8px; }
    #aanval-kaart .ak-regels b { font-size: 16px; }
    #aanval-kaart .ak-hint { margin-bottom: 10px; }

    #snel-knop {
        position: static;
        align-self: end;
        padding: 12px 18px 12px 12px;
    }

    #snel-knop span { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    #snel-knop { animation: none; }
}

/* ── Clan voice (F14, besluit 57) ──────────────────────────────────────────
   In het clanpaneel: aan/uit, de leden met dempen, volume en melden. In de HUD
   een strook rechts in het midden (daar staat niets: links de missie en de
   chat, rechtsboven de radar, onderin de knoppen) met wie er praat. */
.voice-blok {
    margin: 8px 0 12px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.04);
}
.voice-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.voice-kop .panel-title { margin: 0; }
.voice-leden {
    list-style: none;
    margin: 8px 0 6px;
    padding: 0;
    display: grid;
    gap: 4px;
}
.voice-leden li {
    display: grid;
    grid-template-columns: auto 1fr minmax(60px, 90px) auto auto;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: 1px solid rgba(0, 229, 255, 0.12);
    border-radius: 6px;
    font-size: 12px;
}
.voice-leden li.ik { grid-template-columns: auto 1fr auto; border-color: rgba(61, 255, 160, 0.35); }
.voice-leden li.gedempt .nm { opacity: 0.45; text-decoration: line-through; }
.voice-leden input[type="range"] { width: 100%; accent-color: #00e5ff; }
.voice-leden button.klein,
.voice-instel button.klein { padding: 2px 8px; font-size: 10px; }
.voice-instel {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
}
.voice-mijn { flex: 1 1 auto; }
.voice-open { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* Het microfoontje: grijs, en groen gloeiend zolang iemand praat. */
.voice-leden .mic,
.voice-hud .mic {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    transition: background 0.08s, box-shadow 0.08s;
}
.voice-leden li.praat .mic,
.voice-hud li.praat .mic,
.voice-hud.zendt .vh-kop .mic {
    background: #3dffa0;
    box-shadow: 0 0 8px #3dffa0, 0 0 16px rgba(61, 255, 160, 0.5);
}

.voice-hud {
    position: absolute;
    right: 16px;
    top: 38%;
    min-width: 130px;
    max-width: 200px;
    padding: 6px 10px;
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-radius: 8px;
    background: rgba(4, 14, 24, 0.55);
    font-size: 11px;
    letter-spacing: 0.04em;
    pointer-events: none;
}
.voice-hud .vh-kop {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: #9fe8ff;
}
.voice-hud.zendt .vh-kop { color: #3dffa0; }
.voice-hud ul { list-style: none; margin: 5px 0 0; padding: 0; display: grid; gap: 3px; }
.voice-hud li {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.75;
}
.voice-hud li.praat { opacity: 1; color: #eafff4; }
.voice-hud li.gedempt { opacity: 0.35; text-decoration: line-through; }

/* De TALK-knop op een aanraakscherm: groen zolang je hem ingedrukt houdt. */
.voice-ptt:active { background: rgba(61, 255, 160, 0.35); border-color: #3dffa0; }

/* Het portaal wil geen chat (CrazyGames `disableChat`): ook geen voice. */
body.chat-uit #chat,
body.chat-uit #tc-chat,
body.chat-uit .voice-blok,
body.chat-uit .voice-hud,
body.chat-uit .voice-ptt { display: none !important; }

/* De aan/uit-knop van de voice: dezelfde knop als JOIN ernaast, en groen
   zolang je erin zit (dan zegt hij LEAVE VOICE). */
#voice-knop {
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--panel-line);
    background: rgba(49, 216, 255, 0.08);
    color: var(--cyan);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.14em;
    cursor: pointer;
    white-space: nowrap;
}
#voice-knop:hover { background: rgba(49, 216, 255, 0.2); }
.voice-blok:has(#voice-instel:not(.hidden)) #voice-knop {
    border-color: rgba(61, 255, 160, 0.5);
    color: #3dffa0;
    background: rgba(61, 255, 160, 0.08);
}

/* ══ Het pauzemenu (opnieuw gebouwd, 2026-10-02) ═══════════════════════════
   Nathan: "het pauzemenu ziet er al niet fantastisch uit". Een commandodek:
   links de navigatie met per regel een stand, rechts het seizoen en wat je
   openklikt. Het spel blijft erachter zichtbaar (wazig): je bent niet weg,
   je staat even stil. */
#pause {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vh 2vw;
    background:
        radial-gradient(120% 90% at 30% 20%, rgba(49, 216, 255, 0.10), transparent 60%),
        rgba(2, 5, 14, 0.74);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    animation: pm-achter-in 0.2s ease-out;
}

@keyframes pm-achter-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pm {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    width: min(1240px, 100%);
    height: min(780px, 96vh);
    border: 1px solid rgba(49, 216, 255, 0.3);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 60px rgba(49, 216, 255, 0.08);
    animation: pm-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pm-in {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* ── Links: de navigatie ─────────────────────────────────────────────── */
.pm-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 22px 18px 14px;
    overflow-y: auto;
    border-right: 1px solid rgba(49, 216, 255, 0.16);
    background:
        radial-gradient(140% 60% at 0% 0%, rgba(49, 216, 255, 0.12), transparent 60%),
        linear-gradient(180deg, #0b1828 0%, #070f1c 100%);
}

.pm-kop { padding: 0 6px 6px; text-align: left; }

.pm-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.34em;
}

/* Een lampje dat langzaam klopt: het spel staat stil, maar leeft nog. */
.pm-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
    animation: pm-lamp 1.8s ease-in-out infinite;
}

@keyframes pm-lamp {
    50% { opacity: 0.25; }
}

.pm-kop h2 {
    margin: 6px 0 4px;
    color: #eaf7ff;
    font-family: var(--mono);
    font-size: 22px;
    letter-spacing: 0.22em;
    text-shadow: 0 0 24px rgba(49, 216, 255, 0.45);
}

.pm-wie {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    color: #8fb0c8;
    font-size: 12px;
}

.pm-wie b { color: #dff2ff; font-size: 13px; letter-spacing: 0.04em; }

/* Verder spelen: de knop waar je meestal voor komt, dus de grootste. */
.pm-hervat {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #31d8ff 0%, #3dffa0 100%);
    color: #021018;
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(49, 216, 255, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}

.pm-hervat:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(49, 216, 255, 0.5); }
.pm-hervat .pm-ikoon { font-size: 16px; text-align: center; }
.pm-hervat kbd { background: rgba(2, 16, 24, 0.18); border-color: rgba(2, 16, 24, 0.3); color: #021018; }

.pm-lijst {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pm-knop {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #cfe3f5;
    font-family: var(--mono);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pm-knop .pm-ikoon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(49, 216, 255, 0.1);
    color: var(--cyan);
    font-size: 14px;
}

.pm-knop .pm-lbl { font-size: 12.5px; letter-spacing: 0.22em; }

.pm-knop .pm-stand {
    grid-column: 2;
    grid-row: 2;
    overflow: hidden;
    color: #7f9fb6;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Iets te doen: de stand licht op (een opdracht klaar, een chest). */
.pm-knop .pm-stand.let { color: #ffb34d; }

.pm-knop kbd { grid-column: 3; grid-row: 1 / span 2; }

.pm-knop:hover { background: rgba(49, 216, 255, 0.07); border-color: rgba(49, 216, 255, 0.18); color: #fff; }

/* Het open paneel: een balkje links, en de knop licht op. */
.pm-knop.active {
    background: linear-gradient(90deg, rgba(49, 216, 255, 0.16), rgba(49, 216, 255, 0.04));
    border-color: rgba(49, 216, 255, 0.35);
    color: #fff;
}

.pm-knop.active::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan);
}

.pm-knop.goud .pm-ikoon { background: rgba(255, 209, 102, 0.14); color: var(--amber); }
.pm-knop.goud .pm-lbl { color: #ffe7a8; }
.pm-knop.goud:hover { background: rgba(255, 209, 102, 0.08); border-color: rgba(255, 209, 102, 0.3); }

.pm-knop:disabled { opacity: 0.38; cursor: not-allowed; }
.pm-knop:disabled:hover { background: transparent; border-color: transparent; }

.pm-knop.hidden { display: none; }

#pause kbd,
#voice-menu kbd {
    padding: 2px 6px;
    border: 1px solid rgba(49, 216, 255, 0.35);
    border-radius: 5px;
    background: rgba(49, 216, 255, 0.08);
    color: #9fe8ff;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
}

.pm-voet {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pm-weg {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(255, 59, 107, 0.35);
    border-radius: 10px;
    background: transparent;
    color: #ffb3c6;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.pm-weg:hover { background: rgba(255, 59, 107, 0.14); border-color: rgba(255, 59, 107, 0.6); }

.pm-voet p { margin: 6px 2px 0; color: #6f8aa0; font-size: 10.5px; text-align: center; }

/* ── Rechts: het seizoen en het open paneel ──────────────────────────── */
.pm-inhoud {
    min-height: 0;
    padding: 26px 30px 30px;
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: left;
    color: #cfe3f5;
    background:
        radial-gradient(90% 60% at 100% 0%, rgba(61, 255, 160, 0.06), transparent 60%),
        linear-gradient(160deg, #13243a 0%, #0d1a2c 60%, #0b1524 100%);
}

/* Het seizoen als banner over de volle breedte. */
#pause .seizoen-strip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px 18px;
    max-width: none;
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid rgba(49, 216, 255, 0.28);
    border-radius: 14px;
    background: linear-gradient(100deg, rgba(49, 216, 255, 0.12), rgba(61, 255, 160, 0.06));
}

#pause .seizoen-strip .sz-kop { grid-column: 1; }
#pause .seizoen-strip .sz-baan { grid-column: 2; margin: 0; height: 6px; }
#pause .seizoen-strip .sz-rest { grid-column: 3; font-size: 12px; opacity: 0.85; white-space: nowrap; }
#pause .sz-naam { font-size: 19px; }

.pm-paneelkop {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    color: #eaf7ff;
    font-family: var(--mono);
    font-size: 17px;
    letter-spacing: 0.26em;
}

.pm-paneelkop::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(49, 216, 255, 0.45), transparent);
}

/* De panelen zelf staan niet meer in een doos: het rechtervlak is de doos. */
#pause .team-panel,
#pause .quest-panel,
#pause .war-panel {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

#pause [data-panel]:not(.hidden) { animation: paneel-in 0.26s cubic-bezier(0.16, 1, 0.3, 1); }

/* ── Smal scherm: één kolom, alles scrolt ────────────────────────────── */
@media (max-width: 900px) {
    #pause { padding: 0; align-items: stretch; }
    .pm {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        max-height: 100dvh;
        border-radius: 0;
        overflow-y: auto;
    }
    .pm-nav { overflow: visible; border-right: none; border-bottom: 1px solid rgba(49, 216, 255, 0.16); padding: 18px 14px 14px; }
    .pm-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .pm-knop kbd { display: none; }
    .pm-inhoud { overflow: visible; padding: 18px 14px 24px; }
    #pause .seizoen-strip { grid-template-columns: 1fr; }
    #pause .seizoen-strip .sz-baan,
    #pause .seizoen-strip .sz-rest { grid-column: 1; }
}

/* ══ Clan voice: een eigen menuutje in het spel (2026-10-02) ══════════════
   Opzij, op halve hoogte, en zonder waas: je ziet het spel gewoon door. Het
   spel loopt door; Y of ✕ sluit hem. */
#voice-menu {
    position: fixed;
    right: 24px;
    top: 50%;
    z-index: 40;
    width: min(380px, calc(100vw - 32px));
    max-height: 80vh;
    overflow-y: auto;
    padding: 16px 16px 14px;
    border: 1px solid rgba(0, 229, 255, 0.38);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(8, 20, 34, 0.94), rgba(5, 12, 24, 0.94));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 229, 255, 0.12);
    color: #cfe3f5;
    font-family: var(--mono);
    transform: translateY(-50%);
    animation: vm-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

#voice-menu.hidden { display: none; }

@keyframes vm-in {
    from { opacity: 0; transform: translate(20px, -50%); }
    to { opacity: 1; transform: translate(0, -50%); }
}

.vm-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.vm-kicker { color: #00e5ff; font-size: 10px; letter-spacing: 0.32em; }

.vm-kop h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0.16em;
}

.vm-kop h2 .mic { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
#voice-menu.verbonden .vm-kop h2 .mic { background: #3dffa0; box-shadow: 0 0 10px #3dffa0; }

.vm-dicht {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: transparent;
    color: #9fb6cc;
    font-family: var(--mono);
    cursor: pointer;
}

.vm-dicht:hover { color: #fff; border-color: rgba(0, 229, 255, 0.5); }

#voice-menu .voice-blok { margin: 0; padding: 0; border: none; background: none; }

.vm-uitleg,
.vm-leeg { margin: 0 0 12px; color: #9ab8cc; font-size: 12px; line-height: 1.5; }
.vm-leeg b { color: #fff; }
.vm-uitleg.hidden,
.vm-leeg.hidden { display: none; }

.vm-join {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(61, 255, 160, 0.7);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(61, 255, 160, 0.26), rgba(0, 229, 255, 0.14));
    color: #eafff4;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.26em;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(61, 255, 160, 0.18);
}

.vm-join:hover { box-shadow: 0 0 28px rgba(61, 255, 160, 0.35); }
.vm-join.uit { border-color: rgba(255, 59, 107, 0.5); background: rgba(255, 59, 107, 0.1); color: #ffc2d0; box-shadow: none; }
.vm-join.hidden { display: none; }

#voice-menu .voice-instel {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

#voice-menu .voice-instel.hidden { display: none; }

.vm-klein {
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: transparent;
    color: #cfe3f5;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    cursor: pointer;
}

#voice-menu .voice-leden { margin-top: 12px; }
#voice-menu .voice-leden li { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }

/* De strook in de HUD is de deur naar het menu: aanklikbaar. Zonder voice
   (wel een clan) een klein knopje "Y · VOICE". */
.voice-hud { pointer-events: auto; cursor: pointer; }
.voice-hud:hover { border-color: rgba(0, 229, 255, 0.6); }
.voice-hud.uit { min-width: 0; padding: 5px 9px; opacity: 0.75; }
.voice-hud.uit ul { display: none; }

/* De bediening in het voicemenu: geen standaardknoppen, -vinkjes en
   -schuifjes van de browser (Nathan, 2026-10-02: "niet heel mooi"). */
.vm-klein { transition: border-color 0.15s, background 0.15s, color 0.15s; }
.vm-klein:hover { border-color: rgba(0, 229, 255, 0.6); color: #fff; background: rgba(0, 229, 255, 0.08); }
.vm-demp { border-color: rgba(0, 229, 255, 0.4); color: #9fe8ff; }
.vm-demp.aan { border-color: rgba(255, 209, 102, 0.7); background: rgba(255, 209, 102, 0.12); color: #ffe7a8; }
.vm-meld { border-color: rgba(255, 59, 107, 0.4); color: #ffb3c6; }
.vm-meld:hover { border-color: rgba(255, 59, 107, 0.75); background: rgba(255, 59, 107, 0.12); color: #ffd7e1; }
#voice-stil { border-color: rgba(255, 255, 255, 0.22); }

/* Open mic: een schuifschakelaar. */
#voice-menu .voice-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cfe3f5;
    font-size: 10px;
    letter-spacing: 0.18em;
    cursor: pointer;
    user-select: none;
}

#voice-open {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 34px;
    height: 18px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}

#voice-open::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cfe3f5;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s;
}

#voice-open:checked { background: rgba(61, 255, 160, 0.3); border-color: #3dffa0; }
#voice-open:checked::before { transform: translateX(16px); background: #3dffa0; box-shadow: 0 0 8px #3dffa0; }
#voice-open:focus-visible { outline: 2px solid rgba(0, 229, 255, 0.7); outline-offset: 2px; }

/* Het volume: een dun spoor met een gloeiend knopje. */
#voice-menu .voice-leden input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    background: transparent;
    cursor: pointer;
}

#voice-menu .voice-leden input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.75) var(--vol, 100%), rgba(255, 255, 255, 0.14) var(--vol, 100%));
}

#voice-menu .voice-leden input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

#voice-menu .voice-leden input[type="range"]::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.7);
}

#voice-menu .voice-leden input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: none;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
}

#voice-menu .voice-leden input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
}

#voice-menu .voice-leden li { gap: 10px; }
#voice-menu .voice-mijn { color: #9fe8ff; font-size: 11px; letter-spacing: 0.08em; }

/* ══ De sectorkaart: de WAR ROOM (opnieuw gebouwd, 2026-10-02) ═══════════════
   Een keuzescherm over de melkweg heen. Bovenin wie je bent, in het midden de
   doelwitten als grote kaarten (en de erelijst ernaast), onderin het dok met
   je ploeg en de knop. Rood is aanvallen, violet is AI, goud is wat je wint. */
#zonemap {
    position: fixed;
    inset: 0;
    z-index: 44;
    display: flex;
    /* Doorzichtig in het midden: daar drijft de melkweg. Een vignet aan de
       randen houdt de tekst leesbaar. */
    background:
        radial-gradient(120% 90% at 50% 45%, rgba(2, 5, 14, 0.15) 30%, rgba(2, 5, 14, 0.82) 100%),
        linear-gradient(180deg, rgba(2, 5, 14, 0.55), transparent 22%, transparent 70%, rgba(2, 5, 14, 0.7));
    color: #cfe3f5;
    font-family: var(--mono);
    animation: wr-in 0.3s ease-out;
}

#zonemap.hidden { display: none; }

@keyframes wr-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.wr {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 18px 26px 18px;
    box-sizing: border-box;
}

/* ── De kop ───────────────────────────────────────────────────────────── */
.wr-kop {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.wr-terug {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid rgba(49, 216, 255, 0.4);
    border-radius: 999px;
    background: rgba(4, 12, 24, 0.7);
    color: #bfefff;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.wr-terug:hover { border-color: var(--cyan); background: rgba(49, 216, 255, 0.12); }
.wr-terug.hidden { visibility: hidden; }
.wr-terug:disabled { opacity: 0.5; cursor: wait; }

#zonemap kbd {
    padding: 2px 6px;
    border: 1px solid rgba(49, 216, 255, 0.35);
    border-radius: 5px;
    background: rgba(49, 216, 255, 0.08);
    color: #9fe8ff;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.04em;
}

.wr-titel { text-align: center; }

.wr-kicker {
    color: #ff8ea8;
    font-size: 10.5px;
    letter-spacing: 0.4em;
}

.wr-titel h2 {
    margin: 2px 0 0;
    background: linear-gradient(180deg, #ffffff 0%, #ffd0db 45%, #ff3b6b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--mono);
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: 0.32em;
    filter: drop-shadow(0 0 22px rgba(255, 59, 107, 0.45));
}

.wr-titel p {
    margin: 2px 0 0;
    color: #b9cbe0;
    font-size: 12px;
    letter-spacing: 0.18em;
}

.wr-stand {
    justify-self: end;
    display: flex;
    gap: 8px;
}

.wr-stand span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(4, 12, 24, 0.7);
    font-size: 13px;
}

.wr-stand span i { color: #8fb0c8; font-size: 9.5px; font-style: normal; letter-spacing: 0.16em; }
.wr-stand .r { color: #ffe7a8; border-color: rgba(255, 209, 102, 0.35); }
.wr-stand .m { color: #ffd166; }
.wr-stand .tr { color: #9fe8ff; }

/* ── De balk: filter, zoeken ──────────────────────────────────────────── */
.wr-balk {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.wr-filters {
    display: inline-flex;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(4, 12, 24, 0.72);
}

.wr-filters button {
    padding: 7px 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #9ab8cc;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wr-filters button:hover { color: #fff; }
.wr-filters button.aan { background: linear-gradient(135deg, rgba(255, 59, 107, 0.4), rgba(255, 59, 107, 0.18)); color: #fff; }

.wr-zoek {
    display: inline-flex;
    gap: 6px;
}

.wr-zoek input {
    width: 220px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(4, 12, 24, 0.72);
    color: #fff;
    font-family: var(--mono);
    font-size: 12px;
}

.wr-zoek input:focus { outline: none; border-color: rgba(49, 216, 255, 0.6); }

.wr-zoek button {
    padding: 8px 14px;
    border: 1px solid rgba(49, 216, 255, 0.45);
    border-radius: 999px;
    background: rgba(49, 216, 255, 0.12);
    color: #bfefff;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    cursor: pointer;
}

.wr-teller { color: #9fe8ff; font-size: 11px; letter-spacing: 0.1em; }
.wr-teller:empty { display: none; }

/* ── Het midden: de kaarten en de erelijst ────────────────────────────── */
.wr-midden {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 18px;
    min-height: 0;
}

.wr-doelen {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 0;
}

.wr-doelen[hidden] { display: none; }

.wr-rij {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 56px 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* De randen lopen weg in het donker: er is meer, je ziet het niet allemaal. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}

.wr-rij::-webkit-scrollbar { display: none; }

.wr-leeg {
    width: 100%;
    padding: 40px 20px;
    color: #9ab8cc;
    font-size: 13px;
    text-align: center;
}

.wr-pijl {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(4, 12, 24, 0.85);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: border-color 0.15s, background 0.15s;
}

.wr-pijl:hover { border-color: #ff3b6b; background: rgba(255, 59, 107, 0.18); }
.wr-pijl.links { left: 0; }
.wr-pijl.rechts { right: 0; }

.wr-bereik {
    margin: 0;
    color: #7f9fb6;
    font-size: 11px;
    text-align: center;
}

/* ── Een kaart ────────────────────────────────────────────────────────── */
.wr-kaart {
    --h: 0;
    --rand: 255, 59, 107;
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 232px;
    padding: 16px 14px 14px;
    scroll-snap-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background:
        radial-gradient(120% 70% at 50% 0%, hsla(var(--h), 80%, 55%, 0.18), transparent 60%),
        linear-gradient(180deg, rgba(10, 20, 36, 0.92), rgba(5, 10, 22, 0.94));
    color: #dce9f4;
    font-family: var(--mono);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.wr-kaart.ai { --rand: 185, 139, 255; }

.wr-kaart:hover { transform: translateY(-4px); border-color: rgba(var(--rand), 0.5); }

/* De gekozen kaart: groter, met een rand die gloeit. */
.wr-kaart.gekozen {
    transform: translateY(-6px) scale(1.06);
    border-color: rgba(var(--rand), 0.95);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 34px rgba(var(--rand), 0.38), inset 0 0 0 1px rgba(var(--rand), 0.35);
}

.wr-kaart.wacht { opacity: 0.55; }
.wr-kaart.gekozen.wacht { opacity: 0.85; }

.wr-kaart.vuur {
    background:
        repeating-linear-gradient(135deg, rgba(255, 59, 107, 0.1) 0 10px, transparent 10px 20px),
        linear-gradient(180deg, rgba(10, 20, 36, 0.92), rgba(5, 10, 22, 0.94));
}

.wk-badge {
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #9ab8cc;
    font-size: 9.5px;
    letter-spacing: 0.2em;
}

.wr-kaart.online .wk-badge { background: rgba(255, 59, 107, 0.2); color: #ffc2d0; }
.wr-kaart.ai .wk-badge { background: rgba(185, 139, 255, 0.2); color: #e0ceff; }
.wr-kaart.vuur .wk-badge { background: rgba(255, 59, 107, 0.5); color: #fff; }

/* De planeet: een bol in zijn eigen kleur, met banden die langzaam draaien en
   een gloed eromheen. Geen plaatje: vijf gradiënten, dus geen download. */
.wk-planeet {
    position: relative;
    display: grid;
    place-items: center;
    width: 118px;
    height: 118px;
    margin: 4px 0 2px;
}

.wk-bol {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, hsla(var(--h), 90%, 82%, 0.95) 0%, hsla(var(--h), 80%, 55%, 0.9) 28%, hsla(var(--h), 70%, 28%, 1) 62%, hsla(var(--h), 70%, 10%, 1) 100%);
    box-shadow:
        0 0 36px hsla(var(--h), 90%, 60%, 0.45),
        inset -16px -18px 34px rgba(0, 0, 0, 0.6),
        inset 6px 6px 16px hsla(var(--h), 90%, 85%, 0.25);
    overflow: hidden;
}

.wk-bol::after {
    content: '';
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background: repeating-linear-gradient(170deg, transparent 0 9px, rgba(255, 255, 255, 0.07) 9px 13px, transparent 13px 22px);
    mix-blend-mode: soft-light;
    animation: wk-banden 18s linear infinite;
}

@keyframes wk-banden {
    from { transform: translateX(-12%) rotate(0deg); }
    to { transform: translateX(12%) rotate(0deg); }
}

.wr-kaart.gekozen .wk-bol { box-shadow: 0 0 52px hsla(var(--h), 95%, 62%, 0.65), inset -16px -18px 34px rgba(0, 0, 0, 0.6), inset 6px 6px 16px hsla(var(--h), 90%, 85%, 0.3); }

/* Een clanplaneet heeft een ring. */
.wk-ring {
    position: absolute;
    inset: 40px -8px;
    border: 3px solid hsla(var(--h), 80%, 75%, 0.5);
    border-radius: 50%;
    transform: rotate(-16deg);
    box-shadow: 0 0 12px hsla(var(--h), 90%, 70%, 0.35);
}

/* Het Nexus-level, als een schildje rechtsonder op de planeet. */
.wk-nexus {
    position: absolute;
    right: 2px;
    bottom: 4px;
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    background: rgba(4, 12, 24, 0.9);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.wk-naam {
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wk-sub { color: #8fb0c8; font-size: 10px; letter-spacing: 0.14em; }

/* Hoe zwaar: vier blokjes, groen tot rood. */
.wk-zwaar {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.wk-zwaar i {
    width: 16px;
    height: 6px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
}

.wk-zwaar em { margin-left: 6px; font-size: 10px; font-style: normal; letter-spacing: 0.16em; }
.wk-zwaar.z0 i:nth-child(-n+1) { background: #3dffa0; }
.wk-zwaar.z0 em { color: #3dffa0; }
.wk-zwaar.z1 i:nth-child(-n+2) { background: #31d8ff; }
.wk-zwaar.z1 em { color: #31d8ff; }
.wk-zwaar.z2 i:nth-child(-n+3) { background: #ffb34d; }
.wk-zwaar.z2 em { color: #ffb34d; }
.wk-zwaar.z3 i:nth-child(-n+4) { background: #ff3b6b; }
.wk-zwaar.z3 em { color: #ff3b6b; }

.wk-buit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.wk-buit span { padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 12px; }
.wk-buit .m { color: #ffd166; }
.wk-buit .t { color: #c3a6ff; }
.wk-buit .r { color: #ffe7a8; }

.wk-status { color: #7f9fb6; font-size: 9.5px; letter-spacing: 0.18em; }
.wr-kaart.wacht .wk-status { color: #ffb34d; }
.wr-kaart.vuur .wk-status { color: #ff8ea8; }

/* De erelijst rechts, op de hoogte van de kaarten. */
.wr-midden .zm-erelijst {
    align-self: center;
    width: auto;
    max-height: 100%;
    overflow-y: auto;
}

/* ── Het dok ──────────────────────────────────────────────────────────── */
.wr-dok {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 1.3fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 59, 107, 0.35);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(10, 18, 32, 0.92), rgba(5, 10, 22, 0.95));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 59, 107, 0.1);
}

.wr-dok.leeg { border-color: rgba(255, 255, 255, 0.1); box-shadow: none; }

.wr-doel { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wr-doel-kicker { color: #ff8ea8; font-size: 9.5px; letter-spacing: 0.32em; }

#wr-doel-naam {
    overflow: hidden;
    color: #fff;
    font-size: 20px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#wr-doel-info { color: #9ab8cc; font-size: 11px; line-height: 1.45; }

/* De ploeg in het dok: een regel per soort met min en plus. */
.wr-ploeg { min-width: 0; }
.wr-ploeg.hidden { display: none; }

.wr-ploeg .zp-kop {
    margin-bottom: 6px;
    color: #9fe8ff;
    font-size: 10px;
    letter-spacing: 0.26em;
}

.wr-ploeg .zp-plek { margin-left: 8px; color: #fff; letter-spacing: 0.08em; }

.wr-ploeg .zp-rijen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wr-ploeg .zp-rij {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border: 1px solid rgba(49, 216, 255, 0.25);
    border-radius: 999px;
    background: rgba(49, 216, 255, 0.06);
    font-size: 11.5px;
}

.wr-ploeg .zp-naam { color: #dce9f4; text-transform: capitalize; }
.wr-ploeg .zp-rij b { min-width: 1.4em; color: #fff; text-align: center; }
.wr-ploeg .zp-van { color: #7f9fb6; font-size: 10px; }

.wr-ploeg .zp-rij button {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(49, 216, 255, 0.4);
    border-radius: 50%;
    background: rgba(4, 12, 24, 0.8);
    color: #bfefff;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.wr-ploeg .zp-rij button:hover { border-color: var(--cyan); background: rgba(49, 216, 255, 0.16); }

.wr-ploeg .zp-thuis,
.wr-ploeg .zp-leeg { margin-top: 6px; color: #7f9fb6; font-size: 10.5px; }

.wr-acties {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 10px;
}

.wr-acties .error { grid-column: 1 / -1; margin: 0; min-height: 0; color: #ff9fb8; font-size: 11px; text-align: right; }
.wr-acties .error:empty { display: none; }

.wr-verken {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid rgba(49, 216, 255, 0.45);
    border-radius: 14px;
    background: rgba(49, 216, 255, 0.08);
    color: #bfefff;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    cursor: pointer;
}

.wr-verken:hover { border-color: var(--cyan); background: rgba(49, 216, 255, 0.16); }
.wr-verken.hidden { display: none; }

/* De knop: rood, groot, met de naam van wie je aanvalt erop. */
.wr-aanval {
    min-width: 230px;
    max-width: 340px;
    padding: 16px 24px;
    overflow: hidden;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff3b6b 0%, #ff7a3c 100%);
    color: #fff;
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.22em;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255, 59, 107, 0.4);
    transition: transform 0.15s, box-shadow 0.15s;
}

.wr-aanval:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255, 59, 107, 0.6); }

.wr-aanval:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: #8fa6b8;
    box-shadow: none;
    cursor: not-allowed;
}

/* ── Smal scherm ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .wr-midden { grid-template-columns: minmax(0, 1fr); }
    .wr-midden .zm-erelijst { display: none; }
}

@media (max-width: 760px) {
    .wr { padding: 12px 12px 12px; gap: 8px; overflow-y: auto; }
    .wr-kop { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
    .wr-terug, .wr-stand { justify-self: center; }
    .wr-zoek input { width: 150px; }
    .wr-rij { padding: 26px 16px 20px; -webkit-mask-image: none; mask-image: none; }
    .wr-pijl { display: none; }
    .wr-kaart { width: 200px; }
    .wr-dok { grid-template-columns: 1fr; gap: 10px; }
    .wr-acties { grid-template-columns: 1fr 2fr; }
    .wr-aanval { min-width: 0; max-width: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .wk-bol::after { animation: none; }
    .wr-kaart, .wr-kaart.gekozen { transition: none; }
}