/* きのみガチャ(シミュ)のスタイル。色はサイト共通のCSS変数を使う。 */
.gacha-tool{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:12px;
}
/* チップやピルを連打すると、ブラウザ標準のダブルタップ拡大ジェスチャーが誤発火することが
   あるため、ボタン類はすべて無効化しておく(スクロールなど他のタッチ操作は妨げない)。
   モーダル(ガチャる・まとめて設定)もこの要素の子として描画されるため、ここ一箇所で足りる。 */
.gacha-tool button{ touch-action: manipulation; }
.gacha-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
.gacha-card h2{
  margin:0 0 10px;
  font-size:var(--fs-sm);
  color:var(--navy);
}
/* ②のカード見出しに、きのみ/タイプの表示切替を並べる */
.gacha-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.gacha-card-head h2{ margin:0; }
.gacha-card-head-actions{ display:flex; align-items:center; gap:8px; flex:none; }
/* 裏モードのみ表示する「まとめて設定」(採用個体数の一括入力モーダルを開く) */
.gacha-bulk-btn{
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--navy);
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 12px;
  cursor:pointer;
  white-space:nowrap;
}

/* 裏モード「現実的」の切替(通常は目立たせない、控えめなトグル) */
.gacha-mode-row{ display:flex; justify-content:flex-end; }
.gacha-mode-toggle{
  font:inherit;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
  background:none;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 10px;
  cursor:pointer;
}
.gacha-mode-toggle.active{
  color:var(--navy);
  border-color:var(--navy);
  background:var(--paper-dim);
  font-weight:800;
}

/* ①フィールド選択(単一選択)。ボタンそのものにフィールドのバナー画像を敷き、
   名前を下端に重ねる。画像が無いフィールド(イベント)は黒地に白の「？」の仮表示。 */
.gacha-field-seg{ display:flex; flex-wrap:wrap; gap:8px; }
.gacha-field-btn{
  position:relative;
  flex:1 1 130px;
  min-width:110px;
  height:64px;
  padding:0;
  border:2px solid transparent;
  border-radius:12px;
  background-color:var(--paper-dim);
  background-size:cover;
  background-position:center;
  overflow:hidden;
  cursor:pointer;
}
.gacha-field-btn::before{
  /* バナーの上に敷く暗いグラデーション。画像が明るくても名前ラベルが読めるようにする */
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(10,12,26,.72), rgba(10,12,26,0) 65%);
}
.gacha-field-btn.active{
  border-color:var(--navy);
  box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--navy);
}
/* バナー画像の上だと縁だけでは選択中と分かりにくい(特にダークブルーテーマ)ため、
   テーマに関わらずコントラストが出るチェックマークも重ねる(navy地にpaper色の文字) */
.gacha-field-btn.active::after{
  content:'✓';
  position:absolute;
  top:5px;
  right:5px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--navy);
  color:var(--paper);
  font-size:11px;
  font-weight:900;
  line-height:18px;
  text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.gacha-field-btn.is-placeholder{ background-color:#2b2b30; }
.gacha-field-placeholder{
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-size:1.6rem;
  font-weight:800;
  opacity:.85;
}
.gacha-field-label{
  position:absolute;
  left:8px;
  bottom:6px;
  z-index:1;
  color:#fff;
  font-size:var(--fs-xs);
  font-weight:800;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

.gacha-event-picker{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.gacha-hint{ margin:0 0 8px; font-size:var(--fs-xs); color:var(--ink-soft); }

/* きのみのアイコングリッド(候補プール・イベント固定・許容の選択で共通) */
.gacha-type-grid{ display:flex; flex-wrap:wrap; gap:6px; }
.gacha-chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:46px;
  padding:5px 3px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper-dim);
  cursor:pointer;
}
.gacha-chip-icon{ position:relative; display:inline-block; line-height:0; }
.gacha-chip-icon > img{ width:26px; height:26px; object-fit:contain; }
/* きのみアイコンの右下に小さく重ねるタイプアイコン(きのみだけだと種類が分かりにくいため) */
.gacha-chip-icon > img.gacha-chip-type{
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--paper);
  box-shadow:0 0 0 1px var(--line);
}
/* メイン候補プールに含まれるきのみは、小さな点で分かるようにする(選択状態とは別軸) */
.gacha-chip.is-main-pool{ position:relative; }
.gacha-chip.is-main-pool::after{
  content:'';
  position:absolute;
  top:4px;
  right:4px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--warning);
}
.gacha-chip.active{
  background:var(--paper);
  border-color:var(--navy);
  box-shadow:0 0 0 2px var(--navy) inset;
}
.gacha-chip:disabled{ opacity:.35; cursor:not-allowed; }

