/**
 * solitaire-brand.css
 * カード相場ダークテーマ上書き — Fugartaのwhiteテーマを全面置換
 */

/* ── サイズ変数 (1920×1080 に収める) ── */
/* slot-width 94px / gap 10px でブラウザchrome込みでも1080pに収まる */
:root {
  --slot-width: 94px;
  --slot-height: calc(var(--slot-width) * 1.45);
  --gap: 10px;
  --min-display-width: calc(var(--slot-width) * 7.3);
}

/* ── 2カラムレイアウト ── */

.sol-page-layout {
  display: flex;
  align-items: flex-start;
}

/* 左サイドバー */
.sol-sidebar {
  width: 180px;
  min-height: 100vh;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  background: #0b1428;
  border-right: 1px solid var(--border);
  box-sizing: border-box;
}

/* スクロールバーを細く */
.sol-sidebar::-webkit-scrollbar { width: 4px; }
.sol-sidebar::-webkit-scrollbar-track { background: transparent; }
.sol-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* 右メインエリア（盤面列＋右パネルを横並び） */
.sol-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
}

/* 盤面列（flex-grow で残り幅を使う） */
/* 盤面列 */
.sol-field-area {
  flex: 1;
  min-width: 0;
  padding: 0 6px 6px 10px;
  position: relative;
}

/* カード詳細パネル: 絶対配置（レイアウトに影響しない） */
.sol-cip-col {
  position: absolute;
  left: 10px;
  top: 6px;
  /* --cip-width: トレイ開時にJSが上書き。閉時はフォールバック値(3.3x)を使う */
  width: var(--cip-width, calc(var(--slot-width) * 3.3));
  height: calc(var(--slot-height) * 3 + var(--gap) * 3 - 6px);
  overflow: hidden;
  z-index: 10;
  transition: opacity 0.2s, transform 0.2s, width 0.25s ease;
}

.sol-cip-col.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10px);
}

/* トグルボタン */
.sol-cip-toggle {
  position: absolute;
  /* パネル幅に連動して移動。--cip-width 未設定時は 3.3x のフォールバック */
  left: calc(var(--cip-width, calc(var(--slot-width) * 3.3)) + 10px);
  top: 6px;
  z-index: 11;
  width: 18px;
  height: 30px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0 4px 4px 0;
  color: #94a3b8;
  font-size: 0.65rem;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s, left 0.25s ease;
  line-height: 1;
}
.sol-cip-toggle:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.sol-field-area.cip-hidden .sol-cip-toggle {
  left: 10px;
  border-radius: 4px;
}

/* ── 狭い画面の詳細パネル（2026-10-20 案A。cip-layout.js が data-overlay を付ける）──
   普段は盤面の左の隙間に収まる小さい表示（画像と名前だけ）。カードを選んだときだけ盤面の上へ 300px に広げる。
   広げたときの浮かせ方は右クリックメニュー（案Y）と同じ影と薄い縁取りにそろえる。 */
.sol-cip-col.is-expanded {
  width: 300px;
  z-index: 40;
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(174, 197, 255, 0.08);
}
.sol-field-area.cip-expanded .sol-cip-toggle {
  left: 310px;
  z-index: 41;
}
.sol-cip-col[data-overlay]:not(.is-expanded) { cursor: pointer; }
.sol-cip-col[data-overlay]:not(.is-expanded) .cip-header {
  flex-direction: column;
  align-items: stretch;
}
.sol-cip-col[data-overlay]:not(.is-expanded) .cip-img { width: 100%; }
.sol-cip-col[data-overlay]:not(.is-expanded) .cip-type,
.sol-cip-col[data-overlay]:not(.is-expanded) .cip-attr,
.sol-cip-col[data-overlay]:not(.is-expanded) .cip-stats,
.sol-cip-col[data-overlay]:not(.is-expanded) .cip-pendulum,
.sol-cip-col[data-overlay]:not(.is-expanded) .cip-effect,
.sol-cip-col[data-overlay]:not(.is-expanded) .cip-price,
.sol-cip-col[data-overlay]:not(.is-expanded) .tr-open-wrap { display: none; }
/* 小さい表示のときだけ、押せば読めることを一言で示す（カードを表示しているときだけ） */
.sol-cip-col[data-overlay]:not(.is-expanded) .sol-card-info-panel:has(.cip-header)::after {
  content: '押すと詳しく ›';
  margin-top: auto;
  color: #aec5ff;
  font-size: 0.9em;
  text-align: center;
}

/* 右パネル */
.sol-right-panel {
  width: 180px;
  min-height: 100vh;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  background: #0b1428;
  border-left: 1px solid var(--border);
  box-sizing: border-box;
  padding-bottom: 10px;
}

.sol-right-panel::-webkit-scrollbar { width: 4px; }
.sol-right-panel::-webkit-scrollbar-track { background: transparent; }
.sol-right-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── サイドパネル開閉 ── */

/* 畳んだ状態: 幅0・内容非表示・ボーダー消し */
.sol-sidebar.collapsed,
.sol-right-panel.collapsed {
  width: 0;
  min-width: 0;
  border-width: 0;
  overflow: hidden;
}
.sol-sidebar.collapsed > *,
.sol-right-panel.collapsed > * {
  display: none;
}

/* 見出し行内の開閉ボタン（開いている時だけ見える。盤面の上には何も浮かせない） */
.sol-panel-toggle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--bg-card);
  border: 1px solid #2d4a7a;
  border-radius: 4px;
  color: #7aaff0;
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sol-panel-toggle:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* 左: ロゴ行の右端 / 右: 「盤面操作」見出し行の右端 */
.sol-sidebar-head,
.sol-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.sol-sidebar-head { margin-bottom: 10px; }
.sol-panel-head .sol-right-heading { margin: 0; }
.sol-panel-head { margin-bottom: 7px; }

