/* ============================================================
   freakcoin.css — Freakcoin Rating Component
   Freakonia · Sistema de valoración con monedas pixel art
   Uso: incluir en cualquier página que muestre valoraciones
   ============================================================ */

/* ── Contenedor principal ─────────────────────────────────── */
.freakcoin-box {
  background: var(--bg-card);
  border: 4px solid var(--fc-color, var(--accent-warn));
  padding: 1.25rem 1.5rem;
  display: inline-block;
  min-width: 300px;
  max-width: 100%;
}

/* ── Título ───────────────────────────────────────────────── */
.freakcoin-title {
  font-family: var(--font-primary);
  font-size: 8px;
  color: var(--fc-color, var(--accent-warn));
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

/* ── Fila de monedas ──────────────────────────────────────── */
.freakcoin-coins {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.freakcoin-coin {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* ── Separador ────────────────────────────────────────────── */
.freakcoin-divider {
  width: 100%;
  height: 2px;
  background: var(--fc-divider, rgba(255, 204, 0, 0.2));
  margin: 0.75rem 0;
}

/* ── Fila de puntuación ───────────────────────────────────── */
.freakcoin-score-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 0.5rem;
}

.freakcoin-score {
  font-family: var(--font-primary);
  font-size: 22px;
  color: var(--fc-color, var(--accent-warn));
}

.freakcoin-score-max {
  font-family: var(--font-primary);
  font-size: 9px;
  color: var(--text-dim);
}

/* ── Veredicto ────────────────────────────────────────────── */
.freakcoin-verdict {
  font-family: var(--font-secondary);
  font-size: 20px;
  color: var(--text);
  line-height: 1.3;
}

.freakcoin-verdict strong {
  color: var(--fc-color, var(--accent-warn));
  font-weight: normal;
}

/* ── SVG de monedas (oculto, solo define símbolos) ────────── */
.freakcoin-symbols {
  display: none;
  position: absolute;
}

/* ── Variantes de color por puntuación ───────────────────── */
/* Se aplican via JS añadiendo data-fc-tier al .freakcoin-box */

.freakcoin-box[data-fc-tier="gold"] {
  --fc-color:   #ffcc00;
  --fc-divider: rgba(255, 204, 0, 0.2);
}

.freakcoin-box[data-fc-tier="purple"] {
  --fc-color:   #cc44ff;
  --fc-divider: rgba(204, 68, 255, 0.2);
}

.freakcoin-box[data-fc-tier="green"] {
  --fc-color:   #00ff41;
  --fc-divider: rgba(0, 255, 65, 0.2);
}

.freakcoin-box[data-fc-tier="blue"] {
  --fc-color:   #00bfff;
  --fc-divider: rgba(0, 191, 255, 0.2);
}

.freakcoin-box[data-fc-tier="red"] {
  --fc-color:   #ff3131;
  --fc-divider: rgba(255, 49, 49, 0.2);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .freakcoin-box {
    min-width: unset;
    width: 100%;
    padding: 1rem;
  }

  .freakcoin-coin {
    width: 22px;
    height: 22px;
  }

  .freakcoin-score {
    font-size: 18px;
  }
}