/* =====================================================
   PARCEL EMPIRE - RESPONSIVE WORLD DASHBOARD
   Desktop, laptop, tablet and mobile layout
===================================================== */

:root{
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --ui-bg: rgba(13, 20, 35, .80);
    --ui-bg-strong: rgba(10, 16, 29, .92);
    --ui-border: rgba(255, 255, 255, .13);
    --ui-text: #ffffff;
    --ui-muted: rgba(255, 255, 255, .68);
    --ui-blue: #59e6ff;
    --ui-green: #00d084;
    --shadow: 0 18px 55px rgba(0, 0, 0, .42);

    --top-offset: calc(16px + var(--safe-top));
    --nav-height: 74px;
    --nav-bottom: calc(14px + var(--safe-bottom));
    --panel-width: clamp(280px, 24vw, 360px);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#07111f;
    color:var(--ui-text);
    font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Ensure HTML hidden panels stay hidden even when component classes use display:grid/flex. */
[hidden]{
    display:none !important;
}


button{
    font:inherit;
}

#map{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    z-index:1;
    background:
        radial-gradient(circle at 50% 40%, rgba(0,180,255,.22), transparent 28%),
        linear-gradient(135deg, #07111f, #020712);
}

/* Keep Mapbox controls away from our HUD */
.mapboxgl-ctrl-top-right{
    top:86px !important;
    right:calc(18px + var(--safe-right)) !important;
}

.mapboxgl-ctrl-bottom-left{
    bottom:calc(var(--nav-height) + var(--nav-bottom) + 18px) !important;
    left:calc(18px + var(--safe-left)) !important;
}

.mapboxgl-ctrl-group,
.mapboxgl-ctrl-scale{
    border-radius:14px !important;
    overflow:hidden;
    background:rgba(12, 20, 35, .82) !important;
    color:white !important;
    border:1px solid var(--ui-border) !important;
    box-shadow:var(--shadow) !important;
    backdrop-filter:blur(16px);
}

/* ==============================
   Top HUD
============================== */

.topHud{
    position:fixed;
    top:var(--top-offset);
    left:50%;
    transform:translateX(-50%);
    width:min(760px, calc(100vw - 32px - var(--safe-left) - var(--safe-right)));
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    z-index:1000;
    pointer-events:none;
}

.hudCard{
    min-width:0;
    padding:12px 14px;
    border-radius:18px;
    background:var(--ui-bg);
    border:1px solid var(--ui-border);
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
    text-align:center;
    animation:fadeDown .45s ease both;
}

.label{
    font-size:clamp(10px, .9vw, 12px);
    line-height:1.1;
    color:var(--ui-muted);
    text-transform:uppercase;
    letter-spacing:1.6px;
    white-space:nowrap;
}

#cash,
#parcels,
#income{
    margin-top:5px;
    color:var(--ui-blue);
    font-size:clamp(16px, 1.6vw, 22px);
    line-height:1.1;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ==============================
   Parcel panel
============================== */

#parcelPanel,
.parcelPanel{
    position:fixed;
    right:calc(18px + var(--safe-right));
    top:calc(var(--top-offset) + 94px);
    width:var(--panel-width);
    max-height:calc(100dvh - 190px - var(--safe-top) - var(--safe-bottom));
    overflow:auto;
    padding:18px;
    border-radius:24px;
    color:white;
    background:var(--ui-bg);
    border:1px solid var(--ui-border);
    backdrop-filter:blur(20px);
    box-shadow:var(--shadow);
    z-index:1000;
    animation:panelSlide .35s ease both;
}

#parcelPanel h2{
    margin-bottom:14px;
    font-size:clamp(20px, 2vw, 26px);
    line-height:1;
}

#parcelPanel p{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:10px 0;
    color:rgba(255,255,255,.84);
    font-size:14px;
}

#parcelPanel span{
    max-width:60%;
    color:var(--ui-blue);
    font-weight:800;
    text-align:right;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#purchaseParcel{
    width:100%;
    min-height:48px;
    margin-top:16px;
    border:0;
    border-radius:15px;
    cursor:pointer;
    color:white;
    font-size:15px;
    font-weight:800;
    background:linear-gradient(135deg,#00c853,#00b4ff);
    box-shadow:0 12px 30px rgba(0, 200, 130, .26);
    transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

#purchaseParcel:hover:not(:disabled){
    transform:translateY(-2px);
    box-shadow:0 16px 36px rgba(0, 200, 130, .34);
}

#purchaseParcel:disabled{
    cursor:not-allowed;
    opacity:.55;
    background:rgba(255,255,255,.16);
    box-shadow:none;
}

/* ==============================
   Main action buttons
============================== */

#buyButton{
    position:fixed;
    left:50%;
    bottom:calc(var(--nav-height) + var(--nav-bottom) + 14px);
    transform:translateX(-50%);
    width:clamp(180px, 18vw, 240px);
    min-height:56px;
    padding:0 18px;
    border:0;
    border-radius:18px;
    cursor:pointer;
    color:white;
    font-size:clamp(15px, 1.2vw, 18px);
    font-weight:900;
    background:linear-gradient(135deg,#00d084,#00b4ff);
    box-shadow:0 14px 34px rgba(0,212,132,.34);
    transition:transform .2s ease, box-shadow .2s ease;
    animation:pulseGlow 2.6s infinite;
    z-index:1000;
}

#buyButton:hover{
    transform:translateX(-50%) scale(1.03);
    box-shadow:0 18px 45px rgba(0,180,255,.44);
}

#buyButton:active{
    transform:translateX(-50%) scale(.97);
}

#gpsButton{
    position:fixed;
    right:calc(20px + var(--safe-right));
    bottom:calc(var(--nav-height) + var(--nav-bottom) + 88px);
    width:58px;
    height:58px;
    border:0;
    border-radius:50%;
    cursor:pointer;
    font-size:24px;
    color:white;
    background:var(--ui-bg);
    border:1px solid var(--ui-border);
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
    transition:transform .2s ease, background .2s ease;
    z-index:1000;
}

#gpsButton:hover{
    transform:scale(1.07);
    background:#00b4ff;
}

/* ==============================
   Navigation
============================== */

.bottomNav{
    position:fixed;
    left:50%;
    bottom:var(--nav-bottom);
    transform:translateX(-50%);
    width:min(860px, calc(100vw - 32px - var(--safe-left) - var(--safe-right)));
    height:var(--nav-height);
    display:flex;
    align-items:center;
    justify-content:space-around;
    background:var(--ui-bg-strong);
    border:1px solid var(--ui-border);
    border-radius:24px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(20px);
    z-index:1000;
}

.bottomNav button{
    flex:1;
    min-width:0;
    height:100%;
    border:0;
    background:transparent;
    color:white;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-size:12px;
    font-weight:700;
    transition:transform .2s ease, color .2s ease, background .2s ease;
}

.bottomNav button span{
    font-size:20px;
    line-height:1;
}

.bottomNav button:hover,
.bottomNav button.active{
    color:var(--ui-blue);
}

.bottomNav button:hover{
    transform:translateY(-2px);
}

/* ==============================
   Error panel
============================== */

.map-error{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:min(420px, calc(100vw - 36px));
    padding:24px;
    z-index:2000;
    border-radius:22px;
    background:rgba(12, 18, 32, .95);
    border:1px solid rgba(255,255,255,.14);
    color:white;
    text-align:center;
    box-shadow:var(--shadow);
    backdrop-filter:blur(20px);
}

.map-error h2{
    margin-bottom:10px;
    font-size:24px;
}

.map-error p{
    color:var(--ui-muted);
    line-height:1.45;
}

/* ==============================
   Laptop / compact desktop
============================== */

@media (min-width: 769px) and (max-height: 760px){
    :root{
        --top-offset: calc(10px + var(--safe-top));
        --nav-height: 60px;
        --nav-bottom: calc(10px + var(--safe-bottom));
        --panel-width: 300px;
    }

    .topHud{
        width:min(620px, calc(100vw - 32px));
        gap:9px;
    }

    .hudCard{
        padding:9px 12px;
        border-radius:15px;
    }

    #cash,
    #parcels,
    #income{
        font-size:16px;
    }

    #parcelPanel{
        top:72px;
        right:14px;
        max-height:calc(100dvh - 150px);
        padding:14px;
        border-radius:18px;
    }

    #parcelPanel h2{
        font-size:20px;
        margin-bottom:10px;
    }

    #parcelPanel p{
        margin:7px 0;
        font-size:13px;
    }

    #purchaseParcel{
        min-height:42px;
        margin-top:12px;
    }

    #buyButton{
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 8px);
        min-height:48px;
        width:190px;
    }

    #gpsButton{
        width:50px;
        height:50px;
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 66px);
    }

    .bottomNav button{
        font-size:11px;
        gap:3px;
    }

    .bottomNav button span{
        font-size:17px;
    }

    .mapboxgl-ctrl-top-right{
        top:70px !important;
    }
}

/* ==============================
   Wide PC layout
   Side rail saves vertical space on monitors/laptops
============================== */

@media (min-width: 1100px){
    .topHud{
        left:calc(28px + var(--safe-left));
        right:auto;
        transform:none;
        width:min(620px, calc(100vw - 460px));
    }

    .bottomNav{
        left:calc(18px + var(--safe-left));
        top:50%;
        bottom:auto;
        transform:translateY(-50%);
        width:86px;
        height:min(520px, calc(100dvh - 190px));
        flex-direction:column;
        border-radius:26px;
        padding:8px 0;
    }

    .bottomNav button{
        min-height:78px;
        width:100%;
    }

    #buyButton{
        left:calc(50% + 24px);
    }

    .mapboxgl-ctrl-bottom-left{
        bottom:24px !important;
        left:124px !important;
    }
}

/* ==============================
   Tablet and mobile
============================== */

