.competition-chips{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0}.competition-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #ffffff18}.competition-note{font-size:12px;text-align:center}.competition-absorb{grid-column:2/-1;font-size:11px;color:#a9dcd4}

.competition-section{margin-top:14px}.competition-section summary{cursor:pointer}.competition-effect{font-size:12px;line-height:1.7}.competition-section .confirm-actions{flex-wrap:wrap}

.absorb-filter-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:7px}
.absorb-filter-row>span:first-child{font-size:11px;min-width:66px;opacity:.75}

.pet-stats-detail>summary{font-size:13px}
.pet-sec--sub{font-size:12px;opacity:.85}
/* 残す技能を選ぶ: 効果を各行の下に出して、選ぶ前に何をするのか分かるようにする (2026-09-23 専務) */
.competition-choice{border-bottom:1px solid #ffffff18}
.competition-choice .competition-row{border-bottom:0;padding:10px 0 4px}
.competition-choice .competition-effect{margin:0 0 10px;color:#c9d6d8;text-align:left}
.competition-name{font-size:14px;overflow-wrap:anywhere}
.competition-pick{display:flex;gap:6px;flex-shrink:0}
.competition-pick .btn.active{background:#69501e;border-color:var(--gold-bright,#f2cd72);color:#fff4dd}
.competition-group{margin-bottom:14px}
.competition-group__head{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--gold,#d4a94e)}
.competition-group__head strong{font-size:14px;letter-spacing:.08em}
.competition-group__count{margin-left:auto;font-size:11px;color:#b7d4d6}
/* エウダン UI - ダークダンジョン + ゴールド (メグランのブラウン/ベージュの血縁) */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --bg-deep: #120e0a;
  --bg: #1a140e;
  --panel: #241c13;
  --panel-edge: #3d2f1e;
  --panel-inner: #2d2318;
  --text: #ece0c8;
  --text-dim: #a8987c;
  --gold: #d4a94e;
  --gold-bright: #f2cd72;
  --danger: #e05d4b;
  --hp-green: #7ec96a;
  --hp-red: #d9534f;
  --xp-blue: #6aa7d9;

  --rarity-common: #a09884;
  --rarity-uncommon: #74c463;
  --rarity-rare: #55a8ff;
  --rarity-epic: #bb6bff;
  --rarity-legend: #ffab2e;

  --font-title: 'Shippori Mincho B1', serif;
  --font-body: 'M PLUS 1p', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: var(--bg-deep);
}

html.battle-no-pull,
html.battle-no-pull body {
  overscroll-behavior-y: none;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  /* 背景は html (--bg-deep) + .bg-texture のテクスチャ + body::after の暗幕。body 自身は透明にしないとテクスチャが隠れる */
  background: transparent;
  min-height: 100vh;
}

.app {
  max-width: 768px;
  margin: 0 auto;
  /* 上はステータスバーぶん (ホーム画面アプリ) を空ける。下部メインメニュー+ダンジョンバー分の余白 */
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 140px;
}


/* ---- キャラパネル (左に全身アバター) ---- */

.char-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'avatar info buddy'
    'avatar job buddy';
  align-items: stretch;
  column-gap: 14px;
  row-gap: 6px;
  margin-bottom: 12px;
}

.char-layout > .char-avatar-frame:first-child {
  grid-area: avatar;
}

.char-layout > .char-info {
  grid-area: info;
}

.char-layout > .char-job {
  grid-area: job;
  align-self: end;
}

.char-layout > .buddy-frame {
  grid-area: buddy;
}

.char-avatar-frame {
  flex-shrink: 0;
  width: 112px;
  min-height: 128px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 30% at 50% 96%, rgba(0, 0, 0, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 8px 4px 6px;
}

.char-avatar-full {
  height: 112px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.char-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

/* Lv表示 (名前の下。ジョブ名とは離してレベルの主体を明確に) */
.char-level {
  font-size: 16px;
  font-weight: 800;
  color: var(--gold-bright);
}

.char-info .xp-block {
  min-width: 0;
}

/* ジョブは一番下 (ジョブ変更ボタン込み) */
.char-layout .char-job {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.char-info .xp-label {
  text-align: left;
}

/* ---- パネル ---- */

.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-inner));
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.45);
  padding: 14px;
  margin-bottom: 14px;
}

.panel-title {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.panel-title-row .panel-title {
  margin-bottom: 0;
}

.panel-title::before {
  content: '◆';
  font-size: 9px;
  color: var(--gold);
}

/* ---- キャラクター ---- */

.char-name {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 800;
}

.char-job {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.prestige {
  color: var(--gold-bright);
}

.xp-block {
  min-width: 140px;
}

.xp-label {
  font-size: 10px;
  color: var(--text-dim);
  text-align: right;
  margin-bottom: 3px;
}

.bar {
  height: 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.35s ease;
}

.xp-bar .bar-fill {
  background: linear-gradient(90deg, #4b7fa8, var(--xp-blue));
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.stat-cell {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 7px 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.stat-label {
  font-size: 11px;
  color: var(--text-dim);
}

.stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.substat-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px;
  color: var(--gold-bright);
}

/* ---- 装備スロット ---- */

.equip-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.equip-slot {
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px;
  min-height: 96px;
  /* グリッドセルは中身の名前の長さに関係なくウインドウ幅優先で縮む */
  min-width: 0;
  /* 横並び時は行の縦幅に合わせ、内側のカードを引き伸ばす (ボタンは最下端に揃う) */
  display: flex;
  flex-direction: column;
}

.equip-slot .item-card {
  flex: 1;
}

.equip-slot.blocked {
  opacity: 0.55;
}

.equip-slot-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.equip-empty {
  color: var(--text-dim);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 0;
}

/* 真円ルール: width == height */
.btn-plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #3a2e1d, #2b2114);
  color: var(--gold-bright);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.12s ease;
}

.btn-plus:hover {
  filter: brightness(1.25);
}

/* ---- 装備候補フロート (body直下ポータル + fixed + z-index 13000番台) ---- */

.picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12999;
  background: transparent;
}

.equip-picker {
  position: fixed;
  z-index: 13000;
  /* 装備名やステータスが読めるよう幅を拡張 (2026-09-18 専務) */
  width: min(380px, calc(100vw - 16px));
  max-height: 320px;
  overflow-y: auto;
  background: linear-gradient(180deg, #2b2115, #241c13);
  border: 1px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.picker-empty {
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  padding: 14px 0;
}

.picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--rarity-common);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-body);
  transition: filter 0.1s ease;
}

.picker-row:hover {
  filter: brightness(1.2);
}

.picker-select {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.picker-detail {
  flex: 0 0 40px;
  height: 40px;
  font-size: 11px;
}

.picker-row.rarity-uncommon {
  border-color: var(--rarity-uncommon);
}

.picker-row.rarity-rare {
  border-color: var(--rarity-rare);
}

.picker-row.rarity-epic {
  border-color: var(--rarity-epic);
}

.picker-row.rarity-legend {
  border-color: var(--rarity-legend);
}

.picker-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  flex-shrink: 0;
}

.picker-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.picker-name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-dim);
  flex-wrap: wrap;
}

.picker-stats {
  color: var(--text);
}

.picker-affixes {
  font-size: 10px;
  color: var(--gold-bright);
}

/* ---- アイテムカード ---- */

.item-card {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
  border: 1px solid var(--rarity-common);
  border-radius: 8px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  /* 持ち物グリッド等の直下に置かれても列幅からはみ出さない */
  min-width: 0;
}

.item-card.rarity-uncommon {
  border-color: var(--rarity-uncommon);
  box-shadow: 0 0 10px rgba(116, 196, 99, 0.12);
}

.item-card.rarity-rare {
  border-color: var(--rarity-rare);
  box-shadow: 0 0 12px rgba(85, 168, 255, 0.18);
}

.item-card.rarity-epic {
  border-color: var(--rarity-epic);
  box-shadow: 0 0 14px rgba(187, 107, 255, 0.22);
}

.item-card.rarity-legend {
  border-color: var(--rarity-legend);
  box-shadow: 0 0 16px rgba(255, 171, 46, 0.28);
}

.item-card-head {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

/* アイコンは枠なし・大きめ */
.item-card {
  position: relative;
}

/* 装備中の「E」: アイコンの左上、カードの外枠に少し掛かる */
.equipped-mark {
  position: absolute;
  top: -7px;
  left: -7px;
  z-index: 2;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--gold);
  color: #1b1408;
  font-weight: 900;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.item-icon {
  width: 60px;
  height: 60px;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.item-card.compact .item-icon {
  width: 50px;
  height: 50px;
}

/* アイコンの右にバッジ類を縦積み */
.item-chips-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  justify-content: center;
}

/* 名前と品質はアイコンの下の行 */
.item-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.item-name-row .item-quality {
  flex-shrink: 0;
}

.item-name {
  font-size: 13px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
}

.item-sub {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 3px;
  flex-wrap: wrap;
}

/* チップ類は高さ統一・折返し禁止 (UI原則: 横並び時に高さを揃える) */
.rarity-badge,
.grade-chip,
.item-slot-type {
  display: inline-flex;
  align-items: center;
  height: 18px;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.rarity-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 4px;
  color: #14100a;
  background: var(--rarity-common);
}

.rarity-badge.rarity-uncommon {
  background: var(--rarity-uncommon);
}

.rarity-badge.rarity-rare {
  background: var(--rarity-rare);
}

.rarity-badge.rarity-epic {
  background: var(--rarity-epic);
}

.rarity-badge.rarity-legend {
  background: var(--rarity-legend);
}

/* 装備部位はタブ風チップで視認性を上げる */
.item-slot-type {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom-width: 2px;
  border-radius: 4px 4px 2px 2px;
  padding: 0 6px;
  letter-spacing: 0.08em;
}

.item-quality {
  font-size: 10px;
  color: var(--text-dim);
}

/* グレード (出土ダンジョンの深さ=インフレ指標) */
.grade-chip {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold-bright);
  background: rgba(212, 169, 78, 0.14);
  border: 1px solid rgba(212, 169, 78, 0.5);
  border-radius: 4px;
  padding: 0 5px;
}

.codex-detail-unique {
  font-size: 12px;
  color: var(--text);
}

/* ---- マーキーテキスト (収まらない1行テキストを流して見せる) ---- */

.marquee {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
  /* 長い名前の「最小コンテンツ幅」が親グリッド/カードへ伝播して
     ウインドウ幅を突き破るのを根元で遮断 (幅は常にレイアウト側が決める) */
  contain: inline-size;
}

.marquee-inner {
  display: inline-block;
  white-space: nowrap;
}

/* ---- 固有スキルバッジ ---- */

/* スキルチップ (部位チップと同じ行・同じ高さ。クリックで説明モーダル) */
.skill-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold-bright);
  background: rgba(212, 169, 78, 0.16);
  border: 1px solid var(--gold);
  border-bottom-width: 2px;
  border-radius: 4px 4px 2px 2px;
  padding: 0 6px;
  cursor: pointer;
  transition: filter 0.1s ease;
}

.skill-chip:hover {
  filter: brightness(1.3);
}

.skill-modal-owner {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

/* 品質の段階色: 115+=黄 / 165+=橙 / 215+=紅 (50刻み。上限250=ハード品質帯) */
/* 品質の段階は色だけで表現 (ボールド・グローは小サイズで滲むため使わない) */
/* 品質の段階色: 115%から50刻み。
   途中まではレアリティの色と揃える (グレー→緑→青→紫→ゴールド)。
   そこから先はレアリティに無い色で伸ばす (紅→桃→白)。
   太字・グローは小さい文字で滲むので使わない。色だけで段を表す */
.item-quality.q-low {
  color: var(--rarity-common);
} /* 〜114% グレー (コモンと同じ) */
.item-quality.q-t1 {
  color: var(--rarity-uncommon);
} /* 115%〜 緑 */
.item-quality.q-t2 {
  color: var(--rarity-rare);
} /* 165%〜 青 */
.item-quality.q-t3 {
  color: var(--rarity-epic);
} /* 215%〜 紫 */
.item-quality.q-t4 {
  color: var(--rarity-legend);
} /* 265%〜 ゴールド */
.item-quality.q-t5 {
  color: #f0566a;
} /* 315%〜 紅 */
.item-quality.q-t6 {
  color: #ff5cc8;
} /* 365%〜 桃 */
.item-quality.q-t7 {
  color: #eaf6ff;
} /* 415%〜 白 */

.item-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.item-stat {
  font-size: 11px;
  color: var(--text);
}

.item-affixes {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.affix-line {
  font-size: 11px;
  color: var(--gold-bright);
  display: flex;
  align-items: center;
  gap: 5px;
}

.affix-gem {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ---- インベントリ ---- */

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.inv-count {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 400;
}

.empty-note {
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  padding: 16px 0;
}

/* ---- ボタン ---- */

.btn {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(180deg, #3a2e1d, #2b2114);
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  transition:
    transform 0.06s ease,
    filter 0.12s ease;
}

.btn:hover {
  filter: brightness(1.15);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, #a87f2e);
  border-color: #8a6a26;
  color: #201708;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: 0 3px 10px rgba(212, 169, 78, 0.3);
}

.btn-small {
  padding: 5px 10px;
  font-size: 11px;
  align-self: flex-start;
}

.btn-tiny {
  padding: 3px 9px;
  font-size: 11px;
}

.btn-tiny.active,
.btn-small.active {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.btn-tiny.locked {
  opacity: 0.45;
}

.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-dim);
}

/* UI原則: 横並びカードは行の最大縦幅に揃い (グリッドのstretch)、
   アクションボタンは常にカード最下端に揃える */
.card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

/* ---- ダンジョン固定バー (メインメニュー直上・常時ファーストビュー) ---- */

.dungeon-float-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 57px;
  width: 100%;
  max-width: 768px;
  z-index: 950;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto auto;
  grid-template-areas: 'info quality help attempts skip sortie';
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #322718, #261d12);
  border-top: 1px solid var(--panel-edge);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.45);
}

.dungeon-bar-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: var(--font-body);
  cursor: pointer;
  touch-action: none;
  text-align: left;
  padding: 0;
}

.dungeon-bar-name {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  /* 名前の方を詰める。難易度の ◀ ▶ は幅が無くても消さない (2026-09-20 専務: スマホで出ない) */
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.dungeon-bar-name__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* ステージ選択を開くボタン。飾りは付けず、押せる大きさだけ確保する (2026-09-20 専務) */
.dungeon-bar-switch {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 0 18px;
  /* ステージ名の段の高さに合わせる (2026-09-20 専務) */
  min-height: 42px;
  font-family: var(--font-body);
  cursor: pointer;
}

/* ---- 画面下メインメニュー ---- */

.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 768px;
  z-index: 1000;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: linear-gradient(180deg, #2b2115, #201811);
  border-top: 1px solid var(--panel-edge);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-item {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 0 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-top: 2px solid transparent;
}

.bottom-nav-item.active {
  color: var(--gold-bright);
  border-top-color: var(--gold);
}

.bottom-nav-item.disabled {
  opacity: 0.4;
  cursor: default;
}

.bottom-nav-icon {
  font-size: 17px;
  line-height: 1;
}

.items-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- 確認モーダル (分解) ---- */

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 13100;
  background: rgba(8, 5, 2, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fade-in 0.15s ease;
}

.confirm-panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-inner));
  border: 1px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.6);
  padding: 18px;
  max-width: 360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  /* 縦に長い内容 (ガチャLv一覧など) はパネル内でスクロール。画面からはみ出さない */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px); /* iOS: ツールバー込みの 100vh だと下端が画面外に出て「閉じる」まで届かない (2026-09-10) */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* パネル内でスクロールさせる代わりに、中身の各行は縮ませない (縮むとタブ等の高さが潰れて文字が消える。ランキングで発生) */
.confirm-panel > * {
  flex-shrink: 0;
}

.confirm-message {
  font-size: 13px;
  line-height: 1.7;
}

.confirm-gain {
  font-size: 13px;
}

.confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ---- スキルツリー (グラフィカル盤面) ---- */

.sp-icon {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 3px;
  /* 錬石 (淡く光る石)。金色ボタンの上では白っぽい石が溶けるので、細い暗色の輪郭線を足す */
  filter: drop-shadow(0.6px 0 0 rgba(30, 20, 10, 0.9)) drop-shadow(-0.6px 0 0 rgba(30, 20, 10, 0.9))
    drop-shadow(0 0.6px 0 rgba(30, 20, 10, 0.9)) drop-shadow(0 -0.6px 0 rgba(30, 20, 10, 0.9));
}

.sp-amount {
  color: var(--gold-bright);
  font-weight: 700;
  white-space: nowrap;
}

.sp-badge {
  font-size: 13px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  padding: 4px 10px;
}

/* 盤面の上に浮くので背景は濃いめ (透けると数字が読めない) */
.skill-pt-badge {
  position: relative;
  background: rgba(10, 7, 3, 0.9);
}

.skill-pt-badge b {
  color: var(--gold-bright);
  font-size: 15px;
}

/* 全画面盤面 (下はメインメニューまで)。ヘッダー類はフロートで重ねる */
.skill-board.skill-board-full {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* メインメニューの裏まで伸ばす (隙間対策 2026-09-08)。メニューは手前に重なる */
  height: auto;
  border: 0;
  border-radius: 0;
  z-index: 10;
}

.skill-float-header {
  position: fixed;
  /* ステータスバー (安全領域) の下へ。iPhone のホーム画面アプリは画面の上端まで描くので、10px だと時計・電池の表示と重なって押せなかった */
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
}

.skill-float-error {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  margin: 0;
}

.skill-hint {
  position: fixed;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: rgba(20, 15, 9, 0.85);
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px;
  color: var(--text-dim);
  pointer-events: none;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.7s ease;
}

.skill-hint.fade {
  opacity: 0;
}

.skill-board {
  position: relative;
  height: 480px;
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(212, 169, 78, 0.06), transparent 60%), #16110b;
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.skill-board:active {
  cursor: grabbing;
}

.skill-board-inner {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.skill-edges {
  position: absolute;
  pointer-events: none;
}

.skill-edge {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 4;
  stroke-linecap: round;
}

.skill-edge.active {
  stroke: rgba(212, 169, 78, 0.65);
}

.skill-node-wrap {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* 真円ルール: width == height (サイズはインラインで指定) */
.tree-node {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #3a2e1d, #241c13 70%);
  border: 2px solid rgba(255, 255, 255, 0.18);
  transition:
    filter 0.1s ease,
    box-shadow 0.15s ease;
  padding: 0;
}

.tree-node:hover {
  filter: brightness(1.25);
}

/* 外枠の色 = 今なにができるか
   グレー=前提未達 / 緑=習得・ランクアップ可能 / 赤=前提OKだがスキルpt不足 / 黄=ランクMAX */
.tree-node.locked {
  filter: grayscale(0.9) brightness(0.6);
}

.tree-node.can-learn {
  border-color: #58b368;
  box-shadow: 0 0 10px rgba(88, 179, 104, 0.4);
}

/* 前提込みで届くマス。習得不可のグレーから、半分だけ色を戻す控えめな明滅。 */
.tree-node.locked.path-reachable {
  filter: grayscale(0.9) brightness(0.6);
  animation: skill-path-color 4.8s ease-in-out infinite;
}
.tree-node.path-reachable::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(132, 204, 145, 0.16);
  box-shadow: 0 0 14px 3px rgba(132, 204, 145, 0.3);
  opacity: 0;
  animation: skill-path-breathe 4.8s ease-in-out infinite;
}
@keyframes skill-path-breathe {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.4; }
}
@keyframes skill-path-color {
  0%, 100% {
    filter: grayscale(0.9) brightness(0.6);
    border-color: rgba(255, 255, 255, 0.18);
  }
  50% {
    filter: grayscale(0.45) brightness(0.8);
    border-color: rgba(132, 204, 145, 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tree-node.locked.path-reachable { animation: none; filter: grayscale(0.65) brightness(0.7); border-color: rgba(132, 204, 145, 0.25); }
  .tree-node.path-reachable::before { animation: none; opacity: 0.2; }
}
.low-power .tree-node.locked.path-reachable { animation: none; filter: grayscale(0.65) brightness(0.7); border-color: rgba(132, 204, 145, 0.25); }
.low-power .tree-node.path-reachable::before { animation: none; opacity: 0.2; }

.tree-node.no-points {
  border-color: #cf5b4b;
  box-shadow: 0 0 8px rgba(207, 91, 75, 0.3);
}

.tree-node.maxed {
  border-color: #f2cd3a;
  box-shadow: 0 0 14px rgba(242, 205, 58, 0.5);
}

.tree-node.selected {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.tree-node.job {
  background: radial-gradient(circle at 35% 30%, #4a3a20, #2b2114 70%);
}

.tree-node.active-job::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px dashed var(--gold-bright);
  border-radius: 50%;
}

.tree-node-icon {
  font-size: 24px;
  line-height: 1;
}

.tree-node.job .tree-node-icon {
  font-size: 30px;
}

.tree-node-rank {
  position: absolute;
  bottom: -4px;
  right: -6px;
  font-size: 10px;
  font-weight: 700;
  color: #14100a;
  background: var(--gold);
  border-radius: 7px;
  padding: 0 5px;
}

/* 未習得 (0/x) は控えめな色。最大ランクだけ読み取れればよい */
.tree-node-rank.zero {
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.tree-node-name {
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.skill-zoom-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}

/* ---- ボトムシート (ノード詳細) ---- */

.skill-sheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 64px;
  width: min(560px, calc(100% - 16px));
  z-index: 13050;
  background: linear-gradient(180deg, #2f2416, var(--panel-inner));
  border: 1px solid var(--gold);
  border-radius: 12px 12px 10px 10px;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.6);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: sheet-up 0.18s ease;
}

@keyframes sheet-up {
  from {
    transform: translateX(-50%) translateY(24px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.skill-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.skill-sheet-icon {
  font-size: 28px;
}

.skill-sheet-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skill-sheet-name {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.skill-rank {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ピップの横に数値でも 0/x を明記 (最大ランクをひと目で) */
.skill-rank-num {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
}

/* 真円ルール: width == height */
.rank-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.rank-pip.on {
  background: var(--gold);
  border-color: var(--gold-bright);
}

.skill-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skill-sheet-line {
  font-size: 12px;
  color: var(--text);
}

.skill-sheet-note {
  font-size: 10px;
  color: var(--text-dim);
}

/* 解放条件: 項目ごとに 満たした=白 / 未達=赤 */
.skill-node-req .req-met {
  color: var(--text);
}

.skill-node-req .req-unmet {
  color: #e06c6c;
}

.skill-node-req {
  font-size: 11px;
  color: var(--danger);
}

.job-change-btn {
  margin-left: 0;
}

/* ---- 装備アコーディオン ---- */

.equip-header {
  cursor: pointer;
  gap: 10px;
}

.equip-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.equip-mini-row {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: flex-start;
  margin-left: 6px;
}

.equip-mini-icon {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  border: 1px solid var(--rarity-common);
}

.rarity-border-uncommon {
  border-color: var(--rarity-uncommon) !important;
}

.rarity-border-rare {
  border-color: var(--rarity-rare) !important;
}

.rarity-border-epic {
  border-color: var(--rarity-epic) !important;
}

.rarity-border-legend {
  border-color: var(--rarity-legend) !important;
}

.equip-mini-empty {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--text-dim);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.equip-mini-empty.blocked {
  opacity: 0.4;
}

/* ---- 図鑑 ---- */

.codex-tabs {
  display: flex;
  gap: 6px;
}

.codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

/* 図鑑カードは固定寸法 (UI原則: 内容でサイズ・画像位置を変えない) */
.codex-card {
  position: relative;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 178px;
  justify-content: flex-start;
  color: var(--text);
  font-family: var(--font-body);
  cursor: pointer;
  transition: filter 0.1s ease;
  text-align: center;
  overflow: hidden;
}

/* 画像は固定サイズの箱に入れて位置を揃える */
.codex-img-box {
  height: 64px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.codex-name-row {
  height: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  flex-shrink: 0;
}

.codex-card:hover:not(.locked) {
  filter: brightness(1.2);
}

.codex-card.locked {
  cursor: default;
  opacity: 0.55;
}

.codex-card.item.rarity-uncommon {
  border-color: var(--rarity-uncommon);
}
.codex-card.item.rarity-rare {
  border-color: var(--rarity-rare);
}
.codex-card.item.rarity-epic {
  border-color: var(--rarity-epic);
}
.codex-card.item.rarity-legend {
  border-color: var(--rarity-legend);
}

.codex-unknown {
  font-family: var(--font-title);
  font-size: 34px;
  color: var(--text-dim);
}

.codex-enemy-img {
  max-height: 60px;
  max-width: 100%;
  width: auto;
  image-rendering: pixelated;
}

/* 図鑑の敵はバトルと同じ向き (左右反転) で掲載 */
.codex-enemy-img.mirrored,
.codex-detail-img.mirrored {
  transform: scaleX(-1);
}

.codex-item-img {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
}

.codex-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  min-width: 0;
}

.codex-sub {
  height: 20px;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
}

.codex-sub .codex-boss {
  margin-left: 0;
}

.codex-stats {
  width: 100%;
  height: 16px;
  overflow: hidden;
  flex-shrink: 0;
}

.codex-boss {
  display: inline-block;
  margin-left: 5px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: var(--danger);
  border-radius: 4px;
  padding: 0 5px;
  vertical-align: middle;
}

.codex-sub {
  display: flex;
  gap: 5px;
  align-items: center;
}

.codex-stats {
  font-size: 10px;
  color: var(--text-dim);
}

/* 詳細モーダルはスプライトの実寸(4倍ドット)に合わせてよしなに広がる */
.codex-detail {
  text-align: center;
  width: fit-content;
  min-width: 300px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
}

.codex-detail-img {
  image-rendering: pixelated;
  align-self: center;
  max-width: none;
}

.codex-detail-dungeon {
  font-size: 12px;
  color: var(--text-dim);
}

.codex-detail-stats {
  text-align: left;
}

.codex-detail-drops {
  font-size: 12px;
  color: var(--gold-bright);
}

/* アコーディオン開閉ボタンは目立たせる */
.btn-accordion {
  background: linear-gradient(180deg, #4a3a20, #35281a);
  border-color: var(--gold);
  color: var(--gold-bright);
  font-weight: 700;
}

/* ---- 合成 (錬成・限界突破) ---- */

/* ---- 共通スライダー (メグラン本家 .app-range 移植: 金グラデトラック+白丸ツマミ) ---- */

input.app-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #f0c24a, #d9a93c);
  outline: none;
  cursor: pointer;
}

.app-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%; /* 真円 */
  background: #fffdf6;
  border: 2px solid #c8922a;
  box-shadow: 0 1px 4px rgba(107, 62, 38, 0.35);
  cursor: grab;
}

.app-range::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.app-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fffdf6;
  border: 2px solid #c8922a;
  box-shadow: 0 1px 4px rgba(107, 62, 38, 0.35);
  cursor: grab;
}

/* ---- 一括分解フィルタ ---- */

.bulk-filter-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 12px;
}

.bulk-slider-block {
  margin-bottom: 12px;
  text-align: left;
}

.bulk-slider-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.bulk-num {
  width: 64px;
  padding: 3px 6px;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: right;
}

/* ---- ルーン (ナイア制覇で解放。装備欄の下の1行・最大4枠) ---- */

/* 2列×2行のグリッド (1行4枠だと効果テキストが改行して読みにくい)。
   ルーンは独立パネル (おすすめ装備の対象外であることを視覚的にも分ける) */
.rune-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 8px;
}

.rune-slot {
  min-width: 0;
  min-height: 52px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  cursor: pointer;
}

.rune-slot.filled {
  border-style: solid;
  border-color: var(--gold);
}

.rune-slot.locked {
  opacity: 0.55;
  cursor: default;
  font-size: 11px;
  flex-direction: column;
}

.rune-slot-req {
  font-size: 10px;
  color: var(--text-dim);
}

.rune-empty {
  font-size: 20px;
  color: var(--text-dim);
}

.rune-effects {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-bright);
  min-width: 0;
  max-width: 100%;
}

/* 効果1行は改行させない (収まらない場合は省略) */
.rune-effects > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rune-pick-row .rune-effects {
  flex: 1;
}

.rune-gacha-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* ---- ルーンガチャ演出 (伏せ石→順番にめくり) ---- */

.gacha-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.gacha-grid.single {
  grid-template-columns: 1fr;
}

.gacha-tile.is-openable {
  cursor: pointer;
}

.gacha-tile {
  position: relative;
  min-height: 64px;
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  overflow: hidden;
  min-width: 0;
}

/* 伏せ状態のルーン石: ゆっくり明滅して期待感を出す */
.gacha-tile-back {
  font-size: 26px;
  color: var(--gold);
  animation: gacha-pulse 1.2s ease-in-out infinite;
}

@keyframes gacha-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

/* 大当たり (効果3個) の開示前のタメ揺れ */
.gacha-tile.is-shake {
  animation: chest-shake 0.64s ease infinite;
  border-color: var(--gold);
}

/* めくり: スケールインで開示。効果2個=金の光 / 3個=紅の光 */
.gacha-tile.revealed {
  animation: chest-reward-in 0.3s ease both;
}

.gacha-tile.revealed.e2 {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(240, 194, 74, 0.35);
}

.gacha-tile.revealed.e3 {
  border-color: #f0566a;
  box-shadow: 0 0 12px rgba(240, 86, 106, 0.5);
}

/* ショップのセクション見出し (SP交換 / 課金アイテム を明確に分ける) */
.shop-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin: 14px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--panel-edge);
}

.shop-section-label {
  white-space: nowrap;
}

.shop-section-title .attempts-badge {
  margin-right: 0;
  letter-spacing: 0;
}

.shop-section-title:first-of-type {
  margin-top: 0;
}

/* 転生ボタン (Lv上限到達時のみLv行に出る) */
.prestige-btn {
  margin-left: 8px;
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* 転生できる状態のあいだは点滅で誘導。
   transform と box-shadow だけを動かすので、周りのレイアウトは動かない */
.prestige-btn.is-ready {
  animation: prestige-pulse 1.6s ease-in-out infinite;
  transform-origin: center;
}

@keyframes prestige-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(242, 205, 114, 0);
  }
  50% {
    transform: scale(0.9);
    box-shadow: 0 0 12px rgba(242, 205, 114, 0.85);
  }
}

/* 動きを減らす設定の人には光るだけにする */
@media (prefers-reduced-motion: reduce) {
  .prestige-btn.is-ready {
    animation: none;
    box-shadow: 0 0 10px rgba(242, 205, 114, 0.7);
  }
}

.prestige-note {
  text-align: left;
  line-height: 1.8;
}

/* まとめて突破ボタン (素材選択モーダルの先頭) */
.lb-max-btn {
  width: 100%;
  margin-bottom: 10px;
}

/* 部位フィルタチップ (合成リスト上部) */
.slot-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.craft-note {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
  line-height: 1.6;
}

.refine-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
  text-align: left;
}

.refine-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  padding: 9px 12px;
  color: var(--gold-bright);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.1s ease;
  text-align: left;
}

.refine-row:hover:not(:disabled) {
  filter: brightness(1.25);
}

.refine-row:disabled {
  opacity: 0.5;
  cursor: default;
}

.refine-roll-label {
  margin-left: auto;
  font-size: 11px;
  color: var(--gold);
  flex-shrink: 0;
}

.refine-row > .term-link {
  min-width: 0;
  text-align: left;
}

.refine-row > button.refine-roll-label {
  min-width: 82px;
  padding: 6px;
  white-space: nowrap;
}

.refine-compare {
  display: flex;
  align-items: stretch;
  gap: 10px;
  justify-content: center;
}

.refine-compare-col {
  flex: 1;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
}

.refine-compare-col.old {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--panel-edge);
  color: var(--text-dim);
}

.refine-compare-col.new {
  background: rgba(212, 169, 78, 0.12);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
}

.refine-compare-head {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 5px;
}

.refine-compare-arrow {
  align-self: center;
  color: var(--gold);
  font-size: 18px;
}

.repeat-note {
  font-size: 13px;
  color: var(--gold-bright);
}

/* 限界突破の before → after 表示 */
.lb-diff-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lb-diff-row {
  display: grid;
  grid-template-columns: 1fr auto 24px auto;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  padding: 8px 12px;
  text-align: left;
}

.lb-diff-label {
  font-size: 12px;
  color: var(--text-dim);
}

.lb-diff-before {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.lb-diff-after {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.lb-fodder-note {
  margin-bottom: 0;
  color: var(--danger);
}

/* ---- 設定・クレジット ---- */

.settings-rows {
  display: flex;
  flex-direction: column;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13px;
}

.settings-row:last-child {
  border-bottom: 0;
}

.settings-soon {
  font-size: 11px;
  color: var(--text-dim);
}

.settings-volume {
  flex: 1;
  max-width: 320px;
  margin-left: 12px;
}

.settings-volume .app-range {
  flex: 1;
}

.settings-volume-num {
  min-width: 52px;
  justify-content: center;
}

.settings-value {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.settings-avatar {
  height: 40px;
  width: auto;
  image-rendering: pixelated;
}

.name-input {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  padding: 9px 12px;
  outline: none;
}

.name-input:focus {
  border-color: var(--gold);
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.avatar-choice {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 8px 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  transition: filter 0.1s ease;
}

.avatar-choice:hover {
  filter: brightness(1.25);
}

.avatar-choice.active {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(212, 169, 78, 0.3);
}

.avatar-choice img {
  height: 56px;
  width: auto;
  image-rendering: pixelated;
}

.credits-panel {
  text-align: left;
}

.credits-title {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 800;
  color: var(--gold);
  text-align: center;
}

.credits-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.credits-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 3px;
}

.credits-line {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.credits-link {
  color: var(--xp-blue);
  font-size: 12px;
  font-weight: 400;
  word-break: break-all;
}

.credits-note {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ---- ダンジョンパネル ---- */

.dungeon-select-panel {
  max-width: 440px;
}

.dungeon-select-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 55vh;
  overflow-y: auto;
}

.dungeon-select-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  padding: 9px 12px;
  color: var(--text);
  font-family: var(--font-body);
  cursor: pointer;
  transition: filter 0.1s ease;
}

.dungeon-select-row:hover:not(:disabled) {
  filter: brightness(1.2);
}

.dungeon-select-row.active {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(212, 169, 78, 0.25);
}

.dungeon-select-row.locked {
  opacity: 0.5;
  cursor: default;
}

.dungeon-select-name {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
}

.dungeon-select-desc {
  font-size: 11px;
  color: var(--text-dim);
}

.dungeon-cleared {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #14100a;
  background: var(--gold);
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
}

.dungeon-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 70%),
    radial-gradient(ellipse 80% 100% at 100% 50%, rgba(212, 169, 78, 0.1), transparent 60%), rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 14px;
}

.dungeon-name {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 800;
}

.dungeon-desc {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

.btn-sortie {
  font-size: 16px;
  padding: 15px 26px;
  white-space: nowrap;
  font-family: var(--font-title);
  letter-spacing: 0.1em;
}

/* ---- バトル画面 ---- */

.run-screen {
  position: relative;
  /* 大型スプライト等がページの横幅を押し広げないための保険 (縦は自由) */
  overflow-x: clip;
}

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

/* 狭い画面ではダンジョン名側だけが縮む (改行禁止=Marquee)。FLOOR表記とボタンは崩さない */
.run-dungeon {
  font-family: var(--font-title);
  font-size: 14px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.run-dungeon .hard-chip {
  flex-shrink: 0;
}

/* フロア表示: 洞窟の入口アイコン (サイトロゴをマスクで金色に) + n/m。「FLOOR」の文字はやめた (2026-09-08) */
.run-floor {
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.floor-icon {
  width: 22px;
  height: 22px;
  background: #8a5a2b; /* 茶色 (専務指定) */
  -webkit-mask: url('/images/ui/logo.svg') center / contain no-repeat;
  mask: url('/images/ui/logo.svg') center / contain no-repeat;
  flex-shrink: 0;
}

.floor-num {
  font-size: 20px;
  color: var(--gold-bright);
}

.run-chat-toggle {
  flex-shrink: 0;
  padding: 3px 7px;
}

/* 周回画面のチャットはヘッダの下に伸びる (高さはホームと同じ) */
.run-screen .chat-panel {
  margin-bottom: 10px;
}

.run-controls {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.run-controls .btn-tiny {
  white-space: nowrap;
}

/* 本家 battle-arena 準拠: エリア背景写真の上に左右の立ち絵 */

/* バトルステージは固定高さで先に領域確保 (敵のサイズで枠を変えない。
   大型スプライトは overflow visible で枠からはみ出させる) */
.arena {
  background-color: #191817;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(216, 194, 148, 0.6);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(26, 18, 12, 0.18);
  padding: 24px 12px 12px;
  height: 280px;
  display: flex;
  align-items: flex-end;
  image-rendering: pixelated;
  position: relative; /* 宝箱オーバーレイの基準 */
  /* 狭い画面で大型スプライトの横幅がページを突き破らないよう、横だけ枠で見切る
     (縦のはみ出し演出は維持。overflow-x: clip はスクロールコンテナを作らない) */
  overflow-x: clip;
}

/* バディ (前衛=プレイヤーの前 / 後衛=後ろ。固定オーバーレイでレイアウト不変) */
/* 2人並びの間隔 (前後それぞれこの距離だけ離れる) と、2人のときに全体を後ろへ寄せる量。
   立ち位置を変えたくなったらこの2つだけ触ればよい */
.arena {
  --party-gap: 52px;
  --party-back-shift: 14px;
}

.buddy-sprite {
  position: absolute;
  bottom: 10px;
  /* left:25% = 1人のときの立ち位置 (左カラムの中央) とほぼ同じ。
     translateX(-50%) で自分の中心をそこへ合わせてから、前後へずらす */
  left: 25%;
  --buddy-x: -50%;
  transform: translateX(var(--buddy-x));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 4;
  pointer-events: none;
}

.buddy-sprite.front {
  --buddy-x: calc(-50% - var(--party-back-shift) + var(--party-gap));
}

.buddy-sprite.back {
  --buddy-x: calc(-50% - var(--party-back-shift) - var(--party-gap));
}

/* バディがいるときは自分も同じだけ反対側へ (前衛なら自分は後ろ、後衛なら自分が前)。
   マギドール (.pet-arena) は自分の足元に付くので、自分と同じ量だけ一緒にずらす */
.arena-portraits.has-buddy.buddy-front .arena-portrait.side-player,
.pet-arena.has-buddy.buddy-front {
  transform: translateX(calc(-1 * var(--party-back-shift) - var(--party-gap)));
}

.arena-portraits.has-buddy.buddy-back .arena-portrait.side-player,
.pet-arena.has-buddy.buddy-back {
  transform: translateX(calc(-1 * var(--party-back-shift) + var(--party-gap)));
}

/* 隊長の行動ポップアップ (頭の上・支援テキストは少し小さめ) */
.buddy-sprite .dmg-popup {
  font-size: 18px;
  white-space: nowrap;
  top: -26px;
}

/* 隊長も行動時は前 (敵方向) に踏み込む (基準の立ち位置からの相対移動) */
.buddy-sprite.lunge {
  animation: buddy-lunge-right 0.32s ease;
}

@keyframes buddy-lunge-right {
  30% {
    transform: translateX(calc(var(--buddy-x) + 16px));
  }
}

.atb-donut.atb-buddy {
  --atb-color: #d4a94e;
  width: 20px;
  height: 20px;
}

/* 撃破時の宝箱 (敵側の足元に固定オーバーレイ。出現でレイアウトを動かさない) */
.chest-row {
  position: absolute;
  right: 16%;
  bottom: 14px;
  display: flex;
  gap: 10px;
  z-index: 5;
  pointer-events: none;
}

.chest-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  animation: chestPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes chestPop {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.12) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ---- リザルトの宝箱開封演出 (メグラン本家のスプライトシート移植) ----
   treasure-box.png = 32×48セル×8列(箱の見た目)×3行(閉/開きかけ/全開) を2倍表示。
   普通の宝箱=1列目 / 豪華な宝箱=5列目 (本家の box-1 / box-5 対応) */

.chest-reveal-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  min-height: 96px; /* 開封後もアイテム枠でレイアウトが動かないよう先に確保 */
  flex-wrap: wrap;
}

.chest-sprite {
  position: relative;
  width: 64px;
  height: 96px;
  background-image: url('/images/sprites/treasure-box.png');
  background-size: 512px 288px;
  background-position: 0 0;
  image-rendering: pixelated;
  animation: chestPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.chest-sprite.skin-fancy {
  background-position-x: -256px;
}

.chest-sprite.row-1 {
  background-position-y: -96px;
}

.chest-sprite.row-2 {
  background-position-y: -192px;
}

/* 豪華な宝箱の開封前シェイク (本家 treasure-shake) */
.chest-sprite.is-shake {
  animation: chest-shake 0.64s ease;
}

@keyframes chest-shake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  10% {
    transform: translateX(-2px) rotate(-4deg);
  }
  25% {
    transform: translateX(2px) rotate(4deg);
  }
  40% {
    transform: translateX(-2px) rotate(-3deg);
  }
  55% {
    transform: translateX(2px) rotate(3deg);
  }
  70% {
    transform: translateX(-1px) rotate(-2deg);
  }
  85% {
    transform: translateX(1px) rotate(2deg);
  }
}

/* 全開時のキラキラ (treasure-effect.png 32×32×12コマを2倍・コマ送り) */
.chest-fx {
  position: absolute;
  left: 0;
  top: 8px;
  width: 64px;
  height: 64px;
  background-image: url('/images/sprites/treasure-effect.png');
  background-size: 768px 64px;
  image-rendering: pixelated;
  pointer-events: none;
  animation: chest-fx-burst 0.55s steps(12) forwards;
}

@keyframes chest-fx-burst {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -768px;
  }
}

/* 全開時のフラッシュ (本家 treasure-flash-burst) */
.chest-flash {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 200, 0.95), rgba(255, 244, 200, 0) 70%);
  pointer-events: none;
  animation: chest-flash-burst 0.5s ease-out forwards;
}

@keyframes chest-flash-burst {
  from {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.3);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.1);
  }
}

