/**
 * comments.css — コメント（カードの吹き出し・盤面メモの付箋・カットイン）の見た目（2026-10-15 整理④）
 * 見本: mocks/sim-reorg-20261015.html の「3. コメント」・mocks/sim-memo-cutin-20261015.html（付箋とカットイン）。
 * 配色は site-theme.css の変数（--main-color / --bg-card / --bg-color / --accent / --gold / --border）に合わせる。
 * 黄色（--gold）・色の付いた実線は状態の目印（選択中・触れている間）なので、コメントの表示には使わない。赤は使わない。
 */

/* ── 吹き出し（カードの右上に重ねる。.tier-item-wrapper の中に置かれる） ──
   カードの内側に収めるので、wrapper の overflow:hidden や各ゾーンの切り取りに隠れない。
   文字の大きさはカード幅（wrapper は container-type:inline-size）に比例させる。 */
.tier-item-wrapper > .sol-bubble {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 12;              /* 画像(1)・セットの裏面(3)・カウンター(10)より前 */
  box-sizing: border-box;
  max-width: calc(100% - 8px);
  padding: 2px 6px;
  background: var(--main-color, #eff3fb);
  color: #101626;
  border-radius: 8px;
  font-family: var(--font);
  font-size: clamp(8px, 12cqw, 11px);
  font-weight: 500;
  line-height: 1.3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  pointer-events: none;     /* カードの移動・右クリック・ダブルクリックを妨げない（全文はカードの title） */
}
/* カードを指す小さな三角 */
.tier-item-wrapper > .sol-bubble::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -5px;
  border: 5px solid transparent;
  border-top-color: var(--main-color, #eff3fb);
  border-bottom: 0;
}
.sol-bubble-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* 最大2行。あふれた分は … で省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* ── 盤面メモの付箋（2026-10-15。見本: mocks/sim-memo-cutin-20261015.html の 1章 案A）──
   盤面（.custom-layout）の1段目の「もともとカードを置かない空いた角」に position:absolute で重ねる。
   帯のように差し込まないので、出ても消えても盤面の配置・大きさは変わらない（fitFieldToViewport も見積もらない）。
   位置と大きさは、盤面の実際の列の幅（--slot-width・--gap）から calc で決める（固定の px で置かない）:
     PC・横向き: 1段目の1〜2列目（EXモンスターゾーンの左。カード詳細欄の右）
     縦向きスマホ（5列グリッド）: 1段目の1列目（mobile.css の @media と同じ条件）
   色の付いた線は付けない（金の実線＝選択中・accent の実線＝触れている間と区別するため。面と影だけで表す）。
   付箋そのものだけ操作を受ける（pointer-events:auto）。ほかの部分はカードの操作・ドロップ先の判定を妨げない。 */
/* 付箋の位置の基準（縦向きスマホは mobile.css が同じ指定を持つ。PC・横向きにも同じ基準を与える） */
.custom-layout { position: relative; }
.custom-layout > .sol-board-memo {
  /* 高さの上限は（本体 .sol-board-memo-body で）「行数 × 行の高さ」、余白を足すと「余白×2 ＋ 行数 × 行の高さ」になる。行数・余白・文字の大きさを変数にして、画面ごとに互いに合わせる
     （上限が行の途中で切れず、末尾に … が出る）。+1px は小数の丸めで最終行が欠けないための余裕 */
  --memo-lines: 5;                       /* PC は5行まで */
  --memo-pad: 9px;
  --memo-lh: 1.45;
  --memo-fs: clamp(8px, calc(var(--slot-width) * 0.134), 13px);
  position: absolute;
  left: -1px;                /* スロットは枠(1px)の分だけ列からはみ出すので、見本（左330・幅205）に合わせて少し広げる */
  top: 8px;
  z-index: 15;               /* カード（スロット内）より前。カード詳細欄(10)・案内帯(30)・メニュー類より後ろ */
  box-sizing: border-box;
  width: calc(var(--slot-width) * 2 + var(--gap) + 3px);
  padding: var(--memo-pad) 11px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  color: var(--main-color);
  font-family: var(--font);
  font-size: var(--memo-fs);
  line-height: var(--memo-lh);
  overflow-wrap: anywhere;
  cursor: pointer;
  pointer-events: auto;      /* 再生中に盤面へ掛ける pointer-events:none（body.sol-playback など）の中でも開閉できる */
}
/* 省略は余白の内側の本体（body）で行う。外側（余白つき）で行うと、省略された次の行が下の余白に透けて見えるため */
.sol-board-memo-body {
  max-height: calc(var(--memo-lines) * var(--memo-lh) * var(--memo-fs) + 1px);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--memo-lines);   /* あふれた分は … で省略（全文は押すと開く・title にも入る） */
  -webkit-box-orient: vertical;
}
.custom-layout > .sol-board-memo[hidden] { display: none; }
.sol-board-memo-icon { margin-right: 4px; }
/* 押すと全文（PC・横向き）。同じ付箋が下へ広がって重なるだけ（盤面の配置は動かさない）。幅の狭い盤面でも読めるよう最低幅を取る。
   外を押すと閉じる（comment-ui.js）。縦向きスマホは広げず、下から出るシートで全文を出す（mobile-ui.js） */
