/* SWARDBOW arena: HUD / broadcast overlay styles shared by / and /play. Tokens mirror shared/base.css (same values) so the
   overlay renders even if base.css is missing. Fonts: Pirata One (display) + Figtree (body, tabular numerals). */
:root {
  --meadow: #B9E26B; --meadow-2: #D7EE9F; --chalk: #FBF8EE; --wood: #8A5A2B; --wood-2: #C9956A; --ink: #1E2A16; --dim: #5C6B4A;
  --sky: #CFE7F6; --bounty: #D7263D; --gold: #E8B931; --ok: #2E8B57; --bad: #D7263D;
  --display: 'Pirata One', 'Georgia', serif; --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@font-face { font-family: 'Pirata One'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/pirata-one-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/assets/fonts/figtree-latin.woff2') format('woff2'); }

.ar-hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--body); color: var(--ink); z-index: 3; }
.ar-hud .num, .ar-hud b { font-variant-numeric: tabular-nums; }
.ar-hud .red { color: var(--bounty); font-weight: 700; }
.ar-hud > * { pointer-events: none; }

/* top strip: live dot + watching */
.ar-top { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-live { display: inline-flex; align-items: center; gap: 7px; background: var(--chalk); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 5px 12px 5px 9px; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ar-live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bounty); box-shadow: 0 0 0 0 rgba(215,38,61,.5); animation: ar-pulse 1.6s ease-out infinite; }
.ar-hud[data-mode="preview"] .ar-live .dot { background: var(--gold); animation: none; }
.ar-hud[data-conn="fake"] .ar-live .dot, .ar-hud[data-conn="closed"] .ar-live .dot { background: var(--dim); animation: none; }
@keyframes ar-pulse { 0% { box-shadow: 0 0 0 0 rgba(215,38,61,.55) } 100% { box-shadow: 0 0 0 10px rgba(215,38,61,0) } }
.ar-watch { font-size: 13px; font-weight: 600; color: var(--ink); background: rgba(251,248,238,.82); border-radius: 999px; padding: 6px 11px; }

/* scoreboard */
.ar-board { position: absolute; top: 56px; right: 16px; margin: 0; padding: 6px 0; list-style: none; width: 212px; background: var(--chalk); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 rgba(30,42,22,.18); font-size: 13px; }
.ar-board::before { content: 'Marks'; display: block; font-family: var(--display); font-size: 17px; padding: 2px 12px 4px; letter-spacing: .02em; border-bottom: 1px dashed rgba(30,42,22,.35); margin-bottom: 4px; }
.ar-board li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 12px; line-height: 1.3; }
.ar-board li .nm { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-board li i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: rgba(30,42,22,.1); color: var(--dim); }
.ar-board li i.you { background: var(--ink); color: var(--chalk); }
.ar-board li .mk { min-width: 28px; text-align: center; background: var(--gold); border-radius: 999px; padding: 1px 7px; font-weight: 700; }
.ar-board li.down { opacity: .5; }
.ar-board li.down .mk { background: rgba(30,42,22,.12); }
.ar-board li.leader .nm::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--bounty); flex: none; }
.ar-board li.you .nm { color: var(--ink); }

