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

.aoj-game-modes {
  border: 1px solid #d8e1ea;
  border-radius: 14px;
  background: #f8fbff;
  padding: clamp(12px, 2vw, 18px);
  max-width: 1100px;
  margin-inline: auto;
}

.aoj-game-modes-header {
  margin-bottom: 14px;
}

.aoj-game-modes-header h2 {
  margin: 0;
  color: #102235;
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
}

.aoj-game-modes-header p {
  margin: 6px 0 0;
  color: var(--aoj-gm-muted);
  max-width: 64ch;
}

.aoj-game-mode-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.aoj-game-mode-tab {
  border: 1px solid #d7e0ea;
  background: #fff;
  color: #152739;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  display: grid;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.aoj-game-mode-tab:hover,
.aoj-game-mode-tab:focus-visible {
  transform: translateY(-1px);
  border-color: #9eb8d2;
  box-shadow: 0 8px 18px rgb(15 36 54 / 14%);
  outline: none;
}

.aoj-game-mode-tab.is-active {
  border-color: #f2c46b;
  box-shadow: 0 0 0 2px rgb(247 182 63 / 22%);
}

.aoj-game-mode-tab__body {
  display: grid;
  gap: 4px;
}

.aoj-game-mode-tab__title {
  font-size: 1rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aoj-game-mode-tab__excerpt {
  font-size: 0.88rem;
  line-height: 1.35;
  color: #586579;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.aoj-game-mode-panel.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  background: var(--aoj-gm-card);
  border: 1px solid #e2e8ef;
  border-radius: 12px;
  padding: clamp(12px, 2vw, 16px);
  box-shadow: 0 8px 20px rgb(17 34 50 / 10%);
  animation: aoj-fade-in 0.34s ease;
}

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

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

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

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

.aoj-game-mode-intro > :first-child {
  margin-top: 0;
}

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

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

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

.aoj-game-mode-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.aoj-game-mode-overview__left {
  display: grid;
  gap: 10px;
}

.aoj-game-mode-meta-table,
.aoj-game-mode-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #dbe4ed;
  border-radius: 10px;
  overflow: hidden;
}

.aoj-game-mode-meta-table th,
.aoj-game-mode-meta-table td,
.aoj-game-mode-table th,
.aoj-game-mode-table td {
  border-bottom: 1px solid #e7edf4;
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}

.aoj-game-mode-table td p,
.aoj-game-mode-meta-table td p {
  margin: 0;
}

.aoj-game-mode-meta-table tr:last-child th,
.aoj-game-mode-meta-table tr:last-child td,
.aoj-game-mode-table tr:last-child th,
.aoj-game-mode-table tr:last-child td {
  border-bottom: 0;
}

.aoj-game-mode-meta-table th,
.aoj-game-mode-table th {
  width: 28%;
  white-space: nowrap;
  color: #304658;
  font-weight: 700;
  background: #f7fafc;
}

.aoj-game-mode-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.aoj-game-mode-column {
  display: grid;
  gap: 8px;
}

.aoj-game-mode-column h4 {
  margin: 0;
}

.aoj-game-mode-empty {
  margin: 0;
  color: #6b7c8c;
}

.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-tabs {
    grid-template-columns: 1fr;
  }

  .aoj-game-mode-overview,
  .aoj-game-mode-columns {
    grid-template-columns: 1fr;
  }

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

@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);
  }
}