/* =====================================================
   PARCEL EMPIRE - PHASE 4.0 FINAL ATLAS-STYLE UI PASS
   A focused real-world parcel game UI: buy land, earn rent,
   boost, collect badges, climb ranks, cash out, and buy near GPS.
===================================================== */

: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);

    --bg: #06111f;
    --panel: rgba(7, 17, 32, .82);
    --panel-strong: rgba(5, 13, 24, .94);
    --border: rgba(255,255,255,.14);
    --muted: rgba(255,255,255,.68);
    --text: #fff;
    --blue: #49ddff;
    --green: #00d084;
    --gold: #ffd166;
    --pink: #ff55c8;
    --danger: #ff5470;
    --shadow: 0 18px 60px rgba(0,0,0,.45);
    --nav-height: 76px;
}

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

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:var(--bg);
    color:var(--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;color:inherit;}

#map{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    background:radial-gradient(circle at 50% 45%, rgba(0,200,255,.18), transparent 35%), #06111f;
    z-index:1;
}

.worldShade{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:2;
    background:
        linear-gradient(180deg, rgba(0,0,0,.45), transparent 22%, transparent 62%, rgba(0,0,0,.55)),
        radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,.42));
}

.scanGlow{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:3;
    opacity:.28;
    background:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:100% 5px;
    mix-blend-mode:overlay;
}

.fxLayer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:2500;
    overflow:hidden;
}

.mapboxgl-ctrl-top-right{top:96px !important; right:18px !important;}
.mapboxgl-ctrl-bottom-left{bottom:104px !important; left:18px !important;}
.mapboxgl-ctrl-group,.mapboxgl-ctrl-scale{
    border-radius:14px !important;
    overflow:hidden;
    background:rgba(6,16,32,.86) !important;
    border:1px solid var(--border) !important;
    box-shadow:var(--shadow) !important;
    color:white !important;
}

.mapError{
    position:fixed;
    inset:20px;
    z-index:5000;
    display:grid;
    place-content:center;
    text-align:center;
    background:rgba(5,10,18,.92);
    border:1px solid var(--border);
    border-radius:26px;
    padding:30px;
}

.gameTopbar{
    position:fixed;
    top:calc(12px + var(--safe-top));
    left:calc(14px + var(--safe-left));
    right:calc(14px + var(--safe-right));
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    pointer-events:none;
}

.brandChip,.cloudChip,.lockChip,.securityChip,.onlineStatus{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:8px 13px;
    border-radius:999px;
    background:rgba(5,13,26,.72);
    border:1px solid var(--border);
    backdrop-filter:blur(18px);
    box-shadow:0 12px 32px rgba(0,0,0,.32);
    font-size:13px;
    font-weight:800;
    pointer-events:auto;
}
.brandChip img{width:22px;height:22px;}
.topChips{display:flex;align-items:center;gap:8px;pointer-events:auto;}
.cloudChip{color:var(--blue);}
.lockChip{color:var(--green);}
.lockChip.locked{color:var(--danger);}
.securityChip{color:var(--gold);}
.securityChip.warn{color:var(--danger);}
.securityChip.ok{color:var(--green);}
.okDistance{color:var(--green)!important;}
.badDistance{color:var(--danger)!important;}

.statsHud{
    position:fixed;
    top:calc(62px + var(--safe-top));
    left:50%;
    transform:translateX(-50%);
    width:min(760px, calc(100vw - 28px - var(--safe-left) - var(--safe-right)));
    z-index:1000;
    display:grid;
    grid-template-columns:1.25fr .95fr .85fr .85fr;
    gap:10px;
    pointer-events:none;
}

.statCard{
    min-width:0;
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(7,17,32,.80);
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
    padding:12px 13px;
    text-align:center;
    pointer-events:auto;
}
button.statCard{cursor:pointer;}
.statCard span{
    display:block;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:1.35px;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}
.statCard strong{
    display:block;
    margin-top:4px;
    color:var(--blue);
    font-size:clamp(15px, 1.5vw, 21px);
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.parcelCard{
    position:fixed;
    right:calc(18px + var(--safe-right));
    top:calc(138px + var(--safe-top));
    width:min(360px, calc(100vw - 36px));
    max-height:calc(100dvh - 250px - var(--safe-top) - var(--safe-bottom));
    overflow:auto;
    z-index:1000;
    padding:18px;
    border-radius:26px;
    background:var(--panel);
    border:1px solid var(--border);
    backdrop-filter:blur(22px);
    box-shadow:var(--shadow);
    animation:slideIn .35s ease both;
}

.parcelCardHeader,.sheetHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.eyebrow{
    display:block;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:1.6px;
    font-size:11px;
    font-weight:900;
}
.parcelCard h1,.sheetHeader h2{
    margin-top:4px;
    font-size:24px;
    line-height:1;
}
.rarityPill{
    flex:0 0 auto;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid var(--border);
    font-size:12px;
    font-weight:900;
}
.rarity-common{color:#bdf6ce;border-color:rgba(0,208,132,.45);background:rgba(0,208,132,.13);}
.rarity-rare{color:#83d9ff;border-color:rgba(73,221,255,.55);background:rgba(73,221,255,.13);}
.rarity-epic{color:#d69bff;border-color:rgba(170,90,255,.58);background:rgba(170,90,255,.14);}
.rarity-legendary{color:#ffe08a;border-color:rgba(255,209,102,.65);background:rgba(255,209,102,.18);box-shadow:0 0 26px rgba(255,209,102,.24);}
.rarity-blocked{color:#ff9aaa;border-color:rgba(255,84,112,.55);background:rgba(255,84,112,.16);}

.parcelMiniMap{
    position:relative;
    margin:16px 0;
    min-height:92px;
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.11);
    background:
        radial-gradient(circle at 50% 50%, rgba(73,221,255,.18), transparent 42%),
        linear-gradient(135deg, rgba(0,208,132,.22), rgba(73,221,255,.14));
}
.miniGrid{
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
    background-size:25% 33.333%;
}
#miniOwnerIcon{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:42px;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

.parcelStats{
    display:grid;
    gap:8px;
}
.parcelStats div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:9px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.parcelStats dt{color:var(--muted);font-size:13px;font-weight:700;}
.parcelStats dd{font-size:13px;font-weight:900;text-align:right;color:var(--blue);max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.primaryAction,.ghostAction{
    width:100%;
    min-height:52px;
    margin-top:14px;
    border:0;
    border-radius:17px;
    cursor:pointer;
    font-weight:900;
    transition:.18s ease;
}
.primaryAction{
    color:#021221;
    background:linear-gradient(135deg, #00d084, #49ddff);
    box-shadow:0 14px 34px rgba(0,208,132,.30);
}
.primaryAction:hover:not(:disabled){transform:translateY(-2px);}
.primaryAction:disabled{opacity:.48;cursor:not-allowed;filter:grayscale(.4);}
.ghostAction{
    color:white;
    background:rgba(255,255,255,.08);
    border:1px solid var(--border);
}

.buyLandButton{
    position:fixed;
    left:50%;
    bottom:calc(var(--nav-height) + 26px + var(--safe-bottom));
    transform:translateX(-50%);
    z-index:1100;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:min(310px, calc(100vw - 44px));
    min-height:66px;
    padding:12px 18px;
    border:0;
    border-radius:24px;
    cursor:pointer;
    color:white;
    background:linear-gradient(135deg, rgba(0,208,132,.96), rgba(0,125,255,.96));
    box-shadow:0 18px 55px rgba(0,208,132,.38), inset 0 1px 0 rgba(255,255,255,.35);
    animation:pulseButton 2.8s ease-in-out infinite;
}
.buyLandButton.locked{background:linear-gradient(135deg, rgba(255,84,112,.96), rgba(255,148,78,.92));box-shadow:0 18px 55px rgba(255,84,112,.32), inset 0 1px 0 rgba(255,255,255,.25);}
.buyLandButton span{font-size:28px;}
.buyLandButton strong{font-size:18px;letter-spacing:.6px;}
.buyLandButton small{display:block;font-size:11px;opacity:.78;font-weight:800;}

.roundButton{
    position:fixed;
    z-index:1150;
    width:58px;
    height:58px;
    border-radius:50%;
    border:1px solid var(--border);
    background:rgba(7,17,32,.82);
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
    cursor:pointer;
    font-size:23px;
}
.gpsButton{right:calc(18px + var(--safe-right));bottom:calc(var(--nav-height) + 104px + var(--safe-bottom));}
.installButton{left:calc(18px + var(--safe-left));bottom:calc(var(--nav-height) + 104px + var(--safe-bottom));}
.updateButton{left:calc(84px + var(--safe-left));bottom:calc(var(--nav-height) + 104px + var(--safe-bottom));}
.onlineStatus{
    position:fixed;
    left:calc(18px + var(--safe-left));
    bottom:calc(var(--nav-height) + 36px + var(--safe-bottom));
    z-index:1000;
    color:var(--green);
}
.onlineStatus.offline{color:var(--danger);}

.bottomNav{
    position:fixed;
    left:50%;
    bottom:calc(12px + var(--safe-bottom));
    transform:translateX(-50%);
    z-index:1200;
    width:min(820px, calc(100vw - 22px - var(--safe-left) - var(--safe-right)));
    min-height:var(--nav-height);
    display:grid;
    grid-template-columns:repeat(9, minmax(0,1fr));
    gap:4px;
    padding:8px;
    border-radius:25px;
    background:rgba(5,13,26,.84);
    border:1px solid var(--border);
    backdrop-filter:blur(24px);
    box-shadow:var(--shadow);
}
.bottomNav button{
    min-width:0;
    border:0;
    border-radius:18px;
    background:transparent;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-size:18px;
    transition:.18s ease;
}
.bottomNav span{font-size:11px;font-weight:900;color:var(--muted);}
.bottomNav button.active,.bottomNav button:hover{background:rgba(73,221,255,.12);transform:translateY(-2px);}
.bottomNav button.active span{color:var(--blue);}

.sheetPanel{
    position:fixed;
    right:calc(18px + var(--safe-right));
    bottom:calc(var(--nav-height) + 24px + var(--safe-bottom));
    width:min(390px, calc(100vw - 36px));
    max-height:calc(100dvh - 160px - var(--safe-top) - var(--safe-bottom));
    overflow:auto;
    z-index:1800;
    padding:20px;
    border-radius:28px;
    background:var(--panel-strong);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    backdrop-filter:blur(24px);
    animation:sheetUp .24s ease both;
}
.wideSheet{width:min(560px, calc(100vw - 36px));}
.closeSheet{
    width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.08);font-size:26px;line-height:1;
}
.sheetNote{margin-top:14px;color:var(--muted);font-size:13px;line-height:1.45;}

.boostHero,.titleCard,.cashoutMeter{
    margin-top:18px;
    padding:18px;
    border-radius:22px;
    border:1px solid var(--border);
    background:linear-gradient(135deg, rgba(73,221,255,.14), rgba(0,208,132,.10));
}
.boostHero strong{font-size:56px;line-height:1;color:var(--gold);display:block;}
.boostHero span,.titleCard span,.cashoutMeter span{color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:1.2px;font-size:11px;}
.titleCard strong,.cashoutMeter strong{display:block;margin-top:5px;font-size:26px;color:var(--blue);}
.titleCard small,.cashoutMeter small{display:block;margin-top:8px;color:var(--muted);}

.badgeGrid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
    margin-top:16px;
}
.badge{
    border:1px solid var(--border);
    border-radius:18px;
    padding:14px;
    background:rgba(255,255,255,.07);
    min-height:112px;
}
.badge.unlocked{background:linear-gradient(135deg, rgba(0,208,132,.18), rgba(73,221,255,.10));border-color:rgba(0,208,132,.35);}
.badgeIcon{font-size:28px;display:block;margin-bottom:8px;}
.badge strong{display:block;font-size:14px;}
.badge small{display:block;margin-top:6px;color:var(--muted);line-height:1.35;}

.rankTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0;}
.rankTabs button{
    border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.06);padding:10px;font-weight:900;cursor:pointer;
}
.rankTabs button.active{background:rgba(73,221,255,.16);color:var(--blue);}
.leaderboardList{display:grid;gap:8px;}
.rankRow{
    display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;
    padding:12px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.06);
}
.rankRow.me{border-color:rgba(0,208,132,.45);background:rgba(0,208,132,.12);}
.rankNum{font-weight:900;color:var(--gold);}
.rankName strong{display:block}.rankName small{color:var(--muted)}
.rankScore{font-weight:900;color:var(--blue);}

.meter{
    height:12px;border-radius:999px;overflow:hidden;margin:14px 0 4px;background:rgba(255,255,255,.11);
}
.meter span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--green),var(--blue));border-radius:inherit;}

.howList{margin:18px 0 8px 19px;color:rgba(255,255,255,.84);line-height:1.9;font-weight:700;}

