/* ===== SAKURA THEME v2 ===== */
/* Dark night/dusk atmosphere — vibrant pink blossoms against deep sky */

:root {
    --sakura-sky-top: #0a0618;
    --sakura-sky-mid: #1a0a2e;
    --sakura-sky-bot: #2d1b4e;
    --sakura-horizon: #4a2068;
    --sakura-mountain: #1e1235;
    --sakura-mountain-far: #2a1845;
    --sakura-ground: #1a2e1a;
    --sakura-river: #0d253a;
    --sakura-glow: rgba(236, 64, 122, 0.15);
}

/* ===== MAIN SCENE ===== */
.sakura-scene {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg,
        var(--sakura-sky-top) 0%,
        var(--sakura-sky-mid) 25%,
        var(--sakura-sky-bot) 50%,
        var(--sakura-horizon) 70%,
        #5c2d82 85%,
        #3d1f5c 100%
    );
}

/* ===== WATERMARK ===== */
.sakura-watermark {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    max-width: 850px;
    height: auto;
    pointer-events: none;
    z-index: 2;
}
.sakura-watermark text {
    fill: rgba(255, 183, 197, 0.25);
    font-size: 48px;
    font-weight: 300;
    font-family: 'Georgia', 'Times New Roman', serif;
    letter-spacing: 12px;
    text-transform: uppercase;
}

/* ===== MOON ===== */
.sakura-moon {
    position: absolute;
    top: 6%;
    right: 12%;
    width: 5.5vw;
    min-width: 55px;
    max-width: 80px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 65% 30%, rgba(200,200,180,0.12) 8%, transparent 14%),
        radial-gradient(circle at 40% 60%, rgba(180,180,160,0.1) 6%, transparent 12%),
        radial-gradient(circle at 30% 25%, rgba(160,160,140,0.08) 5%, transparent 10%),
        radial-gradient(circle at 35% 35%, #fff8e1, #ffe8a0 40%, #ffd54f 100%);
    box-shadow:
        0 0 20px 10px rgba(255, 255, 230, 0.3),
        0 0 50px rgba(255, 224, 130, 0.3),
        0 0 100px rgba(255, 224, 130, 0.15),
        0 0 150px rgba(255, 183, 197, 0.08);
    z-index: 3;
}
/* Outer glow halo */
.sakura-moon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 250%;
    height: 250%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,200,0.12) 0%, rgba(255,240,180,0.05) 40%, transparent 70%);
    pointer-events: none;
}
/* Moonbeam */
.sakura-moonbeam {
    position: absolute;
    top: 12%;
    right: 10%;
    width: 12vw;
    height: 70%;
    background: radial-gradient(ellipse at 50% 0%,
        rgba(255,255,220,0.04) 0%,
        rgba(255,255,200,0.02) 30%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 2;
}

/* ===== SKY ===== */
.sakura-sky {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Stars */
.sakura-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.sakura-stars .star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: star-twinkle 3s ease-in-out infinite alternate;
}
.sakura-stars .star.s-sm { width: 1px; height: 1px; }
.sakura-stars .star.s-md { width: 2px; height: 2px; }
.sakura-stars .star.s-lg { width: 3px; height: 3px; box-shadow: 0 0 3px rgba(255,255,255,0.5); }
@keyframes star-twinkle {
    0% { opacity: 0.2; }
    100% { opacity: 1.0; }
}

/* Shooting star */
.shooting-star {
    position: absolute;
    top: 10%;
    right: 20%;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0.9), transparent);
    border-radius: 2px;
    transform: rotate(35deg);
    opacity: 0;
    z-index: 4;
    pointer-events: none;
}
.shooting-star.active {
    animation: shoot 1s ease-out forwards;
}
@keyframes shoot {
    0% { opacity: 1; transform: rotate(35deg) translateX(0); }
    100% { opacity: 0; transform: rotate(35deg) translateX(-200px); }
}

/* Clouds — multi-layer drifting */
.sakura-clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.s-cloud {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(180, 150, 200, 0.10) 0%, transparent 70%);
    animation: sakura-cloud-drift linear infinite;
}
.sc1 { width: 280px; height: 80px; top: 12%; left: -280px; animation-duration: 90s; }
.sc2 { width: 180px; height: 55px; top: 28%; left: -180px; animation-duration: 120s; animation-delay: -40s; }
.sc3 { width: 320px; height: 90px; top: 8%; left: -320px; animation-duration: 75s; animation-delay: -55s; }

