/* =====================================================================
   suertea-game.css — SUERTÉA como videojuego: PARCHÍS (piel única)
   Razón de ser: que elegir, apartar y pagar números se SIENTA como jugar
   al parchís: cada número es una FICHA sobre un TABLERO de parchís.
   Es AUTÓNOMA (enlaza después de suertea-fx.css y junto a js/game-fx.js):
   todo el arte es CSS/DOM (degradados, sombras, clip-path), sin imágenes.
   Reglas: solo transform / opacity / filter (compositor); el movimiento
   masivo se limita a ~120 fichas; nada parpadea >3 veces por segundo;
   `prefers-reduced-motion` = estado final inmediato; Save-Data y la
   pestaña oculta apagan los bucles ambientales (clases game-lite /
   game-paused en <html>, o fx-lite / fx-paused de SuerteFX).
   Propiedades individuales `scale` / `translate` / `rotate`: componen con
   el `transform` que ya tenga el elemento (no lo pisan).

   NOMBRES FIJOS (el portal y el panel ya los usan; internamente se llaman
   «pool-*» por herencia, pero AHORA PINTAN PARCHÍS — ver GAME.md):
     .pool-table  = tablero de parchís (marco de madera clara + ribete dorado)
     .pool-felt   = superficie del tablero (cuadrantes, cruz de camino, META)
     .pool-ball   = ficha (data-n data-c data-kind data-state)
     .pool-tray   = «tu casa» · .pool-tray-slot = nido donde cae la ficha
     .pq-track / .pq-cell / .pq-token / .pq-goal / .pq-steps / .pq-dice /
     .pq-home[data-color]  (sin cambios de contrato)
   data-c: 1 rojo (cuadrante sup-izq) · 2 amarillo (sup-der) · 3 verde
           (inf-der) · 4 azul (inf-izq) — por posición dentro de la mesa
   Estados de ficha: libre · seleccionada · apartada · vendida (=pagada) · ganadora
   ===================================================================== */
