/*
 * rnguard.css — de schermen van RN-Guard.
 *
 * Zelfde visuele taal als de game-HUD en players.php (neon-cyaan op bijna-zwart),
 * met één afwijking: RN-Guard gebruikt WIT-ZILVER als eigen kleur en geen cyaan.
 * Dat is opzet. Alles in het spel is cyaan, dus een cyaan melding is "de game die
 * iets zegt". RN-Guard staat er náást — hij is een instantie, niet een HUD-paneel.
 * Rood komt er alleen bij een permaban aan te pas.
 *
 * Wordt geladen door game.html; guard.js bouwt de elementen zelf, dus deze
 * classes hoeven in geen enkel HTML-bestand voor te komen.
 */

.rng-warn,
.rng-block {
    --rng-steel: #e8eef7;
    --rng-steel-dim: #9fb0c8;
    --rng-line: rgba(232, 238, 247, 0.22);
    --rng-glass: rgba(8, 12, 24, 0.92);
    --rng-red: #ff3b5c;
    --rng-amber: #ffb45c;
    --rng-font: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --rng-mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

/* ── Waarschuwing: schuift in vanaf links, laat het spel doorgaan ───────────── */

.rng-warn {
    position: fixed;
    left: 0;
    bottom: 6vh;
    z-index: 900;
    display: flex;
    align-items: flex-end;
    gap: 0;
    max-width: min(680px, 92vw);
    font-family: var(--rng-font);

    /* Niet in de weg zitten: alleen de ballon zelf vangt klikken. Zonder dit
       kun je niet meer sturen zolang de waarschuwing staat, en dan is een
       berisping alsnog een straf. */
    pointer-events: none;

    transform: translateX(-110%);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease;
}

.rng-warn.rng-in {
    transform: translateX(0);
    opacity: 1;
}

.rng-avatar {
    flex: 0 0 auto;
    width: clamp(74px, 12vw, 132px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    filter: drop-shadow(0 0 18px rgba(232, 238, 247, 0.28));
}

.rng-avatar-img {
    width: 100%;
    height: auto;
    display: block;
}

/* De mech in de kop van het blokkadescherm. Kleiner dan bij de waarschuwing,
   want daar staat hij naast een ballon en hier naast twee regels tekst. */
.rng-avatar-sm {
    width: 64px;
    align-self: center;
    filter: drop-shadow(0 0 12px rgba(232, 238, 247, 0.24));
}

/* En op een telefoon in landschap valt hij weg — daar is de hoogte het probleem
   en niet het karakter. Zelfde regel als bij de waarschuwing, hieronder. */

.rng-bubble {
    pointer-events: auto;
    position: relative;
    margin-left: -6px;
    margin-bottom: clamp(10px, 4vh, 42px);
    min-width: min(340px, 70vw);
    padding: 0.85rem 1rem 0.7rem;
    background: var(--rng-glass);
    border: 1px solid var(--rng-line);
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 18px 48px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--rng-steel);
}

/* Het puntje van de tekstballon, naar het poppetje toe. */
.rng-bubble::before {
    content: "";
    position: absolute;
    left: -9px;
    bottom: 22px;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-right-color: var(--rng-line);
}

.rng-bubble-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}

.rng-bubble-head b {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--rng-steel);
}

.rng-tag {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    padding: 0.16rem 0.42rem;
    border: 1px solid var(--rng-amber);
    color: var(--rng-amber);
    border-radius: 2px;
    white-space: nowrap;
}

.rng-bubble-body {
    margin: 0 0 0.7rem;
    font-size: 0.95rem;
    line-height: 1.55;
    /* min-height zodat de ballon niet meegroeit terwijl de tekst uitgetypt
       wordt — dat zou de knop eronder laten dansen. */
    min-height: 2.9em;
    white-space: pre-wrap;
}

.rng-bubble-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

/* ── Blokkade: neemt alles over ─────────────────────────────────────────────── */

