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

:root {
  --panel-bg: rgba(20, 24, 30, 0.88);
  --panel-border: rgba(255, 255, 255, 0.12);
  --accent: #e8a33d;
  --text: #e8e6e0;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  background: #10151c;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
}

#app { position: fixed; inset: 0; }
#app canvas { display: block; }

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }

.hidden { display: none !important; }

/* ---- 上部バー ---- */
#top-bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; flex-wrap: wrap;         /* 狭いウィンドウではマナ欄が折り返して2段になる */
  padding: 10px 12px;
  pointer-events: none;
  z-index: 10;   /* 上部の手札帯(9)に重なってもボタンを手前に出す */
}
#top-bar > * { pointer-events: auto; }

#toolbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#toolbar button.active { border-color: var(--accent); color: var(--accent); background: rgba(255, 255, 255, 0.08); }
#net-badge {
  align-self: center;
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
}

button {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
button:hover { border-color: var(--accent); color: var(--accent); }
button:active { transform: translateY(1px); }

/* ---- ライフカウンター ---- */
#life-counters { display: flex; gap: 10px; }
.life-counter {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 6px 10px;
  display: flex; align-items: center; gap: 8px;
  backdrop-filter: blur(6px);
}
.life-counter .name { font-size: 12px; opacity: 0.8; }
.life-counter .value {
  font-size: 22px; font-weight: 700; min-width: 44px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.life-counter button { padding: 2px 9px; font-size: 15px; border-radius: 6px; }

/* ---- 手札 ---- */
/* Arena 風の扇状ハンド。枠(背景・境界線)は見た目だけ消し、要素と箱のサイズは残す —
   interact.js の overHandZone() と world.js の handZoneRects() が同じ矩形を使うため。
   z-index が要るのは translateX(-50%) 自体がスタッキングコンテキストを作るから:
   自身に z-index が無いと #hud の中で実質0番手になり、内側の img をいくら上げても
   #phase-bar(8)に構造上勝てない(ホバー拡大がフェーズバーに隠れる実バグの原因) */
#hand-zone,
#hand-zone-opp {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(880px, 92vw);
  padding: 6px 12px 4px;
  border-radius: 16px;
  pointer-events: none;      /* 帯の余白は canvas に通す(操作は手札の img だけ) */
  z-index: 9;
}
/* Arena と同じく、手札は画面の下端で少し切れる位置に置く。
   切れるぶんカードを大きく見せられる(下端は絵柄で情報が無い) */
#hand-zone {
  bottom: -54px;
}
#hand-zone-opp {
  top: 68px;      /* 上部バー(ライフとボタン)との間に余白を持たせる */
}
/* ドロップ受け入れは境界線ではなく光のにじみで示す(枠を消したため) */
#hand-zone.drop-hint, #hand-zone-opp.drop-hint {
  background: radial-gradient(ellipse at center, rgba(232, 163, 61, 0.22), rgba(232, 163, 61, 0) 70%);
}
#hand,
#hand-opp {
  padding: 10px 0;
}
/* カードは扇状に重ねるので絶対配置にする(flex の gap では重ねられない)。
   高さはカード1枚ぶん(幅104 × カードの縦横比 88/63 ≈ 145) */
#hand .hand-inner,
#hand-opp .hand-inner {
  position: relative;
  height: 146px;
}
/* カード1枚は「枠(.hand-card)」と「絵(img)」の2層。
   **枠が扇の位置と当たり判定を持ち、拡大するのは中の絵だけ。**
   絵ごと拡大すると当たり判定も3倍に広がり、隣のカードを覆って選べなくなる(実バグ)。
   枠は常に元の大きさなので、隣へは半枚ぶん動かせば移れる */
