/* Mesa de cartas: la comparten truco, chinchón, jodete y chancho va.
   Todo lo que es "material" (paño, carta, dorso, pila, globos) vive acá;
   lo propio de cada juego va en el <style> de su HTML.

   Presupuesto vertical del truco: 4 alturas de carta (mano rival + 2 slots +
   tu mano) más marcador, botones y registro <= 100dvh */

:root {
  --cream: #f7f1e3;
  --ink: #2b2b2b;
  --gold: #e0b23e;
  --gold-hi: #fbbf24;
  --mint: #bbf7d0;
  --card-h: clamp(64px, 12.6vh, 132px);
  --card-w: calc(var(--card-h) * 0.6505);
  --card-r: clamp(4px, calc(var(--card-h) * 0.062), 10px);
}

.truco-screen {
  max-width: 480px;
  gap: 6px !important;
  padding: 10px 12px !important;
  min-height: 100dvh;
  justify-content: flex-start;
}

/* ---- el paño ----
   Capa fija detrás de todo: trama de tela (dos rayados finos cruzados) más
   una luz cenital que se apaga hacia los bordes (viñeta). Solo existe
   mientras la mesa está en pantalla, porque .screen inactiva es display:none. */
.truco-screen::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #0e4325;
  background-image:
    radial-gradient(140% 78% at 50% 28%, rgba(60, 152, 97, 0.5) 0%, rgba(21, 86, 47, 0.22) 44%, rgba(4, 26, 14, 0.72) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.045) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}

/* ---- marcador ---- */

#truco-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.34));
  border: 1px solid rgba(247, 241, 227, 0.09);
  border-radius: 14px;
  padding: 6px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.tt-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.score-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  opacity: 0.7;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fosforos { display: block; }

.score-mini {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
}

.score-stage {
  font-size: 0.65rem;
  font-style: italic;
  font-weight: 400;
  opacity: 0.7;
}

.score-target {
  font-size: 0.75rem;
  opacity: 0.5;
}

/* ---- áreas de juego ---- */

#opp-area, #player-area {
  width: 100%;
  text-align: center;
  position: relative;
}

.player-tag {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  opacity: 0.8;
  margin: 2px 0;
}

.mano-chip {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--ink);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-left: 0.35rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.hand {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: calc(var(--card-h) + 2px);
}

/* ---- la carta ----
   Sombra en dos tiros (contacto + difusa) más un filo oscuro de 1px que la
   despega del paño. La elevación se cambia por contexto con --elev y el aro
   de estado (jugable / elegida) con --ring, así nunca se pisan entre sí. */

