/* ---------------- 🌧 Chế độ tiếng mưa ---------------- */

/* Khung bấm từ nút 🌧 (dùng nền .act-panel của activities.css) */
.rain-panel {
  width: min(300px, calc(100% - 16px));
}

.rain-toggle {
  display: block;
  width: 100%;
  margin: 4px 0 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 11px;
  background: #5b6cf0;
  color: #ffffff;
  font: 700 13.5px/1.2 "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}

.rain-toggle.on {
  background: #e9ecfb;
  color: #3b46b0;
}

.rain-label {
  margin: 8px 0 4px;
  color: #6b7085;
  font-size: 12px;
  font-weight: 600;
}

.rain-chips {
  display: flex;
  gap: 6px;
}

.rain-chip {
  flex: 1;
  padding: 6px 4px;
  border: 1.5px solid #d5d7e5;
  border-radius: 9px;
  background: #ffffff;
  color: #1f2233;
  font: 600 12.5px/1.2 "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}

.rain-chip.selected {
  border-color: #5b6cf0;
  background: #eef0ff;
  color: #3b46b0;
}

.rain-vol {
  width: 100%;
  accent-color: #5b6cf0;
}

.rain-check {
  display: block;
  margin: 10px 0 2px;
  cursor: pointer;
}

.rain-sleep-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d5d7e5;
  border-radius: 9px;
  background: #ffffff;
  color: #1f2233;
  font: inherit;
}

.rain-sleep {
  min-height: 1.4em;
  margin-top: 4px;
}

.rain-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eceef6;
}

/* ---------------- Mưa chảy trên cửa sổ phòng ---------------- */
/* Trời xám đi một chút */
body.rain-on .room-sky {
  filter: grayscale(0.55) brightness(0.8) contrast(0.95);
  transition: filter 1.2s ease;
}

/* Hai lớp vệt mưa chéo rơi với tốc độ khác nhau (gần nhanh, xa chậm) */
.room-glass::before,
.room-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.room-glass::before {
  background-image: repeating-linear-gradient(104deg, transparent 0 9px, rgba(255, 255, 255, 0.55) 9px 10px, transparent 10px 23px),
    repeating-linear-gradient(104deg, transparent 0 17px, rgba(255, 255, 255, 0.35) 17px 18px, transparent 18px 31px);
  background-size: 100% 64px, 100% 41px;
  animation: rain-fall-near 0.55s linear infinite;
}

.room-glass::after {
  background-image: repeating-linear-gradient(106deg, transparent 0 13px, rgba(255, 255, 255, 0.28) 13px 14px, transparent 14px 29px);
  background-size: 100% 90px;
  animation: rain-fall-far 1.1s linear infinite;
}

body.rain-on .room-glass::before {
  opacity: 0.8;
}

body.rain-on .room-glass::after {
  opacity: 0.7;
}

@keyframes rain-fall-near {
  to {
    background-position: -18px 64px, -12px 41px;
  }
}

@keyframes rain-fall-far {
  to {
    background-position: -10px 90px;
  }
}

/* Sấm: chớp sáng nhoáng qua kính */
.room-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(235, 240, 255, 0.9);
  opacity: 0;
  transition: opacity 0.12s ease-out;
  pointer-events: none;
}

body.rain-flash .room-pane::after {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .room-glass::before,
  .room-glass::after {
    animation: none;
  }
}