/* Malilla — estilos. Mesa de tapete azul tinta, naipes de papel crema. */

:root {
  --tapete: #13283f;
  --tapete-hondo: #0b1a2b;
  --tapete-claro: #1e3b5c;
  --panel: rgba(5, 13, 23, 0.55);
  --linea: rgba(241, 230, 204, 0.16);
  --crema: #f1e6cc;
  --crema-suave: #c4bba4;
  --papel: #fbf6e9;
  --papel-hoja: #f6eedb;
  --tinta: #1f2a44;
  --oro: #e3b450;
  --oro-claro: #f0c76a;
  --equipo-a: #f08272;
  --equipo-b: #8cbcec;
  --aviso: #f4a598;

  --font-display: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 14px rgba(0, 0, 0, 0.32);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Tamaños de carta (móvil primero). La franja mínima deja ver el índice completo. */
  --hand-cw-base: 62px;
  --hand-strip: 28px;
  --tcw: 54px;
  --seat-cw: 24px;
  --hand-cw: var(--hand-cw-base);
}

@media (max-width: 639px) and (min-height: 740px) {
  :root { --hand-cw-base: 70px; --hand-strip: 30px; --tcw: 58px; }
}

@media (min-width: 640px) {
  :root { --hand-cw-base: 80px; --hand-strip: 50px; --tcw: 70px; --seat-cw: 30px; }
}

