.weather-effect {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}

.water-art[data-weather="rain"] .weather-effect,
.water-art[data-weather="storm"] .weather-effect,
.water-art[data-weather="fog"] .weather-effect,
.water-art[data-weather="overcast"] .weather-effect {
  opacity: 1;
}

.water-art[data-weather="overcast"] .weather-effect {
  background: linear-gradient(180deg, rgba(55, 69, 91, .22), transparent 48%, rgba(40, 62, 77, .12));
}

.water-art[data-weather="fog"] .weather-effect {
  background: radial-gradient(ellipse at 35% 30%, rgba(243, 246, 235, .36), transparent 42%), linear-gradient(180deg, rgba(219, 230, 218, .2), rgba(235, 239, 224, .08) 54%, transparent);
  animation: weather-fog 8s ease-in-out infinite alternate;
}

.water-art[data-weather="rain"] .weather-effect,
.water-art[data-weather="storm"] .weather-effect {
  background-image:
    radial-gradient(ellipse 1.3px 9px at 14px 20px, rgba(230, 250, 249, .34) 0 48%, transparent 58%),
    radial-gradient(ellipse 1px 7px at 44px 84px, rgba(230, 250, 249, .26) 0 48%, transparent 58%),
    radial-gradient(ellipse 1.2px 10px at 78px 48px, rgba(230, 250, 249, .3) 0 48%, transparent 58%),
    radial-gradient(ellipse 1px 6px at 26px 120px, rgba(230, 250, 249, .22) 0 48%, transparent 58%);
  background-size: 96px 136px;
  animation: weather-rain 1s linear infinite;
}

.water-art[data-weather="storm"] .weather-effect {
  background-color: rgba(32, 43, 68, .2);
  filter: saturate(.82);
  animation: weather-rain .65s linear infinite, weather-storm 5s ease-in-out infinite;
}

.water-art[data-weather="storm"] .weather-effect::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 55%, rgba(255, 245, 177, .28) 56%, transparent 58%);
  opacity: 0;
  animation: weather-lightning 7s ease-in-out infinite;
}

.quest-summary-card {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.quest-summary-card:hover,
.quest-summary-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 15px 32px rgba(35, 68, 75, .13);
  outline: none;
}

.quest-modal {
  position: fixed;
  z-index: 24;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 24, 38, .72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.quest-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.quest-journal-card {
  width: min(100%, 520px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 20px 16px 16px;
  border: 3px solid #17253b;
  border-radius: 18px;
  background: #fff7df;
  color: #173345;
  box-shadow: 0 8px 0 #111724, 0 24px 50px rgba(0, 0, 0, .3);
  transform: translateY(12px) scale(.98);
  transition: transform .2s ease;
}

.quest-modal.open .quest-journal-card {
  transform: translateY(0) scale(1);
}

.quest-weather-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 15px 0;
  padding: 13px;
  border: 2px solid #bdd4d0;
  border-radius: 12px;
  background: #e4f0eb;
}

.quest-weather-panel > div {
  display: grid;
  gap: 4px;
}

.quest-weather-panel strong {
  font-size: 15px;
}

.quest-weather-panel p {
  color: #69818c;
  font-size: 11px;
  line-height: 1.35;
}

.quest-weather-panel > span {
  flex: 0 0 auto;
  color: #138d88;
  font: 800 9px 'DM Mono', monospace;
  letter-spacing: .08em;
}

.quest-journal-list {
  display: grid;
  gap: 14px;
}

.quest-section {
  display: grid;
  gap: 8px;
}

.quest-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.quest-section-heading small {
  color: #69818c;
  font: 800 8px 'DM Mono', monospace;
  letter-spacing: .05em;
}

.journal-quest {
  padding: 12px;
  border: 2px solid #bdd4d0;
  border-radius: 12px;
  background: #fffdf2;
}

.journal-quest.is-complete {
  border-color: #f0b44b;
  background: #fff0d2;
}

.journal-quest-heading,
.journal-quest-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.journal-quest h3 {
  margin-top: 4px;
  font-size: 14px;
}

.journal-quest p {
  margin: 8px 0 11px;
  color: #69818c;
  font-size: 11px;
  line-height: 1.4;
}

.quest-check {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #e4f0eb;
  color: #138d88;
  font-weight: 800;
}

.is-complete .quest-check {
  background: #f0b44b;
  color: #17253b;
}

.quest-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 20px;
  background: #d8e4d8;
}

.quest-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ef795c;
  transition: width .35s ease;
}

.journal-quest-foot {
  align-items: center;
  margin-top: 9px;
}

.journal-quest-foot > strong {
  color: #ef795c;
  font: 800 9px 'DM Mono', monospace;
  text-align: right;
}

.quest-status {
  color: #69818c;
  font: 800 9px 'DM Mono', monospace;
}

.quest-claim-button {
  padding: 6px 8px;
  border: 2px solid #17253b;
  border-radius: 7px;
  background: linear-gradient(#ffd05d, #f7a220);
  color: #17253b;
  box-shadow: 0 2px 0 #17253b;
  cursor: pointer;
  font: 800 9px Manrope;
}

.quest-claim-button:active {
  transform: translateY(2px);
  box-shadow: none;
}

.quest-empty {
  margin: 0;
  padding: 13px;
  border: 2px dashed #bdd4d0;
  border-radius: 11px;
  color: #69818c;
  font-size: 11px;
  line-height: 1.4;
}

@keyframes weather-rain {
  from { background-position: 0 -136px; }
  to { background-position: 18px 136px; }
}

@keyframes weather-fog {
  from { transform: translateX(-3%); opacity: .55; }
  to { transform: translateX(3%); opacity: .95; }
}

@keyframes weather-storm {
  0%, 82%, 100% { background-color: rgba(32, 43, 68, .2); }
  86% { background-color: rgba(80, 95, 123, .32); }
}

@keyframes weather-lightning {
  0%, 86%, 100% { opacity: 0; }
  88% { opacity: 1; }
  90% { opacity: 0; }
}

body.dark-mode .quest-journal-card {
  border-color: #101827;
  background: #1d2636;
  color: #f3f1e7;
  box-shadow: 0 8px 0 #0d1320, 0 24px 50px rgba(0, 0, 0, .45);
}

body.dark-mode .quest-weather-panel {
  border-color: #4e7275;
  background: #253e43;
}

body.dark-mode .quest-weather-panel p,
body.dark-mode .quest-section-heading small,
body.dark-mode .journal-quest p,
body.dark-mode .quest-status,
body.dark-mode .quest-empty {
  color: #b5c3ca;
}

body.dark-mode .journal-quest {
  border-color: #4a5a70;
  background: #283447;
}

body.dark-mode .journal-quest.is-complete {
  border-color: #d5a94f;
  background: #3b3f4d;
}

body.dark-mode .quest-check {
  background: #253e43;
  color: #72d8d1;
}

body.dark-mode .is-complete .quest-check {
  background: #d5a94f;
  color: #17253b;
}

body.dark-mode .quest-progress-track { background: #3d5360; }

body.dark-mode .quest-summary-card:hover,
body.dark-mode .quest-summary-card:focus-visible {
  box-shadow: 0 15px 32px rgba(0, 0, 0, .32);
}

@media (max-width: 560px) {
  .quest-modal { padding: 10px; }
  .quest-journal-card { max-height: calc(100vh - 20px); padding: 18px 13px 14px; }
  .quest-weather-panel { align-items: flex-start; flex-direction: column; }
  .quest-weather-panel > span { align-self: flex-end; }
}