/* FanPulse · Live game v2 lab.
   Layout follows the screen box, not the window: .v2-screen is a size container,
   so the 360 / 390 / 768 frames in the lab render the true phone layout, and a
   real phone gets the same rules. Breakpoint 880px, same as the app.
   Colours come from tokens.css (--fp-*); the asset pack's own lime and navy are
   kept for the field overlays so they match the supplied arrows and labels. */

body.fp-live-v2 { --v2-lime: #cbff00; --v2-red: #ff3459; --v2-ink: #071a26; --v2-gold: #ffd23d;
  --v2-foot-h: 64px; --v2-radius: 14px; --v2-radius-sm: 10px; }

/* Desktop: the lab takes the right rail's column too (same rule game.php uses). */
@media (min-width: 881px) {
  .shell:has(.v2-lab) { grid-template-columns: var(--left-nav-w) minmax(0, 1fr); }
  .shell:has(.v2-lab) .shell-right { display: none; }
}

/* The app's own phone header and bottom nav give way to the game's (same idea as body.fp-focus). */
@media (max-width: 880px) {
  body.fp-live-v2 .mobile-header,
  body.fp-live-v2 .bottom-nav { display: none !important; }
  body.fp-live-v2 #fp-main, body.fp-live-v2 .shell, body.fp-live-v2 .shell-main { padding: 0 !important; }
}

.v2-lab { display: grid; gap: 14px; min-width: 0; color: var(--fp-text); font-family: var(--font-body, system-ui, sans-serif); }
.v2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v2-lab iconify-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }

/* ---------------------------------------------------------------- buttons */
.v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1px solid transparent; font: 600 14px/1 var(--font-body, system-ui); cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease; }
.v2-btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.v2-btn:disabled { opacity: .45; cursor: not-allowed; }
.v2-btn-primary { background: var(--fp-lime); color: var(--fp-lime-ink); }
.v2-btn-primary:hover:not(:disabled) { background: #d6ff3d; }
.v2-btn-ghost { background: transparent; color: var(--fp-text); border-color: var(--fp-border); }
.v2-btn-ghost:hover:not(:disabled) { border-color: var(--fp-text-2); background: var(--fp-surface-raised); }
.v2-btn-quiet { background: transparent; color: var(--fp-text-2); }
.v2-btn-quiet:hover { color: var(--fp-text); }
.v2-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--fp-border);
  background: var(--fp-surface-panel); color: var(--fp-text); font-size: 18px; cursor: pointer; transition: background-color .2s, transform .15s; flex: none; }
.v2-icon-btn:hover:not(:disabled) { background: var(--fp-surface-raised); }
.v2-icon-btn:active:not(:disabled) { transform: scale(.94); }
.v2-icon-btn:disabled { opacity: .45; }
.v2-icon-btn.is-on { background: var(--fp-lime); color: var(--fp-lime-ink); border-color: var(--fp-lime); }
.v2-lab :focus-visible { outline: 2px solid var(--fp-lime); outline-offset: 2px; }

.v2-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--fp-surface-base); border: 1px solid var(--fp-border); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.v2-seg::-webkit-scrollbar { display: none; }
.v2-seg button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 0;
  background: transparent; color: var(--fp-text-2); font: 600 13px/1 var(--font-body, system-ui); cursor: pointer; transition: background-color .2s, color .2s; }
.v2-seg button[aria-selected="true"], .v2-seg button[aria-pressed="true"] { background: var(--fp-surface-raised); color: var(--fp-text); box-shadow: inset 0 0 0 1px var(--fp-border); }
.v2-seg-sm button { min-height: 30px; padding: 0 10px; font-size: 12px; }
.v2-count { font: 600 11px/1 var(--font-body, system-ui); color: var(--fp-muted); }

.v2-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--fp-border); background: transparent; color: var(--fp-text-2); font: 600 13px/1 var(--font-body, system-ui); cursor: pointer; transition: all .2s; }
.v2-chip:hover { color: var(--fp-text); border-color: var(--fp-text-2); }
.v2-chip.is-on { background: var(--fp-lime); border-color: var(--fp-lime); color: var(--fp-lime-ink); }
.v2-chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(3, 19, 33, .78); color: var(--fp-text); font: 600 12px/1 var(--font-body, system-ui); cursor: pointer; backdrop-filter: blur(6px); }
.v2-chip-btn[aria-pressed="true"] { background: var(--fp-lime); color: var(--fp-lime-ink); border-color: var(--fp-lime); }

.v2-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 600 14px/1 var(--font-body, system-ui); color: var(--fp-text); }
.v2-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.v2-switch-ui { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--fp-border); transition: background-color .2s; flex: none; }
.v2-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #e8eef5; transition: transform .2s; }
.v2-switch input:checked + .v2-switch-ui { background: var(--fp-lime); }
.v2-switch input:checked + .v2-switch-ui::after { transform: translateX(18px); background: var(--fp-lime-ink); }
.v2-switch input:focus-visible + .v2-switch-ui { outline: 2px solid var(--fp-lime); outline-offset: 2px; }
.v2-switch-sm { font-size: 12px; gap: 6px; }
.v2-switch-sm .v2-switch-ui { width: 34px; height: 20px; }
.v2-switch-sm .v2-switch-ui::after { width: 14px; height: 14px; }
.v2-switch-sm input:checked + .v2-switch-ui::after { transform: translateX(14px); }

.v2-live { display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--fp-red); color: #fff; font: 700 10px/1.2 var(--font-body, system-ui); letter-spacing: .06em; vertical-align: 1px; }
.v2-lab-note { margin: 0; color: var(--fp-muted); font-size: 12px; }
.v2-empty { margin: 12px 0; color: var(--fp-muted); font-size: 14px; }

