/* ================= GLOBAL ================= */

html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    min-height:100%;
    background:#0b1419;
    color:#e6eef3;
    font-family:Arial, sans-serif;
    overflow:hidden;
    overflow-x:hidden;
}

body{
    background:
        radial-gradient(circle at 20% 20%, #0f1c24 0%, #0a1218 60%);
}

/* subtiele command/noise look */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.015),
        rgba(255,255,255,0.015) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events:none;
    z-index:1;
}

/* ================= APP CONTAINER ================= */

#appContainer{
    position:relative;
    width:100%;
    height:100vh;
    height:100dvh;
    overflow:hidden;
}

/* ================= HEADER ================= */

#appHeader{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;

    padding:10px 14px;
    box-sizing:border-box;

    background:linear-gradient(90deg,#0f1c24,#142733);
    color:#fff;

    border-bottom:1px solid rgba(255,255,255,0.05);
    box-shadow:0 6px 18px rgba(0,0,0,0.28);

    z-index:3000;
}

.appTitle{
    font-weight:bold;
    letter-spacing:1px;
    color:#ffffff;
    font-size:18px;
    min-width:0;
}

.appLevel{
    font-weight:bold;
    font-size:14px;
    text-align:right;
    min-width:220px;
}

/* ===== HEADER CLEAN HUD ===== */

.hudRight{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    min-width:180px;
    flex-shrink:0;
}

.hudTop{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:4px;
}

.levelBadge{
    background:#1f3a4a;
    color:#00c8ff;
    font-weight:bold;
    padding:4px 10px;
    border-radius:14px;
    font-size:12px;
    box-shadow:0 0 8px rgba(0,200,255,0.35);
}

.xpText{
    font-size:12px;
    color:#ccc;
    min-width:70px;
    text-align:right;
}

.xpBarBg{
    width:180px;
    height:5px;
    background:#0d1a22;
    border-radius:3px;
    overflow:hidden;
}

.xpBarFill{
    height:5px;
    width:0%;
    background:linear-gradient(90deg,#00c8ff,#00ffc3);
    border-radius:3px;
    transition:width 0.3s ease;
}

/* ================= MAP ================= */

#mapContainer{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    bottom:64px;
    overflow:hidden;
}

#mapWrapper{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
}

#map{
    width:100%;
    height:100%;
}

/* ================= BOTTOM PANEL ================= */

#bottomPanel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;

    padding:8px 10px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
    box-sizing:border-box;

    background:#0f1d24;
    color:#fff;

    border-top:1px solid rgba(255,255,255,0.05);
    box-shadow:0 -6px 18px rgba(0,0,0,0.24);

    z-index:3000;
}

#bottomPanel > *{
    min-width:0;
}

#bottomPanel > div{
    font-size:13px;
    font-weight:500;
    white-space:nowrap;
}

/* gewone footer knoppen */
.footerActionBtn{
    background:transparent;
    border:1px solid rgba(255,255,255,0.12);
    color:#fff;
    padding:6px 10px;
    border-radius:6px;
    font-weight:bold;
    cursor:pointer;
    transition:0.2s;
    white-space:nowrap;
}

.footerActionBtn:hover{
    background:rgba(255,255,255,0.08);
}

.footerLogout{
    background:transparent;
    border:1px solid #ff3b3b;
    color:#ff3b3b;
    padding:6px 10px;
    border-radius:6px;
    font-weight:bold;
    cursor:pointer;
    transition:0.2s;
}

.footerLogout:hover{
    background:#ff3b3b;
    color:#fff;
}

.bottomActionBtn.garageBtn{
    background:#4aa3ff;
    color:#fff;
    font-weight:bold;
}

/* VIP knop behouden */
.vipBtn{
    background:linear-gradient(45deg,#9b59ff,#00c8ff);
    border:none;
    padding:6px 12px;
    border-radius:6px;
    color:white;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 0 10px rgba(155,89,255,0.5);
    transition:0.2s;
    white-space:nowrap;
}

.vipBtn:hover{
    transform:scale(1.05);
    box-shadow:0 0 15px rgba(155,89,255,0.8);
}

/* ================= MAP BUTTONS ================= */

#centerBtn{
    position:fixed;
    right:12px;
    bottom:84px;
    z-index:3100;

    width:42px;
    height:42px;
    border-radius:50%;

    border:none;
    background:#111c24;
    color:#00ffc3;
    font-size:18px;
    cursor:pointer;

    box-shadow:0 0 12px rgba(0,255,195,0.25);
    transition:0.2s;
}

#centerBtn:hover{
    background:#1b2b34;
    box-shadow:0 0 16px rgba(0,255,195,0.45);
}

#followBtn{
    position:fixed;
    right:12px;
    bottom:134px;
    z-index:3100;

    width:42px;
    height:42px;
    border-radius:50%;

    border:none;
    background:#111c24;
    color:#ffaa00;
    font-size:18px;
    cursor:pointer;

    box-shadow:0 0 12px rgba(255,170,0,0.25);
    transition:0.2s;
}

#followBtn.active{
    background:#ffaa00;
    color:#000;
    box-shadow:0 0 18px rgba(255,170,0,0.7);
}

/* =========================================================
   CHAT PANEL – CLEAN & STABLE
   ========================================================= */

#chatPanel{
    position:fixed;
    background:#0f1d24;
    display:flex;
    flex-direction:column;
    box-shadow:0 0 25px rgba(0,0,0,0.6);
    border-radius:14px;
    overflow:hidden;
    transition:transform 0.3s ease, opacity 0.3s ease;
    z-index:1500;
}

/* ================= CHAT HEADER ================= */

#chatHeader{
    position:relative;
    padding:10px 14px;
    background:#142733;
    font-weight:bold;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}

#chatHeader .chatRight{
    display:flex;
    align-items:center;
    gap:6px;
}

/* ================= CHAT TABS ================= */

.chatTabs{
    display:flex;
}

.chatTabs button{
    flex:1;
    padding:6px;
    border:none;
    background:#0f1d24;
    color:#aaa;
    cursor:pointer;
    font-size:12px;
}

.chatTabs button.active{
    background:#1f3a4a;
    color:#00c8ff;
}

/* ================= CHAT MESSAGES ================= */

#chatMessages{
    flex:1;
    overflow-y:auto;
    padding:10px;
    font-size:13px;
    font-family:monospace;
}

.chatMessage{
    margin-bottom:6px;
}

.chatTime{
    color:#777;
    font-size:11px;
}

.chatUser{
    color:#00c8ff;
    font-weight:bold;
}

.chatSystem{
    color:#ffaa00;
}

.vipName{
    color:#ffd700;
    font-weight:700;
    text-shadow:0 0 6px rgba(255,215,0,0.4);
}

/* ================= CHAT INPUT ================= */

#chatInputWrap{
    display:flex;
    padding:8px;
    gap:6px;
    border-top:1px solid rgba(255,255,255,0.05);
}

#chatInput{
    flex:1;
    padding:6px;
    border-radius:6px;
    border:none;
    background:#0c1a22;
    color:white;
}

#chatSend{
    padding:6px 12px;
    border:none;
    border-radius:6px;
    background:#00c8ff;
    color:#001018;
    font-weight:bold;
    cursor:pointer;
}

/* ================= PRIVATE CHAT BADGES ================= */

.privateUnreadDot{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 6px;
    margin-left:8px;
    border-radius:999px;
    background:#ff2d55;
    color:#fff;
    font-size:11px;
    font-weight:700;
    line-height:1;
}

.chatPrivateBtn{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.chatHeaderBadge{
    position:absolute;
    top:6px;
    right:10px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#ff2d55;
    color:#fff;
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ================= CHAT HEADER NOTIFY ================= */

#chatHeader.notify{
    animation:chatPulse 1.6s infinite;
}

@keyframes chatPulse{
    0%{ box-shadow:0 0 0 rgba(0,200,255,0); }
    50%{ box-shadow:0 0 14px rgba(0,200,255,0.6); }
    100%{ box-shadow:0 0 0 rgba(0,200,255,0); }
}

/* ========================================
   DISTRICT SYSTEM ALERT (TOP POPUP)
   ======================================== */

.systemTopAlert{
    position:fixed;
    top:70px;
    left:50%;
    transform:translateX(-50%);

    background:#142733;
    border-left:5px solid #00c8ff;

    padding:12px 18px;
    border-radius:8px;

    font-weight:bold;
    font-size:14px;
    color:#ffffff;

    box-shadow:0 0 18px rgba(0,0,0,0.6);
    z-index:4000;

    animation:slideDown 0.3s ease;
}

@keyframes slideDown{
    from{ opacity:0; transform:translate(-50%, -15px); }
    to{ opacity:1; transform:translate(-50%, 0); }
}

/* =========================================================
   DESKTOP CHAT
   ========================================================= */

@media (min-width: 769px){
    #chatPanel{
        right:20px;
        top:80px;
        width:340px;
        height:420px;
        bottom:auto;
        transform:none;
        opacity:1;
        pointer-events:auto;
    }
}

/* =========================================================
   MOBILE CHAT
   ========================================================= */

@media (max-width: 768px){
    #chatPanel{
        left:0;
        right:0;
        bottom:38px;
        width:100%;
        background:#0f1d24;
        border-radius:16px 16px 0 0;
        transition:height 0.3s ease;
        overflow:hidden;
    }

    #chatPanel.mobile-min{
        height:48px;
    }

    #chatPanel.mobile-full{
        top:100px;
        bottom:38px;
        height:auto;
    }
}

/* ================= MOBILE FIX ================= */

@media (max-width: 600px){

    #appHeader{
        padding:8px 10px;
        gap:8px;
    }

    .appTitle{
        font-size:15px;
    }

    .hudRight{
        min-width:132px;
    }

    .hudTop{
        gap:6px;
        margin-bottom:3px;
    }

    .levelBadge{
        padding:3px 8px;
        font-size:11px;
    }

    .xpText{
        font-size:10px;
        min-width:auto;
    }

    .xpBarBg{
        width:120px;
        height:4px;
    }

    .xpBarFill{
        height:4px;
    }

    #mapContainer{
        top:58px;
        bottom:58px;
    }

    #bottomPanel{
        padding:7px 8px;
        padding-bottom:calc(7px + env(safe-area-inset-bottom));
        gap:6px;
    }

    #bottomPanel > div{
        font-size:11px;
    }

    .footerActionBtn,
    .vipBtn{
        padding:6px 8px;
        font-size:11px;
    }

    #centerBtn{
        right:10px;
        bottom:74px;
        width:40px;
        height:40px;
        font-size:17px;
    }

    #followBtn{
        right:10px;
        bottom:122px;
        width:40px;
        height:40px;
        font-size:17px;
    }
}

