/* ================= 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;
}

.action-buttons,
.dispatch-actions {
    position: relative;
    z-index: 9999;
}

.game-toast-wrap{
    position:fixed;
    top:20px;
    right:20px;
    z-index:999999;
    display:flex;
    flex-direction:column;
    gap:12px;
    pointer-events:none;
    max-width:min(420px, calc(100vw - 24px));
}

.game-toast{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:16px;
    color:#fff;
    font-weight:700;
    line-height:1.35;
    backdrop-filter:blur(10px);
    box-shadow:
        0 14px 35px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,.08);
    transform:translateX(24px) scale(.96);
    opacity:0;
    transition:
        transform .22s ease,
        opacity .22s ease;
    border:1px solid rgba(255,255,255,.08);
}

.game-toast.show{
    transform:translateX(0) scale(1);
    opacity:1;
}

.game-toast.hide{
    transform:translateX(24px) scale(.96);
    opacity:0;
}

.game-toast.info{
    background:linear-gradient(135deg, rgba(15,26,46,.96), rgba(11,83,122,.96));
}

.game-toast.success{
    background:linear-gradient(135deg, rgba(13,63,43,.96), rgba(20,143,92,.96));
}

.game-toast.warning{
    background:linear-gradient(135deg, rgba(91,55,7,.96), rgba(194,119,16,.96));
}

.game-toast.error{
    background:linear-gradient(135deg, rgba(88,16,16,.96), rgba(177,36,36,.96));
}

.game-toast-icon{
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.12);
    font-size:18px;
}

.game-toast-text{
    flex:1;
    font-size:14px;
}

@media (max-width: 700px){
    .game-toast-wrap{
        top:12px;
        left:12px;
        right:12px;
        max-width:none;
    }

    .game-toast{
        padding:13px 14px;
        border-radius:14px;
    }

    .game-toast-text{
        font-size:13px;
    }
}

/* =========================
   GLOBAL TACTICAL UPGRADE
   ========================= */

body{
    background:
        radial-gradient(circle at 50% 0%, rgba(0,180,255,0.08), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(0,255,195,0.05), transparent 40%),
        #0a1218;
}

/* subtle scan + grid overlay */
body::after{
    content:"";
    position:fixed;
    inset:0;
    background:
        linear-gradient(rgba(0,255,195,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,195,0.03) 1px, transparent 1px);
    background-size:40px 40px;
    pointer-events:none;
    z-index:1;
}

/* =========================
   HEADER = COMMAND BAR
   ========================= */

#appHeader{
    background:
        linear-gradient(90deg,#07131a,#0f2a38);
    border-bottom:1px solid rgba(0,255,195,0.15);

    box-shadow:
        0 4px 20px rgba(0,0,0,0.6),
        inset 0 0 20px rgba(0,255,195,0.05);
}

/* title = radio feel */
.appTitle{
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#00ffc3;

    text-shadow:
        0 0 6px rgba(0,255,195,0.6),
        0 0 12px rgba(0,255,195,0.2);
}

/* =========================
   XP BAR = ENERGY STYLE
   ========================= */

.xpBarBg{
    background:#051018;
    box-shadow:inset 0 0 6px rgba(0,0,0,0.8);
}

.xpBarFill{
    background:
        linear-gradient(90deg,#00ffc3,#00aaff);
    box-shadow:
        0 0 10px rgba(0,255,195,0.5);
}

/* =========================
   BUTTONS = TACTICAL
   ========================= */

.footerActionBtn{
    background:#0d1f28;
    border:1px solid rgba(0,255,195,0.15);

    box-shadow:
        inset 0 0 10px rgba(0,255,195,0.05);

    letter-spacing:.5px;
}

.footerActionBtn:hover{
    background:#132a35;
    border-color:#00ffc3;

    box-shadow:
        0 0 10px rgba(0,255,195,0.4),
        inset 0 0 12px rgba(0,255,195,0.1);
}

/* =========================
   VIP BUTTON = ELITE
   ========================= */

.vipBtn{
    background:
        linear-gradient(45deg,#8a2eff,#00ffc3);

    box-shadow:
        0 0 12px rgba(0,255,195,0.4),
        0 0 20px rgba(138,46,255,0.4);
}

/* =========================
   MAP BUTTONS = RADAR STYLE
   ========================= */

#centerBtn,
#followBtn{
    background:#08161d;
    border:1px solid rgba(0,255,195,0.15);

    box-shadow:
        0 0 12px rgba(0,255,195,0.2),
        inset 0 0 10px rgba(0,255,195,0.05);
}

#centerBtn:hover,
#followBtn:hover{
    transform:scale(1.05);
    box-shadow:
        0 0 18px rgba(0,255,195,0.6);
}

#followBtn.active{
    background:#00ffc3;
    color:#001018;

    box-shadow:
        0 0 20px rgba(0,255,195,0.9);
}

/* =========================
   DISPATCH TERMINAL UPGRADE
   ========================= */

.dispatch-popup{
    min-width:300px;
    max-width:380px;
    border-radius:20px;

    background:
        linear-gradient(180deg, rgba(10,20,28,0.97), rgba(6,14,20,0.97));
    border:1px solid rgba(0,255,195,0.18);

    box-shadow:
        0 18px 40px rgba(0,0,0,0.55),
        0 0 20px rgba(0,255,195,0.08),
        inset 0 0 30px rgba(0,180,255,0.05),
        inset 0 1px 0 rgba(255,255,255,0.04);

    overflow:hidden;
}

.dispatch-popup::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent 18%),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.015),
            rgba(255,255,255,0.015) 1px,
            transparent 1px,
            transparent 4px
        );
    opacity:.45;
}

.dispatch-popup.p1-alert{
    border-color:rgba(255,60,60,0.28);
    box-shadow:
        0 20px 46px rgba(0,0,0,0.62),
        0 0 18px rgba(255,40,40,0.16),
        inset 0 0 32px rgba(255,60,60,0.08);
}

.dispatch-popup.p1-alert::before{
    height:4px;
    box-shadow:0 0 18px rgba(255,60,60,0.6);
}

.dispatch-header{
    margin:-14px -14px 14px -14px;
    padding:12px 14px 12px;
    background:
        linear-gradient(90deg, rgba(0,255,195,0.06), rgba(0,140,255,0.06));
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.dispatch-popup.p1-alert .dispatch-header{
    background:
        linear-gradient(90deg, rgba(255,50,50,0.14), rgba(255,120,120,0.05));
}

.dispatch-title{
    font-size:17px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:#ffffff;
    text-shadow:0 0 8px rgba(0,255,195,0.15);
}

.dispatch-subline{
    font-size:12px;
    line-height:1.35;
    color:#9fc4d2;
    margin-top:4px;
}

.dispatch-priority{
    min-width:42px;
    text-align:center;
    font-weight:900;
    letter-spacing:.8px;
    font-size:12px;
    border-radius:999px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px rgba(0,0,0,0.35);
}

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

.compact-stat{
    padding:10px 8px;
    border-radius:12px;
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.05);
    text-align:center;
    font-size:12px;
    font-weight:700;
    color:#dff7ff;
    box-shadow:inset 0 0 10px rgba(255,255,255,0.02);
}

