:root {
  --bg: #bfe9ff;
  --ink: #16213a;
  --card: #ffffff;
  --map: #7dd36f;
  --tile: #fff8e6;
  --home: #e2d6ff;
  --accent: #ffcc33;
  --hot: #ff7a59;
  --warm: #ffc94d;
  --cold: #a8d8ff;
  --found: #8fe388;
  --gap: 0.75rem;
  --bar: 2.75rem;
  --panel: 11rem;
  --vh: 100vh;
  color-scheme: light;
}

/* On a phone vh counts the space under the address bar too, and the hint would fall below the screen. */
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

* { box-sizing: border-box; }

/* Otherwise a rule that sets display, like .over's, shows what is hidden. */
[hidden] { display: none !important; }

html, body { overscroll-behavior: none; }

/* A container, so the map can size itself to the page's width, which leaves out a scrollbar. */
body {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: var(--vh);
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.4 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1 { margin: 0; line-height: 1.15; }

button { font: inherit; color: inherit; }

.buttons button,
#again {
  min-width: 6.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 0.1875rem 0 var(--ink);
  cursor: pointer;
}

.buttons .quiet { background: var(--card); }

#again:disabled { opacity: 0.5; cursor: default; }

button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* The intro: three scenes of the same size, so the buttons stay put from one to the next. */
.intro {
  --art: min(22rem, calc(var(--vh) * 0.45));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  width: min(100%, 36rem);
  margin: auto;
  padding: var(--gap);
  text-align: center;
}

.intro h1 { font-size: 1.75rem; }

.scenes { width: 100%; }

.scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  margin: 0;
  padding: var(--gap);
  border: 2px solid var(--ink);
  border-radius: 1.25rem;
  background: var(--card);
  box-shadow: 0 0.25rem 0 var(--ink);
}

/* Three lines, the longest caption on a phone, so the scenes are the same height. */
.scene figcaption { max-width: 30rem; min-height: 4.2em; font-size: 1.125rem; }

.art {
  height: var(--art);
  border-radius: 0.875rem;
}

.portrait {
  width: auto;
  max-width: 100%;
  object-fit: cover;
}

