/*
 * フレネミー将棋 v2 — 名鑑の感情・性格のランキング（features/book/rank-extra.js。I48 §6・I47 N8 ZUKAN・PR5）。
 * 選ぶ部品・行は BOOK の bk-*（要件 F ①で寄せた）。ここは見出し・行の顔・「あなた」の強調だけ。
 * style.css の変数（--surface・--border・--bg・--bg-2・--text・--text-2）と ui/tiers.css の --tier-* が前提。
 */
.rx-tab { margin: 0; padding: 4px 0 24px; }
.rx-h2 { margin: 8px 0 4px; font-size: 1.1rem; }

/* 選択・定義・行は棋風のランキングと同じ bk-*（ui/book-rank.css・ui/book-ui.css。要件 F ①）。ここは行に足した顔・説明・解放の条件だけ */
.bk-rank-item.bk-rank-has-face { display: flex; align-items: center; gap: 8px; }
.bk-rank-has-face > .bk-rank-main { flex: 1; min-width: 0; }
.bk-rank-face { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.bk-rank-face-mask { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px dashed var(--border); border-radius: 50%; color: var(--text-2); font-size: 0.68rem; font-weight: 700; }
.bk-rank-desc { color: var(--text-2); font-weight: 400; }
.bk-rank-lock { grid-column: 1 / -1; color: var(--text-2); font-size: 0.7rem; overflow-wrap: anywhere; }

/* 「あなた」（表に差し込む・強調） */
.rx-me { background: var(--accent-soft); border: 2px solid var(--accent); border-radius: 8px; }
.rx-me-face { font-size: 1.4rem; }
.rx-me-note { margin: 4px 0; padding: 4px 8px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 0.85rem; overflow-wrap: anywhere; }
/* 押せる「あなた」のカード（押すと表の「あなた」へ）。青は使わない（このページの青はマイナスの棒） */
button.rx-me-card { display: block; width: 100%; box-sizing: border-box; text-align: left; color: var(--text); font: inherit; font-size: 0.85rem; min-height: 44px; border: 0; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; cursor: pointer; }
button.rx-me-card:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.rx-me-go { color: var(--accent); font-weight: 700; }
/* 一言のボタン（「値」で比べる → ・表の「あなた」へ ↓） */
button.rx-me-act { display: inline; padding: 2px 4px; min-height: 0; color: var(--accent); font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
/* 局数が足りない「あなた」（参考）は枠を点線に。飛んだ先は focus の枠 */
.rx-me-low, .bk-me-low .rx-me { border-style: dashed; }
.rx-me:focus, .bk-me:focus { outline: none; }
.rx-me:focus, .bk-me:focus .rx-me { box-shadow: 0 0 0 3px var(--accent); }