.custom-layout > .sol-board-memo.is-open {
  z-index: 40;
  width: max(calc(var(--slot-width) * 2 + var(--gap) + 3px), min(220px, 60vw));
  overflow: visible;
}
.custom-layout > .sol-board-memo.is-open .sol-board-memo-body {
  display: block;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: unset;
}
/* 横向きスマホ（高さ500px以下）: 盤面が小さいので余白と行数を減らす */
@media (max-height: 500px) {
  .custom-layout > .sol-board-memo {
    --memo-lines: 3;
    --memo-pad: 5px;
  }
}
@media (max-width: 767px) and (orientation: portrait) {
  .custom-layout > .sol-board-memo {
    --memo-lines: 6;         /* スマホは6行まで */
    --memo-pad: 6px;
    --memo-lh: 1.35;
    --memo-fs: clamp(8px, calc(var(--slot-width) * 0.157), 11px);
    left: calc((100% - var(--slot-width) * 5 - 40px) / 2 - 2px);  /* 5列グリッド（列の間 10px）の1列目 */
    top: 2px;
    width: calc(var(--slot-width) + 4px);
    padding: var(--memo-pad);
    border-radius: 7px;
  }
}
/* 縦向きスマホで全文を出すシートの本文（components.css の `p { color:#333 }` を避ける） */
.sol-mobile-memo-full {
  margin: 0;
  color: var(--main-color);
  font-family: var(--font);
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── カットイン（2026-10-15。見本の 2章 案X）──
   盤面を横切る帯。その手に前進で来たときだけ約1.9秒（CUTIN_DURATION_MS と同じ）で入って抜け、盤面には残らない。
   置き場所は comment-view.js が出す時点の盤面の実位置から決める（横=盤面の入れ物の幅いっぱい・縦=盤面の中央の高さ）。
   position:fixed なので盤面の配置に影響しない。操作の邪魔をしない（pointer-events:none）。 */
.sol-cutin {
  --cutin-h: 76px;
  position: fixed;
  z-index: 9000;
  box-sizing: border-box;
  /* 長い文は2行に折り返すので高さは中身に合わせる（最低 --cutin-h）。top は帯の中心なので、
     自分の高さの半分だけ上へ（translate は動きの transform と別の指定なので重ならない） */
  min-height: var(--cutin-h);
  translate: 0 -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--bg-color) 90%, transparent) 12%, color-mix(in srgb, var(--bg-color) 90%, transparent) 88%, transparent 100%);
  border-top: 1px solid color-mix(in srgb, var(--main-color) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--main-color) 25%, transparent);
  pointer-events: none;
  opacity: 0;
  animation: solCutIn 1.9s ease both;   /* 1.9s は既定値。実際の長さは JS の CUTIN_DURATION_MS を comment-view.js が animationDuration で渡す */
}
.sol-cutin .sol-cutin-text {
  color: var(--main-color);  /* components.css の `span { color:#333 }` に負けないよう明示 */
  font-family: var(--font);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
/* 文字だけのカットイン: 帯の幅に収まらない長い文（最大20文字）は折り返す。
   1行のままだとスマホで両端が画面の外に出て読めなかった（2026-10-20 ユーザー指摘）。
   カードつき（相手の妨害）はカード名を省略表示する作りのまま */
.sol-cutin:not(.sol-cutin--card) { padding: 6px 16px; }
.sol-cutin:not(.sol-cutin--card) .sol-cutin-text {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: auto-phrase;  /* 文節で折り返す（対応ブラウザのみ。非対応は1字単位） */
  text-wrap: balance;       /* 2行の長さをそろえる */
  text-align: center;
  line-height: 1.25;
}
/* スマホ縦向き・横向きスマホ（短辺 500px 未満）は小さく */
@media (max-width: 767px) and (orientation: portrait), (max-height: 500px) {
  .sol-cutin { --cutin-h: 56px; }
  .sol-cutin .sol-cutin-text { font-size: 24px; }
}
@keyframes solCutIn {
  0%   { opacity: 0; transform: translateX(-60px); }
  14%  { opacity: 1; transform: translateX(0); }
  80%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(60px); }
}
/* 動きを減らす設定: 動かさず、フェードだけにする（長さは同じ） */
@media (prefers-reduced-motion: reduce) {
  .sol-cutin { animation-name: solCutInFade; }
  @keyframes solCutInFade {
    0%   { opacity: 0; }
    14%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
  }
}

