/* ============================================================================
 * shared-ui.v1.css — Wildrift Pocket 共通コンポーネント CSS
 *
 * 全 762 web HTML file が `<link rel="stylesheet" href="/assets/shared-ui.v1.css">`
 * 経由で読込む single source of truth。 以前は 「shared」 と呼ぶ 46 rule が
 * 全 file に完全複製されていた (合計 ~35KB × 762 file = ~26MB 重複)。
 * 本 file 化で:
 *   - 1 rule 編集 = 全 762 page 自動反映 (drift 構造的に発生不能)
 *   - HTML file size 大幅削減 + CF cache single-file 効率化
 *
 * Cache-busting: file 名に `.v1` を含めて immutable。 CSS rule 更新時は
 * `v2` などに rename (全 HTML の <link href> を bulk 更新) → CF edge cache
 * の古い版 serving を避ける。
 *
 * scouter (Scope OS palette) override は CSS 変数経由:
 *   `:root { --patch-pill-dot-bg: var(--sc-green-glow); }`
 *   をページ inline <style> 冒頭で宣言する pattern。 default 値 (#7dffb0
 *   等) は本 file 内 var fallback で担保。
 *
 * 2026-07-12 A2 refactor (Fable audit findings + user 「一生繰り返すのを
 * 構造的に止める」 判断)。 CLAUDE.md 「shared component drift」 section 参照。
 * ============================================================================ */

.scope-header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;gap:12px;}
@media (min-width:920px){.scope-header-inner{padding:14px 28px;max-width:1200px;margin:0 auto;}}
/* 2026-08-11 (feedback「iPhone のランドスケープでデータ管理内の説明文の
   フォントサイズがめちゃくちゃでかい」): iOS Safari + iOS Chrome (WebKit) の
   default で landscape 時 text auto-inflation (幅拡大に応じて font-size を
   40-50% scale up) が発火して font 全体が巨大化。 site-wide で 100% に固定。 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
.site-brand-row{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
@media (min-width:920px){.site-brand-row{gap:12px;flex:none;}}
.site-title{display:flex;flex-direction:row;align-items:center;gap:10px;background:transparent;border:0;padding:0;cursor:pointer;color:inherit;text-decoration:none;}
@media (min-width:920px){.site-title{gap:13px;}}
.site-title-mark{width:32px;height:32px;flex-shrink:0;display:block;}
@media (min-width:920px){.site-title-mark{width:44px;height:44px;}}
.site-title-text-wrap{display:inline-flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0;}
@media (min-width:920px){.site-title-text-wrap{gap:9px;}}
.site-title-text{display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap;font-family:'Noto Sans JP',sans-serif;line-height:1;}
.site-title-name{font-weight:900;font-size:var(--sc-fs-title);letter-spacing:-0.5px;color:#f4f1e8;}
@media (min-width:920px){.site-title-name{font-size:var(--sc-fs-hero);}}
.site-title-accent{font-weight:700;font-size:var(--sc-fs-title);color:#e9cd76;}
@media (min-width:920px){.site-title-accent{font-size:var(--sc-fs-hero);}}
.site-title-tagline{position:relative;font-family:'Orbitron',sans-serif;font-weight:600;font-size:8px;letter-spacing:.22em;color:#c79a3c;line-height:1;white-space:nowrap;padding-top:6px;margin-top:2px;}
@media (min-width:920px){.site-title-tagline{font-size:10px;letter-spacing:.28em;padding-top:8px;margin-top:3px;}}
.site-title-tagline::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,#e9cd76,transparent);opacity:.85;}
@media (min-width:920px){.site-title-tagline::before{height:2px;}}
.patch-pill{display:inline-flex;align-items:center;gap:6px;text-decoration:none;background:rgba(125,255,176,.08);border:1px solid rgba(125,255,176,.22);border-radius:999px;padding:3px 9px 3px 7px;transition:background .15s;flex-shrink:0;}
.patch-pill{transition:background .15s,opacity .18s ease-out;}
.patch-pill:has(.patch-pill-ver:empty){visibility:hidden;opacity:0;}
@media (min-width:920px){.patch-pill{padding:5px 11px 5px 9px;}}
.patch-pill:hover{background:rgba(125,255,176,.14);}
.patch-pill-dot{width:5px;height:5px;border-radius:50%;background:var(--patch-pill-dot-bg,#7dffb0);flex-shrink:0;}
@media (min-width:920px){.patch-pill-dot{width:7px;height:7px;box-shadow:0 0 0 3px rgba(125,255,176,.18);}}
.patch-pill-num{font-family:'JetBrains Mono','DM Mono',monospace;font-weight:500;font-size:10px;color:#9fe9c0;letter-spacing:.02em;white-space:nowrap;}
.patch-pill-ver{display:inline-block;min-width:2.6em;text-align:left;}
@media (min-width:920px){.patch-pill-num{font-size:11px;}}
.patch-pill-pfx{display:none;}
@media (min-width:920px){.patch-pill-pfx{display:inline;}}
.rank-pill{display:inline-flex;align-items:center;gap:5px;text-decoration:none;background:rgba(255,216,58,.08);border:1px solid rgba(255,216,58,.28);border-radius:999px;padding:3px 7px;transition:background .15s;flex-shrink:0;margin-left:6px;}
@media (min-width:920px){.rank-pill{padding:5px 11px 5px 9px;margin-left:8px;}}
.rank-pill:hover{background:rgba(255,216,58,.16);}
.rank-pill-icon{width:13px;height:11px;color:#ffd83a;flex-shrink:0;display:block;}
@media (min-width:920px){.rank-pill-icon{width:15px;height:13px;}}
.rank-pill-lbl{font-family:'JetBrains Mono','DM Mono',monospace;font-weight:500;font-size:10px;color:#ffd83a;letter-spacing:.02em;white-space:nowrap;}
/* 2026-08-11 (feedback「iPhone 8 でランドスケープで見た時にナビにパッチ情報
   とランキング情報がかぶっている」): 元 rule は portrait のみ label hide だが、
   iPhone 8 landscape (幅 667px) など狭小 landscape 端末で site-title + patch-pill
   + rank-pill 全部が nav に fit しない。 max-width:700px を追加して landscape 端
   末 (幅 700 未満) でも label hide、 rank-pill は icon のみに縮小。 */
@media (max-width:919px) and (orientation:portrait), (max-width:700px){.rank-pill-lbl{display:none;}}
@media (min-width:920px){.rank-pill-lbl{font-size:11px;}}
/* Rank-change arrow — 前回 pipeline run 時 の 順位 との 差分。
   ↑ (U+2191) / ↓ (U+2193) / − (U+2212) は 全 BMP arrow/math block、
   emoji プレーン外 なので check_ui_consistency の emoji-ban に触れない
   (arrow chars は CSS content: にだけ現れる)。 4b / 4i / 4j / home top10
   で使用。 幅 14-16px、 .scope-rank-n の直後に inline-block で配置。 */