#hand .hand-card,
#hand-opp .hand-card {
  /* カスタムプロパティは全て初期値を宣言する。calc() は var が1つでも未定義だと
     transform 宣言ごと無効になり、全カードが中央に重なってしまう。
     --tilt は傾きの倍率。--a は JS がインラインで書くので :hover から上書きできない
     (インライン style は :hover に勝つ)ため、倍率を別に持たせて 0 にする */
  --x: 0px; --y: 0px; --a: 0deg; --z: 0; --s: 1; --flip: 1; --lift: 0px; --tilt: 1; --unarc: 0;
  position: absolute; left: 50%; margin-left: -52px;
  width: 104px;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;   /* 帯(#hand-zone)が none なので、掴む枠だけ戻す */
  /* transform は枚数が変わったとき扇が組み直る動き。z-index は遅延をかけるためだけに
     並べてある(継続時間0)。ここは遅延なし = ホバーを外れたら即座に元の重なり順へ戻る */
  transition: transform 0.12s ease, z-index 0s;
  transform: translate(var(--x), calc(var(--y) * var(--flip)));
  z-index: var(--z);   /* JS はここに入れる --z だけを書く(z-index を直接書くと :hover に勝つ) */
}
/* 座席の上下反転は padding の向きと --flip だけで表す。JS 側は座席を意識しない。
   padding は「持ち上げてもホバー判定が元の位置に残る」ための当たり判定の伸ばしろ。
   持ち上げた量(--lift)より厚くしておくと、ポインタが常に枠の中に残る */
#hand .hand-card { bottom: -48px; padding-bottom: 48px; }
#hand-opp .hand-card { top: -48px; padding-top: 48px; --flip: -1; }
#hand img,
#hand-opp img {
  display: block; width: 100%;
  border-radius: 5px;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.65));
  pointer-events: none;   /* 当たり判定は外側の枠が持つ。絵は拡大しても邪魔をしない */
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
  /* --unarc は扇の反り(--y)を打ち消す量。ホバー時に -1 にすると枠の反りを絵が相殺し、
     どのカードでも拡大後の底辺が同じ高さ(画面の下端)に揃う */
  transform: translateY(calc((var(--lift) + var(--y) * var(--unarc)) * var(--flip)))
             rotate(calc(var(--a) * var(--flip) * var(--tilt)))
             scale(var(--s));
}
#hand img { transform-origin: center bottom; }
#hand-opp img { transform-origin: center top; }
/* ホバーは持ち上げ+拡大+傾きを戻す。
   倍率はテキストが読める大きさから決めている。104px × 3 = 312px は、以前あった
   右側の拡大パネル(320px)とほぼ同じ。ここが小さいと「大きくなるが読めない」ので
   別パネルが要る、という重複が生まれる。
   傾きを戻せるのも3倍あるから(拡大後の形が傾いた元の形を完全に含む)。倍率を下げるなら
   傾きを戻すのもやめること */
/* --lift は「絵の下端が画面の下端にちょうど来る量」。手札は画面下で切れる位置に置いて
   いるので、その切れているぶん(40px)を持ち上げると底辺が画面と揃う。
   **枠の padding(48px)より小さく保つこと** — 超えるとホバー判定が外れて振動が再発する */
/* z-index も同じだけ遅らせる。ここを遅らせないと「先に手前へ出て、一拍置いてから拡大する」
   というちぐはぐな間ができる(継続時間0・遅延だけの遷移で、拡大と同時に切り替わる) */
#hand .hand-card:hover, #hand-opp .hand-card:hover {
  --s: 3; --lift: -40px; --tilt: 0; --unarc: -1;
  z-index: 100;
  transition: transform 0.12s ease, z-index 0s 0.12s;
}
/* カードを持って運んでいる間(body.hold)は、手札のホバー拡大を止める。
   場のカードを手札へ戻すドラッグの最中に別のカードが拡大されて邪魔にならないようにするため。
   body クラスは interact.js(場のドラッグ)と hand.js(手札内並べ替え)が付け外しする */
