/* RDM ESCAPE ZONE - CUSTOM INDUSTRIAL STYLES (RDM NEXT BRAND ALIGNMENT) */

/* ==============================================================================
   1. RESET & VARIABLE DEFINITIONS
   ============================================================================== */
:root {
    /* Brand dark background tones matching RDM Next */
    --bg-darker: #070c12;
    --bg-dark: #0a111a;
    --bg-panel: #0d1724;
    --bg-panel-subtle: #09101a;
    --bg-panel-hover: #121e2f;
    --bg-input: #070d15;
    
    /* Blue/Cyan Borders */
    --border-color: rgba(1, 169, 209, 0.22);
    --border-color-hover: rgba(1, 169, 209, 0.45);
    --border-color-cyan: rgba(1, 169, 209, 0.35);
    --border-color-orange: rgba(231, 63, 35, 0.45);
    
    /* RDM Next Brand Colors */
    --accent-orange: #e73f23; /* Signature Reddish-Orange */
    --accent-orange-glow: rgba(231, 63, 35, 0.35);
    /* Losse rgb-vorm zodat een achtergrond op een andere dekking dan de
       tekstkleur kan blijven (rgba(var(--accent-orange-rgb), 0.11) i.p.v.
       weer een eigen hex ergens neerzetten). */
    --accent-orange-rgb: 231, 63, 35;
    --accent-cyan: #01a9d1;    /* Unified Brand Blue (#01a9d1) */
    --accent-cyan-glow: rgba(1, 169, 209, 0.35);

    /* Refined Unified Blue for Text, Accents & Primary Buttons */
    --accent-blue-text: #01a9d1;  /* Unified Blue (#01a9d1) */
    --accent-blue-btn: #01a9d1;   /* Unified Blue (#01a9d1) */
    --accent-blue-btn-hover: #0192b5;

    /* Text Colors */
    --text-main: #ffffff;
    --text-body: #e2e8f0;
    --text-muted: #94a3b8;     /* Clean Slate Grey */
    --text-danger: #ff4a5a;
    --text-success: #1cdb7f;

    /* Radii & Shadows */
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius: 10px;
    --border-radius-lg: 12px;
    /* Knoppen zijn rond. Kaders en kaarten niet - die houden hun eigen maat,
       anders wordt een paneel een pil. Alles wat je kunt indrukken hoort
       dezelfde vorm te hebben, en dat is deze. */
    --btn-radius: 999px;
    --shadow-card: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 15px rgba(1, 169, 209, 0.08);
    --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 25px rgba(1, 169, 209, 0.18);
    --shadow-premium: 0 10px 40px 0 rgba(0, 0, 0, 0.5);
    
    /* Fonts */
    --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-lovelo: 'Lovelo', 'Montserrat', sans-serif;
    --font-orbitron: 'Orbitron', 'Montserrat', sans-serif;
    
    --transition: all 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-darker);
    color: var(--text-body);
    font-family: var(--font-sans);
    line-height: 1.6;
    overflow-x: hidden;
}

.dark-theme {
    background-color: var(--bg-darker);
}

.hide {
    display: none !important;
}

.divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 20px 0;
}

/* ==============================================================================
   2. LAYOUT CONTAINER & APP HEADER
   ============================================================================== */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-header {
    background-color: var(--bg-dark);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-rdm {
    font-family: var(--font-lovelo);
    font-weight: 900;
    font-size: 1.75rem;
    letter-spacing: -0.5px;
    color: var(--text-main);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.logo-next {
    font-family: var(--font-lovelo);
    font-weight: 900;
    font-size: 1.75rem;
    letter-spacing: -0.5px;
    color: var(--accent-orange);
    text-shadow: 0 0 15px var(--accent-orange-glow);
}

/* Shared brand mark (compass icon + white wordmark) - the same circular
   cyan compass badge used on the login screens, sized down for reuse in
   nav bars / in-game headers, so the app uses one consistent logo instead
   of several different text-only treatments. */
.brand-icon-wrap {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: radial-gradient(circle, rgba(1, 169, 209, 0.22) 0%, rgba(1, 169, 209, 0.04) 70%);
    border: 1.5px solid rgba(1, 169, 209, 0.4);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(1, 169, 209, 0.22);
}

.brand-icon-wrap svg {
    width: 17px;
    height: 17px;
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 4px var(--accent-cyan-glow));
}

.brand-wordmark {
    font-family: var(--font-lovelo);
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--accent-cyan);
    text-shadow: 0 0 15px var(--accent-cyan-glow);
    white-space: nowrap;
    position: relative;
    top: 2px;
}

.badge-team {
    background-color: var(--accent-orange-glow);
    color: var(--accent-orange);
    border: 1px solid var(--accent-orange);
    font-size: 0.85rem;
    padding: 5px 12px;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-orbitron);
    font-weight: 700;
}

/* NAVIGATION TABS */
.mode-tabs {
    display: flex;
    gap: 8px;
}

.tab-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 8px 16px;
    font-family: var(--font-orbitron);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--btn-radius);
    transition: var(--transition);
    letter-spacing: 0.5px;
}

.tab-btn:hover {
    color: var(--text-main);
    border-color: var(--border-color-hover);
    background-color: rgba(1, 169, 209, 0.08);
}

.tab-btn.active {
    color: #ffffff;
    background-color: var(--accent-blue-btn);
    border-color: var(--accent-blue-text);
    font-weight: 700;
    box-shadow: 0 0 12px rgba(1, 169, 209, 0.4);
}

.tab-btn-icon {
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    box-sizing: border-box !important;
}

.badge-chat-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-orange);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--btn-radius);
    margin-left: 4px;
    box-shadow: 0 0 8px rgba(255, 124, 0, 0.7);
    animation: badge-pulse 2s infinite ease-in-out;
}

@keyframes badge-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(255, 124, 0, 0.7);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 14px rgba(255, 124, 0, 1);
    }
}

