/* 詳細ページ・名詞字典の再設計(2026-10、experiments/detail-page-mock から移植)。
   方針: データベースとして「数値が主役」。見出しと枠は控えめ、強調色は数値だけ。
   広い画面では幅を使い切る(本体の最大幅 1536px を外し、列を増やして使う)。 */

/* ---------- 幅 ---------- */
/* 全ページ: 本体の最大幅 1536px を 2560px に(地図ページは元から全幅)。スマホ側の余白指定には触れない */
@media (min-width: 981px) {
  .ux-prototype .main { max-width: 2560px; padding-inline: clamp(24px, 2.6vw, 64px); }
}

/* ---------- 骨組み: 左=何者か+基本データ、右=本文 ---------- */
.dm-detail { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 2200px) { .dm-detail { grid-template-columns: 380px minmax(0, 1fr); gap: 36px; } }

.dm-side, .dm-main {
  min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.dm-side { display: flex; flex-direction: column; gap: 20px; padding: 22px; }
@media (min-width: 981px) and (min-height: 1040px) {
  .dm-side { position: sticky; top: calc(var(--ux-header) + 16px); }
}
.dm-main { padding: 8px 28px 32px; container-type: inline-size; }

/* 何者か */
.dm-identity { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; }
.dm-detail .dm-media {
  width: 104px !important; height: 120px !important; min-height: 0 !important; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel-2); overflow: hidden; contain: initial; clip-path: none;
}
.dm-detail .dm-media img { width: 100%; height: 100%; padding: 0; object-fit: cover; transform: none !important; }
.dm-fork .dm-media img { object-fit: contain; }
.dm-identity__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dm-identity .character-card__meta { margin: 0; }
.dm-name { margin: 0; font-family: var(--font-main); font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; overflow-wrap: anywhere; }
.dm-fork .dm-name { font-size: 24px; }
.dm-identity .character-detail__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dm-flavor { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

/* 基本データ */
.dm-facts { display: grid; margin: 0; border-top: 1px solid var(--line); }
.dm-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.dm-facts dt { color: var(--muted); }
.dm-facts dd { margin: 0; text-align: right; font-weight: 700; }

/* 見出しは小さく控えめに(主役は数値) */
.dm-label, .dm-detail .character-detail__section > h3, .dm-detail .fork-stats-section > h3 {
  margin: 0 0 10px; color: var(--muted) !important; font-size: 12px !important; font-weight: 700; letter-spacing: .06em;
}
.dm-num { color: var(--cyan); font-weight: 700; font-variant-numeric: tabular-nums; }
.dm-note { margin: 8px 0 0; color: #7f90a3; font-size: 11.5px; line-height: 1.7; }

/* 左列のステータス */
.dm-side__stats .character-stat-slider { grid-template-columns: 24px minmax(0, 1fr); max-width: none; }
.dm-side__stats .character-stat-slider__display { grid-column: 1 / -1; flex-wrap: wrap; }
.dm-side .character-stats-table { width: 100%; }
.dm-side .character-stats-table th { color: var(--muted); font-weight: 500; font-size: 13px; }
.dm-side .character-stats-table td { color: var(--text); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.dm-side .fork-stats-section { margin: 0; }

/* ---------- タブ: 目的別の4グループ ----------
   1段目=等幅のセグメント(選択中は塗り+ピンク下線) / 2段目=下線タブ(先頭に「資料 ›」) / 3段目=ピル */
.dm-detail .dm-tabs {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  margin: 16px 0 0 !important; padding: 6px !important; overflow: visible !important;
  background: var(--bg-2) !important; border: 1px solid var(--line) !important; border-radius: 12px;
}
.dm-detail .dm-tab {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
  min-height: 64px !important; margin: 0 !important; padding: 10px 16px !important; border: 1px solid transparent !important;
  border-radius: 9px !important; color: var(--muted); background: transparent !important; font-size: 16px !important; font-weight: 700; text-align: left; cursor: pointer;
}
.dm-detail .dm-tab small { color: #6f8196; font-size: 11px; font-weight: 500; line-height: 1.4; }
.dm-detail .dm-tab:not(.is-active):not(:disabled):hover { color: var(--text); background: #ffffff0b !important; }
.dm-detail .dm-tab.is-active {
  color: var(--text) !important; background: var(--panel-2) !important; border-color: #f45e9c55 !important;
  box-shadow: inset 0 -3px 0 var(--pink), 0 6px 18px #00000059 !important;
}
.dm-detail .dm-tab.is-active small { color: var(--muted); }

.dm-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.dm-subtab {
  min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--muted); font-size: 13px; cursor: pointer;
}
.dm-subtab.is-active { color: var(--text); border-color: var(--cyan); background: var(--ux-selected); }

.dm-subtabs--level2 {
  flex-wrap: nowrap; align-items: stretch; gap: 0; margin: 14px 0 22px; padding: 0 4px; overflow-x: auto;
  border-bottom: 1px solid var(--line-strong);
}
.dm-subtabs--level2::before {
  content: attr(aria-label) " ›"; display: flex; align-items: center; padding: 0 14px 0 6px; color: #6f8196; font-size: 12px; white-space: nowrap;
}
.dm-subtabs--level2 .dm-subtab {
  flex: none; min-height: 46px; padding: 10px 18px; border: 0; border-radius: 0; background: transparent; font-size: 14px; font-weight: 700;
}
.dm-subtabs--level2 .dm-subtab:hover { color: var(--text); background: #ffffff08; }
.dm-subtabs--level2 .dm-subtab.is-active { color: var(--text); background: transparent; box-shadow: inset 0 -3px 0 var(--cyan); }
.dm-subpanel { min-width: 0; }
.dm-panel { padding-top: 22px; }
.dm-panel[data-dm-group="profile"], .dm-panel[data-dm-group="gallery"] { padding-top: 0; }

/* ---------- 性能(スキル+覚醒を並べる) ---------- */
.dm-combat { display: grid; gap: 32px; }
@container (min-width: 1080px) { .dm-combat { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
@container (min-width: 1750px) {
  .dm-combat__col:first-child .character-skill-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
}
/* 育成: 広い画面では2列(スキル素材|突破 / 覚醒素材|ゲーム内ガイド) */
@container (min-width: 1300px) {
  .dm-panel[data-dm-group="growth"] .character-growth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; align-items: start; }
}
.dm-col-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; margin-bottom: 4px; }
.dm-col-head .dm-label { margin: 0; font-size: 14px !important; color: var(--text) !important; }
.dm-expand-all { min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--cyan); font-size: 12px; cursor: pointer; }
.dm-combat .character-skill-bridge { display: none; }
.dm-combat .character-detail__section { margin: 0 0 18px; padding: 0; border: 0; }
.dm-combat .character-skill-list, .dm-combat .character-awakening-list { gap: 8px; }
.dm-detail .character-skill__head { min-height: 0 !important; padding: 12px 14px !important; background: var(--panel-2) !important; border-color: transparent !important; }
.dm-detail .character-skill[open] .character-skill__head { border-radius: 9px 9px 0 0; }
.dm-detail .character-skill__title { font-size: 16px; }
.dm-detail .character-skill__summary-text { color: #c9d4e2; font-size: 13px; }
.dm-moves { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; color: var(--muted); font-size: 12px; }
.dm-moves span::before { content: "›"; margin-right: 4px; color: var(--cyan); }
.dm-detail .character-skill__body { padding: 14px; background: #ffffff05; border-radius: 0 0 9px 9px; }
.dm-detail .character-awakening { padding: 14px; border: 0; border-radius: 9px; background: var(--panel-2); }
.dm-detail .character-awakening .character-skill__head { padding: 0 !important; background: transparent !important; align-items: center; }
.dm-detail .character-awakening h3 { color: var(--text) !important; font-size: 15px !important; letter-spacing: 0; }
.dm-detail .character-awakening p { margin: 8px 0 0; font-size: 13px; line-height: 1.75; color: #c9d4e2; }

/* ---------- 資料 ---------- */
.dm-profile-facts { display: grid; gap: 20px 48px; margin: 18px 0 22px; font-size: 13px; }
@container (min-width: 820px) { .dm-profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.dm-profile-facts .dm-label { margin-bottom: 4px; }
.dm-profile-facts .dm-facts > div { font-size: 14px; }

/* ---------- 育成(ゲーム内ガイドの出典表示) ---------- */
.dm-guide-item { display: inline-flex; flex-direction: column; gap: 4px; }
.dm-guide-item small { color: #7f90a3; font-size: 11px; padding-left: 4px; }

/* ---------- 弧盤 ---------- */
.dm-fork-main { display: grid; gap: 32px; padding-top: 24px; }
@container (min-width: 1000px) { .dm-fork-main { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.dm-fork-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.dm-section { margin: 0; }
.dm-feature { padding: 22px 24px; border-radius: 10px; background: var(--panel-2); border: 1px solid #6adfd433; }
.dm-effect-text, .ux-prototype .dm-fork .fork-effect-card [data-fork-mixing-description] { margin: 0; font-size: 18px; line-height: 1.9; } /* 効果文はページの主役なので大きく(共通のスライダー表示でも) */
.dm-fork [data-fork-mixing-description] .fork-effect-value { font-size: 1.05em; }
.dm-effect-text .dm-num { font-size: 1.05em; }
.dm-table-wrap { margin-top: 16px; overflow-x: auto; }
.dm-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 13px; }
.dm-table th, .dm-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dm-table thead th { color: var(--muted); font-weight: 500; font-size: 12px; text-align: center; }
.dm-table tbody th { color: var(--muted); font-weight: 500; text-align: left; }
.dm-table td { text-align: center; }
.dm-stage-table__cost td { vertical-align: top; }
.dm-cost-cell { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; font-size: 12px; }
.dm-cost-cell img { width: 22px; height: 22px; object-fit: contain; }
.dm-cost-cell b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dm-fork .fork-effect-card { background: transparent; border: 0; padding: 0; }

.dm-char-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dm-char-links a {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 14px 6px 6px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel-2);
}
.dm-char-links a:hover { border-color: var(--cyan); }
.dm-char-links img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.dm-char-links span { display: flex; flex-direction: column; gap: 2px; }
.dm-char-links strong { font-size: 14px; }
.dm-char-links small { color: var(--muted); font-size: 11px; }

.dm-cost .ux-fork-growth { margin: 0; padding: 0; border: 0; }
.dm-disclosure { border-top: 1px solid var(--line); }
.dm-disclosure > summary { min-height: 44px; padding: 12px 0; color: var(--cyan); font-size: 13px; cursor: pointer; }
.dm-disclosure .ux-fork-breakthroughs > h3 { display: none; }

/* ---------- 狭い画面 ---------- */
@media (max-width: 1199px) {
  .dm-detail { grid-template-columns: 300px minmax(0, 1fr); gap: 20px; }
  .dm-main { padding-inline: 20px; }
}
@media (max-width: 980px) {
  .dm-detail { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dm-side { padding: 18px; }
  .dm-main { padding: 0 16px 24px; }
  .dm-detail .dm-tabs { position: sticky; top: var(--mobile-header-height); z-index: 5; margin-top: 12px !important; gap: 4px; padding: 4px !important; }
  .dm-detail .dm-tab { padding: 8px 12px !important; min-height: 52px !important; font-size: 14px !important; }
  .dm-effect-text, .ux-prototype .dm-fork .fork-effect-card [data-fork-mixing-description] { font-size: 16px; }
}
@media (max-width: 620px) {
  .dm-detail .dm-tab small { display: none; }
  .dm-detail .dm-tab { min-height: 44px !important; align-items: center; padding: 6px 4px !important; }
  .dm-subtabs--level2::before { display: none; }
  .dm-subtabs--level2 .dm-subtab { padding: 10px 14px; }
  .dm-identity { grid-template-columns: 84px minmax(0, 1fr); }
  .dm-detail .dm-media { width: 84px !important; height: 100px !important; }
  .dm-name { font-size: 26px; }
  .dm-feature { padding: 16px; }
}
@media (max-width: 620px) {
  .dm-table th, .dm-table td { padding: 8px 4px; }
  .dm-cost-cell { flex-direction: column; gap: 2px; margin: 0; }
}
/* スキル倍率表も数値を主役に */
.dm-detail .character-skill__body td { color: var(--cyan); font-weight: 700; font-variant-numeric: tabular-nums; }
.dm-detail .character-skill__body table { min-width: 0; }

/* ---------- 資料: ボイス(カテゴリ切替+検索+グリッド) ---------- */
.dm-voice-finder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 12px 0 10px; }
.dm-voice-finder .dm-subtabs { margin: 0; }
.dm-voice-finder .dm-subtab small { margin-left: 4px; color: #7f90a3; font-size: 11px; }
.dm-voice-search {
  width: min(320px, 100%); min-height: 38px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--ux-soft); color: var(--text); font-size: 13px;
}
.dm-voice-search:focus { outline: 0; border-color: var(--cyan); }
.dm-detail .character-material-voice-subsection__summary { display: none; }
.dm-detail [data-character-voice-section].is-searching .character-material-voice-subsection__summary { display: flex; margin-top: 10px; pointer-events: none; }
.dm-detail .character-material-voice-subsection[hidden] { display: none; }
.dm-detail .character-material-voice-list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.dm-detail .character-material-voice-item[hidden] { display: none; }
.dm-detail .character-material-voice-row { min-height: 42px; border-color: transparent; background: var(--panel-2); }
/* セリフは押したボタンの「行」の直下に横幅いっぱいで開く(ボタン自体は動かない) */
.dm-detail .dm-voice-reader {
  position: relative; grid-column: 1 / -1; margin: 4px 0 6px; padding: 14px 18px;
  border: 1px solid #f45e9c80; border-radius: 10px; background: #1d2733; font-size: 14px; line-height: 1.85;
}
.dm-detail .dm-voice-reader[hidden] { display: none; }
.dm-detail .dm-voice-reader::before {
  content: ""; position: absolute; top: -7px; left: var(--dm-arrow-x, 40px); width: 12px; height: 12px;
  background: #1d2733; border-left: 1px solid #f45e9c80; border-top: 1px solid #f45e9c80; transform: rotate(45deg);
}

/* ---------- 資料: プロフィール文と人物資料 ---------- */
.dm-intro-card { padding: 16px 18px; border-radius: 10px; background: var(--panel-2); }
.dm-intro-card > strong { display: block; margin-bottom: 6px; font-size: 15px; }
.dm-intro-card p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.85; color: #d2d9e3; }
@container (min-width: 1300px) {
  .dm-detail .character-material-list--accordion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; align-items: start; }
}

/* ---------- 好感度: 必要値の横表 ---------- */
.dm-like-levels { margin: 12px 0 16px; }
.dm-like-levels td { font-size: 13px; }
.dm-like-levels--v { display: none; }
@media (max-width: 620px) {
  .dm-like-levels:not(.dm-like-levels--v) { display: none; }
  .dm-like-levels--v { display: block; }
  .dm-like-levels--v td, .dm-like-levels--v thead th { text-align: right; }
  .dm-like-levels--v tbody th, .dm-like-levels--v thead th:first-child { text-align: left; }
}
.dm-detail .dm-voice-reader > :first-child, .dm-detail .dm-voice-reader p:first-child { margin-top: 0; }
.dm-detail .dm-voice-reader > :last-child, .dm-detail .dm-voice-reader p:last-child { margin-bottom: 0; }
/* ボイスタブ内の「ボイス」見出しはタブ名と重複するので出さない(言語・音量の操作だけ右寄せで残す) */
.dm-subpanel .character-material-voice__header { justify-content: flex-end; }
.dm-subpanel .character-material-voice__header h3 { display: none; }
.dm-subpanel > .character-detail__section:first-child, .dm-subpanel > .character-material-voice { border-top: 0; padding-top: 0; margin-top: 0; }

/* ---------- 資料外ボイス(同乗/デート/自宅 …): 「▶ | 条件 | 台詞 | 長さ」の一覧 ---------- */
.dm-xv-group { margin: 0 0 18px; }
.dm-xv-group[hidden] { display: none; }
.dm-xv-group__title { margin: 6px 0 8px; color: var(--text); font-size: 14px; }
.dm-xv-group__title small { margin-left: 4px; color: #7f90a3; font-size: 11px; font-weight: 500; }
.dm-xv-list { display: grid; gap: 4px; }
/* 1行が横に間延びしないよう、広い画面では列を増やして詰める */
.dm-xv-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: 8px; }
.dm-xv-list--grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; }
.dm-xv-row {
  display: grid; grid-template-columns: 36px minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 12px 4px 4px; border-radius: 8px; background: var(--panel-2);
}
.dm-xv-row[hidden] { display: none; }
.dm-xv-play {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.dm-xv-play .character-material-voice-row__play { margin: 0; }
.dm-xv-play.is-playing { box-shadow: 0 0 0 2px var(--pink); }
.dm-xv-row:has(.is-playing) { background: linear-gradient(90deg, #f45e9c24, #6adfd414); }
.dm-xv-when { padding: 2px 8px; border-radius: 6px; background: #ffffff0d; color: #b8c4d2; font-size: 11.5px; white-space: nowrap; }
.dm-xv-text { min-width: 0; font-size: 13.5px; line-height: 1.6; }
.dm-xv-dur { color: #7f90a3; font-size: 11px; font-variant-numeric: tabular-nums; }
.dm-xv-list--grid .dm-xv-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
@media (max-width: 620px) {
  .dm-xv-row { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 2px; padding-block: 6px; }
  .dm-xv-row .dm-xv-when { grid-column: 2; justify-self: start; }
  .dm-xv-row .dm-xv-text { grid-column: 2 / 4; grid-row: 2; }
  .dm-xv-row .dm-xv-dur { grid-column: 3; grid-row: 1; }
}
.dm-xv-seq {
  margin-left: 10px; min-height: 28px; padding: 2px 10px; border: 1px solid #6adfd466; border-radius: 999px;
  background: transparent; color: var(--cyan); font-size: 11.5px; font-weight: 700; cursor: pointer; vertical-align: middle;
}
.dm-xv-seq:hover { background: var(--ux-selected); }
.dm-xv-seq.is-running { border-color: var(--pink); color: var(--pink); }
/* 条件が無い行でも 台詞・長さ の列位置をそろえる */
.dm-xv-row > .dm-xv-play { grid-column: 1; }
.dm-xv-row > .dm-xv-when { grid-column: 2; }
.dm-xv-row > .dm-xv-text { grid-column: 3; }
.dm-xv-row > .dm-xv-dur { grid-column: 4; }
.dm-xv-list--grid .dm-xv-row > .dm-xv-dur { grid-column: 3; }
@media (max-width: 620px) {
  .dm-xv-row > .dm-xv-text { grid-column: 2 / 4; }
  .dm-xv-row > .dm-xv-dur { grid-column: 3; }
}
.dm-xv-row:has(.dm-xv-play[data-dm-seq-media].is-playing) { background: linear-gradient(90deg, #f45e9c24, #6adfd414); }
.dm-xv-play[data-dm-seq-media].is-playing { box-shadow: 0 0 0 2px var(--pink); }

/* ---------- 一覧ページ: 広げた幅を列で使う(項目自体は伸ばさない) ---------- */
@media (min-width: 2200px) {
  .home-route-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(440px, calc((100% - 48px) / 3))), 1fr)); } /* HOMEの入り口は最大3列 */
}
/* 名詞字典: 左のフィルター欄(検索・分類・目次を1つの欄にまとめ、分類と目次はその中でスクロール)+ 本文 */
.dm-gloss { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.dm-gloss__body { min-width: 0; }
.dm-gloss .glossary-entry { max-width: none; }
.dm-gloss .glossary-entry p { max-width: 72em; } /* 目次が左の欄に入って本文が広くなったので、カードは広げて文章の行だけ長くなりすぎないように */
.dm-gloss-index { display: grid; gap: 6px; }
.dm-gloss-index ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dm-gloss-index a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; color: #c9d4e2; font-size: 13px; line-height: 1.5; text-decoration: none; }
.dm-gloss-index__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-gloss-index a small { color: #6f8196; font-size: 11px; font-variant-numeric: tabular-nums; }
.dm-gloss-index a:hover { background: #ffffff0b; color: var(--text); }
.dm-gloss-index a.is-current { background: var(--ux-selected); color: var(--cyan); box-shadow: inset 2px 0 0 var(--cyan); }
.dm-gloss-index a.is-current small { color: inherit; }
/* 本文の分類見出し */
.dm-gloss-group { display: flex; align-items: baseline; gap: 8px; margin: 26px 0 10px; padding: 0 0 8px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 18px; }
.dm-gloss-group:first-child { margin-top: 0; }
.dm-gloss-group small { color: var(--muted); font-size: 12px; font-weight: 500; }
/* 999装備: 広い画面では装備カードを横に並べる */
.night999-equipment-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 720px), 1fr)); gap: 12px; align-items: start; }
/* 異象: 2列固定 → 幅に応じて増やす */
@media (min-width: 1200px) {
  .ux-prototype .character-grid.anomaly-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); }
}

/* ---------- 名詞字典: タブ(名詞/スキル用語/チュートリアル) ---------- */
/* タブはページ名の帯の下に貼りつく(スクロールしても切り替えられる)。位置は JS が --dm-sticky-top に入れる */
.dm-gloss-tabs { grid-column: 1 / -1; margin: 0 0 4px; padding: 8px 0; position: sticky; top: var(--dm-sticky-top, 132px); z-index: 5; background: var(--bg); box-shadow: 0 8px 12px -10px #000c; }
.dm-rt.dm-rt-red { color: #ff7a8a; } .dm-rt.dm-rt-yellow, .dm-rt.dm-rt-orange { color: var(--yellow); } .dm-rt.dm-rt-blue { color: #7fc8ff; }
.dm-rt.dm-rt-green, .dm-rt.dm-rt-numgreen { color: #8fe3a1; } .dm-rt.dm-rt-grey { color: var(--muted); }
.dm-rt.dm-rt-purple { color: #b9a6ff; } .dm-rt.dm-rt-hlt { color: var(--text); font-weight: 800; }
/* 異能の系統名(〇異能ダメージ): 系統アイコンの色 */
.dm-rt.dm-rt-el-guang { color: #e3efe8; } .dm-rt.dm-rt-el-ling { color: #5be4c3; } .dm-rt.dm-rt-el-zhou { color: #fb6a84; }
.dm-rt.dm-rt-el-xiang { color: #f8e962; } .dm-rt.dm-rt-el-hun { color: #55bcec; } .dm-rt.dm-rt-el-an { color: #a5a1ff; }
/* スキル用語: キャラへのボタン */
.dm-term-chars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dm-term-char {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px 6px 6px;
  border: 1px solid #6adfd440; border-radius: 10px; background: var(--ux-selected);
}
.dm-term-char:hover { border-color: var(--cyan); }
.dm-term-char img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.dm-term-char span { display: flex; flex-direction: column; gap: 1px; }
.dm-term-char strong { color: var(--cyan); font-size: 13px; }
.dm-term-char small { color: var(--muted); font-size: 11px; }
.dm-term-char b { color: var(--cyan); font-size: 18px; margin-left: 2px; }
/* チュートリアル: 1ページずつ表示(画像+説明) */
/* 全ページを同じ場所に重ね、高さは一番長いページに合わせる(ページ送りで高さ・ボタン位置が変わらない) */
.dm-tut-pages { display: grid; margin: 14px 0 0; }
.dm-tut-page { grid-area: 1 / 1; visibility: hidden; margin: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dm-tut-page.is-current { visibility: visible; }
.dm-tut-page img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); background: #000; }
.dm-tut-page h3 { margin: 0 0 8px; font-size: 16px; }
.dm-tut-page p { margin: 0; color: #d2d9e3; font-size: 14px; line-height: 1.9; }
.dm-tut-page:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.dm-tut-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.dm-tut-nav button {
  width: 40px; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2);
  color: var(--text); font-size: 18px; cursor: pointer;
}
.dm-tut-nav button:hover { border-color: var(--cyan); color: var(--cyan); }
.dm-tut-nav span { min-width: 56px; text-align: center; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .dm-tut-page { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 相互リンク(色付き文字・「」の語 → 名詞字典の項目 / キャラのスキル) ---------- */
/* キャラページのスキル用語(押すと Tips)と同じ見た目: シアン・太字・点線。赤字の語もリンクならシアンにそろえる */
.dm-xlink, .dm-xlink.dm-rt { color: var(--cyan); font-weight: 800; text-decoration: none; border-bottom: 1px dotted currentColor; cursor: pointer; }
.dm-xlink:hover, .dm-xlink:focus-visible { color: var(--pink); outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 2px; }
.dm-flash { animation: dm-flash 1.6s ease-out; }
@keyframes dm-flash { 0%, 30% { box-shadow: 0 0 0 2px var(--cyan), 0 0 24px #6adfd455; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* 名詞字典のタブは3つだけなので、狭い画面でも横スクロールさせずに均等に並べる */
@media (max-width: 620px) { .dm-gloss-tabs .item-tab { flex: 1 1 0; width: auto; min-width: 0; padding: 0 10px; } }

/* 弧盤: ミキシングの素材(全段階 甲虫コイン100)は出さない。共通のスライダー表示が出す欄を隠す */
.dm-fork [data-fork-mixing-costs] { display: none; }