/* ============================================================
   DOMINÓ ONLINE — "Mesa de dominó dominicano de verdad"
   Casino caribeño / colmado elegante.
   Fieltro verde profundo + caoba oscura + dorado envejecido.
   ============================================================ */

:root {
  /* Fieltro */
  --felt: #0b3d20;
  --felt-light: #146032;
  --felt-dark: #052313;
  --felt-shadow: rgba(2, 18, 10, 0.6);

  /* Madera caoba */
  --wood-deep: #2e1508;
  --wood: #4a2410;
  --wood-light: #6b3a1a;

  /* Dorado envejecido */
  --gold: #c9a227;
  --gold-bright: #e8c34a;
  --gold-soft: rgba(201, 162, 39, 0.35);
  --gold-faint: rgba(201, 162, 39, 0.14);

  /* Hueso / marfil (fichas) */
  --bone: #f6efdd;
  --bone-hi: #fbf7ec;
  --bone-lo: #e3d7ba;
  --bone-edge: #b7a883;
  --pip-ink: #181512;

  /* Estado */
  --danger: #a63a2a;
  --danger-hover: #c14a36;
  --success: #1e7a45;
  --success-hover: #279a59;
  --secondary: #5b5148;
  --secondary-hover: #75675a;
  --warning: #b05a17;
  --warning-hover: #d06e22;

  /* Texto */
  --text: #f2ead6;
  --text-muted: #b8ac8f;

  /* Superficies */
  --card-bg: rgba(24, 18, 10, 0.86);
  --card-border: rgba(201, 162, 39, 0.22);
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  --shadow-tile: 0 3px 6px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);

  /* Tipografía */
  --font-display: 'Bungee', 'Barlow', sans-serif;
  --font-body: 'Barlow', sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font-body);
  color: var(--text);
  /* La sala entera: madera oscura con veta sutil */
  background:
    radial-gradient(ellipse at 50% 30%, rgba(138, 79, 36, 0.25), transparent 60%),
    repeating-linear-gradient(93deg,
      rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 9px,
      rgba(255, 255, 255, 0.02) 9px 10px, transparent 10px 26px),
    linear-gradient(160deg, var(--wood) 0%, var(--wood-deep) 55%, #1c0d05 100%);
  background-attachment: fixed;
}

#app {
  min-height: 100vh;
}

.screen {
  display: none;
  min-height: 100vh;
  padding: 1rem;
}

.screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
}

/* ============ LOBBY ============ */
.lobby-container {
  width: 100%;
  max-width: 540px;
  padding: 1.75rem;
  margin-top: 2vh;
}

.lobby-container h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.03em;
  color: var(--gold-bright);
  text-shadow: 0 2px 0 #5c430a, 0 4px 10px rgba(0, 0, 0, 0.6);
}

.logo-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.winner-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.4rem;
  border-radius: 20px;
  background: var(--gold);
  color: #241503;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
  flex: 1;
}

.form-group label,
.toggle {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

input, select {
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(201, 162, 39, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-faint);
}

input::placeholder {
  color: rgba(242, 234, 214, 0.3);
}

select option {
  background: #241a0d;
  color: var(--text);
}

.form-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  user-select: none;
}

.toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

.config-section,
.join-section {
  border-top: 1px solid rgba(201, 162, 39, 0.15);
  margin-top: 1rem;
  padding-top: 1rem;
}

.config-section h3,
.join-section h3,
.public-rooms h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.button-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* ============ BOTONES ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.65rem 1.1rem;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.08s, background 0.15s, opacity 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 5px rgba(0, 0, 0, 0.35);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, #a3811a);
  color: #2a1c04;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #f2d168, var(--gold-bright) 60%, var(--gold));
}
.btn-secondary { background: linear-gradient(180deg, var(--secondary-hover), var(--secondary)); color: #fff; }
.btn-secondary:hover:not(:disabled) { background: var(--secondary-hover); }
.btn-success { background: linear-gradient(180deg, var(--success-hover), var(--success)); color: #fff; }
.btn-success:hover:not(:disabled) { background: var(--success-hover); }
.btn-danger { background: linear-gradient(180deg, var(--danger-hover), var(--danger)); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn-warning { background: linear-gradient(180deg, var(--warning-hover), var(--warning)); color: #fff; }
.btn-warning:hover:not(:disabled) { background: var(--warning-hover); }
.btn-small { padding: 0.4rem 0.6rem; font-size: 0.8rem; }

.join-section .form-row input {
  flex: 1;
  text-transform: uppercase;
}

.public-rooms {
  margin-top: 1rem;
}

.rooms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 220px;
  overflow-y: auto;
}

.rooms-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.8rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(201, 162, 39, 0.12);
}

.rooms-list .room-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.rooms-list .room-name {
  font-weight: 600;
}

.rooms-list .room-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.error-msg {
  color: var(--danger);
  font-size: 0.9rem;
  margin-top: 0.75rem;
  min-height: 1.25rem;
}

/* ============ SALA (lobby interno) ============ */
.room-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1rem;
  width: 100%;
  max-width: 1100px;
  margin-top: 1vh;
  align-items: start;
}

.room-main {
  padding: 1.25rem;
}

.room-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.room-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--gold-bright);
  text-shadow: 0 2px 0 #5c430a, 0 3px 8px rgba(0, 0, 0, 0.5);
}

.room-code-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--gold-faint);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: var(--gold-bright);
}

.room-config {
  border-top: 1px solid rgba(201, 162, 39, 0.15);
  padding-top: 1rem;
  margin-bottom: 1rem;
}

.room-config h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.room-config.readonly {
  opacity: 0.7;
  pointer-events: none;
}

.players-section h3,
.players-score h3,
.game-controls h3,
.chat-panel h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  color: var(--gold);
}

.players-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.players-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.7rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(201, 162, 39, 0.1);
}

.players-list .player-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}

/* Señal de presencia: verde = en línea, rojo = sin conexión (bot suplente). */
.presence-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
  flex-shrink: 0;
}
.presence-dot.online {
  background: var(--success-hover);
  box-shadow: 0 0 4px rgba(39, 154, 89, 0.6);
}
.presence-dot.offline {
  background: var(--danger);
  box-shadow: 0 0 4px rgba(166, 58, 42, 0.5);
  animation: presence-blink 1.2s ease-in-out infinite;
}
@keyframes presence-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.board-seat.seat-offline {
  opacity: 0.75;
  border-style: dashed;
}

.players-list .player-status {
  font-size: 0.8rem;
  padding: 0.2rem 0.45rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
}

.players-list .player-status.ready {
  background: rgba(30, 122, 69, 0.3);
  color: var(--success-hover);
}

.players-list .player-status.host {
  background: var(--gold-faint);
  color: var(--gold-bright);
}

.players-list .player-points {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.host-only {
  display: none;
}

.is-host .host-only {
  display: inline-flex;
}

.chat-panel {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 4rem);
}

.chat-messages {
  flex: 1;
  min-height: 160px;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(201, 162, 39, 0.1);
  padding: 0.6rem;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.chat-messages .chat-msg {
  line-height: 1.35;
  word-break: break-word;
}

.chat-messages .chat-msg.system {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.82rem;
}

.chat-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.chat-form input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
}

/* ============================================================
   LA MESA DE JUEGO
   ============================================================ */
.game-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  width: 100%;
  max-width: 1400px;
  height: calc(100vh - 1rem);
  height: calc(100dvh - 1rem);
  padding: 0.5rem;
}

#screen-game {
  padding: 0.5rem;
}

