/* Combat tab (cb-*): totals with the round diamonds and feats, Versus (mirrored bars, sky for rounds you won, garnet
   for theirs), and the damage panel (dealt, taken, utility, season curve). Long lists scroll inside their panels so
   the tab reads as one screen on a desktop. */

.cb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.cb-totals {
  grid-column: 1 / -1;
}

.cb-versus,
.cb-damage {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The scroll area of every list: the rest of the screen, so the tab ends at the fold from 1080p up; never below 300px. */
.cb-list {
  max-height: max(300px, calc(100vh - 740px));
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.cb .is-won { color: var(--j-ember-200); }
.cb .is-lost { color: var(--j-rust-light); }
.cb .is-heal { color: var(--j-up-color); }
.cb .is-cc { color: var(--j-prism-violet); }

/* ---------- Totals ---------- */

.cb-totals__body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: 24px;
  padding: 0 8px;
}

.cb-kda {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  text-align: center;
}

.cb-kda .j-stat__value {
  font-size: 26px;
}

.cb-dias {
  display: flex;
  gap: 18px;
}

/* A rotated square with the value upright, popping in with overshoot; won is sky, the rate gold. */
.cb-dia {
  position: relative;
  display: grid;
  justify-items: center;
  width: 96px;
  animation: j-pop 0.45s var(--j-ease-pop) backwards;
  animation-delay: var(--d, 0s);
}

.cb-dia__shape {
  grid-area: 1 / 1;
  width: 54px;
  height: 54px;
  margin: 10px 0;
  border: 1px solid rgba(var(--j-gold-rgb), 0.45);
  background: linear-gradient(160deg, rgba(var(--j-coal-700-rgb), 0.9), rgba(var(--j-ink-rgb), 0.95));
  transform: rotate(45deg);
  transition: border-color var(--j-dur) var(--j-ease-out), box-shadow var(--j-dur) var(--j-ease-out);
}

.cb-dia:hover .cb-dia__shape {
  border-color: var(--j-gold-200);
  box-shadow: 0 0 22px rgba(var(--j-gold-rgb), 0.25);
}

.cb-dia.is-won .cb-dia__shape {
  border-color: rgba(var(--j-ember-rgb), 0.7);
  box-shadow: 0 0 18px rgba(var(--j-ember-rgb), 0.18);
}

.cb-dia.is-gold .cb-dia__shape {
  border-color: rgba(var(--j-gold-rgb), 0.75);
  box-shadow: 0 0 18px rgba(var(--j-gold-rgb), 0.2);
}

.cb-dia__value {
  position: relative;
  grid-area: 1 / 1;
  align-self: center;
  font-family: var(--j-display);
  font-size: 19px;
  color: var(--j-gold-50);
}

.cb-dia.is-won .cb-dia__value { color: var(--j-ember-100); }
.cb-dia.is-gold .cb-dia__value { color: var(--j-gold-200); }

.cb-dia__label {
  font-size: 9.5px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-muted);
  white-space: nowrap;
}

.cb-feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0;
}

.cb-feats dt {
  font-size: 9.5px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-muted);
  white-space: nowrap;
}

.cb-feats dd {
  margin: 3px 0 0;
  font-family: var(--j-display);
  font-size: 22px;
  line-height: 1;
  color: var(--j-gold-50);
}

.cb-feats__note dd {
  font-family: var(--j-sans);
  font-size: 12px;
  color: var(--j-dim);
}

/* ---------- Versus and utility rows ---------- */

.cb-vs-head,
.cb-vs {
  display: grid;
  grid-template-columns: 44px minmax(40px, 1fr) minmax(130px, 170px) minmax(40px, 1fr) 44px 46px;
  align-items: center;
  column-gap: 10px;
}

.cb-vs-head--util,
.cb-vs--util {
  grid-template-columns: 52px minmax(40px, 1fr) minmax(130px, 170px) minmax(40px, 1fr) 44px;
}