.dispatch-desc-box{
    margin:10px 0 12px;
    padding:12px;
    border-radius:14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    border:1px solid rgba(255,255,255,0.05);
    color:#d7e7ef;
    font-size:13px;
    line-height:1.5;
}

.compact-details{
    margin:10px 0 0;
    border-radius:14px;
    overflow:hidden;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
}

.compact-details summary{
    list-style:none;
    cursor:pointer;
    padding:12px 14px;
    font-size:13px;
    font-weight:800;
    color:#ffffff;
    letter-spacing:.2px;
    background:
        linear-gradient(90deg, rgba(0,255,195,0.04), rgba(0,140,255,0.03));
    user-select:none;
}

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

.compact-details[open] summary{
    border-bottom:1px solid rgba(255,255,255,0.05);
    box-shadow:inset 0 -1px 0 rgba(255,255,255,0.02);
}

.compact-inner-box{
    padding:12px 14px;
    background:rgba(3,10,15,0.26);
}

.resolve-speed-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
    font-size:13px;
    color:#dff7ff;
}

.resolve-speed-line strong{
    font-size:15px;
    font-weight:900;
    letter-spacing:.3px;
}

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

.resolve-mini-grid > div{
    padding:8px 9px;
    border-radius:10px;
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.05);
    font-size:12px;
    color:#d5ebf3;
}

.mini-role-strip{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:10px 0 0;
}

.mini-role-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    background:#10202a;
    border:1px solid rgba(255,255,255,0.06);
    font-size:11px;
    font-weight:800;
    color:#dbeff7;
    box-shadow:inset 0 0 10px rgba(255,255,255,0.02);
}

.mini-role-chip.active{
    border-color:rgba(0,200,255,0.30);
    box-shadow:
        0 0 12px rgba(0,200,255,0.12),
        inset 0 0 10px rgba(0,200,255,0.06);
}

.mini-role-chip.done{
    background:linear-gradient(90deg, rgba(0,180,120,0.24), rgba(0,255,195,0.10));
    border-color:rgba(0,255,195,0.28);
    color:#eafff8;
    box-shadow:
        0 0 14px rgba(0,255,195,0.14),
        inset 0 0 10px rgba(0,255,195,0.08);
}

.mini-role-name{
    white-space:nowrap;
}

.mini-role-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:22px;
    padding:0 7px;
    border-radius:999px;
    background:rgba(255,255,255,0.07);
    font-size:10px;
    font-weight:900;
    color:#fff;
}

.role-badge.compact{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.05);
    font-size:11px;
    font-weight:800;
    color:#dff4ff;
}

.compact-roles{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.incident-ai-help-box.flat{
    margin-top:10px;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(80,120,255,0.08);
    border:1px solid rgba(120,160,255,0.15);
}

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

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

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

.dispatch-progress{
    position:relative;
    height:14px;
    margin-top:14px;
    border-radius:999px;
    background:#071118;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:inset 0 0 10px rgba(0,0,0,0.65);
}

.dispatch-progress-bar{
    height:100%;
    border-radius:999px;
    background:
        linear-gradient(90deg,#00ffc3,#00b7ff);
    box-shadow:
        0 0 18px rgba(0,255,195,0.28);
    transition:width .28s ease;
    position:relative;
}

.dispatch-progress-bar::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
    animation:dispatchBarSweep 1.8s linear infinite;
}

@keyframes dispatchBarSweep{
    0%{ transform:translateX(-100%); }
    100%{ transform:translateX(100%); }
}

.dispatch-progress-text{
    margin-top:7px;
    text-align:right;
    font-size:12px;
    font-weight:900;
    color:#9fdff3;
    letter-spacing:.5px;
}

.compact-actions,
.dispatch-actions{
    position:relative;
    z-index:9999;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

.dispatch-btn{
    min-height:40px;
    padding:0 14px;
    border-radius:12px;
    border:none;
    font-size:13px;
    font-weight:900;
    letter-spacing:.2px;
    cursor:pointer;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        opacity .15s ease,
        background .15s ease;
}

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

.dispatch-btn.start{
    background:linear-gradient(90deg,#00d287,#00ffc3);
    color:#031015;
    box-shadow:0 0 16px rgba(0,255,195,0.20);
}

.dispatch-btn.start:hover{
    box-shadow:0 0 20px rgba(0,255,195,0.34);
}

.dispatch-btn.nav{
    background:linear-gradient(90deg,#1d8fff,#49c0ff);
    color:#04131b;
    box-shadow:0 0 16px rgba(73,192,255,0.16);
}

.dispatch-btn.nav:hover{
    box-shadow:0 0 20px rgba(73,192,255,0.28);
}

.dispatch-btn.busy,
.dispatch-btn:disabled{
    background:#2a3a43;
    color:#a6bfcc;
    cursor:not-allowed;
    opacity:.92;
    box-shadow:none;
    transform:none;
}

.compact-actions-secondary{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,0.05);
}

@media (max-width: 600px){
    .dispatch-popup{
        min-width:unset;
        max-width:min(92vw, 360px);
        padding:13px;
        border-radius:18px;
    }

    .dispatch-header{
        margin:-13px -13px 12px -13px;
        padding:11px 13px;
    }

    .dispatch-title{
        font-size:15px;
    }

    .compact-meta{
        gap:6px;
    }

    .compact-stat{
        padding:8px 6px;
        font-size:11px;
    }

    .dispatch-btn{
        min-height:38px;
        padding:0 12px;
        font-size:12px;
    }

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

/* =========================
   MAP CONTROLS / RADAR HUD
   ========================= */

#centerBtn,
#followBtn{
    overflow:hidden;
}

#centerBtn::before,
#followBtn::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), transparent 42%);
    pointer-events:none;
}

#centerBtn::after,
#followBtn::after{
    content:"";
    position:absolute;
    inset:4px;
    border-radius:50%;
    border:1px solid rgba(0,255,195,0.10);
    pointer-events:none;
}

#centerBtn{
    color:#78ffe0;
}

#followBtn{
    color:#ffd05a;
}

#followBtn.active::after{
    border-color:rgba(0,0,0,0.12);
}

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

.player-wrapper{
    filter:drop-shadow(0 6px 12px rgba(0,0,0,0.42));
}