.rarityReveal{
    position:fixed;inset:0;z-index:4000;display:grid;place-items:center;padding:22px;
    background:rgba(0,0,0,.62);backdrop-filter:blur(10px);
}
.rarityReveal[hidden]{display:none;}
.revealCard{
    width:min(420px,100%);text-align:center;padding:32px;border-radius:32px;
    background:radial-gradient(circle at 50% 10%, rgba(255,209,102,.22), transparent 35%), var(--panel-strong);
    border:1px solid var(--border);box-shadow:0 25px 90px rgba(0,0,0,.62);
    animation:revealPop .42s cubic-bezier(.2,1.35,.35,1) both;
}
.revealCard span{color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:1.7px;font-size:12px;}
.revealCard h2{font-size:52px;margin:10px 0;color:var(--gold);}
.revealCard p{color:var(--blue);font-weight:900;}
.revealCard button{margin-top:22px;border:0;border-radius:16px;background:white;color:#06111f;font-weight:900;padding:14px 24px;cursor:pointer;}

.toast{
    position:fixed;
    left:50%;bottom:calc(var(--nav-height) + 106px + var(--safe-bottom));
    transform:translateX(-50%) translateY(20px);
    z-index:4500;
    max-width:min(480px,calc(100vw - 32px));
    padding:13px 16px;
    border-radius:999px;
    background:rgba(5,13,26,.92);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    opacity:0;
    pointer-events:none;
    color:white;
    font-weight:800;
    text-align:center;
    transition:.24s ease;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.spark{
    position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold);
    animation:sparkFly .75s ease-out forwards;
}

@keyframes slideIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
@keyframes sheetUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseButton{0%,100%{box-shadow:0 18px 55px rgba(0,208,132,.30)}50%{box-shadow:0 18px 70px rgba(73,221,255,.44)}}
@keyframes revealPop{from{opacity:0;transform:scale(.82) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes sparkFly{to{opacity:0;transform:translate(var(--x), var(--y)) scale(.2)}}

@media(max-width:980px){
    .parcelCard{left:calc(16px + var(--safe-left));right:auto;top:auto;bottom:calc(var(--nav-height) + 104px + var(--safe-bottom));width:min(360px, calc(100vw - 32px));max-height:38dvh;}
    .sheetPanel{left:50%;right:auto;transform:translateX(-50%);bottom:calc(var(--nav-height) + 20px + var(--safe-bottom));}
    @keyframes sheetUp{from{opacity:0;transform:translateX(-50%) translateY(22px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
}

@media(max-width:720px){
    :root{--nav-height:72px;}
    .gameTopbar{top:calc(8px + var(--safe-top));}
    .brandChip span{display:none;}
    .topChips{gap:6px;}
    .cloudChip,.lockChip{font-size:10px;min-height:34px;padding:7px 9px;}
    .cloudChip{display:none;}
    .statsHud{top:calc(50px + var(--safe-top));grid-template-columns:1.18fr .88fr .82fr .72fr;gap:7px;width:calc(100vw - 18px - var(--safe-left) - var(--safe-right));}
    .statCard{padding:9px 8px;border-radius:15px;}
    .statCard span{font-size:8.5px;letter-spacing:.9px;}
    .statCard strong{font-size:13px;}
    .parcelCard{left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right));width:auto;bottom:calc(var(--nav-height) + 98px + var(--safe-bottom));max-height:34dvh;padding:14px;border-radius:22px;}
    .parcelCard h1{font-size:19px}.parcelMiniMap{display:none}.parcelStats div{padding:6px 0}.parcelStats dt,.parcelStats dd{font-size:12px;}
    .buyLandButton{min-height:60px;bottom:calc(var(--nav-height) + 20px + var(--safe-bottom));width:min(250px, calc(100vw - 132px));border-radius:20px;}
    .buyLandButton small{display:none;}
    .gpsButton{right:calc(12px + var(--safe-right));bottom:calc(var(--nav-height) + 88px + var(--safe-bottom));width:52px;height:52px;}
    .installButton{left:calc(12px + var(--safe-left));bottom:calc(var(--nav-height) + 88px + var(--safe-bottom));width:52px;height:52px;}
    .updateButton{left:calc(70px + var(--safe-left));bottom:calc(var(--nav-height) + 88px + var(--safe-bottom));width:52px;height:52px;}
    .onlineStatus{display:none;}
    .bottomNav{width:calc(100vw - 14px - var(--safe-left) - var(--safe-right));min-height:var(--nav-height);bottom:calc(7px + var(--safe-bottom));border-radius:22px;padding:7px;}
    .bottomNav button{font-size:17px;border-radius:15px}.bottomNav span{font-size:9px;}
    .sheetPanel{width:calc(100vw - 22px);max-height:calc(100dvh - 150px - var(--safe-top) - var(--safe-bottom));padding:16px;border-radius:24px;}
    .badgeGrid{grid-template-columns:1fr;}
    .toast{bottom:calc(var(--nav-height) + 86px + var(--safe-bottom));}
    .mapboxgl-ctrl-top-right{top:104px !important;right:10px !important;}
}

@media(max-height:680px) and (min-width:721px){
    .parcelCard{top:calc(112px + var(--safe-top));max-height:calc(100dvh - 210px);padding:14px;}
    .parcelMiniMap{display:none;}
    .buyLandButton{min-height:58px;}
    .statsHud{top:calc(54px + var(--safe-top));}
}

/* PWA helper UI generated by js/pwa.js */
.pwaStatusPill{
    position:fixed;
    left:calc(18px + var(--safe-left));
    top:calc(64px + var(--safe-top));
    z-index:1300;
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(5,13,26,.74);
    border:1px solid var(--border);
    backdrop-filter:blur(18px);
    font-size:12px;
    font-weight:900;
    box-shadow:var(--shadow);
}
.pwaStatusPill .pwaDot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);}
.pwaStatusPill.offline .pwaDot{background:var(--danger);box-shadow:0 0 10px var(--danger);}
.installAppButton,.updateAppButton{
    position:fixed;
    left:calc(18px + var(--safe-left));
    z-index:1300;
    border:1px solid var(--border);
    border-radius:999px;
    background:rgba(5,13,26,.86);
    color:white;
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
    padding:10px 14px;
    font-weight:900;
    cursor:pointer;
}
.installAppButton{bottom:calc(var(--nav-height) + 102px + var(--safe-bottom));}
.updateAppButton{bottom:calc(var(--nav-height) + 150px + var(--safe-bottom));}
.pwaToast{
    position:fixed;
    left:50%;
    bottom:calc(var(--nav-height) + 106px + var(--safe-bottom));
    transform:translateX(-50%) translateY(16px);
    z-index:5000;
    opacity:0;
    transition:.22s ease;
    max-width:min(480px, calc(100vw - 32px));
    padding:13px 16px;
    border-radius:999px;
    background:rgba(5,13,26,.92);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    font-weight:900;
    text-align:center;
}
.pwaToast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media(max-width:720px){.pwaStatusPill{display:none}.installAppButton,.updateAppButton{display:none}}


/* =====================================================
   PHASE 3.5 - DAILY SPIN + REWARDS
===================================================== */
.spinSheet{width:min(430px, calc(100vw - 36px));}
.spinStatusGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:16px 0 12px;
}
.spinStatusGrid div{
    padding:13px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:18px;
    background:rgba(255,255,255,.07);
}
.spinStatusGrid span{
    display:block;
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1.2px;
}
.spinStatusGrid strong{display:block;margin-top:4px;color:var(--gold);font-size:20px;}
.spinWheelWrap{
    position:relative;
    display:grid;
    place-items:center;
    margin:20px auto 10px;
    width:250px;
    max-width:70vw;
    aspect-ratio:1;
}
.spinPointer{
    position:absolute;
    top:-8px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    color:var(--gold);
    font-size:30px;
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.65));
}
.spinWheel{
    position:relative;
    width:100%;
    height:100%;
    border-radius:50%;
    overflow:hidden;
    border:7px solid rgba(255,255,255,.16);
    box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 24px 80px rgba(0,0,0,.45), inset 0 0 35px rgba(0,0,0,.35);
    background:
        conic-gradient(
            from -22.5deg,
            #00d084 0deg 45deg,
            #49ddff 45deg 90deg,
            #b071ff 90deg 135deg,
            #ffd166 135deg 180deg,
            #00d084 180deg 225deg,
            #49ddff 225deg 270deg,
            #ff55c8 270deg 315deg,
            #ffd166 315deg 360deg
        );
    transition:transform 4s cubic-bezier(.12,.78,.08,1);
}
.spinWheel::after{
    content:"";
    position:absolute;
    inset:34%;
    border-radius:50%;
    background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.35), rgba(5,13,26,.95));
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 10px 30px rgba(0,0,0,.42);
}
.spinWheel span{
    position:absolute;
    left:50%;
    top:50%;
    transform:rotate(var(--a)) translateY(-103px) rotate(calc(-1 * var(--a)));
    transform-origin:center;
    width:70px;
    margin-left:-35px;
    margin-top:-10px;
    text-align:center;
    font-size:10px;
    line-height:1.05;
    font-weight:1000;
    text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.spinWheel.spinning{filter:brightness(1.08) saturate(1.25);}
.prizeList{display:grid;gap:8px;margin-top:14px;}
.prizeRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-radius:15px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.06);
    color:var(--muted);
    font-size:12px;
    font-weight:800;
}
.prizeRow strong{color:white;}
.badge.spinBadge{border-color:rgba(255,209,102,.42);}

@media(max-width:720px){
    .bottomNav{grid-template-columns:repeat(9, minmax(0,1fr));gap:2px;}
    .bottomNav button{font-size:15px;}
    .bottomNav span{font-size:8px;}
    .spinWheelWrap{width:220px;}
    .spinWheel span{transform:rotate(var(--a)) translateY(-91px) rotate(calc(-1 * var(--a)));font-size:9px;}
}


/* =====================================================
   PHASE 3.6 - PASSPORT / LOCATION BADGES
===================================================== */
.passportHero{
    display:grid;
    grid-template-columns:1fr auto;
    gap:14px;
    align-items:center;
    margin-top:16px;
    padding:18px;
    border-radius:24px;
    background:linear-gradient(135deg, rgba(255,209,102,.16), rgba(73,221,255,.10));
    border:1px solid rgba(255,255,255,.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.passportHero strong{
    display:block;
    margin-top:4px;
    font-size:24px;
    color:white;
    line-height:1.05;
}
.passportHero small{
    display:block;
    margin-top:7px;
    color:var(--muted);
    font-weight:800;
}
.compactAction{
    width:auto !important;
    min-width:150px;
    padding-inline:18px;
    margin-top:0 !important;
    white-space:nowrap;
}
.passportStats{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin-top:12px;
}
.passportStats div{
    padding:12px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.06);
}
.passportStats span{
    display:block;
    color:var(--muted);
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1px;
}
.passportStats strong{
    display:block;
    margin-top:4px;
    color:var(--gold);
    font-size:22px;
}
.passportStampList{
    display:grid;
    gap:9px;
    margin-top:14px;
    max-height:210px;
    overflow:auto;
    padding-right:2px;
}
.passportStamp{
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:11px;
    align-items:center;
    padding:11px 12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    background:rgba(255,255,255,.065);
}
.passportStamp > span{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:rgba(255,209,102,.14);
    font-size:22px;
}
.passportStamp strong{display:block;color:white;font-size:14px;}
.passportStamp small{display:block;color:var(--muted);font-weight:800;margin-top:2px;}
.passportStamp em{font-style:normal;color:var(--green);font-weight:1000;font-size:12px;}
.passportStamp.type-country > span{background:rgba(0,208,132,.16)}
.passportStamp.type-region > span{background:rgba(73,221,255,.14)}
.emptyPassport{
    padding:15px;
    border-radius:18px;
    border:1px dashed rgba(255,255,255,.18);
    background:rgba(255,255,255,.045);
    color:var(--muted);
    font-weight:800;
    text-align:center;
}
.badge.passportBadge{border-color:rgba(73,221,255,.42);}
.badge.passportBadge.unlocked{background:linear-gradient(135deg, rgba(73,221,255,.18), rgba(255,209,102,.10));}

@media(max-width:720px){
    .passportHero{grid-template-columns:1fr;gap:12px;padding:14px;}
    .passportHero strong{font-size:20px;}
    .compactAction{width:100% !important;}
    .passportStats{grid-template-columns:repeat(2, minmax(0,1fr));}
    .passportStampList{max-height:180px;}
    .passportStamp{grid-template-columns:36px 1fr auto;padding:10px;}
    .passportStamp > span{width:36px;height:36px;font-size:19px;}
}


/* =====================================================
   PHASE 3.7 - GPS ANTI-CHEAT / LOCATION SAFETY
===================================================== */
.safetyHero{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:16px;
    align-items:center;
    margin-top:16px;
    padding:18px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.13);
    background:linear-gradient(135deg, rgba(0,208,132,.12), rgba(73,221,255,.10));
}
.trustGauge{
    width:110px;
    height:110px;
    border-radius:50%;
    display:grid;
    place-items:center;
    align-content:center;
    background:radial-gradient(circle, rgba(73,221,255,.22), rgba(0,208,132,.08));
    border:1px solid rgba(255,255,255,.18);
    box-shadow:inset 0 0 26px rgba(73,221,255,.18), 0 16px 32px rgba(0,0,0,.22);
}
.trustGauge span{font-size:34px;font-weight:1000;color:var(--green);line-height:1;}
.trustGauge small{display:block;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.9px;margin-top:5px;}
.safetyInfo strong{display:block;color:white;font-size:24px;line-height:1.08;}
.safetyInfo small{display:block;color:var(--muted);font-weight:800;margin-top:8px;line-height:1.45;}
.safetyStats{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px;
    margin-top:13px;
}
.safetyStats div{
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
}
.safetyStats span{display:block;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1px;}
.safetyStats strong{display:block;margin-top:4px;color:var(--blue);font-size:18px;}
.safetyActions{display:flex;gap:10px;align-items:center;margin-top:14px;}
.compactGhost{width:auto!important;margin-top:0!important;padding:0 18px;min-height:46px;white-space:nowrap;}
.safetyRules{
    margin-top:14px;
    padding:15px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:20px;
    background:rgba(255,255,255,.045);
}
.safetyRules h3{font-size:15px;margin-bottom:8px;}
.safetyRules ul{padding-left:18px;color:var(--muted);font-weight:750;line-height:1.45;font-size:13px;}
.safetyWarnings,.safetyHistoryList{display:grid;gap:9px;margin-top:13px;}
.safetyWarning,.safetyHistoryItem{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:10px;
    align-items:start;
    padding:12px;
    border-radius:17px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.055);
}
.safetyWarning{border-color:rgba(255,84,112,.32);background:rgba(255,84,112,.08);}
.safetyWarning span,.safetyHistoryItem span{font-size:20px;line-height:1;}
.safetyWarning strong,.safetyHistoryItem strong{display:block;color:white;font-size:13px;}
.safetyWarning small,.safetyHistoryItem small{display:block;color:var(--muted);font-weight:800;margin-top:3px;font-size:12px;}
@media(max-width:720px){
    .topChips{gap:5px;}
    .securityChip{display:none;}
    .safetyHero{grid-template-columns:1fr;padding:14px;}
    .trustGauge{width:96px;height:96px;margin:auto;}
    .safetyInfo{text-align:center;}
    .safetyStats{grid-template-columns:repeat(2, minmax(0,1fr));}
    .safetyActions{display:grid;grid-template-columns:1fr;}
    .compactGhost{width:100%!important;}
}