.cb-vs-head {
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--j-line);
  font-size: 9.5px;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: var(--j-muted);
}

.cb-vs-head span:nth-child(1) { grid-column: 1 / span 2; text-align: right; }
.cb-vs-head span:nth-child(2) { grid-column: 3; }
.cb-vs-head span:nth-child(3) { grid-column: 4 / span 2; }
.cb-vs-head span:nth-child(4) { grid-column: 6; text-align: right; }

.cb-vs {
  min-height: 46px;
  padding: 3px 8px;
  border: 1px solid transparent;
  cursor: default;
  animation: kt-row-in 0.45s var(--j-ease) backwards;
  animation-delay: var(--d, 0s);
}

.cb-vs.is-selected {
  border-color: rgba(var(--j-gold-rgb), 0.35);
  background: rgba(var(--j-gold-rgb), 0.06);
}

.cb-vs__n {
  font-family: var(--j-display);
  font-size: 16px;
  text-align: right;
}

.cb-vs__n.is-lost,
.cb-vs__n.is-cc {
  text-align: left;
}

.cb-vs__track {
  display: flex;
  height: 8px;
  background: rgba(var(--j-white-rgb), 0.05);
}

.cb-vs__track--won,
.cb-vs__track--heal {
  justify-content: flex-end;
}

.cb-vs__track i {
  display: block;
  height: 100%;
  box-shadow: var(--j-bar-edge);
  animation: j-grow 0.8s var(--j-ease) backwards;
  animation-delay: calc(var(--d, 0s) + 120ms);
}

.cb-vs__track--won i { background: var(--j-gloss), var(--j-ember-300); transform-origin: right; }
.cb-vs__track--lost i { background: var(--j-gloss), var(--j-rust-light); transform-origin: left; }
.cb-vs__track--heal i { background: var(--j-gloss), var(--j-up-color); transform-origin: right; }
.cb-vs__track--cc i { background: var(--j-gloss), var(--j-prism-violet); transform-origin: left; }

.cb-vs__track--won i { animation-name: cb-grow-left; }
.cb-vs__track--heal i { animation-name: cb-grow-left; }

@keyframes cb-grow-left {
  from { transform: scaleX(0); }
}

.cb-vs__champ,
.cb-champ {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cb-vs__champ > span,
.cb-champ > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cb-vs__champ b,
.cb-champ b {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--j-text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cb-vs__champ small,
.cb-champ small {
  font-size: 9.5px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-dim);
}

.cb-vs .j-icon,
.cb-dmg .j-icon {
  transition: transform var(--j-dur) var(--j-ease-out);
}

.cb-vs:hover .j-icon,
.cb-dmg:hover .j-icon {
  transform: scale(1.1);
}

.cb-vs__rate {
  font-family: var(--j-display);
  font-size: 15px;
  text-align: right;
}

/* Totals under Versus: big Beaufort numbers either side and a split bar. */
.cb-total {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--j-line);
}

.cb-total__side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.cb-total__side.is-right {
  align-items: flex-end;
}

