/* Arcade — modo tele (/tele/) y mando del móvil (/mando/). Oscuro, acento índigo, contorno cartoon. */
:root{--bg:#0b0d12;--s1:#141821;--s2:#1b2030;--line:rgba(255,255,255,.08);--txt:#eef0f6;--mut:#9aa1b5;--acc:#6e62f5;--ink:#1a1530;--pc:#6e62f5;
  --ff:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--fr:ui-rounded,"Trebuchet MS",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:var(--ff);-webkit-font-smoothing:antialiased}
html,body{overflow:hidden;max-width:100%}
body{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.pt-noscript{padding:2rem;text-align:center}
.pt-card{background:linear-gradient(180deg,#1d2233,#151926);border:3px solid var(--ink);border-radius:22px;box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 6px 0 var(--ink),0 18px 40px rgba(0,0,0,.4)}
.pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.8em 1.3em;border-radius:14px;border:3px solid var(--ink);background:var(--acc);color:#fff;font:800 1rem var(--fr);text-decoration:none;cursor:pointer;box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 4px 0 var(--ink)}
.pt-btn.ghost{background:#2a3044}
.pt-btn svg{width:1.3em;height:1.3em}
@keyframes pt-spin{to{transform:rotate(360deg)}}
@keyframes pt-pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}

/* ============================================================ TELE */
/* Todo escala con la altura de la pantalla (1080p y 720p se ven igual); margen de sobrebarrido de las Smart TV. */
/* Sin clamp() (Chromium < 79 de Smart TV antiguas) se queda con el valor en vh. */
.pt-tv{font-size:2.1vh;font-size:clamp(12px,2.1vh,30px)}
.pt-lobby{display:grid;grid-template-columns:minmax(18em,27%) minmax(0,1fr);width:100%;gap:2.2em;height:100vh;padding:3.2vh 3vw;
  background:radial-gradient(60vw 60vh at 0 0,rgba(110,98,245,.16),transparent 70%),radial-gradient(50vw 50vh at 100% 100%,rgba(63,182,234,.07),transparent 70%)}
.pt-join{display:flex;flex-direction:column;gap:1.2em;min-height:0}
.pt-brand{display:flex;align-items:center;gap:.55em;color:#fff;text-decoration:none;font:800 1.35em var(--fr)}
.pt-mark{width:1.7em;height:1.7em}
.pt-wm{display:block;height:1.9em;width:auto;image-rendering:pixelated}
.pt-brand em{display:inline-flex;white-space:nowrap;align-items:center;gap:.35em;margin-left:auto;padding:.3em .7em;border-radius:99px;background:rgba(110,98,245,.18);color:#c9c3ff;font:700 .62em var(--ff);font-style:normal;letter-spacing:.04em;text-transform:uppercase}
.pt-brand em svg{width:1.3em;height:1.3em}
.pt-qrbox{display:flex;flex-direction:column;align-items:center;gap:.7em;padding:1.3em 1.3em 1.5em;text-align:center}
.pt-step{margin:0;font:700 1.05em/1.3 var(--fr)}
.pt-qr{width:32vh;max-width:100%;width:min(100%,32vh);aspect-ratio:1;border-radius:14px;overflow:hidden;background:#fff;border:3px solid var(--ink);display:grid;place-items:center}
.pt-qr svg{display:block;width:100%;height:auto}
.pt-or{margin:.2em 0 0;color:var(--mut);font-size:.95em}
.pt-or b{color:var(--txt)}
.pt-code{font:900 4.3em/1 var(--fr);letter-spacing:.14em;padding:.12em .2em .12em .34em;border-radius:16px;background:#0e1119;border:3px solid var(--ink);color:#fff;text-shadow:0 .06em 0 var(--acc)}
.pt-players{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.pt-pl{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.6em;align-items:center;padding:.6em .8em;border-radius:16px;border:3px solid var(--ink);background:#141824;color:var(--mut);opacity:.7;transition:opacity .2s,transform .2s}
.pt-pl b{font:900 1.15em var(--fr);color:#fff}
.pt-pl span:last-child{grid-column:2;font-size:.85em}
.pt-av{grid-row:span 2;display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:50%;background:#232838;border:3px solid var(--ink);color:#566}
.pt-av svg{width:1.4em;height:1.4em}
.pt-pl.on{opacity:1;background:#1b2031;background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 22%,#171b28),#141824);border-color:var(--ink);animation:pt-pop .25s ease-out}
.pt-pl.on .pt-av{background:var(--pc);color:var(--ink)}
.pt-pl.on span:last-child{color:var(--pc)}
.pt-pl.wait{opacity:.9}
.pt-pl.wait .pt-av{border-color:var(--pc);border-top-color:transparent;animation:pt-spin 1s linear infinite}
.pt-status{margin:0;min-height:1.3em;color:var(--mut);font-size:.9em}
.pt-status.bad{color:#ff8a8d}
.pt-browse{display:flex;flex-direction:column;min-height:0;min-width:0}
.pt-top{display:flex;align-items:baseline;gap:1.2em;flex-wrap:wrap;padding-bottom:.9em}
.pt-top h1{margin:0;font:900 2em var(--fr)}
.pt-hint{margin:0;color:var(--mut)}
kbd{display:inline-block;padding:.05em .45em;border-radius:6px;border:2px solid #394058;background:#20253400;font:800 .85em var(--fr);color:#fff}
.pt-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:.6em .8em 3em;margin:0 -.8em;scrollbar-width:none;scroll-behavior:smooth}
.pt-scroll::-webkit-scrollbar{display:none}
.pt-sec{margin-bottom:1.6em}
.pt-sec h2{display:flex;align-items:center;gap:.5em;margin:0 0 .75em;font:800 1.25em var(--fr)}
.pt-sec h2 svg{width:1.3em;height:1.3em;color:#ffd166}
.pt-sec h2 small{font:500 .7em var(--ff);color:var(--mut)}
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(12.5em,1fr));gap:1.1em;row-gap:1.9em}
.pt-cell{position:relative;display:flex;flex-direction:column;gap:.45em;padding:0;border:0;background:none;color:var(--txt);font:inherit;text-align:left;cursor:pointer;outline:none;transition:transform .15s}
.pt-thumb{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#1a1f2d;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.pt-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pt-badge{position:absolute;left:.45em;top:.45em;padding:.2em .55em;border-radius:99px;background:#ffd166;color:var(--ink);font:800 .72em var(--fr);border:2px solid var(--ink)}
.pt-name{font:700 .95em/1.2 var(--fr);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 .2em}
.pt-cell.on{transform:scale(1.05);z-index:1}
.pt-cell.on .pt-thumb{border-color:#fff;box-shadow:0 0 0 .22em var(--acc),0 .5em 1.4em rgba(110,98,245,.45)}
.pt-cell.on .pt-name{color:#fff}
.pt-sec.mp .pt-cell.on .pt-thumb{box-shadow:0 0 0 .22em #ffd166,0 .5em 1.4em rgba(255,209,102,.35)}
.pt-empty{color:var(--mut)}
.pt-spin{width:3em;height:3em;border-radius:50%;border:4px solid #d9dcf5;border-top-color:var(--acc);animation:pt-spin .9s linear infinite}
.pt-toast{position:fixed;left:50%;bottom:4vh;transform:translateX(-50%);z-index:30;padding:.7em 1.3em;border-radius:99px;background:#1d2233;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);font:800 1.05em var(--fr);animation:pt-pop .2s ease-out}
/* Partida */
.pt-stage{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#000}
.pt-frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;display:block}
.pt-ghud{position:absolute;left:50%;bottom:2.4vh;transform:translate(-50%,160%);display:flex;align-items:center;gap:.5em;padding:.45em .9em;border-radius:99px;background:rgba(11,13,18,.82);border:2px solid rgba(255,255,255,.1);font-size:.85em;color:var(--mut);transition:transform .35s;pointer-events:none;white-space:nowrap}
.pt-ghud.show{transform:translate(-50%,0)}
.pt-ghud i{font:900 .9em var(--fr);font-style:normal;color:var(--ink);background:var(--pc);border-radius:99px;padding:.1em .5em}
.pt-ghud b{color:#fff}
.pt-menu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;background:rgba(6,8,12,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pt-mcard{display:flex;flex-direction:column;gap:.7em;width:24em;max-width:90vw;padding:1.6em 1.6em 1.4em;text-align:center;animation:pt-pop .2s ease-out}
.pt-mcard h2{margin:0 0 .4em;font:900 1.6em var(--fr)}
.pt-kick{font:800 .8em var(--ff);letter-spacing:.1em;text-transform:uppercase;color:#c9c3ff}
.pt-mcard button{padding:.75em 1em;border-radius:14px;border:3px solid var(--ink);background:#2a3044;color:#fff;font:800 1.05em var(--fr);cursor:pointer;box-shadow:inset 0 2px 0 rgba(255,255,255,.14),0 4px 0 var(--ink)}
.pt-mcard button.on{background:var(--acc);transform:scale(1.04)}
.pt-mcard p{margin:.3em 0 0;color:var(--mut);font-size:.8em}
/* Aviso en móvil */
.pt-phone{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(6,8,12,.86)}
.pt-phone .pt-card{width:min(100%,400px);padding:1.4em;font-size:15px}
.pt-phone h2{margin:0 0 .4em;font:900 1.4em var(--fr)}
.pt-phone p{margin:0 0 1.1em;color:var(--mut);line-height:1.45}
.pt-phone b{color:#fff;word-break:break-all}
.pt-row{display:flex;flex-wrap:wrap;gap:.6em}
.pt-row .pt-btn{flex:1}
@media (max-aspect-ratio:1/1){ /* tele o ventana en vertical */
  .pt-lobby{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;height:100vh;gap:1.2em}
  .pt-join{gap:.8em}
  .pt-qrbox{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:1em}
  .pt-qr{width:min(22vh,40vw)}
  .pt-code{font-size:3em}
  .pt-players{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pt-pl{grid-template-columns:1fr;justify-items:center;text-align:center}.pt-pl span:last-child{grid-column:1}.pt-av{grid-row:auto}
}

/* ============================================================ MANDO */
body.pt-pad{position:fixed;top:0;right:0;bottom:0;left:0;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pd{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;
  --top:52px;--bot:48px;--stick:clamp(170px,54vmin,270px);--abtn:clamp(108px,33vmin,164px);
  background:linear-gradient(180deg,#141824,#0b0d12);
  background:radial-gradient(70vmax 60vmax at 50% 120%,color-mix(in srgb,var(--pc) 22%,transparent),transparent 70%),linear-gradient(180deg,#141824,#0b0d12)}
.pd-top{position:relative;display:flex;align-items:center;gap:10px;height:var(--top);padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));padding-top:env(safe-area-inset-top);flex:none;border-bottom:3px solid var(--ink);background:rgba(0,0,0,.25)}
.pd-me{display:grid;place-items:center;min-width:46px;height:34px;padding:0 8px;border-radius:12px;background:var(--pc);color:var(--ink);border:3px solid var(--ink);font:900 1.05rem var(--fr);box-shadow:0 3px 0 var(--ink)}
.pd-title{flex:1;min-width:0;font:800 .95rem var(--fr);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:92px}
.pd-menu{position:absolute;left:50%;top:calc(50% + env(safe-area-inset-top) / 2);transform:translate(-50%,-50%);height:34px;padding:0 16px;border-radius:12px;border:3px solid var(--ink);background:#2a3044;color:#fff;font:800 .85rem var(--fr);box-shadow:inset 0 2px 0 rgba(255,255,255,.16),0 3px 0 var(--ink);touch-action:none}
.pd-menu.on{transform:translate(-50%,-44%);box-shadow:0 1px 0 var(--ink)}
.pd-zones{position:relative;flex:1;display:flex;gap:10px;min-height:0;padding:10px 10px 0}
/* Estructura de mando: cada pulgar tiene su empuñadura, un panel propio con su relieve, en vez de
   media pantalla lisa partida por una línea de puntos. */
.pd-l,.pd-r{position:relative;flex:1;min-width:0;touch-action:none;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 42%,rgba(0,0,0,.12)),
    color-mix(in srgb,var(--pc) 13%,#1b2032);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.07),inset 0 4px 0 rgba(255,255,255,.08),
    inset 0 -14px 26px rgba(0,0,0,.34),0 3px 0 rgba(0,0,0,.45)}
.pd-l{border-radius:38px 14px 14px 38px}
.pd-r{border-radius:14px 38px 38px 14px}
/* Raíl del borde interior: la pieza por la que un Joy-Con se engancha a la consola. */
.pd-l::after,.pd-r::after{content:"";position:absolute;top:13%;bottom:13%;width:6px;border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.05));pointer-events:none}
.pd-l::after{right:7px}
.pd-r::after{left:7px}
/* Franja de abajo, igual que la de arriba: el interruptor va ahí y no roba sitio a los controles. */
.pd-bot{position:relative;display:flex;align-items:center;justify-content:center;height:var(--bot);flex:none;
  padding-bottom:env(safe-area-inset-bottom);border-top:3px solid var(--ink);background:rgba(0,0,0,.25)}
.pd-zhint{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:rgba(255,255,255,.22);font:700 .8rem var(--fr);pointer-events:none}
.pd-stick{position:absolute;left:50%;top:50%;width:var(--stick);height:var(--stick);margin:calc(var(--stick) / -2) 0 0 calc(var(--stick) / -2);border-radius:50%;
  background:radial-gradient(circle at 50% 36%,rgba(0,0,0,.42) 0 40%,rgba(0,0,0,.24) 41% 72%,rgba(255,255,255,.07) 73%);
  border:3px solid var(--ink);box-shadow:inset 0 8px 16px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.06);
  opacity:.62;transition:opacity .15s;pointer-events:none}
.pd-stick.h{height:calc(var(--stick) * .5);margin-top:calc(var(--stick) / -4);border-radius:999px}
.pd-stick.live{opacity:1;transition:none}
.pd-stick i{position:absolute;left:50%;top:50%;width:calc(var(--stick) * .46);height:calc(var(--stick) * .46);margin:calc(var(--stick) * -.23) 0 0 calc(var(--stick) * -.23);border-radius:50%;
  background:radial-gradient(circle at 38% 28%,#5d6688,#333a58 68%);border:3px solid var(--ink);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.22),inset 0 -8px 12px rgba(0,0,0,.45),0 5px 0 var(--ink)}
/* Reborde de la seta, como el anillo estriado de la palanca de un mando. */
.pd-stick i::before{content:"";position:absolute;top:13%;right:13%;bottom:13%;left:13%;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),inset 0 2px 6px rgba(0,0,0,.4)}
.pd-stick.live i{background:radial-gradient(circle at 38% 28%,color-mix(in srgb,var(--pc) 70%,#fff),var(--pc) 70%)}
/* 1.48: cruceta fija, alternativa al joystick. Una sola cruz (recorte en el borde y otro dentro, sin
   costuras) con cuatro brazos que se encienden. Toda la zona sigue siendo táctil: la dirección se mide
   desde el centro de la cruz, no hace falta acertarle encima. */
.pd-dpad{position:absolute;left:50%;top:50%;width:var(--stick);height:var(--stick);margin:calc(var(--stick) / -2) 0 0 calc(var(--stick) / -2);opacity:.62;transition:opacity .15s;pointer-events:none}
.pd-dpad.live{opacity:1;transition:none}
.pd-dpad b,.pd-dpad s{position:absolute;top:0;right:0;bottom:0;left:0;display:block;
  -webkit-clip-path:polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%);
  clip-path:polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%)}
.pd-dpad b{background:var(--ink)}
.pd-dpad s{top:4px;right:4px;bottom:4px;left:4px;background:linear-gradient(180deg,#464e70,#333a55)}
.pd-dpad::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:24px;
  background:rgba(0,0,0,.24);box-shadow:inset 0 5px 12px rgba(0,0,0,.42)}
.pd-dpad i{position:absolute;border-radius:10px;background:transparent;transition:background .06s}
.pd-dpad i.on{background:var(--pc)}
/* Flechas dibujadas con bordes: se ven siempre, el brazo se enciende al pulsar. */
.pd-dpad i::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-50%,-50%);border:10px solid transparent}
.pd-dpad i[data-d=up]::after{border-bottom-color:rgba(255,255,255,.42);margin-top:-5px}
.pd-dpad i[data-d=down]::after{border-top-color:rgba(255,255,255,.42);margin-top:5px}
.pd-dpad i[data-d=left]::after{border-right-color:rgba(255,255,255,.42);margin-left:-5px}
.pd-dpad i[data-d=right]::after{border-left-color:rgba(255,255,255,.42);margin-left:5px}
.pd-dpad i.on::after{border-bottom-color:transparent;border-top-color:transparent;border-left-color:transparent;border-right-color:transparent}
.pd-dpad i[data-d=up].on::after{border-bottom-color:rgba(26,21,48,.8)}
.pd-dpad i[data-d=down].on::after{border-top-color:rgba(26,21,48,.8)}
.pd-dpad i[data-d=left].on::after{border-right-color:rgba(26,21,48,.8)}
.pd-dpad i[data-d=right].on::after{border-left-color:rgba(26,21,48,.8)}
.pd-dpad i[data-d=up]{left:37%;top:5%;width:26%;height:27%}
.pd-dpad i[data-d=down]{left:37%;bottom:5%;width:26%;height:27%}
.pd-dpad i[data-d=left]{top:37%;left:5%;height:26%;width:27%}
.pd-dpad i[data-d=right]{top:37%;right:5%;height:26%;width:27%}
.pd-dpad.h i[data-d=up],.pd-dpad.h i[data-d=down]{display:none}
.pd-dpad.h b,.pd-dpad.h s{-webkit-clip-path:none;clip-path:none;border-radius:999px}
.pd-dpad.h{height:calc(var(--stick) * .42);margin-top:calc(var(--stick) * -.21)}
/* Interruptor joystick / cruceta: abajo, entre las dos zonas, donde no descansa ningún pulgar. */
.pd-swap{height:34px;padding:0 16px;border-radius:12px;border:3px solid var(--ink);background:#2a3044;color:#fff;
  font:800 .85rem var(--fr);box-shadow:inset 0 2px 0 rgba(255,255,255,.16),0 3px 0 var(--ink);touch-action:manipulation}
.pd-swap:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.pd-swap[hidden]{display:none}
/* 1.50: interruptor de vibración, a la derecha de la franja de abajo (no roba el centro al de mando). */
.pd-vib{position:absolute;right:10px;height:30px;padding:0 11px;border-radius:11px;border:3px solid var(--ink);
  background:#2a3044;color:#fff;font:800 .74rem var(--fr);letter-spacing:.02em;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.16),0 3px 0 var(--ink);touch-action:manipulation}
.pd-vib:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.pd-vib.off{color:rgba(255,255,255,.4);background:#242938}
.pd-btns{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}
.pd-b{position:absolute;display:grid;place-items:center;width:var(--abtn);height:var(--abtn);margin:calc(var(--abtn) / -2) 0 0 calc(var(--abtn) / -2);border-radius:50%;border:4px solid var(--ink);background:#3a4160;color:#fff;
  font:900 2.1rem var(--fr);text-shadow:0 2px 0 rgba(26,21,48,.6);
  box-shadow:inset 0 4px 0 rgba(255,255,255,.2),inset 0 -10px 14px rgba(0,0,0,.28),0 7px 0 var(--ink),0 0 0 8px rgba(0,0,0,.26);
  transition:transform .05s,box-shadow .05s}
.pd-b.lbl{font:800 1.05rem/1.15 var(--fr);text-align:center;padding:6px}
.pd-b[data-b=a]{background:var(--pc);color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.3)}
.pd-btns.n1 .pd-b{left:50%;top:50%}
/* 1.47.1: con dos botones la zona se parte en dos franjas a todo lo ancho (B arriba, A abajo) en vez de
   ponerlos en diagonal. Se juega sin mirar el movil: asi el limite es una sola linea horizontal y cada
   franja entera pertenece a un boton, que es el reparto que menos se falla a ciegas. */
.pd-btns.n2 .pd-b[data-b=a]{left:50%;top:75%}
.pd-btns.n2 .pd-b[data-b=b]{left:50%;top:25%}
/* Con el móvil tumbado los dos botones van en fila (B a la izquierda, A a la derecha), que es como cae
   el pulgar; en vertical no caben uno al lado del otro y se quedan apilados. */
@media (orientation:landscape){
  .pd-btns.n2 .pd-b[data-b=a]{left:73%;top:50%}
  .pd-btns.n2 .pd-b[data-b=b]{left:27%;top:50%}
}
.pd-b.on{transform:translateY(5px);box-shadow:inset 0 3px 0 rgba(255,255,255,.2),0 1px 0 var(--ink),0 0 0 8px rgba(0,0,0,.26);filter:brightness(1.15)}
.pd-over{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:none;place-items:center;padding:16px;background:rgba(8,10,15,.9);touch-action:auto}
.pd-over.show{display:grid}
.pd-card{width:min(24rem,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 20px;text-align:center;border-radius:22px;background:linear-gradient(180deg,#1d2233,#151926);border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);animation:pt-pop .2s ease-out}
.pd-card h1{margin:0;font:900 1.3rem var(--fr)}
.pd-card p{margin:0;color:var(--mut);line-height:1.4}
.pd-card p.bad{color:#ff8a8d}
.pd-card b{color:#fff}
.pd-small{font-size:.85rem}
.pd-logo{width:44px;height:44px}
.pd-card form{display:flex;gap:8px;width:100%}
.pd-card input{flex:1;min-width:0;height:54px;padding:0 12px;border-radius:14px;border:3px solid var(--ink);background:#0e1119;color:#fff;font:900 1.8rem var(--fr);letter-spacing:.3em;text-align:center;text-transform:uppercase;outline:none;box-shadow:inset 0 2px 0 rgba(0,0,0,.3)}
.pd-card input:focus{border-color:var(--acc)}
.pd-card input.bad{border-color:#ff5a5f}
.pd-btn{height:54px;padding:0 18px;border-radius:14px;border:3px solid var(--ink);background:var(--acc);color:#fff;font:800 1rem var(--fr);box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 4px 0 var(--ink)}
.pd-spin{width:40px;height:40px;border-radius:50%;border:4px solid #394058;border-top-color:var(--pc);animation:pt-spin .9s linear infinite}
@media (orientation:portrait){
  .pd{--stick:clamp(132px,41vmin,200px);--abtn:clamp(92px,29vmin,140px)}
  .pd-title{padding-right:0;display:none}
}

/* ============================================================ QA 1.20: estados, anuncio, Smart TV */
/* Enfoque visible a 3 m: anillo grueso + borde blanco + nombre resaltado. */
.pt-cell.on{transform:scale(1.07)}
.pt-cell.on .pt-thumb{box-shadow:0 0 0 .3em var(--acc),0 0 0 .5em rgba(255,255,255,.9),0 .6em 1.6em rgba(110,98,245,.55)}
.pt-sec.mp .pt-cell.on .pt-thumb{box-shadow:0 0 0 .3em #ffd166,0 0 0 .5em rgba(255,255,255,.9),0 .6em 1.6em rgba(255,209,102,.4)}
.pt-cell.on .pt-name{background:var(--acc);color:#fff;border-radius:8px;padding:.1em .45em;margin:0 -.1em}
.pt-mcard button.on{box-shadow:0 0 0 .22em #fff,0 4px 0 var(--ink)}
.pt-pl.lost{opacity:.95}
.pt-pl.lost .pt-av{border-color:#ff8a8d;color:#ff8a8d}
.pt-pl.lost span:last-child{color:#ff8a8d}
/* Durante la partida el lobby (y su anuncio) no se pinta: nada queda tapado ni cuenta impresiones. */
.pt-ingame .pt-lobby{display:none}
/* Bloque de publicidad del lobby: separado de la rejilla y bien etiquetado. */
.pt-tv .ax-ad{margin:.2em 0 2em;padding:.6em .8em .8em;border:2px solid var(--line);border-radius:14px;background:rgba(20,24,33,.8);overflow:hidden;max-height:40vh}
.pt-tv .ax-ad span{display:block;margin-bottom:.4em;font:700 .75em var(--ff);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.pt-tv .ax-ad ins{min-height:90px}
.pt-tv .ax-ad-ph{display:grid;place-items:center;height:90px;border:2px dashed rgba(110,98,245,.55);border-radius:10px;color:#c9c3ff;font-weight:700}
.pt-tv .ax-ad:has(ins[data-ad-status="unfilled"]){display:none}
.pt-adprev{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;background:#05060a}
.pt-adprev .pt-card{padding:2em 3em;text-align:center}
.pt-adprev p{margin:.4em 0 0;font:800 1.4em var(--fr)}
.pt-status{font-size:1em}
.pt-hint{font-size:1em}
/* Navegadores sin aspect-ratio (Chromium < 88): miniatura 4:3 con relleno. */
@supports not (aspect-ratio:1/1){
  .pt-thumb{height:0;padding-top:75%}
  .pt-thumb img{position:absolute;top:0;left:0}
  .pt-join>*+*{margin-top:1em}
}
/* QA 1.20 · legible a 3 m: nada por debajo de ~1,8 % del alto (≈20 px a 1080p), nombres ≈2,4 % */
.pt-tv{font-size:2.2vh;font-size:clamp(12px,2.2vh,32px)}
.pt-tv .pt-badge{font-size:.82em}
.pt-tv .pt-name{font-size:1.08em}
.pt-tv .pt-sec h2 small,.pt-tv .pt-kick,.pt-tv .ax-ad span{font-size:.84em}
.pt-tv .pt-brand em{font-size:.68em}
.pt-tv .pt-ghud{font-size:.92em}
.pt-tv .pt-grid{grid-template-columns:repeat(auto-fill,minmax(11.6em,1fr));row-gap:2.3em} /* 4 columnas en 16:9 con la letra mayor */

/* Información privada en el móvil (cartas, rol secreto) */
.pd-priv{display:none;position:absolute;left:0;right:0;bottom:var(--bot);top:var(--top);z-index:4;overflow:auto;padding:10px 12px 14px;background:rgba(10,12,20,.96);touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.pd-priv.show{display:block}
.pd-priv.bar{top:auto;bottom:auto;top:var(--top);max-height:30%;background:rgba(10,12,20,.88);border-bottom:2px solid var(--pc,#6e62f5)}
.pd-priv h2{margin:0 0 4px;font:800 1.05rem/1.2 system-ui,sans-serif;color:var(--pc,#fff)}
.pd-priv p{margin:0 0 8px;font:600 .95rem/1.35 system-ui,sans-serif;color:#e9e6f5}
.pd-items{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pd-it{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:64px;min-height:56px;padding:8px 10px;border:3px solid #1a1530;border-radius:12px;background:var(--ic,#2a2f55);color:#fff;font:800 1rem/1.1 system-ui,sans-serif;box-shadow:0 4px 0 #1a1530;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pd-it.pic{padding:4px;background:transparent;border:0;box-shadow:none}
.pd-it img{display:block;height:min(34vh,150px);width:auto;border-radius:8px;box-shadow:0 4px 0 #1a1530}
.pd-it small{font:600 .75rem/1.2 system-ui,sans-serif;opacity:.8}
.pd-it[disabled]{opacity:.35}
.pd-it.hit{transform:translateY(3px);box-shadow:0 1px 0 #1a1530}
/* manos largas (fichas, triominós, piezas): miniaturas pequeñas para que quepan sin desplazar */
/* Lienzo tactil del mando: se dibuja con el dedo, el trazo sale en la tele. */
.pd-draw{position:relative;width:100%;aspect-ratio:1/1;max-height:44vh;margin:0 0 10px;border-radius:14px;border:2px dashed rgba(160,151,255,.55);background:#fff;touch-action:none;overflow:hidden}
.pd-draw i{position:absolute;left:8px;right:8px;top:50%;transform:translateY(-50%);text-align:center;font:600 .95rem/1.3 system-ui,sans-serif;font-style:normal;color:#8d89ad}
.pd-draw.ink i{display:none}
.pd-dot{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--pc,#6e62f5);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.35);opacity:0}
.pd-draw.ink .pd-dot{opacity:1}
.pd-priv.sm .pd-items{gap:6px}
.pd-priv.sm .pd-it{min-width:0;min-height:0;padding:2px}
.pd-priv.sm .pd-it:not(.pic){min-width:66px;min-height:46px;padding:6px 10px;font-size:.95rem}
.pd-priv.sm .pd-it img{width:auto;height:auto;max-width:min(30vw,120px);max-height:min(10vh,68px);box-shadow:0 3px 0 #1a1530}
.pd-priv.sm .pd-it small{font-size:.66rem}

/* ============================================================ 1.25 · Tele en móvil o tableta pequeña */
.pt-lobby{height:100vh;height:100dvh}
.pt-phone .pt-btn{white-space:nowrap;font-size:.95em;padding:.8em 1em}
.pt-or b{word-break:break-all}
/* Vertical: QR a la izquierda, código a la derecha; los juegos ocupan el resto y se desplazan. */
@media (max-aspect-ratio:1/1) and (max-width:1100px){
  .pt-tv{font-size:14px;font-size:clamp(14px,2.2vw,20px)}
  .pt-lobby{gap:.8em;padding:12px 12px 0;padding-top:max(12px,env(safe-area-inset-top))}
  .pt-join{gap:.6em}
  .pt-wm{height:1.7em}
  .pt-qrbox{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:.9em;row-gap:.35em;align-items:center;text-align:left;padding:.8em}
  .pt-qr{grid-row:1 / span 3;width:min(34vw,19vh);border-radius:10px}
  .pt-step{font-size:.95em}
  .pt-or{margin:0;font-size:.85em}
  .pt-code{justify-self:start;font-size:2.2em;border-radius:12px}
  .pt-players{gap:.4em}
  .pt-pl{padding:.35em .2em;border-radius:12px;row-gap:.1em}
  .pt-av{width:1.9em;height:1.9em;border-width:2px}
  .pt-pl b{font-size:1em}
  .pt-pl span:last-child{font-size:.75em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .pt-status:empty{display:none}
  .pt-top{gap:.3em .8em;padding-bottom:.5em}
  .pt-top h1{font-size:1.45em}
  .pt-hint{font-size:.85em}
  .pt-tv .pt-grid{grid-template-columns:repeat(auto-fill,minmax(10em,1fr));gap:.8em;row-gap:1.5em}
  .pt-scroll{padding:.5em .6em calc(2em + env(safe-area-inset-bottom));margin:0 -.6em}
  .pt-sec h2{font-size:1.1em;flex-wrap:wrap}
  .pt-cell.on{transform:none}
}
/* Horizontal con poca altura (móvil tumbado): columna izquierda estrecha y compacta. */
@media (min-aspect-ratio:1/1) and (max-height:460px){
  .pt-tv{font-size:12px}
  .pt-lobby{grid-template-columns:minmax(14em,30%) minmax(0,1fr);gap:1.2em;padding:10px max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
  .pt-join{gap:.6em;overflow-y:auto;scrollbar-width:none;padding-bottom:10px}
  .pt-join::-webkit-scrollbar{display:none}
  .pt-wm{height:1.6em}
  .pt-qrbox{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.8em;row-gap:.3em;align-items:center;text-align:left;padding:.7em}
  .pt-qr{grid-row:1 / span 3;width:min(30vh,8.5em);max-width:none;border-radius:10px}
  .pt-step{font-size:.95em}
  .pt-or{margin:0;font-size:.85em}
  .pt-code{justify-self:start;font-size:2em;border-radius:12px}
  .pt-players{gap:.4em}
  .pt-pl{padding:.35em .5em;border-radius:12px}
  .pt-av{width:1.9em;height:1.9em;border-width:2px}
  .pt-top{gap:.3em .8em;padding-bottom:.4em}
  .pt-top h1{font-size:1.5em}
  .pt-tv .pt-grid{grid-template-columns:repeat(auto-fill,minmax(10.5em,1fr));gap:.8em;row-gap:1.5em}
  .pt-scroll{padding-bottom:calc(2em + env(safe-area-inset-bottom))}
}

/* ============================================================ 1.44 · Experiencia de mando y tele */
/* Ficha del juego señalado: elegir entre 158 juegos con cuatro personas delante no se hace con una
   miniatura. Altura fija (no empuja la rejilla al cambiar de celda) y dos líneas de «cómo se juega». */
.pt-info{flex:none;display:flex;flex-direction:column;justify-content:center;gap:.25em;min-height:6.2em;margin-top:.5em;padding:.7em 1em;
  border-radius:16px;border:3px solid var(--ink);background:linear-gradient(180deg,#1b2031,#14182400);box-shadow:0 4px 0 var(--ink)}
.pt-info:empty{display:none}
.pt-ihead{display:flex;align-items:center;gap:.7em;flex-wrap:wrap}
.pt-ihead b{font:900 1.15em var(--fr);color:#fff}
.pt-ipl{display:inline-flex;align-items:center;gap:.35em;padding:.15em .6em;border-radius:99px;background:rgba(110,98,245,.22);color:#c9c3ff;font:800 .78em var(--fr)}
.pt-ipl svg{width:1.2em;height:1.2em}
.pt-ipl.warn{background:rgba(255,209,102,.2);color:#ffd166}
.pt-info p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:var(--mut);font-size:.92em;line-height:1.35;max-height:2.7em}
@media (max-aspect-ratio:1/1) and (max-width:1100px){.pt-info{min-height:0;padding:.5em .7em;margin-top:.4em}.pt-info p{-webkit-line-clamp:2;font-size:.85em}}
@media (min-aspect-ratio:1/1) and (max-height:460px){.pt-info{min-height:0;padding:.45em .7em}.pt-info p{-webkit-line-clamp:2}}

/* Mando: el chip del jugador abre el nombre y el «?» enseña cómo se juega. */
.pd-me{border:3px solid var(--ink);cursor:pointer;font:900 1.05rem var(--fr);line-height:1;max-width:8.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;text-align:center}
.pd-help{position:absolute;right:max(12px,env(safe-area-inset-right));top:calc(50% + env(safe-area-inset-top) / 2);transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;border:3px solid var(--ink);background:#2a3044;color:#fff;font:900 1.05rem var(--fr);box-shadow:0 3px 0 var(--ink);touch-action:none}
.pd-title{padding-right:56px}
.pd-card input.pd-name,.pd-name{width:100%;height:46px;letter-spacing:normal;text-transform:none;padding:0 12px;border-radius:14px;border:2px solid rgba(255,255,255,.18);background:#0e1119;color:#fff;font:800 1rem var(--fr);text-align:center;outline:none}
.pd-card input.pd-name:focus,.pd-name:focus{border-color:var(--acc)}
.pd-card form input[name=n]{flex:1;min-width:0;height:54px;font:800 1.15rem var(--fr);letter-spacing:normal;text-transform:none}
.pd-howto{max-height:44vh;overflow:auto;text-align:left;font-size:.95rem}
@media (orientation:portrait){.pd-title{display:none}.pd-me{max-width:6.5rem;font-size:.95rem}}
/* La columna izquierda no cabía en 720p ni en 1080p: el estado y las tarjetas de J3/J4 se salían
   por abajo (medido: 742 px de contenido en 674 de hueco). QR y código algo menores, y la columna
   encoge y se desplaza como red de seguridad en vez de cortar lo de abajo. */
.pt-join{min-height:0;overflow-y:auto;scrollbar-width:none}
.pt-join::-webkit-scrollbar{display:none}
.pt-qrbox{flex:none}
/* min-height: si no, estas reglas pisan las del apaisado bajo (línea de arriba) y el QR,
   con su ancho en %, se come toda la columna: el texto y el código se quedaban en 0 px. */
@media (min-aspect-ratio:1/1) and (min-height:461px){
  .pt-qr{width:min(100%,25vh)}
  .pt-code{font-size:3.3em}
  .pt-info{min-height:7.4em}
  .pt-info p{-webkit-line-clamp:3;max-height:4.1em}
}

/* ============================================================ 1.46.1 · EL MANDO SE USA EN HORIZONTAL
   El mando es un mando: dos zonas, una por pulgar. En vertical el móvil es alto y estrecho, así que
   las zonas quedan altas y flacas (y el cuadro de dibujo, diminuto). En horizontal cada pulgar tiene
   su mitad ancha y el cuadro de dibujo cabe entero. Se avisa con un cartel y, donde el navegador deja
   (Android en pantalla completa), se bloquea la orientación desde party-pad.js. */

/* Cartel de girar: solo en vertical, solo con la partida ya en marcha y hasta que se descarte. */
.pd-rot{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;display:none;place-items:center;padding:20px;
  background:rgba(8,10,15,.94);text-align:center;touch-action:auto}
body.pd-live:not(.pd-keep) .pd-rot{display:grid}
.pd-rot .pd-card{gap:14px}
.pd-rot svg{width:96px;height:96px;animation:pd-turn 2.4s ease-in-out infinite}
@keyframes pd-turn{0%,45%{transform:rotate(0)}70%,100%{transform:rotate(-90deg)}}
@media (orientation:landscape){.pd-rot{display:none!important}}

@media (orientation:landscape) and (max-height:520px){
  .pd{--top:42px;--bot:40px;--stick:clamp(150px,50vmin,250px);--abtn:clamp(96px,31vmin,152px)}
  .pd-top{gap:8px}
  .pd-me{height:30px;font-size:.95rem}
  .pd-menu,.pd-help{height:30px}
  .pd-zhint{bottom:6px;font-size:.72rem}
  /* Panel privado a dos columnas: el cuadro de dibujo a la izquierda con todo el alto,
     y los botones (colores, deshacer, listo) a la derecha, sin desplazar. */
  .pd-priv{padding:8px 10px 10px}
  .pd-priv h2{font-size:.95rem}
  .pd-priv p{margin-bottom:6px;font-size:.85rem}
  .pd-priv:has(.pd-draw){display:none}
  .pd-priv.show:has(.pd-draw){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;
    column-gap:10px;align-content:start}
  .pd-priv.show:has(.pd-draw) h2{grid-column:2}
  .pd-priv.show:has(.pd-draw) p{grid-column:2}
  .pd-priv.show:has(.pd-draw) .pd-draw{grid-column:1;grid-row:1 / span 3;height:100%;width:auto;aspect-ratio:1/1;max-height:none;margin:0}
  .pd-priv.show:has(.pd-draw) .pd-items{grid-column:2;align-content:start}
  .pd-priv.sm .pd-it img{max-width:min(18vw,110px);max-height:min(20vh,68px)}
}