:root {
  --ink: #202124;
  --screen: #f7f1d2;
  --screen-dark: #d9ca8a;
  --red: #d7372f;
  --blue: #2f6fb7;
  --yellow: #f3c63d;
  --green: #5f9f62;
  --panel: #fff8dd;
  --shadow: #332d28;
  --body-font: "Pokemon GB", "Courier New", Courier, monospace;
  --body-font-size: 12px;
  --body-font-weight: 700;
  --body-line-height: 1.5;
  --body-condense: .94;
  --panel-title-font: "Pokemon GB", "Courier New", Courier, monospace;
  --title-font: "Arial Black", "Trebuchet MS", Verdana, sans-serif;
  --ui-font: "Courier New", Courier, monospace;
}

@font-face {
  font-family: "Pokemon GB";
  src: url("assets/fonts/Pokemon_GB.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(45deg, rgba(255,255,255,.16) 25%, transparent 25% 75%, rgba(255,255,255,.16) 75%),
    linear-gradient(45deg, rgba(255,255,255,.16) 25%, transparent 25% 75%, rgba(255,255,255,.16) 75%),
    #d7372f;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  font-stretch: condensed;
  line-height: var(--body-line-height);
  image-rendering: pixelated;
}

img {
  max-width: 100%;
}

.shell {
  width: min(980px, 100%);
  max-width: 100vw;
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  overflow-x: hidden;
}

.screen {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-self: stretch;
  overflow-x: clip;
  border: 6px solid var(--shadow);
  background: var(--screen);
  box-shadow: 10px 10px 0 rgba(0,0,0,.35);
  padding: clamp(14px, 3vw, 28px);
}

.topbar {
  min-width: 0;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  padding-bottom: 4px;
}

.topbar > div:first-child {
  min-width: 0;
}

.top-controls {
  min-width: 0;
  width: min(348px, 44%);
  padding-right: 4px;
  display: grid;
  gap: 8px;
  justify-items: end;
}

.date-info-row {
  min-width: 0;
  display: flex;
  align-items: start;
  justify-content: end;
  gap: 8px;
}

.pokemon-meta p,
.condition {
  margin: 0;
}

.route-label,
.date-chip,
.pokemon-meta,
.type-badge,
.location-status,
.city-search input,
.city-result,
.mode-button,
.minmax span,
.condition,
.current-weather-name,
.current-weather-detail,
.sun-time,
.professor-copy,
.section-title strong,
.day-head,
.day-condition,
.day-temps,
.rain-slot,
.rain-hour-slot,
.rain-date,
.rain-hour-empty,
.rain-hour-empty-detail,
.empty-panel,
.weather-info-chip,
.day-details,
.info-note,
.info-label,
.info-name,
.info-detail,
.notification-button {
  transform: scaleX(var(--body-condense));
  transform-origin: left center;
}

h1,
h2 {
  margin: 0;
  line-height: 1;
}

h1 {
  max-width: 100%;
  overflow-wrap: normal;
  margin-top: 5px;
  color: var(--yellow);
  font-family: var(--title-font);
  font-size: clamp(26px, 4.2vw, 46px);
  letter-spacing: 0;
  line-height: .92;
  white-space: nowrap;
  text-shadow:
    -3px -3px 0 var(--blue),
    3px -3px 0 var(--blue),
    -3px 3px 0 var(--blue),
    3px 3px 0 var(--blue),
    0 5px 0 #1f4e90,
    3px 7px 0 rgba(51,45,40,.45);
  -webkit-text-stroke: 2px var(--blue);
  text-transform: uppercase;
}

.title-row {
  display: flex;
  align-items: start;
  gap: 12px;
}

.weather-logo {
  width: clamp(52px, 8vw, 72px);
  height: clamp(52px, 8vw, 72px);
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  transform: translateY(-13px);
}

.title-copy {
  min-width: 0;
}

.route-label {
  margin: 12px 0 0;
  color: var(--blue);
  font-size: clamp(8px, 1.15vw, 10px);
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

.info-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-width: 3px;
  background: #fffdf1;
  color: var(--blue);
  font-size: 20px;
  line-height: 1;
}

h2 {
  font-size: clamp(20px, 4vw, 34px);
  line-height: 1.2;
  text-transform: capitalize;
}

#pokemonName {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

#pokemonName.name-long {
  font-size: clamp(18px, 3.2vw, 28px);
}

#pokemonName.name-very-long {
  font-size: clamp(16px, 2.6vw, 24px);
}

.daily-pokemon #pokemonName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(14px, 12cqw, 22px);
}

.daily-pokemon #pokemonName.name-long {
  font-size: clamp(12px, 10cqw, 18px);
}

.daily-pokemon #pokemonName.name-very-long {
  font-size: clamp(10px, 8cqw, 16px);
}

.date-chip {
  width: max-content;
  min-width: 0;
  border: 4px solid var(--shadow);
  background: var(--yellow);
  padding: 9px 10px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 4px 4px 0 var(--shadow);
}

.weather-panel,
.phrase-box,
.forecast-section {
  min-width: 0;
  max-width: 100%;
  position: relative;
  border: 4px solid var(--shadow);
  background: var(--panel);
  box-shadow: 5px 5px 0 var(--screen-dark);
}

.pokemon-meta {
  min-width: 0;
  container-type: inline-size;
}

.daily-sprite-stage {
  width: 94px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}

