@charset "UTF-8";

/* ---------------------------------------------
   Base
--------------------------------------------- */
:root {
  --color-bg: #000;
  --color-text: #fff;
  --color-muted: rgba(255, 255, 255, 0.55);
  --color-line: rgba(255, 255, 255, 0.15);
  --header-height: 40px;

  /* 背景の壁紙をどれだけ暗く落とすか（0 で素のまま、1 で真っ黒） */
  --scrim: 0.9;

  /* 枠まわりの「黒いガラス」。図鑑の一覧の行と同じ濃さで統一する */
  --glass-bg: rgba(14, 16, 19, 0.32);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* スクロールバーの有無でビューポート幅が変わると、fixed なヘッダーの中央位置が
     ページごとにずれる。常にスクロールバー分の余白を確保して位置を揃える */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: "Noto Sans", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 600;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-nav-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.6;
}

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* main は JS でフォーカスを受けるだけなので、そのリングは出さない */
.view:focus {
  outline: none;
}

/* ---------------------------------------------
   スクロールバー（白／トラックは透過）
   Firefox は scrollbar-* 、WebKit 系は ::-webkit-scrollbar-* で指定する
--------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: #fff transparent;
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  /* 枠（レール）は塗らず、後ろのガラスと壁紙を透かす */
  background: transparent;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-corner {
  background: transparent;
  border: none;
  box-shadow: none;
}

*::-webkit-scrollbar-thumb {
  background-color: #fff;
  /* border を透明にして background-clip で内側だけ塗り、細いつまみに見せる */
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.75);
}

/* 上下・左右の矢印ボタン */
*::-webkit-scrollbar-button:single-button {
  display: block;
  width: 12px;
  height: 12px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 8px;
}

*::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.5 11 9.5 1 9.5 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

*::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 9.5 1 2.5 11 2.5 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

*::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6 9.5 1 9.5 11 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

*::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M9.5 6 2.5 1 2.5 11 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* ---------------------------------------------
   背景の壁紙
   2 枚のレイヤーを重ね、透明度を入れ替えて切り替える
--------------------------------------------- */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--color-bg);
  pointer-events: none;
}

.app-bg__layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.app-bg__layer.is-on {
  opacity: 1;
}

/* 文字を読めるようにするための暗幕。--scrim で濃さを変える */
.app-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(3, 4, 7, var(--scrim));
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/* ---------------------------------------------
   Header / Nav
--------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  /* ロゴとトグルは絶対配置なので、これで下寄せになるのはナビだけ */
  align-items: flex-end;
  /* ナビをヘッダーの中央に置く */
  justify-content: center;
  width: 100%;
  height: var(--header-height);
  padding: 0 clamp(16px, 4vw, 40px);
  /* 背景は敷かず、壁紙をそのまま見せる */
  background-color: transparent;
}

/* ロゴはフローから外し、ナビの中央位置に影響させない */
.site-header__logo {
  position: absolute;
  top: 50%;
  left: clamp(16px, 4vw, 40px);
  transform: translateY(-50%);
}

.site-header__logo img {
  display: block;
  width: auto;
  height: 20px;
}

/* トップページはヒーローのロゴと重複するのでヘッダーのロゴを隠す */
body[data-route="/"] .site-header__logo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ヘッダー下端との間隔。値を変えると文字の上下位置が動く */
.global-nav {
  padding-bottom: 4px;
}

.global-nav__list {
  display: flex;
  gap: clamp(12px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-nav__link {
  position: relative;
  display: block;
  /* 下線を引くための余白。上下対称にしてヘッダー内の中央揃えを保つ */
  padding: 5px 0;
  /* 項目が日本語のため、英字メニューより字間は詰める */
  font-size: 13px;
  /* ヘッダーを低くするため、行送りの余白を落とす */
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--color-muted);
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

/* ホバーで下線が左へ伸びる */
.global-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  /* letter-spacing 分の右余白を除いて文字幅に合わせる */
  width: calc(100% - 0.08em);
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.28s ease;
}

.global-nav__link:hover,
.global-nav__link:focus-visible,
.global-nav__link.is-current {
  opacity: 1;
  color: var(--color-text);
}

.global-nav__link:hover {
  transform: translateY(-2px);
}

.global-nav__link:hover::after,
.global-nav__link:focus-visible::after,
.global-nav__link.is-current::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav-toggle {
  display: none;
}

/* ---------------------------------------------
   View
--------------------------------------------- */
.view {
  flex: 1 0 auto;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.view.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------
   トップページはファーストビュー内に収め、スクロールさせない
--------------------------------------------- */
body[data-route="/"] {
  /* ヒーローでは壁紙をもう少し見せる */
  --scrim: 0.8;

  overflow: hidden;
}

body[data-route="/"] .app {
  height: 100vh;
  height: 100svh;
}

body[data-route="/"] .view {
  display: flex;
  flex: 1 1 auto;
  /* flex アイテムの既定の min-height:auto を外し、フッター分を必ず残す */
  min-height: 0;
  overflow: hidden;
}

/* ---------------------------------------------
   Hero (#/)
--------------------------------------------- */
.hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--header-height) 20px 20px;
  overflow: hidden;
}

/* 中央のごく淡いグロー */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero__logo {
  margin: 0;
}

.hero__logo img {
  /* 110svh はロゴの縦横比（約 3.6:1）から逆算した上限。
     画面が低い（横向きなど）ときにロゴが見切れるのを防ぐ */
  width: min(604px, 80vw, 110svh);
  margin-inline: auto;
}

.hero__title {
  margin: 24px 0 0;
  font-size: clamp(20px, 5vw, 40px);
  font-weight: 600;
  letter-spacing: 0.32em;
  /* letter-spacing による右側の余白を打ち消して中央に揃える */
  text-indent: 0.32em;
  line-height: 1.4;
}

/* ---------------------------------------------
   Page (下層ページ共通)
--------------------------------------------- */
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(var(--header-height) + clamp(48px, 10vw, 96px)) clamp(20px, 5vw, 40px) 80px;
}

.page-head {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-line);
}

.page-head__title {
  margin: 0;
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
}

.page-head__lead {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--color-muted);
}

.page__actions {
  margin-top: 40px;
}

.button {
  display: inline-block;
  padding: 12px 32px;
  font-size: 13px;
  letter-spacing: 0.16em;
  border: 1px solid var(--color-line);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.button:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--color-text);
}

.coming-soon {
  padding: clamp(56px, 12vw, 120px) 20px;
  background-color: var(--glass-bg);
  border: 1px solid var(--color-line);
  text-align: center;
}

.coming-soon__text {
  margin: 0;
  font-size: clamp(20px, 4vw, 28px);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--color-muted);
}

.coming-soon__note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--color-muted);
}

/* ---------------------------------------------
   図鑑（#/zukan）
--------------------------------------------- */
/* ページ自体はスクロールさせず、左右のカラムに独立したスクロールを持たせる */
body[data-route="/zukan"] {
  overflow: hidden;
}

body[data-route="/zukan"] .app {
  height: 100vh;
  height: 100svh;
}