/* ================= LOGIN SCREEN ================= */

#loginScreen{
    position:relative !important;
    inset:auto !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    height:auto !important;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible !important;
}

/* oude login card fallback */

.loginCard{
    width:320px;
    padding:30px;
    background:#111c24;
    border-radius:12px;
    border-left:6px solid #ff3b3b;
    box-shadow:0 0 25px rgba(255,0,0,0.3);
    text-align:center;
    animation:fadeIn 0.4s ease;
}

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

.loginTitle{
    font-size:20px;
    font-weight:bold;
    margin-bottom:20px;
    color:#00c8ff;
    letter-spacing:1px;
}

.loginCard input{
    width:100%;
    padding:12px;
    margin-bottom:12px;
    background:#0b1117;
    border:1px solid #333;
    border-radius:6px;
    color:#fff;
    outline:none;
    transition:0.2s;
    box-sizing:border-box;
}

.loginCard input:focus{
    border-color:#00c8ff;
    box-shadow:0 0 8px rgba(0,200,255,0.4);
}

.loginCard button{
    width:100%;
    padding:12px;
    background:#00c8ff;
    border:none;
    border-radius:6px;
    font-weight:bold;
    color:#001018;
    cursor:pointer;
    transition:0.2s;
}

.loginCard button:hover{
    background:#00a6d6;
    box-shadow:0 0 10px rgba(0,200,255,0.6);
}

/* ================= LOGIN / REGISTER TRANSITIONS ================= */

#loginSection,
#registerSection{
    transition:opacity .22s ease, transform .22s ease;
    opacity:1;
    transform:translateX(0);
}

#loginSection.hidden{
    opacity:0;
    transform:translateX(-20px);
    pointer-events:none;
}

#registerSection.hidden{
    opacity:0;
    transform:translateX(20px);
    pointer-events:none;
}

/* ================= CUSTOM SELECT ================= */

.loginCard select{
    width:100%;
    padding:12px 40px 12px 12px;
    margin-bottom:12px;

    background:#0e1a22;
    border:1px solid #1e3a46;
    border-radius:6px;

    color:#e6faff;
    font-size:14px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg fill='%2300bfff' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px;

    transition:all 0.25s ease;
    box-sizing:border-box;
}

.loginCard select:hover{
    border-color:#00bfff;
}

.loginCard select:focus{
    border-color:#00bfff;
    box-shadow:0 0 8px rgba(0,191,255,0.4);
    outline:none;
}

/* ================= ROLE COLOR SYSTEM ================= */

:root{
    --fire:#ff6b00;
    --medical:#00e0a4;
    --police:#1ea7ff;
    --tow:#ffc400;
}

.loginCard select option[value="fire"]{
    background:#1a0f05;
}

.loginCard select option[value="medical"]{
    background:#051a14;
}

.loginCard select option[value="police"]{
    background:#05111a;
}

.loginCard select option[value="tow"]{
    background:#1a1505;
}

/* =========================================================
   AUTH / LOGIN / REGISTER – APP STYLE
   ========================================================= */

#loginScreen,
#usernameScreen,
#setupScreen{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 16px;
    box-sizing:border-box;
    z-index:4000;
}

.authBg{
    background:
        radial-gradient(circle at top center, rgba(0,200,255,0.12) 0%, rgba(0,200,255,0.04) 20%, transparent 45%),
        radial-gradient(circle at bottom center, rgba(0,255,195,0.08) 0%, transparent 35%),
        linear-gradient(180deg, #071118 0%, #0a1821 45%, #09131a 100%);
    overflow:hidden;
    position:relative;
    min-height:100vh;
}

.authBg::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.018),
            rgba(255,255,255,0.018) 1px,
            transparent 1px,
            transparent 3px
        );
    pointer-events:none;
    opacity:.45;
}

/* hero background */
.authScreen.authBg{
    background:
        linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,.68)),
        url("/assets/hero.jpg") center 20% / cover no-repeat;
    position:relative;
    min-height:100vh;
}

.authScreen.authBg::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 18% 50%, rgba(255,0,0,.20), transparent 34%),
        radial-gradient(circle at 82% 50%, rgba(0,120,255,.22), transparent 34%);
    animation:sirenmove 5s infinite linear;
    pointer-events:none;
    z-index:0;
}

.authShell,
.authStickyActions,
#loginScreen > *{
    position:relative;
    z-index:1;
}

@keyframes sirenmove{
    0%{ transform:translateX(-20px); }
    50%{ transform:translateX(20px); }
    100%{ transform:translateX(-20px); }
}

.authShell{
    position:relative;
    z-index:2;
    width:100%;
    max-width:430px;
}

.authShellSmall{
    max-width:420px;
}

.authShell.authShellWide{
    max-width:1280px;
    padding:24px 20px 120px;
}

.authTopBrand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
    padding:0 4px;
}

.authLogoMark{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    background:linear-gradient(135deg,#00c8ff,#00ffc3);
    color:#041017;
    box-shadow:
        0 0 22px rgba(0,200,255,0.22),
        0 10px 25px rgba(0,0,0,0.22);
    flex-shrink:0;
}

.authBrandText{
    min-width:0;
}

.authBrandTitle{
    color:#ffffff;
    font-size:20px;
    font-weight:800;
    letter-spacing:.8px;
    line-height:1.1;
}

.authBrandSub{
    margin-top:4px;
    color:#96b8c8;
    font-size:13px;
    line-height:1.35;
}

.authCard,
.authLandingCard{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    background:rgba(7,18,26,.78);
    border:1px solid rgba(47,210,255,.12);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.45),
        0 0 28px rgba(0,200,255,0.08);
}

.authCard{
    padding:28px;
}

.authCardSmall{
    padding-top:22px;
}

.authLandingCard{
    padding:28px;
}

.authCardGlow{
    position:absolute;
    right:-80px;
    top:-80px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(60,199,255,0.14), transparent 72%);
    pointer-events:none;
}

.authLandingGlow{
    position:absolute;
    width:340px;
    height:340px;
    right:-120px;
    top:-120px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,200,255,0.18), transparent 70%);
    pointer-events:none;
}

.authHead{
    position:relative;
    z-index:2;
    margin-bottom:18px;
    text-align:left;
}

.authHeadCompact{
    margin-bottom:16px;
}

.authEyebrow{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(0,200,255,0.10);
    border:1px solid rgba(0,200,255,0.16);
    color:#7bddff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.4px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.authHead h1{
    margin:0 0 8px 0;
    font-size:38px;
    line-height:1.05;
    color:#ffffff;
    font-weight:800;
}

.authHead p{
    margin:0;
    font-size:16px;
    line-height:1.55;
    color:#c7d4de;
}

.authSection{
    position:relative;
    z-index:2;
}

.authForm{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.authField{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.authField label{
    font-size:12px;
    font-weight:700;
    color:#d7e7ee;
    letter-spacing:.2px;
}

.authForm input,
.authForm select,
#usernameInput{
    width:100%;
    box-sizing:border-box;
    height:52px;
    padding:0 14px;
    border-radius:14px;
    border:1px solid rgba(100,150,170,0.22);
    background:rgba(6,18,25,0.82);
    color:#ffffff;
    outline:none;
    font-size:15px;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
    appearance:none;
    -webkit-appearance:none;
}

.authForm input::placeholder,
#usernameInput::placeholder{
    color:#6f8a98;
}

.authForm input:focus,
.authForm select:focus,
#usernameInput:focus{
    border-color:#00c8ff;
    box-shadow:0 0 0 4px rgba(0,200,255,0.12);
    background:rgba(8,22,30,0.95);
}

.authForm select{
    padding-right:44px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300c8ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:16px;
}

.authPrimaryBtn,
.authSecondaryBtn{
    width:100%;
    min-height:52px;
    border:none;
    border-radius:14px;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease;
}

.authPrimaryBtn{
    margin-top:4px;
    background:linear-gradient(90deg,#00c8ff,#00ffc3);
    color:#001018;
    box-shadow:
        0 10px 24px rgba(0,200,255,0.18),
        0 0 18px rgba(0,255,195,0.10);
}

.authPrimaryBtn:hover{
    transform:translateY(-1px);
    box-shadow:
        0 14px 30px rgba(0,200,255,0.24),
        0 0 24px rgba(0,255,195,0.14);
}

.authSecondaryBtn{
    background:rgba(255,255,255,0.06);
    color:#ffffff;
    border:1px solid rgba(255,255,255,0.08);
}

.authSecondaryBtn:hover{
    background:rgba(255,255,255,0.10);
    transform:translateY(-1px);
}

.authDivider{
    position:relative;
    text-align:center;
    margin:16px 0 14px;
}

.authDivider::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}

.authDivider span{
    position:relative;
    z-index:2;
    display:inline-block;
    padding:0 10px;
    background:linear-gradient(180deg, rgba(14,31,41,0.96), rgba(10,23,31,0.98));
    color:#7f97a4;
    font-size:12px;
    font-weight:700;
}

.authCommunityCard{
    margin-top:18px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border-radius:18px;
    background:rgba(88,101,242,0.10);
    border:1px solid rgba(88,101,242,0.18);
}

.authCommunityIcon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(88,101,242,0.18);
    font-size:20px;
    flex-shrink:0;
}

.authCommunityText{
    display:flex;
    flex-direction:column;
    min-width:0;
    flex:1;
}

.authCommunityText strong{
    color:#ffffff;
    font-size:14px;
    line-height:1.2;
}

.authCommunityText span{
    margin-top:3px;
    color:#b6c2e8;
    font-size:12px;
    line-height:1.35;
}

.authDiscordBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:74px;
    height:40px;
    padding:0 14px;
    border-radius:12px;
    background:#5865F2;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
    box-shadow:0 10px 22px rgba(88,101,242,0.18);
    flex-shrink:0;
}

.authDiscordBtn:hover{
    background:#4752C4;
    transform:translateY(-1px);
}

.authLogo{
    width:260px;
    margin-bottom:10px;
    filter:drop-shadow(0 10px 25px rgba(0,0,0,.6));
}

.authLandingTitle{
    font-size:64px;
    font-weight:900;
    letter-spacing:3px;
    text-shadow:
        0 4px 12px rgba(0,0,0,.7),
        0 0 20px rgba(0,120,255,.4);
}