.main-content {
    flex: 1;
    padding: 24px 28px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.view-section {
    display: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.view-section.active {
    display: block;
}

/* ==============================================================================
   3. UNIFIED PANELS, CARDS & HIERARCHY
   ============================================================================== */
.panel {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 20px 18px;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.panel:hover {
    border-color: var(--border-color-hover);
}

/* UNIFIED LEVEL 1: SCREEN & MAIN PANEL TITLES (SUBTLE & REFINED) */
.panel-title,
.section-title,
.screen-title {
    font-family: var(--font-orbitron);
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.panel-title svg,
.section-title svg,
.screen-title svg {
    color: var(--accent-blue-text);
    flex-shrink: 0;
}

/* UNIFIED LEVEL 2: CARD / BOX / SIDEBAR TITLES (SUBTLE & SMALLER) */
.admin-sidebar-title,
.player-element-title,
.card-title,
.spelleider-panel-title {
    font-family: var(--font-orbitron);
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    line-height: 1.25;
}

.admin-sidebar-title svg,
.player-element-title svg,
.card-title svg,
.spelleider-panel-title svg {
    color: var(--accent-blue-text);
    flex-shrink: 0;
}

/* UNIFIED LEVEL 3: MODAL & DIALOG TITLES */
.modal-title,
#app-dialog-title {
    font-family: var(--font-orbitron);
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}

/* UNIFIED SUBTITLES */
.panel-subtitle,
.section-subtitle,
.subtext {
    font-family: var(--font-sans);
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-bottom: 14px;
    line-height: 1.45;
    font-weight: 400;
}

/* UNIFIED SUBSECTION & FILTER TITLES */
.subsection-title,
.filter-title {
    font-family: var(--font-orbitron);
    font-size: 0.70rem;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* BUTTONS */
.btn {
    display: inline-block;
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 12px 24px;
    font-family: var(--font-orbitron);
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
}

.btn-primary {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #000;
}

.btn-primary:hover {
    background-color: #ff912a;
    border-color: #ff912a;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--accent-orange-glow);
}

.btn-secondary {
    background-color: rgba(255,255,255,0.03);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background-color: rgba(255,255,255,0.07);
    border-color: var(--text-muted);
}

.btn-glow {
    animation: btn-pulse 2s infinite alternate;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.75rem;
    width: auto;
}

.btn-outline {
    border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan);
}

.btn-outline:hover {
    background-color: var(--accent-cyan-glow);
}

.text-danger {
    color: var(--text-danger) !important;
}
.text-warning {
    color: var(--accent-orange) !important;
}
.btn-secondary.text-danger:hover {
    background-color: rgba(255, 74, 90, 0.1);
    border-color: var(--text-danger);
}

/* Disabled State Styling */
.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled {
    opacity: 0.45;
    cursor: not-allowed !important;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}
input[type="range"]:disabled {
    opacity: 0.35;
    cursor: not-allowed !important;
}
select:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

@keyframes btn-pulse {
    0% { box-shadow: 0 0 5px var(--accent-orange-glow); }
    100% { box-shadow: 0 0 15px rgba(255, 124, 0, 0.7); }
}

/* ==============================================================================
   4. ADMIN GRID SYSTEM
   ============================================================================== */
.admin-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.admin-sidebar {
    grid-column: 1;
    grid-row: 1 / 4;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.admin-main {
    grid-column: 2;
    grid-row: 1;
    min-height: 480px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.admin-questions {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.admin-bottom-left {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* INPUT ELEMENTS */
.control-group {
    margin-bottom: 20px;
}

.control-group label {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.control-val {
    color: var(--accent-cyan);
    font-weight: 700;
    font-family: var(--font-orbitron);
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: var(--bg-darker);
    border-radius: 3px;
    outline: none;
    border: 1px solid var(--border-color);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-orange);
    cursor: pointer;
    box-shadow: 0 0 5px var(--accent-orange-glow);
    transition: var(--transition);
}

input[type="range"]::-webkit-slider-thumb:hover {
    background-color: #ff912a;
    transform: scale(1.1);
}

/* TOGGLE SWITCH COMPONENT */
.form-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    margin: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.15);
    transition: 0.25s ease;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.slider-switch:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    transition: 0.25s ease;
    border-radius: 50%;
}

.switch input:checked + .slider-switch {
    background-color: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan-glow);
    border-color: var(--accent-cyan);
}

.switch input:checked + .slider-switch:before {
    transform: translateX(16px);
    background-color: #0b0d10;
}

.control-group-compact {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.control-group-compact label {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.input-number {
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px;
    border-radius: var(--border-radius);
    outline: none;
    font-family: var(--font-orbitron);
    font-size: 0.9rem;
}

/* STATUS AREA */
.optimization-status {
    background-color: rgba(0,0,0,0.15);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 20px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: var(--text-muted);
}

.stat-row span:last-child {
    color: var(--text-main);
    font-weight: 500;
}

.status-ready { color: var(--text-success) !important; font-family: var(--font-orbitron); }
.status-running { color: var(--accent-orange) !important; font-family: var(--font-orbitron); animation: pulse 1s infinite alternate; }

@keyframes pulse {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

.progress-bar-container {
    height: 4px;
    background-color: var(--bg-darker);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 15px;
}

.progress-bar {
    height: 100%;
    background-color: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
    width: 0;
    transition: width 0.1s linear;
}

/* ==============================================================================
   5. INTERACTIVE MAP & LEAFLET MAPS CUSTOMIZATION
   ============================================================================== */
.map-wrapper {
    background-color: var(--bg-darker);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

/* Custom Leaflet Dark Theme Overrides */
.leaflet-container {
    background-color: var(--bg-darker) !important;
}

.leaflet-bar {
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-premium) !important;
}

.leaflet-bar a {
    background-color: var(--bg-panel) !important;
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-color) !important;
    transition: var(--transition);
}

.leaflet-bar a:hover {
    background-color: var(--bg-panel-hover) !important;
    color: var(--accent-cyan) !important;
}

.leaflet-custom-tooltip, .leaflet-tooltip {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    font-family: var(--font-sans) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-premium) !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
    /* Overridden from Leaflet's default nowrap - the admin map's waypoint
       hover preview (buildWaypointMapPreviewHTML() in js/maps.js) lists
       questions/media, which needs to wrap and can run wider than a
       one-line "name + GPS" tooltip. */
    white-space: normal !important;
    max-width: 400px !important;
}

/* ULTRA-COMPACT PLAYER MAP TOOLTIP */
.leaflet-player-small-tooltip {
    background: rgba(10, 15, 23, 0.92) !important;
    border: 1px solid var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
    font-family: var(--font-orbitron) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    box-shadow: 0 0 8px rgba(1, 169, 209, 0.3) !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
}

.leaflet-player-small-tooltip:before {
    border-top-color: var(--accent-cyan) !important;
}

.leaflet-tooltip-top:before {
    border-top-color: var(--border-color) !important;
}

.leaflet-tooltip-bottom:before {
    border-bottom-color: var(--border-color) !important;
}

.leaflet-tooltip-left:before {
    border-left-color: var(--border-color) !important;
}

.leaflet-tooltip-right:before {
    border-right-color: var(--border-color) !important;
}

/* Custom Leaflet Marker Styling */
.custom-leaflet-marker {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--bg-panel);
    border: 3px solid var(--accent-cyan);
    color: var(--text-main);
    font-family: var(--font-orbitron);
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    z-index: 2;
    transition: var(--transition);
}

.custom-leaflet-marker:hover .marker-circle {
    background-color: var(--accent-cyan);
    color: #000;
    border-color: var(--text-main);
    box-shadow: 0 0 15px var(--accent-cyan-glow);
    transform: scale(1.15);
}

/* Specific styling for active player marker */
.custom-leaflet-marker.player-active .marker-circle {
    border-color: var(--accent-orange);
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.custom-leaflet-marker.player-active:hover .marker-circle {
    background-color: var(--accent-orange);
    color: #fff;
    border-color: var(--text-main);
    box-shadow: 0 0 15px var(--accent-orange-glow);
}

/* Pulsing effect for active marker */
.marker-pulse {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--accent-orange-glow);
    animation: marker-pulse-anim 1.8s infinite ease-out;
    z-index: 1;
    pointer-events: none;
}

@keyframes marker-pulse-anim {
    0% {
        transform: scale(0.4);
        opacity: 1;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* ==============================================================================
   6. TABLES & MATRIX
   ============================================================================== */
.table-responsive {
    overflow-x: auto;
    width: 100%;
}

.matrix-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
    font-size: 0.82rem;
    text-align: center;
}

.matrix-table th, .matrix-table td {
    padding: 8px 10px;
    border: none;
}

.matrix-table th {
    background-color: transparent;
    font-family: var(--font-orbitron);
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.70rem;
    letter-spacing: 0.5px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.matrix-table tbody tr {
    background-color: transparent;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.matrix-table tbody tr:hover {
    background-color: transparent;
}

.matrix-table td.loc-header {
    text-align: left;
    font-weight: 600;
    background-color: transparent;
    color: #ffffff;
    font-size: 0.78rem;
    padding-left: 12px;
}

.matrix-table td.cell-empty {
    color: rgba(255, 255, 255, 0.12);
}

.matrix-table td.cell-active {
    font-weight: 700;
    font-family: var(--font-orbitron);
    background-color: transparent;
    color: var(--accent-blue-text);
}

.matrix-table td.cell-warning {
    background-color: rgba(255, 74, 90, 0.18);
    color: var(--text-danger);
    font-weight: 900;
    border-radius: 4px;
}

/* ==============================================================================
   7. LEADERBOARDS & PROGRESS VIEWS
   ============================================================================== */
.leaderboard-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 5px;
}

.leaderboard-row {
    background: var(--bg-panel-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.leaderboard-row:hover {
    border-color: var(--accent-cyan);
    background: var(--bg-panel-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(1, 169, 209, 0.12);
}

.team-rank-name {
    display: flex;
    align-items: center;
    gap: 15px;
}

.rank-badge {
    font-family: var(--font-orbitron);
    font-weight: 900;
    color: var(--accent-orange);
    font-size: 1rem;
    min-width: 25px;
}

.team-name {
    font-weight: 600;
}

.team-progress-bar-wrapper {
    flex: 1;
    margin: 0 30px;
    height: 8px;
    background-color: var(--bg-panel);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.team-progress-fill {
    height: 100%;
    background-color: var(--accent-cyan);
    border-radius: 4px;
    width: 0;
    transition: width 0.5s ease-out;
}

.team-stat-box {
    display: flex;
    gap: 20px;
    font-size: 0.8rem;
    font-family: var(--font-orbitron);
}

.team-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.team-stat .lbl {
    color: var(--text-muted);
    font-size: 0.65rem;
}

.team-stat .val {
    color: var(--text-main);
    font-weight: 700;
}

.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
    font-size: 0.9rem;
}

/* ==============================================================================
   8. PLAYER PORTAL MOBILE APP INTERFACE
   ============================================================================== */
/* Iets meer contrast op de kaderlijnen dan de rest van de app: de speler
   leest dit scherm vluchtig, onderweg op straat, en de standaard --border-color
   viel dan te veel weg tegen de donkere achtergrond. Alleen hier bijgesteld,
   niet in --root, want in het beheerpaneel (buiten #section-player) moet de
   rest van de kaders ongemoeid blijven. */
#section-player {
    --border-color: rgba(1, 169, 209, 0.4);
}

.player-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 12px 10px;
}

.player-panel {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 20px 18px;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

.player-panel.hide {
    display: none;
}

.text-center {
    text-align: center;
}

.heading-glow {
    font-size: 1.4rem;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
    color: var(--text-main);
    text-shadow: 0 0 12px var(--accent-cyan-glow);
    font-family: var(--font-orbitron);
    font-weight: 700;
    text-transform: uppercase;
}

/* FORM FIELDS */
.form-group {
    margin-bottom: 18px;
    text-align: left;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    color: var(--accent-cyan);
    margin-bottom: 6px;
    font-family: var(--font-orbitron);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.input-select, .input-text {
    width: 100%;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 11px 14px;
    font-size: 0.9rem;
    border-radius: var(--border-radius-md);
    outline: none;
    transition: var(--transition);
    box-sizing: border-box;
    font-family: var(--font-sans);
}

.input-select:focus, .input-text:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan-glow);
    background-color: #0d131a;
}

/* ACTIVE SPEL SCHERM - the header sits directly on the surrounding
   .player-panel (no competing border/shadow of its own - a box nested in a
   box reads as clutter). The one thing allowed to "pop" is the team-status
   row below, which carries the only accent surface in this block; everything
   else is plain content with generous spacing, no separator lines. */
/* De teambalk en de stapjes blijven staan tijdens het scrollen: teamnaam,
   tijd, punten, hints, fouten en hoe ver je bent. Dat is wat een deelnemer
   onderweg steeds even wil zien. De titelregel erboven is er een keer, bij het
   begin - die mag gewoon wegschuiven.

   De achtergrond is niet doorzichtig, want de inhoud schuift eronderdoor. De
   negatieve marges opzij laten de balk van rand tot rand lopen zodat er niets
   langs de zijkant doorheen piept; de padding zet de inhoud weer op zijn plek. */
.player-header-brand { margin-bottom: 10px; }

.player-game-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bg-panel);
    margin: 0 -18px 14px;
    padding: 6px 18px 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.player-game-header #play-steps-indicator { margin-bottom: 6px !important; }

/* De scheiding onder de kop komt pas tevoorschijn zodra er iets onderdoor
   schuift. Bovenaan de pagina is er niets om van te scheiden, en dan hoort er
   ook geen streep te staan - zo doet Apple dat in zijn eigen schermen.

   Het is een haarlijn met een zachte schaduw eronder, geen harde rand: de
   inhoud lost op onder de kop in plaats van eronder afgeknipt te worden.
   Aan/uit gaat via .is-vast, gezet door een schildwacht vlak boven de kop -
   zie activeerPlakkendeKop() in js/player.js. */
.player-game-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.16) 45%, rgba(0, 0, 0, 0) 100%);
}

.player-game-header.is-vast::after { opacity: 1; }

/* De schildwacht zelf is onzichtbaar: hij bestaat alleen om te merken dat de
   kop is gaan plakken. */
.kop-schildwacht {
    height: 1px;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* Zonder dit knipt de paneelrand de plakkende kop af tijdens het scrollen. */
.player-panel { overflow: visible; }


.player-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.player-header-team {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-orange);
    text-shadow: 0 0 8px var(--accent-orange-glow);
    white-space: normal;
    word-break: break-word;
    font-family: var(--font-orbitron);
    letter-spacing: 0.5px;
}

.player-header-chat {
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(1, 169, 209, 0.25);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    transition: all 0.2s ease;
}

.player-header-chat:hover {
    background: rgba(1, 169, 209, 0.12);
    transform: scale(1.08);
}

.player-header-chat .chat-icon {
    font-size: 1.1rem;
}

.player-header-chat .chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--accent-orange);
    color: #fff;
    font-size: 0.62rem;
    font-weight: bold;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    font-family: var(--font-orbitron);
    box-shadow: 0 0 6px var(--accent-orange-glow);
}

.player-header-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.player-stat {
    display: flex;
    align-items: center;
    gap: 5px;
}

.player-stat .lbl {
    font-size: 0.72rem;
    font-family: var(--font-orbitron);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.player-stat .timer-val {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.05rem;
    text-shadow: 0 0 4px rgba(1, 169, 209, 0.2);
}

.player-stat .dist-val {
    color: var(--accent-orange);
    font-weight: bold;
    font-size: 1.05rem;
    text-shadow: 0 0 5px var(--accent-orange-glow);
}

.player-stat-divider {
    color: var(--border-color);
    font-weight: 300;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 5px;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

.timer-val {
    color: #ffffff !important;
}

/* The in-game header clock (#play-timer) is the app's cyan brand color, not
   the generic white .timer-val used elsewhere (e.g. player stat tiles) - an
   ID selector is needed here to reliably win over the !important above. */
#play-timer {
    color: var(--accent-cyan) !important;
}

.step-dot {
    flex: 1;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-dot.active {
    background-color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan-glow);
    transform: scaleY(1.2);
}

.step-dot.solved {
    background-color: #89c4cc;
    border-color: #89c4cc;
    box-shadow: 0 0 6px rgba(137, 196, 204, 0.6);
}

/* UNIFIED STRUCTURED PLAYER ELEMENT CARDS */
.player-element-card {
    background: var(--bg-panel-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

.player-element-card:hover {
    border-color: var(--border-color-hover);
}

.player-element-card.question-card-success,
.puzzle-box.question-card-success {
    border: 1.5px solid var(--text-success) !important;
    background: rgba(28, 219, 127, 0.08) !important;
    box-shadow: 0 0 20px rgba(28, 219, 127, 0.3) !important;
    transition: all 0.3s ease;
}

@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.player-element-card.question-card-error,
.puzzle-box.question-card-error {
    border: 1.5px solid var(--text-danger) !important;
    background: rgba(255, 74, 90, 0.08) !important;
    box-shadow: 0 0 20px rgba(255, 74, 90, 0.35) !important;
    animation: shakeError 0.4s ease-in-out;
    transition: all 0.3s ease;
}

/* One card per question - all questions of a waypoint show at once inside
   #play-subquestions-container, each independently answerable/solvable. */
/* Geen kader om een vraag: de kaart eromheen is al een blok op het scherm, en
   een kader in een kader maakt de tekst alleen maar smaller. Staan er meer
   vragen op een bladzijde, dan scheidt een haarlijn ze - dat is genoeg. */
.subq-card {
    margin-bottom: 22px;
}

.subq-card + .subq-card {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.subq-card:last-child {
    margin-bottom: 0;
}

.subq-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.subq-card-header .orbitron {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.subq-solved .subq-card-header .orbitron {
    color: var(--text-success);
}

.subq-solved-check {
    color: var(--text-success);
    font-weight: 800;
    font-size: 1rem;
}

.subq-card-header-right,
.player-element-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.subq-points-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-orbitron);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-orange);
    letter-spacing: 0.5px;
}
.subq-points-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>") no-repeat center / contain;
}

/* Page break: a thin line with small, subtle text, separating the questions
   the player has already reached from the ones still gated behind them. */
.player-element-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.leaderboard-stats-toggle-track {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.leaderboard-stats-toggle-track.active {
    background: var(--accent-cyan);
}

.leaderboard-stats-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.leaderboard-stats-toggle-track.active .leaderboard-stats-toggle-thumb {
    transform: translateX(16px);
}

.player-element-title {
    font-family: var(--font-orbitron);
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* CURRENT WAYPOINT */
.current-waypoint-card {
    background: var(--bg-panel-subtle);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-cyan);
    border-radius: var(--border-radius-md);
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.waypoint-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-main);
    line-height: 1.3;
}

.compass-guide {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    padding-top: 12px;
}

.compass-icon {
    font-size: 1.8rem;
    animation: wiggle 3s infinite ease-in-out;
}

.compass-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

/* PUZZLE AREA */
.puzzle-box {
    background: linear-gradient(135deg, rgba(22, 33, 48, 0.7) 0%, rgba(12, 18, 27, 0.9) 100%);
    border: 1px solid rgba(255, 152, 0, 0.22);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.puzzle-title {
    font-size: 0.92rem;
    margin-bottom: 10px;
    color: var(--accent-orange);
    letter-spacing: 0.5px;
}

.puzzle-text {
    font-size: 0.92rem;
    margin-bottom: 20px;
    line-height: 1.5;
    color: #e2e8f0;
    /* pre-line is vervallen: de vraagtekst wordt net als een informatievak
       opgebouwd uit echte alinea's en lijsten - zie renderRichText() in
       js/state.js. */
}
.puzzle-text > :first-child { margin-top: 0; }
.puzzle-text > :last-child { margin-bottom: 0; }
/* Een vraag is vaak meer dan een zin: een kopje, een stukje uitleg en dan de
   stelling. Die horen uit elkaar te staan, anders lees je het als een lap. */
.puzzle-text .rt-alinea, .puzzle-text .rt-lijst { margin-bottom: 16px; }
.puzzle-text .rt-kop { margin: 24px 0 12px; }
.puzzle-text .rt-kop:first-child { margin-top: 0; }
.puzzle-text .rt-lijst li { margin-bottom: 12px; }
.puzzle-text .rt-lijn { margin: 20px 0; }

.hint-container {
    margin-bottom: 15px;
}
/* De hint hangt onder het antwoord, niet eraan vast. */
#play-subquestions-container .hint-container,
#questions-preview-content .hint-container { margin-top: 12px !important; }

.hint-text {
    font-size: 0.88rem;
    color: var(--text-main);
    margin-top: 10px;
    line-height: 1.5;
    width: 100%;
}

.answer-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.answer-form .input-text {
    width: 100%;
    padding: 12px 14px;
    font-size: 0.92rem;
}

.answer-form .btn {
    width: 100%;
    margin-bottom: 0;
}

.answer-feedback {
    margin-top: 10px;
    font-size: 0.88rem;
    font-weight: 700;
}

/* Zolang er niets te melden valt, laat het vak ook geen gat achter onder de
   knoppen. Zodra er tekst in gezet wordt, komt het vanzelf terug. */
.answer-feedback:empty { display: none; }

.feedback-success { color: var(--text-success); }
.feedback-error { color: var(--text-danger); }

/* COMPACT PLAYER LEADERBOARD */
.player-leaderboard-card {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 18px;
}

.player-leaderboard-card h4 {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.leaderboard-container-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.leaderboard-row-compact {
    background-color: rgba(8, 12, 18, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

/* SUCCESS SCHERM */
.success-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: bounce 1.5s infinite alternate;
}

.success-text {
    font-size: 1.05rem;
    margin-bottom: 30px;
}

.final-stats {
    display: flex;
    justify-content: space-around;
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 30px;
}

.final-stat-box {
    display: flex;
    flex-direction: column;
}

.final-stat-box .val {
    font-family: var(--font-orbitron);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-orange);
}

.final-stat-box .lbl {
    font-size: 0.8rem;
    color: var(--text-muted);
}

@keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* ==============================================================================
   9. FOOTER
   ============================================================================== */
.app-footer {
    background-color: var(--bg-darker);
    border-top: 1px solid var(--border-color);
    text-align: center;
    padding: 15px;
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ==============================================================================
   10. RESPONSIVE MEDIA QUERIES
   ============================================================================== */
@media (max-width: 1050px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }
    
    .admin-sidebar {
        grid-column: 1;
        grid-row: 1;
    }
    
    .admin-main {
        grid-column: 1;
        grid-row: 2;
        min-height: auto;
    }
    
    .admin-questions {
        grid-column: 1;
        grid-row: 3;
    }
    
    .admin-bottom-left {
        grid-column: 1;
        grid-row: 4;
    }
    
    .admin-bottom-right {
        grid-column: 1;
        grid-row: 5;
    }

    .admin-bottom-chat {
        grid-column: 1;
        grid-row: 6;
    }

    .admin-chat-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: 480px;
    }

    .admin-chat-teams-list {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 8px;
        height: 60px;
    }

    .chat-team-item {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-left: none;
        border-bottom: 3px solid transparent;
        min-width: 100px;
        padding: 5px 10px;
        white-space: nowrap;
    }

    .chat-team-item.active {
        border-bottom-color: var(--accent-orange);
    }
}

/* ==============================================================================
   11. SUPPORT CHAT LAYOUT & STYLES
   ============================================================================== */
.admin-chat-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    height: 600px;
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-top: 15px;
}

.admin-chat-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid var(--border-color);
    background-color: rgba(0,0,0,0.15);
}

.admin-chat-sidebar-header {
    padding: 8px 10px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.chat-filter-tabs {
    display: flex;
    gap: 4px;
}

.chat-filter-btn {
    flex: 1;
    padding: 5px 8px;
    font-size: 0.72rem;
    font-family: var(--font-orbitron);
    border: 1px solid var(--border-color);
    background: rgba(0,0,0,0.4);
    color: var(--text-muted);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-filter-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--text-main);
}

.chat-filter-btn.active {
    background: rgba(1, 169, 209, 0.15);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    font-weight: bold;
}

.admin-chat-teams-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: transparent;
    padding-right: 2px;
}

.admin-chat-teams-list::-webkit-scrollbar {
    width: 6px;
}
.admin-chat-teams-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
.admin-chat-teams-list::-webkit-scrollbar-thumb {
    background: rgba(255, 124, 0, 0.4);
    border-radius: 3px;
}
.admin-chat-teams-list::-webkit-scrollbar-thumb:hover {
    background: var(--accent-orange);
}

.chat-team-item {
    padding: 5px 8px 5px 10px;
    min-height: 28px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
    margin-right: 2px;
}

.chat-team-item:hover {
    background-color: var(--bg-panel);
}

.chat-team-item.active {
    background-color: var(--bg-panel-hover);
    border-left-color: var(--accent-cyan);
    font-weight: 700;
    color: var(--accent-cyan);
}

.chat-team-item.has-unread {
    background: rgba(255, 124, 0, 0.14) !important;
    border-left: 3px solid var(--accent-orange) !important;
}

.chat-team-item.has-unread .chat-team-name-item {
    font-weight: 800;
    color: var(--accent-orange);
}

.chat-team-name-item {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes pulseUnread {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 124, 0, 0.5); transform: scale(1); }
    50% { box-shadow: 0 0 14px rgba(255, 124, 0, 0.9); transform: scale(1.08); }
}

.chat-unread-badge {
    background: var(--accent-orange);
    color: #000;
    font-size: 0.72rem;
    font-weight: 800;
    font-family: var(--font-orbitron);
    padding: 2px 7px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(255, 124, 0, 0.6);
    flex-shrink: 0;
    animation: pulseUnread 1.8s infinite ease-in-out;
}