/* ==============================
   Phase 3.8 ad adapter panel
============================== */
.adProviderHero{
    margin-top:18px;
    padding:18px;
    border-radius:22px;
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:center;
    border:1px solid rgba(73,221,255,.28);
    background:linear-gradient(135deg, rgba(73,221,255,.15), rgba(0,208,132,.08));
}
.adProviderHero span,.adStatsGrid span{display:block;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1.2px;}
.adProviderHero strong{display:block;margin-top:5px;font-size:22px;color:var(--blue);}
.adProviderHero small{display:block;margin-top:6px;color:var(--muted);line-height:1.35;}
.adStatusBadge{padding:9px 12px;border-radius:999px;font-size:12px;font-weight:900;background:rgba(255,209,102,.15);color:var(--gold);border:1px solid rgba(255,209,102,.3);white-space:nowrap;}
.adStatusBadge.ready{background:rgba(0,208,132,.15);color:var(--green);border-color:rgba(0,208,132,.35);}
.adStatsGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px;}
.adStatsGrid div{padding:14px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.06);}
.adStatsGrid strong{display:block;margin-top:5px;color:var(--blue);font-size:16px;}
.termsBox{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.06);color:var(--muted);font-size:13px;line-height:1.4;}
.termsBox input{margin-top:3px;accent-color:var(--green);transform:scale(1.15);}
.integrationChecklist{margin-top:16px;padding:16px;border-radius:20px;border:1px solid var(--border);background:rgba(0,0,0,.18);}
.integrationChecklist h3{font-size:15px;margin-bottom:10px;}
.integrationChecklist ul{padding-left:19px;color:var(--muted);font-size:13px;line-height:1.55;}
.adSessionList{display:grid;gap:8px;margin-top:14px;}
.adSessionRow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.055);}
.adSessionRow strong{display:block;font-size:13px;}
.adSessionRow small{display:block;margin-top:4px;color:var(--muted);}
.adSessionRow span{font-weight:900;color:var(--green);}
@media(max-width:560px){.adStatsGrid{grid-template-columns:repeat(2,minmax(0,1fr));}.adProviderHero{align-items:flex-start;flex-direction:column;}.adStatusBadge{white-space:normal;}}


/* =====================================================
   PHASE 3.9 - CASHOUT PROVIDER SETUP
===================================================== */
.cashoutProviderHero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px;
    border-radius:22px;
    background:linear-gradient(135deg,rgba(73,221,255,.16),rgba(255,209,102,.10));
    border:1px solid rgba(255,255,255,.12);
    margin-bottom:14px;
}
.cashoutProviderHero span,.payoutSetupGrid label span{display:block;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.cashoutProviderHero strong{display:block;font-size:22px;color:var(--blue);}
.cashoutProviderHero small{display:block;color:var(--muted);line-height:1.45;margin-top:5px;}
.payoutLockBadge{min-width:86px;text-align:center;padding:10px 12px;border-radius:999px;background:rgba(255,84,112,.16);border:1px solid rgba(255,84,112,.36);color:#ff8aa0;font-weight:900;}
.payoutLockBadge.ready{background:rgba(0,208,132,.16);border-color:rgba(0,208,132,.45);color:var(--green);}
.payoutSetupGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0;}
.payoutSetupGrid label{display:block;padding:12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);}
.payoutSetupGrid input,.payoutSetupGrid select{width:100%;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(3,10,22,.78);color:white;padding:0 12px;outline:none;font-weight:700;}
.payoutSetupGrid input:focus,.payoutSetupGrid select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(73,221,255,.14);}
.payoutTermsBox{margin:12px 0;}
.cashoutActions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0;}
.cashoutChecklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;}
.cashoutCheck{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:15px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);}
.cashoutCheck>span{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-weight:900;flex:0 0 auto;}
.cashoutCheck.ok>span{background:rgba(0,208,132,.15);color:var(--green);}
.cashoutCheck.blocked>span{background:rgba(255,84,112,.15);color:#ff6f8a;}
.cashoutCheck strong{display:block;font-size:13px;color:white;}
.cashoutCheck small{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.35;}
.payoutRequestHistory{margin-top:15px;display:grid;gap:8px;}
.payoutRequestHistory h3{font-size:14px;margin:0 0 4px 0;color:white;}
.payoutRequestRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);}
.payoutRequestRow strong{display:block;color:var(--green);}
.payoutRequestRow small,.payoutRequestRow span{color:var(--muted);font-size:12px;}
.emptyText{color:var(--muted);font-size:13px;padding:10px 0;}
@media(max-width:720px){
    .cashoutProviderHero{align-items:flex-start;flex-direction:column;}
    .payoutSetupGrid,.cashoutChecklist{grid-template-columns:1fr;}
    .cashoutActions{display:grid;grid-template-columns:1fr;}
}


/* =====================================================
   PHASE 4.0 - FINAL ATLAS-STYLE UI PASS
   Cleaner core loop: rent, land bucks, buy land, boost,
   spin, passport, cashout. Extra tools live behind More.
===================================================== */
:root{
    --nav-height: 78px;
}

body::after{
    content:"";
    position:fixed;
    inset:auto 0 0 0;
    height:42%;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(0deg, rgba(4,10,20,.72), transparent);
}