.card {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  background: var(--cream);
  border-radius: var(--card-r);
  overflow: hidden;
  user-select: none;
  flex-shrink: 0;
  --ring: 0 0 0 0 rgba(0, 0, 0, 0);
  --elev: 0 1px 2px rgba(0, 0, 0, 0.3), 0 5px 11px rgba(0, 0, 0, 0.32);
  box-shadow: var(--ring), 0 0 0 1px rgba(0, 0, 0, 0.34), var(--elev);
  transition: box-shadow 0.18s ease, filter 0.18s ease,
              transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* barniz: una luz diagonal arriba y una caída suave abajo */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(152deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(152deg, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.1) 100%);
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* en la mano vuelan más alto que en la mesa */
.hand .card, .jd-opp-hand .card {
  --elev: 0 2px 3px rgba(0, 0, 0, 0.32), 0 8px 16px rgba(0, 0, 0, 0.36);
}

.slot .card, .ch-pile .card, .jd-pile .card {
  --elev: 0 1px 2px rgba(0, 0, 0, 0.34), 0 3px 7px rgba(0, 0, 0, 0.28);
}

/* ---- dorso ----
   Dibujado en CSS (la imagen queda oculta): enrejado de rombos dorados sobre
   verde botella con rosetón al centro y marco fino. Se lee bien tanto a
   132px como en los dorsitos de 40px de los rivales. */

.card-back {
  background-color: #12402a;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.8) 0 5.5%, rgba(251, 191, 36, 0) 6.2%),
    radial-gradient(circle at 50% 50%, rgba(224, 178, 62, 0) 0 10%, rgba(224, 178, 62, 0.5) 10% 11.4%, rgba(224, 178, 62, 0) 12%),
    repeating-linear-gradient(45deg, rgba(224, 178, 62, 0.17) 0 1px, rgba(224, 178, 62, 0) 1px 7px),
    repeating-linear-gradient(-45deg, rgba(224, 178, 62, 0.17) 0 1px, rgba(224, 178, 62, 0) 1px 7px),
    radial-gradient(115% 82% at 50% 44%, rgba(30, 96, 61, 0.95) 0%, rgba(8, 45, 26, 1) 100%);
}

.card-back .card-img { display: none; }

.card-back::before {
  content: '';
  position: absolute;
  inset: 5% 7%;
  border-radius: calc(var(--card-r) * 0.55);
  border: 1px solid rgba(224, 178, 62, 0.4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 1;
}

/* ---- abanico ----
   Cada carta lleva su giro y su arco en --fan (lo calcula el JS de cada juego
   según cuántas haya) y el salto en --lift, que es lo único que cambian el
   hover, el :active y la carta elegida. Al estar separados, levantar una
   carta nunca le borra la rotación. */

.hand .card, .jd-opp-hand .card {
  transform: translateY(var(--lift, 0px)) var(--fan, rotate(0deg));
  transform-origin: 50% 130%;
}

/* la mano del rival pivotea desde ARRIBA: espejo del abanico, como si él
   también estuviera agarrando las cartas enfrentado a vos */
#opp-hand .card, .jd-opp-hand .card {
  transform-origin: 50% -30%;
}

/* ---- estados ---- */

.card.playable {
  cursor: pointer;
  --ring: 0 0 0 2px rgba(224, 178, 62, 0.8);
}

@media (hover: hover) and (pointer: fine) {
  .hand .card.playable:hover {
    --lift: -14px;
    --ring: 0 0 0 2px var(--gold-hi), 0 0 16px rgba(251, 191, 36, 0.45);
    z-index: 30;
  }
}

.hand .card.playable:active { --lift: -9px; }

.card.selected {
  --lift: -12px;
  --ring: 0 0 0 3px var(--gold-hi), 0 0 18px rgba(251, 191, 36, 0.5);
  z-index: 25;
}

/* la que no se puede jugar: desaturada y en penumbra, sin ensuciar el arte */
.card.dimmed { filter: saturate(0.3) brightness(0.8) contrast(0.94); }
.card.dimmed::after {
  background: linear-gradient(160deg, rgba(8, 38, 23, 0.28), rgba(8, 38, 23, 0.42));
}

/* la recién robada: aro menta */
.card.drawn { --ring: 0 0 0 3px #86efac, 0 0 16px rgba(134, 239, 172, 0.4); }

/* ---- reparto: vuelo escalonado desde el mazo ----
   El JS pone --deal-x/--deal-y (delta hasta el mazo) y --deal-d (el escalón).
   El estado final del keyframe es el transform que ya tiene la carta, así que
   el abanico se respeta solo. */

@keyframes card-deal {
  from {
    opacity: 0;
    transform: translate(var(--deal-x, 0px), var(--deal-y, -70px)) rotate(var(--deal-rot, -14deg)) scale(0.82);
  }
}

.card.dealing {
  animation: card-deal 0.4s cubic-bezier(0.22, 0.75, 0.3, 1) backwards;
  animation-delay: var(--deal-d, 0ms);
  z-index: 40;
}

/* ---- carta jugada: viaja en arco hasta el pozo ----
   Animación CSS y no rAF a propósito: Chrome frena los animation frames con
   la pestaña tapada y la carta quedaba congelada a mitad de viaje. */

@keyframes card-arc {
  0% {
    transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(var(--fr, -10deg)) scale(1.04);
  }
  55% {
    transform: translate(calc(var(--fx, 0px) * 0.4), calc(var(--fy, 0px) * 0.4 - 22px))
               rotate(calc(var(--fr, -10deg) * 0.35)) scale(1.08);
  }
  100% { transform: none; }
}

.card-fly {
  position: relative;
  z-index: 60;
  --elev: 0 10px 26px rgba(0, 0, 0, 0.5);
  animation: card-arc 0.34s cubic-bezier(0.25, 0.8, 0.35, 1);
}

/* ---- pilas: que se vea "montón" y no una carta sola ----
   Dos cartas fantasma apenas giradas debajo de la de arriba. El JS pone
   .pile-slot cuando el montón existe (y .pile-face si son cartas dadas
   vuelta boca arriba, como el pozo). */

.pile-slot { position: relative; }

.pile-slot::before, .pile-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--card-r);
  background: linear-gradient(160deg, #2c7d52, #0b3220);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.42);
}

.pile-slot::before { transform: translate(-4px, 3px) rotate(-4.5deg); }
.pile-slot::after { transform: translate(4px, -2px) rotate(3.5deg); }

.pile-slot.pile-face::before, .pile-slot.pile-face::after {
  background: linear-gradient(160deg, #efe7d4, #cec2a9);
}

/* contador del mazo */
.ch-pile-label, .jd-pile-label {
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(224, 178, 62, 0.26);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(240, 253, 244, 0.85);
  white-space: nowrap;
}

#stock-count, #jd-stock-count {
  color: var(--gold);
  font-weight: 800;
}

/* ---- destello dorado de las jugadas fuertes ---- */

.gold-burst {
  position: fixed;
  inset: 0;
  z-index: 145;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgba(251, 191, 36, 0.5) 0%, rgba(224, 178, 62, 0.2) 26%, rgba(224, 178, 62, 0) 58%);
  animation: gold-burst 0.85s ease-out forwards;
}

