/* ===== polish4 (2026-10-11日曜) — ?v=4 ===== */
/* 1. 視線の3帯: 祝う → 知る → 直す＆次へ */
.p4x.d .pg{gap:10px;padding:18px 24px 14px}
.p4x.m .pg{gap:5px;padding:8px 10px 7px}

/* 帯区切り（チップは区切り線上に重ねて高さ節約） */
.zdiv4{
  position:relative;height:1px;margin:4px 0 2px;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb,var(--tile-line) 85%,transparent) 18%,
    color-mix(in srgb,var(--tile-line) 85%,transparent) 82%,
    transparent 100%);
  opacity:.9;border:0;padding:0;
}
[data-skin=c] .zdiv4{
  background:linear-gradient(90deg,
    transparent 0%,rgba(63,224,232,.28) 20%,rgba(63,224,232,.28) 80%,transparent 100%);
}
.zchip4{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  font:800 9.5px/1 var(--font-ja);letter-spacing:.12em;
  color:var(--ink-3);padding:2px 8px;border-radius:999px;
  background:var(--panel);
  border:1px solid color-mix(in srgb,var(--tile-line) 70%,transparent);
  white-space:nowrap;
}
[data-skin=c] .zchip4{background:rgba(10,18,40,.95);border-color:rgba(63,224,232,.25)}
.p4x.m .zchip4{font-size:8.5px;padding:2px 6px;letter-spacing:.08em}
.p4x .zone-know{display:flex;flex-direction:column;gap:6px}
.p4x.m .zone-know{gap:4px}
.p4x .zone-fix{display:flex;flex-direction:column;gap:4px;margin-top:0}
.p4x .rv h4{
  display:flex;align-items:center;gap:6px;
  font:800 11.5px/1.2 var(--font-ja);letter-spacing:.06em;
  color:var(--ink-2);margin:0 0 2px;
}
.p4x .rv h4.h4chip{
  display:inline-flex;align-self:flex-start;
  padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--tile-line) 65%,transparent);
  margin-bottom:4px;
}
.p4x .rv h4 .cnt{
  font:900 10.5px/1 var(--font-latin);letter-spacing:0;
  padding:2px 6px;border-radius:999px;
  background:color-mix(in srgb,var(--ng) 18%,transparent);
  color:var(--ng);border:1px solid color-mix(in srgb,var(--ng) 35%,transparent);
}
.p4x.m .rv h4.h4chip{padding:3px 8px;font-size:10.5px;margin-bottom:2px}

/* 統計帯さらに軽く */
.p4x .stats{gap:6px}
.p4x .stat{
  padding:5px 6px 4px;
  background:transparent;
  border:1px solid color-mix(in srgb,var(--tile-line) 55%,transparent);
  box-shadow:none;
}
.p4x .stat .sv b{font-size:16px;font-weight:800}
.p4x .stat .sl{font-size:9.5px;opacity:.8}
.p4x .stat .si{opacity:.5;transform:scale(.78)}
.p4x.m .stats.s4{gap:4px}
.p4x.m .stat{padding:3px 2px}
.p4x.m .stat .sv b{font-size:12.5px}
.p4x.m .stat .sl{font-size:8.5px}
.p4x.m .stat .si{transform:scale(.68);opacity:.45}

/* フレーズ帯パディング削減 */
.p4x .strip2{padding:5px 9px}
.p4x.m .strip2{padding:3px 6px}
.p4x.m .s2t{font-size:9.5px;margin-left:6px}
.p4x.m .s2t b{font-size:12px}

/* 2. 漢字差ハイライト */
.p4x .cmp3 mark.diff{
  background:color-mix(in srgb,var(--hl) 28%,transparent);
  color:inherit;border-radius:3px;padding:0 1px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.p4x .cmp3 .c3v.bad mark.diff{
  background:color-mix(in srgb,var(--ng) 32%,transparent);
}
.p4x .cmp3 .c3v.good mark.diff{
  background:color-mix(in srgb,var(--ok) 30%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 25%,transparent);
}

/* 3. 完走リボン（止め絵・点滅なし）— ヒーロー内フローだが極小 */
.clear4{
  display:inline-flex;align-items:center;gap:3px;
  align-self:flex-start;
  font:900 9px/1 var(--font-latin);
  letter-spacing:.05em;
  padding:3px 7px;border-radius:999px;
  color:var(--hl);
  background:color-mix(in srgb,var(--hl) 14%,transparent);
  border:1.5px solid color-mix(in srgb,var(--hl) 55%,transparent);
  margin:0;
}
.clear4 .cj{font:800 9px/1 var(--font-ja);letter-spacing:.04em;margin-left:2px}
.clear4.soft{
  color:var(--ink-2);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-color:color-mix(in srgb,var(--tile-line) 80%,transparent);
  font-family:var(--font-ja);
  letter-spacing:.08em;
}
[data-skin=c] .clear4{box-shadow:0 0 10px rgba(255,200,87,.16)}
[data-skin=c] .clear4.soft{box-shadow:none}
.p4x.m .clear4{font-size:8px;padding:2px 6px}
.p4x.m .clear4 .cj{font-size:8px}
.p4x .hero3{position:relative}
.p4x.d .hero3{padding:8px 12px 7px;gap:4px}
.p4x.m .hero3{padding:5px 8px 4px;gap:2px}

/* 4. 主ボタン先読みサブコピー */
.p4x .btn.pri2{position:relative}
.p4x .btn.pri2 .peek4{
  position:absolute;left:96px;bottom:8px;
  font:700 10.5px/1 var(--font-ja);letter-spacing:.02em;
  color:color-mix(in srgb,var(--pri-ink) 78%,transparent);
  opacity:.9;pointer-events:none;
}
.p4x.d .btn.pri2{height:68px!important}
.p4x.d .btn.pri2>b{margin-top:10px;font-size:20px}
.p4x.d .btn.pri2>small{top:10px}
.p4x.m .btn.pri2 .peek4{left:70px;bottom:5px;font-size:9px}
.p4x.m .btn.pri2{height:48px!important}
.p4x.m .btn.pri2>b{margin-top:8px;font-size:15px}
.p4x.m .btn.pri2>small{top:6px;font-size:9px}
.p4x.m .nth{width:50px;height:38px}

/* 5. スマホ圧縮 — パネル top 上げて主ボタン確保 */
.p4x.m .rpanel{top:330px}
.p4x.m.res-poor .rpanel{top:322px}
.p4x.m .btn.pri:not(.pri2){height:42px;font-size:14px}
.p4x.m .acts{gap:5px}
.p4x.m .acts .row .btn{height:34px;font-size:10.5px}
.p4x.m .miss{padding:5px 6px;gap:5px}
.p4x.m .cmp3{padding:3px 5px;margin-top:2px}
.p4x.m .more{margin-top:0;padding:2px 4px;font-size:10px}

/* PC: 主・副ボタンがパネル内に収まるよう */
.p4x.d .acts{gap:8px;margin-top:0}
.p4x.d .btn.pri:not(.pri2){height:56px;font-size:18px}
.p4x.d .acts .row .btn{height:40px;font-size:13px}
.p4x.d .miss{padding:7px 9px;gap:8px}
.p4x.d .cmp3{padding:4px 6px;margin-top:3px}
.p4x.d .miss .mjp{font-size:18px}
.p4x.d .miss.cmp .mjp{font-size:17px}

/* log / share 軽追随 */
.p4x.view-log .rpanel .pg{padding-top:16px}
.p4x.view-log .strip2{margin:0 0 5px}
.p4x.view-share .rkcol .clear4{margin:4px 0 2px}