:root {
/* Codex palette: deeper ink, richer gold, crimson seal for accents */
--bg: #07060b;
--bg-1: #0c0b14;
--bg-2: #161325;
--bg-3: #221d36;
--ink: #ede5d3;
--ink-soft: #a89c80;
--ink-mute: #6b6451;
--gold: #d4a857;
--gold-hi: #f4dfa6;
--gold-deep: #8a6a2e;
--crimson: #b73a3a;
--rule: rgba(212, 168, 87, 0.18);
--rule-bold: rgba(212, 168, 87, 0.45);
--font-display: "Fraunces", "Marcellus", Georgia, serif;
--font-eyebrow: "Cinzel", "Marcellus", Georgia, serif;
--font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--frame-cut: 12px; /* corner-cut size on card clip-path frames */
/* カード枠 (champ / skin / line で共通)。default / hover / selected の3段で、
それぞれ「vignette + 内枠1px (default は控えめ金、hover/selected は明るい金)」
の構成。skin/line の splash art を潰しすぎないよう vignette は champ 当時の
0.55 から 0.45 に抑えてある */
--card-frame-shadow:
inset 0 0 60px rgba(7, 6, 11, 0.45),
inset 0 0 0 1px rgba(212, 168, 87, 0.18);
--card-frame-shadow-hover:
inset 0 0 60px rgba(7, 6, 11, 0.45),
inset 0 0 0 1px var(--gold),
inset 0 0 30px rgba(212, 168, 87, 0.22);
--card-frame-shadow-selected:
inset 0 0 60px rgba(7, 6, 11, 0.45),
inset 0 0 0 3px var(--gold),
inset 0 0 50px rgba(212, 168, 87, 0.22);
--ctrl-h: 40px; /* 全コントロール (btn/search/lang/tab) 共通の高さ */
/* サイト全体の中身幅。topbar の sticky 背景や footer の罫線は全幅のまま、
header / main / footer の「中身」をこの幅で中央寄せする */
--container-max: 1760px;
/* 上記 4 要素の左右パディング。これを共通化することで画面端の縦線が揃う。
breakpoint ごとに :root で上書きする */
--container-pad: 56px;
}
* { box-sizing: border-box; }
/* 初回ロード時の英語ラベルちらつき抑止。 は
index.html 側で付与され、init() で applyStaticUIStrings() 完了後に外す。
visibility:hidden なのでレイアウトは確保したままテキストだけ消える */
html.i18n-loading .view-tabs .tab,
html.i18n-loading .header-actions .btn,
html.i18n-loading #loading-msg { visibility: hidden; }
html, body {
margin: 0; padding: 0; background: var(--bg); color: var(--ink);
font-family: var(--font-body);
min-height: 100vh; overflow-x: clip; /* hidden だと祖先がスクロールコンテナになって header の position:sticky が効かない。clip は新しい containing block を作らないので sticky が生きる */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* iOS Safari は viewport の user-scalable=no を無視するので、ダブルタップ
ズームだけは touch-action で抑える (通常のスクロール/タップは維持) */
touch-action: manipulation;
}
/* 背景: 二段の放射状ヴィネット + SVGノイズ。ベタ塗りだと「とりあえずダーク」感が強いので
雰囲気のレイヤーを足す。z-index -1 で固定、ポインタイベント貫通 */
body::before {
content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 8% -10%, rgba(212, 168, 87, 0.10), transparent 60%),
radial-gradient(ellipse 70% 55% at 92% 110%, rgba(183, 58, 58, 0.07), transparent 70%),
radial-gradient(ellipse 120% 90% at 50% 50%, rgba(22, 19, 37, 0.5), transparent 80%);
}
body::after {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
opacity: 0.35; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-left: 1px solid var(--rule); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }
body { scrollbar-color: var(--bg-3) var(--bg); }
/* === HEADER ====================================================== */
/* topbar = 2 段構成の header (行1: brand + ?/lang / 行2: view-tabs + 操作
ボタン) を包む sticky バー。背景・blur はラッパーが持ち、内側は構造のみ。
検索バー/戻る/ソートは dom-stash から render() で
.champ-header-controls に transplant される */
.topbar {
position: sticky; top: 0; z-index: 30;
background: linear-gradient(180deg, rgba(7, 6, 11, 0.96), rgba(7, 6, 11, 0.85));
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
}
/* topbar 下端の金線: 中央が明るく両端が消えるフェード。古地図の罫線っぽさを出す */
.topbar::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-deep) 18%, var(--gold) 50%, var(--gold-deep) 82%, transparent);
opacity: 0.55; pointer-events: none;
}
/* 2 段構成。header は縦並びの flex で 2 行を積む:
行1 (.header-primary): [brand] (auto-spacer) [.header-utils = ? + lang]
行2 (.header-secondary): [view-tabs] [.header-actions = gallery + slideshow]
行1 を識別情報 + 常設ユーティリティ、行2 を閲覧操作、と役割で段分けする。
gallery-btn と slideshow-btn は .header-actions で 1 つの flex 群に
まとめ、狭幅で折返す時もセットで動く */
header {
display: flex; flex-direction: column;
gap: 10px;
padding: 12px var(--container-pad);
border-bottom: 1px solid var(--rule);
max-width: var(--container-max);
margin: 0 auto;
}
.header-primary,
.header-secondary {
display: flex; align-items: center;
gap: 12px;
}
/* 行2 は狭幅で view-tabs と操作ボタンが入りきらない時だけ折返す */
.header-secondary { flex-wrap: wrap; }
/* ? と言語ピッカーを行1の右端へ寄せるユーティリティ群 */
.header-utils {
display: flex; align-items: center; gap: 12px;
margin-left: auto;
}
.header-actions {
display: flex; align-items: center; gap: 12px;
}
/* header-brand は info (h1+stats 縦積み) を包む薄いラッパ。行1 の左端に置く */
.header-brand {
display: flex; align-items: center;
gap: 18px;
min-width: 0;
}
.header-brand-info {
display: flex; flex-direction: column;
gap: 4px;
min-width: 0;
}
header h1 {
margin: 0;
font-family: var(--font-display);
font-size: 24px; font-weight: 500;
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 500;
color: var(--gold-hi);
letter-spacing: -0.005em;
line-height: 1;
cursor: pointer; user-select: none;
display: flex; align-items: baseline; gap: 10px;
white-space: nowrap;
}
header h1::before {
content: "✦";
color: var(--gold);
font-size: 13px; font-style: normal;
font-variation-settings: normal;
transform: translateY(-2px);
}
/* stats を h1 の真下に小さく置く。雑誌の「kicker」役で、画面右側の行動ボタン列を圧迫しない */
.header-brand #stats {
padding-left: 24px; /* ✦ + gap と揃える */
font-size: 9.5px;
letter-spacing: 0.22em;
}
#search {
width: 100%; max-width: 520px;
height: var(--ctrl-h);
padding: 0 18px 0 42px;
background: var(--bg-1);
border: 1px solid var(--rule);
color: var(--ink);
font-family: var(--font-display);
font-size: 14px;
font-style: italic;
font-variation-settings: "opsz" 14, "SOFT" 60, "wght" 400;
letter-spacing: 0.01em;
outline: none;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 14px center;
background-size: 18px;
}
#search::placeholder { color: var(--ink-mute); font-style: italic; }
#search:focus {
border-color: var(--gold);
background-color: var(--bg-2);
box-shadow: 0 0 0 4px rgba(212, 168, 87, 0.08);
}
/* 言語ピッカー: 国旗絵文字を出すアイコンボタン + 下に展開する独自メニュー。
ネイティブ