/* 畳んだ時に画面端へ残す縦帯（盤面レイアウトのフロー内・帯全体が開くボタン） */
.sol-panel-rail {
  flex-shrink: 0;
  width: 24px;
  height: 100vh;
  position: sticky;
  top: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  background: var(--bg-surface);
  border: 0;
  color: #a8b4c9;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sol-panel-rail[hidden] { display: none; }
.sol-panel-rail:hover { background: #202c42; color: #f3ce46; }
.sol-rail-arrow { font-size: 0.7rem; line-height: 1; }
.sol-rail-label {
  writing-mode: vertical-rl;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}

/* 初回表示時のパルスアニメーション（ボタンの存在を知らせる） */
@keyframes sol-toggle-pulse {
  0%, 100% { background: var(--bg-card);            border-color: #2d4a7a; color: #7aaff0; }
  50%       { background: rgba(74,124,255,0.25);     border-color: var(--accent); color: #fff; }
}
.sol-panel-toggle-pulse {
  animation: sol-toggle-pulse 0.9s ease-in-out 3;
}

.sol-right-section {
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border);
}

.sol-right-heading {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a6fa5;
  margin: 0 0 7px;
}

/* 右パネル内の操作ボタン */
.sol-right-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sol-right-actions .action-btn {
  width: 100%;
  min-height: 38px;
  font-size: 0.8rem;
  padding: 7px 8px;
  text-align: center;
  line-height: 1.3;
  box-sizing: border-box;
}

/* 操作方法: details 折りたたみ */
.sol-ops-details {
  margin: 0;
}
.sol-ops-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.sol-ops-summary::-webkit-details-marker { display: none; }
.sol-ops-summary::after {
  content: ' ▶';
  font-size: 0.55rem;
  color: #4a7cff;
  vertical-align: middle;
}
.sol-ops-details[open] .sol-ops-summary::after {
  content: ' ▼';
}
.sol-ops-details[open] .sol-ops-list {
  margin-top: 6px;
}

/* 操作方法リスト（右パネル内・縦積みスタイル） */
.sol-ops-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sol-ops-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sol-ops-key {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: #7aaff0;
  background: rgba(74, 112, 165, 0.15);
  border: 1px solid rgba(74, 112, 165, 0.3);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.5;
}

.sol-ops-desc {
  font-size: 0.7rem;
  color: #8fa8c8;
  padding-left: 2px;
  line-height: 1.4;
}

/* ── サイドバー内セクション共通 ── */
.sol-sidebar-section {
  padding: 10px 12px 10px;
  border-bottom: 1px solid var(--border);
}
.sol-sidebar-section:last-child {
  border-bottom: none;
}

/* セクション見出し */
.sol-sidebar-heading {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a6fa5;
  margin: 0 0 10px;
}

/* ── デッキ選択 ── */

/* マイデッキ・サンプルデッキのボタンと窓は side-panels.css（2026-10-20 サイドバー整理） */

/* deck-input-panel 自体のデフォルトスタイルを無効化（サイドバー内では不要） */
.sol-sidebar .deck-input-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/* マイデッキ空状態 */
.mydeck-empty {
  padding: 4px 0;
}
.mydeck-empty-title {
  margin: 14px 0 10px;
  text-align: center;
  font-size: 0.83rem;
  color: #eff3fb;
}
.mydeck-import-entry {
  display: block;
  box-sizing: border-box;
  padding: 7px 8px;
  border: 1px dashed #aec5ff;
  border-radius: 6px;
  color: #aec5ff;
  font-size: 0.8rem;
  font-family: var(--font);
  text-decoration: none;
  margin-bottom: 3px;
}
.mydeck-import-entry:hover { background: rgba(174,197,255,0.1); }
/* 「取り込む」を単語の途中で折り返さない。components.css の `span { color:#333 }` が
   直接効いて暗く見えていたため、リンクの文字色を引き継がせる（2026-10-15 本番で発見） */
.mydeck-import-word { white-space: nowrap; color: inherit; }
.mydeck-import-entry.big {
  padding: 14px 8px;
  text-align: center;
  font-size: 0.86rem;
}
.mydeck-import-note {
  display: block;
  color: #a8b4c9;
  font-size: 0.68rem;
}
.sol-recommend-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #facc15;
  background: rgba(250,204,21,0.12);
  border: 1px solid rgba(250,204,21,0.3);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0.02em;
}
.sol-ext-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 10px;
  background: rgba(74,124,255,0.12);
  border: 1px solid rgba(74,124,255,0.3);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 0.8rem;
  font-family: var(--font);
  text-decoration: none;
  box-sizing: border-box;
  cursor: default;
  opacity: 0.7;
}
.sol-ext-link.ready {
  color: var(--accent);
  opacity: 1;
  cursor: pointer;
}
.sol-ext-link.ready:hover {
  background: rgba(74,124,255,0.2);
  border-color: var(--accent);
}
.sol-ext-manual-link {
  display: block;
  margin-top: 5px;
  font-size: 0.68rem;
  color: #4a6490;
  text-align: right;
  text-decoration: underline;
}
.sol-ext-manual-link:hover {
  color: #94a3b8;
}
.sol-neuron-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 10px;
}
.sol-neuron-divider::before,
.sol-neuron-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.sol-neuron-divider-text {
  font-size: 0.68rem;
  color: #4a6490;
  white-space: nowrap;
}

/* ニューロン画像アップロード */
.sol-upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  background: var(--bg-card);
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 0.82rem;
  font-family: var(--font);
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.sol-upload-label:hover {
  border-color: var(--accent);
  background: rgba(74,124,255,0.07);
  color: var(--accent);
}
.sol-upload-label input[type="file"] {
  display: none;
}

.sol-upload-note {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: #4a6490;
  line-height: 1.55;
}

/* フォルダ選択ボタン */
#folderSelectButton {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #94a3b8;
  font-family: var(--font);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s, color 0.15s;
}
#folderSelectButton:hover {
  border-color: var(--accent);
  color: var(--main-color);
}

/* テキストデッキ */
.deck-textarea {
  width: 100%;
  min-height: 110px;
  background: var(--bg-color);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--main-color);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 8px;
  box-sizing: border-box;
  resize: vertical;
  line-height: 1.6;
  transition: border-color 0.15s;
}
.deck-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.deck-load-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.deck-load-btn:hover { background: var(--accent-hover); }

