/* ===== polish3 (2026-10-10夜) — ?v=3 ===== */
/* 1. 余白の呼吸 — ヒーローカード + パネル余白 + 統計の軽量化 */
.p3x.d .pg{gap:18px;padding:28px 30px 24px}
.p3x.m .pg{gap:10px;padding:14px 14px 12px}
.hero3{
  display:flex;flex-direction:column;gap:10px;
  padding:14px 16px 12px;
  border-radius:16px;
  background:linear-gradient(165deg,
    color-mix(in srgb,var(--tile) 88%,transparent) 0%,
    color-mix(in srgb,var(--panel) 70%,var(--tile)) 100%);
  border:1.5px solid var(--tile-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
[data-skin=c] .hero3{
  background:linear-gradient(165deg,rgba(18,28,58,.72) 0%,rgba(10,18,40,.55) 100%);
  border-color:rgba(63,224,232,.28);
  box-shadow:inset 0 1px 0 rgba(63,224,232,.12),0 0 24px rgba(63,224,232,.08);
}
.p3x .hero3 .sc{margin:0}
.p3x .hero3 .hl{margin:0;font-size:15px;line-height:1.35;color:var(--ink-2)}
.p3x.d .hero3 .hl{font-size:15.5px}
.p3x .hero3 .g2{margin-top:2px}
.p3x.m .hero3{padding:10px 12px 9px;gap:6px;border-radius:14px}
.p3x.m .hero3 .hl{display:none} /* スマホはスコア帯を優先、ひとことはデスクトップ */
.p3x.m .sc{padding-right:88px} /* ランクメダル余白 */

/* 統計タイルの視覚重量を落とす */
.p3x .stats{gap:8px}
.p3x .stat{
  padding:8px 8px 7px;
  background:transparent;
  border:1.5px solid color-mix(in srgb,var(--tile-line) 70%,transparent);
  box-shadow:none;
}
.p3x .stat .sv b{font-size:18px;font-weight:800}
.p3x .stat .sl{font-size:10.5px;opacity:.85}
.p3x .stat .si{opacity:.7;transform:scale(.92)}
.p3x.m .stats.s4{gap:6px}
.p3x.m .stat{padding:6px 5px}
.p3x.m .stat .sv b{font-size:14px}

/* 2. 振り返りの明瞭さ — 入力→正解の2段対比 */
.p3x .miss{
  padding:12px 14px;
  gap:12px;
  align-items:stretch;
}
.p3x .miss .mt{display:flex;flex-direction:column;gap:4px}
.p3x .cmp3{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:3px 10px;
  margin-top:6px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(0,0,0,.18);
  border:1px solid color-mix(in srgb,var(--tile-line) 80%,transparent);
}
[data-skin=c] .p3x .cmp3{background:rgba(4,10,28,.45);border-color:rgba(63,224,232,.15)}
.p3x .cmp3 .c3l{
  font:800 10px/1.2 var(--font-ja);
  letter-spacing:.08em;
  color:var(--ink-3);
  align-self:center;
  white-space:nowrap;
}
.p3x .cmp3 .c3l.bad{color:var(--ng)}
.p3x .cmp3 .c3l.good{color:var(--ok)}
.p3x .cmp3 .c3v{
  font:900 15px/1.25 var(--font-ja);
  min-width:0;
}
.p3x .cmp3 .c3v.bad{
  color:var(--ng);
  text-decoration:line-through 2px solid color-mix(in srgb,var(--ng) 55%,transparent);
  opacity:.85;
}
.p3x .cmp3 .c3v.good{color:var(--ok)}
.p3x .cmp3 .c3v .r{
  font:800 11px/1 var(--font-latin);
  margin-left:6px;
  color:var(--ink-2);
  font-weight:700;
}
.p3x .miss .myou{display:none} /* 旧1行は非表示、cmp3 に置換 */
.p3x .mbtn{
  background:var(--pri);color:var(--pri-ink);border-color:var(--pri);
  align-self:center;
}
.p3x .mbtn svg{color:var(--pri-ink)}
.p3x.d .miss.cmp .mjp{font-size:22px}
.p3x.d .miss.cmp{padding:10px 12px}
.p3x .more{
  margin-top:2px;
  padding:6px 8px;
  border-radius:8px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  justify-content:flex-start;
}
.p3x.m .cmp3{padding:6px 8px;gap:2px 8px;margin-top:4px}
.p3x.m .cmp3 .c3l{font-size:9px}
.p3x.m .cmp3 .c3v{font-size:13px}
.p3x.m .cmp3 .c3v .r{font-size:10px;margin-left:4px}

/* 3. 次への一歩 — 主ボタン主役、副は ghost */
.p3x .acts{gap:12px}
.p3x .ah2{margin-bottom:2px}
.p3x .btn.pri,
.p3x .btn.pri2{
  box-shadow:0 6px 0 var(--pri-edge),0 14px 28px rgba(0,0,0,.32)!important;
  transform:translateY(0);
}
[data-skin=c] .p3x .btn.pri,
[data-skin=c] .p3x .btn.pri2{
  box-shadow:0 6px 0 var(--pri-edge),0 0 28px rgba(63,224,232,.65),0 14px 28px rgba(0,0,0,.28)!important;
}
.p3x.d .btn.pri2{height:76px!important}
.p3x.d .btn.pri:not(.pri2){height:70px;font-size:21px}

/* ghost / outline 副ボタン */
.p3x .btn.ghost,
.p3x .btn.sec.ghost,
.p3x .btn.ico.ghost{
  background:transparent!important;
  border:1.5px solid color-mix(in srgb,var(--sec-line) 85%,transparent)!important;
  box-shadow:none!important;
  color:var(--ink-2)!important;
  opacity:.92;
}
.p3x .btn.ghost svg,
.p3x .btn.sec.ghost svg,
.p3x .btn.ico.ghost svg{color:var(--ink-3)!important;opacity:.9}
.p3x .btn.retry2.ghost{
  border-color:color-mix(in srgb,var(--hl) 55%,transparent)!important;
}
.p3x .btn.retry2.ghost .rt{opacity:.9}
.p3x.d .acts .row .btn{height:48px;font-size:14px}
.p3x.d .acts .row .btn.ico{flex:0 0 52px}

/* スマホ下段の混雑緩和 */
.p3x.m .acts{gap:8px}
.p3x.m .btn.pri2{height:56px!important}
.p3x.m .btn.pri:not(.pri2){height:50px;font-size:15.5px}
.p3x.m .acts .row{gap:6px}
.p3x.m .acts .row .btn{height:40px;font-size:12px;padding:0 6px}
.p3x.m .acts .row .btn.ico{flex:0 0 40px}
.p3x.m .btn.retry2 .rt{font-size:8.5px}
.p3x.m .rpanel{top:360px} /* パネルを少し上げて主ボタン余白 */

/* 任意: 舞台の星・ランク周りにソフト背景（止め絵のまま） */
.p3x .reveal .stars2{
  padding:6px 14px;
  border-radius:999px;
  background:rgba(6,14,36,.82);
  border:1.5px solid rgba(255,200,87,.45);
  margin-top:12px;
  box-shadow:0 0 20px rgba(255,200,87,.18);
}
.p3x .reveal{
  /* ランク周りのわずかな余白感（レイアウトは壊さない） */
}
.p3x.m .rk .stars2{
  padding:4px 10px;
  border-radius:999px;
  background:rgba(6,14,36,.75);
  border:1px solid rgba(255,200,87,.4);
  margin-top:4px;
}

/* strip / rv の呼吸 */
.p3x.d .rv{gap:10px}
.p3x .strip2{margin-top:2px}

/* log / share 軽追随 */
.p3x.view-log .rpanel .pg{padding-top:20px}
.p3x.view-log .strip2{
  margin:0 0 8px;
  background:color-mix(in srgb,var(--tile) 60%,transparent);
}
.p3x.view-share .rkcol .stars2{
  padding:4px 10px;border-radius:999px;
  background:rgba(6,14,36,.55);
  border:1px solid rgba(255,200,87,.35);
}
.p3x.view-share .rkcol .g2{
  padding:6px 8px;border-radius:10px;
  background:rgba(0,0,0,.12);
}

/* --- polish3 layout fix: cmp3 が .rv(overflow:hidden) に収まるよう圧縮 --- */
.p3x .cmp3{padding:5px 8px;gap:2px 8px;margin-top:4px;border-radius:8px}
.p3x .cmp3 .c3l{font-size:9.5px}
.p3x .cmp3 .c3v{font-size:13.5px;line-height:1.2}
.p3x .cmp3 .c3v .r{font-size:10px;margin-left:5px}
.p3x.m .cmp3{padding:4px 7px;gap:1px 7px;margin-top:3px}
.p3x.m .cmp3 .c3l{font-size:9px}
.p3x.m .cmp3 .c3v{font-size:12.5px}

/* 中文行は対比と役割が重なるので p3 では隠す（読みは mrm / 正解のローマ字で足りる） */
.p3x .miss .mzh{display:none}

/* ヒーローを少し薄くして振り返り余白を確保 */
.p3x.d .hero3{padding:12px 14px 10px;gap:8px}
.p3x.d .pg{gap:14px;padding:24px 28px 20px}
.p3x.d .btn.pri2{height:70px!important}
.p3x.d .btn.pri:not(.pri2){height:64px;font-size:20px}
.p3x.d .acts{gap:10px}
.p3x.d .acts .row .btn{height:46px}

/* ミスカード本体も少し詰める */
.p3x.d .miss{padding:10px 12px;gap:10px}
.p3x.d .miss .mjp{font-size:22px}
.p3x.d .miss.cmp .mjp{font-size:20px}
.p3x.d .miss.cmp{padding:8px 10px}

/* スマホ: パネル位置・主ボタン・対比が共存するよう */
.p3x.m .rpanel{top:352px}
.p3x.m .hero3{padding:8px 10px 7px;gap:5px}
.p3x.m .pg{gap:8px;padding:12px 12px 10px}
.p3x.m .btn.pri2{height:52px!important}
.p3x.m .btn.pri:not(.pri2){height:48px;font-size:15px}
.p3x.m .acts{gap:7px}
.p3x.m .acts .row .btn{height:38px;font-size:11.5px}
.p3x.m .miss{padding:8px 8px;gap:8px}
.p3x.m .strip2{padding:5px 8px}

/* rv は対比・ほかNを切らない（acts 直前で収めるのは JS/余白側） */
.p3x .rv{overflow:visible}

/* スマホ低スコア: 「ほかN」を1行コンパクトに */
.p3x.m .more{
  margin-top:0;padding:4px 6px;font-size:10.5px;
  background:transparent;border-radius:6px;
}
.p3x.m.res-poor .strip2{padding:4px 8px}
.p3x.m.res-poor .stat{padding:5px 4px}
.p3x.m.res-poor .hero3{padding:7px 10px 6px}
.p3x.m.res-poor .rpanel{top:348px}
.p3x.m.res-poor .acts{gap:6px}
.p3x.m.res-poor .btn.pri:not(.pri2){height:46px;font-size:14.5px}