/* =========================================================
   ROOT 派閥別サマリー — スタイル
   rootdake.com（ROOTだけ遊び尽くす会）のブランドカラーに準拠した
   ライトテーマ + 各派閥固有カラーのアクセント
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=Noto+Sans+JP:wght@300;400;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  /* ↓ サイト本体(root-style.css)のトークンに合わせた値 */
  --bg:#f5f2ec;
  --bg-grad-a: rgba(74,158,142,.06);
  --surface:#FFFFFF;
  --surface-soft:#faf8f4;
  --ink:#2a3830;
  --ink-soft:#4a6058;
  --ink-faint:#8aa89e;
  --line:#d8e8e4;
  --line-strong:#c3dbd5;

  --brand:#4a9e8e;
  --brand-deep:#33756a;
  --brand-soft:#e0f2ef;

  --dawn:#6FC3D6;
  --dawn-deep:#1F86A0;
  --day:#DE8A2E;
  --day-deep:#D97F1E;
  --dusk:#7C8890;
  --dusk-deep:#47616C;

  --req:#B23B2E;
  --req-soft:#F7E4E0;
  --opt:#2F7D5C;
  --opt-soft:#E1EFE7;

  --shadow: 0 10px 28px -14px rgba(74,158,142,.28);
  --shadow-sm: 0 4px 14px -8px rgba(74,158,142,.22);
  --radius: 20px;
  --font-display:'Sora', sans-serif;
  --font-body:'Noto Sans JP', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --faction-color: var(--brand);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior: smooth; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(900px 500px at 85% -6%, var(--bg-grad-a), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  overscroll-behavior-y: none;
}
button{ font-family:inherit; }
h1,h2,h3{ font-family:var(--font-display); margin:0; }
p{ margin:0; }

.app-shell{
  max-width:560px;
  margin:0 auto;
  min-height:100dvh;
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--bg);
}

/* ---------- ヘッダー ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  background:rgba(244,241,233,.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .backbtn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  color:var(--brand); cursor:pointer; flex:none;
}
.topbar .backbtn:active{ background:var(--brand-soft); }
.topbar .backbtn svg{ width:18px; height:18px; flex:none; }
.topbar .badge{
  width:38px; height:38px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:17px;
  color:#fff;
  box-shadow: var(--shadow-sm);
  position:relative; overflow:hidden;
}
.topbar .titles{ min-width:0; flex:1; }
.topbar .titles .eyebrow{
  font-size:11px; letter-spacing:.1em; color:var(--ink-faint);
}
.topbar .titles h1{
  font-size:18px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar .draft-pill{
  display:inline-block; margin-left:8px;
  font-family:var(--font-body); font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:99px;
  background:#FBEDDD; color:#A06A1E;
  border:1px solid #EAD2AC;
  vertical-align:middle;
}

/* ---------- ホーム画面 ---------- */
.home{
  padding:20px 16px 40px;
}
.credit{
  text-align:center; font-size:11px; color:var(--ink-faint);
  margin-top:28px; font-style:italic; letter-spacing:.04em;
}
.home-hero{
  padding:22px 4px 20px;
}
.home-hero .eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; letter-spacing:.1em; color:var(--brand-deep);
  text-transform:uppercase; margin-bottom:12px;
  background:var(--brand-soft); padding:5px 12px; border-radius:99px;
  font-weight:700;
}
.home-hero .eyebrow::before{
  content:''; width:6px; height:6px; border-radius:2px; background:var(--brand);
}
.home-hero h1{
  font-size:26px; line-height:1.35; color:var(--ink); font-weight:700;
}
.home-hero p{
  margin-top:12px; color:var(--ink-soft); font-size:14px; line-height:1.8;
}

.reset-link{
  display:inline-block; margin:-14px 0 24px; font-size:12px; color:var(--ink-faint);
  text-decoration:underline; cursor:pointer;
}

.group-label{
  font-size:12px; color:var(--ink-soft); margin:24px 2px 10px;
  display:flex; align-items:center; gap:8px; font-weight:700;
}
.group-label::after{
  content:''; flex:1; height:1px; background:var(--line);
}