.goAccent{
    color:#ffd84d;
    text-shadow:0 0 10px rgba(255,200,0,.8);
}

.authHeroSubtitle{
    font-size:20px;
    opacity:.9;
    margin-top:10px;
}

.authHeroLayout{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:24px;
    align-items:start;
}

.authLandingTop{
    position:relative;
    z-index:1;
}

.authLaunchBadge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(0,255,195,0.10);
    border:1px solid rgba(0,255,195,0.18);
    color:#8effdf;
    font-size:13px;
    font-weight:700;
    margin-bottom:18px;
}

.authLandingText{
    font-size:18px;
    line-height:1.65;
    color:#c9d7e2;
    max-width:760px;
    margin-bottom:22px;
}

.authLandingActions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:26px;
}

.authLandingBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:0 18px;
    border-radius:14px;
    font-weight:800;
    font-size:16px;
    text-decoration:none;
    border:none;
    cursor:pointer;
    transition:0.18s ease;
}

.authLandingBtn:hover{
    transform:translateY(-1px);
}

.authLandingBtn.primary{
    background:linear-gradient(90deg,#28b8ff,#00ffc3);
    color:#041019;
}

.authLandingBtn.secondary{
    background:rgba(255,255,255,0.05);
    color:#fff;
    border:1px solid rgba(255,255,255,0.08);
}

.authLandingGrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    margin-bottom:24px;
}

.authFeatureCard{
    background:#0e1a1f;
    padding:22px;
    border-radius:12px;
    transition:.2s;
    border:1px solid rgba(0,200,255,.12);
}

.authFeatureCard:hover{
    transform:translateY(-5px);
    box-shadow:0 0 20px rgba(0,200,255,.4);
}

.authFeatureIcon{
    font-size:28px;
    margin-bottom:10px;
}

.authFeatureCard h3{
    margin:0 0 8px;
    font-size:20px;
    color:#74d7ff;
}

.authFeatureCard p{
    margin:0;
    font-size:15px;
    line-height:1.55;
    color:#c1d0db;
}

.authRolesRow{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:24px;
}

.authRoleMini{
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:16px;
    padding:14px 10px;
    text-align:center;
}

.authRoleMiniEmoji{
    font-size:28px;
    margin-bottom:8px;
}

.authRoleMiniTitle{
    font-size:14px;
    font-weight:800;
    color:#fff;
}

.authMediaGrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.authShot{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.06);
    min-height:170px;
}

.authShot img{
    width:100%;
    height:170px;
    object-fit:cover;
    display:block;
}

.authShotLabel{
    position:absolute;
    left:12px;
    bottom:12px;
    padding:7px 10px;
    border-radius:10px;
    background:rgba(0,0,0,0.55);
    font-size:13px;
    font-weight:700;
}

.authTrailerCard{
    margin-top:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    border-radius:18px;
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.06);
}

.authTrailerText strong{
    display:block;
    font-size:18px;
    margin-bottom:4px;
}

.authTrailerText span{
    font-size:14px;
    color:#c1d0db;
}

.authQuickNote{
    margin-top:16px;
    font-size:14px;
    line-height:1.5;
    color:#9fbdcd;
}

.authStickyActions{
    display:none;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:6000;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(4,11,17,0), rgba(4,11,17,0.95) 40%);
}

.authStickyInner{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px;
    max-width:760px;
    margin:0 auto;
}

.authStickyInner .authLandingBtn{
    min-height:54px;
    padding:0 12px;
    font-size:15px;
}

.googleLoginContainer,
.googleBtn{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:10px;
}

#googleLoginBtn{
    margin-top:12px;
    width:100%;
    display:flex;
    justify-content:center;
}

#googleLoginBtn div,
.googleBtn > div{
    width:100% !important;
}

#googleLoginBtn iframe,
.googleBtn iframe{
    width:100% !important;
}

.loginDivider{
    margin:14px 0;
    opacity:0.4;
}

#username,
#pin,
#reg_username,
#reg_pin,
#usernameInput{
    width:100%;
    box-sizing:border-box;
}

/* ================= LOGIN SCREEN SCROLL FIX ================= */

html,
body{
    min-height:100%;
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;
}

#loginScreen{
    position:relative !important;
    inset:auto !important;
    min-height:100vh !important;
    height:auto !important;
    overflow:visible !important;
}

#loginScreen .authShell{
    min-height:auto !important;
    height:auto !important;
}

#loginScreen .authHeroLayout{
    align-items:start;
}

@media (max-width: 1100px){
    #loginScreen{
        padding-bottom:120px;
    }
}

@media (max-width: 1100px){
    .authHeroLayout{
        grid-template-columns:1fr;
    }
}

@media (max-width: 760px){
    .authShell.authShellWide{
        padding:16px 14px 110px;
    }

    .authLandingTitle{
        font-size:36px;
    }

    .authLandingText{
        font-size:16px;
    }

    .authLandingGrid,
    .authMediaGrid{
        grid-template-columns:1fr;
    }

    .authRolesRow{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .authStickyActions{
        display:block;
    }
}

@media (max-width: 768px){

    #loginScreen,
    #usernameScreen,
    #setupScreen{
        padding:18px 12px;
    }

    .authShell,
    .authShellSmall{
        max-width:100%;
    }

    .authTopBrand{
        margin-bottom:14px;
        gap:10px;
    }

    .authLogoMark{
        width:42px;
        height:42px;
        border-radius:12px;
        font-size:21px;
    }

    .authBrandTitle{
        font-size:18px;
    }

    .authBrandSub{
        font-size:12px;
    }

    .authCard{
        border-radius:20px;
        padding:20px 14px 14px;
    }

    .authHead{
        margin-bottom:16px;
    }

    .authHead h1{
        font-size:24px;
    }

    .authHead p{
        font-size:13px;
    }

    .authForm input,
    .authForm select,
    #usernameInput,
    .authPrimaryBtn,
    .authSecondaryBtn{
        min-height:50px;
        height:50px;
        font-size:14px;
        border-radius:12px;
    }

    .authCommunityCard{
        padding:12px;
        border-radius:16px;
        gap:10px;
    }

    .authCommunityIcon{
        width:38px;
        height:38px;
        border-radius:10px;
        font-size:18px;
    }

    .authDiscordBtn{
        min-width:66px;
        height:38px;
        border-radius:10px;
        font-size:12px;
    }
}

@media (max-width: 420px){

    .authCard{
        padding:18px 12px 12px;
    }

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

    .authBrandTitle{
        font-size:17px;
    }

    .authCommunityText strong{
        font-size:13px;
    }

    .authCommunityText span{
        font-size:11px;
    }
}

/* ================= GM OVERLAY ================= */

#gmOverlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#0b1620;
    display:none;
    flex-direction:column;
    z-index:9999;
}

#gmHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 20px;
    background:#12212c;
    border-bottom:1px solid rgba(255,255,255,0.05);
    font-weight:bold;
    font-size:18px;
}

#gmTitle{
    font-size:18px;
    font-weight:bold;
}

#gmClose{
    font-size:22px;
    cursor:pointer;
    background:none;
    border:none;
    color:white;
}

#gmTabs{
    display:flex;
    gap:10px;
    padding:12px 20px;
    background:#101c25;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

#gmTabs button{
    flex:1;
    padding:12px;
    border:none;
    border-radius:6px;
    background:#142733;
    color:#ccc;
    cursor:pointer;
    font-weight:500;
}

#gmTabs button.active{
    background:#00c8ff;
    color:#000;
}

#gmContent{
    flex:1;
    overflow:auto;
    padding:20px;
}

/* ================= DAILY POPUP ================= */

.dailyPopup{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(4,10,16,0.78);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    z-index:99999;
    box-sizing:border-box;
    animation:dailyPop 0.35s ease;
}

@keyframes dailyPop{
    0%{ transform:scale(.7); opacity:0; }
    100%{ transform:scale(1); opacity:1; }
}

