/* Stat Rerolling Configuration Panel */
.stat-config-panel {
  display: flex;
  flex-direction: column;
  row-gap: min(16px, calc(16 * 0.1667vh));

  border-radius: min(20px, calc(20 * 0.1667vh));
  padding: min(16px, calc(16 * 0.1667vh));
  background-color: rgba(0, 0, 0, 0.3);
}

/* Unit Selector */
.stat-unit-selector {
  display: flex;
  justify-content: center;
  align-items: center;
}

.stat-unit-selector .unit-button {
  height: min(160px, calc(180 * 0.1667vh));
  width: min(160px, calc(180 * 0.1667vh));
  min-width: min(160px, calc(180 * 0.1667vh));
  max-height: min(160px, calc(180 * 0.1667vh));
  border-radius: min(24px, calc(24 * 0.1667vh));
}

.stat-unit-selector .unit-gradient {
  padding: min(6px, calc(6 * 0.1667vh));
}

/* Stat Potential Info */
.stat-potential-info {
  display: flex;
  flex-direction: column;
  row-gap: min(8px, calc(8 * 0.1667vh));

  border-radius: min(16px, calc(16 * 0.1667vh));
  padding: min(12px, calc(12 * 0.1667vh));
  background-color: rgba(0, 0, 0, 0.3);
}

.potential-label {
  font-size: min(18px, calc(18 * 0.1667vh));
  font-weight: 600;
  text-align: left;
}

.potential-display {
  display: flex;
  flex-direction: column;
  row-gap: min(8px, calc(8 * 0.1667vh));
}

#stat-potential-value {
  font-size: min(16px, calc(16 * 0.1667vh));
  text-align: left;
  color: #9ca3af;
}

.potential-bar-container {
  width: 100%;
  height: min(24px, calc(24 * 0.1667vh));
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: min(12px, calc(12 * 0.1667vh));
  overflow: hidden;
  border: 2px solid #1f2937;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  user-select: none;
}

#stat-potential-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00e0ff, #3ad6ff);
  transition: width 0.05s linear;
  border-radius: min(12px, calc(12 * 0.1667vh));
  box-shadow: 0 0 10px rgba(0, 224, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  min-width: 2%;
  position: relative;
}

/* Dragging state for smooth real-time feedback */
.potential-bar-container.dragging #stat-potential-bar {
  box-shadow: 0 0 15px rgba(0, 224, 255, 0.8), 0 0 25px rgba(0, 224, 255, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.potential-bar-container.dragging {
  background-color: rgba(0, 0, 0, 0.7);
  border-color: #00e0ff;
}

/* Reroll Options */
.stat-reroll-options {
  display: flex;
  flex-direction: column;
  row-gap: min(8px, calc(8 * 0.1667vh));

  border-radius: min(16px, calc(16 * 0.1667vh));
  padding: min(12px, calc(12 * 0.1667vh));
  background-color: rgba(0, 0, 0, 0.3);
}

.reroll-option-item {
  display: flex;
  align-items: center;
  column-gap: min(8px, calc(8 * 0.1667vh));
  cursor: pointer;
  font-size: min(16px, calc(16 * 0.1667vh));
}

.reroll-option-item input[type="radio"] {
  cursor: pointer;
  width: min(16px, calc(16 * 0.1667vh));
  height: min(16px, calc(16 * 0.1667vh));
  accent-color: #00e0ff;
}

.reroll-option-item span {
  user-select: none;
}

/* Control Buttons */
.stat-control-buttons {
  display: flex;
  flex-direction: row;
  column-gap: min(10px, calc(10 * 0.1667vh));
  justify-content: space-between;
}

#stat-simulate-button,
#stat-clear-button {
  flex: 1;
  font-size: min(16px, calc(16 * 0.1667vh));
  height: min(45px, calc(45 * 0.1667vh));
  padding: min(10px, calc(10 * 0.1667vh)) min(16px, calc(16 * 0.1667vh));
  cursor: pointer;
  border-radius: min(10px, calc(10 * 0.1667vh));
  border: 1px solid #1f2937;
  background-color: rgba(16, 20, 31, 0.8);
  color: #e5e7eb;
  transition: all 0.2s;
}