/* ── 相手の妨害のカットイン（2026-10-16。見本: mocks/sim-disruption-cutin-20261016.html の案S）──
   帯の高さ・動き・線は文字だけのカットインと同じ。背景にカードのイラストをぼかして暗く敷き（カードの種類で
   イラストの位置がずれても目立たない）、左にカード（帯の上下に少しはみ出す）、右に「相手の妨害／カード名 発動」。
   画像は comment-view.js が届いてから入れる（届くまで・取れないときは文字だけ。背景は帯の暗い面のまま）。
   金色・色付きの実線・赤は状態の目印や危険の色なので使わない。 */
.sol-cutin--card {
  --cutin-card-h: 128px;
  height: var(--cutin-h);   /* カード名は1行で省略表示するので、帯の高さは固定のまま（上下の線の分も含めて --cutin-h） */
  gap: 18px;
  padding: 0 24px;
}
.sol-cutin-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.sol-cutin-art > i {
  position: absolute;
  inset: -12px;                 /* ぼかしの縁が透けないよう、少し外まで敷く */
  background-size: 110% auto;
  background-position: 50% 38%; /* カード全体の絵から、イラストのあたりを帯に入れる */
  filter: blur(3px);
}
.sol-cutin-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-color) 50%, transparent);
}
.sol-cutin--card:not(.has-card-image) .sol-cutin-art,
.sol-cutin--card.no-art .sol-cutin-art { display: none; } /* 画像が無い間・未発売でぼかす設定のときは帯の暗い面だけ */
.sol-cutin-card {
  position: relative;
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  margin: calc((var(--cutin-h) - var(--cutin-card-h)) / 2) 0; /* 帯より高いぶんを上下にはみ出させる */
  border-radius: 4px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
}
.sol-cutin-card:empty { display: none; }
.sol-cutin-card > img {
  display: block;
  height: var(--cutin-card-h);
  width: auto;
  border-radius: 4px;
}
.sol-cutin-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.sol-cutin-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  max-width: 100%;
}
.sol-cutin--card .sol-cutin-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;   /* 長いカード名は省略（一覧・カード詳細では全文） */
  letter-spacing: 0.06em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.sol-cutin .sol-cutin-who {
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--main-color) 10%, transparent);
  color: #a8b4c9;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.sol-cutin .sol-cutin-verb {
  flex: 0 0 auto;
  color: #a8b4c9;
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
@media (max-width: 767px) and (orientation: portrait), (max-height: 500px) {
  .sol-cutin--card { --cutin-card-h: 92px; gap: 10px; padding: 0 12px; }
  .sol-cutin .sol-cutin-who { font-size: 11px; padding: 1px 8px; }
  .sol-cutin--card .sol-cutin-text { font-size: 22px; }
  .sol-cutin .sol-cutin-verb { font-size: 13px; }
  .sol-cutin-line { gap: 8px; }
}

