/* ===== polish5 (2026-10-12月) — ?v=5 ===== */
/* 学び一行・自己ベスト祝う・直す帯ラベル・PCショートカット・先読み視認性 */

/* 1. 同音異義ヒントチップ — 対比の直下、静かめ */
.tip5{
  display:inline-flex;align-self:flex-start;
  margin:2px 0 0;padding:2px 7px;border-radius:999px;
  font:700 9.5px/1.2 var(--font-ja);letter-spacing:.02em;
  color:var(--ink-3);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--tile-line) 55%,transparent);
  white-space:nowrap;max-width:100%;
}
[data-skin=c] .tip5{
  color:rgba(186,220,240,.82);
  background:rgba(63,224,232,.08);
  border-color:rgba(63,224,232,.22);
}
.p5x.m .tip5{font-size:9px;padding:2px 7px;margin-top:2px;letter-spacing:.01em}
.p5x .miss .tip5{margin-left:0}
 .p5x.d .miss{padding-bottom:5px}
.p5x.m .miss{padding-bottom:4px}

/* 2. 自己ベスト祝うチップ — ヒーロー内・ゴールド・止め絵 */
 .best5{
  display:inline-flex;align-items:center;gap:3px;
  align-self:flex-start;
  font:800 9.5px/1 var(--font-ja);letter-spacing:.05em;
  padding:2px 8px;border-radius:999px;
  color:#5A3A00;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--hl) 55%,#fff) 0%,
    color-mix(in srgb,var(--hl) 78%,#c9a227) 100%);
  border:1.5px solid color-mix(in srgb,var(--hl) 70%,#8a6a10);
  box-shadow:0 1px 0 rgba(0,0,0,.12);
  margin:2px 0 0;
}
[data-skin=c] .best5{
  color:#2A1A00;
  background:linear-gradient(180deg,#FFE08A 0%,#F0B429 100%);
  border-color:rgba(255,200,87,.75);
  box-shadow:0 0 10px rgba(255,200,87,.22),0 1px 0 rgba(0,0,0,.2);
}
.p5x.m .best5{font-size:8.5px;padding:2px 7px;letter-spacing:.04em;margin-top:1px}
.p5x .hero3{gap:3px}
.p5x.m .hero3{gap:3px}
/* share 追随 */
.p5x.view-share .rkcol .best5{margin:4px 0 2px}

/* 3. 「直す＆次へ」帯ラベル — .zchip4 と同型 */
.zchip5{
  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] .zchip5{background:rgba(10,18,40,.95);border-color:rgba(63,224,232,.25)}
.p5x.m .zchip5{font-size:8.5px;padding:2px 6px;letter-spacing:.08em}
/* 区切り線上にチップが載るので、チップ幅ぶん左側余白を意識（既に zdiv4 が relative） */
.p5x .zdiv4:has(.zchip5){margin-top:4px;margin-bottom:2px}
.p5x.m .zdiv4:has(.zchip5){margin-top:3px;margin-bottom:1px}

/* 4. PCショートカット行 — 低コントラスト・モバイル非表示 */
.keys5{
  display:flex;align-items:center;justify-content:center;gap:2px;flex-wrap:wrap;
  margin-top:0;padding:0 4px;
  font:600 9.5px/1.2 var(--font-ja);letter-spacing:.02em;
  color:color-mix(in srgb,var(--ink-3) 70%,transparent);
  opacity:.72;user-select:none;
}
.keys5 kbd{
  display:inline-block;
  font:700 9px/1 var(--font-latin);letter-spacing:.04em;
  padding:1px 4px;margin:0 2px;border-radius:3px;
  color:inherit;
  background:color-mix(in srgb,var(--tile-line) 35%,transparent);
  border:1px solid color-mix(in srgb,var(--tile-line) 55%,transparent);
  border-bottom-width:2px;
}
[data-skin=c] .keys5{color:rgba(160,190,210,.55)}
[data-skin=c] .keys5 kbd{
  background:rgba(63,224,232,.06);
  border-color:rgba(63,224,232,.18);
  color:rgba(180,210,230,.7);
}
.p5x.m .keys5{display:none!important}

/* 5. 主ボタン先読み — フロー行・衝突回避・コントラスト改善 */
.p5x .btn.pri2.pri5,
.p5x .btn.pri5{
  /* absolute peek をやめて中身を縦に整える */
  align-items:center!important;
}
.p5x .btn.pri2 .peek5,
.p5x .btn.pri5 .peek5{
  display:block;
  position:static; /* absolute 廃止 */
  margin:2px 0 0;
  padding:0;
  font:700 11px/1.2 var(--font-ja);letter-spacing:.03em;
  color:color-mix(in srgb,var(--pri-ink) 88%,transparent);
  opacity:.95;pointer-events:none;
  max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
[data-skin=c] .p5x .btn.pri2 .peek5{color:rgba(4,34,58,.85)}
/* タイトル＋peek をサムネ右に縦積み（small は従来どおり absolute top） */
.p5x.d .btn.pri2.pri5{
  height:66px!important;
  display:grid!important;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto auto;
  column-gap:14px!important;row-gap:0;
  align-items:center;
  padding-left:10px;padding-right:52px;
}
.p5x.d .btn.pri2.pri5>.nth{
  grid-column:1;grid-row:1 / span 3;align-self:center;
}
.p5x.d .btn.pri2.pri5>small{
  position:static!important;left:auto!important;top:auto!important;
  grid-column:2;grid-row:1;
  margin:0;padding:0;
  font-size:11px;opacity:.85;
}
 .p5x.d .btn.pri2.pri5>b{
  grid-column:2;grid-row:2;
  margin:1px 0 0;font-size:19px;line-height:1.1;
}
 .p5x.d .btn.pri2.pri5>.peek5{
  grid-column:2;grid-row:3;
  margin:1px 0 0;font-size:10.5px;
}
.p5x.d .btn.pri2.pri5>.key{
  grid-column:3;grid-row:1 / span 3;align-self:center;justify-self:end;
  position:static!important;right:auto!important;top:auto!important;transform:none!important;
}
/* 次シーンサムネ縁のソフトグロー（好成績のみ・pri5 付与時） */
.p5x .btn.pri2.pri5 .nth{
  border-color:color-mix(in srgb,var(--pri-ink) 35%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--hl) 25%,transparent),
             0 0 12px color-mix(in srgb,var(--accent) 28%,transparent);
}
[data-skin=c] .p5x .btn.pri2.pri5 .nth{
  border-color:rgba(4,34,58,.35);
  box-shadow:0 0 0 1px rgba(255,200,87,.28),0 0 14px rgba(63,224,232,.35);
}

/* モバイル: 先読みを小さく・サムネ右に縦積み */
.p5x.m .btn.pri2.pri5{
  height:54px!important;
  display:grid!important;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto auto;
  column-gap:10px!important;row-gap:0;
  align-items:center;
  padding-left:6px;padding-right:8px;
}
.p5x.m .btn.pri2.pri5>.nth{
  grid-column:1;grid-row:1 / span 3;align-self:center;
  width:50px;height:38px;
}
.p5x.m .btn.pri2.pri5>small{
  position:static!important;left:auto!important;top:auto!important;
  grid-column:2;grid-row:1;
  margin:0;font-size:9px;opacity:.85;
}
 .p5x.m .btn.pri2.pri5>b{
  grid-column:2;grid-row:2;
  margin:0;font-size:14px;line-height:1.05;
}
 .p5x.m .btn.pri2.pri5>.peek5{
  grid-column:2;grid-row:3;
  margin:0;font-size:9px;
}
.p5x.m .btn.pri2.pri5>.key{display:none}

/* パネル余白微調整 — tip5 / keys5 / best5 分（PCは下端クリップ回避） */
.p5x.d .pg{gap:7px;padding:14px 22px 10px}
.p5x.m .pg{gap:4px;padding:7px 10px 6px}
.p5x.m .rpanel{top:318px}
.p5x.m.res-poor .rpanel{top:310px}
.p5x.d .acts{gap:5px;margin-top:0}
.p5x.m .acts{gap:4px}
.p5x.d .cmp3{margin-bottom:0}
.p5x.m .cmp3{margin-bottom:0}
.p5x.d .acts .row .btn{height:36px;font-size:12.5px}
.p5x.d .btn.pri:not(.pri2){height:52px;font-size:17px}
.p5x.d .ah2{margin-bottom:0;font-size:10px}

/* log 軽追随 — tip は result のみ。帯余白だけ */
.p5x.view-log .rpanel .pg{padding-top:14px}