.stat-section {
  display: flex;

  overflow-y: auto;
  overflow-x: hidden;

  flex-direction: column;
  row-gap: min(10px, calc(10 * 0.1667vh));

  border-radius: min(20px, calc(20 * 0.1667vh));

  padding: min(12px, calc(12 * 0.1667vh));
  background: linear-gradient(
    145deg,
    #111827 0%,
    #312e81 40%,
    #7c2d12 100%
  );
  border: 1px solid rgba(248, 171, 85, 0.6);
  position: relative;
}

body.calculator-page .stat-section {
  flex: 1 1 0;
}

.stat-breakdown {
  display: grid;

  grid-template-columns: 1fr;

  gap: min(16px, calc(16 * 0.1667vh));

  border-radius: min(16px, calc(16 * 0.1667vh));
  padding: max(12px, calc(12vh/12));

  background-color: rgba(0, 0, 0, 0.3);
}

.final-stat {
  display: flex;

  flex-direction: row;

  justify-content: space-between;
  align-items: center;

  width: 100%;
}

.final-stat-number {
  display: flex;

  gap: max(12px, calc(12vh/12));

  width: max(180px, calc(180vh/12));

  align-items: center;
  text-align: end;

  justify-content: space-between;
}

.attack-layout {
  display: flex;

  flex-direction: column;
  gap: min(12px, calc(12 * 0.1667vh));

  border-radius: min(20px, calc(20 * 0.1667vh));

  padding: max(12px, calc(12vh/12));
  background-color: rgba(0, 0, 0, 0.3);
}

.attack-top {
  display: flex;

  flex-direction: row;
  gap: min(12px, calc(12 * 0.1667vh));
}

/* Calculator page: clearer inner cards for results */
body.calculator-page .stat-section .stat-breakdown,
body.calculator-page .stat-section .attack-layout {
  background-color: rgba(15, 23, 42, 0.96);
  border-radius: min(16px, calc(16 * 0.1667vh));
  border: 1px solid rgba(248, 171, 85, 0.7);
}

.attack-image {
  width: calc((1vw + 1vh) * 3);
  height: calc((1vw + 1vh) * 3);

  min-width: calc((1vw + 1vh) * 3);
}

@media (orientation: portrait) {
  .attack-image {
    width: calc((1vw + 1vh) * 4);
    height: calc((1vw + 1vh) * 4);

    min-width: calc((1vw + 1vh) * 4);
  }
}

@media (max-width: 1280px) and (orientation: landscape) {
  .attack-image {
    width: calc((1vw + 1vh) * 5);
    height: calc((1vw + 1vh) * 5);

    min-width: calc((1vw + 1vh) * 5);
  }
}

.attack-description {
  display: flex;

  width: 100%;

  flex-direction: column;
  gap: min(10px, calc(10 * 0.1667vh));
}