/* Dominoes — tool-specific styles. Shared styles live in assets/css/.
   Reasoning module accent (teal --mod-razonamiento).
   Tiles are drawn with real pips (3×3 grid per half,
   classes .pip.pos0 … .pip.pos8 depending on the value). */

.tool-header h1 { color: var(--mod-razonamiento); }

.btn:not(.btn-secundario) {
  background: var(--mod-razonamiento);
}

.instruccion { font-size: var(--texto-base); }

.centrado-fila { justify-content: center; }

.btn-nivel { min-width: 300px; align-self: center; }

.nivel-info {
  font-weight: 400;
  font-size: var(--texto-pequeno);
  opacity: 0.9;
}

.estado {
  font-size: var(--texto-base);
  font-weight: 700;
  min-height: 1.4em;
}

.etiqueta {
  font-weight: 700;
  color: var(--color-texto-suave);
}

/* ---- La mesa: cadena horizontal con scroll propio ---- */
.cadena-marco {
  width: 100%;
  padding: 12px;
  background: var(--color-superficie);
  border: 3px solid var(--color-borde);
  border-radius: var(--radio);
  overflow-x: auto;
}

.cadena {
  display: flex;
  gap: 4px;
  justify-content: safe center;
  min-height: 64px;
  align-items: center;
  width: max-content;
  margin: 0 auto;
}

/* ---- Fichas ---- */
.ficha {
  display: flex;
  flex: none;
  background: #FFFFFF;
  border: 3px solid var(--color-texto);
  border-radius: 10px;
  padding: 0;
}

.mitad {
  position: relative;
  width: 44px;
  height: 44px;
}

.mitad:first-child { border-right: 3px solid var(--color-texto); }

.pip {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-texto);
}

/* Rejilla 3×3: posiciones 0-8 (fila a fila) */
.pip.pos0 { left: 15%; top: 15%; }
.pip.pos1 { left: 50%; top: 15%; transform: translateX(-50%); }
.pip.pos2 { right: 15%; top: 15%; }
.pip.pos3 { left: 15%; top: 50%; transform: translateY(-50%); }
.pip.pos4 { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pip.pos5 { right: 15%; top: 50%; transform: translateY(-50%); }
.pip.pos6 { left: 15%; bottom: 15%; }
.pip.pos7 { left: 50%; bottom: 15%; transform: translateX(-50%); }
.pip.pos8 { right: 15%; bottom: 15%; }

/* ---- La mano: fichas tocables grandes ---- */
.mano {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio);
  justify-content: center;
}

.mano .ficha.jugable {
  cursor: pointer;
  font-family: inherit;
}

.mano .ficha.jugable .mitad { width: 64px; height: 64px; }
.mano .ficha.jugable .pip { width: 13px; height: 13px; }

.mano .ficha.jugable:not(:disabled):hover { border-color: var(--mod-razonamiento); }

.mano .ficha.jugable:disabled { opacity: 0.6; cursor: default; }

/* Ficha esperando a elegir lado */
.ficha.pendiente {
  border-color: var(--mod-razonamiento);
  box-shadow: 0 0 0 4px var(--mod-razonamiento-suave);
}

/* Fichas jugables marcadas tras el segundo fallo */
.ficha.sugerida {
  border-color: var(--mod-razonamiento);
  box-shadow: 0 0 0 4px var(--mod-razonamiento-suave);
}

/* ---- Boneyard and opponent info ---- */
.monton {
  min-width: 88px;
  min-height: 72px;
  font-size: var(--texto-grande);
}

.rival-info {
  font-weight: 700;
  color: var(--color-texto-suave);
}

.lados .btn { min-width: 200px; }

@media (max-width: 480px) {
  .mitad { width: 36px; height: 36px; }
  .mano .ficha.jugable .mitad { width: 56px; height: 56px; }

#pantallaFinal .transferencia {
  margin: 8px auto 24px;
  font-size: 1.1rem;
  color: var(--color-texto-secundario, #555);
  max-width: 480px;
}
}