/* 環境デッキリスト */
.meta-tier-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* マイデッキリスト */
.my-deck-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 環境デッキ・マイデッキ共通: 行全体クリックのカードUI */
.deck-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-card);
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font);
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.deck-card-row:hover {
  border-color: var(--accent);
  background: rgba(74,124,255,0.12);
}
.deck-card-row:active {
  transform: scale(0.99);
}
.deck-card-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.deck-card-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.deck-card-name {
  font-size: 0.82rem;
  color: var(--main-color);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.deck-card-date {
  font-size: 0.72rem;
  color: #94a3b8;
  font-family: var(--mono);
}

/* hover 時のみ表示する読込ヒント */
.deck-card-hint {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: #4a6490;
  opacity: 0;
  transition: opacity 0.15s;
}
.deck-card-row:hover .deck-card-hint {
  opacity: 1;
  color: var(--accent);
}

.deck-loading-msg {
  font-size: 0.78rem;
  color: #4a6490;
  margin-top: 6px;
  line-height: 1.5;
}

/* ── 操作ボタン ── */
.sol-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sol-sidebar-actions button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #94a3b8;
  font-family: var(--font);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.sol-sidebar-actions button:hover {
  border-color: var(--accent);
  color: var(--main-color);
  background: rgba(74,124,255,0.08);
}

/* ── 操作説明 ── */
.sol-sidebar-explain {
  font-size: 0.75rem;
  color: #4a6490;
  line-height: 1.65;
}
.sol-sidebar-explain p {
  margin: 0 0 6px;
  font-weight: 700;
  color: #647b9a;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sol-sidebar-explain ul {
  margin: 0;
  padding-left: 1.1em;
}
.sol-sidebar-explain li { margin-bottom: 4px; }

/* ── 基本 ── */

html, body {
  background: var(--bg-color);
  color: var(--main-color);
  font-family: var(--font);
  margin: 0;
  overflow-y: hidden; /* nav高さ + min-height:100vh で body が 100vh を超えてスクロールバーが出るのを防ぐ */
}

/* ── ナビ（サイドバー上部に統合） ── */
/* ロゴ + ページリンクを縦配置。旧 .sol-nav 横長ヘッダーは廃止 */
/* ロゴ下の余白は .sol-sidebar-head の margin-bottom(10px) が持つ（ロゴ側に持たせるとボタンと縦中心がずれる） */
/* アイコン付きメニューバー化: ナビ全体を一つの「箱」として視認できるように
   背景・角丸・内側パディングを持たせる。デッキ選択タブ(.deck-input-tab)は
   背景を塗りつぶす方式のため、ナビ側は左アクセントバーのみ・矢印(::after)併用の
   別の視覚言語にして区別する（2026-09-15、docs/decisions.md参照）。 */
.sol-sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  padding: 4px;
}
.sol-sidebar-links a {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
  padding: 6px 7px;
  border-radius: 5px;
  border-left: 2px solid transparent;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.sol-sidebar-links a svg {
  flex-shrink: 0;
  opacity: 0.85;
}
/* ナビは「背景を塗らず左アクセントバーのみ」で反応を示す。
   下のデッキ選択タブ(.deck-input-tab)は背景を塗りつぶす方式にして、
   同じ見た目の「押せる箱」に見えないよう役割の違いを形で分ける
   （decisions.md 参照）。 */
.sol-sidebar-links a:hover {
  color: var(--accent-hover);
  background: transparent;
  border-left-color: var(--accent-hover);
}
.sol-sidebar-links a.active {
  color: var(--main-color);
  font-weight: 700;
  background: transparent;
  border-left-color: var(--accent);
}
.sol-sidebar-links a.active svg { opacity: 1; }
.sol-sidebar-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* サイト内の他ページへの画面遷移であることを示す矢印アイコン。
   下の「デッキを選択」タブ内にある同名ボタン（画面遷移なしのローカル切替）との
   混同を避けるための視覚的な区別（現在地の「一人回し」リンクには付けない）。 */
.sol-sidebar-links a:not(.active)::after {
  content: '↗';
  display: inline-block;
  margin-left: auto;
  padding-left: 4px;
  font-size: 0.72em;
  opacity: 0.6;
  transform: translateY(-1px);
}
.sol-nav-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  isolation: isolate;
}
.sol-nav-title .nav-icon {
  height: 44px;
  width: auto;
  display: block;
  mix-blend-mode: normal;
}
.sol-nav-title .nav-brand {
  display: inline-flex;
  align-items: flex-end;
  font-family: 'Bungee', sans-serif;
  font-size: 22px;
  color: #fff;
  line-height: 1;
  letter-spacing: 1px;
}
.sol-nav-title .nav-brand .nav-g {
  color: #facc15;
  font-size: 1.28em;
}

/* ── タイトル ── */
.title {
  color: var(--main-color);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
}

/* ── 盤面コンテナ ── */
#mainContainer {
  background: var(--bg-color);
  /* padding-left を slot-width + 固定値にして盤面を右にオフセット。
     justify-content:center との組み合わせで、増加分の半分ずつ左右に効く。
     カード詳細パネルの幅は _updateCipWidth() が自動再計算する。 */
  padding: 4px 6px 0 calc(var(--slot-width) + 40px);
  margin-bottom: 0;
}

/* center-row: mainContainer外に移動し左端をデッキと揃える */
.center-row {
  display: flex;
  align-items: stretch;   /* EXデッキを手札エリアと同じ高さに引き伸ばす */
  gap: 4px; /* 上下のパネル間隔（margin-top）と揃える */
  margin: 4px 0 0;
  padding: 0;
  justify-content: flex-start;
}

/* 手札エリア: pool と同じ枠付き構造 */
.sol-hand-area {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
}

/* center-slot は sol-hand-area 内なので枠・余白を除去、幅も短縮 */
.sol-hand-area .center-slot {
  background: transparent;
  border: none !important;
  border-radius: 0;
  margin-left: 0;
  box-shadow: none !important;
  /* 元の 5.5スロット幅(660px)・min-width:400px を上書きして短縮 */
  width: calc(var(--slot-width) * 6);
  min-width: unset;
}