body.hold #hand .hand-card:hover,
body.hold #hand-opp .hand-card:hover {
  --s: 1; --lift: 0px; --tilt: 1; --unarc: 0;
  z-index: var(--z);
  transition: transform 0.12s ease, z-index 0s;
}
/* 並べ替えドラッグ中は拡大したまま隣のカードを覆ってしまうので元の大きさに戻す。
   (クリック自体では縮めない — 場へのドラッグにそのまま移れるように。)
   ドラッグ中は変形を瞬間反映したいので transition も切る */
#hand .hand-card.reordering, #hand-opp .hand-card.reordering {
  --s: 1; --lift: 0px; --tilt: 0; --unarc: 0;
  z-index: 120;
  transition: transform 0s;
}
/* 手札のソートボタン。帯の右端に置き、帯の pointer-events:none の中でボタンだけ受ける。
   手札カードが右端まで広がっても押せるよう、ホバー拡大(z-index 100)より手前へ */
#hand-zone .hand-sort,
#hand-zone-opp .hand-sort {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  pointer-events: auto;
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 6px;
  opacity: 0.85;
}
#hand-zone .hand-sort:hover,
#hand-zone-opp .hand-sort:hover { opacity: 1; }
/* 拡大は少し待ってから始める。手札の上をマウスが素通りしただけで次々に拡大しないように、
   カードの上に delay ぶん留まらないと動き出さない(留まる前に離れれば拡大は起きない)。
   **戻すときは待たせない** — 離れる側の遷移は base の delay(0s)を使うので何もしなくてよいが、
   押した時だけは :hover が続いたままなので、:active 側で明示的に 0s に戻す */
#hand .hand-card:hover img,
#hand-opp .hand-card:hover img { transition-delay: 0.12s; }
#hand .hand-card:active img,
#hand-opp .hand-card:active img { transition-delay: 0s; }
/* 並べ替え中は拡大の delay・遷移の両方を止める(掴んだカードの縮小と追従を瞬間反映) */
#hand .hand-card.reordering img,
#hand-opp .hand-card.reordering img { transition: transform 0s; }

/* ---- カード拡大プレビュー ---- */
#preview {
  position: absolute; right: 16px; top: 142px;   /* 上部の手札帯(下の帯)より下に出す */
  width: min(320px, 26vw);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  display: none;
  pointer-events: none !important;
}
#preview.show { display: block; }

/* 場のカード拡大時の日本語ルールテキスト。常にカードの右隣に出す(位置は毎フレーム
   ui.js の updateJpText が投影して left/top を書く。狭いウィンドウでは左へ詰めるだけで
   カードの左側には回り込ませない) */
#jp-text {
  position: absolute;
  width: min(340px, 28vw);
  max-height: 44vh; overflow-y: auto;
  background: rgba(10, 13, 18, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px; line-height: 1.65;
  white-space: pre-wrap;
  pointer-events: none !important;
  /* カード/デッキのバッジレイヤー(5)より上に出す。マリガン(20)・メニュー(40)・モーダル(50)よりは下 */
  z-index: 15;
}
#jp-text .jp-title { font-weight: 600; margin-bottom: 6px; }
#jp-text.hidden { display: none; }

/* ---- 操作ログ ---- */
/* 画面左下の常時パネル。最新の行ほど下。はみ出した古い行はスクロールで読める。
   普段はテーブル操作を妨げないよう pointer-events を切っておき、ホバー中だけスクロールできる */