.faction-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}
.faction-card{
  background:var(--fcolor-bg, var(--surface));
  border-radius:16px;
  padding:12px 6px 10px;
  text-align:center;
  cursor:pointer;
  border:2.5px solid var(--fcolor, var(--line));
  box-shadow:0 4px 0 var(--fcolor-shadow, var(--line));
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease;
}
.faction-card:hover{ transform:translateY(-3px); }
.faction-card:active{ transform:translateY(2px); box-shadow:none; }
.faction-card .emblem{
  width:52px; height:52px; margin:0 auto 8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--fcolor, var(--ink)); font-family:var(--font-display); font-weight:700; font-size:20px;
  filter:drop-shadow(2px 3px 4px rgba(0,0,0,.18));
  position:relative;
}
.icon-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}
.faction-card .fname{
  font-size:12.5px; font-weight:700; color:var(--fcolor, var(--ink)); line-height:1.3;
}
.faction-card .ename{
  font-size:8.5px; font-weight:700; letter-spacing:.02em;
  font-family:var(--font-display);
  color:var(--fcolor, var(--ink-soft));
  margin-top:2px; line-height:1.2;
}
.faction-card .draft-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--day); margin-left:3px; vertical-align:middle;
}

/* ---------- キャラクター選択 ---------- */
.char-list{ padding:6px 16px 40px; }
.char-card{
  background:var(--surface); border-radius:16px; padding:14px 16px;
  margin-bottom:10px; cursor:pointer;
  border:2px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.char-card.selected{ border-color:var(--faction-color); }
.char-card .cname{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); }
.char-card .citems{ font-size:12px; color:var(--ink-soft); margin-top:4px; }
.char-card .cspecial-title{ font-weight:700; font-size:12.5px; color:var(--ink); margin-top:8px; }
.char-card .cspecial{ font-size:12.5px; color:var(--ink); margin-top:2px; line-height:1.6; }

/* ---------- タブ ---------- */
.tabs{
  display:flex; gap:6px; padding:10px 16px 4px;
  position:sticky; top:66px; z-index:20;
  background:var(--bg);
}
.tab-btn{
  flex:1; padding:11px 0; text-align:center; border-radius:12px;
  font-size:14px; font-weight:700; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line);
  cursor:pointer;
}
.tab-btn.active{
  background:var(--faction-color, var(--brand));
  color:#fff; border-color:transparent;
  box-shadow: var(--shadow-sm);
}

