/* ============================================================
   MUMEI WAR — 見た目 v3「卓上カードゲーム風」（B案）
   木の机にフェルトの盤を敷き、紙のカードを並べて遊んでいる見た目。
   サイト共通のダーク×ドット絵トーンからは独立したビジュアル（森重さん指示）。

   カードスリーブ機能:
   - 裏向きカードの絵柄は CSS 変数 --sleeve-img で差し替えられる
     （game.js がユーザーの画像を縮小して localStorage に保存し、
      body に .has-sleeve を付けて var を設定する）
   - 未設定時は「えんじ色の斜め織り模様＋『無銘』」の既定スリーブ
   ============================================================ */

:root {
  /* 机・盤・紙 */
  --wood-1: #6b4a2e;
  --wood-2: #7d5636;
  --wood-3: #5e402a;
  --wood-edge: #4a3320;
  --felt-1: #2e5d3a;
  --felt-2: #234a2e;
  --felt-3: #1b3a24;
  --paper-1: #fdfaf2;
  --paper-2: #efe6d2;
  --paper-edge: #b8a878;
  --ink: #2b2620;
  --cream: #f3e2b8;
  --cream-dim: #c9b593;
  --gold: #e8b93c;
  --p1: #e8b93c; /* プレイヤー1の縁 = 金 */
  --p2: #b85c7e; /* プレイヤー2の縁 = 紅 */
  --green: #7bc86c;
  --red: #c04545;
  --sleeve-1: #7e2f36; /* 既定スリーブ（えんじ） */
  --sleeve-2: #5a1f26;

  /* カード種別の地色（森重さんのデザイン案: ユニット=緑系 / サポーター=グレー） */
  --unit-1: #dbe9a8;
  --unit-2: #b9d477;
  --unit-edge: #7f9c3a;
  --sup-1: #dcdcd6;
  --sup-2: #b9b9b2;
  --sup-edge: #8a8a83;

  /* カードごとの紋章色（上=明・下=暗のグラデ） */
  --c-std01a: #e8952f; --c-std01b: #b86a1a;
  --c-std02a: #a8cf3e; --c-std02b: #7a9c22;
  --c-std03a: #5b8dd9; --c-std03b: #37639f;
  --c-std04a: #b09272; --c-std04b: #83664a;
  --c-std05a: #4f9e4f; --c-std05b: #2e6e2e;
  --c-std06a: #e8d23c; --c-std06b: #b09f1a;
  --c-std07a: #c9b26a; --c-std07b: #93794a;
  --c-std08a: #9a6fd0; --c-std08b: #6b429c;
  --c-std09a: #c9a6e0; --c-std09b: #9a6fb0;
}

* {
  box-sizing: border-box;
}

/* display:flex が hidden 属性に勝ってしまうので、hidden は最優先で消す */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  color: var(--cream);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  -webkit-tap-highlight-color: transparent;
  /* 木の机: 板の継ぎ目＋木目のすじ */
  background: var(--wood-1);
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, var(--wood-1), var(--wood-2) 40%, var(--wood-3));
  background-attachment: fixed;
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 12px 40px;
}

/* ── 見出し ── */
.head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.head h1 {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: clamp(19px, 5.5vw, 25px);
  margin: 0;
  color: var(--cream);
  letter-spacing: 3px;
  white-space: nowrap;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
}
.head-sub {
  font-size: 11px;
  color: var(--cream-dim);
}
.modes {
  margin-left: auto;
  display: flex;
  gap: 6px;
  /* ★ボタンが増えて幅に収まらなくなったら、ボタンとボタンの間で折り返す。
     折り返さないと1つのボタンの中で文字が割れて「CPU対／戦」のように読めなくなる。 */
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mode-btn,
.sleeve-btn {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #93765a;
  background: rgba(0, 0, 0, 0.35);
  color: var(--cream-dim);
  cursor: pointer;
  /* ★ボタンの中で文字が折り返すと「CPU対／戦」のように読めなくなる。
     切り替えボタンが増えたぶん、幅の狭い画面では下の @media で詰める。 */
  white-space: nowrap;
}
/* 幅の狭い端末（スマホ）ではボタンを詰めて、1行に収める */
@media (max-width: 480px) {
  .modes {
    gap: 4px;
  }
  .mode-btn,
  .sleeve-btn,
  .settings-btn {
    padding: 5px 7px;
    font-size: 11px;
  }
}
/* 設定ボタン（CPUの強さ・手札のまとめ表示・スリーブをまとめて開く） */
.settings-btn {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #93765a;
  background: rgba(0, 0, 0, 0.35);
  color: var(--cream-dim);
  cursor: pointer;
  white-space: nowrap;
}

/* ── 設定画面の中身 ── */
.settings-list {
  /* .dialog-body は flex なので、幅いっぱいの1項目として置く */
  width: 100%;
  text-align: left;
}
.settings-row + .settings-row {
  margin-top: 14px;
  border-top: 1px solid rgba(147, 118, 90, 0.4);
  padding-top: 12px;
}
.settings-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink, #2b2118);
}
.settings-note {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 2px;
  line-height: 1.5;
}
.settings-ctl {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.settings-ctl .sleeve-preview {
  margin: 0;
  width: 60px;
  height: 84px;
}
/* 選択肢ボタン（いま選ばれているものに .on が付く） */
.choice-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #93765a;
  background: rgba(0, 0, 0, 0.06);
  color: #6b5a45;
  cursor: pointer;
  white-space: nowrap;
}
.choice-btn.on {
  background: var(--felt-1);
  border-color: #4f9e4f;
  color: var(--cream);
}
/* 強さは色でも分かるように（選ばれているときだけ） */
.choice-btn.on[data-level='easy'] {
  background: #2f6b7d;
  border-color: #4f8ea0;
}
.choice-btn.on[data-level='hard'] {
  background: #8a3030;
  border-color: #b05050;
}
/* げきつよ（モンテカルロ木探索）。ほかと考え方が違うので色も分ける */
.choice-btn.on[data-level='mcts'] {
  background: #4a2a6a;
  border-color: #7a52a0;
}

