/*
 * Hub – Dossierstijl, bovenop de Cryptex Crusaders-huisstijl (cryptex.css).
 * Beschrijving en regels: docs/dossierstijl.md (huisstijl: docs/huisstijl-cryptex-crusaders.md).
 *
 * Kern: de pagina is het bureau van de detective (donker hout onder een bureaulamp);
 * alles wat je leest of invult is papier (vellen, systeemkaarten, dossiermappen, notities).
 * Kleuren lopen via --fg / --fg-soft / --fg-accent: goud op hout, inkt op papier.
 */
:root {
    /* Huisstijl */
    --cc-black: #000000;
    --cc-gold: #dbae6c;
    --cc-gold-soft: rgba(219, 174, 108, .65);
    --cc-logo: #8c6a3e;
    --cc-red: #7a1008;
    --cc-red-hover: #680e07;
    --cc-red-bright: #e22413;
    --cc-green: #3a8232;
    --cc-green-dark: #2f5323;
    --cc-surface: #1a1a1a;
    --cc-line: #5a5a5a;
    --cc-text-light: #f2f2f2;
    --cc-radius: .25rem;
    --cc-radius-lg: 10px;

    /* Dossierstijl: materialen */
    --wood: #241509;
    --wood-dark: #160c05;
    --wood-edge: #3a2515;
    --paper: #ead4a6;
    --paper-light: #f3e4c2;
    --paper-dark: #c9a46a;
    --paper-edge: #9c7a47;
    --note: #f1e29a;
    --field: #f8eed6;
    --ink: #2b1a0e;
    --ink-soft: rgba(43, 26, 14, .7);
    --ink-line: rgba(43, 26, 14, .22);
    --stamp: #8f160c;
    --stamp-green: #2f6b28;
    --shadow-paper: 0 2px 0 var(--paper-edge), 0 10px 18px rgba(0, 0, 0, .5);

    /* Context: standaard "op hout" */
    --fg: var(--cc-gold);
    --fg-soft: var(--cc-gold-soft);
    --fg-accent: var(--cc-gold);
    --fg-line: rgba(219, 174, 108, .25);
    --fg-contrast: var(--wood-dark);
    --danger: #ff6b5c;
}

body { background: var(--cc-black); min-height: 100vh; }

/* =====================================================================
 * Het bureau: het hoofdpaneel van elke pagina
 * ===================================================================== */
.copy {
    position: relative;
    padding: 1.75rem 1.25rem 2rem;
    border: 1px solid var(--wood-edge);
    border-radius: var(--cc-radius-lg);
    background:
        radial-gradient(ellipse at 18% 0%, rgba(255, 196, 110, .2), transparent 55%),
        repeating-linear-gradient(176deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 9px),
        repeating-linear-gradient(4deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 14px),
        linear-gradient(180deg, var(--wood), var(--wood-dark));
    box-shadow: inset 0 0 50px rgba(0, 0, 0, .7), 0 14px 34px rgba(0, 0, 0, .65);
    color: var(--fg);
}
.copy h1, .copy h2, .copy h3, .copy h4, .copy h5, .copy h6 { color: var(--fg); text-align: center; }
.copy > h1, .copy > .page-head h1 { text-shadow: 0 0 18px rgba(255, 196, 110, .25); }
.copy h2 { font-size: 1.45rem; margin-top: 2rem; }
.lead-muted { color: var(--fg-soft); text-align: center; }
.text-gold { color: var(--fg-accent) !important; }
.text-soft { color: var(--fg-soft) !important; }
.muted { color: var(--fg-soft); }
.copy a:not(.btn):not(.dossier):not(.choice):not(.sort-link):not(.party-card) { color: var(--fg-accent); }

/* =====================================================================
 * Papier: alles wat je leest of invult
 * ===================================================================== */
.paper, .panel, .summary, .game-stage, .code-form, .filter-bar,
.table-responsive, .leaderboard, .item, .choice__body, .dossier:not(.dossier--new), .debug-link {
    --fg: var(--ink);
    --fg-soft: var(--ink-soft);
    --fg-accent: var(--stamp);
    --fg-line: var(--ink-line);
    --fg-contrast: var(--paper-light);
    --danger: var(--stamp);
    color: var(--ink);
}

/* Vel: groot stuk papier (panelen, samenvattingen, formulieren, tabellen) */
.paper, .panel, .summary, .game-stage, .code-form, .filter-bar, .table-responsive, .leaderboard {
    position: relative;
    background: linear-gradient(170deg, var(--paper-light), var(--paper) 60%, #e0c690);
    border-radius: 3px;
    box-shadow: var(--shadow-paper);
    padding: 1.25rem 1.25rem;
    margin: 1rem 0 1.5rem;
}
.panel h2, .summary h2 { margin-top: 0; font-size: 1.25rem; }
/* Papier op papier: geen tweede vel, alleen de inhoud */
.panel .table-responsive, .panel .summary, .summary .table-responsive { background: none; box-shadow: none; padding: 0; margin: .5rem 0; }
.copy code { color: var(--fg-accent); }
.panel--gold { box-shadow: var(--shadow-paper), inset 0 3px 0 var(--stamp); }

/* Tabblad op een vel of dossier (bijv. de code) */
.sheet__tab, .dossier__tab {
    position: absolute;
    top: -.95rem;
    left: 0;
    padding: .15rem .8rem;
    border-radius: 6px 6px 0 0;
    background: var(--paper-light);
    color: var(--ink);
    font-family: "American Typewriter", serif;
    font-size: .8rem;
    letter-spacing: .15em;
}
.game-stage { margin-top: 2rem; }

/* Etiket in typemachineletters (bijv. DOSSIER, NIEUWE ZAAK) */
.label-typed, .dossier__label {
    display: block;
    font-family: "American Typewriter", serif;
    font-size: .75rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--fg-soft);
}