.setup-toggle{
  display:flex; align-items:center; justify-content:space-between;
  margin:10px 16px 0; padding:11px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  font-size:12.5px; color:var(--ink-soft); font-weight:700;
}
.pill-switch{ display:flex; background:var(--bg); border-radius:99px; padding:3px; border:1px solid var(--line); }
.pill-switch button{
  border:none; background:transparent; color:var(--ink-soft);
  font-size:12px; padding:6px 12px; border-radius:99px; cursor:pointer; font-weight:700;
}
.pill-switch button.active{ background:var(--faction-color, var(--brand)); color:#fff; }

.advanced-note{
  margin:10px 16px 0; padding:13px 14px; border-radius:12px;
  background:#FBEDDD; border:1px solid #EAD2AC;
  font-size:12px; line-height:1.8; color:#7A521A;
}

.draft-banner{
  margin:12px 16px 0; padding:13px 14px; border-radius:12px;
  background:var(--surface); border:1px dashed var(--line-strong);
  font-size:12px; line-height:1.8; color:var(--ink-soft);
}

/* ---------- コンテンツ ---------- */
.content{ flex:1; padding:14px 16px 120px; }

.abilities-box{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:6px 14px;
  margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.abilities-box .ab-title{
  font-size:11px; letter-spacing:.1em; color:var(--ink-faint);
  padding-top:12px; text-transform:uppercase; font-weight:700;
}
.abilities-box .ab-item{ padding:10px 0; border-top:1px solid var(--line); }
.abilities-box .ab-item:first-of-type{ border-top:none; }
.abilities-box .ab-name{ font-weight:700; font-size:13.5px; color:var(--ink); }
.abilities-box .ab-text{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; line-height:1.7; }

.phase-header{
  display:flex; align-items:center; gap:10px;
  margin:26px 0 12px; padding:11px 14px;
  border-radius:12px; color:#fff; font-weight:700; font-size:15px;
  font-family:var(--font-display);
  box-shadow: var(--shadow-sm);
  text-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.phase-header:first-child{ margin-top:4px; }
.phase-header .dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.85); }
.phase-dawn{ background:linear-gradient(100deg, var(--dawn-deep), var(--dawn)); }
.phase-day{ background:linear-gradient(100deg, var(--day-deep), var(--day)); }
.phase-dusk{ background:linear-gradient(100deg, var(--dusk-deep), var(--dusk)); }

/* ---------- ステップ（封蝋トグル） ---------- */
.step{
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 4px; border-bottom:1px solid var(--line);
}
.step.done{ opacity:.4; }
.step.locked{ opacity:.5; }
.step .step-main{ flex:1; min-width:0; }
.step .step-text{ font-size:14px; line-height:1.65; color:var(--ink); }
.step .step-note{ font-size:12px; line-height:1.65; color:var(--ink-soft); margin-top:5px; }
.flag{
  display:inline-block; font-size:10px; font-weight:700; padding:2px 7px;
  border-radius:99px; margin-bottom:5px; letter-spacing:.03em;
}
.flag-required{ background:var(--req-soft); color:var(--req); border:1px solid #E7BDB4; }
.flag-optional{ background:var(--opt-soft); color:var(--opt); border:1px solid #BFDDCC; }

/* 複数の選択肢を並べる補助表示（白枠＋区切り線、budget-box/action-chipと同じトーン） */
.sub-notes-box{
  margin-top:10px; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:2px 13px;
}
/* .step 内の .sub-notes-box だけは、右側の封蝋トグル（38px）とgap（12px）、
   .stepの右padding（4px）のぶんだけ右端が縮んでいる（budget-box内のaction-chipには
   この右側トグルが無いため対象外）。右マージンをその分だけ相殺し、
   .step全体の右端（＝封蝋トグルと同じ位置）まで枠を広げる。 */
.step .sub-notes-box{ margin-right:-54px; }
.sub-note-item{ padding:10px 0; border-top:1px solid var(--line); }
.sub-note-item:first-child{ border-top:none; }
.sub-note-item .sni-label{ font-weight:700; font-size:13px; color:var(--ink); }
.sub-note-item .sni-text{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; line-height:1.65; }
.sub-note-item.locked{ opacity:.45; }

/* 封蝋トグルスイッチ */
.seal-toggle{
  width:38px; height:38px; border-radius:50%; flex:none;
  border:2px solid var(--line-strong);
  background:var(--surface);
  position:relative; cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.seal-toggle::before{
  content:''; position:absolute; inset:6px; border-radius:50%;
  border:1px dashed var(--line-strong);
}
.seal-toggle svg{
  position:absolute; inset:0; margin:auto; width:17px; height:17px;
  opacity:0; transition:opacity .15s ease;
}
.seal-toggle:active{ transform:scale(.9); }
.seal-toggle.checked{
  background: var(--seal-color, var(--brand));
  border-color: transparent;
}
.seal-toggle.checked::before{ border-color:rgba(255,255,255,.5); }
.seal-toggle.checked svg{ opacity:1; }

/* ---------- カウンター／ステッパー（共通） ---------- */
.counter-row{
  padding:13px 4px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
}
.counter-row .cr-main{ flex:1; min-width:0; }
.counter-row .cr-label{ font-size:13.5px; color:var(--ink); line-height:1.6; font-weight:700; }
.counter-row .cr-note{ font-size:11.5px; color:var(--ink-soft); margin-top:4px; line-height:1.6; }
.counter-row.maxed .cr-label,
.counter-row.maxed .cr-note{ color:var(--ink-faint); }

.stepper{ display:flex; align-items:center; gap:8px; flex:none; }
.stepper button{
  width:32px; height:32px; border-radius:9px; border:1.5px solid var(--line-strong);
  background:var(--surface); color:var(--ink); font-size:17px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.stepper button:active{ background:var(--brand-soft); border-color:var(--brand); }
.stepper button:disabled{
  opacity:.4; cursor:not-allowed; color:var(--ink-faint);
  background:var(--bg); border-color:var(--line);
}
.stepper button:disabled:active{ background:var(--bg); border-color:var(--line); }
.stepper .cval{
  width:26px; text-align:center; font-family:var(--font-mono); font-weight:700;
  font-size:15px; color:var(--ink);
}

/* 幅が狭い画面（サイト埋め込み時の実効幅が特に狭くなるケースを含む）では、
   テキストとステッパーの横並びだと文章側が数文字幅まで潰れて読めなくなるため、
   テキスト側を常に1行分フルに使わせ、ステッパーをその下へ回り込ませる。 */
@media (max-width:480px){
  .counter-row{ flex-wrap:wrap; }
  .counter-row .cr-main{ flex-basis:100%; }
  .counter-row .stepper{ margin-left:auto; margin-top:4px; }

  .action-chip{ flex-wrap:wrap; }
  .action-chip .ac-main{ flex-basis:100%; }
  .action-chip .stepper{ margin-left:auto; margin-top:4px; }
}

/* ---------- アクション予算 ---------- */
.budget-box{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px;
  margin:14px 0 20px; box-shadow:var(--shadow-sm);
}
.budget-box .bx-title{ font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--ink); }
.budget-box .bx-note{ font-size:11.5px; color:var(--ink-soft); margin-top:4px; line-height:1.6; }
.budget-meter{
  margin:12px 0; height:8px; border-radius:99px; background:var(--bg); overflow:hidden;
  border:1px solid var(--line);
}
.budget-meter .fill{ height:100%; background:var(--faction-color, var(--brand)); transition:width .2s ease; }
.budget-count{ font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); margin-bottom:2px; }

.action-chip{
  display:flex; align-items:center; gap:10px; padding:11px 2px;
  border-top:1px solid var(--line);
}
.action-chip:first-of-type{ border-top:none; }
.action-chip .ac-main{ flex:1; min-width:0; }
.action-chip .ac-label{ font-size:13.5px; font-weight:700; color:var(--ink); }
.action-chip .ac-note{ font-size:11.5px; color:var(--ink-soft); margin-top:3px; line-height:1.6; }
.action-chip.maxed .ac-label,
.action-chip.maxed .ac-note{ color:var(--ink-faint); }

.info-note{
  font-size:12.5px; color:var(--ink-soft); line-height:1.8;
  padding:12px 4px; border-bottom:1px solid var(--line);
}

/* ---------- 手番終了ボタン ---------- */
.endturn-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; justify-content:center;
  padding:14px 16px calc(14px + var(--safe-bottom));
  background:linear-gradient(0deg, var(--bg) 60%, rgba(244,241,233,0));
  pointer-events:none;
}
.endturn-bar .inner{ max-width:560px; width:100%; pointer-events:auto; }
.endturn-btn{
  width:100%; padding:16px; border-radius:16px; border:none;
  background:var(--faction-color, var(--brand)); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:16px;
  box-shadow:var(--shadow); cursor:pointer;
}
.endturn-btn:active{ transform:scale(.98); }

/* ---------- モーダル ---------- */
.modal-overlay{
  position:absolute; top:0; left:0; right:0;
  /* heightはJS側(positionModalNear)で実測pxを直接指定する */
  background:rgba(31,46,41,.45); z-index:50;
  display:flex; align-items:flex-end; justify-content:center;
  backdrop-filter: blur(2px);
}
.modal-card{
  width:100%; max-width:560px; background:var(--surface);
  border-radius:22px 22px 0 0; padding:22px 20px calc(22px + var(--safe-bottom));
  color:var(--ink);
}
/* ボタン近くに表示するアンカー付きモーダル（鷲巣王朝の失敗確認・手番終了確認など） */
.modal-overlay--anchored{
  display:block;
}
.modal-overlay--anchored .modal-card{
  position:absolute;
  left:12px; right:12px;
  max-width:360px;
  margin:0 auto;
  border-radius:18px;
  box-shadow:var(--shadow);
}
.modal-card h3{ font-size:17px; margin-bottom:10px; }
.modal-card .missing-list{ font-size:13px; color:var(--ink-soft); margin:10px 0 18px; line-height:1.8; padding-left:18px; }
.modal-card .missing-list li{ margin-bottom:4px; }
.modal-actions{ display:flex; gap:10px; }
.modal-actions button{
  flex:1; padding:14px; border-radius:14px; border:none; cursor:pointer;
  font-weight:700; font-size:14px;
}
.btn-secondary{ background:var(--bg); color:var(--ink); border:1px solid var(--line-strong) !important; }
.btn-danger{ background:var(--req); color:#fff; }

/* ---------- スクロールバー等 ---------- */
::selection{ background:rgba(74,158,142,.25); }

@media (min-width:560px){
  .app-shell{ box-shadow: 0 0 60px rgba(74,158,142,.12); }
}

/* ---------- rootdake.comへのiframe埋め込み時：サイト側の背景をそのまま透かす ---------- */
html.is-embedded body{ background:transparent; }
html.is-embedded .app-shell{ background:transparent; box-shadow:none; min-height:0; }

/* ---------- 埋め込み時：ツール自体の二重スクロールを解消 ----------
   html,body に height:100% が付いていると、埋め込み先(iframe)の高さより
   中身が増えた時にbody自体のボックスサイズは変わらず、中身だけが
   はみ出して「ツール内部の縦スクロール」が発生してしまう
   （＋その状態は外側のResizeObserverからも検知できず、iframeの高さが
   追従しない）。埋め込み時は高さの固定をやめ、中身の分だけ自然に
   縦へ伸びるようにする（＝スクロールはページ全体側だけに一本化）。 */
html.is-embedded, html.is-embedded body{ height:auto; min-height:0; }

/* 埋め込み時は「手番を終了する」ボタンを画面下固定(position:fixed)にしない。
   固定のままだと、ツールの高さがページに合わせて伸びた分だけボタンが
   下の方に取り残され、かつfixedがiframe内部の表示範囲を基準にしてしまうため
   結果的に内部スクロールを誘発する一因になる。埋め込み時は通常の
   コンテンツとして最後に表示する。 */
html.is-embedded .endturn-bar{
  position:static;
  background:none;
  padding:20px 0 4px;
}
html.is-embedded .content{ padding-bottom:14px; }

/* ---------- ロック中の項目（樹林・初回手番など） ---------- */
.step-note.lock-note{ color:var(--req); font-weight:700; }
.seal-toggle.locked{ opacity:.35; cursor:default; }
.seal-toggle.locked:active{ transform:none; }

/* 君主のアビリティ（現在有効なもの）を示す赤字注記 */
.step-note.rule-annotation{
  color:var(--req); font-weight:700; margin-top:6px;
  padding:8px 10px; background:var(--req-soft); border-radius:8px; line-height:1.7;
}

/* ---------- 鷲巣王朝：君主バー ---------- */
.leader-bar{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:14px; margin:4px 0 20px; box-shadow:var(--shadow-sm);
}
.leader-bar .lb-title{
  font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink);
  margin-bottom:10px;
}
.leader-buttons{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.leader-btn{
  padding:9px 2px; border-radius:10px; border:1.5px solid var(--line-strong);
  background:var(--bg); color:var(--ink-soft); font-size:12px; font-weight:700; cursor:pointer;
}
.leader-btn.current{ background:var(--faction-color, var(--brand)); border-color:transparent; color:#fff; }
.leader-info{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-soft); line-height:1.8;
}
.leader-info.empty{ font-style:normal; }
.leader-info .li-cols{ margin-bottom:4px; color:var(--ink); }
.leader-info .li-ability{ color:var(--ink-soft); }

/* ---------- 鷲巣王朝：勅令エリア ---------- */
.eyrie-decree-box{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:6px 14px; margin:14px 0 20px; box-shadow:var(--shadow-sm);
}
.eyrie-decree-box .bx-title{
  font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--ink);
  padding-top:12px;
}
.eyrie-decree-box .bx-note{ font-size:11.5px; color:var(--ink-soft); margin:4px 0 4px; line-height:1.6; }
.x-toggle{
  width:34px; height:34px; border-radius:50%; flex:none;
  border:2px solid var(--line-strong); background:var(--surface);
  position:relative; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.x-toggle svg{ width:15px; height:15px; opacity:0; transition:opacity .15s ease; }
.x-toggle.checked{ background:var(--req); border-color:transparent; }
.x-toggle.checked svg{ opacity:1; }
.x-toggle.locked{ opacity:.35; cursor:default; }

/* 勅令の実行：成功／失敗チェックのみ */
.decree-exec-row{ padding:13px 4px; border-bottom:1px solid var(--line); display:flex; gap:12px; align-items:flex-start; }
.decree-exec-row.done{ opacity:.4; }
.decree-exec-row.gated{ opacity:.45; }
.decree-exec-row.failed-row{
  background:var(--req-soft); border-radius:10px;
  margin:0 -6px; padding:13px 10px; border-bottom-color:transparent;
}
.decree-exec-row .der-head{ flex:1; min-width:0; }
.decree-exec-row .der-head .step-text{ font-size:14px; color:var(--ink); }
.decree-exec-row .der-toggles{ display:flex; gap:14px; flex:none; }
.decree-exec-row .toggle-col{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.decree-exec-row .tc-label{ font-size:10.5px; font-weight:700; color:var(--ink-soft); }

/* ---------- 放浪部族：樹林トグル ---------- */
.forest-toggle-box{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; margin:10px 0 16px; box-shadow:var(--shadow-sm);
}
.forest-switch{ display:flex; align-items:center; justify-content:space-between; }
.forest-switch .fs-label{ font-size:13px; font-weight:700; color:var(--ink); }
.pill-switch-2{ display:flex; background:var(--bg); border-radius:99px; padding:3px; border:1px solid var(--line); }
.pill-switch-2 button{
  width:36px; height:32px; border:none; background:transparent; color:var(--ink-soft);
  font-size:15px; font-weight:700; border-radius:99px; cursor:pointer;
}
.pill-switch-2 button.active{ background:var(--faction-color, var(--brand)); color:#fff; }
.pill-switch-2.wide button{ width:auto; padding:0 16px; font-size:12.5px; }

/* ---------- 固有能力バー（セットアップ・手番タブ共通） ---------- */
.abilities-bar{ padding:0 16px 10px; margin-top:8px; }
.abilities-bar .ab-caption{ font-size:11px; color:var(--ink-faint); letter-spacing:.08em; margin-bottom:6px; }
.ability-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.ability-pill{
  padding:7px 12px; border-radius:99px; border:1.5px solid var(--line-strong);
  background:var(--surface); color:var(--ink-soft); font-size:12px; font-weight:700; cursor:pointer;
}
.ability-pill.expanded{ background:var(--faction-color, var(--brand)); border-color:transparent; color:#fff; }
.ability-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:11px 13px; margin-top:8px; box-shadow:var(--shadow-sm);
}
.ability-panel .ap-name{ font-weight:700; font-size:13px; color:var(--ink); margin-bottom:4px; }
.ability-panel .ap-text{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; }

/* ---------- サイト共通フッター（サイト本体のroot-style.cssと同じデザイン） ---------- */
#site-footer.tool-footer{
  background: var(--brand-deep);
  padding: 28px 20px calc(28px + var(--safe-bottom));
  margin-top: 32px;
  /* .app-shell(max-width:560px)の中に置かれても、帯自体は画面幅いっぱいに広げる */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
#site-footer.tool-footer .footer__inner{
  max-width: 560px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
#site-footer.tool-footer .footer__logo{
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: #fff; letter-spacing: -0.02em;
}
#site-footer.tool-footer .footer__logo span{
  display: block; font-family: var(--font-body); font-weight: 300; font-size: 10px;
  letter-spacing: 0.1em; color: rgba(255,255,255,.45); margin-top: 3px;
}
#site-footer.tool-footer .footer__copy{
  font-size: 10.5px; letter-spacing: 0.04em; color: rgba(255,255,255,.4);
}