body[data-route="/zukan"] .view {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.page--zukan {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1760px;
  height: 100%;
  padding: calc(var(--header-height) + 14px) clamp(12px, 2vw, 28px) 14px;
}

.zukan {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 16px;
  height: 100%;
  min-height: 0;
}

/* 左カラム：上部固定のフィルター＋スクロールする一覧 */
.zukan__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

/* --- 一覧 --- */
.pal-list {
  flex: 1 1 auto;
  /* flex アイテムの min-height:auto を外し、フィルター分の高さを必ず残す */
  min-height: 0;
  margin: 0;
  /* 枠の外に出るホバーマーカーが切れないよう、左右に逃げ場をつくる */
  padding: 0 20px;
  /* 器は塗らない。行そのものがガラスなので、スクロールバーの帯まで背景が透ける */
  background-color: transparent;
  overflow-y: auto;
  /* 絞り込みで件数が減ってもリストの横幅が変わらないようにする */
  scrollbar-gutter: stable;
  list-style: none;
}

.pal-list__empty {
  padding: 32px 8px;
  font-size: 13px;
  text-align: center;
  color: var(--color-muted);
}

.pal-row {
  position: relative;
  margin-bottom: 6px;
}

.pal-row__button {
  position: relative;
  display: block;
  width: 100%;
  min-height: 88px;
  padding: 12px 92px 12px 16px;
  background: linear-gradient(100deg, rgba(26, 29, 35, 0.34) 0%, rgba(14, 16, 19, 0.3) 60%, rgba(8, 9, 11, 0.34) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.pal-row__button:hover {
  background: linear-gradient(100deg, rgba(42, 45, 51, 0.5) 0%, rgba(28, 31, 36, 0.46) 60%, rgba(19, 21, 25, 0.5) 100%);
  /* 右へスライドする演出は今は使わない（必要になったら下の行を戻す）
  transform: translateX(10px);
  */
}

/* --- ホバー時に四隅へ出すマーカー --- */
.pal-row__button::before,
.pal-row__button::after,
.pal-row__corners::before,
.pal-row__corners::after {
  content: "";
  position: absolute;
  /* 枠の外に出ても隣の行に隠れないよう前面に置く */
  z-index: 3;
  width: 13px;
  height: 13px;
  border: 4px solid #00b4ff;
  opacity: 0;
  pointer-events: none;
}

/* 左上 */
.pal-row__button::before {
  top: -2px;
  left: -2px;
  border-right: 0;
  border-bottom: 0;
  --dx: -12px;
  --dy: -12px;
}

/* 右下 */
.pal-row__button::after {
  right: -2px;
  bottom: -2px;
  border-top: 0;
  border-left: 0;
  --dx: 12px;
  --dy: 12px;
}

/* 右上 */
.pal-row__corners::before {
  top: -2px;
  right: -2px;
  border-left: 0;
  border-bottom: 0;
  --dx: 12px;
  --dy: -12px;
}

/* 左下 */
.pal-row__corners::after {
  bottom: -2px;
  left: -2px;
  border-top: 0;
  border-right: 0;
  --dx: -12px;
  --dy: 12px;
}

/* 枠の外で待つ → ためる（さらに外へ）→ 角に到達 → 跳ね返って枠の外で止まる */
@keyframes pal-corner-pull {
  /* 1. 枠の外。ここが待機位置 */
  0% {
    transform: translate(var(--dx), var(--dy));
    animation-timing-function: ease-in;
  }

  /* 2. ためる */
  26% {
    transform: translate(calc(var(--dx) * 1.5), calc(var(--dy) * 1.5));
    animation-timing-function: ease-out;
  }

  /* 3. 角まで一気に寄る */
  52% {
    transform: translate(0, 0);
    animation-timing-function: ease-out;
  }

  /* 4. 跳ね返って枠の外へ戻り、そのまま止まる */
  70%,
  100% {
    transform: translate(var(--dx), var(--dy));
  }
}

.pal-row__button:hover::before,
.pal-row__button:hover::after,
.pal-row__button:hover .pal-row__corners::before,
.pal-row__button:hover .pal-row__corners::after {
  opacity: 1;
  animation: pal-corner-pull 1.2s ease-in-out infinite;
}

/* 選択中の行はゲーム内 UI と同じ青で塗る */
.pal-row.is-selected .pal-row__button {
  background: linear-gradient(100deg, #0089e6 0%, #009cff 55%, #33b0ff 100%);
  border: 2px solid #fff;
}

.pal-row.is-selected::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  z-index: 1;
  width: 10px;
  height: 10px;
  background-color: #fff;
  transform: translateY(-50%) rotate(45deg);
}

.pal-row__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pal-row__no {
  /* No. の桁数が違っても属性バッジの開始位置が揃うようにする */
  min-width: 54px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}

.pal-row__no em {
  font-size: 16px;
  font-style: normal;
  letter-spacing: 0.12em;
  color: var(--color-text);
}

.pal-row__name {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* --- 属性バッジ（背景は属性アイコンから抽出した色） --- */
.pal-element {
  display: inline-flex;
  align-items: center;
  /* アイコンと属性名の間隔 */
  gap: 5px;
  /* アイコンと属性名のまとまりを 3px 左に寄せる（左の余白だけ詰める） */
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  background-color: var(--element-color, rgba(255, 255, 255, 0.12));
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pal-element__mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--element-color, #b0b6c0);
  box-shadow: 0 0 6px var(--element-color, #b0b6c0);
}

/* --- サムネイル --- */
.pal-row__thumb {
  position: absolute;
  top: 50%;
  /* 行の右端にぴったり寄せる */
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  transform: translateY(-50%);
}

.pal-row__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 画像が無いときだけ頭文字のプレースホルダに切り替える */
.pal-row__thumb-fallback {
  display: none;
}

.pal-row__thumb.is-fallback img {
  display: none;
}

.pal-row__thumb.is-fallback .pal-row__thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--element-color, #b0b6c0);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--element-color, #b0b6c0);
  font-size: 20px;
}

/* --- フィルター（左カラム上部に固定・ボタンで開閉） --- */
.pal-filter {
  position: relative;
  /* 開いた絞り込みパネルが下の一覧に隠れて押せなくならないよう、前に出しておく */
  z-index: 30;
  flex-shrink: 0;
  padding: 7px 10px;
  background-color: var(--glass-bg);
  border: 1px solid var(--color-line);
  /* 下の一覧の行と左右の位置を揃える
     （一覧は padding 20px ＋ スクロールバー分 12px だけ内側に寄っている） */
  margin: 0 32px 0 20px;
}

.pal-filter__bar {
  display: flex;
  align-items: center;
  /* フィルターボタンと検索欄の間隔は全ページ 10px でそろえている */
  gap: 10px;
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  /* 検索欄に押されて折り返さないよう、ボタンは縮ませない */
  flex-shrink: 0;
  white-space: nowrap;
  gap: 6px;
  padding: 5px 12px;
  background: none;
  border: 1px solid var(--color-line);
  color: var(--color-text);
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.filter-toggle:hover,
.filter-toggle.is-open {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-text);
}

/* 開閉する設定パネル */
.filter-panel {
  position: absolute;
  /* タグまで並ぶと縦に長くなるので、画面内に収めてスクロールさせる */
  max-height: min(560px, 70vh);
  overflow-y: auto;
  top: calc(100% + 6px);
  left: -1px;
  right: -1px;
  z-index: 30;
  padding: 12px 14px;
  /* 一覧に重なって開くパネルなので、下が透けすぎないよう他より暗くする */
  background-color: rgba(5, 6, 10, 1);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.filter-panel[hidden] {
  display: none;
}

.filter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.filter-panel__title {
  font-size: 11px;
  letter-spacing: 0.12em;
}

.pal-search {
  /* プレースホルダが見切れない幅を基準に、余った幅まで伸ばす */
  flex: 1 1 auto;
  width: 178px;
  min-width: 0;
  padding: 5px 10px 5px 27px;
  background-color: rgba(255, 255, 255, 0.06);
  /* 左端に虫眼鏡 */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.4'/%3E%3Cpath d='M10.4 10.4 14 14'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 12px 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  transition: border-color 0.2s ease;
}

.pal-search::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.pal-search:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
}

.pal-filter__count {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-muted);
}

.pal-filter__reset {
  padding: 4px 12px;
  background: none;
  border: 1px solid var(--color-line);
  color: var(--color-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.pal-filter__reset:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

.pal-filter__group + .pal-filter__group {
  margin-top: 8px;
}

.pal-filter__label {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

/* 3 列。1 行目の幅に 2 行目以降も揃うよう等幅グリッドにする */
.chip-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  /* ラベルを 2 行に折り返さない */
  white-space: nowrap;
  background: none;
  border: 1px solid var(--color-line);
  border-radius: 3px;
  color: var(--color-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.chip__icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.chip:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.4);
}

/* 属性チップは属性色の背景に白文字、作業適正チップは白背景に濃色 */
.chip.is-on {
  color: #0a0a0c;
  background-color: var(--element-color, #fff);
  border-color: var(--element-color, #fff);
}

.chip--element.is-on {
  color: #fff;
}

/* --- 種族値の並び替え --- */
/* HP・攻撃・防御で 1 行、合計が 2 行目に来るよう 3 列に並べる */
.chip-group--sort {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chip--sort {
  justify-content: center;
  gap: 3px;
}

.chip__arrow {
  font-size: 9px;
  line-height: 1;
}

.chip__arrow:empty {
  display: none;
}

/* --- タグ（カテゴリごとに折りたためる） --- */
.tag-group {
  border: 1px solid var(--color-line);
  border-radius: 4px;
}

.tag-group + .tag-group {
  margin-top: 4px;
}

.tag-group__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.04em;
  list-style: none;
}

.tag-group__summary::-webkit-details-marker {
  display: none;
}

/* 開閉を示す三角 */
.tag-group__summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid var(--color-muted);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform 0.15s ease;
}

.tag-group[open] .tag-group__summary::before {
  transform: rotate(90deg);
}

.tag-group__label {
  flex: 1 1 auto;
}

.tag-group__count {
  color: var(--color-muted);
}

.tag-group .chip-group--tag {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px 8px;
}

.chip--tag {
  font-size: 10px;
}

/* --- 詳細 --- */
/* 中央カラム：上部にタブを固定し、下だけスクロールさせる */
.zukan__main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

/* 左のフィルターと同じ高さの帯 */
.detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
  padding: 7px 10px;
  background-color: var(--glass-bg);
  border: 1px solid var(--color-line);
  /* 下のスクロール領域と左右の位置を合わせる（余白 20px ＋ スクロールバー分 12px） */
  margin: 0 32px 0 20px;
}

.detail-tab {
  padding: 5px 14px;
  background: none;
  border: 1px solid var(--color-line);
  color: var(--color-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.detail-tab:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.5);
}

.detail-tab.is-on {
  color: var(--color-text);
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

/* スクロールバーの有無で内容の横幅が変わらないよう、常に余白を確保する */
.zukan__detail {
  flex: 1 1 auto;
  min-height: 0;
  /* 左の一覧と同じだけ内側に余白をとり、スクロールバーの位置を揃える */
  padding: 0 20px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.pal-detail__placeholder {
  padding: 80px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
}

.pal-detail {
  padding: 24px clamp(20px, 3vw, 32px) 32px;
  background: linear-gradient(160deg, rgba(26, 29, 35, 0.34) 0%, rgba(14, 16, 19, 0.3) 60%, rgba(8, 9, 11, 0.34) 100%);
  border: 1px solid var(--color-line);
}

.pal-detail__head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
}

/* ヘッダーも 2 列組にするので、上の余白は要らない */
.pal-detail__head.pal-detail__columns {
  margin-top: 0;
  align-items: end;
}

.pal-detail__no {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-muted);
}

.pal-detail__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.pal-detail__en {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

/* 名前の右に置く属性アイコン（バッジなし） */
.pal-detail__icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: center;
}

.pal-detail__icons img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.pal-block {
  margin-top: 24px;
}

/* ヘッダーを出さないタブでは、先頭のブロックを上に詰める */
.pal-detail > *:first-child {
  margin-top: 0;
}

/* 1 列目：パートナースキル＋落とすアイテム／2 列目：作業適正 */
.pal-detail__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.pal-detail__columns .pal-block {
  margin-top: 0;
}

.pal-detail__col .pal-block + .pal-block {
  margin-top: 24px;
}

/* 詳細カラムが狭いときは 1 列に戻す */
@media (max-width: 1379px) {
  .pal-detail__columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.pal-block__title {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* --- パートナースキル --- */
.pal-skill__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-line);
  font-size: 15px;
  letter-spacing: 0.04em;
}

.pal-skill__level {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-muted);
}

.pal-skill__desc {
  margin-top: 10px;
  padding: 0 2px;
}

.pal-skill__line {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-muted);
}

.pal-skill__line + .pal-skill__line {
  margin-top: 4px;
}

/* 凝縮ランクで変わる数値 */
.skill-value {
  color: #6fa8ff;
  font-weight: 600;
}

/* --- 凝縮ランクの切り替え --- */
/* 名前の行、英語名のすぐ右に並べる */
.star-select {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-self: center;
}

.star-button {
  padding: 4px 10px;
  background: none;
  border: 1px solid var(--color-line);
  color: var(--color-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.star-button:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.5);
}

.star-button.is-on {
  color: #ffd65c;
  background-color: rgba(255, 214, 92, 0.12);
  border-color: rgba(255, 214, 92, 0.6);
}

.pal-detail__empty {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
}

/* --- 作業適正（全 12 種を並べ、適正なしはグレーアウト） --- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-grid__item {
  /* ゲージの有無で高さが変わらないよう、下側にゲージ用の余白を確保しておく */
  position: relative;
  padding: 7px 12px 11px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

.work-grid__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* レベルを表す 10 目盛のゲージ */
/* 項目の下端に敷く。高さに影響させないよう絶対配置にする */
.work-gauge {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  display: flex;
  gap: 2px;
}

.work-gauge i {
  flex: 1 1 0;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.16);
}

.work-gauge i.is-on {
  background-color: #fff;
}

/* 凝縮（★）で増えたぶん */
.work-gauge i.is-up {
  background-color: #ffb43c;
}

/* 食事量 */
.food-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

.food-amount__gauge {
  display: flex;
  gap: 2px;
}

.food-amount__gauge img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.work-grid__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.work-grid__name {
  flex: 1 1 auto;
}

.work-grid__level {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-muted);
}

/* 適正が無い作業 */
.work-grid__item.is-off {
  background-color: rgba(255, 255, 255, 0.02);
  border-left-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.28);
}