/* ── スロット（フィールド） ── */
.custom-slot {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── ゾーンアイコン（同系色ウォーターマーク） ── */

/* ペンデュラムゾーン: クリスタルの振り子（線画） */
.custom-slot[data-slot="10"],
.custom-slot[data-slot="14"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%234a7cff%22%20stroke-opacity%3D%220.65%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M50%208v16m0%2010L31%2060l19%2031%2019-31-19-26Zm0%200v57M31%2060l19-9%2019%209M19%2080q31%2030%2062%200%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2229%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2280%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2281%22%20cy%3D%2280%22%20r%3D%221.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72% auto;
}

/* フィールド魔法ゾーン: 四方の紋章を備えた魔法陣（線画） */
.custom-slot[data-slot="3"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%234a7cff%22%20stroke-opacity%3D%220.65%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2225%22%2F%3E%3Cpath%20d%3D%22M40%2012a39%2039%200%200%200-28%2028m0%2020a39%2039%200%200%200%2028%2028m20%200a39%2039%200%200%200%2028-28m0-20a39%2039%200%200%200-28-28M50%205l6%2010-6%2010-6-10ZM95%2050l-10%206-10-6%2010-6ZM50%2095l-6-10%206-10%206%2010ZM5%2050l10-6%2010%206-10%206Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 65%;
}
.custom-slot:hover {
  border-color: var(--accent);
}

/* ── サイドエリアラッパー（フリースペース・墓地・除外） ── */
.sol-side-area {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: calc(var(--slot-width) * 1.2 + 16px);
  box-sizing: border-box;
}

/* side-slot は sol-side-area 内では枠を除去し、背景色のみ透明化 */
.sol-side-area .side-slot {
  background-color: transparent; /* shorthandでなくcolorのみ → background-imageを消さない */
  border: none !important;
  border-radius: 0;
  flex: 1;
  height: auto;
  min-height: 0; /* flex子要素のmin-height:auto を解除 → max-height が有効になる */
  align-self: auto;
  width: calc(var(--slot-width) * 1.2); /* 元の幅を復元 */
  box-sizing: border-box;
  overflow-x: hidden; /* 横はみ出しは非表示のまま */
  overflow-y: auto;   /* 極端枚数でゾーン内スクロールに切り替え */
}

/* 墓地・除外エリア: 盤面（.custom-layout）と下端を揃える
   --field-height は fitFieldToViewport() が盤面を実測してセットする CSS 変数。
   JS 未実行時のフォールバックとして計算式を残す。 */
.side-slots-container .sol-side-area {
  max-height: var(--field-height, calc(3 * var(--slot-height) + 2 * var(--gap)));
  overflow: hidden;
}

/* 墓地: アーチ形の墓石と刻印（線画） */
.sol-grave .side-slot {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%234a7cff%22%20stroke-opacity%3D%220.65%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M27%2079V39h5a18%2018%200%200%201%2036%200h5v40M34%2079V45h5v-6a11%2011%200%200%201%2022%200v6h5v34M24%2079h52v7H24Zm-5%207h62l4%207H15ZM50%2049q3%2011%2010%2014-7%203-10%2014-3-11-10-14%207-3%2010-14Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55%;
}

/* 除外: 異次元へ消えるカード（線画）。自由スペースには適用しない。 */
.sol-banish .side-slot {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%234a7cff%22%20stroke-opacity%3D%220.65%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m35%2055%2010-39a3%203%200%200%201%204-2l25%207a3%203%200%200%201%202%204L65%2065M42%2055l9-33%2018%205-9%2033M31%2051c-28%203-23%2013%2019%2013s47-10%2028-13M41%2073l5%205-1%207-5-5ZM60%2076l5%205-1%207-5-5ZM51%2088l4%204-1%205-4-4Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55%;
}

/* ── 手札・デッキ・EXデッキの平仄統一 ── */

/* 点線・白枠をすべてブランドカラーに統一 */
.pool {
  border-style: solid;
}

#free-space .side-slot,
.custom-slot[data-slot="9"] {
  border: 1px solid var(--border);
}

/* 手札: 白背景・大丸み・margin-left を除去してデッキ列と揃える */
.center-slot {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-left: 0;
}
.center-slot:hover {
  box-shadow: none;
  border-color: var(--accent);
}

/* デッキ・EXデッキ */
#imagePool, #imagePool2 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 4px;
  padding: 4px 8px;
  min-width: unset;
}

/* EXデッキ: 残りスペースを使い、空時も最低幅を確保 */
.center-row #imagePool2 {
  margin-top: 0;
  margin-left: 0;
  flex: 1;
  min-width: calc(var(--slot-width) * 2.5);
}

/* ラベルを統一 */
.pool-label,
.center-slot-label,
.side-slot-label,
.left-rectangle-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  padding: 0;
  text-align: left;
}

/* ── アクションボタン ── */
.action-btn {
  font-family: var(--font);
  border-radius: var(--radius);
  transition: background 0.15s, transform 0.1s;
}
.action-btn::before { display: none; }