.daily-sprite-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.pokemon-meta p {
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.type-badge {
  border: 3px solid var(--shadow);
  background: var(--type-color, var(--green));
  color: var(--type-text, white);
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.type-badge[data-type="normal"] {
  --type-color: #a8a77a;
}

.type-badge[data-type="fighting"] {
  --type-color: #c22e28;
}

.type-badge[data-type="flying"] {
  --type-color: #a98ff3;
}

.type-badge[data-type="poison"] {
  --type-color: #a33ea1;
}

.type-badge[data-type="ground"] {
  --type-color: #e2bf65;
  --type-text: var(--ink);
}

.type-badge[data-type="rock"] {
  --type-color: #b6a136;
}

.type-badge[data-type="bug"] {
  --type-color: #a6b91a;
  --type-text: var(--ink);
}

.type-badge[data-type="ghost"] {
  --type-color: #735797;
}

.type-badge[data-type="steel"] {
  --type-color: #b7b7ce;
  --type-text: var(--ink);
}

.type-badge[data-type="fire"] {
  --type-color: #ee8130;
}

.type-badge[data-type="water"] {
  --type-color: #6390f0;
}

.type-badge[data-type="grass"] {
  --type-color: #7ac74c;
  --type-text: var(--ink);
}

.type-badge[data-type="electric"] {
  --type-color: #f7d02c;
  --type-text: var(--ink);
}

.type-badge[data-type="psychic"] {
  --type-color: #f95587;
}

.type-badge[data-type="ice"] {
  --type-color: #96d9d6;
  --type-text: var(--ink);
}

.type-badge[data-type="dragon"] {
  --type-color: #6f35fc;
}

.type-badge[data-type="dark"] {
  --type-color: #705746;
}

.type-badge[data-type="fairy"] {
  --type-color: #d685ad;
}

.weather-panel {
  margin-top: 20px;
  padding: 28px 20px 20px;
}

.vigilance-banner {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  border: 4px solid var(--shadow);
  background: var(--yellow);
  color: var(--ink);
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 3px 3px 0 var(--screen-dark);
  text-transform: uppercase;
}

.vigilance-banner[hidden] {
  display: none;
}

.vigilance-banner strong,
.vigilance-banner span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vigilance-orange {
  background: #f28c28;
  color: white;
}

.vigilance-rouge {
  background: #d7372f;
  color: white;
}

.weather-main {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 330px) minmax(0, 1fr);
  gap: clamp(16px, 4vw, 36px);
  align-items: center;
}

.weather-readout {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 14px;
  justify-items: stretch;
}

.temperature-row {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: clamp(10px, 2vw, 18px);
  align-items: center;
  justify-content: start;
}

.location-compact {
  width: 100%;
}

.location-status {
  display: block;
  max-width: 100%;
  margin-bottom: 5px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
}

.location-status[hidden] {
  display: none;
}

.location-picker {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: 42px max-content;
  gap: 6px;
  align-items: start;
  justify-content: end;
}

.city-search {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(82px, 148px) 42px 42px;
  gap: 6px;
}

.city-search input {
  min-width: 0;
  border: 4px solid var(--shadow);
  background: #fffdf1;
  color: var(--ink);
  padding: 7px 8px;
  font: 700 9px/1.45 var(--body-font);
  box-shadow: 3px 3px 0 var(--shadow);
}

.mode-button {
  width: auto;
  min-width: 42px;
  height: 34px;
  padding: 0 7px;
  font-size: 9px;
  line-height: 1.25;
}

.mode-button.is-active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
  background: var(--green);
  color: #fffdf1;
}

.city-results {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
}

.city-result {
  width: 100%;
  height: auto;
  min-height: 36px;
  padding: 7px 9px;
  background: white;
  text-align: left;
  font-size: 9px;
  line-height: 1.45;
}

button {
  width: 42px;
  height: 42px;
  border: 4px solid var(--shadow);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  font: 700 24px/1 var(--ui-font);
  cursor: pointer;
}

.title-row .info-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-width: 3px;
  background: #fffdf1;
  color: var(--blue);
  font-size: 20px;
}

.refresh-button {
  font-size: 18px;
}

button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}

.temperature {
  font-size: clamp(58px, 10vw, 96px);
  font-weight: 700;
  line-height: 1;
}

.unit {
  font-size: .35em;
  vertical-align: super;
}

.minmax {
  display: grid;
  gap: 8px;
  align-content: center;
}