.player-role{
    border:2px solid rgba(255,255,255,0.92);
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.05),
        0 0 14px rgba(0,0,0,0.45);
}

.player-fire .player-role{
    box-shadow:
        0 0 0 3px rgba(255,80,80,0.12),
        0 0 16px rgba(255,70,70,0.45);
}

.player-medical .player-role{
    box-shadow:
        0 0 0 3px rgba(0,255,195,0.10),
        0 0 16px rgba(0,224,164,0.40);
}

.player-police .player-role{
    box-shadow:
        0 0 0 3px rgba(74,163,255,0.12),
        0 0 16px rgba(74,163,255,0.42);
}

.player-tow .player-role{
    box-shadow:
        0 0 0 3px rgba(255,180,0,0.12),
        0 0 16px rgba(255,155,61,0.40);
}

.player-name{
    bottom:-14px;
    padding:3px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.06);
    background:rgba(6,16,22,0.88);
    backdrop-filter:blur(4px);
    font-size:10px;
    letter-spacing:.3px;
    box-shadow:0 4px 10px rgba(0,0,0,0.32);
}

.player-level{
    top:-12px;
    border-radius:999px;
    padding:3px 7px;
    background:linear-gradient(90deg,#0aa8ff,#00ffc3);
    color:#031017;
    box-shadow:0 0 10px rgba(0,200,255,0.26);
}

.player-direction-arrow{
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:30px solid #00ffc3;
    filter:
        drop-shadow(0 0 4px rgba(0,255,195,0.75))
        drop-shadow(0 0 10px rgba(0,255,195,0.28));
    opacity:.95;
}

.player-pin{
    width:22px;
    height:22px;
    border:2px solid rgba(255,255,255,0.95);
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.05),
        0 0 10px rgba(0,0,0,0.42);
}

.player-pin-emoji{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    font-size:14px;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,0.6);
}

/* =========================
   UNIT / PLAYER LABELS
   ========================= */

.unit-marker{
    background:
        linear-gradient(180deg, rgba(9,22,30,0.96), rgba(6,16,22,0.96));
    border:1px solid rgba(74,163,255,0.35);
    border-radius:10px;
    box-shadow:
        0 10px 20px rgba(0,0,0,0.45),
        0 0 14px rgba(74,163,255,0.12);
    backdrop-filter:blur(6px);
}

.unit-top{
    color:#ffffff;
}

.unit-middle{
    color:#9fd8ff;
}

.unit-bottom{
    color:#d7f0ff;
}

/* =========================
   INCIDENT ICONS = ALERT PINS
   ========================= */

.incident-icon{
    width:38px !important;
    height:38px !important;
    border:2px solid rgba(255,255,255,0.12);
    box-shadow:
        0 8px 18px rgba(0,0,0,0.42),
        inset 0 0 12px rgba(255,255,255,0.04);
    backdrop-filter:blur(5px);
}

.incident-icon .icon-wrapper,
.icon-wrapper{
    width:38px;
    height:38px;
    border-radius:50%;
    box-shadow:
        0 8px 16px rgba(0,0,0,0.40),
        inset 0 0 8px rgba(255,255,255,0.05);
}

.incident-icon.fire{
    background:#9f1f1a !important;
    box-shadow:
        0 8px 18px rgba(0,0,0,0.42),
        0 0 16px rgba(255,70,70,0.30);
}

.incident-icon.medical{
    background:#0f7c58 !important;
    box-shadow:
        0 8px 18px rgba(0,0,0,0.42),
        0 0 16px rgba(0,255,195,0.22);
}

.incident-icon.police{
    background:#103d88 !important;
    box-shadow:
        0 8px 18px rgba(0,0,0,0.42),
        0 0 16px rgba(74,163,255,0.24);
}

.incident-icon.tow{
    background:#b67d08 !important;
    box-shadow:
        0 8px 18px rgba(0,0,0,0.42),
        0 0 16px rgba(255,196,0,0.26);
}

.incident-icon.incident-p1{
    animation:p1Pulse 1.15s infinite ease-in-out;
}

@keyframes p1Pulse{
    0%{
        transform:scale(1);
        filter:brightness(1);
    }
    50%{
        transform:scale(1.08);
        filter:brightness(1.15);
    }
    100%{
        transform:scale(1);
        filter:brightness(1);
    }
}

.incident-count-badge{
    min-width:20px;
    height:20px;
    line-height:20px;
    font-size:10px;
    font-weight:900;
    box-shadow:
        0 0 12px rgba(0,0,0,0.42),
        0 0 8px rgba(0,200,255,0.22);
}

.multi-dot{
    width:11px;
    height:11px;
    box-shadow:0 0 10px rgba(0,255,195,0.38);
}

/* =========================
   SYSTEM ALERT / TOAST LOOK
   ========================= */

.systemTopAlert{
    border-left:4px solid #00ffc3;
    border-radius:12px;
    background:
        linear-gradient(90deg, rgba(0,255,195,0.10), rgba(16,39,51,0.98));
    box-shadow:
        0 12px 24px rgba(0,0,0,0.40),
        0 0 18px rgba(0,255,195,0.12);
    backdrop-filter:blur(8px);
}

.game-toast-wrap{
    position:fixed;
    top:82px;
    right:18px;
    z-index:99999;
    display:flex;
    flex-direction:column;
    gap:10px;
    pointer-events:none;
    max-width:min(420px, calc(100vw - 24px));
}

.game-toast{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:16px;
    color:#fff;
    font-weight:800;
    line-height:1.35;
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(10px);
    box-shadow:
        0 14px 34px rgba(0,0,0,.34),
        inset 0 0 0 1px rgba(255,255,255,.03);
    transform:translateX(24px) scale(.96);
    opacity:0;
    transition:transform .22s ease, opacity .22s ease;
    overflow:hidden;
}

.game-toast::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:4px;
    border-radius:16px 0 0 16px;
    background:rgba(255,255,255,0.25);
}

.game-toast.show{
    transform:translateX(0) scale(1);
    opacity:1;
}

.game-toast.hide{
    transform:translateX(24px) scale(.96);
    opacity:0;
}

.game-toast.info{
    position:relative;
    background:linear-gradient(135deg, rgba(9,26,39,.98), rgba(8,76,98,.94));
}

.game-toast.info::before{
    background:#4dd8ff;
}

.game-toast.success{
    position:relative;
    background:linear-gradient(135deg, rgba(8,47,33,.98), rgba(13,117,78,.96));
}

.game-toast.success::before{
    background:#58ffb4;
}

.game-toast.warning{
    position:relative;
    background:linear-gradient(135deg, rgba(66,42,7,.98), rgba(165,108,16,.96));
}

.game-toast.warning::before{
    background:#ffd15a;
}

.game-toast.error{
    position:relative;
    background:linear-gradient(135deg, rgba(70,16,16,.98), rgba(154,32,32,.96));
}

