/* ===== SKYLINE SCENE ===== */
.skyline-scene {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #02070f 0%, #091425 100%);
}

/* === SKY === */
.sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        #020810 0%,
        #06101f 12%,
        #0a1628 25%,
        #0f1e3a 40%,
        #152a4d 60%,
        #1a3560 80%,
        #1e3f6e 100%
    );
}
.sky-watermark {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: min(98vw, 1320px);
    height: min(32vw, 360px);
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}
.sky-watermark text {
    font-family: 'Arial Black', sans-serif;
    font-size: 84px;
    font-weight: 900;
    letter-spacing: 1px;
    fill: rgba(255, 255, 255, 0.065);
    text-shadow: 0 0 20px rgba(100, 140, 220, 0.08);
}
.sky-watermark textPath {
    dominant-baseline: middle;
}
.sky::before {
    content: '';
    position: absolute;
    left: 12%;
    right: 10%;
    bottom: 18%;
    height: 22%;
    background: radial-gradient(ellipse at center,
        rgba(255, 168, 82, 0.14) 0%,
        rgba(255, 120, 40, 0.08) 26%,
        rgba(68, 125, 230, 0.07) 52%,
        transparent 78%
    );
    filter: blur(20px);
    pointer-events: none;
}
.sky::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 72%, rgba(255, 170, 90, 0.06), transparent 28%),
        linear-gradient(180deg, transparent 55%, rgba(7, 16, 32, 0.18) 100%);
    pointer-events: none;
}