.rng-block {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    font-family: var(--rng-font);
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(232, 238, 247, 0.07), transparent 60%),
        rgba(2, 3, 8, 0.96);
    opacity: 0;
    transition: opacity 0.3s ease;

    /* Scrollen als het niet past. Op een telefoon in landschap is er 375 px
       hoogte en het paneel is er 357 plus randen — dan liep de onderkant, met
       daarin BEZWAAR MAKEN, onder het scherm door zónder dat er iets te scrollen
       viel. Een blokkadescherm waarvan de bezwaarknop onbereikbaar is, is de
       ergste versie van dit scherm. `place-items: center` blijft werken zolang
       het wél past; `safe center` voorkomt dat de bovenkant wegvalt zodra het dat
       niet doet. */
    overflow-y: auto;
    place-items: safe center;
    overscroll-behavior: contain;
}

.rng-block.rng-in { opacity: 1; }

.rng-panel {
    width: min(560px, 100%);
    padding: 1.6rem 1.7rem 1.5rem;
    background: var(--rng-glass);
    border: 1px solid var(--rng-line);
    border-top: 2px solid var(--rng-steel);
    border-radius: 4px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
    color: var(--rng-steel);
    transform: translateY(10px);
    transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

.rng-block.rng-in .rng-panel { transform: translateY(0); }

/* Een permaban is de enige die rood mag zijn. Bij een kick van vijf minuten is
   rood theater, en theater maakt de rest ook ongeloofwaardig. */
.rng-panel.rng-permaban { border-top-color: var(--rng-red); }
.rng-panel.rng-permaban .rng-tag { border-color: var(--rng-red); color: var(--rng-red); }
.rng-panel.rng-kick { border-top-color: var(--rng-amber); }

.rng-panel-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rng-line);
}

.rng-titles {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    align-items: flex-start;
}

.rng-brand {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.rng-panel h1 {
    margin: 1.1rem 0 0.6rem;
    font-size: clamp(1.1rem, 3.4vw, 1.42rem);
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
}

.rng-msg {
    margin: 0 0 1.1rem;
    font-size: 0.98rem;
    line-height: 1.62;
    color: var(--rng-steel);
    white-space: pre-wrap;
}

.rng-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0 0 1.1rem;
    font-size: 0.85rem;
}

.rng-facts dt {
    color: var(--rng-steel-dim);
    letter-spacing: 0.04em;
}

.rng-facts dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.rng-count {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.2rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--rng-line);
    border-radius: 3px;
    background: rgba(232, 238, 247, 0.04);
}

.rng-count-lbl {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rng-steel-dim);
}

.rng-count-val {
    font-family: var(--rng-mono);
    font-size: 1.14rem;
    font-variant-numeric: tabular-nums;
}

.rng-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.rng-note {
    margin: 1rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--rng-steel-dim);
}

/* ── Onderdelen die in beide schermen voorkomen ─────────────────────────────── */

.rng-mark {
    flex: 0 0 auto;
    width: 42px;
    height: 46px;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #f2f6fc, #93a3bb);
    /* Zeshoek: het silhouet van het pantser, zonder dat er een plaatje voor
       nodig is. Dit is ook de terugval als assets/rnguard/avatar.png ontbreekt. */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

    /* De letters staan op dít element en niet alleen op een <span> erbinnen.
       Op vier van de zes plekken staat "RN" er direct in — appeal.php,
       replay.php (twee keer) en de in-game console — en daar erfde de tekst de
       kleur van eromheen: bijna-wit op een bijna-witte zeshoek. Op de
       bezwaarpagina, de enige RN-Guard-pagina die een speler ooit ziet, was het
       merk dus onleesbaar. Een <span> erbinnen erft dit nu gewoon. */
    font-family: var(--rng-font);
    font-weight: 800;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    color: #0a0e18;
}

.rng-avatar .rng-mark {
    width: 64px;
    height: 70px;
}