@media (max-width: 768px){
    :root{
        --top-offset: calc(10px + var(--safe-top));
        --nav-height: 70px;
        --nav-bottom: calc(10px + var(--safe-bottom));
    }

    .topHud{
        width:calc(100vw - 20px - var(--safe-left) - var(--safe-right));
        gap:7px;
    }

    .hudCard{
        padding:9px 8px;
        border-radius:15px;
    }

    .label{
        font-size:9px;
        letter-spacing:1px;
    }

    #cash,
    #parcels,
    #income{
        font-size:clamp(13px, 4vw, 17px);
    }

    #parcelPanel{
        left:calc(10px + var(--safe-left));
        right:calc(10px + var(--safe-right));
        top:auto;
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 78px);
        width:auto;
        max-height:min(250px, 34dvh);
        padding:14px;
        border-radius:19px;
    }

    #parcelPanel h2{
        font-size:19px;
        margin-bottom:10px;
    }

    #parcelPanel p{
        margin:7px 0;
        font-size:13px;
    }

    #purchaseParcel{
        min-height:42px;
        margin-top:11px;
        font-size:14px;
    }

    #buyButton{
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 12px);
        width:min(210px, 56vw);
        min-height:50px;
        border-radius:16px;
        font-size:15px;
    }

    #gpsButton{
        right:calc(12px + var(--safe-right));
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 76px);
        width:50px;
        height:50px;
        font-size:21px;
    }

    .bottomNav{
        width:calc(100vw - 20px - var(--safe-left) - var(--safe-right));
        border-radius:20px;
    }

    .bottomNav button{
        font-size:10px;
        gap:3px;
    }

    .bottomNav button span{
        font-size:18px;
    }

    .mapboxgl-ctrl-top-right{
        top:76px !important;
        right:10px !important;
    }

    .mapboxgl-ctrl-bottom-left{
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 10px) !important;
        left:10px !important;
    }
}

/* Very small phone screens */
@media (max-width: 420px){
    .bottomNav button{
        font-size:9px;
    }

    .bottomNav button span{
        font-size:17px;
    }

    #parcelPanel{
        max-height:30dvh;
    }
}

/* Very short screens: keep the game usable instead of overflowing */
@media (max-height: 600px){
    :root{
        --nav-height: 58px;
        --nav-bottom: calc(8px + var(--safe-bottom));
    }

    #parcelPanel{
        max-height:28dvh;
        padding:12px;
    }

    #parcelPanel h2{
        font-size:18px;
    }

    #parcelPanel p{
        margin:5px 0;
    }

    #purchaseParcel{
        min-height:38px;
    }

    #buyButton{
        min-height:44px;
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 8px);
    }

    #gpsButton{
        width:46px;
        height:46px;
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 58px);
    }

    .bottomNav button span{
        font-size:16px;
    }
}

/* Animations */
@keyframes fadeDown{
    from{ opacity:0; transform:translateY(-20px); }
    to{ opacity:1; transform:translateY(0); }
}

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

@keyframes pulseGlow{
    0%,100%{ box-shadow:0 10px 26px rgba(0,212,132,.20); }
    50%{ box-shadow:0 0 30px rgba(0,212,132,.52); }
}

::-webkit-scrollbar{
    width:0;
    height:0;
}

/* ==============================
   Phase 1.4 parcel details
============================== */

.panelHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.panelHeader h2{
    margin-bottom:5px !important;
}

.panelHint{
    display:block !important;
    margin:0 !important;
    color:var(--ui-muted) !important;
    font-size:12px !important;
    justify-content:flex-start !important;
}

.parcelBadge{
    --badge-color: var(--ui-blue);
    flex:0 0 auto;
    max-width:none !important;
    padding:7px 10px;
    border-radius:999px;
    color:white !important;
    background:color-mix(in srgb, var(--badge-color) 28%, rgba(255,255,255,.08));
    border:1px solid color-mix(in srgb, var(--badge-color) 72%, transparent);
    box-shadow:0 0 18px color-mix(in srgb, var(--badge-color) 35%, transparent);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.9px;
}

#buyButton:disabled{
    cursor:not-allowed;
    opacity:.62;
    background:rgba(255,255,255,.16);
    box-shadow:none;
    animation:none;
}

#buyButton:hover:disabled{
    transform:translateX(-50%);
    box-shadow:none;
}

.toast{
    position:fixed;
    left:50%;
    bottom:calc(var(--nav-height) + var(--nav-bottom) + 88px);
    transform:translate(-50%, 18px) scale(.96);
    z-index:1800;
    width:max-content;
    max-width:min(420px, calc(100vw - 32px));
    padding:13px 18px;
    border-radius:999px;
    color:white;
    background:rgba(12, 18, 32, .92);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
    text-align:center;
    font-size:14px;
    font-weight:800;
}

.toast.show{
    opacity:1;
    transform:translate(-50%, 0) scale(1);
}

.toast[data-type="success"]{
    border-color:rgba(0,255,136,.45);
    box-shadow:0 0 28px rgba(0,255,136,.22), var(--shadow);
}

.toast[data-type="warning"]{
    border-color:rgba(255,181,71,.55);
    box-shadow:0 0 28px rgba(255,181,71,.20), var(--shadow);
}

@media (min-width: 1100px){
    .toast{
        left:calc(50% + 24px);
    }
}

@media (max-width: 768px){
    .panelHeader{
        margin-bottom:8px;
    }

    .parcelBadge{
        padding:6px 9px;
        font-size:10px;
    }

    .toast{
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 72px);
        font-size:13px;
        padding:11px 15px;
    }
}

/* ==============================
   Phase 1.5 economy engine UI
============================== */

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

.hudButton{
    appearance:none;
    border:1px solid var(--ui-border);
    color:inherit;
    cursor:pointer;
    pointer-events:auto;
}

.hudButton:hover{
    transform:translateY(-2px);
    border-color:rgba(89,230,255,.38);
}

#cash,
#parcels,
#income,
#boostStatus{
    margin-top:5px;
    color:var(--ui-blue);
    font-size:clamp(15px, 1.45vw, 21px);
    line-height:1.1;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.economyPanel{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -46%) scale(.97);
    width:min(560px, calc(100vw - 34px - var(--safe-left) - var(--safe-right)));
    max-height:min(720px, calc(100dvh - 44px - var(--safe-top) - var(--safe-bottom)));
    overflow:auto;
    padding:20px;
    border-radius:28px;
    z-index:1700;
    color:white;
    background:rgba(10, 16, 29, .92);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 28px 90px rgba(0,0,0,.58);
    backdrop-filter:blur(24px);
    opacity:0;
    transition:opacity .18s ease, transform .18s ease;
}

.economyPanel.show{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}

.economyHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}

.economyHeader h2{
    font-size:clamp(23px, 3vw, 34px);
    line-height:1;
}

.iconButton{
    width:42px;
    height:42px;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;
    color:white;
    background:rgba(255,255,255,.08);
    cursor:pointer;
    font-size:28px;
    line-height:1;
    transition:transform .18s ease, background .18s ease;
}

.iconButton:hover{
    transform:scale(1.06);
    background:rgba(255,255,255,.14);
}

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

.economyStat{
    min-width:0;
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.075);
    border:1px solid rgba(255,255,255,.11);
}

.economyStat span{
    display:block;
    margin-bottom:7px;
    color:var(--ui-muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.2px;
}

.economyStat strong{
    display:block;
    color:var(--ui-blue);
    font-size:clamp(16px, 2.2vw, 24px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

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

.economyActions button{
    min-height:54px;
    border:0;
    border-radius:16px;
    color:white;
    cursor:pointer;
    font-weight:900;
    background:linear-gradient(135deg,#00c853,#00b4ff);
    box-shadow:0 12px 30px rgba(0, 200, 130, .22);
    transition:transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.economyActions button:nth-child(2){
    background:linear-gradient(135deg,#ffb547,#ff6bcb);
    box-shadow:0 12px 30px rgba(255, 181, 71, .19);
}

.economyActions button:hover:not(:disabled){
    transform:translateY(-2px);
    box-shadow:0 18px 38px rgba(0, 180, 255, .25);
}

.economyActions button:disabled{
    cursor:not-allowed;
    opacity:.58;
    filter:saturate(.65);
    box-shadow:none;
}

.economyNote{
    margin-top:8px;
    color:var(--ui-muted);
    font-size:13px;
    line-height:1.45;
}

@media (min-width: 769px) and (max-height: 760px){
    .topHud{
        width:min(760px, calc(100vw - 32px));
    }

    #cash,
    #parcels,
    #income,
    #boostStatus{
        font-size:15px;
    }

    .economyPanel{
        max-height:calc(100dvh - 24px);
        padding:16px;
    }
}

@media (min-width: 1100px){
    .topHud{
        width:min(820px, calc(100vw - 460px));
    }

    .economyPanel{
        left:calc(50% + 24px);
    }
}

@media (max-width: 768px){
    .topHud{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }

    #cash,
    #parcels,
    #income,
    #boostStatus{
        font-size:clamp(11px, 3.25vw, 15px);
    }

    .economyPanel{
        width:calc(100vw - 20px - var(--safe-left) - var(--safe-right));
        max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));
        padding:16px;
        border-radius:22px;
    }

    .economyGrid{
        grid-template-columns:1fr;
        gap:9px;
    }

    .economyStat{
        padding:12px;
    }

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

@media (max-width: 420px){
    .topHud{
        gap:5px;
    }

    .hudCard{
        padding:8px 5px;
    }

    .label{
        font-size:8px;
        letter-spacing:.7px;
    }
}

/* ==============================
   Phase 1.6 elite graphics layer
============================== */

.worldVignette,
.scanlines,
.fxLayer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:5;
}

.worldVignette{
    background:
        radial-gradient(circle at 50% 45%, transparent 0%, transparent 48%, rgba(0,0,0,.42) 100%),
        linear-gradient(180deg, rgba(2,8,18,.22), transparent 28%, transparent 62%, rgba(2,8,18,.34));
    mix-blend-mode:multiply;
}

.scanlines{
    z-index:6;
    opacity:.10;
    background:repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.045) 0px,
        rgba(255,255,255,.045) 1px,
        transparent 1px,
        transparent 5px
    );
}

.fxLayer{
    z-index:1900;
    overflow:hidden;
}

.topHud::before,
.bottomNav::before,
.parcelPanel::before,
.economyPanel::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(135deg, rgba(255,255,255,.18), transparent 34%, rgba(89,230,255,.10));
    opacity:.55;
    mask:linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask:linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
}

