#screensaver {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  overflow: hidden;
}
#screensaver.active { 
  opacity: 1; 
  pointer-events: all; 
}
.orb {
  position: absolute; 
  border-radius: 50%; 
  opacity: 0;
  animation: orbFloat ease-in-out infinite;
}
@keyframes orbFloat {
  0%   { transform: translate(0,0) scale(1); opacity: 0; }
  15%  { opacity: 0.8; }
  50%  { transform: translate(var(--dx),var(--dy)) scale(1.15); opacity: 0.7; }
  85%  { opacity: 0.8; }
  100% { transform: translate(0,0) scale(1); opacity: 0; }
}

#ss-clock {
  position: absolute;
  top: 12%;
  text-align: center;
  z-index: 2;
  animation: clockDrift 37s ease-in-out infinite alternate;
}
.ss-time-text { font-size: 84px; font-weight: 900; color: rgba(200,170,220,0.55); letter-spacing:-1px; line-height:1; }
.ss-ampm-text { font-size: 33px; font-weight: 800; color: rgba(200,170,220,0.4); margin-left:6px; }
.ss-date-text { font-size: 22px; font-weight: 600; color: rgba(200,170,220,0.35); margin-top:6px; }
.ss-hint-text { font-size: 19px; color: rgba(200,170,220,0.2); margin-top:15px; font-weight:600; }

@keyframes clockDrift {
  0%   { transform: translate(-30px, -20px); }
  50%  { transform: translate(30px, 20px); }
  100% { transform: translate(-20px, 10px); }
}

#ss-weather {
  position: absolute;
  bottom: 50px;
  z-index: 2;
  width: min(560px, calc(100vw - 40px));
  animation: weatherDrift 47s ease-in-out infinite alternate-reverse;
}
.sw-current { display:flex; align-items:center; justify-content:center; gap:15px; margin-bottom:12px; font-size:22px; font-weight:700; color:rgba(200,170,220,0.45); }
.sw-current .big-temp { font-size: 39px; font-weight:900; }
.sw-hourly, .sw-daily { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; justify-content:center; }
.sw-hourly::-webkit-scrollbar, .sw-daily::-webkit-scrollbar { display:none; }
.sw-hour, .sw-day { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:60px; padding:8px 6px; border-radius:12px; background:rgba(255,255,255,0.04); }
.sw-hour .h-time, .sw-day .d-name { font-size:14px; font-weight:700; color:rgba(200,170,220,0.3); }
.sw-hour .h-icon, .sw-day .d-icon { font-size:22px; opacity:0.5; }
.sw-hour .h-temp, .sw-day .d-hi  { font-size:16px; font-weight:800; color:rgba(200,170,220,0.4); }
.sw-day .d-lo { font-size:14px; font-weight:600; color:rgba(200,170,220,0.25); }
.sw-daily { margin-top:10px; }
.sw-loading { text-align:center; color:rgba(200,170,220,0.25); font-size:19px; font-weight:600; }

@keyframes weatherDrift {
  0%   { transform: translateX(-15px); }
  50%  { transform: translateX(15px); }
  100% { transform: translateX(-10px); }
}