#oplog {
  position: absolute; left: 12px; bottom: 158px;   /* 手札の帯(下端から約148px)の上に置く */
  width: 360px; max-height: 32vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(to top, rgba(10, 13, 18, 0.82), rgba(10, 13, 18, 0.6));
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 8px 10px;
  backdrop-filter: blur(6px);
  overflow: hidden;
  pointer-events: none;   /* 記録だけのパネル。下のテーブル操作は妨げない */
}
#oplog:hover { pointer-events: auto; }   /* ホバー中だけスクロールバーを操作できる */
#oplog.dragging { pointer-events: auto; }   /* 移動/リサイズのドラッグ中も操作を続けられる */
#oplog .oplog-title {
  font-size: 10px; letter-spacing: 2px; opacity: 0.5; margin-bottom: 4px;
  pointer-events: auto; cursor: grab; user-select: none;   /* ドラッグで移動する取っ手 */
  align-self: flex-start;
}
#oplog .oplog-title:active { cursor: grabbing; }
/* 右下のリサイズ取っ手。ol に被らないよう下に余白を足す */
#oplog .oplog-resize {
  position: absolute; right: 3px; bottom: 3px;
  width: 14px; height: 14px;
  cursor: nwse-resize; pointer-events: auto;
  background: linear-gradient(135deg, transparent 45%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.4) 58%, transparent 58%);
}
#oplog ol {
  list-style: none; margin: 0 0 12px; padding: 0;
  flex: 1 1 auto; min-height: 0;   /* リサイズでパネルが伸びたらスクロール領域も伸びる */
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;   /* 古い行を読むための縦スクロール */
}
#oplog li { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; line-height: 1.55; opacity: 0.85; }
#oplog li .at { flex: 0 0 auto; opacity: 0.45; font-variant-numeric: tabular-nums; }
#oplog li .msg { min-width: 0; white-space: normal; }   /* flex の min-width:auto を外して長い行も折り返す */

/* ---- 初手マリガン ---- */
/* デッキ読み込みで初手を引いた時に出る「マリガン/キープ」バー。
   手札の帯(下端から約148px)の少し上に置く。キープ待ち(mt-active)で枠が発光する */
#mulligan {
  position: absolute; bottom: 210px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-bg);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 8px 14px;
  backdrop-filter: blur(8px);
  z-index: 20;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
#mulligan.hidden { display: none; }
#mulligan .mt-text { font-size: 13px; white-space: nowrap; }
#mulligan button { padding: 6px 16px; }
#mulligan button:disabled { opacity: 0.45; cursor: default; }
#mulligan.mt-active { border-color: var(--accent); animation: mt-pulse 1.2s ease-in-out infinite; }
@keyframes mt-pulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 0 18px 2px color-mix(in srgb, var(--accent) 45%, transparent); }
}
/* マリガンで「戻すカード」に選んだ手札の枠。枠ごと金色に光らせる */
#hand .hand-card.mt-sel img,
#hand-opp .hand-card.mt-sel img {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 80%, white))
          drop-shadow(0 2px 7px rgba(0, 0, 0, 0.65));
}

/* ---- ターンバー(手番表示+開始/終了ボタン) ----
   フェーズバーに入れると横幅が足りなくなるため、画面右下に独立パネルとして置く
   (操作ログが左下なので左右対称)。クリックで手番を切り替え、ボタンで開始/終了 */
#turn-bar {
  position: absolute; right: 16px; bottom: 158px;
  display: flex; gap: 6px; align-items: center;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 4px 8px;
  backdrop-filter: blur(6px);
  z-index: 8;
  user-select: none;
}
/* 手番インジケータ。クリックで手番だけ手動切替(番号の進行はボタンかフェーズ折り返し) */
#turn-bar .ph-turn {
  padding: 2px 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 11px; font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.35);
}
#turn-bar .ph-turn:hover { filter: brightness(1.35); }
/* 「ターンを始める」(未開始) / 「ターン終了」(進行中) ボタン */
#turn-bar .ph-turnbtn {
  padding: 2px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 11px; font-weight: 700;
  color: #1a140a;
  background: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}
#turn-bar .ph-turnbtn:hover { filter: brightness(1.2); }

/* ---- フェーズバー ---- */
/* MOのターン進行バーの簡易版。手札の帯のすぐ上・画面下中央に置く。
   クリックでそのフェーズへ、右クリックで1つ戻る。ルール処理はしないので自由に動かせる */
