/* La partida con el estilo de la mesa (diseno/menu-mesa/README.md). Lo que lo caracteriza:
   - todo anguloso: cartas cortadas como las del menú, marcador y paneles sesgados;
   - sombras duras y atrevidas (7 px, sin difuminar); en bermellón lo que puedes tocar;
   - vivo aunque no juegues: fragmentos de fondo que cambian de forma con el estado y derivan,
     tu mano en abanico que respira, las cartas del centro que flotan, un barrido al cambiar de set;
   - sin espacio muerto: el centro es una mesa que ocupa el hueco y sus cartas crecen hasta llenarla.
   El orden del tablero no cambia (marcador, racha, centro, tus sets). Ver partida.js. */
#gameScreen, #qteOverlay, #verifyOverlay, #gameOverOverlay, #eloChoice, #reconnectOverlay, #verifyNotifications {
    --tinta: #0e0e0e; --hueso: #e9e6da; --salvia: #a9b689; --militar: #4b5320; --acento: #e8402a; --tenue: #a9a9ae;
    --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --golpe: cubic-bezier(.7, 0, .2, 1); --rebote: cubic-bezier(.34, 1.56, .64, 1);
    --sombra: 7px 8px 0 rgb(0 0 0 / 70%);
    /* El acento de agapornis (salvia) pasa a bermellón dentro del tablero */
    --accent: var(--acento); --accent-soft: rgb(232 64 42 / 18%);
}

/* ── Todo el tablero en una pantalla, en cualquier tamaño ─────────────────────── */
#gameScreen.active {
    display: flex; flex-direction: column; height: 100dvh; max-width: 1100px; padding: 10px 12px 12px;
    overflow: hidden; position: relative; isolation: isolate; font-family: var(--sans); background: none;
}
body:has(#gameScreen.active) { background: #060606; }

/* ── Fondo: tres fragmentos que cambian de forma con el estado y derivan solos ─── */
.pfrag { position: fixed; inset: -8%; z-index: -2; pointer-events: none; opacity: .5;
    transition: clip-path 760ms var(--golpe), background-color 600ms; animation: deriva 14s ease-in-out infinite alternate; }
.pfrag::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(0 0 0 / 24%) 1.1px, transparent 1.5px); background-size: 8px 8px; }
.pfrag.f1 { background: var(--militar); clip-path: polygon(0 0, 100% 0, 100% 14%, 45% 22%, 0 17%); }
.pfrag.f2 { background: var(--salvia); clip-path: polygon(0 66%, 30% 62%, 22% 75%, 0 80%, 0 72%); animation-duration: 17s; animation-delay: -5s; }
.pfrag.f3 { background: var(--hueso); clip-path: polygon(0 16.5%, 45% 21.5%, 100% 13.5%, 100% 15%, 0 18.5%); animation-duration: 11s; animation-delay: -3s; }
@keyframes deriva { from { transform: translate(-1.2%, -.6%) rotate(-.6deg); } to { transform: translate(1.2%, .8%) rotate(.6deg); } }
/* Debes una carta: los fragmentos se inclinan hacia el centro y se tiñen */
#gameScreen.owing .pfrag.f1 { clip-path: polygon(0 0, 100% 0, 100% 24%, 55% 18%, 0 26%); background-color: #5a2a1f; }
#gameScreen.owing .pfrag.f3 { clip-path: polygon(0 25.5%, 55% 17.5%, 100% 23.5%, 100% 25%, 0 27%); background: var(--acento); }
/* Aturdido: se cierran y se apagan */
#gameScreen.stunned .pfrag { opacity: .2; }
#gameScreen.stunned .pfrag.f1 { clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 48%, 0 40%); }
/* Racha alta / frenesí listo: se abren y se calientan */
#gameScreen[data-combo-tier="4"] .pfrag.f2, #gameScreen[data-combo-tier="5"] .pfrag.f2, #gameScreen.frenesi .pfrag.f2 {
    clip-path: polygon(0 52%, 60% 45%, 48% 70%, 0 86%, 0 60%); background-color: #f2a33a; }