.admin-chat-window {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.admin-chat-header {
    background-color: var(--bg-dark);
    padding: 10px 15px;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-orbitron);
    color: var(--text-muted);
}

.admin-chat-messages, .player-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(8, 12, 18, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(1, 169, 209, 0.4) transparent;
}

.player-chat-messages::-webkit-scrollbar {
    width: 5px;
}
.player-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(1, 169, 209, 0.35);
    border-radius: 4px;
}

.chat-msg-row {
    display: flex;
    width: 100%;
}

.chat-msg-row.sent {
    justify-content: flex-end;
}

.chat-msg-row.received {
    justify-content: flex-start;
}

.chat-msg-bubble {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 0.84rem;
    line-height: 1.45;
    word-break: break-word;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    position: relative;
}

.chat-msg-time {
    opacity: 0.65;
    font-size: 0.65rem;
}

.chat-msg-content {
    font-size: 0.84rem;
    font-weight: 400;
}

/* Player sent message (Warm Orange Gradient) */
.chat-msg-row.sent .chat-msg-bubble {
    background: linear-gradient(135deg, #ff7c00 0%, #e65100 100%);
    color: #ffffff;
    border-bottom-right-radius: 3px;
    border: 1px solid rgba(255, 124, 0, 0.4);
}

.chat-msg-row.sent .chat-sender-name {
    color: #ffe0b2;
}

/* Spelleider received message (Cyber Cyan Glass) */
.chat-msg-row.received .chat-msg-bubble {
    background: rgba(14, 28, 42, 0.95);
    color: #e2e8f0;
    border-top-left-radius: 3px;
    border: 1px solid rgba(1, 169, 209, 0.35);
    box-shadow: 0 4px 14px rgba(1, 169, 209, 0.12);
}

.chat-msg-row.received .chat-sender-name {
    color: var(--accent-cyan);
}

.chat-system-msg {
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
    font-size: 0.78rem;
    margin: 6px 0;
    line-height: 1.4;
}

.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    text-align: center;
    gap: 8px;
}

/* Chat Status Indicator Dot */
.chat-status-dot {
    width: 7px;
    height: 7px;
    background: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 6px #00ff88;
    display: inline-block;
}

/* Chat Input Bar (Modern Touch-friendly) */
.admin-chat-input-bar, .player-chat-input-bar {
    display: flex;
    gap: 8px;
    padding: 10px 0 0 0;
    background: transparent;
    border-top: none;
}

.player-chat-input-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    background: rgba(0, 0, 0, 0.45);
    border: 1.5px solid rgba(1, 169, 209, 0.28);
    border-radius: 12px;
    padding: 3px 4px 3px 12px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.player-chat-input-wrap:focus-within {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 14px rgba(1, 169, 209, 0.3);
    background: rgba(0, 0, 0, 0.65);
}

.player-chat-input-field {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    /* 16px, niet kleiner: onder die grens zoomt iOS Safari zelf in zodra je
       in het veld tikt, wat je er daarna zelf weer moet uitknijpen. */
    font-size: 16px;
    padding: 7px 0;
}

.player-chat-input-field::placeholder {
    color: rgba(255, 255, 255, 0.38);
    font-size: 16px;
}

.btn-chat-send-modern {
    background: linear-gradient(135deg, var(--accent-cyan) 0%, #0088cc 100%);
    border: none;
    border-radius: var(--btn-radius);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b0d10;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-chat-send-modern:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(1, 169, 209, 0.5);
}

.btn-chat-send-modern:active {
    transform: scale(0.96);
}

.btn-chat-send-modern svg {
    width: 16px;
    height: 16px;
    color: #0b0d10;
}

/* ==============================================================================
   12. LOCATION & PUZZLE EDITOR & RESPONSIVE FIXES
   ============================================================================== */

/* Locatie & Puzzel Editor Styling */
.editor-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.field-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-item label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.field-item.full-width {
    grid-column: 1 / 3;
}

.input-select {
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 10px;
    padding-right: 32px !important; /* Prevents text from overlapping the arrow */
    border-radius: var(--border-radius);
    outline: none;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2301a9d1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

.input-select:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan-glow);
}

.input-select:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    background-color: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

/* Responsive Layout Overrides to Prevent Text and Input Overflow */
.control-group-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.control-group-compact label {
    flex: 1;
    min-width: 120px;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.leaderboard-row {
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    transition: var(--transition);
    flex-wrap: wrap;
}

.team-progress-bar-wrapper {
    flex: 1;
    min-width: 80px;
    margin: 0 10px;
    height: 8px;
    background-color: var(--bg-panel);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.team-stat-box {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    font-family: var(--font-orbitron);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .editor-fields-grid {
        grid-template-columns: 1fr;
    }
    .field-item.full-width {
        grid-column: 1;
    }
}


/* Full-screen non-scrolling Grid Leaderboard & Step Controls */
.leaderboard-container-full {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
}

/* ADMIN LEADERBOARD ENHANCEMENTS & MULTI-VIEW MODES */
.admin-lb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(12, 18, 27, 0.75);
    border: 1px solid var(--border-color);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.admin-lb-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-lb-stat-badge {
    font-family: var(--font-orbitron);
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-lb-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-lb-view-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 6px 10px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-lb-view-btn svg {
    display: block;
}

.admin-lb-view-btn:hover, .admin-lb-view-btn.active {
    background: rgba(1, 169, 209, 0.15);
    color: var(--accent-cyan);
    border-color: rgba(1, 169, 209, 0.4);
    box-shadow: 0 0 10px rgba(1, 169, 209, 0.2);
}

.admin-lb-twocol-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.admin-lb-minigrid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 9px;
}

.lb-minigrid-card {
    background: rgba(12, 18, 27, 0.85);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px 6px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.2s ease;
    min-height: 78px;
}

.lb-minigrid-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 169, 209, 0.2);
}

/* Rank moved to a corner tag instead of its own row - reclaims vertical
   space for the name/avatar without growing the card. */
.lb-minigrid-rank {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 0.62rem;
    line-height: 1;
}

.lb-minigrid-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1px;
}

.lb-minigrid-name {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1.2;
    width: 100%;
    text-align: center;
    /* A single, cleanly-truncated line reads far better in this little a
       card than the old 3-line word-broken wrap (e.g. "To" / "uw" split
       across lines) - the full name is still available via the title
       attribute (hover tooltip). */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-minigrid-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: var(--font-orbitron);
}

@media (max-width: 900px) {
    .admin-lb-twocol-grid {
        grid-template-columns: 1fr;
    }

    body.player-only-mode .main-content,
    .main-content {
        padding: 6px 4px !important;
    }

    .player-container {
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #player-game.player-panel {
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 2px !important;
        border-radius: 0 !important;
    }
}

.admin-lb-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(12, 18, 27, 0.85);
}

.admin-lobby-table,
.admin-lobby-table tr,
.admin-lobby-table th,
.admin-lobby-table td {
    border: none !important;
}

.admin-lb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

.admin-lb-table th {
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-muted);
    font-family: var(--font-orbitron);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}

.admin-lb-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.admin-lb-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.admin-lb-table tr.active-player-row {
    background: rgba(255, 124, 0, 0.08);
}

.leaderboard-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    align-items: stretch;
}

/* EMOTICON PICKER & LOBBY STYLING */
.emoticon-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 36px;
    font-size: 1.35rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    padding: 0;
}

.emoticon-option:hover {
    background: rgba(1, 169, 209, 0.18);
    border-color: var(--accent-cyan);
    transform: scale(1.06);
}

.emoticon-option.selected {
    background: rgba(1, 169, 209, 0.25) !important;
    border: 2px solid var(--accent-cyan) !important;
    box-shadow: 0 0 12px rgba(1, 169, 209, 0.5);
    transform: scale(1.08);
}

.team-step-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    padding: 2px 6px;
    border-radius: 4px;
}

.step-btn-minus, .step-btn-plus {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--btn-radius);
    transition: var(--transition);
}

.step-btn-minus:hover {
    color: var(--text-danger);
    background-color: rgba(255, 74, 90, 0.1);
}

.step-btn-plus:hover {
    color: var(--text-success);
    background-color: rgba(28, 219, 127, 0.1);
}

.step-val {
    font-family: var(--font-orbitron);
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--text-main);
    min-width: 15px;
    text-align: center;
}

@media (max-width: 1400px) {
    .leaderboard-grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .leaderboard-grid-wrapper {
        grid-template-columns: 1fr;
    }
}


/* Drag and Drop Questions Tab Card styles */
.questions-drag-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

.drag-card {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 18px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
}

.drag-card.active {
    border-color: rgba(1, 169, 209, 0.35);
    box-shadow: 0 4px 15px rgba(1, 169, 209, 0.1);
    background-color: rgba(1, 169, 209, 0.02);
}

.drag-card.reserve {
    opacity: 0.5;
    filter: grayscale(50%);
    background-color: rgba(10, 15, 26, 0.4);
}

.drag-card.reserve:hover {
    opacity: 0.8;
    filter: grayscale(20%);
}

.drag-card.dragging {
    opacity: 0.4;
    border: 2px dashed var(--accent-cyan);
    transform: scale(0.98);
}

.drag-card.drag-over {
    border: 2px dashed var(--accent-orange);
    background-color: rgba(230, 92, 0, 0.02);
}

/* Locked state (lobby open / game running) - editing is disabled but that
   wasn't visually obvious before (only the individual form fields looked
   greyed-out via the browser's default `disabled` styling). Dim the whole
   row/card and swap its drag-handle to a padlock (see dragHandleIconHTML()
   in js/admin.js) so "you can't touch this right now" reads at a glance. */
.drag-card.locked,
.subquestion-admin-card.locked,
.media-admin-item.locked {
    opacity: 0.55;
    filter: grayscale(35%);
}

.drag-card.locked .drag-handle,
.subquestion-admin-card.locked .subquestion-drag-handle,
.media-admin-item.locked .media-drag-handle {
    cursor: not-allowed;
}

/* Same lock treatment for the Route Setup card's own controls (team count,
   locations, penalties, categories) - these used to stay fully editable
   while the lobby was open or the game was running, even though changing
   them mid-game silently reshuffles/regenerates routes teams are already
   using. pointer-events:none blocks every control at once, including the
   category rows that get rebuilt dynamically - no need to track down and
   disable each one individually. */
.route-setup-controls-locked {
    opacity: 0.5;
    filter: grayscale(40%);
    pointer-events: none;
    cursor: not-allowed;
}

.drag-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: grab;
    user-select: none;
}

.drag-handle {
    font-size: 1.25rem;
    color: var(--text-muted);
    cursor: grab;
    padding: 4px 8px;
    border-radius: 4px;
    transition: var(--transition);
}

.drag-handle:hover {
    color: var(--accent-cyan);
    background-color: rgba(1, 169, 209, 0.08);
}

.drag-handle:active {
    cursor: grabbing;
}

.drag-status-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    font-family: var(--font-orbitron);
    min-width: 75px;
    text-align: center;
}

.drag-status-badge.active {
    background-color: rgba(28, 219, 127, 0.12);
    color: var(--text-success);
    border: 1px solid rgba(28, 219, 127, 0.3);
}

.drag-status-badge.reserve {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.drag-category-pill {
    padding: 3px 8px;
    border-radius: var(--btn-radius);
    font-size: 0.68rem;
    font-weight: bold;
    font-family: var(--font-orbitron);
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drag-title {
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--text-main);
    min-width: 140px;
    flex-shrink: 0;
}

.drag-title .loc-letter {
    color: var(--accent-cyan);
    font-size: 1.05rem;
}

.drag-preview-text {
    flex: 1 1 0;
    min-width: 60px;
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
}

.drag-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 28px;
    margin-left: auto;
}

.drag-actions .btn {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    box-sizing: border-box;
    line-height: 1;
}

/* Generic frameless icon button base - covers any bare .btn-icon usage
   (e.g. the panel-level expand/collapse-all button) so it never falls back
   to native browser button chrome. The scoped rules below layer extra
   !important sizing/color on top for the specific contexts they cover. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: var(--btn-radius);
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover:not(:disabled) {
    background: rgba(1, 169, 209, 0.15);
    color: var(--accent-cyan);
}

.btn-icon:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Minimalist Frameless Action Buttons (arrows, trash, expand/collapse) */
.btn-icon-frameless,
.drag-actions .btn-icon,
.subquestion-header-actions .btn-icon,
.media-action-btn {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border-radius: var(--btn-radius) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.btn-icon-frameless:hover:not(:disabled),
.drag-actions .btn-icon:hover:not(:disabled),
.subquestion-header-actions .btn-icon:hover:not(:disabled),
.media-action-btn:hover:not(:disabled) {
    background: rgba(1, 169, 209, 0.15) !important;
    color: var(--accent-cyan) !important;
    transform: scale(1.1);
}

.btn-icon-frameless.btn-trash,
.drag-actions .btn-icon.btn-trash,
.subquestion-header-actions .btn-icon.btn-trash,
.media-action-btn.btn-trash {
    color: rgba(231, 63, 35, 0.75) !important;
}

.btn-icon-frameless.btn-trash:hover:not(:disabled),
.drag-actions .btn-icon.btn-trash:hover:not(:disabled),
.subquestion-header-actions .btn-icon.btn-trash:hover:not(:disabled),
.media-action-btn.btn-trash:hover:not(:disabled) {
    background: rgba(231, 63, 35, 0.18) !important;
    color: var(--accent-orange) !important;
    transform: scale(1.1);
}

.btn-icon-frameless:disabled,
.drag-actions .btn-icon:disabled,
.subquestion-header-actions .btn-icon:disabled,
.media-action-btn:disabled {
    opacity: 0.15 !important;
    cursor: not-allowed !important;
    background: transparent !important;
    border: none !important;
    transform: none !important;
}

.drag-actions .btn-expand {
    border-radius: var(--btn-radius);
}

.drag-actions .btn-deactivate {
    padding: 0 8px;
    font-size: 0.7rem;
    gap: 4px;
    border-radius: var(--btn-radius);
    color: var(--accent-orange);
    border-color: rgba(255, 124, 0, 0.35);
    background: rgba(255, 124, 0, 0.05);
}

.drag-actions .btn-deactivate:hover:not(:disabled) {
    background: rgba(255, 124, 0, 0.18);
    border-color: var(--accent-orange);
    color: #fff;
}

.drag-actions .btn-activate {
    padding: 0 8px;
    font-size: 0.7rem;
    gap: 4px;
    border-radius: var(--btn-radius);
    color: var(--text-success);
    border-color: rgba(28, 219, 127, 0.35);
    background: rgba(28, 219, 127, 0.05);
}

.drag-actions .btn-activate:hover:not(:disabled) {
    background: rgba(28, 219, 127, 0.18);
    border-color: var(--text-success);
    color: #fff;
}

.drag-card.location-card-drag-over {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 20px rgba(1, 169, 209, 0.5) !important;
    background: rgba(1, 169, 209, 0.1) !important;
    transform: scale(1.008);
}

.clipboard-active-bar {
    background: linear-gradient(90deg, rgba(1, 169, 209, 0.18), rgba(0, 255, 136, 0.12));
    border: 1px solid var(--accent-cyan);
    border-radius: var(--border-radius);
    padding: 10px 14px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 0 15px rgba(1, 169, 209, 0.25);
    animation: pulse-border 2s infinite ease-in-out;
}

@keyframes pulse-border {
    0%, 100% { border-color: var(--accent-cyan); box-shadow: 0 0 10px rgba(1, 169, 209, 0.2); }
    50% { border-color: #00ff88; box-shadow: 0 0 16px rgba(0, 255, 136, 0.35); }
}

/* Icon-only "add item" buttons (vraag/foto/video/pagina-einde toevoegen) -
   small, borderless icons in a row; the accent color is set inline per
   button, this class carries the shared shape/hover/disabled behavior. */
.add-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--btn-radius);
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    color: var(--text-body);
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-item-btn:hover:not(:disabled) {
    background: rgba(1, 169, 209, 0.15);
    transform: scale(1.1);
}

.add-item-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.drag-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.drag-card-body.expanded {
    max-height: 15000px;
}

.subquestion-admin-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(1, 169, 209, 0.25);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    user-select: none;
}