.draw-btn  { background: var(--bg-card); border-color: var(--gold); color: var(--gold); }
.draw-btn:hover  { background: var(--gold); color: #111; transform: translateY(-1px); }

.reset-btn { background: var(--bg-card); border-color: #94a3b8; color: #94a3b8; }
.reset-btn:hover { background: #94a3b8; color: #0a1024; transform: translateY(-1px); }

/* クリア: 取り返しのつかない操作なので危険色（.replay-btn-danger と同じ赤） */
.clear-btn { background: var(--bg-card); border-color: var(--red); color: var(--red); }
.clear-btn:hover { background: rgba(239,68,68,0.12); border-color: var(--red); color: var(--red); transform: translateY(-1px); }

/* 即時表示の吹き出し（title属性は遅延＋二重表示になるため使わない）。
   右パネルは overflow-y:auto で横にはみ出すと切れるため、ボタン幅いっぱいの下向きに出す。 */
.sol-tip-wrap { position: relative; }
.sol-tip {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  padding: 7px 9px;
  background: #202c42;
  color: #eff3fb;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: left;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
/* リセットの吹き出しは上側に出す（下に出すと直下のクリアボタンを隠すため） */
.sol-tip-up {
  top: auto;
  bottom: calc(100% + 4px);
}
/* 右パネルの吹き出しはパネルの左に出す（side-tips.js が出すたびに top/left を置く）。
   fixed なので overflow-y:auto のパネルに切られない（2026-10-21・上に出すと上端が切れていた） */
.sol-tip.sol-tip-side {
  position: fixed;
  right: auto;
  bottom: auto;
  width: 240px;
}
/* :hover はホバー可能な端末だけ（タッチで出っぱなしにならないように）。:focus-visible は常に有効 */
@media (hover: hover) {
  .sol-tip-wrap > button:hover + .sol-tip {
    visibility: visible;
    opacity: 1;
  }
}
.sol-tip-wrap > button:focus-visible + .sol-tip {
  visibility: visible;
  opacity: 1;
}


/* ── モーダル ── */
.modal-overlay { background: rgba(0,0,0,0.7); }
.modal-content,
.image-browser-modal {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--main-color) !important;
}
.modal-title { color: var(--main-color) !important; }

/* ── リプレイバー ── */
.replay-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 4px;
  flex-wrap: wrap;
}
.replay-btn {
  padding: 4px 9px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--main-color);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  font-family: var(--font);
}
.replay-btn:hover { border-color: var(--accent); background: rgba(74,124,255,0.12); }
/* <a> を .replay-btn として使う（リプレイ一覧へのリンク） */
a.replay-btn { display: inline-block; text-decoration: none; }
.replay-btn:disabled { opacity: 0.35; cursor: default; }
/* 記録が無いときの「保存」（黄の主操作）も押せない見た目にする（replay-service.js _updateUI。2026-10-21） */
.replay-save-btn:disabled, .sol-mobile-save-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.replay-btn.play-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 破壊的操作用: 赤系で視覚的に危険操作だと分かるようにする */
.replay-btn-danger {
  margin-left: 12px; /* バー末尾に配置し、頻用する「取消」等から間隔を空けて誤操作を防ぐ */
  color: var(--red);
  border-color: var(--red);
}
.replay-btn-danger:hover { border-color: var(--red); background: rgba(239,68,68,0.12); }

/* 再生速度切替ボタン */
.replay-speed-group { display: flex; gap: 3px; }
.replay-speed-btn { padding: 4px 7px; }
.replay-speed-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.replay-slider { flex: 1 1 100px; min-width: 60px; accent-color: var(--accent); }
.replay-counter { font-size: 0.78rem; color: #94a3b8; white-space: nowrap; font-family: var(--mono); }
.replay-share-btn {
  padding: 4px 10px;
  background: var(--gold);
  color: #111;
  border: none;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.replay-share-btn:hover { background: #d4a800; }

/* 2026-10-21 真っ黒をやめ、通常のボタン（#202c42）＋X のマーク（モック sim-refresh-20261021 の D） */
.replay-share-x-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 10px;
  background: #202c42;
  color: #eff3fb;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
}
.replay-share-x-btn span { color: inherit; }
.replay-share-x-btn:hover { background: #2b3549; }
.replay-share-x-btn:disabled { opacity: 0.35; cursor: default; }

/* ── リプレイバーのまとまり（見る／戻す／残す。2026-10-15 整理③） ──
   まとまりの間だけ縦線で区切る。「見る」はスライダーを伸ばすため残りの幅を取る。 */
.replay-group {
  display: flex;
  align-items: center;
  gap: 5px;
}
.replay-group:first-child { flex: 1 1 auto; min-width: 0; }
.replay-group + .replay-group {
  border-left: 1px solid var(--border);
  padding-left: 8px;
  margin-left: 3px;
}

/* 再生（2026-10-16 ユーザーの声「再生ボタンが見つけづらい」・モック案A）。
   まわりの小さなボタンより明るい面（--border）と大きめの太字、accent の ▶ で目立たせる。
   黄は主操作（保存）、accent の線は「触れている間」の印なので使わない。再生中は既存の
   .play-active（accent の面）になり、印は ■ に変わる。 */
.replay-btn.replay-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 11px;
  font-size: 0.88rem;
  font-weight: 700;
}
.replay-btn.replay-play-btn:not(.play-active) { background: var(--border); }
/* ホバーは面を少し明るく（--border に文字色を少し混ぜる。新しい色は作らない） */
.replay-btn.replay-play-btn:not(.play-active):not(:disabled):hover { background: color-mix(in srgb, var(--border) 82%, var(--main-color)); }
.replay-play-btn::before { content: '▶'; color: var(--accent); font-size: 0.78em; }
.replay-play-btn.play-active::before { content: '■'; color: inherit; }

/* 保存（主操作・黄）。色は site-theme.css の主操作の規則でそろえる */
.replay-save-btn {
  padding: 4px 12px;
  background: var(--gold);
  color: #111;
  border: none;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
}

/* ── PC版 範囲ボタン（#pcRecordBtn。旧「録画」） ──
   選んでいる間・範囲が決まった後は accent（青系）で示す。赤は危険操作専用のため使わない。 */
.pc-record-btn { font-weight: 700; }
/* components.css の `p, span, li { color:#333 }` が中の #pcRecordLabel(span)に
   直接効き、親のcolor継承より優先されて暗いグレーに見えていたため明示指定する。 */
.pc-record-btn span { color: inherit; }
.pc-record-btn.recording {
  border-color: var(--accent);
  color: var(--accent);
}
.pc-record-btn.has-range {
  color: var(--accent);
  background: rgba(174, 197, 255, 0.12);
}
.pc-range-clear-btn { padding: 4px 7px; }
.pc-range-clear-btn[hidden] { display: none; }

/* PC版 再生中の操作ロック（replay-ui.js が #replayPlay の再生状態に連動して付け外しする）。
   PC専用クラス。mobile.css の body.sol-playback（スマホ縦向き専用の再生モード）とは
   別物で、互いに参照し合わない。 */
.sol-playback-pc {
  pointer-events: none;
}
/* 再生中でも右パネルの開閉ボタンだけは押せるようにする（親の none を子の auto で上書き） */
.sol-playback-pc #sidebarToggleRight {
  pointer-events: auto;
}

/* ── カード詳細パネル ── */

.sol-card-info-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* padding/gap/font-size を --slot-width に連動させてウィンドウ縮小時の崩れを防ぐ */
  padding: clamp(4px, calc(var(--slot-width) * 0.085), 8px);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, calc(var(--slot-width) * 0.064), 6px);
  font-size: clamp(0.62rem, calc(var(--slot-width) * 0.14), 0.82rem);
  color: var(--main-color);
}

.cip-empty {
  color: #4a6490;
  font-size: 0.96em;
  text-align: center;
  margin: auto 0;
  line-height: 1.6;
}

.cip-header {
  display: flex;
  gap: clamp(4px, calc(var(--slot-width) * 0.085), 8px);
  align-items: flex-start;
}

.cip-img {
  /* 画像幅も --slot-width に連動。基準: slot-width=94px → 52px */
  width: clamp(28px, calc(var(--slot-width) * 0.55), 52px);
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: cover;
}

.cip-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cip-name {
  font-size: 1.04em;
  font-weight: 700;
  color: var(--main-color);
  line-height: 1.3;
  word-break: break-all;
  margin: 0;
}

.cip-type,
.cip-attr {
  font-size: 0.91em;
  color: #94a3b8;
  margin: 0;
  line-height: 1.3;
}

.cip-stats {
  font-size: 0.96em;
  color: var(--gold);
  margin: 2px 0 0;
  font-family: var(--mono);
}

.cip-effect {
  font-size: 0.91em;
  color: #94a3b8;
  line-height: 1.55;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  overflow-y: auto;
  flex: 1;
}

/* ペンデュラム効果ブロック（本体効果の直前に表示） */
.cip-pendulum {
  flex: none;
}
.cip-pendulum-label {
  display: block;
  font-weight: 600;
  color: #cbd5e1;
}

