/* ═══════════════════════════════════════════
   WORLD THEME — stars, glass, pan, corners
   Loaded after world.css
   ═══════════════════════════════════════════ */

/* ─── Stars canvas behind world modal ─── */
#worldModal {
    background: #04031a;
}
#worldModal > div {
    position: relative;
    z-index: 1;
}
.world-stars-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.8;
}
.world-stars-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(99,102,241,0.28), transparent 55%),
        radial-gradient(ellipse at 85% 30%, rgba(236,72,153,0.22), transparent 55%),
        radial-gradient(ellipse at 50% 90%, rgba(14,165,233,0.20), transparent 60%),
        radial-gradient(ellipse at 50% 50%, rgba(11,10,42,0.92) 0%, rgba(4,3,26,0.98) 75%);
}

/* ─── Glass headers ─── 
.world-header,
.place-header {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    color: #f4f4f5;
}
.world-header,
.place-header {
    position: relative;
    z-index: 50;
    width: 100%;
}
.world-header button,
.place-header button {
    color: #f4f4f5;
}
.world-header h2,
.place-header h2,
.world-header p,
.place-header p {
    color: #f4f4f5;
}
.world-header .world-active-pill,
.place-header .world-active-pill {
    background: rgba(34,197,94,0.20);
    color: #86efac;
    border: 1px solid rgba(34,197,94,0.35);
}
*/

/* ─── World canvas: cosmic dark layer ─── */
#worldCanvas {
    background:
        radial-gradient(ellipse at 25% 20%, #1a1a3e 0%, transparent 55%),
        radial-gradient(ellipse at 75% 75%, #1e1b4b 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, #0b0a2a 0%, #04031a 80%) !important;
    touch-action: none;
    cursor: grab;
    will-change: transform;
}
#worldCanvas.panning {
    cursor: grabbing;
}
.world-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
    background-size: 60px 60px;
}
.world-land {
    background: linear-gradient(135deg, rgba(99,102,241,0.14), rgba(236,72,153,0.14)) !important;
    filter: blur(3px);
}
.world-land-1 { background: linear-gradient(135deg, rgba(99,102,241,0.20), rgba(139,92,246,0.14)) !important; }
.world-land-2 { background: linear-gradient(135deg, rgba(14,165,233,0.20), rgba(99,102,241,0.14)) !important; }
.world-land-3 { background: linear-gradient(135deg, rgba(236,72,153,0.18), rgba(168,85,247,0.14)) !important; }

