/* Medayork: vista TV (mp/tv.js). Escenario fijo de 1920×1080 escalado con transform; tablero rectangular que lo llena.
   SOLO px de diseño y CSS viejo (Chromium 80 / WebKit de TV): nada de @container, cqi, :has(), :is(), :where(),
   color-mix(), dvh, aspect-ratio, inset, clamp() ni gap en flex (se usan márgenes). Gap en grid sí (Chrome 66).
   Medidas del tablero: 1900×1060 con borde de 4 → esquinas de 226, casillas de arriba/abajo ~159×226,
   de los lados 226×~66, centro 1438×598. */

/* ---------- Íconos dentro de botones (también en la clásica) ---------- */
.tvb svg, #rcchip svg, .tvm-g svg{display:inline-block; width:1.15em; height:1.15em; vertical-align:-.2em; margin-right:.4em}
.tvbar, .tvlast, .tvplayers, .tvside{display:none}
/* Emojis de adorno (.emo): si el aparato no los dibuja a color (TV sin esa letra), se esconden (tv.js pone html.noemoji) */
.noemo-only{display:none}
html.noemoji .emo{display:none}
html.noemoji .noemo-only{display:inline}
/* Sonido bloqueado por el navegador (nadie ha tocado este aparato; mp/sound.js pone html.sndlock): «Activar sonido»
   en vez de «Silenciar» */
html:not(.sndlock) .snd-l, html.sndlock .snd-u{display:none!important}
/* Clásica: «Vista TV» arriba del panel (abajo quedaba fuera de la pantalla del TV). Con el tablero chico (sin dibujos
   en las casillas, body.boardsm la pone ux.js) se dice que en la Vista TV sí salen. */
.vistatop{justify-content:flex-start; margin:0 0 10px}
.vistatop .vistahint{display:none; align-self:center; color:var(--wood-ink); font-size:13px}
body.boardsm .vistatop .vistahint{display:inline}

/* ---------- Sin gap en flex (Chrome < 84): márgenes de respaldo (tv.js pone .nofgap) ---------- */
body.nofgap .acts > *, body.nofgap .seg > *, body.nofgap .tabs > *, body.nofgap .foot > *, body.nofgap .menu > *,
body.nofgap .ab > *, body.nofgap .pc-btns > *, body.nofgap .uxo > *, body.nofgap .rcbar > *, body.nofgap .hand > *, body.nofgap .mrow2 > *{margin:3px}
body.nofgap .uxopts > .uxo + .uxo{margin-left:16px}   /* el gap de 16px entre «Velocidad» y «Cámara» */
body.nofgap .turn > .tk{margin-right:10px}
body.nofgap .dice .die3 + .die3{margin-left:24px}
body.nofgap .panel > * + *{margin-top:16px}
body.nofgap .plist > * + *, body.nofgap .slist > * + *, body.nofgap .alist > * + *, body.nofgap .rlist > * + *{margin-top:6px}
body.nofgap .ctl-card > * + *, body.nofgap .rcview > * + *, body.nofgap .rcview .cbody > * + *{margin-top:8px}
body.nofgap .rule > input{margin-right:10px}
body.nofgap .chk > input, body.nofgap .chk > .sw{margin-right:8px}
body.nofgap .tokbtn > * + *{margin-top:2px}
body.nofgap .cashbox > * + *{margin-top:4px}
body.nofgap .rules > li + li{margin-top:8px}
body.nofgap .log > li + li{margin-top:7px}
body.nofgap .pinfo > * + *{margin-top:3px}
body.nofgap .pname > *{margin-right:6px}
body.nofgap .pname > .ptotal{margin-right:0}
body.nofgap .binfo > *{margin:0 18px 6px 0}
body.nofgap .tcol h3 > .tk, body.nofgap .rank .who > .tk, body.nofgap .tab > .tk{margin-right:8px}
body.nofgap .sysline > i{margin-right:8px}
body.nofgap .note > *{margin:4px}
/* clásica (en la vista TV estas casillas llevan sus propios márgenes) */
body.nofgap:not(.tv) .tile.corner > .art, body.nofgap:not(.tv) .tile.corner > .csub{margin-top:calc(.4 * var(--cq))}
body.nofgap:not(.tv) .tb > * + *{margin-top:calc(.25 * var(--cq))}
body.nofgap:not(.tv) .tile.b .hz > * + *, body.nofgap:not(.tv) .tile.t .hz > * + *{margin-left:calc(.3 * var(--cq))}
body.nofgap:not(.tv) .tile.l .hz > * + *, body.nofgap:not(.tv) .tile.r .hz > * + *{margin-top:calc(.3 * var(--cq))}
/* Lo mío sin emojis: el círculo vacío del adorno no se ve (parecería una casilla de marcar), pero deja su puesto */
html.noemoji .emotk{visibility:hidden}