.game-toast.error::before{
    background:#ff7272;
}

.game-toast-icon{
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.10);
    font-size:17px;
    box-shadow:inset 0 0 8px rgba(255,255,255,0.04);
}

.game-toast-text{
    flex:1;
    font-size:14px;
    letter-spacing:.2px;
}

/* =========================
   MOBILE TUNE
   ========================= */

@media (max-width: 700px){
    .game-toast-wrap{
        top:72px;
        left:12px;
        right:12px;
        max-width:none;
    }

    .game-toast{
        padding:13px 14px;
        border-radius:14px;
    }

    .game-toast-text{
        font-size:13px;
    }

    .player-name{
        font-size:9px;
        padding:2px 7px;
    }

    .player-level{
        font-size:9px;
    }

    .incident-icon,
    .incident-icon .icon-wrapper,
    .icon-wrapper{
        width:36px !important;
        height:36px !important;
    }
}

/* =========================
   HUD / HEADER OPERATIONS
   ========================= */

.hudRight{
    padding:6px 10px;
    border-radius:16px;
    background:rgba(5,18,26,0.42);
    border:1px solid rgba(0,255,195,0.08);
    box-shadow:
        inset 0 0 14px rgba(0,255,195,0.03),
        0 6px 18px rgba(0,0,0,0.18);
    backdrop-filter:blur(6px);
}

.hudTop{
    position:relative;
}

.levelBadge{
    background:
        linear-gradient(90deg, rgba(6,36,49,0.96), rgba(7,65,83,0.96));
    color:#8fffe8;
    border:1px solid rgba(0,255,195,0.16);
    text-transform:uppercase;
    letter-spacing:.5px;
    box-shadow:
        0 0 10px rgba(0,255,195,0.14),
        inset 0 0 8px rgba(0,255,195,0.05);
}

.xpText{
    color:#a8d7e6;
    font-weight:700;
    letter-spacing:.2px;
}

/* =========================
   BOTTOM PANEL = FIELD CONSOLE
   ========================= */

#bottomPanel{
    background:
        linear-gradient(180deg, rgba(10,22,29,0.98), rgba(7,16,22,0.98));
    border-top:1px solid rgba(0,255,195,0.12);

    box-shadow:
        0 -10px 30px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.03),
        inset 0 0 20px rgba(0,255,195,0.04);

    backdrop-filter:blur(8px);
}

#bottomPanel::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:2px;
    background:
        linear-gradient(90deg,
            transparent,
            rgba(0,255,195,0.40),
            rgba(74,163,255,0.30),
            transparent);
    pointer-events:none;
}

#bottomPanel > div{
    color:#d9edf6;
    font-weight:700;
    letter-spacing:.2px;
}

.footerActionBtn{
    min-height:38px;
    border-radius:12px;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.45px;
}

.footerLogout{
    min-height:38px;
    border-radius:12px;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.45px;
    background:rgba(90,18,18,0.18);
    box-shadow:inset 0 0 10px rgba(255,59,59,0.06);
}

.footerLogout:hover{
    box-shadow:
        0 0 16px rgba(255,59,59,0.22),
        inset 0 0 12px rgba(255,255,255,0.05);
}

.bottomActionBtn.garageBtn{
    background:linear-gradient(90deg,#1d8fff,#49c0ff);
    color:#031018;
    border:none;
    box-shadow:
        0 0 16px rgba(73,192,255,0.18),
        inset 0 0 10px rgba(255,255,255,0.04);
}

.bottomActionBtn.garageBtn:hover{
    transform:translateY(-1px);
    box-shadow:
        0 0 20px rgba(73,192,255,0.30);
}

.vipBtn{
    min-height:38px;
    border-radius:12px;
    text-transform:uppercase;
    letter-spacing:.5px;
    font-size:12px;
}

/* =========================
   CHAT PANEL = DISPATCH CONSOLE
   ========================= */

#chatPanel{
    background:
        linear-gradient(180deg, rgba(10,22,30,0.98), rgba(7,16,22,0.98));
    border:1px solid rgba(0,255,195,0.08);

    box-shadow:
        0 18px 40px rgba(0,0,0,0.50),
        0 0 18px rgba(0,200,255,0.08),
        inset 0 0 22px rgba(0,255,195,0.03);

    backdrop-filter:blur(10px);
}

#chatHeader{
    background:
        linear-gradient(90deg, rgba(7,34,44,0.96), rgba(12,49,63,0.96));
    border-bottom:1px solid rgba(255,255,255,0.05);
    text-transform:uppercase;
    letter-spacing:.6px;
    color:#eaffff;
}

#chatHeader::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:linear-gradient(180deg,#00ffc3,#4aa3ff);
}

.chatTabs{
    background:rgba(255,255,255,0.02);
    border-bottom:1px solid rgba(255,255,255,0.04);
}

.chatTabs button{
    position:relative;
    background:transparent;
    color:#7fa8b9;
    font-weight:800;
    letter-spacing:.3px;
    text-transform:uppercase;
    transition:color .16s ease, background .16s ease;
}

.chatTabs button:hover{
    color:#dffcff;
    background:rgba(255,255,255,0.03);
}

.chatTabs button.active{
    background:rgba(0,255,195,0.08);
    color:#8effdf;
    box-shadow:inset 0 -2px 0 rgba(0,255,195,0.35);
}

#chatMessages{
    background:
        linear-gradient(180deg, rgba(4,12,17,0.32), rgba(4,10,14,0.18));
    color:#dceef6;
    scrollbar-width:thin;
    scrollbar-color:rgba(0,255,195,0.25) transparent;
}

#chatMessages::-webkit-scrollbar{
    width:8px;
}

#chatMessages::-webkit-scrollbar-thumb{
    background:rgba(0,255,195,0.18);
    border-radius:999px;
}

.chatMessage{
    padding:7px 8px;
    border-radius:10px;
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.03);
    margin-bottom:8px;
}

.chatTime{
    color:#6f95a6;
    font-size:10px;
    letter-spacing:.2px;
}

.chatUser{
    color:#74d7ff;
    font-weight:900;
    letter-spacing:.2px;
}

.chatSystem{
    color:#ffd77a;
    font-weight:800;
}

.vipName{
    color:#ffe27a;
    text-shadow:
        0 0 6px rgba(255,215,0,0.24);
}

#chatInputWrap{
    background:rgba(0,0,0,0.10);
    border-top:1px solid rgba(255,255,255,0.05);
    padding:10px;
}

#chatInput{
    min-height:40px;
    padding:0 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.06);
    background:#08151d;
    color:#fff;
    box-shadow:inset 0 0 10px rgba(0,0,0,0.35);
}

