.nx-pwdb { --nx-paper: rgba(245, 237, 216, .97); --nx-paper-deep: rgba(231, 217, 187, .95); --nx-gold: #b28a4d; --nx-gold-soft: #d5b77a; --nx-brown: #493525; --nx-text: #55483d; --nx-muted: #8a7765; --nx-line: rgba(117, 84, 45, .18); max-width: 1180px; margin: 26px auto 58px; color: var(--nx-text); font: inherit; line-height: 1.55; } .nx-pwdb *, .nx-pwdb *::before, .nx-pwdb *::after { box-sizing: border-box; } .nx-pwdb h1, .nx-pwdb h2, .nx-pwdb h3 { color: var(--nx-brown); font-family: Georgia, serif; } .nx-pwdb__masthead, .nx-pwdb-sheet, .nx-pwdb-search, .nx-pwdb-nav, .nx-pwdb-content { border: 1px solid var(--nx-line); background: linear-gradient(135deg, var(--nx-paper), var(--nx-paper-deep)); box-shadow: 0 12px 34px rgba(73, 53, 37, .12), inset 0 0 35px rgba(255,255,255,.28); } .nx-pwdb__masthead { position: relative; overflow: hidden; padding: 35px 42px; text-align: center; } .nx-pwdb__masthead::before, .nx-pwdb-sheet::before { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px solid rgba(178,138,77,.18); } .nx-pwdb__eyebrow, .nx-pwdb__section-head span { color: var(--nx-gold); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .nx-pwdb__masthead h1 { margin: 5px 0 4px; font-size: clamp(34px,5vw,54px); font-weight: 500; } .nx-pwdb__masthead p { margin: 0 auto; max-width: 680px; color: var(--nx-muted); } .nx-pwdb__rule { width: 160px; height: 13px; margin: 17px auto 9px; background: url("/styles/noxaris/theme/images/noxaris/decor/07_gold_divider_small.png") center/contain no-repeat; } .nx-pwdb__stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; color: var(--nx-muted); font-size: 12px; } .nx-pwdb__stats strong { color: var(--nx-brown); } .nx-pwdb-search { margin-top: 14px; padding: 18px 22px; } .nx-pwdb-search label { display: block; margin-bottom: 7px; color: var(--nx-brown); font: 700 17px Georgia, serif; } .nx-pwdb-search > div { display: flex; gap: 9px; } .nx-pwdb-search input { flex: 1; min-width: 0; height: 45px; padding: 0 14px; border: 1px solid var(--nx-line); background: rgba(255,255,255,.7); color: var(--nx-text); outline: 0; } .nx-pwdb-search input:focus { border-color: var(--nx-gold); box-shadow: 0 0 0 3px rgba(178,138,77,.12); } .nx-pwdb-search button { min-width: 120px; border: 1px solid #94703b; color: #fff8e9; background: linear-gradient(#c39a58,#99713b); font-weight: 700; cursor: pointer; } .nx-pwdb-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 14px; margin-top: 14px; align-items: start; } .nx-pwdb-nav { padding: 18px 0; } .nx-pwdb-nav h2 { margin: 0 18px 11px; font-size: 20px; } .nx-pwdb-nav a { display: block; padding: 10px 18px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; color: var(--nx-text) !important; text-decoration: none !important; } .nx-pwdb-nav a:hover, .nx-pwdb-nav a.is-active { border-color: var(--nx-line); background: rgba(178,138,77,.13); color: var(--nx-brown) !important; } .nx-pwdb-nav a.is-active { box-shadow: inset 3px 0 var(--nx-gold); font-weight: 700; } .nx-pwdb-nav p { margin: 15px 18px 0; color: var(--nx-muted); font-size: 11px; } .nx-pwdb-content { min-height: 320px; padding: 22px; } .nx-pwdb__section-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 15px; } .nx-pwdb__section-head h2 { margin: 2px 0 0; font-size: 25px; } .nx-pwdb__section-head > strong { min-width: 43px; padding: 6px 10px; border: 1px solid var(--nx-line); color: var(--nx-brown); text-align: center; background: rgba(255,255,255,.45); } .nx-pwdb-results { display: grid; gap: 7px; } .nx-pwdb-card { position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 13px; padding: 11px 13px; border: 1px solid var(--nx-line); color: var(--nx-text); background: rgba(255,255,255,.34); box-shadow: 0 2px 8px rgba(73,53,37,.025); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .nx-pwdb-card:hover { border-color: rgba(178,138,77,.68); background: rgba(255,255,255,.58); box-shadow: 0 4px 14px rgba(73,53,37,.07); } .nx-pwdb-icon { display: block; width: 34px; height: 34px; border: 1px solid #7e694c; outline: 2px solid rgba(178,138,77,.22); background-color: #27231d; background-image: url("/ext/noxaris/knowledgebase/styles/all/theme/images/pwdb/iconlist_ivtrm.webp"); background-position: var(--nx-icon-x) var(--nx-icon-y); background-repeat: no-repeat; image-rendering: auto; } .nx-pwdb-icon.is-fallback { opacity: .72; } .nx-pwdb-icon--large { width: 34px; height: 34px; transform: scale(2); transform-origin: center; margin: 18px; image-rendering: pixelated; } .nx-pwdb-icon-trigger { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; outline: 0; background: transparent; cursor: help; } .nx-pwdb-icon-trigger:focus-visible { box-shadow: 0 0 0 2px var(--nx-gold); } .nx-pwdb-monster-badge { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #755a36; outline: 2px solid rgba(178,138,77,.22); color: #f3d798; background: radial-gradient(circle at 35% 28%, #665138, #241d16 72%); font: 700 19px Georgia, serif; } .nx-pwdb-monster-badge--large { width: 68px; height: 68px; flex: 0 0 68px; font-size: 34px; } .nx-pwdb-card__copy { min-width: 0; color: var(--nx-text) !important; text-decoration: none !important; } .nx-pwdb-card__copy strong, .nx-pwdb-card__copy > span { display: block; } .nx-pwdb-card__copy strong { overflow: hidden; color: var(--nx-brown); font: 700 16px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; } .nx-pwdb-card__copy > span { color: var(--nx-muted); font-size: 11px; } .nx-pwdb-card__match { color: var(--nx-muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; } .nx-pwdb-card__match--exact { color: #8c641f; } .nx-pwdb-card__arrow { color: var(--nx-gold) !important; font: 28px Georgia, serif; text-decoration: none !important; } .nx-pwdb-game-tooltip { position: absolute; z-index: 40; isolation: isolate; left: 45px; top: -8px; display: block; visibility: hidden; width: min(390px, calc(100vw - 54px)); max-height: none; overflow: visible; padding: 10px 12px; border: 1px solid #8f7b58; border-radius: 2px; opacity: 0; color: #f7f7f7; background: #030303 !important; background-image: none !important; box-shadow: 0 9px 28px rgba(0,0,0,.78), inset 0 0 0 1px rgba(255,255,255,.055); font: 12px/1.42 Arial, sans-serif; text-align: left; text-shadow: 0 1px 1px #000; white-space: normal; pointer-events: none; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease, visibility .12s; } .nx-pwdb-icon-trigger:hover .nx-pwdb-game-tooltip, .nx-pwdb-icon-trigger:focus .nx-pwdb-game-tooltip, .nx-pwdb-icon-trigger:focus-within .nx-pwdb-game-tooltip { visibility: visible; opacity: 1; transform: translateY(0); } .nx-pwdb-game-tooltip > strong { display: block; margin-bottom: 2px; color: #fff; font-size: 13px; } .nx-pwdb-game-tooltip > span { display: block; } .nx-pwdb-game-tooltip b { color: #fff; } .nx-pwdb-game-tooltip .is-green { color: #4cff27; } .nx-pwdb-game-tooltip .is-red { color: #ff3737; } .nx-pwdb-game-tooltip__type { margin-bottom: 5px; color: #a9a9a9; font-size: 10px; } .nx-pwdb-game-tooltip__description { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.16); } .nx-pwdb-game-tooltip > em { display: block; margin-top: 7px; color: #8f8f8f; font-size: 9px; font-style: normal; } .nx-pwdb-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: -5px 0 12px; color: var(--nx-muted); font-size: 11px; } .nx-pwdb-toolbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } .nx-pwdb-toolbar a { padding: 4px 8px; border: 1px solid transparent; color: #8f682f !important; text-decoration: none !important; } .nx-pwdb-toolbar a:hover, .nx-pwdb-toolbar a.is-active { border-color: var(--nx-line); background: rgba(178,138,77,.12); } .nx-pwdb-toolbar a.is-active { color: var(--nx-brown) !important; font-weight: 700; } .nx-pwdb-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 0 0 13px; } .nx-pwdb-pagination--bottom { margin: 15px 0 0; } .nx-pwdb-pagination a { display: grid; place-items: center; min-width: 31px; height: 31px; padding: 0 7px; border: 1px solid var(--nx-line); color: #8f682f !important; background: rgba(255,255,255,.3); text-decoration: none !important; } .nx-pwdb-pagination a:hover { border-color: var(--nx-gold); background: rgba(255,255,255,.62); } .nx-pwdb-pagination a.is-active { border-color: #a77d3f; color: #fff8e9 !important; background: linear-gradient(#bd9454,#96703c); font-weight: 700; } .nx-pwdb-pagination > span { margin-left: 6px; color: var(--nx-muted); font-size: 11px; } .nx-pwdb-welcome, .nx-pwdb-empty { display: grid; place-items: center; min-height: 270px; text-align: center; } .nx-pwdb-welcome h2 { margin: 8px 0 2px; } .nx-pwdb-welcome p, .nx-pwdb-empty span { color: var(--nx-muted); } .nx-pwdb-welcome__seal { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid var(--nx-gold); border-radius: 50%; color: var(--nx-gold); font: 34px Georgia, serif; } .nx-pwdb__crumbs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; color: var(--nx-muted); font-size: 12px; } .nx-pwdb__crumbs a { color: #8f682f !important; } .nx-pwdb-sheet { position: relative; padding: 34px; } .nx-pwdb-item-head { position: relative; display: flex; align-items: center; gap: 28px; padding: 8px 10px 27px; border-bottom: 1px solid var(--nx-line); } .nx-pwdb-item-head h1 { margin: 3px 0 1px; font-size: clamp(29px,4vw,43px); font-weight: 500; } .nx-pwdb-item-head p { margin: 0; color: var(--nx-muted); } .nx-pwdb-description { margin: 24px 10px 0; padding: 17px 20px; border-left: 3px solid var(--nx-gold); background: rgba(255,255,255,.42); } .nx-pwdb-description h2 { margin: 0 0 7px; font-size: 18px; } .nx-pwdb-description div { white-space: normal; } .nx-pwdb-section { position: relative; margin: 25px 10px 0; } .nx-pwdb-properties { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; border: 1px solid var(--nx-line); background: var(--nx-line); gap: 1px; } .nx-pwdb-properties > div { padding: 12px 14px; background: rgba(255,255,255,.48); } .nx-pwdb-properties dt { color: var(--nx-muted); font-size: 11px; } .nx-pwdb-properties dd { margin: 4px 0 0; color: var(--nx-brown); font-weight: 700; } .nx-pwdb-properties .is-wide { grid-column: span 2; } .nx-pwdb-sources p { margin: 0; padding: 15px 17px; border: 1px dashed var(--nx-line); color: var(--nx-muted); background: rgba(255,255,255,.3); } .nx-pwdb-technical { position: relative; margin: 27px 10px 0; border-top: 1px solid var(--nx-line); } .nx-pwdb-technical summary { padding: 14px 0; color: var(--nx-muted); cursor: pointer; } .nx-pwdb-technical dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin: 0; background: var(--nx-line); } .nx-pwdb-technical dl > div { min-width: 0; padding: 9px 11px; background: rgba(255,255,255,.48); } .nx-pwdb-technical dt { color: var(--nx-muted); font: 10px monospace; } .nx-pwdb-technical dd { overflow-wrap: anywhere; margin: 3px 0 0; color: var(--nx-text); font: 11px/1.4 monospace; white-space: pre-wrap; } .nx-pwdb__footer { padding-top: 16px; color: var(--nx-muted); font-size: 10px; text-align: center; } @media (max-width: 760px) { .nx-pwdb-layout { grid-template-columns: 1fr; } .nx-pwdb-nav { display: flex; flex-wrap: wrap; padding: 10px; } .nx-pwdb-nav h2, .nx-pwdb-nav p { width: 100%; margin: 5px 8px; } .nx-pwdb-nav a { padding: 8px 10px; } .nx-pwdb-properties { grid-template-columns: repeat(2,minmax(0,1fr)); } .nx-pwdb__masthead, .nx-pwdb-sheet { padding: 25px 18px; } } @media (max-width: 480px) { .nx-pwdb-search > div { flex-direction: column; } .nx-pwdb-search button { min-height: 43px; } .nx-pwdb-content { padding: 14px; } .nx-pwdb-item-head { align-items: flex-start; flex-direction: column; gap: 5px; } .nx-pwdb-icon--large { margin: 18px; } .nx-pwdb-properties, .nx-pwdb-technical dl { grid-template-columns: 1fr; } .nx-pwdb-properties .is-wide { grid-column: auto; } .nx-pwdb-game-tooltip { position: fixed; right: 12px; bottom: 12px; left: 12px; top: auto; width: auto; } .nx-pwdb-toolbar { align-items: flex-start; flex-direction: column; } .nx-pwdb-pagination > span { width: 100%; margin: 3px 0 0; } } .nx-pwdb-game-tooltip .is-gold { color: #ffd35a; } .nx-pwdb-game-tooltip .is-muted { color: #b8b8b8; } .nx-pwdb-game-tooltip .is-blue { color: #63c9ff; } .nx-pwdb-game-tooltip .is-cyan { color: #43d7ff; font-weight: 700; } .nx-pwdb-game-tooltip .is-section { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255,211,90,.35); font-weight: 700; } .nx-pwdb-game-tooltip span b { color: inherit; } .nx-pwdb-game-tooltip { max-height: min(78vh, 620px); overflow-y: auto; } /* NOXARIS PWDB AUTOMATIC RELATIONS */ .nx-pwdb-sources .nx-pwdb__section-head > strong { min-width: 43px; padding: 6px 10px; border: 1px solid var(--nx-line); color: var(--nx-brown); text-align: center; background: rgba(255,255,255,.45); } .nx-pwdb-relations { display: grid; gap: 15px; } .nx-pwdb-relation-group { border: 1px solid var(--nx-line); background: rgba(255,255,255,.25); } .nx-pwdb-relation-group > header { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--nx-line); background: rgba(178,138,77,.09); } .nx-pwdb-relation-group > header span { color: var(--nx-gold); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .nx-pwdb-relation-group > header h3 { margin: 1px 0 0; font-size: 18px; } .nx-pwdb-relation-group > header > strong { color: var(--nx-muted); font-size: 12px; } .nx-pwdb-relation-list { display: grid; } .nx-pwdb-relation-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 10px 13px; border-top: 1px solid rgba(117,84,45,.1); background: rgba(255,255,255,.36); } .nx-pwdb-relation-row:first-child { border-top: 0; } .nx-pwdb-relation-row:hover { background: rgba(255,255,255,.63); } .nx-pwdb-relation-row.is-child { padding-left: 28px; } .nx-pwdb-relation-row.is-location { border-left: 3px solid rgba(178,138,77,.55); } .nx-pwdb-relation-row > div { min-width: 0; } .nx-pwdb-relation-row > div > a, .nx-pwdb-relation-row > div > strong { display: block; overflow-wrap: anywhere; color: var(--nx-brown) !important; font-weight: 700; text-decoration: none !important; } .nx-pwdb-relation-row > div > a:hover { color: #8f682f !important; text-decoration: underline !important; } .nx-pwdb-relation-row > div > span { display: block; margin-top: 2px; overflow-wrap: anywhere; color: var(--nx-muted); font-size: 11px; } .nx-pwdb-relation-arrow { color: var(--nx-gold) !important; font: 25px Georgia, serif; text-decoration: none !important; } @media (max-width: 480px) { .nx-pwdb-relation-row { padding: 9px 10px; } .nx-pwdb-relation-row.is-child { padding-left: 18px; } } /* NOXARIS PWDB GAME TOOLTIP STYLE 2026-09-18 */ .nx-pwdb-game-tooltip { width: min(370px, calc(100vw - 54px)); max-height: none !important; overflow: visible !important; padding: 12px 14px; border: 1px solid #c38b3f; border-radius: 4px; color: #d9cdbd; background: linear-gradient( 180deg, #5a2a10 0%, #3b1909 56%, #2c1106 100% ) !important; background-image: linear-gradient( 180deg, #5a2a10 0%, #3b1909 56%, #2c1106 100% ) !important; box-shadow: 0 9px 28px rgba(0, 0, 0, .68), inset 0 0 0 1px rgba(255, 210, 128, .12); color-scheme: dark; font: 12px/1.45 Arial, sans-serif; text-shadow: 0 1px 1px #120500; scrollbar-width: none; } .nx-pwdb-game-tooltip::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } .nx-pwdb-game-tooltip > strong { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid rgba(214, 157, 77, .35); color: #f2d99a; font-size: 13px; } .nx-pwdb-game-tooltip > span:not( .nx-pwdb-game-tooltip__type ):not( .nx-pwdb-game-tooltip__description ) { display: flex; justify-content: space-between; gap: 12px; } .nx-pwdb-game-tooltip b { color: #f5eee4; } .nx-pwdb-game-tooltip__type { margin-bottom: 7px; color: #c6aa89; } .nx-pwdb-game-tooltip .is-gold { color: #f1d38a; } .nx-pwdb-game-tooltip .is-muted { color: #d5c7b6; } .nx-pwdb-game-tooltip .is-blue { color: #65c8ff; } .nx-pwdb-game-tooltip .is-cyan { color: #55d8ff; font-weight: 700; } .nx-pwdb-game-tooltip .is-green { color: #75e768; } .nx-pwdb-game-tooltip .is-red { color: #f0d8b9; } .nx-pwdb-game-tooltip .is-section { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(222, 166, 85, .48); color: #f1d38a; font-weight: 700; } .nx-pwdb-game-tooltip span b { color: inherit; } /* NOXARIS TOOLTIP BINDING SPACING */ .nx-pwdb-game-tooltip .is-blue + .is-cyan { margin-top: 14px; } /* ========================================================== NOXARIS PWDB — GAME TOOLTIP PALETTE V1 Perfect World visual semantics: base = white addon = cyan-blue binding = bright cyan suite bonus = blue-violet suite items = green suite title = gold ========================================================== */ .nx-pwdb-game-tooltip { color: #f3f3f3 !important; background: #050505 !important; border-color: #66553b !important; line-height: 1.38 !important; } .nx-pwdb-game-tooltip > strong { color: #ffb42e !important; margin-bottom: 7px !important; } .nx-pwdb-game-tooltip b { color: inherit !important; } /* Additional characteristics. */ .nx-pwdb-game-tooltip .is-blue { color: #45ddff !important; } /* Bind / drop / trade / account restrictions. */ .nx-pwdb-game-tooltip .is-cyan { color: #12e7ff !important; } /* Suite title and special section headings. */ .nx-pwdb-game-tooltip .is-gold { color: #ffd34f !important; } /* Set bonus thresholds — game-like blue/violet. */ .nx-pwdb-game-tooltip .is-suite-bonus { color: #8c96ff !important; } /* Every item belonging to the suite. */ .nx-pwdb-game-tooltip .is-suite-item { color: #4cff27 !important; } /* Keep explicit error/restriction red semantic. */ .nx-pwdb-game-tooltip .is-red { color: #ff5656 !important; } /* ---------------- GROUP SPACING ---------------- */ /* base -> random/additional characteristics */ .nx-pwdb-game-tooltip > span:not(.is-blue) + span.is-blue { margin-top: 8px; } /* characteristics -> binding/restrictions */ .nx-pwdb-game-tooltip > span:not(.is-cyan) + span.is-cyan { margin-top: 9px; } /* restrictions -> suite title */ .nx-pwdb-game-tooltip > span:not(.is-section) + span.is-section { margin-top: 10px; } /* suite title -> first bonus */ .nx-pwdb-game-tooltip > span.is-section + span.is-suite-bonus { margin-top: 4px; } /* set bonuses -> list of set items */ .nx-pwdb-game-tooltip > span.is-suite-bonus + span.is-suite-item { margin-top: 9px; } /* set items -> price / stack / final common rows */ .nx-pwdb-game-tooltip > span.is-suite-item + span:not(.is-suite-item) { margin-top: 9px; } /* ========================================================== NOXARIS PWDB V0.3.0 — FORUM NATIVE CATALOG ========================================================== */ .nx-pwdb-nav h3 { margin: 18px 18px 6px; padding-top: 13px; border-top: 1px solid var(--nx-line); color: var(--nx-gold); font: 700 10px/1.3 inherit; letter-spacing: .13em; text-transform: uppercase; } .nx-pwdb-nav h3:first-of-type { margin-top: 9px; padding-top: 0; border-top: 0; } .nx-pwdb-nav a.is-active { background: transparent; box-shadow: inset 3px 0 var(--nx-gold); } .nx-pwdb-nav__subtypes { margin-top: 12px; border-top: 1px solid var(--nx-line); padding-top: 1px; } .nx-pwdb-nav__subtypes a { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 8px; padding-top: 7px; padding-bottom: 7px; font-size: 12px; } .nx-pwdb-nav__subtypes a small { color: var(--nx-muted); font-size: 10px; } .nx-pwdb-card { overflow: visible; } .nx-pwdb-card:focus { outline: 1px solid var(--nx-gold); outline-offset: 1px; } .nx-pwdb-card__visual { display: grid; place-items: center; width: 38px; height: 38px; } .nx-pwdb-kind-badge { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 5px; border: 1px solid #7e694c; outline: 2px solid rgba(178,138,77,.18); color: #f0d59c; background: #3c2d20; font: 700 13px/1 Arial, sans-serif; } .nx-pwdb-kind-badge--large { min-width: 68px; height: 68px; padding: 0 10px; font-size: 22px; } .nx-pwdb-card > .nx-pwdb-game-tooltip { left: 50px; top: calc(100% - 4px); } .nx-pwdb-card:hover > .nx-pwdb-game-tooltip, .nx-pwdb-card:focus > .nx-pwdb-game-tooltip, .nx-pwdb-card:focus-within > .nx-pwdb-game-tooltip { visibility: visible; opacity: 1; transform: translateY(0); } .nx-pwdb-card__copy strong { font-family: inherit; } .nx-pwdb__masthead h1, .nx-pwdb__section-head h2, .nx-pwdb-nav h2, .nx-pwdb-item-head h1, .nx-pwdb-description h2, .nx-pwdb-relation-group > header h3 { font-family: inherit; } .nx-pwdb-welcome__seal { display: none; } @media (max-width: 760px) { .nx-pwdb-nav h3 { width: 100%; margin: 12px 8px 4px; } .nx-pwdb-nav__subtypes { width: 100%; display: flex; flex-wrap: wrap; } .nx-pwdb-nav__subtypes h3 { width: 100%; } .nx-pwdb-nav__subtypes a { display: inline-flex; width: auto; gap: 6px; } } @media (max-width: 480px) { .nx-pwdb-card > .nx-pwdb-game-tooltip { position: fixed; right: 12px; bottom: 12px; left: 12px; top: auto; width: auto; max-height: min(70vh, 540px) !important; overflow-y: auto !important; } } /* ========================================================== NOXARIS PWDB V0.3.1 — NPC SHOP Game layout: page tabs + fixed 8x4 inventory grid. Forum palette remains NOXARIS parchment/gold. ========================================================== */ .nx-pwdb-shop__service { margin: -8px 0 10px; color: var(--nx-muted); font-size: 11px; } .nx-pwdb-shop__window { width: min(100%, 470px); padding: 10px; border: 1px solid rgba(93,65,33,.55); background: linear-gradient(180deg, rgba(61,44,29,.97), rgba(35,26,19,.985)); box-shadow: inset 0 0 0 1px rgba(220,181,112,.15), 0 8px 22px rgba(73,53,37,.13); } .nx-pwdb-shop__tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2px; margin-bottom: 8px; } .nx-pwdb-shop__tab { min-width: 0; min-height: 28px; padding: 4px 6px; overflow: hidden; border: 1px solid #826338; color: #ead7ad; background: linear-gradient(#5a4327,#322516); font: 11px/1.15 inherit; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .nx-pwdb-shop__tab:hover, .nx-pwdb-shop__tab.is-active { border-color: #c39a58; color: #fff1c7; background: linear-gradient(#806238,#49361e); } .nx-pwdb-shop__page { display: none; } .nx-pwdb-shop__page.is-active { display: block; } .nx-pwdb-shop__grid { display: grid; grid-template-columns: repeat(8, 42px); grid-auto-rows: 42px; gap: 3px; justify-content: start; } .nx-pwdb-shop-slot { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 3px; border: 1px solid #735735; outline: 1px solid rgba(0,0,0,.45); background: linear-gradient(135deg, #251c13, #120e0a); box-shadow: inset 0 0 0 2px rgba(139,100,53,.16), inset 0 0 10px rgba(0,0,0,.55); text-decoration: none !important; } .nx-pwdb-shop-slot:hover, .nx-pwdb-shop-slot:focus { z-index: 50; border-color: #d1a453; box-shadow: inset 0 0 0 2px rgba(231,190,105,.20), 0 0 8px rgba(207,158,74,.28); } .nx-pwdb-shop-slot.is-empty { cursor: default; opacity: .72; } .nx-pwdb-shop-slot .nx-pwdb-icon { width: 32px; height: 32px; outline: 0; border-color: rgba(185,148,83,.45); } .nx-pwdb-shop-slot > .nx-pwdb-game-tooltip { left: 44px; top: -7px; width: min(390px, calc(100vw - 80px)); } .nx-pwdb-shop-slot:hover > .nx-pwdb-game-tooltip, .nx-pwdb-shop-slot:focus > .nx-pwdb-game-tooltip, .nx-pwdb-shop-slot:focus-within > .nx-pwdb-game-tooltip { visibility: visible; opacity: 1; transform: translateY(0); } @media (max-width: 620px) { .nx-pwdb-shop__window { width: 100%; overflow-x: auto; } .nx-pwdb-shop__tabs { min-width: 357px; grid-template-columns: repeat(4, minmax(84px,1fr)); } .nx-pwdb-shop__grid { min-width: 357px; } .nx-pwdb-shop-slot > .nx-pwdb-game-tooltip { position: fixed; right: 12px; bottom: 12px; left: 12px; top: auto; width: auto; max-height: min(70vh, 540px) !important; overflow-y: auto !important; } } /* ========================================================== NOXARIS PWDB V0.3.2 — DESCRIPTION / GAME SERVICES / UX ========================================================== */ .nx-pwdb-description { font-size: 13px; line-height: 1.72; background: rgba(255,255,255,.42); } .nx-pwdb-description > div { color: #5d4c3f; } .nx-pwdb-description br + br { line-height: 2.2; } .nx-pwdb-service-menu__list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; } .nx-pwdb-service-menu__item { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: start; gap: 8px; padding: 10px 12px; border: 1px solid var(--nx-line); color: var(--nx-text) !important; background: rgba(255,255,255,.36); text-decoration: none !important; } .nx-pwdb-service-menu__item:hover { background: rgba(255,255,255,.66); border-color: rgba(178,138,77,.52); } .nx-pwdb-service-menu__bullet { color: var(--nx-gold); } .nx-pwdb-service-menu__item strong, .nx-pwdb-service-menu__item small { display:block; } .nx-pwdb-service-menu__item strong { color: var(--nx-brown); } .nx-pwdb-service-menu__item small { margin-top:2px; color:var(--nx-muted); font-size:10px; } .nx-pwdb-game-window { width: min(100%, 470px); padding: 10px; border: 1px solid rgba(93,65,33,.55); background: linear-gradient(180deg, rgba(61,44,29,.97), rgba(35,26,19,.985)); box-shadow: inset 0 0 0 1px rgba(220,181,112,.15), 0 8px 22px rgba(73,53,37,.13); color: #ead7ad; } .nx-pwdb-craft .nx-pwdb-shop-slot, .nx-pwdb-polish .nx-pwdb-shop-slot { appearance:none; -webkit-appearance:none; } .nx-pwdb-craft .nx-pwdb-shop-slot.is-selected { border-color:#f0c56f; box-shadow: inset 0 0 0 2px rgba(231,190,105,.28), 0 0 9px rgba(225,174,81,.35); } .nx-pwdb-craft__detail, .nx-pwdb-polish__cost { display:grid; gap:6px; margin-top:10px; padding:10px 12px; border-top:1px solid #806238; color:#d8c49b; font-size:11px; } .nx-pwdb-craft__detail > strong { color:#ffd36a; font-size:13px; } .nx-pwdb-craft__detail b, .nx-pwdb-polish__cost b { color:#f1cc79; } .nx-pwdb-section-actions { display:flex; align-items:center; gap:8px; } .nx-pwdb-section-actions > strong { min-width:43px; padding:6px 10px; border:1px solid var(--nx-line); text-align:center; background:rgba(255,255,255,.45); } .nx-pwdb-section-actions > a { padding:6px 9px; border:1px solid var(--nx-line); color:#8f682f !important; background:rgba(255,255,255,.30); text-decoration:none !important; font-size:11px; } .nx-pwdb-section-actions > a:hover { border-color:var(--nx-gold); background:rgba(255,255,255,.60); } .nx-pwdb-to-top { position:fixed; right:clamp(16px, 3vw, 44px); bottom:clamp(18px, 3vw, 38px); z-index:120; display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid rgba(148,112,59,.78); color:#6a4a24; background:linear-gradient(180deg,rgba(255,249,233,.97),rgba(226,207,164,.97)); box-shadow:0 7px 20px rgba(73,53,37,.20), inset 0 0 0 1px rgba(255,255,255,.45); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s ease,transform .18s ease,visibility .18s; cursor:pointer; } .nx-pwdb-to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); } .nx-pwdb-to-top span { color:#a36f2f; font-size:18px; line-height:1; } .nx-pwdb-to-top small { font:700 11px/1 inherit; } .nx-pwdb-to-top:hover { border-color:#b6843f; background:#fff7e5; } @media(max-width:620px){ .nx-pwdb-service-menu__list{grid-template-columns:1fr;} .nx-pwdb-game-window{width:100%;overflow-x:auto;} .nx-pwdb-to-top small{display:none;} .nx-pwdb-to-top{padding:10px 12px;} } /* V0.3.3 lazy NPC services */ .nx-pwdb-service-menu__item.is-active { box-shadow: inset 0 0 0 1px rgba(150,108,42,.32), 0 5px 16px rgba(70,48,25,.08); background: linear-gradient(180deg, rgba(255,250,232,.96), rgba(239,222,180,.72)); } .nx-pwdb-section-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } .nx-pwdb-section-actions > a { font-size:12px; font-weight:700; color:#7c5a2e; text-decoration:none; border-bottom:1px dotted rgba(124,90,46,.45); } .nx-pwdb-section-actions > a:hover { color:#4f351a; } /* ========================================================== NOXARIS PWDB V0.3.4 — GAME-FAITHFUL CRAFT + TAB LAZY LOAD ========================================================== */ .nx-pwdb-service-menu__item.is-passive { cursor: default; opacity: .78; } .nx-pwdb-service-menu__item.is-passive:hover { background: rgba(255,255,255,.36); border-color: var(--nx-line); } .nx-pwdb-game-title { position: relative; display: flex; align-items: center; justify-content: center; min-height: 38px; margin: -3px 28px 8px; padding: 5px 28px 6px; border: 1px solid #87683c; border-radius: 16px 16px 4px 4px; color: #f4dfae; background: linear-gradient(180deg, rgba(99,121,109,.96), rgba(64,70,55,.96) 52%, rgba(45,37,26,.98) 53%, rgba(31,24,18,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.28); font: 22px/1.05 Georgia, "Times New Roman", serif; text-shadow: 0 1px 2px #000; } .nx-pwdb-game-title::before, .nx-pwdb-game-title::after { content: ""; position: absolute; top: 50%; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, #d5b46f); } .nx-pwdb-game-title::before { left: -25px; } .nx-pwdb-game-title::after { right: -25px; transform: scaleX(-1); } .nx-pwdb-game-window--shop, .nx-pwdb-craft-window { width: min(100%, 470px); padding: 12px 12px 14px; border: 1px solid #7d6038; background: radial-gradient(circle at 50% -20%, rgba(119,91,48,.22), transparent 46%), linear-gradient(180deg, #3c2c1d 0%, #211811 100%); box-shadow: inset 0 0 0 1px rgba(229,191,119,.12), inset 0 0 34px rgba(0,0,0,.30), 0 10px 24px rgba(50,32,18,.18); } .nx-pwdb-craft__tabs .nx-pwdb-shop__tab { display: flex; align-items: center; justify-content: center; min-height: 26px; color: #ead7ad !important; text-decoration: none !important; } .nx-pwdb-craft__tabs .nx-pwdb-shop__tab.is-active { color: #fff2c7 !important; box-shadow: inset 0 0 0 1px rgba(238,197,110,.20); } .nx-pwdb-craft__body { position: relative; min-height: 430px; } .nx-pwdb-craft__grid { margin: 0 auto; } .nx-pwdb-craft__details { margin-top: 10px; padding-top: 9px; border-top: 1px solid #765a34; } .nx-pwdb-craft-detail { display: none; } .nx-pwdb-craft-detail.is-active { display: block; } .nx-pwdb-craft-detail__amount { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: #f0cf77; font-size: 12px; } .nx-pwdb-craft-detail__amount > span:first-child { display: flex; align-items: center; gap: 7px; } .nx-pwdb-craft-detail__amount strong { min-width: 42px; padding: 3px 8px; border: 1px solid #5d4528; color: #f3e4bf; background: #17110c; text-align: center; } .nx-pwdb-craft-detail__money { display: flex; align-items: center; gap: 7px; min-width: 118px; padding: 3px 9px; border: 1px solid #5d4528; color: #f3e4bf; background: #17110c; } .nx-pwdb-craft-detail__money i { width: 14px; height: 14px; border: 1px solid #e4bd4c; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff2a0 0 15%, #e1b72b 35%, #8d6612 100%); box-shadow: 0 0 3px rgba(255,215,77,.45); } .nx-pwdb-craft-detail__materials > b, .nx-pwdb-craft-detail__result > b { display: block; margin-bottom: 6px; color: #f1c957; font-size: 12px; } .nx-pwdb-craft-materials { display: grid; grid-template-columns: repeat(4, 58px); gap: 8px 12px; min-height: 58px; margin-bottom: 10px; } .nx-pwdb-craft-material { display: grid; grid-template-rows: 44px 18px; width: 58px; color: #ead7ad !important; text-align: center; text-decoration: none !important; } .nx-pwdb-craft-material .nx-pwdb-shop-slot { width: 44px; height: 44px; margin: 0 auto; } .nx-pwdb-craft-material__count, .nx-pwdb-craft-result__count { display: block; min-width: 44px; height: 18px; padding: 1px 4px; border: 1px solid #4c3922; color: #f1e3bf; background: #17110c; font-size: 11px; line-height: 14px; text-align: center; } .nx-pwdb-craft-material:hover .nx-pwdb-shop-slot, .nx-pwdb-craft-result:hover .nx-pwdb-shop-slot { border-color: #d0a451; box-shadow: 0 0 7px rgba(211,165,80,.26); } .nx-pwdb-craft-detail__requirements { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; padding: 7px 0; border-top: 1px solid rgba(128,98,56,.45); border-bottom: 1px solid rgba(128,98,56,.45); color: #f1c957; } .nx-pwdb-craft-detail__requirements b { color: #f0dcaa; } .nx-pwdb-craft-detail__result { margin-top: 9px; } .nx-pwdb-craft-result { display: grid; grid-template-columns: 44px 72px minmax(0,1fr); align-items: end; gap: 7px; color: #f0dfb4 !important; text-decoration: none !important; } .nx-pwdb-craft-result .nx-pwdb-shop-slot { width: 44px; height: 44px; } .nx-pwdb-craft-result__name { align-self: center; overflow: hidden; color: #f0dfb4; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .nx-pwdb-craft__loader { position: absolute; inset: 0; z-index: 40; display: grid; place-content: center; gap: 10px; background: rgba(25,18,12,.78); color: #f0d79b; text-align: center; } .nx-pwdb-craft__loader[hidden] { display: none; } .nx-pwdb-craft__spinner { width: 34px; height: 34px; margin: 0 auto; border: 3px solid rgba(225,190,119,.25); border-top-color: #e1be77; border-radius: 50%; animation: nx-pwdb-spin .75s linear infinite; } @keyframes nx-pwdb-spin { to { transform: rotate(360deg); } } .nx-pwdb-craft.is-loading .nx-pwdb-craft__grid, .nx-pwdb-craft.is-loading .nx-pwdb-craft__details { opacity: .32; } @media (max-width: 620px) { .nx-pwdb-game-title { margin-left: 24px; margin-right: 24px; font-size: 19px; } .nx-pwdb-craft-materials { grid-template-columns: repeat(4, 52px); gap: 7px; } .nx-pwdb-craft-material { width: 52px; } } /* ========================================================== NOXARIS PWDB V0.3.5.3 — SIDE-BY-SIDE TOOLTIP COMPARE Click a craft item to pin its tooltip; hover another item to show the second tooltip beside it. ========================================================== */ .nx-pwdb-tooltip-compare[hidden], .nx-pwdb-tooltip-compare__column[hidden] { display: none !important; } .nx-pwdb-tooltip-compare { position: fixed; z-index: 260; top: var(--nx-compare-top, 92px); right: auto; left: var(--nx-compare-left, 12px); display: flex; align-items: flex-start; justify-content: flex-end; gap: 10px; max-width: calc(100vw - 32px); pointer-events: none; } .nx-pwdb-tooltip-compare__column { display: grid; gap: 4px; width: min(315px, calc((100vw - 52px) / 2)); } .nx-pwdb-tooltip-compare__caption { justify-self: start; padding: 3px 7px; border: 1px solid rgba(155,119,64,.72); color: #f0d397; background: rgba(44,31,20,.96); box-shadow: 0 3px 9px rgba(0,0,0,.25); font: 700 10px/1.2 Arial,sans-serif; text-transform: uppercase; letter-spacing: .05em; } .nx-pwdb-tooltip-compare__host { min-width: 0; } .nx-pwdb-tooltip-compare .nx-pwdb-game-tooltip.is-compare-clone { position: relative !important; inset: auto !important; display: block !important; visibility: visible !important; width: 100% !important; max-width: none !important; max-height: min(72vh, 690px) !important; overflow-y: auto !important; opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: none !important; } .nx-pwdb-craft.has-tooltip-compare .nx-pwdb-craft__grid .nx-pwdb-game-tooltip { visibility: hidden !important; opacity: 0 !important; } .nx-pwdb-craft.has-tooltip-compare .nx-pwdb-craft__grid .nx-pwdb-shop-slot.is-selected { z-index: 2; border-color: #f4d27d; box-shadow: inset 0 0 0 2px rgba(248,212,126,.34), 0 0 11px rgba(240,187,78,.48); } @media (max-width: 900px) { .nx-pwdb-tooltip-compare { top: auto; right: 10px; bottom: 10px; left: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-width: none; } .nx-pwdb-tooltip-compare__column { width: auto; min-width: 0; } .nx-pwdb-tooltip-compare .nx-pwdb-game-tooltip.is-compare-clone { max-height: 42vh !important; } } @media (max-width: 620px) { .nx-pwdb-tooltip-compare { grid-template-columns: 1fr; } .nx-pwdb-tooltip-compare__column[data-nx-compare-hover] { display: none !important; } .nx-pwdb-tooltip-compare .nx-pwdb-game-tooltip.is-compare-clone { max-height: 46vh !important; } } /* V0.3.5.4 — full game tooltips for material/result row */ .nx-pwdb-craft-material, .nx-pwdb-craft-result { position: relative; } .nx-pwdb-craft-material > .nx-pwdb-game-tooltip, .nx-pwdb-craft-result > .nx-pwdb-game-tooltip { left: 52px; top: -8px; z-index: 80; } .nx-pwdb-craft-material:hover > .nx-pwdb-game-tooltip, .nx-pwdb-craft-material:focus > .nx-pwdb-game-tooltip, .nx-pwdb-craft-material:focus-within > .nx-pwdb-game-tooltip, .nx-pwdb-craft-result:hover > .nx-pwdb-game-tooltip, .nx-pwdb-craft-result:focus > .nx-pwdb-game-tooltip, .nx-pwdb-craft-result:focus-within > .nx-pwdb-game-tooltip { visibility: visible; opacity: 1; transform: translateY(0); } .nx-pwdb-craft-result > .nx-pwdb-game-tooltip { left: 48px; } @media (max-width: 900px) { .nx-pwdb-craft-material > .nx-pwdb-game-tooltip, .nx-pwdb-craft-result > .nx-pwdb-game-tooltip { position: fixed; right: 12px; bottom: 12px; left: 12px; top: auto; width: auto; } } /* V0.3.5.5 — compare pair is anchored to the actual hovered recipe cell */ .nx-pwdb-tooltip-compare { will-change: left, top; } /* NOXARIS_PWDB_CATALOG_SINGLE_TOOLTIP_V1 */ /* * Catalog cards are not .nx-kb-item and therefore are not managed by * noxaris_kb_tooltip_viewport_v1.js. * * tabindex/focus on a previous card must never keep its tooltip visible * while another card is hovered. */ .nx-pwdb-card > .nx-pwdb-game-tooltip { visibility: hidden !important; opacity: 0 !important; transform: translateY(4px); } .nx-pwdb-card:focus:not(:hover) > .nx-pwdb-game-tooltip, .nx-pwdb-card:focus-within:not(:hover) > .nx-pwdb-game-tooltip { visibility: hidden !important; opacity: 0 !important; } .nx-pwdb-card:hover > .nx-pwdb-game-tooltip { visibility: visible !important; opacity: 1 !important; transform: translateY(0); } /* Inactive service tooltips must not extend the page's scrollable width. */ .nx-pwdb-shop-slot:not(:hover):not(:focus):not(:focus-within) > .nx-pwdb-game-tooltip, .nx-pwdb-craft-material:not(:hover):not(:focus):not(:focus-within) > .nx-pwdb-game-tooltip, .nx-pwdb-craft-result:not(:hover):not(:focus):not(:focus-within) > .nx-pwdb-game-tooltip { display: none; }