/* Page chrome only — everything in-world is drawn on the canvas.
   Colors mirror Palette.swift so the HTML menu and the game agree. */

:root {
  --background: rgb(26, 28, 38);
  --tile: rgb(237, 204, 140);
  --tile-text: rgb(64, 46, 20);
  --tile-valid: rgb(140, 217, 140);
  --tile-dead: rgb(230, 107, 102);
  --hud-text: rgb(235, 237, 245);
  --hud-dim: rgba(235, 237, 245, 0.55);
  --font: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--background);
  color: var(--hud-text);
  font-family: var(--font);
  /* The game owns every gesture: no scrolling, pinch-zoom or pull-to-refresh. */
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

#game {
  display: block;
  /* Desktop: frame the game as a landscape phone rather than a letterbox
     strip. Width is picked so the phone aspect ratio always fits the
     viewport — with `height: auto`, a max-height would clamp the height
     without shrinking the width and skew the frame. The canvas still
     reports its own size to the engine, which scales points so the visible
     world matches iOS exactly (see REFERENCE_WIDTH in main.js). */
  width: min(100vw, 1180px, calc(100dvh * 852 / 393));
  height: auto;
  aspect-ratio: 852 / 393;
  touch-action: none;
}

@media (pointer: coarse) {
  /* On a phone the game fills the screen, safe areas and all. */
  #game {
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
  }
}

/* MARK: Menu */

#menu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
  text-align: center;
  background: var(--background);
}

#menu[hidden] { display: none; }

.title-block { display: flex; flex-direction: column; gap: 8px; }

#menu h1 {
  margin: 0;
  font-size: clamp(38px, 9vw, 56px);
  font-weight: 800;
  letter-spacing: 10px;
  text-indent: 10px;
  color: var(--tile);
}

.tagline {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--hud-dim);
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.pill {
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  color: var(--background);
  cursor: pointer;
  transition: transform 0.08s ease, opacity 0.15s ease;
}

.pill:disabled { opacity: 0.35; cursor: default; }
.pill:not(:disabled):active { transform: scale(0.96); }

.play {
  font-size: 24px;
  letter-spacing: 4px;
  text-indent: 4px;
  padding: 14px 48px;
  background: var(--tile-valid);
}

.boss {
  font-size: 18px;
  letter-spacing: 3px;
  text-indent: 3px;
  padding: 11px 32px;
  background: var(--tile-dead);
}

#loading {
  margin: 0;
  font-size: 13px;
  color: var(--hud-dim);
}

#loading[hidden] { display: none; }

.hints {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(235, 237, 245, 0.35);
}

.hints p { margin: 0; }

/* MARK: Landscape gate — the iOS build is landscape-only. */

#rotate {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--background);
  color: var(--hud-dim);
  font-size: 16px;
  z-index: 10;
}

.rotate-icon { margin: 0; font-size: 44px; color: var(--tile); }

@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; }
}