/* Codex / 图鉴 — dark Three Kingdoms mecha style */
#btn-codex {
  margin-left: 12px;
  padding: 6px 14px;
  border: 1px solid #c9a227;
  border-radius: 6px;
  background: linear-gradient(180deg, #3a2a12, #1a1208);
  color: #f0d78c;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.25);
}
#btn-codex:hover {
  background: linear-gradient(180deg, #5a4018, #2a1c0c);
  color: #ffe9a8;
}

#codex-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  flex-direction: column;
  background:
    radial-gradient(ellipse at top, rgba(80, 40, 10, 0.35), transparent 55%),
    linear-gradient(180deg, #0b0e14 0%, #121820 40%, #0a0c10 100%);
  color: #e8dcc0;
}
#codex-overlay.show {
  display: flex;
}

#codex-overlay .codex-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.35);
  background: rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}
#codex-overlay .codex-header h2 {
  margin: 0;
  font-size: 1.15rem;
  color: #f0d78c;
  letter-spacing: 0.15em;
}
#codex-overlay .codex-count {
  margin-left: auto;
  opacity: 0.75;
  font-size: 0.85rem;
}
#btn-codex-back {
  padding: 6px 14px;
  border: 1px solid #8a9bb0;
  border-radius: 6px;
  background: #1a2230;
  color: #d0d8e8;
  cursor: pointer;
  font-weight: 600;
}
#btn-codex-back:hover {
  border-color: #c9a227;
  color: #f0d78c;
}

#codex-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 4px;
  flex-shrink: 0;
}
#codex-tabs button {
  padding: 6px 12px;
  border: 1px solid rgba(138, 155, 176, 0.4);
  border-radius: 999px;
  background: rgba(20, 28, 40, 0.85);
  color: #c5d0e0;
  cursor: pointer;
  font-size: 0.9rem;
}
#codex-tabs button.active {
  border-color: #c9a227;
  color: #f0d78c;
  background: rgba(60, 40, 12, 0.9);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.3);
}

#codex-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 8px 16px 12px;
  flex-shrink: 0;
  font-size: 0.88rem;
}
#codex-filters label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.9;
}
#codex-filters select {
  background: #141c28;
  color: #e8dcc0;
  border: 1px solid rgba(138, 155, 176, 0.45);
  border-radius: 4px;
  padding: 4px 8px;
}
.codex-sorts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.codex-sorts button {
  padding: 6px 12px;
  border: 1px solid rgba(138, 155, 176, 0.4);
  border-radius: 999px;
  background: rgba(20, 28, 40, 0.85);
  color: #c5d0e0;
  cursor: pointer;
  font-size: 0.9rem;
  font: inherit;
  letter-spacing: 0.04em;
}
.codex-sorts button.active {
  border-color: #c9a227;
  color: #f0d78c;
  background: rgba(60, 40, 12, 0.9);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.3);
}
.codex-sorts button:hover {
  border-color: #c9a227;
  color: #f0d78c;
}

#codex-grid {
  flex: 1;
  overflow: auto;
  padding: 6px 10px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 6px;
  align-content: start;
  justify-items: center;
  /* thin ink/gold scrollbar (not page / match board) */
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 140, 55, 0.55) transparent;
}
#codex-grid::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#codex-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
#codex-grid::-webkit-scrollbar-thumb {
  background: rgba(168, 128, 48, 0.65);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}
#codex-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 162, 39, 0.85);
}
#codex-grid::-webkit-scrollbar-corner {
  background: transparent;
}
#codex-grid .codex-card-wrap {
  cursor: pointer;
  transition: transform 0.15s ease;
  border-radius: 10px;
  min-height: var(--card-h, 154px);
}
#codex-grid .codex-card-wrap:hover {
  transform: translateY(-4px) scale(1.02);
}
#codex-grid .card.layout-b {
  width: var(--card-w, 110px);
  height: var(--card-h, 154px);
  max-width: none;
  margin: 0 auto;
  pointer-events: none; /* hover handled on wrap */
}

#codex-detail {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
}
#codex-detail.show {
  display: flex;
}
#codex-detail .panel {
  background: #121820;
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-radius: 12px;
  padding: 18px 20px;
  max-width: 420px;
  width: 90%;
  color: #e8dcc0;
}
#codex-detail .panel h3 {
  margin: 0 0 8px;
  color: #f0d78c;
}
#codex-detail .panel pre {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0 0 12px;
  line-height: 1.5;
}


#top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#top-bar #turn-banner { flex: 1; }
#codex-overlay { z-index: 200; }
#codex-detail { z-index: 210; }