:root {
  color-scheme: light;
  --dusk: #2B2D52;
  --sun: #F2A541;
  --sea: #2A8C9A;
  --paper: #FFF6E4;
  --ink: #23243F;
  --soft: #55577A;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--dusk);
  color: var(--ink);
  font: 400 1.0625rem/1.6 "Public Sans", system-ui, sans-serif;
}

h1, h2, h3, p, ul { margin: 0; padding: 0; }

a { color: inherit; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

/* The game only shows once the script has started it. */

#game { display: none; }

.play #game {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  color: var(--paper);
}

.bar {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 1rem;
}

.bar h1 { font: 600 1.5rem/1.2 "Pixelify Sans", monospace; }
.bar p { flex: 1; font-size: 0.875rem; opacity: 0.85; }
.bar a { font-size: 0.9375rem; white-space: nowrap; }

/* The map fills the space; the canvas is pinned so it can't grow the page. */
.map {
  position: relative;
  flex: 1;
  min-height: 0;
}

.zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zoom button {
  width: 44px;
  height: 44px;
  font: 600 1.5rem/1 "Pixelify Sans", monospace;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  box-shadow: inset 0 -3px 0 #D9C7A3;
  cursor: pointer;
}

#city {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  touch-action: manipulation;
}

#places {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
}

#places button, dialog button {
  font: 400 1rem/1.2 "Pixelify Sans", monospace;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  box-shadow: inset 0 -3px 0 #D9C7A3;
  padding: 0.5rem 0.75rem 0.6rem;
  white-space: nowrap;
  cursor: pointer;
}

#places button.seen { background: var(--sun); box-shadow: inset 0 -3px 0 #C47F22; }

dialog {
  width: min(30rem, calc(100vw - 32px));
  border: 4px solid var(--dusk);
  box-shadow: 0 0 0 4px var(--sun);
  background: var(--paper);
  color: var(--ink);
  padding: 1.25rem 1.5rem 1.5rem;
}

dialog::backdrop { background: rgb(35 36 63 / 0.55); }

dialog h2, dialog h3 {
  font: 600 1.75rem/1.2 "Pixelify Sans", monospace;
  margin-bottom: 0.5rem;
}

dialog p + p { margin-top: 0.6rem; }
dialog ul { list-style: none; }
dialog li + li { margin-top: 0.5rem; }
dialog form { margin-top: 1.25rem; }
dialog button { background: var(--sun); box-shadow: inset 0 -3px 0 #C47F22; font-size: 1.125rem; }

.meta { color: var(--soft); font-size: 0.9375rem; }
.how { color: var(--soft); }

#intro-skip { display: inline-block; margin-top: 0.75rem; font-size: 0.9375rem; }

/* The normal version, also shown if the game can't run. */

#plain {
  background: var(--paper);
  padding: clamp(32px, 6vw, 72px) 16px;
}

#plain > * { max-width: 40rem; margin-left: auto; margin-right: auto; }

#plain > h2 { font: 600 2.25rem/1.2 "Pixelify Sans", monospace; margin-bottom: 1.5rem; }

#plain article { margin-bottom: 1.75rem; }
#plain h3 { font: 600 1.375rem/1.3 "Pixelify Sans", monospace; }
#plain ul { list-style: none; }

html:not(.play) .back { display: none; }

@media (max-width: 520px) {
  .bar { flex-wrap: wrap; gap: 0 1rem; justify-content: space-between; }
  .bar p { order: 3; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}