.work-grid__item.is-off .work-grid__icon {
  filter: grayscale(1);
  opacity: 0.3;
}

/* --- 落とすアイテム --- */
.drop-group + .drop-group {
  margin-top: 12px;
}

.drop-group__label {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.drop-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drop-list__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-line);
  font-size: 13px;
}

.drop-list__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.drop-list__detail {
  font-size: 11px;
  color: var(--color-muted);
}

/* --- 生息地域 --- */
.habitat-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.habitat-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

.habitat-list__item + .habitat-list__item {
  margin-top: 6px;
}

.habitat-list__label {
  flex-shrink: 0;
  padding: 1px 9px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}

.habitat-list__text {
  color: var(--color-muted);
  line-height: 1.7;
}

/* --- ステータス --- */
.stat-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

.stat-row + .stat-row {
  margin-top: 4px;
}

.stat-row__label {
  flex-shrink: 0;
  width: 52px;
  color: var(--color-muted);
}

.stat-row__bar {
  flex: 1 1 auto;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.12);
}

.stat-row__bar i {
  display: block;
  height: 100%;
  background-color: #fff;
}

.stat-row__value {
  flex-shrink: 0;
  width: 46px;
  text-align: right;
}

.stat-row--total .stat-row__value {
  color: #ffd65c;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-row li {
  padding: 5px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-line);
  font-size: 13px;
}