.rng-case {
    font-family: var(--rng-mono);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    color: var(--rng-steel-dim);
    background: none;
    border: 1px dashed var(--rng-line);
    border-radius: 2px;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.rng-case:hover,
.rng-case.rng-copied {
    color: var(--rng-steel);
    border-color: var(--rng-steel);
    border-style: solid;
}

.rng-ok,
.rng-retry,
.rng-appeal {
    font-family: var(--rng-font);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 0.55rem 1rem;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--rng-steel);
    background: var(--rng-steel);
    color: #0a0e18;
    transition: filter 0.15s ease, opacity 0.15s ease;
}

.rng-ok:hover,
.rng-retry:hover,
.rng-appeal:hover { filter: brightness(1.12); }

.rng-appeal {
    background: none;
    color: var(--rng-steel);
}

.rng-retry:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    filter: none;
}

.rng-warn :focus-visible,
.rng-block :focus-visible {
    outline: 2px solid var(--rng-amber);
    outline-offset: 3px;
}

/* ── Telefoon ──────────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
    .rng-warn {
        bottom: auto;
        top: 8vh;
        max-width: 96vw;
    }

    .rng-avatar { width: 62px; }

    .rng-bubble {
        min-width: 0;
        margin-bottom: 0;
        font-size: 0.9rem;
    }

    .rng-bubble-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .rng-panel { padding: 1.2rem 1.1rem; }

    .rng-actions > * { flex: 1 1 100%; text-align: center; }
}

/* Vingers, geen muis. De knoppen waren 40 px hoog en de zaakcode 32; dat mikt
   prima met een cursor en niet met een duim. 44 px is de ondergrens die zowel
   Apple als Google noemen, en het gaat hier om de twee knoppen waar iemand
   tijdens een blokkade op moet kunnen tikken — inclusief de zaakcode, want die
   kopieert hij om hem in het bezwaarformulier te zetten.

   Op `pointer: coarse` en niet op schermbreedte: een telefoon in landschap is
   812 px breed en heeft nog steeds dezelfde duim. */