.dailyCard{
    position:relative;
    width:min(100%, 600px);
    max-width:600px;
    background:
        radial-gradient(circle at top left, rgba(0,200,255,0.10), transparent 35%),
        radial-gradient(circle at top right, rgba(0,255,195,0.08), transparent 30%),
        linear-gradient(180deg,#091823 0%, #0d2230 100%);
    border:1px solid rgba(0,200,255,0.18);
    border-radius:22px;
    box-shadow:
        0 24px 70px rgba(0,0,0,0.55),
        0 0 24px rgba(0,200,255,0.10);
    padding:24px 22px 20px;
    color:#fff;
    box-sizing:border-box;
    animation:dailyPopupIn .28s ease;
    overflow:hidden;
}

@keyframes dailyPopupIn{
    from{
        transform:translateY(10px) scale(0.96);
        opacity:0;
    }
    to{
        transform:translateY(0) scale(1);
        opacity:1;
    }
}

.dailyCloseBtn{
    position:absolute;
    top:14px;
    right:14px;
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    color:#fff;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    transition:all .2s ease;
}

.dailyCloseBtn:hover{
    background:rgba(255,255,255,0.16);
    transform:scale(1.05);
}

.dailyHeader{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
    padding-right:42px;
    text-align:left;
}

.dailyIcon{
    width:54px;
    height:54px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    flex-shrink:0;
    background:linear-gradient(135deg,#00c8ff,#00ffc3);
    box-shadow:0 0 18px rgba(0,200,255,0.35);
}

.dailyHeaderText h2{
    margin:0;
    font-size:24px;
    line-height:1.1;
    color:#fff;
}

.dailyHeaderText p{
    margin:6px 0 0 0;
    font-size:13px;
    line-height:1.35;
    color:#9dc9d8;
}

.dailyVipInfo{
    margin:4px 0 16px 0;
    text-align:center;
}

.dailyVipBadge,
.dailyVipUpsell{
    display:inline-block;
    padding:9px 14px;
    border-radius:999px;
    font-weight:800;
    font-size:13px;
    margin-bottom:8px;
    letter-spacing:.2px;
}

.dailyVipBadge{
    background:linear-gradient(45deg,#ffd700,#ffb700);
    color:#111;
    box-shadow:
        0 4px 14px rgba(255,215,0,0.25),
        0 0 18px rgba(255,200,0,0.18);
}

.dailyVipUpsell{
    background:linear-gradient(45deg,#6a00ff,#00c8ff);
    color:#fff;
    box-shadow:
        0 4px 14px rgba(0,200,255,0.18),
        0 0 18px rgba(106,0,255,0.12);
}

.dailyVipSub{
    font-size:13px;
    color:#cfd8e3;
    line-height:1.45;
    max-width:420px;
    margin:0 auto;
}

.dailyExtraInfo{
    margin:10px 0 0 0;
    text-align:center;
    font-size:13px;
    color:#b8c6d8;
    line-height:1.45;
}

.dailyExtraInfo strong{
    color:#ffffff;
}

.dailyGrid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:8px;
    margin:18px 0 16px 0;
}

.dailyDay{
    min-height:104px;
    border-radius:14px;
    padding:10px 6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    background:linear-gradient(180deg,#112836,#0d1f2b);
    border:1px solid rgba(255,255,255,0.06);
    box-sizing:border-box;
    transition:all .2s ease;
}

.dailyDayTop{
    font-size:12px;
    font-weight:700;
    color:#ffffff;
    margin-bottom:6px;
}

.dailyDayXp{
    font-size:11px;
    font-weight:700;
    line-height:1.2;
    color:#00ffc3;
    margin-bottom:8px;
}

.dailyDay.claimed{
    background:linear-gradient(180deg,#0f4048,#106069);
    border-color:rgba(0,255,195,0.18);
    box-shadow:0 0 10px rgba(0,255,195,0.08);
}

.dailyDay.today{
    background:linear-gradient(180deg,#ffb300,#ffd84a);
    border-color:rgba(255,210,0,0.35);
    box-shadow:0 0 16px rgba(255,196,0,0.18);
}

.dailyDay.today .dailyDayTop,
.dailyDay.today .dailyDayXp{
    color:#111;
}

.dailyDay.today-claimed{
    background:linear-gradient(180deg,#13643f,#1a8b57);
    border-color:rgba(69,214,133,0.28);
    box-shadow:0 0 14px rgba(69,214,133,0.12);
}

.dailyDay.today-claimed .dailyDayTop,
.dailyDay.today-claimed .dailyDayXp{
    color:#fff;
}

.dailyDay.locked{
    opacity:0.72;
}

.dailyGrid .dailyDay:nth-child(7):not(.today):not(.today-claimed){
    border-color:rgba(255,200,0,0.22);
    box-shadow:0 0 12px rgba(255,200,0,0.08);
}

.dailyStatus{
    margin-top:auto;
    font-size:10px;
    font-weight:700;
    line-height:1.15;
    padding:4px 6px;
    border-radius:999px;
    text-align:center;
}

.dailyStatus.claimed{
    background:rgba(255,255,255,0.16);
    color:#fff;
}

.dailyStatus.today{
    background:rgba(0,0,0,0.16);
    color:#111;
}

.dailyStatus.today-claimed{
    background:rgba(255,255,255,0.18);
    color:#fff;
}

.dailyStatus.locked{
    background:rgba(255,255,255,0.08);
    color:#89a8b5;
}

.dailyRewardText{
    text-align:center;
    font-size:14px;
    line-height:1.45;
    color:#d7f7ff;
    margin:6px 0 18px 0;
}

.dailyRewardText strong{
    color:#00ffc3;
    font-size:16px;
}

.dailyActions{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:16px;
}

.dailyClaimBtn,
.dailySecondaryBtn{
    border:none;
    border-radius:12px;
    padding:12px 18px;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    transition:all .2s ease;
}

.dailyClaimBtn{
    background:linear-gradient(90deg,#00c8ff,#00ffc3);
    color:#001018;
    box-shadow:0 0 18px rgba(0,200,255,0.18);
}

.dailyClaimBtn:hover{
    transform:translateY(-1px);
    box-shadow:0 0 22px rgba(0,200,255,0.28);
}

.dailyClaimBtn.disabled,
.dailyClaimBtn:disabled{
    background:#29414d;
    color:#86a8b5;
    cursor:not-allowed;
    box-shadow:none;
    transform:none;
}

.dailySecondaryBtn{
    background:rgba(255,255,255,0.08);
    color:#fff;
}

.dailySecondaryBtn:hover{
    background:rgba(255,255,255,0.14);
}

@media (max-width: 768px){

    .dailyPopup{
        align-items:center;
        justify-content:center;
        padding:14px;
    }

    .dailyCard{
        width:min(100%, 420px);
        max-width:420px;
        padding:18px 14px 16px;
        border-radius:18px;
    }

    .dailyCloseBtn{
        top:10px;
        right:10px;
        width:34px;
        height:34px;
        font-size:16px;
    }

    .dailyHeader{
        gap:10px;
        margin-bottom:14px;
        padding-right:36px;
    }

    .dailyIcon{
        width:44px;
        height:44px;
        font-size:22px;
        border-radius:12px;
    }

    .dailyHeaderText h2{
        font-size:20px;
        margin:0;
    }

    .dailyHeaderText p{
        font-size:12px;
        line-height:1.3;
        margin-top:4px;
    }

    .dailyVipInfo{
        margin:2px 0 14px 0;
    }

    .dailyVipBadge,
    .dailyVipUpsell{
        font-size:11px;
        padding:8px 10px;
        margin-bottom:6px;
    }

    .dailyVipSub,
    .dailyExtraInfo{
        font-size:11px;
        line-height:1.35;
    }

    .dailyGrid{
        grid-template-columns:repeat(4, 1fr);
        gap:8px;
        margin:14px 0;
    }

    .dailyDay{
        min-height:82px;
        padding:8px 5px;
        border-radius:10px;
    }

    .dailyDayTop{
        font-size:10px;
        margin-bottom:4px;
    }

    .dailyDayXp{
        font-size:9px;
        line-height:1.2;
        margin-bottom:6px;
    }

    .dailyStatus{
        font-size:8px;
        line-height:1.1;
        padding:4px 5px;
        border-radius:8px;
    }

    .dailyRewardText{
        font-size:12px;
        line-height:1.35;
        margin:10px 0 14px;
    }

    .dailyRewardText strong{
        font-size:14px;
    }

    .dailyActions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:14px;
    }

    .dailyClaimBtn,
    .dailySecondaryBtn{
        width:100%;
        padding:11px 10px;
        font-size:12px;
        border-radius:10px;
    }
}

@media (max-width: 420px){

    .dailyPopup{
        padding:10px;
    }

    .dailyCard{
        width:100%;
        max-width:360px;
        padding:16px 12px 14px;
    }

    .dailyGrid{
        gap:6px;
    }

    .dailyDay{
        min-height:76px;
        padding:7px 4px;
    }

    .dailyDayTop{
        font-size:9px;
    }

    .dailyDayXp{
        font-size:8px;
    }

    .dailyStatus{
        font-size:7px;
        padding:3px 4px;
    }

    .dailyVipBadge,
    .dailyVipUpsell{
        font-size:10px;
        padding:7px 9px;
    }

    .dailyVipSub,
    .dailyExtraInfo{
        font-size:10px;
    }
}

/* ================= MORE SHEET ================= */

.moreSheetBackdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s ease;
    z-index:3998;
}

.moreSheetBackdrop.open{
    opacity:1;
    pointer-events:auto;
}

.moreSheet{
    position:fixed;
    left:0;
    right:0;
    bottom:0;

    background:linear-gradient(180deg,#13232e,#0f1d24);
    border-top-left-radius:18px;
    border-top-right-radius:18px;
    box-shadow:0 -10px 30px rgba(0,0,0,0.45);

    padding:10px 14px calc(14px + env(safe-area-inset-bottom));
    box-sizing:border-box;

    transform:translateY(105%);
    transition:transform 0.28s ease;
    z-index:3999;
}

.moreSheet.open{
    transform:translateY(0);
}

.moreSheetHandle{
    width:44px;
    height:5px;
    border-radius:999px;
    background:rgba(255,255,255,0.22);
    margin:2px auto 12px;
}

.moreSheetHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}

.moreSheetTitle{
    color:#fff;
    font-size:16px;
    font-weight:bold;
}

.moreSheetClose{
    border:none;
    background:rgba(255,255,255,0.08);
    color:#fff;
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:16px;
    cursor:pointer;
}

.moreGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.moreActionBtn{
    border:none;
    border-radius:12px;
    background:#162833;
    color:#fff;
    text-align:left;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
    transition:0.2s;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);
}

.moreActionBtn:hover{
    background:#1b3240;
}

.moreActionBtn strong{
    font-size:14px;
    line-height:1.2;
}

.moreActionBtn span{
    font-size:11px;
    line-height:1.3;
    color:#a8c1cf;
}

.moreActionBtn.vip{
    background:linear-gradient(45deg,#7b3cff,#00bfff);
}

.moreActionBtn.vip span,
.moreActionBtn.vip strong{
    color:#fff;
}

.moreActionBtn.logout{
    background:#2b1a1a;
}

.moreActionBtn.logout:hover{
    background:#3a2020;
}

@media (min-width: 769px){
    .moreSheet{
        left:50%;
        right:auto;
        width:420px;
        transform:translate(-50%, 105%);
    }

    .moreSheet.open{
        transform:translate(-50%, 0);
    }
}

@media (max-width: 480px){
    .moreGrid{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .moreActionBtn{
        padding:10px;
        border-radius:10px;
    }

    .moreActionBtn strong{
        font-size:13px;
    }

    .moreActionBtn span{
        font-size:10px;
    }
}

/* ================= TUTORIAL ================= */

#tutorialOverlay{
    position:absolute;
    left:50%;
    bottom:20px;
    transform:translateX(-50%);
    width:90%;
    max-width:520px;
    display:none;
    z-index:10000;
}

.tutorialBar{
    background:rgba(10,20,30,0.95);
    border-radius:14px;
    padding:18px;
    color:white;
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
    display:flex;
    flex-direction:column;
}

.tutorialText{
    font-size:15px;
    line-height:1.4;
    margin-bottom:12px;
}

.tutorialBottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.tutorialDot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#444;
    margin-right:4px;
    display:inline-block;
}

.tutorialDot.active{
    background:#00ffc3;
}

.tutorialPulse{
    animation:tutorialPulse 1s infinite;
}

@keyframes tutorialPulse{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.25); }
    100%{ transform:scale(1); }
}

/* ================= SCREEN HELPERS ================= */

.screenCenter{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.fullscreenCenter{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.betaBadge{
    background:#ff9800;
    color:#000;
    font-size:11px;
    font-weight:bold;
    padding:3px 6px;
    border-radius:4px;
    margin-left:8px;
    vertical-align:middle;
}

/* =========================================================
   PLAYER MARKERS
   ========================================================= */

.player-marker{
    text-align:center;
    font-weight:600;
    z-index:9999;
}

.player-wrapper{
    position:relative;
    width:80px;
    height:80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.player-dot{
    width:18px;
    height:18px;
    background:#00c8ff;
    border-radius:50%;
    box-shadow:
        0 0 0 6px rgba(0,200,255,0.25),
        0 0 16px rgba(0,200,255,0.9);
    z-index:2;
}

.player-pulse{
    position:absolute;
    width:80px;
    height:80px;
    border-radius:50%;
    border:2px solid rgba(0,200,255,0.6);
    animation:playerPulse 1.8s infinite ease-out;
    z-index:1;
}

@keyframes playerPulse{
    0%{
        transform:scale(0.5);
        opacity:1;
    }
    70%{
        transform:scale(1.6);
        opacity:0;
    }
    100%{
        opacity:0;
    }
}

.player-role{
    width:42px;
    height:42px;

    border-radius:50%;
    border:3px solid white;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;

    box-shadow:
        0 0 6px rgba(0,0,0,0.6),
        0 0 8px rgba(0,255,255,0.6);
}

.player-name{
    position:absolute;
    bottom:-12px;

    font-size:11px;
    font-weight:bold;

    background:rgba(0,0,0,0.75);
    padding:2px 6px;
    border-radius:6px;

    color:white;
}

.player-level{
    position:absolute;
    top:-10px;

    font-size:10px;
    font-weight:bold;

    background:#00aaff;
    padding:2px 6px;
    border-radius:6px;

    color:white;
}

.player-rank{
    position:absolute;
    top:-8px;
    right:-8px;
    font-size:14px;
    background:#0e1a22;
    border-radius:50%;
    padding:2px;
    box-shadow:0 0 6px rgba(0,0,0,0.6);
}

.player-prestige{
    position:absolute;
    bottom:-8px;
    left:-8px;
    font-size:12px;
    background:#0e1a22;
    border-radius:6px;
    padding:1px 3px;
    box-shadow:0 0 6px rgba(0,0,0,0.6);
}

/* role kleuren */

.player-fire .player-role{
    background:#ff3b3b;
}

.player-medical .player-role{
    background:#ffd400;
}

.player-police .player-role{
    background:#2aa3ff;
}

.player-tow .player-role{
    background:#ff8c00;
}

/* speler pin marker */

.player-marker-shell{
    background:transparent !important;
    border:none !important;
}

.player-marker-wrap{
    position:relative;
    width:48px;
    height:48px;
}

.player-direction-arrow{
    position:absolute;
    left:50%;
    top:-18px;
    width:0;
    height:0;
    transform:translateX(-50%) rotate(0deg);
    transform-origin:50% 36px;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-bottom:36px solid #00ffc3;
    filter:drop-shadow(0 0 6px rgba(0,255,195,0.9));
    z-index:1;
    pointer-events:none;
}

.player-pin{
    position:absolute;
    left:50%;
    top:50%;
    width:20px;
    height:20px;
    transform:translate(-50%, -50%);
    border-radius:50%;
    z-index:2;
    border:3px solid white;
    box-shadow:0 0 8px rgba(0,0,0,0.4);
}

.player-pin.police{
    background:#2a7fff;
}

.player-pin.fire{
    background:#ff3b3b;
}

.player-pin.medical{
    background:#ffd84a;
}

.player-pin.tow{
    background:#ff9b3d;
}

/* =========================================================
   PLAYER / UNIT LABEL MARKERS
   ========================================================= */

.unit-marker{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;

    background:#0b1a24;
    border:2px solid #4aa3ff;
    border-radius:8px;

    padding:4px 6px;

    color:#fff;
    font-size:11px;

    box-shadow:0 0 8px rgba(0,0,0,0.5);
    white-space:nowrap;
}

.unit-top{
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:600;
}

.unit-icon{
    font-size:16px;
}

.unit-name{
    font-size:11px;
}

.unit-middle{
    display:flex;
    gap:6px;
    font-size:10px;
    color:#9edcff;
}

.unit-level{
    font-weight:600;
}

.unit-rank{
    font-size:11px;
}

.unit-prestige{
    font-size:10px;
}

.unit-bottom{
    position:relative;
    margin-top:2px;
}

/* =========================================================
   INCIDENT ICONS
   ========================================================= */

.incident-icon{
    font-size:22px;
    text-align:center;
    line-height:28px;
    width:34px !important;
    height:34px !important;
    border-radius:50%;
    background:#111c24;
    box-shadow:0 0 8px rgba(0,0,0,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
}

.incident-icon.fire{
    background:#b3261e !important;
    color:white !important;
    box-shadow:0 0 10px rgba(179,38,30,0.7);
}

.incident-icon.medical{
    background:#0a7f4f !important;
    color:white !important;
    box-shadow:0 0 10px rgba(10,127,79,0.7);
}

.incident-icon.police{
    background:#0b3d91 !important;
    color:white !important;
    box-shadow:0 0 10px rgba(11,61,145,0.7);
}

.incident-icon.tow{
    background:#b8860b !important;
    color:black !important;
    box-shadow:0 0 10px rgba(184,134,11,0.8);
}

.incident-icon .icon-wrapper{
    position:relative;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    border-radius:50%;
    background:#111c24;
    box-shadow:0 0 10px rgba(0,0,0,0.6);
}

.icon-wrapper{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    border-radius:50%;
    background:#111c24;
    box-shadow:0 0 10px rgba(0,0,0,0.6);
}

.multi-dot{
    position:absolute;
    bottom:-2px;
    right:-2px;
    width:10px;
    height:10px;
    background:#00ffc3;
    border-radius:50%;
    border:2px solid #111;
}

.incident-count-badge{
    position:absolute;
    right:-8px;
    bottom:-6px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#00c8ff;
    color:#00141c;
    font-size:11px;
    font-weight:900;
    line-height:18px;
    text-align:center;
    box-shadow:0 0 10px rgba(0,0,0,0.45);
    border:2px solid #0b1419;
    z-index:3;
}

.incident-icon.incident-p1 .incident-count-badge{
    background:#ffcc00;
    color:#2a1200;
}

.incident-icon.incident-multi .multi-dot{
    position:absolute;
    top:-3px;
    right:-2px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#57ff84;
    border:2px solid #0b1419;
    z-index:2;
}

.multi-incident{
    border:2px solid #00ffc3;
    box-shadow:0 0 14px rgba(0,255,195,0.8);
}

.incident-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
}

.multi-container{
    position:relative;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    background:#111c24;
    border-radius:50%;
    box-shadow:0 0 8px rgba(0,0,0,0.6);
}

.multi-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#006d6d;
    color:#fff;
    font-size:12px;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 6px rgba(255,170,0,0.8);
}

.incident-multi .multi-container{
    box-shadow:0 0 14px rgba(0,200,255,0.8);
}

/* =========================================================
   POPUPS – BASE
   ========================================================= */

.leaflet-popup-content-wrapper{
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
    padding:0 !important;
}

.leaflet-popup-content{
    margin:0 !important;
}

.leaflet-popup-tip-container{
    filter:drop-shadow(0 6px 10px rgba(0,0,0,0.28));
}

.leaflet-popup-tip{
    background:rgba(8,14,22,0.96) !important;
    box-shadow:none !important;
}

.leaflet-popup-content button{
    background:#ff3b3b;
    border:none;
    padding:6px 10px;
    border-radius:5px;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    transition:0.2s;
}

.leaflet-popup-content button:hover{
    background:#d22;
}

/* =========================================================
   INCIDENT POPUP CLEANUP / DISPATCH TERMINAL
   ========================================================= */

.dispatch-popup{
    position:relative;
    min-width:280px;
    max-width:360px;
    padding:14px;
    border-radius:18px;
    background:
        linear-gradient(180deg, rgba(18,32,40,0.96), rgba(10,20,26,0.96));
    border:1px solid rgba(0,255,195,0.16);
    box-shadow:
        0 12px 30px rgba(0,0,0,0.45),
        0 0 18px rgba(0,255,195,0.08),
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 0 25px rgba(60,160,255,0.05);
    color:#eafcff;
    backdrop-filter:blur(10px);
    transition:transform 0.18s ease, box-shadow 0.18s ease;
}

.dispatch-popup::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg,#00ffc3,#4aa3ff);
    border-radius:16px 16px 0 0;
}

.dispatch-popup.p1-alert::before{
    background:linear-gradient(90deg,#ff2b2b,#ff7b7b);
}

.dispatch-popup:hover{
    transform:translateY(-2px);
    box-shadow:
        0 14px 40px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 0 30px rgba(60,160,255,0.08);
}

.dispatch-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.dispatch-title{
    font-size:16px;
    font-weight:800;
    line-height:1.2;
    color:#ffffff;
    letter-spacing:0.2px;
}

.dispatch-priority{
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    color:#fff;
    box-shadow:0 4px 14px rgba(0,0,0,0.22);
}

.dispatch-priority[style*="ff2b2b"]{
    background:#b3261e !important;
}

.dispatch-priority[style*="ffaa00"]{
    background:#b8860b !important;
}

.dispatch-priority[style*="00ffc3"]{
    background:#006d6d !important;
}

.dispatch-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
    font-size:11px;
    opacity:0.9;
    margin-bottom:6px;
}

.dispatch-meta-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-bottom:12px;
    margin-top:10px;
}

.dispatch-stat-card{
    padding:10px 11px;
    border-radius:14px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:none;
}

.dispatch-stat-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:rgba(220,240,255,0.65);
    margin-bottom:4px;
}

.dispatch-stat-value{
    font-size:13px;
    font-weight:700;
    color:#f4fbff;
}

.dispatch-role{
    font-size:12px;
    margin-bottom:6px;
    margin-top:8px;
}

.dispatch-role-highlight{
    margin-top:10px;
    background:rgba(0,255,195,0.08);
    border:1px solid rgba(0,255,195,0.16);
    border-radius:12px;
    padding:10px 12px;
}

.dispatch-desc{
    font-size:12px;
    margin-bottom:8px;
    opacity:0.85;
}

.dispatch-desc-box{
    margin-top:10px;
    padding:12px;
    margin-bottom:12px;
    border-radius:12px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06);
    font-size:13px;
    line-height:1.45;
    color:#ecf8ff;
}

.dispatch-progress{
    height:8px;
    background:#0d1a22;
    border-radius:6px;
    overflow:hidden;
    margin-bottom:3px;
    width:100%;
}

.dispatch-progress-pretty{
    margin-top:12px;
    height:12px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.05);
    margin-bottom:7px;
}

