/*!
 * SOA 対戦カード表（card board）  .soa-cb
 * 正本：D:/dev/claude code/card-board/soa-card-board.css
 * 見た目は D:/dev/skills/_view/card-table-final-v5.html（接頭辞 soa-lv）と同じ。
 * WordPress では mu-plugin soa-card-board.php が、本文に class="soa-cb" を含む記事でだけ読み込む。
 */
/* =========================================================
   アコーディオン（今の記事のCSSそのまま＋矢印。.soa-cb の中だけに効くよう絞った）
   ========================================================= */
.soa-cb .syun-collapsible-table{margin-block:2rem}
.soa-cb .syun-collapsible-table>summary{align-items:center;background:#123e73;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-weight:800;justify-content:space-between;min-height:44px;padding:.75rem 1rem;list-style:none}
.soa-cb .syun-collapsible-table>summary::-webkit-details-marker{display:none}
.soa-cb .syun-collapsible-table[open]>summary{border-radius:8px 8px 0 0;margin-bottom:.25rem}
.soa-cb .syun-collapsible-table>summary:hover{background:#07182d}
.soa-cb .syun-collapsible-table>summary:focus-visible{outline:3px solid #c51f2f;outline-offset:3px}
.soa-cb .syun-collapsible-table__title{display:grid;gap:.15rem;min-width:0;word-break:keep-all}
.soa-cb .syun-collapsible-table__meta{color:rgba(255,255,255,.82);font-size:.8rem;font-weight:700;line-height:1.45}
.soa-cb .syun-collapsible-table__hint{font-size:.8rem;font-weight:700;text-align:right;white-space:nowrap;flex:none}
/* 帯の右の文言：開く・閉じる × タッチ・マウスの4つから1つだけ出す（display:none なので読み上げも表示中のものだけ） */
.soa-cb__ht{display:none}
.soa-cb .syun-collapsible-table:not([open])>summary .soa-cb__ht--to,.soa-cb .syun-collapsible-table[open]>summary .soa-cb__ht--tc{display:inline}
@media (hover:hover) and (pointer:fine){
  .soa-cb .syun-collapsible-table:not([open])>summary .soa-cb__ht--to,.soa-cb .syun-collapsible-table[open]>summary .soa-cb__ht--tc{display:none}
  .soa-cb .syun-collapsible-table:not([open])>summary .soa-cb__ht--co,.soa-cb .syun-collapsible-table[open]>summary .soa-cb__ht--cc{display:inline}
}
.soa-cb .syun-collapsible-table--joined>summary{gap:.6rem}
.soa-cb .syun-collapsible-table--joined .syun-collapsible-table__title{flex:1}
.soa-cb .syun-collapsible-table--joined[open]>summary{margin-bottom:0}
.soa-cb .syun-collapsible-table__chev{display:grid;flex:none;place-items:center;width:1.5rem;height:1.5rem;transition:transform 200ms ease-out}
.soa-cb .syun-collapsible-table[open] .syun-collapsible-table__chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.soa-cb .syun-collapsible-table__chev{transition:none}}

/* =========================================================
   対戦カード表 最終案（明るさの階段＋グラデーション）  .soa-cb
   ========================================================= */
/* 記事に貼ると、外枠 .soa-cb の中に記事の h3・段落・注記も入る（details の間に記事の見出しが挟まるため）。
   .soa-cb 自体には継承されない指定だけを置き、書体・色・行の高さなどは表の部品（.soa-cb の子で soa-cb__ の付いたもの＝caption・固定バー・共有の欄・details）にだけ当てる。:where で詳細度は0のまま */
.soa-cb{container:soa-cb / inline-size}
:where(.soa-cb>[class*="soa-cb__"]){font-family:"Noto Sans JP",system-ui,sans-serif;font-variant-numeric:tabular-nums;line-height:1.7;color:#121a24}
:where(.soa-cb>[class*="soa-cb__"],.soa-cb>[class*="soa-cb__"] *){box-sizing:border-box}
:where(.soa-cb>[class*="soa-cb__"],.soa-cb>[class*="soa-cb__"] *)[hidden]{display:none!important}
.soa-cb .syun-collapsible-table>summary{background:var(--sbg);color:var(--sfg);box-shadow:inset 0 -2px 0 var(--sline,transparent)}
.soa-cb .syun-collapsible-table>summary:hover{background:var(--shov,var(--sbg))}
.soa-cb .syun-collapsible-table__meta,.soa-cb .syun-collapsible-table__hint{color:var(--sfg2)}
.soa-cb__card--early{--lsh:0 18px 44px rgba(7,24,45,.12);--lbg:transparent;--dim:.78;--bg:linear-gradient(135deg,#f4f8fd 0%,#c9dbf0 100%);--fg:#123e73;--fg2:#42566f;--ac:#123e73;--onac:#fff;--line:rgba(18,62,115,.16);--rail:rgba(18,62,115,.3);--sbg:#d5e2f1;--shov:#c8d9ed;--sfg:#123e73;--sfg2:#42566f}
/* プレリム（2026-10-20）：地 #0e3262→#336eb0＋上の中央から白7%の光。帯 #2a64a8（ホバー #245a98）＋下端にアクセントの2pxの線。明るい側で白5.25:1、従の文字 #eef3f9 4.71:1、アクセント #c4dbf3 3.70:1、薄くした名前（.9）4.60:1。帯の上の白6.02:1、白82% 4.64:1 */
.soa-cb__card--prelims{--lsh:0 18px 44px rgba(0,0,0,.35);--lbg:rgba(255,255,255,.04);--dim:.9;--bg:radial-gradient(ellipse 70% 55% at 50% 0,rgba(255,255,255,.07),transparent 100%),linear-gradient(135deg,#0e3262 0%,#336eb0 100%);--fg:#fff;--fg2:#eef3f9;--ac:#c4dbf3;--onac:#07182d;--line:rgba(255,255,255,.18);--rail:rgba(196,219,243,.5);--sbg:#2a64a8;--shov:#245a98;--sline:#c4dbf3;--sfg:#fff;--sfg2:rgba(255,255,255,.82);--tline:rgba(196,219,243,.6)}
/* メイン（2026-10-20）：地 #050f1e→#21569a。明るい側で白7.34:1、従の文字 #cdd8e5 5.08:1、金 3.81:1、薄くした名前（.72）4.67:1 */
.soa-cb__card--main{--lsh:0 18px 44px rgba(0,0,0,.35);--lbg:rgba(255,255,255,.04);--dim:.72;--bg:linear-gradient(135deg,#050f1e 0%,#21569a 100%);--fg:#fff;--fg2:#cdd8e5;--ac:#e2b53e;--onac:#07182d;--line:rgba(255,255,255,.12);--rail:rgba(226,181,62,.5);--sbg:#050f1e;--shov:#030a14;--sfg:#fff;--sfg2:rgba(255,255,255,.82);--sline:#e2b53e;--tline:rgba(159,192,230,.55)}
.soa-cb__panel{padding:.1rem 1rem .1rem .35rem;background:var(--bg);color:var(--fg);border-radius:0 0 8px 8px;overflow:hidden}
.soa-cb__hint{margin:.6rem 0 .1rem 1.7rem;color:var(--fg2);font-size:.78rem;line-height:1.6}
.soa-cb__list{margin:0;padding:0;list-style:none}
.soa-cb__bout{--dot:.5rem;--dot-y:1.45rem;--cap:1rem;display:grid;grid-template-columns:1.7rem minmax(0,1fr)}
.soa-cb__bout--main{--dot:1rem;--dot-y:1.7rem;--cap:1.9rem}
.soa-cb__bout--comain{--cap:1.25rem}
.soa-cb__card:not(.soa-cb__card--main) .soa-cb__bout{--cap:.95rem}
.soa-cb__rail{position:relative}
.soa-cb__rail::before{content:"";position:absolute;top:0;bottom:0;left:.85rem;width:2px;margin-left:-1px;background:var(--rail)}
.soa-cb__bout:first-child .soa-cb__rail::before{top:var(--dot-y)}
.soa-cb__bout:last-child .soa-cb__rail::before{bottom:auto;height:var(--dot-y)}
.soa-cb__dot{position:absolute;top:var(--dot-y);left:.85rem;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--ac);transform:translate(-50%,-50%)}
.soa-cb__body{position:relative;min-width:0;margin-inline:-.5rem;padding:.75rem .5rem .8rem;border-radius:6px}
.soa-cb__bout + .soa-cb__bout .soa-cb__body{border-top:1px solid var(--line)}
.soa-cb__a{position:relative;z-index:1;container:soa-cb-a / inline-size;min-width:0}
.soa-cb__head{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;margin:0;color:var(--fg2);font-size:.74rem;line-height:1.5}
.soa-cb__badges{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.35rem}
.soa-cb__match{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.6rem;margin-top:var(--m-top,.05rem);--mk-h:.9rem;--mk-mb:.05rem;--nd:15;--sub:2.6rem}
.soa-cb__match.is-l7{--nd:17}
.soa-cb__match.is-l9{--nd:21.5}
.soa-cb__f{min-width:0}
.soa-cb__f,.soa-cb__f--red{text-align:center}
.soa-cb__nm{display:block;padding-bottom:var(--nm-pb,.5rem);text-decoration:underline 2px transparent;text-underline-offset:.3em}
.soa-cb__name{display:block;margin:0;color:var(--fg);font-weight:900;line-height:1.3;word-break:keep-all;overflow-wrap:normal;cursor:pointer;transition:opacity 200ms ease;font-size:clamp(var(--min,.72rem),calc((100cqi - var(--sub)) / var(--nd)),var(--cap))}
.soa-cb__info{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .4rem;margin:.15rem 0 0;color:var(--fg2);font-size:.7rem;line-height:1.45}
.soa-cb__info,.soa-cb__f--red .soa-cb__info{justify-content:center}
.soa-cb__rk{font-weight:700}
.soa-cb__rec{color:var(--fg);font-size:.78rem;font-weight:700}
.soa-cb .cc-flag{width:16px;height:12px;border-radius:1px;flex:none;align-self:center}
.soa-cb__vs{color:var(--fg2);font-size:.72rem;font-weight:700;line-height:1}
.soa-cb__note{position:relative;z-index:1;margin:.45rem 0 0;color:var(--fg2);font-size:.8rem;line-height:1.7}
/* 説明文の中のリンク（「詳しい見どころ」など）。テーマが内部リンクに付ける .syun-internal-link（紺の文字と赤い下線の背景）に勝つ詳細度で、段の従の文字色と下線にする */
.soa-cb .soa-cb__note a,.soa-cb .soa-cb__note a.syun-internal-link{color:var(--fg2);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:2px;background-image:none;background-size:0;box-shadow:none}
.soa-cb .soa-cb__note a:hover,.soa-cb .soa-cb__note a.syun-internal-link:hover{color:var(--ac);background-image:none;background-size:0}
.soa-cb__note a:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* メインイベント（スポットライトと大きい名前） */
.soa-cb__bout--main .soa-cb__body{padding-block:1rem 1.05rem;overflow:hidden;background:radial-gradient(circle at 50% 0,rgba(255,255,255,.13),transparent 62%)}
.soa-cb__bout--main .soa-cb__match{--m-top:0rem;gap:.9rem}
/* バッジ（メインイベント・タイトルマッチ・代役など）がある試合は、バッジ → 札の行・Syunの印を .5rem あける */
.soa-cb__bout.soa-cb__bout--bdg .soa-cb__match{--m-top:.5rem;--sy-x:0rem}
.soa-cb__bout--main .soa-cb__vs{font-size:.8rem}
.soa-cb__bout--main .soa-cb__info{font-size:.74rem}
.soa-cb__bout--main .soa-cb__rec{font-size:.86rem}
.soa-cb__bout--main .soa-cb__note{max-width:36rem;margin:.75rem auto 0;font-size:.84rem}

/* ---------- 予想の宣言（radio＋label、JavaScriptなし。保存しない） ---------- */
.soa-cb__pick-in{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
/* 「予想」の札は名前の上の小さな行に置く。行はいつも確保しておき（visibility）、札の有無で名前の幅も改行も変わらない */
.soa-cb__mark{display:flex;align-items:center;justify-content:center;width:fit-content;height:var(--mk-h);margin:0 auto var(--mk-mb);padding:0 .45rem;border-radius:4px;background:var(--ac);color:var(--onac);font-size:.66rem;font-weight:800;line-height:1.2;letter-spacing:.04em;visibility:hidden}
.soa-cb__pick-in--r:checked ~ .soa-cb__f--red .soa-cb__mark,.soa-cb__pick-in--b:checked ~ .soa-cb__f--blue .soa-cb__mark{visibility:visible}
.soa-cb__pick-in--r:checked ~ .soa-cb__f--red .soa-cb__nm,.soa-cb__pick-in--b:checked ~ .soa-cb__f--blue .soa-cb__nm{text-decoration-color:var(--ac)}
/* 選ばなかった側は名前だけ薄くする。WCAG AA（4.5:1）を割らないよう、段ごとに薄さを変える（メイン .62／プレリム .68／アーリー .76） */
.soa-cb__pick-in--r:checked ~ .soa-cb__f--blue .soa-cb__name,.soa-cb__pick-in--b:checked ~ .soa-cb__f--red .soa-cb__name{opacity:var(--dim,.62)}
.soa-cb__pick-in--r:focus-visible ~ .soa-cb__f--red .soa-cb__name,.soa-cb__pick-in--b:focus-visible ~ .soa-cb__f--blue .soa-cb__name{outline:2px solid var(--ac);outline-offset:3px;border-radius:2px}
/* 予想の解除：選んだ側の名前の上にだけ、none 用の透明な label を重ねる（もう一度押すと外れる） */
/* 名前の箱を文字の塊の幅に縮め、欄の左右の中央に置く。札はこの箱の中央 */
.soa-cb__nwrap{position:relative;width:fit-content;max-width:100%}
.soa-cb__nwrap,.soa-cb__f--red .soa-cb__nwrap{margin-inline:auto}
.soa-cb__unpick{display:none;position:absolute;inset:0;z-index:2;cursor:pointer}
.soa-cb__pick-in--r:checked ~ .soa-cb__f--red .soa-cb__unpick,.soa-cb__pick-in--b:checked ~ .soa-cb__f--blue .soa-cb__unpick{display:block}
/* none の radio にキーボードで来たときは、名前ではなく対戦の段全体に点線の輪を出す */
.soa-cb__match:has(.soa-cb__pick-in--none:focus-visible){outline:2px dashed var(--ac);outline-offset:4px;border-radius:6px}
@media (hover:hover) and (pointer:fine){
  .soa-cb__name:hover .soa-cb__nm{text-decoration-color:color-mix(in srgb,var(--ac) 45%,transparent)}
  .soa-cb__pick-in--r:checked ~ .soa-cb__f--red .soa-cb__name:hover .soa-cb__nm,.soa-cb__pick-in--b:checked ~ .soa-cb__f--blue .soa-cb__name:hover .soa-cb__nm{text-decoration-color:var(--ac)}
}

/* ---------- バッジ（今の記事の .soa-card-table .badge を移植・小さめ） ---------- */
.soa-cb__badge{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-height:1.5rem;padding:0 .7rem;border:1px solid transparent;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.02em;line-height:1.1;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.28);transition:transform .22s cubic-bezier(.2,0,0,1),box-shadow .22s ease,background .22s ease,border-color .22s ease}
.soa-cb__badge::after{background:linear-gradient(105deg,transparent 12%,rgba(255,255,255,.2) 38%,rgba(255,255,255,.82) 50%,rgba(255,255,255,.22) 62%,transparent 88%);content:"";inset:-45% auto -45% -72%;pointer-events:none;position:absolute;transform:skewX(-18deg);width:42%;z-index:1}
.soa-cb__badge--main{background:linear-gradient(180deg,rgba(255,250,226,.98) 0,rgba(226,181,62,.94) 58%,rgba(142,96,22,.94) 100%);border-color:rgba(142,96,22,.72);box-shadow:inset 0 1px 2px rgba(255,255,255,.78),inset 0 -3px 5px rgba(70,42,7,.3),0 2px 0 rgba(103,67,12,.58),0 6px 14px rgba(122,84,18,.26);color:#221603}
.soa-cb__badge--comain{background:linear-gradient(180deg,rgba(255,255,255,.98) 0,rgba(218,226,236,.96) 58%,rgba(144,158,176,.92) 100%);border-color:rgba(123,139,157,.72);box-shadow:inset 0 1px 2px rgba(255,255,255,.9),inset 0 -3px 5px rgba(50,62,78,.18),0 2px 0 rgba(91,106,124,.42),0 6px 12px rgba(57,70,87,.2);color:#17212f}
.soa-cb__badge--title{padding:0 .7rem 0 .55rem;background:linear-gradient(180deg,#2c4a72 0,#13294a 52%,#07142a 100%);border-color:var(--tline,rgba(5,14,30,.9));box-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 -4px 6px rgba(0,0,0,.38),0 2px 0 rgba(2,8,20,.65),0 6px 14px rgba(7,24,45,.26);color:#f4f6f9;text-shadow:0 -1px 0 rgba(0,0,0,.55)}
.soa-cb__belt{flex:none;width:1.45em;height:.85em}
/* BMF：ブラックメタリック＋シルバーリム（2026-10-21、Syunが3案から案Aを選択）。黒いメッキの本体を明るい銀の縁（#e3e7ed → #aab1bb）で囲み、メインカードの濃紺の地と分ける。縁と地のコントラスト：明るい側 #21569a 3.39:1、暗い側 #050f1e 8.88:1。金の文字と本体 9.15:1。左に金の「BMF」の札 */
.soa-cb__badge--bmf{padding:0 .7rem 0 .2rem;border:1.5px solid transparent;background:linear-gradient(180deg,#6b717a 0,#2b2f35 18%,#121418 45%,#050607 55%,#14161a 75%,#2a2e34 100%) padding-box,linear-gradient(180deg,#e3e7ed,#aab1bb) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35);color:#f0cf74;text-shadow:0 -1px 0 rgba(0,0,0,.75)}
.soa-cb__badge--bmf::after{background:linear-gradient(105deg,transparent 12%,rgba(255,255,255,.16) 38%,rgba(235,240,248,.72) 50%,rgba(255,255,255,.18) 62%,transparent 88%)}
.soa-cb__bmf{display:inline-grid;place-items:center;min-height:1.05rem;padding:0 .32rem;border-radius:999px;background:linear-gradient(180deg,#f6e2a4,#e2b53e 60%,#b8891f);color:#111418;font-size:.6rem;font-weight:900;letter-spacing:.06em;text-shadow:none}

/* ---------- 星（段の地に合わせた半透明の札） ---------- */
.soa-cb__stars{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:1.45rem;padding:.22rem .5rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.08);color:var(--ac);font-size:.74rem;font-weight:900;letter-spacing:.045em;line-height:1;white-space:nowrap}
/* 字間（letter-spacing）は最後の★の右にも付くので、その分を右の余白から引いて字面を札の中央にそろえる */
.soa-cb__stars>span{position:relative;z-index:1;margin-right:-.045em}
/* 星の札とバッジの間は .5rem（ほかの縦の間隔 .25rem に .25rem 足す） */
.soa-cb__head>.soa-cb__badges{margin-top:.25rem}
.soa-cb__card--early .soa-cb__stars{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(238,245,253,.56)),linear-gradient(135deg,rgba(18,62,115,.11),rgba(7,24,45,.045));border-color:rgba(18,62,115,.16);box-shadow:inset 0 1px 1px rgba(255,255,255,.66),0 6px 14px rgba(7,24,45,.055);color:#245580}
.soa-cb__stars::after{background:linear-gradient(110deg,transparent 0 32%,rgba(255,255,255,.92) 46%,rgba(255,255,255,.24) 54%,transparent 68% 100%);content:"";inset:-35% auto -35% 0;opacity:0;pointer-events:none;position:absolute;transform:translateX(-135%) rotate(10deg);width:42%;z-index:2}

/* ---------- ホバーで光の筋（今の記事と同じ。tr:hover を 試合の要素:hover / :focus-within） ---------- */
@media (hover:hover) and (pointer:fine){
  .soa-cb__bout:hover :is(.soa-cb__badge--main,.soa-cb__badge--comain){transform:translateY(-1px)}
  .soa-cb__bout:hover .soa-cb__badge--main{box-shadow:inset 0 1px 2px rgba(255,255,255,.84),inset 0 -3px 5px rgba(70,42,7,.28),0 2px 0 rgba(103,67,12,.52),0 8px 18px rgba(150,103,22,.34)}
  .soa-cb__bout:hover .soa-cb__badge--comain{box-shadow:inset 0 1px 2px rgba(255,255,255,.94),inset 0 -3px 5px rgba(50,62,78,.16),0 2px 0 rgba(91,106,124,.38),0 8px 16px rgba(80,97,119,.3)}
  .soa-cb__bout:hover .soa-cb__badge--title{background:linear-gradient(180deg,#3d659a 0,#1d3d6b 52%,#0c1f3f 100%);border-color:rgba(147,197,253,.75);box-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 -4px 6px rgba(0,0,0,.38),0 2px 0 rgba(2,8,20,.65),0 0 0 1px rgba(147,197,253,.35),0 0 12px rgba(96,165,250,.45)}
  .soa-cb__bout:hover .soa-cb__badge::after{animation:soa-cb-badge-glint 680ms cubic-bezier(.22,.61,.36,1) 1}
  .soa-cb__bout:hover .soa-cb__stars::after{animation:soa-cb-star-glint 720ms cubic-bezier(.2,0,0,1) both}
}
@media (prefers-reduced-motion:no-preference){
  .soa-cb__bout:focus-within .soa-cb__badge::after{animation:soa-cb-badge-glint 680ms cubic-bezier(.22,.61,.36,1) 1}
  .soa-cb__bout:focus-within .soa-cb__stars::after{animation:soa-cb-star-glint 720ms cubic-bezier(.2,0,0,1) both}
}
@keyframes soa-cb-badge-glint{from{left:-72%}to{left:138%}}
@keyframes soa-cb-star-glint{0%{opacity:0;transform:translateX(-135%) rotate(10deg)}18%{opacity:.9}100%{opacity:0;transform:translateX(280%) rotate(10deg)}}

/* ---------- メインイベントの透かし文字（ブラーイン＋字間が締まる＋金のライトスイープ） ---------- */
/* 透かし文字はメインイベントの欄の中央に上下2行で敷く（上 Volkanovski、下 Evloev）。13cqi は字間が締まった状態で PC幅・スマホ幅343pxの欄に収まる大きさ */
.soa-cb__ghosts{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.soa-cb__ghost{display:block;font-size:clamp(2.4rem,13cqi,6rem);font-weight:900;line-height:1;letter-spacing:.04em;white-space:nowrap;pointer-events:none;user-select:none;color:transparent;background-image:linear-gradient(105deg,transparent 42%,rgba(255,250,230,.95) 50%,transparent 58%),linear-gradient(100deg,#f6e2a4 0%,#e2b53e 50%,#8a6510 100%);background-size:250% 100%,100% 100%;background-position:100% 0,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;opacity:.1}
@media (hover:hover) and (pointer:fine){
  .soa-cb__ghost{opacity:0;filter:blur(14px);letter-spacing:.35em;transition:opacity 600ms ease,filter 600ms ease,letter-spacing 600ms ease}
  .soa-cb__bout--main:is(:hover,:focus-within) .soa-cb__ghost{opacity:.16;filter:blur(0);letter-spacing:.04em;transition:opacity 900ms cubic-bezier(.22,1,.36,1),filter 900ms cubic-bezier(.22,1,.36,1),letter-spacing 900ms cubic-bezier(.22,1,.36,1);animation:soa-cb-ghost-sweep 1100ms cubic-bezier(.4,0,.2,1) 400ms 1 both}
  .soa-cb__bout--main:is(:hover,:focus-within) .soa-cb__ghost--blue{animation-delay:550ms}
}
@keyframes soa-cb-ghost-sweep{from{background-position:100% 0,0 0}to{background-position:0% 0,0 0}}

/* ---------- 動きを減らす設定 ---------- */
/* ---------- ホバーで浮く（今の記事の表と同じ translateY(-2px)・160ms ease。マウスのある端末だけ） ---------- */
@media (hover:hover){
  .soa-cb__body{transition:background-color 160ms ease,box-shadow 160ms ease,transform 160ms ease}
  .soa-cb__bout:is(:hover,:focus-within) .soa-cb__body{z-index:2;transform:translateY(-2px);box-shadow:var(--lsh);background-color:var(--lbg)}
}
@media (hover:hover) and (prefers-reduced-motion:reduce){
  .soa-cb__bout:is(:hover,:focus-within) .soa-cb__body{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .soa-cb__badge,.soa-cb__name{transition:none}
  .soa-cb__badge::after,.soa-cb__stars::after{display:none}
  .soa-cb__bout:hover :is(.soa-cb__badge--main,.soa-cb__badge--comain){transform:none}
  .soa-cb__ghost,.soa-cb__bout--main:is(:hover,:focus-within) .soa-cb__ghost{filter:none;letter-spacing:.04em;animation:none;transition:opacity 300ms ease}
}

/* ---------- PC幅（640px以上）：左右対面のまま、説明文は右の列 ---------- */
@container soa-cb (min-width:640px){
  .soa-cb__bout:not(.soa-cb__bout--main) .soa-cb__body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"head note" "a note";grid-template-rows:auto 1fr;align-items:start;column-gap:1.2rem}
  .soa-cb__bout:not(.soa-cb__bout--main) .soa-cb__head{grid-area:head}
  .soa-cb__bout:not(.soa-cb__bout--main) .soa-cb__a{grid-area:a}
  .soa-cb__bout:not(.soa-cb__bout--main) .soa-cb__note{grid-area:note;align-self:center;margin:0;font-size:.78rem;line-height:1.65}
  .soa-cb__bout--comain .soa-cb__note{margin:0}
}

/* ---------- スマホ幅（600px以下）：向かい合わせをやめ、赤、vs、青の縦積み。名前は1行 ---------- */
@container soa-cb (max-width:600px){
  .soa-cb__panel{padding:.05rem .75rem .05rem .2rem}
  .soa-cb__hint{margin-left:1.4rem}
  .soa-cb__bout{grid-template-columns:1.4rem minmax(0,1fr)}
  .soa-cb__rail::before,.soa-cb__dot{left:.7rem}
  .soa-cb__match,.soa-cb__bout--main .soa-cb__match{grid-template-columns:minmax(0,1fr);gap:.1rem;--m-top:.5rem;--sy-x:0rem}
  .soa-cb__f,.soa-cb__f--red{text-align:center}
  .soa-cb__nwrap,.soa-cb__f--red .soa-cb__nwrap{margin-inline:auto}
  .soa-cb__br{display:none}
  /* 名前の行は名前だけ。横幅いっぱいを使い、その試合で長いほうの名前の文字数で割る */
  .soa-cb__name{font-size:clamp(.8rem,calc((100cqi - .3rem) / (var(--n) + .3)),.95rem)}
  .soa-cb__info,.soa-cb__f--red .soa-cb__info{flex-wrap:nowrap;justify-content:center;gap:.3rem;margin:.1rem 0 0;font-size:.66rem;white-space:nowrap}
  .soa-cb__rec{font-size:.74rem}
  /* 「—— vs ——」。上の戦績の行の下端から vs まで と、vs から下の選手の名前の文字の上端まで（あいだに札の行がある）を同じ距離にする。札の行は vs に重ならない */
  /* 1行目（階級・星・バッジ）は中央ぞろえ。バッジが折り返しても中央 */
  .soa-cb__badges{justify-content:center}
  /* 上の戦績→VS（--vsg）と、VS→下の選手名の文字の上端（札が無いときの見た目）をそろえる。札は VS の下 .5rem に出る（札の行は確保したまま。--mg は縦の並びの gap の分） */
  .soa-cb__match{--vsg:1.62rem}
  .soa-cb__vs,.soa-cb__bout--main .soa-cb__vs{display:flex;align-items:center;justify-content:center;gap:.5rem;justify-self:stretch;margin:calc(var(--vsg) - var(--mg,.1rem)) 0 calc(.5rem - var(--mg,.1rem));color:var(--fg2);font-size:.95rem;font-weight:700;line-height:1}
  .soa-cb__vs::before,.soa-cb__vs::after{content:"";flex:none;width:1.5rem;height:1px;background:currentColor;opacity:.5;transform:translateY(.06em)}
  .soa-cb__bout--main .soa-cb__match{--m-top:.5rem;gap:.2rem}
  .soa-cb__bout.soa-cb__bout--bdg .soa-cb__match{--m-top:.5rem}
  .soa-cb__bout--main .soa-cb__match{--mg:.2rem}
  .soa-cb__bout--main .soa-cb__name{font-size:clamp(1rem,calc((100cqi - .3rem) / (var(--n) + .4)),1.35rem);line-height:1.25}
  .soa-cb__bout--main .soa-cb__info{font-size:.7rem}
  .soa-cb__bout--main .soa-cb__rec{font-size:.8rem}
  .soa-cb__bout--main .soa-cb__note{margin-top:.6rem;font-size:.82rem}
  .soa-cb__res{text-align:center}
}
.soa-cb__match.is-n4{--n:4}
.soa-cb__match.is-n5{--n:5}
.soa-cb__match.is-n6{--n:6}
.soa-cb__match.is-n7{--n:7}
.soa-cb__match.is-n8{--n:8}
.soa-cb__match.is-n9{--n:9}
.soa-cb__match.is-n10{--n:10}
.soa-cb__match.is-n11{--n:11}
.soa-cb__match.is-n12{--n:12}
.soa-cb__match.is-n13{--n:13}
.soa-cb__match.is-n14{--n:14}
.soa-cb__match.is-n15{--n:15}
.soa-cb__match.is-n16{--n:16}
.soa-cb__match.is-n17{--n:17}
.soa-cb__match.is-n18{--n:18}
.soa-cb__match.is-n19{--n:19}
.soa-cb__match.is-n20{--n:20}
.soa-cb__match.is-n21{--n:21}
.soa-cb__match.is-n22{--n:22}
.soa-cb__match.is-n23{--n:23}
.soa-cb__match.is-n24{--n:24}
.soa-cb__match.is-n25{--n:25}
.soa-cb__match.is-n26{--n:26}
.soa-cb__match.is-n27{--n:27}
.soa-cb__match.is-n28{--n:28}
.soa-cb__match.is-n29{--n:29}
.soa-cb__match.is-n30{--n:30}

/* ---------- 答え合わせ（event.json の result に勝者がある試合。build.mjs が is-decided と is-win-r / is-win-b / is-draw / is-nc を付ける） ---------- */
/* 答え合わせでは相手の名前を薄くしない */
.soa-cb__match.is-decided .soa-cb__pick-in--r:checked ~ .soa-cb__f--blue .soa-cb__name,.soa-cb__match.is-decided .soa-cb__pick-in--b:checked ~ .soa-cb__f--red .soa-cb__name{opacity:1}
/* 札の行：答え合わせでは、行そのものは透明にして、中の札を横に並べる（間 .3rem）。行の高さは今のまま */
.soa-cb__match.is-decided .soa-cb__mark{visibility:visible;gap:.3rem;padding:0;background:transparent}
.soa-cb__match.is-decided .soa-cb__mark>span{display:none;align-items:center;height:100%;padding:0 .45rem;border-radius:4px;color:#fff;font-size:.66rem;font-weight:800;line-height:1;white-space:nowrap}
.soa-cb__m-hit{background:#c51f2f}
/* 勝者：LINEの緑（#06C755）に近い明るさで、少し青みに振った別の緑。白い文字に弱い影 */
.soa-cb__m-win{background:#08a856;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.soa-cb__m-miss,.soa-cb__m-draw{background:#5b6675;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.soa-cb__card--early .soa-cb__m-miss,.soa-cb__card--early .soa-cb__m-draw{background:#4a5868;box-shadow:none}
/* 勝った選手：「勝者」（予想していてもいなくても出す） */
.soa-cb__match.is-win-r .soa-cb__f--red .soa-cb__m-win,.soa-cb__match.is-win-b .soa-cb__f--blue .soa-cb__m-win{display:inline-flex}
/* 予想して勝った：「◯ 的中」を「勝者」の左に足す */
.soa-cb__match.is-win-r .soa-cb__pick-in--r:checked ~ .soa-cb__f--red .soa-cb__m-hit,.soa-cb__match.is-win-b .soa-cb__pick-in--b:checked ~ .soa-cb__f--blue .soa-cb__m-hit{display:inline-flex}
/* 予想して負けた：「× はずれ」 */
.soa-cb__match.is-win-r .soa-cb__pick-in--b:checked ~ .soa-cb__f--blue .soa-cb__m-miss,.soa-cb__match.is-win-b .soa-cb__pick-in--r:checked ~ .soa-cb__f--red .soa-cb__m-miss{display:inline-flex}
/* 引き分け・無効試合：両方の選手に灰の札（的中の数には入れない） */
.soa-cb__match.is-decided:is(.is-draw,.is-nc) .soa-cb__mark>.soa-cb__m-draw{display:inline-flex}

/* =========================================================
   段階2で足した部品（v5 の色と書体に合わせ、目立たせすぎない）
   ========================================================= */
/* 本番の記事の中で見た目を保つ：テーマのリンクの下線（背景のグラデーション）と、新しいタブの印を消す */
:where(.soa-cb>[class*="soa-cb__"]) a{background-image:none}
/* WordPress の自動整形（wpautop）が表の中に差し込む、クラスの無い <br> と <p> を無効にする（grid のマスを占めて行にすき間ができるため）。部品のクラス付きの p・br には当てない */
:where(.soa-cb>[class*="soa-cb__"]) br:not([class]){display:none}
:where(.soa-cb>[class*="soa-cb__"]) p:not([class]){display:contents}
:where(.soa-cb>[class*="soa-cb__"]) p:not([class]):empty{display:none}
.soa-cb a.soa-cb__prof::after,.soa-cb a.soa-cb__prof.syun-link--new-tab::after{content:none}
/* テーマが外部リンクに付ける .syun-link--new-tab などの赤い下線（背景のグラデーション）を消す */
.soa-cb a.soa-cb__prof,.soa-cb a.soa-cb__prof.syun-link--new-tab,.soa-cb a.soa-cb__prof.syun-internal-link{background-image:none;background-size:0}

/* ---------- 予想の進み具合（表の一番上。JS が動いたときだけ出す） ---------- */
/* 画面の上に固定して見せる（表が画面にある間だけ。親の .soa-cb の下端を過ぎたら一緒に流れる）。
   --soa-cb-sticky-top はサイトの固定ヘッダーの高さ。公開中の記事（2026-10-20 実測）は幅900px以下で header.site-header が sticky・高さ56px、それより広い幅では固定されない。JS が動いたら実際の高さを測って入れ直す */
.soa-cb{--soa-cb-sticky-top:56px}
/* 表の見出し（U-NEXTガイドラインの「出場予定」。結果モードは「結果」）。目立たせない */
.soa-cb__caption{margin:0 0 .4rem;color:#42566f;font-size:.8rem;font-weight:700;line-height:1.5;text-align:left}
.soa-cb__status{position:sticky;top:var(--soa-cb-sticky-top);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;margin:1.6rem -.6rem -1.2rem;padding:.45rem .6rem;border-radius:0 0 8px 8px;background:transparent;box-shadow:none;transition:background-color 160ms ease,box-shadow 160ms ease}
/* 固定されたときだけ、白95%の地と薄い影（下の表と重なっても読めるように） */
.soa-cb__status.is-stuck{background:rgba(255,255,255,.95);box-shadow:0 6px 16px rgba(7,24,45,.12)}
.soa-cb__steps{--fill:#9fc0e6;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;flex:1 1 100%;min-width:0}
.soa-cb__steps>i{display:block;height:5px;border-radius:3px;background:#e4ebf3;transition:background-color 300ms ease,box-shadow 300ms ease}
/* 進むほど濃く：0〜4試合 薄い青、5〜9試合 中間の青、10〜13試合 紺、14試合 濃紺に金の細い下線（満たされた部分全体がその色） */
.soa-cb__status[data-level="2"] .soa-cb__steps{--fill:#4f86c9}
.soa-cb__status[data-level="3"] .soa-cb__steps{--fill:#123e73}
.soa-cb__status[data-level="4"] .soa-cb__steps{--fill:#07182d}
.soa-cb__steps>i.is-on{background:var(--fill)}
.soa-cb__status[data-level="4"] .soa-cb__steps>i.is-on{box-shadow:0 2px 0 #e2b53e}
.soa-cb__status-t{flex:1 1 auto;margin:0;color:#42566f;font-size:.8rem;font-weight:700;line-height:1.5}
.soa-cb__status-t b{color:#121a24;font-weight:900}
/* 予想の締め切りまでの残り（サイト上部のバナーと同じ「N日 HH時間 MM分 SS秒」）：進み具合の文の右（スマホ幅は下の行）。従の文字色・目立たせない */
.soa-cb__cd{flex:0 0 auto;margin:0 0 0 auto;color:#42566f;font-size:.74rem;font-weight:600;line-height:1.5;white-space:nowrap}
.soa-cb__cd-n{font-variant-numeric:tabular-nums}
@container soa-cb (max-width:600px){.soa-cb__cd{flex-basis:100%;margin-left:0}}
/* 全試合を予想し終えたときの「次にすること」（締め切り前だけ）：バーの一番下の行。従の文字色・小さく */
.soa-cb__next{flex:1 1 100%;margin:0;color:#42566f;font-size:.74rem;font-weight:600;line-height:1.6}
.soa-cb__done{display:inline-block;margin-right:.5rem;color:#07182d;font-weight:900;text-decoration:underline 2px #e2b53e;text-underline-offset:.25em}
.soa-cb__hit{color:#c51f2f;font-size:1.25rem;font-weight:900}
.soa-cb.is-result .soa-cb__status{display:none}
.soa-cb__vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 的中数をXにポスト（ブログの「誰かに話せる一言＋Xでポスト」.soa-say と同じボタン。表の一番上と一番下） ---------- */
.soa-cb__share{margin:1.9rem 0 -.6rem;padding:1rem 1.1rem .95rem;border:1px solid #dfe7f0;border-radius:8px;background:#f4f8fd}
.soa-cb__share--bottom{margin:-.4rem 0 1.6rem}
.soa-cb__share-h{margin:0 0 .7rem;color:#121a24;font-size:.95rem;font-weight:800;line-height:1.6}
.soa-cb__share-n{margin:0 .1em;color:#c51f2f;font-size:1.5rem;font-weight:900;line-height:1}
.soa-cb__share-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:0}
.soa-cb a.soa-cb__x{display:inline-flex;align-items:center;gap:.65rem;min-height:48px;padding:0 1.3rem 0 1rem;border:1px solid rgba(255,255,255,.35);border-radius:99px;background:#000;box-shadow:0 2px 6px rgba(0,0,0,.25);color:#fff;font-size:.92rem;font-weight:800;line-height:1.2;text-decoration:none;transition:background-color 160ms cubic-bezier(.2,0,0,1),border-color 160ms cubic-bezier(.2,0,0,1),box-shadow 260ms cubic-bezier(.2,0,0,1),color 160ms cubic-bezier(.2,0,0,1),transform 160ms cubic-bezier(.2,0,0,1)}
.soa-cb a.soa-cb__x::before,.soa-cb a.soa-cb__x::after{content:none;display:none}
/* ホバー・フォーカス：記事の下の「この記事を共有する」の X のボタン（テーマの .syun-share__link--x）と同じ。3px浮く、地と枠 #111、影を少し大きく、文字の下に細い線が中央から伸びる */
.soa-cb a.soa-cb__x:hover,.soa-cb a.soa-cb__x:focus-visible{transform:translateY(-3px);background:#111;border-color:#111;box-shadow:0 15px 30px rgba(0,0,0,.16);color:#fff;text-decoration:none}
.soa-cb__x-t{position:relative}
.soa-cb__x-t::after{content:"";position:absolute;left:0;right:0;top:calc(100% + 3px);height:1.5px;border-radius:999px;background:currentColor;opacity:0;transform:scaleX(.35);transform-origin:center;pointer-events:none;transition:opacity 160ms cubic-bezier(.2,0,0,1),transform 160ms cubic-bezier(.2,0,0,1)}
.soa-cb a.soa-cb__x:hover .soa-cb__x-t::after,.soa-cb a.soa-cb__x:focus-visible .soa-cb__x-t::after{opacity:.78;transform:scaleX(1)}
.soa-cb a.soa-cb__x:focus-visible{outline:2px solid #c51f2f;outline-offset:3px}
.soa-cb__xlogo{display:block;flex:0 0 auto;width:18px;height:18px;fill:currentColor;transform:translateY(.04em)}
.soa-cb__share-note{flex:1 1 200px;color:#42566f;font-size:.76rem;line-height:1.6}

/* ---------- 予想の締め切り後 ---------- */
.soa-cb.is-locked .soa-cb__name,.soa-cb.is-locked .soa-cb__unpick{cursor:default}
@media (hover:hover) and (pointer:fine){
  .soa-cb.is-locked .soa-cb__pick-in--r:not(:checked) ~ .soa-cb__f--red .soa-cb__name:hover .soa-cb__nm,.soa-cb.is-locked .soa-cb__pick-in--b:not(:checked) ~ .soa-cb__f--blue .soa-cb__name:hover .soa-cb__nm{text-decoration-color:transparent}
}

/* ---------- アコーディオンの帯の札（開始まで／放送中／終了。JS が動いたときだけ） ---------- */
.soa-cb__live{display:inline-flex;align-items:center;gap:.35rem;flex:none;padding:.1rem .55rem;border:1px solid color-mix(in srgb,var(--sfg2) 45%,transparent);border-radius:999px;color:var(--sfg2);font-size:.72rem;font-weight:700;line-height:1.4;white-space:nowrap}
.soa-cb__card--prelims .soa-cb__live{border-color:rgba(255,255,255,.75)}
.soa-cb__live.is-live{color:var(--sfg);border-color:color-mix(in srgb,var(--sfg) 55%,transparent)}
/* スマホ幅：帯の札は「表示を切り替え」の下に置く（タイトルの幅を削らない） */
@container soa-cb (max-width:600px){
  .soa-cb.is-js .syun-collapsible-table--joined>summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"title hint chev" "title live chev";column-gap:.6rem;row-gap:.3rem}
  .soa-cb.is-js .syun-collapsible-table__title{grid-area:title}
  .soa-cb.is-js .syun-collapsible-table__hint{grid-area:hint;align-self:end}
  .soa-cb.is-js .soa-cb__live{grid-area:live;justify-self:end;align-self:start}
  .soa-cb.is-js .syun-collapsible-table__chev{grid-area:chev}
  .soa-cb.is-js .syun-collapsible-table--joined>summary:has(.soa-cb__live-now:not([hidden])){grid-template-areas:"title hint chev" "title live chev" "now now now"}
  .soa-cb.is-js .soa-cb__live-now{grid-area:now;justify-self:start;white-space:normal}
}
/* 放送中の試合の目安（開始時刻から自動で出すだけ。実際の進み具合とはずれる） */
.soa-cb__live-now{flex:0 1 auto;min-width:0;color:var(--sfg);font-size:.72rem;font-weight:700;line-height:1.4;white-space:nowrap}
.soa-cb__onair{display:inline-flex;align-items:center;gap:.3rem;height:1.3rem;padding:0 .55rem 0 .45rem;border-radius:999px;background:#c51f2f;color:#fff;font-size:.68rem;font-weight:800;line-height:1;white-space:nowrap}
.soa-cb__onair::before{content:"";flex:none;width:.4rem;height:.4rem;border-radius:50%;background:#fff}
.soa-cb__live-dot{flex:none;width:.45rem;height:.45rem;border-radius:50%;background:#c51f2f;box-shadow:0 0 0 2px rgba(255,255,255,.85)}

/* ---------- Syunの予想（読者が予想したあとにだけ。戦績の行の中） ---------- */
.soa-cb__mark{position:relative}
.soa-cb__bout .soa-cb__match .soa-cb__mark>.soa-cb__syun{position:absolute;top:auto;bottom:calc(100% + var(--sy-g,.12rem));left:50%;transform:translateX(-50%);display:none;align-items:center;gap:.25rem;height:100%;padding:0 .45rem 0 .15rem;border:1px solid rgba(255,255,255,.9);border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);color:#07182d;font-size:.64rem;font-weight:800;letter-spacing:0;line-height:1;text-shadow:none;white-space:nowrap;visibility:visible}
/* 薄い地（アーリー）では枠を紺に */
.soa-cb__card--early .soa-cb__bout .soa-cb__match .soa-cb__mark>.soa-cb__syun{border-color:#123e73;box-shadow:none}
.soa-cb__syun-ic{display:inline-grid;place-items:center;flex:none;box-sizing:border-box;width:14px;height:14px;padding-bottom:1px;border-radius:50%;background:#c51f2f;color:#fff;font-size:9px;font-weight:900;line-height:1}
.soa-cb__bout.is-syun .soa-cb__match .soa-cb__mark>.soa-cb__syun{display:inline-flex}
.soa-cb__bout[data-syun] .soa-cb__mark{margin-top:calc(var(--mk-h) + var(--sy-g,.12rem) + var(--sy-x,.13rem))}
/* Syunの予想 → 読者の札は、PCもスマホも .3rem（2026-10-20 PCをスマホにそろえた） */
.soa-cb__match{--sy-g:.3rem}
/* PC：バッジの無い試合でも、星 → Syunの予想を .5rem（--m-top .05rem ＋ .45rem）あける。スマホは別の指定（--m-top .5rem）があるので PC だけ */
@container soa-cb (min-width:601px){.soa-cb__bout[data-syun]:not(.soa-cb__bout--bdg) .soa-cb__match{--sy-x:.45rem}}
.soa-cb__syun-sr{display:none}
.soa-cb__bout.is-syun .soa-cb__syun-sr{display:inline}

/* ---------- 選手のプロフィールへのリンクの印（戦績の行の右端） ---------- */
.soa-cb a.soa-cb__prof{position:relative;display:inline-flex;align-items:center;gap:.25rem;flex:none;padding:.1rem .45rem;border:1px solid color-mix(in srgb,var(--fg2) 50%,transparent);border-radius:4px;color:var(--fg2);font-size:.68rem;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap;transition:color 160ms ease,border-color 160ms ease,background-color 160ms ease}
/* 押せる範囲は札より少し広く（高さ24px以上） */
.soa-cb a.soa-cb__prof::before{content:"";position:absolute;inset:-.3rem -.15rem}
.soa-cb__card--main{--phb:#e2b53e;--phf:#07182d}
.soa-cb__card--prelims{--phb:#fff;--phf:#16457f}
.soa-cb__card--early{--phb:#123e73;--phf:#fff}
.soa-cb a.soa-cb__prof:hover,.soa-cb a.soa-cb__prof:focus-visible{border-color:var(--phb,var(--ac));background-color:var(--phb,var(--ac));color:var(--phf,#fff)}
.soa-cb a.soa-cb__prof:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.soa-cb__ext{display:block;flex:none;width:10px;height:10px}

/* ---------- カード変更の札（サイトの .badge.soa-change-flag と同じ色。大きさは v5 のバッジに合わせる） ---------- */
.soa-cb .badge.soa-change-flag{display:inline-flex;align-items:center;gap:.35em;min-height:1.5rem;margin:0;padding:0 .65rem 0 .3rem;border:1.5px solid #c77700;border-radius:999px;background:#fff4d6;box-shadow:none;color:#5a3600;font-size:.72rem;font-weight:800;letter-spacing:.02em;line-height:1.1;text-decoration:none;text-transform:none;white-space:nowrap}
.soa-cb .badge.soa-change-flag::before{content:"!";display:grid;place-items:center;width:1.05rem;height:1.05rem;border-radius:999px;background:#ffd966;color:#5a3600;font-size:.7rem;font-weight:900;line-height:1}
.soa-cb .badge.soa-change-flag:hover,.soa-cb .badge.soa-change-flag:focus-visible{background:#ffe9a8;text-decoration:underline}
.soa-cb .badge.soa-change-flag:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ---------- 注目3試合へのジャンプ（説明文の末尾） ---------- */
.soa-cb .soa-cb__note a.soa-cb__more{font-weight:700;white-space:nowrap}

/* ---------- オッズ（読者がその試合を予想したあとにだけ出す。結果のある表では build が出力しない） ---------- */
/* 予想の前に見せると多数派に流される（社会的証明）。自分で選んだあとに見せて、選んだ理由を考え直すきっかけにする（一貫性） */
.soa-cb__odds{display:none;margin:.45rem 0 0;color:var(--fg2);font-size:.7rem;line-height:1.5;text-align:center;font-variant-numeric:tabular-nums}
.soa-cb__odds-l,.soa-cb__odds-v{display:inline-block;white-space:nowrap}
.soa-cb__odds-l{margin-right:.4em}
/* 段（アコーディオン1つ）の全試合で赤か青が選ばれたら、その段のオッズをまとめて出す。未予想＝radio がどれも選ばれていない（:indeterminate）か「外す」（none）が選ばれている。:has の入れ子は使えないので :indeterminate で判定する */
.soa-cb__panel:not(:has(.soa-cb__pick-in--r:indeterminate,.soa-cb__pick-in--none:checked)) .soa-cb__odds{display:block}
/* 注記：その段の末尾に1回。オッズの行と同じ条件 */
.soa-cb__odds-note{display:none;margin:.6rem 0 .4rem;color:var(--fg2);font-size:.68rem;line-height:1.6;text-align:left}
.soa-cb__panel:not(:has(.soa-cb__pick-in--r:indeterminate,.soa-cb__pick-in--none:checked)) .soa-cb__odds-note{display:block}
/* 案内の1行（オッズのある段だけ build が出力）。オッズが出たら消す */
.soa-cb__odds-hint{margin:.1rem 0 .5rem 1.7rem;color:var(--fg2);font-size:.74rem;line-height:1.6}
@container soa-cb (max-width:600px){.soa-cb__odds-hint{margin-left:1.4rem}}
.soa-cb__panel:not(:has(.soa-cb__pick-in--r:indeterminate,.soa-cb__pick-in--none:checked)) .soa-cb__odds-hint{display:none}

/* ---------- 結果の1行（説明文の上） ---------- */
.soa-cb__res{display:block;margin:0 0 .2rem;color:var(--fg);font-size:.8rem;font-weight:800;line-height:1.6}

/* ---------- 全部予想したときのトースト（画面下中央。.soa-cb の外の body に置く） ---------- */
.soa-cb-toast{position:fixed;left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));z-index:9999;width:max-content;max-width:calc(100vw - 2rem);margin:0;padding:.7rem 1.1rem;border-radius:8px;background:#07182d;box-shadow:inset 0 -2px 0 #e2b53e,0 12px 30px rgba(7,24,45,.3);color:#fff;font-family:"Noto Sans JP",system-ui,sans-serif;font-size:.86rem;font-weight:700;line-height:1.5;opacity:0;pointer-events:none;transform:translate(-50%,.75rem);transition:opacity 200ms ease-out,transform 200ms ease-out}
.soa-cb-toast.is-shown{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){
  .soa-cb-toast{transition:opacity 150ms linear;transform:translate(-50%,0)}
  .soa-cb__steps>i,.soa-cb__status,.soa-cb a.soa-cb__prof{transition:none}
  .soa-cb a.soa-cb__x:hover,.soa-cb a.soa-cb__x:focus-visible{transform:none}
  .soa-cb__x-t::after,.soa-cb a.soa-cb__x:hover .soa-cb__x-t::after,.soa-cb a.soa-cb__x:focus-visible .soa-cb__x-t::after{transform:none;transition:opacity 160ms linear}
}

/* =========================================================
   カード変更の知らせ（試合の頭の行の先頭。JS が出す）
   読者：カード変更で外した予想（従の文字色・小さく。次に予想したら消える）／入力モード：Syunの予想を入れ直す試合
   ========================================================= */
.soa-cb__cc{display:block;margin:0 0 .15rem;color:var(--fg2);font-size:.7rem;font-weight:700;line-height:1.45}
.soa-cb__cc--adm{color:var(--fg);font-weight:800}
.soa-cb__cc--adm::before{content:"";display:inline-block;width:.45rem;height:.45rem;margin-right:.35rem;border-radius:50%;background:#c51f2f;box-shadow:0 0 0 2px rgba(255,255,255,.85);vertical-align:.06em}

/* =========================================================
   Syunの予想の入力（その記事を編集できる人にだけ JS が出す。読者には出ない）
   ふだん：表の一番上に小さな「Syunの予想を入力」（白地・紺の文字の丸いボタン）
   入力モード：表の上に固定する帯（白地・金の左線）。読者の「予想」の札・進み具合・Xにポスト・オッズは隠す
   ========================================================= */
.soa-cb__admin{margin:0 0 .6rem}
.soa-cb__adm-idle{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem;margin:0}
.soa-cb__adm-open{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:0 1rem 0 .75rem;border:1px solid #c7d3e1;border-radius:999px;background:#fff;color:#123e73;font:inherit;font-size:.8rem;font-weight:800;line-height:1;cursor:pointer;transition:border-color 160ms ease,background-color 160ms ease}
.soa-cb__adm-open:hover{border-color:#123e73;background:#f4f8fd}
.soa-cb__adm-note{color:#5a6778;font-size:.72rem;font-weight:600}
.soa-cb__adm-edit{position:sticky;top:var(--soa-cb-sticky-top);z-index:6;display:grid;gap:.3rem;padding:.6rem .8rem .65rem;border:1px solid #e9d9a6;border-left:4px solid #e2b53e;border-radius:8px;background:#fffdf6;box-shadow:0 6px 16px rgba(7,24,45,.1)}
.soa-cb__adm-edit:focus{outline:none}
.soa-cb__adm-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .8rem}
.soa-cb__adm-t{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;margin:0;color:#07182d;font-size:.86rem;line-height:1.4}
.soa-cb__adm-t b{font-weight:900}
.soa-cb__adm-n{color:#42566f;font-size:.78rem;font-weight:700}
.soa-cb__adm-btns{display:flex;flex-wrap:wrap;gap:.4rem}
.soa-cb__adm-save,.soa-cb__adm-exit{min-height:2.5rem;padding:0 1.1rem;white-space:nowrap;border-radius:999px;font:inherit;font-size:.8rem;font-weight:800;line-height:1;cursor:pointer}
.soa-cb__adm-save{border:1px solid #123e73;background:#123e73;color:#fff}
.soa-cb__adm-save:hover{background:#07182d;border-color:#07182d}
.soa-cb__adm-save[disabled]{opacity:.6;cursor:wait}
.soa-cb__adm-exit{border:1px solid #c7d3e1;background:#fff;color:#42566f}
.soa-cb__adm-exit:hover{border-color:#42566f}
.soa-cb__adm-open:focus-visible,.soa-cb__adm-save:focus-visible,.soa-cb__adm-exit:focus-visible{outline:3px solid #c51f2f;outline-offset:2px}
.soa-cb__adm-help{margin:0;color:#42566f;font-size:.74rem;line-height:1.6}
.soa-cb__adm-warn{margin:0;padding:.35rem .6rem;border:1px solid #c51f2f;border-radius:6px;background:#fff1f2;color:#7a1520;font-size:.76rem;font-weight:700;line-height:1.5}
.soa-cb__adm-msg{margin:0;color:#0b6b3a;font-size:.78rem;font-weight:700;line-height:1.5}
.soa-cb__adm-msg:empty{display:none}
.soa-cb__adm-msg.is-err{color:#a1121f}
@container soa-cb (max-width:600px){
  .soa-cb__adm-btns{flex:1 1 100%}
  .soa-cb__adm-save,.soa-cb__adm-exit{flex:1 1 0;padding-inline:.6rem}
}
/* 入力モードの間：読者の札・進み具合・案内・Xにポスト・オッズを隠し、Syunの予想の札だけを見せる */
.soa-cb.is-syun-edit .soa-cb__bout .soa-cb__match .soa-cb__mark{visibility:hidden}
.soa-cb.is-syun-edit .soa-cb__status,.soa-cb.is-syun-edit .soa-cb__hint,.soa-cb.is-syun-edit .soa-cb__share,.soa-cb.is-syun-edit .soa-cb__odds,.soa-cb.is-syun-edit .soa-cb__odds-note,.soa-cb.is-syun-edit .soa-cb__odds-hint{display:none!important}
.soa-cb.is-syun-edit .soa-cb__name,.soa-cb.is-syun-edit .soa-cb__unpick{cursor:pointer}
@media (prefers-reduced-motion:reduce){.soa-cb__adm-open{transition:none}}