/* Raíl superior: barra de madera con rótulo dorado */
.game-top-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1.1rem;
  background:
    repeating-linear-gradient(91deg,
      rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 11px,
      rgba(255, 255, 255, 0.03) 11px 12px, transparent 12px 30px),
    linear-gradient(180deg, var(--wood-light), var(--wood) 55%, var(--wood-deep));
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 214, 140, 0.15), var(--shadow);
}

.game-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

#game-room-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  text-shadow: 0 2px 0 #4a3405, 0 3px 8px rgba(0, 0, 0, 0.55);
}

.turn-indicator {
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.2s, box-shadow 0.2s, background 0.2s;
}

/* Turno activo: lámpara dorada encendida */
.turn-indicator.my-turn {
  background: var(--gold-faint);
  border-color: var(--gold);
  color: var(--gold-bright);
  animation: turnGlow 1.6s ease-in-out infinite;
}

@keyframes turnGlow {
  0%, 100% { box-shadow: 0 0 6px var(--gold-soft), inset 0 0 4px rgba(201, 162, 39, 0.1); }
  50%      { box-shadow: 0 0 18px rgba(232, 195, 74, 0.65), inset 0 0 8px rgba(232, 195, 74, 0.3); }
}

/* El paño: fieltro con grano, raíl de caoba y línea dorada */
.board-area {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  border: 16px solid transparent;
  border-image:
    repeating-linear-gradient(88deg,
      var(--wood-deep) 0 6px, var(--wood) 6px 14px,
      var(--wood-light) 14px 17px, var(--wood) 17px 26px) 16;
  box-shadow:
    inset 0 0 0 2px var(--gold-soft),
    inset 0 0 60px var(--felt-shadow),
    var(--shadow);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 42%, var(--felt-light) 0%, var(--felt) 55%, var(--felt-dark) 100%);
  background-size: 140px 140px, 60px 60px, cover;
}

.board {
  display: block;
  padding: 1rem;
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

.board-chain {
  position: relative;
  display: block;
  margin: 0 auto;
}

.board-empty {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2rem;
}

.board-area::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.board-area::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.board-area::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

/* Raíl lateral: paneles integrados en la mesa */
.game-sidebar {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
}

.players-score,
.game-controls,
.game-sidebar .chat-panel {
  padding: 0.9rem;
  background:
    linear-gradient(180deg, rgba(60, 34, 14, 0.55), rgba(24, 18, 10, 0.9));
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 214, 140, 0.08), 0 6px 18px rgba(0, 0, 0, 0.45);
}

.game-sidebar .chat-messages {
  max-height: 180px;
  min-height: 120px;
}

.play-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Raíl inferior: la mano descansa sobre madera */
.hand-area {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  background:
    repeating-linear-gradient(92deg,
      rgba(0, 0, 0, 0.13) 0 2px, transparent 2px 10px,
      rgba(255, 255, 255, 0.03) 10px 11px, transparent 11px 28px),
    linear-gradient(180deg, var(--wood-light), var(--wood) 45%, var(--wood-deep));
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 214, 140, 0.15), var(--shadow);
  padding: 0.6rem 1rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.hand-area h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 1px 0 #4a3405;
}

.hand {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-height: 48px;
}

.hand-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 0.5rem;
}

/* ============================================================
   FICHAS — hueso / marfil
   ============================================================ */
.domino-tile {
  /* Hueso/marfil pulido: brillo especular superior, bisel fino en el borde
     superior y sombra cálida abajo para un relieve 3D realista y nítido. */
  background:
    radial-gradient(circle at 22% 14%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(145deg, var(--bone-hi) 0%, var(--bone) 46%, var(--bone-lo) 100%);
  border-radius: 7px;
  box-shadow:
    var(--shadow-tile),
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px rgba(120, 100, 60, 0.32),
    inset 0 0 0 1px var(--bone-edge);
  display: flex;
  position: relative;
  cursor: default;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.domino-tile.horizontal {
  width: 64px;
  height: 32px;
}

.domino-tile.vertical {
  width: 32px;
  height: 64px;
  flex-direction: column;
}

/* En la mano: la ficha se "levanta" al pasar el dedo/cursor */
.domino-tile.hand-tile {
  cursor: pointer;
  /* Evita que el navegador robe el gesto (scroll/zoom) e interrumpa el drag */
  touch-action: none;
}

.domino-tile.hand-tile:hover {
  transform: translateY(-5px);
  box-shadow:
    0 9px 16px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.85),
    inset 0 -1px 2px rgba(120, 100, 60, 0.28),
    inset 0 0 0 1px var(--bone-edge);
}

/* Jugable: brillo dorado de "échame" */
.domino-tile.hand-tile.playable {
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 12px rgba(232, 195, 74, 0.45),
    var(--shadow-tile),
    inset 0 0 0 1px var(--bone-edge);
}

.domino-tile.hand-tile.playable:hover {
  box-shadow:
    0 0 0 2px var(--gold-bright),
    0 0 18px rgba(232, 195, 74, 0.7),
    0 9px 16px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px var(--bone-edge);
}

.domino-tile.hand-tile.selected {
  transform: translateY(-9px);
  box-shadow:
    0 0 0 3px var(--gold-bright),
    0 0 22px rgba(232, 195, 74, 0.75),
    0 12px 20px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px var(--bone-edge);
}

/* Reverso (ficha oculta): caoba con punto dorado */
.domino-tile.hidden-tile {
  background:
    repeating-linear-gradient(45deg,
      rgba(0, 0, 0, 0.18) 0 3px, transparent 3px 7px),
    linear-gradient(145deg, var(--wood-light), var(--wood) 50%, var(--wood-deep));
  box-shadow:
    var(--shadow-tile),
    inset 0 0 0 1px rgba(201, 162, 39, 0.45),
    inset 0 0 10px rgba(0, 0, 0, 0.45);
}

.tile-half {
  flex: 1;
  position: relative;
}

/* Línea divisoria central grabada */
.horizontal .tile-half:first-child {
  border-radius: 5px 0 0 5px;
  border-right: 1px solid var(--bone-edge);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.5);
}

.horizontal .tile-half:last-child {
  border-radius: 0 5px 5px 0;
}

.vertical .tile-half:first-child {
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid var(--bone-edge);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

.vertical .tile-half:last-child {
  border-radius: 0 0 5px 5px;
}

.pip {
  position: absolute;
  width: 23%;
  height: 23%;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  /* Pip grabado en hueso: tinta profunda con brillo superior nítido,
     borde duro y reborde de luz inferior para efecto de incrustación real. */
  background:
    radial-gradient(circle at 34% 28%, #6f685b 0%, #2b251e 46%, #060505 100%);
  box-shadow:
    inset 0 2px 2.5px rgba(0, 0, 0, 0.65),
    inset 0 -1px 1px rgba(255, 255, 255, 0.22),
    inset 1px 0 1px rgba(255, 255, 255, 0.06),
    0 1px 1px rgba(120, 100, 60, 0.28);
}

.pos-1 { top: 12%; left: 12%; }
.pos-2 { top: 12%; left: 50%; transform: translateX(-50%); }
.pos-3 { top: 12%; right: 12%; }
.pos-4 { top: 50%; left: 12%; transform: translateY(-50%); }
.pos-5 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pos-6 { top: 50%; right: 12%; transform: translateY(-50%); }
.pos-7 { bottom: 12%; left: 12%; }
.pos-8 { bottom: 12%; left: 50%; transform: translateX(-50%); }
.pos-9 { bottom: 12%; right: 12%; }

.board-tile {
  margin: 0;
  flex-shrink: 0;
  /* Sin animación de entrada: re-renderizar todo el tablero en cada jugada
     re-disparaba el "tileDrop" en TODAS las fichas y, al animar `transform`,
     pisaba el `rotate(180deg)` de las fichas rotadas → los números parecían
     cambiar/moverse. Los pips deben quedar estables. */
}

/* ── Última ficha jugada: glow sutil estático (sin parpadeo) ── */
.board-tile.last-played {
  box-shadow: 0 0 8px rgba(240, 208, 96, 0.4), 0 0 16px rgba(240, 208, 96, 0.2);
  z-index: 3;
}

/* ── Animación de ficha volando de la mano al tablero ────────── */
.tile-fly {
  box-shadow: 0 4px 24px rgba(240, 208, 96, 0.6), 0 0 40px rgba(201, 162, 39, 0.4);
  border-radius: 4px;
}

/* ============ MODAL ============ */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 5, 2, 0.78);
  z-index: 100;
  padding: 1rem;
}

