:root {
  --aoj-gm-bg-1: #0f2a3f;
  --aoj-gm-bg-2: #1b4a5c;
  --aoj-gm-accent: #f7b63f;
  --aoj-gm-ink: #1f2933;
  --aoj-gm-muted: #5a6573;
  --aoj-gm-card: #ffffff;
  --aoj-gm-line: #d6dde6;
}

.aoj-game-modes {
  position: relative;
  border: 1px solid #173149;
  border-radius: 16px;
  background: linear-gradient(125deg, var(--aoj-gm-bg-1), var(--aoj-gm-bg-2));
  padding: clamp(16px, 3vw, 24px);
  overflow: hidden;
}

.aoj-game-modes::before,
.aoj-game-modes::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.aoj-game-modes::before {
  width: 300px;
  height: 300px;
  right: -120px;
  top: -140px;
  background: radial-gradient(circle, rgb(247 182 63 / 32%), transparent 70%);
}

.aoj-game-modes::after {
  width: 280px;
  height: 280px;
  left: -130px;
  bottom: -150px;
  background: radial-gradient(circle, rgb(79 221 205 / 24%), transparent 70%);
}

.aoj-game-modes-header {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}

.aoj-game-modes-header h2 {
  margin: 0;
  color: #f4f8fc;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.aoj-game-modes-header p {
  margin: 6px 0 0;
  color: rgb(244 248 252 / 84%);
  max-width: 64ch;
}

.aoj-game-mode-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.aoj-game-mode-tab {
  border: 1px solid rgb(214 221 230 / 70%);
  background: rgb(255 255 255 / 14%);
  color: #f8fbff;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  backdrop-filter: blur(4px);
}

.aoj-game-mode-tab:hover,
.aoj-game-mode-tab:focus-visible {
  transform: translateY(-1px);
  border-color: #fff;
  background: rgb(255 255 255 / 22%);
  box-shadow: 0 6px 18px rgb(8 25 40 / 30%);
  outline: none;
}

.aoj-game-mode-tab.is-active {
  border-color: #fef3d4;
  background: linear-gradient(135deg, #e39d22, var(--aoj-gm-accent));
  color: #1d2327;
}

.aoj-game-mode-panel {
  display: none;
}

.aoj-game-mode-panel.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
  background: rgb(255 255 255 / 96%);
  border: 1px solid #f5dba6;
  border-radius: 14px;
  padding: clamp(14px, 2.4vw, 20px);
  box-shadow: 0 12px 28px rgb(14 32 44 / 20%);
  animation: aoj-fade-in 0.34s ease;
}

.aoj-game-mode-cover {
  margin-bottom: 2px;
}

.aoj-game-mode-cover img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid #d2dae4;
}

.aoj-game-mode-panel h3 {
  margin: 0;
  color: var(--aoj-gm-ink);
  font-size: clamp(1.12rem, 2.2vw, 1.45rem);
}

.aoj-game-mode-intro {
  color: #2e3945;
}

.aoj-game-mode-intro p:last-child {
  margin-bottom: 0;
}

.aoj-game-mode-sections {
  display: grid;
  gap: 12px;
  counter-reset: aoj-gm-section;
}

.aoj-game-mode-section {
  position: relative;
  border: 1px solid var(--aoj-gm-line);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, #fff, #f9fbfd);
  animation: aoj-slide-up 0.38s ease both;
  animation-delay: calc(var(--aoj-reveal-index, 0) * 0.07s);
}

.aoj-game-mode-section::before {
  counter-increment: aoj-gm-section;
  content: counter(aoj-gm-section, decimal-leading-zero);
  position: absolute;
  top: -10px;
  right: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #e6c67d;
  background: #fff6dd;
  color: #915d00;
}

.aoj-game-mode-section h4 {
  margin: 0 0 8px;
  color: #142434;
  letter-spacing: 0.01em;
}

.aoj-game-mode-section-body {
  color: #344454;
}

.aoj-game-mode-section-body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .aoj-game-modes {
    border-radius: 12px;
  }

  .aoj-game-mode-tab {
    width: 100%;
    text-align: left;
  }

  .aoj-game-mode-panel.is-active {
    border-radius: 12px;
    padding: 14px;
  }
}

@keyframes aoj-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aoj-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}