@keyframes sakura-cloud-drift {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100vw + 350px)); }
}

/* Birds */
.sakura-birds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.s-bird {
    position: absolute;
    width: 12px;
    height: 5px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 2.5px solid rgba(200, 180, 220, 0.5);
    border-radius: 0 0 50% 50%;
    animation: bird-fly linear infinite;
}
.sb1 { top: 20%; left: -20px; animation-duration: 22s; }
.sb2 { top: 15%; left: -20px; animation-duration: 28s; animation-delay: -10s; }
.sb3 { top: 25%; left: -20px; animation-duration: 35s; animation-delay: -18s; }

@keyframes bird-fly {
    from { transform: translateX(0) translateY(0); }
    25% { transform: translateX(25vw) translateY(-6px); }
    50% { transform: translateX(50vw) translateY(3px); }
    75% { transform: translateX(75vw) translateY(-4px); }
    to { transform: translateX(105vw) translateY(0); }
}

/* ===== ATMOSPHERIC FOG LAYERS ===== */
.sakura-fog {
    position: absolute;
    left: 0; right: 0;
    height: 15%;
    pointer-events: none;
    z-index: 8;
}
.fog-layer-1 {
    bottom: 35%;
    background: linear-gradient(180deg, transparent 0%, rgba(100, 60, 150, 0.08) 50%, transparent 100%);
}
.fog-layer-2 {
    bottom: 25%;
    background: linear-gradient(180deg, transparent 0%, rgba(60, 30, 100, 0.12) 50%, transparent 100%);
}
.fog-layer-3 {
    bottom: 42%;
    background: linear-gradient(180deg, transparent 0%, rgba(140, 80, 180, 0.06) 50%, transparent 100%);
}

/* ===== MOUNTAINS ===== */
.sakura-mountains {
    position: absolute;
    bottom: 28%;
    width: 100%;
    height: 40%;
    z-index: 3;
}
.s-mountain {
    position: absolute;
    bottom: 0;
}
.sm1 {
    left: -5%;
    width: 45%;
    height: 70%;
    background: linear-gradient(180deg, var(--sakura-mountain-far) 0%, var(--sakura-mountain) 100%);
    clip-path: polygon(0% 100%, 20% 30%, 35% 10%, 50% 25%, 65% 5%, 80% 20%, 100% 100%);
    opacity: 0.5;
}
.sm2 {
    left: 20%;
    width: 55%;
    height: 100%;
    background: linear-gradient(180deg, var(--sakura-mountain-far) 0%, var(--sakura-mountain) 60%, rgba(30, 18, 53, 0.9) 100%);
    clip-path: polygon(0% 100%, 15% 45%, 30% 20%, 45% 5%, 55% 0%, 65% 8%, 80% 30%, 95% 50%, 100% 100%);
    opacity: 0.7;
}
.sm3 {
    right: -5%;
    width: 40%;
    height: 60%;
    background: linear-gradient(180deg, var(--sakura-mountain-far) 0%, var(--sakura-mountain) 100%);
    clip-path: polygon(0% 100%, 25% 40%, 45% 10%, 60% 5%, 75% 15%, 90% 35%, 100% 100%);
    opacity: 0.45;
}
/* Snow caps */
.sm2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 40%;
    width: 20%;
    height: 8%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0 0 50% 50%;
    filter: blur(2px);
}

/* ===== TORII GATE (left background) ===== */
.sakura-torii {
    position: absolute;
    left: 1%;
    bottom: 24%;
    width: 16%;
    max-width: 200px;
    height: auto;
    z-index: 4;
    opacity: 0.75;
    filter: drop-shadow(0 2px 8px rgba(139, 0, 0, 0.4));
}

/* ===== JAPANESE CASTLE (right background) ===== */
.sakura-castle {
    position: absolute;
    right: 1%;
    bottom: 26%;
    width: 11%;
    max-width: 140px;
    height: auto;
    z-index: 4;
    opacity: 0.6;
    filter: drop-shadow(0 2px 8px rgba(40, 20, 60, 0.4));
}