.modal.hidden,
.hidden {
  display: none !important;
}

.modal-content {
  max-width: 420px;
  width: 100%;
  padding: 1.5rem;
  text-align: center;
}

.modal-content h2 {
  margin-top: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--gold-bright);
  text-shadow: 0 2px 0 #4a3405, 0 3px 8px rgba(0, 0, 0, 0.5);
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.25rem;
}

#round-modal-scores {
  margin-top: 1rem;
  text-align: left;
}

#round-modal-scores table {
  width: 100%;
  border-collapse: collapse;
}

#round-modal-scores th {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--gold);
}

#round-modal-scores th,
#round-modal-scores td {
  padding: 0.4rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.15);
}

#round-modal-scores td:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ============ TOAST ============ */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 17, 8, 0.96);
  border: 1px solid var(--card-border);
  color: var(--text);
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 200;
  font-size: 0.95rem;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .room-layout {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .game-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    height: auto;
    min-height: 100vh;
  }

  .board-area {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    min-height: calc(100vh - 26rem);
    border-width: 10px;
    border-image-slice: 10;
  }

  .game-sidebar {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .players-score,
  .game-controls,
  .game-sidebar .chat-panel {
    flex: 1 1 220px;
    min-width: 220px;
  }

  .hand-area {
    grid-column: 1 / -1;
    grid-row: 4 / 5;
  }
}

@media (max-width: 480px) {
  .screen {
    padding: 0.5rem;
  }

  .lobby-container,
  .room-main,
  .chat-panel {
    padding: 1rem;
  }

  .lobby-container h1 {
    font-size: 1.3rem;
  }

  .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .button-row {
    flex-direction: column;
  }

  .game-top-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .board-area {
    min-height: calc(100vh - 24rem);
    border-width: 8px;
    border-image-slice: 8;
  }

  /* Las fichas del tablero NO se encogen en móvil: la serpiente de board.js
     se calcula sobre una grilla fija de 64×32 px; encoger la ficha rompía
     la alineación de los codos (fichas montadas/desconectadas). */

  .board {
    padding: 1rem;
  }
}

/* ============================================================
   v2 — Mesa real de 4 lados, watermark, sonidos, skins
   ============================================================ */

/* El paño es el marco de referencia para watermark y asientos */
.board-area {
  position: relative;
}

/* Firma THE NECIO: pequeña en la esquina inferior derecha, presente
   pero sin molestar el juego */
.board-watermark {
  position: absolute;
  right: 12px;
  bottom: 8px;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.14);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  z-index: 0;
}

.board {
  position: relative;
  z-index: 1;
}

/* ── Asientos en los 4 lados ───────────────────────────────── */
.board-seats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.board-seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.3rem 0.8rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(201, 162, 39, 0.25);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.25s, border-color 0.25s;
}

.board-seat .seat-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text);
  white-space: nowrap;
}

.board-seat .seat-count {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board-seat.active-turn {
  border-color: var(--gold-bright);
  animation: seatGlow 1.6s ease-in-out infinite;
}

.board-seat.active-turn .seat-name {
  color: var(--gold-bright);
}

@keyframes seatGlow {
  0%, 100% { box-shadow: 0 0 6px var(--gold-soft), 0 3px 10px rgba(0, 0, 0, 0.4); }
  50%      { box-shadow: 0 0 18px rgba(232, 195, 74, 0.6), 0 3px 10px rgba(0, 0, 0, 0.4); }
}

.seat-bottom { bottom: 10px; left: 50%; transform: translateX(-50%); }
.seat-top    { top: 10px; left: 50%; transform: translateX(-50%); }
.seat-left   { left: 10px; top: 50%; transform: translateY(-50%); }
.seat-right  { right: 10px; top: 50%; transform: translateY(-50%); }

/* ── Mini fichas en asientos laterales ───────────────────────── */
.seat-mini-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 140px;
  justify-content: center;
  line-height: 1;
}

.mini-tile {
  width: 16px;
  height: 10px;
  border-radius: 3px;
  background:
    linear-gradient(135deg, #2a1f0e 25%, #3d2b14 50%, #2a1f0e 75%);
  border: 1px solid rgba(201, 162, 39, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  /* Sin animación: las mini fichas deben mostrarse ordenadas desde el inicio */
}

/* Jugadores de izquierda/derecha: la mano se ve de canto (vertical),
   como fichas paradas mirando hacia la mesa, no acostadas. */
.seat-left .seat-mini-tiles,
.seat-right .seat-mini-tiles {
  flex-direction: column;
  align-items: center;
  max-width: none;
}

.seat-left .mini-tile,
.seat-right .mini-tile {
  width: 10px;
  height: 16px;
}

/* ── Mano con fichas paradas ───────────────────────────────── */
.hand {
  min-height: 76px;
  align-items: flex-end;
}

/* ── Paneles colapsables (details/summary) ─────────────────── */
details.players-score,
details.game-controls,
details.chat-panel {
  padding: 0.7rem 0.9rem;
}

details.chat-panel[open] {
  display: flex;
  flex-direction: column;
}

.game-sidebar summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  color: var(--gold);
  padding: 0.1rem 0;
  user-select: none;
}

.game-sidebar summary::-webkit-details-marker {
  display: none;
}

.game-sidebar summary::after {
  content: '▾';
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: transform 0.2s;
}

.game-sidebar details:not([open]) summary::after {
  transform: rotate(-90deg);
}

.game-sidebar details[open] summary {
  margin-bottom: 0.55rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.15);
  padding-bottom: 0.45rem;
}

/* ── Botón de sonido apagado ───────────────────────────────── */
#btn-sound-toggle.sound-off {
  opacity: 0.6;
}

/* ── Panel de diseño de mesa ───────────────────────────────── */
.table-settings {
  position: fixed;
  top: 4.2rem;
  right: 1rem;
  z-index: 150;
  width: 240px;
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(60, 34, 14, 0.7), rgba(24, 18, 10, 0.95));
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.table-settings h3 {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  color: var(--gold);
}

.table-settings .form-group {
  margin-bottom: 0.7rem;
}

.table-settings .form-group:last-child {
  margin-bottom: 0;
}

/* ============================================================
   SKINS DE MESA (clase en <body>)
   ============================================================ */

/* skin-felt: es el diseño base, ya definido en .board-area */

