:root {
--felt: #175d3d; --felt-dark: #0c3a24; --wood: #5d3a1a;
--oro: #d4a929; --copa: #c0392b; --espada: #2e5fa3; --basto: #2e7d32;
--cream: #f7f2e4; --ink: #232323; --gold: #e8c34a;
/* LA ESCALERA DE RADIOS (dueño: "que sean de un 16 o un 32").
Desarrollo: Docs/Notas-css-arranque.md, nota 1. */
--r-med: 16px; --r-gran: 32px;
--r-costura: 12px; --r-costura-gran: 28px;
--mesa-w: min(22vw, 105.6px);
/* LAS DOS PASTILLAS MIDEN LO MISMO (dueño, 2026-08-24: "la del rival, como
Desarrollo: Docs/Notas-css-arranque.md, nota 2. */
/* UNA SOLA MEDIDA PARA LAS DOS PASTILLAS, atada a la fila MÁS EXIGENTE.
Desarrollo: Docs/Notas-css-arranque.md, nota 3. */
--pastilla-w: min(152px, calc(100vw - 240px));
}
:root {
/* Veta de madera: turbulencia fractal estirada en X, teñida caoba. */
--wood-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.11' numOctaves='5' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.13 0 0 0 0 0.07 0 0 0 0 0.03 0.75 0 0 0 0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23w)'/%3E%3C/svg%3E");
/* FIELTRO: la fibra del paño. Grano MUY fino y de muy poco contraste — un
paño de mesa no tiene dibujo, tiene pelo. Antes el paño llevaba dos
`repeating-linear-gradient` a 45 y a -45 grados, que a 2 px de paso leen
como una tela mosquitera y no como lana: un enrejado regular es lo único
que la lana nunca es. */
--felt-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.04 0 0 0 0 0.10 0 0 0 0 0.06 0.34 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E");
/* Cuero: grano fino y denso, casi negro con calidez. */
--leather-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.24 0 0 0 0 0.13 0 0 0 0 0.06 0.5 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23l)'/%3E%3C/svg%3E");
}
/* LA FILA DEL RIVAL TIENE UN ALTO CON NOMBRE (2026-09-05): 60 px con dos en la mesa y 84 px
Desarrollo: Docs/Notas-css-arranque.md, nota 4. */
body { --fila-rival-h: 60px; --hand-w: min(35.2vw, 169.4px, calc((100vh - 240px - var(--fila-rival-h)) / 1.56)); }
/* LA FILA MÍA Y LA SEPARACIÓN DEL TABLERO TAMBIÉN TIENEN NOMBRE (revisión final de la rueda,
2026-09-05): el panel de cantar se cuelga de ellos. La mano (.mano) mide --hand-w × 1,56 y
apoya en el borde de abajo; encima van la separación del tablero y la fila mía. */
body { --fila-mia-h: 64px; --tablero-gap: 6px; }
/* El cartel del arrastre («Tirar a la mesa» / «Levantar N cartas») mide un alto con nombre: se
cuelga a 4 px de la fila del rival y, mientras dura el arrastre, el aviso fugaz se cuelga de él. */
body { --cartel-arrastre-h: 44px; }
@supports (height: 100dvh) {
/* dvh sigue a la barra del navegador; vh no. Con vh solo, en el celular
sobraba justo el alto de la barra y la pantalla se podía correr. */
body { --hand-w: min(35.2vw, 169.4px, calc((100dvh - 240px - var(--fila-rival-h)) / 1.56)); }
}
body.mesa-de-mas { --fila-rival-h: 84px; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* Esto es un JUEGO, no una página: el documento no se panea nunca.
El scroll vertical vive adentro (menú, listas); el horizontal, jamás. */
html, body { height: 100%; overscroll-behavior: none; overflow: hidden; }
@supports (height: 100dvh) { html, body { height: 100dvh; } }
/* Instalada como app, el telefono pinta las zonas del reloj y de la barrita
con el fondo de la pagina: si html no tiene color, salen blancas. */
html { background: #0c0d11; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left); }
/* LAS TRES VOCES DE LA CASA (dueño, 2026-09-03): Lilita One grita los títulos y la
Desarrollo: Docs/Notas-css-arranque.md, nota 5. */
@font-face { font-family: 'Trocchi'; font-style: normal; font-weight: 400; font-display: swap;
src: url('/fuentes/trocchi-400.woff2?v=1') format('woff2'); }
/* Lilita One (OFL, Juan Montoreano) — la voz «Clash» de las tarjetas de retención:
piloto de la migración gradual que pidió el dueño (2026-09-04). */
@font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap;
src: url('/fuentes/lilita-one-400.woff2?v=1') format('woff2'); }
/* Alegreya — serif argentina (Juan Pablo del Peral, Huerta Tipográfica).
La voz de todos los textos de la interfaz; los naipes conservan la suya. */
@font-face {
font-family: 'Alegreya'; font-style: normal; font-weight: 700; font-display: swap;
src: url('/fuentes/alegreya-700.woff2?v=1') format('woff2');
}
html { touch-action: manipulation; }
/* Esto es un juego, no una página: NADA se selecciona ni abre el menú del sistema.
En el teléfono, mantener el dedo sobre un texto o una imagen hacía saltar el menú de
iOS ("Buscar con…", "Buscar en la página", "Siri") en plena partida. */
*, *::before, *::after {
-webkit-touch-callout: none !important; -webkit-user-select: none !important;
user-select: none !important; -webkit-user-drag: none !important;
}
img, svg, canvas { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
/* Lo único que se puede seleccionar y copiar: lo que la persona escribe. */
input, textarea, [contenteditable="true"] {
-webkit-user-select: text !important; user-select: text !important;
-webkit-touch-callout: default !important;
}
/* Sigmar — grotesca gorda y moderna (Tyler Finck), presencia de logo de
juego: la voz del nombre en la portada. Servida por el propio sitio, sin CDN, y también dentro del wrapper de las tiendas. */
@font-face {
font-family: 'Sigmar'; font-style: normal; font-weight: 400; font-display: swap;
src: url('/fuentes/sigmar-400.woff2?v=1') format('woff2');
}
body {
font-family: 'Trocchi', Georgia, serif; font-size: 14.5px;
/* El fondo de la casa (dueño, 2026-08-22: el marrón era un 2): cuero
grafito LUSTRADO. Capas, de arriba a abajo: la lámpara de bronce que cae
desde arriba, un reflejo frío que sube de abajo (la luz del paño), la veta
de brillo diagonal del lustre, el grano fino del cuero, y el cuerpo del
material: grafito azulado que se apaga hacia los pies. */
background:
radial-gradient(ellipse 120% 52% at 50% -10%, rgba(232,195,74,.26), rgba(232,195,74,.06) 40%, transparent 62%),
radial-gradient(ellipse 80% 38% at 50% 108%, rgba(64,118,150,.20), transparent 70%),
linear-gradient(112deg, transparent 28%, rgba(255,255,255,.035) 42%, rgba(255,255,255,.085) 50%, rgba(255,255,255,.035) 58%, transparent 72%),
var(--leather-tex),
linear-gradient(180deg, #262b33 0%, #171a20 48%, #0a0b0e 100%);
color: var(--cream); display: flex; flex-direction: column;
user-select: none; -webkit-user-select: none; overflow: hidden;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* La luz: viñeta de lámpara — el centro respira, los bordes descansan. */
body::after {
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 35;
background: radial-gradient(ellipse 120% 85% at 50% 42%, transparent 55%, rgba(8,4,1,.42) 100%);
}
.ic { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; }
/* table cloth themes */
body[data-theme="azul"] { --felt: #1d5375; --felt-dark: #0f2f45; }
body[data-theme="bordo"] { --felt: #77242f; --felt-dark: #431117; }
body[data-theme="noche"] { --felt: #22384e; --felt-dark: #0d1a29; }
body[data-theme="madera"] { --felt: #a8763d; --felt-dark: #64401c; --wood: #2e1a09; }
body[data-theme="celeste"] { --felt: #2f7ca8; --felt-dark: #174c6d; }
body[data-theme="cuero"] { --felt: #7a4a28; --felt-dark: #46280f; }
body[data-theme="violeta"] { --felt: #5a3a7a; --felt-dark: #341f4d; }
body[data-theme="esmeralda"] { --felt: #1a9a60; --felt-dark: #0c5a36; }
body[data-theme="carbon"] { --felt: #45454b; --felt-dark: #1d1d22; }
/* La segunda tanda TENÍA catálogo y precio pero le faltaba este CSS:
se compraban y no cambiaban nada. Nunca más un paño mudo. */
body[data-theme="ceibo"] { --felt: #5e1a17; --felt-dark: #2f0c0b; }
body[data-theme="salta"] { --felt: #1c5a3a; --felt-dark: #0b2b1c; }
body[data-theme="pampa"] { --felt: #6b5a1e; --felt-dark: #332a0c; }
body[data-theme="patagonia"] { --felt: #55677a; --felt-dark: #26323f; }
body[data-theme="quebracho"] { --felt: #4a2412; --felt-dark: #221008; }
body[data-theme="altiplano"] { --felt: #12545c; --felt-dark: #06272b; }
/* Paños PREMIUM con dibujo propio (el color base para bordes y brillos). */
body[data-theme="aguayo"] { --felt: #7a2448; --felt-dark: #3a1030; }
body[data-theme="cerros"] { --felt: #8a4a30; --felt-dark: #3d1e2a; }
body[data-theme="fileteado"] { --felt: #12402a; --felt-dark: #062015; }
:root { --cuero-a: #33190d; --cuero-b: #200f07; }
body[data-cuero="negro"] { --cuero-a: #1e1e22; --cuero-b: #0e0e12; }
body[data-cuero="bordo"] { --cuero-a: #3e1420; --cuero-b: #240a12; }
body[data-cuero="ingles"] { --cuero-a: #1e3325; --cuero-b: #0f1d14; }
body[data-cuero="marino"] { --cuero-a: #1a2438; --cuero-b: #0d1420; }
body[data-cuero="habano"] { --cuero-a: #5a3a22; --cuero-b: #38220f; }
body[data-cuero="piedra"] { --cuero-a: #34343a; --cuero-b: #1c1c20; }
body[data-cuero="purpura"] { --cuero-a: #33203e; --cuero-b: #1d1024; }
/* Los cuatro cueros de la segunda tanda también estaban MUDOS (catálogo
sin CSS). Y dos nuevos con alma norteña. */
body[data-cuero="tabaco"] { --cuero-a: #4a2c14; --cuero-b: #2a180a; }
body[data-cuero="oliva"] { --cuero-a: #33391c; --cuero-b: #1a1e0d; }
body[data-cuero="terracota"] { --cuero-a: #5a2c1c; --cuero-b: #31160e; }
body[data-cuero="pizarra"] { --cuero-a: #2c3138; --cuero-b: #14171b; }
body[data-cuero="poncho"] { --cuero-a: #6d1710; --cuero-b: #380a06; }
body[data-cuero="norte"] { --cuero-a: #43263e; --cuero-b: #22112a; }
/* El Poncho salteño lleva sus dos franjas negras tejidas en el cuero. */
body[data-cuero="poncho"] .rivalrow, body[data-cuero="poncho"] .mano {
background:
var(--leather-tex),
repeating-linear-gradient(90deg,
transparent 0 40px, rgba(8,3,2,.85) 40px 58px,
transparent 58px 96px, rgba(8,3,2,.85) 96px 114px),
linear-gradient(180deg, var(--cuero-a) 0%, var(--cuero-b) 100%);
}
header {
background: linear-gradient(180deg, rgba(30,18,9,.94), rgba(15,9,4,.9));
border-bottom: 1px solid rgba(232,195,74,.5);
box-shadow: 0 5px 20px rgba(0,0,0,.5);
}
.hrow { display: flex; align-items: center; gap: 9px; padding: 9px 14px 5px; }
.wordmark {
font-size: 19px; letter-spacing: 1.5px; font-family: 'Trocchi', Georgia, serif; font-weight: normal;
background: linear-gradient(180deg, #ffe66d 5%, #ffb347 38%, #ff7a1c 62%, #d43d2a 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.85));
}
header .spacer { flex: 1; }
.hbtn {
/* (2026-09-07) 44 y no 37: es el piso táctil que la casa YA usa en otros cinco lugares
(.gflecha), y éstos son los dos únicos botones que están SIEMPRE en pantalla durante la
partida. No es cumplimiento —37 ya pasa el mínimo estricto de WCAG— es calidad táctil para
quien juega con el pulgar, parado o en movimiento. */
width: 44px; height: 44px; border-radius: 50%; padding: 0; flex: none;
border: 1.5px solid rgba(232,195,74,.6);
background:
radial-gradient(circle at 32% 26%, rgba(255,230,160,.3), rgba(232,195,74,.08) 45%, rgba(0,0,0,.5));
box-shadow:
inset 0 1px 0 rgba(255,230,160,.35), inset 0 -2px 4px rgba(0,0,0,.6),
0 2px 6px rgba(0,0,0,.5);
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: transform .12s ease, border-color .2s ease;
}
.hbtn:active { transform: scale(.88); }
.hbtn svg { width: 17px; height: 17px; stroke: #e8c34a; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hinfo {
text-align: center; font-family: 'Trocchi', Georgia, serif;
font-size: 9.5px; letter-spacing: 1.9px; text-transform: uppercase;
color: rgba(243,223,158,.82); padding: 0 12px 8px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board {
flex: 1; display: flex; flex-direction: column; min-height: 0;
/* Paño a pantalla completa: la columna no deja aire a los costados. */
width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 0 0; gap: var(--tablero-gap);
/* Jugar es una pantalla fija: no se corre ni un pixel. Antes esto era
`overflow-y: auto` como red de seguridad para pantallas cortas, y esa red
convertía cualquier sobra de 2 px en una pantalla que se movía sola. Lo
que aguanta ahora es el reparto del alto: la mano tiene techo (--hand-w),
el piso del paño se achica con la pantalla, y todos pueden encoger. */
overflow: hidden; overscroll-behavior: contain; touch-action: manipulation;
}
/* ---- players ---- */
.playerrow { display: flex; align-items: center; gap: 10px; min-height: 54px; }
/* La fila de arriba: los controles de mando son intocables y la pastilla del
rival es la que cede. Antes la pastilla tenía `min-width: auto` y no cedía
nunca, así que a 390 px de ancho el botón de menú se salía de la pantalla
(llegaba a 404). Las zonas seguras entran en el relleno: en un teléfono con
muesca en horizontal, 10 px pelados no alcanzan. */
.rivalrow {
height: var(--fila-rival-h); overflow: visible; flex: none; gap: 4px;
padding: 0 calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));
}
/* Cuántas veces le ganaste y cuánto falta: la estrella se gana ganando. */
.grival .gcuenta { font-family: 'Trocchi', Georgia, serif; font-size: 11px; color: #9c8f70; margin-top: 3px; }
/* ===== LA RUEDA: LA MESA DE TRES Y CUATRO (dueño, 2026-09-05: "que se sienta diseñada para
Desarrollo: Docs/Notas-css-arranque.md, nota 6. */
#mesaRivales, #silla1 { display: contents; }
body.mesa-de-mas .rivalrow {
display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-rows: 40px 40px;
gap: 0 2px; padding-top: 1px; padding-bottom: 1px;
}
body.mesa-de-mas .rivalrow > .audiomini { grid-area: 1 / 1 / 3 / 2; flex-direction: column; justify-content: space-between; gap: 0; }
body.mesa-de-mas .rivalrow > #pauseBtn { grid-area: 1 / 3; }
body.mesa-de-mas .rivalrow > #menuBtn { grid-area: 2 / 3; }
/* Los mandos, parados de a dos, miden 40 —el piso de la casa (L14) y el mismo talle que la Casa
del 15 les da en 320 px—: con 44 la fila pediría 8 px más, y en la rueda cada píxel de alto
es paño. El anillo que se ve sigue midiendo 30. */
body.mesa-de-mas .rivalrow .hbtn { width: 40px; height: 40px; }
body.mesa-de-mas .rivalrow .hbtn::before { inset: 5px; }
body.mesa-de-mas #mesaRivales {
grid-area: 1 / 2 / 3 / 3; display: flex; min-width: 0;
justify-content: space-evenly; align-items: center; gap: 4px;
}
/* LA MEDIDA DE LA SILLA, EN CUATRO NÚMEROS (segunda pasada, 2026-09-05): la cara, el ancho
Desarrollo: Docs/Notas-css-arranque.md, nota 7. */
body.mesa-de-mas { --silla-cara: 40px; --silla-datos: 32px; --silla-dorso: 15px; --silla-max: 168px; }
/* La silla: una rejilla de dos renglones —la pastilla arriba, a todo el ancho de la silla; las
Desarrollo: Docs/Notas-css-arranque.md, nota 8. */
body.mesa-de-mas .silla, body.mesa-de-mas #silla1 {
display: grid; grid-template-columns: 1fr auto 6px auto 1fr; grid-template-areas: "chip chip chip chip chip" ". mano . pila .";
align-items: center; column-gap: 0; row-gap: 2px;
flex: 1 1 0; min-width: 0; max-width: var(--silla-max); cursor: pointer;
container-type: inline-size; container-name: silla; /* su ancho decide su postura (abajo) */
}
/* La pastilla del rival, SIN placa —una jerarquía a propósito, LOCAL → PAÑO → RIVALES—: la placa
Desarrollo: Docs/Notas-css-arranque.md, nota 9. */
body.mesa-de-mas .silla .hudchip {
grid-area: chip; min-width: 0; max-width: 100%;
display: grid; grid-template-columns: 1fr var(--silla-cara) 5px minmax(0, var(--silla-datos)) 1fr;
grid-template-areas: ". cara . puntos ." "nombre nombre nombre nombre nombre";
column-gap: 0; row-gap: 2px; align-items: center;
width: auto; height: auto; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
}
body.mesa-de-mas .silla .hudchip::before { display: none; } /* sin placa no hay costura */
body.mesa-de-mas .silla .pinfo { display: contents; } /* nombre y puntaje, cada uno en su celda */
body.mesa-de-mas .silla .avatar { grid-area: cara; width: var(--silla-cara); height: var(--silla-cara); border-width: 2px; }
/* El nombre, del talle del rival de enfrente a 360 px (11 px): en 87 px entran once letras y
el resto va con puntos suspensivos. */
body.mesa-de-mas .silla .pname {
grid-area: nombre; max-width: 100%; justify-self: center; text-align: center;
font-size: 11px; letter-spacing: .3px;
}
/* El puntaje: el número en su cápsula y, debajo, los dos renglones de siempre (lo cantado sin
Desarrollo: Docs/Notas-css-arranque.md, nota 10. */
body.mesa-de-mas .silla .pscore {
grid-area: puntos; flex-direction: column; align-items: flex-start; justify-content: flex-start;
gap: 1px; min-height: 40px; min-width: 0;
}
body.mesa-de-mas .silla .pextras { min-height: 21px; }
body.mesa-de-mas .silla .pline { display: flex; min-height: 10px; }
body.mesa-de-mas .silla .pscore b { height: 18px; padding: 0 5px; font-size: 12.5px; border-radius: 999px; }
body.mesa-de-mas .silla .pscore b .meta { display: none; }
body.mesa-de-mas .silla .pscore .pending, body.mesa-de-mas .silla .live { font-size: 10px; margin-left: 0; }
/* Las escobas, sin cápsula: en la silla el puntaje tiene 32 px reservados y la cápsula de la
pastilla grande (borde, relleno, sombra) se comía ocho; sobre el cuero oscuro de la fila la
escobita y su número se leen igual sin fondo, y "+4 🧹2" entra hasta en 320 px. */
body.mesa-de-mas .silla .hudchip .escobas { background: none; border: 0; box-shadow: none; padding: 0; gap: 1px; }
body.mesa-de-mas .silla .hudchip .escobas svg { width: 10px; height: 10px; }
/* El aro de turno: sin placa que encender, la LUZ late alrededor de la cara. El ::after de la
pastilla —la capa que late— deja de cubrir la placa y pasa a ser una pieza de la rejilla del
tamaño exacto del círculo. CON EL HALO DE LA CASA (revisión final, 2026-09-05): el mismo
anillo de 2 px y el mismo resplandor que late en la pastilla propia (.hudchip.turno::after:
30 px de luz sobre la placa; acá 24 con 2 de cuerpo, el talle de un círculo de 40), al mismo
latido (latir 1,05 s, heredado). Antes era un anillo de 2 px con 16 de luz y se leía menos
que el de la pastilla propia. La geometría no se mueve un píxel: la sombra no ocupa lugar.
Con la vuelta del reloj corriendo queda sólo la luz, como en la pastilla grande; y con menos
movimiento el halo queda encendido, quieto. */
body.mesa-de-mas .silla .hudchip:is(.turno, .apuro) { border: 0; box-shadow: none; }
body.mesa-de-mas .silla .hudchip:is(.turno, .apuro)::after {
position: static; inset: auto; grid-area: cara; width: var(--silla-cara); height: var(--silla-cara); border-radius: 50%;
}
body.mesa-de-mas .silla .hudchip.turno::after { box-shadow: 0 0 0 2px rgba(255,230,145,.95), 0 0 24px 2px rgba(255,196,60,.95); }
body.mesa-de-mas .silla .hudchip.running.turno::after { box-shadow: 0 0 22px 1px rgba(255,196,60,.85); }
/* La vuelta del reloj (online) corre ALREDEDOR DE LA CARA: el SVG deja de cubrir la placa y pasa a
ser la celda del círculo, encima de la foto; armarCircuito() la dibuja redonda. */
body.mesa-de-mas .silla .circuito { position: static; inset: auto; grid-area: cara; width: var(--silla-cara); height: var(--silla-cara); z-index: 6; }
.rivalrow .hudchip.ausente { opacity: .55; filter: grayscale(.7); transition: opacity .3s ease, filter .3s ease; }
/* Las cartas boca abajo, abanicadas, y el montón con su número: el renglón de abajo. El dorso
mide --silla-dorso (15 en el teléfono: la mano propia lo dobla diez veces, como en cualquier
mesa de cuatro; 18 en escritorio) y el montón es una pilita de tres dorsos al mismo talle. */
body.mesa-de-mas .silla .aihand { grid-area: mano; justify-self: end; margin: 0; }
body.mesa-de-mas .silla .aihand .cardbox { width: var(--silla-dorso); margin-left: calc(var(--silla-dorso) * -.3); }
body.mesa-de-mas .silla .aihand .cardbox:first-child { margin-left: 0; }
body.mesa-de-mas .silla .pilebtn { grid-area: pila; justify-self: start; margin: 0; padding: 0; gap: 3px; min-width: 0; min-height: 0; }
body.mesa-de-mas .silla .pilebtn .pstack { width: calc(var(--silla-dorso) + 6px); height: calc(var(--silla-dorso) * 1.5); }
body.mesa-de-mas .silla .pilebtn .pstack svg { width: calc(var(--silla-dorso) * .85); }
body.mesa-de-mas .silla .pilebtn b { font-size: 11px; }
/* El «0» de un montón todavía vacío va atenuado como su pilita (.35) hasta la primera levantada:
tres ceros a plena luz al lado de tres pilitas apagadas eran ruido (revisión final, 2026-09-05). */
/* .6 y no .35: apagado SIGNIFICA «montón vacío», así que sigue apagado — lo justo para leerse. */
body.mesa-de-mas .silla .pilebtn.vacio b { opacity: .6; }
/* Con la silla de 97 o más (cuatro en la mesa desde 390 px de pantalla) el dorso sube a 17
(revisión final, 2026-09-05: «dorsos de 15 px que se leen como manchitas»): el renglón de abajo
pide 80 px (tres dorsos abanicados 41 + pista 6 + montón 33) y entra con aire; en 87 (tres
sillas en 360) un montón de dos cifras asomaría, así que ahí queda en 15. La silla pasa de 78,6
a 81,6 de alto y sigue adentro de la fila de 84: la fila y el paño no cambian, y nada respira.
Los cuatro números de la silla se escriben en sus HIJOS (.silla > *): una container query no
puede vestir a su propio contenedor, y todo lo que los lee vive adentro de la pastilla, de las
cartas o del montón. */
@container silla (min-width: 97px) {
body.mesa-de-mas .silla > * { --silla-dorso: 17px; }
}
/* LA POSTURA ANCHA (la silla de 120 px o más: la mesa de tres en el teléfono, todas en escritorio):
la cara de 46 a la izquierda y, al lado, el nombre sobre el puntaje con sus extras en fila —la
pastilla grande sin placa—. Los datos reservan hasta 104 px (en 132 de silla ceden a 78); la silla
llega a 168 y el dorso a 18. La fila sigue midiendo 84: 46 de cara + 2 + 27 de dorso. */
@container silla (min-width: 120px) {
body.mesa-de-mas .silla > * { --silla-cara: 46px; --silla-datos: 104px; --silla-dorso: 18px; }
body.mesa-de-mas .silla .hudchip {
grid-template-columns: 1fr var(--silla-cara) 8px minmax(0, var(--silla-datos)) 1fr;
grid-template-areas: ". cara . datos .";
}
body.mesa-de-mas .silla .pinfo { display: flex; grid-area: datos; }
body.mesa-de-mas .silla .pname { font-size: 12px; letter-spacing: .5px; text-align: left; }
/* En fila el número va pegado al borde izquierdo de la celda de datos, bajo la primera letra
del nombre (flex-start): con `center` heredado del teléfono corría 11-15 px a la izquierda
cada vez que los extras asomaban a su derecha. Los renglones reservados de arriba valen acá
también: los extras miden 21 en los tres estados y el número no se mueve. */
body.mesa-de-mas .silla .pscore { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 0; gap: 3px; }
body.mesa-de-mas .silla .pscore b { height: 20px; padding: 0 6px; font-size: 14px; }
}
.rivalrow #aiHand { flex: 0 1 auto; min-width: 0; }
.rivalrow > .audiomini, .rivalrow > .hbtn, .rivalrow #aiPileBtn { flex: none; }
.rivalrow .avatar { width: 28px; height: 28px; }
.rivalrow .pilebtn { position: static; transform: none; margin-left: 2px; gap: 4px; padding: 2px; }
.rivalrow .pilebtn b { font-size: 14px; }
.rivalrow .pilebtn .pstack { width: 28px; height: 38px; }
.rivalrow .pilebtn .pstack svg { width: 23px; }
.rivalrow .hudchip { padding-right: 9px; }
/* ZONA DE TOQUE REAL DE 40 × 40 (L14, corregido 2026-08-27). Cada botón de
mando ocupa una caja PROPIA de 40 px, sin márgenes negativos: los
rectángulos tocables no se pisan entre sí. El anillo que se ve (30 px) lo
dibuja ::before y el ícono mide 16 px. Para que cuatro cajas de 40 entren
al lado de la pastilla fija (--pastilla-w reserva 240 px para el resto), la
fila cede aire donde NO se toca: relleno 4 px, separación 2 px, el abanico
del rival más apretado y su pila más chica. La pastilla y el nombre del
rival no pierden un píxel. */
.rivalrow {
gap: 2px;
padding: 0 calc(4px + env(safe-area-inset-right)) 0 calc(4px + env(safe-area-inset-left));
}
.rivalrow .hbtn, .rivalrow .audiomini .hbtn {
width: 40px; height: 40px; margin: 0; flex: none; position: relative;
border: 0; background: none; box-shadow: none;
}
.rivalrow .hbtn::before {
content: ''; position: absolute; inset: 5px; border-radius: 50%;
border: 1.5px solid rgba(232,195,74,.6);
background: radial-gradient(circle at 32% 26%, rgba(255,230,160,.3), rgba(232,195,74,.08) 45%, rgba(0,0,0,.5));
box-shadow: inset 0 1px 0 rgba(255,230,160,.35), inset 0 -2px 4px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.5);
}
.rivalrow .hbtn svg, .rivalrow .audiomini .hbtn svg { width: 16px; height: 16px; position: relative; }
.rivalrow .audiomini { gap: 2px; }
.rivalrow .aihand .cardbox { margin-left: -20px; }
.rivalrow .aihand .cardbox:first-child { margin-left: 0; }
.rivalrow .pilebtn { margin-left: 0; gap: 2px; padding: 1px; }
.rivalrow .pilebtn b { font-size: 12px; }
.rivalrow .pilebtn .pstack { width: 22px; height: 30px; }
.rivalrow .pilebtn .pstack svg { width: 18px; }
.rivalrow .hudchip { padding-right: 6px; }
/* El nombre del rival lleva el mismo talle que el propio (12 px / .35 px); a
360 px, donde la pastilla mide 120, baja un punto para que entre entero. */
.rivalrow .pname { font-size: 12px; letter-spacing: .35px; }
@media (max-width: 360px) {
.rivalrow .pname { font-size: 11px; letter-spacing: .3px; }
}
.avatar {
width: 58px; height: 58px; border-radius: 50%; flex: none; overflow: hidden;
border: 2.5px solid var(--gold);
box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 0 6px rgba(0,0,0,.3);
background: radial-gradient(circle at 35% 28%, #4a2f18, #1d1108);
}
.avatar svg { width: 100%; height: 100%; display: block; }
/* (Dueño, 2026-08-30) El renglón del título suma 9,5 px a la columna, así que el aire entre
renglones baja de 2 a 1: con 2 el bloque medía 60,7 dentro de una pastilla de 60 y el
marcador asomaba por abajo. Medido: ahora 56,7, con 1,6 de aire arriba y abajo. */
.pinfo { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 86px; justify-content: center; }
.pname {
font-family: 'Trocchi', Georgia, serif; font-size: 12.5px; letter-spacing: .8px;
color: var(--gold); text-transform: uppercase; line-height: 1.1;
max-width: 136px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
/* (Dueño, 2026-08-30) EL CÍRCULO, DEL TAMAÑO EXACTO PARA LA PASTILLA. La pastilla mide 60
de alto: con 52 de círculo más el anillo de 2,5 quedaban 57, y con la cinta encima la
columna llegaba a 59 — medio píxel de aire, y a la vista se salía. Con 46 quedan SIETE
píxeles de aire arriba y abajo: el círculo se apoya centrado y la pastilla vuelve a
contenerlo. Es lo mismo que pidió el dueño: darle el tamaño exacto en vez de recortarlo. */
.rivalrow .avatar, .myrow .avatar { width: 46px; height: 46px; align-self: center; }
/* Ancho CLAVADO: la fila del puntaje reserva el lugar del +N verde y del
+N🎵 pendiente desde el vamos, así la pastilla no respira cuando
aparecen y desaparecen (mandato: la pastilla no cambia de tamaño). */
/* (Dueño, 2026-08-30) LA FILA DEL MARCADOR TIENE EL ANCHO QUE HAY, y cada cosa su lugar
reservado. Venía declarada en 112 px arrancando en el 68 de la pastilla: terminaba en el
180 de una pastilla que mide 158, así que se salía — y eso estaba tapado porque la escoba
y el "+N" flotaban por encima. Ahora son 82, que es lo que de verdad queda, y los extras
van en una COLUMNA propia al lado del número: arriba los puntos recién ganados, abajo las
escobas. Nada flota, nada se pisa y nada se corta. */
/* EL MARCADOR NO PUEDE SER MÁS ANCHO QUE SU PASTILLA (dueño, 2026-08-31).
Tenía ancho FIJO —82 primero, 104 después— dentro de un hueco que a 390 px mide menos que
eso, y `flex: none` le prohibía encogerse: se salía 14 px por la derecha, sobre el cuero.
Poner un número fijo más chico no arregla nada, sólo mueve el punto donde vuelve a pasar:
el número correcto depende del ancho de la pastilla, del nombre y del idioma.
Ahora pide lo que mide su contenido, con techo en el hueco que tiene: `max-width: 100%`
hace imposible el desborde por construcción, no por haber acertado la cuenta. La guarda
que lo mide es tools/qa/nada-se-sale-de-su-pastilla.mjs. */
.pscore { font-family: 'Trocchi', Georgia, serif; font-size: 12px; opacity: .95;
display: flex; align-items: center; gap: 2px; cursor: pointer;
width: auto; max-width: 100%; min-width: 0; flex: 0 1 auto; }
.pextras { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
/* DOS RENGLONES, NO UNO (dueño, 2026-08-31: "el número celestito +1 y +3 se salen por el
extremo derecho de la pastilla donde está mi avatar").
En la pastilla conviven CUATRO cosas: el puntaje con su meta ("0/15"), los puntos cantados
que todavía no se anotan ("+10♪"), la proyección del reparto en curso ("+3") y las escobas.
Estaban las tres últimas en UNA fila, así que el ancho que pedían era la SUMA de las tres
— y la suma no entra en ninguna pastilla que quepa en un teléfono: lo que sobraba se salía
por la derecha, sobre el cuero, y encima tapado por nada.
Ahora la columna tiene dos renglones y su ancho es el del renglón MÁS ANCHO, no la suma:
arriba lo cantado, abajo la proyección con las escobas. Cabe, y además queda ordenado por
significado — arriba lo que ya es tuyo aunque no esté anotado, abajo lo que depende de cómo
termine el reparto. */
/* gap 3→2 (2026-09-03): con proyección de tres cifras y tres escobas, la fila de abajo
asomaba 2 px por la derecha de la pastilla; este píxel y los dos del relleno de escobas
son la diferencia entre entrar y asomarse. Lo mide nada-se-sale-de-su-pastilla.mjs. */
.pline { display: flex; align-items: center; gap: 2px; line-height: 1; }
.pline:empty { display: none; }
/* Un renglón cuyos dos huecos están vacíos no ocupa lugar: sin esto, la fila de abajo
reservaba su alto en todos los repartos donde todavía no hay ni proyección ni escobas. */
.pline:not(:has(> *:not(:empty))) { display: none; }
.pline .live { margin-left: 0; }
/* LA PLACA YA NO RESERVA ANCHO DE MÁS. Los 44 px de mínimo estaban para que un puntaje de
una cifra no quedara flaco; desde que la placa lleva el puntaje Y la meta ("15/15") nunca
es corta, y ese mínimo era ancho regalado que le faltaba a los extras de al lado. El
relleno también baja: con cuatro datos en una pastilla de teléfono, cada píxel se usa. */
.pscore b {
min-width: 0; height: 32px; box-sizing: border-box; padding: 0 6px;
display: inline-flex; align-items: center; justify-content: center; line-height: 1;
color: var(--gold); font-size: 20px; font-family: 'Trocchi', Georgia, serif;
background: linear-gradient(180deg, rgba(12,7,3,.62), rgba(24,14,6,.5));
border: 1px solid rgba(232,195,74,.34); border-radius: var(--r-med);
box-shadow: inset 0 1px 6px rgba(0,0,0,.55), inset 0 -1px 2px rgba(232,195,74,.15), 0 1px 5px rgba(0,0,0,.4);
text-shadow: 0 1px 4px rgba(0,0,0,.6);
transition: transform .15s ease, box-shadow .15s ease;
}
.pscore:active b { transform: scale(.95); }
/* A CUÁNTOS PUNTOS SE JUEGA, EN EL MARCADOR (dueño, 2026-08-31): "cuando se está en una
partida de alguna forma debe estar escrito a cuánto se juega, a cuántos puntos se juega".
Estaba escrito —"Meta 15"— pero ADENTRO del cajón "La mesa habla", que está cerrado
mientras se juega: es lo mismo que no estar. Ahora el puntaje se lee "7/15", que es como
se lee un puntaje contra una meta en cualquier juego, y se ve sin abrir nada.
La meta es el DENOMINADOR y se nota: más chica y más apagada, para que el número grande
siga siendo el que se busca de un vistazo y no parezcan dos puntajes. */
.pscore b .meta {
font-size: 10px; font-style: normal; font-weight: normal;
color: rgba(232,195,74,.6); margin-left: 1px; letter-spacing: .2px;
align-self: center;
}
.pscore b .meta:empty { display: none; }
.pscore .beanicon { width: 17px; height: 17px; display: inline-block; }
/* EL "+N" DE LO RECIÉN GANADO va EN LA FILA, pegado al número: es lo que acabás de sumar,
y se lee de un golpe junto al puntaje. Se probó ponerlo flotando arriba y chocaba con el
nombre y con el título: un elemento que flota es un elemento que tarde o temprano se
monta sobre otro. */
.pscore .pending {
font-size: 11px; color: #efd27a; font-style: normal; margin-left: 2px;
opacity: .95; animation: floaty 2s infinite;
}
.pscore .pending:empty { display: none; }
@keyframes floaty { 50% { transform: translateY(-2px); opacity: .65; } }
.beancluster {
display: grid; grid-template-columns: repeat(5, 17px); gap: 3px;
background: rgba(0,0,0,.25); border-radius: 8px; padding: 5px;
}
.bean { width: 16px; height: 16px; display: inline-block; }
/* el anotador de bar: cinco palitos, el último cruzado */
.grupo5 { position: relative; display: inline-flex; gap: 4px; padding: 2px 10px 2px 2px; }
.palito { width: 7px; height: 30px; display: inline-block;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
/* LOS BOTONES DEL ANOTADOR EN UN TELÉFONO ANGOSTO (revisión final de la rueda, 2026-09-05): en
360 px los tres botones —Escarbadientes, Maíz seco, Cerrar— se encogían a la vez en una fila y
«Escarbadientes» quedaba en «Escarbadi». Hasta 380 px la fila se parte: las dos opciones
juntas arriba (un punto menos de letra, dos renglones si hace falta) y «Cerrar» abajo, a todo
el ancho. Si aun así una opción queda más angosta que la palabra, el guion blando del HTML la
parte en «Escarba-» / «dientes» en vez de cortarla. */
@media (max-width: 380px) {
#beanKindRow { flex-wrap: wrap; row-gap: 8px; }
#beanKindRow [data-beans] { flex: 1 1 auto; font-size: 14px; line-height: 1.1; padding-inline: 12px; }
#beanKindRow #anotadorClose { flex: 1 1 100%; }
}
.palito svg { width: 100%; height: 100%; display: block; }
.palito.cruzado {
position: absolute; left: 0; top: 0; width: 46px; height: 30px;
transform: rotate(66deg) scaleY(1.05); transform-origin: 22px 15px;
}
.palito.cruzado svg { width: 7px; height: 100%; margin: 0 auto; }
.beanside { display: flex; flex-direction: column; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.beanside h4 { font-size: 14px; color: var(--gold); letter-spacing: 1px; }
.beanside .total { font-size: 26px; color: var(--cream); font-family: 'Trocchi', Georgia, serif; }
.beansep { width: 2px; align-self: stretch; background: rgba(232,195,74,.35); border-radius: 2px; flex: none; }
.beantray { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; max-height: 38vh; overflow-y: auto; }
.beanempty { font-size: 12px; opacity: .6; font-style: normal; }
/* (Dueño, 2026-08-30) LA ESCOBITA YA NO SE PARA SOBRE LA CARA. Era una insignia pegada
al avatar —para no ocupar lugar en la fila— y le tapaba el mentón, igual que la cinta
del título. Ahora se apoya en el BORDE DE ABAJO DE LA PASTILLA, del lado del marcador:
ahí hay cuero libre, se lee igual de bien y no obstruye a nadie. La foto del avatar
queda entera: es la regla, y vale para todos los símbolos. */
/* (Dueño, 2026-08-30, con la foto en la mano) LA ESCOBA DEJA DE FLOTAR.
Venía posicionada a mano —primero encima del avatar, después en una esquina— y las dos
veces terminó tapando algo: la cara primero, y el "+7" de los puntos recién ganados
después, del que sólo asomaba la puntita. La causa no era el lugar elegido sino que
FLOTABA: lo que se posiciona a mano se monta sobre lo que aparezca mañana.
Ahora va EN LA FILA del marcador, después del "+N", en el orden en que se leen las
cosas: cuánto vas, cuánto acabás de sumar, cuántas escobas llevás. Ahí no puede pisar a
nadie, porque el navegador le hace lugar. */
.hudchip .escobas {
position: static; z-index: 6; flex: none; margin-left: 0;
display: inline-flex; align-items: center; gap: 1px;
background: linear-gradient(180deg, rgba(34,20,8,.97), rgba(16,9,4,.97));
border: 1px solid rgba(232,195,74,.65); border-radius: 999px;
/* El relleno de la derecha bajó de 6 a 4: la pastilla de escobas comparte renglón con la
proyección del reparto, y en el peor caso —puntaje de dos cifras contra dos, canto sin
anotar, proyección de dos cifras y tres escobas, todo a la vez en un teléfono de 390—
esos dos píxeles eran la diferencia entre entrar y asomarse. */
padding: 1px 3px 1px 3px; line-height: 1; /* 4→3 por lado (2026-09-03): ver el comentario de .pline */
box-shadow: 0 2px 5px rgba(0,0,0,.55);
white-space: nowrap;
}
.hudchip .escobas:empty { display: none; }
.hudchip .escobas svg { width: 11px; height: 11px; }
.escobas .escn {
font-family: 'Trocchi', Georgia, serif; font-weight: normal;
font-style: normal; font-size: 10px; color: var(--gold);
}
/* Proyección del reparto en curso: lo que ya tenés ganado si el reparto
terminara ahora (7 de oro, mayorías, escobas). Vive y respira. */
.live { font-size: 11px; font-family: 'Trocchi', Georgia, serif; font-weight: bold;
color: #8fdcA8; margin-left: 4px; }
/* My row, mirror of the rival's: everything mine lives here — never on the
cards, never on the felt. The ♪ button reserves its slot with visibility
so nothing shifts when it appears. */
/* A 390 px la fila queda EXACTA: 10+135+8+58+8+0+8+40+8+105+10 = 390, y el
nombre se comía hasta quedar en "JUG…". El lugar sale de las separaciones y
del relleno —que sobraban— y no del botón de cantar ni de las caras.
Las zonas seguras entran en el relleno, como en la fila de arriba. */
.myrow {
flex: none; height: var(--fila-mia-h); display: flex; align-items: center; gap: 6px;
padding: 0 calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));
z-index: 11; position: relative;
}
/* En la fila de abajo el nombre va un punto más chico y con menos aire entre
letras: entra entero en vez de cortarse a la tercera letra. */
.myrow .pname { font-size: 12px; letter-spacing: .35px; }
/* El talle chico: un nombre de más de 9 letras achica la letra antes de
cortarse. "CESARNALDO" entero vale más que "CESARN…" prolijo. */
.pname.larga { font-size: 10.5px; letter-spacing: 0; }
/* Regla de la fila: el botón CANTAR y las caras tienen medida fija; si falta
lugar, lo que se recorta es el nombre — nunca el botón. */
/* LA PASTILLA QUEDA AFUERA DE ESTA REGLA, y por eso lleva `:not(.hudchip)`.
La pastilla es `class="playerrow hudchip"`, así que este selector —dos
clases— le ganaba en especificidad a `.hudchip` —una— y le devolvía el
`flex-shrink: 1` que la pastilla no puede tener. Resultado medido en una
pantalla de 320: la del rival medía 100 y la mía 83. Las dos tenían la misma
medida escrita y una de las dos se encogía igual, porque la última palabra
no la tenía la regla que la escribía. */
.myrow .playerrow:not(.hudchip) { min-width: 0; flex: 0 1 auto; }
.myrow .pinfo, .rivalrow .pinfo { min-width: 0; flex: 0 1 auto; }
.myrow .avatar, .rivalrow .avatar, #hablarBtn, #singBtn, .myrow .pilebtn { flex: none; }
.myrow .spacer { flex: 1 1 0; min-width: 0; }
.myrow .pilebtn { position: static; transform: none; }
/* (2026-09-05) EL NOMBRE PROPIO ENTRA EN 360. La pastilla mide --pastilla-w, la MISMA que la del
rival (mandato del dueño: la misma medida para los dos, y ninguna respira; lo mide
qa-pano-fijo.mjs). En 360 medía 111 y adentro quedaban 38 px para el nombre —y hasta el rango,
«CHANGUITO», salía en tres letras y puntos—. Dos cosas, sin tocar ese mandato: la piel lleva los
mandos de la fila del rival al piso de 40 (L14) también de 360 a 430, y esos 16 px van a las dos
pastillas (127 en 360); y adentro de la propia el relleno de la derecha y el aire con la cara bajan
a 4 (eran 14 y 10; la cara conserva sus 3 px de aire a la izquierda, que mide avatar-sin-encima).
Medido en 360 × 640: 68 px para el nombre —ocho letras a 12 px, nueve a 10 con el talle chico
propio, «CHANGUITO» entero con el aire entre letras de .5—; once letras desde 390. El montón propio
toma el talle del montón del rival (pilita 22 × 30, número 12), con su zona de toque de 40. */
.myrow .hudchip { gap: 4px; padding-right: 4px; }
.myrow .pname.larga { font-size: 10px; }
.myrow .pilebtn { gap: 2px; padding: 1px; min-height: 40px; }
.myrow .pilebtn b { font-size: 12px; }
.myrow .pilebtn .pstack { width: 22px; height: 30px; }
.myrow .pilebtn .pstack svg { width: 18px; }
/* El rango («CHANGUITO», lo primero que ve un jugador nuevo) entra entero en esos 68 px con medio
píxel de aire entre letras, no con el 1,1 de la placa del Perfil.
(2026-09-14) Medido de nuevo con la renovación visual: a 9,5 px la palabra pedía 71 y la caja
da 68, así que salía «CHANGUIT…» —el rango más común, el del jugador nuevo, recortado—. Baja
a 9 px, que mide 63 y deja cinco de aire, y conserva el medio píxel entre letras. Lo mide
nombre-propio-entero.mjs. */
.myrow .ptitulo { letter-spacing: .5px; font-size: 9px; }
.myrow .spacer { flex: 1; }
/* LA PASTILLA, COMO PLACA (dueño, 2026-08-23: "lo veo muy básico").
El juego ya tenía su lenguaje y la pastilla se había quedado afuera: los
accesos del hogar son placas de cuero con bisel de oro, costura y radio 16
— y eso mismo nació de un "se ve muy básico" del dueño el 22 de agosto.
Ahora la pastilla habla ese idioma: mismo cuero, mismo bisel, misma
costura, mismo radio. Deja de ser una lozenge lisa de 999px, que además
era de los pocos radios del juego fuera del sistema. */
.hudchip {
position: relative;
/* MEDIDA FIJA EN LOS DOS EJES, y la misma para los dos jugadores. */
width: var(--pastilla-w); flex: none;
height: 60px; box-sizing: border-box;
background:
linear-gradient(165deg, rgba(255,255,255,.09), transparent 42%),
radial-gradient(ellipse 90% 60% at 50% -10%, rgba(232,195,74,.20), transparent 65%),
var(--leather-tex),
linear-gradient(180deg, #24140a 0%, #150c05 55%, #0a0503 100%);
border: 1px solid rgba(232,195,74,.62);
border-radius: var(--r-med); padding: 3px 14px 3px 3px;
box-shadow:
inset 0 1px 0 rgba(255,236,170,.32),
inset 0 -3px 6px rgba(0,0,0,.6),
inset 0 0 0 1px rgba(0,0,0,.45),
0 6px 14px rgba(0,0,0,.5);
}
/* la costura del cuero, la misma de las placas del hogar */
.hudchip::before {
content: ''; position: absolute; inset: 4px; border-radius: var(--r-costura);
pointer-events: none; border: 1px dashed rgba(232,195,74,.28); z-index: 4;
}
/* TU TURNO: la pastilla ENTERA late en dorado — imposible no verla.
El aro duro queda SIEMPRE de 2px (un aro que engorda lee como pastilla que
cambia de tamaño); lo que late es la LUZ, no el borde.
LA LUZ LATE CON OPACITY, NO CON box-shadow. Animar una sombra obliga al
teléfono a repintar el elemento y todo lo que la sombra toca, en CADA
cuadro. Cuatro animaciones así corriendo a la vez dejaban el juego en 2
cuadros por segundo. La sombra ahora es fija y vive en una capa aparte a la
que solo se le sube y baja la opacidad: eso lo resuelve el compositor sin
repintar nada. */
.hudchip.turno {
border-color: #ffdf82;
box-shadow: 0 0 0 2px rgba(255,222,125,.45), 0 0 12px rgba(232,195,74,.5), 0 3px 10px rgba(0,0,0,.5);
}
.hudchip.turno::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: 0 0 0 2px rgba(255,230,145,.95), 0 0 30px rgba(255,196,60,.95);
animation: latir 1.05s ease-in-out infinite;
will-change: opacity;
}
/* CON LA VUELTA CORRIENDO, EL LATIDO NO LE DISCUTE EL FILO. El aro duro del
turno vive en el mismo borde por el que ahora corre el circuito: dos líneas
encimadas, una latiendo y la otra virando de color, es ruido. Mientras la
vuelta corre queda sólo la LUZ del turno —que además ya no hace falta que
grite: el circuito sólo aparece cuando el reloj es tuyo—. */
.hudchip.running.turno::after { box-shadow: 0 0 26px rgba(255,196,60,.85); }
/* UN solo latido para todo el juego: sube y baja la opacidad, nada más. */
@keyframes latir { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
/* Los últimos seis segundos: el latido se vuelve ROJO y urgente. */
/* (2026-09-15) El apuro tenía tres rojos distintos entre acá y casa-del-15.css. Ahora los
tres son LA brasa: el tono 29, el de la laca de los mazos. */
.hudchip.apuro {
border-color: #f27e6e;
animation: pillapuro .5s ease-in-out infinite;
}
@keyframes pillapuro {
0%, 100% { box-shadow: 0 0 0 2px #df554780, 0 0 12px #be241b8c, 0 3px 10px rgba(0,0,0,.5); }
50% { box-shadow: 0 0 0 2px #f27e6e, 0 0 32px #be241b, 0 3px 10px rgba(0,0,0,.5); }
}
/* LA CUENTA REGRESIVA ES UN CIRCUITO, NO UNA BARRA (dueño, 2026-08-24).
Había pasado a ser un riel horizontal metido abajo del nombre, y el dueño lo
vio de una: "parece que se volvió una barra horizontal; que siga
contorneando siempre, como si fuese un circuito de Grand Prix, los bordes de
la pastilla".
Es una vuelta al perímetro, no un contorno de depuración: va METIDA adentro
de la costura, con el grosor de un filete y no de un borde, y su color viaja
del verde al rojo. Larga en la esquina de arriba a la izquierda y corre en
sentido horario — la línea de largada de un circuito.
RENDIMIENTO: lo que se anima es `stroke-dashoffset` de UN trazo, sobre una
caja de 152x60. No se anima ninguna sombra ni ningún ancho, que es la regla
que salvó al juego el día que cuatro `box-shadow` animados lo dejaron en dos
cuadros por segundo. El resplandor es un segundo trazo con el mismo
dashoffset: se pinta, no se difumina. */
/* SOBRE EL FILO, NO POR ADENTRO (dueño, 2026-08-25: "se desliza de una forma
desprolija y por la parte interna").
Corría metida 4,6 px, y la costura punteada del cuero vive a 4: dos líneas
casi encimadas y desalineadas por medio píxel, que es exactamente como se ve
algo sucio. Ahora el SVG cubre la CAJA DE BORDE (`inset: -1px`, que es el
grosor del borde) y la vuelta corre por el eje del filo mismo: mientras
dura, la viborita ES el borde de la pastilla. La costura queda adentro,
sola, y se vuelve a leer. */
.circuito {
position: absolute; inset: -1px; z-index: 6; pointer-events: none;
opacity: 0; transition: opacity .18s ease; overflow: visible;
}
.hudchip.running .circuito { opacity: 1; }
.circuito rect { fill: none; stroke-linecap: round; }
/* FILETE, NO MARCADOR. Con 2,6 de pista y 5,5 de halo la vuelta leía como un
resaltador fluorescente encima de la placa. Un filete fino con su halo justo
se lee igual de bien y deja ver el cuero por debajo. El halo ahora desborda
hacia AFUERA —el SVG no recorta—, así que la luz cae fuera de la placa en
vez de ensuciar el cuero. */
.circuito .halo { stroke: currentColor; stroke-width: 5.2; opacity: .20; }
.circuito .pista { stroke: currentColor; stroke-width: 1.8; }
/* LA TROMPA. Un circuito sin puntero es una línea que se acorta; con esta
gota adelante se lee lo que es: una vuelta que está corriendo. Es el mismo
trazo con otro tramo visible — ni una sombra animada, ni un elemento más. */
.circuito .trompa { stroke: currentColor; stroke-width: 3.4; opacity: .95; }
/* Sin numerito: el circuito que vira al rojo y los tics del final
cuentan el tiempo solos. */
/* Las cartas boca abajo de un rival (.aihand): la de enfrente es #aiHand; en la rueda de tres y
cuatro cada silla trae la suya con la misma clase. */
.aihand { display: flex; margin-left: auto; align-items: center; }
.aihand .cardbox { width: 24px; margin-left: -16px; }
.aihand .cardbox:first-child { margin-left: 0; }
.chips { display: flex; gap: 5px; flex-wrap: nowrap; height: 22px; overflow: hidden; }
.chip {
font-size: 11px; font-family: 'Trocchi', Georgia, serif; background: rgba(212,169,41,.18);
border: 1px solid var(--oro); border-radius: var(--r-med); padding: 2px 9px; color: #f3df9e;
}
.pilebtn {
/* El mazo de levantadas ES el botón: pilita de dorsos con el número al
lado, sin caja — elegante y tocable (abre los juegos levantados). */
border: none; background: none; box-shadow: none; padding: 2px 4px;
display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 10;
}
.pilebtn .pstack { position: relative; width: 34px; height: 42px; flex: none; }
.pilebtn .pstack svg {
position: absolute; width: 27px; height: auto; border-radius: 3px;
box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.pilebtn .pstack svg:nth-child(1) { left: 0; top: 3px; transform: rotate(-7deg); }
.pilebtn .pstack svg:nth-child(2) { left: 3px; top: 1px; transform: rotate(-1deg); }
.pilebtn .pstack svg:nth-child(3) { left: 6px; top: 0; transform: rotate(6deg); }
.pilebtn b {
font-family: 'Trocchi', Georgia, serif; font-weight: normal;
font-size: 16px; color: var(--gold); text-shadow: 0 1px 3px rgba(0,0,0,.7);
font-variant-numeric: tabular-nums;
}
.pilebtn:active { transform: translateY(-50%) scale(.94); }
.myrow .pilebtn:active, .rivalrow .pilebtn:active { transform: scale(.94); }
.pilebtn.vacio .pstack { opacity: .35; }
.rivalrow { position: relative; }
/* (2026-09-10) la levantada que no suma 15, marcada en el montón: se ve, no cuenta */
.pilegroup.invalida { position: relative; opacity: .82; }
.pilegroup.invalida .cardbox { filter: grayscale(.35); }
.pilenota { width: 100%; text-align: center; font-size: 11.5px; color: #e8c34a; letter-spacing: .3px; margin-top: 2px; }
/* (2026-09-10) el panel del dueño: tarjetas de números y tablas chicas, todo legible en 360 */
.dueno-ventana { display: flex; gap: 6px; justify-content: center; margin: 4px 0 10px; }
.dueno-ventana button { flex: 1; padding: 8px 6px; border-radius: 10px; border: 1.5px solid rgba(232,195,74,.35); background: rgba(0,0,0,.3); color: var(--cream); font-size: 13px; }
.dueno-ventana button[aria-pressed="true"] { background: rgba(232,195,74,.22); border-color: var(--gold); color: var(--gold); }
.dueno-h { font-size: 11px; letter-spacing: 2px; color: #cbb98f; text-transform: uppercase; margin: 12px 0 6px; }
.dueno-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.dueno-kpis .k { border: 1px solid rgba(232,195,74,.28); border-radius: 10px; padding: 7px 8px; background: rgba(0,0,0,.25); }
.dueno-kpis .k b { display: block; font-size: 19px; color: var(--gold); line-height: 1.1; }
.dueno-kpis .k span { font-size: 11px; color: #cbb98f; line-height: 1.2; }
.dueno-kpis button.k { text-align: left; font: inherit; cursor: pointer; border-color: var(--gold); }
.dueno-kpis button.k:hover, .dueno-kpis button.k[aria-expanded="true"] { background: rgba(232,195,74,.14); }
.dueno-kpis button.k:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.dueno-kpis .k .dueno-ver { display: block; margin-top: 6px; color: var(--gold); text-decoration: underline; }
.dueno-cuentas { margin: 10px 0; padding: 10px; border: 1px solid rgba(232,195,74,.35); border-radius: 10px; }
.dueno-cuentas h4 { margin: 0 0 8px; color: var(--cream); font-size: 14px; }
.dueno-cuentas ul { margin: 0; padding: 0; list-style: none; }
.dueno-cuentas li { padding: 9px 0; border-top: 1px solid rgba(232,195,74,.18); overflow-wrap: anywhere; }
.dueno-cuenta-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dueno-cuenta-cabecera b { color: var(--cream); font-size: 14px; }
.dueno-cuenta-cabecera span, .dueno-cuenta-fecha { color: #cbb98f; font-size: 11px; }
.dueno-cuenta-email { margin: 4px 0; color: var(--cream); font-size: 12px; }
.dueno-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.dueno-tabla th, .dueno-tabla td { padding: 4px 5px; border-bottom: 1px solid rgba(232,195,74,.18); text-align: right; white-space: nowrap; }
.dueno-tabla th:first-child, .dueno-tabla td:first-child { text-align: left; }
.dueno-tabla th { color: #cbb98f; font-weight: normal; font-size: 11px; }
.dueno-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dueno-nota { font-size: 11.5px; color: #cbb98f; margin-top: 8px; line-height: 1.4; }
#finRepartoEspera { margin-top: 12px; color: var(--cream); font-size: 14px; line-height: 1.35; }
#finRepartoReloj { display: block; margin: 4px 0; font-size: 26px; color: var(--gold); font-variant-numeric: tabular-nums; }
#finRepartoAyuda { display: block; font-size: 12px; color: #cbb98f; }
#dealBanner.con-espera > .box {
display: flex; flex-direction: column;
max-height: calc(100vh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
}
#dealBanner.con-espera #ceremony { flex: 1 1 auto; min-height: 0; }
#dealBanner.con-espera :is(.ctitle, #finRepartoEspera, #btnNextDeal) { flex: 0 0 auto; }
#dealBanner.con-espera #btnNextDeal { align-self: center; }
.pilegroup {
display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12);
border-radius: var(--r-med); padding: 7px 10px;
}
.lastplay {
/* Fixed lane: always present, so the felt below never moves. */
display: flex; align-items: center; gap: 10px; flex: none;
height: 64px; overflow: visible; padding: 5px 12px; border-radius: var(--r-med); margin: 6px 0;
background:
var(--leather-tex),
linear-gradient(180deg, #2b150b, #1a0c05);
border: 1px solid rgba(232,195,74,.26);
box-shadow: inset 0 1px 0 rgba(255,214,140,.1), inset 0 -3px 8px rgba(0,0,0,.5);
}
.lastplay .lp-label {
font-size: 9.5px; letter-spacing: 2.5px; color: rgba(232,195,74,.75);
text-transform: uppercase; line-height: 1.35; width: 66px; flex: none;
}
.lastplay .lp-verb { font-size: 12.5px; font-style: normal; color: var(--cream); opacity: .85; flex: none; }
.lastplay .lp-cards {
display: flex; gap: 6px; align-items: center; flex: 1; min-width: 0;
overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
padding: 2px 22px 2px 2px;
mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 24px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 24px), transparent 100%);
}
.lastplay .lp-cards::-webkit-scrollbar { display: none; }
.lastplay .lp-cards .cardbox { flex: none; touch-action: pan-x; } /* finger swipes the lane */
#pileCards .cardbox { touch-action: pan-y; }
.lastplay .cardbox, #pileCards .cardbox { width: 42px; cursor: default; }
#pileCards { display: flex; flex-direction: column; gap: 10px; align-items: center; max-height: 46vh; overflow-y: auto; padding: 4px; }
/* ---- mesa ---- */
#scene { position: fixed; inset: 0; z-index: -1; }
#scene svg { width: 100%; height: 100%; display: block; }
/* ================= REGLA MADRE: EL PAÑO NO CAMBIA DE TAMAÑO =================
Mandato del dueño (2026-08-24): "habíamos quedado también de que el paño
jamás debería cambiar de tamaño; dejalo como regla madre".
El paño es la mesa. Una mesa que respira cada vez que aparece un botón, se
alarga un nombre o el marcador gana un dígito no es una mesa: es un acordeón,
y arrastra con él a cada carta que está encima.
LA REGLA SE GARANTIZA FIJANDO LO QUE LA RODEA, NO ESCRIBIENDO SU ALTO.
Primero se intentó al revés —el alto del paño como una cuenta de constantes,
`100dvh` menos las filas, la mano y el aire— y esa cuenta se equivocó DOS
VECES por el mismo motivo: hay que copiar a mano números que el navegador ya
sabe. La primera vez faltaron 12 px (el relleno del tablero y sus tres
separaciones) y el tablero desbordó en los ocho aparatos; la segunda
faltaron 2 más, porque en escritorio ese relleno no es 8 sino 10. Un número
copiado a mano de otro lado del archivo se desactualiza solo.
`flex: 1` le pide al navegador EXACTAMENTE el sobrante, que es la cuenta que
él ya hace bien y sin copiar nada. Y lo que hace que ese sobrante no cambie
nunca durante una partida es que TODO lo demás tiene medida clavada: las dos
pastillas miden --pastilla-w, las dos filas tienen `height` fijo, la mano
sale de --hand-w y el marcador reserva desde el vamos el lugar del +N. La
barra de cantos no cuenta: es `position: fixed` y no ocupa lugar.
Y la garantía no es la cuenta: es la MEDICIÓN. `tools/qa/qa-pano-fijo.mjs`
mide el paño en una tanda de estados de una partida real —nombre largo,
marcador de dos dígitos, +N musical, CANTAR entrando y saliendo, la barra de
cantos abierta— y falla si el alto varía UN píxel entre dos de ellos. */
.mesa {
/* De borde a borde: el paño toca los costados de la pantalla. */
position: relative; border-radius: 0;
border-left: none; border-right: none;
flex: 1;
min-height: min(132px, 26vh); overflow: hidden;
/* EL PAÑO, POR CAPAS (dueño, 2026-08-24: "varios niveles de belleza").
De arriba hacia abajo: el pelo de la lana, una sarga finísima en diagonal
—la que tiene de verdad el paño de billar—, el brillo de arriba y el campo
verde. La sarga va a 3 px y a 4% de contraste: se siente, no se ve. */
background:
var(--felt-tex),
repeating-linear-gradient(58deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
radial-gradient(ellipse 90% 55% at 50% 14%, rgba(255,255,255,.085), transparent 60%),
radial-gradient(ellipse at 50% 34%, var(--felt) 0%, var(--felt-dark) 100%);
border: 1.5px solid rgba(232,195,74,.45);
box-shadow:
inset 0 2px 12px rgba(255,255,255,.05),
inset 0 -22px 44px rgba(0,0,0,.42),
inset 0 0 0 6px rgba(0,0,0,.16),
0 12px 34px rgba(0,0,0,.6);
display: flex; align-items: center; justify-content: center;
transition: box-shadow .25s ease;
}
/* LA BARANDA. Era una costura punteada de 1,5 px flotando a 8 del borde: la
misma raya en las seis mesas y sin nada abajo. Una mesa de juego tiene
BARANDA — un canto acolchado que hace de tope de la carta — y eso se dibuja
con tres cosas y no con una: el filo de luz de arriba del rollo, el cuerpo
en penumbra, y el vivo de oro por dentro. Sigue siendo una sola capa y
ninguna sombra animada. */
.mesa::after {
content: ''; position: absolute; inset: 5px; border-radius: var(--r-costura); pointer-events: none;
border: 1px solid rgba(232,195,74,.30);
box-shadow:
inset 0 1px 0 rgba(255,240,190,.13),
inset 0 0 0 3px rgba(0,0,0,.20),
inset 0 0 14px rgba(0,0,0,.28),
0 1px 0 rgba(0,0,0,.35);
}
/* --- Paños PREMIUM: dibujo tejido en el paño, no un color más. El centro
queda en penumbra para que las cartas siempre manden. --- */
body[data-theme="aguayo"] .mesa {
background:
radial-gradient(ellipse at 50% 42%, rgba(0,0,0,.34), rgba(0,0,0,.62) 78%),
repeating-linear-gradient(90deg,
#6e2044 0 30px, #2c0c24 30px 36px, #a04a26 36px 58px, #2c0c24 58px 64px,
#275c34 64px 86px, #2c0c24 86px 92px, #4e3268 92px 114px, #2c0c24 114px 120px),
linear-gradient(180deg, #6e2044, #3a1030);
}
body[data-theme="cerros"] .mesa {
background:
radial-gradient(ellipse at 50% 42%, rgba(0,0,0,.30), rgba(0,0,0,.60) 80%),
repeating-linear-gradient(180deg,
#8a4a30 0 42px, #6e3a4a 42px 84px, #9a6a2e 84px 126px, #4e5a36 126px 168px,
#7a3a26 168px 210px, #5a2a4a 210px 252px, #8a5a3a 252px 294px),
linear-gradient(180deg, #8a4a30, #3d1e2a);
}
body[data-theme="fileteado"] .mesa {
background:
radial-gradient(circle at 0% 0%, rgba(232,195,74,.30), transparent 26%),
radial-gradient(circle at 100% 0%, rgba(232,195,74,.30), transparent 26%),
radial-gradient(circle at 0% 100%, rgba(232,195,74,.30), transparent 26%),
radial-gradient(circle at 100% 100%, rgba(232,195,74,.30), transparent 26%),
radial-gradient(ellipse 90% 55% at 50% 16%, rgba(255,255,255,.07), transparent 62%),
radial-gradient(ellipse at 50% 35%, #12402a 0%, #062015 100%);
}
body[data-theme="fileteado"] .mesa::after {
border: 2.5px double rgba(232,195,74,.55);
}
/* La apuesta sellada, siempre a la vista sobre el paño: mates en juego. */
#apuestaChip {
position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
display: none; z-index: 5; pointer-events: none;
padding: 4px 13px; border-radius: 999px;
font-size: 12.5px; font-weight: 700; letter-spacing: .6px; color: #ffe9a0;
background: rgba(20, 12, 4, .62); border: 1px solid rgba(232, 195, 74, .5);
text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
#apuestaChip.show { display: flex; align-items: center; gap: 5px; }
/* La moneda dentro de un texto va al alto de la línea y nunca la estira. */
.mico .pieza-oro { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; }
#apuestaChip .pieza-oro, #winApuesta .pieza-oro, .hline .pieza-oro,
#apuestaSi .pieza-oro, #apuestaWait .pieza-oro, #toast .pieza-oro {
width: 1.15em; height: 1.15em; vertical-align: -.2em; display: inline-block;
}
/* Las Malvinas, bordadas al centro del paño. */
.malvinas {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
pointer-events: none; opacity: .5;
}
.malvinas svg { width: 76%; max-width: 460px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
/* EL SELLO DE LA PROVINCIA, estampado al centro del paño durante la Gira.
Va PLANO y en blanco macizo, como la marca impresa de una mesa profesional:
nada de sombra (una marca impresa no levanta del paño) y a .78, que es el
punto donde se lee blanca sin pelearle el brillo a las cartas. */
.tucucrest {
position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
pointer-events: none; opacity: .78;
}
.tucucrest svg { width: 62%; max-width: 380px; height: auto; }
body.gira .malvinas { display: none; }
body.gira .tucucrest { display: flex; }
/* La Gira: la pantalla de la provincia */
#gira {
position: fixed; inset: 0; z-index: 82; display: none;
flex-direction: column; align-items: center; gap: 10px;
background:
radial-gradient(ellipse 120% 52% at 50% -10%, rgba(232,195,74,.26), rgba(232,195,74,.06) 40%, transparent 62%),
radial-gradient(ellipse 80% 38% at 50% 108%, rgba(64,118,150,.20), transparent 70%),
linear-gradient(112deg, transparent 28%, rgba(255,255,255,.035) 42%, rgba(255,255,255,.085) 50%, rgba(255,255,255,.035) 58%, transparent 72%),
var(--leather-tex),
linear-gradient(180deg, #262b33 0%, #171a20 48%, #0a0b0e 100%);
overflow-y: auto; padding: 26px 16px 30px;
}
#gira.show { display: flex; }
/* UNA PANTALLA A LA VEZ (dueño, 2026-08-25: en la Gira, con el mouse, "se
empieza a ver el fondo, la palabra chorizo, todo relampagueando").
La Gira es OPACA y de pantalla completa, pero el Hogar seguía VIVO debajo:
su emblema de fondo se mezcla con `mix-blend-mode: screen`, la medalla
respira, sube el humo y el mouse le corría el parallax. Chrome tenía que
rehacer esa mezcla de pantalla entera en cada cuadro y, cuando no llegaba a
componer la Gira encima, dejaba ver por un instante la capa de abajo: ese
era el relámpago del emblema. Lo tapado NO se dibuja.
Va con `visibility` a propósito: no toca el layout, así que el Hogar vuelve
exactamente como estaba, con su scroll donde lo dejaste. */
body.hogar-tapado #menu { visibility: hidden; }
body.hogar-tapado #menu *, body.hogar-tapado #menu::before { animation-play-state: paused; }
/* La cabecera de la Gira como placa de provincia (dueño, 2026-08-22: "está en −8"):
rótulo chico LA GIRA, la provincia en una cinta crema de fileteado con letras bordó,
el lema grabado, la medalla de estrellas en bronce y las flechas como botones de bronce. */
/* Cada destino tiene su paleta y su motivo: Tucumán (jardín, Casa Histórica), Jujuy (tierra y
cerro de siete colores), Buenos Aires (bordó de fileteado, Obelisco), Palma (mediterráneo,
palmera y olas), Nueva York (acero y ámbar déco, skyline). */
#gira { --gp-a: #1e3d2c; --gp-b: #10251a; --gp-c: #08150e; --gp-luz: rgba(255,160,60,.16); }
#gira[data-prov="jujuy"] { --gp-a: #6a3f22; --gp-b: #3a2010; --gp-c: #1c0f06; --gp-luz: rgba(224,196,138,.2); }
#gira[data-prov="bsas"] { --gp-a: #5a1518; --gp-b: #33090b; --gp-c: #1a0405; --gp-luz: rgba(232,195,74,.22); }
#gira[data-prov="palma"] { --gp-a: #1a4a7c; --gp-b: #0f2b4c; --gp-c: #071528; --gp-luz: rgba(127,196,216,.2); }
#gira[data-prov="nyc"] { --gp-a: #343b48; --gp-b: #1c2029; --gp-c: #0c0e13; --gp-luz: rgba(242,201,76,.2); }
.gplaca {
width: min(94vw, 420px); padding: 14px 12px 16px; border-radius: var(--r-gran); position: relative; overflow: hidden; flex: none;
display: flex; flex-direction: column; align-items: center;
background:
linear-gradient(165deg, rgba(255,255,255,.07), transparent 42%),
radial-gradient(ellipse 90% 60% at 50% -10%, var(--gp-luz), transparent 65%),
var(--leather-tex),
linear-gradient(180deg, var(--gp-a) 0%, var(--gp-b) 55%, var(--gp-c) 100%);
border: 1px solid rgba(232,195,74,.65);
box-shadow: inset 0 1px 0 rgba(255,236,170,.35), inset 0 -3px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.45), 0 10px 22px rgba(0,0,0,.55);
}
.gplaca::before { content: ''; position: absolute; inset: 5px; border-radius: var(--r-costura-gran); pointer-events: none; border: 1px dashed rgba(232,195,74,.28); z-index: 2; }
.gplaca > * { position: relative; z-index: 1; }
.gmotivo { position: absolute !important; right: -8px; bottom: -6px; width: 160px; height: 108px; opacity: .38; pointer-events: none; z-index: 0 !important;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.gmotivo svg { width: 100%; height: 100%; }
#gira h1 {
font-family: 'Trocchi', Georgia, serif; font-weight: 700;
font-size: 14px; letter-spacing: 6px; margin-bottom: 8px;
background: linear-gradient(180deg, #ffe66d 8%, #ffb347 45%, #ff7a1c 75%, #d43d2a 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
/* extrusión 3D: capas de sombra apiladas + caída final */
text-shadow:
0 1px 0 rgba(122,40,16,.9), 0 2px 0 rgba(104,32,12,.85),
0 3px 0 rgba(86,26,10,.8), 0 4px 0 rgba(66,18,6,.75),
0 5px 0 rgba(46,12,4,.7), 0 9px 16px rgba(0,0,0,.65);
}
#gira .gprov {
/* la cinta crema de fileteado, como en el escudo: letras bordó, filo de oro */
font-family: 'Trocchi', Georgia, serif; font-weight: 400;
font-size: clamp(22px, 6.6vw, 30px); letter-spacing: 2.5px; color: #5c1212; text-align: center;
padding: 7px 22px 6px; border-radius: 6px;
background: linear-gradient(180deg, #fffaf0, #f6e7c0 55%, #e6cf97);
border: 1.5px solid #8a6a10; box-shadow: inset 0 0 0 2.5px rgba(201,161,58,.55), 0 3px 8px rgba(0,0,0,.5);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
position: relative;
}
#gira .gsub {
display: flex; align-items: center; gap: 11px; margin-top: 9px; justify-content: center;
font-family: 'Trocchi', Georgia, serif; font-weight: 700; font-size: 11.5px; letter-spacing: 3px; text-transform: uppercase;
background: linear-gradient(178deg, #fff2c0 10%, #e8c34a 55%, #b8891a 95%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.8));
}
#gira .graya { width: 38px; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(232,195,74,.75)); }
#gira .graya.inv { background: linear-gradient(90deg, rgba(232,195,74,.75), transparent); }
#gira .gtotal {
display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
padding: 7px 18px; border-radius: 999px;
font-family: 'Trocchi', Georgia, serif; font-weight: 700; font-size: 17px; color: #33270a;
background: linear-gradient(180deg, #ffe89a 0%, #e8c34a 48%, #c0951c 100%);
border: 1.5px solid #f7e5a8;
box-shadow:
inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 5px rgba(120,85,10,.5),
0 3px 9px rgba(0,0,0,.5);
font-variant-numeric: tabular-nums;
}
#gira .gtotal svg { width: 19px; height: 19px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.girapanel {
width: min(94vw, 460px); display: flex; flex-direction: column; gap: 10px; margin-top: 8px; flex: none;
}
.grival {
display: flex; align-items: center; gap: 13px; min-height: 112px; padding: 13px 14px; position: relative; overflow: hidden;
background:
linear-gradient(165deg, rgba(255,255,255,.07), transparent 42%),
radial-gradient(ellipse 90% 60% at 50% -10%, rgba(232,195,74,.18), transparent 65%),
var(--leather-tex),
linear-gradient(180deg, var(--gp-a, #1e3d2c) 0%, var(--gp-b, #10251a) 55%, var(--gp-c, #08150e) 100%);
border: 1px solid rgba(232,195,74,.6); border-radius: var(--r-med);
box-shadow: inset 0 1px 0 rgba(255,236,170,.32), inset 0 -3px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.45), 0 8px 16px rgba(0,0,0,.5);
cursor: pointer; transition: transform .12s, border-color .2s, box-shadow .2s;
}
.grival::before { content: ''; position: absolute; inset: 4px; border-radius: var(--r-costura); pointer-events: none; border: 1px dashed rgba(232,195,74,.24); }
.grival:active { transform: scale(.97); }
.grival.lock { opacity: .45; cursor: default; filter: saturate(.4); }
.grival.actual {
border-color: #ffe39a;
box-shadow: inset 0 1px 0 rgba(255,243,202,.3), inset 0 0 0 3px rgba(232,195,74,.12),
0 12px 26px rgba(0,0,0,.55), 0 0 24px rgba(232,195,74,.17);
}
.grival.actual::after {
content: 'JUGAR'; position: absolute; right: 13px; bottom: 9px;
font: 800 9px/1 'Trocchi', Georgia, serif; letter-spacing: 1.4px; color: #ffe39a;
}
/* (2026-09-23) el traductor del DOM no ve el texto de un ::after: en inglés lo dice el idioma del documento */
html:lang(en) .grival.gentrando::after { content: 'OPENING TABLE'; }
html:lang(en) .grival.actual::after { content: 'PLAY'; }
.grival .gava {
flex: none; width: 72px; height: 72px; border-radius: 50%; align-self: center;
box-shadow: 0 5px 12px rgba(0,0,0,.58), 0 0 0 3px rgba(12,7,3,.68), 0 0 0 4.5px rgba(232,195,74,.48);
display: flex; align-items: center; justify-content: center;
font-family: 'Trocchi', Georgia, serif; font-size: 16px; color: var(--gold);
background: radial-gradient(circle at 35% 28%, #3a2410, #1c0f05);
border: 1.5px solid rgba(232,195,74,.5);
}
.grival.hecho .gava { background: radial-gradient(circle at 35% 28%, #f7e5a8, var(--gold) 60%, #96760e); color: #33270a; }
.grival .gava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; border-radius: 50%; display: block; }
/* Rivales boca abajo: cada uno es un naipe sin dar vuelta (reverso Damero) */
.gava.gnaipe {
width: 36px; height: 50px; border-radius: 6px;
background: repeating-conic-gradient(#5f7568 0% 25%, #ded9c4 0% 50%);
background-size: 10px 10px; background-position: center;
border: 2px solid #f5f1e4; outline: 1.5px solid rgba(0,0,0,.45);
box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.grival.tapado { cursor: default; }
.grival.tapado .gname { color: #cbb98f; font-style: normal; letter-spacing: .5px; }
.gmazo .gnaipe:nth-of-type(2) { margin-left: -30px; transform: rotate(5deg) translateY(2px); }
.gmazo .gnaipe:nth-of-type(3) { margin-left: -30px; transform: rotate(10deg) translateY(4px); }
/* El destape: el naipe se da vuelta y aparece el rival */
.grival.destape { animation: destapeGlow 1.8s ease .2s; }
.grival.destape .gava { position: relative; }
.grival.destape .gava::after {
content: ''; position: absolute; inset: -2px; border-radius: 50%;
background: repeating-conic-gradient(#5f7568 0% 25%, #ded9c4 0% 50%);
background-size: 10px 10px; background-position: center;
border: 2px solid #f5f1e4;
animation: destapeCover .7s ease-in .6s forwards;
}
.grival.destape .ginfo { animation: destapeInfo .6s ease 1s backwards; }
@keyframes destapeCover {
0% { transform: perspective(280px) rotateY(0); opacity: 1; }
99% { transform: perspective(280px) rotateY(88deg); opacity: 1; }
100% { transform: perspective(280px) rotateY(90deg); opacity: 0; }
}
@keyframes destapeInfo { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: none; } }
@keyframes destapeGlow {
0%, 100% { box-shadow: none; }
45% { box-shadow: 0 0 24px rgba(232,195,74,.6); }
}
.grival .ginfo { flex: 1; min-width: 0; padding-right: 2px; }
.grival .gorden {
margin-bottom: 3px; font: 700 8.5px/1 'Trocchi', Georgia, serif;
letter-spacing: 1.7px; color: #a99973;
}
.grival .gname {
font-family: 'Trocchi', Georgia, serif; font-weight: 700; font-size: 18px; letter-spacing: .6px; line-height: 1.08; text-transform: uppercase;
background: linear-gradient(178deg, #fff2c0 10%, #e8c34a 55%, #b8891a 95%);
-webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.8));
}
.grival .goficio {
display: block; margin-top: 3px; font: 700 9px/1.15 'Trocchi', Georgia, serif;
letter-spacing: 1.25px; color: #c8b683;
}
.grival .gdesc { display: inline-block; margin-top: 3px; font-family: 'Trocchi', Georgia, serif; font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
color: #ffe39a; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(232,195,74,.4); background: rgba(0,0,0,.32); }
.grival .ghist { margin-top: 5px; font-family: 'Trocchi', Georgia, serif; font-style: normal; font-size: 12.5px; line-height: 1.35; color: #e3d6b3; }
.grival.tapado .gname { text-transform: none; }
.grival.tapado .gdesc { text-transform: none; letter-spacing: 0; border: 0; background: none; padding: 0; color: #cbb98f; font-weight: 700; font-size: 12.5px; }
.grival .gstars { flex: none; display: flex; gap: 2px; }
.grival .gstars svg, .grival .gstars .pieza-oro { width: 17px; height: 17px; }
#giraBack { margin-top: 14px; width: min(94vw, 460px); }
.grival.gentrando { pointer-events: none; filter: saturate(.72); }
.grival.gentrando::after {
content: 'ABRIENDO MESA'; position: absolute; inset: auto 12px 10px auto;
padding: 5px 8px; border-radius: 999px; color: #382707; background: #e8c34a;
font: 700 8.5px/1 'Trocchi', Georgia, serif; letter-spacing: 1.2px;
box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.gira-bloqueo-icono { width: 82px; height: 96px; margin: 2px auto 12px; display: block; }
.gira-bloqueo-icono .naipe { fill: #182f24; stroke: #e8c34a; stroke-width: 2; }
.gira-bloqueo-icono .costura { fill: none; stroke: rgba(247,224,151,.7); stroke-width: 1.3; stroke-dasharray: 3 4; }
.gira-bloqueo-icono .cerradura { fill: #e8c34a; stroke: #513909; stroke-width: 1.5; }
#giraBloqueada .box {
max-width: 390px;
background:
radial-gradient(ellipse 110% 48% at 50% -8%, rgba(232,195,74,.2), transparent 62%),
var(--leather-tex), linear-gradient(180deg, #173b2b 0%, #0a2117 62%, #26070e 100%);
}
#giraBloqueadaTexto { color: var(--cream); margin: 0 auto 8px; max-width: 30ch; }
#giraBloqueadaPista { color: #cbb98f; margin: 0 auto 18px; max-width: 34ch; font-size: 13.5px; }
@media (max-width: 390px) {
.grival { gap: 10px; min-height: 105px; padding: 11px 10px; }
.grival .gava { width: 62px; height: 62px; }
.grival .gname { font-size: 16px; }
.grival .ghist { font-size: 11.5px; }
.grival .gstars { gap: 0; }
.grival .gstars svg, .grival .gstars .pieza-oro { width: 15px; height: 15px; }
}
.rivalrow, .mano {
position: relative;
background:
var(--leather-tex),
linear-gradient(180deg, var(--cuero-a) 0%, var(--cuero-b) 100%);
border: 1px solid rgba(232,195,74,.3);
box-shadow:
inset 0 1px 0 rgba(255,214,140,.14),
inset 0 -3px 8px rgba(0,0,0,.55),
0 4px 14px rgba(0,0,0,.4);
}
/* costura del cuero */
.rivalrow::after, .mano::after {
content: ''; position: absolute; inset: 4px; pointer-events: none;
border: 1.5px dashed rgba(232,195,74,.2); border-radius: var(--r-costura);
}
/* ---- main menu ---- */
/* El emblema de la casa, grabado al fondo del hogar como en el paño */
#menu::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: url('/icono/emblema-fondo.webp?v=8') no-repeat calc(50% + var(--px) * 18px) calc(46% + var(--py) * 14px) / min(78vw, 460px);
opacity: .085; mix-blend-mode: screen;
}
#menu {
/* FIJO y cubriendo de sobra: con position:relative quedaba corto y por abajo asomaba la
mesa —el cuero y el filo dorado del botón—. El z-index lo deja sobre el cielo. */
position: fixed; inset: -2px; z-index: 80; display: none;
align-items: center; justify-content: safe center; flex-direction: column; gap: 18px;
/* A place of its own — same espresso wood as the room, fully opaque, with a
warm brass light falling on the crest. You stay here until YOU decide. */
background:
radial-gradient(ellipse 120% 52% at 50% -10%, rgba(232,195,74,.28), rgba(232,195,74,.06) 40%, transparent 62%),
radial-gradient(ellipse 80% 38% at 50% 108%, rgba(64,118,150,.22), transparent 70%),
linear-gradient(112deg, transparent 28%, rgba(255,255,255,.035) 42%, rgba(255,255,255,.085) 50%, rgba(255,255,255,.035) 58%, transparent 72%),
var(--leather-tex),
linear-gradient(180deg, #262b33 0%, #171a20 48%, #0a0b0e 100%);
/* El menú SÍ scrollea por dentro: su contenido es legítimamente más alto.
Había dos `padding` peleando y ganaba el de abajo, así que las zonas
seguras del teléfono (el reloj arriba, la barrita abajo) no se respetaban. */
overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
padding: calc(env(safe-area-inset-top) + 30px) calc(env(safe-area-inset-right) + 16px)
calc(env(safe-area-inset-bottom) + 30px) calc(env(safe-area-inset-left) + 16px);
}
.menutiles { display: flex; gap: 10px; width: 100%; flex-wrap: wrap; }
.menutiles .menutile { min-width: calc(33.33% - 7px); }
#menuResume.primary { order: -1; } /* con partida viva, Seguir manda arriba */
.seguir-rival { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
/* el retrato con su título en arco debajo */
.avatarcol { position: relative; display: inline-flex; flex-direction: column; align-items: center; flex: none; }
/* (Dueño, 2026-08-30) La cinta del título YA NO SE MONTA SOBRE LA FOTO: se apoya debajo,
como una placa al pie del retrato. Antes entraba 14 px adentro del avatar y le tapaba
el mentón. */
.avatarcol .tituloarco { width: 64px; height: 16px; margin-top: 1px; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); pointer-events: none; }
.avatarcol.grande .tituloarco { width: 120px; height: 30px; margin-top: 2px; }
/* EL TÍTULO EN LA PASTILLA: un renglón al lado del nombre, no un sello sobre la cara. */
.ptitulo {
font-family: 'Trocchi', Georgia, serif; font-size: 9.5px; letter-spacing: 1.1px;
color: rgba(232,195,74,.78); text-transform: uppercase; line-height: 1;
max-width: 136px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-shadow: 0 1px 2px rgba(0,0,0,.65);
}
.ptitulo:empty { display: none; }
.seguir-ava { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; display: inline-block;
border: 2px solid #5a3e08; box-shadow: 0 2px 5px rgba(0,0,0,.5); background: #1d1108; }
.seguir-ava img, .seguir-ava svg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Los accesos del hogar como PLACAS (dueño, 2026-08-22: "se ve muy básico"):
cuero verde con bisel de oro y costura, medallón de bronce con el ícono
grabado, título en oro viejo. Cada placa tiene luz arriba y peso abajo. */
.menutile {
flex: 1; border: 1px solid rgba(232,195,74,.62); border-radius: var(--r-med); position: relative; overflow: hidden;
background:
linear-gradient(165deg, rgba(255,255,255,.09), transparent 42%),
radial-gradient(ellipse 90% 60% at 50% -10%, rgba(232,195,74,.22), transparent 65%),
var(--leather-tex),
linear-gradient(180deg, #1e3d2c 0%, #10251a 55%, #08150e 100%);
padding: 13px 8px 11px; text-align: center; cursor: default;
box-shadow: inset 0 1px 0 rgba(255,236,170,.35), inset 0 -3px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.45),
0 8px 16px rgba(0,0,0,.5);
transition: transform .12s, box-shadow .2s;
}
.menutile::before { content: ''; position: absolute; inset: 4px; border-radius: var(--r-costura); pointer-events: none;
border: 1px dashed rgba(232,195,74,.28); }
.menutile:active { transform: scale(.96); }
.menutile svg {
width: 46px; height: 46px; padding: 10px; border-radius: 50%; box-sizing: border-box;
stroke: #3a2608; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 1;
background: radial-gradient(circle at 35% 28%, #fff3c4, #e6bd4e 46%, #a87a16 100%);
box-shadow: 0 3px 7px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.35),
0 0 0 1.5px rgba(58,38,8,.6);
margin-bottom: 6px;
}
.menutile .tname {
display: block; font-family: 'Trocchi', Georgia, serif; font-weight: 700; font-size: 16px; letter-spacing: 1.2px;
background: linear-gradient(178deg, #fff2c0 10%, #e8c34a 55%, #b8891a 95%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.8));
}
/* La tienda se distingue: marco de oro encendido, para que se sepa dónde se compra. */
/* ===== El resto del panel, a la misma altura que las placas (dueño, 2026-08-22) =====
Misiones y Pase: placas de cuero con bisel de oro y costura. Rival y Partida a:
rótulo grabado en oro y botones de bronce; el elegido, encendido. */
.menupanel .misioncard {
border: 1px solid rgba(232,195,74,.6); border-radius: var(--r-gran); position: relative; overflow: hidden;
background:
linear-gradient(165deg, rgba(255,255,255,.07), transparent 40%),
radial-gradient(ellipse 90% 60% at 50% -10%, rgba(232,195,74,.18), transparent 65%),
var(--leather-tex),
linear-gradient(180deg, #1b3728 0%, #0f2219 55%, #08150e 100%);
box-shadow: inset 0 1px 0 rgba(255,236,170,.32), inset 0 -3px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.45),
0 8px 16px rgba(0,0,0,.5);
padding: 13px 16px 10px;
}
.menupanel .misioncard::before { content: ''; position: absolute; inset: 4px; border-radius: var(--r-costura-gran); pointer-events: none;
border: 1px dashed rgba(232,195,74,.26); }
.menupanel .misioncard .mhead {
font-family: 'Trocchi', Georgia, serif; font-weight: 700; font-size: 15.5px; letter-spacing: 1px;
background: linear-gradient(178deg, #fff2c0 10%, #e8c34a 55%, #b8891a 95%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.8));
}
.menupanel .misioncard .mhead span, .menupanel .misioncard .mhead b { -webkit-text-fill-color: initial; color: #f3df9e; background: none; filter: none; }
.menupanel .pasebarra { background: rgba(0,0,0,.55); border: 1px solid rgba(232,195,74,.45);
box-shadow: inset 0 2px 4px rgba(0,0,0,.7), 0 1px 0 rgba(255,236,170,.15); }
.menupanel .menurow label, #settingsBanner .menurow label, #rapidaBanner .menurow label {
font-family: 'Trocchi', Georgia, serif; font-weight: 700; font-size: 13px; letter-spacing: 2.5px; opacity: 1;
background: linear-gradient(178deg, #fff2c0 10%, #e8c34a 55%, #b8891a 95%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.8)); text-align: center;
}
/* cuatro opciones no entran en una fila en el teléfono: van de a dos */
#settingsBanner .seg.cuatro { flex-wrap: wrap; }
#settingsBanner .seg.cuatro button { flex: 1 1 calc(50% - 6px); font-size: 13.5px; padding: 10px 4px; }
.menupanel .seg, #settingsBanner .seg, #rapidaBanner .seg { gap: 6px; padding: 5px; border-radius: var(--r-gran); border: 1px solid rgba(232,195,74,.45);
background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.3)); box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
.menupanel .seg button, .menupanel .stepbtn, #settingsBanner .seg button, #rapidaBanner .seg button {
font-family: 'Trocchi', Georgia, serif; font-weight: 700; color: #e9d9a8; border: 1px solid rgba(232,195,74,.35); border-radius: var(--r-gran);
background: linear-gradient(180deg, #2a2f38, #15181e 60%, #0c0e12);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 3px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.45);
text-shadow: 0 1px 1px rgba(0,0,0,.8); transition: transform .1s, filter .15s;
}
.menupanel .seg button.on, .menupanel .seg button.primary, #settingsBanner .seg button.primary, #settingsBanner .seg button.on, #rapidaBanner .seg button.primary {
color: #3a2608; text-shadow: 0 1px 0 rgba(255,255,255,.45);
background: radial-gradient(circle at 35% 25%, #fff3c4, #e6bd4e 50%, #b8891a 100%);
border-color: #5a3e08;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.3), 0 0 12px rgba(232,195,74,.45), 0 2px 4px rgba(0,0,0,.45);
}
.menupanel .seg button:active, .menupanel .stepbtn:active, #settingsBanner .seg button:active, #rapidaBanner .seg button:active { transform: scale(.95); }
.menupanel .stepbtn { border-radius: 50%; color: #3a2608; font-family: 'Trocchi', Georgia, serif;
background: radial-gradient(circle at 35% 25%, #fff3c4, #e6bd4e 50%, #b8891a 100%); border-color: #5a3e08;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.35), 0 3px 6px rgba(0,0,0,.5); }
.menupanel .stepbtn:disabled { filter: saturate(.3) brightness(.6); }
.menupanel .stepval { font-family: 'Trocchi', Georgia, serif;
/* El relleno 0/10 no es capricho: Trocchi asienta la tinta 5 px más abajo que la letra
que había antes acá, y estas cifras van en línea anónima de flex, donde el recorte de
caja no llega. Medido con tools/qa/centrado-optico.mjs, no estimado. */
min-width: 74px; text-align: center; padding: 0 10px 10px; border-radius: var(--r-gran);
border: 1px solid rgba(232,195,74,.45); background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.3));
box-shadow: inset 0 2px 5px rgba(0,0,0,.6); text-shadow: 0 0 10px rgba(232,195,74,.45), 0 1px 0 #000;
}
.menupanel button.aux, #settingsBanner button.aux, .box.ornate button.aux, #gira button.aux {
font-family: 'Trocchi', Georgia, serif; font-weight: 700; font-size: 15px; letter-spacing: .8px; color: #f3df9e;
border: 1px solid rgba(232,195,74,.45); border-radius: var(--r-gran);
background: linear-gradient(180deg, #1b3728, #0f2219 60%, #08150e);
box-shadow: inset 0 1px 0 rgba(255,236,170,.22), inset 0 -2px 4px rgba(0,0,0,.55), 0 3px 6px rgba(0,0,0,.45);
text-shadow: 0 1px 1px rgba(0,0,0,.8);
}
/* La tienda: placa bordó, para que se sepa dónde se compra. */
.menutile.tienda {
background:
linear-gradient(165deg, rgba(255,255,255,.10), transparent 42%),
radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255,210,120,.28), transparent 65%),
var(--leather-tex),
linear-gradient(180deg, #6a1d1a 0%, #3f0f0e 55%, #230707 100%);
box-shadow: inset 0 1px 0 rgba(255,236,170,.4), inset 0 -3px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.45),
0 8px 16px rgba(0,0,0,.5), 0 0 16px rgba(232,195,74,.22);
}
.menutile .soon {
display: inline-block; margin-top: 5px; font-family: 'Trocchi', Georgia, serif;
font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: #cbb98f;
border: 1px solid rgba(203,185,143,.4); border-radius: 999px; padding: 2px 9px;
}
.misioncard {
width: 100%; border: 1.5px solid rgba(232,195,74,.3); border-radius: var(--r-med);
background: linear-gradient(180deg, rgba(26,16,7,.85), rgba(14,8,4,.9));
padding: 12px 14px 8px; box-shadow: inset 0 1px 0 rgba(232,195,74,.08);
}
.misioncard .mhead {
display: flex; justify-content: space-between; align-items: center;
font-family: 'Trocchi', Georgia, serif; font-size: 11px;
letter-spacing: 2.5px; color: var(--gold); text-transform: uppercase; margin-bottom: 6px;
}
.misioncard .mhead span { color: #cbb98f; letter-spacing: 1px; text-transform: none; }
/* LA TARJETA DE MAÑANA. Misma chapa que las misiones para que se lea como parte del mismo
bloque, con la línea de mañana separada por una costura: arriba lo de hoy, abajo lo que
espera. La racha en riesgo va en rojo tierra, que es aviso y no alarma. */
.mananacard:empty, .objetivocard:empty { display: none; }
/* EL OBJETIVO. Es la única tarjeta del Hogar que el jugador ELIGIÓ, así que se distingue:
el filete de oro a la izquierda la separa de las que reparte el juego. */
.objetivocard { border-left: 3px solid var(--gold); cursor: pointer; }
/* LA CHINCHE: vive pegada a la chapa del precio, del lado de afuera, para no comerle lugar
al dibujo. Apagada es un contorno; puesta, se enciende. */
.sw .chinche, .vcomprar .chinche {
margin-left: 5px; width: 19px; height: 19px; padding: 0; flex: none;
border-radius: 50%; border: 1px solid rgba(58,38,8,.55); background: rgba(255,255,255,.35);
/* 11,5 px y no 10: por debajo de 11 el control de legibilidad la marca, y con razón —a
10 px sobre chapa dorada la estrella es una mancha. */
color: #6b4708; font-size: 11.5px; line-height: 1; cursor: pointer;
display: inline-grid; place-items: center;
}
.sw .chinche.puesta, .vcomprar .chinche.puesta {
background: #3a2608; color: var(--gold); border-color: #3a2608;
box-shadow: 0 0 6px rgba(232,195,74,.6);
}
.objetivocard .ojo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.objetivocard .onom { font-family: 'Trocchi', Georgia, serif; font-size: 16px; color: var(--cream); }
.objetivocard .ofalta { font-size: 13px; color: #cbb98f; white-space: nowrap; }
.objetivocard .ofalta b { color: var(--gold); font-variant-numeric: tabular-nums; }
.objetivocard .obarra { height: 7px; border-radius: 4px; margin: 8px 0 5px; background: rgba(0,0,0,.5);
box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,236,170,.12); overflow: hidden; }
.objetivocard .obarra i { display: block; height: 100%; border-radius: 4px;
background: linear-gradient(90deg, #b98f24, var(--gold)); }
.objetivocard .opie { font-size: 11.5px; letter-spacing: 1.5px; color: #a2957a;
font-variant-numeric: tabular-nums; text-align: right; }
.mananacard .mfila { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 13.5px; color: var(--cream); }
.mananacard .mfila b { font-family: 'Trocchi', Georgia, serif; color: var(--gold); font-variant-numeric: tabular-nums; }
.mananacard .mic { width: 19px; text-align: center; flex: none; font-size: 14px; }
.mananacard .costura {
margin: 8px -14px 6px; border-top: 1px solid rgba(232,195,74,.16);
padding: 7px 14px 0;
font-family: 'Trocchi', Georgia, serif; font-size: 10.5px; letter-spacing: 2.5px;
text-transform: uppercase; color: #cbb98f;
}
.mananacard .riesgo {
margin-top: 7px; padding: 7px 9px; border-radius: 9px;
border: 1px solid rgba(224,86,74,.42); background: rgba(224,86,74,.1);
font-size: 12.5px; color: #f0b3ac; line-height: 1.45;
}
.mision { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.mision .mtxt { flex: 1; min-width: 0; }
.mision .mname { font-size: 13.5px; color: var(--cream); }
.mision.done .mname { color: #9fdc9f; }
/* La barrita de progreso se tiene que VER: con .12 de blanco sobre el cuero
oscuro era una raya fantasma (auditoría visual 2026-08-26). */
.mision .mbar { height: 5px; border-radius: 4px; background: rgba(0,0,0,.5); margin-top: 4px; overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,236,170,.12); }
.mision .mbar i { display: block; height: 100%; background: linear-gradient(90deg, #b98f24, var(--gold)); border-radius: 4px; }
.mision.done .mbar i { background: #69c47c; }
.mision .mreward {
font-family: 'Trocchi', Georgia, serif; font-size: 12px; color: var(--gold);
white-space: nowrap; display: flex; align-items: center; gap: 4px;
font-variant-numeric: tabular-nums;
}
.mision.done .mreward { color: #9fdc9f; }
.mreward svg { width: 13px; height: 13px; }
/* (2026-09-14) la Maestría reusa la fila de misión; sólo suma la línea del premio y la muestra del adorno */
.maestriacard .mpremio { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding-top: 7px;
border-top: 1px solid rgba(232,195,74,.16); font-size: 13px; color: var(--cream); }
.maestriacard .mpremio b { color: var(--gold); font-variant-numeric: tabular-nums; }
.maestriacard .madorno { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 7px; overflow: hidden;
display: grid; place-items: center; background: rgba(0,0,0,.35); border: 1px solid rgba(232,195,74,.35); }
.maestriacard .madorno > * { width: 100%; height: 100%; object-fit: cover; }
.maestriacard .mpie { margin-top: 6px; font-size: 12px; color: #d9c9a0; }
.menutile.activo { cursor: pointer; border-color: rgba(232,195,74,.55); transition: transform .12s; }
.menutile.activo:active { transform: scale(.95); }
.menutile .tsub { display: block; margin-top: 3px; font-family: 'Trocchi', Georgia, serif; font-size: 11px; color: #d9c9a0; letter-spacing: .2px; line-height: 1.25; }
.xpbar { height: 7px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; margin: 7px 0 4px; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #b98f24, var(--gold)); }
.statgrid { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; text-align: left; font-size: 14.5px; color: #cbb98f; }
.statgrid b { color: var(--cream); font-variant-numeric: tabular-nums; text-align: right; }
.bigcode {
font-family: 'Trocchi', Georgia, serif; font-size: 38px; letter-spacing: 2px;
color: var(--gold); text-shadow: 0 2px 0 #7a5a08, 0 6px 20px rgba(0,0,0,.8);
}
/* Los cuatro controles de arriba a la derecha son UN conjunto: mismo tamaño,
misma separación, misma área para el dedo. El hueco se achica con la
pantalla para que nunca choquen con las monedas de la izquierda. */
.audioquick {
position: absolute; top: calc(14px + env(safe-area-inset-top));
right: calc(14px + env(safe-area-inset-right));
display: flex; align-items: center; gap: clamp(6px, 2.1vw, 10px); z-index: 2;
}
/* Botones de cabecera de 44 px (L15, 2026-08-27): el mínimo para el pulgar;
las fichas de saldo y estrellas miden lo mismo de alto para alinearse. */
.audioquick .hbtn { width: 44px; height: 44px; }
.audioquick .hbtn svg { width: 19px; height: 19px; }
/* LA CARA es la pieza más grande de la fila: 54 px contra los 34 de las monedas y los 40
del engranaje. Esa diferencia es toda la jerarquía que hace falta — el ojo entra por
ahí. Alrededor corre el aro de experiencia, y colgando abajo, el nivel. */
.yochip {
width: 57px; height: 57px; padding: 0; border-radius: 50%; flex: 0 0 auto;
border: 0; background: none;
position: relative; overflow: visible; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.yochip .yoaro { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.yochip .yoaro circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.yochip .yoaro .pista { stroke: rgba(0,0,0,.55); }
.yochip .yoaro .corre {
stroke: #e8c34a; stroke-dasharray: 100 100; stroke-dashoffset: 100;
filter: drop-shadow(0 0 3px rgba(232,195,74,.55));
transition: stroke-dashoffset .6s ease;
}
.yochip .yofoto {
position: absolute; inset: 5px; border-radius: 50%; overflow: hidden; display: block;
box-shadow: 0 2px 9px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.55);
background: rgba(0,0,0,.42);
}
/* EL NIVEL cuelga del aro, centrado abajo: es el número que la gente mira para saber
cuánto lleva. Va sobre chapa oscura para que se lea sobre cualquier foto. */
.yochip .yonivel {
position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
min-width: 22px; height: 17px; padding: 0 5px; border-radius: 999px;
display: grid; place-items: center;
font-family: 'Trocchi', Georgia, serif; font-size: 11.5px; font-variant-numeric: tabular-nums;
color: #ffe39a; background: linear-gradient(180deg, #3a2a10, #14100a);
border: 1.5px solid rgba(232,195,74,.62);
box-shadow: 0 2px 5px rgba(0,0,0,.6);
}
.yochip.anon .yonivel { display: none; }
.yochip .yofoto svg, .yochip .yofoto img {
width: 100%; height: 100%; display: block; object-fit: cover;
}
.yochip .yomas { display: none; }
/* Sin cuenta: la silueta se apaga y el + dorado late, para que se note el hueco. */
.yochip.anon { border-color: rgba(232,195,74,.4); animation: yolate 2.6s ease-in-out infinite; }
.yochip.anon .yofoto { opacity: .42; filter: grayscale(1); }
.yochip.anon .yomas {
display: grid; place-items: center; position: absolute; right: -1px; bottom: -1px;
width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #21170a;
font: 700 14px/1 'Trocchi', Georgia, serif; font-style: normal;
box-shadow: 0 1px 5px rgba(0,0,0,.6); border: 1.5px solid #2b2213;
}
@keyframes yolate {
0%, 100% { box-shadow: 0 2px 9px rgba(0,0,0,.45), 0 0 0 0 rgba(232,195,74,.34); }
50% { box-shadow: 0 2px 9px rgba(0,0,0,.45), 0 0 0 7px rgba(232,195,74,0); }
}
.yochip:active { transform: scale(.94); }
.hudtop .walletchip { box-sizing: border-box; height: 43px; }
/* El engranaje NO se achica: 44 px es el mínimo para el pulgar y esa regla (L15) no se
negocia por estética. Lo que baja es el CONTRASTE —chapa más apagada, ícono más chico—,
que es como los estudios grandes ponen la utilidad por debajo de lo que el jugador vino
a mirar sin dejarla incómoda de tocar. */
.hudtop .hbtn { width: 47px; height: 47px; opacity: .82; }
/* El volumen, discreto y de la casa: las ondas callan según el nivel. */
#qVolumen .vonda, #qVolumen .vtacha { transition: opacity .18s ease; }
#qVolumen[data-nivel="0"] .vonda { opacity: 0; }
#qVolumen[data-nivel="1"] .v2, #qVolumen[data-nivel="1"] .v3 { opacity: 0; }
#qVolumen[data-nivel="2"] .v3 { opacity: 0; }
#qVolumen:not([data-nivel="0"]) .vtacha { opacity: 0; }
.hudtop .hbtn svg { width: 21px; height: 21px; }
.hudtop .hbtn:active { opacity: 1; }
/* El punto del signo de pregunta es macizo: el resto del idioma es de trazo. */
.audioquick .hbtn .punto { fill: #e8c34a; stroke: none; }
/* Los tres controles (música/efectos/decir) viven en la fila de arriba,
junto a pausa y menú: todo lo de mando en un solo lugar, a un dedo. */
.audiomini { display: flex; gap: 4px; flex: none; }
.audiomini .hbtn { width: 26px; height: 26px; flex: none; }
.audiomini .hbtn svg { width: 12.5px; height: 12.5px; }
.audiomini .hbtn .slash { display: none; stroke: #e0564a; stroke-width: 2.2; }
.audiomini .hbtn.off { opacity: .5; }
.audiomini .hbtn.off .slash { display: block; }
.audiomini .hbtn.off .wave { display: none; }
/* 3… 2… 1… ¡A JUGAR!: el arranque tiene su ritual. */
.cuenta3 {
position: fixed; inset: 0; z-index: 77; display: flex;
align-items: center; justify-content: center;
background: rgba(10,5,2,.55);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.cuenta3 .cnum {
font-family: 'Trocchi', Georgia, serif;
font-size: clamp(130px, 42vw, 270px);
background: linear-gradient(180deg, #ffe66d 8%, #ffb347 45%, #ff7a1c 70%, #d43d2a 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 4px 3px rgba(0,0,0,.85));
animation: cuentapop .72s cubic-bezier(.2,1.2,.35,1) both;
}
.cuenta3 .cnum.gr { font-size: clamp(44px, 13vw, 110px); white-space: nowrap; }
@keyframes cuentapop {
0% { transform: scale(.25); opacity: 0; }
45% { transform: scale(1.12); opacity: 1; }
70% { transform: scale(1); }
100% { transform: scale(1); opacity: 1; }
}
#pauseOverlay {
position: fixed; inset: 0; z-index: 76; display: none;
flex-direction: column; align-items: center; justify-content: center; gap: 14px;
background: rgba(10,5,2,.82);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#pauseOverlay.show { display: flex; }
/* (2026-08-30) TENÍA QUE SER SU PROPIA CLASE. El cartel y la pastilla compartían
«.ptitulo», y a la pastilla se le había puesto un tope de 136 px con puntos suspensivos
para que un título largo no la desbordara. El cartel heredó el tope: "PAUSA" a 120 px
entraba recortado y en la pantalla se leía «P…». Dos cosas distintas, dos clases. */
#pauseOverlay .pausatit {
font-family: 'Trocchi', Georgia, serif; font-size: clamp(56px, 18vw, 120px);
background: linear-gradient(180deg, #ffe66d 8%, #ffb347 45%, #ff7a1c 70%, #d43d2a 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 3px 2px rgba(0,0,0,.85));
}
#pauseOverlay .pnota { color: #f3df9e; font-size: 15px; }
/* La cuenta regresiva: un número grande de reloj, tabular para que no baile al bajar de
10 a 9, con el mismo aro que la pastilla del turno. Es lo único que se mueve. */
#pauseOverlay .pcuenta {
font-family: 'Trocchi', Georgia, serif; font-variant-numeric: tabular-nums;
font-size: 46px; line-height: 1; color: #ffe39a; min-width: 2ch; text-align: center;
padding: 10px 16px; border-radius: 999px; margin-top: -6px;
border: 2px solid rgba(232,195,74,.5); background: rgba(0,0,0,.42);
text-shadow: 0 0 16px rgba(232,195,74,.5), 0 2px 0 #000;
}
#pauseOverlay .presto {
font-family: 'Trocchi', Georgia, serif; font-size: 12.5px; letter-spacing: 2px;
text-transform: uppercase; color: #cbb98f;
}
/* La línea de datos (reparto, tanda, mazo, meta y, online, la mesa): en 360 px no entra en un
renglón y se partía en dos pegada al borde izquierdo, sin el aire del resto del cartel. Parte
en los «·», centrada y con el mismo margen que el resto. */
#pauseOverlay #dealInfoPausa { max-width: min(88vw, 420px); text-align: center; text-wrap: balance; line-height: 1.6; }
#pauseOverlay .primary[hidden] { display: none; }
#pauseBtn.on { border-color: #f3dd93; background: radial-gradient(circle at 32% 26%, rgba(255,230,160,.5), rgba(232,195,74,.25) 45%, rgba(0,0,0,.5)); }
/* Sin pausas: el botón sigue ahí y sigue explicando por qué, pero se ve gastado. */
#pauseBtn.gastado { opacity: .38; }
/* Las dos monedas del jugador (chorisitos y estrellas), juntas arriba a la izquierda, a la
altura y tamaño de los botones de sonido de la derecha: donde las ponen las apps grandes. */
/* LA FILA DE ARRIBA: dos grupos y un canal de aire en el medio. La identidad manda a la
izquierda; la plata y la única puerta de utilidad, a la derecha. El gutter es el mismo de
los dos lados y respeta el corte de la pantalla del teléfono. */
.hudtop {
position: absolute; z-index: 2; display: flex; align-items: center;
justify-content: space-between; gap: 10px;
top: calc(14px + env(safe-area-inset-top));
left: calc(14px + env(safe-area-inset-left));
right: calc(14px + env(safe-area-inset-right));
pointer-events: none; /* el aire del medio no roba toques */
}
.hudtop .hudlado { display: flex; align-items: center; gap: 7px; pointer-events: auto; }
/* LAS MONEDAS. El «+» del chorisito es el elemento que más convierte de toda la pantalla
y no existía: ahora está, y toda la pastilla abre la tienda. La estrella no lo lleva
—no se compran— y abre la Gira, que es donde se ganan. */
/* EL «+» DE LA PELOTITA, CENTRADO DE VERDAD (dueño, 2026-08-31: "no está centrado en la
pelotita de manera vertical, eso no debe suceder jamás en mi página").
Tenía `place-items: center`, que centra la CAJA DE LÍNEA y no la TINTA. El signo más se
dibuja sobre el eje matemático de la tipografía, que en Trocchi queda por encima del centro
del cuadratín: medido sobre la pantalla, la tinta caía 2,5 px arriba en una bolita de 21.
El relleno de arriba achica la caja de contenido por ese lado, y lo centrado baja. Es el
mismo recurso —y la misma cuenta medida, no estimada— que el resto de las pastillas.
La guarda que lo mide es tools/qa/centrado-optico.mjs, que hasta hoy NUNCA había podido
medir esta bolita: armaba mal su selector y la descartaba en silencio. */
.walletchip .chipmas {
display: grid; place-items: center; width: 21px; height: 21px; margin: 0 -5px 0 4px;
box-sizing: border-box; padding-top: 2.5px;
border-radius: 50%; flex: none;
background: linear-gradient(180deg, #ffe07a, #d79c20); color: #2a1c06;
font: 700 15px/1 'Trocchi', Georgia, serif; font-style: normal;
border: 1.5px solid rgba(255,236,180,.85);
box-shadow: 0 1px 3px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.walletchip {
position: relative; display: inline-flex; align-items: center; gap: 5px; height: 38px;
padding: 0 8px 0 6px; border-radius: 999px;
border: 1.5px solid rgba(232,195,74,.55);
background: linear-gradient(180deg, rgba(46,28,12,.95), rgba(16,9,4,.95));
box-shadow: inset 0 1px 0 rgba(255,230,160,.25), inset 0 -1px 2px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.45);
cursor: pointer;
}
/* Las dos piezas de oro del juego: una lámina por pieza, y el tamaño lo pone
siempre quien la usa. Nunca se estira: la caja es cuadrada y el objeto entra. */
.pieza-oro {
display: inline-block; width: 1.35em; height: 1.35em; vertical-align: -.28em;
object-fit: contain; flex: none; -webkit-user-drag: none; user-select: none;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.pieza-oro.apagada { filter: grayscale(1) brightness(.5); opacity: .45; }
.walletchip .pieza-oro { width: 25px; height: 25px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.walletchip b {
font-family: 'Trocchi', Georgia, serif; font-variant-numeric: tabular-nums; font-weight: 700;
font-size: 14.5px; color: #ffe39a; font-variant-numeric: tabular-nums; letter-spacing: .2px;
text-shadow: 0 0 10px rgba(232,195,74,.45), 0 1px 0 #000;
}
.walletchip.estrellas .pieza-oro { width: 24px; height: 24px; }
.walletchip:active { transform: scale(.94); }
.audioquick .hbtn .slash { display: none; stroke: #e0564a; stroke-width: 2.2; }
.audioquick .hbtn.off { opacity: .55; }
.audioquick .hbtn.off .slash { display: block; }
.audioquick .hbtn.off .wave { display: none; }
#menu.show { display: flex; }
.logo { text-align: center; position: relative; }
/* El humo del chorizo sube del emblema, despacio, como de la parrilla. */
.logo .humo { position: absolute; left: 50%; top: calc(min(66vw, 264px) * .36); width: 0; height: 0; pointer-events: none; z-index: 1; }
.logo .humo i {
position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.6), rgba(255,255,255,0) 70%);
filter: blur(3px); opacity: 0; animation: humito 4.6s ease-out infinite;
}
.logo .humo i:nth-child(2) { animation-delay: 1.5s; --hx: 14px; }
.logo .humo i:nth-child(3) { animation-delay: 3s; --hx: -16px; }
@keyframes humito {
0% { transform: translate(0, 0) scale(.5); opacity: 0; }
18% { opacity: .55; }
100% { transform: translate(var(--hx, 4px), -120px) scale(2.4); opacity: 0; }
}
/* Parallax del hogar: emblema, título y panel en capas que siguen al dedo o al giro. */
.logo .crest { translate: calc(var(--px) * 10px) calc(var(--py) * 7px); transition: translate .25s ease-out; }
.logo h1 { translate: calc(var(--px) * -7px) calc(var(--py) * -5px); transition: translate .25s ease-out; }
.menupanel { translate: calc(var(--px) * 4px) calc(var(--py) * 3px); transition: translate .25s ease-out; }
.logo h1 {
font-size: clamp(52px, 16vw, 88px); letter-spacing: 1px;
/* el nombre de la casa NO cambia de letra (dueño, 2026-08-22): sigue en Sigmar */
font-family: 'Sigmar', 'Arial Black', system-ui, sans-serif; font-weight: 400;
/* dueño, 2026-08-22: dos puntos más grande, más cruzada a la izquierda y PISANDO el emblema */
position: relative; z-index: 2; margin-top: calc(min(66vw, 264px) * -0.46 - 22px);
/* oro viejo de cartel de pulpería: luz arriba, sombra abajo */
background: linear-gradient(178deg, #fff2c0 2%, #f0cf72 26%, #c9971c 55%, #8a6a10 86%, #e8c34a 99%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter:
drop-shadow(0 1px 0 rgba(255,240,190,.35))
drop-shadow(0 3px 0 rgba(58,32,10,.95))
drop-shadow(0 5px 1px rgba(24,12,4,.8))
drop-shadow(0 12px 26px rgba(0,0,0,.7));
transform: rotate(-3.2deg);
}
/* El lema, en la cinta crema de fileteado del escudo (dueño, 2026-08-22: "ultra básico"):
puntas dobladas detrás, letras bordó en Alegreya, filo de oro y sombra que la despega. */
.logo .lema {
position: relative; display: inline-block; margin-top: 9px; isolation: isolate;
translate: calc(var(--px) * -4px) calc(var(--py) * -3px); transition: translate .25s ease-out;
}
.logo .lema span {
display: block; padding: 8px 30px 7px;
font-family: 'Trocchi', Georgia, serif; font-weight: 700; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap;
color: #5c1212; text-shadow: 0 1px 0 rgba(255,255,255,.55);
background: linear-gradient(180deg, #fffaf0 0%, #f6e7c0 55%, #e6cf97 100%);
border-top: 1.5px solid #8a6a10; border-bottom: 1.5px solid #8a6a10;
box-shadow: inset 0 0 0 2px rgba(201,161,58,.45), 0 5px 12px rgba(0,0,0,.6);
clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%, 11px 50%);
}
.logo .lema::before, .logo .lema::after {
content: ''; position: absolute; top: 7px; width: 24px; height: calc(100% - 6px); z-index: -1;
background: linear-gradient(180deg, #dcc58f, #b9994f); border: 1.5px solid #7a5c0c;
}
.logo .lema::before { left: -13px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 42% 50%); }
.logo .lema::after { right: -13px; clip-path: polygon(0 0, 100% 0, 58% 50%, 100% 100%, 0 100%); }
.logo .crest {
/* lockup: el escudo sin cintas; CHORISO! lo cruza por la franja baja (laureles y moño),
nunca por el chorizo. El margen de arriba lo despega del HUD de monedas. */
width: min(64vw, 256px); height: auto; margin: 26px auto 2px; display: block;
filter: drop-shadow(0 10px 26px rgba(0,0,0,.7));
animation: medallaRespira 5.6s ease-in-out infinite;
will-change: transform;
}
@keyframes medallaRespira {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.022); }
}
.logo p { font-size: 14px; letter-spacing: 4px; color: #f3df9e; opacity: .85; text-transform: uppercase; }
.menupanel {
background: linear-gradient(180deg, rgba(20,40,28,.92), rgba(10,22,15,.94));
border: 2px solid var(--gold); border-radius: var(--r-gran); padding: 22px 24px;
display: flex; flex-direction: column; gap: 14px; width: min(92vw, 380px);
box-shadow: 0 18px 60px rgba(0,0,0,.7);
}
.menupanel .big {
font-size: 22px; padding: 15px; letter-spacing: 3px; font-weight: bold;
}
/* dueño, 2026-08-22: todos los rótulos de los menús en MAYÚSCULAS */
/* Los rótulos, en mayúsculas. La letra de placa (Trocchi) solo en los grandes:
abajo de ~15 px su G se confunde con una C — "RANKING" se leía "RANKINC". */
.menupanel button, .menutile .tname, .misioncard .mhead, .menupanel .seg button, #settingsBanner .seg button,
#rapidaBanner .seg button, #settingsBanner button.aux, .box.ornate button.aux, .box.ornate button.primary, #gira button.aux, .vdisco .vnom
{ text-transform: uppercase; }
.menupanel button, .misioncard .mhead, #settingsBanner button.aux, .box.ornate button.aux,
.box.ornate button.primary, #gira button.aux, .vdisco .vnom
{ font-family: 'Trocchi', Georgia, serif; }
.menutile .tname, .menupanel .seg button, #settingsBanner .seg button, #rapidaBanner .seg button
{ font-family: 'Trocchi', Georgia, serif; }
.menupanel button.primary, .menupanel .menurow + button, .menupanel button.aux { letter-spacing: 1.6px; }
.menupanel button.big { font-size: 19px; letter-spacing: 2.4px; }
.menutile .tname { font-size: 13.5px; letter-spacing: .6px; }
.menurow { display: flex; flex-direction: column; gap: 6px; }
.menurow label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: .88; font-family: 'Trocchi', Georgia, serif; }
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; padding: 9px 6px; font-size: 14.5px; }
.menupanel .aux { font-size: 14px; padding: 9px; }
.stepper { display: flex; align-items: center; gap: 14px; justify-content: center; }
.stepbtn {
width: 46px; height: 46px; border-radius: 50%; font-size: 24px; padding: 0;
display: flex; align-items: center; justify-content: center; line-height: 1;
}
.stepval {
font-family: 'Trocchi', Georgia, serif; font-size: 34px; font-weight: bold; color: var(--gold);
min-width: 86px; text-align: center; text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
input.stepval {
box-sizing: border-box; width: 96px; height: 48px; padding: 0 6px;
border: 1px solid rgba(232,195,74,.5); border-radius: 10px;
background: rgba(0,0,0,.3); appearance: textfield; -moz-appearance: textfield;
}
input.stepval::-webkit-inner-spin-button, input.stepval::-webkit-outer-spin-button {
-webkit-appearance: none; margin: 0;
}
.setrow-note { font-size: 11px; opacity: .5; font-family: 'Trocchi', Georgia, serif; letter-spacing: 1px; } /* legible: 11 px (L16) */
/* El pie de la casa: la puerta comercial. Se ve serio y se toca. */
/* Traer un amigo: el código grande, para dictarlo o compartirlo. */
.invitar {
margin-top: 12px; padding: 13px 14px; border-radius: var(--r-med); text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 7px;
background: linear-gradient(165deg, rgba(255,255,255,.05), transparent 40%),
var(--leather-tex), linear-gradient(180deg, #1b3728 0%, #0f2219 55%, #08150e 100%);
border: 1px solid rgba(232,195,74,.5);
box-shadow: inset 0 1px 0 rgba(255,236,170,.28), 0 6px 14px rgba(0,0,0,.45);
}
.invitar b {
font-family: 'Trocchi', Georgia, serif; font-size: 15px; letter-spacing: 1.6px;
background: linear-gradient(178deg, #fff2c0 10%, #e8c34a 55%, #b8891a 95%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.invitar > span { font-family: 'Trocchi', Georgia, serif; font-size: 12.5px; color: #cbb98f; line-height: 1.45; }
.invitar > span b { -webkit-text-fill-color: #ffe39a; font-size: 12.5px; letter-spacing: 0; }
.invitar .micodigo {
font-family: 'Trocchi', Georgia, serif; font-size: 26px; letter-spacing: 6px; color: #3a2608;
padding: 6px 18px 5px; border-radius: var(--r-med); border: 1.5px solid #5a3e08;
background: radial-gradient(circle at 35% 25%, #fff3c4, #e6bd4e 55%, #b8891a);
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(0,0,0,.5);
}
.invitar .traidos { font-family: 'Trocchi', Georgia, serif; font-size: 12px; color: #9c8f70; }
/* Lo que la ley pide y el jugador merece: saber qué guardamos, y poder irse. Discreto,
pero siempre a la vista dentro de Perfil — nunca escondido en un menú. */
.legal { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.legal a { font-size: 12px; color: #cbb98f; text-decoration: underline; text-underline-offset: 3px; }
.legal .borrarcuenta {
background: transparent; border: 1px solid rgba(192,57,43,.55); color: #e08b80;
border-radius: 999px; padding: 6px 14px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.legal .borrarcuenta:active { transform: scale(.97); }
.instalar {
width: min(92vw, 400px); margin: 18px auto 0; padding: 14px 16px; border-radius: var(--r-med);
display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
background:
linear-gradient(165deg, rgba(255,255,255,.06), transparent 40%),
var(--leather-tex),
linear-gradient(180deg, #1b3728 0%, #0f2219 55%, #08150e 100%);
border: 1px solid rgba(232,195,74,.5);
box-shadow: inset 0 1px 0 rgba(255,236,170,.28), 0 8px 18px rgba(0,0,0,.5);
}
.instalar[hidden] { display: none; }
.instalar b {
font-family: 'Trocchi', Georgia, serif; font-size: 15px; letter-spacing: 1.4px;
background: linear-gradient(178deg, #fff2c0 10%, #e8c34a 55%, #b8891a 95%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.instalar span { font-family: 'Trocchi', Georgia, serif; font-size: 12.5px; color: #cbb98f; line-height: 1.45; max-width: 32ch; }
.piedecasa { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 26px; padding-bottom: 6px; width: 100%; }
.piedecasa .pmail {
display: inline-block; text-decoration: none; padding: 9px 22px; border-radius: 999px;
font-family: 'Trocchi', Georgia, serif; font-size: 17px; letter-spacing: 1.1px;
background: linear-gradient(178deg, #fff2c0 8%, #e8c34a 52%, #b8891a 96%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.85));
border: 1px solid rgba(232,195,74,.42); box-shadow: inset 0 1px 0 rgba(255,236,170,.14), 0 3px 10px rgba(0,0,0,.4);
transition: border-color .2s, box-shadow .2s;
}
.piedecasa .pmail:active { border-color: rgba(232,195,74,.9); box-shadow: 0 0 16px rgba(232,195,74,.3); }
.creditoslink { background: none; border: 0; box-shadow: none; padding: 5px 12px; margin-top: 0; cursor: pointer;
font-family: 'Trocchi', Georgia, serif; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
color: rgba(217,201,160,.6); } /* (2026-09-07) .32 no llegaba a AA y es texto de 10 px */
.creditoslink:active { color: rgba(217,201,160,.8); }
/* Ajustes (dueño, 2026-08-22): cada fila es una placa de cuero; el apodo, un campo de bronce. */
#settingsBanner .menurow {
position: relative; overflow: hidden; flex: none; gap: 8px;
background:
linear-gradient(165deg, rgba(255,255,255,.06), transparent 40%),
radial-gradient(ellipse 90% 60% at 50% -10%, rgba(232,195,74,.16), transparent 65%),
var(--leather-tex),
linear-gradient(180deg, #1b3728 0%, #0f2219 55%, #08150e 100%);
border: 1px solid rgba(232,195,74,.6); border-radius: var(--r-med); padding: 11px 12px 12px;
box-shadow: inset 0 1px 0 rgba(255,236,170,.32), inset 0 -3px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.45),
0 8px 16px rgba(0,0,0,.5);
}
#settingsBanner .menurow::before { content: ''; position: absolute; inset: 4px; border-radius: var(--r-costura); pointer-events: none;
border: 1px dashed rgba(232,195,74,.24); }
#settingsBanner .seg button:disabled { filter: saturate(.3) brightness(.55); }
#settingsBanner #setNombre {
font-family: 'Trocchi', Georgia, serif !important; font-weight: 700; font-size: 18px !important; color: #ffe39a !important;
border: 1px solid rgba(232,195,74,.55) !important; border-radius: var(--r-med) !important;
background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)) !important;
box-shadow: inset 0 2px 5px rgba(0,0,0,.65), 0 1px 0 rgba(255,236,170,.12); text-shadow: 0 1px 0 #000;
}
#settingsBanner #setNombre::placeholder { color: rgba(243,223,158,.45); }
/* Campos de texto en cualquier caja: bronce hundido, letra de oro */
.box.ornate input:not([type="file"]):not([type="checkbox"]):not(#perfilNombre) {
font-family: 'Trocchi', Georgia, serif !important; font-weight: 700; font-size: 16.5px !important; color: #ffe39a !important;
border: 1px solid rgba(232,195,74,.55) !important; border-radius: var(--r-gran) !important;
background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)) !important;
box-shadow: inset 0 2px 5px rgba(0,0,0,.65), 0 1px 0 rgba(255,236,170,.12); text-shadow: 0 1px 0 #000;
}
.box.ornate input::placeholder { color: rgba(243,223,158,.45); }
/* Subtítulos de sección dentro de las cajas (LA CAMPAÑA, RACHA, TUS CANTOS…) en oro grabado */
.box.ornate .psec, .box.ornate .ptit { font-family: 'Trocchi', Georgia, serif; font-weight: 700; letter-spacing: 2.5px;
background: linear-gradient(178deg, #fff2c0 10%, #e8c34a 55%, #b8891a 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.8)); }
.mesa.target { animation: rimgold 1.5s ease-in-out infinite; }
.mesa.target-throw { animation: rimblue 1.5s ease-in-out infinite; }
@keyframes rimgold {
0%, 100% { box-shadow: inset 0 0 34px rgba(0,0,0,.35), inset 0 0 0 2.5px rgba(232,195,74,.55), inset 0 0 26px rgba(232,195,74,.10), 0 6px 22px rgba(0,0,0,.45); }
50% { box-shadow: inset 0 0 34px rgba(0,0,0,.35), inset 0 0 0 3px rgba(232,195,74,.95), inset 0 0 48px rgba(232,195,74,.22), 0 6px 22px rgba(0,0,0,.45); }
}
@keyframes rimblue {
0%, 100% { box-shadow: inset 0 0 34px rgba(0,0,0,.35), inset 0 0 0 2.5px rgba(127,167,199,.5), inset 0 0 26px rgba(127,167,199,.10), 0 6px 22px rgba(0,0,0,.45); }
50% { box-shadow: inset 0 0 34px rgba(0,0,0,.35), inset 0 0 0 3px rgba(127,167,199,.9), inset 0 0 48px rgba(127,167,199,.2), 0 6px 22px rgba(0,0,0,.45); }
}
/* Ghost slot: a luminous card-shaped landing marker. */
#dropSlot {
position: absolute; display: none; pointer-events: none; z-index: 4;
border-radius: 9px; border: 2.5px dashed rgba(255,255,255,.5);
animation: slotpulse 1.1s ease-in-out infinite;
transition: left .08s linear, top .08s linear;
}
#dropSlot.show { display: block; }
#dropSlot.take { border-color: rgba(232,195,74,.85); background: rgba(232,195,74,.10); --glow: rgba(232,195,74,.55); }
#dropSlot.throw { border-color: rgba(159,195,222,.8); background: rgba(159,195,222,.08); --glow: rgba(159,195,222,.5); }
@keyframes slotpulse {
0%, 100% { box-shadow: 0 0 10px var(--glow, rgba(255,255,255,.4)); }
50% { box-shadow: 0 0 26px var(--glow, rgba(255,255,255,.4)); }
}
/* The action chip floats ABOVE the felt, over everything in flight —
always readable, never buried under your own cards. */
#dropChip {
position: fixed; left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: 92vw;
transform: translateY(-8px);
display: none; pointer-events: none; z-index: 60; white-space: nowrap;
font-family: 'Trocchi', Georgia, serif; font-size: 16.5px; font-weight: bold; letter-spacing: 1.2px;
height: var(--cartel-arrastre-h); line-height: 23px; /* 9 + 23 + 9 + los dos bordes de 1,5 = 44 */
padding: 9px 22px; border-radius: 11px;
background: linear-gradient(180deg, #42251b, #24110c); border: 1.5px solid #b28b47; color: #f4e4bf;
box-shadow: 0 5px 14px #0007, inset 0 1px 0 #efd5a347, inset 0 0 0 3px #201009;
opacity: 0; transition: opacity .16s ease, transform .16s ease;
}
#dropChip.show { display: block; opacity: 1; transform: translateY(0); }
#dropChip.take { border-color: #e2bc70; color: #ffedc0;
background: linear-gradient(180deg, #48321a, #24160c); }
#dropChip.throw { border-color: #a99572; color: #eee3cf; }
/* (2026-09-05) CON EL PAÑO LLENO EL CARTEL SE ACHICA: entre la fila del rival y la primera fila
de cartas quedan 27-40 px cuando el paño va en tres renglones (once cartas en 360 × 640), y el
cartel de 44 les pisaba la cabeza. Si no le caben 48, se pone en su talle chico (28: la letra
de 13 sigue leyéndose sobre el vidrio) y no toca ninguna carta. updateDropVisual() lo mide. */
#dropChip.compacto { height: 28px; line-height: 17px; padding: 4px 14px; font-size: 13px; letter-spacing: .7px; }
.cardbox.magnet { transform: translateY(-12px) scale(1.05) !important;
filter: drop-shadow(0 0 12px var(--gold)) drop-shadow(2px 6px 8px rgba(0,0,0,.5)); }
/* Cards magnetized mid-drag: they ride under your finger in a little fan. */
/* Cantos: emblema de la casa, lectura clara y una única transición breve. */
.escobaword {
position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
pointer-events: none; z-index: 70; overflow: hidden;
/* (2026-09-15) LA BRASA. El estudio midió que los siete mazos tienen casi diez por
ciento de rojo vivo y la casa no tenía ninguno. Acá está el momento más vivo del
juego, así que acá se enciende: un resplandor cálido sobre el paño, que no tapa
nada porque se apaga antes del borde. La palabra sigue siendo de oro: el oro es la
marca, la brasa es el momento. */
background: radial-gradient(62% 46% at 50% 50%, #be241b5c, #86130d24 46%, transparent 74%);
}
.escobaword .wrap {
position: relative; max-width: calc(100vw - 32px); padding: 14px 18px 18px;
border: 1px solid #c69b51; border-radius: 22px 8px;
background: linear-gradient(155deg, #42251bf5, #170d09fa);
box-shadow: 0 0 7rem .4rem #be241b, 0 0 2.2rem #df554766, 0 14px 30px #0008, inset 0 0 0 4px #24120b, inset 0 0 0 5px #b58b3e66;
animation: cantoRevela 1.75s ease-out both;
}
.escobaword .boom {
display: flex; flex-direction: column; align-items: center; gap: 0;
text-align: center;
}
.escobaword .icono :is(svg, img) {
display: block; width: clamp(128px, 38vw, 204px); height: clamp(128px, 38vw, 204px);
object-fit: contain; filter: drop-shadow(0 4px 3px #0007);
}
.escobaword .word {
font-family: 'Trocchi', Georgia, serif; font-size: clamp(64px, 21vw, 190px);
line-height: 1.12; letter-spacing: -.025em; white-space: nowrap;
background: linear-gradient(180deg, #fff4cb 10%, #e4bd66 47%, #af7c30 58%, #f8e1a0 90%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 2px 1px #000b);
}
/* La frase de la salida partida en renglones (15 PARA / EL MANO): la misma letra cromada,
apilada apretada para que las dos o tres líneas se lean como UNA palabra gritada. */
.escobaword .word.renglones { line-height: .92; text-align: center; }
/* En la salida el emblema de la escoba va más chico: la frase ya ocupa dos renglones y las
cuatro cartas están arriba en el paño; con el emblema de tamaño canto el bloque no entra
en el teléfono sin pisarlas. La letra no cambia: es la del canto. */
.escobaword.apertura .icono :is(svg, img) { width: clamp(64px, 18vw, 110px); height: clamp(64px, 18vw, 110px); }
/* Los puntos del botín: la misma palabra cromada, pero en TURQUESA — el
color de los puntos que se están armando. El shorthand de background
resetea el clip, por eso se lo vuelve a declarar acá. */
.escobaword.puntos .word {
font-size: clamp(56px, 18vw, 92px) !important;
background: linear-gradient(180deg, #f4fff0, #b8dbc1 48%, #78b298 58%, #e6f3d9);
-webkit-background-clip: text; background-clip: text;
filter: drop-shadow(0 2px 1px #000b);
}
.escobaword.puntos .wrap { padding: 16px 30px; background: linear-gradient(155deg, #274539fa, #101e18fc); }
/* La escoba propia conserva el nombre protagonista; sus puntos van debajo. */
.escobaword.escobamia .wrap { display: flex; flex-direction: column-reverse; align-items: center; }
.escobaword.escobamia .quien {
font-family: 'Trocchi', Georgia, serif; font-size: clamp(28px, 10vw, 64px);
letter-spacing: 1px; text-transform: none; margin: -6px 0 0; line-height: 1.1;
background: linear-gradient(180deg, #f4fff0, #b8dbc1 48%, #78b298 58%, #e6f3d9);
-webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow: none;
filter: drop-shadow(0 2px 1px #000b);
}
@keyframes cantoRevela {
0% { opacity: 0; transform: translateY(12px) scale(.94); }
16%, 74% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-6px) scale(1.015); }
}
.escobaword .quien {
font-family: 'Trocchi', Georgia, serif; font-size: 14px;
letter-spacing: 2.5px; text-transform: uppercase; color: #ead6ac;
text-shadow: 0 2px 6px rgba(0,0,0,.8); text-align: center; margin-bottom: 4px;
/* La frase de la apertura es más larga que "CANTÁS", y en inglés más todavía. Con ancho
tope baja de renglón; sin él se salía del teléfono por los costados. */
max-width: 92vw; margin-left: auto; margin-right: auto; line-height: 1.25;
opacity: 1;
}
/* Guía del imán: la carta cercana se enciende — halo dorado que crece con
la cercanía. Sin flechas ni texto: la mesa misma te llama. */
#table .cardbox.imanta { border-radius: 10px; transition: box-shadow .1s linear; }
/* El estudio de estilo: cada decisión estética en su tablero de cuero */
#estilo { display: flex; flex-direction: column; gap: 13px; max-height: 58vh; overflow-y: auto; text-align: left; }
/* La tienda a la altura del hogar (dueño, 2026-08-22): placas de cuero verde con
bisel de oro y costura, rótulos grabados en oro, chapas de bronce para el precio. */
.esec {
position: relative; overflow: hidden; flex: none;
background:
linear-gradient(165deg, rgba(255,255,255,.06), transparent 40%),
radial-gradient(ellipse 90% 60% at 50% -10%, rgba(232,195,74,.16), transparent 65%),
var(--leather-tex),
linear-gradient(180deg, #1b3728 0%, #0f2219 55%, #08150e 100%);
border: 1px solid rgba(232,195,74,.6); border-radius: var(--r-med); padding: 13px 14px 12px;
box-shadow: inset 0 1px 0 rgba(255,236,170,.32), inset 0 -3px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.45),
0 8px 16px rgba(0,0,0,.5);
}
.esec::before { content: ''; position: absolute; inset: 4px; border-radius: var(--r-costura); pointer-events: none;
border: 1px dashed rgba(232,195,74,.24); }
.esec h4 {
font-family: 'Trocchi', Georgia, serif; font-weight: 700;
font-size: 15px; letter-spacing: 2px; margin-bottom: 10px; text-align: center;
background: linear-gradient(178deg, #fff2c0 10%, #e8c34a 55%, #b8891a 95%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.8));
}
/* ═══════════ LA VIDRIERA ═══════════
Va arriba de las ocho secciones y es lo único de la tienda con jerarquía: una pieza
grande —a dónde vas— y debajo una fila de piezas chicas —qué te llevás hoy—. El resto de
la tienda sigue siendo la grilla pareja de siempre; si la vidriera pesara igual que las
secciones, no sería una vidriera, sería una sección más. */
#vidriera:empty { display: none; }
#vidriera { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.vhero {
display: flex; gap: 14px; align-items: center; text-align: left; cursor: pointer;
padding: 12px 14px; border-radius: var(--r-med);
border: 1.5px solid rgba(232,195,74,.45);
background: linear-gradient(180deg, rgba(58,38,12,.85), rgba(20,12,5,.9));
box-shadow: inset 0 1px 0 rgba(255,230,160,.14), 0 3px 10px rgba(0,0,0,.45);
}
.vhero .vart { width: 72px; flex: none; display: grid; place-items: center; }
.vhero .vart svg, .vhero .vart img { width: 100%; height: auto; display: block; }
.vhero .vtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* 11 px es el piso de la casa y el control lo mide: por debajo, un rótulo en versalitas y
con espaciado deja de leerse en un teléfono. */
.vrot { font-family: 'Trocchi', Georgia, serif; font-size: 11px; letter-spacing: 1.5px;
text-transform: uppercase; color: #cbb98f; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.vrot.vraro { color: var(--gold); }
.vnombre { font-family: 'Trocchi', Georgia, serif; font-size: 18px; color: var(--cream); }
.vpie { font-size: 13px; color: #cbb98f; }
.vpie b { color: var(--gold); font-variant-numeric: tabular-nums; }
.vbarra { height: 6px; border-radius: 4px; background: rgba(0,0,0,.55); overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0,0,0,.6); margin: 3px 0 2px; }
.vbarra i { display: block; height: 100%; border-radius: 4px;
background: linear-gradient(90deg, #b98f24, var(--gold)); }
/* La fila de "ya te alcanza": chica, horizontal, y con el precio a la vista. */
.vfila { display: flex; flex-direction: column; gap: 7px; }
.vitems { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.vitem {
flex: 0 0 auto; width: 92px; padding: 8px 6px 7px; border-radius: var(--r-med);
display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;
border: 1px solid rgba(232,195,74,.3); background: rgba(0,0,0,.32);
}
/* La muestra chica RECORTA. El marco del retrato se dibuja a su tamaño natural
—46 px de aro más el avatar— y se salían de la ficha, encima del nombre. Acá manda la
caja: lo que no entra, se recorta y se centra. */
.vitem .vart.chico { width: 52px; height: 52px; display: grid; place-items: center;
overflow: hidden; border-radius: 6px; }
.vitem .vart.chico > * { max-width: 100%; max-height: 100%; }
.vitem .vart.chico svg, .vitem .vart.chico img { width: 100%; height: auto; display: block; }
.vitem .vart.chico .marcoPrev { transform: scale(.82); }
.vitem .vnom { font-size: 11.5px; color: #f3df9e; text-align: center; line-height: 1.25;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vitem .vpre { font-family: 'Trocchi', Georgia, serif; font-size: 12.5px; color: var(--gold);
display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.vitem .vpre .pieza-oro { width: 14px; height: 14px; }
.vitem:active { transform: scale(.95); }
.vfila.casi .vitem { border-style: dashed; }
/* Las muestras que no son un dibujo sino un material: se pintan con su receta. */
.vmuestra { display: block; width: 100%; height: 46px; border-radius: 8px;
border: 1px solid rgba(232,195,74,.35); }
.vhero .vmuestra { height: 56px; }
.vmuestra.pano {
background: var(--felt-tex),
repeating-linear-gradient(58deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
radial-gradient(ellipse 90% 55% at 50% 14%, rgba(255,255,255,.085), transparent 60%),
radial-gradient(ellipse at 50% 34%, var(--felt) 0%, var(--felt-dark) 100%);
}
.vmuestra.cuero {
background: var(--leather-tex),
linear-gradient(180deg, var(--cuero-a) 0%, var(--cuero-b) 100%);
}
.vmuestra.disco {
height: 46px; border-radius: 50%; width: 46px; margin: 0 auto;
background:
radial-gradient(circle at 50% 50%, #1a1208 0 26%, transparent 26%),
repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 0 1px, transparent 1px 3px),
radial-gradient(circle at 38% 30%, #3a3a3e, #121216 70%);
}
.egrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
/* La grilla chica pasa de 72 a 96 px de ancho mínimo. Con 72 la chapa del precio —moneda,
cinco cifras y la chinche— medía 88 px adentro de una ficha de 75 y se recortaba contra
el propio borde: se veía "1000" donde decía "10000". No era un problema de dónde poner
la chapa; era que la ficha no daba el ancho. De paso el dibujo del artículo se ve más
grande, que es lo que uno vino a mirar. */
.egrid.chica { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.sw {
border-radius: var(--r-med); cursor: pointer; position: relative; overflow: hidden;
border: 1.5px solid rgba(232,195,74,.35); transition: transform .12s, border-color .2s, box-shadow .2s;
background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.5));
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.45);
}
.sw:active { transform: scale(.94); }
.sw.on { border-color: var(--gold); box-shadow: 0 0 14px rgba(232,195,74,.5), inset 0 0 0 1px rgba(232,195,74,.5), 0 3px 6px rgba(0,0,0,.45); }
/* Con precio, la ficha crece por abajo para las DOS franjas —el nombre y el precio— y no
sólo para una. Con 19 px alcanzaba para el precio pero el nombre subía adentro del
dibujo: en las fichas cuyo dibujo va EN FLUJO (mazos, reversos, marcos)
el naipe le tapaba media palabra. El dibujo no se achica: la ficha se agranda. */
.sw:has(.precio) .swname { bottom: 20px; }
.sw:has(.precio) { padding-bottom: 39px; }
.sw .swname {
/* z-index 2: el nombre va ENCIMA del dibujo. Sin esto el naipe de la muestra se dibujaba
arriba y se comía media palabra —"...derna", "...riollo"—, y el que mira no sabe qué
esta comprando. Crecer la ficha no alcanzaba: no era falta de lugar, era orden de
capas. */
position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px; z-index: 2;
font-size: 11px; font-family: 'Trocchi', Georgia, serif; font-weight: 700; text-align: center;
color: #f3df9e; text-shadow: 0 1px 2px #000; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.62)); letter-spacing: .5px;
}
.sw.cuero {
height: 64px;
/* LAS MISMAS DOS CAPAS QUE LA FRANJA DEL RIVAL: el grano del cuero sobre el degradado. */
background:
var(--leather-tex),
linear-gradient(180deg, var(--cuero-a) 0%, var(--cuero-b) 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255,214,140,.14),
inset 0 -6px 14px rgba(0,0,0,.55),
0 3px 6px rgba(0,0,0,.45);
}
.sw.cuero .swname { font-size: 12px; }
.sw.cuero .dashes { position: absolute; inset: 6px; border: 1.5px dashed rgba(232,195,74,.5); border-radius: 8px; }
.sw.pano {
height: 64px;
/* LAS MISMAS CUATRO CAPAS QUE LA MESA, en el mismo orden: el pelo de la lana, la sarga
en diagonal, el brillo de arriba y el campo. Con --felt y --felt-dark puestas en la
propia ficha por buildSwatches. */
background:
var(--felt-tex),
repeating-linear-gradient(58deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
radial-gradient(ellipse 90% 55% at 50% 14%, rgba(255,255,255,.085), transparent 60%),
radial-gradient(ellipse at 50% 34%, var(--felt) 0%, var(--felt-dark) 100%) !important;
box-shadow:
inset 0 2px 10px rgba(255,255,255,.05),
inset 0 -14px 26px rgba(0,0,0,.40),
inset 0 0 0 4px rgba(0,0,0,.14),
0 3px 6px rgba(0,0,0,.45);
}
.sw.pano .swname { font-size: 12px; } /* el nombre del paño se lee (L16, 2026-08-27) */
.sw.pano .dashes { position: absolute; inset: 6px; border: 1.5px dashed rgba(232,195,74,.5); border-radius: 8px; }
.sw.dorso { padding: 6px 6px 18px; background: rgba(0,0,0,.3); display: flex; justify-content: center; }
.sw.dorso svg { width: 54px; height: auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.sw.bloq { filter: saturate(.55) brightness(.8); }
.sw.mazo { padding: 10px 6px 20px; display: flex; justify-content: center; }
.mazopar { display: flex; align-items: flex-end; justify-content: center; gap: 0; height: 74px; }
.mazofrente, .mazodorso { width: 46px; line-height: 0; border-radius: 5px; box-shadow: 0 3px 6px rgba(0,0,0,.55); position: relative; }
.mazofrente { z-index: 2; transform: rotate(-6deg) translateY(2px); }
.mazodorso { transform: rotate(7deg) translateX(-6px); }
.mazofrente img, .mazofrente svg, .mazodorso svg { width: 100%; height: auto; display: block; border-radius: 5px; }
.mazofrente .naipecompuesto { width: 100%; }
/* Carta de MAZO: la foto de la baraja (marco y pintas del dueño) con el
interior vaciado, y encima los pips del estilo elegido, en vector. */
.naipecompuesto { position: relative; width: 100%; line-height: 0; }
.naipecompuesto .naipepips { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 9px; pointer-events: none; }
.mazodefs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ===== EL PAPEL DE LOS NAIPES (dueño, 2026-08-22) =====
Un tinte que vale para la baraja clásica y para los cinco mazos a la vez:
la carta se MULTIPLICA sobre el color del papel (el blanco toma el tinte,
las líneas y los palos conservan su contraste). El negro invierte el papel
y devuelve los colores con hue-rotate; el acrílico deja ver el paño. */
[data-fondo] .cardbox::before, [data-fondo] .ghostbox, [data-fondo] .mazofrente, [data-fondo] .tnaipe, [data-fondo] .ccard,
[data-fondo] .tq .tnaipe { background: var(--papel); }
/* COLAPSO DE MELLIZOS: ACÁ NO SE TOCA — los papeles son un artículo de la tienda:
el que compró «Papel amarillo» compró ESE amarillo, no uno parecido. */
[data-fondo="rosa"] { --papel: #f3b8c9; }
[data-fondo="verde"] { --papel: #bfe3c3; }
[data-fondo="turquesa"] { --papel: #b3e1e4; }
[data-fondo="azul"] { --papel: #b7cdf0; }
[data-fondo="rojo"] { --papel: #eaa6a1; }
[data-fondo="amarillo"] { --papel: #ecd89a; }
[data-fondo="transparente"] { --papel: transparent; }
[data-fondo="negro"] { --papel: #0e0f12; }
/* COLAPSO DE MELLIZOS: DE ACÁ EN ADELANTE SE PUEDE TOCAR. */
/* (los papeles de color ya no son un film: cada carta viene regenerada con su papel sólido) */
[data-fondo="negro"] .cardbox::before { box-shadow: 0 1px 0 #2a2c33, 0 2px 3px rgba(0,0,0,.5), calc(var(--lx) * -6px) calc(8px + var(--ly) * -5px) 14px rgba(0,0,0,.55); }
[data-fondo="negro"] .naipecompuesto .naipepips circle { fill: #1c1d22; }
/* el acrílico: cuerpo de vidrio, canto claro, reflejo fuerte y viñeta de borde */
[data-fondo="transparente"] .cardbox::before { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45), 0 2px 3px rgba(0,0,0,.3), calc(var(--lx) * -6px) calc(8px + var(--ly) * -5px) 14px rgba(0,0,0,.3); }
[data-fondo="transparente"] .cardbox::after { background: linear-gradient(calc(118deg + var(--lx) * 50deg), transparent 30%, rgba(255,255,255,.32) 46%, rgba(255,255,255,.08) 52%, transparent 64%); }
[data-fondo="transparente"] .naipefoto { opacity: .96; }
[data-fondo="transparente"] .ghostbox, [data-fondo="transparente"] .mazofrente, [data-fondo="transparente"] .tnaipe { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
/* la muestra de la tienda */
/* El papel declara su relleno con la forma corta y MAS ABAJO que la regla común, así que
ganaba con 21 px y la chapa del precio quedaba medio afuera de la ficha, recortada por
su propio borde. Lleva los mismos 39 que las demás. */
.sw.papel { padding: 6px 6px 39px; display: flex; justify-content: center; }
.sw.papel.bloq { filter: none; } /* el color del papel se muestra tal cual; el candado es la chapa del precio */
/* El papel ya tenia SU propio lugar para el precio, pegado al filo derecho: con cinco
cifras (10.000) la chapa se salia de la ficha y el numero quedaba cortado. Ahora sigue
la misma regla que todas —centrada en su franja de abajo— y entra sin recortarse. */
.sw.papel .precio { bottom: 2px; }
.sw.papel .fieltro { padding: 9px 12px; border-radius: 9px; background: radial-gradient(ellipse at 50% 30%, var(--felt), var(--felt-dark)); box-shadow: inset 0 0 0 1px rgba(232,195,74,.35), inset 0 0 14px rgba(0,0,0,.45); }
.sw.papel .muestra { width: 52px; line-height: 0; border-radius: 6px; box-shadow: 0 3px 6px rgba(0,0,0,.55); background: var(--papel, #f6f4ee); position: relative; overflow: hidden; }
.sw.papel .muestra img, .sw.papel .muestra svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.sw.papel[data-fondo="transparente"] .muestra { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), 0 3px 6px rgba(0,0,0,.35); }
.sw.papel[data-fondo="transparente"] .muestra::after { content: ''; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
background: linear-gradient(118deg, transparent 30%, rgba(255,255,255,.38) 46%, rgba(255,255,255,.08) 52%, transparent 64%); }
.sw.papel .muestra .naipefoto, .sw.papel .muestra .naipepips { position: static; }
.sw.papel .muestra .naipecompuesto .naipepips { position: absolute; }
/* (Dueño, 2026-08-30) EL PRECIO NO TAPA EL PRODUCTO. La chapa estaba clavada arriba a la
izquierda, encima de la muestra: en las fichas chicas —sellos, marcos, reversos, papeles—
el precio cubría media pieza y uno compraba a ciegas justo lo que iba a mirar mil veces.
Una tienda que esconde lo que vende trabaja en contra del producto.
Se probó arriba a la derecha y abajo con el nombre: en una ficha de 72 px la chapa mide
lo mismo que la ficha, así que TAPE LO QUE TAPE tapa algo. El problema no era dónde
ponerla: era que la ficha no tiene lugar para las tres cosas.
Así que la ficha pasa a tener TRES RENGLONES —el dibujo, el nombre y el precio—, que es
como se arma una ficha de tienda que se puede mirar: la pieza nunca se tapa, el nombre se
lee entero y el precio tiene su franja. Cuesta 18 px de alto por ficha y los vale. */
.sw .precio {
position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); z-index: 3;
max-width: calc(100% - 6px); /* nunca más ancha que su ficha */
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 8px; border-radius: 999px;
font-family: 'Trocchi', Georgia, serif; font-weight: 700; font-size: 12px; color: #3a2608;
background: radial-gradient(circle at 35% 25%, #fff3c4, #e6bd4e 55%, #b8891a 100%); border: 1px solid #5a3e08;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(0,0,0,.5);
font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
/* La pastilla del precio es dorada y clara: el chorizo, que es una lámina con
canto oscuro, se le apagaba encima. Va más grande y con un filo oscuro finito
que lo despega del fondo. */
/* (2026-09-06) LO QUE NO SE VENDE lleva su CONDICIÓN donde los demás llevan el precio, y se ve
distinto: chapa oscura con filo de oro, sin moneda y sin chinche —no se puede "juntar para"
algo que no está en venta—. Clase PROPIA y no `.precio` a propósito: la ficha no es comprable y
ninguna red que recorra los precios de la tienda tiene por qué contarla. */
.sw .condicion {
position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); z-index: 3;
max-width: calc(100% - 6px); display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: 999px;
font-family: 'Trocchi', Georgia, serif; font-weight: 700; font-size: 11px; letter-spacing: .2px;
white-space: nowrap; background: linear-gradient(#2b1c06, #14100a); border: 1px solid #e8c34a; color: #ffe39a;
box-shadow: inset 0 1px 0 rgba(255,227,154,.18), 0 2px 4px rgba(0,0,0,.55);
}
/* la ficha con condición deja el mismo lugar abajo que la que lleva precio */
.sw:has(.condicion) .swname { bottom: 20px; }
.sw:has(.condicion) { padding-bottom: 39px; }
.sw .precio svg { width: 13px; height: 13px; }
.sw .precio .pieza-oro {
width: 16px; height: 16px; vertical-align: -.24em; margin-left: -2px;
filter: drop-shadow(0 0 .8px rgba(48,30,4,.85)) drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.sw .tick {
position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%;
background: var(--gold); color: #33270a; font-size: 12px; font-weight: bold;
display: none; align-items: center; justify-content: center;
}
.sw.on .tick { display: flex; }
/* ¡Tengo 15!: el racimo imantado se enciende. (Dueño, 2026-09-05: «que la pelota
desaparezca») La medalla dorada que saltaba encima del racimo —.sello15, con sus cinco
pieles vendidas en la tienda— se retiró: quedan la luz del racimo, las chispas y la
flecha de cobro, que es lo que dice cómo se cobra. */
.quince-listo {
filter: drop-shadow(0 0 16px rgba(255,215,90,.95)) drop-shadow(0 10px 18px rgba(0,0,0,.5)) !important;
}
/* Marcos del retrato: el aro del avatar, a elección. */
.marcoPrev {
display: block; width: 66px; height: 66px; border-radius: 50%; box-sizing: border-box;
overflow: hidden; margin: 11px auto 7px;
border: 2.5px solid var(--gold); box-shadow: 0 3px 8px rgba(0,0,0,.55);
}
.marcoPrev svg, .marcoPrev img { width: 100%; height: 100%; display: block; }
/* ===== PERSONALIZACIÓN (2026-09-06): el vestidor del Perfil y la Frase Típica ===== */
#personalizacion .vestfila { margin: 8px 0 12px; }
#personalizacion .vestrot {
font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #cbb98f; margin-bottom: 5px;
}
#personalizacion .vestchips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
#personalizacion .vestchips::-webkit-scrollbar { display: none; }
#personalizacion .vestchip {
flex: 0 0 auto; min-width: 70px; max-width: 100px; border: 1.5px solid rgba(232,195,74,.28); border-radius: 10px;
background: rgba(0,0,0,.24); padding: 6px 5px 5px; cursor: pointer; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 4px;
/* (vara de la casa) el pulgar necesita 44 px de alto reales, también en el vestidor */
min-height: 62px; -webkit-tap-highlight-color: transparent;
}
#personalizacion .vestchip.on { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(232,195,74,.35) inset; }
#personalizacion .vestchip:active { transform: scale(.96); }
#personalizacion .vestchip .vestnom {
/* (L16) once píxeles es el piso de la casa para cualquier texto de interfaz: lo mide legibilidad.mjs */
font-size: 11px; line-height: 1.2; color: var(--cream); overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
#personalizacion .vestchip .vmuestra, #personalizacion .vestchip .marcoPrev { width: 34px; height: 34px; margin: 0; }
#personalizacion .vestchip .marcoPrev { border-width: 2px; }
#personalizacion .vestchip svg, #personalizacion .vestchip img { width: 34px; height: 34px; display: block; }
/* La muestra de una baraja son DOS naipes, más altos que anchos: sin esto la fila del mazo medía
el doble que las demás y el vestidor quedaba desparejo. Se achica entera, sin recortar nada. */
#personalizacion .vestchip .mazopar { transform: scale(.42); transform-origin: center; height: 36px; width: 60px; display: flex; align-items: center; justify-content: center; }
#personalizacion .vestchip .mazopar > * { margin: 0; }
#personalizacion .vestvacio { font-size: 11.5px; color: #cbb98f; line-height: 1.45; }
/* La Frase Típica: una tarjeta con su aviso, su contador y su estado. */
#personalizacion .frasecard {
border: 1px solid rgba(232,195,74,.3); border-radius: 12px; padding: 11px 12px; margin-top: 4px;
background: rgba(0,0,0,.22);
}
#personalizacion .frasecard input {
width: 100%; box-sizing: border-box; font-family: 'Trocchi', Georgia, serif; font-size: 16px;
color: var(--cream); background: rgba(0,0,0,.3); border: 1px solid rgba(232,195,74,.35);
border-radius: 8px; padding: 9px 10px; min-height: 40px;
}
#personalizacion .frasecuenta { font-size: 11px; color: #cbb98f; text-align: right; margin-top: 4px; }
#personalizacion .frasecuenta.tope { color: #ffb4a2; }
#personalizacion .fraseaviso { font-size: 11px; color: #cbb98f; line-height: 1.45; margin: 7px 0 9px; }
#personalizacion .frasehoy {
display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 13px; color: var(--cream);
}
#personalizacion .frasehoy b { font-family: 'Trocchi', Georgia, serif; font-size: 15px; color: var(--gold); }
#personalizacion .frasedicho { font-size: 11.5px; line-height: 1.5; margin-top: 8px; }
#personalizacion .frasedicho.mal { color: #ffb4a2; }
#personalizacion .frasedicho.bien { color: #b9e6b0; }
/* (2026-09-07) EN REVISIÓN no es aprobada: ni verde ni rojo. Es la espera, y se ve como espera. */
#personalizacion .frasedicho.esperando { color: #e8c34a; }
/* ===== LOS MARCOS DEL RETRATO (dueño, 2026-08-22: "tienen que dar ganas de comprarlos") =====
Cada marco es una pieza: anillos con bisel, grabado o trama, luz que gira, sombra con peso. */
.marco-oro, body[data-marco="oro"] .myrow .avatar, body[data-marco="oro"] #perfilAvatar {
border: 4px solid transparent !important;
background-image: linear-gradient(#1d1108, #1d1108),
conic-gradient(from 20deg, #fff3c4, #c9971c 18%, #fff0b0 30%, #8a6210 48%, #ffe9a0 62%, #b8891a 80%, #fff3c4) !important;
background-origin: border-box !important; background-clip: content-box, border-box !important;
box-shadow: 0 0 0 1.5px #3a2608, 0 0 0 3.5px #e6bd4e, 0 0 0 5px #3a2608, 0 0 16px rgba(255,222,120,.55), 0 4px 10px rgba(0,0,0,.6) !important;
animation: marcoOro 3.4s ease-in-out infinite;
}
@keyframes marcoOro { 50% { box-shadow: 0 0 0 1.5px #3a2608, 0 0 0 3.5px #ffd970, 0 0 0 5px #3a2608, 0 0 26px rgba(255,222,120,.85), 0 4px 10px rgba(0,0,0,.6); } }
.marco-guarda, body[data-marco="guarda"] .myrow .avatar, body[data-marco="guarda"] #perfilAvatar {
border: 5px solid transparent !important;
background-image: linear-gradient(#1d1108, #1d1108),
repeating-conic-gradient(#e8c34a 0 7deg, #241408 7deg 10deg, #f2e2b8 10deg 13deg, #241408 13deg 16deg, #8e1f1c 16deg 23deg, #241408 23deg 26deg) !important;
background-origin: border-box !important; background-clip: content-box, border-box !important;
box-shadow: 0 0 0 1.5px #e8c34a, 0 0 0 3px #241408, 0 4px 10px rgba(0,0,0,.6) !important;
}
.marco-laurel, body[data-marco="laurel"] .myrow .avatar, body[data-marco="laurel"] #perfilAvatar {
border: 5px solid transparent !important;
background-image: linear-gradient(#101d0a, #101d0a),
repeating-conic-gradient(from 0deg, #ffe9a0 0 5deg, #b8891a 5deg 11deg, #5a3e08 11deg 13deg, #e6bd4e 13deg 18deg, #3a2608 18deg 20deg) !important;
background-origin: border-box !important; background-clip: content-box, border-box !important;
box-shadow: 0 0 0 1.5px #3a2608, 0 0 0 3px #e6bd4e, 0 0 14px rgba(232,195,74,.5), 0 4px 10px rgba(0,0,0,.6) !important;
}
.marco-sol, body[data-marco="sol"] .myrow .avatar, body[data-marco="sol"] #perfilAvatar {
border: 3px solid #fff3c4 !important; position: relative;
box-shadow: 0 0 0 3px #f3c53d, 0 0 0 5px rgba(255,215,90,.35), 0 0 26px rgba(255,215,90,1), 0 0 48px rgba(255,180,40,.55), 0 4px 10px rgba(0,0,0,.6) !important;
animation: marcoSol 2.6s ease-in-out infinite;
}
@keyframes marcoSol { 50% { box-shadow: 0 0 0 3px #f3c53d, 0 0 0 7px rgba(255,215,90,.25), 0 0 36px rgba(255,215,90,1), 0 0 64px rgba(255,180,40,.7), 0 4px 10px rgba(0,0,0,.6); } }
.marco-fileteado, body[data-marco="fileteado"] .myrow .avatar, body[data-marco="fileteado"] #perfilAvatar {
border: 5px solid transparent !important;
background-image: linear-gradient(#1f6b3a, #1f6b3a),
repeating-conic-gradient(from 0deg, #f5c400 0 6deg, #c8102e 6deg 12deg, #fff3d6 12deg 14deg, #1d4ea3 14deg 20deg, #fff3d6 20deg 22deg) !important;
background-origin: border-box !important; background-clip: content-box, border-box !important;
box-shadow: 0 0 0 1.5px #141414, 0 0 0 3.5px #d4a12a, 0 0 0 5px #141414, 0 4px 10px rgba(0,0,0,.6) !important;
}
.marco-neon, body[data-marco="neon"] .myrow .avatar, body[data-marco="neon"] #perfilAvatar {
border: 3px solid #1b1d24 !important;
box-shadow: 0 0 0 2px #19e3ff, 0 0 10px #19e3ff, 0 0 22px rgba(25,227,255,.7), 0 0 0 4.5px #ff2fb0, 0 0 14px rgba(255,47,176,.7), 0 4px 10px rgba(0,0,0,.6) !important;
animation: marcoNeon 1.8s ease-in-out infinite;
}
@keyframes marcoNeon { 50% { box-shadow: 0 0 0 2px #19e3ff, 0 0 16px #19e3ff, 0 0 34px rgba(25,227,255,.9), 0 0 0 4.5px #ff2fb0, 0 0 24px rgba(255,47,176,.9), 0 4px 10px rgba(0,0,0,.6); } }
/* (2026-09-06) EL MARCO DE LEYENDA: el único adorno del juego que NO SE VENDE. Llega con el nivel
999 y con nada más —no está en el catálogo, así que la tienda no lo ofrece y el server rechaza
comprarlo—. Por eso se ve distinto a todo: oro macizo con laurel grabado y un halo que respira. */
.marco-leyenda, body[data-marco="leyenda"] .myrow .avatar, body[data-marco="leyenda"] #perfilAvatar {
border: 5px solid transparent !important;
background-image: linear-gradient(#1a0f05, #1a0f05),
conic-gradient(from 0deg, #fff8dc, #e8c34a 8%, #8a6210 16%, #fff3c4 24%, #c9971c 34%, #fffbe8 44%,
#a87b12 54%, #ffe9a0 66%, #6b4a08 76%, #fff8dc 88%, #e8c34a) !important;
background-origin: border-box !important; background-clip: content-box, border-box !important;
box-shadow: 0 0 0 1.5px #2b1c06, 0 0 0 3.5px #ffe9a0, 0 0 0 5.5px #2b1c06,
0 0 22px rgba(255,226,140,.75), 0 0 44px rgba(255,190,60,.35), 0 4px 12px rgba(0,0,0,.65) !important;
animation: marcoLeyenda 4.2s ease-in-out infinite;
}
@keyframes marcoLeyenda { 50% { box-shadow: 0 0 0 1.5px #2b1c06, 0 0 0 3.5px #fffbe8, 0 0 0 5.5px #2b1c06,
0 0 34px rgba(255,226,140,1), 0 0 64px rgba(255,190,60,.55), 0 4px 12px rgba(0,0,0,.65); } }
/* EL RACIMO PIDE EL GESTO. Con el 15 formado, una flecha corta late hacia
abajo debajo del racimo: es lo único que dice cómo se cobra. Cuando el gesto
ya alcanzó, la flecha se apaga y el racimo se enciende: soltás y cobra. */
.ghostbox.pide-bajar::after {
content: '▼'; position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
font-size: 15px; color: #ffe08a; text-shadow: 0 1px 3px rgba(0,0,0,.8);
animation: bajar15 1.05s ease-in-out infinite; pointer-events: none;
}
@keyframes bajar15 { 0%, 100% { opacity: .45; transform: translate(-50%, 0); }
50% { opacity: 1; transform: translate(-50%, 5px); } }
/* EL HALO DE "SOLTÁ QUE COBRA". Estuvo escrito y nunca se vio: `.quince-listo`
lleva `!important` (lo necesita para ganarle al filtro base de `.ghostbox`) y
le tapaba éste, que no lo llevaba. Dos clases + !important: ahora gana el de
abajo, que es el que confirma. */
.ghostbox.cobro-listo { filter: drop-shadow(0 0 22px rgba(255,226,140,1)) drop-shadow(0 0 44px rgba(255,190,60,.55)) drop-shadow(0 12px 20px rgba(0,0,0,.55)) !important; }
/* TU MONTÓN, ENCENDIDO: el destino se ve antes de soltar. */
.pilebtn.destino { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 12px;
box-shadow: 0 0 22px rgba(232,195,74,.75); }
.pilebtn.destino .pstack { filter: drop-shadow(0 0 10px rgba(255,226,140,.9)); }
.ghostbox.aparcado { transition: transform .12s ease; transform: rotate(4deg) scale(1.02) translateY(2px); }
.homeslot {
position: fixed; z-index: 12; pointer-events: none;
border: 2.5px dashed rgba(232,195,74,.6); border-radius: 9px;
background: rgba(232,195,74,.07);
animation: homepulse 1.1s ease-in-out infinite;
}
@keyframes homepulse { 50% { border-color: rgba(232,195,74,.25); } }
.stuckcard {
position: fixed; z-index: 45; pointer-events: none;
filter: drop-shadow(0 0 10px var(--gold)) drop-shadow(0 8px 14px rgba(0,0,0,.55));
transition: left .16s ease-out, top .16s ease-out, transform .16s ease-out;
}
.stuckcard svg { width: 100%; height: auto; display: block; }
#table {
/* Deterministic grid: balanced centered rows (max 5 per row), never an
arbitrary 5+1 wrap. Rows are built by render(), centered both ways. */
display: flex; flex-direction: column; gap: 10px; align-items: center;
justify-content: center; padding: 22px 14px; max-height: 100%; overflow-y: auto;
}
#table .trow { display: flex; gap: 10px; justify-content: center; }
/* (2026-09-07) .75 y no .45: es el ÚNICO texto de la MESA que reprobaba contraste, y por lejos —
daba 2,71:1 sobre el paño verde y 1,87:1 sobre el de madera, el peor del juego. Con el zoom
clausurado por orden del dueño, el contraste es la única palanca de legibilidad que queda. */
.mesa .empty { opacity: .75; font-style: normal; font-size: 14px; }
.sumbadge {
position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
font-family: 'Trocchi', Georgia, serif; font-size: 15px; padding: 5px 14px; border-radius: var(--r-med);
background: rgba(0,0,0,.6); border: 1.5px solid rgba(255,255,255,.35);
display: none; z-index: 5; white-space: nowrap;
}
.sumbadge.show { display: block; }
.sumbadge.ok { border-color: var(--gold); color: var(--gold); font-weight: bold; }
#btnFifteen {
position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
display: none; z-index: 5;
}
#btnFifteen.show { display: block; animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(212,169,41,.25); } }
/* ---- cards ---- */
/* ===== LA LUZ DE LA SALA (dueño, 2026-08-22: "textura, brillo e iluminación")
--lx/--ly: de dónde viene la lámpara (−1..1). Sigue al giro del teléfono o
al mouse. Todo lo que brilla o da sombra la respeta: el paño, el lomo y el
reflejo de cada carta, el parallax del hogar. ===== */
:root { --lx: 0; --ly: 0; --px: 0; --py: 0; }
/* LA LUZ DE LA LÁMPARA Y LA PENUMBRA DEL RINCÓN, JUNTAS. Una mesa de juego
se ve así en la vida: un cono de luz en el centro y las esquinas apagadas.
Y no es sólo atmósfera — es lo que hace que la carta MANDE: con el borde en
penumbra, el naipe queda en la única zona iluminada de la pantalla. Va acá,
en la capa de la luz, para que la hereden los seis paños y no sólo el verde. */
.mesa::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(ellipse 72% 50% at calc(50% + var(--lx) * 24%) calc(22% + var(--ly) * 18%),
rgba(255,246,210,.17), rgba(255,246,210,.05) 45%, transparent 70%),
radial-gradient(ellipse 86% 74% at 50% 46%,
transparent 38%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.42) 100%);
}
/* Cartas con LOMO: el canto del papel (dos filos claros y uno oscuro), la
sombra de contacto y la sombra larga que cae del lado contrario a la luz. */
.cardbox::before {
content: ''; position: absolute; inset: 0; border-radius: 9px; z-index: -1; background: #e9e5d9;
/* un solo canto de papel (1 px) + sombra de contacto + sombra larga según la luz */
/* (Etapa 4, 2026-09-26) en reposo la sombra cae abajo a la DERECHA: la lámpara del sistema está arriba a la
izquierda (tema/sistema.css), y la carta la obedece como todo lo demás; el giroscopio la sigue corriendo. */
box-shadow: 0 1px 0 #c9c4b7, 0 2px 3px rgba(0,0,0,.32),
calc(5px + var(--lx) * -6px) calc(8px + var(--ly) * -5px) 14px rgba(0,0,0,.38);
}
/* El reflejo del barniz: una veta de luz que gira con la lámpara. */
.cardbox::after {
content: ''; position: absolute; inset: 0; border-radius: 9px; pointer-events: none; z-index: 2;
background: linear-gradient(calc(118deg + var(--lx) * 50deg), transparent 38%, rgba(255,255,255,.14) 49%, transparent 60%);
}
.cardbox.dragging::before, .cardbox.dragging::after { display: none; }
/* Chispas del 15: saltan del racimo cuando se forma el quince. */
.chispa {
position: fixed; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; z-index: 52;
background: radial-gradient(circle, #fff7c0, #ffb300 60%, transparent 72%); box-shadow: 0 0 8px #ffc400;
animation: chispa .75s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes chispa {
0% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.15); opacity: 0; }
}
.cardbox { position: relative; flex: none; cursor: pointer; touch-action: none; isolation: isolate;
filter: none;
transition: transform .16s, filter .16s, opacity .18s ease, translate .22s cubic-bezier(.3,.9,.4,1); }
/* Reacomodo del paño: la carta que vas a INTERCAMBIAR se enciende en oro
mientras la sobrevolás; la barra marca el hueco exacto donde se inserta. */
#table .cardbox.objetivo {
filter: drop-shadow(0 0 9px rgba(232,195,74,.95)) drop-shadow(0 0 22px rgba(232,195,74,.5));
transform: scale(1.08); z-index: 3;
}
#dropBar {
position: fixed; width: 4px; border-radius: 3px; pointer-events: none; z-index: 49; opacity: 0;
background: linear-gradient(180deg, #fff2c0, #e8c34a 50%, #c9971c);
box-shadow: 0 0 10px rgba(232,195,74,.9), 0 0 22px rgba(232,195,74,.5);
transition: opacity .12s, left .1s, top .1s;
}
#dropBar.show { opacity: 1; }
.cardbox svg { display: block; width: 100%; height: auto; border-radius: 9px; }
#table .cardbox { width: var(--mesa-card, var(--mesa-w)); }
/* --- Los botones del hogar: paño verde con textura y letra de oro --- */
#menu .menupanel button.aux {
font-family: 'Trocchi', Georgia, serif; font-weight: 400;
font-size: 16.5px; letter-spacing: .6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: #f6e6b4; text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 12px rgba(232,195,74,.22);
background:
radial-gradient(ellipse 120% 140% at 50% -20%, rgba(255,240,190,.16), transparent 60%),
repeating-linear-gradient(97deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px),
repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, transparent 2px 6px),
linear-gradient(180deg, #2f6b45 0%, #1f4e31 52%, #143721 100%);
border: 1.5px solid rgba(232,195,74,.5);
box-shadow: inset 0 1px 0 rgba(255,240,190,.22), inset 0 -3px 7px rgba(0,0,0,.4),
0 3px 10px rgba(0,0,0,.45);
padding: 13px 16px;
}
#menu .menupanel button.aux:active { transform: scale(.985); }
/* (Dueño, 2026-09-14) LA FILA DE JUGAR: el botón grande y, pegado, el engranaje que ajusta la mesa.
Son una sola pieza: mismo alto, misma curva por fuera, una costura de oro en el medio. */
#menu .menupanel .jugarfila { display: flex; gap: 0; align-items: stretch; }
#menu .menupanel .jugarfila > .primary { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
#menu .menupanel .jugarfila > .ajustarmesa {
flex: none; width: 58px; display: grid; place-items: center; cursor: pointer;
border: 1.5px solid rgba(232,195,74,.5); border-left: 0;
border-top-right-radius: 14px; border-bottom-right-radius: 14px;
background:
radial-gradient(ellipse 120% 140% at 50% -20%, rgba(255,240,190,.14), transparent 60%),
linear-gradient(180deg, #2f6b45 0%, #1f4e31 52%, #143721 100%);
box-shadow: inset 0 1px 0 rgba(255,240,190,.22), 0 3px 10px rgba(0,0,0,.45);
}
#menu .menupanel .jugarfila > .ajustarmesa svg { width: 25px; height: 25px; fill: none;
stroke: #f0d488; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#menu .menupanel .jugarfila > .ajustarmesa:active { transform: scale(.985); }
/* LAS DOS MESAS CON GENTE: placas de cuero con su dibujo, el nombre y qué pasa al tocarlas. */
#menu .menupanel .modosfila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#menu .menupanel button.modo {
display: flex; align-items: center; gap: 11px; text-align: left; white-space: normal;
min-height: 78px; padding: 12px 13px;
}
#menu .menupanel button.modo .modo-arte {
flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
border: 1px solid rgba(232,195,74,.45);
background: radial-gradient(circle at 34% 28%, rgba(255,240,190,.2), rgba(0,0,0,.28) 72%);
box-shadow: inset 0 1px 0 rgba(255,240,190,.28);
}
#menu .menupanel button.modo .modo-arte svg { width: 25px; height: 25px; fill: none;
stroke: #f0d488; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#menu .menupanel button.modo .modo-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#menu .menupanel button.modo b { font-family: 'Trocchi', Georgia, serif; font-size: 16.5px; font-weight: 400;
color: #f6e6b4; line-height: 1.12; }
#menu .menupanel button.modo small { font-family: 'Alegreya', Georgia, serif; font-size: 13px;
color: #cbb98f; letter-spacing: 0; line-height: 1.2; }
#menu .menupanel .mesa-resumen { margin: -4px 0 12px; text-align: center; }
.mesa-resumen small { font-size: 14px; color: #cbb98f; letter-spacing: .3px; }
@media (max-width: 380px) {
#menu .menupanel .modosfila { grid-template-columns: 1fr; }
#menu .menupanel button.modo { min-height: 66px; }
}
/* El principal manda: oro lleno con la letra grabada en oscuro */
#menu .menupanel button.primary {
font-family: 'Trocchi', Georgia, serif; font-weight: 400;
font-size: 21px; letter-spacing: .8px; color: #33270a;
background:
repeating-linear-gradient(97deg, rgba(255,255,255,.06) 0 2px, transparent 2px 5px),
linear-gradient(180deg, #ffe89a 0%, #e8c34a 48%, #c0951c 100%);
text-shadow: 0 1px 0 rgba(255,245,205,.55);
border: 1.5px solid #f7e5a8;
box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(120,85,10,.45),
0 4px 12px rgba(0,0,0,.5);
}
/* --- En pantalla grande el juego se compone como una escena: la mesa vive
en su columna, y alrededor hay una sala con luz, no un fondo plano. --- */
@media (min-width: 860px) {
/* La Quebrada al atardecer: cielo norteño y cerros EN VECTOR — nítido a
cualquier resolución. Fuera la madera lavada y la marca de agua. */
body {
background: linear-gradient(180deg, #1a0c1e 0%, #38161e 30%, #6e3320 58%, #482013 76%, #150a07 100%);
}
body::after {
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(1.6px 1.6px at 11% 9%, rgba(255,242,205,.95), transparent 60%),
radial-gradient(1.3px 1.3px at 26% 16%, rgba(255,236,190,.8), transparent 60%),
radial-gradient(1.1px 1.1px at 43% 7%, rgba(255,242,205,.7), transparent 60%),
radial-gradient(1.6px 1.6px at 62% 13%, rgba(255,236,190,.85), transparent 60%),
radial-gradient(1.2px 1.2px at 78% 6%, rgba(255,242,205,.75), transparent 60%),
radial-gradient(1.5px 1.5px at 91% 15%, rgba(255,236,190,.9), transparent 60%),
radial-gradient(1.1px 1.1px at 55% 21%, rgba(255,242,205,.55), transparent 60%),
radial-gradient(ellipse 62% 36% at 50% 44%, rgba(255,168,76,.17), transparent 66%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 610 L150 505 L310 595 L480 460 L650 585 L830 472 L1010 580 L1190 492 L1370 585 L1510 525 L1600 570 L1600 900 L0 900 Z' fill='%23592a40' opacity='.82'/%3E%3Cpath d='M0 610 L150 505 L310 595 L480 460 L650 585 L830 472 L1010 580 L1190 492 L1370 585 L1510 525 L1600 570' fill='none' stroke='%23e8c34a' stroke-width='2.2' opacity='.20'/%3E%3Cpath d='M0 688 L185 580 L345 658 L565 540 L765 652 L965 556 L1165 648 L1345 582 L1600 662 L1600 900 L0 900 Z' fill='%23411e2c' opacity='.95'/%3E%3Cpath d='M0 776 L225 664 L425 742 L665 640 L905 736 L1125 660 L1365 742 L1600 686 L1600 900 L0 900 Z' fill='%23240f0c'/%3E%3C/svg%3E") bottom center / cover no-repeat;
}
.mesa {
border-radius: var(--r-med);
border-left: 1.5px solid rgba(232,195,74,.45);
border-right: 1.5px solid rgba(232,195,74,.45);
}
.board {
max-width: 470px;
border-radius: var(--r-gran);
background:
radial-gradient(ellipse 130% 60% at 50% -6%, rgba(232,195,74,.10), transparent 55%),
linear-gradient(180deg, rgba(30,17,6,.55), rgba(12,7,3,.62));
box-shadow:
0 0 0 1px rgba(232,195,74,.22),
0 30px 80px rgba(0,0,0,.72),
0 4px 0 rgba(255,235,180,.06) inset;
padding: 10px 12px 0;
position: relative; z-index: 1;
}
#menu { padding-left: 0; padding-right: 0; }
.menupanel, .logo { max-width: 470px; margin-left: auto; margin-right: auto; }
.banner .box { box-shadow: 0 34px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(232,195,74,.18); }
}
/* --- El Pase del Quincero --- */
.pasecard { cursor: pointer; }
.pasebarra {
height: 10px; border-radius: 6px; overflow: hidden; margin-top: 8px;
background: rgba(0,0,0,.4); border: 1px solid rgba(232,195,74,.25);
}
.pasebarra i {
display: block; height: 100%; width: 0;
background: linear-gradient(90deg, #c9971c, #e8c34a, #fff3c8);
transition: width .5s ease;
}
.pasetrack {
/* minmax(0,1fr) y no 1fr: el mínimo de una columna «1fr» es su contenido, así que el
nombre de un adorno ("Jaspeado Azul") ensanchaba su columna y empujaba dos escalones
fuera de la caja. Con mínimo cero la columna manda y el texto se recorta, que es lo
que ya sabe hacer. */
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
max-height: 42vh; overflow-y: auto; padding: 2px;
}
.pescalon {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 7px 2px; border-radius: 9px; border: 1px solid rgba(232,195,74,.2);
background: rgba(0,0,0,.25);
}
.pescalon.hecho { border-color: var(--gold); background: rgba(232,195,74,.16); }
/* El escalón en el que estás parado (L18, 2026-08-27): hay UNO solo, brilla
sin estar cumplido, y se distingue del hecho (lleno) y del hito (doble). */
.pescalon.actual { border-color: rgba(232,195,74,.85); background: rgba(232,195,74,.07);
box-shadow: 0 0 0 1.5px rgba(232,195,74,.35), 0 0 12px rgba(232,195,74,.3); }
.pescalon.actual .pnum { color: var(--gold); }
.pescalon.hito { border-width: 2px; border-style: double; }
.pescalon .pnum { font-family: 'Trocchi', Georgia, serif; font-size: 11px; color: #cbb98f; }
.pescalon.hecho .pnum { color: var(--gold); }
.pescalon .ppremio { font-size: 10.5px; color: #cbb98f; }
/* LA VÍA DE ORO, debajo de la libre en cada escalón. Trabada se ve apagada con su candado:
ver lo que uno se está perdiendo es la mitad del producto, esconderlo sería vender a
ciegas. Abierta se enciende. El nombre de un adorno no entra en 30 px: se recorta y el
título del escalón lo dice entero. */
.pescalon .poro {
font-size: 9.5px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; padding-top: 2px; border-top: 1px solid rgba(232,195,74,.14); width: 100%;
text-align: center; margin-top: 2px;
}
/* .7 y no .45: apagado SIGNIFICA «trabado», y se conserva esa lectura con contraste suficiente. */
.pescalon .poro.trabada { color: rgba(203,185,143,.7); }
.pescalon .poro.abierta { color: #ffe39a; }
.pescalon .poro.regalo.abierta { color: #ffd24a; font-weight: 700; }
/* La invitación: chapa de oro apagado, para que se lea como una oferta de la casa y no
como un aviso pegado encima del juego. */
.paseoro {
margin-top: 12px; padding: 11px 13px; border-radius: var(--r-med);
border: 1.5px solid rgba(232,195,74,.45);
background: linear-gradient(180deg, rgba(58,38,12,.9), rgba(20,12,5,.92));
box-shadow: inset 0 1px 0 rgba(255,230,160,.14);
}
.paseoro .pohead {
font-family: 'Trocchi', Georgia, serif; font-size: 11.5px; letter-spacing: 3px;
color: var(--gold); text-transform: uppercase; text-align: center; margin-bottom: 7px;
}
.paseoro .potxt { font-size: 13px; color: var(--cream); line-height: 1.5; text-align: center; }
.paseoro .pofino { font-size: 11.5px; color: #cbb98f; line-height: 1.45; text-align: center; margin-top: 6px; }
.paseoro.tiene {
text-align: center; font-family: 'Trocchi', Georgia, serif; font-size: 13.5px; color: #ffe39a;
}
/* --- El ranking --- */
.rlista { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; }
.rfila {
display: flex; align-items: center; gap: 10px; padding: 8px 11px;
border-radius: var(--r-med); background: rgba(0,0,0,.22);
border: 1px solid rgba(232,195,74,.16);
}
.rfila.rsoy { border-color: var(--gold); background: rgba(232,195,74,.14); }
.rmed { flex: none; width: 30px; text-align: center; font-size: 16px; }
.rpos { font-family: 'Trocchi', Georgia, serif; font-size: 12.5px; color: #cbb98f; }
.rnom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 700; color: var(--cream); font-size: 14.5px; }
.rdato { flex: none; font-size: 12.5px; color: #cbb98f; font-variant-numeric: tabular-nums; }
.rpie { text-align: center; margin-top: 12px; font-size: 13.5px; color: #cbb98f; }
.rpie b { color: var(--gold); font-size: 16px; }
/* --- La Gira por provincias --- */
.gnav { display: flex; align-items: center; justify-content: center; gap: 10px; }
.gflecha {
width: 40px; height: 40px; border-radius: 50%; flex: none; cursor: pointer;
/* chevron SVG y no glifo de fuente: el ‹ tipográfico caía abajo del
centro del círculo en el teléfono */
display: flex; align-items: center; justify-content: center; padding: 0;
color: #3a2608;
background: radial-gradient(circle at 35% 25%, #fff3c4, #e6bd4e 50%, #b8891a 100%);
border: 1px solid #5a3e08;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.35), 0 3px 6px rgba(0,0,0,.5);
}
/* El chevron habla el color del botón (currentColor): la base lo da marrón sobre bronce,
y una piel que oscurezca la bola y aclare el color pinta la flecha clara SOLA — el trazo
fijo dejaba flecha oscura sobre nogal oscuro (dueño, 2026-09-04). */
.gflecha svg { width: 16px; height: 16px; display: block; stroke: currentColor; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.gflecha:active { transform: scale(.92); }
.gmuypronto {
margin: 26px auto; max-width: 300px; text-align: center; padding: 26px 20px;
border: 2px dashed rgba(232,195,74,.4); border-radius: var(--r-med);
background: rgba(0,0,0,.25);
}
.gmpsello {
font-family: 'Trocchi', Georgia, serif; letter-spacing: 3px;
font-size: 19px; color: var(--gold); margin-bottom: 10px;
}
.gmptexto { font-size: 14px; color: #cbb98f; line-height: 1.5; }
/* --- El cofre del día --- */
/* La cuenta regresiva al próximo cofre: tres fichitas de cuero con los
números en Trocchi dorado — el formato de las apps grandes, vestido de
CHORISO. El último minuto late en un dorado más vivo. */
.cofrecuenta { margin: 8px 0 2px; }
.cofrecuenta .ctit {
font-family: 'Trocchi', Georgia, serif; font-style: normal;
font-size: 14px; color: var(--cream); opacity: .85; margin-bottom: 8px;
}
.cofreslots { display: flex; gap: 10px; justify-content: center; }
.cslot {
min-width: 68px; padding: 7px 10px 6px; border-radius: 10px;
background: rgba(0,0,0,.35); border: 1px solid rgba(232,195,74,.35);
box-shadow: inset 0 1px 0 rgba(255,230,160,.14), inset 0 -2px 5px rgba(0,0,0,.5);
}
.cslot .cnum {
display: block; font-family: 'Trocchi', Georgia, serif;
font-size: 30px; line-height: 1.05; color: var(--gold);
font-variant-numeric: tabular-nums;
text-shadow: 0 2px 3px rgba(0,0,0,.6);
}
.cslot .clbl {
display: block; margin-top: 3px;
font-family: 'Trocchi', Georgia, serif; font-size: 9px;
letter-spacing: 2px; text-transform: uppercase; color: #cbb98f;
}
.cofreslots.final .cnum { color: #ffe9a0; animation: cuentafinal 1s ease-in-out infinite; }
@keyframes cuentafinal { 50% { text-shadow: 0 2px 3px rgba(0,0,0,.6), 0 0 14px rgba(255,214,110,.9); } }
#cofreSvg.sacudiendo { animation: cofreShake .12s 6; }
@keyframes cofreShake { 25% { transform: rotate(-2.4deg); } 75% { transform: rotate(2.4deg); } }
.menutile.brillando { border-color: var(--gold); }
.menutile.brillando::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: 0 0 14px rgba(232,195,74,.5);
animation: latir 2.2s ease-in-out infinite;
will-change: opacity;
}
/* --- El cielo de la Quebrada: la hora real tiñe los bordes de la mesa.
Un solo gradiente estático (variables CSS puestas por JS cada 10 min);
nada se anima por cuadro — solo una transición cuando cambia la franja. --- */
#cielo {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
linear-gradient(180deg, var(--cielo-alto, transparent) 0%, transparent 34%),
radial-gradient(ellipse 120% 55% at 50% -12%, var(--cielo-brillo, transparent), transparent 68%);
opacity: var(--cielo-fuerza, 0);
transition: opacity 2.5s ease;
}
.board { position: relative; z-index: 1; }
/* --- Los ocho personajes de la casa --- */
.retratos {
width: min(100%, 356px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px; justify-content: center;
}
.retrato {
position: relative; min-width: 0; aspect-ratio: .78; padding: 0 0 19px; border-radius: 12px; overflow: hidden;
border: 1.5px solid rgba(232,195,74,.35); cursor: pointer;
background: linear-gradient(180deg, #342115, #130b07);
box-shadow: inset 0 1px 0 rgba(255,240,190,.13), 0 5px 10px rgba(0,0,0,.38);
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; will-change: transform;
}
.retrato svg, .retrato img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 35%; }
.retrato .retnombre {
position: absolute; left: 0; right: 0; bottom: 0; height: 21px; display: grid; place-items: center;
padding: 0 2px; background: linear-gradient(180deg, #3a2013, #150b07);
font: 700 11px/1 'Trocchi', Georgia, serif; color: #eadba9; letter-spacing: .25px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* la cara dibujada llena su anillo igual que una foto */
.gava svg, .cavatar svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.retrato:hover { transform: translateY(-2px) scale(1.025); }
.retrato.elegido {
border-color: #ffe39a; box-shadow: 0 0 0 2px rgba(232,195,74,.24), 0 7px 18px rgba(0,0,0,.52), 0 0 18px rgba(232,195,74,.24);
}
.retrato.elegido::after {
content: '✓'; position: absolute; top: 5px; right: 5px; width: 20px; height: 20px;
display: grid; place-items: center; border-radius: 50%; color: #352407; background: #f1cf68;
border: 1px solid #fff1bd; font: 800 12px/1 system-ui; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.retrato-ficha {
width: min(100%, 356px); min-height: 70px; margin-top: 2px; padding: 10px 13px; text-align: left;
border: 1px solid rgba(232,195,74,.34); border-radius: 13px;
background: linear-gradient(145deg, rgba(96,44,31,.42), rgba(11,24,18,.8));
box-shadow: inset 0 1px 0 rgba(255,237,184,.1);
}
.retrato-ficha .rfhead { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.retrato-ficha .rfnombre { font: 700 16px/1.1 'Trocchi', Georgia, serif; color: #ffe39a; }
.retrato-ficha .rfapodo { font: 700 11px/1 'Trocchi', Georgia, serif; letter-spacing: .8px; color: #cbb98f; }
.retrato-ficha p { margin: 6px 0 0; color: #dfd3b5; font: 400 11.5px/1.42 'Trocchi', Georgia, serif; }
/* --- La ceremonia del final: peso, oro y calma --- */
.winmedalla {
display: block; width: 128px; height: 128px; margin: -4px auto 2px;
will-change: transform; filter: drop-shadow(0 12px 26px rgba(0,0,0,.55));
}
#winBanner .box.ceremonia .winmedalla {
animation: medallaCae .75s cubic-bezier(.24, 1.35, .38, 1) both;
}
@keyframes medallaCae {
0% { transform: translateY(-58vh) scale(.55) rotate(-12deg); opacity: 0; }
55% { opacity: 1; }
100% { transform: none; opacity: 1; }
}
#winBanner .box.ceremonia .win-in { opacity: 0; animation: winIn .55s ease-out forwards; }
#winBanner .box.ceremonia .win-in.w1 { animation-delay: .55s; }
#winBanner .box.ceremonia .win-in.w2 { animation-delay: .8s; }
#winBanner .box.ceremonia .win-in.w3 { animation-delay: 1.15s; }
#winBanner .box.ceremonia .win-in.w4 { animation-delay: 1.35s; }
@keyframes winIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
#winTally { min-height: 30px; display: flex; justify-content: center; align-items: center;
gap: 9px; flex-wrap: wrap; margin: 4px 0 2px; }
#winTally .grupo5t { display: flex; gap: 2.5px; position: relative; }
#winTally svg { width: 9px; height: 26px; }
#winTally .tcruz { position: absolute; left: -2px; right: -2px; top: 50%;
height: 3px; background: #d9a441; border-radius: 2px;
transform: rotate(66deg); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
/* ============ EL TORRENTE DE CHORISITOS ============
(Dueño, 2026-08-31) "cuando se regalan chorisitos en el cofre del día deben verse las
monedas salir como torrente y viajar hacia la zona superior de la pantalla donde se
muestra el conteo. Tiene que ser algo bellísimo, si no no hagas nada."
La plata que aparece de la nada no se siente. La plata que SALE de algún lado, vuela y
ENTRA en tu contador, sí: por eso el número de arriba no salta, sube mientras las monedas
llegan, una por una. El vuelo tiene tres tiempos, como cualquier cosa que se lanza:
1. EL REVOLEO. Salen disparadas del cofre en abanico y les pega la gravedad. Dura poco
—un cuarto de segundo— y es lo que hace que parezcan monedas y no partículas: nadie
tira monedas y salen derechitas.
2. EL VUELO. Recién ahí las agarra el imán del contador. No van en línea recta: van por
una parábola con el vértice arriba, que es como se ve una moneda que cruza la
pantalla. Cada una tarda distinto, así que llegan en chorro y no en bloque.
3. LA ENTRADA. Al llegar se achica, se apaga, la ficha del contador da un golpe de
escala, sale un anillo de chispa y suena el tintineo — que sube de tono con cada
moneda, como las de Mario, para que el chorro se sienta como una racha.
Cuidados: las monedas son nodos sueltos en una capa fija con `transform` puro y nada de
`layout`; se van todas del DOM al terminar. Con "menos movimiento" viajan tres piezas,
suavemente y sin giros ni destellos. El número FINAL se escribe siempre al final,
así una animación cortada no deja el contador a mitad de camino. */
/* LA PLACA (nació para la salida, hoy la usa el aviso de última mano).
Fue la placa de "¡15 PARA EL MANO!" / "¡16 PARA EL CARTERO!": la frase primero se probó
como el renglón chico de arriba de la palabra explosiva —donde dice "CANTÁS"— y quedaba
ilegible encima de las cuatro cartas, así que se fue arriba del todo con placa propia.
El 2026-09-05 el dueño pidió que la frase misma sea la palabra grande, con la letra y el
tamaño de un canto (ver cantarLaApertura): la salida ya no cuelga esta placa. Queda viva
para la última mano y para lo que venga. */
.cartelapertura {
position: fixed; left: 50%; z-index: 95; pointer-events: none;
/* `width: max-content` o la frase se corta en dos renglones sin necesidad: un elemento
fijo con `left:50%` y sin `right` calcula su ancho disponible desde ese 50% hasta el
borde —o sea media pantalla— y ahí "¡15 PARA EL MANO!" ya no entra. Con max-content
pide lo que mide de verdad, y el tope de 92vw lo baja de renglón sólo cuando hace
falta (el inglés es más largo). */
width: max-content; max-width: 92vw; box-sizing: border-box; text-align: center;
padding: 9px 20px; border-radius: 999px;
font-family: 'Trocchi', Georgia, serif; font-size: 16px; line-height: 1.3;
letter-spacing: 2.5px; text-transform: uppercase; color: #ffe9a0;
background: linear-gradient(180deg, rgba(30,18,6,.95), rgba(12,7,2,.95));
border: 1.5px solid rgba(232,195,74,.6);
box-shadow: 0 8px 22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,230,160,.28);
text-shadow: 0 2px 5px rgba(0,0,0,.75);
animation: cartelap 2.6s cubic-bezier(.2,1.5,.4,1) forwards;
}
@keyframes cartelap {
0% { opacity: 0; transform: translate(-50%, -16px) scale(.9); }
9% { opacity: 1; transform: translate(-50%, 0) scale(1); }
82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
100% { opacity: 0; transform: translate(-50%, -10px) scale(.97); }
}
/* EL AVISO DE ULTIMA MANO usa LA MISMA PLACA que la salida del 15/16 —el juego habla un solo
idioma, no inventa un cartel por noticia— y cambia solo el tiempo: entra, se queda quieta
unos segundos y se desvanece en DOS SEGUNDOS exactos (dueño, 2026-08-31).
Los 5,4 s se reparten asi: 8% de entrada (0,43 s), quieta hasta el 63% (3,4 s) y el resto
—2,0 s clavados— apagandose.
TRES DECISIONES PARA QUE SEA SUAVE DE VERDAD:
1. Durante el apagado la placa NO SE MUEVE: solo baja la opacidad. Un fade que ademas se
desplaza se ve como que se escapa; un disolvido puro se ve como que se apaga.
2. Se animan SOLO opacidad y transform, que el navegador resuelve en el compositor sin
recalcular la pagina. Una sombra o un filtro animados hacen tironear cualquier telefono.
3. La curva del apagado es sinusoidal, no lineal: arranca despacio, cede en el medio y
llega a cero sin escalon. Un `linear` termina de golpe y se nota. */
/* EL TRAMO DURA 2,5 s PARA QUE EL APAGADO SE VEA DE 2 s, y no es una contradiccion. Con la
curva sinusoidal la opacidad sale de 1 despacio y llega a cero despacio: medido sobre la
pantalla, el pedazo en que el ojo ve que se apaga —de 0,97 a 0,02— es el 80% del tramo.
Con 2,0 s nominales se veia un apagado de 1,6. Lo que el dueño pidio es lo que se VE, asi
que se calibra por lo que se ve: 2,5 s de tramo dan 2,0 s de apagado. La red lo mide en la
pantalla, no en la hoja de estilos, justamente para que esto no se pueda mentir. */
.cartelapertura.lenta { animation: cartelapLento 5.9s linear forwards; will-change: opacity, transform; }
@keyframes cartelapLento {
0% { opacity: 0; transform: translate(-50%, -14px) scale(.94); animation-timing-function: cubic-bezier(.16,1,.3,1); }
8% { opacity: 1; transform: translate(-50%, 0) scale(1); }
57% { opacity: 1; transform: translate(-50%, 0) scale(1); animation-timing-function: cubic-bezier(.37,0,.63,1); }
100% { opacity: 0; transform: translate(-50%, 0) scale(1); }
}
.torrente { position: fixed; inset: 0; pointer-events: none; z-index: 199; overflow: hidden; }
.torrente .cho {
position: absolute; left: 0; top: 0; will-change: transform;
display: block;
}
.torrente .cho .aura {
position: absolute; inset: -55%; border-radius: 50%;
background: radial-gradient(circle, rgba(255,222,130,.6), rgba(255,190,60,0) 66%);
}
.torrente .cho .pieza-oro { position: relative; width: 100%; height: 100%; vertical-align: top; }
.chispazo {
position: fixed; pointer-events: none; z-index: 198; width: 46px; height: 46px;
margin: -23px 0 0 -23px; border-radius: 50%;
border: 2px solid rgba(255,226,150,.9);
box-shadow: 0 0 14px rgba(255,205,90,.75), inset 0 0 10px rgba(255,226,150,.5);
animation: chispazo .42s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes chispazo {
from { transform: scale(.28); opacity: .95; }
to { transform: scale(2.05); opacity: 0; }
}
.walletchip.cobrando { animation: cobrando .3s cubic-bezier(.2,1.7,.4,1); }
@keyframes cobrando {
45% { transform: scale(1.17); box-shadow: 0 0 18px rgba(255,205,90,.6), inset 0 1px 0 rgba(255,230,160,.35); }
}
.premio-recibo {
position: fixed; z-index: 197; pointer-events: none;
top: max(74px, calc(env(safe-area-inset-top, 0px) + 62px)); left: 50%;
transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
width: max-content; max-width: calc(100vw - 28px); box-sizing: border-box;
padding: 11px 17px; border: 1px solid #dbb865; border-radius: 16px;
background: #18271f; color: #fff4ce; box-shadow: 0 8px 28px #0008;
font: 600 16px/1.3 'Trocchi', Georgia, serif; text-align: left;
}
.premio-recibo .pieza-oro { width: 35px; height: 35px; flex: none; }
.premio-recibo small { display: block; margin-top: 3px; color: #e3d5b9; font: 13px/1.35 system-ui, sans-serif; }
.premio-recibo b { font-variant-numeric: tabular-nums; }
.premio-contador {
position: fixed; z-index: 198; pointer-events: none;
top: calc(env(safe-area-inset-top, 0px) + var(--premio-top, 12px)); left: 50%;
transform: translateX(-50%); box-sizing: border-box;
display: flex; align-items: center; justify-content: center; gap: 9px;
min-height: 48px; max-width: calc(100vw - 24px); padding: 8px 15px;
border: 1px solid #d9b365; border-radius: 999px;
background: #291c12; color: #ffe7aa; box-shadow: 0 5px 18px #0008;
font: 700 20px/1.1 'Trocchi', Georgia, serif;
}
.premio-contador .pieza-oro { width: 30px; height: 30px; flex: none; }
.premio-contador b { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.torrente.suave .aura { display: none; }
/* --- El perfil: placa de rango, estadísticas y vitrina --- */
#perfilBanner .box { max-width: 540px; }
.pplaca { text-align: center; margin-bottom: 18px; }
.pplaca .peyebrow {
font-size: 11px; letter-spacing: 4px; color: #cbb98f; text-transform: uppercase;
}
.pplaca .prango {
font-family: 'Trocchi', Georgia, serif; font-size: 34px; line-height: 1.15;
background: linear-gradient(178deg, #fff2c0 8%, #f0cf72 32%, #c9971c 62%, #8a6a10 88%, #e8c34a 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
.pplaca .pnivel {
display: inline-block; margin-top: 5px; padding: 3px 14px; border-radius: 999px;
font-family: 'Trocchi', Georgia, serif; font-size: 11.5px; letter-spacing: 1.5px;
color: #33270a; background: linear-gradient(180deg, #ffe89a, #e8c34a 55%, #c0951c);
border: 1px solid #f7e5a8; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.4);
}
.pxp { margin: 12px auto 3px; max-width: 320px; height: 12px; border-radius: 8px;
background: rgba(0,0,0,.45); border: 1px solid rgba(232,195,74,.35);
box-shadow: inset 0 2px 4px rgba(0,0,0,.7); overflow: hidden; }
.pxp i { display: block; height: 100%; border-radius: 7px;
background: linear-gradient(180deg, #fff3c8 0%, #e8c34a 45%, #b98f24 100%);
box-shadow: 0 0 8px rgba(232,195,74,.5); transition: width .6s ease; }
.pxptxt { font-size: 11.5px; color: #cbb98f; font-variant-numeric: tabular-nums; text-align: center; }
.pdivisor {
display: flex; align-items: center; gap: 12px; margin: 20px 0 12px;
font-size: 11.5px; letter-spacing: 3.5px; color: #cbb98f; text-transform: uppercase;
justify-content: center; white-space: nowrap;
}
.pdivisor::before, .pdivisor::after {
content: ''; height: 1.5px; flex: 1; max-width: 90px;
background: linear-gradient(90deg, transparent, rgba(232,195,74,.6));
}
.pdivisor::after { background: linear-gradient(90deg, rgba(232,195,74,.6), transparent); }
/* Las columnas no pueden crecer por su contenido mínimo: a 360 px la tercera se
salía de la caja. auto-fit baja a dos columnas cuando no entran tres (L16). */
.perfstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.perfstats .pstat { min-width: 0; }
.pstat {
padding: 10px 6px 8px; border-radius: var(--r-med); text-align: center;
border: 1px solid rgba(232,195,74,.5);
background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.3));
box-shadow: inset 0 2px 5px rgba(0,0,0,.65), 0 1px 0 rgba(255,236,170,.14);
}
.pstat b {
display: block; font-family: 'Trocchi', Georgia, serif; font-weight: 700;
font-size: 22px; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1;
text-shadow: 0 0 10px rgba(232,195,74,.45), 0 1px 0 #000;
text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.pstat span { display: block; margin-top: 3px; font-size: 11.5px; letter-spacing: .9px;
color: #cbb98f; text-transform: uppercase; } /* legible: 11.5 px (L16) */
.pcantos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pcanto {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 9px 4px 7px; border-radius: var(--r-med);
border: 1px solid rgba(232,195,74,.28);
background: linear-gradient(180deg, rgba(232,195,74,.10), rgba(0,0,0,.25));
}
.pcanto :is(svg, img) { display: block; width: 34px; height: 34px; flex: none; object-fit: contain; }
.pcanto b { font-family: 'Trocchi', Georgia, serif; font-weight: normal;
font-size: 15px; color: var(--gold); font-variant-numeric: tabular-nums; }
.pcanto span { font-size: 11.5px; letter-spacing: .8px; color: #cbb98f; text-transform: uppercase; } /* legible: 11.5 px (L16) */
#btnFoto { min-height: 44px; } /* el botón de la foto se toca con el pulgar (L16) */
@media (min-width: 860px) {
.logrogrid { grid-template-columns: repeat(3, 1fr); }
}
/* --- La vitrina de medallas --- */
.logrogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.medalla {
display: flex; align-items: center; gap: 8px; padding: 7px 9px;
border-radius: var(--r-med); border: 1px solid rgba(232,195,74,.35);
background: linear-gradient(180deg, rgba(232,195,74,.14), rgba(120,90,20,.10));
}
.medalla.no { opacity: .45; filter: saturate(.25); border-color: rgba(232,195,74,.18); }
.medalla .mico { font-size: 19px; flex: none; }
.medalla .mtxt { display: flex; flex-direction: column; min-width: 0; }
.medalla .mtxt b { font-size: 11.5px; color: var(--cream); line-height: 1.2; }
.medalla .mtxt i { font-size: 11px; color: #cbb98f; font-style: normal; } /* legible: 11 px (L16) */
/* --- Elegir la música: cinco temas, uno por vez --- */
#temaGrid { display: flex; flex-direction: column; gap: 8px; }
.vitrola { display: flex; align-items: center; gap: 10px; }
.vitrola .vflecha { width: 40px; height: 40px; font-size: 26px; flex: none; }
.vdisco { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 10px; border-radius: var(--r-med);
border: 1px solid rgba(232,195,74,.45); background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.3)); box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
/* (Dueño, 2026-08-30) EL DISCO ES UN DISCO. El inventario de la tienda marcó la música
como lo único que se vende SIN gráfica: era una nota musical sobre una chapa. Una música
no puede tener una foto de sí misma, pero sí puede tener su objeto — y el objeto de una
música es el vinilo. Ahora la nota va sobre un disco de verdad: surcos concéntricos,
etiqueta al centro y el brillo que cruza el vinilo cuando gira. Dibujado con degradados,
sin una sola imagen: pesa cero y se ve nítido a cualquier tamaño. */
.vdisco .vnota {
width: 46px; height: 46px; margin-bottom: 5px; border-radius: 50%;
display: grid; place-items: center; line-height: 1;
font-size: 13px; color: #ffe39a;
background:
radial-gradient(circle at 50% 50%, #1a1208 0 26%, transparent 26%),
repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 0 1px, transparent 1px 3px),
conic-gradient(from 210deg, rgba(255,255,255,.13) 0 12deg, transparent 12deg 190deg,
rgba(255,255,255,.09) 190deg 200deg, transparent 200deg 360deg),
radial-gradient(circle at 38% 30%, #3a3a3e, #121216 70%);
border: 1px solid rgba(232,195,74,.32);
box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.55);
}
.vdisco.bloq .vnota { filter: grayscale(.5) brightness(.8); }
.vdisco .vnom { font-family: 'Trocchi', Georgia, serif; font-weight: 700; font-size: 16px; letter-spacing: 1px; text-transform: uppercase;
background: linear-gradient(178deg, #fff2c0 10%, #e8c34a 55%, #b8891a 95%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.8)); }
.vdisco .vdesc { font-family: 'Trocchi', Georgia, serif; font-style: normal; font-size: 12px; color: #d9c9a0; line-height: 1.3; margin-top: 2px; }
.vpuntos { display: flex; justify-content: center; gap: 7px; }
.vpuntos span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); cursor: pointer; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.vpuntos span.on { background: radial-gradient(circle at 35% 30%, #fff3c4, #e6bd4e 55%, #b8891a); box-shadow: 0 0 6px rgba(232,195,74,.7); }
.vpuntos span.bloq { opacity: .45; }
.vdisco.bloq .vnom { filter: saturate(.5) brightness(.85); }
.vcomprar {
margin-top: 7px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
font-family: 'Trocchi', Georgia, serif; font-weight: 700; font-size: 12px; color: #3a2608; border: 1px solid #5a3e08;
background: radial-gradient(circle at 35% 25%, #fff3c4, #e6bd4e 55%, #b8891a);
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(0,0,0,.5);
}
.vcomprar .precio { position: static; background: none; border: 0; box-shadow: none; padding: 0; color: #3a2608; }
#temaGrid button {
text-align: left; padding: 10px 13px; border-radius: var(--r-med); cursor: pointer;
background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.5));
border: 1.5px solid rgba(232,195,74,.35); color: var(--cream);
display: flex; align-items: center; gap: 10px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.45);
}
#temaGrid button.primary {
border-color: var(--gold);
background: linear-gradient(180deg, rgba(232,195,74,.24), rgba(120,90,20,.3));
box-shadow: 0 0 12px rgba(232,195,74,.4), inset 0 0 0 1px rgba(232,195,74,.5);
}
#temaGrid .tnom { font-family: 'Trocchi', Georgia, serif; font-weight: 400; font-size: 14px; color: #ffe39a;
letter-spacing: .8px; color: var(--gold); }
#temaGrid .tdesc { font-size: 12px; color: #cbb98f; line-height: 1.25; }
#temaGrid .tnota { font-size: 17px; flex: none; opacity: .85; }
/* --- Hablar en la mesa: globito sobre el avatar --- */
/* El chat vive en la misma columna que música y efectos: los tres al unísono */
#hablarBtn .relleno { fill: var(--gold); stroke: none; }
#hablarBtn:active { transform: scale(.9); }
/* En la fila de abajo, a la izquierda de CANTAR: tamaño de dedo. */
.myrow #hablarBtn { width: 40px; height: 40px; }
.myrow #hablarBtn svg { width: 21px; height: 21px; }
.globo {
position: fixed; z-index: 79; max-width: 62vw; padding: 9px 14px; border-radius: var(--r-med);
font-family: 'Trocchi', Georgia, serif; font-size: 15.5px; font-weight: 700; color: #2a1c06;
background: linear-gradient(180deg, #fff4cf, #f0d98d);
border: 2px solid #b98f24; box-shadow: 0 8px 22px rgba(0,0,0,.5);
opacity: 0; transform: translateY(6px) scale(.94); pointer-events: none;
transition: opacity .18s ease, transform .18s cubic-bezier(.2,1.5,.4,1);
}
/* `.rival` identifica quién habla; no es el sector de cuero `.rivalrow`.
El contrato explícito evita que una piel vuelva a teñir esta tinta. */
.globo.rival {
color: #2a1c06;
-webkit-text-fill-color: currentColor;
background-color: #f0d98d;
background-image: linear-gradient(180deg, #fff4cf, #f0d98d);
border: 2px solid #b98f24;
box-shadow: 0 8px 22px rgba(0,0,0,.5);
}
.globo.show { opacity: 1; transform: translateY(0) scale(1); }
.globo::after {
content: ''; position: absolute; left: var(--flecha, 22px); width: 0; height: 0;
border: 9px solid transparent;
}
.globo.abajo::after { top: -17px; border-bottom-color: #b98f24; }
.globo.arriba::after { bottom: -17px; border-top-color: #b98f24; }
.globo.gesto { font-size: 30px; padding: 6px 16px; }
/* El globo APILADO de la rueda (debajo de otro globo, lejos de su cara): sin flecha —apuntaría
al paño— y con el nombre corto de la silla adelante; el nombre, un talle de texto aunque el
globo sea un gesto grande. */
.globo.apilado::after { display: none; }
.globo .gquien { font-size: 15.5px; font-weight: 600; opacity: .72; vertical-align: middle; }
#frasesGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
#frasesGrid button {
font-family: 'Trocchi', Georgia, serif; font-weight: 400; font-size: 14px;
padding: 11px 8px; border-radius: var(--r-med); color: var(--cream);
background: linear-gradient(180deg, rgba(58,42,22,.95), rgba(34,22,10,.95));
border: 1.5px solid rgba(232,195,74,.4); cursor: pointer;
}
#frasesGrid button:active { transform: scale(.96); }
/* (2026-09-06) LA TUYA VA PRIMERA Y SE VE QUE ES TUYA: ocupa los dos huecos de la grilla y lleva
el filo de oro de la casa. Es una frase más, no un chat: sale del mismo selector que las otras. */
#frasesGrid button.miafrase {
grid-column: 1 / -1; border-color: var(--gold); color: #ffe39a;
background: linear-gradient(rgba(232,195,74,.16), rgba(232,195,74,.06));
font-family: 'Trocchi', Georgia, serif;
}
#gestosGrid { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
#gestosGrid button {
width: 54px; height: 54px; border-radius: 50%; font-size: 26px; cursor: pointer;
background: linear-gradient(180deg, rgba(58,42,22,.95), rgba(34,22,10,.95));
border: 1.5px solid rgba(232,195,74,.4);
}
#gestosGrid button:active { transform: scale(.92); }
/* --- El rival dejó de dar señales --- */
#ausenteAviso {
position: fixed; left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: min(92vw, 420px);
top: calc(14px + var(--fila-rival-h) + env(safe-area-inset-top)); transform: translateY(-14px);
z-index: 74; display: none; align-items: center; gap: 12px;
padding: 9px 14px; border-radius: var(--r-med);
background: linear-gradient(180deg, rgba(58,32,12,.97), rgba(34,18,6,.97));
border: 1.5px solid rgba(232,195,74,.5); box-shadow: 0 10px 26px rgba(0,0,0,.55);
font-size: 13.5px; color: var(--cream); opacity: 0; transition: opacity .3s, transform .3s;
}
#ausenteAviso.show { display: flex; opacity: 1; transform: translateY(0); }
#ausenteAviso button { font-size: 12px; padding: 5px 12px; }
/* --- Zona de cancelar: bajaste con la carta fuera del paño --- */
#cancelZona {
position: fixed; inset: 0; pointer-events: none; z-index: 78;
opacity: 0; transition: opacity .16s ease;
box-shadow: inset 0 0 0 4px rgba(224,66,48,.95), inset 0 0 70px rgba(224,66,48,.4);
}
#cancelZona.on { opacity: 1; }
#cancelZona .cztxt {
position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center;
font-family: 'Trocchi', Georgia, serif; font-size: 26px; letter-spacing: 6px;
color: #ff6a55; text-shadow: 0 0 18px rgba(224,66,48,.8), 0 2px 4px rgba(0,0,0,.7);
animation: czlate 1s ease-in-out infinite;
}
@keyframes czlate { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* ===== RESTYLING "la mejor app del planeta": armonia HUD ===== */
/* Tu turno: joya tipografica */
.turnlbl {
font-family: 'Trocchi', Georgia, serif !important;
font-size: 15px !important; letter-spacing: 1.8px; text-transform: uppercase;
color: #cbb98f;
}
.turnlbl.mine {
background: linear-gradient(90deg, #ffe66d, #ffb347 45%, #ffe66d);
background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent !important;
animation: turnoshine 2.2s linear infinite;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.65)) drop-shadow(0 0 10px rgba(255,200,80,.35));
}
@keyframes turnoshine { 0% { background-position: 0 0; } 100% { background-position: 200% 0; } }
/* La ventanita del relato: vitrina fina */
#log {
font-family: 'Trocchi', Georgia, serif !important; font-size: 13.5px !important;
background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.05) 30%, transparent);
border-top: 1px solid rgba(232,195,74,.22);
scrollbar-width: thin; scrollbar-color: rgba(232,195,74,.35) transparent;
}
#log div { border-left: 2px solid transparent; }
#log .good { border-left-color: rgba(120,200,120,.55); }
#log .canto { border-left-color: rgba(232,195,74,.6); }
#log .bad { border-left-color: rgba(220,90,70,.6); }
/* Botones de sonido y HUD: fichas de nacar y bronce */
.hbtn {
background:
radial-gradient(circle at 32% 28%, rgba(255,240,200,.16), transparent 55%),
linear-gradient(180deg, #3a2a16, #241708) !important;
border: 1.5px solid rgba(232,195,74,.55) !important;
box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,230,160,.22),
inset 0 -2px 4px rgba(0,0,0,.45) !important;
transition: transform .12s ease, box-shadow .12s ease;
}
.hbtn:active { transform: scale(.92); }
/* A 360 px la etiqueta "⚡ Partida rápida online" partía en dos renglones: a ese
ancho baja un talle y aprieta la letra, y entra entera en una línea (L15). */
@media (max-width: 360px) {
#menu .menupanel .modosfila > button.modo b { font-size: 15px; }
#menu .menupanel .modosfila > button.modo small { font-size: 12.2px; }
}
/* --- Partida rápida: dos naipes que se buscan --- */
.vsstage { position: relative; height: 96px; margin: 10px auto 6px; width: 200px; }
.vsnaipe {
position: absolute; top: 12px; width: 52px; height: 72px; border-radius: 7px;
background: repeating-conic-gradient(#5f7568 0% 25%, #ded9c4 0% 50%);
background-size: 11px 11px; background-position: center;
border: 2.5px solid #f5f1e4; outline: 1.5px solid rgba(0,0,0,.45);
box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.vsyo { left: 22px; transform: rotate(-9deg); animation: vsyo 2.4s ease-in-out infinite; }
.vsel { right: 22px; transform: rotate(9deg); animation: vsel 2.4s ease-in-out infinite; }
.vsvs {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
font-family: 'Trocchi', Georgia, serif; font-size: 21px; color: var(--gold);
text-shadow: 0 0 14px rgba(232,195,74,.6), 0 2px 2px rgba(0,0,0,.6);
animation: vspulso 2.4s ease-in-out infinite; z-index: 2;
}
@keyframes vsyo { 0%, 100% { transform: rotate(-9deg) translateX(0); } 50% { transform: rotate(-5deg) translateX(7px); } }
@keyframes vsel { 0%, 100% { transform: rotate(9deg) translateX(0); } 50% { transform: rotate(5deg) translateX(-7px); } }
@keyframes vspulso { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.18); } }
.vschip {
font-family: 'Trocchi', Georgia, serif; font-size: 10.5px; letter-spacing: 2px;
color: var(--gold); border: 1px solid rgba(232,195,74,.4); border-radius: 999px;
padding: 4px 11px; background: rgba(0,0,0,.25);
}
/* --- Escuela de movimientos: viñetas animadas en CSS puro --- */
.tstage { position:relative; width:300px; height:210px; margin:8px auto 0;
border-radius: var(--r-med); overflow:hidden; border:2px solid rgba(0,0,0,.3);
background: radial-gradient(circle at 50% 30%, rgba(90,160,110,.25), transparent 70%), #2e5c40; }
.tcard { position:absolute; width:44px; height:62px; background:#faf6ec;
border:1.5px solid #262a32; border-radius:7px; display:flex; align-items:center;
justify-content:center; font:900 22px 'Trocchi', Georgia, serif; box-shadow:0 2px 5px rgba(0,0,0,.35); }
.tgrupo { position:absolute; width:44px; height:62px; }
.tgrupo .tcard { left:0; top:0; }
.tdedo { position:absolute; width:26px; height:26px; border-radius:50%;
background:rgba(255,255,255,.30); border:2px solid rgba(255,255,255,.8);
box-shadow:0 2px 8px rgba(0,0,0,.4); z-index:5; }
.tgrupo .tdedo { left:22px; top:42px; }
.tbolita { position:absolute; width:30px; height:30px; border-radius:50%; z-index:6;
background:radial-gradient(circle at 35% 30%, #ffe9a0, #f2b01e 60%, #b8860b);
border:2px solid rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center;
font:900 13px 'Trocchi', Georgia, serif; color:#4a3200; box-shadow:0 0 12px rgba(242,176,30,.8); }
.tslot { position:absolute; width:44px; height:62px; border:2px dashed rgba(255,255,255,.5);
border-radius:7px; }
.taro { position:absolute; width:54px; height:72px; border:3px solid #f2b01e; border-radius: var(--r-med);
box-shadow:0 0 12px rgba(242,176,30,.7); z-index:4; }
/* --- Escuela nueva: naipes reales en la viñeta --- */
.tnaipe { width:44px; line-height:0; border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,.45); position:relative; overflow:hidden; }
.tnaipe img, .tnaipe svg, .tnaipe img.naipefoto { width:100%; height:auto; border-radius:3px !important; display:block; }
.tval { position:absolute; right:-8px; bottom:-8px; min-width:22px; height:22px; padding:0 5px; border-radius: var(--r-med);
background:radial-gradient(circle at 35% 30%, #ffe9a0, #f2b01e 60%, #b8860b); color:#3a2600;
font:900 12px 'Trocchi', Georgia, serif; display:flex; align-items:center; justify-content:center;
border:1.5px solid rgba(255,255,255,.7); box-shadow:0 1px 4px rgba(0,0,0,.5); z-index:3; }
.tmeta { font-family: 'Trocchi', Georgia, serif; position:absolute; left:0; right:0; bottom:10px; text-align:center; font-weight:400; font-size:11px;
letter-spacing:2px; color:#ffe39a; text-shadow:0 1px 3px #000; }
/* 1 objetivo */
.tobj { position:absolute; left:0; right:0; top:26px; display:flex; justify-content:center; gap:22px; }
.tobjc { position:relative; width:56px; animation:tsube .7s cubic-bezier(.2,.8,.3,1) backwards; }
.tobjc .tnaipe { width:56px; }
.tobjc:nth-child(2) { animation-delay:.18s; } .tobjc:nth-child(3) { animation-delay:.36s; }
@keyframes tsube { from { transform:translateY(40px); opacity:0; } }
/* 2 el quince (y 8 el olvidado) */
.tq { position:absolute; width:52px; } .tq .tnaipe { width:52px; }
.tval-m { right:-6px; bottom:-6px; }
.tqm { left:124px; top:30px; }
.tqh { left:124px; top:118px; animation:tqsube 3.6s ease-in-out infinite; }
@keyframes tqsube { 0%,12% { transform:translate(0,0); } 40%,70% { transform:translate(0,-58px); } 85%,100% { transform:translate(0,-58px); opacity:0; } }
.tsello15 { position:absolute; left:150px; top:84px; width:40px; height:40px; margin-left:-20px; border-radius:50%;
background:radial-gradient(circle at 35% 30%, #ffe9a0, #f2b01e 60%, #b8860b); border:2px solid rgba(255,255,255,.7);
display:flex; align-items:center; justify-content:center; font:900 15px 'Trocchi', Georgia, serif; color:#3a2600;
box-shadow:0 0 14px rgba(242,176,30,.9); opacity:0; animation:tsello 3.6s ease-in-out infinite; z-index:6; }
@keyframes tsello { 0%,42% { opacity:0; transform:scale(.4); } 50%,70% { opacity:1; transform:scale(1); } 85%,100% { opacity:0; transform:scale(1.1); } }
.tqo { left:184px; top:30px; animation:tqllega 3.6s ease-in-out infinite; }
@keyframes tqllega { 0% { transform:translate(0,120px); opacity:0; } 25%,100% { transform:none; opacity:1; } }
.tojo { position:absolute; left:64px; top:60px; font-size:34px; animation:tojo 3.6s ease-in-out infinite; }
@keyframes tojo { 0%,30% { opacity:0; transform:scale(.6); } 45%,100% { opacity:1; transform:scale(1); } }
.tojol { font-size:10px; }
/* 4 la escoba */
.tesc { position:absolute; top:70px; width:44px; animation:tbarre 4s ease-in-out infinite; }
.te1 { left:70px; } .te2 { left:128px; animation-delay:.12s; } .te3 { left:186px; animation-delay:.24s; }
@keyframes tbarre { 0%,45% { transform:none; opacity:1; } 70%,100% { transform:translateX(150px) rotate(12deg); opacity:0; } }
.tescoba { position:absolute; left:-60px; top:64px; font-size:48px; animation:tescobam 4s ease-in-out infinite; }
@keyframes tescobam { 0%,35% { transform:translateX(0) rotate(-20deg); } 70%,100% { transform:translateX(340px) rotate(10deg); } }
.tescl { opacity:0; animation:tescl 4s ease-in-out infinite; font-size:14px; }
@keyframes tescl { 0%,60% { opacity:0; } 72%,100% { opacity:1; } }
/* 5 los cantos: cuatro manos que se turnan */
.tcantos { position:absolute; inset:0; }
.tcanto { position:absolute; left:0; right:0; top:28px; display:flex; justify-content:center; gap:10px; opacity:0;
animation:tcanto 12s ease-in-out infinite; }
.tc2 { animation-delay:3s; } .tc3 { animation-delay:6s; } .tc4 { animation-delay:9s; }
@keyframes tcanto { 0% { opacity:0; transform:translateY(14px); } 5%,23% { opacity:1; transform:none; } 27%,100% { opacity:0; } }
.tcanto .tnaipe { width:54px; }
.tcl { font-family: 'Trocchi', Georgia, serif; position:absolute; left:0; right:0; top:104px; text-align:center; font-weight:400; font-size:11.5px;
letter-spacing:1.5px; color:#ffe39a; text-shadow:0 1px 3px #000; }
.tcl b { display:block; margin:6px auto 0; width:40px; height:40px; line-height:40px; padding:0; text-align:center; font-variant-numeric:lining-nums tabular-nums; border-radius:50%;
background:radial-gradient(circle at 35% 30%, #ffe9a0, #f2b01e 60%, #b8860b); color:#3a2600; font:900 18px 'Trocchi', Georgia, serif;
border:2px solid rgba(255,255,255,.7); box-shadow:0 0 12px rgba(242,176,30,.8); }
.tmano { position:absolute; left:0; right:0; top:100px; display:flex; justify-content:center; gap:8px; }
.tmano .tnaipe { width:48px; }
.tglobo { position:absolute; left:50%; top:28px; transform:translateX(-50%); background:#fff8e6; color:#2a1a06;
font:400 16px 'Trocchi', Georgia; padding:7px 14px; border-radius: var(--r-med); box-shadow:0 3px 10px rgba(0,0,0,.5);
animation:tglobo 6s ease-in-out infinite; }
.tglobo::after { content:''; position:absolute; left:50%; bottom:-8px; border:8px solid transparent; border-top-color:#fff8e6; border-bottom:0; margin-left:-8px; }
@keyframes tglobo { 0% { opacity:0; transform:translateX(-50%) scale(.6); } 8%,35% { opacity:1; transform:translateX(-50%) scale(1); } 45%,100% { opacity:0; } }
.tstamp { position:absolute; left:50%; top:52px; transform:translateX(-50%) rotate(-8deg); padding:5px 12px; border:3px solid; border-radius:8px;
font:400 15px 'Trocchi', Georgia; letter-spacing:1px; opacity:0; animation:tstamp 6s ease-in-out infinite; white-space:nowrap; }
.tverdad { color:#7dffa5; border-color:#7dffa5; text-shadow:0 0 8px rgba(125,255,165,.6); animation-delay:0s; }
@keyframes tstamp { 0%,48% { opacity:0; transform:translateX(-50%) rotate(-8deg) scale(1.6); } 55%,92% { opacity:1; transform:translateX(-50%) rotate(-8deg) scale(1); } 100% { opacity:0; } }
/* 7 los puntos */
.tpts { position:absolute; left:0; right:0; top:18px; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 18px; padding:0 18px; }
.tpc { position:relative; width:40px; animation:tsube .6s cubic-bezier(.2,.8,.3,1) backwards; }
.tpc .tnaipe { width:40px; }
.tpc:nth-child(2) { animation-delay:.1s; } .tpc:nth-child(3) { animation-delay:.2s; } .tpc:nth-child(4) { animation-delay:.3s; }
.tpc:nth-child(5) { animation-delay:.4s; } .tpc:nth-child(6) { animation-delay:.5s; }
.tptsl { font-size:9.5px; letter-spacing:1px; line-height:1.5; bottom:6px; }
/* P1: el imán */
.tp3 .tmesa1 { position:absolute; width:44px; left:128px; top:26px; animation:t1m 4.6s ease-in-out infinite; }
.tp3 .tgrupo1 { left:128px; top:146px; animation:t1g 4.6s ease-in-out infinite; }
.tp3 .tgrupo1 .tdedo { animation:t1d 4.6s linear infinite; }
.tp3 .tbolita { left:178px; top:62px; transform:scale(0); animation:t1b 4.6s ease-in-out infinite; }
@keyframes t1m { 0%,42% { transform:none; opacity:1; } 48% { transform:translateY(26px); }
52% { transform:translateY(22px); } 78% { transform:translateY(22px); opacity:1; }
92%,100% { transform:translate(88px,88px) scale(.5); opacity:0; } }
@keyframes t1g { 0%,10% { transform:none; opacity:1; } 40% { transform:translateY(-62px); }
78% { transform:translateY(-62px); opacity:1; }
92%,100% { transform:translate(88px,-6px) scale(.5); opacity:0; } }
@keyframes t1d { 0%,76% { opacity:1; } 84%,100% { opacity:0; transform:scale(1.35); } }
@keyframes t1b { 0%,48% { transform:scale(0); opacity:0; } 56% { transform:scale(1.25); opacity:1; }
62% { transform:scale(1); } 80% { transform:scale(1); opacity:1; }
88%,100% { transform:scale(.5); opacity:0; } }
/* P2: marcar y cobrar */
.tp2 .tmesa2 { left:120px; top:28px; animation:t2m 4.8s ease-in-out infinite; }
.tp2 .taro { left:115px; top:23px; opacity:0; animation:t2a 4.8s ease-in-out infinite; }
.tp2 .tdedo2 { left:60px; top:174px; animation:t2d 4.8s ease-in-out infinite; }
.tp2 .tgrupo2 { left:128px; top:146px; animation:t2g 4.8s ease-in-out infinite; }
@keyframes t2m { 0%,84% { transform:none; opacity:1; } 96%,100% { transform:translate(84px,96px) scale(.5); opacity:0; } }
@keyframes t2a { 0%,18% { opacity:0; transform:scale(.7); } 24% { opacity:1; transform:scale(1.08); }
28% { transform:scale(1); } 80% { opacity:1; } 88%,100% { opacity:0; } }
@keyframes t2d { 0% { transform:none; opacity:1; } 18% { transform:translate(84px,-134px); }
22% { transform:translate(84px,-134px) scale(.8); } 26% { transform:translate(84px,-134px) scale(1); }
44% { transform:translate(80px,-16px); } 48% { transform:translate(80px,-16px); }
70% { transform:translate(80px,-74px); opacity:1; }
78%,100% { transform:translate(80px,-74px) scale(1.4); opacity:0; } }
@keyframes t2g { 0%,48% { transform:none; opacity:1; } 68% { transform:translateY(-58px); }
84% { transform:translateY(-58px); opacity:1; } 96%,100% { transform:translate(84px,-2px) scale(.5); opacity:0; } }
/* P3: la sacudida */
.tp3 .tslot { left:44px; top:44px; }
.tp3 .tpegada { left:140px; top:118px; animation:t3p 4.4s ease-in-out infinite; }
.tp3 .tgrupo3 { left:128px; top:94px; animation:t3g 4.4s ease-in-out infinite; }
@keyframes t3g { 0%,14% { transform:none; } 18% { transform:translateX(-10px) rotate(-5deg); }
22% { transform:translateX(10px) rotate(5deg); } 26% { transform:translateX(-10px) rotate(-5deg); }
30% { transform:translateX(10px) rotate(5deg); } 34% { transform:translateX(-7px) rotate(-3deg); }
38% { transform:translateX(5px) rotate(2deg); } 44%,76% { transform:none; }
90%,100% { transform:translateY(46px); } }
@keyframes t3p { 0%,14% { transform:none; } 18% { transform:translateX(-10px) rotate(-5deg); }
22% { transform:translateX(10px) rotate(5deg); } 26% { transform:translateX(-10px) rotate(-5deg); }
30% { transform:translateX(10px) rotate(5deg); } 34% { transform:translateX(-7px) rotate(-3deg); }
40% { transform:none; } 58% { transform:translate(-96px,-74px); }
63% { transform:translate(-96px,-68px); } 66%,100% { transform:translate(-96px,-74px); } }
/* P4: servir al paño */
.tp4 .tmesa4 { left:52px; top:40px; }
.tp4 .tgrupo4 { left:150px; top:144px; animation:t4g 4.2s ease-in-out infinite; }
.tp4 .tgrupo4 .tdedo { animation:t4d 4.2s linear infinite; }
@keyframes t4g { 0%,12% { transform:none; } 42% { transform:translate(24px,-82px); }
58% { transform:translate(24px,-82px); } 63% { transform:translate(24px,-82px) scale(1.06); }
68%,100% { transform:translate(24px,-82px); } }
@keyframes t4d { 0%,56% { opacity:1; } 66%,100% { opacity:0; } }
/* P5: el orejeo */
.tp5 .tf { left:128px; top:116px; transform-origin:50% 130%; }
.tp5 .tf1 { animation:t5a 4.6s ease-in-out infinite; }
.tp5 .tf2 { animation:t5b 4.6s ease-in-out infinite; }
.tp5 .tf3 { animation:t5c 4.6s ease-in-out infinite; }
.tp5 .tdedo5 { left:140px; top:148px; animation:t5d 4.6s ease-in-out infinite; }
@keyframes t5a { 0%,16% { transform:none; } 46% { transform:rotate(-16deg) translateX(-30px); }
80% { transform:rotate(-16deg) translateX(-30px); } 96%,100% { transform:none; } }
@keyframes t5b { 0%,16% { transform:none; } 46% { transform:translateY(-6px); }
80% { transform:translateY(-6px); } 96%,100% { transform:none; } }
@keyframes t5c { 0%,16% { transform:none; } 46% { transform:rotate(16deg) translateX(30px); }
80% { transform:rotate(16deg) translateX(30px); } 96%,100% { transform:none; } }
@keyframes t5d { 0%,14% { transform:none; } 46% { transform:translateX(64px); }
80% { transform:translateX(64px); } 96%,100% { transform:none; } }
/* La imagen del naipe SIEMPRE llena a su contenedor y nada mas — en la
mano, en la mesa, en el fantasma arrastrado, en vuelos y ceremonias.
Sin esta regla universal, un PNG suelto se muestra a tamano natural
(1104px: la pantalla entera). */
img.naipefoto { -webkit-user-drag: none; user-drag: none;
width: 100%; height: auto; display: block; border-radius: 9px;
pointer-events: none; -webkit-touch-callout: none;
-webkit-user-drag: none; user-select: none; -webkit-user-select: none;
box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.cardbox.reordenando { transition: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(232,195,74,.5)); }
.cardbox.sel { transform: translateY(-12px) !important; filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(1px 4px 4px rgba(0,0,0,.5)); }
.cardbox.dragging { opacity: 0 !important; transform: scale(.85) !important; pointer-events: auto; }
.ghostbox { position: fixed; z-index: 50; pointer-events: none;
filter: drop-shadow(0 12px 20px rgba(0,0,0,.55)); transform: rotate(4deg) scale(1.02); }
.ghostbox svg { width: 100%; height: auto; }
/* durante el reparto: tus cartas existen pero no se ven ni se tocan */
#hand.repartiendo .cardbox { visibility: hidden; }
#hand.repartiendo { pointer-events: none; }
.repartoGhost {
position: fixed; z-index: 56; pointer-events: none;
transition: left .32s cubic-bezier(.3,.8,.4,1), top .32s cubic-bezier(.3,.8,.4,1), opacity .2s;
filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.repartoGhost svg { width: 100%; height: auto; display: block; }
.cardbox.dealin { animation: dealin .5s cubic-bezier(.2,.85,.3,1) backwards; }
@keyframes dealin {
from { opacity: 0; transform: translate(-46px,-70px) rotate(-16deg) scale(.55); }
}
.burst {
position: absolute; left: 50%; top: 50%; width: 430px; height: 430px; border-radius: 50%;
pointer-events: none; z-index: 6;
background: radial-gradient(circle, rgba(255,235,165,.9), rgba(232,195,74,.4) 55%, transparent 72%);
transform: translate(-50%,-50%) scale(.06); opacity: 1;
animation: burst .85s ease-out forwards;
}
@keyframes burst { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
.aitake { animation: aitake 1s infinite; }
@keyframes aitake {
0%, 100% { transform: translateY(-8px); filter: drop-shadow(0 0 4px var(--gold)) drop-shadow(1px 3px 3px rgba(0,0,0,.45)); }
50% { transform: translateY(-8px); filter: drop-shadow(0 0 14px var(--gold)) drop-shadow(1px 3px 3px rgba(0,0,0,.45)); }
}
/* ---- status + canto ---- */
/* TU TURNO vive en los avatares: aro dorado que late en el que juega.
Cero texto, cero espacio — el paño se queda con todo lo vertical. */
.hudchip.turno .avatar {
border-color: #ffe9a0;
box-shadow: 0 0 0 2px rgba(255,224,130,.35), 0 0 16px rgba(232,195,74,.85), 0 2px 8px rgba(0,0,0,.5);
}
/* El avatar recorta lo de adentro (overflow: hidden), así que la luz que late
va en una capa hermana, no en un pseudo suyo. */
.hudchip.turno .avatarcol::after, .hudchip.turno > .avatar + .haloturno {
content: ''; position: absolute; left: 50%; top: 26px; width: 54px; height: 54px;
margin: -27px 0 0 -27px; border-radius: 50%; pointer-events: none;
box-shadow: 0 0 0 2px rgba(255,224,130,.6), 0 0 26px rgba(232,195,74,1);
animation: latir 1.4s ease-in-out infinite;
will-change: opacity;
}
.hudchip.turno .pname { color: #ffe9a0; text-shadow: 0 0 8px rgba(232,195,74,.6), 0 1px 2px rgba(0,0,0,.6); }
/* La nota fugaz de la mesa: flota sobre el paño y se va sola.
(La historia completa sigue viva en "La mesa habla".) */
.notaMesa {
position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
max-width: 86%; padding: 7px 14px; border-radius: var(--r-med); z-index: 14;
background: rgba(12,6,2,.8); border: 1px solid rgba(232,195,74,.4);
color: #f1d9a0; font-size: 13px; text-align: center; pointer-events: none;
opacity: 0; transition: opacity .35s;
}
.notaMesa.show { opacity: 1; }
/* Con una carta en la mano (arrastre), la nota fugaz no tapa el paño (L14). */
body.arrastrando .notaMesa { opacity: 0; transition: none; }
.notaMesa.mala { border-color: rgba(224,86,74,.55); color: #f3c0b0; }
.hint { font-size: 11.5px; opacity: .6; margin-left: auto; font-family: 'Trocchi', Georgia, serif; text-align: right; }
button {
font-family: 'Trocchi', Georgia, serif; font-weight: 400; font-size: 15px; padding: 9px 16px; border-radius: 9px; cursor: pointer;
border: 2px solid var(--oro); background: rgba(212,169,41,.15); color: var(--cream);
}
button:hover:not(:disabled) { background: rgba(212,169,41,.4); }
button:disabled { opacity: .35; cursor: default; }
button.primary { background: var(--gold); color: #33270a; font-weight: bold; border-color: #f3dd93; }
/* EL MENÚ DE CANTAR (dueño, 2026-08-23): cada canto es una placa de cuero con su medalla
de oro, ordenadas de la que menos paga a la que más. Se lee de un vistazo qué es cada una
y cuánto vale, sin tapar la mesa entera. */
.cantobar {
display: none; flex-direction: column; gap: 7px;
padding: 14px 13px 13px; position: fixed; left: 0; right: 0; margin-inline: auto;
width: min(92vw, 400px); bottom: var(--cantobar-pie); z-index: 40;
background:
linear-gradient(165deg, rgba(255,255,255,.07), transparent 42%),
radial-gradient(ellipse 90% 60% at 50% -10%, rgba(232,195,74,.2), transparent 65%),
var(--leather-tex),
linear-gradient(180deg, #1e3d2c 0%, #10251a 55%, #08150e 100%);
border: 1px solid rgba(232,195,74,.7); border-radius: var(--r-gran);
box-shadow: inset 0 1px 0 rgba(255,236,170,.35), inset 0 -3px 6px rgba(0,0,0,.6),
inset 0 0 0 1px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.65);
}
.cantobar.show { display: flex; }
/* (2026-09-05, visto al medir la rueda) En 640 px de alto el panel asomaba por ARRIBA de la
pantalla —el título "¿Qué cantás?" quedaba afuera— en cualquier mesa: se cuelga de la mano y
crece hacia arriba sin techo. Techo con lo que hay entre la mano y el borde de arriba; lo que
no entra se desplaza adentro del panel, nunca afuera de la pantalla. */
/* UNA SOLA ANCLA (revisión final de la rueda, 2026-09-05): el panel colgaba de «la mano × 1,3
+ 84», un número que no era de nadie, y su pie caía 14 px adentro de la pastilla propia en
360×640 (26 en 1280×800) y dejaba asomar media cara por arriba, en la mesa de dos y en la
de cuatro por igual. Ahora el pie es la suma de lo que hay de verdad debajo: la mano
(--hand-w × 1,56, apoyada en el borde), la separación del tablero y la fila mía, más 6 de
aire; el techo sale del mismo pie. Así cubre la fila del rival entera y no toca la pastilla. */
body { --cantobar-pie: calc(var(--hand-w) * 1.56 + var(--tablero-gap) + var(--fila-mia-h) + 6px); }
.cantobar { max-height: calc(100vh - var(--cantobar-pie) - env(safe-area-inset-top) - 8px); overflow-y: auto; }
@supports (height: 100dvh) {
.cantobar { max-height: calc(100dvh - var(--cantobar-pie) - env(safe-area-inset-top) - 8px); }
}
.cantobar .lbl {
font-family: 'Trocchi', Georgia, serif; font-size: 17px; letter-spacing: 2px;
text-transform: uppercase; text-align: center; margin-bottom: 2px;
background: linear-gradient(178deg, #fff2c0 10%, #e8c34a 55%, #b8891a 95%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.8));
}
.cantobar button[data-canto] {
display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
align-items: center; gap: 0 12px; text-align: left; padding: 9px 10px 9px 14px;
border-radius: var(--r-gran); border: 1px solid rgba(232,195,74,.45);
background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.24));
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 5px rgba(0,0,0,.4);
animation: cantopop .34s backwards; transition: transform .12s, border-color .15s, box-shadow .15s;
}
.cantobar button[data-canto] .cn {
grid-column: 1; grid-row: 1; font-family: 'Trocchi', Georgia, serif;
font-size: 17.5px; letter-spacing: .8px; color: #ffe39a; text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.cantobar button[data-canto] .cq {
grid-column: 1; grid-row: 2; font-family: 'Trocchi', Georgia, serif;
font-size: 12.5px; color: #cbb98f; letter-spacing: .2px;
}
.cantobar button[data-canto] .cp {
grid-column: 2; grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Trocchi', Georgia, serif; font-size: 19px; color: #3a2608;
background: radial-gradient(circle at 35% 28%, #fff3c4, #e6bd4e 52%, #b8891a);
border: 1.5px solid #5a3e08;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.5);
}
.cantobar button[data-canto].grande { border-color: rgba(232,150,74,.75);
background: linear-gradient(180deg, rgba(120,32,26,.5), rgba(60,14,10,.35)); }
.cantobar button[data-canto].grande .cp {
background: radial-gradient(circle at 35% 28%, #ffd9a0, #e8843a 52%, #a83d18); border-color: #5c1d08; color: #2b0a02; }
.cantobar button[data-canto]:active:not(:disabled) { transform: scale(.97); }
.cantobar button[data-canto]:disabled { opacity: .45; }
/* El canto que NO tenés en la mano: se ve —los cuatro están siempre a la vista— pero
apagado, porque no se canta lo que no se tiene (dueño, 2026-08-29). */
.cantobar button[data-canto].notengo { opacity: .28; filter: grayscale(1); }
.cantobar #noCanto {
margin-top: 4px; padding: 11px; border-radius: var(--r-gran); font-family: 'Trocchi', Georgia, serif;
font-size: 14.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #d9c9a0;
background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.25));
border: 1px solid rgba(232,195,74,.3);
}
.cantobar button[data-canto]:nth-of-type(1) { animation-delay: .00s; }
.cantobar button[data-canto]:nth-of-type(2) { animation-delay: .05s; }
.cantobar button[data-canto]:nth-of-type(3) { animation-delay: .10s; }
.cantobar button[data-canto]:nth-of-type(4) { animation-delay: .15s; }
@keyframes cantopop {
from { transform: scale(.9) translateY(8px); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* On-demand entry to the canto panel: your window is YOURS (it closes only
when you play your own first card), so nobody waits — the pill just sits
there while singing is still possible. Fixed, so the felt never shifts. */
/* CANTAR: el gesto insignia. Oro macizo con bisel, nota grabada, forma
FIJA (jamás cambia), respiración de aura y un brillo que lo recorre. */
#singBtn {
visibility: hidden; display: inline-flex; align-items: center; justify-content: center;
gap: 0; height: 44px; border-radius: 999px; flex: none; padding: 0 10px;
font-family: 'Trocchi', Georgia, serif; font-weight: normal;
font-size: 15px; letter-spacing: 1.5px; color: #33270a;
background: linear-gradient(180deg, #ffe89a 0%, #e8c34a 48%, #c0951c 100%);
border: 1.5px solid #f7e5a8;
box-shadow:
inset 0 2px 0 rgba(255,255,255,.55),
inset 0 -3px 5px rgba(120,85,10,.5),
0 3px 9px rgba(0,0,0,.5);
position: relative; overflow: hidden;
}
#singBtn::before {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: 0 0 18px rgba(255,215,90,.55);
animation: none;
will-change: opacity;
}
/* CANTAR PULSA CUANDO HAY CANTO (dueño, 2026-09-05, textual: «cuando se tiene canto, el
botón de cantar debe pulsar, debe llamar la atención, debe respirar, debe titilar»).
La clase la pone render() sólo con un canto REAL en la mano (cantosPosibles), con la
ventana abierta y el panel cerrado; se va sola al cantar, al cambiar el turno o al
abrir el panel. Un solo ciclo de 1,6 s para las tres cosas: el cuerpo respira de 1 a
1,05 con transform (la caja de la fila no se mueve: ni width ni height cambian), el
halo dorado sube y baja con drop-shadow (lo único que sale del botón, que recorta con
overflow:hidden), y las letras titilan con un brillo de texto que nunca las tapa.
Nada por debajo de 0,8 s de período: llamar la atención, no encandilar. La piel viva
(tema/casa-del-15.css) viste esta misma regla con su material. */
#singBtn.canto-disponible:not(:disabled) {
animation: cantarRespira 1.6s ease-in-out infinite;
will-change: transform, filter;
}
#singBtn.canto-disponible:not(:disabled)::before {
animation: latir 1.6s ease-in-out infinite;
}
@keyframes cantarRespira {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 0 3px rgba(255,215,90,.35));
text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
50% {
transform: scale(1.05);
filter: brightness(1.12) drop-shadow(0 0 15px rgba(255,215,90,.95));
text-shadow: 0 0 8px rgba(255,248,200,1), 0 0 2px rgba(255,255,255,.9), 0 1px 0 rgba(255,255,255,.5);
}
}
/* Con menos movimiento no respira ni titila, pero queda encendido: aro y halo dorados
FIJOS, para que se distinga del CANTAR sin canto. */
#singBtn.show { visibility: visible; }
#singBtn:active { transform: scale(.95); }
#singBtn::after {
content: ''; position: absolute; top: -22%; bottom: -22%; width: 32%; left: -55%;
transform: translateX(0) skewX(-22deg); will-change: transform;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
animation: none;
}
#singBtn.canto-disponible:not(:disabled)::after {
animation: cantarBrillo 4.4s ease-in-out infinite;
}
/* El brillo que cruza el botón viaja con transform, no con `left`: mover
`left` obliga a recalcular la posición de todo en cada cuadro; `transform`
no toca el layout. */
@keyframes cantarBrillo {
0%, 58% { transform: translateX(0) skewX(-22deg); }
78%, 100% { transform: translateX(620%) skewX(-22deg); }
}
/* ---- your hand ---- */
/* `flex: 0 1 auto` + min-height 0 es la última red: si algún día una pieza
nueva no entra, la mano cede alto en vez de empujar el tablero. */
/* TU SECTOR MIDE SIEMPRE LO MISMO, TENGAS CARTAS O NO (dueño, 2026-08-26:
"cuando no tengo cartas mi sector se achica… y el paño central se alarga").
Estaba en `flex: 0 1 auto` con `min-height: 0`: eso le da permiso al flex
para encogerlo hasta su contenido, y con la mano vacía el contenido era casi
nada — 194 px pasaban a 51, y el paño (`flex: 1`) se comía los 143 que
sobraban. La regla madre se rompía justo cuando se acaban las cartas, que es
el único momento en que nadie la estaba mirando.
`flex: none` es la regla: ni crece ni se encoge; manda la medida y nada más. */
/* (Dueño, 2026-08-31) LAS ESQUINAS DE ABAJO, REDONDEADAS. La franja de cuero donde va tu
mano llegaba al pie de la pantalla en ángulo recto, mientras el paño de arriba —donde van
las cartas comunes— va redondeado: la mesa terminaba en punta justo del lado tuyo. Ahora
lleva el mismo radio de la casa, y la costura de cuero lo acompaña adentro (el mismo
radio menos los 4 px que la separan del filo, que es lo que hace --r-costura). */
.mano { position: relative; padding: 10px 0 12px; height: calc(var(--hand-w) * 1.56);
flex: none; overflow: visible; z-index: 20;
border-bottom-left-radius: var(--r-med); border-bottom-right-radius: var(--r-med); }
.mano::after { border-bottom-left-radius: var(--r-costura); border-bottom-right-radius: var(--r-costura); }
.rivalrow { position: relative; z-index: 20; }
/* Flight ghosts travel UNDER the HUD and your hand — only the drag ghost rides on top. */
.flightlayer { z-index: 8 !important; }
#hand { display: flex; justify-content: center; align-items: flex-end; height: 100%; }
/* La carta de la mano crece HACIA ARRIBA. Con el origen al centro, el 5% del
imán y el brinco de la carta elegida se iban por debajo del borde de la
pantalla: 6 px que el tablero tenía que dejar scrollear o recortar. */
/* EL SOLAPADO LO MANDA LA PINTA, no el gusto. Cada naipe tapa el borde derecho
del anterior, así que de una carta cubierta se ve su 70 % izquierdo — y ahí
tiene que caber TODA la pinta, que es lo que dice el palo de una carta que no
se ve entera. Con los cortes repartidos parejos, el tercero del basto termina
en el 77,2 % del ancho: con -30 % quedaba justo afuera y un basto tapado se
leía como una espada (dos cortes en vez de tres). Con -22 % entra completo y
sobra. Cuesta 24 px de mano en la pantalla más grande: nada. */
#hand .cardbox { width: var(--hand-w); margin-left: calc(var(--hand-w) * -.22);
transform-origin: bottom center; }
#hand .cardbox:first-child { margin-left: 0; }
#hand .empty { opacity: .5; font-style: normal; padding-bottom: 30px; }
/* ---- log drawer ---- */
aside {
position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 330px); z-index: 65;
background: rgba(10,26,17,.97); border-left: 2px solid var(--wood);
display: flex; flex-direction: column; transform: translateX(102%); transition: transform .22s;
}
aside.open { transform: none; }
aside h2 { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 12px 16px 4px; color: var(--gold); display: flex; justify-content: space-between; }
aside h2 span { cursor: pointer; }
#log { flex: 1; overflow-y: auto; padding: 4px 16px 14px; font-size: 13px; line-height: 1.5; font-family: 'Trocchi', Georgia, serif; }
#log div { padding: 3px 6px; border-radius: 5px; margin-bottom: 2px; }
#log .header { color: var(--gold); font-weight: bold; margin-top: 6px; }
#log .good { color: #9fdc9f; }
#log .bad { color: #f1a1a1; background: rgba(192,57,43,.12); }
#log .canto{ color: #efd27a; }
#log .win { color: var(--gold); font-size: 15px; font-weight: bold; }
#log .play, #log .info { opacity: .85; }
.banner {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,.68); z-index: 60;
overflow-y: auto; -webkit-overflow-scrolling: touch;
padding: max(20px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom));
}
/* (Dueño, 2026-09-03: «mejorar cuando alguien hace click en configuración»)
NINGÚN PANEL APARECE SECO: el telón y la caja entran con un fundido corto.
Sólo opacidad, a propósito: ningún rectángulo se mueve (las redes que miden
geometría recién abierta no ven diferencia) y con movimiento reducido no
hay animación. Una sola ley de entrada para todos los banners. */
.banner.show { display: flex; animation: bannerIn .18s ease-out; }
@keyframes bannerIn { from { opacity: 0; } }
.banner .box {
background: linear-gradient(180deg, #1d5436, var(--felt-dark));
border: 3px solid var(--gold); border-radius: var(--r-gran); padding: 26px 34px; text-align: center; max-width: 460px;
/* margin:auto y no align-center: centrada si entra, scrolleable si no */
margin: auto; flex: none; box-sizing: border-box; width: calc(100% - 8px);
box-shadow: 0 16px 50px rgba(0,0,0,.6);
}
.banner h3 { font-size: 23px; color: var(--gold); margin-bottom: 12px; letter-spacing: 1px; }
.banner p { margin-bottom: 16px; font-size: 15px; line-height: 1.5; }
/* ---- la ceremonia: panel de juego de mesa ---- */
.box.ornate {
/* dueño, 2026-08-22: el marrón se va de todas las cajas; cuero verde con luz de bronce */
background:
radial-gradient(ellipse 120% 50% at 50% -8%, rgba(232,195,74,.22), transparent 60%),
linear-gradient(165deg, rgba(255,255,255,.05), transparent 40%),
var(--leather-tex),
linear-gradient(170deg, #1d3b2b 0%, #11261a 48%, #0a1710 100%);
border: 6px double var(--gold); border-radius: var(--r-gran);
position: relative;
}
/* la guarda pampa: greca tejida arriba y abajo, como el borde de un poncho */
.box.ornate::before, .box.ornate::after {
content: ''; position: absolute; left: 16px; right: 16px; height: 7px;
background:
repeating-linear-gradient(90deg,
rgba(232,195,74,.55) 0 7px, transparent 7px 14px,
rgba(138,59,36,.65) 14px 21px, transparent 21px 28px);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
pointer-events: none; opacity: .8;
}
.box.ornate::before { top: 7px; }
.box.ornate::after { bottom: 7px;
box-shadow: 0 24px 70px rgba(0,0,0,.75), inset 0 0 0 2px rgba(0,0,0,.5), inset 0 0 44px rgba(0,0,0,.5);
}
.ctitle { display: flex; align-items: center; justify-content: center; gap: 12px;
font-size: 14px !important; letter-spacing: 1.5px;
font-family: 'Trocchi', Georgia, serif; font-weight: normal; }
.ctitle span { color: rgba(232,195,74,.7); font-size: 13px; }
#ceremony { display: flex; flex-direction: column; gap: 13px; max-height: 56vh; overflow-y: auto; text-align: left; }
/* SEÑAL DE QUE HAY MÁS ABAJO (L17, 2026-08-27): sólo cuando la ceremonia no
entra entera, un velo pegado al pie del panel que scrollea y una flecha
dibujada (nada de texto) dicen que se puede bajar; al llegar al final se
van. Vive en el propio #ceremony (sticky), así no toca el marco de la caja. */
#ceremony.desborda::after {
content: ''; position: sticky; bottom: 0; flex: none; height: 36px; margin-top: -36px; pointer-events: none;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23e8c34a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom 4px / 16px 16px no-repeat,
linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.62));
animation: cerFlecha 1.1s ease-in-out infinite alternate;
}
@keyframes cerFlecha { from { background-position: center bottom 6px, center; } to { background-position: center bottom 2px, center; } }
/* Controles secundarios del cartel final de 44 px (L17). */
#winPlay, #winMenu, #diffRow button { min-height: 44px; }
/* (Dueño, 2026-09-02) LA FILA DEL MENÚ ES DUEÑA DE SU AIRE. Antes su separación era el
margen de los vecinos (diffLabel/diffRow), que en PvP y en la Gira se esconden: el Menú
quedaba pegado a la REVANCHA y montado sobre la guarda pampa del borde. Ahora la fila
trae su propio ritmo —arriba y abajo— en TODOS los modos, y el botón solo se planta
ancho, como una decisión y no como un resto. */
#winFila { display: flex; gap: 10px; justify-content: center; margin: 14px 0 10px; }
#winFila #winMenu { min-width: 148px; }
/* Título de ceremonia en fuego */
.ctitle.fuego {
background: linear-gradient(180deg, #ffe66d 8%, #ffb347 45%, #ff7a1c 75%, #d43d2a 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
font-size: 19px !important; letter-spacing: 2px;
filter: drop-shadow(0 2px 1px rgba(0,0,0,.8));
}
.ctitle.fuego span { color: rgba(232,195,74,.7); -webkit-text-fill-color: rgba(232,195,74,.7); }
/* El duelo de puntajes: números gigantes de brasa, líder con aura */
.cscore { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 6px 0 4px; }
.cscore .cside { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cscore .cavatar {
width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: block;
border: 2.5px solid var(--gold); box-shadow: 0 3px 9px rgba(0,0,0,.55);
transition: box-shadow .3s ease;
}
.cscore .cside.lider .cavatar { box-shadow: 0 0 16px rgba(255,205,80,.75), 0 3px 9px rgba(0,0,0,.55); }
.cscore .cavatar svg { width: 100%; height: 100%; display: block; }
.avatar img, .cavatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cscore b {
font-family: 'Trocchi', Georgia, serif; font-size: 44px; line-height: 1.05;
background: linear-gradient(180deg, #ffe66d 8%, #ffb347 44%, #ff7a1c 68%, #d43d2a 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 2px 1px rgba(0,0,0,.85));
}
.cscore .cname { font-size: 10.5px; letter-spacing: 3px; opacity: .8; font-family: 'Trocchi', Georgia, serif; }
/* (2026-09-04) Con tres o cuatro en la mesa el marcador lista un lado por silla: sin «VS», más
apretado, la cara un talle menor y el nombre recortado antes que desbordar el cartel. */
.cscore.muchos { gap: 10px; flex-wrap: wrap; }
.cscore.muchos .cside { flex: 0 1 auto; min-width: 0; max-width: 96px; }
.cscore.muchos .cavatar { width: 44px; height: 44px; }
.cscore.muchos b { font-size: 34px; }
.cscore.muchos .cname { letter-spacing: 1.5px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (Revisión final de la rueda, 2026-09-05) CUATRO LADOS NUNCA SE PARTEN 3 + 1. Con flex-wrap,
cuatro lados de 96 más tres separaciones piden 414 px, y el marcador del cartel mide 308 en
412 y 326 en 430: VOS · BETO · CARO en una fila y DINO solo abajo. Con cuatro en la mesa el
marcador es una grilla de 2 × 2 en todo lo que no sea escritorio (por debajo de 700 px:
entre 481 y 500 la fila de cuatro tampoco entra, y 700 es el mismo corte que usa la silla
para cambiar de postura); de 700 para arriba sigue la fila única. Con tres, tres columnas
iguales: en 360 la fila de tres (308) tampoco entraba en los 256 del marcador y quedaba
uno solo abajo. La clase con la cantidad (de3 / de4) la pone la ceremonia. */
@media (max-width: 699px) {
.cscore.muchos { display: grid; justify-items: center; gap: 8px 10px; }
.cscore.muchos.de3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cscore.muchos.de4 { grid-template-columns: repeat(2, 1fr); }
.cscore.muchos .cside { max-width: 100%; }
.cscore.muchos .cname { max-width: 100%; }
}
.cscore .cvs {
font-family: 'Trocchi', Georgia, serif; font-size: 19px;
color: rgba(232,195,74,.75); letter-spacing: 1px;
}
.csec {
background:
var(--leather-tex),
linear-gradient(180deg, rgba(38,20,10,.9), rgba(18,9,4,.92));
border: 1px solid rgba(232,195,74,.35); border-radius: var(--r-med); padding: 11px 14px;
box-shadow: inset 0 1px 0 rgba(255,214,140,.1), inset 0 -3px 8px rgba(0,0,0,.5);
}
.csec h4 {
font-size: 12px; letter-spacing: 2px; color: #ffd870;
font-family: 'Trocchi', Georgia, serif; font-weight: normal;
margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.csec h4 .hline { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(232,195,74,.45), transparent); }
.csec h4 .cpts { font-size: 13px; padding: 2px 9px; }
.cscore .cdelta { font-size: 12px; font-family: 'Trocchi', Georgia, serif; color: #ffd870; letter-spacing: .5px; font-weight: bold; }
.cscore .cdelta.cero { color: rgba(255,255,255,.35); font-weight: normal; }
.crow { display: flex; align-items: center; gap: 10px; padding: 5px 0; animation: cantopop .4s backwards; }
.crow .ccard { width: 40px; flex: none; filter: drop-shadow(1px 2px 3px rgba(0,0,0,.55)); }
.crow .ccard svg { width: 100%; height: auto; display: block; }
.crow .cicon { width: 38px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.crow .clabel { flex: 1; font-size: 15px; color: var(--cream); }
.cpts {
font-family: 'Trocchi', Georgia, serif; font-size: 14.5px; color: #2b2107;
background: linear-gradient(180deg, #ffe9a0, var(--gold) 55%, #b98f24);
border-radius: var(--r-med); padding: 4px 12px;
border: 1px solid #f3dd93; flex: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 3px rgba(0,0,0,.3), 0 2px 5px rgba(0,0,0,.45);
}
#winTitle {
font-family: 'Trocchi', Georgia, serif; font-weight: normal;
font-size: 34px; letter-spacing: 1px; margin-bottom: 6px;
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 2px 1px rgba(0,0,0,.85));
}
#winTitle.gane { background-image: linear-gradient(180deg, #ffe66d 8%, #ffb347 45%, #ff7a1c 70%, #d43d2a 100%); }
#winTitle.perdi { background-image: linear-gradient(180deg, #e8dfc8 10%, #b9ac8a 55%, #7d7157 100%); }
#winExtras .cpts { font-size: 14px; white-space: normal; line-height: 1.5; display: inline-block; max-width: 95%; }
#winExtras .objfin { margin-top: 7px; font-size: 14px; color: #cbb98f; }
#winExtras .objfin b { color: var(--gold); font-variant-numeric: tabular-nums; }
#winExtras .objfin.listo { color: #7fe3c4; }
.cnone { font-size: 13px; font-style: normal; opacity: .55; padding: 2px 0; }
.creveal {
background: rgba(120,30,22,.3); border: 1.5px solid rgba(241,161,161,.5); border-radius: var(--r-med);
padding: 9px 12px; animation: cantopop .45s backwards;
}
.creveal .ctext { font-size: 13.5px; color: #ffddd6; margin-bottom: 7px; }
.creveal .ccards { display: flex; gap: 5px; align-items: center; }
.creveal .ccards .ccard { width: 32px; }
.creveal .ccards .ccard svg { width: 100%; height: auto; display: block; }
.creveal .ceq { font-family: 'Trocchi', Georgia, serif; font-size: 16px; color: #ff9d8f; font-weight: bold; margin-left: 6px; }
#aiToast { font-family: 'Trocchi', Georgia, serif;
position: fixed; top: 32%; left: 0; right: 0; margin-inline: auto;
width: fit-content; max-width: min(86vw, 460px);
transform: translateY(-50%) scale(.8); transform-origin: center;
background: linear-gradient(180deg, rgba(20,12,4,.94), rgba(8,5,2,.96));
border: 2px solid var(--gold); color: #ffe9a8;
font-size: 19px; line-height: 1.35; padding: 14px 26px; border-radius: var(--r-med); opacity: 0; z-index: 55;
box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,236,170,.18);
text-shadow: 0 1px 2px rgba(0,0,0,.9);
transition: opacity .2s, transform .2s; pointer-events: none; text-align: center; text-wrap: balance;
}
#aiToast.show { opacity: 1; transform: translateY(-50%) scale(1); }
#toast {
position: fixed; bottom: 18px; left: 0; right: 0; margin-inline: auto; width: fit-content;
transform: translateY(14px) scale(.95);
background: linear-gradient(180deg, rgba(28,16,8,.94), rgba(12,7,3,.96));
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
color: #f5ecd8; padding: 12px 24px; border-radius: 999px;
border: 1px solid rgba(232,195,74,.55);
box-shadow: inset 0 1px 0 rgba(255,230,160,.18), 0 8px 24px rgba(0,0,0,.55);
font-size: 14.5px; font-weight: 600; letter-spacing: .2px;
font-family: 'Trocchi', Georgia, serif;
opacity: 0; transition: opacity .22s ease, transform .3s cubic-bezier(.2,1.2,.35,1);
pointer-events: none; z-index: 70; max-width: min(90vw, 440px); text-align: center; text-wrap: balance;
}
#toast.show { opacity: 1; transform: translateY(0) scale(1); }
/* (2026-09-09) El aviso de red caída: UNO solo, fijo debajo de la barra de arriba (sobre el paño, donde no
hay carta ni mando), mientras dure. No es un toast: no se va solo. */
#redAviso {
position: fixed; top: calc(env(safe-area-inset-top) + 76px); left: 0; right: 0; margin-inline: auto; width: fit-content;
background: rgba(12,7,3,.92); color: #f5ecd8; border: 1px solid rgba(232,195,74,.45); border-radius: 999px;
padding: 6px 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .2px; font-family: 'Trocchi', Georgia, serif;
opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease;
pointer-events: none; z-index: 71; max-width: min(90vw, 360px); text-align: center;
}
#redAviso.show { opacity: 1; transform: none; }
#redAviso::before {
content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d9534f;
margin-right: 8px; animation: redLate 1.2s ease-in-out infinite;
}
@keyframes redLate { 50% { opacity: .35; } }
/* Durante un arrastre el aviso se va ARRIBA de la mesa, lejos del dedo y de la
mano (L14): abajo quedaba justo donde se está soltando la carta. Y va DEBAJO del cartel del
arrastre (segunda pasada, 2026-09-05): los dos colgaban de la fila del rival y el aviso tapaba
el «Levantar 1 carta». Cuenta: 8 de relleno del tablero + la fila + 4 de cuelgue del cartel +
el cartel + 6 de aire. */
body.arrastrando #toast { bottom: auto; top: calc(18px + var(--fila-rival-h) + var(--cartel-arrastre-h) + env(safe-area-inset-top)); }
/* (2026-09-05) …SALVO QUE AHÍ PISE UNA CARTA. Con el paño en dos o tres renglones (desde cinco
cartas en 360 × 640) el aviso colgado del cartel caía entero sobre la primera fila —el tip del
imán tapaba las cartas que uno está mirando para levantar—. toast() lo mide al mostrarlo: si
abajo del cartel toca la primera carta del paño, vuelve a su lugar de siempre, sobre la mano,
que durante el arrastre está sin uso (la carta ya salió de ahí). Sin reservar lugar a nadie. */
body.arrastrando #toast.abajo { top: auto; bottom: 18px; }
/* El juego se juega de pie (dueño, 2026-08-23): acostado, la mesa no entra y las cartas
quedarían del tamaño de una uña. En vez de deformarse, la casa pide que lo enderecen. */
#acostado { display: none; }
/* (2026-09-10) …y sólo en un teléfono: una ventana de escritorio baja (una notebook al 125 %, DevTools abajo) no es un
teléfono acostado, y la capa tapaba el juego entero. Un teléfono acostado no pasa de 1024 px CSS de ancho. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 1024px) {
#acostado {
display: flex; position: fixed; inset: 0; z-index: 300;
flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px;
background: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(232,195,74,.16), transparent 62%), #0b0d11;
}
#acostado .gira90 {
width: 62px; height: 92px; border-radius: 9px; border: 2.5px solid var(--gold);
box-shadow: 0 0 20px rgba(232,195,74,.35), inset 0 0 18px rgba(232,195,74,.12);
animation: enderezar 2.2s ease-in-out infinite;
}
#acostado b {
font-family: 'Trocchi', Georgia, serif; font-size: 19px; letter-spacing: 2px;
background: linear-gradient(178deg, #fff2c0 10%, #e8c34a 55%, #b8891a 95%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
#acostado span { font-family: 'Trocchi', Georgia, serif; font-size: 13.5px; color: #b9ab8a; }
body > *:not(#acostado) { visibility: hidden; }
}
@keyframes enderezar { 0%, 100% { transform: rotate(90deg); } 45%, 75% { transform: rotate(0deg); } }
/* Firma del estudio (dueño, 2026-09-13): opción 20, E blanca sobre negro.
El SVG conserva los tres brazos y la espalda curva, con remates definidos y más cuerpo.
La entrada mantiene cuatro momentos: negro, aparición gradual, desaparición
completa de la E y negro limpio antes de revelar el Hogar. Su emblema propio
es independiente de esta firma. El piso y la señal de listo se coordinan abajo. */
#cortina {
position: fixed; inset: 0; z-index: 200; background: #000;
display: flex; align-items: center; justify-content: center;
/* .9s de salida del emblema + .6s de negro limpio antes de descubrir el Hogar. */
transition: opacity .5s ease 1.5s, visibility .5s 1.5s;
}
#cortina:focus { outline: none; }
/* Una marca compacta, centrada en la pantalla y nítida a cualquier densidad.
Se limita una sola dimensión para conservar la proporción del SVG. */
#cortina .marca {
/* (2026-09-21, dueño) la marca es «Eeee»: la E de siempre y tres e minúsculas en su mismo dibujo. Manda la ALTURA
—la aprobada para la E— y el ancho sale de la proporción (494:168); en un teléfono angosto no pasa del 72 % del ancho. */
display: block; height: min(24.5vw, clamp(76px, 14vh, 132px)); width: auto;
aspect-ratio: 494 / 168; opacity: 0; user-select: none; -webkit-user-drag: none;
}
#cortina.lista .marca { animation: cortinaEntra 3s ease-in-out both; }
@supports (height: 1svh) { #cortina .marca { height: min(24.5vw, clamp(76px, 14svh, 132px)); } }
/* Sólo opacidad, también con movimiento reducido: sin zoom ni desplazamiento. */
@keyframes cortinaEntra {
0%, 9% { opacity: 0; }
58%, 100% { opacity: 1; }
}
/* Y SE VA COMO VINO, EN TRES TIEMPOS (dueño, 2026-09-07: «tiene que estar la pantalla negra,
aparecer suavemente y desaparecer suavemente, y luego recién entra a la página»):
1. el emblema se apaga, .9s, sobre el mismo negro;
2. la pantalla queda NEGRA DEL TODO, sin nada, más de medio segundo — un tiempo propio, que
se ve; no un empalme;
3. y recién ahí se levanta el negro, medio segundo, y aparece el Hogar.
Los tres tiempos no se pisan. La primera versión los solapaba —el negro empezaba a irse 160 ms
después de que el emblema arrancaba a apagarse— y el Hogar asomaba POR DEBAJO del emblema
todavía visible: eso es lo que hace que un fundido se sienta barato, y es lo que el dueño vio. */
#cortina.ya .marca { animation: cortinaSale .9s ease-in-out both; }
@keyframes cortinaSale {
from { opacity: 1; }
to { opacity: 0; }
}
#cortina.ya { opacity: 0; visibility: hidden; }
/* (2026-09-25) LA SEÑAL (dueño: la entrada «Mr. Robot»). Con WebGL la marca no es la ![]()
: es una textura que la placa
de video rompe, desgarra y engancha en canvas.senal, con el sonido sintetizado desde la misma línea de tiempo.
La ![]()
queda como fuente de la textura y como camino de siempre, SÓLO sin WebGL: el dueño pidió que la señal
se vea siempre y en todos lados, con o sin «reducir movimiento». La salida es más corta que la del fundido:
.44 s de señal rompiéndose, .6 s de negro limpio y .5 s levantando el negro (SALIDA_SENAL_MS en juego.js). */
#cortina .senal { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
#cortina.senal .senal { display: block; }
#cortina.senal .marca { display: none; }
#cortina.senal.ya { transition: opacity .5s ease 1.05s, visibility .5s 1.05s; }
/* ═══════════ CENTRADO ÓPTICO (dueño, 2026-08-30) ═══════════
*"el número 15 del nivel que tengo aparece descentrado verticalmente en la pastilla que
lo envuelve, ¿podés analizar todos los lugares en donde puede estar pasando eso... en el
100% de la página?"*.
POR QUÉ PASA. Centrar en CSS centra la CAJA DE LÍNEA, no la tinta. La caja de línea
reserva lugar para el ascendente y el descendente COMPLETOS de la tipografía; un número
no tiene descendente, así que su mancha queda arriba dentro de esa caja y el conjunto se
lee caído. Con Trocchi —ascendente alto— son 2,5 px en una pastilla de 17: el 15% de la
altura. Le pasa a TODA pastilla con cifras, no sólo al nivel.
LO QUE NO FUNCIONA, probado y medido:
· correr el elemento (`top`, `transform`): se lleva la pastilla puesta y a la vista no
cambia nada — el fondo se mueve con el texto;
· relleno de abajo: en una pastilla chica la línea ya llena la caja, y centrar algo que
desborda es simétrico: no se mueve un píxel.
LO QUE SÍ: `text-box: trim-both cap alphabetic` recorta la caja de línea a la altura de
la MAYÚSCULA. Entonces sí: la caja pasa a ser la tinta, y centrarla centra la tinta. No
hay número mágico, no depende del tamaño ni de la tipografía, y una pastilla nueva nace
centrada. Pide que la caja centre por `line-height` y no por grid: sobre la línea anónima
de un contenedor grid el navegador no recorta (probado: arreglaba los botones y dejaba el
nivel igual). Donde el navegador todavía no lo tenga, queda como estaba: caído un pelo,
nunca roto.
VA AL FINAL DE LA HOJA a propósito: cada componente declara su relleno con la forma corta
(`padding: 9px 6px`), que reescribe los cuatro lados; puesta más arriba, la pisaba el
componente. Con la misma fuerza de selector gana la última.
LA GARANTÍA ES LA RED, no la regla: tools/qa/centrado-optico.mjs RECORRE la página, se
busca sola las pastillas —no hay lista escrita a mano que se quede vieja— y compara la
caja de la TINTA contra la de la pastilla. */
.optico, .yochip .yonivel, .walletchip b, .walletchip .chipmas,
.seg button, .menupanel .stepval, .pescalon .pnum, .pescalon .ppremio,
#pauseOverlay .pcuenta, .hudchip .escobas, .pending {
/* Las dos propiedades LARGAS, no la corta: `text-box: trim-both cap alphabetic` se
aceptaba (CSS.supports decia que si) pero al leer el estilo calculado volvia sólo
«cap alphabetic» — el recorte se perdia por el camino y la regla no hacia nada. */
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
/* Las que centraban con grid pasan a centrar por línea: es lo que el recorte necesita. */
.yochip .yonivel, .walletchip .chipmas {
display: block; text-align: center;
}
/* La altura de línea es la del CONTENIDO —la pastilla menos sus bordes—, no la del borde
exterior: si se pone la de afuera, la línea sobra por los dos lados y el recorte queda
corrido justo lo que mide el borde. */
.yochip .yonivel { line-height: 14px; padding: 1.5px 5px 0; } /* 17 de alto − 1,5 de borde × 2 */
.walletchip .chipmas { line-height: 18px; } /* 21 − 1,5 × 2 */
/* Los botones del selector centran su texto con flex, y sobre una línea anónima de flex el
navegador tampoco recorta. Con el texto solo adentro, alcanza con volverlos de bloque. */
.seg button { display: block; text-align: center; padding-block: 7px 11px; }
/* El 4 de Trocchi tiene la mancha un píxel más baja que 2 y 3. Conserva el
mismo alto total del selector, pero desplaza sólo esa tinta hacia el eje. */
#menuSillas button[data-sillas="4"] { padding-block: 6px 12px; }
/* El tanto de la mesa centraba con inline-flex, y sobre la línea anónima de un flex el
navegador no recorta: se lo pasa a bloque, con la altura de línea de su caja. */
/* El tanto de la mesa NO lleva recorte de caja: su placa tiene alto fijo y con caja de
bloque la línea recortada se pega ARRIBA (un bloque empieza su primera línea en el
borde de arriba, y el recorte no la mueve de ahí). Se le deja su centrado flexible, que
funciona, y se compensa el descendente que no existe con relleno de abajo: la caja de
contenido se achica por abajo y lo centrado sube. Medido, no estimado. */
.pscore b { padding-bottom: 5px; }
/* EL RESIDUO. El recorte deja la tinta a menos de dos píxeles del centro, pero no en cero:
las cifras de Trocchi son de caja alta y pasan un pelo por encima de la línea de la
mayúscula, que es por donde corta `cap`. Lo que queda se compensa con el relleno —medido
con la red, no estimado— y la red lo vuelve a medir en cada corrida: si algún día cambia
la tipografía, estos números dejan de servir y la batería lo dice el mismo día. */
/* ═══════════ CHORISO GRAND TOUR — DIRECCIÓN VISUAL PREMIUM ═══════════
El emblema del 15 ya cuenta la promesa completa: cartas, meta, movimiento y nombre.
Por eso la landing deja de pegarle otro CHORISO encima y lo trata como una pieza de
orfebrería. El resto acompaña con laca bordó, paño inglés y luz de salón. */
.sololectura {
position: absolute !important; width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important; overflow: hidden !important;
clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
#menu {
--granate: #741b24; --granate-oscuro: #27070b; --verde-lujo: #123c2d;
gap: 14px; overflow-x: hidden;
background:
radial-gradient(ellipse 88% 34% at 50% 12%, rgba(255,210,105,.18), transparent 72%),
radial-gradient(ellipse 70% 26% at 50% 92%, rgba(11,94,72,.25), transparent 75%),
linear-gradient(108deg, transparent 35%, rgba(255,255,255,.035) 48%, transparent 61%),
repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 1px, transparent 1px 7px),
linear-gradient(180deg, #12161b 0%, #090b0e 46%, #050607 100%);
}
#menu::before {
inset: 0;
background:
radial-gradient(circle at 16% 24%, rgba(232,195,74,.7) 0 1px, transparent 1.8px),
radial-gradient(circle at 84% 31%, rgba(232,195,74,.52) 0 1px, transparent 1.8px),
radial-gradient(circle at 23% 68%, rgba(232,195,74,.36) 0 1px, transparent 1.7px),
radial-gradient(circle at 79% 78%, rgba(232,195,74,.4) 0 1px, transparent 1.7px),
url('/icono/emblema-fondo.webp?v=8') no-repeat calc(50% + var(--px) * 14px) calc(35% + var(--py) * 9px) / min(112vw, 640px);
opacity: .055; mix-blend-mode: screen;
}
#menu::after {
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
box-shadow: inset 0 0 110px rgba(0,0,0,.9), inset 0 -90px 120px rgba(0,0,0,.55);
background: linear-gradient(90deg, rgba(0,0,0,.32), transparent 14% 86%, rgba(0,0,0,.32));
}
/* El HUD ya es absoluto y tiene su propia capa. Incluirlo en esta regla lo
convertía en relativo y corría toda la fila superior hacia la derecha. */
#menu > :not(.hudtop) { position: relative; z-index: 1; }
.logo15 {
width: min(96vw, 480px); margin-top: 34px; isolation: isolate;
display: flex; flex-direction: column; align-items: center;
}
.logo15 .brandhalo {
position: absolute; z-index: -1; width: min(86vw, 410px); aspect-ratio: 1;
top: 3%; left: 50%; transform: translateX(-50%); border-radius: 50%;
background: radial-gradient(circle, rgba(255,192,59,.19), rgba(154,30,35,.08) 42%, transparent 70%);
filter: blur(8px); animation: haloQuince 5.8s ease-in-out infinite;
}
.logo15 .crest {
width: min(97vw, 560px); margin: 0 auto -10px; max-height: none; /* (dueño, 2026-09-14) más grande: es la primera impresión */
translate: calc(var(--px) * 9px) calc(var(--py) * 6px);
filter: drop-shadow(0 2px 0 rgba(255,234,164,.22))
drop-shadow(0 18px 34px rgba(0,0,0,.78))
drop-shadow(0 0 18px rgba(211,146,31,.18));
animation: emblemaQuince 6.4s ease-in-out infinite;
}
.logo15 .humo { top: 25%; z-index: 3; }
.logo15 .humo i {
width: 38px; height: 38px;
background: radial-gradient(circle, rgba(255,229,174,.36), rgba(255,255,255,0) 70%);
}
.logo15 .promesa {
margin: 0 14px; max-width: 420px; font: 700 clamp(14px, 3.9vw, 17px)/1.35 'Trocchi', Georgia, serif;
letter-spacing: .35px; text-transform: none; color: #f8e7ba; opacity: 1;
text-wrap: balance; text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
@keyframes emblemaQuince {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-5px) scale(1.012); }
}
@keyframes haloQuince {
0%, 100% { opacity: .66; transform: translateX(-50%) scale(.96); }
50% { opacity: 1; transform: translateX(-50%) scale(1.04); }
}
.menupanel {
position: relative; width: min(94vw, 440px); padding: 18px; gap: 12px;
border: 1px solid rgba(247,211,113,.63); border-radius: 26px;
background:
linear-gradient(160deg, rgba(255,255,255,.065), transparent 31%),
radial-gradient(ellipse 100% 42% at 50% -8%, rgba(232,195,74,.13), transparent 67%),
var(--leather-tex),
linear-gradient(180deg, rgba(25,49,37,.97), rgba(8,23,17,.98) 58%, rgba(5,13,10,.99));
box-shadow: inset 0 1px 0 rgba(255,242,199,.22), inset 0 0 0 4px rgba(0,0,0,.2),
0 24px 70px rgba(0,0,0,.72), 0 0 40px rgba(92,14,20,.12);
}
.menupanel::before {
content: ''; position: absolute; inset: 7px; pointer-events: none; border-radius: 20px;
border: 1px dashed rgba(232,195,74,.18);
}
.menupanel #menuPlay.primary {
position: relative; overflow: hidden; min-height: 58px; border: 1.5px solid #f3ce65;
color: #fff3cb; letter-spacing: 3px; text-shadow: 0 2px 2px #350609;
background:
radial-gradient(ellipse 80% 60% at 50% -12%, rgba(255,222,127,.3), transparent 66%),
linear-gradient(180deg, #a52e37 0%, #761821 52%, #3c080d 100%);
box-shadow: inset 0 1px 0 rgba(255,244,203,.48), inset 0 -5px 9px rgba(36,3,7,.58),
0 8px 0 #250408, 0 14px 26px rgba(0,0,0,.52), 0 0 22px rgba(183,44,52,.2);
transition: transform .14s ease, filter .2s ease, box-shadow .14s ease;
}
.menupanel #menuPlay.primary::after {
content: ''; position: absolute; inset: -50% auto -50% -35%; width: 24%; transform: rotate(18deg);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent);
animation: brilloJugar 4.8s ease-in-out infinite;
}
.menupanel #menuPlay.primary:active {
transform: translateY(6px) scale(.99); box-shadow: inset 0 1px 0 rgba(255,244,203,.32),
inset 0 -3px 7px rgba(36,3,7,.58), 0 2px 0 #250408, 0 7px 14px rgba(0,0,0,.46);
}
@keyframes brilloJugar { 0%, 62% { left: -35%; opacity: 0; } 70% { opacity: 1; } 92%, 100% { left: 118%; opacity: 0; } }
.menupanel > button.aux {
min-height: 43px; border-color: rgba(232,195,74,.38);
background: linear-gradient(180deg, rgba(41,50,48,.96), rgba(16,22,21,.98));
}
.menutiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.menutiles .menutile { min-width: 0; padding: 12px 7px 10px; }
.menutile {
border-color: rgba(232,195,74,.45);
background:
linear-gradient(150deg, rgba(255,255,255,.08), transparent 38%),
radial-gradient(circle at 50% -5%, rgba(232,195,74,.17), transparent 53%),
var(--leather-tex), linear-gradient(180deg, #1b4332, #0d291e 58%, #07160f);
}
.menutile.tienda {
background:
linear-gradient(150deg, rgba(255,255,255,.1), transparent 38%),
radial-gradient(circle at 50% -5%, rgba(255,216,128,.21), transparent 56%),
var(--leather-tex), linear-gradient(180deg, #7e2228, #4c1117 58%, #23070b);
}
.menutile svg { width: 42px; height: 42px; padding: 9px; margin-bottom: 5px; }
.menutile .tname { font-size: 12.5px; }
.menutile .tsub { font-size: 10.5px; }
/* La colección se muestra como una vitrina de barajas, no como siete estampitas iguales.
Cada ficha enseña frente + dorso, procedencia, intención gráfica y estado de compra. */
#mazoGrid.egrid { grid-template-columns: 1fr; gap: 12px; }
#mazoGrid .sw.mazo {
min-height: 142px; padding: 15px 15px 15px 13px;
display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 14px;
justify-content: initial; overflow: hidden; isolation: isolate;
border-color: rgba(232,195,74,.5);
background:
linear-gradient(118deg, rgba(255,255,255,.09), transparent 31%),
radial-gradient(circle at 12% 8%, var(--mazo-luz, rgba(232,195,74,.17)), transparent 52%),
var(--leather-tex), linear-gradient(145deg, var(--mazo-a, #233d31), var(--mazo-b, #0a1712)) !important;
box-shadow: inset 0 1px 0 rgba(255,242,199,.16), inset 0 0 0 4px rgba(0,0,0,.19),
0 9px 22px rgba(0,0,0,.44);
filter: none;
}
#mazoGrid .sw.mazo::before {
content: ''; position: absolute; inset: 6px; z-index: -1; border-radius: 10px;
border: 1px dashed rgba(232,195,74,.19); pointer-events: none;
}
#mazoGrid .sw.mazo::after {
content: ''; position: absolute; z-index: -1; width: 170px; height: 170px; right: -70px; top: -78px;
border: 1px solid rgba(232,195,74,.18); border-radius: 50%;
box-shadow: 0 0 0 12px rgba(232,195,74,.025), 0 0 0 26px rgba(232,195,74,.018);
}
#mazoGrid .sw.mazo[data-mazo="moderna"] { --mazo-a:#174736; --mazo-b:#081b14; --mazo-luz:rgba(75,210,160,.17); }
#mazoGrid .sw.mazo[data-mazo="acero"] { --mazo-a:#244258; --mazo-b:#0a1823; --mazo-luz:rgba(159,213,255,.23); }
#mazoGrid .sw.mazo[data-mazo="fantasia"] { --mazo-a:#5e2439; --mazo-b:#230914; --mazo-luz:rgba(241,97,151,.2); }
#mazoGrid .sw.mazo[data-mazo="grabado"] { --mazo-a:#58452c; --mazo-b:#21170c; --mazo-luz:rgba(220,176,104,.18); }
#mazoGrid .sw.mazo[data-mazo="neon"] { --mazo-a:#242056; --mazo-b:#080a26; --mazo-luz:rgba(46,231,255,.23); }
#mazoGrid .sw.mazo[data-mazo="fileteado"] { --mazo-a:#64222a; --mazo-b:#24080d; --mazo-luz:rgba(247,195,61,.24); }
#mazoGrid .sw.mazo.on {
border-color: #ffe39a; transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255,247,215,.3), inset 0 0 0 3px rgba(232,195,74,.21),
0 0 0 1px rgba(232,195,74,.34), 0 12px 26px rgba(0,0,0,.52), 0 0 26px rgba(232,195,74,.13);
}
#mazoGrid .sw.mazo:active { transform: translateY(2px) scale(.992); }
#mazoGrid .mazopar { width: 118px; height: 112px; align-items: center; }
#mazoGrid .mazofrente, #mazoGrid .mazodorso { width: 67px; border-radius: 7px; }
#mazoGrid .mazofrente { transform: rotate(-7deg) translate(5px, 2px); }
#mazoGrid .mazodorso { transform: rotate(8deg) translate(-12px, 2px); }
#mazoGrid .mazofrente img, #mazoGrid .mazofrente svg, #mazoGrid .mazodorso svg { border-radius: 7px; }
.mazotexto { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.mazoepoca {
font: 700 11px/1.25 'Trocchi', Georgia, serif; color: #d9c68d; letter-spacing: 1.05px;
}
.mazonombre {
width: 100%; max-width: 100%; overflow-wrap: normal;
margin-top: 4px; font: 700 clamp(17px, 4.8vw, 21px)/1.08 'Trocchi', Georgia, serif;
color: #fff0bc; text-shadow: 0 2px 5px rgba(0,0,0,.8);
}
.mazodesc {
margin-top: 6px; max-width: 270px; font: 400 11.5px/1.38 'Trocchi', Georgia, serif;
color: #d7ccb1;
}
.mazoaccion {
margin-top: 8px; font: 700 11px/1.1 'Trocchi', Georgia, serif; color: #ffe087; letter-spacing: .75px;
}
#mazoGrid .sw.mazo.bloq { min-height: 182px; padding-bottom: 48px; }
#mazoGrid .sw.mazo .precio { left: auto; right: 15px; bottom: 11px; transform: none; }
#mazoGrid .sw.mazo .tick { top: 10px; right: 10px; width: 22px; height: 22px; }
@media (max-width: 390px) {
#mazoGrid .sw.mazo { grid-template-columns: 99px minmax(0, 1fr); gap: 10px; padding-left: 9px; padding-right: 10px; }
#mazoGrid .mazopar { width: 99px; }
#mazoGrid .mazofrente, #mazoGrid .mazodorso { width: 59px; }
.mazodesc { font-size: 11px; }
.mazonombre { font-size: 15px; letter-spacing: -.15px; }
}
@media (min-width: 700px) {
.menutiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.logo15 { margin-top: 22px; }
}
@media (max-width: 380px) {
.logo15 .crest { width: min(98vw, 430px); }
.logo15 .promesa { font-size: 13.5px; }
.menupanel { padding: 15px; }
}
/* ═══════════ GRAN SALÓN DEL 15 — EL TEMA VIVE EN TODO EL JUEGO ═══════════
No es una piel pegada a la landing: fondo, mesa, HUD, carteles, tienda,
Gira, pausa y naipes comparten materiales, luz, tipografia y profundidad. */
body {
--cream: #fff1cf; --gold: #f2c24d; --ink: #1a120d;
font-family: 'Alegreya', Georgia, serif; font-size: 15.5px;
background:
linear-gradient(180deg, rgba(3,8,6,.58), rgba(3,8,6,.12) 42%, rgba(2,4,3,.72)),
radial-gradient(ellipse 92% 40% at 50% 0%, rgba(255,204,86,.2), transparent 67%),
#03110c;
}
body::after {
background:
radial-gradient(ellipse 95% 76% at 50% 42%, transparent 48%, rgba(2,1,0,.46) 100%),
linear-gradient(110deg, transparent 33%, rgba(255,244,197,.035) 48%, transparent 62%);
}
button, input, textarea, select { font-family: 'Alegreya', Georgia, serif; }
h1, h2, h3, .ctitle, .pausatit, .gprov, .mazonombre, .wordmark,
.menutile .tname, .misioncard .mhead, .mhead, .vsvs {
font-family: 'Lilita One', 'Trocchi', Georgia, serif !important;
}
/* La firma no cambia de letra (dueño, 2026-08-22): CHORISO es Sigmar, gane
quien gane la guerra de los !important de arriba. */
.logo h1, h1.sololectura {
font-family: 'Sigmar', 'Arial Black', system-ui, sans-serif !important;
}
header {
background:
linear-gradient(100deg, transparent 25%, rgba(255,236,170,.08) 50%, transparent 75%),
var(--wood-tex), linear-gradient(180deg, #522512, #260b08 58%, #100504);
border-bottom: 2px solid #c89522;
box-shadow: inset 0 -1px 0 #f7d77f, 0 8px 26px rgba(0,0,0,.66);
}
.wordmark { color: #ffe3a0; background: none; filter: none; text-shadow: 0 2px 2px #190603; }
.hinfo { color: #ecdcae; }
.hbtn, .walletchip, .yochip {
border-color: rgba(246,205,100,.72);
background:
radial-gradient(circle at 32% 22%, rgba(255,244,202,.3), transparent 28%),
linear-gradient(180deg, rgba(104,29,35,.96), rgba(46,8,13,.98));
box-shadow: inset 0 1px 0 rgba(255,240,183,.33), inset 0 -3px 6px rgba(20,2,5,.5),
0 4px 12px rgba(0,0,0,.55);
}
.hbtn svg { stroke: #f6cf69; }
#menu {
background:
linear-gradient(180deg, rgba(1,8,5,.72), rgba(1,8,5,.25) 45%, rgba(1,5,3,.82)),
radial-gradient(ellipse 78% 30% at 50% 12%, rgba(255,207,91,.2), transparent 70%),
url('/tema/gran-salon-15.webp?v=1') center top / max(100%, 850px) auto no-repeat,
#03110c;
}
#menu::before { background: none; opacity: 0; }
.menupanel, .box.ornate, .gplaca, #drawer, #pauseOverlay,
#themeBanner .box, #settingsBanner .box, #perfilBanner .box {
border: 1.5px solid #d9aa36;
background:
linear-gradient(145deg, rgba(255,246,208,.08), transparent 28%),
radial-gradient(ellipse 90% 35% at 50% -5%, rgba(246,196,75,.16), transparent 70%),
var(--leather-tex), linear-gradient(180deg, rgba(31,76,55,.985), rgba(7,31,21,.99) 56%, rgba(40,7,12,.99));
box-shadow: inset 0 1px 0 rgba(255,241,185,.28), inset 0 0 0 5px rgba(8,3,2,.3),
0 22px 68px rgba(0,0,0,.74), 0 0 34px rgba(180,31,45,.1);
}
.box.ornate::before, .gplaca::before, .menupanel::before {
border-color: rgba(247,210,111,.28) !important;
}
.primary, button.primary, #singBtn {
color: #fff0bf; border: 1.5px solid #f1cb64;
background:
radial-gradient(ellipse 80% 65% at 50% -18%, rgba(255,232,158,.32), transparent 64%),
linear-gradient(180deg, #a72e3b 0%, #74131f 52%, #38060c 100%);
box-shadow: inset 0 1px 0 rgba(255,246,207,.48), inset 0 -5px 9px rgba(35,2,7,.54),
0 6px 0 #250408, 0 11px 22px rgba(0,0,0,.44);
text-shadow: 0 2px 2px rgba(42,3,8,.9); letter-spacing: 1.3px;
}
.primary:active, button.primary:active, #singBtn:active {
transform: translateY(4px) scale(.99); box-shadow: inset 0 1px 0 rgba(255,246,207,.32),
inset 0 -3px 7px rgba(35,2,7,.5), 0 2px 0 #250408, 0 6px 13px rgba(0,0,0,.42);
}
.aux, button.aux, .seg button, .stepbtn, #noCanto, .cantobar button {
color: #f3e2b6; border-color: rgba(227,181,72,.52);
background:
linear-gradient(150deg, rgba(255,255,255,.07), transparent 40%),
linear-gradient(180deg, rgba(43,68,55,.98), rgba(13,30,22,.99));
box-shadow: inset 0 1px 0 rgba(255,244,199,.1), 0 4px 10px rgba(0,0,0,.35);
}
.seg, .stepper {
border-color: rgba(229,184,75,.45) !important;
background: linear-gradient(180deg, rgba(18,7,5,.62), rgba(4,12,9,.74)) !important;
}
.seg button.on, .seg button.primary {
color: #2e1703 !important; border-color: #ffe09a !important;
background: linear-gradient(180deg, #ffe8a1, #dba72c 65%, #9b6710) !important;
text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;
}
.board {
position: relative; isolation: isolate;
border-inline: 1px solid rgba(231,187,79,.34);
background:
linear-gradient(90deg, rgba(35,8,9,.54), transparent 7% 93%, rgba(35,8,9,.54)),
rgba(2,10,7,.34);
box-shadow: 0 0 55px rgba(0,0,0,.62), inset 0 0 36px rgba(255,211,100,.025);
}
.rivalrow, .mano {
background:
linear-gradient(90deg, rgba(255,228,150,.04), transparent 18% 82%, rgba(255,228,150,.04)),
var(--wood-tex), linear-gradient(180deg, #5b2915, #2c0e0b 58%, #150605) !important;
border-color: rgba(233,188,80,.62) !important;
box-shadow: inset 0 1px 0 rgba(255,223,136,.19), inset 0 -8px 20px rgba(0,0,0,.35),
0 8px 24px rgba(0,0,0,.45);
}
.rivalrow::after, .mano::after { border-color: rgba(246,203,91,.24) !important; }
.mesa {
background:
radial-gradient(ellipse 52% 42% at 50% 45%, rgba(60,188,115,.18), transparent 72%),
linear-gradient(110deg, transparent 34%, rgba(255,255,255,.035) 48%, transparent 62%),
var(--felt-tex), linear-gradient(180deg, var(--felt), var(--felt-dark)) !important;
border: 2px solid rgba(227,177,61,.68) !important;
box-shadow: inset 0 0 0 5px rgba(56,17,7,.76), inset 0 0 0 7px rgba(241,202,95,.32),
inset 0 20px 45px rgba(255,255,255,.035), 0 13px 30px rgba(0,0,0,.56) !important;
}
.mesa::after { border-color: rgba(244,213,125,.19) !important; }
.hudchip, .lastplay {
border-color: rgba(231,187,78,.57);
background:
linear-gradient(145deg, rgba(255,242,190,.08), transparent 42%),
linear-gradient(180deg, rgba(61,27,18,.97), rgba(22,9,8,.98));
box-shadow: inset 0 1px 0 rgba(255,235,175,.13), 0 5px 13px rgba(0,0,0,.45);
}
.avatar, .gava, .yofoto {
border-color: #e3b64a !important;
box-shadow: 0 0 0 2px #5f161d, 0 4px 12px rgba(0,0,0,.55) !important;
}
.pname, .gname { color: #fff0c3 !important; text-shadow: 0 2px 4px rgba(0,0,0,.8); }
.pscore b { color: #ffe28a; }
.pilebtn { color: #efdca8; }
.cantobar {
border-color: rgba(238,194,86,.65) !important;
background:
linear-gradient(145deg, rgba(255,243,200,.08), transparent 32%),
var(--leather-tex), linear-gradient(180deg, rgba(72,19,27,.98), rgba(28,5,10,.99)) !important;
box-shadow: inset 0 1px 0 rgba(255,234,170,.17), 0 -10px 30px rgba(0,0,0,.48) !important;
}
.cantobar .lbl, .cq { color: #dfcc9c !important; }
.cn, .cp { color: #ffe18a !important; }
.banner {
background:
radial-gradient(ellipse 70% 46% at 50% 38%, rgba(107,25,34,.28), transparent 70%),
rgba(2,7,5,.82);
-webkit-backdrop-filter: blur(9px) saturate(.82); backdrop-filter: blur(9px) saturate(.82);
}
.ctitle {
color: #ffe39a; text-shadow: 0 2px 0 #531019, 0 5px 12px rgba(0,0,0,.7);
letter-spacing: 1.5px;
}
#drawer h2, #pauseOverlay .pausatit { color: #ffe29a; text-shadow: 0 3px 10px rgba(0,0,0,.8); }
#pauseOverlay { background-color: rgba(2,8,5,.94); }
#gira {
background:
linear-gradient(180deg, rgba(2,8,5,.72), rgba(2,8,5,.35) 44%, rgba(2,6,4,.82)),
url('/tema/gran-salon-15.webp?v=1') center / cover no-repeat fixed,
#03110c;
}
.grival {
border-color: rgba(224,178,67,.5);
background:
linear-gradient(150deg, rgba(255,243,198,.08), transparent 35%),
var(--leather-tex), linear-gradient(145deg, rgba(69,24,22,.98), rgba(12,29,21,.99));
box-shadow: inset 0 1px 0 rgba(255,235,174,.14), 0 8px 20px rgba(0,0,0,.42);
}
.grival.actual { border-color: #f3cb63; box-shadow: inset 0 0 0 3px rgba(243,195,75,.12), 0 0 24px rgba(243,195,75,.17); }
#themeBanner .box, #settingsBanner .box, #perfilBanner .box,
#amigosBanner .box, #rankingBanner .box, #paseBanner .box, #cofreBanner .box {
color: #f4e5bd;
}
.sw, .vcomprar, .misioncard, .retratos > *, .frasebtn {
border-color: rgba(224,178,67,.44) !important;
background:
linear-gradient(150deg, rgba(255,247,212,.065), transparent 36%),
linear-gradient(180deg, rgba(37,62,49,.96), rgba(10,25,18,.98)) !important;
box-shadow: inset 0 1px 0 rgba(255,240,188,.1), 0 5px 14px rgba(0,0,0,.34);
}
.sw.on, .sw:has(.tick) { border-color: rgba(244,204,103,.75) !important; }
input, textarea {
color: #fff0c4 !important; border-color: rgba(224,178,67,.5) !important;
background: rgba(5,15,11,.78) !important; box-shadow: inset 0 2px 7px rgba(0,0,0,.38);
}
input::placeholder, textarea::placeholder { color: rgba(235,216,169,.52); }
.naipecompuesto .naipepremium {
width: 100%; height: auto; display: block; border-radius: 9px;
filter: drop-shadow(0 2px 2px rgba(0,0,0,.28)); pointer-events: none;
}
.cardbox:has(.naipepremium)::before { background: transparent !important; }
.mazofrente .naipepremium { border-radius: 7px; }
.naipepremium { shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }
.mazover {
margin-top: 10px; padding: 7px 10px; border: 1px solid rgba(244,203,96,.56);
border-radius: 999px; color: #ffe19a; background: rgba(7,20,14,.62);
font: 700 11.5px/1 'Alegreya', Georgia, serif; letter-spacing: 1.05px;
box-shadow: inset 0 1px 0 rgba(255,245,207,.1); cursor: pointer;
}
.mazover:active { transform: scale(.96); }
#mazoLaminaBanner .box { width: min(96vw, 760px); max-width: 760px; max-height: 92dvh; overflow: hidden; }
#mazoLaminaIntro { margin: 2px auto 10px; color: #dbc99b; text-align: center; font-size: 13px; }
#mazoLaminaGrid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px;
align-items: start; max-height: 66dvh; overflow-y: auto; padding: 7px 5px 18px;
overscroll-behavior: contain; scrollbar-color: #b78625 rgba(0,0,0,.25);
}
#mazoLaminaGrid img {
width: 100%; height: auto; display: block; border-radius: 7px; cursor: zoom-in;
filter: drop-shadow(0 5px 5px rgba(0,0,0,.45)); transition: width .18s ease, transform .18s ease;
}
#mazoLaminaGrid img.zoom {
width: min(62vw, 260px); grid-column: 1 / -1; justify-self: center; cursor: zoom-out;
filter: drop-shadow(0 12px 18px rgba(0,0,0,.62));
}
@media (min-width: 640px) { #mazoLaminaGrid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@keyframes salonPulso {
0%, 100% { box-shadow: inset 0 0 0 5px rgba(56,17,7,.76), inset 0 0 0 7px rgba(241,202,95,.28), 0 13px 30px rgba(0,0,0,.56); }
50% { box-shadow: inset 0 0 0 5px rgba(56,17,7,.76), inset 0 0 0 7px rgba(255,220,127,.4), 0 15px 36px rgba(0,0,0,.62); }
}
.mesa { animation: salonPulso 8s ease-in-out infinite; }
/* ═══════════ UNA INTERFAZ, TRES COMPOSICIONES ═══════════
El teléfono no es un escritorio encogido y el escritorio no es un teléfono
gigante. Estas reglas conservan el idioma del Gran Salón, pero cambian la
composición según el espacio real. */
:focus-visible { outline: 3px solid #ffe39a; outline-offset: 3px; }
/* En móvil el ancho útil es el viewport MENOS el padding seguro del Hogar.
94/96vw medían contra la ventana y a 390 px dejaban 6 px ocultos de más. */
#menu .logo15, #menu .menupanel { max-width: 100%; }
.mazover, .vcomprar {
min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
}
.gflecha { width: 44px; height: 44px; }
#themeClose, #perfilClose, #mazoLaminaCerrar, #giraBack { min-height: 48px; }
/* Teléfonos realmente chicos: se recupera aire sin achicar la letra legible
ni las zonas que se tocan. */
@media (max-width: 359px) {
#menu {
gap: 10px;
padding: calc(env(safe-area-inset-top) + 24px) calc(env(safe-area-inset-right) + 8px)
calc(env(safe-area-inset-bottom) + 24px) calc(env(safe-area-inset-left) + 8px);
}
#menu .hudtop {
left: calc(8px + env(safe-area-inset-left));
right: calc(8px + env(safe-area-inset-right)); gap: 4px;
}
#menu .hudtop .hudlado { gap: 4px; }
#menu .walletchip { padding-inline: 5px 7px; gap: 3px; }
#menu .walletchip .pieza-oro { width: 22px; height: 22px; }
#menu .walletchip b { font-size: 13px; }
#menu .walletchip .chipmas { margin-left: 1px; }
#menu .logo15 { width: 100%; margin-top: 46px; }
#menu .logo15 .crest { width: min(96vw, 360px); }
#menu .logo15 .promesa { margin-inline: 8px; }
#menu .menupanel { width: 100%; padding: 14px 12px; }
#menu .menupanel > button { min-height: 46px; padding-inline: 8px; }
#menu .menupanel .modosfila > button.modo { min-height: 74px; padding-inline: 11px; }
#menu .menutiles { gap: 7px; }
#menu .menutile { min-height: 82px; }
.banner { padding-inline: 6px; }
.banner .box { width: 100%; padding: 22px 14px; }
.banner h3 { font-size: 20px; }
#mazoGrid .sw.mazo {
grid-template-columns: 86px minmax(0, 1fr); gap: 8px;
padding-left: 7px; padding-right: 8px;
}
#mazoGrid .mazopar { width: 86px; }
#mazoGrid .mazofrente, #mazoGrid .mazodorso { width: 54px; }
#mazoGrid .mazonombre { font-size: 14px; }
#mazoGrid .mazodesc { line-height: 1.32; }
#mazoLaminaGrid { gap: 6px; padding-inline: 2px; }
#gira { padding-inline: 8px; }
#gira .gplaca, #gira .girapanel, #giraBack { width: 100%; }
#gira .gplaca { padding-inline: 8px; }
#gira .gnav { gap: 5px; width: 100%; }
#gira .gprov { font-size: 20px; padding-inline: 13px; }
#gira .gsub { gap: 6px; letter-spacing: 2px; }
#gira .graya { width: 22px; }
#gira .grival { padding-inline: 8px; }
}
/* Tablet: la tienda funciona como catálogo y los retratos dejan de parecer
miniaturas, pero la lectura sigue siendo vertical. */
@media (min-width: 700px) and (max-width: 959px) {
#menu .logo15 { width: min(88vw, 560px); max-width: 560px; }
#menu .logo15 .crest { width: min(76vw, 550px); }
#menu .menupanel { width: min(88vw, 620px); max-width: 620px; padding: 22px; }
#menu .instalar { width: min(88vw, 620px); }
#themeBanner .box { max-width: 720px !important; width: min(94vw, 720px); }
#mazoGrid.egrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#mazoGrid .sw.mazo { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
#mazoGrid .mazopar { width: 104px; }
#mazoGrid .mazofrente, #mazoGrid .mazodorso { width: 61px; }
#mazoLaminaBanner .box { max-width: 900px; width: min(96vw, 900px); }
#mazoLaminaGrid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
#perfilBanner .box { max-width: 720px !important; width: min(94vw, 720px); }
#perfilBanner .retratos, #perfilBanner .retrato-ficha { width: min(100%, 460px); }
#gira .gplaca { width: min(90vw, 620px); }
#gira .girapanel, #giraBack { width: min(90vw, 680px); }
}
/* Escritorio: portada de dos alas, tienda de dos escaparates, Perfil con
identidad + historial y Gira con mapa + rivales. La mesa aprovecha el ancho
sin tocar la regla madre de que su alto no cambia durante la partida. */
@media (min-width: 960px) {
:root { --pastilla-w: 176px; --mesa-w: min(11vw, 114.4px); }
#menu.show {
display: grid;
grid-template-columns: minmax(360px, 520px) minmax(440px, 560px);
grid-template-rows: auto auto auto;
align-content: start; align-items: start; justify-content: center;
column-gap: clamp(28px, 5vw, 84px); row-gap: 18px;
padding: calc(env(safe-area-inset-top) + 74px) max(24px, env(safe-area-inset-right))
calc(env(safe-area-inset-bottom) + 36px) max(24px, env(safe-area-inset-left));
}
#menu .hudtop {
left: 50%; right: auto; transform: translateX(-50%);
width: min(calc(100vw - 48px), 1200px);
}
#menu .logo15 {
grid-column: 1; grid-row: 1; align-self: start;
position: sticky; top: calc(74px + env(safe-area-inset-top));
width: 100%; max-width: 620px; margin: clamp(18px, 4vh, 44px) auto 0;
}
/* (Dueño, 2026-09-14) «el icono principal se achicó, no tiene sentido que sea tan pequeño; debe ser más
grande para impresionar al usuario con su belleza». Es lo primero que se ve y es lo mejor que tenemos:
manda la columna izquierda entera. */
#menu .logo15 .crest { width: min(52vw, 680px); }
#menu .logo15 .promesa { font-size: 19px; }
#menu .menupanel {
grid-column: 2; grid-row: 1 / span 3;
width: 100%; max-width: 560px; margin: 0; padding: 24px;
}
#menu .instalar { grid-column: 1; grid-row: 2; width: min(100%, 480px); margin: 0 auto; }
#menu .piedecasa { grid-column: 1; grid-row: 3; margin-top: 0; align-self: start; }
#menu .menutiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body { --tablero-gap: 8px; }
/* (2026-09-21, dueño: «balanceado») 880 px era el ancho de un teléfono puesto en el medio: en un monitor dejaba más de
media pantalla en negro y un paño angosto. Ahora el tablero toma el 72 % del ancho (tope 1240): el paño queda
apaisado, como una mesa. Y un respiro abajo: la mano abanicada asomaba por debajo del borde de la pantalla. */
.board { max-width: min(1240px, 72vw, calc(100vw - 64px)); padding: 12px 14px 0; gap: var(--tablero-gap); }
/* el respiro de abajo SÓLO donde sobra alto: en una tablet apaisada (1280×800) con mesa de cuatro, esos 22 px salían
del paño y lo dejaban por debajo del 46 % aprobado (mesa-de-cuatro-geometria.mjs lo cazó). */
@media (min-height: 860px) { .board { padding-bottom: 22px; } }
.rivalrow, .myrow { padding-inline: calc(12px + env(safe-area-inset-left)); }
.rivalrow .audiomini { margin-left: auto; }
#table { padding-inline: 24px; }
#themeBanner .box {
max-width: 1180px !important; width: min(calc(100vw - 64px), 1180px);
padding: 28px 30px;
}
#themeBanner #estilo {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start; gap: 16px; max-height: calc(100dvh - 220px); padding-right: 6px;
}
#themeBanner #vidriera, #themeBanner .esec:has(#mazoGrid) { grid-column: 1 / -1; }
#themeBanner #vidriera { margin-bottom: 2px; }
#mazoGrid.egrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#mazoGrid .sw.mazo { min-height: 158px; }
#mazoLaminaBanner .box {
max-width: 1180px; width: min(calc(100vw - 64px), 1180px); padding-inline: 28px;
}
#mazoLaminaGrid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; }
#perfilBanner .box {
max-width: 1050px !important; width: min(calc(100vw - 64px), 1050px);
display: grid; grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
grid-template-areas: 'titulo titulo' 'identidad cuerpo' 'cuenta cuerpo' 'cerrar cerrar';
grid-template-rows: auto auto 1fr auto; align-items: start;
column-gap: 28px; row-gap: 14px; text-align: left;
}
#perfilBanner > .box > .ctitle { grid-area: titulo; text-align: center; }
#perfilBanner .perfil-identidad { grid-area: identidad; width: 100%; margin: 0; }
#perfilBanner #perfilBody { grid-area: cuerpo; min-width: 0; }
#perfilBanner #perfilCuenta { grid-area: cuenta; width: 100%; margin-top: 0 !important; }
#perfilBanner #perfilClose { grid-area: cerrar; }
#perfilBanner .retratos, #perfilBanner .retrato-ficha { width: 100%; max-width: none; }
#perfilBanner .perfstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#gira.show {
display: grid;
grid-template-columns: minmax(300px, 380px) minmax(0, 700px);
grid-template-rows: auto auto; align-content: start; align-items: start; justify-content: center;
column-gap: clamp(22px, 3vw, 40px); row-gap: 16px;
padding: calc(30px + env(safe-area-inset-top)) 24px calc(34px + env(safe-area-inset-bottom));
}
#gira .gplaca {
grid-column: 1; grid-row: 1; width: 100%; margin: 0;
position: sticky; top: calc(30px + env(safe-area-inset-top));
}
#gira .girapanel { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; }
#giraBack { grid-column: 1; grid-row: 2; width: 100%; margin: 0; }
}
@media (min-width: 1280px) {
#gira.show { grid-template-columns: minmax(340px, 390px) minmax(760px, 900px); }
#gira .girapanel {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
#gira .grival { height: 100%; }
}
@media (hover: hover) and (pointer: fine) {
.menutile:hover, .grival:not(.lock):hover, .sw:hover, .retrato:hover {
transform: translateY(-3px); filter: brightness(1.08);
}
.mazover:hover, .vcomprar:hover { filter: brightness(1.14); }
}
/* (2026-09-21) LAS CARTAS SE JUEGAN CON TECLADO: el foco se ve, en oro, sólo cuando viene del teclado */
#table .cardbox:focus-visible, #hand .cardbox:focus-visible { outline: 3px solid var(--gold, #e8c34a); outline-offset: 3px; border-radius: 8px; }
#table .cardbox:focus:not(:focus-visible), #hand .cardbox:focus:not(:focus-visible) { outline: none; }