.subquestion-admin-card:hover {
    border-color: rgba(1, 169, 209, 0.5);
    box-shadow: 0 4px 15px rgba(1, 169, 209, 0.1);
}

.subquestion-admin-card.question-dragging,
.media-admin-item.question-dragging {
    opacity: 0.45;
    border-style: dashed;
    border-color: var(--accent-orange);
    transform: scale(0.98);
}

/* One drop slot between every two rows in a waypoint's flat list (see
   renderDropGapHTML() in js/admin.js) - a thin, barely-there strip normally,
   that lights up while something draggable is hovering over it. Replaces
   the old "top half / bottom half of a row" drop targets, which put two
   overlapping slots at every boundary and had no slot at all above the very
   first row. Its footprint (height + negative margin) never changes between
   the two states - only changing the fixed 10px row-to-row spacing that was
   already there before drop gaps existed (see the margin math in
   .subquestion-admin-card etc.) - growing it on hover shifted every row
   below it, which retriggers enter/leave on whatever ends up under the
   cursor and reads as the whole list stuttering/flickering mid-drag. */
.flat-list-drop-gap {
    height: 14px;
    margin: -7px 0;
    border-radius: 4px;
    position: relative;
    z-index: 3;
}

.flat-list-drop-gap.gap-drag-over {
    background: rgba(1, 169, 209, 0.22);
    border: 1.5px dashed var(--accent-cyan);
    box-shadow: 0 0 14px rgba(1, 169, 209, 0.3);
}

.subquestion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 8px;
    padding: 2px 0;
}

.subquestion-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    flex: 1;
}

.subquestion-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.subquestion-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease;
}

.subquestion-drag-handle:hover {
    color: var(--accent-cyan);
    background: rgba(1, 169, 209, 0.15);
}

.subquestion-drag-handle:active {
    cursor: grabbing;
}

.subquestion-type-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-body);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.subquestion-preview-text {
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    font-style: italic;
}

.subquestion-admin-card-body {
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.subquestion-admin-card-body.collapsed {
    display: none;
}

.location-questions-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.location-questions-drop-zone {
    border: 1px dashed rgba(1, 169, 209, 0.35);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    color: rgba(1, 169, 209, 0.7);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 4px;
    margin-bottom: 4px;
    background: rgba(1, 169, 209, 0.03);
    transition: all 0.2s ease;
    cursor: default;
}

/* Media Item in Question / Location Hierarchy - same one-line-row look and
   rank as .subquestion-admin-card, so photo/video/question rows sit as equal
   siblings in one flat, freely draggable list (see renderQuestionsList()). */
.media-admin-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(1, 169, 209, 0.25);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    user-select: none;
}

.media-admin-item:hover {
    border-color: rgba(1, 169, 209, 0.5);
    box-shadow: 0 4px 15px rgba(1, 169, 209, 0.1);
}

.media-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.media-drag-handle:hover {
    color: var(--accent-cyan);
    background: rgba(1, 169, 209, 0.15);
}

.media-drag-handle:active {
    cursor: grabbing;
}

/* Vragen & media section: sits right after the waypoint card header, always
   visible/draggable regardless of whether the waypoint card itself is
   expanded or collapsed (unlike .drag-card-body, which does collapse). */
.waypoint-items-always-visible {
    padding: 10px 0 4px;
    border-top: 1px dashed rgba(1, 169, 209, 0.2);
}

/* ==============================================================================
   11.5 MINIMALIST MOBILE CAMERA INTERFACE STYLES
   ============================================================================== */
.camera-modal-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    touch-action: none;
}

.camera-modal-view {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 100%;
    max-height: 100dvh;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.camera-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px 20px;
    z-index: 10;
    background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
}

.camera-top-title {
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
}

.camera-viewfinder-container {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    background: #050508;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

#camera-video-feed {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    transition: transform 0.2s ease;
}

/* #qr-scanner-canvas has its width/height ATTRIBUTES set in JS to the
   video's native pixel resolution (needed for jsQR's raw pixel decode) -
   without this, it renders unscaled at that full native size inside the
   viewfinder, so overflow:hidden crops it down to an extreme, off-center
   zoom that can never fit a whole QR code in frame. This scales the
   on-screen box only; the backing pixel buffer JS decodes from is untouched.
   Back to being the visible surface (see player.html for why: a separate
   always-visible <video> + coordinate-mapped found-box caused real,
   reported "camera opens, no image, never decodes" failures on iPhone
   Safari, Firefox Focus and a MacBook - simple and working beats clever
   and broken). */
#qr-scanner-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-viewfinder-frame {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    bottom: 24px;
    pointer-events: none;
}

.camera-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: rgba(255, 255, 255, 0.45);
    border-style: solid;
}

.camera-corner.top-left {
    top: 0;
    left: 0;
    border-width: 2.5px 0 0 2.5px;
    border-top-left-radius: 6px;
}

.camera-corner.top-right {
    top: 0;
    right: 0;
    border-width: 2.5px 2.5px 0 0;
    border-top-right-radius: 6px;
}

.camera-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-width: 0 0 2.5px 2.5px;
    border-bottom-left-radius: 6px;
}

.camera-corner.bottom-right {
    bottom: 0;
    right: 0;
    border-width: 0 2.5px 2.5px 0;
    border-bottom-right-radius: 6px;
}

.camera-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px 24px 34px 24px;
    z-index: 10;
    background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
    gap: 15px;
}

/* "AR-scanner" ("ar" question type) and "QR-scanner" ("qr" question type) -
   both can be opened from INSIDE the admin's questions-preview modal
   (z-index 999999), which .camera-modal-fullscreen's shared 100000 sits
   well below - without this override the scanner would silently render
   behind the preview, exactly like the "vergroot afbeelding" bug this
   mirrors the fix for. */
#ar-scanner-modal, #qr-scanner-modal {
    z-index: 9999998;
}

#ar-scanner-container {
    /* Its own stacking context (z-index:0, not just position) - MindAR
       positions its <video> at z-index:-2 (sunk below the WebGL <canvas> it
       renders the tracked overlay onto), which without this sinks the video
       below THIS element's own background instead - a plain black screen
       with the overlay floating on it, camera feed invisible. */
    position: relative;
    z-index: 0;
    background: #000;
    overflow: hidden;
}

.camera-scanner-hint {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    margin: 0;
    pointer-events: none;
}

.camera-scanner-error {
    position: absolute;
    top: 50%;
    left: 24px;
    right: 24px;
    transform: translateY(-50%);
    text-align: center;
    color: var(--text-danger);
    font-size: 0.88rem;
    font-weight: 600;
    margin: 0;
}

/* Small pulsing dot next to "Richt de camera op de QR-code" so it's clear
   the scanner is actively looking, not just showing a static camera feed -
   the QR scanner previously gave no ongoing feedback at all while aiming. */
.qr-scanner-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-cyan, #01a9d1);
    margin-right: 6px;
    vertical-align: middle;
    animation: qrScannerPulse 1.4s ease-in-out infinite;
}

@keyframes qrScannerPulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Brief, unmistakable confirmation the moment a code decodes successfully -
   a plain full-screen overlay, not a coordinate-mapped box traced onto the
   live feed (that required computing the video's on-screen object-fit
   geometry, which added real risk for a purely cosmetic touch - reverted
   after real-device reports of the scanner breaking outright). */
.qr-scanner-success {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.55);
    animation: qrScannerSuccessPop 0.35s ease-out;
}

.qr-scanner-success span {
    color: #22c55e;
    font-family: var(--font-orbitron);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

@keyframes qrScannerSuccessPop {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .qr-scanner-status-dot { animation: none; opacity: 0.9; }
    .qr-scanner-success { animation: none; }
}

.camera-shutter-btn {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background: transparent;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.camera-shutter-btn:active {
    transform: scale(0.92);
}

.camera-shutter-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff;
    transition: background 0.15s ease, transform 0.15s ease;
}

.camera-shutter-btn:active .camera-shutter-inner {
    background: #dddddd;
    transform: scale(0.95);
}

.camera-circular-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.camera-circular-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
}

.camera-circular-btn:active {
    transform: scale(0.92);
}

.camera-text-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: var(--btn-radius);
    transition: opacity 0.2s ease, background 0.2s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.camera-text-btn:hover {
    opacity: 0.8;
}

.camera-text-btn:active {
    opacity: 0.6;
}

/* ==============================================================================
   12. PREMIUM DYNAMIC CHOICE & DEEP-LINK STYLES
   ============================================================================== */
.feedback-warning {
    color: var(--accent-orange);
}

.tf-btn, .mc-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tf-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(28, 219, 127, 0.25) !important;
    background: linear-gradient(135s, rgba(28, 219, 127, 0.25), rgba(28, 219, 127, 0.1)) !important;
}

.tf-btn:nth-child(2):hover:not(:disabled) {
    box-shadow: 0 4px 15px rgba(255, 74, 90, 0.25) !important;
    background: linear-gradient(135s, rgba(255, 74, 90, 0.25), rgba(255, 74, 90, 0.1)) !important;
}

.mc-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--accent-orange) !important;
    box-shadow: 0 4px 15px var(--accent-orange-glow);
    background-color: rgba(255, 124, 0, 0.05) !important;
}

.mc-btn:disabled, .tf-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

body.player-only-mode {
    background: radial-gradient(circle at top, #16222f 0%, #0d131a 100%) !important;
}

body.player-only-mode .app-header {
    display: none !important;
}

body.player-only-mode .main-content {
    padding-top: 20px !important;
}

body.player-only-mode #section-player {
    display: block !important;
}

/* QR Wrapper pulse effect */
.qr-wrapper {
    animation: qr-pulse 2s infinite ease-in-out;
}

@keyframes qr-pulse {
    0% {
        box-shadow: 0 0 5px rgba(255, 124, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 124, 0, 0.4);
    }
    100% {
        box-shadow: 0 0 5px rgba(255, 124, 0, 0.2);
    }
}

@keyframes blinker {
    50% { opacity: 0.3; }
}

/* Fullscreen Image Modal Lightbox */
.image-modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(10, 15, 26, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: var(--transition);
}

.image-modal-content {
    max-width: 95%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    box-shadow: 0 0 30px rgba(1, 169, 209, 0.3);
    animation: zoomIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 30px;
    color: var(--text-muted);
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
    z-index: 10001;
}

.close-modal:hover {
    color: var(--accent-orange);
    text-shadow: 0 0 10px var(--accent-orange-glow);
}

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ==============================================================================
   11. COMPREHENSIVE ADAPTIVE & MOBILE RESPONSIVENESS OVERRIDES
   ============================================================================== */
@media (max-width: 768px) {
    .app-header {
        padding: 10px 15px;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .logo-area {
        justify-content: center;
    }
    
    .logo-rdm, .logo-next {
        font-size: 1.4rem;
    }
    
    .logo-sub {
        font-size: 0.65rem;
        margin-left: 8px;
        padding-left: 8px;
    }
    
    .mode-tabs {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
    }
    
    .tab-btn {
        padding: 8px 12px;
        font-size: 0.78rem;
        flex: 1 0 auto;
        text-align: center;
    }
    
    .main-content {
        padding: 15px;
    }
    
    .panel {
        padding: 15px;
    }
    
    /* Layout stacks vertically on mobile */
    .admin-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .admin-sidebar {
        grid-column: 1;
        grid-row: auto;
    }
    
    .admin-main {
        grid-column: 1;
        grid-row: auto;
        min-height: 350px;
    }
    
    .admin-bottom-left {
        grid-column: 1;
        grid-row: auto;
    }
    
    .admin-bottom-right {
        grid-column: 1;
        grid-row: auto;
    }
    
    .admin-bottom-chat {
        grid-column: 1;
        grid-row: auto;
    }
    
    /* Player Portal specific mobile optimizations */
    body.player-only-mode .main-content,
    .main-content {
        padding: 6px 4px !important;
    }

    .player-container {
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #player-game.player-panel {
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 2px !important;
        border-radius: 0 !important;
    }

    .player-game-header {
        /* Op een telefoon is de paneelrand 2px, dus mag de balk maar 2px naar
           buiten steken - anders loopt hij over de rand van het scherm. */
        padding: 4px 2px 8px 2px !important;
        margin: 0 -2px 12px !important;
    }

    .player-header-top-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .player-brand-title {
        white-space: nowrap !important;
        word-break: keep-all !important;
        hyphens: none !important;
        font-size: 0.8rem !important;
        letter-spacing: 1px !important;
    }

    .player-header-action-btns {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .player-header-actions-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 6px 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .player-header-team-row {
        width: 100% !important;
        text-align: left !important;
    }

    .player-header-team {
        font-size: 1.25rem !important;
        display: block !important;
        letter-spacing: 0.5px !important;
    }

    /* Multiple choice & True/False choices: 1 option per row on mobile */
    .mc-buttons-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .tf-buttons-container {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .mc-btn, .tf-btn {
        width: 100% !important;
        min-height: 48px !important;
        padding: 14px 16px !important;
        font-size: 0.95rem !important;
        box-sizing: border-box !important;
    }

    /* Open Answer form: Input field on row 1, submit button on row 2 */
    .answer-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Only the single free-text input and the full-width submit/hint
       buttons should stretch here - excluded are the compact, intentionally
       small controls that also live inside .answer-form: individual digit
       boxes (time/number-code answers), per-letter boxes (plain-text answers
       with the format hint on), colored-dot buttons, and Wissen + Hint
       opvragen, die samen de rustige rij onder Indienen vormen (zie
       .antwoord-subrij) en dus hun breedte van hun eigen inhoud krijgen, niet
       van hier. */
    .answer-form input:not(.time-digit-box):not(.letterbox-cell),
    .answer-form button:not(.color-dot-btn):not(.antwoord-wissen):not(.stil-knop-klein) {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .player-element-card {
        padding: 14px 12px !important;
        margin-bottom: 14px !important;
        border-radius: 10px !important;
    }

    .player-login-container {
        padding: 16px 10px;
        margin-top: 5px;
    }
    
    .puzzle-box {
        padding: 15px;
    }
    
    .puzzle-title {
        font-size: 1.1rem;
    }
    
    .puzzle-text {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .mc-btn, .tf-btn {
        padding: 12px 10px;
        font-size: 0.85rem;
    }
    
    .leaderboard-row {
        gap: 10px !important;
        padding: 12px 14px !important;
    }
    
    .rank-badge {
        min-width: 30px !important;
        font-size: 0.9rem !important;
    }
    
    .team-name {
        font-size: 0.85rem !important;
        max-width: 110px !important;
    }
    
    .step-val {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .mode-tabs {
        justify-content: flex-start;
    }
    
    /* Dedicated QR code screen adjustments */
    #section-qr .panel {
        padding: 20px 15px !important;
        margin: 15px auto !important;
    }
    
    #section-qr .panel-title {
        font-size: 1.5rem !important;
    }
    
    #section-qr img {
        width: 180px !important;
        height: 180px !important;
    }
}

/* Pulse animation for the top bar notification icon */
.pulse-notify {
    animation: simplePulse 1.2s infinite alternate;
}

@keyframes simplePulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 0px var(--accent-orange)); }
    100% { transform: scale(1.22); filter: drop-shadow(0 0 8px var(--accent-orange)); }
}