.rank-change{display:inline-flex;align-items:center;justify-content:center;width:14px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;line-height:1;flex:none;}
@media (min-width:920px){.rank-change{width:16px;font-size:12px;}}
.rank-change[data-dir="up"]{color:#7dffb0;}
.rank-change[data-dir="down"]{color:#ff7a90;}
.rank-change[data-dir="same"],
.rank-change[data-dir="new"]{color:#5a7b6b;}
.rank-change[data-dir="none"]{color:transparent;}
.rank-change[data-dir="up"]::before{content:'\2191';} /* ↑ UPWARDS ARROW */
.rank-change[data-dir="down"]::before{content:'\2193';} /* ↓ DOWNWARDS ARROW */
.rank-change[data-dir="same"]::before,
.rank-change[data-dir="new"]::before,
.rank-change[data-dir="none"]::before{content:'\2212';} /* − MINUS SIGN */

.header-actions{display:flex;gap:0.5rem;align-items:center;flex-shrink:0;}
.lang-toggle-icon{display:inline-block;width:0.95rem;height:0.95rem;color:currentColor;flex-shrink:0;}
@media (min-width:920px){.lang-toggle-icon{width:1.15rem;height:1.15rem;}}
.lang-toggle-code{display:none;}
.brand-paul{color:#bdffd6;}
.brand-paul-dot{color:var(--brand-paul-dot-color,#ffd83a);}
.lang-en{display:none;}
html[data-lang="en"] .lang-ja{display:none;}
html[data-lang="en"] .lang-en{display:initial;}

/* Milestone A ゲーミフィケーション: バッジ収集 (2026-07-30 実装)。
 * 3 系統 UI (strip / overlay / tile-dot) を全 page で共通描画するため shared に配置。
 * strip = scouter hero card + champion 詳細 progress section + profile tile 内
 * overlay = build 保存直後の unlock 通知 modal (fixed inset:0, tap で 即閉じ) */
.wrp-badge-strip-slot:empty{display:none;}
/* Strip container 全体 clickable <a>。 2 column layout: 左 content (text + track)、
   右 mini card preview (2026-07-31 user feedback「該当チャンピオンのキラカードを
   小さく表示」)。 */
.wrp-badge-strip{position:relative;display:flex;flex-direction:row;align-items:center;gap:12px;padding:10px 14px 12px 20px;border:1px solid rgba(125,255,176,.22);border-radius:10px;background:linear-gradient(135deg,rgba(125,255,176,.07),rgba(125,255,176,.015));font-family:'Noto Sans JP',sans-serif;transition:border-color .3s,box-shadow .3s,background .3s;overflow:hidden;text-decoration:none;color:inherit;cursor:pointer;}
.wrp-badge-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;}
/* Mini card preview: CardPicture aspect 300/512 で小 thumbnail、 mastered 時 kira 演出 */
.wrp-badge-mini-card{position:relative;flex:0 0 auto;width:48px;aspect-ratio:300/512;border-radius:6px;overflow:hidden;background:#1D2740;box-shadow:0 2px 8px -2px rgba(0,0,0,.5);}
.wrp-badge-mini-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.wrp-badge-mini-holo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,122,200,.45),rgba(255,182,94,.4),rgba(94,232,176,.4),rgba(94,168,255,.45),rgba(176,122,255,.45));background-size:300% 300%;mix-blend-mode:overlay;animation:wrp-holo-shift 6s linear infinite alternate;}
.wrp-badge-mini-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.45) 46%,transparent 62%);background-size:280% 280%;animation:wrp-holo-shift 3.5s linear infinite alternate;}
@keyframes wrp-holo-shift{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
/* 2026-08-14 真キラ (tier 3): reference の champion-card-reference.html
   の .is-kira 相当。 tier 2 (rainbow gradient のみ) と 差別化する 為に
   「箔」 (pinwheel conic gradient) を 追加、 background-blend-mode: overlay
   で rainbow と 合成 → 光沢感 が 増す。 mix-blend-mode は 引き続き overlay
   維持 (画像を washing out しない)。 v3 fix: v2 の gold gradient + screen
   は 「発光しすぎ でチャンピオン見えない」 で NG、 reference design 通りに
   戻した。 mini scale (48px) では 44px cell だと ほぼ 1 cell で 見えない
   ので 8px cell に scale down。 outer glow は overflow:hidden で clip
   されるので inset gold 縁 (1.5px) で 差別化。 */
.wrp-badge-mini-truekira{box-shadow:0 2px 8px -2px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,231,166,.85);}
/* v4 fix: reference の README で 明示 「虹は動かない、 動くのはシーンのみ」
   に従い animation: none !important で base の wrp-holo-shift を無効化。
   sheen 側 (base の wrp-holo-shift 3.5s) は そのまま 動かして 白帯 sweep
   のみ 保持。 */