/* Madera caoba: superficie de madera pulida con raíl oscuro */
body.skin-wood .board-area {
  border-image:
    repeating-linear-gradient(88deg,
      #1a0c04 0 6px, #2e1508 6px 14px,
      #4a2410 14px 17px, #2e1508 17px 26px) 16;
  box-shadow:
    inset 0 0 0 2px rgba(201, 162, 39, 0.3),
    inset 0 0 70px rgba(10, 4, 1, 0.65),
    var(--shadow);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"),
    repeating-linear-gradient(89deg,
      rgba(0, 0, 0, 0.12) 0 3px, transparent 3px 14px,
      rgba(255, 220, 150, 0.04) 14px 15px, transparent 15px 34px),
    radial-gradient(ellipse at 50% 42%, #7a4520 0%, #5a2f13 55%, #3a1c0a 100%);
  background-size: 140px 140px, auto, cover;
}

body.skin-wood .board-watermark {
  color: rgba(255, 235, 200, 0.06);
}

/* Azul noche / negro elegante: paño azul tinta, raíl negro lacado */
body.skin-night .board-area {
  border-image:
    repeating-linear-gradient(88deg,
      #050505 0 6px, #101014 6px 14px,
      #23232c 14px 17px, #101014 17px 26px) 16;
  box-shadow:
    inset 0 0 0 2px rgba(140, 170, 220, 0.22),
    inset 0 0 70px rgba(2, 6, 16, 0.7),
    var(--shadow);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 42%, #1d3350 0%, #12233c 55%, #070f1e 100%);
  background-size: 140px 140px, cover;
}

body.skin-night .board-watermark {
  color: rgba(190, 215, 255, 0.06);
}

body.skin-night .board-seat {
  background: rgba(2, 6, 16, 0.55);
  border-color: rgba(140, 170, 220, 0.3);
}

/* ============================================================
   ESTILOS DE FICHA (clase en <body>)
   ============================================================ */

/* tile-bone: es el diseño base, ya definido en .domino-tile */

/* Negro y oro: ficha de ébano con pips dorados */
body.tile-black .domino-tile {
  background: linear-gradient(145deg, #3b3b41 0%, #1b1b1f 50%, #0a0a0c 100%);
  box-shadow:
    var(--shadow-tile),
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    inset 0 -1px 2px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px #4d4230;
}

body.tile-black .pip {
  background: radial-gradient(circle at 35% 30%, #f2d168, var(--gold) 70%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 1px 1px rgba(0, 0, 0, 0.6);
}

body.tile-black .horizontal .tile-half:first-child {
  border-right-color: #4d4230;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.1);
}

body.tile-black .vertical .tile-half:first-child {
  border-bottom-color: #4d4230;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

/* Blanco moderno: ficha blanca limpia con pips de color */
body.tile-white .domino-tile {
  background: linear-gradient(145deg, #ffffff 0%, #f2f4f6 55%, #dde3e8 100%);
  box-shadow:
    var(--shadow-tile),
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -1px 2px rgba(90, 110, 130, 0.25),
    inset 0 0 0 1px #c3ccd4;
}

body.tile-white .pip:nth-child(odd) {
  background: radial-gradient(circle at 35% 30%, #ff8a7a, #d63c2f 70%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 1px 1px rgba(90, 110, 130, 0.35);
}

body.tile-white .pip:nth-child(even) {
  background: radial-gradient(circle at 35% 30%, #4fd1c5, #178f86 70%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 1px 1px rgba(90, 110, 130, 0.35);
}

body.tile-white .horizontal .tile-half:first-child {
  border-right-color: #c3ccd4;
}

body.tile-white .vertical .tile-half:first-child {
  border-bottom-color: #c3ccd4;
}

/* ============================================================
   RESPONSIVE v2 — móvil: mesa arriba, mano abajo, paneles abajo
   ============================================================ */
@media (max-width: 900px) {
  .game-layout {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }

  .board-area {
    grid-row: 2 / 3;
    min-height: calc(100vh - 24rem);
  }

  .hand-area {
    grid-row: 3 / 4;
  }

  .game-sidebar {
    grid-row: 4 / 5;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-y: visible;
  }

  .players-score,
  .game-controls,
  .game-sidebar .chat-panel {
    flex: none;
    min-width: 0;
  }

  .board-seat .seat-name {
    font-size: 0.6rem;
  }

  .board-seat .seat-count {
    font-size: 0.62rem;
  }

  .table-settings {
    top: auto;
    bottom: 1rem;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
}

@media (max-width: 480px) {
  .hand {
    gap: 0.4rem;
  }
}

/* Chat dominicano rápido */
.quick-chat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.4rem 0;
}

.quick-chat-chip {
  font-family: inherit;
  font-size: 0.72rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: var(--gold-faint);
  color: var(--gold-bright);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.quick-chat-chip:hover {
  background: var(--gold-soft);
  transform: translateY(-1px);
}

.quick-chat-chip:active {
  transform: translateY(0) scale(0.96);
}

/* Zoom de la mesa */
.mesa-zoom {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.mesa-zoom .btn {
  min-width: 30px;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  font-weight: 700;
}

.mesa-zoom-label {
  font-size: 0.7rem;
  color: var(--gold-bright);
  min-width: 38px;
  text-align: center;
  text-shadow: 0 1px 0 #4a3405;
}

/* Pantallas bajas (laptops 1366x768, 1280x720): modo compacto */
@media (max-height: 830px) and (min-width: 901px) {
  .game-layout {
    gap: 0.5rem;
  }

  .game-top-bar {
    padding: 0.35rem 0.9rem;
  }

  .board-area {
    border-width: 10px;
    border-image-slice: 10;
  }

  .hand-area {
    padding: 0.35rem 0.8rem 0.5rem;
    gap: 0.25rem;
  }

  .domino-tile.hand-tile.vertical {
    width: 28px;
    height: 56px;
  }

  .domino-tile.hand-tile.horizontal {
    width: 56px;
    height: 28px;
  }

  .hand {
    gap: 0.4rem;
    min-height: 40px;
  }
}

/* Arrastrar y soltar fichas */

.drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -70%) rotate(-4deg) scale(1.12);
  opacity: 0.92;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.6);
}

.board-area.drag-left,
.board-area.drag-right {
  box-shadow:
    inset 0 0 0 3px var(--gold-bright),
    inset 0 0 60px var(--felt-shadow);
}

.board-area.drag-left {
  background-image: linear-gradient(90deg, rgba(232, 195, 74, 0.16), transparent 45%);
}

.board-area.drag-right {
  background-image: linear-gradient(-90deg, rgba(232, 195, 74, 0.16), transparent 45%);
}

/* Compartir sala + insignias de pareja */
.btn-whatsapp {
  background: var(--success);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.btn-whatsapp:hover {
  background: var(--success-hover);
}

.player-status.team-a {
  background: rgba(201, 162, 39, 0.22);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
}

.player-status.team-b {
  background: rgba(70, 130, 200, 0.2);
  border: 1px solid #5b93d6;
  color: #9ec3ee;
}

/* QR de invitación */
.room-invite-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0.25rem 0;
}

.qr-code {
  padding: 8px;
  background: #f6efdd;
  border-radius: 12px;
  border: 1px solid var(--gold-soft);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  line-height: 0;
}

.qr-code img,
.qr-code canvas {
  display: block;
  width: 110px;
  height: 110px;
}

.qr-code.qr-fallback {
  line-height: 1.3;
  font-size: 0.7rem;
  color: #141210;
  max-width: 160px;
  word-break: break-all;
}

.qr-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Pantallas bajas: sala compacta para que todo quepa sin scroll */
@media (max-height: 840px) {
  #screen-room {
    padding: 0.4rem;
  }

  #screen-room .room-layout {
    margin-top: 0;
    gap: 0.6rem;
  }

  #screen-room .room-main {
    padding: 0.7rem 1rem;
  }

  #screen-room .room-header {
    margin-bottom: 0.5rem;
    gap: 0.3rem;
  }

  #screen-room .qr-code img,
  #screen-room .qr-code canvas {
    width: 84px;
    height: 84px;
  }

  #screen-room .qr-hint {
    font-size: 0.62rem;
  }

  #screen-room .room-config h3,
  #screen-room .players-section h3,
  #screen-room .chat-panel h3 {
    margin: 0 0 0.3rem;
    font-size: 0.78rem;
  }

  #screen-room .form-group {
    margin-bottom: 0.45rem;
    gap: 0.2rem;
  }

  #screen-room .form-row {
    margin-bottom: 0.25rem;
  }

  #screen-room .players-list {
    gap: 0.25rem;
    max-height: 96px;
    overflow-y: auto;
  }

  #screen-room .players-list li {
    padding: 0.3rem 0.55rem;
  }

  #screen-room .room-actions {
    margin-top: 0.5rem;
    gap: 0.45rem;
  }

  #screen-room .chat-panel {
    max-height: calc(100vh - 2rem);
  }

  #screen-room .chat-messages {
    min-height: 90px;
    max-height: 150px;
  }
}