/* Establishes its own stacking context (position + a non-auto z-index) so
   the high z-index values below (1000/1001, needed to sit above Leaflet's
   own internal panes) stay scoped to inside the map and can never render on
   top of the sticky .app-header (z-index: 100) when the page is scrolled -
   without this, position:relative alone does nothing to contain them. */
.player-map-wrapper {
    z-index: 1;
}

/* Fullscreen Map Mode */
.player-map-wrapper.map-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    /* 100vh is the LARGEST possible viewport (as if the browser's own
       address/toolbar were hidden) - mobile Safari shows its toolbar at the
       BOTTOM by default, so a 100vh-tall fixed box overflows underneath it,
       putting the bottom-right fullscreen-toggle button (which is what a
       player needs to tap to get back OUT of fullscreen) behind that bar,
       unreachable. 100dvh tracks the toolbar's actual current visibility;
       the plain vh rule above stays as a fallback for the rare browser that
       doesn't support dvh yet. */
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 9999999 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #080c12 !important;
}

.player-map-wrapper.map-fullscreen #leaflet-player-map {
    height: 100vh !important;
    height: 100dvh !important;
    width: 100vw !important;
    border-radius: 0 !important;
    border: none !important;
}

/* GOOGLE MAPS STYLE MAP LAYER SELECTOR & CORNER CONTROLS */
.map-controls-top-left {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.map-controls-bottom-left {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1000;
}

.map-controls-bottom-right {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
}

.map-layer-dropdown-container {
    position: relative;
}

.map-control-icon-btn {
    width: 36px;
    height: 36px;
    background: rgba(10, 15, 26, 0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(1, 169, 209, 0.35);
    color: var(--text-light);
    border-radius: var(--btn-radius);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
    user-select: none;
}

.map-control-icon-btn:hover {
    background: rgba(15, 23, 38, 0.95);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: 0 0 12px var(--accent-cyan-glow);
    transform: scale(1.06);
}

/* Dropdown Menu (Pops Upward when in bottom-left controls) */
.map-controls-bottom-left .map-layers-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    top: auto;
    left: 0;
    right: auto;
    width: 195px;
    background: rgba(10, 15, 26, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1001;
    animation: fadeInUpDropdown 0.2s ease-out;
}

@keyframes fadeInUpDropdown {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.map-layer-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.map-layer-option:hover {
    background: rgba(1, 169, 209, 0.08);
    border-color: rgba(1, 169, 209, 0.3);
}

.map-layer-option.active {
    background: rgba(1, 169, 209, 0.12);
    border-color: var(--accent-cyan);
}

.layer-thumb {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--accent-cyan);
}

.voyager-thumb {
    background: linear-gradient(135deg, #1e293b, #0f172a);
}

.satellite-thumb {
    background: linear-gradient(135deg, #064e3b, #022c22);
}

.layer-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.layer-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
}

.layer-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.layer-check {
    font-size: 0.8rem;
    color: var(--accent-cyan);
    font-weight: bold;
    opacity: 0;
}

.map-layer-option.active .layer-check {
    opacity: 1;
}

/* ==============================================================================
   ADMIN SIDEBAR 5-CARD PANELS STYLES
   ============================================================================== */
.admin-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.admin-sidebar-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}

.admin-sidebar-card:hover {
    border-color: var(--border-color-hover);
}

.admin-sidebar-card-header {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.admin-sidebar-title {
    margin: 0;
    font-family: var(--font-orbitron);
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Collapsible Card Body */
.collapsible-card-body {
    max-height: 4000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;
}

.collapsible-card-body.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Allow input controls in collapsed cards to remain interactive */
.collapsible-card-body.collapsed input,
.collapsible-card-body.collapsed select,
.collapsible-card-body.collapsed textarea,
.collapsible-card-body.collapsed button {
    pointer-events: auto;
    max-height: 100px;
    opacity: 1;
    overflow: visible;
}

.divider {
    height: 1px;
    background: var(--border-color);
    margin: 14px 0;
    width: 100%;
}

/* Info Message */
.subtle-info-box {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

/* Primary Cyan / Tech Blue Action Button */
.btn-primary-cyan {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 12px;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--accent-blue-btn);
    border: 1px solid var(--accent-blue-text);
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: var(--btn-radius);
    transition: all 0.2s ease;
    cursor: pointer;
    letter-spacing: 0.5px;
    box-sizing: border-box;
    box-shadow: 0 0 12px rgba(1, 169, 209, 0.35);
}

.btn-primary-cyan:hover:not(:disabled) {
    background: var(--accent-blue-btn-hover);
    border-color: #01a9d1;
    box-shadow: 0 0 16px rgba(1, 169, 209, 0.45);
}

.btn-primary-cyan:disabled {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Main Spel Action Button */
.btn-main-action {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 12px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: var(--btn-radius);
    transition: all 0.2s ease;
    cursor: pointer;
    letter-spacing: 0.5px;
    box-sizing: border-box;
    border: none;
}

.btn-main-action:hover:not(:disabled) {
    filter: brightness(1.12);
    box-shadow: 0 0 15px rgba(28, 219, 127, 0.35);
}

.btn-main-action:disabled {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Countdown Row Wrappers (Shared Base) */
.countdown-row-wrapper {
    display: flex;
    align-items: stretch;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.countdown-row-wrapper .countdown-minutes-input {
    width: 40px;
    padding: 4px 2px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.countdown-row-wrapper .countdown-minutes-input:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--accent-cyan) !important;
}

/* START COUNTDOWN ROW (GREEN THEME) */
.countdown-row-wrapper.countdown-row-start {
    border: 1px solid rgba(28, 219, 127, 0.35);
    background: rgba(28, 219, 127, 0.08);
}

.countdown-row-wrapper.countdown-row-start:hover:not(.disabled) {
    border-color: var(--text-success);
    background: rgba(28, 219, 127, 0.15);
    box-shadow: 0 0 12px rgba(28, 219, 127, 0.25);
}

.countdown-row-wrapper.countdown-row-start.disabled {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    opacity: 0.4;
}

.countdown-row-wrapper.countdown-row-start.disabled #btn-start-countdown,
.countdown-row-wrapper.countdown-row-start.disabled #input-start-countdown-seconds,
.countdown-row-wrapper.countdown-row-start.disabled span {
    color: var(--text-muted) !important;
}

.countdown-row-wrapper.countdown-row-start.disabled > div {
    border-right-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

/* FINAL COUNTDOWN ROW (BLUE/CYAN THEME) */
.countdown-row-wrapper.countdown-row-end {
    border: 1px solid var(--border-color);
    background: rgba(1, 169, 209, 0.08);
}

.countdown-row-wrapper.countdown-row-end:hover:not(.disabled) {
    border-color: var(--accent-cyan);
    background: rgba(1, 169, 209, 0.15);
    box-shadow: 0 0 12px rgba(1, 169, 209, 0.25);
}

.countdown-row-wrapper.countdown-row-end.disabled {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    opacity: 0.4;
}

.countdown-row-wrapper.countdown-row-end.disabled #btn-trigger-countdown,
.countdown-row-wrapper.countdown-row-end.disabled #input-end-countdown-minutes,
.countdown-row-wrapper.countdown-row-end.disabled span {
    color: var(--text-muted) !important;
}

.countdown-row-wrapper.countdown-row-end.disabled > div {
    border-right-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

/* Active Countdown Panel */
.active-countdown-panel {
    background: rgba(1, 169, 209, 0.10);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    margin-top: 10px;
    color: #ffffff;
}

/* Start Countdown Card & Pregame Card Styling */
.pregame-waiting-card {
    background: linear-gradient(135deg, rgba(1, 169, 209, 0.08), rgba(10, 15, 26, 0.9)) !important;
    border: 1px solid rgba(1, 169, 209, 0.3) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    text-align: center;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
}

.start-countdown-card {
    background: linear-gradient(135deg, rgba(1, 169, 209, 0.18), rgba(11, 13, 16, 0.95)) !important;
    border: 2px solid var(--accent-cyan) !important;
    border-radius: 12px !important;
    padding: 20px 16px !important;
    text-align: center;
    box-shadow: 0 0 30px rgba(1, 169, 209, 0.35) !important;
    animation: startCountdownPulse 1.2s ease-in-out infinite alternate;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
}

@keyframes startCountdownPulse {
    0% {
        box-shadow: 0 0 15px rgba(1, 169, 209, 0.25);
        border-color: rgba(1, 169, 209, 0.7) !important;
    }
    100% {
        box-shadow: 0 0 35px rgba(1, 169, 209, 0.6), inset 0 0 20px rgba(1, 169, 209, 0.15);
        border-color: var(--accent-cyan) !important;
    }
}

.start-countdown-digits {
    font-family: var(--font-orbitron);
    font-size: 3.2rem;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 0 0 20px var(--accent-cyan-glow), 0 0 40px rgba(1, 169, 209, 0.8);
    line-height: 1.1;
    margin: 8px 0;
    letter-spacing: 2px;
    animation: digitScalePop 1s ease-in-out infinite;
}

@keyframes digitScalePop {
    0% { transform: scale(0.96); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; text-shadow: 0 0 28px var(--accent-cyan-glow), 0 0 50px rgba(1, 169, 209, 1); }
    100% { transform: scale(0.96); opacity: 0.9; }
}

.start-countdown-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-orbitron);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--accent-cyan);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(1, 169, 209, 0.12);
    border: 1px solid rgba(1, 169, 209, 0.4);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 4px;
}

.start-countdown-title {
    font-family: var(--font-orbitron);
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    margin-top: 6px;
    letter-spacing: 0.5px;
}

.start-countdown-subtitle {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-top: 4px;
    line-height: 1.4;
}

.start-countdown-sub {
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.4;
    margin-top: 6px;
}

/* Destructive Actions Row (50% / 50%) */
.destructive-actions-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.btn-ghost-danger {
    flex: 1;
    height: 42px;
    margin: 0;
    padding: 0 8px;
    font-size: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: bold;
    border-radius: var(--btn-radius);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.btn-ghost-danger:hover:not(:disabled) {
    border-color: rgba(255, 74, 90, 0.6);
    background: rgba(255, 74, 90, 0.12);
    color: var(--text-danger);
    box-shadow: 0 0 10px rgba(255, 74, 90, 0.2);
}

.btn-ghost-danger:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.05);
}

/* Scenario Action Buttons */
.btn-scenario-export {
    flex: 1;
    height: 42px;
    margin: 0;
    padding: 0 8px;
    font-size: 0.72rem;
    border: 1px solid rgba(1, 169, 209, 0.3);
    background: rgba(1, 169, 209, 0.08);
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: bold;
    border-radius: var(--btn-radius);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-scenario-export:hover:not(:disabled) {
    background: rgba(1, 169, 209, 0.18);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 12px rgba(1, 169, 209, 0.35);
}

.btn-scenario-export:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

.btn-scenario-import {
    flex: 1;
    height: 42px;
    margin: 0;
    padding: 0 8px;
    font-size: 0.72rem;
    border: 1px solid rgba(255, 124, 0, 0.3);
    background: rgba(255, 124, 0, 0.08);
    color: var(--accent-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: bold;
    border-radius: var(--btn-radius);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-scenario-import:hover:not(:disabled) {
    background: rgba(255, 124, 0, 0.18);
    border-color: var(--accent-orange);
    box-shadow: 0 0 12px rgba(255, 124, 0, 0.35);
}

.btn-scenario-import:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

/* SUBTLE CYAN BORDER PULSE FOR OUTER PLAYER PANEL ON SPELLEIDING MESSAGE */
.player-panel.pulse-cyan-border {
    animation: cyanPanelBorderPulse 6.5s ease-in-out infinite;
    transition: border-color 1.2s ease, box-shadow 1.2s ease;
}

@keyframes cyanPanelBorderPulse {
    0%, 100% {
        border-color: var(--border-color);
        box-shadow: var(--shadow-card);
    }
    50% {
        border-color: rgba(1, 169, 209, 0.55);
        box-shadow: 0 0 8px rgba(1, 169, 209, 0.25), var(--shadow-card);
    }
}

/* IOS-STYLE TOP BANNER FOR AN INCOMING SPELLEIDER CHAT MESSAGE */
.ios-chat-banner {
    position: fixed;
    top: max(16px, env(safe-area-inset-top, 16px));
    left: 50%;
    transform: translateX(-50%) translateY(-140%);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(88vw, 400px);
    padding: 14px 16px;
    background: rgba(13, 23, 36, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(1, 169, 209, 0.35);
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 22px rgba(1, 169, 209, 0.22);
    cursor: pointer;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.ios-chat-banner.ios-chat-banner-show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.ios-chat-banner.ios-chat-banner-hide {
    transform: translateX(-50%) translateY(-140%);
    opacity: 0;
}

.ios-chat-banner-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(1, 169, 209, 0.18);
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ios-chat-banner-text {
    flex: 1;
    min-width: 0;
}

.ios-chat-banner-title {
    font-family: var(--font-orbitron);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.ios-chat-banner-msg {
    font-size: 0.85rem;
    color: var(--text-body);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* SPELLEIDER PLAYER PORTAL 2-COLUMN DUAL PANEL */
.spelleider-player-grid {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(280px, 420px);
    justify-content: center;
    align-items: start;
    gap: 16px;
    margin: 0 auto;
    width: 100%;
    max-width: 860px;
}

.spelleider-teams-panel {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    align-self: start;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 20px 18px;
    box-shadow: var(--shadow-card);
    margin: 0;
}

.spelleider-player-column {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    align-self: start;
    margin: 0;
}

.spelleider-player-column .player-container {
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 0;
}

.spelleider-player-column .player-panel {
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    margin: 0;
    box-shadow: var(--shadow-card);
}

.spelleider-team-item {
    transition: background 0.15s ease, border-color 0.15s ease;
}

.spelleider-team-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

@media (max-width: 880px) {
    .spelleider-player-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: 16px;
    }
}

/* ==============================================================================
   UNIFIED MODALS & DIALOG SYSTEM
   ============================================================================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 7, 10, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.modal-window {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-modal);
    width: 100%;
    max-width: 440px;
    padding: 22px 20px;
    box-sizing: border-box;
    position: relative;
    text-align: left;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header .modal-title {
    margin: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--btn-radius);
    transition: var(--transition);
}

.modal-close-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* ANIMATED HOURGLASS */
.animated-hourglass {
    animation: hourglassFlip 4s ease-in-out infinite;
    transform-origin: center center;
    display: inline-block;
    filter: drop-shadow(0 0 8px rgba(1, 169, 209, 0.6));
}

@keyframes hourglassFlip {
    0% {
        transform: rotate(0deg);
    }
    35% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    85% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ==============================================================================
   CLEAN & MODERN MOBILE LOGIN UI
   ============================================================================== */
#player-login.player-panel {
    background: rgba(14, 22, 34, 0.94) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(1, 169, 209, 0.35) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(1, 169, 209, 0.16) !important;
    padding: 24px 20px !important;
    margin: 16px auto 32px auto !important;
    max-width: 440px !important;
    width: calc(100% - 16px) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (max-width: 480px) {
    #player-login.player-panel {
        padding: 20px 16px !important;
        margin: 12px auto 24px auto !important;
        border-radius: 18px !important;
        width: calc(100% - 12px) !important;
    }
}

#player-login.player-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity: 0.85;
}

/* Header & Brand styling */
.login-header {
    text-align: center;
    margin-bottom: 22px;
    position: relative;
}

.login-brand-icon-wrap {
    width: 50px;
    height: 50px;
    margin: 0 auto 12px auto;
    background: radial-gradient(circle, rgba(1, 169, 209, 0.22) 0%, rgba(1, 169, 209, 0.04) 70%);
    border: 1.5px solid rgba(1, 169, 209, 0.4);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px rgba(1, 169, 209, 0.22);
}

.login-brand-icon-wrap svg {
    width: 26px;
    height: 26px;
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 6px var(--accent-cyan-glow));
}

.login-title {
    font-family: var(--font-orbitron);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #ffffff;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(1, 169, 209, 0.35);
}

.login-subtitle {
    font-size: 0.83rem;
    color: var(--text-muted);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.login-device-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 124, 0, 0.1);
    border: 1px solid rgba(255, 124, 0, 0.32);
    border-radius: var(--btn-radius);
    color: #ffaa5a;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.login-device-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-orange);
    box-shadow: 0 0 6px var(--accent-orange);
    animation: pulseDot 2s infinite ease-in-out;
}

/* Same small pulsing dot, generalized for any live-status indicator
   (lobby open/closed, team in-game/in-lobby, etc.) - a plain CSS dot
   instead of a platform emoji (🟢/🔴), which renders differently per OS
   and browser and doesn't match the app's own icon language. */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    animation: pulseDot 2s infinite ease-in-out;
}
.status-dot-green {
    background-color: var(--text-success, #1cdb7f);
    box-shadow: 0 0 6px var(--text-success, #1cdb7f);
}
.status-dot-red {
    background-color: var(--text-danger, #ff4a5a);
    box-shadow: 0 0 6px var(--text-danger, #ff4a5a);
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
}

/* Modern Input Controls for Mobile */
.login-form-group {
    margin-bottom: 18px;
    text-align: left;
}

.login-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.84rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 7px;
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.login-input-icon {
    position: absolute;
    left: 14px;
    color: var(--accent-cyan);
    opacity: 0.75;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.login-input-icon svg {
    width: 18px;
    height: 18px;
}

.login-input-text {
    width: 100% !important;
    height: 48px !important;
    padding: 10px 14px 10px 42px !important;
    background: rgba(7, 12, 19, 0.8) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
    font-family: inherit !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.login-input-text:focus {
    border-color: var(--accent-cyan) !important;
    background: rgba(10, 18, 28, 0.98) !important;
    box-shadow: 0 0 0 3px rgba(1, 169, 209, 0.22), 0 0 12px rgba(1, 169, 209, 0.2) !important;
}

.login-input-text::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.88rem;
}

.login-helper-text {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.35;
}

/* Randomize Pill Button */
.btn-randomize-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: rgba(1, 169, 209, 0.1);
    border: 1px solid rgba(1, 169, 209, 0.3);
    border-radius: var(--btn-radius);
    color: var(--accent-cyan);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.btn-randomize-pill:hover,
.btn-randomize-pill:active {
    background: rgba(1, 169, 209, 0.22);
    border-color: var(--accent-cyan);
    transform: translateY(-1px);
}

/* Emoticon Grid Container */
.emoticon-picker-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
    background: rgba(7, 12, 19, 0.75) !important;
    padding: 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-sizing: border-box !important;
}

.emoticon-picker-grid .emoticon-option {
    aspect-ratio: 1 / 1;
    height: 48px;
    min-height: 48px;
    font-size: 1.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.emoticon-picker-grid .emoticon-option:active {
    transform: scale(0.92);
}

.emoticon-picker-grid .emoticon-option.selected {
    background: rgba(1, 169, 209, 0.25) !important;
    border: 2px solid var(--accent-cyan) !important;
    box-shadow: 0 0 14px rgba(1, 169, 209, 0.45) !important;
    transform: scale(1.06) !important;
}

/* Primary Action Buttons */
.btn-login-primary {
    width: 100% !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #01a9d1 0%, #0077b6 100%) !important;
    color: #ffffff !important;
    font-family: var(--font-orbitron) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    border: none !important;
    border-radius: var(--btn-radius) !important;
    box-shadow: 0 4px 18px rgba(1, 169, 209, 0.35) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-transform: uppercase !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btn-login-primary:hover,
.btn-login-primary:active {
    background: linear-gradient(135deg, #00c0ec 0%, #008cd4 100%) !important;
    box-shadow: 0 6px 24px rgba(1, 169, 209, 0.55) !important;
    transform: translateY(-1px) !important;
}

.btn-login-primary:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Code Verification Card (Step 2B) */
.login-code-card {
    background: radial-gradient(ellipse at top, rgba(1, 169, 209, 0.12) 0%, rgba(12, 18, 27, 0.95) 100%) !important;
    border: 1.5px solid rgba(1, 169, 209, 0.35) !important;
    border-radius: 16px !important;
    padding: 22px 18px !important;
    text-align: center !important;
}

.login-code-badge {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px auto;
    background: rgba(1, 169, 209, 0.15);
    border: 1.5px solid var(--accent-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 0 16px rgba(1, 169, 209, 0.3);
}

.login-code-input {
    width: 170px !important;
    height: 52px !important;
    text-align: center !important;
    font-size: 1.7rem !important;
    letter-spacing: 8px !important;
    font-family: var(--font-orbitron) !important;
    font-weight: 800 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 2px solid var(--accent-cyan) !important;
    border-radius: 12px !important;
    color: #00f0ff !important;
    box-shadow: 0 0 16px rgba(1, 169, 209, 0.25) !important;
    outline: none !important;
    margin: 16px auto !important;
    display: block !important;
}

.login-code-input:focus {
    box-shadow: 0 0 24px rgba(1, 169, 209, 0.5) !important;
    border-color: #00f0ff !important;
}

/* Back and secondary links */
.btn-login-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--btn-radius);
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.btn-login-secondary:hover,
.btn-login-secondary:active {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.btn-login-resend {
    border-color: rgba(1, 169, 209, 0.35);
    color: var(--accent-cyan);
    background: rgba(1, 169, 209, 0.08);
}

.btn-login-resend:hover,
.btn-login-resend:active {
    color: #ffffff;
    background: rgba(1, 169, 209, 0.2);
    border-color: var(--accent-cyan);
}

/* ==============================================================================
   SLEEK CLOSED LOBBY CARD & MODERN SVG ICON
   ============================================================================== */
.login-closed-card {
    text-align: center !important;
    background: radial-gradient(ellipse at top, rgba(255, 124, 0, 0.12) 0%, rgba(14, 20, 30, 0.95) 100%) !important;
    border: 1.5px solid rgba(255, 124, 0, 0.4) !important;
    border-radius: 16px !important;
    padding: 24px 18px !important;
    margin: 12px 0 6px 0 !important;
    box-shadow: 0 8px 30px rgba(255, 124, 0, 0.15), inset 0 0 15px rgba(255, 124, 0, 0.04) !important;
    animation: pulseBorderOrange 3s infinite ease-in-out !important;
}

.login-closed-icon-wrap {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px auto;
    background: radial-gradient(circle, rgba(255, 124, 0, 0.22) 0%, rgba(255, 124, 0, 0.04) 70%);
    border: 1.5px solid rgba(255, 124, 0, 0.45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 124, 0, 0.28);
}

.login-closed-icon-wrap svg {
    width: 28px;
    height: 28px;
    color: var(--accent-orange);
    filter: drop-shadow(0 0 8px rgba(255, 124, 0, 0.6));
}

.login-closed-title {
    color: var(--accent-orange) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    margin: 0 0 8px 0 !important;
    text-shadow: 0 0 10px rgba(255, 124, 0, 0.35) !important;
}

.login-closed-text {
    font-size: 0.84rem !important;
    color: #cbd5e1 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

@keyframes pulseBorderOrange {
    0%, 100% { border-color: rgba(255, 124, 0, 0.35); box-shadow: 0 8px 30px rgba(255, 124, 0, 0.12); }
    50% { border-color: rgba(255, 124, 0, 0.75); box-shadow: 0 8px 30px rgba(255, 124, 0, 0.28); }
}

/* Same card language as .login-closed-card, in the app's success-green
   instead of "blocked" orange - used for the FINISH waypoint banner. */
.finish-reached-card {
    background: radial-gradient(ellipse at top, rgba(28, 219, 127, 0.14) 0%, rgba(14, 20, 30, 0.95) 100%) !important;
    border: 1.5px solid rgba(28, 219, 127, 0.4) !important;
    box-shadow: 0 8px 30px rgba(28, 219, 127, 0.18), inset 0 0 15px rgba(28, 219, 127, 0.05) !important;
    animation: pulseBorderGreen 3s infinite ease-in-out !important;
}

.finish-reached-icon-wrap {
    background: radial-gradient(circle, rgba(28, 219, 127, 0.22) 0%, rgba(28, 219, 127, 0.04) 70%);
    border-color: rgba(28, 219, 127, 0.45);
    box-shadow: 0 0 20px rgba(28, 219, 127, 0.3);
}

.finish-reached-icon-wrap svg {
    color: var(--text-success);
    filter: drop-shadow(0 0 8px rgba(28, 219, 127, 0.6));
}

.finish-reached-title {
    color: var(--text-success) !important;
    text-shadow: 0 0 10px rgba(28, 219, 127, 0.35) !important;
}

@keyframes pulseBorderGreen {
    0%, 100% { border-color: rgba(28, 219, 127, 0.35); box-shadow: 0 8px 30px rgba(28, 219, 127, 0.12); }
    50% { border-color: rgba(28, 219, 127, 0.75); box-shadow: 0 8px 30px rgba(28, 219, 127, 0.28); }
}

/* ==============================================================================
   WELCOME BACK SCREEN - STYLISH MINIMALIST SVG ICON
   ============================================================================== */
.login-code-icon-wrap {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px auto;
    background: radial-gradient(circle, rgba(1, 169, 209, 0.22) 0%, rgba(1, 169, 209, 0.04) 70%);
    border: 1.5px solid rgba(1, 169, 209, 0.45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(1, 169, 209, 0.25);
}

.login-code-icon-wrap svg {
    width: 26px;
    height: 26px;
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 8px rgba(1, 169, 209, 0.6));
}

/* ==============================================================================
   MODERN GAME SETUP / SPEL BESTURING COMMAND PANEL
   ============================================================================== */
.admin-control-section-title {
    font-family: var(--font-orbitron);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 4px 0 2px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-control-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.btn-game-control-modern {
    height: 42px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: var(--btn-radius);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.btn-game-control-modern:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn-game-control-modern:active:not(:disabled) {
    transform: translateY(0);
}

/* ==============================================================================
   QUESTIONS/MEDIA PREVIEW MODAL
   ============================================================================== */
.preview-waypoint-block {
    margin-bottom: 22px;
}

.preview-waypoint-block:last-child {
    margin-bottom: 0;
}

.preview-waypoint-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: -18px;
    background: var(--bg-panel);
    z-index: 2;
}

.preview-waypoint-badge {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    font-family: var(--font-orbitron);
    white-space: nowrap;
}

.preview-waypoint-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
}

.preview-empty {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
    padding: 4px 0 12px;
}


/* ==============================================================================
   SEGMENTED TIME/NUMBER ANSWER INPUTS
   ============================================================================== */
.time-digit-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
    padding: 16px 0 20px;
}

.time-digit-box {
    width: 52px;
    height: 62px;
    text-align: center;
    font-family: var(--font-orbitron);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
    /* Apple-TV-passcode-inspired glass tile: soft gradient, blurred backdrop,
       subtle inner highlight along the top edge, gentle ambient glow. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -6px 10px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    transition: all 0.2s ease;
    /* A blinking text caret looks out of place on a single-glyph "passcode
       tile" - the glowing focus ring below already shows which box is
       active, so the caret is just visual clutter (and often renders
       slightly off-center in an empty centered field, looking like a
       stray mark rather than a cursor). */
    caret-color: transparent;
}

.time-digit-box:hover:not(:disabled) {
    border-color: rgba(1, 169, 209, 0.4);
    transform: translateY(-1px);
}

.time-digit-box:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -6px 10px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(1, 169, 209, 0.2), 0 0 18px rgba(1, 169, 209, 0.45);
}

.time-digit-box:disabled {
    opacity: 0.4;
}

/* Fillable answer-format field ("Toon antwoordformaat aan speler" toggle on
   an open text answer) - ONE continuous glass pill (same look as
   .number-unit-box/.time-digit-box) containing a real per-letter <input>
   per character, each just an underline until typed into (no placeholder
   glyph - one visual cue, not two). A space in the answer is a plain gap,
   not a cell - see buildLetterBoxAnswerHTML() in js/player.js. */
.letterbox-group {
    display: flex;
    align-items: center;
    /* Centered when the row fits (the common case) - `safe center` falls
       back to flex-start only once it actually overflows, so a scrolling
       answer never starts with its first cell scrolled out of view. The
       plain `center` line first is a fallback for browsers that don't know
       the `safe` keyword and would otherwise drop the whole declaration. */
    justify-content: center;
    justify-content: safe center;
    /* A long answer (e.g. a multi-word "klasse" name) has more letter-cells
       than fit in one row on a narrow phone screen - wrapping onto several
       rows looked broken, so this scrolls horizontally in a single row
       instead (see also nextSortKeyInBucket()'s comment style: this is a
       deliberate tradeoff, not an oversight - a phone-width hard cap on
       cell count isn't practical since answer length varies per question). */
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 14px;
}

.letterbox-cell {
    /* Width stays narrow on purpose - a long answer can be 10+ letters, and
       44pt per cell simply doesn't fit a phone screen (same tradeoff Apple's
       own multi-digit verification-code fields make). Height had headroom
       to grow toward the 44pt minimum tap target without that constraint. */
    width: 20px;
    height: 44px;
    flex-shrink: 0;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--text-main);
    font-family: var(--font-orbitron);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 0;
    transition: border-color 0.2s ease;
    caret-color: transparent;
}

.letterbox-cell:focus {
    outline: none;
    border-bottom-color: var(--accent-cyan);
}

.letterbox-gap {
    width: 10px;
    flex-shrink: 0;
}

.letterbox-suffix {
    flex-shrink: 0;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--border-color);
    font-family: var(--font-orbitron);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.letterbox-cell:disabled {
    opacity: 0.4;
}

/* "slider" question type ("Getal slider") - spelleider-configured min/max/
   step, see buildSliderAnswerAreaHTML() in js/player.js. */
.slider-value-display {
    text-align: center;
    font-family: var(--font-orbitron);
    font-weight: 800;
    font-size: 2rem;
    color: var(--accent-cyan);
}

input.slider-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
    margin: 6px 0;
    /* Safety net for whichever thumb pseudo-element a given browser
       doesn't fully let -webkit-appearance:none override - keeps the
       native-painted fallback on-brand instead of the OS/browser default
       accent (often red/blue) if that ever happens. */
    accent-color: var(--accent-cyan);
}

input.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(1, 169, 209, 0.2);
    cursor: pointer;
    transition: transform 0.15s ease;
}

input.slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.08);
}

input.slider-input::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(1, 169, 209, 0.2);
    cursor: pointer;
}

input.slider-input:disabled {
    opacity: 0.4;
}

input.slider-input:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

.slider-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-orbitron);
    font-weight: 600;
}

/* "sequence" question type ("Zet in volgorde") - tap-to-order instead of
   drag-and-drop, which is fiddly on a phone. See buildSequenceAnswerAreaHTML()
   in js/player.js. */
.sequence-pool {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 20px;
}

.sequence-pool-empty {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.sequence-pool-chip {
    padding: 10px 16px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sequence-pool-chip:hover:not(:disabled) {
    border-color: var(--accent-cyan);
    background: rgba(1, 169, 209, 0.1);
    transform: translateY(-1px);
}

.sequence-pool-chip:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.sequence-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.sequence-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: left;
    font-family: var(--font-sans);
    transition: all 0.2s ease;
}

.sequence-slot-empty {
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.02);
}

.sequence-slot-filled {
    border: 1px solid rgba(1, 169, 209, 0.4);
    background: rgba(1, 169, 209, 0.08);
    cursor: pointer;
}

.sequence-slot-filled:hover:not(:disabled) {
    border-color: var(--accent-cyan);
    background: rgba(1, 169, 209, 0.15);
}

.sequence-slot-filled:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sequence-slot-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(1, 169, 209, 0.18);
    color: var(--accent-cyan);
    font-family: var(--font-orbitron);
    font-weight: 800;
    font-size: 0.78rem;
}

.sequence-slot-text {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.sequence-slot-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
}

.sequence-slot-filled:hover:not(:disabled) .sequence-slot-remove {
    color: var(--text-danger);
    background: rgba(255, 74, 90, 0.15);
}

.time-digit-colon {
    font-family: var(--font-orbitron);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-muted);
}

.time-digit-suffix {
    flex-shrink: 0;
    height: 62px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-orbitron);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--accent-cyan);
    background: rgba(1, 169, 209, 0.12);
    border: 1px solid rgba(1, 169, 209, 0.25);
    border-radius: 16px;
    padding: 0 14px;
    white-space: nowrap;
}

/* ==============================================================================
   COLORED-DOTS ANSWER INPUT
   ============================================================================== */
.color-dot-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    padding: 14px 0 18px;
}