.dispatch-progress-bar{
    height:100%;
    background:linear-gradient(90deg,#00c8ff,#00ffc3);
    border-radius:999px;
    transition:width 0.3s ease;
    box-shadow:0 0 12px rgba(0,255,195,0.35);
}

.dispatch-progress-text{
    font-size:12px;
    text-align:right;
    margin-bottom:12px;
    font-weight:700;
    color:#c8f8ff;
    opacity:.9;
}

.dispatch-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.dispatch-btn{
    flex:1 1 0;
    min-width:120px;
    padding:11px 12px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-weight:800;
    font-size:13px;
    transition:transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
    box-shadow:0 8px 18px rgba(0,0,0,0.22);
}

.dispatch-btn:hover{
    transform:translateY(-1px);
}

.dispatch-btn.nav{
    background:linear-gradient(135deg,#18364d,#24597d);
    color:#eafcff;
}

.dispatch-btn.nav:hover{
    background:#244a5e;
}

.dispatch-btn.start{
    background:linear-gradient(135deg,#00c98d,#00ffc3);
    color:#03261d;
}

.dispatch-btn.start:hover{
    background:#0c9960;
}

.dispatch-btn.busy,
.dispatch-btn:disabled{
    background:linear-gradient(135deg,#3c4755,#556272);
    color:#d6dce3;
    cursor:not-allowed;
    opacity:0.92;
}

.xp-preview{
    margin-top:6px;
    font-size:11px;
    font-weight:bold;
    color:#00ffc3;
}

.xp-preview-pretty{
    margin-top:10px;
    display:inline-block;
    padding:10px 12px;
    margin-bottom:12px;
    text-align:center;
    font-size:13px;
    font-weight:800;
    color:#fff2a8;
    border-radius:14px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.06);
}

.p1-alert{
    border-left:4px solid #b3261e;
    animation:p1flashNew 1.5s infinite;
}

@keyframes p1flashNew{
    0%{ box-shadow:0 0 0px rgba(179,38,30,0.3); }
    50%{ box-shadow:0 0 18px rgba(179,38,30,0.8); }
    100%{ box-shadow:0 0 0px rgba(179,38,30,0.3); }
}

.p1-flash{
    animation:flashBorder 1s infinite;
    border:2px solid #ff2b2b;
    border-radius:8px;
    padding:6px;
}

@keyframes flashBorder{
    0%{ box-shadow:0 0 4px #ff2b2b; }
    50%{ box-shadow:0 0 14px #ff2b2b; }
    100%{ box-shadow:0 0 4px #ff2b2b; }
}

/* =========================================================
   MULTI ROLE STATUS
   ========================================================= */

.discipline-bar{
    display:grid;
    gap:8px;
    margin:10px 0 12px;
    flex-wrap:wrap;
}

.discipline-item{
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:none;
    font-size:12px;
    min-width:90px;
    text-align:center;
    transition:all .2s;
}

.discipline-item.active{
    background:rgba(0,255,195,0.07);
    border-color:rgba(0,255,195,0.22);
    box-shadow:0 0 6px rgba(47,210,255,.25);
}

.discipline-item.done{
    background:rgba(77,255,159,0.09);
    border-color:rgba(77,255,159,0.25);
    box-shadow:0 0 6px rgba(0,255,156,.25);
}

.role-badge{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    color:#effbff;
    font-size:11px;
    font-weight:700;
    margin-right:4px;
    margin-top:4px;
}

.roles-active{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:12px;
}

.role-chip{
    padding:3px 6px;
    border-radius:6px;
    background:#222;
    font-size:11px;
    opacity:0.6;
}

.role-chip.active{
    background:#00ffc3;
    color:black;
    opacity:1;
}

.multi-role-container{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-bottom:6px;
}

/* =========================================================
   RESOLVE / AI HELP BOXES
   ========================================================= */

.resolve-preview-box,
.incident-ai-help-box{
    border-radius:14px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:none !important;
}

.resolve-preview-box.flat,
.incident-ai-help-box.flat{
    box-shadow:none !important;
    outline:none !important;
}

.resolve-preview-box{
    margin-top:10px;
    padding:12px;
    margin-bottom:12px;
    background:linear-gradient(180deg, rgba(74,163,255,0.14), rgba(74,163,255,0.06));
    border:1px solid rgba(74,163,255,0.18);
}

.resolve-preview-title{
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:#bfefff;
    margin-bottom:8px;
    opacity:0.9;
}

.resolve-preview-main{
    display:flex;
    align-items:end;
    gap:8px;
    margin-bottom:10px;
    text-align:center;
}

.resolve-speed-value{
    font-size:28px;
    font-weight:900;
    line-height:1;
    color:#9fd4ff;
    text-shadow:
        0 0 10px rgba(80,180,255,0.45),
        0 0 20px rgba(80,180,255,0.15);
}

.resolve-speed-value[style*="#4dff9f"]{
    text-shadow:
        0 0 10px rgba(80,255,180,0.6),
        0 0 20px rgba(80,255,180,0.25);
}

.resolve-speed-sub{
    font-size:12px;
    opacity:0.75;
    padding-bottom:2px;
    color:rgba(230,245,255,0.7);
    margin-top:4px;
}

.resolve-preview-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.resolve-preview-chip{
    background:rgba(255,255,255,0.06);
    border-radius:10px;
    padding:8px 10px;
    font-size:12px;
    line-height:1.35;
    border:1px solid rgba(255,255,255,0.05);
}

.incident-ai-help-box{
    padding:12px;
    margin-bottom:12px;
}

.incident-ai-help-title{
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:#bfefff;
    margin-bottom:8px;
}

.incident-ai-help-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:7px 0;
    font-size:12px;
    border-top:1px solid rgba(255,255,255,0.05);
}

.incident-ai-help-row:first-of-type{
    border-top:none;
}

/* =========================================================
   INCIDENT POPUP COMPACT MOBILE
   ========================================================= */

.compact-popup{
    min-width:0 !important;
    width:min(86vw, 340px);
    max-width:340px;
    padding:12px;
    border-radius:16px;
}

.compact-header{
    margin-bottom:10px;
    align-items:flex-start;
}

.dispatch-title-wrap{
    min-width:0;
    flex:1;
}

.compact-popup .dispatch-title{
    font-size:14px;
    font-weight:800;
    line-height:1.2;
    word-break:break-word;
}

.dispatch-subline{
    margin-top:3px;
    font-size:11px;
    color:rgba(220,240,255,0.65);
}

.compact-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px;
}

.compact-stat{
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.07);
    font-size:11px;
    font-weight:700;
    color:#eefaff;
}

.mini-role-strip{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-bottom:10px;
}

.mini-role-chip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 10px;
    border-radius:12px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.06);
    font-size:11px;
}

.mini-role-chip.active{
    background:rgba(0,255,195,0.08);
    border-color:rgba(0,255,195,0.18);
}

.mini-role-chip.done{
    background:rgba(77,255,159,0.09);
    border-color:rgba(77,255,159,0.18);
}

.mini-role-name{
    font-weight:700;
    color:#f2fbff;
    min-width:0;
}

.mini-role-count{
    font-weight:800;
    color:#bff8ff;
    white-space:nowrap;
}

.compact-roles{
    gap:5px;
    margin-bottom:10px;
}

.role-badge.compact{
    padding:5px 8px;
    font-size:10px;
}

.compact-details{
    margin-bottom:10px;
    border-radius:12px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.06);
    overflow:hidden;
}

