/*
 * フレネミー将棋 v2 — 戦績・称号の画面（features/records/。I47 N8 ZUKAN）。今は称号画面（medals-page.js）の分だけ。
 * 写した元: 旧 features/records/records.css の共通（.rec-*）・段位（.med-rank-*・.med-ladder）・コンプリート（.med-big・.med-prog）・
 * 特別称号（.med-ach-*）。級の色は ui/tiers.css の --tier-* と .tier-<key>（--t1・--t2・--tink・--tbg）で書く（旧の .med-ach-<color> は .tier-<key> に）。
 * 戦績の画面（records-page.js・rating-chart.js・rule-map.js）の分は下の「戦績」の節（旧の .rec-rating・.rec-tile・.rec-class・.rec-chart・
 * .rec-game・.rm-*）。style.css の変数（--surface ほか）が前提。
 */
:root {
  --medal-empty: rgba(110, 98, 80, 0.07);
  --medal-empty-border: rgba(110, 98, 80, 0.16);
  --rec-win: #1d8a4a;
  --rec-loss: #c0392b;
  --adv-good-ink: #b4501a;
  --adv-bad-ink: #2a63b8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --medal-empty: rgba(200, 205, 220, 0.05);
    --medal-empty-border: rgba(200, 205, 220, 0.12);
    --rec-win: #3ec27a;
    --rec-loss: #ff7a6b;
    --adv-good-ink: #ffaa70;
    --adv-bad-ink: #8fbaff;
  }
}
:root[data-theme='dark'] {
  --medal-empty: rgba(200, 205, 220, 0.05);
  --medal-empty-border: rgba(200, 205, 220, 0.12);
  --rec-win: #3ec27a;
  --rec-loss: #ff7a6b;
  --adv-good-ink: #ffaa70;
  --adv-bad-ink: #8fbaff;
}

/* ===== 共通 ===== */
.rec-page { max-width: var(--page-wide); margin: 0 auto; padding: 8px 12px 32px; /* 狭い画面で端に付かない（凍結 P4 の煙テスト） */ }
.rec-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  padding: 12px 14px 14px;
  margin-top: 12px;
  box-shadow: var(--shadow);
}
.rec-h2 { font-size: 0.85rem; color: var(--text-2); margin: 0 0 8px; font-weight: 600; }
.rec-h2-sub { font-weight: 500; font-size: 0.75rem; }
.rec-h3 { font-size: 0.78rem; color: var(--text-2); margin: 12px 0 4px; font-weight: 600; }
.rec-note { color: var(--text-2); font-size: 0.78rem; margin: 10px 0 0; line-height: 1.5; }

