/* ═══════════════════════════════════════════════════════════════════════════
   patriot.plus LIVE — ARENA: the phone controller.

   A full-bleed takeover in the house's third register: the arena floor. Dark,
   because the room's lights are down and a white phone in a dark room blinds
   the person holding it and everyone behind them; and because black pixels on
   an OLED handset cost nothing across a forty-minute meeting.

   Everything here assumes the worst realistic handset: held one-handed,
   standing, at an angle, in a case, with a cracked screen, by someone who is
   also trying to watch a projector. So:

     · nothing a thumb touches is under 56px on its short side;
     · colour is never the only signal — the zone letter is always spelled out;
     · no hover state decides anything;
     · type is heavy and short; there is nothing to read closely.

   Scoped entirely under `.ar-root`, so it cannot reach live.css or
   controller.css. The stick brings its own styles (arena/joystick.js).
   ═══════════════════════════════════════════════════════════════════════════ */

.ar-root {
  --ar-bg: #07090F;
  --ar-ink: #ffffff;
  --ar-dim: #9AA6BF;
  --ar-line: rgba(255, 255, 255, .14);
  --ar-panel: rgba(255, 255, 255, .06);
  --ar-gold: var(--gold, #F0A830);
  --ar-good: #57E08A;
  --ar-bad: #FF5C46;
  --ar-a: #F0A830;
  --ar-b: #35E8FF;
  --ar-c: #FF4D9E;
  --ar-d: #57E08A;
  --ar-zone: var(--ar-dim);

  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: var(--ar-bg);
  color: var(--ar-ink);
  font-family: var(--mono, 'Courier Prime', 'Courier New', monospace);
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.ar-root.ar-fixed { position: fixed; inset: 0; z-index: 300; }
.ar-root:not(.ar-fixed) { position: relative; min-height: 70vh; }
body.arena-open { overflow: hidden; }

/* page.js pins a connection banner to the top of the viewport */
body.has-conn .ar-root.ar-fixed { top: 40px; }

.ar-root button { font: inherit; border-radius: 0; cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; }

/* ───────────────────────── the strip ───────────────────────── */
.ar-strip {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px))
           10px calc(14px + env(safe-area-inset-left, 0px));
  border-bottom: 2px solid var(--ar-line);
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.ar-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ar-ink); }
.ar-pill { flex: 0 0 auto; padding: 4px 9px; border: 2px solid currentColor; letter-spacing: .18em; }
.ar-pill[data-s="alive"] { color: var(--ar-good); }
.ar-pill[data-s="ghost"] { color: var(--ar-b); }
.ar-pill[data-s="done"]  { color: var(--ar-gold); }
.ar-q { flex: 0 0 auto; color: var(--ar-dim); font-variant-numeric: tabular-nums; }
.ar-clock { flex: 0 0 auto; min-width: 3.2ch; text-align: right; color: var(--ar-gold);
  font-family: var(--head, 'Oswald', sans-serif); font-size: .95rem; font-variant-numeric: tabular-nums; }
.ar-clock:empty { display: none; }

/* ───────────────────────── the clock ───────────────────────── */
.ar-timer { height: 8px; background: rgba(255, 255, 255, .10); overflow: hidden; }
.ar-timer > i { display: block; height: 100%; width: 100%; background: var(--ar-gold);
  transform-origin: left center; transform: scaleX(1); will-change: transform; }

/* ───────────────────────── the stage ───────────────────────── */
.ar-stage { grid-row: 3; grid-column: 1; position: relative; min-height: 0; display: grid; }
.ar-stage > * { min-height: 0; }