.compact-details summary{
    list-style:none;
    cursor:pointer;
    padding:10px 12px;
    font-size:12px;
    font-weight:800;
    color:#eafcff;
}

.compact-details summary::-webkit-details-marker{
    display:none;
}

.compact-inner-box{
    padding:0 12px 12px;
    font-size:12px;
    line-height:1.45;
    color:#edf9ff;
}

.resolve-speed-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
    font-size:12px;
}

.resolve-mini-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    font-size:11px;
}

.compact-ai-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:6px 0;
    border-top:1px solid rgba(255,255,255,0.05);
    font-size:11px;
}

.compact-ai-row:first-child{
    border-top:none;
}

.compact-progress{
    height:10px;
    margin-bottom:5px;
}

.compact-progress-text{
    margin-bottom:10px;
    font-size:11px;
}

.compact-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
}

.compact-actions-secondary{
    margin-top:7px;
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.dispatch-btn.small{
    min-width:0;
    padding:9px 8px;
    font-size:11px;
}

@media (max-width: 600px){

    .resolve-preview-box{
        padding:10px;
        margin-top:8px;
    }

    .resolve-preview-main{
        margin-bottom:6px;
    }

    .resolve-speed-value{
        font-size:22px;
    }

    .resolve-speed-sub{
        font-size:11px;
    }

    .resolve-preview-grid{
        grid-template-columns:1fr 1fr;
        gap:6px;
    }

    .resolve-preview-chip{
        font-size:11px;
        padding:6px 8px;
    }

    .dispatch-stat-card{
        padding:8px;
    }

    .dispatch-stat-value{
        font-size:12px;
    }

    .dispatch-desc-box{
        font-size:12px;
        padding:8px;
    }

    .xp-preview-pretty{
        font-size:12px;
        padding:6px 10px;
    }
}

@media (max-width: 480px){
    .compact-popup{
        width:min(84vw, 320px);
        padding:10px;
        border-radius:14px;
    }

    .compact-popup .dispatch-title{
        font-size:13px;
    }

    .dispatch-priority{
        padding:4px 8px;
        font-size:11px;
    }

    .mini-role-strip{
        grid-template-columns:1fr;
    }

    .compact-actions,
    .compact-actions-secondary{
        grid-template-columns:1fr 1fr;
    }

    .dispatch-btn{
        min-width:0;
        padding:10px 8px;
        font-size:12px;
    }
}

/* =========================================================
   AI VEHICLES
   ========================================================= */

.ai-unit-divicon{
    background:transparent !important;
    border:none !important;
}

.ai-unit-divicon,
.ai-unit-divicon *{
    pointer-events:none;
}

.ai-unit-wrapper{
    position:relative;
    width:64px;
    height:40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    pointer-events:none;
}

.ai-eta-label{
    position:absolute;
    top:-16px;
    left:50%;
    transform:translateX(-50%);
    padding:2px 6px;
    border-radius:999px;
    background:rgba(8,14,22,0.92);
    border:1px solid rgba(255,255,255,0.08);
    color:#eafcff;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
    line-height:1.2;
    box-shadow:0 4px 10px rgba(0,0,0,0.25);
}

.ai-route-eta-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(11,20,25,0.92);
    border:1px solid rgba(126,249,255,0.65);
    color:#dfffff;
    font-size:12px;
    font-weight:700;
    box-shadow:0 4px 14px rgba(0,0,0,0.35);
    backdrop-filter:blur(4px);
    pointer-events:none;
}