/* Notitie: meldingen als geplakt briefje */
.hub-alert, .debug-link {
    position: relative;
    margin: .5rem auto 1.25rem;
    max-width: 34rem;
    padding: .9rem 1rem .8rem;
    background: linear-gradient(175deg, #f6eab0, var(--note));
    color: var(--ink);
    border-radius: 2px;
    box-shadow: 0 8px 14px rgba(0, 0, 0, .45);
    transform: rotate(-.6deg);
    text-align: center;
}
.hub-alert::before, .debug-link::before { /* plakband */
    content: "";
    position: absolute;
    top: -.55rem;
    left: 50%;
    width: 5rem;
    height: 1.1rem;
    transform: translateX(-50%) rotate(2deg);
    background: rgba(255, 255, 255, .35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.hub-alert--error { border-left: 5px solid var(--stamp); color: var(--stamp); }
.hub-alert--info { transform: rotate(.5deg); }
/* Waarschuwing die je niet mag missen (bijv. codes die nog niet bruikbaar zijn) */
.hub-alert--warning {
    max-width: none;
    margin: 1.5rem 0 .25rem;
    border-left: 5px solid var(--stamp);
    text-align: left;
    transform: rotate(-.3deg);
}
.hub-alert__title { display: block; margin-bottom: .25rem; color: var(--stamp); font-family: "American Typewriter", serif; font-size: 1.05rem; }
.hub-alert a, .debug-link a { color: var(--stamp) !important; }
.debug-link { word-break: break-all; font-size: .85rem; text-align: left; }
.invalid-feedback { color: var(--danger); text-align: left; }

/* Lege plek op het bureau (uitnodiging, nog niets) */
.empty-state {
    border: 2px dashed var(--fg-line);
    border-radius: 6px;
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--fg-soft);
    background: rgba(0, 0, 0, .2);
    margin: 1rem 0;
}

/* =====================================================================
 * Formulieren: ingevulde velden op papier
 * ===================================================================== */
.form-label, .form-check-label { color: var(--fg); }
.paper .form-label, .panel .form-label, .code-form .form-label, .filter-bar .form-label {
    font-family: "American Typewriter", serif;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.form-text { color: var(--fg-soft) !important; }
.form-control, .form-select {
    background-color: var(--field);
    color: var(--ink);
    border: 1px solid var(--ink-line);
    border-bottom: 2px solid rgba(43, 26, 14, .45);
    border-radius: 2px;
}
.form-control::placeholder { color: rgba(43, 26, 14, .45); }
.form-control:focus, .form-select:focus {
    background-color: #fffaf0;
    color: var(--ink);
    border-color: var(--stamp);
    box-shadow: 0 0 0 2px rgba(143, 22, 12, .2);
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--stamp); }
.form-check-input { background-color: var(--field); border-color: rgba(43, 26, 14, .5); }
.form-check-input:checked { background-color: var(--stamp); border-color: var(--stamp); }
.form-control:disabled, .form-select:disabled,
fieldset:disabled .form-control, fieldset:disabled .form-select {
    background-color: rgba(43, 26, 14, .06);
    border-color: var(--ink-line);
    color: var(--ink-soft);
}
fieldset:disabled .form-control::placeholder { color: transparent; }
fieldset:disabled .btn { opacity: .4; }
fieldset:disabled .form-label { opacity: .6; }

.code-form { max-width: 420px; margin-left: auto; margin-right: auto; }
.code-input {
    text-transform: uppercase;
    letter-spacing: .25em;
    text-align: center;
    font-family: "American Typewriter", serif;
    font-size: 1.4rem;
}
.generated-codes {
    width: 100%;
    font-family: "American Typewriter", serif;
    letter-spacing: .1em;
    background: var(--field);
    color: var(--ink);
    border: 1px solid var(--ink-line);
    border-radius: 2px;
    padding: .5rem .75rem;
}

/* =====================================================================
 * Knoppen
 * ===================================================================== */
.btn { font-family: "American Typewriter", serif; }
.btn-primary {
    --bs-btn-color: #f6ead0;
    --bs-btn-bg: var(--cc-red);
    --bs-btn-border-color: var(--cc-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cc-red-hover);
    --bs-btn-hover-border-color: var(--cc-red-hover);
    letter-spacing: .03em;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.btn-outline-gold { color: var(--fg); border: 1px solid var(--fg); background: transparent; }
.btn-outline-gold:hover, .btn-outline-gold:focus-visible { color: var(--fg-contrast); background: var(--fg); border-color: var(--fg); }
.btn-link-danger { color: var(--danger); background: none; border: 0; padding: 0; }
.btn-game { font-size: 1.25rem; padding: .75rem 2rem; }
.actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.back-link { display: inline-block; margin-top: 1.5rem; color: var(--fg-soft) !important; }

/* =====================================================================
 * Stempels: status en labels
 * ===================================================================== */
.status, .badge-gold {
    display: inline-block;
    padding: .05rem .5rem;
    border: 2px solid currentColor;
    border-radius: 3px;
    font-family: "American Typewriter", serif;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(-2deg);
    color: var(--fg-accent);
}
.badge-gold { margin-left: .35rem; font-size: .65rem; border-width: 1px; }
.status--gestart { color: var(--fg-accent); }
.status--afgerond { color: var(--cc-green); }
.paper .status--afgerond, .panel .status--afgerond, .game-stage .status--afgerond, .summary .status--afgerond, .table-responsive .status--afgerond { color: var(--stamp-green); }
.status--beschikbaar { color: var(--fg-soft); }
.game-stage .status--afgerond { font-size: 1rem; padding: .15rem .8rem; border-style: double; border-width: 4px; transform: rotate(-6deg); }
.code-prefix {
    display: inline-block;
    min-width: 2.2em;
    padding: 2px 8px;
    border: 2px solid var(--fg-accent);
    border-radius: 3px;
    color: var(--fg-accent);
    font-family: "American Typewriter", serif;
    font-weight: 700;
    text-align: center;
}

/* =====================================================================
 * Systeemkaarten: lijsten (groepen, leden, mysteries in de lijstweergave)
 * ===================================================================== */
.item-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .65rem; }
.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem .75rem;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--paper-light), var(--paper));
    border-top: 3px solid rgba(143, 22, 12, .55); /* rode lijn van een systeemkaart */
    box-shadow: 0 6px 12px rgba(0, 0, 0, .45);
}
.item__title { font-family: "American Typewriter", serif; color: var(--ink); display: block; font-size: 1.05rem; }
.item__meta { color: var(--ink-soft); font-size: .9rem; display: block; }
.item .btn { white-space: nowrap; }
.group-heading { font-family: "American Typewriter", serif; color: var(--fg); margin: 1.25rem 0 .5rem; font-size: 1.1rem; }
.group-heading i { margin-right: .35rem; }