/* Monedas pintintín */
.player-coins {
  color: var(--gold-bright);
  font-weight: 700;
}

.casa-acumulada {
  margin-top: 0.4rem;
  padding: 0.35rem 0.55rem;
  border-top: 1px dashed var(--gold-soft);
  font-size: 0.72rem;
  color: var(--text-muted);
  list-style: none;
}

/* Pantalla de acceso (login/registro) */
.auth-card {
  max-width: 420px;
}

.auth-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.auth-tab {
  flex: 1;
  padding: 0.55rem;
  border-radius: 10px;
  border: 1px solid var(--card-border, rgba(201,162,39,0.2));
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-muted);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.auth-tab.active {
  background: var(--gold-faint);
  border-color: var(--gold);
  color: var(--gold-bright);
}

.auth-form {
  display: flex;
  flex-direction: column;
}

.auth-nota {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.btn-block {
  width: 100%;
}

/* Barra de cuenta en el lobby */
.account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.9rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--gold-soft);
}

.account-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.account-usuario {
  font-weight: 700;
  color: var(--gold-bright);
}

.account-monedas {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Panel Admin (consolidado) ── */

/* ═══════════════════════════════════════════════════════════════
   LAYOUT BASE — la página completa siempre alcanza a verse
   (scroll normal de página + aire generoso abajo)
   ═══════════════════════════════════════════════════════════════ */

body.admin-page {
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh;
}

body.admin-page .screen.active {
  min-height: 100vh;
  height: auto;
  align-items: stretch;
  padding: clamp(0.5rem, 2vw, 1.5rem);
  padding-bottom: 40vh;
}

body:has(#admin-panel) {
  overflow-y: auto;
}

#admin-panel {
  padding-bottom: 3rem;
}

#admin-panel .card {
  overflow: visible;
}

/* Tarjeta de login admin (estrecha) */
.admin-card {
  max-width: 380px;
}

/* Panel principal — columna flexible, centrado y con tope */
.admin-panel {
  width: 100%;
  max-width: min(1200px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 3rem;
}

.admin-panel .card {
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════
   CABECERA
   ═══════════════════════════════════════════════════════════════ */

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1rem;
}

.admin-header h1 {
  margin: 0;
  font-size: 1.55rem;
}

/* ═══════════════════════════════════════════════════════════════
   GRID PRINCIPAL — columnas flexibles, responsive automático
   ═══════════════════════════════════════════════════════════════ */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1rem;
}

.admin-panel .admin-grid > .card {
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   LISTAS DE USUARIOS / SOLICITUDES (con scroll interno)
   ═══════════════════════════════════════════════════════════════ */

.admin-lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: clamp(160px, 32vh, 420px);
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════
   FILAS
   ═══════════════════════════════════════════════════════════════ */

.admin-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(201, 162, 39, 0.12);
  flex-wrap: wrap;
}

.admin-fila-bloqueada {
  opacity: 0.5;
}