.ai-vehicle-marker{
    width:64px;
    height:34px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:auto;
}

.ai-vehicle-body{
    position:relative;
    transform-origin:center center;
    filter:drop-shadow(0 3px 7px rgba(0,0,0,0.42));
}

/* ================= LIGHTBAR ================= */

.ai-lightbar{
    position:absolute;
    left:50%;
    top:-5px;
    transform:translateX(-50%);
    width:18px;
    height:5px;
    border-radius:3px;
    background:#24313b;
    border:1px solid rgba(255,255,255,0.08);
    overflow:hidden;
    z-index:5;
}

.ai-light-left,
.ai-light-right{
    position:absolute;
    top:0;
    width:50%;
    height:100%;
    opacity:0.18;
}

.ai-light-left{
    left:0;
    background:#2f7dff;
}

.ai-light-right{
    right:0;
    background:#2f7dff;
}

/* berger amber */

.ai-vehicle-marker.tow .ai-light-left,
.ai-vehicle-marker.tow .ai-light-right{
    background:#ffb300;
}

/* ================= POLICE – FAST ALTERNATING ================= */

.ai-vehicle-marker.police.ai-emergency .ai-light-left{
    animation:flashPoliceLeft .35s infinite;
}

.ai-vehicle-marker.police.ai-emergency .ai-light-right{
    animation:flashPoliceRight .35s infinite;
}

/* ================= FIRE – DOUBLE FLASH ================= */

.ai-vehicle-marker.fire.ai-emergency .ai-light-left{
    animation:flashFireLeft .8s infinite;
}

.ai-vehicle-marker.fire.ai-emergency .ai-light-right{
    animation:flashFireRight .8s infinite;
}

/* ================= AMBULANCE – SLOW ================= */

.ai-vehicle-marker.medical.ai-emergency .ai-light-left{
    animation:flashAmbLeft 1s infinite;
}

.ai-vehicle-marker.medical.ai-emergency .ai-light-right{
    animation:flashAmbRight 1s infinite;
}

/* ================= TOW – ROTATING AMBER ================= */

.ai-vehicle-marker.tow.ai-emergency .ai-light-left{
    animation:flashTowLeft 1.1s infinite;
}

.ai-vehicle-marker.tow.ai-emergency .ai-light-right{
    animation:flashTowRight 1.1s infinite;
}

/* ================= POLICE PATTERN ================= */

@keyframes flashPoliceLeft{
    0%{opacity:1; box-shadow:0 0 10px #2f7dff;}
    40%{opacity:1;}
    50%{opacity:0.2;}
    100%{opacity:0.2;}
}

@keyframes flashPoliceRight{
    0%{opacity:0.2;}
    40%{opacity:0.2;}
    50%{opacity:1; box-shadow:0 0 10px #2f7dff;}
    90%{opacity:1;}
    100%{opacity:0.2;}
}

/* ================= FIRE PATTERN ================= */

@keyframes flashFireLeft{
    0%{opacity:1;}
    20%{opacity:0.2;}
    40%{opacity:1;}
    60%{opacity:0.2;}
    100%{opacity:0.2;}
}

@keyframes flashFireRight{
    0%{opacity:0.2;}
    20%{opacity:1;}
    40%{opacity:0.2;}
    60%{opacity:1;}
    100%{opacity:0.2;}
}

/* ================= AMBULANCE PATTERN ================= */

@keyframes flashAmbLeft{
    0%{opacity:1; box-shadow:0 0 8px #2f7dff;}
    50%{opacity:0.2;}
    100%{opacity:0.2;}
}

@keyframes flashAmbRight{
    0%{opacity:0.2;}
    50%{opacity:1; box-shadow:0 0 8px #2f7dff;}
    100%{opacity:0.2;}
}

/* ================= TOW PATTERN ================= */

@keyframes flashTowLeft{
    0%{opacity:1; box-shadow:0 0 8px #ffb300;}
    50%{opacity:0.2;}
    100%{opacity:0.2;}
}

@keyframes flashTowRight{
    0%{opacity:0.2;}
    50%{opacity:1; box-shadow:0 0 8px #ffb300;}
    100%{opacity:0.2;}
}

/* ================= VEHICLE GLOW ================= */

.ai-vehicle-marker.ai-emergency .ai-vehicle-body{
    animation:vehiclePulse 1.2s infinite ease-in-out;
}

@keyframes vehiclePulse{
    0%{
        transform:translateY(0);
        filter:drop-shadow(0 0 0 rgba(255,70,70,0));
    }
    50%{
        transform:translateY(-1px);
        filter:drop-shadow(0 0 6px rgba(255,70,70,0.35));
    }
    100%{
        transform:translateY(0);
        filter:drop-shadow(0 0 0 rgba(255,70,70,0));
    }
}

/* ================= WHEELS ================= */

.ai-wheel{
    position:absolute;
    bottom:-4px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#141414;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 0 0 1px rgba(0,0,0,0.35);
    z-index:4;
}

.ai-wheel.front{
    left:10px;
}

.ai-wheel.rear{
    right:10px;
}

/* ================= POLICE CAR ================= */

.ai-police{
    width:52px;
    height:16px;
}

.ai-police .ai-main{
    position:absolute;
    left:3px;
    right:3px;
    bottom:2px;
    height:12px;
    background:linear-gradient(180deg,#f8fbff 0%, #dbe4ef 100%);
    border:1px solid rgba(0,0,0,0.28);
    border-radius:8px 10px 6px 6px;
}

.ai-police .ai-cabin{
    position:absolute;
    left:14px;
    top:1px;
    width:20px;
    height:8px;
    background:linear-gradient(180deg,rgba(180,220,255,0.95),rgba(120,170,210,0.75));
    border:1px solid rgba(255,255,255,0.4);
    border-radius:6px 6px 3px 3px;
    z-index:2;
}

.ai-police .ai-stripe{
    position:absolute;
    left:7px;
    right:7px;
    top:8px;
    height:3px;
    background:#2f7dff;
    border-radius:2px;
    z-index:3;
}

/* ================= FIRE TRUCK ================= */

.ai-firetruck{
    width:56px;
    height:18px;
}

.ai-firetruck .ai-main{
    position:absolute;
    left:2px;
    right:14px;
    bottom:2px;
    height:13px;
    background:linear-gradient(180deg,#ff6060 0%, #cf2f2f 100%);
    border:1px solid rgba(0,0,0,0.3);
    border-radius:4px;
}

.ai-firetruck .ai-cabin{
    position:absolute;
    right:3px;
    bottom:2px;
    width:14px;
    height:12px;
    background:linear-gradient(180deg,#ff6d6d 0%, #d33a3a 100%);
    border:1px solid rgba(0,0,0,0.3);
    border-radius:3px 5px 3px 3px;
    z-index:2;
}

.ai-firetruck .ai-window{
    position:absolute;
    right:5px;
    top:4px;
    width:8px;
    height:5px;
    background:linear-gradient(180deg,rgba(220,240,255,0.95),rgba(130,170,205,0.8));
    border-radius:2px;
    z-index:3;
}

.ai-firetruck .ai-stripe{
    position:absolute;
    left:6px;
    right:18px;
    top:8px;
    height:3px;
    background:#ffffff;
    border-radius:2px;
    z-index:3;
}

.ai-firetruck .ai-ladder{
    position:absolute;
    left:8px;
    right:18px;
    top:2px;
    height:3px;
    border-radius:2px;
    background:rgba(255,255,255,0.4);
    z-index:3;
}

/* ================= AMBULANCE ================= */

.ai-ambulance{
    width:56px;
    height:18px;
}

.ai-ambulance .ai-main{
    position:absolute;
    left:2px;
    right:2px;
    bottom:2px;
    height:13px;
    background:linear-gradient(180deg,#f5ea74 0%, #d1c23f 100%);
    border:1px solid rgba(0,0,0,0.28);
    border-radius:5px 7px 5px 5px;
}

.ai-ambulance .ai-cabin{
    position:absolute;
    left:10px;
    top:2px;
    width:16px;
    height:7px;
    background:linear-gradient(180deg,rgba(215,245,255,0.95),rgba(130,185,215,0.78));
    border:1px solid rgba(255,255,255,0.35);
    border-radius:4px 4px 2px 2px;
    z-index:2;
}

.ai-ambulance .ai-stripe{
    position:absolute;
    left:5px;
    right:5px;
    top:8px;
    height:3px;
    background:#0f9f6e;
    border-radius:2px;
    z-index:3;
}

.ai-ambulance .ai-cross{
    position:absolute;
    right:8px;
    top:4px;
    width:8px;
    height:8px;
    z-index:4;
}

.ai-ambulance .ai-cross::before,
.ai-ambulance .ai-cross::after{
    content:"";
    position:absolute;
    background:#0f9f6e;
    border-radius:1px;
}

.ai-ambulance .ai-cross::before{
    left:3px;
    top:0;
    width:2px;
    height:8px;
}

.ai-ambulance .ai-cross::after{
    left:0;
    top:3px;
    width:8px;
    height:2px;
}

/* ================= TOW TRUCK ================= */

.ai-towtruck{
    width:56px;
    height:18px;
}

.ai-towtruck .ai-main{
    position:absolute;
    left:2px;
    right:16px;
    bottom:2px;
    height:13px;
    background:linear-gradient(180deg,#ffc94a 0%, #e09c16 100%);
    border:1px solid rgba(0,0,0,0.3);
    border-radius:5px 3px 3px 5px;
}

.ai-towtruck .ai-cabin{
    position:absolute;
    left:6px;
    top:2px;
    width:14px;
    height:7px;
    background:linear-gradient(180deg,rgba(220,240,255,0.95),rgba(130,180,210,0.78));
    border:1px solid rgba(255,255,255,0.35);
    border-radius:4px 4px 2px 2px;
    z-index:2;
}

.ai-towtruck .ai-boom{
    position:absolute;
    right:6px;
    top:5px;
    width:16px;
    height:2px;
    background:#333;
    transform:rotate(-22deg);
    transform-origin:left center;
    z-index:3;
}

.ai-towtruck .ai-hook{
    position:absolute;
    right:3px;
    top:3px;
    width:6px;
    height:6px;
    border-right:2px solid #333;
    border-bottom:2px solid #333;
    border-radius:0 0 3px 0;
    z-index:3;
}

.ai-towtruck .ai-stripe{
    position:absolute;
    left:4px;
    right:18px;
    top:8px;
    height:3px;
    background:#333;
    border-radius:2px;
    z-index:3;
}

/* ================= POPUP ================= */

.ai-popup{
    min-width:220px;
    color:#fff;
    font-size:12px;
    line-height:1.4;
}

.ai-popup-title{
    font-size:14px;
    font-weight:700;
    margin-bottom:8px;
    color:#fff;
}

.ai-popup-row{
    margin-bottom:5px;
    color:#d7e3ea;
}

.ai-popup strong{
    color:#fff;
}

/* ================= AI POPUP – CLEAN MOBILE STYLE ================= */

.ai-popup{
    position:relative;
    min-width:220px;
    max-width:280px;
    color:#eaf6ff !important;
    font-size:12px;
    line-height:1.45;
    font-family:"Rajdhani", Arial, sans-serif;
}

.ai-popup-title{
    font-size:14px;
    font-weight:900;
    margin-bottom:10px;
    color:#ffffff !important;
    font-family:"Orbitron", Arial, sans-serif;
    letter-spacing:.5px;
    text-transform:uppercase;
    padding-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    text-shadow:0 0 6px rgba(0,160,255,0.18);
}

.ai-popup-row{
    margin-bottom:6px;
    color:#d2e2ec !important;
    display:flex;
    justify-content:space-between;
    gap:10px;
}

.ai-popup-row strong{
    color:#ffffff !important;
    font-weight:800;
    flex-shrink:0;
}

.ai-popup-row:last-child{
    margin-bottom:0;
}

/* wrapper */
.leaflet-popup-content-wrapper{
    background:
        linear-gradient(180deg, rgba(11,22,31,0.96), rgba(6,14,20,0.96)) !important;
    border:1px solid rgba(62,197,255,0.14) !important;
    box-shadow:
        0 18px 50px rgba(0,0,0,.45),
        0 0 20px rgba(47,210,255,.08),
        inset 0 1px 0 rgba(255,255,255,.04);
    border-radius:16px !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

/* content */
.leaflet-popup-content{
    margin:12px 14px !important;
    color:#eaf6ff !important;
}

/* tip */
.leaflet-popup-tip{
    background:rgba(6,14,20,0.96) !important;
    box-shadow:0 0 10px rgba(0,0,0,.4);
}

/* close */
.leaflet-popup-close-button{
    color:#9ecfff !important;
    font-size:16px;
    font-weight:bold;
}

.leaflet-popup-close-button:hover{
    color:#ffffff !important;
}

/* ================= MOBILE TIGHTER ================= */

@media (max-width: 600px){
    .ai-popup{
        min-width:0;
        max-width:240px;
        font-size:11px;
        line-height:1.4;
    }

    .ai-popup-title{
        font-size:12px;
        margin-bottom:8px;
        padding-bottom:5px;
    }

    .ai-popup-row{
        margin-bottom:5px;
        gap:8px;
        font-size:11px;
    }

    .leaflet-popup-content{
        margin:10px 12px !important;
    }

    .leaflet-popup-content-wrapper{
        border-radius:14px !important;
    }
}

@media (max-width: 860px){

    #bottomPanel{
        display:grid;
        grid-template-columns:repeat(4, 1fr);
        grid-template-areas:
            "follow center vip more"
            "speed distance eta eta";
        gap:8px;
    }

    #followBtn{ grid-area:follow; }
    #centerBtn{ grid-area:center; }
    .vipBtn{ grid-area:vip; }
    .footerActionBtn{ grid-area:more; }

    .hudStatSpeed{ grid-area:speed; }
    .hudStatDistance{ grid-area:distance; }
    .hudStatEta{ grid-area:eta; }

}

.compact-details{
    margin-bottom:10px;
    border-radius:12px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.06);
    overflow:hidden;
}

.compact-details summary{
    list-style:none;
    cursor:pointer;
    padding:10px 12px;
    font-size:12px;
    font-weight:800;
    color:#eafcff;
}

.compact-details summary::-webkit-details-marker{
    display:none;
}

.compact-inner-box{
    padding:0 12px 12px;
    font-size:12px;
    line-height:1.45;
    color:#edf9ff;
}

.mini-role-strip{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-bottom:10px;
}

.mini-role-chip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 10px;
    border-radius:12px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.06);
    font-size:11px;
}

.mini-role-chip.active{
    background:rgba(0,255,195,0.08);
    border-color:rgba(0,255,195,0.18);
}

.mini-role-chip.done{
    background:rgba(77,255,159,0.09);
    border-color:rgba(77,255,159,0.18);
}

.mini-role-name{
    font-weight:700;
    color:#f2fbff;
    min-width:0;
}

.mini-role-count{
    font-weight:800;
    color:#bff8ff;
    white-space:nowrap;
}

.compact-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px;
}

.compact-stat{
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.07);
    font-size:11px;
    font-weight:700;
    color:#eefaff;
}

.compact-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
}

.compact-actions-secondary{
    margin-top:7px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
}

/* ================= INCIDENT POPUP – MORE GAME/AI STYLE ================= */

.dispatch-popup.compact-popup{
    min-width:0 !important;
    width:min(84vw, 320px);
    max-width:320px;
    padding:10px 10px 12px;
    border-radius:16px;
    background:linear-gradient(180deg, rgba(8,18,25,0.96), rgba(5,12,17,0.96));
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 12px 28px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.03);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.dispatch-popup.compact-popup::before{
    height:2px;
    border-radius:16px 16px 0 0;
}

.compact-header{
    align-items:flex-start;
    gap:8px;
    margin-bottom:8px;
}

.dispatch-title-wrap{
    min-width:0;
    flex:1;
}

.compact-popup .dispatch-title{
    font-family:"Rajdhani", Arial, sans-serif;
    font-size:13px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:.2px;
    text-transform:none;
    color:#ffffff;
}

.dispatch-subline{
    margin-top:2px;
    font-size:11px;
    line-height:1.3;
    color:#9fb2bf;
}

.compact-popup .dispatch-priority{
    min-width:44px;
    height:34px;
    padding:0 10px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:900;
    box-shadow:none;
}

.compact-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:8px;
}

.compact-stat{
    padding:6px 9px;
    border-radius:999px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.06);
    font-size:11px;
    font-weight:700;
    color:#eaf6ff;
}

.mini-role-strip{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-bottom:8px;
}

.mini-role-chip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:38px;
    padding:7px 9px;
    border-radius:11px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.06);
    font-size:11px;
}

.mini-role-chip.active{
    background:rgba(255,255,255,0.06);
    border-color:rgba(47,210,255,0.14);
    box-shadow:none;
}

.mini-role-chip.done{
    background:rgba(77,255,159,0.08);
    border-color:rgba(77,255,159,0.16);
    box-shadow:none;
}

.mini-role-name{
    font-weight:700;
    color:#f4fbff;
    min-width:0;
}

.mini-role-count{
    font-weight:800;
    color:#d8f5ff;
    white-space:nowrap;
}

.dispatch-desc-box{
    margin:0 0 8px 0;
    padding:9px 10px;
    border-radius:11px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.05);
    font-size:11px;
    line-height:1.4;
    color:#e5f0f6;
}