/* =====================================================================
 * Dossiermappen: keuzes en mysteries
 * ===================================================================== */
.choice-list { display: grid; gap: 1.5rem 1.25rem; margin: 1.75rem 0 1.5rem; }
.choice-list--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .choice-list--2 { grid-template-columns: 1fr; } }
.choice { position: relative; display: block; cursor: pointer; margin: .6rem 0 0; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__body, .dossier {
    position: relative;
    display: block;
    height: 100%;
    padding: 1.15rem 1.1rem 1rem;
    border-radius: 0 6px 6px 6px;
    background: linear-gradient(160deg, #e2c48e, var(--paper-dark) 70%, #b8925a);
    box-shadow: var(--shadow-paper);
    transform: rotate(-1.2deg);
    transition: transform .15s ease, box-shadow .15s ease;
}
.choice-list > :nth-child(even) .choice__body { transform: rotate(1deg); }
.choice__body::before { /* tabblad van de map */
    content: "";
    position: absolute;
    top: -.75rem;
    left: 0;
    width: 4.5rem;
    height: .8rem;
    border-radius: 6px 6px 0 0;
    background: #e2c48e;
}
.choice__title { display: block; font-family: "American Typewriter", serif; font-size: 1.25rem; color: var(--ink); }
.choice__icon { font-size: 1.75rem; color: var(--ink); display: block; margin-bottom: .25rem; opacity: .8; }
.choice__meta { display: block; color: var(--ink-soft); font-size: .95rem; }
.choice__go { display: inline-block; margin-top: .6rem; color: var(--stamp); font-weight: 700; }
.choice:hover .choice__body,
.choice--button:hover .choice__body,
.choice--button:focus-visible .choice__body,
.choice input:checked + .choice__body,
.choice--button[aria-pressed="true"] .choice__body {
    transform: rotate(0) translateY(-3px);
    box-shadow: 0 2px 0 var(--paper-edge), 0 16px 26px rgba(0, 0, 0, .6), 0 0 0 2px var(--cc-gold);
}
.choice input:focus-visible + .choice__body { outline: 2px solid var(--cc-red-bright); outline-offset: 3px; }
.choice--button { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; }
.choice--button:focus { outline: none; }
a.choice--button { display: block; text-decoration: none; }
.choice__body--new {
    background: rgba(0, 0, 0, .25);
    border: 2px dashed rgba(219, 174, 108, .5);
    border-radius: 6px;
    box-shadow: none;
    transform: none !important;
    --fg: var(--cc-gold);
}
.choice__body--new::before { display: none; }
.choice__body--new .choice__title, .choice__body--new .choice__meta { color: var(--cc-gold); }
.choice__body--new .choice__meta { opacity: .75; }

/* Dashboard: dossiers op het bureau */
.desk { margin: 1rem 0 .5rem; }
.desk__surface { display: grid; gap: 1.5rem 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .desk__surface { grid-template-columns: 1fr 1fr; } }
.dossier {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 11rem;
    margin-top: .9rem;
    padding-top: 1.25rem;
    color: var(--ink);
    text-decoration: none;
    transform: rotate(-1.5deg);
}
.desk__surface > .dossier:nth-child(even) { transform: rotate(1.2deg); }
.dossier:hover, .dossier:focus-visible {
    color: var(--ink);
    transform: rotate(0) translateY(-4px);
    box-shadow: 0 2px 0 var(--paper-edge), 0 18px 28px rgba(0, 0, 0, .65), 0 0 0 2px var(--cc-gold);
    outline: none;
}
.dossier__tab { background: #e2c48e; }
.dossier__clip {
    position: absolute;
    top: -.6rem;
    right: 1.25rem;
    width: .9rem;
    height: 2.4rem;
    border: 2px solid #9aa0a6;
    border-radius: .5rem;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
}
.dossier__label { color: var(--ink-soft); }
.dossier__name { font-family: "American Typewriter", serif; font-size: 1.35rem; line-height: 1.25; }
.dossier__meta { font-size: .95rem; }
.dossier__go { margin-top: auto; padding-top: .5rem; border-top: 1px dashed rgba(43, 26, 14, .35); font-weight: 700; color: var(--stamp); }
.dossier__stamp {
    position: absolute;
    right: .7rem;
    bottom: 3.1rem; /* in de lege ruimte boven de stippellijn */
    padding: .05rem .45rem;
    font-size: .8rem;
    border: 3px double var(--stamp);
    border-radius: 4px;
    color: var(--stamp);
    font-family: "American Typewriter", serif;
    letter-spacing: .15em;
    text-transform: uppercase;
    transform: rotate(-12deg);
    opacity: .85;
}
.dossier--solved { filter: saturate(.75) brightness(.92); }
.dossier--new {
    grid-column: 1 / -1;
    min-height: 0;
    margin-top: 0;
    padding: .9rem 1rem;
    gap: .15rem;
    background: rgba(0, 0, 0, .25);
    border: 2px dashed rgba(219, 174, 108, .5);
    border-radius: 6px;
    color: var(--cc-gold);
    box-shadow: none;
    transform: none !important;
    justify-content: center;
    text-align: center;
}
.dossier--new .dossier__label { color: var(--cc-gold-soft); }
.dossier--new .dossier__name { font-size: 1.15rem; }
.dossier--new:hover, .dossier--new:focus-visible { color: var(--cc-gold); border-color: var(--cc-gold); box-shadow: none; }
.desk__surface--single > .dossier:not(.dossier--new) { grid-column: 1 / -1; min-height: 9.5rem; }

/* =====================================================================
 * Overige onderdelen
 * ===================================================================== */
/* Stappen bij het claimen: getypte etiketten op het bureau */
.stepper { display: flex; justify-content: center; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; flex-wrap: wrap; }
.stepper li {
    font-family: "American Typewriter", serif;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(219, 174, 108, .4);
}
.stepper li + li::before { content: "›"; margin-right: .5rem; color: rgba(219, 174, 108, .4); }
.stepper li.is-done { color: var(--cc-gold-soft); }
.stepper li.is-current { color: var(--cc-gold); border-bottom: 2px solid var(--cc-red); }

/* Samenvatting en bekende gegevens */
.summary dl, .known-data { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.summary dt, .known-data dt { color: var(--fg-soft); font-weight: 400; }
.summary dd, .known-data dd { margin: 0; color: var(--fg); }

/* Pagina van een mysterie: het geopende dossier */
.game-stage { text-align: center; padding: 2rem 1.25rem 1.5rem; }
.game-stage h3 { font-size: 1.4rem; }
.game-stage > .bi { display: none; } /* het tabblad met de code is het herkenningsteken */
.game-intro { max-width: 34rem; margin: 1rem auto 1.5rem; text-align: left; line-height: 1.65; }
.game-intro p:last-child { margin-bottom: 0; }

/* Leaderboard: getypte ranglijst */
.leaderboard { list-style: none; counter-reset: rank; padding: .75rem 1rem; }
.leaderboard li {
    counter-increment: rank;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .55rem .5rem;
    border-bottom: 1px dashed var(--ink-line);
}
.leaderboard li:last-child { border-bottom: 0; }
.leaderboard li::before {
    content: counter(rank);
    font-family: "American Typewriter", serif;
    font-size: 1.2rem;
    width: 2rem;
    text-align: center;
    color: var(--ink-soft);
}
.leaderboard li:nth-child(1)::before { color: var(--stamp); font-size: 1.5rem; }
.leaderboard__name { flex: 1; }
.leaderboard__score { font-family: "American Typewriter", serif; color: var(--ink); }
.leaderboard li.is-me { background: linear-gradient(transparent 15%, rgba(255, 226, 70, .55) 15%, rgba(255, 226, 70, .55) 85%, transparent 85%); } /* markeerstift */

/* Groepsbeheer */
.member-form { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: .5rem; align-items: start; }
@media (max-width: 520px) { .member-form { grid-template-columns: 1fr; } }
.member-row { border-bottom: 1px dashed var(--fg-line); padding: .75rem 0; }
.member-row:last-child { border-bottom: 0; }
.member-row__locked { color: var(--fg-soft); font-size: .85rem; }

/* Account: actieve sessies als systeemkaarten, details als kaartje boven de pagina */
.session-list { margin-top: 1rem; }
.session { justify-content: flex-start; }
.session__icon { font-size: 1.5rem; color: var(--ink-soft); flex: none; }
.session__text { flex: 1; min-width: 0; }
.session--current { box-shadow: 0 6px 12px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(143, 22, 12, .35); }
.session__info {
    flex: none;
    padding: .1rem .3rem;
    border: 0;
    background: none;
    color: var(--ink-soft);
    font-size: 1.15rem;
    line-height: 1;
}
.session__info:hover, .session__info:focus-visible { color: var(--stamp); }
.session-card {
    width: min(30rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border: 0;
    border-top: 3px solid rgba(143, 22, 12, .55);
    border-radius: 3px;
    background: linear-gradient(170deg, var(--paper-light), var(--paper) 60%, #e0c690);
    box-shadow: 0 2px 0 var(--paper-edge), 0 18px 40px rgba(0, 0, 0, .7);
    color: var(--ink);
    text-align: left;
}
.session-card::backdrop { background: rgba(0, 0, 0, .55); }
.session-card dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: .75rem 0 1rem; }
.session-card dt { font-weight: 400; color: var(--ink-soft); }
.session-card dd { margin: 0; font-family: "American Typewriter", serif; overflow-wrap: anywhere; }
.session-card__agent { font-size: .85rem; line-height: 1.4; }
@media (max-width: 480px) {
    .session { flex-wrap: wrap; }
    .session__text { flex-basis: calc(100% - 2.5rem); }
    .session-card dl { grid-template-columns: 1fr; gap: .1rem; }
    .session-card dd { margin-bottom: .5rem; }
}

/* =====================================================================
 * Navigatie (boven het bureau, huisstijl)
 * ===================================================================== */
.hub-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--cc-red);
    margin-bottom: 1.5rem;
}
.hub-nav__brand { display: block; line-height: 0; }
.hub-brand { display: block; width: fit-content; margin: 1rem auto 0; }

/* A/B-test achtergrond, variant b: het logo enorm groot achter alles, middelpunt in de hoek
   linksonder zodat precies een kwart in beeld is (tegenhanger van de kaars rechtsonder). */
.page-bg-logo {
    position: fixed;
    z-index: -1;
    left: 0;
    bottom: 0;
    width: clamp(1100px, 220vmin, 2600px);
    transform: translate(-50%, 50%);
    opacity: .02;
    pointer-events: none;
}
.page-bg-logo .cc-logo { width: 100%; }
.hub-nav__links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; justify-content: flex-end; }
.hub-nav__links a, .hub-nav__links button { color: var(--cc-gold); background: none; border: 0; padding: 0; font: inherit; text-decoration: none; }
.hub-nav__links a:hover, .hub-nav__links button:hover, .hub-nav__links a.active { color: var(--cc-red-bright); }

/* =====================================================================
 * Beheer: archiefkast met tabbladen, rapporten op papier
 * ===================================================================== */
.container.container-admin { max-width: 1200px; }
.container-admin .copy h1, .container-admin .copy h2 { text-align: left; }
.container-admin .copy h2 { font-size: 1.25rem; margin-top: 1.5rem; }

/* Tabbladen van mappen, steken boven het bureau uit */
.admin-tabs { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 .75rem; margin-bottom: -1px; position: relative; z-index: 1; }
.admin-tabs a {
    padding: .45rem .9rem .35rem;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #b8925a, #9c7a47);
    color: var(--ink);
    text-decoration: none;
    font-family: "American Typewriter", serif;
    font-size: .9rem;
    box-shadow: inset 0 -6px 8px -6px rgba(0, 0, 0, .5);
}
.admin-tabs a:hover { background: linear-gradient(180deg, #d4b07a, #b8925a); color: var(--ink); }
.admin-tabs a.active { background: var(--paper-light); color: var(--ink); box-shadow: none; padding-bottom: .5rem; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.stat-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.result-count { color: var(--fg-soft); font-size: .9rem; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .5rem;
    padding: .1rem .6rem;
    border: 1px solid var(--fg-accent);
    border-radius: 999px;
    color: var(--fg-accent) !important;
    font-size: .8rem;
    text-decoration: none;
}
.filter-chip:hover, .filter-chip:focus-visible { background: var(--fg-accent); color: var(--fg-contrast) !important; }
.filter-chip .bi { font-size: .7rem; }

.filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .5rem;
    align-items: end;
    padding: .85rem 1rem;
}
.filter-bar__actions { display: flex; gap: .5rem; align-items: center; }

/* Tabellen als getypt rapport op papier */
.table-responsive { padding: .5rem 1rem; }
.table-responsive .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--ink-line);
    --bs-table-hover-bg: rgba(43, 26, 14, .06);
    --bs-table-hover-color: var(--ink);
    --bs-table-accent-bg: transparent;
    margin-bottom: 0;
}
.admin-table { font-size: .95rem; }
.admin-table th {
    white-space: nowrap;
    font-weight: 400;
    font-family: "American Typewriter", serif;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.admin-table td { vertical-align: middle; color: var(--ink); }
.admin-table .code-cell { font-family: "American Typewriter", serif; letter-spacing: .05em; white-space: nowrap; }
.admin-table .comment-cell { max-width: 280px; }
.sort-link { color: var(--ink-soft); text-decoration: none; }
.sort-link:hover { color: var(--ink); text-decoration: none; }
.sort-link.is-active { color: var(--stamp); }

.generator { display: grid; grid-template-columns: 1.2fr 1.2fr .6fr 1.6fr auto; gap: .5rem; align-items: end; }
@media (max-width: 900px) { .generator { grid-template-columns: 1fr 1fr; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field-rows { display: grid; gap: .5rem; margin-bottom: .75rem; }
.field-row { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: .5rem; align-items: start; }
.field-row .btn-link-danger { padding-top: .35rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.field-key { font-size: .75rem; color: var(--fg-soft); }

.pagination { margin-bottom: 0; }
.pagination .page-link { background: transparent; border-color: var(--fg-line); color: var(--fg); font-family: "American Typewriter", serif; }
.pagination .page-item.active .page-link { background: var(--cc-red); border-color: var(--cc-red); color: #f6ead0; }
.pagination .page-item.disabled .page-link { background: transparent; color: var(--fg-soft); opacity: .5; }

@media (prefers-reduced-motion: reduce) {
    .choice__body, .dossier, .choice-list > :nth-child(even) .choice__body,
    .desk__surface > .dossier:nth-child(even), .hub-alert, .status, .badge-gold { transform: none !important; transition: none; }
}

/* =====================================================================
 * Gezelschappen: polaroids op een prikbord
 * ===================================================================== */
.polaroid {
    display: block;
    flex-shrink: 0;
    width: 170px;
    height: auto;
    box-shadow: 0 10px 18px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .15) inset;
    transform: rotate(-3deg);
    transition: transform .15s ease;
}
/* Overzicht: prikbord met polaroids, elk met een getypt etiket; de hele kaart is de link */
.party-board {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 .5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.25rem;
    align-items: start;
}
@media (max-width: 480px) { .party-board { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; } }
.party-card {
    position: relative;
    display: block;
    text-align: center;
    text-decoration: none;
    transform: rotate(-1.5deg);
    transition: transform .15s ease;
}
.party-board > li:nth-child(3n+2) .party-card { transform: rotate(1.2deg); }
.party-board > li:nth-child(3n) .party-card { transform: rotate(-.6deg); }
.party-card__photo {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 10px 18px rgba(0, 0, 0, .6);
    transition: box-shadow .15s ease;
}
.party-card__pin { /* punaise */
    position: absolute;
    z-index: 2;
    top: -.45rem;
    left: 50%;
    width: .95rem;
    height: .95rem;
    margin-left: -.475rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e86a5c, var(--cc-red) 55%, #3d0804);
    box-shadow: 1px 3px 4px rgba(0, 0, 0, .6);
}
.party-card__label { /* getypt etiket, net onder de foto geplakt (het onderschrift blijft leesbaar) */
    position: relative;
    display: block;
    width: 96%;
    margin: -.15rem auto 0;
    padding: .4rem .5rem .35rem;
    background: linear-gradient(180deg, var(--paper-light), var(--paper));
    border-top: 2px solid rgba(143, 22, 12, .55);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .45);
    color: var(--ink);
    transform: rotate(1deg);
}
.party-card__name {
    display: block;
    font-family: "American Typewriter", serif;
    font-size: .98rem;
    line-height: 1.2;
    overflow-wrap: break-word;
    hyphens: auto;
}
.party-card__meta { display: block; margin-top: .1rem; font-size: .75rem; color: var(--ink-soft); }
.party-card__stamp {
    position: absolute;
    top: 1rem;
    right: .35rem;
    padding: .05rem .4rem;
    border: 3px double var(--stamp);
    border-radius: 4px;
    background: rgba(243, 228, 194, .75);
    color: var(--stamp);
    font-family: "American Typewriter", serif;
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    transform: rotate(9deg);
}
.party-card:hover, .party-card:focus-visible { transform: rotate(0) translateY(-4px) !important; outline: none; }
.party-card:hover .party-card__photo,
.party-card:focus-visible .party-card__photo { box-shadow: 0 18px 28px rgba(0, 0, 0, .7), 0 0 0 2px var(--cc-gold); }
.party-card--new { /* lege plek op het prikbord */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    aspect-ratio: 170 / 205;
    border: 2px dashed rgba(219, 174, 108, .5);
    border-radius: 3px;
    background: rgba(0, 0, 0, .25);
    color: var(--cc-gold-soft);
    transform: none !important;
}
.party-card--new .bi { font-size: 1.75rem; }
.party-card--new .party-card__name { font-size: .95rem; }
.party-card--new:hover, .party-card--new:focus-visible { color: var(--cc-gold); border-color: var(--cc-gold); }

/* Detailpagina: kop met de polaroid van het gezelschap */
.party-head { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.copy .party-head h1 { margin: 0 0 .25rem; }
.party-head .lead-muted { margin: 0; }
.polaroid--head { width: 150px; transform: rotate(-4deg); }
@media (prefers-reduced-motion: reduce) { .polaroid, .party-card, .party-card__label { transform: none !important; transition: none; } }

/* =====================================================================
 * Live-overzicht, sessielog en statistieken (Game Protocol 1.1)
 * ===================================================================== */
.text-stamp { color: var(--stamp) !important; }
.text-success-ink { color: var(--stamp-green) !important; }

/* Knipperend lampje: er wordt nu gespeeld */
.live-dot {
    display: inline-block;
    width: .6em;
    height: .6em;
    margin-right: .15em;
    border-radius: 50%;
    background: var(--cc-red-bright);
    box-shadow: 0 0 0 0 rgba(226, 36, 19, .6);
    vertical-align: middle;
    animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(226, 36, 19, .6); }
    70% { box-shadow: 0 0 0 .55em rgba(226, 36, 19, 0); }
    100% { box-shadow: 0 0 0 0 rgba(226, 36, 19, 0); }
}

.live-board { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 34rem), 1fr)); align-items: start; }
.live-card { margin: 0; }
.live-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.live-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; min-width: 0; }
.live-card__title .code-cell { font-family: "American Typewriter", serif; letter-spacing: .05em; color: var(--stamp) !important; }
.live-card__score { text-align: right; white-space: nowrap; }
.live-card__points { font-family: "American Typewriter", serif; font-size: 1.6rem; line-height: 1; color: var(--ink); }
.live-card__who { margin: .4rem 0 .75rem; font-size: .92rem; }
.live-card__now { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem 0; border-top: 1px dashed var(--ink-line); border-bottom: 1px dashed var(--ink-line); }
.live-card__now .label-typed { margin-bottom: .1rem; }
.live-card__now > div:first-child { flex: 1 1 14rem; min-width: 0; }
.live-card__now > div:last-child { flex: 0 0 auto; }
.live-card__step { font-family: "American Typewriter", serif; margin-right: .35rem; }
.live-card__details { margin-top: .6rem; }
.live-card__details > summary, .stats-table__wrong summary { cursor: pointer; color: var(--stamp); font-size: .9rem; }

/* Voortgangsbalk: één blokje per stap */
/* Voortgang: per fase een blok met naam, gescheiden door een verticale lijn; per stap een streepje met uitleg. */
.live-progress { display: flex; margin-top: .75rem; }
.live-progress__phase { flex: var(--steps, 1) 1 0; min-width: 0; display: flex; flex-direction: column; gap: .2rem; padding: 0 .6rem; border-left: 2px solid rgba(43, 26, 14, .2); }
.live-progress__phase:first-child { padding-left: 0; border-left: 0; }
.live-progress__phase:last-child { padding-right: 0; }
.live-progress__phase-name { overflow: hidden; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; opacity: .6; }
.live-progress__steps { display: flex; gap: 3px; }
.live-progress__step { position: relative; flex: 1; height: .5rem; border-radius: 2px; background: rgba(43, 26, 14, .12); cursor: help; }
.live-progress__step:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }
.live-progress__tip { position: absolute; z-index: 20; bottom: calc(100% + .55rem); left: 50%; display: flex; flex-direction: column; gap: .1rem; width: max-content; max-width: 15rem; padding: .5rem .7rem; border-radius: .35rem; background: #2b1a0e; color: #f6ead0; font-size: .78rem; line-height: 1.35; text-align: left; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .3); opacity: 0; visibility: hidden; transform: translate(-50%, .25rem); transition: opacity .12s ease, transform .12s ease, visibility .12s; pointer-events: none; }
.live-progress__tip::after { content: ''; position: absolute; top: 100%; left: 50%; border: .35rem solid transparent; border-top-color: #2b1a0e; transform: translateX(-50%); }
.live-progress__step:hover .live-progress__tip, .live-progress__step:focus-visible .live-progress__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* Aan de randen van de kaart lijnt de uitleg naar binnen uit. */
.live-progress__phase:first-child .live-progress__step:first-child .live-progress__tip { left: 0; transform: translateY(.25rem); }
.live-progress__phase:last-child .live-progress__step:last-child .live-progress__tip { left: auto; right: 0; transform: translateY(.25rem); }
.live-progress__phase:first-child .live-progress__step:first-child:is(:hover, :focus-visible) .live-progress__tip,
.live-progress__phase:last-child .live-progress__step:last-child:is(:hover, :focus-visible) .live-progress__tip { transform: none; }
.live-progress__phase:first-child .live-progress__step:first-child .live-progress__tip::after { left: .6rem; transform: none; }
.live-progress__phase:last-child .live-progress__step:last-child .live-progress__tip::after { left: auto; right: .6rem; transform: none; }
.live-progress__tip strong { font-size: .85rem; color: #fff; }
.live-progress__tip-phase { font-size: .7rem; letter-spacing: .03em; text-transform: uppercase; opacity: .65; }
.live-progress__tip-state { margin-top: .2rem; }
.live-progress__tip-state.is-done { color: #9fdba8; font-weight: 700; }
.live-progress__tip-state.is-busy { color: #f3b19f; }
.live-progress__tip-attempts { opacity: .8; }
.live-progress__tip-last { font-size: .72rem; opacity: .75; }
/* Inactieve sessies: aparte groep, gedimd; bij aanwijzen weer volledig. */
.live-group-title { display: flex; align-items: baseline; gap: .5rem; margin: 2rem 0 .75rem; font-size: 1.1rem; }
.live-card--inactive { opacity: .62; filter: grayscale(.7); transition: opacity .15s ease, filter .15s ease; }
.live-card--inactive:hover, .live-card--inactive:focus-within { opacity: 1; filter: none; }
.status--inactief { color: var(--fg-soft); }
.live-progress__step.is-touched { background: rgba(143, 22, 12, .45); }
.live-progress__step.is-done { background: var(--stamp-green); }
.live-progress__step.is-current { outline: 2px solid var(--stamp); outline-offset: 1px; }

/* Stappentabel en log */
.step-table { padding: 0; margin: .5rem 0 0; background: none; box-shadow: none; }
.step-table__phase th { padding-top: .9rem; font-family: "American Typewriter", serif; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); background: none; }
.step-table tr.is-current td { background: rgba(255, 226, 70, .25); }
.step-table__value { max-width: 14rem; overflow-wrap: anywhere; font-family: "American Typewriter", serif; }
.action-list { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .85rem; max-height: 22rem; overflow-y: auto; }
.action-list li { padding: .2rem 0 .2rem .6rem; border-left: 3px solid var(--ink-line); }
.action-list li + li { margin-top: .15rem; }
.action-list li.is-wrong { border-left-color: var(--stamp); }
.action-list li.is-right { border-left-color: var(--stamp-green); }
.action-list time { font-family: "American Typewriter", serif; color: var(--ink-soft); margin-right: .35rem; }
.action-list__label { font-weight: 600; }
.action-list__value { margin-left: .35rem; padding: 0 .3rem; background: rgba(43, 26, 14, .07); border-radius: 2px; color: var(--ink) !important; overflow-wrap: anywhere; }

/* Statistieken */
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin: 1rem 0 1.5rem; }
.stat-card {
    --fg: var(--ink); --fg-soft: var(--ink-soft);
    display: flex; flex-direction: column; gap: .15rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(170deg, var(--paper-light), var(--paper));
    border-top: 3px solid rgba(143, 22, 12, .55);
    border-radius: 3px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .45);
    color: var(--ink);
}
.stat-card__value { font-family: "American Typewriter", serif; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-card__meta { font-size: .85rem; color: var(--ink-soft); }
.stat-card--alert .stat-card__value { color: var(--stamp); }
.stats-table td, .stats-table th { font-variant-numeric: tabular-nums; }
.stats-table__wrong td { border-top: 0; padding-top: 0; }
.wrong-answers { display: flex; flex-wrap: wrap; gap: .35rem .9rem; list-style: none; margin: .4rem 0 0; padding: 0; font-size: .85rem; }

@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Hints per puzzel (live, sessiedetail, log) */
.live-card__hints { margin: .5rem 0 0; font-size: .88rem; color: var(--ink); }
.live-card__hints .bi { color: #b8860b; }
.hint-puzzles { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .45rem; }
.hint-puzzles li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.hint-puzzles__name { font-family: "American Typewriter", serif; min-width: 9rem; }
.hint-chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.hint-chip {
    display: inline-flex; align-items: center; gap: .2rem;
    padding: .05rem .5rem; border-radius: 999px;
    border: 1px dashed var(--ink-line); color: var(--ink-soft); font-size: .8rem;
}
.hint-chip small { font-size: .7rem; }
.hint-chip.is-viewed { border-style: solid; border-color: #b8860b; background: rgba(241, 226, 154, .7); color: var(--ink); }
.hint-chip--solution.is-viewed { border-color: var(--stamp); background: rgba(143, 22, 12, .12); color: var(--stamp); }
.action-list li.is-hint { border-left-color: #b8860b; }
.action-list li.is-hint .action-list__label .bi { color: #b8860b; }
.action-list__hint { margin-left: .35rem; font-style: italic; color: var(--ink-soft); }

/* Live-kaart: laatste events en de sessielog in een popup */
.live-card__log { margin-top: .75rem; padding-top: .6rem; border-top: 1px dashed var(--ink-line); }
.live-card__log > .action-list { margin-top: .25rem; max-height: none; overflow: visible; }
.live-card__log > .action-list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-card__log-all { padding: .25rem 0 0; color: var(--stamp) !important; font-size: .85rem; text-decoration: underline; }
.log-dialog {
    --fg: var(--ink);
    --fg-soft: var(--ink-soft);
    width: min(720px, calc(100vw - 2rem));
    max-height: 85vh;
    padding: 1.25rem;
    border: 0;
    border-radius: 3px;
    background: linear-gradient(170deg, var(--paper-light), var(--paper) 60%, #e0c690);
    color: var(--ink);
    box-shadow: var(--shadow-paper);
}
.log-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.log-dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.log-dialog__head h2 { margin: 0; font-family: "American Typewriter", serif; font-size: 1.25rem; }
.log-dialog__head h2 small { display: block; margin-top: .15rem; font-family: inherit; font-size: .85rem; color: var(--ink-soft); }
.log-dialog__close { border: 0; background: none; color: var(--ink); font-size: 1.2rem; padding: .1rem .25rem; }
.log-dialog .action-list { max-height: none; overflow: visible; }

/* Debug-info (schakelaar admin/partials/debug-toggle, class show-debug op <html>): standaard alleen belangrijke meldingen */
.log-mode--debug { display: none; }
.show-debug .log-mode--info { display: none; }
.show-debug .log-mode--debug { display: block; }
.show-debug span.log-mode--debug { display: inline; }
html:not(.show-debug) .is-debug { display: none !important; }
.action-list li.is-status { border-left-color: var(--cc-logo); }
.action-list li.is-debug { opacity: .75; }
.log-line__level {
    margin-left: .35rem;
    padding: 0 .3rem;
    border: 1px solid var(--ink-line);
    border-radius: 2px;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.debug-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .3rem .75rem;
    border: 1px solid var(--cc-gold);
    border-radius: 999px;
    color: var(--cc-gold);
    font-family: "American Typewriter", serif;
    font-size: .85rem;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s, color .15s;
}
.debug-toggle:hover { background: rgba(219, 174, 108, .12); }
.debug-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.debug-toggle:has(.debug-toggle__input:focus-visible) { outline: 2px solid var(--cc-gold); outline-offset: 2px; }
.debug-toggle__state { padding: 0 .4rem; border-radius: 999px; background: rgba(219, 174, 108, .2); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.debug-toggle:has(.debug-toggle__input:checked) { background: var(--cc-gold); color: var(--wood-dark); }
.debug-toggle:has(.debug-toggle__input:checked) .debug-toggle__state { background: var(--wood-dark); color: var(--cc-gold); }