/* TV / remote-control mode (html.tv-ui, set by tv-mode.js; implies html.big-ui).
 * 10-foot layout for 1920 x 1080 and 1280 x 720 (and Fire TV's 960 x 540 CSS px): sizes follow the viewport
 * height, 5 % overscan-safe margins, a thick white focus frame on a dark halo that reads on any wood,
 * the board as large as possible with moves and actions in a side column. Nothing depends on hover. */

.tv-hint { display: none; }

.tv-ui {
  --tv-safe-x: 5vw; --tv-safe-y: 5vh;
  --tv-ring: #fff; --tv-halo: rgba(0, 0, 0, .9); --tv-glow: rgba(227, 178, 60, .6);
  font-size: clamp(16px, 2.3vh, 30px);
}
.tv-ui body { padding: var(--tv-safe-y) var(--tv-safe-x); }
.tv-ui * { scroll-margin: var(--tv-safe-y) 0; }

/* ---------------------------------------------------------------- focus: always visible, also after .focus() */
.tv-ui :focus:not([tabindex="-1"]) {
  outline: .3rem solid var(--tv-ring); outline-offset: .2rem;
  box-shadow: 0 0 0 .7rem var(--tv-halo), 0 0 1.4rem .9rem var(--tv-glow);
}
.tv-ui button:focus, .tv-ui .btn:focus, .tv-ui .btn-link:focus { transform: scale(1.04); }
.tv-ui button, .tv-ui .btn, .tv-ui .btn-link { transition: transform .12s ease-out; }
.tv-ui button.primary:focus { outline-color: var(--tv-ring); }
.tv-ui .tile-input:focus + .tile-preview { outline: .3rem solid var(--tv-ring); box-shadow: 0 0 0 .6rem var(--tv-halo); }
.tv-ui .seg-input:focus + span { outline: .3rem solid var(--tv-ring); outline-offset: -.3rem; }
.tv-ui .bot-card:has(.bot-input:focus) {
  outline: .3rem solid var(--tv-ring); outline-offset: .2rem; box-shadow: 0 0 0 .7rem var(--tv-halo), 0 0 1.4rem .9rem var(--tv-glow);
}
.tv-ui #board:focus { outline-offset: .4rem; border-radius: 10px; }

/* ---------------------------------------------------------------- page chrome */
.tv-ui .top { position: static; padding: 0 0 1.5vh; background: none; border: 0; backdrop-filter: none; }
.tv-ui .brand-logo { height: 5.5vh; }
.tv-ui .online { font-size: 1rem; }
.tv-ui button, .tv-ui .btn-link, .tv-ui select, .tv-ui input:not([type="checkbox"]):not([type="radio"]) { font-size: 1rem; min-height: 2.8rem; }
.tv-ui .screen { max-width: none; padding: 0; }
.tv-ui .card { padding: 1.2rem 1.4rem; }
.tv-ui .field, .tv-ui .field-hint, .tv-ui .join-label, .tv-ui .tagline { font-size: .9rem; }
.tv-ui .switch, .tv-ui .switch.compact { font-size: 1rem; }
.tv-ui .overlay { padding: var(--tv-safe-y) var(--tv-safe-x); }
.tv-ui .overlay .card { max-width: min(46rem, 100%); }
.tv-ui .overlay .settings-card { max-width: min(64rem, 100%); }
.tv-ui .tile { width: 8.5rem; font-size: .85rem; }
.tv-ui .tile-preview { width: 8rem; height: 5.4rem; }
.tv-ui .toast { bottom: calc(var(--tv-safe-y) + 1rem); font-size: 1.1rem; }

/* lobby: title across, form and rules side by side */
.tv-ui #lobby:not([hidden]) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 2.5vw; align-items: start; }
.tv-ui #lobby > .hero { grid-column: 1 / -1; padding: 0 0 1vh; }
.tv-ui #lobby .card { margin: 0; }
.tv-ui .hero h1 { font-size: 2.6rem; }
.tv-ui #botPick .bot-pick, .tv-ui #waiting .card, .tv-ui #invite .card { max-width: 72rem; margin: 0 auto; }
.tv-ui .bot-cards { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

/* ---------------------------------------------------------------- game: board left, everything else beside it */
.tv-ui #game:not([hidden]) {
  max-width: none; padding: 0; display: grid; align-items: start; column-gap: 2vw;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 560px);
  grid-template-areas: "board hud" "board status" "board moves" "board controls" "board hint";
  grid-template-rows: auto auto auto auto 1fr;
}
.tv-ui #game .boardwrap { grid-area: board; }
.tv-ui #game .hud { grid-area: hud; grid-template-columns: 1fr; gap: .4rem; padding: 0; }
.tv-ui #game .player, .tv-ui #game .player.me { justify-content: flex-start; font-size: 1.05rem; }
.tv-ui #game .player.me { flex-direction: row-reverse; justify-content: flex-end; }
.tv-ui #game .score { justify-content: flex-start; font-size: 1.4rem; }
.tv-ui #game .status { grid-area: status; padding: .4rem 0; min-height: 0; }
.tv-ui #status { font-size: 1.15rem; }
.tv-ui #status[data-hint] { font-size: .85rem; line-height: 1.3; }
.tv-ui .last-move { font-size: .95rem; }
.tv-ui #game .movelist { grid-area: moves; }
.tv-ui #moveList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; min-height: 0; }
.tv-ui #moveList .move { min-height: 2.8rem; font-size: 1.1rem; padding: .3rem .5rem; }
.tv-ui #moveList .move.turn { font-size: .95rem; }
.tv-ui .movelist-empty { min-height: 0; padding: .4rem 0; font-size: .95rem; }
.tv-ui #game .controls { grid-area: controls; padding: .6rem 0 0; gap: .5rem; }
.tv-ui .turn-actions { gap: .5rem; }
.tv-ui .turn-actions button { min-height: 2.9rem; font-size: 1.15rem; }
.tv-ui #game .controls > .ghost, .tv-ui #game .controls > .switch { flex: 1 1 28%; min-height: 2.6rem; font-size: .9rem; }
.tv-ui #game .controls > .switch { gap: .5rem; }
.tv-ui .emotes { gap: .4rem; }
.tv-ui #game .emotes button { min-height: 2.2rem; flex: 1 1 30%; font-size: .75rem; padding: .2rem .4rem; line-height: 1.15; }
.tv-ui .tv-hint { display: block; grid-area: hint; margin: .6rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.35; }
.tv-ui .end-card-inner { width: min(100%, 34rem); }

@media (prefers-reduced-motion: reduce) {
  .tv-ui button:focus, .tv-ui .btn:focus, .tv-ui .btn-link:focus { transform: none; }
}