/* ----------------------------------------------------------------- drawer */
.v2-drawer { background: var(--fp-surface-panel); border: 1px solid var(--fp-border); border-radius: var(--v2-radius); padding: 14px 16px; display: grid; gap: 12px; }
.v2-drawer-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v2-drawer-title { margin: 0; font: 700 22px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.v2-drawer-title span { color: var(--fp-lime); }
.v2-drawer-note { margin: 0; color: var(--fp-text-2); font-size: 13px; flex: 1 1 220px; }
.v2-drawer-body { display: grid; gap: 12px; }
.v2-drawer-body[hidden] { display: none; }
.v2-ctl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.v2-ctl-games { align-items: center; }
.v2-field-label { font: 600 13px/1 var(--font-body, system-ui); color: var(--fp-text-2); }
.v2-select { min-height: 40px; max-width: 100%; flex: 1 1 280px; padding: 0 12px; border-radius: var(--v2-radius-sm); border: 1px solid var(--fp-border); background: var(--fp-surface-base); color: var(--fp-text); font: 500 14px/1 var(--font-body, system-ui); }
.v2-game-note { flex: 1 1 100%; margin: 0; color: var(--fp-text-2); font-size: 13px; }
.v2-scrub { flex: 1 1 160px; accent-color: var(--fp-lime); min-width: 120px; }
.v2-pos { font: 600 13px/1 var(--font-body, system-ui); color: var(--fp-text-2); font-variant-numeric: tabular-nums; min-width: 76px; }
.v2-ctl-split { align-items: flex-start; gap: 16px; }
.v2-toggles { border: 1px solid var(--fp-border); border-radius: var(--v2-radius-sm); padding: 10px 12px; margin: 0; display: grid; gap: 8px; flex: 1 1 260px; }
.v2-toggles legend { padding: 0 6px; font: 600 12px/1 var(--font-body, system-ui); color: var(--fp-muted); }
.v2-toggles label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fp-text); cursor: pointer; }
.v2-toggles input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--fp-lime); }
.v2-state { background: var(--fp-surface-base); border: 1px solid var(--fp-border); border-radius: var(--v2-radius); padding: 10px 14px; }
.v2-state summary { cursor: pointer; font: 600 13px/1.4 var(--font-body, system-ui); color: var(--fp-text-2); }
.v2-state pre { max-height: 360px; overflow: auto; font-size: 12px; color: var(--fp-text-2); margin: 10px 0 0; }

/* ----------------------------------------------------------------- frames */
.v2-frame { min-width: 0; }
.v2-frame:not([data-frame="full"]) .v2-screen { margin-inline: auto; border-radius: 28px; border: 1px solid var(--fp-border); box-shadow: 0 30px 80px rgba(0, 4, 12, .55); }
.v2-frame[data-frame="360"] .v2-screen { width: 360px; }
.v2-frame[data-frame="390"] .v2-screen { width: 390px; }
.v2-frame[data-frame="768"] .v2-screen { width: min(768px, 100%); }
.v2-frame:not([data-frame="full"]) .v2-screen { max-width: 100%; }

/* ----------------------------------------------------------------- screen */
.v2-screen { container: v2 / inline-size; position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  height: var(--v2-h, 100dvh); min-height: 520px; overflow: hidden; background: var(--fp-bg-deep); isolation: isolate; }
.v2-lab[data-mode="game"] .v2-screen { height: calc(100dvh - var(--header-h, 0px)); }

