:root {
  --ink: #e8f0ff;
  --dim: #6b6390;
  --void: #05060d;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: "Press Start 2P", ui-monospace, monospace;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

.site-nav {
  flex: 0 0 auto;
  align-self: center;
}

.site-nav a {
  display: inline-block;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  /* A comfortable tap target on a phone without looking like a button on a
     desktop, where it should stay quiet and out of the way. */
  min-height: 34px;
  line-height: 18px;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--ink);
  border-color: var(--dim);
  outline: none;
}

.stage {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  align-items: center;
}

/* The canvas is 1280x720 of real pixels and is scaled down to fit, never up:
   letting the browser blow it past its native size would resample the 4x blit
   a second time and undo the whole point of the low-res buffer. */
#game {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  image-rendering: pixelated;
  background: var(--void);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 8px;
  line-height: 1.6;
  color: var(--dim);
}

.legend b {
  color: var(--ink);
  font-weight: normal;
}


/* ---------------------------------------------------------------------------
   Touch controls

   HTML rather than drawn into the canvas, deliberately. The buffer is 320x180
   and every pixel of it is the city; spending any of them on a d-pad would cost
   world. Overlay elements also stay a constant physical size no matter what the
   canvas is scaled to, which is what you want from a thumb target -- the game
   can be letterboxed down to a third of the screen and the buttons do not
   shrink with it.
   --------------------------------------------------------------------------- */
.touch { display: none; }

body.is-touch .touch {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;   /* only the buttons themselves take input */
  z-index: 10;
}

/* Keyboard hints are noise on a device with no keyboard. */
body.is-touch .legend { display: none; }

body.is-touch { touch-action: manipulation; }

body.is-touch #game,
body.is-touch .touch {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.cluster {
  position: absolute;
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  display: flex;
  gap: 0.75rem;
  pointer-events: auto;
}
.cluster.move { left: max(1.1rem, env(safe-area-inset-left)); }
.cluster.act  { right: max(1.1rem, env(safe-area-inset-right)); align-items: flex-end; }

.tbtn {
  /* 64px is the smallest target that is reliably hittable with a thumb without
     looking at it, which is the whole point here -- eyes stay on the city. */
  width: 64px;
  height: 64px;
  font-family: inherit;
  font-size: 18px;
  color: var(--ink);
  background: rgba(26, 27, 61, 0.72);
  border: 2px solid rgba(232, 240, 255, 0.35);
  border-radius: 10px;
  touch-action: none;             /* no scroll or pinch starting on a button */
  -webkit-tap-highlight-color: transparent;
  /* A long press on a button was raising the iOS "Copy / Look Up / Search with
     Google" callout over the game. `user-select` alone does not stop it --
     -webkit-touch-callout is the property that suppresses the callout itself,
     and Safari needs the prefixed selection rule as well as the standard one. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tbtn.down {
  background: rgba(255, 95, 162, 0.75);
  border-color: var(--ink);
}

/* The interact button only exists when there is something to interact with,
   so the thumb never hunts for a button that would do nothing. */
.tbtn.interact {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition: opacity .16s, transform .16s;
}
.tbtn.interact.avail {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.tbtn.mute {
  position: absolute;
  top: max(1.1rem, env(safe-area-inset-top));
  right: max(1.1rem, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  font-size: 14px;
  pointer-events: auto;
}
body.muted .tbtn.mute { color: var(--dim); border-color: rgba(107, 99, 144, 0.4); }


/* ---------------------------------------------------------------------------
   Title menu
   --------------------------------------------------------------------------- */
.menu {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  z-index: 5;
}
.menu[hidden] { display: none; }

.mbtn {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #12102a;
  background: #ffd98a;
  border: 2px solid #ffd98a;
  padding: 0.85rem 2.4rem;
  cursor: pointer;
  min-width: 190px;
  -webkit-tap-highlight-color: transparent;
}
.mbtn:hover, .mbtn:focus-visible { background: #fff4d6; border-color: #fff4d6; outline: none; }
.mbtn:focus-visible { box-shadow: 0 0 0 3px rgba(255, 217, 138, 0.35); }

/* The second action is quieter than the first: one of these is the thing you
   came here to do, and the other is not. */
.mbtn.ghost {
  color: #ffd98a;
  background: transparent;
  font-size: 9px;
  padding: 0.7rem 2.4rem;
}
.mbtn.ghost:hover, .mbtn.ghost:focus-visible { color: #12102a; background: #ffd98a; }

/* ---------------------------------------------------------------------------
   About
   --------------------------------------------------------------------------- */
.about {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(5, 6, 13, 0.88);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem) 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.about[hidden] { display: none; }

.about-panel {
  position: relative;
  max-width: 46rem;
  width: 100%;
  background: #12102a;
  border: 2px solid #2d2450;
  padding: clamp(1.5rem, 4vw, 3rem);
  /* The pixel font is superb for six words and punishing for six hundred, so
     the prose drops to something meant for reading. */
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: #cfd6ee;
}

.about-panel h2 {
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #ffd98a;
  margin: 0 0 1.5rem;
}
.about-panel h3 {
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.7;
  color: #8ad4ff;
  margin: 2.25rem 0 0.75rem;
}
.about-panel p { margin: 0 0 1rem; }
.about-panel b { color: #e8f0ff; font-weight: 600; }
.about-panel i { color: #e8f0ff; font-style: italic; }

.about-panel .lede {
  color: #e8f0ff;
  font-size: 17px;
  border-left: 2px solid #ff5fa2;
  padding-left: 1rem;
}
.about-panel .sign-off {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #2d2450;
  color: #6b6390;
  font-style: italic;
}

.about-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  color: var(--dim);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.about-close:hover, .about-close:focus-visible { color: var(--ink); outline: none; }