/* Barrido al cambiar de set o al soltar un frenesí (el mismo golpe que en el menú) */
.pbarrido { position: fixed; inset: -10%; z-index: 40; pointer-events: none; background: var(--tinta, #0e0e0e);
    clip-path: polygon(-30% 0, -10% 0, -40% 100%, -60% 100%); }
.pbarrido::after { content: ""; position: absolute; inset: 0; background: var(--acento, #e8402a); clip-path: polygon(0 0, 3% 0, 1% 100%, -2% 100%); }
.pbarrido.pasa { animation: pbarre 520ms var(--golpe, cubic-bezier(.7, 0, .2, 1)); }
/* Del menú a la partida: la escena sigue a la vista mientras la cámara se lanza al centro (partida.js) */
body.mesa.en-partida.entrando #escenario { display: block; position: fixed; inset: 0; z-index: 30; pointer-events: none; transform-origin: 50% 36%; }

/* ── Luces de fuera de cámara: una lámpara que se mece, el neón de al lado que parpadea y faros que
   cruzan (la sombra de alguien que pasaba se quitó: una franja negra cada 17 s distraía). DETRÁS del juego (z −1: sobre los fragmentos,
   bajo mesa, marcador y cartas); el tapete es algo translúcido y se intuyen sobre la mesa.
   Sin blur ni mix-blend: el borde suave lo da el gradiente, y solo se animan transform y
   opacity (en la GPU, sin repintar). */
.pluz { position: fixed; inset: 0; z-index: -1; pointer-events: none; will-change: transform, opacity; }
.pluz.lampara { background: linear-gradient(115deg, rgb(233 230 218 / 22%), rgb(233 230 218 / 8%) 30%, transparent 55%);
    transform-origin: 18% -20%; animation: mece 9s ease-in-out infinite alternate; }
@keyframes mece { from { rotate: -7deg; opacity: .7; } to { rotate: 6deg; opacity: 1; } }
.pluz.neon { background: linear-gradient(270deg, rgb(232 64 42 / 30%), rgb(232 64 42 / 8%) 18%, transparent 38%);
    animation: neon 7.3s steps(1) infinite; }
@keyframes neon { 0%, 61%, 64%, 66%, 100% { opacity: .55; } 62%, 65% { opacity: .1; } 63% { opacity: .9; } 88% { opacity: .35; } }
.pluz.faros { background: linear-gradient(90deg, transparent 30%, rgb(169 182 137 / 18%) 42%, rgb(233 230 218 / 30%) 50%, rgb(169 182 137 / 18%) 56%, transparent 66%);
    transform: skewX(-22deg); translate: -120% 0; animation: faros 13s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes faros { 0%, 72% { translate: -120% 0; } 100% { translate: 130% 0; } }
/* Una sola luz sobre la mesa: los bordes (fragmentos, faros) se apagan y no compiten. Va
   encima de las otras luces (es la última) y debajo del tablero. Fija, sin filtros. */
.pluz.velo { will-change: auto; background: radial-gradient(ellipse 60% 42% at 50% 46%, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 25%) 55%, rgb(0 0 0 / 75%) 100%); }

@keyframes pbarre { 0% { clip-path: polygon(-30% 0, -10% 0, -40% 100%, -60% 100%); } 48% { clip-path: polygon(-10% 0, 40% 0, 10% 100%, -40% 100%); } 100% { clip-path: polygon(120% 0, 140% 0, 110% 100%, 90% 100%); } }

/* ── Fuera el texto: lo dicen los elementos ─────────────────────────────────── */
#gameScreen #swapHint, #gameScreen .section-label { display: none !important; }
#gameScreen .section-head { min-height: 0; flex-shrink: 0; }

/* ── Marcador: franjas sesgadas con sombra dura ────────────────────────────── */
#gameScreen .hud { flex-shrink: 0; gap: 6px 8px; padding-right: 44px; margin-bottom: 6px; }
#gameScreen .hud-stripe {
    border-radius: 0; border-left: none; background: var(--tinta); color: var(--hueso);
    box-shadow: inset 0 0 0 1px rgb(169 182 137 / 40%); filter: drop-shadow(4px 5px 0 rgb(0 0 0 / 70%));
    transform: skewX(-10deg); font: 800 .72rem var(--sans); transition: background 200ms, transform 300ms var(--rebote);
}
#gameScreen .hud-stripe > * { transform: skewX(10deg); }
#gameScreen .hud-stripe.is-me { background: var(--acento); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
#gameScreen .hud-stripe.is-me .hud-count, #gameScreen .hud-stripe.is-me .hud-name { color: var(--tinta); }
#gameScreen .hud-count { font: 900 1.05rem/1 var(--sans); color: var(--hueso); }
#gameScreen .hud-stripe.on-fire { animation: fuego 700ms ease-in-out infinite alternate; }
@keyframes fuego { to { transform: skewX(-10deg) translateY(-2px); filter: drop-shadow(4px 5px 0 #f2a33a); } }
/* Destello: de quién vino algo (frenesí, la carta que te quitaron) */
#gameScreen .hud-stripe.destello { animation: destello 900ms; }
@keyframes destello { 0%, 40% { background: var(--hueso); color: var(--tinta); transform: skewX(-10deg) scale(1.08); } }
#gameScreen .hud-stripe.mirones .ico { width: 1.1em; height: 1.1em; vertical-align: -.2em; margin-right: 3px; }
#gameScreen #muteBtn { border-radius: 0; background: var(--tinta); color: var(--hueso); box-shadow: inset 0 0 0 1px rgb(169 182 137 / 40%);
    filter: drop-shadow(3px 4px 0 rgb(0 0 0 / 70%)); clip-path: polygon(3px 0, 100% 2px, calc(100% - 3px) 100%, 0 calc(100% - 2px)); }
#gameScreen #muteBtn .ico { width: 18px; height: 18px; }
.ico { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; }

/* ── Racha ─────────────────────────────────────────────────────────────────── */
#gameScreen #statusStrip { flex-shrink: 0; }
#gameScreen #comboMult { font-family: var(--sans); font-weight: 900; font-style: italic; transform: skewX(-10deg); text-shadow: 3px 3px 0 #000; }
#gameScreen .combo-bar, #gameScreen #comboBarFill, #gameScreen #debtBar, #gameScreen #stunBar, #gameScreen #debtBarFill, #gameScreen #stunBarFill { border-radius: 0; }
#gameScreen .combo-bar { transform: skewX(-20deg); }
#gameScreen #frenzyBtn { border-radius: 0; clip-path: polygon(8px 0, 100% 4px, calc(100% - 8px) 100%, 0 calc(100% - 4px)); font-size: 0; padding: 8px 20px;
    animation: frenzyFlow 1.6s linear infinite, latido 600ms ease-in-out infinite alternate; }
@keyframes latido { to { scale: 1.12; } }
#gameScreen #frenzyBtn .ico { width: 24px; height: 24px; stroke-width: 3; color: var(--tinta); }

/* ── Cartas: cortadas como las del menú; la sombra la pone la fila (sigue el corte) ── */
#gameScreen .card { border-radius: 0; box-shadow: none !important; clip-path: polygon(4% 2%, 100% 0, 96% 98%, 0 100%); }
#gameScreen #centerCards, #gameScreen #yourCards { filter: drop-shadow(var(--sombra)); transition: filter 300ms; }
#gameScreen .card.card-empty, #gameScreen .card.center-gap { border: none; background: rgb(233 230 218 / 8%); outline: 2px dashed rgb(233 230 218 / 30%); outline-offset: -6px; }

/* ── El centro: una mesa que ocupa todo el hueco ───────────────────────────── */
#gameScreen #centerCards {
    flex: 1; min-height: 0; overflow: hidden; position: relative; margin: 6px 0 10px; padding: 14px;
    display: grid; grid-template-columns: repeat(var(--cc, 4), var(--cw, 80px)); gap: 12px;
    grid-template-rows: repeat(var(--cf, 2), calc(var(--cw, 80px) / 0.6476));
    justify-content: center; align-content: center;
}
/* El tablero: fieltro oscuro con la luz de la lámpara y el canto salvia (la mesa del menú, desde arriba) */
#gameScreen #centerCards::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    /* Algo translúcido: la lámpara y los faros de fuera (.pluz, detrás) se intuyen sobre la
       mesa. Antes la luz era un --luz animado en el gradiente: repintaba el tapete cada cuadro. */
    background: radial-gradient(ellipse at 50% 40%, rgb(43 49 33 / 86%), rgb(22 26 17 / 88%) 60%, rgb(11 12 9 / 92%));
    box-shadow: inset 0 0 0 2px rgb(169 182 137 / 45%);
    clip-path: polygon(2% 3%, 98% 0, 100% 96%, 1% 100%);
}
#gameScreen #centerCards > .card { width: var(--cw, 80px); }
/* Flotan, cada una a su ritmo */
#gameScreen #centerCards > .card:not(.center-gap) { animation: flota 3.4s ease-in-out infinite alternate; }
#gameScreen #centerCards > .card:nth-child(3n+1) { animation-duration: 2.9s; animation-delay: -1.1s; }
#gameScreen #centerCards > .card:nth-child(3n+2) { animation-duration: 3.8s; animation-delay: -2.3s; }
@keyframes flota { to { translate: 0 -5px; } }
/* Debes una carta: el centro es lo único que se puede tocar → sombras en bermellón y la mesa se enciende */
#gameScreen.owing #centerCards { --sombra: 7px 8px 0 var(--acento); }
#gameScreen.owing #centerCards::before { box-shadow: inset 0 0 0 3px var(--acento), inset 0 0 60px rgb(232 64 42 / 25%); }
#gameScreen.owing #centerCards .card:not(.center-gap) { outline: none; }

/* ── Gravedad: la que cae pesa; las demás saltan en su sitio ──────────────────── */
/* La recién llegada: cae desde arriba, se aplasta contra la mesa y se asienta (luego, a flotar) */
/* Vista desde arriba: «caer» es venir desde la cámara, grande, acelerando, y estrellarse.
   El golpe (mesa, saltos, onda, esquirlas) lo pone partida.js justo al tocar, no antes. */
#gameScreen .card.card-landed, #gameScreen .card.card-won {
    animation: caer 360ms cubic-bezier(.7, 0, 1, .55), aplasta 480ms 360ms cubic-bezier(.3, 1.6, .5, 1), flota 3.4s 840ms ease-in-out infinite alternate;
}
/* La que ya llegó volando (tu jugada, o la que suelta otro): solo se estrella */
#gameScreen .card.solo-aplasta.card-landed, #gameScreen .card.solo-aplasta.card-won {
    animation: aplasta 480ms cubic-bezier(.3, 1.6, .5, 1), flota 3.4s 480ms ease-in-out infinite alternate;
}
#gameScreen #centerCards .card { transform-origin: 50% 90%; }
@keyframes caer { from { translate: 0 -28px; scale: 1.75; rotate: -6deg; opacity: .5; } 70% { opacity: 1; } }
@keyframes aplasta { 0% { scale: 1.18 .78; } 35% { scale: .94 1.08; } 65% { scale: 1.03 .97; } 100% { scale: 1; } }
/* La onda del golpe (un marco sesgado que se abre) y las esquirlas */
#fxLayer .onda { position: fixed; z-index: 119; pointer-events: none; aspect-ratio: 5 / 1; translate: -50% -50%;
    border: 4px solid #e9e6da; transform: skewX(-14deg); }
