/*
 * 10-foot scale (spec §9.4), applied with <body class="tv"> on the lobby and
 * the games. The root size follows the viewport width (about 20 px at 1080p),
 * so every rem-based component scales with the TV; a 5 % safe area keeps
 * content clear of overscan; focus is large, glowing and springy because the
 * remote's D-pad is the main way to move around.
 */
html.tv, html:has(body.tv) { font-size: clamp(16px, 1.05vw, 40px); }

body.tv {
  --safe-x: 5vw;
  --safe-y: 5vh;
  --ring-width: 4px;
  --ring-offset: 4px;
  --focus-scale: 1.04;
  --target-min: 64px;
  overflow: hidden;
  user-select: none;
  cursor: default;
}
/* The safe area for page content; full-bleed layers (canvas, backdrops) ignore it. */
body.tv .pr-safe { padding: var(--safe-y) var(--safe-x); }

body.tv :focus-visible {
  outline: var(--ring-width) solid var(--focus);
  outline-offset: var(--ring-offset);
  box-shadow: var(--glow-accent);
}
body.tv :where(.pr-btn, .pr-iconbtn, .pr-card--interactive, [data-focusable]):is(:focus-visible, .is-focused) {
  transform: scale(var(--focus-scale));
  transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out);
}
body.tv .pr-card--interactive:is(:focus-visible, .is-focused) { transform: translateY(-4px) scale(var(--focus-scale)); }
body.tv .pr-gamecard:is(:focus-visible, .is-focused) { transform: translateY(-8px) scale(1.05); }

/* Minimum target size: 64 px. Every interactive component clamps its size to
 * --target-min (components.css); the rem terms let targets grow on large screens. */
body.tv .pr-btn { --btn-h: max(var(--target-min), 3.2rem); font-size: var(--fs-lg); --btn-px: var(--s-6); }
body.tv .pr-btn--sm { --btn-h: max(var(--target-min), 2.4rem); font-size: var(--fs-md); }
body.tv .pr-iconbtn { --ib-size: max(var(--target-min), 3.2rem); --icon-size: 1.6rem; }
body.tv .pr-chip { --chip-h: max(48px, 2.6rem); font-size: var(--fs-lg); }
body.tv .pr-chip--compact { --chip-h: max(36px, 2rem); font-size: var(--fs-md); }
body.tv .pr-conn { font-size: var(--fs-md); }
body.tv .pr-qr { --qr-size: 32vh; }
body.tv .pr-qr--compact { --qr-size: 14vh; }

/* Weak TV GPUs: keep animated decoration off when the kit runs at the low tier. */
html[data-quality="low"] .pr-qr--live .pr-qr__tile::after { display: none; }
html[data-quality="low"] body.tv .pr-toast, html[data-quality="low"] body.tv .pr-banner { box-shadow: var(--shadow-1); }