.mode-btn.on {
  background: var(--felt-1);
  border-color: #4f9e4f;
  color: var(--cream);
}

/* ── オンライン対戦の帯（あいことば・接続の様子） ── */
.online-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid #93765a;
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--cream-dim);
}
.online-bar .ob-word b {
  font-family: 'Shippori Mincho', serif;
  font-size: 15px;
  color: var(--cream);
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.ob-copy {
  font: inherit;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #93765a;
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream-dim);
  cursor: pointer;
}
.ob-copy:active {
  background: rgba(255, 255, 255, 0.16);
}
.ob-state {
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
}
.ob-state::before {
  content: '●';
  margin-right: 5px;
  font-size: 10px;
  vertical-align: 1px;
}
.ob-state.ok {
  color: var(--green);
}
.ob-state.wait {
  color: var(--gold);
}
.ob-state.ng {
  color: #ff9a9a;
}

/* ── 相手情報・状態表示 ── */
.opp-info {
  font-size: 13px;
  color: var(--cream-dim);
  padding: 4px 2px;
}
.status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #93765a;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
}
.status-turn {
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
}
.status-turn.p1 {
  color: var(--cream);
}
.status-turn.p2 {
  color: #e8a8c0;
}
.status-ap {
  letter-spacing: 3px;
  color: #9fd08a;
  font-size: 16px;
}
.status-deck {
  margin-left: auto;
  color: var(--cream-dim);
  font-size: 13px;
}

/* ── 案内 ── */
.guide {
  min-height: 20px;
  font-size: 13px;
  color: var(--cream);
  padding: 6px 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ── 盤面（フェルトのプレイマット） ── */
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: radial-gradient(ellipse at 50% 30%, var(--felt-1), var(--felt-2) 70%, var(--felt-3));
  border: 6px solid var(--wood-edge);
  border-radius: 14px;
  padding: 8px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.5);
}
.cell {
  position: relative;
  aspect-ratio: 3 / 3.4;
  border: 1.5px solid rgba(243, 226, 184, 0.35);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
/* 勝利ライン（敵陣後衛）は金の刺繍風 / 自陣後衛はほんのり紅 */
.cell.goal-row {
  border: 2px solid var(--gold);
  background: rgba(232, 185, 60, 0.10);
}
.cell.home-row {
  background: rgba(184, 92, 126, 0.08);
}
/* 行動できる先のハイライト（フェルトに光が落ちる感じ） */
.cell.can-move {
  border: 2.5px solid var(--green);
  box-shadow: 0 0 10px rgba(123, 200, 108, 0.5) inset;
  cursor: pointer;
}
.cell.can-attack {
  border: 2.5px solid var(--red);
  box-shadow: 0 0 10px rgba(192, 69, 69, 0.55) inset;
  cursor: pointer;
}
.cell.can-place {
  border: 2.5px solid var(--gold);
  box-shadow: 0 0 10px rgba(232, 185, 60, 0.5) inset;
  cursor: pointer;
}
.cell.can-target {
  border: 2.5px solid #e8a8c0;
  box-shadow: 0 0 10px rgba(232, 168, 192, 0.5) inset;
  cursor: pointer;
}

/* ── カード（紙） ── */
.card {
  /* 向きは3つの変数で決める（重ねがけしても壊れないように1か所で合成する）:
     --rot  … カードの置き方（活動=0 / 待機・伏せ=-90 / 相手のカードは +180）
     --tilt … 紙らしい微妙な傾き
     --ty   … 選択時の浮き上がり */
  --rot: 0deg;
  --tilt: 0deg;
  --scale: 1;
  --ty: 0px;
  width: 86%;
  height: 90%;
  border-radius: 7px;
  background: linear-gradient(160deg, var(--paper-1), var(--paper-2));
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* 外周に矢印を置くための余白。
     ※ % 指定は「親要素の幅」基準になり小さいカードで破綻するので px で持つ */
  --pad: 12px;
  --arrow: 11px;
  padding: var(--pad) var(--pad) calc(var(--pad) * 0.42);
  transform: translateY(var(--ty)) rotate(calc(var(--rot) + var(--tilt))) scale(var(--scale));
  transition: transform 0.18s ease;
  position: relative;
  border: 1px solid var(--paper-edge);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
/* 紙らしく、盤上のカードはわずかに傾く（マスの偶奇で向きを変える） */
.cell:nth-child(odd) .card:not(.standby):not(.down) {
  --tilt: 0.8deg;
}
.cell:nth-child(even) .card:not(.standby):not(.down) {
  --tilt: -0.6deg;
}
/* 相手のカードは、卓を挟んで向かい合っているので こちらから見ると上下逆さま */
.card.opp-side {
  --rot: 180deg;
}
.card.selected {
  outline: 3px solid var(--gold);
  box-shadow: 0 0 12px rgba(232, 185, 60, 0.7), 0 3px 6px rgba(0, 0, 0, 0.55);
}
/* 待機状態: 横向き（左向きで統一・仕様 §3） */
.card.standby {
  --rot: -90deg;
  --scale: 0.92;
}
/* 相手の待機・伏せは、180度ぶん回った先の横向き */
.card.opp-side.standby,
.card.opp-side.down {
  --rot: 90deg;
}
/* 伏せ: 裏向き・横向き。既定スリーブ=えんじの斜め織り */
.card.down {
  --rot: -90deg;
  --scale: 0.92;
  /* えんじの地＋斜め織りの2層（1つの background にまとめないと地の色が消える） */
  background: repeating-linear-gradient(45deg, rgba(243, 226, 184, 0.12) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, var(--sleeve-1), var(--sleeve-2));
  border-color: #3d1418;
}
/* カスタムスリーブ（game.js が body.has-sleeve と --sleeve-img を設定する） */
body.has-sleeve .card.down,
body.has-sleeve .hand .card.hidden-card {
  background: var(--sleeve-img) center / cover no-repeat, linear-gradient(160deg, var(--sleeve-1), var(--sleeve-2));
  border-color: rgba(0, 0, 0, 0.55);
}
body.has-sleeve .card-back-mark .mw {
  display: none;
}
.card.down .card-name,
.card.down .card-art,
.card.down .card-foot {
  visibility: hidden;
}
/* 対局終了後にめくられた伏せカードの目印 */
.card .down-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: 8px;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 3px;
  background: var(--sleeve-1);
  color: var(--cream);
  z-index: 2;
}

.card-back-mark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Shippori Mincho', serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--cream);
}
/* 自分の伏せカードにだけ出す中身メモ（相手には見えない）。
   カスタムスリーブの上でも読めるように札形の下地を敷く */