/* --- わざ --- */
.skill-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skill-row {
  padding: 9px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
}

.skill-row + .skill-row {
  margin-top: 5px;
}

.skill-row__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.skill-row__level {
  flex-shrink: 0;
  width: 44px;
  font-size: 11px;
  color: var(--color-muted);
}

.skill-row__element {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.skill-row__name {
  flex: 1 1 auto;
}

.skill-row__badge {
  padding: 1px 8px;
  border: 1px solid rgba(255, 214, 92, 0.6);
  border-radius: 999px;
  color: #ffd65c;
  font-size: 10px;
}

.skill-row__stat {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--color-muted);
}

.skill-row__desc {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-muted);
}

.skill-row__ailment {
  margin: 4px 0 0;
  font-size: 11px;
  color: #6fa8ff;
}

/* --- 配合 --- */
.pal-block__count {
  margin-left: 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* --- 配合ツール --- */
.breed-tool {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 親1 ＋ 親2 ＝ 子 の入力欄。3 つのスロットは横並びのまま中央に置く */
.breed-tool__form {
  --slot-size: 120px;
  --slot-label: 21px; /* ラベル 1 行分の高さ。演算子をマスの中心に揃えるのに使う */

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: linear-gradient(100deg, rgba(26, 29, 35, 0.34) 0%, rgba(14, 16, 19, 0.3) 60%, rgba(8, 9, 11, 0.34) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.breed-tool__op {
  /* スロットはラベルのぶん背が高いので、その半分だけ下げてマスの中心に合わせる */
  margin-top: calc(var(--slot-label) / 2);
  font-size: 16px;
  color: var(--color-muted);
}

.breed-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: var(--slot-size);
  min-width: 0;
}

.breed-slot__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--color-muted);
}

/* パルを入れるマスは正方形にする */
.breed-slot__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  aspect-ratio: 1;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.breed-slot__button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.breed-slot.is-filled .breed-slot__button {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.3);
}

.breed-slot.is-open .breed-slot__button {
  border-color: #ffd65c;
}

.breed-slot__placeholder {
  font-size: 12px;
  color: var(--color-muted);
}

.breed-slot__name {
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breed-slot__no {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.breed-slot__clear {
  position: absolute;
  top: calc(var(--slot-label) + 2px);
  right: 2px;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  color: #e0483f;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.breed-slot__clear:hover {
  color: #ff6b60;
}

/* --- サムネイル（画像が無いときだけ頭文字に切り替える） --- */
.breed-thumb {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

.breed-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.breed-thumb__fallback {
  display: none;
}

.breed-thumb.is-fallback img {
  display: none;
}

.breed-thumb.is-fallback .breed-thumb__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.06);
  font-size: 16px;
}

.breed-thumb--slot {
  width: 60px;
  height: 60px;
}

.breed-thumb--pick {
  width: 52px;
  height: 52px;
}

/* --- ボタン --- */
.breed-tool__actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.breed-button {
  padding: 7px 20px;
  background: none;
  border: 1px solid var(--color-line);
  color: var(--color-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.breed-button:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.08);
}

.breed-button--primary {
  border-color: rgba(255, 214, 92, 0.6);
  color: #ffd65c;
}

.breed-button--primary:hover {
  border-color: #ffd65c;
  background-color: rgba(255, 214, 92, 0.14);
  color: #ffd65c;
}

/* --- パルを選ぶピッカー --- */
.breed-picker {
  background-color: var(--glass-bg);
  border: 1px solid rgba(255, 214, 92, 0.4);
}

.breed-picker__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-line);
}

/* 図鑑のフィルター（.pal-search）と同じ、左に虫眼鏡を置いた丸い検索欄 */
.breed-picker__search {
  flex: 1 1 160px;
  min-width: 0;
  padding: 6px 12px 6px 30px;
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.4'/%3E%3Cpath d='M10.4 10.4 14 14'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 11px center;
  background-size: 12px 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  transition: border-color 0.2s ease;
}

.breed-picker__search::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.breed-picker__search:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
}

.breed-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 4px;
  max-height: 320px;
  padding: 10px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.breed-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.breed-pick:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 214, 92, 0.6);
}