.color-dot-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    /* Glossy gem look: bright highlight along the top, soft shadow along
       the bottom, plus a drop shadow to lift it off the background. */
    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.4), inset 0 -4px 7px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.color-dot-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.06);
    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.45), inset 0 -4px 7px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(1, 169, 209, 0.3);
}

.color-dot-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.94);
}

.color-dot-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.number-unit-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -6px 10px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.35);
    padding: 4px 6px 4px 16px;
    margin: 16px 0 20px;
    transition: all 0.2s ease;
}

.number-unit-box:focus-within {
    border-color: var(--accent-cyan);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -6px 10px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(1, 169, 209, 0.2), 0 0 18px rgba(1, 169, 209, 0.45);
}

.number-unit-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-family: var(--font-orbitron);
    font-size: 1.3rem;
    font-weight: 800;
    padding: 10px 0;
}

.number-unit-input:focus {
    outline: none;
}

.number-unit-input:disabled {
    opacity: 0.4;
}

.number-unit-suffix {
    flex-shrink: 0;
    font-family: var(--font-orbitron);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--accent-cyan);
    background: rgba(1, 169, 209, 0.12);
    border-radius: 7px;
    padding: 8px 12px;
    white-space: nowrap;
}

/* Standalone info notice from the spelleider - a sibling of the question
   card, never nested inside it (see renderSubquestionCards() in js/player.js
   and buildPreviewQuestionCardHTML() in js/admin.js). */