.cip-price {
  border-top: 1px solid var(--border);
  padding-top: 6px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cip-price-val {
  font-size: 1.01em;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--gold);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.cip-price-shop {
  font-size: 0.88em;
  color: #94a3b8;
  font-family: var(--font);
}

.cip-price-rarity {
  font-size: 0.88em;
  color: var(--gold);
  font-family: var(--font);
  opacity: 0.85;
}

.cip-price-none {
  color: #4a6490;
  font-family: var(--font);
  font-size: 0.91em;
}

.cip-price-links {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.cip-price-link {
  font-size: 0.91em;
  color: var(--accent);
  text-decoration: none;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.cip-price-link:hover {
  background: rgba(74,124,255,0.12);
  border-color: var(--accent);
}

.cip-buy-link {
  color: var(--green);
}

.cip-buy-link:hover {
  background: rgba(34,197,94,0.1);
  border-color: var(--green);
}

/* ── コイントス・ダイスロールのボタンは side-panels.css の .sol-side-btn ── */

/* ── オーバーレイ ── */
.sol-random-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* 初期は透明 */
}
/* 表示時: active クラスで入場アニメーション */
.sol-random-overlay.sol-overlay-active {
  animation: overlayIn 0.25s ease forwards;
}
/* 退場時 */
.sol-random-overlay.sol-overlay-exit {
  animation: overlayOut 0.35s ease forwards;
}

.sol-random-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

.sol-random-overlay-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.sol-overlay-active .sol-random-overlay-content {
  animation: contentIn 0.3s 0.05s cubic-bezier(0.34,1.56,0.64,1) both;
}

.sol-random-overlay-face {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* コイン */
.sol-coin-face {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffe177, #d4960a 60%, #b07a00);
  border: 5px solid #f0c040;
  box-shadow: 0 0 60px rgba(232,200,72,0.5), 0 8px 30px rgba(0,0,0,0.5),
              inset 0 -6px 12px rgba(0,0,0,0.25), inset 0 4px 8px rgba(255,255,180,0.3);
  font-size: 2.6rem;
  font-weight: 900;
  color: #7a5500;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

@keyframes coinSpin {
  0%   { transform: rotateY(0deg) scaleX(1); }
  25%  { transform: rotateY(180deg) scaleX(0.1); }
  50%  { transform: rotateY(360deg) scaleX(1); }
  75%  { transform: rotateY(540deg) scaleX(0.1); }
  100% { transform: rotateY(720deg) scaleX(1); }
}
.sol-coin-spin {
  animation: coinSpin 0.7s ease-in-out;
  background: radial-gradient(circle, #aaa 0%, #666 100%);
  color: transparent;
}

@keyframes coinReveal {
  0%   { transform: scale(0.6) rotateY(90deg); opacity: 0; }
  60%  { transform: scale(1.12) rotateY(0deg); opacity: 1; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}
.sol-coin-reveal {
  animation: coinReveal 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

/* ── 3Dダイスキューブ ── */
.sol-dice-scene {
  width: 140px;
  height: 140px;
  perspective: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.6));
}

.sol-dice-cube {
  width: 110px;
  height: 110px;
  position: relative;
  transform-style: preserve-3d;
}

.sol-die-face {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #f4f4f4 0%, #d0d0d0 100%);
  border: 1px solid rgba(160,160,160,0.6);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 13px;
  box-sizing: border-box;
  box-shadow:
    inset 3px 3px 8px rgba(255,255,255,0.85),
    inset -2px -2px 6px rgba(0,0,0,0.18);
}

.sol-die-face--front  { transform: translateZ(55px); }
.sol-die-face--back   { transform: rotateY(180deg) translateZ(55px); }
.sol-die-face--right  { transform: rotateY(90deg) translateZ(55px); }
.sol-die-face--left   { transform: rotateY(-90deg) translateZ(55px); }
.sol-die-face--top    { transform: rotateX(90deg) translateZ(55px); }
.sol-die-face--bottom { transform: rotateX(-90deg) translateZ(55px); }

.sol-die-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a3a5a, #0a0e1e);
  align-self: center;
  justify-self: center;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.45), inset 0 1px 1px rgba(255,255,255,0.1);
}

.sol-die-face[data-val="1"] .sol-die-dot {
  background: radial-gradient(circle at 35% 35%, #ff4466, #bb0033);
  box-shadow: 0 0 6px rgba(220,30,70,0.5), 1px 1px 3px rgba(0,0,0,0.4);
}

/* 結果ラベル */
.sol-random-overlay-label {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 0.05em;
  text-shadow: 0 2px 12px rgba(232,200,72,0.6);
  opacity: 0;
}
@keyframes labelReveal {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.sol-label-reveal {
  animation: labelReveal 0.35s ease forwards;
}

.sol-random-overlay-hint {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  margin: 0;
  cursor: pointer;
}

/* 入退場 */
@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes overlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes contentIn {
  from { transform: scale(0.75); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ── ゾーン枚数バッジ ── */
.zone-count {
  margin-left: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  font-family: var(--mono);
  color: #64748b;
}

/* ── セッション復元トースト ── */
.sol-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 0.82rem;
  color: var(--main-color);
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
}

.sol-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── フッター ── */
.sol-footer {
  margin-top: 20px;
  padding: 10px 16px;
  font-size: 0.7rem;
  color: #334155;
  border-top: 1px solid var(--border);
  text-align: center;
}
.sol-footer a { color: #334155; }

/* ── フィードバックボタン（サイドバー内） ── */
/* 「不具合・要望を送る」のボタンは side-panels.css の .sol-side-btn.is-quiet */

/* ── フィードバックモーダル ── */
.sol-fb-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sol-fb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

/* ════════ PC版ドラッグ中の視覚フィードバック（拡大＋ラベル追従） ════════
   モバイル版 .touching / #solTouchLabel（mobile.css・767px以下限定）の見た目を踏襲しつつ、
   クラス名/IDを分けて衝突を避ける。ネイティブD&D専用のためモバイル幅を制限するメディア
   クエリは不要（dragstart/dragendはタッチ操作からは発火しない）。 */
.tier-item-wrapper.pc-card-lifting {
  /* transform/z-index は drag-drop.js の liftPcDragging がインラインで設定するため
     ここでは記述しない（CSS側で書いても常にインラインに負けるデッドコードになる）。 */
  box-shadow: 0 0 0 3px var(--accent), 0 8px 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

#pcDragLabel {
  position: fixed;
  transform: translateX(-50%);
  background: rgba(10, 16, 36, 0.92);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2100;
  display: none;
}
.sol-fb-dialog {
  position: relative;
  width: min(440px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  /* 2026-10-21 ほかの窓・右クリックメニューと同じ地と影に（案Y。以前は濃い紺 #0e1a36） */
  background: #141c2c;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(174, 197, 255, 0.08);
  font-family: var(--font);
}
.sol-fb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.sol-fb-header h2 {
  margin: 0;
  font-size: 1.0rem;
  color: var(--main-color);
  font-weight: 600;
}
.sol-fb-close {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.sol-fb-close:hover { color: var(--main-color); }
.sol-fb-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}
.sol-fb-label {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 14px 0 4px;
}
.sol-fb-label:first-child { margin-top: 0; }
.sol-fb-req { color: #ef5350; }
.sol-fb-select,
.sol-fb-input,
.sol-fb-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  background: var(--bg-card);
  color: var(--main-color);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: var(--font);
  transition: border-color 0.15s;
}
.sol-fb-select:focus,
.sol-fb-input:focus,
.sol-fb-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.sol-fb-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}
.sol-fb-count {
  text-align: right;
  font-size: 0.72rem;
  color: #4a6490;
  margin-top: 3px;
}
.sol-fb-status {
  margin: 12px 0 0;
  font-size: 0.82rem;
  padding: 8px 10px;
  border-radius: 6px;
}
.sol-fb-status.ok  { background: rgba(46,160,67,0.15); color: #4ade80; }
.sol-fb-status.err { background: rgba(239,83,80,0.15); color: #f87171; }
.sol-fb-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.sol-fb-cancel {
  padding: 8px 16px;
  background: transparent;
  color: #94a3b8;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.85rem;
}
.sol-fb-cancel:hover { border-color: #64748b; color: var(--main-color); }
.sol-fb-submit {
  padding: 8px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font);
  font-size: 0.85rem;
  transition: background 0.15s;
}
.sol-fb-submit:hover { background: var(--accent-hover); }
.sol-fb-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── PC版 共有シート（#pcShareSheet） ──
   .sol-fb-* （フィードバックモーダル）の見た目を流用しつつ、シート内は
   縦積みボタンにするための最小限の上書き。モバイル版共有シートには影響しない。
   .sol-fb-overlay は常に display:flex のため、hidden属性での開閉を効かせるには
   ここで明示的に display:none を上書きする必要がある。 */
.pc-share-sheet[hidden] {
  display: none;
}
.pc-share-dialog {
  width: min(320px, 92vw);
}
.pc-share-body {
  gap: 8px;
}
.pc-share-body .replay-share-btn,
.pc-share-body .replay-share-x-btn,
.pc-share-body .replay-btn {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 9px 10px;
  font-size: 0.85rem;
}
/* 保存・共有シートのタイトル欄と範囲の表示 */
.pc-share-title-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-color);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--main-color);
  font-size: 0.85rem;
  padding: 7px 9px;
  font-family: var(--font);
}
.pc-range-info {
  margin: 4px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--main-color);
}
.pc-share-note {
  margin: 0;
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.4;
}

/* ── 共有シートの「みんなのリプレイに公開する」チェック（PC・スマホ共通） ──
   チェックボックスの作りは .sol-sample-blur-toggle（sample-blur.css）と同じ。黄は使わない（accent）。 */
.sol-public-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--main-color);
}
/* components.css の `p, span, li { color:#333 }` が暗色パネルで読めなくなるのを打ち消す */
.sol-public-check span { color: inherit; }
/* 入力の見た目は下の「オン・オフのスイッチ」 */

/* ── オン・オフのスイッチ（2026-10-21 白いチェックボックスから置き換え。モック sim-refresh-20261021 の D） ──
   「みんなのリプレイに公開する」「未発売カードのイラストをぼかす」（PC・スマホ）。
   入力は checkbox のまま（role="switch"）なので、読み書きする JS は変えない。
   色: オフ＝溝 #2b3549・丸 #a8b4c9、オン＝溝 accent（#aec5ff）・丸 #101626。黄は使わない（主操作の色のため） */
.sol-public-check input[type="checkbox"],
.sol-sample-blur-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: #2b3549;
  cursor: pointer;
  transition: background 0.15s;
}
.sol-public-check input[type="checkbox"]::after,
.sol-sample-blur-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #a8b4c9;
  transition: left 0.15s, background 0.15s;
}
.sol-public-check input[type="checkbox"]:checked,
.sol-sample-blur-toggle input[type="checkbox"]:checked {
  background: var(--accent);
}
.sol-public-check input[type="checkbox"]:checked::after,
.sol-sample-blur-toggle input[type="checkbox"]:checked::after {
  left: 16px;
  background: #101626;
}
.sol-public-check input[type="checkbox"]:focus-visible,
.sol-sample-blur-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sol-public-check input[type="checkbox"]:disabled,
.sol-sample-blur-toggle input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: default;
}
.pc-share-error {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--red);
}
.pc-share-error[hidden] { display: none; }

