/* ==================== Base ==================== */
:root {
  --bg: #0e0f11;
  --panel: #1c1d21;
  --panel-2: #2c2d32;
  --line: rgba(255,255,255,.07);
  --muted: #9a9ca3;
  --text-2: #d6d7db;
  --cyan: #1fbed4;
  --on-cyan: #061216;
  --sec: #8b5cff;
  --pink: #ff4fd8;
  --mint: #2ee07f;
  --gold: #ffb020;
  --r: 4px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==================== Arena strip ==================== */
.arena {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background:
  radial-gradient(ellipse 70% 60% at 50% 50%, rgba(31,190,212,.06), transparent 70%),
  #121316;
  box-shadow: inset 0 0 0 1px var(--line);
  touch-action: pan-y;
}
.arena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.arena .tag {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==================== page styles ==================== */
:root { color-scheme: dark; }
html, body { background: #0e0f11; overflow: hidden; }
body { min-height: 0; }
/* Enter and Exit are narrow; the fight gets the room. */
.zones { display: grid; grid-template-columns: 1fr 3fr 1fr; padding: .2rem 0 .9rem; }
.zones span { display: flex; gap: .6rem; align-items: baseline; padding-inline: 1.2rem; font-size: .95rem; font-weight: 600; }
.zones span b { font-size: .7rem; letter-spacing: .14em; }
.zones span:nth-child(1) b { color: var(--cyan); }
.zones span:nth-child(2) { justify-content: center; }
.zones span:nth-child(2) b { color: #ff4fd8; }
.zones span:nth-child(3) { justify-content: flex-end; }
.zones span:nth-child(3) b { color: var(--mint); }
.arena.strip { height: clamp(260px, 30vw, 380px); border-radius: 0; box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.arena.strip .tag { left: 1.2rem; }
.strip-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .9rem 0 .2rem; color: var(--muted); font-size: .88rem; }
.strip-foot b { color: #fff; font-variant-numeric: tabular-nums; }
.strip-foot .cash b { color: var(--mint); }
@media (max-width: 800px) {
  .zones span { padding-inline: .6rem; flex-direction: column; gap: .15rem; font-size: .8rem; }
  .zones span:nth-child(2) { align-items: center; }
  .zones span:nth-child(3) { align-items: flex-end; }
}

/* Phones: the two stats used to share one line that only just fit, so "9 → 10" players wrapped it onto two
   lines and back, resizing the frame and making the page below jump. Two fixed columns (label over number)
   keep the height the same whatever the numbers are. */
.strip-foot span { white-space: nowrap; }
@media (max-width: 560px) {
  .strip-foot { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; flex-wrap: nowrap; font-size: .8rem; }
  .strip-foot span { display: flex; flex-direction: column; gap: 3px; }
  .strip-foot b { font-size: 1.05rem; line-height: 1.1; }
  .strip-foot .cash { align-items: flex-end; text-align: right; }
}