/* 開封後のアイテム枠のスケールイン (本家 treasure-reward-in) */
.reward-in {
  animation: chest-reward-in 0.3s ease both;
}

@keyframes chest-reward-in {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.arena-portraits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  align-items: end;
}

.arena-portrait {
  display: flex;
  justify-content: center;
}

/* サイズは PixelSprite が元画像×共通倍率で px 指定する (ドット密度を全キャラで統一) */
.arena-portrait-frame {
  position: relative;
  min-height: 150px;
  min-width: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  transform-origin: center;
}

.arena-portrait-image {
  position: relative;
  z-index: 3;
  image-rendering: pixelated;
}

.arena-portrait-image.mirrored {
  transform: scaleX(-1);
}

/* 被弾: 枠ではなく画像の輪郭に沿って赤く発光 (drop-shadow は透過部分を無視して輪郭に付く) */
.arena-portrait.is-hit .arena-portrait-frame {
  animation: arena-shake 320ms ease-out;
}

.arena-portrait.is-hit .arena-portrait-image {
  filter: drop-shadow(0 0 2px rgba(255, 70, 70, 0.95)) drop-shadow(0 0 9px rgba(255, 70, 70, 0.65));
}

/* 攻撃時: 少し前に踏み込む */
.arena-portrait.side-player.lunge .arena-portrait-frame {
  animation: lunge-right 0.32s ease;
}

.arena-portrait.side-enemy.lunge .arena-portrait-frame {
  animation: lunge-left 0.32s ease;
}

@keyframes lunge-right {
  30% {
    transform: translateX(16px);
  }
}

@keyframes lunge-left {
  30% {
    transform: translateX(-16px);
  }
}

/* 敵の登場は右からスライドイン、撃破時はスーッと消える */
.arena-portrait.enemy-enter {
  animation: enemy-slide-in 0.5s ease both;
}

@keyframes enemy-slide-in {
  from {
    transform: translateX(140px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.arena-portrait.dying {
  /* enemy-enter の fill-mode:both が opacity:1 を固定し続けるため、
     アニメーションを切ってからフェードさせる (宝箱ポップと同時に始まる) */
  animation: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}

@keyframes arena-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-7px);
  }
  45% {
    transform: translateX(6px);
  }
  70% {
    transform: translateX(-4px);
  }
}

/* 下段 HP パネル (本家のベージュ stats 準拠) */

.arena-stats-row {
  position: relative; /* トリガースキルのカットインの基準 (ステータス枠〜ログの境目に出す) */
  display: grid;
  /* minmax(0, 1fr): 1fr だけだと中身 (長い敵名) の幅で列が広がって半々にならない */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.arena-stats {
  min-width: 0;
  background: #ebe7de;
  border: 1px solid #c4d3ff;
  border-radius: 6px;
  padding: 8px 10px;
  color: #4a3826;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* ATBドーナツは敵味方とも内側 (中央寄り) に配置。
   DOM順は donut → main なので、プレイヤー側だけ反転して右端=内側へ */
.arena-stats.side-player {
  flex-direction: row-reverse;
}

.arena-stats.side-enemy {
  border-color: #ffc4c4;
}

.arena-stats-main {
  flex: 1;
  min-width: 0;
}

/* ATB行動ゲージ (ドーナツ型・時計回り)。--atb は 0〜1 を rAF で更新 */
.atb-donut {
  --atb: 0;
  width: 34px;
  height: 34px; /* 真円ルール: width == height */
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(var(--atb-color) calc(var(--atb) * 1turn), rgba(0, 0, 0, 0.14) 0);
  -webkit-mask: radial-gradient(circle closest-side, transparent 60%, #000 61%);
  mask: radial-gradient(circle closest-side, transparent 60%, #000 61%);
}

.atb-donut.atb-player {
  --atb-color: #5b83d6;
}

.atb-donut.atb-enemy {
  --atb-color: #d66a5b;
}

.arena-stats-name {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arena-stats .bar {
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(0, 0, 0, 0.1);
}

.hp-bar {
  height: 13px;
}

.enemy-hp .bar-fill {
  background: linear-gradient(90deg, #a83c33, var(--hp-red));
}

.player-hp .bar-fill {
  background: linear-gradient(90deg, #56964a, var(--hp-green));
}

/* シールド: HPバーの上に重ねる青ゲージ (HPの右端から) */
.hp-bar {
  position: relative;
}

.bar-shield {
  position: absolute;
  top: 0;
  height: 100%;
  /* HP満タン時は HP の上に重なるので、少し透かして下の緑が見えるように */
  background: linear-gradient(90deg, rgba(63, 116, 232, 0.92), rgba(127, 178, 255, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  border-radius: 5px;
  transition:
    left 0.35s ease,
    width 0.35s ease;
}

/* HPの下の状態行 (空でも高さを確保して枠が動かないようにする) */
.arena-status-line {
  overflow-x: auto;
  scrollbar-width: none;
  min-height: 13px;
  margin-top: 1px;
  font-size: 10px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}
.arena-status-line::-webkit-scrollbar { display: none; }
.arena-status-line > .stack-chip { flex-shrink: 0; }
.stack-chip.freeze { color: #8fdce8; }
.stack-chip.laceration { color: #ee9292; }
.stack-chip.electrify { color: #e9cf73; }
.stack-chip.hex_mark { color: #cfa0e7; }
.stack-chip.momentum { color: #e9ad70; }
.stack-chip.armor_layers { color: #a2bfd9; }

.stack-chip.shield {
  color: #7fb2ff;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.stack-chip.poison {
  color: #b06fe0;
}

.stack-chip.burn {
  color: #f08a3c;
}

.dmg-popup.shield {
  top: 30px;
  font-size: 22px;
  color: #7fb2ff;
  text-shadow:
    0 0 10px rgba(127, 178, 255, 0.6),
    0 2px 3px rgba(0, 0, 0, 0.9);
}

.arena-stats-hp {
  font-size: 10px;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

/* ジョブパッシブのスタック表示 (HP行の左側。空でも行高は変えない) */
.stack-chip {
  font-weight: 700;
  white-space: nowrap;
}

.stack-chip.tactics {
  color: #3f6ac0;
}

.stack-chip.judgment {
  color: #b03e2e;
}

/* 図鑑の装備詳細モーダル */
.codex-item-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 280px;
}

.codex-item-detail .item-card {
  text-align: left;
}

/* 武器のヒット構成表示 (物理 威力100 ×1Hit) */
.attack-profile {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.attack-profile-hit {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* ---- ユニークプロパティ表示 (補正欄の一番上・◆名前:発動率n%) ---- */

.series-prop-line {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--gold-bright);
  font-weight: 700;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: inherit;
}

.series-prop-line:hover {
  filter: brightness(1.2);
}

.affix-gem.series {
  background: var(--gold-bright);
}

.prop-rate {
  margin-left: 4px;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(212, 169, 78, 0.16);
  border: 1px solid rgba(212, 169, 78, 0.5);
  white-space: nowrap;
}

/* 説明文中のクリック用語 (クリティカル等): アンダーラインで「押せる」ことを示す */
.term-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--gold-bright);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}

.prop-rate-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-bright);
  padding: 2px 10px;
  border-radius: 5px;
  background: rgba(212, 169, 78, 0.16);
  border: 1px solid rgba(212, 169, 78, 0.5);
  margin-bottom: 6px;
}

/* ---- バディ (ホームの枠・選択モーダル) ---- */

/* ステータスグリッドの右にバディ枠を並べる */
/* バディ枠はキャラ情報 (名前/Lv/XP) の右 (char-layout 内)。左のアバター枠と同サイズ */
.buddy-frame {
  position: relative;
  align-items: center;
  justify-content: center;
}

.buddy-plus {
  width: 44px;
  height: 44px;
  font-size: 22px;
}

.buddy-set {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.buddy-name-btn {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid var(--panel-edge);
  border-radius: 5px;
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  cursor: pointer;
  white-space: nowrap;
}

.buddy-stat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-bright);
  margin-bottom: 8px;
}

.buddy-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.buddy-row-icon {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  object-fit: contain;
  flex-shrink: 0;
}

.buddy-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ---- 持ち物ハブ (持ち物/合成のタブシート) ---- */

.items-hub-tabs {
  /* 縦持ちで一覧を読み進めても合成へ移れる。iPhone の上端の安全領域を避ける。 */
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  display: flex;
  gap: 0;
  margin: 0 0 10px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  overflow: hidden;
}

.items-hub-tab {
  flex: 1;
  min-width: 0;
  height: 44px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 0;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-dim);
  border: none;
  cursor: pointer;
}

.items-hub-tab.locked,
.btn.locked,
.shop-item.locked {
  opacity: 0.55;
  cursor: pointer;
}

.speed-hint.lock-hint {
  animation-duration: 4s;
}

.items-hub-tab.active {
  background: rgba(212, 169, 78, 0.22);
  color: var(--gold-bright);
}

/* ---- ショップ ---- */

.shop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
}

.shop-item-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--gold-bright);
  background: rgba(212, 169, 78, 0.14);
  border: 1px solid rgba(212, 169, 78, 0.5);
  border-radius: 8px;
}

.shop-item-main {
  flex: 1;
  min-width: 0;
}

.shop-item-name {
  font-size: 14px;
  font-weight: 700;
}

.shop-item-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.shop-owned {
  font-size: 13px;
  font-weight: 700;
  color: #58b368;
  white-space: nowrap;
}

.shop-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-dim);
}

/* ---- 難易度 (ノーマル/ハード) ---- */

/* ダンジョン選択モーダルの見出し行 (右上に難易度トグル) */
.dungeon-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* 出撃バーの周回数・品質上限表示 */
.run-quality-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: var(--text-dim);
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

.run-quality-line {
  font-weight: 700;
}

/* ？ヘルプボタン (真円ルール: width == height) */
.btn-help {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--panel-edge);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.speed-hint.wrap {
  white-space: normal;
  width: 300px;
  max-width: calc(100vw - 16px);
  line-height: 1.5;
}

.codex-difficulty-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

/* 敵詳細の通常ドロップ表示 (宝箱アイコン+バッジのみ) */
.codex-drop-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.codex-chest-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.dungeon-select-panel .difficulty-toggle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  gap: 6px;
  margin: 10px 0 0;
}
.difficulty-toggle {
  display: flex;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.difficulty-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-dim);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.difficulty-btn.active {
  background: rgba(212, 169, 78, 0.25);
  color: var(--gold-bright);
}

.difficulty-btn.hard.active {
  background: rgba(207, 91, 75, 0.3);
  color: #ff9c8a;
}

/* 極 = ハードのさらに上。紫で別格に見せる */
.difficulty-btn.extreme.active,
.difficulty-btn.diff-extreme.active {
  background: rgba(146, 92, 214, 0.32);
  color: #d7b4ff;
}

/* ハード (データ駆動クラス) */
.difficulty-btn.diff-hard.active {
  background: rgba(207, 91, 75, 0.3);
  color: #ff9c8a;
}

/* 螺旋 = 極のさらに上。青緑で「別の層」に見せる */
.difficulty-btn.diff-spiral.active {
  background: rgba(64, 196, 180, 0.3);
  color: #7ef0dc;
}

.hard-chip.diff-hard {
  color: #ffb4a6;
  background: rgba(207, 91, 75, 0.22);
  border-color: rgba(207, 91, 75, 0.6);
}

.hard-chip.diff-extreme {
  color: #d7b4ff;
  background: rgba(146, 92, 214, 0.22);
  border-color: rgba(146, 92, 214, 0.65);
}

.hard-chip.diff-spiral,
.dungeon-cleared.spiral {
  color: #7ef0dc;
  background: rgba(64, 196, 180, 0.2);
  border-color: rgba(64, 196, 180, 0.65);
}

.hard-chip.extreme,
.dungeon-cleared.extreme {
  color: #d7b4ff;
  background: rgba(146, 92, 214, 0.22);
  border-color: rgba(146, 92, 214, 0.65);
}

.difficulty-btn.locked {
  opacity: 0.45;
  cursor: default;
}

/* ハードバッジ・ハード制覇チップ */
.hard-chip,
.dungeon-cleared.hard {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #ffb4a6;
  background: rgba(207, 91, 75, 0.22);
  border: 1px solid rgba(207, 91, 75, 0.6);
  white-space: nowrap;
  vertical-align: middle;
}

/* 倍速×2ロック中のタップで出す解放条件フロート (ポータル+fixed+z-index 13000番台) */
.speed-hint {
  position: fixed;
  z-index: 13200;
  background: linear-gradient(180deg, var(--panel), var(--panel-inner));
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 7px 11px;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  pointer-events: none;
  animation: speedHintFade 8.4s ease forwards;
}

@keyframes speedHintFade {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  3% {
    opacity: 1;
    transform: translateY(0);
  }
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* イベントログ (本家 replay-log 準拠のベージュリスト) */

.replay-log {
  margin-top: 10px;
  background: #ebe9e2;
  border: 1px solid #d5cebd;
  border-radius: 6px;
  padding: 8px 10px;
  height: 150px;
  overflow-y: auto;
  color: #57482f;
  font-size: 11px;
  line-height: 1.7;
}

.replay-log-line.floor {
  font-weight: 700;
  color: #8a6a26;
  margin-top: 4px;
}

/* 攻撃エフェクト (192pxセルのスプライトシートをコマ送り) */
.battle-fx {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 192px;
  height: 192px;
  transform: translate(-50%, -55%) scale(0.85);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 400;
}

.dmg-popup {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500; /* 最前面。連続ヒットは上へ流れ続けるので重なっても読める */
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 30px;
  color: #fff;
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.8),
    0 2px 3px rgba(0, 0, 0, 0.9);
  animation: dmg-float 1.4s linear forwards;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}

.dmg-popup.crit {
  color: var(--gold-bright);
  font-size: 40px;
  text-shadow:
    0 0 14px rgba(242, 205, 114, 0.7),
    0 2px 3px rgba(0, 0, 0, 0.9);
}

.dmg-popup.miss {
  color: var(--text-dim);
  font-size: 22px;
}

/* ウォーデンのパリィ (ダメージ0無効化) */
.dmg-popup.parry {
  color: #9fc2ff;
  font-size: 22px;
}

/* 回復は被弾と同時に出るので、1行ぶん下げてダメージ表示と重ならないようにする */
.dmg-popup.heal {
  top: 30px;
  font-size: 24px;
  color: var(--hp-green);
  text-shadow:
    0 0 10px rgba(126, 201, 106, 0.6),
    0 2px 3px rgba(0, 0, 0, 0.9);
}

/* バディの支援テキストは頭上 (別枠) なので位置を戻す。2つ上がる場合は改行して2行で見せる */
.buddy-sprite .dmg-popup.heal {
  top: -26px;
  font-size: 18px;
  white-space: pre;
  line-height: 1.15;
}

.skill-callout {
  font-size: 13px;
  color: var(--gold-bright);
  letter-spacing: 0.15em;
  margin-bottom: 2px;
}

@keyframes dmg-float {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.7);
  }
  10% {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px) scale(1.08);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-64px) scale(1);
  }
}

/* ---- リザルト ---- */

.result-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 5, 2, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
  animation: fade-in 0.3s ease;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.result-panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-inner));
  border: 1px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(212, 169, 78, 0.2);
  padding: 20px;
  max-width: 480px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  overscroll-behavior: contain; /* 端まで行っても裏のバトル画面へスクロールが伝わらない */
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.result-title {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 800;
}

.result-title.clear {
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(242, 205, 114, 0.5);
}

.result-title.fail {
  color: var(--danger);
}

.result-xp {
  font-size: 14px;
}

.levelup {
  display: block;
  margin-top: 4px;
  color: var(--gold-bright);
  font-weight: 700;
}

.result-drops-title {
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.12em;
}

.result-drops {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

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

.loading {
  text-align: center;
  color: var(--text-dim);
  padding: 40px 0;
}

.error-box {
  background: rgba(224, 93, 75, 0.12);
  border: 1px solid rgba(224, 93, 75, 0.4);
  color: #f0a49a;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  margin-bottom: 10px;
}

@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dungeon-card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  /* SE等の狭幅: 余白と装飾を圧縮してレイアウト構造は維持する */
  .app {
    padding: 8px 8px 140px;
  }

  /* バトルヘッダー: FLOOR表記を詰めてボタン3つとダンジョン名(Marquee)を1行維持 */
  .run-header {
    gap: 6px;
  }

  .run-floor {
    letter-spacing: 0.06em;
    font-size: 12px;
  }

  .floor-num {
    font-size: 16px;
  }

  .run-controls {
    gap: 4px;
  }

  .run-controls .btn-tiny {
    padding: 3px 6px;
  }

  /* HPパネル: 余白圧縮 (ドーナツ+名前+HPバーを収める) */
  .arena-stats-grid {
    gap: 6px;
  }

  .arena-stats {
    padding: 6px 7px;
    gap: 6px;
  }

  /* 出撃バー: 名前(ellipsis)とCTAを優先して間隔を詰める */
  .dungeon-float-bar {
    gap: 8px;
    padding: 8px 10px;
  }
}

/* ---- フォント拡大調整 (全体を一回り大きく。メインメニューは据え置き) ---- */

body {
  font-size: 15px;
}
.panel-title {
  font-size: 16px;
}
.char-name {
  font-size: 22px;
}
.char-job {
  font-size: 13px;
}
.char-level {
  font-size: 17px;
}
.xp-label {
  font-size: 11px;
}
.stat-label {
  font-size: 12px;
}
.stat-value {
  font-size: 18px;
}
.substat-row {
  font-size: 12px;
}
.equip-slot-name {
  font-size: 12px;
}
.equip-empty {
  font-size: 13px;
}
.item-name {
  font-size: 14px;
}
.rarity-badge {
  font-size: 10px;
}
.item-slot-type {
  font-size: 10px;
}
.item-quality {
  font-size: 11px;
}
.item-stat {
  font-size: 12px;
}
.affix-line {
  font-size: 12px;
}
.inv-count {
  font-size: 12px;
}
.empty-note {
  font-size: 13px;
}
.btn {
  font-size: 14px;
}
.btn-small {
  font-size: 12px;
}
.btn-tiny {
  font-size: 12px;
}
.dungeon-name {
  font-size: 19px;
}
.dungeon-desc {
  font-size: 12px;
}
.dungeon-select-name {
  font-size: 15px;
}
.dungeon-select-desc {
  font-size: 12px;
}
.picker-name {
  font-size: 13px;
}
.picker-sub {
  font-size: 11px;
}
.picker-affixes {
  font-size: 11px;
}
.run-dungeon {
  font-size: 15px;
}
.arena-stats-name {
  font-size: 13px;
}
.arena-stats-hp {
  font-size: 11px;
}
.replay-log {
  font-size: 12px;
}
.result-xp {
  font-size: 15px;
}
.result-drops-title {
  font-size: 14px;
}
.settings-row {
  font-size: 14px;
}
.credits-line {
  font-size: 14px;
}
.credits-label {
  font-size: 12px;
}
.credits-note {
  font-size: 12px;
}
.confirm-message {
  font-size: 14px;
}
.confirm-gain {
  font-size: 14px;
}
.sp-badge {
  font-size: 14px;
}
.skill-note {
  font-size: 12px;
}
.skill-sheet-name {
  font-size: 15px;
}
.skill-sheet-line {
  font-size: 13px;
}
.skill-node-req {
  font-size: 12px;
}
.tree-node-name {
  font-size: 11px;
}

/* ---- 持ち物の上限と自動整理 (2026-08-17) ---- */

/* 上限超過の所持数は赤く出す */
.inv-count.over {
  color: #f0566a;
  font-weight: 700;
}

/* 満杯時の自動SP変換トグル (一括分解モーダル内) */

/* リザルトの自動整理・満杯警告 */
.auto-convert-note {
  color: var(--gold-bright);
}

.inventory-full-note {
  color: #ffb4a6;
}

/* ---- 連番ファイル方式の攻撃エフェクト (CC0素材) ---- */

.battle-fx.fx-seq {
  background-size: contain;
  background-position: center;
}

/* 金色の素材を白い斬撃に変換 (彩度を落として輝度を上げる) */
.battle-fx.fx-white {
  filter: grayscale(1) brightness(2.2) drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}

/* 融合で移植したプロパティ (元のプロパティと区別できるよう色を変える) */
.affix-gem.series.fused {
  background: #7ef0dc;
  box-shadow: 0 0 6px rgba(126, 240, 220, 0.6);
}

.series-prop-line.fused {
  color: #7ef0dc;
}

/* 融合タブ */
.fuse-note {
  text-align: left;
  line-height: 1.7;
}

.fuse-rate {
  color: var(--gold-bright);
  font-weight: 700;
}

/* ---- 図鑑: 装備の入手経路 ---- */
.codex-source-block {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.codex-source-title {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-bright);
}

.codex-source-line {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--text);
}

.codex-source-line.empty {
  color: var(--text-dim);
}

.codex-source-dungeon {
  font-weight: 700;
}

.codex-source-detail {
  font-size: 11px;
  color: var(--text-dim);
}

/* 装備パッシブ (小休息など): ユニークプロパティと区別できるよう緑寄りに */
.affix-gem.passive {
  background: var(--hp-green);
  box-shadow: 0 0 6px rgba(126, 201, 106, 0.5);
}

.series-prop-line.passive {
  color: var(--hp-green);
}

/* ダンジョン選択: 常時ドロップ率2倍のバッジ (制覇バッジと同じ行に並ぶ) */
.dungeon-drop-boost {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  color: #101014;
  background: var(--gold-bright);
  border: 1px solid var(--gold);
}

/* 撤退で報酬が目減りしたことの注記 (自動整理の注記と同じ扱い) */
.retreat-note {
  color: var(--text-dim);
}

/* レベル横の上限表示 (小さく・控えめ。転生で伸びる値) */
.level-cap {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* 限界突破: 引き継ぐ融合プロパティの選択リスト */
.lb-pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 8px 0;
}

.lb-pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  text-align: left;
}

.lb-pick-row.on {
  border-color: var(--gold);
}

.lb-pick-row.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lb-pick-name {
  font-weight: 700;
  color: var(--gold-bright);
}

.lb-pick-from {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-dim);
}

/* ---- 限界突破の確認: 文章でなく差分行で見せる ---- */
.lb-sec {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.lb-prop-rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.lb-prop-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gold-bright);
  font-weight: 700;
}

.lb-prop-row.fused {
  color: #7ef0dc;
}

.lb-prop-row.is-new {
  background: linear-gradient(90deg, rgba(126, 240, 220, 0.14), transparent);
  border-radius: 4px;
}

.lb-prop-warn {
  font-size: 12px;
  color: #ffb347;
  font-weight: 700;
}

.chip {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500; /* 色付き背景に太字は潰れて読みづらい (2026-09-03) */
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.chip-new {
  color: #101014;
  background: #7ef0dc;
}

.chip-up {
  color: #101014;
  background: var(--gold-bright);
}

.chip-gone {
  color: #fff;
  background: rgba(220, 60, 60, 0.85);
}

.lb-fodder-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 13px;
}

.lb-fodder-name {
  font-weight: 700;
  min-width: 0;
  flex: 1 1 auto;
}

.lb-fodder-row .chip {
  margin-left: 0;
}

.lb-cost-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 14px;
}

.lb-cost-have {
  font-size: 12px;
  color: var(--text-dim);
}

.lb-sec-sub {
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: 0;
}

.lb-chip-fused {
  color: #7ef0dc;
  border-color: rgba(126, 240, 220, 0.5);
}

/* ---- 融合モーダル: 文章なし・効果を行で見せる ---- */
.fuse-head-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 2px 0 8px;
}

.fuse-rate-chip {
  color: var(--gold-bright);
}

.fuse-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 13px;
}

.fuse-row-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  min-width: 0;
  text-align: left;
}

.fuse-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fuse-row-name {
  font-weight: 700;
  color: #7ef0dc;
}

.fuse-row-head .chip {
  margin-left: auto;
}

/* 効果の説明は折り返して全文見せる (省略しない) */
.fuse-row-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  white-space: normal;
}

.fuse-row-nums {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
}

.fuse-row-nums b {
  color: var(--gold-bright);
}

/* ===== 衝突演出 (限界突破/融合): CollisionFx ===== */
.fx-overlay {
  position: fixed;
  inset: 0;
  z-index: 13200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 16, 0.78);
  animation: fade-in 0.15s ease;
}

.fx-stage {
  position: relative;
  width: 300px;
  height: 170px;
}

.fx-icon {
  position: absolute;
  top: 50%;
  width: 72px;
  height: 72px;
  margin-top: -36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.fx-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
}

.fx-base {
  left: 0;
}
.fx-mat {
  right: 0;
}

.fx-count {
  position: absolute;
  right: -6px;
  bottom: -6px;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: #1f2a44;
  color: #fff;
}

/* 中央へ滑り込む: 衝突点は中央 (左右とも 114px 移動して 72px 幅が接する) */
.phase-slide .fx-base {
  animation: fx-slide-in-l 0.55s cubic-bezier(0.5, 0, 1, 0.6) forwards;
}
.phase-slide .fx-mat {
  animation: fx-slide-in-r 0.55s cubic-bezier(0.5, 0, 1, 0.6) forwards;
}
@keyframes fx-slide-in-l {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(114px);
  }
}
@keyframes fx-slide-in-r {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-114px);
  }
}

/* 衝突後は接したまま震える */
.phase-wait .fx-base {
  transform: translateX(114px);
  animation: fx-jitter 0.18s ease-in-out infinite;
}
.phase-wait .fx-mat {
  transform: translateX(-114px);
  animation: fx-jitter 0.18s ease-in-out infinite reverse;
}
@keyframes fx-jitter {
  0%,
  100% {
    margin-top: -36px;
  }
  50% {
    margin-top: -33px;
  }
}

.fx-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 220, 0.95), rgba(255, 220, 120, 0) 70%);
  pointer-events: none;
  animation: chest-flash-burst 0.4s ease-out forwards;
}

/* ガチャ的な溜め: 回るリング + 成功率チップ */
.fx-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 214, 90, 0) 0%, rgba(255, 214, 90, 0.9) 30%, rgba(255, 214, 90, 0) 60%);
  -webkit-mask: radial-gradient(circle, transparent 54px, #000 56px, #000 60px, transparent 62px);
  mask: radial-gradient(circle, transparent 54px, #000 56px, #000 60px, transparent 62px);
  pointer-events: none;
  animation: fx-spin 0.7s linear infinite;
}
@keyframes fx-spin {
  to {
    transform: rotate(360deg);
  }
}

.fx-rate-chip,
.fx-result-chip {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.fx-rate-chip {
  animation: gacha-pulse 0.9s ease-in-out infinite;
}
.fx-result-chip {
  animation: chest-reward-in 0.3s ease both;
}

/* 成功: 素材がベースへ吸い込まれ、ベースが光る */
.phase-success .fx-base {
  transform: translateX(114px);
  animation: fx-absorb-glow 0.9s ease-out forwards;
}
.phase-success .fx-mat {
  transform: translateX(-114px);
  animation: fx-absorb-in 0.35s ease-in forwards;
}
@keyframes fx-absorb-in {
  to {
    transform: translateX(-150px) scale(0.2);
    opacity: 0;
  }
}
@keyframes fx-absorb-glow {
  0% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
  30% {
    transform: translateX(114px) scale(1.18);
    box-shadow: 0 0 28px 8px rgba(255, 224, 120, 0.85);
  }
  100% {
    transform: translateX(114px) scale(1.05);
    box-shadow: 0 0 14px 3px rgba(255, 224, 120, 0.5);
  }
}
.fx-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 200, 0.95), rgba(255, 244, 200, 0) 70%);
  pointer-events: none;
  animation: chest-flash-burst 0.6s ease-out forwards;
}
.fx-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background-image: url('/images/sprites/treasure-effect.png');
  background-size: 768px 64px;
  image-rendering: pixelated;
  pointer-events: none;
  animation: chest-fx-burst 0.55s steps(12) forwards;
}

/* 失敗: 弾かれて素材が砕け落ちる (灰色に) */
.phase-fail .fx-base {
  transform: translateX(114px);
  animation: fx-repel-l 0.6s ease-out forwards;
}
.phase-fail .fx-mat {
  transform: translateX(-114px);
  animation: fx-shatter 0.7s ease-in forwards;
}
@keyframes fx-repel-l {
  0% {
    transform: translateX(114px);
  }
  30% {
    transform: translateX(86px) rotate(-6deg);
  }
  100% {
    transform: translateX(96px);
  }
}
@keyframes fx-shatter {
  0% {
    transform: translateX(-114px);
    filter: grayscale(0);
    opacity: 1;
  }
  30% {
    transform: translateX(-80px) rotate(10deg);
    filter: grayscale(1);
  }
  100% {
    transform: translateX(-60px) translateY(60px) rotate(40deg);
    filter: grayscale(1);
    opacity: 0;
  }
}

/* 融合: 行の引き継ぎ候補チップ / 結果モーダルの行 */
.fuse-row-carry {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.fuse-result-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 10px;
}

.fuse-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.fuse-result-row.is-lost {
  opacity: 0.6;
}

.fuse-result-name {
  flex: 1;
  font-weight: 600;
}

/* 図鑑: レアリティの点灯式フィルタ (点灯=そのレアリティ色で塗る / 消灯=暗い枠だけ) */
.rarity-toggle {
  display: flex;
  gap: 6px;
}

.rarity-toggle-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
  padding: 3px 6px 2px;
  border-radius: 8px;
  border: 1px solid var(--rarity-common);
  background: transparent;
  color: var(--rarity-common);
  opacity: 0.45;
  cursor: pointer;
  transition:
    opacity 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}

.rarity-toggle-btn.rarity-uncommon {
  border-color: var(--rarity-uncommon);
  color: var(--rarity-uncommon);
}
.rarity-toggle-btn.rarity-rare {
  border-color: var(--rarity-rare);
  color: var(--rarity-rare);
}
.rarity-toggle-btn.rarity-epic {
  border-color: var(--rarity-epic);
  color: var(--rarity-epic);
}
.rarity-toggle-btn.rarity-legend {
  border-color: var(--rarity-legend);
  color: var(--rarity-legend);
}

.rarity-toggle-btn.is-on {
  opacity: 1;
  color: #14100a;
  background: var(--rarity-common);
  box-shadow: 0 0 8px 0 currentColor;
}
.rarity-toggle-btn.is-on.rarity-uncommon {
  background: var(--rarity-uncommon);
  box-shadow: 0 0 8px 0 var(--rarity-uncommon);
}
.rarity-toggle-btn.is-on.rarity-rare {
  background: var(--rarity-rare);
  box-shadow: 0 0 8px 0 var(--rarity-rare);
}
.rarity-toggle-btn.is-on.rarity-epic {
  background: var(--rarity-epic);
  box-shadow: 0 0 8px 0 var(--rarity-epic);
}
.rarity-toggle-btn.is-on.rarity-legend {
  background: var(--rarity-legend);
  box-shadow: 0 0 8px 0 var(--rarity-legend);
}

.rarity-toggle-letter {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
}

.rarity-toggle-count {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
  opacity: 0.85;
}

/* ===== ルーン石 (グレースケール画像 + 効果の傾向色) ===== */
.rune-stone {
  position: relative;
  display: inline-block;
  flex: none;
  isolation: isolate; /* luminosity 合成を石の中だけに閉じる */
}