/* ── カットインの言葉の札（PC の右パネル区画・スマホのシートで共通。見本の 3章） ── */
.sol-cutin-form[hidden], .sol-cutin-chips[hidden] { display: none; }
.sol-cutin-form { margin-top: 6px; }
.sol-cutin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 8px;
}
.sol-cutin-chip {
  padding: 5px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--main-color);
  font-family: var(--font);
  font-size: 0.75rem;
  line-height: 1.3;
  cursor: pointer;
}
.sol-cutin-chip:hover { background: var(--border); }
.sol-mobile-comment-panel .sol-cutin-chip { padding: 8px 14px; font-size: 0.875rem; }

/* ── カットインの「言葉／相手の妨害」の切り替えと、相手の妨害の札・検索（2026-10-16。見本の 2章）──
   選ばれている方は面（--bg-hover）と太字で示す。金・accent の実線は状態の目印なので使わない。 */
.sol-cutin-seg[hidden], .sol-cutin-disruption[hidden], [data-cutin-pane][hidden] { display: none; }
.sol-cutin-seg {
  display: flex;
  gap: 4px;
  margin: 0 0 8px;
}
.sol-cutin-seg-btn {
  flex: 1 1 0;
  padding: 5px 0;
  background: var(--bg-card);
  border: none;
  border-radius: 6px;
  color: #a8b4c9;
  font-family: var(--font);
  font-size: 0.75rem;
  cursor: pointer;
}
.sol-cutin-seg-btn[aria-pressed="true"] {
  background: var(--bg-hover);
  color: var(--main-color);
  font-weight: 700;
}
.sol-cutin-cat {
  margin: 6px 0 0;
  color: #a8b4c9;
  font-size: 0.7rem;
}
.sol-cutin-disruption .sol-cutin-chips { margin: 2px 0 6px; }
.sol-cutin-search { position: relative; margin-top: 4px; }
.sol-cutin-search-input { width: 100%; }
.sol-cutin-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  z-index: 50;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--bg-surface);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  max-height: 220px;
  overflow-y: auto;
}
.sol-cutin-suggest[hidden] { display: none; }
.sol-cutin-suggest-item {
  padding: 6px 10px;
  color: var(--main-color);
  font-size: 0.78rem;
  cursor: pointer;
}
.sol-cutin-suggest-item:hover { background: var(--bg-hover); }
.sol-mobile-comment-panel .sol-cutin-seg-btn { padding: 8px 0; font-size: 0.875rem; }
.sol-mobile-comment-panel .sol-cutin-cat { font-size: 0.8rem; }
.sol-mobile-comment-panel .sol-cutin-search-input { padding: 8px 10px; font-size: 0.9rem; }
.sol-mobile-comment-panel .sol-cutin-suggest {
  top: auto;
  bottom: calc(100% + 2px);   /* シートは画面の下端にあるので、候補は検索欄の上に出す */
}
.sol-mobile-comment-panel .sol-cutin-suggest-item { padding: 10px 12px; font-size: 0.9rem; }
/* 相手の妨害のときは自由入力の行を隠す（mobile.css の display:flex が hidden 属性より強いので明示する） */
#solMobileCommentInputRow[hidden] { display: none; }
/* PC の右パネルは幅が狭いので、妨害の札は少し詰めて1行に2つ並びやすくする */
.sol-cutin-disruption .sol-cutin-chip { padding: 4px 8px; }
.sol-mobile-comment-panel .sol-cutin-disruption .sol-cutin-chip { padding: 8px 12px; }

