/* Responsibility: 敵図鑑スクリーン。
 * Rule: 図鑑グリッド幅・ボスカード幅・プレビューサイズの仕様をここで固定する。
 */

.compendium-screen {
  z-index: 41;
  pointer-events: auto;
}
.compendium-screen-card {
  width: min(1320px, calc(100vw - 36px));
  max-height: calc(100dvh - 36px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
}
.compendium-screen-lead {
  margin-top: -8px;
  margin-bottom: 8px;
}
.compendium-scroll {
  min-width: 0;
  overflow: auto;
  padding-right: 10px;
  display: grid;
  gap: 18px;
}
.compendium-section {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.compendium-section-head {
  display: grid;
  gap: 6px;
}
.compendium-section-head-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.compendium-section-title {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0.06em;
}
.compendium-wave-chip {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(130,255,225,0.1);
  border: 1px solid rgba(130,255,225,0.18);
  color: #dffcff;
}
.compendium-section-subtitle {
  margin: 0;
  color: #cfe4f1;
  line-height: 1.7;
}
.compendium-entry-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.compendium-entry-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 16px 36px rgba(0,0,0,0.2);
}
.compendium-entry-card-boss {
  grid-column: span 2;
}
.compendium-entry-head,
.compendium-entry-body {
  display: grid;
  gap: 10px;
}
.compendium-entry-head {
  gap: 6px;
}
.compendium-entry-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.compendium-entry-name {
  font-size: 16px;
  letter-spacing: 0.06em;
}
.compendium-role-chip {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ecf8ff;
}
.compendium-role-chip-boss {
  background: rgba(255,110,125,0.12);
  border: 1px solid rgba(255,110,125,0.22);
}
.compendium-role-chip-enemy {
  background: rgba(118,194,255,0.12);
  border: 1px solid rgba(118,194,255,0.22);
}
.compendium-entry-mission {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9cb2c1;
}
.compendium-preview-wrap {
  position: relative;
  height: 190px;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(118,194,255,0.22), rgba(9,14,28,0.06) 42%, rgba(5,8,16,0.84) 100%);
  border: 1px solid rgba(255,255,255,0.08);
}
.compendium-preview-wrap-boss {
  height: 380px;
}
.compendium-preview-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.compendium-preview-overlay {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.compendium-preview-chip {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(4,10,18,0.64);
  border: 1px solid rgba(255,255,255,0.08);
}
.compendium-entry-summary {
  margin: 0;
  color: #d4e6ef;
  line-height: 1.65;
  font-size: 13px;
}
.compendium-entry-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.compendium-entry-stat {
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
}
.compendium-entry-stat-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #98afbf;
}
.compendium-entry-stat-value {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: #f2fbff;
}