.rune-stone-color {
  position: absolute;
  inset: 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.rune-stone-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

.rune-stone.e2 {
  filter: drop-shadow(0 0 3px rgba(240, 194, 74, 0.55));
}
.rune-stone.e3 {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

.rune-slot .rune-stone,
.rune-pick-row .rune-stone {
  margin-right: 4px;
}

/* ===== ルーンガチャ v2: 召喚陣 → 落下 → 光の予兆 → めくり (3D) → 大当たりはフラッシュ ===== */
.gacha-stage {
  position: relative;
}

/* 背後で回る召喚陣 (開示が終わるまで) */
.gacha-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  border: 1px dashed rgba(240, 194, 74, 0.35);
  background:
    radial-gradient(circle, rgba(240, 194, 74, 0.12), rgba(240, 194, 74, 0) 65%),
    conic-gradient(
      from 0deg,
      rgba(240, 194, 74, 0) 0%,
      rgba(240, 194, 74, 0.35) 12%,
      rgba(240, 194, 74, 0) 25%,
      rgba(240, 194, 74, 0) 50%,
      rgba(240, 194, 74, 0.35) 62%,
      rgba(240, 194, 74, 0) 75%
    );
  pointer-events: none;
  animation: fx-spin 6s linear infinite;
  z-index: 0;
}

.gacha-circle::after {
  content: 'ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃ';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid rgba(240, 194, 74, 0.25);
  color: rgba(240, 194, 74, 0.35);
  font-size: 11px;
  letter-spacing: 6px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
  overflow: hidden;
}

.gacha-grid {
  position: relative;
  z-index: 1;
}

/* 落下で登場 (タイルごとに遅延) */
.gacha-tile {
  perspective: 500px;
  animation: gacha-drop 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}

@keyframes gacha-drop {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.gacha-flip {
  position: relative;
  width: 100%;
  min-height: 52px;
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.3, 1);
}

.gacha-tile.revealed .gacha-flip {
  transform: rotateY(180deg);
}

.gacha-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.gacha-face.front {
  transform: rotateY(180deg);
  padding: 0 4px;
}

.gacha-face.front .rune-effects {
  flex: 1;
}

/* 開示直前の光の予兆: 白=効果1 / 金=効果2 / 虹=効果3 (色で当たりを先に匂わせる) */
.gacha-beam {
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
  animation: gacha-beam-in 0.5s ease-out both;
}

.gacha-tile.tier-e1 .gacha-beam {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%);
}
.gacha-tile.tier-e2 .gacha-beam {
  background: radial-gradient(circle, rgba(240, 194, 74, 0.6), rgba(240, 194, 74, 0) 70%);
}
.gacha-tile.tier-e3 .gacha-beam {
  background: conic-gradient(from 0deg, #ff5f5f, #ffd25f, #7dff7d, #5fd7ff, #b45fff, #ff5f5f);
  opacity: 0.55;
  animation:
    gacha-beam-in 0.5s ease-out both,
    fx-spin 1.2s linear infinite;
}

@keyframes gacha-beam-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 大当たり: 画面全体が一瞬白む */
.gacha-screenflash {
  position: fixed;
  inset: 0;
  background: #fff;
  pointer-events: none;
  z-index: 12990;
  animation: gacha-screenflash 0.45s ease-out forwards;
}

@keyframes gacha-screenflash {
  from {
    opacity: 0.85;
  }
  to {
    opacity: 0;
  }
}

.gacha-burst {
  left: 50%;
  top: 50%;
  z-index: 3;
}

/* 開示後のまとめ (何個当たったか) */
.gacha-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 10px;
}

/* ルーン枠: 石の右の効果テキストは残り幅を使う (MarqueeText は contain:inline-size で固有幅0のため) */
.rune-slot .rune-effects {
  flex: 1;
  min-width: 0;
  text-align: left;
}

/* ルーンガチャLvの説明モーダル */
.shop-item-name .btn-help {
  margin-left: 4px;
}

.gacha-help-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 10px;
}

.gacha-help-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.gacha-help-name {
  flex: 1;
  font-weight: 600;
}

.gacha-help-val {
  font-weight: 700;
  color: var(--gold-bright);
  white-space: nowrap;
}

.gacha-help-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

/* キラキラ用スプライトは最終コマの後に先頭コマへ戻らない (repeat だと最初の星が残る) */
.chest-fx,
.fx-burst {
  background-repeat: no-repeat;
}

/* ガチャLvヘルプ v2: Lv行 (改行させない) と Lv一覧 */
.gacha-lv-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  vertical-align: middle;
}

.gacha-help-sec {
  margin-top: 10px;
}

.gacha-help-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0 8px;
  font-size: 12px;
}

.gacha-help-list-head,
.gacha-help-list-row {
  display: grid;
  grid-template-columns: 44px 84px 1fr;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
}

.gacha-help-list-head {
  color: var(--text-dim);
  font-size: 10px;
}

.gacha-help-list-row {
  background: rgba(0, 0, 0, 0.25);
}

.gacha-help-list-row.done {
  opacity: 0.55;
}

.gacha-help-list-row.next {
  outline: 1px solid var(--gold);
}

.gacha-help-lv {
  font-weight: 700;
  color: var(--gold-bright);
}

.gacha-help-need {
  font-weight: 700;
  white-space: nowrap;
}

.gacha-help-ups {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}

.gacha-help-more {
  width: 100%;
  margin-bottom: 8px;
}

/* 今のLv → 次のLv の見出しは目立たせる */
.gacha-help-lv-head {
  font-size: 15px;
  color: var(--gold-bright);
}

/* チェック付きの設定行 (自動分解など)。長文のボタンにしない */
.opt-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  text-align: left;
}

.opt-row input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--gold);
  flex: none;
}

.opt-row.on {
  border-color: var(--gold);
}

.opt-row.disabled {
  opacity: 0.5;
  cursor: default;
}

.opt-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.opt-title {
  font-weight: 700;
  font-size: 13px;
}

.opt-sub {
  font-size: 11px;
  color: var(--text-dim);
}

/* オート + その説明「？」をひと組に */
.skill-auto-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ===== タイトル (ログイン) 画面 ===== */
.title-screen {
  min-height: calc(100vh - 170px); /* .app の余白ぶんを引いてスクロールバーを出さない */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
  text-align: center;
}

.title-logo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-sub {
  font-family: var(--font-title);
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--gold);
  margin-top: 2px;
}

/* メグランとは別ゲームであることの注記 (タイトル直下・控えめに) */
.title-indep {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-dim, #a09884);
  text-align: center;
}

.title-main {
  font-family: var(--font-title);
  font-size: 64px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(240, 194, 74, 0.35);
}

.title-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
}

.title-google {
  min-height: 44px;
  display: flex;
  justify-content: center;
}

.title-guest {
  width: 280px;
  /* 上のGoogleログインの注記と、この下の注記を混ぜないよう間をあける */
  margin-top: 32px;
}

.title-note-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

/* .chip の margin-left:auto (行内で右寄せ用) を打ち消して中央揃えに */
.title-note-chips .chip {
  margin-left: 0;
}

.title-soon {
  font-size: 12px;
  color: var(--text-dim);
}

.settings-email {
  font-size: 12px;
  color: var(--text-dim);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-google {
  margin: 8px auto;
}

/* タイトルのゲーム紹介 (キャッチコピー + 画面写真の横スクロール) */
.title-intro {
  width: min(560px, 100%);
  margin: 28px auto 0;
  text-align: center;
}

.title-intro-catch {
  font-family: var(--font-title);
  font-size: 16px; /* 375px 幅で1行に収める */
  white-space: nowrap;
  color: var(--gold-bright);
  letter-spacing: 0.04em;
}

.title-intro-sub {
  margin-top: 4px;
  font-size: 12px;
  color: #d9cdb5; /* 暗い背景で読めるよう、灰色より明るく */
}

.title-intro-shots {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 4px 8px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.title-shot {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* 画像は高さだけ揃え、幅は縦横比なり (潰さない) */
.title-shot img {
  height: 300px;
  width: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--panel-edge);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.title-shot figcaption {
  font-size: 11px;
  color: #d9cdb5;
}

/* 独立ゲームの注記も同じ明るさに */
.title-indep {
  color: #cfc3ab;
}

.title-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 11px;
}

/* 各項目の中では折り返さない (項目単位で改行する) */
.title-links a {
  color: #cfc3ab;
  white-space: nowrap;
}

/* 外部バナー: 高さを揃えて横並び (幅は縦横比なり)。狭ければ縦に */
.title-banners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.title-banner {
  display: inline-flex;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--panel-edge);
}

.title-banner img {
  height: 56px;
  width: auto;
  display: block;
}

.title-copyright {
  margin-top: 16px;
  font-size: 11px;
  color: #cfc3ab;
  text-align: center;
}

/* ===== 背景テクスチャ (ダンジョン風・明るめのシームレスタイル)。ゆっくり斜めに流す ===== */
/* タイル1周 (512px) ぶんだけ transform で動かしてループ = 継ぎ目なし。GPU 合成なので軽い。
   2026-09-16: 流れている間は板が画面の右・下へ最大 512px はみ出し、iPhone ではそのぶんページが広がったと
   みなされて下の固定メニューが浮いていた (9/8 の修正は止まっている位置しか見ていなかった)。
   → 画面ぴったりの枠 (.bg-texture) で切り抜き、中の板 (.bg-texture-drift) だけを流す。枠は index.html に置く */
.bg-texture {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.bg-texture-drift {
  position: absolute;
  /* 流れる方向 (+512px) に動いても上端・左端が画面に入らないよう、周りに2周ぶんの余白を取る */
  left: -1024px;
  top: -1024px;
  width: calc(100% + 2048px);
  height: calc(100% + 2048px);
  background: url('/images/ui/bg-dungeon.png') repeat;
  background-size: 512px 512px;
  animation: bg-drift 48s linear infinite;
}

/* テクスチャの上に薄い暗幕 + 従来の上下グラデ (パネル越しに「薄く見える」濃さに調整) */
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212, 169, 78, 0.08), transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 110%, rgba(0, 0, 0, 0.55), transparent 60%), rgba(18, 14, 10, 0.58);
  pointer-events: none;
}

@keyframes bg-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(512px, 512px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-texture-drift {
    animation: none;
  }
}

/* サイトロゴ (logo.svg をマスクに使い、色は CSS で決める) */
.title-mark {
  width: 132px;
  height: 130px;
  margin: 0 auto 14px;
  background: var(--gold-bright);
  -webkit-mask: url('/images/ui/logo.svg') center / contain no-repeat;
  mask: url('/images/ui/logo.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(240, 194, 74, 0.35));
}

/* 挑戦回数バッジ (数字だけ。押すと説明モーダル) */
.attempts-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--panel-edge);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  margin-right: 6px;
}

.attempts-badge b {
  color: var(--gold-bright);
  font-size: 15px;
  font-weight: 700;
}

/* 最大値とストックは現在値より小さく (現在値が主役) */
.attempts-max {
  font-size: 11px;
}

.attempts-badge.compact {
  padding: 2px 8px;
  font-size: 11px;
  margin-right: 0;
  /* バトル上部は文字の大きさが混ざるので、ベースラインではなく高さの中央でそろえる (2026-09-19 専務) */
  align-items: center;
  line-height: 1.1;
}
.attempts-badge.compact .attempts-icon,
.attempts-badge.compact b,
.attempts-badge.compact .attempts-max,
.attempts-badge.compact .attempts-stock {
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
}

.attempts-badge.compact b {
  font-size: 13px;
}

.attempts-badge.empty b {
  color: #f0566a;
}

/* 挑戦回数バッジのストック表示 / ショップの補足チップ */
.attempts-stock {
  margin-left: 4px;
  font-size: 10px;
  color: #7ef0dc;
}

.shop-item-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
/* 横のボタンに合わせて高さが伸びても、チップの文字は縦のまん中に (2026-09-24) */
.shop-item-chips > .chip {
  display: inline-flex;
  align-items: center;
}

/* ---- 折り返し方針 (2026-09-04) ----
   ラベル・チップ・ボタンの文字を途中で折らない。横に収まらない時は行全体を要素単位で折り返す
   (スマホで「通知ONの特 典」のように単語の途中で改行されるのを防ぐ) */
.btn,
.chip,
.gacha-help-name,
.gacha-help-val,
.settings-row > span:first-child,
.panel-title,
.nav-item {
  white-space: nowrap;
}

.gacha-help-row,
.settings-row,
.settings-value,
.confirm-actions {
  flex-wrap: wrap;
}

.gacha-help-row {
  row-gap: 4px;
}

.gacha-help-name {
  flex: 1 0 auto;
}

.settings-row > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---- スマホ幅: ホーム下部のダンジョンバーを1行に収める ---- */
.dungeon-bar-switch,
.char-job {
  white-space: nowrap;
}

.char-job {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 480px) {
  .dungeon-float-bar {
    gap: 6px;
    padding: 8px 8px;
  }
  .dungeon-bar-info {
    min-width: 64px;
  }
  .btn-sortie {
    padding: 10px 14px;
    font-size: 15px;
    letter-spacing: 0.06em;
  }
  .attempts-badge {
    margin-right: 0;
    padding: 4px 7px;
  }
  .run-quality-info {
    font-size: 9px;
  }
}

/* ---- 出撃バー: 要素の配置 (グリッド) と ▼▲ 開閉 ---- */
.dungeon-float-bar > .dungeon-bar-info {
  grid-area: info;
}
.dungeon-float-bar > .run-quality-info {
  grid-area: quality;
}
.dungeon-float-bar > .btn-help {
  grid-area: help;
}
.dungeon-float-bar > .attempts-badge {
  grid-area: attempts;
}
.dungeon-float-bar > .btn-sortie {
  grid-area: sortie;
}
.dungeon-float-bar > .btn-skip {
  grid-area: skip;
  justify-self: end;
}
/* 開閉タブ: バーの上辺から右上に飛び出す「つまみ (タブハンドル)」 */
.dungeon-bar-toggle {
  position: absolute;
  /* 文字入りにしたぶん背を高く (2026-09-20 専務) */
  top: -34px;
  right: 12px;
  height: 34px;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--panel-edge);
  border-bottom: 0;
  background: linear-gradient(180deg, #3a2e1d, #322718);
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.35);
  color: var(--gold);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* 縮小時: バー本体は消してプルタブ (▲) だけ残す */
.dungeon-float-bar.collapsed {
  display: block;
  height: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.dungeon-float-bar.collapsed > .dungeon-bar-info,
.dungeon-float-bar.collapsed > .run-quality-info,
.dungeon-float-bar.collapsed > .btn-help,
.dungeon-float-bar.collapsed > .attempts-badge,
.dungeon-float-bar.collapsed > .btn-skip,
.dungeon-float-bar.collapsed > .btn-sortie {
  display: none;
}

@media (max-width: 480px) {
  /* スマホ: 1行目=ダンジョン名+▼ / 2行目=周回情報・挑戦回数・出撃 */
  .dungeon-float-bar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      'info info info attempts'
      'quality help skip sortie';
    row-gap: 8px;
  }
  .dungeon-float-bar > .attempts-badge {
    justify-self: end;
  }
  .btn-sortie {
    padding: 14px 22px;
    font-size: 16px;
  }
  .app {
    padding-bottom: 190px; /* 2行になった出撃バー + メインメニュー */
  }

  /* キャラ見出し: 枠を画像サイズに寄せ、ジョブ行は画像の下に全幅で */
  .char-layout {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'avatar info buddy'
      'job job job';
    column-gap: 8px;
  }
  .char-avatar-frame {
    width: 84px;
    min-height: 96px;
    padding: 4px 2px 4px;
  }
  .char-avatar-full {
    height: 84px;
  }
  .char-name {
    font-size: 18px;
  }
  .buddy-plus {
    width: 40px;
    height: 40px;
  }
}

/* バストアップ: テキスト窓の上に重ねて立たせる (下端は窓の中に少し潜る) */

/* 設定の「隊長の会話を見直す」 */

/* ---- ストーリー会話シーン (2026-09-04) ----
   上: バトルと同じ舞台枠 (.arena を流用、接地) / 中: 話し手の立ち絵 / 下: テキスト窓 (高さ固定) */
.story-overlay {
  position: fixed;
  inset: 0;
  z-index: 14000;
  background: #16100a;
  display: flex;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  animation: storyFade 0.3s ease;
}

@keyframes storyFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.story-stage {
  position: relative;
  width: 100%;
  max-width: 768px;
  display: flex;
  flex-direction: column;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 10px calc(14px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.story-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 40px;
  flex-shrink: 0;
}

.story-chapter {
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--gold-bright);
  white-space: nowrap;
}

/* 舞台枠: バトル画面の .arena と同じ見た目・高さ。中身は左右2列で接地 */
.story-arena-box {
  flex-shrink: 0;
  height: 250px;
  padding: 24px 12px 10px;
}

.story-arena-row {
  position: relative;
  z-index: 0; /* 後列 (z-index 負) が舞台の背景の裏に消えないよう、この中で重ね順を閉じる */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  align-items: end;
}

.story-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.story-side-cast {
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}

/* 先頭が前 (手前)、2人目以降は少し後ろへずらして重ねる */
.story-cast-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.story-cast-slot.slot-1 {
  margin-left: -24px;
  transform: translateY(-8px) scale(0.92);
  z-index: -1;
  filter: brightness(0.85);
}

.story-cast-slot.slot-2 {
  margin-left: -24px;
  transform: translateY(-14px) scale(0.86);
  z-index: -2;
  filter: brightness(0.75);
}

.story-cast-slot.speaking .story-sprite {
  animation: storyBob 0.6s ease;
}

@keyframes storyBob {
  30% {
    transform: translateY(-6px);
  }
}

.story-cast-slot.speaking .story-sprite.mirrored {
  animation: storyBobMirror 0.6s ease;
}

@keyframes storyBobMirror {
  30% {
    transform: scaleX(-1) translateY(-6px);
  }
}

.story-sprite {
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
}

.story-sprite.mirrored {
  transform: scaleX(-1);
}

.story-sprite-name {
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

/* 舞台枠の下: 立ち絵とテキスト窓 */
.story-lower {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

/* 立ち絵: 固定サイズの箱 (幅と縦横比を決め打ち) に下揃えで収め、画像読込で位置が動かないようにする。
   箱の下端をテキスト窓の上辺より下げて、腰から下を窓の裏に沈める */
.story-standee-wrap {
  position: absolute;
  right: -14%;
  bottom: calc(2vh + 14px + env(safe-area-inset-bottom, 0px));
  height: 66vh; /* 画面の高さ基準。頭が舞台枠の下端に少しかかり、腰から下はテキスト窓の裏 */
  aspect-ratio: 3 / 5;
  width: auto;
  z-index: 1;
  pointer-events: none;
  animation: storyFade 0.25s ease;
  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
}

/* 2人並び: 上のドット絵と同じ左右関係。近づけすぎないよう幅は画面の半分弱、外側へ少し逃がす */
.story-standee-wrap.paired {
  height: 52vh; /* 1人の時 (66vh) より少し小さく。頭は舞台枠の下に来る */
  width: auto;
  aspect-ratio: 3 / 5;
}

.story-standee-wrap.pos-left {
  left: -14%;
  right: auto;
}

.story-standee-wrap.pos-right {
  right: -14%;
}

.story-standee-wrap.pos-center {
  right: -14%;
}

/* 2人並びは中央寄せ: 2人の間隔は最大でも立ち絵の幅 (52vh×3/5) の80%。
   画面が狭い (スマホ) 時は従来どおり端に寄る (-14%) */
.story-standee-wrap.paired.pos-left {
  left: max(-14%, calc(50% - 1.4 * (52vh * 3 / 5)));
}

.story-standee-wrap.paired.pos-right {
  right: max(-14%, calc(50% - 1.4 * (52vh * 3 / 5)));
}

/* スマホ (幅600px以下): 立ち絵の箱 (52vh×3/5 ≒ 幅の2/3) が2つ並ばないため -14% の端寄せだと両端が見切れて離れすぎる。
   端寄せをやめ、2つの箱を中央で少し重ねる (0.85W)。体は箱の中央寄りなので見た目は程よい間隔になる (2026-09-07) */
@media (max-width: 600px) {
  .story-standee-wrap.paired.pos-left {
    left: calc(50% - 0.85 * (52vh * 3 / 5));
  }

  .story-standee-wrap.paired.pos-right {
    right: calc(50% - 0.85 * (52vh * 3 / 5));
  }
}

/* 話していない方は暗く・少し奥へ */
.story-standee-wrap.idle {
  filter: brightness(0.55);
  z-index: 0;
}

.story-standee-wrap.speaking {
  z-index: 1;
}

.story-standee {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: center bottom; /* 拡大縮小は足元を基準に */
  display: block;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.7));
}

.story-box {
  position: relative;
  z-index: 3;
  height: 26vh;
  min-height: 170px;
  overflow-y: auto;
  padding: 16px 16px 24px;
  border-radius: 12px;
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, rgba(58, 46, 29, 0.96), rgba(36, 27, 16, 0.96));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
}

.story-box.narration {
  border-color: rgba(212, 169, 78, 0.5);
  background: rgba(10, 7, 4, 0.82);
}

.story-box.narration .story-text {
  text-align: center;
  color: var(--text-dim);
}

.story-name {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: -30px 0 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gold);
  color: #241b10;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.story-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  opacity: 0.85;
}

.story-text {
  font-size: 15px;
  line-height: 1.75;
  min-height: 3.5em;
  white-space: pre-wrap;
}

.story-outro {
  display: flex;
  margin-top: 8px;
}

.story-outro .chip {
  margin-left: 0;
}

.story-next {
  position: absolute;
  right: 14px;
  bottom: 6px;
  font-size: 11px;
  color: var(--gold);
  animation: storyBlink 1.2s ease-in-out infinite;
}

@keyframes storyBlink {
  50% {
    opacity: 0.35;
  }
}

@media (max-width: 480px) {
  .story-arena-box {
    height: 220px;
  }
}

/* 図鑑 → ストーリー一覧 */
.story-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.story-row {
  display: grid;
  grid-template-columns: 40px auto minmax(0, 1fr) auto;
  grid-template-areas:
    'face no title chip'
    'face cast cast cast';
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--panel-edge);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.story-row.locked {
  opacity: 0.55;
  cursor: default;
}

.story-row-face {
  grid-area: face;
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: top;
  border-radius: 50%; /* 真円 */
  border: 1px solid var(--gold);
}

.story-row.locked .story-row-face {
  filter: grayscale(1) brightness(0.5);
}

.story-row-no {
  grid-area: no;
  font-family: var(--font-title);
  color: var(--gold-bright);
  white-space: nowrap;
}

.story-row-title {
  grid-area: title;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-row .chip {
  grid-area: chip;
  margin-left: 0;
}

.story-row-cast {
  grid-area: cast;
  font-size: 11px;
  color: var(--text-dim);
}

.tab-badge,
.bottom-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e0455a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.tab-badge {
  margin-left: 4px;
}

.bottom-nav-item {
  position: relative;
}

.bottom-nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 22px);
}

/* ジョブ変更ボタンのバッジ (開拓者のまま別ジョブを解放済み)。ボタン右上に少しはみ出す */
.job-change-btn {
  position: relative;
}

.bottom-nav-badge.job-badge {
  position: absolute;
  top: -7px;
  right: -7px;
}

/* 開始時の登録 (アバター・名前) */
.onboarding-panel {
  max-width: 560px;
  margin: 0 auto;
}

.onboarding-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.onboarding-avatar {
  height: 72px;
  width: auto;
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 4px 8px;
}

.onboarding-preview {
  flex-wrap: wrap;
}

.onboarding-preview .name-input {
  flex: 1 1 120px;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
}

.onboarding-random {
  white-space: nowrap;
}

.onboarding-grid,
.avatar-grid-all {
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 6px;
  max-height: 48vh;
  overflow-y: auto;
  padding: 2px;
}

.onboarding-grid .avatar-choice,
.avatar-grid-all .avatar-choice {
  padding: 6px 2px;
}

.onboarding-grid .avatar-choice img,
.avatar-grid-all .avatar-choice img {
  height: 44px;
}

.onboarding-submit {
  width: 100%;
  margin-top: 10px;
}

/* 設定メニュー: クレジットの下のメグルランド案内 (自社PR) */
.settings-megu > span:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: normal;
  flex: 1;
  min-width: 0;
}

.settings-pr {
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 4px;
}

.settings-megu-desc {
  font-size: 11px;
  color: var(--text-dim);
}

.credits-megu-link {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
}

/* 自社PR行: 見出しの下にバナー画像 (メグランの OGP) を全幅で。押せる見た目にする */
.settings-megu {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.megu-banner {
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--panel-edge);
  transition:
    transform 0.06s ease,
    filter 0.12s ease;
}

/* ポチゲーポータルのバナーは横長なので、幅を抑えて左寄せ */
.pochi-banner {
  max-width: 360px;
}

.megu-banner:hover {
  filter: brightness(1.06);
}

.megu-banner:active {
  transform: translateY(1px);
}

.megu-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* メグラン連携: 購入済みプレミアムアバター */
.premium-avatars {
  margin-bottom: 10px;
}

.premium-avatars-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 6px;
}

.premium-avatars-label .chip {
  margin-left: 0;
}

.premium-grid {
  max-height: none;
  overflow: visible;
}

.premium-grid .avatar-choice {
  border-color: var(--gold);
}

/* 通知ヘルプ (改行つきの短い説明2つ) */
.notify-help-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 12px;
  font-size: 13px;
  line-height: 1.6;
}

.notify-help-lines > div {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

/* 通知ONの促し: 端末別の手順 */
.notify-steps {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

/* ---- スキップ周回 (2026-09-05) ---- */
.btn-skip {
  white-space: nowrap;
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* 初回の装備チュートリアル: 「おすすめ装備」ボタンの下に出る矢印つきフロート (body直下ポータル・fixed)。上下に揺れて目立たせる */
.equip-tut-float {
  position: fixed;
  z-index: 13200;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(260px, calc(100vw - 16px));
  padding: 9px 14px;
  border-radius: 8px;
  border: 2px solid var(--gold-bright);
  background: linear-gradient(180deg, var(--panel), var(--panel-inner));
  color: var(--gold-bright);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  box-shadow:
    0 0 0 3px rgba(240, 194, 74, 0.25),
    0 6px 20px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: equipTutBounce 0.9s ease-in-out infinite;
}

.equip-tut-arrow {
  display: block;
  font-size: 18px;
  line-height: 1;
  margin: -4px 0 2px;
}

@keyframes equipTutBounce {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 8px);
  }
}

/* 誘導中のボタンは光らせる */
.equip-tut-target {
  box-shadow: 0 0 0 3px rgba(240, 194, 74, 0.6);
  animation: equipTutGlow 1.2s ease-in-out infinite;
}

@keyframes equipTutGlow {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(240, 194, 74, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(240, 194, 74, 0.85);
  }
}

/* 未制覇でロック中のスキップ (押すと案内フロート。disabled にしないのはクリックを受けるため) */
.btn-skip.locked {
  opacity: 0.45;
}

.btn-skip-count {
  margin-left: 4px;
  font-size: 11px;
  color: var(--text-dim);
}

.skip-presets {
  display: flex;
  gap: 6px;
  margin: 8px 0 10px;
}

.settings-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
  padding: 4px 4px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.skip-overlay {
  position: fixed;
  inset: 0;
  z-index: 13000;
  background: rgba(8, 5, 2, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(40px + env(safe-area-inset-top, 0px)) 10px 0;
}

.skip-stage {
  width: 100%;
  max-width: 768px;
}

.skip-arena {
  position: relative;
  height: 260px;
  overflow: hidden;
}

.skip-sprite {
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
}

.skip-sprite.mirrored {
  transform: scaleX(-1);
}

/* 敵: 右側に重ねて並べる (雑魚4体+ボス)。消滅は一斉 */
.skip-enemies {
  position: absolute;
  right: 6%;
  bottom: 14px;
  display: flex;
  align-items: flex-end;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.skip-enemy {
  position: relative;
  margin-left: -34px;
}

.skip-enemy .skip-sprite {
  transform: scale(0.85);
  transform-origin: center bottom;
}

.skip-enemy .skip-sprite.mirrored {
  transform: scaleX(-1) scale(0.85);
}

.skip-enemy.boss {
  margin-left: -20px;
}

.skip-enemies.phase-vanish,
.skip-enemies.phase-rain,
.skip-enemies.phase-result {
  opacity: 0;
  transform: scale(1.1);
}

.skip-fx {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 10;
}

/* 自分: 溜め (左へ少し) → 右端へ駆け抜け */
.skip-player {
  position: absolute;
  left: 16%;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 20;
  transition: transform 0.45s cubic-bezier(0.3, 0, 0.7, 1);
}

.skip-player.phase-charge {
  transform: translateX(-26px);
  transition-duration: 0.2s;
}

.skip-player.phase-dash,
.skip-player.phase-slash {
  transform: translateX(min(58vw, 460px));
  transition-duration: 0.13s;
  transition-timing-function: cubic-bezier(0.1, 0.8, 0.2, 1);
}

.skip-player.phase-vanish,
.skip-player.phase-rain,
.skip-player.phase-result {
  transform: translateX(min(58vw, 460px));
}

/* 連携アバターのうち a4 以外は、踏み込まずその場で構えるモーションなので駆け抜けさせない (2026-09-16) */
.skip-player.in-place.phase-charge,
.skip-player.in-place.phase-dash,
.skip-player.in-place.phase-slash,
.skip-player.in-place.phase-vanish,
.skip-player.in-place.phase-rain,
.skip-player.in-place.phase-result {
  transform: none;
}

.skip-name {
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

/* 宝箱の雨 (本家探検隊の結果演出の5倍速) */
.skip-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

.skip-rain-item {
  position: absolute;
  bottom: 14px; /* 敵の接地位置 (.skip-enemies の bottom) と同じ高さで止まる */
  width: 36px;
  height: 36px;
  transform: translateY(-340px);
  animation: skipRainFall 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.skip-rain-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: auto;
  image-rendering: pixelated;
  /* 着地後: 中身が飛び出したら箱は消える */
  animation: skipRainBoxGone 0.15s ease 0.45s forwards;
}

.skip-rain-icon {
  position: absolute;
  left: 2px;
  top: 4px;
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0;
  animation: skipRainIconPop 0.5s ease forwards;
}

@keyframes skipRainBoxGone {
  to {
    opacity: 0;
  }
}

@keyframes skipRainIconPop {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.4);
  }
  25% {
    opacity: 1;
    transform: translateY(-26px) scale(1.15);
  }
  70% {
    opacity: 1;
    transform: translateY(-34px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-46px) scale(0.9);
  }
}

.skip-drop-counts {
  justify-content: center;
}

@keyframes skipRainFall {
  to {
    transform: translateY(0);
  }
}

.skip-caption {
  position: absolute;
  top: 8px;
  left: 10px;
  display: flex;
  gap: 6px;
  z-index: 40;
}

.skip-caption .chip {
  margin-left: 0;
}

.skip-result-panel {
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---- ヘルプの図解 (実物の部品 + 赤い枠) ---- */
.help-panel {
  max-width: 420px;
}

.help-illust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 10px;
}

.help-step {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.help-step .chip {
  margin-left: 0;
}

.help-mark {
  position: relative;
  padding: 18px 6px 6px;
  border: 2px solid #e0455a;
  border-radius: 10px;
}

.help-mark-label {
  position: absolute;
  top: -10px;
  left: 10px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e0455a;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
}

/* 注目箇所だけをさらに赤く縁取る */
.mark-affix .item-affixes,
.mark-fused .affix-line.fused,
.mark-prop .series-prop-line,
.mark-name .item-name,
.mark-plus .item-plus {
  outline: 2px solid #e0455a;
  outline-offset: 3px;
  border-radius: 4px;
}

.help-sample {
  pointer-events: none;
}

.help-buttons .btn {
  opacity: 1;
}

.help-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px;
  align-items: center;
}

.help-plus,
.help-arrow {
  text-align: center;
  font-size: 20px;
  color: var(--gold);
}

.help-runes {
  display: flex;
  justify-content: space-around;
  gap: 8px;
}

.help-rune {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
}

.help-rune-slots {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.help-slot {
  pointer-events: none;
}

.help-panel .fuse-head-row .chip {
  white-space: normal;
  text-align: left;
  line-height: 1.5;
}

@media (max-width: 480px) {
  /* スマホ幅ではベースと素材を縦に並べる (横だと名前やプロパティが潰れる) */
  .help-pair {
    grid-template-columns: 1fr;
  }
}

/* 吹き出しの差分行 (品質上限など) */
.hint-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hint-row .chip {
  margin-left: 0;
}

.help-illust .gacha-help-row {
  flex-wrap: wrap;
  row-gap: 4px;
}

/* ---- ヒーローフィギュア (2026-09-06)。額縁はメグランの hx-frame と同じ多重インセットの立体マット ---- */
.fig-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fbf2db, #efe0bd);
  border: 1px solid #cdb486;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 4px #fffdf6,
    inset 0 0 0 5px #dcc596,
    inset 0 2px 6px rgba(107, 62, 38, 0.12);
}

.fig-frame img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  image-rendering: pixelated;
}

.fig-frame--sm {
  width: 56px;
  flex: none;
  border-radius: 9px;
  box-shadow:
    inset 0 0 0 3px #fffdf6,
    inset 0 0 0 4px #dcc596;
}

/* 未所持: シルエット */
.fig-frame--dim {
  background: linear-gradient(135deg, #3a3129, #2a231d);
  border-color: #4a3f34;
  box-shadow:
    inset 0 0 0 4px #33291f,
    inset 0 0 0 5px #4a3f34;
}

.fig-frame--dim img {
  filter: brightness(0) opacity(0.55);
}

/* レアリティで額縁の外枠色 */
.fig-frame.rarity-uncommon {
  border-color: var(--rarity-uncommon);
}

.fig-frame.rarity-rare {
  border-color: var(--rarity-rare);
}

.fig-frame.rarity-epic {
  border-color: var(--rarity-epic);
  box-shadow:
    inset 0 0 0 4px #fffdf6,
    inset 0 0 0 5px var(--rarity-epic),
    0 0 6px rgba(176, 79, 232, 0.35);
}

.fig-frame.rarity-legend {
  border-color: var(--rarity-legend);
  box-shadow:
    inset 0 0 0 4px #fffdf6,
    inset 0 0 0 5px var(--rarity-legend),
    0 0 8px rgba(240, 194, 74, 0.5);
}

.fig-frame--dim.rarity-epic,
.fig-frame--dim.rarity-legend {
  box-shadow:
    inset 0 0 0 4px #33291f,
    inset 0 0 0 5px #4a3f34;
}

.fig-frame__lv {
  position: absolute;
  left: 4px;
  bottom: 4px;
  background: #6b3e26;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 6px;
  line-height: 1.5;
}

.fig-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.fig-totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.fig-totals__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  background: none;
  border: none;
  color: var(--gold);
  font-family: var(--font-title);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.fig-totals__arrow { margin-left: auto; color: var(--text-dim); }
.fig-totals__list { text-align: left; }
.fig-totals__list .affix-line { font-size: 12px; }

.fig-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 棚: 横に並ぶ額縁。段ごとに木の板 */
.fig-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px 8px;
  padding: 6px 4px 10px;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 118px,
    rgba(120, 82, 46, 0.55) 118px 126px,
    rgba(60, 40, 22, 0.6) 126px 130px,
    transparent 130px 134px
  );
  border-radius: 8px;
}

.fig-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-body);
  min-width: 0;
}

.fig-card__name {
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
}

.fig-card.locked .fig-card__name {
  color: var(--text-dim);
}

.fig-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

/* 上: 大きなドット絵 (4倍 256px。狭幅は3倍) を台座に載せる */
.fig-detail__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 4px;
}

.fig-detail__img {
  width: 256px;
  height: 256px;
  image-rendering: pixelated;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.55));
}

.fig-detail__stage.is-locked .fig-detail__img {
  filter: brightness(0) opacity(0.82);
}

.fig-detail__ped {
  --ped-w: 260px;
}

.fig-detail__stage.is-locked .hx-ped__img {
  filter: brightness(0) opacity(0.45);
}

@media (max-width: 420px) {
  .fig-detail__img {
    width: 192px;
    height: 192px;
  }

  .fig-detail__ped {
    --ped-w: 200px;
  }
}

.fig-detail__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  align-items: center;
  text-align: center;
}

.fig-detail__body .fig-effect {
  align-items: center;
}

.fig-effect {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.fig-effect__label {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.fig-effect .chip {
  margin-left: 0;
  white-space: normal;
  text-align: left;
}

.fig-wiki {
  font-size: 12px;
}

/* ガチャの表面 */
.fig-face {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

/* 結果行 (NEW / Lv / 欠片) は常に3行目。空でも高さを確保して段を揃える */
.fig-face__status {
  min-height: 18px;
  display: flex;
  align-items: center;
}

.fig-face__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.fig-rates {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.fig-rates .rarity-badge.locked {
  opacity: 0.45;
}

.fig-help-head,
.fig-help-row {
  grid-template-columns: 58px 60px repeat(5, 1fr);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.fig-help-row .gacha-help-lv {
  white-space: nowrap;
}

.fig-gacha-status {
  justify-content: flex-end;
  margin-top: -4px;
}

.fig-help-locked {
  color: var(--text-dim);
}

/* ---- フィギュア棚 v2: メグランの棚と同じ「板の上に台座つきで立つ」(名前は頭の上・3列/段) ---- */
.figure-shelf {
  max-width: 720px;
  margin: 0 auto;
}

.figure-shelf__unit {
  margin-bottom: 10px;
}

.figure-shelf__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  /* 棚板画像の上面帯 (y=4..84/240) の中央に台座の底面楕円の中心を置く (% は幅基準) */
  margin-bottom: calc(-3.44% - 13px);
  position: relative;
  z-index: 1;
}

.figure-shelf__board {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.figure-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px 4px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--text);
  min-width: 0;
}

.figure-stage:hover .figure-stage__img {
  transform: translateY(-2px);
}

.figure-stage__name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--gold-bright);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figure-stage.is-locked .figure-stage__name {
  color: var(--text-dim);
  font-weight: 400;
}

/* 64×64 ドット絵は整数倍 (PC 2倍 / 狭幅 1.5倍) */
.figure-stage__img {
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.55));
  transition: transform 0.15s ease;
}

.figure-stage.is-locked .figure-stage__img {
  filter: brightness(0) opacity(0.82) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35));
}

.figure-stage__lv {
  position: absolute;
  right: 10%;
  bottom: 6%;
  z-index: 2;
  background: #6b3e26;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 6px;
  line-height: 1.5;
}

/* 台座 (メグランの hx-ped と同じ位置決め): 要素の下端 = 台座の底 = 接地点 */
.hx-ped {
  --ped-w: 134px;
  position: relative;
  display: block;
  width: var(--ped-w);
  margin: calc(var(--ped-w) * -0.168) auto 0;
  z-index: 0;
  pointer-events: none;
}

.hx-ped__img {
  display: block;
  width: 100%;
  height: auto;
}

.figure-stage.is-locked .hx-ped__img {
  filter: brightness(0) opacity(0.45);
}