.minmax span {
  display: flex;
  min-width: 82px;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border: 3px solid var(--shadow);
  background: white;
  padding: 7px 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.condition {
  margin: 0;
  border: 3px solid var(--shadow);
  background: #fffdf1;
  padding: 12px 14px;
  font-size: clamp(10px, 1.35vw, 13px);
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.weather-extra-row {
  min-width: 0;
  width: min(100%, 440px);
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.weather-extra-row[hidden] {
  display: none;
}

.weather-gust-row {
  min-width: 0;
  width: min(100%, 440px);
  justify-self: center;
}

.weather-gust-row[hidden] {
  display: none;
}

.weather-gust-row .weather-info-chip {
  width: 100%;
}

.weather-info-chip {
  min-width: 0;
  max-width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 3px solid var(--shadow);
  background: white;
  padding: 7px 6px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-align: center;
}

.weather-info-chip span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.weather-info-warning {
  background: var(--yellow);
  color: var(--ink);
}

.weather-info-gust,
.gust-detail {
  color: var(--red);
}

.weather-info-sprite {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.weather-info-gust .weather-info-sprite {
  width: 45px;
  height: 45px;
}

.current-condition-pokemon {
  min-width: 0;
  max-width: 100%;
  min-height: 252px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  border: 4px solid var(--shadow);
  background: #fffdf1;
  padding: 16px;
  color: var(--blue);
  font-weight: 700;
}

.weather-pixel-scene {
  --scene-sky: #d8ebff;
  --scene-cloud: #fffdf1;
  --scene-cloud-shadow: #b9d0dc;
  --scene-rain: #2f6fb7;
  --scene-light: #f7d02c;
  position: relative;
  z-index: 0;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--scene-background, var(--scene-sky));
  image-rendering: pixelated;
  isolation: isolate;
}

.current-weather-scene {
  width: min(100%, 258px);
}

.forecast-weather-scene {
  width: 82px;
  max-width: 100%;
}

.weather-pixel-scene::before,
.weather-pixel-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  image-rendering: pixelated;
}

.current-weather-sprite {
  position: relative;
  z-index: 2;
  width: clamp(148px, 20vw, 216px);
  height: clamp(148px, 20vw, 216px);
  object-fit: contain;
  image-rendering: pixelated;
}

.weather-pixel-scene--sun {
  --scene-sky: #dff3ff;
}

.weather-pixel-scene--sun::before,
.weather-pixel-scene--partly::before {
  inset: 22px 22px auto auto;
  width: 52px;
  height: 52px;
  background: var(--scene-light);
  box-shadow:
    -12px 0 0 var(--scene-light),
    12px 0 0 var(--scene-light),
    0 -12px 0 var(--scene-light),
    0 12px 0 var(--scene-light),
    10px 10px 0 #f3a833;
  animation: pixel-sun 1800ms steps(2, end) infinite;
}

.weather-pixel-scene--sun::after {
  background:
    linear-gradient(0deg, rgba(255,253,241,.28) 0 6px, transparent 6px 16px);
  background-size: 100% 16px;
  animation: pixel-haze 2600ms steps(4, end) infinite;
}

.weather-pixel-scene--partly {
  --scene-sky: #e4f5ff;
}

.weather-pixel-scene--partly::after,
.weather-pixel-scene--cloud::before {
  inset: 74px auto auto -82px;
  width: 132px;
  height: 44px;
  background:
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 18px 12px / 80px 24px no-repeat,
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 42px 0 / 42px 42px no-repeat,
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 78px 18px / 44px 20px no-repeat,
    linear-gradient(var(--scene-cloud-shadow), var(--scene-cloud-shadow)) 22px 32px / 92px 6px no-repeat;
  animation: pixel-cloud 5200ms steps(14, end) infinite;
}

.weather-pixel-scene--cloud {
  --scene-sky: #e2e8e4;
}

.weather-pixel-scene--cloud::after {
  inset: 28px auto auto -120px;
  width: 168px;
  height: 62px;
  background:
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 10px 24px / 112px 26px no-repeat,
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 42px 8px / 56px 46px no-repeat,
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 104px 30px / 48px 20px no-repeat,
    linear-gradient(var(--scene-cloud-shadow), var(--scene-cloud-shadow)) 18px 50px / 126px 8px no-repeat;
  animation: pixel-cloud 7600ms steps(16, end) infinite reverse;
}

.weather-pixel-scene--fog {
  --scene-sky: #ededdf;
}

.weather-pixel-scene--fog::before,
.weather-pixel-scene--fog::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(255,253,241,.72) 16px 24px, transparent 24px 38px),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(151,163,159,.28) 34px 42px, transparent 42px 56px);
  background-size: 100% 56px;
  animation: pixel-fog 4200ms steps(8, end) infinite;
}

.weather-pixel-scene--fog::after {
  opacity: .72;
  animation-duration: 6200ms;
  animation-direction: reverse;
}

.weather-pixel-scene--rain,
.weather-pixel-scene--moderateRain {
  --scene-sky: #d7e8f2;
}

.weather-pixel-scene--rain {
  --scene-rain: rgba(47, 111, 183, .6);
}

.weather-pixel-scene--heavyRain {
  --scene-sky: #c7d7e3;
  --scene-rain: #2f6fb7;
}

.weather-pixel-scene--storm {
  --scene-sky: #bccbd9;
  --scene-rain: #d8ebff;
}

.weather-pixel-scene--rain::before,
.weather-pixel-scene--moderateRain::before,
.weather-pixel-scene--heavyRain::before,
.weather-pixel-scene--storm::before {
  background:
    repeating-linear-gradient(105deg, transparent 0 10px, var(--scene-rain) 10px 14px, transparent 14px 24px);
  background-size: 32px 42px;
  animation: pixel-rain 540ms steps(6, end) infinite;
}

.weather-pixel-scene--rain::before {
  background:
    repeating-linear-gradient(105deg, transparent 0 18px, var(--scene-rain) 18px 20px, transparent 20px 38px);
  background-size: 54px 72px;
  animation-duration: 900ms;
}

.weather-pixel-scene--moderateRain::after,
.weather-pixel-scene--heavyRain::after {
  background:
    repeating-linear-gradient(105deg, transparent 0 6px, rgba(216,235,255,.72) 6px 10px, transparent 10px 20px);
  background-size: 28px 36px;
  animation: pixel-rain 420ms steps(6, end) infinite;
}

