/* ==========================================================================
   DOMINÓ - ESTILO INTEGRADO NOWEY JUEGOS (misma base que Damas/Solitario)
   ========================================================================= */

:root {
  --color-neon-blue: #00b7ff;
  --color-neon-green: #39ff14;
  --color-neon-orange: #ff6c00;
  --bg-dark-box: rgba(10, 21, 32, 0.85);
  --border-neon: 1px solid rgba(0, 183, 255, 0.2);
}

body {
  background-color: #050a0e;
  color: #e2e8f0;
  font-family: 'Chakra Petch', 'Courier New', monospace;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* MESA */
.mesa {
  position: relative;
  background: var(--bg-dark-box);
  border: var(--border-neon);
  border-radius: 16px;
  max-width: 640px;
  width: calc(100% - 24px);
  margin: 0 auto;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  text-align: center;
}

/* ── BARRA SUPERIOR: fase / marcadores / cerrar ── */
.game-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: rgba(5, 10, 14, 0.85);
  border: 1px solid rgba(0, 183, 255, 0.25);
  border-radius: 10px;
}
.header-fase {
  color: var(--color-neon-orange);
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 1px;
  white-space: nowrap;
}
.header-stats { display: flex; gap: 14px; font-size: 0.68rem; color: #94a3b8; letter-spacing: 0.5px; }
.header-stats b { font-size: 0.9rem; margin-left: 4px; }
.stat-green { color: var(--color-neon-green); }
.stat-pink { color: #ff2d78; }
.stat-orange { color: var(--color-neon-orange); }

/* ── BARRA DE INSTRUCCIONES + CONTROLES DE SELECCIÓN ── */
.game-instructions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: rgba(255, 108, 0, 0.06);
  border: 1px solid rgba(255, 108, 0, 0.3);
  border-radius: 10px;
  font-size: 0.72rem;
  color: #e2e8f0;
}
.controles-seleccion { display: none; gap: 6px; flex-wrap: wrap; }
.btn-mini {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: 0.64rem;
  padding: 6px 10px;
  border-radius: 16px;
  cursor: pointer;
  letter-spacing: 0.5px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.btn-mini-lado { border: 1px solid var(--color-neon-blue); color: var(--color-neon-blue); }
.btn-mini-lado:active { background: rgba(0, 183, 255, 0.15); }
.btn-mini-cancelar { border: 1px solid #ff2d78; color: #ff2d78; }
.btn-mini-cancelar:active { background: rgba(255, 45, 120, 0.15); }
.opciones-lado { display: flex; gap: 6px; flex-wrap: wrap; }

/* Ficha flotante que sigue al dedo/cursor mientras se mantiene presionada */
.ficha-arrastre-flotante {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -130%) scale(1.15);
  pointer-events: none;
  z-index: 99999;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(0,183,255,0.5));
}

/* ── ÁREA PRINCIPAL: tablero + paneles laterales ── */
.game-main-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* ── TABLERO DE FICHAS JUGADAS ── */
.board-panel {
  position: relative;
  width: 100%;
  min-height: min(48vh, 380px);
  background: rgba(4, 8, 12, 0.45);
  border: 1px solid rgba(0, 183, 255, 0.35);
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  padding: 16px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-panels { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.panel-box { background: rgba(5, 10, 14, 0.85); border-radius: 10px; padding: 8px 10px; box-sizing: border-box; }
.panel-estado-box { border: 1px solid rgba(255, 45, 120, 0.3); }
.panel-logs-box { border: 1px solid rgba(57, 255, 20, 0.25); max-height: 90px; overflow-y: auto; }
.panel-titulo { font-size: 0.68rem; font-weight: 900; letter-spacing: 1px; margin-bottom: 6px; }
.panel-titulo-pink { color: #ff2d78; }
.panel-titulo-green { color: var(--color-neon-green); }
.panel-linea { display: flex; justify-content: space-between; font-size: 0.7rem; color: #94a3b8; margin-bottom: 4px; }
.panel-linea b { color: #e2e8f0; }
.panel-msg { font-size: 0.72rem; color: #e2e8f0; line-height: 1.3; }
.log-lista { font-size: 0.62rem; color: #7fdc9c; line-height: 1.5; }
.log-entry { opacity: 0.9; }

.mesa-logo-fondo {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  max-width: 220px;
  opacity: 0.14;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(0, 183, 255, 0.3));
}

.chain-track {
  position: relative;
  z-index: 1;
}
.chain-empty {
  position: relative;
  z-index: 1;
  width: 100%; height: 106px;
  display: flex; align-items: center; justify-content: center;
  color: #3a4658; font-size: 0.8rem; letter-spacing: 1px;
}

/* Ficha de dominó (usada en la mano)
   Tono marfil clásico, con brillo neón sutil en el borde y
   puntos oscuros con halo blanco tipo neón para que resalten
   y sean fáciles de leer de un vistazo. */
.ficha {
  display: flex;
  flex-shrink: 0;
  background: linear-gradient(155deg, #0e1e2a, #050b10);
  border: 1.5px solid rgba(0, 183, 255, 0.65);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 12px rgba(0, 183, 255, 0.3), inset 0 0 8px rgba(0, 183, 255, 0.08);
  overflow: hidden;
}
.ficha-mitad {
  width: 26px; height: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  padding: 4px;
  box-sizing: border-box;
}
.ficha-mitad + .ficha-mitad { border-left: 1.5px solid rgba(0, 183, 255, 0.3); }
.pip { border-radius: 50%; align-self: center; justify-self: center; width: 4.5px; height: 4.5px; }
.pip.on {
  background: var(--color-neon-green);
  box-shadow: 0 0 4px 1.5px rgba(57,255,20,0.9), 0 0 9px rgba(57,255,20,0.6);
}

/* Ficha jugable en la mano del usuario */
.ficha-mano {
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  transition: transform 0.15s ease;
  touch-action: none;
}
.ficha-mano .ficha { border-color: rgba(255, 108, 0, 0.5); }
.ficha-mano.jugable .ficha { border-color: var(--color-neon-green); box-shadow: 0 0 8px rgba(57,255,20,0.4); }
.ficha-mano.jugable:active { transform: translateY(-4px); }
.ficha-mano:not(.jugable) { opacity: 0.4; cursor: default; }
.ficha-mano.seleccionada .ficha { box-shadow: 0 0 12px var(--color-neon-orange); border-color: var(--color-neon-orange); }

.mano-usuario-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 12px 0;
  padding: 8px;
  background: rgba(5, 10, 14, 0.5);
  border-radius: 8px;
}

/* Fichas dibujadas sobre el tablero (posicionamiento absoluto) */
.ficha-board {
  position: absolute;
  display: flex;
  background: linear-gradient(155deg, #0e1e2a, #050b10);
  border: 1.5px solid rgba(0, 183, 255, 0.65);
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 10px rgba(0, 183, 255, 0.3), inset 0 0 6px rgba(0, 183, 255, 0.08);
  box-sizing: border-box;
  transition: left 0.2s ease, top 0.2s ease;
}
.ficha-board.horizontal { flex-direction: row; }
.ficha-board.vertical { flex-direction: column; }
.ficha-board.doble {
  border-color: var(--color-neon-orange);
  box-shadow: 0 0 10px rgba(255,108,0,0.5);
  z-index: 2;
}
.mitad-board {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  padding: 3px;
  box-sizing: border-box;
}
.ficha-board.horizontal .mitad-board + .mitad-board { border-left: 1px solid rgba(0, 183, 255, 0.3); }
.ficha-board.vertical .mitad-board + .mitad-board { border-top: 1px solid rgba(0, 183, 255, 0.3); }

/* Ficha fantasma: previsualización semitransparente de dónde caerá la ficha */
.ficha-board-ghost {
  border-color: var(--color-neon-green) !important;
  box-shadow: 0 0 14px rgba(57, 255, 20, 0.7) !important;
  cursor: pointer;
  z-index: 5;
  animation: ghost-pulse 1s ease-in-out infinite;
}
@keyframes ghost-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.8; }
}

.zona-botones-arcade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.btn-action {
  width: 100%; background: transparent; padding: 10px; border-radius: 6px;
  font-family: 'Chakra Petch', 'Courier New', monospace; font-weight: 700; font-size: 0.8rem;
  cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 1px; box-sizing: border-box;
}
.btn-orange { border: 1px solid var(--color-neon-orange); color: var(--color-neon-orange); }
.btn-orange:hover { background: rgba(255, 108, 0, 0.1); }
.btn-blue { border: 1px solid var(--color-neon-blue); color: var(--color-neon-blue); }
.btn-blue:hover { background: rgba(0, 183, 255, 0.1); }
.btn-green { border: 1px solid var(--color-neon-green); color: var(--color-neon-green); }
.btn-green:hover { background: rgba(57, 255, 20, 0.1); }
.btn-action:disabled { opacity: 0.3; cursor: not-allowed; }

/* OVERLAY MENÚ DE MODO */
.overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5, 10, 14, 0.92);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.overlay.oculto { display: none !important; }
.mensaje-alerta { padding: 20px; text-align: center; width: 100%; box-sizing: border-box; }
.mensaje-alerta h2 {
  color: var(--color-neon-green); font-family: 'Orbitron', sans-serif; font-size: 1.3rem;
  margin: 0 0 16px 0; text-shadow: 0 0 10px rgba(57, 255, 20, 0.4); letter-spacing: 1px;
}
.mensaje-alerta p { color: #94a3b8; font-size: 0.85rem; margin-bottom: 15px; }
.mensaje-alerta .btn-action { max-width: 240px; margin: 0 auto 10px auto; }
.btn-action.proximamente {
  border: 1px dashed #4a5568 !important;
  color: #4a5568 !important;
  cursor: not-allowed;
}

.staff-footer-note { margin-top: 15px; font-size: 0.85rem; }
.staff-footer-note a { color: var(--color-neon-blue); text-decoration: none; font-weight: bold; }

/* FOOTER GLOBAL */
.site-footer {
    background-color: #020508; padding: 25px 0; text-align: center;
    font-family: 'Chakra Petch', 'Courier New', monospace; font-size: 0.95rem; font-weight: 700;
    border-top: 1px solid rgba(0, 183, 255, 0.2); box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.8);
}@media (max-width: 480px) {
  .zona-botones-arcade { grid-template-columns: 1fr; }
}

/* ── BOTÓN PANTALLA COMPLETA (vive dentro de game-header-bar) ── */
.btn-fullscreen-toggle {
  flex-shrink: 0;
  background: rgba(5,10,14,0.75);
  border: 1px solid rgba(0,183,255,0.4);
  color: #00b7ff;
  font-family: 'Chakra Petch', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.btn-fullscreen-toggle:active { background: rgba(0,183,255,0.2); }
.btn-fullscreen-toggle.cerrar-activo {
  border-color: #ff2d78;
  color: #ff2d78;
  background: rgba(255, 45, 120, 0.08);
}

/* ── MODO PANTALLA COMPLETA (vertical / portrait) ── */
body.modo-completo {
  overflow: hidden;
}
body.modo-completo .logo-header,
body.modo-completo .main-header,
body.modo-completo .site-footer,
body.modo-completo .staff-footer-note {
  display: none !important;
}
body.modo-completo .mesa {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  border-radius: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow-y: auto;
  padding: 10px 14px;
  background: radial-gradient(ellipse at center, #0a1e2e 0%, #050a0e 70%);
  box-sizing: border-box;
}
/* En vertical seguimos apilando tablero arriba y paneles abajo, pero con más alto disponible */
body.modo-completo .game-main-area { flex-direction: column; flex: 1; min-height: 0; }
body.modo-completo .board-panel { flex: 1 1 auto; min-height: 320px; }
body.modo-completo .side-panels { flex: 0 0 auto; }
body.modo-completo .panel-logs-box { max-height: 120px; }
body.modo-completo .mano-usuario-wrap { max-width: 96%; }