.hudCard,
.bottomNav,
.parcelPanel,
.economyPanel{
    position:relative;
    overflow:hidden;
}

.hudCard::after,
.parcelPanel::after,
.economyStat::after{
    content:"";
    position:absolute;
    inset:-80% -30%;
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12), transparent 70%);
    transform:translateX(-80%) rotate(8deg);
    animation:eliteSweep 7s ease-in-out infinite;
    pointer-events:none;
}

.hudCard:nth-child(2)::after{ animation-delay:1.2s; }
.hudCard:nth-child(3)::after{ animation-delay:2.4s; }
.hudCard:nth-child(4)::after{ animation-delay:3.6s; }

@keyframes eliteSweep{
    0%, 72%{ transform:translateX(-82%) rotate(8deg); opacity:0; }
    78%{ opacity:.8; }
    100%{ transform:translateX(82%) rotate(8deg); opacity:0; }
}

body.parcel-selected #parcelPanel{
    border-color:rgba(89,230,255,.34);
    box-shadow:0 0 38px rgba(89,230,255,.18), var(--shadow);
}

body.parcel-owned #parcelPanel{
    border-color:rgba(0,255,136,.36);
    box-shadow:0 0 42px rgba(0,255,136,.19), var(--shadow);
}

.parcelPanel.rarity-common{ --rarity-glow:#39ff88; }
.parcelPanel.rarity-rare{ --rarity-glow:#39c6ff; }
.parcelPanel.rarity-epic{ --rarity-glow:#b75cff; }
.parcelPanel.rarity-legendary{ --rarity-glow:#ffb547; }

.parcelPanel.rarity-common,
.parcelPanel.rarity-rare,
.parcelPanel.rarity-epic,
.parcelPanel.rarity-legendary{
    box-shadow:0 0 42px color-mix(in srgb, var(--rarity-glow) 22%, transparent), var(--shadow);
}

.parcelPanel.rarity-legendary .parcelBadge{
    animation:legendaryPulse 1.9s ease-in-out infinite;
}

@keyframes legendaryPulse{
    0%,100%{ transform:scale(1); box-shadow:0 0 18px rgba(255,181,71,.36); }
    50%{ transform:scale(1.055); box-shadow:0 0 30px rgba(255,181,71,.72); }
}

.purchaseBurst{
    position:absolute;
    left:var(--x, 50%);
    top:var(--y, 50%);
    width:18px;
    height:18px;
    border-radius:50%;
    transform:translate(-50%, -50%);
    background:radial-gradient(circle, #fff 0%, #9effd1 25%, #00d084 45%, transparent 72%);
    box-shadow:0 0 30px rgba(0,255,136,.95), 0 0 90px rgba(0,180,255,.42);
    animation:purchaseBurst .78s ease-out forwards;
}

.purchaseBurst::before,
.purchaseBurst::after{
    content:"";
    position:absolute;
    inset:-34px;
    border-radius:50%;
    border:2px solid rgba(0,255,200,.55);
    animation:purchaseRing .78s ease-out forwards;
}

.purchaseBurst::after{
    inset:-58px;
    border-color:rgba(89,230,255,.38);
    animation-delay:.06s;
}

@keyframes purchaseBurst{
    0%{ opacity:0; transform:translate(-50%, -50%) scale(.28); }
    25%{ opacity:1; }
    100%{ opacity:0; transform:translate(-50%, -50%) scale(5.8); }
}

@keyframes purchaseRing{
    from{ transform:scale(.16); opacity:1; }
    to{ transform:scale(1.8); opacity:0; }
}

.spark{
    position:absolute;
    left:var(--x, 50%);
    top:var(--y, 50%);
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--spark-color, #59e6ff);
    box-shadow:0 0 16px var(--spark-color, #59e6ff);
    transform:translate(-50%, -50%);
    animation:sparkFly .72s ease-out forwards;
}

@keyframes sparkFly{
    from{ opacity:1; transform:translate(-50%, -50%) scale(1); }
    to{ opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.25); }
}

.screenFlash{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(0,255,200,.28), transparent 34%);
    animation:screenFlash .42s ease-out forwards;
}

@keyframes screenFlash{
    from{ opacity:1; }
    to{ opacity:0; }
}

#buyButton.readyToBuy{
    background:linear-gradient(135deg,#00ff88,#00c8ff 55%,#6a5cff);
    box-shadow:0 0 28px rgba(0,255,136,.35), 0 16px 44px rgba(0,180,255,.25);
}

#buyButton.alreadyOwned{
    background:linear-gradient(135deg,#00a86b,#00c8ff);
    opacity:.86;
}

#buyButton.needCash{
    background:linear-gradient(135deg,#ffb547,#ff4d6d);
    opacity:.82;
}

.ownedCounterPop{
    animation:ownedCounterPop .42s ease;
}

@keyframes ownedCounterPop{
    0%{ transform:scale(1); }
    45%{ transform:scale(1.18); color:#00ff88; text-shadow:0 0 18px rgba(0,255,136,.72); }
    100%{ transform:scale(1); }
}

.cashSpendPulse{
    animation:cashSpendPulse .5s ease;
}

@keyframes cashSpendPulse{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.12); color:#ffb547; text-shadow:0 0 18px rgba(255,181,71,.7); }
    100%{ transform:scale(1); }
}

.mapboxgl-marker{
    filter:drop-shadow(0 0 12px rgba(0,255,136,.72));
}

@media (prefers-reduced-motion: reduce){
    .scanlines,
    .hudCard::after,
    .parcelPanel::after,
    .economyStat::after,
    .parcelBadge,
    #buyButton,
    .purchaseBurst,
    .spark,
    .screenFlash{
        animation:none !important;
    }
}

.playerMarker{
    position:relative;
    width:34px;
    height:34px;
    border-radius:50%;
    transform:translateZ(0);
}

.playerMarker::before{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:50%;
    background:rgba(0,255,136,.18);
    border:1px solid rgba(0,255,136,.34);
    animation:playerRadar 1.8s ease-out infinite;
}

.playerMarker span{
    position:absolute;
    inset:6px;
    border-radius:50%;
    background:linear-gradient(135deg,#00ff88,#00c8ff);
    border:2px solid white;
    box-shadow:0 0 20px rgba(0,255,136,.85), 0 0 44px rgba(0,200,255,.42);
}

@keyframes playerRadar{
    from{ transform:scale(.45); opacity:.95; }
    to{ transform:scale(1.55); opacity:0; }
}

/* =====================================================
   PHASE 1.7 - SHOP + PARCEL UPGRADES
===================================================== */

.secondaryPanelButton{
    width:100%;
    min-height:46px;
    margin-top:10px;
    border:1px solid rgba(89,230,255,.28);
    border-radius:14px;
    cursor:pointer;
    color:#8ff0ff;
    font-size:14px;
    font-weight:900;
    background:rgba(89,230,255,.08);
    transition:transform .18s ease, background .18s ease, opacity .18s ease;
}

.secondaryPanelButton:hover:not(:disabled){
    transform:translateY(-2px);
    background:rgba(89,230,255,.16);
}

.secondaryPanelButton:disabled{
    cursor:not-allowed;
    opacity:.48;
}

.shopPanel{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -46%) scale(.97);
    width:min(760px, calc(100vw - 34px - var(--safe-left) - var(--safe-right)));
    max-height:min(780px, calc(100dvh - 44px - var(--safe-top) - var(--safe-bottom)));
    overflow:auto;
    padding:20px;
    border-radius:30px;
    z-index:1750;
    color:white;
    background:rgba(8, 14, 27, .94);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 30px 95px rgba(0,0,0,.62), 0 0 58px rgba(89,230,255,.14);
    backdrop-filter:blur(25px);
    opacity:0;
    transition:opacity .18s ease, transform .18s ease;
}

.shopPanel.show{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}

.shopHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
}

.shopHeader h2{
    font-size:clamp(24px, 3vw, 36px);
    line-height:1;
}

.shopSelected{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px;
    margin-bottom:14px;
    border-radius:20px;
    background:rgba(89,230,255,.075);
    border:1px solid rgba(89,230,255,.16);
}

.shopSelected span{
    display:block;
    margin-bottom:4px;
    color:var(--ui-muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.4px;
}

.shopSelected strong{
    display:block;
    max-width:460px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#8ff0ff;
    font-size:15px;
}

#shopFindLand{
    min-width:72px;
    min-height:42px;
    border:0;
    border-radius:14px;
    color:white;
    cursor:pointer;
    font-weight:900;
    background:linear-gradient(135deg,#00b4ff,#00ffd0);
}

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

.upgradeCard{
    position:relative;
    overflow:hidden;
    padding:16px;
    border-radius:22px;
    background:rgba(255,255,255,.075);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.upgradeCard::after{
    content:"";
    position:absolute;
    inset:auto -30% -55% -30%;
    height:85%;
    background:radial-gradient(circle, rgba(89,230,255,.18), transparent 62%);
    pointer-events:none;
}

.upgradeCard.currentPath{
    border-color:rgba(0,255,136,.38);
    box-shadow:0 0 30px rgba(0,255,136,.09), inset 0 1px 0 rgba(255,255,255,.08);
}

.upgradeTop{
    position:relative;
    display:grid;
    grid-template-columns:52px minmax(0, 1fr) auto;
    gap:12px;
    align-items:flex-start;
    z-index:1;
}

.upgradeIcon{
    width:52px;
    height:52px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    background:linear-gradient(135deg, rgba(0,200,255,.22), rgba(0,255,136,.16));
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 0 24px rgba(89,230,255,.14);
}

.upgradeTop h3{
    margin-bottom:5px;
    font-size:18px;
}

.upgradeTop p{
    color:var(--ui-muted);
    font-size:12px;
    line-height:1.35;
}

.upgradeBadge{
    padding:6px 9px;
    border-radius:999px;
    color:#04111f;
    background:#00ff88;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

.upgradeDetails{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin:14px 0;
}

.upgradeDetails div{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:9px 10px;
    border-radius:13px;
    background:rgba(0,0,0,.16);
}

.upgradeDetails span{
    color:var(--ui-muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.upgradeDetails strong{
    max-width:68%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#8ff0ff;
    font-size:12px;
    text-align:right;
}

.upgradeButton{
    position:relative;
    z-index:1;
    width:100%;
    min-height:46px;
    border:0;
    border-radius:15px;
    color:white;
    cursor:pointer;
    font-weight:900;
    background:linear-gradient(135deg,#00c853,#00b4ff);
    box-shadow:0 12px 28px rgba(0,200,130,.2);
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.upgradeButton:hover:not(:disabled){
    transform:translateY(-2px);
    box-shadow:0 16px 36px rgba(0,180,255,.3);
}

.upgradeButton:disabled{
    cursor:not-allowed;
    opacity:.48;
    filter:saturate(.58);
    box-shadow:none;
}

.emptyShopState{
    grid-column:1 / -1;
    display:flex;
    min-height:240px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:26px;
    border-radius:24px;
    background:rgba(255,255,255,.07);
    border:1px dashed rgba(255,255,255,.18);
}

.emptyShopState div{
    margin-bottom:12px;
    font-size:54px;
}

.emptyShopState h3{
    margin-bottom:8px;
    font-size:22px;
}

.emptyShopState p{
    max-width:360px;
    color:var(--ui-muted);
    line-height:1.45;
}

@media(max-width:768px){
    .shopPanel{
        width:calc(100vw - 22px - var(--safe-left) - var(--safe-right));
        padding:16px;
        border-radius:24px;
    }

    .shopUpgradeGrid{
        grid-template-columns:1fr;
    }

    .shopSelected{
        align-items:stretch;
        flex-direction:column;
    }

    .shopSelected strong{
        max-width:100%;
    }
}

@media(max-height:680px){
    .shopPanel{
        max-height:calc(100dvh - 22px - var(--safe-top) - var(--safe-bottom));
        padding:14px;
    }

    .upgradeTop{
        grid-template-columns:44px minmax(0,1fr) auto;
    }

    .upgradeIcon{
        width:44px;
        height:44px;
        border-radius:15px;
        font-size:24px;
    }
}

/* =====================================================
   PHASE 1.8 - COMMAND CENTRE, MISSIONS + LEADERBOARD
===================================================== */

.commandPanel{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -46%) scale(.97);
    width:min(820px, calc(100vw - 34px - var(--safe-left) - var(--safe-right)));
    max-height:min(820px, calc(100dvh - 44px - var(--safe-top) - var(--safe-bottom)));
    overflow:auto;
    padding:20px;
    border-radius:30px;
    z-index:1800;
    color:white;
    background:rgba(7, 12, 24, .95);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 32px 105px rgba(0,0,0,.66), 0 0 70px rgba(255,181,71,.12);
    backdrop-filter:blur(26px);
    opacity:0;
    transition:opacity .18s ease, transform .18s ease;
}

.commandPanel.show{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}

.commandHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
}

.commandHeader h2{
    font-size:clamp(24px, 3vw, 38px);
    line-height:1;
}

.commanderCard{
    display:grid;
    grid-template-columns:64px minmax(0, 1fr) minmax(72px, auto);
    align-items:center;
    gap:14px;
    padding:15px;
    margin-bottom:14px;
    border-radius:24px;
    background:linear-gradient(135deg, rgba(255,181,71,.12), rgba(89,230,255,.08));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}

.commanderAvatar{
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:22px;
    font-size:34px;
    background:linear-gradient(135deg, rgba(255,181,71,.28), rgba(0,180,255,.22));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 0 32px rgba(255,181,71,.16);
}

.commanderInfo,
.commanderRank{
    min-width:0;
}

.commanderInfo span,
.commanderRank span{
    display:block;
    margin-bottom:5px;
    color:var(--ui-muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.3px;
}

.commanderInfo strong,
.commanderRank strong{
    display:block;
    color:#8ff0ff;
    font-size:20px;
}

.commanderRank{
    text-align:right;
}

.xpBar{
    width:100%;
    height:9px;
    margin:9px 0 5px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.12);
}

.xpBar span{
    display:block;
    width:0%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#ffb547,#00ffd0);
    box-shadow:0 0 18px rgba(0,255,208,.34);
    transition:width .25s ease;
}

.commanderInfo small{
    color:var(--ui-muted);
}

.commandTabs{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:9px;
    margin-bottom:14px;
}

.commandTabs button{
    min-height:46px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    color:white;
    cursor:pointer;
    font-weight:900;
    background:rgba(255,255,255,.075);
    transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.commandTabs button:hover,
.commandTabs button.active{
    transform:translateY(-1px);
    background:rgba(89,230,255,.15);
    border-color:rgba(89,230,255,.34);
}

.commandView{
    display:none;
}

.commandView.show{
    display:block;
}

.commandIntro{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    margin-bottom:12px;
    border-radius:18px;
    background:rgba(255,255,255,.065);
    border:1px solid rgba(255,255,255,.10);
}

.commandIntro strong{
    color:#fff;
    font-size:14px;
}

.commandIntro span{
    color:var(--ui-muted);
    font-size:13px;
    text-align:right;
}

.missionList,
.leaderboardList{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

.missionCard{
    display:grid;
    grid-template-columns:52px minmax(0, 1fr) 128px;
    gap:12px;
    align-items:center;
    padding:13px;
    border-radius:22px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.11);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.missionCard.complete{
    border-color:rgba(0,255,136,.34);
    box-shadow:0 0 28px rgba(0,255,136,.08), inset 0 1px 0 rgba(255,255,255,.07);
}

.missionCard.claimed{
    opacity:.72;
    filter:saturate(.74);
}

.missionIcon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    font-size:28px;
    background:linear-gradient(135deg, rgba(89,230,255,.20), rgba(255,181,71,.15));
    border:1px solid rgba(255,255,255,.13);
}

.missionBody{
    min-width:0;
}

.missionTopLine{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.missionTopLine h3{
    font-size:16px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.missionTopLine span{
    flex:0 0 auto;
    color:#8ff0ff;
    font-size:12px;
    font-weight:900;
}

.missionBody p{
    margin:5px 0 9px;
    color:var(--ui-muted);
    font-size:12px;
    line-height:1.35;
}

.missionProgress{
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.10);
}

.missionProgress span{
    display:block;
    width:0%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#00ff88,#00c8ff);
    transition:width .25s ease;
}

.missionBody small{
    display:block;
    margin-top:5px;
    color:var(--ui-muted);
    font-size:11px;
}

.claimMissionButton{
    min-height:44px;
    border:0;
    border-radius:15px;
    color:white;
    cursor:pointer;
    font-weight:900;
    background:linear-gradient(135deg,#00c853,#00b4ff);
    box-shadow:0 12px 28px rgba(0,200,130,.18);
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.claimMissionButton:hover:not(:disabled){
    transform:translateY(-2px);
    box-shadow:0 16px 36px rgba(0,180,255,.28);
}

.claimMissionButton:disabled{
    cursor:not-allowed;
    opacity:.48;
    filter:saturate(.58);
    box-shadow:none;
}

.leaderboardRow{
    display:grid;
    grid-template-columns:58px minmax(0, 1fr) 90px;
    align-items:center;
    gap:12px;
    padding:13px;
    border-radius:20px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.11);
}

.leaderboardRow.you{
    border-color:rgba(255,181,71,.42);
    background:linear-gradient(135deg, rgba(255,181,71,.14), rgba(89,230,255,.07));
    box-shadow:0 0 30px rgba(255,181,71,.09);
}

.rankBadge{
    width:50px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    color:#06101e;
    background:linear-gradient(135deg,#ffb547,#00ffd0);
    font-weight:1000;
}

.leaderInfo{
    min-width:0;
}

.leaderInfo strong{
    display:block;
    margin-bottom:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.leaderInfo span{
    color:var(--ui-muted);
    font-size:12px;
}

.leaderScore{
    color:#8ff0ff;
    font-size:18px;
    font-weight:1000;
    text-align:right;
}

@media(max-width:768px){
    .commandPanel{
        width:calc(100vw - 22px - var(--safe-left) - var(--safe-right));
        padding:16px;
        border-radius:24px;
    }

    .commanderCard{
        grid-template-columns:52px minmax(0, 1fr);
    }

    .commanderAvatar{
        width:52px;
        height:52px;
        border-radius:18px;
        font-size:28px;
    }

    .commanderRank{
        grid-column:1 / -1;
        display:flex;
        justify-content:space-between;
        text-align:left;
    }

    .commandTabs{
        grid-template-columns:1fr;
    }

    .commandIntro{
        align-items:flex-start;
        flex-direction:column;
    }

    .commandIntro span{
        text-align:left;
    }

    .missionCard{
        grid-template-columns:44px minmax(0, 1fr);
    }

    .missionIcon{
        width:44px;
        height:44px;
        border-radius:15px;
        font-size:24px;
    }

    .missionTopLine{
        align-items:flex-start;
        flex-direction:column;
        gap:3px;
    }

    .missionTopLine h3{
        white-space:normal;
    }

    .claimMissionButton{
        grid-column:1 / -1;
    }

    .leaderboardRow{
        grid-template-columns:46px minmax(0, 1fr) 68px;
        gap:9px;
    }

    .rankBadge{
        width:42px;
        height:40px;
        border-radius:14px;
        font-size:13px;
    }

    .leaderScore{
        font-size:15px;
    }
}

@media(max-height:680px){
    .commandPanel{
        max-height:calc(100dvh - 22px - var(--safe-top) - var(--safe-bottom));
        padding:14px;
    }

    .missionCard,
    .leaderboardRow{
        padding:10px;
    }
}

/* =====================================================
   PHASE 1.9 - SIMULATED MULTIPLAYER + TERRITORY CONTROL
===================================================== */

body.parcel-rival #parcelPanel{
    border-color:rgba(255, 77, 109, .52);
    box-shadow:
        0 0 0 1px rgba(255, 77, 109, .25),
        0 18px 55px rgba(255, 77, 109, .18),
        var(--shadow);
}

.territoryPanel{
    position:fixed;
    top:calc(92px + var(--safe-top));
    right:calc(18px + var(--safe-right));
    width:min(430px, calc(100vw - 36px - var(--safe-left) - var(--safe-right)));
    max-height:calc(100dvh - 124px - var(--safe-top) - var(--safe-bottom));
    overflow:auto;
    padding:20px;
    border-radius:28px;
    background:linear-gradient(180deg, rgba(14, 22, 39, .94), rgba(5, 10, 21, .91));
    border:1px solid rgba(255,255,255,.13);
    box-shadow:var(--shadow), 0 0 60px rgba(89, 230, 255, .11);
    backdrop-filter:blur(22px);
    z-index:1300;
    opacity:0;
    transform:translateX(26px) scale(.98);
    pointer-events:none;
    transition:.22s ease;
}

.territoryPanel.show{
    opacity:1;
    transform:translateX(0) scale(1);
    pointer-events:auto;
}

.territoryHeader{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:16px;
}

.territoryHeader h2{
    font-size:25px;
    letter-spacing:-.5px;
}

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

.territoryStatsGrid div{
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.09);
}

.territoryStatsGrid span{
    display:block;
    color:var(--ui-muted);
    font-size:12px;
    margin-bottom:5px;
}

.territoryStatsGrid strong{
    color:#8ff0ff;
    font-size:21px;
}

.territoryBar{
    display:flex;
    width:100%;
    height:14px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.11);
    margin:10px 0;
}

.territoryBar span{
    display:block;
    min-width:2px;
    height:100%;
    transition:width .35s ease;
}

.territoryBar .you{ background:linear-gradient(90deg, #00ffaa, #59e6ff); }
.territoryBar .rivals{ background:linear-gradient(90deg, #ff4d6d, #b75cff); }
.territoryBar .free{ background:rgba(255,255,255,.18); }

.territoryLegend{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    color:var(--ui-muted);
    font-size:12px;
    margin-bottom:15px;
}

.territoryLegend span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.territoryLegend b{
    width:9px;
    height:9px;
    border-radius:50%;
    display:inline-block;
}

.youDot{ background:#00ffaa; }
.rivalDot{ background:#ff4d6d; }
.freeDot{ background:rgba(255,255,255,.35); }

.territoryActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:14px 0;
}

.territoryActions button{
    min-height:46px;
    border:none;
    border-radius:16px;
    cursor:pointer;
    color:white;
    font-weight:800;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.12);
    transition:.2s ease;
}

.territoryActions button:hover{
    transform:translateY(-2px);
    background:rgba(89,230,255,.18);
}

.localIntel{
    display:grid;
    gap:8px;
    padding:12px;
    border-radius:18px;
    background:rgba(89,230,255,.08);
    border:1px solid rgba(89,230,255,.16);
    color:var(--ui-muted);
    font-size:13px;
    margin-bottom:16px;
}

.localIntel strong{
    color:white;
}

.territoryPanel h3{
    font-size:15px;
    margin:0 0 10px;
    color:#8ff0ff;
    text-transform:uppercase;
    letter-spacing:1.3px;
}

.rivalList{
    display:grid;
    gap:10px;
}

.rivalRow{
    display:grid;
    grid-template-columns:44px minmax(0, 1fr) 58px;
    gap:10px;
    align-items:center;
    padding:12px;
    border-radius:18px;
    background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
    border:1px solid color-mix(in srgb, var(--rival-color) 45%, rgba(255,255,255,.10));
    box-shadow:0 0 28px color-mix(in srgb, var(--rival-color) 16%, transparent);
}

.rivalAvatar{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:#06101e;
    background:var(--rival-color);
    font-size:22px;
    font-weight:1000;
}

.rivalInfo{
    min-width:0;
}

.rivalInfo strong,
.rivalInfo span,
.rivalInfo small{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.rivalInfo strong{
    color:white;
    margin-bottom:3px;
}

.rivalInfo span{
    color:var(--rival-color);
    font-size:12px;
    font-weight:800;
}

.rivalInfo small{
    color:var(--ui-muted);
    font-size:11px;
}

.rivalStats{
    text-align:right;
}

.rivalStats strong{
    display:block;
    color:white;
    font-size:20px;
}

.rivalStats span{
    color:var(--ui-muted);
    font-size:12px;
}

.emptyTerritory{
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px dashed rgba(255,255,255,.18);
    color:var(--ui-muted);
    font-size:13px;
}

@media(min-width:901px){
    .bottomNav #territoryNav{
        order:5;
    }
}

@media(max-width:768px){
    .territoryPanel{
        top:auto;
        left:calc(11px + var(--safe-left));
        right:calc(11px + var(--safe-right));
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 12px);
        width:auto;
        max-height:calc(100dvh - 130px - var(--safe-top) - var(--safe-bottom));
        padding:16px;
        border-radius:24px;
        transform:translateY(24px) scale(.98);
    }

    .territoryPanel.show{
        transform:translateY(0) scale(1);
    }

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

    .territoryActions{
        grid-template-columns:1fr;
    }

    .rivalRow{
        grid-template-columns:40px minmax(0, 1fr) 50px;
        padding:10px;
    }

    .rivalAvatar{
        width:40px;
        height:40px;
        border-radius:14px;
    }
}

@media(max-height:680px){
    .territoryPanel{
        max-height:calc(100dvh - 22px - var(--safe-top) - var(--safe-bottom));
        padding:14px;
    }

    .territoryStatsGrid,
    .rivalList{
        gap:8px;
    }

    .rivalRow{
        padding:9px;
    }
}

/* =====================================================
   PHASE 2.0 CLOUD SAVE UI
===================================================== */

.cloudPill{
    position:fixed;
    top:108px;
    left:50%;
    transform:translateX(-50%);
    z-index:1002;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:999px;
    color:#d9fbff;
    background:rgba(18,25,42,.72);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(18px);
    box-shadow:0 10px 30px rgba(0,0,0,.22);
    font-size:13px;
    font-weight:700;
    pointer-events:none;
}

#cloudStatus[data-type="online"],
#cloudSyncStatus[data-type="online"],
#cloudStatus[data-type="ready"],
#cloudSyncStatus[data-type="ready"]{
    color:#7dffbf;
}

#cloudStatus[data-type="warning"],
#cloudStatus[data-type="error"],
#cloudSyncStatus[data-type="warning"],
#cloudSyncStatus[data-type="error"]{
    color:#ffd28a;
}

.cloudBox{
    margin:18px 0;
    padding:16px;
    border-radius:18px;
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:12px;
    align-items:center;
    background:rgba(0,216,255,.08);
    border:1px solid rgba(0,216,255,.16);
}

.cloudBox span{
    display:block;
    margin-bottom:4px;
    font-size:12px;
    opacity:.7;
    text-transform:uppercase;
    letter-spacing:1.5px;
}

.cloudBox strong{
    font-size:14px;
    color:#dffcff;
}

.cloudBox button{
    min-height:42px;
    padding:0 14px;
    border:none;
    border-radius:13px;
    cursor:pointer;
    color:white;
    font-weight:800;
    background:linear-gradient(135deg,rgba(0,180,255,.88),rgba(0,255,176,.78));
    box-shadow:0 10px 22px rgba(0,180,255,.18);
}

#signOutButton{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:none;
}

@media(max-width:900px){
    .cloudPill{
        top:86px;
        font-size:12px;
        padding:8px 12px;
    }

    .cloudBox{
        grid-template-columns:1fr;
    }
}

@media(max-height:700px) and (min-width:769px){
    .cloudPill{
        top:auto;
        bottom:18px;
        left:96px;
        transform:none;
    }
}


/* =====================================================
   PHASE 2.2 - GLOBAL LEADERBOARD + PLAYER DIRECTORY
===================================================== */

.socialIntro{
    align-items:stretch;
}

.socialIntro > div{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:4px;
}

.socialIntro span{
    text-align:left;
}

.socialRefreshButton,
.playerSearch button{
    min-height:42px;
    border:0;
    border-radius:14px;
    color:white;
    cursor:pointer;
    font-weight:1000;
    background:linear-gradient(135deg,#00b4ff,#00ffd0);
    box-shadow:0 12px 28px rgba(0,180,255,.16);
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.socialRefreshButton{
    min-width:104px;
    padding:0 14px;
}

.socialRefreshButton:hover,
.playerSearch button:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 34px rgba(0,255,208,.22);
}

.globalLeaderRow .leaderInfo small{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.48);
    font-size:11px;
}

.leaderInfo em,
.playerCardTop em{
    display:inline-flex;
    margin-left:7px;
    padding:3px 7px;
    border-radius:999px;
    color:#06101e;
    background:#ffb547;
    font-style:normal;
    font-size:10px;
    font-weight:1000;
    vertical-align:middle;
}

.skeletonRow{
    opacity:.72;
    overflow:hidden;
    position:relative;
}

.skeletonRow::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-120%);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    animation:skeletonSweep 1.2s ease-in-out infinite;
}

@keyframes skeletonSweep{
    to{ transform:translateX(120%); }
}

.playerSearch{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 96px 86px;
    gap:9px;
    margin-bottom:12px;
}

.playerSearch input{
    min-height:46px;
    width:100%;
    border:1px solid rgba(255,255,255,.13);
    border-radius:15px;
    outline:0;
    color:white;
    padding:0 14px;
    background:rgba(255,255,255,.075);
    font-weight:800;
}

.playerSearch input:focus{
    border-color:rgba(89,230,255,.42);
    box-shadow:0 0 0 3px rgba(89,230,255,.10);
}

.playerSearch button[data-social-action="clear-search"]{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:none;
}

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

.playerCard{
    display:grid;
    grid-template-columns:52px minmax(0, 1fr);
    gap:12px;
    align-items:center;
    padding:14px;
    border-radius:22px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.11);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.playerCard.you{
    border-color:rgba(255,181,71,.42);
    background:linear-gradient(135deg, rgba(255,181,71,.14), rgba(89,230,255,.07));
    box-shadow:0 0 30px rgba(255,181,71,.09);
}

.playerAvatar{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    font-size:27px;
    background:linear-gradient(135deg, rgba(89,230,255,.20), rgba(255,181,71,.15));
    border:1px solid rgba(255,255,255,.13);
}

.playerCardBody{
    min-width:0;
}

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

.playerCardTop h3{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:15px;
}

.playerCardTop span{
    flex:0 0 auto;
    color:#8ff0ff;
    font-size:12px;
    font-weight:1000;
}

.playerCard p{
    color:var(--ui-muted);
    font-size:12px;
    line-height:1.35;
}

.playerMiniStats{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:9px;
}

.playerMiniStats span{
    padding:5px 8px;
    border-radius:999px;
    color:#8ff0ff;
    background:rgba(89,230,255,.09);
    border:1px solid rgba(89,230,255,.13);
    font-size:11px;
    font-weight:900;
}

.emptySocialState{
    grid-column:1 / -1;
    min-height:190px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    border-radius:24px;
    background:rgba(255,255,255,.065);
    border:1px dashed rgba(255,255,255,.17);
}

.emptySocialState div{
    margin-bottom:10px;
    font-size:46px;
}

.emptySocialState h3{
    margin-bottom:6px;
}

.emptySocialState p{
    max-width:330px;
    color:var(--ui-muted);
    line-height:1.4;
}

@media(max-width:768px){
    .socialIntro{
        align-items:stretch;
    }

    .socialRefreshButton{
        width:100%;
    }

    .playerSearch{
        grid-template-columns:1fr;
    }

    .playerDirectoryList{
        grid-template-columns:1fr;
    }

    .globalLeaderRow .leaderInfo small{
        display:none;
    }

    .playerCardTop{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }
}

/* =====================================================
   PHASE 2.3 - PLAYER MARKETPLACE
===================================================== */

.marketPanel{
    position:fixed;
    top:calc(96px + var(--safe-top));
    right:calc(22px + var(--safe-right));
    width:min(620px, calc(100vw - 44px));
    max-height:calc(100dvh - 140px - var(--safe-bottom));
    z-index:1200;
    overflow:auto;
    padding:22px;
    border-radius:28px;
    color:var(--ui-text);
    background:linear-gradient(145deg, rgba(11,18,33,.94), rgba(16,31,54,.84));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 24px 70px rgba(0,0,0,.54), 0 0 48px rgba(89,230,255,.13);
    backdrop-filter:blur(22px);
    transform:translateY(18px) scale(.985);
    opacity:0;
    transition:.22s ease;
}

.marketPanel.show{
    transform:translateY(0) scale(1);
    opacity:1;
}

.marketHeader,
.marketToolbar,
.sellBox,
.marketCardTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.marketHeader h2{
    font-size:26px;
    letter-spacing:-.03em;
}

.marketTabs{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    margin:18px 0;
    padding:6px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
}

.marketTabs button{
    min-height:42px;
    border:0;
    border-radius:13px;
    color:var(--ui-muted);
    cursor:pointer;
    font-weight:900;
    background:transparent;
    transition:.18s ease;
}

.marketTabs button.active,
.marketTabs button:hover{
    color:white;
    background:linear-gradient(135deg, rgba(89,230,255,.24), rgba(0,208,132,.16));
    box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.marketView{
    display:none;
}

.marketView.show{
    display:block;
}

.marketToolbar{
    margin-bottom:14px;
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.09);
}

.marketToolbar span,
.sellBox span,
.marketLabel{
    display:block;
    color:var(--ui-muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.11em;
    font-weight:900;
}

.marketToolbar strong,
.sellBox strong{
    display:block;
    margin-top:4px;
    color:#8ff0ff;
    font-size:18px;
}

.marketToolbar button,
#marketUseSelected,
.cancelListing,
.buyListing,
.primaryMarketButton{
    border:0;
    border-radius:14px;
    cursor:pointer;
    color:white;
    font-weight:950;
    min-height:42px;
    padding:0 14px;
    background:linear-gradient(135deg, #00b4ff, #00d084);
    box-shadow:0 12px 28px rgba(0,180,255,.18);
    transition:.18s ease;
}

.marketToolbar button:hover,
#marketUseSelected:hover,
.cancelListing:hover,
.buyListing:hover,
.primaryMarketButton:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 36px rgba(0,208,132,.26);
}

.marketToolbar button:disabled,
.cancelListing:disabled,
.buyListing:disabled,
.primaryMarketButton:disabled{
    cursor:not-allowed;
    opacity:.55;
    transform:none;
}

.marketListings{
    display:grid;
    gap:12px;
}

.marketCard{
    display:grid;
    grid-template-columns:52px 1fr auto;
    gap:12px;
    align-items:center;
    padding:14px;
    border-radius:20px;
    background:rgba(255,255,255,.065);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 14px 34px rgba(0,0,0,.22);
}

.marketCard.rare{ border-color:rgba(0,200,255,.28); }
.marketCard.epic{ border-color:rgba(168,85,255,.34); }
.marketCard.legendary{ border-color:rgba(255,181,71,.38); }

.marketParcelIcon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:18px;
    font-size:24px;
    background:radial-gradient(circle at 40% 25%, rgba(255,255,255,.22), rgba(89,230,255,.13));
    border:1px solid rgba(255,255,255,.13);
    box-shadow:inset 0 0 24px rgba(89,230,255,.10);
}

.marketCardBody p{
    margin-top:4px;
    color:var(--ui-muted);
    font-size:12px;
    word-break:break-word;
}

.marketCardTop strong{
    font-size:16px;
}

.marketCardTop span{
    padding:4px 8px;
    border-radius:999px;
    color:#06101e;
    background:#8ff0ff;
    font-size:11px;
    font-weight:950;
}

.marketMiniStats{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:9px;
}

.marketMiniStats span{
    padding:5px 8px;
    border-radius:999px;
    color:#9ef4ff;
    background:rgba(89,230,255,.09);
    border:1px solid rgba(89,230,255,.12);
    font-size:11px;
    font-weight:850;
}

.marketPriceBox{
    display:grid;
    justify-items:end;
    gap:8px;
}

.marketPriceBox strong{
    font-size:18px;
    color:#00ffb3;
}

.cancelListing{
    background:linear-gradient(135deg, rgba(255,92,122,.95), rgba(255,181,71,.9));
}

.sellBox{
    margin-bottom:14px;
    padding:14px;
    border-radius:20px;
    background:rgba(255,255,255,.065);
    border:1px solid rgba(255,255,255,.10);
}

.sellBox small{
    display:block;
    margin-top:5px;
    color:var(--ui-muted);
    line-height:1.35;
}

.marketInput{
    width:100%;
    min-height:52px;
    margin:8px 0 15px;
    padding:0 14px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    outline:0;
    color:white;
    background:rgba(255,255,255,.08);
}

.marketInput:focus{
    border-color:#59e6ff;
    box-shadow:0 0 0 4px rgba(89,230,255,.10);
}

.primaryMarketButton{
    width:100%;
    min-height:54px;
    font-size:16px;
}

.emptyMarketState{
    min-height:180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    border-radius:22px;
    background:rgba(255,255,255,.055);
    border:1px dashed rgba(255,255,255,.16);
}

.emptyMarketState div{
    font-size:44px;
    margin-bottom:10px;
}

.emptyMarketState p{
    max-width:360px;
    margin-top:6px;
    color:var(--ui-muted);
    line-height:1.4;
}

@media(max-width:980px){
    .marketPanel{
        left:50%;
        right:auto;
        top:calc(92px + var(--safe-top));
        transform:translateX(-50%) translateY(18px) scale(.985);
    }

    .marketPanel.show{
        transform:translateX(-50%) translateY(0) scale(1);
    }
}

@media(max-width:768px){
    .marketPanel{
        top:auto;
        left:calc(10px + var(--safe-left));
        right:calc(10px + var(--safe-right));
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 12px);
        width:auto;
        max-height:calc(100dvh - var(--nav-height) - var(--nav-bottom) - 112px);
        padding:16px;
        border-radius:24px;
        transform:translateY(22px);
    }

    .marketPanel.show{
        transform:translateY(0);
    }

    .marketTabs{
        grid-template-columns:1fr;
    }

    .marketCard{
        grid-template-columns:44px 1fr;
    }

    .marketPriceBox{
        grid-column:1 / -1;
        grid-template-columns:1fr 1fr;
        align-items:center;
        justify-items:stretch;
    }

    .marketPriceBox strong{
        align-self:center;
    }

    .buyListing,
    .cancelListing{
        width:100%;
    }
}

/* =====================================================
   PHASE 2.4 - SECURE WALLET + SERVER LEDGER
===================================================== */

.walletBox{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
}

.walletBox button{
    min-height:44px;
}

.transactionPanel{
    margin-top:16px;
    padding:16px;
    border-radius:20px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.09);
}

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

.transactionHeader h3{
    margin:0;
    font-size:17px;
}

.transactionHeader span{
    color:rgba(255,255,255,.55);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.transactionList{
    display:grid;
    gap:10px;
    max-height:240px;
    overflow:auto;
    padding-right:4px;
}

.transactionRow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px;
    border-radius:16px;
    background:rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.08);
}

.transactionRow div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.transactionRow div:last-child{
    text-align:right;
}

.transactionRow span{
    font-size:12px;
    color:rgba(255,255,255,.55);
}

.transactionRow.credit strong:last-child,
.transactionRow.credit div:last-child strong{
    color:#72ffba;
}

.transactionRow.debit strong:last-child,
.transactionRow.debit div:last-child strong{
    color:#ffb86b;
}

.transactionEmpty{
    padding:16px;
    text-align:center;
    color:rgba(255,255,255,.62);
    border-radius:14px;
    background:rgba(0,0,0,.18);
}

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

    .transactionRow{
        align-items:flex-start;
    }
}

/* =====================================================
   PHASE 2.5 - PLAYER PROFILES
===================================================== */

.profilePanel{
    position:fixed;
    right:calc(18px + var(--safe-right));
    top:calc(92px + var(--safe-top));
    width:min(460px, calc(100vw - 36px - var(--safe-left) - var(--safe-right)));
    max-height:calc(100dvh - 124px - var(--safe-top) - var(--safe-bottom));
    overflow:auto;
    padding:20px;
    color:white;
    background:var(--ui-bg-strong);
    border:1px solid var(--ui-border);
    border-radius:28px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(24px);
    z-index:1100;
    animation:panelIn .24s ease;
}

.profileHeader,
.publicProfilesHeader{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
}

.profileHeader h2{
    font-size:26px;
    margin:0;
}

.profilePreview{
    margin-bottom:14px;
}

.profileHeroCard{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:15px;
    padding:16px;
    border-radius:24px;
    background:
        radial-gradient(circle at top left, rgba(0,255,208,.22), transparent 36%),
        linear-gradient(135deg, rgba(0,180,255,.20), rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.16);
}

.profileHeroGlow{
    position:absolute;
    inset:-40%;
    background:conic-gradient(from 180deg, transparent, rgba(93,232,255,.20), transparent, rgba(0,255,136,.14), transparent);
    animation:profileGlowSpin 8s linear infinite;
    opacity:.7;
}

@keyframes profileGlowSpin{
    to{ transform:rotate(360deg); }
}

.profileAvatarBig{
    position:relative;
    z-index:1;
    width:76px;
    height:76px;
    border-radius:24px;
    display:grid;
    place-items:center;
    font-size:42px;
    background:rgba(0,0,0,.32);
    border:1px solid rgba(255,255,255,.20);
    box-shadow:0 14px 35px rgba(0,0,0,.35);
}

.profileHeroBody{
    position:relative;
    z-index:1;
    min-width:0;
}

.profileHeroBody span,
.publicProfilesHeader span,
.profileStatusRow span{
    color:var(--ui-muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.4px;
}

.profileHeroBody h3{
    margin:3px 0 2px;
    font-size:22px;
    line-height:1.1;
}

.profileHeroBody p{
    margin:0 0 6px;
    color:var(--ui-blue);
    font-weight:800;
}

.profileHeroBody small{
    color:rgba(255,255,255,.78);
    line-height:1.35;
}

.profileStatsGrid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    margin-top:10px;
}

.profileStatsGrid div{
    padding:10px;
    border-radius:16px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.09);
}

.profileStatsGrid span{
    display:block;
    color:var(--ui-muted);
    font-size:11px;
    margin-bottom:3px;
}

.profileStatsGrid strong{
    font-size:13px;
    color:white;
}

.profileStatusRow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:10px;
    margin-bottom:12px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
}

#profileStatus[data-type="online"]{ color:#70ffb8; }
#profileStatus[data-type="error"]{ color:#ff8d8d; }
#profileStatus[data-type="ready"]{ color:var(--ui-blue); }

.profileQuickActions{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.profileQuickActions button,
.profileSearchForm button{
    border:0;
    border-radius:12px;
    padding:9px 10px;
    cursor:pointer;
    color:white;
    font-weight:800;
    background:rgba(93,232,255,.16);
    border:1px solid rgba(93,232,255,.20);
}

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

.profileFormGrid label,
.profileBioLabel,
.profileToggle{
    display:flex;
    flex-direction:column;
    gap:6px;
    color:var(--ui-muted);
    font-size:12px;
    font-weight:800;
    letter-spacing:.4px;
}

.profileBioLabel{
    grid-column:1 / -1;
}

.profileInput{
    width:100%;
    min-height:46px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:0 12px;
    color:white;
    background:rgba(255,255,255,.08);
    outline:none;
    font-weight:700;
}

textarea.profileInput{
    min-height:78px;
    resize:vertical;
    padding:12px;
    line-height:1.35;
}

.profileInput:focus{
    border-color:rgba(93,232,255,.65);
    box-shadow:0 0 0 3px rgba(93,232,255,.12);
}

.profileToggle{
    flex-direction:row;
    align-items:center;
    margin:12px 0;
    padding:11px;
    border-radius:16px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
}

.profileToggle input{
    width:18px;
    height:18px;
    accent-color:#00d084;
}

.primaryProfileButton{
    width:100%;
    min-height:52px;
    border:0;
    border-radius:16px;
    color:white;
    cursor:pointer;
    font-size:16px;
    font-weight:900;
    background:linear-gradient(135deg, #00d084, #00b4ff);
    box-shadow:0 14px 34px rgba(0,180,255,.24);
}

.publicProfilesBlock{
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.10);
}

.profileSearchForm{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:8px;
    margin-bottom:12px;
}

.profileSearchForm input{
    min-width:0;
    min-height:42px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    padding:0 12px;
    color:white;
    background:rgba(255,255,255,.08);
    outline:none;
}

.publicProfileList{
    display:grid;
    gap:9px;
}

.publicProfileCard{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,.065);
    border:1px solid rgba(255,255,255,.09);
}

.publicProfileCard.you{
    border-color:rgba(0,255,136,.35);
    background:rgba(0,255,136,.08);
}

.profileMiniAvatar{
    flex:0 0 auto;
    width:46px;
    height:46px;
    border-radius:16px;
    display:grid;
    place-items:center;
    font-size:25px;
    background:rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.14);
}

.publicProfileBody{
    min-width:0;
    flex:1;
}

.publicProfileTop{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
}

.publicProfileTop strong{
    color:white;
}

.publicProfileTop em{
    color:#70ffb8;
    font-size:11px;
    font-style:normal;
    margin-left:5px;
}

.publicProfileTop span{
    color:var(--ui-blue);
    font-size:12px;
    font-weight:800;
}

.publicProfileBody p{
    margin:5px 0;
    color:rgba(255,255,255,.78);
    font-size:13px;
    line-height:1.35;
}

.publicProfileBody small{
    color:var(--ui-muted);
}

.emptyProfileSearch{
    text-align:center;
    padding:20px;
    border-radius:20px;
    border:1px dashed rgba(255,255,255,.16);
    color:var(--ui-muted);
}

.emptyProfileSearch div{
    font-size:32px;
    margin-bottom:8px;
}

.skeletonProfile{
    opacity:.65;
    animation:pulseGlow 1.4s ease-in-out infinite;
}

@media (min-width: 1100px){
    .bottomNav{
        height:min(600px, calc(100dvh - 152px));
    }

    .bottomNav button{
        min-height:64px;
        font-size:11px;
    }

    .bottomNav button span{
        font-size:18px;
    }
}

@media(max-width:768px){
    .profilePanel{
        top:auto;
        left:calc(11px + var(--safe-left));
        right:calc(11px + var(--safe-right));
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 12px);
        width:auto;
        max-height:calc(100dvh - 126px - var(--safe-top) - var(--safe-bottom));
        padding:16px;
        border-radius:24px;
    }

    .profileFormGrid,
    .profileStatsGrid{
        grid-template-columns:1fr 1fr;
    }

    .profileSearchForm{
        grid-template-columns:1fr;
    }

    .profileHeroCard{
        align-items:flex-start;
    }

    .profileAvatarBig{
        width:62px;
        height:62px;
        font-size:34px;
        border-radius:20px;
    }

    .profileStatusRow{
        align-items:flex-start;
        flex-direction:column;
    }

    .profileQuickActions{
        width:100%;
        justify-content:stretch;
    }

    .profileQuickActions button{
        flex:1;
    }
}