/* lower-third */
.ar-lower { position: absolute; left: 16px; bottom: 18px; display: flex; flex-direction: column; gap: 0; max-width: calc(100% - 32px); }
.ar-lt { display: inline-flex; align-items: baseline; gap: 12px; background: var(--ink); color: var(--chalk); padding: 6px 16px; border-radius: 8px 8px 0 0; align-self: flex-start; }
.ar-lt .ar-round { font-family: var(--display); font-size: 24px; line-height: 1; letter-spacing: .02em; }
.ar-lt .ar-status { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.ar-lt-kv { display: flex; gap: 0; background: var(--chalk); border: 2px solid var(--ink); border-radius: 0 10px 10px 10px; box-shadow: 4px 4px 0 rgba(30,42,22,.18); overflow: hidden; }
.ar-lt-kv > span { display: flex; flex-direction: column; padding: 8px 16px; border-right: 1px dashed rgba(30,42,22,.3); min-width: 96px; }
.ar-lt-kv > span:last-child { border-right: 0; }
.ar-lt-kv small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.ar-lt-kv b { font-size: 20px; line-height: 1.15; font-weight: 700; }
.ar-hud[data-status="intermission"] .ar-lt { background: var(--wood); }

/* live log */
.ar-log { position: absolute; left: 16px; bottom: 112px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column-reverse; gap: 4px; max-width: min(420px, calc(100% - 260px)); font-size: 13px; }
.ar-log li { background: rgba(251,248,238,.9); border-radius: 6px; padding: 4px 10px; line-height: 1.35; animation: ar-in .3s ease-out; }
.ar-log li.bounty { background: var(--bounty); color: var(--chalk); }
.ar-log li.bounty .red { color: var(--chalk); }
.ar-log li.you { outline: 2px solid var(--ink); }
@keyframes ar-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* ── play HUD ───────────────────────────────── */
.ar-play .ar-top { gap: 8px; }
.ar-play .ar-round { font-family: var(--display); font-size: 22px; background: var(--ink); color: var(--chalk); padding: 3px 12px; border-radius: 8px; line-height: 1.2; }
.ar-play .ar-time { font-size: 22px; font-weight: 700; background: var(--chalk); border: 2px solid var(--ink); border-radius: 8px; padding: 2px 12px; line-height: 1.2; }
.ar-play .ar-time.late { color: var(--bounty); border-color: var(--bounty); }
.ar-play .ar-pot { display: inline-flex; flex-direction: column; background: var(--chalk); border: 2px solid var(--ink); border-radius: 8px; padding: 1px 12px; line-height: 1.1; }
.ar-play .ar-pot small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.ar-play .ar-pot b { font-size: 14px; }
.ar-play .ar-board { top: 60px; width: 196px; }
.ar-me { position: absolute; left: 16px; bottom: 18px; display: flex; align-items: center; gap: 12px; background: var(--chalk); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 14px 8px 8px; box-shadow: 4px 4px 0 rgba(30,42,22,.18); }
.ar-cd { position: relative; width: 48px; height: 48px; color: var(--wood); }
.ar-cd svg:first-child { position: absolute; inset: 0; transform: rotate(-90deg); }
.ar-cd .tr { fill: none; stroke: rgba(30,42,22,.15); stroke-width: 4; }
.ar-cd .pr { fill: none; stroke: var(--bounty); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .05s linear; }
.ar-me.ready .ar-cd .pr { stroke: var(--ok); }
.ar-cd svg:last-child { position: absolute; inset: 12px; width: 24px; height: 24px; }
.ar-me-kv { display: flex; flex-direction: column; line-height: 1; }
.ar-me-kv b { font-size: 26px; font-weight: 700; }
.ar-me-kv small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.ar-bounty { background: var(--bounty); color: var(--chalk); font-weight: 700; font-size: 12px; padding: 5px 10px; border-radius: 999px; }
.ar-safe { background: var(--gold); color: var(--ink); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; animation: ar-pulse-safe .6s ease-in-out infinite alternate; }
@keyframes ar-pulse-safe { from { opacity: .55 } to { opacity: 1 } }
.ar-log-sm { bottom: 92px; max-width: min(360px, calc(100% - 32px)); }
.ar-toast { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); background: var(--ink); color: var(--chalk); font-family: var(--display); font-size: clamp(22px, 4vw, 34px); padding: 8px 22px; border-radius: 10px; letter-spacing: .02em; animation: ar-in .25s ease-out; text-align: center; max-width: 90%; }
.ar-toast.red { background: var(--bounty); }
.ar-joy { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(251,248,238,.9); background: rgba(30,42,22,.18); }
.ar-joy i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--chalk); border: 2px solid var(--ink); }