#stat-simulate-button:hover {
  background-color: rgba(16, 20, 31, 1);
  border-color: #3ad6ff;
  color: #3ad6ff;
}

#stat-simulate-button:active {
  transform: scale(0.98);
}

#stat-clear-button:hover {
  background-color: rgba(16, 20, 31, 1);
  border-color: #9ca3af;
}

#stat-clear-button:active {
  transform: scale(0.98);
}

/* Results Panel */
.stat-results-panel {
  display: flex;
  flex-direction: column;
  row-gap: min(12px, calc(12 * 0.1667vh));

  border-radius: min(20px, calc(20 * 0.1667vh));
  padding: min(16px, calc(16 * 0.1667vh));
  background-color: rgba(0, 0, 0, 0.3);
  margin-top: min(12px, calc(12 * 0.1667vh));
}

.results-title {
  font-size: min(20px, calc(20 * 0.1667vh));
  font-weight: 600;
  text-align: center;
}

/* Distribution Table */
.stat-distribution-table {
  display: flex;
  flex-direction: column;
  row-gap: min(8px, calc(8 * 0.1667vh));

  border-radius: min(16px, calc(16 * 0.1667vh));
  padding: min(12px, calc(12 * 0.1667vh));
  background-color: rgba(0, 0, 0, 0.3);
}

.distribution-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: min(12px, calc(12 * 0.1667vh));

  padding: min(8px, calc(8 * 0.1667vh));
  border-bottom: 1px solid #1f2937;
  margin-bottom: min(4px, calc(4 * 0.1667vh));
}

.dist-label,
.dist-count,
.dist-chance {
  font-size: min(14px, calc(14 * 0.1667vh));
  font-weight: 600;
  color: #9ca3af;
  text-align: center;
}

.distribution-rows {
  display: flex;
  flex-direction: column;
  row-gap: min(6px, calc(6 * 0.1667vh));
}

.stat-grade-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: min(12px, calc(12 * 0.1667vh));

  padding: min(8px, calc(8 * 0.1667vh));
  border-radius: min(8px, calc(8 * 0.1667vh));
  background-color: rgba(0, 0, 0, 0.2);
  align-items: center;
}

.stat-grade-row.empty {
  opacity: 0.5;
}

.grade-name {
  font-size: min(16px, calc(16 * 0.1667vh));
  font-weight: 600;
  text-align: center;
}

.grade-count {
  font-size: min(14px, calc(14 * 0.1667vh));
  text-align: center;
  color: #e5e7eb;
}

.grade-chance {
  font-size: min(14px, calc(14 * 0.1667vh));
  text-align: center;
  color: #9ca3af;
}

/* Grade Color Classes */
.grade-D {
  color: #9ca3af;
}

.grade-C {
  color: #a0d995;
}

.grade-B {
  color: #4da6ff;
}

.grade-A {
  color: #8b5cf6;
}

.grade-S {
  color: #fbbf24;
}

.grade-Z {
  color: #f87171;
}

.grade-Zplus {
  color: #ec4899;
}

.grade-godly {
  color: #fbbf24;
  font-weight: 700;
}

/* Expected Value Info */
.expected-value-info {
  margin-top: min(12px, calc(12 * 0.1667vh));
  padding: min(12px, calc(12 * 0.1667vh));
  border-radius: min(10px, calc(10 * 0.1667vh));
  background-color: rgba(0, 0, 0, 0.2);
  border-left: 3px solid #3ad6ff;
  font-size: min(16px, calc(16 * 0.1667vh));
  text-align: center;
  color: #e5e7eb;
}

/* Responsive Design */
@media (max-width: 768px) {
  .stat-config-panel {
    row-gap: min(12px, calc(12 * 0.1667vh));
    padding: min(12px, calc(12 * 0.1667vh));
  }

  .stat-control-buttons {
    flex-direction: column;
  }

  #stat-simulate-button,
  #stat-clear-button {
    width: 100%;
  }

  .distribution-header,
  .stat-grade-row {
    grid-template-columns: 1fr 1fr 1fr;
    font-size: min(12px, calc(12 * 0.1667vh));
  }
}