@media (min-width: 1000px) and (min-height: 720px) {
  :root { --hand-cw-base: 100px; --hand-strip: 64px; --tcw: 88px; --seat-cw: 34px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  :root { --hand-cw-base: 58px; --hand-strip: 40px; --tcw: 46px; --seat-cw: 22px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  color-scheme: dark;
  background: var(--tapete-hondo);
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--crema);
  font: 16px/1.5 var(--font-ui);
  background:
    radial-gradient(ellipse 90% 60% at 50% 38%, var(--tapete-claro), transparent 70%),
    linear-gradient(var(--tapete), var(--tapete-hondo));
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }

button, a, label, [role="button"] { touch-action: manipulation; }
button { font: inherit; color: inherit; }

input, select, textarea { font-size: 16px; font-family: inherit; }

:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.no-scroll, .no-scroll body { overflow: hidden; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0.65em 1.35em;
  border: 1.5px solid transparent; border-radius: 999px;
  font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: transform 100ms var(--ease-out), background-color 140ms, border-color 140ms;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn-primary { background: var(--oro); color: #1d1606; }
.btn-primary:disabled { background: #5d5747; color: #26221a; cursor: not-allowed; }
.btn-ghost { background: transparent; border-color: rgba(241, 230, 204, 0.42); color: var(--crema); }
.btn-small { min-height: 38px; padding: 0.35em 0.95em; font-size: 0.9rem; }
.btn-link {
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  color: var(--crema); text-decoration: underline; text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:not(:disabled):hover { background: var(--oro-claro); }
  .btn-ghost:hover { border-color: var(--crema); background: rgba(241, 230, 204, 0.07); }
  .btn-link:hover { color: #fff; }
  .mode-option:hover { border-color: rgba(227, 180, 80, 0.6); }
}

/* ---------- Cartas ---------- */

.card {
  position: relative; display: inline-block; flex: none;
  width: var(--cw, 90px); aspect-ratio: 2 / 3; line-height: 0;
  border-radius: 7% / 4.667%;
  box-shadow: var(--shadow-card);
}
.card-svg { display: block; width: 100%; height: 100%; }
.cs-rank { font-family: var(--font-display); font-weight: 700; }
.cs-figure { font-family: var(--font-display); font-style: italic; font-weight: 700; letter-spacing: 0.02em; }

.suit-icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }

.team-tag {
  display: inline-block; padding: 0 0.55em; border-radius: 6px;
  border: 1.5px solid currentColor; font-size: 0.78rem; font-weight: 700; line-height: 1.5;
  white-space: nowrap;
}
.team-tag--A { color: var(--equipo-a); }
.team-tag--B { color: var(--equipo-b); }

/* ---------- Pantallas generales ---------- */

.screen {
  min-height: 100dvh;
  padding:
    max(20px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.page { width: 100%; max-width: 760px; margin: 0 auto; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.page-head h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
.lead { color: var(--crema-suave); max-width: 60ch; }
.stack { margin-top: 16px; }
.stack > * + * { margin-top: 16px; }
.notice-error { color: var(--aviso); font-weight: 600; }

/* ---------- Selector de modo (pantalla «Jugar en línea») ---------- */

.mode-picker { border: 0; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-picker legend { padding: 0; margin-bottom: 10px; font-weight: 650; width: 100%; }
.mode-option {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 6px;
  padding: 16px 10px 14px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--linea); background: var(--panel);
  user-select: none; -webkit-user-select: none;
  transition: border-color 140ms, background-color 140ms;
}
.mode-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mode-option:has(input:checked) { border-color: var(--oro); background: rgba(227, 180, 80, 0.12); }
.mode-option:has(input:focus-visible) { outline: 3px solid var(--oro); outline-offset: 3px; }
.mode-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }
.mode-desc { font-size: 0.85rem; color: var(--crema-suave); }
.mode-seats { width: 46px; height: 46px; }
.mode-seats circle.table { fill: rgba(241, 230, 204, 0.08); stroke: rgba(241, 230, 204, 0.3); }
.mode-seats .a { fill: var(--equipo-a); }
.mode-seats .b { fill: var(--equipo-b); }


/* ---------- Preparación ---------- */

.seating {
  display: grid; gap: 10px; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: ". top ." "left middle right" ". bottom .";
  margin: 8px 0 20px;
}
.seating--2 { grid-template-areas: ". top ." ". middle ." ". bottom ."; }
.seat-field { display: grid; gap: 4px; min-width: 0; }
.seat-field label { font-size: 0.85rem; color: var(--crema-suave); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.seat-field input {
  width: 100%; min-width: 0; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--linea); background: rgba(5, 13, 23, 0.6); color: var(--crema);
}
.seat-field input:focus-visible { border-color: var(--oro); outline: 3px solid var(--oro); outline-offset: 1px; }
.seat-field--top { grid-area: top; width: min(220px, 100%); }
.seat-field--bottom { grid-area: bottom; width: min(220px, 100%); }
.seat-field--left { grid-area: left; }
.seat-field--right { grid-area: right; }
.seating-table {
  grid-area: middle; justify-self: center;
  width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, #24476d, #173252);
  box-shadow: inset 0 0 0 2px rgba(227, 180, 80, 0.35);
  color: var(--oro);
}
.seating-table svg { width: 44px; height: 44px; }

/* ---------- Dados ---------- */

.dice-rounds { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; gap: 10px; }
.dice-round { padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--linea); }
.dice-round h2 { font-size: 1.05rem; margin-bottom: 8px; }
.dice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dice-row { display: flex; align-items: center; gap: 12px; }
.dice-row .name { font-weight: 650; }
.dice-row.is-top .name { color: var(--oro); }
.dice-outcome { margin-top: 10px; color: var(--crema-suave); }
.die { width: 42px; height: 42px; flex: none; }
.die rect { fill: var(--papel); stroke: var(--tinta); stroke-width: 4; }
.die .die-pips { fill: var(--tinta); }
.die--empty rect { fill: transparent; stroke: rgba(241, 230, 204, 0.4); stroke-dasharray: 9 7; }
.die.is-fresh { animation: die-in 360ms var(--ease-out); }
@keyframes die-in {
  from { transform: rotate(-160deg) scale(0.6); opacity: 0.3; }
  to { transform: none; opacity: 1; }
}
.choice-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ---------- Triunfo ---------- */

.trump-screen { text-align: center; }
.trump-screen .page { max-width: 560px; }
.indicator-big { --cw: min(170px, 44vw); margin: 20px auto; }
.trump-title { font-size: clamp(2rem, 8vw, 3rem); display: inline-flex; align-items: center; gap: 12px; }
.trump-title .suit-icon { width: 0.9em; height: 0.9em; }

/* ---------- Mesa ---------- */

.table-screen {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 100dvh; max-width: 1200px; margin: 0 auto;
  padding:
    max(10px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    0
    max(12px, env(safe-area-inset-left));
}

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.brand { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.45rem; line-height: 1; }
.trump-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 12px 3px 3px; border-radius: 10px;
  background: rgba(5, 13, 23, 0.5); border: 1px solid rgba(227, 180, 80, 0.55);
}
.trump-chip .card { --cw: 30px; box-shadow: none; }
.trump-chip .chip-text { display: grid; line-height: 1.2; }
.trump-chip .chip-label { font-size: 0.72rem; color: var(--crema-suave); }
.trump-chip strong { font-family: var(--font-display); font-size: 1.05rem; display: inline-flex; align-items: center; gap: 5px; }
.game-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 0.88rem; color: var(--crema-suave); }
.game-meta b { color: var(--crema); font-weight: 650; }
.topbar-nav { margin-left: auto; display: flex; gap: 8px; }

.board {
  flex: 1 0 auto;
  display: grid; align-items: center; justify-items: center; gap: 6px 8px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: ". top ." "left felt right" ". bottom .";
  padding: 4px 0;
}
.board--2 { grid-template-areas: ". top ." ". felt ." ". bottom ."; }

.seat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0; max-width: 100%; padding: 6px 10px; border-radius: 12px; text-align: center;
  border: 1.5px solid transparent;
}
.seat.is-active { border-color: var(--oro); background: rgba(227, 180, 80, 0.1); }
.seat--top { grid-area: top; }
.seat--left { grid-area: left; }
.seat--right { grid-area: right; }
.seat--bottom { grid-area: bottom; }
.seat--top, .seat--bottom {
  display: grid; column-gap: 12px; row-gap: 0; align-items: center; justify-items: start; text-align: left;
  grid-template-columns: auto minmax(0, auto);
  grid-template-areas: "fan name" "fan meta" "fan note";
}
.seat--top .fan, .seat--bottom .fan { grid-area: fan; }
.seat--top .seat-name, .seat--bottom .seat-name { grid-area: name; }
.seat--top .seat-meta, .seat--bottom .seat-meta { grid-area: meta; justify-content: start; }
.seat--top .seat-note, .seat--bottom .seat-note { grid-area: note; }
.seat-name { font-weight: 650; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; font-size: 0.8rem; color: var(--crema-suave); }
.seat-note { font-size: 0.75rem; color: var(--crema-suave); font-style: italic; }
.fan { display: flex; justify-content: center; height: calc(var(--seat-cw) * 1.5); }
.fan .card { --cw: var(--seat-cw); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.fan .card + .card { margin-left: calc(var(--seat-cw) * -0.62); }

.felt {
  grid-area: felt; position: relative;
  width: calc(var(--tcw) * 3 + 64px); height: calc(var(--tcw) * 3 + 80px);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #2a5582, #1a3b60 70%);
  box-shadow: inset 0 0 0 3px rgba(227, 180, 80, 0.28), inset 0 12px 30px rgba(0, 0, 0, 0.4), 0 8px 26px rgba(0, 0, 0, 0.3);
}
.board--2 .felt { width: calc(var(--tcw) * 2 + 80px); }
.felt-centre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 2px; color: rgba(241, 230, 204, 0.6);
  font-size: 0.72rem; text-align: center; pointer-events: none;
}
.board--4 .felt-centre { opacity: 0.85; }
.clockwise { width: 30px; height: 30px; color: var(--oro); }

.trick-slot { position: absolute; display: grid; justify-items: center; }
.trick-slot--top { top: 12px; left: 50%; transform: translateX(-50%); }
.trick-slot--bottom { bottom: 16px; left: 50%; transform: translateX(-50%); }
.trick-slot--left { left: 12px; top: 50%; transform: translateY(-50%); }
.trick-slot--right { right: 12px; top: 50%; transform: translateY(-50%); }
.board--2 .trick-slot--top, .board--2 .trick-slot--bottom { left: 50%; }
.trick-slot .card { --cw: var(--tcw); }
.slot-empty {
  display: block; width: var(--tcw); aspect-ratio: 2 / 3; border-radius: 7% / 4.667%;
  border: 1.5px dashed rgba(241, 230, 204, 0.28);
}
.trick-slot.is-next .slot-empty { border-color: var(--oro); background: rgba(227, 180, 80, 0.08); }
.slot-name {
  position: relative; margin-top: -10px; max-width: calc(var(--tcw) + 24px);
  padding: 1px 7px; border-radius: 999px; background: rgba(5, 13, 23, 0.85);
  font-size: 0.72rem; font-weight: 600; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-flag {
  position: absolute; top: -9px; right: -10px;
  padding: 0 6px; border-radius: 6px; font-size: 0.68rem; font-weight: 750; line-height: 1.6;
  background: var(--crema); color: var(--tinta);
}
.slot-flag--win { background: var(--oro); }
.trick-slot.is-winner .card { box-shadow: 0 0 0 3px var(--oro), 0 0 24px rgba(227, 180, 80, 0.55); }
.trick-slot.is-winner { z-index: 2; }
.card.is-new { animation: card-land 220ms var(--ease-out); }
@keyframes card-land {
  from { transform: translateY(18px) scale(0.92); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------- Mano del jugador activo ---------- */

.hand-area, .result-panel {
  margin: 0 -12px; padding: 12px max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid rgba(227, 180, 80, 0.3);
  border-radius: 20px 20px 0 0;
}
.hand-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hand-head h2 { font-size: 1.2rem; }
.hand-head .count { font-size: 0.85rem; color: var(--crema-suave); }

/*
 * Mano: si caben todas las cartas, se ven completas; si no, se solapan dejando
 * una franja mínima con el índice (--hand-strip); si ni así caben, pasan a otra fila.
 */
.hand-area { container-type: inline-size; }
/* Manos de pocas cartas: caben enteras y más grandes. */
.hand--few { --hand-cw: calc(var(--hand-cw-base) * 1.3); }
.hand {
  --strip: clamp(var(--hand-strip), (100cqi - var(--hand-cw) - 2px) / max(var(--n, 10) - 1, 1), var(--hand-cw) + 10px);
  display: grid; justify-content: center;
  grid-template-columns: repeat(auto-fill, var(--strip));
  grid-auto-rows: calc(var(--hand-cw) * 1.5);
  row-gap: 14px;
  padding: 20px max(0px, var(--hand-cw) - var(--strip)) 6px 0;
}
.card-btn {
  position: relative; width: var(--hand-cw); padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer; border-radius: 7% / 4.667%;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform 120ms var(--ease-out);
}
/* El orden de apilado nunca cambia: cada carta deja ver siempre su franja con el índice. */
.card-btn .card { --cw: 100%; width: 100%; }
.card-btn.is-selected { transform: translateY(-18px); }
.card-btn.is-selected .card { box-shadow: 0 0 0 3px var(--oro), 0 12px 22px rgba(0, 0, 0, 0.5); }
.hand.is-restricted .card-btn.is-playable::after {
  content: ""; position: absolute; left: 6px; bottom: -7px;
  width: calc(var(--hand-strip) - 12px); height: 3px; border-radius: 2px; background: var(--oro);
}
.card-btn.is-disabled { cursor: not-allowed; }
.card-btn.is-disabled .card { filter: saturate(0.5) brightness(0.74); }
.card-btn:active:not(.is-disabled) { transform: translateY(-5px); }
.card-btn.is-selected:active { transform: translateY(-18px); }
.card-btn:focus-visible { outline: none; }
.card-btn:focus-visible .card { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--oro); }
.card-btn.is-shake { animation: shake 260ms; }
@keyframes shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (hover: hover) and (pointer: fine) {
  .card-btn.is-playable:not(.is-selected):hover { transform: translateY(-8px); }
}

.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }
.hint { flex: 1 1 260px; font-size: 0.95rem; }
.hint.is-warning { color: var(--aviso); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }

.result-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.result-panel h2 { font-size: 1.35rem; }
.result-panel .result-text { flex: 1 1 280px; }
.result-panel p { color: var(--crema-suave); }

/* ---------- Pantalla de cambio de turno ---------- */

.cover { display: grid; place-items: center; text-align: center; }
.cover .page { max-width: 520px; }
.cover-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; text-align: left; }
.cover-stack { position: relative; width: 120px; height: 84px; margin: 0 auto 8px; }
.cover-stack .card { --cw: 48px; position: absolute; left: 36px; top: 4px; }
.cover-stack .card:nth-child(1) { transform: rotate(-12deg) translateX(-14px); }
.cover-stack .card:nth-child(3) { transform: rotate(12deg) translateX(14px); }
.cover-kicker { color: var(--crema-suave); }
.cover-name { font-size: clamp(2.6rem, 11vw, 4rem); font-style: italic; margin: 2px 0 8px; overflow-wrap: anywhere; }
.cover-warning { margin: 12px auto 18px; color: var(--crema-suave); max-width: 36ch; }
.cover-public { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linea); }
.cover-public h2 { font-size: 1.05rem; margin-bottom: 12px; }
.mini-trick { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mini-trick li { display: grid; justify-items: center; gap: 4px; font-size: 0.8rem; max-width: 80px; }
.mini-trick .card { --cw: 58px; }
.mini-trick .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ---------- Final de partida ---------- */

.over .page { max-width: 1060px; }
.over-head { text-align: center; margin-bottom: 22px; }
.over-head h1 { font-size: clamp(2rem, 7vw, 3.2rem); font-style: italic; }
.over-head p { color: var(--crema-suave); margin-top: 6px; }
.score-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.score-card { padding: 16px; border-radius: 16px; background: var(--panel); border: 1.5px solid var(--linea); }
.score-card.is-winner { border-color: var(--oro); }
.score-card h2 { font-size: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.score-card .members { color: var(--crema-suave); margin: 2px 0 12px; }
.score-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.score-table caption { text-align: left; font-weight: 650; padding-bottom: 6px; }
.score-table th, .score-table td { padding: 5px 6px; border-bottom: 1px solid var(--linea); }
.score-table th { text-align: right; font-weight: 600; color: var(--crema-suave); }
.score-table th:first-child { text-align: left; }
.team-name--A { color: var(--equipo-a); }
.team-name--B { color: var(--equipo-b); }
.winner-badge {
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700;
  padding: 2px 10px; border-radius: 999px; background: var(--oro); color: #1d1606;
}
.score-table td { text-align: right; }
.score-table td:first-child { text-align: left; }
.score-table tfoot td { font-weight: 700; color: var(--crema); border-bottom: 0; }
.score-sum { margin-top: 12px; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.score-sum div { display: flex; justify-content: space-between; gap: 12px; }
.score-sum .total { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--linea); font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.captured { margin-top: 14px; }
.captured h3 { font-size: 1rem; margin-bottom: 8px; }
.captured-suit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; }
.captured-suit .card { --cw: 38px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.captured-suit .suit-label { width: 100%; font-size: 0.8rem; color: var(--crema-suave); display: flex; align-items: center; gap: 4px; }
.trick-log { margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--linea); }
.trick-log summary { cursor: pointer; font-weight: 650; }
.trick-log ol { margin: 10px 0 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: 0.9rem; }
.trick-log .bonus { color: var(--oro); }
.over-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.verify-note { text-align: center; margin-top: 14px; font-size: 0.85rem; color: var(--crema-suave); }

/* ---------- Reglas ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 16px;
  background: rgba(4, 10, 18, 0.74);
}
.dialog {
  width: 100%; max-width: 640px; max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  padding: 22px 22px 26px; border-radius: 14px;
  background: var(--papel-hoja); color: var(--tinta);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.dialog-head h2 { font-size: 1.8rem; font-style: italic; }
.dialog h3 { font-size: 1.1rem; margin: 18px 0 6px; }
.dialog p, .dialog li { line-height: 1.55; }
.dialog ul { margin: 0; padding-left: 1.2em; }
.dialog .btn-ghost { color: var(--tinta); border-color: rgba(31, 42, 68, 0.4); }
.dialog .points-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; padding: 0; list-style: none; }
.dialog .points-row li { padding: 2px 9px; border: 1px solid rgba(31, 42, 68, 0.25); border-radius: 6px; font-variant-numeric: tabular-nums; }
.dialog .pending { margin-top: 18px; padding: 12px 14px; border-left: 4px solid #b8862a; background: rgba(184, 134, 42, 0.12); border-radius: 0 8px 8px 0; }

/* ---------- Pantallas estrechas ---------- */

@media (max-width: 520px) {
  .topbar { gap: 6px 10px; }
  .brand { display: none; }
  .game-meta { font-size: 0.8rem; width: 100%; order: 3; }
  .seat { padding: 4px 4px; }
  .seat--left .seat-meta, .seat--right .seat-meta { flex-direction: column; }
  .seat-note { display: none; }
  .actions { width: 100%; }
  .actions .btn { flex: 1 1 auto; }
  .seating { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .seating-table { width: 64px; height: 64px; }
  .seating-table svg { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Juego en línea ---------- */


.field { display: grid; gap: 6px; margin: 16px 0; max-width: 360px; }
.field label { font-weight: 650; }
.field input {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  border: 1.5px solid var(--linea); background: rgba(5, 13, 23, 0.6); color: var(--crema);
}
.field input:focus-visible { border-color: var(--oro); outline: 3px solid var(--oro); outline-offset: 1px; }
.code-input { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.3em; text-transform: uppercase; max-width: 220px; }

.online-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 8px; }
.online-card { padding: 18px; border-radius: 16px; background: var(--panel); border: 1.5px solid var(--linea); display: grid; gap: 12px; align-content: start; }
.online-card h2 { font-size: 1.35rem; }
.online-card .mode-picker { margin: 0; }
.online-card .field { margin: 0; }
.online-card .btn { justify-self: start; }

.waiting { display: flex; align-items: center; gap: 10px; color: var(--crema-suave); }
.waiting-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--oro); flex: none;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.8); } }

.room-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid rgba(241, 230, 204, 0.3); font-size: 0.82rem; color: var(--crema-suave); white-space: nowrap;
}
.room-chip b { color: var(--crema); letter-spacing: 0.08em; }
.room-chip.is-offline { border-color: var(--aviso); color: var(--aviso); }
.page-head .room-chip { margin-left: auto; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 8px; }
.room-code {
  font-family: var(--font-display); font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 700;
  letter-spacing: 0.25em; padding: 4px 6px 4px 14px; border-radius: 12px;
  background: var(--papel); color: var(--tinta);
}
.share-status { flex-basis: 100%; font-size: 0.9rem; color: var(--crema-suave); overflow-wrap: anywhere; }
.share-wa { border-color: rgba(87, 200, 120, 0.6); text-decoration: none; }
.share-wa .ico { width: 17px; height: 17px; margin-right: 5px; }
@media (hover: hover) and (pointer: fine) {
  .share-wa:hover { border-color: #57c878; background: rgba(87, 200, 120, 0.1); }
}

/* «Lo básico» antes de jugar: abierto la primera vez, plegado después. */
.basics { margin: 14px 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--linea); background: var(--panel); }
.basics summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.basics ul { margin: 6px 0 10px; padding-left: 1.2em; }
.basics li { line-height: 1.5; }
.basics li + li { margin-top: 4px; }

/* Aviso de error inesperado: siempre encima, con salida. */
.crash-bar {
  position: fixed; left: 12px; right: 12px; top: max(12px, env(safe-area-inset-top)); z-index: 100;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  max-width: 720px; margin: 0 auto; padding: 12px 16px; border-radius: 14px;
  background: #3a1016; border: 1.5px solid var(--aviso); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.crash-bar p { margin: 0; }
.crash-actions { display: flex; gap: 8px; }

.lobby-seat { padding: 10px 12px; border-radius: 12px; border: 1.5px dashed rgba(241, 230, 204, 0.25); background: rgba(5, 13, 23, 0.35); }
.lobby-seat.is-mine { border-style: solid; border-color: var(--oro); }
.lobby-label { font-size: 0.82rem; color: var(--crema-suave); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lobby-name { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.lobby-tags { font-size: 0.8rem; color: var(--oro); }
.lobby-free { color: var(--crema-suave); font-style: italic; }
.lobby-seat .btn { margin-top: 6px; }
.conn-dot { width: 9px; height: 9px; border-radius: 50%; background: #7d7a70; flex: none; }
.conn-dot.is-on { background: #6fcf8f; }
.lobby-bot { display: inline-grid; place-items: center; color: var(--oro); }
.lobby-bot .ico { width: 20px; height: 20px; }
.lobby-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.lobby-btns .btn { display: inline-flex; align-items: center; gap: 6px; }
.lobby-btns .ico { width: 18px; height: 18px; }

/* Contra la máquina: asientos de bot. */
.bot-seats { list-style: none; margin: 4px 0 22px; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.bot-seat {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--linea); background: rgba(5, 13, 23, 0.35); color: var(--crema-suave);
}
.bot-seat .ico { width: 22px; height: 22px; color: var(--oro); flex: none; }
.bot-seat .team-tag { margin-left: auto; }

.card-btn.is-idle { cursor: default; }

@media (max-width: 520px) {
  .room-chip { font-size: 0.75rem; }
}

/* Sala de espera en pantallas estrechas: una columna por equipo (asientos 1 y 3 | 2 y 4). */
@media (max-width: 560px) {
  .lobby-seating.seating--4 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "bottom left" "top right";
  }
  .lobby-seating.seating--2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "bottom top";
  }
  .lobby-seating .seating-table { display: none; }
  .lobby-seating .seat-field { width: auto; }
}

.mode-picker--4 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.mode-seats .n { fill: var(--crema); }

.seat-list { list-style: none; margin: 8px 0 20px; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.lobby-list { display: grid; gap: 10px; margin: 8px 0 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.lobby-score { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--crema-suave); font-size: 0.9rem; }

/* ---------- Mesa de juegos de 2 a 5 jugadores (Dompe, Conquián) ---------- */

.game-v2 { gap: 12px; }
.game-meta .direction { display: inline-flex; align-items: center; gap: 4px; }
.game-meta .clockwise { width: 18px; height: 18px; }
.opponents { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.opp-seat {
  display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; flex: 1 1 140px; max-width: 280px;
  padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--linea); background: rgba(5, 13, 23, 0.35); text-align: center;
}
.opp-seat.is-active { border-color: var(--oro); background: rgba(227, 180, 80, 0.1); }
.seat-tag {
  display: inline-block; padding: 0 7px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; line-height: 1.6;
  background: rgba(241, 230, 204, 0.12); color: var(--crema); white-space: nowrap;
}
.opp-seat .seat-meta { gap: 4px 6px; }
.melded-count { font-size: 0.78rem; color: var(--oro); }

.center-area { display: grid; justify-items: center; gap: 10px; }
.piles, .center-row, .cover-piles { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 18px; }
.pile, .pile-static {
  display: grid; justify-items: center; gap: 6px; padding: 6px; border: 0; border-radius: 12px; background: none;
  color: var(--crema); cursor: pointer;
}
.pile-static { cursor: default; }
.pile .card, .pile-static .card, .pile .slot-empty, .pile-static .slot-empty { --cw: var(--tcw); width: var(--tcw); }
.pile:disabled { cursor: default; opacity: 1; }
.pile:not(:disabled) .card { box-shadow: 0 0 0 3px var(--oro), var(--shadow-card); }
.pile-label { font-size: 0.8rem; color: var(--crema-suave); }
.pile .card { transition: transform 120ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pile:not(:disabled):hover .card { transform: translateY(-4px); }
}

.offer { margin: 0; display: grid; justify-items: center; gap: 6px; text-align: center; }
.offer .card, .offer .slot-empty { --cw: calc(var(--tcw) * 1.15); width: calc(var(--tcw) * 1.15); }
.offer .card { box-shadow: 0 0 0 3px var(--oro), var(--shadow-card); }
.offer figcaption { font-size: 0.8rem; color: var(--crema-suave); max-width: 22ch; }
.offer figcaption b { color: var(--crema); }

.call-banner {
  padding: 8px 14px; border-radius: 10px; background: rgba(227, 180, 80, 0.16); border: 1px solid var(--oro);
  color: var(--crema); font-weight: 600; text-align: center; max-width: 60ch;
}
.recent-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; justify-items: center; font-size: 0.82rem; color: var(--crema-suave); text-align: center; }
.recent-log li:first-child { color: var(--crema); }

.yuca-tag, .offer-tag {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  padding: 0 6px; border-radius: 6px; font: 700 0.62rem/1.6 var(--font-ui); letter-spacing: 0.02em;
  background: #1f2a44; color: var(--oro-claro); white-space: nowrap; pointer-events: none;
}
.offer-tag { bottom: auto; top: 38%; background: var(--oro); color: #1d1606; }

.kept-info { margin: 10px 0 0; font-size: 0.95rem; }
.action-bar--stack { flex-direction: column; align-items: stretch; }
.action-bar--stack .actions { margin-left: 0; }
.confirm-panel {
  margin-top: 12px; padding: 14px; border-radius: 12px; border: 1.5px solid var(--oro); background: rgba(227, 180, 80, 0.12);
  display: grid; gap: 10px;
}
.confirm-panel .actions { margin-left: 0; }

.card-row { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.card-row .card { --cw: 52px; position: relative; }
.card-row--small .card { --cw: 34px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.card-row--small .yuca-tag { font-size: 0.5rem; padding: 0 3px; }
.melds { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; }
.meld { display: grid; justify-items: center; gap: 2px; }
.meld-text { font-size: 0.7rem; color: var(--crema-suave); max-width: 24ch; text-align: center; }
.hand-area .melds { justify-content: flex-start; margin: 8px 0 4px; }
.hand-area .card-row--small .card { --cw: 44px; }
.melds-empty { font-size: 0.85rem; color: var(--crema-suave); font-style: italic; margin: 6px 0; }

.meld-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.meld-option { width: 100%; justify-content: flex-start; text-align: left; border-radius: 12px; }
.pass-wait { display: flex; align-items: center; gap: 12px; }
.pass-wait .card { --cw: 40px; }

.builder { display: grid; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--linea); background: rgba(5, 13, 23, 0.35); }
.builder h3 { font-size: 1.1rem; }
.builder-help, .builder-label { font-size: 0.85rem; color: var(--crema-suave); }
.builder-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.builder-slot { display: grid; gap: 6px; padding: 8px; border-radius: 10px; border: 1.5px dashed var(--linea); }
.builder-slot.is-valid { border-style: solid; border-color: #6fcf8f; }
.builder-slot.is-invalid { border-style: solid; border-color: var(--aviso); }
.builder-status { font-size: 0.82rem; color: var(--crema-suave); }
.builder-slot.is-invalid .builder-status { color: var(--aviso); }
.builder-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.builder-cards .card-btn { width: 56px; }
.builder-cards .slot-empty { width: 40px; }

.showdown { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.showdown-row { padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--linea); background: var(--panel); display: grid; gap: 8px; }
.showdown-row.is-winner { border-color: var(--oro); }
.showdown-name { font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.showdown-text { color: var(--crema-suave); }
.showdown-row .melds { justify-content: flex-start; }

.scoreboard { margin: 18px auto 0; max-width: 420px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--linea); background: var(--panel); }
.scoreboard h2 { font-size: 1.05rem; margin-bottom: 8px; }
.scoreboard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.scoreboard li { display: flex; justify-content: space-between; gap: 12px; }

.public-melds { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; font-size: 0.9rem; }

.card-btn .card { position: relative; }

@media (max-width: 520px) {
  .opp-seat { flex-basis: 120px; padding: 6px; }
  .opp-seat .fan { display: none; }
  .card-row .card { --cw: 44px; }
  .meld-option { font-size: 0.9rem; }
}

.action-bar--stack .hint { flex: none; }

/* ---------- Portada ---------- */

.ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico--fill { fill: currentColor; stroke: none; }

.home2 .page { max-width: 1080px; }
.home-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brand-mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.5rem; line-height: 1;
}
.brand-mark .suit-icon { width: 30px; height: 30px; vertical-align: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)); }
.brand-accent { color: var(--oro-claro); }

.home-hero { text-align: center; margin: clamp(22px, 6vw, 52px) auto clamp(20px, 4vw, 36px); }
.home-hero h1 { font-size: clamp(2.4rem, 7.5vw, 4.2rem); font-style: italic; letter-spacing: -0.01em; }
.home-hero p { margin-top: 10px; color: var(--crema-suave); font-size: clamp(0.98rem, 2.3vw, 1.15rem); }

.resume { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -6px 0 24px; }
.resume-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px 6px 12px;
  border-radius: 999px; border: 1px solid rgba(227, 180, 80, 0.55); background: rgba(227, 180, 80, 0.1);
  color: var(--crema); font: inherit; font-size: 0.92rem; cursor: pointer;
  transition: background-color 140ms, transform 100ms var(--ease-out);
}
.resume-btn:active { transform: scale(0.98); }
.resume-btn .ico { width: 18px; height: 18px; }
.resume-btn b { letter-spacing: 0.08em; }

/* Tarjeta de cada juego: una mesa ilustrada con sus cartas reales. */
.game-tiles {
  border: 0; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: clamp(12px, 2vw, 22px);
}
.game-tile {
  position: relative; display: flex; flex-direction: column; padding: 10px; border-radius: 22px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  border: 1.5px solid var(--linea);
  transition: transform 180ms var(--ease-out), border-color 160ms, box-shadow 180ms;
}
.game-tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 3; }
.game-tile.is-selected {
  border-color: var(--oro);
  box-shadow: 0 0 0 1px var(--oro), 0 22px 44px rgba(0, 0, 0, 0.38);
}
.game-tile:has(input:focus-visible) { outline: 3px solid var(--oro); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .game-tile:hover { transform: translateY(-4px); border-color: rgba(227, 180, 80, 0.6); }
  .game-tile:hover .game-art .card { transition: transform 260ms var(--ease-out); }
}

.tile-check {
  position: absolute; top: 18px; left: 18px; z-index: 2; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--oro); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: scale(0.6); transition: opacity 160ms, transform 180ms var(--ease-out);
}
.tile-check svg { width: 16px; height: 16px; fill: none; stroke: #1d1606; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.game-tile.is-selected .tile-check { opacity: 1; transform: none; }

.game-art {
  --acw: 48px;
  position: relative; display: block; height: calc(var(--acw) * 3.1); border-radius: 16px; overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, #2d5b8c, #173a5e 70%, #0f2a46);
  box-shadow: inset 0 0 0 1px rgba(227, 180, 80, 0.22), inset 0 12px 30px rgba(0, 0, 0, 0.35);
}
.game-art .card { --cw: var(--acw); position: absolute; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); }
.game-art .yuca-tag { font-size: 0.5rem; padding: 0 4px; }

/* Malilla: una baza en cruz con el triunfo ganador. */
.game-art--malilla .t1 { left: calc(50% - var(--acw) * 0.5); top: calc(var(--acw) * 0.12); transform: rotate(-3deg); }
.game-art--malilla .t2 { left: calc(50% - var(--acw) * 1.85); top: calc(var(--acw) * 0.8); transform: rotate(-10deg); }
.game-art--malilla .t3 { left: calc(50% + var(--acw) * 0.85); top: calc(var(--acw) * 0.8); transform: rotate(9deg); }
.game-art--malilla .t4 { left: calc(50% - var(--acw) * 0.5); top: calc(var(--acw) * 1.5); transform: rotate(4deg); }
.game-art--malilla .is-win { z-index: 1; box-shadow: 0 0 0 2px var(--oro), 0 0 20px rgba(227, 180, 80, 0.65); }

/* Dompe: una mano en abanico (el truco usa el mismo abanico). */
.game-art--dompe .card, .game-art--fan .card, .game-art--truco .card {
  --cw: calc(var(--acw) * 1.12);
  left: calc(50% - var(--acw) * 0.56); top: calc(var(--acw) * 0.78); transform-origin: 50% 150%;
}
.game-art .is-yuca { z-index: 2; box-shadow: 0 0 0 2px var(--oro), 0 4px 14px rgba(0, 0, 0, 0.5); }
.game-art .f1 { transform: rotate(-30deg); }
.game-art .f2 { transform: rotate(-15deg); }
.game-art .f3 { transform: rotate(0deg); }
.game-art .f4 { transform: rotate(15deg); }
.game-art .f5 { transform: rotate(30deg); }

/* Texas Hold'em: el flop, dos ases en la mano y una pila de fichas. */
.game-art--holdem .bd1, .game-art--holdem .bd2, .game-art--holdem .bd3 { top: calc(var(--acw) * 0.22); }
.game-art--holdem .bd1 { left: calc(50% - var(--acw) * 1.68); }
.game-art--holdem .bd2 { left: calc(50% - var(--acw) * 0.5); }
.game-art--holdem .bd3 { left: calc(50% + var(--acw) * 0.68); }
.game-art--holdem .pk1, .game-art--holdem .pk2 { top: calc(var(--acw) * 1.5); z-index: 1; }
.game-art--holdem .pk1 { left: calc(50% - var(--acw) * 1.75); transform: rotate(-12deg); }
.game-art--holdem .pk2 { left: calc(50% - var(--acw) * 1.12); transform: rotate(7deg); }
.art-chips { position: absolute; left: calc(50% + var(--acw) * 0.35); top: calc(var(--acw) * 1.95); z-index: 1; line-height: 0; }
.art-chips .chip-stack { width: calc(var(--acw) * var(--w) / 46); height: calc(var(--acw) * var(--h) / 46); }

/* Blackjack: la banca con una carta tapada y un blackjack. */
.game-art--blackjack .dl1 { left: calc(50% - var(--acw) * 1.05); top: calc(var(--acw) * 0.18); transform: rotate(-4deg); }
.game-art--blackjack .dl2 { left: calc(50% - var(--acw) * 0.25); top: calc(var(--acw) * 0.22); transform: rotate(5deg); }
.game-art--blackjack .pl1, .game-art--blackjack .pl2 { top: calc(var(--acw) * 1.5); z-index: 1; }
.game-art--blackjack .pl1 { left: calc(50% - var(--acw) * 1.6); transform: rotate(-9deg); }
.game-art--blackjack .pl2 { left: calc(50% - var(--acw) * 0.95); transform: rotate(6deg); }

/* Brisca: la muestra cruzada bajo el mazo y una baza. */
.game-art--brisca .bm { left: calc(50% - var(--acw) * 2.05); top: calc(var(--acw) * 0.95); transform: rotate(90deg); }
.game-art--brisca .bp { left: calc(50% - var(--acw) * 1.75); top: calc(var(--acw) * 0.75); transform: rotate(-3deg); }
.game-art--brisca .bt1 { left: calc(50% + var(--acw) * 0.1); top: calc(var(--acw) * 0.55); transform: rotate(-8deg); }
.game-art--brisca .bt2 { left: calc(50% + var(--acw) * 0.85); top: calc(var(--acw) * 0.85); transform: rotate(7deg); }
.game-art--brisca .is-win { z-index: 1; box-shadow: 0 0 0 2px var(--oro), 0 0 20px rgba(227, 180, 80, 0.65); }

/* Distintivo redondo de algunas ilustraciones (15 de la Escoba). */
.art-badge {
  position: absolute; z-index: 2; left: calc(50% + var(--acw) * 0.95); top: calc(var(--acw) * 0.3);
  display: grid; place-items: center; width: calc(var(--acw) * 0.8); height: calc(var(--acw) * 0.8); border-radius: 50%;
  background: var(--oro); color: #1d1606; font: 800 calc(var(--acw) * 0.34) / 1 var(--font-ui); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}

/* Escoba: tres cartas de la mesa que suman 15. */
.game-art--escoba .card { top: calc(var(--acw) * 0.75); }
.game-art--escoba .es1 { left: calc(50% - var(--acw) * 1.95); transform: rotate(-6deg); }
.game-art--escoba .es2 { left: calc(50% - var(--acw) * 0.8); transform: rotate(2deg); }
.game-art--escoba .es3 { left: calc(50% + var(--acw) * 0.35); transform: rotate(9deg); }
.game-art--escoba .art-badge { left: calc(50% + var(--acw) * 1.25); top: calc(var(--acw) * 0.35); }

/* Conquián: una escalera y un grupo bajados. */
.game-art--conquian .m1, .game-art--conquian .m2, .game-art--conquian .m3 { top: calc(var(--acw) * 0.5); transform: rotate(-6deg); }
.game-art--conquian .m4, .game-art--conquian .m5, .game-art--conquian .m6 { top: calc(var(--acw) * 1.05); transform: rotate(5deg); }
.game-art--conquian .m1 { left: calc(50% - var(--acw) * 2.25); }
.game-art--conquian .m2 { left: calc(50% - var(--acw) * 1.8); }
.game-art--conquian .m3 { left: calc(50% - var(--acw) * 1.35); }
.game-art--conquian .m4 { left: calc(50% + var(--acw) * 0.2); }
.game-art--conquian .m5 { left: calc(50% + var(--acw) * 0.65); }
.game-art--conquian .m6 { left: calc(50% + var(--acw) * 1.1); }

.tile-body { display: grid; gap: 6px; padding: 14px 6px 6px; }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile-name { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; }
.players-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px;
  background: rgba(241, 230, 204, 0.1); font-size: 0.8rem; font-weight: 650; white-space: nowrap;
}
.players-chip .ico { width: 16px; height: 16px; }
.tile-line { color: var(--crema-suave); font-size: 0.95rem; }
.tile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tile-tag {
  padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(241, 230, 204, 0.18);
  font-size: 0.74rem; line-height: 1.6; white-space: nowrap;
}
.game-tile.is-selected .tile-tag { border-color: rgba(227, 180, 80, 0.5); }

/* Barra inferior: jugadores y cómo jugar. */
.play-bar {
  margin-top: clamp(18px, 3vw, 30px); padding: 16px 18px; border-radius: 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  background: var(--panel); border: 1px solid var(--linea);
}
.seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seg legend { float: left; margin-right: 6px; font-weight: 650; font-size: 0.9rem; color: var(--crema-suave); }
.seg-opt {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 5px 16px 5px 7px;
  border-radius: 999px; border: 1.5px solid var(--linea); cursor: pointer; font-weight: 650;
  transition: border-color 140ms, background-color 140ms;
}
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt:has(input:checked) { border-color: var(--oro); background: rgba(227, 180, 80, 0.14); }
.seg-opt:has(input:focus-visible) { outline: 3px solid var(--oro); outline-offset: 2px; }
.seg-opt .mode-seats { width: 32px; height: 32px; }
.seg-label { font-size: 1rem; }

.play-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.play-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 22px 10px 16px;
  border-radius: 18px; border: 1.5px solid rgba(241, 230, 204, 0.35); background: transparent; color: var(--crema);
  font: inherit; text-align: left; cursor: pointer;
  transition: transform 100ms var(--ease-out), background-color 140ms, border-color 140ms;
}
.play-btn:active { transform: scale(0.98); }
.play-btn .ico { width: 26px; height: 26px; flex: none; }
.play-btn b { display: block; font-size: 1.05rem; }
.play-btn small { display: block; font-size: 0.8rem; color: var(--crema-suave); }
.play-btn--primary { background: var(--oro); border-color: var(--oro); color: #1d1606; }
.play-btn--primary small { color: rgba(29, 22, 6, 0.72); }
@media (hover: hover) and (pointer: fine) {
  .play-btn--primary:hover { background: var(--oro-claro); }
  .play-btn:not(.play-btn--primary):hover { border-color: var(--crema); background: rgba(241, 230, 204, 0.06); }
  .resume-btn:hover { background: rgba(227, 180, 80, 0.18); }
}

@media (max-width: 760px) {
  .game-tiles { grid-template-columns: 1fr; gap: 10px; }
  .game-tile { flex-direction: row; align-items: stretch; gap: 12px; padding: 8px; border-radius: 18px; }
  .game-art { --acw: 27px; flex: 0 0 126px; align-self: center; height: calc(var(--acw) * 3.1); border-radius: 12px; }
  .tile-check { top: 12px; left: 12px; width: 22px; height: 22px; }
  .tile-check svg { width: 13px; height: 13px; }
  .tile-body { align-content: center; padding: 4px 4px 4px 0; gap: 4px; }
  .tile-line { font-size: 0.86rem; }
  .tile-tag { font-size: 0.7rem; padding: 1px 8px; }
  .game-tile:not(.is-selected) .tile-tags { display: none; }
  .tile-name { font-size: 1.12rem; }
  .seg { gap: 6px; }
  .seg-opt { min-height: 42px; padding: 4px 12px 4px 5px; gap: 5px; }
  .seg-opt .mode-seats { width: 26px; height: 26px; }
  .play-bar { flex-direction: column; align-items: stretch; padding: 14px; }
  .seg { justify-content: center; }
  .seg legend { float: none; width: 100%; text-align: center; margin: 0 0 4px; }
  .play-actions { flex-direction: column; }
  .play-btn { width: 100%; }
}

/* ---------- Texas Hold'em ---------- */

.chips { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chips b { color: #fff; font-weight: 800; letter-spacing: 0.01em; }
.chip-ico { width: 19px; height: 19px; flex: none; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55)); }
/* Montón de fichas: --w y --h son el tamaño de su dibujo (una ficha mide 40 de ancho). */
.chip-stack { flex: none; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.chip-stack--md { width: calc(var(--w) * 0.95px); height: calc(var(--h) * 0.95px); }
.chip-stack--sm { width: calc(var(--w) * 0.55px); height: calc(var(--h) * 0.55px); }
.dealer-btn {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%;
  background: var(--papel); color: #1d1606; font: 800 0.68rem/1 var(--font-ui); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  vertical-align: 2px; flex: none;
}
.seat-tag.is-allin { background: var(--oro); color: #1d1606; }
.seat-tag.is-out { background: rgba(244, 165, 152, 0.16); color: var(--aviso); }

.poker-opps .opp-seat { flex-basis: 150px; max-width: 220px; gap: 4px; }
.poker-seat .seat-name { display: flex; align-items: center; justify-content: center; }
.poker-seat.is-muted { opacity: 0.62; }
.poker-seat.is-winner { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro), 0 0 22px rgba(227, 180, 80, 0.3); }
.poker-hole { display: flex; justify-content: center; align-items: flex-end; min-height: calc(var(--seat-cw) * 1.5); }
.poker-hole .card { --cw: var(--seat-cw); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.poker-hole .card + .card { margin-left: calc(var(--seat-cw) * -0.3); }
.poker-hole.is-shown { min-height: calc(var(--seat-cw) * 2.4); }
.poker-hole.is-shown .card { --cw: calc(var(--seat-cw) * 1.6); }
.poker-hole.is-shown .card + .card { margin-left: 4px; }
.poker-hole.is-folded .card { opacity: 0.35; }
.bet-bubble {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 6px; border-radius: 999px;
  background: rgba(4, 10, 18, 0.78); border: 1.5px solid rgba(227, 180, 80, 0.75);
  color: #fff; font-size: 0.86rem; font-variant-numeric: tabular-nums; line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.bet-bubble b { font-weight: 800; }
.last-move { font-size: 0.78rem; color: var(--oro-claro); font-weight: 600; }
.win-amount { font-weight: 800; color: #8fe0a8; font-variant-numeric: tabular-nums; }

/* Cuenta atrás del turno (en línea): se vacía sola con CSS. */
.turn-clock { display: block; width: 100%; height: 4px; border-radius: 2px; background: rgba(241, 230, 204, 0.15); overflow: hidden; }
.turn-clock span {
  display: block; height: 100%; background: var(--oro); transform-origin: left center;
  animation: turn-clock var(--left) linear forwards;
}
@keyframes turn-clock {
  from { transform: scaleX(var(--frac)); }
  to { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .turn-clock span { animation: none; transform: scaleX(var(--frac)); }
}

.poker-felt {
  display: grid; justify-items: center; gap: 8px; width: min(100%, 560px);
  padding: 12px 18px 14px; border-radius: 120px;
  background: radial-gradient(ellipse at 50% 40%, #2a5582, #1a3b60 70%);
  box-shadow: inset 0 0 0 3px rgba(227, 180, 80, 0.28), inset 0 12px 30px rgba(0, 0, 0, 0.4), 0 8px 26px rgba(0, 0, 0, 0.3);
}
.street-label { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--crema-suave); }
.board-cards { display: flex; gap: 6px; justify-content: center; }
.board-cards .card, .board-cards .slot-empty { --cw: var(--tcw); width: var(--tcw); flex: none; }
.card.is-best { box-shadow: 0 0 0 3px var(--oro), 0 0 18px rgba(227, 180, 80, 0.55); }
.pot-label { display: inline-flex; align-items: flex-end; gap: 10px; margin: 2px 0 0; }
.pot-amount {
  padding: 4px 14px; border-radius: 999px; background: rgba(4, 10, 18, 0.72); border: 1.5px solid rgba(227, 180, 80, 0.6);
  font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pot-amount b { color: var(--oro-claro); font-size: 1.15rem; font-weight: 800; }

.poker-me.is-active { border-top-color: var(--oro); box-shadow: 0 -6px 24px rgba(227, 180, 80, 0.12); }
.poker-me .hand-head { align-items: center; }
.poker-mine { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.poker-hole.is-mine { min-height: 0; gap: 8px; }
.poker-hole.is-mine .card, .poker-hole.is-mine .slot-empty { --cw: calc(var(--hand-cw) * 1.25); width: calc(var(--hand-cw) * 1.25); }
.poker-hole.is-mine .card + .card { margin-left: 0; }
.hand-strength { font-size: 1.02rem; }
.hand-strength b { color: var(--oro-claro); }

.raise-panel { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--oro); background: rgba(227, 180, 80, 0.1); }
.raise-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; font-weight: 650; }
.raise-value { display: inline-flex; align-items: center; gap: 6px; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.raise-value .chip-ico { width: 24px; height: 24px; }
.raise-range { width: 100%; height: 32px; margin: 0; accent-color: var(--oro); }
.raise-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.raise-panel .actions { margin-left: 0; justify-content: flex-end; }

.poker-result { flex: 1 1 260px; }
.poker-result h2 { font-size: 1.15rem; }
.pot-list { margin: 6px 0 0; padding-left: 18px; color: var(--crema-suave); font-size: 0.9rem; }
.auto-next { display: grid; gap: 6px; width: 100%; font-size: 0.85rem; color: var(--crema-suave); }
.poker-me .poker-result { margin-top: 10px; }
.poker-me .poker-result + .actions { margin-top: 10px; }
.poker-cover-list { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 6px; }
.poker-cover-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.poker-final-board { display: grid; justify-items: center; margin-bottom: 18px; }

@media (max-width: 520px) {
  .poker-opps .opp-seat { flex-basis: 104px; padding: 6px 4px; }
  .poker-seat .seat-meta { font-size: 0.74rem; }
  .board-cards { gap: 4px; }
  .poker-felt { padding: 10px 10px 12px; border-radius: 60px; }
}

/* ---------- Blackjack ---------- */

.bj-felt { border-radius: 48px 48px 160px 160px; padding-bottom: 18px; }
.bj-dealer { display: grid; justify-items: center; gap: 6px; }
.bj-dealer-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.bj-dealer-total { font-weight: 700; color: var(--oro-claro); font-variant-numeric: tabular-nums; }
.bj-dealer-rule { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crema-suave); }
.bj-cards { display: flex; justify-content: center; }
.bj-cards .card, .bj-cards .slot-empty { --cw: var(--tcw); width: var(--tcw); flex: none; }
.bj-cards > * + * { margin-left: calc(var(--tcw) * -0.42); }
.bj-seat .bj-cards .card { --cw: calc(var(--seat-cw) * 1.5); width: calc(var(--seat-cw) * 1.5); }
.bj-seat .bj-cards > * + * { margin-left: calc(var(--seat-cw) * -0.75); }
.bj-hand { display: grid; justify-items: center; gap: 4px; padding: 4px 6px; border-radius: 10px; border: 1.5px solid transparent; }
.bj-hand.is-active { border-color: var(--oro); background: rgba(227, 180, 80, 0.08); }
.bj-hand-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; font-size: 0.8rem; }
.bj-total { font-size: 1rem; font-variant-numeric: tabular-nums; }
.bj-outcome { padding: 0 8px; border-radius: 6px; font-weight: 800; font-size: 0.76rem; line-height: 1.6; background: rgba(241, 230, 204, 0.12); }
.bj-outcome.is-win { background: rgba(111, 207, 143, 0.2); color: #8fe0a8; }
.bj-outcome.is-lose { background: rgba(244, 165, 152, 0.16); color: var(--aviso); }
.bj-my-hands { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 8px; }
.bj-hand.is-big { justify-items: start; }
.bj-hand.is-big .bj-cards { justify-content: flex-start; }
.bj-hand.is-big .bj-cards .card { --cw: var(--hand-cw); width: var(--hand-cw); }
.bj-hand.is-big .bj-cards > * + * { margin-left: calc(var(--hand-cw) * -0.55); }
.bj-hand.is-big .bj-hand-meta { justify-content: flex-start; }

/* ---------- Brisca ---------- */

.br-table { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 14px 26px; }
.br-stock { position: relative; display: grid; justify-items: center; gap: 6px; min-width: calc(var(--tcw) * 1.6); }
.br-stock .card { --cw: var(--tcw); width: var(--tcw); }
.br-muestra { position: absolute; top: calc(var(--tcw) * 0.25); left: 50%; transform: translateX(-50%) rotate(90deg); }
.br-pile { position: relative; transform: translateX(calc(var(--tcw) * -0.25)); }
.br-stock:not(:has(.br-pile)) .br-muestra { position: static; transform: rotate(90deg); margin: calc(var(--tcw) * 0.25) 0; }
.br-trick { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.br-slot { display: grid; justify-items: center; gap: 4px; }
.br-slot .card, .br-slot .slot-empty { --cw: var(--tcw); width: var(--tcw); }
.br-slot.is-winner .card { box-shadow: 0 0 0 3px var(--oro), 0 0 24px rgba(227, 180, 80, 0.55); }
.br-who { font-size: 0.78rem; color: var(--crema-suave); max-width: calc(var(--tcw) * 1.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-trick-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; text-align: center; }

/* ---------- Escoba ---------- */

.es-felt { min-width: min(100%, 420px); }
.es-table { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.es-table .card { --cw: var(--tcw); width: var(--tcw); }
.es-empty { color: var(--crema-suave); font-style: italic; padding: 18px; }
.es-option { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; justify-content: flex-start; text-align: left; border-radius: 12px; }
.es-option .card-row .card { --cw: 30px; }
.es-tag { top: auto; bottom: 6%; }
.es-awards { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; color: var(--crema-suave); }

/* ---------- Truco ---------- */

.game-art--truco .is-win { z-index: 1; box-shadow: 0 0 0 2px var(--oro), 0 0 20px rgba(227, 180, 80, 0.65); }
.tr-bazas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
.tr-baza { display: grid; justify-items: center; gap: 6px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--linea); background: rgba(5, 13, 23, 0.3); }
.tr-baza.is-current { border-color: rgba(227, 180, 80, 0.6); }
.tr-baza-title { font-size: 0.76rem; color: var(--crema-suave); }
.tr-baza .br-slot .card, .tr-baza .br-slot .slot-empty { --cw: calc(var(--tcw) * 0.82); width: calc(var(--tcw) * 0.82); }
.tr-envido { font-size: 0.88rem; color: var(--oro-claro); text-align: center; max-width: 60ch; }
.tr-respond { border-top-color: var(--oro); box-shadow: 0 -6px 24px rgba(227, 180, 80, 0.15); }
.tr-answer .btn { min-width: 8.5rem; }

/* ---------- Jugar cartas con dos toques o arrastrando ---------- */

/* La carta elegida enseña encima lo que hará un segundo toque. */
.card-cta {
  position: absolute; left: 50%; bottom: 10%; z-index: 3; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 999px; background: var(--oro); color: #1d1606;
  font: 800 0.72rem/1.35 var(--font-ui); white-space: nowrap; pointer-events: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  animation: cta-in 160ms var(--ease-out);
}
@keyframes cta-in {
  from { opacity: 0; transform: translate(-50%, 6px); }
}
.card-btn.is-selected { z-index: 2; }
/* Las cartas que se pueden arrastrar no desplazan la página al tocarlas. */
.card-btn[data-quick] { touch-action: none; }
.card-btn.is-dragging { transition: none; z-index: 6; }
.card-btn.is-dragging .card { box-shadow: 0 18px 30px rgba(0, 0, 0, 0.55), 0 0 0 3px var(--oro); }
.drop-hint { font-size: 0.8rem; color: var(--crema-suave); }

/* Mano agrupada en combinaciones. */
.hand-groups {
  --overlap: 0.5;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 12px 12px;
  padding: 28px 0 2px;
}
/* En el móvil se solapan más (siempre queda a la vista el índice de cada carta) para caber en una fila. */
@media (max-width: 520px) {
  .hand-groups { --overlap: 0.68; gap: 10px 6px; }
}
/* Carta recién robada o recibida: borde dorado. */
.new-mark {
  position: absolute; inset: 0; border-radius: 7% / 4.667%; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--oro-claro), 0 0 14px rgba(240, 199, 106, 0.55);
}
.hand-group { display: grid; justify-items: center; gap: 4px; }
.hand-group-cards { display: flex; padding-bottom: 5px; border-bottom: 3px solid rgba(241, 230, 204, 0.18); }
.hand-group-cards .card-btn { flex: none; }
.hand-group-cards .card-btn + .card-btn { margin-left: calc(var(--hand-cw) * var(--overlap) * -1); }
.hand-group-label { font-size: 0.72rem; font-weight: 700; padding: 0 8px; border-radius: 6px; line-height: 1.7; color: var(--crema-suave); }
.hand-group--group .hand-group-cards, .hand-group--run .hand-group-cards { border-color: #6fcf8f; }
.hand-group--group .hand-group-label, .hand-group--run .hand-group-label { background: rgba(111, 207, 143, 0.18); color: #8fe0a8; }
.hand-group--pair .hand-group-cards, .hand-group--seq .hand-group-cards { border-color: rgba(227, 180, 80, 0.7); }
.hand-group--pair .hand-group-label, .hand-group--seq .hand-group-label { background: rgba(227, 180, 80, 0.14); color: var(--oro-claro); }
.hand-group--wild .hand-group-cards { border-color: var(--oro); }

/* Opciones compactas para llevarse o ligar cartas (Escoba, Conquián). */
.capture-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-option {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 6px;
  border-radius: 12px; border: 1.5px solid var(--linea); background: rgba(5, 13, 23, 0.4);
  color: var(--crema); font: 650 0.86rem/1.2 var(--font-ui); cursor: pointer;
}
.chip-option.is-primary { border-color: var(--oro); background: rgba(227, 180, 80, 0.16); }
.chip-option .card-row .card { --cw: 26px; }
.chip-option b { color: var(--oro-claro); }
@media (hover: hover) and (pointer: fine) {
  .chip-option:hover { border-color: var(--oro); }
}

/* Botón que se pulsa solo: una barra se llena mientras tanto. */
.btn[data-auto-click] { position: relative; overflow: hidden; }
.btn[data-auto-click]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%;
  background: rgba(29, 22, 6, 0.45); transform-origin: left center;
  animation: auto-click 1600ms linear forwards;
}
@keyframes auto-click {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .btn[data-auto-click]::after { animation: none; }
}

/* Con la etiqueta del segundo toque, se ocultan los distintivos de la carta para no taparse. */
.card-btn:has(.card-cta) .offer-tag, .card-btn:has(.card-cta) .yuca-tag { opacity: 0; }

/* ---------- Controles siempre a mano ---------- */

/*
 * La mano y sus botones (o el panel del resultado) quedan fijos en la parte de abajo de
 * la pantalla: aunque la mesa no quepa, nunca hay que desplazarse para jugar. Si el
 * panel es muy alto (pantallas bajas), se desplaza por dentro.
 */
.table-screen > .hand-area:last-child,
.table-screen > .result-panel:last-child {
  position: sticky; bottom: 0; z-index: 20;
  max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(9, 19, 32, 0.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.35);
}
/* Mientras se arrastra una carta, el panel no la recorta. */
.table-screen > .hand-area.is-dragging-card { overflow: visible; }

/* En las pantallas de resultados, sala y preparación, los botones principales también quedan abajo. */
.screen .over-actions, .screen .sticky-actions {
  position: sticky; bottom: 0; z-index: 10;
  margin-left: -16px; margin-right: -16px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(9, 19, 32, 0.98) 72%, rgba(9, 19, 32, 0));
}
.screen.cover .sticky-actions { position: static; background: none; }

@media (max-width: 520px) {
  /* Barra superior en una sola línea: los datos de la partida se desplazan de lado. */
  .table-screen { gap: 8px; }
  .topbar { flex-wrap: nowrap; gap: 8px; }
  .topbar .game-meta {
    order: 0; width: auto; flex: 1 1 auto; min-width: 0;
    flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: 0.78rem;
  }
  .topbar .game-meta::-webkit-scrollbar { display: none; }
  .topbar-nav { flex: none; gap: 6px; }
  .topbar-nav .btn-small { min-height: 34px; padding: 0.25em 0.75em; font-size: 0.82rem; }
  .trump-chip { padding: 2px 8px 2px 2px; gap: 5px; }
  .trump-chip .card { --cw: 20px; }
  .trump-chip .chip-label { display: none; }
  .trump-chip strong { font-size: 0.9rem; }

  /* Rivales más bajos, varios por fila. */
  .opponents { gap: 6px; }
  .opp-seat { flex: 1 1 96px; padding: 5px 6px; gap: 2px; }
  .opp-seat .seat-name { font-size: 0.9rem; }
  .opp-seat .seat-meta { font-size: 0.72rem; gap: 3px 4px; }
  .seat-tag { font-size: 0.66rem; padding: 0 5px; }
  .poker-opps .opp-seat { flex-basis: 96px; }
  .poker-hole:not(.is-shown):not(.is-mine) { display: none; }
  .poker-seat .last-move { font-size: 0.72rem; }
  .bj-seat .bj-cards .card { --cw: calc(var(--seat-cw) * 1.25); width: calc(var(--seat-cw) * 1.25); }

  /* Mesa: menos márgenes y solo la última jugada. */
  .center-area { gap: 6px; }
  .poker-felt { padding: 8px 10px 10px; gap: 5px; }
  .recent-log li + li { display: none; }
  .tr-bazas { gap: 6px; }
  .tr-baza { padding: 4px 5px; }
  .tr-baza .br-slot .card, .tr-baza .br-slot .slot-empty { --cw: calc(var(--tcw) * 0.66); width: calc(var(--tcw) * 0.66); }
  .tr-baza .br-who { font-size: 0.68rem; max-width: calc(var(--tcw) * 0.9); }
  .br-trick { gap: 5px; }

  /* Mano: título más pequeño y botones más bajos. */
  .hand-area, .result-panel { padding-top: 8px; }
  .hand-head h2 { font-size: 1.02rem; }
  .hand-head .count { font-size: 0.78rem; }
  .hand { padding-top: 16px; row-gap: 10px; }
  .hand-groups { padding-top: 18px; }
  .hint { font-size: 0.86rem; }
  .action-bar { margin-top: 6px; gap: 6px 10px; }
  .actions { gap: 6px; }
  .actions .btn { min-height: 40px; padding: 0.4em 0.9em; }
  .actions .btn-small { min-height: 36px; font-size: 0.84rem; }
}

/* Pantallas bajas (móvil apaisado o con barras del navegador): aún más compacto. */
@media (max-height: 700px) {
  .table-screen { gap: 6px; }
  .recent-log li + li { display: none; }
  .hand-area .hint { font-size: 0.82rem; }
}

/* ---------- Pie del sitio y páginas de cada juego (para buscadores) ---------- */

.site-foot {
  display: grid; justify-items: center; gap: 10px; margin: clamp(28px, 5vw, 44px) 0 8px; padding-top: 18px;
  border-top: 1px solid var(--linea); text-align: center; font-size: 0.86rem; color: var(--crema-suave);
}
.foot-games { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.foot-games a, .crumbs a { color: var(--crema); text-decoration: none; border-bottom: 1px solid rgba(241, 230, 204, 0.3); }
.foot-note { margin: 0; }
/* Apoyo voluntario: un enlace discreto, nunca un aviso. */
.support-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(240, 130, 114, 0.45); color: var(--crema); text-decoration: none; font-weight: 600;
  transition: background-color 140ms, border-color 140ms;
}
.support-ico { width: 16px; height: 16px; fill: #f08272; }
@media (hover: hover) and (pointer: fine) {
  .foot-games a:hover, .crumbs a:hover { color: #fff; border-color: var(--oro); }
  .support-link:hover { background: rgba(240, 130, 114, 0.12); border-color: #f08272; }
}

.seo-page .page { max-width: 960px; }
.seo-page a.brand-mark { color: var(--crema); text-decoration: none; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; font-size: 0.85rem; color: var(--crema-suave); }
.seo-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(18px, 4vw, 40px); align-items: center;
  margin: 10px 0 clamp(24px, 5vw, 44px);
}
.seo-hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-style: italic; letter-spacing: -0.01em; }
.seo-hero .lead { margin: 12px 0 16px; font-size: 1.08rem; }
.seo-hero .game-art { --acw: clamp(44px, 7vw, 64px); }
.seo-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.seo-facts li {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--linea); background: rgba(255, 255, 255, 0.04); font-size: 0.88rem; font-weight: 600;
}
.seo-facts .ico { width: 17px; height: 17px; }
.seo-play { display: inline-flex; text-decoration: none; }
.seo-ways { margin-top: 12px; font-size: 0.9rem; color: var(--crema-suave); }
.seo-section { margin: 0 0 clamp(24px, 4vw, 36px); padding: clamp(16px, 3vw, 24px); border-radius: 18px; background: var(--panel); border: 1px solid var(--linea); }
.seo-section h2 { font-size: clamp(1.35rem, 3.4vw, 1.7rem); margin-bottom: 10px; }
.seo-section h3 { font-size: 1.1rem; margin: 18px 0 6px; }
.seo-section p, .seo-section li { line-height: 1.6; }
.seo-section ul, .seo-section ol { margin: 0; padding-left: 1.25em; }
.seo-section .seo-play { margin-top: 16px; }
.seo-basics li + li { margin-top: 6px; }
.seo-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; padding: 0 !important; list-style: none; }
.seo-games a {
  display: grid; gap: 2px; height: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linea);
  background: rgba(255, 255, 255, 0.03); color: var(--crema); text-decoration: none;
}
.seo-games b { font-family: var(--font-display); font-size: 1.15rem; }
.seo-games span { font-size: 0.85rem; color: var(--crema-suave); }
@media (hover: hover) and (pointer: fine) {
  .seo-games a:hover { border-color: var(--oro); }
}
@media (max-width: 700px) {
  .seo-hero { grid-template-columns: 1fr; }
  .seo-hero .game-art { order: -1; }
  .seo-play { width: 100%; justify-content: center; }
}