/* ============================================================================ INTERFACE THEMES — redefines the game's OWN palette variables per [data-theme="-"] on . Loaded AFTER styles.css so these win over the (fonts-only) :root. Mode = dark|light, accent = crimson|azure| gold|jade|ink. Day paper tone via [data-paper]; neon finish via [data-glow]. Semantic colors (jade essence, gold stone, rarity tiers t1–t10) are set at MODE level — they carry game meaning and shift only dark↔light, not by accent. ========================================================================== */ /* ---------------------------- NIGHT (dark) shared ---------------------------- */ [data-theme^="dark"]{ --bone:#e9e1d4; --bone-dim:#c4b8a6; --muted:#9c8f7b; --ink:#e9e1d4; --bone-rgb:233,225,212; --jade:#3f9e74; --jade-dim:#2c6f52; --stone:#c79a45; --brass:#b08b3e; --essence:#46b3cf; --immstone:#a874d8; --t1:#9aa39a; --t2:#74c0a0; --t3:#5aa7d8; --t4:#b07ad8; --t5:#d8a64a; --t6:#e0673e; --t7:#e0463e; --t8:#e03e8a; --t9:#b03ee0; --t10:#f5e58a; --shadow-rgb:8,6,5; --btn-hi:rgba(255,255,255,0.015); --btn-lo:rgba(0,0,0,0.25); --inset:#1d1611; --scrollbar:#241c17; --vignette:rgba(0,0,0,0.5); --on-accent:#f3e9da; } /* ---------------------------- DAY (light) shared · rice paper default ---------------------------- */ [data-theme^="light"]{ --bg:#ece3cf; --bg2:#e6dbc4; --bg3:#dccdac; --panel:#e9dec8; --bone:#2b2014; --bone-dim:#54462f; --muted:#7d6d4f; --ink:#2b2014; --bone-rgb:70,52,28; --line-rgb:70,52,28; --line:rgba(70,52,28,0.20); --line-soft:rgba(70,52,28,0.10); --line-strong:rgba(70,52,28,0.40); --jade:#1f7a52; --jade-dim:#3f8a68; --stone:#8f6b1d; --brass:#7a5c1a; --essence:#176f8c; --immstone:#6d3fae; --t1:#6e776e; --t2:#2e7d5a; --t3:#21618f; --t4:#7440a0; --t5:#8f6b1d; --t6:#b04a20; --t7:#b02a22; --t8:#b02468; --t9:#7d22ad; --t10:#8a7a1a; --shadow-rgb:74,54,26; --btn-hi:rgba(255,255,255,0.40); --btn-lo:rgba(70,52,28,0.05); --inset:rgba(70,52,28,0.08); --scrollbar:rgba(70,52,28,0.28); --vignette:rgba(60,40,20,0.16); --on-accent:#f5efe2; } /* porcelain paper tone — cool near-white (Day only) */ [data-theme^="light"][data-paper="porcelain"]{ --bg:#f1f0ec; --bg2:#e9e8e2; --bg3:#dcdbd2; --panel:#edece6; --bone:#1f2126; --bone-dim:#474a52; --muted:#6e7078; --ink:#1f2126; --bone-rgb:40,44,56; --line-rgb:40,44,56; --line:rgba(40,44,56,0.16); --line-soft:rgba(40,44,56,0.07); --line-strong:rgba(40,44,56,0.34); --shadow-rgb:40,44,56; --inset:rgba(40,44,56,0.06); --scrollbar:rgba(40,44,56,0.24); --vignette:rgba(40,44,56,0.12); } /* ============================ NIGHT accents ============================ */ [data-theme="dark-crimson"]{ /* the original Demonic Path look */ --bg:#0a0807; --bg2:#0f0c0b; --bg3:#16110f; --panel:#100d0b; --line-rgb:208,186,160; --line:rgba(208,186,160,0.13); --line-soft:rgba(208,186,160,0.06); --line-strong:rgba(208,186,160,0.26); --blood:#9e1b27; --blood-bright:#c8313c; --blood-deep:#52101a; --blood-dim:#7a2730; --blood-rgb:158,27,39; --blood-bright-rgb:200,49,60; --blood-deep-rgb:82,16,26; --blood-text:#e7a7ad; } [data-theme="dark-azure"]{ --bg:#070a0d; --bg2:#0b0f14; --bg3:#101722; --panel:#0c1016; --bone:#e2e6ea; --bone-dim:#b6c0c8; --muted:#86939e; --ink:#e2e6ea; --bone-rgb:226,230,234; --line-rgb:170,190,210; --line:rgba(170,190,210,0.13); --line-soft:rgba(170,190,210,0.06); --line-strong:rgba(170,190,210,0.26); --blood:#2a6496; --blood-bright:#4f93cd; --blood-deep:#143452; --blood-dim:#2f5675; --blood-rgb:42,100,150; --blood-bright-rgb:79,147,205; --blood-deep-rgb:20,52,82; --blood-text:#aacde8; } [data-theme="dark-gold"]{ --bg:#0b0906; --bg2:#100d08; --bg3:#181307; --panel:#110e09; --line-rgb:215,190,150; --line:rgba(215,190,150,0.13); --line-soft:rgba(215,190,150,0.06); --line-strong:rgba(215,190,150,0.26); --blood:#a37e22; --blood-bright:#d2ab4a; --blood-deep:#54400e; --blood-dim:#7a5f24; --blood-rgb:163,126,34; --blood-bright-rgb:210,171,74; --blood-deep-rgb:84,64,14; --blood-text:#e9d49b; } [data-theme="dark-jade"]{ --bg:#070a08; --bg2:#0b100d; --bg3:#101713; --panel:#0c110e; --bone:#e2e8e0; --bone-dim:#b8c4b6; --muted:#8a988a; --ink:#e2e8e0; --bone-rgb:226,232,224; --line-rgb:180,205,185; --line:rgba(180,205,185,0.13); --line-soft:rgba(180,205,185,0.06); --line-strong:rgba(180,205,185,0.26); --blood:#2f8a5e; --blood-bright:#4ab384; --blood-deep:#15452e; --blood-dim:#2c6048; --blood-rgb:47,138,94; --blood-bright-rgb:74,179,132; --blood-deep-rgb:21,69,46; --blood-text:#a8dcc4; } [data-theme="dark-ink"]{ --bg:#0a0a0a; --bg2:#0f0f0f; --bg3:#161616; --panel:#101010; --line-rgb:200,196,188; --line:rgba(200,196,188,0.13); --line-soft:rgba(200,196,188,0.06); --line-strong:rgba(200,196,188,0.26); --blood:#75706a; --blood-bright:#a39d93; --blood-deep:#36332f; --blood-dim:#56524d; --blood-rgb:117,112,106; --blood-bright-rgb:163,157,147; --blood-deep-rgb:54,51,47; --blood-text:#d2cdc4; } /* ============================ DAY accents (ink-seal strength) ============================ */ [data-theme="light-crimson"]{ --blood:#9a1c26; --blood-bright:#b3303a; --blood-deep:#5e0f17; --blood-dim:#a8636a; --blood-rgb:154,28,38; --blood-bright-rgb:179,48,58; --blood-deep-rgb:94,15,23; --blood-text:#7c161f; } [data-theme="light-azure"]{ --blood:#1d558f; --blood-bright:#2a6cb0; --blood-deep:#103254; --blood-dim:#5f82a8; --blood-rgb:29,85,143; --blood-bright-rgb:42,108,176; --blood-deep-rgb:16,50,84; --blood-text:#174a7e; } [data-theme="light-gold"]{ --blood:#8a6716; --blood-bright:#a07a18; --blood-deep:#4f3a0a; --blood-dim:#a8884a; --blood-rgb:138,103,22; --blood-bright-rgb:160,122,24; --blood-deep-rgb:79,58,10; --blood-text:#6e5212; } [data-theme="light-jade"]{ --blood:#1f6f4c; --blood-bright:#2a8a60; --blood-deep:#103d28; --blood-dim:#5f9a7e; --blood-rgb:31,111,76; --blood-bright-rgb:42,138,96; --blood-deep-rgb:16,61,40; --blood-text:#185c3e; } [data-theme="light-ink"]{ --blood:#44403a; --blood-bright:#2c2925; --blood-deep:#1c1a17; --blood-dim:#8a857c; --blood-rgb:68,64,58; --blood-bright-rgb:44,41,37; --blood-deep-rgb:28,26,23; --blood-text:#36322c; } /* ============================ NEON GLOW (Night only) ============================ */ [data-theme^="dark"][data-glow="neon"] body{ background: radial-gradient(900px 620px at 82% -12%, rgba(var(--blood-rgb),0.20), transparent 66%), radial-gradient(760px 560px at -8% 112%, rgba(var(--blood-rgb),0.10), transparent 70%), var(--bg); } [data-theme^="dark"][data-glow="neon"] #topbar .logo{text-shadow:0 0 14px rgba(var(--blood-rgb),0.9),0 0 30px rgba(var(--blood-rgb),0.5)} [data-theme^="dark"][data-glow="neon"] .pagehead .seal, [data-theme^="dark"][data-glow="neon"] .cs-seal{ box-shadow:0 0 0 5px rgba(var(--blood-rgb),0.12),0 0 26px rgba(var(--blood-rgb),0.6),0 0 48px -6px var(--blood-bright)} [data-theme^="dark"][data-glow="neon"] .pagehead h1{text-shadow:0 0 22px rgba(var(--blood-rgb),0.26)} [data-theme^="dark"][data-glow="neon"] #nav button[data-tab].active{ box-shadow:-2px 0 12px -2px var(--blood-bright), inset 0 0 22px -8px rgba(var(--blood-rgb),0.6)} [data-theme^="dark"][data-glow="neon"] #nav button[data-tab].active .nav-ico{text-shadow:0 0 10px rgba(var(--blood-rgb),0.9)} [data-theme^="dark"][data-glow="neon"] button.primary{ box-shadow:0 0 14px -2px rgba(var(--blood-rgb),0.7), inset 0 0 18px -8px rgba(var(--blood-rgb),0.8); text-shadow:0 0 8px rgba(var(--blood-rgb),0.6)} [data-theme^="dark"][data-glow="neon"] .sec-head .sec-num{text-shadow:0 0 16px rgba(var(--blood-rgb),0.7)} [data-theme^="dark"][data-glow="neon"] .tb-online-dot{box-shadow:0 0 10px var(--jade),0 0 16px var(--jade)} /* ============================ Day legibility — dark-orb text ============================ */ /* The aperture orb (.ap-liquid / .ap-core) stays dark in EVERY theme — it's a mystical visualization — so its text must stay light even on Day themes, where --bone is dark ink. */ [data-theme^="light"] .ap-core b{color:#f3ece0} [data-theme^="light"] .ap-core i{color:rgba(243,236,224,0.80)} [data-theme^="light"] .ap-core em{color:#e7d8a4} [data-theme^="light"] .ap-net{background:rgba(8,10,12,0.62)!important;border-color:rgba(255,255,255,0.16)!important} [data-theme^="light"] .ap-net.up{color:#57cf95!important} [data-theme^="light"] .ap-net.dn{color:#f08a7e!important} /* the character portrait base (.cs-portrait) is also a dark radial — keep its big glyph light */ [data-theme^="light"] .cs-portrait .glyph{color:#f1e9da} /* ============================ theme crossfade (~300ms) ============================ */ .theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after{ transition:background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, fill .3s ease !important; } /* ============================ Settings → theme picker ============================ */ .modal.narrow.settings{width:436px} .set-rule{height:1px;background:var(--line);border:0;margin:18px 0 14px} .th-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:13px} .th-head span:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)} .th-head .th-cjk{font-family:var(--cjk);font-size:13px;color:var(--stone);letter-spacing:.1em} .th-cols{display:grid;grid-template-columns:1fr 1fr;gap:11px} .th-col{display:flex;flex-direction:column;gap:6px} .th-colh{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:8.5px;letter-spacing:.24em; text-transform:uppercase;color:var(--muted);margin-bottom:2px} .th-colh .g{font-family:var(--cjk);font-size:12px;color:var(--stone)} .th-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid var(--line); background:var(--bg3);padding:6px 9px;border-radius:2px;letter-spacing:0;text-transform:none;font-size:inherit; font-family:var(--serif);transition:.14s ease} .th-row:hover{border-color:var(--line-strong);background:var(--bg3)} .th-row.active{border-color:var(--blood-bright);background:linear-gradient(90deg,rgba(var(--blood-rgb),0.14),var(--bg3)); box-shadow:0 0 0 1px rgba(var(--blood-rgb),0.18) inset} .th-sw{display:flex;gap:3px;flex:none} .th-sw i{display:block;width:11px;height:11px;border:1px solid rgba(var(--shadow-rgb),0.35);border-radius:1px} .th-name{flex:1;min-width:0;font-weight:600;font-size:13px;color:var(--bone);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;letter-spacing:.02em} .th-glyph{font-family:var(--cjk);font-size:13px;color:var(--muted);flex:none} .th-row.active .th-glyph{color:var(--blood-text)} .th-seglbl{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:14px 0 7px} .th-seglbl span{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)} .th-seglbl i{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--muted)} .th-seg{display:flex;gap:0} .th-seg button{flex:1;border-radius:0;font-size:10px;padding:8px 8px;min-width:0;letter-spacing:.08em} .th-seg button:first-child{border-right:none} .th-seg button.on{border-color:var(--blood-bright);color:var(--blood-text);background:rgba(var(--blood-rgb),0.12);position:relative;z-index:1} .th-note{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;line-height:1.7;color:var(--muted);margin-top:14px} .th-note b{color:var(--bone-dim)}