.admin-fila-main {
  min-width: 0;
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Cabecera: nombre + badges + código */
.admin-fila-cabecera {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding-bottom: 0.4rem;
}

.admin-nombre {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--gold-bright, #f0d060);
  flex-shrink: 0;
  min-width: 110px;
  letter-spacing: 0.02em;
  margin-right: 0.2rem;
}

.admin-badge-rol {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(201, 162, 39, 0.2);
  color: var(--gold, #c9a227);
  border: 1px solid rgba(201, 162, 39, 0.4);
}

.admin-badge-estado {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.admin-estado-activo {
  background: rgba(39, 154, 89, 0.15);
  color: var(--success-hover);
  border: 1px solid rgba(39, 154, 89, 0.35);
}

.admin-estado-inactivo {
  background: rgba(193, 74, 54, 0.12);
  color: var(--danger-hover);
  border: 1px solid rgba(193, 74, 54, 0.3);
}

/* Datos en fila */
.admin-fila-datos {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.admin-fila-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.admin-dato {
  white-space: nowrap;
}

.admin-label {
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.15rem;
}

.admin-fila-acciones {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 0.1rem;
}

.admin-msg {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   TABLA DE HISTORIAL — SIN tope de altura
   El historial completo se recorre con el scroll natural de la página
   ═══════════════════════════════════════════════════════════════ */

.admin-tabla {
  max-height: none;
  overflow-y: visible;
  overflow-x: auto;
}

.admin-tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 560px;
}

.admin-tabla th,
.admin-tabla td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.1);
}

/* Paginador */
.paginador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding: 0.4rem 0;
}
.paginador-info {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.admin-panel > .card:last-child {
  max-height: none;
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   CÓDIGOS Y BADGES
   ═══════════════════════════════════════════════════════════════ */

.admin-codigo {
  color: var(--gold, #c9a227);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  opacity: 0.85;
  margin-left: auto;
  padding-left: 0.8rem;
  border-left: 1px solid rgba(201, 162, 39, 0.25);
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-badge {
  color: var(--gold, #c9a227);
  font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════
   CONTABILIDAD
   ═══════════════════════════════════════════════════════════════ */

.contable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.contable-card {
  padding: 0.8rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--gold-soft);
  text-align: center;
}

.contable-card-mini {
  opacity: 0.75;
  padding: 0.5rem;
}

.contable-card-destacado {
  border-color: var(--gold-bright);
  background: rgba(201, 162, 39, 0.12);
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.18);
}

.contable-valor {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.contable-card-mini .contable-valor {
  font-size: 0.95rem;
}

.contable-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
}

.contable-filtros {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

.contable-filtros .btn.active {
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* ═══════════════════════════════════════════════════════════════
   ESTADOS DE MOVIMIENTOS (wallet / cajero)
   ═══════════════════════════════════════════════════════════════ */

.mov-estado {
  text-transform: capitalize;
  opacity: 0.85;
}

.mov-pendiente { color: var(--gold); }
.mov-completada { color: var(--success-hover); }
.mov-rechazada { color: var(--danger-hover); }

/* ═══════════════════════════════════════════════════════════════
   ANIMACIONES DE MONEDAS (balance en tiempo real)
   ═══════════════════════════════════════════════════════════════ */

.player-coins.coins-up {
  animation: coinsUp 1.6s ease-out;
}

.player-coins.coins-down {
  animation: coinsDown 1.6s ease-out;
}

@keyframes coinsUp {
  0% { color: var(--success-hover); text-shadow: 0 0 12px rgba(39, 154, 89, 0.9); transform: scale(1.25); }
  100% { color: var(--gold-bright); transform: scale(1); }
}

@keyframes coinsDown {
  0% { color: var(--danger-hover); text-shadow: 0 0 12px rgba(193, 74, 54, 0.9); transform: scale(1.25); }
  100% { color: var(--gold-bright); transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   PERFIL MODAL (búsqueda de usuario, historial de partidas)
   ═══════════════════════════════════════════════════════════════ */

.perfil-link {
  cursor: pointer;
  color: var(--gold-bright, #f0d060);
  text-decoration: none;
}

.perfil-link:hover {
  color: var(--gold, #c9a227);
  text-decoration: none;
  opacity: 0.85;
}

.perfil-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.perfil-card {
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1rem;
}

.reporte-fechas {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.reporte-fechas .form-group {
  margin: 0;
}

/* ── Tabs de navegación ───────────────────────────────────── */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.8rem;
  padding: 0.3rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  border: 1px solid var(--gold-soft);
}

.admin-tab {
  flex: 0 0 auto;
  padding: 0.42rem 0.8rem;
  font-size: 0.92rem;
  font-family: var(--font-body, monospace);
  font-weight: 600;
  color: var(--text-muted, #999);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.admin-tab:hover {
  color: #ddd;
  background: rgba(255, 255, 255, 0.06);
}

.admin-tab.active {
  color: #0a0a0a;
  background: linear-gradient(135deg, #f0d060, #c9a227);
  border-color: var(--gold, #c9a227);
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.25);
}

.admin-tab .admin-badge {
  display: inline;
  font-size: 0.65rem;
  margin-left: 0.25rem;
}

/* ── Paneles de pestaña ──────────────────────────────────── */
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }

/* ── Spinner de carga ────────────────────────────────────── */
.admin-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.2rem;
  color: var(--gold, #c9a227);
  font-family: var(--font-body, monospace);
  font-size: 0.88rem;
}

.admin-spinner.hidden { display: none; }

.spinner-dot {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(201, 162, 39, 0.25);
  border-top-color: var(--gold, #c9a227);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.graf-label {
  font-size: 0.62rem;
  fill: var(--text-muted, #999);
}

/* ═══════════════════════════════════════════════════════════════
   MEDIA QUERIES CONSOLIDADAS
   ═══════════════════════════════════════════════════════════════ */

/* Móvil / tablet: grid a una columna */
@media (max-width: 900px) {
  body.admin-page {
    overflow-y: auto !important;
    height: auto !important;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }
}

/* Teléfonos chicos: cabecera y acciones se apilan */
@media (max-width: 640px) {
  .admin-header {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .admin-fila-acciones {
    width: 100%;
  }

  .contable-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop (≥901px): listas amplias, sin restricciones artificiales */
@media (min-width: 901px) {
  .admin-lista {
    max-height: 420px;
    overflow-y: auto;
  }
}

/* ───────────────────────────────────────────────────────────────
   RADIO EN LA SALA / MESA
   ─────────────────────────────────────────────────────────────── */
.radio-player {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--gold-soft);
}

.radio-inline .radio-player,
.radio-slot.radio-inline {
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
}

.radio-btn.playing {
  border-color: var(--gold);
  color: var(--gold-bright);
  animation: turnGlow 1.6s ease-in-out infinite;
}

.radio-select {
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: 0.3rem 0.45rem;
  font-family: inherit;
  font-size: 0.78rem;
  max-width: 150px;
}

.radio-vol {
  width: 70px;
  accent-color: var(--gold);
}

/* Radio centrado y grande en la barra superior de la mesa */
.game-radio-center {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.game-radio-center .radio-player {
  gap: 0.7rem;
  padding: 0.4rem 0.9rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
}

.game-radio-center .radio-btn {
  font-size: 0.95rem;
  padding: 0.4rem 1rem;
}

.game-radio-center .radio-select {
  font-size: 0.95rem;
  max-width: 190px;
  padding: 0.4rem 0.6rem;
}

.game-radio-center .radio-vol {
  width: 110px;
}

/* Nombres de jugadores más grandes en la mesa */
.board-seat {
  padding: 0.45rem 1rem;
}

.board-seat .seat-name {
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

.board-seat .seat-count {
  font-size: 0.85rem;
}

@media (max-width: 700px) {
  .board-seat .seat-name {
    font-size: 0.72rem;
  }

  .board-seat .seat-count {
    font-size: 0.68rem;
  }

  .game-radio-center .radio-select {
    max-width: 120px;
    font-size: 0.8rem;
  }

  /* Móvil: la barra de radio no debe desbordar la pantalla */
  .game-radio-center {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .game-radio-center .radio-vol {
    display: none;
  }

  .game-radio-center .radio-player {
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    max-width: 100%;
  }

  .game-radio-center .radio-btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.55rem;
  }
}

/* ───────────────────────────────────────────────────────────────
   CAJERO: recargas, retiros e historial
   ─────────────────────────────────────────────────────────────── */
.wallet-panel {
  margin: 0.6rem 0;
  padding: 0.8rem;
  border: 1px solid var(--gold-soft, rgba(201,162,39,0.35));
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}
.wallet-panel .form-group {
  margin-bottom: 0.5rem;
}
.wallet-history {
  margin-top: 0.6rem;
}
.wallet-history summary {
  cursor: pointer;
  color: var(--gold, #c9a227);
  font-size: 0.85rem;
}
.wallet-history-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
  font-size: 0.82rem;
}
.wallet-history-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ───────────────────────────────────────────────────────────────
   CÓDIGO DE CUENTA (barra de cuenta)
   ─────────────────────────────────────────────────────────────── */
.account-codigo {
  color: var(--gold, #c9a227);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  opacity: 0.95;
}

/* ───────────────────────────────────────────────────────────────
   GARANTÍA GLOBAL — la página SIEMPRE puede subir y bajar
   Nada (ni pantalla ni panel) puede dejar contenido cortado.
   ─────────────────────────────────────────────────────────────── */
html, body {
  overflow-y: auto !important;
}
body {
  min-height: 100%;
}
.screen {
  padding-bottom: 3rem;
}

/* Pantallas BAJAS (teléfono acostado, ventanas pequeñas): la mesa
   deja de ser de altura fija y la página fluye con scroll. */
@media (max-height: 700px) {
  .game-layout {
    height: auto;
    min-height: calc(100dvh - 1rem);
    grid-template-rows: auto auto auto;
  }
  .game-sidebar {
    max-height: none;
  }
  .board-area {
    min-height: 60vh;
  }
}

/* ───────────────────────────────────────────────────────────────
   BARRA DE CUENTA LIMPIA
   ─────────────────────────────────────────────────────────────── */
.account-id {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.account-id .account-usuario {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gold-bright, #f0d060);
  line-height: 1.2;
}
.account-id .account-codigo {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gold, #c9a227);
  background: rgba(201, 162, 39, 0.1);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  width: fit-content;
}
.account-id .account-monedas {
  font-size: 0.9rem;
  opacity: 0.9;
}
.account-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.lobby-logout {
  margin-top: 1.2rem;
  opacity: 0.85;
}

/* ============================================================
   PAÑOS NUEVOS DE LA MESA (5 diseños)
   ============================================================ */

/* 1) BANDERA DOMINICANA: cuadrantes azul/rojo con la cruz blanca,
   escudo dorado tenue al centro, oscurecida para que las fichas lean bien */
body.skin-bandera .board-area {
  border-image:
    repeating-linear-gradient(88deg,
      #081738 0 6px, #12295c 6px 14px,
      #d4af37 14px 17px, #12295c 17px 26px) 16;
  box-shadow:
    inset 0 0 0 2px rgba(212, 175, 55, 0.4),
    inset 0 0 70px rgba(0, 0, 8, 0.6),
    var(--shadow);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 8, 0.15) 30%, rgba(0, 0, 8, 0.55) 100%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 10, 0.35) 0 58px, rgba(212, 175, 55, 0.55) 58px 61px, rgba(0, 0, 10, 0.35) 61px 66px, transparent 66px),
    linear-gradient(90deg, transparent 44.5%, rgba(240, 240, 240, 0.85) 44.5%, rgba(240, 240, 240, 0.85) 55.5%, transparent 55.5%),
    linear-gradient(0deg, transparent 43%, rgba(240, 240, 240, 0.85) 43%, rgba(240, 240, 240, 0.85) 57%, transparent 57%),
    linear-gradient(rgba(0, 0, 12, 0.28), rgba(0, 0, 12, 0.28)),
    linear-gradient(180deg, #002d62 50%, #ce1126 50%),
    linear-gradient(180deg, #ce1126 50%, #002d62 50%);
  background-size:
    140px 140px, cover, cover, cover, cover, cover,
    50% 100%, 50% 100%;
  background-position:
    0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
    left top, right top;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
body.skin-bandera .board-watermark {
  color: rgba(255, 255, 255, 0.1);
}

/* 2) MÁRMOL CARRARA: blanco elegante con vetas doradas y grises */
body.skin-marmol .board-area {
  border-image:
    repeating-linear-gradient(88deg,
      #3a3327 0 6px, #6b5f45 6px 14px,
      #c9b678 14px 17px, #6b5f45 17px 26px) 16;
  box-shadow:
    inset 0 0 0 2px rgba(180, 160, 110, 0.5),
    inset 0 0 60px rgba(90, 85, 70, 0.35),
    var(--shadow);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.55), transparent 60%),
    repeating-linear-gradient(115deg, transparent 0 60px, rgba(190, 168, 116, 0.22) 60px 62px, transparent 62px 140px),
    repeating-linear-gradient(64deg, transparent 0 90px, rgba(110, 110, 122, 0.14) 90px 93px, transparent 93px 210px),
    linear-gradient(160deg, #eceae4 0%, #d2cfc6 55%, #b3b0a5 100%);
  background-size: 140px 140px, cover, auto, auto, cover;
}
body.skin-marmol .board-watermark {
  color: rgba(90, 80, 55, 0.12);
}
body.skin-marmol .board-empty {
  color: rgba(90, 80, 55, 0.6);
}

/* 3) ÉBANO REAL: madera casi negra con vetas cálidas y raíl dorado */
body.skin-ebano .board-area {
  border-image:
    repeating-linear-gradient(88deg,
      #241a08 0 6px, #4a3512 6px 14px,
      #d4af37 14px 17px, #4a3512 17px 26px) 16;
  box-shadow:
    inset 0 0 0 2px rgba(212, 175, 55, 0.35),
    inset 0 0 80px rgba(0, 0, 0, 0.75),
    var(--shadow);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E"),
    repeating-linear-gradient(89deg, rgba(255, 215, 140, 0.035) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(91deg, rgba(0, 0, 0, 0.25) 0 3px, transparent 3px 22px),
    radial-gradient(ellipse at 50% 42%, #2e2318 0%, #191008 60%, #0a0603 100%);
  background-size: 140px 140px, auto, auto, cover;
}
body.skin-ebano .board-watermark {
  color: rgba(212, 175, 55, 0.06);
}

/* 4) CASINO TEAL: paño turquesa de casino con rombos sutiles */
body.skin-casino .board-area {
  border-image:
    repeating-linear-gradient(88deg,
      #05201d 0 6px, #0a3a35 6px 14px,
      #c9a227 14px 17px, #0a3a35 17px 26px) 16;
  box-shadow:
    inset 0 0 0 2px rgba(201, 162, 39, 0.35),
    inset 0 0 70px rgba(2, 20, 18, 0.65),
    var(--shadow);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 42%, #0f766e 0%, #0b4f4a 55%, #052e2b 100%);
  background-size: 140px 140px, auto, auto, cover;
}
body.skin-casino .board-watermark {
  color: rgba(210, 255, 245, 0.06);
}

/* 5) CUERO VAQUETA: cuero marrón silla con grano y costura */
body.skin-cuero .board-area {
  border-image:
    repeating-linear-gradient(88deg,
      #2a1608 0 6px, #4a2a10 6px 14px,
      #8a5a2b 14px 17px, #4a2a10 17px 26px) 16;
  box-shadow:
    inset 0 0 0 2px rgba(220, 170, 100, 0.35),
    inset 0 0 70px rgba(30, 12, 2, 0.6),
    var(--shadow);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 11px),
    radial-gradient(ellipse at 50% 42%, #8a5a2b 0%, #6b3f1c 55%, #45250d 100%);
  background-size: 140px 140px, auto, cover;
}
body.skin-cuero .board-watermark {
  color: rgba(255, 220, 170, 0.07);
}

/* ============================================================
   MODELOS DE FICHA NUEVOS (alta calidad)
   ============================================================ */

/* MARFIL VIEJO: marfil envejecido cálido, tinta marrón profunda */
body.tile-marfil .domino-tile {
  background: linear-gradient(145deg, #f8f0dd 0%, #eee0c2 48%, #d9c59e 100%);
  box-shadow:
    var(--shadow-tile),
    inset 0 1px 1px rgba(255, 255, 255, 0.85),
    inset 0 -1px 2px rgba(140, 110, 60, 0.35),
    inset 0 0 0 1px #c9b184;
}
body.tile-marfil .pip {
  background: radial-gradient(circle at 40% 32%, #6b4a22 0%, #3d2a10 60%, #1a0f04 100%);
}
body.tile-marfil .horizontal .tile-half:first-child { border-right-color: #c9b184; }
body.tile-marfil .vertical .tile-half:first-child { border-bottom-color: #c9b184; }

/* JADE: piedra verde translúcida con pips crema */
body.tile-jade .domino-tile {
  background: linear-gradient(145deg, #45a884 0%, #227a5e 48%, #0e4a3a 100%);
  box-shadow:
    var(--shadow-tile),
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px #0a3a2e;
}
body.tile-jade .pip {
  background: radial-gradient(circle at 35% 28%, #fffdf0 0%, #eee0b0 65%, #cbb870 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 1px 1px rgba(0, 0, 0, 0.55);
}
body.tile-jade .horizontal .tile-half:first-child { border-right-color: #0a3a2e; }
body.tile-jade .vertical .tile-half:first-child { border-bottom-color: #0a3a2e; }

/* MADERA NOGAL: ficha de madera con veta y tinta negra */
body.tile-madera .domino-tile {
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 9px),
    linear-gradient(145deg, #b3804d 0%, #8f5f30 55%, #6e4420 100%);
  box-shadow:
    var(--shadow-tile),
    inset 0 1px 1px rgba(255, 230, 180, 0.35),
    inset 0 -1px 2px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px #5a3818;
}
body.tile-madera .pip {
  background: radial-gradient(circle at 40% 32%, #2a1606 0%, #120a02 70%);
  box-shadow:
    inset 0 1.5px 2px rgba(0, 0, 0, 0.6),
    inset 0 -1px 1px rgba(255, 220, 170, 0.3);
}
body.tile-madera .horizontal .tile-half:first-child { border-right-color: #5a3818; }
body.tile-madera .vertical .tile-half:first-child { border-bottom-color: #5a3818; }

/* NÁCAR: perla iridiscente con pips azul tinta */
body.tile-nacar .domino-tile {
  background:
    linear-gradient(115deg, rgba(255, 60, 150, 0.07), rgba(60, 180, 255, 0.09) 50%, rgba(120, 255, 190, 0.07)),
    linear-gradient(145deg, #fdfbf6 0%, #ece9e1 50%, #d5d2c8 100%);
  box-shadow:
    var(--shadow-tile),
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 -1px 2px rgba(120, 120, 140, 0.3),
    inset 0 0 0 1px #c2bfb4;
}
body.tile-nacar .pip {
  background: radial-gradient(circle at 40% 32%, #7a86b8 0%, #3a4670 65%, #1c2440 100%);
}
body.tile-nacar .horizontal .tile-half:first-child { border-right-color: #c2bfb4; }
body.tile-nacar .vertical .tile-half:first-child { border-bottom-color: #c2bfb4; }

/* ── Menú Compartir la web ─────────────────────────────────── */
.share-wrap {
  position: relative;
  display: inline-block;
}
.share-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  background: rgba(20, 10, 4, 0.97);
  border: 1px solid var(--gold-soft, rgba(201, 162, 39, 0.4));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.share-menu button {
  background: none;
  border: none;
  color: var(--text, #eee);
  text-align: left;
  padding: 0.55rem 0.8rem;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}
.share-menu button:hover {
  background: rgba(201, 162, 39, 0.18);
}

/* ============================================================
   Medios de pago — Cajero
   ============================================================ */
.wallet-payment-methods {
  margin-top: 1.2rem;
  border-top: 1px solid rgba(201, 162, 39, 0.15);
  padding-top: 0.8rem;
}
.wallet-payment-methods summary {
  color: var(--gold, #c9a227);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  padding: 0.4rem 0;
}
.wallet-payment-methods summary:hover {
  opacity: 0.85;
}
.payment-info {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.6rem;
}
.payment-method {
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(201, 162, 39, 0.1);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}
.payment-method h4 {
  margin: 0 0 0.3rem 0;
  font-size: 0.85rem;
  color: var(--gold, #c9a227);
  font-family: var(--font-display, 'Bungee', sans-serif);
  letter-spacing: 0.02em;
}
.payment-method p {
  margin: 0.15rem 0;
  font-size: 0.82rem;
  color: var(--text, #ddd);
  line-height: 1.4;
}
.payment-method strong {
  color: #fff;
  font-family: monospace;
  font-size: 0.88rem;
}
.payment-warning {
  margin-top: 0.8rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 193, 7, 0.08);
  border-left: 3px solid var(--gold, #c9a227);
  border-radius: 4px;
  font-size: 0.78rem;
  color: #ccc;
  line-height: 1.5;
}
.payment-warning strong {
  color: var(--gold, #c9a227);
}

/* ============================================================
   CAPICÚA ANIMATION — "¡tan tan tan!" dominicano
   Overlay + ficha golpeando la mesa 3 veces
   ============================================================ */
.capicua-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(11, 61, 32, 0.92) 0%, rgba(5, 35, 19, 0.97) 70%, rgba(0, 0, 0, 0.98) 100%);
  pointer-events: none;
  animation: capicuaFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.capicua-overlay.fade-out {
  animation: capicuaFadeOut 0.5s ease forwards;
}
@keyframes capicuaFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes capicuaFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.capicua-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold-bright, #e8c34a);
  text-shadow:
    0 0 20px rgba(232, 195, 74, 0.9),
    0 0 60px rgba(232, 195, 74, 0.6),
    0 0 100px rgba(201, 162, 39, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.7);
  animation: capicuaTextPulse 0.6s ease-in-out infinite alternate;
}
@keyframes capicuaTextPulse {
  0%   { transform: scale(1);   text-shadow: 0 0 20px rgba(232, 195, 74, 0.9), 0 0 60px rgba(232, 195, 74, 0.6), 0 0 100px rgba(201, 162, 39, 0.4); }
  100% { transform: scale(1.08); text-shadow: 0 0 35px rgba(232, 195, 74, 1), 0 0 90px rgba(232, 195, 74, 0.8), 0 0 140px rgba(201, 162, 39, 0.6); }
}

.capicua-sub {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: var(--bone, #f6efdd);
  margin-top: 0.5rem;
  text-shadow: 0 0 10px rgba(246, 239, 221, 0.5);
  opacity: 0;
  animation: capicuaSubIn 0.5s 0.3s ease forwards;
}
@keyframes capicuaSubIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* La ficha que golpea */
.capicua-tile-stage {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  /* posicionada vía JS */;
}
.capicua-tile {
  width: 90px;
  height: 45px;
  background: linear-gradient(135deg, var(--bone-hi, #fbf7ec) 0%, var(--bone, #f6efdd) 50%, #e8dcc8 100%);
  border: 3px solid var(--gold, #c9a227);
  border-radius: 6px;
  box-shadow:
    0 0 25px rgba(232, 195, 74, 0.8),
    0 0 50px rgba(201, 162, 39, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: capicuaSlam 2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.capicua-tile-inner {
  font-size: 1.6rem;
  font-weight: 900;
  color: #1a1a1a;
  text-shadow: none;
}

/* 3 golpes: sube y baja con bounce */
@keyframes capicuaSlam {
  0%   { transform: translateY(-60vh) scale(0.3) rotate(-15deg); opacity: 0; }
  15%  { transform: translateY(5vh) scale(1.1) rotate(3deg); opacity: 1; }
  25%  { transform: translateY(-8vh) scale(0.95) rotate(-2deg); }
  40%  { transform: translateY(5vh) scale(1.05) rotate(1deg); }
  50%  { transform: translateY(-4vh) scale(0.98) rotate(0deg); }
  62%  { transform: translateY(5vh) scale(1.02) rotate(0deg); }
  72%  { transform: translateY(-1vh) scale(1); }
  80%  { transform: translateY(2vh) scale(1); }
  90%  { transform: translateY(0) scale(1.1); opacity: 1; }
  100% { transform: translateY(0) scale(1.5); opacity: 0; }
}

/* ============================================================
   Accesibilidad y acabado (Fase 1)
   ============================================================ */

/* Foco visible para navegación por teclado (los inputs/selects ya lo tienen). */
:where(.btn, .auth-tab, .admin-tab, .quick-chat-chip, button):focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* Respeta la preferencia de "menos movimiento" del sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Iconos SVG dentro de botones y pestañas del admin. */
.btn svg,
.admin-tab svg {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  flex-shrink: 0;
}
.admin-tab svg {
  margin-right: 6px;
}
.admin-tab {
  display: inline-flex;
  align-items: center;
}

/* Títulos de subsección espaciados en el panel admin. */
.admin-h3-spaced {
  margin-top: 1rem;
}

/* Gráfico de actividad del admin (antes era un style inline). */
.grafico-actividad {
  width: 100%;
  overflow-x: auto;
}

/* Sacudida para ficha no jugable (feedback al clic muerto). */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.hand-tile.shake {
  animation: shake 0.3s ease;
}

/* Ficha en vuelo: se oculta sin reflow (mantiene su hueco) mientras vuela el clon. */
.hand-tile.tile-flying {
  visibility: hidden;
}

/* Ficha recién robada del pozo: entra con una pequeña animación. */
.hand-tile.tile-new {
  animation: tileEnter 0.3s ease-out;
}
@keyframes tileEnter {
  from { transform: translateY(-14px) scale(0.7); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* ============================================================
   MANO QUE COLOCA LA FICHA + BARAJADO AL TERMINAR LA RONDA
   ============================================================ */
.place-hand {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
  will-change: left, top, transform, opacity;
}
.place-hand svg {
  display: block;
  width: 100%;
  height: 100%;
}

.shuffle-label {
  position: fixed;
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  background: rgba(8, 5, 2, 0.86);
  border: 1px solid var(--gold-soft, #c9a227);
  color: var(--bone, #f6efdd);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1rem;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  animation: shuffleLabelIn 0.3s ease forwards;
}
.shuffle-label.fade-out {
  animation: shuffleLabelOut 0.4s ease forwards;
}
@keyframes shuffleLabelIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes shuffleLabelOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Sacudida de las fichas al barajar: usa `translate` (no `transform`) para
   no pisar el rotate(180deg) inline de las fichas rotadas. */
.board-tile.shuffling {
  animation: tileShuffle 1s ease-in-out forwards;
}
@keyframes tileShuffle {
  0%   { translate: 0 0; }
  20%  { translate: 0 -12px; }
  40%  { translate: 8px 6px; }
  60%  { translate: -8px 2px; }
  80%  { translate: 4px -8px; }
  100% { translate: 0 0; }
}