.gameTopbar{
    max-width:1180px;
    left:50%;
    right:auto;
    width:calc(100vw - 28px - var(--safe-left) - var(--safe-right));
    transform:translateX(-50%);
}
.brandChip{
    background:linear-gradient(135deg, rgba(5,13,26,.88), rgba(7,28,48,.74));
}
.topChips .cloudChip{
    display:none;
}
.statsHud{
    width:min(720px, calc(100vw - 28px - var(--safe-left) - var(--safe-right)));
    grid-template-columns:1.35fr .9fr .75fr .7fr;
}
.statCard{
    border-radius:999px;
    padding:10px 13px;
    background:rgba(4,12,24,.72);
}
.statCard strong{font-weight:1000;}
.parcelCard{
    width:min(330px, calc(100vw - 36px));
    border-radius:30px;
    background:linear-gradient(180deg, rgba(5,15,28,.88), rgba(5,11,20,.78));
}
.parcelMiniMap{
    height:96px;
    border-radius:22px;
}
.primaryAction,.ghostAction{
    border-radius:999px;
}
.buyLandButton{
    left:50%;
    bottom:calc(var(--nav-height) + 54px + var(--safe-bottom));
    width:min(310px, calc(100vw - 34px));
    min-height:68px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.22);
    background:linear-gradient(135deg, rgba(0,208,132,.98), rgba(0,155,255,.95));
    box-shadow:0 24px 80px rgba(0,208,132,.34), inset 0 1px 0 rgba(255,255,255,.28);
}
.buyLandButton strong{font-size:20px;}
.buyLandButton small{font-size:12px;}
.buyLandButton::before{
    content:"";
    position:absolute;
    inset:5px;
    border-radius:inherit;
    border:1px solid rgba(255,255,255,.18);
    pointer-events:none;
}
.atlasStatusStrip{
    position:fixed;
    left:50%;
    bottom:calc(var(--nav-height) + 130px + var(--safe-bottom));
    transform:translateX(-50%);
    z-index:1000;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:8px;
    width:min(430px, calc(100vw - 32px));
    pointer-events:none;
}
.atlasStatusStrip div{
    min-width:0;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:9px 10px;
    text-align:center;
    background:rgba(5,13,26,.68);
    backdrop-filter:blur(18px);
    box-shadow:0 14px 38px rgba(0,0,0,.34);
}
.atlasStatusStrip span{
    display:block;
    color:rgba(255,255,255,.62);
    font-size:9px;
    font-weight:1000;
    text-transform:uppercase;
    letter-spacing:1px;
    white-space:nowrap;
}
.atlasStatusStrip strong{
    display:block;
    margin-top:3px;
    color:var(--blue);
    font-size:13px;
    font-weight:1000;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.atlasStatusStrip strong.ready{color:var(--green);}
.bottomNav.coreNav{
    width:min(720px, calc(100vw - 16px - var(--safe-left) - var(--safe-right)));
    grid-template-columns:repeat(10, minmax(0, 1fr));
    min-height:var(--nav-height);
    border-radius:999px;
    padding:8px;
    background:rgba(4,12,24,.86);
    border-color:rgba(255,255,255,.16);
}
.bottomNav.coreNav button{
    border-radius:999px;
}
.bottomNav.coreNav button.active{
    background:linear-gradient(135deg, rgba(0,208,132,.22), rgba(73,221,255,.15));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.moreGrid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
    margin-top:16px;
}
.moreGrid button,.moreGrid a{
    min-height:86px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    background:rgba(255,255,255,.06);
    color:white;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:4px;
    padding:14px;
    cursor:pointer;
    font-weight:900;
}
.moreGrid strong{font-size:16px;}
.moreGrid span{font-size:12px;color:var(--muted);}
.moreGrid button:hover,.moreGrid a:hover{
    transform:translateY(-2px);
    background:rgba(73,221,255,.11);
}
.mapboxgl-ctrl-top-right{top:calc(120px + var(--safe-top)) !important;}
.mapboxgl-ctrl-bottom-left{bottom:calc(var(--nav-height) + 16px + var(--safe-bottom)) !important;}

@media(min-width:980px){
    .bottomNav.coreNav{
        left:50%;
        bottom:calc(18px + var(--safe-bottom));
    }
    .atlasStatusStrip{
        bottom:calc(var(--nav-height) + 34px + var(--safe-bottom));
    }
    .buyLandButton{
        bottom:calc(var(--nav-height) + 104px + var(--safe-bottom));
    }
    .sheetPanel{
        bottom:calc(var(--nav-height) + 22px + var(--safe-bottom));
    }
}

@media(max-width:720px){
    .brandChip span{display:none;}
    .topChips{gap:6px;}
    .securityChip{display:none;}
    .lockChip{min-height:34px;padding:7px 10px;font-size:11px;}
    .statsHud{
        top:calc(52px + var(--safe-top));
        grid-template-columns:1.2fr .82fr .68fr .62fr;
        gap:6px;
        width:calc(100vw - 16px - var(--safe-left) - var(--safe-right));
    }
    .statCard{padding:8px 7px;border-radius:17px;}
    .statCard span{font-size:8px;letter-spacing:.75px;}
    .statCard strong{font-size:13px;}
    .parcelCard{
        left:calc(10px + var(--safe-left));
        right:calc(10px + var(--safe-right));
        bottom:calc(var(--nav-height) + 158px + var(--safe-bottom));
        top:auto;
        max-height:26dvh;
        padding:13px;
        border-radius:22px;
    }
    .parcelCardHeader{align-items:center;}
    .parcelStats{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;}
    .parcelStats div{padding:5px 0;}
    .parcelStats div:nth-child(2),.parcelStats div:nth-child(4){display:none;}
    .atlasStatusStrip{
        bottom:calc(var(--nav-height) + 88px + var(--safe-bottom));
        width:calc(100vw - 22px - var(--safe-left) - var(--safe-right));
        gap:6px;
    }
    .atlasStatusStrip div{padding:7px 6px;border-radius:15px;}
    .atlasStatusStrip span{font-size:8px;letter-spacing:.55px;}
    .atlasStatusStrip strong{font-size:11px;}
    .buyLandButton{
        bottom:calc(var(--nav-height) + 24px + var(--safe-bottom));
        width:min(250px, calc(100vw - 118px));
        min-height:58px;
    }
    .buyLandButton span{font-size:21px;}
    .buyLandButton strong{font-size:16px;}
    .roundButton.gpsButton{
        bottom:calc(var(--nav-height) + 27px + var(--safe-bottom));
    }
    .bottomNav.coreNav{
        display:flex;
        overflow-x:auto;
        justify-content:flex-start;
        gap:5px;
        border-radius:24px;
        padding:7px;
        scroll-snap-type:x mandatory;
    }
    .bottomNav.coreNav button{
        flex:0 0 64px;
        min-width:64px;
        scroll-snap-align:center;
    }
    .bottomNav.coreNav span{font-size:8px;}
    .sheetPanel{bottom:calc(var(--nav-height) + 12px + var(--safe-bottom));}
    .moreGrid{grid-template-columns:1fr 1fr;}
    .mapboxgl-ctrl-bottom-left{display:none;}
}

@media(max-height:720px) and (min-width:721px){
    .parcelCard{top:calc(112px + var(--safe-top));max-height:calc(100dvh - 230px);}
    .statsHud{top:calc(55px + var(--safe-top));}
    .atlasStatusStrip{display:none;}
    .buyLandButton{bottom:calc(var(--nav-height) + 32px + var(--safe-bottom));}
}


/* =====================================================
   PHASE 4.1 - PARCEL RARITY + MY LAND PORTFOLIO
===================================================== */
.oddsBox{
    margin:18px 0;
    padding:16px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
}
.oddsBox h3{margin:0 0 12px;color:white;font-size:17px;}
.rarityOddsList{display:grid;gap:10px;}
.rarityOddsRow{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;
    padding:12px;
    border-radius:16px;
    background:rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.09);
}
.rarityOddsRow .oddsIcon{font-size:24px;}
.rarityOddsRow strong{display:block;color:white;}
.rarityOddsRow small{display:block;color:rgba(255,255,255,.64);margin-top:3px;}
.rarityOddsRow b{color:white;font-size:18px;}
.portfolioHero{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
}
.portfolioHero>div,.rarityBreakItem{
    border-radius:18px;
    padding:14px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
}
.portfolioHero span,.rarityBreakItem small,.landTools span{display:block;color:rgba(255,255,255,.62);font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.portfolioHero strong{display:block;color:white;margin-top:6px;font-size:20px;}
.rarityBreakdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 16px;}
.rarityBreakItem{text-align:center;}
.rarityBreakItem span{font-size:26px;display:block;}
.rarityBreakItem strong{display:block;color:white;font-size:24px;margin:4px 0;}
.landTools{display:flex;gap:12px;align-items:end;justify-content:space-between;margin:12px 0;}
.landTools label{display:grid;gap:6px;min-width:190px;}
.landTools select{
    height:44px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:14px;
    padding:0 12px;
    color:white;
    background:rgba(0,0,0,.35);
}
.myLandList{display:grid;gap:10px;max-height:min(45vh,420px);overflow:auto;padding-right:4px;}
.landRow{
    width:100%;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    padding:12px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;
    background:rgba(255,255,255,.055);
    color:white;
    text-align:left;
    cursor:pointer;
    transition:.18s ease;
}
.landRow:hover{transform:translateY(-2px);background:rgba(255,255,255,.09);}
.landRarityIcon{font-size:28px;}
.landRow strong{display:block;color:white;}
.landRow small{display:block;color:rgba(255,255,255,.58);margin-top:3px;}
.landRow em{font-style:normal;color:var(--blue);font-weight:800;white-space:nowrap;}
.rarity-common{--rarity-color:#28c76f;}
.rarity-rare{--rarity-color:#49ddff;}
.rarity-epic{--rarity-color:#b071ff;}
.rarity-legendary{--rarity-color:#ffd166;}
.rarityOddsRow.rarity-common,.rarityBreakItem.rarity-common,.landRow.rarity-common{box-shadow:inset 4px 0 0 #28c76f;}
.rarityOddsRow.rarity-rare,.rarityBreakItem.rarity-rare,.landRow.rarity-rare{box-shadow:inset 4px 0 0 #49ddff;}
.rarityOddsRow.rarity-epic,.rarityBreakItem.rarity-epic,.landRow.rarity-epic{box-shadow:inset 4px 0 0 #b071ff;}
.rarityOddsRow.rarity-legendary,.rarityBreakItem.rarity-legendary,.landRow.rarity-legendary{box-shadow:inset 4px 0 0 #ffd166,0 0 24px rgba(255,209,102,.10);}
.revealCard{position:relative;overflow:hidden;}
.revealCard:before{
    content:"";
    position:absolute;
    inset:-40%;
    background:conic-gradient(from 90deg,transparent,rgba(255,255,255,.28),transparent);
    animation:raritySweep 1.8s ease infinite;
    opacity:.45;
}
.revealCard>*{position:relative;z-index:1;}
.revealCard.reveal-legendary{box-shadow:0 0 70px rgba(255,209,102,.42);}
.revealCard.reveal-epic{box-shadow:0 0 60px rgba(176,113,255,.35);}
.revealCard.reveal-rare{box-shadow:0 0 55px rgba(73,221,255,.30);}
@keyframes raritySweep{to{transform:rotate(360deg);}}
@media(max-width:760px){
    .portfolioHero,.rarityBreakdown{grid-template-columns:repeat(2,minmax(0,1fr));}
    .landTools{display:grid;}
    .landTools label{min-width:0;}
    .landRow{grid-template-columns:auto 1fr;}
    .landRow em{grid-column:2;}
}


/* =====================================================
   PHASE 4.2 - MY LAND PORTFOLIO
===================================================== */
.expandedPortfolio{grid-template-columns:repeat(4,minmax(0,1fr));}
.portfolioTools{
    display:grid;
    grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(180px,1.3fr) auto auto auto;
    align-items:end;
}
.landSearchLabel input{
    height:44px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:14px;
    padding:0 12px;
    color:white;
    outline:none;
    background:rgba(0,0,0,.35);
}
.landSearchLabel input::placeholder{color:rgba(255,255,255,.42);}
.rarityBreakItem{cursor:pointer;transition:.18s ease;}
.rarityBreakItem:hover{transform:translateY(-2px);background:rgba(255,255,255,.10);}
.portfolioRow small + small{margin-top:2px;color:rgba(255,255,255,.48);}
.portfolioRow em{font-size:13px;}
@media(max-width:980px){
    .expandedPortfolio{grid-template-columns:repeat(2,minmax(0,1fr));}
    .portfolioTools{grid-template-columns:1fr 1fr;}
    .landSearchLabel{grid-column:1/-1;}
}
@media(max-width:560px){
    .portfolioTools{grid-template-columns:1fr;}
    .expandedPortfolio{grid-template-columns:1fr 1fr;}
    .portfolioRow{grid-template-columns:auto 1fr;}
    .portfolioRow em{grid-column:2;justify-self:start;}
}


/* =====================================================
   PHASE 4.3 - BOOST SYSTEM POLISH
===================================================== */
.polishedBoostHero{position:relative;overflow:hidden;}
.polishedBoostHero::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 90deg, transparent, rgba(255,209,102,.22), transparent 32%);animation:boostSweep 4s linear infinite;pointer-events:none;}
.polishedBoostHero > *{position:relative;z-index:1;}
.boostRing{width:108px;height:108px;border-radius:50%;margin:14px auto 0;display:grid;place-items:center;background:conic-gradient(var(--gold) var(--boost-percent,0%), rgba(255,255,255,.10) 0);box-shadow:0 0 35px rgba(255,209,102,.20), inset 0 0 20px rgba(0,0,0,.35);}
.boostRing i{display:block;width:78px;height:78px;border-radius:50%;background:rgba(6,20,40,.94);border:1px solid rgba(255,255,255,.12);}
.boostStatsGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0;}
.boostStatsGrid div{padding:13px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);}
.boostStatsGrid span{display:block;color:var(--muted);font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:1px;}
.boostStatsGrid strong{display:block;margin-top:5px;color:var(--gold);font-size:16px;}
@keyframes boostSweep{to{transform:rotate(360deg);}}
@media(max-width:680px){.boostStatsGrid{grid-template-columns:repeat(2,minmax(0,1fr));}.boostRing{width:92px;height:92px}.boostRing i{width:66px;height:66px}}


/* =====================================================
   PHASE 4.4 - Cashout Rules Finalisation
===================================================== */
.cashoutRulesGrid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin:14px 0;
}
.ruleCard{
    padding:13px;
    border-radius:17px;
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.ruleCard span{display:block;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.ruleCard strong{display:block;color:var(--blue);font-size:18px;line-height:1.1;}
.ruleCard small{display:block;color:var(--muted);font-size:11px;line-height:1.35;margin-top:7px;}
.cashoutPolicyBox{
    margin:14px 0;
    padding:15px;
    border-radius:18px;
    background:rgba(255,209,102,.08);
    border:1px solid rgba(255,209,102,.22);
}
.cashoutPolicyBox h3{margin:0 0 8px 0;color:var(--gold);font-size:15px;}
.cashoutPolicyBox ul{margin:0;padding-left:18px;color:rgba(255,255,255,.78);font-size:13px;line-height:1.55;}
.cashoutPolicyBox li{margin:4px 0;}
.payoutRequestRow.review strong{color:var(--gold);}
.payoutRequestRow.paid strong{color:var(--green);}
.payoutRequestRow.rejected strong{color:#ff8aa0;}
@media(max-width:820px){.cashoutRulesGrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.cashoutRulesGrid{grid-template-columns:1fr;}}


/* =====================================================
   PHASE 4.5 - MULTIPLAYER MAP POLISH
===================================================== */
.rivalHero{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
    padding:16px;
    border-radius:20px;
    background:linear-gradient(135deg,rgba(73,221,255,.12),rgba(176,113,255,.10));
    border:1px solid rgba(255,255,255,.10);
    margin-bottom:14px;
}
.rivalHero span,.rivalHero small{display:block;color:rgba(255,255,255,.68);font-size:12px;}
.rivalHero strong{display:block;color:var(--blue);font-size:30px;line-height:1.1;margin:4px 0;}
.rivalToggle{display:flex;align-items:center;gap:10px;min-width:210px;justify-content:flex-end;font-weight:800;color:white;}
.rivalToggle input{width:22px;height:22px;accent-color:#49ddff;}
.rivalLegend{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin:12px 0 16px;}
.rivalLegendItem{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);}
.rivalLegendSwatch{width:16px;height:16px;border-radius:50%;box-shadow:0 0 20px currentColor;}
.rivalLegendItem strong{display:block;font-size:13px;color:white;}
.rivalLegendItem span{display:block;font-size:11px;color:rgba(255,255,255,.58);}
.rivalControlList{display:grid;gap:10px;margin:12px 0;}
.rivalRow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);}
.rivalDot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 18px currentColor;}
.rivalRow strong{display:block;color:white;font-size:14px;}
.rivalRow span{display:block;color:rgba(255,255,255,.58);font-size:12px;}
.rivalRow button{border:0;border-radius:999px;padding:9px 12px;font-weight:900;color:#061428;background:#49ddff;cursor:pointer;}
.rarityPill.rarity-rival{background:rgba(255,84,112,.14);border-color:rgba(255,84,112,.35);color:#ff9bad;}
.parcelCard.rivalSelected{border-color:rgba(255,84,112,.32);box-shadow:0 18px 55px rgba(255,84,112,.12),0 12px 40px rgba(0,0,0,.42);}
@media(max-width:720px){.rivalHero{align-items:flex-start;flex-direction:column}.rivalToggle{justify-content:flex-start;min-width:0}.rivalRow{grid-template-columns:auto 1fr}.rivalRow button{grid-column:1/-1}}


/* =====================================================
   PHASE 4.7 - TUTORIAL + STARTER PROGRESSION
===================================================== */
.tutorialOverlay{
    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:radial-gradient(circle at 50% 20%, rgba(73,221,255,.22), rgba(0,0,0,.78) 55%, rgba(0,0,0,.92));
    backdrop-filter:blur(10px);
}
.tutorialOverlay[hidden]{display:none!important}
.tutorialCard{
    width:min(460px, 94vw);
    border-radius:28px;
    padding:24px;
    color:#fff;
    background:linear-gradient(180deg, rgba(12,27,49,.96), rgba(5,11,25,.96));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 24px 90px rgba(0,0,0,.55), 0 0 55px rgba(73,221,255,.18);
    text-align:center;
    animation:tutorialPop .28s ease;
}
.tutorialTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;text-align:left}
.tutorialTop button{width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer}
.tutorialIcon{width:78px;height:78px;margin:8px auto 14px;border-radius:24px;display:grid;place-items:center;font-size:42px;background:linear-gradient(135deg, rgba(0,208,132,.28), rgba(73,221,255,.22));border:1px solid rgba(255,255,255,.16);box-shadow:0 0 38px rgba(0,208,132,.22)}
.tutorialCard h2{font-size:26px;margin:0 0 10px}
.tutorialCard p{margin:0 auto 18px;line-height:1.55;color:rgba(255,255,255,.78);max-width:36em}
.tutorialProgress{display:flex;gap:7px;justify-content:center;margin:18px 0 20px}
.tutorialProgress i{width:26px;height:6px;border-radius:999px;background:rgba(255,255,255,.16);transition:.2s}
.tutorialProgress i.done{background:rgba(0,208,132,.65)}
.tutorialProgress i.active{width:42px;background:#49ddff;box-shadow:0 0 16px rgba(73,221,255,.55)}
.tutorialActions{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}
.tutorialActions button{margin:0!important}
body[data-tutorial-focus="gps"] .gpsButton,
body[data-tutorial-focus="buy"] .buyLandButton,
body[data-tutorial-focus="boost"] .bottomNav [data-panel="boost"],
body[data-tutorial-focus="myland"] .bottomNav [data-panel="myland"]{
    animation:tutorialPulse 1.2s infinite;
    box-shadow:0 0 0 4px rgba(73,221,255,.24), 0 0 34px rgba(73,221,255,.6)!important;
}
.milestonePopup{
    position:fixed;
    top:calc(env(safe-area-inset-top) + 94px);
    left:50%;
    transform:translateX(-50%);
    z-index:5200;
    width:min(440px, 92vw);
}
.milestonePopup[hidden]{display:none!important}
.milestoneCard{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:14px;
    align-items:center;
    padding:16px;
    border-radius:22px;
    color:#fff;
    background:linear-gradient(135deg, rgba(0,208,132,.92), rgba(73,221,255,.88));
    box-shadow:0 20px 60px rgba(0,0,0,.42), 0 0 42px rgba(73,221,255,.32);
    animation:milestoneSlide .35s ease;
}
.milestoneCard > span{font-size:34px}
.milestoneCard strong{display:block;font-size:16px;color:#061428}
.milestoneCard p{margin:3px 0 0;color:rgba(6,20,40,.78);font-size:13px;line-height:1.35}
.milestoneCard button{width:30px;height:30px;border:none;border-radius:999px;background:rgba(6,20,40,.16);color:#061428;font-weight:900;cursor:pointer}
.emptyState{display:grid;gap:10px;justify-items:start;padding:18px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff}
.emptyState strong{font-size:17px}
.emptyState p{margin:0;color:rgba(255,255,255,.72);line-height:1.45}
@keyframes tutorialPop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes tutorialPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.04)}}
@keyframes milestoneSlide{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:640px){.tutorialCard{padding:20px;border-radius:24px}.tutorialActions{grid-template-columns:1fr}.milestonePopup{top:calc(env(safe-area-inset-top) + 76px)}}


/* =====================================================
   PHASE 4.7 - DAILY LOOP + RETENTION
===================================================== */
.levelHud{
    position:fixed;
    top:112px;
    left:50%;
    transform:translateX(-50%);
    width:min(520px, calc(100vw - 28px));
    z-index:20;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:999px;
    background:rgba(6,16,31,.72);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(16px);
    box-shadow:0 12px 30px rgba(0,0,0,.22);
    color:#fff;
}
.levelBadge{
    padding:7px 12px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(255,209,102,.25), rgba(73,221,255,.18));
    border:1px solid rgba(255,209,102,.28);
    font-weight:900;
    font-size:12px;
    white-space:nowrap;
}
.xpTrack{
    height:9px;
    border-radius:99px;
    overflow:hidden;
    background:rgba(255,255,255,.10);
}
.xpTrack i{
    display:block;
    width:0%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#00d084,#49ddff,#ffd166);
    transition:width .35s ease;
}
.levelHud small{ color:rgba(255,255,255,.72); font-size:11px; white-space:nowrap; }
.dailyHero,
.rentClaimCard{
    display:flex;
    gap:14px;
    align-items:center;
    justify-content:space-between;
    padding:16px;
    border-radius:22px;
    background:linear-gradient(135deg, rgba(0,208,132,.16), rgba(73,221,255,.10));
    border:1px solid rgba(255,255,255,.10);
    margin-bottom:14px;
}
.dailyHero strong,
.rentClaimCard strong{ display:block; font-size:18px; color:white; }
.dailyHero span{ color:rgba(255,255,255,.68); font-size:13px; }
.dailyTaskList{
    display:grid;
    gap:10px;
    margin:14px 0;
}
.dailyTask{
    display:grid;
    grid-template-columns:42px 1fr 28px;
    gap:12px;
    align-items:center;
    padding:13px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
}
.dailyTask > span{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:rgba(255,255,255,.08);
}
.dailyTask strong{ display:block; color:white; font-size:14px; }
.dailyTask small{ color:rgba(255,255,255,.58); font-size:12px; }
.dailyTask b{ color:rgba(255,255,255,.45); font-size:20px; }
.dailyTask.done{
    border-color:rgba(0,208,132,.45);
    background:rgba(0,208,132,.11);
}
.dailyTask.done b{ color:#00d084; }
.loginRewardBlock{ margin-top:16px; }
.dailyRewardCalendar{
    display:grid;
    grid-template-columns:repeat(7,minmax(90px,1fr));
    gap:10px;
    overflow-x:auto;
    padding-bottom:4px;
}
.calendarReward{
    min-width:92px;
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    text-align:center;
}
.calendarReward span{ display:block; font-size:24px; margin-bottom:6px; }
.calendarReward strong{ display:block; color:white; font-size:13px; }
.calendarReward small{ display:block; color:rgba(255,255,255,.62); font-size:11px; line-height:1.25; margin-top:4px; }
.calendarReward.today{
    border-color:rgba(255,209,102,.55);
    box-shadow:0 0 22px rgba(255,209,102,.12);
    background:rgba(255,209,102,.12);
}
@media(max-width:760px){
    .levelHud{ top:104px; grid-template-columns:auto 1fr; }
    .levelHud small{ grid-column:1/-1; text-align:center; }
    .dailyHero,.rentClaimCard{ align-items:stretch; flex-direction:column; }
    .dailyRewardCalendar{ grid-template-columns:repeat(7,96px); }
}
@media(max-height:700px){ .levelHud{ display:none; } }


/* =====================================================
   PHASE 4.8 - PLACE OWNERSHIP / TOWN CONTROL
===================================================== */
.placeChip{
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 13px;
    border-radius:999px;
    color:rgba(255,255,255,.86);
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(18px);
    font-weight:800;
    font-size:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.placeChip.ready{color:#ffd166;border-color:rgba(255,209,102,.35);background:rgba(255,209,102,.12);}
.placeHero{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:16px;
    align-items:center;
    padding:18px;
    border-radius:24px;
    background:linear-gradient(135deg,rgba(255,209,102,.18),rgba(73,221,255,.12));
    border:1px solid rgba(255,255,255,.12);
    margin-bottom:14px;
}
.placeHero strong{display:block;font-size:28px;line-height:1.05;margin:4px 0;color:#fff;}
.placeHero small{display:block;color:var(--muted);line-height:1.4;}
.placeTitleBadge{
    padding:13px 16px;
    border-radius:18px;
    background:rgba(0,0,0,.24);
    border:1px solid rgba(255,255,255,.16);
    font-weight:900;
    color:#49ddff;
    white-space:nowrap;
    box-shadow:inset 0 0 20px rgba(255,255,255,.04);
}
.placeTitleBadge.mayor{color:#ffd166;border-color:rgba(255,209,102,.35);box-shadow:0 0 25px rgba(255,209,102,.16), inset 0 0 20px rgba(255,209,102,.06);}
.placeStatsGrid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px;
}
.placeStatsGrid div{
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
}
.placeStatsGrid span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px;}
.placeStatsGrid strong{font-size:16px;color:#fff;}
.placeProgressBlock{
    padding:15px;
    border-radius:20px;
    background:rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.10);
    margin-bottom:14px;
}
.placeProgressTop{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px;color:var(--muted);font-size:13px;}
.placeProgressTop strong{color:#ffd166;}
.placeMeter span{background:linear-gradient(90deg,#00d084,#49ddff,#ffd166);}
.placeActions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.placeSplitGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.placeSplitGrid h3{font-size:15px;margin:0 0 10px;color:#fff;}
.placeLeaderboardList,.placeOwnedList{display:grid;gap:9px;}
.placeRankRow,.placeParcelRow{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:10px;
    align-items:center;
    padding:12px;
    border-radius:16px;
    background:rgba(255,255,255,.065);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
}
.placeRankRow.me{border-color:rgba(0,208,132,.38);background:rgba(0,208,132,.10);}
.placeRankRow span{font-weight:900;color:#49ddff;}
.placeRankRow strong,.placeParcelRow strong{display:block;font-size:14px;}
.placeRankRow small,.placeParcelRow small{display:block;color:var(--muted);font-size:12px;margin-top:3px;}
.placeRankRow b{font-size:13px;color:#ffd166;}
.placeParcelRow{border:none;text-align:left;cursor:pointer;grid-template-columns:auto 1fr;background:rgba(255,255,255,.06);}
.placeParcelRow:hover{transform:translateY(-1px);border-color:rgba(73,221,255,.30);}
.placeParcelRow.rarity-common{box-shadow:inset 3px 0 #28c76f;}
.placeParcelRow.rarity-rare{box-shadow:inset 3px 0 #49ddff;}
.placeParcelRow.rarity-epic{box-shadow:inset 3px 0 #b071ff;}
.placeParcelRow.rarity-legendary{box-shadow:inset 3px 0 #ffd166;}
@media(max-width:760px){
    .placeHero{grid-template-columns:1fr;padding:14px;}
    .placeHero strong{font-size:22px;}
    .placeTitleBadge{width:max-content;}
    .placeStatsGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .placeSplitGrid{grid-template-columns:1fr;}
    .placeProgressTop{flex-direction:column;align-items:flex-start;}
    .placeChip{display:none;}
}


/* =====================================================
   PHASE 4.9 - MAP GRAPHICS FINAL POLISH
===================================================== */
body.mapFxNoCinematic .worldShade,
body.mapFxNoCinematic .scanGlow{opacity:0;}
body.mapFxCinematic .worldShade{opacity:1;}
body.mapFxCinematic .scanGlow{opacity:.28;}
body.mapFxCompact .mapboxgl-ctrl-top-right{transform:scale(.9);transform-origin:top right;}
body.mapFxCompact .mapboxgl-ctrl-bottom-left{transform:scale(.9);transform-origin:bottom left;}
body[data-map-theme="dark"] .worldShade{background:radial-gradient(circle at 50% 50%, transparent 22%, rgba(0,0,0,.62)),linear-gradient(180deg,rgba(0,0,0,.52),transparent 34%,rgba(0,0,0,.68));}
body[data-map-theme="street"] .scanGlow{opacity:.12;}
body.mapFxNoGlow .parcelCard,
body.mapFxNoGlow .buyLandButton{box-shadow:var(--shadow);}

/* A small floating optical reticle around the parcel card minimap, not the real map. */
.parcelMiniMap::after{
    content:"";
    position:absolute;
    inset:11px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 0 calc(14px * var(--grid-intensity, 1)) rgba(73,221,255,.25);
    pointer-events:none;
}
.parcelCard:has(.rarity-legendary), .rarityReveal .revealCard{
    animation:legendarySoftPulse 2.8s ease-in-out infinite;
}
@keyframes legendarySoftPulse{
    0%,100%{box-shadow:var(--shadow),0 0 0 rgba(255,209,102,0);}
    50%{box-shadow:var(--shadow),0 0 34px rgba(255,209,102,.24);}
}

.visualHero{
    display:grid;
    grid-template-columns:1fr 128px;
    gap:16px;
    align-items:center;
    padding:18px;
    border-radius:24px;
    background:linear-gradient(135deg,rgba(73,221,255,.16),rgba(255,209,102,.12));
    border:1px solid rgba(255,255,255,.13);
    margin-bottom:14px;
}
.visualHero strong{display:block;font-size:26px;margin:4px 0;color:#fff;}
.visualHero small{display:block;color:var(--muted);line-height:1.45;}
.visualPreview{
    height:96px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.14);
    background:
        linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
        radial-gradient(circle at 60% 40%,rgba(0,208,132,.44),transparent 28%),
        radial-gradient(circle at 32% 72%,rgba(255,209,102,.38),transparent 24%),
        rgba(0,0,0,.25);
    background-size:24px 24px,24px 24px,100% 100%,100% 100%,100% 100%;
    position:relative;
    overflow:hidden;
    box-shadow:inset 0 0 30px rgba(0,0,0,.24),0 0 30px rgba(73,221,255,.10);
}
.visualPreview i{position:absolute;width:18px;height:18px;border-radius:6px;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 20px currentColor;}
.visualPreview i:nth-child(1){left:24px;top:22px;color:#28c76f;background:rgba(40,199,111,.34);}
.visualPreview i:nth-child(2){right:28px;top:18px;color:#49ddff;background:rgba(73,221,255,.34);}
.visualPreview i:nth-child(3){left:52px;bottom:18px;color:#b071ff;background:rgba(176,113,255,.32);}
.visualPreview i:nth-child(4){right:48px;bottom:20px;color:#ffd166;background:rgba(255,209,102,.34);}
.visualModeGrid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px;
}
.visualModeGrid button{
    border:none;
    text-align:left;
    border-radius:18px;
    padding:14px;
    cursor:pointer;
    color:white;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
    transition:.2s ease;
}
.visualModeGrid button strong{display:block;font-size:14px;margin-bottom:5px;}
.visualModeGrid button span{display:block;color:var(--muted);font-size:12px;line-height:1.35;}
.visualModeGrid button:hover,.visualModeGrid button.active{
    transform:translateY(-1px);
    border-color:rgba(73,221,255,.48);
    box-shadow:0 0 24px rgba(73,221,255,.13);
    background:rgba(73,221,255,.11);
}
.visualSettingsGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
}
.rangeControl,.toggleRow{
    border-radius:18px;
    background:rgba(255,255,255,.065);
    border:1px solid rgba(255,255,255,.10);
    padding:14px;
}
.rangeControl span{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--muted);font-size:13px;}
.rangeControl b{color:#49ddff;}
.rangeControl input{width:100%;accent-color:#49ddff;}
.toggleRow{display:flex;align-items:center;gap:11px;color:#fff;font-size:13px;line-height:1.35;}
.toggleRow input{width:18px;height:18px;accent-color:#00d084;}
.visualLegend{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px;
}
.visualLegend div{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border-radius:16px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.09);
}
.visualLegend strong{display:block;font-size:13px;}
.visualLegend small{display:block;color:var(--muted);font-size:11px;margin-top:2px;}
.legendSwatch{width:14px;height:28px;border-radius:999px;box-shadow:0 0 18px currentColor;}
.legendSwatch.common{color:#28c76f;background:#28c76f;}
.legendSwatch.rare{color:#49ddff;background:#49ddff;}
.legendSwatch.epic{color:#b071ff;background:#b071ff;}
.legendSwatch.legendary{color:#ffd166;background:#ffd166;}

@media(max-width:760px){
    .visualHero{grid-template-columns:1fr;}
    .visualPreview{height:78px;}
    .visualModeGrid,.visualSettingsGrid,.visualLegend{grid-template-columns:1fr;}
}

/* =====================================================
   PHASE 6.4 - MOBILE SELECTED LAND PANEL FIX
   Keeps the Selected Land card from covering the BUY LAND button
   and removes duplicate mobile purchase controls.
===================================================== */
@media(max-width:720px){
    .parcelCard{
        top:calc(116px + var(--safe-top)) !important;
        bottom:auto !important;
        left:calc(10px + var(--safe-left)) !important;
        right:calc(10px + var(--safe-right)) !important;
        width:auto !important;
        max-height:178px !important;
        padding:12px 14px !important;
        border-radius:22px !important;
        overflow:hidden !important;
    }

    .parcelCardHeader{
        align-items:center !important;
        gap:10px !important;
        margin-bottom:8px !important;
    }

    .parcelCard h1{
        font-size:18px !important;
        line-height:1.05 !important;
        max-width:calc(100vw - 150px) !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .rarityPill{
        font-size:11px !important;
        padding:6px 10px !important;
    }

    .parcelMiniMap,
    #goToMyLand,
    #buySelectedParcel{
        display:none !important;
    }

    .parcelStats{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        column-gap:12px !important;
        row-gap:2px !important;
    }

    .parcelStats div{
        min-width:0 !important;
        padding:5px 0 !important;
    }

    .parcelStats dt,
    .parcelStats dd{
        font-size:12px !important;
    }

    .parcelStats dd{
        max-width:58% !important;
    }

    .parcelStats div:nth-child(2),
    .parcelStats div:nth-child(4){
        display:none !important;
    }

    .atlasStatusStrip{
        bottom:calc(var(--nav-height) + 84px + var(--safe-bottom)) !important;
        z-index:1120 !important;
    }

    .buyLandButton{
        bottom:calc(var(--nav-height) + 22px + var(--safe-bottom)) !important;
        z-index:1130 !important;
    }
}

@media(max-width:380px){
    .parcelCard{
        max-height:158px !important;
        padding:10px 12px !important;
    }
    .parcelStats dt,
    .parcelStats dd{
        font-size:11px !important;
    }
    .parcelCard h1{
        font-size:17px !important;
    }
}


/* =====================================================
   PHASE 6.5 - LAND POPUP + CLEAN SPIN WHEEL FIX
   Selected Land is now a closeable popup, not a permanent map blocker.
===================================================== */
.parcelCard[hidden]{display:none!important;}
.parcelCardActions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.miniClose{
    width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.10);color:white;font-size:22px;font-weight:900;line-height:1;
    display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.miniClose:active{transform:scale(.94)}
.spinSheet{
    max-height:calc(100dvh - 126px - var(--safe-top) - var(--safe-bottom));
    overflow:auto;
}
.spinWheelWrap{margin:14px auto 12px;}
.spinWheel{
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.24) 0 10%, transparent 11%),
        conic-gradient(
            from -22.5deg,
            #00d084 0deg 45deg,
            #49ddff 45deg 90deg,
            #b071ff 90deg 135deg,
            #ffd166 135deg 180deg,
            #00d084 180deg 225deg,
            #49ddff 225deg 270deg,
            #ff55c8 270deg 315deg,
            #ffd166 315deg 360deg
        ) !important;
}
.spinWheel span{display:none!important;}
.spinWheel::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.23) 50%, transparent calc(50% + 1px)),
        linear-gradient(0deg, transparent calc(50% - 1px), rgba(255,255,255,.23) 50%, transparent calc(50% + 1px));
    opacity:.55;
}
.spinPrizeLegend{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px;margin:10px 0 12px;}
.spinPrizeLegend div{padding:9px 10px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);font-size:12px;font-weight:900;color:#dff8ff;}
.spinPrizeLegend span{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:-1px;}

@media(max-width:720px){
    .parcelCard{
        top:calc(132px + var(--safe-top)) !important;
        bottom:auto !important;
        left:calc(12px + var(--safe-left)) !important;
        right:calc(12px + var(--safe-right)) !important;
        width:auto !important;
        max-height:216px !important;
        padding:13px 14px !important;
        border-radius:22px !important;
        overflow:auto !important;
        z-index:1160!important;
    }
    .parcelCardHeader{align-items:center!important;}
    .parcelCardActions{gap:7px;}
    .miniClose{width:32px;height:32px;font-size:21px;}
    .parcelCard h1{font-size:21px!important;max-width:calc(100vw - 170px)!important;}
    .rarityPill{font-size:12px!important;}
    .parcelStats{grid-template-columns:1fr 1fr!important;gap:0 10px!important;}
    .parcelStats div:nth-child(2), .parcelStats div:nth-child(4){display:none!important;}
    .parcelMiniMap,#goToMyLand,#buySelectedParcel{display:none!important;}
    .spinSheet{
        width:calc(100vw - 28px)!important;
        max-height:calc(100dvh - 122px - var(--safe-top) - var(--safe-bottom))!important;
        top:calc(76px + var(--safe-top))!important;
        bottom:auto!important;
        padding:18px 16px!important;
        border-radius:24px!important;
    }
    .spinSheet .sheetHeader h2{font-size:30px!important;}
    .spinStatusGrid{grid-template-columns:1fr 1fr;gap:10px;margin:12px 0;}
    .spinStatusGrid div{padding:12px;}
    .spinWheelWrap{width:min(245px,64vw)!important;margin:12px auto 12px!important;}
    .spinPointer{font-size:28px;top:-10px;}
    #dailySpinButton{height:58px!important;margin-top:8px;}
    .spinSheet .sheetNote{font-size:14px;line-height:1.35;margin:12px 0;}
    .prizeList{max-height:160px;overflow:auto;padding-bottom:6px;}
    .prizeRow{padding:9px 10px;font-size:12px;}
}
@media(max-width:380px){
    .spinWheelWrap{width:min(215px,60vw)!important;}
    .spinSheet .sheetHeader h2{font-size:26px!important;}
    .parcelCard h1{font-size:19px!important;}
}

/* Phase 6.6 — live GPS auto-follow polish */
.gpsButton.gpsTracking{
  box-shadow:0 0 0 3px rgba(0,255,180,.14), 0 0 26px rgba(0,255,180,.28);
  border-color:rgba(0,255,180,.55);
}
.gpsButton.gpsTracking::after{
  content:"";
  position:absolute;
  right:9px;
  top:9px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#00ff9d;
  box-shadow:0 0 12px rgba(0,255,157,.9);
}

/* =====================================================
   PHASE 6.7 - SHOP + UK PASSPORT BADGES
===================================================== */
.shopSheet{
    max-width:760px;
}
.shopHeader p{
    color:var(--muted);
    font-weight:800;
    margin-top:4px;
}
.shopInfoCard{
    margin:12px 0 14px;
    padding:16px;
    border-radius:20px;
    background:linear-gradient(135deg, rgba(0,208,132,.16), rgba(73,221,255,.10));
    border:1px solid rgba(73,221,255,.24);
}
.shopInfoCard strong{
    display:block;
    color:white;
    font-size:18px;
    font-weight:1000;
}
.shopInfoCard span{color:var(--green)}
.shopInfoCard small{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-weight:800;
    line-height:1.35;
}
.shopSectionTitle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:16px 0 10px;
    padding:10px 12px;
    border-radius:15px;
    color:white;
    font-weight:1000;
    text-transform:uppercase;
    letter-spacing:.8px;
    border:1px solid rgba(255,255,255,.16);
}
.shopSectionTitle span{font-size:14px;}
.shopSectionTitle small{font-size:10px;color:rgba(255,255,255,.75);}
.shopSectionTitle.green{background:linear-gradient(135deg, #138d32, #24c05f);}
.shopSectionTitle.blue{background:linear-gradient(135deg, #1f63c8, #49ddff);}
.shopSectionTitle.legendary{background:linear-gradient(135deg, #f09a00, #ffbf35);}
.shopNote{
    color:var(--muted);
    font-size:13px;
    font-weight:800;
    margin:-2px 0 10px;
    line-height:1.35;
}
.shopPackGrid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px;
}
.shopPack,.passportShopCard,.legendaryUpgradeCard{
    appearance:none;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    color:white;
    cursor:pointer;
    transition:.18s ease;
    box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.shopPack:hover,.passportShopCard:hover,.legendaryUpgradeCard:hover{
    transform:translateY(-2px);
    border-color:rgba(73,221,255,.35);
}
.shopPack{
    min-height:154px;
    border-radius:18px;
    padding:14px 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(180deg, rgba(0,208,132,.22), rgba(7,24,34,.88));
}
.packIcon{
    font-size:32px;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.shopPack strong{font-size:20px;font-weight:1000;margin-top:8px;color:white;}
.shopPack small{font-size:11px;font-weight:900;color:rgba(255,255,255,.72);margin-top:2px;}
.shopPack em{
    font-style:normal;
    margin-top:10px;
    color:#061428;
    background:linear-gradient(135deg, #ffffff, #d7fff2);
    border-radius:999px;
    padding:7px 12px;
    font-size:16px;
    font-weight:1000;
}
.passportShopGrid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:10px;
    max-height:280px;
    overflow:auto;
    padding-right:2px;
}
.passportShopCard{
    min-height:142px;
    border-radius:18px;
    padding:12px;
    text-align:left;
    display:grid;
    gap:4px;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(61,33,18,.58));
}
.passportShopCard.nearby{
    border-color:rgba(0,208,132,.45);
    background:linear-gradient(180deg, rgba(0,208,132,.14), rgba(5,20,22,.72));
}
.passportShopCard.owned,
.legendaryUpgradeCard.owned{
    opacity:.64;
    cursor:not-allowed;
}
.passportShopIcon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(255,255,255,.10);
    font-size:24px;
}
.passportShopCard strong{font-size:16px;font-weight:1000;color:white;line-height:1.1;}
.passportShopCard small{font-size:11px;font-weight:850;color:var(--muted);}
.passportShopCard em{font-style:normal;font-size:18px;color:#ffd166;font-weight:1000;}
.passportShopCard i{font-style:normal;font-size:11px;color:var(--green);font-weight:1000;}
.legendaryUpgradeGrid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:10px;
}
.legendaryUpgradeCard{
    min-height:168px;
    border-radius:18px;
    padding:14px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:linear-gradient(180deg, rgba(255,209,102,.18), rgba(51,25,0,.78));
    border-color:rgba(255,209,102,.32);
}
.legendaryUpgradeCard span{font-size:42px;}
.legendaryUpgradeCard strong{font-weight:1000;color:white;}
.legendaryUpgradeCard small{color:var(--muted);font-size:11px;font-weight:800;line-height:1.25;}
.legendaryUpgradeCard em{font-style:normal;color:#061428;background:#ffd166;border-radius:999px;padding:6px 12px;font-weight:1000;}

@media(max-width:720px){
    .shopSheet{padding:14px!important;}
    .shopPackGrid{grid-template-columns:repeat(2, minmax(0,1fr));}
    .shopPack{min-height:128px;padding:12px 8px;}
    .shopPack strong{font-size:18px;}
    .shopPack em{font-size:15px;padding:6px 10px;}
    .passportShopGrid{grid-template-columns:repeat(2, minmax(0,1fr));max-height:250px;}
    .passportShopCard{min-height:128px;padding:10px;}
    .legendaryUpgradeGrid{grid-template-columns:1fr;}
    .legendaryUpgradeCard{min-height:116px;display:grid;grid-template-columns:52px 1fr auto;text-align:left;align-items:center;}
    .legendaryUpgradeCard span{font-size:36px;}
    .legendaryUpgradeCard small{display:none;}
    .shopSectionTitle{padding:9px 10px;}
    .shopSectionTitle span{font-size:12px;}
}


/* =====================================================
   PHASE 6.9 - PARCEL EMPIRE GAME MAP STYLE
   Cleaner Atlas-style board map overlay.
===================================================== */
body.mapThemeGame #map::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:2;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.05), transparent 42%),
        linear-gradient(180deg, rgba(16,48,42,.10), rgba(8,25,29,.20));
    mix-blend-mode:soft-light;
}

body.mapThemeGame .mapboxgl-canvas-container{
    filter:saturate(1.22) contrast(1.03) brightness(1.04);
}

body.mapThemeGame #mapGridHint,
body.mapThemeGame .selectedParcelOutline{
    filter:drop-shadow(0 0 10px rgba(31,255,206,.55));
}

body.mapThemeGame .topHudCard,
body.mapThemeGame .bottomNav,
body.mapThemeGame .selectedLandCard,
body.mapThemeGame .statusChip{
    background:rgba(8,22,30,.88);
    border-color:rgba(77,255,205,.18);
}

body.mapThemeGame .buyLandButton{
    box-shadow:0 14px 38px rgba(13,230,180,.38), inset 0 1px 0 rgba(255,255,255,.28);
}

body.mapThemeGame .mapboxgl-ctrl-group{
    background:rgba(10,25,34,.84)!important;
    border:1px solid rgba(84,255,214,.18)!important;
    border-radius:18px!important;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.32)!important;
}

body.mapThemeGame .mapboxgl-ctrl button{
    filter:invert(1) hue-rotate(145deg) saturate(1.2);
}

body.mapThemeGame .mapboxgl-ctrl-scale{
    background:rgba(8,22,30,.72)!important;
    border-color:rgba(77,255,205,.3)!important;
    color:#dffef5!important;
}

/* =====================================================
   PHASE 7.0 - Atlas-style map board + select plot mode
===================================================== */
body.mapThemeGame #map::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:2;
    background:linear-gradient(180deg, rgba(2,8,12,.08), rgba(2,8,12,.22)), radial-gradient(circle at 50% 45%, rgba(140,255,120,.12), rgba(0,0,0,0) 48%);
}
body.buyGridMode .topHud,
body.buyGridMode .statusStrip,
body.buyGridMode .bottomNav,
body.buyGridMode .gpsButton,
body.buyGridMode .buyLandButton{
    opacity:.22;
    pointer-events:none;
    transition:opacity .2s ease;
}
.buyModeOverlay[hidden]{display:none!important;}
.buyModeOverlay{
    position:fixed;
    inset:0;
    z-index:1550;
    pointer-events:none;
}
.selectPlotBanner{
    position:absolute;
    left:50%;
    top:calc(18px + var(--safe-top));
    transform:translateX(-50%);
    width:min(680px, calc(100vw - 28px));
    border-radius:22px;
    background:rgba(8,96,166,.96);
    border:3px solid rgba(78,178,255,.85);
    box-shadow:0 16px 46px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.25);
    color:#fff;
    text-align:center;
    padding:14px 18px 16px;
    pointer-events:auto;
}
.selectPlotBanner strong{
    display:block;
    font-size:clamp(28px, 6.4vw, 44px);
    font-weight:1000;
    letter-spacing:.07em;
    text-shadow:0 3px 0 rgba(0,0,0,.32);
}
.selectPlotBanner p{
    margin:12px auto 0;
    background:#f5ecd8;
    border:3px solid rgba(125,93,55,.5);
    color:#7b6242;
    border-radius:10px;
    padding:12px;
    font-weight:1000;
    text-transform:uppercase;
    line-height:1.15;
    max-width:560px;
    font-size:clamp(12px, 3.2vw, 18px);
}
.selectPlotClose{
    position:absolute;
    right:12px;
    top:9px;
    width:44px;
    height:44px;
    border:0;
    border-radius:14px;
    background:rgba(0,0,0,.18);
    color:white;
    font-size:36px;
    font-weight:1000;
    line-height:1;
}
.selectPlotCancel{
    position:absolute;
    left:50%;
    bottom:calc(122px + var(--safe-bottom));
    transform:translateX(-50%);
    pointer-events:auto;
    width:min(420px, calc(100vw - 54px));
    height:72px;
    border-radius:16px;
    border:4px solid rgba(255,255,255,.9);
    background:linear-gradient(180deg,#e94b55,#b7202c);
    color:white;
    font-size:clamp(28px, 7vw, 42px);
    font-weight:1000;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-shadow:0 3px 0 rgba(0,0,0,.36);
    box-shadow:0 12px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.22);
}
body.mapThemeGame .buyLandButton{
    background:linear-gradient(180deg,#38d65b,#0e9b35)!important;
    border:3px solid rgba(255,235,120,.95);
    box-shadow:0 12px 34px rgba(0,0,0,.34), 0 0 0 4px rgba(255,255,255,.16), inset 0 2px 0 rgba(255,255,255,.32)!important;
}
body.mapThemeGame .buyLandButton strong{color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.38);}
@media(max-width:760px){
    .selectPlotBanner{top:calc(14px + var(--safe-top));padding:12px 12px 14px;border-radius:18px;}
    .selectPlotClose{width:38px;height:38px;font-size:32px;right:8px;top:8px;}
    .selectPlotBanner p{padding:10px;margin-top:10px;}
    .selectPlotCancel{bottom:calc(108px + var(--safe-bottom));height:62px;}
}

/* =====================================================
   PHASE 7.1 - TRUE GREY BOARD MAP PASS
   Closer to Atlas-style: grey board, faint tiles, green owned land.
===================================================== */
body.mapThemeGame .worldShade{
    background:
        linear-gradient(180deg, rgba(15,18,20,.18), rgba(10,12,14,.08) 34%, rgba(10,12,14,.28) 100%),
        radial-gradient(circle at 50% 48%, transparent 36%, rgba(0,0,0,.34));
}
body.mapThemeGame .scanGlow{opacity:.09;}
body.mapThemeGame #map::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:2;
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.12)),
        radial-gradient(circle at 50% 44%, rgba(255,255,255,.035), rgba(0,0,0,0) 42%);
    mix-blend-mode:normal;
}
body.mapThemeGame .mapboxgl-canvas-container{
    filter:saturate(.58) contrast(.94) brightness(.82);
}
body.mapThemeGame .buyLandButton{
    background:linear-gradient(180deg,#39d850,#11952f)!important;
    border:3px solid rgba(255,225,105,.96)!important;
}
/* Select Plot mode should feel like a dedicated full-screen grid, not the normal HUD. */
body.buyGridMode .gameTopbar,
body.buyGridMode .statsHud,
body.buyGridMode .levelHud,
body.buyGridMode .atlasStatusStrip,
body.buyGridMode .bottomNav.coreNav,
body.buyGridMode .gpsButton,
body.buyGridMode .buyLandButton,
body.buyGridMode .onlineStatus{
    opacity:0!important;
    pointer-events:none!important;
}
body.buyGridMode .worldShade{
    background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.24)), radial-gradient(circle at 50% 50%, transparent 42%, rgba(0,0,0,.32));
}
body.buyGridMode .scanGlow{opacity:.04;}
.buyModeOverlay{z-index:2500;}
.selectPlotBanner{
    background:linear-gradient(180deg,#096cb7,#07538f)!important;
    border:3px solid rgba(87,190,255,.96)!important;
}
.selectPlotCancel{
    bottom:calc(42px + var(--safe-bottom))!important;
    background:linear-gradient(180deg,#178ee8,#0870c6)!important;
    border-color:rgba(255,255,255,.94)!important;
}
/* Keep the selected parcel card out of select-plot mode. Buying is direct from the green grid. */
body.buyGridMode .parcelCard{display:none!important;}
@media(max-width:760px){
    .selectPlotBanner{top:calc(18px + var(--safe-top));}
    .selectPlotBanner p{font-size:13px;line-height:1.18;}
    .selectPlotCancel{height:58px;font-size:26px;bottom:calc(28px + var(--safe-bottom))!important;}
}

/* =====================================================
   PHASE 7.2 - RARITY DECORATIONS + BUY CONFIRMATION
===================================================== */
.confirmOverlay{
    position:fixed;
    inset:0;
    z-index:4200;
    display:grid;
    place-items:center;
    padding:calc(18px + var(--safe-top)) 18px calc(18px + var(--safe-bottom));
    background:rgba(1,6,13,.58);
    backdrop-filter:blur(10px);
}
.confirmOverlay[hidden]{display:none!important;}
.confirmCard{
    position:relative;
    width:min(440px, calc(100vw - 34px));
    border-radius:30px;
    padding:24px;
    color:white;
    background:linear-gradient(180deg, rgba(5,19,36,.96), rgba(4,10,22,.94));
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 28px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16);
}
.confirmClose{
    position:absolute;
    top:14px;
    right:14px;
    width:46px;
    height:46px;
    border:0;
    border-radius:50%;
    cursor:pointer;
    color:white;
    font-size:28px;
    font-weight:1000;
    background:rgba(255,255,255,.12);
}
.confirmCard h2{
    margin:8px 56px 8px 0;
    font-size:30px;
    line-height:1;
}
.confirmCard p{
    color:var(--muted);
    line-height:1.45;
    margin:0 0 16px;
}
.confirmStats{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin:14px 0 18px;
}
.confirmStats div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 14px;
    border-radius:18px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
}
.confirmStats span{
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:900;
    font-size:12px;
}
.confirmStats strong{
    color:var(--blue);
    text-align:right;
    max-width:68%;
    overflow:hidden;
    text-overflow:ellipsis;
}
.confirmActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
@media(max-width:520px){
    .confirmCard{padding:22px 18px;border-radius:26px;}
    .confirmCard h2{font-size:26px;}
    .confirmActions{grid-template-columns:1fr;}
}

/* Make owned rarity visuals much more visible against the grey board. */
body.mapThemeGame .mapboxgl-map{
    filter:saturate(.82) contrast(1.06) brightness(.86);
}
body.mapThemeGame .worldShade{
    background:linear-gradient(180deg, rgba(6,11,18,.18), rgba(6,10,18,.56));
}
body.mapThemeGame.buyGridMode .worldShade{
    background:linear-gradient(180deg, rgba(6,12,20,.08), rgba(6,10,18,.26));
}

/* =====================================================
   PHASE 7.4 - GRID-LOCKED DECORATIONS
   Old DOM markers are disabled; Mapbox icons now sit inside the grid.
===================================================== */
.parcel3dMarker{
    width:84px;
    height:84px;
    pointer-events:none;
    transform:translate(-42px,-42px);
    z-index:8;
    filter:drop-shadow(0 14px 14px rgba(0,0,0,.28));
    opacity:.98;
}
.parcel3dMarker .peParcelIso{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    transform:translateY(2px);
}
.peParcelTop{
    position:absolute;
    left:18px;
    top:24px;
    width:48px;
    height:48px;
    border-radius:8px;
    background:
        radial-gradient(circle at 25% 28%, rgba(255,255,255,.16) 0 10%, transparent 11%),
        linear-gradient(135deg,#74c45a,#4f9b42);
    border:2px solid rgba(218,255,190,.75);
    box-shadow:inset 0 8px 14px rgba(255,255,255,.14), inset 0 -10px 20px rgba(22,79,33,.20);
    transform:rotateX(58deg) rotateZ(45deg);
}
.peLeft,.peRight{
    position:absolute;
    width:35px;
    height:10px;
    left:24px;
    top:65px;
    opacity:.9;
    border-radius:0 0 5px 5px;
}
.peLeft{background:#327329;transform:skewY(25deg) translateX(-8px);}
.peRight{background:#255f23;transform:skewY(-25deg) translateX(18px);}
.peGrass{
    position:absolute;
    width:10px;
    height:14px;
    border-left:3px solid #73d34d;
    border-radius:50%;
    transform:rotate(-20deg);
    opacity:.9;
    z-index:3;
}
.peGrass.g1{left:31px;top:42px;}
.peGrass.g2{left:49px;top:54px;transform:rotate(22deg);}
.peFlower{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#fff5a8;
    border:2px solid #ff7fb3;
    box-shadow:0 0 0 3px rgba(255,192,89,.75), 0 3px 4px rgba(0,0,0,.25);
    z-index:5;
}
.peFlower.f1{left:29px;top:37px;}
.peFlower.f2{left:52px;top:41px;background:#ffffff;border-color:#ffdf64;}
.peFlower.f3{left:43px;top:57px;background:#ffec7a;border-color:#ff7ec8;}
.peRock{
    position:absolute;
    width:15px;
    height:10px;
    border-radius:50% 50% 45% 45%;
    background:linear-gradient(180deg,#b8b0a2,#6f6a63);
    box-shadow:inset -2px -2px 2px rgba(0,0,0,.22), 0 4px 5px rgba(0,0,0,.25);
    z-index:4;
}
.peRock.r1{left:30px;top:54px;}
.peRock.r2{left:55px;top:51px;transform:scale(.8);}
.peLog{
    position:absolute;
    width:22px;
    height:8px;
    border-radius:8px;
    background:linear-gradient(90deg,#7f4d24,#c2823a,#6e421f);
    border:1px solid rgba(255,218,155,.45);
    box-shadow:0 3px 4px rgba(0,0,0,.25);
    transform:rotate(-20deg);
    z-index:4;
}
.peLog.l1{left:37px;top:45px;}
.peTree{
    position:absolute;
    width:30px;
    height:44px;
    z-index:8;
    filter:drop-shadow(0 5px 5px rgba(0,0,0,.28));
}
.peTree i{
    position:absolute;
    left:12px;
    top:20px;
    width:7px;
    height:22px;
    border-radius:4px;
    background:linear-gradient(90deg,#6b3d1d,#a86d32,#5d3417);
}
.peTree b,
.peTree::before,
.peTree::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    border-radius:50% 50% 45% 45%;
    background:linear-gradient(180deg,#49aa48,#166b34);
    box-shadow:inset 0 5px 7px rgba(255,255,255,.18), inset 0 -5px 8px rgba(0,0,0,.18);
}
.peTree::before{top:0;width:25px;height:20px;}
.peTree b{top:10px;width:32px;height:23px;}
.peTree::after{top:22px;width:26px;height:18px;background:linear-gradient(180deg,#3c9344,#0e582b);}
.peTree.t1{left:44px;top:4px;}
.peTree.t2{left:19px;top:14px;transform:scale(.78);}
.parcel3d-common .peParcelTop{background:linear-gradient(135deg,#77c960,#4c9d40);}
.parcel3d-rare .peParcelTop{background:linear-gradient(135deg,#84d46a,#55a946);border-color:rgba(222,255,203,.95);}
.parcel3d-epic .peParcelTop{background:linear-gradient(135deg,#8bd866,#5aac47);border-color:rgba(255,221,166,.95);}
.parcel3d-legendary .peParcelTop{background:linear-gradient(135deg,#96e06a,#5ab745);border-color:rgba(255,241,142,.98);box-shadow:0 0 18px rgba(255,209,102,.38), inset 0 8px 14px rgba(255,255,255,.16);}

body.buyGridMode .parcel3dMarker{opacity:.55;transform:translate(-42px,-42px) scale(.86);}
@media(max-width:760px){
    .parcel3dMarker{width:68px;height:68px;transform:translate(-34px,-34px) scale(.86);}
    body.buyGridMode .parcel3dMarker{transform:translate(-34px,-34px) scale(.72);}
}

/* Phase 7.4: old floating DOM parcel models are disabled so map decorations stay locked to grid cells. */
.parcel3dMarker{display:none !important;}


/* =====================================================
   PHASE 7.6 - BRIGHTER 3D MAP VISIBILITY
   PHASE 7.7 - FORCE GREY BOARD + 3D VISIBILITY
   Makes the board brighter and makes 3D parcel objects visible on real phones.
===================================================== */
body.mapThemeGame .mapboxgl-canvas-container,
body.mapThemeGame .mapboxgl-map{
    filter:saturate(1.05) contrast(1.12) brightness(1.12) !important;
}
body.mapThemeGame .worldShade{
    background:
        linear-gradient(180deg, rgba(0,0,0,.06), transparent 30%, rgba(0,0,0,.18)),
        radial-gradient(circle at 50% 48%, transparent 44%, rgba(0,0,0,.20)) !important;
}
body.mapThemeGame .scanGlow{opacity:.035!important;}
body.mapThemeGame #map::after{
    background:
        radial-gradient(circle at 50% 45%, rgba(168,255,142,.08), rgba(0,0,0,0) 48%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.05)) !important;
}
body.mapThemeGame .statsHud .statCard,
body.mapThemeGame .statusChip,
body.mapThemeGame .bottomNav,
body.mapThemeGame .buyLandButton{
    filter:saturate(1.08) brightness(1.06);
}
body.mapThemeGame .buyLandButton{
    background:linear-gradient(180deg,#53ef63,#17b33f)!important;
    box-shadow:0 15px 44px rgba(56,255,120,.38), 0 0 0 4px rgba(255,255,255,.12), inset 0 2px 0 rgba(255,255,255,.38)!important;
}


/* =====================================================
   PHASE 7.7 - FORCE GREY BOARD + 3D VISIBILITY
   Removes the accidental satellite look and makes 3D land brighter.
===================================================== */
body.mapThemeGame .mapboxgl-canvas-container,
body.mapThemeGame .mapboxgl-map{
    filter:saturate(.92) contrast(1.12) brightness(1.18) !important;
}
body.mapThemeGame .worldShade{
    background:
        linear-gradient(180deg, rgba(0,0,0,.03), transparent 34%, rgba(0,0,0,.14)),
        radial-gradient(circle at 50% 48%, transparent 50%, rgba(0,0,0,.16)) !important;
}
body.mapThemeGame #map::after{
    background:
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.055), rgba(0,0,0,0) 52%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.025)) !important;
}
body.mapThemeGame .statsHud .statCard,
body.mapThemeGame .statusChip,
body.mapThemeGame .bottomNav{
    background:rgba(5,18,26,.86)!important;
}


/* =====================================================
   PHASE 8.0 - MOBILE ZOOM + BUY FLOW FIX
   Prevents Safari page zoom/cropping and keeps the Buy Land
   button clickable on narrow iPhone screens.
===================================================== */
html, body{
    width:100dvw !important;
    max-width:100dvw !important;
    min-width:0 !important;
    overflow:hidden !important;
    overscroll-behavior:none;
    touch-action:manipulation;
}
#map{
    width:100dvw !important;
    max-width:100dvw !important;
    overflow:hidden !important;
}
body, .gameTopbar, .statsHud, .atlasStatusStrip, .bottomNav, .buyLandButton, .roundButton{
    -webkit-user-select:none;
    user-select:none;
}
body.mapThemeGame .mapboxgl-canvas-container,
body.mapThemeGame .mapboxgl-map{
    filter:saturate(.94) contrast(1.05) brightness(1.10) !important;
}
body.mapThemeGame .worldShade{
    background:linear-gradient(180deg, rgba(0,0,0,.02), transparent 36%, rgba(0,0,0,.10)), radial-gradient(circle at 50% 48%, transparent 52%, rgba(0,0,0,.12)) !important;
}
@media(max-width:720px){
    .statsHud{
        width:calc(100dvw - 14px - var(--safe-left) - var(--safe-right)) !important;
        left:50% !important;
        right:auto !important;
        transform:translateX(-50%) !important;
    }
    .atlasStatusStrip{
        width:calc(100dvw - 20px - var(--safe-left) - var(--safe-right)) !important;
        left:50% !important;
        right:auto !important;
        transform:translateX(-50%) !important;
        grid-template-columns:1fr 1fr;
    }
    .atlasStatusStrip div:nth-child(1),
    .atlasStatusStrip div:nth-child(4){display:none;}
    .buyLandButton{
        left:50% !important;
        right:auto !important;
        transform:translateX(-50%) !important;
        width:min(300px, calc(100dvw - 122px - var(--safe-left) - var(--safe-right))) !important;
        min-width:210px;
        z-index:1450 !important;
        pointer-events:auto !important;
    }
    .roundButton.gpsButton{
        right:calc(12px + var(--safe-right)) !important;
        z-index:1455 !important;
    }
    .bottomNav.coreNav{
        width:calc(100dvw - 14px - var(--safe-left) - var(--safe-right)) !important;
        left:50% !important;
        right:auto !important;
        transform:translateX(-50%) !important;
        max-width:calc(100dvw - 14px - var(--safe-left) - var(--safe-right)) !important;
    }
    .mapboxgl-ctrl-top-right{
        top:calc(118px + var(--safe-top)) !important;
        right:calc(8px + var(--safe-right)) !important;
    }
}
@media(max-width:380px){
    .buyLandButton{width:min(258px, calc(100dvw - 106px - var(--safe-left) - var(--safe-right))) !important;min-width:190px;}
    .buyLandButton strong{font-size:15px;}
    .buyLandButton span{font-size:18px;}
    .roundButton.gpsButton{width:50px;height:50px;}
}

/* =====================================================
   PHASE 8.1 - BUY BUTTON TAP HOTFIX
   Keeps BUY LAND above all map/UI layers and clickable on mobile Safari.
===================================================== */
.buyLandButton{
    z-index:5200 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    -webkit-user-select:none !important;
    user-select:none !important;
}
body.buyGridMode .buyLandButton{
    z-index:1100 !important;
}
.confirmOverlay{z-index:6500 !important;}
.buyModeOverlay{z-index:6000 !important;}
@media(max-width:720px){
    .buyLandButton{
        bottom:calc(var(--nav-height) + 34px + var(--safe-bottom)) !important;
        min-height:64px !important;
    }
}

/* =====================================================
   PHASE 8.2 - SELECT PLOT GRID + OWNED PARCEL FALLBACK
   Adds a DOM-backed buy grid so iPhone Safari always shows
   tappable parcels, even if Mapbox layers are delayed.
===================================================== */
.selectPlotTapGrid{
    position:fixed;
    inset:0;
    z-index:6050;
    pointer-events:none;
}
.selectPlotCell{
    position:absolute;
    border:2.5px solid rgba(255,255,255,.75);
    background:rgba(120,255,92,.20);
    box-shadow:0 0 0 1px rgba(142,255,69,.35), inset 0 0 18px rgba(142,255,69,.16);
    padding:0;
    border-radius:2px;
    pointer-events:auto;
    touch-action:manipulation;
}
.selectPlotCell.buyable{
    border-color:#8eff45;
    background:rgba(97,255,73,.26);
    box-shadow:0 0 16px rgba(142,255,69,.30), inset 0 0 18px rgba(170,255,110,.16);
}
.selectPlotCell.buyable:active{
    background:rgba(105,255,82,.55);
    transform:scale(.96);
}
.selectPlotCell.out,
.selectPlotCell.blocked{
    border-color:rgba(255,63,63,.82);
    background:rgba(255,68,68,.13);
    box-shadow:inset 0 0 12px rgba(255,63,63,.10);
}
.selectPlotCell.owned{
    border-color:rgba(255,231,103,.92);
    background:rgba(107,246,82,.50);
    box-shadow:0 0 16px rgba(255,231,103,.25), inset 0 0 12px rgba(255,255,255,.12);
}
body.buyGridMode .selectPlotBanner,
body.buyGridMode .selectPlotCancel,
body.buyGridMode .confirmOverlay{
    z-index:6200!important;
}
body.buyGridMode .selectPlotBanner,
body.buyGridMode .selectPlotCancel{
    pointer-events:auto!important;
}

/* =====================================================
   PHASE 8.3 - STABLE GRID + OWNED PARCEL BRIDGE
   A DOM fallback layer that restores Buy Land and bought parcel visibility on iPhone Safari.
===================================================== */
.peOwnedStableLayer{
    position:fixed;
    inset:0;
    z-index:980;
    pointer-events:none;
    overflow:hidden;
    transform:translateZ(0);
}
.peOwnedPlot{
    position:absolute;
    border-radius:7px;
    transform:translate(-50%,-50%) perspective(320px) rotateX(58deg) rotateZ(45deg);
    background:linear-gradient(135deg,#79dd59,#3fa638);
    border:2px solid rgba(236,255,211,.95);
    box-shadow:0 8px 0 #25722a, 0 15px 24px rgba(0,0,0,.35), inset 0 4px 10px rgba(255,255,255,.18);
    opacity:.98;
}
.peOwnedPlot::after{
    content:"";
    position:absolute;
    inset:4px;
    border-radius:5px;
    background:radial-gradient(circle at 25% 25%,rgba(255,255,255,.20),transparent 18%), radial-gradient(circle at 70% 65%,rgba(60,135,35,.24),transparent 16%);
    pointer-events:none;
}
.peOwnedPlot.pe-rare{background:linear-gradient(135deg,#91ed65,#43b943);}
.peOwnedPlot.pe-epic{background:linear-gradient(135deg,#9af06c,#53bf45);border-color:rgba(255,225,172,.98);}
.peOwnedPlot.pe-legendary{background:linear-gradient(135deg,#a5f872,#5ed34b);border-color:rgba(255,240,129,1);box-shadow:0 10px 0 #2f842d,0 0 28px rgba(255,225,92,.35),0 20px 30px rgba(0,0,0,.38),inset 0 4px 10px rgba(255,255,255,.22);}
.peOwnedPlot .blade,
.peOwnedPlot .flower,
.peOwnedPlot .rock,
.peOwnedPlot .log,
.peOwnedPlot .tree{position:absolute;display:block;z-index:3;transform:rotateZ(-45deg) rotateX(-58deg);}
.peOwnedPlot .blade{width:10%;height:16%;border-left:3px solid #b4ff7b;border-radius:50%;opacity:.75;}
.peOwnedPlot .b1{left:22%;top:30%;}.peOwnedPlot .b2{left:70%;top:58%;transform:rotateZ(-20deg) rotateX(-58deg);}
.peOwnedPlot .flower{width:14%;height:14%;border-radius:50%;background:#fff;border:2px solid #ff7fb8;box-shadow:0 0 0 5px rgba(255,226,88,.85),0 3px 6px rgba(0,0,0,.28);}
.peOwnedPlot .f1{left:25%;top:24%;}.peOwnedPlot .f2{left:58%;top:28%;}.peOwnedPlot .f3{left:38%;top:58%;}.peOwnedPlot .f4{left:68%;top:66%;}.peOwnedPlot .f5{left:16%;top:62%;}
.peOwnedPlot .rock{width:20%;height:13%;border-radius:50%;background:linear-gradient(180deg,#c9c2b5,#777065);box-shadow:inset -2px -3px 3px rgba(0,0,0,.22),0 4px 6px rgba(0,0,0,.3);}
.peOwnedPlot .r1{left:22%;top:52%;}.peOwnedPlot .r2{left:62%;top:42%;}.peOwnedPlot .r3{left:47%;top:68%;}
.peOwnedPlot .log{left:42%;top:35%;width:34%;height:10%;border-radius:99px;background:linear-gradient(90deg,#74431f,#c9843c,#633819);box-shadow:0 4px 6px rgba(0,0,0,.28);}
.peOwnedPlot .tree{width:38%;height:62%;left:50%;top:-12%;filter:drop-shadow(0 8px 7px rgba(0,0,0,.35));}
.peOwnedPlot .tree::before{content:"";position:absolute;left:44%;top:44%;width:13%;height:48%;border-radius:99px;background:linear-gradient(90deg,#653817,#aa7134,#583014);}
.peOwnedPlot .tree b,
.peOwnedPlot .tree::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg,#48b454,#14632e);box-shadow:inset 0 8px 10px rgba(255,255,255,.18),inset 0 -8px 12px rgba(0,0,0,.20);}
.peOwnedPlot .tree b{top:0;width:82%;height:48%;}.peOwnedPlot .tree::after{top:25%;width:100%;height:52%;}
.peOwnedPlot .t2{left:20%;top:5%;transform:rotateZ(-45deg) rotateX(-58deg) scale(.72);}

.peStableBuying .topHud,
.peStableBuying .statsHud,
.peStableBuying .atlasStatusStrip,
.peStableBuying .bottomNav,
.peStableBuying .buyLandButton,
.peStableBuying .gpsButton{opacity:0!important;pointer-events:none!important;}
.peStableBuyOverlay[hidden],.peStableConfirm[hidden]{display:none!important;}
.peStableBuyOverlay{
    position:fixed;
    inset:0;
    z-index:9000;
    background:rgba(5,11,16,.12);
    pointer-events:auto;
    overflow:hidden;
}
.peStableBuyHeader{
    position:absolute;
    left:50%;
    top:calc(14px + var(--safe-top));
    transform:translateX(-50%);
    width:min(670px,calc(100dvw - 28px));
    padding:14px 16px 16px;
    border-radius:24px;
    text-align:center;
    color:white;
    background:linear-gradient(180deg,#0876c9,#07518d);
    border:3px solid rgba(102,201,255,.95);
    box-shadow:0 18px 46px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.22);
}
.peStableBuyHeader strong{display:block;font-weight:1000;font-size:clamp(30px,7vw,48px);letter-spacing:.08em;text-shadow:0 3px 0 rgba(0,0,0,.38);}
.peStableBuyHeader p{margin:12px 0 0;padding:11px;border-radius:12px;background:#f4ead6;border:3px solid rgba(125,93,55,.55);color:#715a3c;font-weight:1000;text-transform:uppercase;line-height:1.12;font-size:clamp(12px,3.25vw,17px);}
.peStableClose{position:absolute;right:10px;top:10px;width:46px;height:46px;border:0;border-radius:16px;background:rgba(0,0,0,.18);color:white;font-size:36px;font-weight:1000;}
.peStableGrid{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(92dvw,520px);
    aspect-ratio:1/1;
    display:grid;
    grid-template-columns:repeat(9,1fr);
    grid-template-rows:repeat(9,1fr);
    z-index:9010;
    box-shadow:0 0 0 999px rgba(0,0,0,.10);
}
.peStableCell{border:2px solid rgba(255,255,255,.62);background:rgba(180,190,177,.13);padding:0;touch-action:manipulation;}
.peStableCell.buyable{border-color:#95ff4b;background:rgba(95,255,72,.28);box-shadow:inset 0 0 16px rgba(177,255,115,.25);}
.peStableCell.buyable:active{background:rgba(112,255,82,.62);transform:scale(.94);}
.peStableCell.out{border-color:rgba(255,73,73,.78);background:rgba(255,73,73,.12);}
.peStableCell.owned{border-color:rgba(255,230,92,.98);background:rgba(88,230,72,.56);box-shadow:inset 0 0 14px rgba(255,255,255,.18),0 0 14px rgba(255,230,92,.25);}
.peStableCancel{position:absolute;left:50%;bottom:calc(28px + var(--safe-bottom));transform:translateX(-50%);z-index:9020;width:min(420px,calc(100dvw - 54px));height:64px;border-radius:16px;border:4px solid rgba(255,255,255,.95);background:linear-gradient(180deg,#178ee8,#0870c6);color:white;font-size:clamp(26px,7vw,42px);font-weight:1000;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 3px 0 rgba(0,0,0,.36);box-shadow:0 12px 34px rgba(0,0,0,.38);}
.peStableConfirm{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:20px;background:rgba(1,6,13,.62);backdrop-filter:blur(10px);}
.peStableConfirmCard{position:relative;width:min(430px,calc(100dvw - 34px));padding:24px;border-radius:28px;background:linear-gradient(180deg,rgba(5,19,36,.98),rgba(4,10,22,.96));border:1px solid rgba(255,255,255,.16);color:white;box-shadow:0 28px 90px rgba(0,0,0,.55);}
.peStableConfirmCard h2{margin:4px 52px 10px 0;font-size:30px;}.peStableConfirmCard p{color:rgba(255,255,255,.72);line-height:1.35;}.peConfirmClose{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:white;font-size:30px;font-weight:1000;}.peConfirmInfo{display:flex;justify-content:space-between;gap:12px;margin:16px 0;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.07);}.peConfirmInfo span{text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:900;letter-spacing:.08em;}.peConfirmInfo strong{color:#49ddff;overflow:hidden;text-overflow:ellipsis;}.peConfirmButtons{display:grid;grid-template-columns:1fr 1fr;gap:10px;}.peConfirmButtons button{border:0;border-radius:16px;padding:15px 12px;font-weight:1000;color:white;}.peNo{background:rgba(255,255,255,.12);}.peYes{background:linear-gradient(135deg,#00d084,#49ddff);color:#051019!important;}
@media(max-width:520px){.peStableBuyHeader{top:calc(10px + var(--safe-top));padding:12px 12px 13px}.peStableGrid{width:min(94dvw,460px);top:52%;}.peStableCancel{height:58px;bottom:calc(22px + var(--safe-bottom));}.peConfirmButtons{grid-template-columns:1fr;}.peOwnedPlot{filter:saturate(1.18) brightness(1.12);}}