@media (pointer: coarse) {
    .rng-ok,
    .rng-retry,
    .rng-appeal,
    .rng-case-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Landschapsmodus op een telefoon: nauwelijks hoogte, dus het poppetje eruit en
   alleen de ballon laten staan. */
@media (max-height: 460px) {
    .rng-avatar { display: none; }

    .rng-bubble::before { display: none; }

    .rng-bubble-body { min-height: 0; }

    .rng-panel { padding: 0.9rem 1rem; }

    .rng-panel h1 { margin: 0.6rem 0 0.4rem; font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    .rng-warn,
    .rng-block,
    .rng-panel {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   De moderatieconsole in de game (fase 6, assets/js3d/mod.js)

   Staat hier en niet in game.html omdat dit RN-Guard-opmaak is, net als de
   waarschuwing en de blokkadeschermen: één bestand voor het gezicht van de
   guard, zodat het overal hetzelfde oogt.

   Bewust smaller dan de webconsole en met kleinere regels: dit paneel staat
   over een lopend spel, en wie het opent wil erlangs kunnen kijken.
   ═══════════════════════════════════════════════════════════════════════════ */

.rng-mod {
    position: fixed;
    inset: 6vh 4vw auto 4vw;
    max-height: 84vh;
    display: none;
    grid-template-rows: auto auto auto 1fr;
    background: linear-gradient(180deg, rgba(10, 16, 36, 0.97), rgba(7, 11, 30, 0.97));
    border: 1px solid rgba(55, 247, 255, 0.42);
    border-radius: 14px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
    color: #eaf2ff;
    font: 13px/1.5 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    z-index: 9200;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.rng-mod.rng-mod-open { display: grid; }

.rng-mod header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(55, 247, 255, 0.16);
}
.rng-mod header strong { letter-spacing: 0.14em; font-size: 12px; text-transform: uppercase; }
.rng-mod header .zone { color: #37f7ff; font-size: 12px; }
.rng-mod header .spec {
    margin-left: auto;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    color: #ffb45c;
}
.rng-mod header .spec[hidden] { display: none; }

/* 2FA staat uit. Rood, want dit is geen instelling om te vergeten. */
.rng-mod header .nofa {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border: 1px solid #ff3b5c;
    color: #ff3b5c;
    background: rgba(255, 59, 92, 0.12);
    border-radius: 3px;
}
.rng-mod header .nofa[hidden] { display: none; }

/* De uitweg uit de kijkmodus.
   Hij staat in de kop en niet alleen bij de speler, want daar staat ook dát je
   meekijkt — en dat is de plek waar je hem zoekt als je eruit wil. Zonder deze
   knop was de enige uitweg de F5. */
.rng-mod header .specstop {
    margin-left: 8px;
    background: rgba(255, 180, 92, 0.14);
    border: 1px solid #ffb45c;
    color: #ffb45c;
    font: inherit;
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 999px;
    cursor: pointer;
}
.rng-mod header .specstop:hover { background: rgba(255, 180, 92, 0.28); }

/* Bij de speler waar je naar kijkt staat KIJK als STOP, in dezelfde kleur als de
   regel in de kop — zodat de twee bij elkaar horen. */
.rng-mod .acts button.aan {
    border-color: #ffb45c;
    color: #ffb45c;
    background: rgba(255, 180, 92, 0.12);
}
.rng-mod header .x {
    background: none;
    border: 0;
    color: #6c7aa8;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
}
.rng-mod header .x:hover { color: #ff3b5c; }

.rng-mod nav { display: flex; border-bottom: 1px solid rgba(55, 247, 255, 0.16); }
.rng-mod nav button {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #6c7aa8;
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.1em;
    padding: 8px 16px;
    cursor: pointer;
}
.rng-mod nav button.on { color: #37f7ff; border-bottom-color: #37f7ff; }

.rng-mod .note {
    padding: 7px 12px;
    background: rgba(255, 180, 92, 0.1);
    border-bottom: 1px solid rgba(255, 180, 92, 0.3);
    font-size: 12.5px;
}
.rng-mod .note[hidden] { display: none; }

.rng-mod .body { overflow: auto; padding: 10px 12px; }
.rng-mod .body p { margin: 0 0 8px; }
.rng-mod .body h3 { margin: 10px 0 4px; font-size: 12px; letter-spacing: 0.1em; color: #37f7ff; }
.rng-mod .body ul { margin: 0 0 10px; padding-left: 18px; }
.rng-mod .body li { margin-bottom: 3px; }
.rng-mod .empty { color: #6c7aa8; }
.rng-mod .dim { color: #6c7aa8; font-size: 11px; }

.rng-mod table { width: 100%; border-collapse: collapse; }
.rng-mod th {
    text-align: left;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6c7aa8;
    font-weight: 500;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(55, 247, 255, 0.16);
}
.rng-mod td { padding: 5px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: middle; }
.rng-mod td.num { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; white-space: nowrap; }
.rng-mod tr.dead { opacity: 0.55; }

.rng-mod .tag {
    display: inline-block;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border: 1px solid #ffb45c;
    color: #ffb45c;
    border-radius: 999px;
    margin-left: 3px;
}
.rng-mod .tag.bad { border-color: #ff3b5c; color: #ff3b5c; }

.rng-mod .acts { white-space: nowrap; text-align: right; }
.rng-mod .acts button,
.rng-mod .body button {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(55, 247, 255, 0.22);
    color: #eaf2ff;
    font: inherit;
    font-size: 10.5px;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    margin-left: 3px;
    border-radius: 6px;
    cursor: pointer;
}
.rng-mod .acts button:hover,
.rng-mod .body button:hover { border-color: #37f7ff; color: #37f7ff; }
.rng-mod .body button.quiet { border-color: rgba(255, 255, 255, 0.14); color: #a6b3df; }

.rng-mod form.auth { display: grid; gap: 8px; max-width: 340px; }
.rng-mod form.punish { display: grid; gap: 8px; max-width: 520px; }
.rng-mod form label { display: grid; gap: 3px; font-size: 12px; }
.rng-mod form .row { display: flex; gap: 6px; }
.rng-mod input, .rng-mod textarea {
    background: rgba(2, 2, 10, 0.6);
    border: 1px solid rgba(55, 247, 255, 0.22);
    border-radius: 7px;
    color: #eaf2ff;
    font: inherit;
    padding: 6px 9px;
}
.rng-mod textarea { min-height: 62px; resize: vertical; }
.rng-mod input:focus, .rng-mod textarea:focus { outline: none; border-color: #37f7ff; }

/* ── Meldingen van spelers (/report) ──────────────────────────────────────────
   Het getal op het tabblad is roze en rond, net als de tellers in mod.php: "3"
   is iets anders dan "er is iets", en het verschil bepaalt of je nu kijkt. */
.rng-mod nav .cnt {
    display: inline-block;
    min-width: 17px;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ff2f8f;
    color: #fff;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    animation: rngCntPuls 1.8s ease-in-out infinite;
}
.rng-mod nav .cnt[hidden] { display: none; }
@keyframes rngCntPuls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 47, 143, 0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 47, 143, 0); }
}

.rng-mod .tag.live { border-color: #35ff95; color: #35ff95; }
.rng-mod table.reports td.reden { max-width: 340px; }
.rng-mod .body button.hoofd { border-color: #37f7ff; color: #37f7ff; }

.rng-mod .report-kop {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.rng-mod .report-kop h3 { margin: 0; font-size: 15px; letter-spacing: 0.04em; color: #eaf2ff; }
.rng-mod .report-kop .acts { margin-left: auto; }

.rng-mod .report-kaart {
    border: 1px solid rgba(255, 47, 143, 0.35);
    border-left: 3px solid #ff2f8f;
    border-radius: 0 8px 8px 0;
    padding: 7px 10px;
    margin: 8px 0;
    background: rgba(255, 47, 143, 0.05);
}
.rng-mod .report-kaart.dicht { opacity: 0.6; border-color: rgba(255, 255, 255, 0.12); border-left-color: #6c7aa8; background: none; }
.rng-mod .report-kaart .rk-kop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.rng-mod .report-kaart .rk-kop button { margin-left: auto; }
/* Wat de speler zelf schreef, als citaat: het zijn zijn woorden en niet de onze. */
.rng-mod .report-kaart blockquote {
    margin: 5px 0;
    padding: 4px 9px;
    border-left: 2px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.03);
    white-space: pre-wrap;
}
.rng-mod .report-chat {
    list-style: none;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    font-size: 12px;
    max-height: 210px;
    overflow: auto;
}
.rng-mod .report-chat li { padding: 1px 4px; margin: 0 !important; border-radius: 3px; }
.rng-mod .report-chat .t { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: #6c7aa8; margin-right: 4px; }
/* De regels van de aangeklaagde zelf: daar gaat de melding meestal over. */
.rng-mod .report-chat li.doel { background: rgba(255, 180, 92, 0.12); }
.rng-mod .report-chat li.doel b { color: #ffb45c; }
.rng-mod .report-chat li.geblokt { text-decoration: line-through; text-decoration-color: rgba(255, 59, 92, 0.6); }
.rng-mod .report-chat li.geblokt .tag { text-decoration: none; }

.rng-mod .report-sluit { display: flex; gap: 6px; margin-top: 10px; }
.rng-mod .report-sluit input { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
    .rng-mod nav .cnt { animation: none; }
}

@media (max-width: 900px) {
    .rng-mod { inset: 2vh 2vw auto 2vw; max-height: 92vh; font-size: 12px; }
    .rng-mod .acts { text-align: left; white-space: normal; }
}