#chatInput:focus{
    outline:none;
    border-color:rgba(0,255,195,0.24);
    box-shadow:
        0 0 0 3px rgba(0,255,195,0.08),
        inset 0 0 10px rgba(0,0,0,0.35);
}

#chatSend{
    min-height:40px;
    padding:0 16px;
    border-radius:12px;
    background:linear-gradient(90deg,#00c8ff,#00ffc3);
    color:#031018;
    text-transform:uppercase;
    letter-spacing:.5px;
    font-size:12px;
    font-weight:900;
    box-shadow:0 0 16px rgba(0,200,255,0.16);
}

#chatSend:hover{
    transform:translateY(-1px);
    box-shadow:0 0 20px rgba(0,255,195,0.24);
}

/* =========================
   UNREAD / BADGES
   ========================= */

.privateUnreadDot,
.chatHeaderBadge{
    background:linear-gradient(90deg,#ff3f6c,#ff6a3d);
    box-shadow:
        0 0 12px rgba(255,63,108,0.28);
    border:1px solid rgba(255,255,255,0.10);
}

/* =========================
   MOBILE OPERATIONS TUNE
   ========================= */

@media (max-width: 768px){
    #chatPanel{
        border-left:none;
        border-right:none;
        border-bottom:none;
        border-top:1px solid rgba(0,255,195,0.08);
        box-shadow:
            0 -12px 28px rgba(0,0,0,0.38),
            inset 0 0 18px rgba(0,255,195,0.03);
    }

    #chatHeader{
        padding:10px 12px;
        font-size:13px;
    }

    .chatTabs button{
        font-size:11px;
    }

    #chatMessages{
        font-size:12px;
    }

    .chatMessage{
        padding:6px 7px;
        border-radius:9px;
    }

    #chatInput{
        font-size:13px;
    }

    #chatSend{
        min-width:72px;
        font-size:11px;
    }

    #bottomPanel{
        gap:6px;
    }

    .footerActionBtn,
    .footerLogout,
    .vipBtn{
        min-height:36px;
        padding:6px 9px;
        font-size:11px;
    }
}

/* =========================
   AUTH / LANDING = ELITE OPS
   ========================= */

.authScreen.authBg{
    background:
        linear-gradient(rgba(3,10,16,.46), rgba(2,8,13,.76)),
        url("/assets/hero.jpg") center 20% / cover no-repeat;
}

.authScreen.authBg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(0,255,195,0.04), transparent 22%, transparent 78%, rgba(74,163,255,0.04)),
        radial-gradient(circle at 20% 18%, rgba(255,60,60,0.10), transparent 28%),
        radial-gradient(circle at 82% 22%, rgba(0,140,255,0.12), transparent 30%);
    pointer-events:none;
    z-index:0;
}

.authShell.authShellWide{
    max-width:1320px;
}

.authLandingCard,
.authCard{
    background:
        linear-gradient(180deg, rgba(6,16,22,0.90), rgba(4,12,18,0.88));
    border:1px solid rgba(0,255,195,0.12);
    box-shadow:
        0 24px 70px rgba(0,0,0,0.55),
        0 0 24px rgba(0,255,195,0.08),
        inset 0 0 28px rgba(74,163,255,0.04);
}

.authLandingCard::before,
.authCard::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:3px;
    background:linear-gradient(90deg,#00ffc3,#4aa3ff);
    opacity:.9;
}

.authBrandTitle{
    text-transform:uppercase;
    letter-spacing:1.2px;
    text-shadow:0 0 10px rgba(0,255,195,0.14);
}

.authBrandSub{
    color:#9fc4d2;
}

.authEyebrow{
    background:rgba(0,255,195,0.08);
    border-color:rgba(0,255,195,0.14);
    color:#93ffe2;
    text-shadow:0 0 8px rgba(0,255,195,0.12);
}

.authHead h1{
    text-transform:uppercase;
    letter-spacing:1px;
    text-shadow:
        0 4px 12px rgba(0,0,0,.55),
        0 0 18px rgba(0,180,255,.12);
}

.authHead p{
    color:#c3d6df;
}

.authLogoMark{
    box-shadow:
        0 0 18px rgba(0,255,195,0.22),
        0 0 30px rgba(74,163,255,0.16),
        0 12px 28px rgba(0,0,0,0.28);
}

.authPrimaryBtn{
    text-transform:uppercase;
    letter-spacing:.7px;
}

.authSecondaryBtn{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    text-transform:uppercase;
    letter-spacing:.6px;
}

.authSecondaryBtn:hover{
    box-shadow:0 0 18px rgba(255,255,255,0.06);
}

.authLandingBtn{
    text-transform:uppercase;
    letter-spacing:.6px;
    box-shadow:0 0 14px rgba(0,0,0,0.18);
}

.authLandingBtn.primary{
    box-shadow:
        0 0 18px rgba(0,255,195,0.16),
        0 12px 24px rgba(0,0,0,0.22);
}

.authLandingBtn.secondary{
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.08);
}

.authFeatureCard{
    background:
        linear-gradient(180deg, rgba(8,18,24,0.96), rgba(7,16,21,0.96));
    border:1px solid rgba(0,255,195,0.09);
    box-shadow:
        inset 0 0 14px rgba(0,255,195,0.03),
        0 8px 22px rgba(0,0,0,0.18);
}

.authFeatureCard:hover{
    transform:translateY(-6px);
    border-color:rgba(0,255,195,0.20);
    box-shadow:
        0 0 22px rgba(0,255,195,0.18),
        0 18px 30px rgba(0,0,0,0.24);
}

.authFeatureCard h3{
    text-transform:uppercase;
    letter-spacing:.5px;
}

.authRoleMini{
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025));
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:inset 0 0 12px rgba(255,255,255,0.02);
}

.authRoleMiniTitle{
    text-transform:uppercase;
    letter-spacing:.6px;
}

.authShot{
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 12px 24px rgba(0,0,0,0.24),
        inset 0 0 18px rgba(255,255,255,0.02);
}

.authShotLabel{
    text-transform:uppercase;
    letter-spacing:.5px;
    border:1px solid rgba(255,255,255,0.08);
}

.authTrailerCard{
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025));
    border:1px solid rgba(255,255,255,0.07);
    box-shadow:inset 0 0 12px rgba(255,255,255,0.02);
}

.authStickyActions{
    background:linear-gradient(180deg, rgba(4,11,17,0), rgba(4,11,17,0.98) 42%);
}

/* =========================
   GM OVERLAY = COMMAND CENTER
   ========================= */

#gmOverlay{
    background:
        radial-gradient(circle at 50% 0%, rgba(0,200,255,0.08), transparent 34%),
        linear-gradient(180deg, #061018 0%, #091720 100%);
}