.cb-total__side > span:last-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cb-total__side b {
  font-family: var(--j-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.cb-total__side small {
  font-family: var(--j-display);
  font-size: 13px;
  color: var(--j-muted);
}

.cb-total__bar {
  grid-column: 1 / -1;
  display: flex;
  gap: 2px;
  height: 6px;
  margin-top: 10px;
}

.cb-total__bar i {
  box-shadow: var(--j-bar-edge);
  transform-origin: left;
  animation: j-grow 1s var(--j-ease) 0.3s backwards;
}

.cb-total__bar i.is-won { background: var(--j-gloss), var(--j-ember-300); }
.cb-total__bar i.is-lost { background: var(--j-gloss), var(--j-rust-light); }

.cb-total__note {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 10px;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: var(--j-dim);
  text-align: center;
}

/* ---------- Damage panel ---------- */

.cb-damage__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.cb-damage__top .j-head {
  flex: 1;
  min-width: 0;
}

.cb-damage__top .kt-subtabs {
  margin-top: -6px;
}

.cb-damage .kt-sorted {
  flex-wrap: wrap;
}

.cb-legend,
.cb-curve__key {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-left: auto;
}

.cb-legend span,
.cb-curve__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cb-legend i {
  width: 8px;
  height: 8px;
}

.cb-dmg-head,
.cb-dmg {
  display: grid;
  align-items: center;
  column-gap: 12px;
}

.cb-dmg--4 .cb-dmg,
.cb-dmg-head.cb-dmg--4 {
  grid-template-columns: minmax(130px, 170px) minmax(60px, 1fr) 58px 52px 52px 52px;
}

.cb-dmg--3 .cb-dmg,
.cb-dmg-head.cb-dmg--3 {
  grid-template-columns: minmax(130px, 170px) minmax(60px, 1fr) 58px 66px 62px;
}

.cb-dmg-head {
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--j-line);
  font-size: 9.5px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  color: var(--j-muted);
}

.cb-dmg-head span:nth-child(n + 3) {
  text-align: right;
}

.cb-dmg {
  min-height: 46px;
  padding: 3px 8px;
  animation: kt-row-in 0.45s var(--j-ease) backwards;
  animation-delay: var(--d, 0s);
}

.cb-dmg__bar {
  display: flex;
  height: 8px;
  background: rgba(var(--j-white-rgb), 0.04);
}

.cb-dmg__bar i {
  display: block;
  height: 100%;
  background-image: var(--j-gloss);
  box-shadow: var(--j-bar-edge);
  transform-origin: left;
  animation: j-grow 0.8s var(--j-ease) backwards;
  animation-delay: calc(var(--d, 0s) + 120ms);
}

.cb-dmg__v {
  font-family: var(--j-display);
  font-size: 14px;
  color: var(--j-text-2);
  text-align: right;
}

.cb-dmg__v.is-main { color: var(--j-gold-50); font-size: 15px; }
.cb .is-phys { color: var(--j-bronze-light); }
.cb .is-magic { color: var(--j-magic); }
.cb .is-true { color: var(--j-true-damage); }
.cb-dmg__v.is-phys,
.cb-dmg__v.is-magic { opacity: 0.85; }

.cb-comps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--j-line);
}

.cb-comp__label {
  margin: 0;
}

.cb-comp__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 8px;
}

.cb-comp__head b {
  font-family: var(--j-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: var(--j-gold-50);
}

.cb-comp__head small {
  font-family: var(--j-display);
  font-size: 13px;
  color: var(--j-muted);
}

.cb-comp__bar {
  display: flex;
  gap: 2px;
  height: 5px;
}

.cb-comp__bar i {
  background-image: var(--j-gloss);
  transform-origin: left;
  animation: j-grow 1s var(--j-ease) 0.3s backwards;
}

.cb-comp__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0 0;
  font-size: 9.5px;
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
}

.cb-comp__note,
.cb-comp__best {
  margin: 0;
  font-size: 11px;
  color: var(--j-dim);
}

.cb-comp__best {
  letter-spacing: var(--j-track-label);
  text-transform: uppercase;
  font-size: 9.5px;
}