.wrp-badge-mini-truekira-holo{background-image:linear-gradient(115deg,rgba(124,245,200,.6),rgba(110,195,255,.6),rgba(199,155,255,.6),rgba(255,154,213,.6),rgba(255,215,110,.6)),conic-gradient(from 45deg,#fff,#6a6a6a 25%,#fff 50%,#6a6a6a 75%,#fff) !important;background-blend-mode:overlay !important;background-size:100% 100%,8px 8px !important;animation:none !important;}
.wrp-badge-mini-truekira-sheen{background-image:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.25) 52%,transparent 62%) !important;}
@media (prefers-reduced-motion:reduce){.wrp-badge-mini-holo,.wrp-badge-mini-sheen{animation:none;}}
.wrp-badge-strip:hover{border-color:rgba(125,255,176,.5);background:linear-gradient(135deg,rgba(125,255,176,.12),rgba(125,255,176,.03));}
.wrp-badge-strip[data-full="true"]:hover{border-color:#ffe97a;background:linear-gradient(135deg,rgba(255,216,58,.2),rgba(255,216,58,.05));}
/* Full-unlock (MASTERED) 状態: user 2026-07-30 feedback「達成で何かに変わる」対策。
   Container 全体が golden gradient border + inner glow + shimmer sweep で
   「ご褒美」 感を演出。 headline count / cards / fill bar も同時 golden 化。 */
.wrp-badge-strip[data-full="true"]{border-color:#ffd83a;background:linear-gradient(135deg,rgba(255,216,58,.14),rgba(255,216,58,.03));box-shadow:0 0 18px rgba(255,216,58,.25),inset 0 0 12px rgba(255,216,58,.08);}
.wrp-badge-strip[data-full="true"]::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0%,transparent 40%,rgba(255,216,58,.22) 50%,transparent 60%,transparent 100%);background-size:200% 100%;animation:wrp-badge-shimmer 3.2s ease-in-out infinite;}
@keyframes wrp-badge-shimmer{0%{background-position:200% 0;}100%{background-position:-100% 0;}}
@media (prefers-reduced-motion:reduce){.wrp-badge-strip[data-full="true"]::before{animation:none;background:linear-gradient(115deg,transparent 45%,rgba(255,216,58,.14) 50%,transparent 55%);}}
.wrp-badge-headline{position:relative;z-index:1;display:flex;align-items:center;gap:8px;}
.wrp-badge-headline-count{font-family:'Orbitron',sans-serif;font-weight:700;font-size:16px;color:var(--sc-green-glow,#7dffb0);letter-spacing:.02em;line-height:1;text-shadow:0 0 8px rgba(125,255,176,.35);transition:color .3s,text-shadow .3s;}
@media (min-width:600px){.wrp-badge-headline-count{font-size:19px;}}
.wrp-badge-strip[data-full="true"] .wrp-badge-headline-count{color:#ffd83a;text-shadow:0 0 10px rgba(255,216,58,.5);}
.wrp-badge-headline-slash{font-size:11px;color:rgba(159,233,192,.55);margin:0 1px;}
@media (min-width:600px){.wrp-badge-headline-slash{font-size:13px;}}
.wrp-badge-strip[data-full="true"] .wrp-badge-headline-slash{color:rgba(255,216,58,.55);}
/* Label: landscape 狭幅 ident-card 用に font 縮小 (2026-07-31 user feedback「ランドスケープ時
   のバッジ収集エリアの マイコレクション がフォント大きい、 更に厳しい」対応)。
   letter-spacing も .12em → .05em で 全幅 短縮。 */
.wrp-badge-headline-lbl{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:9px;color:#bfeecf;letter-spacing:.05em;text-transform:uppercase;line-height:1;white-space:nowrap;}
@media (min-width:600px){.wrp-badge-headline-lbl{font-size:10px;letter-spacing:.08em;}}
/* NOTE: .wrp-badge-headline-mastered rule was removed (2026-07-30 user feedback
   「ビルド編集画面の MASTERED が消えていない」)。 全 unlock 演出 は container 全体の
   golden shimmer + fill bar gold + pip gold + bob animation で 表現 する。 */
/* Text CTA (2026-07-30 user feedback「マイページボタンはテキスト形式にマイコレクション」)。
   chip button styling 撤廃、 headline label に inline arrow で 誘導 意図 のみ 残す。
   strip 全体 が clickable なので button styling は不要。 */
.wrp-badge-headline-lbl{cursor:pointer;}
.wrp-badge-headline-arrow{display:inline-block;margin-left:2px;transition:transform .18s;color:var(--sc-green-glow,#7dffb0);font-weight:700;}
.wrp-badge-strip:hover .wrp-badge-headline-arrow{transform:translateX(3px);}
.wrp-badge-strip[data-full="true"] .wrp-badge-headline-arrow{color:#ffd83a;}
/* Track wrapper — pip の 各 % 位置 と 揃えた text label 3 個 を track の上に配置
   (2026-07-30 user feedback「登録とフル装備表現はライン上への テキスト補足のみに」対応)。
   card row (ボタン形式) は 撤廃、 badge 名前 は track 直上 に labels。 */
.wrp-badge-track-wrap{position:relative;padding-top:16px;}
@media (min-width:600px){.wrp-badge-track-wrap{padding-top:18px;}}
.wrp-badge-track-labels{position:absolute;top:0;left:0;right:0;height:14px;pointer-events:none;}
.wrp-badge-track-label{position:absolute;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:8px;color:rgba(159,233,192,.55);letter-spacing:0;white-space:nowrap;line-height:1;transition:color .3s;}
@media (min-width:600px){.wrp-badge-track-label{font-size:9px;letter-spacing:.02em;}}
.wrp-badge-track-label-on{color:#eafff3;font-weight:700;}
.wrp-badge-strip[data-full="true"] .wrp-badge-track-label-on{color:#ffd83a;text-shadow:0 0 6px rgba(255,216,58,.35);}
/* Edge label 見切れ fix (2026-07-30 user feedback「試合記録の文字が見切れてる」)。
   1st label = left-anchor (translateX 0)、 last label = right-anchor (translateX -100%)、
   中間 は 中央揃え (default translateX -50%)。 3 label 想定。 */
.wrp-badge-track-label:first-of-type{transform:translateX(-20%);}
.wrp-badge-track-label:last-of-type{transform:translateX(-80%);}

/* Fill bar — 「タワー進撃レーン」 メタファー: 進撃の道 の 幅で 進捗 視覚化、
   道の上を tower silhouette が 立つ、 最後は nexus。 全 unlock 時 は green → gold。 */
.wrp-badge-fill-track{position:relative;z-index:1;height:18px;border-radius:9px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(159,233,192,.12);overflow:visible;}
.wrp-badge-fill-track::before{content:'';position:absolute;top:50%;left:6px;right:6px;height:1px;background:repeating-linear-gradient(90deg,rgba(159,233,192,.25) 0 4px,transparent 4px 10px);transform:translateY(-.5px);pointer-events:none;}
.wrp-badge-fill-bar{height:100%;border-radius:9px;background:linear-gradient(90deg,rgba(94,226,161,.55),rgba(125,255,176,.7));box-shadow:0 0 8px rgba(125,255,176,.4),inset 0 0 6px rgba(125,255,176,.2);transition:width .45s ease-out,background .3s,box-shadow .3s;}
.wrp-badge-strip[data-full="true"] .wrp-badge-fill-bar{background:linear-gradient(90deg,rgba(255,184,0,.5),rgba(255,216,58,.75),rgba(255,242,168,.7));box-shadow:0 0 12px rgba(255,216,58,.5),inset 0 0 8px rgba(255,216,58,.25);}
/* Legacy dot-style pip (現在 未使用、 backwards compat / 他コンポーネント経由の pip 用に保持) */
.wrp-badge-fill-pip{position:absolute;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:#0c1a12;border:1.5px solid rgba(159,233,192,.35);transition:background .3s,border-color .3s,box-shadow .3s;}
.wrp-badge-fill-pip-on{background:var(--sc-green-glow,#7dffb0);border-color:var(--sc-green-glow,#7dffb0);box-shadow:0 0 6px rgba(125,255,176,.55);}
.wrp-badge-strip[data-full="true"] .wrp-badge-fill-pip-on{background:#ffd83a;border-color:#ffd83a;box-shadow:0 0 8px rgba(255,216,58,.7);}
/* Minion pip (2026-07-30「ミニオンが貯まる表現」対応)。 pip を SVG minion silhouette 化。
   Locked = 灰色 outline のみ、 unlocked = 濃い緑 + subtle drop-shadow で「進出感」、
   MASTERED = gold + bob animation (「勝ちに近い」 演出)。 */
.wrp-badge-fill-minion{position:absolute;top:50%;transform:translate(-50%,-55%);width:32px;height:32px;background:transparent;border:none;box-shadow:none;padding:2px;border-radius:50%;background-color:#0c1a12;box-sizing:border-box;color:rgba(159,233,192,.4);transition:color .35s,background-color .35s,box-shadow .35s;}
/* 2026-08-22 (user 「マイコレクションの導線エリア、 ログが右に見切れている」):
   pip は position:absolute; left:{positions[i]}%; transform:translate(-50%,-55%)
   で配置されるので、 最右 pip (left:100%) は幅 32px の 半分 = 16px が container
   右端 の 外へ 突出。 最左 pip も同 pattern だが 左は 「見切れ」 感が小さい。
   最右 / 最左 に translate オフセットで pip 全体を container 内に 収める。
   ラベル (.wrp-badge-track-label:first/last-of-type) と 同 pattern。 */
.wrp-badge-fill-minion:first-of-type{transform:translate(-20%,-55%);}
.wrp-badge-fill-minion:last-of-type{transform:translate(-80%,-55%);}
@keyframes wrp-badge-minion-bob-first{0%,100%{transform:translate(-20%,-55%);}50%{transform:translate(-20%,-70%);}}
@keyframes wrp-badge-minion-bob-last{0%,100%{transform:translate(-80%,-55%);}50%{transform:translate(-80%,-70%);}}
.wrp-badge-fill-minion svg{width:100%;height:100%;display:block;}
.wrp-badge-fill-minion.wrp-badge-fill-pip-on{color:var(--sc-green-glow,#7dffb0);background-color:rgba(10,28,18,.9);box-shadow:0 0 12px rgba(125,255,176,.55),0 0 4px rgba(125,255,176,.7);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));}
.wrp-badge-strip[data-full="true"] .wrp-badge-fill-minion.wrp-badge-fill-pip-on{color:#ffd83a;background-color:rgba(30,20,5,.9);box-shadow:0 0 14px rgba(255,216,58,.65),0 0 5px rgba(255,216,58,.85);animation:wrp-badge-minion-bob 2.4s ease-in-out infinite;}
/* Second minion delays bob so 「軍勢っぽい」 wave feel が出る */
.wrp-badge-strip[data-full="true"] .wrp-badge-fill-minion.wrp-badge-fill-pip-on:nth-of-type(2){animation-delay:.6s;}
.wrp-badge-strip[data-full="true"] .wrp-badge-fill-minion.wrp-badge-fill-pip-on:nth-of-type(3){animation-delay:1.2s;}
/* first / last の bob は translate offset を保った variant を使う (2026-08-22 見切れ対応) */
.wrp-badge-strip[data-full="true"] .wrp-badge-fill-minion.wrp-badge-fill-pip-on:first-of-type{animation-name:wrp-badge-minion-bob-first;}
.wrp-badge-strip[data-full="true"] .wrp-badge-fill-minion.wrp-badge-fill-pip-on:last-of-type{animation-name:wrp-badge-minion-bob-last;}
@keyframes wrp-badge-minion-bob{0%,100%{transform:translate(-50%,-55%);}50%{transform:translate(-50%,-70%);}}
@media (prefers-reduced-motion:reduce){.wrp-badge-strip[data-full="true"] .wrp-badge-fill-minion.wrp-badge-fill-pip-on{animation:none;}}
.wrp-badge-cards{position:relative;z-index:1;display:grid;gap:6px;grid-template-columns:repeat(var(--wrp-badge-card-cols,2),1fr);}
.wrp-badge-strip[data-cols="2"] .wrp-badge-cards{grid-template-columns:repeat(2,1fr);}
.wrp-badge-strip[data-cols="3"] .wrp-badge-cards{grid-template-columns:repeat(3,1fr);}
.wrp-badge-strip[data-cols="4"] .wrp-badge-cards{grid-template-columns:repeat(4,1fr);}
/* Card は 静的 display (interactive じゃない = user 2026-07-30 feedback で
   「ボタンに見えるのに 全体 click で違和感」 の対策)。 hover 効果は unlock 済 のみ
   軽く残し (glow を強調)、 未 unlock は完全 no-interaction。 */
.wrp-badge-card-mini{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid rgba(159,233,192,.15);border-radius:8px;background:rgba(255,255,255,.02);}
.wrp-badge-card-mini-on{border-color:var(--sc-green-glow,#7dffb0);background:linear-gradient(180deg,rgba(125,255,176,.14),rgba(125,255,176,.04));box-shadow:0 0 12px rgba(125,255,176,.22),inset 0 0 8px rgba(125,255,176,.08);transition:border-color .3s,background .3s,box-shadow .3s;}
.wrp-badge-strip[data-full="true"] .wrp-badge-card-mini-on{border-color:#ffd83a;background:linear-gradient(180deg,rgba(255,216,58,.18),rgba(255,216,58,.04));box-shadow:0 0 12px rgba(255,216,58,.32),inset 0 0 8px rgba(255,216,58,.1);}
.wrp-badge-strip[data-full="true"] .wrp-badge-card-mini-on .wrp-badge-card-mini-icon{color:#ffd83a;filter:drop-shadow(0 0 5px rgba(255,216,58,.6));}
.wrp-badge-card-mini-icon{width:22px;height:22px;color:rgba(159,233,192,.3);flex-shrink:0;transition:color .18s;}
.wrp-badge-card-mini-icon svg{width:100%;height:100%;display:block;}
.wrp-badge-card-mini-on .wrp-badge-card-mini-icon{color:var(--sc-green-glow,#7dffb0);filter:drop-shadow(0 0 4px rgba(125,255,176,.5));}
.wrp-badge-card-mini-label{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(159,233,192,.55);letter-spacing:.05em;line-height:1.15;text-align:center;}
.wrp-badge-card-mini-on .wrp-badge-card-mini-label{color:#eafff3;font-weight:700;}
/* Legacy dot styles (overlay 内で使うので保持) */
.wrp-badge-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:transparent;border:1.5px solid rgba(159,233,192,.32);}
.wrp-badge-dot-on{background:var(--sc-green-glow,#7dffb0);border-color:var(--sc-green-glow,#7dffb0);box-shadow:0 0 6px rgba(125,255,176,.5);}
/* 2026-07-31 landscape 縦幅 見切れ 対策: `align-items:center` + no overflow だと
   content > viewport height の時に 上下 均等に クリップされて上端 unreachable。
   `align-items:flex-start` + `overflow-y:auto` + inner に `margin:auto 0` で
   「収まる時は中央、 溢れる時は上から scroll」 の robust pattern に。 */
.wrp-badge-overlay{position:fixed;inset:0;z-index:9999;background:rgba(4,10,7,.72);display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;-webkit-tap-highlight-color:transparent;animation:wrp-badge-overlay-fade .18s ease-out;cursor:pointer;}
/* hidden attribute の specificity 対策 (display:flex に負けて overlay が閉じない bug fix)。 */
.wrp-badge-overlay[hidden]{display:none;}
@media (prefers-reduced-motion:reduce){.wrp-badge-overlay{animation:none;}}
@keyframes wrp-badge-overlay-fade{from{opacity:0;}to{opacity:1;}}
.wrp-badge-overlay-inner{position:relative;max-width:400px;width:100%;margin:auto 0;background:radial-gradient(120% 100% at 50% 0%,#0f2a1a,#07140d);border:1.5px solid var(--sc-green-glow,#7dffb0);border-radius:14px;padding:22px 20px 18px;box-shadow:0 0 32px rgba(125,255,176,.35);color:#eafff3;text-align:center;font-family:'Noto Sans JP',sans-serif;}
/* landscape 短い viewport (max-height:600px 相当 = phone / Chromebook clamshell の
   landscape 時) だと 上記 scroll fallback だけでは 「見えるべき情報が下に隠れる」
   感覚 が 残る ので、 padding / gap / thumb size を 圧縮 して 収まり を 優先。 */
@media (orientation:landscape) and (max-height:600px){
  .wrp-badge-overlay{padding:12px;}
  .wrp-badge-overlay-inner{padding:16px 18px 14px;border-radius:12px;}
  .wrp-badge-overlay-header{gap:6px;margin-bottom:10px;}
  .wrp-badge-overlay-thumb{width:52px;height:52px;}
  .wrp-badge-overlay-champ{font-size:13px;}
  .wrp-badge-overlay-title{font-size:16px;}
  .wrp-badge-overlay-cards{gap:8px;margin-bottom:10px;}
}
.wrp-badge-overlay-close{position:absolute;top:8px;right:8px;width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(159,233,192,.25);border-radius:50%;background:rgba(7,18,12,.7);color:#bfeecf;cursor:pointer;transition:all .15s;}
.wrp-badge-overlay-close:hover{border-color:var(--sc-green-glow,#7dffb0);color:#eafff3;background:rgba(125,255,176,.14);}
.wrp-badge-overlay-close svg{width:16px;height:16px;display:block;}
.wrp-badge-overlay-header{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:14px;}
.wrp-badge-overlay-thumb{width:72px;height:72px;border-radius:50%;border:2px solid var(--sc-green-glow,#7dffb0);object-fit:cover;box-shadow:0 0 12px rgba(125,255,176,.35);}
.wrp-badge-overlay-champ{font-size:14px;font-weight:700;color:#bfeecf;letter-spacing:.02em;}
.wrp-badge-overlay-title{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:700;color:var(--sc-green-glow,#7dffb0);letter-spacing:.05em;text-shadow:0 0 8px rgba(125,255,176,.5);}
.wrp-badge-overlay-cards{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.wrp-badge-card{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(125,255,176,.08);border:1px solid rgba(125,255,176,.24);border-radius:9px;text-align:left;}
.wrp-badge-card-dot{width:14px;height:14px;flex-shrink:0;}
.wrp-badge-card-label{font-size:13px;font-weight:700;color:#eafff3;flex-shrink:0;}
.wrp-badge-card-desc{font-size:11px;color:#bfeecf;line-height:1.4;flex:1;}
.wrp-badge-overlay-hint{font-family:'JetBrains Mono',monospace;font-size:10px;color:#6fa989;letter-spacing:.08em;}

/* 2026-08-14: キラ (tier 2 以上) unlock 時 の 大判 TCG カード 演出。
   reference design: champion-card-reference.html の .is-kira 相当。
   63:88 aspect card。 mobile では viewport 幅に応じて縮小。 tier 3 (真キラ)
   では foil を gold 主体に差替。 v2 fix: 大きく + 目立たせる。 */
.wrp-badge-overlay-inner-truekira{max-width:min(460px,94vw);background:radial-gradient(120% 100% at 50% 0%,#1a1006,#0a0602);border-color:#e8b84b;box-shadow:0 0 40px rgba(232,184,75,.5),0 0 80px rgba(255,215,110,.25);padding:24px 22px 20px;}
.wrp-badge-overlay-truekira{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:18px;animation:wrp-truekira-reveal .5s cubic-bezier(.2,1.1,.4,1) both;}
.wrp-badge-overlay-truekira-title{font-family:'Orbitron','Noto Sans JP',sans-serif;font-size:22px;font-weight:700;letter-spacing:.06em;background:linear-gradient(90deg,#FFE9A8,#E8B84B,#FFF3C8);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 16px rgba(232,184,75,.45);}
.wrp-badge-overlay-truekira-sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#c8a45a;text-transform:uppercase;margin-bottom:10px;}
.wrp-badge-overlay-truekira-card{position:relative;width:min(340px,78vw);aspect-ratio:63/88;border-radius:22px;overflow:hidden;background:#1D2740;box-shadow:0 18px 44px rgba(140,90,240,.5),0 0 36px rgba(199,155,255,.35);animation:wrp-truekira-cardpop .7s cubic-bezier(.2,1.2,.4,1) both;}
/* tier 1 (コモン) modifier: foil / sheen なし、 subtle blue-black shadow
   (reference の normal card 相当)、 gold text-clip も キャンセルして plain
   white/light 色に。 */
.wrp-badge-overlay-truekira-card.wrp-badge-overlay-truekira-card-common{box-shadow:0 12px 30px rgba(23,32,64,.4);}
.wrp-badge-overlay-truekira-card-common .wrp-badge-overlay-truekira-foil,
.wrp-badge-overlay-truekira-card-common .wrp-badge-overlay-truekira-sheen{display:none;}
.wrp-badge-overlay-truekira-card-common .wrp-badge-overlay-truekira-name{background:none;-webkit-background-clip:initial;background-clip:initial;color:#eafff3;}
.wrp-badge-overlay-truekira-card-common .wrp-badge-overlay-truekira-subname{background:none;-webkit-background-clip:initial;background-clip:initial;color:#bfeecf;}
/* tier 3 (キラ) modifier: gold は全撤廃、 subtle gold outline 1.5px のみ 追加 で
   上位感を出す (reference の purple glow base は保持)。 */
.wrp-badge-overlay-truekira-card.wrp-badge-overlay-truekira-card-tier3{box-shadow:0 18px 44px rgba(140,90,240,.55),0 0 36px rgba(199,155,255,.4),0 0 0 1.5px rgba(255,231,166,.7);}
.wrp-badge-overlay-truekira-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block;}
/* Base foil = tier 2 (旧キラ) スケールアップ: simple rainbow のみ、 animated。
   pinwheel conic は tier 3 のみ 追加 (下 modifier で override)。 */
.wrp-badge-overlay-truekira-foil{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(120deg,rgba(255,122,200,.5),rgba(255,182,94,.45),rgba(94,232,176,.45),rgba(94,168,255,.5),rgba(176,122,255,.5));background-size:300% 300%;mix-blend-mode:overlay;animation:wrp-truekira-shift 6s linear infinite alternate;}
/* tier 3 = reference design そのまま: rainbow + pinwheel foil。
   background-blend-mode: overlay で 2 層合成、 mix-blend-mode: overlay で
   画像を washing out しない。 reference README 「虹は動かない」 に従い
   animation: none で 静止。 */
.wrp-badge-overlay-truekira-card-tier3 .wrp-badge-overlay-truekira-foil{background-image:linear-gradient(115deg,rgba(124,245,200,.95),rgba(110,195,255,.95),rgba(199,155,255,.95),rgba(255,154,213,.95),rgba(255,215,110,.95)),conic-gradient(from 45deg,#fff,#6a6a6a 25%,#fff 50%,#6a6a6a 75%,#fff);background-blend-mode:overlay;background-size:100% 100%,44px 44px;mix-blend-mode:overlay;animation:none;}
.wrp-badge-overlay-truekira-sheen{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.25) 52%,transparent 62%);background-size:280% 280%;animation:wrp-truekira-shift 3.5s linear infinite alternate;}
.wrp-badge-overlay-truekira-scrim{position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(180deg,transparent,rgba(16,10,32,.9));pointer-events:none;}
.wrp-badge-overlay-truekira-text{position:absolute;left:0;right:0;bottom:0;padding:0 22px 22px;display:flex;flex-direction:column;gap:6px;text-align:left;}
.wrp-badge-overlay-truekira-subname{font-family:'M PLUS 1p','Noto Sans JP',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;background:linear-gradient(90deg,#FF9AD5,#FFD76E,#6EC3FF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.wrp-badge-overlay-truekira-card-tier3 .wrp-badge-overlay-truekira-subname{background:linear-gradient(90deg,#FFD76E,#E8B84B,#FFE9A8);-webkit-background-clip:text;background-clip:text;color:transparent;}
.wrp-badge-overlay-truekira-name{font-family:'M PLUS 1p','Noto Sans JP',sans-serif;font-size:34px;font-weight:900;line-height:1.15;background:linear-gradient(90deg,#FFE9A8,#E8B84B,#FFF3C8);-webkit-background-clip:text;background-clip:text;color:transparent;}
@keyframes wrp-truekira-shift{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
@keyframes wrp-truekira-cardpop{0%{opacity:0;transform:scale(.7) translateY(20px);}60%{opacity:1;transform:scale(1.04) translateY(0);}100%{opacity:1;transform:scale(1) translateY(0);}}
@keyframes wrp-truekira-reveal{0%{opacity:0;transform:translateY(-8px);}100%{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.wrp-badge-overlay-truekira-sheen{animation:none;}.wrp-badge-overlay-truekira,.wrp-badge-overlay-truekira-card{animation:none;}}
@media (max-width:520px){
  .wrp-badge-overlay-truekira-title{font-size:19px;}
  .wrp-badge-overlay-truekira-name{font-size:28px;}
  .wrp-badge-overlay-truekira-card{width:min(300px,76vw);}
}
/* 2026-08-14 v6: landscape / PC で 縦幅 FV に収める。 card を width-driven
   から height-driven に切替 (max-height 55vh / 460px)。 タイトル/サブ/badge
   card spacing も コンパクト化して 1-2 badge unlock が 1 viewport に収まる。
   3 badge 同時 unlock は稀 (通常 tier progression で 1 個ずつ) なので
   overlay-inner の overflow-y スクロールで許容。 */
@media (orientation:landscape), (min-width:920px){
  .wrp-badge-overlay-inner-truekira{max-height:min(96vh,720px);padding:16px 20px 14px;overflow-y:auto;}
  .wrp-badge-overlay-truekira{gap:4px;margin-bottom:10px;}
  .wrp-badge-overlay-truekira-title{font-size:18px;}
  .wrp-badge-overlay-truekira-sub{font-size:10px;margin-bottom:4px;}
  .wrp-badge-overlay-truekira-card{width:auto;height:min(55vh,460px);max-width:78vw;}
  .wrp-badge-overlay-truekira-name{font-size:24px;}
  .wrp-badge-overlay-truekira-subname{font-size:11px;}
  .wrp-badge-overlay-truekira-text{padding:0 18px 16px;gap:4px;}
  .wrp-badge-overlay-cards{gap:6px;margin-bottom:8px;}
  .wrp-badge-card{padding:6px 10px;}
  .wrp-badge-card-desc{font-size:10px;}
  .wrp-badge-overlay-hint{font-size:9px;}
}

/* ============================================================================
 * データ管理ボックス (data-manager) — 2026-08-02 導入。
 *   full 版:    matchlog / scouter / profile に配置、 export + import + clear。
 *   compact 版: catalog 4 種 (champions / items / runes / spells) に配置、
 *               stats + export ボタン + /profile への詳細管理リンクのみ。
 * shared-ui.v1.css へ ADD ONLY (既存 rule に触らない)。 CSS tokens は
 * 既存 (--sc-green-glow / #eafff3 / etc.) を そのまま使う。 */
/* 2026-08-02 v3: footer 内 embed に伴い horizontal margin を撤去、 footer-sitemap と幅を揃える (footer 側の padding:30px 22px で inset 制御)。 */
.wrp-data-manager{margin:0 0 26px;padding:16px 16px 14px;border:1px solid #1c3a28;border-radius:10px;background:rgba(10,28,18,.5);font-family:'Noto Sans JP',sans-serif;color:#eafff3;}
@media (min-width:920px), (orientation:landscape), (orientation:portrait) and (min-width:500px) and (min-height:800px){.wrp-data-manager{padding:22px 22px 18px;max-width:1200px;margin-left:auto;margin-right:auto;}}
.wrp-data-manager .wrp-dm-head{margin-bottom:12px;}
.wrp-data-manager .wrp-dm-title{margin:0 0 8px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:15px;color:#dffff0;letter-spacing:.03em;}
@media (min-width:920px){.wrp-data-manager .wrp-dm-title{font-size:17px;}}
.wrp-data-manager .wrp-dm-note{margin:0;font-size:13px;color:#bdd6c6;line-height:1.7;}
@media (min-width:920px){.wrp-data-manager .wrp-dm-note{font-size:14px;}}
.wrp-data-manager .wrp-dm-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
.wrp-data-manager .wrp-dm-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid rgba(159,233,192,.32);border-radius:7px;background:rgba(10,28,18,.6);color:#bdffd6;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.02em;cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.wrp-data-manager .wrp-dm-btn:hover{border-color:var(--sc-green-glow,#7dffb0);background:rgba(125,255,176,.1);color:#eafff3;}
.wrp-data-manager .wrp-dm-btn--clear{color:#ffaba8;border-color:rgba(255,171,168,.32);}
.wrp-data-manager .wrp-dm-btn--clear:hover{border-color:#ff6b64;background:rgba(255,107,100,.1);color:#ffe0dd;}
/* 端末間 引き継ぎ 系 button (PW 完結 flow)、 export 系より 目立たせない (accent 色 落とし)。 */
.wrp-data-manager .wrp-dm-btn--handoff{color:#c9ecd5;border-color:rgba(159,233,192,.22);}
.wrp-data-manager .wrp-dm-btn--handoff:hover{border-color:var(--sc-green-glow,#7dffb0);background:rgba(125,255,176,.08);color:#eafff3;}
/* 2026-08-22 v4: 通知パネル (独立 section、 data-manager 直上)。 幅 / border /
   bg / radius は データ管理 ボックスと 完全 揃え (parent の width に task せる)、
   高さだけ 抑えて 用途 差別化。 icon + title + note を 1 row header に。 */
.wrp-notif-panel{margin:0 0 12px;padding:16px 16px 14px;border:1px solid #1c3a28;border-radius:10px;background:rgba(10,28,18,.5);color:#eafff3;font-family:'Noto Sans JP',sans-serif;}
/* .wrp-data-manager と 同一 responsive 幅 rule (padding + max-width + centered)。
   2 box が page 種別 (静的 / catalog / detail) を 跨いで サイズ ズレ しないよう
   完全同期。 2026-08-22 user 「サイズが異なる」 feedback で 統一。 */
@media (min-width:920px), (orientation:landscape), (orientation:portrait) and (min-width:500px) and (min-height:800px){
  .wrp-notif-panel{padding:22px 22px 18px;max-width:1200px;margin-left:auto;margin-right:auto;}
}
.wrp-notif-panel .wrp-np-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;}
.wrp-notif-panel .wrp-np-head-icon{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px;border:1px solid rgba(159,233,192,.28);background:rgba(125,255,176,.06);color:var(--sc-green-glow,#7dffb0);}
.wrp-notif-panel .wrp-np-head-icon svg{width:16px;height:16px;display:block;}
.wrp-notif-panel .wrp-np-head-text{flex:1;min-width:0;}
.wrp-notif-panel .wrp-np-title{margin:0 0 2px;font-family:'Chakra Petch','Noto Sans JP',sans-serif;font-weight:700;font-size:14px;letter-spacing:.02em;color:#eafff3;}
@media (min-width:920px){.wrp-notif-panel .wrp-np-title{font-size:15px;}}
.wrp-notif-panel .wrp-np-note{margin:0;font-size:11.5px;line-height:1.55;color:#9fb8a8;}
@media (min-width:920px){.wrp-notif-panel .wrp-np-note{font-size:12px;}}
.wrp-notif-panel .wrp-np-actions{display:flex;gap:9px;flex-wrap:wrap;}
.wrp-notif-panel .wrp-np-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1px solid rgba(159,233,192,.32);border-radius:7px;background:rgba(10,28,18,.6);color:#c9ecd5;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.02em;cursor:pointer;transition:border-color .15s,background .15s,color .15s;min-height:38px;}
.wrp-notif-panel .wrp-np-btn:hover{border-color:var(--sc-green-glow,#7dffb0);background:rgba(125,255,176,.08);color:#eafff3;}
.wrp-notif-panel .wrp-np-btn[data-push-state="on"]{color:#ffe19a;border-color:rgba(255,215,120,.5);background:rgba(255,215,120,.08);}
.wrp-notif-panel .wrp-np-btn[data-push-state="on"]:hover{border-color:#ffc94a;background:rgba(255,215,120,.14);color:#fff2c8;}
.wrp-notif-panel .wrp-np-btn[hidden]{display:none;}
.wrp-notif-panel .wrp-np-msg{margin-top:10px;min-height:1.4em;padding:8px 12px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.55;background:rgba(125,255,176,.08);border:1px solid rgba(125,255,176,.22);color:#bdffd6;display:none;}
.wrp-notif-panel .wrp-np-msg:not(:empty){display:block;}
.wrp-notif-panel .wrp-np-msg.is-err{background:rgba(255,107,100,.1);border-color:rgba(255,171,168,.4);color:#ffe0dd;}
.wrp-data-manager .wrp-dm-btn-icon{width:14px;height:14px;flex-shrink:0;display:inline-block;color:currentColor;}
.wrp-data-manager .wrp-dm-btn-icon svg{width:100%;height:100%;display:block;}
.wrp-data-manager .wrp-dm-stats{margin:12px 0 0;font-family:'JetBrains Mono',monospace;font-size:12px;color:#9fe0ba;line-height:1.7;letter-spacing:.02em;}
.wrp-data-manager .wrp-dm-stats-num{color:#eafff3;font-weight:700;}
.wrp-data-manager .wrp-dm-msg{margin-top:10px;padding:8px 12px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:11px;background:rgba(125,255,176,.08);border:1px solid rgba(125,255,176,.22);color:#bdffd6;min-height:1.4em;display:none;}
.wrp-data-manager .wrp-dm-msg:not(:empty){display:block;}
.wrp-data-manager .wrp-dm-msg.is-err{background:rgba(255,107,100,.1);border-color:rgba(255,171,168,.4);color:#ffe0dd;}
/* compact 版 (catalog 4 種): 1 行 + export + link だけ。 padding も 圧縮。 */
.wrp-data-manager--compact{padding:12px 14px;margin:16px 0 22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;}
@media (min-width:920px){.wrp-data-manager--compact{padding:14px 18px;}}
.wrp-data-manager--compact .wrp-dm-head{margin:0;flex:1;min-width:220px;}
.wrp-data-manager--compact .wrp-dm-title{font-size:13px;margin-bottom:4px;}
@media (min-width:920px){.wrp-data-manager--compact .wrp-dm-title{font-size:14px;}}
.wrp-data-manager--compact .wrp-dm-note{font-size:11px;color:#9fb8a8;}
@media (min-width:920px){.wrp-data-manager--compact .wrp-dm-note{font-size:12px;}}
.wrp-data-manager--compact .wrp-dm-actions{margin-top:0;flex-shrink:0;}
.wrp-data-manager--compact .wrp-dm-stats{margin:0;flex:1 1 100%;font-size:11px;}
@media (min-width:920px){.wrp-data-manager--compact .wrp-dm-stats{flex:none;font-size:12px;order:2;}}
.wrp-data-manager--compact .wrp-dm-detail-link{font-family:'JetBrains Mono',monospace;font-size:11px;color:#8effb8;text-decoration:underline;text-decoration-color:#3f8a63;text-underline-offset:2px;letter-spacing:.02em;}
.wrp-data-manager--compact .wrp-dm-detail-link:hover{color:#bdffd6;text-decoration-color:#8effb8;}

/* Sub-nav segmented control — 見出し 横 に inline 表示。 scouter/matchlog/ranking の 3 系統 で 共通。
   scope-page-hero / scope-static-hero / scope-rank-hero の 中 の h1 と 同 row に flex 配置される。 */
.scope-subtab{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid #2c5a3f;border-radius:999px;background:rgba(10,26,17,.55);flex-shrink:0;}
.scope-subtab-tab{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 15px;border-radius:999px;background:transparent;color:#9fe9c0;font-family:'Chakra Petch','Noto Sans JP',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.03em;text-decoration:none;white-space:nowrap;transition:background .15s ease,color .15s ease;}
.scope-subtab-tab:hover{color:#dffff0;}
.scope-subtab-tab.is-active{background:#8effb8;color:#06150c;font-weight:700;}

/* matchlog top マイコレクション summary strip の desktop overrides — mobile inline margin (0 14px) は inline style で 適用済、 desktop で margin 0 に。 */
@media (min-width:920px){.wrp-badge-strip--overall{margin:0 0 16px !important;}}

/* Mobile portrait (< 920px, portrait) footer 2x2 layout の flow 順: column-first で
   左 col = [研究室, リファレンス]、 右 col = [ランキング, サイト]。
   default (row-first) だと 左 col = [研究室, ランキング] になるので上書き。
   2026-08-03 (user 「ランドスケープは 2 → 4 カラム」): portrait 限定に、
   landscape は index.html 側の 4-col rule が効くようにする。 */
@media (max-width:919px) and (orientation:portrait) and (max-width:499px){.footer-sitemap{grid-auto-flow:column;grid-template-rows:repeat(2,auto);}}

/* Cross-page nav link — 見出し 横 の 「相手 page へ 移動」 単品 link。
   2026-08-02 SEO audit の h1 keyword 重複 P2 fix。 「link であることが 分かりやすい」
   要件 で: 矢印 icon + text-decoration:underline + hover state の 3 signal を 明示。
   scouter → 試合ログ / matchlog → ビルドラボ の 相互 nav に 使用。 */
/* Cross-link は site header の nav active pill と 同 tier の visual weight
   (メインナビ に 匹敵 する 「大 nav 意図」 を 明示)。 filled button で 主張、
   text link や chip design を user 拒否 の 経緯 (2026-08-02)。
   縦幅 は h1 の line-box に 合わせて (mobile: 26px×1.15≈30px / desktop: 34px×1.15≈39px)。 */
/* 2026-08-02 v5: 「ghost pill は 見慣れると 目が行かない」 feedback → 中間 tier に格上げ。 gold-tinted glass fill (rgba .12) + 太めの stroke (1.5px, opacity .8) + 明るい gold 文字 (#ffe19a) + ambient glow (0 0 12px) + weight 700 で 「chunky 過ぎず 見落とされず」。 arrow slide + tracking .09em uppercase の editorial rhythm は 維持。 */
.scope-crosslink{display:inline-flex;align-items:center;gap:9px;padding:0 16px;height:32px;background:linear-gradient(180deg,rgba(255,215,120,.16),rgba(255,193,74,.08));color:#ffe19a;border:1.5px solid rgba(255,215,120,.8);border-radius:999px;font-family:'Chakra Petch','Noto Sans JP',sans-serif;font-weight:700;font-size:13px;letter-spacing:.09em;text-decoration:none;white-space:nowrap;box-shadow:0 0 14px -4px rgba(255,201,74,.4),inset 0 1px 0 rgba(255,255,255,.12);transition:color .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;flex-shrink:0;text-transform:uppercase;text-shadow:0 0 8px rgba(255,201,74,.35);}
@media (min-width:920px){.scope-crosslink{padding:0 22px;height:38px;font-size:14.5px;gap:11px;}}
.scope-crosslink:hover{background:linear-gradient(180deg,rgba(255,225,140,.28),rgba(255,201,74,.16));border-color:#ffd76a;color:#fff2c8;box-shadow:0 0 26px -6px rgba(255,201,74,.65),inset 0 1px 0 rgba(255,255,255,.22);transform:translateY(-1px);}
.scope-crosslink:active{transform:translateY(0);box-shadow:0 0 16px -4px rgba(255,201,74,.5),inset 0 1px 0 rgba(255,255,255,.1);}
.scope-crosslink-arrow{color:currentColor;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.15em;display:inline-block;line-height:1;transition:transform .18s ease;}
.scope-crosslink:hover .scope-crosslink-arrow{transform:translateX(3px);}

/* ---------------------------------------------------------------------------
   .wrp-fab-panel — 全 page 共通 「試合ログを記録 + ページトップ」 統合 FAB。
   2026-08-19 実装 (sub-c v2 mock)。 sharp box (rounded 6-8px)、 上=arrow(緑)
   / 下=edit(琥珀) の 2 zone。 arrow zone は scroll > 240px で visible、 log
   zone は 常時 visible。 matchlog.html は self-referential 回避のため inject
   側で skip (既存 back-to-top FAB のまま)。
   catalog build-mode 中 / modal / picker open 中 は 全体 hidden。

   v2 (2026-08-19): container-level gradient を per-zone solid background に変更。
   log-only state (52px) で container gradient の 中央 (48-52%) が 見えて 「琥珀
   ボタンの上下 色分かれ」 に見える bug 対応。 gradient を zone に移す事で 単独
   表示 でも 完全 単色 に。
---------------------------------------------------------------------------- */
/* v3 (2026-08-19): container を透明化 + 各 zone を 独立 pill (border-radius +
   solid border) にして 「角の罫線が欠ける」 issue を解消。 zone 間は 6px の
   gap で 「2 つの独立 pill」 感を強化、 log 色は patch-pill / rank-pill と 同
   hue (#ffd76a / #ffe19a) の透過 gold gradient で 「茶色寄り」 印象を除去。 */
.wrp-fab-panel{position:fixed;right:1rem;bottom:96px;z-index:90;width:52px;background:transparent;display:flex;flex-direction:column;gap:6px;isolation:isolate;}
.wrp-fab-panel-btn{
  width:52px;height:52px;min-height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;border:1.5px solid;padding:0;
  cursor:pointer;text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.wrp-fab-panel-btn svg{width:20px;height:20px;display:block;}
.wrp-fab-panel-btn[hidden]{display:none;}
/* 上 zone: 緑 (page top) — 緑透過 gradient + 緑 border + ambient glow */
.wrp-fab-panel-top{
  color:#8effb8;
  border-color:rgba(155,255,190,.75);
  background:linear-gradient(180deg,rgba(30,70,45,.55),rgba(15,42,25,.42));
  box-shadow:0 6px 16px -4px rgba(0,0,0,.5),0 0 14px -4px rgba(125,255,176,.4),inset 0 1px 0 rgba(255,255,255,.08);
}
.wrp-fab-panel-top:hover,.wrp-fab-panel-top:focus-visible{
  color:#c8ffdd;border-color:#8effb8;
  background:linear-gradient(180deg,rgba(45,90,60,.7),rgba(25,55,35,.55));
  box-shadow:0 6px 20px -4px rgba(0,0,0,.55),0 0 22px -4px rgba(125,255,176,.6),inset 0 1px 0 rgba(255,255,255,.14);
  transform:translateY(-1px);outline:0;
}
/* 下 zone: gold-yellow (matchlog record) — patch-pill / rank-pill と 同 hue */
.wrp-fab-panel-log{
  color:#ffe19a;
  border-color:rgba(255,215,120,.8);
  background:linear-gradient(180deg,rgba(255,215,120,.20),rgba(255,193,74,.10));
  box-shadow:0 6px 16px -4px rgba(0,0,0,.5),0 0 14px -4px rgba(255,201,74,.42),inset 0 1px 0 rgba(255,255,255,.10);
}
.wrp-fab-panel-log:hover,.wrp-fab-panel-log:focus-visible{
  color:#fff2c8;border-color:#ffd76a;
  background:linear-gradient(180deg,rgba(255,225,140,.32),rgba(255,201,74,.18));
  box-shadow:0 6px 20px -4px rgba(0,0,0,.55),0 0 22px -4px rgba(255,201,74,.65),inset 0 1px 0 rgba(255,255,255,.18);
  transform:translateY(-1px);outline:0;
}
@media (min-width:920px), (orientation:landscape), (orientation:portrait) and (min-width:500px) and (min-height:800px){
  .wrp-fab-panel{width:60px;right:1.5rem;bottom:1.5rem;gap:8px;}
  .wrp-fab-panel-btn{width:60px;height:60px;min-height:60px;border-radius:8px;}
  .wrp-fab-panel-btn svg{width:22px;height:22px;}
}
/* 2026-08-22 (user 「ランドスケープ時にページトップボタンと試合ログボタンが
   大きすぎるので小さくして」): mobile landscape は 縦幅制約が厳しい (~360px)
   ので FAB を 40x40 に compact 化 (tablet portrait / PC はそのまま 60x60 維持)。 */
@media (max-width:919px) and (orientation:landscape){
  .wrp-fab-panel{width:40px;right:.75rem;bottom:.75rem;gap:5px;}
  .wrp-fab-panel-btn{width:40px;height:40px;min-height:40px;border-radius:6px;border-width:1px;}
  .wrp-fab-panel-btn svg{width:16px;height:16px;}
}
/* modal / picker / build-mode / any *-lock / *-open / *-active 状態で 全体非表示。
   catch する class:
   - matchlog (body): wrp-ml-*-modal-lock / wrp-ml-picker-modal-lock / wrp-ml-scroll-lock
   - scouter (html): sc-picker-active (picker 開いた時、 document.documentElement)
   - catalog (body): scope-cat-modal-open / scope-cat-build-mode-on
   ワイルド指定 `[class*="-lock"]` + `[class*="picker-active"]` +
   `[class*="modal-open"]` + `[class*="build-mode-on"]` で 網羅。
   scouter picker は `html.sc-picker-active` (body ではなく documentElement) を
   付ける ので、 body / html 両方 の class を catch する selector に拡張
   (2026-08-19 v4: 「ピッカー画面で引き続きボタンが表示される」 feedback 対応)。 */
body[class*="-lock"] .wrp-fab-panel,
body[class*="picker-active"] .wrp-fab-panel,
body[class*="modal-open"] .wrp-fab-panel,
body[class*="build-mode-on"] .wrp-fab-panel,
html[class*="-lock"] .wrp-fab-panel,
html[class*="picker-active"] .wrp-fab-panel,
html[class*="modal-open"] .wrp-fab-panel,
html[class*="build-mode-on"] .wrp-fab-panel{display:none !important;}

/* 2026-08-20 (user 「スマホのモーダルが引き続き全画面じゃない」): 詳細ページ
   「研究室で試す」 modal (body.scope-id-modal-open) が 開いた時、 header +
   bottom-nav も hide して 完全全画面 overlay に。 scouter picker (html.sc-picker
   -active) と 同じ pattern を適用。 対象を wildcard で 拡張:
   - matchlog modal-lock: header/nav 元々 sheet 内 で問題なし (body position:fixed
     で スクロール止まる)
   - catalog build-mode: nav 撤去は既に scope-cat class 経由で catalog templates
     内 CSS が担う
   - detail id-modal: 今回追加 (body.scope-id-modal-open)
   - scouter picker: 既存 (html.sc-picker-active .scope-header/bottomnav) */
body[class*="modal-open"] .scope-header,
body[class*="modal-open"] .scope-bottomnav,
html[class*="modal-open"] .scope-header,
html[class*="modal-open"] .scope-bottomnav{display:none !important;}
/* 2026-08-20 v2: html::before (bottom-nav の装飾 gradient bar、 fixed;bottom:0;
   height:74px;z-index:8) が modal (z-index:100) の下だが 独自 stacking context で
   modal 下部に 「footer 分の gradient 帯」 が見えていた (「フッターエリアの
   せいでチャンピオンが全部見れない」 feedback)。 body の class を :has() で
   引き上げて html::before を display:none。 */
html:has(body[class*="modal-open"])::before,
html[class*="modal-open"]::before{display:none !important;}
/* 2026-08-20: modal 開時、 body の bottom padding (FAB clearance の 88px、
   nav clearance の 74px 等) が modal 下部に 「フッター分の空エリア」 として
   見えていた feedback。 modal 中は body scroll も lock、 padding も 0 化。 */
body[class*="modal-open"],
html[class*="modal-open"] body{
  padding-bottom:0 !important;
  overflow:hidden !important;
}

/* ============================================================
   端末間 引き継ぎ (PW 完結) モーダル — user-data-migration.js が
   dynamic に mount する overlay。 source / target 2 種 共通 CSS。
   ============================================================ */
.wrp-migration-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,10,7,.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .18s ease;overscroll-behavior:contain;}
.wrp-migration-overlay.is-open{opacity:1;}
html.wrp-migration-locked,
html.wrp-migration-locked body{overflow:hidden !important;}
.wrp-migration-panel{position:relative;width:100%;max-width:440px;max-height:calc(100dvh - 40px);overflow-y:auto;padding:26px 22px 22px;border:1px solid rgba(159,233,192,.32);border-radius:14px;background:linear-gradient(180deg,#0d2418,#081610);box-shadow:0 20px 60px -20px rgba(0,0,0,.7),0 0 40px -16px rgba(125,255,176,.28);color:#dffff0;font-family:'Noto Sans JP',sans-serif;}
.wrp-migration-close{position:absolute;top:10px;right:10px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:#9fe0ba;font-family:'JetBrains Mono',monospace;font-size:20px;line-height:1;cursor:pointer;transition:background .12s,color .12s;}
.wrp-migration-close:hover{background:rgba(125,255,176,.1);color:#eafff3;}
.wrp-migration-title{margin:0 0 12px;padding-right:32px;font-family:'Chakra Petch','Noto Sans JP',sans-serif;font-weight:700;font-size:17px;letter-spacing:.02em;color:#eafff3;}
.wrp-migration-note{margin:0 0 16px;font-size:12.5px;line-height:1.65;color:#bdd6c6;}
.wrp-migration-label{display:block;margin:0 0 12px;}
.wrp-migration-label-text{display:block;margin-bottom:5px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9fe0ba;}
.wrp-migration-input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid rgba(159,233,192,.32);border-radius:7px;background:rgba(6,14,10,.7);color:#eafff3;font-family:'Noto Sans JP',sans-serif;font-size:14px;letter-spacing:.02em;-webkit-appearance:none;appearance:none;transition:border-color .12s;}
.wrp-migration-input:focus{outline:none;border-color:var(--sc-green-glow,#7dffb0);}
.wrp-migration-input--code{font-family:'JetBrains Mono',monospace;font-size:16px;letter-spacing:.16em;text-transform:uppercase;text-align:center;}
.wrp-migration-hint{margin:6px 0 14px;font-size:11px;line-height:1.55;color:#8a9683;}
.wrp-migration-mode{margin:0 0 14px;padding:10px 12px;border:1px dashed rgba(159,233,192,.22);border-radius:7px;background:rgba(6,14,10,.4);}
.wrp-migration-mode legend{padding:0 6px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9fe0ba;}
.wrp-migration-radio{display:flex;align-items:flex-start;gap:8px;margin:6px 0;font-size:12.5px;line-height:1.5;color:#dffff0;cursor:pointer;}
.wrp-migration-radio input{margin-top:3px;accent-color:var(--sc-green-glow,#7dffb0);flex-shrink:0;}
.wrp-migration-actions{display:flex;gap:10px;margin-top:16px;}
.wrp-migration-btn{flex:1;padding:11px 14px;border-radius:7px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:background .14s,border-color .14s,color .14s;min-height:44px;}
.wrp-migration-btn--secondary{border:1px solid rgba(159,233,192,.32);background:transparent;color:#bdffd6;}
.wrp-migration-btn--secondary:hover{border-color:#7dffb0;color:#eafff3;background:rgba(125,255,176,.06);}
.wrp-migration-btn--primary{border:1.5px solid #7dffb0;background:linear-gradient(180deg,rgba(125,255,176,.16),rgba(125,255,176,.06));color:#eafff3;}
.wrp-migration-btn--primary:hover{background:rgba(125,255,176,.18);}
.wrp-migration-btn[disabled]{opacity:.5;cursor:not-allowed;}
.wrp-migration-code{margin:14px 0 8px;padding:18px 14px;border:1.5px dashed #7dffb0;border-radius:10px;background:rgba(125,255,176,.06);text-align:center;font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:700;letter-spacing:.24em;color:#eafff3;user-select:all;}
.wrp-migration-msg{margin:12px 0 0;min-height:1.4em;padding:8px 12px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.55;background:rgba(125,255,176,.08);border:1px solid rgba(125,255,176,.22);color:#bdffd6;display:none;}
.wrp-migration-msg:not(:empty){display:block;}
.wrp-migration-msg.is-err{background:rgba(255,107,100,.12);border-color:rgba(255,171,168,.4);color:#ffe0dd;}
@media (max-width:479px){
  .wrp-migration-panel{padding:22px 16px 18px;}
  .wrp-migration-title{font-size:16px;}
  .wrp-migration-code{font-size:24px;letter-spacing:.18em;padding:16px 10px;}
}