: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(340px, 42%);
  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,
.pokemon-region,
.professor-copy,
.section-title strong,
.day-head,
.day-condition,
.forecast-pokemon-name,
.day-temps,
.rain-slot,
.rain-hour-slot,
.rain-date,
.rain-hour-empty,
.rain-hour-empty-detail,
.empty-panel,
.info-note,
.info-label,
.info-name,
.info-detail {
  transform: scaleX(var(--body-condense));
  transform-origin: left center;
}

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

h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
  margin-top: 5px;
  color: var(--yellow);
  font-family: var(--title-font);
  font-size: clamp(28px, 5.2vw, 54px);
  letter-spacing: 0;
  line-height: .92;
  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 {
  font-size: clamp(16px, 2.2vw, 24px);
}

.daily-pokemon #pokemonName.name-long {
  font-size: clamp(14px, 1.9vw, 20px);
}

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

.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;
}

.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;
}

.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;
}

.temperature-row {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: max-content minmax(180px, 1fr);
  gap: clamp(14px, 3vw, 26px);
  align-items: center;
}

.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-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;
}

.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: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.minmax span {
  border: 3px solid var(--shadow);
  background: white;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

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

.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:
    linear-gradient(90deg, rgba(47,111,183,.18) 1px, transparent 1px),
    linear-gradient(rgba(47,111,183,.18) 1px, transparent 1px),
    #d8ebff;
  background-size: 16px 16px;
  padding: 16px;
  color: var(--blue);
  font-weight: 700;
}

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

.current-weather-name {
  max-width: 100%;
  font-size: clamp(17px, 2.7vw, 30px);
  padding: 3px 0 4px;
  line-height: 1.35;
  text-align: center;
  text-transform: capitalize;
  overflow-wrap: anywhere;
}

.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;
}

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

.sun-time {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 3px solid var(--shadow);
  background: white;
  padding: 7px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
}

.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;
}

.pokemon-region {
  margin-top: 8px;
  color: var(--blue);
  font-size: 9px;
  line-height: 1.35;
  text-transform: uppercase;
}

.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;
}

.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 16px;
}

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

.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);
}

.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;
}

.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;
}

.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: 40px;
  margin: 12px 0;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

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

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

.forecast-pokemon-name {
  max-width: 100%;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

.day-temps {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.day-temps strong {
  font-size: 26px;
  font-weight: 700;
}

.day-temps span {
  padding: 5px 7px;
  border: 3px solid var(--shadow);
  background: white;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
}

.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;
}

.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-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-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);
    gap: 8px;
    align-items: start;
    padding-bottom: 10px;
  }

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

  .top-controls {
    display: contents;
  }

  .date-info-row {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .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);
  }

  .title-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(25px, 7vw, 38px);
    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: 3;
  }

  .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,
  .phrase-box {
    grid-template-columns: 1fr;
  }

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

  .minmax {
    justify-content: center;
  }

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

  .temperature-row {
    grid-template-columns: 1fr;
    justify-items: center;
  }

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

  .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;
  }

  .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;
  }

  .title-row .info-button {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 17px;
  }

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

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

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

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

  .condition,
  .professor-card #pokemonPhrase {
    font-size: 7px;
  }

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

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

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

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

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

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