.cb-comp__best b {
  margin: 0 4px;
  font-family: var(--j-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ---------- Curve ---------- */

.cb-curve {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: max(240px, calc(100vh - 770px));
  margin-bottom: 14px;
}

.cb-curve__svg {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: visible;
}

.cb-curve__grid {
  stroke: rgba(var(--j-gold-rgb), 0.1);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.cb-curve__tick {
  font-family: var(--j-sans);
  font-size: 10px;
  fill: var(--j-dim);
}

.cb-curve__bars rect {
  opacity: 0.38;
  transform-box: fill-box;
  transform-origin: bottom;
  animation: cb-bar-in 0.6s var(--j-ease) backwards;
}

@keyframes cb-bar-in {
  from { transform: scaleY(0); }
}

.cb-curve__area {
  animation: j-fade 0.9s var(--j-ease-std) 0.5s backwards;
}

.cb-curve__line {
  fill: none;
  stroke: var(--j-ember-200);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  animation: cb-draw 1.6s var(--j-ease) 0.2s backwards;
  filter: drop-shadow(0 0 6px rgba(var(--j-ember-rgb), 0.6));
}

@keyframes cb-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.cb-curve__key i {
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--j-ember-200);
}

.cb-curve__key i.is-bar {
  width: 4px;
  height: 10px;
  margin-left: 8px;
  background: var(--j-p1);
  opacity: 0.6;
}

.cb-curve__hover {
  position: absolute;
  top: 6px;
  width: 160px;
  padding: 6px 9px;
  border: 1px solid rgba(var(--j-gold-rgb), 0.45);
  background: rgba(var(--j-ink-rgb), 0.92);
  font-size: 11.5px;
  color: var(--j-text-2);
  pointer-events: none;
}

.cb-curve__hover b {
  font-family: var(--j-display);
  font-weight: 400;
  color: var(--j-gold-100);
}

.cb-curve__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--j-line);
}

.cb-curve__facts > div + div {
  padding-left: 14px;
  border-left: 1px solid var(--j-line-divider);
}

.cb-curve__facts dt {
  font-size: 9.5px;
  letter-spacing: var(--j-track-meta);
  text-transform: uppercase;
  color: var(--j-muted);
}

.cb-curve__facts dd {
  margin: 6px 0 0;
  font-family: var(--j-display);
  font-size: 24px;
  line-height: 1;
  color: var(--j-gold-50);
}

.cb-curve__best {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--j-sans);
  font-size: 12px;
  color: var(--j-muted);
  text-decoration: none;
  transition: color var(--j-dur-fast) var(--j-ease-std);
}

.cb-curve__best b {
  font-family: var(--j-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--j-gold-50);
}

.cb-curve__best:hover {
  color: var(--j-gold-100);
}

/* ---------- Responsive ---------- */

@media (max-width: 1500px) {
  .cb-totals__body {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .cb-feats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .cb {
    grid-template-columns: minmax(0, 1fr);
  }
  .cb-totals__body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .cb-list {
    max-height: 520px;
  }
}

@media (max-width: 700px) {
  .cb-kda .j-stat__value { font-size: 22px; }
  .cb-dias { flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
  .cb-dia { width: 120px; }
  .cb-dia__shape { width: 46px; height: 46px; }
  .cb-dia__value { font-size: 15px; }
  .cb-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cb-vs-head,
  .cb-vs {
    grid-template-columns: 30px minmax(20px, 1fr) minmax(96px, 120px) minmax(20px, 1fr) 30px;
    column-gap: 6px;
  }
  .cb-vs-head--util,
  .cb-vs--util { grid-template-columns: 40px minmax(20px, 1fr) minmax(96px, 120px) minmax(20px, 1fr) 34px; }
  .cb-vs__rate,
  .cb-vs-head span:nth-child(4) { display: none; }
  .cb-vs__champ .j-icon { display: none; }
  .cb-dmg--4 .cb-dmg,
  .cb-dmg-head.cb-dmg--4,
  .cb-dmg--3 .cb-dmg,
  .cb-dmg-head.cb-dmg--3 { grid-template-columns: minmax(100px, 1fr) minmax(40px, 1fr) 54px; }
  .cb-dmg__v:not(.is-main),
  .cb-dmg-head span:nth-child(n + 4) { display: none; }
  .cb-damage__top { flex-direction: column; gap: 0; }
  .cb-comps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cb-curve__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .cb-curve__facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* The by-champion part of a view whose totals are free, locked for this viewer. */
.cb-lock {
  margin: 8px 0 14px;
}