/* ── 共有リンク・保存したリプレイを開いた直後の「▶ 再生する」の案内（replay-start-prompt.js。2026-10-16） ──
   この案内の中では再生が主な操作なので、ボタンは主操作の黄。カードの面は既存のシートと同じ --bg-card。 */
.sol-replay-start { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sol-replay-start-backdrop { position: absolute; inset: 0; background: rgba(16, 22, 38, 0.6); }
.sol-replay-start-card {
  position: relative;
  width: min(340px, 100%);
  padding: 22px 20px 16px;
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  text-align: center;
  font-family: var(--font);
}
.sol-replay-start-card p { margin: 0; color: inherit; }
.sol-replay-start-label { font-size: 0.78rem; color: #a8b4c9 !important; }
.sol-replay-start-title {
  margin-top: 6px !important; font-size: 1.1rem; font-weight: 700; color: var(--main-color) !important; overflow-wrap: anywhere;
  /* 長いタイトルで「再生する」が画面の外に出ないよう3行まで */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sol-replay-start-meta { margin-top: 2px !important; font-size: 0.82rem; color: #a8b4c9 !important; }
.sol-replay-start-play {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px; margin-top: 16px;
  border: none; border-radius: 10px;
  background: var(--gold); color: #242013;
  font-family: var(--font); font-size: 1.05rem; font-weight: 800; cursor: pointer;
}
.sol-replay-start-play::before { content: '▶'; font-size: 0.85em; }
.sol-replay-start-play:hover { background: #ffe16d; }
.sol-replay-start-later {
  margin-top: 8px; padding: 6px 12px;
  border: none; background: transparent; color: #a8b4c9;
  font-family: var(--font); font-size: 0.85rem; cursor: pointer;
}
.sol-replay-start-later:hover { color: var(--main-color); }

/* 狭いサイドバーに合わせた共通ブランド素材。 */
.sol-nav-title .nav-brand-image { width:88px; height:auto; display:block; transform:translateY(5px); }


/* ── 再生バーのボタンの形と記号をそろえる（2026-10-21 モック sim-refresh-20261021 の C・ユーザー承認） ──
   まとまり（見る・戻す・残す）はそのまま。ボタンは同じ形（地 #202c42・角丸6・高さ32）、記号は線アイコン
   （.replay-ico。サイドバーと同じ線の太さ）。主操作の「保存」だけ黄。PC 幅だけ（狭い画面は responsive.css の並びのまま）。
   起点は .replay-bar（ID にしない）: 横向きスマホで範囲・共有を隠す responsive.css の ID 指定（display:none）より弱くするため。
   境目はスマホ扱い（responsive.css の max-width:767px）の次の 768px から（iPad 縦も含める） */
@media (min-width: 768px) {
  .replay-bar .replay-btn,
  .replay-bar .replay-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: #202c42;
    color: #eff3fb;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: none;
    box-sizing: border-box;
  }
  /* ホバーは状態の地（再生中・選んでいる速さ・範囲あり）を持たないボタンだけ（持つものは地を消さない） */
  .replay-bar .replay-btn:not(:disabled):not(.play-active):not(.active):not(.has-range):hover { background: #2b3549; }
  .replay-bar .replay-btn.play-active:not(:disabled):hover { background: var(--accent-hover); }
  .replay-bar .replay-btn:disabled,
  .replay-bar .replay-save-btn:disabled { opacity: 0.4; }
  .replay-bar .replay-btn[hidden] { display: none; }
  /* 前の手・次の手は記号だけなので地を付けない */
  .replay-bar #replayBack,
  .replay-bar #replayFwd { background: none; padding: 0 8px; }
  .replay-bar #replayBack:not(:disabled):hover,
  .replay-bar #replayFwd:not(:disabled):hover { background: #202c42; }
  /* 速さは溝の中で選ぶ（選んでいる速さは通常のボタンの地＋accent の文字） */
  .replay-bar .replay-speed-group { gap: 2px; padding: 2px; border-radius: 6px; background: #101626; }
  .replay-bar .replay-speed-btn { height: 28px; padding: 0 9px; background: none; color: #a8b4c9; }
  .replay-bar .replay-speed-btn.active { background: #202c42; color: #eff3fb; }
  /* 再生: ほかのボタンと同じ形で、▶（accent）と大きめの文字で見つけやすく。再生中は accent の面（.play-active） */
  .replay-bar .replay-btn.replay-play-btn { padding: 0 14px 0 11px; font-size: 0.85rem; }
  .replay-bar .replay-btn.replay-play-btn:not(.play-active) { background: #202c42; }
  .replay-bar .replay-btn.replay-play-btn:not(.play-active):not(:disabled):hover { background: #2b3549; }
  .replay-bar .replay-btn.play-active { background: var(--accent); color: #101626; }
  /* 保存: 主操作の黄 */
  .replay-bar .replay-save-btn { background: #f3ce46; color: #242013; }
  .replay-bar .replay-save-btn:not(:disabled):hover { background: #ffe16d; }
  /* 範囲: 選んでいる間は accent の線、決まった後は accent の文字（従来どおり） */
  .replay-bar .pc-record-btn.recording { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
  .replay-bar .pc-record-btn.has-range { background: rgba(174, 197, 255, 0.12); color: var(--accent); }
  .replay-bar .pc-range-clear-btn { padding: 0 9px; }
  .replay-bar .replay-ico { margin-right: 0; } /* 間は gap で取る */
  /* 1段に収める（2026-10-21 B〜E で線アイコンを足して幅が約100px増え、1200〜1280px で2段に折り返していた）。
     ・ボタンの間とまとまりの区切りを詰める
     ・「見る」のまとまりの基準の幅を 0 にし、スライダーは残りの幅で伸ばす（最低 100px。入らなければ折り返す）。
       基準が auto だと、スライダー本来の幅（約130px）で折り返しを判定してしまう */
  .replay-bar,
  .replay-bar .replay-group { gap: 4px; }
  .replay-bar .replay-group + .replay-group { padding-left: 6px; margin-left: 2px; }
  .replay-bar .replay-group:first-child { flex: 1 1 0; min-width: min-content; } /* 中身より縮めない（縮めるとボタンが重なる） */
  .replay-bar .replay-slider { width: 0; min-width: 100px; } /* 本来の幅（約130px）で中身の幅を数えないよう width:0。幅は flex で伸ばす */
}
/* 線アイコン（再生バー）。components.css の span の一律の色を打ち消し、文字の色に合わせる。
   768px 未満（横向きスマホなど、ボタンが flex でない幅）は margin で文字との間を空ける */
.replay-ico { display: inline-flex; flex: none; color: inherit; margin-right: 6px; vertical-align: -2px; }
.replay-ico svg { display: block; }

/* マイデッキから開いたときの通知の欄（#deckHandoffStatus・static/shared/deck-handoff.js）。
   2026-10-21: 後から差し込まれ、読み込み後の文が2行に折り返して盤面全体を押し下げていた（スマホで CLS 0.19）。
   サーバーが空の欄を最初から置き、高さはここで固定する（文の長さでは変えない・はみ出しは「…」）。
   PC は1行（リンクの高さ＋上下8px）、スマホ縦は デッキ名／状態 の2行（枚数は出さない）。失敗の文だけは折り返して全文を見せる。
   色は以前の JS の直書きと同じ（背景 --bg-card・文字 --main-color・リンクは .sol-ext-link と同じ #202c42／#aec5ff）。 */
.sol-handoff-status {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  height: calc(1.6em + 28px);
  padding: 8px 12px;
  overflow: hidden;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.6;
  background: var(--bg-card, #171f31);
  color: var(--main-color, #eff3fb);
}
/* 一人回しの汎用 span 色（#333）を上書きする */
.sol-handoff-status span { color: inherit; }
.sol-handoff-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sol-handoff-name:not(:empty) { margin-right: .25em; }
.sol-handoff-back {
  flex: none;
  display: inline-block;
  padding: 6px 12px;
  background: #202c42;
  color: #aec5ff;
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  font: inherit;
  outline-offset: 3px;
}
.sol-handoff-retry {
  flex: none;
  padding: 8px 12px;
  min-height: 40px;
  color: var(--main-color, #eff3fb);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
  outline-offset: 3px;
}
.sol-handoff-status.is-error { height: auto; min-height: calc(1.6em + 28px); }
.sol-handoff-status.is-error .sol-handoff-text { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 767px) and (orientation: portrait) {
  .sol-handoff-status { height: calc(3.2em + 16px); }
  .sol-handoff-status:not(.is-error) .sol-handoff-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 枚数は2行目に収まらないので出さない（同じ画面の「デッキ N」「EXデッキ N」に出ている） */
  .sol-handoff-counts { display: none; }
  .sol-handoff-status.is-error { height: auto; min-height: calc(3.2em + 16px); }
}