:root {
  --rain-blue:#4479a9;
  --rain-deep:#345778;
  --rain-yellow:#f1c84b;
  --rain-sky:#a9c7dc;
}

.rainy-hero .eyebrow { color:var(--rain-blue)!important; }
.rainy-hero h1 em { color:var(--rain-blue); }
.rainy-game-shell .mission {
  background:linear-gradient(90deg,#f4f9fd,#fffbe9 56%,#edf4fa);
}
.rainy-game-shell .mission-icon {
  border-color:#cedfea;
  box-shadow:0 7px 18px rgba(53,87,120,.16);
}
.rainy-game-shell .mission > div > span { color:var(--rain-blue); }
.rainy-game-shell .mission-goals span { border-color:#d5e3ec; }
.rainy-game-shell .mission-goals b { color:var(--rain-blue); }

.scene.rainyday {
  background:
    linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,0)),
    linear-gradient(#dbe8ef 0 64%,#a98767 64%);
}
.scene.rainyday.has-story-image .scene-story-image {
  opacity:1;
  transform:scale(1);
  transition:none;
}
.scene.rainyday:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:61%;
  height:14px;
  background:#f5f2e8;
  border-top:4px solid #bdcbd2;
  box-shadow:0 5px 0 rgba(73,65,57,.1);
}
.scene.rainyday .scene-window {
  left:5%;
  top:8%;
  width:31%;
  height:39%;
  overflow:hidden;
  background:linear-gradient(#778fa3 66%,#65846d 66%);
}
.scene.rainyday .scene-window span {
  left:10%;
  top:5%;
  font-size:39px;
  filter:grayscale(.25);
}
.scene.rainyday .scene-window i {
  position:absolute;
  top:-20%;
  width:3px;
  height:34px;
  border-radius:99px;
  background:#bfe8ff;
  transform:rotate(18deg);
  animation:rainDrop 1.4s linear infinite;
}
.scene.rainyday .scene-window i:nth-of-type(1) { left:12%; animation-delay:-.2s; }
.scene.rainyday .scene-window i:nth-of-type(2) { left:31%; animation-delay:-.8s; }
.scene.rainyday .scene-window i:nth-of-type(3) { left:52%; animation-delay:-.4s; }
.scene.rainyday .scene-window i:nth-of-type(4) { left:70%; animation-delay:-1.1s; }
.scene.rainyday .scene-window i:nth-of-type(5) { left:88%; animation-delay:-.6s; }
@keyframes rainDrop {
  from { transform:translateY(-30px) rotate(18deg); }
  to { transform:translateY(190px) rotate(18deg); }
}
.weather-card {
  position:absolute;
  left:41%;
  top:8%;
  z-index:3;
  display:grid;
  grid-template-columns:auto auto;
  gap:1px 7px;
  align-items:center;
  min-width:92px;
  padding:8px 11px;
  border:4px solid white;
  border-radius:14px;
  background:#5f7690;
  color:white;
  box-shadow:0 7px 15px rgba(46,70,91,.2);
}
.weather-card span {
  grid-row:1 / 3;
  font-size:29px;
}
.weather-card strong { font-size:10px; letter-spacing:.1em; }
.weather-card small { color:#d9effc; font-size:9px; font-weight:900; }
.coat-rack {
  position:absolute;
  left:40%;
  top:31%;
  z-index:2;
  display:flex;
  gap:3px;
  align-items:flex-start;
  width:23%;
  height:28%;
  padding-top:5px;
  border-top:8px solid #80634e;
}
.coat-rack:before,
.coat-rack:after {
  content:"";
  position:absolute;
  top:-4px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#d6a05d;
}
.coat-rack:before { left:23%; }
.coat-rack:after { right:23%; }
.coat-rack i {
  position:absolute;
  left:50%;
  top:0;
  width:7px;
  height:100%;
  background:#80634e;
}
.coat-rack span {
  position:relative;
  z-index:2;
  font-size:33px;
  filter:drop-shadow(0 4px 2px rgba(0,0,0,.12));
}
.front-door {
  position:absolute;
  right:4%;
  top:8%;
  z-index:2;
  width:25%;
  height:64%;
  border:8px solid #e8e0cf;
  border-radius:7px 7px 2px 2px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08),rgba(0,0,0,.04)),
    #496f86;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.15);
}
.front-door span {
  position:absolute;
  left:50%;
  top:11%;
  transform:translateX(-50%);
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:50%;
  background:#f5e9bd;
  color:#516171;
  font-size:11px;
  font-weight:900;
}
.front-door i {
  position:absolute;
  left:13%;
  top:52%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--rain-yellow);
  box-shadow:0 0 0 3px rgba(255,255,255,.2);
}
.front-door small {
  position:absolute;
  left:50%;
  bottom:8%;
  transform:translateX(-50%);
  color:#d9e7ef;
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
}
.rain-bench {
  position:absolute;
  left:4%;
  bottom:7%;
  z-index:2;
  width:29%;
  height:13%;
  border:7px solid #9b6c4d;
  border-radius:7px;
  background:#c99368;
  box-shadow:0 26px 0 -11px #805840;
}
.rain-kit {
  position:absolute;
  left:33%;
  bottom:4%;
  z-index:5;
  width:38%;
  height:34%;
  padding:25px 10px 9px;
  border:6px solid #365b78;
  border-radius:16px;
  background:linear-gradient(#537e9f,#3f6685);
  box-shadow:0 12px 20px rgba(42,61,77,.25);
}
.rain-kit > strong {
  position:absolute;
  left:50%;
  top:7px;
  transform:translateX(-50%);
  color:#dff2ff;
  font-size:7px;
  letter-spacing:.12em;
  white-space:nowrap;
}
.scene.rainyday .table {
  inset:25px 9px 9px;
  z-index:2;
  width:auto;
  height:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-content:center;
  gap:3px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.91);
  box-shadow:inset 0 0 0 3px rgba(54,91,120,.17);
}
.scene.rainyday .table span {
  position:static;
  display:grid;
  place-items:center;
  font-size:21px;
}
.door-mat {
  position:absolute;
  right:3%;
  bottom:2%;
  z-index:3;
  width:27%;
  padding:7px;
  border-radius:50%;
  background:#6a5141;
  color:#dbc6ad;
  font-size:6px;
  font-weight:900;
  letter-spacing:.12em;
  text-align:center;
}
.scene.rainyday .busra {
  left:3%;
  bottom:4%;
  z-index:4;
}
.scene.rainyday .busra span { font-size:97px; }
.scene.rainyday .busra small { background:var(--rain-blue); }
.rainy-scene-card {
  background:
    radial-gradient(circle at 10% 5%,rgba(93,144,178,.14),transparent 20rem),
    #f1f5f8;
}
@media (max-width:560px) {
  .rainy-hero h1 { font-size:36px; }
  .scene.rainyday .scene-window { width:31%; }
  .weather-card { left:39%; min-width:76px; padding:6px; }
  .weather-card span { font-size:23px; }
  .coat-rack { left:38%; }
  .coat-rack span { font-size:25px; }
  .front-door { width:25%; border-width:5px; }
  .rain-kit { left:31%; width:41%; height:35%; border-width:4px; }
  .scene.rainyday .table span { font-size:17px; }
  .scene.rainyday .busra { left:-2%; }
  .scene.rainyday .busra span { font-size:74px; }
}