/* ═════════════════════════════════════════════════════════════════════════════════════════════ worlds-v150.css — how to edit this file safely (read before changing anything) ───────────────────────────────────────────────────────────────────────────────────────────── Loaded last, after ~30 older stylesheets. Theme rules there are very specific, so rules here raise their weight with `:not(#_xN)` — an ID that never exists: it always matches and only adds ID weight. Weight ladder (number of `:not(#_…)` after :root[data-appearance…][data-appearance…]): 2–3 layout per world (v150/v151), page rhythm, micro-interactions 4–6 東方冒險 paper world, crew meter, gold money, elite readouts, form fields 7–9 exceptions that must beat the paper world (text over boss art, seals, the roster panel) 12 [hidden] safety (v155) — nothing may outrank it If a new rule "does nothing", check which rule wins (DevTools → Computed) before adding weight, and prefer editing that rule to stacking another on top. Rules that already caused bugs — qa/css-guardrails-v156.test.cjs checks all of them: • Never force `display` on an element that starts hidden; use #id:not([hidden]). • Never put ::before/::after inside :is()/:where() — the selector silently matches nothing. • Keep every ( ) balanced; one bad selector drops the whole rule. • Do not re-declare a property for the same selector later in the file; edit the existing rule. • Grid lists that scroll need `grid-auto-rows: max-content`, never `min-height: 0` on the rows. The generated 東方冒險 block (marked v150e, with its own opening and closing banner) is produced by tools/eastern-paper.py + tools/eastern-paper-emit.mjs; regenerate it rather than editing by hand. tools/css-audit.py reports shadowed declarations and selectors naming classes that do not exist. ═════════════════════════════════════════════════════════════════════════════════════════════ */ /* v150 · four worlds, four layouts. Loaded after identity-v144.css. Layout concepts from the v149 brief (Codex): 史詩電競 stage + command rail, 東方冒險 unrolled scroll, 暖白繪本 sticker book, 霓虹戰術 radar console with a gauge rail. `:not(#_wN)` always matches; it only adds ID weight so a world's layout outranks the shared one-column rules of v148. Desktop only (≥1100px); narrower screens keep the calm column. */ @media (min-width: 1100px) { /* ───────── 史詩電競 · stage + command rail ───────── */ :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"].active { display: grid !important; grid-template-columns: minmax(0, 1fr) 320px !important; gap: 22px 26px !important; align-items: start !important; grid-template-areas: "hero hero" "raids rail" "guides rail" "feedback feedback" !important; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > * { width: auto !important; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .hero-card { grid-area: hero !important; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .section-block:not(.guide-preview) { grid-area: raids !important; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .guide-preview { grid-area: guides !important; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .feedback-home-entry { grid-area: feedback !important; } /* The rail stacks to-dos over the counters and stays in view while the stage scrolls. */ :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > :is(#guildTasks, #feedbackBoard, .stat-grid) { grid-area: rail !important; position: sticky; top: 76px; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > #guildTasks:not([hidden]) ~ .stat-grid { margin-top: 0 !important; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .stat-grid { grid-template-columns: 1fr !important; align-self: end !important; gap: 10px !important; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .stat-grid > button { justify-content: space-between !important; padding: 16px 20px !important; border-left: 3px solid #FF7A1A !important; box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .14), 0 0 24px -12px rgba(255, 122, 26, .6) !important; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .stat-grid > button strong { font-size: 1.9rem !important; color: #FFC48A !important; text-shadow: 0 0 16px rgba(255, 122, 26, .45); } :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] #homePartyList { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* ───────── 霓虹戰術 · radar console with a gauge rail from the top ───────── */ :root[data-appearance="maple"][data-appearance="maple"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"].active { display: grid !important; grid-template-columns: minmax(0, 1fr) 260px !important; gap: 18px !important; align-items: start !important; grid-template-areas: "hero gauges" "tasks gauges" "raids gauges" "guides guides" "feedback feedback" !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > * { width: auto !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .hero-card { grid-area: hero !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > :is(#guildTasks, #feedbackBoard) { grid-area: tasks !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .section-block:not(.guide-preview) { grid-area: raids !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .guide-preview { grid-area: guides !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .feedback-home-entry { grid-area: feedback !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .stat-grid { grid-area: gauges !important; position: sticky; top: 76px; margin: 0 !important; grid-template-columns: 1fr !important; gap: 10px !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .stat-grid > button { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 6px !important; min-height: 120px !important; padding: 18px !important; border-radius: 0 !important; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(0, 255, 204, .08), rgba(0, 255, 204, .02)), #081620 !important; border: 1px solid rgba(0, 255, 204, .35) !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .stat-grid > button strong { order: 0 !important; font-size: 2.6rem !important; color: #00FFCC !important; text-shadow: 0 0 18px rgba(0, 255, 204, .55); font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .stat-grid > button span { color: #8FA3BF !important; letter-spacing: .1em; } /* ───────── 暖白繪本 · sticker book ───────── */ :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"].active { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; align-items: stretch !important; grid-template-areas: "hero hero" "raids raids" "stats stats" "tasks guides" "feedback feedback" !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > * { width: auto !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .hero-card { grid-area: hero !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .section-block:not(.guide-preview) { grid-area: raids !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .stat-grid { grid-area: stats !important; margin: 0 !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > :is(#guildTasks, #feedbackBoard) { grid-area: tasks !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .guide-preview { grid-area: guides !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .feedback-home-entry { grid-area: feedback !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] #homePartyList { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .stat-grid > button { border-radius: 999px !important; justify-content: center !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .stat-grid > button:nth-child(1) { transform: rotate(-1.2deg); } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_w1):not(#_w2) #mainContent .page[data-view="home"] > .stat-grid > button:nth-child(3) { transform: rotate(1.2deg); } /* ───────── 東方冒險 · an unrolled scroll: one narrow, centred reading column ───────── */ } /* Every piece of text inside the paper takes ink — except things that carry their own colour. */ /* Inner boxes that were dark lacquer become a slightly deeper sheet of paper. */ /* The section headings over the paper keep the gilt title look on the lacquer ground. */ @media (min-width: 1100px) { /* Tactical gauges keep their own height instead of stretching down the whole rail. */ :root[data-appearance="maple"][data-appearance="maple"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page[data-view="home"] > .stat-grid { align-self: start !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page[data-view="home"] > .stat-grid > button { min-height: 116px !important; height: auto !important; } } /* 東方: the home raid cards' own labels and join button on paper. */ /* Status marks on paper: a cinnabar seal with paper text. */ /* Text that sits inside buttons on paper (the roster preview, the crew medal) takes ink too. */ /* The loot card's dark inner blocks become paper as well. */ /* Things that carry their own colour on paper outrank the ink rule (one more ID): avatar circles, the status seal on raid cards, and the loot card's detail link. */ /* The home raid card's crew pill (a dark chip): paper text on it. */ /* The 無視防禦 bar always has its own room under the number, at every width and in every world (a phone rule had reset the tile padding, letting the bar run into the digits). */ :root[data-appearance][data-appearance]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent :is(#characterList, #homeAdventurer) .character-stat.stat-ied { padding-bottom: 20px !important; } :root[data-appearance][data-appearance]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent :is(#characterList, #homeAdventurer) .character-stat.stat-ied::after { bottom: 8px !important; } /* 暖白繪本: the small labels on pastel stickers read at full contrast. */ :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_w1):not(#_w2) #mainContent :is(#characterList, #homeAdventurer) .character-stat dt { color: #4A5942 !important; } @media (min-width: 1100px) { /* 史詩電競: the rail stacks to-dos then counters with no gap; guides take the full width below. */ :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2):not(#_w3) #mainContent .page[data-view="home"].active { grid-template-areas: "hero hero" "raids tasks" "raids stats" "guides guides" "feedback feedback" !important; grid-template-rows: auto auto 1fr auto auto !important; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2):not(#_w3) #mainContent .page[data-view="home"] > :is(#guildTasks, #feedbackBoard) { grid-area: tasks !important; align-self: start !important; position: static; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_w1):not(#_w2):not(#_w3) #mainContent .page[data-view="home"] > .stat-grid { grid-area: stats !important; align-self: start !important; position: static; } } /* ═════════════ v150e · 東方冒險: GENERATED by tools/eastern-paper.py + ui/emitgen.mjs — do not edit by hand ═════════════ Every classic rule painting a dark background or light text, re-inked for the paper world. One rule per selector, each validated by the browser's parser, so a bad selector can never take other rules down with it. 100 rules (0 candidate selectors rejected). Hand-written exceptions carry more ID weight. */ :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .profile-button { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .crest { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .stat-grid { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .raid-card { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .home-data-empty { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .guide-row i { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) :is(.ghost,.party-action.cancel,.party-manage-menu>summary) { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .party-browse-tools { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) :is(.party-layout-switch,.loot-layout-switch) { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) :is(.party-layout-switch,.loot-layout-switch) button[aria-pressed="true"] { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) :is(.party-carousel-nav,.loot-carousel-nav) button { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #partyList[data-layout="list"]>.party-panel { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) :is(.panel,.character-card,.member-summary,.empty-state,.loot-flow-disclosure) { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .active-char { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .search { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) :is(#partyModal,#guideModal,#characterModal) .dialog-actions { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .modal-close { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .appearance-choice { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } @media(max-width:849px){:root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .hero-party-summary { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; }} :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #mainContent :is(.party-layout-switch,.loot-layout-switch) button[aria-pressed="true"] { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #partyList .party-manage-menu { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #candidateModal .candidate-group-head { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #candidateModal .candidate-row:has(.candidate-check:checked) { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #candidateModal .candidate-stats>span { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #candidateModal #rosterComposition { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .login-modal .modal-close { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootFlowGuide .loot-flow-guide>div>b { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootList .loot-drop-inline { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootList .loot-card-receipt { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootList .loot-card-footer { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootList .loot-card-footer button { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootDetailModal .loot-stage-note:is(.distributed,.closed) { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootDetailModal .loot-stage-note.pending_approval { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootDetailModal .loot-detail-money { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootDetailModal .loot-receipt-group h3 b { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootDetailModal .loot-detail-members>div { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootDetailModal .loot-detail-members>div.received { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootDetailModal .loot-member-state { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootDetailModal .loot-detail-members>div.received .loot-member-state { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootDetailModal .loot-detail-receipt-action:not(:disabled) { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootDetailModal .loot-detail-receipt-action.received:not(:disabled) { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootDetailModal .loot-own-task { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3)[data-appearance="classic"] body { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .classic-chapter { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .classic-welcome h1 { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .classic-welcome h1 em { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .classic-welcome>p { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .classic-welcome>p>span { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .hero-party-summary strong { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .hero-party-summary small { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .classic-art-caption { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .stat-grid strong { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .stat-grid span { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .section-heading h2 { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .section-heading button { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .home-data-empty { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .guide-row i { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .guide-row div strong { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .page-title h1 { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) :is(.ghost,.party-action.cancel,.party-manage-menu>summary) { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .filter-chips button.active { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) :is(.party-layout-switch,.loot-layout-switch) button[aria-pressed="true"] { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) :is(.party-carousel-nav,.loot-carousel-nav) button { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) :is(#partyCarouselStatus,#lootCarouselStatus) { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .party-capacity-summary strong { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #partyList[data-layout="list"]>.party-panel h3 { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #partyList[data-layout="list"]>.party-panel .party-requirement p { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .guide-content { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .guide-article h3 { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .add-card { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) :is(.character-dialog,.login-dialog) h2 { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .modal-close { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #mainContent :is(.page-title h1,.section-heading h2) { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #mainContent .classic-welcome h1 em { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #mainContent .classic-welcome>p>span { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #mainContent .filter-chips button.active { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #mainContent :is(.party-layout-switch,.loot-layout-switch) button[aria-pressed="true"] { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) :is(.party-carousel-nav,.loot-carousel-nav) button:not(:disabled) { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #partyList .party-format-copy>b { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #partyList .party-format-copy>span { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #partyList .party-requirement>span { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #partyList .party-requirement p { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #partyList .party-requirement button { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #mainContent .home-party-list .raid-format-line>strong { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #candidateModal .candidate-dialog-head h2 { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #candidateModal .candidate-group-head { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #candidateModal .candidate-stats>span { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #candidateModal .candidate-stats>span small { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #candidateModal .candidate-stats>span b { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) .login-modal .modal-close { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootList .loot-card-meta>span:first-child { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3) #lootList .loot-card-copy>p { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3)[data-appearance="classic"] #mainContent .page-title h1 { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3)[data-appearance="classic"] #mainContent :is(#partyFilters, #lootFilters) > button.active { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3)[data-appearance="classic"] #mainContent #lootList .loot-card .loot-value-row > .highlight strong { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3)[data-appearance="classic"] #mainContent :is(#characterList, #homeAdventurer) .character-stat dt { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3)[data-appearance="classic"] #mainContent :is(#characterList, #homeAdventurer) .character-stat dd { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3)[data-appearance="classic"] .character-fieldset legend { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } :root[data-appearance="classic"]:not(#_g1):not(#_g2):not(#_g3)[data-appearance="classic"] #mainContent #characterList :is(.character-class-icon, .character-initial) { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; text-shadow: none !important; } /* ═════════════ end of generated block ═════════════ */ /* ═════════════ v150 · 東方冒險: an unrolled scroll map ═════════════ The page is one continuous sheet of aged paper between two lacquer rods: fibres, faint contour lines and a compass, sections parted by ink rules instead of boxes. The hero is a painting mounted on it. */ :root[data-appearance="classic"][data-appearance="classic"] { --map-ink: #3A281C; --map-ink-2: #6A5038; --map-rule: rgba(90, 60, 32, .38); --map-cinnabar: #9A2E1E; --map-gold: #C9A45C; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active { position: relative; isolation: isolate; margin: 30px 6px 34px !important; padding: 44px clamp(18px, 3vw, 46px) 52px !important; color: var(--map-ink) !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='#5A3A20' stroke-opacity='.22' stroke-width='1.4'%3E%3Ccircle cx='110' cy='110' r='92'/%3E%3Ccircle cx='110' cy='110' r='80' stroke-dasharray='3 6'/%3E%3Ccircle cx='110' cy='110' r='20'/%3E%3Cpath d='M110 14 124 96 110 110 96 96zM110 206 96 124 110 110 124 124zM14 110 96 96 110 110 96 124zM206 110 124 124 110 110 124 96z'/%3E%3C/g%3E%3Ctext x='110' y='10' font-size='14' text-anchor='middle' fill='#5A3A20' fill-opacity='.35' font-family='serif'%3E%E5%8C%97%3C/text%3E%3C/svg%3E") right 28px bottom 34px / 200px 200px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='#6B4423' stroke-opacity='.09' stroke-width='1.2'%3E%3Cpath d='M40 120c30-40 90-50 130-20s70 70 30 100-110 30-150 0-40-50-10-80z'/%3E%3Cpath d='M60 125c22-28 68-35 98-14s50 50 22 72-82 22-110 0-30-36-10-58z'/%3E%3Cpath d='M82 130c14-17 44-21 63-8s32 31 14 45-52 14-70 0-19-23-7-37z'/%3E%3Cpath d='M250 300c40-30 110-20 130 20s-10 80-60 80-110-10-110-50 10-30 40-50z'/%3E%3Cpath d='M272 310c28-20 78-14 92 14s-8 56-42 56-78-8-78-36 8-20 28-34z'/%3E%3Cpath d='M0 260c60-20 120 10 170-10s90-60 150-50 100 30 100 30'/%3E%3Cpath d='M0 380c50-10 100 20 150 0s80-40 140-30'/%3E%3Cpath d='M300 40c30 10 60 40 90 30'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 420px 420px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .28 0 0 0 0 .14 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url%28%23f%29'/%3E%3C/svg%3E") 0 0 / 200px 200px, radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(120, 78, 30, .30) 100%), linear-gradient(180deg, #EEDDB8 0%, #E3CB9A 48%, #EAD6AE 100%) !important; border-left: 1px solid rgba(120, 78, 30, .45); border-right: 1px solid rgba(120, 78, 30, .45); box-shadow: 0 34px 60px -34px #000, inset 0 0 50px rgba(120, 78, 30, .28) !important; } /* The two rods, gold-capped. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active::before, :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active::after { content: '' !important; display: block !important; position: absolute; left: -16px; right: -16px; height: 22px; border-radius: 11px; z-index: 1; background: linear-gradient(90deg, #E2BF74 0 14px, #8C6428 14px 18px, transparent 18px calc(100% - 18px), #8C6428 calc(100% - 18px) calc(100% - 14px), #E2BF74 calc(100% - 14px)), linear-gradient(180deg, #6A3222 0%, #3A1810 45%, #1C0B07 100%) !important; box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 220, 170, .25); animation: none !important; transform: none !important; opacity: 1 !important; pointer-events: none; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active::before { top: -11px; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active::after { bottom: -11px; top: auto; inset-inline: -16px; } /* The hero is a painting mounted on the scroll (silk mount + ink line). */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page[data-view="home"] > .hero-card { box-shadow: 0 0 0 7px #F2E4C4, 0 0 0 8px rgba(90, 60, 32, .5), 0 18px 30px -18px rgba(60, 30, 10, .8) !important; } /* Sections sit directly on the paper, parted by an ink rule. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active :is(.section-block, #guildTasks, #feedbackBoard, .stat-grid, .feedback-home-entry, .page-title, .party-browse-tools, .loot-browse-tools, .loot-flow-guide) { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; backdrop-filter: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page[data-view="home"] > :is(.section-block, #guildTasks, .stat-grid, .feedback-home-entry) { padding: 18px 4px 4px !important; background: linear-gradient(90deg, transparent, var(--map-rule) 12%, var(--map-rule) 88%, transparent) top / 100% 1px no-repeat !important; } /* Cards are a slightly deeper patch of the same paper. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent :is(#partyList .party-panel, #homePartyList .raid-card, #lootList .loot-card, #characterList .character-card, #guideList > *, #memberList > *, .home-data-empty, .page[data-view="home"] > .stat-grid > button) { background: rgba(255, 246, 224, .42) !important; border: 1px solid rgba(110, 72, 36, .38) !important; border-radius: 4px !important; box-shadow: 0 1px 0 rgba(255, 250, 235, .6) inset, 0 8px 16px -14px rgba(60, 30, 10, .6) !important; backdrop-filter: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent :is(#partyList .party-panel, #homePartyList .raid-card, #lootList .loot-card, #characterList .character-card) :is(.party-roster-preview, .party-capacity-summary, .party-format-medal, .party-requirement, .loot-card-main, .loot-drop-inline, .loot-value-row, .loot-value-row > div, .loot-card-footer, .character-stat, .character-stats) { background: rgba(120, 78, 30, .07) !important; border-color: rgba(110, 72, 36, .32) !important; box-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent #lootList .loot-card .loot-card-progress { background: rgba(120, 78, 30, .18) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent #lootList .loot-card .loot-card-thumb { background: #3A1712 !important; } /* Ink for every text on the paper, except what carries its own colour (the hero painting, seals, avatars, pills, main buttons). */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active :is(h1, h2, h3, h4, p, small, span, strong, b, em, dt, dd, time, li, label, i, a):not(.hero-card *):not(.panel-status):not(.panel-status *):not(.loot-status):not(.loot-status *):not(.badges > span):not(.roster-avatar):not(.roster-more):not(.character-level):not([data-party-role]):not(.primary):not(.primary *):not(.join-button):not(.join-button *):not(.party-action):not(.party-action *):not(.page-seal):not(.raid-format-line strong):not(.character-emblem *) { color: var(--map-ink) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active :is(small, time, .meta, .loot-card-copy > p, .party-format-copy span):not(.hero-card *) { color: var(--map-ink-2) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active :is(.page-title h1, .section-heading h2, #partyList .party-panel h3, #lootList .loot-card h3, #characterList h2, #homePartyList .raid-card h3):not(.hero-card *) { font-family: 'Noto Serif TC', serif !important; color: var(--map-ink) !important; background: none !important; letter-spacing: .12em; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active .page-title h1 { padding-bottom: .25em; border-bottom: 2px solid var(--map-cinnabar); display: inline-block; } /* Seals, avatars and pills keep their own colours on paper. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5) #mainContent .page.active :is(.panel-status, .loot-status, .badges > span, .page-seal) { background: var(--map-cinnabar) !important; color: #FFF1DA !important; -webkit-text-fill-color: #FFF1DA !important; border-color: rgba(255, 230, 190, .5) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5) #mainContent .page.active :is(.roster-avatar, .roster-more, .raid-format-line strong, .party-format-medal strong) { background: #6E2417 !important; color: #FFF1DA !important; -webkit-text-fill-color: #FFF1DA !important; border-color: #F2E4C4 !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5) #mainContent .page.active .party-format-medal :is(span, small) { color: #FFF1DA !important; -webkit-text-fill-color: #FFF1DA !important; } /* Secondary controls on paper: ink outlines. Active tabs are underlined in cinnabar. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5) #mainContent .page.active :is(button, a):not(.primary):not(.join-button):not(.party-action):not(.hero-card *):not([class*="status"]):not(.roster-avatar) { background: rgba(255, 246, 224, .35) !important; color: var(--map-ink) !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(90, 60, 32, .5) !important; box-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5) #mainContent .page.active :is(#partyFilters, #lootFilters, #guideFilters, #memberFilters) > button.active, :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5) #mainContent .page.active :is(.party-layout-switch, .loot-layout-switch) button.active { background: rgba(154, 46, 30, .12) !important; border-color: var(--map-cinnabar) !important; box-shadow: inset 0 -2px 0 var(--map-cinnabar) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5) #mainContent .page.active .filter-count { background: rgba(90, 60, 32, .14) !important; color: var(--map-ink) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent #characterList .character-stat dd, :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent #lootList .loot-card .loot-value-row > .highlight strong { color: var(--map-cinnabar) !important; text-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent #characterList .character-stat + .character-stat { border-left-color: rgba(110, 72, 36, .3) !important; } @media (max-width: 720px) { :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active { margin: 22px 0 28px !important; padding: 34px 14px 42px !important; background-size: 150px 150px, 420px 420px, 200px 200px, auto, auto !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active::before, :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active::after { left: -6px; right: -6px; height: 18px; inset-inline: -6px; } } /* The mounted painting keeps its own light text (the page's ink must not leak into it). */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page[data-view="home"] > .hero-card { color: #F3E7CF !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent #homeAdventurer .home-adventurer-id h2 { color: #F7EBD2 !important; -webkit-text-fill-color: #F7EBD2 !important; } /* A solid paper colour under the gradients (fallback, and lets contrast tools see the real ground). */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4) #mainContent .page.active { background-color: #E6D2A8 !important; } /* Remaining lacquer chips on the paper: the loot flow steps, view switches and pager. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5) #mainContent .page.active :is(.loot-flow-guide, .loot-flow-guide *, .party-layout-switch, .loot-layout-switch, .party-carousel-nav, .loot-carousel-nav, .guild-pagination) { background-color: transparent !important; background-image: none !important; box-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5) #mainContent .page.active .loot-flow-guide :is(ol > li, ul > li, [class*="step"]) { background: rgba(255, 246, 224, .4) !important; border: 1px solid rgba(90, 60, 32, .35) !important; border-radius: 4px !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5) #mainContent .page.active :is(.party-layout-switch, .loot-layout-switch) { border: 1px solid rgba(90, 60, 32, .45) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5) #mainContent .page.active :is(.loot-flow-disclosure, .loot-flow-disclosure > summary) { background: rgba(255, 246, 224, .35) !important; border: 1px solid rgba(90, 60, 32, .4) !important; box-shadow: none !important; } /* The crew medal is one lacquer chip, so both "6" and "人團" read on it. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5) #mainContent .page.active .party-format-medal { background: #6E2417 !important; border-color: #F2E4C4 !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5) #mainContent .page.active .loot-flow-disclosure > summary { color: var(--map-ink) !important; -webkit-text-fill-color: currentColor !important; } /* Card layout (phones): the title block sits on the boss art, so its text stays light with a soft shadow. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent #partyList[data-layout="cards"] .party-panel .panel-top :is(h2, h3, p, small, span, b, time):not(.panel-status):not(.panel-status *), :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent #lootList[data-layout="cards"] .loot-card .loot-card-main :is(h2, h3, p, small, span, b, time):not(.loot-status):not(.loot-status *):not(.loot-drop-inline *) { color: #FFF3DC !important; -webkit-text-fill-color: #FFF3DC !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .6) !important; } /* ═════════════ v150b · 東方冒險: one material — a scroll on a writing desk ═════════════ Art direction: nothing dark on screen but the desk and the rods. Sidebar = the rolled end of the scroll, top bar = the title slip, hero = a painting on the paper. Palette: paper, ink, cinnabar; gold only on the rod caps. Controls take period forms: seals, bookmark tabs, stamp toggles. */ :root[data-appearance="classic"][data-appearance="classic"] { --paper: #E9D6AE; --paper-hi: #F1E3C3; --paper-lo: #DCC193; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) body { background: radial-gradient(ellipse 120% 70% at 50% 0%, rgba(120, 72, 38, .55), transparent 70%), repeating-linear-gradient(90deg, rgba(255, 214, 160, .035) 0 2px, transparent 2px 11px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 37px), linear-gradient(180deg, #3A2416 0%, #24150C 100%) !important; background-attachment: fixed !important; } /* Sidebar: the rolled end of the scroll. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(#drawer, .drawer) { background: linear-gradient(90deg, transparent calc(100% - 22px), rgba(90, 55, 25, .35) calc(100% - 6px), rgba(60, 35, 15, .55) 100%), linear-gradient(180deg, var(--paper-hi), var(--paper) 50%, var(--paper-lo)) !important; color: var(--map-ink) !important; border-color: rgba(90, 60, 32, .45) !important; box-shadow: 6px 0 16px -8px rgba(0, 0, 0, .7) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(#drawer, .drawer) :is(a, button, span, small, strong, b, p, em, summary, h2, h3):not(.primary) { color: var(--map-ink) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(#drawer, .drawer) .drawer-nav :is(button, a) { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(#drawer, .drawer) .drawer-nav :is(button, a).active { background: linear-gradient(90deg, rgba(154, 46, 30, .16), transparent) !important; box-shadow: inset 4px 0 0 var(--map-cinnabar) !important; color: var(--map-cinnabar) !important; clip-path: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(#drawer, .drawer) :is(.drawer-account, .drawer-foot) { background: rgba(255, 246, 224, .45) !important; border: 1px solid rgba(90, 60, 32, .4) !important; border-radius: 2px !important; box-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(#drawer, .drawer) .drawer-head { border-bottom: 1px solid rgba(90, 60, 32, .35) !important; background: none !important; } /* Top bar and phone tab bar: the title slip, parted from the scroll by an ink rule. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) .topbar, :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) .bottom-nav { background: linear-gradient(180deg, var(--paper-hi), var(--paper)) !important; backdrop-filter: none !important; border-color: rgba(90, 60, 32, .45) !important; box-shadow: 0 4px 12px -8px rgba(0, 0, 0, .6) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.topbar, .bottom-nav) :is(a, button, span, small, strong, b) { color: var(--map-ink) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) .topbar :is(button, a) { background: rgba(255, 246, 224, .5) !important; border: 1px solid rgba(90, 60, 32, .5) !important; border-radius: 2px !important; box-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) .bottom-nav :is(button, a) { background: transparent !important; border: 0 !important; box-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) .bottom-nav :is(button, a).active { color: var(--map-cinnabar) !important; box-shadow: inset 0 3px 0 var(--map-cinnabar) !important; background: rgba(154, 46, 30, .08) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) .bottom-nav :is(button, a) :is(span, b, i) { background: transparent !important; box-shadow: none !important; } /* The page scroll: no mount box around the hero — the painting is on the paper. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page[data-view="home"] > .hero-card { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--map-ink) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page[data-view="home"] > .hero-card::before, :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page[data-view="home"] > .hero-card::after { display: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page[data-view="home"] > .hero-card .hero-mascots { -webkit-mask-image: radial-gradient(ellipse 62% 70% at 58% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 62% 70% at 58% 50%, #000 58%, transparent 100%); filter: sepia(.18) saturate(.92) contrast(.98); } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page[data-view="home"] > .hero-card :is(h1, h2, h3, p, small, span, strong, b, em, dt, dd, time, label, i):not(.character-level):not([data-party-role]):not(.primary *):not(.character-emblem *) { color: var(--map-ink) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent #homeAdventurer .home-adventurer-id h2 { color: var(--map-ink) !important; -webkit-text-fill-color: var(--map-ink) !important; font-family: 'Noto Serif TC', serif !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .hero-card :is(.character-stat dd, .raid-countdown b) { color: var(--map-cinnabar) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .hero-card :is(.character-stat, .character-stats, .hero-party-summary, .raid-countdown, .raid-countdown-digits > span) { background: rgba(255, 246, 224, .4) !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .hero-card .classic-art-caption { color: var(--map-ink-2) !important; } /* Period controls: seals, bookmark tabs, stamp toggles. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(#mainContent, #drawer, .topbar) :is(button, a):is(.primary, .join-button, .party-action:not(.cancel)) { background: var(--map-cinnabar) !important; color: #FFF3DC !important; -webkit-text-fill-color: #FFF3DC !important; border: 1px solid #6E1E12 !important; border-radius: 2px !important; letter-spacing: .14em !important; box-shadow: inset 0 0 0 2px rgba(255, 230, 190, .22), 0 2px 0 #5E170E !important; font-family: 'Noto Serif TC', serif !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page.active :is(#partyFilters, #lootFilters, #guideFilters, #memberFilters) > button { border-radius: 2px 2px 0 0 !important; border-bottom-color: transparent !important; background: rgba(255, 246, 224, .3) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page.active :is(#partyFilters, #lootFilters, #guideFilters, #memberFilters) > button.active { background: var(--paper-hi) !important; box-shadow: inset 0 3px 0 var(--map-cinnabar) !important; border-color: rgba(90, 60, 32, .5) !important; color: var(--map-cinnabar) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page.active :is(.party-layout-switch, .loot-layout-switch, .party-carousel-nav) button, :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page.active :is(button, a):not(.primary):not(.join-button):not(.party-action):not([class*="status"]):not(.roster-avatar) { border-radius: 2px !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page.active :is(.panel-status, .loot-status, .badges > span, .raid-format-line strong, .party-format-medal) { border-radius: 2px !important; } /* The job emblem is a cinnabar seal; the level ribbon is written in ink. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent :is(#characterList, #homeAdventurer) .character-emblem { background: radial-gradient(circle at 38% 32%, #B8402A, #8A2716 72%) !important; border-radius: 6px !important; box-shadow: 0 0 0 2px var(--paper-hi), 0 0 0 3px rgba(110, 30, 18, .7), 0 6px 12px -8px rgba(60, 20, 10, .8) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent :is(#characterList, #homeAdventurer) :is(.character-class-icon, .character-initial) { color: #FFF1DA !important; filter: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent :is(#characterList, #homeAdventurer) .character-level { background: var(--map-ink) !important; color: #F1E3C3 !important; border: 0 !important; border-radius: 2px !important; } /* Gold is kept for the rods only: soften the remaining gilt rules. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page.active .page-seal { border-radius: 4px !important; box-shadow: 0 0 0 2px var(--paper-hi), 0 0 0 3px rgba(110, 30, 18, .6) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .hero-card :is(button, a):not(.primary):not(.join-button) { background: rgba(255, 246, 224, .45) !important; color: var(--map-ink) !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(90, 60, 32, .55) !important; border-radius: 2px !important; box-shadow: none !important; } /* Page titles are the page name alone, as on every other page. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page.active .page-title :is(.eyebrow, > div > span:first-child, > span:first-child) { display: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page.active .page-title > span { display: none !important; } /* The menu button's three bars are drawn with backgrounds: ink on paper. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #menuButton > span { background: var(--map-ink) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) .topbar svg { color: var(--map-ink) !important; stroke: currentColor; } /* ═════════════ v150c · 東方冒險: dialogs are sheets of the same paper ═════════════ */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) .login-modal > .sheet-scrim, :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #appearanceModal > .sheet-scrim { background: rgba(28, 16, 8, .62) !important; backdrop-filter: blur(2px) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) { background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120, 78, 30, .26) 100%), linear-gradient(180deg, #F1E3C3 0%, #E7D2A6 100%) !important; background-color: #EAD7AF !important; color: var(--map-ink) !important; border: 1px solid rgba(90, 60, 32, .55) !important; border-radius: 3px !important; box-shadow: inset 0 0 0 5px rgba(241, 227, 195, .8), inset 0 0 0 6px rgba(90, 60, 32, .35), 0 30px 60px -20px rgba(0, 0, 0, .75) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) :is(h1, h2, h3, h4, p, small, span, strong, b, em, dt, dd, time, li, label, legend, summary, i, a):not(.primary):not(.primary *):not(.panel-status):not(.panel-status *):not(.loot-status):not(.loot-status *):not(.roster-avatar):not(.character-level):not([data-party-role]):not(.character-emblem *):not(.appearance-preview):not(.appearance-preview *) { color: var(--map-ink) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) :is(h2, legend) { font-family: 'Noto Serif TC', serif !important; letter-spacing: .1em; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) :is(small, .field-help, .login-state, .form-state) { color: var(--map-ink-2) !important; } /* Inner panels and cards inside dialogs: a deeper patch of paper. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) :is(section, article, fieldset, .ops-panel, .candidate-overview, .candidate-guide, .candidate-list > *, .loot-roster-review, .loot-calculation, .loot-member-picker, .notification-list > *, .management-summary > *, .management-grid > *, .discord-channel-grid > *, .push-status-card, .feedback-context, .appearance-choice, .onboarding-setup-card, .desktop-web-guide, .direct-roster-panel, .loot-auto-status, .character-fieldset) { background: rgba(255, 246, 224, .45) !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; } /* Fields: paper wells with an ink rule; focus is a cinnabar line. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { background: #FBF3E1 !important; color: var(--map-ink) !important; -webkit-text-fill-color: var(--map-ink) !important; border: 1px solid rgba(90, 60, 32, .5) !important; border-radius: 2px !important; box-shadow: inset 0 1px 2px rgba(90, 60, 32, .15) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) :is(input, select, textarea)::placeholder { color: rgba(106, 80, 56, .7) !important; -webkit-text-fill-color: rgba(106, 80, 56, .7) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) :is(input, select, textarea):focus-visible { outline: 2px solid var(--map-cinnabar) !important; outline-offset: 1px; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--map-cinnabar); } /* Buttons: cinnabar seals for the main action, ink outlines for the rest, the close mark in ink. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) :is(button, a):is(.primary, .join-button) { background: var(--map-cinnabar) !important; color: #FFF3DC !important; -webkit-text-fill-color: #FFF3DC !important; border: 1px solid #6E1E12 !important; border-radius: 2px !important; box-shadow: inset 0 0 0 2px rgba(255, 230, 190, .22), 0 2px 0 #5E170E !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) :is(button, a):not(.primary):not(.join-button):not(.appearance-choice):not([class*="status"]) { background: rgba(255, 246, 224, .5) !important; color: var(--map-ink) !important; -webkit-text-fill-color: currentColor !important; border: 1px solid rgba(90, 60, 32, .5) !important; border-radius: 2px !important; box-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) :is(button, a).danger:not(.primary) { color: var(--map-cinnabar) !important; border-color: rgba(154, 46, 30, .6) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) .modal-close { background: transparent !important; } /* The appearance picker keeps its four preview tiles as they are (they show the other worlds). */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #appearanceModal .appearance-choice[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--map-cinnabar) !important; } /* Dialog title strip and action row: the same paper, parted by an ink rule. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.dialog-close-bar, .dialog-actions) { background: rgba(241, 227, 195, .92) !important; border-color: rgba(90, 60, 32, .4) !important; box-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) .dialog-close-bar { border-bottom: 1px solid rgba(90, 60, 32, .4) !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) .dialog-actions { border-top: 1px solid rgba(90, 60, 32, .4) !important; } /* The four preview tiles show the other worlds in their own colours (their text inherits from the tile). */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #appearanceModal .preview-classic { color: #EFD9AE !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #appearanceModal .preview-cloud { color: #3E5A39 !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #appearanceModal .preview-maple { color: #00FFCC !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #appearanceModal .preview-epic { color: #FFB26B !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #appearanceModal .appearance-preview :is(b, small, em, i) { -webkit-text-fill-color: currentColor !important; } /* The 東方冒險 preview tile shows the scroll it now opens (same in every world). */ :root[data-appearance][data-appearance]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6):not(#_w7) #appearanceModal .preview-classic { background: linear-gradient(180deg, #6A3222, #1C0B07) top / 100% 9px no-repeat, linear-gradient(180deg, #6A3222, #1C0B07) bottom / 100% 9px no-repeat, radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(120, 78, 30, .35) 100%), linear-gradient(180deg, #EEDDB8, #E1C895) !important; color: #3A281C !important; border-color: rgba(90, 60, 32, .55) !important; } :root[data-appearance][data-appearance]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6):not(#_w7) #appearanceModal .preview-classic :is(b, small) { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; font-family: 'Noto Serif TC', serif !important; } :root[data-appearance][data-appearance]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6):not(#_w7) #appearanceModal .preview-classic em { color: #9A2E1E !important; -webkit-text-fill-color: #9A2E1E !important; } :root[data-appearance][data-appearance]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6):not(#_w7) #appearanceModal .preview-classic > i { background: #9A2E1E !important; box-shadow: 0 16px 0 #6A5038, 0 32px 0 #C9A45C !important; } /* ═════════════ v150d · 東方冒險: remap the theme's own colour tokens inside the paper ═════════════ Most lacquer surfaces are drawn from these variables, so re-pointing them turns every component (including ones never listed by name) into paper and ink at once. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) #mainContent .page.active, :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6) :is(.login-modal, #appearanceModal) :is(.character-dialog, .member-access-dialog, .feedback-dialog) { --ink-950: rgba(120, 78, 30, .10); --ink-900: rgba(120, 78, 30, .10); --ink-850: rgba(120, 78, 30, .08); --ink-800: rgba(120, 78, 30, .12); --surface: rgba(255, 246, 224, .42); --surface-soft: rgba(255, 246, 224, .30); --ui-panel: rgba(255, 246, 224, .42); --ui-raised: rgba(255, 246, 224, .55); --ui-inset: rgba(120, 78, 30, .08); --ui-soft: rgba(120, 78, 30, .06); --role-bg: rgba(120, 78, 30, .10); --world-bg: transparent; --world-nav: transparent; --jade-ledger-base: rgba(120, 78, 30, .08); --jade-ledger-face: rgba(255, 246, 224, .42); --jade-ledger-raised: rgba(255, 246, 224, .55); --text: #3A281C; --ui-ink: #3A281C; --role-ink: #3A281C; --jade-ledger-ink: #3A281C; --ui-muted: #6A5038; --jade-ledger-muted: #6A5038; --paper-soft: #6A5038; --ui-accent: #9A2E1E; --jade-ledger-gold: #9A2E1E; --gold-300: #8A4A1E; --gold-700: rgba(154, 46, 30, .14); --ui-on-accent: #FFF3DC; --ui-success: #2F6B4F; --jade-ledger-success: #2F6B4F; --ui-success-bg: rgba(47, 107, 79, .12); --jade-ledger-success-bg: rgba(47, 107, 79, .12); --ui-danger: #9A2E1E; --ui-danger-bg: rgba(154, 46, 30, .10); --ui-line: rgba(90, 60, 32, .38); --ui-border: rgba(90, 60, 32, .38); } /* Leftover lacquer blocks inside dialogs and empty states: paper as well. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6):not(#_w7) :is(#mainContent .page.active, .login-modal section, #appearanceModal section) :is(.member-access-brand, .candidate-direct-roster-note, .loot-receipt-evidence-note, .empty-state) { background: rgba(255, 246, 224, .45) !important; background-image: none !important; color: var(--map-ink) !important; border: 1px solid rgba(90, 60, 32, .38) !important; box-shadow: none !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6):not(#_w7) :is(#mainContent .page.active, .login-modal section) :is(.member-access-brand, .empty-state) *:not(.primary):not(.primary *) { color: var(--map-ink) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } /* "目前使用" is a cinnabar seal: paper-coloured text. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6):not(#_w7) #mainContent .page.active :is(.selected-label, #membershipPendingBadge, #managementAttentionBadge) { background: var(--map-cinnabar) !important; color: #FFF3DC !important; -webkit-text-fill-color: #FFF3DC !important; border-radius: 2px !important; } /* Dialog title strip is opaque: scrolled content must never show through it. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6):not(#_w7) :is(.login-modal, #appearanceModal) .dialog-close-bar { background: #F1E3C3 !important; position: sticky; top: 0; z-index: 5; } /* Status seals and progress tracks inside dialogs match the page. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6):not(#_w7) .login-modal section :is(.loot-status, .panel-status) { background: #9A2E1E !important; color: #FFF3DC !important; -webkit-text-fill-color: #FFF3DC !important; border-color: rgba(255, 230, 190, .5) !important; border-radius: 2px !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6):not(#_w7) .login-modal section .loot-progress { background: rgba(120, 78, 30, .18) !important; } /* Gradient-painted lacquer blocks (their stops come from variables, so the generator cannot see them). */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_w1):not(#_w2):not(#_w3):not(#_w4):not(#_w5):not(#_w6):not(#_w7) :is(#mainContent .page.active, .login-modal section) :is(.party-calendar, .candidate-dialog-head) { background: rgba(255, 246, 224, .42) !important; background-image: none !important; border-color: rgba(90, 60, 32, .38) !important; box-shadow: none !important; color: #3A281C !important; } /* ═════════════ v151 · page rhythm per world: raids, loot and characters ═════════════ Desktop only, and only the default 選單 view (members' own 卡片/行事曆 choice is untouched). 史詩電競 two columns (match cards / prize board / player cards) · 東方冒險 one column (notices, ledger, roll) 暖白繪本 two staggered columns (sticker wall) · 霓虹戰術 three dense columns (mission grid / telemetry). */ @media (min-width: 1100px) { :root[data-appearance]:is([data-appearance="epic"], [data-appearance="cloud"], [data-appearance="maple"]):not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent #characterList { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; align-items: start !important; } /* Raids and loot keep one column (their cards are built for the full width); each world sets its own rhythm. */ :root[data-appearance="epic"][data-appearance="epic"]:not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent :is(#partyList[data-layout="list"], #lootList[data-layout="list"]) > * + * { margin-top: 22px !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent :is(#partyList[data-layout="list"], #lootList[data-layout="list"]) > :is(.party-panel, .loot-card):nth-child(odd) { margin-right: 7% !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent :is(#partyList[data-layout="list"], #lootList[data-layout="list"]) > :is(.party-panel, .loot-card):nth-child(even) { margin-left: 7% !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent :is(#partyList[data-layout="list"], #lootList[data-layout="list"]) > * + * { margin-top: 26px !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent :is(#partyList[data-layout="list"], #lootList[data-layout="list"]) > * + * { margin-top: 8px !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent #characterList { gap: 12px !important; } /* Cards keep their own inner layout (built for this width); only the outer rhythm changes. */ /* 暖白繪本: the second column sits a little lower, like stickers placed by hand. */ :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent #characterList > :nth-child(even) { margin-top: 30px !important; } /* 霓虹戰術: three telemetry columns, so a character's four readouts go two by two. */ :root[data-appearance="maple"][data-appearance="maple"]:not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent #characterList .character-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent #characterList .character-card { grid-template-columns: 64px minmax(0, 1fr) !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent #characterList .character-actions { grid-column: 1 / -1 !important; justify-self: start; } /* The add-character tile and empty states always span the full row. */ :root[data-appearance]:not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent :is(#partyList, #lootList, #characterList) > :is(.empty-state, .add-card, .home-data-empty) { grid-column: 1 / -1 !important; margin-top: 0 !important; } /* 東方冒險: one column read slowly — notices, a ledger and a roll, narrower for a book-like measure. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent :is(#partyList[data-layout="list"], #lootList[data-layout="list"], #characterList) { max-width: 940px; margin-inline: auto !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent :is(#partyList[data-layout="list"], #lootList[data-layout="list"]) > * + * { margin-top: 28px !important; } } @media (min-width: 1100px) { /* Multi-column character cards: readouts two by two, and a number never breaks inside itself — the power figure shrinks with its tile instead. */ :root[data-appearance]:is([data-appearance="epic"], [data-appearance="cloud"]):not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent #characterList .character-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :root[data-appearance]:is([data-appearance="epic"], [data-appearance="cloud"], [data-appearance="maple"]):not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent #characterList .character-stat { container-type: inline-size; } :root[data-appearance]:is([data-appearance="epic"], [data-appearance="cloud"], [data-appearance="maple"]):not(#_r1):not(#_r2):not(#_r3):not(#_r4) #mainContent #characterList .character-stat dd { overflow-wrap: normal !important; word-break: keep-all !important; white-space: nowrap !important; font-size: clamp(.8rem, 11cqi, 1.25rem) !important; } } @media (min-width: 1100px) { /* 霓虹戰術's third-width tiles and wide monospace digits: the power figure may shrink further. */ :root[data-appearance="maple"][data-appearance="maple"]:not(#_r1):not(#_r2):not(#_r3):not(#_r4):not(#_r5) #mainContent #characterList .character-stat.stat-power dd { font-size: clamp(11px, 8.5cqi, 1.15rem) !important; } } /* ═════════════ v152 · smooth scrolling: fixed backgrounds live on their own layer ═════════════ A `background-attachment: fixed` body repaints the whole viewport on every scroll frame (≈16 ms a frame measured for 史詩電競 / 東方冒險 / 霓虹戰術). The same final background (copied from the computed style) now sits on a fixed :root::before layer, so scrolling only moves content — the look is unchanged. */ :root[data-appearance="epic"][data-appearance="epic"]:not(#_p1):not(#_p2):not(#_p3):not(#_p4):not(#_p5):not(#_p6):not(#_p7):not(#_p8) body { background-image: none !important; background-attachment: scroll !important; background-color: transparent !important; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_p1):not(#_p2):not(#_p3):not(#_p4):not(#_p5):not(#_p6):not(#_p7):not(#_p8) { background-color: rgb(10, 13, 20) !important; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_p1):not(#_p2):not(#_p3):not(#_p4):not(#_p5):not(#_p6):not(#_p7):not(#_p8)::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0); background-color: rgb(10, 13, 20); background-image: radial-gradient(760px 520px at 78% 18%, rgba(255, 122, 26, 0.3), rgba(0, 0, 0, 0) 66%), radial-gradient(680px 520px at 18% 72%, rgba(0, 255, 102, 0.16), rgba(0, 0, 0, 0) 64%), radial-gradient(520px 380px at 96% 92%, rgba(219, 197, 143, 0.16), rgba(0, 0, 0, 0) 64%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.016) 0px, rgba(255, 255, 255, 0.016) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 4px), linear-gradient(rgb(12, 16, 25) 0%, rgb(7, 9, 14) 100%); background-size: auto, auto, auto, auto, auto; background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; background-repeat: repeat, repeat, repeat, repeat, repeat; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_p1):not(#_p2):not(#_p3):not(#_p4):not(#_p5):not(#_p6):not(#_p7):not(#_p8) body { background-image: none !important; background-attachment: scroll !important; background-color: transparent !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_p1):not(#_p2):not(#_p3):not(#_p4):not(#_p5):not(#_p6):not(#_p7):not(#_p8) { background-color: #24150C !important; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_p1):not(#_p2):not(#_p3):not(#_p4):not(#_p5):not(#_p6):not(#_p7):not(#_p8)::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0); background-color: #24150C; background-image: radial-gradient(120% 70% at 50% 0%, rgba(120, 72, 38, 0.55), rgba(0, 0, 0, 0) 70%), repeating-linear-gradient(90deg, rgba(255, 214, 160, 0.035) 0px, rgba(255, 214, 160, 0.035) 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 11px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0px, rgba(0, 0, 0, 0.08) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 37px), linear-gradient(rgb(58, 36, 22) 0%, rgb(36, 21, 12) 100%); background-size: auto, auto, auto, auto; background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; background-repeat: repeat, repeat, repeat, repeat; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_p1):not(#_p2):not(#_p3):not(#_p4):not(#_p5):not(#_p6):not(#_p7):not(#_p8) body { background-image: none !important; background-attachment: scroll !important; background-color: transparent !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_p1):not(#_p2):not(#_p3):not(#_p4):not(#_p5):not(#_p6):not(#_p7):not(#_p8) { background-color: rgb(7, 11, 18) !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_p1):not(#_p2):not(#_p3):not(#_p4):not(#_p5):not(#_p6):not(#_p7):not(#_p8)::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0); background-color: rgb(7, 11, 18); background-image: radial-gradient(1000px 700px at 50% -20%, rgba(0, 255, 204, 0.14), rgba(0, 0, 0, 0) 65%), linear-gradient(rgba(0, 255, 204, 0.07) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(0, 255, 204, 0.07) 1px, rgba(0, 0, 0, 0) 1px), radial-gradient(rgba(0, 255, 204, 0.28) 1px, rgba(0, 0, 0, 0) 1.6px); background-size: 100% 100%, 32px 32px, 32px 32px, 32px 32px; background-position: 0px 0px, -1px -1px, -1px -1px, 15px 15px; background-repeat: repeat, repeat, repeat, repeat; } /* ═════════════ v153 · crew meter: how close a raid is to a full crew ═════════════ Motion uses transform/opacity only (no repaint), and stops for reduced-motion users. */ :root[data-appearance][data-appearance]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter { display: grid; gap: 6px; width: 100%; grid-column: 1 / -1; margin-top: 10px; } :root[data-appearance][data-appearance]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } :root[data-appearance][data-appearance]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-head b { font-size: .82rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .04em; } :root[data-appearance][data-appearance]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-head small { font-size: .74rem; opacity: .85; text-align: right; } :root[data-appearance][data-appearance]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-track { position: relative; display: block; height: 10px; overflow: hidden; } :root[data-appearance][data-appearance]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-fill { position: absolute; inset: 0 auto 0 0; width: var(--fill); display: block; overflow: hidden; } :root[data-appearance][data-appearance]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-fill::after { content: ''; position: absolute; inset: 0; width: 60%; transform: translateX(-120%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: crew-sheen 2.6s ease-in-out infinite; } @keyframes crew-sheen { 0%, 25% { transform: translateX(-120%); } 75%, 100% { transform: translateX(260%); } } @keyframes crew-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } /* 史詩電競 — a segmented energy cell: orange charging to gold, neon mint when the crew is full. */ :root[data-appearance="epic"][data-appearance="epic"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-track { height: 12px; border-radius: 3px; background: rgba(4, 7, 13, .85); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .22), inset 0 2px 4px rgba(0, 0, 0, .6); } :root[data-appearance="epic"][data-appearance="epic"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-fill { --c1: #FF6A00; --c2: #FFC48A; --glow: rgba(255, 122, 26, .75); background: linear-gradient(90deg, var(--c1), var(--c2)); border-radius: 3px; box-shadow: 0 0 12px var(--glow); -webkit-mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 17px); mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 17px); } :root[data-appearance="epic"][data-appearance="epic"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter[data-full="true"] .crew-meter-fill { --c1: #00D9A8; --c2: #7CFFE0; --glow: rgba(0, 255, 204, .8); } :root[data-appearance="epic"][data-appearance="epic"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-track::after { content: ''; position: absolute; inset: -3px; border-radius: 5px; pointer-events: none; opacity: .35; box-shadow: 0 0 16px rgba(255, 122, 26, .6); animation: crew-pulse 1.8s ease-in-out infinite; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter[data-full="true"] .crew-meter-track::after { box-shadow: 0 0 18px rgba(0, 255, 204, .75); } :root[data-appearance="epic"][data-appearance="epic"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-head b { color: #FFC48A; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter[data-full="true"] .crew-meter-head :is(b, small) { color: #7CFFE0; } /* 霓虹戰術 — a HUD gauge with ten ticks: signal blue while filling, neon mint at full strength. */ :root[data-appearance="maple"][data-appearance="maple"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-track { height: 8px; border-radius: 0; background: rgba(0, 255, 204, .07); box-shadow: inset 0 0 0 1px rgba(0, 255, 204, .28); } :root[data-appearance="maple"][data-appearance="maple"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-track::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(7, 11, 18, .95) calc(10% - 1px) 10%); } :root[data-appearance="maple"][data-appearance="maple"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-fill { background: linear-gradient(90deg, #1E6BFF, #3FA9FF); box-shadow: 0 0 10px rgba(63, 169, 255, .7); } :root[data-appearance="maple"][data-appearance="maple"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter[data-full="true"] .crew-meter-fill { background: linear-gradient(90deg, #00C9A0, #00FFCC); box-shadow: 0 0 14px rgba(0, 255, 204, .85); } :root[data-appearance="maple"][data-appearance="maple"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter[data-full="true"] .crew-meter-fill::before { content: ''; position: absolute; inset: 0; background: #00FFCC; opacity: .35; animation: crew-pulse 1.4s ease-in-out infinite; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-head b { color: #7FC8FF; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter[data-full="true"] .crew-meter-head :is(b, small) { color: #00FFCC; } /* 暖白繪本 — a chunky, glossy EXP bar: leaf green running into EXP yellow. */ :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-track { height: 16px; border-radius: 999px; background: #EEF1E6; box-shadow: inset 0 2px 3px rgba(71, 99, 65, .22), 0 0 0 2px #FFFFFF; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-fill { border-radius: 999px; background: linear-gradient(90deg, #7CCB3F, #B6DF45 55%, #F6D443); box-shadow: inset 0 -3px 0 rgba(96, 120, 24, .25); } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-fill::before { content: ''; position: absolute; left: 6px; right: 6px; top: 3px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .6); } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter[data-full="true"] .crew-meter-fill { background: linear-gradient(90deg, #F6C63A, #FFE27A); } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-head b { color: #476341; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter[data-full="true"] .crew-meter-head b { color: #9A6A00; } /* 東方冒險 — an ink rule on paper filled with a cinnabar brush stroke; jade once the crew is complete. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_m1):not(#_m2):not(#_m3):not(#_m4):not(#_m5):not(#_m6):not(#_m7):not(#_m8) #mainContent .crew-meter-track { height: 7px; border-radius: 1px; background: rgba(90, 60, 32, .16); box-shadow: inset 0 0 0 1px rgba(90, 60, 32, .25); } :root[data-appearance="classic"][data-appearance="classic"]:not(#_m1):not(#_m2):not(#_m3):not(#_m4):not(#_m5):not(#_m6):not(#_m7):not(#_m8) #mainContent .crew-meter-fill { background: linear-gradient(90deg, #B8432F, #9A2E1E); border-radius: 1px 4px 1px 4px; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_m1):not(#_m2):not(#_m3):not(#_m4):not(#_m5):not(#_m6):not(#_m7):not(#_m8) #mainContent .crew-meter[data-full="true"] .crew-meter-fill { background: linear-gradient(90deg, #3E7A5C, #2F6B4F); } :root[data-appearance="classic"][data-appearance="classic"]:not(#_m1):not(#_m2):not(#_m3):not(#_m4):not(#_m5):not(#_m6):not(#_m7):not(#_m8) #mainContent .crew-meter-fill::after { display: none; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_m1):not(#_m2):not(#_m3):not(#_m4):not(#_m5):not(#_m6):not(#_m7):not(#_m8) #mainContent .crew-meter-head :is(b, small) { color: #3A281C !important; -webkit-text-fill-color: #3A281C !important; font-family: 'Noto Serif TC', serif; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_m1):not(#_m2):not(#_m3):not(#_m4):not(#_m5):not(#_m6):not(#_m7):not(#_m8) #mainContent .crew-meter[data-full="true"] .crew-meter-head b { color: #2F6B4F !important; -webkit-text-fill-color: #2F6B4F !important; } /* Text laid over boss art in the phone card view stays light. */ :root[data-appearance="classic"][data-appearance="classic"]:not(#_m1):not(#_m2):not(#_m3):not(#_m4):not(#_m5):not(#_m6):not(#_m7):not(#_m8):not(#_m9) #mainContent #partyList[data-layout="cards"] .panel-top .crew-meter-head :is(b, small) { color: #FFF3DC !important; -webkit-text-fill-color: #FFF3DC !important; } @media (prefers-reduced-motion: reduce) { :root[data-appearance] #mainContent .crew-meter-fill::after, :root[data-appearance] #mainContent .crew-meter-fill::before, :root[data-appearance] #mainContent .crew-meter-track::after { animation: none !important; } } /* Narrow homes (the list view's side column): label and note stack cleanly instead of breaking mid-word. */ :root[data-appearance][data-appearance]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-head { flex-wrap: wrap; row-gap: 2px; } :root[data-appearance][data-appearance]:not(#_m1):not(#_m2):not(#_m3) #mainContent .crew-meter-head :is(b, small) { white-space: nowrap; } /* The meter always takes its own full row under the crew medal and copy (the summary is a row on phones). */ :root[data-appearance][data-appearance]:not(#_m1):not(#_m2):not(#_m3):not(#_m4) #mainContent .party-capacity-summary { flex-wrap: wrap !important; } :root[data-appearance][data-appearance]:not(#_m1):not(#_m2):not(#_m3):not(#_m4) #mainContent .party-capacity-summary > .crew-meter { flex: 1 0 100% !important; grid-column: 1 / -1 !important; grid-row: auto !important; order: 99; } /* ═════════════ v153 · loot money: gilded numerals with a maple coin ═════════════ Only real amounts carry .loot-money (not 等待售出 / 依出席比例). The sheen runs once when the figure appears — a looping text-gradient animation would repaint every frame. */ :root[data-appearance][data-appearance]:not(#_c1):not(#_c2):not(#_c3):not(#_c4):not(#_c5):not(#_c6):not(#_c7):not(#_c8):not(#_c9):not(#_c10) { --gold-1: #FFF3B0; --gold-2: #FFD35A; --gold-3: #E2A41C; --gold-4: #FFE9A3; --gold-edge: rgba(40, 20, 0, .6); --gold-drop: rgba(0, 0, 0, .55); } :root[data-appearance="classic"][data-appearance="classic"]:not(#_c1):not(#_c2):not(#_c3):not(#_c4):not(#_c5):not(#_c6):not(#_c7):not(#_c8):not(#_c9):not(#_c10) { --gold-1: #C98B22; --gold-2: #9A6210; --gold-3: #6E420A; --gold-4: #B7801E; --gold-edge: rgba(58, 30, 8, .35); --gold-drop: rgba(255, 246, 224, .9); } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_c1):not(#_c2):not(#_c3):not(#_c4):not(#_c5):not(#_c6):not(#_c7):not(#_c8):not(#_c9):not(#_c10) { --gold-1: #E6A91C; --gold-2: #C98708; --gold-3: #9E6400; --gold-4: #DDA022; --gold-edge: rgba(90, 55, 0, .3); --gold-drop: rgba(255, 255, 255, .95); } :root[data-appearance][data-appearance]:not(#_c1):not(#_c2):not(#_c3):not(#_c4):not(#_c5):not(#_c6):not(#_c7):not(#_c8):not(#_c9):not(#_c10) :is(#mainContent, .login-modal) .loot-money { display: inline-flex !important; align-items: center; gap: .26em; font-weight: 900 !important; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--gold-3) !important; text-shadow: none !important; background-image: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%), linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 40%, var(--gold-3) 64%, var(--gold-4) 100%) !important; background-size: 260% 100%, 100% 100% !important; background-position: 140% 0, 0 0 !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: .035em var(--gold-edge); filter: drop-shadow(0 .06em 0 var(--gold-drop)); animation: loot-sheen 1.6s ease-out .15s 1 both; } :root[data-appearance][data-appearance]:not(#_c1):not(#_c2):not(#_c3):not(#_c4):not(#_c5):not(#_c6):not(#_c7):not(#_c8):not(#_c9):not(#_c10) :is(#mainContent, .login-modal) .loot-money:hover { animation: loot-sheen 1.2s ease-out 1 both; } :root[data-appearance][data-appearance]:not(#_c1):not(#_c2):not(#_c3):not(#_c4):not(#_c5):not(#_c6):not(#_c7):not(#_c8):not(#_c9):not(#_c10) :is(#mainContent, .login-modal) .loot-money.loot-money-hero { font-size: clamp(1.9rem, 1.35rem + 1.5vw, 2.6rem) !important; line-height: 1.05 !important; } /* The maple coin: a gilt disc with a double rim and an embossed 楓. */ :root[data-appearance][data-appearance]:not(#_c1):not(#_c2):not(#_c3):not(#_c4):not(#_c5):not(#_c6):not(#_c7):not(#_c8):not(#_c9):not(#_c10) :is(#mainContent, .login-modal) .loot-money::before { content: '楓'; flex: none; display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; font-size: max(11px, .46em); font-weight: 900; font-family: 'Noto Serif TC', serif; -webkit-text-fill-color: #7A4B06; color: #7A4B06; -webkit-text-stroke: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF6C8 0 10%, #F7D25C 32%, #D69A1A 68%, #8A5A0A 100%); box-shadow: inset 0 0 0 .1em #FBE08A, inset 0 0 0 .19em #9A6710, 0 .08em .16em rgba(0, 0, 0, .45); } :root[data-appearance][data-appearance]:not(#_c1):not(#_c2):not(#_c3):not(#_c4):not(#_c5):not(#_c6):not(#_c7):not(#_c8):not(#_c9):not(#_c10) :is(#mainContent, .login-modal) .loot-money small { -webkit-text-fill-color: currentColor !important; font-size: max(11px, .45em); margin-left: .2em; opacity: .8; } @keyframes loot-sheen { from { background-position: 140% 0, 0 0; } to { background-position: -40% 0, 0 0; } } @media (prefers-reduced-motion: reduce) { :root[data-appearance] :is(#mainContent, .login-modal) .loot-money, :root[data-appearance] :is(#mainContent, .login-modal) .loot-money:hover { animation: none !important; } } /* ═════════════ v153 · elite readouts: 無視防禦 ≥ 90% breathes ═════════════ The aura is its own element whose opacity pulses (compositor-only), tinted per world. */ :root[data-appearance][data-appearance]:not(#_e1):not(#_e2):not(#_e3):not(#_e4):not(#_e5):not(#_e6) #mainContent :is(#characterList, #homeAdventurer) .character-stat[data-tier="elite"] { --aura: rgba(0, 255, 102, .55); isolation: isolate; overflow: visible; } :root[data-appearance][data-appearance]:not(#_e1):not(#_e2):not(#_e3):not(#_e4):not(#_e5):not(#_e6) #mainContent :is(#characterList, #homeAdventurer) .character-stat[data-tier="elite"] .stat-aura { position: absolute; inset: -2px; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px var(--aura), 0 0 18px var(--aura); opacity: .45; animation: elite-breathe 2.4s ease-in-out infinite; } :root[data-appearance][data-appearance]:not(#_e1):not(#_e2):not(#_e3):not(#_e4):not(#_e5):not(#_e6) #mainContent :is(#characterList, #homeAdventurer) .character-stat[data-tier="elite"] dt::after { content: '頂尖'; margin-left: .4em; padding: 0 .35em; font-size: max(11px, .85em); font-weight: 900; border-radius: 3px; background: var(--aura); color: #04120A; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_e1):not(#_e2):not(#_e3):not(#_e4):not(#_e5):not(#_e6) #mainContent :is(#characterList, #homeAdventurer) .character-stat[data-tier="elite"] { --aura: rgba(0, 255, 102, .6); } :root[data-appearance="maple"][data-appearance="maple"]:not(#_e1):not(#_e2):not(#_e3):not(#_e4):not(#_e5):not(#_e6) #mainContent :is(#characterList, #homeAdventurer) .character-stat[data-tier="elite"] { --aura: rgba(0, 255, 204, .65); } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_e1):not(#_e2):not(#_e3):not(#_e4):not(#_e5):not(#_e6) #mainContent :is(#characterList, #homeAdventurer) .character-stat[data-tier="elite"] { --aura: rgba(246, 198, 58, .75); } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_e1):not(#_e2):not(#_e3):not(#_e4):not(#_e5):not(#_e6) #mainContent :is(#characterList, #homeAdventurer) .character-stat[data-tier="elite"] dt::after { color: #5B4A12; } :root[data-appearance="classic"][data-appearance="classic"]:not(#_e1):not(#_e2):not(#_e3):not(#_e4):not(#_e5):not(#_e6):not(#_e7):not(#_e8) #mainContent :is(#characterList, #homeAdventurer) .character-stat[data-tier="elite"] { --aura: rgba(154, 46, 30, .5); } :root[data-appearance="classic"][data-appearance="classic"]:not(#_e1):not(#_e2):not(#_e3):not(#_e4):not(#_e5):not(#_e6):not(#_e7):not(#_e8) #mainContent :is(#characterList, #homeAdventurer) .character-stat[data-tier="elite"] dt::after { background: #9A2E1E; color: #FFF3DC; -webkit-text-fill-color: #FFF3DC; } @keyframes elite-breathe { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { :root[data-appearance] #mainContent .character-stat[data-tier="elite"] .stat-aura { animation: none !important; opacity: .8; } } /* ═════════════ v153 · form fields that belong to their world (focus states and shapes) ═════════════ */ :root[data-appearance="epic"][data-appearance="epic"]:not(#_f1):not(#_f2):not(#_f3):not(#_f4) :is(.login-modal, #appearanceModal) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-radius: 8px !important; border-color: rgba(148, 163, 184, .28) !important; background: rgba(6, 10, 18, .7) !important; transition: border-color .15s ease, box-shadow .15s ease; } :root[data-appearance="epic"][data-appearance="epic"]:not(#_f1):not(#_f2):not(#_f3):not(#_f4) :is(.login-modal, #appearanceModal) :is(input, select, textarea):focus-visible { outline: none !important; border-color: #FF9440 !important; box-shadow: 0 0 0 3px rgba(255, 122, 26, .22), 0 0 18px -4px rgba(255, 122, 26, .7) !important; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_f1):not(#_f2):not(#_f3):not(#_f4) :is(.login-modal, #appearanceModal) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-radius: 0 !important; border-color: rgba(0, 255, 204, .3) !important; background: rgba(0, 255, 204, .04) !important; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: border-color .15s ease, background-color .15s ease; } :root[data-appearance="maple"][data-appearance="maple"]:not(#_f1):not(#_f2):not(#_f3):not(#_f4) :is(.login-modal, #appearanceModal) :is(input, select, textarea):focus-visible { outline: none !important; border-color: #00FFCC !important; background: rgba(0, 255, 204, .09) !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_f1):not(#_f2):not(#_f3):not(#_f4) :is(.login-modal, #appearanceModal) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-radius: 16px !important; border: 2px solid #E4E9DC !important; background: #FFFEFA !important; transition: border-color .15s ease, box-shadow .2s ease; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_f1):not(#_f2):not(#_f3):not(#_f4) :is(.login-modal, #appearanceModal) :is(input, select, textarea):focus-visible { outline: none !important; border-color: #7A9A82 !important; box-shadow: 0 0 0 4px rgba(122, 154, 130, .22) !important; } :root[data-appearance][data-appearance]:not(#_f1):not(#_f2):not(#_f3):not(#_f4) :is(.login-modal, #appearanceModal) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent-check, #FF7A1A); } :root[data-appearance="maple"][data-appearance="maple"] { --accent-check: #00FFCC; } :root[data-appearance="cloud"][data-appearance="cloud"] { --accent-check: #476341; } :root[data-appearance="classic"][data-appearance="classic"] { --accent-check: #9A2E1E; } /* ═════════════ v153 · micro-interactions ═════════════ Every world: buttons give a small press, sidebar items lean in, the palette icon turns. 暖白繪本: cards and buttons bounce like soft jelly (up 3%, press to 97%). Transform-only, no repaint. */ :root[data-appearance][data-appearance]:not(#_i1):not(#_i2):not(#_i3) :is(#mainContent, .login-modal, #appearanceModal, .topbar, .bottom-nav) :is(button, .primary, [role="tab"]):not(:disabled) { transition: transform .14s cubic-bezier(.3, .7, .4, 1), box-shadow .15s ease, background-color .15s ease, border-color .15s ease; } :root[data-appearance][data-appearance]:not(#_i1):not(#_i2):not(#_i3) :is(#mainContent, .login-modal, #appearanceModal, .topbar, .bottom-nav) :is(button, .primary, [role="tab"]):not(:disabled):active { transform: scale(.97); } :root[data-appearance][data-appearance]:not(#_i1):not(#_i2):not(#_i3) .drawer-nav :is(button, a) { transition: transform .18s ease, background-color .15s ease; } :root[data-appearance][data-appearance]:not(#_i1):not(#_i2):not(#_i3) .drawer-nav :is(button, a):hover { transform: translateX(3px); } :root[data-appearance][data-appearance]:not(#_i1):not(#_i2):not(#_i3) .bottom-nav :is(button, a):active { transform: scale(.92); } :root[data-appearance][data-appearance]:not(#_i1):not(#_i2):not(#_i3) .appearance-shortcut svg { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); } :root[data-appearance][data-appearance]:not(#_i1):not(#_i2):not(#_i3) .appearance-shortcut:hover svg { transform: rotate(-24deg) scale(1.08); } :root[data-appearance][data-appearance]:not(#_i1):not(#_i2):not(#_i3) .appearance-shortcut:active { transform: scale(.94); } /* 暖白繪本 jelly. */ :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_i1):not(#_i2):not(#_i3):not(#_i4) :is(#mainContent, .login-modal, #appearanceModal, .topbar) :is(button, .primary, [role="tab"]):not(:disabled) { transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, background-color .2s ease; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_i1):not(#_i2):not(#_i3):not(#_i4) :is(#mainContent, .login-modal, #appearanceModal, .topbar) :is(button, .primary, [role="tab"]):not(:disabled):hover { transform: scale(1.03); } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_i1):not(#_i2):not(#_i3):not(#_i4) :is(#mainContent, .login-modal, #appearanceModal, .topbar) :is(button, .primary, [role="tab"]):not(:disabled):active { transform: scale(.97); transition-duration: .08s; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_i1):not(#_i2):not(#_i3):not(#_i4):not(#_i5):not(#_i6) #mainContent :is(#partyList .party-panel, #lootList .loot-card, #characterList .character-card, #homePartyList .raid-card):hover { transform: rotate(0) scale(1.03) !important; } :root[data-appearance="cloud"][data-appearance="cloud"]:not(#_i1):not(#_i2):not(#_i3):not(#_i4):not(#_i5):not(#_i6) #mainContent :is(#partyList .party-panel, #lootList .loot-card, #characterList .character-card, #homePartyList .raid-card):active { transform: rotate(0) scale(.97) !important; transition-duration: .08s !important; } @media (prefers-reduced-motion: reduce) { :root[data-appearance] :is(button, .primary, [role="tab"], .drawer-nav a, .drawer-nav button, .appearance-shortcut svg, .party-panel, .loot-card, .character-card, .raid-card) { transition: none !important; transform: none !important; } } /* ═════════════ v154 · direct roster: a pick list you can tick straight away ═════════════ Rows are