/* =============================================
   JUEGO RASGOS CRÍTICOS — EVIN
   Fondo negro, formas sobre negro, parcial vs completo
   ============================================= */

body.solo-juego #juego-rasgos {
  background: #000 !important;
  color: #fff;
  min-height: 100dvh;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
}

/* ── Panel de controles ───────────────────────────────────── */
.rasgos-panel-controles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.rasgos-panel-controles p {
  color: #ccc;
  font-size: 0.9rem;
  margin: 0;
}

.rasgos-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-size: 0.95rem;
  color: #fff;
  align-items: center;
}

.rasgos-info strong { color: #ff0; }

/* ── Objetivo (forma parcial) ─────────────────────────────── */
.rasgos-objetivo-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #111;
  border: 3px solid #fff;
  border-radius: 10px;
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.rasgos-objetivo-wrap p {
  color: #ccc;
  font-size: 0.85rem;
  margin: 0;
}

#rasgos-objetivo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 700;
}

#rasgos-objetivo svg {
  width: clamp(40px, 8vw, 70px);
  height: clamp(40px, 8vw, 70px);
}

/* ── Botones ──────────────────────────────────────────────── */
.rasgos-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

#rasgos-nivel {
  background: #111;
  color: #fff;
  border: 1.5px solid #555;
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
}

/* ── Tablero ──────────────────────────────────────────────── */
#rasgos-grid {
  display: grid;
  gap: clamp(4px, 1vw, 8px);
  justify-content: center;
  align-content: start;
  flex: 1;
  width: 100%;
}

/* ── Celda ────────────────────────────────────────────────── */
.rasgos-cell {
  width:  var(--rasgos-cell-size, 72px);
  height: var(--rasgos-cell-size, 72px);
  border-radius: 6px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s ease;
  border: 1px solid #222;
}

.rasgos-cell:hover { transform: scale(1.06); }
.rasgos-cell:active { transform: scale(0.96); }

.rasgos-svg-wrap {
  width: 85%;
  height: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rasgos-svg-wrap svg {
  width: 100%;
  height: 100%;
}

/* ── Estados ──────────────────────────────────────────────── */
.rasgos-cell-correcta {
  outline: 4px solid #0f0;
  outline-offset: 2px;
  box-shadow: 0 0 8px rgba(0,255,0,0.3);
}

.rasgos-cell-incorrecta {
  outline: 4px solid #f00;
  outline-offset: 2px;
  box-shadow: 0 0 8px rgba(255,0,0,0.3);
}

.rasgos-cell-faltante {
  outline: 4px solid #f80;
  outline-offset: 2px;
  box-shadow: 0 0 8px rgba(255,128,0,0.3);
}

/* ── Alto contraste ───────────────────────────────────────── */
body.alto-contraste #juego-rasgos { background: #000 !important; }
body.alto-contraste .rasgos-cell  { background: #000 !important; border-color: #555 !important; }
body.alto-contraste .rasgos-objetivo-wrap { border-color: #ff0 !important; }
body.alto-contraste .rasgos-info,
body.alto-contraste .rasgos-panel-controles p { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .rasgos-info { gap: 0.5rem 1rem; font-size: 0.85rem; }
  .rasgos-botones .btn,
  .rasgos-botones .btn-secundario { font-size: 0.8rem; padding: 0.4rem 0.8rem; }
}