/* ===== 段位 ===== */
.med-rank-card { overflow: hidden; }
/* 段位の節の見出し: 盤の切り替え（5五 が先・目立たせる）と「段位」 */
.med-rank-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.med-rank-head .rec-h2 { margin: 0; }
.med-rank-tabs { margin: 0; flex: none; }
.med-rank-now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.med-rank-big { display: inline-flex; align-items: center; gap: 6px; font-size: 1.5rem; padding: 4px 16px 4px 12px; border-radius: 999px; border: 1px solid transparent; }
.med-rank-big b { letter-spacing: 0.08em; }
.med-rank-desc { color: var(--text-2); font-size: 0.82rem; }
.med-rank-date { font-size: 0.78rem; color: var(--text-2); font-variant-numeric: tabular-nums; flex-basis: 100%; }
.med-rank-big[class*='tier-'], .med-step-dot[class*='tier-'] { background: var(--tbg); color: var(--tink); border-color: var(--t2); }
.med-rank-big.tier-platinum {
  background-size: 200% 100%;
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px color-mix(in srgb, var(--t2) 60%, transparent);
  animation: med-shimmer 5s linear infinite;
}
/* はしご（帯の数だけ横に並ぶ） */
.med-ladder { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: relative; }
.med-ladder::before { content: ''; position: absolute; left: 4.5%; right: 4.5%; top: 8px; height: 2px; background: var(--border); }
.med-step { display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; font-size: 0.75rem; color: var(--text-2); }
.med-step-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); display: inline-block; flex: none; }
.med-step:not(.is-done) .med-step-dot { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: none; animation: none; }
.med-step.is-done .med-step-dot { border-color: transparent; }
.med-step.is-now .med-step-dot { transform: scale(1.3); box-shadow: 0 0 0 3px var(--accent-soft); }
.med-step.is-now .med-step-name { color: var(--text); font-weight: 800; }
.med-step.is-done .med-step-name { color: var(--text); }
.med-rank-dates { list-style: none; margin: 6px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.74rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.med-rank-dates li { display: inline-flex; align-items: center; gap: 4px; }
.med-rank-dates b { color: var(--text); }
.med-rank-dates .med-step-dot { width: 10px; height: 10px; border-width: 1px; }
.med-rank-conds { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.med-rank-cond { display: grid; grid-template-columns: 18px 1fr auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; font-size: 0.8rem; }
.med-rank-check { grid-row: 1 / span 2; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; }
.med-rank-cond.is-ok .med-rank-check { background: var(--rec-win); border-color: var(--rec-win); color: #fff; }
.med-rank-cond.is-ok .med-rank-label { color: var(--text-2); }
.med-rank-val { font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--text-2); white-space: nowrap; }
.med-rank-track { grid-column: 2 / span 2; height: 5px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.med-rank-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }
.med-rank-cond.is-ok .med-rank-fill { background: var(--rec-win); }
.med-rank-max { font-weight: 800; color: var(--accent); }
.med-rank-all { margin-top: 10px; font-size: 0.8rem; }
.med-rank-all summary { cursor: pointer; color: var(--text-2); font-weight: 600; }
.med-rank-h4 { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; font-size: 0.85rem; }
.med-rank-h4 small { color: var(--text-2); font-weight: 500; }
.med-rank-h4 .med-step-dot { width: 14px; height: 14px; }
.med-rank-ok { color: var(--rec-win); font-size: 0.72rem; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== コンプリート率 ===== */
.med-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.med-big-pct {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--medal-gold-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.med-big-sub { color: var(--text-2); font-size: 0.82rem; }
.med-prog { margin-top: 8px; }
.med-prog-track { height: 12px; border-radius: 6px; background: var(--bg-2); overflow: hidden; margin-top: 3px; }
.med-prog-fill { height: 100%; border-radius: 6px; background: var(--medal-rainbow); background-size: 200% 100%; animation: med-shimmer 5s linear infinite; transition: width 0.6s ease; }
.med-zukan-link { margin: 12px 4px 0; }

/* ===== 特別称号 ===== */
.med-titles-online { border-color: color-mix(in srgb, var(--tier-platinum-edge) 45%, var(--border)); }
.med-ach-note { margin: -2px 0 8px; }
.med-ach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.med-ach {
  padding: 0;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
/* カードの中身（押せるカードは button）: 1 行目 = 絵文字・名前・級の札、2 行目 = 段階の点。取得日から下はカードの左の端から（2026-10 修正依頼） */
.med-ach-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
}
button.med-ach-body { cursor: pointer; border-radius: 12px; }
button.med-ach-body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.med-ach-icon { grid-row: 1 / span 2; font-size: 1.6rem; line-height: 34px; text-align: center; filter: grayscale(1); opacity: 0.4; }
.med-ach-name { grid-column: 2; min-width: 0; font-weight: 800; font-size: 0.85rem; line-height: 1.3; }
.med-ach-tier { grid-column: 3; grid-row: 1; justify-self: end; }
.med-ach-marks { grid-column: 2 / -1; grid-row: 2; }
.med-ach-dates, .med-ach-desc, .med-ach-next, .med-ach-prog { grid-column: 1 / -1; }
.med-ach-dates { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
/* 取った段階 1 つ: 1 行目 = ✓級と日・満たした値（右）、2 行目 = その段階の条件 */
.med-ach-step { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.med-ach-step .med-ach-num { margin-left: auto; }
.med-ach-step .med-ach-desc { flex-basis: 100%; }
.med-ach-dates + .med-ach-next { margin-top: 4px; }
.med-ach-desc { color: var(--text-2); font-size: 0.7rem; line-height: 1.35; }
.med-ach-prog { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.med-ach-track { flex: 1; height: 5px; border-radius: 3px; background: var(--medal-empty); overflow: hidden; }
.med-ach-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.med-ach-num { font-size: 0.75rem; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.med-ach-done { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.72rem; font-weight: 700; color: inherit; }
/* 称号の詳細（title-card.js の openTitleDetail） */
.med-detail-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 1.05rem; margin: 0 0 6px; }
.med-detail-desc { margin: 0 0 8px; font-size: 0.82rem; color: var(--text-2); }
.med-detail-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.med-detail-table th, .med-detail-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.med-detail-table thead th { font-size: 0.72rem; color: var(--text-2); font-weight: 700; }
.med-detail-table tbody th { white-space: nowrap; font-weight: 700; }
.med-detail-table tr.is-none td { color: var(--text-2); }
.med-dt-num, .med-dt-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 取った称号: 単発は金、段階つきは級の色（プラチナの虹は ui/tiers.css の .med-ach.is-earned.tier-platinum） */
.med-ach.is-earned {
  background: linear-gradient(135deg, var(--medal-gold-1), color-mix(in srgb, var(--medal-gold-2) 70%, var(--medal-gold-1)));
  border-color: var(--medal-gold-2);
  color: var(--medal-gold-ink);
}
.med-ach.is-earned.tier-bronze, .med-ach.is-earned.tier-silver, .med-ach.is-earned.tier-gold {
  background: linear-gradient(135deg, var(--t1), color-mix(in srgb, var(--t2) 55%, var(--t1)));
  border-color: var(--t2);
  color: var(--tink);
}
.med-ach.is-earned .med-ach-icon { filter: none; opacity: 1; }
.med-ach.is-earned .med-ach-desc, .med-ach.is-earned .med-ach-num { color: inherit; opacity: 0.8; }
.med-ach.is-earned .med-ach-track { background: rgba(255, 255, 255, 0.45); }
.med-ach.is-earned::after {
  content: '';
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-18deg);
  animation: med-shine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes med-shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }

@media (max-width: 480px) {
  /* 段階つきの称号は横幅が要るので 1 列 */
  .med-ach-grid { grid-template-columns: 1fr; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .med-ach.is-earned::after { display: none; }
  .med-prog-fill, .med-rank-big { animation: none !important; }
}

/* ===== コンプリート率の表（種別 × 級。束 5） ===== */
.med-comp-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.med-comp-table th, .med-comp-table td { padding: 3px 4px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.med-comp-table th:first-child { text-align: left; }
.med-comp-table thead th { color: var(--text-2); font-weight: 600; }

/* ===== 戦績（/records。写した元: 旧 features/records/records.css の レート・通算・一覧・ルールマップ） ===== */
.rec-empty { color: var(--text-2); font-size: 0.88rem; margin: 6px 0 2px; }
/* レート */
.rec-rating-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rec-rating-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rec-rating-val { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.rec-rank-badge { align-self: center; font-weight: 800; font-size: 0.9rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); }
.rec-rank-badge[class*='tier-'] { background: var(--tbg); color: var(--tink); border-color: var(--t2); }
.rec-rank-badge.tier-platinum { background-size: 200% 100%; border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 10px color-mix(in srgb, var(--t2) 60%, transparent); animation: med-shimmer 5s linear infinite; }
.rec-next-rank { color: var(--accent); font-weight: 600; }
.rec-prov { font-size: 0.72rem; color: var(--text-2); border: 1px dashed var(--border); border-radius: 6px; padding: 0 5px; align-self: center; }
.rec-rating-sub { display: flex; gap: 12px; margin: 0; }
.rec-rating-sub div { text-align: right; }
.rec-rating-sub dt { font-size: 0.7rem; color: var(--text-2); }
.rec-rating-sub dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-next { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-2); }
/* レートの推移 */
.rec-chart { display: block; width: 100%; height: auto; margin-top: 2px; --chart-c: var(--accent); }
.rec-chart-line { fill: none; stroke: var(--chart-c); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.rec-chart-area { fill: color-mix(in srgb, var(--chart-c) 14%, transparent); stroke: none; }
.rec-chart-grid { stroke: var(--border); stroke-width: 0.8; opacity: 0.6; }
.rec-chart-base { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.8; }
.rec-chart-axis { stroke: var(--border); stroke-width: 1; }
.rec-chart-tick { fill: var(--text-2); font-size: 10px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.rec-chart-tick-base { font-weight: 700; fill: var(--text); }
.rec-chart-th { stroke: var(--medal-gold-2); stroke-dasharray: 2 3; stroke-width: 1; opacity: 0.7; }
.rec-chart-thl { fill: var(--medal-gold-ink); font-size: 9.5px; font-weight: 700; font-family: var(--font); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.rec-chart-dot { fill: var(--chart-c); stroke: var(--surface); stroke-width: 2; }
.rec-chart-start { fill: var(--surface); stroke: var(--chart-c); stroke-width: 1.5; }
.rec-chart-peak { fill: var(--medal-gold-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .rec-chart-thl { fill: var(--medal-gold-1); }
}
:root[data-theme='dark'] .rec-chart-thl { fill: var(--medal-gold-1); }
/* 通算・級・盤・手番 */
.rec-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rec-tile { background: var(--bg-2); border-radius: 10px; padding: 6px 2px; text-align: center; display: flex; flex-direction: column; }
.rec-tile-v { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.rec-tile-l { font-size: 0.7rem; color: var(--text-2); }
.rec-tile-win .rec-tile-v { color: var(--rec-win); }
.rec-tile-loss .rec-tile-v { color: var(--rec-loss); }
.rec-tile-rate .rec-tile-v { color: var(--accent); }
.rec-classes { margin-top: 10px; display: grid; gap: 6px; }
.rec-class-row { display: grid; grid-template-columns: 12px 6.5em 1fr 64px; align-items: center; gap: 6px; font-size: 0.85rem; }
.rec-class-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-class-wld { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.8rem; }
.rec-class-bar { height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.rec-class-fill { display: block; height: 100%; background: var(--rec-win); border-radius: 3px; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: var(--border); }
.rec-dot[class*='tier-'] { background: var(--tbg); border: 1px solid var(--t2); }
.rec-dot-online { background: #8a7ad8; }
.rec-bands-all { margin-top: 10px; font-size: 0.8rem; }
.rec-bands-all summary { cursor: pointer; color: var(--text-2); font-weight: 600; }
/* 通信対戦の相手・最近の対局 */
.rec-opp-list, .rec-game-list { list-style: none; margin: 0; padding: 0; }
.rec-opp-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border); font-size: 0.88rem; }
.rec-opp-row:first-child { border-top: none; }
.rec-opp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rec-opp-id { color: var(--text-2); font-weight: 400; margin-left: 4px; font-size: 0.72rem; }
.rec-opp-wld { font-variant-numeric: tabular-nums; }
.rec-opp-date { color: var(--text-2); font-size: 0.75rem; }
.rec-game-list li + li { margin-top: 6px; }
.rec-game { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); border: 1px solid transparent; }
.rec-game-l1, .rec-game-l2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rec-game-l2 { flex-wrap: wrap; row-gap: 2px; font-size: 0.76rem; }
.rec-game-face { width: 28px; height: 28px; flex: none; }
.rec-game-side { font-size: 0.72rem; font-weight: 800; white-space: nowrap; padding: 0 5px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); }
.rec-game-rate { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-game-rate.up { color: var(--rec-win); }
.rec-game-rate.down { color: var(--rec-loss); }
.rec-game-opp { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rec-game-date { margin-left: auto; color: var(--text-2); font-size: 0.75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 初期局面の評価値の札（gap #34。旧 records.css :226-229） */
.rec-game-eval { white-space: nowrap; font-variant-numeric: tabular-nums; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border); color: var(--text-2); }
.rec-ge-good { color: var(--adv-good-ink); border-color: color-mix(in srgb, var(--adv-good-ink) 40%, var(--border)); }
.rec-ge-bad { color: var(--adv-bad-ink); border-color: color-mix(in srgb, var(--adv-bad-ink) 40%, var(--border)); }
.rec-ge-none { opacity: 0.75; }
.rec-game-rule, .rec-game-meta { color: var(--text-2); font-size: 0.75rem; white-space: nowrap; }
.rec-chip { font-size: 0.72rem; font-weight: 700; padding: 1px 8px; border-radius: 6px; white-space: nowrap; color: #fff; background: var(--text-2); }
.rec-chip-win { background: var(--rec-win); }
.rec-chip-loss { background: var(--rec-loss); }
.rec-chip-draw { background: #7b7f8f; }
.rec-chip-local, .rec-chip-none { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.rec-more { width: 100%; margin-top: 8px; }
.rec-data-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rec-data-btns button { flex: 1 1 auto; }
.rec-links { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 4px 0; }
/* ルールマップ（盤のタブ・ルール 10 × 手番 2。色 = .tier-<key>。プラチナの虹は ui/tiers.css の .rm-cell.tier-platinum） */
/* 戦績の盤の切り替え（要件定義 A。見出しの下に 1 つ。390px でも 1 行・押せる高さ 44px・動きは付けない） */
.rec-board { margin: 0 0 12px; }
.rec-board-tabs { margin-bottom: 4px; }
.med-rank-tabs { width: auto; flex: 1 1 100%; margin: 0; }
.rec-board-cap { margin: 0; font-size: 0.85rem; color: var(--text-2); }
.rec-board-cap b { color: var(--text); margin-right: 4px; }
.rm-grid { display: grid; gap: 6px; margin: 8px 0 4px; }
.rm-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: stretch; }
.rm-head { font-size: 0.78rem; color: var(--text-2); text-align: center; }
.rm-label { font-size: 0.85rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
.rm-cell { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg-2); color: var(--text); }
.rm-cell[class*='tier-']:not(.tier-platinum) { border-color: var(--t2); background: color-mix(in srgb, var(--t2) 22%, var(--surface)); }
.rm-body { width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.15; padding: 2px; }
/* マスの本体を押すと挑戦（I47 N7-11。button のときだけ。色はマスのまま） */
button.rm-body { border: 0; border-radius: 8px; background: transparent; color: inherit; font-weight: inherit; cursor: pointer; }
button.rm-body:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 10%, transparent); }
button.rm-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rm-side { display: none; font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.rm-count { display: flex; flex-direction: column; align-items: center; }
.rm-count b { font-size: 0.86rem; white-space: nowrap; }
.rm-wld { font-size: 0.74rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-wld.is-none, .rm-zero { color: var(--text-2); }
.rm-fox { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; min-height: 36px; padding: 2px 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.74rem; font-weight: 600; }
.rm-last-face-wrap { flex: none; display: inline-flex; }
.rm-last-face { width: 24px; height: 24px; display: block; }
.rm-last-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-last-res { flex: none; padding: 0 6px; }
button.rm-fox { text-align: left; cursor: pointer; font: inherit; font-size: 0.74rem; font-weight: 600; }
button.rm-fox:hover { border-color: var(--accent); }
button.rm-fox:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rm-last-go { flex: none; font-size: 0.8rem; }
.rm-fox-head { flex: none; color: var(--text-2); }
.rm-fox-rate { flex: none; font-variant-numeric: tabular-nums; color: var(--text-2); }
/* 合計の行（手番ごと。ほかの行と同じカード） */
.rm-total .rm-label { font-weight: 800; }
.rm-lock { font-size: 0.74rem; color: var(--text-2); text-align: left; }
.rm-row.is-locked .rm-label { color: var(--text-2); }
.rm-cell.is-locked { border-style: dashed; background: var(--bg); align-items: center; justify-content: center; }
.rm-lock-cell { grid-column: 2 / -1; }
.rm-legend { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.75rem; margin: 4px 0 0; }
.rm-lg { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--t2, var(--border)); background: var(--tbg, transparent); color: var(--tink, var(--text)); }
.rm-lg-label { font-weight: 700; color: var(--text-2); }
.rm-start { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft, var(--bg-2)); font-size: 0.85rem; font-weight: 600; }
@media (max-width: 600px) {
  .rm-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rm-head { display: none; }
  .rm-label { white-space: normal; font-weight: 700; margin-top: 6px; }
  .rm-body { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; column-gap: 8px; row-gap: 0; min-height: 40px; padding: 2px 4px; }
  .rm-side { display: inline; }
  .rm-count { flex-direction: row; align-items: baseline; gap: 4px; }
  .rm-cell.is-locked { flex-direction: row; justify-content: flex-start; gap: 8px; }
  .rm-lock-cell { grid-column: auto; }
}
@media (max-width: 420px) {
  .rec-rating-val { font-size: 2.2rem; }
  .rec-tile-v { font-size: 1.05rem; }
  .rec-class-row { grid-template-columns: 12px 6.6em 1fr 40px; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-rank-badge, .rm-cell { animation: none !important; }
}
.rec-game-go { margin-left: auto; color: var(--text-2); font-size: 0.75rem; white-space: nowrap; }
.rec-games-link { margin: 8px 0 0; text-align: right; }

/* あなたの指し方（my-kpi.js。名鑑のランキングの KPI の自分の値） */
.rec-kpi-lede { margin: 0 0 8px; }
.rec-kpi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rec-kpi-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 10px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.rec-kpi-name { overflow-wrap: anywhere; }
.rec-kpi-val { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.rec-kpi-n { color: var(--text-2); font-size: 0.72rem; }
.rec-kpi-low { font-style: italic; }
button.rec-kpi-link { padding: 2px 0 2px 4px; font-size: 0.75rem; white-space: nowrap; color: var(--accent); }
.rec-kpi-row.rec-kpi-row-pieces { grid-template-columns: minmax(0, 1fr); }
.rec-kpi-pieces { display: flex; flex-wrap: wrap; gap: 4px; }
.rec-kpi-piece { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
button.rec-kpi-piece:hover { border-color: var(--accent); }
.rec-kpi-pc { font-weight: 700; }
.rec-kpi-pending { padding: 1px 6px; border: 1px dashed var(--border); border-radius: 999px; color: var(--text-2); font-size: 0.7rem; font-weight: 400; white-space: nowrap; }
@media (max-width: 420px) {
  .rec-kpi-row { gap: 2px 6px; }
  .rec-kpi-n { font-size: 0.68rem; }
}
/* ルールマップの行の名前（押すとそのルールの棋譜。束 U） */
.rm-kifu { font: inherit; color: inherit; padding: 0; min-height: 0; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
/* あなたの指し方: 値を押すとその指標のランキング（R1 #25） */
.rec-kpi-val-btn { min-height: 40px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--accent); font: inherit; cursor: pointer; }
.rec-kpi-more { margin: 8px 0 0; text-align: right; }
/* 戦績のリンク・ルールマップの行の名前: 押せる高さ 40px（R1 #26） */
.rec-page button.link { min-height: 40px; display: inline-flex; align-items: center; }
/* まだ記録のない欄はたたむ（R1 #25） */
.rec-fold > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; list-style: none; }
.rec-fold > summary::-webkit-details-marker { display: none; }
.rec-fold > summary::before { content: '▸'; color: var(--text-2); }
.rec-fold[open] > summary::before { content: '▾'; }
.rec-fold > summary .rec-h2 { margin: 0; }
.rec-fold > summary .rec-fold-note { font-size: 0.8rem; color: var(--text-2); }
/* ルールマップの解放の条件: 1 行に 1 つ・進み具合のチェック（R1 #25） */
.rm-lock-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.rm-lock-line { display: flex; gap: 6px; align-items: baseline; font-size: 0.82rem; line-height: 1.45; overflow-wrap: anywhere; }
.rm-lock-line.is-met { color: var(--text-2); }
.rm-lock-mark { flex: none; width: 1.2em; text-align: center; }
.rm-lock-mode { font-size: 0.8rem; font-weight: 700; color: var(--text-2); }