.weather-pixel-scene--storm::after {
  inset: 18px 32px auto auto;
  width: 42px;
  height: 84px;
  background:
    linear-gradient(var(--scene-light), var(--scene-light)) 16px 0 / 16px 32px no-repeat,
    linear-gradient(var(--scene-light), var(--scene-light)) 8px 28px / 22px 18px no-repeat,
    linear-gradient(var(--scene-light), var(--scene-light)) 0 42px / 16px 28px no-repeat,
    linear-gradient(#fffdf1, #fffdf1) 20px 8px / 10px 18px no-repeat;
  opacity: 0;
  animation: pixel-lightning 2200ms steps(1, end) infinite;
}

.weather-pixel-scene--snow {
  --scene-sky: #e7f5f7;
}

.weather-pixel-scene--snow::before,
.weather-pixel-scene--snow::after {
  background:
    linear-gradient(#fffdf1, #fffdf1) 16px 8px / 6px 6px no-repeat,
    linear-gradient(#fffdf1, #fffdf1) 52px 36px / 8px 8px no-repeat,
    linear-gradient(#fffdf1, #fffdf1) 96px 18px / 6px 6px no-repeat,
    linear-gradient(#fffdf1, #fffdf1) 146px 54px / 8px 8px no-repeat,
    linear-gradient(#fffdf1, #fffdf1) 202px 24px / 6px 6px no-repeat;
  background-size: 230px 118px;
  animation: pixel-snow 3600ms steps(9, end) infinite;
}

.weather-pixel-scene--snow::after {
  opacity: .72;
  animation-duration: 5200ms;
  animation-delay: -1800ms;
}

.weather-pixel-scene--wind {
  --scene-sky: #ddf0f8;
}

.weather-pixel-scene--wind::before,
.weather-pixel-scene--wind::after {
  background:
    linear-gradient(rgba(255,253,241,.8), rgba(255,253,241,.8)) 0 42px / 74px 6px no-repeat,
    linear-gradient(rgba(255,253,241,.8), rgba(255,253,241,.8)) 76px 86px / 112px 6px no-repeat,
    linear-gradient(rgba(47,111,183,.32), rgba(47,111,183,.32)) 24px 134px / 98px 6px no-repeat;
  animation: pixel-wind 1500ms steps(8, end) infinite;
}

.weather-pixel-scene--wind::after {
  opacity: .7;
  animation-duration: 2100ms;
  animation-direction: reverse;
}

.weather-pixel-scene--neutral::before {
  background:
    linear-gradient(90deg, transparent 0 12px, rgba(47,111,183,.12) 12px 16px),
    linear-gradient(0deg, transparent 0 12px, rgba(47,111,183,.12) 12px 16px);
  background-size: 32px 32px;
  animation: pixel-idle 3000ms steps(3, end) infinite;
}

.forecast-weather-scene.weather-pixel-scene--sun::before,
.forecast-weather-scene.weather-pixel-scene--partly::before {
  inset: 8px 8px auto auto;
  width: 22px;
  height: 22px;
  box-shadow:
    -5px 0 0 var(--scene-light),
    5px 0 0 var(--scene-light),
    0 -5px 0 var(--scene-light),
    0 5px 0 var(--scene-light),
    4px 4px 0 #f3a833;
  animation-name: pixel-forecast-sun;
}

.forecast-weather-scene.weather-pixel-scene--sun::after {
  background:
    linear-gradient(0deg, rgba(255,253,241,.28) 0 3px, transparent 3px 8px);
  background-size: 100% 8px;
}

.forecast-weather-scene.weather-pixel-scene--partly::after,
.forecast-weather-scene.weather-pixel-scene--cloud::before {
  inset: 28px auto auto -42px;
  width: 64px;
  height: 24px;
  background:
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 8px 8px / 40px 12px no-repeat,
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 20px 1px / 22px 20px no-repeat,
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 42px 12px / 18px 9px no-repeat,
    linear-gradient(var(--scene-cloud-shadow), var(--scene-cloud-shadow)) 10px 20px / 46px 3px no-repeat;
  animation-name: pixel-forecast-cloud;
}

.forecast-weather-scene.weather-pixel-scene--cloud::after {
  inset: 10px auto auto -54px;
  width: 82px;
  height: 30px;
  background:
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 4px 12px / 56px 13px no-repeat,
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 20px 4px / 28px 23px no-repeat,
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 52px 15px / 24px 10px no-repeat,
    linear-gradient(var(--scene-cloud-shadow), var(--scene-cloud-shadow)) 8px 25px / 62px 4px no-repeat;
  animation-name: pixel-forecast-cloud;
}

.forecast-weather-scene.weather-pixel-scene--fog::before,
.forecast-weather-scene.weather-pixel-scene--fog::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,253,241,.72) 8px 12px, transparent 12px 19px),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(151,163,159,.28) 17px 21px, transparent 21px 28px);
  background-size: 100% 28px;
}

.forecast-weather-scene.weather-pixel-scene--rain::before,
.forecast-weather-scene.weather-pixel-scene--moderateRain::before,
.forecast-weather-scene.weather-pixel-scene--heavyRain::before,
.forecast-weather-scene.weather-pixel-scene--storm::before {
  background:
    repeating-linear-gradient(105deg, transparent 0 5px, var(--scene-rain) 5px 7px, transparent 7px 12px);
  background-size: 16px 21px;
  animation-name: pixel-forecast-rain;
}

.forecast-weather-scene.weather-pixel-scene--rain::before {
  background:
    repeating-linear-gradient(105deg, transparent 0 9px, var(--scene-rain) 9px 10px, transparent 10px 19px);
  background-size: 27px 36px;
}

.forecast-weather-scene.weather-pixel-scene--moderateRain::after,
.forecast-weather-scene.weather-pixel-scene--heavyRain::after {
  background:
    repeating-linear-gradient(105deg, transparent 0 3px, rgba(216,235,255,.72) 3px 5px, transparent 5px 10px);
  background-size: 14px 18px;
  animation-name: pixel-forecast-rain;
}

.forecast-weather-scene.weather-pixel-scene--storm::after {
  inset: 6px 10px auto auto;
  width: 18px;
  height: 36px;
  background:
    linear-gradient(var(--scene-light), var(--scene-light)) 7px 0 / 7px 14px no-repeat,
    linear-gradient(var(--scene-light), var(--scene-light)) 3px 12px / 10px 8px no-repeat,
    linear-gradient(var(--scene-light), var(--scene-light)) 0 18px / 7px 12px no-repeat,
    linear-gradient(#fffdf1, #fffdf1) 9px 3px / 4px 8px no-repeat;
}

.forecast-weather-scene.weather-pixel-scene--snow::before,
.forecast-weather-scene.weather-pixel-scene--snow::after {
  background:
    linear-gradient(#fffdf1, #fffdf1) 7px 4px / 3px 3px no-repeat,
    linear-gradient(#fffdf1, #fffdf1) 23px 18px / 4px 4px no-repeat,
    linear-gradient(#fffdf1, #fffdf1) 42px 8px / 3px 3px no-repeat,
    linear-gradient(#fffdf1, #fffdf1) 62px 25px / 4px 4px no-repeat,
    linear-gradient(#fffdf1, #fffdf1) 76px 12px / 3px 3px no-repeat;
  background-size: 92px 48px;
  animation-name: pixel-forecast-snow;
}

.forecast-weather-scene.weather-pixel-scene--wind::before,
.forecast-weather-scene.weather-pixel-scene--wind::after {
  background:
    linear-gradient(rgba(255,253,241,.8), rgba(255,253,241,.8)) 0 18px / 34px 3px no-repeat,
    linear-gradient(rgba(255,253,241,.8), rgba(255,253,241,.8)) 34px 39px / 48px 3px no-repeat,
    linear-gradient(rgba(47,111,183,.32), rgba(47,111,183,.32)) 10px 58px / 42px 3px no-repeat;
  animation-name: pixel-forecast-wind;
}

.forecast-weather-scene.weather-pixel-scene--neutral::before {
  background:
    linear-gradient(90deg, transparent 0 6px, rgba(47,111,183,.12) 6px 8px),
    linear-gradient(0deg, transparent 0 6px, rgba(47,111,183,.12) 6px 8px);
  background-size: 16px 16px;
}

.weather-pixel-scene.is-night-scene {
  --scene-sky: #26385f;
  --scene-cloud: #dfe5e5;
  --scene-cloud-shadow: #65778f;
  --scene-rain: #8bbce8;
  --scene-light: #f6e6a6;
}

.weather-pixel-scene.is-night-scene.weather-pixel-scene--rain,
.weather-pixel-scene.is-night-scene.weather-pixel-scene--moderateRain,
.weather-pixel-scene.is-night-scene.weather-pixel-scene--heavyRain,
.weather-pixel-scene.is-night-scene.weather-pixel-scene--storm,
.weather-pixel-scene.is-night-scene.weather-pixel-scene--snow {
  --scene-background:
    linear-gradient(var(--scene-cloud-shadow), var(--scene-cloud-shadow)) 0 52px / 58% 10px no-repeat,
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 10px 30px / 45% 24px no-repeat,
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 35% 20px / 32% 34px no-repeat,
    linear-gradient(var(--scene-cloud-shadow), var(--scene-cloud-shadow)) 55% 76px / 50% 8px no-repeat,
    linear-gradient(var(--scene-cloud), var(--scene-cloud)) 60% 52px / 42% 26px no-repeat,
    var(--scene-sky);
}

.weather-pixel-scene.is-night-scene.weather-pixel-scene--storm {
  --scene-rain: #d8ebff;
  --scene-light: #ffe46b;
}

.weather-pixel-scene.is-night-scene.weather-pixel-scene--fog {
  --scene-background:
    linear-gradient(rgba(255,253,241,.14), rgba(255,253,241,.14)) 0 36px / 100% 18px no-repeat,
    linear-gradient(rgba(101,119,143,.42), rgba(101,119,143,.42)) 0 112px / 100% 14px no-repeat,
    var(--scene-sky);
}

.weather-pixel-scene.is-night-scene.weather-pixel-scene--wind {
  --scene-background:
    linear-gradient(rgba(255,253,241,.12), rgba(255,253,241,.12)) 0 44px / 100% 8px no-repeat,
    linear-gradient(rgba(139,188,232,.16), rgba(139,188,232,.16)) 0 142px / 100% 8px no-repeat,
    var(--scene-sky);
}

.weather-pixel-scene.is-night-scene.weather-pixel-scene--neutral::before {
  background:
    linear-gradient(90deg, transparent 0 12px, rgba(246,230,166,.14) 12px 16px),
    linear-gradient(0deg, transparent 0 12px, rgba(246,230,166,.14) 12px 16px);
  background-size: 32px 32px;
}

.weather-pixel-scene.is-night-scene.weather-pixel-scene--sun::before,
.weather-pixel-scene.is-night-scene.weather-pixel-scene--partly::before {
  inset: 22px 22px auto auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--scene-light);
  box-shadow: 14px -4px 0 -2px var(--scene-sky);
  animation: pixel-moon 2600ms steps(2, end) infinite;
}

.weather-pixel-scene.is-night-scene.weather-pixel-scene--sun::after {
  background:
    linear-gradient(#fffdf1, #fffdf1) 34px 38px / 4px 4px no-repeat,
    linear-gradient(#fffdf1, #fffdf1) 90px 22px / 3px 3px no-repeat,
    linear-gradient(#fffdf1, #fffdf1) 178px 64px / 4px 4px no-repeat,
    linear-gradient(rgba(255,253,241,.55), rgba(255,253,241,.55)) 220px 26px / 3px 3px no-repeat;
  animation: pixel-stars 3200ms steps(2, end) infinite;
}

.forecast-weather-scene.is-night-scene.weather-pixel-scene--sun::before,
.forecast-weather-scene.is-night-scene.weather-pixel-scene--partly::before {
  inset: 8px 8px auto auto;
  width: 21px;
  height: 21px;
  box-shadow: 6px -2px 0 -1px var(--scene-sky);
  animation-name: pixel-forecast-moon;
}

.forecast-weather-scene.is-night-scene.weather-pixel-scene--sun::after {
  background:
    linear-gradient(#fffdf1, #fffdf1) 12px 18px / 2px 2px no-repeat,
    linear-gradient(#fffdf1, #fffdf1) 38px 9px / 2px 2px no-repeat,
    linear-gradient(rgba(255,253,241,.55), rgba(255,253,241,.55)) 70px 28px / 2px 2px no-repeat;
}

.current-weather-name {
  max-width: 100%;
  font-size: clamp(15px, 2.4vw, 28px);
  padding: 3px 0 4px;
  line-height: 1.35;
  text-align: center;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.current-weather-name.name-long {
  font-size: clamp(13px, 2vw, 23px);
}

.current-weather-name.name-very-long {
  font-size: clamp(11px, 1.7vw, 19px);
}

.current-weather-detail {
  max-width: 100%;
  border: 3px solid var(--shadow);
  background: #fffdf1;
  padding: 5px 8px;
  color: var(--ink);
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

@keyframes pixel-sun {
  50% {
    transform: translate(2px, 2px);
    box-shadow:
      -14px 0 0 var(--scene-light),
      14px 0 0 var(--scene-light),
      0 -14px 0 var(--scene-light),
      0 14px 0 var(--scene-light),
      10px 10px 0 #f3a833;
  }
}

@keyframes pixel-haze {
  to {
    background-position: 0 16px;
  }
}

@keyframes pixel-moon {
  50% {
    transform: translate(1px, 1px);
    box-shadow: 13px -3px 0 -2px var(--scene-sky);
  }
}

@keyframes pixel-stars {
  50% {
    opacity: .55;
  }
}

@keyframes pixel-cloud {
  to {
    transform: translateX(382px);
  }
}

@keyframes pixel-fog {
  to {
    background-position: 48px 0, -32px 0;
  }
}

@keyframes pixel-rain {
  to {
    background-position: -32px 42px;
  }
}

@keyframes pixel-lightning {
  0%, 58%, 100% {
    opacity: 0;
  }

  60%, 66% {
    opacity: 1;
  }

  68%, 72% {
    opacity: .35;
  }
}

@keyframes pixel-snow {
  to {
    background-position: 18px 118px;
  }
}

@keyframes pixel-wind {
  to {
    background-position: 190px 42px, -154px 86px, 218px 134px;
  }
}

@keyframes pixel-idle {
  to {
    background-position: 32px 0, 0 32px;
  }
}

@keyframes pixel-forecast-sun {
  50% {
    transform: translate(1px, 1px);
    box-shadow:
      -6px 0 0 var(--scene-light),
      6px 0 0 var(--scene-light),
      0 -6px 0 var(--scene-light),
      0 6px 0 var(--scene-light),
      4px 4px 0 #f3a833;
  }
}

@keyframes pixel-forecast-moon {
  50% {
    transform: translate(1px, 1px);
    box-shadow: 5px -1px 0 -1px var(--scene-sky);
  }
}

@keyframes pixel-forecast-cloud {
  to {
    transform: translateX(132px);
  }
}

@keyframes pixel-forecast-rain {
  to {
    background-position: -16px 21px;
  }
}

@keyframes pixel-forecast-snow {
  to {
    background-position: 8px 48px;
  }
}

@keyframes pixel-forecast-wind {
  to {
    background-position: 82px 18px, -70px 39px, 94px 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .weather-pixel-scene::before,
  .weather-pixel-scene::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}

.sun-row {
  min-width: 0;
  width: min(100%, 440px);
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sun-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  height: 58px;
  border: 3px solid var(--shadow);
  background: white;
  padding: 7px 6px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-align: center;
}

.sun-time span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sun-sprite {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.phrase-box {
  min-width: 0;
  max-width: 100%;
  margin-top: 34px;
  padding: 28px 18px 18px;
  background: #fffdf1;
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.daily-pokemon {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.phrase-box > p {
  margin: 0;
  font-size: clamp(19px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.25;
}

.professor-card {
  min-width: 0;
}

.professor-card #pokemonPhrase {
  margin: 0;
}

.professor-copy {
  min-width: 0;
}

.professor-card #pokemonPhrase {
  font-size: clamp(9px, 1.35vw, 12px);
  font-weight: 700;
  line-height: 1.6;
}

.notification-panel {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}

.notification-panel[hidden] {
  display: none;
}

.notification-button {
  width: auto;
  min-width: 132px;
  height: 38px;
  padding: 0 10px;
  white-space: nowrap;
}

.notification-button:disabled {
  cursor: not-allowed;
  opacity: .62;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.forecast-section {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  margin-top: 34px;
  padding: 28px 16px 28px;
}

.section-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.section-heading {
  position: absolute;
  top: 0;
  left: 14px;
  z-index: 2;
  max-width: calc(100% - 28px);
  display: flex;
  align-items: center;
  transform: translateY(-50%);
}

.panel-title {
  position: absolute;
  top: 0;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 28px);
  border: 4px solid var(--shadow);
  background: var(--yellow);
  color: var(--blue);
  padding: 7px 12px 6px;
  font-family: var(--panel-title-font);
  font-size: clamp(9px, 1.25vw, 12px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  text-shadow: none;
  text-transform: uppercase;
  transform: translateY(-50%) scaleX(var(--body-condense));
  box-shadow: 3px 3px 0 var(--screen-dark);
}

.section-heading .panel-title {
  position: static;
  top: auto;
  left: auto;
  max-width: 100%;
  transform: scaleX(var(--body-condense));
  transform-origin: left center;
}

.panel-title span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.section-title strong {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  border: 3px solid var(--shadow);
  background: #fffdf1;
  color: var(--ink);
  padding: 5px 8px;
  font-family: var(--body-font);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  white-space: normal;
  overflow-wrap: anywhere;
}

.section-plus-button {
  position: absolute;
  right: 14px;
  bottom: 0;
  z-index: 2;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-width: 3px;
  padding: 0;
  background: #fffdf1;
  color: var(--blue);
  font: 700 20px/1 var(--ui-font);
  box-shadow: 3px 3px 0 var(--shadow);
  transform: translateY(50%);
}

.section-plus-button[hidden] {
  display: none;
}

.section-plus-button:active {
  transform: translate(2px, calc(50% + 2px));
}

.hourly-track {
  min-width: 0;
  max-width: 100%;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 2px;
  padding: 2px 4px 10px 2px;
  -webkit-overflow-scrolling: touch;
}

.hourly-card {
  flex: 0 0 calc((100% - 52px) / 6);
  min-width: 0;
  scroll-snap-align: start;
  border: 3px solid var(--shadow);
  background: #fffdf1;
  box-shadow: 3px 3px 0 var(--screen-dark);
  padding: 9px 7px;
}

.hourly-head,
.hourly-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px 6px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
}

.hourly-head {
  color: var(--blue);
}

.hourly-date {
  color: var(--ink);
  font-size: 7px;
  text-transform: uppercase;
}

.hourly-condition {
  min-height: 28px;
  margin-bottom: 0;
}

.hourly-meta {
  margin-top: 0;
}

.hourly-meta strong {
  flex: 0 0 100%;
  font-size: 20px;
}

.hourly-meta span {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  font-size: 7px;
  line-height: 1.25;
}

.hourly-meta .hourly-uv {
  text-align: center;
}

.hourly-meta .hourly-gust {
  flex-basis: 100%;
  text-align: center;
}

.daily-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.day-card,
.rain-slot {
  border: 3px solid var(--shadow);
  background: #fffdf1;
  box-shadow: 3px 3px 0 var(--screen-dark);
}

.day-card {
  min-width: 0;
  padding: 12px;
  cursor: pointer;
}

.day-card:focus-visible {
  outline: 4px solid var(--blue);
  outline-offset: 3px;
}

.day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

.weather-glyph {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 3px solid var(--shadow);
  background: var(--yellow);
  color: var(--ink);
  line-height: 1;
}

.day-condition {
  min-height: 34px;
  margin: 8px 0 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

.forecast-pokemon {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-height: 82px;
  margin-top: 6px;
}

.forecast-sprite {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
}

.day-temps {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.day-temps span,
.day-temps strong {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.day-card.is-extra-day-card {
  display: none;
}

.is-expanded .day-card.is-extra-day-card {
  display: block;
}

.day-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  color: var(--blue);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.3;
}

.day-details span {
  min-width: 0;
  flex: 1 1 auto;
  border: 3px solid var(--shadow);
  background: white;
  padding: 5px 6px;
  text-align: center;
}

.day-period-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.day-period-tab {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 8px 10px;
  background: #fffdf1;
  color: var(--blue);
  font: 700 9px/1.25 var(--body-font);
  text-transform: uppercase;
}

.day-period-tab.is-active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
  background: var(--yellow);
  color: var(--ink);
}

.day-period-content {
  padding-top: 14px;
}

.day-dialog-main {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 24px);
  align-items: center;
}

.day-dialog-condition-pokemon {
  min-height: 236px;
}

.day-dialog-weather-scene {
  width: min(100%, 220px);
}

.day-dialog-readout .temperature {
  font-size: clamp(46px, 8vw, 72px);
}

.rain-track {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.rain-hour-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 7px;
}

#rainHourSection:not(.is-expanded) .rain-hour-grid {
  display: none;
}

#rainForecastSection.is-rain-empty:not(.is-expanded) .rain-track {
  display: none;
}

.rain-slot,
.rain-hour-slot {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 10px 8px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.rain-slot {
  min-width: 0;
  padding: 8px 6px;
  overflow: hidden;
}

.rain-slot.is-extra-rain-slot {
  display: none;
}

.is-expanded .rain-slot.is-extra-rain-slot {
  display: grid;
}

.rain-hour-slot {
  min-width: 0;
  border: 3px solid var(--shadow);
  background: #fffdf1;
  box-shadow: 3px 3px 0 var(--screen-dark);
  gap: 4px;
  padding: 7px 4px 8px;
  font-size: 7px;
  line-height: 1.25;
}

.rain-time,
.rain-date,
.rain-hour-time {
  color: var(--blue);
  font-size: 10px;
}

.rain-date {
  margin-top: -4px;
  color: var(--ink);
  font-size: 8px;
  line-height: 1.25;
  text-transform: uppercase;
}

.rain-drop {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 3px solid var(--shadow);
  background: #d8ebff;
  font-size: 20px;
  line-height: 1;
}

.rain-pokemon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
}

.rain-sprite {
  width: 50px;
  height: 50px;
  object-fit: contain;
  image-rendering: pixelated;
}

.rain-hour-pokemon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 3px solid var(--shadow);
  background: #e9f7d7;
}

.rain-hour-sprite {
  width: 38px;
  height: 38px;
  object-fit: contain;
  image-rendering: pixelated;
}

.rain-hour-level-2 .rain-hour-pokemon {
  background: #d8ebff;
}

.rain-hour-level-3 .rain-hour-pokemon {
  background: #7bb7df;
}

.rain-hour-level-4 .rain-hour-pokemon {
  background: var(--blue);
}

.rain-hour-slot strong {
  min-height: 2.5em;
  font-size: 7px;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rain-hour-empty {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 3px solid var(--shadow);
  background: #fffdf1;
  box-shadow: 3px 3px 0 var(--screen-dark);
  padding: 10px 12px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

.rain-hour-empty strong,
.rain-hour-empty-detail {
  min-width: 0;
}

.rain-hour-empty-detail {
  grid-column: 2;
  display: block;
  margin-top: -8px;
  color: var(--blue);
  font-size: 8px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rain-hour-empty-sprite {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.rain-forecast-empty {
  grid-column: 1 / -1;
}

.rain-none .rain-drop {
  background: #e9f7d7;
}

.rain-low .rain-drop {
  background: #d8ebff;
}

.rain-mid .rain-drop {
  background: #7bb7df;
  color: white;
}

.rain-high .rain-drop {
  background: var(--blue);
  color: white;
}

.empty-panel {
  margin: 0;
  padding: 12px;
  border: 3px solid var(--shadow);
  background: #fffdf1;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

.info-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  border: 6px solid var(--shadow);
  background: var(--panel);
  color: var(--ink);
  padding: 0;
  box-shadow: 8px 8px 0 rgba(0,0,0,.35);
  font-family: var(--body-font);
}

.info-dialog::backdrop {
  background: rgba(32, 33, 36, .62);
}

.info-panel {
  padding: 16px;
}

.info-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  border-bottom: 4px solid var(--shadow);
  padding-bottom: 12px;
}

.info-head h2 {
  font-family: var(--title-font);
  font-size: clamp(22px, 4vw, 34px);
  line-height: .95;
}

.info-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  font-size: 24px;
}

.info-content {
  max-height: min(610px, calc(100vh - 170px));
  overflow: auto;
  padding-top: 14px;
}

.info-content section + section {
  margin-top: 16px;
}

.info-content h3 {
  margin: 0 0 10px;
  color: var(--blue);
  font-family: var(--title-font);
  font-size: 20px;
  line-height: .95;
  text-transform: uppercase;
}

.info-note {
  margin: 0;
  padding: 10px 12px;
  border: 3px solid var(--shadow);
  background: #fffdf1;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.55;
  box-shadow: 3px 3px 0 var(--screen-dark);
}

.info-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 3px solid var(--shadow);
  background: #fffdf1;
  box-shadow: 3px 3px 0 var(--screen-dark);
}

.info-row + .info-row {
  margin-top: 8px;
}

.info-sprite {
  width: 50px;
  height: 50px;
  object-fit: contain;
  image-rendering: pixelated;
}

.info-label {
  display: block;
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

.info-name {
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.info-detail {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

.loading {
  opacity: .68;
}

@media (max-width: 760px) {
  .shell {
    width: 100%;
    padding: 12px;
    align-items: start;
    justify-items: stretch;
  }

  .screen {
    width: 100%;
    box-shadow: 6px 6px 0 rgba(0,0,0,.35);
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px;
    align-items: start;
    padding-bottom: 10px;
  }

  .topbar > div:first-child {
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .top-controls {
    display: contents;
    padding-right: 0;
  }

  .date-info-row {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    gap: 6px;
  }

  .title-row {
    align-items: center;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px;
  }

  .weather-logo {
    width: 46px;
    height: 46px;
    transform: translateY(-8px);
  }

  .date-info-row .info-button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin-bottom: 0;
    font-size: 18px;
  }

  .route-label {
    margin-top: 8px;
    font-size: 7px;
  }

  h1 {
    margin-top: 2px;
    font-size: clamp(18px, 6vw, 32px);
    text-shadow:
      -2px -2px 0 var(--blue),
      2px -2px 0 var(--blue),
      -2px 2px 0 var(--blue),
      2px 2px 0 var(--blue),
      0 4px 0 #1f4e90,
      2px 5px 0 rgba(51,45,40,.45);
    -webkit-text-stroke: 1px var(--blue);
  }

  .location-compact {
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .location-status {
    margin-bottom: 4px;
    text-align: left;
  }

  .location-picker {
    grid-template-columns: 42px minmax(0, 1fr);
    justify-content: stretch;
  }

  .city-search {
    grid-template-columns: minmax(82px, 1fr) 42px 42px;
  }

  .date-chip {
    padding: 7px 8px;
    border-width: 3px;
    font-size: 8px;
    box-shadow: 3px 3px 0 var(--shadow);
  }

  .panel-title {
    left: 10px;
    max-width: calc(100% - 20px);
    font-size: clamp(7px, 2.4vw, 9px);
  }

  .section-title {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .weather-main,
  .day-dialog-main,
  .phrase-box {
    grid-template-columns: 1fr;
  }

  .current-condition-pokemon {
    min-height: 224px;
  }

  .condition {
    font-size: 10px;
  }

  .professor-card #pokemonPhrase {
    font-size: 10px;
  }

  .minmax {
    justify-content: center;
  }

  .weather-readout {
    text-align: center;
  }

  .weather-extra-row {
    justify-content: center;
  }

  .temperature-row {
    grid-template-columns: max-content max-content;
    justify-items: center;
    justify-content: center;
  }

  .daily-pokemon {
    max-width: 420px;
  }

  .notification-panel {
    align-items: stretch;
    justify-content: stretch;
  }

  .daily-grid {
    max-width: 100%;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 2px;
    padding: 2px 4px 8px 2px;
    -webkit-overflow-scrolling: touch;
  }

  .hourly-card {
    flex-basis: min(32vw, 160px);
  }

  .daily-grid .day-card {
    min-width: 0;
    flex: 0 0 min(76vw, 330px);
    scroll-snap-align: start;
  }

  .rain-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .rain-hour-grid {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 10px;
  }

  .rain-hour-slot {
    gap: 6px;
    padding: 10px 7px;
    font-size: 8px;
  }

  .rain-hour-pokemon {
    width: 50px;
    height: 50px;
  }

  .rain-hour-sprite {
    width: 46px;
    height: 46px;
  }

  .rain-hour-slot strong {
    font-size: 8px;
    line-height: 1.3;
  }
}

@media (max-width: 460px) {
  .shell {
    padding: 8px;
  }

  .screen {
    border-width: 4px;
    padding: 10px;
    box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  }

  .title-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 6px;
  }

  .weather-logo {
    width: 40px;
    height: 40px;
  }

  .date-info-row .info-button {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 16px;
  }

  .date-chip {
    padding: 5px 6px;
    font-size: 6px;
  }

  h1 {
    font-size: clamp(14px, 5.2vw, 24px);
  }

  .section-title {
    gap: 4px 6px;
  }

  .section-title strong {
    padding: 4px 6px;
    font-size: 7px;
    line-height: 1.2;
  }

  .route-label {
    font-size: 6px;
  }

  .condition {
    font-size: 8px;
    line-height: 1.55;
  }

  .professor-card #pokemonPhrase {
    font-size: 8px;
    line-height: 1.6;
  }

  .daily-pokemon {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .daily-sprite-stage {
    width: 78px;
  }

  .notification-panel {
    display: grid;
    gap: 8px;
  }

  .notification-button {
    width: 100%;
    min-width: 0;
  }

  .daily-grid {
    padding-bottom: 10px;
  }

  .daily-grid .day-card {
    flex-basis: min(82vw, 300px);
  }

  .hourly-card {
    flex-basis: min(48vw, 150px);
  }

  .rain-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rain-hour-grid {
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  }
}