/* Shared screen (TV mode, ?screen): lobby with the join QR, broadcast frames around the two 3D panes, leaderboard.
   Sized in vh/vw so it reads from the sofa. */

body.tv { background: var(--g900); cursor: default; }
/* only the canvas, the connection pill and the TV layer exist on a screen (and the pool board over a pool table) */
body.tv > :not(#c):not(#tv):not(#conn):not(#pool-hud):not(script) { display: none !important; }
#tv { position: fixed; inset: 0; pointer-events: none; color: var(--hud-ink); font-family: var(--f-body); z-index: 5; }
#tv .hidden { display: none !important; }

/* ---------------------------------------------------------------- lobby */
.tv-lobby {
  position: absolute; inset: 0; pointer-events: auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 5vw;
  align-items: center; padding: 6vh 6vw;
  background: radial-gradient(120% 90% at 20% 10%, var(--g600), var(--g900) 70%);
}
.tvl-join { display: flex; flex-direction: column; align-items: center; gap: 2.2vh; }
.tv-lobby .wordmark { font-family: var(--f-display); font-weight: 600; font-size: 6vh; color: var(--ivory); margin: 0 0 1vh; letter-spacing: -0.01em; }
.tv-lobby .wordmark em { color: var(--brass-hi); font-weight: 400; }
.tvl-qr { width: min(46vh, 38vw); aspect-ratio: 1; padding: 1.6vh; background: var(--paper); border-radius: 1.2vh; box-shadow: 0 2vh 6vh rgba(0, 0, 0, .45); }
.tvl-qr svg, .tv-qr2 svg { display: block; width: 100%; height: 100%; }
.tvl-scan { font-family: var(--f-cond); font-weight: 700; font-size: 4.4vh; text-transform: uppercase; letter-spacing: .06em; }
.tvl-url { font-family: var(--f-cond); font-size: 2.6vh; color: var(--hud-mute); letter-spacing: .03em; }
.tvl-room { display: flex; flex-direction: column; gap: 1.6vh; }
#tv .eyebrow { font-family: var(--f-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 2.1vh; color: var(--brass-hi); }
#tv .eyebrow span { color: var(--hud-mute); margin-left: .6em; letter-spacing: .06em; }
.tv-code { display: flex; gap: 1vh; }
.tv-code span {
  font-family: var(--f-cond); font-weight: 700; font-size: 9vh; line-height: 1; width: 1.15em; padding: .12em 0; text-align: center;
  background: var(--paper); color: var(--ink); border-radius: .8vh; box-shadow: inset 0 -.6vh 0 var(--paper2);
}
.tvl-pl { margin-top: 2.5vh; }
.tv-players { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vh 2vw; min-height: 6vh; }
.tvp { display: flex; align-items: center; gap: 1.2vh; font-size: 3.2vh; font-weight: 600; animation: tvp-in .5s var(--ease-back) both; }
.tvp.empty { color: var(--hud-mute); font-weight: 400; font-style: italic; }
.tvp .ball { width: 3.4vh; height: 3.4vh; flex: none; }
.tvp .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tv .tag { font-family: var(--f-cond); font-size: 1.7vh; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .2em .55em; border-radius: 3px; background: var(--brass); color: var(--acc-ink); }
.tv-round { margin-top: 2vh; font-family: var(--f-cond); font-weight: 600; font-size: 3vh; letter-spacing: .04em; }
.tv-status { font-size: 2.5vh; color: var(--hud-mute); max-width: 40ch; line-height: 1.4; }
.tv-status b { color: var(--ivory); }
@keyframes tvp-in { from { opacity: 0; transform: translateY(1.5vh) scale(.96); } }

/* ---------------------------------------------------------------- game: pane frames */
.tv-pane { position: absolute; border-radius: 6px; box-shadow: 0 0 0 2px rgba(244, 238, 220, .16), 0 1.5vh 4vh rgba(0, 0, 0, .35); }
.tv-pane.act { box-shadow: 0 0 0 3px var(--acc), 0 1.5vh 4vh rgba(0, 0, 0, .45); }
.tv-tag, .tv-cap {
  position: absolute; left: 1.4vh; top: 1.4vh; display: flex; align-items: center; gap: 1vh;
  padding: .7vh 1.3vh; background: var(--slab); border-radius: var(--rad); font-family: var(--f-cond); font-size: 2.3vh; letter-spacing: .03em;
}
.tv-tag b { color: var(--acc); text-transform: uppercase; letter-spacing: .08em; }
.tv-cap { top: auto; bottom: 1.4vh; max-width: calc(100% - 2.8vh); white-space: nowrap; overflow: hidden; }
.tv-cap b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.tv-cap span { color: var(--hud-mute); }
.tv-cap .live, .tv-cap .rp {
  color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .85em; padding: .15em .5em; border-radius: 3px;
}
.tv-cap .live { background: var(--tvred); }
.tv-cap .live::before { content: ''; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: #fff; margin-right: .45em; vertical-align: .08em; animation: tv-blink 1.2s infinite; }
.tv-cap .rp { background: var(--slate); }
#tv .dot { display: inline-block; width: 1.6vh; height: 1.6vh; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .5); }
#tv .dot.sk { box-shadow: none; }
#tv .dot.sk svg { width: 100%; height: 100%; display: block; }
@keyframes tv-blink { 50% { opacity: .25; } }

/* markers over the overview: ring + name, anchored at the ball */
#tv-marks { position: absolute; inset: 0; overflow: hidden; }
.tvm { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .6vh; white-space: nowrap; transition: opacity .3s; }
.tvm i { width: 1.9vh; height: 1.9vh; margin: -0.95vh 0 0 -0.95vh; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 .3vh rgba(255, 255, 255, .95), 0 .3vh .8vh rgba(0, 0, 0, .6); flex: none; }
.tvm span { margin-top: -0.95vh; font-family: var(--f-cond); font-weight: 600; font-size: 2vh; padding: .1vh .8vh; background: var(--slab); border-radius: var(--rad); }
.tvm.moving i { animation: tv-pulse .8s infinite alternate; }
.tvm.on span { background: var(--acc); color: var(--acc-ink); }
@keyframes tv-pulse { to { transform: scale(1.35); } }

/* ticker: bottom-left of the big pane, newest at the bottom */
#tv-ticker { position: absolute; display: flex; flex-direction: column; gap: .8vh; transform: translateY(-100%); align-items: flex-start; }
.tvt {
  display: flex; align-items: center; gap: .9vh; padding: .8vh 1.4vh; background: var(--slab2); border-left: .5vh solid var(--acc);
  font-size: 2.3vh; animation: tvt-in .4s var(--ease) both; transition: opacity .5s, transform .5s;
}
.tvt.hl { border-color: var(--brass-hi); font-weight: 600; }
.tvt .star { color: var(--brass-hi); }
.tvt.chat { font-weight: 400; }
.tvt.chat .dot { display: inline-block; width: .7em; height: .7em; margin-right: .4em; vertical-align: .02em; }
.tvt.chat b { font-weight: 700; margin-right: .3em; }
.tvt.out { opacity: 0; transform: translateX(-2vh); }
@keyframes tvt-in { from { opacity: 0; transform: translateX(-3vh); } }

/* ---------------------------------------------------------------- side column */
#tv-col { position: absolute; display: flex; flex-direction: column; gap: 1.4vh; min-height: 0; }
.tv-hole { display: flex; align-items: stretch; gap: 1.4vh; background: var(--slab); border-radius: var(--rad); overflow: hidden; flex: none; }
.tvh-n { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .8vh 1.8vh; background: var(--acc); color: var(--acc-ink); font-family: var(--f-cond); }
.tvh-n span, .tvh-n i { font-size: 1.6vh; text-transform: uppercase; letter-spacing: .1em; font-style: normal; font-weight: 600; }
.tvh-n b { font-size: 5vh; line-height: 1; }
.tvh-t { display: flex; flex-direction: column; justify-content: center; gap: .4vh; padding: 1vh 1vh 1vh 0; min-width: 0; }
.tvh-t b { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 3vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvh-t span { font-family: var(--f-cond); font-size: 2.2vh; color: var(--hud-mute); letter-spacing: .03em; }

.tv-board { background: var(--slab); border-radius: var(--rad); padding: .8vh 0; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.tvb-rows { flex: 1 1 auto; min-height: 0; display: grid; grid-auto-rows: var(--tvb-row, 5vh); align-content: start; }
.tvb-hc { flex: 1; display: flex; justify-content: space-between; min-width: 0; }
.tvb-h2 { display: none; }
/* 7+ players beside the camera pane: two columns, rows and type scaled to fit (fitBoard) */
.tv-board.two .tvb-rows { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--tvb-per), var(--tvb-row)); }
.tv-board.two .tvb-h { gap: 1.6vh; }
.tv-board.two .tvb-h2 { display: flex; justify-content: flex-end; }
.tv-board.two .tvb-cols i { width: calc(var(--tvb-row) * 1.4); font-size: 1.5vh; }
.tv-board.two .tvb-r { font-size: calc(var(--tvb-row) * .56); grid-template-columns: 1.1em auto 1fr 2.1em 2em; gap: .45em; padding: 0 1.1vh; }
.tv-board.two .tvb-rows .tvb-r:nth-child(n) { border-bottom: 1px solid var(--slab-line); }
.tv-board.two .tvb-r .tot { font-size: 1.1em; }
.tv-board.two .tvb-r .dot { width: .8em; height: .8em; }
.tv-board.two .tvb-r .st { font-size: .78em; }
.tv-board.two .tvb-r .st i { display: none; } /* "4 shots" -> "4": the column is two characters wide */
.tvb-r { display: grid; grid-template-columns: 3.4vh auto 1fr 7vh 9vh; align-items: center; gap: 1vh; padding: 0 1.6vh; }
.tvb-h { display: flex; gap: 1vh; padding: 0 1.6vh; font-family: var(--f-cond); font-weight: 600; font-size: 1.8vh; text-transform: uppercase; letter-spacing: .12em; color: var(--brass-hi); padding-bottom: .6vh; border-bottom: 1px solid var(--slab-line); }
.tvb-cols { display: flex; }
.tvb-cols i { font-style: normal; width: 8vh; text-align: right; }
.tvb-r { min-height: 0; font-size: min(2.7vh, calc(var(--tvb-row, 5vh) * .54)); border-bottom: 1px solid var(--slab-line); transition: background .3s; }
.tvb-r:last-of-type { border-bottom: 0; }
.tvb-r .rk { font-family: var(--f-cond); color: var(--hud-mute); text-align: right; }
.tvb-r .bl { display: flex; align-items: center; gap: .5vh; min-width: 0; }
.tvb-r .dot { width: 2.1vh; height: 2.1vh; }
#tv .cpu-tag { font-size: 1.2vh; flex: none; }
.tvb-r .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvb-r .tot { font-family: var(--f-cond); font-weight: 700; font-size: 3vh; text-align: right; font-variant-numeric: tabular-nums; }
.tvb-r .cur { text-align: right; font-family: var(--f-cond); font-variant-numeric: tabular-nums; }
.tvb-r .st { font-size: 2.1vh; color: var(--hud-mute); padding: 0; border: 0; white-space: nowrap; } /* not the member card's .st tile */
.tvb-r .st i { font-style: normal; }
.tvb-r .sc { display: inline-block; min-width: 1.6em; text-align: center; border-radius: 3px; padding: 0 .2em; }
.tvb-r .sc.eagle { background: var(--brass); color: var(--acc-ink); }
.tvb-r .sc.birdie { background: var(--tvred); color: #fff; }
.tvb-r .sc.bogey { box-shadow: inset 0 0 0 2px var(--hud-mute); }
.tvb-r .sc.dbl { box-shadow: inset 0 0 0 2px var(--hud-mute), inset 0 0 0 4px var(--slab), inset 0 0 0 6px var(--hud-mute); }
.tvb-r.on { background: rgba(244, 238, 220, .08); }
.tvb-r.gone { opacity: .45; }
.tvb-r.win { background: linear-gradient(90deg, rgba(196, 154, 60, .35), transparent); }
.tvb-r.win .nm::after { content: ' ★'; color: var(--brass-hi); }
.tvb-foot { padding: 1.2vh 1.6vh .4vh; font-size: 2.2vh; color: var(--hud-mute); }
.tvb-foot b { color: var(--ivory); font-family: var(--f-cond); font-size: 1.2em; }

.tv-join { display: flex; align-items: center; gap: 1.4vh; flex: none; background: var(--slab); border-radius: var(--rad); padding: 1vh; }
.tv-qr2 { width: 11vh; height: 11vh; flex: none; border-radius: 4px; overflow: hidden; }
.tv-join-t { display: flex; flex-direction: column; gap: .4vh; min-width: 0; }
.tv-join-t b { font-family: var(--f-cond); font-size: 2.4vh; text-transform: uppercase; letter-spacing: .06em; }
.tv-join-t span { font-size: 1.9vh; color: var(--hud-mute); overflow-wrap: anywhere; }
.big-action .tv-join { margin-top: auto; }

/* hole intro card over the big pane */
.tv-intro { position: absolute; display: flex; align-items: flex-start; justify-content: flex-start; padding: 4vh; transition: opacity .6s; }
.tv-intro.out { opacity: 0; }
.tvi { display: flex; flex-direction: column; gap: .6vh; padding: 2vh 3vh; background: var(--slab2); border-left: 1vh solid var(--acc); animation: tvt-in .6s var(--ease) both; }
.tvi-n { font-family: var(--f-cond); font-weight: 700; font-size: 3vh; text-transform: uppercase; letter-spacing: .1em; color: var(--acc); }
.tvi-n i { font-style: normal; color: var(--hud-mute); }
.tvi b { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 6.5vh; line-height: 1.05; }
.tvi-m { font-family: var(--f-cond); font-size: 3vh; letter-spacing: .04em; }

/* sound / full screen hint */
.tv-sound {
  position: fixed; left: 50%; top: 2vh; transform: translateX(-50%); pointer-events: auto; z-index: 6; border: 0; cursor: pointer;
  padding: 1vh 1.8vh; border-radius: 99px; background: var(--slab2); color: var(--hud-ink); font: 600 2vh var(--f-body);
  box-shadow: 0 0 0 1px var(--slab-line);
}
.tv-sound b { color: var(--acc); }
body.tv #conn { z-index: 10; }

/* player side: the TV-mode links (lobby + room invite) */
.tv-link { display: inline-block; margin-top: 4px; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tv-start { margin-top: 14px; }
.tv-start a { color: inherit; font-weight: 600; }

/* player side, while a TV watches the room (body.on-tv): the TV shows the leaderboard, the hole cards, replays and everyone's
   scores, so the phone drops its copies and keeps only what's needed to play */
body.on-tv .invite,
body.on-tv #board, body.on-tv #intro,
body.on-tv #p-yds-w, body.on-tv .p-theme, body.on-tv .p-atmos,
body.on-tv #toasts .toast.score, body.on-tv #toasts .toast.chat, body.on-tv #toasts .toast.joined { display: none !important; }