#phase-bar {
  position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 2px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 4px 6px;
  backdrop-filter: blur(6px);
  z-index: 8;
  user-select: none;
}
#phase-bar .ph-cell {
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  color: var(--text); opacity: 0.35;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, opacity 0.12s ease;
}
#phase-bar .ph-cell:hover { opacity: 0.8; color: var(--accent); }
#phase-bar .ph-cell.current {
  background: var(--accent); color: #1a140a; opacity: 1; font-weight: 700;
}

/* ---- トースト ---- */
#toast-area {
  position: absolute; top: 142px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  pointer-events: none !important;
}
.toast {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 14px;
  animation: toast-in 0.18s ease;
  backdrop-filter: blur(6px);
}
.toast.big { font-size: 20px; font-weight: 700; border-color: var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---- ヘルプ ---- */
#help-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 20px 26px;
  max-height: 84vh; overflow-y: auto;
  backdrop-filter: blur(10px);
  z-index: 30;
}
#help-panel h2 { font-size: 16px; margin-bottom: 12px; color: var(--accent); }
#help-panel table { border-collapse: collapse; font-size: 13px; }
#help-panel td { padding: 4px 10px; border-bottom: 1px solid rgba(255,255,255,0.07); }
#help-panel td:first-child { font-weight: 700; white-space: nowrap; color: var(--accent); }
#help-panel button { margin-top: 14px; }

/* ---- デッキ枚数バッジ / ダイスの目バッジ ---- */
.deck-badge,
.prop-badge {
  position: fixed;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 5;
  font-variant-numeric: tabular-nums;
}

.prop-badge {
  background: rgba(120, 84, 20, 0.85);
  border-color: rgba(240, 210, 140, 0.6);
  font-size: 13px;
}

/* ---- カード上のカウンター ---- */
/* バッジはこの層の中だけで前後を付ける。手前のカードでもメニューやモーダルより上には出ない */
#card-badge-layer { position: fixed; inset: 0; z-index: 5; pointer-events: none; }

.card-badge {
  position: fixed;
  transform: translate(-50%, -50%);
  display: flex; gap: 3px;
  white-space: nowrap;
  pointer-events: auto;      /* バッジ自体を右クリックの的にする */
  cursor: context-menu;
}
.card-badge .chip {
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

/* ---- コンテキストメニュー ---- */
#ctx-menu {
  position: fixed;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 5px;
  min-width: 190px;
  z-index: 40;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 34px rgba(0,0,0,0.55);
}
#ctx-menu .item {
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  display: flex; justify-content: space-between; gap: 16px;
}
#ctx-menu .item:hover { background: rgba(255,255,255,0.1); }
#ctx-menu .item .key { opacity: 0.5; font-size: 11px; }
#ctx-menu .sep { height: 1px; background: var(--panel-border); margin: 4px 6px; }

