/* 介面主題「月下霧海」（docs/42）— 由 tools/build_theme_moon.js 產生，不要手改；改 tools/theme_moon_src.js 後重新產生。
 * 只有 <html data-ui="moon"> 時生效（設定 → 介面風格）。預設介面「燈下古卷」在 style.css，完全不受影響。 */
:root:where([data-ui="moon"]) { --bg: #161e2b; --bg2: #1b2433; --panel: #222c3c; --panel2: #2a3547; --well: rgba(12,18,30,.62); --line: #344156; --line2: #4a5a72; --ink: #0a0f17; --brass: #f2dfa6; --brass2: #fff1c8; --brassDark: #7d6f4a; --text: #e9eef6; --dim: #9fadc0; --dim2: #6f7d91; --magic: #a9d8e8; --exp: #bfe6f2; --hp: #e07a86; }

/* ---- 舊版寫死色 → 月下霧海（161 條，自動從 style.css 換色） ---- */
:root:where([data-ui="moon"]) { --bg2: #18202d; --well: #10161f; --brass2: #f2dfa6; }
:where(html[data-ui="moon"]) body { background-image: radial-gradient(ellipse at 50% -10%, rgba(242,223,166,.06), transparent 60%); }
:where(html[data-ui="moon"]) .btn { color: #18202c; background: #ecebe4; box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 0 #9aa3b2; }
:where(html[data-ui="moon"]) .btn:active { box-shadow: inset 0 1px 0 #9aa3b2; }
:where(html[data-ui="moon"]) .card { box-shadow: inset 0 1px 0 rgba(230,238,255,.04), 0 1px 0 var(--ink); }
:where(html[data-ui="moon"]) .chip.fr-chip { color: #fff0c4; border-color: #e0c77a; }
:where(html[data-ui="moon"]) #bottomnav { background: linear-gradient(180deg, #1f2938 0, #18202d 18%, #10161f 100%); }
:where(html[data-ui="moon"]) #bottomnav::before { background: linear-gradient(90deg, transparent 2%, rgba(242,223,166,.24) 18%, rgba(242,223,166,.08) 50%, rgba(242,223,166,.24) 82%, transparent 98%); }
:where(html[data-ui="moon"]) .nav-btn { --nav-glow: rgba(242,223,166,.13); color: #9aa6b8; }
:where(html[data-ui="moon"]) .nav-btn.on .nav-icon::before { border-color: rgba(242,223,166,.28); }
:where(html[data-ui="moon"]) .nav-hero { --nav-accent: #f2dfa6; --nav-glow: rgba(242,223,166,.17); }
:where(html[data-ui="moon"]) .re-grid b { color: var(--gold, #e0c77a); }
:where(html[data-ui="moon"]) .title-panel { box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px rgba(242,223,166,.08), 0 16px 48px rgba(0,0,0,.6); }
:where(html[data-ui="moon"]) .affix .stars.q5 { color: #f5e2a8; text-shadow: 0 0 4px rgba(245,226,168,.6); }
:where(html[data-ui="moon"]) .boss-affix { color: #f5e2a8; }
:where(html[data-ui="moon"]) .tag.bossaf { color: #f5e2a8; }
:where(html[data-ui="moon"]) .slot .uq { color: #f5e2a8; }
:where(html[data-ui="moon"]) .slot.uniq-slot { box-shadow: 0 0 8px var(--glow, #ffa53a), inset 0 0 6px rgba(245,226,168,.35); }
:where(html[data-ui="moon"]) .cons .boss-mark { color: #f5e2a8; }
:where(html[data-ui="moon"]) .uniq-flash .pillar { background: linear-gradient(90deg, transparent, rgba(245,226,168,.55), rgba(255,255,230,.9), rgba(245,226,168,.55), transparent); }
:where(html[data-ui="moon"]) .uniq-banner { border: 2px solid #f5e2a8; box-shadow: 0 0 40px rgba(245,226,168,.6); }
:where(html[data-ui="moon"]) .uniq-banner small { color: #f5e2a8; }
:where(html[data-ui="moon"]) .uniq-banner b { color: #fff4d6; }
:where(html[data-ui="moon"]) .stage-top .chip.snd.need { color: #f5e2a8; border-color: #f5e2a8; }
:where(html[data-ui="moon"]) .chip.mail.new { color: #f5e2a8; border-color: #f5e2a8; }
:where(html[data-ui="moon"]) .gm-dome i:nth-child(4) { background: #ecd48a; }
:where(html[data-ui="moon"]) .gm-moon { color: #fff4d6; }
:where(html[data-ui="moon"]) .gm-base span { background: #161e2b; }
:where(html[data-ui="moon"]) .pity-bar i { background: linear-gradient(90deg, #c08bff, #ecd48a); }
:where(html[data-ui="moon"]) .gacha-btns .gfree { background: linear-gradient(#fff4d6, #f2dfa6); }
:where(html[data-ui="moon"]) .gb-new { color: #ecd48a; }
:where(html[data-ui="moon"]) .av-wrap.t-master::before { border: 2px solid #f5e2a8; box-shadow: 0 0 12px #ff9f43, inset 0 0 6px rgba(245,226,168,.6); }
:where(html[data-ui="moon"]) .av-wrap.t-master::after { background: #f5e2a8; }
:where(html[data-ui="moon"]) .enh-fx { --c: #f5e2a8; }
:where(html[data-ui="moon"]) .enh-fx.myth .enh-card b { background: linear-gradient(90deg, #ff4d5e, #f5e2a8, #8fe39a, #6fb4ff, #c08bff); }
:where(html[data-ui="moon"]) .gc-new { color: #ecd48a; }
:where(html[data-ui="moon"]) .g-flash b { text-shadow: 0 0 12px #ecd48a, 0 2px 0 #000; }
:where(html[data-ui="moon"]) .chip.snd.need { color: #f5e2a8; border-color: #f5e2a8; }
:where(html[data-ui="moon"]) .chest-fx { --c: #f5e2a8; }
:where(html[data-ui="moon"]) .cf-coins i { background: #f5e2a8; }
:where(html[data-ui="moon"]) .wb-pop { color: #ecd48a; }
:where(html[data-ui="moon"]) .wb-tower span.done { color: #f5e2a8; }
:where(html[data-ui="moon"]) .ar-pop.crit { color: #ecd48a; }
:where(html[data-ui="moon"]) .rp-btn { color: #fff4d6; border-color: #f5e2a8; }
:where(html[data-ui="moon"]) .rb-sky i { background: #fff4d6; box-shadow: 0 0 6px #f5e2a8; }
:where(html[data-ui="moon"]) .rb-head h1 { text-shadow: 0 0 18px #f5e2a8, 0 0 36px rgba(255,180,80,.6), 0 2px 0 #000; }
:where(html[data-ui="moon"]) .rb-unlock { color: #fff4d6; border: 1px solid #f5e2a8; background: rgba(245,226,168,.12); box-shadow: 0 0 16px rgba(245,226,168,.3); }
:where(html[data-ui="moon"]) .rb-cls .cls.on { border-color: #f5e2a8; box-shadow: 0 0 14px rgba(245,226,168,.45), inset 0 0 18px rgba(245,226,168,.15); }
:where(html[data-ui="moon"]) .rb-go { background: linear-gradient(#fff3c8, #f2dfa6); box-shadow: 0 0 16px rgba(245,226,168,.6); }
:where(html[data-ui="moon"]) .rb-flash { background: radial-gradient(circle, #fffbe8, #fff4d6 40%, rgba(255,214,120,.9)); }
:where(html[data-ui="moon"]) a:hover { color: #fff0c4; }
:where(html[data-ui="moon"]) .cd-hero { background: radial-gradient(circle, rgba(242,223,166,.15), transparent 70%); }
:where(html[data-ui="moon"]) .party-strip .pm-n span { color: var(--ink, #e8e6f5); }
:where(html[data-ui="moon"]) .raid-roles em { color: #f5e2a8; }
:where(html[data-ui="moon"]) #raid-ov .raid-top { color: #f5e2a8; }
:where(html[data-ui="moon"]) .raid-mem .rm { color: var(--ink, #e8e6f5); }
:where(html[data-ui="moon"]) .raid-tbl tr.me td { color: #f5e2a8; }
:where(html[data-ui="moon"]) .tw-hud b { color: #f5e2a8; }
:where(html[data-ui="moon"]) .tw-stairs i { box-shadow: 0 0 8px #f5e2a8; }
:where(html[data-ui="moon"]) .tw-uptext { text-shadow: 0 0 6px #6a4aa8, 0 2px 0 #161e2b; }
:where(html[data-ui="moon"]) .tw-uptext b { color: #fff0c4; }
:where(html[data-ui="moon"]) .tw-now b { color: #f5e2a8; }
:where(html[data-ui="moon"]) #fx-ov .raid-top { color: #f5e2a8; }
:where(html[data-ui="moon"]) #fx-ov .fx-n.pop { color: #fff0c4; }
:where(html[data-ui="moon"]) #fx-ov .raid-mem .rm.me { border-color: #f5e2a8; }
:where(html[data-ui="moon"]) .vil-bar .vil-name { color: #fff0c4; }
:where(html[data-ui="moon"]) .mkt-row b.num { color: #f5e2a8; }
:where(html[data-ui="moon"]) .bag-items .bag-grid .ic { background: #1b2433; border: 1px solid #4a5a72; }
:where(html[data-ui="moon"]) .bag-items .bag-grid .ic:hover { border-color: #b8bfca; }
:where(html[data-ui="moon"]) .bag-items .bag-grid .ic i.exp { color: #f5e2a8; }
:where(html[data-ui="moon"]) .shop-sec { color: #f5e2a8; }
:where(html[data-ui="moon"]) #net-block { color: #e8e6f5; }
:where(html[data-ui="moon"]) #net-block b { color: #f5e2a8; }
:where(html[data-ui="moon"]) #reload-ov b, :where(html[data-ui="moon"]) #net-block b { color: #f5e2a8; }
:where(html[data-ui="moon"]) .spin { border: 4px solid #4a5a72; border-top-color: #f5e2a8; }
:where(html[data-ui="moon"]) #fx-ov .fx-sub b { color: #f5e2a8; }
:where(html[data-ui="moon"]) #fx-ov .raid-mem .rm { color: #e8e6f5; }
:where(html[data-ui="moon"]) #fx-ov .raid-mem .rm span, :where(html[data-ui="moon"]) #fx-ov .raid-mem .rm b { color: #e8e6f5; }
:where(html[data-ui="moon"]) #fx-ov .raid-mem .rm.me span { color: #f5e2a8; }
:where(html[data-ui="moon"]) .wb-rot-h b { color: #f5e2a8; }
:where(html[data-ui="moon"]) .wb-tips b { color: #f5e2a8; }
:where(html[data-ui="moon"]) .wb-board-h b { color: #f5e2a8; }
:where(html[data-ui="moon"]) .wb-rew-h b { color: #f5e2a8; }
:where(html[data-ui="moon"]) .wb-rew dd { color: #e8e6f5; }
:where(html[data-ui="moon"]) .vil-todo { color: #e8e6f5; }
:where(html[data-ui="moon"]) .vil-log-h { color: #fff0c4; }
:where(html[data-ui="moon"]) .vil-log .vl.me b { color: #f5e2a8; }
:where(html[data-ui="moon"]) .smith-plus { color: #fff0c4; }
:where(html[data-ui="moon"]) .qk-cfg-h b { color: #f5e2a8; }
:where(html[data-ui="moon"]) .qk-slot { color: #e8e6f5; }
:where(html[data-ui="moon"]) .qk-slot.empty b { color: #f5e2a8; }
:where(html[data-ui="moon"]) .qk-opt { color: #e8e6f5; }
:where(html[data-ui="moon"]) .more-list .more-item { color: #e8e6f5; }
:where(html[data-ui="moon"]) .more-list .mi-t b { color: #fff0c4; }
:where(html[data-ui="moon"]) .race-top b { color: #f5e2a8; }
:where(html[data-ui="moon"]) .race-odds { color: #f5e2a8; }
:where(html[data-ui="moon"]) .f-b { color: #fff0c4; }
:where(html[data-ui="moon"]) .item-src b { color: #f5e2a8; }
:where(html[data-ui="moon"]) .soc-help summary { color: #f5e2a8; }
:where(html[data-ui="moon"]) .lb-tabs button.on { color: #161e2b; border-color: #f5e2a8; }
:where(html[data-ui="moon"]) .lb-row.me { border-color: #f5e2a8; box-shadow: inset 0 0 0 1px #f5e2a855; }
:where(html[data-ui="moon"]) .lb-rk.m1 { background: linear-gradient(180deg, #fff0c4, #c8902a); }
:where(html[data-ui="moon"]) .lb-val b { color: #f5e2a8; }
:where(html[data-ui="moon"]) .lb-pod.p1 { border-color: #f5e2a8; }
:where(html[data-ui="moon"]) .lb-pv { color: #f5e2a8; }
:where(html[data-ui="moon"]) .tip-t i { color: #f5e2a8; }
:where(html[data-ui="moon"]) #tip-pop { border: 1px solid #f5e2a8; }
:where(html[data-ui="moon"]) .pop-bar b { color: #fff0c4; }
:where(html[data-ui="moon"]) .ld-ring { background: conic-gradient(from 0deg, transparent 0 55%, rgba(245,226,168,.15) 65%, #f5e2a8 92%, #fff8d8 100%); filter: drop-shadow(0 0 6px rgba(245,226,168,.6)); }
:where(html[data-ui="moon"]) .ld-moon { background: radial-gradient(circle at 38% 35%, #fffbe8, #fff0c4 45%, #c8902a 100%); }
:where(html[data-ui="moon"]) .ld b { color: #fff0c4; text-shadow: 0 0 12px rgba(245,226,168,.35); }
:where(html[data-ui="moon"]) .ld-bar i { background: linear-gradient(90deg, transparent, #f5e2a8, #fff8d8, #f5e2a8, transparent); }
:where(html[data-ui="moon"]) .update-bar { border-bottom: 1px solid #f5e2a888 !important; }
:where(html[data-ui="moon"]) .update-bar .ub-t b { color: #fff0c4; }
:where(html[data-ui="moon"]) .pick-row.cur { border-color: #f5e2a8; }
:where(html[data-ui="moon"]) .gp-bonus { color: #fff0c4 !important; }
:where(html[data-ui="moon"]) .gp-first { border: 1px solid #f5e2a8; }
:where(html[data-ui="moon"]) .gp-first b { color: #fff0c4; }
:where(html[data-ui="moon"]) .st-hd b { color: #fff0c4; }
:where(html[data-ui="moon"]) .st-month.on { border-color: #f5e2a8; }
@media (min-width: 900px) {
:where(html[data-ui="moon"]) .tabs button.tm { background: linear-gradient(180deg, #2a221a, #18202d) !important; }
:where(html[data-ui="moon"]) .tabs button.tm.on { color: #fff0c4; box-shadow: inset 0 2px 0 #f5e2a855, 0 0 10px rgba(245,226,168,.15); }
:where(html[data-ui="moon"]) .tabs button.ts.on { color: #fff0c4; }
}
:where(html[data-ui="moon"]) .el-react-h b { color: #f5e2a8; }
:where(html[data-ui="moon"]) .stage-bars .pot-chip .pp i { color: #b8bfca; }
:where(html[data-ui="moon"]) .pp-opt { background: #1b2433; border: 1px solid #4a5a72; }
:where(html[data-ui="moon"]) .pp-opt.on { border-color: #b8bfca; }
:where(html[data-ui="moon"]) .slot.lockd { border-color: #4a5a72; }
:where(html[data-ui="moon"]) .comp-tile { background: #1b2433; border: 1px solid #4a5a72; }
:where(html[data-ui="moon"]) .comp-tile:hover { border-color: #b8bfca; }
:where(html[data-ui="moon"]) .comp-tile.on { border-color: #b8bfca; }
:where(html[data-ui="moon"]) .comp-tile .ct-l { color: #b8bfca; }
:where(html[data-ui="moon"]) .tf-cell .tf-form { color: #b8bfca; }
:where(html[data-ui="moon"]) .tf-forms summary { color: #b8bfca; }
:where(html[data-ui="moon"]) .mkt-pick .sel { outline: 2px solid #f5e2a8; box-shadow: 0 0 8px rgba(245,226,168,.5); }
:where(html[data-ui="moon"]) .mkt-sel { background: #1b2433; border: 1px solid #4a5a72; }
:where(html[data-ui="moon"]) .rep-why label { background: #1b2433; border: 1px solid #4a5a72; }
:where(html[data-ui="moon"]) #st-frq.fr-chip { background: linear-gradient(180deg, #fff0c4, #e9a93a); box-shadow: 0 0 0 2px #161e2b, 0 0 14px rgba(255,205,90,.85); }
:where(html[data-ui="moon"]) .vt-row i { color: #e0c77a; }
:where(html[data-ui="moon"]) .cr-cell.main { border-color: #e0c77a; }
:where(html[data-ui="moon"]) .cr-plus { color: #e0c77a; }
:where(html[data-ui="moon"]) .cpv.k-frame .cpv-av { box-shadow: 0 0 0 1px #161e2b, inset 0 0 0 1px rgba(0,0,0,.6), 0 0 8px var(--cc); }
:where(html[data-ui="moon"]) .gc-tier { background: color-mix(in srgb, var(--tc) 22%, #161e2b); }
:where(html[data-ui="moon"]) .box-bar { border: 1px solid #e0c77a; }
:where(html[data-ui="moon"]) .oa-chip b { color: #fff0c4; }
:where(html[data-ui="moon"]) .fx-stats b { color: #fff0c4; }
:where(html[data-ui="moon"]) .fx-rk { color: #e8e6f5; }
:where(html[data-ui="moon"]) .fx-rw { color: #e8e6f5; }
:where(html[data-ui="moon"]) .rbt-h { color: #f5e2a8; }
:where(html[data-ui="moon"]) .rbt-b.on { border-color: #f5e2a8; box-shadow: inset 0 0 0 1px #f5e2a8; }
:where(html[data-ui="moon"]) .slot.myth-slot { background: radial-gradient(circle at 50% 46%, rgba(255,77,94,.28) 0, transparent 62%) padding-box, linear-gradient(var(--well), var(--well)) padding-box, linear-gradient(120deg, #ff4d5e, #f5e2a8, #ff8af0, #b56cff, #ff4d5e) border-box; }
:where(html[data-ui="moon"]) .slot.myth-slot::after { background: radial-gradient(circle at 12% 14%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 86% 80%, #f5e2a8 0 1.5px, transparent 2.5px), radial-gradient(circle at 84% 16%, #ff8af0 0 1px, transparent 2px); }
:where(html[data-ui="moon"]) .myth-name { background: linear-gradient(90deg, #ff4d5e, #f5e2a8, #ff8af0, #ff4d5e); }
:where(html[data-ui="moon"]) .ab-now { color: #f5e2a8; }
:where(html[data-ui="moon"]) .reso-line { color: #f5e2a8; }
:where(html[data-ui="moon"]) .card.reso.on h3 { color: #f5e2a8; }
:where(html[data-ui="moon"]) .fc-card { border-color: #f2dfa688; }
:where(html[data-ui="moon"]) .fc-card { border-color: #f2dfa688; }
:where(html[data-ui="moon"]) .av-frame.fx-gold { background-image: linear-gradient(110deg, #8a5a14 0%, #f5e2a8 30%, #fff8dc 38%, #f5e2a8 46%, #a8741e 60%, #f5e2a8 80%, #8a5a14 100%); }
:where(html[data-ui="moon"]) .cf-card.star { background: linear-gradient(var(--panel, #1a1526), var(--panel, #1a1526)) padding-box, linear-gradient(120deg, #ff6f9f, #f5e2a8, #7dffa8, #6fd6ff, #b48cff, #ff6f9f) border-box; }
:where(html[data-ui="moon"]) .cf-card.on { outline: 2px solid #f5e2a8; }

/* ---- 玻璃、背景與各畫面元素（95 條） ---- */
html:where([data-ui="moon"]) body.sheet-open #game .right, html:where([data-ui="moon"]) body { background-color: #141c29; background-image:
  radial-gradient(circle at 82% 7%, #fbf4dc 0 15px, rgba(251,244,220,.0) 16px), radial-gradient(circle at calc(82% - 5px) calc(7% - 4px), rgba(200,190,160,.35) 0 3px, transparent 4px),
  radial-gradient(circle at 82% 7%, rgba(255,246,220,.28) 0 30px, rgba(255,246,220,.10) 31px 70px, transparent 140px),
  radial-gradient(1px 1px at 12% 14%, rgba(255,255,255,.8) 50%, transparent 51%), radial-gradient(1px 1px at 33% 6%, rgba(255,255,255,.6) 50%, transparent 51%), radial-gradient(1.4px 1.4px at 58% 18%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 70% 28%, rgba(255,255,255,.5) 50%, transparent 51%),
  radial-gradient(42% 7% at 18% 46%, rgba(214,224,240,.16), transparent 70%), radial-gradient(36% 6% at 78% 40%, rgba(214,224,240,.12), transparent 70%),
  radial-gradient(30% 9% at 10% 74%, rgba(225,232,245,.22), transparent 72%), radial-gradient(34% 10% at 42% 78%, rgba(225,232,245,.20), transparent 72%), radial-gradient(30% 9% at 78% 72%, rgba(225,232,245,.20), transparent 72%),
  radial-gradient(120% 30% at 50% 100%, rgba(220,228,242,.30), transparent 70%),
  linear-gradient(180deg, #0f1622 0%, #18212f 40%, #232d3d 75%, #2c3646 100%); background-attachment: fixed; }
html:where([data-ui="moon"]) body .left, html:where([data-ui="moon"]) body .right { background: transparent; }
html:where([data-ui="moon"]) body .panel { background-image: radial-gradient(1.6px 1.6px at 30px 70px, rgba(255,248,225,.7) 50%, transparent 100%), radial-gradient(1.2px 1.2px at 140px 30px, rgba(255,248,225,.6) 50%, transparent 100%), radial-gradient(2px 2px at 90px 160px, rgba(255,248,225,.5) 50%, transparent 100%); background-size: 220px 220px; animation: fwMotes 60s linear infinite; }
@keyframes fwMotes { to { background-position: 0 -880px, 0 -880px, 0 -880px; } }
@media (prefers-reduced-motion: reduce) {
html:where([data-ui="moon"]) body .panel { animation: none; }
}
:where(html[data-ui="moon"]) .card { background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.034999999999999996) 40%, rgba(255,255,255,0.020000000000000004) 62%, rgba(190,210,240,0.06999999999999999) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-backdrop-filter: blur(18px) saturate(1.5) brightness(1.06); backdrop-filter: blur(18px) saturate(1.5) brightness(1.06); border: 1px solid rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.34); border-left-color: rgba(255,255,255,.22); border-radius: 20px; box-shadow: 0 14px 40px rgba(3,7,16,.42), inset 0 1px 1px rgba(255,255,255,.28), inset 0 -12px 24px rgba(170,190,225,.06); overflow: hidden; }
:where(html[data-ui="moon"]) .card::before { content: ''; position: absolute; left: -10%; top: -40%; width: 70%; height: 90%; background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.14), transparent 62%); pointer-events: none; transform: rotate(-12deg); }
:where(html[data-ui="moon"]) .card::after { content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: linear-gradient(90deg, #9be7ff, #c7b8ff 25%, #ffc6e0 50%, #ffe3b0 75%, #b8ffe0); opacity: .8; pointer-events: none; }
:where(html[data-ui="moon"]) .card > * { position: relative; }
:where(html[data-ui="moon"]) .card h3 { color: #fff4d6; letter-spacing: 2px; text-shadow: 0 0 14px rgba(255,241,200,.35); }
:where(html[data-ui="moon"]) .card h3::before { width: 12px; height: 12px; border-radius: 50%; transform: none; background: radial-gradient(circle, #fff1c8 0 3px, rgba(255,241,200,.35) 3.5px 4.5px, transparent 5.5px); }
:where(html[data-ui="moon"]) .panel h2 { background: linear-gradient(180deg, #ffffff, #c9d4e4); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 3px; }
:where(html[data-ui="moon"]) .panel h2::before { content: ''; width: 16px; height: 16px; border-radius: 50%; flex: none; background: radial-gradient(circle at 65% 40%, transparent 5px, #f6eed2 5.5px); filter: drop-shadow(0 0 6px rgba(255,241,200,.6)); }
:where(html[data-ui="moon"]) .panel h2::after { background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(199,184,255,.3), transparent); }
:where(html[data-ui="moon"]) .btn { border-radius: 999px; border: 1px solid rgba(255,255,255,.25); }
:where(html[data-ui="moon"]) .btn:not(.sec):not(.danger):not(.magic) { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(222,228,240,.88) 55%, rgba(200,210,228,.9)); color: #172030; box-shadow: inset 0 1px 0 #fff, inset 0 -2px 6px rgba(150,170,205,.35), 0 0 0 1px rgba(199,184,255,.35), 0 6px 18px rgba(200,214,235,.18); }
:where(html[data-ui="moon"]) .btn.sec { background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.020999999999999998) 40%, rgba(255,255,255,0.012) 62%, rgba(190,210,240,0.041999999999999996) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-backdrop-filter: blur(18px) saturate(1.5) brightness(1.06); backdrop-filter: blur(18px) saturate(1.5) brightness(1.06); border: 1px solid rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.34); border-left-color: rgba(255,255,255,.22); border-radius: 999px; box-shadow: 0 14px 40px rgba(3,7,16,.42), inset 0 1px 1px rgba(255,255,255,.28), inset 0 -12px 24px rgba(170,190,225,.06); color: #e9eef6; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
:where(html[data-ui="moon"]) .seg { background: rgba(10,16,28,.35); border-radius: 999px; padding: 3px; border: 1px solid rgba(255,255,255,.1); }
:where(html[data-ui="moon"]) .seg-b { border-radius: 999px; }
:where(html[data-ui="moon"]) .seg-b.on { background: linear-gradient(180deg, #fff, #dfe5f0); color: #172030; box-shadow: 0 0 0 1px rgba(199,184,255,.4), 0 0 14px rgba(255,255,255,.18); }
:where(html[data-ui="moon"]) .tag { border-radius: 999px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:where(html[data-ui="moon"]) .hud, :where(html[data-ui="moon"]) .stage-bars, :where(html[data-ui="moon"]) .feed-tabs, :where(html[data-ui="moon"]) .feed-in { background: rgba(14,20,32,.38); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
:where(html[data-ui="moon"]) .avatar { border-radius: 50%; border-color: rgba(255,241,200,.6); box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 0 16px rgba(255,241,200,.25); }
:where(html[data-ui="moon"]) .bar { height: 12px; background: rgba(8,12,22,.5); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
:where(html[data-ui="moon"]) .bar > i { border-radius: 999px; background-image: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.08) 55%, transparent); }
:where(html[data-ui="moon"]) .feed-in input { border-radius: 999px; background: rgba(8,12,22,.45); border-color: rgba(255,255,255,.14); }
:where(html[data-ui="moon"]) .feed-tabs button.on { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); border-radius: 10px 10px 0 0; }
:where(html[data-ui="moon"]) .doll-stage { overflow: visible; }
:where(html[data-ui="moon"]) .doll-stage::before { content: ''; position: absolute; left: 50%; top: 42%; width: 128px; height: 128px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,246,220,.30) 0 40%, rgba(255,246,220,.10) 58%, transparent 70%); box-shadow: 0 0 50px rgba(255,241,200,.12); }
:where(html[data-ui="moon"]) .doll-stage::after { content: ''; position: absolute; left: 50%; bottom: 18%; width: 96px; height: 18px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse, rgba(255,255,255,.28), rgba(199,184,255,.10) 55%, transparent 70%); }
:where(html[data-ui="moon"]) .doll-stage > * { position: relative; z-index: 1; }
:where(html[data-ui="moon"]) .slot { border-radius: 14px; border: 1px solid rgba(255,255,255,.13); border-top-color: rgba(255,255,255,.28); background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--rc, #fff) 22%, transparent) 0, transparent 62%), linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 50%, rgba(190,210,240,.06)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 1px rgba(255,255,255,.2), 0 4px 12px rgba(3,7,16,.3); }
:where(html[data-ui="moon"]) .slot.empty { background: radial-gradient(circle at 60% 42%, transparent 9px, rgba(255,255,255,.07) 9.5px 10.5px, transparent 11px), linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.01)); }
:where(html[data-ui="moon"]) .slot.rare-glow { box-shadow: inset 0 0 0 1px var(--glow), 0 0 14px color-mix(in srgb, var(--glow) 35%, transparent), inset 0 1px 1px rgba(255,255,255,.2); }
:where(html[data-ui="moon"]) .panel > .card.map-item::before { left: auto; top: 10px; right: 12px; width: 22px; height: 22px; transform: none; border-radius: 50%; filter: drop-shadow(0 0 5px rgba(255,241,200,.45)); }
:where(html[data-ui="moon"]) .panel > .card.map-item:nth-of-type(8n+1)::before { background: radial-gradient(circle at calc(50% + -14px) 50%, #1d2738 0 9px, transparent 9.5px), radial-gradient(circle, #f6eed2 0 9px, transparent 9.5px); }
:where(html[data-ui="moon"]) .panel > .card.map-item:nth-of-type(8n+2)::before { background: radial-gradient(circle at calc(50% + -9px) 50%, #1d2738 0 9px, transparent 9.5px), radial-gradient(circle, #f6eed2 0 9px, transparent 9.5px); }
:where(html[data-ui="moon"]) .panel > .card.map-item:nth-of-type(8n+3)::before { background: radial-gradient(circle at calc(50% + -4px) 50%, #1d2738 0 9px, transparent 9.5px), radial-gradient(circle, #f6eed2 0 9px, transparent 9.5px); }
:where(html[data-ui="moon"]) .panel > .card.map-item:nth-of-type(8n+4)::before { background: radial-gradient(circle, #f6eed2 0 9px, rgba(255,241,200,.25) 10px 14px, transparent 15px); }
:where(html[data-ui="moon"]) .panel > .card.map-item:nth-of-type(8n+5)::before { background: radial-gradient(circle at calc(50% + 4px) 50%, #1d2738 0 9px, transparent 9.5px), radial-gradient(circle, #f6eed2 0 9px, transparent 9.5px); }
:where(html[data-ui="moon"]) .panel > .card.map-item:nth-of-type(8n+6)::before { background: radial-gradient(circle at calc(50% + 9px) 50%, #1d2738 0 9px, transparent 9.5px), radial-gradient(circle, #f6eed2 0 9px, transparent 9.5px); }
:where(html[data-ui="moon"]) .panel > .card.map-item:nth-of-type(8n+7)::before { background: radial-gradient(circle at calc(50% + 14px) 50%, #1d2738 0 9px, transparent 9.5px), radial-gradient(circle, #f6eed2 0 9px, transparent 9.5px); }
:where(html[data-ui="moon"]) .panel > .card.map-item:nth-of-type(8n+8)::before { background: radial-gradient(circle, transparent 0 8.5px, rgba(244,236,208,.55) 9px 10px, transparent 10.5px); }
:where(html[data-ui="moon"]) .card.map-item.cur { border-color: rgba(255,241,200,.55); box-shadow: 0 0 0 1px rgba(255,241,200,.25), 0 0 28px rgba(255,241,200,.18), 0 14px 40px rgba(3,7,16,.42); }
:where(html[data-ui="moon"]) .card.map-item.locked { filter: saturate(.6); opacity: .8; }
:where(html[data-ui="moon"]) .cx { border-radius: 14px; border: 1px solid rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.26); background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 55%, rgba(190,210,240,.06)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
:where(html[data-ui="moon"]) .cx.unknown::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 40% at 30% 70%, rgba(225,232,245,.22), transparent 70%), radial-gradient(70% 35% at 80% 40%, rgba(225,232,245,.16), transparent 70%); }
:where(html[data-ui="moon"]) .modal-bg { background: rgba(8,12,22,.45); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
:where(html[data-ui="moon"]) .modal { background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.041999999999999996) 40%, rgba(255,255,255,0.024) 62%, rgba(190,210,240,0.08399999999999999) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-backdrop-filter: blur(18px) saturate(1.5) brightness(1.06); backdrop-filter: blur(18px) saturate(1.5) brightness(1.06); border: 1px solid rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.34); border-left-color: rgba(255,255,255,.22); border-radius: 26px; box-shadow: 0 14px 40px rgba(3,7,16,.42), inset 0 1px 1px rgba(255,255,255,.28), inset 0 -12px 24px rgba(170,190,225,.06); position: relative; }
:where(html[data-ui="moon"]) .modal::before { content: ''; position: absolute; left: 50%; top: -60px; width: 220px; height: 120px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(255,246,220,.22), transparent 65%); pointer-events: none; }
:where(html[data-ui="moon"]) .modal header { background: transparent; border-bottom: 1px solid rgba(255,255,255,.10); }
:where(html[data-ui="moon"]) .modal header h3 { color: #fff4d6; text-shadow: 0 0 12px rgba(255,241,200,.35); }
:where(html[data-ui="moon"]) #bottomnav { left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); height: calc(var(--nav-h) - 8px); padding: 2px 6px; border-radius: 26px; background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.034999999999999996) 40%, rgba(255,255,255,0.020000000000000004) 62%, rgba(190,210,240,0.06999999999999999) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-backdrop-filter: blur(18px) saturate(1.5) brightness(1.06); backdrop-filter: blur(18px) saturate(1.5) brightness(1.06); border: 1px solid rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.34); border-left-color: rgba(255,255,255,.22); border-radius: 26px; box-shadow: 0 14px 40px rgba(3,7,16,.42), inset 0 1px 1px rgba(255,255,255,.28), inset 0 -12px 24px rgba(170,190,225,.06); }
:where(html[data-ui="moon"]) #bottomnav::before { left: 26px; right: 26px; top: 0; height: 1px; background: linear-gradient(90deg, #9be7ff, #c7b8ff 25%, #ffc6e0 50%, #ffe3b0 75%, #b8ffe0); opacity: .8; }
:where(html[data-ui="moon"]) .nav-btn::after { display: none; }
:where(html[data-ui="moon"]) .nav-btn { min-height: 62px; }
:where(html[data-ui="moon"]) .nav-icon { border-radius: 50%; clip-path: none; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
:where(html[data-ui="moon"]) .nav-icon::before { clip-path: none; border-radius: 50%; border-color: rgba(255,255,255,.08); }
:where(html[data-ui="moon"]) .nav-btn.on { background: none; color: #fff4d6; }
:where(html[data-ui="moon"]) .nav-btn.on::before { top: auto; bottom: 2px; left: 40%; right: 40%; height: 3px; border-radius: 3px; background: #fff1c8; box-shadow: 0 0 8px rgba(255,241,200,.8); }
:where(html[data-ui="moon"]) .nav-btn.on .nav-icon { border-color: rgba(255,241,200,.6); box-shadow: 0 0 0 3px rgba(255,241,200,.08), 0 0 18px rgba(255,241,200,.35); }
html.fx-lite:where([data-ui="moon"]) .panel { animation: none; background-image: none; }
html.fx-lite:where([data-ui="moon"]) .card, html.fx-lite:where([data-ui="moon"]) .modal, html.fx-lite:where([data-ui="moon"]) #bottomnav, html.fx-lite:where([data-ui="moon"]) .slot, html.fx-lite:where([data-ui="moon"]) .cx, html.fx-lite:where([data-ui="moon"]) .hud, html.fx-lite:where([data-ui="moon"]) .stage-bars, html.fx-lite:where([data-ui="moon"]) .feed-tabs, html.fx-lite:where([data-ui="moon"]) .feed-in, html.fx-lite:where([data-ui="moon"]) .tag, html.fx-lite:where([data-ui="moon"]) .modal-bg { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.fx-lite:where([data-ui="moon"]) .card, html.fx-lite:where([data-ui="moon"]) .modal, html.fx-lite:where([data-ui="moon"]) #bottomnav { background-color: rgba(30,40,56,.94); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:where(html[data-ui="moon"]) .card, :where(html[data-ui="moon"]) .modal, :where(html[data-ui="moon"]) #bottomnav { background-color: rgba(30,40,56,.94); }
:where(html[data-ui="moon"]) .hud, :where(html[data-ui="moon"]) .stage-bars, :where(html[data-ui="moon"]) .feed-tabs, :where(html[data-ui="moon"]) .feed-in { background-color: rgba(20,28,41,.92); }
}
:where(html[data-ui="moon"]) .modal-bg { background: rgba(6,10,18,.82); }
:where(html[data-ui="moon"]) .modal { background-color: rgb(28,37,52); }
:where(html[data-ui="moon"]) #bottomnav { background-color: rgb(30,39,54); }
:where(html[data-ui="moon"]) body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 19; pointer-events: none; background: linear-gradient(180deg, rgba(20,28,41,0) 0, rgb(20,28,41) 10px); }
@media (min-width: 900px) {
:where(html[data-ui="moon"]) body::after { display: none; }
}
:where(html[data-ui="moon"]) .tnode { border-radius: 12px; border: 1px solid rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.24); background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 55%, rgba(190,210,240,.05)); box-shadow: inset 0 1px 1px rgba(255,255,255,.12); }
:where(html[data-ui="moon"]) .tnode.on { border-color: rgba(255,241,200,.6); background: linear-gradient(160deg, rgba(255,241,200,.16), rgba(255,255,255,.03) 60%); box-shadow: 0 0 12px rgba(255,241,200,.15), inset 0 1px 1px rgba(255,255,255,.2); }
:where(html[data-ui="moon"]) .tnode.on small { color: #fff1c8; }
:where(html[data-ui="moon"]) .tnode.core { border-style: double; border-width: 3px; border-color: rgba(199,184,255,.55); }
:where(html[data-ui="moon"]) .talent-col { border-radius: 18px; }
html:where([data-ui="moon"]) body { background-image:
  radial-gradient(1px 1px at 12% 14%, rgba(255,255,255,.8) 50%, transparent 51%), radial-gradient(1px 1px at 33% 6%, rgba(255,255,255,.6) 50%, transparent 51%), radial-gradient(1.4px 1.4px at 58% 18%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 70% 28%, rgba(255,255,255,.5) 50%, transparent 51%),
  radial-gradient(30% 9% at 10% 74%, rgba(225,232,245,.18), transparent 72%), radial-gradient(34% 10% at 42% 78%, rgba(225,232,245,.16), transparent 72%), radial-gradient(30% 9% at 78% 72%, rgba(225,232,245,.16), transparent 72%),
  linear-gradient(180deg, #0f1622 0%, #18212f 40%, #232d3d 75%, #2c3646 100%); }
html:where([data-ui="moon"]) body.sheet-open #game .right { background-position: 0 0; }
:where(html[data-ui="moon"]) .skillbar, :where(html[data-ui="moon"]) .quickbar { background: rgba(14,20,32,.38); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid rgba(255,255,255,.08); }
:where(html[data-ui="moon"]) .skillbar .sk { border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.2), 0 3px 8px rgba(3,7,16,.35); }
:where(html[data-ui="moon"]) .skillbar .sk i { left: 0; right: 0; top: 0; max-height: 100%; background: rgba(8,12,22,.65); }
:where(html[data-ui="moon"]) .quickbar .qk { border-radius: 12px; border-color: rgba(255,255,255,.14); border-top-color: rgba(255,255,255,.28); background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 60%); box-shadow: inset 0 1px 1px rgba(255,255,255,.15); }
:where(html[data-ui="moon"]) .quickbar .qk.on { border-color: rgba(143,227,154,.7); box-shadow: 0 0 10px rgba(143,227,154,.35); }
:where(html[data-ui="moon"]) .log { background: rgba(14,20,32,.38); border-bottom-color: rgba(255,255,255,.08); }
@media (max-width: 899px) {
:where(html[data-ui="moon"]) #game .left .log { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent); padding-bottom: 20px; }
}
html:where([data-ui="moon"]) body, html:where([data-ui="moon"]) body.sheet-open #game .right { background-attachment: scroll; }
@media (max-width: 899px) {
html:where([data-ui="moon"]) body .panel { animation: none; background-image: none; }
:where(html[data-ui="moon"]) body.sheet-open #game .right::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: calc(100% + 220px); z-index: -1; pointer-events: none; will-change: transform; background-image: radial-gradient(1.6px 1.6px at 30px 70px, rgba(255,248,225,.7) 50%, transparent 100%), radial-gradient(1.2px 1.2px at 140px 30px, rgba(255,248,225,.6) 50%, transparent 100%), radial-gradient(2px 2px at 90px 160px, rgba(255,248,225,.5) 50%, transparent 100%); background-size: 220px 220px; animation: fwMotesT 15s linear infinite; }
html.fx-lite:where([data-ui="moon"]) body.sheet-open #game .right::before { display: none; }
}
@keyframes fwMotesT { to { transform: translate3d(0, -220px, 0); } }
@media (prefers-reduced-motion: reduce) {
:where(html[data-ui="moon"]) body.sheet-open #game .right::before { animation: none; }
}
:where(html[data-ui="moon"]) #game .right .card, :where(html[data-ui="moon"]) #game .right .btn.sec, :where(html[data-ui="moon"]) #game .right .slot, :where(html[data-ui="moon"]) #game .right .tag, :where(html[data-ui="moon"]) #game .right .cx, :where(html[data-ui="moon"]) #game .right .tnode, :where(html[data-ui="moon"]) .modal .card, :where(html[data-ui="moon"]) .modal .btn.sec, :where(html[data-ui="moon"]) .modal .slot, :where(html[data-ui="moon"]) .modal .tag, :where(html[data-ui="moon"]) .modal .cx { -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(html[data-ui="moon"]) #game .right .card, :where(html[data-ui="moon"]) .modal .card { background-color: rgba(26,35,50,.62); }
:where(html[data-ui="moon"]) #game .right .slot, :where(html[data-ui="moon"]) #game .right .cx, :where(html[data-ui="moon"]) #game .right .tnode { background-color: rgba(26,35,50,.45); }
:where(html[data-ui="moon"]) #game .right .btn.sec, :where(html[data-ui="moon"]) .modal .btn.sec { background-color: rgba(40,52,72,.55); }
:where(html[data-ui="moon"]) .av-wrap .av-frame { border-radius: 50%; }
:where(html[data-ui="moon"]) .cf-card.star { background: linear-gradient(#1a2332, #1a2332) padding-box, linear-gradient(120deg, #ff6f9f, #ffd36b, #7dffa8, #6fd6ff, #b48cff, #ff6f9f) border-box; background-size: 100% 100%, 300% 100%; }