.card-back-mark .mine {
  margin-top: 2px;
  font-size: 10px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
}

/* ── カード面の並び（森重さんのデザイン案）: 名前 → 絵 → 下段 ── */
.card-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  flex: 0 0 auto;
  overflow: hidden;
}
/* 絵の枠（イラストが横長なので、その比率で場所を取る） */
.card-art {
  width: 100%;
  aspect-ratio: 255 / 140;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 2% 0;
}
.card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 下段: ユニット=左に剣ATK/盾DEF・右に説明 ／ サポーター=説明のみ */
.card-foot {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
}
.card-note {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  font-size: 6px;
  line-height: 1.1;
  padding: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  word-break: break-all;
}
/* 紋章: 印章風の角丸四角＋内側の白いフチ（正式イラストが来るまでの仮の絵） */
.card-sym {
  width: 62%;
  aspect-ratio: 1;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: clamp(16px, 6vw, 26px);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}
/* 攻撃力・防御力は縦に積む（スケッチどおり） */
.card-stats {
  font-size: 7px;
  line-height: 1.15;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  padding: 1px 2px;
  white-space: nowrap;
}
.card-stats .atk,
.card-stats .def {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.card-stats .atk {
  color: #a33333;
}
.card-stats .def {
  color: #23538f;
}
/* 剣＝攻撃力 / 盾＝防御力 のアイコン */
.card-stats svg,
.cd-stats svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}
.cd-stats svg {
  margin-right: 3px;
}
.card-stats .boosted {
  text-decoration: underline;
}

/* ── カード種別の地色（ユニット=緑系 / サポーター=グレー） ── */
.card.kind-unit {
  background: linear-gradient(160deg, var(--unit-1), var(--unit-2));
  border-color: var(--unit-edge);
}
.card.kind-supporter {
  background: linear-gradient(160deg, var(--sup-1), var(--sup-2));
  border-color: var(--sup-edge);
}
/* 名前は白地の帯に載せる（スケッチの構成） */
.card .card-name {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  padding: 0 3px;
}
/* 伏せ・スリーブは種別色より優先 */
.card.down.kind-unit,
.card.down.kind-supporter,
.hand .card.hidden-card.kind-unit,
.hand .card.hidden-card.kind-supporter {
  background: repeating-linear-gradient(45deg, rgba(243, 226, 184, 0.12) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, var(--sleeve-1), var(--sleeve-2));
  border-color: #3d1418;
}
body.has-sleeve .card.down.kind-unit,
body.has-sleeve .card.down.kind-supporter,
body.has-sleeve .hand .card.hidden-card.kind-unit,
body.has-sleeve .hand .card.hidden-card.kind-supporter {
  background: var(--sleeve-img) center / cover no-repeat, linear-gradient(160deg, var(--sleeve-1), var(--sleeve-2));
  border-color: rgba(0, 0, 0, 0.55);
}

