/* ════════════════════════════════════════════════════════════════════
   COP · LA SALA DE MEGA SPIN — LA MESA EN EL ESTADIO  (08/10/2026)
   ────────────────────────────────────────────────────────────────────
   Franco: «quiero que entremos a la sala de megaspin, la cual quiero que
   tenga este diseño de mesa con alrededor de estadio (…) el cartel de
   arriba que dice megaspin x3 y el monto de clash coins a la derecha (…)
   en el lugar donde están esas tarjetas, las tarjetas de los 3 jugadores
   del duelo, y donde dice ver duelo, el botón».
   El arte es SU imagen (`marca/spin/sala-mesa.webp`, 941×1672). Todo lo
   de arriba se ubica en % de ESA imagen: el escenario (`.mesa-esc`)
   tiene la proporción exacta del arte y nunca se recorta (contain), así
   el cartel cae en el cartel y el botón en la mesa en cualquier pantalla.
   Lo que sobra arriba y abajo es oscuro y el arte se funde en los bordes.
   ════════════════════════════════════════════════════════════════════ */
.sp-mesa{
  position:fixed; inset:0; z-index:60; background:#03060d;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sp-mesa[hidden]{ display:none }
.sp-mesa::before{ /* el mismo estadio, borroso, detrás: no hay franja negra seca */
  content:""; position:absolute; inset:-40px; pointer-events:none;
  background:url('marca/spin/sala-mesa.webp') center/cover no-repeat;
  filter:blur(28px) brightness(.45); transform:scale(1.1);
}
.mesa-esc{
  position:relative; aspect-ratio:941/1672;
  width:min(100vw, 100dvh * 941 / 1672); height:auto;
  container-type:inline-size;
  background:url('marca/spin/sala-mesa-limpia.webp?v=1') center/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
}

/* la flecha de volver: arriba a la izquierda, sobre el estadio */
.mesa-volver{
  position:fixed; z-index:3; top:calc(env(safe-area-inset-top, 0px) + .6rem); left:.6rem;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:rgba(3,8,20,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.mesa-volver svg{ width:22px; height:22px }

/* ── EL CARTEL: «MEGA SPIN ×3 | 🪙 300» adentro del cartel del arte ──── */
.mesa-cartel{
  position:absolute; left:6%; right:6%; top:8.6%; height:8.4%;
  display:flex; align-items:center; justify-content:center; gap:3.2cqw;
  font:400 8.4cqw/1 Anton, 'Arial Narrow', Impact, sans-serif; color:#fff; overflow:hidden;
  text-transform:uppercase; letter-spacing:.01em; white-space:nowrap;
}
.mesa-cartel .mc-x{ color:#ffc233 }
.mesa-cartel .mc-sep{ width:2px; align-self:stretch; margin:1.6% 0; background:rgba(255,255,255,.35) }
.mesa-cartel .mc-pozo{ display:inline-flex; align-items:center; gap:2.2cqw }
.mesa-cartel .mc-pozo .cop-ico{ --cop-ico:1.1em; width:1.1em; height:1.1em }
.mesa-cartel[data-estado="pendiente"] .mc-pozo b{ opacity:.5 }

/* ── LAS TRES CARTAS ─────────────────────────────────────────────────
   El ancho de la carta es el 28 % del escenario (el de la referencia);
   la del medio va más arriba, como en la imagen que pasó Franco. */
.mesa-jug{
  position:absolute; width:28%; display:flex; flex-direction:column; align-items:center; gap:1.4cqw;
}
.mesa-jug[data-lugar="c"]{ left:36%; top:27.5% }
.mesa-jug[data-lugar="i"]{ left:3%;  top:36.5% }
.mesa-jug[data-lugar="d"]{ left:69%; top:36.5% }
.mesa-carta{
  width:100%; padding:0; border:0; background:none; cursor:pointer; display:block;
  filter:drop-shadow(0 2.4cqw 3cqw rgba(0,0,0,.6));
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.mesa-carta:active{ transform:scale(.97) }
.mesa-carta .cjc{ width:100% }

/* el menú flotante en el medio de la carta tocada: «Ver perfil» y, abajo,
   los picks (estado o «Ver picks»). Franco, 08/10. */
.mesa-jug.abierto{ z-index:4 }
.mesa-jug.abierto .mesa-carta{ filter:drop-shadow(0 2.4cqw 3cqw rgba(0,0,0,.6)) brightness(.55) }
.mesa-menu{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:104%;
  display:flex; flex-direction:column; align-items:stretch; gap:1.4cqw;
  padding:2cqw; border-radius:var(--r-card, 14px);
  background:rgba(3,8,20,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 2cqw 5cqw rgba(0,0,0,.55), inset 0 0 0 1px rgba(var(--cop-acento-rgb, 12,149,235),.35);
  animation:mesa-menu .22s cubic-bezier(.16,1,.3,1) both;
}
.mesa-menu[hidden]{ display:none }
.mesa-menu .cop-b{ min-height:0; height:7.6cqw; padding:0 3cqw; font-size:3.3cqw; white-space:nowrap; width:100% }
.mesa-menu .mesa-est{ justify-content:center; padding:1.6cqw 2.2cqw; font-size:2.9cqw }
@keyframes mesa-menu{ from{ opacity:0; transform:translate(-50%,-50%) scale(.9) } }
.mesa-est{
  display:inline-flex; align-items:center; gap:1.2cqw; max-width:100%;
  font:700 2.5cqw/1.15 Inter, sans-serif; color:rgba(255,255,255,.8); text-align:left;
  padding:1cqw 2.2cqw; border-radius:999px; background:rgba(3,8,20,.62);
}
.mesa-est i{ width:1.6cqw; height:1.6cqw; border-radius:50%; background:#8b93a7; flex:0 0 auto }
.mesa-est[data-listo="1"] i{ background:#22c55e; box-shadow:0 0 0 .6cqw rgba(34,197,94,.22) }
.mesa-est[data-listo="0"] i{ background:#ffc233; animation:mesa-late 1.2s ease-in-out infinite }
@keyframes mesa-late{ 50%{ opacity:.35 } }

/* ── EL BOTÓN DE LA MESA: debajo del logo, adentro del tablero ──────── */
.mesa-boton{
  /* 09/10/2026 · Franco: «más chico y más abajo» (casi tocaba el círculo) */
  position:absolute; left:50%; top:74.6%; transform:translateX(-50%);
  width:31%; height:3.6%;
  display:flex; align-items:center; justify-content:center;
}
.mesa-boton .cop-b{ width:100%; height:100%; min-height:0; padding:0 2cqw; font-size:3cqw; white-space:nowrap; overflow:hidden }

/* la entrada a la sala: el escenario aparece desde abajo, las cartas caen */
.sp-mesa.entra .mesa-esc{ animation:mesa-esc .55s cubic-bezier(.16,1,.3,1) both }
.sp-mesa.entra .mesa-jug{ animation:mesa-cae .6s cubic-bezier(.16,1,.3,1) both }
.sp-mesa.entra .mesa-jug[data-lugar="i"]{ animation-delay:.18s }
.sp-mesa.entra .mesa-jug[data-lugar="c"]{ animation-delay:.08s }
.sp-mesa.entra .mesa-jug[data-lugar="d"]{ animation-delay:.28s }
.sp-mesa.entra .mesa-boton{ animation:mesa-boton .5s .42s cubic-bezier(.16,1,.3,1) both }
@keyframes mesa-esc{ from{ opacity:0; transform:scale(1.04) } }
@keyframes mesa-cae{ from{ opacity:0; transform:translateY(-6cqw) scale(.94) } }
@keyframes mesa-boton{ from{ opacity:0; transform:translateX(-50%) translateY(3cqw) } }
@media (prefers-reduced-motion: reduce){
  .sp-mesa.entra .mesa-esc, .sp-mesa.entra .mesa-jug, .sp-mesa.entra .mesa-boton{ animation:none }
  .mesa-est[data-listo="0"] i{ animation:none }
  .mesa-menu{ animation:none }
}

/* el botón que reemplaza a la tarjeta tapada, después de la ruleta */
.sz-entrar{ display:flex; margin:var(--gap-md, .75rem) auto 0; min-width:62% }
.sz-entrar[hidden]{ display:none }

/* ════════════════════════════════════════════════════════════════════
   LAS TRES PILAS DE CLASH COINS (reglas1 · 13/10/2026)
   Franco (11/10): «cuando entro a un duelo que ya terminó (…) poner
   todas las clash coins que están en la mesa en la pila del ganador».
   Las pilas estaban PINTADAS en el arte: se borraron del fondo
   (`sala-mesa-limpia.webp`) y se recortaron como piezas sueltas
   (`mesa-pila-c/i/d.png`) en el MISMO lugar, así se pueden mover.
   Cada pila es la de la carta que tiene adelante (c centro, i, d).
   ════════════════════════════════════════════════════════════════════ */
.mesa-pila{
  position:absolute; pointer-events:none; z-index:1;
  transition:transform .9s cubic-bezier(.5,0,.2,1), opacity .35s ease .75s;
}
.mesa-pila img{ display:block; width:100%; height:auto }
.mesa-pila[data-lugar="c"]{ left:45.48%; top:54.67%; width:8.82% }
.mesa-pila[data-lugar="i"]{ left:32.09%; top:61.48%; width:8.82% }
.mesa-pila[data-lugar="d"]{ left:61.00%; top:61.72%; width:8.50% }
/* la pila que se va: viaja a la del ganador y se funde */
.mesa-pila.va{ opacity:0 }
/* la del ganador: crece y brilla cuando llegan las otras */
.mesa-pila.gana{ transition:transform .5s cubic-bezier(.34,1.56,.64,1) .85s, filter .5s ease .85s }
.mesa-pila.gana.llena{ transform:scale(1.9); filter:drop-shadow(0 0 3cqw rgba(255,194,51,.75)) }

/* debajo de cada carta, cuando el duelo terminó: el puesto y los puntos */
.mesa-res{
  display:flex; align-items:baseline; justify-content:center; gap:1.6cqw;
  font:400 4.4cqw/1 Anton, 'Arial Narrow', Impact, sans-serif; color:#fff;
  text-shadow:0 .4cqw 1.6cqw rgba(0,0,0,.7); white-space:nowrap;
}
.mesa-res b{ font-weight:400; color:#ffc233 }
.mesa-res span{ font:700 2.8cqw/1 Inter, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.75) }
.mesa-jug[data-gana="1"] .mesa-carta{ filter:drop-shadow(0 0 3.4cqw rgba(255,194,51,.55)) drop-shadow(0 2.4cqw 3cqw rgba(0,0,0,.6)) }
@media (prefers-reduced-motion: reduce){
  .mesa-pila, .mesa-pila.gana{ transition:none }
}