/* 裏モード「現実的」のエナジー役チップ: 左上に数字バッジで現在値を出す。
   ヒーラーありは右下に小さなハートの印(読み取り専用、切替は「まとめて設定」のみ) */
.gacha-chip-value{ position:relative; }
.gacha-chip-value-badge{
  position:absolute;
  top:-6px;
  left:-6px;
  min-width:17px;
  height:17px;
  padding:0 3px;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:10px;
  font-weight:800;
  line-height:17px;
  text-align:center;
  box-shadow:0 0 0 1px var(--paper);
}
.gacha-chip-healer-mark{
  position:absolute;
  bottom:-4px;
  left:-4px;
  width:16px;
  height:16px;
  padding:1px;
  border-radius:50%;
  background:var(--paper);
  color:#8BC34A;
  box-shadow:0 0 0 1px var(--paper);
}
.gacha-empty-hint{ margin:0; font-size:var(--fs-xs); color:var(--ink-soft); }

/* 実行ボタン */
.gacha-run-btn{
  align-self:center;
  font:inherit;
  font-size:var(--fs-md);
  font-weight:800;
  padding:10px 36px;
  border:none;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-ink);
  cursor:pointer;
}
.gacha-run-btn:disabled{
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:not-allowed;
}

/* 結果カード一覧(新しい実行結果が先頭に積み上がる) */
.gacha-results{ display:flex; flex-direction:column; gap:12px; }
.gacha-result-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
/* 実行するたびに、入力UI(実行ボタン)の下からカードがせり出すように見せる */
@keyframes gacha-card-enter{
  from{ opacity:0; transform:translateY(-18px) scaleY(.94); }
  to{ opacity:1; transform:translateY(0) scaleY(1); }
}
.gacha-result-card-enter{
  transform-origin:top center;
  animation:gacha-card-enter .38s cubic-bezier(.22, .9, .35, 1);
}
@media (prefers-reduced-motion: reduce){
  .gacha-result-card-enter{ animation:none; }
}
.gacha-result-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.gacha-result-title{ font-weight:800; font-size:var(--fs-md); color:var(--ink); }
.gacha-result-pool{ font-size:var(--fs-2xs); color:var(--ink-soft); white-space:nowrap; }

.gacha-result-icons{ display:flex; flex-wrap:wrap; gap:4px; margin-top:12px; }
.gacha-result-icons img{
  width:22px;
  height:22px;
  object-fit:contain;
  border-radius:50%;
  border:2px solid transparent;
  background:var(--paper-dim);
}
.gacha-result-icons img.is-main-pool{ border-color:var(--warning); }