@media(max-width:480px){
    .profileFormGrid,
    .profileStatsGrid{
        grid-template-columns:1fr;
    }

    .publicProfileTop{
        align-items:flex-start;
        flex-direction:column;
        gap:2px;
    }
}

/* =====================================================
   PHASE 2.7 - PWA / MOBILE APP POLISH
===================================================== */

.pwaStatusPill,
.installAppButton,
.updateAppButton{
    position:fixed;
    z-index:1400;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(10,16,29,.82);
    color:white;
    backdrop-filter:blur(18px);
    box-shadow:0 12px 36px rgba(0,0,0,.36);
}

.pwaStatusPill{
    right:calc(16px + env(safe-area-inset-right, 0px));
    top:calc(16px + env(safe-area-inset-top, 0px));
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:800;
    pointer-events:none;
}

.pwaDot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:#00d084;
    box-shadow:0 0 14px rgba(0,208,132,.85);
}

.pwaStatusPill.offline .pwaDot{
    background:#ffb020;
    box-shadow:0 0 14px rgba(255,176,32,.85);
}

.installAppButton,
.updateAppButton{
    right:calc(16px + env(safe-area-inset-right, 0px));
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    min-height:46px;
    padding:0 16px;
    border-radius:16px;
    cursor:pointer;
    font-size:14px;
    font-weight:900;
}