#gmHeader{
    background:
        linear-gradient(90deg, rgba(7,34,44,0.98), rgba(12,49,63,0.98));
    border-bottom:1px solid rgba(0,255,195,0.10);
    box-shadow:
        0 8px 20px rgba(0,0,0,0.24),
        inset 0 0 16px rgba(0,255,195,0.04);
    text-transform:uppercase;
    letter-spacing:.8px;
}

#gmTitle{
    color:#e7feff;
    text-shadow:0 0 10px rgba(0,255,195,0.12);
}

#gmClose{
    width:40px;
    height:40px;
    border-radius:12px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.06);
    transition:.18s ease;
}

#gmClose:hover{
    background:rgba(255,255,255,0.10);
    transform:scale(1.04);
}

#gmTabs{
    background:
        linear-gradient(180deg, rgba(11,24,32,0.98), rgba(8,17,24,0.98));
    border-bottom:1px solid rgba(255,255,255,0.05);
}

#gmTabs button{
    border-radius:12px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
    color:#b1c8d4;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    transition:.18s ease;
}

#gmTabs button:hover{
    background:rgba(255,255,255,0.06);
    color:#fff;
}

#gmTabs button.active{
    background:linear-gradient(90deg,#00c8ff,#00ffc3);
    color:#031017;
    box-shadow:0 0 18px rgba(0,255,195,0.18);
}

#gmContent{
    background:
        linear-gradient(180deg, rgba(4,12,17,0.32), rgba(4,10,14,0.14));
}

/* =========================
   DAILY POPUP = REWARD TERMINAL
   ========================= */

.dailyPopup{
    background:rgba(3,9,14,0.82);
}

.dailyCard{
    background:
        radial-gradient(circle at top left, rgba(0,200,255,0.12), transparent 34%),
        radial-gradient(circle at top right, rgba(0,255,195,0.08), transparent 30%),
        linear-gradient(180deg,#071620 0%, #0b1c27 100%);
    border:1px solid rgba(0,255,195,0.14);
    box-shadow:
        0 28px 80px rgba(0,0,0,0.58),
        0 0 26px rgba(0,255,195,0.08),
        inset 0 0 20px rgba(74,163,255,0.04);
}

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

.dailyHeaderText h2{
    text-transform:uppercase;
    letter-spacing:.8px;
}

.dailyIcon{
    box-shadow:
        0 0 18px rgba(0,255,195,0.24),
        0 0 28px rgba(74,163,255,0.12);
}

.dailyDay{
    background:linear-gradient(180deg,#10222d,#0b1922);
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:inset 0 0 10px rgba(255,255,255,0.02);
}

.dailyDay.claimed{
    box-shadow:
        0 0 14px rgba(0,255,195,0.10),
        inset 0 0 10px rgba(0,255,195,0.05);
}

.dailyDay.today{
    box-shadow:
        0 0 18px rgba(255,196,0,0.18),
        inset 0 0 8px rgba(255,255,255,0.08);
}

.dailyDay.today-claimed{
    box-shadow:
        0 0 18px rgba(69,214,133,0.16),
        inset 0 0 8px rgba(255,255,255,0.08);
}

.dailyClaimBtn,
.dailySecondaryBtn{
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* =========================
   MORE SHEET = FIELD MENU
   ========================= */

.moreSheetBackdrop{
    background:rgba(0,0,0,0.64);
    backdrop-filter:blur(4px);
}

.moreSheet{
    background:
        linear-gradient(180deg, rgba(12,31,40,0.98), rgba(8,18,24,0.98));
    border-top:1px solid rgba(0,255,195,0.10);
    box-shadow:
        0 -18px 40px rgba(0,0,0,0.50),
        inset 0 0 20px rgba(0,255,195,0.04);
}

.moreSheet::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:2px;
    background:linear-gradient(90deg, transparent, rgba(0,255,195,0.38), transparent);
}

.moreSheetHandle{
    background:rgba(255,255,255,0.24);
    box-shadow:0 0 10px rgba(255,255,255,0.08);
}

.moreSheetTitle{
    text-transform:uppercase;
    letter-spacing:.6px;
}

.moreSheetClose{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.06);
    transition:.18s ease;
}

.moreSheetClose:hover{
    background:rgba(255,255,255,0.12);
    transform:scale(1.04);
}

.moreActionBtn{
    background:
        linear-gradient(180deg, rgba(15,35,44,0.96), rgba(10,24,31,0.96));
    border:1px solid rgba(255,255,255,0.05);
    border-radius:14px;
    box-shadow:
        inset 0 0 12px rgba(255,255,255,0.02),
        0 8px 18px rgba(0,0,0,0.18);
}

.moreActionBtn:hover{
    background:
        linear-gradient(180deg, rgba(21,45,56,0.96), rgba(13,29,37,0.96));
    border-color:rgba(0,255,195,0.14);
    box-shadow:
        0 0 18px rgba(0,255,195,0.10),
        0 12px 22px rgba(0,0,0,0.22);
}

.moreActionBtn strong{
    text-transform:uppercase;
    letter-spacing:.5px;
}

.moreActionBtn.vip{
    box-shadow:
        0 0 18px rgba(123,60,255,0.16),
        0 0 18px rgba(0,191,255,0.12);
}

.moreActionBtn.logout{
    background:linear-gradient(180deg, rgba(52,24,24,0.96), rgba(34,14,14,0.96));
    border-color:rgba(255,90,90,0.10);
}

.moreActionBtn.logout:hover{
    border-color:rgba(255,90,90,0.18);
    box-shadow:
        0 0 18px rgba(255,90,90,0.10),
        0 12px 22px rgba(0,0,0,0.22);
}

/* =========================
   TUTORIAL = OPS OVERLAY
   ========================= */

.tutorialBar{
    background:
        linear-gradient(180deg, rgba(8,20,28,0.98), rgba(5,13,18,0.98));
    border:1px solid rgba(0,255,195,0.12);
    box-shadow:
        0 20px 40px rgba(0,0,0,0.45),
        0 0 20px rgba(0,255,195,0.08),
        inset 0 0 16px rgba(74,163,255,0.04);
    backdrop-filter:blur(10px);
}

.tutorialText{
    color:#e6f7ff;
}

.tutorialDot{
    background:#284552;
}

.tutorialDot.active{
    background:#00ffc3;
    box-shadow:0 0 10px rgba(0,255,195,0.35);
}

/* =========================
   MOBILE FINISH
   ========================= */

@media (max-width: 760px){
    .authLandingCard,
    .authCard{
        border-radius:20px;
    }

    .authHead h1{
        letter-spacing:.6px;
    }

    #gmHeader{
        padding:12px 14px;
        font-size:15px;
    }

    #gmTabs{
        gap:8px;
        padding:10px 12px;
    }

    #gmTabs button{
        padding:10px 8px;
        font-size:11px;
    }

    #gmContent{
        padding:14px;
    }

    .moreSheet{
        border-top-left-radius:20px;
        border-top-right-radius:20px;
    }

    .moreActionBtn{
        border-radius:12px;
    }
}