.breed-pick__name {
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 検索結果 --- */
.breed-results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.breed-results__title {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.breed-results__count {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.breed-results__note,
.breed-empty {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--color-muted);
}

.breed-cards {
  display: grid;
  /* min() を挟んで、300px より狭い画面でも横にはみ出さないようにする */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breed-card {
  position: relative;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
}

.breed-card.is-special {
  border-left-color: #ffd65c;
  background-color: rgba(255, 214, 92, 0.08);
}

.breed-card__badge {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 1px 7px;
  border: 1px solid rgba(255, 214, 92, 0.6);
  border-radius: 999px;
  color: #ffd65c;
  font-size: 10px;
}

.breed-card__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 2px;
}

.breed-card__op {
  font-size: 12px;
  text-align: center;
  color: var(--color-muted);
}

.breed-pal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding: 4px 2px;
  background: none;
  border: 1px solid transparent;
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.breed-pal:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.breed-pal__name {
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breed-pal--child .breed-pal__name {
  color: #ffd65c;
}

.breed-pal__no {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* スクロールでの読み足しを検知するための番兵。高さだけ持たせて見えなくしておく */
.breed-results__sentinel {
  height: 1px;
  margin-top: 8px;
}

/* 狭い画面でも「親 ＋ 親 ＝ 子」の横並びは崩さず、マスだけ小さくする */
@media (max-width: 720px) {
  .breed-tool__form {
    --slot-size: 86px;

    gap: 4px;
    padding: 10px 8px;
  }

  .breed-slot__button {
    padding: 6px 4px;
  }

  .breed-slot__no {
    display: none;
  }

  .breed-thumb--slot {
    width: 44px;
    height: 44px;
  }

  .breed-thumb {
    width: 44px;
    height: 44px;
  }
}

/* マップ上のボスマーカーと同じ見た目（赤枠の丸） */
.habitat-map__boss-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  background-color: rgba(10, 10, 12, 0.92);
  border: 2px solid #ff3b3b;
  border-radius: 50%;
}

.habitat-map__boss-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* --- 生息地マップ --- */
.habitat-map {
  /* マップとタブの幅を揃えるための基準 */
  --map-width: 420px;
}

/* マップと同じ幅に収め、昼夜ボタンがマップの右端に揃うようにする */
.habitat-map__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  max-width: var(--map-width);
  margin-bottom: 6px;
}

/* マップ上のボスアイコンが何かを示す一行 */
.habitat-map__boss {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: var(--map-width);
  margin: 0 0 6px;
  padding: 4px 8px;
  background-color: rgba(227, 50, 60, 0.14);
  border-left: 2px solid #e3323c;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.habitat-map__boss img {
  flex-shrink: 0;
}

.habitat-map__boss-count {
  margin-left: auto;
  color: var(--color-muted);
}

.map-tab-group {
  display: flex;
  gap: 4px;
}

.map-tab {
  padding: 4px 12px;
  background: none;
  border: 1px solid var(--color-line);
  color: var(--color-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.map-tab:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.5);
}

.map-tab.is-on {
  color: var(--color-text);
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

/* そのパルの生息情報が無いマップ */
.map-tab:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.map-tab:disabled:hover {
  color: var(--color-muted);
  border-color: var(--color-line);
}

/* 拡大縮小の窓。はみ出した部分は隠す */
.habitat-map__viewport {
  position: relative;
  max-width: var(--map-width);
  overflow: hidden;
  border: 1px solid var(--color-line);
  background-color: rgba(14, 16, 19, 0.32);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.habitat-map__viewport.is-zoomed {
  cursor: grab;
}

.habitat-map__viewport.is-dragging {
  cursor: grabbing;
}

/* ベースマップの上に生息区域のレイヤーを重ねる */
.habitat-map__canvas {
  position: relative;
  transform-origin: center center;
  will-change: transform;
}

/* 画像側でブラウザ標準のドラッグが始まるとパンできないので止める */
.habitat-map__canvas img,
.habitat-map__canvas canvas {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* スポーン地点を描く重ね合わせ */
.habitat-map__points {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.habitat-map__base {
  width: 100%;
  height: auto;
}

/* 生息区域の塗りが無いパルへの注記 */
.habitat-map__note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 8px 10px;
  background-color: var(--glass-bg);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  color: var(--color-muted);
}

/* 拡大縮小ボタン */
.habitat-map__zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.habitat-map__zoom button {
  width: 26px;
  height: 26px;
  background-color: var(--glass-bg);
  border: 1px solid var(--color-line);
  color: var(--color-text);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.habitat-map__zoom button:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: var(--color-text);
}

.habitat-map__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ---------------------------------------------
   アイテム（#/items）
--------------------------------------------- */
body[data-route="/items"] {
  overflow: hidden;
}

body[data-route="/items"] .app {
  height: 100vh;
  height: 100svh;
}

body[data-route="/items"] .view {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.page--items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 1760px;
  height: 100%;
  padding: calc(var(--header-height) + 14px) clamp(12px, 2vw, 28px) 14px;
}

/* カテゴリのタブ */





.items {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.items__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

/* 検索とレアリティ */
.item-filter {
  position: relative;
  z-index: 30;
  flex-shrink: 0;
  /* 下の一覧は右に padding 20px ＋ スクロールバー分 12px の余白があるので、枠の右端を揃える */
  margin-right: 32px;
  padding: 8px 10px;
  background-color: var(--glass-bg);
  border: 1px solid var(--color-line);
}

/* 図鑑のフィルターと同じ並び（ボタン → 検索 → 件数） */
.item-filter__bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-filter .filter-panel {
  left: -1px;
  right: -1px;
}

.chip__count {
  margin-left: 4px;
  font-size: 9px;
  opacity: 0.7;
}

.item-search {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 5px 10px 5px 27px;
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.4'/%3E%3Cpath d='M10.4 10.4 14 14'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 12px 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
}

.item-search::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.item-search:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
}

.item-filter__count {
  flex-shrink: 0;
  font-size: 11px;
  white-space: nowrap;
  color: var(--color-muted);
}


.chip--rarity {
  color: var(--rarity-color, var(--color-muted));
  border-color: rgba(255, 255, 255, 0.2);
}

.chip--rarity.is-on {
  color: #0a0a0c;
  background-color: var(--rarity-color, #fff);
  border-color: var(--rarity-color, #fff);
}

/* 一覧 */
.item-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 20px 0 0;
  /* 器は塗らない。行そのものがガラスなので、スクロールバーの帯まで背景が透ける */
  background-color: transparent;
  overflow-y: auto;
  scrollbar-gutter: stable;
  list-style: none;
}

.item-list__empty {
  padding: 20px 8px;
  font-size: 12px;
  text-align: center;
  color: var(--color-muted);
}

.item-row + .item-row {
  margin-top: 4px;
}

.item-row__button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  background: linear-gradient(100deg, rgba(26, 29, 35, 0.34) 0%, rgba(14, 16, 19, 0.3) 60%, rgba(8, 9, 11, 0.34) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--rarity-color, #fff);
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.item-row__button:hover {
  background: linear-gradient(100deg, rgba(42, 45, 51, 0.5) 0%, rgba(28, 31, 36, 0.46) 60%, rgba(19, 21, 25, 0.5) 100%);
}

.item-row.is-selected .item-row__button {
  background: linear-gradient(100deg, rgba(67, 71, 79, 0.58) 0%, rgba(51, 55, 61, 0.54) 60%, rgba(36, 39, 44, 0.58) 100%);
  border-color: #fff;
  border-left-color: var(--rarity-color, #fff);
}

.item-row__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.item-row__icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.item-row__body {
  flex: 1 1 auto;
  min-width: 0;
}

.item-row__name {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

.item-row__meta {
  display: block;
  font-size: 10px;
  color: var(--color-muted);
}

.item-row__rarity {
  flex-shrink: 0;
  font-size: 10px;
  white-space: nowrap;
  color: var(--rarity-color, var(--color-muted));
}

/* 詳細 */
.items__main {
  min-width: 0;
  min-height: 0;
  /* 枠を目一杯広げ、右はスクロールバー分だけ空ける */
  padding: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.item-detail {
  padding: 24px clamp(20px, 3vw, 32px) 32px;
  background: linear-gradient(160deg, rgba(26, 29, 35, 0.34) 0%, rgba(14, 16, 19, 0.3) 60%, rgba(8, 9, 11, 0.34) 100%);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--rarity-color, #fff);
}

.item-detail__head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
}

.item-detail__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-line);
}

.item-detail__icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.item-detail__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.item-detail__rarity {
  color: var(--rarity-color, #fff);
}

.item-detail__name {
  margin: 4px 0 0;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.item-detail__desc {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-muted);
}

.item-block {
  margin-top: 24px;
}

.item-block__title {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.item-block__count {
  margin-left: 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.item-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item-stats__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

.item-stats__label {
  color: var(--color-muted);
}

.item-recipe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item-recipe__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

.item-recipe__icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.item-recipe__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-recipe__count {
  flex-shrink: 0;
  color: var(--color-muted);
}

.item-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item-sources li {
  padding: 6px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-line);
  font-size: 13px;
}

.item-uses {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item-uses__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-line);
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.item-uses__link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}

.item-uses__link img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* 狭い幅では縦に積む */
@media (max-width: 899px) {
  body[data-route="/items"] {
    overflow: auto;
  }

  body[data-route="/items"] .app {
    height: auto;
    min-height: 100svh;
  }

  body[data-route="/items"] .view {
    display: block;
    overflow: visible;
  }

  .page--items {
    height: auto;
    padding-bottom: 40px;
  }

  .items {
    grid-template-columns: 1fr;
    height: auto;
  }

  .item-list {
    max-height: 46vh;
  }

  .items__main {
    overflow: visible;
  }
}

/* ---------------------------------------------
   マップ（#/map）
--------------------------------------------- */
/* 図鑑と同じく、ページ自体はスクロールさせない */
body[data-route="/map"] {
  overflow: hidden;
}

body[data-route="/map"] .app {
  height: 100vh;
  height: 100svh;
}

body[data-route="/map"] .view {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.page--map {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1760px;
  height: 100%;
  padding: calc(var(--header-height) + 14px) clamp(12px, 2vw, 28px) 14px;
}

.palmap {
  display: grid;
  /* フィルター・検索欄・地点数が 1 行に収まる幅 */
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 16px;
  height: 100%;
  min-height: 0;
}

/* --- サイドバー --- */
.palmap__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.palmap__side-tabs {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 3px;
  background-color: var(--glass-bg);
  border: 1px solid var(--color-line);
  border-radius: 6px;
}

.palmap__side-tab {
  flex: 1 1 0;
  padding: 6px 10px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--color-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.palmap__side-tab:hover {
  color: var(--color-text);
  background-color: rgba(255, 255, 255, 0.08);
}

.palmap__side-tab.is-on {
  color: #0a0a0c;
  background-color: #ffd65c;
}

/* タブで切り替える中身。縦に伸ばして一覧側をスクロールさせる */
.palmap__pane {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.palmap__pane[hidden] {
  display: none;
}

.palmap__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  /* 下のカテゴリ一覧はスクロールバー分だけ内側に寄るので、右端を合わせる */
  margin-right: 12px;
  padding: 10px 12px;
  background-color: var(--glass-bg);
  border: 1px solid var(--color-line);
}

.palmap__panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.palmap__panel-title {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.12em;
}

.palmap__panel-count {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* --- フィルター（他ページと同じ、ボタンで開閉する設定パネル） --- */
.palmap-filter {
  position: relative;
  /* 開いたパネルがマップに隠れないよう前に出しておく */
  z-index: 30;
  flex-shrink: 0;
  padding: 7px 10px;
  background-color: var(--glass-bg);
  border: 1px solid var(--color-line);
}

.palmap-filter__bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.palmap-filter__count {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-muted);
}

/* 地点の種類はパネルの中に置く。スクロールはパネル側に任せる */
.palmap-filter .palmap-poi {
  flex: 0 0 auto;
  overflow: visible;
}

/* 図鑑のフィルターと同じ、左に虫眼鏡を置いた丸い検索欄 */
.palmap-search {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 10px 5px 27px;
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.4'/%3E%3Cpath d='M10.4 10.4 14 14'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 12px 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  transition: border-color 0.2s ease;
}

.palmap-search::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.palmap-search:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
}

.chip-group--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chip-group--compact .chip {
  padding: 3px 8px;
  font-size: 10px;
}

.chip--reset {
  border-style: dashed;
}

/* --- 地点カテゴリの一覧 --- */
.palmap-poi {
  flex: 1 1 auto;
  min-height: 0;
  /* 器は塗らない。グループの箱それぞれがガラスになっている */
  background-color: transparent;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.palmap-group {
  margin-bottom: 4px;
  background-color: var(--glass-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.palmap-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background-color: rgba(255, 255, 255, 0.06);
  border: none;
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.palmap-group__head:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* 開閉を示す三角 */
.palmap-group__name::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  color: var(--color-muted);
  transition: transform 0.2s ease;
}

.palmap-group.is-open .palmap-group__name::before {
  transform: rotate(90deg);
}

.palmap-group__count {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--color-muted);
}

.palmap-group__body {
  margin: 0;
  padding: 4px;
  list-style: none;
}

.palmap-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--color-muted);
  font-family: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.palmap-cat:hover {
  color: var(--color-text);
  background-color: rgba(255, 255, 255, 0.08);
}

.palmap-cat.is-on {
  color: var(--color-text);
  background-color: rgba(255, 214, 92, 0.14);
  border-color: rgba(255, 214, 92, 0.5);
}

.palmap-cat__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  object-fit: contain;
  /* 未選択のうちは色を落として、選択中との差をつける */
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.palmap-cat:hover .palmap-cat__icon,
.palmap-cat.is-on .palmap-cat__icon {
  opacity: 1;
}

.palmap-cat__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palmap-cat__count {
  flex-shrink: 0;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

/* --- 選択中のパル --- */
.palmap-selected {
  flex-shrink: 0;
  padding: 10px 12px;
  background: linear-gradient(100deg, rgba(26, 29, 35, 0.34) 0%, rgba(14, 16, 19, 0.3) 60%, rgba(8, 9, 11, 0.34) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.palmap-selected__empty {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--color-muted);
}

.palmap-selected__pal {
  display: flex;
  align-items: center;
  gap: 10px;
}

.palmap-selected__text {
  min-width: 0;
}

.palmap-selected__name {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.palmap-selected__meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--color-muted);
}

.palmap-selected__actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.palmap-button {
  padding: 5px 12px;
  background: none;
  border: 1px solid var(--color-line);
  color: var(--color-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.palmap-button:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.08);
}

/* --- パル一覧 --- */
.palmap-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 6px;
  background-color: var(--glass-bg);
  border: 1px solid var(--color-line);
  overflow-y: auto;
  scrollbar-gutter: stable;
  list-style: none;
}

.palmap-list__empty {
  padding: 24px 8px;
  font-size: 12px;
  text-align: center;
  color: var(--color-muted);
}

.palmap-row {
  margin-bottom: 4px;
}

.palmap-row__button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  background-color: rgba(14, 16, 19, 0.32);
  border: 1px solid transparent;
  border-left: 2px solid rgba(255, 255, 255, 0.15);
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.palmap-row__button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.palmap-row.is-on .palmap-row__button {
  background-color: rgba(255, 214, 92, 0.12);
  border-left-color: #ffd65c;
}

.palmap-row__thumb {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.palmap-row__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.palmap-selected__pal .palmap-row__thumb {
  width: 52px;
  height: 52px;
}

.palmap-row__body {
  flex: 1 1 auto;
  min-width: 0;
}

.palmap-row__name {
  display: block;
  overflow: hidden;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palmap-row__meta {
  display: block;
  font-size: 10px;
  color: var(--color-muted);
}

.palmap-row__elements {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
}

/* --- マップ本体 --- */
.palmap__stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  background-color: rgba(14, 16, 19, 0.32);
  border: 1px solid var(--color-line);
  overflow: hidden;
}

/* フルスクリーン API が使えないときの代替表示 */
.palmap__stage.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  border: none;
}

.palmap__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.palmap__viewport.is-dragging {
  cursor: grabbing;
}

.palmap__base {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.palmap__markers {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* --- マップに重ねる操作パーツ --- */
/* カーソル位置の座標。マップの左上、種別タブの下に置く */
.palmap__readout {
  position: absolute;
  left: 8px;
  top: 6px;
  z-index: 2;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  /* 枠を敷かないので、地図の明るいところでも読めるよう影で縁取る */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.palmap__tools {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.palmap-tool {
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: var(--glass-bg);
  border: 1px solid var(--color-line);
  border-radius: 6px;
  color: var(--color-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.palmap-tool:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.14);
}

/* --- ショートカット案内 --- */
/* --- 下部のバー --- */
/* --- 左下のマップ切り替え --- */
.palmap__switch {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  transition: color 0.2s ease;
}

.palmap__switch:hover {
  color: var(--color-text);
}

.palmap__switch:hover .palmap__switch-key {
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.2);
}

/* T キーを表す角丸の正方形 */
.palmap__switch-key {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  color: var(--color-text);
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
}

/* --- ホバー時の吹き出し --- */
.palmap-tip {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 9px;
  background-color: var(--glass-bg);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
  white-space: nowrap;
}

.palmap-tip[hidden] {
  display: none;
}

.palmap-tip__name {
  font-size: 12px;
  letter-spacing: 0.02em;
}

.palmap-tip__meta {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

/* ---------------------------------------------
   スキル（#/skills）
   パッシブスキルの一覧。アイテムページと同じ 2 カラム構成
--------------------------------------------- */
body[data-route="/skills"] {
  overflow: hidden;
}

body[data-route="/skills"] .app {
  height: 100vh;
  height: 100svh;
}

body[data-route="/skills"] .view {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.page--passives {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 1760px;
  height: 100%;
  padding: calc(var(--header-height) + 14px) clamp(12px, 2vw, 28px) 14px;
}

/* ランクを表す矢印（プラスは上向き・マイナスは下向き） */
/* ランクのチップ。選んでいる間はそのランクの色で塗る */
.chip--rank.is-on {
  color: #0a0a0c;
  background-color: var(--rank-color, #fff);
  border-color: var(--rank-color, #fff);
}

.chip--rank.is-on .rank-icon {
  color: #0a0a0c;
}

.rank-icon {
  flex-shrink: 0;
  color: var(--rank-color, #fff);
}

/* 世界樹のパッシブだけは光らせて別格に見せる */
.rank-icon--special {
  filter: drop-shadow(0 0 4px var(--rank-color, #fff));
}

/* --- 絞り込み（図鑑と同じく、ボタンで設定パネルを開閉する） --- */
.passive-filter {
  position: relative;
  /* 開いた絞り込みパネルが下の一覧に隠れて押せなくならないよう、前に出しておく */
  z-index: 30;
  flex-shrink: 0;
  /* 下の一覧は右に padding 20px ＋ スクロールバー分 12px の余白があるので、枠の右端を揃える */
  margin-right: 32px;
  padding: 7px 10px;
  background-color: var(--glass-bg);
  border: 1px solid var(--color-line);
}

.passive-filter__bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.passive-search {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 10px 5px 27px;
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.4'/%3E%3Cpath d='M10.4 10.4 14 14'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 12px 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
}

.passive-search::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.passive-search:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
}

.passive-filter__count {
  flex-shrink: 0;
  font-size: 11px;
  white-space: nowrap;
  color: var(--color-muted);
}

/* インプラントのアイテム画像。一覧の右端と詳細のバッジで使う */
.implant-icon {
  flex-shrink: 0;
  object-fit: contain;
}

/* --- 一覧 --- */
.passive-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 20px 0 0;
  /* 器は塗らない。行そのものがガラスなので、スクロールバーの帯まで背景が透ける */
  background-color: transparent;
  overflow-y: auto;
  scrollbar-gutter: stable;
  list-style: none;
}

.passive-list__empty {
  padding: 20px 8px;
  font-size: 12px;
  text-align: center;
  color: var(--color-muted);
}

.passive-row + .passive-row {
  margin-top: 4px;
}

.passive-row__button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  background: linear-gradient(100deg, rgba(26, 29, 35, 0.34) 0%, rgba(14, 16, 19, 0.3) 60%, rgba(8, 9, 11, 0.34) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--rank-color, #fff);
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.passive-row__button:hover {
  background: linear-gradient(100deg, rgba(42, 45, 51, 0.5) 0%, rgba(28, 31, 36, 0.46) 60%, rgba(19, 21, 25, 0.5) 100%);
}

.passive-row.is-selected .passive-row__button {
  background: linear-gradient(100deg, rgba(67, 71, 79, 0.58) 0%, rgba(51, 55, 61, 0.54) 60%, rgba(36, 39, 44, 0.58) 100%);
  border-color: #fff;
  border-left-color: var(--rank-color, #fff);
}

.passive-row__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
}

.passive-row__body {
  flex: 1 1 auto;
  min-width: 0;
}

.passive-row__name {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--rank-color, #fff);
}

/* 効果は 1 行にまとめ、はみ出したぶんは省略する */
.passive-row__effects {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--color-muted);
}

.passive-row__effects span + span::before {
  content: " / ";
}

/* 行の右端。インプラントで付けられるものだけ出る */
.passive-row__implant {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* --- 詳細 --- */
.passives {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.passives__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.passives__main {
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.passive-detail__placeholder {
  padding: 80px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
}

.passive-detail {
  padding: 24px clamp(20px, 3vw, 32px) 32px;
  background: linear-gradient(160deg, rgba(26, 29, 35, 0.34) 0%, rgba(14, 16, 19, 0.3) 60%, rgba(8, 9, 11, 0.34) 100%);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--rank-color, #fff);
}

.passive-detail__head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
}

.passive-detail__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-line);
}

.passive-detail__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.passive-detail__rank {
  color: var(--rank-color, #fff);
}

.passive-detail__name {
  margin: 4px 0 0;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.passive-block {
  margin-top: 24px;
}

.passive-block__title {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.passive-block__count {
  margin-left: 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.passive-block__note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.8;
  color: var(--color-muted);
}

.passive-effects {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passive-effects li {
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 2px solid var(--rank-color, rgba(255, 255, 255, 0.3));
  font-size: 13px;
}

.passive-howto {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passive-howto__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

.passive-howto__tag {
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid var(--color-line);
  font-size: 11px;
  white-space: nowrap;
  color: var(--color-muted);
}

.passive-howto__text {
  flex: 1 1 220px;
  line-height: 2.1;
}

/* 入手方法の文中に差し込むパルへのリンク */
.pal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 1px;
  padding: 1px 8px 1px 2px;
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 12px;
  vertical-align: middle;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.pal-chip:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}

.pal-chip__thumb {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
}

.pal-chip__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.passive-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passive-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-line);
  font-size: 12px;
}

.passive-badge--implant {
  padding-left: 6px;
  border-color: rgba(255, 255, 255, 0.4);
}

.passive-badge--ok {
  border-color: rgba(41, 245, 214, 0.6);
  color: #29f5d6;
}

.passive-badge--ng {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-muted);
}

.passive-owners {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 狭い幅では縦に積む */
@media (max-width: 899px) {
  body[data-route="/skills"] {
    overflow: auto;
  }

  body[data-route="/skills"] .app {
    height: auto;
    min-height: 100svh;
  }

  body[data-route="/skills"] .view {
    display: block;
    overflow: visible;
  }

  .page--passives {
    height: auto;
    padding-bottom: 40px;
  }

  .passives {
    grid-template-columns: 1fr;
    height: auto;
  }

  .passive-list {
    max-height: 46vh;
  }

  .passives__main {
    overflow: visible;
  }
}

/* ---------------------------------------------
   わざ（#/moves）
--------------------------------------------- */
body[data-route="/moves"] {
  overflow: hidden;
}

body[data-route="/moves"] .app {
  height: 100vh;
  height: 100svh;
}

body[data-route="/moves"] .view {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.page--moves {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1760px;
  height: 100%;
  padding: calc(var(--header-height) + 14px) clamp(12px, 2vw, 28px) 14px;
}

.moves {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.moves__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

/* 図鑑用の左余白は要らない。一覧（右に padding 20px ＋ スクロールバー分 12px）に合わせる */
.page--moves .pal-filter {
  margin: 0 32px 0 0;
}

/* --- 一覧 --- */
.move-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 20px 0 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  list-style: none;
}

.move-list__empty {
  padding: 24px 8px;
  font-size: 12px;
  text-align: center;
  color: var(--color-muted);
}

.move-row + .move-row {
  margin-top: 4px;
}

.move-row__button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  background: linear-gradient(100deg, rgba(26, 29, 35, 0.34) 0%, rgba(14, 16, 19, 0.3) 60%, rgba(8, 9, 11, 0.34) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--element-color, #fff);
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.move-row__button:hover {
  background: linear-gradient(100deg, rgba(42, 45, 51, 0.5) 0%, rgba(28, 31, 36, 0.46) 60%, rgba(19, 21, 25, 0.5) 100%);
}

.move-row.is-selected .move-row__button {
  background: linear-gradient(100deg, rgba(67, 71, 79, 0.58) 0%, rgba(51, 55, 61, 0.54) 60%, rgba(36, 39, 44, 0.58) 100%);
  border-color: #fff;
  border-left-color: var(--element-color, #fff);
}

.move-row__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.move-row__icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.move-row__body {
  flex: 1 1 auto;
  min-width: 0;
}

.move-row__name {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

.move-row__meta {
  display: block;
  font-size: 10px;
  color: var(--color-muted);
}

.move-row__badges {
  flex-shrink: 0;
  display: flex;
  gap: 3px;
}

.move-badge {
  padding: 1px 7px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 10px;
  white-space: nowrap;
  color: var(--color-muted);
}

.move-badge--exclusive {
  border-color: rgba(255, 214, 92, 0.6);
  color: #ffd65c;
}

.move-badge--fruit {
  border-color: rgba(111, 168, 255, 0.6);
  color: #6fa8ff;
}

/* --- 詳細 --- */
.moves__main {
  min-width: 0;
  min-height: 0;
  padding: 0 20px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.move-detail__placeholder,
.move-detail__empty {
  margin: 0;
  padding: 12px 0;
  font-size: 13px;
  color: var(--color-muted);
}

.move-detail__placeholder {
  padding: 80px 20px;
  text-align: center;
}

.move-detail {
  padding: 24px clamp(20px, 3vw, 32px) 32px;
  background: linear-gradient(160deg, rgba(26, 29, 35, 0.34) 0%, rgba(14, 16, 19, 0.3) 60%, rgba(8, 9, 11, 0.34) 100%);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--element-color, #fff);
}

.move-detail__head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
}

.move-detail__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.move-detail__name {
  margin: 8px 0 0;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.move-detail__desc {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-muted);
}

.move-block {
  margin-top: 24px;
}

.move-block__title {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.move-block__count {
  margin-left: 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.move-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.move-stats__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

.move-stats__label {
  color: var(--color-muted);
}

.move-howto {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-muted);
}

.move-pals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.move-pals__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  font-size: 13px;
}

.move-pals__thumb {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.move-pals__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.move-pals__level {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--color-muted);
}

/* 狭い幅では縦に積む */
@media (max-width: 899px) {
  body[data-route="/moves"] {
    overflow: auto;
  }

  body[data-route="/moves"] .app {
    height: auto;
    min-height: 100svh;
  }

  body[data-route="/moves"] .view {
    display: block;
    overflow: visible;
  }

  .page--moves {
    height: auto;
    padding-bottom: 40px;
  }

  .moves {
    grid-template-columns: 1fr;
    height: auto;
  }

  .move-list {
    max-height: 46vh;
  }

  .moves__main {
    overflow: visible;
  }
}

/* ---------------------------------------------
   Footer
--------------------------------------------- */
.site-footer {
  flex-shrink: 0;
  padding: 24px clamp(16px, 4vw, 40px);
  /* ヘッダーと揃えて背景は敷かない */
  background-color: transparent;
  text-align: center;
}

/* フッターはトップページのみ表示する */
body:not([data-route="/"]) .site-footer {
  display: none;
}

.site-footer__disclaimer {
  max-width: 720px;
  margin: 0 auto 10px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-muted);
}

.site-footer__copyright {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

/* ---------------------------------------------
   Responsive
--------------------------------------------- */
/* 図鑑：狭い幅では左右に並べず、ページ全体のスクロールに戻して縦に積む */
@media (max-width: 899px) {
  body[data-route="/zukan"] {
    overflow: auto;
  }

  body[data-route="/zukan"] .app {
    height: auto;
    min-height: 100svh;
  }

  body[data-route="/zukan"] .view {
    display: block;
    overflow: visible;
  }

  .page--zukan {
    height: auto;
    padding-bottom: 40px;
  }

  .zukan {
    grid-template-columns: 1fr;
    height: auto;
  }

  .pal-list {
    max-height: 46vh;
  }

  .zukan__main {
    overflow: visible;
  }

  /* 積んだ状態でもフィルターは画面上部に貼り付ける */
  .pal-filter {
    position: sticky;
    top: var(--header-height);
    z-index: 10;
  }
}

/* マップ：狭い幅ではマップを上、一覧を下に積む。マップは高さを固定して確保する */
@media (max-width: 899px) {
  body[data-route="/map"] {
    overflow: auto;
  }

  body[data-route="/map"] .app {
    height: auto;
    min-height: 100svh;
  }

  body[data-route="/map"] .view {
    display: block;
    overflow: visible;
  }

  .page--map {
    height: auto;
    padding-bottom: 40px;
  }

  .palmap {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  /* 一覧より先にマップを見せる */
  .palmap__stage {
    order: -1;
    height: 62vh;
    min-height: 360px;
  }

  .palmap-list,
  .palmap-poi {
    max-height: 44vh;
  }
}

/* 中央のナビと左のロゴが接近する幅では、両方を少し縮める */
@media (min-width: 768px) and (max-width: 899px) {
  .site-header__logo img {
    height: 16px;
  }

  .global-nav__link {
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .nav-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    /* ヘッダーが中央揃えのため、トグルは右端へ絶対配置する */
    position: absolute;
    top: 50%;
    right: clamp(16px, 4vw, 40px);
    transform: translateY(-50%);
    z-index: 2;
    padding: 4px 0;
    background: none;
    border: 0;
    color: var(--color-text);
    font-family: inherit;
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.16em;
    cursor: pointer;
  }

  .nav-toggle__bar,
  .nav-toggle__bar::before {
    display: block;
    width: 20px;
    height: 1px;
    background-color: currentColor;
    transition: transform 0.2s ease;
  }

  .nav-toggle__bar::before {
    content: "";
    transform: translateY(6px);
  }

  body.is-nav-open .nav-toggle__bar {
    transform: rotate(45deg);
  }

  body.is-nav-open .nav-toggle__bar::before {
    transform: rotate(-90deg);
  }

  .global-nav {
    position: fixed;
    inset: 0;
    /* 全画面メニューでは下寄せの微調整は不要 */
    padding-bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.82);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  body.is-nav-open .global-nav {
    opacity: 1;
    visibility: visible;
  }

  .global-nav__list {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .global-nav__link {
    /* 全画面メニュー側は詰めず、タップしやすい大きさに戻す */
    padding: 4px 0;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .view {
    opacity: 1;
    transform: none;
    transition: none;
  }

  * {
    transition-duration: 0.01ms !important;
  }

  /* 繰り返しの動きは止め、マーカーは出したままにする */
  .pal-row__button:hover::before,
  .pal-row__button:hover::after,
  .pal-row__button:hover .pal-row__corners::before,
  .pal-row__button:hover .pal-row__corners::after {
    animation: none;
    opacity: 1;
    transform: translate(0, 0);
  }
}