.installAppButton{
    background:linear-gradient(135deg,#00d084,#00b4ff);
}

.updateAppButton{
    bottom:calc(72px + env(safe-area-inset-bottom, 0px));
    color:#59e6ff;
}

.pwaToast{
    position:fixed;
    left:50%;
    bottom:calc(90px + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%) translateY(18px);
    z-index:1600;
    max-width:min(460px, calc(100vw - 32px));
    padding:13px 16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(10,16,29,.92);
    color:white;
    box-shadow:0 18px 55px rgba(0,0,0,.45);
    backdrop-filter:blur(16px);
    opacity:0;
    transition:.25s ease;
    text-align:center;
    font-weight:700;
}

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

@media(max-width:900px){
    .pwaStatusPill{
        top:calc(10px + env(safe-area-inset-top, 0px));
        right:calc(10px + env(safe-area-inset-right, 0px));
        font-size:11px;
    }

    .installAppButton,
    .updateAppButton{
        left:calc(12px + env(safe-area-inset-left, 0px));
        right:calc(12px + env(safe-area-inset-right, 0px));
        bottom:calc(88px + env(safe-area-inset-bottom, 0px));
        width:auto;
    }

    .updateAppButton{
        bottom:calc(142px + env(safe-area-inset-bottom, 0px));
    }
}

@media(display-mode:standalone){
    body{
        user-select:none;
        -webkit-user-select:none;
    }

    .installAppButton{
        display:none !important;
    }
}

/* =====================================================
   PHASE 2.7 - MOBILE SAFE LAYOUT TUNING
===================================================== */

body{
    min-height:100dvh;
    overscroll-behavior:none;
    touch-action:manipulation;
}

button,
input,
select,
textarea{
    font-size:max(16px, 1em);
}

@media(max-width:560px){
    .topHud{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        width:calc(100vw - 18px - var(--safe-left) - var(--safe-right));
        gap:8px;
    }

    .hudCard{
        padding:9px 10px;
        border-radius:15px;
    }

    #parcelPanel,
    .parcelPanel,
    .economyPanel,
    .shopPanel,
    .commandPanel,
    .marketPanel,
    .profilePanel,
    .territoryPanel{
        max-height:calc(100dvh - 108px - var(--safe-top) - var(--safe-bottom));
        -webkit-overflow-scrolling:touch;
    }

    #buyButton{
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 10px);
        min-height:52px;
    }

    #gpsButton{
        bottom:calc(var(--nav-height) + var(--nav-bottom) + 78px);
    }
}

