/* ---- palette: time of day drives everything ---- */
:root {
  --sky: #9ec8ea;
  --sky-low: #cfe4f4;
  --sun: #f7d774;
  --wall: #e8e0d2;
  --wall-shadow: #d6cbb8;
  --floor: #b98a5f;
  --desk: #8a5a3b;
  --frame: #6e4f33;
  --dark: #2c2c2a;
  --skyline: #7f95a8;
  --glow: rgba(255, 214, 130, 0.35);
}
body.dawn  { --sky: #f2b98d; --sky-low: #f8d9b8; --wall: #eadfcb; --skyline: #a78a7e; }
body.dusk  { --sky: #d98a6a; --sky-low: #e8b48e; --wall: #e0d3bd; --skyline: #6d5a70; }
body.night { --sky: #1c2a4a; --sky-low: #2e3f63; --wall: #cfc4ae; --wall-shadow: #b9ab92;
             --floor: #9c7350; --skyline: #131c30; }

html, body { margin: 0; height: 100%; overflow: hidden;
  font-family: -apple-system, "Segoe UI", sans-serif; background: #111; }

/* ---- views: stacked, crossfaded ---- */
#room { position: relative; width: 100vw; height: 100vh; }
.view { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease; }
.view.active { opacity: 1; pointer-events: auto; }
.view svg { width: 100%; height: 100%; display: block; }

body.lamp-off #room { filter: brightness(0.72) saturate(0.85); }
body.lamp-off #room::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(10, 12, 30, 0.35)); }

/* ---- hotspots ---- */
.hotspot { cursor: pointer; }
.hotspot:hover { filter: brightness(1.12) drop-shadow(0 0 6px var(--glow)); }

/* record disc spin */
.disc { transform-box: fill-box; transform-origin: center; }
.disc.spinning { animation: spin 2.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* plant growth: stage 0..3 scales the foliage */
.plant-leaves { transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform 0.6s ease; }
.plant-group[data-stage="0"] .plant-leaves { transform: scale(0.35); }
.plant-group[data-stage="1"] .plant-leaves { transform: scale(0.6); }
.plant-group[data-stage="2"] .plant-leaves { transform: scale(0.82); }
.plant-group[data-stage="3"] .plant-leaves { transform: scale(1); }

/* sun by day, moon by night */
.moon { display: none; }
body.night .sun { display: none; }
body.night .moon { display: block; }

/* ---- weather: rain/snow groups inside the window SVGs ---- */
.rain, .snow { display: none; }
body.weather-rain .rain { display: block; }
body.weather-snow .snow { display: block; }
.rain line { animation: fall 0.7s linear infinite; }
.snow circle { animation: drift 3.2s linear infinite; }
.rain line:nth-child(2n) { animation-delay: 0.25s; }
.rain line:nth-child(3n) { animation-delay: 0.45s; }
.snow circle:nth-child(2n) { animation-delay: 1.1s; }
.snow circle:nth-child(3n) { animation-delay: 2.2s; }
@keyframes fall  { from { transform: translateY(-40px); } to { transform: translateY(90px); } }
@keyframes drift { from { transform: translateY(-30px) translateX(0); }
                   to   { transform: translateY(80px) translateX(14px); } }

body.window-open .latch-handle { transform: rotate(50deg); transform-box: fill-box;
  transform-origin: left center; }

/* ---- HTML overlays ---- */
.nav-btn { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  padding: 10px 22px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(20, 22, 30, 0.65); color: #f2ecdf; font-size: 15px;
  backdrop-filter: blur(4px); }
.nav-btn:hover { background: rgba(20, 22, 30, 0.85); }

.weather-controls { position: absolute; top: 24px; right: 24px; display: flex; gap: 8px; }
.weather-controls button { width: 42px; height: 42px; border-radius: 50%; border: none;
  cursor: pointer; font-size: 19px; background: rgba(20, 22, 30, 0.55); }
.weather-controls button:hover { background: rgba(20, 22, 30, 0.8); }

.postit-board { position: absolute; top: 16%; right: 6%; display: flex; flex-direction: column;
  gap: 12px; width: 150px; }
.postit { min-height: 84px; padding: 10px 12px; background: #f6e27a; color: #4a3f10;
  font-size: 13px; line-height: 1.45; box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.25);
  transform: rotate(-1.5deg); outline: none; overflow-wrap: break-word; }
.postit:nth-child(2) { background: #f9b8c6; transform: rotate(1.2deg); }
.postit:nth-child(3) { background: #b8e6c9; transform: rotate(-0.8deg); }
.postit:empty::before { content: "scribble something…"; opacity: 0.45; }

/* ---- panels + toast ---- */
.panel { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 18, 0.55); z-index: 40; }
.panel.hidden { display: none; }
.panel-card { background: #f7f2e7; color: #2c2c2a; border-radius: 16px; padding: 20px;
  width: min(420px, 88vw); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45); position: relative; }
.panel-card h2 { margin: 0 0 8px; font-size: 20px; }
.panel-body iframe { width: 100%; height: 352px; border: none; border-radius: 12px; }
.panel-close { position: absolute; top: 10px; right: 14px; border: none; background: none;
  font-size: 22px; cursor: pointer; color: #6b6455; }

#toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(16px);
  background: rgba(20, 22, 30, 0.88); color: #f2ecdf; padding: 10px 20px; border-radius: 999px;
  font-size: 14px; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none;
  z-index: 50; max-width: 80vw; text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.confetti { position: fixed; top: -12px; width: 9px; height: 14px; z-index: 60;
  animation: confetti-fall linear forwards; pointer-events: none; }
@keyframes confetti-fall {
  to { transform: translateY(105vh) rotate(720deg); }
}