/* =========================
   FINAL MICRO POLISH
   ========================= */

/* algemene zachte UI feel */
*{
    -webkit-tap-highlight-color:transparent;
}

button,
.authPrimaryBtn,
.authSecondaryBtn,
.authLandingBtn,
.footerActionBtn,
.footerLogout,
.vipBtn,
.dispatch-btn,
.moreActionBtn,
.dailyClaimBtn,
.dailySecondaryBtn,
#chatSend,
#gmTabs button,
.moreSheetClose,
.dailyCloseBtn,
#gmClose{
    transition:
        transform .14s ease,
        box-shadow .18s ease,
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        opacity .18s ease;
}

button:active,
.authPrimaryBtn:active,
.authSecondaryBtn:active,
.authLandingBtn:active,
.footerActionBtn:active,
.footerLogout:active,
.vipBtn:active,
.dispatch-btn:active,
.moreActionBtn:active,
.dailyClaimBtn:active,
.dailySecondaryBtn:active,
#chatSend:active,
#gmTabs button:active,
.moreSheetClose:active,
.dailyCloseBtn:active,
#gmClose:active{
    transform:scale(.97);
}

/* focus states netter */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:none;
    box-shadow:
        0 0 0 3px rgba(0,255,195,0.10),
        0 0 0 1px rgba(0,255,195,0.25);
}

/* =========================
   ROLE-SPECIFIC GLOW
   ========================= */

.player-pin.fire,
.player-fire .player-role{
    box-shadow:
        0 0 0 3px rgba(255,59,59,0.10),
        0 0 14px rgba(255,59,59,0.40),
        0 0 24px rgba(255,90,90,0.18);
}

.player-pin.medical,
.player-medical .player-role{
    box-shadow:
        0 0 0 3px rgba(0,255,195,0.08),
        0 0 14px rgba(0,224,164,0.34),
        0 0 24px rgba(0,255,195,0.14);
}

.player-pin.police,
.player-police .player-role{
    box-shadow:
        0 0 0 3px rgba(74,163,255,0.10),
        0 0 14px rgba(74,163,255,0.36),
        0 0 24px rgba(74,163,255,0.16);
}

.player-pin.tow,
.player-tow .player-role{
    box-shadow:
        0 0 0 3px rgba(255,170,0,0.10),
        0 0 14px rgba(255,155,61,0.34),
        0 0 24px rgba(255,170,0,0.14);
}

/* =========================
   P1 EXTRA URGENCY
   ========================= */

.dispatch-popup.p1-alert{
    animation:p1CardPulse 1.4s infinite ease-in-out;
}

@keyframes p1CardPulse{
    0%{
        box-shadow:
            0 20px 46px rgba(0,0,0,0.62),
            0 0 18px rgba(255,40,40,0.12),
            inset 0 0 32px rgba(255,60,60,0.06);
    }
    50%{
        box-shadow:
            0 22px 52px rgba(0,0,0,0.66),
            0 0 26px rgba(255,40,40,0.22),
            inset 0 0 40px rgba(255,60,60,0.10);
    }
    100%{
        box-shadow:
            0 20px 46px rgba(0,0,0,0.62),
            0 0 18px rgba(255,40,40,0.12),
            inset 0 0 32px rgba(255,60,60,0.06);
    }
}

.dispatch-popup.p1-alert .dispatch-title{
    text-shadow:
        0 0 8px rgba(255,90,90,0.16),
        0 0 14px rgba(255,60,60,0.12);
}

.dispatch-popup.p1-alert .dispatch-priority{
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.10),
        0 0 14px rgba(255,70,70,0.24);
}

/* =========================
   PROGRESS BAR FINISH
   ========================= */

.dispatch-progress{
    position:relative;
}

.dispatch-progress::after{
    content:"";
    position:absolute;
    inset:2px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.03);
    pointer-events:none;
}

.dispatch-progress-bar{
    position:relative;
}

.dispatch-progress-bar::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:26px;
    background:linear-gradient(90deg, rgba(255,255,255,0.24), transparent);
    opacity:.28;
}

/* =========================
   HUD / BADGE SHINE
   ========================= */

.levelBadge,
.vipBtn,
.authLaunchBadge,
.dailyVipBadge,
.dailyVipUpsell{
    position:relative;
    overflow:hidden;
}

.levelBadge::after,
.vipBtn::after,
.authLaunchBadge::after,
.dailyVipBadge::after,
.dailyVipUpsell::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-40%;
    width:40%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transform:skewX(-20deg);
    animation:shineSweep 4.4s infinite ease-in-out;
    pointer-events:none;
}

@keyframes shineSweep{
    0%{ left:-42%; }
    55%{ left:120%; }
    100%{ left:120%; }
}

/* =========================
   CHAT / CONSOLE DETAIL
   ========================= */

.chatMessage{
    position:relative;
    overflow:hidden;
}

.chatMessage::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:rgba(255,255,255,0.05);
    border-radius:8px 0 0 8px;
}

.chatMessage:has(.chatSystem)::before{
    background:linear-gradient(180deg,#ffd15a,#ff8f40);
}

.chatMessage:has(.chatUser)::before{
    background:linear-gradient(180deg,#4dd8ff,#00ffc3);
}

/* fallback voor browsers zonder :has */
.chatSystem{
    text-shadow:0 0 8px rgba(255,209,90,0.10);
}

.chatUser{
    text-shadow:0 0 8px rgba(77,216,255,0.08);
}

/* =========================
   INCIDENT ICON POLISH
   ========================= */

.incident-icon .icon-wrapper{
    position:relative;
    overflow:hidden;
}

.incident-icon .icon-wrapper::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,0.14), transparent 32%);
    pointer-events:none;
}

.incident-icon.fire .icon-wrapper{
    background:linear-gradient(180deg,#b72d25,#8f1d18);
}

.incident-icon.medical .icon-wrapper{
    background:linear-gradient(180deg,#118763,#0b6a4d);
}

.incident-icon.police .icon-wrapper{
    background:linear-gradient(180deg,#1748a0,#11397d);
}

.incident-icon.tow .icon-wrapper{
    background:linear-gradient(180deg,#d39a16,#a97708);
}

/* =========================
   BOTTOM PANEL LIVE FEEL
   ========================= */

#bottomPanel{
    position:fixed;
}

#bottomPanel > div{
    text-shadow:0 0 8px rgba(0,255,195,0.04);
}

#bottomPanel .footerActionBtn,
#bottomPanel .vipBtn,
#bottomPanel .footerLogout{
    position:relative;
    overflow:hidden;
}

#bottomPanel .footerActionBtn::after,
#bottomPanel .vipBtn::after,
#bottomPanel .footerLogout::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-45%;
    width:32%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
    transform:skewX(-18deg);
    opacity:.6;
    pointer-events:none;
}