/* ── カード選択の案内帯 ──
   高さ0の足場に重ねて出し入れしても盤面の大きさが変わらないようにする。クリックは下のカードへ通す。 */
.sol-comment-guide-anchor {
  position: relative;
  height: 0;
  z-index: 30;
  pointer-events: none;
}
.sol-comment-guide {
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  padding: 4px 8px;
  /* accent 15% を暗色の面に乗せた色。下のカードが透けて文字が読みにくくならないよう、地の色を敷いて不透明にする */
  background: linear-gradient(rgba(174, 197, 255, 0.15), rgba(174, 197, 255, 0.15)), var(--bg-color);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-family: var(--font);
  font-size: 0.75rem;
  line-height: 1.4;
}
.sol-comment-guide[hidden] { display: none; }
/* 選択中はカードを押せる印にする */
body.sol-comment-picking .tier-item-wrapper,
body.sol-comment-picking .tier-item-wrapper .tier-item {
  cursor: crosshair;
}

/* ── 右パネル「コメント」区画 ── */
.sol-comment-btn {
  padding: 5px 9px;
  background: var(--bg-hover, #202c42);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--main-color);
  font-family: var(--font);
  font-size: 0.75rem;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
}
.sol-comment-btn:hover { background: var(--border); }
.sol-comment-form {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.sol-comment-form[hidden] { display: none; }
.sol-comment-input {
  flex: 1 1 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 5px 7px;
  background: var(--bg-color);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--main-color);
  font-family: var(--font);
  font-size: 0.78rem;
}
.sol-comment-input:focus { outline: none; border-color: var(--accent); }
.sol-comment-submit { padding: 3px 10px; }

.sol-comment-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.sol-comment-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 3px 4px 3px 7px;
  background: var(--bg-card);
  border-radius: 6px;
  color: var(--main-color);
  font-size: 0.7rem;
  line-height: 1.4;
}
.sol-comment-row-text {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.sol-comment-del {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: #a8b4c9;
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
}
.sol-comment-del:hover { color: var(--main-color); border-color: var(--accent); }
.sol-comment-empty {
  padding: 2px 2px;
  color: #a8b4c9;
  font-size: 0.7rem;
}

/* ── カードの近くに出す入力欄（body 直下の fixed） ── */
.sol-comment-popup {
  position: fixed;
  z-index: 9500;
  display: flex;
  gap: 5px;
  align-items: center;
  max-width: calc(100vw - 12px);
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.sol-comment-popup .sol-comment-input {
  flex: 1 1 auto;
  width: 190px;
}

/* ── スマホの入力シート ── */
.sol-mobile-comment-panel .sol-mobile-share-note { margin: 0 0 8px; }

/* components.css の `p, span, li { color:#333 }` が中の span に直接効き、親の color より優先されて暗いグレーになるため、
   コメントの span は親の色を継承させる（吹き出しは暗色の文字、メモ・一覧は明色の文字） */
.sol-bubble-text,
.sol-board-memo-icon,
.sol-board-memo-text,
.sol-comment-row-text {
  color: inherit;
}

/* ── スマホのカード詳細に出す、そのカードの今の吹き出し（全文） ── */
.sol-mobile-cip-bubble {
  margin: 0 0 10px;
  padding: 6px 10px;
  background: var(--main-color, #eff3fb);
  color: #101626;
  border-radius: 8px;
}
.sol-mobile-cip-bubble[hidden] { display: none; }
.sol-mobile-cip-bubble-label,
.sol-mobile-cip-bubble-text {
  margin: 0;
  color: inherit;            /* components.css の `p, span, li { color:#333 }` を避ける */
  font-family: var(--font);
}
.sol-mobile-cip-bubble-label { font-size: 0.68rem; font-weight: 700; opacity: 0.7; }
.sol-mobile-cip-bubble-text { font-size: 0.85rem; line-height: 1.5; overflow-wrap: anywhere; }
.sol-mobile-cip-main { flex: 1; min-width: 0; }  /* パネルは横並びの flex。吹き出しと本体を縦に積む入れ物 */