/* Test de PokerMaster · primero móvil en vertical (390 × 664 sin barras; también 375 × 548, 360 × 640 y 390 × 844).
   La mano se juega en una mesa de torneo de 8, como en un cliente de póker: asientos con posición y pila, botón,
   ciegas, fichas delante de cada uno, el board y, debajo, el historial de las tres calles, que nunca se borra.
   La mesa ocupa lo que sobra y no salta nunca: historial, franja y mando tienen alto fijo.
   Dentro de la mesa todo mide en unidades del contenedor (cqw y cqh de .stage).
   Animación solo con transform y opacity. Marca en rojo; nunca verde ni lima (solo los tréboles de la baraja de 4 colores). */
:root {
  --bg: #070807; --ink: #F4F2EC; --muted: #BDBAB2; --dim: #8A867E; --line: #34292A;
  --panel: #141011; --panel-2: #1D1718;
  --felt-1: #4B1218; --felt-2: #2A0A0F; --felt-3: #120709; --rail: #0E0C0B;
  --brand: #E10600; --brand-dark: #B3121E; --brand-ink: #FF5A4A; --brand-glow: rgba(225, 6, 0, .5);
  --amber: #FFC25C; --blue: #9DBDFF; --steel: #C3C9D2;
  --card: #FBFAF6; --s-h: #D8342B; --s-d: #2F6FE0; --s-c: #1E9A4B; --s-s: #161616;
  --display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 600 16px/1.5 var(--body);
       -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.pantalla { position: relative; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

.btn-rojo { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 14px 28px; border: 0; border-radius: 14px;
            background: var(--brand); color: #FFFFFF; font: 800 19px/1 var(--display); letter-spacing: -0.01em; cursor: pointer;
            box-shadow: 0 12px 32px -10px var(--brand-glow), inset 0 -3px 0 rgba(0, 0, 0, .2); }
.btn-rojo:active, .btn-borde:active, .opt:not(:disabled):active { transform: scale(.97); }
.btn-borde { min-height: 54px; padding: 0 24px; border: 2px solid var(--line); border-radius: 14px; background: transparent; font: 800 16px/1 var(--display); color: var(--ink); cursor: pointer; }

/* ── 1 · portada ── */
.portada { height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 18px;
           padding-block: max(16px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-bottom, 0px)); }
.fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 8, 7, 0) 0%, rgba(7, 8, 7, .25) 38%, var(--bg) 72%); }
/* la mesa de fondo, desenfocada: es estática, así que el desenfoque se pinta una sola vez */
.fondo-mesa { --u: 2.05cqw; container-type: inline-size; position: absolute; left: 50%; top: -12%; width: max(118vw, 440px); aspect-ratio: 4 / 5;
              transform: translateX(-50%); filter: blur(5px); opacity: .9; }
.fondo-mesa .table { inset: 8% 5% 4%; }
.fondo-mesa .felt { left: 50%; top: 58%; }
.fondo-mesa .felt-logo { width: calc(var(--u) * 8.6); height: calc(var(--u) * 12); overflow: visible; opacity: .14; }
.fondo-mesa .felt span { display: block; font: 800 calc(var(--u) * 2.4)/1 var(--display); letter-spacing: .5em; margin-right: -.5em; color: rgba(244, 242, 236, .12); white-space: nowrap; }
.fondo-board { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); display: flex; gap: calc(var(--u) * 1.2); }
.fondo-board .card { position: relative; width: calc(var(--u) * 5.6); }
.portada-cartas { --u: clamp(11px, 3.9vw, 24px); flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 3vw; }
.card.suelta { position: relative; width: min(calc(var(--u) * 7.4), 22vh); }
.card.suelta:first-child { transform: rotate(-7deg) translateY(5%); }
.card.suelta:last-child { transform: rotate(6deg); }
.portada-texto { position: relative; display: grid; gap: 14px; max-width: 560px; }
.eyebrow { margin: 0; display: flex; align-items: center; gap: 10px; font: 700 12px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--brand-ink); }
.eyebrow-logo { flex: none; width: 156px; height: 26px; overflow: visible; }
.portada h1 { margin: 0; font: 800 clamp(40px, 11.5vw, 84px)/.98 var(--display); letter-spacing: -0.035em; }
.portada h1 span { color: var(--brand); }
.sub { margin: 0; max-width: 36ch; font: 600 clamp(16px, 4.3vw, 20px)/1.45 var(--body); color: var(--muted); }
.portada .btn-rojo { width: 100%; margin-top: 4px; }
.recreado { margin: 0; max-width: 46ch; font: 600 12.5px/1.45 var(--body); color: var(--dim); }
.aviso { margin: 0; color: var(--amber); font-size: 15px; }

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .portada { flex-direction: row-reverse; align-items: center; justify-content: center; gap: 7vw; padding-block: 40px; }
  .fondo::after { background: radial-gradient(80% 90% at 70% 50%, rgba(7, 8, 7, .2) 0%, rgba(7, 8, 7, .65) 60%, var(--bg) 100%); }
  .fondo-mesa { --u: 1cqw; top: 50%; width: max(100vw, 177.8vh); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); }
  .fondo-mesa .table { inset: 9% 6% 6%; }
  .fondo-mesa .felt { top: 60%; }
  .fondo-board { top: 47%; }
  .portada-cartas { flex: none; --u: clamp(18px, 2.2vw, 30px); }
  .portada-texto { max-width: 640px; }
  .portada .btn-rojo { width: auto; min-width: 260px; justify-self: start; }
}

/* ── 2 · la mano ── */
/* De arriba abajo: cabecera, mesa, historial, franja y mando. Solo la mesa cambia de alto; lo demás es fijo,
   así que la mesa no salta nunca entre manos ni entre momentos de la mano. */
.mano { height: 100vh; height: 100dvh; max-width: 560px; margin: 0 auto; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr); gap: 6px; padding-block: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-bottom, 0px)); }

