/*
  Quick visual tuning for Who's the Strongest?

  Edit the numbers in :root, save this file, then refresh the browser.
  Keep units such as px, rem, vw, and % on the values.
*/

:root {
  /* Whole page */
  --tune-page-max-width: 1440px;
  --tune-page-padding-y: 14px;
  --tune-page-padding-x: 18px;
  --tune-page-bg-dark: #0a120e;
  --tune-page-bg-mid: #14251a;
  --tune-page-bg-green: #24402c;
  --tune-page-bg-glow: rgba(104, 174, 112, 0.24);

  /* Main draft layout */
  --tune-squad-panel-width: 390px;
  --tune-main-column-gap: 18px;

  /* Fighter Type / Age Stage filter text */
  --tune-filter-gap: 28px;
  --tune-filter-result-size: 1.05rem;

  /* Character cards */
  --tune-card-height: 180px;
  --tune-card-padding: 8px;
  --tune-card-gap: 6px;
  --tune-card-name-size: 0.97rem;
  --tune-card-portrait-size: 42px;
  --tune-card-grid-gap: 12px;

  /* Final result screen */
  --tune-result-width: 1040px;
  --tune-result-top-space: 0px;
  --tune-result-gap: 8px;
  --tune-result-padding: 14px;
  --tune-final-hero-gap: 12px;
  --tune-final-record-top-space: 0px;
  --tune-final-record-min-size: 2.72rem;
  --tune-final-record-fluid-size: 6vw;
  --tune-final-record-max-size: 4.64rem;
  --tune-final-record-y-offset: -8px;

  /* Final result stat boxes */
  --tune-score-box-width: 118px;
  --tune-score-box-gap: 8px;
  --tune-score-box-height: 48px;
  --tune-score-box-padding-y: 4px;
  --tune-score-box-padding-x: 8px;
  --tune-score-box-radius: 16px;
  --tune-score-label-size: 0.62rem;
  --tune-score-number-min-size: 0.98rem;
  --tune-score-number-fluid-size: 1.35vw;
  --tune-score-number-max-size: 1.35rem;

  /* Final result role pills and buttons */
  --tune-role-pill-gap: 8px;
  --tune-role-pill-max-width: 180px;
  --tune-role-pill-font-size: 0.74rem;
  --tune-result-button-width: 420px;
  --tune-result-button-gap: 10px;
  --tune-result-button-height: 36px;
  --tune-result-button-font-size: 0.78rem;

  /* Final squad recap cards */
  --tune-final-squad-width: 980px;
  --tune-final-squad-gap: 12px;
  --tune-final-card-height: 142px;
  --tune-final-card-padding: 13px;
  --tune-final-card-gap: 8px;
  --tune-final-card-portrait-size: 50px;
  --tune-final-card-name-size: 1rem;
  --tune-final-card-meta-size: 0.76rem;
  --tune-final-card-pill-size: 0.58rem;
  --tune-final-card-stat-label-size: 0.5rem;
  --tune-final-card-stat-number-size: 0.86rem;
}

.app-shell {
  width: min(var(--tune-page-max-width), 100%);
  padding: var(--tune-page-padding-y) var(--tune-page-padding-x);
}

body {
  background:
    radial-gradient(ellipse at 50% 0%, var(--tune-page-bg-glow) 0%, rgba(31, 70, 41, 0.09) 30%, transparent 66%),
    linear-gradient(180deg, var(--tune-page-bg-dark) 0%, var(--tune-page-bg-mid) 42%, var(--tune-page-bg-green) 100%);
  background-attachment: fixed;
}

.draft-grid {
  grid-template-columns: minmax(0, 1fr) var(--tune-squad-panel-width);
  gap: var(--tune-main-column-gap);
}