@media (max-width: 600px) {
  .figure-shelf__row {
    padding: 0 4%;
    margin-bottom: calc(-3.44% - 9px);
  }

  .figure-stage__img {
    width: 96px;
    height: 96px;
  }

  .hx-ped {
    --ped-w: 100px;
  }
}

/* 図鑑のタブは4つになったので狭幅では折り返す */
.codex-tabs {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.panel-title-row {
  flex-wrap: wrap;
  gap: 6px;
}

/* フィギュアガチャの説明: 2列の表 (強調チップは使わない) */
.fig-rules {
  margin-top: 6px;
}

.fig-rule-row {
  grid-template-columns: 84px 1fr;
  text-align: left;
  font-size: 12px;
}

.fig-rule-row > span:first-child {
  color: var(--text-dim);
  white-space: nowrap;
}

/* ---- スクロールバー (ゲーム全般): OS標準の太いバーを出さない。細く・軌道は透明・つまみは金の薄色 ---- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 169, 78, 0.35) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(212, 169, 78, 0.35);
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 169, 78, 0.6);
}

/* モーダル類は横スクロールを出さない (中身は幅に収める) */
.confirm-panel,
.skip-result-panel,
.codex-detail,
.equip-picker,
.refine-rows,
.dungeon-select-list,
.replay-log,
.avatar-grid-all {
  overflow-x: hidden;
}

/* 排出率の表は狭幅で詰める */
.fig-help-head,
.fig-help-row {
  min-width: 0;
}

.fig-help-head > span,
.fig-help-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .fig-help-head,
  .fig-help-row {
    grid-template-columns: 44px 52px repeat(5, 1fr);
    gap: 3px;
    padding: 4px 4px;
    font-size: 10px;
  }
}

/* お知らせ (テスト購入の付与など): エラー枠の色違い */
.error-box.notice {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(212, 169, 78, 0.12);
  cursor: pointer;
}

/* ---- 画面中央のフロートメッセージ (通知・エラー共通。タップ or 4秒で消える) ---- */
.toast-layer {
  position: fixed;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 13999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 420px);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--panel), var(--panel-inner));
  border: 1px solid var(--gold);
  color: var(--text);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  animation: toast-in 0.2s ease;
  /* 複数行のトースト (受信箱の受け取りなど) はそのまま改行して見せる */
  white-space: pre-line;
}

.toast-error {
  border-color: rgba(224, 93, 75, 0.7);
  color: #f0a49a;
}

.toast-hint {
  font-size: 11px;
  padding: 7px 12px;
  border-color: rgba(212, 169, 78, 0.55);
  background: rgba(38, 29, 18, 0.92);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.42);
}

.dungeon-swipe-hint {
  position: fixed;
  z-index: 13050;
  width: max-content;
  max-width: min(250px, calc(100vw - 24px));
  padding: 7px 11px;
  border: 1px solid rgba(212, 169, 78, 0.62);
  border-radius: 9px;
  background: rgba(38, 29, 18, 0.66);
  color: var(--text);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  font: 11px/1.45 var(--font-body);
  text-align: center;
  white-space: nowrap;
  animation: toast-in 0.2s ease;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 棚の NEW (メグランと同じ位置: 名前の右上) */
.figure-stage__new {
  position: absolute;
  top: 0;
  right: 8%;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #5a3a14;
  background: linear-gradient(135deg, #f0c24a, #d9a93c);
  border: 1px solid #c8922a;
  border-radius: 999px;
  padding: 0 6px;
  line-height: 1.6;
}

/* ---- フィギュアガチャ: 段4 (レジェンダリー) の金の光と、タメ/開封の火花 ---- */
.gacha-tile.tier-e4 .gacha-beam {
  background: conic-gradient(from 0deg, #f0c24a, #fff4c2, #f0c24a, #ffe08a, #f0c24a);
  opacity: 0.7;
  animation:
    gacha-beam-in 0.5s ease-out both,
    fx-spin 1s linear infinite;
}

.gacha-tile.revealed.e4 {
  border-color: #ffe08a;
  box-shadow:
    0 0 14px rgba(240, 194, 74, 0.7),
    0 0 30px rgba(240, 194, 74, 0.35);
}

.gacha-sparks {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 4;
  pointer-events: none;
}

.gacha-sparks i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--spark, #d9a0ff) 55%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 6px var(--spark, #d9a0ff);
  opacity: 0;
  animation: gacha-spark 0.9s ease-out infinite;
  animation-delay: calc(var(--k) * 70ms);
}

.gacha-tile.tier-e3 .gacha-sparks i {
  --spark: #d9a0ff;
}

.gacha-tile.tier-e4 .gacha-sparks i {
  --spark: #ffe08a;
  width: 8px;
  height: 8px;
}

/* 開いた瞬間は一斉に大きく散る */
.gacha-sparks.burst i {
  animation: gacha-spark-burst 0.6s ease-out forwards;
  animation-delay: calc(var(--k) * 15ms);
}

@keyframes gacha-spark {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--k) * 36deg)) translateX(10px) scale(0.6);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--k) * 36deg + 20deg)) translateX(46px) scale(1);
  }
}

@keyframes gacha-spark-burst {
  0% {
    opacity: 1;
    transform: rotate(calc(var(--k) * 36deg)) translateX(6px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--k) * 36deg)) translateX(90px) scale(0.4);
  }
}

/* 結果チップ: 変化前は小さく、変化後の値を大きく */
.fig-delta {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.fig-delta small {
  font-size: 9px;
  opacity: 0.75;
  font-weight: 600;
}

.fig-delta b {
  font-size: 14px;
  font-weight: 800;
}

/* ガチャ結果の「もう一度」ボタン列 (狭幅は折り返す) */
.gacha-again {
  flex-wrap: wrap;
}

.gacha-again .btn {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

/* 課金の確認モーダル: 個数の選択 */
.shop-qty-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ガチャ結果の文字タグ (背景なし。背景はレアリティ表示だけに使う) */
.fig-tag {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.fig-tag--new {
  color: #5fe8e0;
}

.fig-tag--lv {
  color: #f0c24a;
}

/* フィギュアガチャのタイルは3行 (名前/レアリティ/結果) ぶんの高さ */
.fig-grid .gacha-tile {
  min-height: 88px;
}

/* 2表示のフェード入れ替え (重ねて置き、on の方だけ見せる) */
.alt-text {
  position: relative;
  display: inline-grid;
}

.alt-text__item {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  white-space: nowrap;
}

.alt-text__item.on {
  opacity: 1;
}

/* モーダル欄外の tips (1つだけ。左揃えの本文) */
.help-tips {
  font-size: 12px;
  color: var(--text-dim);
  text-align: left;
  line-height: 1.6;
  padding: 2px 4px;
}

/* 説明行は 項目=左揃え / 値=右揃え で頭と尻を揃える */
.gacha-help-val {
  text-align: right;
  margin-left: auto;
}

/* 説明行の項目名は左揃え (モーダルの中央揃えを継承しない) */
.gacha-help-name {
  text-align: left;
}

/* 挑戦回数の説明: 現在値/上限 と ストック を大きく。他は小さな添え書きだけ */
.attempts-big {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.attempts-big__cell {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.attempts-big__label {
  font-size: 11px;
  color: var(--text-dim);
}

.attempts-big__value {
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 800;
  color: var(--gold-bright);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.attempts-big__max {
  font-size: 14px;
  color: var(--text-dim);
  margin-left: 2px;
}

.attempts-big__sub {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.4;
}

/* ダメージ数字は舞台の上端で見切れないよう、キャラの胸の高さから出して相手側 (中央寄り) に置く */
.dmg-popup {
  top: 30%;
}

.side-enemy .dmg-popup {
  left: 36%;
}

.side-player .dmg-popup {
  left: 64%;
}

.dmg-popup.heal,
.dmg-popup.shield {
  top: 52%;
}

/* 融合の確認: 素材アイコンの一覧 (タップで暗転=除外) */
.fuse-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
}

.fuse-pick {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--rarity-common);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.15s ease,
    filter 0.15s ease;
}

.fuse-pick.rarity-uncommon {
  border-color: var(--rarity-uncommon);
}

.fuse-pick.rarity-rare {
  border-color: var(--rarity-rare);
}

.fuse-pick.rarity-epic {
  border-color: var(--rarity-epic);
}

.fuse-pick.rarity-legend {
  border-color: var(--rarity-legend);
}

.fuse-pick__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* 除外: 暗転 */
.fuse-pick.off {
  opacity: 0.35;
  filter: grayscale(1);
}

/* SP不足で今回は使わないぶん: 薄く */
.fuse-pick.beyond {
  opacity: 0.6;
}

.fuse-pick__q {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 9px;
  font-weight: 700;
  color: var(--gold-bright);
  text-shadow: 0 1px 2px #000;
}

.fuse-pick__first {
  position: absolute;
  left: 3px;
  top: 2px;
  font-size: 9px;
  font-weight: 700;
  color: #14100a;
  background: var(--gold);
  border-radius: 4px;
  padding: 0 4px;
}

/* ---- ホーム右上: ランキング (2026-09-06) ---- */

.home-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 8px;
}

.home-topbar-spacer {
  flex: 1;
}

/* 左上の「N人がオンライン」(メグランのホームと同じ: 緑の丸 + 人数) */
.online-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap; /* 390px 幅で「1人がオン/ライン」と折れていた */
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.online-pill-text {
  display: inline-block;
  animation: storyFade 0.35s ease;
}

.online-pill:hover {
  border-color: var(--panel-edge);
}

.online-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3fbf5a;
  box-shadow: 0 0 0 2px rgba(63, 191, 90, 0.25);
  vertical-align: middle;
}

.online-stats .hint-row {
  font-size: 13px;
}

/* スマホ: 入力欄の文字が 16px 未満だと iOS Safari がタップ時に画面を自動拡大する。テキスト入力は一律 16px にして防ぐ (2026-09-08) */
@media (max-width: 600px) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px;
  }
}

/* ---- チャット (2026-09-08) ---- */
.chat-toggle {
  margin-left: 4px;
  padding: 4px 8px;
}

.chat-toggle-arrow {
  font-size: 10px;
}

.chat-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 70vh; /* スマホ1画面ぶん下に広がる */
  min-height: 360px;
  margin-bottom: 8px;
}

.chat-stats {
  height: 22px;
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
}

.chat-stat-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: storyFade 0.4s ease;
}

.chat-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--panel-edge);
  padding-bottom: 6px;
}

.chat-tab {
  flex-shrink: 0;
  white-space: nowrap; /* 「全体」が縦に折れていた */
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--panel-edge);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.chat-tab.active {
  background: rgba(212, 169, 78, 0.22);
  color: var(--gold-bright);
  border-color: var(--gold);
}

.chat-room-desc {
  animation: storyFade 0.35s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.chat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

.chat-empty {
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  padding: 20px 0;
}

.chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.chat-msg.mine .chat-text-btn {
  border-color: rgba(212, 169, 78, 0.45);
}

.chat-msg.resolved {
  opacity: 0.55;
}

.chat-msg.hidden .chat-text {
  color: var(--text-dim);
  font-style: italic;
}

.chat-msg-flash .chat-text-btn {
  box-shadow: 0 0 0 3px rgba(240, 194, 74, 0.6);
}

.chat-avatar-btn {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

/* アバター (54×74 のドット絵) は縦横比のまま。名前行+吹き出しで縦幅があるので縦長のまま置く */
.chat-avatar {
  height: 52px;
  width: auto;
  display: block;
  image-rendering: pixelated;
  object-fit: contain;
}

.chat-avatar-btn {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.chat-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-text-btn {
  text-align: left;
  width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--panel-edge);
  background: var(--panel-inner);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: anywhere;
}

.chat-quote {
  font-size: 11px;
  color: var(--text-dim);
  border-left: 2px solid var(--panel-edge);
  padding-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-q-chip {
  align-self: flex-start;
  font-size: 10px;
}

.chat-thanks-count {
  font-size: 11px;
  color: var(--gold-bright);
}

.chat-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-dim);
  padding-left: 2px;
  flex-wrap: wrap;
  order: -1; /* 名前行は吹き出しの上 */
}

/* 1分以内に誰かの発言があるとき、💬 が拡縮してアピール */
.chat-toggle.live .chat-toggle-icon {
  display: inline-block;
  animation: chatLivePulse 1s ease-in-out infinite;
}

@keyframes chatLivePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.35);
  }
}

.chat-name-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
}

.chat-time {
  font-size: 9px;
  color: var(--text-dim);
  opacity: 0.8;
}

.chat-badge {
  font-size: 11px;
}

.chat-badge-btn {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.chat-beginner-tip {
  font-size: 10px;
  color: var(--gold-bright);
  background: rgba(212, 169, 78, 0.15);
  border-radius: 6px;
  padding: 1px 6px;
}

.chat-input-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--panel-edge);
  padding-top: 6px;
}

.chat-reply-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(212, 169, 78, 0.12);
  border-radius: 6px;
  padding: 2px 8px;
}

.chat-cannot {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  padding: 6px;
}

.chat-input-line {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.chat-input {
  flex: 1;
  min-height: 36px;
  max-height: 96px;
  resize: none;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--panel-edge);
  background: var(--panel-inner);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

.chat-send {
  flex-shrink: 0;
}

/* ボトムシート (発言の操作) */
.chat-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 13040;
  background: rgba(0, 0, 0, 0.45);
}

.chat-sheet {
  bottom: 12px;
}

.chat-sheet-quote {
  font-size: 12px;
  color: var(--text-dim);
  max-height: 60px;
  overflow: hidden;
}

.chat-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-sheet-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ボタン + ？ を1行に収める (？ は右端)。説明文だけが下の行に折り返す */
.chat-sheet-row .btn {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-help-wrap {
  display: contents;
}

.chat-help-wrap .chat-help-text {
  flex-basis: 100%;
}

.chat-help-btn {
  flex-shrink: 0;
}

.chat-help-text {
  font-size: 11px;
  color: var(--text-dim);
}

.btn-danger {
  border-color: var(--danger);
  color: var(--danger);
}

/* その人の情報 */
.chat-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.chat-card-avatar {
  height: 74px;
  width: auto;
  image-rendering: pixelated;
  object-fit: contain;
}

.chat-card-name {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* プレイヤー情報モーダル (ホームと同じ部品を並べる) */
.player-card-panel {
  max-width: 560px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  text-align: left;
}

.player-card-panel .stat-grid {
  margin-top: 8px;
}

.player-card-sec {
  margin: 12px 0 6px;
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 14px;
}

.player-card-buddy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.player-card-buddy-img {
  height: 56px;
  width: auto;
  image-rendering: pixelated;
}

.player-card-panel .chat-card-rows {
  margin-top: 12px;
}

/* 上位10%以内のときだけ出る順位 */
.chat-rank {
  margin-left: 6px;
  font-size: 12px;
  color: var(--gold-bright);
  font-weight: 700;
}

.chat-card-head .char-info {
  flex: 1;
  min-width: 0;
}

.chat-card-rows .hint-row {
  font-size: 13px;
}

/* 管理 */
.admin-panel {
  max-width: 560px;
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}

.admin-row {
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-row.hidden {
  border-color: var(--gold);
}

.admin-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
}

.admin-row-name {
  font-weight: 700;
}

.admin-row-text {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.admin-row-sub {
  font-size: 10px;
  color: var(--text-dim);
}

.admin-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-ng {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--panel-edge);
  background: var(--panel-inner);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}

/* ---- 管理ダッシュボード (2026-09-10)。実線=直近の期間 / 点線=その前 / 半透過=今日 ---- */

/* 人数の棒 (詰まり所を目で見つけるため。数字は右に添える) */
.stats-bar {
  display: inline-block;
  height: 8px;
  border-radius: 4px;
  background: var(--gold);
  opacity: 0.55;
  vertical-align: middle;
  margin-right: 6px;
  min-width: 2px;
  max-width: 90px;
}

.stats-bar-num {
  font-variant-numeric: tabular-nums;
}

/* 棒と人数は必ず1行に収める (折り返すと表がガタつく) */
.stats-bar-cell {
  white-space: nowrap;
}

.stats-warn {
  color: var(--gold-bright);
}

.stats-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.stats-kpi {
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 6px 4px;
  background: var(--panel-inner);
  text-align: center;
  /* 数字が伸びても枠が動かないよう高さを決めておく */
  min-height: 62px;
}

.stats-kpi-label {
  font-size: 10px;
  color: var(--text-dim);
}

.stats-kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-bright);
  line-height: 1.3;
}

.stats-swatch {
  display: inline-block;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold-bright);
}

.stats-swatch-prev {
  background: repeating-linear-gradient(90deg, var(--text-dim) 0 3px, transparent 3px 6px);
}

.stats-swatch-today {
  background: var(--gold-bright);
  opacity: 0.45;
}

.stats-chart {
  margin-top: 6px;
}

.stats-chart svg {
  width: 100%;
  height: auto;
  display: block;
  touch-action: pan-y;
}

.stats-grid {
  stroke: var(--panel-edge);
  stroke-width: 1;
}

.stats-cursor {
  stroke: var(--text-dim);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.stats-tick {
  fill: var(--text-dim);
  font-size: 10px;
}

.stats-today-tick {
  opacity: 0.7;
}

.stats-point-label {
  fill: var(--gold-bright);
  font-size: 11px;
  font-weight: 700;
}

.stats-readout {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  min-height: 18px;
  color: var(--text);
}

.stats-readout-hint,
.stats-readout-prev {
  color: var(--text-dim);
}

.stats-readout-day {
  font-weight: 700;
}

.stats-readout-now,
.stats-readout-prev {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stats-table-wrap {
  max-height: 46vh;
  overflow-y: auto;
  margin-top: 6px;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.stats-table th,
.stats-table td {
  border-bottom: 1px solid var(--panel-edge);
  padding: 4px 6px;
  text-align: right;
}

.stats-table th:first-child,
.stats-table td:first-child {
  text-align: left;
}

.stats-table th {
  color: var(--text-dim);
  font-weight: 400;
  font-size: 10px;
  position: sticky;
  top: 0;
  background: var(--panel);
}

.stats-today-row td {
  color: var(--text-dim);
}

.stats-note {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}

@media (max-width: 520px) {
  .stats-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ranking-btn {
  font-weight: 700;
}

/* ダンジョンバーの「ステージ選択」: 親が button なので span にボタンの見た目だけ付ける */
.ranking-panel {
  max-width: 440px;
  text-align: left;
}

.ranking-tabs,
.contact-kind {
  margin-bottom: 0;
}

.ranking-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ステージのプルダウン (名前入力欄と同じ見た目) */
.ranking-select {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-bright);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--panel-edge);
  border-radius: 7px;
  padding: 9px 12px;
  outline: none;
  width: 100%;
}

/* ネイティブ選択肢も不透明な暗色で統一。OSの灰色背景に文字色だけ継承させない。 */
.ranking-select { color-scheme: dark; color: #fff3d0; background: #19150f; }
.ranking-select option { color: #fff3d0; background: #19150f; }

.ranking-select:focus {
  border-color: var(--gold);
}

.ranking-grid {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 64px 64px;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.ranking-grid.no-b {
  grid-template-columns: 40px minmax(0, 1fr) 72px;
}

.ranking-head {
  color: var(--text-dim);
  font-size: 11px;
  padding: 0 6px;
}

.ranking-head .ranking-col-name {
  gap: 6px;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 45vh;
  overflow-y: auto;
}

.ranking-row {
  padding: 5px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid transparent;
}

.ranking-row.me,
.ranking-mine {
  border-color: var(--gold);
}

.ranking-row.top1 .ranking-col-rank {
  color: #ffd76a;
}

.ranking-row.top2 .ranking-col-rank {
  color: #d8dde6;
}

.ranking-row.top3 .ranking-col-rank {
  color: #e0a370;
}

.ranking-col-rank {
  font-family: var(--font-title);
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ranking-col-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ranking-avatar {
  /* 丸い枠・背景なしで、キャラ全体を比率そのままに見せる (2026-09-17) */
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

.ranking-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-col-a {
  text-align: right;
  font-weight: 800;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.ranking-col-b {
  text-align: right;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.ranking-mine {
  padding: 6px;
  border-radius: 6px;
  border: 1px solid var(--gold);
  background: rgba(212, 169, 78, 0.1);
}

.ranking-empty {
  text-align: center;
  color: var(--text-dim);
  padding: 20px 0;
  font-size: 13px;
}

/* ---- お問い合わせ (設定) ---- */

.contact-panel {
  max-width: 420px;
  text-align: left;
}

.contact-field {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.contact-label {
  flex: 0 0 56px;
  color: var(--text-dim);
}

.contact-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 7px 10px;
}

.contact-body {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-size: 14px;
  line-height: 1.5;
}

.contact-count {
  text-align: right;
}

/* ---- お知らせ (ホーム右上 📢 / ログイン時の自動表示) ---- */

.home-topbar {
  gap: 8px;
}

.news-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.news-panel {
  max-width: 440px;
  text-align: left;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}

.news-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--panel-edge);
}

.news-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.news-head .chip {
  margin-left: 0;
}

.news-date {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.news-kind-update {
  color: #101014;
  background: var(--gold);
}

.news-kind-fix {
  color: #fff;
  background: #c95a6a;
}

.news-kind-info {
  color: #101014;
  background: #9fb3c8;
}

.news-title {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}

.news-lines {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
}

.news-lines li + li {
  margin-top: 2px;
}

.contact-note {
  text-align: left;
}

/* ---- ショップ購入前の金額 (2026-09-07): 枠なし・最大サイズ・右寄せ。効果チップはその下に右寄せ ---- */

.buy-price {
  width: 100%;
  text-align: right;
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 800;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 4px;
}

.fuse-head-row.buy-effects {
  justify-content: flex-end;
  margin-top: 0;
}

/* 設定の規約リンク (3つを右寄せで折り返し) */

.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 12px;
  font-size: 12px;
}

.legal-links a,
.skill-sheet-note a {
  color: #7ec8ff;
}

/* ---- ショップのボタン幅を領域内で統一 (2026-09-07): 右揃え・同じ幅・数字は右詰め (0の位がそろう) ---- */

.rune-gacha-btns .btn,
.shop-item > .shop-buy-btn {
  width: 128px;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.shop-item > .shop-buy-btn {
  flex-shrink: 0;
}

.rune-gacha-btns .btn.locked {
  opacity: 0.5;
  cursor: pointer;
}

.shop-beta-note {
  color: #ffb4a6;
}

.title-beta {
  font-size: 0.45em;
  margin-left: 6px;
  vertical-align: super;
  color: var(--gold-bright);
  letter-spacing: 0.05em;
}

/* ガチャボタン: 回数は左詰め・コスト (SP/¥) は右詰め */
.rune-gacha-btns .btn {
  justify-content: space-between;
}

.gbtn-l {
  margin-right: auto;
  text-align: left;
}

/* 課金アイテムの ¥ ボタン: 同士で同じ幅・中央揃え */
.shop-item > .shop-buy-btn {
  width: 84px;
  justify-content: center;
  text-align: center;
}

/* 金色ボタンの上では 錬石 の数字も濃い文字に (金の上に薄い金は読めない) */
.btn-primary .sp-amount {
  color: inherit;
}

/* 退会モーダルの確認項目 */
.withdraw-points {
  margin: 0;
  padding-left: 18px;
  text-align: left;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.withdraw-points li + li {
  margin-top: 4px;
}

/* iPhone ホーム画面アプリ向けの「引っ張って更新」(web/src/pullRefresh.ts)。上端のバーが引いた量でゲージのように満ちる */
.pull-refresh {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 13300;
  display: none;
  height: 28px;
  overflow: hidden;
  background: rgba(20, 15, 9, 0.92);
  border-bottom: 1px solid var(--gold);
  color: var(--text);
  font-size: 12px;
  pointer-events: none;
}

.pull-refresh.show {
  display: block;
}

.pull-refresh-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(212, 169, 78, 0.55), rgba(242, 205, 114, 0.85));
}

.pull-refresh-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  letter-spacing: 0.06em;
}

.pull-refresh.ready .pull-refresh-text {
  color: #2a1e08;
  font-weight: 700;
}

/* ---- ログインボーナス (嬉しい演出。2026-09-08) ---- */
.bonus-panel {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 26px 20px 22px;
  border-color: var(--gold-bright);
  box-shadow:
    0 0 0 3px rgba(242, 205, 114, 0.25),
    0 12px 40px rgba(0, 0, 0, 0.7);
}

/* 背景の光の放射 (ゆっくり回る) */
.bonus-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  background: repeating-conic-gradient(from 0deg, rgba(242, 205, 114, 0.16) 0deg 9deg, rgba(242, 205, 114, 0) 9deg 24deg);
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0) 68%);
  mask: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0) 68%);
  animation: bonusSpin 18s linear infinite;
  pointer-events: none;
}

@keyframes bonusSpin {
  to {
    transform: rotate(360deg);
  }
}

.bonus-title {
  position: relative;
  font-family: var(--font-title);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.bonus-label {
  position: relative;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text);
}

.bonus-num {
  position: relative;
  font-family: var(--font-title);
  font-size: 56px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--gold-bright);
  text-shadow:
    0 0 18px rgba(242, 205, 114, 0.7),
    0 2px 0 rgba(0, 0, 0, 0.5);
  animation: bonusPop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes bonusPop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  60% {
    transform: scale(1.12);
    opacity: 1;
  }
  to {
    transform: scale(1);
  }
}

/* ログインボーナスの内訳 (大きい数字の下に小さく。行数が変わっても枠は動かさない) */
.bonus-parts {
  position: relative;
  width: 190px;
  margin: 6px auto 0;
  font-size: 11px;
  color: #cdbfa4;
}
.bonus-part {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 16px;
}
.bonus-part-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bonus-part-value {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: #e6d8b8;
}

.bonus-note {
  position: relative;
  margin-top: 8px;
  font-size: 11px;
  color: #d9cdb5;
}

.bonus-btn {
  position: relative;
  margin-top: 16px;
  width: 100%;
}

/* 狭い画面 (スマホ): 右上のランキング/お知らせはアイコンだけにして、左のオンライン人数を見切れさせない */
@media (max-width: 480px) {
  .home-topbar .topbar-label {
    display: none;
  }

  .home-topbar .ranking-btn,
  .home-topbar .news-btn {
    padding-left: 8px;
    padding-right: 8px;
  }

  .online-pill {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 出撃バーはメインメニューの裏まで伸ばす (2026-09-08): bottom:57px だと端末によってメニューとの間に隙間が見えた。
   バー自体を画面下端まで下ろし、メニューぶんは下パディングで確保 (メニューは z-index 1000 で手前) */
.dungeon-float-bar {
  bottom: 0;
  padding-bottom: calc(8px + 57px + env(safe-area-inset-bottom, 0px));
}

.dungeon-float-bar.collapsed {
  padding-bottom: 0;
}

/* 盤面を下端まで伸ばしたぶん、拡大縮小ボタンはメニューの上に出す */
.skill-board.skill-board-full .skill-zoom-controls {
  bottom: calc(10px + 57px + env(safe-area-inset-bottom, 0px));
}

/* 狭い画面 (スマホ): ガチャのボタン列を右側に押し込まず、説明の下に2列で並べる (2026-09-08) */
@media (max-width: 480px) {
  .shop-item.rune-gacha {
    flex-wrap: wrap;
  }

  .shop-item.rune-gacha .shop-item-main {
    flex: 1 1 0;
    min-width: 0;
  }

  .shop-item.rune-gacha .rune-gacha-btns {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
  }

  .shop-item.rune-gacha .rune-gacha-btns .btn {
    width: calc(50% - 3px);
  }
}

/* 周回画面: 難易度バッジは背景 (arena) の右上 */
.arena {
  position: relative;
}

.arena-diff-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* 入力中 (キーボード表示中) は固定メニューと出撃バーを隠す (web/src/keyboard.ts) */
body.kb-open .bottom-nav,
body.kb-open .dungeon-float-bar {
  display: none;
}

/* 折りたたみ中はバー自体が高さ0なので、▲ボタンがメニューの裏に隠れないようメニューの上に置く */
.dungeon-float-bar.collapsed {
  bottom: calc(57px + env(safe-area-inset-bottom, 0px));
}

/* プレイヤー情報: 枠は overflow を出して右上の ✕ を枠線に乗せ、中身だけスクロールさせる */
.player-card-panel {
  position: relative;
  overflow: visible;
  padding-top: 12px;
}

.player-card-scroll {
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* スクロールバーは枠線のすぐ内側 (はみ出させると中身が右で切れるので余白だけ詰める) */
  margin-right: -12px;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 205, 114, 0.8) transparent;
}

/* 枠線の右側を金色の光が走るようなスクロールバー */
.player-card-scroll::-webkit-scrollbar {
  width: 4px;
}

.player-card-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.player-card-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(242, 205, 114, 0.2), #f2cd72 50%, rgba(242, 205, 114, 0.2));
  box-shadow: 0 0 8px rgba(242, 205, 114, 0.9);
}

/* ホームの装備から開く限界突破: 中身が長いので、見出しの行を上に貼り付けて ✕ を常に見える位置に置く */
.home-craft-panel {
  position: relative;
  max-width: 560px;
}

.home-craft-head {
  position: sticky;
  top: -18px; /* パネルの上パディングぶん引き上げて、スクロールしても隠れない */
  z-index: 6;
  margin: -18px -18px 0;
  padding: 12px 18px 8px;
  background: linear-gradient(180deg, var(--panel), var(--panel));
  border-radius: 10px 10px 0 0;
}

.home-craft-head .modal-x {
  top: 50%;
  right: 8px;
  margin-top: -15px; /* 30px の半分。見出しの高さが変わっても真ん中のまま */
}

.modal-x {
  position: absolute;
  top: -8px; /* 2026-09-10 専務: もう少し下に */
  right: -14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, var(--panel), var(--panel-inner));
  color: var(--gold-bright);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* 装備は1列4行 (狭いので) */
.player-card-panel .equip-slots {
  grid-template-columns: 1fr;
}

/* スマホ: 大型の敵が右に見切れるので、キャラ間を詰める (敵の列を左へ寄せ、味方2人の間隔も狭く。2026-09-08) */
@media (max-width: 480px) {
  .arena {
    --party-gap: 44px;
    --party-back-shift: -10px; /* マイナス = 2人とも敵側へ寄せる (前衛のバディが前に出る) */
  }

  .arena-portraits {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 0;
  }

  .arena-portrait.side-enemy {
    margin-left: -24px;
  }
}

/* 戦闘背景の右上の難易度バッジ: 明るい絵の上でも読めるよう暗い下地にし、色は縁と文字だけに */
/* 持ち物が上限を超えて出撃できないときの案内 (2026-09-25 専務) */
.inv-over-count { margin: 6px 0 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.inv-over-count b { font-size: 18px; }
.inv-over-count b.over { color: #ff8a7a; }
.inv-over-actions { display: flex; gap: 8px; }
.inv-over-actions .btn { flex: 1 1 0; min-width: 0; }
/* フロアの残り時間 (2026-09-24 専務): 背景の左上。普段は気にしない数字なので、枠なし・半透明の控えめな表示。
   残り 30 秒からは濃い地に赤い光を明滅させて知らせる */
.arena-timer {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  padding: 2px 8px; border-radius: 6px; border: 1px solid transparent;
  background: rgba(18, 13, 8, 0.35); opacity: 0.7;
  color: #f3e6c8; font-size: 11px; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums;
  font-family: inherit; cursor: pointer; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  transition: opacity 0.3s, background 0.3s;
}
.arena-timer b { display: inline-block; min-width: 2.2em; text-align: right; font-size: 13px; }
.arena-timer.is-low {
  opacity: 1; background: rgba(18, 13, 8, 0.86); border-color: #ff7a6a;
  animation: arena-timer-glow 1s ease-in-out infinite;
}
.arena-timer.is-low b { color: #ff8a7a; }
@keyframes arena-timer-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 70, 50, 0.35); }
  50% { box-shadow: 0 0 14px 3px rgba(255, 70, 50, 0.9); }
}
.low-power .arena-timer.is-low { animation: none; box-shadow: 0 0 8px rgba(255, 70, 50, 0.7); }
/* ログを見返している間の「結果に戻る」(画面の下に固定) */
.result-back-btn {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 60; min-width: 180px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}
.hard-chip.arena-diff-badge {
  background: rgba(18, 13, 8, 0.86);
  border-width: 1px;
  border-style: solid;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* 挑戦回数バッジのアイコン */
.attempts-icon {
  font-size: 13px;
  margin-right: 3px;
  align-self: center;
}

.attempts-badge.compact .attempts-icon {
  font-size: 11px;
  margin-right: 2px;
}

/* 設定 → ヘルプ (項目一覧 → 各項目は写真 + 2〜3行) */
.help-index-panel {
  max-width: 420px;
}

.help-index-sec {
  margin: 10px 0 6px;
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 14px;
  text-align: left;
}

.help-index-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.help-index-arrow {
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
}

.help-topic-img {
  border: 1px solid rgba(212, 169, 78, 0.45);
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  margin: 4px 0 10px;
}

.help-topic-img img {
  display: block;
  width: 100%;
  height: auto;
}

.help-topic-lines {
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.help-topic-lines p {
  margin: 0 0 4px;
}

/* ヘルプ一覧: 行は1行 (名前 … ›)、一覧側は内側スクロールさせずモーダル全体で縦に流す */
.help-index-panel .dungeon-select-list {
  max-height: none;
  overflow: visible;
}

.help-index-panel .help-index-row {
  flex-direction: row;
  padding: 8px 12px;
}

.help-index-panel .help-index-row .dungeon-select-name {
  font-size: 14px;
}

.help-index-panel {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

/* 1枚ずつめくる説明スライド (転生の初回モーダルなど)。画像の高さは固定せず比率のまま、文章は最大3行ぶん確保して行数差で枠が動かないようにする */
.intro-slides {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.intro-slide-img {
  border: 1px solid rgba(212, 169, 78, 0.45);
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.intro-slide-img img {
  display: block;
  width: 100%;
  height: auto;
}

.intro-slide-title {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 17px;
  text-align: center;
}

.intro-slide-lines {
  min-height: 4.6em;
  font-size: 14px;
  line-height: 1.55;
}

.intro-slide-lines p {
  margin: 0;
}

.intro-slide-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.intro-slide-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(212, 169, 78, 0.6);
  background: transparent;
  cursor: pointer;
}

.intro-slide-dot.active {
  background: var(--gold);
}

.intro-slide-actions {
  margin-top: 2px;
}

.intro-slide-actions .btn {
  min-width: 120px;
}

/* 前後の項目名つきボタン: 左寄せ / 右寄せ。項目名は小さめ */
.help-topic-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.help-topic-nav-btn {
  font-size: 12px;
  padding: 6px 10px;
  min-width: 0;
}

/* スキル画面「なぞる」→ 長押しで「オート」(点灯) */
.skill-trace-btn.auto-on {
  background: linear-gradient(180deg, #f2cd72, #d4a94e);
  color: #2a1e08;
  border-color: #f2cd72;
  box-shadow: 0 0 10px rgba(242, 205, 114, 0.7);
  animation: prestige-pulse 1.6s ease-in-out infinite;
}

.skill-trace-btn {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* 縮小中の出撃バー: ▲ を明滅 + 拡縮で目立たせる (チャットを開いた時などに見失わないように) */
@keyframes bar-tab-attract {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.35);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 14px rgba(242, 205, 114, 0.75);
    filter: brightness(1.35);
  }
}

.dungeon-float-bar.collapsed > .dungeon-bar-toggle {
  transform-origin: bottom center;
  animation: bar-tab-attract 1.2s ease-in-out infinite;
}

/* ストーリーの背景切替: 暗転してから明ける */
@keyframes storyFadeIn {
  from {
    filter: brightness(0);
  }
  to {
    filter: brightness(1);
  }
}

.story-arena-fade {
  animation: storyFadeIn 0.7s ease-out;
}

/* ---- トリガースキルのカットイン (マイクリの passive_skill_cutin.css を移植: 斜めの帯 + 明滅 + 右から入って左へ抜ける) ---- */
@keyframes mch-cutin-slide {
  0% {
    opacity: 0;
    transform: translate(100%, -50%) skewY(-10deg);
  }
  15% {
    opacity: 1;
    transform: translate(0, -50%) skewY(-10deg);
  }
  85% {
    opacity: 1;
    transform: translate(0, -50%) skewY(-10deg);
  }
  100% {
    opacity: 0;
    transform: translate(-100%, -50%) skewY(-10deg);
  }
}

@keyframes mch-cutin-shine {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

.mch-cutin {
  position: absolute;
  left: 0;
  width: 100%;
  /* ステータス枠とログの境目を中心に出す (立ち絵にはあまり掛けない) */
  top: 100%;
  padding: 2.2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transform: translateY(-50%) skewY(-10deg);
  animation: mch-cutin-slide 1.5s ease-in-out both;
}

.mch-cutin--opponent {
  background: linear-gradient(to left top, #be6c65 0, #be6c65 50%, #282b33 0, #282b33);
}

.mch-cutin__shine {
  position: absolute;
  inset: 0;
  mix-blend-mode: color-dodge;
  background: linear-gradient(180deg, #402, #903 20%, #903 80%, #402);
  animation: mch-cutin-shine 0.6s linear infinite alternate;
}

.mch-cutin__unit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transform: skewY(10deg);
}

.mch-cutin__image {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  transform: scale(1.8);
  margin: 0 22px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}

.mch-cutin__text {
  text-align: left;
  color: #fff;
}

.mch-cutin__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  opacity: 0.85;
  text-shadow: 1px 1px 0 #333, -1px 1px 0 #333, -1px -1px 0 #333, 1px -1px 0 #333;
}

.mch-cutin__skill {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 2px 2px 0 #333, -2px 2px 0 #333, -2px -2px 0 #333, 2px -2px 0 #333;
}

@media (min-width: 768px) {
  .mch-cutin {
    padding: 3rem 0;
  }
  .mch-cutin__image {
    transform: scale(2.4);
    margin: 0 40px;
  }
  .mch-cutin__skill {
    font-size: 34px;
  }
}

/* オーバーグレード (ノードステージ産の +G 装備): G バッジを反転 (金グラデ背景 + 濃い文字) */
.grade-chip.og-chip {
  color: #2a1e08;
  font-weight: 700;
  border-color: #f2cd72;
  background: linear-gradient(180deg, #f2cd72, #d4a94e);
  box-shadow: 0 0 6px rgba(242, 205, 114, 0.55);
}

/* オーバーグレードの G バッジ: 3秒ごとに光の帯が走る */
@keyframes og-shine {
  0% {
    transform: translateX(-140%) skewX(-20deg);
  }
  18% {
    transform: translateX(240%) skewX(-20deg);
  }
  100% {
    transform: translateX(240%) skewX(-20deg);
  }
}

.grade-chip.og-chip {
  position: relative;
  overflow: hidden;
}

.grade-chip.og-chip::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 0;
  width: 45%;
  height: 140%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
  animation: og-shine 3s ease-in-out infinite;
  pointer-events: none;
}

.codex-source-title-og {
  margin-top: 8px;
}

/* 図鑑のオーバーグレード行: G バッジ + ダンジョン名を横並び */
.codex-source-line.codex-source-og {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.codex-unique-og {
  margin: 0 4px;
  vertical-align: middle;
}

/* 周回の確定申告に失敗したときの案内 (戦利品は確定するまで出さない) */
.settle-error-note {
  color: var(--danger, #e66);
  text-align: left;
  line-height: 1.5;
}
.settle-error-note .confirm-actions {
  margin-top: 6px;
}

/* プレイヤーカードの uid (名前の後ろ、小さく薄く) */
.chat-card-uid {
  font-size: 11px;
  font-weight: normal;
  color: var(--text-dim);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  margin-left: 4px;
}

/* ---- 省電力モード (設定。2026-09-10) ----
   放置周回中の発熱対策。常時動く装飾と重い描画だけ止め、周回の内容・結果・操作は変えない */
.low-power .bg-texture-drift {
  animation: none; /* 背景テクスチャの流れ (画面全体を毎フレーム描き直す一番重い要素) */
}
.low-power .arena-portrait.is-hit .arena-portrait-image {
  filter: none; /* 被弾の輪郭グロー (drop-shadow は輪郭抽出が重い) */
}
.low-power .dungeon-float-bar.collapsed > .dungeon-bar-toggle,
.low-power .chat-toggle.live .chat-toggle-icon,
.low-power .grade-chip.og-chip::after,
.low-power .mch-cutin__shine,
.low-power .gacha-tile-back,
.low-power .gacha-circle,
.low-power .fx-ring,
.low-power .phase-wait .fx-base,
.low-power .fx-rate-chip,
.low-power .prestige-btn.is-ready,
.low-power .skill-trace-btn.auto-on {
  animation: none !important; /* 点滅・光沢・回転などの常時アニメ */
}
.low-power .gacha-sparks i {
  display: none; /* 火花パーティクル */
}

/* ---- 管理ダッシュボード: 全画面ページ (2026-09-10)。指標カードを2列 (狭い画面は1列) で並べ、ページごと縦にスクロール ---- */
.dash-page {
  position: fixed;
  inset: 0;
  /* ボトムナビ (1000) より上、確認モーダル (13100) より下 = エラー表示などは上に出せる */
  z-index: 13090;
  background: var(--bg-deep);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dash-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-edge);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.dash-title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-right: auto;
}

.dash-jump,
.dash-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dash-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px 56px;
}

.dash-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 11px;
  color: var(--text-dim);
}

.dash-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dash-legend-note {
  margin-left: auto;
}

.dash-loading {
  color: var(--gold-bright);
}

.dash-section {
  margin-top: 18px;
  /* 見出しへ飛んだとき、固定ヘッダーの下に隠れないように */
  scroll-margin-top: 72px;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dash-card {
  background: linear-gradient(180deg, var(--panel), var(--panel-inner));
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 0;
}

.dash-card-wide {
  grid-column: 1 / -1;
}

.dash-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.dash-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.dash-card-unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
}

.dash-card-sub {
  font-size: 11px;
  color: var(--text-dim);
  min-height: 16px;
}

.dash-pct.good {
  color: var(--hp-green);
}

.dash-pct.bad {
  color: var(--danger);
}

/* グラフの枠は高さを固定する (グラフ 150 + 読み取り行 18)。表に切り替えても同じ高さを取り、カードの大きさを変えない */
.dash-card .stats-chart {
  height: 168px;
}

.dash-card .stats-chart svg {
  width: 100%;
  height: 150px;
}

.dash-table-box {
  height: 168px;
  max-height: none;
  margin-top: 6px;
}

.dash-mini-kpis {
  margin: 8px 0;
}

.dash-usage-table {
  margin-top: 8px;
}

.dash-card .stats-table td:nth-child(2),
.dash-card .stats-table th:nth-child(2) {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dash-header {
    padding: 8px 10px;
  }

  .dash-body {
    padding: 10px 10px 48px;
  }

  .dash-legend-note {
    margin-left: 0;
  }
}

/* ---- スキル画面 (2026-09-10): 数字だけのスキルpt の説明フロート / 前提スキルへのリンク / 一括習得の確認 ---- */
.skill-pt-float {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-bright);
  background: rgba(10, 7, 3, 0.92);
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  padding: 3px 10px;
  pointer-events: none;
  animation: skill-pt-float 3s ease forwards;
}

@keyframes skill-pt-float {
  0% {
    opacity: 0;
    transform: translate(-50%, -4px);
  }
  10%,
  80% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
}

/* 前提スキル名: 押せることが分かるよう点線の下線 (見た目は周りの文字のまま) */
.skill-req-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* 前提スキルへ飛んだとき、行き先のノードを一瞬光らせる */
.tree-node.focus-pulse {
  animation: skill-focus-pulse 1.2s ease;
}

@keyframes skill-focus-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(242, 205, 114, 0);
  }
  30% {
    box-shadow: 0 0 0 6px rgba(242, 205, 114, 0.55);
  }
}

/* 一括習得の確認: 名前 (左) / Rank a → b / 消費pt (右) の3列を行ごとに揃える */
.skill-path-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 10px;
}

