:root {
  --felt: #1f5c3f;
  --felt-dark: #174732;
  --felt-light: #2a7350;
  --ink: #f3f1ea;
  --muted: #b9d1c2;
  --paper: #fffdf7;
  --card-ink: #1d1d1f;
  --red: #c4262e;
  --gold: #f2c14e;
  --panel: rgba(0, 0, 0, 0.22);
  --line: rgba(255, 255, 255, 0.16);
  --accent: #f2c14e;
  --accent-ink: #2b2100;
  --radius: 10px;
  --card-w: 54px;
  --card-h: 78px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at top, var(--felt-light), var(--felt) 45%, var(--felt-dark));
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#app { max-width: 980px; margin: 0 auto; padding: 12px 16px 48px; }
h1, h2, h3 { margin: 0 0 8px; line-height: 1.2; }
h1 { font-size: 2rem; }
h2 { font-size: 1.05rem; }
h2 small, .hint, .sub { color: var(--muted); font-weight: normal; }
h2 small { margin-left: 6px; font-size: 0.85rem; }
.hint { font-size: 0.9rem; margin: 6px 0; }

button {
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  min-height: 44px;
}
button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
button.primary:hover:not(:disabled) { background: #ffd36b; }
button.link { background: none; border: none; color: var(--muted); text-decoration: underline; margin-top: 16px; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

input {
  font: inherit;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
  color: var(--ink);
  min-height: 44px;
}

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.lobby { max-width: 440px; margin: 8vh auto 0; display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--muted); }
.join { display: flex; gap: 8px; align-items: flex-end; }
.join .field { flex: 1; }
.or { text-align: center; color: var(--muted); font-size: 0.9rem; }
.code { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.12em; color: var(--gold); }
.share { display: flex; gap: 8px; }
.plist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.plist li { padding: 8px 10px; background: rgba(255, 255, 255, 0.06); border-radius: 8px; }
.conn { color: var(--gold); font-size: 0.9rem; }

.tag { display: inline-block; font-size: 0.72rem; padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); margin-left: 4px; white-space: nowrap; }
.tag.turn { background: var(--gold); color: var(--accent-ink); }
.tag.down { background: #5fb98a; color: #0b2a1a; }
.tag.claim { background: #e98a4c; color: #2a1200; }
.tag.off { background: rgba(0, 0, 0, 0.35); color: var(--muted); }

.bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.bar .right { color: var(--muted); }

.players { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.players li { flex: 1 1 150px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.players li.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.pname { font-weight: 600; overflow-wrap: anywhere; }
.pmeta { font-size: 0.85rem; color: var(--muted); }
.ptags .tag { margin: 2px 4px 0 0; }

.status { background: var(--panel); padding: 10px 12px; border-radius: var(--radius); margin: 0 0 12px; }
.status.mine { background: rgba(242, 193, 78, 0.18); border: 1px solid rgba(242, 193, 78, 0.5); }

section.center { display: flex; align-items: flex-start; justify-content: center; gap: 22px; margin: 6px 0 16px; flex-wrap: wrap; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 0; }
.pile .lbl { font-size: 0.82rem; color: var(--muted); }
.deck .back, .discard .card, .discard .card.empty { width: calc(var(--card-w) * 1.2); height: calc(var(--card-h) * 1.2); }
.deck .back {
  display: block; border-radius: 8px; border: 3px solid var(--paper);
  background: repeating-linear-gradient(45deg, #8c2430 0 6px, #a8323e 6px 12px);
}
.discard { background: none; border: none; padding: 0; min-height: 0; }
.castigo { align-self: center; background: #e98a4c; color: #2a1200; font-weight: 600; border: none; }
.castigo.on { background: rgba(0, 0, 0, 0.3); color: var(--ink); border: 1px solid #e98a4c; }

.card {
  width: var(--card-w); height: var(--card-h);
  background: var(--paper); color: var(--card-ink);
  border-radius: 7px; border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0; min-height: 0; flex-shrink: 0; user-select: none;
}
.card .r { font-size: 1.35rem; font-weight: 700; line-height: 1; }
.card .s { font-size: 1.3rem; line-height: 1.1; }
.card.red { color: var(--red); }
.card.joker { color: #6a3db8; }
.card.joker .s { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.card.empty { background: rgba(0, 0, 0, 0.2); border: 2px dashed var(--line); box-shadow: none; }
.card.small { width: 34px; height: 48px; border-radius: 5px; }
.card.small .r { font-size: 0.9rem; }
.card.small .s { font-size: 0.85rem; }
.card.small.joker .s { font-size: 0.4rem; }
button.card { cursor: pointer; transition: transform 0.1s; }
button.card:hover { background: var(--paper); transform: translateY(-3px); }
.card.sel { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--gold), 0 6px 10px rgba(0, 0, 0, 0.4); }
button.card.sel:hover { transform: translateY(-10px); }
.card.fresh { box-shadow: 0 0 0 2px #5fb98a, 0 1px 3px rgba(0, 0, 0, 0.35); }

.table, .staging, .hand { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.owner + .owner { margin-top: 10px; }
.owner h3 { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.melds { display: flex; flex-wrap: wrap; gap: 8px; }
.meld, .sgroup {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, 0.2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
}
.meld.target { cursor: pointer; border: 2px dashed var(--gold); }
.meld.target:hover { background: rgba(242, 193, 78, 0.15); }
/* Juego con un comodín que se puede cambiar por la carta seleccionada */
.meld.swap { border-color: #b48cff; background: rgba(180, 140, 255, 0.12); }
.meld.swap .card.joker { box-shadow: 0 0 0 2px #b48cff, 0 0 10px rgba(180, 140, 255, 0.8); }
.mtype { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); }
.mcards { display: flex; gap: 2px; flex-wrap: wrap; }
.sgroup { margin: 0 8px 8px 0; }
.sgroup.ok { border-color: #5fb98a; }
.sgroup.bad { border-color: #e06d6d; }
.sgroup.bad .mtype { color: #ffb0b0; }
.sgroup .x { min-height: 32px; padding: 4px 9px; }

.handbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sort { display: flex; gap: 4px; }
.sort button { min-height: 36px; padding: 6px 10px; font-size: 0.85rem; }
.sort button.on { background: rgba(255, 255, 255, 0.25); }
.hand .cards { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.log ol { margin: 8px 0 0; padding-left: 20px; font-size: 0.9rem; color: var(--muted); max-height: 260px; overflow: auto; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin-top: 8px; font-size: 0.92rem; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; }
th:first-child, td:first-child, .left { text-align: left; }
td.left { display: flex; flex-wrap: wrap; gap: 2px; }

.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.modal { max-width: 620px; width: 100%; max-height: 90vh; overflow: auto; background: var(--felt-dark); display: flex; flex-direction: column; gap: 10px; }
.champ { font-size: 1.2rem; color: var(--gold); font-weight: 700; }

#toast {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 30px);
  background: #111; color: #fff; padding: 10px 16px; border-radius: 8px;
  opacity: 0; pointer-events: none; transition: 0.2s; max-width: calc(100% - 32px); z-index: 20;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 520px) {
  :root { --card-w: 46px; --card-h: 66px; }
  #app { padding: 8px 12px 40px; }
  .players li { flex-basis: 130px; }
}

/* ---------- plataforma ---------- */
.brand { margin: 0; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.games { display: grid; gap: 8px; }
.gamepick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.gp-text > span { font-size: 0.9rem; color: var(--muted); }
.gp-text small { font-size: 0.78rem; color: var(--muted); }
.gamepick.on { border: 2px solid var(--gold); background: rgba(242, 193, 78, 0.12); }
.gamepick:disabled { opacity: 1; }
.gamepick:disabled:not(.on) { opacity: 0.55; }
.footer { display: flex; gap: 16px; flex-wrap: wrap; }
button.primary:disabled { background: rgba(255, 255, 255, 0.12); color: var(--muted); }

/* ---------- detalle gráfico ---------- */
/* Mesa de cada juego */
body[data-game="continental"] { --felt: #1f5c3f; --felt-dark: #143d2b; --felt-light: #2d7a54; }
body[data-game="cagastian"] { --felt: #6b1f2a; --felt-dark: #44121a; --felt-light: #8a2d3a; --muted: #e2c3c8; }
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* Cartas completas: índices en las esquinas y centro */
.card { position: relative; background: linear-gradient(160deg, #ffffff, var(--paper) 60%, #f1ece0); }
.card .idx {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  line-height: 0.95; font-size: 0.78rem;
}
.card .idx b { font-weight: 800; }
.card .idx i { font-style: normal; font-size: 0.72rem; }
.card .idx.tl { top: 3px; left: 4px; }
.card .idx.br { bottom: 3px; right: 4px; transform: rotate(180deg); }
.card .pip { font-size: 1.75rem; line-height: 1; }
.card .pip.ace { font-size: 2.3rem; }
.card .face {
  width: 60%; height: 58%; border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1.5px solid currentColor;
  background: linear-gradient(135deg, rgba(242,193,78,0.35), rgba(255,255,255,0) 55%), repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 3px, transparent 3px 6px);
}
.card .face .fl { font: 800 1.25rem/1 Georgia, "Times New Roman", serif; }
.card .face .fs { font-size: 0.9rem; line-height: 1; }
.card.joker .jk { display: flex; flex-direction: column; align-items: center; }
.card.joker .star {
  font-size: 1.7rem; line-height: 1;
  background: conic-gradient(from 0deg, #e63946, #f4a261, #2a9d8f, #6a4c93, #e63946);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card.joker .jt { font-size: 0.42rem; font-weight: 800; letter-spacing: 0.06em; color: #6a3db8; }
.card.joker .idx b { color: #6a3db8; }
.card.small .idx, .card.small .pip, .card.small .face { display: none; }

/* Reverso del mazo */
.deck .back {
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.25) 0 18%, transparent 19%),
    repeating-linear-gradient(45deg, #8c2430 0 5px, #a8323e 5px 10px);
  box-shadow: 2px 2px 0 #e9e4d6, 4px 4px 0 #d8d2c2, 0 6px 10px rgba(0,0,0,0.35);
}
.deck .back::after { content: ""; position: absolute; inset: 5px; border: 1.5px solid rgba(255,255,255,0.6); border-radius: 4px; }

/* Animaciones */
@keyframes deal { from { transform: translateY(-24px) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drop { 0% { transform: translateY(-30px) scale(1.15); opacity: 0; } 70% { transform: translateY(2px) scale(0.98); opacity: 1; } 100% { transform: none; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 1px var(--gold) inset, 0 0 0 0 rgba(242,193,78,0.5); } 50% { box-shadow: 0 0 0 1px var(--gold) inset, 0 0 14px 2px rgba(242,193,78,0.45); } }
.card.fresh { animation: deal 0.35s ease-out; }
.card.drop { animation: drop 0.4s ease-out; }
.players li.active, .rival.active { animation: glow 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .card.fresh, .card.drop, .players li.active, .rival.active { animation: none; }
}

/* Avatares */
.av {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%; margin-right: 6px; vertical-align: middle;
  background: hsl(var(--h), 55%, 42%); color: #fff; font-size: 0.78rem; font-weight: 700;
  border: 2px solid rgba(255,255,255,0.7);
}

/* Elección de juego con abanico de cartas */
.gamepick { flex-direction: row; align-items: center; gap: 14px; }
.gp-text { display: flex; flex-direction: column; gap: 2px; }
.gp-fan { display: flex; padding: 4px 6px 0 0; flex-shrink: 0; }
.gp-fan .card { margin-left: -14px; transform-origin: bottom center; }
.gp-fan .card:first-child { margin-left: 0; transform: rotate(-12deg); }
.gp-fan .card:nth-child(2) { transform: rotate(-4deg); }
.gp-fan .card:nth-child(3) { transform: rotate(4deg); }
.gp-fan .card:nth-child(4) { transform: rotate(12deg); }

/* Cagastian */
.cpiles { display: flex; flex-wrap: wrap; gap: 14px; }
.cpile, .dpile, .stock {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; padding: 4px; min-height: 0; border-radius: 10px; position: relative;
}
.cpile .card, .stock.big .card { width: calc(var(--card-w) * 1.15); height: calc(var(--card-h) * 1.15); }
.cpile .lbl, .dpile .lbl, .stock .lbl { font-size: 0.78rem; color: var(--muted); text-align: center; }
.cpile .lbl em { font-style: normal; color: #ffb38a; }
.cpile .wild { position: absolute; top: -6px; right: -6px; background: #6a3db8; color: #fff; font-size: 0.68rem; padding: 1px 6px; border-radius: 99px; }
.cpile.new .card.empty { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.cpile.target, .dpile.target { outline: 2px dashed var(--gold); outline-offset: 2px; cursor: pointer; }
.cpile.target:hover, .dpile.target:hover { background: rgba(242,193,78,0.15); }
.dpile.picked .card { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--gold), 0 6px 10px rgba(0,0,0,0.4); }
.dpile.stack2 .card { box-shadow: 2px 2px 0 #ddd6c6, 0 1px 3px rgba(0,0,0,0.35); }
.dpile.stack3 .card { box-shadow: 2px 2px 0 #ddd6c6, 4px 4px 0 #c9c1ae, 0 1px 3px rgba(0,0,0,0.35); }
/* Centro y mano en una sola fila que ocupa todo el ancho: las cartas se ajustan */
.cg-center .cpiles, .cg-mine .cards { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 8px; }
.cg-center .cpile { min-width: 0; padding: 4px 0; }
.cg-center .cpile .card, .cg-mine .cards .card { width: 100%; height: auto; aspect-ratio: 54 / 78; justify-self: center; }
.cg-center .cpile .card { max-width: 110px; }
.cg-mine .cards .card { max-width: 100px; }
.rowpiles { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.rowpiles.mine { gap: 20px; margin-bottom: 8px; }
.stock.big .card { box-shadow: 2px 2px 0 #e9e4d6, 4px 4px 0 #d8d2c2, 6px 6px 0 #c9c1ae, 0 6px 10px rgba(0,0,0,0.35); }
.stock.big .lbl { font-size: 0.9rem; color: var(--ink); }
.rivals { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.rival { background: rgba(0,0,0,0.18); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.rival h3 { font-size: 0.95rem; display: flex; align-items: center; }
.owner h3 { display: flex; align-items: center; }
.pile:disabled, .discard:disabled { opacity: 0.8; }
.stock.reserve .card { box-shadow: 0 0 0 2px #b48cff, 0 0 12px rgba(180,140,255,0.6); }
.stock .setaside { min-height: 34px; padding: 4px 10px; font-size: 0.82rem; background: #6a3db8; border-color: transparent; color: #fff; }
.stock.big.reserve { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 180px; }
.stock.big.reserve .lbl { flex-basis: 100%; color: #d9c6ff; }
/* Mazo y descartes (míos y de los demás) repartidos a todo lo ancho */
.rowpiles.fill { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 8px; align-items: start; }
.rowpiles.fill > * { min-width: 0; max-width: none; padding: 4px 0; }
.rowpiles.fill .card { width: 100%; max-width: 100px; height: auto; aspect-ratio: 54 / 78; }
.rowpiles.fill .setaside { width: 100%; white-space: normal; padding: 4px; font-size: 0.72rem; }
.rival .rowpiles.fill { margin-top: 6px; }
/* El mazo se distingue de los descartes: recuadro dorado y cartas apiladas */
.rowpiles.fill .stock { background: rgba(242,193,78,0.12); border: 1px solid rgba(242,193,78,0.55); padding: 6px 4px; }
.rowpiles.fill .stock .card { box-shadow: 2px 2px 0 #e9e4d6, 4px 4px 0 #d8d2c2, 6px 6px 0 #c9c1ae, 0 6px 10px rgba(0,0,0,0.35); width: calc(100% - 6px); }
.rowpiles.fill .stock .lbl { color: var(--gold); font-weight: 700; }
.rowpiles.fill .stock.reserve { background: rgba(180,140,255,0.12); border-color: rgba(180,140,255,0.55); }
.rowpiles.fill .dpile { background: rgba(0,0,0,0.22); padding: 6px 4px; }
.card .jk-emoji { font-size: 1.9rem; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.card.small .jk-emoji { font-size: 1.1rem; }

/* ---------- opciones de la sala ---------- */
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; flex-direction: column; gap: 4px; }
.opt-label { font-size: 0.85rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 36px; padding: 6px 12px; border-radius: 99px; font-size: 0.88rem; }
.chip.on { background: var(--gold); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.chip:disabled { opacity: 1; }
.chip:disabled:not(.on) { opacity: 0.55; }

/* ---------- dominó ---------- */
body[data-game="domino"], body[data-game="domino-progresivo"] { --felt: #6b4426; --felt-dark: #3f2615; --felt-light: #8a5a33; --muted: #e8d2bd; }
body[data-game="domino"]::before, body[data-game="domino-progresivo"]::before {
  background-image: repeating-linear-gradient(92deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 9px), repeating-linear-gradient(88deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 13px);
  background-size: auto;
}

.tile {
  --u: 13px; /* tamaño de una casilla de puntos */
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: linear-gradient(145deg, #fffef8, #efe8d6);
  border: 1px solid rgba(0,0,0,0.35); border-radius: 7px;
  box-shadow: 0 2px 0 #cfc5ad, 0 3px 6px rgba(0,0,0,0.4);
  padding: 3px; gap: 2px; min-height: 0; color: #1d1d1f;
}
.tile.vertical { flex-direction: column; }
.tile .half { display: grid; grid-template-columns: repeat(3, var(--u)); grid-template-rows: repeat(3, var(--u)); }
.tile .half i { display: block; }
.tile .half i.p { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #555, #111 70%); margin: 2px; }
.tile .mid { background: rgba(0,0,0,0.45); border-radius: 1px; }
.tile.horizontal .mid { width: 2px; align-self: stretch; margin: 2px 0; }
.tile.vertical .mid { height: 2px; align-self: stretch; margin: 0 2px; }
.tile.small { --u: 7px; padding: 2px; border-radius: 4px; box-shadow: 0 1px 0 #cfc5ad, 0 2px 3px rgba(0,0,0,0.35); }
.tile.small .half i.p { margin: 1px; }
button.tile { cursor: pointer; transition: transform 0.1s; }
button.tile:hover { background: linear-gradient(145deg, #fffef8, #efe8d6); transform: translateY(-3px); }
.tile.sel { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--gold), 0 6px 10px rgba(0,0,0,0.45); }
button.tile.sel:hover { transform: translateY(-10px); }
.tile.drop { animation: drop 0.4s ease-out; }
.gp-fan .tile { margin-left: -6px; transform: rotate(-8deg); }
.gp-fan .tile:first-child { margin-left: 0; }
.gp-fan .tile:nth-child(2) { transform: rotate(2deg); }
.gp-fan .tile:nth-child(3) { transform: rotate(10deg); }
td.left .tile { margin: 1px; }

.dm-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
@media (max-width: 760px) { .dm-layout { grid-template-columns: minmax(0, 1fr); } }
.dm-table { margin-bottom: 0; }
.dm-info { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; color: var(--muted); }
.dm-info strong { color: var(--ink); }
.dm-info .sum.hit { color: var(--gold); }
.dm-info .sum.hit strong { color: var(--gold); }
/* El tablero se achica para caber a lo ancho (ver fitBoard en el dominó): sin barras de desplazamiento */
.board-scroll { overflow: hidden; padding: 8px 4px 12px; }
.board { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". up ." "left center right" ". down ."; align-items: center; gap: 3px; width: max-content; min-width: 100%; }
.board .row { display: contents; }
.board .arm { display: flex; align-items: center; gap: 3px; }
.board .arm.up, .board .arm.down { flex-direction: column; }
.board .center .tile { box-shadow: 0 0 0 2px rgba(242,193,78,0.6), 0 3px 6px rgba(0,0,0,0.4); }
.dzone {
  min-height: 0; padding: 4px 8px; border: 2px dashed var(--gold); background: rgba(242,193,78,0.18);
  border-radius: 8px; display: flex; flex-direction: column; align-items: center; line-height: 1; color: var(--gold);
  animation: glow 1.6s ease-in-out infinite;
}
.dzone span { font-size: 1.1rem; font-weight: 700; }
.dzone small { font-size: 0.7rem; }
.dm-hand .tiles { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; justify-content: center; }

/* Hoja de anotación con cruces y círculos */
.sheet {
  background: #fbf7ea; color: #1f2a5a; border-radius: 6px; padding: 10px 12px 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  background-image: linear-gradient(#fbf7ea 22px, transparent 22px), repeating-linear-gradient(#fbf7ea 0 21px, #c9d6ef 21px 22px);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}
.sheet-title { font-weight: 700; margin-bottom: 6px; }
.sheet-title small { font-weight: normal; color: #5b6489; font-size: 0.75rem; }
.tcols { display: flex; gap: 10px; }
.tcol { display: flex; flex-direction: column; border-left: 2px solid #d9534f; padding-left: 6px; }
.tcol:first-child { border-left: none; padding-left: 0; }
.tcol.mine .thead .sname { text-decoration: underline; }
.thead { display: flex; flex-direction: column; align-items: center; font-size: 0.78rem; margin-bottom: 4px; max-width: 110px; text-align: center; }
.thead strong { font-size: 1.05rem; }
.trow { display: flex; gap: 2px; border-bottom: 1px solid #b9c4de; }
.tcell { width: 40px; height: 40px; }
.tcell line, .tcell circle { stroke: #1f2a5a; stroke-width: 2.6; fill: none; stroke-linecap: round; }
.tcell .sm { stroke-width: 2; }
.board .arm.left { grid-area: left; justify-content: flex-end; }
.board .arm.right { grid-area: right; justify-content: flex-start; }
.board .arm.up { grid-area: up; justify-content: flex-end; }
.board .arm.down { grid-area: down; justify-content: flex-start; }
.board .center { grid-area: center; display: flex; justify-content: center; }
/* Divisor de la ficha: línea fina con remache al centro, como en una ficha real */
.tile .mid { position: relative; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.55) 12%, rgba(0,0,0,0.55) 88%, transparent); border-radius: 1px; }
.tile.vertical .mid { height: 1.5px; width: 86%; align-self: center; margin: 1px 0; }
.tile.horizontal .mid { width: 1.5px; height: 86%; align-self: center; margin: 0 1px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55) 12%, rgba(0,0,0,0.55) 88%, transparent); }
.tile .mid::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #c9a24a 55%, #7a5a1c);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.4);
}
.tile.small .mid::after { width: 3.5px; height: 3.5px; }
/* Tablero con vueltas: cada ficha se coloca en su casilla */
.board { display: block; position: relative; margin: 0 auto; min-width: 0; }
.board .tile { position: absolute; --u: 6px; padding: 1px; justify-content: center; }
.board .tile.center { box-shadow: 0 0 0 2px rgba(242,193,78,0.7), 0 2px 4px rgba(0,0,0,0.4); }
.board .dzone { position: absolute; padding: 0; justify-content: center; }
.board .dzone span { font-size: 0.85rem; }
.board .dzone small { font-size: 0.6rem; }

/* Cagastian: cartas apartadas y declarar carta cuando todos están tapados */
.cpile.aside .card { opacity: 0.75; transform: rotate(6deg); }
.declare { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.declare button { min-width: 48px; }

/* Pantalla de juego compacta (todos los juegos): que quepa todo sin scroll en pantallas chicas */
.footer.top { justify-content: flex-end; gap: 14px; }
.footer.top button.link { margin: 0; min-height: 28px; padding: 2px 0; font-size: 0.85rem; }
/* Abajo siempre queda el mismo espacio: el de los botones de abajo (reacciones, chat y los de la jugada) */
body[data-game]:not([data-game=""]) #app { padding-top: 4px; padding-bottom: 72px; }
body[data-game]:not([data-game=""]) .bar { padding: 2px 0 6px; margin-bottom: 6px; }
body[data-game]:not([data-game=""]) .status { padding: 6px 10px; margin-bottom: 6px; font-size: 0.88rem; line-height: 1.3; }
body[data-game]:not([data-game=""]) .table, body[data-game]:not([data-game=""]) .hand, body[data-game]:not([data-game=""]) .staging, body[data-game]:not([data-game=""]) section.center { padding: 8px; margin-bottom: 6px; }
body[data-game]:not([data-game=""]) h2 { font-size: 0.95rem; margin-bottom: 4px; }
body[data-game]:not([data-game=""]) .players { gap: 4px; margin-bottom: 6px; }
body[data-game]:not([data-game=""]) .players li { flex: 1 1 120px; padding: 4px 8px; font-size: 0.85rem; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 6px; }
body[data-game]:not([data-game=""]) .ptags .tag { margin: 0 4px 0 0; }
body[data-game]:not([data-game=""]) .handbar { margin-bottom: 2px; }
body[data-game]:not([data-game=""]) .hand .cards { padding-top: 10px; }
body[data-game]:not([data-game=""]) .btns { margin-top: 6px; }
body[data-game]:not([data-game=""]) .btns button { min-height: 38px; padding: 6px 14px; }
body[data-game]:not([data-game=""]) details { padding: 4px 10px; margin-bottom: 6px; }
/* Cagastian */
body[data-game="cagastian"] .rivals { gap: 6px; margin-bottom: 6px; }
body[data-game="cagastian"] .rival { padding: 6px 8px; }
body[data-game="cagastian"] .rival h3 { margin-bottom: 0; flex-wrap: wrap; gap: 2px; }
body[data-game="cagastian"] .rival h3 small { color: var(--muted); font-weight: normal; font-size: 0.8rem; margin-left: 4px; }
body[data-game="cagastian"] .rowpiles.fill { gap: 6px; }
body[data-game="cagastian"] .rowpiles.fill > * { padding: 3px; gap: 2px; }
body[data-game="cagastian"] .rowpiles.mine { margin-bottom: 4px; }
body[data-game="cagastian"] .cg-mine .cards { gap: 6px; }
body[data-game="cagastian"] .cpile, body[data-game="cagastian"] .dpile, body[data-game="cagastian"] .stock { gap: 2px; }
body[data-game="cagastian"] .declare { margin-top: 6px; gap: 6px; }
body[data-game="cagastian"] .declare button { min-width: 38px; min-height: 36px; padding: 4px 8px; }
/* Las cartas se limitan también por la altura de la pantalla, para que quepa todo */
body[data-game="cagastian"] .cg-center .cpile .card, body[data-game="cagastian"] .rowpiles.fill .card { max-width: min(100px, 7vh); }
body[data-game="cagastian"] .cg-mine .cards .card { max-width: min(100px, 8vh); }
/* Continental */
body[data-game="continental"] .center { margin: 2px 0 6px; gap: 16px; }
body[data-game="continental"] .deck .back, body[data-game="continental"] .discard .card, body[data-game="continental"] .discard .card.empty { width: min(calc(var(--card-w) * 1.2), 7vh); height: auto; aspect-ratio: 54 / 78; }
body[data-game="continental"] .staging .hint, body[data-game="continental"] .table .hint { margin: 0; font-size: 0.85rem; }
body[data-game="continental"] .sort button { min-height: 32px; padding: 4px 8px; }
/* Dominó: el tablero y tus fichas juntos; la hoja de anotación a un lado (o abajo en el celular) */
.dm-layout { grid-template-areas: "table sheet" "hand sheet"; grid-template-rows: auto 1fr; }
.dm-layout > .dm-table { grid-area: table; }
.dm-layout > .sheet { grid-area: sheet; }
.dm-layout > .dm-hand { grid-area: hand; margin-bottom: 0; }
@media (max-width: 760px) { .dm-layout { grid-template-areas: "table" "hand" "sheet"; gap: 6px; } }
body[data-game^="domino"] .dm-layout { margin-bottom: 6px; }
body[data-game^="domino"] .board-scroll { padding: 4px 4px 6px; }
body[data-game^="domino"] .dm-info { margin-bottom: 4px; }
body[data-game^="domino"] .dm-hand .tiles { padding-top: 6px; }
/* Tus fichas en una sola fila: en pantallas chicas se achican un poco */
/* Las fichas de la mano mantienen su tamaño; si no caben en una fila, pasan a otra */
body[data-game^="domino"] .dm-hand .tiles { flex-wrap: wrap; gap: 5px; justify-content: center; }
body[data-game^="domino"] .dm-hand .tile { --u: clamp(8px, calc((100vw - 140px) / 21), 13px); padding: 3px; }

/* ---------- Damas ---------- */
body[data-game="damas"] { --felt: #26415f; --felt-dark: #172a40; --felt-light: #355a82; --muted: #c9d6e6; }
.ck-piece {
  display: block; width: 70%; aspect-ratio: 1; border-radius: 50%; position: relative;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35), 0 4px 6px rgba(0,0,0,0.4), inset 0 0 0 3px rgba(0,0,0,0.12), inset 0 -3px 0 rgba(0,0,0,0.15);
}
.ck-piece.light { background: radial-gradient(circle at 35% 30%, #fffaf0, #eadcc0 60%, #cdb98f); }
.ck-piece.dark { background: radial-gradient(circle at 35% 30%, #6a6a6a, #262626 60%, #111); }
.ck-piece::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 2px solid rgba(0,0,0,0.12); }
.ck-piece.dark::after { border-color: rgba(255,255,255,0.12); }
.ck-piece.king::before {
  content: "♛"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.1em; line-height: 1; color: #c8961e; text-shadow: 0 1px 0 rgba(0,0,0,0.4); z-index: 1;
}
.ck-piece.doomed { opacity: 0.4; }
.ck-piece.mini { width: 18px; display: inline-block; vertical-align: middle; margin-right: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ck-piece.mini::after { display: none; }
.gp-fan .ck-piece { width: 30px; margin-left: -8px; }
.gp-fan .ck-piece:first-child { margin-left: 0; }
.gp-fan .ck-piece.king::before { font-size: 18px; }

.ck-layout { display: flex; flex-direction: column; gap: 8px; }
.ck-boardwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Las instrucciones van justo debajo del tablero, del mismo ancho */
.ck-boardwrap .status { width: 0; min-width: 100%; margin: 0; }
.ck-board {
  --side: min(100%, calc(100dvh - 230px), 640px);
  width: var(--side); aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border: 6px solid #5a3a1c; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,0.45); overflow: hidden;
  container-type: inline-size;
}
.ck-sq { display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 0; min-height: 0; font-size: 6cqw; position: relative; }
.ck-sq.light { background: #ecd9b4; }
.ck-sq.dark { background: #7a4a22; }
.ck-sq.trail { box-shadow: inset 0 0 0 100px rgba(242,193,78,0.28); }
button.ck-sq { cursor: pointer; }
button.ck-sq:hover { filter: brightness(1.12); }
.ck-sq.movable .ck-piece { box-shadow: 0 0 0 2px var(--gold), 0 3px 0 rgba(0,0,0,0.35), 0 4px 6px rgba(0,0,0,0.4); }
.ck-sq.picked .ck-piece { box-shadow: 0 0 0 4px var(--gold), 0 6px 10px rgba(0,0,0,0.5); transform: translateY(-3px); }
.ck-sq.target::after { content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(242,193,78,0.75); box-shadow: 0 0 0 3px rgba(0,0,0,0.25); }
.ck-sq.hungry:not(.picked) .ck-piece { box-shadow: 0 0 0 3px #ff8a3d, 0 3px 0 rgba(0,0,0,0.35), 0 4px 6px rgba(0,0,0,0.4); }
.ck-sq.blowable .ck-piece { box-shadow: 0 0 0 4px #e5484d, 0 6px 10px rgba(0,0,0,0.5); animation: blow-pulse 1s ease-in-out infinite alternate; }
@keyframes blow-pulse { to { transform: scale(0.9); opacity: 0.75; } }
.ck-side .players { margin-bottom: 6px; }
.ck-side .players li { align-items: center; }
.ck-side .btns { margin-top: 0; margin-bottom: 6px; align-items: center; }
.ck-side .btns .hint { width: 100%; margin: 0; }

/* ---------- Ajedrez (usa el tablero de Damas) ---------- */
body[data-game="ajedrez"] { --felt: #3b3550; --felt-dark: #221e30; --felt-light: #514a6b; --muted: #d6d1e6; }
.cz-board .ck-sq.light { background: #eedbb5; }
.cz-board .ck-sq.dark { background: #a8794f; }
.cz-piece {
  display: block; font-size: 10.5cqw; line-height: 1; position: relative; z-index: 1;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", "Apple Symbols", serif;
  transition: transform 0.12s;
}
.cz-piece.white { color: #fffaf0; text-shadow: 0 0 1px #000, 0 0 1px #000, 1px 1px 0 #2a1d10, -1px -1px 0 #2a1d10, 1px -1px 0 #2a1d10, -1px 1px 0 #2a1d10, 0 3px 4px rgba(0,0,0,0.45); }
.cz-piece.black { color: #1d1712; text-shadow: 0 0 1px rgba(255,255,255,0.5), 0 3px 4px rgba(0,0,0,0.45); }
.cz-board .ck-sq.movable .cz-piece { filter: drop-shadow(0 0 2px var(--gold)); }
.cz-board .ck-sq.picked { box-shadow: inset 0 0 0 100px rgba(242,193,78,0.45); }
.cz-board .ck-sq.picked .cz-piece { transform: translateY(-3px) scale(1.08); }
.cz-board .ck-sq.target::after { position: absolute; width: 30%; background: rgba(40,30,20,0.35); box-shadow: none; }
.cz-board .ck-sq.target.take::after { inset: 4%; width: auto; background: none; border: 0.9cqw solid rgba(40,30,20,0.4); }
.cz-board .ck-sq.check { background: radial-gradient(circle, #ff5a4a 0%, #d42a1e 45%, transparent 75%), #a8794f; }
.cz-board .ck-sq.light.check { background: radial-gradient(circle, #ff5a4a 0%, #d42a1e 45%, transparent 75%), #eedbb5; }
.cz-coord { position: absolute; font-size: 2.2cqw; font-weight: 700; line-height: 1; opacity: 0.75; }
.cz-coord.file { right: 3px; bottom: 2px; }
.cz-coord.rank { left: 3px; top: 2px; }
.ck-sq.light .cz-coord { color: #a8794f; }
.ck-sq.dark .cz-coord { color: #eedbb5; }
.cz-piece.mini { display: inline-block; font-size: 1.05rem; vertical-align: middle; }
.players .cz-piece.mini { margin-right: 4px; }
.cz-taken { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0; }
.cz-taken .cz-piece.mini { font-size: 0.9rem; margin-right: -3px; }
.cz-promo-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.cz-promo-btns button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; container-type: inline-size; }
.cz-promo-btns .cz-piece { font-size: 2.6rem; }
.cz-promo-btns span:last-child { font-size: 0.8rem; }
.gp-fan .cz-piece { font-size: 34px; margin-left: -6px; }
.gp-fan .cz-piece:first-child { margin-left: 0; }
.gamepick[data-game="ajedrez"] { --g1: #5d5480; --g2: #221e30; }

/* ---------- Pantalla horizontal: dos columnas en todos los juegos ---------- */
@media (orientation: landscape) and (min-width: 640px) {
  body[data-game]:not([data-game=""]) #app { max-width: 1280px; }
  .cg-layout, .ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: start; }
  .ck-layout { flex-direction: row; align-items: flex-start; gap: 12px; }
  .ck-boardwrap { flex: 0 0 auto; }
  .ck-side { flex: 1 1 0; min-width: 0; }
  .ck-board { --side: min(calc(100dvh - 110px), 62vw, 760px); }
  body[data-game="cagastian"] .cg-center .cpile .card, body[data-game="cagastian"] .rowpiles.fill .card { max-width: min(100px, 14vh); }
  body[data-game="cagastian"] .cg-mine .cards .card { max-width: min(100px, 15vh); }
  body[data-game="continental"] .deck .back, body[data-game="continental"] .discard .card, body[data-game="continental"] .discard .card.empty { width: min(calc(var(--card-w) * 1.2), 14vh); }
  /* Dominó: tablero y fichas a la izquierda, hoja de anotación a la derecha */
  .dm-layout { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "table sheet" "hand sheet"; }
}
/* Celular acostado: muy poca altura, todo más apretado */
@media (orientation: landscape) and (max-height: 520px) {
  body[data-game]:not([data-game=""]) .status { font-size: 0.82rem; padding: 4px 8px; }
  body[data-game]:not([data-game=""]) .players li { flex-basis: 100px; padding: 2px 6px; }
  /* Salir / Terminar en la misma línea que el título (sin el código de sala) */
  body[data-game]:not([data-game=""]) #app { position: relative; }
  body[data-game]:not([data-game=""]) .footer.top { position: absolute; top: 4px; right: 16px; z-index: 2; }
  body[data-game]:not([data-game=""]) .bar .right { display: none; }
  body[data-game]:not([data-game=""]) .bar { padding: 4px 0; min-height: 28px; }
  .ck-board { --side: min(calc(100dvh - 92px), 60vw); }
  body[data-game="cagastian"] .cg-center .cpile .card, body[data-game="cagastian"] .rowpiles.fill .card { max-width: min(100px, 12vh); }
  body[data-game="cagastian"] .cg-mine .cards .card { max-width: min(100px, 14vh); }
  body[data-game="cagastian"] .rowpiles.fill .lbl { font-size: 0.72rem; }
  /* Continental: cartas un poco más chicas y encimadas para que la mano quepa a lo ancho */
  body[data-game="continental"] { --card-w: 44px; --card-h: 64px; }
  body[data-game="continental"] .center { gap: 12px; }
  body[data-game^="domino"] .dm-hand .tiles { flex-wrap: wrap; justify-content: center; }
  body[data-game^="domino"] .dm-hand .tile { --u: 8px; }
  body[data-game^="domino"] .dm-hand .handbar { display: none; }
  body[data-game="continental"] .staging .hint { display: none; }
  body[data-game="continental"] .staging .btns, body[data-game="continental"] .hand .btns { margin-top: 4px; }
}

/* Tu mano con las cartas encimadas (Continental y Cagastian) */
body[data-game="continental"] .hand .cards { gap: 0; row-gap: 8px; padding-left: 12px; }
body[data-game="continental"] .hand .cards > .card, body[data-game="continental"] .hand .hand-group > .card { margin-left: -12px; }
/* Mágico: cada grupo va junto, nunca partido en dos líneas */
.hand .cards .hand-group { display: flex; flex-wrap: nowrap; }
body[data-game="cagastian"] .cg-mine .cards { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0; padding-left: 0; }
body[data-game="cagastian"] .cg-mine .cards { --cw: min(17vw, 10vh, 100px); }
body[data-game="cagastian"] .cg-mine .cards .card { flex: 0 1 auto; min-width: 0; width: var(--cw); max-width: none; margin-left: calc(var(--cw) * -0.22); }
body[data-game="cagastian"] .cg-mine .cards .card:first-child { margin-left: 0; }
@media (orientation: landscape) and (min-width: 640px) {
  body[data-game="cagastian"] .cg-mine .cards { --cw: min(10vw, 18vh, 100px); }
}

/* ---------- Botones de la jugada flotando abajo (todos los juegos) ----------
   Cambian según el momento de la jugada; flotan para no mover el resto de la pantalla.
   Solo se ven cuando hay alguno que se pueda usar. */
body[data-game]:not([data-game=""]) .hand .btns {
  position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 15;
  margin: 0; width: max-content; max-width: calc(100% - 24px); justify-content: center; flex-wrap: wrap;
  padding: 6px; border-radius: 14px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
body[data-game]:not([data-game=""]) .hand .btns:not(:has(button:not(:disabled))) { display: none; }
body[data-game]:not([data-game=""]) .hand .btns button { box-shadow: none; }
/* Que lo de hasta abajo no quede tapado, y el aviso salga arriba de los botones */
body:has(.hand .btns button:not(:disabled)) #toast { bottom: 76px; }

/* ---------- Portada ---------- */
.home { max-width: 460px; margin: 0 auto; padding-top: clamp(8px, 4vh, 40px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-hero { position: relative; width: 280px; height: 132px; margin-bottom: 4px; }
.hero-fan { position: absolute; left: 50%; bottom: 8px; width: 0; }
.hero-fan .card {
  position: absolute; bottom: 0; left: -32px; width: 64px; height: 92px; transform-origin: 50% 120%;
  box-shadow: 0 6px 14px rgba(0,0,0,0.45); animation: fan-in 0.7s cubic-bezier(.2,.8,.3,1.2) backwards;
}
.hero-fan .card:nth-child(1) { --r: -24deg; animation-delay: 0.05s; }
.hero-fan .card:nth-child(2) { --r: -8deg; animation-delay: 0.12s; }
.hero-fan .card:nth-child(3) { --r: 8deg; animation-delay: 0.19s; }
.hero-fan .card:nth-child(4) { --r: 24deg; animation-delay: 0.26s; }
.hero-fan .card { transform: rotate(var(--r)); }
@keyframes fan-in { from { transform: rotate(0deg) translateY(16px); opacity: 0; } }
.hero-tile { position: absolute; left: 6px; bottom: 4px; transform: rotate(-16deg); filter: drop-shadow(0 6px 8px rgba(0,0,0,0.45)); animation: bob 5s ease-in-out infinite; }
.hero-tile .tile { --u: 9px; }
.hero-pieces { position: absolute; right: 4px; bottom: 6px; width: 70px; height: 60px; animation: bob 5s ease-in-out 1.2s infinite; }
.hero-pieces .ck-piece { position: absolute; width: 44px; }
.hero-pieces .ck-piece.dark { right: 0; bottom: 0; }
.hero-pieces .ck-piece.light { left: 0; top: 0; z-index: 1; }
.hero-pieces .ck-piece.king::before { font-size: 24px; }
@keyframes bob { 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .hero-fan .card, .hero-tile, .hero-pieces { animation: none; } }

.home-title {
  font: 800 clamp(2.2rem, 9vw, 3rem)/1.05 Georgia, "Times New Roman", serif; letter-spacing: 0.01em; margin: 4px 0 6px;
  background: linear-gradient(180deg, #fff6d6, var(--gold) 55%, #c8901f); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,0.18);
}
.home-sub { margin: 0 0 12px; color: var(--muted); font-size: 1.02rem; max-width: 30ch; }
.home-games { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.home-games li { font-size: 0.8rem; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,0.1); border: 1px solid var(--line); color: var(--ink); }
.home .lobby {
  width: 100%; margin: 0; text-align: left;
  background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(0,0,0,0.25)); backdrop-filter: blur(6px);
  border-color: rgba(242,193,78,0.35); box-shadow: 0 14px 34px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
.home .lobby input { background: rgba(0,0,0,0.3); }
.home .lobby input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.home .lobby #code { text-transform: uppercase; letter-spacing: 0.2em; font-family: ui-monospace, Consolas, monospace; }
.home .lobby button.big { min-height: 52px; font-size: 1.05rem; }
.home .or { display: flex; align-items: center; gap: 10px; }
.home .or::before, .home .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.home-foot { margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); }
@media (orientation: landscape) and (max-height: 520px) {
  .home { max-width: 820px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: center; padding-top: 4px; }
  .home-hero, .home-title, .home-sub, .home-games { grid-column: 1; }
  .home .lobby { grid-column: 2; grid-row: 1 / span 5; }
  .home-foot, .home-kofi { grid-column: 2; }
  .home-hero { height: 110px; transform: scale(0.8); margin: -10px auto -6px; }
}

.home-install { display: block; margin: 14px auto 0; border-radius: 99px; padding: 8px 18px; border: 1px solid var(--gold); background: rgba(242,193,78,0.12); color: var(--ink); font-weight: 700; }

/* ---------- Sala: lista de juegos ---------- */
.lobby.room { max-width: 760px; }
.room h1 { font: 800 2rem/1.1 Georgia, "Times New Roman", serif; }
.room h2 { margin-top: 6px; }
.room button.big { min-height: 52px; font-size: 1.05rem; }
.games { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.gamepick {
  --g1: #2d7a54; --g2: #143d2b;
  position: relative; overflow: hidden; padding: 0; gap: 0; align-items: stretch; min-height: 108px;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.25));
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.gamepick[data-game="cagastian"] { --g1: #8a2d3a; --g2: #44121a; }
.gamepick[data-game^="domino"] { --g1: #8a5a33; --g2: #3f2615; }
.gamepick[data-game="damas"] { --g1: #355a82; --g2: #172a40; }
.gamepick:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.35); background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(0,0,0,0.2)); }
.gp-art {
  flex: 0 0 96px; width: 96px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, var(--g1), var(--g2) 85%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.1), inset 0 0 18px rgba(0,0,0,0.35);
}
.gp-art .gp-fan { padding: 0; transform: scale(0.85); }
.gp-art .gp-fan:has(.tile) { transform: scale(0.62); }
.gp-art .gp-fan:has(.ck-piece) { transform: scale(1.15); }
.gp-text { padding: 10px 12px; justify-content: center; gap: 3px; }
.gp-text strong { font-size: 1.05rem; }
.gp-text > span { line-height: 1.3; }
.gp-players { display: inline-block; white-space: nowrap; align-self: flex-start; margin-top: 2px; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,0.1); }
.gamepick.on { border: 2px solid var(--gold); background: linear-gradient(135deg, rgba(242,193,78,0.2), rgba(0,0,0,0.2)); box-shadow: 0 0 0 3px rgba(242,193,78,0.18), 0 8px 18px rgba(0,0,0,0.35); }
.gp-check { position: absolute; top: 6px; left: 6px; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--gold); color: var(--accent-ink); }
.gamepick:disabled:not(.on) { opacity: 0.6; }
.room .plist li { display: flex; align-items: center; gap: 4px; }
.game-group + .game-group { margin-top: 14px; }
.gg-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold);
}
.gg-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(242,193,78,0.5), transparent); }

/* ---------- Estilos que elige cada jugador (🎨 Estilo) ----------
   Todo se pinta con variables; cada opción solo cambia variables, así la misma
   muestra se ve bien dentro del panel (data-* en el botón) y en el juego (data-* en body). */
.deck .back, .sw-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.25) 0 18%, transparent 19%),
    repeating-linear-gradient(45deg, var(--back-a, #8c2430) 0 5px, var(--back-b, #a8323e) 5px 10px);
  border-color: var(--back-edge, var(--paper));
}
.tile, button.tile:hover { background: linear-gradient(145deg, var(--tile-hi, #fffef8), var(--tile-lo, #efe8d6)); color: var(--pip, #111); }
.tile { box-shadow: 0 2px 0 var(--tile-edge, #cfc5ad), 0 3px 6px rgba(0,0,0,0.4); }
.tile.small { box-shadow: 0 1px 0 var(--tile-edge, #cfc5ad), 0 2px 3px rgba(0,0,0,0.35); }
.tile .half i.p { background: radial-gradient(circle at 35% 35%, var(--pip-hi, #555), var(--pc, var(--pip, #111)) 70%); }
.tile .half.n1 { --pc: var(--pip-1); } .tile .half.n2 { --pc: var(--pip-2); } .tile .half.n3 { --pc: var(--pip-3); }
.tile .half.n4 { --pc: var(--pip-4); } .tile .half.n5 { --pc: var(--pip-5); } .tile .half.n6 { --pc: var(--pip-6); }
.tile.vertical .mid { background: linear-gradient(90deg, transparent, var(--tile-line, rgba(0,0,0,0.55)) 12%, var(--tile-line, rgba(0,0,0,0.55)) 88%, transparent); }
.tile.horizontal .mid { background: linear-gradient(180deg, transparent, var(--tile-line, rgba(0,0,0,0.55)) 12%, var(--tile-line, rgba(0,0,0,0.55)) 88%, transparent); }
.ck-piece.light { background: radial-gradient(circle at 35% 30%, var(--pl-hi, #fffaf0), var(--pl, #eadcc0) 60%, var(--pl-lo, #cdb98f)); }
.ck-piece.dark { background: radial-gradient(circle at 35% 30%, var(--pd-hi, #6a6a6a), var(--pd, #262626) 60%, var(--pd-lo, #111)); }
.ck-board { border-color: var(--frame, #5a3a1c); }
.ck-sq.light { background: var(--sq-light, #ecd9b4); }
.ck-sq.dark { background: var(--sq-dark, #7a4a22); }
.cz-board .ck-sq.light { background: var(--sq-light, #eedbb5); }
.cz-board .ck-sq.dark { background: var(--sq-dark, #a8794f); }
.cz-board .ck-sq.check { background: radial-gradient(circle, #ff5a4a 0%, #d42a1e 45%, transparent 75%), var(--sq-dark, #a8794f); }
.cz-board .ck-sq.light.check { background: radial-gradient(circle, #ff5a4a 0%, #d42a1e 45%, transparent 75%), var(--sq-light, #eedbb5); }
.ck-sq.light .cz-coord { color: var(--sq-dark, #a8794f); }
.ck-sq.dark .cz-coord { color: var(--sq-light, #eedbb5); }

/* Cada opción parte de los valores normales, para que su muestra no herede el estilo elegido */
[data-deck] { --back-a: #8c2430; --back-b: #a8323e; --back-edge: initial; }
[data-tiles] { --tile-hi: #fffef8; --tile-lo: #efe8d6; --tile-edge: #cfc5ad; --pip: #111; --pip-hi: #555; --tile-line: rgba(0,0,0,0.55); --pip-1: initial; --pip-2: initial; --pip-3: initial; --pip-4: initial; --pip-5: initial; --pip-6: initial; }
[data-pieces] { --pl-hi: #fffaf0; --pl: #eadcc0; --pl-lo: #cdb98f; --pd-hi: #6a6a6a; --pd: #262626; --pd-lo: #111; }
[data-board] { --sq-light: initial; --sq-dark: initial; --frame: #5a3a1c; }
/* Barajas */
[data-deck="azul"] { --back-a: #1f4e8c; --back-b: #2b62a8; }
[data-deck="verde"] { --back-a: #1b6b45; --back-b: #23855a; }
[data-deck="morada"] { --back-a: #4f2a85; --back-b: #64379f; }
[data-deck="negra"] { --back-a: #15161b; --back-b: #2a2c35; --back-edge: #c9a24a; }
/* Fichas de dominó */
[data-tiles="colores"] { --pip-1: #2a7de1; --pip-2: #1f9d55; --pip-3: #d63031; --pip-4: #e17b0c; --pip-5: #8e44ad; --pip-6: #0d8a8a; --pip-hi: #888; }
[data-tiles="negro"] { --tile-hi: #3b3c42; --tile-lo: #141518; --tile-edge: #000; --pip: #f5f2e8; --pip-hi: #ffffff; --tile-line: rgba(255,255,255,0.5); }
[data-tiles="madera"] { --tile-hi: #dcae76; --tile-lo: #a9713f; --tile-edge: #6e4220; --pip: #2a1608; --pip-hi: #6b4a2e; }
[data-tiles="azul"] { --tile-hi: #3a7dc9; --tile-lo: #1d4a82; --tile-edge: #12304f; --pip: #ffffff; --pip-hi: #ffffff; --tile-line: rgba(255,255,255,0.55); }
/* Fichas de damas */
[data-pieces="rojas"] { --pl-hi: #ff8a80; --pl: #d32f2f; --pl-lo: #8e1b1b; }
[data-pieces="madera"] { --pl-hi: #fbe3b8; --pl: #e2b77a; --pl-lo: #b5844a; --pd-hi: #a9713f; --pd: #6e4220; --pd-lo: #3d220e; }
[data-pieces="azules"] { --pd-hi: #6fa8ff; --pd: #1f5fbf; --pd-lo: #0e2f66; }
/* Tableros */
[data-board="verde"] { --sq-light: #eeeed2; --sq-dark: #769656; --frame: #4b6a35; }
[data-board="azul"] { --sq-light: #dee3e6; --sq-dark: #6f8fa8; --frame: #3d556b; }
[data-board="marmol"] { --sq-light: #ececec; --sq-dark: #8f8f8f; --frame: #4a4a4a; }

/* Panel de estilo */
.style-panel h3 { margin: 4px 0 0; font-size: 0.85rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; }
.sw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.06); }
.sw.on { border: 2px solid var(--gold); background: rgba(242,193,78,0.14); }
.sw-art { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 52px; }
.sw-art .card.small { width: 26px; height: 38px; }
.sw-back { position: relative; display: inline-block; width: 34px; height: 50px; border-radius: 5px; border: 2px solid var(--back-edge, var(--paper)); box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.sw-art .tile.small { --u: 7px; }
.sw-art .ck-piece { width: 26px; }
.sw-art .ck-piece.king::before { font-size: 14px; }
.sw-board { display: grid; grid-template-columns: repeat(2, 22px); grid-template-rows: repeat(2, 22px); border: 3px solid var(--frame, #5a3a1c); border-radius: 3px; }
.sw-board .ck-sq { font-size: 0; }
.sw-name { font-size: 0.82rem; }
.sw-back::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,0.6); border-radius: 3px; }

/* ---------- Cartas realistas: todos los palos (2 al 10) y retratos (J, Q, K) ----------
   Solo en cartas grandes; en las chicas se queda un palo o la letra. */
.card { container-type: inline-size; }
.card .pips, .card .court { display: none; }
.card .pips { position: absolute; inset: 0; }
.card .pips i { position: absolute; transform: translate(-50%, -50%); font-style: normal; font-size: 21cqw; line-height: 1; }
.card .pips i.flip { transform: translate(-50%, -50%) rotate(180deg); }
.card .court { position: absolute; left: 17%; right: 17%; top: 12%; bottom: 12%; width: 66%; height: 76%; }
/* El bufón del comodín va sin marco y llena casi toda la carta */
.card .court.jester { left: 4%; right: 4%; top: 9%; bottom: 3%; width: 92%; height: 88%; }
@container (min-width: 40px) {
  .card .pips, .card .court { display: block; }
  .card .pip:not(.ace), .card .face, .card.joker .jk { display: none; }
}

/* ---------- Sala: el juego elegido trae sus opciones y el botón para empezar ---------- */
.gp-card { display: flex; flex-direction: column; min-width: 0; }
.gp-card .gamepick { width: 100%; }
.gp-card.on {
  grid-column: 1 / -1; border: 2px solid var(--gold); border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, rgba(242,193,78,0.16), rgba(0,0,0,0.2));
  box-shadow: 0 0 0 3px rgba(242,193,78,0.18), 0 8px 18px rgba(0,0,0,0.35);
}
.gp-card.on .gamepick { border: none; border-radius: 0; box-shadow: none; background: none; transform: none; }
.gp-extra { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 12px; }
.gp-extra .opts { margin: 0; }
.gp-extra button.big { width: 100%; margin: 0; }
.gp-extra .hint { margin: 0; }
.gp-extra .gp-sub { margin: 4px 0 0; font-size: 0.95rem; }
.gp-extra .plist { margin: 0; }
.gp-extra .share-btn { align-self: flex-start; border-radius: 99px; padding: 8px 16px; font-weight: 700; }

/* ---------- Reglas, sonido, reacciones, revancha y computadora ---------- */
.rules-panel ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.4; }
.gp-extra .rules-link { align-self: flex-start; padding: 0; }
.plist li .x { margin-left: auto; min-height: 0; padding: 2px 8px; }
.tag.win { background: rgba(242,193,78,0.25); color: var(--gold); }
.wins { margin: 0; font-size: 0.9rem; }
.wins b { color: var(--gold); }
/* Revancha: barra arriba del aviso de fin de partida */
.rematch-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 12; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 14px; background: var(--felt-dark); border: 1px solid var(--gold); box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
.rematch-bar .hint { margin: 0; }
/* Botón de donaciones (Ko-fi) */
.kofi { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 99px; background: #ff5e5b; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.kofi:hover { filter: brightness(1.08); }
.home-kofi { margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
/* Reacciones */
.react-btn { position: fixed; left: 12px; bottom: 12px; z-index: 9; width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.4rem; box-shadow: 0 4px 12px rgba(0,0,0,0.45); }
.react-pal { position: fixed; left: 12px; bottom: 66px; z-index: 9; display: flex; flex-wrap: wrap; gap: 6px; max-width: min(320px, calc(100% - 24px)); padding: 8px; border-radius: 14px; background: var(--felt-dark); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
.react-pal button { min-height: 0; padding: 6px 10px; border-radius: 99px; font-size: 0.9rem; }
.reaction { position: fixed; bottom: 80px; z-index: 30; padding: 6px 12px; border-radius: 99px; background: rgba(0,0,0,0.75); color: #fff; font-size: 1rem; pointer-events: none; white-space: nowrap; animation: float-up 3.2s ease-out forwards; }
.reaction b { color: var(--gold); font-weight: 700; }
.reaction.mine b { color: #9fe3b8; }
@keyframes float-up { 0% { transform: translateY(20px) scale(0.8); opacity: 0; } 10% { transform: translateY(0) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-160px); opacity: 0; } }
/* Grupo de la bajada al que se pueden sumar las cartas seleccionadas */
.sgroup.target { cursor: pointer; border: 2px dashed var(--gold); }
.sgroup.target:hover { background: rgba(242, 193, 78, 0.15); }
/* Comodín en carta chica: bufón dibujado en vez del emoji */
.card.small .jk-mini { width: 92%; height: 92%; }
.gp-fan .card .jk-mini, .hero-fan .card .jk-mini { width: 92%; height: 92%; }
.card.joker .jk .jk-mini { width: 80%; height: auto; max-height: 80%; }
.card.joker .jk { width: 100%; height: 100%; justify-content: center; }
/* Carita de robot de los jugadores computadora */
.av.robot { background: radial-gradient(circle at 50% 40%, #3a3f47, #15181c); padding: 1px; }
.av.robot svg { width: 100%; height: 100%; }
/* Selector de robot al agregar una computadora */
.bot-dd { align-self: flex-start; border: 0; background: none; padding: 0; margin: 0; }
.bot-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.25); font-weight: 600; }
.bot-dd > summary::-webkit-details-marker { display: none; }
.bot-dd > summary::after { content: "▾"; opacity: 0.8; }
.bot-dd[open] > summary::after { content: "▴"; }
/* Flota encima de lo demás (core.js lo coloca junto al botón, abajo o arriba según quepa) */
.bot-menu { position: fixed; z-index: 50; min-width: 220px; max-height: 300px; overflow-y: auto; padding: 4px; border-radius: 10px; background: #1f2a24; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 10px 24px rgba(0,0,0,0.5); }
.bot-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bot-menu button:hover, .bot-menu button:focus-visible { background: rgba(255,255,255,0.12); }
.bot-menu .av { width: 30px; height: 30px; margin-right: 0; }
/* Paleta de reacciones: emojis en botones redondos, frases abajo */
.react-pal { max-width: min(340px, calc(100% - 24px)); max-height: 60vh; overflow-y: auto; }
.react-pal button.emoji { width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 1.3rem; line-height: 1; }
.react-pal button.phrase { order: 1; }
/* Acomodo mágico: espacio entre los grupos de la mano */
.hand .cards .hand-gap { flex: 0 0 20px; }

/* ---------- Chat de la sala ---------- */
#chat[hidden] { display: none; }
.chat-btn { position: fixed; right: 12px; bottom: 12px; z-index: 20; width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.35rem; box-shadow: 0 4px 12px rgba(0,0,0,0.45); }
.chat-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #e5484d; color: #fff; font-size: 0.72rem; line-height: 20px; }
.chat-panel { position: fixed; right: 12px; bottom: 66px; z-index: 20; width: min(340px, calc(100% - 24px)); max-height: min(60vh, 460px); display: flex; flex-direction: column; border-radius: 14px; background: var(--felt-dark); border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(0,0,0,0.55); overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-panel header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.chat-panel .chat-close { padding: 0 4px; min-height: 0; }
.chat-list { list-style: none; margin: 0; padding: 8px 12px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.chat-list li { padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,0.08); line-height: 1.3; overflow-wrap: anywhere; align-self: flex-start; max-width: 90%; }
.chat-list li b { display: block; font-size: 0.75rem; color: var(--gold); }
.chat-list li.mine { align-self: flex-end; background: rgba(242,193,78,0.18); }
.chat-list li.mine b { color: #9fe3b8; }
.chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.chat-input { flex: 1; min-width: 0; }
/* Cagastian: carta declarada que todavía no cabe (se puede jugar en ese turno) */
.cpile.declared .card { box-shadow: 0 0 0 2px #b48cff, 0 0 12px rgba(180,140,255,0.6); }
.cpile.declared .lbl { color: #d9c6ff; }
/* Continental: flechas para poner el comodín al principio o al final de la corrida */
.meld .end-btn { min-height: 0; align-self: stretch; padding: 0 8px; border-radius: 8px; font-size: 1rem; background: rgba(242,193,78,0.25); border: 1px solid var(--gold); color: var(--ink); }
/* Nada se puede salir por los lados: la pantalla nunca se desplaza hacia la derecha */
html, body { max-width: 100%; overflow-x: clip; }
/* Dominó: la primera mula, que se juega por los 4 lados, brilla en dorado */
.board .tile.spinner { box-shadow: 0 0 0 2px var(--gold), 0 0 12px 3px rgba(242,193,78,0.75), 0 2px 4px rgba(0,0,0,0.4); }
/* Damas: la última ficha movida (aro naranja), de dónde salió y la animación del movimiento */
.ck-sq.last-to:not(.picked) .ck-piece { box-shadow: 0 0 0 3px #ff9d2e, 0 0 10px rgba(255,157,46,0.7), 0 3px 0 rgba(0,0,0,0.35); }
.ck-sq.last-from { outline: 2px dashed rgba(255,157,46,0.85); outline-offset: -4px; }
.ck-sq.moving { z-index: 5; }
.ck-piece.ghost { position: absolute; pointer-events: none; }
/* Damas: la ficha que se perdió por boba (aro rojo con ✕, y la casilla queda marcada) */
.ck-piece.ghost.lost { z-index: 6; box-shadow: 0 0 0 4px #e5484d, 0 0 16px 4px rgba(229,72,77,0.8); animation: lost-mark 9s ease-out both; }
@keyframes lost-mark { 0% { opacity: 0; transform: scale(1.3); } 4% { opacity: 1; transform: scale(1); } 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.5); } }
@media (prefers-reduced-motion: reduce) { .ck-piece.ghost.lost { animation: none; } }
.ck-piece.ghost.lost::before { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: #e5484d; font-weight: 900; font-size: min(7vw, 34px); text-shadow: 0 0 3px #fff; }
.ck-sq.lost-at { box-shadow: inset 0 0 0 3px rgba(229,72,77,0.85); }
/* El salto que tenía que hacer: de dónde salía, la ficha que se comía y a dónde caía */
.ck-sq.miss-from { outline: 3px dashed #e5484d; outline-offset: -5px; }
.ck-sq.miss-cap .ck-piece { box-shadow: 0 0 0 3px #e5484d, 0 3px 0 rgba(0,0,0,0.35); }
.ck-sq.miss-to::after {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  border: 3px dashed #e5484d; background: rgba(229,72,77,0.25); animation: miss-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes miss-pulse { to { transform: scale(0.8); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .ck-sq.miss-to::after { animation: none; } }
/* Damas: letrero grande en el centro cuando se pierde una ficha por boba */
.boba-alert {
  position: fixed; left: 50%; top: 45%; z-index: 40; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  width: min(340px, calc(100% - 40px)); padding: 18px 20px; border-radius: 18px;
  background: rgba(20, 10, 10, 0.92); border: 2px solid #e5484d; color: #fff;
  box-shadow: 0 0 0 6px rgba(229, 72, 77, 0.25), 0 16px 40px rgba(0, 0, 0, 0.6);
  pointer-events: none; opacity: 0;
  animation: boba-in 0.7s ease-out 0.6s forwards, boba-out 0.9s ease-in 4.6s forwards;
}
.boba-alert .boba-icon { font-size: 2.6rem; line-height: 1; }
.boba-alert strong { font-size: 1.5rem; color: #ff8a8d; letter-spacing: 0.02em; }
.boba-alert .boba-text { font-size: 1rem; line-height: 1.35; }
@keyframes boba-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes boba-out { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } }
@media (prefers-reduced-motion: reduce) { .boba-alert { animation: none; opacity: 1; } }
/* Dominó: fichas que llegan a la mano al robar */
.tile.fresh { animation: deal 0.35s ease-out; }
/* Ajedrez: pieza que se desliza y la comida que se desvanece */
.cz-piece.ghost { position: absolute; pointer-events: none; }
/* Confeti al terminar la partida */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 45; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; opacity: 0.95; animation: confetti-fall 3s cubic-bezier(.3,.6,.6,1) forwards; }
@keyframes confetti-fall { to { transform: translate(var(--drift), 110vh) rotate(var(--spin)); opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) { .tile.fresh { animation: none; } .confetti { display: none; } }
/* Continental: pregunta de si te castigas con la carta inicial */
.castigo-ask { display: flex; flex-direction: column; gap: 6px; }
/* Nivel de cada computadora (depende del robot) */
.bot-level { margin: 6px 8px 2px; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; display: inline-block; }
.tag.lvl-facil { background: rgba(122, 199, 79, 0.3); }
.tag.lvl-normal { background: rgba(78, 168, 222, 0.3); }
.tag.lvl-dificil { background: rgba(228, 87, 46, 0.35); }
/* Dominó: en tu turno se enmarcan las fichas de tu mano que pegan en alguna punta */
.dm-hand .tile.playable:not(.sel) { box-shadow: 0 0 0 3px var(--gold), 0 0 10px 2px rgba(242,193,78,0.55), 0 3px 6px rgba(0,0,0,0.4); }

/* Barra de arriba: solo iconos, en una sola línea */
.footer.top { flex-wrap: nowrap; gap: 4px; }
.footer.top button.link.icon { min-width: 36px; min-height: 34px; padding: 2px 6px; font-size: 1.15rem; line-height: 1; text-decoration: none; border-radius: 8px; }
.footer.top button.link.icon:hover { background: rgba(255,255,255,0.12); }

/* Botones de la jugada con iconos: chicos y cuadrados */
body[data-game]:not([data-game=""]) .btns button.ibtn { min-width: 48px; min-height: 42px; padding: 4px 12px; font-size: 1.3rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.btns button.ibtn small { font-size: 0.8rem; font-weight: 700; }
.sort button { min-width: 40px; }

/* Cagastian: tus descartes chicos y tu mazo grande, sin marco, para que se distingan */
body[data-game="cagastian"] .rowpiles.mine.fill { display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: center; gap: 5px; }
body[data-game="cagastian"] .rowpiles.mine.fill > * { flex: 0 0 auto; }
body[data-game="cagastian"] .rowpiles.mine.fill .stock { background: none; border: none; padding: 0 8px 0 0; }
body[data-game="cagastian"] .rowpiles.mine.fill .stock .card { width: min(18vw, 10.5vh, 80px); max-width: none; }
body[data-game="cagastian"] .rowpiles.mine.fill .dpile { flex: 1 1 0; max-width: 72px; }
body[data-game="cagastian"] .rowpiles.mine.fill .dpile .card { width: 100%; max-width: min(62px, 9vh); }
body[data-game="cagastian"] .rowpiles.mine.fill .dpile { padding: 4px 3px; border-radius: 8px; }
body[data-game="cagastian"] .rowpiles.mine.fill .setaside { width: auto; font-size: 1.1rem; padding: 2px 8px; }
body[data-game="cagastian"] .cg-mine .handbar { margin-bottom: 2px; }

/* Instrucciones de tu jugada: flotan abajo (arriba de los botones de la jugada) y se pueden cerrar */
body[data-game]:not([data-game=""]) .status.floating {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 54px); z-index: 14;
  width: max-content; max-width: min(560px, calc(100% - 24px)); margin: 0; padding: 8px 38px 8px 12px;
  background: rgba(16, 16, 16, 0.88); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px);
}
body[data-game]:not([data-game=""]) .status.floating.mine { background: rgba(72, 56, 14, 0.94); border-color: rgba(242, 193, 78, 0.7); }
body:has(.hand .btns button:not(:disabled)) .status.floating { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 112px); }
.status.floating.closed { display: none; }
.status-x { position: absolute; top: 3px; right: 3px; width: 30px; height: 30px; min-height: 0; padding: 0; font-size: 0.95rem; line-height: 1; background: none; border: none; box-shadow: none; color: inherit; opacity: 0.85; }
.status-x:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
/* Que lo de hasta abajo no quede tapado, y los avisos salgan arriba de las instrucciones */
/* (las instrucciones flotan encima de lo de abajo; no cambian dónde termina la pantalla) */
body:has(.status.floating:not(.closed)) #toast { bottom: 200px; }

/* Historial: icono arriba y panel flotante (ya no al final de la pantalla) */
body[data-game]:not([data-game=""]) #app details.log { display: none; }
.footer.top button.link.icon.on { background: rgba(255, 255, 255, 0.18); }
.log-panel {
  position: fixed; top: 48px; right: 12px; z-index: 25; width: min(360px, calc(100% - 24px)); max-height: min(60vh, 480px);
  display: flex; flex-direction: column; border-radius: 14px; background: var(--felt-dark); border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55); overflow: hidden;
}
.log-panel .log-head { position: relative; padding: 10px 40px 8px 12px; border-bottom: 1px solid var(--line); }
.log-panel ol { margin: 0; padding: 8px 12px 10px 30px; overflow-y: auto; font-size: 0.88rem; line-height: 1.4; }
.log-panel li { margin-bottom: 4px; }

/* Resultados: quién falta por verlos */
.ready-wait { margin: 6px 0; color: var(--gold); font-weight: 600; }
/* Las reacciones se pueden mandar también con el panel de resultados abierto */
.react-btn, .react-pal { z-index: 13; }
.reaction { z-index: 31; }

/* Continental: los botones de tu bajada van en la línea del título, a la derecha */
.staging .handbar { flex-wrap: nowrap; align-items: flex-start; }
body[data-game]:not([data-game=""]) .staging .btns.stage-btns { margin: 0; flex-wrap: nowrap; flex: 0 0 auto; gap: 6px; }
/* del mismo tamaño que los de ordenar tu mano */
body[data-game]:not([data-game=""]) .staging .btns.stage-btns button.ibtn { min-height: 32px; min-width: 40px; padding: 4px 8px; font-size: 0.85rem; }

/* Reacciones tuyas: abajo de las fijas */
.react-pal .react-mine { order: 2; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--line); }
.react-pal .react-head { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.react-pal .react-title { font-size: 0.75rem; color: var(--muted); }
.react-pal .react-tools { display: flex; gap: 6px; }
.react-pal .react-mine button.phrase { order: 0; } /* las tuyas van en orden de uso, emojis y frases juntas */
.react-pal .react-add { width: 44px; height: 28px; min-height: 0; padding: 0; border-radius: 8px; font-size: 0.9rem; line-height: 1; background: rgba(255,255,255,0.08); border: 1px solid var(--line); }
.react-pal button.del { position: relative; outline: 1px dashed #e5484d; }
.react-pal button.del span { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #e5484d; color: #fff; font-size: 0.65rem; line-height: 18px; text-align: center; }
/* Botones de reacciones y chat: fondo sólido (del color de la mesa) para que se vean bien encima del juego */
.react-btn, .chat-btn { background: var(--felt-dark); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6); }
.react-btn:hover, .chat-btn:hover { background: var(--felt-dark); filter: brightness(1.25); }

/* El código de la sala va en la línea de los iconos de arriba, a la izquierda */
.footer.top { align-items: center; }
.footer.top .room-code { margin-right: auto; color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
@media (orientation: landscape) and (max-height: 520px) { .footer.top .room-code { display: none; } }

/* Avatar escogido por el jugador (un emoji) y el selector en la sala de espera */
.av.emoji { background: rgba(255, 255, 255, 0.15); font-size: 0.95rem; font-weight: 400; line-height: 1; }
.av-pick { position: relative; display: inline-flex; padding: 0; min-height: 0; margin-right: 6px; background: none; border: none; box-shadow: none; vertical-align: middle; }
.av-pick .av { margin-right: 0; width: 30px; height: 30px; font-size: 1rem; }
.av-pick .av.emoji { font-size: 1.15rem; }
.av-pick .av-edit { position: absolute; right: -6px; bottom: -4px; font-size: 0.6rem; }
.avatar-pick { margin: 8px 0 12px; padding: 10px; border-radius: 12px; background: var(--felt-dark); border: 1px solid var(--line); }
.avatar-pick .hint { margin: 0 0 8px; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.avatar-grid button { min-height: 0; height: 42px; padding: 0; font-size: 1.4rem; line-height: 1; border-radius: 10px; }
.avatar-grid button.letter { font-size: 0.95rem; font-weight: 700; }

/* J, Q y K: la esquina (número y palo) va encima del retrato, y el retrato un poco más adentro */
.card .idx { z-index: 2; }
.card .court:not(.jester) { left: 20%; right: 20%; width: 60%; top: 13%; bottom: 13%; height: 74%; }
/* Continental: las cartas de la mesa más grandes */
body[data-game="continental"] .table .mcards .card.small { width: 40px; height: 56px; border-radius: 6px; }
body[data-game="continental"] .table .mcards .card.small .r { font-size: 1.1rem; }
body[data-game="continental"] .table .mcards .card.small .s { font-size: 1.05rem; }
/* La carta que eliges de tu mano se ve más grande (y encima de las de al lado) para ver bien su palo */
.hand .cards .card.sel, .cg-mine .cards .card.sel { position: relative; z-index: 3; transform: translateY(-14px) scale(1.3); transform-origin: 50% 100%; border-radius: 4px; }

/* Cagastian: el centro en cruz, con el mazo para robar en medio */
body[data-game="cagastian"] .cg-cross {
  --xw: min(15vw, 7.5vh, 66px); --xh: calc(var(--xw) * 78 / 54);
  display: grid; justify-content: center; align-items: center; justify-items: center; gap: 4px;
  grid-template-columns: var(--xh) var(--xh) var(--xh); grid-template-rows: var(--xh) var(--xw) var(--xh);
  grid-template-areas: "c0 top c1" "left deck right" "c3 bottom c2";
}
body[data-game="cagastian"] .cg-cross .x-0 { grid-area: top; }
body[data-game="cagastian"] .cg-cross .x-1 { grid-area: right; }
body[data-game="cagastian"] .cg-cross .x-2 { grid-area: bottom; }
body[data-game="cagastian"] .cg-cross .x-3 { grid-area: left; }
body[data-game="cagastian"] .cg-cross .x-deck { grid-area: deck; }
body[data-game="cagastian"] .cg-cross .x-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
body[data-game="cagastian"] .cg-center .cg-cross .cpile { padding: 0; }
body[data-game="cagastian"] .cg-center .cg-cross .card, body[data-game="cagastian"] .cg-cross .deck .back {
  width: var(--xw); height: var(--xh); max-width: none; aspect-ratio: auto; flex-shrink: 0;
}
/* Las de los lados van acostadas */
body[data-game="cagastian"] .cg-cross .x-1 .card, body[data-game="cagastian"] .cg-cross .x-3 .card { transform: rotate(90deg); }
/* Al caer en una pila de los lados (cuando la pone otro jugador), la carta cae y se va acostando */
body[data-game="cagastian"] .cg-cross .x-1 .card.drop, body[data-game="cagastian"] .cg-cross .x-3 .card.drop { animation: drop-side 0.55s cubic-bezier(.2,.7,.3,1); }
@keyframes drop-side { 0% { transform: translateY(-30px) rotate(0deg) scale(1.15); opacity: 0; } 40% { opacity: 1; } 75% { transform: translateY(2px) rotate(98deg) scale(0.98); } 100% { transform: rotate(90deg); } }
body[data-game="cagastian"] .cg-cross .deck { position: relative; display: flex; align-items: center; justify-content: center; }
body[data-game="cagastian"] .cg-cross .deck .lbl { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 99px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.75rem; font-weight: 700; }
body[data-game="cagastian"] .cg-cross .cpile .card.empty { opacity: 0.5; }
body[data-game="cagastian"] .cg-cross .cpile.new .card.empty, body[data-game="cagastian"] .cg-cross .cpile.target .card { opacity: 1; }
body[data-game="cagastian"] .cg-extra { display: flex; justify-content: center; gap: 10px; margin-top: 6px; }
/* La pila acostada ocupa su lugar acostada (así el marco de "aquí cabe" queda bien) */
body[data-game="cagastian"] .cg-cross .x-1 .cpile, body[data-game="cagastian"] .cg-cross .x-3 .cpile { width: var(--xh); height: var(--xw); justify-content: center; }
body[data-game="cagastian"] .cg-cross .x-1 .card, body[data-game="cagastian"] .cg-cross .x-3 .card { margin: calc((var(--xw) - var(--xh)) / 2) 0; }

/* Al terminar: primero se ve la mesa; los resultados se abren con este botón */
.overlay[hidden] { display: none; }
.results-btn {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 4px); z-index: 16;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); padding: 10px 20px; font-size: 1rem;
}
.panel .peek-back { display: block; margin: 0 0 6px auto; font-size: 0.85rem; }
.rematch-bar .results-btn { position: static; transform: none; box-shadow: none; }
/* En cartas chicas (como tu mano en el celular) los palos chiquitos del 2 al 10 se ven feos:
   ahí va un solo palo grande al centro; desde 60 px de ancho ya se dibujan todos. */
@container (max-width: 59.9px) {
  .card .pips { display: none; }
  .card .pip:not(.ace) { display: block; font-size: 52cqw; }
}
/* Cartas encimadas en tu mano: la esquina de abajo queda asomada junto a la siguiente y se ve
   encimada; se esconde (la carta de hasta la derecha de cada grupo sí la lleva). */
body[data-game="continental"] .hand .cards > .card:not(:last-child) .idx.br,
body[data-game="continental"] .hand .hand-group > .card:not(:last-child) .idx.br,
body[data-game="cagastian"] .cg-mine .cards > .card:not(:last-child) .idx.br { visibility: hidden; }
/* La carta elegida sube y crece: ahí sí se ve completa */
.hand .cards .card.sel .idx.br, .cg-mine .cards .card.sel .idx.br { visibility: visible; }
/* Continental: debajo del descarte se asoman las cartas de antes, un poco desordenadas */
.discard { position: relative; }
.discard .messy { position: absolute; inset: 0; pointer-events: none; }
.discard .messy .card.under { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.discard .messy .card.under:nth-child(1) { transform: rotate(-8deg) translate(-3px, 2px); }
.discard .messy .card.under:nth-child(2) { transform: rotate(6deg) translate(4px, 1px); }
.discard .messy .card.under:nth-child(3) { transform: rotate(-3deg) translate(1px, -2px); }
.discard > .card { position: relative; z-index: 1; }

/* Icono de instrucciones apagado: se ve tenue y tachado */
.footer.top button.link.icon.off { opacity: 0.45; filter: grayscale(1); position: relative; }
.footer.top button.link.icon.off::after { content: ""; position: absolute; left: 20%; right: 20%; top: 50%; height: 2px; background: #e5484d; transform: rotate(-35deg); }
/* Cagastian: "Necesito un…" (al declarar) en un panel flotante al centro de la pantalla */
body[data-game="cagastian"] .declare {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 17; margin: 0;
  width: min(360px, calc(100% - 32px)); padding: 14px; border-radius: 16px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  background: var(--felt-dark); border: 2px solid var(--gold); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.6);
}
body[data-game="cagastian"] .declare > span { grid-column: 1 / -1; text-align: center; font-weight: 700; font-size: 1.05rem; }
body[data-game="cagastian"] .declare button { min-width: 0; min-height: 44px; padding: 0; font-size: 1.05rem; }

/* Esquinas de la cruz: apartadas (una esquina al azar) y la carta declarada (la de enfrente) */
body[data-game="cagastian"] .cg-cross .x-c0 { grid-area: c0; }
body[data-game="cagastian"] .cg-cross .x-c1 { grid-area: c1; }
body[data-game="cagastian"] .cg-cross .x-c2 { grid-area: c2; }
body[data-game="cagastian"] .cg-cross .x-c3 { grid-area: c3; }
body[data-game="cagastian"] .cg-cross .x-corner { display: flex; align-items: center; justify-content: center; }
body[data-game="cagastian"] .cg-cross .x-corner .lbl { font-size: 0.7rem; white-space: nowrap; }
body[data-game="cagastian"] .cg-center .cg-cross .x-corner .card { width: calc(var(--xw) * 0.85); height: calc(var(--xh) * 0.85); }

/* Cagastian: letrero al centro cuando alguien declara (qué número pidió y qué le salió) */
.declare-alert {
  position: fixed; left: 50%; top: 42%; z-index: 40; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  width: min(320px, calc(100% - 40px)); padding: 14px 18px; border-radius: 16px;
  background: rgba(20, 12, 12, 0.94); border: 2px solid var(--gold); color: #fff;
  box-shadow: 0 0 0 6px rgba(242, 193, 78, 0.2), 0 16px 40px rgba(0, 0, 0, 0.6);
  pointer-events: none; animation: boba-in 0.4s ease-out both, boba-out 0.6s ease-in 3.2s forwards;
}
.declare-alert .da-icon { font-size: 2rem; line-height: 1; }
.declare-alert strong { font-size: 1.35rem; color: var(--gold); }
.declare-alert .da-text { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .declare-alert { animation: none; } }

/* El mazo para robar va acostado en medio de la cruz */
body[data-game="cagastian"] .cg-cross .x-deck { height: var(--xw); }
body[data-game="cagastian"] .cg-cross .deck .back { transform: rotate(90deg); margin: calc((var(--xw) - var(--xh)) / 2) 0; }
/* Cagastian: la carta de tu mazo (o tu comodín apartado) elegida se enmarca y sube, como en tu mano */
body[data-game="cagastian"] .rowpiles.mine .stock .card.sel {
  transform: translateY(-8px);
  box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(242, 193, 78, 0.7), 2px 2px 0 #e9e4d6, 4px 4px 0 #d8d2c2, 6px 6px 0 #c9c1ae;
}

/* Al volver a dibujar por un toque (no por una jugada nueva) no se repiten las animaciones de llegar */
#app.quiet .card.drop, #app.quiet .card.fresh, #app.quiet .tile.drop, #app.quiet .tile.fresh { animation: none !important; }


/* Continental con el celular parado: la mesa crece para llenar la pantalla y tu mano y tu
   bajada quedan abajo (sin espacio vacío al final) */
@media (orientation: portrait) {
  body[data-game="continental"] #app { display: flex; flex-direction: column; min-height: 100dvh; }
  body[data-game="continental"] .ct-layout { flex: 1; display: flex; flex-direction: column; }
  body[data-game="continental"] .ct-layout > .ct-col:first-child { flex: 1; display: flex; flex-direction: column; }
  body[data-game="continental"] .ct-layout > .ct-col:first-child > .table { flex: 1; }
}

/* Continental: el mazo y el descarte van en medio de la mesa; los juegos de los demás arriba
   y los tuyos abajo, de tu lado */
body[data-game="continental"] .ct-table { display: flex; flex-direction: column; gap: 6px; }
body[data-game="continental"] .ct-table .tz { display: flex; flex-direction: column; gap: 6px; }
body[data-game="continental"] .ct-table .tz:empty { display: none; }
body[data-game="continental"] .ct-table .tz-mid { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 16px; margin: auto 0; padding: 4px 0; }
body[data-game="continental"] .ct-table .owner + .owner { margin-top: 0; }
/* Continental: el mazo y el descarte miden lo justo para que la carta del descarte muestre
   todos sus palos (desde 60 px de ancho) */
body[data-game="continental"] .ct-table .deck .back,
body[data-game="continental"] .ct-table .discard .card,
body[data-game="continental"] .ct-table .discard .card.empty { width: 63px; height: auto; aspect-ratio: 54 / 78; }
/* Continental: los juegos bajados (y el nombre de su dueño) van centrados en la mesa */
body[data-game="continental"] .ct-table .owner h3 { justify-content: center; }
body[data-game="continental"] .ct-table .melds { justify-content: center; }

/* Versión publicada, abajo en la portada */
.home-version { margin: 10px 0 0; text-align: center; font-size: 0.75rem; color: var(--muted); opacity: 0.8; }