.is-finished .draft-grid {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.is-finished .squad-panel {
  display: none;
}

.is-finished .app-shell {
  width: min(var(--tune-page-max-width), 100%);
  padding-top: 0;
  padding-bottom: 0;
}

.spin-board {
  gap: var(--tune-filter-gap);
}

.spin-tile strong {
  font-size: var(--tune-filter-result-size);
}

.option-grid {
  gap: var(--tune-card-grid-gap);
}

.character-card {
  min-height: var(--tune-card-height);
  gap: var(--tune-card-gap);
  padding: var(--tune-card-padding);
}

.card-head {
  grid-template-columns: var(--tune-card-portrait-size) minmax(0, 1fr);
}

.portrait {
  width: var(--tune-card-portrait-size);
  height: var(--tune-card-portrait-size);
}

.character-name {
  font-size: var(--tune-card-name-size);
}

.result-panel {
  width: min(var(--tune-result-width), 100%);
  gap: var(--tune-result-gap);
  padding: var(--tune-result-padding);
}

.is-finished .result-panel {
  margin-top: var(--tune-result-top-space);
}

.final-hero {
  gap: var(--tune-final-hero-gap);
}

.final-record {
  margin-top: var(--tune-final-record-top-space);
  transform: translateY(var(--tune-final-record-y-offset));
  font-size: clamp(
    var(--tune-final-record-min-size),
    var(--tune-final-record-fluid-size),
    var(--tune-final-record-max-size)
  );
}

.score-grid {
  grid-template-columns: var(--tune-score-box-width);
  justify-content: center;
  gap: var(--tune-score-box-gap);
}

.duel-score-grid {
  width: min(620px, 100%);
  grid-template-columns: repeat(4, minmax(var(--tune-score-box-width), 1fr));
  justify-self: center;
}

.score-item {
  width: var(--tune-score-box-width);
  min-height: var(--tune-score-box-height);
  padding: var(--tune-score-box-padding-y) var(--tune-score-box-padding-x);
  border-radius: var(--tune-score-box-radius);
}

.duel-score-grid .score-item {
  width: auto;
}

.score-item span {
  font-size: var(--tune-score-label-size);
}

.score-item strong {
  font-size: clamp(
    var(--tune-score-number-min-size),
    var(--tune-score-number-fluid-size),
    var(--tune-score-number-max-size)
  );
}

.role-list {
  gap: var(--tune-role-pill-gap);
}

.role-pill {
  max-width: min(var(--tune-role-pill-max-width), 100%);
  font-size: var(--tune-role-pill-font-size);
}

.result-actions {
  width: min(var(--tune-result-button-width), 100%);
  gap: var(--tune-result-button-gap);
}

.result-actions .primary-button,
.result-actions .tool-button {
  min-height: var(--tune-result-button-height);
  font-size: var(--tune-result-button-font-size);
}

.final-squad-grid {
  width: min(var(--tune-final-squad-width), 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tune-final-squad-gap);
  margin: 0 auto;
}

.final-squad-card {
  min-height: var(--tune-final-card-height);
  gap: var(--tune-final-card-gap);
  padding: var(--tune-final-card-padding);
  cursor: default;
}

.final-squad-card:hover {
  transform: none;
}

.final-squad-card .card-head {
  grid-template-columns: var(--tune-final-card-portrait-size) minmax(0, 1fr);
  gap: 6px;
}

.final-squad-card .portrait {
  width: var(--tune-final-card-portrait-size);
  height: var(--tune-final-card-portrait-size);
  font-size: 0.68rem;
}

.final-squad-card .character-name {
  font-size: var(--tune-final-card-name-size);
  line-height: 1.08;
}

.final-squad-card .series-name {
  margin-top: 1px;
  font-size: var(--tune-final-card-meta-size);
  line-height: 1.1;
}

.final-squad-card .pill-row {
  gap: 3px;
}

.final-squad-card .pill {
  padding: 2px 4px;
  font-size: var(--tune-final-card-pill-size);
  line-height: 1.1;
}

.final-squad-card .stat-grid {
  gap: 3px;
  margin-top: 0;
}

.final-squad-card .stat {
  padding: 2px 3px;
}

.final-squad-card .stat span {
  font-size: var(--tune-final-card-stat-label-size);
  line-height: 1.05;
}

.final-squad-card .stat strong {
  margin-top: 0;
  font-size: var(--tune-final-card-stat-number-size);
  line-height: 1.08;
}

@media (max-width: 1050px) {
  .draft-grid {
    grid-template-columns: 1fr;
  }

  .final-squad-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 12px;
  }

  .result-panel {
    padding: 18px;
  }

  .score-grid {
    grid-template-columns: repeat(2, minmax(0, var(--tune-score-box-width)));
  }

  .duel-score-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .final-squad-grid {
    grid-template-columns: 1fr;
  }
}