/* =========================================================
   IKARYS GAMING — CALCULADOR PvP
   ========================================================= */

.calc-match {
  display: grid;
  grid-template-columns: 1.2fr repeat(2, 0.8fr);
  gap: var(--sp-3);
  align-items: end;
  padding: var(--sp-4);
  border: var(--border-hairline);
  background: var(--ik-black-raised);
}

.calc-match + .calc-match { border-top: none; }

#calc-matches .calc-match:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
#calc-matches .calc-match:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
#calc-matches .calc-match:only-child { border-radius: var(--radius-md); }

.calc-match__label {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.calc-match__label small {
  display: block;
  margin-top: 4px;
  color: var(--ik-grey);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calc-field label {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ik-grey);
  margin-bottom: 6px;
}

.calc-field input {
  width: 100%;
  background: var(--ik-black);
  border: 1px solid var(--ik-black-line);
  border-radius: var(--radius-sm);
  color: var(--ik-white);
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.calc-field input:focus {
  border-color: var(--ik-red);
}

.calc-match__points {
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  color: var(--ik-grey);
  min-height: 1.2em;
}

.calc-match__points[data-state="ok"] { color: var(--ik-white); }
.calc-match__points[data-state="error"] { color: var(--ik-red-bright); }

.calc-result {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--ik-red);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--ik-red-dim), var(--ik-black-raised) 70%);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: center;
}

.calc-result__badge {
  width: 160px;
  max-width: 160px;
}

.calc-result__total {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ik-grey);
}

.calc-result__points {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ik-white-pure);
}

.calc-result__rank {
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--ik-white);
}

.calc-actions {
  margin-top: var(--sp-4);
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ---------- DESGLOSE DEL RESULTADO ---------- */
.calc-breakdown {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--ik-black-raised);
}

.calc-breakdown__title {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ik-grey);
  margin-bottom: var(--sp-2);
}

.calc-breakdown__list {
  display: grid;
  gap: 2px;
}

.calc-breakdown__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: 0.55rem 0.25rem;
  border-bottom: var(--border-hairline);
  font-size: var(--fs-small);
}
.calc-breakdown__row:last-child { border-bottom: none; }

.calc-breakdown__match {
  color: var(--ik-white);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.calc-breakdown__category {
  color: var(--ik-grey);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
}

.calc-breakdown__score {
  font-family: var(--font-display);
  color: var(--ik-grey);
  white-space: nowrap;
}

.calc-breakdown__pts {
  font-family: var(--font-display);
  color: var(--ik-red-bright);
  white-space: nowrap;
  text-align: right;
  min-width: 4.5ch;
}

@media (max-width: 560px) {
  .calc-breakdown__row { grid-template-columns: 1fr auto; row-gap: 2px; }
  .calc-breakdown__score { grid-column: 1; }
  .calc-breakdown__pts { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}

@media (max-width: 560px) {
  .calc-match {
    grid-template-columns: 1fr 1fr;
  }
  .calc-match__label { grid-column: 1 / -1; }
  .calc-result {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .calc-result__badge { margin-inline: auto; }
}