/* Base: reset, app frame, background, typography, screen container, utilities.
   Owner: B. Uses tokens.css variables only. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--accent); }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  overscroll-behavior: none;
}

body {
  position: fixed;               /* kill rubber-band + pull-to-refresh on Android */
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--grad-hero) fixed, var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* ---- Arena background: vertical gradient + a faint diagonal tile pattern (static, cheap) ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(45deg, var(--arena-pattern) 0 18px, transparent 18px 36px),
    repeating-linear-gradient(-45deg, var(--arena-pattern) 0 18px, transparent 18px 36px);
}
/* soft vignette at the top + bottom so HUD and nav sit on calmer ground */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(5, 12, 40, 0.28) 0%, transparent 18%, transparent 78%, rgba(5, 12, 40, 0.35) 100%);
}

/* ---- App frame ---- */
#app {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  max-width: 640px;
  margin: 0 auto;
  isolation: isolate;
}
.outlet {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-fx);
}
#overlay-root { position: relative; z-index: var(--z-sheet); }

/* ---- Screens ---- */
.screen {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding:
    calc(var(--safe-top) + var(--hud-h) + var(--s-4))
    var(--s-4)
    calc(var(--safe-bottom) + var(--nav-h) + var(--s-6));
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
.screen--full,
#app.is-fullscreen .screen {
  padding: calc(var(--safe-top) + var(--s-4)) var(--s-4) calc(var(--safe-bottom) + var(--s-4));
}

/* Enter / exit transitions (router toggles these). Direction via --dir: 1 forward, -1 back. */
.screen.is-entering { animation: screen-in var(--t-slow) var(--ease-out) both; }
.screen.is-leaving  { animation: screen-out var(--t-med) ease-in both; pointer-events: none; }
@keyframes screen-in {
  from { opacity: 0; transform: translate3d(calc(var(--dir, 1) * 28px), 0, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes screen-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(calc(var(--dir, 1) * -20px), 0, 0) scale(0.985); }
}

/* HUD/nav hide in fullscreen screens */
#app.is-fullscreen .hud,
#app.is-fullscreen .nav { transform: translateY(var(--hide-y)); opacity: 0; pointer-events: none; }

/* ---- Typography ---- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-shadow: var(--ts-outline);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
.num, .tabular { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 400; letter-spacing: 0.01em; }
small, .small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }

/* ---- Utilities (CONTRACTS §3.5) ---- */
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--sm { gap: var(--s-2); }
.stack--lg { gap: var(--s-6); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--center { justify-content: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.center { text-align: center; }
.muted { color: var(--text-dim); }
.mute-2 { color: var(--text-mute); }
.gt-text { color: var(--gold); }
.xp-text { color: var(--xp); }
.accent-text { color: var(--cyan); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Interactive UI never selects text; inputs still do. */
button, .btn, .chip, .nav, .hud, .card, [role='button'], label { user-select: none; -webkit-user-select: none; }
input, textarea, [contenteditable] { user-select: text; -webkit-user-select: text; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ---- Boot splash (static, in index.html) ---- */
.boot-splash {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: var(--s-5);
  text-align: center;
}
.boot-splash__bolt {
  width: 88px; height: 88px;
  background: var(--yellow);
  clip-path: polygon(58% 0, 18% 56%, 46% 56%, 36% 100%, 84% 40%, 54% 40%, 66% 0);
  animation: boot-pulse 0.9s var(--ease-pop) infinite alternate;
}
.boot-splash__title { font-size: var(--fs-xl); }
.boot-splash__bar {
  width: 180px; height: 16px; border-radius: var(--r-pill);
  background: var(--bg-2); border: 2px solid var(--ink); overflow: hidden;
}
.boot-splash__bar span {
  display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--grad-gold);
  animation: boot-bar 1.1s ease-in-out infinite;
}
@keyframes boot-pulse { from { transform: scale(0.94) rotate(-4deg); } to { transform: scale(1.04) rotate(3deg); } }
@keyframes boot-bar { from { transform: translateX(-110%); } to { transform: translateX(260%); } }

/* ---- Boot / route error card ---- */
.boot-error {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: calc(var(--safe-top) + var(--s-5)) var(--s-4) calc(var(--safe-bottom) + var(--s-5));
  overflow: auto;
}
.boot-error__card {
  width: 100%; max-width: 420px;
  background: var(--grad-panel);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--bevel), var(--shadow-pop);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.boot-error__card pre {
  margin: 0; padding: var(--s-3);
  background: var(--bg); border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--text-dim);
  white-space: pre-wrap; word-break: break-word; max-height: 40vh; overflow: auto;
  user-select: text; -webkit-user-select: text;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .screen.is-entering, .screen.is-leaving { animation-duration: 1ms; }
}
html.reduce-motion .screen.is-entering,
html.reduce-motion .screen.is-leaving { animation-duration: 1ms; }