/* ── 進める方向／攻撃できる方向の矢印 ──
   カードの外周に作った余白（.card の padding）の中に置くので、
   カード名・絵・数字とは重ならない。形は1つの矢印を回して使い回す。 */
.dir-arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.dir-arrows .ar {
  position: absolute;
  width: var(--arrow);
  color: #4a6b18;
  line-height: 0;
}
.dir-arrows .ar svg {
  width: 100%;
  height: auto;
  display: block;
}
/* 位置は margin で中央合わせする（transform は矢印の回転に使うため空けておく）。
   左右・斜めは回すと縦横が入れ替わるので、はみ出さない位置に置く。 */
.ar-up    { top: 0;      left: 50%;  margin-left: calc(var(--arrow) / -2); }
.ar-down  { bottom: 0;   left: 50%;  margin-left: calc(var(--arrow) / -2); transform: rotate(180deg); }
.ar-left  { left: calc(var(--arrow) / -4);  top: 50%; margin-top: calc(var(--arrow) / -2); transform: rotate(-90deg); }
.ar-right { right: calc(var(--arrow) / -4); top: 50%; margin-top: calc(var(--arrow) / -2); transform: rotate(90deg); }
/* 斜めは45度回すと外接の箱が大きくなるぶん、ひと回り小さくして角に寄せる */
.ar-ul, .ar-ur, .ar-dl, .ar-dr {
  width: calc(var(--arrow) * 0.75);
}
.ar-ul    { top: 2px;    left: 2px;  transform: rotate(-45deg); }
.ar-ur    { top: 2px;    right: 2px; transform: rotate(45deg); }
.ar-dl    { bottom: 2px; left: 2px;  transform: rotate(-135deg); }
.ar-dr    { bottom: 2px; right: 2px; transform: rotate(135deg); }
/* 矢印はカードに「印刷されているもの」として扱う＝カードと一緒に回る。
   （以前は待機・伏せのときに矢印だけ回していたが、カードの外にはみ出して見えるのでやめた） */

/* 所有者の縁取り: P1=金 / P2=紅 */
.card.owner-A {
  box-shadow: 0 0 0 2px var(--p1), 0 3px 6px rgba(0, 0, 0, 0.55);
}
.card.owner-B {
  box-shadow: 0 0 0 2px var(--p2), 0 3px 6px rgba(0, 0, 0, 0.55);
}

/* 付与カードのチップ（カードの下端からのぞく札） */
.att-chips {
  position: absolute;
  bottom: -9px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  z-index: 2;
}
.att-chip {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 9px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--cream);
  color: var(--wood-1);
  border: 1px solid var(--paper-edge);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