:root{
  --pg-oro:var(--oro,#ffe08a);
  --pg-oro-med:#e8b830;
  --pg-oro-lo:var(--oro2,#c99a1e);
  --pg-txt:var(--texto,#f4f1e6);
  --pg-red:#d81f26;--pg-yellow:#f7c600;--pg-green:#12873a;--pg-blue:#1d4fd8;
  --pg-ease:cubic-bezier(.22,1,.36,1);
  --pg-spring:cubic-bezier(.34,1.56,.64,1);
  --pg-roll:cubic-bezier(.3,.1,.2,1);
  --pg-star:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* =====================================================================
   1. TABLERO DE PARCHÍS (madera clara + ribete dorado + superficie)
   ===================================================================== */
.pool-table{
  --rail:clamp(7px,2.3vw,12px);
  --cw:10.6%;                          /* ancho de la cruz de camino (% del ancho del tablero) */
  --qp:clamp(2px,.8vw,4px);            /* aire de cada cuadrante alrededor de sus fichas */
  position:relative;box-sizing:border-box;width:100%;max-width:560px;margin-inline:auto;
  padding:var(--rail);border-radius:calc(var(--rail) * 1.8);isolation:isolate;
  background:
    repeating-linear-gradient(91deg,rgba(255,255,255,.14) 0 2px,rgba(139,90,30,.08) 2px 5px,rgba(255,255,255,.04) 5px 7px),
    linear-gradient(145deg,#f9e7bb 0%,#ebc98a 36%,#d5a85f 74%,#bf9248 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 -3px 7px rgba(110,66,14,.5),
    inset 0 0 0 1px rgba(92,56,12,.55),
    0 16px 30px -10px rgba(0,0,0,.65),
    0 3px 0 #7a5420;
  -webkit-user-select:none;user-select:none;
  transition:transform .5s var(--pg-ease);
}
/* ribete dorado: línea fina incrustada en la madera */
.pool-table::before{
  content:"";position:absolute;inset:calc(var(--rail) * .24);border-radius:calc(var(--rail) * 1.6);pointer-events:none;z-index:2;
  border:2px solid #d99a0b;
  box-shadow:0 0 0 1px rgba(92,56,12,.55),inset 0 0 0 1px rgba(92,56,12,.45),0 0 8px rgba(255,200,60,.35);
}
/* brillo de barniz sobre la madera */
.pool-table::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(125deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 72%,rgba(255,255,255,.14) 100%);
}
/* remaches dorados en las esquinas y en el centro de cada lado */
.pool-rail{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  --pg-dot:radial-gradient(circle,#fff0b0 0,#e8b830 42%,#8a5a08 62%,rgba(0,0,0,0) 70%);
  background:
    var(--pg-dot) 0 0 / var(--rail) var(--rail) no-repeat,
    var(--pg-dot) 100% 0 / var(--rail) var(--rail) no-repeat,
    var(--pg-dot) 0 100% / var(--rail) var(--rail) no-repeat,
    var(--pg-dot) 100% 100% / var(--rail) var(--rail) no-repeat,
    var(--pg-dot) 50% 0 / var(--rail) var(--rail) no-repeat,
    var(--pg-dot) 50% 100% / var(--rail) var(--rail) no-repeat,
    var(--pg-dot) 0 50% / var(--rail) var(--rail) no-repeat,
    var(--pg-dot) 100% 50% / var(--rail) var(--rail) no-repeat}

/* superficie del tablero: papel crema con viñeta suave */
.pool-felt{
  position:relative;z-index:1;box-sizing:border-box;border-radius:calc(var(--rail) * .7);
  padding:calc(var(--qp) + clamp(3px,1vw,6px));min-height:90px;
  background:
    radial-gradient(120% 90% at 50% 18%,rgba(255,255,255,.6),rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#fff8e2,#f1dfae);
  box-shadow:
    inset 0 0 0 1.5px rgba(88,52,10,.7),
    inset 0 6px 12px -6px rgba(88,52,10,.55),
    inset 0 0 22px rgba(150,100,30,.28);
}

/* reflejo que recorre el tablero (1 sola capa; con puntero sigue el tilt) */
.pool-sheen{position:absolute;inset:0;z-index:3;border-radius:inherit;overflow:hidden;pointer-events:none}
.pool-sheen::before{content:"";position:absolute;top:-12%;bottom:-12%;left:-45%;width:34%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.18) 45%,rgba(255,255,255,.3) 52%,rgba(255,255,255,0));
  transform:translateX(0) skewX(-18deg);translate:var(--sx,0) 0;
  animation:pg-sheen 9s var(--pg-ease) 2.2s infinite}
.pool-sheen::after{content:"";position:absolute;left:18%;top:6%;width:64%;height:56%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,255,255,0) 66%);
  translate:calc(var(--lx,0) * 1%) calc(var(--ly,0) * 1%);transition:translate .35s var(--pg-ease)}
@keyframes pg-sheen{0%{transform:translateX(0) skewX(-18deg)}40%,100%{transform:translateX(560%) skewX(-18deg)}}

/* cuadrícula de fichas: 5 + CRUZ + 5 columnas (tablero de 100) o rejilla simple */
.pool-balls{position:relative;z-index:1;display:grid;gap:0;align-content:start;
  grid-template-columns:repeat(var(--cols,10),minmax(0,1fr))}
.pool-table[data-board] .pool-balls{
  grid-template-columns:repeat(5,minmax(0,1fr)) var(--cw) repeat(5,minmax(0,1fr));
  grid-template-rows:repeat(5,auto) auto repeat(5,auto)}
.pool-table[data-board] .pool-balls>.pool-ball{grid-column:var(--gc);grid-row:var(--gr)}

/* — cuadrantes: la «casa» de cada color con 25 nidos (5×5) — */
.pq-quad{--qc:#d81f26;--ql:#ff7d80;--qd:#780b12;
  position:relative;z-index:0;pointer-events:none;margin:calc(var(--qp) * -1);border-radius:clamp(7px,2.4vw,13px);
  background:linear-gradient(145deg,var(--ql) 0,var(--qc) 46%,var(--qd) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.26),0 0 0 1.5px rgba(60,30,5,.62),0 2px 4px rgba(60,30,5,.3)}
.pq-quad::before{content:"";position:absolute;inset:var(--qp);border-radius:inherit;
  background:radial-gradient(circle closest-side at 50% 52%,rgba(0,0,0,.34) 0,rgba(0,0,0,.2) 76%,rgba(255,255,255,.2) 90%,rgba(255,255,255,0) 97%) 0 0 / 20% 20%}
.pq-quad[data-q="1"]{grid-area:1 / 1 / 6 / 6}
.pq-quad[data-q="2"]{grid-area:1 / 7 / 6 / 12;--qc:#f7c600;--ql:#fff08a;--qd:#8d6a00}
.pq-quad[data-q="3"]{grid-area:7 / 7 / 12 / 12;--qc:#12873a;--ql:#6fe395;--qd:#06421b}
.pq-quad[data-q="4"]{grid-area:7 / 1 / 12 / 6;--qc:#1d4fd8;--ql:#86a8ff;--qd:#0a2370}

/* — cruz de camino: 3 carriles de casillas, el central con el color que llega a META — */
.pq-arm,.pr-arm{--a1:#d81f26;--a2:#12873a;
  position:relative;z-index:0;pointer-events:none;background-color:#fbf0cf;
  box-shadow:inset 0 0 0 1px rgba(100,66,20,.55)}
.pq-arm[data-a=v],.pr-arm[data-a=v]{
  background:
    linear-gradient(90deg,rgba(100,66,20,.5) 0 1px,transparent 1px) 0 0 / 33.3334% 100% repeat-x,
    linear-gradient(180deg,rgba(100,66,20,.5) 0 1px,transparent 1px) 0 0 / 100% 3.3334% repeat-y,
    linear-gradient(var(--a1),var(--a1)) 50% 0 / 33.34% 50% no-repeat,
    linear-gradient(var(--a2),var(--a2)) 50% 100% / 33.34% 50% no-repeat,
    #fbf0cf}
.pq-arm[data-a=h],.pr-arm[data-a=h]{--a1:#1d4fd8;--a2:#f7c600;
  background:
    linear-gradient(180deg,rgba(100,66,20,.5) 0 1px,transparent 1px) 0 0 / 100% 33.3334% repeat-y,
    linear-gradient(90deg,rgba(100,66,20,.5) 0 1px,transparent 1px) 0 0 / 3.3334% 100% repeat-x,
    linear-gradient(var(--a1),var(--a1)) 0 50% / 50% 33.34% no-repeat,
    linear-gradient(var(--a2),var(--a2)) 100% 50% / 50% 33.34% no-repeat,
    #fbf0cf}
.pq-arm[data-a=v]{grid-area:1 / 6 / 12 / 7}
.pq-arm[data-a=h]{grid-area:6 / 1 / 7 / 12}
/* marcas de seguro (estrellas) en los carriles exteriores */
.pq-star{position:absolute;width:29%;aspect-ratio:1/1;
  background:radial-gradient(circle at 40% 30%,#fff2a8,#ffc928 52%,#d68a00);clip-path:var(--pg-star)}
.pq-arm[data-a=v]>.pq-star:nth-child(1){left:2%;top:15%}
.pq-arm[data-a=v]>.pq-star:nth-child(2){left:69%;top:15%}
.pq-arm[data-a=v]>.pq-star:nth-child(3){left:2%;top:84%}
.pq-arm[data-a=v]>.pq-star:nth-child(4){left:69%;top:84%}
.pq-arm[data-a=h]>.pq-star{width:auto;height:29%;aspect-ratio:1/1}
.pq-arm[data-a=h]>.pq-star:nth-child(1){top:2%;left:15%}
.pq-arm[data-a=h]>.pq-star:nth-child(2){top:69%;left:15%}
.pq-arm[data-a=h]>.pq-star:nth-child(3){top:2%;left:84%}
.pq-arm[data-a=h]>.pq-star:nth-child(4){top:69%;left:84%}

/* — META central: 4 triángulos que confluyen + estrella en disco dorado — */
.pq-core,.pr-core{
  position:relative;z-index:1;pointer-events:none;width:100%;aspect-ratio:1/1;
  background:conic-gradient(from -45deg,var(--pg-red) 0 25%,var(--pg-yellow) 25% 50%,var(--pg-green) 50% 75%,var(--pg-blue) 75% 100%);
  box-shadow:0 0 0 1.5px rgba(70,40,5,.75),inset 0 0 0 1px rgba(255,255,255,.28)}
.pq-core{grid-area:6 / 6 / 7 / 7}
.pq-core::before,.pr-core::before{content:"";position:absolute;inset:13%;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#fff4c2 0,#ffe08a 34%,#e8b830 66%,#a77a14 100%);
  box-shadow:0 0 0 1.5px rgba(70,40,5,.75),0 1px 3px rgba(0,0,0,.4)}
.pq-core::after,.pr-core::after{content:"";position:absolute;inset:27%;clip-path:var(--pg-star);
  background:linear-gradient(160deg,#1f9a45,#0d5a24)}
.pq-core.is-hit{animation:pq-bounce .6s var(--pg-spring) 1}

/* tablero inclinado de fondo (hero): usa .pool-table--tilt sobre .pool-table */
.pool-table--tilt{transform:perspective(900px) rotateX(48deg) rotateZ(-7deg) scale(.92);transform-origin:50% 62%;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.65),inset 0 -3px 7px rgba(110,66,14,.5),0 40px 40px -16px rgba(0,0,0,.7)}
.pool-table[data-tilting]{will-change:transform}
.pool-table[data-tilting=rest]{transition:transform .55s var(--pg-ease)}
.pool-table[data-tilting=live]{transition:transform .14s linear}

/* META en pequeño (.pool-pocket): destino de las fichas en «¡Listo!» (el portal la coloca con .ok-tronera).
   Mismo dibujo que la META del centro del tablero: 4 triángulos + disco dorado con estrella. */
.pool-pocket{position:absolute;z-index:0;width:30px;height:30px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from -45deg,var(--pg-red) 0 25%,var(--pg-yellow) 25% 50%,var(--pg-green) 50% 75%,var(--pg-blue) 75% 100%);
  box-shadow:0 0 0 2px rgba(70,40,5,.8),0 0 0 3.5px #ffe08a,0 3px 8px 2px rgba(0,0,0,.4)}
.pool-pocket::before{content:"";position:absolute;inset:16%;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#fff4c2 0,#ffe08a 34%,#e8b830 66%,#a77a14 100%);
  box-shadow:0 0 0 1.5px rgba(70,40,5,.75)}
.pool-pocket::after{content:"";position:absolute;inset:30%;clip-path:var(--pg-star);background:linear-gradient(160deg,#1f9a45,#0d5a24)}

/* =====================================================================
   2. FICHA DE PARCHÍS (cilindro con cúpula: base elíptica, cuerpo con
      degradado vertical, cara superior más clara con el NÚMERO, brillo)
   ===================================================================== */
.pool-ball,.pr-b{--bc:#d81f26;--bh:#ff7a7e;--bl:#6e0910;--bf:#ffd0d2;--bt:#4a060b}
.pool-ball[data-c="1"],.pr-b[data-c="1"]{--bc:#d81f26;--bh:#ff7a7e;--bl:#6e0910;--bf:#ffd0d2;--bt:#4a060b}
.pool-ball[data-c="2"],.pr-b[data-c="2"]{--bc:#f7c600;--bh:#fff08a;--bl:#8a6200;--bf:#fff4b8;--bt:#3d2c00}
.pool-ball[data-c="3"],.pr-b[data-c="3"]{--bc:#12873a;--bh:#6fe395;--bl:#06421b;--bf:#c8f2d5;--bt:#04301a}
.pool-ball[data-c="4"],.pr-b[data-c="4"]{--bc:#1d4fd8;--bh:#86a8ff;--bl:#0a2370;--bf:#cfdcff;--bt:#071a5a}
.pool-ball{
  position:relative;display:block;box-sizing:border-box;width:100%;aspect-ratio:1/1;margin:0;padding:0;border:0;
  border-radius:50%;background:none;color:var(--bt);font:inherit;line-height:1;cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  container-type:inline-size;
}
.pr-b{position:relative;display:block;container-type:inline-size}
.pool-ball:focus-visible{outline:2px solid #fff;outline-offset:1px;box-shadow:0 0 0 4px #1b1204}
/* neutraliza hover/active genéricos de suertea-fx.css para las fichas */
.pool-ball,.pool-ball:hover,.pool-ball:active{translate:none;scale:none;filter:none}
.pool-ball:disabled{cursor:default;opacity:1}
/* fuera del tablero de 100 (rejilla suelta, leyendas) cada ficha trae su nido con aro de color */
.pool-felt .pool-ball{
  background:radial-gradient(circle closest-side at 50% 50%,#fffaf0 0,#fbefce 58%,var(--bc) 66%,var(--bc) 80%,rgba(60,30,0,.35) 90%,rgba(60,30,0,0) 96%)}
.pool-table[data-board] .pool-ball{background:none}

/* sombra de la base (elipse en el suelo) */
.pb-sh{position:absolute;left:9%;right:9%;bottom:1%;height:20%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,.6) 0,rgba(0,0,0,.28) 50%,rgba(0,0,0,0) 76%);
  transition:transform .3s var(--pg-spring),opacity .3s}
/* cuerpo: cilindro con degradado vertical (luz arriba, sombra en la base) */
.pb-s{position:absolute;left:8%;right:8%;top:3%;bottom:12%;isolation:isolate;border-radius:50% / 37%;
  background:linear-gradient(180deg,var(--bh) 0,var(--bc) 30%,var(--bc) 56%,var(--bl) 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),inset 0 -2px 0 rgba(0,0,0,.28);
  transition:transform .3s var(--pg-spring),box-shadow .25s,filter .3s,opacity .3s}
/* sombreado horizontal del cilindro (solo se nota en el costado) */
.pb-s::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,0) 20%,rgba(255,255,255,.2) 32%,rgba(255,255,255,0) 46%,rgba(0,0,0,.16) 76%,rgba(0,0,0,.46) 100%)}
/* destello (glint): invisible; la onda de brillo lo enciende */
.pb-s::before{content:"";position:absolute;left:18%;top:6%;width:36%;height:30%;border-radius:50%;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse,#fff 0,rgba(255,255,255,.75) 40%,rgba(255,255,255,0) 76%);opacity:0;rotate:-20deg}
/* cara superior: más clara, con aro de color; lleva el NÚMERO */
.pb-n{position:absolute;left:0;right:0;top:0;height:72%;z-index:2;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(ellipse at 36% 24%,#fff 0,var(--bf) 52%,var(--bh) 135%);
  box-shadow:inset 0 0 0 2px var(--bc),inset 0 -3px 4px rgba(0,0,0,.14),0 1px 0 rgba(0,0,0,.32)}
@supports (width:1cqw){.pb-n{box-shadow:inset 0 0 0 clamp(1.5px,6.5cqw,4px) var(--bc),inset 0 -3px 4px rgba(0,0,0,.14),0 1px 0 rgba(0,0,0,.32)}}
/* brillo especular de la cúpula */
.pb-n::before{content:"";position:absolute;left:16%;top:9%;width:30%;height:19%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,255,255,.95),rgba(255,255,255,0) 76%);rotate:-16deg}
.pb-n b{position:relative;display:block;font:900 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--bt);
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.55);white-space:nowrap}
.pb-n b i{font-style:normal;font-size:.68em;font-weight:800;opacity:.85;margin-right:.04em;letter-spacing:0}
@supports (width:1cqw){
  .pb-n b{font-size:43cqw}
  .pool-ball[data-d="3"] .pb-n b,.pr-b[data-d="3"] .pb-n b{font-size:40cqw}
  .pool-ball[data-d="4"] .pb-n b,.pr-b[data-d="4"] .pb-n b{font-size:36cqw}
  .pool-ball[data-d="5"] .pb-n b,.pool-ball[data-d="6"] .pb-n b,.pool-ball[data-d="7"] .pb-n b,
  .pool-ball[data-d="8"] .pb-n b,.pool-ball[data-d="9"] .pb-n b{font-size:30cqw}
}

/* ---- estados: base (casa / lista / suelta) = ficha completa + insignia ---- */
.pool-ball[data-state=seleccionada] .pb-s{box-shadow:0 0 0 2px var(--pg-oro),0 0 12px 2px rgba(255,224,138,.75),inset 0 -2px 0 rgba(0,0,0,.28)}
/* insignia reloj (apartada) / estrella (vendida) / corona (ganadora) */
.pool-ball[data-state=apartada]::after,.pool-ball[data-state=vendida]::after,.pool-ball[data-state=pagada]::after{
  content:"";position:absolute;z-index:4;right:-4%;top:-5%;width:38%;height:38%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5)}
.pool-ball[data-state=apartada]::after{
  background:
    linear-gradient(#ffe08a,#ffe08a) 50% 24% / 8% 30% no-repeat,
    linear-gradient(#ffe08a,#ffe08a) 54% 50% / 26% 8% no-repeat,
    radial-gradient(circle,#2a1d05 0 62%,#c99a1e 66% 100%)}
.pool-ball[data-state=vendida]::after,.pool-ball[data-state=pagada]::after{
  background:radial-gradient(circle at 36% 30%,#fff4c2,#e8b830 55%,#a77a14)}
/* corona de la ganadora (gira en 3D) y ficha dorada */
.pool-ball[data-state=ganadora]{--bc:#e8b830;--bh:#fff0a8;--bl:#8a6410;--bf:#fff7d0;--bt:#3d2a00}
.pool-ball[data-state=ganadora]::after{
  content:"";position:absolute;z-index:4;left:21%;top:-26%;width:58%;height:34%;pointer-events:none;
  background:linear-gradient(180deg,#fff4c2 0,#ffe08a 30%,#e8b830 70%,#a77a14 100%);
  clip-path:polygon(0 100%,0 24%,24% 58%,50% 0,76% 58%,100% 24%,100% 100%);
  animation:pb-crown 3.2s linear infinite}
.pool-ball[data-state=ganadora] .pb-s{box-shadow:0 0 0 2px #fff4c2,0 0 18px 4px rgba(255,224,138,.8),inset 0 -2px 0 rgba(0,0,0,.28)}
@keyframes pb-crown{from{transform:perspective(160px) rotateY(0deg)}to{transform:perspective(160px) rotateY(360deg)}}

/* ---- estados EN EL TABLERO (.pool-felt) ---- */
.pool-felt .pool-ball[data-state=libre]:not(:disabled):hover .pb-s,
.pool-felt .pool-ball[data-state=seleccionada]:not(:disabled):hover .pb-s{translate:0 -5%;scale:1.07}
.pool-felt .pool-ball:not(:disabled):active .pb-s{transition-duration:.06s;scale:1.12 .84;translate:0 4%}
.pool-felt .pool-ball[data-state=libre]:not(:disabled):hover .pb-sh{scale:1.1;opacity:.8}
/* seleccionada: se levanta con halo dorado y sombra mayor */
.pool-felt .pool-ball[data-state=seleccionada]{z-index:2}
.pool-felt .pool-ball[data-state=seleccionada] .pb-s{transform:translateY(-15%) scale(1.1)}
.pool-felt .pool-ball[data-state=seleccionada] .pb-sh{transform:translateY(46%) scale(1.3,1.15);opacity:.92}
.pool-felt .pool-ball[data-state=seleccionada]::after{content:"";position:absolute;z-index:0;left:6%;top:-2%;width:88%;height:88%;
  border-radius:50%;border:2px solid var(--pg-oro);opacity:0;pointer-events:none;
  animation:pb-ring 2.2s ease-out infinite}
@keyframes pb-ring{0%{opacity:.85;transform:scale(.9)}70%,100%{opacity:0;transform:scale(1.5)}}
/* apartada: ficha «en espera»: tenue, sentada, con reloj y aro punteado */
.pool-felt .pool-ball[data-state=apartada]::before{
  content:"";position:absolute;inset:3%;border-radius:50%;z-index:0;pointer-events:none;
  border:1.5px dashed rgba(180,118,8,.95);background:rgba(255,224,138,.28)}
.pool-felt .pool-ball[data-state=apartada] .pb-s{transform:translateY(5%) scale(.9);filter:saturate(.45) brightness(.92);opacity:.88}
.pool-felt .pool-ball[data-state=apartada] .pb-sh{opacity:.3}
/* vendida/pagada: la ficha ya llegó a META: queda el hueco con una estrella dorada */
.pool-felt .pool-ball[data-state=vendida]::before,
.pool-felt .pool-ball[data-state=pagada]::before{
  content:"";position:absolute;inset:4%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 38%,rgba(0,0,0,.05) 0,rgba(0,0,0,.5) 100%),var(--bl);
  box-shadow:inset 0 3px 5px rgba(0,0,0,.85),0 0 0 1px rgba(255,224,138,.6)}
.pool-felt .pool-ball[data-state=vendida]::after,
.pool-felt .pool-ball[data-state=pagada]::after{
  left:27%;top:12%;right:auto;width:46%;height:44%;border-radius:0;box-shadow:none;z-index:1;
  clip-path:var(--pg-star);
  background:radial-gradient(circle at 40% 30%,#fff2a8,#ffc928 52%,#d68a00)}
.pool-felt .pool-ball:not(.is-sinking)[data-state=vendida] .pb-s,
.pool-felt .pool-ball:not(.is-sinking)[data-state=pagada] .pb-s{background:none;box-shadow:none;filter:none}
.pool-felt .pool-ball:not(.is-sinking)[data-state=vendida] .pb-s::before,.pool-felt .pool-ball:not(.is-sinking)[data-state=pagada] .pb-s::before,
.pool-felt .pool-ball:not(.is-sinking)[data-state=vendida] .pb-s::after,.pool-felt .pool-ball:not(.is-sinking)[data-state=pagada] .pb-s::after,
.pool-felt .pool-ball:not(.is-sinking)[data-state=vendida] .pb-n::before,.pool-felt .pool-ball:not(.is-sinking)[data-state=pagada] .pb-n::before{display:none}
/* contorno oscuro de la estrella (reutiliza la sombra de la base, que en el hueco no hace falta) */
.pool-felt .pool-ball:not(.is-sinking)[data-state=vendida] .pb-sh,.pool-felt .pool-ball:not(.is-sinking)[data-state=pagada] .pb-sh{
  left:24.5%;right:auto;top:9.5%;bottom:auto;width:51%;height:49%;border-radius:0;opacity:1;transition:none;
  clip-path:var(--pg-star);background:#2a1700}
.pool-felt .pool-ball:not(.is-sinking)[data-state=vendida] .pb-n,.pool-felt .pool-ball:not(.is-sinking)[data-state=pagada] .pb-n{
  top:auto;bottom:6%;height:40%;background:none;box-shadow:none}
.pool-felt .pool-ball:not(.is-sinking)[data-state=vendida] .pb-n b,.pool-felt .pool-ball:not(.is-sinking)[data-state=pagada] .pb-n b{
  color:#ffe9b0;text-shadow:none;font-weight:800}
@supports (width:1cqw){
  .pool-felt .pool-ball:not(.is-sinking)[data-state=vendida] .pb-n b,.pool-felt .pool-ball:not(.is-sinking)[data-state=pagada] .pb-n b{font-size:33cqw}
}
/* ganadora: gira y flota con corona */
.pool-felt .pool-ball[data-state=ganadora]{z-index:3}
.pool-felt .pool-ball[data-state=ganadora] .pb-s{animation:pb-winner 3.6s ease-in-out infinite}
.pool-felt .pool-ball[data-state=ganadora]::before{content:"";position:absolute;z-index:0;left:-30%;top:-30%;width:160%;height:160%;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,rgba(255,224,138,.6),rgba(255,224,138,0) 62%);animation:pb-halo 2.4s ease-in-out infinite}
@keyframes pb-winner{0%,100%{translate:0 -3%;rotate:-5deg}50%{translate:0 -14%;rotate:5deg}}
@keyframes pb-halo{0%,100%{opacity:.55;scale:.9}50%{opacity:1;scale:1.12}}

/* ---- movimiento puntual (clases temporales que pone game-fx.js) ---- */
/* tocar: squash & stretch (sobre `scale`/`translate`, compone con el estado) */
.pool-ball.is-tap .pb-s{animation:pb-tap .5s var(--pg-ease) 1}
@keyframes pb-tap{
  0%{scale:1 1;translate:0 0}
  22%{scale:1.2 .8;translate:0 8%}
  55%{scale:.9 1.18;translate:0 -24%}
  80%{scale:1.06 .94;translate:0 0}
  100%{scale:1 1;translate:0 0}}
/* aterrizar de regreso al tablero / caer en la casa */
.pool-ball.is-land .pb-s{animation:pb-land .55s var(--pg-spring) 1}
@keyframes pb-land{0%{scale:.7 .7;translate:0 -42%;filter:brightness(1.4)}40%{scale:1.16 .84;translate:0 4%;filter:brightness(1.2)}
  62%{scale:.95 1.08;translate:0 -14%}80%{scale:1.06 .94;translate:0 0}100%{scale:1 1;translate:0 0;filter:none}}
/* buscador: la ficha salta dos veces y brilla */
.pool-ball.is-jump{z-index:4}
.pool-ball.is-jump .pb-s{animation:pb-jump .95s var(--pg-ease) 1}
.pool-ball.is-jump .pb-sh{animation:pb-jump-sh .95s var(--pg-ease) 1}
@keyframes pb-jump{
  0%{translate:0 0;scale:1 1;filter:none}
  12%{translate:0 6%;scale:1.18 .82}
  32%{translate:0 -74%;scale:.9 1.15;filter:brightness(1.45) drop-shadow(0 0 8px rgba(255,224,138,.9))}
  52%{translate:0 4%;scale:1.16 .84;filter:brightness(1.2)}
  68%{translate:0 -30%;scale:.95 1.06;filter:brightness(1.3) drop-shadow(0 0 6px rgba(255,224,138,.7))}
  84%{translate:0 2%;scale:1.08 .92}
  100%{translate:0 0;scale:1 1;filter:none}}
@keyframes pb-jump-sh{0%,100%{scale:1;opacity:1}32%{scale:.5;opacity:.3}52%{scale:1.12}68%{scale:.7;opacity:.6}}
/* elegidas tras «sacar fichas»: se iluminan */
.pool-ball.is-glow{z-index:4}
.pool-ball.is-glow .pb-s{animation:pb-glow 1.1s var(--pg-ease) 1}
@keyframes pb-glow{0%{filter:none;scale:1}25%{filter:brightness(1.5) drop-shadow(0 0 9px rgba(255,224,138,.95));scale:1.2}
  60%{filter:brightness(1.25) drop-shadow(0 0 6px rgba(255,224,138,.7));scale:1.1}100%{filter:none;scale:1}}
/* pasar a vendida/pagada: la ficha salta casilla a casilla hasta la META y deja su hueco con estrella */
.pool-ball.is-sinking{z-index:6}
.pool-felt .pool-ball.is-sinking .pb-s{animation:pb-meta 1s linear 1 both}
.pool-felt .pool-ball.is-sinking .pb-sh{opacity:0}
.pool-felt .pool-ball.is-sinking::after{animation:pb-star-in .5s ease-out .78s 1 both}
@keyframes pb-meta{
  0%{translate:0 0;scale:1 1;opacity:1}
  8%{translate:0 4%;scale:1.16 .84}
  20%{translate:calc(var(--mx,0px) * .12) calc(var(--my,-40px) * .12 - 26px);scale:.92 1.12}
  32%{translate:calc(var(--mx,0px) * .25) calc(var(--my,-40px) * .25);scale:1.12 .88}
  44%{translate:calc(var(--mx,0px) * .38) calc(var(--my,-40px) * .38 - 24px);scale:.94 1.1}
  56%{translate:calc(var(--mx,0px) * .5) calc(var(--my,-40px) * .5);scale:1.1 .9}
  68%{translate:calc(var(--mx,0px) * .62) calc(var(--my,-40px) * .62 - 20px);scale:.9 1.08}
  80%{translate:calc(var(--mx,0px) * .75) calc(var(--my,-40px) * .75);scale:.7 .7;opacity:1}
  100%{translate:var(--mx,0px) var(--my,-40px);scale:.2 .2;opacity:0}}
@keyframes pb-star-in{from{opacity:0;scale:.3}60%{opacity:1;scale:1.25}to{opacity:1;scale:1}}
/* «sacar fichas»: ola de saltitos por todo el tablero (retardo = diagonal × --ws) */
.pool-felt.is-wave .pool-ball:not([data-state=vendida]):not([data-state=pagada]) .pb-s{animation:pb-wave .62s var(--pg-ease) calc(var(--wi,0) * var(--ws,40ms)) 1 both}
.pool-felt.is-wave .pool-ball:not([data-state=vendida]):not([data-state=pagada]) .pb-sh{animation:pb-wave-sh .62s var(--pg-ease) calc(var(--wi,0) * var(--ws,40ms)) 1 both}
@keyframes pb-wave{0%{translate:0 0;scale:1 1}20%{translate:0 6%;scale:1.14 .86}52%{translate:0 -58%;scale:.92 1.12}
  78%{translate:0 3%;scale:1.12 .88}100%{translate:0 0;scale:1 1}}
@keyframes pb-wave-sh{0%,100%{scale:1;opacity:1}52%{scale:.55;opacity:.35}}
/* entrada: las fichas saltan a su casilla en cascada (diagonal) al aparecer el tablero */
.pool-felt.is-enter .pool-ball .pb-s{animation:pb-enter .7s var(--pg-ease) var(--gd,0ms) both}
.pool-felt.is-enter .pool-ball .pb-sh{animation:pb-enter-sh .7s var(--pg-ease) var(--gd,0ms) both}
@keyframes pb-enter{0%{opacity:0;translate:0 -140%;scale:.5 .5}30%{opacity:1}
  52%{translate:0 4%;scale:1.18 .82}70%{translate:0 -24%;scale:.94 1.08}86%{translate:0 2%;scale:1.06 .94}100%{opacity:1;translate:0 0;scale:1 1}}
@keyframes pb-enter-sh{0%{opacity:0;scale:.4}52%{opacity:1;scale:1.05}100%{opacity:1;scale:1}}

/* ambiente: respiración leve (1 de cada 3 fichas libres) y onda de destellos */
/* (respira la sombra de la base; :where() = especificidad 0 para no pisar tocar/saltar/vender) */
.pool-felt :where(.pool-ball[data-state=libre]:nth-child(3n)) .pb-sh{animation:pb-breathe 5.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -231ms)}
@keyframes pb-breathe{0%,100%{scale:1;opacity:.85}50%{scale:1.14 1.08;opacity:1}}
.pool-felt.is-glint .pool-ball .pb-s::before{animation:pb-glint .9s ease-out 1 both;animation-delay:var(--gd,0ms)}
@keyframes pb-glint{0%{opacity:0;scale:.7}35%{opacity:1;scale:1.45}100%{opacity:0;scale:.9}}

/* ---- ahorro de datos / pestaña oculta ---- */
.game-lite .pool-sheen::before,.fx-lite .pool-sheen::before,
.game-lite .pool-felt .pool-ball .pb-sh,.fx-lite .pool-felt .pool-ball .pb-sh{animation:none}
.game-lite .pool-felt .pool-ball[data-state=seleccionada]::after,.fx-lite .pool-felt .pool-ball[data-state=seleccionada]::after{animation:none}
.game-paused .pool-sheen::before,.fx-paused .pool-sheen::before,
.game-paused .pool-felt .pool-ball .pb-s,.game-paused .pool-felt .pool-ball .pb-sh,.game-paused .pool-felt .pool-ball::after,.game-paused .pool-felt .pool-ball::before,
.game-paused .pool-ball[data-state=ganadora]::after,
.game-paused .pq-token,.game-paused .pq-goal,.game-paused .pq-step{animation-play-state:paused}

/* =====================================================================
   3. «TU CASA» (.pool-tray): nido de parchís con ranuras circulares
   ===================================================================== */
.pool-tray{
  --slot:clamp(34px,10.4vw,42px);
  position:relative;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  min-height:calc(var(--slot) + 22px);padding:10px 12px;border-radius:16px;
  border:2.5px solid transparent;
  background:
    linear-gradient(180deg,#2e1b0b,#3b2410 50%,#24150a) padding-box,
    linear-gradient(90deg,#d81f26 0 25%,#f7c600 25% 50%,#12873a 50% 75%,#1d4fd8 75% 100%) border-box;
  box-shadow:inset 0 4px 9px rgba(0,0,0,.75),inset 0 -1px 0 rgba(255,224,138,.16),0 0 0 1px rgba(0,0,0,.5),0 8px 18px -8px rgba(0,0,0,.6);
}
.pool-tray:empty::before{content:attr(data-empty);margin:auto;padding:0 6px;text-align:center;
  font:600 12px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.3px;color:rgba(244,241,230,.55)}
.pool-tray-slot{position:relative;flex:0 0 auto;width:var(--slot);height:var(--slot);border-radius:50%;
  background:radial-gradient(circle at 50% 36%,#0d0703 0,#1b1006 60%,#3b2711 100%);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.95),0 0 0 1.5px #f6e6b4,0 0 0 2.5px rgba(188,138,30,.95)}
.pool-tray-slot[data-filled]{box-shadow:inset 0 3px 6px rgba(0,0,0,.95),0 0 0 1.5px #fff2c4,0 0 0 2.5px #e0a82a,0 0 8px rgba(255,208,80,.45)}
.pool-tray-slot>.pool-ball{position:absolute;inset:0;width:100%;height:100%}
.pool-tray-slot.is-hit{animation:pg-slot-hit .5s var(--pg-ease) 1}
@keyframes pg-slot-hit{0%{box-shadow:inset 0 3px 6px rgba(0,0,0,.95),0 0 0 1.5px #f6e6b4,0 0 0 2.5px #e0a82a,0 0 0 0 rgba(255,224,138,.8)}
  100%{box-shadow:inset 0 3px 6px rgba(0,0,0,.95),0 0 0 1.5px #f6e6b4,0 0 0 2.5px #e0a82a,0 0 0 14px rgba(255,224,138,0)}}
/* ficha en vuelo (clon fijo en pantalla): lo maneja game-fx.js con WAAPI */
.pool-ball[data-fly]{position:fixed;left:0;top:0;margin:0;z-index:99985;pointer-events:none;will-change:transform;background:none}
/* ficha que acaba de caer a la casa: rebote final */
.pool-tray-slot>.pool-ball.is-drop .pb-s{animation:pb-land .5s var(--pg-spring) 1}

/* =====================================================================
   4. MINI TABLERO DE PARCHÍS (hero decorativo): .pool-rack
      cuatro casas con 4 fichas cada una que saltan a su lugar al entrar
   ===================================================================== */
.pool-rack{position:relative;z-index:1;width:100%;aspect-ratio:1/1;margin:0 auto}
.pr-home{--hc:#d81f26;--hl:#ff7d80;--hd:#780b12;
  position:absolute;box-sizing:border-box;width:39%;height:39%;border-radius:15%;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3%;padding:8%;
  background:linear-gradient(145deg,var(--hl) 0,var(--hc) 46%,var(--hd) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.26),0 0 0 1.5px rgba(60,30,5,.62)}
.pr-home::before{content:"";position:absolute;inset:7%;border-radius:20%;
  background:linear-gradient(145deg,#fffdf4,#efe5c4);box-shadow:inset 0 2px 5px rgba(0,0,0,.28)}
.pr-home[data-q="1"]{left:0;top:0}
.pr-home[data-q="2"]{right:0;top:0;--hc:#f7c600;--hl:#fff08a;--hd:#8d6a00}
.pr-home[data-q="3"]{right:0;bottom:0;--hc:#12873a;--hl:#6fe395;--hd:#06421b}
.pr-home[data-q="4"]{left:0;bottom:0;--hc:#1d4fd8;--hl:#86a8ff;--hd:#0a2370}
.pr-b{width:100%;aspect-ratio:1/1;z-index:1}
.pr-b::before{content:"";position:absolute;inset:-6%;border-radius:50%;
  background:radial-gradient(circle closest-side at 50% 50%,#e6d7a6 0,#f3e8c4 62%,rgba(60,30,0,.42) 88%,rgba(60,30,0,0) 96%)}
.pr-arm[data-a=v]{position:absolute;left:39%;top:0;width:22%;height:100%}
.pr-arm[data-a=h]{position:absolute;top:39%;left:0;height:22%;width:100%}
.pr-core{position:absolute;left:39%;top:39%;width:22%;height:22%}
.pool-rack[data-wait] .pr-b{opacity:0}
.pool-rack.is-set .pr-b{animation:pr-settle .9s var(--pg-ease) var(--sd,0ms) both}
@keyframes pr-settle{
  0%{opacity:0;transform:translateY(-190%) scale(.5)}
  22%{opacity:1}
  46%{transform:translateY(4%) scale(1.2,.8)}
  64%{transform:translateY(-34%) scale(.94,1.1)}
  82%{transform:translateY(2%) scale(1.08,.92)}
  100%{opacity:1;transform:none}}

/* =====================================================================
   5. PARCHÍS — CASAS DE COLOR (.pq-home)
   ===================================================================== */
.pq-home{
  --hc:#d81f26;--hl:#ff7c80;--hd:#6a0a10;
  position:relative;display:block;box-sizing:border-box;width:var(--hs,64px);aspect-ratio:1/1;border-radius:20%;
  background:linear-gradient(145deg,var(--hl) 0,var(--hc) 46%,var(--hd) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.28),0 0 0 2px rgba(0,0,0,.35),0 8px 14px -6px rgba(0,0,0,.6)}
.pq-home[data-color=red]{--hc:#d81f26;--hl:#ff7c80;--hd:#6a0a10}
.pq-home[data-color=yellow]{--hc:#f7c600;--hl:#fff08a;--hd:#8d6a00}
.pq-home[data-color=green]{--hc:#12873a;--hl:#6fe395;--hd:#06421b}
.pq-home[data-color=blue]{--hc:#1d4fd8;--hl:#86a8ff;--hd:#0a2370}
/* patio interior claro con 4 nidos-hueco */
.pq-home::before{content:"";position:absolute;inset:17%;border-radius:22%;
  background:
    radial-gradient(circle at 27% 27%,var(--hc) 0 17%,rgba(0,0,0,.3) 18% 21%,transparent 22%),
    radial-gradient(circle at 73% 27%,var(--hc) 0 17%,rgba(0,0,0,.3) 18% 21%,transparent 22%),
    radial-gradient(circle at 27% 73%,var(--hc) 0 17%,rgba(0,0,0,.3) 18% 21%,transparent 22%),
    radial-gradient(circle at 73% 73%,var(--hc) 0 17%,rgba(0,0,0,.3) 18% 21%,transparent 22%),
    linear-gradient(145deg,#fffdf4,#ece6d0);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.3)}
.pq-home::after{content:"";position:absolute;left:12%;top:8%;width:38%;height:14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,255,255,.55),rgba(255,255,255,0) 72%)}
.pq-home.is-bounce{animation:pq-bounce .6s var(--pg-spring) 1}
@keyframes pq-bounce{0%{scale:1}35%{scale:1.14 .9}70%{scale:.97 1.04}100%{scale:1}}

/* =====================================================================
   6. PARCHÍS — FICHA DE PISTA (.pq-token) y TRÉBOL de META
   ===================================================================== */
.pq-token{
  --tc:#e9e5d4;--tl:#ffffff;--td:#8f8975;--tf:#fffdf4;
  position:absolute;left:0;top:0;z-index:3;width:21px;height:26px;pointer-events:none;transform-origin:50% 100%;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.pq-token[data-color=red]{--tc:#d81f26;--tl:#ff7a7e;--td:#6e0910;--tf:#ffd0d2}
.pq-token[data-color=yellow]{--tc:#f7c600;--tl:#fff08a;--td:#8a6200;--tf:#fff4b8}
.pq-token[data-color=green]{--tc:#12873a;--tl:#6fe395;--td:#06421b;--tf:#c8f2d5}
.pq-token[data-color=blue]{--tc:#1d4fd8;--tl:#86a8ff;--td:#0a2370;--tf:#cfdcff}
.pq-token[data-color=gold]{--tc:#e8b830;--tl:#fff0a8;--td:#8a6410;--tf:#fff7d0}
.pq-token::after{content:"";position:absolute;left:0;right:0;top:5px;bottom:0;
  border-radius:50% / 36%;
  background:linear-gradient(180deg,var(--tl) 0,var(--tc) 30%,var(--tc) 56%,var(--td) 100%);
  box-shadow:0 0 0 .5px rgba(0,0,0,.45),inset 0 -2px 0 rgba(0,0,0,.25)}
.pq-token::before{content:"";position:absolute;left:0;right:0;top:0;height:15px;border-radius:50%;z-index:2;
  background:radial-gradient(ellipse at 36% 26%,#fff 0,var(--tf) 52%,var(--tl) 135%);
  box-shadow:inset 0 0 0 2px var(--tc),inset 0 -2px 3px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.4)}
.pq-token.is-pop{animation:pq-bounce .5s var(--pg-spring) 1}
/* la ficha se apoya sobre la fila de casillas / pasos (se mueve con translate desde JS) */
.pq-track>.pq-token{top:auto;bottom:calc(8px + var(--ch) * .42)}
.pq-steps>.pq-token{top:auto;bottom:calc(var(--pb) + var(--sz) * .36)}

.pq-clover{display:block;background:
  radial-gradient(circle at 33% 33%,#7bf09b 0 14%,#2bd45a 15% 24%,transparent 25%),
  radial-gradient(circle at 67% 33%,#7bf09b 0 14%,#2bd45a 15% 24%,transparent 25%),
  radial-gradient(circle at 33% 67%,#7bf09b 0 14%,#2bd45a 15% 24%,transparent 25%),
  radial-gradient(circle at 67% 67%,#7bf09b 0 14%,#2bd45a 15% 24%,transparent 25%),
  radial-gradient(circle at 50% 50%,#1e8f3a 0 9%,transparent 10%)}

/* =====================================================================
   7. PARCHÍS — PISTA (.pq-track): reemplaza la barra de progreso
   ===================================================================== */
.pq-track{
  --ch:22px;
  position:relative;box-sizing:border-box;display:flex;align-items:flex-end;gap:3px;
  padding:34px 4px 8px;width:100%}
.pq-start{flex:0 0 auto;width:calc(var(--ch) * 1.1);height:var(--ch);border-radius:50% 8px 8px 50%;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.55),inset 0 3px 5px rgba(0,0,0,.4)}
.pq-cell{
  --cc:#d81f26;--cl:#ff7d80;--cd:#780b12;
  position:relative;flex:1 1 0;min-width:0;height:var(--ch);border-radius:6px;
  background:linear-gradient(180deg,var(--cl) 0,var(--cc) 52%,var(--cd) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.28),0 2px 3px rgba(0,0,0,.4);
  filter:saturate(.5) brightness(.62);transition:filter .35s}
.pq-cell[data-color=red]{--cc:#d81f26;--cl:#ff7d80;--cd:#780b12}
.pq-cell[data-color=yellow]{--cc:#f7c600;--cl:#fff08a;--cd:#977000}
.pq-cell[data-color=green]{--cc:#12873a;--cl:#6fe395;--cd:#07471d}
.pq-cell[data-color=blue]{--cc:#1d4fd8;--cl:#86a8ff;--cd:#0b2672}
.pq-cell[data-on]{filter:none}
.pq-cell[data-safe]::after{content:"";position:absolute;left:50%;top:50%;width:46%;max-width:11px;aspect-ratio:1/1;translate:-50% -50%;
  background:rgba(255,255,255,.9);clip-path:var(--pg-star)}
.pq-cell.is-lit{animation:pq-cell-pop .5s var(--pg-ease) 1}
@keyframes pq-cell-pop{0%{scale:1;filter:brightness(1)}35%{scale:1.18 1.3;filter:brightness(1.5)}100%{scale:1;filter:none}}
/* META: marco dorado con trébol */
.pq-goal{
  position:relative;flex:0 0 auto;box-sizing:border-box;width:calc(var(--ch) * 1.55);height:calc(var(--ch) * 1.55);border-radius:12px;
  background:linear-gradient(145deg,#fff4c2 0,#ffe08a 30%,#e8b830 62%,#a77a14 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(0,0,0,.25),0 0 0 2px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.45)}
.pq-goal::before{content:"";position:absolute;inset:16%;border-radius:9px;
  background:
    radial-gradient(circle at 33% 33%,#7bf09b 0 14%,#2bd45a 15% 24%,transparent 25%),
    radial-gradient(circle at 67% 33%,#7bf09b 0 14%,#2bd45a 15% 24%,transparent 25%),
    radial-gradient(circle at 33% 67%,#7bf09b 0 14%,#2bd45a 15% 24%,transparent 25%),
    radial-gradient(circle at 67% 67%,#7bf09b 0 14%,#2bd45a 15% 24%,transparent 25%),
    radial-gradient(circle at 50% 50%,#1e8f3a 0 9%,transparent 10%),
    linear-gradient(145deg,#0f3b1e,#082712);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.pq-goal.is-reached{animation:pq-goal-pulse 1.8s ease-in-out infinite}
@keyframes pq-goal-pulse{0%,100%{filter:drop-shadow(0 0 3px rgba(255,224,138,.5))}50%{filter:drop-shadow(0 0 14px rgba(255,224,138,.95))}}
.pq-goal.is-hit{animation:pq-bounce .6s var(--pg-spring) 1}
/* chispas de META (las crea game-fx.js, WAAPI) */
.pq-spark{position:absolute;left:0;top:0;width:8px;height:8px;pointer-events:none;z-index:5;
  background:radial-gradient(circle at 35% 30%,#fff4c2,#e8b830 62%,#c99a1e);border-radius:50%}

/* =====================================================================
   8. PARCHÍS — STEPPER DE COMPRA (.pq-steps): 3 fichas de color + META
   ===================================================================== */
.pq-steps{--sz:40px;--pb:6px;position:relative;box-sizing:border-box;display:flex;align-items:center;width:100%;padding:34px 8px var(--pb)}
.pq-steps.has-labels{--pb:28px}
.pq-steps>.pq-token{align-self:auto}
.pq-step{
  --cc:#d81f26;--cl:#ff7d80;--cd:#780b12;
  position:relative;flex:0 0 auto;box-sizing:border-box;display:grid;place-items:center;
  width:var(--sz);height:var(--sz);border-radius:12px;margin:0;
  background:linear-gradient(180deg,var(--cl) 0,var(--cc) 52%,var(--cd) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.28),0 3px 5px rgba(0,0,0,.4);
  color:#fff;font:800 16px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.45);
  filter:saturate(.5) brightness(.62);transition:filter .35s,scale .4s var(--pg-spring)}
.pq-step[data-color=red]{--cc:#d81f26;--cl:#ff7d80;--cd:#780b12}
.pq-step[data-color=yellow]{--cc:#f7c600;--cl:#fff08a;--cd:#977000;color:#2a1f00;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.pq-step[data-color=green]{--cc:#12873a;--cl:#6fe395;--cd:#07471d}
.pq-step[data-color=blue]{--cc:#1d4fd8;--cl:#86a8ff;--cd:#0b2672}
.pq-step[aria-current=step]{filter:none;scale:1.12;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.28),0 0 0 2px var(--pg-oro),0 0 14px rgba(255,224,138,.55)}
.pq-step[data-done]{filter:none}
.pq-step[data-done] .pq-step-n{opacity:.0}
.pq-step[data-done]::after{content:"";position:absolute;left:50%;top:46%;width:30%;height:52%;translate:-50% -50%;rotate:45deg;
  border:solid #fff;border-width:0 4px 4px 0;border-radius:1px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.pq-step[data-color=yellow][data-done]::after{border-color:#2a1f00}
.pq-step.is-lit{animation:pq-cell-pop .5s var(--pg-ease) 1}
.pq-steps>.pq-goal{width:calc(var(--sz) * 1.15);height:calc(var(--sz) * 1.15)}
.pq-link{flex:1 1 auto;min-width:8px;height:8px;margin:0 5px;
  background:radial-gradient(circle,rgba(244,241,230,.42) 0 1.6px,transparent 2.4px) 0 50% / 10px 8px repeat-x}
.pq-link[data-done]{background:radial-gradient(circle,#ffe08a 0 1.9px,transparent 2.7px) 0 50% / 10px 8px repeat-x}
.pq-step-l{position:absolute;left:50%;top:100%;translate:-50% 5px;white-space:nowrap;font:700 10.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.4px;color:rgba(244,241,230,.7);text-shadow:none}
.pq-step[aria-current=step] .pq-step-l{color:var(--pg-oro)}

/* =====================================================================
   9. DADO 3D (.pq-dice > .pq-cube > .pq-face×6) — sin cambios
   ===================================================================== */
.pq-dice{position:relative;display:inline-block;width:var(--ds,56px);height:var(--ds,56px);perspective:460px;vertical-align:middle}
.pq-cube{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-30deg)}
.pq-dsh{position:absolute;left:6%;right:6%;bottom:-16%;height:24%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(0,0,0,.6) 0,rgba(0,0,0,.28) 50%,rgba(0,0,0,0) 74%);transform-origin:50% 50%}
.pq-face{
  --pip:radial-gradient(circle,#161616 0 62%,rgba(0,0,0,0) 68%);
  position:absolute;inset:0;box-sizing:border-box;border-radius:17%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background-color:#f4efe0;background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12),inset -5px -5px 12px rgba(0,0,0,.14),inset 3px 3px 8px rgba(255,255,255,.7)}
.pq-face[data-f="1"]{transform:translateZ(calc(var(--ds,56px) / 2));
  background-image:radial-gradient(circle at 50% 50%,#d81f26 0 13%,rgba(0,0,0,0) 15%)}
.pq-face[data-f="6"]{transform:rotateY(180deg) translateZ(calc(var(--ds,56px) / 2))}
.pq-face[data-f="2"]{transform:rotateY(90deg) translateZ(calc(var(--ds,56px) / 2))}
.pq-face[data-f="5"]{transform:rotateY(-90deg) translateZ(calc(var(--ds,56px) / 2))}
.pq-face[data-f="3"]{transform:rotateX(90deg) translateZ(calc(var(--ds,56px) / 2))}
.pq-face[data-f="4"]{transform:rotateX(-90deg) translateZ(calc(var(--ds,56px) / 2))}
/* puntos: cada punto es un radial-gradient posicionado (sin elementos extra) */
.pq-face[data-f="2"]{background-image:
  radial-gradient(circle at 28% 28%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 72% 72%,#161616 0 9.5%,rgba(0,0,0,0) 11%)}
.pq-face[data-f="3"]{background-image:
  radial-gradient(circle at 26% 26%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 50% 50%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 74% 74%,#161616 0 9.5%,rgba(0,0,0,0) 11%)}
.pq-face[data-f="4"]{background-image:
  radial-gradient(circle at 28% 28%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 72% 28%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 28% 72%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 72% 72%,#161616 0 9.5%,rgba(0,0,0,0) 11%)}
.pq-face[data-f="5"]{background-image:
  radial-gradient(circle at 28% 28%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 72% 28%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 50% 50%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 28% 72%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 72% 72%,#161616 0 9.5%,rgba(0,0,0,0) 11%)}
.pq-face[data-f="6"]{background-image:
  radial-gradient(circle at 28% 24%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 72% 24%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 28% 50%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 72% 50%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 28% 76%,#161616 0 9.5%,rgba(0,0,0,0) 11%),
  radial-gradient(circle at 72% 76%,#161616 0 9.5%,rgba(0,0,0,0) 11%)}
/* luz distinta por cara: da volumen al cubo */
.pq-face[data-f="2"]{filter:brightness(.9)}
.pq-face[data-f="5"]{filter:brightness(.82)}
.pq-face[data-f="3"]{filter:brightness(1.04)}
.pq-face[data-f="4"]{filter:brightness(.78)}

/* =====================================================================
   10. MOVIMIENTO REDUCIDO: estado final inmediato (sin movimiento)
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .pool-table,.pool-table *,.pool-table *::before,.pool-table *::after,
  .pool-felt,.pool-felt *,.pool-felt *::before,.pool-felt *::after,
  .pool-ball,.pool-ball::before,.pool-ball::after,.pool-ball *,.pool-ball *::before,.pool-ball *::after,
  .pool-tray,.pool-tray *,.pool-tray *::before,.pool-tray *::after,
  .pool-rack,.pool-rack *,.pool-rack *::before,.pool-rack *::after,
  .pq-track,.pq-track *,.pq-track *::before,.pq-track *::after,
  .pq-steps,.pq-steps *,.pq-steps *::before,.pq-steps *::after,
  .pq-home,.pq-home::before,.pq-home::after,.pq-dice,.pq-dice *,.pq-token,.pq-token::before,.pq-token::after,.pq-goal,.pq-goal::before{
    animation:none !important;transition:none !important}
  .pool-sheen{display:none}
  .pool-rack[data-wait] .pr-b{opacity:1}
  .pool-felt .pool-ball[data-state=seleccionada]::after{opacity:0}
  .pool-felt .pool-ball[data-state=ganadora] .pb-s{translate:0 -6%}
  .pool-table--tilt{transform:perspective(900px) rotateX(48deg) rotateZ(-7deg) scale(.92)}
}