#fxLayer .onda.fuerte { border-color: #e8402a; }
#fxLayer .esquirla { position: fixed; z-index: 121; pointer-events: none; width: 13px; height: 17px; margin: -8px 0 0 -6px;
    background: #e9e6da; clip-path: polygon(50% 0, 100% 100%, 0 70%); }
#fxLayer .esquirla.roja { background: #e8402a; }
/* Las copias que vuelan entre la mesa y el marcador (de quién viene, a quién va) */
#fxLayer .card.vuela { position: fixed; z-index: 120; pointer-events: none; border-radius: 0; box-shadow: none;
    clip-path: polygon(4% 2%, 100% 0, 96% 98%, 0 100%); transform-origin: 50% 50%; }

/* ── Sostener una carta (partida.js): se levanta, deja de flotar y sigue al dedo ─────
   touch-action: none o el navegador se queda el arrastre para hacer scroll; sin menú de
   mantener pulsado (iOS) ni selección de texto. */
#gameScreen #yourCards, #gameScreen #centerCards { touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
#gameScreen .card.soltada { animation: none !important; z-index: 3; }   /* esperando al servidor donde la soltaste */
#gameScreen .card.sostenida { animation: none !important; scale: 1.1; z-index: 3; transition: scale 120ms var(--rebote); }
#gameScreen #yourCards > .card.sostenida { --lift: -12px; }
/* Donde soltarla la juega: se enciende (tu carta dentro del recuadro, la del centro fuera) */
#gameScreen .card.sostenida.casi { filter: brightness(1.25) saturate(1.2); scale: 1.16; }
/* La fila que arrastra va por encima de la otra; el recuadro marca dónde cae tu carta */
#gameScreen .arrastrando { position: relative; z-index: 20; }
#gameScreen:has(#yourCards .sostenida.casi) #centerCards::before { box-shadow: inset 0 0 0 3px var(--acento); }

