:root { color-scheme: dark; --bg: #050606; --panel: #0b0c0e; --card: #202b3b; --card-2: #3a4659; --line: #202225; --text: #f7f7f7; --muted: #aab0ba; --link: #4b93ff; --gold: #ffc861; --accent: #ffbd71; --red: #e36e4d; --blue: #6faad8; --bg-accent: rgba(32, 50, 69, 0.92); --bg-danger: rgba(76, 22, 28, 0.9); --text-danger: #ffd6d6; --tooltip-max: min(380px, calc(100vw - 20px)); } * { box-sizing: border-box; } @media (min-width: 600px) { :root { --tooltip-max: 480px; } } @media (min-width: 1024px) { :root { --tooltip-max: 640px; } } @media (min-width: 1680px) { :root { --tooltip-max: 800px; } } /* Real-link anchors (a[data-soc-nav]) replace former buttons/spans on every navigable surface; zero-specificity reset so the existing class rules (.keyword underline, .name-link color, tile/button looks) stay in charge. */ a:where([data-soc-nav]) { color: inherit; font: inherit; text-decoration: none; cursor: pointer; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; } .topbar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(500px, auto); align-items: center; height: 64px; border-bottom: 1px solid var(--line); background: rgba(7, 8, 9, 0.95); backdrop-filter: blur(8px); } .topbar h1 { /* Pinned to the middle column: the back button (col 1) is display:none on list views, which would otherwise slide the title into its 120px cell. */ grid-column: 2; grid-row: 1; margin: 0; text-align: center; font-size: 30px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top-actions { grid-column: 3; display: flex; justify-content: flex-start; justify-content: safe center; flex-wrap: nowrap; gap: 12px; padding-right: 14px; min-width: 0; overflow-x: auto; scrollbar-width: thin; } .top-actions > * { flex: 0 0 auto; } .top-actions > :first-child { margin-inline-start: auto; } .top-actions > :last-child { margin-inline-end: auto; } .nav-button, .text-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 16px; font-weight: 800; cursor: pointer; white-space: nowrap; } .nav-button.active, .text-button:hover { border-color: var(--accent); background: var(--accent); color: #111; } .nav-more { flex: 0 0 auto; } #moreButton { gap: 6px; } .nav-more-caret { font-size: 11px; transition: transform 120ms ease; } #moreButton[aria-expanded="true"] .nav-more-caret { transform: rotate(180deg); } /* The menu is moved under when the client boots. Fixed positioning keeps it clear of the topbar's horizontal scroller at phone widths. */ .nav-more-menu { position: fixed; z-index: 20; display: grid; gap: 4px; min-width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: rgba(11, 12, 14, .98); box-shadow: 0 10px 28px rgba(0, 0, 0, .42); } .nav-more-item { width: 100%; min-height: 40px; justify-content: flex-start; } #moreButton:focus-visible, .nav-more-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .nav-more-item:hover, .nav-more-item:focus-visible, .nav-more-item.active { border-color: var(--accent); background: var(--accent); color: #111; } .text-button:disabled { opacity: .45; cursor: default; } .text-button:disabled:hover { border-color: var(--line); background: var(--panel); color: var(--text); } .icon-button, input { border: 1px solid #303238; background: #151617; color: var(--text); min-height: 44px; border-radius: 8px; font: inherit; } .icon-button { width: 52px; font-size: 22px; cursor: pointer; } #backButton { grid-column: 1; grid-row: 1; justify-self: start; width: auto; margin-left: 16px; padding: 0 14px; color: var(--link); border-color: transparent; background: transparent; } #kofiButton { grid-column: 1; grid-row: 1; justify-self: start; } .kofi-launch-button { display: inline-grid; place-items: center; width: 44px; min-height: 44px; margin-left: 16px; padding: 0; border-color: rgba(114, 164, 242, .42); background: rgba(114, 164, 242, .12); color: #eaf2ff; box-shadow: 0 0 0 1px rgba(255, 111, 145, .15); } .kofi-launch-button:hover, .kofi-launch-button:focus-visible { border-color: #72a4f2; background: rgba(114, 164, 242, .2); outline: none; } .kofi-symbol-img { width: 32px; height: 32px; display: block; object-fit: contain; } #backButton:not(.hidden) + #kofiButton, body:has(#termDetailView:not(.hidden)) #kofiButton, body:has(#termGraphView:not(.hidden)) #kofiButton { display: none; } main { padding: 54px 36px 28px; } .route-loading-indicator { position: fixed; top: 82px; left: 50%; z-index: 4; display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 10px; transform: translateX(-50%); pointer-events: none; border: 1px solid rgba(255, 189, 113, .38); border-radius: 999px; background: rgba(9, 10, 11, .78); color: var(--muted); font-size: 13px; font-weight: 850; line-height: 1; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); } .route-loading-hourglass { position: relative; display: inline-block; width: 14px; height: 18px; border: 2px solid rgba(255, 189, 113, .74); border-radius: 4px; animation: route-hourglass-flip 1.4s steps(2, end) infinite; } .route-loading-hourglass::before, .route-loading-hourglass::after { content: ""; position: absolute; left: 3px; width: 4px; border-left: 3px solid transparent; border-right: 3px solid transparent; } .route-loading-hourglass::before { top: 3px; border-top: 5px solid var(--accent); } .route-loading-hourglass::after { bottom: 3px; border-bottom: 5px solid rgba(255, 189, 113, .55); } @keyframes route-hourglass-flip { 0%, 49% { transform: rotate(0deg); } 50%, 100% { transform: rotate(180deg); } } .hidden { display: none !important; } .intro h2 { margin: 12px 0 24px; font-size: 36px; } .intro p { margin: 0 0 18px; font-size: 24px; } .toolbar { display: grid; grid-template-columns: minmax(230px, 360px) 122px; gap: 12px; align-items: center; margin-bottom: 14px; } .toolbar.view-toolbar { grid-template-columns: minmax(230px, 360px) 44px; } .view-help-button { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid #303238; border-radius: 999px; background: #151617; color: var(--accent); font: inherit; font-size: 20px; font-weight: 900; cursor: pointer; } .view-help-button:hover, .view-help-button:focus-visible { border-color: var(--accent); outline: none; } .view-help-panel { max-width: 780px; margin: -4px 0 14px; padding: 9px 12px; border: 1px solid #303238; border-radius: 7px; background: #111315; color: var(--muted); font-size: 14px; font-weight: 750; line-height: 1.35; } #searchInput, #catalogSearchInput, #termGraphSearchInput { padding: 0 18px; font-size: 21px; } .faction-filter-panel { position: sticky; top: 76px; z-index: 4; margin-bottom: 22px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(9, 10, 11, 0.96); backdrop-filter: blur(8px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); } .filter-panel-shell { display: grid; gap: 10px; } .filter-panel-summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 42px; } .filter-panel-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid #303238; border-radius: 7px; background: #151617; color: var(--text); font-size: 18px; font-weight: 900; line-height: 1; cursor: pointer; } .filter-panel-toggle:hover, .filter-panel-toggle:focus-visible, .filter-order-button:hover, .filter-order-button:focus-visible, .filter-summary-item:hover, .filter-summary-item:focus-visible, .filter-clear-tags-button:hover, .filter-clear-tags-button:focus-visible, .filter-reset-button:hover, .filter-reset-button:focus-visible { border-color: var(--accent); outline: none; } .filter-summary-icons { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: thin; white-space: nowrap; } .filter-empty-summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); font-size: 14px; font-weight: 850; } .filter-summary-item { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 36px; height: 36px; padding: 3px 7px; border: 1px solid #303238; border-radius: 7px; background: #151617; color: var(--text); font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; } .filter-summary-item.locked { border-color: var(--accent); background: #2b2410; } .filter-summary-item.yoinked { gap: 5px; border-color: #596678; background: #18202b; color: #cfe3ff; } .filter-bubble { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 46px; padding: 6px; border: 1.5px solid #7b93ad; border-radius: 12px; background: var(--bg-accent); color: #d9eaff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035); vertical-align: middle; } .filter-bubble.any { border-style: dashed; border-color: #b6a269; background: rgba(45, 38, 20, 0.86); color: #fff1c8; } .filter-bubble-body { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } .filter-bubble-controls { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; opacity: 0; transition: opacity .12s ease; } .filter-bubble:hover .filter-bubble-controls, .filter-bubble:focus-within .filter-bubble-controls { opacity: 1; } .filter-bubble-header { display: inline-flex; align-items: center; gap: 5px; align-self: stretch; min-height: 32px; padding: 4px 6px; border: 1px solid rgba(210, 225, 242, 0.46); border-radius: 8px; background: rgba(7, 9, 12, 0.44); color: inherit; font: inherit; font-size: 11px; font-weight: 950; cursor: pointer; } .filter-bubble-op-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-size: 14px; line-height: 1; } .filter-bubble-op-label { letter-spacing: 0; } .filter-bubble-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(5, 7, 10, 0.76); } .filter-bubble-ungroup, .filter-bubble-group-selected, .filter-formula-copy { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 7px; border: 1px solid rgba(210, 225, 242, 0.56); border-radius: 7px; background: rgba(7, 9, 12, 0.62); color: inherit; font: inherit; font-size: 11px; font-weight: 950; cursor: pointer; } .filter-bubble-ungroup { width: 28px; color: #cbd6e2; } .filter-bubble-group-selected { width: auto; color: #ffe1ad; } .filter-bubble-header:hover, .filter-bubble-header:focus-visible, .filter-bubble-ungroup:hover, .filter-bubble-ungroup:focus-visible, .filter-bubble-group-selected:hover, .filter-bubble-group-selected:focus-visible, .filter-formula-copy:hover, .filter-formula-copy:focus-visible { border-color: var(--accent); outline: none; } .filter-bubble-node.excluded, [data-bubble-node].excluded, .filter-summary-item.excluded { border-color: rgba(255, 116, 116, 0.72); background: var(--bg-danger); color: var(--text-danger); } .filter-summary-item.excluded .filter-summary-text, .filter-bubble-node.excluded .filter-bubble-op-label { text-decoration: line-through; text-decoration-thickness: 2px; } .filter-ban-icon, .filter-split-icon, .filter-copy-link-icon { width: 15px; height: 15px; flex: 0 0 auto; } .filter-not-badge { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 5px; border: 1px solid rgba(255, 166, 166, 0.7); border-radius: 6px; background: rgba(142, 32, 42, 0.8); color: #ffe5e5; font-size: 10px; font-weight: 950; line-height: 1; } .filter-bubble-node.zero-count, [data-bubble-node].zero-count, .filter-summary-item.zero-count { box-shadow: 0 0 0 2px rgba(255, 210, 76, 0.52); } .filter-bubble-chip.selected { outline: 2px solid var(--accent); outline-offset: 2px; } .filter-bubble-node.is-dragging, [data-bubble-node].is-dragging { opacity: 0.62; transform: scale(0.98); } .filter-bubble-node.drop-target, [data-bubble-node].drop-target { outline: 2px solid var(--accent); outline-offset: 2px; } .filter-bubble-node.drop-target { background: rgba(55, 73, 94, 0.96); } [data-bubble-kind="atom"].drop-new-group::after, .filter-summary-icons.drop-new-group-target::after, .filter-summary-icons.drop-ungroup-target::after { content: "new group"; position: absolute; z-index: 2; right: 8px; bottom: -22px; padding: 3px 7px; border: 1px solid rgba(255, 189, 113, 0.68); border-radius: 999px; background: #151617; color: #ffe1ad; font-size: 11px; font-weight: 950; line-height: 1; pointer-events: none; } .filter-summary-icons.drop-ungroup-target::after { content: "ungroup"; } .filter-bubble-chip::before, .filter-bubble-chip::after { display: none; } .filter-tray-count, .filter-reach-profile-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 8px; border: 1px solid #3c414a; border-radius: 999px; background: #111418; color: #d6dee8; font-size: 12px; font-weight: 900; white-space: nowrap; } .filter-reach-profile-pill { color: #b9c9dc; } .filter-formula-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 46px; } .filter-formula-readout { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; border: 1px solid #353942; border-radius: 7px; background: rgba(17, 20, 24, 0.9); color: #d8e2ee; font: inherit; font-size: 12px; font-weight: 850; line-height: 1.3; padding: 5px 8px; text-align: left; white-space: nowrap; cursor: pointer; } .filter-formula-readout:hover, .filter-formula-readout:focus-visible { border-color: var(--accent); outline: none; } .filter-formula-code { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; border: 1px solid #3a434e; border-radius: 7px; background: #0d1014; color: #f5d98b; font-size: 12px; padding: 5px 7px; white-space: nowrap; } .filter-bubble-message { margin-left: 46px; color: #ffd37a; font-size: 12px; font-weight: 850; } .filter-board-open-button { position: sticky; left: 0; z-index: 2; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid #48637c; border-radius: 7px; background: #172331; color: #d9ecff; font: inherit; font-size: 13px; font-weight: 950; cursor: pointer; } .filter-board-open-button:hover, .filter-board-open-button:focus-visible { border-color: var(--accent); outline: none; } .filter-board-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; background: rgba(2, 4, 7, 0.72); backdrop-filter: blur(8px); } .filter-board-panel { display: grid; grid-template-rows: auto auto auto minmax(320px, 1fr) auto; gap: 10px; width: min(1120px, calc(100vw - 36px)); height: min(820px, calc(100vh - 36px)); min-height: 620px; padding: 14px; border: 1px solid #3b4756; border-radius: 8px; background: #0c1014; color: var(--text); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.58); } .filter-board-header, .filter-board-footer, .filter-board-toolbar, .filter-board-title-wrap, .filter-board-palette { display: flex; align-items: center; gap: 8px; min-width: 0; } .filter-board-header { justify-content: space-between; } .filter-board-title { margin: 0; color: #f2f6fb; font-size: 22px; line-height: 1.1; } .filter-board-total-count, .filter-board-mode { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 9px; border: 1px solid #384553; border-radius: 999px; background: #111820; color: #dbe9f7; font-size: 13px; font-weight: 950; } .filter-board-mode { color: #b8c6d4; } .filter-board-close, .filter-board-secondary, .filter-board-primary, .filter-board-tool, .filter-board-term-option, .filter-board-dissolve { font: inherit; cursor: pointer; } .filter-board-close { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid #3a3f48; border-radius: 7px; background: #151a20; color: #f0f5fb; font-size: 20px; font-weight: 950; } .filter-board-toolbar { align-items: stretch; justify-content: space-between; } .filter-board-palette { flex: 1 1 auto; flex-wrap: wrap; align-content: center; } .filter-board-tool { min-width: 72px; min-height: 42px; padding: 0 12px; border: 1px solid #3b4652; border-radius: 999px; background: #151b22; color: #dce6f0; font-size: 14px; font-weight: 950; } .filter-board-tool.active { border-color: #9ab6d3; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.09); } .filter-board-tool.all { border-color: #378ADD; background: rgba(55, 138, 221, 0.18); color: #d8edff; } .filter-board-tool.all.active { background: #378ADD; color: #07131e; } .filter-board-tool.any { border-color: #EF9F27; border-style: dashed; background: rgba(239, 159, 39, 0.16); color: #ffe4b3; } .filter-board-tool.any.active { background: #EF9F27; color: #1f1200; } .filter-board-tool.not { border-color: #E24B4A; background: rgba(226, 75, 74, 0.16); color: #ffd3d3; } .filter-board-tool.not.active { background: #E24B4A; color: #250505; } .filter-board-tool.new-group { border-color: #5d7489; background: #17202a; } .filter-board-term-picker { position: relative; display: grid; gap: 6px; flex: 0 1 360px; min-width: 280px; } .filter-board-term-search { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #3b4652; border-radius: 7px; background: #10161d; color: var(--text); font: inherit; font-size: 15px; } .filter-board-term-search:focus { border-color: var(--accent); outline: none; } .filter-board-term-results { display: grid; gap: 5px; max-height: 128px; overflow: auto; padding: 2px; scrollbar-width: thin; } .filter-board-term-option { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border: 1px solid #2f3944; border-radius: 7px; background: #111820; color: #e0eaf4; text-align: left; } .filter-board-term-option:hover, .filter-board-term-option:focus-visible, .filter-board-close:hover, .filter-board-close:focus-visible, .filter-board-secondary:hover, .filter-board-secondary:focus-visible, .filter-board-primary:hover, .filter-board-primary:focus-visible, .filter-board-tool:hover, .filter-board-tool:focus-visible, .filter-board-dissolve:hover, .filter-board-dissolve:focus-visible { border-color: var(--accent); outline: none; } .filter-board-term-option-icon, .filter-board-node-icon { display: inline-grid; place-items: center; } .filter-board-term-option-icon .mini-icon, .filter-board-term-option-icon .yoink-hand-icon, .filter-board-node-icon .mini-icon, .filter-board-node-icon .yoink-hand-icon { width: 26px; height: 26px; object-fit: contain; } .filter-board-term-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 850; } .filter-board-term-kind { color: #94a4b5; font-size: 11px; font-weight: 850; } .filter-board-term-empty, .filter-board-empty { display: grid; place-items: center; min-height: 48px; color: #94a4b5; font-weight: 850; } .filter-board-message { min-height: 18px; color: #ffd27b; font-size: 13px; font-weight: 850; } .filter-board-surface { position: relative; overflow: auto; min-height: 320px; border: 1px solid #2f3a46; border-radius: 8px; background: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), #0a0e12; background-size: 48px 48px; touch-action: none; } .filter-board-surface > .filter-board-node { position: absolute; } .filter-board-node { user-select: none; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease; } .filter-board-term-bubble { display: inline-grid; grid-template-columns: 28px minmax(58px, 1fr) auto; align-items: center; gap: 6px; min-width: 132px; max-width: 220px; min-height: 56px; padding: 8px 10px; border: 1.5px solid #586879; border-radius: 999px; background: #17212c; color: #e5f1ff; box-shadow: 0 7px 18px rgba(0, 0, 0, 0.25); } .filter-board-node-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 900; } .filter-board-node-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 7px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(0, 0, 0, 0.34); color: #f4f8fc; font-size: 12px; font-weight: 950; } .filter-board-group-bubble { min-width: 216px; max-width: 360px; min-height: 96px; padding: 8px; border: 2px solid #378ADD; border-radius: 24px; background: rgba(55, 138, 221, 0.16); color: #e6f3ff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34); } .filter-board-group-bubble.or { border-color: #EF9F27; border-style: dashed; background: rgba(239, 159, 39, 0.15); color: #ffedc9; } .filter-board-group-bubble.excluded, .filter-board-term-bubble.excluded { border-color: #E24B4A; background: rgba(226, 75, 74, 0.18); color: #ffe2e2; } .filter-board-group-header { display: flex; align-items: center; gap: 6px; min-height: 36px; } .filter-board-op-label, .filter-board-not-label { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); font-size: 12px; font-weight: 950; } .filter-board-not-label { background: rgba(226, 75, 74, 0.72); color: #fff4f4; } .filter-board-dissolve { display: inline-grid; place-items: center; margin-left: auto; width: 32px; height: 32px; border: 1px solid rgba(255, 220, 220, 0.45); border-radius: 999px; background: rgba(0, 0, 0, 0.28); color: #ffd7d7; font-size: 18px; font-weight: 950; } .filter-board-group-body { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; padding-top: 6px; } .filter-board-group-body .filter-board-node { position: relative; left: auto; top: auto; } .filter-board-group-body .filter-board-term-bubble { min-width: 118px; min-height: 48px; padding: 6px 8px; } .filter-board-group-body .filter-board-group-bubble { min-width: 176px; max-width: 300px; } .filter-board-drop-label { display: inline-grid; place-items: center; min-height: 42px; padding: 0 12px; border: 1px dashed rgba(220, 232, 244, 0.38); border-radius: 999px; color: #afbfce; font-size: 13px; font-weight: 850; } .filter-board-node.is-dragging { z-index: 5; transform: scale(1.05); pointer-events: none; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42); } .filter-board-node.drop-target { outline: 3px solid var(--accent); outline-offset: 3px; } .filter-board-node.drop-new-group::after { content: "new group"; position: absolute; right: 6px; bottom: -24px; padding: 3px 8px; border-radius: 999px; background: #151617; color: #ffe1ad; font-size: 11px; font-weight: 950; } .filter-board-node.settled-pop { animation: filter-board-pop .22s ease-out; } @keyframes filter-board-pop { 0% { transform: scale(0.96); } 62% { transform: scale(1.06); } 100% { transform: scale(1); } } .filter-board-footer { justify-content: flex-end; } .filter-board-secondary, .filter-board-primary { min-width: 92px; min-height: 42px; padding: 0 14px; border: 1px solid #3d4854; border-radius: 7px; background: #151b22; color: #e2eaf2; font-size: 14px; font-weight: 950; } .filter-board-primary { border-color: #378ADD; background: #378ADD; color: #06131f; } .filter-summary-item::before, .filter-summary-item::after { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .12s ease; } .filter-summary-item::before { content: ""; background: rgba(6, 7, 9, 0.54); } .filter-summary-item::after { content: "×"; color: rgba(255, 116, 116, 0.86); font-size: 24px; font-weight: 900; line-height: 1; } .filter-summary-item:hover::before, .filter-summary-item:hover::after, .filter-summary-item:focus-visible::before, .filter-summary-item:focus-visible::after { opacity: 1; } .filter-summary-item .yoink-hand-icon { width: 19px; height: 19px; flex: 0 0 auto; } .filter-clear-tags-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(246, 82, 82, 0.58); border-radius: 7px; background: rgba(132, 28, 28, 0.22); color: #ff7474; cursor: pointer; } .filter-clear-tags-button:hover, .filter-clear-tags-button:focus-visible { border-color: #ff7474; background: rgba(168, 36, 36, 0.32); } .filter-clear-tags-icon { width: 20px; height: 20px; pointer-events: none; } .filter-summary-item img, .filter-summary-item .mini-icon, .filter-summary-item .rarity-icon, .filter-summary-item .weapon-type-icon, .filter-summary-item .role-icon { width: 26px; height: 26px; object-fit: contain; } .filter-summary-item .icon-filter-chip-icon { width: 24px; height: 24px; } .filter-summary-text { max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .filter-summary-lock { position: absolute; right: -5px; bottom: -5px; display: inline-grid; place-items: center; width: 17px; height: 17px; border: 1px solid #443510; border-radius: 50%; background: #101010; color: var(--accent); } .filter-summary-lock svg { width: 12px; height: 12px; } .filter-panel-expanded { display: grid; gap: 10px; } .filter-order-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .filter-panel-actions { display: flex; align-items: center; justify-self: end; gap: 6px; min-width: 0; } .filter-order-controls.compact { flex-wrap: nowrap; } .filter-order-button, .filter-reset-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 38px; padding: 2px 8px; border: 1px solid #303238; border-radius: 7px; background: #151617; color: var(--text); font: inherit; font-size: 15px; font-weight: 900; cursor: pointer; } .filter-order-button { min-width: 58px; } .filter-reset-button { width: 42px; padding: 0; } .filter-order-button.active { border-color: var(--accent); background: #2d2415; color: #ffd99d; } .filter-order-icon { display: inline-grid; place-items: center; min-width: 22px; height: 28px; } .filter-order-icon .mini-icon, .filter-order-speed-icon { width: 24px; height: 24px; object-fit: contain; } .filter-order-symbol { min-width: 12px; color: var(--muted); text-align: center; } .filter-order-button.active .filter-order-symbol { color: var(--accent); } .filter-reset-icon { width: 23px; height: 23px; pointer-events: none; } .result-limit-bar { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 4px; color: var(--muted); font-weight: 800; } .term-filter-panel { margin-top: 12px; } .filter-panel-grid { display: grid; grid-template-columns: minmax(520px, 1.15fr) minmax(420px, .85fr); gap: 18px; align-items: start; } .equipment-filter-grid { grid-template-columns: minmax(420px, .75fr) minmax(560px, 1.25fr); } .filter-panel-column { display: grid; gap: 8px; } .faction-filter-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; min-height: 46px; } .faction-filter-label { color: var(--muted); font-size: 14px; font-weight: 800; } .faction-filter-buttons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .faction-filter-button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 42px; padding: 3px 8px; border: 1px solid #303238; border-radius: 7px; background: #151617; color: var(--text); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } .faction-filter-button.active { border-color: var(--accent); background: var(--accent); color: #101010; } /* Faction buttons: icon on top, lock control underneath. Icon click toggles chosen (OR); the lock toggles AND-required. */ .faction-filter-button.faction-tri { flex-direction: column; gap: 1px; height: auto; min-height: 58px; padding: 4px 6px 3px; } .faction-filter-button.locked { border-color: var(--accent); background: #2b2410; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 6px rgba(230, 180, 60, 0.35); } .faction-filter-button .filter-icon-area { display: inline-flex; align-items: center; justify-content: center; } .faction-filter-button .filter-lock-toggle { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 1px 0; border-radius: 4px; color: #5b5e66; } .faction-filter-button .filter-lock-toggle:hover { color: var(--accent); background: rgba(255, 255, 255, 0.07); } .faction-filter-button.active .filter-lock-toggle { color: rgba(16, 16, 16, 0.65); } .faction-filter-button.active .filter-lock-toggle:hover { color: #101010; background: rgba(0, 0, 0, 0.12); } .faction-filter-button .filter-lock-toggle.is-locked { color: var(--accent); } .faction-filter-button .filter-lock-toggle svg { width: 14px; height: 14px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); } .faction-filter-button.faction-all { min-height: 58px; } .faction-filter-button .mini-icon { width: 34px; height: 34px; } .summon-tag-group { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; } .summon-header-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; } .summon-header-tags .mini-icon { width: 28px; height: 28px; } /* Generic stylized tag for icon-less / icon-borrowing unit tags. */ .mini-icon.generic-tag { color: #b9a86a; } /* Unreleased placeholder units (TW-released, kit pre-shipped in global). */ .source-badge.placeholder-source { border: 1px dashed #6b5d2e; background: rgba(107, 93, 46, 0.18); color: #c9b977; } /* Machine-translated text (origin mtl-translator / mtl-llm). */ .source-badge.mtl-source { border: 1px dotted #5a6b8c; background: rgba(90, 107, 140, 0.16); color: #9db4dd; } /* Unit traits surfaced in the skills catalog. */ .source-badge.trait-source { border-color: #8c7a3f; background: rgba(185, 168, 106, 0.14); color: #d8c98a; } .source-badge.data-link-source { border-color: #3f7a74; background: rgba(96, 185, 173, 0.12); color: #8fd8cd; } .source-badge.component-source { margin-left: 0; border-color: #8a6aa8; background: rgba(151, 111, 190, 0.14); color: #d9b9f2; } .related-unit-provenance { margin-left: 0; margin-top: 5px; white-space: normal; } /* Provenance chips (docs/effect-family-design.md §5): entries that are not plain game data rows. Synthetic = naming-heuristic construct; Augmented = real game rows whose grouping/page text the site composes. */ .source-badge.synthetic-source { border-color: #6d5d8c; background: rgba(151, 125, 205, 0.14); color: #c4b2ec; } .source-badge.augmented-source { border-color: #3f7a74; background: rgba(96, 185, 173, 0.13); color: #8fd8cd; } .source-badge.future-source { border-color: #9f7142; background: rgba(221, 142, 70, 0.14); color: #f2bd7f; } .source-badge.hard-link-source { border-color: #4f7f5a; background: rgba(92, 171, 105, 0.14); color: #9bdca8; } .source-badge.local-link-source { border-color: #4f6f9c; background: rgba(103, 145, 205, 0.14); color: #9fc4f0; } .source-badge.general-link-source { border-style: dashed; border-color: #8c7a3f; background: rgba(185, 168, 106, 0.10); color: #d8c98a; } .source-badge.weak-link-source { border-color: #8c7a3f; background: rgba(185, 168, 106, 0.12); color: #e0cf8a; } .source-badge.link-confidence-badge { justify-content: center; width: 22px; min-width: 22px; height: 22px; min-height: 22px; padding: 0; border-radius: 6px; line-height: 1; flex: 0 0 auto; } .link-confidence-icon { position: relative; display: inline-block; width: 16px; height: 16px; } .link-confidence-icon::before, .link-confidence-icon::after { content: ""; position: absolute; top: 5px; width: 8px; height: 5px; border: 2px solid currentColor; border-radius: 999px; transform: rotate(-35deg); } .link-confidence-icon::before { left: 1px; } .link-confidence-icon::after { right: 1px; } .link-confidence-badge[data-link-kind="local"] .link-confidence-icon::before, .link-confidence-badge[data-link-kind="general"] .link-confidence-icon::before { top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; transform: none; } .link-confidence-badge[data-link-kind="local"] .link-confidence-icon::after { top: 6px; left: 6px; width: 4px; height: 4px; border: 0; border-radius: 50%; background: currentColor; transform: none; } .link-confidence-badge[data-link-kind="general"] .link-confidence-icon::after { top: 8px; left: 2px; width: 12px; height: 0; border: 0; border-top: 2px dashed currentColor; border-radius: 0; transform: none; } .link-confidence-badge[data-link-kind="weak"] .link-confidence-icon::before, .link-confidence-badge[data-link-kind="weak"] .link-confidence-icon::after { width: 7px; border-style: dashed; } .source-badge.buff-undispellable{border-color:#c98a52;background:rgba(228,122,82,.14);color:#f0b48a} .source-badge.buff-unpreventable{border-color:#8a63c9;background:rgba(169,112,255,.14);color:#c9a9ff} /* Inside the tooltip title row the chip must stay subordinate to the title. */ .keyword-tooltip-header .source-badge { min-height: 18px; margin-left: 0; padding: 1px 6px; font-size: 11px; flex-shrink: 0; } .keyword-tooltip-header .link-confidence-badge { width: 22px; min-width: 22px; height: 22px; min-height: 22px; padding: 0; } /* Plaque replacing the kit of unreleased placeholder units. */ .placeholder-kit-plaque { padding: 22px 26px; border: 1px dashed #6b5d2e; border-radius: 10px; background: rgba(107, 93, 46, 0.12); color: #c9b977; } .placeholder-kit-plaque strong { display: block; margin-bottom: 6px; font-size: 18px; } .placeholder-kit-plaque p { margin: 0; color: var(--muted); line-height: 1.5; } /* Equipment whose effect rows clone another item's (unreleased placeholder). */ .placeholder-effect-note { margin-bottom: 8px; padding: 6px 10px; border: 1px dashed #6b5d2e; border-radius: 6px; color: #c9b977; font-size: 13px; } .table-wrap { position: relative; overflow: auto; border: 1px solid var(--line); border-radius: 8px; } .unit-table { width: 100%; min-width: 1120px; border-collapse: collapse; background: #060707; } .unit-table th { position: sticky; top: 0; background: #0b0b0c; color: #dedede; text-align: left; height: 58px; padding: 0 14px; font-size: 20px; border-bottom: 1px solid var(--line); cursor: default; } .unit-table td { height: 150px; padding: 14px; border-bottom: 1px solid #1a1b1d; font-size: 20px; vertical-align: middle; } .unit-table tr { cursor: pointer; } .unit-table tr:hover { background: #11151c; } .head-img { width: 104px; height: 104px; border-radius: 18px; object-fit: contain; background: #17191e; } .sprite-img { width: 84px; height: 84px; object-fit: contain; image-rendering: auto; } .name-link { color: var(--link); font-weight: 500; } .list-title-wrap { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; max-width: 100%; min-width: 0; } .list-title-text { display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; min-width: 0; } .list-title-text .name-link { min-width: 0; overflow-wrap: anywhere; } /* Catalog rows navigate from safe empty space; nested controls keep their own behavior. */ .catalog-table tr { cursor: pointer; } .catalog-name-cell { position: relative; min-width: 180px; padding-right: 86px !important; } .catalog-title-cell { padding-right: 14px !important; } .catalog-name-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .catalog-name-badges .source-badge { margin-left: 0; } .catalog-table .name-link, .catalog-table .catalog-icon-cell { cursor: pointer; } .catalog-table .name-link:hover { text-decoration: underline; } .yoink-filter-button, .catalog-graph-button, .mechanics-button { display: inline-grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid #394455; border-radius: 7px; background: rgba(20, 25, 33, 0.92); color: #aebed4; cursor: pointer; } .yoink-filter-button:hover, .yoink-filter-button:focus-visible, .yoink-filter-button.active, .mechanics-button:hover, .mechanics-button:focus-visible, .catalog-graph-button:hover, .catalog-graph-button:focus-visible { border-color: var(--accent); color: #ffd59a; background: rgba(75, 55, 29, 0.92); outline: none; } .mechanics-button { width: auto; min-width: 31px; padding: 0 7px; font-weight: 900; white-space: nowrap; } .mechanics-button:disabled, .mechanics-button.is-disabled { border-color: #303743; background: rgba(20, 25, 33, .55); color: #687484; cursor: default; filter: grayscale(.75); opacity: .55; } .mechanics-button:disabled:hover, .mechanics-button:disabled:focus-visible { border-color: #303743; background: rgba(20, 25, 33, .55); color: #687484; } .yoink-hand-icon, .graph-view-icon { width: 20px; height: 20px; pointer-events: none; } .buff-icon-yoink { vertical-align: middle; } .buff-icon-yoink img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; } .buff-icon-yoink[role="button"] { cursor: pointer; } .icon-quick-action-popover { --icon-action-arrow-left: 50%; position: fixed; z-index: 130; display: grid; width: min(260px, calc(100vw - 16px)); max-width: calc(100vw - 16px); box-sizing: border-box; gap: 10px; padding: 10px; border: 1px solid #596678; border-radius: 10px; background: rgba(20, 25, 33, .98); color: var(--text); box-shadow: 0 14px 34px rgba(0, 0, 0, .48); } .icon-quick-action-popover::after { content: ""; position: absolute; left: var(--icon-action-arrow-left); bottom: -7px; width: 12px; height: 12px; border-right: 1px solid #596678; border-bottom: 1px solid #596678; background: #141921; transform: translateX(-50%) rotate(45deg); } .icon-quick-action-popover.below::after { top: -7px; bottom: auto; transform: translateX(-50%) rotate(225deg); } .icon-quick-action-preview { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 9px; max-width: 260px; } .icon-quick-action-preview img { width: 52px; height: 52px; border-radius: 8px; object-fit: contain; background: #111; } .icon-quick-action-preview strong { overflow-wrap: anywhere; color: var(--blue); font-size: 14px; line-height: 1.2; } .icon-quick-action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .icon-quick-action-buttons .icon-quick-action-yoink, .icon-quick-action-show-group { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; min-height: 44px; gap: 6px; padding: 7px 10px; border: 1px solid #596678; border-radius: 7px; background: #303a4d; color: var(--text); font-size: 13px; font-weight: 800; line-height: 1.1; text-align: center; text-decoration: none; cursor: pointer; } .icon-quick-action-buttons .icon-quick-action-yoink:hover, .icon-quick-action-buttons .icon-quick-action-yoink:focus-visible, .icon-quick-action-show-group:hover, .icon-quick-action-show-group:focus-visible { border-color: var(--accent); color: #ffd59a; background: rgba(75, 55, 29, .96); outline: none; } .icon-quick-action-buttons .yoink-hand-icon { width: 18px; height: 18px; } .copyable-icon-wrap { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; } .copyable-icon-button { position: absolute; z-index: 2; top: -10px; right: -12px; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid #596678; border-radius: 50%; background: #303a4d; color: var(--text); font-size: 13px; font-weight: 900; line-height: 1; cursor: pointer; } .copyable-icon-button:hover, .copyable-icon-button:focus-visible, .copyable-icon-button.active { border-color: var(--accent); color: #ffd59a; outline: none; } .copyable-icon-feedback, .copyable-icon-download { position: absolute; z-index: 3; top: calc(100% + 8px); left: 0; width: max-content; max-width: min(220px, calc(100vw - 24px)); padding: 5px 7px; border: 1px solid #596678; border-radius: 6px; background: #202735; color: var(--text); font-size: 11px; line-height: 1.2; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); } .copyable-icon-download { top: calc(100% + 38px); } .catalog-name-cell > .catalog-graph-button { position: absolute; top: 8px; right: 45px; } .catalog-name-cell > .yoink-filter-button { position: absolute; top: 8px; right: 8px; } .related-mini-link { display: inline-flex; cursor: pointer; border-radius: 6px; } .related-mini-link:hover { outline: 2px solid var(--accent); outline-offset: 1px; } .related-mini-more { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(255, 200, 97, 0.1); color: var(--gold); font-size: 13px; font-weight: 900; line-height: 1; cursor: default; } .source-badge { display: inline-flex; align-items: center; min-height: 22px; margin-left: 8px; padding: 2px 7px; border: 1px solid #5e758c; border-radius: 6px; background: rgba(117, 166, 205, .12); color: #a9d7ff; font-size: 13px; font-weight: 800; letter-spacing: 0; vertical-align: middle; white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .badge-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; } .mini-icon { width: 34px; height: 34px; object-fit: contain; vertical-align: middle; } .rarity-stars, .rarity-label { color: #ffd21a; font-size: 18px; white-space: nowrap; } .icon-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .icon-text .mini-icon { flex: 0 0 auto; } .unit-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tag-group { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 4px 7px; border: 1px solid #3b4350; border-radius: 7px; background: rgba(255, 255, 255, .035); } .tag-group .mini-icon { width: 30px; height: 30px; } .rarity-icon { width: 32px; height: 32px; } .signature-rarity-icon { box-sizing: border-box; padding: 1px; border: 1px solid rgba(255, 200, 97, .78); border-radius: 7px; background: rgba(255, 200, 97, .1); box-shadow: 0 0 0 1px rgba(255, 200, 97, .18), 0 0 9px rgba(255, 200, 97, .16); } .weapon-type-icon { width: 28px; height: 28px; } .source-tag { font-size: 13px; min-height: 30px; } .source-link-tag { color: var(--text); cursor: pointer; font: inherit; } .source-link-tag:hover, .source-link-tag:focus { border-color: var(--accent); } .equipment-tag-stack { display: grid; gap: 5px; align-items: start; justify-items: start; min-width: 0; } .equipment-tag-row { display: flex; align-items: center; gap: 5px; min-width: 0; } .equipment-tag-primary { flex-wrap: wrap; } .equipment-tag-sources { flex-wrap: wrap; gap: 4px; } .equipment-tag-chip { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 2px; border: 1px solid #3b4350; border-radius: 7px; background: rgba(255, 255, 255, .035); color: var(--text); text-decoration: none; } .equipment-tag-chip:hover, .equipment-tag-chip:focus-visible { border-color: var(--accent); outline: none; } .equipment-tag-chip .mini-icon { width: 28px; height: 28px; object-fit: contain; } .equipment-owner-link { border-color: rgba(255, 200, 97, .78); background: rgba(255, 200, 97, .1); box-shadow: 0 0 0 1px rgba(255, 200, 97, .18), 0 0 9px rgba(255, 200, 97, .16); } .equipment-owner-link:hover, .equipment-owner-link:focus-visible { border-color: var(--accent); background: rgba(255, 200, 97, .16); } .equipment-owner-link .mini-icon { box-sizing: border-box; border-radius: 6px; } .equipment-rarity-tag:has(.signature-rarity-icon) { border-color: rgba(255, 200, 97, .78); background: rgba(255, 200, 97, .1); box-shadow: 0 0 0 1px rgba(255, 200, 97, .18), 0 0 9px rgba(255, 200, 97, .16); } .equipment-rarity-tag .signature-rarity-icon { padding: 0; border: 0; background: transparent; box-shadow: none; } .equipment-tag-sources .equipment-tag-chip { width: 28px; height: 28px; padding: 1px; opacity: .88; } .equipment-tag-sources .equipment-tag-chip .mini-icon, .equipment-tag-sources .generic-source-icon { width: 23px; height: 23px; } .source-icon-badge-wrap { position: relative; display: inline-grid; place-items: center; overflow: visible; vertical-align: middle; } .source-icon-badge-wrap .source-icon-badge-image { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; object-fit: contain; } .source-icon-badge-letter { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; min-width: 22px; min-height: 17px; padding: 1px 4px; border: 1px solid rgba(32, 22, 8, .85); border-radius: 4px; background: rgba(24, 17, 8, .72); color: #ffe29d; font-size: 13px; font-weight: 900; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .85); transform: translate(-50%, -50%); box-shadow: 0 1px 5px rgba(0, 0, 0, .45); } .source-icon-badge-letter-3 { min-width: 25px; font-size: 11px; } .equipment-tag-sources .source-icon-badge-letter { min-width: 18px; min-height: 13px; padding: 1px 2px; border-radius: 3px; font-size: 10px; } .equipment-tag-sources .source-icon-badge-letter-3 { min-width: 20px; font-size: 8px; } .generic-source-icon { color: #d6dde8; } .source-icon-crown-wrap { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; overflow: visible; line-height: 0; vertical-align: middle; } .source-icon-crown-image { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; object-fit: contain; } .source-icon-crown { position: absolute; top: -1px; left: 50%; width: 72%; height: 43%; pointer-events: none; transform: translateX(-50%); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .78)) drop-shadow(0 0 2px rgba(230, 194, 82, .45)); } .catalog-table.equipment-mode .tile-tags, .catalog-table.equipment-mode .equipment-card-tags { justify-content: flex-start; } .catalog-table.equipment-mode .equipment-tag-stack { max-width: 100%; } .catalog-table.equipment-mode .equipment-tag-row { flex-wrap: wrap; } .catalog-tile .equipment-tag-stack, .related-equipment-card .equipment-tag-stack { justify-items: center; } .catalog-tile .equipment-tag-row, .related-equipment-card .equipment-tag-row { justify-content: center; } .detail-grid { display: grid; grid-template-columns: minmax(320px, 34vw) minmax(620px, 1fr); gap: 44px; align-items: start; } .unit-panel { display: flex; flex-direction: column; align-items: center; } .controls-row { display: grid; grid-template-columns: minmax(160px, 270px); justify-content: center; gap: 12px; width: 100%; max-width: 320px; margin-bottom: 34px; } .unit-title { text-align: center; min-height: 150px; } .unit-title h2 { max-width: 420px; margin: 24px auto 24px; font-size: 38px; line-height: 1.15; } .unit-title-actions { display: inline-flex; align-items: center; } .unit-title-actions:empty { display: none; } .role-title-row { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; } .portrait { width: min(390px, 80vw); aspect-ratio: 1; object-fit: contain; margin: 20px 0 24px; } .portrait.portrait-pending { opacity: 0; } .role-line { margin: 0; font-size: 28px; } .unit-speed-row { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; } .speed-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; margin-bottom: 22px; padding: 4px 14px; border-radius: 6px; background: var(--card-2); color: var(--text); font-size: 20px; } .unit-speed-row .speed-chip { margin-bottom: 0; } .unit-speed-actions:empty { display: none; } .speed-chip strong { font-size: 24px; } .speed-icon-slot { display: inline-flex; align-items: center; } .speed-stat-icon { width: 24px; height: 24px; object-fit: contain; } .engraving-summary { flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: min(100%, 520px); max-width: 520px; margin: -6px auto 4px; } .engraving-summary-stat { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 3px 7px; border: 1px solid #3a4050; border-radius: 6px; background: rgba(255, 255, 255, .045); color: #dfe6ef; font-size: 13px; font-weight: 900; white-space: nowrap; } .engraving-summary-action.engrave-calculator-toggle { width: 100%; height: auto; min-height: 30px; padding: 0; border-color: #3a4050; background: rgba(255, 255, 255, .045); color: var(--accent); font-size: 24px; line-height: 1; font-weight: 900; } .engraving-stat-icon { width: 24px; height: 24px; object-fit: contain; } .unit-panel-summons { width: 100%; max-width: 420px; margin: 12px auto 0; } .unit-panel-summons:empty { display: none; } .unit-panel-summons .owned-summons { gap: 10px; } .unit-panel-summons .owned-summons h3 { text-align: center; font-size: 18px; } .unit-panel-summons .related-units { grid-template-columns: repeat(auto-fit, 116px); justify-content: center; gap: 8px; } .unit-panel-summons .related-unit-card { gap: 5px; padding: 2px; border: 0; background: transparent; } .unit-panel-summons .related-summon { gap: 5px; text-align: center; } .unit-panel-summons .related-summon span, .unit-panel-summons .equipment-card-tags { width: 100%; text-align: center; line-height: 1.15; overflow-wrap: anywhere; } .unit-panel-summons .head-img { width: 62px; height: 62px; } .unit-icon-row { flex-basis: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; } .unit-tag-icon-row { margin-top: 2px; } .engrave-calculator-toggle, .unit-lore-action, .lore-action-button { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid #596678; border-radius: 8px; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .18), transparent 34%), #202632; color: var(--text); cursor: pointer; } .unit-lore-action, .unit-lore-action.keyword { text-decoration: none; color: var(--text); cursor: help; } .unit-signature-action.unit-signature-shared { border-color: var(--blue); background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .18), transparent 34%), var(--bg-accent); } .lore-action-button { padding: 0; } .engrave-calculator-toggle:hover, .engrave-calculator-toggle:focus-visible, .unit-lore-action:hover, .unit-lore-action:focus-visible, .lore-action-button:hover, .lore-action-button:focus-visible { border-color: var(--accent); box-shadow: 0 0 18px rgba(255, 189, 113, .24); outline: none; } .unit-signature-action.unit-signature-shared:hover, .unit-signature-action.unit-signature-shared:focus-visible { border-color: var(--blue); box-shadow: 0 0 18px color-mix(in srgb, var(--blue) 24%, transparent); } .unit-signature-icon { width: 31px; height: 31px; object-fit: contain; } .engrave-action-icon, .lore-action-icon { width: 31px; height: 31px; object-fit: contain; } .stats-and-skills { display: grid; gap: 16px; } .skill-column { display: grid; gap: 12px; } .skill-card { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start; padding: 28px 24px 22px; border-radius: 12px; background: var(--card); } .skill-card > .skill-icon + div { grid-column: 2; min-width: 0; } .skill-desc { overflow-wrap: anywhere; word-break: normal; } .skill-card.compact { grid-template-columns: 56px minmax(0, 1fr); padding: 22px; } .skill-icon { width: 64px; height: 64px; border-radius: 50%; object-fit: contain; background: #111; } .skill-card.compact .skill-icon { width: 54px; height: 54px; } .skill-title { margin: 0 0 10px; font-size: 30px; line-height: 1.1; max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: manual; } .skill-title-goto { display: inline-grid; place-items: center; width: 30px; height: 30px; min-height: 30px; margin-left: 8px; padding: 0; border: 1px solid #394455; border-radius: 7px; background: rgba(20, 25, 33, 0.92); color: #d9e4f5; font-size: 16px; font-weight: 900; line-height: 1; text-decoration: none; vertical-align: 0.08em; } .skill-title-goto .term-details-icon { display: inline; } .skill-card.compact .skill-title-goto { width: 26px; height: 26px; min-height: 26px; margin-left: 6px; font-size: 14px; } .skill-title-goto:hover, .skill-title-goto:focus-visible { border-color: var(--accent); color: #ffd59a; background: rgba(75, 55, 29, 0.92); outline: none; } .skill-title.equipment-title-with-action { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .skill-title.equipment-title-with-action .equipment-lore-toggle { width: 36px; height: 36px; } .skill-title.equipment-title-with-action .lore-action-icon { width: 25px; height: 25px; } .skill-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .sp-requirement-plaque { display: inline-flex; align-items: center; flex-wrap: wrap; width: max-content; max-width: 100%; gap: 6px; min-height: 32px; margin: 0 0 12px; padding: 4px 10px; border: 1px solid #596678; border-radius: 7px; background: #151b24; color: #d8dde4; font-size: 14px; font-weight: 800; } .sp-required-unit { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; } .sp-required-unit .mini-icon { width: 26px; height: 26px; } .comprises-section { display: grid; gap: 8px; margin: 0 0 14px; padding: 12px; border: 1px solid #354052; border-radius: 8px; background: rgba(255, 255, 255, .025); } .comprises-section h4 { margin: 0; color: #e7edf7; font-size: 15px; } .comprises-section h4 > span { color: var(--muted); font-size: 12px; } .comprises-members { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } .comprises-member { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 9px; border: 1px solid #596678; border-radius: 7px; background: #151b24; color: var(--text); font-weight: 800; text-decoration: none; } .comprises-member .mini-icon { width: 26px; height: 26px; } .comprises-star-chip { display: inline-flex; align-items: center; width: max-content; min-height: 20px; margin-left: 5px; padding: 1px 6px; border: 1px solid rgba(243, 204, 101, .65); border-radius: 999px; background: rgba(243, 204, 101, .12); color: #f6d57b !important; font-size: 11px !important; font-weight: 900; line-height: 1; } .sp-star-requirement { display: inline-flex; align-items: center; gap: 3px; color: #f6d57b; } .sp-star-icon { color: #f3cc65; font-size: 16px; line-height: 1; } .upgrade-tag { display: inline-flex; align-items: center; width: max-content; min-height: 26px; margin: 0 0 8px; padding: 2px 10px; border: 1px solid #f3cc65; border-radius: 6px; background: #3b3422; color: #f6d57b; font-size: 16px; font-weight: 900; text-transform: uppercase; } .trait-view-tabs, .level-view-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; padding-right: 72px; } .trait-view-button, .level-view-button { min-height: 30px; padding: 3px 10px; border: 1px solid #596678; border-radius: 6px; background: #303a4d; color: var(--text); font-size: 16px; font-weight: 800; cursor: pointer; } .trait-view-button.active, .level-view-button.active { background: var(--accent); border-color: var(--accent); color: #111; } .pill { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 12px; border-radius: 7px; background: #42506a; color: white; font-size: 18px; } .pill .pill-speed-icon { width: 20px; height: 20px; margin-right: 6px; } .corner-label { position: absolute; right: 0; top: 0; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 0 12px 0 10px; background: var(--accent); color: #111; font-weight: 800; overflow-wrap: anywhere; } .skill-desc { font-size: 21px; line-height: 1.42; } .skill-desc .red { color: var(--red); } .skill-desc .c4 { color: var(--gold); } .skill-desc .c5 { color: var(--blue); } .skill-desc .purple { color: #a970ff; } .skill-desc .green { color: #49d26d; } .effect-icon { position: relative; display: inline-block; width: .86em; height: .86em; margin-right: .12em; vertical-align: -.08em; } .effect-icon-image { background-position: center; background-repeat: no-repeat; background-size: contain; } /* Inline text sprites use the optimized WebP twins directly: assets/ (source PNGs) is build input only and never ships to the deployed site, while assets_webp/ is copied by scripts/build_site.mjs. CSS cannot consult images-manifest.json, so these URLs must live in the shipped folder. */ .effect-icon-text_sprite_blocked { background-image: url("assets_webp/text_sprite/text_sprite_blocked.webp"); } .effect-icon-text_sprite_buff { background-image: url("assets_webp/text_sprite/text_sprite_buff.webp"); } .effect-icon-text_sprite_debuff { background-image: url("assets_webp/text_sprite/text_sprite_debuff.webp"); } .effect-icon-text_sprite_sp { width: 1.08em; height: 1.08em; margin-left: .16em; margin-right: 0; vertical-align: -.18em; background-image: url("assets_webp/text_sprite/text_sprite_sp.webp"); } .effect-icon-text_sprite_nrg { background-image: url("assets_webp/text_sprite/text_sprite_nrg.webp"); } .effect-icon-text_sprite_cd { background-image: url("assets_webp/text_sprite/text_sprite_cd.webp"); } .effect-icon-tarot_01 { width: 1.08em; height: 1.08em; margin-left: .16em; margin-right: .16em; vertical-align: -.2em; background-image: url("assets_webp/tarot/tarot_01.webp"); } .effect-icon-resource { width: 1.08em; height: 1.08em; margin: 0 .12em 0 .06em; vertical-align: -.18em; } .effect-icon-text_sprite_sp.effect-icon-resource { margin-left: .16em; margin-right: 0; } .pill .effect-icon-resource { margin-left: -.16em; margin-right: .22em; } .effect-icon-image::before, .effect-icon-image::after { display: none; } .effect-icon::before, .effect-icon::after { content: ""; position: absolute; inset: 0; box-sizing: border-box; } .effect-icon-buff::before { border-left: .43em solid transparent; border-right: .43em solid transparent; border-bottom: .78em solid #72d36f; } .effect-icon-buff::after { inset: .2em .28em .16em; border-left: .15em solid transparent; border-right: .15em solid transparent; border-bottom: .34em solid var(--card); } .effect-icon-debuff::before { border-left: .43em solid transparent; border-right: .43em solid transparent; border-top: .78em solid #e47a52; top: .08em; } .effect-icon-debuff::after { inset: .16em .28em .2em; border-left: .15em solid transparent; border-right: .15em solid transparent; border-top: .34em solid var(--card); } .effect-icon-blocked { border: .14em solid #d98561; border-radius: 50%; } .effect-icon-blocked::before { inset: auto; top: 50%; left: 50%; width: .92em; height: .16em; transform: translate(-50%, -50%) rotate(45deg); border-radius: 999px; background: #d98561; } .effect-icon-blocked::after { display: none; } .effect-icon-generic { border: .12em solid currentColor; border-radius: 50%; } .paragraph-break { display: block; height: .42em; } .skill-desc > .paragraph-break:first-child { display: none; } .paragraph-icon { position: relative; display: inline-block; width: 1em; height: 1em; margin-right: .18em; vertical-align: -.12em; } .paragraph-icon::before, .paragraph-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: .82em; height: .18em; border-radius: 999px; background: linear-gradient(90deg, transparent, #9c8b59 18%, #d2bd75 50%, #9c8b59 82%, transparent); transform: translate(-50%, -50%); box-shadow: 0 0 7px rgba(210, 189, 117, .35); } .paragraph-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .trait-line { position: relative; display: block; margin-top: 10px; padding: 8px 0 0 66px; } .trait-line:first-child { margin-top: 0; } .trait-line .paragraph-break { display: none; } .trait-line .paragraph-icon { position: absolute; left: 32px; top: 14px; } .trait-line-stars { position: absolute; left: 0; top: 10px; min-width: 26px; padding: 1px 5px; border: 1px solid #6a7180; border-radius: 5px; color: #e6d28c; background: rgba(255,255,255,.05); font-size: 12px; line-height: 1.2; text-align: center; } .trait-inline-fragment { display: inline; } .trait-inline-option { padding: 1px 6px 2px; margin: 0 3px; border: 1px solid rgba(230, 210, 140, .35); border-radius: 6px; background: rgba(255, 255, 255, .035); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .trait-inline-option .trait-stars { display: inline-block; margin-right: .4em; color: #e6d28c; font-size: .62em; line-height: 1; vertical-align: .18em; white-space: nowrap; pointer-events: none; } .trait-value-set { display: inline-flex; align-items: flex-start; flex-wrap: wrap; gap: 5px; margin: 0 4px; vertical-align: -.2em; line-height: inherit; } .trait-value-option { display: inline-flex; flex-direction: column-reverse; align-items: center; min-width: 2.2em; padding: 2px 6px 3px; border: 1px solid rgba(230, 210, 140, .35); border-radius: 6px; background: rgba(255, 255, 255, .035); line-height: 1; flex: 0 0 auto; max-width: 100%; white-space: nowrap; overflow-wrap: normal; word-break: normal; } .trait-value-option.wide { align-items: flex-start; max-width: min(34em, 100%); line-height: 1.15; white-space: normal; overflow-wrap: break-word; } .trait-value-option > span:not(.trait-stars) { white-space: nowrap; } .trait-value-option.wide > span:not(.trait-stars) { white-space: normal; } .trait-value-option .trait-stars { color: #e6d28c; font-size: .52em; line-height: 1; margin-top: 2px; white-space: nowrap; pointer-events: none; } .trait-slash { color: var(--muted); line-height: 1; padding-top: .12em; } .keyword { position: relative; color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: help; } .keyword[data-link-confidence="weak"] { text-decoration-style: dotted; } .keyword[data-link-confidence="general"] { text-decoration-style: dashed; } .keyword-tooltip { position: fixed; z-index: 100; container-type: inline-size; width: max-content; min-width: 260px; max-width: min(var(--tooltip-max), calc(100vw - 20px)); max-height: calc(100vh - 20px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a4558 transparent; padding: 18px 22px; border-radius: 8px; background: #151515; color: var(--text); box-shadow: 0 18px 42px rgba(0,0,0,.45); border: 1px solid #2c2c2c; font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; } .keyword-tooltip.equipment-tooltip { width: min(max(420px, var(--tooltip-max)), calc(100vw - 20px)); max-width: min(max(420px, var(--tooltip-max)), calc(100vw - 20px)); padding: 12px 16px; font-size: 16px; line-height: 1.3; } @media (min-width: 1024px) { .keyword-tooltip:not(.equipment-tooltip) { width: min(var(--tooltip-max), calc(100vw - 20px)); } } .keyword-tooltip.pinned { border-color: var(--accent); box-shadow: 0 18px 42px rgba(0,0,0,.5), 0 0 0 1px rgba(255,190,112,.25); } .keyword-tooltip.hidden { display: none; } .keyword-tooltip strong { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--blue); font-size: 21px; } .keyword-tooltip-title-meta { display: inline-flex; align-items: center; gap: 4px; color: #d8dfed; font-size: 14px; font-weight: 800; white-space: nowrap; } .keyword-tooltip-title-meta .effect-icon-resource { width: 18px; height: 18px; } .keyword-tooltip-header { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 8px 10px; margin-bottom: 22px; } .keyword-tooltip-icon-slot, .term-header-icon-slot { display: inline-grid; place-items: center; width: 24px; height: 24px; min-width: 24px; overflow: visible; } .keyword-tooltip-title { display: inline-flex; align-items: center; flex-wrap: wrap; min-width: min(16ch, 100%); max-width: 100%; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; hyphens: manual; } .keyword-tooltip-icon { width: 24px; height: 24px; object-fit: contain; vertical-align: -.15em; margin-right: 0; } .keyword-tooltip-icon-slot .yoink-filter-button, .term-header-icon-slot .yoink-filter-button { width: 24px; height: 24px; border-radius: 6px; } .keyword-tooltip-icon-slot .skill-icon, .keyword-tooltip-icon-slot .keyword-tooltip-icon, .term-header-icon-slot .skill-icon, .term-header-icon-slot .term-header-icon, .term-header-icon-slot img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; } .term-kind-glyph { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid #4b5565; border-radius: 6px; background: #171c22; color: #aebed4; font-size: 13px; font-weight: 950; line-height: 1; } .term-kind-keyword { color: var(--gold); } .term-kind-skill { color: var(--link); } .term-kind-category { color: #c7d1df; } .term-kind-equipment { color: #d7b98a; } .term-kind-summon { color: #9fd7c5; } .term-kind-prop { color: #d8b77c; } .term-kind-trait { color: #d3b6ff; } .term-kind-source, .term-kind-term { color: #aebed4; } .prop-detail-panel { display: grid; gap: 18px; } .prop-stats-block > h3, .prop-members-block h3 { margin: 0; color: var(--blue); font-size: 17px; } .prop-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; margin: 10px 0 0; } .prop-stats-grid > div { min-width: 0; padding: 9px 11px; border: 1px solid #333c49; border-radius: 7px; background: rgba(18, 24, 31, .72); } .prop-stats-grid dt { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .prop-stats-grid dd { margin: 3px 0 0; color: var(--text); font-size: 17px; font-weight: 800; } .prop-members-block > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .prop-members-block > header > span { color: var(--muted); font-size: 13px; } .keyword-tooltip-back { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: 1px solid #596678; border-radius: 6px; background: #303a4d; color: var(--text); font-size: 18px; font-weight: 900; cursor: pointer; } .keyword-tooltip-yoink { width: 28px; height: 28px; flex: 0 0 auto; } .keyword-tooltip-controls { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 6px; white-space: nowrap; } .keyword-tooltip-go { flex: 0 1 auto; min-height: 28px; padding: 3px 9px; border: 1px solid #596678; border-radius: 6px; background: #303a4d; color: var(--text); font-size: 13px; font-weight: 800; text-align: center; cursor: pointer; } .term-details-narrow, .term-details-icon { display: none; } .keyword-tooltip-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); } .keyword-tooltip-mechanics { width: auto; min-height: 28px; padding: 3px 9px; font-size: 13px; font-weight: 800; } .keyword-tooltip-tabs { margin: -12px 0 12px; padding-right: 0; } .keyword-tooltip-tabs .level-view-button { min-height: 26px; padding: 2px 9px; font-size: 14px; } .keyword-tooltip-body { margin: 0; } .keyword-tooltip-desc, .keyword-tooltip-body .skill-desc { max-width: 65ch; } .keyword-tooltip-body .keyword { color: var(--gold); } .keyword-tooltip.equipment-tooltip .keyword-tooltip-header { margin-bottom: 10px; } .keyword-tooltip.equipment-tooltip strong, .keyword-tooltip.equipment-tooltip .keyword-tooltip-title { font-size: 18px; } .keyword-tooltip.equipment-tooltip .skill-desc { font-size: 15px; line-height: 1.3; } .keyword-tooltip.equipment-tooltip .paragraph-break { height: .24em; } .keyword-tooltip.equipment-tooltip .trait-line { margin-top: 5px; padding: 4px 0 0 46px; } .keyword-tooltip.equipment-tooltip .trait-line .paragraph-icon { left: 23px; top: 8px; } .keyword-tooltip.equipment-tooltip .trait-line-stars { top: 5px; min-width: 22px; padding: 1px 4px; font-size: 10px; } .keyword-tooltip.equipment-tooltip .trait-value-set { gap: 4px; margin: 0 2px; } .keyword-tooltip.equipment-tooltip .trait-value-option { min-width: 2.1em; padding: 1px 5px 2px; } @container (max-width: 300px) { .keyword-tooltip-header, .term-title-row { grid-template-columns: 24px minmax(0, 1fr); } .keyword-tooltip-controls, .term-title-actions { grid-column: 1 / -1; justify-self: start; } .term-details-wide { display: none; } .term-details-narrow { display: inline; } } @container (max-width: 240px) { .term-details-narrow { display: none; } .term-details-icon { display: inline; } } .lore-dialog-content p { margin: 0 0 1em; } .lore-dialog-content p:last-child { margin-bottom: 0; } .skill-range-panel { display: inline-grid; grid-template-columns: auto auto; gap: 16px; align-items: center; margin-top: 18px; padding: 10px 12px; border: 1px solid #56647c; border-radius: 7px; background: #2d374a; } .range-grid { display: grid; grid-template-columns: repeat(var(--range-grid-size, 11), 1fr); width: var(--range-grid-px, 126px); height: var(--range-grid-px, 126px); gap: 2px; padding: 8px; border-radius: 6px; background: #263246; } .range-cell { border-radius: 2px; background: #3a465b; } .range-cell.range { background: #f15a5f; } .range-cell.effect { background: #d4c56a; } .range-cell.target { background: #f59a45; } .range-cell.self { background: #397fe6; } .skill-range-info { display: grid; grid-template-columns: auto auto; gap: 4px 30px; font-size: 20px; line-height: 1.25; } .range-label-row { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .target-method-pill { justify-self: center; min-width: 72px; padding: 2px 10px; border-radius: 7px; background: #e8ecef; color: #111; text-align: center; font-weight: 800; } .sp-skill-section, .rank-section { margin-top: 60px; } .sp-skill-column { display: grid; gap: 12px; } .catalog-table .catalog-desc-cell { min-width: 520px; } .catalog-table.keyword-mode .catalog-desc-cell { min-width: min(980px, 62vw); } .catalog-release-cell { min-width: 78px; white-space: nowrap; color: #d8dde4; font-variant-numeric: tabular-nums; } .catalog-icon-cell { width: 72px; } .catalog-table:not(.equipment-mode) #catalogRelatedHeader, .catalog-table:not(.equipment-mode) .catalog-related-cell { width: 232px; min-width: 232px; } .related-mini { display: flex; gap: 4px; flex-wrap: wrap; } .catalog-table:not(.equipment-mode) .related-mini { display: grid; grid-template-columns: repeat(3, 68px); gap: 6px; justify-content: start; width: max-content; } .catalog-meta-stack, .tactics-category-legend, .tactics-legend-lines { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .catalog-tile[data-type="tarot"] { padding-top: 12px; } .tarot-gear-icon { object-fit: contain; background: transparent !important; } .tarot-title-with-action, .tile-face-action-row { display: flex; align-items: center; justify-content: center; gap: 7px; } .tarot-title-with-action .tarot-lore-toggle, .tile-face-action-row .tarot-lore-toggle { flex: 0 0 auto; width: 34px; height: 34px; } .tarot-title-with-action .lore-action-icon, .tile-face-action-row .lore-action-icon { width: 23px; height: 23px; } .tarot-effect-lines { display: grid; gap: 9px; } .tarot-effect-line { min-width: 0; } .tarot-final-effect { display: grid; gap: 6px; padding-top: 9px; border-top: 1px solid #4a5362; } .tarot-final-label { justify-self: start; } .tarot-buff-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .tarot-buff-chip, .tarot-buff-chip.keyword { display: inline-flex; align-items: center; gap: 4px; color: var(--text); text-decoration: none; } .tarot-buff-icon { width: 20px; height: 20px; object-fit: contain; } .tarot-buff-id { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; } .tactics-catalog-controls { display: grid; grid-template-columns: auto minmax(220px, 1fr); align-items: start; gap: 10px 14px; width: 100%; } .tactics-acquisition-filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; } .tactics-acquisition-filter { margin: 0; } .tactics-acquisition-filter.active { border-color: var(--accent); background: rgba(66, 80, 106, .65); } .tactics-dev-toggle { margin: 0; white-space: nowrap; } .tactics-dev-toggle.active { border-color: var(--accent); background: rgba(66, 80, 106, .65); } .tactics-legend { min-width: 0; } .tactics-legend summary { cursor: pointer; font-weight: 800; } .tactics-legend-lines { margin-top: 8px; color: var(--muted); font-size: 13px; } .tactics-legend-lines > span:not(:last-child)::after { content: " ·"; color: #657087; } .tactics-recover-rule { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; } .tactics-category-legend { grid-column: 1 / -1; } .tactics-category-chip { display: inline-flex; align-items: center; gap: 4px; } .tactics-category-icon { width: 20px; height: 20px; object-fit: contain; } .tactics-level-view { min-width: 0; } @media (max-width: 700px) { .tactics-catalog-controls { grid-template-columns: 1fr; } .tactics-category-legend { grid-column: 1; } .tactics-acquisition-filters { grid-column: 1; } } .term-detail-card { margin-top: 22px; grid-template-columns: minmax(0, 1fr); } .term-detail-card.no-icon { grid-template-columns: minmax(0, 1fr); } .term-icon-slot { width: 64px; min-height: 64px; } .term-detail-content { container-type: inline-size; min-width: 0; } .term-title-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 10px; margin-bottom: 10px; } .term-title-row .skill-title { display: flex; align-items: center; flex-wrap: wrap; flex: 1 1 18rem; min-width: min(18ch, 100%); max-width: 100%; gap: 6px 8px; margin-bottom: 0; } .term-title-row .term-title-text { flex: 1 1 auto; min-width: min(18ch, 100%); max-width: 100%; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; hyphens: manual; } .term-title-row .source-badge { margin-left: 0; flex: 0 0 auto; } .term-title-actions { display: inline-flex; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; max-width: 100%; gap: 8px; padding-top: 2px; white-space: nowrap; } .term-title-actions .yoink-filter-button, .term-title-actions .catalog-graph-button, .term-title-actions .mechanics-button, .term-title-actions .lore-action-button, .term-title-actions .talent-tree-action-button, .term-title-actions .term-details-button { width: 36px; height: 36px; } .term-title-actions .talent-tree-action-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; border: 1px solid #596b82; border-radius: 7px; background: rgba(20, 25, 33, 0.92); color: #d9e4f5; text-decoration: none; } .term-title-actions .talent-tree-action-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; } .term-title-actions .talent-tree-action-button:hover, .term-title-actions .talent-tree-action-button:focus-visible { border-color: var(--gold); color: #ffd59a; background: rgba(75, 55, 29, 0.92); outline: none; } .term-title-actions .lore-action-icon { width: 24px; height: 24px; } .term-title-actions .mechanics-button { width: auto; min-width: 36px; } .term-title-actions .term-details-button { width: auto; min-width: 36px; padding: 0 10px; border: 1px solid #394455; border-radius: 7px; background: rgba(20, 25, 33, 0.92); color: #d9e4f5; font-size: 13px; font-weight: 850; cursor: pointer; } .term-title-actions .term-details-button:hover, .term-title-actions .term-details-button:focus-visible { border-color: var(--accent); color: #ffd59a; background: rgba(75, 55, 29, 0.92); outline: none; } .mechanics-panel { position: fixed; z-index: 92; top: 0; right: 0; width: min(560px, calc(100vw - 28px)); height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr); border-left: 1px solid #3b4758; background: #11161d; box-shadow: -18px 0 44px rgba(0, 0, 0, .45); } .mechanics-panel-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); background: #171d25; } .mechanics-panel-actions { display: inline-flex; align-items: center; gap: 8px; } .mechanics-panel-graph, .mechanics-retry { min-height: 36px; padding: 5px 10px; border: 1px solid #3f4c5e; border-radius: 7px; background: #202936; color: #dce7f7; font-weight: 850; cursor: pointer; } .mechanics-panel-graph:hover, .mechanics-panel-graph:focus-visible, .mechanics-retry:hover, .mechanics-retry:focus-visible { border-color: var(--accent); color: #ffd59a; outline: none; } .mechanics-panel-header strong, .mechanics-panel-header span { display: block; } .mechanics-panel-header strong { color: var(--accent); font-size: 18px; } .mechanics-panel-header span { margin-top: 2px; color: #d7e2f1; font-weight: 800; } .mechanics-panel-close { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid #3f4c5e; border-radius: 7px; background: #202936; color: #dce7f7; font-size: 24px; line-height: 1; cursor: pointer; } .mechanics-panel-close:hover, .mechanics-panel-close:focus-visible { border-color: var(--accent); color: #ffd59a; outline: none; } .mechanics-panel-body { min-width: 0; overflow: auto; padding: 16px; } .mechanics-loading { color: var(--muted); font-weight: 800; } .mechanics-load-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid rgba(244, 128, 128, .45); border-radius: 7px; background: rgba(92, 28, 28, .2); color: #ffd1d1; font-weight: 800; } .mechanics-window-group, .mechanics-variant-group { display: grid; gap: 10px; margin-bottom: 18px; } .mechanics-variant-group.is-playable { padding-left: 10px; border-left: 3px solid rgba(102, 196, 255, .55); } .mechanics-possessor-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-height: 40px; } .mechanics-possessor-chip { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 2px; border: 1px solid #354052; border-radius: 8px; background: #141821; color: var(--text); text-decoration: none; transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease, transform .12s ease; } .mechanics-possessor-chip .mini-icon { width: 34px; height: 34px; border-radius: 6px; } .mechanics-possessor-chip:hover, .mechanics-possessor-chip:focus-visible { border-color: var(--accent); background: rgba(255, 200, 97, .12); outline: none; transform: translateY(-1px); } .mechanics-possessor-chip.is-context { border-color: #9edbff; box-shadow: 0 0 0 2px rgba(102, 196, 255, .24); } .mechanics-possessor-chip .order-value-badge { right: -7px; bottom: -5px; font-size: 9px; } .mechanics-possessor-more { appearance: none; display: inline-grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 200, 97, .1); color: var(--gold); font: inherit; font-size: 11px; font-weight: 900; line-height: 1; cursor: pointer; } .mechanics-possessor-more:hover, .mechanics-possessor-more:focus-visible { background: rgba(255, 200, 97, .2); outline: 2px solid var(--accent); outline-offset: 1px; } .mechanics-window-group h3, .mechanics-variant-group h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: #e7edf7; font-size: 15px; } .mechanics-window-group h3 > span, .mechanics-variant-group h3 > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: 12px; } .mechanics-statement-list { display: grid; gap: 8px; } .mechanics-statement { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; min-width: 0; margin-left: calc((var(--mechanic-depth, 1) - 1) * 18px); padding: 10px; border: 1px solid #2f3a49; border-radius: 7px; background: rgba(255, 255, 255, .035); } .mechanics-glyph { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid #536072; border-radius: 6px; background: #1d2632; color: #ffd29b; font-size: 12px; font-weight: 950; } .mechanics-statement-main { min-width: 0; } .mechanics-statement-line { color: #e4ebf6; font-size: 14px; line-height: 1.45; } .mechanics-statement-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .mechanics-via-chain, .mechanics-via-chain summary, .mechanics-via-chain-expanded { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; } .mechanics-via-chain-deep { margin: 0; } .mechanics-via-chain-deep summary { color: var(--muted); cursor: pointer; list-style: none; } .mechanics-via-chain-deep summary::-webkit-details-marker { display: none; } .mechanics-via-chain-deep[open] > summary { display: none; } .mechanics-chain-arrow, .mechanics-chain-ellipsis { color: #7f8da1; font-size: 12px; font-weight: 900; } .mechanics-carrier-chip, .mechanics-window-chip, .mechanics-flag-chip, .mechanics-playable-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border: 1px solid #475469; border-radius: 999px; background: rgba(255, 255, 255, .05); color: #cbd6e7; font-size: 12px; font-weight: 800; } .mechanics-carrier-chip { color: #ffd29b; text-decoration: none; } a.mechanics-carrier-chip:hover, a.mechanics-carrier-chip:focus-visible { border-color: var(--accent); color: #ffe4bd; text-decoration: underline; outline: none; } .mechanics-flag-chip, .mechanics-playable-chip { border-color: rgba(102, 196, 255, .45); color: #9edbff; } .mechanics-body-refs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-left: 7px; } .mechanics-body-refs::before { content: "→"; color: var(--muted); } .mechanics-param-list, .mechanics-condition-list { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .mechanics-param { min-height: 24px; border: 1px solid #3b4758; border-radius: 6px; background: rgba(0, 0, 0, .18); color: #d9e3f0; font-size: 12px; } .mechanics-param > summary, .mechanics-param-honest { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; } .mechanics-param > summary { cursor: pointer; } .mechanics-param-label { color: #aebacf; font-weight: 850; } .mechanics-param-human { color: #eef4fc; font-weight: 750; } .mechanics-param-raw-row { display: grid; gap: 5px; padding: 0 7px 7px; } .mechanics-raw-chip { width: max-content; max-width: 100%; padding: 2px 5px; border-radius: 4px; background: rgba(145, 158, 180, .12); color: #aeb8c8; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; } .mechanics-raw-chip.is-undecoded { color: #d4c6aa; text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: #c8a96a; text-underline-offset: 3px; } .mechanics-param-evidence { max-width: 48ch; color: var(--muted); font-size: 11px; line-height: 1.35; } .mechanics-condition { max-width: 100%; border: 1px solid rgba(111, 181, 228, .42); border-radius: 999px; background: rgba(35, 84, 116, .18); color: #bce2fb; font-size: 12px; font-weight: 800; } .mechanics-condition[open] { width: 100%; border-radius: 7px; } .mechanics-condition > summary { padding: 3px 8px; cursor: pointer; } .mechanics-condition-tree { display: grid; gap: 7px; margin: 2px 8px 8px; padding: 8px; border: 1px dashed rgba(111, 181, 228, .35); border-radius: 6px; background: rgba(0, 0, 0, .18); color: #d5e2ef; font-weight: 500; } .mechanics-condition-root { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .mechanics-condition-root span { padding: 1px 5px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--muted); font-size: 10px; } .mechanics-condition-tree ul { display: grid; gap: 5px; margin: 0; padding-left: 18px; } .mechanics-condition-tree li small { display: block; margin-top: 2px; color: var(--muted); } .mechanics-condition-expression { padding: 6px; border-radius: 4px; background: rgba(0, 0, 0, .24); color: #aeb8c8; overflow-wrap: anywhere; } .mechanics-condition-empty { margin: 0; color: var(--muted); } .mechanic-evidence { margin-top: 8px; } .mechanic-evidence summary { color: var(--link); font-size: 12px; font-weight: 800; cursor: pointer; } .mechanic-evidence dl { display: grid; gap: 5px; margin: 8px 0 0; padding: 8px; border: 1px dashed #4a5668; border-radius: 6px; background: rgba(0, 0, 0, .18); } .mechanic-evidence dl > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; } .mechanic-evidence dt { color: var(--muted); font-weight: 800; } .mechanic-evidence dd { min-width: 0; margin: 0; overflow-wrap: anywhere; } .mechanics-ref { font-weight: 850; } .term-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 16px; } .term-tab { min-height: 34px; padding: 5px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-weight: 800; cursor: pointer; } .term-tab.active { background: var(--accent); border-color: var(--accent); color: #111; } .term-panel { margin-top: 14px; } .muted { color: var(--muted); } .graph-toolbar { grid-template-columns: minmax(280px, 560px); } .term-graph-layout { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 18px; align-items: start; } .term-graph-results, .term-graph-node { min-width: 0; } .term-graph-results { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #08090a; } .graph-results-summary { margin: 2px 4px 10px; color: var(--muted); font-size: 14px; font-weight: 800; } .graph-result-list, .graph-node-chip-list, .graph-edge-list { display: grid; gap: 8px; } .graph-node-chip-list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .graph-node-chip-list.compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); width: 100%; } .graph-node-link { display: grid; gap: 3px; min-width: 0; padding: 8px 10px; border: 1px solid #303238; border-radius: 7px; background: #111315; color: var(--text); text-align: left; cursor: pointer; } .graph-node-link:hover, .graph-node-link.active { border-color: var(--accent); } .graph-node-link.active { background: #2a241b; } .graph-node-label { min-width: 0; color: var(--accent); font-size: 16px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .graph-node-kind { min-width: 0; color: var(--muted); font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .graph-history { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; } .graph-history .text-button { min-width: 44px; } .graph-history span { color: var(--muted); font-weight: 800; } .graph-node-card { grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; } .graph-raw-name { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 14px; color: var(--muted); } .graph-raw-name code, .graph-alias-list code, .graph-term-key code { padding: 2px 6px; border: 1px solid #3a4050; border-radius: 5px; background: #111722; color: #d7dce7; font-size: 13px; } .graph-usage { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; } .graph-section { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #08090a; } .graph-section h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; font-size: 20px; } .graph-section h3 span, .graph-section-note { color: var(--muted); } .graph-section-note { margin: -4px 0 12px; font-size: 14px; } .graph-alias-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .graph-edge-row { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border: 1px solid #1d2026; border-radius: 7px; background: #0d0f12; } .graph-edge-relation { color: var(--blue); font-weight: 900; } .graph-edge-targets { display: grid; gap: 8px; min-width: 0; } .graph-term-key { color: var(--muted); font-weight: 800; } .graph-more { padding: 8px 10px; color: var(--muted); font-weight: 800; } .mention-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .mention-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .mention-tab { min-height: 34px; padding: 5px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-weight: 800; cursor: pointer; } .mention-tab span { margin-left: 6px; color: var(--muted); } .mention-tab.active { background: var(--accent); border-color: var(--accent); color: #111; } .mention-tab.active span { color: #111; } .mention-action-button { position: relative; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 6px; background: #101010; color: var(--text); font-weight: 800; cursor: pointer; } .mention-action-button[data-pending-label] { color: transparent; } .mention-action-button[data-pending-label]::after { content: attr(data-pending-label); position: absolute; inset: 0; display: grid; place-items: center; padding: inherit; color: var(--muted); white-space: nowrap; } .mention-tab[data-bootstrap-pending], .mention-action-button[data-bootstrap-pending], .related-card-actions .related-card-icon-button[data-bootstrap-pending], .mention-action-button[data-hydration-pending], .related-card-actions .related-card-icon-button[data-hydration-pending] { opacity: 1; cursor: default; } .term-text-card { grid-template-columns: 1fr; } .box-detail-grid { display: grid; gap: 18px; } .box-detail-section { display: grid; gap: 10px; } .box-detail-section h3 { margin: 0; font-size: 22px; } .source-list { display: grid; gap: 8px; } .source-row { display: grid; grid-template-columns: minmax(170px, 320px) minmax(0, 1fr); gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255, 255, 255, .035); } .source-row strong { color: var(--accent); } .source-box-card { display: grid; justify-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: transparent; color: var(--text); font-weight: 800; cursor: pointer; } .related-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .related-unit-card { display: grid; gap: 8px; align-content: start; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 10px; } .term-tab > span { margin-left: 6px; color: var(--muted); } .term-tab.active > span { color: #111; } .keyword-data-link-related { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .keyword-data-link-related-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: var(--muted); font-size: 13px; letter-spacing: 0; text-transform: uppercase; } .keyword-data-link-related-header span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: rgba(255, 255, 255, 0.04); } .related-unit, .related-summon { display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--text); font-weight: 800; cursor: pointer; } .related-summon-card .equipment-card-tags { text-align: center; color: var(--muted); } .owned-summons { display: grid; gap: 12px; } .owned-summons h3 { margin: 0; } .inline-link { padding: 0; border: 0; background: transparent; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; } .related-unit-skills-toggle, .related-unit-paths-toggle, .related-unit-graph-toggle { min-height: 32px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: #101010; color: var(--text); font-weight: 800; cursor: pointer; } .related-card-actions { display: flex; justify-content: center; gap: 8px; min-width: 0; } .related-card-actions .related-card-icon-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 38px; min-height: 38px; padding: 0; border: 1px solid #2c3038; border-radius: 8px; background: #0d0f12; color: #d8e0ed; cursor: pointer; overflow: visible; transition: transform .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, background .14s ease; } .related-card-actions .related-card-icon-button::before { content: ""; position: absolute; inset: 3px; z-index: 0; border-radius: 6px; background: radial-gradient(circle at 35% 25%, rgba(255, 196, 118, .28), transparent 42%), linear-gradient(135deg, rgba(91, 151, 255, .18), rgba(255, 193, 111, .12)); opacity: 0; transform: scale(.78); transition: opacity .14s ease, transform .14s ease; } .related-card-actions .related-card-icon-button svg { position: relative; z-index: 1; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease, filter .16s ease; pointer-events: none; } .related-card-actions .related-card-icon-button svg * { pointer-events: none; } .related-card-actions .related-action-icon-fill { fill: rgba(255, 255, 255, .045); } .related-card-actions .related-action-spark { fill: rgba(255, 196, 118, .2); } .related-card-actions .related-action-merge, .related-card-actions .related-action-dash { stroke: var(--accent); } .related-card-actions .related-card-icon-button:hover, .related-card-actions .related-card-icon-button:focus-visible, .related-card-actions .related-card-icon-button.active { border-color: rgba(255, 194, 116, .78); background: #15181f; color: var(--accent); box-shadow: 0 0 0 1px rgba(255, 194, 116, .18), 0 8px 18px rgba(0, 0, 0, .34); transform: translateY(-1px); } .related-card-actions .related-card-icon-button:hover::before, .related-card-actions .related-card-icon-button:focus-visible::before, .related-card-actions .related-card-icon-button.active::before { opacity: 1; transform: scale(1); } .related-card-actions .related-card-icon-button:hover svg, .related-card-actions .related-card-icon-button:focus-visible svg, .related-card-actions .related-card-icon-button.active svg { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(255, 193, 111, .34)); } .related-card-actions .related-unit-skills-toggle:hover .related-action-spark, .related-card-actions .related-unit-skills-toggle:focus-visible .related-action-spark, .related-card-actions .related-unit-skills-toggle.active .related-action-spark { fill: rgba(255, 196, 118, .65); } .related-card-actions .related-unit-paths-toggle:hover .related-action-dash, .related-card-actions .related-unit-paths-toggle:focus-visible .related-action-dash, .related-card-actions .related-unit-paths-toggle.active .related-action-dash { stroke-dasharray: 2 2; } .related-unit-skills, .related-unit-paths { margin-top: 4px; } .mention-path-list { display: grid; gap: 8px; } .core-page-members { margin: 14px 0; } .core-page-members-header, .core-page-member > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .core-page-members-header { margin-bottom: 8px; color: var(--muted); } .core-page-member-list { display: grid; gap: 8px; } .core-page-member { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); } .core-page-member > header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .core-page-primary { margin-top: 7px; overflow-x: auto; } .core-page-members-skeleton{ min-height: 84px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); } .core-page-kind-panel { min-width: 0; } .core-page-filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 10px; } .core-page-filter-row .term-filter-chip { margin: 0; } .core-page-certainty-filters { padding-bottom: 8px; border-bottom: 1px solid rgba(89, 102, 120, .45); } .core-page-certainty-chip.active, .core-page-component-fold-toggle.active { border-color: #bd9852; background: rgba(189, 152, 82, .22); color: #f3d48e; } .core-page-component-filters .term-filter-chip { border-style: dashed; border-color: #80649a; background: rgba(128, 100, 154, .14); color: #d9b9f2; } .certainty-pill { min-height: 20px; padding: 1px 7px; border: 1px solid rgba(117, 166, 205, .45); border-radius: 999px; background: rgba(66, 80, 106, .62); font-size: 11px; font-weight: 850; } .component-owner-link { align-items: center; min-height: 22px; padding: 2px 7px; border: 1px solid #5e758c; background: rgba(117, 166, 205, .10); color: #a9d7ff; font-size: 11px; font-weight: 800; line-height: 1; text-decoration: none; } .related-unit-card > .component-owner-link { justify-self: center; } .core-page-component-group-face { cursor: default; } .core-page-component-instance-list { display: grid; gap: 10px; } .core-page-component-instance-list > .related-unit-card { background: rgba(0, 0, 0, .18); } .core-page-limit-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; } .core-page-group-count { color: var(--accent); font-weight: 900; } .core-page-npc-face { cursor: default; } .core-page-npc-instance-list { display: grid; gap: 10px; } .core-page-npc-instance { display: grid; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .18); } .core-page-npc-instance > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .core-page-npc-instance > header a { color: var(--link); font-weight: 850; } .core-page-npc-instance > header span { color: var(--muted); font-size: 12px; font-weight: 800; } .core-page-npc-where .npc-map-list { gap: 6px; } .core-page-npc-where .npc-map-row { padding: 7px 8px; } .core-page-generic-grid .skill-member-card-face { text-decoration: none; } .mention-path-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; color: var(--muted); font-size: 11px; line-height: 1.2; } .mention-path-legend-item { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; } .mention-path-legend-swatch { width: 10px; height: 3px; border-radius: 999px; background: var(--mention-path-link-color); box-shadow: 0 0 0 1px rgba(0, 0, 0, .16); } .mention-path-expander { display: grid; gap: 8px; } .mention-path-expander summary { width: max-content; max-width: 100%; padding: 3px 0; color: var(--link); font-size: 13px; font-weight: 850; cursor: pointer; } .mention-path { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255, 255, 255, .035); font-size: 13px; line-height: 1.35; } .mention-path.secondary { border-color: rgba(255, 195, 122, .42); } .mention-path-node { display: inline-flex; align-items: center; gap: 3px; min-height: 24px; max-width: 100%; padding: 2px 5px; border: 1px solid #4f5b6d; border-radius: 6px; background: rgba(255, 255, 255, .045); } .mention-path-source { padding: 2px 6px 2px 2px; color: var(--link); font-weight: 800; } .mention-path-source .mini-icon { width: 24px; height: 24px; } .mention-path-source-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mention-path-keyword { color: var(--accent); } .mention-path-link-arrow { display: inline-flex; align-items: center; min-height: 24px; color: var(--mention-path-link-color, var(--muted)); font-weight: 900; cursor: help; text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; } .mention-graph-backdrop { position: fixed; inset: 0; z-index: 86; display: grid; place-items: center; padding: 22px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(5px); } .mechanics-possessors-backdrop { z-index: 100; } .mechanics-possessors-window { width: min(620px, calc(100vw - 32px)); height: min(640px, calc(100vh - 32px)); min-height: 0; } .mechanics-possessors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); align-content: start; gap: 12px; padding: 18px; overflow: auto; } .mechanics-possessors-grid-chip { display: flex; flex-direction: column; gap: 7px; width: auto; height: auto; min-height: 78px; padding: 8px 5px; text-align: center; } .mechanics-possessor-name { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .mention-graph-backdrop.is-minimized { inset: 70px auto auto 20px; display: block; width: 44px; height: 44px; padding: 0; background: transparent; backdrop-filter: none; pointer-events: none; } .mention-graph-window { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(1560px, calc(100vw - 36px)); height: min(930px, calc(100vh - 36px)); min-height: 420px; border: 1px solid rgba(255, 197, 118, .38); border-radius: 8px; background: #08090a; box-shadow: 0 28px 70px rgba(0, 0, 0, .62); overflow: hidden; } .mention-graph-backdrop.is-minimized .mention-graph-window { display: none; } .kofi-dialog-backdrop { z-index: 92; } .kofi-dialog-window { width: min(440px, calc(100vw - 32px)); height: auto; min-height: 0; grid-template-rows: auto auto; } .kofi-dialog-header { align-items: center; } .kofi-dialog-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid rgba(114, 164, 242, .38); border-radius: 8px; background: rgba(114, 164, 242, .12); color: #f8fbff; } .kofi-dialog-icon .kofi-symbol-img { width: 30px; height: 30px; } .kofi-dialog-content { display: grid; gap: 18px; padding: 20px; } .kofi-dialog-content p { margin: 0; color: var(--text); font-size: 17px; line-height: 1.5; } .kofi-support-link { width: max-content; max-width: 100%; color: #9bc0ff; font-size: 16px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; } .kofi-support-link:hover, .kofi-support-link:focus-visible { color: #cfe1ff; outline-color: #72a4f2; } .mention-graph-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; min-width: 0; padding: 16px 18px; border-bottom: 1px solid var(--line); background: #0e1012; } .mention-graph-titlebar { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 auto; } .mention-graph-title-copy { min-width: 0; overflow: hidden; } .mention-graph-header h2 { margin: 0 0 8px; font-size: 23px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; } .mention-graph-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 800; } .mention-graph-meta span { min-height: 24px; padding: 3px 8px; border: 1px solid #2f3540; border-radius: 6px; background: #141821; } .mention-graph-unit-strip { display: flex; flex-wrap: wrap; align-content: flex-start; flex: 1 1 430px; gap: 8px; max-width: min(780px, 50vw); max-height: 118px; padding: 2px; overflow: auto; scrollbar-width: thin; } .mention-graph-unit-chip { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 54px; height: 54px; padding: 3px; border: 1px solid #2f3540; border-radius: 7px; background: #141821; opacity: .54; overflow: visible; transition: opacity .12s ease, border-color .12s ease, background-color .12s ease, transform .12s ease; } .mention-graph-unit-chip .mini-icon { width: 44px; height: 44px; border-radius: 6px; } .mention-graph-unit-chip:hover, .mention-graph-unit-chip:focus-visible, .mention-graph-unit-chip.active { border-color: var(--accent); background: rgba(255, 200, 97, .12); opacity: 1; outline: none; } .mention-graph-unit-chip.active, .mention-graph-unit-chip.selected { transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(255, 200, 97, .18); } .mention-graph-unit-chip.selected { border-color: #fff1bc; background: rgba(255, 200, 97, .16); opacity: 1; } .mention-graph-unit-chip .order-value-badge { right: -8px; bottom: -6px; font-size: 10px; } .mention-graph-unit-page-cue { position: absolute; inset: 4px; z-index: 2; display: block; opacity: 0; pointer-events: none; transition: opacity .12s ease; } .mention-graph-unit-page-cue::before { content: ""; position: absolute; left: 5px; top: 11px; width: 24px; height: 15px; border: 1px solid rgba(255, 241, 188, .78); border-radius: 4px 8px 5px 5px; background: rgba(255, 241, 188, .22); clip-path: polygon(10% 10%, 55% 10%, 67% 48%, 92% 54%, 92% 78%, 16% 78%, 10% 62%); box-shadow: 0 0 14px rgba(255, 200, 97, .24); } .mention-graph-unit-page-cue::after { content: ""; position: absolute; left: 18px; top: 8px; width: 9px; height: 9px; border-left: 1px solid rgba(255, 241, 188, .78); border-top: 1px solid rgba(255, 241, 188, .78); transform: skewX(-16deg); } .mention-graph-unit-page-tooltip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 9; padding: 4px 8px; border: 1px solid rgba(255, 200, 97, .52); border-radius: 6px; background: rgba(8, 9, 10, .94); color: #fff1bc; font-size: 12px; font-weight: 900; line-height: 1.1; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(4px); transition: opacity .12s ease, transform .12s ease; } .mention-graph-unit-page-tooltip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; border-right: 1px solid rgba(255, 200, 97, .52); border-bottom: 1px solid rgba(255, 200, 97, .52); background: rgba(8, 9, 10, .94); transform: translate(-50%, -50%) rotate(45deg); } .mention-graph-unit-chip.selected:hover .order-icon-wrap, .mention-graph-unit-chip.selected:focus-visible .order-icon-wrap { opacity: .3; } .mention-graph-unit-chip.selected:hover .mention-graph-unit-page-cue, .mention-graph-unit-chip.selected:focus-visible .mention-graph-unit-page-cue, .mention-graph-unit-chip.selected:hover .mention-graph-unit-page-tooltip, .mention-graph-unit-chip.selected:focus-visible .mention-graph-unit-page-tooltip { opacity: 1; } .mention-graph-unit-chip.selected:hover .mention-graph-unit-page-tooltip, .mention-graph-unit-chip.selected:focus-visible .mention-graph-unit-page-tooltip { transform: translateX(-50%) translateY(0); } .mention-graph-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .mention-graph-distance { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; padding: 3px 7px; border: 1px solid #36404e; border-radius: 6px; background: #151a22; color: var(--muted); font-size: 12px; font-weight: 900; } .mention-graph-distance strong { min-width: 32px; color: var(--accent); text-align: center; } .mention-graph-scale, .mention-graph-distance-step, .mention-graph-close { min-height: 34px; border: 1px solid #596678; border-radius: 6px; background: #202632; color: var(--text); font-weight: 900; cursor: pointer; } .mention-graph-scale { width: 36px; padding: 4px; font-size: 20px; line-height: 1; } .mention-graph-minimize { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1px solid rgba(255, 200, 97, .66); border-radius: 999px; background: rgba(20, 25, 33, .95); color: #ffd59a; box-shadow: 0 8px 20px rgba(0, 0, 0, .42), 0 0 0 2px rgba(255, 200, 97, .1); line-height: 1; cursor: pointer; } .mention-graph-minimize-icon { position: relative; display: block; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 999px; pointer-events: none; transition: transform .12s ease; } .mention-graph-minimize-icon::before, .mention-graph-minimize-icon::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); } .mention-graph-minimize-icon::before { top: 4px; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateX(-50%) rotate(45deg); } .mention-graph-minimize-icon::after { bottom: 5px; width: 10px; height: 2px; border-radius: 999px; background: currentColor; } .mention-graph-distance-step { width: 28px; min-height: 26px; padding: 2px; font-size: 13px; line-height: 1; } .mention-graph-close { padding: 5px 13px; } .mention-graph-restore { display: none; } .mention-graph-backdrop.is-minimized .mention-graph-restore { position: fixed; left: 20px; top: 70px; z-index: 87; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 200, 97, .72); border-radius: 999px; background: rgba(20, 25, 33, .96); color: #ffd59a; box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 3px rgba(255, 200, 97, .12); cursor: pointer; pointer-events: auto; } .mention-graph-backdrop.is-minimized .mention-graph-restore .graph-view-icon { width: 23px; height: 23px; } body:has(#termDetailView:not(.hidden)) .mention-graph-backdrop.is-minimized { top: 160px; } body:has(#termDetailView:not(.hidden)) .mention-graph-backdrop.is-minimized .mention-graph-restore { top: 160px; } .mention-graph-backdrop.is-minimized .mention-graph-restore:hover, .mention-graph-backdrop.is-minimized .mention-graph-restore:focus-visible { border-color: var(--accent); background: rgba(75, 55, 29, .96); outline: none; } .mention-graph-minimize:hover, .mention-graph-minimize:focus-visible { border-color: var(--accent); background: rgba(75, 55, 29, .96); outline: none; } .mention-graph-minimize:hover .mention-graph-minimize-icon, .mention-graph-minimize:focus-visible .mention-graph-minimize-icon { transform: translateY(2px) scale(.95); } .mention-graph-close:hover, .mention-graph-scale:hover, .mention-graph-minimize:hover, .mention-graph-distance-step:hover, .related-unit-graph-toggle:hover { border-color: var(--accent); } .mention-graph-scroller { min-height: 0; overflow: auto; cursor: grab; touch-action: none; scrollbar-width: none; padding: 22px; background: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px), #050606; background-size: 34px 34px; } .mention-graph-canvas { position: relative; min-width: 760px; min-height: 760px; margin: 0 auto; } .mention-graph-rings, .mention-graph-nodes { position: absolute; inset: 0; } .mention-graph-rings { z-index: 0; pointer-events: none; } .mention-graph-ring { position: absolute; border: 1px solid rgba(255, 197, 118, .2); border-radius: 9999px; box-shadow: inset 0 0 42px rgba(255, 197, 118, .025), 0 0 0 1px rgba(98, 146, 255, .06); } .mention-graph-nodes { z-index: 2; pointer-events: none; } .mention-graph-node { position: absolute; width: 132px; min-width: 0; padding: 0; transform: translate(-50%, -50%); pointer-events: auto; --mention-graph-node-color: rgba(126, 174, 218, .72); /* No opacity transition: dim flips are instant so rapid hover moves never animate dozens of box-shadowed cards per frame. */ } .mention-graph-node-source { --mention-graph-node-color: rgba(98, 146, 255, .74); } .mention-graph-node-keyword { --mention-graph-node-color: rgba(255, 195, 122, .78); } .mention-graph-node-skill { --mention-graph-node-color: rgba(126, 174, 218, .74); } .mention-graph-node-buff { --mention-graph-node-color: rgba(235, 112, 104, .72); } .mention-graph-node-category { --mention-graph-node-color: rgba(186, 142, 240, .76); } .mention-graph-node-meta { --mention-graph-node-color: rgba(150, 160, 172, .6); } .term-graph-action { min-height: 34px; padding: 5px 13px; border: 1px solid #596678; border-radius: 6px; background: #202632; color: var(--text); font-weight: 900; cursor: pointer; } .term-graph-action:hover { border-color: var(--accent); } .term-graph-action.active { background: var(--accent); border-color: var(--accent); color: #111; } .engrave-calculator-window { width: min(1120px, calc(100vw - 36px)); height: min(780px, calc(100vh - 36px)); min-height: 420px; } .lore-dialog-window { width: min(640px, calc(100vw - 36px)); height: auto; max-height: min(720px, calc(100vh - 36px)); min-height: 0; } .lore-dialog-content { min-height: 0; overflow: auto; padding: 22px 24px 26px; background: #08090a; color: #edf2f8; font-size: 18px; line-height: 1.58; overflow-wrap: anywhere; } .engrave-calculator-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); min-height: 0; overflow: hidden; background: #050606; } .engrave-main { min-width: 0; overflow: auto; padding: 18px; } .engrave-stat-list { display: grid; gap: 10px; } .engrave-stat-row { display: grid; grid-template-columns: 38px 78px minmax(150px, 1fr) 52px minmax(160px, auto); gap: 10px; align-items: center; min-height: 60px; padding: 10px 12px; border: 1px solid #202733; border-radius: 8px; background: #101317; } .engrave-stat-icon-cell { display: grid; place-items: center; } .engrave-stat-name { color: #e6ebf3; font-weight: 900; } .engrave-slider { width: 100%; min-height: 40px; accent-color: var(--accent); cursor: pointer; } .engrave-percent-value { color: var(--accent); font-weight: 900; text-align: right; } .engrave-result-value { color: #eef3fb; font-weight: 900; text-align: right; white-space: nowrap; } .engrave-sidebar { min-width: 0; overflow: auto; border-left: 1px solid var(--line); background: #0b0d10; } .engrave-sidebar summary { display: flex; align-items: center; min-height: 48px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--accent); font-size: 18px; font-weight: 900; cursor: pointer; } .engrave-sidebar-body { display: grid; gap: 14px; padding: 16px; } .engrave-field-label { color: var(--muted); font-size: 13px; font-weight: 900; text-transform: uppercase; } .engrave-select { min-height: 44px; padding: 0 12px; border: 1px solid #303844; border-radius: 7px; background: #151a20; color: var(--text); font: inherit; font-weight: 900; } .engrave-tree-list { display: grid; gap: 10px; } .engrave-tree-rank { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; align-items: start; } .engrave-tree-rank-label { display: inline-grid; place-items: center; min-height: 36px; border: 1px solid #27303d; border-radius: 7px; background: #151a20; color: var(--accent); font-size: 12px; font-weight: 900; } .engrave-tree-rank-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 7px; min-width: 0; } .engrave-tree-node { position: relative; min-width: 0; cursor: pointer; } .engrave-tree-node input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; } .engrave-tree-node-face { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 7px; align-items: center; min-height: 42px; padding: 5px 7px; border: 1px solid #27303d; border-radius: 8px; background: #11161d; color: #eaf0f8; } .engrave-tree-node.active .engrave-tree-node-face { border-color: var(--accent); background: #222018; } .engrave-level-row { display: flex; align-items: center; gap: 8px; } .engrave-level-row .engrave-level-slider { flex: 1; min-width: 0; } .engrave-level-row .engrave-percent-value { min-width: 2ch; text-align: right; } .engrave-tree-node.locked { cursor: not-allowed; } .engrave-tree-node.locked input { cursor: not-allowed; } .engrave-tree-node.locked .engrave-tree-node-face { opacity: 0.38; filter: grayscale(0.8); border-style: dashed; } .engrave-tree-node input:focus-visible + .engrave-tree-node-face { outline: 2px solid var(--accent); outline-offset: 2px; } .engrave-tree-icon { width: 34px; height: 34px; border-radius: 50%; object-fit: contain; background: #090b0f; } .engrave-tree-bonus { min-width: 0; color: #eef3fb; font-size: 12px; font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; } .engrave-empty { padding: 12px; border: 1px dashed #394151; border-radius: 8px; color: var(--muted); font-size: 13px; } .engrave-base-section h3 { margin: 4px 0 8px; font-size: 17px; } .engrave-base-explainer { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.35; } .engrave-base-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .engrave-base-table th, .engrave-base-table td { padding: 8px 6px; border-bottom: 1px solid #232934; color: #dfe6ef; font-size: 12px; text-align: right; } .engrave-base-table th:first-child, .engrave-base-table td:first-child { text-align: left; } .engrave-base-table td:first-child { display: flex; align-items: center; gap: 6px; min-width: 0; } .engrave-base-table .engraving-stat-icon { width: 20px; height: 20px; flex: 0 0 auto; } .term-graph-token { position: relative; } .term-graph-hidden-badge { position: absolute; right: 8px; top: -8px; display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border: 1px solid rgba(186, 142, 240, .7); border-radius: 999px; background: #1d1426; color: rgba(222, 198, 255, .95); font-size: 12px; font-weight: 800; } .term-graph-dup-badge { position: absolute; left: 8px; top: -8px; display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border: 1px solid rgba(126, 174, 218, .7); border-radius: 999px; background: #101a26; color: rgba(178, 212, 247, .95); font-size: 12px; font-weight: 800; } .graph-playable-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-weight: 700; cursor: pointer; white-space: nowrap; } .mention-graph-token { display: grid; justify-items: center; gap: 6px; color: var(--text); text-decoration: none; } .mention-graph-icon-circle { display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid var(--mention-graph-node-color); border-radius: 999px; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .12), transparent 36%), rgba(18, 21, 26, .96); box-shadow: 0 0 0 4px rgba(0, 0, 0, .3), 0 12px 24px rgba(0, 0, 0, .34); overflow: hidden; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; } .mention-graph-label { display: block; width: 132px; min-width: 0; overflow: hidden; color: #d9e2f0; font-size: 12px; font-weight: 900; line-height: 1.2; text-align: center; text-overflow: ellipsis; text-shadow: 0 2px 7px #000; white-space: nowrap; } .mention-graph-label.keyword { cursor: help; } .mention-graph-token:hover .mention-graph-icon-circle, .mention-graph-token:focus-within .mention-graph-icon-circle { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 0, 0, .34), 0 0 22px rgba(255, 197, 118, .28), 0 14px 26px rgba(0, 0, 0, .38); transform: translateY(-1px) scale(1.04); } .mention-graph-token:hover .mention-graph-label, .mention-graph-token:focus-within .mention-graph-label { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .mention-graph-node .mini-icon { width: 40px; height: 40px; } .mention-graph-node-count { position: absolute; right: 20px; top: -8px; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid rgba(255, 198, 116, .7); border-radius: 999px; background: #261b10; color: var(--accent); font-size: 12px; font-weight: 900; } .mention-graph-node-distance { position: absolute; left: 50%; top: 18px; z-index: 4; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid rgba(255, 238, 196, .46); border-radius: 999px; background: rgba(10, 13, 18, .48); box-shadow: 0 2px 10px rgba(0, 0, 0, .26); color: rgba(255, 235, 190, .9); font-size: 12px; font-weight: 900; line-height: 1; pointer-events: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .82); transform: translate(-50%, -50%); } .mention-graph-scroller::-webkit-scrollbar { display: none; } .mention-graph-scroller.is-panning { cursor: grabbing; user-select: none; } .mention-graph-edges { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; } /* Paint-cost note: edge paths deliberately carry NO filter and NO transition. A drop-shadow makes every path a filtered layer, and animating opacity/filter on hundreds of them (every hover enter/leave flips the canvas highlight class) re-rasterizes the whole edge layer per frame — the source of the large-graph hover stutter. */ .mention-graph-edge-path { fill: none; stroke: var(--mention-edge-color, rgba(235, 112, 104, .82)); stroke-linecap: round; stroke-linejoin: round; opacity: .92; pointer-events: none; } /* Edge hit paths are kept as data carriers for node-hover traversal only; edges are not pointer targets (no hover/pin on lines). */ .mention-graph-edge-hit { fill: none; stroke: transparent; stroke-width: 14px; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .mention-graph-edge-path.secondary { stroke: var(--mention-edge-color, rgba(250, 202, 99, .86)); } .mention-graph-canvas.has-edge-highlight .mention-graph-edge-path { opacity: .18; } .mention-graph-canvas.has-edge-highlight .mention-graph-edge-path.is-edge-highlight { opacity: 1; stroke: var(--mention-edge-active-color, var(--mention-edge-color, rgba(255, 214, 144, .98))); } .mention-graph-canvas.has-edge-highlight .mention-graph-node:not(.is-edge-connected) { opacity: .38; } .mention-graph-node.is-edge-connected { z-index: 3; opacity: 1; } .mention-graph-node.is-edge-connected .mention-graph-icon-circle { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 0, 0, .34), 0 0 24px rgba(255, 197, 118, .34), 0 14px 28px rgba(0, 0, 0, .42); transform: translateY(-1px) scale(1.05); } .mention-graph-node.is-edge-connected .mention-graph-label { color: var(--accent); } .mention-graph-node.is-edge-focus-node .mention-graph-icon-circle { border-color: #fff1bc; } .mention-graph-edge-data { display: none; } .keyword-member-list { display: grid; gap: 10px; } .keyword-member { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 18px; align-items: start; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; } .keyword-member strong { color: var(--link); font-size: 18px; } .keyword-member-icon { width: 40px; height: 40px; object-fit: contain; vertical-align: middle; margin-right: 8px; } .keyword-member span { line-height: 1.45; } /* Buff/Debuff polarity + "N units" labels on effect-family member rows. */ .keyword-member strong .pill.keyword-member-polarity, .keyword-member strong .pill.keyword-member-units { margin-left: 8px; min-height: 20px; padding: 1px 8px; font-size: 12px; vertical-align: middle; color: var(--text); } .keyword-member strong .pill.keyword-member-units { color: var(--muted); white-space: nowrap; } .skill-member-list { display: grid; gap: 10px; } .skill-member-list.skill-member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .skill-member-list.skill-member-grid.tiles-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .skill-member-list-compact { gap: 6px; } .skill-member-card { position: relative; min-width: 0; } .skill-member-list-compact .skill-member-card { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 6px; align-items: center; } .skill-member { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; } .skill-member-grid .skill-member { grid-template-columns: 1fr; justify-items: center; align-content: start; min-height: 104px; gap: 7px; padding: 12px 8px 10px; text-align: center; } .skill-member-grid .skill-member .mini-icon { width: 54px; height: 54px; border-radius: 10px; background: #111; } .skill-member-list-compact .skill-member { grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 42px; padding: 6px 9px; border-radius: 7px; } .skill-member-card-face > .related-name-line, .skill-member-list-compact .skill-member > strong { grid-column: 2; } .skill-member-list-compact .skill-member .mini-icon { width: 30px; height: 30px; border-radius: 6px; background: #111; } .skill-member-list.skill-member-grid.tiles-sm .skill-member { min-height: 62px; padding: 8px 4px; } .skill-member-list.skill-member-grid.tiles-sm .skill-member .mini-icon { width: 42px; height: 42px; } .skill-member strong { color: var(--link); font-size: 18px; } .skill-member-list-compact .skill-member strong { min-width: 0; color: var(--text); font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .skill-member-grid .skill-member strong { max-width: 100%; font-size: 13px; line-height: 1.2; word-break: break-word; } .skill-member-list.skill-member-grid.tiles-sm .skill-member strong { display: none; } .skill-member-link-badge { margin: 0; } .skill-member-goto { color: var(--accent); font-size: 15px; font-weight: 900; } .skill-member span { grid-column: 1 / -1; line-height: 1.45; } .skill-member-list-compact .skill-member span { grid-column: auto; } .skill-member-card > .tile-help { position: absolute; top: 4px; right: 4px; z-index: 2; width: 24px; height: 24px; text-decoration: none; } .skill-member-list-compact .skill-member-card > .tile-help { position: static; } /* Term-page related skill/effect cards share the compact unit-card species. The matched-row compact picker above intentionally keeps its own grammar. */ .related-skill-grid.table { grid-template-columns: minmax(0, 1fr); } .related-skill-card > .skill-member-card-face, .core-page-generic-card > .skill-member-card-face { grid-template-columns: 38px minmax(0, 1fr); align-items: center; justify-items: start; gap: 10px; min-height: 44px; width: 100%; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; text-decoration: none; } .related-skill-card > .skill-member-card-face .mini-icon, .core-page-generic-card > .skill-member-card-face .mini-icon { width: 38px; height: 38px; border-radius: 7px; background: #111; } .related-skill-card > .skill-member-card-face .term-kind-glyph, .core-page-generic-card > .skill-member-card-face .term-kind-glyph { justify-self: center; } .related-skill-card .related-name-line, .core-page-generic-card .related-name-line { grid-column: 2; min-width: 0; color: var(--link); font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; } .related-skill-card .related-name-line strong, .core-page-generic-card .related-name-line strong { color: inherit; font-size: inherit; } .related-card-desc { min-width: 0; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; } .rank-toolbar { text-align: left; font-size: 22px; margin-bottom: 28px; } .rank-toolbar h2 { margin: 0; font-size: 30px; } .rank-tree { display: grid; gap: 12px; } .rank-row { display: grid; grid-template-columns: minmax(280px, 1fr) 270px minmax(280px, 1fr); gap: 24px; align-items: start; min-height: 150px; } .rank-row.skills-right { grid-template-columns: 270px minmax(320px, 1fr); } .rank-row.skills-right .rank-cell.left { display: none; } .rank-cell { display: grid; gap: 12px; } .rank-cell.left .skill-card { justify-self: stretch; } .rank-cell.right .skill-card { justify-self: stretch; } .level-tabs { display: flex; gap: 6px; margin: 0 0 8px; } .level-tab { min-width: 34px; min-height: 28px; border: 1px solid #5a6475; border-radius: 6px; background: #111722; color: var(--text); font-weight: 800; cursor: pointer; } .level-tab.active { background: var(--accent); color: #111; border-color: var(--accent); } .level-view-tabs .level-view-button { min-width: auto; } .module-choice-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 10px; padding-right: 72px; } .module-choice { min-height: 30px; max-width: 210px; padding: 3px 10px; border: 1px solid #596678; border-radius: 6px; background: #303a4d; color: var(--text); font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .module-choice.active { background: var(--accent); border-color: var(--accent); color: #111; } .rank-node { min-height: 132px; padding: 20px; border-radius: 12px; background: var(--card); text-align: center; font-size: 22px; } .rank-node strong { display: block; margin-bottom: 16px; font-size: 26px; } .empty-state { padding: 40px; color: var(--muted); font-size: 22px; } /* Tile view modes (density button cycles table -> large tiles -> small). */ .tile-grid { display: grid; gap: 12px; margin-top: 14px; } .tile-grid.tiles-lg { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } .tile-grid.tiles-sm { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); } .unit-tile, .catalog-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; text-align: center; } .unit-tile { cursor: pointer; } .unit-tile-explainable { align-items: stretch; cursor: default; } .unit-tile-face { display: flex; flex-direction: column; align-items: center; gap: 8px; color: inherit; text-decoration: none; } .unit-filter-explain-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; max-width: 100%; padding: 3px 9px; border: 1px solid #394455; border-radius: 7px; background: rgba(20, 25, 33, .92); color: #d9e4f5; font-size: 12px; font-weight: 850; white-space: nowrap; cursor: pointer; } .unit-filter-explain-toggle:hover, .unit-filter-explain-toggle:focus-visible, .unit-filter-explain-toggle.active { border-color: var(--accent); color: #ffd59a; outline: none; } .unit-filter-explain-row td { padding: 0 12px 12px; background: rgba(255, 255, 255, .018); } .unit-filter-explainer { display: grid; gap: 10px; min-width: 0; padding: 10px; border: 1px solid #2f3a49; border-radius: 7px; background: rgba(17, 22, 29, .96); text-align: left; } .unit-filter-paths, .unit-filter-path-group, .unit-filter-section { display: grid; gap: 8px; min-width: 0; } .unit-filter-section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .unit-filter-section-header h3 { min-width: 0; } .unit-filter-actions { flex: 0 0 auto; } .unit-filter-section h3, .unit-filter-path-group h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: #dfe8f6; font-size: 13px; } .unit-filter-section h3 > span, .unit-filter-path-group h3 > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: 12px; } .unit-filter-skill-section .skill-member-list.skill-member-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); } .unit-filter-skill-section .skill-member-list-compact { grid-template-columns: 1fr; } .unit-filter-tier-tabs.mention-tabs { margin: 0; } .unit-filter-tier-tabs .mention-tab { min-height: 30px; padding: 4px 10px; font-size: 12px; } .unit-filter-tier-panel { min-width: 0; } .mention-path.tangential { border-color: rgba(126, 179, 231, .46); background: rgba(100, 143, 190, .07); } .mention-path-buff .mini-icon { width: 24px; height: 24px; object-fit: contain; } .mention-path-data-target { color: var(--accent); font-weight: 800; } .catalog-tile { position: relative; padding-top: 34px; } .unit-tile:hover, .catalog-tile:hover { border-color: var(--accent); } .catalog-tile > .yoink-filter-button { position: absolute; top: 8px; left: 8px; z-index: 2; } .catalog-tile > .catalog-graph-button { position: absolute; top: 8px; left: 50%; z-index: 2; transform: translateX(-50%); } .tile-sprite { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; background: #111; } .tiles-sm .tile-sprite { width: 60px; height: 60px; } .unit-tile .unit-tags { justify-content: center; flex-wrap: wrap; } .tiles-sm .unit-tile .unit-tags .tag-group img { width: 20px; height: 20px; } .catalog-tile .tile-face { display: grid; place-items: center; min-height: 48px; padding: 4px; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; } .catalog-tile .tile-face:hover { color: var(--accent); } .tile-face-action-row .tile-face { min-width: 0; } .tile-title-line, .related-name-line { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; max-width: 100%; color: var(--text); text-decoration: none; } .tile-title-line:hover { color: var(--accent); } .order-icon-wrap { position: relative; display: inline-grid; place-items: center; } .order-icon-wrap .order-value-badge { position: absolute; right: -6px; bottom: -5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.72); } .order-value-badge { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 6px; border: 1px solid rgba(255, 200, 97, 0.55); border-radius: 999px; background: rgba(255, 200, 97, 0.12); color: var(--gold); font-size: 12px; font-weight: 900; line-height: 1.1; white-space: nowrap; } .catalog-tile .tile-face .mini-icon, .catalog-tile .tile-icon { width: 64px; height: 64px; border-radius: 10px; background: #111; } .tiles-sm .catalog-tile .tile-face .mini-icon, .tiles-sm .catalog-tile .tile-icon { width: 44px; height: 44px; } .tile-name { font-weight: 800; font-size: 17px; line-height: 1.25; word-break: break-word; } .tiles-sm .tile-name { font-size: 14px; } .catalog-tile .related-mini { justify-content: center; } /* Related-unit heads in skills/keywords catalogs render at double size; .related-mini exists only there (equipment + term detail are untouched). */ .catalog-table .related-mini .mini-icon, .catalog-tile .related-mini .mini-icon, .catalog-table .related-mini .related-mini-more, .catalog-tile .related-mini .related-mini-more { width: 68px; height: 68px; } .tiles-sm .catalog-tile .related-mini .mini-icon, .tiles-sm .catalog-tile .related-mini .related-mini-more { width: 44px; height: 44px; } .tile-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .tile-help { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid #596678; border-radius: 999px; background: #202632; color: var(--gold); font-weight: 900; cursor: help; } .catalog-tile > .tile-help { position: absolute; top: 8px; right: 8px; z-index: 2; text-decoration: none; } .tile-help:hover { border-color: var(--accent); } @media (max-width: 1380px) { .topbar { grid-template-columns: 90px minmax(0, 1fr) minmax(520px, auto); } .top-actions { gap: 8px; } .nav-button { padding: 6px 10px; font-size: 14px; } } @media (max-width: 1050px) { .topbar { grid-template-columns: auto minmax(0, 1fr) auto; height: 64px; min-height: 64px; } .top-actions { grid-column: 3; grid-row: 1; justify-content: flex-start; justify-content: safe center; flex-wrap: nowrap; max-width: calc(100vw - 90px); padding: 0 8px 0 0; } main { padding: 32px 16px; } .route-loading-indicator { top: 76px; } .toolbar { grid-template-columns: 1fr 1fr; } .toolbar.view-toolbar { grid-template-columns: minmax(0, 1fr) 44px; } .faction-filter-panel { top: 108px; } .filter-panel-grid { grid-template-columns: 1fr; } .term-graph-layout { grid-template-columns: 1fr; } .term-graph-results { position: static; max-height: 360px; } .graph-edge-row { grid-template-columns: 1fr; } .mention-graph-backdrop { padding: 10px; } .mention-graph-window { width: calc(100vw - 20px); height: calc(100vh - 20px); } .mention-graph-scroller { padding: 14px; } .mention-graph-canvas { min-width: 700px; min-height: 700px; } .mention-graph-node, .mention-graph-label { width: 122px; } .mention-graph-icon-circle { width: 52px; height: 52px; } #searchInput { grid-column: auto; } .detail-grid { grid-template-columns: 1fr; } .rank-row { grid-template-columns: 1fr; } .rank-row.skills-right { grid-template-columns: 1fr; } .controls-row { grid-template-columns: 1fr; } } /* Touch-first phones (375-430px target). Lists default to tile mode there (views/prefs.ts); the table variant stays reachable and horizontally scrollable via .table-wrap. Touch targets >= 40px. */ @media (max-width: 700px) { .topbar { min-height: 56px; } .topbar h1 { display: none; } #backButton { margin-left: 4px; padding: 0 10px; min-height: 44px; } .kofi-launch-button { margin-left: 4px; } .top-actions { grid-column: 2; gap: 6px; max-width: none; padding: 0 6px 0 0; } .nav-button { min-height: 40px; padding: 4px 9px; font-size: 13px; } .icon-button { width: 44px; } main { padding: 16px 10px 22px; } .route-loading-indicator { top: auto; right: 10px; bottom: 10px; left: auto; min-height: 28px; padding: 4px 8px; transform: none; font-size: 12px; } .route-loading-hourglass { width: 13px; height: 16px; } .intro h2 { margin: 6px 0 10px; font-size: 23px; } .intro p { margin: 0 0 10px; font-size: 15px; } .toolbar { grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; } .toolbar.view-toolbar { grid-template-columns: minmax(0, 1fr) 40px; } .view-help-button { width: 40px; height: 40px; font-size: 18px; } .view-help-panel { margin: -2px 0 10px; font-size: 13px; } #searchInput, #catalogSearchInput, #termGraphSearchInput { font-size: 17px; padding: 0 12px; } /* Filter panel: label above its buttons, one column, comfy targets. */ .faction-filter-panel { top: 100px; padding: 8px; margin-bottom: 14px; } .filter-panel-summary { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "toggle chips" "actions actions"; gap: 6px; } .filter-panel-toggle { grid-area: toggle; } .filter-summary-icons { grid-area: chips; } .filter-panel-actions { grid-area: actions; justify-self: stretch; justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; } .filter-panel-toggle { width: 32px; height: 32px; } .filter-summary-icons { gap: 5px; } .filter-empty-summary { font-size: 13px; } .filter-summary-item { min-width: 32px; height: 32px; padding: 2px 5px; } .filter-bubble { min-height: 40px; gap: 5px; padding: 4px; border-radius: 10px; } .filter-bubble-body { gap: 4px; } .filter-bubble-controls { gap: 3px; } .filter-bubble-header { min-height: 28px; padding: 3px 5px; font-size: 10px; } .filter-bubble-ungroup, .filter-bubble-group-selected, .filter-formula-copy { height: 24px; min-width: 28px; padding: 0 5px; font-size: 10px; } .filter-tray-count, .filter-reach-profile-pill { min-height: 26px; padding: 0 6px; font-size: 11px; } .filter-formula-row { padding-left: 40px; gap: 5px; flex-wrap: wrap; } .filter-formula-readout, .filter-formula-code { max-width: 100%; font-size: 11px; } .filter-bubble-message { margin-left: 40px; } .filter-clear-tags-button { width: 32px; height: 32px; } .filter-clear-tags-icon { width: 18px; height: 18px; } .filter-summary-item img, .filter-summary-item .mini-icon, .filter-summary-item .rarity-icon, .filter-summary-item .weapon-type-icon, .filter-summary-item .role-icon { width: 22px; height: 22px; } .filter-panel-actions { gap: 4px; } .filter-order-controls.compact { gap: 4px; } .filter-order-button { min-width: 45px; height: 34px; gap: 3px; padding: 2px 5px; font-size: 13px; } .filter-reset-button { width: 34px; height: 34px; padding: 0; } .filter-reset-icon { width: 20px; height: 20px; } .filter-order-icon { min-width: 18px; height: 24px; } .filter-order-icon .mini-icon, .filter-order-speed-icon { width: 20px; height: 20px; } .filter-board-open-button { min-height: 32px; padding: 0 9px; font-size: 12px; } .filter-board-backdrop { align-items: stretch; padding: 0; } .filter-board-panel { width: 100vw; height: 100dvh; min-height: 0; padding: 10px; border-width: 0; border-radius: 0; grid-template-rows: auto auto auto minmax(220px, 1fr) auto; } .filter-board-header { align-items: flex-start; } .filter-board-title-wrap { flex-wrap: wrap; } .filter-board-title { flex: 0 0 100%; font-size: 20px; } .filter-board-close { width: 44px; height: 44px; } .filter-board-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); } .filter-board-palette { gap: 6px; } .filter-board-tool { min-width: 64px; min-height: 42px; padding: 0 10px; } .filter-board-term-picker { min-width: 0; } .filter-board-term-results { max-height: 96px; } .filter-board-surface { min-height: 220px; } .filter-board-term-bubble { min-width: 126px; max-width: 190px; } .filter-board-group-bubble { min-width: 196px; max-width: min(330px, calc(100vw - 30px)); } .filter-board-footer { gap: 6px; } .filter-board-secondary, .filter-board-primary { flex: 1 1 0; min-width: 0; min-height: 44px; } .filter-panel-grid, .equipment-filter-grid { grid-template-columns: 1fr; gap: 10px; } .faction-filter-row { grid-template-columns: 1fr; gap: 4px; min-height: 0; } .faction-filter-button { min-width: 42px; min-height: 42px; } /* The lock strip is its own tap target: >= 40px tall, bleeding over the button padding so its hit width spans the full button. */ .faction-filter-button .filter-lock-toggle { min-height: 40px; width: calc(100% + 16px); margin: 0 -8px -3px; } /* Table fallback: scrolls horizontally inside .table-wrap; tighter cells. */ .unit-table { min-width: 720px; } .unit-table th { height: 42px; padding: 0 8px; font-size: 14px; } .unit-table td { height: auto; padding: 8px; font-size: 14px; } .sprite-img { width: 52px; height: 52px; } .catalog-table .catalog-desc-cell { min-width: 320px; } .catalog-table.keyword-mode .catalog-desc-cell { min-width: 320px; } .catalog-release-cell { min-width: 64px; } .catalog-table:not(.equipment-mode) #catalogRelatedHeader, .catalog-table:not(.equipment-mode) .catalog-related-cell { width: 136px; min-width: 136px; } .catalog-table:not(.equipment-mode) .related-mini { grid-template-columns: repeat(3, 40px); gap: 4px; } .catalog-table .related-mini .mini-icon, .catalog-table .related-mini .related-mini-more { width: 40px; height: 40px; } .tag-group { min-height: 30px; padding: 2px 5px; gap: 3px; } .tag-group .mini-icon { width: 22px; height: 22px; } .rarity-icon { width: 24px; height: 24px; } .weapon-type-icon { width: 22px; height: 22px; } .equipment-tag-stack { gap: 4px; } .equipment-tag-row { gap: 4px; } .equipment-tag-chip { width: 30px; height: 30px; padding: 1px; } .equipment-tag-chip .mini-icon { width: 24px; height: 24px; } .equipment-tag-sources .equipment-tag-chip { width: 25px; height: 25px; } .equipment-tag-sources .equipment-tag-chip .mini-icon, .equipment-tag-sources .generic-source-icon { width: 20px; height: 20px; } .source-badge { margin-left: 5px; font-size: 11px; } /* Mobile table mode: keep list view usable without horizontal scrolling. */ #unitTableWrap, #catalogTableWrap { overflow: visible; border: 0; } #unitTableWrap .unit-table, #catalogTableWrap .catalog-table { min-width: 0; border-collapse: separate; border-spacing: 0; background: transparent; } #unitTableWrap thead, #catalogTableWrap thead { display: none; } #unitRows, #catalogRows { display: grid; gap: 8px; } #unitRows tr, #catalogRows tr { display: grid; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #08090a; overflow: hidden; } #unitRows td, #catalogRows td { display: block; width: auto !important; min-width: 0 !important; height: auto; padding: 7px !important; border-bottom: 0; font-size: 13px; line-height: 1.2; vertical-align: top; } #unitRows tr { grid-template-columns: minmax(0, 1fr) 42px 54px; grid-template-areas: "name speed release" "tags tags tags"; align-items: start; } #unitRows .unit-name-cell { grid-area: name; } #unitRows .unit-tags-cell { grid-area: tags; padding-top: 0 !important; } #unitRows .unit-speed-cell { grid-area: speed; justify-self: end; color: var(--gold); font-weight: 900; text-align: right; } #unitRows .unit-release-cell { grid-area: release; justify-self: end; color: var(--muted); font-size: 12px; text-align: right; overflow-wrap: anywhere; } #unitRows .list-title-wrap { grid-template-columns: 38px minmax(0, 1fr); gap: 6px; align-items: start; } #unitRows .sprite-img { width: 38px; height: 38px; border-radius: 8px; } #unitRows .name-link, #catalogRows .name-link { display: block; font-size: 13px; line-height: 1.08; overflow-wrap: break-word; word-break: normal; } #unitRows .unit-tags { gap: 4px; } #unitRows .source-badge, #catalogRows .source-badge { min-height: 16px; margin-left: 0; padding: 0 4px; font-size: 10px; } #catalogRows tr { grid-template-columns: 34px minmax(0, 1fr) 78px; grid-template-areas: "name name name" "icon desc related"; align-items: start; } .catalog-table.keyword-mode #catalogRows tr { grid-template-columns: minmax(0, 1fr) 90px; grid-template-areas: "name name" "desc related"; } .catalog-table.equipment-mode #catalogRows tr { grid-template-columns: minmax(0, 1fr) 58px; grid-template-areas: "name related" "desc related" "release related"; } #catalogRows .catalog-name-cell { grid-area: name; display: grid; grid-template-columns: minmax(0, 1fr) 30px 30px; grid-template-areas: "title graph yoink" "badges badges badges"; gap: 4px; padding-right: 4px !important; align-items: start; } #catalogRows .catalog-title-cell { display: block; } #catalogRows .catalog-name-cell > .name-link { grid-area: title; } #catalogRows .catalog-name-cell > .catalog-graph-button, #catalogRows .catalog-name-cell > .yoink-filter-button { position: static; width: 30px; height: 30px; } #catalogRows .catalog-name-cell > .catalog-graph-button { grid-area: graph; } #catalogRows .catalog-name-cell > .yoink-filter-button { grid-area: yoink; } #catalogRows .catalog-name-cell > .catalog-name-badges { grid-area: badges; justify-self: start; } #catalogRows .catalog-title-cell .list-title-wrap { grid-template-columns: 32px minmax(0, 1fr); gap: 5px; align-items: start; } #catalogRows .catalog-title-cell .mini-icon { width: 30px; height: 30px; } #catalogRows .catalog-icon-cell { grid-area: icon; justify-self: center; } #catalogRows .catalog-icon-cell .mini-icon { width: 32px; height: 32px; } #catalogRows .catalog-release-cell { grid-area: release; justify-self: start; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; } #catalogRows .catalog-desc-cell { grid-area: desc; max-width: 100%; overflow: hidden; font-size: 12px; line-height: 1.25; } #catalogRows .catalog-desc-cell .skill-desc { font-size: 13px; line-height: 1.25; } #catalogRows .catalog-desc-cell .trait-line { padding-left: 30px; } #catalogRows .catalog-desc-cell .trait-line .paragraph-icon { left: 16px; } #catalogRows .catalog-related-cell { grid-area: related; justify-self: end; } #catalogRows .related-mini { grid-template-columns: repeat(3, 28px) !important; gap: 3px !important; width: auto !important; } #catalogRows .related-mini .mini-icon, #catalogRows .related-mini .related-mini-more { width: 28px !important; height: 28px !important; font-size: 10px; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell { overflow: visible; font-size: 13px; line-height: 1.3; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell .skill-desc { overflow-wrap: break-word; line-height: 1.3; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell .trait-line { margin-top: 11px; padding: 15px 0 0; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell .trait-line:first-child { margin-top: 0; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell .trait-line-stars { top: 0; left: 0; min-width: 0; padding: 0 4px; border-color: rgba(230, 210, 140, .28); background: rgba(255, 255, 255, .035); font-size: 10px; line-height: 1.15; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell .trait-line .paragraph-icon { position: relative; left: auto; top: auto; display: inline-block; width: .9em; height: .9em; margin-right: 4px; vertical-align: -.08em; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell .trait-inline-option { margin: 0 1px; padding: 0 4px 1px; border-radius: 5px; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell .trait-inline-option .trait-stars { margin-right: .32em; font-size: .58em; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell .trait-value-set { display: inline; margin: 0 2px; vertical-align: baseline; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell .trait-value-option { display: inline-flex; flex-direction: row; align-items: baseline; min-width: 0; max-width: 100%; padding: 1px 4px 2px; line-height: 1.08; vertical-align: baseline; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell .trait-value-option.wide { align-items: baseline; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell .trait-value-option .trait-stars { order: -1; margin: 0 .35em 0 0; font-size: .58em; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell .trait-slash { padding: 0 2px; line-height: inherit; } .catalog-table:not(.keyword-mode) #catalogRows .catalog-desc-cell .keyword { text-underline-offset: 2px; } .catalog-table:not(.keyword-mode):not(.equipment-mode) #catalogRows .related-mini { grid-template-columns: repeat(3, 24px) !important; gap: 3px !important; } .catalog-table:not(.keyword-mode):not(.equipment-mode) #catalogRows .related-mini .mini-icon, .catalog-table:not(.keyword-mode):not(.equipment-mode) #catalogRows .related-mini .related-mini-more { width: 24px !important; height: 24px !important; font-size: 9px; } .catalog-table.equipment-mode #catalogRows .catalog-related-cell { align-self: start; } .catalog-table.equipment-mode #catalogRows .equipment-tag-stack { width: 58px; gap: 3px; } .catalog-table.equipment-mode #catalogRows .equipment-tag-row { display: grid; grid-template-columns: repeat(2, 26px); gap: 3px; justify-content: end; } .catalog-table.equipment-mode #catalogRows .equipment-tag-chip { width: 26px; height: 26px; padding: 1px; } .catalog-table.equipment-mode #catalogRows .equipment-tag-chip .mini-icon { width: 21px; height: 21px; } .catalog-table.equipment-mode #catalogRows .equipment-tag-sources .equipment-tag-chip, .catalog-table.equipment-mode #catalogRows .equipment-tag-sources .equipment-tag-chip .mini-icon, .catalog-table.equipment-mode #catalogRows .equipment-tag-sources .generic-source-icon { width: 21px; height: 21px; } /* Tiles (the small-screen default). */ .tile-grid { gap: 8px; } .tile-grid.tiles-lg { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .tile-grid.tiles-sm { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .tile-sprite { width: 76px; height: 76px; } /* Unit detail. */ .unit-title { min-height: 0; } .unit-title h2 { margin: 12px auto; font-size: 26px; } .portrait { margin: 8px 0 12px; } .role-title-row { gap: 8px; margin-bottom: 10px; } .role-line { font-size: 19px; } .unit-speed-row { gap: 8px; margin-bottom: 12px; } .speed-chip { font-size: 16px; margin-bottom: 0; } .speed-chip strong { font-size: 19px; } .speed-stat-icon { width: 21px; height: 21px; } .engraving-summary { width: min(100%, 340px); max-width: 340px; gap: 5px; margin-top: 0; } .engraving-summary-stat { min-height: 28px; padding: 2px 6px; font-size: 12px; } .engraving-summary-action.engrave-calculator-toggle { height: auto; min-height: 28px; font-size: 22px; } .engraving-stat-icon { width: 21px; height: 21px; } .unit-panel-summons { max-width: 340px; margin-top: 10px; } .unit-panel-summons .related-units { grid-template-columns: repeat(auto-fit, 94px); justify-content: center; gap: 6px; } .unit-panel-summons .head-img { width: 54px; height: 54px; } .unit-panel-summons .related-summon span { font-size: 12px; overflow-wrap: anywhere; } .engrave-calculator-toggle, .unit-lore-action, .lore-action-button { width: 44px; height: 44px; } .unit-signature-icon { width: 30px; height: 30px; } .engrave-action-icon, .lore-action-icon { width: 30px; height: 30px; } .detail-grid { gap: 18px; } .rank-section { margin-top: 28px; } .rank-toolbar { margin-bottom: 14px; } .rank-toolbar h2 { font-size: 22px; } .rank-node { min-height: 0; padding: 10px; font-size: 16px; } .rank-node strong { margin-bottom: 6px; font-size: 18px; } .rank-row { min-height: 0; gap: 10px; } /* Skill / term cards. */ .skill-card { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px 12px; } .skill-card.compact { grid-template-columns: 44px minmax(0, 1fr); padding: 12px; } .skill-icon, .skill-card.compact .skill-icon { width: 44px; height: 44px; } .skill-title { font-size: 20px; margin-bottom: 6px; } .skill-title-goto, .skill-card.compact .skill-title-goto { width: 24px; height: 24px; min-height: 24px; margin-left: 5px; font-size: 13px; } .term-title-row { gap: 7px; margin-bottom: 6px; } .term-title-row .skill-title { min-width: 0; } .term-title-actions { gap: 6px; padding-top: 0; } .term-title-actions .yoink-filter-button, .term-title-actions .catalog-graph-button, .term-title-actions .mechanics-button, .term-title-actions .lore-action-button, .term-title-actions .talent-tree-action-button, .term-title-actions .term-details-button { width: 32px; height: 32px; } .term-title-actions .talent-tree-action-button { flex-basis: 32px; } .term-title-actions .lore-action-icon { width: 22px; height: 22px; } .summon-header-tags { gap: 5px; margin: -1px 0 10px; } .summon-header-tags .mini-icon { width: 24px; height: 24px; } .skill-desc { font-size: 15px; } .pill { font-size: 13px; min-height: 22px; padding: 1px 8px; } .pill .pill-speed-icon { width: 17px; height: 17px; margin-right: 5px; } .corner-label { padding: 5px 9px; font-size: 13px; } .trait-view-tabs, .level-view-tabs, .module-choice-tabs { padding-right: 52px; } .trait-line { padding-left: 44px; } .trait-line .paragraph-icon { left: 26px; } /* Unified trait star-chips: allow wrapping instead of horizontal overflow. */ .trait-value-set { flex-wrap: wrap; } .skill-range-panel { grid-template-columns: auto; gap: 10px; } .skill-range-info { font-size: 15px; gap: 4px 14px; } .term-detail-card { grid-template-columns: minmax(0, 1fr); } .term-icon-slot { width: 48px; min-height: 48px; } .empty-state { padding: 18px 10px; font-size: 16px; } /* Term pages: tabs wrap, related grids go 2-up, panels single column. */ .term-tabs { flex-wrap: wrap; margin: 16px 0 10px; } .term-tab, .mention-tab, .mention-action-button { min-height: 40px; } .related-units, .related-equipment-grid { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; } .head-img { width: 84px; height: 84px; } .keyword-member { grid-template-columns: 1fr; gap: 6px; } .source-row { grid-template-columns: 1fr; gap: 4px; } .mention-path { font-size: 12px; } .mention-path-source-label { max-width: 110px; } /* Term graph page lists. */ .graph-node-chip-list, .graph-node-chip-list.compact { grid-template-columns: 1fr; } /* Graph dialog: header controls wrap within the narrow window. */ .mention-graph-backdrop { padding: 4px; } .mention-graph-window { width: calc(100vw - 8px); height: calc(100vh - 8px); } .mention-graph-header { flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; } .mention-graph-titlebar { flex: 1 1 0; min-width: 0; gap: 8px; } .mention-graph-title-copy { min-width: 0; } .mention-graph-header h2 { margin-bottom: 2px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Diagnostic badges (node/edge counts, fold notes) cost too much height on phones; the controls matter more than the meta. */ .mention-graph-meta { display: none; } .mention-graph-unit-strip { order: 3; flex: 0 0 100%; max-width: 100%; max-height: 94px; gap: 6px; overflow-x: hidden; overflow-y: auto; } .mention-graph-unit-chip { width: 44px; height: 44px; padding: 2px; } .mention-graph-unit-chip .mini-icon { width: 34px; height: 34px; } .mention-graph-actions { flex: 0 0 auto; justify-content: flex-end; gap: 6px; } .mention-graph-scale, .mention-graph-minimize, .mention-graph-close, .term-graph-action { min-height: 40px; } .mention-graph-minimize { width: 40px; height: 40px; min-height: 40px; } .mention-graph-backdrop.is-minimized { left: 12px; top: 68px; width: 44px; height: 44px; } .mention-graph-backdrop.is-minimized .mention-graph-restore { left: 12px; top: 68px; width: 44px; height: 44px; } .mention-graph-backdrop.is-minimized .mention-graph-restore .graph-view-icon { width: 23px; height: 23px; } body:has(#termDetailView:not(.hidden)) .mention-graph-backdrop.is-minimized, body:has(#termDetailView:not(.hidden)) .mention-graph-backdrop.is-minimized .mention-graph-restore { top: 150px; } .mention-graph-scroller { padding: 8px; } .mention-graph-canvas { min-width: 560px; min-height: 560px; } .engrave-calculator-backdrop { padding: 4px; } .lore-dialog-backdrop { padding: 4px; } .lore-dialog-window { width: calc(100vw - 8px); height: auto; max-height: calc(100vh - 8px); } .lore-dialog-content { padding: 14px 16px 18px; font-size: 16px; line-height: 1.5; } .engrave-calculator-window { width: calc(100vw - 8px); height: calc(100vh - 8px); min-height: 0; } .engrave-calculator-content { grid-template-columns: minmax(0, 1fr); overflow: auto; } .engrave-main { padding: 10px; overflow: visible; } .engrave-stat-row { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "icon name" "slider slider" "percent value"; gap: 7px 9px; min-height: 116px; padding: 10px; } .engrave-stat-icon-cell { grid-area: icon; justify-self: center; } .engrave-stat-name { grid-area: name; } .engrave-slider { grid-area: slider; } .engrave-percent-value { grid-area: percent; text-align: left; } .engrave-result-value { grid-area: value; min-width: 0; overflow-wrap: anywhere; white-space: normal; } .engrave-sidebar { border-left: 0; border-top: 1px solid var(--line); overflow: visible; } .engrave-sidebar summary { min-height: 44px; padding: 10px 12px; font-size: 16px; } .engrave-sidebar-body { padding: 12px 10px 14px; } .engrave-tree-rank { grid-template-columns: 34px minmax(0, 1fr); gap: 6px; } .engrave-tree-rank-label { min-height: 34px; font-size: 11px; } .engrave-tree-rank-nodes { grid-template-columns: minmax(0, 1fr); } .engrave-tree-node-face { grid-template-columns: 30px minmax(0, 1fr); min-height: 40px; padding: 5px 6px; } .engrave-tree-icon { width: 30px; height: 30px; } .engrave-tree-bonus { font-size: 12px; } .engrave-base-table th, .engrave-base-table td { padding: 7px 4px; font-size: 10px; } .engrave-base-table .engraving-stat-icon { width: 18px; height: 18px; } } .lore-dialog-window.tarot-lore-dialog { width: min(900px, calc(100vw - 36px)); } .lore-dialog-body.has-visual { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); min-height: 0; overflow: hidden; background: #08090a; } .lore-dialog-visual { display: grid; place-items: start center; min-height: 0; overflow: auto; padding: 18px; } .tarot-lore-card-art { width: min(100%, 230px); height: auto; border-radius: 8px; object-fit: contain; } @media (max-width: 700px) { .lore-dialog-window.tarot-lore-dialog { width: calc(100vw - 8px); } .lore-dialog-body.has-visual { grid-template-columns: minmax(0, 1fr); overflow: auto; } .lore-dialog-body.has-visual .lore-dialog-content { overflow: visible; } .lore-dialog-visual { overflow: visible; padding-bottom: 4px; } .tarot-lore-card-art { width: min(58vw, 210px); } } /* Honest route skeletons (views/skeleton.ts): shimmer placeholder blocks sized like the real content (sprite/tile/portrait dimensions mirror the real classes above so the skeleton -> real swap does not shift layout). */ .sk { display: inline-block; border-radius: 6px; background: linear-gradient(100deg, rgba(120, 130, 152, 0.16) 30%, rgba(160, 170, 195, 0.30) 50%, rgba(120, 130, 152, 0.16) 70%); background-size: 220% 100%; animation: sk-shimmer 1.3s ease-in-out infinite; } @keyframes sk-shimmer { from { background-position: 130% 0; } to { background-position: -90% 0; } } .sk-bar { height: 14px; max-width: 100%; margin: 3px 6px 3px 0; vertical-align: middle; } .sk-sprite { width: 84px; height: 84px; border-radius: 10px; } .sk-mini-icon { width: 40px; height: 40px; border-radius: 8px; } .sk-related { width: 68px; height: 68px; border-radius: 8px; margin-right: 6px; } .sk-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border: 1px solid rgba(120, 130, 152, 0.25); border-radius: 12px; } .sk-tile-sprite { width: 96px; height: 96px; border-radius: 12px; } .tiles-sm .sk-tile-sprite { width: 60px; height: 60px; } .sk-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin-bottom: 12px; border: 1px solid rgba(120, 130, 152, 0.25); border-radius: 12px; } .sk-card-lines { flex: 1; } .sk-card-lines .sk-bar { display: block; } img.portrait.sk { min-height: 200px; } .skeleton-icon-button { pointer-events: none; cursor: default; } .skeleton-icon-button::after { content: none !important; } .sk-action-glyph { width: 24px; height: 24px; border-radius: 6px; } .skeleton-engraving-summary { min-height: 66px; } .skeleton-engraving-stat { pointer-events: none; cursor: default; } .sk-engraving-icon { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; } .sk-engraving-value { width: 72px; height: 13px; } .sk-engraving-plus { width: 20px; height: 20px; border-radius: 5px; } .sk-unit-mini-icon { width: 34px; height: 34px; border-radius: 8px; } @media (max-width: 700px) { .sk-sprite { width: 52px; height: 52px; } .sk-tile-sprite { width: 76px; height: 76px; } .skeleton-engraving-summary { min-height: 61px; } .sk-engraving-icon { width: 21px; height: 21px; } .sk-engraving-value { width: 54px; height: 12px; } .sk-unit-mini-icon { width: 30px; height: 30px; } } /* Term page related-panel filter chip (views/termDetail.ts): active filters narrow the related lists by default; the chip toggles show-all per visit. */ .term-filter-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 3px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(66, 80, 106, 0.35); color: inherit; font-size: 15px; cursor: pointer; } .term-filter-chip:hover { background: rgba(66, 80, 106, 0.6); } @media (max-width: 720px) { .core-page-filter-row { display: grid; grid-template-columns: minmax(0, 1fr); } .core-page-filter-row .term-filter-chip { justify-content: center; width: 100%; min-height: 36px; text-align: center; white-space: normal; } .term-title-actions .mechanics-button { width: auto; min-width: 32px; padding: 0 6px; } .mechanics-panel { top: auto; right: 0; bottom: 0; left: 0; width: 100vw; height: min(78vh, 720px); border-top: 1px solid #3b4758; border-left: 0; border-radius: 12px 12px 0 0; box-shadow: 0 -18px 44px rgba(0, 0, 0, .48); } .mechanics-panel-body { padding: 12px; } .mechanics-panel-header { padding: 12px; } .mechanics-panel-graph { padding-inline: 8px; font-size: 12px; } .mechanics-statement { margin-left: calc((var(--mechanic-depth, 1) - 1) * 10px); } } @media (max-width: 380px) { .unit-panel-summons .related-units { grid-template-columns: repeat(auto-fit, 96px); } } /* Staged NPCs-on-maps surface ------------------------------------------------ */ .npc-maps-content { display: grid; gap: 1.25rem; } .npc-maps-toolbar input { width: min(42rem, 100%); } .map-library-host { display: grid; gap: 1.15rem; min-width: 0; } .map-library-kicker, .map-library-card-eyebrow { color: #8ed6ad; font-size: .72rem; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; } .map-library-hero, .map-library-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem; border: 1px solid color-mix(in srgb, var(--border, #33445b) 70%, #62b984); border-radius: 18px; background: radial-gradient(circle at 92% 8%, rgba(73, 157, 108, .2), transparent 34%), linear-gradient(145deg, rgba(21, 37, 39, .96), rgba(17, 25, 38, .94)); box-shadow: 0 15px 38px rgba(0, 0, 0, .2); } .map-library-hero h2, .map-library-page-head h2 { margin: .18rem 0 .35rem; font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.08; } .map-library-hero p, .map-library-page-head p { max-width: 68rem; margin: 0; color: var(--muted, #aeb9cb); line-height: 1.55; } .map-library-head-stats { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; } .map-library-primary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; } .map-library-card { --library-accent: #6bb98d; position: relative; display: grid; align-content: start; gap: .5rem; min-height: 13.5rem; overflow: hidden; padding: 1.1rem; border: 1px solid color-mix(in srgb, var(--border, #33445b) 70%, var(--library-accent)); border-radius: 16px; color: inherit; text-decoration: none; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--library-accent) 24%, transparent), transparent 42%), rgba(19, 28, 42, .92); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; } .map-library-card::after { content: ""; position: absolute; inset: auto 1.1rem 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--library-accent); opacity: .75; } .map-library-card:hover, .map-library-card:focus-visible { border-color: var(--library-accent); box-shadow: 0 13px 30px rgba(0, 0, 0, .28); transform: translateY(-2px); } .map-library-card-events { --library-accent: #d0a963; } .map-library-card-spiral { --library-accent: #8c96dd; } .map-library-card-challenges { --library-accent: #cb7376; } .map-library-card > strong { font-size: clamp(1.18rem, 2.2vw, 1.55rem); line-height: 1.15; } .map-library-card p { margin: 0; color: var(--muted, #aeb9cb); line-height: 1.48; } .map-library-card-stats { align-self: end; margin-top: auto; color: color-mix(in srgb, var(--library-accent) 78%, white); font-size: .82rem; font-weight: 690; } .map-library-spotlight, .map-library-event-section, .map-library-world-group, .map-library-event-scenes { display: grid; gap: .85rem; padding: 1rem; border: 1px solid var(--border, #33445b); border-radius: 14px; background: var(--panel, rgba(20, 29, 43, .9)); } .map-library-spotlight > header, .map-library-event-section > header, .map-library-world-group > header, .map-library-event-scenes > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .map-library-spotlight h2, .map-library-event-section h3, .map-library-world-group h3, .map-library-event-scenes h2, .map-library-spotlight p, .map-library-event-section p, .map-library-world-group p, .map-library-event-scenes p { margin: 0; } .map-library-spotlight header p, .map-library-event-section header p, .map-library-world-group header p, .map-library-event-scenes header p { margin-top: .2rem; color: var(--muted, #aeb9cb); } .map-library-event-grid, .map-library-scene-grid, .map-library-chapter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; } .map-library-chapter-card { display: grid; align-content: start; gap: .35rem; min-width: 0; min-height: 7.4rem; padding: .85rem; border: 1px solid rgba(97, 185, 136, .3); border-radius: 12px; color: inherit; text-decoration: none; background: linear-gradient(145deg, rgba(24, 43, 38, .72), rgba(19, 27, 39, .8)); } .map-library-chapter-card:hover, .map-library-chapter-card:focus-visible { border-color: #61b988; } .map-library-chapter-card > strong { line-height: 1.28; } .map-library-chapter-card > span:not(.map-library-card-eyebrow) { margin-top: auto; color: var(--muted, #aeb9cb); font-size: .77rem; } .map-library-event-card { display: grid; align-content: start; gap: .65rem; min-width: 0; padding: .85rem; border: 1px solid rgba(208, 169, 99, .3); border-radius: 12px; background: rgba(19, 26, 38, .74); } .map-library-event-card > a { display: grid; gap: .3rem; color: inherit; text-decoration: none; } .map-library-event-card > a:hover strong { color: #f1ce8f; } .map-library-event-card strong { font-size: 1.02rem; line-height: 1.28; } .map-library-event-card p { margin: 0; color: var(--muted, #aeb9cb); font-size: .78rem; line-height: 1.4; } .map-library-mode-chips { display: flex; flex-wrap: wrap; gap: .3rem; } .map-library-mode-chips > span { padding: .14rem .42rem; border: 1px solid var(--border, #33445b); border-radius: 999px; color: #c6d0df; font-size: .7rem; } .map-library-mode-chips > .map-library-source-label { color: #dfc38d; } .map-library-scene-card { display: grid; align-content: start; gap: .32rem; min-width: 0; min-height: 8.5rem; padding: .85rem; border: 1px solid rgba(140, 150, 221, .34); border-radius: 12px; color: inherit; text-decoration: none; background: linear-gradient(145deg, rgba(33, 34, 57, .72), rgba(19, 27, 39, .8)); } .map-library-scene-card:hover, .map-library-scene-card:focus-visible { border-color: #8c96dd; } .map-library-scene-card > span:not(.map-library-card-eyebrow), .map-library-scene-card > small { color: var(--muted, #aeb9cb); font-size: .77rem; line-height: 1.4; } .map-library-scene-card > small { margin-top: auto; overflow-wrap: anywhere; opacity: .72; } .map-library-archive-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border: 1px dashed var(--border, #33445b); border-radius: 12px; background: rgba(13, 19, 29, .48); } .map-library-archive-link > div { display: grid; gap: .15rem; } .map-library-archive-link span { color: var(--muted, #aeb9cb); font-size: .82rem; } .map-library-challenge-grid .map-library-card { min-height: 11.5rem; } .npc-content-controls-static { justify-content: flex-end; } @media (max-width: 900px) { .map-library-event-grid, .map-library-scene-grid, .map-library-chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 650px) { .map-library-primary-grid, .map-library-event-grid, .map-library-scene-grid, .map-library-chapter-grid { grid-template-columns: minmax(0, 1fr); } .map-library-hero, .map-library-page-head, .map-library-archive-link, .map-library-spotlight > header, .map-library-event-section > header, .map-library-world-group > header, .map-library-event-scenes > header { flex-direction: column; } .map-library-head-stats { justify-content: flex-start; } .map-library-card { min-height: 11.5rem; } } .npc-coverage-banner, .npc-unplaced-primary, .npc-mode-menu, .npc-page-section { border: 1px solid var(--border, #33445b); border-radius: 14px; background: var(--panel, rgba(20, 29, 43, .9)); padding: 1rem; } .npc-coverage-banner, .npc-unplaced-primary > header, .npc-mode-menu > header, .npc-page-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .npc-unplaced-primary > header h2, .npc-mode-menu h2, .npc-page-section h2 { margin: 0; } .npc-content-structure > header, .npc-content-occurrence > header, .npc-content-controls, .npc-content-stage-meta, .npc-content-map-links { display: flex; align-items: center; gap: 0.55rem; } .npc-content-structure > header, .npc-content-occurrence > header { justify-content: space-between; align-items: flex-start; } .npc-content-controls { flex-wrap: wrap; padding: 0.85rem; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12)); border-radius: 0.75rem; background: rgba(13, 19, 29, 0.55); } .npc-content-controls label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; } .npc-content-controls select { max-width: 15rem; } .npc-content-route-list { display: grid; gap: 0.9rem; margin-top: 0.9rem; } .npc-content-occurrence { padding: 0.9rem; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12)); border-radius: 0.75rem; background: rgba(15, 22, 34, 0.66); } .npc-content-occurrence h3, .npc-content-occurrence p { margin: 0; } .npc-content-stage-list { display: grid; gap: 0.65rem; margin: 0.75rem 0 0; padding: 0; list-style: none; } .npc-content-stage { display: grid; gap: 0.45rem; padding: 0.7rem; border-left: 3px solid rgba(96, 189, 142, 0.72); border-radius: 0.25rem 0.6rem 0.6rem 0.25rem; background: rgba(255, 255, 255, 0.035); } .npc-content-stage[data-content-purpose="interactive_puzzle"], .npc-content-stage[data-content-purpose="scripted_scenario"] { border-left-color: rgba(113, 165, 232, 0.78); } .npc-content-stage[data-content-purpose="reward_or_meta"], .npc-content-stage[data-content-purpose="unresolved"] { border-left-color: rgba(173, 159, 130, 0.72); } .npc-content-path { display: flex; align-items: center; gap: 0.35rem; min-width: 0; overflow-x: auto; padding-bottom: 0.15rem; } .npc-content-node { display: inline-flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; font-weight: 600; } .npc-content-node-order { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.2rem; border-radius: 999px; color: #cdebdc; background: rgba(73, 142, 108, 0.35); font-size: 0.72rem; } .npc-content-path-arrow { color: var(--text-muted, #9ba6b6); } .npc-content-stage-meta, .npc-content-map-links { flex-wrap: wrap; font-size: 0.82rem; } .npc-content-map-link { color: inherit; text-decoration: none; } .npc-content-map-link:hover { border-color: rgba(96, 189, 142, 0.88); } .npc-content-status-current { color: #a8ecc8; } .npc-content-status-future { color: #b9d8ff; } .npc-content-status-past { color: #c4c8ce; } @media (max-width: 720px) { .npc-content-structure > header, .npc-content-occurrence > header { flex-direction: column; } } .npc-unplaced-primary > .related-unit-card, .npc-unplaced-primary > .skill-member-card { margin-top: .75rem; } .npc-map-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .92rem; } .npc-map-breadcrumbs a { color: var(--link, #9dc8ff); } .npc-map-scene-host { min-width: 0; } .npc-map-scene-panel { display: grid; gap: .8rem; min-width: 0; padding: .9rem; border: 1px solid color-mix(in srgb, var(--border-color, #42516a) 82%, #8cad77); border-radius: 14px; background: color-mix(in srgb, var(--panel-bg, #182234) 92%, #344d3c); box-shadow: 0 12px 32px rgba(0, 0, 0, .2); } .npc-map-scene-header, .npc-map-kit-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .npc-map-scene-header h3, .npc-map-kit-header h3 { margin: 0; } .npc-map-scene-header p, .npc-map-kit-header p { margin: .25rem 0 0; color: var(--muted, #aeb9cb); } .npc-map-proof { flex: 0 0 auto; padding: .2rem .55rem; border: 1px solid currentColor; border-radius: 999px; color: #c8d1de; font-size: .72rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } .npc-map-proof-resolved { color: #8bd4a5; } .npc-map-proof-ambiguous { color: #f2c66d; } .npc-map-proof-unresolved { color: #e6a18f; } .npc-map-encounter-control { display: grid; grid-template-columns: auto minmax(12rem, 1fr); align-items: center; gap: .7rem; color: var(--muted, #aeb9cb); font-size: .82rem; } .npc-map-encounter-select { min-width: 0; padding: .5rem .65rem; border: 1px solid var(--border-color, #42516a); border-radius: 8px; color: var(--text-color, #edf2f8); background: var(--panel-bg, #182234); } .npc-map-evidence-row { display: flex; flex-wrap: wrap; gap: .35rem .85rem; color: var(--muted, #aeb9cb); font-size: .74rem; } .npc-map-evidence-row span:not(:first-child)::before { content: "• "; opacity: .6; } .npc-map-content-hierarchy { flex: 1 1 100%; padding: .4rem .55rem; border: 1px solid rgba(158, 188, 216, .2); border-radius: 8px; background: rgba(15, 27, 38, .42); } .npc-map-content-hierarchy > summary { color: #c9def1; cursor: pointer; font-weight: 700; } .npc-map-content-hierarchy ul { display: grid; gap: .35rem; margin: .45rem 0 0; padding-left: 1.25rem; } .npc-map-content-hierarchy li strong { display: block; color: #e1ebf4; } .npc-map-content-hierarchy li span { display: block; margin-top: .08rem; } .npc-map-content-hierarchy li span::before { content: none !important; } .npc-map-board-wrap { position: relative; min-height: 22rem; max-height: min(68vh, 54rem); overflow: auto; overscroll-behavior: contain; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: radial-gradient(circle at 50% 35%, rgba(128, 155, 117, .16), transparent 46%), linear-gradient(180deg, #253932, #34443a 52%, #242f2b); scrollbar-color: #6f806f #26342e; } .npc-map-iso-board { position: relative; min-width: 100%; } .npc-map-iso-block { position: absolute; width: var(--tile-w); height: var(--tile-h); border: 1px solid rgba(20, 31, 28, .58); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #64795e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), inset 0 -2px 0 rgba(19, 27, 25, .3), 0 calc(var(--elevation) * 1.4px) 0 rgba(18, 26, 25, .42); } .npc-map-iso-block.low { background: #526850; } .npc-map-iso-block.high { background: #82946f; } .npc-map-iso-block.blocked { border-color: rgba(15, 22, 21, .66); background: #394640; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .34), 0 calc(var(--elevation) * 1.2px) 0 rgba(18, 23, 24, .42); } .npc-map-token { position: absolute; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #e9f0e7; border-radius: 50%; color: #fff; background: #596879; box-shadow: 0 5px 12px rgba(0, 0, 0, .55); transform: translate(-50%, -88%); transition: transform 120ms ease, filter 120ms ease; } .npc-map-token:hover, .npc-map-token:focus-visible { z-index: 20000 !important; filter: brightness(1.14); transform: translate(-50%, -98%) scale(1.12); } .npc-map-token .head-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .npc-map-token > span { font-size: .7rem; font-weight: 800; } .npc-map-token > b { position: absolute; top: calc(100% + 3px); left: 50%; max-width: 10rem; padding: .12rem .35rem; overflow: hidden; border-radius: 4px; color: #f7faf5; background: rgba(19, 27, 25, .9); font-size: .66rem; font-weight: 650; line-height: 1.2; opacity: 0; pointer-events: none; text-overflow: ellipsis; transform: translateX(-50%); white-space: nowrap; } .npc-map-token:hover > b, .npc-map-token:focus-visible > b { opacity: 1; } .npc-map-side-enemy { background: #a54f4f; border-color: #ffd0c8; } .npc-map-side-player { background: #3f78a5; border-color: #cbe8ff; } .npc-map-side-neutral { background: #9b854c; border-color: #ffe5a0; } .npc-map-side-unknown { background: #6f6879; border-color: #ded4e9; } .npc-map-token-wave { opacity: .72; border-style: dashed; } .npc-map-token-boss { box-shadow: 0 0 0 3px #e8be62, 0 7px 15px rgba(0, 0, 0, .6); } .npc-map-footprint-cell { position: absolute; width: calc(var(--tile-w) - 8px); height: calc(var(--tile-h) - 5px); border: 2px solid rgba(255, 229, 160, .84); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: rgba(218, 170, 76, .2); pointer-events: none; transform: translate(-50%, -50%); } .npc-map-footprint-enemy { border-color: rgba(255, 170, 157, .9); background: rgba(196, 76, 69, .23); } .npc-map-footprint-player { border-color: rgba(174, 220, 255, .9); background: rgba(60, 126, 180, .23); } .npc-map-footprint-neutral, .npc-map-footprint-unknown { border-color: rgba(255, 229, 160, .84); background: rgba(218, 170, 76, .2); } .npc-map-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--muted, #aeb9cb); font-size: .74rem; } .npc-map-legend span { display: inline-flex; align-items: center; gap: .35rem; } .npc-map-legend i { display: inline-block; width: 15px; height: 10px; } .npc-map-legend-tile { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #64795e; } .npc-map-legend-token { width: 11px !important; height: 11px !important; border-radius: 50%; } .npc-map-legend-footprint { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border: 1px solid #ffb7aa; background: rgba(196, 76, 69, .35); } .npc-map-scene-empty { margin: 0; } .npc-battlefield-catalog-section { border-color: color-mix(in srgb, var(--border, #33445b) 62%, #69b88a); box-shadow: inset 3px 0 0 rgba(91, 181, 127, .55); } .npc-world-scene-catalog, .npc-world-scene-group { display: grid; gap: .85rem; } .npc-world-scene-group + .npc-world-scene-group { margin-top: .45rem; padding-top: 1rem; border-top: 1px solid var(--border-color, #42516a); } .npc-world-scene-group > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .npc-world-scene-group h3, .npc-world-scene-group p { margin: 0; } .npc-world-use-banner { display: flex; align-items: center; gap: .55rem; padding: .65rem .75rem; border: 1px solid rgba(102, 184, 137, .4); border-radius: 10px; background: rgba(47, 100, 70, .2); } .npc-world-use-banner span:not(.pill) { color: #cfe8d8; } .npc-world-use-banner .pill { margin-left: auto; } .npc-world-discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; } .npc-world-discovery-grid > div { display: grid; align-content: start; gap: .24rem; min-width: 0; padding: .7rem .75rem; border: 1px solid var(--border-color, #42516a); border-radius: 10px; background: rgba(17, 28, 39, .48); } .npc-world-discovery-grid strong { color: #d8e9f2; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; } .npc-world-discovery-grid span { color: var(--muted, #aeb9cb); font-size: .78rem; line-height: 1.4; } .npc-world-scene-host, .npc-world-kit-grid { min-width: 0; } .npc-world-board-wrap { background: radial-gradient(circle at 50% 32%, rgba(119, 157, 132, .18), transparent 44%), linear-gradient(180deg, #20343a, #30443e 54%, #202d2d); } .npc-world-iso-board { isolation: isolate; } .npc-world-region-layer { position: absolute; inset: 0; z-index: 1; overflow: visible; } .npc-world-region { fill: rgba(102, 134, 101, .58); stroke: rgba(196, 225, 181, .42); stroke-width: 1.25; vector-effect: non-scaling-stroke; } .npc-world-region:nth-child(3n + 2) { fill: rgba(91, 125, 96, .52); } .npc-world-region:nth-child(3n) { fill: rgba(116, 139, 100, .52); } .npc-world-region:hover { fill: rgba(137, 171, 122, .78); stroke: #cfe8bd; } .npc-world-region-fixed { fill: rgba(68, 79, 78, .58); stroke: rgba(153, 168, 169, .38); stroke-dasharray: 4 3; } .npc-world-marker { position: absolute; display: block; transform: translate(-50%, -50%); } .npc-world-prop { width: 6px; height: 6px; border: 1px solid rgba(236, 222, 174, .78); border-radius: 50%; background: #9c8653; box-shadow: 0 1px 3px rgba(0, 0, 0, .65); } .npc-world-prop:hover { width: 11px; height: 11px; background: #d3b86d; } .npc-world-scene-prop { width: 12px; height: 12px; border: 2px solid #f0d7ff; border-radius: 3px; background: #875ca0; box-shadow: 0 3px 7px rgba(0, 0, 0, .55); } .npc-world-portal { width: 15px; height: 15px; border: 2px solid #d7fbff; background: #3f9daa; box-shadow: 0 0 0 3px rgba(77, 184, 197, .2), 0 3px 7px rgba(0, 0, 0, .55); transform: translate(-50%, -50%) rotate(45deg); } .npc-world-event-token { background: #4c8b62; border-color: #d6f3dc; } .npc-world-ambient-token { border-color: #ffe7a2; border-style: dashed; background: #8a7845; } .npc-world-legend-region { border: 1px solid rgba(196, 225, 181, .62); background: rgba(102, 134, 101, .78); transform: skewX(-28deg); } .npc-world-legend-prop { width: 7px !important; height: 7px !important; border-radius: 50%; background: #b69a5d; } .npc-world-legend-scene-prop { width: 9px !important; height: 9px !important; border: 1px solid #f0d7ff; border-radius: 2px; background: #875ca0; } .npc-world-legend-portal { width: 9px !important; height: 9px !important; background: #3f9daa; transform: rotate(45deg); } .npc-world-event-legend { background: #4c8b62; border: 1px solid #d6f3dc; } .npc-world-ambient-legend { background: #8a7845; border: 1px dashed #ffe7a2; } .npc-world-kit-grid, .npc-world-kit-section { display: grid; gap: .75rem; } .npc-world-kit-section + .npc-world-kit-section { margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--border-color, #42516a); } .npc-world-kit-section h4, .npc-world-kit-section p { margin: 0; } .npc-world-content-context, .npc-world-content-attribution { border: 1px solid color-mix(in srgb, var(--border-color, #42516a) 78%, #8aa5c4); border-radius: 10px; background: rgba(19, 32, 42, .46); } .npc-world-content-context { display: flex; flex-wrap: wrap; gap: .35rem .7rem; padding: .65rem .75rem; color: var(--muted, #aeb9cb); font-size: .78rem; } .npc-world-content-context strong { color: var(--text-color, #edf2f8); } .npc-world-content-context small { flex-basis: 100%; color: #8998aa; line-height: 1.4; } .npc-world-content-attribution { padding: .65rem .75rem; } .npc-world-content-attribution > summary { color: #cfe2f5; cursor: pointer; font-size: .82rem; font-weight: 750; } .npc-world-content-attribution section { margin-top: .65rem; } .npc-world-content-attribution h4 { margin: 0 0 .4rem; } .npc-world-content-attribution ol { display: grid; gap: .35rem; margin: 0; padding-left: 1.4rem; } .npc-world-content-attribution li { color: #dce7f1; font-size: .77rem; } .npc-world-content-attribution li span { display: block; margin-top: .08rem; color: var(--muted, #aeb9cb); font-size: .72rem; } @media (max-width: 820px) { .npc-world-discovery-grid { grid-template-columns: 1fr; } } .npc-arena-controls { display: grid; grid-template-columns: repeat(3, minmax(10rem, 1fr)); gap: .65rem; } .npc-arena-controls label { display: grid; gap: .3rem; color: var(--muted, #aeb9cb); font-size: .78rem; } .npc-arena-board-wrap { background: radial-gradient(circle at 50% 32%, rgba(117, 141, 171, .18), transparent 48%), linear-gradient(180deg, #202e3b, #2e3d49 54%, #202b34); } .npc-arena-grid-tile { border-color: rgba(161, 185, 207, .22); background: #4f6572; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(12, 22, 29, .3); } .npc-arena-grid-tile:nth-child(2n) { background: #465d6b; } .npc-arena-unit-token { border-color: #cbe8ff; background: #3f78a5; } .npc-arena-building-token { border-color: #d8f3ca; border-radius: 9px; background: #4f8a61; transform: translate(-50%, -84%) rotate(45deg); } .npc-arena-building-token:hover, .npc-arena-building-token:focus-visible { transform: translate(-50%, -94%) rotate(45deg) scale(1.12); } .npc-arena-building-token > span, .npc-arena-building-token > b { transform: rotate(-45deg); } .npc-arena-building-token > b { transform: translateX(-50%) rotate(-45deg); transform-origin: top center; } .npc-arena-legend-tile { background: #4f6572; } .npc-arena-unit-legend { border: 1px solid #cbe8ff; background: #3f78a5; } .npc-arena-building-legend { border: 1px solid #d8f3ca; border-radius: 2px !important; background: #4f8a61; transform: rotate(45deg); } .npc-arena-candidates, .npc-content-uses-card, .npc-current-placement-card { margin-top: 1rem; } .npc-arena-candidates { padding: .9rem; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface) 88%, #4f8a61 12%); } .npc-arena-candidates header h4 { margin: 0 0 .25rem; } .npc-arena-candidates header p { margin: 0 0 .75rem; } .npc-arena-candidate-row + .npc-arena-candidate-row { margin-top: .8rem; } .npc-arena-candidate-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; } .npc-attribution-list { display: grid; gap: .55rem; margin-top: .7rem; } .npc-attribution-row { padding: .65rem .75rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%); } .npc-attribution-row .skill-meta { margin-top: .35rem; } .npc-attribution-coverage { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } @media (max-width: 720px) { .npc-map-encounter-control { grid-template-columns: 1fr; } .npc-arena-controls { grid-template-columns: 1fr; } .npc-map-board-wrap { min-height: 18rem; max-height: 60vh; } .npc-map-scene-header { align-items: flex-start; } } .npc-nav-card-detail, .npc-card-badges, .npc-full-skillset, .npc-card-skillset, .npc-instance-list { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .npc-nav-card-detail { padding: .55rem .7rem .75rem; color: var(--muted, #aab6c5); } .npc-card-badges, .npc-card-skillsets { padding: .5rem .65rem; } .npc-card-skillsets { display: grid; gap: .45rem; } .npc-skill-chip, .npc-instance-chip { display: inline-flex; gap: .35rem; align-items: center; border: 1px solid var(--border, #40516a); border-radius: 999px; padding: .28rem .55rem; text-decoration: none; background: rgba(255, 255, 255, .035); } .npc-allegiance { display: inline-flex; border-radius: 999px; padding: .16rem .48rem; font-size: .76rem; font-weight: 700; text-transform: capitalize; background: #536174; color: #fff; } .npc-allegiance-enemy { background: #8b3f4b; } .npc-allegiance-allied { background: #31755d; } .npc-allegiance-neutral { background: #726744; } .npc-placement-unavailable { grid-column: 1 / -1; } .core-page-equipment-section + .core-page-equipment-section { margin-top: 1rem; } .core-page-equipment-section h3 { margin: 0 0 .6rem; } /* Profession Path talents. The canvas intentionally follows the game's own emitted barycentric layout; surrounding controls reuse site grammar. */ .talents-view { --talent-accent: rgba(255, 189, 113, .45); --talent-tree-bg: rgba(32, 50, 69, .35); max-width: 1540px; margin: 0 auto; } .talent-page-header { display: grid; gap: 8px; margin-bottom: 10px; } .talent-class-tabs { margin: 0; padding-right: 0; } .talent-class-tabs .module-choice { max-width: none; min-height: 34px; font-size: 15px; text-decoration: none; } .talent-highlight-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .talent-highlight-controls .term-filter-chip { margin: 0; } .talent-highlight-controls .term-filter-chip.active { border-color: var(--accent); background: rgba(255, 189, 113, .16); } .talent-legend-mark { display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 50%; } .talent-legend-tactics .talent-legend-mark { color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 200, 97, .14); } .talent-legend-special .talent-legend-mark { color: var(--talent-accent); box-shadow: 0 0 8px var(--talent-accent); } .talent-layout-note { color: var(--muted); font-size: 12px; } .talent-tree-stage { position: relative; height: min(76vh, 860px); min-height: 620px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--talent-accent) 55%, var(--line)); border-radius: 12px; background: #050606; box-shadow: inset 0 0 54px rgba(0, 0, 0, .58); } .talent-tree-loading { display: grid; place-items: center; min-height: 520px; height: min(70vh, 760px); color: var(--muted); } .talent-viewport-controls { position: absolute; z-index: 3; top: 10px; left: 10px; display: flex; gap: 6px; } .talent-viewport-controls .icon-button, .talent-viewport-controls .text-button { min-height: 36px; height: 36px; font-size: 16px; background: rgba(11, 12, 14, .9); } .talent-viewport-controls .icon-button { width: 38px; } .talent-tree-svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; } .talent-tree-svg.is-panning { cursor: grabbing; } .talent-tree-background { pointer-events: all; } .talent-grade-ring circle { fill: none; stroke: rgba(255, 255, 255, .075); stroke-width: 3; stroke-dasharray: 9 13; } .talent-grade-ring text, .talent-sector-label text, .talent-tree-center text, .talent-node text { fill: var(--text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; paint-order: stroke; stroke: rgba(5, 6, 6, .92); stroke-width: 4px; stroke-linejoin: round; text-anchor: middle; } .talent-grade-ring text { fill: rgba(255, 255, 255, .48); font-size: 25px; font-weight: 750; } .talent-sector-boundary line { stroke: rgba(255, 255, 255, .07); stroke-width: 3; } .talent-sector-label text { fill: rgba(255, 255, 255, .58); font-size: 30px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; } .talent-prereq-edge { stroke: rgba(174, 185, 202, .31); stroke-width: 7; stroke-linecap: round; } .talent-tree-center circle { fill: rgba(7, 8, 9, .92); stroke: var(--talent-accent); stroke-width: 5; } .talent-tree-center image { opacity: .88; } .talent-tree-center text { font-size: 25px; font-weight: 900; } .talent-node { color: inherit; text-decoration: none; cursor: pointer; transition: opacity 140ms ease; } .talent-node-hit { fill: transparent; stroke: none; } .talent-node-token { fill: #202b3b; stroke: #708096; stroke-width: 4; } .talent-node-quiet { opacity: .72; } .talent-node-quiet:hover, .talent-node-quiet:focus { opacity: 1; } .talent-node-tactics .talent-node-token { fill: #182536; stroke: var(--gold); stroke-width: 7; } .talent-node-special-mechanic .talent-node-token { fill: #17202d; stroke: var(--talent-accent); stroke-width: 7; filter: drop-shadow(0 0 12px var(--talent-accent)); } .talent-node-icon { clip-path: circle(50%); pointer-events: none; } .talent-tactic-category { filter: drop-shadow(0 1px 3px #000); pointer-events: none; } .talent-node-glyph { font-size: 21px; font-weight: 950; pointer-events: none; } .talent-node-level { fill: rgba(255, 255, 255, .86) !important; font-size: 17px; font-weight: 850; pointer-events: none; } .talent-node:hover .talent-node-token, .talent-node:focus .talent-node-token, .talent-node.is-selected .talent-node-token { stroke: #fff; } .talent-node.is-selected .talent-node-token { transform-box: fill-box; transform-origin: center; animation: talent-node-token-focus-pulse 720ms ease-out 1; } @keyframes talent-node-token-focus-pulse { 0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } 45% { transform: scale(1.18); filter: drop-shadow(0 0 14px rgba(255, 213, 154, .95)); } 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } } .talent-node:focus { outline: none; } .talent-node:focus .talent-node-hit { stroke: var(--accent); stroke-width: 5; } .talent-node.is-selected .talent-node-hit { fill: none; stroke: var(--accent); stroke-width: 7; animation: talent-node-pulse 1.35s ease-out infinite; } @keyframes talent-node-pulse { 0% { opacity: .9; stroke-width: 8; } 100% { opacity: 0; stroke-width: 24; } } .talent-highlight-only-active .talent-node-quiet, .talent-highlight-only-active .talent-list-node:not(.talent-list-tactics):not(.talent-list-special-mechanic) { opacity: .13; } .talent-tactics-hidden .talent-node-tactics, .talent-tactics-hidden .talent-list-tactics, .talent-special-hidden .talent-node-special-mechanic, .talent-special-hidden .talent-list-special-mechanic { opacity: .12; } .talent-tooltip-host { position: absolute; z-index: 2; top: 58px; right: 12px; width: min(520px, 42%); max-height: calc(100% - 70px); overflow-y: auto; pointer-events: none; } .talent-node-tooltip.skill-card { display: block; padding: 14px; border: 1px solid color-mix(in srgb, var(--talent-accent) 65%, #596678); border-radius: 10px; background: rgba(20, 26, 35, .97); box-shadow: 0 14px 40px rgba(0, 0, 0, .48); } .talent-node-tooltip.is-pinned { pointer-events: auto; } .talent-tooltip-header { display: grid; gap: 7px; } .talent-tooltip-header .skill-title { margin: 0; font-size: 19px; } .talent-effect-summary { margin-top: 10px; font-size: 14px; } .talent-tooltip-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .talent-term-link { display: inline-flex; gap: 4px; align-items: center; color: var(--link) !important; font-size: 14px; font-weight: 800; } .talent-level-table { display: grid; gap: 1px; margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; } .talent-level-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 8px 9px; background: rgba(58, 70, 89, .36); font-size: 13px; } .talent-level-label { font-weight: 900; color: var(--gold); } .talent-level-label small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 650; } .talent-level-effect { min-width: 0; } .talent-list-fallback { display: none; } .talent-skeleton-header .module-choice-tabs { align-items: center; min-height: 34px; } @media (max-width: 1050px) { .talent-tooltip-host { width: min(460px, 48%); } .talent-layout-note { flex-basis: 100%; } } @media (max-width: 760px) { .talent-tree-stage { display: none; } .talent-list-fallback { display: grid; gap: 12px; } .talent-page-header { position: static; } .talent-class-tabs .module-choice { flex: 1 1 138px; text-align: center; } .talent-highlight-only { display: none; } .talent-layout-note { display: none; } .talent-list-grade { display: grid; gap: 7px; } .talent-list-grade h2 { margin: 4px 0 0; color: var(--muted); font-size: 17px; } .talent-list-nodes { display: grid; gap: 7px; } .talent-list-node { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); } .talent-list-node summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 8px 10px; cursor: pointer; } .talent-list-node summary::marker { color: var(--muted); } .talent-list-node summary a { flex: 1 1 170px; color: inherit; font-weight: 850; text-decoration: none; } .talent-list-tactics { border-color: rgba(255, 200, 97, .62); } .talent-list-special-mechanic { border-color: var(--talent-accent); box-shadow: inset 3px 0 0 var(--talent-accent); } .talent-list-effect { padding: 4px 10px 10px; color: var(--muted); font-size: 14px; } .talent-list-node > .talent-term-link { margin: 0 10px 10px; } } @media (prefers-reduced-motion: reduce) { .talent-node.is-selected .talent-node-hit { animation: none; } .talent-node.is-selected .talent-node-token { animation: none; } .talent-node { transition: none; } } /* Defensive relationship mode: deliberately distinct from offensive Applies. */ .core-page-mode-6 { border-color: #4f91ae; background: rgba(68, 153, 188, .18); color: #a9e4f5; } /* Status-effect lists are baked graph entities, distinct from individual effects. */ .mention-graph-node-list { --mention-graph-node-color: rgba(100, 196, 170, .78); } .mention-path-status-effect-list { gap: 5px; } .status-effect-list-member-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; min-height: 18px; padding: 0 5px; border: 1px solid rgba(100, 196, 170, .58); border-radius: 999px; background: rgba(100, 196, 170, .14); color: #baf2df; font-size: 11px; font-weight: 850; line-height: 1; } .status-effect-list-membership { display: grid; gap: 8px; } .status-effect-list-member-list { display: grid; gap: 4px; max-height: 260px; margin: 0; padding: 0 0 0 20px; overflow-y: auto; } .status-effect-list-member { color: var(--text); } .status-effect-list-page-link { justify-self: start; } .twin-provenance-plaque { align-self: start; } .twin-provenance-prefix { color: #d8dde4; white-space: nowrap; } .twin-provenance-link { gap: 6px; } .twin-provenance-link .term-kind-glyph { width: 26px; height: 26px; } /* W1b filter-board Phase A: honest sharing and mobile-safe editing. */ .filter-formula-copy:disabled { border-color: #3b4149; color: #7f8994; cursor: not-allowed; opacity: .72; } .filter-formula-share-reason { color: #aeb8c3; font-size: 11px; font-weight: 750; line-height: 1.3; } @media (max-width: 640px) { .filter-summary-icons { flex-wrap: wrap; overflow-x: visible; } .filter-board-backdrop { align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; } .filter-board-panel { height: auto; max-height: 100dvh; min-height: 0; overflow-y: auto; } .filter-board-surface { touch-action: pan-x pan-y; } .filter-board-node { touch-action: none; } .filter-board-footer { position: sticky; z-index: 70; bottom: -10px; padding: 10px 0; background: linear-gradient(180deg, rgba(12, 16, 20, .72), #0c1014 28%); } .filter-board-type-popover, .filter-bubble-type-popover, .filter-board-info-popover { position: fixed !important; z-index: 140; max-width: calc(100vw - 16px); max-height: min(56dvh, 360px); overflow-y: auto; } } @media (max-width: 479px) { .filter-board-term-picker { flex: 1 0 100%; width: 100%; min-width: 0; } } @media (pointer: coarse) { .filter-bubble-controls { opacity: 1; } .filter-board-node-actions, .filter-bubble-node-actions { display: flex; } } /* W1a term-page IA: tier navigation, one filter disclosure, and one bulk toggle. */ .core-page-panel-toolbar { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; } .core-page-panel-toolbar > .mention-tabs { flex: 1 1 auto; margin: 0; } .core-page-panel-actions { display: flex; flex: 0 0 auto; align-items: flex-start; gap: 8px; margin-left: auto; } .core-page-filter-disclosure { position: relative; } .core-page-filter-toggle.term-filter-chip { min-height: 32px; margin: 0; border-radius: 6px; font-weight: 800; } .core-page-filter-toggle.active, .core-page-filter-toggle[aria-expanded="true"] { border-color: #bd9852; background: rgba(189, 152, 82, .22); color: #f3d48e; } .core-page-filter-popover { position: absolute; z-index: 12; top: calc(100% + 7px); right: 0; width: min(430px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 14px 32px rgba(0, 0, 0, .42); } .core-page-filter-popover .core-page-filter-row { margin: 0; } .core-page-filter-popover .core-page-filter-row + .core-page-filter-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(89, 102, 120, .45); } .core-page-filter-popover .core-page-certainty-filters { padding-bottom: 0; border-bottom: 0; } .core-page-mode-count-note, .core-page-certainty-count-note { flex-basis: 100%; font-size: 12px; } @media (max-width: 720px) { .core-page-panel-toolbar { flex-wrap: wrap; } .core-page-panel-toolbar > .mention-tabs { flex-basis: 100%; } .core-page-panel-actions { width: 100%; justify-content: flex-end; } .core-page-filter-popover .core-page-filter-row { display: flex; } .core-page-filter-popover .core-page-filter-row .term-filter-chip { width: auto; min-height: 36px; } } /* Baked inline-mention diagnostics reuse the governed label popover. */ .inline-term-diagnostic { border-bottom: 1px dotted #d59b5d; color: #e3c59d; cursor: help; } .inline-term-diagnostic:hover, .inline-term-diagnostic:focus-visible, .inline-term-diagnostic[aria-expanded="true"] { color: #ffd9a3; border-bottom-color: currentColor; } .inline-term-diagnostic:focus-visible { outline: 2px solid rgba(255, 190, 112, .7); outline-offset: 2px; border-radius: 2px; } .keyword-tooltip.inline-term-diagnostic-tooltip { width: min(420px, calc(100vw - 20px)); min-width: min(280px, calc(100vw - 20px)); padding: 14px 16px; font-size: 16px; } .inline-term-diagnostic-tooltip .keyword-tooltip-header { margin-bottom: 12px; } .inline-term-diagnostic-body { display: grid; gap: 10px; } .inline-term-diagnostic-reason, .inline-term-diagnostic-unpublished { margin: 0; } .inline-term-diagnostic-options { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; } .inline-term-diagnostic-option { white-space: normal; } .inline-term-diagnostic-conjunction, .inline-term-diagnostic-separator { color: var(--muted); } .inline-term-diagnostic-unpublished, .inline-term-diagnostic-meta { color: var(--muted); font-size: 12px; } .inline-term-diagnostic-meta code { color: #d7dfec; font-size: inherit; }