/* =================================================================
WWM DMG CALC — 武侠水墨 HUD
Black sumi · Vermilion (朱) · Gold (金) · Jade (青) accents
================================================================= */
:root {
/* Sumi base */
--bg-0: #07060a;
--bg-1: #0f0c0e;
--bg-2: #16110f;
--bg-3: #1d1714;
--bg-raised: #1a1410;
/* Panel surfaces (theme-swappable) */
--surf-1: rgba(26,20,16,0.7);
--surf-2: rgba(15,12,14,0.85);
--surf-shade: rgba(0,0,0,0.25);
--surf-shade-2:rgba(0,0,0,0.4);
--surf-shade-3:rgba(0,0,0,0.55);
--rail-grad: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.5));
--input-bg: rgba(0,0,0,0.5);
--input-text: var(--gold-bright);
--header-grad: linear-gradient(180deg, rgba(26,20,16,0.85), rgba(15,12,14,0.85));
--hero-grad: radial-gradient(ellipse 70% 100% at 0% 50%, var(--vermilion-tint), transparent 60%),
linear-gradient(180deg, rgba(26,20,16,0.9), rgba(15,12,14,0.95));
--hero-num: var(--gold-bright);
--hero-num-shadow: 0 0 30px rgba(240,210,138,0.25), 0 2px 0 rgba(0,0,0,0.5);
--donut-track: rgba(232, 215, 180, 0.06);
/* Ink lines */
--ink-1: rgba(232, 215, 180, 0.06);
--ink-2: rgba(232, 215, 180, 0.12);
--ink-3: rgba(232, 215, 180, 0.22);
/* Accents */
--vermilion: #c83c2b;
--vermilion-deep: #8a1f17;
--vermilion-bright: #e8513a;
--vermilion-glow: rgba(232, 81, 58, 0.5);
/* vermilion 派生 (rgba 集約用) — 不透明度連続スケール */
--vermilion-trace: rgba(200,60,43,0.05);
--vermilion-faint: rgba(200,60,43,0.08);
--vermilion-tint: rgba(200,60,43,0.10);
--vermilion-soft: rgba(200,60,43,0.15);
--vermilion-soft-2: rgba(200,60,43,0.20);
--vermilion-mid: rgba(200,60,43,0.30);
--vermilion-mid-2: rgba(200,60,43,0.35);
--vermilion-strong: rgba(200,60,43,0.55);
--vermilion-bright-trace:rgba(232,81,58,0.15);
--vermilion-bright-soft: rgba(232,81,58,0.25);
--vermilion-bright-mid: rgba(232,81,58,0.45);
--vermilion-bright-strong: rgba(232,81,58,0.70);
--gold: #c9a45a;
--gold-bright: #f0d28a;
--gold-deep: #8a6f30;
--gold-glow: rgba(240, 210, 138, 0.4);
/* gold/gold-bright 派生 (rgba集約) */
--gold-trace: rgba(201,164,90,0.05);
--gold-faint: rgba(201,164,90,0.08);
--gold-tint: rgba(201,164,90,0.12);
--gold-soft: rgba(201,164,90,0.20);
--gold-mid: rgba(201,164,90,0.30);
--gold-strong: rgba(201,164,90,0.50);
--gold-bright-faint: rgba(240,210,138,0.08);
--gold-bright-soft: rgba(240,210,138,0.25);
--gold-bright-mid: rgba(240,210,138,0.50);
--gold-bright-strong:rgba(240,210,138,0.70);
/* overlay (暗/明オーバーレイ) */
--overlay-trace: rgba(0,0,0,0.15);
--overlay-soft: rgba(0,0,0,0.3);
--overlay-mid: rgba(0,0,0,0.5);
--overlay-heavy: rgba(0,0,0,0.6);
--hover-trace: rgba(255,255,255,0.03);
--hover-soft: rgba(255,255,255,0.1);
--jade: #7fa88a;
--jade-bright: #a8d4b4;
--bone: #c9b88a;
--bone-dim: #9c8a6a;
/* チャート色（テーマ統合: 金/朱/骨/紙） */
--chart-crit: #f0d28a; /* gold-bright */
--chart-sympathy: #e8513a; /* vermilion-bright */
--chart-graze: #6a6053; /* paper-mute 寄り */
--chart-normal: #ede4d0; /* paper */
/* Paper text */
--paper: #ede4d0;
--paper-2: #c8bda6;
--paper-dim: #8b8170;
--paper-mute: #7a7060; /* AA contrast対応 (旧 #6a6053 から +0.3:1) */
/* Type */
--f-display: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
--f-body: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
--f-latin: 'Cinzel', 'Cormorant Garamond', 'Noto Serif JP', serif;
--f-mono: 'Rajdhani', 'JetBrains Mono', monospace;
/* Spacing scale (4px base) */
--space-half: 2px; /* badge内余白等 */
--space-1: 4px;
--space-1-5: 6px; /* 4-8間中間、最頻 */
--space-2: 8px;
--space-2-5: 10px; /* 中間 */
--space-3: 12px;
--space-3-5: 14px; /* 中間 */
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
/* Typography scale — 既存 font-size 値の段階集約 */
--text-2xs: 8px; /* アイコンラベル */
--text-xs: 10px; /* 補助ラベル・HUDメタ (9pxも統合) */
--text-sm: 11px; /* 本文・入力ラベル */
--text-12: 12px; /* 中間 (最頻、UIラベル多用) */
--text-md: 13px; /* 本文 base */
--text-14: 14px; /* 中間 (やや強調) */
--text-15: 15px; /* compact見出し */
--text-lg: 16px; /* 強調 */
--text-18: 18px; /* セクション小見出し */
--text-20: 20px; /* 中型見出し */
--text-xl: 22px; /* パネル見出し */
--text-24: 24px; /* 大型見出し */
--text-2xl: 28px; /* breakdown数値 */
--text-hero: 92px; /* EXPECTED ヒーロー */
/* Font weight scale */
--fw-normal: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extra: 800;
--fw-black: 900;
/* Z-index scale */
--z-base: 0;
--z-raise: 1;
--z-elevated: 5;
--z-sticky: 50;
--z-floating: 100;
--z-overlay: 200;
--z-modal: 9999;
--z-toast: 10000;
--z-tooltip: 99999;
/* Ratio gradient (パフォーマンス指示色、ratio→色マップ用) */
--ratio-excellent: #4caf50; /* >= 0.9 */
--ratio-good: #8bc34a; /* >= 0.75 */
--ratio-ok: #ffc107; /* >= 0.6 */
--ratio-warn: #ff9800; /* >= 0.4 */
--ratio-bad: #e74c3c; /* < 0.4 */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg-0);
color: var(--paper);
font-family: var(--f-body);
font-size: var(--text-md);
line-height: 1.55;
font-feature-settings: 'palt';
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Body texture: ink wash + paper grain */
body {
background:
radial-gradient(ellipse 60% 35% at 50% 0%, rgba(200, 60, 43, 0.18), transparent 65%),
radial-gradient(ellipse 50% 25% at 0% 0%, rgba(201, 164, 90, 0.10), transparent 70%),
radial-gradient(ellipse 50% 25% at 100% 0%, rgba(201, 164, 90, 0.10), transparent 70%),
radial-gradient(ellipse 60% 70% at 100% 100%, rgba(201, 164, 90, 0.04), transparent 55%),
url("data:image/svg+xml;utf8,"),
var(--bg-0);
min-height: 100vh;
}
.container { max-width: 1280px; margin: 0 auto; padding: var(--space-4) var(--space-5) var(--space-8); }
/* ─────────────────────────────────────────────────────────────────
HEADER
───────────────────────────────────────────────────────────────── */
.sticky-header {
position: sticky; top: 0; z-index: var(--z-overlay);
background: transparent;
padding: 0;
margin-bottom: var(--space-4);
}
header.topbar {
display: flex; align-items: center; gap: var(--space-4);
padding: var(--space-3) var(--space-5);
background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(200,60,43,0.18), rgba(15,12,14,0.5) 80%);
border: 1px solid var(--ink-2);
border-radius: 2px;
position: relative;
overflow: hidden;
}
header.topbar::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--vermilion-bright), var(--vermilion-deep));
}
header.topbar::after {
content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
width: 280px; height: 1px;
background: linear-gradient(90deg, transparent, var(--ink-3), transparent);
pointer-events: none; opacity: 0.6;
}
.title-block { flex: 1; min-width: 0; }
.title-block h1 {
font-family: var(--f-display);
font-weight: var(--fw-black); font-size: var(--text-xl); letter-spacing: 0.12em;
color: var(--paper); line-height: 1.1;
}
.title-block h1 .accent { color: var(--vermilion-bright); }
.title-block p {
font-size: var(--text-sm); color: var(--paper-mute);
letter-spacing: 0.08em; margin-top: 4px;
text-transform: uppercase; font-family: var(--f-mono); font-weight: var(--fw-medium);
}
/* WWM Brand (D案: 縦書き漢字 + 横英字 + 朱印章) */
.wwm-brand { display: flex; align-items: center; gap: var(--space-4); }
.wwm-brand-vert {
font-family: 'Noto Serif JP', var(--f-display), serif;
font-weight: var(--fw-black);
writing-mode: vertical-rl;
text-orientation: upright;
font-size: var(--text-18); letter-spacing: 0.18em;
color: var(--gold-bright);
padding: 2px 4px;
border-left: 2px solid var(--gold);
border-right: 2px solid var(--gold);
text-shadow: 0 0 10px var(--gold-bright-mid);
line-height: 1;
}
.wwm-brand-right { display: flex; flex-direction: column; gap: var(--space-half); }
.wwm-brand-en {
font-family: var(--f-latin), serif;
font-weight: var(--fw-extra); font-size: var(--text-20); letter-spacing: 0.22em;
color: var(--paper);
}
.wwm-brand-sub {
font-family: var(--f-mono);
font-size: var(--text-sm); color: var(--gold);
letter-spacing: 0.3em; opacity: 0.85;
}
.wwm-brand-seal {
position: relative;
width: 48px; height: 48px;
background: var(--vermilion);
border: 3px solid var(--vermilion);
border-radius: 8%;
display: flex; align-items: center; justify-content: center;
font-family: 'Noto Serif JP', serif; font-weight: var(--fw-black);
font-size: var(--text-24); color: #fff;
line-height: 1;
box-shadow: 0 0 16px var(--vermilion-strong);
transform: rotate(-8deg);
flex-shrink: 0;
}
.wwm-brand-seal::after {
content: '';
position: absolute; inset: 3px;
border: 1.5px solid rgba(255,255,255,0.55);
border-radius: 5%;
}
html[data-theme="light"] .wwm-brand-seal { opacity: 0.8; }
/* light: hero::before「斬」watermark 視認性up (vermilion-trace 0.05 → 濃化) */
html[data-theme="light"] .hero::before {
color: rgba(160,28,18,0.18) !important;
}
html[data-theme="light"] .wwm-brand-vert { color: var(--vermilion); border-color: var(--gold); }
html[data-theme="light"] .wwm-brand-en { color: var(--gold); opacity: 0.75; }
html[data-theme="light"] .wwm-brand-sub { color: var(--vermilion-bright); opacity: 0.85; }
/* Top right controls */
.top-controls { display: flex; align-items: center; gap: var(--space-1-5); flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
/* 2行レイアウト (lang 2x2 + controls 1行目/2行目)、各btn幅統一 */
.top-controls-2row {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
align-items: stretch;
}
.topbar-row {
display: flex;
align-items: center;
gap: var(--space-1-5);
justify-content: flex-end;
height: 32px;
}
/* ko の한글文字行高で 行が伸びるのを防止 */
.top-controls-2row .topbar-row .icon-btn,
.top-controls-2row .topbar-row .lang-btn {
height: 30px;
min-height: 30px;
max-height: 30px;
line-height: 1;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 0;
padding-bottom: 0;
vertical-align: middle;
overflow: hidden;
}
.top-controls-2row .topbar-row { height: 32px; min-height: 32px; max-height: 32px; flex: 0 0 32px; }
.top-controls-2row { height: 72px; min-height: 72px; max-height: 72px; flex: 0 0 auto; }
/* 同幅化: lang-switcher 両行とも同width、各テキストiconBtn 同min-width */
.top-controls-2row .lang-switcher-row { width: 96px; }
.top-controls-2row .lang-switcher-row .lang-btn { flex: 1; padding: 4px 0; text-align: center; }
.top-controls-2row .topbar-row .icon-btn:not(.icon-btn-x):not(#themeToggle):not(.note-btn) {
min-width: 66px;
width: 66px;
padding: 0 var(--space-2);
justify-content: center;
text-align: center;
}
/* zh = 2字短訳 余裕、 ko = 4字長め なので 個別調整 */
html[lang="zh"] .top-controls-2row .icon-btn,
html[lang="zh-CN"] .top-controls-2row .icon-btn {
font-size: 10px;
letter-spacing: 0.06em;
}
html[lang="ko"] .top-controls-2row .icon-btn {
font-size: 10px;
letter-spacing: 0.04em;
}
/* NOTE = X+☀ width相当 - 3px */
.top-controls-2row .topbar-row .icon-btn.note-btn {
width: 66px;
min-width: 0;
padding: 0 var(--space-2);
justify-content: center;
text-align: center;
}
.icon-btn.reset-btn,
.icon-btn.note-btn {
width: auto; padding: 0 12px;
font-family: var(--f-mono); font-weight: var(--fw-bold);
font-size: var(--text-sm); letter-spacing: 0.12em;
}
.icon-btn.reset-btn { color: var(--paper-2); border-color: var(--ink-3); }
.icon-btn.reset-btn:hover { color: var(--vermilion-bright); border-color: var(--vermilion); background: var(--vermilion-faint); }
.icon-btn.note-btn { color: var(--gold); border-color: var(--gold-deep); }
.icon-btn.note-btn:hover { color: var(--gold-bright); border-color: var(--gold); background: var(--gold-faint); }
.lang-switcher { display: flex; gap: 0; padding: var(--space-half); background: var(--surf-shade-2); border: 1px solid var(--ink-2); border-radius: 2px; }
.lang-btn {
padding: 4px 10px; border: none; background: transparent;
color: var(--paper-mute); font-family: var(--f-mono); font-weight: var(--fw-semibold);
font-size: var(--text-sm); letter-spacing: 0.08em; cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.lang-btn:hover { color: var(--paper-2); }
.lang-btn.active { color: var(--gold-bright); background: var(--vermilion-soft-2); }
.icon-btn {
width: 30px; height: 30px;
display: grid; place-items: center;
background: var(--surf-shade);
border: 1px solid var(--ink-2);
color: var(--paper-dim); border-radius: 2px; cursor: pointer;
font-size: var(--text-md);
transition: all 0.15s;
}
.icon-btn:hover { color: var(--gold-bright); border-color: var(--gold-deep); background: var(--gold-tint); }
a.icon-btn { text-decoration: none; }
.icon-btn-x svg { display: block; }
.icon-btn.export-btn,
.icon-btn.import-btn,
.icon-btn.share-btn {
width: auto; padding: 0 12px;
font-family: var(--f-mono); font-weight: var(--fw-bold); font-size: var(--text-sm); letter-spacing: 0.12em;
}
.icon-btn.export-btn {
color: var(--vermilion-bright); border-color: var(--vermilion-strong);
}
.icon-btn.import-btn {
color: var(--gold-bright); border-color: var(--gold-deep);
}
.icon-btn.import-btn:hover {
background: var(--gold); color: var(--bg-0); border-color: var(--gold);
box-shadow: 0 0 16px var(--gold-glow);
}
.icon-btn.export-btn:hover {
background: var(--vermilion); color: var(--bg-0); border-color: var(--vermilion);
box-shadow: 0 0 16px var(--vermilion-glow);
}
/* ─────────────────────────────────────────────────────────────────
PRESET RAIL
───────────────────────────────────────────────────────────────── */
.preset-bar {
display: flex; align-items: center; gap: var(--space-3);
padding: 8px 14px; margin-top: 8px;
background: rgba(15,12,14,0.85);
border: 1px solid var(--ink-2);
border-radius: 2px;
}
.preset-bar-title {
font-family: var(--f-mono); font-size: var(--text-sm); font-weight: var(--fw-bold);
color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase;
flex-shrink: 0;
}
/* 弱点バッジ (Preset bar 横) */
.wwm-diag-badge {
display: inline-flex; align-items: center; gap: var(--space-1-5);
padding: 4px 10px;
background: rgba(200,60,43,0.18);
border: 1px solid rgba(200,60,43,0.6);
border-radius: 2px;
color: var(--vermilion-bright, #ff6b4a);
font-family: var(--f-mono); font-size: var(--text-sm); font-weight: var(--fw-bold);
letter-spacing: 0.08em;
cursor: pointer;
transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
flex-shrink: 0;
}
.wwm-diag-badge:hover {
background: var(--vermilion-mid);
box-shadow: 0 0 12px rgba(200,60,43,0.4);
transform: translateY(-1px);
}
.wwm-diag-badge-icon { font-size: var(--text-14); }
.wwm-diag-badge-text { letter-spacing: 0.12em; }
.wwm-diag-badge-count {
display: inline-block;
min-width: 18px; padding: 1px 5px;
background: var(--vermilion, #c83c2b);
color: #fff;
border-radius: 10px;
font-size: var(--text-sm); line-height: 1.4;
text-align: center;
}
/* 弱点 popup modal */
.wwm-diag-modal { max-width: 720px; }
.wwm-diag-modal .wwm-diag-item {
display: flex; align-items: flex-start; gap: var(--space-2);
padding: 8px 10px; margin-bottom: 6px;
background: var(--surf-shade);
border: 1px solid var(--ink-2);
border-left: 3px solid var(--ink-2);
border-radius: 2px;
font-size: var(--text-md); line-height: 1.5;
}
.wwm-diag-modal .wwm-diag-warn { border-left-color: var(--vermilion, #c83c2b); }
.wwm-diag-modal .wwm-diag-info { border-left-color: var(--jade, #6a9b7a); }
.wwm-diag-modal .wwm-diag-good { border-left-color: var(--gold, #c9a45a); }
.wwm-diag-modal .wwm-diag-icon { flex-shrink: 0; font-size: var(--text-14); }
.wwm-diag-modal .wwm-diag-text { flex: 1; }
.preset-slots { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: 1; }
.preset-slot {
display: flex; align-items: center; gap: var(--space-1);
background: var(--surf-shade);
border: 1px solid var(--ink-2);
padding: 4px 8px; flex: 1; min-width: 200px;
border-radius: 2px;
transition: border-color 0.15s, background 0.15s;
}
.preset-slot.has-data {
border-color: rgba(201,164,90,0.4);
background: rgba(40, 30, 18, 0.6);
box-shadow: inset 0 0 14px rgba(201,164,90,0.06);
}
.preset-slot-num {
font-family: var(--f-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
color: var(--paper-mute); letter-spacing: 0.1em;
width: 12px; flex-shrink: 0;
}
.preset-slot.has-data .preset-slot-num { color: var(--gold); }
.preset-name-input {
flex: 1; border: none; background: transparent;
font-family: var(--f-body); font-size: var(--text-12); font-weight: var(--fw-semibold);
color: var(--paper); min-width: 0; outline: none;
}
.preset-name-input::placeholder { color: var(--paper-mute); font-weight: var(--fw-normal); }
.preset-btn {
padding: 3px 8px; border: 1px solid; background: transparent;
font-family: var(--f-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
letter-spacing: 0.1em; text-transform: uppercase;
border-radius: 2px; cursor: pointer; transition: all 0.12s;
white-space: nowrap;
}
.preset-save { border-color: var(--gold-strong); color: var(--gold); }
.preset-save:hover { background: var(--gold); color: var(--bg-0); }
.preset-load { border-color: rgba(127,168,138,0.5); color: var(--jade-bright); }
.preset-load:hover:not(:disabled) { background: var(--jade); color: var(--bg-0); }
.preset-del { border-color: var(--vermilion-strong); color: var(--vermilion-bright); padding: 3px 6px; }
.preset-del:hover:not(:disabled) { background: var(--vermilion); color: var(--bg-0); }
.preset-load:disabled, .preset-del:disabled { opacity: 0.3; cursor: not-allowed; }
/* ─────────────────────────────────────────────────────────────────
HERO — expected damage + probability donut
───────────────────────────────────────────────────────────────── */
.hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 0;
background: var(--hero-grad);
border: 1px solid var(--ink-2);
border-left: 3px solid var(--vermilion);
position: relative;
overflow: hidden;
}
.hero::before {
/* corner kanji watermark — 明朝 (Noto Serif JP black) */
content: '斬'; position: absolute; right: -10px; bottom: -40px;
font-family: var(--f-display);
font-weight: var(--fw-black);
font-size: 260px; color: rgba(232,81,58,0.12);
pointer-events: none; line-height: 1;
}
/* 古紙テクスチャ overlay (SVG turbulence + blend) — テスト用に強度UP */
.hero::after, .wwm-footer::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.85;
pointer-events: none;
}
.wwm-footer { position: relative; overflow: hidden; }
.hero-left {
padding: 18px 24px 12px;
display: flex; flex-direction: column; justify-content: flex-start;
position: relative; z-index: 1;
min-width: 0;
overflow: hidden;
}
.hero-eyebrow {
display: flex; align-items: center; gap: var(--space-2-5);
font-family: var(--f-mono); font-size: var(--text-sm); font-weight: var(--fw-bold);
color: var(--gold); letter-spacing: 0.24em; text-transform: uppercase;
}
/* シェブロン (削除) */
.hero::after-disabled {
content: '';
position: absolute;
top: 14px; right: 16px;
width: 8px; height: 8px;
border-right: 1.5px solid var(--paper-mute);
border-bottom: 1.5px solid var(--paper-mute);
transform: rotate(45deg);
opacity: 0.4;
transition: transform 0.25s ease, top 0.25s ease, opacity 0.15s;
pointer-events: none;
}
.hero:hover::after { opacity: 0.9; }
.hero--collapsed::after {
transform: rotate(-135deg);
top: 18px;
}
/* ── Compact bar (collapsed state) ── */
.hero-compact-bar {
display: none;
align-items: baseline;
gap: 7px;
padding: 4px 0 6px;
font-family: var(--f-latin);
font-weight: var(--fw-extra);
font-size: var(--text-xl);
color: var(--gold);
letter-spacing: -0.01em;
}
.hero-compact-unit {
font-family: var(--f-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
color: var(--paper-mute); letter-spacing: 0.2em; padding-bottom: 2px;
}
.hero-compact-sep { color: var(--ink-3); font-weight: var(--fw-normal); font-size: var(--text-md); }
.hero-compact-score-label {
font-family: var(--f-mono); font-size: var(--text-2xs); font-weight: var(--fw-bold);
color: var(--jade); letter-spacing: 0.18em; text-transform: uppercase;
padding-bottom: 2px;
}
.hero-compact-score-val { font-size: var(--text-18); color: var(--jade-bright); }
/* PC のみ表示する内訳ブロック */
.hero-compact-breakdown {
display: none;
align-items: center;
gap: var(--space-4);
padding-left: 18px;
margin-left: 14px;
border-left: 1px solid var(--ink-3);
}
@media (min-width: 601px) {
.hero--collapsed .hero-compact-breakdown { display: flex; }
}
.hcb-item { display: flex; flex-direction: row; align-items: baseline; gap: 5px; }
.hcb-label {
font-family: var(--f-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
color: var(--paper-mute); letter-spacing: 0.14em; text-transform: uppercase;
}
.hcb-val {
font-family: var(--f-mono); font-size: var(--text-15); font-weight: var(--fw-bold);
color: var(--paper-2); font-variant-numeric: tabular-nums;
}
.hcb-val.phys { color: var(--vermilion-bright); }
.hcb-val.elem { color: var(--jade-bright); }
.hcb-pct {
font-family: var(--f-mono); font-size: var(--text-sm); font-weight: var(--fw-semibold);
color: var(--paper-mute); letter-spacing: 0.04em;
font-variant-numeric: tabular-nums; padding-bottom: 1px;
}
.hcb-pct.phys { color: rgba(232,81,58,0.55); }
.hcb-pct.elem { color: rgba(168,212,180,0.55); }
/* ── Collapsed state overrides ── */
.hero--collapsed .hero-compact-bar { display: flex; }
.hero--collapsed .hero-label-jp,
.hero--collapsed .hero-nums,
.hero--collapsed .hero-breakdown { display: none; }
.hero--collapsed .hero-left { padding-top: 10px; padding-bottom: 10px; justify-content: center; }
/* 折りたたみ時は常に2カラム維持 + hero-right を強制表示 */
.hero--collapsed {
grid-template-columns: 1fr 280px !important;
}
.hero--collapsed .hero-right {
display: flex !important;
padding: 8px 16px;
border-left: 1px solid var(--ink-2);
border-top: none !important;
}
.hero--collapsed .donut-wrap { flex-direction: row; align-items: center; gap: var(--space-2-5); width: auto; }
.hero--collapsed .donut-block { flex-direction: row; align-items: center; gap: var(--space-2-5); width: auto; }
.hero--collapsed .donut { width: 68px; height: 68px; }
.hero--collapsed .donut-center-label { font-size: 7px; }
.hero--collapsed .donut-center-val { font-size: var(--text-sm); margin-top: 1px; }
.hero--collapsed .prob-legend {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 2px 4px;
align-content: center;
min-width: 0;
}
.hero--collapsed .prob-row { padding: 2px 0; gap: var(--space-1); border-bottom: none !important; min-width: 0; }
.hero--collapsed .prob-dot { width: 6px !important; height: 6px !important; flex-shrink: 0; }
.hero--collapsed .pname { font-size: var(--text-2xs); min-width: 0; overflow: hidden; }
.hero--collapsed .pval { font-size: var(--text-xs); }
/* モバイル: pname を非表示にしてドット+数値だけに絞る */
@media (max-width: 600px) {
.hero--collapsed .pname { display: none !important; }
.hero--collapsed .pval { font-size: var(--text-xs); }
.hero--collapsed .prob-row { gap: 3px; }
}
.hero-eyebrow::before {
content: ''; width: 22px; height: 1px; background: var(--gold);
}
.hero-label-jp {
font-family: var(--f-display); font-size: var(--text-md); color: var(--paper-2);
letter-spacing: 0.5em; margin-top: 2px; font-weight: var(--fw-medium);
}
.hero-number {
font-family: var(--f-latin);
font-weight: var(--fw-extra); font-size: clamp(48px, calc(-85.5px + 13.88vw), 92px); line-height: 0.95;
color: var(--hero-num);
letter-spacing: -0.02em;
margin-top: 4px;
text-shadow: var(--hero-num-shadow);
font-variant-numeric: tabular-nums;
display: flex; align-items: flex-end; gap: var(--space-3);
position: relative;
}
.hero-number .unit {
font-family: var(--f-mono); font-size: var(--text-md); font-weight: var(--fw-bold);
color: var(--gold); letter-spacing: 0.32em;
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--gold-deep);
padding-left: 2px; padding-right: 2px;
}
.hero-nums {
display: flex; align-items: flex-end; gap: 28px; margin-top: -4px;
}
.hero-score-block {
padding-left: 0;
border-left: none;
display: flex; flex-direction: column; justify-content: flex-end;
padding-bottom: 0;
margin-top: 24px;
}
.hero-score-eyebrow {
font-family: var(--f-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
color: var(--jade); letter-spacing: 0.22em; text-transform: uppercase;
margin-bottom: 4px;
}
.hero-score-num {
font-family: var(--f-latin); font-weight: var(--fw-extra); font-size: 48px;
color: var(--jade-bright); line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 20px rgba(168,212,180,0.2);
}
.hero-score-hint {
font-family: var(--f-mono); font-size: var(--text-xs); font-weight: var(--fw-medium);
color: var(--paper-mute); letter-spacing: 0.06em;
margin-top: 5px;
}
.hero-breakdown {
display: flex; gap: var(--space-7); margin-top: 10px;
padding-top: 10px; border-top: 1px solid var(--ink-2);
}
.hb-item { display: flex; flex-direction: column; gap: 3px; }
.hb-label {
font-family: var(--f-mono); font-size: var(--text-12); font-weight: var(--fw-semibold);
color: var(--paper-mute); letter-spacing: 0.16em; text-transform: uppercase;
}
.hb-value {
font-family: var(--f-mono); font-size: var(--text-2xl); font-weight: var(--fw-bold);
color: var(--paper); letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.hb-value.phys { color: var(--vermilion-bright); }
.hb-value.elem { color: var(--jade-bright); }
.hb-val-row { display: flex; align-items: baseline; gap: var(--space-2); }
.hb-pct {
font-family: var(--f-mono); font-size: var(--text-lg); font-weight: var(--fw-semibold);
color: var(--paper-mute); letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.hb-pct.phys { color: rgba(232,81,58,0.6); }
.hb-pct.elem { color: rgba(168,212,180,0.6); }
/* Donut on right */
.hero-right {
padding: 10px 14px;
display: flex; flex-direction: column;
border-left: 1px solid var(--ink-2);
background: var(--surf-shade);
position: relative; z-index: 1;
min-width: 0;
}
.donut-wrap {
display: flex; align-items: center; justify-content: center;
gap: var(--space-2);
width: 100%;
min-width: 0;
overflow: hidden;
}
.donut-block {
display: flex; flex-direction: row; align-items: center;
gap: var(--space-2-5); min-width: 0; width: 100%;
}
.donut {
width: 100px; height: 100px; flex-shrink: 0; position: relative;
}
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-bg { stroke: var(--donut-track); }
.donut-seg { transition: stroke-dashoffset 0.6s cubic-bezier(.4,.2,.2,1); }
#arcPhys, #arcElem { transition: stroke-dashoffset 0.6s cubic-bezier(.4,.2,.2,1), stroke-dasharray 0.6s cubic-bezier(.4,.2,.2,1); }
.donut-center {
position: absolute; inset: 0; display: grid; place-items: center;
text-align: center;
}
.donut-center-label {
font-family: var(--f-display, 'Cinzel', serif);
font-size: var(--text-md); font-weight: var(--fw-extra);
color: var(--gold-bright);
letter-spacing: 0.22em;
text-transform: uppercase;
text-shadow:
0 1px 2px rgba(0,0,0,0.85),
0 0 10px rgba(240,210,138,0.35);
}
.donut-center-val {
font-family: var(--f-display); font-size: var(--text-lg); font-weight: var(--fw-bold);
color: var(--gold-bright); letter-spacing: 0.08em; margin-top: 2px;
}
.prob-legend {
display: grid; grid-template-columns: 1fr;
gap: var(--space-half); width: auto; flex: 1; min-width: 0;
}
.prob-row {
display: flex; align-items: center; gap: var(--space-2);
padding: 2px 0; border-bottom: none;
}
.prob-dot {
width: 9px; height: 9px; flex-shrink: 0; border-radius: 1px;
box-shadow: 0 0 8px currentColor;
}
.prob-row .pname {
font-family: var(--f-body); font-size: var(--text-sm); font-weight: var(--fw-semibold);
color: var(--paper-2); flex: 1;
}
.prob-row .pval {
font-family: var(--f-mono); font-size: var(--text-14); font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
}
.prob-crit { color: var(--chart-crit); }
.prob-sympathy { color: var(--chart-sympathy); }
.prob-graze { color: var(--chart-graze); }
.prob-normal { color: var(--chart-normal); }
/* ── Tier バッジ ──────────────────────────────────────────── */
.tier-badge:empty { display: none; }
/* sidebar 総合武力 横 tier badge (グロウなしシンプル) — 1.5倍サイズ */
.wwm-sb-tier-badge {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--f-latin); font-weight: var(--fw-extra); font-size: 16.5px;
letter-spacing: 0.05em; padding: 1.5px 9px; margin-left: 9px;
border: 1px solid currentColor; border-radius: 2px; line-height: 1;
vertical-align: baseline;
position: relative; top: -2px; overflow: hidden;
}
/* 空時もレイアウト確保 (display:none だと初期render時に行高変動するため visibility:hidden で要素は残す) */
.wwm-sb-tier-badge:empty { visibility: hidden; }
.wwm-sb-tier-badge { min-width: 28px; box-sizing: border-box; }
/* SS/S 拡散glow を sidebar 用に縮小 (box-shadow override) */
.wwm-sb-tier-badge.tier-SS {
box-shadow:
0 0 5px var(--vermilion-strong),
0 0 10px rgba(240,210,138,0.35),
inset 0 1px 0 var(--gold-bright-soft) !important;
text-shadow: 0 0 4px rgba(240,210,138,0.6) !important;
}
.wwm-sb-tier-badge.tier-S {
box-shadow:
0 0 4px rgba(255,107,80,0.5),
inset 0 1px 0 rgba(255,140,100,0.25) !important;
text-shadow: 0 0 3px rgba(255,107,80,0.55) !important;
}
.tier-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--f-latin);
font-weight: var(--fw-extra);
font-size: clamp(14px, calc(-34.4px + 5.03vw), 30px);
letter-spacing: 0.08em;
padding: clamp(1px, calc(-8.07px + 0.94vw), 4px) clamp(8px, calc(-28.3px + 3.77vw), 20px);
border-radius: 2px;
vertical-align: baseline;
margin-left: 8px;
line-height: 1;
border: 1px solid transparent;
position: relative;
overflow: hidden;
}
.tier-badge.tier-SS {
padding: clamp(1px, calc(-8.07px + 0.94vw), 4px) clamp(6px, calc(-24.25px + 3.14vw), 16px);
}
.tier-badge-compact {
font-size: var(--text-sm);
padding: 1px 6px;
margin-left: 5px;
line-height: 1.4;
}
.tier-badge-compact::before { display: none; }
/* SS — gold shimmer sweep + red pulse glow */
.tier-SS {
color: #f0d28a;
background: linear-gradient(135deg, rgba(180,40,28,0.48) 0%, rgba(100,20,14,0.38) 50%, rgba(180,40,28,0.48) 100%);
border-color: rgba(240,210,138,0.65);
text-shadow: 0 0 18px rgba(240,210,138,0.95), 0 0 36px var(--vermilion-strong);
box-shadow:
0 0 20px rgba(200,60,43,0.6),
0 0 45px var(--vermilion-soft-2),
inset 0 1px 0 rgba(240,210,138,0.28),
inset 0 -1px 0 rgba(0,0,0,0.45);
animation: tier-ss-glow 2.2s ease-in-out infinite;
}
.tier-SS::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 25%,
rgba(240,210,138,0.30) 50%,
transparent 75%
);
background-size: 250% 100%;
animation: tier-ss-shimmer 2.8s linear infinite;
pointer-events: none;
}
@keyframes tier-ss-glow {
0%, 100% {
box-shadow: 0 0 20px rgba(200,60,43,0.6), 0 0 45px var(--vermilion-soft-2),
inset 0 1px 0 rgba(240,210,138,0.28), inset 0 -1px 0 rgba(0,0,0,0.45);
}
50% {
box-shadow: 0 0 32px rgba(200,60,43,0.85), 0 0 65px rgba(240,210,138,0.22),
inset 0 1px 0 var(--gold-bright-mid), inset 0 -1px 0 rgba(0,0,0,0.45);
}
}
@keyframes tier-ss-shimmer {
0% { background-position: -250% center; }
100% { background-position: 250% center; }
}
/* S — vermilion pulse glow (same style as SS, no shimmer) */
.tier-S {
color: #ff6b50;
background: linear-gradient(135deg, var(--vermilion-mid-2), rgba(138,31,23,0.30));
border-color: rgba(232,81,58,0.72);
text-shadow: 0 0 14px rgba(232,81,58,0.85);
box-shadow:
0 0 18px rgba(200,60,43,0.58),
0 0 40px rgba(200,60,43,0.16),
inset 0 1px 0 rgba(255,130,110,0.20),
inset 0 -1px 0 rgba(0,0,0,0.42);
animation: tier-s-pulse 2.2s ease-in-out infinite;
}
@keyframes tier-s-pulse {
0%, 100% {
box-shadow: 0 0 18px rgba(200,60,43,0.58), 0 0 40px rgba(200,60,43,0.16),
inset 0 1px 0 rgba(255,130,110,0.20), inset 0 -1px 0 rgba(0,0,0,0.42);
}
50% {
box-shadow: 0 0 30px rgba(200,60,43,0.84), 0 0 60px rgba(232,81,58,0.22),
inset 0 1px 0 rgba(255,130,110,0.38), inset 0 -1px 0 rgba(0,0,0,0.42);
}
}
/* A — jade glow */
.tier-A {
color: #a8d4b4;
background: linear-gradient(135deg, rgba(168,212,180,0.20), rgba(127,168,138,0.15));
border-color: rgba(168,212,180,0.58);
text-shadow: 0 0 12px rgba(168,212,180,0.60);
box-shadow: 0 0 11px rgba(168,212,180,0.28), inset 0 1px 0 rgba(168,212,180,0.18);
}
/* B — bone warm glow */
.tier-B {
color: #c9b88a;
background: linear-gradient(135deg, rgba(201,184,138,0.20), rgba(160,140,100,0.15));
border-color: rgba(201,184,138,0.48);
text-shadow: 0 0 10px rgba(201,184,138,0.45);
box-shadow: 0 0 8px rgba(201,184,138,0.22), inset 0 1px 0 rgba(201,184,138,0.14);
}
/* C — dim */
.tier-C {
color: var(--paper-mute);
background: rgba(139,129,112,0.10);
border-color: rgba(139,129,112,0.26);
}
/* ── prefers-reduced-motion: 動きの軽減 ─────────────────── */
@media (prefers-reduced-motion: reduce) {
.tier-SS, .tier-S { animation: none !important; }
.tier-SS::before { animation: none !important; }
.donut-seg { transition: none !important; }
.flash-pulse { animation: none !important; }
}
/* ── :focus-visible — キーボード操作可視化 ─────────────── */
.lang-btn:focus-visible,
.preset-btn:focus-visible,
.icon-btn:focus-visible,
.preset-name-input:focus-visible,
.hero:focus-visible {
outline: 2px solid var(--gold-bright);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(240,210,138,0.18);
}
.hero:focus-visible { outline-offset: -2px; }
html[data-theme="light"] .lang-btn:focus-visible,
html[data-theme="light"] .preset-btn:focus-visible,
html[data-theme="light"] .icon-btn:focus-visible,
html[data-theme="light"] .preset-name-input:focus-visible,
html[data-theme="light"] .hero:focus-visible {
outline-color: var(--vermilion);
box-shadow: 0 0 0 4px var(--vermilion-bright-soft);
}
/* ─────────────────────────────────────────────────────────────────
FOOTER + TOAST
───────────────────────────────────────────────────────────────── */
footer {
text-align: center; padding: 20px 0 6px;
font-family: var(--f-mono); font-size: var(--text-xs);
color: var(--paper-mute); letter-spacing: 0.2em; text-transform: uppercase;
}
footer strong { color: var(--gold); }
#toast {
position: fixed; bottom: 28px; right: 28px;
background: var(--bg-1); color: var(--paper);
padding: 11px 18px;
border: 1px solid var(--gold-deep); border-left: 3px solid var(--gold);
font-family: var(--f-body); font-size: var(--text-12); font-weight: var(--fw-semibold);
letter-spacing: 0.02em;
box-shadow: 0 8px 32px var(--overlay-heavy), 0 0 24px rgba(201,164,90,0.15);
z-index: var(--z-modal); opacity: 0; transform: translateY(8px);
transition: opacity 0.22s, transform 0.22s;
pointer-events: none; white-space: nowrap;
border-radius: 1px;
}
#toast.show { opacity: 1; transform: translateY(0); }
#export-card { display: none; position: fixed; top: -9999px; left: -9999px; }
/* ─────────────────────────────────────────────────────────────────
LIGHT MODE — washi/parchment
───────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
--bg-0: #ede2c8;
--bg-1: #e6dabd;
--bg-2: #ddd0ad;
--bg-3: #d4c69b;
--surf-1: rgba(255, 248, 228, 0.55);
--surf-2: rgba(244, 232, 204, 0.72);
--surf-shade: rgba(58, 38, 22, 0.06);
--surf-shade-2:rgba(58, 38, 22, 0.10);
--surf-shade-3:rgba(58, 38, 22, 0.14);
--rail-grad: linear-gradient(180deg, rgba(58,38,22,0.10), rgba(58,38,22,0.04) 60%, rgba(58,38,22,0.08));
--input-bg: rgba(255, 250, 235, 0.85);
--input-text: #5e3a14;
--header-grad: linear-gradient(180deg, rgba(244,232,204,0.85), rgba(232,218,184,0.85));
--hero-grad: radial-gradient(ellipse 70% 100% at 0% 50%, var(--vermilion-tint), transparent 60%),
linear-gradient(180deg, rgba(244,232,204,0.85), rgba(232,218,184,0.92));
--hero-num: #8a1f17;
--hero-num-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 0 24px var(--vermilion-soft-2);
--donut-track: rgba(58,38,22,0.10);
--ink-1: rgba(40, 25, 18, 0.10);
--ink-2: rgba(40, 25, 18, 0.20);
--ink-3: rgba(40, 25, 18, 0.35);
--paper: #3a2a20;
--paper-2: #3a2818;
--paper-dim: #5a4226;
--paper-mute:#6a5236;
--gold: #8a6a20;
--gold-bright: #5e4310;
--gold-deep: #c9a45a;
--gold-glow: rgba(138, 106, 32, 0.3);
--jade: #4a7a5a;
--jade-bright: #2d5a3a;
--vermilion-bright: #c83c2b;
--vermilion-glow: var(--vermilion-mid-2);
--bone: #6a5236;
--bone-dim: #8a7350;
}
html[data-theme="light"] body {
background:
radial-gradient(ellipse 60% 35% at 50% 0%, rgba(200,60,43,0.20), transparent 65%),
radial-gradient(ellipse 50% 25% at 0% 0%, rgba(138,106,32,0.14), transparent 70%),
radial-gradient(ellipse 50% 25% at 100% 0%, rgba(138,106,32,0.14), transparent 70%),
radial-gradient(ellipse 60% 70% at 100% 100%, rgba(138,106,32,0.10), transparent 55%),
url("data:image/svg+xml;utf8,"),
var(--bg-0);
}
html[data-theme="light"] .sticky-header {
background: transparent;
}
html[data-theme="light"] header.topbar {
background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(200,60,43,0.10), rgba(244,232,204,0.85) 80%);
}
html[data-theme="light"] .preset-bar {
background: rgba(232,218,184,0.92);
}
html[data-theme="light"] .seal {
/* keep red seal but tone the gold inside a bit darker so it pops on paper */
box-shadow:
inset 0 0 0 1px rgba(255,200,180,0.4),
inset 0 -8px 14px rgba(0,0,0,0.35),
0 0 24px rgba(200, 60, 43, 0.25),
0 1px 4px rgba(0,0,0,0.25);
}
html[data-theme="light"] .title-block h1 { color: var(--paper); }
html[data-theme="light"] .title-block h1 .accent { color: var(--vermilion); }
html[data-theme="light"] .title-block p { color: var(--paper-dim); }
html[data-theme="light"] .lang-btn { color: var(--paper-dim); }
html[data-theme="light"] .lang-btn:hover { color: var(--paper); }
html[data-theme="light"] .lang-btn.active { color: var(--vermilion); background: var(--vermilion-tint); }
html[data-theme="light"] .icon-btn { color: var(--paper-dim); }
html[data-theme="light"] .icon-btn:hover { color: var(--vermilion); border-color: var(--vermilion); background: var(--vermilion-faint); }
html[data-theme="light"] .icon-btn.export-btn { color: var(--vermilion); border-color: var(--vermilion); }
html[data-theme="light"] .icon-btn.export-btn:hover { background: var(--vermilion); color: #fff; }
html[data-theme="light"] .icon-btn.import-btn { color: var(--gold-bright); border-color: var(--gold); }
html[data-theme="light"] .icon-btn.import-btn:hover { background: var(--gold); color: #fff; }
html[data-theme="light"] .preset-bar-title { color: var(--gold-bright); }
html[data-theme="light"] .preset-slot-num { color: var(--paper-mute); }
html[data-theme="light"] .preset-slot.has-data { background: rgba(255,246,220,0.7); border-color: rgba(200,60,43,0.4); }
html[data-theme="light"] .preset-slot.has-data .preset-slot-num { color: var(--vermilion); }
html[data-theme="light"] .preset-name-input { color: var(--paper); }
html[data-theme="light"] .preset-name-input::placeholder { color: var(--paper-mute); }
html[data-theme="light"] .preset-save { color: var(--gold-bright); border-color: rgba(138,106,32,0.5); }
html[data-theme="light"] .preset-save:hover { background: var(--gold-bright); color: #fff5dc; }
html[data-theme="light"] .preset-load { color: var(--jade-bright); border-color: rgba(74,122,90,0.5); }
html[data-theme="light"] .preset-load:hover:not(:disabled) { background: var(--jade-bright); color: #fff; }
html[data-theme="light"] .preset-del { color: var(--vermilion); border-color: var(--vermilion-strong); }
html[data-theme="light"] .preset-del:hover:not(:disabled) { background: var(--vermilion); color: #fff; }
html[data-theme="light"] .hero-eyebrow { color: var(--gold-bright); }
html[data-theme="light"] .hero-eyebrow::before { background: var(--gold-bright); }
html[data-theme="light"] .hero-label-jp { color: var(--paper-2); }
html[data-theme="light"] .hero-number .unit { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
html[data-theme="light"] .hb-label { color: var(--paper-dim); }
html[data-theme="light"] .hb-value { color: var(--paper); }
html[data-theme="light"] .hb-value.phys { color: var(--vermilion); }
html[data-theme="light"] .hb-value.elem { color: var(--jade-bright); }
html[data-theme="light"] .hb-pct.phys { color: rgba(200,60,43,0.75); }
html[data-theme="light"] .hb-pct.elem { color: var(--jade-bright); }
html[data-theme="light"] .hcb-pct.phys { color: rgba(200,60,43,0.7); }
html[data-theme="light"] .hcb-pct.elem { color: var(--jade-bright); }
html[data-theme="light"] .hcb-val.phys { color: var(--vermilion); }
html[data-theme="light"] .hcb-val.elem { color: var(--jade-bright); }
html[data-theme="light"] .donut-center-label { color: var(--paper-dim); }
html[data-theme="light"] .donut-center-val { color: var(--vermilion); }
html[data-theme="light"] .prob-row .pname { color: var(--paper-2); }
html[data-theme="light"] .prob-crit { color: #c9a45a; }
html[data-theme="light"] .prob-sympathy { color: var(--vermilion); }
html[data-theme="light"] .prob-graze { color: #8a6a20; }
html[data-theme="light"] .prob-normal { color: var(--paper-mute); }
html[data-theme="light"] footer { color: var(--paper-mute); }
html[data-theme="light"] footer strong { color: var(--vermilion); }
html[data-theme="light"] #toast { background: #fff8e8; color: var(--paper); border-color: var(--gold-deep); border-left-color: var(--gold-bright); }
html[data-theme="light"] .tier-SS {
color: #8a1f17;
background: linear-gradient(135deg, var(--vermilion-soft-2), rgba(138,31,23,0.14));
border-color: rgba(138,31,23,0.55);
text-shadow: 0 0 10px rgba(200,60,43,0.45);
box-shadow: 0 0 12px var(--vermilion-mid), inset 0 1px 0 rgba(255,200,180,0.3);
animation: tier-ss-glow-light 2.2s ease-in-out infinite;
}
html[data-theme="light"] .tier-SS::before {
background: linear-gradient(105deg, transparent 25%, rgba(255,180,150,0.22) 50%, transparent 75%);
background-size: 250% 100%;
}
@keyframes tier-ss-glow-light {
0%, 100% { box-shadow: 0 0 12px var(--vermilion-mid), inset 0 1px 0 rgba(255,200,180,0.3); }
50% { box-shadow: 0 0 22px var(--vermilion-strong), inset 0 1px 0 rgba(255,200,180,0.5); }
}
html[data-theme="light"] .tier-S {
color: #c83c2b;
background: linear-gradient(135deg, var(--vermilion-soft), rgba(138,31,23,0.12));
border-color: var(--vermilion-strong);
text-shadow: 0 0 10px var(--vermilion-mid-2);
box-shadow:
0 0 14px rgba(200,60,43,0.34),
0 0 28px rgba(200,60,43,0.10),
inset 0 1px 0 rgba(255,200,180,0.30);
animation: tier-s-pulse-light 2.2s ease-in-out infinite;
}
@keyframes tier-s-pulse-light {
0%, 100% {
box-shadow:
0 0 14px rgba(200,60,43,0.34),
0 0 28px rgba(200,60,43,0.10),
inset 0 1px 0 rgba(255,200,180,0.30);
}
50% {
box-shadow:
0 0 22px rgba(200,60,43,0.50),
0 0 40px rgba(200,60,43,0.18),
inset 0 1px 0 rgba(255,200,180,0.45);
}
}
html[data-theme="light"] .tier-A { color: var(--jade-bright); background: rgba(74,122,90,0.12); border-color: rgba(74,122,90,0.42); text-shadow: none; box-shadow: 0 0 8px rgba(74,122,90,0.18); }
html[data-theme="light"] .tier-B { color: var(--bone-dim); background: rgba(106,82,54,0.10); border-color: rgba(106,82,54,0.35); text-shadow: none; box-shadow: none; }
html[data-theme="light"] .tier-C { color: var(--paper-mute); background: rgba(58,38,22,0.06); border-color: rgba(58,38,22,0.20); text-shadow: none; box-shadow: none; }
/* Count-up flash */
.flash-pulse { animation: flashpulse 0.5s ease-out; }
@keyframes flashpulse {
0% { text-shadow: var(--hero-num-shadow); }
50% { text-shadow: 0 0 60px var(--vermilion-bright-strong), 0 0 100px var(--gold-bright-mid), 0 2px 0 var(--overlay-mid); }
100% { text-shadow: var(--hero-num-shadow); }
}
/* ─────────────────────────────────────────────────────────────────
MOBILE — smartphone layout (≤ 600px)
───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
/* ── 横スクロール完全防止 ── */
html, body { overflow-x: hidden; }
.container {
padding: 0 10px 30px;
overflow-x: hidden;
max-width: 100vw;
}
/* ── iOS: 入力フォーカス時の自動ズーム防止 (font-size ≥ 16px 必須) ── */
.preset-name-input { font-size: var(--text-lg); }
/* ─────────────────────────────────────────────────────────────────
STICKY: topbar のみ固定。preset bar・hero はスクロールさせる
───────────────────────────────────────────────────────────────── */
.sticky-header {
position: static;
background: none;
padding: 0;
margin-bottom: 0;
}
header.topbar {
position: sticky;
top: 0;
z-index: var(--z-overlay);
background: var(--bg-0);
border-bottom: 1px solid var(--ink-2);
flex-wrap: wrap;
padding: 8px 10px;
gap: var(--space-1-5);
margin-bottom: 0;
}
header.topbar::after { display: none; }
/* ── タイトル ── */
.title-block h1 { font-size: var(--text-15); letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-block p { display: none; }
/* ── 右側コントロール: タイトルの下に全幅で並べる ── */
.top-controls {
width: 100%;
justify-content: space-between;
gap: var(--space-1);
flex-wrap: nowrap;
}
.lang-switcher { flex: 1; min-width: 0; }
/* a11y mobile tap target ≥36px (WCAG 2.5.5 推奨) */
.lang-btn { padding: 9px 0; font-size: var(--text-xs); flex: 1; text-align: center; min-width: 0; min-height: 36px; }
.icon-btn { width: 36px; height: 36px; flex-shrink: 0; }
.icon-btn.export-btn,
.icon-btn.import-btn { width: auto; height: 36px; padding: 0 10px; font-size: var(--text-xs); flex-shrink: 0; }
.wwm-modal-close { width: 36px; height: 36px; }
.preset-btn { min-height: 32px; }
/* ─────────────────────────────────────────────────────────────────
PRESET BAR
───────────────────────────────────────────────────────────────── */
.preset-bar {
flex-direction: column;
gap: var(--space-1-5);
padding: 8px 10px;
margin-top: 6px;
margin-bottom: 10px;
}
.preset-bar-title { font-size: var(--text-xs); flex-shrink: 0; }
.preset-slots { flex-direction: column; gap: 5px; width: 100%; }
.preset-slot {
min-width: 0;
width: 100%;
flex: none;
padding: 5px 8px;
gap: var(--space-1);
}
.preset-slot-num { width: 14px; flex-shrink: 0; }
.preset-name-input { min-width: 0; flex: 1; font-size: var(--text-14); }
.preset-btn { padding: 6px 8px; font-size: var(--text-xs); white-space: nowrap; flex-shrink: 0; }
/* ─────────────────────────────────────────────────────────────────
HERO — 縦積みレイアウト
───────────────────────────────────────────────────────────────── */
/* モバイル折りたたみ: 右列を画面幅に収まるサイズに縮小 */
.hero--collapsed {
grid-template-columns: 1fr 190px !important;
}
.hero--collapsed .hero-right {
padding: 6px 10px !important;
}
.hero--collapsed .donut { width: 56px !important; height: 56px !important; }
.hero--collapsed .donut-wrap { gap: var(--space-2); }
.hero-left { padding: 12px 12px 10px; }
.hero-right { padding: 10px 12px 12px; }
.hero-eyebrow { font-size: var(--text-xs); gap: var(--space-1-5); }
.hero-eyebrow::before { width: 10px; }
.hero-label-jp { font-size: var(--text-xs); letter-spacing: 0.14em; margin-top: 3px; }
/* 期待値とSTATUS SCOREを縦積み */
.hero-nums {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
margin-top: 6px;
}
.hero-number { font-size: 52px; }
.hero-number .unit { font-size: var(--text-xs); padding-bottom: 8px; letter-spacing: 0.2em; }
/* STATUS SCORE: 横一行コンパクト表示 */
.hero-score-block {
border-left: none;
border-top: 1px solid var(--ink-2);
padding-left: 0;
padding-top: 8px;
padding-bottom: 0;
flex-direction: row;
align-items: center;
gap: var(--space-2-5);
width: 100%;
}
.hero-score-eyebrow { font-size: var(--text-2xs); letter-spacing: 0.14em; margin-bottom: 0; }
.hero-score-num { font-size: 26px; }
.hero-breakdown { gap: var(--space-4); margin-top: 10px; padding-top: 8px; }
.hb-label { font-size: var(--text-xs); letter-spacing: 0.1em; }
.hb-value { font-size: var(--text-14); }
/* ── ドーナツ ── */
.donut { width: 96px; height: 96px; }
.donut-wrap { gap: var(--space-3-5); }
.prob-row .pname { font-size: var(--text-xs); }
.prob-row .pval { font-size: var(--text-12); }
.donut-center-label { font-size: var(--text-2xs); letter-spacing: 0.12em; }
.donut-center-val { font-size: var(--text-sm); }
/* ─────────────────────────────────────────────────────────────────
STAT CARDS
───────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────
TOAST
───────────────────────────────────────────────────────────────── */
#toast {
bottom: 14px;
right: 10px;
left: 10px;
text-align: center;
white-space: normal;
font-size: var(--text-sm);
}
}
/* ── Import Modal ───────────────────────────────────────────── */
.wwm-modal-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.7);
display: flex; align-items: center; justify-content: center;
z-index: var(--z-toast);
padding: var(--space-4);
}
.wwm-modal {
position: relative;
background:
radial-gradient(ellipse at top right, rgba(240,210,138,0.06), transparent 55%),
linear-gradient(180deg, var(--surf-1), var(--surf-2));
color: var(--text, #fff);
border-radius: 0 0 2px 2px;
max-width: 600px; width: 100%;
max-height: 90vh;
display: flex; flex-direction: column;
border: 1px solid var(--ink-2);
border-top: 1px solid var(--gold-deep);
border-left: 3px solid var(--gold);
box-shadow:
inset 0 1px 0 var(--gold-bright-faint),
0 12px 40px var(--overlay-heavy);
}
.wwm-modal::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 90px; height: 90px;
background: radial-gradient(ellipse at top right, rgba(240,210,138,0.18), transparent 65%);
pointer-events: none;
z-index: 0;
border-radius: 0 0 0 2px;
}
.wwm-modal::after {
content: '';
position: absolute;
top: 8px; right: 8px;
width: 16px; height: 16px;
border-top: 1px solid var(--gold-deep);
border-right: 1px solid var(--gold-deep);
opacity: 0.6;
pointer-events: none;
z-index: 1;
}
.wwm-modal > * { position: relative; z-index: 2; }
.wwm-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px 10px;
border-bottom: 1px solid var(--ink-2);
position: relative;
}
.wwm-modal-header::after {
content: '';
position: absolute;
left: 16px; bottom: -1px;
width: 48px; height: 1px;
background: linear-gradient(90deg, var(--gold-bright), transparent);
box-shadow: 0 0 8px var(--gold-bright-mid);
}
.wwm-modal-header h2 {
margin: 0;
font-family: var(--f-display, var(--f-latin));
font-size: var(--text-15); font-weight: var(--fw-bold);
color: var(--gold-bright);
letter-spacing: 0.15em;
text-transform: uppercase;
text-shadow: 0 0 10px var(--gold-bright-soft);
}
.wwm-modal-close {
background: none; border: none;
color: inherit; font-size: var(--text-24);
cursor: pointer; padding: 0; width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border-radius: 4px;
}
.wwm-modal-close:hover { background: var(--hover-soft); }
.wwm-modal-body {
padding: var(--space-4); overflow-y: auto; flex: 1;
}
.wwm-btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.wwm-btn-primary, .wwm-btn-secondary {
padding: 10px 18px;
border: none; border-radius: 6px;
cursor: pointer; font-weight: var(--fw-bold); font-size: var(--text-14);
text-decoration: none; display: inline-block;
font-family: inherit;
}
.wwm-btn-primary {
background: var(--accent, #d4af37);
color: #000;
}
.wwm-btn-primary:hover { opacity: 0.85; }
.wwm-btn-secondary {
background: transparent;
color: var(--text, #fff);
border: 1px solid rgba(255,255,255,0.3);
}
.wwm-btn-secondary:hover { background: var(--hover-soft); }
.wwm-kv {
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 12px;
margin: 0 0 12px 0;
}
.wwm-kv dt { font-weight: var(--fw-semibold); opacity: 0.8; }
.wwm-kv dd { margin: 0; }
.wwm-list { margin: 0; padding-left: 18px; }
.wwm-list li { margin: 2px 0; }
.wwm-muted { opacity: 0.6; font-size: var(--text-12); }
.wwm-pre {
background: #0a0a0a; color: #0f0;
padding: var(--space-2); border-radius: 4px;
font-size: var(--text-sm); max-height: 240px;
overflow: auto; white-space: pre-wrap;
word-break: break-all;
}
.wwm-raw-details { margin-top: 12px; }
.wwm-raw-details summary { cursor: pointer; opacity: 0.7; font-size: var(--text-md); }
.wwm-last-import {
margin-top: 16px; padding: var(--space-2-5);
background: rgba(255,255,255,0.05);
border-radius: 6px;
border-left: 3px solid var(--accent, #d4af37);
}
.wwm-last-import > div { margin: 6px 0; font-size: var(--text-md); }
.wwm-preview-summary { font-size: var(--text-14); }
.wwm-info-grid {
display: grid;
grid-template-columns: auto auto auto;
gap: 6px 32px;
margin-bottom: 12px;
justify-content: start;
}
.wwm-info-col { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; align-content: start; }
.wwm-info-row { display: contents; font-size: var(--text-md); }
.wwm-info-label { opacity: 0.7; white-space: nowrap; }
.wwm-info-val { font-weight: var(--fw-semibold); white-space: nowrap; }
@media (max-width: 768px) {
.wwm-info-grid { grid-template-columns: 1fr; }
}
.wwm-equip-base ul li, .wwm-equip-affix ul li {
display: flex; justify-content: space-between; align-items: baseline;
gap: var(--space-1); list-style: none;
font-size: var(--text-sm);
}
.wwm-equip-base ul, .wwm-equip-affix ul { padding-left: 0; list-style: none; }
.wwm-stat-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wwm-stat-val { font-weight: var(--fw-bold); white-space: nowrap; text-align: right; flex-shrink: 0; }
.wwm-stat-pct { font-weight: var(--fw-normal); opacity: 0.65; font-size: var(--text-xs); }
/* ── Sidebar (テスト用 fixed) ────────────────────────────────── */
.wwm-sidebar-test {
position: fixed;
top: 80px;
right: 12px;
width: 300px;
max-height: calc(100vh - 100px);
overflow-y: auto;
background: linear-gradient(180deg, var(--surf-1), var(--surf-2));
border: 1px solid var(--ink-2);
border-left: 3px solid var(--vermilion);
border-radius: 2px;
padding: var(--space-3);
font-size: var(--text-12);
z-index: var(--z-floating);
color: var(--paper);
scrollbar-width: none;
-ms-overflow-style: none;
}
.wwm-sidebar-test::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.wwm-sidebar-test:empty { display: none; }
/* ── mini-hero header card (案C武侠化、 sticky固定、 枠透明) ────────────── */
.wwm-sb-mini-hero-card {
position: sticky;
top: 0;
z-index: 10;
background:
radial-gradient(ellipse at top right, rgba(240,210,138,0.06), transparent 55%),
linear-gradient(180deg, var(--surf-1), var(--surf-2));
border: 1px solid var(--gold-deep);
padding: 12px 14px;
margin-bottom: 10px;
overflow: hidden;
/* ヘッダー部分は内部要素 (tier badge ルーレット等) で揺れないよう固定高 */
height: 84px !important;
min-height: 84px !important;
max-height: 84px !important;
box-sizing: border-box;
}
.wwm-sb-mini-hero-card::before,
.wwm-sb-mini-hero-card::after,
.wwm-sb-mini-hero-card .wwm-sb-l-bl,
.wwm-sb-mini-hero-card .wwm-sb-l-br {
content: ''; position: absolute;
width: 10px; height: 10px;
border: 1.5px solid var(--gold-deep);
pointer-events: none;
z-index: 2;
}
.wwm-sb-mini-hero-card::before { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.wwm-sb-mini-hero-card::after { top: 4px; right: 4px; border-left: none; border-bottom: none; }
.wwm-sb-mini-hero-card .wwm-sb-l-bl { bottom: 4px; left: 4px; border-right: none; border-top: none; }
.wwm-sb-mini-hero-card .wwm-sb-l-br { bottom: 4px; right: 4px; border-left: none; border-top: none; }
.wwm-sb-mini-hero-ink {
position: absolute; bottom: -15px; left: -20px;
width: 200px; height: 60px;
background: linear-gradient(90deg, rgba(232,81,58,0), rgba(232,81,58,0.18), rgba(232,81,58,0));
filter: blur(8px);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
html[data-theme="light"] .wwm-sb-mini-hero-card {
background: linear-gradient(180deg, #f4e8cc, #ede0c0);
}
html[data-theme="light"] .wwm-sb-mini-hero-ink {
background: linear-gradient(90deg, rgba(184,134,11,0), rgba(184,134,11,0.16), rgba(184,134,11,0));
}
/* light mini-hero: 総合武力/武格指数 の label/値を濃色化 (cream上で gold/muted が低コントラストのため) */
html[data-theme="light"] .wwm-sb-mini-hero-card .wwm-sb-totalmartial b,
html[data-theme="light"] .wwm-sb-mini-hero-card .wwm-sb-martial b { color: #8a5212 !important; text-shadow: none !important; }
html[data-theme="light"] .wwm-sb-mini-hero-card .wwm-sb-totalmartial .wwm-muted,
html[data-theme="light"] .wwm-sb-mini-hero-card .wwm-sb-martial .wwm-muted { color: #5a4326 !important; opacity: 0.85 !important; }
/* mini-hero card 内の sb-top: sticky/border 解除 */
.wwm-sb-mini-hero-card .wwm-sb-top {
position: relative !important;
top: auto !important;
background: none !important;
border-bottom: none !important;
margin-bottom: 0 !important;
padding: 0 !important;
z-index: 1;
}
/* sections wrapper */
.wwm-sb-rest {
background: linear-gradient(180deg, var(--surf-1), var(--surf-2));
border: 1px solid var(--ink-1);
padding: 10px 18px 12px 12px;
display: flex; flex-direction: column; gap: 4px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--gold-deep) transparent;
scrollbar-gutter: stable;
}
.wwm-sb-rest::-webkit-scrollbar { width: 6px; }
.wwm-sb-rest::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 3px; }
html[data-theme="light"] .wwm-sb-rest {
background: linear-gradient(180deg, #f5ead0, #ede0c0);
border-color: rgba(40,25,18,0.15);
}
/* #wwmSidebar 本体の border を透明 (内側 mini-hero / rest が枠を持つ) */
#wwmSidebar { border-color: transparent !important; }
/* サイドパネル + 装備/心法カード 全体 Noto Serif JP に統一 */
#wwmSidebar,
#wwmSidebar *,
#wwmGearGrid,
#wwmGearGrid *,
#wwmXinfaGrid,
#wwmXinfaGrid * {
font-family: var(--f-display, 'Noto Serif JP'), serif !important;
}
.wwm-sb-top {
display: flex; align-items: center; gap: var(--space-2-5);
padding: 10px 0 10px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(212,175,55,0.3);
position: sticky;
top: -12px;
background: #1a1410;
z-index: 5;
}
html[data-theme="light"] .wwm-sb-top { background: #f5ead0; }
.wwm-sb-info {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
gap: var(--space-half);
}
.wwm-sb-totalmartial, .wwm-sb-martial {
font-size: var(--text-sm);
display: flex; align-items: center;
line-height: 1.25;
}
/* 武格指数 row: SSバッジ縮小 + 中央揃え (base) で row を上げ、3行を等間隔に。top:0 で -2px浮き解除 */
.wwm-sb-martial .wwm-sb-tier-badge { font-size: 13px; padding: 0 6px; top: 0; }
.wwm-sb-totalmartial b, .wwm-sb-martial b { color: var(--accent, #d4af37); font-weight: var(--fw-bold); margin-left: 4px; }
.wwm-sb-import-btn {
flex-shrink: 0;
padding: 6px 10px;
font-size: var(--text-sm);
font-weight: var(--fw-bold);
letter-spacing: 1px;
background: transparent;
color: var(--vermilion, #c83c2b);
border: 1px solid var(--vermilion, #c83c2b);
border-radius: 4px;
cursor: pointer;
transition: background 0.1s, color 0.1s;
}
.wwm-sb-import-btn:hover {
background: var(--vermilion, #c83c2b);
color: #fff;
}
.wwm-sb-section-title {
cursor: pointer;
user-select: none;
}
.wwm-sb-section-title:hover { opacity: 0.85; }
.wwm-sb-sec-arrow {
display: inline-block;
font-size: var(--text-xs);
margin-right: 4px;
vertical-align: middle;
transition: transform 0.15s;
}
.wwm-sb-collapsed-sec .wwm-sb-items { display: none; }
/* ── Setup modal wizard ─────────────────────────────────────── */
.wwm-setup-collapse {
margin: 12px 0;
border: 1px solid var(--ink-2); border-radius: 4px;
background: var(--surf-shade);
}
.wwm-setup-collapse > summary {
padding: 10px 14px; cursor: pointer; user-select: none;
font-weight: var(--fw-semibold); font-size: var(--text-md); color: var(--paper-dim);
list-style: none; outline: none;
display: flex; align-items: center; gap: var(--space-2);
}
.wwm-setup-collapse > summary::-webkit-details-marker { display: none; }
.wwm-setup-collapse > summary::before {
content: '▶'; font-size: var(--text-xs); transition: transform 0.15s; color: var(--gold-bright);
}
.wwm-setup-collapse[open] > summary::before { transform: rotate(90deg); }
.wwm-setup-collapse > summary:hover { color: var(--gold-bright); }
.wwm-setup-collapse-body { padding: 12px 14px 14px; border-top: 1px solid var(--ink-2); }
.wwm-setup-tabs { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--accent, #d4af37); margin-bottom: 12px; }
.wwm-setup-tab { padding: 8px 16px; background: none; border: none; color: inherit; font-size: var(--text-md); cursor: pointer; border-radius: 4px 4px 0 0; }
.wwm-setup-tab.active { background: var(--accent, #d4af37); color: #000; font-weight: var(--fw-bold); }
.wwm-setup-steps { margin: 0; padding-left: 20px; font-size: var(--text-md); }
.wwm-setup-steps li { margin: 8px 0; }
.wwm-bm-link {
display: inline-block; padding: 8px 16px;
background: var(--accent, #d4af37); color: #000;
text-decoration: none; border-radius: 4px;
font-weight: var(--fw-bold); cursor: grab; user-select: none;
margin-top: 4px;
}
.wwm-bm-link:active { cursor: grabbing; }
.wwm-bm-code {
width: 100%; min-height: 80px; max-height: 120px;
font-family: monospace; font-size: var(--text-xs);
background: #0a0a0a; color: #0f0;
border: 1px solid #333; border-radius: 4px;
padding: var(--space-1-5); word-break: break-all; resize: vertical;
box-sizing: border-box;
}
.wwm-reapply-row {
display: flex; align-items: center; gap: var(--space-2-5);
margin-top: 6px;
}
.wwm-reapply-note {
font-size: var(--text-sm); opacity: 0.7; flex: 1;
line-height: 1.4;
}
.wwm-sb-avatar {
width: 44px; height: 44px;
border-radius: 6px;
object-fit: cover;
border: 1px solid rgba(212,175,55,0.6);
flex-shrink: 0;
}
.wwm-sb-charname {
font-size: var(--text-md); font-weight: var(--fw-bold);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wwm-sb-header {
display: flex; justify-content: space-between;
padding: 6px 0; margin-bottom: 8px;
border-bottom: 1px solid var(--accent, #d4af37);
}
.wwm-sb-header-label { opacity: 0.7; }
.wwm-sb-header-value { font-weight: var(--fw-bold); color: var(--accent, #d4af37); }
.wwm-sb-section { margin-bottom: 12px; }
.wwm-sb-section-title {
font-size: var(--text-12); margin: 0 0 4px;
color: var(--accent, #d4af37);
padding: 2px 6px;
background: rgba(212,175,55,0.08);
border-radius: 3px;
}
.wwm-sb-items { display: flex; flex-direction: column; gap: var(--space-half); }
.wwm-sb-row {
display: flex; justify-content: space-between;
padding: 2px 6px; align-items: baseline;
}
.wwm-sb-row.wwm-sb-sub { padding-left: 18px; opacity: 0.85; font-size: var(--text-sm); }
.wwm-sb-label { opacity: 0.75; white-space: nowrap; flex-shrink: 0; }
.wwm-sb-value { font-weight: var(--fw-semibold); text-align: right; min-width: 0; }
.wwm-sb-warn {
display: inline-block;
color: var(--vermilion-bright, #ff6b4a);
font-size: var(--text-sm);
margin-left: 2px;
cursor: help;
text-shadow: 0 0 6px var(--vermilion-strong);
}
.wwm-sb-expandable { cursor: pointer; }
.wwm-sb-sub-group.wwm-sb-collapsed { display: none; }
.wwm-sb-applied { color: #d4af37; opacity: 0.85; font-size: 0.78em; margin-left: 4px; }
/* light: sidebar 適用値 (判定確率の括弧内) を濃amberに (cream上で gold が低コントラストのため) */
html[data-theme="light"] .wwm-sb-applied { color: #8a5212; opacity: 1; }
/* hiddenStat: ゲーム実機で見えない内部値 (例 critRateBoosted = ボーナス会心率込みの実効会心率) → スレート青で区別 */
.wwm-sb-row.wwm-sb-hidden-stat .wwm-sb-label,
.wwm-sb-row.wwm-sb-hidden-stat .wwm-sb-value { color: #7a93b0; }
html[data-theme="light"] .wwm-sb-row.wwm-sb-hidden-stat .wwm-sb-label,
html[data-theme="light"] .wwm-sb-row.wwm-sb-hidden-stat .wwm-sb-value { color: #3d5266; }
.wwm-sb-baseline { color: var(--paper-mute); opacity: 0.7; font-weight: var(--fw-medium); }
.wwm-sb-arrow {
color: var(--gold); margin: 0 3px; opacity: 0.7;
font-size: var(--text-xs);
display: inline-block;
transform: translateY(-1px);
}
/* ── 新レイアウト: 旧 form sections 非表示 ─────────────────────── */
/* ── OBS overlay モード (?view=sidebar) ─────────────────────────── */
html.wwm-view-sidebar {
--overlay-bg-alpha: 0;
--overlay-bg-rgb: 10,10,10;
background: transparent !important;
background-color: transparent !important;
}
html.wwm-view-sidebar body,
html.wwm-view-sidebar body.wwm-layout-active {
background-color: rgba(var(--overlay-bg-rgb), var(--overlay-bg-alpha)) !important;
background-image: none !important;
height: 100vh !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
}
html.wwm-view-sidebar .sticky-header,
html.wwm-view-sidebar .wwm-app-body .container,
html.wwm-view-sidebar .wwm-footer,
html.wwm-view-sidebar #wwmAffixRanking,
html.wwm-view-sidebar #wwmOptimization,
html.wwm-view-sidebar .wwm-analysis-tabs,
html.wwm-view-sidebar .hero,
html.wwm-view-sidebar .hero-wuxia,
html.wwm-view-sidebar .ink-stroke {
display: none !important;
}
html.wwm-view-sidebar .wwm-app-body {
display: block !important;
height: 100vh !important;
max-height: 100vh !important;
padding: 8px !important;
margin: 0 !important;
max-width: none !important;
}
html.wwm-view-sidebar .wwm-sidebar-test {
position: relative !important;
top: auto !important;
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 1px solid rgba(212,175,55,0.3) !important;
border-left: 3px solid var(--vermilion) !important;
}
/* sb-top: sticky 上部 (avatar+総合武力) のみユーザー alpha で背景 */
html.wwm-view-sidebar .wwm-sb-top {
background: transparent !important;
position: relative !important;
top: auto !important;
}
/* OBS view: 背景は mini-hero-card 側に持たせて朱墨ink維持 */
html.wwm-view-sidebar .wwm-sb-mini-hero-card {
background-color: rgba(var(--overlay-bg-rgb), var(--overlay-bg-alpha)) !important;
background-image:
radial-gradient(ellipse at top right, rgba(240,210,138,0.08), transparent 55%) !important;
}
/* overlay モード: IMPORT button / 透明度 slider 非表示 */
html.wwm-view-sidebar .wwm-sb-import-btn,
html.wwm-view-sidebar .wwm-overlay-ctrl {
display: none !important;
}
/* overlay モード: 文字色 / ラベル色 カスタマイズ */
html.wwm-view-sidebar .wwm-sb-label,
html.wwm-view-sidebar .wwm-sb-charname,
html.wwm-view-sidebar .wwm-sb-totalmartial,
html.wwm-view-sidebar .wwm-stat-name,
html.wwm-view-sidebar .wwm-sb-sub { color: var(--overlay-text-1) !important; }
html.wwm-view-sidebar .wwm-sb-value,
html.wwm-view-sidebar .wwm-sb-totalmartial b,
html.wwm-view-sidebar .wwm-stat-val { color: var(--overlay-text-2) !important; }
html.wwm-view-sidebar .wwm-sb-section-title,
html.wwm-view-sidebar .wwm-sb-header-value { color: var(--overlay-accent) !important; }
/* OBS view: rest 背景は overlay透明前提 (濃帯化防止) */
html.wwm-view-sidebar .wwm-sb-rest {
background: transparent !important;
border-color: transparent !important;
}
/* OBS view: section title背景を URL param --overlay-label-bg で制御 */
html.wwm-view-sidebar .wwm-sb-section-title {
background-color: var(--overlay-label-bg, #d4af37) !important;
}
/* 透明度 slider (右上 fixed) */
.wwm-overlay-ctrl {
position: fixed; top: 8px; right: 8px;
z-index: var(--z-tooltip);
background: var(--overlay-heavy);
border: 1px solid var(--gold-deep);
border-radius: 3px;
padding: 6px 10px;
font-family: var(--f-mono); font-size: var(--text-sm);
color: var(--gold-bright);
display: flex; align-items: center; gap: var(--space-2);
opacity: 0.25;
transition: opacity 0.2s;
}
.wwm-overlay-ctrl:hover { opacity: 1; }
.wwm-overlay-ctrl input[type=range] {
width: 100px; accent-color: var(--gold);
}
/* ── 新 app-layout: fixed header + 左右独立scroll ───── */
html, body { height: 100%; margin: 0; overflow: hidden; }
body.wwm-layout-active {
margin: 0 !important;
height: 100vh !important;
overflow: hidden !important;
box-sizing: border-box;
display: block !important;
}
body.wwm-layout-active .sticky-header {
position: fixed; top: 0; left: 0; right: 0;
height: 135px;
z-index: var(--z-overlay);
background: transparent;
padding: 0;
box-sizing: border-box;
}
body.wwm-layout-active .sticky-header > .topbar,
body.wwm-layout-active .sticky-header > .preset-bar {
max-width: 1280px; margin: 0 auto; width: 100%; box-sizing: border-box;
padding-left: 16px; padding-right: 16px;
}
body.wwm-layout-active .wwm-footer { display: block; }
body.wwm-layout-active .wwm-app-body {
height: calc(100vh - 135px - 32px);
margin: 135px auto 0;
max-width: 1280px;
width: 100%;
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
grid-template-rows: auto 1fr;
grid-template-areas:
"hero hero"
"sidebar main";
gap: var(--space-4);
padding: 16px 16px 0;
box-sizing: border-box;
overflow: hidden;
}
body.wwm-layout-active .wwm-app-body > .hero.hero-wuxia { grid-area: hero; }
body.wwm-layout-active .wwm-app-body > script + script,
body.wwm-layout-active .wwm-app-body > script { display: none; }
/* 大画面でも main column が無限に広がらないよう max-width 制限 */
body.wwm-layout-active .wwm-sidebar-test {
position: relative !important;
top: auto !important;
right: auto !important;
left: auto !important;
bottom: auto !important;
width: 100% !important;
height: calc(100% - 16px) !important;
max-height: none !important;
min-height: 0 !important;
margin-bottom: 16px;
overflow-y: auto !important;
grid-area: sidebar;
z-index: auto;
scrollbar-width: thin;
scrollbar-color: var(--gold-deep) transparent;
scrollbar-gutter: stable;
border-left: none !important;
background: transparent !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* rest を残り高さ全部使う (タブパネル同様 footer まで) */
body.wwm-layout-active .wwm-sb-rest {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* sidebar 本体 scroll は rest が引き受ける (枠内 scrollbar) */
body.wwm-layout-active .wwm-sidebar-test {
overflow-y: hidden !important;
scrollbar-gutter: auto !important;
}
body.wwm-layout-active .wwm-sidebar-test::-webkit-scrollbar { width: 6px; }
body.wwm-layout-active .wwm-sidebar-test::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 3px; }
body.wwm-layout-active .wwm-app-body .container {
grid-area: main;
min-width: 0;
min-height: 0;
height: 100%;
width: 100%;
max-width: none;
margin: 0;
padding: 0 6px 16px 0;
box-sizing: border-box;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--gold-deep) transparent;
scrollbar-gutter: stable;
display: flex;
flex-direction: column;
}
body.wwm-layout-active .wwm-app-body .container > * { flex-shrink: 0; }
/* タブパネル wrap を container の余白に追従させる */
body.wwm-layout-active .wwm-app-body .container > .wwm-analysis-grid {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
}
body.wwm-layout-active .wwm-app-body .container > .wwm-analysis-grid > div {
flex: 1 1 0;
min-height: 0;
}
/* 新構造 .wwm-anlz をフッターまで伸縮 (旧 .wwm-analysis-grid と同パターン) */
body.wwm-layout-active .wwm-app-body .container > .wwm-anlz {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
}
body.wwm-layout-active .wwm-anlz > .wwm-anlz-body {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
}
body.wwm-layout-active .wwm-anlz-body > .wwm-analysis-grid {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
}
body.wwm-layout-active .wwm-anlz-body > .wwm-analysis-grid > div {
flex: 1 1 0;
min-height: 0;
}
body.wwm-layout-active #wwmAffixRanking .wwm-analysis-card,
body.wwm-layout-active #wwmOptimization .wwm-analysis-card,
body.wwm-layout-active #wwmHistory .wwm-analysis-card,
body.wwm-layout-active #wwmQuality .wwm-analysis-card {
height: 100% !important;
min-height: 0 !important;
}
body.wwm-layout-active .wwm-app-body .container::-webkit-scrollbar { width: 6px; }
body.wwm-layout-active .wwm-app-body .container::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 3px; }
body.wwm-layout-active .wwm-footer {
position: fixed;
bottom: 0; left: 0; right: 0;
height: 32px;
z-index: var(--z-sticky);
max-width: 1280px;
margin: 0 auto;
box-sizing: border-box;
text-align: center;
padding: 6px 16px;
font-size: var(--text-sm);
opacity: 0.8;
background: var(--bg-2, #0a0a0a);
border-top: 1px solid var(--ink-2, #333);
}
.wwm-sidebar-test:empty { display: block; }
@media (max-width: 768px) {
body.wwm-layout-active .wwm-app-body { flex-direction: column; padding: 0; }
body.wwm-layout-active .wwm-sidebar-test {
position: relative; width: 100%; max-height: 40vh;
}
}
@media (max-width: 768px) {
.wwm-sidebar-test {
position: relative !important;
width: 100% !important;
left: 0 !important; top: auto !important;
max-height: 50vh !important;
}
body.wwm-layout-active .container { padding-left: 0; }
}
/* ── Gear Grid Container (main 下部) ───────────────────────── */
.wwm-gear-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: var(--space-2);
margin: 16px 0;
align-items: stretch;
}
.wwm-gear-grid .wwm-equip-slot[data-slot] { cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; }
.wwm-gear-grid .wwm-equip-slot[data-slot]:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212,175,55,0.3); }
.wwm-gear-grid .wwm-equip-slot {
position: relative;
overflow: hidden;
}
.wwm-equip-icon {
position: absolute;
right: -14px; top: 62%;
transform: translateY(-50%);
width: 80px; height: 80px;
opacity: 0.15;
filter:
drop-shadow(0 0 3px rgba(212,175,55,0.5))
drop-shadow(0 0 8px rgba(212,175,55,0.3))
drop-shadow(0 0 16px rgba(212,175,55,0.2));
pointer-events: none;
z-index: 0;
}
.wwm-equip-slot-inner { z-index: 1; display: flex; flex-direction: column; }
.wwm-equip-card-score {
position: absolute;
left: 40px; bottom: 8px;
font-family: var(--f-latin);
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--gold-bright, #f0d28a);
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
text-shadow:
0 0 6px rgba(240,210,138,0.55),
0 0 14px rgba(240,210,138,0.30);
z-index: 2;
pointer-events: none;
}
.wwm-equip-card-score b { font-weight: var(--fw-bold); }
.wwm-equip-arrow {
font-size: var(--text-xs);
margin: 0 5px;
color: var(--gold);
opacity: 0.75;
vertical-align: middle;
}
.wwm-equip-delta {
font-size: var(--text-xs);
font-weight: var(--fw-bold);
margin-left: 3px;
vertical-align: middle;
white-space: nowrap;
}
.wwm-equip-delta-pos { color: var(--jade-bright, #a8d4b4); text-shadow: 0 0 4px rgba(168,212,180,0.4); }
.wwm-equip-delta-neg { color: var(--vermilion, #e8513a); text-shadow: 0 0 4px rgba(232,81,58,0.4); }
html[data-theme="light"] .wwm-equip-delta-pos { color: #2d5a3a; text-shadow: none; }
html[data-theme="light"] .wwm-equip-delta-neg { color: #8a2418; text-shadow: none; }
.wwm-equip-kongfu {
display: block;
font-size: var(--text-sm);
color: var(--paper);
font-weight: 600;
letter-spacing: 0.05em;
margin-bottom: 2px;
}
.wwm-sb-sub-group { display: block; }
/* ── Step2 form (観音/武庫) ─────────────────────────────────── */
.wwm-step2 { font-size: var(--text-md); }
.wwm-step2-section-title {
margin: 8px 0 6px; font-size: var(--text-14);
color: var(--accent, #d4af37);
border-bottom: 1px solid rgba(212,175,55,0.3); padding-bottom: 3px;
}
.wwm-enhance-grid {
display: grid; grid-template-columns: max-content max-content;
gap: 6px 24px; justify-content: start;
}
.wwm-xinfa-grid {
display: flex; flex-direction: column;
gap: var(--space-1-5);
}
.wwm-xinfa-cell {
display: grid;
grid-template-columns: 1fr max-content;
grid-template-areas: "label tier" "effect effect";
gap: 4px 10px; align-items: center;
font-size: var(--text-md);
padding: 8px 10px;
background: var(--surf-shade); border: 1px solid var(--ink-2);
border-radius: 3px;
}
.wwm-xinfa-label { font-weight: var(--fw-semibold); grid-area: label; }
.wwm-xinfa-cell > .wwm-xinfa-tier {
grid-area: tier;
padding: 2px 6px;
background: #1a1a1a; color: inherit;
border: 1px solid #444; border-radius: 4px;
font-size: var(--text-12);
}
.wwm-xinfa-effect {
grid-area: effect;
font-size: var(--text-sm); opacity: 0.85;
line-height: 1.45;
min-width: 0;
padding-top: 4px; margin-top: 2px;
border-top: 1px dashed var(--ink-2);
}
.wwm-xinfa-effect br + * { margin-top: 2px; }
/* notice base (sb=sidebar弱点 / cl=changelog 共通) */
.wwm-sb-notice, .wwm-cl-notice {
border-radius: 4px;
font-size: var(--text-12);
}
.wwm-sb-notice {
margin-top: var(--space-3); padding: var(--space-2) var(--space-2-5);
background: var(--vermilion-soft);
border: 1px solid var(--vermilion-strong);
color: #ffb39e;
cursor: pointer;
text-align: center;
}
.wwm-sb-notice:hover { background: var(--vermilion-mid); }
html[data-theme="light"] .wwm-sb-notice { color: var(--vermilion-deep); background: var(--vermilion-tint); }
/* ── Edit modal (gear card affix編集) ───────────────────────── */
.wwm-edit-affixes {
display: flex; flex-direction: column;
gap: var(--space-1-5); margin-top: 8px;
}
.wwm-edit-affix-row {
display: grid;
grid-template-columns: 1fr 90px 70px max-content;
gap: var(--space-2); align-items: center;
padding: 4px 6px;
background: var(--hover-trace);
border-radius: 4px;
}
.wwm-edit-affix-name { font-size: var(--text-md); }
.wwm-edit-affix-val { font-size: var(--text-12); text-align: right; }
.wwm-edit-affix-rank {
padding: 2px 4px; font-size: var(--text-12);
background: #1a1a1a; color: inherit;
border: 1px solid #444; border-radius: 4px;
}
.wwm-edit-affix-useful { font-size: var(--text-12); cursor: pointer; }
/* ── Gear Compare modal (2-column) ──────────────────────────── */
/* ── 案A 武具対照 装飾 ── */
.wwm-cmp-modal-a { position: relative; }
.wwm-cmp-modal-a .wwm-cmp-l-bracket-tl,
.wwm-cmp-modal-a .wwm-cmp-l-bracket-tr,
.wwm-cmp-modal-a .wwm-cmp-l-bracket-bl,
.wwm-cmp-modal-a .wwm-cmp-l-bracket-br {
position: absolute; width: 14px; height: 14px;
border: 1.5px solid var(--gold-deep);
pointer-events: none; z-index: 5;
}
.wwm-cmp-modal-a .wwm-cmp-l-bracket-tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.wwm-cmp-modal-a .wwm-cmp-l-bracket-tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.wwm-cmp-modal-a .wwm-cmp-l-bracket-bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.wwm-cmp-modal-a .wwm-cmp-l-bracket-br { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.wwm-cmp-seal {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: var(--vermilion);
color: #fff;
font-family: var(--f-display, 'Noto Serif JP'); font-weight: 900; font-size: 16px;
border: 2px solid rgba(255,255,255,0.5);
border-radius: 2px;
transform: rotate(-6deg);
margin-left: 8px;
vertical-align: middle;
box-shadow: 0 0 8px rgba(232,81,58,0.6);
}
.wwm-cmp-modal-a {
background: #1a1410 !important;
border: 1px solid var(--gold-deep) !important;
border-radius: 0 !important;
}
/* base .wwm-modal の右上 装飾 (::before glow + ::after 小L字) を非表示 (案A 4隅L字とダブる) */
.wwm-cmp-modal-a::before,
.wwm-cmp-modal-a::after { display: none !important; }
.wwm-cmp-modal-a .wwm-modal-header {
position: relative;
background: #1a1410 !important;
}
.wwm-cmp-modal-a .wwm-modal-header::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: auto; height: 2px;
background: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(232,81,58,0.75) 50%, transparent 72%, transparent 100%);
opacity: 1; pointer-events: none;
}
.wwm-cmp-modal-a .wwm-cmp-set-header { text-shadow: 0 0 6px rgba(240,210,138,0.4) !important; }
.wwm-cmp-modal-a .wwm-cmp-preview {
border-top: 1px solid rgba(201,164,90,0.2);
padding-top: 12px;
}
.wwm-cmp-modal-a .wwm-cmp-preview-value {
font-family: var(--f-latin, 'Cinzel') !important;
font-size: 22px !important;
font-weight: 900 !important;
letter-spacing: 0.04em;
}
.wwm-cmp-modal-a .wwm-cmp-preview-value.pos {
color: var(--jade-bright, #b8e0c4) !important;
text-shadow: 0 0 14px rgba(168,212,180,0.55);
}
.wwm-cmp-modal-a .wwm-cmp-preview-value.neg {
color: var(--vermilion) !important;
text-shadow: 0 0 14px rgba(232,81,58,0.55);
}
.wwm-cmp-modal-a .wwm-cmp-btn-row .wwm-btn-primary,
.wwm-cmp-modal-a .wwm-cmp-btn-row .wwm-btn-secondary {
font-family: var(--f-display, 'Noto Serif JP');
font-weight: 900;
letter-spacing: 0.16em;
}
/* ── 完全A化: col / title / kongfu / rows / pct ── */
.wwm-cmp-modal-a .wwm-cmp-col {
background: #0d0a08 !important;
border: 1px solid var(--ink-1) !important;
border-radius: 0 !important;
padding: 16px 14px 14px !important;
position: relative !important;
overflow: visible !important;
}
.wwm-cmp-modal-a .wwm-cmp-current,
.wwm-cmp-modal-a .wwm-cmp-new {
border: 1px solid var(--ink-1) !important;
}
.wwm-cmp-modal-a .wwm-cmp-title {
position: absolute !important;
top: -14px !important; left: 12px !important;
padding: 0 !important;
margin: 0 !important;
z-index: 4;
display: inline-flex; align-items: center; gap: 8px;
background: transparent !important;
line-height: 1;
}
/* 「現有 / 新置」 を朱印化 (比 と同じ装飾) */
.wwm-cmp-modal-a .wwm-cmp-title::before {
content: attr(data-seal);
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; height: 24px;
padding: 0 8px;
background: var(--vermilion);
color: #fff;
font-family: var(--f-display, 'Noto Serif JP');
font-weight: 900; font-size: 13px;
letter-spacing: 0.12em;
border: 2px solid rgba(255,255,255,0.5);
border-radius: 2px;
transform: rotate(-4deg);
box-shadow: 0 0 8px rgba(232,81,58,0.6);
}
.wwm-cmp-modal-a .wwm-cmp-new .wwm-cmp-title::before {
background: var(--jade);
color: #1a3a24;
box-shadow: 0 0 8px rgba(168,212,180,0.6);
}
/* 本来 title内のテキスト「現有/新置」は朱印で表現するので隠す。 Lv/select は残す */
.wwm-cmp-modal-a .wwm-cmp-title-text { display: none !important; }
.wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv,
.wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select {
color: var(--paper) !important;
font-family: var(--f-mono, 'Rajdhani') !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
border: 1px solid var(--gold-deep) !important;
padding: 0 10px !important;
border-radius: 2px !important;
background: #1a1410 !important;
line-height: 26px !important;
height: 26px !important;
display: inline-flex !important;
align-items: center !important;
box-shadow: none !important;
box-sizing: border-box !important;
vertical-align: middle !important;
}
.wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
padding-right: 24px !important;
background-image: linear-gradient(45deg, transparent 50%, var(--paper) 50%), linear-gradient(135deg, var(--paper) 50%, transparent 50%) !important;
background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50% !important;
background-size: 4px 4px, 4px 4px !important;
background-repeat: no-repeat !important;
background-color: #1a1410 !important;
cursor: pointer !important;
}
.wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select option {
font-size: 14px !important;
font-family: var(--f-mono, 'Rajdhani') !important;
font-weight: 700 !important;
background: #1a1410 !important;
color: var(--paper) !important;
}
.wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select {
cursor: pointer !important;
}
.wwm-cmp-modal-a .wwm-cmp-col {
margin-top: 4px;
}
.wwm-cmp-modal-a .wwm-cmp-current .wwm-cmp-title { color: var(--vermilion) !important; }
.wwm-cmp-modal-a .wwm-cmp-new .wwm-cmp-title { color: var(--jade-bright, #b8e0c4) !important; }
.wwm-cmp-modal-a .wwm-cmp-kongfu-header {
font-family: var(--f-display, 'Noto Serif JP') !important;
font-weight: 700 !important;
font-size: 13px !important;
color: var(--paper) !important;
background: rgba(201,164,90,0.14) !important;
border: none !important;
border-radius: 0 !important;
padding: 6px 8px !important;
margin-bottom: 8px !important;
margin-top: 6px !important;
}
.wwm-cmp-modal-a .wwm-cmp-kongfu-select {
background: rgba(201,164,90,0.14) !important;
border: 1px solid var(--gold-deep) !important;
border-radius: 0 !important;
color: var(--paper) !important;
font-family: var(--f-display, 'Noto Serif JP') !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
margin-top: 6px !important;
}
/* select内 option を統一 (paper bg + #1a1410 / hover青) */
.wwm-cmp-modal-a select option {
font-size: 13px !important;
font-family: var(--f-display, 'Noto Serif JP') !important;
font-weight: 700 !important;
background: #1a1410 !important;
color: var(--paper) !important;
}
.wwm-cmp-modal-a .wwm-cmp-stat-select option {
font-size: 12px !important;
font-family: var(--f-sans, 'Noto Sans JP') !important;
font-weight: 600 !important;
}
.wwm-cmp-modal-a .wwm-cmp-set-header,
.wwm-cmp-modal-a .wwm-cmp-set-select {
background: linear-gradient(90deg, rgba(232,81,58,0.22), transparent) !important;
border: none !important;
border-radius: 0 !important;
color: var(--vermilion-bright, #ff6b4a) !important;
text-shadow: 0 0 6px rgba(232,81,58,0.4) !important;
padding: 6px 8px !important;
margin-bottom: 8px !important;
}
.wwm-cmp-modal-a .wwm-cmp-set-select {
border: 1px solid var(--gold-deep) !important;
}
.wwm-cmp-modal-a .wwm-cmp-rows {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
.wwm-cmp-modal-a .wwm-cmp-row {
display: grid !important;
align-items: center !important;
gap: 6px !important;
padding: 4px 6px !important;
border: none !important;
border-bottom: 1px dashed rgba(201,164,90,0.1) !important;
font-size: 12px !important;
background: transparent !important;
box-shadow: none !important;
}
.wwm-cmp-modal-a .wwm-cmp-name,
.wwm-cmp-modal-a .wwm-cmp-stat-select {
color: var(--paper) !important;
}
.wwm-cmp-modal-a .wwm-cmp-stat-select {
background: rgba(0,0,0,0.4) !important;
border: 1px solid var(--ink-2) !important;
border-radius: 0 !important;
font-size: 11px !important;
}
.wwm-cmp-modal-a .wwm-cmp-val,
.wwm-cmp-modal-a .wwm-cmp-val-input {
font-family: var(--f-mono, 'Rajdhani') !important;
font-weight: 700 !important;
color: var(--gold-bright) !important;
font-size: 13px !important;
}
.wwm-cmp-modal-a .wwm-cmp-val-input {
background: rgba(0,0,0,0.4) !important;
border: 1px solid var(--ink-2) !important;
border-radius: 0 !important;
}
.wwm-cmp-modal-a .wwm-cmp-pct,
.wwm-cmp-modal-a .wwm-cmp-row .wwm-cmp-pct,
.wwm-cmp-modal-a .wwm-cmp-ratio {
font-family: var(--f-mono, 'Rajdhani') !important;
font-size: 10px !important;
padding: 1px 3px !important;
border-radius: 2px !important;
background: rgba(168,212,180,0.18) !important;
color: var(--jade-bright, #b8e0c4) !important;
border: 1px solid rgba(168,212,180,0.4) !important;
min-width: 30px !important;
text-align: center !important;
display: inline-block !important;
margin-left: 0 !important;
}
.wwm-cmp-modal-a .wwm-cmp-pct.low,
.wwm-cmp-modal-a .wwm-cmp-row .wwm-cmp-pct.low,
.wwm-cmp-modal-a .wwm-cmp-ratio.low {
background: rgba(232,81,58,0.18) !important;
color: var(--vermilion) !important;
border-color: rgba(232,81,58,0.4) !important;
}
/* MAX% rank別配色 (ゲーム準拠 金>紫>青、 閾値 0.85 / 0.70) */
.wwm-cmp-modal-a .wwm-cmp-ratio.rank-gold {
background: rgba(212,175,55,0.18) !important;
color: #d4af37 !important;
border-color: rgba(212,175,55,0.55) !important;
}
.wwm-cmp-modal-a .wwm-cmp-ratio.rank-purple {
background: rgba(195,137,255,0.18) !important;
color: #c389ff !important;
border-color: rgba(195,137,255,0.55) !important;
}
.wwm-cmp-modal-a .wwm-cmp-ratio.rank-blue {
background: rgba(74,158,255,0.18) !important;
color: #4a9eff !important;
border-color: rgba(74,158,255,0.55) !important;
}
/* MAX到達 (100%) 虹色 — 色相回転 hue-rotate アニメ (両テーマ共通)
注: background-color / box-shadow は keyframes が動かすため !important つけない (つけると keyframes が負けてアニメ無効化) */
.wwm-cmp-modal-a .wwm-cmp-ratio.rank-max {
background-image: none !important;
color: #ffffff !important;
border-color: rgba(255,255,255,0.65) !important;
font-weight: 700 !important;
text-shadow: 0 0 4px rgba(0,0,0,0.55), 0 1px 0 rgba(0,0,0,0.4) !important;
background-color: hsl(0, 80%, 55%);
box-shadow: 0 0 9px hsla(0, 90%, 60%, 0.55), inset 0 1px 0 rgba(255,255,255,0.25);
animation: cmp-ratio-rainbow 3.5s linear infinite;
}
@keyframes cmp-ratio-rainbow {
0% { background-color: hsl( 0, 80%, 55%); box-shadow: 0 0 9px hsla( 0, 90%, 60%, 0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
17% { background-color: hsl( 45, 90%, 55%); box-shadow: 0 0 9px hsla( 45, 90%, 60%, 0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
33% { background-color: hsl(120, 65%, 48%); box-shadow: 0 0 9px hsla(120, 75%, 55%, 0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
50% { background-color: hsl(180, 70%, 50%); box-shadow: 0 0 9px hsla(180, 80%, 55%, 0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
67% { background-color: hsl(220, 75%, 58%); box-shadow: 0 0 9px hsla(220, 85%, 62%, 0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
83% { background-color: hsl(285, 70%, 58%); box-shadow: 0 0 9px hsla(285, 80%, 62%, 0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
100% { background-color: hsl(360, 80%, 55%); box-shadow: 0 0 9px hsla(360, 90%, 60%, 0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
}
@media (prefers-reduced-motion: reduce) {
.wwm-cmp-modal-a .wwm-cmp-ratio.rank-max { animation: none; }
}
.wwm-cmp-modal-a .wwm-cmp-grid {
grid-template-columns: 1fr 1px 1fr !important;
gap: 16px !important;
}
.wwm-cmp-modal-a .wwm-modal-body { padding: 20px 20px 16px !important; overflow: visible !important; }
.wwm-cmp-modal-a.wwm-modal-square { overflow: visible !important; }
.wwm-cmp-modal-a .wwm-cmp-divider {
background: linear-gradient(180deg, transparent, var(--gold-deep), transparent);
position: relative;
}
.wwm-cmp-modal-a .wwm-cmp-divider::before,
.wwm-cmp-modal-a .wwm-cmp-divider::after {
content: ''; position: absolute; left: 50%; transform: translateX(-50%);
width: 6px; height: 6px;
background: var(--vermilion);
border-radius: 50%;
box-shadow: 0 0 6px var(--vermilion);
}
.wwm-cmp-modal-a .wwm-cmp-divider::before { top: 30%; }
.wwm-cmp-modal-a .wwm-cmp-divider::after { bottom: 30%; }
.wwm-cmp-footer-a {
margin-top: 16px;
padding: 14px 0 4px;
border-top: 1px solid rgba(201,164,90,0.2);
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
}
.wwm-cmp-delta-block {
display: flex; align-items: baseline; gap: 12px;
}
.wwm-cmp-delta-label {
font-family: var(--f-display, 'Noto Serif JP');
font-size: 11px; font-weight: 900;
color: var(--paper-mute);
letter-spacing: 0.32em;
}
.wwm-cmp-modal-a .wwm-cmp-preview-value {
font-size: 28px !important;
line-height: 1 !important;
}
.wwm-cmp-modal-a .wwm-cmp-preview-value.pos { color: var(--jade-bright, #b8e0c4) !important; text-shadow: 0 0 18px rgba(168,212,180,0.6) !important; }
.wwm-cmp-modal-a .wwm-cmp-preview-value.neg { color: var(--vermilion) !important; text-shadow: 0 0 18px rgba(232,81,58,0.6) !important; }
.wwm-cmp-modal-a .wwm-cmp-preview-value.zero { color: var(--paper-mute) !important; text-shadow: none !important; }
.wwm-cmp-delta-base {
font-family: var(--f-mono, 'Rajdhani');
font-size: 11px; color: var(--paper-mute);
}
.wwm-cmp-modal-a .wwm-cmp-bg-icon { opacity: 0 !important; }
/* 新装備アイコン modal全体背景化 — 右下から見切れる大きさ */
.wwm-cmp-modal-bg-icon {
position: absolute;
right: -12%; bottom: -18%;
width: 110%; height: 110%;
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
opacity: 0.1;
pointer-events: none;
z-index: 0;
filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(240,210,138,0.5));
}
.wwm-cmp-modal-a .wwm-modal-body { position: relative; overflow: hidden !important; }
.wwm-cmp-modal-a .wwm-cmp-grid { position: relative; z-index: 1; }
/* col / affix-rows 透過化 (背景icon 透けさせる) */
.wwm-cmp-modal-a .wwm-cmp-col {
background: rgba(13,10,8,0.60) !important;
}
.wwm-cmp-modal-a .wwm-cmp-rows {
background: rgba(0,0,0,0.12) !important;
}
/* ── ダーク: select border を subtle gold に統一 (gold-deep/ink-2 バラつき解消) + rows を暗inset で差別化 ── */
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-kongfu-select,
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-set-select,
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select,
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-stat-select,
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-val-input {
border-color: rgba(201,164,90,0.28) !important;
}
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-rows {
background: rgba(0,0,0,0.5) !important;
border: 1px solid rgba(201,164,90,0.25) !important;
box-shadow: inset 0 1px 6px rgba(0,0,0,0.6) !important;
padding: 4px 6px !important;
}
/* ── ダーク 配色: 案B 黒檀朱 (近黒ebony + 朱主役・金従)。border系は現状維持 (col/rows/select 不変) ── */
html[data-theme="dark"] .wwm-cmp-modal-a {
background: linear-gradient(180deg, #130f0d, #0d0a08) !important;
}
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-title-ja { color: #f3e3d4 !important; text-shadow: 0 0 10px rgba(232,81,58,0.3) !important; }
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-title-en { color: #e8513a !important; }
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-col { background: rgba(255,255,255,0.025) !important; }
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-current,
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-new,
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-col { border-color: rgba(232,81,58,0.30) !important; }
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-kongfu-header,
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-kongfu-select { background: rgba(201,164,90,0.10) !important; color: #e6d6b8 !important; }
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-set-header,
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-set-select { background: linear-gradient(90deg, rgba(232,81,58,0.30), transparent) !important; color: #ff6b4a !important; text-shadow: 0 0 6px rgba(232,81,58,0.4) !important; }
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-name { color: #ecdfd6 !important; }
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-val,
html[data-theme="dark"] .wwm-cmp-modal-a .wwm-cmp-val-input { color: #ffae8a !important; }
/* 案E Good icon — 親指SVG + 朱赤タイル */
.wwm-good-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
background: linear-gradient(135deg, var(--vermilion-deep, #8a1f17), var(--vermilion, #e8513a));
border: 1px solid rgba(240,210,138,0.5);
border-radius: 2px;
box-shadow: 0 0 4px rgba(232,81,58,0.5);
flex-shrink: 0;
vertical-align: middle;
margin: 0 2px;
}
.wwm-good-icon svg { width: 10px; height: 10px; fill: #f0d28a; }
/* セット効果テキスト (最小外功攻撃+64等) はサンプルに無いので非表示 */
.wwm-cmp-modal-a .wwm-cmp-set-effect { display: none !important; }
/* ヘッダ padding スリム */
.wwm-cmp-modal-a .wwm-modal-header {
padding: 12px 20px !important;
border-bottom: 1px solid transparent !important;
}
.wwm-cmp-modal-a .wwm-modal-header h2 {
margin: 0 !important;
font-weight: 900 !important;
display: flex; align-items: center; gap: 8px;
}
.wwm-cmp-modal-a .wwm-cmp-title-ja {
font-family: var(--f-display, 'Noto Serif JP');
font-size: 18px;
font-weight: 900;
letter-spacing: 0.18em;
color: var(--paper);
}
.wwm-cmp-modal-a .wwm-cmp-title-en {
font-family: var(--f-latin, 'Cinzel');
font-size: 11px;
font-weight: 600;
color: var(--gold);
letter-spacing: 0.32em;
margin-left: 4px;
align-self: flex-end;
padding-bottom: 2px;
}
.wwm-cmp-modal-a .wwm-modal-header h2 { align-items: flex-end !important; }
/* 背景の赤いradial-gradient を消す */
.wwm-cmp-modal-a {
background: linear-gradient(180deg, var(--surf-1), var(--surf-2)) !important;
}
/* ボタン: サンプルA 揃え (radius 0、 padding 7px 16px) */
.wwm-cmp-modal-a .wwm-cmp-btn-row .wwm-btn-primary {
background: linear-gradient(180deg, var(--gold-bright), var(--gold)) !important;
border: 1px solid var(--gold-bright) !important;
border-radius: 0 !important;
color: #2a1810 !important;
padding: 7px 18px !important;
font-size: 12px !important;
box-shadow: none !important;
}
.wwm-cmp-modal-a .wwm-cmp-btn-row .wwm-btn-secondary {
background: transparent !important;
border: 1px solid var(--paper-mute) !important;
border-radius: 0 !important;
color: var(--paper) !important;
padding: 7px 18px !important;
font-size: 12px !important;
box-shadow: none !important;
}
.wwm-cmp-modal-a #wwmEditCancel {
border-color: var(--ink-1) !important;
color: var(--paper-mute) !important;
}
/* affix行 共通 */
.wwm-cmp-modal-a .wwm-cmp-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 5px 6px !important;
}
/* 現有列 (display専用): name 1fr + val (val+ratio inline) */
.wwm-cmp-modal-a .wwm-cmp-current .wwm-cmp-row .wwm-cmp-name { flex: 1 1 auto; min-width: 0; }
.wwm-cmp-modal-a .wwm-cmp-current .wwm-cmp-row .wwm-cmp-val {
display: inline-flex !important; align-items: center !important; gap: 8px !important;
}
/* 新置列 (編集): select + useful + val-wrap */
.wwm-cmp-modal-a .wwm-cmp-new .wwm-cmp-row.wwm-cmp-edit-row {
display: grid !important;
grid-template-columns: minmax(78px, 1fr) 20px minmax(92px, 1.15fr) !important;
}
.wwm-cmp-modal-a .wwm-cmp-new .wwm-cmp-val-wrap {
display: flex; align-items: center; gap: 4px;
min-width: 0;
}
.wwm-cmp-modal-a .wwm-cmp-stat-select {
width: 100% !important;
padding: 2px 4px !important;
font-size: 11px !important;
}
.wwm-cmp-modal-a .wwm-cmp-val-input {
width: 100% !important;
padding: 2px 4px !important;
font-size: 12px !important;
text-align: right !important;
}
.wwm-cmp-modal-a .wwm-cmp-val {
text-align: right !important;
font-size: 13px !important;
}
.wwm-cmp-modal-a .wwm-cmp-pct {
font-size: 10px !important;
padding: 1px 4px !important;
text-align: center !important;
}
/* kongfu / set padding スリム */
.wwm-cmp-modal-a .wwm-cmp-kongfu-header,
.wwm-cmp-modal-a .wwm-cmp-kongfu-select,
.wwm-cmp-modal-a .wwm-cmp-set-header,
.wwm-cmp-modal-a .wwm-cmp-set-select {
padding: 5px 8px !important;
margin-bottom: 6px !important;
font-size: 12px !important;
}
.wwm-cmp-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.wwm-cmp-col {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: var(--space-2-5);
position: relative;
overflow: hidden;
}
.wwm-cmp-bg-icon {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 95%;
opacity: 0.20;
pointer-events: none;
z-index: 0;
}
.wwm-cmp-bow .wwm-cmp-bg-icon { background-size: 50%; }
/* 現在の装備: 朱赤グロウ */
.wwm-cmp-current .wwm-cmp-bg-icon {
filter:
drop-shadow(0 0 6px rgba(232,81,58,0.7))
drop-shadow(0 0 14px rgba(232,81,58,0.45));
}
/* 新しい装備: 緑グロウ */
.wwm-cmp-new .wwm-cmp-bg-icon {
filter:
drop-shadow(0 0 6px rgba(168,212,180,0.7))
drop-shadow(0 0 14px rgba(168,212,180,0.45));
}
.wwm-cmp-col > .wwm-cmp-title,
.wwm-cmp-col > .wwm-cmp-rows,
.wwm-cmp-col > .wwm-cmp-kongfu-header,
.wwm-cmp-col > .wwm-cmp-kongfu-select { position: relative; z-index: 1; }
.wwm-cmp-kongfu-header {
font-size: var(--text-12); color: #d4af37;
font-weight: var(--fw-bold);
margin-bottom: 6px;
padding: 4px 6px;
background: rgba(212,175,55,0.08);
border-radius: 4px;
}
.wwm-cmp-kongfu-select {
width: 100%;
background: #1a1a1a;
border: 1px solid #d4af37;
border-radius: 4px;
color: #d4af37;
font-weight: var(--fw-bold);
font-size: var(--text-12);
padding: 4px 6px;
margin-bottom: 6px;
cursor: pointer;
}
.wwm-cmp-col > .wwm-cmp-set-header,
.wwm-cmp-col > .wwm-cmp-set-select,
.wwm-cmp-col > .wwm-cmp-set-effect { position: relative; z-index: 1; }
.wwm-cmp-set-header {
font-size: var(--text-sm); color: var(--gold-bright);
font-weight: var(--fw-bold);
margin-bottom: 6px;
padding: 4px 6px;
background: linear-gradient(90deg, rgba(240,210,138,0.12), transparent);
border-left: 2px solid var(--gold-bright);
border-radius: 0;
text-shadow: 0 0 6px rgba(240,210,138,0.4);
}
.wwm-cmp-set-select {
width: 100%;
background: #1a1a1a;
border: 1px solid #c389ff;
border-radius: 4px;
color: #c389ff;
font-weight: var(--fw-bold);
font-size: var(--text-sm);
padding: 4px 6px;
margin-bottom: 4px;
cursor: pointer;
}
.wwm-cmp-set-effect {
font-size: var(--text-xs);
color: rgba(255,255,255,0.6);
padding: 2px 6px 6px;
line-height: 1.3;
}
.wwm-cmp-tier-line {
font-size: 10.5px;
line-height: 1.4;
padding: 1px 0;
white-space: normal;
word-break: break-word;
}
.wwm-cmp-tier-line.wwm-tier-active { color: var(--gold-bright, #c9a45a); }
.wwm-cmp-tier-line.wwm-tier-unrel { color: rgba(255,255,255,0.28); }
.wwm-cmp-tier-line.wwm-tier-kfmiss { color: var(--vermilion-bright-strong); }
.wwm-cmp-tier-line.wwm-tier-empty { color: rgba(255,255,255,0.2); }
.wwm-tier-warn { font-size: var(--text-xs); }
.wwm-tier-dash { opacity: 0.5; }
/* ── 心法 Tier効果 を 武具対照 row 風リスト化 (T番号chip + 効果, dashed区切り) ── */
.wwm-cmp-modal-a .wwm-cmp-xinfa-rows { padding: 2px 6px 3px !important; display: block !important; }
.wwm-cmp-tier-row {
display: flex; align-items: center; gap: 8px;
padding: 3px 2px;
border-bottom: 1px dashed rgba(201,164,90,0.13);
font-size: 11px; line-height: 1.3;
}
.wwm-cmp-tier-row:last-child { border-bottom: none; }
.wwm-cmp-tier-num {
flex-shrink: 0; min-width: 24px; text-align: center;
font-family: var(--f-mono); font-weight: 700; font-size: 10px;
padding: 0 4px; border-radius: 2px;
background: rgba(201,164,90,0.16); color: var(--gold-bright);
border: 1px solid rgba(201,164,90,0.4);
}
.wwm-cmp-tier-eff { flex: 1 1 auto; color: var(--paper); }
.wwm-cmp-tier-row.wwm-tier-unrel { opacity: 0.42; }
.wwm-cmp-tier-row.wwm-tier-unrel .wwm-cmp-tier-num { background: rgba(255,255,255,0.05); color: var(--paper-mute); border-color: rgba(255,255,255,0.14); }
.wwm-cmp-tier-row.wwm-tier-kfmiss .wwm-cmp-tier-eff { color: var(--vermilion-bright, #ff6b4a); }
.wwm-cmp-tier-row.wwm-tier-empty { opacity: 0.3; }
.wwm-cmp-tier-row.wwm-tier-empty .wwm-cmp-tier-eff { font-style: italic; }
/* design-preview.html 準拠: --f-latin = Cinzel, --jade-bright = #a8d4b4 */
.hero-score-wrap {
display: inline-block;
width: fit-content;
}
.hero-eyebrow-status {
font-family: var(--f-latin);
font-size: clamp(20px, 2.6vw, 28px) !important;
font-weight: var(--fw-black);
letter-spacing: 0.12em;
color: var(--gold-bright);
text-transform: uppercase;
text-shadow: 0 0 14px rgba(240,210,138,0.3);
margin: 0;
padding-bottom: 0;
line-height: 1;
display: flex;
align-items: center;
gap: var(--space-2-5);
width: 100%;
flex-wrap: nowrap;
white-space: nowrap;
border-bottom: 1px solid var(--ink-2);
position: relative;
}
.hero-eyebrow-status::after {
content: '';
position: absolute;
left: 0; bottom: -1px;
width: 48px; height: 1px;
background: linear-gradient(90deg, var(--gold-bright), transparent);
box-shadow: 0 0 8px var(--gold-bright-mid);
}
.hero-eyebrow-status .hero-title-text { flex-shrink: 0; }
.hero-eyebrow-status::before { display: none; }
.hero-eyebrow.hero-eyebrow-status > .hero-eyebrow::before { display: none; }
.hero-score-progression {
display: flex; align-items: center; gap: clamp(8px, 1.4vw, 18px);
font-family: var(--f-latin);
width: 100%;
flex-wrap: nowrap;
min-width: 0;
}
.hero-score-pair { min-width: 0; flex-shrink: 1; }
.hero-score-pair {
display: inline-flex; align-items: center; gap: var(--space-2-5);
}
.hero-delta-right { margin-left: auto; padding-right: 8px; }
.hero-delta-row {
display: block;
margin-top: 6px;
font-size: var(--text-20);
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
}
.hero-title-row {
display: flex; align-items: center; gap: 18px;
margin-bottom: 4px;
}
.hero-delta-inline {
font-family: var(--f-latin);
font-size: clamp(14px, 1.7vw, 22px); font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
line-height: 1;
margin-left: auto !important;
padding-right: 4px;
white-space: nowrap;
}
.tier-badge-baseline { /* baseline は current と同等表示 */ }
.hero-score-baseline,
.hero-score-num {
font-size: clamp(24px, calc(-60.7px + 8.81vw), 52px);
font-weight: var(--fw-extra);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.hero-score-baseline {
color: var(--paper-dim);
opacity: 0.55;
}
.hero-score-num {
color: var(--jade-bright);
text-shadow:
0 0 18px rgba(168,212,180,0.45),
0 0 36px rgba(168,212,180,0.25);
}
.hero-score-arrow {
font-size: clamp(20px, 2.8vw, 40px);
color: var(--gold);
text-shadow:
0 0 10px var(--gold-strong),
0 0 20px var(--gold-mid);
line-height: 1;
flex-shrink: 0;
}
.wwm-hero-delta {
font-size: var(--text-18);
margin-left: 6px;
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
}
.wwm-hero-delta.pos { color: #2ec27e; }
.wwm-hero-delta.neg { color: #ff6b6b; }
.wwm-hero-delta.zero { color: rgba(255,255,255,0.35); }
.wwm-help-btn {
width: 20px; height: 20px; border-radius: 50%;
border: 1px solid rgba(168,212,180,0.5);
background: rgba(168,212,180,0.1);
color: var(--jade-bright);
font-family: var(--f-mono); font-size: var(--text-12); font-weight: var(--fw-bold);
cursor: pointer; padding: 0; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
margin-left: 4px;
transition: all 0.15s;
}
.wwm-help-btn:hover {
background: rgba(168,212,180,0.25);
box-shadow: 0 0 8px rgba(168,212,180,0.4);
}
.wwm-help-body h3 {
font-family: var(--f-latin); font-size: var(--text-14); font-weight: var(--fw-bold);
color: var(--gold-bright); margin: 16px 0 6px;
letter-spacing: 0.08em;
}
.wwm-help-body h3:first-child { margin-top: 0; }
.wwm-help-body p, .wwm-help-body ul { font-size: 12.5px; line-height: 1.6; }
.wwm-help-body ul { padding-left: 20px; margin: 4px 0; }
.wwm-help-body li { margin-bottom: 3px; color: var(--paper-2); }
.wwm-help-body b { color: var(--gold-bright); font-weight: var(--fw-semibold); }
.wwm-help-pre {
background: var(--overlay-soft); border: 1px solid var(--ink-2); border-radius: 4px;
padding: 10px 12px; font-family: var(--f-mono); font-size: 11.5px;
color: var(--paper-2); white-space: pre-wrap; margin: 6px 0;
}
/* Analysis grid (Tier ladder + Affix ranking) */
.wwm-analysis-grid {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 10px;
}
.wwm-analysis-card {
position: relative;
width: 100%;
box-sizing: border-box;
background:
radial-gradient(ellipse at top right, rgba(240,210,138,0.06), transparent 55%),
linear-gradient(180deg, var(--surf-1), var(--surf-2));
border: 1px solid var(--ink-2);
border-top: 1px solid var(--gold-deep);
border-left: 3px solid var(--gold);
border-radius: 0 0 2px 2px;
padding: 14px 16px 12px;
box-sizing: border-box;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow:
inset 0 1px 0 var(--gold-bright-faint),
0 1px 2px var(--overlay-soft);
}
.wwm-analysis-card::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 80px; height: 80px;
background: radial-gradient(ellipse at top right, rgba(240,210,138,0.18), transparent 65%);
pointer-events: none;
z-index: 0;
}
.wwm-analysis-card::after {
content: '';
position: absolute;
top: 6px; right: 6px;
width: 14px; height: 14px;
border-top: 1px solid var(--gold-deep);
border-right: 1px solid var(--gold-deep);
opacity: 0.6;
pointer-events: none;
}
.wwm-analysis-card > * { position: relative; z-index: 1; }
#wwmAffixRanking .wwm-analysis-card,
#wwmOptimization .wwm-analysis-card,
#wwmHistory .wwm-analysis-card,
#wwmQuality .wwm-analysis-card {
height: 570px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#wwmHistory .wwm-analysis-card > div:last-child {
overflow-y: auto;
scrollbar-width: thin;
}
#wwmOptimization .wwm-opt-body {
overflow-y: auto;
scrollbar-width: thin;
}
#wwmOptimization .wwm-opt-body::-webkit-scrollbar { width: 5px; }
#wwmOptimization .wwm-opt-body::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 2px; }
/* Analysis tab nav (洗練版: gold underline + glow active) */
.wwm-analysis-tabs {
display: flex;
margin-top: 10px;
border-bottom: 1px solid var(--ink-2);
position: relative;
gap: 0;
}
.wwm-analysis-tab {
position: relative;
flex: 0 0 auto;
padding: 12px 28px 10px;
background: transparent;
border: none;
color: var(--paper-mute);
font-family: var(--f-display, var(--f-mono));
font-size: var(--text-md); font-weight: var(--fw-bold);
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
outline: none;
transition: color 0.2s ease;
}
.wwm-analysis-tab + .wwm-analysis-tab::before {
content: '';
position: absolute;
left: 0; top: 22%; bottom: 22%;
width: 1px;
background: linear-gradient(180deg, transparent, var(--ink-2), transparent);
}
.wwm-analysis-tab::after {
content: '';
position: absolute;
left: 50%; right: 50%; bottom: -1px;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--gold-bright) 30%, var(--gold-bright) 70%, transparent 100%);
transition: left 0.25s ease, right 0.25s ease, box-shadow 0.25s ease;
box-shadow: none;
}
.wwm-analysis-tab:hover {
color: var(--gold-bright);
}
.wwm-analysis-tab:hover::after {
left: 30%; right: 30%;
}
.wwm-analysis-tab.active {
color: var(--gold-bright);
text-shadow: 0 0 14px var(--gold-bright-mid);
}
.wwm-analysis-tab.active::after {
left: 8%; right: 8%;
box-shadow: 0 0 12px rgba(240,210,138,0.6), 0 0 4px rgba(240,210,138,0.8);
}
.wwm-opt-loading {
padding: var(--space-5);
color: var(--gold-bright);
font-size: var(--text-18);
font-weight: var(--fw-bold);
letter-spacing: 0.1em;
text-align: center;
text-shadow: 0 0 12px rgba(232,200,120,0.45);
animation: wwm-opt-loading-pulse 1.2s ease-in-out infinite;
}
@keyframes wwm-opt-loading-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
html[data-theme="light"] .wwm-opt-loading {
color: var(--gold-deep);
text-shadow: 0 0 8px rgba(168,120,40,0.3);
}
.wwm-opt-empty { padding: var(--space-5); color: var(--paper-mute); font-size: var(--text-12); text-align: center; }
.wwm-opt-summary {
font-family: var(--f-latin); font-size: var(--text-18); font-weight: var(--fw-bold);
color: var(--gold-bright);
padding: 6px 8px 10px;
border-bottom: 1px dashed var(--ink-2);
margin-bottom: 8px;
font-variant-numeric: tabular-nums;
}
.wwm-opt-totaldelta {
color: var(--jade-bright); margin-left: 8px;
}
.wwm-opt-controls {
margin-left: auto; display: flex; align-items: center; gap: var(--space-2);
}
.wwm-opt-ratio-label {
font-size: var(--text-sm); color: var(--paper-mute);
display: flex; align-items: center; gap: 5px;
}
.wwm-opt-ratio-label input[type=range] {
width: 80px; accent-color: var(--gold);
}
#wwmOptRatioVal {
font-family: var(--f-mono); font-weight: var(--fw-bold);
color: var(--gold-bright); min-width: 32px;
}
.wwm-opt-btn {
background: transparent; border: 1px solid var(--ink-3);
color: var(--gold); padding: 3px 10px;
border-radius: 2px; cursor: pointer;
font-family: var(--f-mono);
font-size: var(--text-sm); font-weight: var(--fw-bold);
letter-spacing: 0.08em;
}
.wwm-opt-btn:hover {
background: rgba(212,175,55,0.1); border-color: var(--gold);
}
.wwm-opt-progress {
padding: 6px 8px; color: var(--paper-mute);
font-size: var(--text-sm); font-family: var(--f-mono);
text-align: center;
}
.wwm-opt-progress:empty { display: none; }
.wwm-opt-body {
display: flex; flex-direction: column; gap: 3px;
}
.wwm-opt-row {
display: grid; grid-template-columns: 24px 90px 1fr max-content max-content max-content;
gap: var(--space-2-5); align-items: center;
padding: 7px 10px;
font-size: var(--text-12);
border-bottom: 1px solid rgba(240,210,138,0.12);
border-left: 3px solid rgba(212,175,55,0.22);
transition: background .15s, border-color .15s;
}
.wwm-opt-row:nth-child(odd) { background: rgba(240,210,138,0.05); }
.wwm-opt-row:hover {
background: var(--gold-bright-faint);
border-left-color: var(--gold-bright, #f0d28a);
}
.wwm-opt-tierup {
font-family: var(--f-latin); font-weight: var(--fw-bold); font-size: var(--text-sm);
color: var(--gold-bright);
background: rgba(212,175,55,0.12);
padding: 1px 6px; border-radius: 2px;
letter-spacing: 0.05em;
}
.wwm-opt-select {
background: var(--bg-1); color: var(--paper-2);
border: 1px solid var(--ink-3); border-radius: 2px;
padding: 2px 4px; font-size: var(--text-sm);
}
.wwm-opt-reason {
margin-top: 8px; padding-top: 6px;
border-top: 1px dashed var(--ink-2);
font-size: var(--text-sm); color: var(--paper-mute);
text-align: center;
}
.wwm-opt-btn-step {
font-size: var(--text-xs); padding: 1px 6px;
}
.wwm-opt-check-wrap {
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; padding: 2px 6px;
}
.wwm-opt-check {
width: 16px; height: 16px;
cursor: pointer;
accent-color: var(--gold-bright, #f0d28a);
margin: 0;
}
html[data-theme="light"] .wwm-opt-check {
accent-color: var(--vermilion, #c83c2b);
}
/* 計算中: ヘッダ操作 disable 視覚化 */
.wwm-opt-busy { opacity: 0.4; cursor: wait !important; pointer-events: none; }
.wwm-opt-btn-apply { color: var(--jade-bright); border-color: rgba(168,212,180,0.4); }
.wwm-opt-btn-apply:hover { background: rgba(168,212,180,0.1); border-color: var(--jade-bright); }
.wwm-opt-pos { font-family: var(--f-latin); font-weight: var(--fw-extra); color: var(--gold); text-align: center; }
.wwm-opt-slot { color: var(--paper-2); font-size: var(--text-12); }
.wwm-opt-change { color: var(--paper-2); }
.wwm-opt-from { color: var(--paper-mute); text-decoration: line-through; opacity: 0.7; }
.wwm-opt-to { color: var(--gold-bright); font-weight: var(--fw-semibold); }
.wwm-opt-delta {
font-family: var(--f-latin); font-weight: var(--fw-extra);
color: var(--jade-bright); font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.wwm-rank-body, .wwm-ladder-body {
display: flex; flex-direction: column;
}
.wwm-rank-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.wwm-rank-grid > .wwm-modal-bg-icon { grid-column: 1 / -1; }
.wwm-rank-col, .wwm-eff-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wwm-eff-body {
display: flex; flex-direction: column;
gap: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--gold-deep) transparent;
scrollbar-gutter: stable;
max-height: 100%;
}
.wwm-eff-body::-webkit-scrollbar { width: 6px; }
.wwm-eff-body::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 3px; }
.wwm-eff-row {
display: grid;
grid-template-columns: 1fr 90px 70px;
align-items: center;
gap: var(--space-2);
padding: 7px 10px;
font-size: var(--text-12);
border-bottom: 1px solid rgba(240,210,138,0.12);
border-left: 3px solid transparent;
transition: background .15s, border-color .15s;
}
.wwm-eff-row:nth-child(odd) { background: rgba(240,210,138,0.05); }
.wwm-eff-row:hover {
background: var(--gold-bright-faint);
border-left-color: var(--gold-bright, #f0d28a);
}
.wwm-eff-label { color: var(--paper); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wwm-eff-input-wrap {
display: grid;
grid-template-columns: 68px 14px; /* input | % (% 無くても列は確保→揃う) */
align-items: center;
gap: 2px;
justify-self: end;
padding-right: 2px;
}
.wwm-eff-input {
width: 100%;
padding: 3px 6px;
background: var(--overlay-soft);
border: 1px solid var(--gold-deep, #5a4220);
color: var(--gold-bright);
font-family: var(--f-mono);
font-size: var(--text-12);
text-align: right;
border-radius: 3px;
transition: border-color .15s, box-shadow .15s;
}
.wwm-eff-input:hover { border-color: var(--gold, #d4af37); }
.wwm-eff-input:focus {
outline: none;
border-color: var(--gold-bright, #f0d28a);
box-shadow: 0 0 0 2px rgba(212,175,55,.18);
}
.wwm-eff-pct { font-size: var(--text-sm); color: var(--paper-mute); text-align: left; }
.wwm-eff-delta {
font-family: var(--f-latin);
font-weight: var(--fw-extra);
color: var(--jade-bright);
text-align: right;
letter-spacing: -0.01em;
}
@media (max-width: 900px) {
.wwm-rank-grid { grid-template-columns: 1fr; }
}
.wwm-analysis-header {
display: flex; align-items: center; gap: var(--space-3-5);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--ink-2);
position: relative;
}
.wwm-analysis-header::after {
content: '';
position: absolute;
left: 0; bottom: -1px;
width: 40px; height: 1px;
background: linear-gradient(90deg, var(--gold-bright), transparent);
box-shadow: 0 0 8px rgba(240,210,138,0.4);
}
.wwm-analysis-rail {
font-family: var(--f-display); font-weight: var(--fw-black);
font-size: var(--text-12); letter-spacing: 0.3em;
color: var(--gold-bright);
text-shadow: 0 0 10px rgba(240,210,138,0.4);
padding: 2px 8px;
border: 1px solid var(--gold-deep);
border-radius: 1px;
background: linear-gradient(180deg, var(--gold-bright-faint), transparent);
}
.wwm-analysis-card h3 {
margin: 0; font-family: var(--f-display, var(--f-latin));
font-size: var(--text-14); font-weight: var(--fw-bold);
color: var(--gold-bright); letter-spacing: 0.15em;
text-transform: uppercase;
text-shadow: 0 0 10px var(--gold-bright-soft);
}
/* Tier ladder (SS 上 → C 下) */
.wwm-ladder-body {
display: flex; flex-direction: column;
gap: 3px;
}
.wwm-ladder-row {
display: flex; align-items: center; gap: var(--space-2-5);
padding: 4px 6px; border-radius: 3px;
font-size: var(--text-12);
opacity: 0.45;
}
.wwm-ladder-row.reached { opacity: 0.85; }
.wwm-ladder-row.current { opacity: 1; background: rgba(212,175,55,0.08); border-left: 2px solid var(--gold); padding-left: 4px; }
.wwm-ladder-tier {
display: inline-block; width: 32px; text-align: center;
font-family: var(--f-latin); font-weight: var(--fw-extra); font-size: var(--text-md);
padding: 2px 0; border-radius: 2px;
}
/* Tier ladder 内 badge は装飾 → animation / 大きい shadow 抑制 */
.wwm-ladder-tier.tier-SS,
.wwm-ladder-tier.tier-S {
animation: none !important;
box-shadow: none !important;
}
.wwm-ladder-tier.tier-SS::before { display: none !important; }
.wwm-ladder-val { font-family: var(--f-mono); color: var(--paper-mute); }
.wwm-ladder-marker { color: var(--gold-bright); font-size: var(--text-sm); margin-left: auto; font-weight: var(--fw-semibold); }
.wwm-ladder-next {
margin-top: 8px; padding-top: 8px;
border-top: 1px dashed var(--ink-2);
font-size: var(--text-12); color: var(--paper-2);
}
.wwm-ladder-next b { color: var(--gold-bright); font-family: var(--f-latin); font-size: var(--text-14); }
/* Affix ranking */
.wwm-rank-body { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; max-height: 100%; flex: 1 1 auto; min-height: 0; scrollbar-width: thin; }
.wwm-rank-body::-webkit-scrollbar { width: 6px; }
.wwm-rank-body::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 3px; }
.wwm-rank-row {
display: grid; grid-template-columns: 18px 1fr max-content;
gap: var(--space-2); align-items: center;
padding: 7px 10px;
font-size: var(--text-12);
border-bottom: 1px solid rgba(240,210,138,0.12);
border-left: 3px solid rgba(212,175,55,0.22);
transition: background .15s, border-color .15s;
}
.wwm-rank-row:nth-child(odd) { background: rgba(240,210,138,0.05); }
.wwm-rank-row:hover {
background: var(--gold-bright-faint);
border-left-color: var(--gold-bright, #f0d28a);
}
.wwm-rank-label { color: var(--paper); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wwm-rank-pos {
font-family: var(--f-latin); font-weight: var(--fw-extra);
color: var(--gold); text-align: center;
}
.wwm-rank-delta {
font-family: var(--f-latin); font-weight: var(--fw-extra);
color: var(--jade-bright); font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
@media (max-width: 768px) {
.wwm-analysis-grid { grid-template-columns: 1fr; }
}
/* Diagnostics panel */
.wwm-diagnostics:empty { display: none; }
.wwm-diagnostics {
margin-top: 12px;
background: linear-gradient(180deg, var(--surf-1), var(--surf-2));
border: 1px solid var(--ink-2);
border-left: 3px solid var(--vermilion);
border-radius: 2px;
padding: 10px 14px;
position: relative;
height: 120px;
box-sizing: border-box;
overflow: hidden;
}
.wwm-diag-header {
display: flex; align-items: center; gap: var(--space-3);
margin-bottom: 8px;
}
.wwm-diag-rail {
font-family: var(--f-display); font-weight: var(--fw-black);
font-size: var(--text-md); letter-spacing: 0.25em;
color: var(--vermilion-bright);
text-shadow: 0 0 10px rgba(232,81,58,0.4);
}
.wwm-diag-title {
margin: 0; font-family: var(--f-latin);
font-size: var(--text-14); font-weight: var(--fw-bold);
color: var(--gold); letter-spacing: 0.12em;
}
.wwm-diag-body {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 6px 16px;
}
.wwm-diag-item {
display: flex; align-items: flex-start; gap: var(--space-2);
font-size: var(--text-12); line-height: 1.4;
padding: 4px 6px;
border-radius: 3px;
}
.wwm-diag-icon { flex-shrink: 0; font-size: var(--text-md); line-height: 1.3; }
.wwm-diag-text { color: var(--paper-2); }
.wwm-diag-warn { background: rgba(232,81,58,0.06); }
.wwm-diag-warn .wwm-diag-icon { color: var(--vermilion-bright); }
.wwm-diag-info { background: rgba(201,164,90,0.04); }
.wwm-diag-info .wwm-diag-icon { color: var(--gold); }
.wwm-diag-good { background: rgba(168,212,180,0.06); }
.wwm-diag-good .wwm-diag-icon { color: var(--jade-bright); }
@media (max-width: 768px) {
.wwm-diag-body { grid-template-columns: 1fr; }
}
.wwm-share-url {
width: 100%; min-height: 60px; box-sizing: border-box;
font-family: var(--f-mono); font-size: var(--text-sm);
background: rgba(0,0,0,0.4); color: var(--paper-2);
border: 1px solid var(--ink-2); border-radius: 4px;
padding: 8px 10px; resize: vertical;
word-break: break-all;
}
/* Changelog modal */
.wwm-cl-entry { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--ink-2); }
.wwm-cl-entry:last-of-type { border-bottom: none; }
.wwm-cl-ver { font-family: var(--f-latin); font-size: var(--text-18); font-weight: var(--fw-extra); color: var(--gold-bright); margin-bottom: 6px; }
.wwm-cl-date { font-size: var(--text-sm); color: var(--paper-mute); margin-left: 12px; font-weight: var(--fw-normal); }
.wwm-cl-items { margin: 0; padding-left: 20px; font-size: var(--text-md); line-height: 1.6; }
.wwm-cl-items li { color: var(--paper-2); margin-bottom: 3px; }
.wwm-hero-delta.pos { color: #2ec27e; }
.wwm-hero-delta.neg { color: #ff6b6b; }
.wwm-hero-delta.zero { color: rgba(255,255,255,0.4); }
.wwm-cmp-preview {
margin-top: 12px;
padding: 8px 12px;
background: rgba(212,175,55,0.08);
border-left: 3px solid #d4af37;
border-radius: 4px;
font-size: var(--text-md);
display: flex; align-items: center; gap: var(--space-3);
}
.wwm-cmp-preview-label { color: rgba(255,255,255,0.7); font-weight: var(--fw-semibold); }
.wwm-cmp-preview-value { font-weight: var(--fw-bold); font-size: var(--text-15); }
.wwm-cmp-preview-value.pos { color: #2ec27e; }
.wwm-cmp-preview-value.neg { color: #ff6b6b; }
.wwm-cmp-preview-value.zero { color: rgba(255,255,255,0.5); }
.wwm-cmp-current { border-left: 3px solid var(--vermilion); }
.wwm-cmp-new { border-left: 3px solid var(--jade); }
.wwm-cmp-title {
margin: 0 0 8px; font-size: var(--text-md); font-weight: var(--fw-bold);
}
.wwm-cmp-current .wwm-cmp-title { color: var(--vermilion); }
.wwm-cmp-new .wwm-cmp-title { color: var(--jade-bright, #b8e0c4); }
.wwm-cmp-rows { display: flex; flex-direction: column; gap: var(--space-1); }
.wwm-cmp-row {
display: grid;
grid-template-columns: 1fr max-content;
gap: var(--space-2); align-items: center;
padding: 4px 6px;
background: var(--hover-trace);
border-radius: 4px;
font-size: var(--text-12);
}
.wwm-cmp-edit-row {
grid-template-columns: 1fr 20px 110px;
}
.wwm-cmp-stat-select {
background: #1a1a1a;
border: 1px solid #444;
border-radius: 4px;
padding: 2px 4px;
font-size: var(--text-12);
font-weight: var(--fw-semibold);
width: 100%;
cursor: pointer;
}
.wwm-cmp-stat-select:focus { outline: 1px solid #d4af37; }
.wwm-cmp-useful-mark { font-size: var(--text-12); text-align: center; }
.wwm-cmp-val-wrap {
display: grid;
grid-template-columns: 1fr 14px 34px;
gap: var(--space-half); align-items: center;
width: 100%;
}
.wwm-cmp-val-wrap .wwm-cmp-val-input { width: 100%; text-align: right; }
.wwm-cmp-unit { font-size: var(--text-sm); opacity: 0.7; text-align: left; }
.wwm-cmp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wwm-cmp-rank { font-weight: var(--fw-bold); font-size: var(--text-sm); }
.wwm-cmp-val { font-weight: var(--fw-bold); text-align: right; }
.wwm-cmp-rank-sel {
padding: 2px 4px; font-size: var(--text-sm);
background: #1a1a1a; color: inherit;
border: 1px solid #444; border-radius: 4px;
}
.wwm-cmp-val-input { font-size: var(--text-sm); text-align: right; }
.wwm-cmp-useful { font-size: var(--text-sm); cursor: pointer; }
.wwm-rank-gold { color: #d4af37; }
.wwm-rank-purple { color: #c389ff; }
.wwm-rank-blue { color: #4a9eff; }
@media (max-width: 768px) {
.wwm-cmp-grid { grid-template-columns: 1fr; }
}
.wwm-enhance-cell {
display: flex; align-items: center; gap: var(--space-1-5);
}
.wwm-enhance-label { font-weight: var(--fw-semibold); min-width: 50px; }
.wwm-num-input {
width: 60px; padding: 2px 6px;
background: #1a1a1a; color: inherit;
border: 1px solid #444; border-radius: 4px;
font-size: var(--text-md); text-align: right;
}
.wwm-arsenal-paths {
display: flex; gap: var(--space-3); flex-wrap: wrap;
align-items: center; margin: 6px 0;
}
.wwm-radio-label {
display: inline-flex; align-items: center; gap: var(--space-1);
cursor: pointer; font-size: var(--text-md);
}
.wwm-arsenal-tiers {
display: grid; gap: var(--space-1);
}
.wwm-arsenal-tier {
display: flex; align-items: center; gap: var(--space-3);
padding: 4px 6px;
background: var(--hover-trace);
border-radius: 4px;
}
.wwm-arsenal-lv { font-weight: var(--fw-bold); min-width: 50px; }
.wwm-arsenal-peaked-label {
display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer;
}
.wwm-arsenal-preset { opacity: 0.85; font-size: var(--text-12); }
.wwm-arsenal-custom { display: inline-flex; gap: var(--space-2); align-items: center; font-size: var(--text-12); }
.wwm-arsenal-custom input { width: 50px; }
@media (max-width: 768px) {
.wwm-enhance-grid { grid-template-columns: 1fr 1fr; }
}
.wwm-modal.wwm-modal-square { max-width: 680px; }
.wwm-modal.wwm-modal-wide,
.wwm-modal.wwm-modal-square.wwm-modal-wide { max-width: 1100px; }
.wwm-modal-square {
position: relative;
overflow: hidden;
}
.wwm-modal-bg-icon {
position: absolute !important;
top: 0; left: 0; right: 0; bottom: 0;
background-repeat: no-repeat;
background-position: calc(100% + 40px) calc(100% + 40px);
background-size: 60%;
opacity: 0.18;
filter:
brightness(0) invert(1)
drop-shadow(0 0 10px var(--gold-bright-strong))
drop-shadow(0 0 22px rgba(240,210,138,0.45));
pointer-events: none;
z-index: 0;
}
/* ライトモード: 白系rgba background を 影系に */
html[data-theme="light"] .wwm-cmp-col,
html[data-theme="light"] .wwm-edit-affix-row,
html[data-theme="light"] .wwm-equip-noedit:hover,
html[data-theme="light"] .wwm-cmp-row,
html[data-theme="light"] .wwm-share-url,
html[data-theme="light"] .wwm-bm-code {
background: var(--surf-shade) !important;
border-color: var(--ink-2) !important;
}
/* ライト rank/opt: zebra + 常時アクセント + hover を統一 */
html[data-theme="light"] .wwm-rank-row,
html[data-theme="light"] .wwm-opt-row {
border-left: 3px solid rgba(120,60,20,0.28) !important;
border-bottom: 1px solid rgba(120,60,20,0.16) !important;
}
html[data-theme="light"] .wwm-rank-row:nth-child(odd),
html[data-theme="light"] .wwm-opt-row:nth-child(odd) {
background: rgba(120,60,20,0.05);
}
html[data-theme="light"] .wwm-rank-row:hover,
html[data-theme="light"] .wwm-opt-row:hover {
background: rgba(212,175,55,0.16) !important;
border-left-color: #b8861a !important;
}
html[data-theme="light"] .wwm-eff-row {
border-bottom: 1px solid var(--ink-2);
}
html[data-theme="light"] .wwm-eff-row:nth-child(odd) {
background: var(--surf-shade);
}
html[data-theme="light"] .wwm-eff-row:hover {
background: var(--surf-shade-2);
}
html[data-theme="light"] .wwm-eff-input {
background: var(--surf-shade-2);
border-color: var(--ink-2);
color: #000;
}
html[data-theme="light"] .wwm-sb-section-title {
background: rgba(122,90,32,0.18);
border-left: 3px solid var(--gold-deep);
padding-left: 8px;
color: #b8860b;
}
.wwm-cmp-lv {
font-size: 0.75em;
color: var(--gold-bright);
font-family: var(--f-mono);
font-weight: var(--fw-semibold);
margin-left: 6px;
padding: 1px 5px;
border: 1px solid var(--gold-deep);
border-radius: 2px;
vertical-align: middle;
}
.wwm-cmp-lv-select {
font-size: 0.85em;
color: var(--gold-bright);
font-family: var(--f-mono);
font-weight: var(--fw-semibold);
margin-left: 6px;
padding: 2px 8px;
background: #1a1410;
border: 1px solid var(--gold-deep);
border-radius: 2px;
vertical-align: middle;
cursor: pointer;
}
.wwm-cmp-lv-select option {
background: #1a1410;
color: var(--gold-bright);
font-family: var(--f-mono);
}
.wwm-cmp-lv-select:focus { outline: 1px solid var(--gold-bright); border-color: var(--gold-bright); }
html[data-theme="light"] .wwm-cmp-lv-select {
background: #f5e6c8;
color: #b8860b;
border-color: #b8860b;
}
html[data-theme="light"] .wwm-cmp-lv-select option {
background: #f5e6c8;
color: #b8860b;
}
html[data-theme="light"] .wwm-modal,
html[data-theme="light"] .wwm-cmp-col,
html[data-theme="light"] .wwm-cmp-row,
html[data-theme="light"] .wwm-cmp-name,
html[data-theme="light"] .wwm-cmp-val,
html[data-theme="light"] .wwm-cmp-rank {
color: var(--paper);
}
html[data-theme="light"] .wwm-cmp-current .wwm-cmp-row {
background: var(--surf-shade-2);
}
html[data-theme="light"] .wwm-cmp-current .wwm-cmp-title {
color: #1a6ad6;
}
html[data-theme="light"] .wwm-cmp-new .wwm-cmp-title {
color: #1a8d52;
}
html[data-theme="light"] .wwm-cmp-current .wwm-cmp-kongfu-header,
html[data-theme="light"] .wwm-cmp-current .wwm-cmp-set-header {
color: var(--paper);
background: var(--surf-shade-2);
}
/* ライト: select/input 黒背景 → 紙系 */
html[data-theme="light"] .wwm-cmp-stat-select,
html[data-theme="light"] .wwm-cmp-kongfu-select,
html[data-theme="light"] .wwm-cmp-set-select,
html[data-theme="light"] .wwm-num-input,
html[data-theme="light"] .wwm-xinfa-cell > .wwm-xinfa-tier,
html[data-theme="light"] .wwm-xinfa-tier,
html[data-theme="light"] .wwm-edit-affix-rank,
html[data-theme="light"] select.wwm-num-input,
html[data-theme="light"] input.wwm-num-input {
background: var(--surf-shade) !important;
color: var(--paper) !important;
border-color: var(--ink-2) !important;
}
html[data-theme="light"] .wwm-btn-secondary {
background: var(--surf-shade-2);
color: var(--paper);
border-color: var(--ink-2);
}
html[data-theme="light"] .wwm-btn-secondary:hover {
background: var(--surf-shade-3);
}
/* ライト: 装備比較 セット効果 (赤系title) glow弱 — 副情報 (セット名) 濃朱 統一 */
html[data-theme="light"] .wwm-equip-setname,
html[data-theme="light"] .wwm-cmp-set-header {
color: var(--vermilion-deep);
text-shadow: none;
}
/* ライト: 装備カード 武術名 + 心法カード 心法名 (主情報) — ライト主文字色 + 太字 統一 */
html[data-theme="light"] .wwm-equip-kongfu,
html[data-theme="light"] .wwm-xinfa-header b {
color: var(--paper);
font-weight: 600;
}
/* ライト: equip-icon (装備カード白アイコン) は既対応、cmp内icon もinvert解除 */
html[data-theme="light"] .wwm-cmp-bg-icon {
filter: brightness(0) drop-shadow(0 0 4px rgba(138,106,32,0.4));
opacity: 0.2;
}
/* ── ライト: 武具対照 (案A) paper化 — design-sample-compare.html 案A 準拠 ── */
html[data-theme="light"] .wwm-cmp-modal-a {
background: linear-gradient(180deg, #f4e8cc, #ede0c0) !important;
border-color: var(--gold-deep) !important;
color: #2a1810 !important;
}
html[data-theme="light"] .wwm-cmp-modal-a .wwm-modal-header { background: transparent !important; }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-title-ja { color: #2a1810 !important; text-shadow: none !important; }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-title-en { color: #5a3a20 !important; }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-modal-close { color: #2a1810 !important; }
/* ヘッダ下線: ライトは中央加重の赤グラデのみ (full-width 金線は消す)。::after は position:absolute 明示で全幅化 (flex item 化回避) */
html[data-theme="light"] .wwm-cmp-modal-a .wwm-modal-header { border-bottom-color: transparent !important; }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-modal-header::after {
position: absolute !important;
left: 0 !important; right: 0 !important; width: auto !important;
height: 2px !important;
background: linear-gradient(90deg, transparent 0%, transparent 30%, rgba(232,81,58,0.85) 50%, transparent 70%, transparent 100%) !important;
opacity: 1 !important;
}
/* cols (現有/新置 パネル) */
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-col,
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-current,
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-new {
background: rgba(255,255,255,0.4) !important;
border-color: rgba(40,25,18,0.18) !important;
}
/* kongfu / set ヘッダ */
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-kongfu-header { color: #2a1810 !important; background: rgba(201,164,90,0.28) !important; }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-set-header { color: #8a1f17 !important; text-shadow: none !important; background: linear-gradient(90deg, rgba(232,81,58,0.20), rgba(232,81,58,0.05)) !important; }
/* 新置側 select も現有ヘッダと同 tint に揃える (武術=tan / セット=赤grad) */
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-kongfu-select { background: rgba(201,164,90,0.28) !important; color: #2a1810 !important; border-color: rgba(40,25,18,0.25) !important; }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-set-select { background: linear-gradient(90deg, rgba(232,81,58,0.20), rgba(232,81,58,0.05)) !important; color: #8a1f17 !important; border-color: rgba(40,25,18,0.25) !important; }
/* 名称 / 値 */
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-name { color: #2a1810 !important; }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-val,
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-val-input { color: #8a1f17 !important; }
/* フォーム (select / input) 紙化 — kongfu/set-select は tint 維持のため除外 */
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-stat-select,
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-val-input {
background: rgba(255,255,255,0.55) !important;
color: #2a1810 !important;
border-color: rgba(40,25,18,0.25) !important;
}
/* Lv chip */
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv,
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select {
background: rgba(255,255,255,0.5) !important;
color: #5a3a20 !important;
border-color: #8a7350 !important;
}
/* MAX% バッジ rank別 (light: 濃色文字で可読化) */
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-ratio.rank-gold { background: rgba(138,106,32,0.14) !important; color: #7a5a12 !important; border-color: rgba(138,106,32,0.5) !important; }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-ratio.rank-purple { background: rgba(120,60,160,0.13) !important; color: #6f3a9a !important; border-color: rgba(120,60,160,0.5) !important; }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-ratio.rank-blue { background: rgba(40,90,160,0.13) !important; color: #2a5aa0 !important; border-color: rgba(40,90,160,0.5) !important; }
/* フッタ / delta / 副ボタン */
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-footer-a { border-color: rgba(40,25,18,0.18) !important; }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-delta-label { color: #5a3a20 !important; }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-delta-base { color: #8a7350 !important; }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-preview-value.zero { color: #8a7350 !important; }
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-btn-row .wwm-btn-secondary {
color: #2a1810 !important; border-color: #8a7350 !important; background: rgba(255,255,255,0.4) !important;
}
/* 背景アイコン: ライトは main (.wwm-modal-bg-icon) 同様 黒シルエット(=紙上グレー)化 + 視認性UP。dark の invert(1)白は cream で不可視のため */
html[data-theme="light"] .wwm-cmp-modal-bg-icon {
filter: brightness(0) drop-shadow(0 0 6px rgba(138,106,32,0.4)) !important;
opacity: 0.22 !important;
}
/* ドロップダウン (option) 紙化 — dark の #1a1410 黒は light で開くと黒popup化のため */
html[data-theme="light"] .wwm-cmp-modal-a select option {
background: #f4e8cc !important;
color: #2a1810 !important;
}
html[data-theme="light"] .wwm-cmp-modal-a select option:checked {
background: #e0cfa0 !important;
color: #2a1810 !important;
}
/* Lv select option は dark側が高specificity (.title .lv-select option) のため同等以上で上書き */
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select option {
background: #f4e8cc !important;
color: #2a1810 !important;
}
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select option:checked {
background: #e0cfa0 !important;
color: #2a1810 !important;
}
/* Lv select の閉状態 background-color 紙化 (開く瞬間の黒フラッシュ防止)。kongfu/set は tint 維持のため除外 */
html[data-theme="light"] .wwm-cmp-modal-a .wwm-cmp-title .wwm-cmp-lv-select {
background-color: rgba(255,255,255,0.55) !important;
}
html[data-theme="light"] .wwm-brand-sub {
color: var(--gold-bright);
text-shadow: 0 0 4px rgba(138,106,32,0.25);
}
html[data-theme="light"] .hero-eyebrow-status {
text-shadow: 0 0 8px rgba(138,106,32,0.35);
}
html[data-theme="light"] .wwm-modal-bg-icon {
opacity: 0.22;
filter:
brightness(0)
drop-shadow(0 0 6px rgba(138,106,32,0.45))
drop-shadow(0 0 14px rgba(138,106,32,0.25));
}
html[data-theme="light"] .wwm-equip-icon,
html[data-theme="light"] .wwm-xinfa-icon {
opacity: 0.22;
filter:
brightness(0)
drop-shadow(0 0 3px rgba(138,106,32,0.5))
drop-shadow(0 0 8px rgba(138,106,32,0.3));
}
.wwm-modal-square > .wwm-modal-header,
.wwm-modal-square > .wwm-modal-body { position: relative; z-index: 1; }
.wwm-modal-square > * { position: relative; z-index: 1; }
/* 弱点指摘 modal: アクセント赤 + 小型icon */
.wwm-diag-modal {
border-top-color: var(--vermilion) !important;
border-left-color: var(--vermilion) !important;
}
.wwm-diag-modal::before {
background: radial-gradient(ellipse at top right, rgba(200,60,43,0.18), transparent 65%) !important;
}
.wwm-diag-modal::after {
border-top-color: var(--vermilion) !important;
border-right-color: var(--vermilion) !important;
}
.wwm-diag-modal .wwm-modal-header { border-bottom-color: var(--vermilion-mid); }
.wwm-diag-modal .wwm-modal-header::after {
background: linear-gradient(90deg, var(--vermilion-bright, #ff6b4a), transparent) !important;
box-shadow: 0 0 8px var(--vermilion-strong) !important;
}
.wwm-diag-modal .wwm-modal-header h2 {
color: var(--vermilion-bright, #ff6b4a) !important;
text-shadow: 0 0 10px rgba(200,60,43,0.4) !important;
}
.wwm-diag-modal .wwm-modal-bg-icon {
background-size: 30% !important;
background-position: calc(100% - 12px) calc(100% + 30px) !important;
filter:
brightness(0) invert(1)
drop-shadow(0 0 10px rgba(255,107,74,0.7))
drop-shadow(0 0 22px rgba(200,60,43,0.45)) !important;
}
html[data-theme="light"] .wwm-diag-modal .wwm-modal-bg-icon {
filter:
brightness(0)
drop-shadow(0 0 6px var(--vermilion-strong))
drop-shadow(0 0 14px var(--vermilion-mid)) !important;
opacity: 0.22 !important;
}
.wwm-cmp-kongfu {
font-size: var(--text-12); color: #d4af37;
font-weight: var(--fw-semibold); margin-left: 8px;
}
.wwm-equip-section {
margin-top: 8px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: var(--space-2);
align-items: stretch;
}
.wwm-equip-section .wwm-equip-slot {
background: linear-gradient(180deg, var(--surf-1), var(--surf-2));
border: 1px solid var(--ink-2);
border-left: 3px solid var(--vermilion);
border-radius: 2px;
padding: 8px 10px;
}
.wwm-equip-section .wwm-equip-slot-header {
font-size: var(--text-12);
padding-bottom: 4px;
margin-bottom: 4px;
border-bottom: 1px dashed var(--ink-2);
}
.wwm-equip-section .wwm-equip-base,
.wwm-equip-section .wwm-equip-affix {
font-size: var(--text-sm);
margin-top: 4px;
}
.wwm-equip-section .wwm-equip-base b,
.wwm-equip-section .wwm-equip-affix b {
font-size: var(--text-xs);
color: var(--paper-mute);
letter-spacing: 0.05em;
font-weight: var(--fw-semibold);
}
/* ── Xinfa Grid ── */
.wwm-xinfa-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2-5);
margin-top: 8px;
}
/* sidebar 心法カードは 横1列 (4 心法 + 1 武庫 = 5列) で表示 */
#wwmXinfaGrid {
grid-template-columns: repeat(5, 1fr);
}
.wwm-xinfa-slot {
position: relative;
padding: 2px 10px 24px 40px;
background: linear-gradient(180deg, var(--surf-1), var(--surf-2));
border: 1px solid var(--ink-2);
border-radius: 2px;
min-height: 70px;
overflow: hidden;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s;
}
.wwm-xinfa-slot:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(212,175,55,0.3);
}
.wwm-xinfa-rail {
position: absolute; left: 0; top: 0; bottom: 0; width: 30px;
background: var(--rail-grad);
border-right: 1px solid var(--ink-2);
display: flex; align-items: center; justify-content: center;
padding: 8px 0;
z-index: 2;
}
.wwm-xinfa-rail-text {
font-family: var(--f-display); font-weight: var(--fw-black);
font-size: var(--text-12); letter-spacing: 0.3em;
writing-mode: vertical-rl; text-orientation: upright;
color: var(--gold-bright);
text-shadow: 0 0 10px rgba(240,210,138,0.4);
line-height: 1.05;
}
.wwm-xinfa-slot[data-arsenal-slot] .wwm-xinfa-rail-text {
font-size: var(--text-md); letter-spacing: 0.45em;
}
.wwm-xinfa-header {
font-size: var(--text-md);
display: flex; align-items: center; gap: var(--space-2);
}
.wwm-xinfa-header { flex-wrap: wrap; }
.wwm-xinfa-header b { font-size: var(--text-md); color: var(--paper); font-weight: 600; }
.wwm-xinfa-tier {
font-family: var(--f-mono);
font-size: var(--text-xs);
color: var(--paper-mute);
padding: 1px 5px;
border: 1px solid var(--ink-2);
border-radius: 2px;
letter-spacing: 0.04em;
white-space: nowrap;
flex-shrink: 0;
}
.wwm-xinfa-icon {
position: absolute;
right: -12px; top: 62%;
transform: translateY(-50%);
width: 88px; height: 88px;
opacity: 0.15;
filter:
drop-shadow(0 0 3px var(--gold-bright-mid))
drop-shadow(0 0 8px rgba(240,210,138,0.3))
drop-shadow(0 0 16px rgba(240,210,138,0.2));
pointer-events: none;
z-index: 1;
}
.wwm-xinfa-card-score {
position: absolute;
left: 40px; bottom: 6px;
font-family: var(--f-latin);
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--gold-bright);
font-variant-numeric: tabular-nums;
text-shadow:
0 0 6px rgba(240,210,138,0.55),
0 0 14px rgba(240,210,138,0.30);
z-index: 2;
}
.wwm-equip-slot[data-slot="1"] { grid-column: 1; grid-row: 1; }
.wwm-equip-slot[data-slot="2"] { grid-column: 2; grid-row: 1; }
.wwm-equip-slot[data-slot="10"] { grid-column: 1; grid-row: 2; }
.wwm-equip-slot[data-slot="11"] { grid-column: 2; grid-row: 2; }
.wwm-equip-slot[data-slot="3"] { grid-column: 3; grid-row: 1; }
.wwm-equip-slot[data-slot="4"] { grid-column: 4; grid-row: 1; }
.wwm-equip-slot[data-slot="5"] { grid-column: 3; grid-row: 2; }
.wwm-equip-slot[data-slot="8"] { grid-column: 4; grid-row: 2; }
.wwm-equip-slot[data-slot="21"] { grid-column: 5; grid-row: 1; }
.wwm-equip-slot[data-slot="9"] { grid-column: 5; grid-row: 2; }
.wwm-gear-grid .wwm-equip-slot {
margin: 0; padding: 2px 10px 32px 40px;
background: linear-gradient(180deg, var(--surf-1), var(--surf-2));
border-radius: 2px; border: 1px solid var(--ink-2);
min-width: 0;
display: flex; flex-direction: column;
overflow: hidden;
min-height: 80px;
position: relative;
}
.wwm-equip-rail {
position: absolute; left: 0; top: 0; bottom: 0; width: 30px;
background: var(--rail-grad);
border-right: 1px solid var(--ink-2);
display: flex; align-items: center; justify-content: center;
padding: 8px 0;
z-index: 2;
}
.wwm-equip-rail-text {
font-family: var(--f-display); font-weight: var(--fw-black);
font-size: var(--text-md); letter-spacing: 0.3em;
writing-mode: vertical-rl; text-orientation: upright;
color: var(--paper);
text-shadow: 0 0 10px rgba(232,215,180,0.4);
line-height: 1.05;
}
/* 武器セット (主武器/副武器/環/佩び物) - 赤 */
.wwm-equip-slot[data-slot="1"] .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="2"] .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="10"] .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="11"] .wwm-equip-rail-text {
color: var(--vermilion-bright, #e8513a);
text-shadow: 0 0 12px rgba(232,81,58,0.55);
}
/* 防具セット (冠/胸当て/膝鎧/小手) - 金 */
.wwm-equip-slot[data-slot="3"] .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="4"] .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="5"] .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="8"] .wwm-equip-rail-text {
color: var(--gold-bright, #f0d28a);
text-shadow: 0 0 12px rgba(240,210,138,0.55);
}
/* 弓セット (弓矢/射玦) - 緑 */
.wwm-equip-slot[data-slot="9"] .wwm-equip-rail-text,
.wwm-equip-slot[data-slot="21"] .wwm-equip-rail-text {
color: var(--jade-bright, #a8d4b4);
text-shadow: 0 0 12px rgba(168,212,180,0.55);
}
.wwm-equip-setname {
font-size: var(--text-sm);
color: var(--vermilion-bright);
text-shadow: 0 0 6px rgba(232,81,58,0.35);
letter-spacing: 0.05em;
}
.wwm-equip-slot-header { font-size: var(--text-md); padding: 0; margin-bottom: 2px; }
.wwm-equip-noedit { cursor: default; }
.wwm-equip-noedit:hover { background: var(--hover-trace); }
@media (max-width: 768px) {
.wwm-equip-section {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.wwm-equip-slot[data-slot] {
grid-column: 1 !important; grid-row: auto !important;
}
}
.wwm-equip-base, .wwm-equip-affix { margin-top: 6px; font-size: var(--text-12); }
.wwm-equip-base b, .wwm-equip-affix b { opacity: 0.85; }
.wwm-equip-base ul, .wwm-equip-affix ul { margin: 4px 0; font-size: var(--text-12); }
.wwm-equip-affix .wwm-rank-blue { color: #4a9eff; }
.wwm-equip-affix .wwm-rank-purple { color: #c389ff; }
.wwm-equip-affix .wwm-rank-gold { color: #d4af37; }
.wwm-affix-useful { color: var(--ratio-ok); font-weight: var(--fw-bold); cursor: help; }
/* ============================================================
装備カード / 心法カード 案A改 追加レイヤー
- 古紙 turbulence (rail除外 left:30px 開始)
- rail 上下端 中央加重 赤グラデ線 (対称)
- hover 朱化 (border朱 + 朱shadow)
- 心法 tier chip (朱赤、 sidebar.js で注入)
============================================================ */
/* 古紙 turbulence (装備カード) */
.wwm-gear-grid .wwm-equip-slot::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 30px;
pointer-events: none;
z-index: 0;
background: url("data:image/svg+xml;utf8,");
opacity: 0.55;
mix-blend-mode: overlay;
}
/* 古紙 turbulence (心法カード) */
.wwm-xinfa-slot::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 30px;
pointer-events: none;
z-index: 0;
background: url("data:image/svg+xml;utf8,");
opacity: 0.55;
mix-blend-mode: overlay;
}
/* rail 上下端 赤グラデ線 (装備) */
.wwm-equip-rail::before,
.wwm-equip-rail::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--vermilion-bright), transparent);
opacity: 0.65;
}
.wwm-equip-rail::before { top: 6px; }
.wwm-equip-rail::after { bottom: 6px; }
/* rail 上下端 赤グラデ線 (心法) */
.wwm-xinfa-rail::before,
.wwm-xinfa-rail::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--vermilion-bright), transparent);
opacity: 0.65;
}
.wwm-xinfa-rail::before { top: 6px; }
.wwm-xinfa-rail::after { bottom: 6px; }
/* hover 朱化 (装備) — 既存 gold hover を override */
.wwm-gear-grid .wwm-equip-slot[data-slot]:hover {
border-color: var(--vermilion-bright);
box-shadow: 0 4px 14px rgba(232,81,58,0.28);
}
/* hover 朱化 (心法) — 既存 gold hover を override */
.wwm-xinfa-slot:hover {
border-color: var(--vermilion-bright);
box-shadow: 0 4px 14px rgba(232,81,58,0.28);
}
/* 心法カード内 tier chip (sidebar.js renderXinfaGrid で注入) */
.wwm-xinfa-tier-chip {
position: absolute;
top: 5px; right: 8px;
z-index: 3;
font-family: var(--f-mono);
font-size: 10px;
font-weight: var(--fw-bold);
color: var(--vermilion-bright);
padding: 1px 6px;
border: 1px solid rgba(232,81,58,0.50);
background: rgba(200,60,43,0.14);
letter-spacing: 0.08em;
border-radius: 1px;
pointer-events: none;
}
/* ライトモード tier chip */
html[data-theme="light"] .wwm-xinfa-tier-chip {
color: var(--vermilion-deep);
border-color: rgba(138,31,23,0.55);
background: rgba(232,81,58,0.18);
}
/* ライトモード 古紙 (overlay→multiply で 紙感薄く) */
html[data-theme="light"] .wwm-gear-grid .wwm-equip-slot::before,
html[data-theme="light"] .wwm-xinfa-slot::before {
opacity: 0.35;
mix-blend-mode: multiply;
}
/* カード 非アクティブ border 微強化 (ほんのすこし目立つ) */
.wwm-gear-grid .wwm-equip-slot,
.wwm-xinfa-slot {
border-color: rgba(232,215,180,0.20);
}
html[data-theme="light"] .wwm-gear-grid .wwm-equip-slot,
html[data-theme="light"] .wwm-xinfa-slot {
border-color: rgba(40,25,18,0.30);
}
/* placeholder grid (import前) */
.wwm-placeholder-grid { cursor: pointer; }
.wwm-placeholder-slot {
position: relative;
min-height: 80px;
background: rgba(0,0,0,0.25);
border: 1px dashed var(--ink-2);
display: grid;
place-items: center;
color: var(--paper-mute);
transition: border-color 0.15s, background 0.15s;
}
.wwm-placeholder-grid:hover .wwm-placeholder-slot {
border-color: var(--gold-deep);
background: var(--gold-faint);
}
/* ── changelog notice (lang制限注記) ───────────────────────── */
.wwm-cl-notice {
padding: var(--space-2) var(--space-3);
margin-bottom: var(--space-3);
background: var(--gold-faint);
border-left: 3px solid var(--gold);
color: var(--paper-dim);
}
html[data-theme="light"] .wwm-cl-notice {
background: var(--gold-tint);
color: var(--paper-mute);
}
/* ── light theme chart override (paper bg で見え難い色を補正) ─── */
html[data-theme="light"] {
--chart-graze: #8b8170;
--chart-normal: #c8bda6;
}
/* ═══════════════════════════════════════════════════════════════
Hero 武侠デザイン (design-sample由来) — sidebar越え左端まで伸ばす
═══════════════════════════════════════════════════════════════ */
.hero.hero-wuxia {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
padding: 16px 24px;
background: linear-gradient(180deg, rgba(30,23,17,.92), rgba(16,12,11,.96));
border: 1px solid var(--gold-deep);
box-shadow: inset 0 0 60px rgba(0,0,0,.5);
overflow: hidden;
position: relative;
height: 195px;
}
.hero-wuxia .l-bracket {
position: absolute;
width: 32px; height: 32px;
box-shadow: 0 0 10px rgba(201,164,90,.35);
pointer-events: none;
z-index: 2;
}
.hero-wuxia .lb-tl { top: -1px; left: -1px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.hero-wuxia .lb-tr { top: -1px; right: -1px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.hero-wuxia .lb-bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.hero-wuxia .lb-br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.hero-wuxia .ink-stroke {
position: absolute;
left: 0; top: 52px;
width: 520px; height: 120px;
opacity: .85;
pointer-events: none;
z-index: 0;
}
.hero-wuxia .hero-left {
position: relative;
z-index: 1;
padding-right: 18px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
}
.hero-wuxia .hero-label {
display: inline-flex;
align-items: baseline;
gap: 14px;
align-self: flex-start;
}
.hero-wuxia .hero-label .ja {
font-family: var(--f-display);
font-weight: var(--fw-bold);
font-size: 30px;
letter-spacing: .18em;
color: var(--gold-bright);
}
.hero-wuxia .hero-label .en {
font-family: var(--f-mono);
font-size: 14px;
letter-spacing: .28em;
color: var(--paper-mute);
}
.hero-wuxia .hero-score-row {
display: flex;
align-items: flex-start;
gap: 18px;
position: relative;
}
.hero-wuxia .hero-current { display: flex; align-items: baseline; gap: var(--space-3); }
.hero-wuxia .hero-number {
font-family: var(--f-latin);
font-weight: var(--fw-black);
font-size: 96px;
line-height: .88;
letter-spacing: -.02em;
color: var(--paper); /* 古紙白 #ede4d0 */
text-shadow: 0 2px 1px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
}
/* Tier badge 共通 base */
.hero-wuxia .hero-tier.tier-badge {
position: relative;
z-index: 2;
font-family: var(--f-latin);
font-size: 22px !important;
font-weight: var(--fw-black);
letter-spacing: .12em;
padding: 5px 16px !important;
align-self: flex-end;
margin-bottom: 14px;
overflow: hidden;
border-radius: 0;
border: 1px solid;
background: linear-gradient(135deg, rgba(60,40,30,.45) 0%, rgba(30,20,15,.35) 50%, rgba(60,40,30,.45) 100%);
color: var(--paper-mute);
border-color: var(--paper-mute);
}
/* tier-SS 個別 padding clamp override も無効化 */
.hero-wuxia .hero-tier.tier-badge.tier-SS,
.hero-wuxia .hero-tier.tier-badge.tier-S,
.hero-wuxia .hero-tier.tier-badge.tier-A,
.hero-wuxia .hero-tier.tier-badge.tier-B,
.hero-wuxia .hero-tier.tier-badge.tier-C {
font-size: 22px !important;
padding: 5px 16px !important;
}
/* SS — gold (アニメ継承、静的部のみ override) */
.hero-wuxia .hero-tier.tier-SS {
color: #f0d28a;
background: linear-gradient(135deg, rgba(180,40,28,.48) 0%, rgba(100,20,14,.38) 50%, rgba(180,40,28,.48) 100%);
border-color: rgba(240,210,138,.65);
text-shadow: 0 0 18px rgba(240,210,138,.95), 0 0 36px rgba(232,81,58,.6);
}
/* S — vermilion (アニメ継承) */
.hero-wuxia .hero-tier.tier-S {
color: #ff6b50;
background: linear-gradient(135deg, rgba(138,31,23,.42) 0%, rgba(60,15,10,.32) 50%, rgba(138,31,23,.42) 100%);
border-color: rgba(232,81,58,.7);
text-shadow: 0 0 14px rgba(232,81,58,.85), 0 0 28px rgba(200,60,43,.45);
}
/* A — jade calm */
.hero-wuxia .hero-tier.tier-A {
color: #a8d4b4;
background: linear-gradient(135deg, rgba(45,90,58,.42) 0%, rgba(20,40,28,.32) 50%, rgba(45,90,58,.42) 100%);
border-color: rgba(168,212,180,.55);
text-shadow: 0 0 12px rgba(168,212,180,.7), 0 0 24px rgba(127,168,138,.35);
box-shadow: 0 0 10px rgba(127,168,138,.35), inset 0 1px 0 rgba(168,212,180,.2), inset 0 -1px 0 rgba(0,0,0,.35);
}
/* B — bone copper */
.hero-wuxia .hero-tier.tier-B {
color: #c9b88a;
background: linear-gradient(135deg, rgba(122,90,32,.38) 0%, rgba(50,38,16,.3) 50%, rgba(122,90,32,.38) 100%);
border-color: rgba(201,184,138,.5);
text-shadow: 0 0 10px rgba(201,184,138,.55);
box-shadow: 0 0 8px rgba(122,90,32,.3), inset 0 1px 0 rgba(201,184,138,.18), inset 0 -1px 0 rgba(0,0,0,.3);
}
/* C — muted */
.hero-wuxia .hero-tier.tier-C {
color: var(--paper-mute);
background: linear-gradient(135deg, rgba(60,50,40,.3) 0%, rgba(25,20,16,.25) 50%, rgba(60,50,40,.3) 100%);
border-color: rgba(122,112,96,.45);
text-shadow: 0 0 6px rgba(122,112,96,.4);
box-shadow: 0 0 4px rgba(90,66,38,.2), inset 0 1px 0 rgba(122,112,96,.15);
}
@keyframes hero-tier-glow-ss {
0%,100% { box-shadow: 0 0 20px rgba(200,60,43,.6), 0 0 45px rgba(232,81,58,.35), inset 0 1px 0 rgba(240,210,138,.28), inset 0 -1px 0 rgba(0,0,0,.45); }
50% { box-shadow: 0 0 32px rgba(200,60,43,.85), 0 0 70px rgba(232,81,58,.5), inset 0 1px 0 rgba(240,210,138,.42), inset 0 -1px 0 rgba(0,0,0,.55); }
}
@keyframes hero-tier-glow-s {
0%,100% { box-shadow: 0 0 14px rgba(200,60,43,.45), 0 0 30px rgba(232,81,58,.22), inset 0 1px 0 rgba(232,81,58,.25), inset 0 -1px 0 rgba(0,0,0,.4); }
50% { box-shadow: 0 0 22px rgba(200,60,43,.7), 0 0 48px rgba(232,81,58,.35), inset 0 1px 0 rgba(232,81,58,.4), inset 0 -1px 0 rgba(0,0,0,.5); }
}
@keyframes hero-tier-shimmer {
0% { left: -150%; }
60% { left: 150%; }
100% { left: 150%; }
}
.hero-wuxia .hero-next-inline {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
margin-top: -6px;
}
.hero-wuxia .hero-next-label {
font-family: var(--f-mono);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
letter-spacing: .32em;
color: var(--paper-mute);
text-transform: uppercase;
padding-left: 2px;
}
.hero-wuxia .hero-next-row { display: flex; align-items: baseline; gap: var(--space-1-5); }
.hero-wuxia .hero-next-arrow { color: var(--gold-deep); font-size: var(--text-18); align-self: center; }
.hero-wuxia .hero-next-val {
font-family: var(--f-latin);
font-weight: var(--fw-extra);
font-size: 48px;
color: var(--bone-dim);
line-height: .88;
letter-spacing: -.01em;
}
.hero-wuxia .hero-right {
position: relative;
z-index: 1;
border-left: 1px solid var(--gold-deep);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: var(--space-3-5);
padding: 6px 0 6px 18px;
background: transparent;
}
.hero-wuxia .luopan {
position: relative;
width: 160px; height: 160px;
display: grid;
place-items: center;
flex-shrink: 0;
}
.hero-wuxia .luopan-ticks,
.hero-wuxia .luopan-arc {
position: absolute;
inset: 0;
width: 100%; height: 100%;
pointer-events: none;
}
.hero-wuxia .luopan-inner {
position: relative;
width: 138px; height: 138px;
}
.hero-wuxia .luopan-inner svg {
width: 100%; height: 100%;
transform: rotate(-90deg);
}
.hero-wuxia .luopan-center {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
}
.hero-wuxia .luopan-center-label {
font-family: var(--f-display);
font-size: 30px;
font-weight: var(--fw-extra);
letter-spacing: .18em;
background: linear-gradient(180deg, #f0d28a 0%, #c9a45a 55%, #8a6f30 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.55));
}
.hero-wuxia .judge-list {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.hero-wuxia .judge-row {
display: flex;
align-items: center;
gap: 7px;
font-size: 10.5px;
white-space: nowrap;
}
.hero-wuxia .judge-dot { width: 7px; height: 7px; flex-shrink: 0; }
/* 物理/属性 行: 区切り線 + 菱形マーカー (◇物理=朱outline / ◆属性=翠fill) */
.hero-wuxia .judge-row-sep { margin-top: 5px; padding-top: 6px; border-top: 1px solid rgba(232,215,180,0.12); }
.hero-wuxia .judge-dot-diamond { width: 8px; height: 8px; border-radius: 0; transform: rotate(45deg); }
.hero-wuxia .judge-dot-phys { background: transparent; border: 1.6px solid #e8513a; box-shadow: 0 0 6px rgba(232,81,58,0.55); }
.hero-wuxia .judge-dot-elem { background: transparent; border: 1.6px solid #a8d4b4; box-shadow: 0 0 6px rgba(168,212,180,0.55); }
.hero-wuxia .judge-name { font-weight: var(--fw-semibold); color: var(--paper-2); }
.hero-wuxia .judge-val {
font-family: var(--f-mono);
font-size: var(--text-sm);
font-weight: var(--fw-bold);
margin-left: auto;
}
/* ── Light theme override: hero-wuxia ─────────────────── */
html[data-theme="light"] .hero.hero-wuxia {
background: linear-gradient(180deg, #e8dcc0, #d4c5a0);
border-color: var(--gold-deep);
box-shadow: inset 0 0 40px rgba(122,90,32,.18);
}
html[data-theme="light"] .hero-wuxia .hero-label .ja {
color: var(--vermilion-deep);
}
html[data-theme="light"] .hero-wuxia .hero-label .en {
color: var(--paper-mute);
opacity: .8;
}
html[data-theme="light"] .hero-wuxia .hero-number {
color: #3a2a20 !important; /* 濃茶 (墨黒より明るめ) */
text-shadow: none !important;
filter: none !important;
}
html[data-theme="light"] .hero-wuxia .hero-next-val {
color: var(--gold-deep);
}
html[data-theme="light"] .hero-wuxia .hero-next-label,
html[data-theme="light"] .hero-wuxia .hero-next-arrow {
color: var(--paper-mute);
}
html[data-theme="light"] .hero-wuxia .luopan-center-label {
color: var(--vermilion-deep);
}
html[data-theme="light"] .hero-wuxia .judge-name {
color: #2a1810;
font-weight: var(--fw-bold);
text-shadow: 0 0 1px rgba(255,255,255,0.4);
}
html[data-theme="light"] .hero-wuxia .judge-val {
filter: brightness(0.55) saturate(1.6);
font-weight: var(--fw-extra);
text-shadow: 0 0 1px rgba(255,255,255,0.5);
}
/* 物理/属性 行は固定色なので個別調整 */
html[data-theme="light"] .hero-wuxia #dmgPhysVal { color: #8a2418 !important; filter: none; }
html[data-theme="light"] .hero-wuxia #dmgElemVal { color: #2d5a3a !important; filter: none; }
html[data-theme="light"] .hero-wuxia .judge-dot-phys { border-color: #8a2418; box-shadow: 0 0 4px rgba(138,36,24,0.45); }
html[data-theme="light"] .hero-wuxia .judge-dot-elem { border-color: #2d5a3a; box-shadow: 0 0 4px rgba(45,90,58,0.45); }
html[data-theme="light"] .hero-wuxia .judge-row-sep { border-top-color: rgba(40,25,18,0.2); }
/* 朱墨筆 light: ダーク同等に見えるよう更に濃化 */
/* light: Tier badge は不透明化して ink-stroke の透け抜けを防止 */
html[data-theme="light"] .hero-wuxia .hero-tier.tier-badge {
background: linear-gradient(180deg, #f4e8cc, #e8dab8);
color: #5a4226;
border-color: rgba(122,90,32,.6);
text-shadow: 0 0 2px rgba(244,232,204,0.9);
}
html[data-theme="light"] .hero-wuxia .hero-tier.tier-SS {
background: linear-gradient(135deg, #f4d97a 0%, #e8c548 50%, #d4a930 100%);
color: #5a3a0a;
border-color: rgba(184,134,11,0.9);
text-shadow: 0 0 2px rgba(255,255,255,0.55);
box-shadow: 0 0 12px rgba(184,134,11,0.45), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(90,42,10,0.3);
}
html[data-theme="light"] .hero-wuxia .hero-tier.tier-SS::before,
html[data-theme="light"] .wwm-sb-tier-badge.tier-SS::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: auto !important;
width: 120% !important;
height: 100% !important;
background: linear-gradient(105deg, transparent 10%, rgba(255,255,255,0.30) 50%, transparent 90%) !important;
transform: translateX(-200%);
animation: tier-ss-shimmer-light 1.6s linear infinite !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* sidebar 側 SS badge 本体も light 不透明化 (ink-stroke 等の透け回避) */
html[data-theme="light"] .wwm-sb-tier-badge.tier-SS {
background: linear-gradient(135deg, #f4d97a 0%, #e8c548 50%, #d4a930 100%) !important;
color: #5a3a0a !important;
border-color: rgba(184,134,11,0.9) !important;
text-shadow: 0 0 2px rgba(255,255,255,0.55) !important;
}
/* sidebar 側 S/A/B/C も hero ライト と同じ gradient + 色 + border に統一 (SS と同パターン) */
html[data-theme="light"] .wwm-sb-tier-badge.tier-S {
background: linear-gradient(135deg, #f4a89a 0%, #e87862 50%, #c83c2b 100%) !important;
color: #4a1410 !important;
border-color: rgba(200,60,43,0.9) !important;
text-shadow: 0 0 2px rgba(255,255,255,0.4) !important;
}
html[data-theme="light"] .wwm-sb-tier-badge.tier-A {
background: linear-gradient(135deg, #c8e0c8 0%, #88b894 50%, #5a8868 100%) !important;
color: #1a3a24 !important;
border-color: rgba(45,90,58,0.85) !important;
text-shadow: none !important;
}
html[data-theme="light"] .wwm-sb-tier-badge.tier-B {
background: linear-gradient(135deg, #e8d4a8 0%, #c4a868 50%, #8a7030 100%) !important;
color: #3a2810 !important;
border-color: rgba(122,90,32,0.85) !important;
text-shadow: none !important;
}
html[data-theme="light"] .wwm-sb-tier-badge.tier-C {
background: linear-gradient(135deg, #d8ccb4 0%, #a89880 50%, #786850 100%) !important;
color: #2a2010 !important;
border-color: rgba(90,66,38,0.85) !important;
text-shadow: none !important;
}
@keyframes tier-ss-shimmer-light {
0% { transform: translateX(-200%); }
100% { transform: translateX(200%); }
}
html[data-theme="light"] .hero-wuxia .hero-tier.tier-S {
background: linear-gradient(135deg, #f4a89a 0%, #e87862 50%, #c83c2b 100%);
color: #4a1410;
border-color: rgba(200,60,43,0.9);
text-shadow: 0 0 2px rgba(255,255,255,0.4);
box-shadow: 0 0 12px rgba(200,60,43,0.4), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(60,10,8,0.3);
}
html[data-theme="light"] .hero-wuxia .hero-tier.tier-A {
background: linear-gradient(135deg, #c8e0c8 0%, #88b894 50%, #5a8868 100%);
color: #1a3a24;
border-color: rgba(45,90,58,0.85);
}
html[data-theme="light"] .hero-wuxia .hero-tier.tier-B {
background: linear-gradient(135deg, #e8d4a8 0%, #c4a868 50%, #8a7030 100%);
color: #3a2810;
border-color: rgba(122,90,32,0.85);
}
html[data-theme="light"] .hero-wuxia .hero-tier.tier-C {
background: linear-gradient(135deg, #d8ccb4 0%, #a89880 50%, #786850 100%);
color: #2a2010;
border-color: rgba(90,66,38,0.85);
}
html[data-theme="light"] .hero-wuxia .ink-stroke {
opacity: 1;
filter: none;
/* 単色stroke の両端を横maskでフェード → ダーク同様の筆の透明感 (平帯解消) */
-webkit-mask: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
mask: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
/* light: SVG path stroke を gradient (alpha 0.35 上限) から濃朱単色に置換 */
html[data-theme="light"] .hero-wuxia .ink-stroke path {
stroke: rgba(160,28,18,0.6) !important;
}
/* 4隅L字 gold-deep (paper地でcontrast) */
html[data-theme="light"] .hero-wuxia .l-bracket {
border-color: var(--gold-deep) !important;
}
/* 羅盤 tick ring 全line濃化 */
html[data-theme="light"] .hero-wuxia .luopan-ticks line {
stroke: var(--gold-deep) !important;
stroke-opacity: .85;
}
html[data-theme="light"] .hero-wuxia .luopan-ticks line[stroke-width="1.5"] {
stroke: var(--vermilion-deep) !important;
stroke-opacity: 1;
}
/* 羅盤 arc 背景 circle 濃化 */
html[data-theme="light"] .hero-wuxia .luopan-arc circle[stroke^="rgba(232,215,180"] {
stroke: rgba(122,90,32,.35) !important;
}
/* 内側 donut 背景 circle 濃化 */
html[data-theme="light"] .hero-wuxia .luopan-inner svg circle.donut-bg,
html[data-theme="light"] .hero-wuxia .luopan-inner svg circle[stroke^="rgba(232,215,180"] {
stroke: rgba(122,90,32,.3) !important;
}
/* ── IMPORT位置ヒント (初回言語選択後) ─────────── */
.wwm-import-hint {
position: fixed;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center;
z-index: var(--z-tooltip);
pointer-events: none;
animation: wwm-hint-in 0.4s cubic-bezier(.2,1.4,.5,1);
}
.wwm-import-hint-arrow {
font-size: 28px;
color: var(--vermilion-bright);
text-shadow: 0 0 12px rgba(232,81,58,.8), 0 0 22px rgba(232,81,58,.5);
animation: wwm-hint-bounce 1.2s ease-in-out infinite;
line-height: 1;
}
.wwm-import-hint-label {
margin-top: 6px;
padding: 8px 14px;
background: linear-gradient(135deg, rgba(180,40,28,.95), rgba(100,20,14,.92));
border: 1px solid rgba(240,210,138,.6);
border-radius: 4px;
color: var(--gold-bright);
font-family: var(--f-body);
font-size: var(--text-12);
font-weight: var(--fw-bold);
letter-spacing: .05em;
white-space: nowrap;
box-shadow: 0 4px 18px rgba(0,0,0,.5), 0 0 24px rgba(232,81,58,.4);
}
.wwm-import-hint-out { animation: wwm-hint-out 0.3s forwards; }
@keyframes wwm-hint-bounce {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes wwm-hint-in {
0% { opacity: 0; transform: translateX(-50%) translateY(-12px); }
100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes wwm-hint-out {
to { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
.wwm-import-hint, .wwm-import-hint-arrow { animation: none; }
}
/* ── Polish primitives (将来再利用用、CSS-only) ─────────── */
/* tooltip — native title= の代替、JS付与 data-tooltip="..." で発火 */
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
padding: var(--space-1) var(--space-2);
background: var(--overlay-heavy);
color: var(--paper);
font-size: var(--text-xs);
white-space: nowrap;
border-radius: 4px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: var(--z-tooltip);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
opacity: 1;
}
/* empty-state — データ無し共通表示 */
.wwm-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-6) var(--space-3);
color: var(--paper-mute);
font-size: var(--text-12);
text-align: center;
gap: var(--space-2);
}
.wwm-empty-state-icon {
font-size: var(--text-24);
opacity: 0.5;
}
/* skeleton — ロード中表示 */
.wwm-skeleton {
display: inline-block;
background: linear-gradient(90deg, var(--hover-trace), var(--hover-soft), var(--hover-trace));
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 4px;
min-height: 1em;
color: transparent;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.wwm-skeleton { animation: none; }
}
/* error-banner — エラー通知共通 */
.wwm-error-banner {
padding: var(--space-2) var(--space-3);
margin-bottom: var(--space-3);
background: var(--vermilion-soft);
border-left: 3px solid var(--vermilion-strong);
font-size: var(--text-12);
color: #ffb39e;
border-radius: 4px;
}
html[data-theme="light"] .wwm-error-banner {
background: var(--vermilion-tint);
color: var(--vermilion-deep);
}
/* ── スコア計算更新バナー (baseline 鮮度切れ scoreVer不一致 → 再import促し) ── */
.wwm-score-update-banner {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
box-sizing: border-box;
padding: var(--space-2) var(--space-4, 16px);
background: var(--vermilion-soft);
border-bottom: 1px solid var(--vermilion-strong);
color: #ffd9cc;
font-size: var(--text-13, 13px);
position: relative;
z-index: 50;
animation: wwm-banner-in .45s cubic-bezier(.2,1.4,.5,1), wwm-banner-glow 2.2s ease-in-out .45s infinite;
}
.wwm-score-update-icon { flex: 0 0 auto; font-size: 16px; color: var(--vermilion-strong); animation: wwm-banner-icon-pulse 1.4s ease-in-out infinite; }
.wwm-score-update-arrow {
flex: 0 0 auto;
font-size: 15px;
color: var(--vermilion-bright);
text-shadow: 0 0 10px rgba(232,81,58,.7);
animation: wwm-banner-arrow-bounce 1.1s ease-in-out infinite;
}
.wwm-score-update-msg { flex: 1 1 auto; line-height: 1.4; }
.wwm-score-update-btn {
flex: 0 0 auto;
padding: 6px 16px;
background: var(--vermilion-strong);
color: #fff;
border: none;
border-radius: 4px;
font-weight: 700;
font-size: var(--text-12);
cursor: pointer;
white-space: nowrap;
transition: filter .15s;
}
.wwm-score-update-btn:hover { filter: brightness(1.15); }
.wwm-score-update-btn { animation: wwm-banner-btn-pulse 1.6s ease-in-out infinite; }
@keyframes wwm-banner-in {
0% { opacity: 0; transform: translateY(-100%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes wwm-banner-glow {
0%,100% { box-shadow: 0 0 0 rgba(232,81,58,0); }
50% { box-shadow: 0 2px 18px rgba(232,81,58,.45); }
}
@keyframes wwm-banner-icon-pulse {
0%,100% { transform: scale(1); opacity: .8; }
50% { transform: scale(1.2); opacity: 1; }
}
@keyframes wwm-banner-btn-pulse {
0%,100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
@keyframes wwm-banner-arrow-bounce {
0%,100% { transform: translateX(0); }
50% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
.wwm-score-update-banner, .wwm-score-update-icon, .wwm-score-update-btn, .wwm-score-update-arrow { animation: none !important; }
.wwm-migration-banner, .wwm-migration-icon, .wwm-migration-btn, .wwm-migration-arrow { animation: none !important; }
}
/* ── 移転案内バナー (旧URL アクセス時のみ表示、 OBS view非表示) ── */
.wwm-migration-banner {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
box-sizing: border-box;
padding: var(--space-2) var(--space-4, 16px);
background: rgba(60, 100, 180, 0.18);
border-bottom: 1px solid #4a78b8;
color: #cfe0f5;
font-size: var(--text-13, 13px);
position: relative;
z-index: 50;
animation: wwm-banner-in .45s cubic-bezier(.2,1.4,.5,1);
}
.wwm-migration-icon { flex: 0 0 auto; font-size: 16px; }
.wwm-migration-arrow { flex: 0 0 auto; font-size: 15px; color: #7fb0e8; animation: wwm-banner-arrow-bounce 1.1s ease-in-out infinite; }
.wwm-migration-msg { flex: 1 1 auto; line-height: 1.4; }
.wwm-migration-msg strong { color: #a8d0ff; font-weight: 700; }
.wwm-migration-btn {
flex: 0 0 auto;
padding: 6px 16px;
background: #4a78b8;
color: #fff;
border: none;
border-radius: 4px;
font-weight: 700;
font-size: var(--text-12);
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: filter .15s;
}
.wwm-migration-btn:hover { filter: brightness(1.15); }
html[data-theme="light"] .wwm-migration-banner {
background: rgba(60, 100, 180, 0.12);
border-bottom-color: #2d5a8a;
color: #1a3a66;
}
html[data-theme="light"] .wwm-migration-msg strong { color: #0e2c52; }
html[data-theme="light"] .wwm-migration-btn { background: #2d5a8a; }
html.wwm-view-sidebar .wwm-migration-banner { display: none !important; }
/* ── DATA IMPORT modal ライトモード コントラスト強化 ───────────
背景がクリーム色のため、 各種テキストが薄ピンク/薄ゴールドで埋もれる事象を解消。 */
html[data-theme="light"] .wwm-equip-section,
html[data-theme="light"] .wwm-equip-section .wwm-equip-slot,
html[data-theme="light"] .wwm-equip-section .wwm-equip-slot-header,
html[data-theme="light"] .wwm-equip-section .wwm-equip-base,
html[data-theme="light"] .wwm-equip-section .wwm-equip-affix,
html[data-theme="light"] .wwm-equip-section .wwm-equip-base b,
html[data-theme="light"] .wwm-equip-section .wwm-equip-affix b,
html[data-theme="light"] .wwm-equip-section .wwm-stat-name,
html[data-theme="light"] .wwm-equip-section .wwm-stat-val,
html[data-theme="light"] .wwm-step2,
html[data-theme="light"] .wwm-step2 .wwm-step2-section-title,
html[data-theme="light"] .wwm-step2 .wwm-xinfa-cell,
html[data-theme="light"] .wwm-step2 .wwm-xinfa-label,
html[data-theme="light"] .wwm-step2 .wwm-xinfa-effect,
html[data-theme="light"] .wwm-step2 .wwm-arsenal-tier,
html[data-theme="light"] .wwm-step2 .wwm-arsenal-lv,
html[data-theme="light"] .wwm-step2 .wwm-arsenal-peaked-label,
html[data-theme="light"] .wwm-step2 .wwm-arsenal-preset,
html[data-theme="light"] .wwm-step2 .wwm-arsenal-custom,
html[data-theme="light"] .wwm-step2 .wwm-stat-label,
html[data-theme="light"] .wwm-step2 .wwm-radio-label {
color: #3a2010 !important;
}
html[data-theme="light"] .wwm-equip-section .wwm-stat-pct {
color: #6a4220 !important;
opacity: 1 !important;
}
/* ライト DATA IMPORT: affix rank別 色 (ダーク gold/purple/blue を ライト背景で視認できる暗色に置換) */
html[data-theme="light"] .wwm-equip-section .wwm-equip-affix .wwm-rank-gold,
html[data-theme="light"] .wwm-equip-section .wwm-equip-affix .wwm-rank-gold .wwm-stat-name,
html[data-theme="light"] .wwm-equip-section .wwm-equip-affix .wwm-rank-gold .wwm-stat-val {
color: #b85a14 !important; /* 暗オレンジ */
}
html[data-theme="light"] .wwm-equip-section .wwm-equip-affix .wwm-rank-purple,
html[data-theme="light"] .wwm-equip-section .wwm-equip-affix .wwm-rank-purple .wwm-stat-name,
html[data-theme="light"] .wwm-equip-section .wwm-equip-affix .wwm-rank-purple .wwm-stat-val {
color: #6a2e8a !important; /* 暗紫 */
}
html[data-theme="light"] .wwm-equip-section .wwm-equip-affix .wwm-rank-blue,
html[data-theme="light"] .wwm-equip-section .wwm-equip-affix .wwm-rank-blue .wwm-stat-name,
html[data-theme="light"] .wwm-equip-section .wwm-equip-affix .wwm-rank-blue .wwm-stat-val {
color: #1e5a9e !important; /* 暗青 */
}
html[data-theme="light"] .wwm-step2 .wwm-step2-section-title {
color: #5a1e10 !important;
font-weight: 900 !important;
}
html[data-theme="light"] .wwm-step2 .wwm-muted {
color: #6a4220 !important;
opacity: 0.95 !important;
}
html[data-theme="light"] .wwm-step2 .wwm-num-input {
color: #3a2010 !important;
background: rgba(255,255,255,0.5) !important;
}
/* ライト: 心法Tier / 武庫 セクションの薄黄ボーダーを暗茶に置換 (背景に溶けない) */
html[data-theme="light"] .wwm-step2 .wwm-step2-section-title {
border-bottom-color: rgba(120,60,20,0.45) !important;
}
html[data-theme="light"] .wwm-step2 .wwm-xinfa-cell {
border-bottom: 1px dashed rgba(120,60,20,0.25);
padding-bottom: 4px;
}
html[data-theme="light"] .wwm-step2 .wwm-arsenal-tier {
border: 1px solid rgba(120,60,20,0.3) !important;
background: rgba(255,240,210,0.4) !important;
}
/* ダーク 武庫 tier 行も視認性向上 (カード化) */
html[data-theme="dark"] .wwm-step2 .wwm-arsenal-tier,
html:not([data-theme="light"]) .wwm-step2 .wwm-arsenal-tier {
border: 1px solid rgba(212,175,55,0.25);
background: rgba(40,28,16,0.55);
}
/* ライト: サイドバー各ステ名 (パラメータ名) を僅かに太く+濃く (レイアウト維持のため font-weight 500 + opacity up) */
html[data-theme="light"] .wwm-sb-label {
font-weight: 500 !important;
opacity: 0.95 !important;
}
/* ============================================================
分析パネル (右下) — 案30 (古紙テクスチャ + bamboo SVG)
============================================================ */
.wwm-anlz {
--anlz-header-bg: #0a0806;
--anlz-content-bg: #1c1814;
--anlz-line: rgba(212,175,55,.32);
margin-top: 16px;
}
html[data-theme="light"] .wwm-anlz {
--anlz-header-bg: #f0e8d2;
--anlz-content-bg: #faf3df;
--anlz-line: rgba(120,60,20,.32);
}
/* ── ヘッダー (古紙黒テクスチャ + bamboo SVG 半透明) ── */
.wwm-anlz-header {
position: relative;
background: var(--anlz-header-bg);
border: 1px solid var(--anlz-line);
padding: 12px 26px;
overflow: hidden;
box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
html[data-theme="light"] .wwm-anlz-header {
box-shadow: 0 6px 18px rgba(120,60,20,.18);
}
/* 古紙テクスチャ (SVG turbulence) */
.wwm-anlz-header::before {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.55;
pointer-events: none;
mix-blend-mode: overlay;
}
html[data-theme="light"] .wwm-anlz-header::before {
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
/* 微かな筆跡 */
.wwm-anlz-header::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(180deg, transparent 18%, rgba(255,255,255,.025) 19%, rgba(255,255,255,.025) 20%, transparent 21%),
linear-gradient(180deg, transparent 60%, rgba(255,255,255,.015) 61%, transparent 62%);
pointer-events: none;
}
html[data-theme="light"] .wwm-anlz-header::after {
background:
linear-gradient(180deg, transparent 18%, rgba(0,0,0,.04) 19%, rgba(0,0,0,.04) 20%, transparent 21%),
linear-gradient(180deg, transparent 60%, rgba(0,0,0,.025) 61%, transparent 62%);
}
/* bamboo SVG (game-icons.net delapouite CC-BY 3.0、 半透明背景) */
.wwm-anlz-bamboo {
position: absolute;
right: -45px; top: -55px;
width: 280px; height: 280px;
opacity: 0.10;
pointer-events: none;
z-index: 0;
transform: rotate(35deg);
transform-origin: center;
}
html[data-theme="light"] .wwm-anlz-bamboo { opacity: 0.28; }
.wwm-anlz-bamboo svg { width: 100%; height: 100%; display: block; }
/* ライト: 竹 SVG fill を暗金茶に上書き (薄背景での視認性UP) */
html[data-theme="light"] .wwm-anlz-bamboo svg path { fill: #6a3e16 !important; }
.wwm-anlz-header-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.wwm-anlz-title-block { display: flex; align-items: baseline; gap: 14px; flex-shrink: 0; }
.wwm-anlz-title {
font-family: 'Ma Shan Zheng', 'Noto Serif JP', serif;
font-size: 48px;
color: #f5e8c0;
letter-spacing: 0.05em;
margin: 0;
line-height: 1;
font-weight: 900;
/* 墨が紙に滲んだリアル感 (光らせず、 同色で段階的に近距離まで広がる + 左右微オフセット) */
text-shadow:
0 0 0.5px rgba(245,232,192,.85),
0 0 1.5px rgba(232,217,184,.55),
0 0 3px rgba(232,217,184,.35),
0.6px 0 1.2px rgba(232,217,184,.3),
-0.6px 0 1.2px rgba(232,217,184,.25),
0 0.5px 1.5px rgba(232,217,184,.22);
}
html[data-theme="light"] .wwm-anlz .wwm-anlz-title {
color: #2a1610 !important;
text-shadow:
0 0 0.5px rgba(42,22,16,.6),
0 0 1.5px rgba(74,40,20,.35),
0 0 3px rgba(106,62,22,.18),
0.6px 0 1.2px rgba(42,22,16,.25),
-0.6px 0 1.2px rgba(42,22,16,.22),
0 0.5px 1.5px rgba(74,40,20,.14) !important;
}
html[data-theme="light"] .wwm-anlz-title {
color: #1a0e08;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.wwm-anlz-goldline {
width: 90px; height: 2px;
background: linear-gradient(90deg, var(--gold-deep, #c89a2e), transparent);
margin: 3px 0;
position: relative;
}
.wwm-anlz-goldline::after {
content: '';
position: absolute;
left: 0; top: -2px;
width: 6px; height: 6px;
background: var(--gold-deep, #c89a2e);
border-radius: 50%;
box-shadow: 0 0 8px var(--gold-deep, #c89a2e);
}
.wwm-anlz-subtitle {
font-family: 'Cinzel', serif;
font-size: 13px;
letter-spacing: 0.4em;
color: var(--gold-deep, #c89a2e);
opacity: 0.75;
line-height: 1;
}
html[data-theme="light"] .wwm-anlz .wwm-anlz-subtitle {
color: #6a3e16 !important;
opacity: 0.9;
}
/* タブ列 (右側) — 既存 wwm-analysis-tab を案30 風に上書き */
#wwmAnalysisTabs.wwm-anlz-tabs {
display: flex !important;
gap: 18px;
flex-wrap: wrap;
align-items: flex-end;
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
#wwmAnalysisTabs.wwm-anlz-tabs .wwm-analysis-tab {
padding: 6px 4px 9px !important;
background: transparent !important;
border: none !important;
color: var(--paper, #e8d9b8) !important;
font-family: 'Ma Shan Zheng', 'Noto Serif JP', serif !important;
font-size: 15px !important;
letter-spacing: 0.18em !important;
cursor: pointer;
position: relative;
opacity: 0.65;
transition: opacity .15s;
border-radius: 0 !important;
box-shadow: none !important;
}
html[data-theme="light"] #wwmAnalysisTabs.wwm-anlz-tabs .wwm-analysis-tab {
color: #2a1810 !important;
}
#wwmAnalysisTabs.wwm-anlz-tabs .wwm-analysis-tab:hover { opacity: 1; }
#wwmAnalysisTabs.wwm-anlz-tabs .wwm-analysis-tab.active {
color: #f0d28a !important;
opacity: 1;
font-weight: 900 !important;
}
html[data-theme="light"] #wwmAnalysisTabs.wwm-anlz-tabs .wwm-analysis-tab.active {
color: #8a5a14 !important;
}
html[lang="en"] #wwmAnalysisTabs.wwm-anlz-tabs .wwm-analysis-tab {
font-family: 'Cinzel', serif !important;
letter-spacing: 0.2em !important;
text-transform: uppercase;
}
/* ja: Ma Shan Zheng は日本漢字非対応 → Noto Serif JP */
html[lang="ja"] #wwmAnalysisTabs.wwm-anlz-tabs .wwm-analysis-tab {
font-family: 'Noto Serif JP', serif !important;
}
/* ko: Noto Serif KR (fallback Noto Serif JP) */
html[lang="ko"] #wwmAnalysisTabs.wwm-anlz-tabs .wwm-analysis-tab {
font-family: 'Noto Serif KR', 'Noto Serif JP', serif !important;
}
/* en時: modal の主タイトル / 各パネルの主タイトル を Cinzel に統一 */
html[lang="en"] .wwm-modal-header h2,
html[lang="en"] .wwm-modal-header h2 *,
html[lang="en"] .wwm-cmp-title-ja,
html[lang="en"] .wwm-cmp-title-en {
font-family: 'Cinzel', serif !important;
letter-spacing: 0.15em !important;
}
#wwmAnalysisTabs.wwm-anlz-tabs .wwm-analysis-tab.active::after {
content: '';
position: absolute;
left: -4px; right: -4px; bottom: -2px;
height: 2px;
background: linear-gradient(90deg, transparent, #c89a2e 50%, transparent);
box-shadow: 0 0 6px rgba(212,175,55,.6);
}
/* ── ギャップ ── */
.wwm-anlz-gap { height: 14px; }
/* ── 本文 (異なるテクスチャ: 革風 暗茶) ── */
.wwm-anlz-body {
position: relative;
background: var(--anlz-content-bg);
border: 1px solid var(--anlz-line);
padding: 24px 32px 30px;
overflow: hidden;
box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
html[data-theme="light"] .wwm-anlz-body {
box-shadow: 0 6px 18px rgba(120,60,20,.18);
}
.wwm-anlz-body::before {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.5;
pointer-events: none;
mix-blend-mode: overlay;
}
html[data-theme="light"] .wwm-anlz-body::before {
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
.wwm-anlz-body::after {
content: '';
position: absolute; inset: 0;
background:
repeating-linear-gradient(45deg, transparent 0 24px, rgba(212,175,55,.025) 24px 25px),
repeating-linear-gradient(-45deg, transparent 0 24px, rgba(0,0,0,.05) 24px 25px);
pointer-events: none;
}
html[data-theme="light"] .wwm-anlz-body::after {
background:
repeating-linear-gradient(45deg, transparent 0 24px, rgba(120,60,20,.04) 24px 25px),
repeating-linear-gradient(-45deg, transparent 0 24px, rgba(184,134,11,.04) 24px 25px);
}
.wwm-anlz-body > * { position: relative; z-index: 1; }
/* 内側 .wwm-analysis-card 系の独自枠を除去 (二重枠回避) */
.wwm-anlz-body .wwm-analysis-card,
.wwm-anlz-body .wwm-modal-square {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
position: relative;
z-index: 1;
}
/* 各 inner card の旧 bg-icon は非表示 → .wwm-anlz-body 共通の背景に統一 */
.wwm-anlz-body .wwm-modal-bg-icon { display: none !important; }
/* パネル全体の背景アイコン (旧 .wwm-modal-bg-icon と同位置/サイズ/透明度) */
.wwm-anlz-bgicon {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-position: calc(100% + 40px) calc(100% + 40px);
background-size: 60%;
opacity: 0.28;
filter:
brightness(0)
drop-shadow(0 0 5px rgba(28,24,20,.4))
drop-shadow(0 0 14px rgba(18,16,14,.22));
pointer-events: none;
z-index: 0;
}
html[data-theme="light"] .wwm-anlz-bgicon {
opacity: 0.22;
filter:
brightness(0)
drop-shadow(0 0 6px rgba(138,106,32,0.45))
drop-shadow(0 0 14px rgba(138,106,32,0.25));
}
/* タブ別 背景画像 (fallback: 装備最適化の anvil) — CSS 基準パスで icons/ 直下 */
.wwm-anlz-bgicon { background-image: url('icons/anvil-impact.svg'); }
.wwm-anlz[data-active-tab="opt"] .wwm-anlz-bgicon { background-image: url('icons/anvil-impact.svg'); }
.wwm-anlz[data-active-tab="rank"] .wwm-anlz-bgicon { background-image: url('icons/scales.svg'); }
.wwm-anlz[data-active-tab="history"] .wwm-anlz-bgicon { background-image: url('icons/mountain-road.svg'); }
/* 旧 角装飾 (擬似要素) も無効化 */
.wwm-anlz-body .wwm-analysis-card::before,
.wwm-anlz-body .wwm-analysis-card::after,
.wwm-anlz-body .wwm-modal-square::before,
.wwm-anlz-body .wwm-modal-square::after {
display: none !important;
}
/* PvP定音ロック行 (武具対照 affix6): val 入力欄を非表示 (編集不可、行レイアウト維持) */
.wwm-cmp-modal-a .wwm-cmp-pvp-locked .wwm-cmp-val-input,
.wwm-cmp-modal-a .wwm-cmp-pvp-locked .wwm-cmp-unit,
.wwm-cmp-modal-a .wwm-cmp-pvp-locked .wwm-cmp-ratio { visibility: hidden !important; }
/* ── Tier badge ルーレット (opt実行中 演出、 sidebar + heroパネル 共通) ─────── */
.wwm-sb-tier-badge.tier-rolling,
.hero-tier.tier-rolling {
background: linear-gradient(180deg, #2a1a0c 0%, #0a0402 100%) !important;
color: #f5d970 !important;
border: 1px solid #d4af37 !important;
text-align: center;
box-sizing: border-box;
}
/* ルーレット中の幅は静的時と同じ (min-width 既に static 側で 28px、 hero は元から十分) */
.wwm-sb-tier-badge.tier-rolling,
.hero-tier.tier-rolling {
text-shadow: 0 0 4px #ffd970, 0 0 10px #ff9a30 !important;
font-weight: 900 !important;
filter: brightness(1.15);
animation:
wwm-tier-shake 0.08s linear infinite,
wwm-tier-rainbow-glow 2.4s linear infinite;
}
@keyframes wwm-tier-shake {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
20% { transform: translate(-1px,-1px) rotate(-3deg); }
40% { transform: translate(1px, 0) rotate(2deg); }
60% { transform: translate(-1px, 1px) rotate(-2deg); }
80% { transform: translate(1px, 0) rotate(3deg); }
}
@keyframes wwm-tier-rainbow-glow {
0% { box-shadow: 0 0 14px rgba(255, 80, 80,.95), 0 0 30px rgba(255, 80, 80,.55), inset 0 0 8px rgba(255,200,80,.4); }
16% { box-shadow: 0 0 14px rgba(255,180, 60,.95), 0 0 30px rgba(255,180, 60,.55), inset 0 0 8px rgba(255,200,80,.4); }
33% { box-shadow: 0 0 14px rgba(255,240, 80,.95), 0 0 30px rgba(255,240, 80,.55), inset 0 0 8px rgba(255,200,80,.4); }
50% { box-shadow: 0 0 14px rgba( 80,255,120,.95), 0 0 30px rgba( 80,255,120,.55), inset 0 0 8px rgba(255,200,80,.4); }
66% { box-shadow: 0 0 14px rgba( 80,200,255,.95), 0 0 30px rgba( 80,200,255,.55), inset 0 0 8px rgba(255,200,80,.4); }
83% { box-shadow: 0 0 14px rgba(180, 80,255,.95), 0 0 30px rgba(180, 80,255,.55), inset 0 0 8px rgba(255,200,80,.4); }
100% { box-shadow: 0 0 14px rgba(255, 80, 80,.95), 0 0 30px rgba(255, 80, 80,.55), inset 0 0 8px rgba(255,200,80,.4); }
}
@media (prefers-reduced-motion: reduce) {
.wwm-sb-tier-badge.tier-rolling,
.hero-tier.tier-rolling { animation: none; filter: none; }
}
/* ── NOTE modal (巻物 UI、 ライト/ダーク共通) ────────────────── */
.wwm-note-modal-a {
position: relative;
width: 720px;
max-width: 94vw;
margin: 40px auto;
padding: 0;
background: transparent;
font-family: var(--f-body);
}
.wwm-note-rod {
height: 22px;
background: linear-gradient(180deg, #5a3320 0%, #8a5a30 20%, #d4af37 50%, #8a5a30 80%, #5a3320 100%);
border-radius: 4px;
box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 0 8px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.45);
position: relative;
}
.wwm-note-rod::before, .wwm-note-rod::after {
content: '';
position: absolute;
top: -4px;
width: 30px; height: 30px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #f0d28a 0%, #c8932e 40%, #6a3e16 100%);
box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 0 4px rgba(0,0,0,.4);
border: 1px solid #3a2210;
}
.wwm-note-rod::before { left: -10px; }
.wwm-note-rod::after { right: -10px; }
.wwm-note-rod-top { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.wwm-note-rod-bottom { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.wwm-note-paper {
position: relative;
padding: 24px 32px 24px;
background:
radial-gradient(circle at 20% 30%, rgba(120,80,40,.12) 0%, transparent 25%),
radial-gradient(circle at 80% 70%, rgba(100,60,30,.10) 0%, transparent 30%),
radial-gradient(circle at 50% 50%, rgba(80,50,20,.06) 0%, transparent 50%),
linear-gradient(180deg, #ecd7a8 0%, #d4b87c 50%, #c8a868 100%);
border-left: 2px solid #5a3320;
border-right: 2px solid #5a3320;
box-shadow:
inset 0 8px 18px rgba(80,50,20,.3),
inset 0 -8px 18px rgba(80,50,20,.3),
inset 4px 0 8px rgba(80,50,20,.15),
inset -4px 0 8px rgba(80,50,20,.15);
color: #3a2010;
}
.wwm-note-paper::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.55; pointer-events: none; mix-blend-mode: multiply;
}
.wwm-note-paper > * { position: relative; z-index: 1; }
/* ヘッダー: タイトル + ボタン群 */
.wwm-note-header {
display: flex; align-items: center; gap: 14px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.wwm-note-title-ja {
font-family: 'Ma Shan Zheng', 'Noto Serif JP', serif;
font-size: 28px;
color: #5a1e10;
letter-spacing: 0.15em;
text-shadow: 0 1px 0 rgba(255,240,200,.4);
}
.wwm-note-title-en {
font-family: 'Cinzel', serif;
font-size: 13px;
letter-spacing: 0.3em;
color: #7a4220;
font-weight: 700;
}
.wwm-note-seal {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: #b8321f;
color: #f5e6c8;
font-family: 'Noto Serif JP', serif;
font-size: 16px; font-weight: 900;
border-radius: 3px;
box-shadow: 0 0 0 1px #5a1208, 1px 1px 0 rgba(0,0,0,.3);
transform: rotate(-3deg);
}
.wwm-note-header-actions {
margin-left: auto;
display: flex; gap: 6px;
}
.wwm-note-btn {
padding: 7px 14px;
background: linear-gradient(180deg, #b8321f 0%, #8a1f10 100%);
color: #f5e6c8;
border: 1px solid #5a1208;
border-radius: 4px;
font-family: 'Noto Serif JP', serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.08em;
cursor: pointer;
text-decoration: none;
display: inline-flex; align-items: center; gap: 5px;
box-shadow: inset 0 1px 0 rgba(255,200,150,.3), 0 2px 6px rgba(0,0,0,.4);
transition: filter .15s, transform .15s;
}
.wwm-note-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.wwm-note-btn-gh { background: linear-gradient(180deg, #4a3a2a 0%, #2a1f14 100%); border-color: #1a0e08; }
.wwm-note-btn-close { background: linear-gradient(180deg, #8a6f3a 0%, #5a4220 100%); border-color: #3a2810; }
.wwm-note-btn svg { width: 12px; height: 12px; }
.wwm-note-divider {
height: 1px;
background: linear-gradient(90deg, transparent, #8a5a30 20%, #5a3320 50%, #8a5a30 80%, transparent);
margin: 10px 0 14px;
position: relative;
}
.wwm-note-divider::after {
content: '◆';
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
background: #d4b87c;
color: #b8321f;
padding: 0 8px;
font-size: 9px;
}
/* タブ */
.wwm-note-tabs {
display: flex; gap: 4px;
margin-bottom: 18px;
border-bottom: 1px dashed #8a5a30;
}
.wwm-note-tab {
padding: 8px 22px;
background: linear-gradient(180deg, #d8b878 0%, #b8954c 100%);
border: 1px solid #6a3e16; border-bottom: none;
border-radius: 6px 6px 0 0;
color: #4a2810;
font-family: 'Noto Serif JP', serif;
font-weight: 700; font-size: 14px;
cursor: pointer; position: relative; top: 1px;
letter-spacing: 0.08em;
box-shadow: inset 0 -3px 4px rgba(80,40,20,.25);
transition: transform .15s;
}
.wwm-note-tab:hover { transform: translateY(-1px); }
.wwm-note-tab.active {
background: linear-gradient(180deg, #ecd7a8 0%, #d4b87c 100%);
color: #5a1e10;
border-color: #5a3320;
box-shadow: inset 0 2px 4px rgba(255,240,200,.5), 0 -2px 6px rgba(80,40,20,.15);
font-weight: 900;
}
/* 本文 */
.wwm-note-body {
font-family: var(--f-body);
font-size: 13px; line-height: 1.75;
color: #3a2010;
max-height: 500px; overflow-y: auto;
padding-right: 10px;
}
.wwm-note-body::-webkit-scrollbar { width: 8px; }
.wwm-note-body::-webkit-scrollbar-track { background: rgba(80,40,20,.15); border-radius: 4px; }
.wwm-note-body::-webkit-scrollbar-thumb { background: #8a5a30; border-radius: 4px; }
.wwm-note-section { margin-bottom: 18px; }
.wwm-note-h3 {
font-family: 'Noto Serif JP', serif;
font-size: 15px; font-weight: 900;
color: #5a1e10;
margin: 0 0 8px;
padding-left: 10px;
border-left: 4px solid #b8321f;
letter-spacing: 0.05em;
}
.wwm-note-list { margin: 0 0 8px 0; padding-left: 22px; list-style: none; }
.wwm-note-list li { position: relative; margin-bottom: 4px; padding-left: 4px; }
.wwm-note-list li::before {
content: '・';
position: absolute; left: -14px;
color: #b8321f; font-weight: 900;
}
.wwm-note-list li b { color: #5a1e10; font-weight: 700; }
.wwm-note-p { margin: 0 0 10px; }
.wwm-note-pre {
background: rgba(90,30,16,.08);
border: 1px dashed rgba(90,30,16,.35);
border-radius: 4px;
padding: 10px 12px;
font-family: var(--f-mono, 'Courier New', monospace);
font-size: 12px;
color: #5a1e10;
white-space: pre-wrap;
margin: 0 0 10px;
}
/* 更新履歴 */
.wwm-note-cl-entry { margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px dotted rgba(90,30,16,.35); }
.wwm-note-cl-entry:last-child { border-bottom: none; }
.wwm-note-cl-ver { font-family: 'Cinzel', serif; font-size: 16px; font-weight: 900; color: #5a1e10; }
.wwm-note-cl-date { font-size: 11px; color: #7a4220; margin-left: 10px; font-weight: 400; }
.wwm-note-cl-items { margin: 6px 0 0 0; padding-left: 22px; list-style: none; }
.wwm-note-cl-items li { position: relative; margin-bottom: 3px; padding-left: 4px; }
.wwm-note-cl-items li::before { content: '・'; position: absolute; left: -14px; color: #b8321f; font-weight: 900; }
.wwm-note-cl-items li.wwm-note-cl-featured {
background: linear-gradient(90deg, rgba(200,60,43,0.14), rgba(200,60,43,0.04));
border-left: 3px solid var(--vermilion);
padding: 10px 12px;
margin: 8px 0 12px -18px;
font-weight: 600;
font-size: 1.02em;
line-height: 1.7;
border-radius: 0 4px 4px 0;
}
.wwm-note-cl-items li.wwm-note-cl-featured::before { display: none; }
html[data-theme="light"] .wwm-note-cl-items li.wwm-note-cl-featured {
background: linear-gradient(90deg, rgba(232,81,58,0.16), rgba(232,81,58,0.05));
border-left-color: var(--vermilion-deep);
color: #2a1810;
}
@media (max-width: 720px) {
.wwm-note-header-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
.wwm-note-btn { font-size: 11px; padding: 6px 10px; }
}
html[data-theme="light"] .wwm-score-update-banner {
background: var(--vermilion-tint);
color: var(--vermilion-deep);
border-bottom-color: var(--vermilion-strong);
}
/* OBS view (表示専用) では常に非表示 */
html.wwm-view-sidebar .wwm-score-update-banner { display: none !important; }