/* ── Revelar: tus sets como tablas que giran (partida.js) ──────────────────────
   --canto: 1 de frente, 0 de canto (se apaga al girar: de canto no se ve nada). */
#gameScreen #yourCards.en-tabla { visibility: hidden; }
#tablas { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#tablas .tabla {
    position: fixed; box-sizing: border-box; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; align-items: center;
    background: var(--tinta); box-shadow: inset 0 0 0 2px rgb(169 182 137 / 40%), 6px 8px 0 rgb(0 0 0 / 60%);
    filter: brightness(calc(.25 + .75 * var(--canto, 1))); will-change: transform, opacity;
}
#tablas .tabla.sel { box-shadow: inset 0 0 0 3px var(--hueso, #e9e6da), 6px 8px 0 rgb(0 0 0 / 60%); }
#tablas .tabla.muestra { background: #3b1510; box-shadow: inset 0 0 0 4px var(--acento), 6px 8px 0 rgb(0 0 0 / 60%); }
#tablas .tcarta { aspect-ratio: .6476; background: #fff url("/cards.webp") no-repeat; background-size: 1600% 1300%; }
#tablas .tcarta.vacia { background: rgb(255 255 255 / 8%); }

/* Arrebato: la carta que se disputan los guantes (partida/manos.ts) */
#fxLayer .card.vuela.disputada { z-index: 121; box-shadow: 0 0 0 3px var(--acento, #e8402a); }
#fxLayer.sobre-pelea { z-index: 155; }   /* el arrebato se ve sobre la pelea que empieza (#qteOverlay: 150) */
/* Cara sin revelar: dorsos, como los sets de los demás en el marcador de arriba */
/* Volteado = boca arriba para los demás: tú le ves el dorso (en la tabla al girar y en tu mano) */
#tablas .tabla.muestra .tcarta:not(.vacia),
#gameScreen #yourCards.volteado .card:not(.card-empty) {
    background: repeating-linear-gradient(135deg, transparent 0 7px, rgb(169 182 137 / 9%) 7px 8px), #0b0c09 !important;
    box-shadow: inset 0 0 0 2px rgb(169 182 137 / 55%), inset 0 0 0 6px #0b0c09, inset 0 0 0 7px rgb(169 182 137 / 25%);
}
#gameScreen #yourCards.volteado .card:not(.card-empty) > * { visibility: hidden; }
#tablas .tojo { position: absolute; top: -14px; right: -10px; width: 30px; height: 30px; display: none; place-items: center;
    background: var(--acento); color: #fff; transform: skewX(-6deg); }
#tablas .tojo .ico { width: 20px; height: 20px; }
#tablas .tabla.muestra .tojo { display: grid; }

/* ── Tu mano: en abanico y respirando ──────────────────────────────────────── */
#gameScreen #yourCards {
    flex-shrink: 0; gap: 10px; margin: 4px 0 0; padding: 0 6px 6px;
    grid-template-columns: repeat(4, min(calc((100% - 42px) / 4), calc(25dvh * 0.6476))); justify-content: center;
}
#gameScreen #yourCards > .card {
    transform: perspective(700px) translateY(calc(var(--lift) + var(--arco, 0px))) rotate(var(--abanico, 0deg))
               rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--scale));
    animation: respira 3.2s ease-in-out infinite alternate;
}
#gameScreen #yourCards > .card:nth-child(1) { --abanico: -6deg; --arco: 10px; animation-delay: -0.4s; }
#gameScreen #yourCards > .card:nth-child(2) { --abanico: -2deg; --arco: 2px; animation-delay: -1.2s; }
#gameScreen #yourCards > .card:nth-child(3) { --abanico: 2deg; --arco: 2px; animation-delay: -2s; }
#gameScreen #yourCards > .card:nth-child(4) { --abanico: 6deg; --arco: 10px; animation-delay: -2.8s; }
@keyframes respira { to { translate: 0 -5px; } }
/* Debes una carta: tu hueco late en bermellón; lo demás de tu mano se apaga */
#gameScreen.owing #yourCards > .card-empty { background: rgb(232 64 42 / 22%); outline: 3px solid var(--acento); outline-offset: -5px; animation: hueco 800ms ease-in-out infinite alternate; }
@keyframes hueco { to { background: rgb(232 64 42 / 45%); translate: 0 -6px; } }
#gameScreen.owing #yourCards > .card:not(.card-empty) { opacity: .4; animation: none; }

/* ── Tus sets: seis montoncitos, sin «Set 1…6» ─────────────────────────────── */
#gameScreen .set-nav { gap: 10px; justify-content: center; margin: 2px 0 8px; flex-shrink: 0; }
#gameScreen .set-btn {
    flex: 0 0 auto; min-width: 0; width: 34px; height: 46px; min-height: 0; padding: 0; position: relative;
    border: none; border-radius: 0; background: var(--tinta); font-size: 0; transform: skewX(-6deg);
    --linea: rgb(169 182 137 / 40%);
    box-shadow: inset 0 0 0 2px var(--linea), 3px -3px 0 var(--militar), 6px -6px 0 #2f3414, 4px 5px 0 rgb(0 0 0 / 70%);
    transition: transform 260ms var(--rebote), box-shadow 150ms;
}
#gameScreen .set-btn::before, #gameScreen .set-btn::after { content: none; }
#gameScreen .set-btn .set-eye { display: none; }
#gameScreen .set-btn .set-mini { position: absolute; inset: 3px; background-repeat: no-repeat; background-size: 1600% 1300%; }
#gameScreen .set-btn.flipped .set-mini { background-color: #fff; background-image: url("/cards.webp"); }
#gameScreen .set-btn.active { --linea: var(--acento); transform: translateY(-7px) skewX(-6deg) rotate(-4deg) scale(1.14);
    box-shadow: inset 0 0 0 3px var(--linea), 3px -3px 0 var(--militar), 6px -6px 0 #2f3414, 5px 8px 0 rgb(0 0 0 / 70%); }