.compact-details{
    margin-bottom:8px;
    border-radius:11px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.05);
    overflow:hidden;
}

.compact-details summary{
    list-style:none;
    cursor:pointer;
    padding:9px 10px;
    font-size:11px;
    font-weight:800;
    color:#eafcff;
}

.compact-details summary::-webkit-details-marker{
    display:none;
}

.compact-inner-box{
    padding:0 10px 10px;
    font-size:11px;
    line-height:1.4;
    color:#edf9ff;
}

.resolve-speed-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:7px;
    font-size:11px;
}

.resolve-mini-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    font-size:10px;
}

.dispatch-progress-pretty.compact-progress{
    height:8px;
    margin-bottom:4px;
    border-radius:999px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.04);
}

.dispatch-progress-bar{
    box-shadow:none;
}

.dispatch-progress-text.compact-progress-text{
    font-size:10px;
    margin-bottom:8px;
    color:#dff3ff;
}

.compact-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}

.compact-actions-secondary{
    margin-top:6px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}

.dispatch-btn.small{
    min-width:0;
    height:38px;
    padding:0 8px;
    border-radius:10px;
    font-size:11px;
    font-weight:800;
    box-shadow:none;
}

.dispatch-btn.nav.small{
    background:linear-gradient(180deg, #1a3f5c, #214d70);
    color:#eefaff;
}

.dispatch-btn.start.small{
    background:linear-gradient(180deg, #1d7cc2, #255f97);
    color:#ffffff;
}

.dispatch-btn.busy.small,
.dispatch-btn.small:disabled{
    background:linear-gradient(180deg, #3b4752, #2c353e);
    color:#d8e0e6;
}

.role-badge.compact{
    padding:4px 7px;
    border-radius:999px;
    font-size:10px;
}

/* mobiel extra strak */
@media (max-width: 480px){
    .dispatch-popup.compact-popup{
        width:min(82vw, 300px);
        max-width:300px;
        padding:9px 9px 10px;
    }

    .compact-popup .dispatch-title{
        font-size:12px;
    }

    .compact-popup .dispatch-priority{
        min-width:40px;
        height:30px;
        font-size:11px;
    }

    .mini-role-strip{
        grid-template-columns:1fr;
    }

    .compact-actions,
    .compact-actions-secondary{
        grid-template-columns:1fr 1fr;
    }
}

/* ================= INCIDENT POPUP CURSOR FIX ================= */

.dispatch-popup,
.dispatch-popup *{
    cursor:default;
}

.compact-details summary{
    cursor:pointer;
}

.dispatch-btn,
.dispatch-btn *{
    cursor:pointer;
}

.leaflet-popup-close-button{
    cursor:pointer !important;
}

/* ================= POPUP STABILITEIT FIX ================= */

.leaflet-popup-content-wrapper,
.leaflet-popup-content,
.dispatch-popup{
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
}

/* voorkomt GPU flicker */
.dispatch-popup{
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* voorkomt mini reflow jitter */
.leaflet-popup{
    will-change: auto !important;
}