.v2-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  background: var(--fp-surface-base); border-bottom: 1px solid var(--fp-border-soft); }
.v2-back { justify-self: start; display: inline-flex; align-items: center; gap: 2px; color: var(--fp-text); text-decoration: none; font: 600 15px/1 var(--font-body, system-ui); min-height: 40px; padding-right: 8px; }
.v2-back iconify-icon { font-size: 22px; }
.v2-head-title { font: 700 16px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--fp-text-2); }
.v2-head-end { justify-self: end; display: flex; align-items: center; gap: 6px; }
/* Go live: the one filled button in the header, so it reads first. */
.v2-golive { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 0;
  background: var(--fp-lime, #C6FF00); color: #08120a; font: 800 13px/1 var(--font-body, system-ui); text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 3px rgba(198,255,0,.16); transition: transform .12s, box-shadow .2s; white-space: nowrap; }
.v2-golive iconify-icon { font-size: 15px; }
.v2-golive:hover { box-shadow: 0 0 0 5px rgba(198,255,0,.24); }
.v2-golive:active { transform: translateY(1px); }
.v2-golive:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@container v2 (max-width: 420px) {
  /* Room for Go live on a phone: the back link keeps its arrow, the title gets smaller. */
  .v2-back span { display: none; }   /* the link keeps its aria-label */
  .v2-head-title { font-size: 14px; }
  .v2-tokens { padding: 0 10px; }
}
.v2-tokens { justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--fp-border);
  background: var(--fp-surface-panel); color: var(--fp-gold); font: 700 14px/1 var(--font-body, system-ui); font-variant-numeric: tabular-nums; cursor: pointer; }

.v2-body { overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 10px 12px 24px; }
.v2-main { display: grid; gap: 10px; min-width: 0; align-content: start; }

/* Compact scoreboard */
.v2-sb { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; border-radius: var(--v2-radius); overflow: hidden;
  background: linear-gradient(180deg, #121a24, #080d13); border: 1px solid #1f2a36; }
.v2-sb-team { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-width: 0; position: relative; }
.v2-sb-away { box-shadow: inset 4px 0 0 var(--team); }
.v2-sb-home { flex-direction: row-reverse; box-shadow: inset -4px 0 0 var(--team); }
.v2-sb-logo { width: 30px; height: 30px; object-fit: contain; flex: none; }
.v2-sb-abbr { font: 700 16px/1 var(--font-display); letter-spacing: .06em; color: var(--fp-text-2); }
.v2-sb-score { font: 700 32px/1 var(--font-display); font-variant-numeric: tabular-nums; color: #fff; margin-inline-start: auto; }
.v2-sb-home .v2-sb-score { margin-inline-start: 0; margin-inline-end: auto; }
.v2-sb-team.has-ball::after { content: ""; position: absolute; bottom: 5px; width: 18px; height: 3px; border-radius: 2px; background: var(--fp-lime); }
.v2-sb-away.has-ball::after { left: 16px; }
.v2-sb-home.has-ball::after { right: 16px; }
.v2-sb-mid { display: grid; place-content: center; text-align: center; padding: 6px 14px; background: #0b1118; border-inline: 1px solid #1f2a36; gap: 3px; }
.v2-sb-mid b { font: 700 15px/1 var(--font-display); letter-spacing: .08em; color: var(--fp-lime); }
.v2-sb-mid span { font: 600 13px/1 var(--font-body, system-ui); font-variant-numeric: tabular-nums; color: var(--fp-text-2); }
/* Broadcast scoreboard (the lower third in "new scoreboard/fanspulse-lower-third.html"):
   team panels with AWAY / HOME tags and the logo as a watermark, a slanted centre with the
   scores (the leader in lime), and a strip with possession, period, clock and situation.
   Picked with More > Scoreboard style (owner, 2026-10-16: choose between the two). */
.v2-sb.is-broadcast { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto; border: 1.5px solid rgba(214,226,240,.55);
  border-radius: 14px; background: #0c1219; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.v2-bc-team { position: relative; overflow: hidden; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 10px 8px 9px;
  background: linear-gradient(105deg, color-mix(in srgb, var(--team) 78%, #000), color-mix(in srgb, var(--team) 36%, #000)); }
.v2-bc-home { background: linear-gradient(255deg, color-mix(in srgb, var(--team) 78%, #000), color-mix(in srgb, var(--team) 36%, #000)); }
.v2-bc-mark { position: absolute; top: 50%; width: 70%; max-width: 92px; height: auto; transform: translateY(-50%); opacity: .38; pointer-events: none; }
.v2-bc-away .v2-bc-mark { left: -10%; }
.v2-bc-home .v2-bc-mark { right: -10%; }
.v2-bc-pill { position: relative; padding: 3px 10px; border-radius: 6px; background: rgba(8,12,18,.78); color: #e8edf3; font: 700 10px/1 var(--font-body, system-ui); letter-spacing: .16em; }
.v2-bc-abbr { position: relative; font: 700 30px/1 var(--font-display); letter-spacing: .03em; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.v2-bc-mid { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 7vw, 44px); padding: 6px clamp(20px, 6vw, 34px);
  background: linear-gradient(180deg, #1b222b, #11161d); margin-inline: -10px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.v2-bc-score { font: 700 46px/1 var(--font-display); font-variant-numeric: tabular-nums; color: #fff; }
.v2-bc-score.is-lead { color: var(--fp-lime, #C6FF00); }
.v2-bc-strip { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding: 6px 12px;
  background: #0e141b; border-top: 1px solid rgba(255,255,255,.08); position: relative; }
.v2-bc-poss { position: absolute; top: 50%; transform: translateY(-50%); color: var(--fp-lime, #C6FF00); font-size: 12px; line-height: 1; }
.v2-bc-poss.is-away { left: 14px; }
.v2-bc-poss.is-home { right: 14px; }
.v2-bc-per { font: 700 16px/1 var(--font-display); letter-spacing: .06em; color: #c9d2dd; }
.v2-bc-sep { width: 1px; height: 22px; background: rgba(255,255,255,.18); }
.v2-bc-clock { font: 700 26px/1 var(--font-display); font-variant-numeric: tabular-nums; color: #fff; }
.v2-bc-sit { padding: 5px 12px; border-radius: 8px; border: 1.5px solid rgba(232,237,243,.75); color: #fff; font: 700 13px/1 var(--font-body, system-ui); white-space: nowrap; }
@container v2 (max-width: 400px) {
  .v2-bc-abbr { font-size: 24px; }
  .v2-bc-score { font-size: 38px; }
  .v2-bc-clock { font-size: 22px; }
  .v2-bc-sit { font-size: 12px; padding: 4px 9px; }
}
.v2-seg-sb { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--fp-surface-base); border: 1px solid var(--fp-border); }
.v2-seg-sb button { flex: 1; min-height: 34px; border: 0; border-radius: 999px; background: none; color: var(--fp-text-2); font: 700 13px/1 var(--font-body, system-ui); cursor: pointer; }
.v2-seg-sb button[aria-pressed="true"] { background: var(--fp-lime, #C6FF00); color: #08120a; }
.v2-menu-label { display: block; margin: 4px 0 6px; color: var(--fp-muted); font: 700 11px/1 var(--font-body, system-ui); letter-spacing: .08em; text-transform: uppercase; }

/* Field */
.v2-stagewrap { position: relative; border-radius: var(--v2-radius); overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, #0d2a1c, #04120c 70%); }
.v2-stage { aspect-ratio: var(--v2-ar, 2 / 1); width: 100%; }
.v2-stage-svg { display: block; width: 100%; height: 100%; }
.v2-stage-svg text { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; }
.v2-stage-tools { position: absolute; left: 8px; top: 8px; display: flex; gap: 6px; }
.v2-cam { position: absolute; right: 8px; top: 8px; width: 30%; max-width: 200px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, #10263a, #050c14); border: 2px solid rgba(255,255,255,.22); display: grid; place-items: center; }
.v2-cam[hidden] { display: none; }
.v2-cam-tag { position: absolute; left: 6px; bottom: 6px; font: 600 11px/1 var(--font-body, system-ui); color: #fff; display: flex; gap: 4px; align-items: center; }
.v2-cam-lab { position: absolute; right: 6px; top: 6px; font-size: 10px; color: var(--fp-muted); }
.v2-cc { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; padding: 6px 10px; border-radius: 8px; background: rgba(2, 8, 20, .82);
  color: #fff; font: 500 13px/1.35 var(--font-body, system-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-cc[hidden] { display: none; }

.v2-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: v2-draw .55s cubic-bezier(.16, 1, .3, 1) forwards; }
path.v2-dashed { animation: v2-fade .45s ease both; }
@keyframes v2-draw { to { stroke-dashoffset: 0; } }
.v2-pop { transform-box: fill-box; transform-origin: center; animation: v2-pop .35s .25s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes v2-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.v2-l-labels .v2-tag { animation: v2-fade .3s .35s ease both; }
@keyframes v2-fade { from { opacity: 0; } to { opacity: 1; } }
.v2-burst { transform-box: fill-box; transform-origin: center; animation: v2-burst .9s ease-out 2 both; }
@keyframes v2-burst { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }

/* Effects overlay */
.v2-fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.v2-fx-layer.is-flash { animation: v2-flash .7s ease-out; }
@keyframes v2-flash { 0% { background: rgba(255,255,255,0); } 20% { background: rgba(255,255,255,.55); } 100% { background: rgba(255,255,255,0); } }
.v2-fx-float { position: absolute; bottom: -40px; font-size: 30px; color: var(--fp-lime); animation: v2-rise 2.4s cubic-bezier(.2,.7,.3,1) forwards; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.v2-fx-float img { width: 40px; height: 40px; object-fit: contain; }
@keyframes v2-rise { from { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-260px) scale(1.15); opacity: 0; } }

/* Lower third */
.v2-lt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--v2-radius);
  background: linear-gradient(100deg, color-mix(in srgb, var(--team) 38%, #07243b) 0%, #07243b 42%, #061a2b 100%); border: 1px solid var(--fp-border); min-height: 76px; }
.v2-lt.is-empty { display: block; color: var(--fp-muted); }
.v2-lt-id { position: relative; display: flex; align-items: center; }
.v2-lt-id:empty { display: none; }
.v2-lt-logo { display: grid; place-items: center; width: 44px; height: 44px; }
.v2-lt-logo:empty { display: none; }
.v2-lt-logo img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.v2-lt-logo:not(:empty) + .v2-face { margin-left: -10px; }
.v2-face { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none;
  background: color-mix(in srgb, var(--team) 55%, #0a2236); border: 2px solid rgba(255,255,255,.25); }
.v2-face img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.v2-face.is-num { background: var(--team); color: var(--team-ink, #fff); }
.v2-face.is-num b { font: 700 24px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.v2-face-sm { width: 34px; height: 34px; border-width: 1px; }
.v2-face-sm.is-num b { font-size: 15px; }
.v2-lt-text { display: grid; gap: 2px; min-width: 0; }
.v2-lt-name { font: 700 20px/1.05 var(--font-display); letter-spacing: .02em; overflow-wrap: anywhere; }
.v2-lt-play { font: 700 12px/1.2 var(--font-body, system-ui); letter-spacing: .08em; color: var(--fp-lime); text-transform: uppercase; }
.v2-lt-detail { font-size: 13px; line-height: 1.35; color: var(--fp-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-sit { display: grid; justify-items: end; gap: 2px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.14); text-align: right; min-width: 72px; }
.v2-sit b { font: 700 18px/1 var(--font-display); white-space: nowrap; }
.v2-sit span { font: 600 13px/1.2 var(--font-body, system-ui); color: var(--fp-text); white-space: nowrap; }
.v2-sit small { font: 600 10px/1 var(--font-body, system-ui); letter-spacing: .1em; color: var(--fp-muted); }
.v2-sit-score span b { font: 700 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.v2-sit-mlb { display: flex; align-items: center; gap: 8px; }
.v2-sit-mlb > div { display: grid; gap: 3px; justify-items: end; }
.v2-diamond { width: 44px; height: 34px; }
.v2-diamond rect { fill: none; stroke: #c8d0d8; stroke-width: 2; }
.v2-diamond rect.on { fill: var(--fp-lime); stroke: var(--fp-lime); }
.v2-outs { display: inline-flex; gap: 3px; vertical-align: 1px; }
.v2-outs i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #c8d0d8; }
.v2-outs i.on { background: var(--fp-gold); border-color: var(--fp-gold); }

/* Now listening */
.v2-np { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--v2-radius); background: var(--fp-surface-panel); border: 1px solid var(--fp-border); min-width: 0; }
.v2-np .v2-icon-btn { width: 36px; height: 36px; font-size: 16px; }
.v2-np-who { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.v2-np-name { font: 600 14px/1.2 var(--font-body, system-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-np-name.is-off { color: var(--fp-muted); }
/* Phones: room for the name ("FansPulse AI" was cut off on a 390 px iPhone). */
@container v2 (max-width: 420px) {
  .v2-np { gap: 6px; padding: 8px; }
  .v2-np .v2-icon-btn { width: 32px; height: 32px; }
  .v2-np-who { gap: 6px; }
  .v2-np-who .v2-av { width: 28px; height: 28px; border-radius: 9px; font-size: 14px; }
  .v2-np-change { padding: 8px 2px; }
  .v2-np .v2-live { display: none; }
}
.v2-np-change { border: 0; background: none; color: var(--fp-lime); font: 700 13px/1 var(--font-body, system-ui); cursor: pointer; padding: 8px 4px; }

.v2-av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; flex: none; color: #fff;
  background: hsl(var(--av, 210) 45% 32%); font: 700 13px/1 var(--font-body, system-ui); }
.v2-av-ai { background: linear-gradient(140deg, #1d3b10, #0b1d07); color: var(--fp-lime); font-size: 17px; border: 1px solid rgba(203,255,0,.35); }
.v2-av-sm { width: 28px; height: 28px; border-radius: 10px; font-size: 11px; }
.v2-av-lg { width: 52px; height: 52px; border-radius: 16px; font-size: 18px; }

/* Game / Stats / Plays */
.v2-gamepanel { display: grid; gap: 10px; min-width: 0; }
.v2-subtabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--fp-border); }
.v2-subtabs button { min-height: 42px; border: 0; background: none; color: var(--fp-text-2); font: 700 14px/1 var(--font-body, system-ui); letter-spacing: .04em; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .2s, box-shadow .2s; }
.v2-subtabs button[aria-selected="true"] { color: var(--fp-text); box-shadow: inset 0 -3px 0 var(--fp-lime); }
.v2-sub { display: none; min-width: 0; }
.v2-screen[data-sub="game"] .v2-sub-game, .v2-screen[data-sub="stats"] .v2-sub-stats, .v2-screen[data-sub="plays"] .v2-sub-plays { display: block; }
.v2-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.v2-filters::-webkit-scrollbar { display: none; }

.v2-story { padding: 14px; border-radius: var(--v2-radius); background: var(--fp-surface-panel); border: 1px solid var(--fp-border); box-shadow: inset 4px 0 0 var(--team, var(--fp-border)); display: grid; gap: 8px; }
.v2-story-head { display: flex; justify-content: space-between; align-items: center; font: 600 13px/1 var(--font-body, system-ui); color: var(--fp-text-2); }
.v2-story-head b { font: 700 15px/1 var(--font-display); letter-spacing: .06em; color: var(--fp-text); }
.v2-story-big { margin: 0; font: 700 22px/1.15 var(--font-display); letter-spacing: .01em; }
.v2-story-big small { font: 500 14px/1 var(--font-body, system-ui); color: var(--fp-text-2); }
.v2-story-sub { margin: 0; color: var(--fp-text-2); font-size: 13px; }
.v2-story .v2-btn { justify-self: start; min-height: 36px; }
.v2-drivebar { position: relative; height: 10px; border-radius: 999px; background: repeating-linear-gradient(90deg, #12402a 0 9.8%, #0f3523 9.8% 10%); }
.v2-drivebar i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--team, var(--fp-lime)); }
.v2-drivebar em { position: absolute; top: -3px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--fp-lime); }

.v2-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.v2-row { display: grid; grid-template-columns: 36px 44px minmax(0, 1fr) auto 32px; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--fp-border-soft); }
.v2-row.is-now { background: linear-gradient(90deg, rgba(198,255,0,.08), transparent 70%); }
.v2-row.is-score .v2-row-what b { color: var(--fp-lime); }
.v2-row-face { display: grid; place-items: center; }
.v2-row-when { font: 600 11px/1.25 var(--font-body, system-ui); color: var(--fp-muted); font-variant-numeric: tabular-nums; }
.v2-row-what { display: grid; gap: 1px; min-width: 0; }
.v2-row-what b { font: 700 13px/1.2 var(--font-body, system-ui); letter-spacing: .02em; }
.v2-row-what span { font-size: 12px; color: var(--fp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-row-res { font: 700 13px/1 var(--font-display); letter-spacing: .04em; white-space: nowrap; color: var(--fp-text-2); }
.v2-row-res.good { color: var(--fp-lime); }
.v2-row-res.bad { color: var(--fp-red); }
.v2-row-res.warn { color: var(--fp-gold); }
.v2-row-replay { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--fp-border); background: transparent; color: var(--fp-text-2); cursor: pointer; display: grid; place-items: center; }
.v2-row-replay:hover { color: var(--fp-lime); border-color: var(--fp-lime); }

.v2-ls-wrap { overflow-x: auto; }
.v2-ls { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.v2-ls th, .v2-ls td { padding: 8px 6px; text-align: center; }
.v2-ls thead th { font: 600 11px/1 var(--font-body, system-ui); color: var(--fp-muted); border-bottom: 1px solid var(--fp-border); }
.v2-ls tbody th { text-align: left; }
.v2-ls-team { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1 var(--font-display); letter-spacing: .04em; }
.v2-ls-logo { width: 22px; height: 22px; object-fit: contain; }
.v2-ls-total { font-weight: 800; color: var(--fp-text); }
.v2-h4 { margin: 16px 0 8px; font: 700 15px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.v2-h4 small { font: 500 12px/1 var(--font-body, system-ui); color: var(--fp-muted); text-transform: none; letter-spacing: 0; }
.v2-leaders { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.v2-leaders li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--v2-radius-sm); background: var(--fp-surface-panel); }
/* The name block only: the photo is a span too, and flex: 1 stretched it into an oval. */
.v2-leaders li > span:not(.v2-face) { display: grid; min-width: 0; flex: 1; }
.v2-leaders li b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-leaders li small { font-size: 11px; color: var(--fp-muted); }
.v2-leaders li em { font: 700 20px/1 var(--font-display); font-style: normal; color: var(--fp-lime); }

/* Side column: chat and announcers */
.v2-side { display: none; min-width: 0; }
.v2-sidetabs { display: none; }
.v2-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; min-height: 340px; }
.v2-chat-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 600 13px/1.3 var(--font-body, system-ui); color: var(--fp-text-2); }
.v2-chat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: end; overflow-y: auto; }
.v2-chat-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.v2-chat-list b { color: var(--fp-text); margin-right: 4px; }
.v2-chat-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.v2-chat-rep { flex: none; align-self: center; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--fp-muted); cursor: pointer; opacity: .55; font-size: 14px; }
.v2-chat-rep:hover, .v2-chat-rep:focus-visible { opacity: 1; color: var(--fp-text); background: rgba(255,255,255,.06); }
.v2-chat-form { display: flex; gap: 6px; align-items: center; }
/* Chat opens scrolled to this box; keep it clear of the fixed game footer. */
.v2-chat-form, .v2-chat-guest { scroll-margin-bottom: calc(var(--v2-foot-h) + 16px); }
/* Real game (real.js): photo avatars, the guest prompt and the empty chat. */
.v2-av-img { object-fit: cover; background: var(--fp-surface-base); padding: 0; }
.v2-chat-guest { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--fp-border); color: var(--fp-muted); font-size: 14px; }
.v2-chat-guest a { color: var(--fp-lime, #C6FF00); font-weight: 700; }
.v2-chat-list .v2-chat-empty { color: var(--fp-muted); justify-content: center; }
.v2-fx-title { font-size: 15px; }
.v2-chat-form input { flex: 1; min-width: 0; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--fp-border); background: var(--fp-surface-base); color: var(--fp-text); font-size: 16px; /* under 16px iOS zooms into the field on tap */ }
.v2-chat-form input::placeholder { color: var(--fp-muted); }
.v2-send { background: var(--fp-lime); color: var(--fp-lime-ink); border-color: var(--fp-lime); }

/* ------------------------------------------------------------ game footer */
.v2-foot { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: calc(var(--v2-foot-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 4px env(safe-area-inset-bottom, 0px); background: rgba(3, 13, 24, .97); border-top: 1px solid var(--fp-border); }
.v2-foot button { display: grid; justify-items: center; gap: 4px; padding: 10px 0 9px; border: 0; background: none; color: var(--fp-muted); font: 600 11px/1 var(--font-body, system-ui); cursor: pointer; position: relative; }
.v2-foot button iconify-icon { font-size: 22px; }
.v2-foot button:hover { color: var(--fp-text); }
.v2-foot button[aria-current="page"], .v2-foot button[aria-expanded="true"] { color: var(--fp-text); }
.v2-foot button[aria-current="page"]::after { content: ""; position: absolute; bottom: 3px; width: 22px; height: 3px; border-radius: 2px; background: var(--fp-lime); }
.v2-foot-plus { display: grid; place-items: center; width: 50px; height: 50px; margin-top: -24px; border-radius: 50%; background: var(--fp-lime); color: var(--fp-lime-ink);
  box-shadow: 0 0 0 5px var(--fp-bg-deep), 0 10px 24px rgba(198, 255, 0, .25); transition: transform .2s; }
.v2-foot-plus iconify-icon { font-size: 26px; }
.v2-foot-fx:active .v2-foot-plus { transform: scale(.94); }
.v2-foot-fx[aria-expanded="true"] .v2-foot-plus { transform: rotate(45deg); }

/* ----------------------------------------------------------------- sheets */
.v2-scrim { position: absolute; inset: 0 0 var(--v2-foot-h) 0; z-index: 2; background: rgba(1, 6, 14, .32); }
.v2-scrim[hidden] { display: none; }
.v2-sheet { position: absolute; left: 0; right: 0; bottom: calc(var(--v2-foot-h) + env(safe-area-inset-bottom, 0px)); z-index: 3; max-height: 60%;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: var(--fp-surface-panel); border: 1px solid var(--fp-border); border-bottom: 0;
  border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px rgba(0, 4, 12, .5); transform: translateY(105%); transition: transform .28s cubic-bezier(.16, 1, .3, 1); }
.v2-sheet[hidden] { display: none; }
.v2-sheet.is-open { transform: translateY(0); }
.v2-sheet.is-dragging { transition: none; }
.v2-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--fp-border); margin: 8px auto 0; }
.v2-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 6px 16px; touch-action: none; }
.v2-sheet-head h2 { margin: 0; font: 700 19px/1.1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.v2-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; display: grid; gap: 12px; align-content: start; }

.v2-toast { position: absolute; left: 50%; bottom: calc(var(--v2-foot-h) + 14px); z-index: 5; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px;
  background: #e9f0f7; color: #06121c; font: 600 13px/1.35 var(--font-body, system-ui); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.v2-toast[hidden] { display: none; }

/* Listen */
#v2-ann { display: grid; gap: 12px; }
.v2-first { margin: 0; padding: 10px 12px; border-radius: var(--v2-radius-sm); background: rgba(198,255,0,.08); border: 1px solid rgba(198,255,0,.3); font-size: 14px; }
/* Go live as an announcer inside the app screen (fp-announce.css holds the shared pieces). */
.v2-promo[hidden] { display: none; }
.v2-promo { display: grid; gap: 10px; }
.v2-fpa-ai-sub { margin: -2px 0 0; color: var(--fp-text-2); font-size: 14px; }
/* The audio bar's own prompt when nothing plays (owner, 2026-10-17). */
.v2-np-ai { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--fp-lime, #C6FF00); color: #08120a; font: 800 14px/1 var(--font-body, system-ui); cursor: pointer; white-space: nowrap; }
.v2-np-ai iconify-icon { font-size: 18px; }
.v2-np-ai:active { transform: translateY(1px); }
.v2-np-ai:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.v2-ann-foot .v2-stream-self { margin-top: 6px; }
.v2-fpa-empty { padding-top: 0; }
.v2-fpa-empty .fpa-art { max-width: 320px; }
.v2-fpa-empty h3 { font-size: 22px; }
.v2-fpa-empty p { font-size: 15px; }
.v2-fpa-empty p small { color: var(--fp-text-2); font-size: 13px; }
.v2-fpa-mic { font-size: 13px; color: var(--fp-text-2); text-decoration: none; }
.v2-stream-self { width: 100%; font: inherit; cursor: pointer; text-align: left; }
.v2-stream-self { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--v2-radius-sm); border: 0; background: var(--fp-lime, #C6FF00); color: #08120a; text-decoration: none; }
.v2-stream-self > iconify-icon:first-child { font-size: 22px; color: #08120a; }
.v2-stream-self b { font-weight: 800; }
.v2-stream-self small { color: rgba(8,18,10,.75) !important; }
.v2-stream-self span { display: grid; gap: 2px; flex: 1; }
.v2-stream-self small { color: var(--fp-text-2); font-size: 12px; }
.v2-stream-self.is-off { opacity: .6; }
.v2-ann-tabs { width: 100%; }
.v2-ann-tabs button { flex: 1; justify-content: center; }
.v2-search { position: relative; }
.v2-search > iconify-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fp-muted); }
.v2-search input { width: 100%; min-height: 42px; padding: 0 14px 0 40px; border-radius: 999px; border: 1px solid var(--fp-border); background: var(--fp-surface-base); color: var(--fp-text); font-size: 15px; }
.v2-search input::placeholder { color: var(--fp-muted); }
.v2-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.v2-chips::-webkit-scrollbar { display: none; }
.v2-ann-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.v2-ann, .v2-ai { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: var(--v2-radius-sm); border: 1px solid transparent; background: var(--fp-surface-base); flex-wrap: wrap; }
.v2-ann.is-sel, .v2-ai.is-sel { border-color: var(--fp-lime); background: rgba(198,255,0,.06); }
.v2-ann.is-locked { opacity: .78; }
.v2-ann-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.v2-ann-main input { width: 18px; height: 18px; accent-color: var(--fp-lime); flex: none; }
.v2-ann-text { display: grid; gap: 2px; min-width: 0; }
.v2-ann-name { font: 700 14px/1.25 var(--font-body, system-ui); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.v2-ann-sub { font-size: 12px; color: var(--fp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-ann-n { font-size: 12px; color: var(--fp-muted); display: inline-flex; gap: 4px; align-items: center; }
.v2-verified { color: #4cc9f0; }
.v2-crown { color: var(--fp-gold); }
.v2-hasvid { color: var(--fp-text-2); }
.v2-ann-play { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--fp-border); background: var(--fp-surface-panel); color: var(--fp-text); cursor: pointer; display: grid; place-items: center; flex: none; }
.v2-ann-play.is-on { background: var(--fp-lime); color: var(--fp-lime-ink); border-color: var(--fp-lime); }
.v2-ann-play:disabled { opacity: .35; cursor: not-allowed; }
.v2-ann-pv { flex-basis: 100%; padding-left: 72px; font-size: 12px; color: var(--fp-lime); }
.v2-ann-foot { display: grid; gap: 8px; padding: 12px 0 4px; position: sticky; bottom: -16px; z-index: 1; background: var(--fp-surface-panel); border-top: 1px solid var(--fp-border); }
.v2-ann-host#v2-ann-side .v2-ann-foot { bottom: 0; background: var(--fp-bg-deep); }
.v2-ann-foot > .v2-btn { width: 100%; }
.v2-ann-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v2-ann-foot-row .v2-btn { min-height: 36px; padding: 0 4px; }
#v2-sheet-listen { max-height: 70%; }
.v2-stream-self { padding: 8px 12px; }
.v2-empty-block { padding: 16px; border-radius: var(--v2-radius-sm); background: var(--fp-surface-base); display: grid; gap: 6px; justify-items: start; }
.v2-empty-block p { margin: 0; font-size: 14px; color: var(--fp-text-2); }

/* Effects */
.v2-fx-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v2-fx-bal { display: inline-flex; gap: 6px; align-items: center; color: var(--fp-gold); font: 700 14px/1 var(--font-body, system-ui); font-variant-numeric: tabular-nums; }
.v2-fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v2-fx-tile { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: var(--v2-radius-sm); border: 1px solid var(--fp-border); background: var(--fp-surface-base); color: var(--fp-text); cursor: pointer; transition: border-color .2s, transform .15s; }
.v2-fx-tile:active { transform: scale(.97); }
.v2-fx-tile iconify-icon { font-size: 26px; color: var(--fp-lime); }
.v2-fx-tile img { width: 28px; height: 28px; object-fit: contain; }
/* The custom reactions (game.php's set): one tap sends, FPReactions flies them over the field. */
.v2-fx-hint { margin: 2px 0 6px; color: var(--fp-muted); font: 700 11px/1 var(--font-body, system-ui); letter-spacing: .08em; text-transform: uppercase; }
.v2-fx-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px; margin-bottom: 12px; }
.v2-fx-quick.is-words { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-fx-all { margin: 0 0 12px; }
.v2-fx-more { width: 100%; }
.v2-fx-search { margin-bottom: 8px; }
/* No scroll box of its own: the sheet body is the one scroller. */
.v2-fx-results { margin-bottom: 0; }
.v2-fx-results .v2-fx-q span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-fx-none { grid-column: 1 / -1; margin: 6px 0; color: var(--fp-muted); font-size: 13px; }
.v2-fx-q { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 8px 4px 6px; border-radius: var(--v2-radius-sm);
  border: 1px solid var(--fp-border); background: var(--fp-surface-base); color: var(--fp-text); cursor: pointer; transition: border-color .2s, transform .12s; }
.v2-fx-q:hover { border-color: var(--fp-lime); }
.v2-fx-q:active { transform: scale(.94); }
.v2-fx-q:focus-visible { outline: 2px solid var(--fp-lime); outline-offset: 2px; }
.v2-fx-q img { width: 32px; height: 32px; object-fit: contain; }
.v2-fx-q span { font: 600 11px/1 var(--font-body, system-ui); color: var(--fp-text-2); }
.v2-fx-char { font-size: 28px; line-height: 32px; }
.v2-fx-q.is-word { flex-direction: row; min-width: 0; padding: 9px 12px; border-radius: 999px; }
.v2-fx-word { font: 700 12px/1 var(--font-body, system-ui); letter-spacing: .04em; color: var(--fp-lime); white-space: nowrap; }
.v2-fx-tile span { font: 600 12px/1.2 var(--font-body, system-ui); text-align: center; }
.v2-fx-tile em { font: 700 11px/1 var(--font-body, system-ui); font-style: normal; color: var(--fp-gold); }
.v2-fx-tile em.is-free { color: var(--fp-text-2); }
.v2-fx-tile.is-on { border-color: var(--fp-lime); box-shadow: inset 0 0 0 1px var(--fp-lime); background: rgba(198,255,0,.06); }
.v2-fx-note { margin: 0; min-height: 18px; font-size: 13px; color: var(--fp-text-2); display: flex; gap: 6px; align-items: center; }
.v2-fx-actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; }

/* More */
.v2-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.v2-menu button, .v2-menu a { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border-radius: var(--v2-radius-sm); border: 0; background: none; color: var(--fp-text); font: 600 15px/1 var(--font-body, system-ui); text-decoration: none; cursor: pointer; text-align: left; }
.v2-menu button:hover, .v2-menu a:hover { background: var(--fp-surface-raised); }
.v2-menu iconify-icon { font-size: 20px; color: var(--fp-text-2); }
.v2-menu-leave { color: var(--fp-red) !important; }
.v2-menu-leave iconify-icon { color: var(--fp-red) !important; }

/* --------------------------------------------- phone: one panel at a time */
@container v2 (max-width: 879.98px) {
  .v2-screen[data-tab="chat"] .v2-gamepanel { display: none; }
  .v2-screen[data-tab="chat"] .v2-side { display: block; }
  .v2-screen[data-tab="chat"] .v2-ann-host { display: none; }
  /* Chat tab on a phone: the score, field and audio bar stay; the play card gives its room to
     chat. The panel height is set by lab.js fitChat(); its list is the scroller. */
  .v2-screen[data-tab="chat"] .v2-lt-host { display: none; }
  /* The announcer prompt cards too: two tall cards above the panel pushed it under the
     footer, and it looked as if chat had collapsed (TestFlight, 2026-10-17). The audio
     bar above keeps the "Turn on AI announcer" button. */
  .v2-screen[data-tab="chat"] .v2-promo { display: none; }
  /* Tickets + Where to watch (fp-ads.css .fp-aff-game) gives its room to chat too. */
  .v2-screen[data-tab="chat"] .fp-aff-game { display: none; }
  .v2-screen[data-tab="chat"] .v2-chat { min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
  .v2-screen[data-tab="chat"] .v2-chat-list { min-height: 0; overscroll-behavior: contain; }
  .v2-lt-name { font-size: 18px; }
}
@container v2 (max-width: 400px) {
  .v2-lt { grid-template-columns: auto minmax(0, 1fr); }
  .v2-sit { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; align-items: baseline; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding: 8px 0 0; text-align: left; justify-items: start; }
  .v2-sit-mlb { justify-content: flex-start; gap: 12px; }
  .v2-sit-mlb > div { display: flex; align-items: baseline; gap: 12px; }
  .v2-sb-score { font-size: 28px; }
  .v2-sb-team { padding: 8px 10px; gap: 6px; }
  .v2-sb-logo { width: 26px; height: 26px; }
  .v2-row { grid-template-columns: 34px 40px minmax(0, 1fr) auto 30px; gap: 6px; }
}

/* ----------------------------------- desktop: two columns, no game footer */
@container v2 (min-width: 880px) {
  .v2-screen { grid-template-rows: auto minmax(0, 1fr); }
  .v2-foot { display: none; }
  .v2-body { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 16px; padding: 14px 16px 24px; }
  .v2-side { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; position: sticky; top: 0; align-self: start; max-height: calc(var(--v2-h, 100dvh) - 90px); }
  .v2-sidetabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--fp-surface-base); border: 1px solid var(--fp-border); }
  .v2-sidetabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border-radius: 999px; border: 0; background: none; color: var(--fp-text-2); font: 600 14px/1 var(--font-body, system-ui); cursor: pointer; }
  .v2-sidetabs button[aria-selected="true"] { background: var(--fp-surface-raised); color: var(--fp-text); }
  .v2-screen:not([data-side="ann"]) .v2-ann-host#v2-ann-side { display: none; }
  .v2-screen[data-side="ann"] .v2-chat { display: none; }
  .v2-ann-host#v2-ann-side { overflow-y: auto; padding-right: 2px; }
  .v2-chat { min-height: 0; overflow: hidden; }
  .v2-scrim { inset: 0; }
  .v2-sheet { left: auto; right: 16px; bottom: 16px; width: 380px; max-height: 72%; border-radius: 20px; border-bottom: 1px solid var(--fp-border); }
  .v2-toast { bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-lab *, .v2-lab *::before, .v2-lab *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .v2-draw { stroke-dashoffset: 0; }
}

/* =====================================================================
   Page mode and fitting (2026-10-15 layout pass).
   One scroller per screen: in "page mode" (full width, and every real
   game) the screen is part of the page and the PAGE scrolls. Its header
   and the game footer stick; sheets, scrim and toasts are fixed to the
   viewport. The only inner scroller is the desktop announcer/chat list.
   The 360/390/768 lab frames keep a phone-sized box that scrolls inside,
   because that is what a phone does.
   ===================================================================== */
.v2-lab { --v2-labbar-h: 0px; }
.v2-lab[data-mode="lab"] { --v2-labbar-h: 58px; }

/* Lab bar: one row of controls, sticky, everything else behind "More". */
.v2-drawer { padding: 0; gap: 0; overflow: visible; }
.v2-labbar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: var(--v2-labbar-h); padding: 8px 12px; background: var(--fp-surface-panel); border-radius: var(--v2-radius); }
.v2-labbar-title { font: 700 16px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.v2-labbar-title span { color: var(--fp-lime); }
.v2-select-sm { flex: 0 1 160px; min-height: 36px; font-size: 13px; }
.v2-select-game { flex: 1 1 220px; min-width: 0; min-height: 36px; font-size: 13px; text-overflow: ellipsis; }
.v2-stepper { display: flex; align-items: center; gap: 4px; }
.v2-stepper .v2-icon-btn { width: 36px; height: 36px; font-size: 16px; }
.v2-labbar .v2-pos { min-width: 0; padding: 0 4px; white-space: nowrap; }
.v2-labbar .v2-drawer-toggle { min-height: 36px; margin-left: auto; }
.v2-drawer-body { padding: 4px 16px 16px; }
.v2-drawer-note { flex: none; }
.v2-state { margin-top: 4px; }
.v2-state pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: none; overflow: visible; }
@media (min-width: 881px) { .v2-labbar { top: var(--header-h, 56px); } }

/* Page mode: no fixed height, no inner scroll, sticky header and footer. */
.v2-screen[data-page="1"] { height: auto; min-height: 0; overflow: visible; grid-template-rows: auto auto auto; }
.v2-screen[data-page="1"] .v2-body { overflow: visible; }
.v2-screen[data-page="1"] .v2-head { position: sticky; top: var(--v2-labbar-h); z-index: 6; }
.v2-lab[data-mode="lab"] .v2-screen[data-page="1"] .v2-head { position: static; }
@media (min-width: 881px) { .v2-lab[data-mode="game"] .v2-screen[data-page="1"] .v2-head { top: var(--header-h, 56px); } }
.v2-screen[data-page="1"] .v2-foot { position: sticky; bottom: 0; }
.v2-screen[data-page="1"] .v2-scrim { position: fixed; inset: 0 0 calc(var(--v2-foot-h) + env(safe-area-inset-bottom, 0px)) 0; }
.v2-screen[data-page="1"] .v2-sheet { position: fixed; max-height: 72dvh; }
.v2-screen[data-page="1"] .v2-toast { position: fixed; }
.v2-lab[data-mode="game"] .v2-screen { height: auto; }

/* Phones: the game owns the screen, so the app's legal footer goes (links stay on every other page). */
@media (max-width: 880px) { body.fp-live-v2 .fp-footer { display: none; } }

@container v2 (min-width: 880px) {
  .v2-screen[data-page="1"] .v2-scrim { inset: 0; }
  .v2-screen[data-page="1"] .v2-sheet { right: 24px; bottom: 24px; max-height: 70dvh; }
  .v2-screen[data-page="1"] .v2-toast { bottom: 24px; }
  /* The side column sticks beside the game; its list is the one inner scroller. */
  .v2-screen[data-page="1"] .v2-side {
    top: calc(var(--header-h, 56px) + var(--v2-labbar-h) + 12px);
    max-height: calc(100dvh - var(--header-h, 56px) - var(--v2-labbar-h) - 24px);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .v2-ann-host#v2-ann-side, .v2-chat-list { overscroll-behavior: contain;
    mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); }
  .v2-chat { height: 100%; }
}
@container v2 (min-width: 1240px) {
  .v2-body { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); }
}

/* Text that fits instead of being cut. */
.v2-chips, .v2-filters { flex-wrap: wrap; overflow: visible; }
.v2-seg-wrap { flex-wrap: wrap; border-radius: 18px; }
.v2-seg.is-overflow, .v2-chips.is-overflow, .v2-filters.is-overflow {
  scroll-snap-type: x mandatory; mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.v2-seg > button, .v2-chips > button { scroll-snap-align: start; }
.v2-ann-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-ls-none { color: var(--fp-dim); }
.v2-ls td, .v2-ls th { font-variant-numeric: tabular-nums; }
.v2-ls tbody th { min-width: 84px; white-space: nowrap; }
.v2-btn-primary:disabled { background: var(--fp-surface-raised); color: var(--fp-muted); opacity: 1; }
.v2-toast { pointer-events: none; }
/* On phones the lab bar wraps to three rows; pinning that would cost a seventh of the screen. */
@media (max-width: 699px) {
  .v2-labbar { position: static; }
  .v2-lab[data-mode="lab"] { --v2-labbar-h: 0px; }
  .v2-labbar-title { display: none; }
}

/* Bigger field on phones (owner, 2026-10-16): the stage runs edge to edge and the
   Follow play control shrinks to an icon in the corner so it covers no turf. */
@container v2 (max-width: 600px) {
  .v2-stagewrap { margin-inline: -12px; border-radius: 0; }
  .v2-stage-tools { left: 6px; top: 6px; }
  .v2-stage-tools .v2-chip-btn { width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 0; }
  .v2-stage-tools .v2-chip-btn iconify-icon { font-size: 16px; }
}