/* sheets (spawn / respawn / result) */
.ar-sheet { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(30,42,22,.28); pointer-events: auto; }
.ar-sheet > .card { width: min(440px, 100%); background: var(--chalk); border: 2px solid var(--ink); border-radius: 14px; padding: 22px 22px 20px; box-shadow: 6px 6px 0 rgba(30,42,22,.25); max-height: calc(100% - 32px); overflow: auto; }
.ar-sheet h2 { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; margin: 0 0 6px; letter-spacing: .01em; }
.ar-sheet p { margin: 0 0 10px; line-height: 1.45; font-size: 15px; }
.ar-sheet .muted { color: var(--dim); font-size: 13px; }
.ar-sheet .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ar-sheet label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.ar-sheet input[type="text"] { font: 600 18px var(--body); padding: 10px 12px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; width: 100%; color: var(--ink); }
.ar-sheet table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 6px; }
.ar-sheet td, .ar-sheet th { padding: 5px 4px; border-bottom: 1px dashed rgba(30,42,22,.3); text-align: left; }
.ar-sheet th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ar-sheet td.r, .ar-sheet th.r { text-align: right; }
.ar-sheet tr.you td { font-weight: 700; }
.ar-sheet tr.bot td { color: var(--dim); }
.ar-sheet .tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: rgba(30,42,22,.1); color: var(--dim); margin-left: 5px; }
.ar-sheet .big { font-size: 28px; font-weight: 700; }
.ar-sheet .err { color: var(--bad); font-weight: 600; }
.ar-sheet kbd { font: 600 12px var(--body); border: 1px solid var(--ink); border-radius: 4px; padding: 0 5px; background: #fff; }

/* buttons shared by both pages (names avoid base.css collisions) */
.ar-btn { -webkit-appearance: none; appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 10px; border: 2px solid var(--ink); background: var(--chalk); color: var(--ink); font: 700 15px var(--body); text-decoration: none; box-shadow: 3px 3px 0 rgba(30,42,22,.3); transition: transform .08s ease, box-shadow .08s ease; pointer-events: auto; }
.ar-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(30,42,22,.3); }
.ar-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(30,42,22,.3); }
.ar-btn.primary { background: var(--wood); color: var(--chalk); border-color: var(--ink); }
.ar-btn.red { background: var(--bounty); color: var(--chalk); }
.ar-btn.sm { min-height: 36px; padding: 4px 12px; font-size: 13px; }
.ar-btn[disabled] { opacity: .55; cursor: default; transform: none; }
.ar-btn.ghost { background: transparent; box-shadow: none; border-color: transparent; text-decoration: underline; }

/* phones */
@media (max-width: 720px) {
  .ar-board { width: 150px; font-size: 12px; top: 54px; }
  .ar-board::before { font-size: 15px; }
  .ar-board li { padding: 2px 9px; }
  .ar-board li:nth-child(n+6) { display: none; }
  .ar-board li i.bot { display: none; }
  .ar-board li .nm { min-width: 0; }
  .ar-lt .ar-round { font-size: 20px; }
  .ar-lt-kv > span { min-width: 0; padding: 6px 10px; }
  .ar-lt-kv b { font-size: 16px; }
  .ar-log { bottom: 104px; max-width: calc(100% - 32px); font-size: 12px; }
  .ar-log li:nth-child(n+4) { display: none; }
  .ar-play .ar-top { gap: 6px; }
  .ar-play .ar-round { font-size: 18px; padding: 2px 9px; }
  .ar-play .ar-time { font-size: 18px; padding: 1px 9px; }
  .ar-play .ar-watch { display: none; }
  .ar-play .ar-board { top: 52px; width: 140px; }
  .ar-me { bottom: 14px; }
  .ar-me-kv b { font-size: 22px; }
  .ar-log-sm { bottom: 86px; }
}
@media (prefers-reduced-motion: reduce) { .ar-live .dot { animation: none; } .ar-log li, .ar-toast { animation: none; } }