.chip-std06 {
  background: linear-gradient(160deg, var(--c-std06a), #d8c25a);
  color: var(--ink);
}
.chip-std09 {
  background: linear-gradient(160deg, var(--c-std09a), #b890d0);
  color: #fff;
}

/* 紋章の色（原作イラストの配色を参考にした仮の絵） */
.sym-std01 { background: linear-gradient(160deg, var(--c-std01a), var(--c-std01b)); }
.sym-std02 { background: linear-gradient(160deg, var(--c-std02a), var(--c-std02b)); }
.sym-std03 { background: linear-gradient(160deg, var(--c-std03a), var(--c-std03b)); }
.sym-std04 { background: linear-gradient(160deg, var(--c-std04a), var(--c-std04b)); }
.sym-std05 { background: linear-gradient(160deg, var(--c-std05a), var(--c-std05b)); }
.sym-std06 { background: linear-gradient(160deg, var(--c-std06a), var(--c-std06b)); }
.sym-std07 { background: linear-gradient(160deg, var(--c-std07a), var(--c-std07b)); }
.sym-std08 { background: linear-gradient(160deg, var(--c-std08a), var(--c-std08b)); }
.sym-std09 { background: linear-gradient(160deg, var(--c-std09a), var(--c-std09b)); }

/* ── 操作ボタン ── */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 4px;
  min-height: 46px;
}
.actions button {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 14px;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(180deg, #8a6a4a, var(--wood-1));
  color: var(--cream);
  border: 1px solid #93765a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.actions button.primary {
  background: linear-gradient(180deg, var(--cream), #d8c08a);
  color: var(--wood-edge);
  border-color: #93765a;
}
.actions button.warn {
  background: linear-gradient(180deg, #a8434f, #7e2f36);
  color: #fff;
  border-color: #5a1f26;
}
.actions button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── 手札（手元の暗がり） ── */
.hand-area {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid #93765a;
  border-radius: 12px;
  padding: 8px;
}
.hand-label {
  font-size: 12px;
  color: var(--cream-dim);
  margin-bottom: 6px;
}
.hand {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 4px 8px;
  min-height: 112px;
}
.hand .card {
  flex: 0 0 76px;
  width: 76px;
  height: 104px;
  --pad: 12px;
  --arrow: 10px;
}
/* 手札は少しだけ扇っぽく */
.hand .card:nth-child(odd) {
  --tilt: -1.1deg;
}
.hand .card:nth-child(even) {
  --tilt: 0.9deg;
}
.hand .card.selected {
  --ty: -4px;
  --tilt: 0deg;
}
.card.unusable {
  opacity: 0.45;
}
/* 相手の番のとき手札は伏せる（既定スリーブ or カスタムスリーブ） */
.hand .card.hidden-card {
  background: repeating-linear-gradient(45deg, rgba(243, 226, 184, 0.12) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, var(--sleeve-1), var(--sleeve-2));
  border-color: #3d1418;
}
.hand .card.hidden-card .card-name,
.hand .card.hidden-card .card-art,
.hand .card.hidden-card .card-foot {
  visibility: hidden;
}

/* ── ログ ── */
.log-area {
  margin-top: 12px;
}
.log-toggle {
  background: none;
  border: none;
  color: var(--cream-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
}
.log {
  list-style: none;
  margin: 6px 0 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #93765a;
  border-radius: 10px;
  font-size: 12px;
  color: var(--cream-dim);
  max-height: 200px;
  overflow-y: auto;
}
.log li {
  padding: 2px 0;
  border-bottom: 1px dotted rgba(147, 118, 90, 0.5);
}

/* ── フッター ── */
.foot {
  margin-top: 18px;
  font-size: 12px;
  color: var(--cream-dim);
  line-height: 1.8;
}
.foot a {
  color: var(--cream);
}
.foot-dim {
  color: #a08a6e;
}
.foot code {
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 4px;
  border-radius: 4px;
}

/* ── 全画面の覆い（受け渡し・ダイアログ・決着）── */
.handoff,
.dialog,
.result {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 6, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.handoff-card,
.dialog-card,
.result-card {
  background: linear-gradient(160deg, var(--paper-1), var(--paper-2));
  color: var(--ink);
  border: 1px solid var(--paper-edge);
  border-radius: 14px;
  padding: 24px 20px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  /* 設定画面のように中身が増えても、画面からはみ出さずにスクロールできるように */
  max-height: 86vh;
  overflow-y: auto;
}
.handoff-to {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 8px;
}
.handoff-to.p1 { color: #8a6a1a; }
.handoff-to.p2 { color: #8a3a5a; }
.handoff-note {
  font-size: 13px;
  color: #6e6152;
  margin: 0 0 18px;
}
.handoff button,
.result button,
.dialog-buttons button {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid #93765a;
  cursor: pointer;
  background: linear-gradient(180deg, var(--cream), #d8c08a);
  color: var(--wood-edge);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.result button + button,
.dialog-buttons button + button {
  margin-left: 8px;
}
.result-card button#result-close,
.dialog-buttons button.sub {
  background: linear-gradient(180deg, #8a6a4a, var(--wood-1));
  color: var(--cream);
}

.dialog-text {
  font-size: 14px;
  margin: 0 0 12px;
  line-height: 1.7;
  /* 「（2 / 3 枚）」のような残り枚数を改行して出すため（textContent の \n を活かす） */
  white-space: pre-line;
}
.dialog-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}
.dialog-body .card {
  flex: 0 0 72px;
  width: 72px;
  height: 98px;
  --pad: 11px;
  --arrow: 9px;
}
.dialog-body .card.picked {
  outline: 3px solid var(--p2);
}
.dialog-body .card .order-mark {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--p2);
  color: #fff;
  font-size: 11px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* スリーブ設定ダイアログ */
.sleeve-preview {
  width: 92px;
  height: 128px;
  border-radius: 8px;
  margin: 0 auto 10px;
  border: 1px solid var(--paper-edge);
  background: repeating-linear-gradient(45deg, rgba(243, 226, 184, 0.12) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, var(--sleeve-1), var(--sleeve-2));
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-family: 'Shippori Mincho', serif;
  overflow: hidden;
}
.sleeve-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── オンライン対戦の入り口 ── */
.lobby {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 6, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 55;
  padding: 20px;
}
.lobby-card {
  background: linear-gradient(160deg, var(--paper-1), var(--paper-2));
  color: var(--ink);
  border: 1px solid var(--paper-edge);
  border-radius: 16px;
  padding: 24px 20px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.lobby-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 10px;
}
.lobby-lead {
  font-size: 13px;
  line-height: 1.8;
  color: #5f5343;
  margin: 0 0 16px;
}
.lobby-main {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid #93765a;
  background: linear-gradient(180deg, var(--cream), #d8c08a);
  color: var(--wood-edge);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.lobby-sub {
  margin-top: 12px;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid #93765a;
  background: linear-gradient(180deg, #8a6a4a, var(--wood-1));
  color: var(--cream);
  cursor: pointer;
}
.lobby-join {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--paper-edge);
  font-size: 13px;
}
.lobby-join-label {
  display: block;
  margin-bottom: 6px;
  color: #5f5343;
}
.lobby-join input,
.lobby-link input {
  font-size: 14px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--paper-edge);
  background: #fff;
  color: var(--ink);
  width: 60%;
  max-width: 220px;
}
.lobby-join button,
.lobby-link button {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  margin-left: 6px;
  border-radius: 8px;
  border: 1px solid #93765a;
  background: linear-gradient(180deg, var(--cream), #d8c08a);
  color: var(--wood-edge);
  cursor: pointer;
}
.lobby-link {
  margin: 12px 0;
}
.lobby-link input {
  width: 62%;
  font-size: 12px;
}
.lobby-status {
  font-size: 13px;
  color: #2e6e2e;
  font-weight: 700;
  margin: 10px 0 0;
}
.lobby-note {
  font-size: 12px;
  color: #a33333;
  margin: 12px 0 0;
  line-height: 1.7;
}
#lobby-word-show {
  color: #8a6a1a;
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

/* ── ドローの知らせ（画面中央）──
   操作の邪魔をしないよう pointer-events: none。少し浮き上がって消える */
.draw-toast {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  pointer-events: none;
}
.draw-toast-card {
  background: linear-gradient(160deg, rgba(253, 250, 242, 0.97), rgba(239, 230, 210, 0.97));
  color: var(--ink);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 14px 22px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  /* ふわっと出て、しばらく残ってから、ゆっくり消える。
     長さは game.js が DRAW_TOAST_MS と揃えて上書きする */
  animation: draw-fade 2.2s ease-in-out forwards;
}
@keyframes draw-fade {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  80% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-6px) scale(1); }
}
.dt-who {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 17px;
  margin: 0 0 4px;
}
.dt-who .dt-verb {
  color: #2e6e2e;
  margin-left: 6px;
}
.dt-card {
  display: flex;
  justify-content: center;
  margin: 6px 0;
  min-height: 0;
}
/* 中に入るカードは手札と同じ見た目のまま少し大きく */
.dt-card .card {
  flex: 0 0 84px;
  width: 84px;
  height: 114px;
  --pad: 13px;
  --arrow: 11px;
  --tilt: 0deg;
  cursor: default;
}
.dt-counts {
  font-size: 13px;
  color: #5f5343;
  margin: 2px 0 0;
  font-weight: 700;
}

/* ── カード詳細（長押しで表示） ── */
.card-detail {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 6, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 24px;
}
.card-detail-card {
  position: relative;
  background: linear-gradient(160deg, var(--paper-1), var(--paper-2));
  color: var(--ink);
  border: 1px solid var(--paper-edge);
  border-radius: 14px;
  padding: 18px 22px 10px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
/* 詳細カードも種別で地色を変える */
.card-detail-card.kind-unit {
  background: linear-gradient(160deg, var(--unit-1), var(--unit-2));
  border-color: var(--unit-edge);
}
.card-detail-card.kind-supporter {
  background: linear-gradient(160deg, var(--sup-1), var(--sup-2));
  border-color: var(--sup-edge);
}
.card-detail-card .cd-name,
.card-detail-card .cd-text {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  padding: 4px 8px;
}
/* 詳細では矢印を大きめの図形で出す（位置はピクセル指定） */
.card-detail-card .dir-arrows .ar {
  width: 22px;
  color: #4a6b18;
}
.card-detail-card .ar-up { top: 6px; left: 50%; margin-left: -11px; }
.card-detail-card .ar-down { bottom: 6px; left: 50%; margin-left: -11px; }
.card-detail-card .ar-left { left: 6px; top: 50%; margin-top: -11px; }
.card-detail-card .ar-right { right: 6px; top: 50%; margin-top: -11px; }
.card-detail-card .ar-ul { top: 8px; left: 8px; }
.card-detail-card .ar-ur { top: 8px; right: 8px; }
.cd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.cd-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 20px;
}
.cd-kind {
  font-size: 11px;
  color: #6e6152;
}
/* 詳細カードの絵（イラストがある場合は横長で大きく見せる） */
.cd-sym.cd-sym-art {
  width: 84%;
  height: auto;
  aspect-ratio: 255 / 140;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: none;
  overflow: hidden;
  padding: 0;
}
.cd-sym.cd-sym-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cd-sym {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  margin: 12px auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 34px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.cd-stats {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  gap: 14px;
  min-height: 18px;
}
.cd-stats .atk { color: #a33333; }
.cd-stats .def { color: #23538f; }
.cd-text {
  font-size: 13px;
  line-height: 1.8;
  text-align: left;
  margin: 10px 0 6px;
}
.cd-count {
  font-size: 11px;
  color: #6e6152;
  margin: 0 0 6px;
}
.cd-close-note {
  font-size: 10px;
  color: #a08a6e;
  margin: 4px 0 0;
}

/* 長押し中に文字選択やメニューが出ないように */
.card,
.cell {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.result-text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: 24px;
  margin: 0 0 18px;
  line-height: 1.6;
}
.result-text .win-p1 { color: #8a6a1a; }
.result-text .win-p2 { color: #8a3a5a; }

/* 小さめの画面ではボタンを縦に */
@media (max-width: 380px) {
  .result button + button,
  .dialog-buttons button + button {
    margin-left: 0;
    margin-top: 8px;
  }
}


/* ── 手札のまとめ表示（同じカードを1枚にまとめて枚数を出す）── */
.count-badge {
  position: absolute;
  right: -4px;
  top: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  background: #2b2118;
  border: 1px solid var(--paper-edge);
  color: var(--cream);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 3;
  pointer-events: none;
}

/* ── PC（横に余裕がある画面）用の配置 ────────────────
   スマホでは .table / .col-board / .col-side は display:contents なので
   「無い」のと同じ＝これまでの縦一列のまま。
   横幅が足りる画面でだけ、盤面を左に、操作と手札を右に置いて、
   スクロールせずに全部が見えるようにする。 */
.table,
.col-board,
.col-side {
  display: contents;
}

@media (min-width: 900px) {
  .wrap {
    max-width: 1000px;
  }
  .table {
    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(300px, 1fr);
    gap: 0 20px;
    align-items: start;
  }
  .col-board,
  .col-side {
    display: block;
    min-width: 0;
  }
  .col-side {
    position: sticky;
    top: 12px;
  }
  /* 右の列は場所に余裕があるので、手札を大きく・折り返して全部見せる */
  .col-side .hand {
    flex-wrap: wrap;
    overflow-x: visible;
    min-height: 0;
  }
  .col-side .hand .card {
    flex: 0 0 88px;
    width: 88px;
    height: 120px;
  }
  .col-side .actions {
    margin-bottom: 10px;
  }
  .col-side .log {
    max-height: 220px;
  }
}


/* ── 観戦モード（CPU同士のバトルを眺める）── */
.speed-btn[data-speed='fast'] {
  border-color: #b05050;
}
.speed-btn[data-speed='slow'] {
  border-color: #4f8ea0;
}
.watch-tally {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #6b5a45;
}
.settings-row.watch-row .settings-title {
  font-size: 13px;
}

/* 「この対局を報告」（CPUが弱いと感じた局面を、そのまま作り手に渡せるようにする） */
.result-card button#result-report {
  background: linear-gradient(180deg, #8a6a4a, var(--wood-1));
  color: var(--cream);
  font-size: 13px;
  padding: 9px 14px;
}
.report-text {
  width: 100%;
  min-height: 160px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.5;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--paper-edge);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  resize: vertical;
}


/* ═══════════════════════════════════════════════════════════════
   タイトル画面 ＋ ルールパネル（便066）
   ・タイトル : 起動時に出る。「遊ぶ」「ルール説明」
   ・ルール   : 紙（parchment）調。PC(≥1280px)は右にドッキング（背景を暗くせず
               盤面を操作できる）。スマホ/狭い画面は重ねて表示。
   ═══════════════════════════════════════════════════════════════ */

html { overflow-x: hidden; }

/* ── ゲーム中の「ルール」ボタン（ヘッダー） ── */
#rules-btn{
  font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700; font-size:13px;
  display:inline-flex; align-items:center; gap:6px; line-height:1;
  padding:7px 14px; border-radius:8px; cursor:pointer; white-space:nowrap;
  background:var(--p2); color:#fff; border:1px solid #d38aa6;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
#rules-btn:hover{ filter:brightness(1.08); }
#rules-btn:active{ transform:translateY(1px); }
#rules-btn.on{ background:rgba(0,0,0,.4); color:#f0b8ce; border-color:var(--p2); }

/* ── タイトル画面 ── */
#start-screen{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(ellipse 78% 58% at 50% 42%, rgba(46,93,58,.55), transparent 70%),
    linear-gradient(180deg, #3a2817, #241810);
  background-attachment:fixed;
}
.ss-card{ position:relative; width:100%; max-width:460px; text-align:center; }
.ss-crest{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #7e2f36, #5a1f26);
  border:2px solid var(--gold); display:flex; align-items:center; justify-content:center;
  font-family:'Shippori Mincho',serif; font-weight:800; color:var(--cream); font-size:26px;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.ss-logo{
  font-family:'Shippori Mincho', serif; font-weight:800; color:var(--cream);
  font-size:clamp(36px,9.5vw,56px); letter-spacing:.14em; margin:0 0 8px;
  text-shadow:0 3px 8px rgba(0,0,0,.6);
}
.ss-tag{ font-family:'Shippori Mincho',serif; color:var(--gold); font-size:14.5px; letter-spacing:.18em; margin:0 0 22px; }
.ss-sub{ color:var(--cream-dim); font-size:14px; line-height:1.9; margin:0 0 32px; }
.ss-btns{ display:flex; flex-direction:column; gap:13px; align-items:center; }
.ss-btn{
  font-family:'Shippori Mincho', serif; font-weight:700; font-size:19px; letter-spacing:.1em;
  width:min(300px,100%); padding:15px 20px; border-radius:10px; cursor:pointer;
  border:1px solid transparent; transition:transform .08s, filter .15s;
}
.ss-btn:active{ transform:translateY(1.5px); }
.ss-btn.play{ background:linear-gradient(180deg,#3a7048,#2e5d3a); color:var(--cream); border-color:#4f9e4f; box-shadow:0 5px 0 #1b3a24; }
.ss-btn.play:hover{ filter:brightness(1.08); }
.ss-btn.rules{ background:rgba(253,250,242,.06); color:var(--cream); border-color:var(--paper-edge); box-shadow:0 5px 0 rgba(0,0,0,.3); }
.ss-btn.rules:hover{ border-color:var(--gold); }
.ss-foot{ margin:24px 0 0; font-size:12px; color:var(--cream-dim); line-height:1.8; }
.ss-credit{ margin:14px 0 0; font-size:11px; color:#a98d6a; }
.ss-credit a{ color:var(--gold); text-decoration:none; }

/* ── ルールの背景（スマホのみ暗転） ── */
#rules-backdrop{
  position:fixed; inset:0; z-index:190; background:rgba(20,12,6,.6);
  opacity:0; visibility:hidden; transition:opacity .28s, visibility .28s;
}
body.rules-open #rules-backdrop{ opacity:1; visibility:visible; }

/* ── ルールパネル（紙／PCは右にドッキング・スマホは重ねて） ── */
#rules-panel{
  position:fixed; top:0; right:0; height:100%; width:min(440px,100%);
  z-index:195; color:var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.015) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--paper-1), var(--paper-2));
  border-left:3px solid var(--gold); box-shadow:-14px 0 44px rgba(0,0,0,.5);
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overscroll-behavior:contain;
}
body.rules-open #rules-panel{ transform:translateX(0); }
.rp-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; border-bottom:1px solid var(--paper-edge);
  background:linear-gradient(180deg,#7e2f36,#5a1f26);
}
.rp-title{ font-family:'Shippori Mincho',serif; font-weight:800; color:var(--cream); font-size:18px; margin:0; letter-spacing:.1em; }
.rp-close{
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:14px; background:rgba(0,0,0,.2); color:var(--cream);
  border:1px solid rgba(255,255,255,.35); border-radius:7px; padding:6px 12px; cursor:pointer;
}
.rp-close:hover{ background:rgba(0,0,0,.35); }
.rp-body{ flex:1 1 auto; overflow-y:auto; padding:6px 20px 30px; line-height:1.8; font-size:14px; color:var(--ink); }
.rp-body h3{
  font-family:'Shippori Mincho',serif; font-weight:800; color:#7e2f36; font-size:16px;
  margin:22px 0 6px; padding-bottom:5px; border-bottom:2px solid var(--paper-edge);
}
.rp-body h3:first-child{ margin-top:12px; }
.rp-body p{ margin:7px 0; }
.rp-body strong{ color:#7e2f36; }
.rp-body ul{ margin:7px 0; padding-left:20px; }
.rp-body li{ margin:5px 0; }
.rp-win{ background:rgba(46,93,58,.10); border:1px solid #9cbf8f; border-left:4px solid var(--felt-1); border-radius:8px; padding:10px 14px; margin:10px 0; }
.rp-win strong{ color:#2e5d3a; }
.rp-board{
  font-size:12.5px; line-height:1.55; color:#5a4a36;
  background:rgba(0,0,0,.04); border:1px dashed var(--paper-edge); border-radius:8px;
  padding:11px 13px; margin:9px 0;
}
.rp-board b{ color:#7e2f36; }
.rp-body table{ width:100%; border-collapse:collapse; font-size:12.5px; margin:6px 0; }
.rp-body th,.rp-body td{ text-align:left; padding:6px 5px; border-bottom:1px solid var(--paper-edge); vertical-align:top; }
.rp-body th{ color:#7a6b4a; font-weight:700; font-size:11.5px; }
.rp-sub{ font-family:'Shippori Mincho',serif; font-weight:800; color:#7e2f36; margin:12px 0 2px; }
.rp-name{ font-weight:800; color:var(--ink); white-space:nowrap; }
.rp-atk{ color:var(--red); font-weight:700; }
.rp-def{ color:#3a6ea0; font-weight:700; }
.rp-note{ font-size:12px; color:#7a6b4a; }
.rp-credit{ margin:18px 0 0; font-size:12px; color:#7a6b4a; border-top:1px solid var(--paper-edge); padding-top:12px; line-height:1.7; }
.rp-credit a{ color:#7e2f36; font-weight:700; }

/* ── PC(≥1280px): 右にドッキング（背景暗転なし・盤面操作可） ── */
@media (min-width:1280px){
  body{ transition:padding-right .3s cubic-bezier(.4,0,.2,1); }
  body.rules-open{ padding-right:400px; }
  #rules-panel{ width:400px; box-shadow:-10px 0 30px rgba(0,0,0,.32); }
  body.rules-open #rules-backdrop{ opacity:0; visibility:hidden; }
}

/* ── カード早見表の「枚数」列（便068） ── */
.rp-qty{ white-space:nowrap; font-weight:700; color:#5a4a36; }

/* ── フッター折りたたみ（便068） ── */
.foot-credit{ margin:0 0 4px; font-size:12px; color:var(--cream-dim); line-height:1.6; }
.foot-credit a{ color:var(--gold); }
details.foot-details > summary{
  cursor:pointer; list-style:none; font-size:12px; color:var(--cream-dim);
  display:inline-flex; align-items:center; gap:6px; opacity:.75; padding:2px 0;
}
details.foot-details > summary::-webkit-details-marker{ display:none; }
details.foot-details > summary::before{ content:'▸'; font-size:10px; }
details.foot-details[open] > summary::before{ content:'▾'; }
details.foot-details > summary:hover{ opacity:1; }
.foot .foot-body{ margin-top:6px; font-size:11.5px; line-height:1.7; color:var(--cream-dim); }
.foot .foot-body code{ background:rgba(0,0,0,.3); border-radius:4px; padding:1px 5px; font-size:.92em; }

/* ── 1画面フィット（PC ≥1024px・.wrap を画面高さに合わせて縮小） ── */
@media (min-width:1024px){
  body.fit-on{ height:100vh; overflow:hidden; }
  body.fit-on .wrap{ transform-origin: top center; will-change: transform; }
}