.player-info-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    padding: 2px 2px 0;
    margin: 6px 0 24px;
}

.player-info-notice-text {
    font-size: 0.92rem;
    color: var(--text-body);
    line-height: 1.62;
    /* pre-wrap is vervallen: de tekst wordt nu opgebouwd uit echte alinea's en
       lijsten (zie renderRichText() in js/state.js) in plaats van als een blok
       platte tekst met regeleindes. */
}
.player-info-notice-text > :first-child { margin-top: 0; }
.player-info-notice-text > :last-child { margin-bottom: 0; }
.rt-alinea { margin: 0 0 15px; }
.rt-kop {
    margin: 26px 0 11px;
    font-family: var(--font-orbitron);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--text-light);
}
.rt-lijn {
    margin: 22px 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.rt-lijst {
    margin: 0 0 15px;
    padding: 0;
    list-style: none;
}
.rt-lijst li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 9px;
}
/* Het symbool staat in een eigen kolom, zodat doorlopende tekst netjes
   inspringt in plaats van onder het bolletje door te lopen. */
.rt-bolletje {
    flex-shrink: 0;
    width: 15px;
    text-align: center;
    line-height: 1.5;
}
.rt-punt .rt-bolletje { color: var(--accent-cyan); }
.rt-vink .rt-bolletje { color: var(--text-success); }
.rt-let-op .rt-bolletje { color: var(--accent-orange); }
.rt-stap .rt-bolletje { color: var(--accent-cyan); }
.rt-weetje .rt-bolletje { color: var(--accent-cyan); }
.rt-locatie .rt-bolletje { color: var(--accent-cyan); }
.rt-genummerd {
    list-style: decimal;
    padding-left: 22px;
}
.rt-genummerd li { display: list-item; margin-bottom: 9px; }
.rt-genummerd::marker, .rt-genummerd li::marker {
    color: var(--accent-cyan);
    font-family: var(--font-orbitron);
    font-weight: 700;
}

/* ==============================================================================
   14. TABLET / IPAD ADAPTATIONS (player-facing screens only)
   `pointer: coarse` targets touch input specifically, so a desktop/mouse
   browser window resized into this range (e.g. the admin's embedded live-
   player preview in .spelleider-player-column, which already has its own
   fixed 420px override at all widths) is left untouched. Portrait iPad
   (~768-834px) already goes full-width via the existing max-width:900px
   mobile block above; this targets the gap that leaves uncovered - iPad
   landscape (~1024-1194px), where .player-container was otherwise stuck at
   its phone-era 480px cap with large empty margins either side - plus
   touch-target sizing that benefits from the extra room a tablet has over
   a phone, without changing the phone layout itself. */
@media (pointer: coarse) and (min-width: 700px) and (max-width: 1300px) {
    .player-container {
        max-width: 640px;
    }

    .letterbox-cell {
        width: 30px;
        height: 46px;
        font-size: 1.2rem;
    }

    .letterbox-group {
        gap: 8px;
        padding: 14px 22px;
    }

    .letterbox-gap {
        width: 14px;
    }

    .sequence-pool-chip {
        padding: 13px 20px;
        font-size: 1rem;
    }

    .camera-modal-view {
        max-width: 640px;
    }
}




/* Apple HIG / WCAG: respect the system-level "reduce motion" preference.
   The app has 20+ separate @keyframes animations (pulsing borders, glows,
   bounces) triggered from many different rules - rather than hunt down and
   individually guard each one, this single global override neutralizes all
   of them at once for anyone who has turned motion down, which is the
   standard, low-risk way to satisfy this without touching the animations
   themselves. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Apple HIG / accessibility: every interactive element needs a clearly
   visible focus indicator for keyboard, switch-control and VoiceOver
   navigation - not just a hover state, which those input methods never
   trigger. Scoped to :focus-visible so it only appears for keyboard/
   assistive-tech focus, not on every mouse click. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-cyan, #01a9d1);
    outline-offset: 2px;
}

/* Partner/developer credit logos shown at the bottom of the login screens
   (player join form, admin login gate) - muted so it never competes with
   the actual form above it. */
.login-partner-footer {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.login-partner-footer-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted, #8899ab);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.login-partner-footer-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    opacity: 0.85;
}

.login-partner-logo {
    height: 22px;
    width: auto;
    display: block;
}

.login-partner-footer-logos a {
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

.login-partner-footer-logos a:hover,
.login-partner-footer-logos a:focus-visible {
    opacity: 0.7;
}

/* Compact "number + unit" input for admin sidebar controls (time penalty
   minutes) - same visual language as .input-text/.input-select rather than
   the glossy glass-tile style used for player-facing answer fields, since
   this sits in a dense settings sidebar, not a puzzle screen. */
.admin-suffix-input-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-sizing: border-box;
    transition: var(--transition);
    overflow: hidden;
}

.admin-suffix-input-wrap:focus-within {
    border-color: var(--accent-cyan);
}

.admin-suffix-input-wrap input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    padding: 11px 0 11px 14px;
    font-size: 0.9rem;
    font-family: var(--font-sans);
    box-sizing: border-box;
}

.admin-suffix-input-wrap .admin-suffix-label {
    flex-shrink: 0;
    padding: 0 14px 0 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* "Loop naar het volgende punt" - the map jumping to a new waypoint was
   previously the only cue that a team had to start walking, and it sits below
   the question card where nobody was looking. See highlightNextWaypointOnMap()
   in js/player.js. */
.next-waypoint-banner {
    margin: 0 0 8px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(255, 124, 0, 0.12);
    border: 1px solid rgba(255, 124, 0, 0.4);
    color: var(--text-light);
    font-size: 0.82rem;
    line-height: 1.35;
}
.next-waypoint-banner strong {
    color: var(--accent-orange);
    font-family: var(--font-orbitron);
    letter-spacing: 0.3px;
}
.next-waypoint-banner-pulse {
    animation: nextWaypointPulse 1s ease-in-out 3;
}
@keyframes nextWaypointPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 124, 0, 0); }
    50% { box-shadow: 0 0 14px 2px rgba(255, 124, 0, 0.45); }
}
.map-attention-flash {
    animation: mapAttentionFlash 1.3s ease-in-out 2;
}
@keyframes mapAttentionFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 124, 0, 0); border-color: rgba(255, 255, 255, 0.12); }
    50% { box-shadow: 0 0 18px 3px rgba(255, 124, 0, 0.5); border-color: rgba(255, 124, 0, 0.7); }
}

/* Clear button inside the answer fields - see clearSubqAnswer() in
   js/player.js. Deleting typed text (especially in the per-character digit and
   letter cells) was awkward on a phone: backspace only ever emptied the one
   cell the caret happened to be in. */
.subq-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.subq-clear-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    z-index: 3;
}
.subq-clear-btn:hover,
.subq-clear-btn:focus-visible {
    color: var(--text-light);
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
}
.subq-clear-btn.visible { display: flex; }
/* ---- Bladeren tussen de bladzijden van een waypoint -------------------
   Vorige en Volgende horen bij elkaar, dus staan ze bij elkaar: onderaan de
   bladzijde, vlak boven de knop vooruit. Zo is alles wat met navigeren te
   maken heeft op een plek, in plaats van verdeeld over de bovenkant en de
   onderkant van het scherm.

   Terugkijken is geen hoofdhandeling en krijgt daarom geen knop maar een
   rustige chevron. De stippen vertellen waar je bent - korter te lezen dan
   "bladzijde 2 van 4", en ze schreeuwen niet. Onderaan is ook precies waar
   Apple zijn stippenrijtje zet.

   Het aanraakvlak is 44px hoog (de maat die Apple aanhoudt), ook al ziet de
   balk er smal uit: de ruimte zit in de padding, niet in de inkt. */
.blader-balk {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    min-height: 44px;
}
.blader-balk > :last-child { justify-self: end; }
.blader-balk .blader-knop { justify-self: start; }
.blader-balk > :last-child.blader-knop { justify-self: end; }

.blader-knop {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 11px 2px;
    margin: 0;
    background: none;
    border: none;
    color: var(--accent-cyan);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.blader-knop:hover, .blader-knop:focus-visible { opacity: 0.7; }
.blader-knop:active { opacity: 0.45; }

.blader-terugmelding {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.blader-stippen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.blader-stip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transition: background 0.2s ease;
}
.blader-stip.actief { background: var(--accent-cyan); }

/* De knop vooruit: de enige gevulde knop in de balk. Een pil, compact, want
   hij hoort bij de regel en niet bij de kaart erboven. */
.blader-vooruit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 40px;
    padding: 10px 14px 10px 18px;
    margin: 0;
    border: none;
    border-radius: var(--btn-radius);
    background: var(--accent-orange);
    color: #000;
    font-family: var(--font-orbitron);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(255, 82, 39, 0.3);
    transition: var(--transition);
}
.blader-vooruit:hover:not(:disabled), .blader-vooruit:focus-visible { filter: brightness(1.08); }
.blader-vooruit:active:not(:disabled) { transform: scale(0.97); }
.blader-vooruit:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.blader-balk > .blader-vooruit { justify-self: end; }

/* ---- De handelingen onder een vraag -----------------------------------
   Eerst stonden Wissen en Indienen naast elkaar even hoog, met Hint los op
   een derde regel erna - twee knoppen van duidelijk verschillend gewicht
   die toch om dezelfde regel streden, en dan nog een aparte regel erachter.

   Nu is er één hoofdhandeling die alleen op zijn eigen volle regel staat:
   Indienen. Wissen en Hint zijn geen van beide de hoofdhandeling - het een
   is opruimen, het ander is een uitzondering opzoeken - dus staan ze samen,
   even stil, op de regel eronder: Wissen links bij het veld dat het leegt,
   Hint rechts. */
.antwoord-subrij {
    display: flex;
    align-items: center;
    width: 100%;
}

.antwoord-wissen,
.stil-knop-klein {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 2px;
    margin: 0;
    background: none;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.antwoord-wissen { color: var(--text-muted); }
.stil-knop-klein { color: var(--text-muted); margin-left: auto; }

.antwoord-wissen:hover, .antwoord-wissen:focus-visible { opacity: 0.7; color: var(--text-main); }
.stil-knop-klein:hover, .stil-knop-klein:focus-visible { opacity: 0.7; }
.antwoord-wissen:active, .stil-knop-klein:active { opacity: 0.45; }

/* Het vergrootknopje ligt in de hoek op de foto, zoals in elke fotoviewer.
   Het omhulsel krimpt om de foto heen, zodat de hoek ook echt de hoek van de
   foto is en niet die van het vak eromheen. */
.foto-met-vergroot {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}
.foto-vergroot {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    transition: background 0.15s ease;
}
.foto-vergroot:hover, .foto-vergroot:focus-visible { background: rgba(0, 0, 0, 0.75); }

/* Een knop zonder knop eromheen: alleen tekst in de accentkleur, over de
   volle breedte zodat hij op een telefoon ruim te raken is. */
.stil-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    padding: 11px 12px;
    margin: 0;
    background: none;
    border: none;
    color: var(--accent-cyan);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.stil-knop:hover, .stil-knop:focus-visible { opacity: 0.7; }
.stil-knop:active { opacity: 0.45; }

/* ---- Alle vragen van een soort achter elkaar --------------------------
   Een balk met chips bovenin het voorbeeldvenster. Hij plakt, want de lijst
   eronder is lang en je wilt onderweg naar een ander soort kunnen springen
   zonder eerst helemaal terug te scrollen. */
.preview-soort-balk {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -18px -22px 16px;
    padding: 12px 22px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
}

.preview-soort-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
}
.preview-soort-chip:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-main); }

/* Op een telefoon past de balk niet op een regel, en tien chips onder elkaar
   eten het halve scherm op. Dan liever een rij die je opzij schuift. */
@media (max-width: 700px) {
    .preview-soort-balk {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .preview-soort-balk::-webkit-scrollbar { display: none; }
    .preview-soort-chip { flex: 0 0 auto; }
}
.preview-soort-chip.actief {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: #001016;
}
.preview-soort-aantal {
    font-family: var(--font-orbitron);
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.75;
}

/* Het goede antwoord bij een vraag in de testlijst. Rustig, want het hoort
   niet bij de vraag maar bij het testen ervan. */
.preview-verwacht {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-md);
    background: rgba(255, 255, 255, 0.02);
}
.preview-verwacht-label {
    font-family: var(--font-orbitron);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.preview-verwacht-waarde {
    font-family: var(--font-orbitron);
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--text-success);
}
.preview-verwacht-alt {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-style: italic;
}
.preview-verwacht-waarschuwing {
    flex-basis: 100%;
    margin-top: 4px;
    font-size: 0.76rem;
    color: var(--accent-orange);
}

/* ---- De losse testpagina op /preview ----------------------------------
   Eén kolom, verder niets. Bedoeld voor een telefoon in je hand terwijl je
   over het terrein loopt: geen dashboard eromheen, geen kaart, geen kolommen
   die opzij wegvallen. */
.preview-pagina {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 0 40px;
    min-height: 100vh;
}

.preview-pagina-kop {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
}

.preview-pagina-titel {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--accent-cyan);
}
.preview-pagina-titel svg { width: 24px; height: 24px; flex-shrink: 0; }
.preview-pagina-titel span {
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.preview-pagina-uit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}
.preview-pagina-uit:hover { color: var(--text-main); border-color: var(--text-muted); }