#bottomPanel .footerActionBtn:hover::after,
#bottomPanel .vipBtn:hover::after,
#bottomPanel .footerLogout:hover::after{
    animation:buttonSweep .7s ease;
}

@keyframes buttonSweep{
    0%{ left:-45%; }
    100%{ left:130%; }
}

/* =========================
   TOAST POLISH
   ========================= */

.game-toast{
    position:relative;
}

.game-toast::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 24%);
    pointer-events:none;
}

.game-toast-icon{
    box-shadow:
        inset 0 0 10px rgba(255,255,255,0.04),
        0 0 10px rgba(0,0,0,0.12);
}

/* =========================
   AUTH FORM DETAIL
   ========================= */

.authForm input,
.authForm select,
#usernameInput,
#chatInput{
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}

.authForm input:hover,
.authForm select:hover,
#usernameInput:hover{
    border-color:rgba(0,255,195,0.14);
}

/* =========================
   SHEET / POPUP MOTION
   ========================= */

.moreSheet.open{
    animation:sheetLift .28s ease;
}

@keyframes sheetLift{
    0%{
        transform:translateY(105%);
    }
    100%{
        transform:translateY(0);
    }
}

@media (min-width: 769px){
    .moreSheet.open{
        animation:sheetLiftDesktop .28s ease;
    }

    @keyframes sheetLiftDesktop{
        0%{
            transform:translate(-50%, 105%);
        }
        100%{
            transform:translate(-50%, 0);
        }
    }
}

/* =========================
   SMALL MOBILE FINAL TUNE
   ========================= */

@media (max-width: 600px){
    .dispatch-popup{
        border-radius:16px;
    }

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

    .compact-stat{
        font-size:10px;
    }

    .mini-role-chip{
        padding:7px 9px;
        font-size:10px;
    }

    .resolve-mini-grid > div{
        font-size:11px;
    }

    .game-toast{
        border-radius:13px;
    }

    .levelBadge{
        font-size:10px;
    }

    .player-direction-arrow{
        border-left:9px solid transparent;
        border-right:9px solid transparent;
        border-bottom:26px solid #00ffc3;
    }
}
/* =========================
   MAP DEPTH / 2.5D FEEL
   ========================= */

body.map-depth-mode #mapWrapper{
    background:
        radial-gradient(circle at 50% -20%, rgba(255,255,255,0.16), transparent 32%),
        linear-gradient(180deg, rgba(110,180,255,0.10) 0%, rgba(5,17,28,0.00) 22%, rgba(5,17,28,0.18) 100%);
}

body.map-depth-mode #mapWrapper::before,
body.map-depth-mode #mapWrapper::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    pointer-events:none;
    z-index:450;
}

body.map-depth-mode #mapWrapper::before{
    top:0;
    height:28%;
    background:
        linear-gradient(180deg, rgba(160,220,255,0.18), rgba(160,220,255,0.06) 26%, rgba(0,0,0,0) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0));
    mix-blend-mode:screen;
}

body.map-depth-mode #mapWrapper::after{
    bottom:0;
    height:46%;
    background:
        radial-gradient(circle at 50% 100%, rgba(0,255,195,0.10), transparent 42%),
        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(4,12,18,0.14) 34%, rgba(4,12,18,0.34) 100%);
}

body.map-depth-mode .leaflet-tile-pane{
    filter:saturate(0.92) contrast(1.06) brightness(0.96);
}

body.map-depth-mode .leaflet-overlay-pane,
body.map-depth-mode .leaflet-marker-pane{
    filter:drop-shadow(0 10px 16px rgba(0,0,0,0.12));
}

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

.map-spot{
    background:transparent;
}

.map-spot-core{
    position:relative;
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:#fff;
    box-shadow:
        0 10px 22px rgba(0,0,0,0.30),
        inset 0 1px 10px rgba(255,255,255,0.18),
        0 0 0 2px rgba(255,255,255,0.10);
    animation:spotPulse 2.8s ease-in-out infinite;
}

.map-spot-energy .map-spot-core{
    background:linear-gradient(180deg,#12c9f3,#0f8fc8);
}
.map-spot-service .map-spot-core{
    background:linear-gradient(180deg,#e5b62a,#b87f06);
}
.map-spot-medical .map-spot-core{
    background:linear-gradient(180deg,#17c58c,#0f9268);
}
.map-spot-traffic .map-spot-core{
    background:linear-gradient(180deg,#ff9d2d,#d96d08);
}
.map-spot-intel .map-spot-core{
    background:linear-gradient(180deg,#7b6fff,#5847df);
}

.map-spot-emoji{
    position:relative;
    z-index:2;
    text-shadow:0 2px 8px rgba(0,0,0,0.30);
}

.map-spot-core::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,255,195,0.18), transparent 68%);
    z-index:0;
}

.map-spot-stem{
    width:8px;
    height:14px;
    margin:0 auto;
    margin-top:-2px;
    border-radius:0 0 10px 10px;
    background:linear-gradient(180deg, rgba(255,255,255,0.65), rgba(14,39,59,0.90));
    box-shadow:0 4px 10px rgba(0,0,0,0.18);
}

.map-spot-shadow{
    width:36px;
    height:10px;
    margin:2px auto 0;
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,50,80,0.56), rgba(0,50,80,0.10) 65%, transparent 72%);
}

@keyframes spotPulse{
    0%,100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-3px) scale(1.03); }
}

.spot-popup{
    min-width:230px;
    color:#eafaff;
}

.spot-popup-header{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:10px;
}

.spot-popup-icon{
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    background:linear-gradient(180deg,#13d6f8,#0e88ca);
    box-shadow:0 8px 18px rgba(0,0,0,0.26);
}

.spot-popup-title{
    font-size:15px;
    font-weight:800;
    color:#fff;
}

.spot-popup-sub{
    font-size:12px;
    color:#9ae8ff;
}

.spot-popup-body{
    font-size:13px;
    line-height:1.45;
    color:#d7f8ff;
    margin-bottom:10px;
}

.spot-popup-stats{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
    font-size:12px;
    color:#8ff0ca;
}

.spot-use-btn{
    width:100%;
    border:none;
    border-radius:10px;
    padding:10px 12px;
    background:linear-gradient(90deg,#00c8ff,#00ffc3);
    color:#04111b;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(0,255,195,0.18);
}

.spot-use-btn.disabled,
.spot-use-btn:disabled{
    opacity:0.55;
    cursor:not-allowed;
    box-shadow:none;
}