/* ---- モーダル ---- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.modal {
  background: #1a212b;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  /* 左右の余白は広めに — 詰まりすぎると読みにくい(2026-08) */
  padding: 26px 34px;
  width: min(640px, 92vw);
  max-height: 88vh; overflow-y: auto;
}
.modal h2 { font-size: 17px; margin-bottom: 6px; color: var(--accent); }
.modal p.desc { font-size: 12px; opacity: 0.7; margin-bottom: 12px; line-height: 1.6; }
.modal textarea, .modal input[type="text"] {
  width: 100%;
  background: #10151c;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  color: var(--text);
  padding: 10px;
  font-size: 13px;
  font-family: ui-monospace, monospace;
  resize: vertical;
}
.modal textarea { min-height: 200px; }
/* デッキ読み込みの座席タブ(あなた/相手)。非アクティブなタブのリスト欄は隠す */
.dh-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.dh-tab {
  padding: 6px 14px;
  background: #10151c;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.dh-tab.active { background: var(--accent); color: #0d1117; border-color: var(--accent); font-weight: 600; }
.dh-pane { display: none; }
.dh-pane.active { display: block; }
.modal .row { display: flex; gap: 12px; margin: 12px 0; align-items: center; flex-wrap: wrap; }
.modal .row label { font-size: 13px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.row-label { font-size: 12px; opacity: 0.7; }
/* 山ビューアの名前絞り込み。モーダルが広いので全幅にせず小さく */
.pile-search { max-width: 260px; }
/* 保存/復元モーダルのスロット行。要素の左右には必ず gap を空ける */
.save-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.save-row .name { font-weight: 600; min-width: 72px; }
.save-row .status { flex: 1; font-size: 12px; opacity: 0.8; }
/* ラジオをボタン風の連続スイッチにまとめる。並んだ素のラジオよりグループが分かる */
.seg {
  display: inline-flex;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  overflow: hidden;
  background: #10151c;
}
.seg label + label { border-left: 1px solid var(--panel-border); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 5px 16px; font-size: 13px; }
.seg input:checked + span { background: var(--accent); color: #1a1a1a; font-weight: 600; }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.modal .primary { background: var(--accent); color: #1a1a1a; font-weight: 700; border-color: transparent; }
.modal .primary:hover { color: #000; filter: brightness(1.1); }
.modal .progress { font-size: 13px; opacity: 0.85; min-height: 1.4em; margin-top: 8px; }

/* ---- ファイルのドラッグ&ドロップ ---- */
.modal.drop-hint { border-color: var(--accent); box-shadow: 0 0 18px rgba(232, 163, 61, 0.35); }
#drop-overlay {
  position: fixed; inset: 12px;
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 21, 28, 0.6);
  border: 2px dashed var(--accent);
  border-radius: 14px;
  color: var(--accent);
  font-size: 20px; letter-spacing: 2px;
  pointer-events: none;      /* drop は window で受けるので当たり判定を作らない */
}

/* ---- サイドボード入替 ---- */
.modal.wide { width: min(760px, 94vw); }
.modal .sb-count {
  font-size: 13px; margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.modal .sb-count.warn { color: var(--accent); }
.modal .sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal .sb-col h3 { font-size: 12px; font-weight: 400; opacity: 0.7; margin-bottom: 4px; }
.modal .sb-list {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  max-height: 46vh; overflow-y: auto;
}
.modal .sb-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.modal .sb-row:last-child { border-bottom: none; }
.modal .sb-row:hover { background: rgba(255,255,255,0.1); }
.modal .sb-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal .sb-row .n { opacity: 0.6; font-variant-numeric: tabular-nums; }

/* ---- 山ビューア ---- */
.modal .pile-info {
  font-size: 13px; margin-bottom: 8px;
  opacity: 0.85; font-variant-numeric: tabular-nums;
}
.modal .pile-row { cursor: default; }
.modal .pile-row .ops { display: flex; gap: 4px; flex-shrink: 0; }
.modal .pile-row .ops button { padding: 2px 8px; font-size: 12px; border-radius: 6px; }
.modal .pile-row .ops button[disabled] { opacity: 0.35; cursor: default; }

/* ---- カウンター ---- */
.modal .ct-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
/* .modal input[type="text"] の width:100% を上書きするので input を付けて詳細度を揃える */
.modal input.ct-name { flex: 1 1 120px; width: auto; }
.modal input.ct-num { flex: 0 0 120px; width: 120px; }
.modal .ct-list {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  max-height: 34vh; overflow-y: auto;
}
.modal .ct-empty { padding: 8px 10px; font-size: 13px; opacity: 0.55; }
.modal .ct-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 10px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.modal .ct-row:last-child { border-bottom: none; }
.modal .ct-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal .ct-row .n {
  min-width: 2.2em; text-align: right;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.modal .ct-row button { padding: 2px 9px; font-size: 12px; border-radius: 6px; }