/* Vida de la mesa: paño con luz de lámpara, cartas que se tiran con arco, cantos que ocupan la pantalla. */

:root { --felt: #12281f; --felt-deep: #08130e; --felt-hi: #1f4636; }

/* luz de lámpara sobre toda la sala */
.wall.sala::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 42% at 50% 38%, rgba(230, 184, 60, 0.13), transparent 70%), radial-gradient(120% 80% at 50% 120%, rgba(200, 38, 31, 0.16), transparent 60%);
}

/* el centro es un paño: fieltro, costura dorada, viñeta y polvo flotando */
.sala .center {
  position: relative; overflow: hidden; isolation: isolate; border: 3px solid var(--wall);
  background: radial-gradient(70% 90% at 50% 38%, var(--felt-hi), var(--felt) 55%, var(--felt-deep) 100%);
  box-shadow: inset 0 0 0 2px rgba(230, 184, 60, 0.45), inset 0 0 26px 4px rgba(0, 0, 0, 0.65), 0 6px 0 var(--wall);
}
.sala .center::before {
  content: ""; position: absolute; inset: 7px; z-index: -1; border-radius: 10px; pointer-events: none;
  border: 1.5px dashed rgba(230, 184, 60, 0.4);
}
.sala .center::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.1; background: var(--noise);
}
.sala .center > * { position: relative; }
.sala .center > .dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.dust i { position: absolute; bottom: -8px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255, 224, 150, 0.7); animation: mote var(--d) linear infinite; animation-delay: var(--w); }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translate(var(--dx), -280px); opacity: 0; } }

/* las cartas se tiran desde su dueño, con arco, giro y rebote; levantan un aro al caer */
.stack .card.drop { animation: throw 520ms var(--ease-out) both; }
@keyframes throw {
  0% { transform: translate(var(--fx, 0), var(--fy, -90px)) rotate(var(--fr, -14deg)) scale(1.35); opacity: 0; }
  35% { opacity: 1; }
  72% { transform: translate(0, 4px) rotate(calc(var(--fr, -14deg) * -0.15)) scale(0.96); }
  100% { transform: none; }
}
.stack .card.drop::after {
  content: ""; position: absolute; inset: -6px; border-radius: 12px; pointer-events: none;
  border: 3px solid rgba(247, 241, 227, 0.7); opacity: 0; animation: thud 520ms var(--ease-out) 180ms both;
}
@keyframes thud { 0% { opacity: 0.9; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.5, 1.35); } }

/* turno de los rivales: aro de luz */
.seat-bot.thinking { border-radius: var(--r); box-shadow: 0 0 0 2px var(--signal), 0 0 14px rgba(230, 184, 60, 0.3); }

/* tus cartas jugables brillan dorado cuando es tu turno */
.seat-you.turn .hand button.card:not(:disabled) img { box-shadow: 0 0 0 2px rgba(230, 184, 60, 0.85); border-radius: 7px; }

/* cantos: letrero gigante que cruza la pantalla */
.shout { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.shout::before { content: ""; position: absolute; inset: 0; background: var(--tint, transparent); opacity: 0; }
.shout.go::before { animation: flare 700ms var(--ease-out) both; }
@keyframes flare { 0% { opacity: 0.55; } 100% { opacity: 0; } }
.shout-text {
  position: relative; max-width: 92vw; padding: 0.1em 0.45em 0.18em; text-align: center; text-transform: uppercase;
  font-family: var(--display); font-size: clamp(44px, 15vw, 120px); line-height: 1; letter-spacing: 0.02em;
  color: var(--fg, #fff); background: var(--bg, var(--lacre)); border: 4px solid var(--porcelain); border-radius: 14px;
  box-shadow: 8px 10px 0 var(--wall); opacity: 0; transform: rotate(-4deg);
}
.shout-who { display: block; font-family: var(--font); font-weight: 800; font-size: clamp(13px, 3.6vw, 18px); letter-spacing: 0.18em; opacity: 0.85; margin-bottom: 0.3em; }
.shout.go .shout-text { animation: slam 1250ms var(--ease-out) both; }
@keyframes slam {
  0% { opacity: 0; transform: translateY(-30vh) rotate(-14deg) scale(2.8); }
  16% { opacity: 1; transform: translateY(0) rotate(-4deg) scale(0.92); }
  24% { transform: translateY(0) rotate(-4deg) scale(1.04); }
  32% { transform: rotate(-4deg) scale(1); }
  80% { opacity: 1; transform: rotate(-4deg) scale(1); }
  100% { opacity: 0; transform: translateY(-6vh) rotate(-4deg) scale(0.9); }
}
.shout.truco { --bg: var(--lacre); --fg: var(--porcelain); --tint: rgba(200, 38, 31, 0.6); }
.shout.envido { --bg: var(--signal); --fg: var(--ink); --tint: rgba(230, 184, 60, 0.5); }
.shout.quiero { --bg: var(--ok); --fg: var(--porcelain); --tint: rgba(23, 121, 74, 0.5); }
.shout.noquiero { --bg: var(--enamel-hi); --fg: var(--porcelain-dim); --tint: rgba(0, 0, 0, 0.5); }
.shout.noquiero .shout-text { border-color: var(--porcelain-dim); }
.shout.lvl2 .shout-text { font-size: clamp(52px, 18vw, 140px); }
.shout.lvl3 .shout-text { font-size: clamp(54px, 19vw, 150px); animation-duration: 1500ms; }
.shout.lvl3 .shout-text::after { content: ""; position: absolute; inset: -14px; border-radius: 20px; border: 3px solid var(--signal); animation: ring 700ms var(--ease-out) 250ms both; }

/* chispas al ganar una baza */
.spark { position: fixed; z-index: 35; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 2px; pointer-events: none; background: var(--c); animation: spark 900ms var(--ease-out) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0.2); opacity: 0; } }