/* Stars */
.stars-layer {
    position: absolute;
    inset: 0;
    opacity: 0.95;
    background-image:
        radial-gradient(1px 1px at 5% 8%, #fff 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 12% 15%, rgba(255,255,255,0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 22% 5%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 20%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(2px 2px at 42% 8%, rgba(255,255,255,0.95) 0%, transparent 100%),
        radial-gradient(1px 1px at 55% 12%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 63% 3%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 72% 18%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 6%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(2px 2px at 95% 10%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 28%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 48% 25%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 28% 32%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 68% 28%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 3% 35%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 18% 4%, rgba(255,255,255,0.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 12%, rgba(255,255,255,0.55) 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 2%, rgba(255,255,255,0.65) 0%, transparent 100%),
        radial-gradient(2px 2px at 52% 18%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 9%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 4%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 82% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 92% 7%, rgba(255,255,255,0.45) 0%, transparent 100%),
        radial-gradient(1px 1px at 98% 20%, rgba(255,255,255,0.55) 0%, transparent 100%),
        radial-gradient(1px 1px at 7% 22%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 25% 7%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 47% 4%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 58% 22%, rgba(255,255,255,0.35) 0%, transparent 100%),
        radial-gradient(2px 2px at 86% 3%, rgba(255,255,255,0.9) 0%, transparent 100%);
    animation: twinkle 4s ease-in-out infinite alternate;
}

.stars-layer-deep {
    position: absolute;
    inset: 0;
    opacity: 0.85;
    filter: blur(0.2px);
    background-image:
        radial-gradient(1px 1px at 9% 14%, rgba(255,255,255,0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 16% 9%, rgba(173,216,255,0.72) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 27% 18%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 37% 10%, rgba(255,255,255,0.78) 0%, transparent 100%),
        radial-gradient(1px 1px at 44% 16%, rgba(190,220,255,0.64) 0%, transparent 100%),
        radial-gradient(1px 1px at 56% 6%, rgba(255,255,255,0.82) 0%, transparent 100%),
        radial-gradient(1px 1px at 67% 13%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 73% 9%, rgba(255,255,255,0.92) 0%, transparent 100%),
        radial-gradient(1px 1px at 84% 17%, rgba(255,255,255,0.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 92% 12%, rgba(173,216,255,0.72) 0%, transparent 100%),
        radial-gradient(1px 1px at 13% 23%, rgba(255,255,255,0.58) 0%, transparent 100%),
        radial-gradient(1px 1px at 32% 27%, rgba(255,255,255,0.68) 0%, transparent 100%),
        radial-gradient(1px 1px at 47% 21%, rgba(173,216,255,0.56) 0%, transparent 100%),
        radial-gradient(1px 1px at 62% 25%, rgba(255,255,255,0.62) 0%, transparent 100%),
        radial-gradient(1px 1px at 79% 24%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 97% 27%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 11% 5%, rgba(255,255,255,0.84) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 53% 11%, rgba(255,255,255,0.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 89% 6%, rgba(255,255,255,0.76) 0%, transparent 100%);
    animation: twinkle 6.5s ease-in-out infinite alternate-reverse;
}

@keyframes twinkle { 0% { opacity: 0.72; } 100% { opacity: 1; } }

.air-traffic,
.meteors {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.air-traffic { z-index: 3; }
.meteors { z-index: 4; }

.plane {
    position: absolute;
    --plane-scale: 1;
    width: 54px;
    height: 14px;
    opacity: 0.88;
    filter: drop-shadow(0 0 6px rgba(210, 228, 255, 0.22));
}
.plane::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 6px;
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, rgba(180, 210, 255, 0), rgba(210, 228, 255, 0.4));
    border-radius: 999px;
}
.plane-body {
    position: absolute;
    left: 8px;
    right: 6px;
    top: 4px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(215,231,255,0.28) 0%, rgba(245,248,255,0.96) 50%, rgba(215,231,255,0.18) 100%);
}
.plane-body::before,
.plane-body::after {
    content: '';
    position: absolute;
    background: rgba(230,240,255,0.92);
}
.plane-body::before {
    width: 18px;
    height: 2px;
    left: 14px;
    top: -1px;
    transform: rotate(18deg);
}
.plane-body::after {
    width: 10px;
    height: 2px;
    left: -4px;
    top: 2px;
    transform: rotate(-28deg);
}
.plane-blink {
    position: absolute;
    right: 3px;
    top: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ff6b6b;
    box-shadow: 0 0 6px rgba(255,107,107,0.7);
    animation: plane-blink 1.4s infinite;
}
.plane-a { top: 12%; left: -8%; animation: plane-fly-right 34s linear infinite; }
.plane-b { --plane-scale: 0.82; top: 19%; right: -10%; animation: plane-fly-left 38s linear infinite -11s; }
@keyframes plane-fly-right {
    from { transform: translateX(-80px) translateY(0) scale(var(--plane-scale)); }
    to { transform: translateX(calc(100vw + 120px)) translateY(-10px) scale(var(--plane-scale)); }
}
@keyframes plane-fly-left {
    from { transform: translateX(80px) translateY(0) scale(var(--plane-scale)); }
    to { transform: translateX(calc(-100vw - 120px)) translateY(12px) scale(var(--plane-scale)); }
}
@keyframes plane-blink { 0%, 68%, 100% { opacity: 1; } 72%, 88% { opacity: 0.18; } }

.meteor {
    position: absolute;
    width: 170px;
    height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,224,160,0.96) 20%, rgba(255,164,88,0.35) 58%, transparent 100%);
    transform: rotate(-28deg);
    filter: drop-shadow(0 0 10px rgba(255, 205, 120, 0.55));
    opacity: 0;
}
.meteor::before {
    content: '';
    position: absolute;
    left: 0;
    top: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,245,220,1);
    box-shadow: 0 0 14px rgba(255,214,135,0.92);
}
.meteor-a { top: 12%; left: 56%; animation: meteor-fall-a 8s linear infinite 0.8s; }
.meteor-b { top: 9%; left: 74%; transform: rotate(-24deg) scale(0.9); animation: meteor-fall-b 11s linear infinite 4s; }
.meteor-c { top: 21%; left: 22%; transform: rotate(-31deg) scale(0.75); animation: meteor-fall-c 14s linear infinite 2s; }
@keyframes meteor-fall-a {
    0%, 72% { opacity: 0; transform: rotate(-28deg) translate(0, 0); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: rotate(-28deg) translate(-220px, 170px); }
}
@keyframes meteor-fall-b {
    0%, 76% { opacity: 0; transform: rotate(-24deg) scale(0.9) translate(0, 0); }
    79% { opacity: 0.9; }
    100% { opacity: 0; transform: rotate(-24deg) scale(0.9) translate(-180px, 130px); }
}
@keyframes meteor-fall-c {
    0%, 80% { opacity: 0; transform: rotate(-31deg) scale(0.75) translate(0, 0); }
    83% { opacity: 0.85; }
    100% { opacity: 0; transform: rotate(-31deg) scale(0.75) translate(-150px, 110px); }
}

/* Moon */
.moon {
    position: absolute;
    top: 3.5%;
    right: 9%;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff6d7, #fcd34d, #f59e0b);
    box-shadow: 0 0 42px rgba(252,211,77,0.52), 0 0 120px rgba(252,211,77,0.2);
}
.moon-crater { position: absolute; border-radius: 50%; background: rgba(180,140,60,0.28); }
.moon-crater:first-child { width: 14px; height: 14px; top: 24px; left: 25px; }
.moon-crater.c2 { width: 9px; height: 9px; top: 43px; left: 46px; }

/* Clouds */
.clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cloud { position: absolute; background: rgba(255,255,255,0.035); border-radius: 50%; filter: blur(15px); }
.cloud.c1 { width: 250px; height: 40px; top: 18%; left: -5%; animation: drift 55s linear infinite; }
.cloud.c2 { width: 200px; height: 30px; top: 30%; left: 35%; animation: drift 70s linear infinite reverse; }
.cloud.c3 { width: 180px; height: 28px; top: 12%; left: 65%; animation: drift 60s linear infinite; }
@keyframes drift { from { transform: translateX(-80px); } to { transform: translateX(80px); } }

/* === DISTANT MOUNTAINS === */
.mountains {
    position: absolute;
    bottom: 19%;
    left: 0;
    right: 0;
    height: 22%;
    z-index: 1;
}
.mountain { position: absolute; bottom: 0; border-radius: 40% 40% 0 0; }
.mountain.m1 { left: -5%; width: 35%; height: 80%; background: linear-gradient(180deg, #0a1525, #0d1a30); }
.mountain.m2 { left: 20%; width: 40%; height: 100%; background: linear-gradient(180deg, #080f1e, #0b1628); }
.mountain.m3 { right: -5%; width: 35%; height: 70%; background: linear-gradient(180deg, #0a1525, #0f1e35); }
.mountain.m4 { right: 15%; width: 30%; height: 90%; background: linear-gradient(180deg, #070d1a, #0a1525); }

/* === FAR CITYSCAPE SILHOUETTE === */
.far-city {
    position: absolute;
    bottom: 19%;
    left: 0; right: 0;
    height: 13%;
    z-index: 2;
    pointer-events: none;
    opacity: 0.95;
}
.far-city::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 12px;
    background: linear-gradient(90deg,
        rgba(15, 26, 42, 0.2) 0%,
        rgba(17, 31, 48, 0.8) 16%,
        rgba(17, 31, 48, 0.95) 52%,
        rgba(17, 31, 48, 0.78) 84%,
        rgba(15, 26, 42, 0.2) 100%
    );
}
.fc {
    position: absolute;
    bottom: 0;
    background: #0b1420;
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 2px rgba(80,140,220,0.1);
}
.fc::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 5px,
        rgba(80,140,200,0.08) 5px,
        rgba(80,140,200,0.08) 6px
    );
}

/* === ANTENNA TOWERS === */
.antenna-towers {
    position: absolute;
    bottom: 18%;
    left: 0; right: 0;
    height: 30%;
    z-index: 3;
    pointer-events: none;
}
.antenna {
    position: absolute;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to top, #1a2540, #2a3a5a);
}
.antenna::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
    animation: antenna-blink 2s infinite;
}
.antenna::after {
    content: '';
    position: absolute;
    top: 15%;
    left: -8px;
    width: 19px;
    height: 2px;
    background: #1a2540;
}
.antenna.a1 { left: 8%; height: 90px; }
.antenna.a2 { right: 6%; height: 70px; }
.antenna.a3 { left: 45%; height: 55px; }
@keyframes antenna-blink { 0%,45% { opacity: 1; } 50%,95% { opacity: 0.2; } 100% { opacity: 1; } }

/* === HARBOUR ELEMENTS (boats sliding across) === */
.harbour-elements {
    position: absolute;
    bottom: 11%;
    left: 0; right: 0;
    height: 10%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}
.harbour-elements::before {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 10px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 191, 105, 0.06) 12%,
        rgba(97, 218, 251, 0.08) 48%,
        rgba(255, 191, 105, 0.06) 88%,
        transparent 100%
    );
    filter: blur(1px);
}
.harbour-elements::after {
    content: '';
    position: absolute;
    inset: auto 6% 4px 6%;
    height: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
    filter: blur(8px);
}
.boat {
    position: absolute;
    bottom: 5px;
    width: 74px;
    height: 34px;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.18));
}
.boat-hull,
.boat-deck {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(180deg, #23344a 0%, #121d2a 100%);
    border-radius: 5px 5px 14px 14px;
}
.boat-cabin,
.yacht-cabin {
    position: absolute;
    bottom: 10px;
    background: linear-gradient(180deg, #30435d 0%, #1b2738 100%);
    border-radius: 4px 4px 2px 2px;
}
.boat-cabin::before,
.yacht-cabin::before {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    top: 4px;
    height: 4px;
    background: linear-gradient(90deg, rgba(255, 210, 124, 0.3), rgba(255, 210, 124, 0.08));
}
.boat-smokestack {
    position: absolute;
    left: 45px;
    bottom: 20px;
    width: 7px;
    height: 11px;
    border-radius: 2px 2px 0 0;
    background: #27364d;
}
.junk-sail {
    position: absolute;
    bottom: 11px;
    width: 20px;
    background: linear-gradient(180deg, rgba(198,96,70,0.92), rgba(119,39,26,0.92));
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    opacity: 0.86;
}
.junk-sail.sail-a { left: 19px; height: 28px; }
.junk-sail.sail-b { left: 36px; height: 22px; }
.water-cannon {
    position: absolute;
    left: 36px;
    bottom: 18px;
    width: 18px;
    height: 3px;
    background: #dce9ff;
    border-radius: 999px;
    transform: rotate(-18deg);
    transform-origin: left center;
}
.spray {
    position: absolute;
    left: 46px;
    bottom: 20px;
    width: 48px;
    height: 26px;
    border-top: 2px solid rgba(166, 233, 255, 0.85);
    border-radius: 999px 999px 0 0;
    opacity: 0;
}
.spray-b {
    width: 58px;
    height: 30px;
    left: 44px;
    bottom: 17px;
    border-top-color: rgba(214, 247, 255, 0.7);
}
.boat-light {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 6px #fbbf24;
    animation: boat-blink 3s infinite;
}
.ferry .boat-deck { height: 13px; }
.ferry .boat-cabin { left: 18px; width: 34px; height: 14px; }
.junk { width: 82px; }
.junk .boat-hull { height: 11px; background: linear-gradient(180deg, #41281d 0%, #25150f 100%); }
.tug { width: 68px; }
.tug .boat-cabin { left: 19px; width: 22px; height: 13px; }
.yacht { width: 70px; }
.yacht .boat-hull { height: 9px; border-radius: 5px 10px 15px 15px; }
.yacht .yacht-cabin { left: 28px; width: 20px; height: 10px; transform: skewX(-18deg); }
.fireboat { width: 86px; display: none; }
.fireboat .boat-hull { background: linear-gradient(180deg, #a72d2d 0%, #621616 100%); }
.fireboat .boat-cabin { left: 18px; width: 24px; height: 14px; }
.fireboat .boat-light { background: #7dd3fc; box-shadow: 0 0 8px #7dd3fc; }
.scene-alert-high .fireboat,
.scene-alert-critical .fireboat { display: block; }
.scene-alert-high .fireboat .spray,
.scene-alert-critical .fireboat .spray { opacity: 0.7; animation: water-spray 1.8s ease-in-out infinite; }
.scene-alert-critical .fireboat .spray-b { animation-delay: 0.4s; opacity: 0.9; }
.scene-alert-medium .harbour-elements { height: 11%; }
.scene-alert-critical .harbour-elements::before { opacity: 0.95; }

.buoy {
    position: absolute;
    bottom: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(252, 180, 74, 0.72);
    box-shadow: 0 0 8px rgba(252, 180, 74, 0.5);
    animation: buoy-bob 4.2s ease-in-out infinite;
}
.buoy::after {
    content: '';
    position: absolute;
    left: 3px;
    bottom: -12px;
    width: 4px;
    height: 12px;
    background: rgba(255,255,255,0.08);
}
.buoy-a { left: 19%; animation-delay: -0.8s; }
.buoy-b { left: 63%; animation-delay: -2.2s; }
.buoy-c { right: 22%; animation-delay: -1.5s; }
@keyframes boat-blink { 0%,80% { opacity: 1; } 85%,95% { opacity: 0.2; } 100% { opacity: 1; } }
.boat.b1 { animation: boat-slide-r 45s linear infinite -12s; bottom: 8px; }
.boat.b2 { animation: boat-slide-l 55s linear infinite -30s; bottom: 2px; }
.boat.b3 { animation: boat-slide-r 38s linear infinite -8s; bottom: 14px; transform: scale(0.9); }
.boat.b4 { animation: boat-slide-l 50s linear infinite -23s; bottom: 6px; transform: scale(1.08); }
.boat.b5 { animation: boat-slide-r 60s linear infinite -41s; bottom: 18px; transform: scale(0.8); }
@keyframes boat-slide-r { from { transform: translateX(-50px); } to { transform: translateX(calc(100vw + 50px)); } }
@keyframes boat-slide-l { from { transform: translateX(calc(100vw + 50px)); } to { transform: translateX(-50px); } }
@keyframes buoy-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes water-spray {
    0%, 100% { transform: translateY(0) scaleX(0.92); opacity: 0.35; }
    50% { transform: translateY(-3px) scaleX(1.06); opacity: 0.9; }
}

/* === NEON SIGNS (at street/building level, NOT sky) === */
.neon-signs {
    position: absolute;
    bottom: 18.8%;
    left: 0; right: 0;
    height: 13%;
    z-index: 4;
    pointer-events: none;
}
.neon {
    position: absolute;
    font-family: 'Arial Black', 'Arial', sans-serif;
    font-weight: 900;
    letter-spacing: 1px;
    opacity: 0.6;
}
.neon.n1 { bottom: 20%; left: 2.5%; font-size: 0.58rem; color: #ff6b9d; text-shadow: 0 0 8px #ff6b9d, 0 0 20px #ff6b9d; animation: neon-flicker 4s infinite; }
.neon.n2 { bottom: 12%; right: 3%; font-size: 0.52rem; color: #4ecdc4; text-shadow: 0 0 8px #4ecdc4, 0 0 20px #4ecdc4; animation: neon-flicker 5s infinite reverse; }
.neon.n3 { bottom: 34%; left: 18%; font-size: 0.5rem; color: #ffe66d; text-shadow: 0 0 6px #ffe66d, 0 0 16px #ffe66d; animation: neon-flicker 3.5s infinite; }
.neon.n4 { bottom: 10%; left: 11%; font-size: 0.44rem; color: #a78bfa; text-shadow: 0 0 8px #a78bfa, 0 0 18px #a78bfa; animation: neon-flicker 6s infinite; }
.neon.n5 { bottom: 18%; right: 16%; font-size: 0.58rem; color: #f472b6; text-shadow: 0 0 8px #f472b6, 0 0 20px #f472b6; animation: neon-flicker 4.5s infinite reverse; }
.neon.n6 { bottom: 32%; right: 9%; font-size: 0.5rem; color: #34d399; text-shadow: 0 0 8px #34d399, 0 0 16px #34d399; animation: neon-flicker 5.5s infinite; }
@keyframes neon-flicker {
    0%,19%,21%,23%,25%,54%,56%,100% { opacity: 0.6; }
    20%,24%,55% { opacity: 0.15; }
}

/* === STREET ELEMENTS (foreground) === */
.street-elements {
    position: absolute;
    bottom: 18.6%;
    left: 0; right: 0;
    height: 7%;
    z-index: 12;
    pointer-events: none;
}
.lamp {
    position: absolute;
    bottom: 0;
    width: 3px;
    height: 28px;
    background: #2a3a5a;
}
.lamp::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -4px;
    width: 11px;
    height: 5px;
    background: #1a2540;
    border-radius: 3px 3px 0 0;
}
.lamp::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,200,100,0.6);
    box-shadow: 0 3px 12px rgba(255,200,100,0.3);
}
.lamp.l1 { left: 4%; }
.lamp.l2 { left: 22%; }
.lamp.l3 { left: 48%; }
.lamp.l4 { left: 72%; }
.lamp.l5 { right: 5%; }

.waterfront-foreground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 19%;
    height: 10.5%;
    z-index: 24;
    pointer-events: none;
}
.seawall {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    background: linear-gradient(180deg, rgba(34, 49, 72, 0.65) 0%, rgba(10, 18, 32, 0.96) 100%);
    border-top: 1px solid rgba(164, 195, 245, 0.2);
    box-shadow: 0 -2px 8px rgba(76, 118, 181, 0.12);
}
.pier {
    position: absolute;
    bottom: 8px;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(180deg, #3b4f6a 0%, #1b2a3d 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}
.pier-a { left: 8%; width: 126px; }
.pier-b { right: 10%; width: 162px; }
.pier-post {
    position: absolute;
    bottom: -14px;
    width: 4px;
    height: 16px;
    background: #162131;
}
.pier-post:nth-child(1) { left: 12px; }
.pier-post:nth-child(2) { left: 44px; }
.pier-post:nth-child(3) { left: 76px; }
.pier-post:nth-child(4) { left: 108px; }
.cargo-cluster {
    position: absolute;
    bottom: 10px;
    display: flex;
    gap: 3px;
}
.cargo-cluster span {
    width: 18px;
    height: 12px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #455f80 0%, #223249 100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.cluster-a { left: 3.2%; }
.cluster-b { right: 6.3%; }
.harbour-kiosk {
    position: absolute;
    left: 14.2%;
    bottom: 10px;
    width: 42px;
    height: 22px;
    background: linear-gradient(180deg, #344a65 0%, #172433 100%);
    border-radius: 2px 2px 0 0;
}
.harbour-kiosk::before {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    top: 7px;
    height: 6px;
    background: rgba(255, 186, 94, 0.28);
    box-shadow: 0 0 10px rgba(255, 186, 94, 0.22);
}
.signal-beacon,
.bollard {
    position: absolute;
    bottom: 10px;
}
.signal-beacon {
    width: 3px;
    height: 24px;
    background: #3b4f6a;
}
.signal-beacon::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 87, 87, 0.95);
    box-shadow: 0 0 10px rgba(255, 87, 87, 0.78);
}
.beacon-a { left: 46%; }
.beacon-b { right: 20%; }
.bollard {
    width: 12px;
    height: 10px;
    border-radius: 3px 3px 0 0;
    background: #273546;
}
.bollard-a { left: 18%; }
.bollard-b { left: 55%; }
.bollard-c { right: 14%; }

/* === STATS OVERLAY (top-left) === */
.skyline-stats {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 26;
    display: flex;
    gap: 8px;
}
.s-stat {
    min-width: 58px;
    padding: 6px 12px;
    text-align: center;
    background: rgba(5,10,20,0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    box-shadow: 0 8px 14px rgba(0,0,0,0.28);
}
.s-val {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #ecf4ff;
    line-height: 1.2;
}
.s-lbl {
    display: block;
    font-size: 0.7rem;
    color: rgba(234, 242, 255, 0.72);
    text-transform: uppercase;
    margin-top: 3px;
    letter-spacing: 0.08em;
}
.s-hot .s-val { color: #ef4444; }

/* === BUILDINGS GROUND === */
.skyline-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 19%;
    height: 49%;
    z-index: 10;
}
.ground-base {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12%;
    z-index: 1;
    background: linear-gradient(180deg, rgba(14, 24, 40, 0) 0%, rgba(8, 14, 28, 0.45) 40%, rgba(7, 12, 24, 0.92) 100%);
}
.ground-base::before {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -2px;
    height: 16px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(22, 34, 52, 0.78) 12%,
        rgba(10, 18, 34, 0.95) 50%,
        rgba(22, 34, 52, 0.78) 88%,
        transparent 100%
    );
    filter: blur(1px);
}
.ground-base::after {
    content: '';
    position: absolute;
    inset: auto 12% 12px 12%;
    height: 30px;
    background: radial-gradient(ellipse at center, rgba(79, 120, 188, 0.11) 0%, transparent 70%);
}
.buildings-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.buildings-container-back { z-index: 10; }
.buildings-container-front { z-index: 30; }
.fx-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.fx-canvas-back { z-index: 20; }
.fx-canvas-front { z-index: 40; }
.building {
    position: absolute;
    bottom: 0;
    cursor: pointer;
    pointer-events: auto;
    transition: filter 0.2s, transform 0.2s;
}
.building:hover { filter: brightness(1.16) !important; z-index: 50 !important; transform: translateY(-6px); }
.building-back { opacity: 0.85; }
.building svg { display: block; }
.building-placard { display: none; }
.building-label {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}
.building-name {
    font-size: 0.78rem;
    color: #d7e0ee;
    font-weight: 600;
    display: block;
    text-shadow: 0 1px 4px rgba(0,0,0,0.85);
    background: rgba(4, 10, 20, 0.45);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 2px 7px;
    border-radius: 999px;
}
.building-back .building-label { opacity: 1; color: #f7fbff; }

/* === HOVER TOOLTIP (above fire canvas) === */
.building-tooltip {
    position: absolute;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    transform: translateX(-50%);
}
.building-tooltip.visible { opacity: 1; }
.building-tooltip .tt-inner {
    background: rgba(8,12,25,0.94);
    border: 1px solid rgba(249,115,22,0.6);
    border-radius: 10px;
    padding: 10px 16px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 12px rgba(249,115,22,0.25);
}
.building-tooltip .tt-inner::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(8,12,25,0.94);
    border-right: 1px solid rgba(249,115,22,0.6);
    border-bottom: 1px solid rgba(249,115,22,0.6);
}
.tt-name { font-size: 0.88rem; font-weight: 700; color: #f1f5f9; margin-bottom: 4px; }
.tt-pct { font-size: 1.2rem; font-weight: 800; }
.tt-pct.s0 { color: #64748b; }
.tt-pct.s1 { color: #4ade80; }
.tt-pct.s2 { color: #facc15; }
.tt-pct.s3 { color: #fb923c; }
.tt-pct.s4 { color: #f87171; }
.tt-pct.s5 { color: #fb7185; }
.tt-pct.s6 { color: #c084fc; }
.tt-detail { font-size: 0.7rem; color: #7a8ba3; margin-top: 3px; }
.tt-overage { font-size: 0.68rem; color: #ef4444; font-weight: 600; margin-top: 2px; }

/* === HARBOUR WATER === */
.harbour {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 19%;
    z-index: 5;
    overflow: hidden;
}
.water-surface {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(25, 49, 92, 0.45) 0%,
        rgba(12, 28, 56, 0.72) 25%,
        rgba(5, 13, 28, 0.94) 100%
    );
    border-top: 1px solid rgba(104, 153, 229, 0.26);
}
.water-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0px, rgba(109, 160, 242, 0.025) 3px, transparent 7px);
    animation: water-shimmer 6s ease-in-out infinite;
}
.water-surface::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 191, 105, 0.18), transparent 8%),
        radial-gradient(circle at 34% 58%, rgba(96, 165, 250, 0.12), transparent 10%),
        radial-gradient(circle at 52% 28%, rgba(255, 191, 105, 0.14), transparent 9%),
        radial-gradient(circle at 69% 62%, rgba(96, 165, 250, 0.1), transparent 11%),
        radial-gradient(circle at 84% 32%, rgba(255, 191, 105, 0.16), transparent 9%);
    opacity: 0.72;
}
@keyframes water-shimmer { 0%,100% { opacity: 0.45; } 50% { opacity: 1; transform: translateX(5px); } }

.harbour-elements {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.8%;
    height: 18%;
    z-index: 8;
    pointer-events: none;
    overflow: hidden;
}
.harbour-elements::before {
    content: '';
    position: absolute;
    inset: auto 4% 10px 4%;
    height: 46px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
    filter: blur(10px);
}
.boat {
    --boat-scale: 1;
    position: absolute;
    width: 92px;
    height: 40px;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.3));
    transform: translateX(0) scale(var(--boat-scale));
    transform-origin: center bottom;
}
.boat-hull,
.boat-deck {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 13px;
    background: linear-gradient(180deg, #4a6688 0%, #1c2d43 100%);
    border-radius: 5px 5px 14px 14px;
}
.boat-cabin,
.yacht-cabin {
    position: absolute;
    bottom: 11px;
    background: linear-gradient(180deg, #597495 0%, #24364d 100%);
    border-radius: 4px 4px 2px 2px;
}
.boat-cabin::before,
.yacht-cabin::before {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    top: 4px;
    height: 4px;
    background: linear-gradient(90deg, rgba(255, 210, 124, 0.4), rgba(255, 210, 124, 0.1));
}
.boat-smokestack {
    position: absolute;
    left: 45px;
    bottom: 20px;
    width: 7px;
    height: 11px;
    border-radius: 2px 2px 0 0;
    background: #27364d;
}
.junk-sail {
    position: absolute;
    bottom: 12px;
    width: 22px;
    background: linear-gradient(180deg, rgba(198,96,70,0.94), rgba(119,39,26,0.94));
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    opacity: 0.9;
}
.junk-sail.sail-a { left: 22px; height: 30px; }
.junk-sail.sail-b { left: 42px; height: 24px; }
.water-cannon {
    position: absolute;
    left: 40px;
    bottom: 20px;
    width: 18px;
    height: 3px;
    background: #dce9ff;
    border-radius: 999px;
    transform: rotate(-18deg);
    transform-origin: left center;
}
.spray {
    position: absolute;
    left: 50px;
    bottom: 22px;
    width: 48px;
    height: 26px;
    border-top: 2px solid rgba(166, 233, 255, 0.85);
    border-radius: 999px 999px 0 0;
    opacity: 0;
}
.spray-b {
    width: 58px;
    height: 30px;
    left: 48px;
    bottom: 18px;
    border-top-color: rgba(214, 247, 255, 0.7);
}
.boat-light {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 6px #fbbf24;
    animation: boat-blink 3s infinite;
}
.ferry .boat-deck { height: 15px; }
.ferry .boat-cabin { left: 22px; width: 40px; height: 15px; }
.junk { width: 102px; }
.junk .boat-hull { height: 12px; background: linear-gradient(180deg, #6b4533 0%, #2f1c15 100%); }
.tug { width: 82px; }
.tug .boat-cabin { left: 20px; width: 26px; height: 14px; }
.yacht { width: 84px; }
.yacht .boat-hull { height: 10px; border-radius: 5px 10px 15px 15px; }
.yacht .yacht-cabin { left: 32px; width: 22px; height: 11px; transform: skewX(-18deg); }
.fireboat { width: 108px; display: none; }
.fireboat .boat-hull { background: linear-gradient(180deg, #a72d2d 0%, #621616 100%); }
.fireboat .boat-cabin { left: 20px; width: 28px; height: 14px; }
.fireboat .boat-light { background: #7dd3fc; box-shadow: 0 0 8px #7dd3fc; }
.scene-alert-high .fireboat,
.scene-alert-critical .fireboat { display: block; }
.scene-alert-high .fireboat .spray,
.scene-alert-critical .fireboat .spray { opacity: 0.7; animation: water-spray 1.8s ease-in-out infinite; }
.scene-alert-critical .fireboat .spray-b { animation-delay: 0.4s; opacity: 0.9; }

.buoy {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(252, 180, 74, 0.88);
    box-shadow: 0 0 10px rgba(252, 180, 74, 0.7);
    animation: buoy-bob 4.2s ease-in-out infinite;
}
.buoy::after {
    content: '';
    position: absolute;
    left: 3px;
    bottom: -12px;
    width: 4px;
    height: 12px;
    background: rgba(255,255,255,0.08);
}
.buoy-a { left: 20%; bottom: 18px; animation-delay: -0.8s; }
.buoy-b { left: 64%; bottom: 42px; animation-delay: -2.2s; }
.buoy-c { right: 21%; bottom: 12px; animation-delay: -1.5s; }

.boat.b1 { --boat-scale: 1.02; bottom: 56px; animation: boat-drift-right 52s linear infinite -12s; }
.boat.b2 { --boat-scale: 0.9; bottom: 20px; animation: boat-drift-left 66s linear infinite -34s; }
.boat.b3 { --boat-scale: 0.84; bottom: 88px; animation: boat-drift-right 60s linear infinite -18s; }
.boat.b4 { --boat-scale: 0.96; bottom: 34px; animation: boat-drift-left 48s linear infinite -26s; }
.boat.b5 { --boat-scale: 0.78; bottom: 74px; animation: boat-drift-right 72s linear infinite -43s; }
.boat.b6 { --boat-scale: 0.72; bottom: 102px; animation: boat-drift-left 78s linear infinite -12s; }
.boat.b7 { --boat-scale: 0.88; bottom: 10px; animation: boat-drift-right 58s linear infinite -7s; }
.boat.b8 { --boat-scale: 0.8; bottom: 52px; animation: boat-drift-left 70s linear infinite -51s; }
@keyframes boat-drift-right {
    from { transform: translateX(-160px) scale(var(--boat-scale)); }
    to { transform: translateX(calc(100vw + 160px)) scale(var(--boat-scale)); }
}
@keyframes boat-drift-left {
    from { transform: translateX(calc(100vw + 160px)) scale(var(--boat-scale)); }
    to { transform: translateX(-160px) scale(var(--boat-scale)); }
}
@keyframes boat-blink { 0%,80% { opacity: 1; } 85%,95% { opacity: 0.2; } 100% { opacity: 1; } }
@keyframes buoy-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes water-spray {
    0%, 100% { transform: translateY(0) scaleX(0.92); opacity: 0.35; }
    50% { transform: translateY(-3px) scaleX(1.06); opacity: 0.9; }
}

.reflections {
    position: absolute;
    inset: 0;
    top: 2px;
    transform: scaleY(-0.3);
    transform-origin: top;
    opacity: 0.15;
    filter: blur(5px);
    pointer-events: none;
}

/* === POPUP MODAL === */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.popup-overlay.show { opacity: 1; pointer-events: auto; }
.popup-card {
    background: #111b2e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 28px 32px;
    min-width: 340px;
    max-width: 440px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.popup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.popup-header h2 { font-size: 1.1rem; font-weight: 700; }
.popup-close { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.popup-close:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.popup-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.popup-stat { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; }
.popup-stat-val { font-size: 1.3rem; font-weight: 700; display: block; }
.popup-stat-lbl { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; margin-top: 4px; }
.popup-stat.danger .popup-stat-val { color: #ef4444; }
.popup-stat.warn .popup-stat-val { color: #f97316; }
.popup-stat.ok .popup-stat-val { color: #22c55e; }
.popup-stat.purple .popup-stat-val { color: #a855f7; }
.popup-bar { margin-top: 16px; height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; }
.popup-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }