/* ============================================================================
 * 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;}}
.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;}
@media (max-width:919px) and (orientation:portrait){.rank-pill-lbl{display:none;}}
@media (min-width:920px){.rank-pill-lbl{font-size:11px;}}
.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;}