/* =========================================================
   Site Index
   サイト目次ページ専用
   ========================================================= */

/* ---------- main ---------- */

.library-main {
  width: min(1540px, calc(100% - 34px));
  margin: 22px auto 34px;
  padding: 0;
}


/* =========================================================
   上部：注釈 + 言語切り替え
   ========================================================= */

.library-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin: 0 46px 18px;
}

.library-note {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #a9c0c9;
  font-size: 0.84rem;
  line-height: 1.5;
  border-bottom: 1px solid rgba(70, 198, 217, 0.24);

}

.legend-diamond {
  color: #ff9638;
  margin-right: 5px;
  font-size: 0.8em;
  text-shadow:
    0 0 4px rgba(255, 150, 56, 0.75),
    0 0 9px rgba(255, 150, 56, 0.38);
}

.note-separator {
  margin: 0 9px;
  color: rgba(167, 193, 202, 0.62);
}

.library-toolbar .language-switch-wrap {
  margin: 0;
}

/* =========================================================
   一覧本体
   左：生物
   右：施設 / MOD / アイテム / バイオーム / 乗り物
   ========================================================= */

.library-board {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: clamp(34px, 4vw, 72px);

  min-height: calc(100vh - 235px);

  padding:
    clamp(34px, 3.2vw, 52px)
    clamp(34px, 3.6vw, 58px)
    clamp(36px, 3vw, 48px);

}


/* ---------- 共通 ---------- */

.index-category {
  min-width: 0;
}

.category-title {
  margin: 0 0 17px;
  color: #f0f8fa;
  font-size: clamp(1.45rem, 1.8vw, 2rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.index-list li {
  margin: 0 0 7px;
}

.index-link {
  position: relative;
  display: inline-flex;
  align-items: baseline;


  max-width: 100%;

  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;

  transition:
    color 0.16s ease,
    text-shadow 0.16s ease;
}

.index-link:hover {
  text-shadow: 0 0 8px rgba(94, 225, 239, 0.22);
}


/*
  英語表示対応済みのページに class="en-ready" を付けるだけで
  ◆ が自動表示されます。

  例：
  <a class="index-link en-ready" href="...">
*/
.index-link.en-ready::before {
  content: "◆";
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-45%);

  color: #ff9638;
  font-size: 0.65em;
  line-height: 1;

  text-shadow:
    0 0 4px rgba(255, 150, 56, 0.75),
    0 0 9px rgba(255, 150, 56, 0.38);
}


/* =========================================================
   生物
   ========================================================= */

.creature-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 52px);
  align-items: start;
}

.alpha-group {
  margin: 0 0 15px;
  break-inside: avoid;
}

.alpha-title {
  margin: 0 0 7px;
  color: #dcecf1;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}

.alpha-group .index-list {
  padding-left: 10px;
}

.alpha-group .index-list li {
  margin-bottom: 6px;
}


/* =========================================================
   右側
   記事数が多いものを優先して大きな領域に配置
   ========================================================= */

.secondary-sections {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);

  grid-template-areas:
    "facilities facilities"
    "mods items"
    "mods biomes"
    "mods vehicles"
    "image image";

  column-gap: clamp(28px, 3vw, 48px);
  row-gap: 28px;
  align-content: start;
}

.facilities-section {
  grid-area: facilities;
}

.mods-section {
  grid-area: mods;
}

.items-section {
  grid-area: items;
}

.biomes-section {
  grid-area: biomes;
}

.vehicles-section {
  grid-area: vehicles;
}


/* ---------- 施設だけMOD別小見出し ---------- */

.facility-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.facility-group h3 {
  margin: 0 0 10px;
  color: #a9c5ce;
  font-size: 0.82rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.01em;
}


.library-image {
  grid-area: image;

  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;
}

.library-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* =========================================================
   画面幅が狭くなった場合
   ========================================================= */

@media (max-width: 1180px) {

  .library-main {
    width: min(1080px, calc(100% - 24px));
  }

  .library-toolbar {
    margin-left: 16px;
    margin-right: 16px;
  }

  .library-board {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .secondary-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "facilities facilities"
      "mods items"
      "mods biomes"
      "mods vehicles";
  }
}


@media (max-width: 760px) {

  .library-main {
    width: calc(100% - 14px);
    margin-top: 14px;
  }

  .library-toolbar {
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 9px;
    margin: 0 7px 12px;
  }

  .library-note {
    padding: 8px 10px;
  }

  .library-board {
    padding: 26px 20px 34px;
    gap: 34px;
  }

  .creature-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .secondary-sections {
    grid-template-columns: 1fr;
    grid-template-areas:
      "facilities"
      "mods"
      "items"
      "biomes"
      "vehicles";
    row-gap: 30px;
  }

  .facility-groups {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .category-title {
    font-size: 1.5rem;
  }
}