/* Battle Classic specific styles */

.home-screen > .header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  padding-top: env(safe-area-inset-top);
  box-sizing: border-box;
}

.battle-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  max-width: 100%;
  margin: 0 auto;
}

#battle-area {
  /* Three-column grid: left card | controls | right card */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  align-items: flex-start;
  gap: var(--space-md);
  padding-top: max(
    var(--space-lg),
    var(--header-clearance, calc(var(--header-height) + env(safe-area-inset-top)))
  );
}

#battle-area > .battle-slot {
  width: 100%;
  max-width: 420px;
}

#battle-area .battle-slot {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

#battle-area .battle-slot .slot-surface {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

#battle-area .player-slot,
#battle-area .opponent-slot {
  background-color: transparent;
  color: var(--color-text);
}

#battle-area .card-slot .slot-surface {
  align-items: center;
}

#battle-area .controls-slot .slot-surface {
  align-items: center;
}

#battle-area .controls-slot .slot-surface > * {
  width: 100%;
}

.controls-surface {
  align-items: center;
}

.controls-surface > * {
  width: 100%;
}

#battle-area #controls .controls-surface .stat-controls {
  padding-top: 0;
  justify-content: center;
}

/* Battle status within header */
.battle-status-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-lg);
  box-shadow: var(--shadow-base);
  text-align: center;
  color: var(--color-text);
}

.battle-status-header p,
.battle-status-header h2 {
  min-height: 1.2em;
  margin: 0;
}

.battle-status-header #round-message.round-message-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

.battle-status-header #next-round-timer,
.battle-status-header #round-counter,
.battle-status-header #score-display,
.battle-status-header #battle-state-badge {
  font-size: var(--font-medium);
  font-weight: 500;
  line-height: 1.4;
}

.stat-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  gap: var(--space-sm);
}

#stat-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  max-width: 100%;
}

#stat-buttons button {
  min-width: var(--touch-target-size);
  min-height: var(--touch-target-size);
}

/* Focus styles for keyboard navigation */
#stat-buttons button:focus {
  outline: 2px solid var(--color-focus, #007acc);
  outline-offset: 2px;
}

.battle-state-progress-wrapper {
  width: 100%;
}

.battle-state-progress {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: var(--font-small);
}

.battle-state-progress.ready {
  display: flex;
}

.battle-state-progress li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-xs) * 0.75) var(--space-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  min-width: 2.75rem;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.battle-state-progress li.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverted);
  font-weight: 600;
}

.battle-state-progress li[aria-current="step"] {
  outline: 2px solid transparent;
}

.battle-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-sm);
  width: 100%;
}

.battle-controls .battle-control-button {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 220px;
  min-height: var(--touch-target-size, 48px);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  --button-bg: var(--color-surface);
  --button-hover-bg: var(--color-surface);
  --button-active-bg: var(--color-surface);
  --button-text-color: var(--color-text);
  --button-disabled-bg: var(--color-surface);
}

.battle-controls .primary-button {
  --button-bg: var(--color-primary);
  --button-hover-bg: var(--color-primary);
  --button-active-bg: var(--color-primary);
  --button-text-color: var(--color-text-inverted);
  --button-disabled-bg: var(--color-primary);
  color: var(--color-text-inverted);
  border-color: transparent;
  box-shadow: var(--shadow-hover);
}

/* Provide graceful fallback when color-mix() is unavailable (Chrome 111+, Firefox 113+, Safari 16.2+) */
@supports (color: color-mix(in srgb, black 50%, white 50%)) {
  .battle-controls .battle-control-button {
    --button-hover-bg: color-mix(in srgb, var(--color-surface) 92%, var(--color-text) 8%);
    --button-active-bg: color-mix(in srgb, var(--color-surface) 88%, var(--color-text) 12%);
    --button-disabled-bg: color-mix(in srgb, var(--color-surface) 84%, var(--color-text) 16%);
  }

  .battle-controls .primary-button {
    --button-hover-bg: color-mix(in srgb, var(--color-primary) 92%, var(--color-text-inverted) 8%);
    --button-active-bg: color-mix(
      in srgb,
      var(--color-primary) 88%,
      var(--color-text-inverted) 12%
    );
    --button-disabled-bg: color-mix(in srgb, var(--color-primary) 45%, var(--color-surface) 55%);
  }
}

.battle-controls .primary-button:not(:disabled) {
  background-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
}

.battle-controls .battle-control-button:focus-visible {
  outline: 2px solid var(--color-focus, var(--link-color));
  outline-offset: 3px;
}

.battle-controls .battle-control-button:disabled {
  box-shadow: none;
  opacity: 0.7;
}

.battle-controls .primary-button:not(:disabled):hover,
.battle-controls .primary-button:not(:disabled):focus,
.battle-controls .primary-button:not(:disabled):focus-visible {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.battle-controls .secondary-button {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: none;
}

.battle-controls .secondary-button:not(:disabled):hover,
.battle-controls .secondary-button:not(:disabled):focus,
.battle-controls .secondary-button:not(:disabled):focus-visible {
  background-color: var(--color-tertiary);
  box-shadow: var(--shadow-base);
}

/* Responsive adjustments for battle control buttons */
@media (max-width: 480px) {
  .battle-content {
    padding: var(--space-sm);
  }

  #battle-area {
    grid-template-columns: 1fr;
  }

  #battle-area > .battle-slot {
    width: 100%;
  }

  .battle-controls {
    flex-direction: column;
    width: 100%;
  }

  .battle-controls .battle-control-button {
    width: 100%;
    max-width: none;
  }

  .battle-status-header {
    margin: var(--space-lg) var(--space-sm);
    padding: var(--space-md);
  }
}

/* Snackbar positioning for battle page */
#snackbar-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
  padding: var(--space-sm) var(--space-md);
  z-index: 1000;
}

/* Hide opponent card until reveal */
.opponent-hidden {
  display: none;
}

/* Mystery Card styles */
#opponent-card {
  /* Ensure container provides space for the placeholder */
  width: 100%;
  min-height: 0; /* allow grid item to size to content */
}

#mystery-card-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Let aspect-ratio define the height based on width */
  aspect-ratio: 3/4;
  background-color: var(--color-surface);
}

.mystery-icon {
  width: 50%;
  height: 50%;
  fill: var(--color-text-secondary);
}