/* Roaming Burritos: the public landing page shown to signed-out visitors.
   Tokens come from tokens.css. The game itself draws to a canvas and reads these same
   custom properties, so it follows light and dark with everything else.
   The site's CSP is script-src 'self' + trusted-types and style-src 'self', so there is
   no library here and no inline style attributes. */

.landing {
  --sky-1: #FFDFC0;
  --sky-2: #FBF6EE;
  --sun: #F7B267;
  --hill-far: #CBBF9C;
  --hill-mid: #AFA57F;
  --build: #B08968;
  --build-2: #9C7A5C;
  --roof: #6E4219;
  --win: #F7D9A0;
  --stone: #D8CDB8;
  --patina: #7FB7A3;
  --road: #6E665C;
  --road-line: #EFD9A8;
}
:root[data-theme='dark'] .landing {
  --sky-1: #2C2033;
  --sky-2: #0B1517;
  --sun: #C9683C;
  --hill-far: #2E2A24;
  --hill-mid: #262119;
  --build: #37302A;
  --build-2: #2C2620;
  --roof: #1C1712;
  --win: #FFB765;
  --stone: #4A4438;
  --patina: #3E6B5E;
  --road: #211D19;
  --road-line: #6B5B3C;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .landing {
    --sky-1: #2C2033;
    --sky-2: #0B1517;
    --sun: #C9683C;
    --hill-far: #2E2A24;
    --hill-mid: #262119;
    --build: #37302A;
    --build-2: #2C2620;
    --roof: #1C1712;
    --win: #FFB765;
    --stone: #4A4438;
    --patina: #3E6B5E;
    --road: #211D19;
    --road-line: #6B5B3C;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body.landing {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: grid;
  place-items: center;
  padding: calc(var(--sat) + 24px) 16px calc(var(--sab) + 28px);
}

.wrap { width: 100%; max-width: 880px; display: grid; gap: clamp(18px, 3.2vw, 28px); }

/* ---------- Copy ---------- */
.copy { text-align: center; display: grid; gap: 12px; justify-items: center; }

.eyebrow {
  margin: 0;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 7px 12px;
  border-radius: 999px;
}

/* The lockup: mark plus wordmark. The fun is in the shapes and the two-tone type —
   the layout underneath stays strict, which is what keeps it from looking like a
   sticker sheet. One tilt, one colour change, and nothing else moves. */
.lockup {
  margin: 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.8vw, 16px);
  font: 800 clamp(34px, 7.4vw, 58px)/0.9 var(--font-display);
  letter-spacing: -0.035em;
}

.lockup-mark {
  width: clamp(44px, 8.4vw, 68px);
  height: auto;
  flex: none;
  /* The single playful move. Enough to read as hand-placed, small enough to stay tidy. */
  transform: rotate(-6deg);
  filter: drop-shadow(0 3px 0 rgb(34 28 21 / 0.10));
}
.mark-pin { fill: var(--accent); }
.mark-tortilla { fill: #FFF3DC; }
.mark-foil { fill: #B9C4D0; }
.mark-salsa { fill: var(--accent-strong); }
.mark-guac { fill: var(--avocado); }

.lockup-type { display: grid; text-align: left; }
.lockup-accent { color: var(--accent); }

.tagline { margin: 0; max-width: 36ch; font-size: clamp(15px, 2.2vw, 18px); color: var(--text-2); }

/* ---------- Game ---------- */
.stage { margin: 0; display: grid; gap: 10px; }

.stage-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  /* A tap should jump, not scroll or zoom the page. */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.stage-frame.is-playing { cursor: none; }

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

/* ---------- HUD ---------- */
.hud {
  position: absolute;
  inset: 12px 14px auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 13px var(--font-body);
  color: var(--text-2);
  pointer-events: none;
}

.hud-chip {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 5px 12px;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.hud-best { margin-left: auto; opacity: 0.85; }

.hud-route { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hud-route-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.hud-route-bar {
  flex: 1;
  height: 6px;
  min-width: 40px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.hud-route-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 120ms linear;
}

/* ---------- Overlay ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  transition: opacity 220ms var(--ease-out);
}
.overlay.is-hidden { opacity: 0; pointer-events: none; }

.overlay-title { margin: 0; font: 800 clamp(24px, 4vw, 34px)/1 var(--font-display); color: #fff; letter-spacing: -0.02em; }
.overlay-text { margin: 0; max-width: 38ch; color: rgb(255 255 255 / 0.86); font-size: 15px; }
.overlay-keys { margin: 0; font-size: 12.5px; color: rgb(255 255 255 / 0.66); }

.overlay-button {
  margin-top: 4px;
  min-height: var(--ctl);
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--button);
  color: var(--button-text);
  font: 700 16px/1 var(--font-body);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-spring);
}
.overlay-button:hover { background: var(--button-hover); }
.overlay-button:active { transform: scale(0.97); }
.overlay-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.stage-caption { margin: 0; text-align: center; font-size: 14px; color: var(--text-3); }

/* ---------- Call to action ---------- */
.cta { display: grid; gap: 12px; justify-items: center; text-align: center; }

.signin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--ctl);
  padding: 0 28px;
  border-radius: 999px;
  background: var(--button);
  color: var(--button-text);
  font: 600 16px/1 var(--font-body);
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-spring);
}
.signin:hover { background: var(--button-hover); }
.signin:active { transform: scale(0.97); }
.signin:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.signin-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.note { margin: 0; max-width: 40ch; font-size: 14px; color: var(--text-3); }

/* The game never starts on its own, so reduced motion only needs to calm the chrome. */
@media (prefers-reduced-motion: reduce) {
  .overlay, .overlay-button, .signin, .hud-route-fill { transition: none; }
}

@media (max-width: 620px) {
  .hud-route-label { display: none; }
  .hud-best { display: none; }
}