.skill-path-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 3.6em;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}

.skill-path-name {
  text-align: left;
  overflow-wrap: anywhere;
}

.skill-path-rank {
  text-align: right;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.skill-path-rank b {
  color: var(--text);
  font-size: 15px;
}

.skill-path-cost {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.skill-path-total {
  border-top: 1px solid var(--panel-edge);
  padding-top: 6px;
  margin-top: 2px;
}

.skill-path-total .skill-path-rank b {
  color: var(--gold-bright);
}

/* 一括習得の「効果」: 得られる量を 名前 (左) / 値 (右・緑) で。ジョブ選択中だけの分は名前の下に小さく */
.skill-path-section {
  /* モーダル全体の中央寄せを継がず、行の頭 (名前の列) と揃える */
  text-align: left;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--panel-edge);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
}

.skill-path-gain {
  grid-template-columns: minmax(0, 1fr) auto;
}

.skill-path-up {
  text-align: right;
  color: var(--hp-green);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.skill-path-cond {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
}

.skill-path-note {
  font-size: 12px;
  color: var(--text-dim);
}

/* ---- 管理画面の問い合わせ (2026-09-11): 一覧 (左) とやりとり (右)。狭い画面は一覧 → やりとりを切り替えて表示 ---- */
.dash-header .dash-title {
  margin-right: 0;
}

.dash-mode {
  display: flex;
  gap: 6px;
  margin-right: auto;
}

.inbox {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 12px;
  /* 画面の高さに収め、一覧とやりとりをそれぞれスクロールさせる (ページごと流れない) */
  height: calc(100dvh - 100px);
}

.inbox-list,
.inbox-detail {
  min-height: 0;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--panel), var(--panel-inner));
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 10px;
}

.inbox-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.inbox-reload {
  margin-left: auto;
}

.inbox-count {
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.inbox-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: var(--panel-edge);
  color: var(--text);
  font-family: inherit;
  padding: 8px 6px;
  cursor: pointer;
}

.inbox-row.on {
  border-color: var(--gold);
  border-radius: 8px;
  background: rgba(212, 169, 78, 0.08);
}

.inbox-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inbox-row-name {
  font-weight: 700;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.inbox-row-replied {
  font-size: 10px;
  color: var(--text-dim);
}

.inbox-row-time {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
}

.inbox-row-snippet {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.inbox-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inbox-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 一覧へ戻るのは狭い画面だけ (広い画面は左に一覧が出ている) */
.inbox-back {
  display: none;
}

.inbox-detail-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
}

.inbox-detail-addr {
  font-size: 11px;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.inbox-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inbox-item {
  max-width: 88%;
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel-inner);
}

/* こちらから送った返信は右に寄せ、枠を金に */
.inbox-item.out {
  margin-left: auto;
  border-color: var(--gold);
}

.inbox-item.failed {
  border-color: var(--danger);
}

/* いま返信しようとしている1件 (2026-09-21 専務)。どれに返すのか一目で分かるようにする */
.inbox-item.target {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 1px var(--gold-bright) inset;
}
.inbox-item-target-mark {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(212, 169, 78, 0.22);
  color: var(--gold-bright);
  font-weight: 700;
}
.inbox-item-pick {
  margin-left: auto;
}
.inbox-compose-target {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.inbox-compose-target b {
  color: var(--gold-bright);
}

.inbox-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.inbox-kind {
  font-weight: 700;
  color: var(--text);
}

.inbox-kind.bug {
  color: var(--danger);
}

.inbox-kind.out {
  color: var(--gold-bright);
}

.inbox-item-subject {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
}

.inbox-item-text {
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.inbox-item-error {
  margin-top: 6px;
  font-size: 11px;
  color: var(--danger);
}

.inbox-compose {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--panel-edge);
}

.inbox-compose-from {
  font-size: 11px;
  color: var(--text-dim);
}

.inbox-compose-actions {
  display: flex;
  justify-content: flex-end;
}

.inbox-confirm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  margin-bottom: 10px;
}

.inbox-confirm-row {
  display: grid;
  grid-template-columns: 4em minmax(0, 1fr);
  gap: 8px;
  font-size: 13px;
}

.inbox-confirm-row > span:first-child {
  color: var(--text-dim);
}

.inbox-confirm-body {
  max-height: 40vh;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel-inner);
}