/* cabecera: las cinco manos, el torneo, la pila efectiva, el historial completo y repetir */
.cab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.progreso { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.progreso i { display: block; height: 3px; border-radius: 9px; background: rgba(244, 238, 228, .14); }
.progreso i.on { background: var(--brand); }
.progreso i.now { background: var(--brand-ink); }
.cab-fila { display: flex; align-items: center; gap: 6px; min-width: 0; height: 28px; }
.cab-mano { flex: none; font: 800 11.5px/1 var(--display); letter-spacing: .1em; color: var(--brand-ink); white-space: nowrap; }
.cab-torneo { flex: 1 1 auto; min-width: 0; font: 700 12px/1.3 var(--display); color: rgba(244, 242, 236, .86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-ef { flex: none; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(255, 194, 92, .45); background: rgba(255, 194, 92, .1);
          font: 800 11px/1 var(--display); letter-spacing: .03em; color: var(--amber); white-space: nowrap; }
.cab-ef b { font-size: 12.5px; letter-spacing: 0; }
.cab-btn { position: relative; flex: none; width: 34px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px;
           background: #131011; color: var(--muted); font: 800 11.5px/1 var(--display); letter-spacing: .04em; cursor: pointer; }
.cab-btn::after { content: ""; position: absolute; inset: -8px -4px; }
.cab-btn svg { width: 17px; height: 17px; }
@media (hover: hover) { .cab-btn:hover { color: var(--ink); border-color: #5A4A4B; } }

.cuerpo { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }
.zona-mesa { min-height: 0; container-type: size; display: grid; place-items: end center; }
/* en un móvil muy alto, la mesa no se estira: se queda abajo y como mucho 1,35 veces más alta que ancha */
.stage { position: relative; container-type: size; width: 100cqw; height: min(100cqh, 135cqw); border-radius: 18px; overflow: hidden; contain: layout paint;
         background: radial-gradient(120% 90% at 50% 40%, #1A1012 0%, var(--bg) 72%);
         --cm: min(10.8cqw, 13.5cqh); --cy: min(18.5cqw, 19.5cqh); }
.stage[data-forma="ancho"] { --cm: min(6.2cqw, 11cqh); --cy: min(8.6cqw, 15cqh); }
.escena { position: absolute; inset: 0; }

.table { position: absolute; inset: 5% 7% 9%; border-radius: 999px;
         background: radial-gradient(70% 70% at 50% 46%, var(--felt-1) 0%, var(--felt-2) 58%, var(--felt-3) 100%);
         box-shadow: 0 0 0 min(2.2cqw, 9px) var(--rail), 0 0 0 calc(min(2.2cqw, 9px) + 1.5px) #2E2622, 0 10px 30px rgba(0, 0, 0, .65), inset 0 0 40px rgba(0, 0, 0, .55); }
.table::before { content: ""; position: absolute; inset: min(4cqw, 16px); border-radius: 999px; border: 1px solid rgba(255, 255, 255, .07); }
.stage[data-forma="ancho"] .table, .stage[data-forma="ancho"] .brillo { inset: 9% 6% 7%; }
.brillo { position: absolute; inset: 5% 7% 9%; z-index: 2; border-radius: 999px; pointer-events: none; opacity: 0;
          box-shadow: 0 0 0 min(2.2cqw, 9px) rgba(225, 6, 0, .85), 0 0 24px 6px rgba(225, 6, 0, .5), inset 0 0 36px rgba(225, 6, 0, .32); }
.tapete { position: absolute; left: 50%; z-index: 3; transform: translate(-50%, -50%); font: 800 10px/1 var(--display); letter-spacing: .1em;
          color: rgba(244, 238, 228, .32); white-space: nowrap; pointer-events: none; }
.stage.bajo .tapete { display: none; }

/* bote y board */
.pot { position: absolute; left: 50%; z-index: 5; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 1px;
       padding: 4px 12px 5px; border-radius: 10px; background: rgba(8, 5, 6, .74); border: 1px solid rgba(255, 194, 92, .2); }
.pot small { font: 800 11px/1.15 var(--display); letter-spacing: .12em; color: rgba(244, 238, 228, .62); }
.pot b { font: 800 16px/1.1 var(--display); color: var(--amber); font-variant-numeric: tabular-nums; }
.stage[data-forma="ancho"] .pot b { font-size: clamp(16px, 2.2cqw, 24px); }
.board { position: absolute; left: 50%; z-index: 4; transform: translate(-50%, -50%); display: flex; --gap: 4px; gap: var(--gap); }
.stage[data-forma="ancho"] .board { --gap: min(.9cqw, 10px); }
.hueco { position: relative; display: grid; place-items: center; width: var(--cm); aspect-ratio: 5 / 7; border-radius: 9%; border: 1px dashed rgba(244, 238, 228, .14); }
/* los huecos vacíos dicen lo que falta (FLOP en los tres primeros, TURN, RIVER·TÚ): la carta tapa su nombre al caer.
   La luz se enciende en los huecos que se van a llenar y se apaga al llegar su carta; ya va pintada, solo cambia su opacidad */
.hueco.rio { border-color: rgba(255, 90, 74, .55); }
.luz { position: absolute; inset: -3px; border-radius: 12%; border: 2px solid var(--brand-ink); background: rgba(225, 6, 0, .14);
       box-shadow: 0 0 14px rgba(225, 6, 0, .5); opacity: 0; pointer-events: none; }
.hq { position: relative; display: grid; justify-items: center; gap: 3px; white-space: nowrap; letter-spacing: .04em;
      font: 800 clamp(9.5px, calc(var(--cm) * .26), 13px)/1 var(--display); color: rgba(244, 238, 228, .5); }
.hq.tres::before { content: ""; position: absolute; top: calc(100% + 4px); height: 1px; background: rgba(244, 238, 228, .3);
                   left: calc(50% - 1.5 * var(--cm) - var(--gap) + 6px); right: calc(50% - 1.5 * var(--cm) - var(--gap) + 6px); }
.hueco.rio .hq { color: rgba(255, 90, 74, .85); }
.hq em { font: 800 8.5px/1 var(--display); font-style: normal; padding: 2px 4px 1px; border-radius: 99px; background: var(--brand); color: #FFFFFF; }
.stage[data-forma="ancho"] .hq em { font-size: 10px; }

/* asientos: posición y pila; el rival en azul con su HUD; los que se retiran, apagados */
.seat { position: absolute; z-index: 5; transform: translate(-50%, -50%); width: clamp(56px, 16.5cqw, 76px); height: 36px;
        display: grid; align-content: center; justify-items: center; gap: 1px; border-radius: 10px; background: rgba(10, 8, 8, .92);
        border: 1px solid rgba(244, 238, 228, .16); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); white-space: nowrap; transition: opacity .25s ease; }
.seat .pos { font: 800 11px/1.15 var(--display); letter-spacing: .04em; color: rgba(244, 238, 228, .8); }
.seat .st { font: 800 12.5px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.seat.allin .st { color: var(--brand-ink); font-size: 11.5px; letter-spacing: .04em; }
.seat .hud { font: 800 11px/1.2 var(--display); color: #CFE0FF; }
.seat.izq { left: .8% !important; transform: translate(0, -50%); }
.seat.der { left: auto !important; right: .8%; transform: translate(0, -50%); }
/* quien se retira se apaga: su posición, su pila y su HUD; la placa, el botón del dealer y el cartel de FOLD, no. Tu asiento, entero */
.seat > .pos, .seat > .st, .seat > .hud { transition: opacity .3s ease .08s; }
.seat.fuera:not(.yo) > .pos, .seat.fuera:not(.yo) > .st, .seat.fuera:not(.yo) > .hud { opacity: .4; }
.seat.yo.fuera { opacity: .45; }
.seat.vil { width: clamp(64px, 19cqw, 98px); height: 52px; border: 2px solid #9DBDFF; cursor: pointer;
            box-shadow: 0 0 0 1px rgba(157, 189, 255, .2), 0 0 16px rgba(157, 189, 255, .28), 0 4px 12px rgba(0, 0, 0, .45); }
.seat.vil .pos { padding: 1px 6px; border-radius: 5px; background: #9DBDFF; color: #0B1220; }
.seat.vil .st { font-size: 13.5px; }
.seat.yo { width: auto; height: 26px; display: flex; align-items: center; gap: 7px; padding: 0 10px 0 3px; border-radius: 999px; z-index: 8;
           border-color: rgba(255, 90, 74, .75); box-shadow: 0 0 0 1px rgba(225, 6, 0, .25), 0 0 16px rgba(225, 6, 0, .3), 0 4px 12px rgba(0, 0, 0, .45); }
.seat.yo .pos { padding: 4px 8px; border-radius: 999px; background: var(--brand); color: #FFFFFF; letter-spacing: .05em; }
.seat.yo .st { font-size: 13.5px; }
/* la etiqueta de la última acción (FOLD, CHECK, CALL, RAISE…) encima de la placa; en los asientos de arriba, debajo */
.seat .acc { position: absolute; left: 50%; top: 0; transform: translate(-50%, -82%); padding: 2px 6px; border-radius: 5px; font: 800 10px/1.25 var(--display);
             letter-spacing: .06em; white-space: nowrap; opacity: 0; z-index: 2; }
.seat.sl4 .acc { left: auto; right: 100%; top: 50%; transform: translate(-6px, -50%); }
.seat.yo .acc { left: 100%; top: 50%; transform: translate(6px, -50%); }
.seat .acc.fold { background: #4D5159; color: #E6E9EE; z-index: 0; } /* debajo de sus cartas: se ve al irse ellas, no las tapa */
.seat .acc.pasiva { background: #F4EEE4; color: #120C02; }
.seat .acc.agresiva { background: var(--brand); color: #FFFFFF; }
/* quién habla ahora: su placa se enciende, quieta, como en los clientes, y debajo corre su reloj (pensar, en app.js).
   Tu asiento: crema y quieto mientras juega Dorrego; rojo y latiendo solo cuando decides tú */
.seat::after { content: ""; position: absolute; inset: -3px; border-radius: 12px; border: 2px solid rgba(244, 242, 236, .9); pointer-events: none;
               box-shadow: 0 0 12px rgba(244, 242, 236, .2); opacity: 0; transition: opacity .15s ease; }
.seat.habla::after { opacity: 1; transition-duration: .1s; }
.seat.vil::after { inset: -4px; }
.seat.yo::after { inset: -5px; border-radius: 999px; border-color: var(--brand-ink); box-shadow: none; transition: none; }
.seat.yo.habla.auto::after { border-color: rgba(244, 242, 236, .9); }
.seat.yo.turno::after { animation: latido 1s ease-out infinite; }
@keyframes latido { from { transform: scale(1); opacity: .9; } to { transform: scale(1.14); opacity: 0; } }
/* la insignia de tu asiento, a su izquierda: «JUEGA DORREGO» (o «DORREGO» si no cabe) hasta el river; en tu turno, «● TE TOCA».
   La primera vez, encima, el bocadillo «Este call / es de Dorrego» */
.piloto { position: absolute; right: 100%; top: 50%; transform: translate(-5px, -50%); perspective: 300px; pointer-events: none; }
.pl-in { display: block; height: 20px; padding: 0 7px; border-radius: 999px; background: #1C1718; border: 1px solid rgba(244, 242, 236, .35);
         font: 800 9.5px/18px var(--display); letter-spacing: .05em; color: var(--ink); white-space: nowrap; opacity: 0; }
.pl-a { display: inline-flex; align-items: center; gap: 4px; }
.pl-b { display: none; }
.pl-b i { font-style: normal; display: inline-block; animation: punto .9s ease-in-out infinite alternate; }
.piloto.toca .pl-in { background: var(--brand); border-color: var(--brand); color: #FFFFFF; }
.piloto.toca .pl-a { display: none; }
.piloto.toca .pl-b { display: inline; }
.piloto.corta .pl-largo { display: none; }
.pl-logo { display: none; width: 11px; height: 16px; overflow: visible; }
.pl-nota { position: absolute; right: 0; bottom: -3px; display: grid; gap: 1px; padding: 4px 8px 5px; border-radius: 9px; background: #1C1718;
           border: 1.5px solid rgba(244, 242, 236, .6); box-shadow: 0 6px 16px rgba(0, 0, 0, .5); white-space: nowrap; opacity: 0; transform-origin: 100% 100%; }
.pl-nota b { font: 800 11px/1.2 var(--display); color: var(--ink); }
.pl-nota span { font: 800 11px/1.2 var(--body); color: rgba(244, 242, 236, .85); }
.stage[data-forma="ancho"] .pl-in { height: 24px; padding: 0 9px; font-size: 11px; line-height: 22px; }
.stage[data-forma="ancho"] .pl-logo { display: block; }
.stage[data-forma="ancho"] .pl-nota b, .stage[data-forma="ancho"] .pl-nota span { font-size: 13px; }
/* el botón del dealer va pegado a la placa del BTN, así nunca choca con nada */
.btn-d { position: absolute; z-index: 3; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 800 10px/1 var(--display); font-style: normal;
         background: #F4F2EC; color: #111; box-shadow: 0 2px 5px rgba(0, 0, 0, .6), inset 0 -2px 0 rgba(0, 0, 0, .18); right: -8px; top: -8px; }
.sl2 .btn-d { right: auto; left: 2px; top: auto; bottom: -21px; }
.sl6 .btn-d { right: 2px; top: auto; bottom: -21px; }
.sl4 .btn-d { right: auto; left: calc(100% + 5px); top: 50%; margin-top: -9px; }
.sl5 .btn-d, .sl7 .btn-d { right: auto; left: -8px; }
.sl0 .btn-d { right: auto; left: calc(100% + 5px); top: 50%; margin-top: -9px; }
/* sus dos cartas tapadas, pequeñas y solo con CSS, al lado de la placa mientras siga en la mano */
.tapadas { position: absolute; z-index: 1; display: flex; pointer-events: none; }
.tapadas i { display: block; width: 11px; height: 15px; border-radius: 2px; border: 1px solid #F4EEE4; background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
          box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.tapadas i:first-child { transform: rotate(-6deg); }
.tapadas i:last-child { transform: rotate(6deg); margin-left: -4px; }
.sl1 .tapadas, .sl3 .tapadas { left: 100%; top: 50%; margin: -8px 0 0 -3px; }
.sl2 .tapadas, .sl6 .tapadas { left: 50%; bottom: 100%; margin: 0 0 -4px -9px; }
.sl4 .tapadas, .sl5 .tapadas, .sl7 .tapadas { right: 100%; top: 50%; margin: -8px -3px 0 0; }

/* la ficha del rival: su lectura y su HUD (perfil tipo) al tocar su asiento */
.ficha-rival { position: absolute; z-index: 20; width: min(250px, 78cqw); padding: 10px 12px 11px; border-radius: 12px; background: rgba(9, 12, 20, .96);
               border: 1.5px solid #9DBDFF; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); font: 700 12px/1.4 var(--body); color: var(--muted); }
.ficha-rival b { color: #CFE0FF; font: 800 12.5px/1.3 var(--display); }
.ficha-rival p { margin: 0 0 6px; color: var(--ink); }
.ficha-rival dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; }
.ficha-rival dt { margin: 0; }
.ficha-rival dd { margin: 0; color: var(--ink); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.ficha-rival small { display: block; margin-top: 6px; font-size: 11px; color: var(--dim); }

/* cartas (las coloca GSAP; no llevan transform en el CSS) */
.card { position: absolute; z-index: 6; aspect-ratio: 5 / 7; perspective: 700px; }
.card.bd { width: var(--cm); }
.card.mine { width: var(--cy); z-index: 7; }
.card .in { position: absolute; inset: 0; transform-style: preserve-3d; }
.card.abierta .in { transform: rotateY(180deg); }
.card .f, .card .b { position: absolute; inset: 0; border-radius: 9%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* cara: cartulina cálida y filete rojo de PokerMaster, baraja de 4 colores (manual de marca, 08/11). Pequeña (la mesa en el
   móvil): índice gigante de cliente, el valor arriba y el palo abajo. Mediana y grande: índice, y valor y palo en el centro.
   Los palos van limpios, sin logo dentro; en los ases, el palo grande solo */
.card .f { overflow: hidden; container-type: inline-size; transform: rotateY(180deg);
           background: radial-gradient(120% 90% at 30% 20%, #FFFFFF 0%, #FBF9F4 55%, #EFE9DE 100%);
           box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 0 0 max(1px, .9cqw) rgba(0, 0, 0, .07); }
.card .f::before { content: ""; position: absolute; inset: 4.5%; border-radius: 7%; border: max(1px, 1.3cqw) solid rgba(225, 6, 0, .42); }
.card .f::after { content: ""; position: absolute; inset: 0; background: linear-gradient(128deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 38%); pointer-events: none; }
.card .f i { font-style: normal; line-height: 1; }
.card .f svg.pal { display: block; width: .78em; height: .78em; overflow: visible; fill: currentColor; }
.card .f .ix { position: absolute; z-index: 1; left: 9%; top: 5%; font: 800 56cqw/.86 var(--display); letter-spacing: -0.06em; }
.card .f.ancha .ix { font-size: 45cqw; letter-spacing: -0.1em; }
.card .f .ix i, .card .f .cen { display: none; }
.card .f .pj { position: absolute; z-index: 1; right: 9%; bottom: 6%; font-size: 48cqw; }
@container (min-width: 56px) {
  .card .f .ix { left: 11%; top: 8%; display: grid; justify-items: center; font-size: 21cqw; line-height: .9; letter-spacing: -0.06em; }
  .card .f.ancha .ix { font-size: 20cqw; letter-spacing: -0.08em; }
  .card .f .ix i { display: block; font-size: 16cqw; margin-top: 1.5cqw; }
  .card .f .pj { display: none; }
  .card .f .cen { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; }
  .card .f .cen b { font: 800 44cqw/.88 var(--display); letter-spacing: -0.06em; }
  .card .f.ancha .cen b { font-size: 37cqw; letter-spacing: -0.09em; }
  .card .f .cen > i { position: relative; font-size: 32cqw; margin-top: 1.5cqw; }
  .card .f.as .cen b { display: none; }
  .card .f.as .cen > i { font-size: 62cqw; margin: 0; }
}
/* dorso (manual de marca, 05 Vídeo/dorso-carta): degradado de rojo a rojo oscuro con una trama diagonal fina, un filete crema
   por dentro y la marca sobre rojo en el centro: todo #161616 y el ojo crema */
.card .b { display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); container-type: inline-size;
           background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 5px),
                       linear-gradient(170deg, var(--brand) 0%, var(--brand-dark) 100%); }
.card .b::before { content: ""; position: absolute; inset: 4%; border-radius: 6%; border: max(1px, .5cqw) solid rgba(244, 242, 236, .75); }
.card .b .dorso-s { position: relative; z-index: 1; width: 44%; aspect-ratio: 132.43 / 185.91; overflow: visible;
                   --m-ojo: #F4F2EC; --m-pupila: #161616; --m-p: #161616; --m-sombrero: #161616; }
.h { color: var(--s-h); } .d { color: var(--s-d); } .c { color: var(--s-c); } .s { color: var(--s-s); }

/* tacos de fichas de PokerMaster delante de cada jugador, con la cantidad al lado */
.taco { position: absolute; z-index: 7; display: flex; align-items: center; gap: 3px; pointer-events: none; --fw: 17px; }
.stage[data-forma="ancho"] .taco { --fw: clamp(17px, 2.2cqw, 26px); }
.taco.mio { z-index: 12; }
.pilas { display: flex; gap: 1px; }
.pila { position: relative; width: var(--fw); height: calc(var(--fw) * .8 + (var(--n) - 1) * 2.5px); }
.ficha { position: absolute; left: 0; bottom: calc(var(--i) * 2.5px); display: block; width: 100%; aspect-ratio: 100 / 80; background: var(--ficha) center / 100% 100% no-repeat; }
.etq { font: 800 11px/1 var(--display); color: #120C02; background: var(--amber); white-space: nowrap; font-variant-numeric: tabular-nums;
       padding: 3px 6px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.etq small { font-size: 10px; opacity: .72; }
.stage[data-forma="ancho"] .etq { font-size: clamp(11px, 1.3cqw, 14px); }
.taco.mio .etq.tuya { background: var(--brand); color: #FFFFFF; }

/* el rótulo de cada calle, debajo del board (nunca encima): la calle en grande y el carril PRE · FLOP · TURN · RIVER·TÚ por el que
   corre la luz roja. En la mano 1 de la primera visita enseña el plan («JUEGA DORREGO» hasta el turn, «DECIDES TÚ» en el river);
   en el river, una frase. Con .dos (móviles altos), la calle arriba y el carril debajo; si no, en una fila */
.rotulo { position: absolute; left: 50%; top: 0; z-index: 11; width: min(320px, 92cqw); display: grid; gap: 3px; padding: 5px 10px;
          border-radius: 12px; border: 1px solid rgba(255, 90, 74, .45); background: linear-gradient(180deg, rgba(18, 11, 12, .96), rgba(8, 5, 6, .96));
          box-shadow: 0 8px 22px rgba(0, 0, 0, .55); pointer-events: none; opacity: 0; }
.rotulo.vivo { will-change: transform, opacity; }
.rotulo.dos { width: max(200px, min(290px, 84cqw, var(--libre, 290px))); padding: 7px 12px 8px; }
.stage.bajo .rotulo { padding: 3px 10px; }
.r-filo { position: absolute; left: 14px; right: 14px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
.r-k { display: none; font: 800 10px/1.2 var(--display); letter-spacing: .18em; color: var(--brand-ink); text-align: center; }
.rotulo.plan .r-k { display: block; }
.stage.bajo .rotulo .r-k { display: none; }
.r-fila { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.rotulo.dos .r-fila { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; }
.r-calle { font: 800 17px/1 var(--display); letter-spacing: .1em; color: var(--ink); white-space: nowrap; }
.rotulo.dos .r-calle { font-size: 26px; letter-spacing: .14em; margin-right: -.14em; }
.r-calle span { display: inline-block; }
.r-mapa { width: 100%; min-width: 0; display: grid; gap: 3px; }
.r-carril { display: grid; grid-template-columns: 1fr 1fr 1fr 1.35fr; height: 18px; border-radius: 5px;
            background: rgba(244, 238, 228, .06); box-shadow: inset 0 0 0 1px rgba(244, 238, 228, .14); }
.rotulo.dos .r-carril { height: 17px; }
.r-carril > span { position: relative; display: grid; place-items: center; font: 800 9.5px/1 var(--display); letter-spacing: .06em;
                   color: rgba(244, 238, 228, .45); border-right: 2px solid #0D0809; }
.rotulo.dos .r-carril > span { font-size: 10px; }
.r-carril > span:last-child { border-right: 0; border-radius: 0 5px 5px 0; box-shadow: inset 0 0 0 1px rgba(255, 90, 74, .5); }
.r-carril s { position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: left center; }
.r-carril > span:first-child s { border-radius: 5px 0 0 5px; }
.r-carril > span:last-child s { border-radius: 0 5px 5px 0; }
.r-carril b { position: relative; font: inherit; }
.r-carril > span.hecha { color: rgba(244, 238, 228, .8); background: rgba(244, 238, 228, .08); }
.r-carril > span.ahora { color: #FFFFFF; }
.r-carril em { position: absolute; top: -8px; right: -5px; z-index: 2; font: 800 8.5px/1 var(--display); font-style: normal;
               padding: 2px 4px 1px; border-radius: 99px; background: var(--brand); color: #FFFFFF; box-shadow: 0 0 0 1.5px #0D0809; }
.r-plan { display: none; grid-template-columns: 3fr 1.35fr; font: 800 9px/1 var(--display); letter-spacing: .04em; }
.rotulo.plan .r-plan { display: grid; }
.rotulo.dos .r-plan { font-size: 9.5px; }
.r-dg, .r-tu { position: relative; padding-top: 6px; text-align: center; white-space: nowrap; }
.r-dg { color: rgba(244, 242, 236, .85); }
.r-dg b { font: inherit; }
.r-dg i { position: absolute; left: 4px; right: 4px; top: 1px; height: 1.5px; background: rgba(244, 242, 236, .5); transform-origin: left center; }
.r-dg i::before, .r-dg i::after { content: ""; position: absolute; top: 0; width: 1.5px; height: 4px; background: inherit; }
.r-dg i::before { left: 0; }
.r-dg i::after { right: 0; }
.r-tu { margin: 0 2px; padding-top: 4px; border-top: 2px solid var(--brand-ink); color: var(--brand-ink); }
.r-sub { display: none; margin: 1px 0 0; text-align: center; font: 800 11.5px/1.25 var(--body); color: rgba(244, 242, 236, .92); }
.r-sub b { color: var(--brand-ink); }
.rotulo.con-sub .r-sub { display: block; }
.stage[data-forma="ancho"] .rotulo { width: min(560px, 64cqw); padding: 9px 16px; gap: 5px; }
.stage[data-forma="ancho"] .r-calle { font-size: clamp(24px, 3.3cqw, 34px); }
.stage[data-forma="ancho"] .r-carril { height: 26px; }
.stage[data-forma="ancho"] .r-carril > span { font-size: 12.5px; }
.stage[data-forma="ancho"] .r-carril em { font-size: 10px; }
.stage[data-forma="ancho"] .r-k { font-size: 12px; }
.stage[data-forma="ancho"] .r-plan { font-size: 11.5px; }
.stage[data-forma="ancho"] .r-sub { font-size: 14px; }
/* el aviso de pausa, el velo, el grito, la onda, los golpes y el destello */
.pista { position: absolute; left: 50%; top: 62%; z-index: 16; transform: translate(-50%, -50%); padding: 7px 12px; border-radius: 999px; background: rgba(8, 5, 6, .9);
         border: 1px solid rgba(244, 242, 236, .3); font: 800 12px/1 var(--display); letter-spacing: .04em; color: var(--ink); white-space: nowrap; pointer-events: none; opacity: 0; }
.velo { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; background: radial-gradient(75% 60% at 50% 70%, rgba(5, 3, 3, .25) 0%, rgba(5, 3, 3, .62) 100%); }
.destello { position: absolute; inset: 0; z-index: 14; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 62%, rgba(255, 70, 50, .5) 0%, rgba(225, 6, 0, .18) 55%, rgba(225, 6, 0, 0) 80%); }
.onda { position: absolute; z-index: 13; width: min(26cqw, 30cqh); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
        border: 3px solid var(--brand-ink); box-shadow: 0 0 12px var(--brand), inset 0 0 12px var(--brand); }
.golpe { position: absolute; z-index: 13; width: min(20cqw, 24cqh); aspect-ratio: 1; border-radius: 50%; pointer-events: none; border: 2.5px solid rgba(244, 242, 236, .85); }
.grito { position: absolute; left: 50%; z-index: 15; width: 96%; display: grid; justify-items: center; gap: 6px; text-align: center; pointer-events: none; opacity: 0; }
.grito b { font: 800 38px/1 var(--display); letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); text-shadow: 0 3px 16px rgba(0, 0, 0, .75); }
.grito b span { display: inline-block; }
.grito b .u { font-size: .42em; margin-left: .15em; color: rgba(244, 242, 236, .75); }
.grito .raya { display: block; width: min(30cqw, 150px); height: 3px; border-radius: 99px; background: var(--brand); transform-origin: left center; }
.grito small { max-width: 92%; font: 700 13.5px/1.3 var(--body); color: rgba(244, 242, 236, .96); text-shadow: 0 1px 10px rgba(0, 0, 0, .9); text-wrap: balance; }
.grito small em { font-style: normal; color: var(--amber); font-weight: 800; }
.grito.gana b { color: var(--amber); }
.grito.fuego b { color: #FF2F22; text-shadow: 0 0 18px rgba(225, 6, 0, .85), 0 3px 14px rgba(0, 0, 0, .6); }
.stage[data-forma="ancho"] .grito b { font-size: clamp(38px, 5.6cqw, 64px); }
.stage[data-forma="ancho"] .grito small { font-size: clamp(14px, 1.6cqw, 18px); }

/* ── debajo de la mesa: historial, franja y mando, de alto fijo ── */
.lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }

/* el historial: una fila por calle; las calles que faltan se ven desde el principio, vacías */
.historial { position: relative; height: 101px; padding: 5px 8px; border-radius: 12px; border: 1px solid var(--line); background: #0F0C0D;
             overflow: hidden; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 3px; contain: layout paint; }
.h-fila { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 7px; height: 20px; }
.h-fila.pre { grid-template-columns: auto minmax(0, 1fr); }
.h-fila .lbl { font: 800 10px/1 var(--display); letter-spacing: .1em; color: rgba(244, 238, 228, .55); padding-left: 2px; }
.h-pill { display: flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 6px; border: 1px solid rgba(244, 238, 228, .14); background: #1C1718; }
.h-pill b { font: 800 10px/1 var(--display); letter-spacing: .1em; color: rgba(244, 238, 228, .8); }
.h-pill em { margin-left: auto; font: 800 11px/1 var(--display); font-style: normal; color: var(--amber); font-variant-numeric: tabular-nums; }
.h-fila.act .h-pill { background: var(--brand); border-color: var(--brand); }
.h-fila.act .h-pill b, .h-fila.act .h-pill em { color: #FFFFFF; }
.h-fila.fut .h-pill { background: transparent; }
.h-fila.fut .h-pill b { color: rgba(244, 238, 228, .38); }
.h-fila.fut .mc, .h-fila.fut .h-pill em { visibility: hidden; }
.h-acc { min-width: 0; font: 700 11.5px/1.3 var(--body); color: rgba(244, 242, 236, .92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc { display: inline-grid; place-items: center; min-width: 15px; height: 16px; padding: 0 2px; border-radius: 3px; background: #FBF9F4;
      font: 800 10px/1 var(--display); letter-spacing: -0.04em; }
.tk { white-space: nowrap; transition: opacity .25s ease; }
.tk .p { font: 800 11.5px/1 var(--display); color: rgba(244, 238, 228, .62); }
.tk.h .p { color: var(--brand-ink); }
.tk.v .p { color: var(--blue); }
.tk .pc { color: rgba(255, 194, 92, .9); }
.tk.f { color: rgba(244, 242, 236, .5); }
.tk.f .ct { display: none; }
.h-fila.cuenta .tk.f .lg { display: none; }
.h-fila.cuenta .tk.f .ct { display: inline; }
.h-fila.corta .tk:not(:last-child) .pc { display: none; }
.tk.tu { padding: 0 4px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--brand-ink); color: var(--brand-ink); font-weight: 800; }
.tk.ahora { text-decoration: underline 2px var(--brand-ink); text-underline-offset: 3px; }
.sep { margin: 0 4px; color: rgba(244, 238, 228, .3); transition: opacity .25s ease; }
.h-acc .tkoff { opacity: 0; }
@container (max-width: 340px) { .h-fila { grid-template-columns: 82px minmax(0, 1fr); } .h-pill { padding: 0 4px; } .h-pill .mc { display: none; } .h-acc, .tk .p { font-size: 11px; } }
/* la franja: qué pasa ahora. Línea 1: la calle y la lectura del rival (hasta dos líneas). Línea 2: las cifras del momento */
.franja { height: 50px; display: grid; align-content: center; gap: 1px; padding: 0 2px; }
.franja p { margin: 0; }
.f1 { font: 700 12px/1.35 var(--body); color: #D6E4FF; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.f2 { font: 700 13px/1.35 var(--body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.franja b { color: var(--ink); font-weight: 800; }
.franja em { font-style: normal; color: var(--amber); font-weight: 800; }
.franja .rv { color: var(--blue); font-weight: 800; }
.franja .tag { display: inline-block; margin-right: 6px; padding: 2px 6px 2px; border-radius: 5px; background: #2A2223; color: var(--ink);
               font: 800 10px/1.3 var(--display); letter-spacing: .1em; vertical-align: 1px; }
.franja .tag.toca { background: var(--brand); color: #FFFFFF; }
.franja .tag.toca i { font-style: normal; display: inline-block; animation: punto .9s ease-in-out infinite alternate; }
.franja .tag.ok { background: var(--ink); color: #0A0A0A; }
.franja .mc { vertical-align: -3px; }
@keyframes punto { from { opacity: .35; } to { opacity: 1; } }

/* el mando: tres capas en el mismo hueco (durante la mano, la calle y el registro de tus jugadas; la decisión; «Cambiar · Siguiente») */
.mando { position: relative; height: 72px; }
.capa { position: absolute; inset: 0; visibility: hidden; }
.linea { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px; }
.pasos-calle { display: grid; align-content: center; gap: 6px; min-width: 0; }
.pc-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.pc-fila i { position: relative; padding: 6px 0 5px; border-radius: 5px; text-align: center; font: 800 9.5px/1 var(--display); font-style: normal; letter-spacing: .05em;
             color: rgba(244, 238, 228, .42); background: rgba(244, 238, 228, .05); border: 1px solid rgba(244, 238, 228, .12); }
.pc-fila i.hecha { color: rgba(244, 238, 228, .78); background: rgba(244, 238, 228, .12); }
.pc-fila i.ahora { color: #FFFFFF; border-color: var(--brand); }
/* la calle de ahora se llena de rojo de izquierda a derecha (el eco del rótulo); el RIVER lleva siempre su punto rojo: ahí decides tú */
.pc-fila i span { position: relative; }
.pc-fila i s { position: absolute; inset: -1px; border-radius: 5px; background: var(--brand); transform: scaleX(0); transform-origin: left center; }
.pc-fila i[data-c="river"]::after { content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%;
                                    background: var(--brand-ink); box-shadow: 0 0 0 2px var(--bg); }
/* el aro del mando: sale una sola vez cuando el TE TOCA se convierte en tus botones */
.mando-aro { position: absolute; inset: -4px; z-index: 2; border-radius: 15px; border: 2px solid var(--brand-ink);
             box-shadow: 0 0 16px rgba(225, 6, 0, .45); opacity: 0; pointer-events: none; }
.pasos-calle small { font: 700 11px/1.25 var(--body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* tu jugada automática, con la misma pinta que los botones de la decisión: así se ve que es tuya y que ahí decidirás */
.tu-jugada { --c: 244 238 228; min-width: 0; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 0 6px; border-radius: 12px;
             border: 2px solid rgb(var(--c) / .72); background: linear-gradient(180deg, rgb(var(--c) / .2) 0%, rgb(var(--c) / .07) 100%), #120E0F; }
.tu-jugada.agresiva { --c: 255 90 74; }
.tu-jugada small { font: 800 9.5px/1.1 var(--display); letter-spacing: .1em; color: rgba(244, 242, 236, .6); white-space: nowrap; }
.tu-jugada b { max-width: 100%; font: 800 17px/1.1 var(--display); color: rgb(var(--c)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tu-jugada em { font: 700 10.5px/1.1 var(--body); font-style: normal; color: rgba(244, 242, 236, .7); white-space: nowrap; }
.tu-jugada em:empty { display: none; }
.tu-jugada.vacia { border-style: dashed; border-color: rgba(244, 238, 228, .2); background: transparent; }
.tu-jugada.vacia b { font-size: 13px; color: var(--dim); }

/* los botones de la decisión: misma forma, tamaño y entrada para todos; solo cambia el color de la familia
   (fold gris acero, check y call crema, bet, raise y all-in rojo), para que ninguno parezca el recomendado */
.opts { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; perspective: 400px; }
.opt { --c: 244 238 228; position: relative; overflow: hidden; min-width: 0; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 4px 2px 6px;
       border: 2px solid rgb(var(--c) / .82); border-radius: 12px; color: var(--ink); cursor: pointer;
       background: linear-gradient(180deg, rgb(var(--c) / .2) 0%, rgb(var(--c) / .07) 100%), #120E0F;
       box-shadow: 0 3px 0 rgb(var(--c) / .32), inset 0 1px 0 rgba(255, 255, 255, .14); }
.opt.fold { --c: 195 203 216; }
.opt.pasiva { --c: 244 238 228; border-color: rgb(var(--c) / .72); }
.opt.agresiva { --c: 255 90 74; }
.opt .v { font: 800 14px/1 var(--display); letter-spacing: .06em; color: rgb(var(--c)); }
.opt .n { font: 800 24px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt .n small { margin-left: 2px; font-size: 9.5px; letter-spacing: 0; color: rgba(244, 242, 236, .62); }
.opt .m { font: 700 11.5px/1.1 var(--body); color: rgba(244, 242, 236, .72); white-space: nowrap; }
.opt.solo .v { font-size: 20px; letter-spacing: .04em; }
.opt .brillo2 { position: absolute; top: -10%; bottom: -10%; left: 0; width: 46%; pointer-events: none; opacity: 0;
                background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, 0) 100%); }
.opt .tecla { position: absolute; top: 3px; right: 5px; font: 800 9.5px/1 var(--display); color: rgba(244, 242, 236, .4); display: none; }
.opt:disabled { cursor: default; }
.opts.armando .opt { pointer-events: none; }
.opt:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 rgb(var(--c) / .32), inset 0 1px 0 rgba(255, 255, 255, .14); }
.opt.elegida { background: rgb(var(--c)); }
.opt.elegida .v, .opt.elegida .n, .opt.elegida .n small, .opt.elegida .m { color: #0A0A0A; }
/* lo que elegiste antes de pulsar «Cambiar»: marca neutra, sin decir si estaba bien */
.opt.antes::after { content: ""; position: absolute; inset: 3px; border-radius: 8px; border: 1.5px dashed rgba(244, 242, 236, .7); pointer-events: none; }
.opt.antes::before { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: rgba(244, 242, 236, .85); }
@media (hover: hover) { .opt:not(:disabled):hover { border-color: rgb(var(--c)); } }

.guardado { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.guardado .btn-rojo, .guardado .btn-borde { width: 100%; min-height: 0; height: 100%; padding: 0 12px; font-size: 16px; }

/* el historial completo: una hoja que sube desde abajo, como el «hand history» de un cliente */
.hoja { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; }
.hoja-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
.hoja-caja { position: relative; width: 100%; max-width: 640px; max-height: 85vh; max-height: 85dvh; margin: 0 auto; display: grid; grid-template-rows: auto minmax(0, 1fr);
             border-radius: 18px 18px 0 0; background: #0F0C0D; border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .6); }
.hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.hoja-cab b { font: 800 14px/1.2 var(--display); letter-spacing: .06em; }
.hoja-cab .cab-btn { width: 44px; height: 36px; }
.hoja-texto { overflow: auto; padding: 8px 16px max(22px, env(safe-area-inset-bottom, 0px)); font: 600 14px/1.55 var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.hoja-texto h3 { margin: 14px 0 3px; font: 800 12px/1.3 var(--display); letter-spacing: .1em; color: var(--brand-ink); }
.hoja-texto p { margin: 0; }
.hoja-texto b { color: var(--ink); }
.hoja-texto .rv { color: var(--blue); font-weight: 800; }
.hoja-texto .yo { color: var(--brand-ink); font-weight: 800; }
.hoja-texto em { font-style: normal; color: var(--amber); font-weight: 800; }
.hoja-texto .nota-r { margin-top: 14px; font-size: 12.5px; color: var(--dim); }

/* móvil girado: la mano se juega en vertical */
.gira { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .gira { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: var(--bg); text-align: center;
          font: 800 20px/1.3 var(--display); color: var(--ink); }
}

/* móviles bajos (375 × 548 y parecidos) */
@media (max-height: 600px) {
  .mano { gap: 4px; padding-block: max(6px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-bottom, 0px)); }
  .cab-fila { height: 24px; }
  .cab-btn { height: 24px; }
  .cuerpo, .lateral { gap: 4px; }
  .historial { height: 88px; padding: 4px 8px; gap: 2px; }
  .h-fila, .h-pill { height: 18px; }
  .seat { height: 34px; }
  .seat.vil { height: 50px; }
  .franja { height: 46px; }
  .f1 { font-size: 11.5px; line-height: 1.25; }
  .f2 { line-height: 1.25; }
  .f2 { font-size: 12px; }
  .mando { height: 62px; }
  .opt .v { font-size: 13px; }
  .opt .n { font-size: 21px; }
  .opt .m { font-size: 10.5px; }
  .opt.solo .v { font-size: 18px; }
  .grito b { font-size: 32px; }
}
/* móviles estrechos (360 px y parecidos): sin «bb» dentro de los botones para que quepan cinco */
@media (max-width: 380px) { .cab-torneo .mx { display: none; } }
@media (max-width: 370px) {
  .opt .n small { display: none; }
  .f1 { font-size: 11px; }
  .f2 { font-size: 11.5px; }
  .cab-torneo { font-size: 11.5px; }
}
/* móviles altos (390 × 844 y más): todo un poco más grande abajo */
@media (max-width: 719px) and (min-height: 740px) {
  .historial { height: 122px; gap: 5px; padding: 7px 9px; }
  .h-fila, .h-pill { height: 23.5px; }
  .h-fila { grid-template-columns: 90px minmax(0, 1fr); }
  .h-acc, .tk .p { font-size: 12px; }
  .franja { height: 54px; }
  .mando { height: 82px; }
}

/* pantalla ancha (ordenador): la mesa a la izquierda; el historial, a la derecha; franja y mando, debajo de la mesa */
@media (min-width: 1024px) and (min-height: 640px) {
  .mano { max-width: 1320px; gap: 12px; padding: 18px 28px; grid-template-rows: 46px minmax(0, 1fr); }
  .cab { align-content: center; gap: 6px; }
  .cab-fila { height: 34px; gap: 12px; }
  .cab-mano { font-size: 13px; }
  .cab-torneo { font-size: 14px; }
  .cab-ef { font-size: 12px; padding: 7px 10px; }
  .cab-ef b { font-size: 14px; }
  .cab-btn { width: 44px; height: 34px; }
  .cuerpo { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr) auto auto; column-gap: 18px; row-gap: 10px; }
  .lateral { display: contents; }
  .zona-mesa { grid-column: 1; grid-row: 1; place-items: center; }
  .stage { width: min(100cqw, 177.8cqh); height: min(100cqh, 56.25cqw); }
  .historial { grid-column: 2; grid-row: 1 / 4; height: auto; padding: 14px 14px; gap: 14px; align-content: start; }
  .h-fila, .h-fila.pre { grid-template-columns: minmax(0, 1fr); height: auto; gap: 6px; }
  .h-fila .lbl { font-size: 11px; }
  .h-pill { height: 26px; justify-self: stretch; }
  .h-pill b { font-size: 11.5px; }
  .h-pill em { font-size: 13px; }
  .mc { min-width: 19px; height: 21px; font-size: 12px; }
  .h-acc { white-space: normal; font-size: 13px; line-height: 1.55; overflow: visible; }
  .h-acc .tk { white-space: nowrap; }
  .tk .p { font-size: 13px; }
  .franja { grid-column: 1; grid-row: 2; height: 52px; }
  .f1 { font-size: 15px; -webkit-line-clamp: 1; }
  .f2 { font-size: 14px; }
  .mando { grid-column: 1; grid-row: 3; height: 84px; width: 100%; max-width: 860px; justify-self: center; }
  .opts { gap: 10px; }
  .opt .v { font-size: 15px; }
  .opt .n { font-size: 29px; }
  .opt .m { font-size: 13px; }
  .opt.solo .v { font-size: 24px; }
  .opt .tecla { display: block; }
  .tu-jugada b { font-size: 20px; }
  .pc-fila i { font-size: 11px; padding: 8px 0 7px; }
  .pasos-calle small { font-size: 12.5px; }
}

/* el reloj de quien piensa, debajo de su placa y separado del aro: sale entero y se vacía a ritmo real (RITMO.reloj); el carril
   de detrás enseña lo que ya ha gastado. En el BTN de la derecha el botón del dealer tapa el final de la barra: allí se vacía
   hacia el otro lado. El tuyo va más pegado, como antes: tu asiento está abajo del todo y en los móviles bajos se saldría de la mesa */
.seat .reloj { position: absolute; left: 7px; right: 7px; bottom: -10px; height: 3px; border-radius: 3px; background: rgba(244, 238, 228, .2); opacity: 0; }
.seat .reloj i { position: absolute; inset: 0; border-radius: inherit; background: #F4F2EC; transform-origin: left center; }
.seat.vil .reloj i { background: #9DBDFF; }
.seat.yo .reloj { bottom: -6px; }
.seat.yo .reloj i { background: var(--brand-ink); }
.seat.sl6:has(> .btn-d) .reloj i { transform-origin: right center; }
/* las cartas del rival cuando se enseñan en el showdown: grandes, que se vean bien desde el móvil */
.card.rv { width: min(17cqw, 22cqh, 96px); z-index: 9; }
/* el resultado de la mano en el asiento: ganas o pierdes */
.seat .neto { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); padding: 2px 7px; border-radius: 6px; font: 800 11px/1.25 var(--display);
              white-space: nowrap; background: var(--amber); color: #120C02; opacity: 0; z-index: 3; }
.seat .neto.pierde { background: #4D5159; color: #E6E9EE; }
.seat.yo .neto { top: auto; bottom: 100%; transform: translate(-50%, -6px); }

/* cuánto apuestas o subes: una hoja que sube desde abajo con la barra, las cantidades rápidas y confirmar */
.tam .tam-caja { position: relative; width: 100%; max-width: 560px; margin: 0 auto; display: grid; gap: 12px;
                 padding: 14px max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-bottom, 0px));
                 border-radius: 18px 18px 0 0; background: #110D0E; border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .6); }
.tam-cab { display: grid; gap: 2px; }
.tam-cab b { font: 800 26px/1.1 var(--display); color: #FF7A6C; font-variant-numeric: tabular-nums; }
.tam-cab small { font: 700 13px/1.35 var(--body); color: var(--muted); }
.tam-barra { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; }
.tam-paso { height: 44px; border: 1.5px solid var(--line); border-radius: 12px; background: #1A1415; color: var(--ink); font: 800 22px/1 var(--display); cursor: pointer; }
.tam-barra input { width: 100%; height: 32px; accent-color: var(--brand); cursor: pointer; }
.tam-presets { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; }
.tam-presets button { height: 40px; border: 1.5px solid rgba(255, 90, 74, .55); border-radius: 10px; background: rgba(225, 6, 0, .1); color: var(--ink);
                      font: 800 13px/1 var(--display); cursor: pointer; font-variant-numeric: tabular-nums; }
.tam-presets button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #FFFFFF; }
.tam-presets button:disabled { opacity: .3; cursor: default; }
.tam-botones { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.tam-botones button { min-height: 52px; height: 52px; padding: 0 12px; font-size: 16px; }
.tam-botones button:disabled { opacity: .4; cursor: default; box-shadow: none; }

/* TE TOCA: el cartel grande de tu turno. Va fuera de la mesa (que recorta), por encima de todo menos las hojas; nace de tu asiento,
   se queda debajo del board (el river, el bote y la apuesta del rival se siguen viendo) y se convierte en el mando entero */
.turno { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.turno.activo { pointer-events: auto; }
.turno-pos { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.turno-aura { position: absolute; inset: -30px; border-radius: 44px; background: radial-gradient(closest-side, rgba(225, 6, 0, .42), rgba(225, 6, 0, 0)); opacity: 0; }
.turno-caja { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 16px 16px; border-radius: 20px; text-align: center; overflow: hidden;
              background: linear-gradient(180deg, #1A0E10 0%, #0C0809 100%); border: 2px solid var(--brand); box-shadow: 0 18px 50px rgba(0, 0, 0, .65); }
.turno-filo { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); }
.turno-k { display: block; font: 800 11px/1.2 var(--display); letter-spacing: .2em; color: var(--brand-ink); }
.turno-t { display: block; font: 800 min(16vw, 62px)/1 var(--display); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.turno-t span { display: inline-block; }
.turno-raya { display: block; width: min(150px, 44%); height: 3px; margin: 2px 0 4px; border-radius: 99px; background: var(--brand); }
.turno-s { margin: 0; font: 800 16px/1.3 var(--body); color: var(--ink); text-wrap: balance; }
.turno-f { margin: 0; font: 700 13.5px/1.35 var(--body); color: var(--muted); text-wrap: balance; }
.turno-f em { font-style: normal; font-weight: 800; color: var(--amber); }
.turno-f .rv { color: var(--blue); font-weight: 800; }
.turno-g { margin: 4px 0 0; display: grid; font: 700 13px/1.35 var(--body); color: rgba(244, 242, 236, .85); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-height: 600px) {
  .turno-caja { padding: 12px 14px 13px; gap: 3px; }
  .turno-t { font-size: 48px; }
  .turno-s { font-size: 15px; }
  .turno-f { font-size: 13px; }
  .turno-g { font-size: 12.5px; }
}
@media (min-width: 1024px) and (min-height: 640px) {
  .turno-caja { padding: 22px 28px 24px; gap: 6px; border-radius: 24px; }
  .turno-k { font-size: 13px; }
  .turno-t { font-size: 96px; }
  .turno-raya { width: 190px; height: 4px; }
  .turno-s { font-size: 20px; }
  .turno-f { font-size: 16px; }
  .turno-g { font-size: 15px; }
}

#acciones:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .seat.yo.turno::after { animation: none; opacity: .9; }
  .franja .tag.toca i, .pl-b i { animation: none; }
}

/* ── 3 · tu perfil ── */
.pronto { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
          padding-block: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px));
          background: radial-gradient(90% 60% at 50% 0%, #1A0D10 0%, var(--bg) 70%); }
.pronto-caja { width: 100%; max-width: 520px; display: grid; gap: 16px; justify-items: start; }
.mini { display: flex; gap: 8px; }
.mini i { position: relative; width: 44px; aspect-ratio: 5 / 7; border-radius: 6px; display: grid; place-items: center; font: 800 15px/1 var(--display); font-style: normal; color: #FFFFFF;
          border: 2px solid #F7F5F0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 5px),
          repeating-linear-gradient(-45deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 5px), linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%); }
.mini i.hecha { background: var(--card); border-color: var(--card); color: #0A0A0A; }
.pronto h1 { margin: 0; font: 800 clamp(34px, 9vw, 54px)/1.02 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.pronto h1:focus { outline: none; } /* el foco llega al título por código, para que el lector de pantalla lo lea */
.lista { display: grid; gap: 8px; width: 100%; }
.lista div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); }
.lista span { color: var(--muted); font-size: 15px; }
.lista span small { display: block; font-size: 12.5px; color: var(--dim); }
.lista b { font: 800 18px/1.1 var(--display); text-align: right; }
.lista b small { display: block; margin-top: 3px; font: 700 12.5px/1 var(--body); color: var(--muted); }
.nota { margin: 0; color: var(--muted); font-size: 16px; }
/* tu perfil: el nombre, cómo juegas y los dos ejes del método (la barra va en rojo si el eje es alto) */
.perfil { display: grid; gap: 8px; }
.perfil-k { margin: 0; font: 700 13px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--brand-ink); }
.perfil-t { margin: 0; font: 700 clamp(17px, 4.6vw, 20px)/1.35 var(--body); text-wrap: balance; }
.ejes { display: grid; gap: 8px; width: 100%; }
.eje { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px 12px; padding: 12px 16px 14px;
       border: 2px solid var(--line); border-radius: 14px; background: var(--panel); }
.eje span { color: var(--muted); font-size: 15px; }
.eje b { font: 800 18px/1.1 var(--display); }
.eje .barra { grid-column: 1 / -1; position: relative; display: block; height: 8px; border-radius: 99px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.eje .barra i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--dim); }
.eje.alto .barra i { background: var(--brand); }
/* la frase de Dorrego al terminar las cinco manos (de la apertura de la masterclass) */
.cita { margin: 4px 0 0; display: grid; gap: 6px; }
.cita p { margin: 0; font: 800 clamp(19px, 5vw, 24px)/1.25 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.cita footer { font: 700 13px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--brand-ink); }

/* ── el email antes del perfil, el resultado, el pie legal y el aviso de cookies ── */
.lead, .resultado { display: grid; gap: 14px; width: 100%; }
.lead h1, .resultado h1 { margin: 0; }
.lead-sub { margin: 0; font: 600 16px/1.45 var(--body); color: var(--muted); }
.campo { display: grid; gap: 6px; font: 800 13px/1 var(--display); letter-spacing: .04em; color: var(--muted); }
.campo input { width: 100%; height: 52px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--ink);
               font: 700 17px/1 var(--body); }
.campo input:focus { outline: none; border-color: var(--brand-ink); }
.casilla { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font: 600 14.5px/1.4 var(--body); color: var(--ink); cursor: pointer; }
.casilla input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.casilla a, .pie a, .pie-mini a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.lead-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(225, 6, 0, .14); border: 1px solid rgba(255, 90, 74, .5); font: 700 14px/1.35 var(--body); color: #FFD9D4; }
.lead .btn-rojo { width: 100%; }
.lead .btn-rojo:disabled { opacity: .6; }
.perfil-f { margin: 0; font: 800 clamp(18px, 4.8vw, 22px)/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.bloque { display: grid; gap: 8px; width: 100%; }
.bloque h2 { margin: 6px 0 0; font: 800 13px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--brand-ink); }
.bloque > p { margin: 0; font: 600 16px/1.45 var(--body); color: var(--ink); }
.lista b em { display: block; margin-top: 4px; font: 800 11px/1 var(--display); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.lista b em.ok { color: var(--brand-ink); }
.lista b em.medio { color: var(--amber); }
.descargas .btn-borde { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.video { display: grid; place-items: center; min-height: 160px; aspect-ratio: 16 / 9; max-width: 100%; padding: 16px; border-radius: 14px; border: 2px dashed var(--line);
         background: radial-gradient(80% 80% at 50% 40%, #1F1012 0%, var(--panel) 100%); text-align: center; }
.video p { margin: 0; max-width: 32ch; font: 600 15px/1.45 var(--body); color: var(--muted); }
.resultado > .btn-rojo, .resultado > .btn-borde { width: 100%; text-decoration: none; }
.mas18 { display: inline-grid; place-items: center; min-width: 30px; height: 22px; margin-right: 4px; padding: 0 5px; border-radius: 6px; border: 1.5px solid currentColor;
         font: 800 11px/1 var(--display); vertical-align: 1px; }
.pie { display: grid; gap: 6px; width: 100%; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); font: 600 13px/1.5 var(--body); color: var(--dim); }
.pie p { margin: 0; }
.enlace { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pie-mini { margin: 0; font: 600 12px/1.45 var(--body); color: var(--dim); }
.cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; gap: 10px; max-width: 560px; margin: 0 auto;
           padding: 14px max(16px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
           border-radius: 16px 16px 0 0; background: #110D0E; border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .6); }
.cookies p { margin: 0; font: 600 14px/1.4 var(--body); color: var(--ink); }
.cookies-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookies-b button { min-height: 48px; height: 48px; padding: 0 12px; font-size: 15px; }
/* las páginas legales */
.legal { max-width: 640px; margin: 0 auto; padding-block: max(32px, env(safe-area-inset-top, 0px)) 40px; display: grid; gap: 16px; }
.legal h1 { margin: 0; font: 800 clamp(30px, 8vw, 44px)/1.05 var(--display); letter-spacing: -0.02em; }
.legal p { margin: 0; font: 600 16px/1.55 var(--body); color: var(--muted); }
.legal .nota-legal { color: var(--amber); }
.legal .btn-borde { display: inline-flex; align-items: center; text-decoration: none; }

/* móvil (Ferran, 09/11): la mesa en vertical y más fácil de leer. Fuera el historial de debajo, la línea de ciegas del tapete
   y el HUD del asiento del rival (sigue en su ficha, al tocarlo). La mesa crece hacia arriba, hasta 1,75 veces su ancho */
@media (max-width: 719px) {
  .historial { display: none; }
  .stage { height: min(100cqh, 175cqw); }
  .tapete { display: none; }
  .seat .hud { display: none; }
  .seat.vil { height: 40px; }
}