/* The broadcast layout, shared by the duel's stream page and practice's vertical view so
   a practice run and a real duel look like the same show. Scoped to .sroot because
   practice has its own .clock and canvas rules. */
.sroot { position: absolute; width: 1920px; height: 1080px; transform-origin: top left;
  background: var(--bg); display: flex; flex-direction: column; }

.sroot header { display: flex; align-items: center; justify-content: space-between;
  padding: 26px 44px 10px; }
.sroot .logo { font-size: 40px; font-weight: 800; letter-spacing: -1.2px; }
.sroot .logo span { color: var(--accent); }
.sroot .live { font-size: 17px; letter-spacing: 3px; text-transform: uppercase; font-weight: 800;
  color: var(--gold); border: 2px solid var(--gold); border-radius: 8px; padding: 4px 14px; }

.sroot main { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 40px; padding: 0 44px; min-height: 0; }

.sroot .side { display: flex; flex-direction: column; gap: 18px; }
.sroot .side.right { align-items: flex-end; text-align: right; }
.sroot .nm { font-size: 46px; font-weight: 800; letter-spacing: -1.4px; line-height: 1; }
.sroot .p0 .nm { color: var(--p1); } .sroot .p1 .nm { color: var(--p2); }
.sroot .st { font-size: 20px; color: var(--muted); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; }
.sroot .st.dead { color: var(--out); }

/* Length is the weapon (DESIGN-CHANGES §3) — the loop you can close is gated by it,
   so a viewer who cannot see it cannot read the threat. */
.sroot .lenrow { display: flex; align-items: baseline; gap: 10px; }
.sroot .side.right .lenrow { flex-direction: row-reverse; }
.sroot .lenn { font-size: 42px; font-weight: 800; letter-spacing: -1.6px; line-height: 1;
  font-variant-numeric: tabular-nums; }
.sroot .p0 .lenn { color: var(--p1); } .sroot .p1 .lenn { color: var(--p2); }
.sroot .lenu { font-size: 15px; color: var(--muted); font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; }

/* A held item is a threat the opponent has to play around, so it has to be visible
   while it is NOT being used — that is the whole point of the pocket. */
.sroot .items { display: flex; gap: 8px; }
.sroot .side.right .items { flex-direction: row-reverse; }
.sroot .items i { width: 42px; height: 42px; border-radius: 11px; display: grid;
  place-items: center; font-style: normal; font-size: 21px; font-weight: 800;
  border: 2px dashed var(--line); color: var(--muted); }
.sroot .items i.full { border: 2px solid var(--gold); color: var(--gold);
  background: var(--field-bg); }

.sroot .arena { display: grid; place-items: center; position: relative; }
.sroot canvas { display: block; border-radius: 10px; }

.sroot .tally { display: flex; align-items: baseline; gap: 16px; justify-content: center;
  font-variant-numeric: tabular-nums; }
.sroot .tally .n { font-size: 86px; font-weight: 800; letter-spacing: -3px; line-height: 1; }
.sroot .tally .n.a { color: var(--p1); } .sroot .tally .n.b { color: var(--p2); }
.sroot .tally .dash { font-size: 46px; color: var(--muted); font-weight: 800; }

.sroot .clock { text-align: center; font-size: 30px; font-weight: 800; color: var(--muted);
  letter-spacing: 1px; font-variant-numeric: tabular-nums; }

.sroot footer { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 44px 26px; font-size: 24px; color: var(--muted); }
.sroot footer b { color: var(--text); }

.sroot .mtally, .sroot .cams, .sroot .ctaband { display: none; }

/* ---------- portrait ----------
   Everything a viewer needs stays inside x 120..960: a phone taller than 9:16 zooms the
   vertical feed to fill and loses ~100px off each side. The bottom ~300px sit under
   YouTube's own title and buttons, so nothing lives there. Each player's row sits at
   their end of the arena and starts with their camera, on the slot from stream-slots.css,
   where OBS lays the real camera. */
.sroot.portrait { display: block; }
.sroot.portrait > * { position: absolute; left: 120px; right: 120px; }
.sroot.portrait header { top: 36px; height: 76px; padding: 0; }
.sroot.portrait .logo { font-size: 44px; }
.sroot.portrait main, .sroot.portrait .cams { display: block; left: 0; right: 0; top: 0; height: 100%;
  padding: 0; pointer-events: none; }
.sroot.portrait main > * { position: absolute; pointer-events: auto; }
.sroot.portrait .arena { left: 120px; top: 340px; width: 840px; height: 840px; }

.sroot.portrait .side { left: calc(var(--slot-x) + var(--slot-size) + 28px); right: 120px;
  height: var(--slot-size); gap: 10px; justify-content: center; }
.sroot.portrait .side.p0 { top: var(--slot-host-y); }
.sroot.portrait .side.p1 { top: var(--slot-opp-y); }
.sroot.portrait .side.right { align-items: flex-start; text-align: left; }
.sroot.portrait .side.right .lenrow, .sroot.portrait .side.right .items { flex-direction: row; }
.sroot.portrait .nm { font-size: 40px; }
.sroot.portrait .mtally { display: flex; left: 120px; right: 120px; top: 1196px; }
.sroot.portrait .mtally .n { font-size: 96px; }

.sroot.portrait .cam { position: absolute; left: var(--slot-x); width: var(--slot-size);
  height: var(--slot-size); border-radius: 50%; border: 5px solid var(--p1);
  background: var(--field-bg); overflow: hidden; display: grid; place-items: center; }
.sroot.portrait .cam.p0 { top: var(--slot-host-y); }
.sroot.portrait .cam.p1 { top: var(--slot-opp-y); border-color: var(--p2); }
.sroot.portrait .cam.puggbot .say { left: 170px; right: auto; top: -8px; width: max-content;
  max-width: 640px; padding: 12px 20px; border-radius: 18px; font-size: 38px; }
.sroot.portrait .cam.puggbot { overflow: visible; }
.sroot.portrait .cam.puggbot .tag { display: none; }

.sroot.portrait footer { display: none; }
.sroot.portrait .ctaband { display: block; top: 1292px; text-align: center; }
.sroot.portrait .ctaband .what { font-size: 25px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); font-weight: 800; }
.sroot.portrait .ctaband .url { font-size: 60px; font-weight: 800; letter-spacing: -2px;
  line-height: 1.1; color: var(--accent); }