.gold-burst::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 44%;
  width: 40vmin;
  height: 40vmin;
  margin: -20vmin 0 0 -20vmin;
  border-radius: 50%;
  border: 3px solid rgba(251, 191, 36, 0.65);
  animation: gold-ring 0.85s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes gold-burst {
  0% { opacity: 0; }
  16% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes gold-ring {
  0% { transform: scale(0.15); opacity: 0.95; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ---- mesa central del truco ---- */

#board {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.trick {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  border-radius: 12px;
  border: 2px dashed transparent;
  transition: border-color 0.3s, background 0.3s;
}

.trick-current { border-color: rgba(247, 241, 227, 0.32); }

.trick-won {
  background: linear-gradient(180deg, rgba(224, 178, 62, 0.22), rgba(224, 178, 62, 0.08));
  box-shadow: inset 0 0 0 1px rgba(224, 178, 62, 0.35);
}

.trick-lost {
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.slot {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-r);
  background: rgba(0, 0, 0, 0.14);
  box-shadow: inset 0 0 0 1px rgba(247, 241, 227, 0.09), inset 0 2px 6px rgba(0, 0, 0, 0.26);
}

/* ---- globos de canto: fichas con colita ---- */

.bubble {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  --bub-ring: rgba(224, 178, 62, 0.9);
  background: linear-gradient(165deg, #fffaf0 0%, var(--cream) 46%, #e6dcc4 100%);
  color: var(--ink);
  font-weight: 900;
  font-size: 0.86rem;
  padding: 0.38rem 0.95rem;
  border-radius: 999px;
  box-shadow:
    0 0 0 2px var(--bub-ring),
    0 6px 16px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  z-index: 10;
  white-space: nowrap;
}

/* la colita: un rombo detrás del globo. Solo llevan aro los dos lados que
   asoman, si no se ve el contorno del rombo entero atravesando la ficha. */
.bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  background: var(--cream);
  transform: rotate(45deg);
  z-index: -1;
}

#opp-area .bubble { top: auto; bottom: -1.1rem; }
#player-area .bubble { top: -2.1rem; }

#opp-area .bubble::after {
  top: -4px;
  border-top: 2px solid var(--bub-ring);
  border-left: 2px solid var(--bub-ring);
}

#player-area .bubble::after {
  bottom: -4px;
  border-bottom: 2px solid var(--bub-ring);
  border-right: 2px solid var(--bub-ring);
}