/* ===== TREES GROUND ===== */
.sakura-ground {
    position: absolute;
    left: 0; right: 0; bottom: 18%;
    height: 52%;
    z-index: 10;
}
.sakura-ground .ground-grass {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 12%;
    background: linear-gradient(180deg, #2d5a27 0%, #1a3d15 60%, #0f2a0d 100%);
    border-radius: 2px 2px 0 0;
}
/* Grass detail */
.sakura-ground .ground-grass::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg,
        transparent, transparent 8px,
        rgba(100, 180, 80, 0.2) 8px, rgba(100, 180, 80, 0.2) 10px
    );
}

/* Tree containers */
.trees-container {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 100%;
    pointer-events: none;
}
.trees-container-back { z-index: 15; }
.trees-container-front { z-index: 30; }

/* ===== TREE CANVAS ===== */
.sakura-tree-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}

/* Distant tree silhouette layer */
.sakura-distant-trees {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 8%;
    z-index: 4;
}
.distant-tree-layer {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100%;
}
.distant-tree-layer.dt1 {
    clip-path: polygon(0% 100%, 2% 60%, 5% 40%, 8% 55%, 12% 30%, 15% 45%, 18% 20%, 22% 50%, 26% 35%, 30% 55%, 33% 25%, 37% 45%, 40% 60%, 44% 35%, 48% 50%, 52% 30%, 55% 55%, 58% 40%, 62% 20%, 66% 45%, 70% 55%, 74% 35%, 78% 50%, 82% 25%, 86% 45%, 90% 55%, 93% 40%, 96% 60%, 100% 100%);
    background: rgba(15, 8, 25, 0.7);
}
.distant-tree-layer.dt2 {
    clip-path: polygon(0% 100%, 4% 70%, 8% 50%, 12% 65%, 16% 40%, 20% 55%, 24% 70%, 28% 45%, 32% 60%, 36% 35%, 40% 55%, 45% 70%, 50% 45%, 54% 60%, 58% 75%, 62% 50%, 66% 65%, 70% 40%, 75% 55%, 80% 70%, 84% 50%, 88% 65%, 92% 75%, 96% 55%, 100% 100%);
    background: rgba(20, 12, 35, 0.5);
    height: 80%;
}

/* ===== FULL-SCENE PETAL CANVAS ===== */
.sakura-fx-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
}