/* Sky, a green verge and the road; a container, so the car fits it whichever way it's wider. */
.stage {
  container-type: size;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(#8ad3ff, #dff4ff 58%, #74c965 58% 70%, #59606c 70%);
}

/* Mountains far off, snow on their tops. */
.stage::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 42%;
  left: 0;
  height: 34%;
  background: linear-gradient(#ffffff 0 22%, #8fa9c6 22%);
  clip-path: polygon(0 100%, 0 70%, 16% 30%, 30% 64%, 48% 0, 66% 56%, 80% 26%, 100% 62%, 100% 100%);
}

/* The line down the middle of the road. */
.stage::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 13%;
  left: 0;
  height: 0.25rem;
  background: repeating-linear-gradient(90deg, #ffffff 0 1.5rem, transparent 1.5rem 3rem);
}

/* The car's shape, as a container, so the backpack sits on the roof at any size. */
.ride {
  container-type: inline-size;
  position: absolute;
  bottom: 9%;
  left: 7%;
  z-index: 1;
  width: min(64cqw, 80cqh);
  aspect-ratio: 240 / 140;
}

.cruiser { display: block; width: 100%; height: auto; }

.ride .cruiser { position: absolute; inset: 0; }

.pack {
  position: absolute;
  bottom: 89%;
  left: 32%;
  z-index: 1;
  font-size: 19cqw;
  line-height: 1;
}

/* Where the drive-off ends, which is all of it that shows without motion: the car on its way out
   of the picture, the backpack on the road. */
.leaving { translate: 125% 0; }
.falling { translate: -10% 245%; rotate: -90deg; }

/* The search: the bar, the map and, under it, the panel with the hint, which the end screen takes
   over. The map is as big as the screen allows once the bar and the panel have their room, so the
   end screen never moves it. */
.game {
  --side: max(15rem, min(100cqw - 2 * var(--gap), var(--vh) - 4 * var(--gap) - var(--bar) - var(--panel), 44rem));
  display: grid;
  grid-template-rows: var(--bar) var(--side) var(--panel);
  align-content: center;
  gap: var(--gap);
  width: calc(var(--side) + 2 * var(--gap));
  min-height: var(--vh);
  margin: 0 auto;
  padding: var(--gap);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-width: 0;
}

.bar h1 {
  overflow: hidden;
  font-size: 1.25rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fuel {
  flex: none;
  margin: 0;
  padding: 0.25rem 0.75rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.map {
  --pad: 0.375rem;
  --between: 0.3125rem;
  position: relative;
  display: grid;
  grid-template: repeat(5, minmax(0, 1fr)) / repeat(5, minmax(0, 1fr));
  gap: var(--between);
  padding: var(--pad);
  border: 2px solid var(--ink);
  border-radius: 1.25rem;
  background: var(--map);
  box-shadow: 0 0.25rem 0 var(--ink);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.spot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
  min-height: 0;
  padding: 0.25rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--tile);
  color: var(--ink);
  font-size: calc(var(--side) / 11);
  line-height: 1;
  box-shadow: 0 0.1875rem 0 rgba(22, 33, 58, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The landmark's name, under its picture, where the spots have room for it. */
.spot::after {
  content: attr(data-name);
  display: none;
  font-size: 0.75rem;
  line-height: 1.15;
  text-align: center;
}

@media (min-width: 40rem) and (min-height: 40rem) {
  .spot { font-size: calc(var(--side) / 14); }
  .spot::after { display: block; }
}

.spot:enabled:hover { translate: 0 -0.125rem; }

.spot:disabled { cursor: default; }

.spot.home { background: var(--home); }

/* Once the round is over, the spots left unsearched step back. */
.spot:disabled:not([data-heat]):not(.home) { opacity: 0.6; }

.spot[data-heat="found"] { background: var(--found); }
.spot[data-heat="hot"] { background: var(--hot); }
.spot[data-heat="warm"] { background: var(--warm); }
.spot[data-heat="cold"] { background: var(--cold); }

/* The hint as a symbol too, so it doesn't rest on colour alone. */
.spot[data-heat]::before {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  font-size: 0.42em;
  line-height: 1;
}

.spot[data-heat="hot"]::before { content: "\1F525"; }
.spot[data-heat="warm"]::before { content: "\2600\FE0F"; }
.spot[data-heat="cold"]::before { content: "\2744\FE0F"; }

/* --col and --row, from play.js, put the car or the backpack on a spot: a spot's width and the gap
   between two spots for each column and row. */
.car,
.backpack {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  width: calc((100% - 2 * var(--pad) - 4 * var(--between)) / 5);
  aspect-ratio: 1;
  translate: calc(var(--col, 0) * (100% + var(--between))) calc(var(--row, 4) * (100% + var(--between)));
  pointer-events: none;
}

/* --turn, from play.js, is -1 when the car drives to the left. */
.car {
  z-index: 1;
  scale: var(--turn, 1) 1;
}

.car .cruiser {
  position: absolute;
  bottom: 2%;
  left: 0;
}

/* Óttar at the wheel, the right way round whichever way the car faces. */
.face {
  position: absolute;
  top: 37%;
  left: 41%;
  width: 34%;
  height: auto;
  aspect-ratio: 1;
  border: 2px solid var(--card);
  border-radius: 50%;
  object-fit: cover;
  scale: var(--turn, 1) 1;
}

/* At the top of its spot, so when it's found it rides on the Land Cruiser's roof again. */
.backpack {
  z-index: 2;
  display: grid;
  place-items: start center;
  top: calc(var(--pad) - 0.25em);
  font-size: calc(var(--side) / 11);
  line-height: 1;
  filter: drop-shadow(0 0 0.08em #ffffff) drop-shadow(0 0.06em 0 rgba(22, 33, 58, 0.45));
}

.panel {
  display: grid;
  min-height: 0;
}

/* The end screen takes the hint's place. */
.panel > * { grid-area: 1 / 1; }

.hint,
.over {
  align-self: start;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 1rem;
  background: var(--card);
}

.hint { font-size: 1.0625rem; text-align: center; }

.over {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.over img {
  flex: none;
  width: 9rem;
  height: auto;
  border-radius: 0.75rem;
}

.over h2 { margin: 0; font-size: 1.5rem; }
.over p { margin: 0.25rem 0 0.75rem; }

/* A phone held upright has room under the map for a bigger picture. */
@media (max-aspect-ratio: 3/4) and (min-height: 46rem) {
  .game { --panel: 20.5rem; }
  .over { flex-direction: column; gap: 0.5rem; text-align: center; }
  .over img { width: min(10rem, 50%); }
}

@media (prefers-reduced-motion: no-preference) {
  .leaving { animation: drive-off 2.8s ease-in 0.6s both; }
  .falling { animation: tumble 2.8s linear 0.6s both; }
  .car { transition: translate 0.7s ease-in-out; }
  .spot { transition: translate 0.15s; }
  .backpack { animation: pop 0.5s ease-out 0.6s both; }

  @keyframes drive-off {
    from { translate: 0 0; }
    to { translate: 125% 0; }
  }

  /* The roof pulls the backpack along a little, then drives out from under it. */
  @keyframes tumble {
    0%, 28% { translate: 0 0; rotate: 0deg; }
    40% { translate: 18% -12%; rotate: -20deg; }
    62% { translate: 4% 245%; rotate: -100deg; }
    72% { translate: -4% 205%; rotate: -95deg; }
    82%, 100% { translate: -10% 245%; rotate: -90deg; }
  }

  @keyframes pop {
    from { scale: 0; }
    70% { scale: 1.25; }
    to { scale: 1; }
  }
}