/* ==========================================================================
   Lasthold — interface styling.

   Same tokens as gamehost.dev, so the game and the page it is listed on read as
   one product: warm paper rather than white, ink that stops short of black, dark
   that stops short of near-black, and ONE muted teal used deliberately.

   Scope note: this file styles the INTERFACE only. The world is painted on the
   canvas from a palette in the renderer and does not follow the theme — see
   canvas2d/backend.js for why.

   CSP note: dynamic styling goes through CSSOM (el.style.setProperty), never
   el.setAttribute('style', …). The former is not gated by style-src; the latter
   is, and would fail only in production where the header is actually set.
   ========================================================================== */

:root {
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 8px;
  --r-md: 12px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --t: .2s;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #14161a;
  --surface: #1c1f25;
  --surface-2: #232730;
  --line: rgba(255, 255, 255, .085);
  --line-2: rgba(255, 255, 255, .17);
  --text: #e6e8ec;
  --text-2: #a2a8b4;
  --text-3: #757b88;
  --accent: #6fc4b4;
  --accent-soft: rgba(111, 196, 180, .13);
  --accent-line: rgba(111, 196, 180, .34);
  --shadow: 0 16px 34px -18px rgba(0, 0, 0, .75);
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f6f5f2;
  --surface: #fffefb;
  --surface-2: #f1f0ea;
  --line: rgba(40, 38, 33, .11);
  --line-2: rgba(40, 38, 33, .2);
  --text: #23252b;
  --text-2: #5f6470;
  --text-3: #8a8f9a;
  --accent: #2c6f64;
  --accent-soft: #e6efec;
  --accent-line: rgba(44, 111, 100, .3);
  --shadow: 0 18px 36px -20px rgba(40, 38, 33, .26);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  /* The game is a fixed viewport, so a rubber-band scroll would only ever be an
     accident. */
  overscroll-behavior: none;
}

/* ── stage ─────────────────────────────────────────────────────────────────
   The world surface. The joystick attaches HERE, so every interface element
   must live outside it or a tap on a button would also start a drag. */

#stage {
  position: fixed;
  inset: 0;
  touch-action: none;
  cursor: default;
}

#world {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── boot ──────────────────────────────────────────────────────────────── */

#boot {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  gap: .9rem;
  justify-items: center;
  background: var(--bg);
  text-align: center;
  padding: 2rem;
}
#boot[hidden] { display: none; }

.boot__mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 2px solid var(--accent-line);
  border-top-color: var(--accent);
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#boot[data-state='error'] .boot__mark {
  animation: none;
  border-color: var(--line-2);
  border-top-color: var(--line-2);
}

.boot__title {
  font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em;
}
.boot__title b { color: var(--accent); font-weight: 600; }
#bootMsg { color: var(--text-2); font-size: .9rem; max-width: 34ch; }

/* ── HUD ───────────────────────────────────────────────────────────────────
   A diagnostics panel, not the game's interface. It exists because M2's whole
   purpose is judging feel and performance, and both need numbers on screen.
   Toggle with F3 or backquote. The real HUD arrives with M5's economy. */

#hud {
  position: fixed;
  top: 0; left: 0;
  z-index: 10;
  margin: .75rem;
  padding: .55rem .7rem;
  display: grid;
  gap: .12rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--text-2);
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
body[data-hud='off'] #hud { opacity: 0; }

#hud span:first-child { color: var(--accent); }
#hud .dim { color: var(--text-3); }

/* ── hint ──────────────────────────────────────────────────────────────── */

#hint {
  position: fixed;
  left: 50%; bottom: 1.1rem;
  translate: -50% 0;
  z-index: 10;
  padding: .5rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .82rem;
  color: var(--text-2);
  pointer-events: none;
  transition: opacity 1s var(--ease);
}
#hint b { color: var(--text); font-weight: 500; }
#hint.is-gone { opacity: 0; }

kbd {
  font-family: var(--mono); font-size: .78em;
  padding: .1em .35em; border-radius: 4px;
  border: 1px solid var(--line-2); color: var(--text);
}

/* ── paused ────────────────────────────────────────────────────────────── */

#paused {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: none;
  place-content: center;
  justify-items: center;
  gap: .4rem;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  text-align: center;
}
body[data-paused='true'] #paused { display: grid; }
#paused h2 { font-size: 1.5rem; letter-spacing: -.02em; font-weight: 600; }
#paused p { color: var(--text-2); font-size: .9rem; }

/* ── theme toggle ──────────────────────────────────────────────────────── */

#themeToggle {
  position: fixed;
  top: 0; right: 0;
  z-index: 10;
  margin: .75rem;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
#themeToggle:hover { color: var(--accent); border-color: var(--accent-line); }
#themeToggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#themeToggle svg { width: 16px; height: 16px; }
:root[data-theme='dark'] .i-sun { display: none; }
:root[data-theme='light'] .i-moon { display: none; }

/* ── rotate prompt ─────────────────────────────────────────────────────────
   Landscape only, as the design specifies. Shown rather than trying to reflow a
   landscape battlefield into a portrait window. */

#rotate {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  place-content: center;
  justify-items: center;
  gap: .7rem;
  background: var(--bg);
  text-align: center;
  padding: 2rem;
}
#rotate svg { width: 40px; height: 40px; color: var(--accent); }
#rotate p { color: var(--text-2); font-size: .92rem; max-width: 28ch; }

@media (orientation: portrait) and (max-width: 900px) {
  #rotate { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}