.bubble.b-truco { --bub-ring: var(--gold-hi); }
.bubble.b-envido { --bub-ring: #7fb3d5; }
.bubble.b-si { --bub-ring: #6dc47c; }
.bubble.b-no { --bub-ring: #d98a80; }

.bubble.pop { animation: bubble-pop 0.32s cubic-bezier(0.2, 1.5, 0.4, 1); }

@keyframes bubble-pop {
  0% { transform: translateX(-50%) scale(0.4) rotate(-7deg); }
  60% { transform: translateX(-50%) scale(1.13) rotate(2deg); }
  100% { transform: translateX(-50%) scale(1) rotate(0); }
}

/* ---- acciones ---- */

#actions {
  width: 100%;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* El relieve son tres capas: el degradé de la cara, un borde inferior más
   oscuro (el "canto" del botón) y la sombra sobre el paño. Cada variante solo
   cambia sus tres tonos. */
.tbtn {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 0.5rem 1.05rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
  --btn-lt: #fffdf7;
  --btn: var(--cream);
  --btn-dk: #a89c86;
  background: linear-gradient(180deg, var(--btn-lt), var(--btn));
  box-shadow:
    0 3px 0 var(--btn-dk),
    0 5px 12px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.1s, box-shadow 0.1s;
}

.tbtn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.tbtn:disabled { opacity: 0.5; }

.tbtn-envido { --btn-lt: #a8cde5; --btn: #7fb3d5; --btn-dk: #4d7f9f; }
.tbtn-truco { --btn-lt: #f5d98a; --btn: var(--gold); --btn-dk: #9c7620; }
.tbtn-mazo { --btn-lt: #cbbfab; --btn: #b0a08c; --btn-dk: #7d715f; }
.tbtn-si { --btn-lt: #a9dfb0; --btn: #82c98c; --btn-dk: #4e9459; }
.tbtn-no { --btn-lt: #eab0a7; --btn: #d98a80; --btn-dk: #a15a51; }

#response-panel {
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.42));
  border: 1px solid rgba(224, 178, 62, 0.6);
  border-radius: 14px;
  padding: 0.5rem 1rem;
  width: 100%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#response-question {
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--gold);
  font-size: 0.9rem;
}

/* ---- registro ---- */

#log {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 6px 10px;
  overflow-y: auto;
  font-size: 0.72rem;
  line-height: 1.4;
  max-height: 64px;
  flex-shrink: 1;
}

/* sin entradas era una franja negra suelta al pie de la mesa */
#log:empty { display: none; }

.log-entry {
  padding: 0.15rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0.9;
}

.log-entry:first-child { color: var(--gold); }

/* ---- fin de partida ---- */

.gameover {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}

.gameover-card {
  background: linear-gradient(170deg, #1a6b3c, #123f24);
  border: 2px solid var(--gold);
  border-radius: 18px;
  padding: 26px 22px;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#gameover-detail {
  color: var(--gold);
  font-size: 1.3rem;
  font-weight: 800;
}

/* ---- chinchón ---- */

.ch-points {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gold);
}

.ch-middle {
  display: flex;
  gap: 26px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.ch-pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.ch-pile > div {
  min-width: var(--card-w);
  min-height: var(--card-h);
}

.hand-small .card {
  width: calc(var(--card-w) * 0.6);
  height: calc(var(--card-h) * 0.6);
}

.ch-hand {
  flex-wrap: wrap;
  gap: 6px;
  row-gap: 10px;
  padding-top: 14px;
}

/* ---- home ---- */

.target-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.target-btn {
  flex: 1;
  padding: 12px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.25);
  color: #e2e8f0;
  cursor: pointer;
}

.target-btn.selected {
  border-color: var(--gold);
  background: rgba(224, 178, 62, 0.18);
  color: #fde68a;
}

.credit {
  font-size: 0.68rem;
  opacity: 0.5;
  text-align: center;
}

/* menos movimiento para quien lo pidió en el sistema */
@media (prefers-reduced-motion: reduce) {
  .card.dealing, .card-fly, .gold-burst, .gold-burst::after, .bubble.pop {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}