/* ============================================================
   world.css - 窗外景色 / 天气 / 墙钟 / 新家具 / 节日装饰 / 纸条
   全部克制：装饰层不挡点击，动画只用 transform/opacity
   ============================================================ */

/* ---------- 窗户结构升级 ---------- */
.room-window { cursor: pointer; }
.room-window .sky {
    position: absolute; inset: 0;
    transition: background 2.5s ease;
}
/* 七个时段的天空 */
.room-window.sky-dawn      .sky { background: linear-gradient(180deg, #fbc2a9 0%, #ffe3b8 60%, #fff3d6 100%); }
.room-window.sky-morning   .sky { background: linear-gradient(180deg, #8fd0f2 0%, #c8ecff 65%, #eafaff 100%); }
.room-window.sky-noon      .sky { background: linear-gradient(180deg, #6cc3f0 0%, #bfe9ff 70%, #e8f9ff 100%); }
.room-window.sky-afternoon .sky { background: linear-gradient(180deg, #93c9ee 0%, #ffd9a8 75%, #ffeecb 100%); }
.room-window.sky-dusk      .sky { background: linear-gradient(180deg, #7a6ba8 0%, #f2917a 62%, #ffd9a0 100%); }
.room-window.sky-night     .sky { background: linear-gradient(180deg, #1c2550 0%, #35406e 70%, #4d4a78 100%); }
.room-window.sky-deepNight .sky { background: linear-gradient(180deg, #10142e 0%, #232a52 75%, #3a3660 100%); }
/* 天气罩层 */
.room-window.raining .sky { filter: brightness(0.72) saturate(0.7); }
.room-window.snowing .sky { filter: brightness(1.06) saturate(0.85); }
/* 雷雨闪光 */
.room-window .flash { position: absolute; inset: 0; background: rgba(255,255,240,0); pointer-events: none; z-index: 6; }
.room-window.flash-now .flash { animation: world-flash .42s ease; }
@keyframes world-flash {
    0% { background: rgba(255,255,240,0); }
    18% { background: rgba(255,255,240,0.75); }
    36% { background: rgba(255,255,240,0.1); }
    55% { background: rgba(255,255,240,0.5); }
    100% { background: rgba(255,255,240,0); }
}

/* 太阳 / 月亮 */
.room-window .sun-moon {
    position: absolute; width: 1.5em; height: 1.5em; border-radius: 50%;
    transition: left 3s ease, top 3s ease, background 2.5s ease, box-shadow 2.5s ease;
    z-index: 2;
}
.room-window .sun-moon.sun {
    background: radial-gradient(circle at 38% 38%, #fff3b0, #ffd75e 70%);
    box-shadow: 0 0 1.4em 0.3em rgba(255, 224, 130, 0.55);
}
.room-window .sun-moon.moon {
    background: radial-gradient(circle at 62% 38%, #fffdf2 58%, #e8e2c4 90%);
    box-shadow: 0 0 1em 0.15em rgba(253, 246, 221, 0.45);
}
.room-window.bigmoon .sun-moon.moon { width: 2.4em; height: 2.4em; box-shadow: 0 0 2em 0.5em rgba(253,246,221,0.5); }

/* 星星 */
.room-window .stars { position: absolute; inset: 0; opacity: 0; transition: opacity 2s; z-index: 1; pointer-events: none; }
.room-window.sky-night .stars, .room-window.sky-deepNight .stars, .room-window.sky-dusk .stars { opacity: 1; }
.room-window .stars i {
    position: absolute; width: 2px; height: 2px; border-radius: 50%;
    background: #fff; animation: gb-twinkle 2.6s infinite;
}
/* 银河（七夕夜） */
.room-window .milky {
    position: absolute; inset: 0; opacity: 0; transition: opacity 2s; z-index: 1; pointer-events: none;
    background: linear-gradient(118deg, transparent 30%, rgba(200,190,255,0.22) 46%, rgba(255,240,250,0.16) 52%, transparent 68%);
}
.room-window.milkyway .milky { opacity: 1; }

/* 云 */
.room-window .clouds { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity 2s; }
.room-window.sky-night .clouds, .room-window.sky-deepNight .clouds { opacity: 0.35; }
.room-window .cl {
    position: absolute; background: rgba(255,255,255,0.85); border-radius: 1em;
    width: 2.6em; height: 0.85em; opacity: 0.8;
}
.room-window .cl::before {
    content: ''; position: absolute; left: 22%; top: -55%;
    width: 1.1em; height: 1.1em; background: inherit; border-radius: 50%;
}
.room-window .cl.c1 { top: 16%; animation: world-drift 26s linear infinite; }
.room-window .cl.c2 { top: 42%; transform: scale(0.7); animation: world-drift 38s linear infinite reverse; }
@keyframes world-drift {
    from { left: -30%; } to { left: 105%; }
}

/* 飞鸟 */
.room-window .birds { position: absolute; inset: 0; overflow: hidden; z-index: 4; pointer-events: none; }
.room-window .bird { position: absolute; left: -12%; font-size: 0.5em; animation: world-birdfly 8.5s linear forwards; }
@keyframes world-birdfly {
    0% { transform: translate(0, 0); opacity: 0; }
    8% { opacity: 0.9; }
    50% { transform: translate(30em, -0.8em); }
    100% { transform: translate(62em, 0.4em); opacity: 0.9; }
}

/* 雨 / 雪 */
.room-window .precip { position: absolute; inset: 0; overflow: hidden; z-index: 5; pointer-events: none; }
.room-window .drop {
    position: absolute; top: -12%; width: 2px; height: 1em;
    background: linear-gradient(180deg, rgba(200,228,255,0.1), rgba(210,235,255,0.95));
    animation: world-rainfall linear infinite;
}
@keyframes world-rainfall { to { transform: translateY(4.6em); } }
.room-window .flake {
    position: absolute; top: -8%;
    width: 0.34em; height: 0.34em; border-radius: 50%;
    background: rgba(255,255,255,0.95);
    animation: world-snowfall linear infinite;
}
@keyframes world-snowfall {
    0% { transform: translate(0, 0); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translate(0.6em, 3.6em); opacity: 0.85; }
}
/* 流星 */
.room-window .meteor-slot { position: absolute; inset: 0; overflow: hidden; z-index: 5; }
.room-window .meteor {
    position: absolute; left: 110%; width: 1.6em; height: 2px; cursor: pointer; padding: 6px 4px;
    background: linear-gradient(90deg, rgba(255,255,220,0), #fff8c9);
    border-radius: 2px;
    animation: world-meteor linear forwards;
}
.room-window .meteor::after {
    content: '✦'; position: absolute; right: -2px; top: -0.62em;
    color: #fff8c9; font-size: 0.5em;
}
@keyframes world-meteor {
    from { transform: translate(0, 0) rotate(24deg); opacity: 0; }
    8% { opacity: 1; }
    to { transform: translate(-26em, 8.5em) rotate(24deg); opacity: 0.85; }
}

/* ---------- 墙上小时钟 ---------- */
.room-clock {
    left: 67.5%; top: 8%; width: 7.5%; height: 10%;
    background: #fffaf0; border-radius: 50%;
    border: 0.26em solid #d9a05b;
    box-shadow: var(--shadow-soft);
}
.room-clock .clock-hand {
    position: absolute; left: 50%; bottom: 50%;
    transform-origin: bottom center; border-radius: 3px;
}
.room-clock .clock-hand-h { width: 2px; height: 24%; background: #6b4f3f; }
.room-clock .clock-hand-m { width: 1.5px; height: 36%; background: #b98860; }
.room-clock .clock-pin {
    position: absolute; left: 50%; top: 50%; width: 0.3em; height: 0.3em;
    transform: translate(-50%, -50%); border-radius: 50%; background: #d9a05b;
}

/* ---------- 新家具 ---------- */
.room-plant { left: 1.5%; top: 39%; font-size: 1.6em; line-height: 1; transform-origin: bottom center; }
.room-plant.wobble { animation: plant-wobble 0.8s ease; }
@keyframes plant-wobble {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-7deg); }
    60% { transform: rotate(5deg); }
}
.room-plant { animation: plant-sway 7s ease-in-out infinite; }
.room-plant.wobble { animation: plant-wobble 0.8s ease; }

.room-bowl { left: 22%; top: 81%; width: 5.5%; height: 6%; }
.room-bowl .bowl-body {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 100%; height: 68%; background: #c98d5e;
    border-radius: 8% 8% 46% 46% / 8% 8% 70% 70%;
    box-shadow: inset 0 -0.15em 0 rgba(0,0,0,0.12), var(--shadow-soft);
}
.room-bowl .bowl-water {
    position: absolute; left: 12%; top: 18%; width: 76%; height: 26%;
    background: #9ad7f5; border-radius: 50%;
    box-shadow: inset 0 0.06em 0 rgba(255,255,255,0.6);
}
.room-ball {
    left: 56%; top: 86%; width: 6.5%; height: 7%;
    font-size: 1.15em; line-height: 1; cursor: grab; touch-action: none;
    z-index: 28; transition: left .3s ease, top .3s ease;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.18));
}
.room-ball.grabbing { cursor: grabbing; transition: none; z-index: 60; }
.room-ball.nudged { animation: ball-nudge .55s ease; }
@keyframes ball-nudge {
    0% { margin-left: 0; } 35% { margin-left: 12px; margin-top: -8px; } 100% { margin-left: 0; margin-top: 0; }
}

/* ---------- 随机小纸条 ---------- */
.room-note {
    font-size: 1.1em; line-height: 1; z-index: 29;
    animation: gb-floatupdown 2.8s ease-in-out infinite;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.2));
}

/* ---------- 节日装饰层 ---------- */
#room-decor { position: absolute; inset: 0; pointer-events: none; z-index: 26; }
#room-decor .deco { position: absolute; line-height: 1; }

#room-decor .lantern { font-size: 1.5em; transform-origin: top center; animation: lantern-swing 3.6s ease-in-out infinite; }
#room-decor .lantern:nth-of-type(2) { animation-delay: .9s; }
@keyframes lantern-swing {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}
#room-decor .couplet {
    width: 0.75em; height: 4.2em; background: #d3352c; color: #ffdfa6;
    font-size: 0.55em; display: flex; align-items: center; justify-content: center;
    border-radius: 3px; writing-mode: vertical-rl; letter-spacing: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}
#room-decor .hongbao { font-size: 1.3em; cursor: pointer; animation: gb-floatupdown 3s ease-in-out infinite; }
#room-decor .garland.hearts i { display: inline-block; font-style: normal; margin: 0 0.28em; animation: heart-pulse 1.8s ease-in-out infinite; font-size: 0.85em; }
@keyframes heart-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.22); }
}
#room-decor .moonbeam {
    width: 26%; height: 40%;
    background: linear-gradient(205deg, rgba(255,246,214,0.28), rgba(255,246,214,0) 70%);
    clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}
#room-decor .miniflag { width: 1.7em; height: 1.1em; position: absolute; }
#room-decor .miniflag i {
    position: absolute; inset: 0; background: #de2910; border-radius: 1px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#room-decor .miniflag b {
    position: absolute; left: 15%; top: 8%; color: #ffde00; font-size: 0.55em; line-height: 1;
}
#room-decor .miniflag.small { transform: scale(0.8); }
#room-decor .tree { font-size: 3em; }
#room-decor .lights i {
    display: inline-block; font-style: normal; width: 0.4em; height: 0.4em; margin: 0 0.24em;
    border-radius: 50%; background: #ffe08a; box-shadow: 0 0 6px #ffe08a;
    animation: light-blink 1.6s ease-in-out infinite;
}
#room-decor .lights i:nth-child(2n) { background: #ff9aa2; box-shadow: 0 0 6px #ff9aa2; animation-delay: .5s; }
#room-decor .lights i:nth-child(3n) { background: #a8dcd0; box-shadow: 0 0 6px #a8dcd0; animation-delay: 1s; }
@keyframes light-blink {
    0%, 100% { opacity: 1; } 50% { opacity: 0.35; }
}
#room-decor .balloons { font-size: 1.5em; text-align: center; line-height: 1.05; animation: gb-floatupdown 3.4s ease-in-out infinite; }
#room-decor .bunting { display: flex; gap: 0.28em; width: 92%; }
#room-decor .bunting i {
    flex: 1; height: 1em; font-style: normal;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: #ff9aa2;
}
#room-decor .bunting i.f1 { background: #ffe08a; }
#room-decor .bunting i.f2 { background: #a8dcd0; }

/* 圣诞：狗宝的帽子变圣诞色 */
#room-stage.theme-christmas .dog-hat { fill: #d3352c; stroke: #a5231b; }
#room-stage.theme-christmas .dog-hat-pom { fill: #fff; stroke: #ddd; }
#room-stage.theme-valentine { --pink-deep: #e05a78; }

/* ---------- 调试条 ---------- */
#debug-bar {
    position: fixed; left: 10px; bottom: calc(10px + var(--sa-bottom)); z-index: 2000;
    background: rgba(30,30,40,0.88); color: #cfe8cf;
    border-radius: 10px; padding: 6px 10px; font-size: 11px;
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap; max-width: 92vw;
    font-family: monospace;
}
#debug-bar b { color: #ffd97a; font-weight: normal; }
#debug-bar button {
    background: #3a4a3a; color: #cfe8cf; border: 1px solid #5a6a5a;
    border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer;
}