/* ═════════════════════════ ALIVE ═════════════════════════ */
.ar-alive { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
.ar-alive[data-zone="A"] { --ar-zone: var(--ar-a); }
.ar-alive[data-zone="B"] { --ar-zone: var(--ar-b); }
.ar-alive[data-zone="C"] { --ar-zone: var(--ar-c); }
.ar-alive[data-zone="D"] { --ar-zone: var(--ar-d); }
.ar-alive[data-zone="x"] { --ar-zone: var(--ar-gold); }
.ar-alive[data-zone=""]  { --ar-zone: #FF8A3D; }        /* outside every zone: worth noticing */

/* The zone line is the whole feedback loop for a player who cannot read the
   projector: it is the server's own answer to "where am I standing?". It is
   loud on purpose, and it is the only thing on this screen that moves. */
.ar-zone {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  align-items: center; column-gap: 14px;
  padding: 10px 16px 12px; border-bottom: 2px solid var(--ar-zone);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent);   /* pre-color-mix handsets */
  background: linear-gradient(180deg, color-mix(in srgb, var(--ar-zone) 18%, transparent), transparent);
}
.ar-zone-k { grid-column: 1; grid-row: 1 / span 2; align-self: center;
  font-size: .68rem; font-weight: 700; letter-spacing: .2em; color: var(--ar-dim); max-width: 8ch; line-height: 1.2; }
.ar-zone-v { grid-column: 2; grid-row: 1; justify-self: start;
  font-family: var(--head, 'Oswald', sans-serif); font-weight: 700; line-height: .9;
  font-size: clamp(2.6rem, 17vw, 4.4rem); letter-spacing: .01em; color: var(--ar-zone);
  text-shadow: 0 0 26px rgba(255, 255, 255, .22);
  text-shadow: 0 0 26px color-mix(in srgb, var(--ar-zone) 45%, transparent); }
.ar-zone-v[data-len="1"] { font-size: clamp(3rem, 20vw, 5rem); }
.ar-zone-v[data-len="7"] { font-size: clamp(1.5rem, 8.5vw, 2.2rem); letter-spacing: .06em; }
.ar-zone-l { grid-column: 2; grid-row: 2; justify-self: start;
  font-size: .78rem; letter-spacing: .1em; color: var(--ar-dim); text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* the pad: the stick's own styles draw the ring and the knob */
.ar-pad {
  position: relative; min-height: 0; touch-action: none;
  --aj-line: rgba(255, 255, 255, .40);
  --aj-well: rgba(255, 255, 255, .06);
  --aj-home: 172px;
  --aj-knob-bg: var(--ar-zone);
  --aj-knob-line: #07090F;
  --aj-focus: var(--ar-gold);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px);
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--ar-zone) 16%, transparent), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px);
}
.ar-hint { padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  text-align: center; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.34); }