@media (max-width: 760px) {
  .inbox {
    grid-template-columns: minmax(0, 1fr);
    height: calc(100dvh - 150px);
  }

  .inbox.has-selection .inbox-list {
    display: none;
  }

  .inbox:not(.has-selection) .inbox-detail {
    display: none;
  }

  .inbox-back {
    display: inline-flex;
  }

  .inbox-item {
    max-width: 100%;
  }
}
.battle-atb-tools { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.battle-detail-button { width: 34px; height: 34px; padding: 0; font-size: 18px; }
.battle-popup-front { position: absolute; z-index: 30; pointer-events: none; }
.battle-player-details .stat-cell { flex-direction: column; align-items: flex-start; gap: 3px; }
.picker-filters { position: sticky; top: -6px; z-index: 1; display: flex; gap: 6px; padding: 8px 0; background: #2b2115; flex-shrink: 0; }
.picker-filters .btn { flex: 1; opacity: .5; }
.picker-filters .btn.active { opacity: 1; border-color: var(--gold); background: rgba(218, 180, 93, .2); }
.equip-compare-panel { width: min(760px, 96vw); max-width: 96vw; max-height: 94dvh; padding: 20px; }
.equip-compare-panel > .item-card { margin-bottom: 10px; }
.equip-compare-arrow { text-align: center; font-size: 26px; color: var(--gold); margin: 10px 0; }
.equip-delta { font-size: 11px; margin-left: 5px; white-space: nowrap; font-weight: 700; }
.equip-delta.up { color: #79d797; }
.equip-delta.down { color: #ff8b8b; }
/* 能力値を「項目名 / 数字」の2段で見せる (数字が大きい画面用。横並びだと項目名が1文字ずつ折り返して崩れる)。
   訓練の構成確認・プレイヤーカード (ランキング/チャット) で共通 */
.stat-grid-stack > .stat-cell { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 2px; min-height: 60px; min-width: 0; }
.stat-grid-stack .stat-label { white-space: nowrap; }
.stat-grid-stack .stat-value { align-self: flex-end; max-width: 100%; font-size: clamp(12px, 3.7vw, 18px); white-space: nowrap; } /* 数字はホームと同じく右詰め */
@media (max-width: 600px) {
  .equip-slots, .player-card-panel .equip-slots { grid-template-columns: minmax(0, 1fr); }
  .equip-compare-panel { padding: 12px; }
}

.practice-result .stat-grid { grid-template-columns: minmax(0, 1fr); }
.practice-result .stat-cell { min-width:0; gap:8px; flex-wrap:wrap; text-align:left; }
.practice-result .stat-label { white-space:normal; word-break:normal; }
.practice-result .stat-value { white-space:nowrap; font-size:14px; margin-left:auto; }
.practice-result .stat-value small { color:var(--muted); font-size:12px; }
.practice-result .practice-damage-list { display:grid; gap:8px; }
.practice-result details { text-align:left; font-size:12px; }

@media(max-width:600px){ .rune-row {grid-template-columns:minmax(0,1fr);} .mission-label {display:none;} }

.lb-base-choice {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
.lb-base-choice .lb-base-prompt {grid-column:1 / -1;margin:0;}
.lb-base-choice>div {min-width:0;display:flex;flex-direction:column;gap:8px;}
.lb-base-choice>div>.item-card {flex:1;min-width:0;margin:0;}
.lb-base-choice>div>.btn {width:100%;min-width:0;min-height:44px;margin:0;white-space:nowrap;}

.mission-close {position:fixed;top:16px;right:16px;width:36px;height:36px;padding:0;border-radius:50%;z-index:13010;display:grid;place-items:center;line-height:1;background:#f2cf79;color:#251a08;border:2px solid #fff0c3;box-shadow:0 2px 10px #0009;}

.item-lock {position:absolute;right:8px;top:8px;width:32px;height:32px;display:grid;place-items:center;border:1px solid #756b52;border-radius:50%;background:#29261f;filter:grayscale(1);opacity:.5;cursor:pointer;z-index:2;padding:0;}
.item-lock.active {filter:none;opacity:1;background:#f2cf79;border-color:#fff0c3;}
.item-card:has(.item-lock) .item-card-head {padding-right:38px;}

.permanent-page {padding:64px 12px 90px;max-width:820px;margin:auto;background:#211b13d9;}
.permanent-tree {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px;}
.permanent-branch {display:flex;flex-direction:column;gap:24px;}
.permanent-node {position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;height:148px;padding:8px 2px;white-space:nowrap;min-width:0;font-size:12px;}
.permanent-node:not(:first-child)::before {content:'';position:absolute;width:2px;height:24px;background:var(--gold,#bda364);top:-25px;left:calc(50% - 1px);pointer-events:none;}
.permanent-icon {font-size:22px;height:28px;}
.permanent-cost {font-size:11px;font-variant-numeric:tabular-nums;}
.permanent-stock {width:112px;height:32px;text-align:center;cursor:pointer;color:#f2cf79;border:1px solid #bda364;background:#211b13;font-variant-numeric:tabular-nums;}
.permanent-budget {display:flex;justify-content:space-between;gap:12px;padding:12px 0;}
.permanent-allocation-summary {position:sticky;top:0;background:var(--panel,#211b13);z-index:3;padding:8px 0;}

/* 戦闘UI自体をマウントしない。回転は白い点1個のtransformだけ。 */
.arena-low-power { align-items: flex-end; background-color: #121212; isolation: isolate; }
.arena-low-power::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 4; pointer-events: none; }
.quiet-run-status { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; }
.quiet-orbit { width: 24px; height: 24px; display: inline-block; animation: quiet-orbit 2s linear infinite; }
.quiet-orbit::before { content: ''; display: block; width: 5px; height: 5px; margin: 0 auto; border-radius: 50%; background: #fff; }
@keyframes quiet-orbit { to { transform: rotate(360deg); } }
.low-power .run-screen .result-overlay *, .low-power .run-screen .result-overlay *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .quiet-orbit { animation: none; } }

.low-power .run-screen .replay-log { visibility: hidden; }
.low-power .run-screen:has(.result-overlay) .quiet-orbit { animation: none; }

/* ステージ情報を集約し、操作は常に一列に固定する */
.dungeon-float-bar { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'heading' 'meta' 'actions'; gap:16px; padding:18px 16px 65px; }
/* 出撃バーは 3 段 (ステージ名＋難易度＋切替 / ？と挑戦回数 / 訓練・スキップ・出撃)。2026-09-20 専務 */
.dungeon-bar-heading { grid-area: heading; display:flex; align-items:center; gap:10px; min-width:0; }
/* ステージ名はステージの背景を敷いた枠に (暗くして文字を読ませる)。入りきらない名前はマーキー。2026-09-20 専務 */
.dungeon-bar-heading .dungeon-bar-info {
  flex:1 1 auto;
  min-width:0;
  min-height:42px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--panel-edge);
  background-size:cover;
  /* 中央より少し下を見せる (上が空・下が地面の絵が多いので。2026-09-20 専務) */
  background-position:center 62%;
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.62);
  display:flex;
  /* 元の指定が縦並びなので、ここで横並びに戻してから縦中央に置く */
  flex-direction:row;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.dungeon-bar-heading .dungeon-bar-info .dungeon-bar-name { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
/* ステージ枠の切替ボタンを背景の上下に重ねる */
.dungeon-stage-control { position:relative; flex:1 1 auto; min-width:0; }
.dungeon-stage-control > .dungeon-bar-info { width:100%; flex:none; padding-right:124px; }
.dungeon-shortcut-arrow {
  width:27px;
  height:25px;
  flex:0 0 27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(220, 190, 115, 0.52);
  border-radius:7px;
  background:rgba(25, 22, 18, 0.62);
  color:rgba(248, 224, 160, 0.9);
  font:700 11px/1 var(--font-body);
  text-shadow:0 1px 3px #000;
  box-shadow:0 2px 7px rgba(0,0,0,.28);
  cursor:pointer;
  animation:dungeon-shortcut-pulse 2.8s ease-in-out infinite;
}
.dungeon-shortcut-arrow:hover { background:rgba(64, 51, 31, 0.82); color:#ffe9ac; }
.dungeon-shortcut-arrow:active { animation:none; }
.dungeon-shortcut-spacer { display:inline-block; width:27px; height:25px; flex:0 0 27px; visibility:hidden; }
.dungeon-stage-arrow-up,
.dungeon-stage-arrow-down { position:absolute; z-index:5; left:50%; transform:translateX(-50%); }
.dungeon-stage-arrow-up { top:-8px; }
.dungeon-stage-arrow-down { bottom:-8px; }
.dungeon-difficulty-control {
  position:absolute;
  z-index:5;
  top:50%;
  right:5px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:3px;
}
.dungeon-difficulty-control > .dungeon-bar-diff { position:relative; top:auto; right:auto; transform:none; }
.dungeon-difficulty-control > .dungeon-diff-motion,
.dungeon-difficulty-control > .dungeon-diff-drag { position:relative; top:auto; right:auto; transform:none; }
@media(max-width:700px) {
  .dungeon-stage-arrow-up,
  .dungeon-stage-arrow-down,
  .dungeon-difficulty-control > .dungeon-shortcut-arrow,
  .dungeon-difficulty-control > .dungeon-shortcut-spacer { display:none; }
  .dungeon-stage-control > .dungeon-bar-info { padding-right:90px; }
}
@keyframes dungeon-shortcut-pulse {
  0%,100% { opacity:.52; }
  50% { opacity:.94; }
}
/* 難易度は枠の右端・縦中央に置き、左右の矢印を添える */
.dungeon-bar-diff { position:absolute; top:50%; right:8px; transform:translateY(-50%); }
/* ここでは名前の実際の幅を見て縮めたいので、marquee の inline-size 封じ込めは外す (幅は min-width:0 で抑える) */
.dungeon-bar-name__text.marquee { contain:none; }
/* 難易度チップと切替は名前の長さで動かさない (名前だけが縮む) */
.dungeon-bar-heading .hard-chip { flex-shrink:0; }
.dungeon-bar-meta { grid-area:meta; display:flex; align-items:center; gap:8px; min-width:0; }
/* 周回数と品質上限の伸び (小さく・？の左)。数字が増えても位置が動かないよう右の挑戦回数は右端固定 */
.dungeon-bar-note { font-size:11px; color:var(--text-dim); white-space:nowrap; }
.dungeon-bar-meta .attempts-badge { margin-left:auto; }
.dungeon-bar-actions { grid-area:actions; display:grid; grid-template-columns:1fr 1fr 1.7fr; align-items:stretch; gap:10px; min-width:0; }
.dungeon-bar-actions .btn { min-height:46px; margin:0; display:flex; align-items:center; justify-content:center; gap:6px; }
.dungeon-bar-actions .dungeon-training { font-size:13px; }
.dungeon-float-bar.collapsed > .dungeon-bar-heading,
.dungeon-float-bar.collapsed > .dungeon-bar-actions { display:none; }
@media(max-width:480px) {
  .dungeon-bar-actions .btn-sortie { padding:10px 16px; font-size:14px; }
  .dungeon-bar-actions .btn-skip { padding:10px; font-size:12px; }
}

/* 背景は画面全体を覆い、内容だけを切り欠き・ホームインジケータから離す。 */
.app { padding: calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(190px + var(--safe-bottom)) calc(12px + var(--safe-left)); }
.bottom-nav { padding-left:var(--safe-left); padding-right:var(--safe-right); padding-bottom:var(--safe-bottom); }
.dungeon-float-bar { padding-left:calc(12px + var(--safe-left)); padding-right:calc(12px + var(--safe-right)); padding-bottom:calc(65px + var(--safe-bottom)); }
.dungeon-float-bar.collapsed { padding:0; bottom:calc(57px + var(--safe-bottom)); }
.confirm-overlay { padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left)); }
.confirm-overlay > .confirm-panel { max-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)); }
@media(max-width:480px) {
  .app { padding:calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) calc(190px + var(--safe-bottom)) calc(8px + var(--safe-left)); }
  .dungeon-float-bar { padding-left:calc(8px + var(--safe-left)); padding-right:calc(8px + var(--safe-right)); }
  .dungeon-float-bar.collapsed { padding:0; }
}

.run-menu-button { width:32px; height:32px; padding:0; flex-shrink:0; font-size:20px; line-height:1; }
.battle-codex-open .run-screen { display:none; }
.battle-codex-page { position:fixed; inset:0; z-index:12000; overflow-y:auto; overscroll-behavior:contain; background:var(--bg); padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(80px + var(--safe-bottom)) calc(12px + var(--safe-left)); }
.battle-codex-page > * { max-width:768px; margin-left:auto; margin-right:auto; }
.battle-codex-close { position:fixed; z-index:14000; right:calc(12px + var(--safe-right)); bottom:calc(12px + var(--safe-bottom)); min-height:44px; box-shadow:0 3px 14px #0009; }
/* 名前の幅はカード側で確保する（inline-size包含で0幅にならないように）。 */
.codex-name-row > .marquee { flex:1; }
.codex-card > .marquee { width:100%; }

.fig-detail__body .fig-effect { width:100%; gap:8px; }
.fig-effect__value { font-size:16px; line-height:1.65; color:var(--text); font-weight:600; overflow-wrap:anywhere; }
.fig-effect__value .term-link { color:inherit; font:inherit; white-space:normal; }
.fig-effect__arrow { font-size:20px; color:var(--text-dim); }

.fig-shard-progress { font-size:14px; color:var(--text); margin-top:4px; }

/* 図鑑中の制覇通知。出現時だけ動かし、周回の追加通信は行わない。 */
.codex-clear-banner { position:fixed; z-index:14010; top:calc(10px + var(--safe-top)); left:calc(12px + var(--safe-left)); right:calc(12px + var(--safe-right)); margin:0 auto; max-width:440px; padding:16px 36px 16px 16px; border:1px solid var(--gold); border-radius:14px; background:linear-gradient(180deg,#3a3020,#241c13); box-shadow:0 8px 24px #0009; color:var(--text); animation:codex-notice-enter .35s ease-out both; }
.codex-clear-heading { font-size:17px; font-weight:700; color:var(--gold-bright); }
.codex-clear-heading span { color:var(--text); font-size:15px; }
.codex-clear-drops { margin-top:8px; max-height:28dvh; overflow-y:auto; }
.codex-clear-drops > div { font-size:14px; line-height:1.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.codex-clear-drops small { font-size:11px; }
.codex-clear-epic { color:#e4b5ff; }
.codex-clear-legend { color:#ffd18b; }
.codex-clear-dismiss { position:absolute; right:4px; top:4px; width:32px; height:32px; border:0; background:transparent; color:var(--text); font-size:24px; cursor:pointer; }
@keyframes codex-notice-enter { from { transform:translateY(calc(-100% - 20px - var(--safe-top))); opacity:0; } to { transform:translateY(0); opacity:1; } }
@media(prefers-reduced-motion:reduce) { .codex-clear-banner { animation:none; } }

.result-xp-line { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; }
.result-xp-bonus { display:inline-flex; align-items:center; gap:3px; color:#ffd578; font-size:13px; font-weight:700; white-space:nowrap; }
.result-xp-bonus img { width:28px; height:28px; object-fit:contain; image-rendering:pixelated; }


.true-recommend-rune-effects {display:flex;align-items:center;gap:8px;min-width:0}
.true-recommend-rune-effects .rune-effects {min-width:0;flex:1}

.job-rank-effects {display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.5;color:var(--text);text-align:left;white-space:normal}
.job-rank-effects .muted {font-size:12px}
/* 広告設定と集計も既存の暗色・金色UIに揃える。ネイティブ選択肢の薄い背景を避ける。 */
.ad-consent { width: 100%; max-width: 560px; margin: 12px auto; padding: 12px; border: 1px solid var(--panel-edge); border-radius: 8px; background: var(--panel, #1e1911); color: var(--text, #eee5d0); text-align: left; }
.ad-consent-title, .ad-consent-actions { display: flex; align-items: center; gap: 8px; }
.ad-consent-title > button { margin-left: auto; }
.ad-consent p { font-size: 13px; margin: 8px 0; }
.ad-consent-actions > button { flex: 1; }
.acquisition-filters { flex-wrap: wrap; align-items: end; }
.acquisition-filters label { display: grid; gap: 4px; min-width: 140px; font-size: 13px; }
.acquisition-filters input, .acquisition-filters select, .acquisition-filters option { background: #18140e; color: #f2e6c6; border: 1px solid #887343; padding: 8px; border-radius: 5px; color-scheme: dark; max-width: 240px; }
.acquisition-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.acquisition-summary .dash-card { padding: 16px; }
.acquisition-summary strong { display: block; font-size: 28px; color: var(--gold-bright); }
.acquisition-table { overflow-x: auto; margin-bottom: 18px; }
.acquisition-table table { width: 100%; border-collapse: collapse; min-width: 660px; text-align: left; }
.acquisition-table th, .acquisition-table td { padding: 12px; border-bottom: 1px solid #55462e; }
.acquisition-table small { display: block; opacity: .75; margin-top: 4px; }
.acquisition-dashboard details p { max-width: 800px; line-height: 1.7; }
@media(max-width: 600px) { .acquisition-summary { grid-template-columns: 1fr; } }

/* ---- マギドール (ペット。2026-09-14) ---- */
/* 表示本体: 呼吸 (ゆっくり拡大縮小)。浮遊・飛行は上下も。粒子は後ろに流れる */
.pet-sprite {
  position: relative;
  display: inline-block;
  pointer-events: none;
}
.pet-sprite__body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pet-breathe 3.6s ease-in-out infinite;
  /* 呼吸は下端を軸に上方向へ (絵の下端は本体の 90% 位置。2026-09-16 専務) */
  transform-origin: 50% 90%;
}
.pet-sprite.kind-float .pet-sprite__body,
.pet-sprite.kind-fly .pet-sprite__body {
  animation: pet-breathe 3.6s ease-in-out infinite, pet-bob 4s ease-in-out infinite;
}
.pet-sprite.still .pet-sprite__body,
.low-power .pet-sprite__body {
  animation: none;
}
.pet-sprite__img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
/* マギスフィアの絵 (images/pet/magisphere.png、2026-09-15)。スキン無しの本体と起動演出・アイコンで共用 */
.pet-sprite__orb {
  width: 70%;
  height: 70%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(159, 212, 255, 0.8));
}
.magisphere-icon { width: 18px; height: 18px; vertical-align: -4px; image-rendering: pixelated; }
@keyframes pet-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02, 1.05); }
}
@keyframes pet-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
.pet-sprite__dots {
  position: absolute;
  inset: -20% -20% -10% -20%;
  overflow: visible;
}
.pet-sprite__dots i {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 4px currentColor;
  animation: pet-dot-flow 4.2s linear infinite;
}
.pet-sprite.particle-rise .pet-sprite__dots i { animation-name: pet-dot-rise; }
.pet-sprite.particle-orbit .pet-sprite__dots i { animation-name: pet-dot-orbit; }
.pet-sprite.particle-fall .pet-sprite__dots i { animation-name: pet-dot-fall; }
.pet-sprite.still .pet-sprite__dots i,
.low-power .pet-sprite__dots i {
  animation: none;
  opacity: 0;
}
@keyframes pet-dot-flow {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translate(-28px, 6px); opacity: 0; }
}
@keyframes pet-dot-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translate(0, -30px); opacity: 0; }
}
@keyframes pet-dot-orbit {
  0% { transform: rotate(0deg) translateX(18px); opacity: 0.2; }
  50% { opacity: 0.9; }
  100% { transform: rotate(360deg) translateX(18px); opacity: 0.2; }
}
@keyframes pet-dot-fall {
  0% { transform: translate(0, -24px); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translate(4px, 12px); opacity: 0; }
}

/* ホーム: アバター枠の中 (接地=足元左 / 浮遊=腰 / 飛行=頭) */
.char-avatar-frame { position: relative; }
.pet-home-slot {
  position: absolute;
  left: -6px;
  bottom: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.pet-home-slot.kind-float { bottom: 46px; }
.pet-home-slot.kind-fly { bottom: 86px; }
.pet-home-slot.empty {
  width: 28px;
  height: 28px;
  bottom: 6px;
  left: 0;
}
.pet-home-plus {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px dashed var(--gold);
  color: var(--gold);
  font-size: 14px;
  background: rgba(0, 0, 0, 0.35);
}
.pet-home-plus .bottom-nav-badge { top: -8px; right: -8px; }

/* バトル: 自分の左横 (接地=足元 / 浮遊=腰 / 飛行=頭) */
.pet-arena {
  position: absolute;
  /* 自分の立ち絵の左端にギリギリ重なる位置 (2026-09-17 専務)。バディより手前に出す */
  left: 13%;
  bottom: 8px;
  z-index: 5;
}
.pet-arena.kind-float { bottom: 56px; }
.pet-arena.kind-fly { bottom: 110px; }
.magisphere-note { color: #c8f0ff; }

/* マギドール画面 */
.pet-panel {
  max-width: 480px;
  text-align: left;
  position: relative;
}
.pet-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pet-head {
  display: flex;
  gap: 12px;
  align-items: center;
}
.pet-head__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pet-name-btn {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--gold-bright);
  background: transparent;
  border: none;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
/* 素質: ラベル列 (固定幅) + ゲージ列。ゲージの左端が揃う */
.pet-talents { display: grid; grid-template-columns: 1fr; gap: 4px 10px; font-size: 11px; }
.pet-talents.big { font-size: 13px; width: 100%; max-width: 300px; }
.pet-talent { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 6px; white-space: nowrap; }
.pet-talent__label { overflow: hidden; text-overflow: ellipsis; }
.pet-gauge { display: inline-flex; align-items: center; gap: 2px; }
.pet-gauge i { display: inline-block; width: 4px; height: 10px; border-radius: 1px; background: currentColor; opacity: 0.18; }
.pet-gauge i.on { opacity: 1; }
.pet-gauge__num { margin-left: 5px; font-size: 11px; font-variant-numeric: tabular-nums; }
.pet-list__sphere { width: 40px; height: 40px; image-rendering: pixelated; }
.pet-list__act { margin-left: auto; }
.pet-sec {
  margin: 12px 0 6px;
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 14px;
}
.pet-type-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.pet-secret-chip {
  font-size: 10px;
  color: #ffe9a8;
  border: 1px solid #f2cd72;
  border-radius: 4px;
  padding: 0 4px;
  margin-right: 4px;
}
.pet-passives { display: flex; flex-direction: column; gap: 4px; }
.pet-passive {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'type name' 'type desc';
  column-gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.pet-passive .pet-type-chip { grid-area: type; }
.pet-passive__name { grid-area: name; font-weight: 700; font-size: 13px; }
.pet-passive__desc { grid-area: desc; font-size: 12px; color: var(--text-dim); }
.pet-passive.empty { grid-template-columns: 1fr; grid-template-areas: 'name'; text-align: center; cursor: default; }
.pet-passive.empty .pet-passive__name { color: var(--text-dim); font-weight: normal; font-size: 12px; }
.pet-passive.empty.open .pet-passive__name { color: var(--gold-bright); }
.pet-secrets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pet-memoria { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.pet-memoria b { font-size: 20px; color: var(--gold-bright); }
.pet-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.pet-stat { display: grid; grid-template-columns: 44px 1fr 36px; align-items: center; gap: 6px; font-size: 12px; }
.pet-stat__bar { height: 6px; }
.pet-stat__value { text-align: right; font-variant-numeric: tabular-nums; }
.pet-actions { flex-wrap: wrap; }
.pet-list { display: flex; flex-direction: column; gap: 4px; }
.pet-list__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
}
.pet-list__row.selected { border-color: var(--gold); }
.pet-list__row.pick { width: 100%; cursor: pointer; color: var(--text); }
.pet-list__pick {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  padding: 0;
}
/* 一覧の列を固定: 名前は同じ幅 (はみ出しはマーキー)、Lv・レーダーは全行で同じ位置 (2026-09-15) */
.pet-list__row > .pet-sprite, .pet-list__pick > .pet-sprite { flex: 0 0 40px; width: 40px !important; height: 40px !important; }
.pet-list__sphere { flex: 0 0 40px; }
.pet-list__name { font-weight: 700; width: 92px; flex: 0 0 92px; }
.pet-list__lv { color: var(--text-dim); font-size: 12px; width: 44px; flex: 0 0 44px; font-variant-numeric: tabular-nums; }
.pet-list__talents { display: inline-flex; gap: 3px; font-size: 12px; width: 34px; flex: 0 0 34px; }
.pet-list__state { margin-left: auto; }
.pet-list__row .btn-tiny:first-of-type { margin-left: auto; }
.pet-list__row .pet-list__state + .btn-tiny, .pet-list__row .pet-list__state ~ .btn-tiny { margin-left: 0; }
@media (max-width: 380px) { .pet-list__name { width: 72px; flex-basis: 72px; } }
.pet-offer { display: flex; flex-direction: column; gap: 6px; }
.pet-offer__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'type name' 'type desc';
  column-gap: 8px;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: rgba(212, 169, 78, 0.12);
  color: var(--text);
  cursor: pointer;
}
.pet-offer__card .pet-type-chip { grid-area: type; }
.pet-absorb-panel { max-width: 480px; text-align: left; }
.pet-absorb-list {
  max-height: 40vh;
  max-height: 40dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  scrollbar-width: thin;
}
.pet-absorb-row {
  display: grid;
  grid-template-columns: 28px 28px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 12px;
}
.pet-absorb-row.picked { border-color: var(--gold); background: rgba(212, 169, 78, 0.16); }
.pet-absorb-row .item-icon { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
/* 行頭の詳細ボタン (真円・押しやすい 28px)。行の選択と別に押せる */
.pet-absorb-row__detail { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--panel-edge); background: var(--panel-inner); color: var(--gold-bright); font-weight: 700; font-size: 13px; font-family: var(--font-title); cursor: pointer; padding: 0; flex: none; }
.pet-absorb-row__detail:active { background: var(--panel-edge); }
.pet-absorb-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-absorb-row__xp { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.pet-absorb-diff { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; }
.pet-absorb-diff b.up { color: #5cc45c; }
.pet-skins { display: flex; flex-wrap: wrap; gap: 6px; }
.pet-skin {
  width: 52px;
  height: 52px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-dim);
  font-size: 9px;
  cursor: pointer;
  padding: 2px;
}
.pet-skin.active { border-color: var(--gold); }
.pet-skin img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.pet-particles { display: flex; flex-wrap: wrap; gap: 6px; }
.pet-activation { display: flex; flex-direction: column; gap: 10px; align-items: center; }
/* マギドール画面の上に、取り込み・候補・起動などの子モーダルを重ねる (同じ z だと DOM 順で下に潜る) */
.confirm-overlay:has(> .pet-panel) {
  z-index: 13090;
}
/* タイプチップは 2 行ぶんに伸ばさない (楕円にしない) */
.pet-passive .pet-type-chip,
.pet-offer__card .pet-type-chip {
  align-self: start;
  margin-top: 2px;
}
/* バトルでは背景に埋もれないよう淡い光を足す */
.pet-arena .pet-sprite__img {
  filter: drop-shadow(0 0 6px rgba(200, 240, 255, 0.85)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}

/* 管理: メグラン連携 */
.admin-link-panel { max-width: 440px; text-align: left; }
.admin-link-sec { margin: 14px 0 6px; font-family: var(--font-title); color: var(--gold); font-size: 14px; }
.admin-link-key { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.5px; }
.admin-link-google { display: flex; justify-content: center; min-height: 44px; margin: 6px 0; }

/* ---- マギドール: 素質レーダー・起動演出 (2026-09-15) ---- */
.talent-radar { display: block; margin: 0 auto; overflow: visible; }
.talent-radar__grid { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.talent-radar__axis { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.talent-radar__area { fill-opacity: 0.28; stroke-width: 2; stroke-linejoin: round; }
.talent-radar__label { font-size: 10px; font-family: var(--font-title); }
.pet-radar-wrap { display: flex; justify-content: center; }
.pet-src-badge {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #1a1206;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pet-act { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pet-act__stage { position: relative; width: 260px; height: 140px; }
.pet-act__orb {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  background: url('/images/pet/magisphere.png?v=2') center / contain no-repeat;
  image-rendering: pixelated;
  animation: pet-act-glow 1.3s ease-in-out 1 both, pet-breathe 3.6s ease-in-out 1.3s infinite;
}
@keyframes pet-act-glow {
  0% { filter: drop-shadow(0 0 6px rgba(159, 212, 255, 0.8)); transform: scale(0.9); }
  60% { filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 36px rgba(159, 212, 255, 0.9)); transform: scale(1.15); }
  100% { filter: drop-shadow(0 0 8px rgba(159, 212, 255, 0.85)); transform: scale(1); }
}
.pet-act__src {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.pet-act__src-name { font-size: 11px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* データの粒: 継承元の頭上からマギスフィア (上・中央) へ。--dx はステージ幅に対する % 差 */
.pet-act__bit {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
  animation: pet-act-bit 0.9s ease-in 1 both;
}
@keyframes pet-act-bit {
  0% { opacity: 0; translate: 0 0; }
  15% { opacity: 1; }
  100% { opacity: 0; translate: calc(var(--dx) * 2.6px) -74px; }
}
.low-power .pet-act__bit, .low-power .pet-act__orb { animation: none; }

/* マギスフィア (スキン無し本体) の色: 元絵は青 (色相 約 215°)。一番高い素質のタイプの色相へ回す。全部同じなら無色 (白っぽく) */
.pet-sprite__orb.tint-fortune, .pet-act__orb-wrap.tint-fortune { filter: hue-rotate(188deg) saturate(0.9) drop-shadow(0 0 6px rgba(242, 205, 114, 0.8)); }
.pet-sprite__orb.tint-assault, .pet-act__orb-wrap.tint-assault { filter: hue-rotate(148deg) saturate(1.1) drop-shadow(0 0 6px rgba(232, 72, 63, 0.8)); }
.pet-sprite__orb.tint-rampart, .pet-act__orb-wrap.tint-rampart { filter: drop-shadow(0 0 6px rgba(63, 116, 232, 0.8)); }
.pet-sprite__orb.tint-blitz, .pet-act__orb-wrap.tint-blitz { filter: hue-rotate(-46deg) saturate(0.9) drop-shadow(0 0 6px rgba(126, 240, 220, 0.8)); }
.pet-sprite__orb.tint-arcana, .pet-act__orb-wrap.tint-arcana { filter: hue-rotate(63deg) drop-shadow(0 0 6px rgba(176, 79, 232, 0.8)); }
.pet-sprite__orb.tint-none, .pet-act__orb-wrap.tint-none { filter: saturate(0) brightness(1.25) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)); }
.pet-list__talents .talent-radar { margin: 0; }
.talent-radar.mini .talent-radar__area { fill-opacity: 0.45; stroke-width: 1.5; }


/* マギドール: X を枠の外に出すため、パネルは overflow: visible、中身だけスクロール (プレイヤーカードと同じ作り) */
.pet-panel { overflow: visible; }
.pet-panel__scroll { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* 画面端の安全領域を暗くする帯 (index.html に固定配置)。モーダル類 (13000〜14000番台) より手前、操作は透過 */
.safe-shade { position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); z-index: 15000; pointer-events: none; }
.safe-shade-top { top: 0; height: var(--safe-top); }
.safe-shade-bottom { bottom: 0; height: var(--safe-bottom); }

/* 効果合計: 行の右に効果元ヒーローの小アイコン。行間は少し広め */
.fig-totals__list { gap: 7px; }
.fig-totals__line { flex-wrap: wrap; }
/* 効果元のアイコンは効果名の下に左詰めで並べる (右に置くと折り返しで揃わない) */
.fig-totals__srcs { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 3px; padding-left: 11px; }
.fig-totals__src {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fig-totals__src img { width: 24px; height: 24px; image-rendering: pixelated; object-fit: contain; }

/* オーバースクロールやツールバー伸縮の途中でブラウザが見せる地色も暗く (body より外側) */
html { background: var(--bg-deep); }

/* ---- ホームの [ジョブ] [ペット] ボタン行 / マギドールのページ (2026-09-15) ---- */
.char-job { flex-wrap: wrap; row-gap: 4px; }
.char-job__name { color: var(--text); margin-right: 8px; }
.pet-home-slot { pointer-events: none; }
.pet-page { text-align: left; }
/* 左のボタンぶんタイトルが右へずれていたので、左右に同じ幅の列を置いて画面の中央にそろえる (2026-09-20 専務) */
.pet-page__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 8px; }
.pet-page__head > :first-child { justify-self: start; }
.pet-page__head .credits-title { grid-column: 2; margin: 0; text-align: center; padding-right: 0; }
.pet-page__body { display: flex; flex-direction: column; gap: 8px; }
.pet-absorb-bulk { border: 1px solid var(--panel-edge); border-radius: 8px; padding: 8px; margin: 6px 0; background: rgba(0, 0, 0, 0.25); }

/* [ペット] は [ジョブ] の次の行に */
.char-job__break { flex-basis: 100%; height: 0; }

/* マギドールのステータスゲージ: 塗り色が無かった (2026-09-15 専務指摘)。基準はその個体の最大値 */
.pet-stat__bar .bar-fill { background: linear-gradient(90deg, #8a6d2f, var(--gold)); min-width: 2px; }
.pet-talent { grid-template-columns: 72px 1fr; }
.pet-stat__bar { display: block; }
.pet-stat__bar .bar-fill { display: block; }

/* マギドールのステータスは 1 列 (幅の狭い端末で 2 列だと収まらない) */
.pet-stats { grid-template-columns: 1fr; }
.pet-stat { grid-template-columns: 52px 1fr 40px; }

.pet-list__tools { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.pet-list__check { margin-left: auto; display: inline-flex; align-items: center; padding: 6px; cursor: pointer; }
.pet-list__check input { width: 20px; height: 20px; accent-color: var(--gold); margin: 0; }

.pet-talents--full { margin-top: 8px; }
.pet-talents--full .pet-talent { grid-template-columns: 84px 1fr; font-size: 12px; }

/* 素質のラベルは一色 (本文色)。タイプ色は先頭の ◆ だけ */
/* ゲージと ◆ はタイプ色 (span の color を継承)、文字だけ本文色に */
.pet-talent__label, .pet-talent__text, .pet-gauge__num { color: var(--text); }
.pet-talent__dot { font-style: normal; margin-right: 4px; font-size: 10px; }
.pet-name-btn__edit { font-size: 14px; color: var(--text-dim); margin-left: 4px; }
.pet-list__row--sphere .pet-list__lv { color: var(--text); width: auto; flex-basis: auto; min-width: 44px; }
.pet-talents--full .pet-talent { grid-template-columns: 100px 1fr; }
.pet-talents.big .pet-talent { grid-template-columns: 100px 1fr; }

.pet-act__orb-wrap { position: absolute; left: 50%; top: 8px; width: 44px; height: 44px; margin-left: -22px; }
.pet-act__orb-wrap .pet-act__orb { left: 0; top: 0; margin-left: 0; }
/* 素質の行: ラベル列は ◆ 込みで 100px、文字は左寄せ */
.pet-talent { grid-template-columns: 100px 1fr; text-align: left; }

/* ページ見出し: 左「‹ ホーム」/ 中央タイトル / 右「一覧」(全体の操作。個別の操作は下のボタン列) */
.pet-page__head .credits-title { padding-right: 0; }
.pet-page__list { position: relative; }
.pet-page__list .badge-dot { position: absolute; top: -4px; right: -4px; }

/* 数字なしのバルーン (点)。ボタンの右上に乗せる。カテゴリを開いた先の該当行にも同じ点を付けて、何に付いていたかを最後まで示す */
.badge-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e0455a;
  box-shadow: 0 0 0 2px var(--panel, #1a1206);
  pointer-events: none;
}
.job-change-btn { position: relative; }
.dungeon-select-name .badge-dot, .pet-list__lv .badge-dot { position: static; display: inline-block; margin-left: 6px; vertical-align: middle; box-shadow: none; }

/* ステータスゲージ: 上限 500 を 20 目盛 (25 刻み) で。塗りは目盛単位で切り上げ */
.pet-stat__bar .bar-fill { transition: none; }
.pet-stat__bar .bar-fill.has-value { min-width: 2px; }
.pet-sec__note { font-family: var(--font-body, inherit); font-size: 11px; color: var(--text-dim); margin-left: 6px; }

/* ヘルプのページ (設定→ヘルプ)。中身はモーダル版と同じ */
.help-page { text-align: left; }
.help-page .intro-slides, .help-page .help-topic-lines { text-align: left; }
/* アコーディオンの中の項目は親より少しだけ右に (ページ版・モーダル版とも) */
.help-index-row--sub, .help-page--index .help-index-row--sub, .help-index-panel .help-index-row--sub { margin-left: 14px; }
.pet-sec .btn-help { margin-left: 6px; vertical-align: middle; }

/* ヘルプのページ版の一覧: モーダル版と同じ行の見た目 */
.help-page--index .dungeon-select-list { max-height: none; overflow: visible; }
.help-page--index .help-index-row { flex-direction: row; padding: 8px 12px; }
.help-page--index .help-index-row .dungeon-select-name { font-size: 14px; }

/* 見出しと ？ を横並びに */
.pet-sec { display: flex; align-items: center; gap: 6px; }
.pet-sec .btn-help { margin-left: 0; }

/* 取り込み: 行の 2 段目に装備ごとのステータス変化、下に選択全体の 前 → 後 */
.pet-absorb-row { grid-template-columns: 28px 28px minmax(0, 1fr) auto auto auto; }
.pet-absorb-row__stats { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 11px; color: var(--text-dim); }
.pet-absorb-row__stats .up { color: #5cc45c; }
.pet-absorb-row__stats .down { color: #d97b6c; }
.pet-absorb-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.pet-absorb-stats b.up { color: #5cc45c; }
.pet-absorb-stats b.down { color: #d97b6c; }

/* 取り込み: 抑制の ⚠ */
.pet-damp-warn { background: none; border: none; color: #e9b949; cursor: pointer; padding: 0 2px; font-size: 12px; }
/* リザルト: マギスフィアの箱と枠 */
.chest-sprite--sphere { background-image: none; display: flex; align-items: flex-end; justify-content: center; }
.chest-sprite--sphere img { width: 64px; height: 64px; image-rendering: pixelated; transition: transform 0.2s, opacity 0.2s; }
.chest-sprite--sphere.row-1 img { transform: translateY(-6px) scale(1.06); }
.chest-sprite--sphere.row-2 img { opacity: 0; transform: translateY(-14px) scale(1.1); }
.sphere-drop-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; }
.sphere-drop-card__img { width: 56px; height: 56px; image-rendering: pixelated; }
.sphere-drop-card__name { font-weight: 700; }
.sphere-drop-card__label { font-size: 14px; font-variant-numeric: tabular-nums; }

/* 継承済みのマギドールは継承元に選べない */
.pet-list__row.pick.used { opacity: 0.5; cursor: not-allowed; }

/* 起動・転生モーダル内の一覧は箱の中でスクロール (個体・スフィアが増えてもボタンが画面外に行かない) */
.confirm-panel .pet-list { max-height: 40vh; overflow-y: auto; }

/* 起動画面: 継承元を選んだときの警告 (ボタンの直上に目立つ帯) */
.pet-warn { margin: 8px 0 2px; padding: 8px 10px; border: 1px solid #e9b949; border-radius: 8px; background: rgba(233, 185, 73, 0.12); color: #ffd97a; font-size: 12px; text-align: left; }

/* マギドール一覧のタブ (起動中 / 起動前) */
.pet-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.pet-tab { position: relative; flex: 1; padding: 8px 6px; border: 1px solid var(--panel-edge); border-radius: 8px; background: rgba(0, 0, 0, 0.25); color: var(--text-dim); font-family: var(--font-title); font-size: 13px; cursor: pointer; }
.pet-tab.active { color: var(--gold-bright); border-color: var(--gold); background: rgba(212, 169, 78, 0.12); }
.pet-tab .badge-dot { top: -4px; right: -4px; }

.mission-btn { position: relative; }

/* ---- 見た目: プレビュー / エフェクトの色 / スパーク (2026-09-16) ---- */
.pet-look-preview { display: flex; justify-content: center; padding: 10px 0 4px; }
.pet-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.pet-color { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--panel-edge); border-radius: 8px; background: rgba(0, 0, 0, 0.25); color: var(--text); font-size: 12px; cursor: pointer; }
.pet-color.active { border-color: var(--gold); background: rgba(212, 169, 78, 0.16); }
.pet-color.locked { opacity: 0.55; cursor: not-allowed; }
.pet-color__swatch { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.pet-color__swatch--auto { background: #fff; }
.pet-color__lock { font-size: 10px; color: var(--text-dim); margin-left: 2px; }
.pet-sprite__sparks { position: absolute; inset: -20% -20% -10% -20%; overflow: visible; }
.pet-sprite.still .pet-sprite__sparks, .low-power .pet-sprite__sparks { display: none; }
.pet-sprite__sparks .spark-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* D 放射の閃光: 細い光が外へ弾ける */
.spark-ray { position: absolute; left: 50%; top: 50%; width: 34%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, currentColor, transparent); transform-origin: 0 50%; opacity: 0; box-shadow: 0 0 6px currentColor; animation: spark-ray 1.4s ease-out infinite; }
@keyframes spark-ray { 0% { opacity: 0; transform: rotate(var(--r)) translateX(30%) scaleX(0.2); } 10% { opacity: 1; } 40% { opacity: 0; transform: rotate(var(--r)) translateX(48%) scaleX(1.2); } 100% { opacity: 0; } }
/* E 小さな火花: 短いギザギザが 2 つずつ散る */
.spark-crackle { opacity: 0; animation: spark-crack 0.6s linear 1 both; }
.spark-crackle path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.spark-crackle__core { stroke: currentColor; stroke-width: 1.2; filter: drop-shadow(0 0 2px currentColor); }
@keyframes spark-crack { 0% { opacity: 0; } 15% { opacity: 1; } 45% { opacity: 0.3; } 60% { opacity: 1; } 100% { opacity: 0; } }
/* C 電気の輪: 破線の輪が回りながら明滅 */
.spark-ring { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 3 9 12 6; filter: drop-shadow(0 0 4px currentColor); transform-origin: 50% 50%; animation: spark-spin 2.2s linear infinite, spark-blink 0.5s steps(2) infinite; }
@keyframes spark-spin { to { transform: rotate(360deg); } }
@keyframes spark-blink { 50% { opacity: 0.35; } }
/* F プラズマ + 稲妻: 揺らぐ発光と、0.7 秒ごとに 2 本の稲妻 */
.spark-plasma { position: absolute; left: 50%; top: 50%; width: 70%; height: 70%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, currentColor 0%, transparent 60%); opacity: 0.3; filter: blur(3px); animation: spark-pulse 1.2s ease-in-out infinite alternate; }
@keyframes spark-pulse { from { transform: translate(-50%, -50%) scale(0.85); opacity: 0.25; } to { transform: translate(-50%, -50%) scale(1.1); opacity: 0.5; } }
.spark-bolt { animation: spark-flash 0.7s linear 1 both; }
.spark-bolt path { fill: none; stroke-linejoin: round; }
.spark-bolt__core { stroke: currentColor; stroke-width: 2; filter: drop-shadow(0 0 2px currentColor); }
/* サンプル F の flash (1.6s の 5/12/16/24%) を 0.7s に合わせて */
@keyframes spark-flash { 0% { opacity: 0; } 11% { opacity: 1; } 27% { opacity: 0.2; } 36% { opacity: 1; } 55% { opacity: 0; } 100% { opacity: 0; } }
/* チャット: アバターの右下に同行マギドール */
.chat-avatar-btn { position: relative; }
.chat-pet { position: absolute; right: -8px; bottom: -4px; pointer-events: none; }

.pet-color__swatch--rainbow { background: linear-gradient(135deg, #ff6b8a, #ffb347, #ffe14d, #6ee66e, #4dc8ff, #9a7bff); }

/* レインボー: 粒子・スパークの色相を回し続ける (各要素が違う色から始まるので、全体で虹が流れて見える) */
.pet-sprite__dots.hue-cycle, .pet-sprite__sparks.hue-cycle { animation: pet-hue-cycle 5s linear infinite; }
.pet-sprite.still .hue-cycle, .low-power .hue-cycle { animation: none; }
@keyframes pet-hue-cycle { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

/* 左向きのスキンは反転して右向きに (shared/petSkinFlip.ts) */
.pet-sprite.flip .pet-sprite__img { transform: scaleX(-1); }
.pet-skin img.flip { transform: scaleX(-1); }

/* 永久スキル: 装備の選択ボタンは金色の枠で目立たせる (選択中は btn-primary) */
.permanent-pick:not(.btn-primary) { border: 1px solid var(--gold); color: var(--gold); }
.permanent-pick.locked { border-color: rgba(233, 185, 73, 0.35); color: rgba(233, 185, 73, 0.5); }

/* ヘルプの検索 (最上部)。当たった項目は見出しの下に当たった行を小さく */
.help-search { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.help-index-row--hit .dungeon-select-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.help-index-snippet { font-size: 11px; color: #c9b892; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* お知らせのタブ (更新情報 / 広報情報) と X のタイムライン */
.news-tabs { margin-bottom: 10px; }
.news-tabs .btn.active { border-color: var(--gold); color: var(--gold); }
.news-x { min-height: 120px; }
.news-x__posts { max-height: 60vh; overflow-y: auto; border-radius: 8px; }
.news-x__posts .twitter-tweet { margin: 0 auto 10px !important; }
.news-x a { color: var(--gold); }

/* ランキング (ペット): 名前の下にマギドールの名前を小さく */
.ranking-sub { display: block; font-size: 10px; color: #c9b892; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ランキング (ペット): 項目のボタン並び (折り返して 2 行可) */
.ranking-items { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ranking-items .ranking-item { padding: 4px 7px; font-size: 11px; flex: 1 1 auto; white-space: nowrap; }
.ranking-items .btn.active { border-color: var(--gold); color: var(--gold); }
/* ペット画面のヘッダー: 左ボタンぶんの余白を右にも置いて見出しを中央に */
.pet-page__spacer { width: 84px; flex: none; }
/* 図鑑: 未発見の装備も押せる (落とす敵の逆引き 2026-09-17) */
button.codex-card.item.locked { cursor: pointer; }
.codex-dropper-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
/* 「ステージ未解放」: 押したカードの中央に 2 秒 */
.speed-hint.codex-locked-hint { transform: translate(-50%, -50%); animation: codexLockedHint 2s ease forwards; }
@keyframes codexLockedHint {
  0% { opacity: 0; }
  10%, 80% { opacity: 1; }
  100% { opacity: 0; }
}
/* ミッション: 全部受け取るの内訳 (2026-09-17) */
.mission-result { display: flex; flex-direction: column; gap: 10px; }
.mission-result__total { display: flex; justify-content: center; font-size: 18px; font-weight: 700; }
.mission-result__list { display: flex; flex-direction: column; gap: 4px; }
.mission-result__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 8px; background: rgba(0, 0, 0, 0.25); border-radius: 6px; }
.mission-result__title { min-width: 0; flex: 1; }
/* ミッションのバルーン: 赤=受け取れる / 黄=進行中 (ゆっくり明滅)。2 つなら横に並べる (2026-09-17) */
.mission-dots { position: absolute; top: -4px; right: -4px; display: flex; gap: 3px; pointer-events: none; }
.mission-dots .mission-dot { position: static; }
.mission-dot--progress { background: #f2c94c; animation: missionDotBlink 2.4s ease-in-out infinite; }
@keyframes missionDotBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.mission-tabs { margin: 8px 0 4px; }
.mission-tabs .pet-tab { position: relative; }
/* アンケート */
.survey-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--panel-edge); border-radius: 7px; padding: 8px 12px; }
.survey-meta { display: inline-flex; gap: 4px; flex: none; }
.survey-reward { font-weight: 700; color: var(--gold-bright); white-space: nowrap; }
.survey-q { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--panel-edge); }
.survey-q__text { font-weight: 700; margin-bottom: 8px; line-height: 1.5; }
.survey-q__choices { display: flex; flex-wrap: wrap; gap: 6px; }
.survey-choice.active { border-color: var(--gold); background: rgba(212, 169, 78, 0.22); color: var(--gold-bright); }
.survey-q__free { width: 100%; margin-top: 8px; resize: vertical; font-size: 13px; box-sizing: border-box; }
.gbtn-ticket { font-weight: 700; margin-right: 4px; }
/* 管理: アンケート集計 */
.admin-survey-bar { height: 8px; border-radius: 4px; background: var(--gold); min-width: 2px; }
.admin-survey-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 64px; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; text-align: left; }
.admin-survey-row > span:nth-child(2), .admin-survey-row > span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.admin-survey-text { text-align: left; font-size: 12px; padding: 6px 8px; background: rgba(0, 0, 0, 0.25); border-radius: 6px; margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.survey-intro { text-align: left; font-size: 13px; line-height: 1.7; margin-bottom: 10px; }
.survey-intro p { margin: 0 0 4px; }
.survey-choice { display: inline-flex; align-items: flex-start; gap: 6px; text-align: left; }
.survey-choice.has-desc { width: 100%; }
.survey-choice__mark { flex: none; }
.survey-choice__body { display: flex; flex-direction: column; gap: 2px; }
.survey-choice__desc { font-size: 11px; font-weight: 400; color: var(--text-dim); line-height: 1.4; }
.survey-title-row { display: flex; flex-direction: column; gap: 4px; padding: 8px; margin-bottom: 6px; border: 1px solid var(--panel-edge); border-radius: 7px; background: rgba(0, 0, 0, 0.2); }
.survey-title-row__head { display: flex; align-items: center; justify-content: space-between; }
.survey-title-row .survey-q__free { margin-top: 0; }
.admin-survey-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 2px; }
.admin-survey-who { display: inline-flex; align-items: center; gap: 6px; }
.survey-choice, .survey-choice__desc { white-space: normal; }
.survey-choice { height: auto; }
.mission-survey-title { flex: 1; min-width: 0; font-weight: 700; text-align: left; }
.admin-survey-who { flex-wrap: wrap; min-width: 0; }
.admin-survey-name { font-weight: 700; }
.admin-survey-meta { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; font-size: 11px; color: var(--text-dim); }
.admin-survey-person { text-align: left; border: 1px solid var(--panel-edge); border-radius: 8px; padding: 6px 8px; margin-top: 6px; background: rgba(0, 0, 0, 0.2); }
.admin-survey-person > summary { cursor: pointer; list-style: none; }
.admin-survey-person > summary::-webkit-details-marker { display: none; }
.admin-survey-answer { margin-top: 8px; }
.survey-pick.active { border-color: var(--gold); background: rgba(212, 169, 78, 0.22); color: var(--gold-bright); }
/* 受け取りボックス (お知らせの受取タブ) */
.news-tab-gifts { position: relative; }
.news-btn { position: relative; }
.gift-item.claimed { opacity: 0.7; }
.gift-message { font-size: 13px; line-height: 1.6; white-space: pre-wrap; text-align: left; margin: 4px 0 6px; }
.gift-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* 受取済みの日付は必ず改行して右詰め (2026-09-19 専務) */
.gift-claimed-at { flex-basis: 100%; text-align: right; }
/* 受け取れるものが多いと横にはみ出していたので折り返す */
.gift-foot .survey-reward { white-space: normal; min-width: 0; flex: 1 1 auto; text-align: left; }
/* 他プレイヤーの詳細のペット (読み取り専用) */
.pet-summary__name { font-weight: 700; font-size: 16px; }
.pet-passive.readonly { cursor: default; }
.mission-dots--inline { position: static; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.pet-summary__details { text-align: left; margin-top: 6px; }
.pet-summary__details > summary { cursor: pointer; color: var(--gold); font-weight: 700; padding: 4px 0; }
/* ルーン: 選んで分解 */
.rune-pick-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rune-dismantle-row { width: 100%; text-align: left; }
.rune-dismantle-row.selected { border-color: var(--gold); background: rgba(212, 169, 78, 0.16); }
.rune-dismantle-mark { width: 18px; flex: none; font-size: 16px; }
.survey-done { display: inline-flex; align-items: center; gap: 6px; }
/* チャット: 開発者の認証マーク */
.chat-dev-badge { display: inline-flex; align-items: center; padding: 0; margin-left: 2px; border: 0; background: transparent; cursor: pointer; vertical-align: middle; }
.speed-hint.chat-dev-tip { transform: translate(-50%, calc(-100% - 6px)); animation: codexLockedHint 2.5s ease forwards; }
/* 持ち物: 選んで分解 */
.item-pick { display: contents; }
.item-pick.selected > .item-card { outline: 3px solid var(--gold); outline-offset: -1px; }
/* 選ぶ = 金の枠と文字 / 選択中 = 金の塗り (一番目立つ) / 装備中・ロック中 = 通常の無効ボタン */
.btn.item-pick-btn:not(:disabled) { border: 1.5px solid rgba(232, 190, 96, 0.85); color: var(--gold-bright); background: rgba(212, 169, 78, 0.08); }
.btn.item-pick-btn.active:not(:disabled) { border-color: #fff0c3; background: linear-gradient(180deg, #f2cf79, #d4a94e); color: #251a08; font-weight: 700; box-shadow: 0 0 10px rgba(242, 207, 121, 0.55); }
.item-pick-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--gold); border-radius: 10px; background: linear-gradient(180deg, var(--panel), var(--panel-inner)); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); white-space: nowrap; max-width: calc(100vw - 16px); }
.items-page.picking { padding-bottom: 72px; }
/* お知らせ: 既読はタイトルだけのアコーディオン (2026-09-17) */
.news-summary { cursor: pointer; list-style: none; }
.news-summary::-webkit-details-marker { display: none; }
.news-arrow { margin-left: auto; color: var(--text-dim); font-size: 12px; }
.news-arrow::before { content: '▸'; }
details[open] > .news-summary .news-arrow::before { content: '▾'; }
details.news-item:not([open]) .news-title { margin-bottom: 0; }
/* アンケート途中回答 (読み物): お知らせより行間・段落間を広く */
.survey-note-btn { margin: 4px 0 2px; align-self: flex-start; }
.survey-note-panel { max-width: 560px; }
.survey-note { text-align: left; font-size: 15px; line-height: 1.9; letter-spacing: 0.02em; max-width: 36em; margin: 0 auto; padding: 4px 4px 12px; color: var(--text); }
.survey-note + .survey-note { border-top: 1px solid var(--panel-edge); margin-top: 20px; padding-top: 20px; }
.survey-note p { margin: 0 0 1.2em; }
.survey-note__date { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.survey-note__title { font-size: 17px; line-height: 1.5; margin: 4px 0 1.2em; color: var(--gold-bright); }
.survey-note__h { font-size: 15px; line-height: 1.5; margin: 2em 0 0.8em; padding-left: 10px; border-left: 3px solid var(--gold); color: var(--gold-bright); }
/* 全モーダル共通の右上 ✕ (2026-09-17)。高さ 0 の帯をパネル先頭に貼り付け (sticky)、中身をスクロールしても右上に残す */
.modal-x-anchor { position: sticky; top: 0; height: 0; align-self: stretch; z-index: 20; margin: 0; }
.modal-x-anchor > .modal-x { top: -8px; right: -8px; }
.confirm-panel.has-x > .credits-title { padding-left: 30px; padding-right: 30px; }
.survey-note p.survey-note__note { font-size: 12px; line-height: 1.7; color: var(--text-dim); margin: -0.2em 0 1.2em; }
/* 冒険者パックの中身 (箇条書き。幅いっぱい) */
.pack-effects { text-align: left; font-size: 13px; line-height: 1.7; margin-top: 4px; width: 100%; }
.pack-effects__head { font-weight: 700; color: var(--gold-bright); margin-top: 6px; }
.pack-effects ul { margin: 2px 0 0; padding-left: 1.3em; }
.pack-effects li { margin: 1px 0; }
.shop-item--wide { flex-wrap: wrap; }
.shop-item--wide > .pack-effects { flex-basis: 100%; margin-top: 0; padding: 8px 10px 0; border-top: 1px solid var(--panel-edge); }
/* 欠片の印 (ヒーローアイコン + 🧩)。フィギュアごとに別々の欠片であることを示す */
.shard-mark { position: relative; display: inline-flex; vertical-align: middle; margin: 0 5px 0 1px; flex: none; }
.shard-mark__frame { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 1.5px solid transparent; border-radius: 5px; background: linear-gradient(#1c1810, #1c1810) padding-box, linear-gradient(135deg, #c8f59a, #5cc86a 45%, #1f7a45) border-box; box-shadow: 0 0 4px rgba(120, 220, 120, 0.35); }
.shard-mark__hero { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; }
.shard-mark__badge { position: absolute; right: -7px; bottom: -5px; font-size: 13px; line-height: 1; filter: drop-shadow(0 0 1px #000); }
.fig-delta .shard-mark__frame { width: 24px; height: 24px; border-radius: 5px; } .fig-delta .shard-mark__badge { font-size: 11px; right: -6px; bottom: -4px; } .fig-delta .shard-mark { margin-right: 7px; }
/* フィギュアガチャ結果: 欠片アイコンのぶん横に広げる */
.confirm-panel.fig-reveal-panel { max-width: none; width: min(440px, calc(100vw - 8px)); padding-left: 10px; padding-right: 10px; flex-shrink: 0; }
.fig-reveal-panel .gacha-grid { gap: 6px; }
/* スライドバー + 左右の − / ＋ */
.range-stepper { display: flex; align-items: center; gap: 6px; width: 100%; }
.range-stepper .app-range { flex: 1; min-width: 0; }
.range-stepper__btn { flex: none; min-width: 36px; font-size: 16px; font-weight: 700; }
.settings-volume .range-stepper { flex: 1; }
/* ヘルプの数表 (2026-09-17)。項目=左揃え / 数値=右揃え・等幅数字 / 行の区切りは薄い帯 / 強調は「次の Lv」行だけ */
.help-table { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: 13px; font-variant-numeric: tabular-nums; margin: 4px 0 6px; }
.help-table thead th { font-size: 11px; font-weight: 600; color: var(--text-dim); text-align: right; padding: 2px 8px; white-space: nowrap; }
.help-table thead th:first-child { text-align: left; }
.help-table tbody th, .help-table tbody td { padding: 6px 8px; background: rgba(0, 0, 0, 0.28); white-space: nowrap; }
.help-table tbody th { text-align: left; font-weight: 700; color: var(--gold-bright); border-radius: 6px 0 0 6px; }
.help-table tbody td { text-align: right; font-weight: 600; }
.help-table tbody td:last-child { border-radius: 0 6px 6px 0; }
.help-table tbody tr.done > * { opacity: 0.5; }
.help-table tbody tr.next > * { background: rgba(212, 169, 78, 0.18); box-shadow: inset 0 1px 0 var(--gold), inset 0 -1px 0 var(--gold); }
.help-table tbody tr.next > th { box-shadow: inset 1px 1px 0 var(--gold), inset 0 -1px 0 var(--gold); }
.help-table tbody tr.next > td:last-child { box-shadow: inset -1px 1px 0 var(--gold), inset 0 -1px 0 var(--gold); }
@media (max-width: 420px) {
  .help-table { font-size: 12px; }
  .help-table tbody th, .help-table tbody td { padding: 6px 5px; }
  .help-table thead th { padding: 2px 5px; }
}
/* ガチャLvヘルプの先頭: いまの Lv を主役に */
.gacha-lv-status { text-align: left; padding: 10px 12px; border: 1px solid var(--panel-edge); border-radius: 8px; background: rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; gap: 6px; }
.gacha-lv-status__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gacha-lv-status__lv { color: var(--gold-bright); font-weight: 700; font-size: 15px; }
.gacha-lv-status__lv b { font-size: 30px; line-height: 1; margin-left: 2px; }
.gacha-lv-status__lv small { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.gacha-lv-status__rolls { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.gacha-lv-status__next { font-size: 13px; font-variant-numeric: tabular-nums; }
.gacha-lv-status__next b { color: var(--gold-bright); font-size: 16px; }
.gacha-lv-status__next small { color: var(--text-dim); }
.gacha-lv-status__extra { font-size: 12px; color: #9fe6c0; }
/* 途中回答の見出し: 単語の途中で折り返さず「からの」の後で改行 */
.survey-note-panel .credits-title { word-break: keep-all; overflow-wrap: anywhere; }
/* 中身だけスクロールするモーダル (プレイヤー情報・マギドール): スクロール域はパネルの残りの高さに合わせて縮める (2026-09-17)。
   固定の max-height (100dvh - 80px) だと、右上 ✕ の帯ぶんの隙間や iPhone の安全領域で合計がパネルを超え、下にはみ出していた */
.player-card-panel > .player-card-scroll,
.pet-panel > .pet-panel__scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
/* ミッションの期限 (期間限定) */
.mission-deadline { font-size: 12px; color: var(--text-dim); text-align: left; font-variant-numeric: tabular-nums; }
/* アンケートの回答ページ (全画面。外側を押しても閉じない 2026-09-18)。モーダル (13100〜13200) より手前 */
.survey-page { position: fixed; inset: 0; z-index: 13250; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--bg); padding: calc(16px + var(--safe-top)) calc(12px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(12px + var(--safe-left)); }
.survey-page__inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.survey-page__restored { text-align: left; color: var(--gold-bright); }
/* 途中回答の回ごとの切り替え (新しいものが上。長いタイトルなので縦並び) */
.survey-note-tabs { display: flex; flex-direction: column; gap: 6px; }
.survey-note-tabs .btn { text-align: left; white-space: normal; line-height: 1.5; }
/* 転生の素質の内訳 (アコーディオン。2026-09-18) */
.pet-prestige-detail > summary { cursor: pointer; font-size: 13px; color: var(--gold-bright); padding: 4px 0; }
.pet-prestige-detail .pet-talent__label { color: var(--text-dim); font-size: 12px; }
.pet-talent__one { display: inline-flex; align-items: center; gap: 1px; margin-right: 8px; font-variant-numeric: tabular-nums; }
/* マギスフィアの行: 名前は固定なので流さず、色と段階は右端に寄せる (2026-09-18) */
.pet-list__row--sphere .pet-list__lv { margin-left: auto; }
/* 転生の素質の内訳の表: 見出しは素質の色の◆だけ (2026-09-18) */
.pet-talent-table thead th { text-align: center; font-size: 13px; }
.pet-talent-table tbody th { max-width: 9em; font-weight: 600; }
.pet-talent-table tbody th .marquee { max-width: 8em; }
.pet-talent-table tbody td { text-align: center; }
/* 起動の「引き継ぎの抽選」: パッシブ行の右端に発動率 (2026-09-18) */
.pet-passive { grid-template-areas: 'type name rate' 'type desc rate'; grid-template-columns: auto minmax(0, 1fr) auto; }
.pet-passive__rate { grid-area: rate; font-weight: 700; font-size: 13px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
/* 転生の説明: パッシブの話を先に、ゆったり読める大きさで。左揃え (2026-09-18) */
.pet-rebirth-note { text-align: left; font-size: 14px; line-height: 1.9; color: var(--text); display: flex; flex-direction: column; gap: 10px; }
.pet-rebirth-note__lead { margin: 0; }
.pet-rebirth-note__rest { display: flex; flex-direction: column; gap: 6px; }
.pet-rebirth-note__h { font-size: 13px; font-weight: 700; color: var(--gold-bright); margin-top: 4px; }
.pet-rebirth-note ul { margin: 0; padding-left: 1.3em; font-size: 13px; line-height: 1.9; color: var(--text-dim); }
.pet-rebirth-note li { margin: 2px 0; }
/* パッシブ行はモーダル内でも左揃え (ペット画面と同じ見せ方) */
.pet-passive { text-align: left; }
.pet-rebirth-note .pet-prestige-detail > summary { font-size: 13px; }
/* パッシブ行をボタンにしたとき、ブラウザ既定の色・フォントに戻らないようにする (2026-09-18) */
button.pet-passive { color: var(--text); font: inherit; text-align: left; }
/* まだ効いていないパッシブ (記憶・秘伝の才能): 小さめ・太字なし・背景も控えめにして非活性だと分かるように (2026-09-18) */
.pet-passive--idle { background: rgba(0, 0, 0, 0.12); border-color: rgba(255, 255, 255, 0.07); }
.pet-passive--idle .pet-passive__name { font-size: 12px; font-weight: 500; color: var(--text-dim); }
.pet-passive--idle .pet-passive__desc { font-size: 11px; }
.pet-passive--idle .pet-type-chip { opacity: 0.75; }
.pet-passive--idle .pet-passive__rate { font-size: 12px; font-weight: 600; }
/* パッシブ行は 3 段 (2026-09-18 専務): 1 段目=素質の枠と秘伝の印 (+右端に確率) / 2 段目=名前 / 3 段目=効果 */
.pet-passive { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; }
.pet-passive__tags { display: flex; flex-direction: row; align-items: center; gap: 4px; }
.pet-passive__tags .pet-secret-chip { margin-right: 0; }
.pet-passive__name, .pet-passive__desc { flex-basis: 100%; }
.pet-passive__rate { margin-left: auto; }
/* 確率は 1 段目の右端に (継承の抽選のように行ごとに違う値があるとき) */
.pet-passive__rate { order: 0; }
.pet-passive__name { order: 1; }
.pet-passive__desc { order: 2; }
/* 記憶・秘伝の才能: 名前は白、背景はややグレー寄り (未反映でも読みやすく) */
.pet-passive--idle { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.11); }
.pet-passive--idle .pet-passive__name { color: var(--text); }
/* パッシブの再抽選ボタン (行の右端) と、用語の説明モーダル */
.pet-passive__reroll { order: 0; margin-left: auto; }
.pet-term-note { text-align: left; font-size: 14px; line-height: 1.9; display: flex; flex-direction: column; gap: 10px; }
.pet-term-note p { margin: 0; }
/* 継承元の行: レジェンド・継承済のチップが入りきらないので折り返す (2026-09-18 専務) */
.pet-list__row.pick { flex-wrap: wrap; row-gap: 4px; }
.pet-list__row.pick .chip { margin-left: 0; }
/* 秘伝の印は押すと説明が出る (見た目はチップのまま) */
button.pet-secret-chip--btn { background: transparent; font-family: inherit; font-weight: 700; line-height: 1.5; cursor: pointer; }
/* 封印中の秘伝の才能: 候補に出ないので薄く (2026-09-18 専務) */
.pet-passive--sealed { opacity: 0.55; }
/* 秘伝の封印トグル: 今どちらなのかが見て分かるスイッチ (2026-09-18 専務) */
.pet-seal-switch {
  order: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  color: var(--text-dim);
}
.pet-seal-switch__track {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--panel-edge);
  transition: background 0.15s ease;
}
.pet-seal-switch__knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #cfc6b4;
  transition: transform 0.15s ease, background 0.15s ease;
}
.pet-seal-switch.on { color: var(--gold); }
.pet-seal-switch.on .pet-seal-switch__track { background: rgba(242, 205, 114, 0.45); border-color: var(--gold); }
.pet-seal-switch.on .pet-seal-switch__knob { transform: translateX(16px); background: var(--gold); }
.pet-seal-switch:disabled { opacity: 0.6; cursor: default; }
/* 未解放の見た目: 押すとプレビューだけ (決定はできない。2026-09-18 専務) */
.pet-particles .btn.previewing { outline: 1px dashed var(--gold); outline-offset: 1px; }
/* お試し表示の注意書き: 出ていない時も高さを確保して、下のボタンを動かさない (2026-09-19 専務) */
.pet-look-preview-slot { min-height: 30px; display: flex; align-items: center; justify-content: center; }
.pet-look-preview-note {
  text-align: center;
  font-size: 12px;
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 3px 10px;
  animation: pet-preview-blink 1.6s ease-in-out infinite;
}
@keyframes pet-preview-blink {
  0%, 100% { background: rgba(242, 205, 114, 0.06); }
  50% { background: rgba(242, 205, 114, 0.22); }
}
/* お試し表示中のボタン */
.pet-color.previewing { border-color: var(--gold-bright); box-shadow: 0 0 0 1px var(--gold-bright) inset; }
/* 融合したプロパティの行 (削除ボタン付き。2026-09-18 専務) */
.fuse-owned-row { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--panel-edge); border-radius: 8px; background: rgba(0, 0, 0, 0.25); }
.fuse-owned-row__del { margin-left: auto; }
/* メンテナンス (2026-09-18 専務) */
.maint-band { position: sticky; top: 0; z-index: 12000; background: #b3261e; color: #fff; font-size: 12px; font-weight: 700; text-align: center; padding: 4px 8px; }
.maint-screen { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 16px 48px; text-align: center; }
.maint-screen__mascot { width: 168px; height: 168px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5)); }
.maint-screen__title { font-size: 18px; font-weight: 700; color: var(--gold); }
.maint-screen__times { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 6px; }
.maint-screen__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--panel-edge); border-radius: 8px; background: rgba(0, 0, 0, 0.3); }
.maint-screen__note { font-size: 13px; line-height: 1.9; color: var(--text-dim); }
/* 出撃バーの難易度切り替え (◀ 難易度 ▶)。2026-09-18 専務 */
.diff-switch { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; flex-shrink: 0; }
.diff-switch__arrow { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); color: var(--text-dim); font-size: 11px; cursor: pointer; }
.diff-switch__arrow:hover { background: rgba(255, 255, 255, 0.16); color: var(--text); }
/* 難易度チップは幅を固定 (文字数で左右の矢印の位置が動かないように)。2026-09-18 専務 */
.diff-switch .hard-chip { width: 56px; min-width: 56px; margin: 0; justify-content: center; text-align: center; overflow: hidden; white-space: nowrap; }
/* 押せない方向の矢印ははっきり薄く (押すと理由をフロートで出す) */
.diff-switch__arrow.off { opacity: 0.3; }
/* ノーマルは難易度の色を持たない (既定の赤=ハード色が出ていた。2026-09-18 専務) */
.hard-chip.diff-normal {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--panel-edge);
}
/* 装備交換の並べ替えボタン (2026-09-18 専務) */
.picker-sorts { display: flex; gap: 4px; padding: 4px 0 6px; flex-shrink: 0; }
.picker-sorts .btn { flex: 1; min-width: 0; padding: 2px 0; font-size: 11px; opacity: .5; }
.picker-sorts .btn.active { opacity: 1; border-color: var(--gold); background: rgba(218, 180, 93, .2); }
/* 管理ダッシュボードの絞り込みチェック (2026-09-18 専務) */
.dash-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.dash-check input { accent-color: var(--gold); }
/* 図鑑: 部位フィルタと、落とす敵が分かっている未発見装備のシルエット (2026-09-18 専務) */
.slot-toggle { display: flex; flex-wrap: wrap; gap: 4px; }
.slot-toggle .btn { padding: 2px 8px; font-size: 11px; opacity: .5; }
.slot-toggle .btn.active { opacity: 1; border-color: var(--gold); background: rgba(218, 180, 93, .2); }
.codex-silhouette { filter: brightness(0) saturate(0); opacity: .5; }
/* 図鑑: 1周に複数回出る敵の回数 (2026-09-18 専務) */
.codex-detail-encounters { margin-left: 6px; padding: 0 6px; border-radius: 8px; background: rgba(218, 180, 93, .18); color: var(--gold); font-size: 11px; }
/* お知らせの大項目見出し (2026-09-19 専務) */
.news-lines .news-section { list-style: none; margin-left: -1.1em; margin-top: 12px; font-weight: 700; color: var(--gold); }
.news-lines .news-section:first-child { margin-top: 0; }
/* スキル: ランク行 (− / 点灯 / ＋) と還元の段数選び (2026-09-19 専務) */
.skill-rank-row { display: flex; align-items: center; gap: 8px; }
.skill-rank-row .skill-rank { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; }
/* ランク行の丸と数字は大きめに (2026-09-19 専務)。真円ルール: width == height */
.skill-rank-row .rank-pip { width: 14px; height: 14px; }
.skill-rank-row .skill-rank-num { font-size: 15px; margin-left: 6px; color: var(--text); }
.skill-rank-row .skill-rank-minus { min-width: 44px; }
.skill-rank-row .skill-rank-plus { min-width: 110px; }
.refund-pick { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.refund-pick .btn { opacity: .5; }
.refund-pick .btn.active { opacity: 1; border-color: var(--gold); background: rgba(218, 180, 93, .2); }
.refund-also { border-top: 1px solid var(--panel-edge); padding-top: 8px; font-size: 12px; color: var(--text-dim); }
.refund-also-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.refund-also-list li { display: flex; align-items: baseline; gap: 8px; }
.refund-also-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.refund-also-rank { font-size: 13px; font-weight: 700; color: #e8a0a0; white-space: nowrap; }
.refund-also-pt { font-size: 13px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.refund-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; }

/* スキルシートの効果表示: 説明 / 現在 / ランクアップ後 の3列 (2026-09-19 専務)。
   数字は右揃え、列幅を固定して行をまたいでも縦に揃える */
.skill-effect-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 74px;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
}
.skill-effect-rows.no-next {
  grid-template-columns: minmax(0, 1fr) 74px;
}
.skill-effect-head,
.skill-effect-row {
  display: contents;
}
.skill-effect-head > span {
  font-size: 10px;
  color: var(--text-dim);
  text-align: right;
}
.skill-effect-label {
  display: block;
  min-width: 0;
}
.skill-effect-cur {
  text-align: right;
  white-space: nowrap;
}
.skill-effect-rows .skill-effect-next {
  text-align: right;
  white-space: nowrap;
  color: var(--gold-bright);
  font-weight: 700;
}
/* 数字に分けられない文章型の効果は横いっぱいに出す */
.skill-effect-text {
  grid-column: 1 / -1;
}
.skill-effect-text.skill-effect-next {
  text-align: left;
}

/* 文章の効果 (パリィ・戦術など) は表の上に1行で */
.skill-effect-text-line {
  margin-bottom: 4px;
}
/* 他ジョブ選択中の半分表示: 数字を空色にして、通常の表示と取り違えないようにする */
.skill-effect-rows.half .skill-effect-cur {
  color: #9fd8ee;
}
.skill-effect-rows.half .skill-effect-next {
  color: #5ec8f0;
}

/* ---- 広い画面で左にチャットを常時表示 (2026-09-19 専務) ---- */
/* メインメニュー・ゲーム画面の幅 (768px) を最優先で確保し、余った分だけチャットに割り当てる */
:root {
  --chat-dock-w: clamp(200px, calc(100vw - 800px), 360px);
}
.chat-dock {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--chat-dock-w);
  z-index: 940;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #2b2115, #201811);
  border-right: 1px solid var(--panel-edge);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.45);
}
.chat-dock-min {
  align-self: flex-start;
}
.chat-dock .chat-panel {
  flex: 1;
  height: auto;
  min-height: 0;
  margin-bottom: 0;
}
/* メイン画面はチャットのぶん右に寄せる。下の固定バーも同じだけずらす */
body.chat-docked {
  padding-left: var(--chat-dock-w);
}
body.chat-docked .bottom-nav,
body.chat-docked .dungeon-float-bar,
body.chat-docked .item-pick-bar {
  left: calc(50% + var(--chat-dock-w) / 2);
}
/* 出しっぱなしのあいだは、いつもの 💬 ボタンは隠す (最小化で戻る) */
body.chat-docked .chat-toggle {
  display: none;
}

/* マギスフィア起動・転生は中身が多いので広く取る (2026-09-19 専務) */
.confirm-panel.pet-wide-panel {
  max-width: min(720px, calc(100vw - 24px));
}

/* お祝いのシステムメッセージ (2026-09-19 専務): 金のグラデ帯。クラッカーを押すと花吹雪 */
.chat-msg.chat-celebrate {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  /* 黒寄りの落ち着いた帯 + 金色の光が走る (2026-09-19 専務) */
  background: linear-gradient(100deg, rgba(60, 46, 22, 0.85), rgba(26, 21, 13, 0.9) 55%, rgba(60, 46, 22, 0.8));
  color: #fff8e6;
  position: relative;
  /* 光の帯をはみ出させないための overflow。これが付くと flex の最小サイズが効かなくなり、
     発言が増えたときに縦に潰れるので、縮まないようにしておく (2026-09-19 専務) */
  overflow: hidden;
  flex-shrink: 0;
}
.chat-msg.chat-celebrate::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 0;
  width: 45%;
  height: 140%;
  background: linear-gradient(90deg, rgba(242, 205, 114, 0) 0%, rgba(242, 205, 114, 0.45) 40%, rgba(255, 246, 214, 0.6) 50%, rgba(212, 169, 78, 0.4) 60%, rgba(242, 205, 114, 0) 100%);
  animation: og-shine 6s ease-in-out infinite;
  pointer-events: none;
}
/* 省電力モードでは光らせない */
.low-power .chat-msg.chat-celebrate::after { animation: none; opacity: 0; }
.chat-celebrate__cracker {
  background: none;
  border: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-celebrate__cracker:active {
  transform: scale(0.9);
}
.chat-celebrate__text {
  font-size: 12px;
  min-width: 0;
}
.chat-celebrate__text b {
  color: var(--gold-bright);
}
/* 紙吹雪 (操作は邪魔しない) */
.confetti-overlay {
  position: fixed;
  inset: 0;
  z-index: 13500;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* お祝いの光の帯は6秒ごと (OGバッジは3秒のまま。2026-09-19 専務) */
.chat-msg.chat-celebrate::after {
  animation-duration: 6s;
}
/* クラッカーを押してもらうための指。文字は出さず、🎉 の下から重ねて上下に動かす */
.chat-celebrate__cracker {
  position: relative;
}
.chat-celebrate__tap {
  position: absolute;
  left: 52%;
  bottom: -7px;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  /* 3秒に1回だけ「トン」と押す。それ以外は消えている */
  animation: celebrate-tap 3s ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
@keyframes celebrate-tap {
  0%, 62% { opacity: 0; transform: translateY(4px) scale(0.9); }
  70% { opacity: 1; transform: translateY(0) scale(1); }
  /* 指を当てる (押し込む) */
  78% { opacity: 1; transform: translateY(-5px) scale(0.86); }
  86% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(2px) scale(0.95); }
}
.low-power .chat-celebrate__tap { animation: none; }

/* 素質で変わる数字 (効果値・回数) は色を付けて、固定の数字と見分けられるようにする (2026-09-19 専務) */
.pet-passive__num { color: var(--gold-bright); font-weight: 700; }
/* 発言の書き直し (2026-09-19 専務) */
.chat-edit { display: flex; flex-direction: column; gap: 6px; }
.chat-edit__input { width: 100%; }
/* 返信を「これも質問」として投稿するためのチェック (2026-09-19 専務) */
.chat-as-question { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); padding: 2px 2px 0; cursor: pointer; }
.chat-as-question input { margin: 0; }

/* 挑戦回数を返したときの案内 (2026-09-19 専務) */
.result-refund { font-size: 12px; color: #7ef0dc; text-align: center; margin-top: 2px; }
/* お祝いのレベル。100 の区切りは数字だけ大きく金色に (2026-09-19 専務) */
.chat-celebrate__lv { font-weight: 700; }
.chat-celebrate__lv.big { color: var(--gold-bright); font-size: 13px; }
/* ヘルプの検索で見つからなかったときの投稿フォーム (2026-09-19 専務) */
.help-ask { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 8px; border: 1px solid var(--panel-edge); border-radius: 10px; background: rgba(0, 0, 0, 0.2); }
.help-ask__lead { font-size: 12px; line-height: 1.6; color: var(--text-dim); }
.help-ask__input { width: 100%; }
/* 入手経路: G バッジと「入手済み」はダンジョン名と同じ行に小さく (2026-09-19 専務) */
.codex-source-dungeon { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.codex-source-og-chip, .codex-source-owned { flex: 0 0 auto; }
/* オーバーグレードの経路は前後に少し余白を取る (2026-09-19 専務) */
.codex-source-line--og { margin: 5px 0; }

/* 起動・転生の演出の素質表示: 元 → 新規 (数字は右詰め・列は縦にそろえる。2026-09-19 専務) */
.pet-act-talents {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px 22px 52px;
  align-items: center;
  row-gap: 3px;
  column-gap: 4px;
  width: min(280px, 100%);
  margin: 6px auto 0;
  font-size: 13px;
}
.pet-act-talent { display: contents; }
.pet-act-talent__label { display: flex; align-items: center; gap: 3px; min-width: 0; }
.pet-act-talent__before { text-align: right; color: var(--text-dim); }
.pet-act-talent__arrow { text-align: center; color: var(--text-dim); }
.pet-act-talent__after { text-align: right; font-weight: 700; font-size: 15px; color: var(--text); }
.pet-act-talent__before { color: var(--text-dim); }
.pet-act-talent__arrow.blink { animation: pet-act-arrow 0.9s ease-in-out infinite; }
@keyframes pet-act-arrow {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* 出撃バーの2段目に置く挑戦回数は枠なし (押せることは数字の大きさで示す。2026-09-20 専務) */
.attempts-badge.plain {
  border: 0;
  background: transparent;
  padding: 0;
  gap: 4px;
}
.attempts-badge.plain .attempts-stock.zero {
  visibility: hidden;
}

/* 最小化タブ (▼ 隠す / ▲ 出撃)。文字を入れて押しやすく (2026-09-20 専務) */
.dungeon-bar-toggle {
  min-height: 34px;
  padding: 0 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ON/OFF のトグルスイッチ (設定画面。2026-09-20 専務: ずっと「トグルボタン」と言われていたのはこれ) */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.switch.on {
  background: linear-gradient(180deg, #b98f3c, #8d6a28);
  border-color: rgba(233, 199, 122, 0.7);
}
.switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  /* つまみは真円 */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8d8577;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s ease, background 0.15s ease;
}
.switch.on .switch__knob {
  transform: translateX(18px);
  background: #fdf3dc;
}
.switch__native {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  /* 見た目は既存のスイッチを使い、ネイティブの外観は振動のため維持する。 */
  clip-path: inset(0 round 999px);
  cursor: pointer;
}
.switch__native:focus-visible + .switch__knob {
  outline: 2px solid #fdf3dc;
  outline-offset: 3px;
}
.switch.is-disabled {
  opacity: 0.5;
}
/* 見出し1つに複数のスイッチを並べるとき (お祝いメッセージ) */
.switch-group {
  display: flex;
  /* 右側の領域に3行で縦に並べる (2026-09-20 専務) */
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  gap: 6px;
}
.switch-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}
.switch:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ステージ選択の各行にステージの絵を敷く (2026-09-20 専務)。
   元の指定は触らず、暗くする膜を1枚重ねるだけにする (前回ここを書き換えて一覧を壊したため) */
.dungeon-select-row {
  position: relative;
  /* overflow:hidden を付けると縦に潰れる (flex の自動最小サイズが 0 になるため) ので縮ませない */
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center 62%;
}
.dungeon-select-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  pointer-events: none;
}
.dungeon-select-row.active::before {
  background: rgba(0, 0, 0, 0.58);
}
/* 文字とバッジは膜より前に */
.dungeon-select-row > * {
  position: relative;
  z-index: 1;
}

/* ステージ選択の難易度: つながった帯ではなく独立した角丸ボタンに。
   選んでいないものにも各難易度の色を暗めに載せる (2026-09-20 専務) */
.dungeon-select-panel .difficulty-toggle {
  border: 0;
  overflow: visible;
}
.dungeon-select-panel .difficulty-btn {
  border-radius: 8px;
  padding: 9px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(212, 169, 78, 0.1);
  color: rgba(226, 198, 138, 0.75);
}
.dungeon-select-panel .difficulty-btn.diff-hard {
  background: rgba(207, 91, 75, 0.14);
  color: rgba(255, 156, 138, 0.75);
}
.dungeon-select-panel .difficulty-btn.diff-extreme {
  background: rgba(146, 92, 214, 0.16);
  color: rgba(215, 180, 255, 0.75);
}
.dungeon-select-panel .difficulty-btn.diff-spiral {
  background: rgba(64, 196, 180, 0.14);
  color: rgba(126, 240, 220, 0.75);
}
/* 選択中は色を濃く・縁も光らせる */
.dungeon-select-panel .difficulty-btn.active {
  background: rgba(212, 169, 78, 0.3);
  border-color: rgba(212, 169, 78, 0.7);
  color: var(--gold-bright);
}
.dungeon-select-panel .difficulty-btn.diff-hard.active {
  background: rgba(207, 91, 75, 0.36);
  border-color: rgba(207, 91, 75, 0.8);
  color: #ff9c8a;
}
.dungeon-select-panel .difficulty-btn.diff-extreme.active {
  background: rgba(146, 92, 214, 0.38);
  border-color: rgba(146, 92, 214, 0.8);
  color: #d7b4ff;
}
.dungeon-select-panel .difficulty-btn.diff-spiral.active {
  background: rgba(64, 196, 180, 0.36);
  border-color: rgba(64, 196, 180, 0.8);
  color: #7ef0dc;
}
.dungeon-select-panel .difficulty-btn.locked {
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-dim);
}

/* ステージ選択: 未解放の鍵は名前の行の右端に (2026-09-20 専務) */
.dungeon-select-name {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dungeon-select-lock {
  margin-left: auto;
  flex-shrink: 0;
}

/* 設定の数値バッジ: 音量0 のときだけ落とす (色は他の表示と同じ金の縁取り。2026-09-20 専務) */
.grade-chip.off {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.settings-volume-num {
  min-width: 46px;
  text-align: center;
}

/* 初回の広告計測の問いかけ (スマホのトラッキング許可でおなじみの並び。2026-09-20 専務) */
.ad-prompt {
  max-width: 340px;
  text-align: center;
}
.ad-prompt__icon {
  font-size: 34px;
  line-height: 1;
  margin: 4px 0 14px;
}
.ad-prompt__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
}
.ad-prompt__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 0 18px;
}
.ad-prompt__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ad-prompt__actions .btn {
  width: 100%;
  margin: 0;
  min-height: 46px;
}
.ad-prompt__more {
  margin-top: 10px;
}

/* 送らないものは色で強調。最後の一言は控えめに (2026-09-20 専務) */
.ad-prompt__safe {
  color: #8fd9a8;
  font-weight: 700;
}
.ad-prompt__ask {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold-bright);
}

/* 句読点の後ろだけで折り返す (文の途中で切らない。2026-09-20 専務) */
.ad-prompt .phrase {
  display: inline-block;
}
.ad-prompt .phrase.ad-prompt__safe {
  color: #8fd9a8;
  font-weight: 700;
}

/* 選んでいない難易度は色味が分かる程度まで落とす (2026-09-20 専務) */
.dungeon-select-panel .difficulty-btn {
  background: rgba(212, 169, 78, 0.05);
  color: rgba(226, 198, 138, 0.45);
  border-color: rgba(255, 255, 255, 0.07);
}
.dungeon-select-panel .difficulty-btn.diff-hard {
  background: rgba(207, 91, 75, 0.07);
  color: rgba(255, 156, 138, 0.45);
}
.dungeon-select-panel .difficulty-btn.diff-extreme {
  background: rgba(146, 92, 214, 0.08);
  color: rgba(215, 180, 255, 0.45);
}
.dungeon-select-panel .difficulty-btn.diff-spiral {
  background: rgba(64, 196, 180, 0.07);
  color: rgba(126, 240, 220, 0.45);
}

/* 行の高さは中身で変えない (難易度を切り替えても並びが動かないように。2026-09-20 専務)。
   2026-09-21: ジョブ変更・バディ設定も同じ行クラスを使っているため、ステージ選択にだけ効かせる */
.dungeon-select-row.stage-row {
  /* すべて同じ高さ。難易度を切り替えても並びが動かない */
  height: 80px;
  justify-content: center;
}
.dungeon-select-row.stage-row .dungeon-select-name {
  white-space: nowrap;
  overflow: hidden;
}
.dungeon-select-row.stage-row .dungeon-select-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* 1行でも2行でも同じ高さを確保する */
  min-height: 2.8em;
}

/* 畳んだステータス (ホーム) */
.stats-toggle {
  align-self: flex-start;
  margin: 6px 0 0;
}

/* 質問タブの新着の印 (吹き出しはやめて、タブに点だけ。2026-09-20 専務) */
.chat-tab__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: #ff6b5b;
  box-shadow: 0 0 6px rgba(255, 107, 91, 0.7);
  vertical-align: middle;
}

/* 出撃バーの難易度バッジは背景の絵に重なるので、下地を濃いめにして読ませる (2026-09-20 専務) */
.dungeon-bar-diff {
  background: rgba(20, 15, 9, 0.88);
  text-shadow: none;
}
.dungeon-bar-diff.diff-normal {
  background: rgba(20, 15, 9, 0.9);
}
.dungeon-bar-diff.diff-hard {
  background: rgba(96, 32, 26, 0.9);
}
.dungeon-bar-diff.diff-extreme {
  background: rgba(60, 33, 96, 0.9);
}
.dungeon-bar-diff.diff-spiral {
  background: rgba(16, 76, 70, 0.9);
}

/* Stage and difficulty swipe transitions stay inside the existing launch bar. */
.dungeon-stage-swipe-cover {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background-size: cover;
  background-position: center 62%;
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.62);
  pointer-events: none;
  will-change: transform;
}
.dungeon-stage-drag-cover {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background-size: cover;
  background-position: center 62%;
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.62);
  pointer-events: none;
  will-change: transform;
}
.dungeon-stage-swipe-cover.toward-up { animation: dungeon-stage-swipe-up 180ms cubic-bezier(.2,.7,.25,1) both; }
.dungeon-stage-swipe-cover.toward-down { animation: dungeon-stage-swipe-down 180ms cubic-bezier(.2,.7,.25,1) both; }
@keyframes dungeon-stage-swipe-up { from { transform: translateY(var(--swipe-start, 0px)); } to { transform: translateY(-100%); } }
@keyframes dungeon-stage-swipe-down { from { transform: translateY(var(--swipe-start, 0px)); } to { transform: translateY(100%); } }
.dungeon-bar-heading .dungeon-bar-info .dungeon-bar-name,
.dungeon-bar-heading .dungeon-bar-info > .dungeon-bar-diff { z-index: 2; }
.dungeon-diff-motion {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  min-width: 0;
  height: 28px;
  overflow: hidden;
  border-radius: 6px;
  isolation: isolate;
}
.dungeon-diff-drag {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  min-width: 54px;
  height: 28px;
  overflow: hidden;
  border-radius: 6px;
  isolation: isolate;
}
.dungeon-diff-drag-sizer {
  display: inline-flex;
  visibility: hidden;
  height: 28px;
  min-width: 54px;
  margin: 0;
  padding: 0 7px;
  justify-content: center;
  box-sizing: border-box;
}
.dungeon-diff-drag-old,
.dungeon-diff-drag-next {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 28px;
  margin: 0;
  box-sizing: border-box;
}
.dungeon-diff-drag-old { transform: translateX(var(--drag-x, 0px)); }
.dungeon-diff-drag-next { will-change: transform; }
.dungeon-diff-drag-next:not([style]) { transform: translateX(100%); }
.dungeon-diff-motion .dungeon-diff-sizer {
  display: inline-flex;
  visibility: hidden;
  height: 28px;
  min-width: 54px;
  margin: 0;
  padding: 0 7px;
  justify-content: center;
  box-sizing: border-box;
}
.dungeon-diff-motion .dungeon-diff-old,
.dungeon-diff-motion .dungeon-diff-new {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 28px;
  margin: 0;
  box-sizing: border-box;
}
.dungeon-diff-motion .dungeon-diff-new { animation: dungeon-difficulty-in 180ms cubic-bezier(.2,.7,.25,1) both; }
.dungeon-diff-motion .dungeon-diff-old { animation: dungeon-difficulty-out 180ms cubic-bezier(.2,.7,.25,1) both; }
.dungeon-diff-motion.toward-left .dungeon-diff-new { --diff-shift: 100%; }
.dungeon-diff-motion.toward-right .dungeon-diff-new { --diff-shift: -100%; }
.dungeon-diff-motion.toward-left .dungeon-diff-old { --diff-shift: -100%; }
.dungeon-diff-motion.toward-right .dungeon-diff-old { --diff-shift: 100%; }
@keyframes dungeon-difficulty-in { from { opacity: .55; transform: translateX(var(--diff-new-from, var(--diff-shift, 100%))); } to { opacity: 1; transform: translateX(0); } }
@keyframes dungeon-difficulty-out { from { opacity: 1; transform: translateX(var(--diff-from, 0px)); } to { opacity: .55; transform: translateX(var(--diff-old-to, var(--diff-shift, -100%))); } }
@media (prefers-reduced-motion: reduce) {
  .dungeon-stage-swipe-cover, .dungeon-diff-motion .dungeon-diff-old, .dungeon-diff-motion .dungeon-diff-new { animation-duration: 1ms; }
}

/* ---- ヘルプ会話 (隊長2人の解説) と、ストーリー全体の背景 (2026-09-20 専務) ---- */
/* 黒一色だと味気ないので、同じステージの絵を最背面にぼかして敷く (高さ基準・左右は切る) */
.story-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--story-bg);
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(5px) brightness(0.48) saturate(0.9);
  transform: scale(1.06); /* ぼかしの縁が出ないよう少し広げる */
  pointer-events: none;
}
.story-overlay > * {
  position: relative;
}

/* ヘルプ章は図解が主役。舞台の枠と余白をなくし、左右いっぱい・隊長の頭の手前まで大きく出す
   (2026-09-20 専務)。立ち絵は下端ぞろえなので、ここを伸ばしても頭の位置は動かない */
.story-overlay.help .story-arena-box {
  height: min(300px, 34vh);
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  margin-left: -10px;
  margin-right: -10px;
  width: auto;
}

/* 枠が広くなったぶん、導入の手順カードも読みやすい大きさにする */
.story-overlay.help .help-figure { gap: 12px; padding: 14px 12px; }
.story-overlay.help .help-figure__label { font-size: 14px; }
.story-overlay.help .help-figure__steps { gap: 4px; }
.story-overlay.help .help-figure__card { padding: 14px 8px 18px; gap: 4px; }
.story-overlay.help .help-figure__glyph { font-size: 26px; }
.story-overlay.help .help-figure__title { font-size: 14px; }
.story-overlay.help .help-figure__note { font-size: 11px; }
.story-overlay.help .help-figure__arrow { font-size: 14px; }

/* 解説の図解: 手順3枚を並べ、いま話している段を光らせる */
.help-figure {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  background: rgba(0, 0, 0, 0.72);
}
.help-figure__label {
  font-family: var(--font-title);
  font-size: 12px;
  color: var(--gold-bright);
  text-align: center;
}
.help-figure__steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
}
.help-figure__cell {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.help-figure__arrow {
  color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  transition: color 0.25s ease;
}
.help-figure__arrow.lit {
  color: var(--gold-bright);
}
.help-figure__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--panel-edge);
  background: rgba(0, 0, 0, 0.5);
  color: var(--text-dim);
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.help-figure__card.done {
  color: var(--text);
  border-color: rgba(212, 169, 78, 0.45);
}
.help-figure__card.now {
  color: var(--text);
  border-color: var(--gold);
  background: rgba(212, 169, 78, 0.16);
  box-shadow: 0 0 12px rgba(212, 169, 78, 0.35);
}
.help-figure__no {
  font-size: 10px;
  color: var(--gold-bright);
}
.help-figure__glyph {
  font-size: 18px;
  line-height: 1;
}
.help-figure__title {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.help-figure__note {
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
}
/* 実画面のスクショを出す段 */
.help-figure.shot { position: relative; flex-direction: row; align-items: stretch; justify-content: flex-start; gap: 6px; padding: 6px 6px 22px; background: rgba(0, 0, 0, 0.82); }
/* 左: 画面まるごと (どこの話か分かるように) */
.help-figure__mini { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 390 / 844; border-radius: 6px; overflow: hidden; border: 1px solid var(--panel-edge); }
.help-figure__mini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.help-figure__mark { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--gold-bright); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(212, 169, 78, 0.9); }
/* 右: その場所を実寸で拡大 (文字が読めるように) */
.help-figure__zoom { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; border-radius: 6px; overflow: hidden; border: 1px solid var(--gold); background: #000; }
.help-figure__pan { position: absolute; width: 390px; height: 844px; }
.help-figure__pan img { width: 390px; height: 844px; max-width: none; display: block; }
.help-figure__spot { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.help-figure__ring { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold-bright); box-shadow: 0 0 12px rgba(212,169,78,0.7); animation: help-figure-ring 1.6s ease-out infinite; }
@keyframes help-figure-ring { 0% { transform: scale(0.75); opacity: 1; } 70% { transform: scale(1.15); opacity: 0.25; } 100% { transform: scale(1.15); opacity: 0; } }
.help-figure__spot .help-figure__hand { position: absolute; left: 6px; top: 10px; font-size: 20px; }
.help-figure__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; font-size: 11px; color: var(--text); background: rgba(0,0,0,0.72); }
.help-figure__cap b { color: var(--gold-bright); margin-right: 4px; }
.low-power .help-figure__ring { animation: none; }

/* 指は下から現れて、軽くタップするように上下する */
.help-figure__hand {
  position: absolute;
  left: 50%;
  bottom: -10px;
  font-size: 18px;
  transform: translateX(-50%);
  animation: help-figure-tap 1.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}
@keyframes help-figure-tap {
  0%, 100% { transform: translate(-50%, 0); }
  45% { transform: translate(-50%, -7px); }
  60% { transform: translate(-50%, -2px); }
}
.low-power .help-figure__hand { animation: none; }


/* お知らせの追記行に付ける印 (2026-09-21 専務) */
.news-lines .news-added { margin-right: 6px; vertical-align: middle; }

/* スキルの効果一覧 (2026-09-23 専務): 効果名 → 値、押すとそれを持つマスの一覧へ */
.skill-effect-index-panel { max-width: 460px; }
.skill-effect-index { display: flex; flex-direction: column; gap: 2px; text-align: left; max-height: 52vh; overflow-y: auto; }
.skill-effect-index > * { flex-shrink: 0; }
.skill-effect-index__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 4px 2px;
  border-bottom: 1px solid #ffffff12;
  font-size: 13px;
}
.skill-effect-index__row.is-off { opacity: .45; }
.skill-effect-index__row .term-link { display: block; width: 100%; text-align: left; overflow-wrap: anywhere; line-height: 1.5; }
.skill-effect-index__dots { letter-spacing: 1px; font-size: 11px; color: var(--gold-bright, #f2cd72); white-space: nowrap; }
.skill-effect-index__value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.skill-effect-index__value small { display: block; font-size: 9px; opacity: .7; }
/* 効果表の見出しを押せるようにしても、行の高さは変えない */
.skill-effect-label-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; min-width: 0; text-align: left; text-decoration: underline dotted; text-underline-offset: 2px; }

/* 持ち物のルーン行のロック: カードのように浮かせず、行の右端に置く (2026-09-23 専務) */
.rune-row-lock { position: static; flex-shrink: 0; margin-left: auto; }

/* レースの受付案内 (チャットに出す)。レース画面のCSSは開くまで読み込まれないので、ここに置く (2026-09-23 専務) */
.race-notice-msg{padding:0;background:none;border:0}
.race-notice{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:7px 10px;border:1px solid #d4a94e66;border-radius:6px;background:linear-gradient(135deg,#281f15,#120e0a);color:var(--gold-bright,#f2cd72);font:inherit;font-size:12px;text-align:left;cursor:pointer}
.race-notice .badge-dot{position:static;flex-shrink:0}
.race-notice strong{flex-shrink:0}
.race-notice .race-notice__time{flex:1;min-width:0;max-width:none;color:#e4d6c1;font-size:10px}
.race-notice>span:last-child{flex-shrink:0;font-size:15px}

/* 称号 (2026-09-22 専務): 名前のうしろに出す小さな札。ふるまいパックの累計額で得られる */
.title-chip { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid #d4a94e88; border-radius: 4px; background: linear-gradient(135deg, #3a2a12, #1c140a); color: var(--gold-bright, #f2cd72); font-size: 10px; line-height: 16px; white-space: nowrap; vertical-align: middle; }
/* 称号の飾り: 銀・金・虹。同じ TitleChip を全画面で使用する */
.title-chip.is-silver { border-color: #c5d1db; background: linear-gradient(135deg, #273039, #141a20); box-shadow: 0 0 6px #c5d1db66; }
.title-chip.is-silver .title-chip__text {
  font-weight: 700; color: transparent;
  background: linear-gradient(100deg, #91a4b5 0%, #d9e4ed 30%, #ffffff 45%, #d9e4ed 60%, #91a4b5 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  animation: title-gold-shine 1.8s linear infinite;
}
.title-chip.is-gold { border-color: #f2cd72; box-shadow: 0 0 6px #f2cd7255; }
.title-chip.is-gold .title-chip__text {
  font-weight: 700; color: transparent;
  background: linear-gradient(100deg, #a8741e 0%, #f2cd72 30%, #fffbe6 45%, #f2cd72 60%, #a8741e 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  animation: title-gold-shine 1.8s linear infinite;
}
/* 模様 1 枚ぶん (幅の 2.5 倍) ぴったり動かして、つなぎ目で飛ばないようにする。
   位置の % は (枠 − 模様) の幅に対する割合なので、1 枚ぶん = 2.5 / 1.5 = 166.67% */
@keyframes title-gold-shine { 0% { background-position: 166.667% 0; } 100% { background-position: 0% 0; } }
.title-chip.is-rainbow {
  border-color: transparent;
  background: linear-gradient(135deg, #3a2a12, #1c140a) padding-box, linear-gradient(90deg, #ff9a9a, #ffe680, #9dffb5, #8ae4ff, #c9adff, #ff9ee3, #ff9a9a) border-box;
  background-size: 100% 100%, 200% 100%;
  animation: title-rainbow-border 3s linear infinite;
  box-shadow: 0 0 8px #c9adff55;
}
.title-chip.is-rainbow .title-chip__text {
  font-weight: 700; color: transparent;
  /* 少しパステル寄り (2026-09-24 専務) */
  background: linear-gradient(90deg, #ff9a9a, #ffe680, #9dffb5, #8ae4ff, #c9adff, #ff9ee3, #ff9a9a);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  animation: title-rainbow-text 2.4s linear infinite;
}
@keyframes title-rainbow-text { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } }
@keyframes title-rainbow-border { 0% { background-position: 0 0, 0% 0; } 100% { background-position: 0 0, -200% 0; } }
.low-power .title-chip .title-chip__text, .low-power .title-chip.is-rainbow { animation: none; }
@media (prefers-reduced-motion: reduce) { .title-chip .title-chip__text, .title-chip.is-rainbow { animation: none; } }
/* ミッション一覧の報酬欄・称号選択では少し大きく */
.title-chip.is-large { font-size: 12px; line-height: 20px; padding: 0 8px; }
.title-pick { display: flex; flex-direction: column; gap: 6px; }
.title-pick .btn { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; text-align: left; }
.title-pick .btn small { font-size: 10px; opacity: .8; }

/* ショップ: PayPay で支払うボタン (PayPay の赤) */
.shop-paypay-btn { background: #ff0033; border-color: #ff0033; color: #fff; }
.shop-paypay-btn:hover:not(:disabled) { filter: brightness(1.08); }

/* 管理: PayPay の鍵 (入力欄を縦に並べる) */
.admin-link-panel .admin-link-key + .admin-link-key { margin-top: 6px; }
.admin-paypay-sandbox { display: flex; align-items: center; gap: 6px; margin-top: 8px; }

/* ショップ: 今は買えない商品のボタン。押せるまま見た目だけ落とし、押したら理由をトーストで出す (2026-09-23) */
.shop-buy-btn.is-blocked { opacity: 0.45; filter: grayscale(0.6); }
/* ふるまいパックの「名前を出さない」切り替え */
.shop-feast-anon { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim, #b7a98f); }

/* ショップ: 挑戦回数の補充の詳細 (2026-09-24) */
.refill-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.refill-head-name { flex: 1; font-weight: 700; }
.refill-head-val { font-size: 22px; font-weight: 800; color: var(--gold-bright); white-space: nowrap; }
.refill-head-note { margin: 6px 0 12px; }
.refill-sec { margin-bottom: 8px; }
.refill-sec-head { display: flex; align-items: center; gap: 8px; }
.refill-sec-name { flex: 1; font-weight: 700; }
.refill-sec-val { font-weight: 700; color: var(--gold-bright); white-space: nowrap; }
.refill-sec-val.is-limiting { color: #7ef0dc; }
.refill-sec .news-arrow { margin-left: 0; }
.refill-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.refill-lead { font-size: 12px; color: var(--text-dim); margin-bottom: 2px; }
.refill-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.refill-row-name { flex: 1; min-width: 0; }
.refill-row-val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.refill-row--sub { color: var(--text-dim); font-size: 12px; }
.refill-row--sub .refill-row-name { padding-left: 14px; }
.refill-row--total { border-top: 1px solid var(--panel-edge); padding-top: 4px; margin-top: 2px; font-weight: 700; }
.refill-row--total .refill-row-val { color: var(--gold-bright); }
.refill-head, .refill-sec, .refill-head-note { text-align: left; }
.refill-head-val small { font-size: 13px; font-weight: 700; margin-left: 2px; }
.refill-sec-name { display: flex; align-items: center; gap: 6px; }
.refill-help { margin: 0; padding-left: 1.2em; text-align: left; display: flex; flex-direction: column; gap: 8px; line-height: 1.6; }
/* ミッション受け取り: 称号は2段 (上にミッション名、下に報酬を項目ごとに折り返す) (2026-09-24) */
.mission-result__row--stack { flex-direction: column; align-items: stretch; gap: 2px; text-align: left; }
.mission-result__row--stack .mission-result__title { color: var(--text-dim); font-size: 12px; }
.mission-result__rewards { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 10px; }
.mission-result__reward { white-space: nowrap; }
/* 称号名は残りの幅いっぱいに取り、入りきらなければ流す。狭すぎるときは券が次の行へ回る */
.mission-result__rewards > .marquee { flex: 1 1 0; min-width: 9em; }

/* 周回設定 (2026-09-24) */
.repeat-stop-lead { margin-bottom: 4px; text-align: left; }
.repeat-stop-items { display: flex; flex-direction: column; gap: 8px; padding: 0 4px 8px; }
.repeat-stop-picked { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px; min-height: 24px; align-items: center; }
.repeat-stop-chip { cursor: pointer; }
.repeat-stop-search { width: 100%; }
.repeat-stop-list { max-height: 36vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--panel-edge); border-radius: 8px; padding: 4px; }
.repeat-stop-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; text-align: left; cursor: pointer; }
.repeat-stop-option.is-on { background: rgba(126, 240, 220, 0.1); }
.repeat-stop-name { flex: 1; min-width: 0; }
.repeat-stop-level { padding: 0 4px 8px; }
.repeat-stop-level small { color: var(--text-dim); font-weight: 600; }
.repeat-stop-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* 持ち物の NEW (2026-09-24): アイコン左上に小さく。文字そのものが金色のグラデーションで、光が左から右へ走る */
.item-icon-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.item-new {
  position: absolute;
  top: -3px;
  left: -3px;
  z-index: 1;
  padding: 0 3px;
  border-radius: 4px;
  background: rgba(10, 8, 4, 0.85);
  line-height: 14px;
  pointer-events: none;
}
.item-new-text {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: transparent;
  background: linear-gradient(100deg, #a8741e 0%, #f2cd72 30%, #fffbe6 45%, #f2cd72 60%, #a8741e 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: item-new-shine 1.8s linear infinite;
}
@keyframes item-new-shine {
  0% { background-position: 100% 0; }
  100% { background-position: -150% 0; }
}
.low-power .item-new-text { animation: none; }

/* リリース記念ミッション (2026-09-24) */
.release-missions { display: flex; flex-direction: column; gap: 8px; }
.release-days { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.release-day {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}
.release-day.is-done { color: #1b1408; background: var(--gold-bright); border-color: var(--gold-bright); }
.release-day.is-next { border-color: var(--gold-bright); color: var(--gold-bright); }
.release-days-count { margin-left: auto; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.release-days-count b { color: var(--gold-bright); font-size: 14px; }
.release-day-card { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--panel-edge); text-align: left; }
.release-day-card.is-locked { border-style: dashed; }
details.release-day-card > summary { list-style: none; cursor: pointer; }
details.release-day-card > summary::-webkit-details-marker { display: none; }
.release-day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 4px; }
.release-day-title { font-weight: 800; color: var(--gold-bright); }
.release-day-card.is-locked .release-day-title, .release-day-card.is-claimed .release-day-title { color: var(--text-dim); }
.release-row { display: flex; flex-direction: column; gap: 4px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.release-row-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; }
.release-row-title small { color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.release-row-bar { height: 4px; margin: 0; }
/* 報酬の 2 列 (一般 / 冒険者パック) と受け取るボタン。列の見出しも同じ並び */
.release-row-rewards { display: grid; grid-template-columns: 1fr 1fr 76px; gap: 6px; align-items: stretch; }
.release-row-rewards .btn { min-width: 0; }
.release-cols { padding: 0 10px; }
.release-col { font-size: 11px; font-weight: 800; text-align: center; letter-spacing: 0.06em; padding: 3px 0; border-radius: 6px; }
.release-col--general { color: #e8e2d4; background: rgba(255, 255, 255, 0.08); }
.release-col--pack { color: #2a1406; background: linear-gradient(90deg, #f0b44c, #e56a2c); }
.release-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.release-tile--general { background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)); border: 1px solid rgba(255, 255, 255, 0.18); }
.release-tile--pack { background: linear-gradient(180deg, rgba(240, 150, 60, 0.45), rgba(200, 80, 30, 0.3)); border: 1px solid rgba(255, 170, 80, 0.6); }
.release-tile.is-locked .release-tile-body { opacity: 0.35; }
.release-tile.is-done .release-tile-body { opacity: 0.45; }
.release-tile-mark { position: absolute; right: 4px; top: 2px; font-size: 11px; }
.release-tile.is-done .release-tile-mark { color: #7ef0dc; font-weight: 900; }
.release-row.is-locked .release-row-title,
.release-row.is-locked .release-row-bar { opacity: 0.55; }
.release-row.is-claimed .release-row-title { opacity: 0.6; }

/* 期間限定の見出し: バナー風のアコーディオン (最初は閉じる) */
.mission-group { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.mission-group > summary { list-style: none; cursor: pointer; }
.mission-group > summary::-webkit-details-marker { display: none; }
.mission-group-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(242, 205, 114, 0.55);
  background: linear-gradient(100deg, #5a3a12 0%, #3a250c 55%, #22170a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4);
  text-align: left;
  overflow: hidden;
}
.mission-group--survey .mission-group-head { background: linear-gradient(100deg, #1f4a52 0%, #173338 55%, #10201f 100%); border-color: rgba(126, 240, 220, 0.5); }
.mission-group--weekly .mission-group-head { background: linear-gradient(100deg, #3b2a5c 0%, #2a1f40 55%, #1a1428 100%); border-color: rgba(187, 107, 255, 0.5); }
/* リリース記念はバナー画像を背景に。文字が読めるよう左から暗くする */
.mission-group--release .mission-group-head { min-height: 84px; background-size: cover; background-position: center; }
.mission-group--release .mission-group-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 6, 2, 0.1) 0%, rgba(10, 6, 2, 0.35) 45%, rgba(10, 6, 2, 0.85) 100%);
}
.mission-group-head > * { position: relative; }
.mission-group-title { font-size: 17px; font-weight: 900; letter-spacing: 0.08em; color: #fff3cf; text-shadow: 0 1px 0 #000, 0 0 8px rgba(242, 205, 114, 0.55); }
.mission-group--release .mission-group-title { margin-left: auto; }
.mission-group-sub { margin-left: auto; font-size: 11px; font-weight: 700; color: #f0e6cc; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.mission-group--release .mission-group-sub { margin-left: 0; }
.mission-group-arrow::before { content: '▸'; color: #fff3cf; font-size: 13px; }
details[open] > .mission-group-head .mission-group-arrow::before { content: '▾'; }
.mission-locked { opacity: 0.55; }

/* リリース記念ミッションのページ (2026-09-24) */
.release-page { display: flex; flex-direction: column; gap: 10px; }
.release-page-banner { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 10px; border: 1px solid rgba(242, 205, 114, 0.55); }
.release-page-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.release-page-meta b { color: #ece0c8; }
.release-page-login b { color: var(--gold-bright); font-size: 16px; }
.release-page-all { position: relative; width: 100%; }
.release-page-count { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; background: #201708; color: var(--gold-bright); font-size: 12px; }
/* 3 列: 見出しも各行も同じ幅で縦にそろえる */
.release-grid { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; gap: 6px; align-items: center; }
.release-grid-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(26, 20, 14, 0.96);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dim);
  text-align: left;
}
.release-grid-head > span:not(:first-child) { text-align: center; padding: 4px 0; border-radius: 6px; }
.release-head-general { background: rgba(255, 255, 255, 0.08); color: #e8e2d4; }
.release-head-pack { background: linear-gradient(90deg, #c9622a, #8f3f18); color: #ffe6cf; }
.release-page-day { border-radius: 10px; border: 1px solid var(--panel-edge); background: #241c13; overflow: hidden; }
.release-page-day.is-today { border-color: #d4a94e; }
.release-page-day-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; }
.release-page-day-head::-webkit-details-marker { display: none; }
.release-day-badge { padding: 3px 10px; border-radius: 6px; font-size: 13px; font-weight: 900; background: var(--gold-bright); color: #201708; white-space: nowrap; }
.release-page-day.is-locked .release-day-badge { background: #2d2318; color: var(--text-dim); border: 1px solid #3d2f1e; }
.release-page-day.is-done .release-day-badge { background: #4a3a1c; color: #e8d7a6; }
.release-page-state { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.release-page-state.is-ready { color: #7ef0dc; }
.release-page-arrow::before { content: '▸'; color: var(--text-dim); font-size: 12px; }
details[open] > .release-page-day-head .release-page-arrow::before { content: '▾'; }
.release-page-row { padding: 8px 10px; border-top: 1px solid #3d2f1e; }
.release-page-mission { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; text-align: left; }
.release-page-mission-title { font-size: 13px; font-weight: 800; }
.release-page-mission small { color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.release-page-bar { flex-basis: 100%; height: 4px; margin: 2px 0 0; }
.release-page-day.is-locked .release-page-mission { opacity: 0.55; }
/* 報酬の枠 (押して受け取る)。受け取れる = 明るく光の帯が走る / まだ = 暗い / 受取済 = 文字を前に */
.release-page-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  color: #ece0c8;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
  /* まだ受け取れない: 暗く */
  filter: brightness(0.55) saturate(0.6);
}
.release-page-tile .sp-icon { width: 20px; height: 20px; }
.release-page-tile--general { background: linear-gradient(180deg, #3a2e20, #2a2117); border: 1px solid #4a3a26; }
.release-page-tile--pack { background: linear-gradient(180deg, #c9622a, #8f3f18); border: 1px solid #ff9a4a; color: #ffe6cf; }
.release-page-tile.is-ready {
  filter: none;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 1px rgba(242, 205, 114, 0.5), 0 0 12px rgba(242, 205, 114, 0.45);
}
.release-page-tile--general.is-ready { background: linear-gradient(180deg, #6a5226, #43331a); }
/* 光の帯: 押せる枠だけ、左から右へ斜めの光が走る */
.release-page-tile.is-ready::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 246, 210, 0.75), transparent);
  transform: skewX(-20deg);
  animation: release-tile-shine 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes release-tile-shine {
  0% { left: -60%; }
  55%, 100% { left: 130%; }
}
.low-power .release-page-tile.is-ready::after { animation: none; display: none; }
/* 受取済: 報酬は沈めて、「受取済」の文字を前に */
.release-page-tile.is-done { filter: none; }
.release-page-tile.is-done > :not(.release-page-done) { opacity: 0.25; }
.release-page-tile.is-done { color: rgba(236, 224, 200, 0.25); }
.release-page-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #7ef0dc;
  text-shadow: 0 1px 2px #000;
  background: rgba(10, 8, 4, 0.45);
}
.release-page-mark { position: absolute; top: 2px; right: 4px; font-size: 11px; }
.release-page-note { text-align: left; }
/* ミッション画面のリリース記念: 押すとページへ */
.mission-group-link { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.mission-group-link .mission-group-head { display: flex; }
.mission-group-go { color: #fff3cf; font-size: 20px; font-weight: 900; line-height: 1; }
.release-head-pack { position: relative; white-space: nowrap; letter-spacing: 0; }
.release-head-lock { position: absolute; top: -6px; right: -4px; font-size: 11px; }
/* 日の見出し行はなくし、バッジは最初の行の頭に。枠と上端をそろえる (2026-09-24) */
.release-page-day { scroll-margin-top: 60px; }
.release-page-day .release-page-row:first-child { border-top: 0; }
.release-page-mission .release-day-badge { margin-right: 6px; }
.release-page-row { align-items: start; }
.release-grid-head { background: #1a140e; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); }
/* ミッション名: 狭い画面では 1 行で流す (押すと全文) */
.release-page-mission { flex-wrap: nowrap; align-items: center; }
.release-page-mission:has(.release-page-bar) { flex-wrap: wrap; }
.release-page-mission-title { flex: 1 1 0; min-width: 0; cursor: pointer; }
.release-page-mission small { flex-shrink: 0; }
.float-hint { max-width: 260px; }
/* 狭い画面: 報酬の枠を細くして、ミッション名の場所を空ける */
@media (max-width: 380px) {
  .release-grid { grid-template-columns: minmax(0, 1fr) 62px 62px; gap: 4px; }
  .release-page-tile { font-size: 12px; height: 40px; }
  .release-page-tile .sp-icon { width: 16px; height: 16px; }
  .release-page .release-day-badge { padding: 2px 6px; font-size: 12px; }
  .release-page-mission .release-day-badge { margin-right: 4px; }
  .release-head-pack { font-size: 10px; }
}

/* 自動周回中の通知 (2026-09-24): 右端に張り付いて出る帯。枠なし、右から左へ透けていくグラデーションだけ。
   右からスッと入って少し留まり、その場で消える (真ん中には出ていかない)。押しても何も起きない */
.run-toasts {
  position: fixed;
  right: 0;
  bottom: calc(150px + env(safe-area-inset-bottom));
  width: 100%;
  height: 0;
  z-index: 16000;
  pointer-events: none;
}
.run-toast {
  --toast-tint: 242, 205, 114;
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: min(72vw, 340px);
  height: 38px;
  padding: 0 14px 0 40px;
  background: linear-gradient(270deg, rgba(12, 8, 3, 0.92) 0%, rgba(12, 8, 3, 0.75) 45%, rgba(12, 8, 3, 0) 100%);
  color: #fff3cf;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
  opacity: 0;
  animation-name: run-toast-flow;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  animation-fill-mode: both;
}
/* 右端の細い光の差し色 (レアリティの色)。帯の上下にも薄く光を流す */
.run-toast::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, rgba(var(--toast-tint), 0.55), rgba(var(--toast-tint), 0) 70%) top / 100% 1px no-repeat,
    linear-gradient(270deg, rgba(var(--toast-tint), 0.55), rgba(var(--toast-tint), 0) 70%) bottom / 100% 1px no-repeat,
    linear-gradient(270deg, rgba(var(--toast-tint), 0.28), rgba(var(--toast-tint), 0) 35%);
  pointer-events: none;
}
.run-toast > * { position: relative; }
@keyframes run-toast-flow {
  0% { transform: translateX(100%); opacity: 0; }
  12% { transform: translateX(0); opacity: 1; }
  82% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(6%); opacity: 0; }
}
.run-toast-tag { padding: 1px 6px; border-radius: 4px; background: var(--gold-bright); color: #201708; font-size: 11px; font-weight: 900; text-shadow: none; }
.run-toast-tag--sphere { background: none; padding: 0; font-size: 16px; }
.run-toast--level b { color: var(--gold-bright); font-size: 16px; }
.run-toast-icon { width: 28px; height: 28px; image-rendering: pixelated; filter: drop-shadow(0 1px 2px #000); }
.run-toast-name { overflow: hidden; }
.run-toast.rarity-legend { --toast-tint: 255, 171, 46; }
.run-toast.rarity-epic { --toast-tint: 187, 107, 255; }
.run-toast.rarity-rare { --toast-tint: 85, 168, 255; }
.run-toast--sphere { --toast-tint: 126, 240, 220; }
.low-power .run-toast { animation-timing-function: linear; }
/* リリース記念 (2026-09-24 専務): 受取済は赤系・ミッション名は細字・全部受け取るは下メニューの上に常に浮かせる */
.release-page-done { color: #cfc6b4; background: rgba(18, 16, 14, 0.6); }
.release-page-mission-title { font-weight: 500; }
.release-page { padding-bottom: 76px; }
.release-page-all {
  position: fixed;
  /* ボタンの押し込み (transform) とぶつからないよう、左右の余白と margin で中央に置く */
  left: 16px;
  right: 16px;
  margin: 0 auto;
  bottom: calc(64px + 12px + env(safe-area-inset-bottom));
  width: auto;
  max-width: 420px;
  z-index: 90;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

/* 周回中のチャット欄 (2026-09-24): バトル画面の外に置き (作り直さない)、order でヘッダーとバトルの間に並べる。
   .run-screen は display: contents にして、中身を .run-wrap の並びに直接入れる */
.run-wrap { position: relative; overflow-x: clip; display: flex; flex-direction: column; }
.run-wrap > .run-screen { display: contents; }
.run-screen > * { order: 2; }
.run-screen > .run-header,
.run-screen > .hard-chip { order: 0; }
.run-wrap > .run-chat-host { order: 1; }
.run-chat-host .chat-panel { margin-bottom: 10px; }
.run-toast--clear { --toast-tint: 255, 214, 120; }
.run-toast-clear { font-size: 14px; letter-spacing: 0.04em; }
.run-toast-clear b { color: var(--gold-bright); font-size: 18px; margin-right: 1px; }
/* 新しい帯が下に入ったとき、出ている帯はなめらかに上へ押し上げる */
.run-toast { transition: bottom 0.22s cubic-bezier(0.2, 0.8, 0.3, 1); }

/* ふるまいパックのお祝い (2026-09-24 専務): 虹寄りのグラデが流れる帯。白い字が読めるよう暗めの色で */
.chat-msg.chat-celebrate.chat-celebrate--feast {
  border-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(100deg, #7a2350, #7a4a16, #5f6a14, #1d6b4a, #1b4f7a, #4a2a7a, #7a2350);
  background-size: 300% 100%;
  animation: feast-rainbow 6s ease-in-out infinite alternate;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.chat-msg.chat-celebrate.chat-celebrate--feast .chat-celebrate__text b { color: #fff3c4; }
@keyframes feast-rainbow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
.low-power .chat-msg.chat-celebrate.chat-celebrate--feast { animation: none; }
/* フィギュアガチャの課金 (2026-09-24 専務): ガチャの枠の中、錬石の残りの下に 1 行で */
.fig-gacha-buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.fig-gacha-buy-cap, .fig-gacha-buy-btns { display: inline-flex; align-items: center; gap: 6px; }
.fig-gacha-buy-btns .btn { display: inline-flex; align-items: center; gap: 6px; }
/* ふるまいパックのクラッカーで飛び出すアバター (2026-09-24 専務): 画面の左右の端から、斜め上に向かって上半身だけ顔を出し、
   喜んで揺れてから引っ込む。足元は端の外に隠れたまま (下から出すと下のメニューに重なるので端から) */
.feast-cheer-layer { position: fixed; inset: 0; z-index: 13450; pointer-events: none; overflow: hidden; }
.feast-cheer {
  position: absolute;
  --dir: 1;
  animation-name: feast-cheer-lean;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  /* 回転の軸は足元。足元は端の外に置いたまま、上半身だけが斜めに入ってくる */
  transform-origin: 50% 100%;
}
.feast-cheer.is-left { left: 0; }
.feast-cheer.is-right { right: 0; --dir: -1; }
.feast-cheer__img {
  display: block;
  /* スマホでは画面幅に対して大きすぎて中央まで入り込むので、幅でも上限をかける (2026-09-24 専務) */
  height: clamp(96px, min(20vh, 30vw), 190px);
  width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
/* 右から出るときは画面の内側を向く */
.feast-cheer.is-right .feast-cheer__img { transform: scaleX(-1); }
/* 足元 (回転の軸) は端の外に置いたまま。軸を外に出したぶん深めに傾けて、上半身だけが入ってくるようにする (2026-09-24 専務: スマホで脚が見えていた) */
@keyframes feast-cheer-lean {
  0% { transform: translateX(calc(var(--dir) * -100%)) rotate(0deg); }
  12% { transform: translateX(calc(var(--dir) * -80%)) rotate(calc(var(--dir) * 46deg)); }
  24% { transform: translateX(calc(var(--dir) * -80%)) rotate(calc(var(--dir) * 38deg)); }
  36% { transform: translateX(calc(var(--dir) * -80%)) rotate(calc(var(--dir) * 48deg)); }
  48% { transform: translateX(calc(var(--dir) * -80%)) rotate(calc(var(--dir) * 38deg)); }
  60% { transform: translateX(calc(var(--dir) * -80%)) rotate(calc(var(--dir) * 48deg)); }
  72% { transform: translateX(calc(var(--dir) * -80%)) rotate(calc(var(--dir) * 38deg)); }
  84% { transform: translateX(calc(var(--dir) * -80%)) rotate(calc(var(--dir) * 44deg)); }
  100% { transform: translateX(calc(var(--dir) * -100%)) rotate(0deg); }
}
/* ショップの状態表示 (2026-09-24 専務: 水色の帯をやめて文字だけに)。数字は金の太字、買えないときだけ赤字 */
.shop-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: #f1e6cc; line-height: 1.5; }
.shop-stat b { font-size: 13px; }
.pack-effects li b { color: var(--gold-bright); }
.shop-stat b { color: var(--gold-bright); font-weight: 700; font-variant-numeric: tabular-nums; margin: 0 1px; }
.shop-stat .is-blocked, .shop-stat .is-blocked b { color: #ff9c8c; }
.shop-stat .btn-small { padding: 1px 9px; font-size: 11px; line-height: 1.6; min-height: 0; }
/* 枠の下段 (フィギュアガチャ): 上の本体と細い線で分け、左に状態・右にボタン */
.shop-item-foot { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-top: 8px; border-top: 1px solid var(--panel-edge); }
.shop-item-foot .shop-stat { margin-top: 0; }
.fig-gacha-buy-btns { margin-left: auto; }
/* 状態行の各項目の頭に ◆ (2026-09-24 専務)。切り替えスイッチとボタンには付けない */
.shop-stat > span:not(.shop-feast-anon)::before { content: '◆'; margin-right: 4px; font-size: 9px; color: var(--gold); vertical-align: 1px; }

/* マギ競技 (レース・サバイバーの入口) */
.magi-games { display: grid; gap: 12px; }
.magi-games-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.magi-games-head h2 { margin: 0; color: var(--gold-bright); }
.magi-games-head .btn { justify-self: start; }
.magi-games-note { margin: 0; color: var(--text-dim); font-size: 13px; text-align: center; }
/* ダッシュボード: 商品別の売上 (2026-09-24 専務) */
.sales-chart { width: 100%; height: auto; display: block; margin: 6px 0 4px; }
.sales-chart-label { fill: var(--text-dim); font-size: 10px; }
.sales-table td:not(:first-child), .sales-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.sales-table .sales-total td { font-weight: 700; border-top: 1px solid var(--panel-edge); }
.sales-table-box { margin-top: 6px; }
/* ふるまいコンボ (2026-09-24 専務): つながっている間だけ、チャットの発言一覧の上に固定 */
.chat-msg.chat-celebrate.chat-combo-pin { flex-shrink: 0; margin: 0; }
.chat-combo-pin .chat-combo-pin__num { font-size: 18px; font-weight: 900; color: #ffd23f; margin: 0 1px; }
.chat-combo-pin__time { white-space: nowrap; }
.chat-combo-pin .term-link { color: #fff3c4; }
.chat-combo-pin__roster {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: #fff3c4; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap;
}
.chat-combo-roster { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.chat-combo-roster li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.chat-combo-roster b { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.chat-combo-help { margin: 0 0 8px; padding-left: 1.2em; display: grid; gap: 6px; line-height: 1.6; }
/* 「現在 N コンボ！」: 極太の大きな文字が 1 文字ずつ上から落ちてきて、小さく跳ねる。数字がいちばん大きい */
.feast-combo-layer {
  position: fixed; inset: 0; z-index: 13460; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  animation: feast-combo-out 3200ms ease-in forwards;
}
.feast-combo {
  display: flex; align-items: baseline; padding: 0 16px; max-width: 100vw;
  font-family: 'Dela Gothic One', 'M PLUS 1p', var(--font-body); font-weight: 400; line-height: 1; white-space: nowrap;
}
.feast-combo__ch {
  display: inline-block; opacity: 0;
  font-size: clamp(30px, calc(11vw * var(--k, 1)), 110px); color: #fff4c2;
  -webkit-text-stroke: 0.08em #6b2200; paint-order: stroke fill;
  text-shadow: 0 0.06em 0 #6b2200, 0 0.12em 0.3em rgba(0, 0, 0, 0.5);
  /* 跳ねる高さ・回数・長さは 1 文字ずつランダム (FeastComboHost が --b1〜--b3・--dur を渡す) */
  animation: feast-combo-drop var(--dur, 1400ms) linear both;
  transform-origin: 50% 100%;
  /* 文字間はギリギリ重なるくらいまで詰める (数字は特に。2026-09-24 専務) */
  margin-right: -0.07em;
}
.feast-combo__ch.is-small { font-size: clamp(20px, calc(7vw * var(--k, 1)), 70px); margin-right: -0.04em; }
.feast-combo__ch.is-small + .feast-combo__ch.is-num { margin-left: 0.14em; }
.feast-combo__ch.is-num { font-size: clamp(56px, calc(24vw * var(--k, 1)), 240px); color: #ffd23f; margin-right: -0.16em; }
.feast-combo__ch.is-num + .feast-combo__ch:not(.is-num) { margin-left: 0.2em; }
/* 上から落ちてきて「ぽーん、ぽん、ぽん」とだんだん低く跳ねる (2026-09-24 専務)。着地のたびに少しつぶれる */
@keyframes feast-combo-drop {
  0% { opacity: 0; transform: translateY(-110%); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  22% { opacity: 1; transform: translateY(0) scale(1.08, 0.86); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  40% { transform: translateY(var(--b1, -35%)) scale(0.97, 1.04); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  56% { transform: translateY(0) scale(1.05, 0.9); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  67% { transform: translateY(var(--b2, -14%)) scale(0.99, 1.02); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  77% { transform: translateY(0) scale(1.03, 0.94); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  85% { transform: translateY(var(--b3, -5%)); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  92% { transform: translateY(0) scale(1.01, 0.98); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes feast-combo-out {
  0%, 82% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .feast-combo__ch { animation-duration: 1ms; }
}
.magi-section { display: grid; gap: 8px; }
.magi-section h3 { margin: 4px 0 0; font-size: 15px; color: var(--gold); border-bottom: 1px solid var(--panel-edge); padding-bottom: 4px; }
.magi-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.magi-card { position: relative; display: grid; gap: 3px; align-content: center; justify-items: start; min-height: 84px; padding: 10px 12px; text-align: left; border: 1px solid var(--panel-edge); border-radius: 8px; background: var(--panel-inner); color: inherit; font: inherit; cursor: pointer; }
.magi-card:hover { border-color: var(--gold); }
.magi-card-race { box-shadow: inset 4px 0 0 #6cc4ff; background-image: linear-gradient(90deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.7) 55%, rgba(10,8,6,.3) 100%), url('/assets/race-cover-Bck6LZIN.webp'); }
.magi-card-survivor { box-shadow: inset 4px 0 0 #ff8a5c; background-image: linear-gradient(90deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.7) 55%, rgba(10,8,6,.3) 100%), url('/assets/survivor-cover-Bpw7MjRT.webp'); }
.magi-card { background-size: cover; background-position: 70% center; text-shadow: 0 1px 4px #000; }
.magi-card-kind { font-size: 12px; color: var(--text-dim); }
.magi-card-when { font-size: 16px; color: var(--gold-bright); }
.magi-card-detail { font-size: 12px; color: var(--text-dim); white-space: pre-line; }
.magi-card-mark { position: absolute; top: 8px; right: 8px; font-size: 11px; }
@media (max-width: 420px) { .magi-cards { grid-template-columns: 1fr; } }


/* マギ競技の日程表 (Google カレンダーの週表示風) */
.magi-games-head .magi-cal-btn { justify-self: end; }
.ecal-panel { max-width: 560px; width: calc(100vw - 24px); }
.ecal { font-size: 11px; }
.ecal-head { display: grid; grid-template-columns: 40px repeat(3, minmax(0, 1fr)); gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--panel-edge); text-align: center; }
.ecal-head b { font-size: 12px; color: var(--text-dim); }
.ecal-head b.is-today { color: var(--gold-bright); }
.ecal-scroll { max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.ecal-body { position: relative; display: grid; grid-template-columns: 40px repeat(3, minmax(0, 1fr)); gap: 4px; }
.ecal-hours { position: relative; }
.ecal-hours span { position: absolute; right: 4px; transform: translateY(-50%); color: var(--text-dim); font-size: 10px; }
.ecal-hours span:first-child { transform: none; }
.ecal-day { position: relative; border-left: 1px solid #ffffff14; }
.ecal-grid { position: absolute; left: 0; right: 0; border-top: 1px solid #ffffff0d; }
.ecal-grid.is-main { border-top: 1px dashed #f2cd7266; }
.ecal-ev { position: absolute; box-sizing: border-box; padding: 2px 4px; border-radius: 5px; overflow: hidden; text-align: left; line-height: 1.25; display: flex; flex-direction: column; gap: 1px; }
.ecal-ev b { font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }
.ecal-ev small { font-size: 9px; opacity: .85; }
.ecal-ev.lane-0 { left: 2px; right: 50%; margin-right: 1px; }
.ecal-ev.lane-1 { left: 50%; right: 2px; margin-left: 1px; }
.ecal-ev.lane-full { left: 2px; right: 2px; z-index: 2; justify-content: center; }
.ecal-ev.is-race.is-entry { background: #1f3a4d; border-left: 3px solid #6cc4ff; color: #cfe9ff; }
.ecal-ev.is-race.is-bet { background: #2f6a93; border-left: 3px solid #a8dcff; color: #fff; }
.ecal-ev.is-race.is-go { background: #6cc4ff; color: #0c1924; }
.ecal-ev.is-survivor.is-entry { background: #4a2a1f; border-left: 3px solid #ff8a5c; color: #ffd9c9; }
.ecal-ev.is-survivor.is-bet { background: #9a4a2c; border-left: 3px solid #ffc0a3; color: #fff; }
.ecal-ev.is-survivor.is-go { background: #ff8a5c; color: #2a0f06; }
.ecal-now { position: absolute; left: -4px; right: 0; border-top: 2px solid #ff5a5a; z-index: 3; }
.ecal-now::before { content: ''; position: absolute; left: -2px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #ff5a5a; }
.ecal-note { margin: 8px 0 0; color: var(--text-dim); font-size: 11px; text-align: left; }
.ecal-key { display: inline-block; padding: 1px 6px; border-radius: 4px; margin-right: 6px; font-weight: 700; }
.ecal-key.is-race { background: #6cc4ff; color: #0c1924; }
.ecal-key.is-survivor { background: #ff8a5c; color: #2a0f06; }
/* 遊び方の中に埋め込むときは高さを抑える */
.race-help-panel .ecal-scroll { max-height: 300px; }
.race-help-panel .ecal { text-align: left; }

/* ふるまいパックの演出アイデア (購入した日に1回) */
.shop-feast-idea { display: grid; gap: 6px; margin-top: 10px; padding: 10px; border: 1px dashed var(--gold); border-radius: 8px; background: #ffffff06; text-align: left; }
.shop-feast-idea label { font-size: 12px; color: var(--gold-bright); }
.shop-feast-idea textarea { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; padding: 8px; border-radius: 6px; border: 1px solid var(--panel-edge); background: #172630; color: inherit; font: inherit; font-size: 13px; }
.shop-feast-idea-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shop-feast-idea-foot small { color: var(--text-dim); }
.shop-feast-idea.is-sent { border-style: solid; color: var(--text-dim); font-size: 12px; }
.shop-item:has(> .shop-feast-idea), .shop-item:has(> .shop-feast-movie-test) { flex-wrap: wrap; }
.shop-item > .shop-feast-idea { flex: 1 0 100%; margin-top: 8px; }

/* ふるまいパックのムービー (2026-09-25 専務: 画面中央に横幅いっぱいのフロート枠で再生。後ろの画面は見えたまま) */
.feast-movie { position: fixed; left: 0; right: 0; top: 40%; transform: translateY(-50%); z-index: 13500; pointer-events: none; }
.feast-movie-frame { position: relative; width: 100%; pointer-events: auto; background: #000; box-shadow: 0 0 0 1px #f2cd7288, 0 12px 40px #000c; animation: feast-movie-in .25s ease-out; }
.feast-movie video { display: block; width: 100%; height: auto; max-height: 80dvh; object-fit: contain; }
/* スキップは枠の外、すぐ上の右端 (2026-09-25 専務) */
.feast-movie-bar { position: absolute; bottom: 100%; right: 8px; margin-bottom: 6px; display: flex; gap: 8px; }
.feast-movie-skip { min-width: 96px; }
@keyframes feast-movie-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.shop-item > .shop-feast-movie-test { flex: 1 0 100%; margin-top: 8px; }
.inbox-player-id .inbox-id-text { user-select: all; font-family: monospace; }

/* メモリア図鑑 (アイコンだけ。登録済み = ✅ / 未登録 = 暗く / 未発見 = ？) */
.memoria-codex-btn { margin: 6px 0 2px; }
.memoria-codex-panel { max-width: 560px; }
.memoria-codex-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.memoria-codex-head b { color: var(--gold-bright); font-size: 16px; }
.memoria-codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; max-height: min(62vh, 560px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 6px 6px 2px 2px; }
.memoria-cell { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 4px; border: 1px solid var(--panel-edge); border-radius: 8px; background: var(--panel-inner); cursor: default; }
button.memoria-cell.is-missing { cursor: pointer; }
.memoria-cell img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.memoria-cell.is-missing img { filter: brightness(.4) saturate(.6); }
.memoria-cell.is-missing:hover img { filter: brightness(.6) saturate(.8); }
.memoria-cell.is-unknown { color: var(--text-dim); }
.memoria-check { position: absolute; top: -4px; right: -4px; font-size: 13px; line-height: 1; }

/* 出走表・出場一覧の「能力」: 装備中の競技技能の説明 */
.skill-notes { display: grid; gap: 6px; margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed #ffffff22; text-align: left; }
.skill-notes-row { display: grid; gap: 1px; }
.skill-notes dt { font-size: 12px; font-weight: 700; color: var(--gold-bright); }
.skill-notes dt small { color: var(--text-dim); font-weight: 400; margin-left: 4px; }
.skill-notes dd { margin: 0; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.practice-pet { display: flex; align-items: center; gap: 10px; }