/* ---------- Menú (ventana) ---------- */
.tvm-g{display:flex; flex-wrap:wrap; margin:0 -5px 4px}
.tvm-g .btn{margin:5px}
/* Velocidad y Cámara en el Menú: cada una en su fila y con los mismos botones de Vista y Margen (contorno y sombra) */
.tvm-opts .uxopts{display:block; color:var(--muted); margin:0}
.tvm-opts .uxo{display:-webkit-box; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-align:center; align-items:center; margin:6px 0}
.tvm-opts .uxo > *{margin:3px 6px 3px 0}
.tvm-opts .uxb{box-sizing:border-box; font-family:var(--ui); font-weight:700; font-size:13.5px; line-height:1.15; padding:.4em .8em; border-radius:8px;
  background:var(--white); color:var(--ink); border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink)}
.tvm-opts .uxb:hover{border-color:var(--ink)}
.tvm-opts .uxb[aria-pressed="true"]{background:var(--ink); color:var(--card); border-color:var(--ink)}
.tvm-opts .uxb:focus{outline:3px solid var(--gold); outline-offset:2px}
.tvm-opts .uxn{color:var(--muted)}
.tvm-opts .uxl, .tvm-row .uxl{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:var(--muted); min-width:110px}
.tvm-row{display:flex; flex-wrap:wrap; align-items:center; margin:6px 0}
.tvm-row > *{margin:3px 6px 3px 0}
.tvm-row .btn[aria-pressed="true"]{background:var(--ink); color:var(--card)}
.tvlog{max-height:none}