/* ─── Glass pins ─── */
.world-pin {
    background: rgba(24,24,40,0.80) !important;
    backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #f4f4f5 !important;
    box-shadow:
        0 8px 24px -8px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.world-pin:hover {
    border-color: rgba(99,102,241,0.55) !important;
    box-shadow:
        0 12px 32px -8px rgba(99,102,241,0.45),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
.world-pin .pin-name { color: #f4f4f5 !important; }
.world-pin .pin-meta { color: rgba(244,244,245,0.65) !important; }

/* ─── Glass city labels ─── */
.world-city-label {
    background: rgba(24,24,40,0.80) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(165,180,252,0.20);
    backdrop-filter: blur(10px);
}

/* ─── Glass signboards ─── */
.world-signboard {
    border-width: 1px !important;
    backdrop-filter: blur(8px);
    box-shadow:
        0 8px 20px -6px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* ─── Corner nav (used inside world + place) ─── */

.corner-nav {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 45;
    /* Do NOT clip — but do not intercept clicks either */
}
.corner-nav .corner-btn {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(24,24,40,0.75);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255,255,255,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f4f4f5;
    font-size: 15px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 8px 20px -8px rgba(0,0,0,0.6);
    transition: transform .2s ease, background .2s ease;
}
.corner-nav .corner-btn:hover {
    background: rgba(99,102,241,0.75);
    transform: scale(1.08);
}
.corner-nav .corner-btn:active {
    transform: scale(0.96);
}
.corner-nav .corner-tl { top: 74px; left: 12px; }
.corner-nav .corner-tr { top: 74px; right: 12px; }
.corner-nav .corner-bl { bottom: 24px; left: 12px; }
.corner-nav .corner-br { bottom: 24px; right: 12px; }

/* When world is on mobile, adjust top offset so it sits below the header */
@media (max-width: 640px) {
    .corner-nav .corner-tl, .corner-nav .corner-tr { top: 66px; }
    .corner-nav .corner-btn { width: 38px; height: 38px; font-size: 13px; }
}

/* ─── Place stage: glass avatars ─── */
.stage-avatar img,
.stage-avatar .stage-initials,
.stage-avatar-svg > svg {
    border: 2px solid rgba(255,255,255,0.35) !important;
    box-shadow:
        0 8px 20px -6px rgba(0,0,0,0.5),
        0 0 0 4px rgba(99,102,241,0.08) !important;
    background: rgba(24,24,40,0.5);
    border-radius: 50%;
}
.stage-avatar.is-me img,
.stage-avatar.is-me .stage-initials,
.stage-avatar.is-me .stage-avatar-svg > svg {
    border-color: rgba(99,102,241,0.85) !important;
    box-shadow:
        0 8px 24px -6px rgba(99,102,241,0.65),
        0 0 0 4px rgba(99,102,241,0.20) !important;
}
.stage-avatar .stage-name {
    background: rgba(0,0,0,0.85) !important;
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(6px);
}
.stage-avatar.is-me .stage-name {
    background: rgba(99,102,241,0.95) !important;
    color: #fff;
}

/* ─── Travel bar + journey panel: glass ─── */
.travel-bar {
    background: rgba(24,24,40,0.92) !important;
    backdrop-filter: blur(18px) saturate(150%);
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    color: #f4f4f5;
    border-radius: 22px 22px 0 0;
}
.travel-bar-header span { color: rgba(244,244,245,0.65) !important; }
#travelTo { color: #f4f4f5; }
.travel-opt {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: #f4f4f5;
}
.travel-opt:hover {
    background: rgba(99,102,241,0.25) !important;
    border-color: rgba(99,102,241,0.55) !important;
}
.travel-opt .lbl { color: #f4f4f5 !important; }

.journey-panel {
    background: rgba(24,24,40,0.92) !important;
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #f4f4f5;
}
.journey-panel .text-gray-500 { color: rgba(244,244,245,0.55) !important; }
.journey-panel .text-gray-700 { color: #f4f4f5 !important; }

/* ─── Cluster sheet: glass ─── */
.cluster-sheet-inner {
    background: rgba(24,24,40,0.96) !important;
    color: #f4f4f5;
    backdrop-filter: blur(18px) saturate(150%);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.cluster-place-card {
    background: rgba(255,255,255,0.06) !important;
    color: #f4f4f5;
}
.cluster-place-card:hover {
    background: rgba(99,102,241,0.20) !important;
}
.cluster-place-card .cp-name { color: #f4f4f5; }
.cluster-place-card .cp-meta { color: rgba(244,244,245,0.65); }

/* ─── Place modal: cosmic background ─── */
#placeModal {
    background: #04031a;
}

/* ═══════════════════════════════════════════
   MODAL Z-INDEX — force correct stacking
   ═══════════════════════════════════════════ */
#placeModal        { z-index: 10060 !important; }
#placeDetailsModal { z-index: 10070 !important; }
#placeChatModal    { z-index: 10065 !important; }
#worldAdModal      { z-index: 10070 !important; }

#placeStage {
    background:
        radial-gradient(ellipse at 20% 25%, #1a1a3e 0%, transparent 55%),
        radial-gradient(ellipse at 80% 75%, #1e1b4b 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, #0b0a2a 0%, #04031a 85%) !important;
}

/* ─── Ad detail + place details modals ─── */
#worldAdModal > div > div,
#placeDetailsModal > div > div {
    background: rgba(24,24,40,0.96) !important;
    color: #f4f4f5;
    border: 1px solid rgba(255,255,255,0.08);
}
#worldAdModal h3,
#placeDetailsModal h3 { color: #f4f4f5; }
#worldAdModal p,
#placeDetailsModal p { color: rgba(244,244,245,0.75); }
#placeDetailsModal .pd-stat { background: rgba(255,255,255,0.05); }
#placeDetailsModal .pd-stat .v { color: #f4f4f5; }
#placeDetailsModal .pd-stat .l { color: rgba(244,244,245,0.65); }

/* ─── Small polish: glass scrollbars on dark surfaces ─── */
#worldMap::-webkit-scrollbar { width: 6px; height: 6px; }
#worldMap::-webkit-scrollbar-track { background: transparent; }
#worldMap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 999px; }

/* ─── Mobile tweaks ─── */
@media (max-width: 640px) {
    .world-header { padding: 8px 10px !important; }
    .world-header h2 { font-size: 16px; }
    .world-pin { min-width: 100px !important; max-width: 160px !important; padding: 6px 8px !important; }
    .world-pin .pin-icon { width: 28px !important; height: 28px !important; font-size: 14px !important; }
}