/* 裏モード: ヒーラーあり×エナジー役N枠以上の確率(1回で出る確率)を並べる小さな表 */
.gacha-realist-extra{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.gacha-realist-extra-title{
  margin:0 0 6px;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.gacha-realist-extra-rows{ display:flex; flex-wrap:wrap; gap:8px; }
.gacha-realist-extra-row{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  background:var(--paper-dim);
  font-size:var(--fs-xs);
  color:var(--ink-soft);
}
.gacha-realist-extra-val{ font-weight:800; color:var(--ink); }

/* 本体: 左に1回の確率(フィールドバナー付き)、右に2〜7回目の折れ線グラフ */
.gacha-result-body{
  display:flex;
  gap:12px;
  align-items:stretch;
}
.gacha-result-left{
  position:relative;
  flex:0 0 128px;
  border-radius:12px;
  overflow:hidden;
  background-color:var(--paper-dim);
  background-size:cover;
  background-position:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:8px;
}
.gacha-result-left::before{
  /* バナーの上に少し暗さを足して、白文字の数字を読みやすくする */
  content:'';
  position:absolute;
  inset:0;
  background:rgba(10,12,26,.45);
}
.gacha-result-left.is-placeholder{ background-color:#2b2b30; }
.gacha-result-placeholder{
  position:relative;
  color:#fff;
  font-size:1.3rem;
  font-weight:800;
  opacity:.8;
}
.gacha-result-num{
  position:relative;
  font-size:1.7rem;
  font-weight:800;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.gacha-result-sub{
  position:relative;
  font-size:var(--fs-2xs);
  color:#fff;
  opacity:.9;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  text-align:center;
}

/* 裏モード「現実的」: 大きい数字(平均で埋まる枠数)の下に、ヒーラーあり確率の行を添える */
.gacha-result-left-realist{ gap:1px; padding:10px 8px; }
.gacha-realist-stat{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:5px;
}
.gacha-realist-label{
  font-size:var(--fs-2xs);
  color:#fff;
  opacity:.85;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.gacha-realist-val{
  font-size:1.05rem;
  font-weight:800;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
  font-variant-numeric:tabular-nums;
}

.gacha-result-right{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.gacha-line-chart{ width:80%; height:auto; display:block; }
.gacha-legend{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:2px; }
.gacha-legend-item{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.gacha-legend-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }
.gacha-line-caption{
  margin:2px 0 0;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
  text-align:center;
}
.gacha-line-axis{ stroke:var(--line); stroke-width:1; }
.gacha-line-path{ fill:none; stroke:var(--info); stroke-width:2; }
.gacha-line-dot{ fill:var(--info); stroke:var(--paper); stroke-width:1.5; }
/* text-anchorはJS側で点ごとに指定する(端の点だけ中央揃えだとラベルが見切れるため、
   CSSでmiddle固定にはしない。CSSのtext-anchorはSVGの属性値より優先されてしまう) */
.gacha-line-val{
  font-size:9px;
  font-weight:700;
  fill:var(--ink);
}
.gacha-line-xlabel{
  font-size:9px;
  fill:var(--ink-soft);
}
.gacha-line-grid{ stroke:var(--line); stroke-width:.75; }
.gacha-line-ytick{
  font-size:8px;
  fill:var(--ink-soft);
}

/* ---- 裏モードのグラフ: タップ/ドラッグで動く縦カーソルと、交点を表示する窓
   (きのみエナジーグラフと同じ仕組み。ラッパーdiv基準で窓を絶対配置する) ---- */
.gacha-chart-wrap{ position:relative; width:80%; }
.gacha-chart-wrap .gacha-line-chart{ width:100%; }
.gacha-cursor-hit{ fill:transparent; cursor:crosshair; touch-action:none; }
.gacha-cursor-line{
  stroke:var(--ink-soft);
  stroke-width:1.25;
  stroke-dasharray:3 2;
  pointer-events:none;
  display:none;
}
.gacha-cursor-dot{
  pointer-events:none;
  stroke:var(--paper);
  stroke-width:1.25;
  display:none;
}
.gacha-chart-tooltip{
  display:none;
  position:absolute;
  top:2px;
  right:2px;
  min-width:88px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  font-size:var(--fs-2xs);
}
.gacha-chart-tooltip.show{ display:block; }
.gacha-chart-tooltip-head{
  margin-bottom:3px;
  font-weight:800;
  color:var(--ink);
}
.gacha-chart-tooltip-row{
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.gacha-chart-tooltip-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.gacha-chart-tooltip-val{ margin-left:auto; font-weight:700; color:var(--ink); }

@media (max-width:460px){
  .gacha-result-body{ flex-direction:column; }
  .gacha-result-left{ flex:none; flex-direction:row; height:56px; }
  /* 現実的モードは3行分の数字があるため、横並び56pxには収まらない。縦積みのまま高さだけ自動に */
  .gacha-result-left-realist{ flex-direction:column; height:auto; gap:4px; padding:10px 8px; }
}

/* カード内の「ガチャる」ボタン。実行ボタンよりも目立つ色・大きさにして、思わず押したくなるように */
.gacha-pull-btn{
  display:block;
  width:100%;
  margin-top:12px;
  padding:14px 20px;
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.05em;
  color:#fff;
  background:linear-gradient(135deg, #FF7A59, #FFB648);
  border:none;
  box-shadow:0 6px 16px rgba(255, 122, 89, .35);
}
.gacha-pull-btn:active{ transform:translateY(1px); box-shadow:0 3px 8px rgba(255, 122, 89, .3); }

/* ---- 「ガチャる」モーダル: 上から0.5秒ほどかけてせり出すように出現させる ---- */
/* tokens.cssの.overlay-modal .modal-card(2クラス)と詳細度を合わせるため、
   ここも.overlay-modalから書く(そうしないとこちらのmax-widthが無視される) */
.overlay-modal .gacha-pull-card{ max-width:min(94vw, 560px); padding:24px; }
@keyframes gacha-pull-slide-in{
  from{ opacity:0; transform:translateY(-48px); }
  to{ opacity:1; transform:translateY(0); }
}
.gacha-pull-modal.open .gacha-pull-card{
  animation:gacha-pull-slide-in .5s cubic-bezier(.22, .9, .35, 1);
}
@media (prefers-reduced-motion: reduce){
  .gacha-pull-modal.open .gacha-pull-card{ animation:none; }
}
.gacha-pull-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding-right:34px;
  margin-bottom:14px;
}
.gacha-pull-title{ font-weight:800; font-size:1.2rem; color:var(--ink); }
.gacha-pull-count{ font-size:1.35rem; font-weight:800; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }

.gacha-pull-slots{
  display:flex;
  gap:10px;
  margin-bottom:18px;
}
.gacha-pull-slot{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:16px 6px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper-dim);
}
.gacha-pull-slot .gacha-chip-icon > img{ width:48px; height:48px; }
.gacha-pull-slot .gacha-chip-icon > img.gacha-chip-type{ width:24px; height:24px; }
.gacha-pull-role{ font-size:var(--fs-xs); color:var(--ink-soft); font-weight:700; }
.gacha-pull-name{
  font-size:var(--fs-xs);
  color:var(--ink);
  font-weight:700;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.gacha-pull-hit{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  min-height:2.4em;
}
.gacha-pull-hit-label{
  font-size:var(--fs-xs);
  font-weight:800;
  color:var(--warning);
}
/* 裏モードのみ: ヒーラー(黄緑の顔アイコン)・エナジー役(炎アイコン+個数)を「当たり！」の下に並べる。
   ヒーラーとエナジー役の間は空けるが、炎アイコンと「×N」は隙間無し・同色で1つのまとまりに見せる */
.gacha-pull-hit-icons{ display:flex; align-items:center; gap:5px; }
.gacha-pull-hit-icon{ width:14px; height:14px; flex:none; }
.gacha-pull-hit-healer{ color:#8BC34A; }
.gacha-pull-hit-energy-group{ display:flex; align-items:center; gap:0; color:var(--warning); }
.gacha-pull-hit-energy{ color:inherit; }
.gacha-pull-hit-count{
  font-size:var(--fs-xs);
  font-weight:800;
  color:inherit;
}
.gacha-pull-slot.is-hit{
  background:var(--paper);
  border-color:var(--warning);
  box-shadow:0 0 0 2px var(--warning) inset;
}
/* ヒーラーが含まれる枠は緑枠で知らせる(当たり枠と同時に成立してもこちらを優先) */
.gacha-pull-slot.is-healer{
  background:var(--paper);
  border-color:var(--success);
  box-shadow:0 0 0 2px var(--success) inset;
}
/* 「もう一度ガチャる」で結果が入れ替わったときも、軽く出現アニメーションを付ける */
@keyframes gacha-pull-slot-pop{
  from{ opacity:0; transform:scale(.85); }
  to{ opacity:1; transform:scale(1); }
}
.gacha-pull-slot{ animation:gacha-pull-slot-pop .25s ease-out; }
@media (prefers-reduced-motion: reduce){
  .gacha-pull-slot{ animation:none; }
}

/* 抽選中(タメ)の表示。結果が出るまでの0.7秒、3枠ともスピナーだけにする */
.gacha-pull-slot.is-pending{ justify-content:center; min-height:104px; }
.gacha-pull-spinner{
  width:36px;
  height:36px;
  border-radius:50%;
  border:4px solid var(--line);
  border-top-color:var(--navy);
  animation:gacha-pull-spin .8s linear infinite;
}
@keyframes gacha-pull-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .gacha-pull-spinner{ animation:none; opacity:.5; }
}

/* ---- 裏モード「現実的」の「まとめて設定」モーダル: 縦に18種を並べ、各行に
   エナジー役の0〜4ピルボタン(連結セグメント)とヒーラーあり/なしのトグルを置く。
   ピルボタン×ヒーラートグル×アイコン名で横幅を取るため、他のモーダルより広めにしている。 ---- */
/* tokens.cssの.overlay-modal .modal-card(2クラス)と詳細度を合わせるため、
   ここも.overlay-modalから書く(そうしないとこちらのmax-widthが無視される) */
.overlay-modal .gacha-value-card{ max-width:min(94vw, 560px); padding:22px; }
.gacha-value-modal-title{
  margin:0 0 14px;
  padding-right:28px;
  font-size:var(--fs-md);
  font-weight:800;
  color:var(--ink);
}
.gacha-value-rows{
  display:flex;
  flex-direction:column;
  max-height:min(64vh, 560px);
  overflow-y:auto;
}
.gacha-value-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 2px;
  border-bottom:1px solid var(--line);
}
.gacha-value-row:last-child{ border-bottom:none; }
.gacha-value-row-name{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--ink);
}
.gacha-value-row-name .gacha-chip-icon > img:not(.gacha-chip-type){ width:26px; height:26px; }
.gacha-value-row-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* ヒーラーあり/なしのトグル(このモーダルでのみ切り替え可能)。黄緑のface-slightly-smiling */
.gacha-value-healer{
  flex:none;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gacha-value-healer-icon{ width:19px; height:19px; }
.gacha-value-healer.active{
  background:#F1F8E9;
  border-color:#8BC34A;
  color:#8BC34A;
}
/* エナジー役0〜4の連結ピルボタン(セグメントコントロール。共通の.segmentedを流用) */
.gacha-value-pills{ flex:none; }
.gacha-value-pills button{ padding:6px 11px; font-size:var(--fs-xs); font-weight:700; }