#gameScreen .set-btn:disabled { opacity: .4; }

/* ── Avisos sin frase: un icono junto a lo que falló ──────────────────────── */
.aviso-ico {
    position: fixed; z-index: 160; pointer-events: none; width: 44px; height: 44px; display: grid; place-items: center;
    color: var(--hueso, #e9e6da); background: var(--acento, #e8402a); filter: drop-shadow(4px 5px 0 rgb(0 0 0 / 70%));
    clip-path: polygon(4px 0, 100% 3px, calc(100% - 4px) 100%, 0 calc(100% - 3px));
    animation: avisoIco 1100ms forwards;
}
.aviso-ico.ambar { background: #f2a33a; color: #0e0e0e; }
.aviso-ico .ico { width: 26px; height: 26px; }
@keyframes avisoIco { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6) rotate(-12deg); } 15%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1) rotate(0); } }
#gameScreen .card-row.destello-ambar { animation: ambar 700ms; }
@keyframes ambar { 0%, 30% { --sombra: 7px 8px 0 #f2a33a; } }

/* ── Pelea: la carta, los dos contadores y el tiempo; sin «¡CLICK!» ─────────── */
#qteOverlay #qteTitle, #qteOverlay #qteDesc, #qteOverlay #qteClickBtn { display: none !important; }   /* toda la pantalla es el botón */
#qteOverlay .qte-box { border-radius: 0; clip-path: polygon(8px 0, 100% 5px, calc(100% - 8px) 100%, 0 calc(100% - 5px)); font-family: var(--sans); }
#qteOverlay .qte-card-slot .card { clip-path: polygon(4% 2%, 100% 0, 96% 98%, 0 100%); border-radius: 0; animation: tiemblaCarta 220ms infinite alternate; }
@keyframes tiemblaCarta { to { translate: 2px -1px; rotate: 1.5deg; } }
#qteOverlay .qte-player-score { border-radius: 0; transform: skewX(-8deg); }
#qteOverlay .qte-player-score.is-me, #qteOverlay .qte-player-score.is-me .qte-count { color: var(--acento); }
#qteOverlay .qte-count { font-family: var(--sans); font-weight: 900; }
#qteOverlay #qteGiveUpBtn { font-size: 0; border-radius: 0; clip-path: polygon(4px 0, 100% 3px, calc(100% - 4px) 100%, 0 calc(100% - 3px)); }
#qteOverlay #qteGiveUpBtn .ico { width: 26px; height: 26px; }
#qteOverlay .qte-timer-bar, #qteOverlay #qteTimerFill { border-radius: 0; }
/* Ceder (partida.js): la carta baja con el dedo hasta la bandera; cerca, la bandera se enciende */
#qteOverlay, #gameScreen #comboBox { touch-action: none; }
#qteOverlay .card.cede { position: fixed; z-index: 3; margin: 0; pointer-events: none; animation: tiemblaCede 220ms infinite alternate;
    clip-path: polygon(4% 2%, 100% 0, 96% 98%, 0 100%); border-radius: 0; }
#qteOverlay #qteGiveUpBtn { z-index: 4; transition: scale 160ms var(--rebote), background-color 160ms; }
#qteOverlay #qteGiveUpBtn.cerca { scale: 1.35; background: var(--hueso, #e9e6da); color: var(--tinta); }
/* Frenesí: el rayo sube con el dedo y se carga (--carga 0…1) */
#gameScreen #frenzyBtn.sostenido { animation: frenzyFlow 1.6s linear infinite; position: relative; z-index: 5;
    filter: brightness(calc(1 + .6 * var(--carga, 0))) drop-shadow(0 0 calc(18px * var(--carga, 0)) #f2a33a); scale: calc(1 + .3 * var(--carga, 0)); }
/* Carta en pelea: dos espadas cruzadas en bermellón en vez de «PELEADA» */
#gameScreen .card.qte-locked::after, #gameScreen .card.qte-contested::after {
    content: "" !important; width: 46%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 0; background: var(--acento);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4l16 16M20 4 4 20M3 9l6-6M15 21l6-6M21 9l-6-6M9 21l-6-6' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4l16 16M20 4 4 20M3 9l6-6M15 21l6-6M21 9l-6-6M9 21l-6-6' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Los avisos de otros (peleas ajenas, conexión), debajo del marcador: encima lo tapaban */
body:has(#gameScreen.active) #verifyNotifications { top: 78px !important; }
/* La pelea de otros: nombres, espadas, los dos números y el tiempo. Sin «PELEA» ni «clicks» */
.qte-battle-notif:not([data-grace]) .qbn-title { display: none; }
.qte-battle-notif { border-radius: 0 !important; clip-path: polygon(4px 0, 100% 2px, calc(100% - 4px) 100%, 0 calc(100% - 2px)); font-family: var(--sans, Geist, sans-serif); }
.qte-battle-notif:not([data-grace]) { padding: 6px 8px !important; }
.qte-battle-notif .qbn-scores { font: 900 .95rem var(--sans, Geist, sans-serif); }
.qte-battle-notif .ico, #verifyNotifications .qbn-title .ico { width: 1.1em; height: 1.1em; vertical-align: -.2em; color: #e8402a; }

/* ── Lo que aún tenía el estilo viejo: barras, encuesta, diálogos, espectador, fin ──────
   Mismo lenguaje que la mesa: paneles cortados (la forma en ::before, la sombra dura en el
   propio elemento, que sigue el corte), botones sesgados en tinta y hueso, bermellón solo
   para lo que se elige o urge. Nada redondo. */

/* Barras de estado: la racha sube de salvia a bermellón (los mismos tramos, colores de la mesa);
   deuda = bermellón (date prisa), bloqueo = rayado gris (no puedes) */
#gameScreen { --combo-color: var(--salvia); --combo-ring: rgb(169 182 137 / 45%); }
#gameScreen[data-combo-tier="2"] { --combo-color: var(--hueso); --combo-ring: rgb(233 230 218 / 45%); }
#gameScreen[data-combo-tier="3"] { --combo-color: #f2a33a; --combo-ring: rgb(242 163 58 / 45%); }
#gameScreen[data-combo-tier="4"] { --combo-color: #f26a2a; --combo-ring: rgb(242 106 42 / 50%); }
#gameScreen[data-combo-tier="5"] { --combo-color: var(--acento); --combo-ring: rgb(232 64 42 / 55%); }
#gameScreen #comboMult { text-shadow: 3px 3px 0 #000; }
#gameScreen .combo-bar { height: 8px; background: rgb(233 230 218 / 10%); }
#gameScreen #comboBarFill { background: var(--combo-color); }
#gameScreen #debtBar, #gameScreen #stunBar { height: 8px; background: rgb(233 230 218 / 10%); transform: skewX(-20deg); }
#gameScreen #debtBarFill { background: var(--acento); }
#gameScreen #stunBarFill { background: repeating-linear-gradient(-45deg, var(--tenue) 0 6px, #55555a 6px 12px); }

/* Botones fuera del tablero: sesgados, tinta con canto salvia; el principal, bermellón */
:is(#eloChoice, #reconnectOverlay, #gameOverOverlay, #espectadorBanda, #specSeats, .wait-poll-btns) button {
    margin: 0; width: auto; min-height: 40px; padding: 8px 16px; border: none; border-radius: 0; cursor: pointer;
    background: var(--tinta); color: var(--hueso); box-shadow: inset 0 0 0 2px rgb(169 182 137 / 45%);
    font: 900 .82rem/1.1 var(--sans); text-transform: uppercase; letter-spacing: .03em;
    clip-path: polygon(6px 0, 100% 3px, calc(100% - 6px) 100%, 0 calc(100% - 3px));
    transition: transform 200ms var(--rebote), background 150ms;
}
:is(#eloChoice, #reconnectOverlay, #gameOverOverlay, #espectadorBanda, #specSeats, .wait-poll-btns) button:is(.btn-primary, .wp-no, .active, [aria-pressed="true"]) {
    background: var(--acento); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta);
}
:is(#eloChoice, #reconnectOverlay, #gameOverOverlay, #espectadorBanda, #specSeats, .wait-poll-btns) button:focus-visible { outline: 3px solid var(--hueso); outline-offset: 2px; }
/* El pomo de «deslizar para desbloquear» (gestos.css): un taco cuadrado, no una bola */
body.mesa button.desliza::before {
    border-radius: 0; background: var(--acento, #e8402a); color: var(--tinta, #0e0e0e); box-shadow: none;
    clip-path: polygon(3px 0, 100% 2px, calc(100% - 3px) 100%, 0 calc(100% - 2px)); font-weight: 900;
}
body.mesa button.desliza:is(.btn-primary, .wp-no)::before { background: var(--tinta, #0e0e0e); color: var(--acento, #e8402a); }
body.mesa button.desliza:not(.desliza-mini)::after { background: rgb(232 64 42 / 25%); }
/* Mantener pulsado (los que no tienen pomo): una barra que se llena por abajo, no un anillo */
body.mesa button.desliza.desliza-mini::after {
    -webkit-mask: none; mask: none; border-radius: 0; top: auto; height: 4px;
    background: linear-gradient(90deg, var(--acento, #e8402a) calc(var(--p) * 100%), transparent 0);
}

/* Paneles cortados: la forma en ::before (el corte no se come la sombra) */
:is(.elo-choice-box, .rc-caja, .gameover-box) {
    position: relative; isolation: isolate; background: none !important; border: none !important; border-radius: 0 !important;
    color: var(--hueso); font-family: var(--sans); filter: drop-shadow(8px 9px 0 rgb(0 0 0 / 75%));
}
:is(.elo-choice-box, .rc-caja, .gameover-box)::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tinta);
    box-shadow: inset 0 0 0 2px rgb(169 182 137 / 45%), inset 0 5px 0 var(--acento);
    clip-path: polygon(10px 0, 100% 6px, calc(100% - 10px) 100%, 0 calc(100% - 6px));
}
:is(.elo-choice-box, .rc-caja, .gameover-box) :is(h2, h3) { font: 900 1.35rem/1.05 var(--sans); text-transform: uppercase; letter-spacing: -.01em; color: var(--hueso); }
.elo-choice { background: rgb(6 6 6 / 82%) !important; }
.elo-choice-box p { color: var(--tenue) !important; }

/* Reconexión (antes en estilos en línea) */
#reconnectOverlay { position: fixed; inset: 0; z-index: 300; align-items: center; justify-content: center; padding: 16px; background: rgb(6 6 6 / 90%); }
#reconnectOverlay .rc-caja { width: min(360px, 100%); padding: 30px 28px 26px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
#reconnectOverlay .rc-ico { width: 52px; height: 52px; margin: 0 auto 4px; color: var(--acento); animation: rcLate 1.2s steps(2) infinite; }
@keyframes rcLate { 50% { opacity: .35; } }
#reconnectOverlay p { color: var(--tenue); font-size: .9rem; margin: 0 0 12px; }

/* La encuesta «¿seguimos esperando?»: el aviso en ámbar y sus dos botones */
.qte-battle-notif.wait-poll { border-color: #f2a33a !important; }
.wait-poll-btns { flex-direction: column; }   /* el aviso mide 200 px: uno encima del otro, sin cortar */
.wait-poll-btns button { min-height: 34px; padding: 6px 10px; font-size: .72rem; }

/* Fin de la partida: puestos grandes, el primero en bermellón */
#gameOverOverlay { background: rgb(6 6 6 / 90%) !important; }
.gameover-box { padding: 30px 28px 26px !important; min-width: min(340px, calc(100vw - 32px)); }
#gameOverOverlay .ranking-entry { border-radius: 0; background: rgb(233 230 218 / 6%); transform: skewX(-8deg); margin: 6px 0; font: 800 .95rem var(--sans); }
#gameOverOverlay .ranking-entry > * { transform: skewX(8deg); }
#gameOverOverlay .ranking-entry:first-child { background: var(--acento); color: var(--tinta); }
#gameOverOverlay .rank-pos { font: 900 1.5rem/1 var(--sans); }
#gameOverOverlay .rank-elo { font-family: var(--sans); font-weight: 900; }
#gameOverOverlay .rank-elo.up { color: var(--salvia); }
#gameOverOverlay .ranking-entry:first-child .rank-elo { color: var(--tinta); }
#gameOverOverlay .rank-elo.down { color: var(--acento); }

/* Espectador: una franja sesgada arriba, «mirando desde» como fichas, su mano a la medida */
#gameScreen #espectadorBanda {
    flex-shrink: 0; gap: 8px; margin: 0 44px 8px 0; padding: 6px 10px; border-radius: 0; background: var(--tinta);
    color: var(--acento); font: 900 .72rem var(--sans); text-transform: uppercase; letter-spacing: .06em;
    box-shadow: inset 0 0 0 2px var(--acento); filter: drop-shadow(4px 5px 0 rgb(0 0 0 / 70%));
}
#gameScreen #espectadorBanda button { min-height: 32px; padding: 5px 12px; font-size: .7rem; }
#gameScreen.espectador #specBoard { flex-shrink: 0; }
#gameScreen #specSeats { gap: 8px; margin: 4px 0 8px; justify-content: center; }
#gameScreen #specSeats .quien { display: none; }   /* las fichas ya dicen qué son */
#gameScreen #specSeats button { min-height: 32px; padding: 5px 12px; font-size: .72rem; }
#gameScreen #specCards { gap: 10px; grid-template-columns: repeat(4, min(calc((100% - 42px) / 4), calc(20dvh * 0.6476))); justify-content: center; filter: drop-shadow(var(--sombra)); }
#gameScreen .spec-estado { justify-content: center; font: 800 .72rem var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
#gameScreen .spec-estado b { color: var(--hueso); }
#gameScreen #specAll { max-height: 40dvh; overflow-y: auto; overscroll-behavior: contain; }   /* «Todos» no aplasta la mesa */
#gameScreen .spec-mini-set { border-radius: 0; border-color: rgb(169 182 137 / 35%); }
#gameScreen .spec-mini-set.flipped { border-color: var(--acento); }
#gameScreen .spec-mini-set.current { background: rgb(232 64 42 / 18%); }
#gameScreen .spec-player-name b { color: var(--hueso); font-weight: 900; }

/* ── Verificación: una lista por quien verifica, que se tacha a golpes (partida.js) ─────
   Tu columna con la cabecera en bermellón; las de los demás, en hueso. Un rayo parte la
   pantalla cuando entra otra. El sello final dice el puesto de cada uno. */
@property --tacha { syntax: "<number>"; inherits: false; initial-value: 1; }
#verifyOverlay { background: rgb(6 6 6 / 92%) !important; padding: 16px; font-family: var(--sans); color: var(--hueso); }
#verifyOverlay .verify-box { background: none; border-radius: 0; padding: 0; min-width: 0; max-width: none; width: auto; }
#verifyTitle, #verifySets, body:has(#verifyOverlay.active) #verifyNotifications .verify-notif { display: none !important; }
/* Lo que vuela en la partida (cartas, ondas) iría encima: mientras verificas, solo lo de aquí */
body:has(#verifyOverlay.active) #fxLayer > :not(.vfx) { visibility: hidden; }
.vcols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 300px)); justify-content: center; width: min(1240px, calc(100vw - 32px)); }
.vcols[data-n="1"] { grid-template-columns: minmax(0, 360px); }
@media (max-width: 640px) { .vcols:not([data-n="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.vcol { position: relative; isolation: isolate; padding: 10px 12px 14px; filter: drop-shadow(7px 8px 0 rgb(0 0 0 / 75%)); min-width: 0; }
.vcol::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tinta);
    box-shadow: inset 0 0 0 2px rgb(169 182 137 / 45%); clip-path: polygon(8px 0, 100% 5px, calc(100% - 8px) 100%, 0 calc(100% - 5px)); }
.vcab { margin: -2px -4px 10px; padding: 6px 10px; background: var(--hueso); color: var(--tinta); font: 900 .95rem/1 var(--sans);
    text-transform: uppercase; letter-spacing: .02em; transform: skewX(-10deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcol.mia .vcab { background: var(--acento); }
.vlista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vlista li { position: relative; display: grid; grid-template-columns: 1.6em 1fr 30px; align-items: center; gap: 8px; padding: 5px 4px;
    min-height: 44px; transition: background 200ms; }
.vnum { font: 900 1.5rem/1 var(--sans); font-style: italic; color: var(--salvia); text-align: center; }
.vcartas { display: flex; gap: 3px; min-width: 0; }
.vmini { display: block; flex: 0 1 30px; aspect-ratio: 34 / 52; background: #fff url("../cards.webp") no-repeat; background-size: 1600% 1300%;
    clip-path: polygon(6% 2%, 100% 0, 94% 98%, 0 100%); }
.vmarca { width: 28px; height: 28px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgb(233 230 218 / 20%); transform: skewX(-8deg); }
.vmarca .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: square; }
/* La que se está comprobando: barre una luz y el número late */
.vlista li.mira { background: linear-gradient(100deg, transparent 30%, rgb(233 230 218 / 16%) 50%, transparent 70%) 0 0 / 300% 100%; animation: vmira 900ms linear infinite; }
.vlista li.mira .vnum { color: var(--acento); animation: vlate 450ms steps(2) infinite; }
@keyframes vmira { from { background-position: 100% 0; } to { background-position: -50% 0; } }
/* El servidor manda un set por segundo: una mecha bermellón se consume en ese segundo y los
   dorsos se barajan; el resultado cae cuando la mecha llega al final */
.vlista li.mira::before { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--acento);
    transform-origin: 0 50%; animation: vmecha 1000ms linear both; }
@keyframes vmecha { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vmini.dorso { background: var(--militar) repeating-linear-gradient(45deg, rgb(169 182 137 / 35%) 0 3px, transparent 3px 7px);
    animation: vbaraja 360ms ease-in-out infinite alternate; }
@keyframes vbaraja { from { translate: 0 -3px; rotate: -6deg; } to { translate: 0 3px; rotate: 6deg; } }
@keyframes vlate { 50% { opacity: .35; } }
/* Bien: se tacha (la raya crece) y la marca en salvia. Mal: fondo bermellón y la cruz */
.vlista li.ok .vmarca { background: var(--salvia); color: var(--tinta); box-shadow: none; }
.vlista li.ok::after { content: ""; position: absolute; left: 2.2em; right: 40px; top: 50%; height: 4px; margin-top: -2px; background: var(--hueso);
    box-shadow: 2px 2px 0 var(--tinta); transform-origin: 0 50%; transform: rotate(-4deg) scaleX(var(--tacha)); pointer-events: none; }
.vlista li.ok .vcartas { opacity: .55; }
.vlista li.mal { background: rgb(232 64 42 / 22%); }
.vlista li.mal .vnum { color: var(--acento); }
.vlista li.mal .vmarca { background: var(--acento); color: var(--tinta); box-shadow: none; }
/* El sello del final: el puesto, en grande y torcido, encima de la lista */
.vsello { display: none; position: absolute; left: 50%; top: 54%; translate: -50% -50%; rotate: -10deg; padding: 8px 20px 10px;
    font: 900 clamp(2rem, 9vw, 3.4rem)/1 var(--sans); text-transform: uppercase; pointer-events: none;
    background: var(--hueso); color: var(--tinta); clip-path: polygon(6px 0, 100% 4px, calc(100% - 6px) 100%, 0 calc(100% - 4px));
    filter: drop-shadow(5px 6px 0 var(--acento)); }
.vcol:is(.gana, .falla) .vsello { display: block; }
.vcol.gana[data-pos="1"] .vsello { background: var(--acento); filter: drop-shadow(5px 6px 0 var(--tinta)); }
.vcol.falla .vsello { background: var(--tinta); color: var(--acento); box-shadow: inset 0 0 0 4px var(--acento); }
.vcol.falla .vlista { opacity: .6; }
/* El rayo que parte la pantalla: cartoon, relleno hueso, trazo tinta y sombra dura bermellón */
#fxLayer .vrayo { position: fixed; z-index: 125; width: 56px; margin-left: -28px; pointer-events: none; filter: drop-shadow(6px 4px 0 #e8402a); }
#fxLayer .vrayo.tumbado { width: auto; height: 48px; margin: -24px 0 0; }
#fxLayer .vrayo svg { display: block; width: 100%; height: 100%; overflow: visible; }
#fxLayer .vrayo path { fill: #e9e6da; stroke: #0e0e0e; stroke-width: 4; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
#verifyFooter { margin-top: 16px; font: 900 1rem var(--sans); text-transform: uppercase; color: var(--hueso) !important; }
#verifyOverlay #verifyCloseBtn { width: auto; margin: 12px auto 0; min-height: 40px; padding: 8px 22px; border-radius: 0; background: var(--acento); color: var(--tinta);
    font: 900 .85rem var(--sans); text-transform: uppercase; clip-path: polygon(6px 0, 100% 3px, calc(100% - 6px) 100%, 0 calc(100% - 3px)); }
/* PC: la lista a tamaño de pantalla, no de móvil */
@media (min-width: 900px) and (min-height: 600px) {
    .vcols { grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); }
    .vcols[data-n="1"] { grid-template-columns: minmax(0, 440px); }
    .vlista li { min-height: 60px; grid-template-columns: 1.6em 1fr 38px; }
    .vnum { font-size: 2.1rem; }
    .vmini { flex-basis: 40px; }
    .vmarca { width: 36px; height: 36px; }
    .vcab { font-size: 1.2rem; padding: 8px 12px; }
    #verifyFooter { font-size: 1.3rem; }
    #verifyOverlay #verifyCloseBtn { font-size: 1rem; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .vlista li.mira, .vlista li.mira .vnum, .vmini.dorso { animation: none; }
    .pfrag, .pluz, #gameScreen .card, #gameScreen .hud-stripe, #gameScreen #frenzyBtn, #gameScreen #centerCards::before,
    .aviso-ico, .pbarrido.pasa, #qteOverlay .qte-card-slot .card { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

@keyframes tiemblaCede { to { rotate: 1.5deg; } }