/* ===== RIVER BANK ===== */
.sakura-bank {
    position: absolute;
    left: 0; right: 0; bottom: 16%;
    height: 6%;
    z-index: 12;
    background: linear-gradient(180deg, #1a3d15 0%, #2a1f0a 50%, #3d2b12 100%);
}
/* Wood fence upgrade */
.wood-fence {
    position: absolute;
    bottom: 100%;
    left: 10%; right: 10%;
    height: 20px;
    background:
        linear-gradient(180deg, #5c3a1e 0px, #5c3a1e 2px, transparent 2px) top / 100% 3px no-repeat,
        repeating-linear-gradient(90deg,
            #4E342E 0px, #4E342E 2px,
            transparent 2px, transparent 50px
        );
    opacity: 0.4;
    pointer-events: none;
}
.sakura-bank::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(100, 180, 80, 0.15);
}
/* Stone lanterns — upgraded */
.stone-lantern {
    position: absolute;
    bottom: 100%;
    width: 18px;
    height: 45px;
    z-index: 13;
}
.stone-lantern .sl-base {
    position: absolute;
    bottom: 0; left: 1px; right: 1px;
    height: 30%;
    background: linear-gradient(180deg, #607D8B, #455A64);
    border-radius: 2px;
}
.stone-lantern .sl-body {
    position: absolute;
    bottom: 30%; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(180deg, #78909C, #546E7A);
    border-radius: 3px;
}
.stone-lantern .sl-roof {
    position: absolute;
    bottom: 70%; left: -4px; right: -4px;
    height: 18%;
    background: #607D8B;
    border-radius: 3px 3px 0 0;
    clip-path: polygon(10% 100%, 0% 0%, 100% 0%, 90% 100%);
}
.stone-lantern .sl-light {
    position: absolute;
    bottom: 35%; left: 25%; right: 25%;
    height: 30%;
    background: rgba(255, 200, 50, 0.7);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 200, 50, 0.5), 0 0 25px rgba(255, 180, 50, 0.3);
    animation: lantern-glow 3s ease-in-out infinite alternate;
}
@keyframes lantern-glow {
    from { opacity: 0.6; box-shadow: 0 0 8px rgba(255, 200, 50, 0.3); }
    to { opacity: 1.0; box-shadow: 0 0 15px rgba(255, 200, 50, 0.6), 0 0 30px rgba(255, 180, 50, 0.3); }
}
.sl1 { left: 1%; }
.sl2 { right: 1%; }

/* ===== BRIDGE (Red arched Japanese bridge) ===== */
.sakura-bridge {
    position: absolute;
    bottom: 13%;
    left: 30%;
    width: 38%;
    height: 12%;
    z-index: 50;
}
.bridge-svg {
    width: 100%;
    height: 100%;
}
/* Bridge reflection */
.bridge-reflection {
    position: absolute;
    bottom: 0; left: 32%; width: 36%; height: 6%;
    z-index: 6;
    transform: scaleY(-1);
    opacity: 0.15;
    filter: blur(2px);
    pointer-events: none;
}
.bridge-reflection .bridge-svg { width: 100%; height: 100%; }
/* Bridge lanterns */
.bridge-lantern {
    position: absolute;
    bottom: 90%;
    width: 10px; height: 14px;
    background: #cc3333;
    border-radius: 50% 50% 40% 40%;
    box-shadow: 0 0 8px rgba(255, 100, 50, 0.5), inset 0 -2px 4px rgba(0,0,0,0.3);
}
.bridge-lantern::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 3px;
    width: 4px; height: 5px;
    background: linear-gradient(180deg, #cc3333, #881111);
    border-radius: 0 0 2px 2px;
}
.bridge-lantern.bl-left { left: 8%; }
.bridge-lantern.bl-right { right: 8%; }

/* ===== RIVER ===== */
.sakura-river {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 18%;
    background: linear-gradient(180deg, #0d1a3a 0%, #0a1230 40%, #071020 100%);
    overflow: hidden;
    z-index: 5;
}
.river-surface {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(90deg,
            transparent 0%,
            rgba(100, 180, 255, 0.04) 8%,
            transparent 16%,
            rgba(80, 160, 240, 0.03) 24%,
            transparent 32%
        ),
        repeating-linear-gradient(180deg,
            transparent 0%,
            rgba(100, 200, 255, 0.02) 25%,
            transparent 50%
        );
    background-size: 300% 100%, 100% 200%;
    animation: river-shimmer 8s linear infinite;
}
.river-reflect {
    position: absolute;
    top: 5%;
    left: 10%; right: 10%;
    height: 40%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 150, 180, 0.06) 30%,
        rgba(255, 150, 180, 0.1) 50%,
        rgba(255, 150, 180, 0.06) 70%,
        transparent
    );
    border-radius: 50%;
    filter: blur(8px);
    animation: river-wave 8s ease-in-out infinite reverse;
}
/* Moon reflection on river — soft column of light */
.river-moonlight {
    position: absolute;
    top: 0;
    right: 12%;
    width: 10%;
    height: 100%;
    background: radial-gradient(ellipse at 50% 0%,
        rgba(255,255,200,0.12) 0%,
        rgba(255,255,180,0.06) 25%,
        rgba(255,255,160,0.02) 50%,
        transparent 80%
    );
    animation: moon-reflect-sway 6s ease-in-out infinite;
    pointer-events: none;
}
/* Shimmer ripples across whole surface */
.river-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80px 4px at 15% 30%, rgba(180,220,255,0.12) 0%, transparent 100%),
        radial-gradient(ellipse 60px 3px at 40% 60%, rgba(180,220,255,0.10) 0%, transparent 100%),
        radial-gradient(ellipse 90px 4px at 65% 20%, rgba(200,230,255,0.08) 0%, transparent 100%),
        radial-gradient(ellipse 70px 3px at 80% 70%, rgba(180,220,255,0.10) 0%, transparent 100%),
        radial-gradient(ellipse 50px 3px at 25% 80%, rgba(200,240,255,0.08) 0%, transparent 100%),
        radial-gradient(ellipse 85px 4px at 55% 45%, rgba(180,210,255,0.09) 0%, transparent 100%);
    animation: ripple-drift 12s ease-in-out infinite alternate;
}
/* Water sparkles — more and brighter */
.river-sparkle {
    position: absolute;
    width: 3px; height: 3px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(200,230,255,0.6);
    animation: sparkle-blink 2.5s ease-in-out infinite;
}
.river-sparkle:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.river-sparkle:nth-child(2) { top: 50%; left: 35%; animation-delay: 0.8s; }
.river-sparkle:nth-child(3) { top: 30%; left: 55%; animation-delay: 1.6s; }
.river-sparkle:nth-child(4) { top: 65%; left: 45%; animation-delay: 0.4s; }
.river-sparkle:nth-child(5) { top: 40%; left: 75%; animation-delay: 1.2s; }
.river-sparkle:nth-child(6) { top: 55%; left: 20%; animation-delay: 2.0s; width: 2px; height: 2px; }
.river-sparkle:nth-child(7) { top: 25%; left: 65%; animation-delay: 0.6s; width: 4px; height: 4px; }
.river-sparkle:nth-child(8) { top: 70%; left: 85%; animation-delay: 1.8s; width: 2px; height: 2px; }
@keyframes river-shimmer {
    0% { background-position: 0% 0%, 0% 0%; }
    100% { background-position: -300% 0%, 0% -200%; }
}
@keyframes river-wave {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}
@keyframes ripple-drift {
    0% { transform: translateX(0); opacity: 0.6; }
    50% { transform: translateX(20px); opacity: 1; }
    100% { transform: translateX(-15px); opacity: 0.7; }
}
@keyframes moon-reflect-sway {
    0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.8; }
    50% { transform: translateX(3px) scaleX(1.2); opacity: 1; }
}
@keyframes sparkle-blink {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ===== HANAMI VIEWERS (animated park people) ===== */
.sakura-viewers {
    position: absolute;
    bottom: 18%; left: 0; right: 0;
    height: 120px;
    z-index: 45;
    pointer-events: none;
    overflow: visible;
}
.viewer-group {
    position: absolute;
    bottom: 5px;
    height: 35px;
    opacity: 0;
    transform: translateX(-50%);
    animation: viewer-fade-in 0.8s ease forwards;
}
.viewer-group svg {
    height: 100%;
    width: auto;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
@keyframes viewer-fade-in {
    from { opacity: 0; transform: translateX(-50%) translateY(5px); }
    to { opacity: 0.8; transform: translateX(-50%) translateY(0); }
}

/* ===== TICKER OVERRIDE ===== */
.sakura-ticker {
    background: rgba(10, 6, 24, 0.85) !important;
    border-top: 1px solid rgba(236, 64, 122, 0.2) !important;
    backdrop-filter: blur(6px);
}
.sakura-ticker .ticker-scroll {
    color: rgba(255, 200, 220, 0.9) !important;
}

/* ===== TOOLTIP ===== */
.sakura-tooltip {
    position: absolute;
    display: none;
    pointer-events: none;
    z-index: 100;
    transform: translateX(-50%);
    transition: opacity 0.15s;
}
.sakura-tooltip.visible {
    display: block;
}
.sakura-tooltip .tt-inner {
    background: rgba(15, 8, 30, 0.94);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(236, 64, 122, 0.6);
    border-radius: 10px;
    padding: 10px 16px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7), 0 0 12px rgba(236, 64, 122, 0.25);
}
.sakura-tooltip .tt-inner::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(15, 8, 30, 0.94);
    border-right: 1px solid rgba(236, 64, 122, 0.6);
    border-bottom: 1px solid rgba(236, 64, 122, 0.6);
}
.sakura-tooltip .tt-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f8bbd0;
    margin-bottom: 4px;
}
.sakura-tooltip .tt-pct {
    font-size: 1.2rem;
    font-weight: 800;
}
.sakura-tooltip .tt-pct.s0 { color: #64748b; }
.sakura-tooltip .tt-pct.s1 { color: #4ade80; }
.sakura-tooltip .tt-pct.s2 { color: #facc15; }
.sakura-tooltip .tt-pct.s3 { color: #fb923c; }
.sakura-tooltip .tt-pct.s4 { color: #f87171; }
.sakura-tooltip .tt-pct.s5 { color: #fb7185; }
.sakura-tooltip .tt-pct.s6 { color: #c084fc; }
.sakura-tooltip .tt-detail {
    font-size: 0.7rem;
    color: #7a8ba3;
    margin-top: 3px;
}
.sakura-tooltip .tt-overage {
    font-size: 0.68rem;
    color: #ef4444;
    font-weight: 600;
    margin-top: 2px;
}
.sakura-tooltip .tt-stage {
    font-size: 0.65rem;
    color: rgba(255, 200, 220, 0.5);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== STATS OVERRIDE ===== */
.theme-sakura .scene-stats .s-stat {
    background: rgba(15, 8, 30, 0.85);
    backdrop-filter: blur(8px);
    border-color: rgba(236, 64, 122, 0.15);
}
.theme-sakura .scene-stats .s-val {
    color: #fce4ec;
}
.theme-sakura .scene-stats .s-lbl {
    color: rgba(248, 187, 208, 0.7);
}
.theme-sakura .scene-stats .s-hot .s-val {
    color: #f06292;
}
.theme-sakura .theme-btn.active {
    border-color: #EC407A;
    background: rgba(236, 64, 122, 0.2);
    box-shadow: 0 0 10px rgba(236, 64, 122, 0.3);
}

/* ===== MILKY WAY (天の川) ===== */
.sakura-milkyway {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}
.mw-band {
    position: absolute;
    top: -10%;
    left: 15%;
    width: 70%;
    height: 120%;
    background: linear-gradient(135deg,
        transparent 30%,
        rgba(150, 130, 220, 0.04) 38%,
        rgba(180, 160, 255, 0.07) 45%,
        rgba(200, 180, 255, 0.09) 50%,
        rgba(180, 160, 255, 0.07) 55%,
        rgba(150, 130, 220, 0.04) 62%,
        transparent 70%
    );
    transform: rotate(-25deg);
    filter: blur(6px);
}
.mw-stars {
    position: absolute;
    top: -10%;
    left: 15%;
    width: 70%;
    height: 120%;
    transform: rotate(-25deg);
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 45%, rgba(200,200,255,0.6) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 50% 20%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 55%, rgba(220,200,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 35%, rgba(200,180,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 50%, rgba(220,200,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 70%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 60% 40%, rgba(200,180,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 50%, rgba(180,160,255,0.5) 0%, transparent 100%);
    animation: mw-twinkle 6s ease-in-out infinite alternate;
}
@keyframes mw-twinkle {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* ===== FLYING CRANES (鶴) ===== */
.sakura-cranes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}
.crane {
    position: absolute;
    width: 45px;
    height: 22px;
    opacity: 0.85;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
    animation: crane-fly linear infinite;
}
.crane-1 {
    top: 12%;
    left: -50px;
    animation-duration: 28s;
    animation-delay: 0s;
}
.crane-2 {
    top: 16%;
    left: -50px;
    width: 38px;
    animation-duration: 32s;
    animation-delay: -8s;
}
.crane-3 {
    top: 10%;
    left: -50px;
    width: 32px;
    opacity: 0.6;
    animation-duration: 36s;
    animation-delay: -16s;
}
@keyframes crane-fly {
    0% { transform: translateX(0) translateY(0); }
    20% { transform: translateX(20vw) translateY(-8px); }
    40% { transform: translateX(40vw) translateY(4px); }
    60% { transform: translateX(60vw) translateY(-6px); }
    80% { transform: translateX(80vw) translateY(2px); }
    100% { transform: translateX(calc(100vw + 60px)) translateY(-4px); }
}

/* ===== FLOATING PAPER LANTERNS (提灯) ===== */
.sakura-sky-lanterns {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}
.sky-lantern {
    position: absolute;
    width: 12px;
    height: 16px;
    border-radius: 45% 45% 40% 40%;
    background: radial-gradient(ellipse at 50% 40%,
        rgba(255, 180, 80, 0.9) 0%,
        rgba(255, 120, 40, 0.7) 50%,
        rgba(200, 80, 20, 0.5) 100%
    );
    box-shadow:
        0 0 8px rgba(255, 160, 60, 0.6),
        0 0 20px rgba(255, 120, 40, 0.3);
    animation: lantern-float linear infinite;
}
.sky-lantern::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 3px;
    background: rgba(180, 80, 20, 0.6);
    border-radius: 0 0 50% 50%;
}
.sl-a { left: 15%; bottom: 30%; animation-duration: 45s; animation-delay: 0s; width: 14px; height: 18px; }
.sl-b { left: 35%; bottom: 20%; animation-duration: 55s; animation-delay: -15s; width: 10px; height: 14px; }
.sl-c { left: 60%; bottom: 35%; animation-duration: 50s; animation-delay: -25s; }
.sl-d { left: 78%; bottom: 25%; animation-duration: 60s; animation-delay: -35s; width: 11px; height: 15px; }
.sl-e { left: 48%; bottom: 40%; animation-duration: 48s; animation-delay: -10s; width: 9px; height: 12px; opacity: 0.7; }

@keyframes lantern-float {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    5% { opacity: 1; }
    50% { transform: translateY(-35vh) translateX(15px); }
    90% { opacity: 0.8; }
    100% { transform: translateY(-70vh) translateX(-10px); opacity: 0; }
}

/* ===== MOUNT FUJI (富士山) ===== */
.sakura-fuji {
    position: absolute;
    bottom: 35%;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    max-width: 280px;
    height: auto;
    z-index: 1;
    opacity: 0.55;
}

/* ===== BAMBOO GROVE (竹林) ===== */
.bamboo-grove {
    position: absolute;
    bottom: 100%;
    z-index: 14;
}
.bamboo-left {
    left: 5%;
    width: 50px;
    height: 80px;
}
.bamboo-right {
    right: 5%;
    width: 40px;
    height: 70px;
}
.bamboo-stalk {
    position: absolute;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #2e7d32, #1b5e20);
    border-radius: 1.5px;
}
/* Bamboo joints */
.bamboo-stalk::after {
    content: '';
    position: absolute;
    left: -0.5px;
    width: 4px;
    height: 2px;
    background: #1b5e20;
    border-radius: 1px;
}
.bamboo-left .bs1 { left: 5px; height: 70px; }
.bamboo-left .bs1::after { top: 25px; }
.bamboo-left .bs2 { left: 15px; height: 80px; width: 3.5px; }
.bamboo-left .bs2::after { top: 30px; }
.bamboo-left .bs3 { left: 25px; height: 60px; width: 2.5px; }
.bamboo-left .bs3::after { top: 20px; }
.bamboo-left .bs4 { left: 35px; height: 55px; width: 2.5px; }
.bamboo-left .bs4::after { top: 22px; }
.bamboo-right .bs1 { left: 5px; height: 65px; }
.bamboo-right .bs1::after { top: 25px; }
.bamboo-right .bs2 { left: 15px; height: 70px; width: 3.5px; }
.bamboo-right .bs2::after { top: 28px; }
.bamboo-right .bs3 { left: 28px; height: 50px; width: 2.5px; }
.bamboo-right .bs3::after { top: 18px; }

/* Bamboo leaves */
.bamboo-leaf {
    position: absolute;
    width: 18px;
    height: 4px;
    background: #43a047;
    border-radius: 50%;
    transform-origin: left center;
    animation: bamboo-sway 4s ease-in-out infinite alternate;
}
.bamboo-left .bl1 { top: 5px; left: 12px; transform: rotate(-20deg); }
.bamboo-left .bl2 { top: 15px; left: 22px; transform: rotate(15deg); animation-delay: -1s; }
.bamboo-left .bl3 { top: 8px; left: 30px; transform: rotate(-10deg); animation-delay: -2s; }
.bamboo-right .bl1 { top: 8px; left: 10px; transform: rotate(-15deg); }
.bamboo-right .bl2 { top: 18px; left: 20px; transform: rotate(20deg); animation-delay: -1.5s; }

@keyframes bamboo-sway {
    0% { transform: rotate(var(--base-rot, -15deg)) translateX(0); }
    100% { transform: rotate(calc(var(--base-rot, -15deg) + 5deg)) translateX(2px); }
}

/* ===== SHISHI-ODOSHI (鹿威し) ===== */
.shishi-odoshi {
    position: absolute;
    bottom: 100%;
    left: 15%;
    width: 40px;
    height: 50px;
    z-index: 15;
}
.shishi-frame {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 35px;
    background: #5D4037;
    border-radius: 1.5px;
}
/* Horizontal support */
.shishi-frame::after {
    content: '';
    position: absolute;
    top: 5px;
    left: -8px;
    width: 19px;
    height: 2.5px;
    background: #4E342E;
    border-radius: 1px;
}
.shishi-bamboo {
    position: absolute;
    bottom: 18px;
    left: 4px;
    width: 28px;
    height: 4px;
    background: linear-gradient(90deg, #66BB6A, #43A047);
    border-radius: 2px;
    transform-origin: 70% 50%;
    animation: shishi-tip 4s ease-in-out infinite;
}
/* Water stream from pipe */
.shishi-water {
    position: absolute;
    bottom: 22px;
    left: 5px;
    width: 2px;
    height: 10px;
    background: linear-gradient(180deg, rgba(100,200,255,0.5), transparent);
    border-radius: 1px;
    animation: shishi-water-flow 4s ease-in-out infinite;
}
.shishi-stone {
    position: absolute;
    bottom: 0;
    left: 2px;
    width: 12px;
    height: 7px;
    background: radial-gradient(ellipse, #607D8B, #455A64);
    border-radius: 50% 50% 40% 40%;
}

@keyframes shishi-tip {
    0%, 70% { transform: rotate(0deg); }
    75% { transform: rotate(-25deg); }
    80% { transform: rotate(-25deg); }
    85% { transform: rotate(5deg); }
    90% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
@keyframes shishi-water-flow {
    0%, 70% { opacity: 0.7; height: 10px; }
    75%, 85% { opacity: 0; height: 0px; }
    90%, 100% { opacity: 0.7; height: 10px; }
}

/* ===== TSUKUBAI (蹲踞) ===== */
.tsukubai {
    position: absolute;
    bottom: 100%;
    right: 15%;
    width: 35px;
    height: 30px;
    z-index: 15;
}
.tsukubai-basin {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 14px;
    background: radial-gradient(ellipse at 50% 60%, #78909C, #546E7A);
    border-radius: 50% 50% 40% 40%;
    border: 1px solid #455A64;
}
.tsukubai-water {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background: radial-gradient(ellipse, rgba(80,180,255,0.4), rgba(40,120,200,0.2));
    border-radius: 50%;
    animation: tsukubai-ripple 3s ease-in-out infinite;
}
.tsukubai-ladle {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 2px;
    background: #8D6E63;
    border-radius: 1px;
    transform: rotate(-30deg);
}
.tsukubai-ladle::after {
    content: '';
    position: absolute;
    right: -2px;
    top: -3px;
    width: 5px;
    height: 5px;
    background: #6D4C41;
    border-radius: 50%;
}
.tsukubai-pipe {
    position: absolute;
    top: 0;
    left: 5px;
    width: 12px;
    height: 3px;
    background: linear-gradient(90deg, #66BB6A, #43A047);
    border-radius: 1.5px;
    transform: rotate(-10deg);
}
/* Water drip from pipe */
.tsukubai-pipe::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 3px;
    width: 2px;
    height: 6px;
    background: linear-gradient(180deg, rgba(100,200,255,0.6), transparent);
    border-radius: 1px;
    animation: tsukubai-drip 2s ease-in infinite;
}

@keyframes tsukubai-ripple {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; }
    50% { transform: translateX(-50%) scale(1.15); opacity: 0.8; }
}
@keyframes tsukubai-drip {
    0% { opacity: 0.8; transform: translateY(0); }
    60% { opacity: 0.6; transform: translateY(4px); }
    100% { opacity: 0; transform: translateY(8px); }
}

/* ===== STEPPING STONES (飛び石) ===== */
.stepping-stones {
    position: absolute;
    left: 0; right: 0;
    bottom: 2%;
    height: 14%;
    z-index: 6;
    pointer-events: none;
}
.step-stone {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(ellipse at 40% 35%,
        #607D8B 0%, #455A64 60%, #37474F 100%
    );
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.ss1 { width: 18px; height: 12px; left: 20%; top: 55%; }
.ss2 { width: 16px; height: 10px; left: 28%; top: 40%; }
.ss3 { width: 20px; height: 13px; left: 36%; top: 60%; }
.ss4 { width: 15px; height: 9px; left: 43%; top: 35%; }
.ss5 { width: 17px; height: 11px; left: 50%; top: 50%; }

/* ===== TURTLE ON ROCK (龜) ===== */
.river-turtle {
    position: absolute;
    bottom: 5%;
    right: 20%;
    z-index: 7;
    pointer-events: none;
}
.turtle-rock {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 16px;
    background: radial-gradient(ellipse at 40% 30%, #6d6d6d, #4a4a4a 60%, #333 100%);
    border-radius: 50% 50% 45% 45%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.6);
}
.turtle-svg {
    position: relative;
    width: 30px;
    height: 20px;
    bottom: 8px;
    left: 3px;
    animation: turtle-breathe 5s ease-in-out infinite;
}
@keyframes turtle-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}