@media(max-height:720px) and (min-width:760px){
    .topHud{
        top:calc(10px + var(--safe-top));
    }

    #parcelPanel,
    .parcelPanel{
        top:calc(72px + var(--safe-top));
        max-height:calc(100dvh - 100px - var(--safe-top) - var(--safe-bottom));
    }

    .bottomNav{
        height:62px;
    }

    #buyButton{
        min-height:48px;
        bottom:calc(72px + var(--safe-bottom));
    }
}


/* =====================================================
   PHASE 2.8 - EVENTS, NOTIFICATIONS AND REAL REWARDS
===================================================== */

.atlasModalPanel,
.eventsPanel,
.earningsPanel{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -46%) scale(.97);
    width:min(680px, calc(100vw - 34px - var(--safe-left) - var(--safe-right)));
    max-height:min(760px, calc(100dvh - 44px - var(--safe-top) - var(--safe-bottom)));
    overflow:auto;
    padding:20px;
    border-radius:28px;
    z-index:1750;
    color:white;
    background:rgba(7, 13, 26, .94);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 28px 90px rgba(0,0,0,.60);
    backdrop-filter:blur(24px);
    opacity:0;
    transition:opacity .18s ease, transform .18s ease;
}

.atlasModalPanel.show,
.eventsPanel.show,
.earningsPanel.show{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}