/* ═════════════════════════ GHOST ═════════════════════════ */
.ar-ghost { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.ar-gscroll { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 16px 16px 20px; display: grid; gap: 18px; align-content: start; }
.ar-ghead { text-align: center; }
.ar-gtitle { font-family: var(--head, 'Oswald', sans-serif); font-weight: 700; font-size: clamp(2.4rem, 15vw, 3.6rem);
  line-height: .95; letter-spacing: .04em; color: var(--ar-b); text-shadow: 0 0 30px rgba(53, 232, 255, .35); }
.ar-gsub { margin-top: 6px; font-size: .84rem; line-height: 1.45; color: var(--ar-dim); max-width: 30ch; margin-inline: auto; }
.ar-gsub b { color: var(--ar-ink); }

.ar-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ar-tile { padding: 12px 6px; text-align: center; background: var(--ar-panel); border: 2px solid var(--ar-line); }
.ar-tile b { display: block; font-family: var(--head, 'Oswald', sans-serif); font-weight: 700; font-size: 1.9rem;
  line-height: 1; font-variant-numeric: tabular-nums; }
.ar-tile span { display: block; margin-top: 6px; font-size: .56rem; letter-spacing: .14em; color: var(--ar-dim); }
.ar-tile:nth-child(1) b { color: var(--ar-good); }
.ar-tile:nth-child(2) b { color: var(--ar-gold); }
.ar-tile:nth-child(3) b { color: var(--ar-b); }

.ar-respawn { width: 100%; min-height: 56px; background: transparent; color: var(--ar-gold);
  border: 2px dashed var(--ar-gold); font-weight: 700; letter-spacing: .16em; font-size: .78rem; }
.ar-respawn:active { background: rgba(240, 168, 48, .16); }

.ar-sect { display: grid; gap: 10px; }
.ar-h3 { font-size: .64rem; font-weight: 700; letter-spacing: .22em; color: var(--ar-dim); }
.ar-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ar-pick { min-height: 56px; padding: 8px 10px; background: var(--ar-panel); border: 2px solid var(--ar-line);
  color: var(--ar-ink); font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-pick.on { background: var(--ar-gold); border-color: var(--ar-gold); color: #07090F; }
.ar-pick:active { transform: translateY(1px); }

.ar-board { list-style: none; display: grid; gap: 2px; }
.ar-brow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: var(--ar-panel);
  font-size: .84rem; }
.ar-brow.is-me { background: rgba(240, 168, 48, .18); box-shadow: inset 3px 0 0 var(--ar-gold); }
.ar-brank { flex: 0 0 2.4ch; color: var(--ar-dim); font-variant-numeric: tabular-nums; }
.ar-bname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-bscore { flex: 0 0 auto; font-family: var(--head, 'Oswald', sans-serif); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ar-gold); }
.ar-empty { padding: 12px 2px; font-size: .78rem; color: rgba(255,255,255,.4); list-style: none; }

/* the one thing a ghost can still do to the room */
.ar-cheer { display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 84px; border: 0; border-top: 3px solid #07090F;
  background: var(--ar-gold); color: #07090F;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: var(--head, 'Oswald', sans-serif); font-weight: 700; font-size: 1.7rem; letter-spacing: .14em; }
.ar-cheer:active { background: #FFD36B; }
.ar-cheer-n { font-size: .95rem; opacity: .7; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: left; }
.ar-cheer.is-hit { animation: arCheer .18s ease-out; }
@keyframes arCheer { from { background: #fff; } }

/* ═════════════════════════ DONE ═════════════════════════ */
.ar-done { overflow-y: auto; padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 14px; align-content: safe center; text-align: center; }
.ar-dk { font-size: .66rem; letter-spacing: .3em; color: var(--ar-dim); }
.ar-drank { font-family: var(--head, 'Oswald', sans-serif); font-weight: 700; font-size: clamp(3rem, 19vw, 5rem);
  line-height: .9; color: var(--ar-gold); font-variant-numeric: tabular-nums; }
.ar-dscore { font-size: .92rem; letter-spacing: .16em; color: var(--ar-ink); }
.ar-done .ar-board { margin-top: 8px; text-align: left; }
.ar-dfoot { font-size: .72rem; letter-spacing: .12em; color: var(--ar-dim); margin-top: 6px; }

/* ═════════════════════ the verdict card ═════════════════════ */
/* Shares the stage's grid cell so the strip and the clock stay live behind it:
   a player still needs to know how long is left while the points land. */
.ar-verdict { grid-row: 3; grid-column: 1; position: relative; z-index: 5;
  display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center;
  padding: 24px; background: var(--ar-bg); animation: arPop .16s ease-out; }
.ar-vmark { font-family: var(--head, 'Oswald', sans-serif); font-weight: 700; font-size: clamp(2.4rem, 15vw, 4rem);
  line-height: .95; letter-spacing: .04em; }
.ar-vpts { font-family: var(--head, 'Oswald', sans-serif); font-weight: 700; font-size: clamp(3rem, 20vw, 5.4rem);
  line-height: .9; font-variant-numeric: tabular-nums; }
.ar-vsub { font-size: .8rem; letter-spacing: .1em; color: var(--ar-dim); text-transform: uppercase; max-width: 26ch; }
.ar-verdict[data-tone="good"] .ar-vmark, .ar-verdict[data-tone="good"] .ar-vpts { color: var(--ar-good); }
.ar-verdict[data-tone="bad"]  .ar-vmark, .ar-verdict[data-tone="bad"]  .ar-vpts { color: var(--ar-bad); }
@keyframes arPop { from { opacity: 0; transform: scale(.94); } }

/* ═════════════════════ the connection band ═════════════════════ */
.ar-conn { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); text-align: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ar-gold); color: #07090F; }
.ar-conn[data-s="gone"] { background: var(--ar-bad); color: #fff; }

/* ═════════════════════ small and short screens ═════════════════════ */
@media (max-height: 680px) {
  .ar-zone { padding: 6px 14px 8px; }
  .ar-zone-v { font-size: clamp(2.2rem, 13vw, 3rem); }
  .ar-zone-v[data-len="1"] { font-size: clamp(2.4rem, 15vw, 3.4rem); }
  .ar-hint { display: none; }
  .ar-cheer { min-height: 68px; font-size: 1.4rem; }
  .ar-gtitle { font-size: clamp(2rem, 12vw, 2.8rem); }
}
@media (max-width: 330px) {
  .ar-strip { gap: 6px; font-size: .64rem; }
  .ar-picks { grid-template-columns: 1fr; }
}

/* ═════════════════════ reduced motion ═════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ar-verdict, .ar-cheer.is-hit { animation: none; }
  .ar-timer > i { transition: none !important; }
  .ar-zone-v { text-shadow: none; }
}