/* tubes.css — Tubos / Eureka */

/* Fondo dorado para diferenciarlo del menú púrpura */
body.game-page {
  background: linear-gradient(150deg, #E65C00 0%, #F9D423 100%);
}

/* Header adaptado al fondo amarillo */
.game-header {
  background: rgba(0, 0, 0, 0.18);
}
.btn-volver {
  background: rgba(0, 0, 0, 0.15);
  color: #1a0a00;
}
.game-titulo {
  color: #1a0a00;
}
.nivel-badge {
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
}

/* Área de juego */
#game-area {
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 0.5rem;
  justify-content: center;
}

/* ── Objetivo ── */
.tb-goal {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 16px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.tb-goal-lbl {
  font-size: 0.9rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.5px;
}

/* ── Divisor ── */
.tb-divider {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
}

/* ── Filas de tubos ── */
.tb-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
}
.tb-player-row { gap: 0.75rem; }

/* ── Tubo base ── */
.tb-tube {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid rgba(255, 255, 255, 0.55);
  border-top: none;
  border-radius: 0 0 999px 999px;
  background: rgba(0, 0, 0, 0.2);
  position: relative;
  padding: 4px 4px 8px;
  transition: box-shadow 0.15s, border-color 0.15s;
}

/* Labios superiores del tubo */
.tb-tube::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -3px;
  right: -3px;
  height: 10px;
  border: 3px solid rgba(255, 255, 255, 0.55);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  pointer-events: none;
}

/* Tamaños */
.tb-big   { width: 56px; cursor: pointer; }
.tb-small { width: 36px; cursor: default; }

/* ── Slot (posición de bolita) ── */
.tb-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tb-big   .tb-slot { width: 44px; height: 44px; }
.tb-small .tb-slot { width: 28px; height: 28px; }

/* ── Bolita ── */
.tb-ball {
  border-radius: 50%;
  box-shadow:
    inset -3px -4px 6px rgba(0, 0, 0, 0.3),
    inset  3px  3px 6px rgba(255, 255, 255, 0.35);
  transition: transform 0.12s, box-shadow 0.12s;
}
.tb-big   .tb-ball { width: 38px; height: 38px; }
.tb-small .tb-ball { width: 22px; height: 22px; }

/* Bolita superior: ligeramente elevada, anillo visual */
.tb-big .tb-ball.tb-top {
  transform: translateY(-3px);
  box-shadow:
    inset -3px -4px 6px rgba(0, 0, 0, 0.3),
    inset  3px  3px 6px rgba(255, 255, 255, 0.35),
    0 0 0 3px rgba(255, 255, 255, 0.45);
}

/* Tubo seleccionado */
.tb-tube.tb-sel {
  border-color: #fff176;
  box-shadow: 0 0 0 3px #fff176, 0 0 20px rgba(255, 241, 118, 0.6);
}
.tb-tube.tb-sel::before {
  border-color: #fff176;
}
.tb-tube.tb-sel:active { transform: scale(0.97); }

/* Botón footer */
.game-footer {
  background: rgba(0, 0, 0, 0.15);
}
.btn-accion {
  background: rgba(255, 255, 255, 0.9);
  color: #1a0a00;
}
.btn-siguiente {
  background: #6BCB77;
  color: #fff;
}