/* la baza ganada brilla al cerrarse */
.baza.won-me { animation: bazawin 800ms var(--ease-out); box-shadow: 0 0 18px rgba(230, 184, 60, 0.35); }
.baza.won-foe { box-shadow: 0 0 18px rgba(200, 38, 31, 0.3); }
@keyframes bazawin { 0% { transform: scale(1); } 30% { transform: scale(1.07); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .dust, .wall.sala::before { display: none; }
  .shout.go .shout-text { animation-duration: 1ms; opacity: 1; }
  .stack .card.drop { animation: none; }
}

/* fin de la mano: telón con el resultado, los puntos contando y monedas si ganás */
.handend { position: fixed; inset: 0; z-index: 38; display: grid; place-items: center; pointer-events: none; overflow: hidden; opacity: 0; visibility: hidden; }
.handend.go { visibility: visible; animation: curtain 2800ms var(--ease-out) both; }
@keyframes curtain { 0% { opacity: 0; } 10%, 82% { opacity: 1; } 100% { opacity: 0; } }
.handend::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 50%, var(--veil), rgba(8, 10, 12, 0.88)); }
.handend.win { --veil: rgba(120, 90, 10, 0.78); --accent: var(--signal); }
.handend.loss { --veil: rgba(70, 12, 10, 0.78); --accent: var(--lacre); }
.handend-card { position: relative; display: grid; justify-items: center; gap: 6px; padding: 22px 34px 26px; text-align: center; background: var(--enamel-deep); border: 4px solid var(--porcelain); border-radius: 18px; box-shadow: 8px 10px 0 var(--accent), 8px 10px 0 4px var(--wall); transform: rotate(-2deg); }
.handend.go .handend-card { animation: card-in 700ms var(--ease-snap) both; }
.handend.loss.go .handend-card { animation-name: card-sag; }
@keyframes card-in { 0% { transform: translateY(40vh) rotate(10deg) scale(0.5); } 60% { transform: translateY(-14px) rotate(-3deg) scale(1.06); } 100% { transform: rotate(-2deg); } }
@keyframes card-sag { 0% { transform: translateY(-40vh) rotate(-8deg) scale(1.3); } 55% { transform: translateY(8px) rotate(1deg) scale(0.97); } 100% { transform: rotate(-1deg); } }
.handend-title { font-family: var(--display); font-size: clamp(24px, 7vw, 40px); text-transform: uppercase; letter-spacing: 0.04em; color: var(--porcelain); }
.handend-points { font-family: var(--display); font-weight: 400; font-size: clamp(84px, 30vw, 170px); line-height: 0.95; color: var(--accent); text-shadow: 4px 5px 0 var(--wall); }
.handend.go .handend-points { animation: points-bump 420ms var(--ease-snap) 500ms both; }
@keyframes points-bump { 0% { transform: scale(0.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.handend-why { font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--porcelain-dim); }
.handend-why:empty { display: none; }
.coin { position: absolute; top: -24px; left: var(--x); width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b8, var(--signal) 55%, var(--signal-deep)); border: 2px solid var(--signal-deep); animation: coin-fall var(--d) ease-in var(--w) both; }
@keyframes coin-fall { to { transform: translateY(112vh) rotateY(var(--r)) rotate(40deg); } }
@media (prefers-reduced-motion: reduce) { .handend.go, .handend.go .handend-card, .handend.go .handend-points, .coin { animation: none; } .handend.go { opacity: 1; } .coin { display: none; } }

/* flor: cartel de la consulta al mazo y chip de estado */
.shout.flor { --bg: var(--porcelain); --fg: var(--lacre); --tint: rgba(247, 241, 227, 0.4); }
.shout.flor .shout-text { border-color: var(--lacre); }
.shout.long.go .shout-text { animation-duration: 3400ms; }
.flor-chip { padding: 1px 8px; border-radius: 99px; border: 1.5px solid var(--porcelain-dim); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.flor-chip.on { border-color: var(--signal); color: var(--signal); }