.modalHeader,
.eventsHeader,
.earningsHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:18px;
}

.modalHeader h2,
.eventsHeader h2,
.earningsHeader h2{
    font-size:clamp(23px, 3vw, 34px);
    line-height:1;
}

.eventHero,
.realMoneyStatus,
.cashoutForm,
.payoutPanel{
    padding:16px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.07);
    margin-bottom:14px;
}

.eventHero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    background:linear-gradient(135deg, rgba(0,180,255,.16), rgba(0,255,179,.10));
}

.eventHero span,
.earningsStat span,
.eventCard span,
.noticeRow span,
.realMoneyStatus span{
    color:var(--ui-muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.eventHero strong,
.realMoneyStatus strong{
    display:block;
    font-size:22px;
    margin:4px 0;
}

.eventHero small,
.realMoneyStatus span{
    display:block;
    line-height:1.4;
}

.eventHero button,
.eventsActions button,
.earningsActions button,
.cashoutForm button{
    min-height:44px;
    border:0;
    border-radius:14px;
    color:white;
    cursor:pointer;
    font-weight:900;
    background:linear-gradient(135deg,#00c853,#00b4ff);
    padding:0 16px;
    transition:transform .18s ease, opacity .18s ease;
}

.eventHero button:hover,
.eventsActions button:hover,
.earningsActions button:hover,
.cashoutForm button:hover:not(:disabled){
    transform:translateY(-2px);
}

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

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

.eventsTabs button{
    min-height:44px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    color:white;
    background:rgba(255,255,255,.06);
    cursor:pointer;
    font-weight:800;
}

.eventsTabs button.active{
    color:#041427;
    background:linear-gradient(135deg,#5de8ff,#00ffb3);
}

.eventsView{display:none;}
.eventsView.show{display:block;}

.liveEventsList,
.notificationList{
    display:grid;
    gap:10px;
}

.eventCard,
.noticeRow{
    padding:14px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.11);
    background:rgba(255,255,255,.06);
}

.eventCard.claimed{
    border-color:rgba(0,255,179,.32);
    background:rgba(0,255,179,.08);
}

.eventCard.locked{
    opacity:.72;
}

.eventTop,
.noticeTop{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.eventTop strong,
.noticeTop strong{
    font-size:16px;
}

.eventProgress{
    height:9px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,.10);
    margin:10px 0 8px;
}

.eventProgress span{
    display:block;
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#00d084,#00b4ff,#ffcf5a);
}

.eventFooter{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.eventFooter small,
.noticeRow small{
    color:var(--ui-muted);
}

.eventFooter button{
    min-height:38px;
    border:0;
    border-radius:12px;
    padding:0 12px;
    color:white;
    font-weight:900;
    cursor:pointer;
    background:linear-gradient(135deg,#00b4ff,#00ffb3);
}

.eventFooter button:disabled,
.cashoutForm button:disabled{
    opacity:.52;
    cursor:not-allowed;
    filter:saturate(.6);
}

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

.earningsStat{
    min-width:0;
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.075);
    border:1px solid rgba(255,255,255,.11);
}

.earningsStat strong{
    display:block;
    margin-top:7px;
    color:#5de8ff;
    font-size:clamp(17px, 2.2vw, 24px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.realMoneyStatus.locked{
    border-color:rgba(255, 197, 87, .34);
    background:linear-gradient(135deg, rgba(255,197,87,.13), rgba(255,107,203,.08));
}

.realMoneyStatus.ready{
    border-color:rgba(0,255,179,.34);
    background:linear-gradient(135deg, rgba(0,255,179,.14), rgba(0,180,255,.08));
}

.cashoutForm{
    display:grid;
    gap:8px;
}

.cashoutForm label{
    color:var(--ui-muted);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
}

.noticeRow.info{border-color:rgba(93,232,255,.25);}
.noticeRow.success{border-color:rgba(0,255,179,.25);}
.noticeRow.warning{border-color:rgba(255,197,87,.28);}
.noticeRow.error{border-color:rgba(255,85,120,.32);}

@media(min-width:1100px){
    .bottomNav{
        height:min(760px, calc(100dvh - 110px));
        overflow:auto;
        scrollbar-width:none;
    }
    .bottomNav button{
        min-height:58px;
        font-size:10.5px;
    }
    .bottomNav button span{
        font-size:18px;
    }
    .eventsPanel,
    .earningsPanel,
    .atlasModalPanel{
        left:calc(50% + 24px);
    }
}

@media(max-width:768px){
    .bottomNav{
        overflow-x:auto;
        overflow-y:hidden;
        justify-content:flex-start;
        scrollbar-width:none;
    }
    .bottomNav button{
        flex:0 0 72px;
        min-width:72px;
    }
    .eventsPanel,
    .earningsPanel,
    .atlasModalPanel{
        width:calc(100vw - 20px - var(--safe-left) - var(--safe-right));
        max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));
        padding:16px;
        border-radius:22px;
    }
    .eventsActions,
    .earningsActions,
    .earningsGrid{
        grid-template-columns:1fr;
    }
    .eventHero,
    .eventFooter{
        align-items:stretch;
        flex-direction:column;
    }
}


/* =====================================================
   PHASE 2.9 ADS REVENUE + REWARD RULES
===================================================== */

.revenuePanel{
    width:min(760px, calc(100vw - 36px));
}

.revenueHero,
.adPlayerBox,
.rewardRulesBox,
.fraudBox{
    border-radius:20px;
    border:1px solid rgba(255,255,255,.11);
    background:rgba(255,255,255,.07);
    padding:14px;
    margin-bottom:14px;
}

.revenueHero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    background:linear-gradient(135deg, rgba(0,180,255,.16), rgba(0,255,179,.08));
}

.revenueHero span,
.revenueStat span,
.ruleRow span{
    color:var(--ui-muted);
    font-size:12px;
}

.revenueHero strong{
    display:block;
    color:#5de8ff;
    font-size:clamp(18px, 2.4vw, 28px);
    margin:4px 0;
}

.revenueHero button,
.adActions button{
    min-height:42px;
    border:0;
    border-radius:14px;
    padding:0 14px;
    cursor:pointer;
    font-weight:900;
    color:white;
    background:linear-gradient(135deg,#00b4ff,#00ffb3);
}

.adScreen{
    min-height:140px;
    border-radius:22px;
    border:1px solid rgba(93,232,255,.22);
    background:
        radial-gradient(circle at 20% 20%, rgba(0,255,179,.20), transparent 28%),
        radial-gradient(circle at 80% 0%, rgba(0,180,255,.24), transparent 35%),
        rgba(0,0,0,.32);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:10px;
    padding:18px;
    overflow:hidden;
    position:relative;
}

.adScreen.playing::after{
    content:"";
    position:absolute;
    inset:-40%;
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22), transparent 70%);
    animation:adScan 1.2s linear infinite;
}

@keyframes adScan{
    from{transform:translateX(-35%) rotate(8deg);}
    to{transform:translateX(35%) rotate(8deg);}
}

.adScreen strong{
    font-size:22px;
    color:white;
    z-index:1;
}

.adScreen span{
    color:var(--ui-muted);
    z-index:1;
}

.adProgress{
    width:min(420px, 94%);
    height:10px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,.12);
    z-index:1;
}

.adProgress span{
    display:block;
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#00ffb3,#00b4ff,#ffcf5a);
    transition:width .25s ease;
}

.adActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px;
}