/* Dezelfde binnenmaat als in het voorbeeldvenster, zodat de balk met soorten
   met zijn negatieve marges precies van rand tot rand blijft lopen. */
.preview-pagina #questions-preview-content {
    padding: 18px 22px 22px;
}
/* In het venster plakt de balk onder de vensterkop; hier onder de paginakop,
   die 65px hoog is. */
.preview-pagina .preview-soort-balk { top: 65px; }

@media (max-width: 700px) {
    .preview-pagina #questions-preview-content { padding: 14px 14px 22px; }
    .preview-pagina .preview-soort-balk { margin: -14px -14px 14px; padding: 12px 14px; }
}

/* iPhone safe areas. viewport-fit=cover (see the viewport meta tag) lets the
   page use the full screen including the area around the notch and the home
   indicator - which also means content can end up UNDER them unless it's
   padded out explicitly. Without this the bottom of the player view and the
   map's own controls could sit behind the home indicator bar. */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
#section-player,
.app-container {
    padding-bottom: env(safe-area-inset-bottom);
}
.map-controls-bottom-right {
    bottom: calc(10px + env(safe-area-inset-bottom));
}
/* In fullscreen the map covers the whole screen, so its controls need the
   full inset rather than a nudge. */
.player-map-fullscreen .map-controls-bottom-right,
.map-fullscreen .map-controls-bottom-right {
    bottom: calc(16px + env(safe-area-inset-bottom));
    right: calc(16px + env(safe-area-inset-right));
}

/* Minimum comfortable touch target. The login screen's small text links were
   28x22 and 76x22 - below the 44x44pt that Apple's guidelines (and plain
   thumb anatomy) call for. The visible text stays exactly the same size; only
   the tappable area grows around it. */
.login-help-link,
.login-footer a,
#player-login a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
}

/* "Geen verbinding" banner. Fixed to the top so it's visible wherever the
   player has scrolled to, and above the map (which creates its own stacking
   context) but below modals. Respects the notch on iPhone. */
.connection-lost-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: calc(9px + env(safe-area-inset-top)) 16px 9px;
    background: rgba(231, 63, 35, 0.96);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.connection-lost-banner svg { flex-shrink: 0; }
.connection-lost-banner.hide { display: none; }

/* ---- Categorie-overzicht in Route Setup -------------------------------
   Twee regels per categorie: naam met aantal locaties, daaronder de bediening.
   Een variant met vier uitgelijnde kolommen is geprobeerd en teruggedraaid -
   dit paneel is ongeveer 300px breed, en daarin botsten de kopteksten en werden
   namen en keuzelijsten afgekapt.

   Wat hier wel vastligt: elk blok is even hoog en het invoerveld staat overal
   op dezelfde plek, ook bij een categorie zonder volgordekeuze. */
.cat-summary-head {
    font-family: var(--font-orbitron);
    font-size: 0.64rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 2px 0 7px;
}
.cat-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-height: 62px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 8px 10px;
    margin-bottom: 5px;
}
.cat-block:last-child { margin-bottom: 0; }
.cat-block-head {
    display: flex;
    align-items: center;
    gap: 7px;
}
.cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cat-dot-leeg {
    background: transparent;
    border: 1px dashed var(--accent-orange);
}
.cat-block-name {
    flex: 1;
    min-width: 0;
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-block-count {
    flex-shrink: 0;
    font-size: 0.67rem;
    color: var(--text-muted);
    white-space: nowrap;
}
/* Vaste kolombreedtes, zodat het invoerveld in elk blok op dezelfde plek
   staat en de keuzelijst overal even breed is. */
.cat-block-controls {
    display: grid;
    grid-template-columns: auto 46px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}
.cat-block-label {
    font-size: 0.67rem;
    color: var(--text-muted);
}
.cat-block-visits,
.cat-order-select {
    height: 25px;
    box-sizing: border-box;
    min-width: 0;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-light);
    font-family: var(--font-orbitron);
    font-size: 0.72rem;
}
.cat-block-visits { width: 100%; text-align: center; padding: 0; }
.cat-order-select { width: 100%; padding: 0 4px; }
.cat-block-visits:focus,
.cat-order-select:focus { outline: none; border-color: var(--accent-cyan); }
/* Waar geen keuze te maken valt staat een streep, zodat de rij dezelfde vorm
   houdt als de andere in plaats van half leeg te ogen. */
.cat-order-leeg {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.72rem;
}
/* Waypoints zonder categorienaam komen in geen enkele route voor. */
.cat-block-leeg { background: rgba(255, 124, 0, 0.07); border-color: rgba(255, 124, 0, 0.3); }
.cat-block-leeg .cat-block-name { color: var(--accent-orange); }
.cat-block-controls .cat-block-note {
    grid-column: 1 / -1;
    font-size: 0.66rem;
    color: var(--text-muted);
}

/* ---- Nette stepper voor getalvelden -----------------------------------
   De spinknoppen die browsers zelf op <input type="number"> zetten zijn niet
   te stylen (je kunt er hooguit de hoogte van veranderen) en zien er op elk
   platform anders uit. Ze worden hier verborgen en vervangen door twee eigen
   chevrons in de kleuren van de app - zie enhanceNumberInputs() in
   js/admin.js, dat dit op elk getalveld toepast in plaats van per veld. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.num-stepper {
    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 1px;
    margin-left: 3px;
    transition: opacity 0.15s ease;
}
.num-stepper-holder {
    display: inline-flex;
    align-items: center;
    position: relative;
}
/* Neemt de plaats in die de input zelf in de flex-rij had, zodat het veld
   precies even breed blijft als voorheen. */
.num-stepper-holder.is-flex-child {
    flex: 1;
    min-width: 0;
}
.num-stepper-holder.is-flex-child > input { width: 100%; }
.num-stepper.is-floating {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}
.has-num-stepper { position: relative; }
/* At rest the field is just a number. The chevrons appear when you reach for
   them, which keeps a panel full of small numeric fields from turning into a
   wall of buttons. On touch there is no hover, so there they are always shown. */
@media (hover: hover) {
    .num-stepper { opacity: 0; pointer-events: none; }
    .num-stepper-holder:hover .num-stepper,
    .num-stepper-holder:focus-within .num-stepper,
    .admin-suffix-input-wrap:hover .num-stepper,
    .admin-suffix-input-wrap:focus-within .num-stepper,
    .cat-field:hover .num-stepper,
    .cat-field:focus-within .num-stepper {
        opacity: 1;
        pointer-events: auto;
    }
}
.num-stepper button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 10px;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.07);
    border: none;
    border-radius: var(--btn-radius);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.num-stepper button:hover {
    background: rgba(1, 169, 209, 0.3);
    color: var(--accent-cyan);
}
.num-stepper button:active { background: rgba(1, 169, 209, 0.45); }
.num-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.num-stepper svg { display: block; }

/* De keuzelijst draagt zijn eigen betekenis ("Verspreid"/"Blok"), dus een
   label "Volgorde" ernaast kostte alleen ruimte - zoveel dat de opties zelf
   werden afgekapt. */
.cat-order-select {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-light);
    padding: 4px 6px;
    font-size: 0.72rem;
    font-family: var(--font-orbitron);
}
.cat-order-select:focus { outline: none; border-color: var(--accent-cyan); }
.cat-field { flex: 0 0 auto; }
.cat-field input { width: 46px; flex: 0 0 auto; }

/* Weggevouwen gereedschap in Route Setup - zie de <details> in admin.html */
.admin-advanced {
    margin-top: 8px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.02);
}
.admin-advanced > summary {
    cursor: pointer;
    list-style: none;
    padding: 7px 10px;
    font-family: var(--font-orbitron);
    font-size: 0.66rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    user-select: none;
}
.admin-advanced > summary::-webkit-details-marker { display: none; }
.admin-advanced > summary::after {
    content: "▾";
    float: right;
    transition: transform 0.2s ease;
}
.admin-advanced[open] > summary::after { transform: rotate(180deg); }
.admin-advanced > summary:hover { color: var(--text-light); }
.admin-advanced-body { padding: 0 10px 10px; }
.admin-advanced-body .btn { margin-top: 6px; }

/* Categorieveld op een waypoint. Verving een native <datalist>, waarvan de
   uitklaplijst volledig door de browser getekend wordt - wit, systeemlettertype
   en niet te stylen. Dit is dezelfde werking (vrij typen of bestaande kiezen)
   maar in de vormgeving van de rest van het paneel. */
.cat-combo {
    position: relative;
    width: 100%;
}
.cat-combo > input { width: 100%; padding-right: 34px !important; box-sizing: border-box; }
.cat-combo-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
}
.cat-combo-toggle:hover { color: var(--accent-cyan); background: rgba(1, 169, 209, 0.12); }
.cat-combo-toggle:disabled { opacity: 0.4; cursor: not-allowed; }
.cat-combo-menu {
    /* Op <body> geplaatst en met vaste positionering neergezet - zie
       positionCategoryComboMenu() in js/admin.js. Binnen de kaart zelf werd
       'm door de overflow van die kaart afgeknipt. */
    position: fixed;
    z-index: 9000;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    background: #0a121c;
    border: 1px solid rgba(1, 169, 209, 0.35);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
}
.cat-combo-menu.hide { display: none; }
.cat-combo-option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}
.cat-combo-option:hover,
.cat-combo-option:focus-visible {
    background: rgba(1, 169, 209, 0.16);
    outline: none;
}
.cat-combo-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cat-combo-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-combo-count {
    flex-shrink: 0;
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-muted);
    font-family: var(--font-orbitron);
    font-size: 0.64rem;
    text-align: center;
}
.cat-combo-empty {
    padding: 10px;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

/* De groep waypoints zonder categorienaam. Doet als categorie gewoon mee, maar
   blijft herkenbaar als "hier staat geen label bij". */
.cat-block-rest .cat-block-name { font-style: italic; }
.cat-dot-rest { border: 1px dashed rgba(255, 255, 255, 0.45); }

/* ---- Punten in het leaderboard ----------------------------------------
   Op punten wordt gerangschikt, dus dat hoort het eerste te zijn wat je ziet.
   Eén opmaak voor alle vijf de weergaves - in de minigrid stonden ze eerder
   helemaal niet.

   De breedte is vastgezet op drie cijfers: bij tien punten per vraag komt een
   team dat alles goed heeft ruim in de honderdtallen, en dan mag een kaart
   niet ineens breder worden dan de kaart ernaast. */
.lb-punten {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
    background: rgba(var(--accent-orange-rgb), 0.11);
    border: 1px solid rgba(var(--accent-orange-rgb), 0.35);
    border-radius: 5px;
    color: var(--accent-orange);
    font-family: var(--font-orbitron);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.lb-punten::before {
    content: '';
    align-self: center;
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>") no-repeat center / contain;
}
.lb-punten-getal { font-variant-numeric: tabular-nums; }
.lb-punten-eenheid {
    font-size: 0.62em;
    font-weight: 600;
    opacity: 0.75;
}
.lb-punten-groot {
    min-width: 62px;
    padding: 5px 8px;
    font-size: 1.02rem;
}
.lb-punten-normaal {
    min-width: 54px;
    padding: 3px 7px;
    font-size: 0.85rem;
}
.lb-punten-mini {
    min-width: 46px;
    padding: 2px 5px;
    font-size: 0.8rem;
}
/* In de minigrid is het het hoofdgetal; de voortgang eronder mag klein. */
.lb-minigrid-card .lb-punten { margin-top: 2px; }
.lb-minigrid-time { font-size: 0.62rem; font-weight: 600; }

/* ---- Bewerken van een informatietekst ---------------------------------
   Het veld is een contenteditable en ziet eruit zoals de speler het straks
   ziet, dus er is geen apart voorbeeldvak meer nodig. De opmaaktekens staan
   niet in de tekst maar in de klasse van de regel; het bolletje ervoor komt
   uit ::before hieronder. Zie richTextToEditorHTML() in js/state.js. */
.rt-balk {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.rt-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 7px;
    margin: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    color: var(--text-body);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.rt-knop:hover:not(:disabled) {
    background: rgba(1, 169, 209, 0.16);
    border-color: var(--accent-cyan);
}
.rt-knop:disabled { opacity: 0.4; cursor: not-allowed; }
.rt-knop-scheiding {
    width: 1px;
    align-self: stretch;
    margin: 2px 3px;
    background: var(--border-color);
}

/* Hetzelfde kader en dezelfde kleuren als het infovak bij de speler, zodat
   wat hier staat ook echt is wat daar komt te staan. */
.rt-bewerk {
    min-height: 92px;
    padding: 14px 16px;
    box-sizing: border-box;
    background: rgba(1, 169, 209, 0.08);
    border: 1px solid rgba(1, 169, 209, 0.3);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--text-body);
    line-height: 1.62;
    outline: none;
    counter-reset: rtnr;
}
.rt-bewerk:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(1, 169, 209, 0.15);
}
/* Vergrendeld. Het moet er anders uitzien dan een veld waar je wel in kunt
   typen, anders typ je er in en gebeurt er niets - zonder dat iets vertelt
   waarom. Zelfde taal als een uitgeschakeld invoerveld. */
.rt-bewerk[contenteditable="false"] {
    opacity: 0.55;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.02);
}

/* De plaatshouder hangt erboven in plaats van dat hij tekst is, want alles
   wat in het veld staat wordt opgeslagen. */
.rt-bewerk { position: relative; }
.rt-bewerk.rt-leeg::before {
    content: attr(data-plaatshouder);
    position: absolute;
    left: 16px;
    right: 16px;
    top: 14px;
    color: var(--text-muted);
    font-style: italic;
    pointer-events: none;
}

/* Een regel is een blok. De inspringing links is de kolom waar het bolletje
   in staat, zodat doorlopende tekst netjes onder zichzelf uitkomt - net als
   bij de speler. */
.rt-rij { margin: 0 0 15px; min-height: 1.5em; }
.rt-rij:last-child { margin-bottom: 0; }
.rt-rij-kop {
    margin: 26px 0 11px;
    font-family: var(--font-orbitron);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--text-light);
}
.rt-rij-kop:first-child { margin-top: 0; }
.rt-rij-lijn {
    margin: 22px 0;
    height: 0;
    min-height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
}
.rt-rij-li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 9px;
}
.rt-rij-li::before {
    position: absolute;
    left: 0;
    width: 15px;
    text-align: center;
    /* De speler kan dit teken niet selecteren of wissen: het staat niet in de
       tekst, alleen in de opmaak van de regel. */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.rt-rij-li.rt-punt::before   { content: '\2022'; color: var(--accent-cyan); }
.rt-rij-li.rt-vink::before   { content: '\2713'; color: var(--text-success); }
.rt-rij-li.rt-let-op::before { content: '\26a0'; color: var(--accent-orange); }
.rt-rij-li.rt-stap::before   { content: '\2192'; color: var(--accent-cyan); }
.rt-rij-li.rt-weetje::before { content: '\24d8'; color: var(--accent-cyan); }
.rt-rij-li.rt-locatie::before {
    content: '';
    top: 3px;
    width: 14px;
    height: 14px;
    background-color: var(--accent-cyan);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>") no-repeat center / contain;
}

/* Tellen doet css. Elke regel die geen genummerde regel is, zet de teller
   terug op nul, zodat een tweede lijstje weer bij 1 begint. */
.rt-rij:not(.rt-rij-nr) { counter-reset: rtnr; }
.rt-rij-li.rt-rij-nr::before {
    counter-increment: rtnr;
    content: counter(rtnr) '.';
    color: var(--accent-cyan);
    font-family: var(--font-orbitron);
    font-weight: 700;
    font-size: 0.8em;
}