/* ================= Vista TV ================= */
html.tvh, body.tv{height:100%; overflow:hidden; margin:0}
body.tv #stage{position:fixed; left:0; top:0; width:1920px; height:1080px; -webkit-transform-origin:0 0; transform-origin:0 0; overflow:hidden}
body.tv .app{display:block; position:absolute; left:0; top:0; width:1920px; height:1080px; max-width:none; margin:0; padding:0; zoom:1}
body.tv .panel{display:none}
body.tv .board-wrap{display:block; position:absolute; left:10px; top:10px; width:1900px; height:1060px; min-width:0}
body.tv .board{box-sizing:border-box; width:1900px; height:1060px; max-width:none; grid-template-columns:226px repeat(9,1fr) 226px; grid-template-rows:226px repeat(9,1fr) 226px;
  grid-gap:1px; gap:1px; border-width:4px; border-radius:10px; box-shadow:0 0 0 3px #C5DDBF, 0 0 0 5px #1A1A1A, 0 14px 40px rgba(0,0,0,.5)}

/* ----- Casillas ----- */
body.tv .tile .band{-webkit-flex:0 0 26px; flex:0 0 26px}
body.tv .tile.l .band, body.tv .tile.r .band{-webkit-flex:0 0 22px; flex:0 0 22px}
body.tv .hz{gap:0}
body.tv .hz > i{margin:0 2px}
body.tv .tile.l .hz > i, body.tv .tile.r .hz > i{margin:1px 0}
body.tv .hs{width:17px; height:17px}
body.tv .ht{width:34px; height:18px}
body.tv .tile.l .hs, body.tv .tile.r .hs{width:13px; height:13px}
body.tv .tile.l .ht, body.tv .tile.r .ht{width:15px; height:32px}
body.tv .tile.b .own, body.tv .tile.t .own{height:10px}
body.tv .tile.l .own, body.tv .tile.r .own{width:10px}

/* arriba y abajo: nombre, dibujo grande y precio */
body.tv .tb{gap:0; padding:6px 6px 7px}
body.tv .tile.t .tb{padding-top:15px}
body.tv .tile.b .tb{padding-bottom:15px}
body.tv .tn{font-size:18px; line-height:1.03; letter-spacing:0; margin:0}
body.tv .tp{font-size:22px; font-weight:700; line-height:1; margin:0}
body.tv .tile .art{width:100%; height:auto; -webkit-flex:1 1 0px; flex:1 1 0px; min-height:0; margin:6px 0; border-width:1.5px; border-radius:3px}
/* arriba y abajo: el dibujo completo, en su proporción 3:2 (149×99), sin recortar; el alto que sobra agranda
   el nombre y el precio (se leen mejor a 3 m) */
body.tv .tile.t .art, body.tv .tile.b .art{-webkit-flex:none; flex:none; height:99px; margin:5px 0}
body.tv .tile.t .tn, body.tv .tile.b .tn{font-size:21px}
body.tv .tile.t .tp, body.tv .tile.b .tp{font-size:25px}
body.tv .tn{overflow-wrap:normal; word-wrap:normal; -webkit-hyphens:manual; hyphens:manual}
body.tv .tp{white-space:nowrap}
/* sin las letras de Google (tv.js pone html.nofonts): la letra de respaldo es más ancha, se achica para que quepa */
html.nofonts body.tv .tn{font-size:15px; letter-spacing:-.02em}
html.nofonts body.tv .tile.t .tn, html.nofonts body.tv .tile.b .tn{font-size:17px}
html.nofonts body.tv .tp{font-size:17px; letter-spacing:-.02em}
html.nofonts body.tv .tile.t .tp, html.nofonts body.tv .tile.b .tp{font-size:20px}
html.nofonts body.tv .tile.l .tn, html.nofonts body.tv .tile.r .tn{font-size:13px}
html.nofonts body.tv .tile.l .tp, html.nofonts body.tv .tile.r .tp{font-size:16px}
/* respaldo condensado antes del genérico (Android TV tiene sans-serif-condensed) */
:root{--cond:'Barlow Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif-condensed, sans-serif}

/* lados: dibujo hacia afuera; nombre y precio hacia adentro (junto a la franja de color) */
body.tv .tile.l .tb, body.tv .tile.r .tb{display:grid; grid-template-rows:1fr auto; -webkit-box-align:center; align-items:center; text-align:center; padding:5px 6px 5px 15px}
body.tv .tile.l .tb{grid-template-columns:82px 1fr; grid-template-areas:"art tn" "art tp"}
body.tv .tile.r .tb{grid-template-columns:1fr 82px; grid-template-areas:"tn art" "tp art"; padding:5px 15px 5px 6px}
body.tv .tile.l .tn, body.tv .tile.r .tn{grid-area:tn; -webkit-align-self:end; align-self:end; font-size:17px; margin:0 0 3px}
body.tv .tile.l .tp, body.tv .tile.r .tp{grid-area:tp; -webkit-align-self:start; align-self:start; font-size:20px}
body.tv .tile.l .art, body.tv .tile.r .art{grid-area:art; width:82px; height:auto; -webkit-align-self:stretch; align-self:stretch; margin:0}
body.tv .tile.l .art{margin-right:8px}
body.tv .tile.r .art{margin-left:8px}
/* sin precio (Suerte, Parche, Túnel): el nombre va centrado */
body.tv .tile.l.t-suerte .tn, body.tv .tile.l.t-parche .tn, body.tv .tile.l.t-tunnel .tn,
body.tv .tile.r.t-suerte .tn, body.tv .tile.r.t-parche .tn, body.tv .tile.r.t-tunnel .tn{grid-row:1 / span 2; -webkit-align-self:center; align-self:center; margin:0}
body.tv .tile.t-suerte .tp, body.tv .tile.t-parche .tp, body.tv .tile.t-tunnel .tp{display:none}
body.tv .tile.t.t-suerte .tb, body.tv .tile.t.t-parche .tb, body.tv .tile.b.t-suerte .tb, body.tv .tile.b.t-parche .tb{-webkit-box-pack:justify; justify-content:space-around}

/* esquinas */
body.tv .tile.corner{gap:0; padding:10px}
body.tv .tile.corner .art{width:172px; height:106px; -webkit-flex:none; flex:none; margin:6px 0}
body.tv .cname{font-size:30px}
body.tv .csub{font-size:19px}
body.tv .tile.sold::after{font-size:26px; border-width:3px}

/* fichas 3D en el tablero */
body.tv .toks{gap:0; padding:8px}
body.tv .toks .tk{--bw:3px; --e:6px; width:50px; height:50px; min-width:0; min-height:0; border-width:3px; margin:0 2px 8px;
  box-shadow:inset 3px 4px 0 rgba(255,255,255,.32), inset -3px -4px 0 rgba(0,0,0,.2), 0 var(--e) 0 calc(-1 * var(--bw)) var(--edge), 0 var(--e) 0 0 var(--ink), 0 12px 14px rgba(0,0,0,.4)}
body.tv .tile.l .toks .tk, body.tv .tile.r .toks .tk{--e:5px; width:40px; height:40px; margin:0 2px 6px}
/* lados (bajitos): con 4 o más fichas se achican para que quepan en una fila */
body.tv .tile.l .toks .tk:first-child:nth-last-child(n+4), body.tv .tile.l .toks .tk:first-child:nth-last-child(n+4) ~ .tk,
body.tv .tile.r .toks .tk:first-child:nth-last-child(n+4), body.tv .tile.r .toks .tk:first-child:nth-last-child(n+4) ~ .tk{--e:4px; width:32px; height:32px; border-width:2.5px}
body.tv .tile.l .toks .tk:first-child:nth-last-child(n+6), body.tv .tile.l .toks .tk:first-child:nth-last-child(n+6) ~ .tk,
body.tv .tile.r .toks .tk:first-child:nth-last-child(n+6), body.tv .tile.r .toks .tk:first-child:nth-last-child(n+6) ~ .tk{width:26px; height:26px; border-width:2px}
body.tv .toks .tk svg{filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
body.tv .tile.l .toks .tk:first-child:nth-last-child(n+3) ~ .tk, body.tv .tile.r .toks .tk:first-child:nth-last-child(n+3) ~ .tk{margin-left:-14px}
body.tv .tile.l .toks .tk:first-child:nth-last-child(n+3), body.tv .tile.r .toks .tk:first-child:nth-last-child(n+3){--e:4px; width:34px; height:34px; border-width:2.5px}
body.tv .tile.l .toks .tk:first-child:nth-last-child(n+3) ~ .tk, body.tv .tile.r .toks .tk:first-child:nth-last-child(n+3) ~ .tk{--e:4px; width:34px; height:34px; border-width:2.5px}
body.tv .tile.l .toks .tk:first-child:nth-last-child(n+5), body.tv .tile.r .toks .tk:first-child:nth-last-child(n+5),
body.tv .tile.l .toks .tk:first-child:nth-last-child(n+5) ~ .tk, body.tv .tile.r .toks .tk:first-child:nth-last-child(n+5) ~ .tk{width:30px; height:30px; border-width:2px}
body.tv .tile.l .toks .tk:first-child:nth-last-child(n+5) ~ .tk, body.tv .tile.r .toks .tk:first-child:nth-last-child(n+5) ~ .tk{margin-left:-16px}
/* arriba y abajo con patrulla y 4 o más fichas: fichas más chicas para que el tombo no las tape */
body.tv .tile.b.uxpol .toks .tk:first-child:nth-last-child(n+4), body.tv .tile.b.uxpol .toks .tk:first-child:nth-last-child(n+4) ~ .tk,
body.tv .tile.t.uxpol .toks .tk:first-child:nth-last-child(n+4), body.tv .tile.t.uxpol .toks .tk:first-child:nth-last-child(n+4) ~ .tk{--e:4px; width:38px; height:38px; margin-bottom:5px}
/* lados: las fichas van sobre el dibujo (afuera), no sobre el nombre; con patrulla se corren hacia adentro (ux.css) */
body.tv .tile.l .toks{-webkit-box-pack:start; justify-content:flex-start; padding:8px 8px 8px 14px}
body.tv .tile.r .toks{-webkit-box-pack:end; justify-content:flex-end; padding:8px 14px 8px 8px}
/* lados con patrulla: el tombo va contra la orilla de afuera (ux.js) y las fichas a su lado, montadas, sobre el dibujo */
/* (empiezan debajo del borde del tombo y, con 4 o más, más montadas: así no llegan al nombre) */
body.tv .tile.l.uxpol .toks{-webkit-box-pack:start; justify-content:flex-start; padding-left:36px; padding-right:8px}
body.tv .tile.r.uxpol .toks{-webkit-box-pack:end; justify-content:flex-end; padding-right:36px; padding-left:8px}
body.tv .tile.l.uxpol .toks .tk, body.tv .tile.r.uxpol .toks .tk{--e:3px; width:30px; height:30px; border-width:2px}
body.tv .tile.l.uxpol .toks .tk + .tk, body.tv .tile.r.uxpol .toks .tk + .tk{margin-left:-14px}
body.tv .tile.l.uxpol .toks .tk:first-child:nth-last-child(n+3), body.tv .tile.l.uxpol .toks .tk:first-child:nth-last-child(n+3) ~ .tk,
body.tv .tile.r.uxpol .toks .tk:first-child:nth-last-child(n+3), body.tv .tile.r.uxpol .toks .tk:first-child:nth-last-child(n+3) ~ .tk{width:26px; height:26px}
body.tv .tile.l.uxpol .toks .tk:first-child:nth-last-child(n+3) ~ .tk, body.tv .tile.r.uxpol .toks .tk:first-child:nth-last-child(n+3) ~ .tk{margin-left:-14px}
body.tv .tile.l.uxpol .toks .tk:first-child:nth-last-child(n+4) ~ .tk, body.tv .tile.r.uxpol .toks .tk:first-child:nth-last-child(n+4) ~ .tk{margin-left:-16px}

/* casilla con patrulla (.uxpol), arriba y abajo: el tombo va a la izquierda del dibujo (ux.js) y las fichas a su
   derecha, más chicas, también sobre el dibujo: no tapan el nombre ni el precio */
body.tv .tile.b.uxpol .toks, body.tv .tile.t.uxpol .toks{-webkit-box-pack:center; justify-content:center; -webkit-align-content:center; align-content:center; padding:0 3px 0 74px}
body.tv .tile.b.uxpol .toks{padding-top:86px; padding-bottom:44px}
body.tv .tile.t.uxpol .toks{padding-top:70px; padding-bottom:58px}
body.tv .tile.b.uxpol .toks .tk, body.tv .tile.t.uxpol .toks .tk,
body.tv .tile.b.uxpol .toks .tk:first-child:nth-last-child(n+4), body.tv .tile.b.uxpol .toks .tk:first-child:nth-last-child(n+4) ~ .tk,
body.tv .tile.t.uxpol .toks .tk:first-child:nth-last-child(n+4), body.tv .tile.t.uxpol .toks .tk:first-child:nth-last-child(n+4) ~ .tk{--e:4px; width:34px; height:34px; border-width:2.5px; margin:0 2px 7px}
/* esquinas con patrulla: el nombre arriba y la línea de abajo quedan libres; las fichas van sobre el dibujo, del lado
   contrario al tombo (en GANA y ¡Mano dura! el tombo va a la derecha; en la UPJ y el río, a la izquierda) */
body.tv .tile.corner.uxpol .toks{-webkit-box-pack:center; justify-content:center; -webkit-align-content:center; align-content:center; padding:74px 84px 38px 12px}
body.tv .tile.corner[data-tile="10"].uxpol .toks, body.tv .tile.corner[data-tile="20"].uxpol .toks{padding:74px 12px 38px 84px}
body.tv .tile.corner.uxpol .toks .tk{--e:5px; width:44px; height:44px; margin:0 2px 7px}
body.tv .tile.corner.uxpol .toks .tk:first-child:nth-last-child(n+5), body.tv .tile.corner.uxpol .toks .tk:first-child:nth-last-child(n+5) ~ .tk{--e:4px; width:36px; height:36px; border-width:2.5px; margin:0 1px 6px}

/* tombos (patrullas) */
body.tv .uxtb-in{--d:56px; --bw:3px; --e:6px; box-shadow:inset 0 0 0 4px #B8D432, 0 var(--e) 0 calc(-1 * var(--bw)) #123A23, 0 var(--e) 0 0 var(--ink), 0 12px 14px rgba(0,0,0,.45)}
body.tv .uxtb.side .uxtb-in{--d:46px}
body.tv .uxtb-sir{border-width:3px; border-radius:8px 8px 3px 3px}

/* ----- Centro ancho ----- */
body.tv .center .cmap{opacity:.95}
body.tv .center .legend{display:none}
body.tv .center .hero{position:absolute; left:14px; top:4px; width:336px; margin:0; z-index:1}
body.tv .center .fig{width:108px; height:199px; margin:0 0 -10px -140px; filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 4px #fff) drop-shadow(0 0 7px rgba(255,255,255,.9))}
body.tv .center .banner{padding:12px 26px 14px; border-width:4px; outline:3px solid #fff; outline-offset:-10px; box-shadow:10px 10px 0 var(--ink)}
body.tv .center .banner small{font-size:17px}
body.tv .center .banner b{font-size:50px}

body.tv .center .decks{top:auto; bottom:132px; -webkit-flex-direction:row; flex-direction:row; -webkit-box-align:end; align-items:flex-end; gap:0}
body.tv .center .decks.dl{left:22px; right:auto}
body.tv .center .decks.dr{right:22px; left:auto}
body.tv .center .deck{width:110px; height:150px; margin:0 14px; gap:0; border-radius:8px; box-shadow:3px 3px 0 #fff, 4px 4px 0 var(--ink), 7px 7px 0 #fff, 8px 8px 0 var(--ink)}
body.tv .center .deck span{font-size:56px}
body.tv .center .deck em{font-size:16px; padding:0 6px; margin-top:10px}
body.tv .center .deck .dart{width:88px; height:59px; border-width:2px}
body.tv .center .bankbadge{width:156px; margin:0 14px; border-width:3px; border-radius:8px; box-shadow:4px 4px 0 var(--ink)}
body.tv .center .bart{height:104px}
body.tv .center .bsign{font-size:18px; padding:5px; border-top-width:3px}

/* la tarjeta del turno con sus botones (en la mitad, entre las dos columnas) */
body.tv .center .ctl{position:absolute; left:358px; right:358px; top:0; bottom:118px; -webkit-flex:none; flex:none; padding:8px 0; z-index:1}
body.tv .center .ctl::-webkit-scrollbar{width:0; height:0; display:none}   /* sin barra que parpadee cuando la carta se voltea (igual se puede correr si hiciera falta) */
body.tv .center .ctl-card{gap:0; width:auto; max-width:722px; padding:14px 26px 16px; border-width:3px; border-radius:14px; box-shadow:6px 6px 0 rgba(0,0,0,.35); margin-top:auto; margin-bottom:auto}
body.tv .center #c-head:not(:empty){margin-bottom:10px}
body.tv .center .dice{margin-bottom:14px}
body.tv .center #c-body > * + *{margin-top:10px}
body.tv .center .turn{gap:0}
body.tv .center .turn .tk.big{width:66px; height:66px; min-width:66px; border-width:4px; margin-right:16px; box-shadow:0 4px 0 var(--ink)}
body.tv .center .turn-name{font-size:28px}
body.tv .center .turn-money .tot{font-size:36px}
body.tv .center .turn-money .split{font-size:19px}
body.tv .center .msg{font-size:25px; max-width:none}
body.tv .center .small{font-size:22px}
body.tv .center .acts{gap:0}
body.tv .center .acts > *{margin:5px 6px}
body.tv .center .acts.sec{margin-top:6px}
body.tv .center .acts.sec > *{margin:0 4px}
body.tv .center .ctl .btn{font-size:24px; padding:10px 22px; border-width:3px; border-radius:10px; box-shadow:3px 3px 0 var(--ink)}
body.tv .center .ctl .btn.big{font-size:30px!important; padding:12px 38px}
body.tv .center .ctl .btn.sm{font-size:22px; padding:8px 14px}
body.tv .center .ctl .btn.ghost, body.tv .center .ctl .acts.sec .btn{font-size:22px; padding:6px 10px; box-shadow:none; border-color:transparent}
body.tv .center .dice{--ds:76px; gap:0}
body.tv .center .dice .die3 + .die3{margin-left:44px}
body.tv .center .f{border-width:2px}
body.tv .center .offer{width:620px; border-width:3px; border-radius:12px; box-shadow:5px 5px 0 var(--ink)}
body.tv .center .oart{-webkit-flex:0 0 230px; flex:0 0 230px; height:150px; border-right-width:8px}
body.tv .center .offer .od{gap:0; padding:12px 18px}
body.tv .center .offer b{font-size:30px}
body.tv .center .offer small{font-size:20px; margin-top:5px}
body.tv .center .bigcard{width:650px; max-width:100%; border-width:3px; border-radius:12px; box-shadow:5px 5px 0 var(--ink)}
body.tv .center .bc-h{font-size:30px; padding:8px 18px; border-bottom-width:3px}
body.tv .center .bigcard p{font-size:25px; padding:12px 20px 16px; line-height:1.3}
/* mensaje largo que no cabe (tv.js pone .apretada): letra un punto más chica para que no se esconda nada detrás de la franja */
body.tv .center .ctl.apretada .msg, body.tv .center .ctl.apretada .bigcard p{font-size:21px; line-height:1.22}
body.tv .center .ctl.apretada .bigcard p{padding:8px 18px 10px}
body.tv .center .ctl.apretada .small{font-size:19px}
body.tv .center .ctl.apretada .dice{margin-bottom:6px}
body.tv .center .ctl.apretada #c-head:not(:empty){margin-bottom:4px}
/* chance de GANA: muchos botones; un poco más apretado para que quepa sin barra */
body.tv .center .bigcard.gana p{font-size:22px; padding:8px 18px 10px}
body.tv .center .bigcard.gana ~ .acts > *{margin-top:3px; margin-bottom:3px}
body.tv .center .bigcard.gana ~ .acts .btn{padding-top:7px; padding-bottom:7px}
body.tv .center .win{gap:0}
body.tv .center .win > * + *{margin-top:14px}
body.tv .center .wint{font-size:46px}
body.tv .center .tk.xl{width:112px; height:112px; border-width:5px}
body.tv .center .jailpop{gap:0}
body.tv .center .jart{width:540px; height:360px; border-width:4px; border-radius:14px; box-shadow:8px 8px 0 var(--ink); margin-right:40px}
body.tv .center .bubble{font-size:60px; padding:24px 34px; border-width:4px; border-radius:20px; box-shadow:7px 7px 0 var(--ink)}

/* botoncitos discretos (Menú, pantalla completa; la sala en la fila de abajo) y lo último que pasó, arriba a la
   derecha del centro. Van en #tvside, al lado del tablero (no adentro): la cámara no los mueve.
   El centro va de 231 a 1669 px (x) y de 231 a 829 px (y) dentro de .board-wrap. */
body.tv .tvside{display:-webkit-box; display:flex; -webkit-box-orient:vertical; -webkit-flex-direction:column; flex-direction:column; -webkit-box-align:end; align-items:flex-end;
  position:absolute; top:243px; right:245px; width:340px; max-height:294px; z-index:4; color:var(--ink)}   /* 294: sin montarse en el mazo de Parche */
body.tv .tvside.dim{opacity:.4}
body.tv .tvbar{display:-webkit-box; display:flex; -webkit-box-orient:vertical; -webkit-flex-direction:column; flex-direction:column; -webkit-box-align:end; align-items:flex-end; -webkit-flex:none; flex:none}
body.tv .tvbar-r{display:-webkit-box; display:flex; -webkit-flex-direction:row-reverse; flex-direction:row-reverse; -webkit-box-align:center; align-items:center}
body.tv .tvbar-r > * + *{margin-right:10px}
body.tv .tvbar-r .tvb{white-space:nowrap}
body.tv .tvbar #rcwrap{display:block; margin-top:8px}
body.tv .tvbar #rcwrap:empty{display:none}
body.tv .btn.tvb, body.tv span.tvb{display:inline-block; font-family:var(--ui); font-weight:700; font-size:20px; line-height:1.15; padding:7px 14px; border:2px solid var(--ink); border-radius:9px; background:rgba(251,248,239,.93); color:var(--ink); box-shadow:2px 2px 0 var(--ink)}
body.tv .btn.tvb.pri{background:var(--gold); color:var(--gold-ink)}
body.tv span.tvb{box-shadow:none; background:rgba(251,248,239,.8)}
body.tv .btn.tvb b{font-family:var(--display); font-weight:400; letter-spacing:.06em}
/* «Activar sonido»: el navegador del TV no deja sonar hasta que alguien lo toque (mp/sound.js) */
body.tv .btn.tvsnd{display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center; margin-top:8px; text-align:left; white-space:nowrap}
body.tv .btn.tvsnd svg{width:30px; height:30px; margin-right:10px; -webkit-flex:none; flex:none; vertical-align:middle}
body.tv .tvsnd-t{display:block}
body.tv .tvsnd-t b{display:block; font-family:var(--display); font-weight:400; font-size:21px; letter-spacing:.02em; text-transform:uppercase; line-height:1.1}
body.tv .tvsnd-t small{display:block; font-size:17px; font-weight:700; line-height:1.15}

/* lo último que pasó (columna derecha, debajo de los botoncitos) */
body.tv .tvlast{display:block; -webkit-flex:0 1 auto; flex:0 1 auto; min-height:0; margin:12px 8px 0 0; width:330px; overflow:hidden; box-sizing:border-box; padding:10px 14px 12px;
  background:var(--card); border:3px solid var(--ink); border-radius:12px; box-shadow:5px 5px 0 rgba(0,0,0,.35)}
body.tv .tvlast:empty{display:none}
body.tv .tvl-h{font-family:var(--display); font-size:21px; color:var(--ant); text-transform:uppercase; letter-spacing:.03em; margin:0 0 6px}
body.tv .tvl-down{margin:0 0 6px; font-weight:800; font-size:20px; line-height:1.2; color:var(--red)}
body.tv .tvlast ul{list-style:none; margin:0; padding:0}
body.tv .tvlast li{display:-webkit-box; display:flex; -webkit-box-align:start; align-items:flex-start; font-size:22px; line-height:1.25; margin:0 0 6px}
body.tv .tvlast li span{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden}
body.tv .tvlast li i{-webkit-flex:none; flex:none; width:12px; height:12px; border-radius:50%; margin:8px 9px 0 0}

/* franja de jugadores (abajo, de lado a lado del centro). Sin secretos. */
body.tv .center .tvplayers{display:-webkit-box; display:flex; position:absolute; left:0; right:0; bottom:0; height:118px; box-sizing:border-box; padding:10px 12px;
  -webkit-box-pack:center; justify-content:center; -webkit-box-align:stretch; align-items:stretch; background:rgba(251,248,239,.96); border-top:3px solid var(--ink); z-index:2}
body.tv .center .tvplayers:empty{display:none}
body.tv .tvp{all:unset; box-sizing:border-box; cursor:pointer; display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center; -webkit-flex:1 1 0px; flex:1 1 0px; max-width:300px; min-width:0;
  margin:0 4px; padding:6px 10px; border:3px solid transparent; border-radius:12px; color:var(--ink)}
body.tv .tvp.now{background:#fff; border-color:var(--ink); box-shadow:4px 4px 0 var(--gold)}
body.tv .tvp.out{opacity:.45}
body.tv .tvp:focus{outline:3px solid var(--gold)}
/* foco visible con el control del TV (flechas): :focus-visible no existe antes de Chrome 86 */
body.tv .btn:focus, body.tv .tab:focus, body.tv .offer:focus, body.tv .prow:focus{outline:3px solid var(--gold); outline-offset:2px}
body.tv .tile:focus{outline:4px solid var(--gold); outline-offset:-4px; z-index:2}
body.tv .tvp .tk{width:58px; height:58px; min-width:58px; border-width:3px; margin-right:12px; box-shadow:0 3px 0 var(--ink)}
body.tv .tvp-i{display:-webkit-box; display:flex; -webkit-flex-direction:column; flex-direction:column; min-width:0; -webkit-flex:1 1 auto; flex:1 1 auto}
/* nombre en su línea (las etiquetas van abajo y nunca lo tapan); plata; etiquetas + cuenta/efectivo */
body.tv .tvp-n{display:block; min-width:0; font-weight:800; font-size:24px; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
body.tv .tvp-n .nm{white-space:nowrap}
body.tv .tvp-m{font-family:var(--display); font-size:30px; line-height:1.12; white-space:nowrap; font-variant-numeric:tabular-nums}
body.tv .tvp-s{display:-webkit-box; display:flex; -webkit-box-align:center; align-items:center; min-width:0; min-height:24px; font-size:19px; font-weight:600; line-height:1.2; color:var(--muted); white-space:nowrap; overflow:hidden; font-variant-numeric:tabular-nums}
body.tv .tvp-c{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
body.tv .tvp-s svg{display:inline-block; width:19px; height:19px; vertical-align:-3px; margin-right:3px}
body.tv .tvp-s .sp{display:inline-block; width:10px}
body.tv .tvtag{-webkit-flex:none; flex:none; margin-right:6px; padding:0 6px; border:2px solid var(--ink); border-radius:5px; background:var(--gold); color:var(--gold-ink);
  font-family:var(--cond); font-weight:700; font-size:17px; letter-spacing:.05em; text-transform:uppercase; line-height:1.15}
/* 5 o 6 jugadores: ficha y plata más chicas para que quepan nombre y plata */
body.tv .tvplayers.many{padding-left:8px; padding-right:8px}
body.tv .tvplayers.many .tvp{margin:0 3px; padding:6px 7px}
body.tv .tvplayers.many .tvp .tk{width:44px; height:44px; min-width:44px; margin-right:8px}
body.tv .tvplayers.many .tvp-n{font-size:22px}
body.tv .tvplayers.many .tvp-m{font-size:26px}
body.tv .tvplayers.many .tvtag{font-size:15px; padding:0 4px; margin-right:4px; letter-spacing:.02em}
/* sin las letras de Google la de respaldo es más ancha: nombres un poco más chicos para que quepan enteros */
html.nofonts body.tv .tvp-n{font-size:22px; letter-spacing:-.02em}
html.nofonts body.tv .tvplayers.many .tvp-n{font-size:19px; letter-spacing:-.03em}
html.nofonts body.tv .tvp-s{font-size:17px}
body.tv .tvp-s.apretada{font-size:16px}
body.tv .tvp-s.apretada .tvtag{font-size:14px; padding:0 3px; margin-right:4px; letter-spacing:0}
body.tv .tvp-s.apretada svg{width:16px; height:16px; margin-right:2px}
body.tv .tvtag.upj{background:#E6E6E2; color:var(--ink)}
body.tv .tvtag.req{background:#1E2747; color:#fff}
body.tv .tvtag.debt, body.tv .tvtag.out{background:var(--red); color:#fff}

/* ----- Ventanas, anuncios y demás, dentro del escenario ----- */
body.tv .modal{padding:16px; zoom:1}
/* ventanas más grandes con transform (no con zoom: en un Chrome viejo, zoom dentro de un transform descuadra las medidas y los clics de prueba) */
body.tv .sheet{zoom:1; -webkit-transform:scale(1.4); transform:scale(1.4); width:780px; max-width:none; max-height:740px}
@keyframes tvpop{from{-webkit-transform:scale(1.3); transform:scale(1.3); opacity:0} to{-webkit-transform:scale(1.4); transform:scale(1.4); opacity:1}}
body.tv .sheet{-webkit-animation:tvpop .25s ease-out; animation:tvpop .25s ease-out}
/* el pie de las ventanas (Listo, Entendido, Empezar partida…) queda pegado abajo y siempre se ve */
body.tv .sheet > .foot{position:-webkit-sticky; position:sticky; bottom:-22px; z-index:2; margin:16px -22px -22px; padding:12px 22px 18px; background:var(--card); border-top:2px solid var(--card-2)}
/* subasta: los botones de cada jugador en la misma fila de su nombre (con 6 jugadores cabe sin correr) */
body.tv .alist.aul{gap:5px}
body.nofgap.tv .alist.aul > * + *{margin-top:5px}
body.tv .aul .arow{grid-template-columns:28px minmax(0,1fr) auto; padding:5px 8px}
body.tv .aul .arow .ab{grid-column:auto; -webkit-box-pack:end; justify-content:flex-end}
body.tv .abid.auc{-webkit-box-orient:horizontal; -webkit-flex-direction:row; flex-direction:row; -webkit-box-align:baseline; align-items:baseline; -webkit-box-pack:center; justify-content:center; padding:6px 10px; margin-bottom:8px}
body.tv .abid.auc > * + *{margin-left:12px}
body.tv .deed .dart svg{height:190px}
body.tv .deed td{padding-top:4px; padding-bottom:4px}
body.tv .toast{zoom:1; bottom:34px; font-size:24px; padding:14px 22px; border-radius:12px}
body.tv #rcchip{top:14px; left:14px; zoom:1}
body.tv #rcchip .btn{font-size:24px; padding:10px 18px; border-width:3px; box-shadow:3px 3px 0 var(--ink)}
body.tv .rcov{zoom:1; padding:30px}
body.tv .rcov-card{width:1300px; max-width:none; padding:36px 40px; border-width:4px; border-radius:18px; box-shadow:10px 10px 0 rgba(0,0,0,.5)}
body.tv .rcov-card.one{width:640px; -webkit-transform:scale(1.3); transform:scale(1.3)}
body.tv .rcqr canvas{width:460px; height:460px}
body.tv .rcov small.k{font-size:24px}
body.tv .rccode{font-size:150px}
body.tv .rcov-t p{font-size:28px}
body.tv .rcov-card .btn{font-size:24px; padding:12px 24px}
body.tv .uxann{width:1920px}
body.tv .uxa{max-width:1500px; gap:0; padding:22px 40px 26px 22px; border-width:6px; border-radius:18px; box-shadow:10px 10px 0 var(--ink)}   /* ancho: casi siempre en una línea (más bajito, cabe arriba sin tapar el turno ni el Menú) */
body.tv .uxa-ico{width:96px; height:96px; margin-right:22px; border-width:5px; box-shadow:inset 0 -5px 0 rgba(0,0,0,.12)}
body.tv .uxa-t{font-size:58px}
body.tv .uxa.long .uxa-t{font-size:48px}
body.tv .uxa.xl .uxa-t{font-size:38px}
body.tv .uxa-k{left:34px; font-size:22px}
body.tv .uxa-bar{left:22px; right:22px; bottom:8px; height:6px}
body.tv .uxa-sir{right:40px; width:90px; height:28px; border-width:5px}
body.tv .uxa.t-good .uxa-t, body.tv .uxa.t-bad .uxa-t, body.tv .uxa.t-police .uxa-t, body.tv .uxa.t-bank .uxa-t{text-shadow:0 4px 0 rgba(0,0,0,.35)}
body.tv .uxa.t-bank{background:linear-gradient(to top, #F2C230 0, #F2C230 9px, #1B6FC0 9px)}
body.tv .uxa.t-bank .uxa-bar{bottom:15px}

/* ---------- Diagnóstico (?diag): fuera del escenario, a tamaño real para que se lea en una foto ---------- */
#mdydiag{position:fixed; left:0; right:0; top:0; z-index:999; background:rgba(0,0,0,.88); color:#fff; font:14px/1.45 system-ui, sans-serif; padding:8px 44px 10px 12px; word-wrap:break-word}
#mdydiag b.si{color:#7CE08A} #mdydiag b.no{color:#FF8A80}
#mdydiag button{position:absolute; right:6px; top:6px; width:32px; height:32px; font-size:22px; line-height:1; border:0; border-radius:6px; background:#333; color:#fff; cursor:pointer}