.adActions button:disabled{
    opacity:.55;
    cursor:not-allowed;
    filter:saturate(.65);
}

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

.revenueStat{
    min-width:0;
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.075);
    border:1px solid rgba(255,255,255,.10);
}

.revenueStat strong{
    display:block;
    margin-top:7px;
    color:#5de8ff;
    font-size:clamp(16px, 2.1vw, 22px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.rewardRulesList{
    display:grid;
    gap:8px;
}

.ruleRow{
    border-radius:14px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.16);
}

.ruleRow strong{
    display:block;
    margin-bottom:4px;
}

.ruleRow.ok{
    border-color:rgba(0,255,179,.22);
}

.ruleRow.warn{
    border-color:rgba(255,197,87,.30);
    background:rgba(255,197,87,.06);
}

@media(min-width:1100px){
    .revenuePanel{
        left:calc(50% + 24px);
    }
}

@media(max-width:768px){
    .revenuePanel{
        width:calc(100vw - 20px - var(--safe-left) - var(--safe-right));
        max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));
        padding:16px;
        border-radius:22px;
    }
    .revenueHero,
    .adActions{
        grid-template-columns:1fr;
        flex-direction:column;
        align-items:stretch;
    }
    .revenueGrid{
        grid-template-columns:1fr 1fr;
    }
}

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