/* RatQuest website - one stylesheet, light and dark. Colors are tokens on :root; [data-theme] on picks one (theme-init.js sets it before the page draws, from the saved choice or the system setting). */ :root { --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Code", "SF Mono", "JetBrains Mono", Consolas, Menlo, monospace; --radius: 10px; --radius-sm: 7px; --radius-lg: 14px; --header-h: 56px; --row-h: 38px; --ease: cubic-bezier(.2, .8, .2, 1); --bg: #f7f7f8; --bg-elev: #ffffff; --bg-sunken: #efeff2; --bg-hover: #f0f0f3; --bg-active: #e8e8ee; --fg: #16161a; --fg-muted: #5c5c66; --fg-subtle: #8b8b96; --fg-faint: #b4b4bd; --border: #e4e4e9; --border-strong: #d2d2da; --accent: #5b5bd6; --accent-hover: #4a4ac4; --accent-soft: #ededfc; --accent-fg: #ffffff; --accent-text: #4747c2; --good: #16a34a; --good-soft: #e6f6ec; --bad: #dc2626; --bad-soft: #fde8e8; --warn: #b7791f; --warn-soft: #fdf3dc; --info-soft: #e9eef7; --t0: #3f3f46; --t1: #2563eb; --t2: #d9480f; --t3: #8b3fd9; --t1-soft: #e7efff; --t2-soft: #fff0e6; --t3-soft: #f3e8ff; --shadow-sm: 0 1px 2px rgba(16, 16, 24, .06); --shadow: 0 1px 3px rgba(16, 16, 24, .06), 0 6px 16px rgba(16, 16, 24, .06); --shadow-lg: 0 10px 38px rgba(16, 16, 24, .16), 0 2px 8px rgba(16, 16, 24, .08); --scrim: rgba(18, 18, 24, .32); --icon-bg: #2a2a31; color-scheme: light; } :root[data-theme="dark"] { --bg: #0e0e11; --bg-elev: #16161a; --bg-sunken: #0a0a0c; --bg-hover: #1d1d22; --bg-active: #25252c; --fg: #ececf1; --fg-muted: #a1a1ad; --fg-subtle: #74747f; --fg-faint: #4b4b54; --border: #25252b; --border-strong: #33333b; --accent: #7b7bf0; --accent-hover: #8e8ef5; --accent-soft: #1f1f3a; --accent-fg: #0e0e11; --accent-text: #a5a5fa; --good: #4ade80; --good-soft: #10261a; --bad: #f87171; --bad-soft: #2c1414; --warn: #fbbf24; --warn-soft: #2a2110; --info-soft: #161c28; --t0: #d4d4dc; --t1: #60a5fa; --t2: #fb923c; --t3: #c084fc; --t1-soft: #132036; --t2-soft: #2b1a0e; --t3-soft: #241536; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .35); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4); --scrim: rgba(0, 0, 0, .55); --icon-bg: #0b0b0d; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--accent-soft); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .num, table.data td.n, .tabular { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); font-size: 12.5px; } .muted { color: var(--fg-muted); } .subtle { color: var(--fg-subtle); } .faint { color: var(--fg-faint); } .good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); } .hidden { display: none !important; } .nowrap { white-space: nowrap; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .grow { flex: 1 1 auto; min-width: 0; } .row { display: flex; align-items: center; gap: 8px; } .col { display: flex; flex-direction: column; gap: 8px; } .wrap { flex-wrap: wrap; } .gap-4 { gap: 4px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; } /* ------------------------------------------------------------------ app frame */ #app { display: flex; flex-direction: column; height: 100%; } .topbar { height: var(--header-h); flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 0 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-elev) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px); position: relative; z-index: 30; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 650; letter-spacing: -.01em; font-size: 15px; color: var(--fg); margin-right: 14px; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand svg { width: 26px; height: 26px; } .nav { display: flex; gap: 2px; } .nav a { color: var(--fg-muted); padding: 7px 11px; border-radius: 8px; font-weight: 520; font-size: 13.5px; white-space: nowrap; } .nav a:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; } .nav a.on { color: var(--fg); background: var(--bg-active); } .nav a.dev { color: var(--accent-text); } .topbar .spacer { flex: 1; } .searchbtn { display: flex; align-items: center; gap: 8px; height: 34px; min-width: 240px; padding: 0 8px 0 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-sunken); color: var(--fg-subtle); cursor: pointer; transition: border-color .15s; } .searchbtn:hover { border-color: var(--border-strong); color: var(--fg-muted); } .searchbtn .grow { text-align: left; } .searchbtn svg { width: 16px; height: 16px; flex: none; } kbd { white-space: nowrap; font: 11px var(--font); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--fg-muted); box-shadow: 0 1px 0 var(--border-strong); } .iconbtn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--fg-muted); cursor: pointer; } .iconbtn:hover { background: var(--bg-hover); color: var(--fg); } .iconbtn svg { width: 18px; height: 18px; } .status-pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--border); font-size: 12.5px; color: var(--fg-muted); white-space: nowrap; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); flex: none; } .dot.up { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); } .dot.down { background: var(--bad); } .dot.warn { background: var(--warn); } .menu-toggle { display: none; } main#view { flex: 1 1 auto; min-height: 0; position: relative; display: flex; } .page { flex: 1 1 auto; min-width: 0; overflow: auto; } .page-pad { padding: 28px 32px 60px; max-width: 1280px; margin: 0 auto; } /* ------------------------------------------------------------------ controls */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--fg); font-weight: 520; font-size: 13px; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-sm); transition: background .12s, border-color .12s, transform .06s; } .btn:hover { background: var(--bg-hover); } .btn:active { transform: translateY(.5px); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .btn.primary:hover { background: var(--accent-hover); } .btn.danger { color: var(--bad); } .btn.danger.solid { background: var(--bad); border-color: var(--bad); color: #fff; } .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--fg-muted); } .btn.ghost:hover { background: var(--bg-hover); color: var(--fg); } .btn.sm { height: 26px; padding: 0 9px; font-size: 12.5px; border-radius: 7px; } .btn svg { width: 15px; height: 15px; } .input, select.input, textarea.input { height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--fg); outline: none; transition: border-color .12s, box-shadow .12s; min-width: 0; } textarea.input { height: auto; padding: 8px 10px; resize: vertical; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; } .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .input.sm { height: 28px; font-size: 12.5px; } .input-icon { position: relative; display: flex; align-items: center; } .input-icon svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--fg-subtle); pointer-events: none; } .input-icon .input { padding-left: 32px; width: 100%; } label.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; color: var(--fg); font-size: 13px; } label.check input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; } .seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--bg-sunken); border: 1px solid var(--border); gap: 2px; } .seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--fg-muted); font-size: 12.5px; font-weight: 540; cursor: pointer; white-space: nowrap; } .seg button:hover:not(:disabled) { color: var(--fg); } .seg button.on { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow-sm); } .seg button:disabled { opacity: .35; cursor: default; } .chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--fg-muted); font-size: 12px; font-weight: 520; cursor: pointer; white-space: nowrap; user-select: none; } .chip:hover { border-color: var(--border-strong); color: var(--fg); } .chip.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-text); } .chip .x { opacity: .6; } .chip .x:hover { opacity: 1; } .badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: var(--bg-sunken); color: var(--fg-muted); border: 1px solid var(--border); white-space: nowrap; } .badge.accent { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; } .badge.good { background: var(--good-soft); color: var(--good); border-color: transparent; } .badge.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; } .badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .badge.t1 { background: var(--t1-soft); color: var(--t1); border-color: transparent; } .badge.t2 { background: var(--t2-soft); color: var(--t2); border-color: transparent; } .badge.t3 { background: var(--t3-soft); color: var(--t3); border-color: transparent; } .tiers { display: inline-flex; gap: 3px; } .tiers i { width: 7px; height: 7px; border-radius: 2px; background: var(--border-strong); display: inline-block; } .tiers i.t0 { background: var(--t0); } .tiers i.t1 { background: var(--t1); } .tiers i.t2 { background: var(--t2); } .tiers i.t3 { background: var(--t3); } .tier-0 { color: var(--t0); } .tier-1 { color: var(--t1); } .tier-2 { color: var(--t2); } .tier-3 { color: var(--t3); } .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 620; } .card-b { padding: 14px 16px; } .section-title { font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-subtle); margin: 18px 0 8px; } h1, h2, h3 { letter-spacing: -.02em; margin: 0; } h1 { font-size: 26px; font-weight: 700; } h2 { font-size: 18px; font-weight: 650; } h3 { font-size: 15px; font-weight: 620; } hr.sep { border: 0; border-top: 1px solid var(--border); margin: 14px 0; } .empty { padding: 48px 20px; text-align: center; color: var(--fg-subtle); } .empty svg { width: 36px; height: 36px; opacity: .55; margin-bottom: 8px; } .empty b { display: block; color: var(--fg-muted); font-size: 15px; margin-bottom: 4px; } /* item icons: 40x40 cells of 240x240 sheets (6 x 6, column by column) */ .eqi { width: 28px; height: 28px; border-radius: 6px; background-color: var(--icon-bg); background-repeat: no-repeat; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); image-rendering: auto; } .eqi.lg { width: 48px; height: 48px; border-radius: 9px; } .eqi.xl { width: 64px; height: 64px; border-radius: 12px; } /* ------------------------------------------------------------------ explorer layout (filters | table | drawer) */ .explorer { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; } .filters { width: 272px; flex: 0 0 auto; border-right: 1px solid var(--border); background: var(--bg-elev); overflow-y: auto; padding: 14px 14px 40px; } .filters .fgroup { margin-bottom: 16px; } .filters .flabel { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 7px; } .filters .flabel button { font-size: 11px; text-transform: none; letter-spacing: 0; border: 0; background: none; color: var(--accent-text); cursor: pointer; padding: 0; } .filters .chips { display: flex; flex-wrap: wrap; gap: 5px; } .filters .range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; } .filters .range span { color: var(--fg-subtle); } .filters select.input, .filters .input { width: 100%; } .statfilter { display: grid; grid-template-columns: 1fr 58px 64px 24px; gap: 5px; margin-bottom: 5px; } .statfilter .input { height: 28px; padding: 0 6px; font-size: 12.5px; } .statfilter button { border: 0; background: none; color: var(--fg-subtle); cursor: pointer; border-radius: 6px; } .statfilter button:hover { background: var(--bg-hover); color: var(--bad); } .results { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .toolbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-elev); flex-wrap: wrap; min-height: 53px; } .toolbar .count { color: var(--fg-muted); font-size: 13px; white-space: nowrap; } .toolbar .count b { color: var(--fg); font-weight: 650; } .activefilters { flex: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--bg-elev); } .activefilters:empty { display: none; } /* ------------------------------------------------------------------ virtual table */ .vt { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--bg-elev); outline: none; } .vt-inner { position: relative; min-width: 100%; } .vt-head { position: sticky; top: 0; z-index: 3; display: flex; height: 36px; background: var(--bg-elev); border-bottom: 1px solid var(--border); min-width: 100%; } .vt-head .th { position: relative; display: flex; align-items: center; gap: 4px; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--fg-muted); white-space: nowrap; user-select: none; flex: none; overflow: hidden; } .vt-head .th.sortable { cursor: pointer; } .vt-head .th.sortable:hover { color: var(--fg); background: var(--bg-hover); } .vt-head .th.on { color: var(--fg); } .vt-head .th .arrow { opacity: .8; font-size: 10px; } .vt-head .th.r { justify-content: flex-end; } .vt-head .th .grip { position: absolute; right: 0; top: 6px; bottom: 6px; width: 7px; cursor: col-resize; border-right: 1px solid var(--border); } .vt-head .th .grip:hover { border-right: 2px solid var(--accent); } .vt-body { position: relative; } .vt-row { position: absolute; left: 0; display: flex; align-items: center; height: var(--row-h); min-width: 100%; border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent); cursor: pointer; } .vt-row:hover { background: var(--bg-hover); } .vt-row.sel { background: var(--accent-soft); } .vt-row.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); } .vt-row .td { padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; font-size: 13px; } .vt-row .td.r { text-align: right; font-variant-numeric: tabular-nums; } .vt-row .td.zero { color: var(--fg-faint); } .vt-row .namecell { display: flex; align-items: center; gap: 9px; min-width: 0; } .vt-row .namecell .eqi { width: 24px; height: 24px; border-radius: 5px; } .vt-row .namecell .nm { overflow: hidden; text-overflow: ellipsis; font-weight: 520; } .vt-row .cmpbtn { opacity: 0; margin-left: auto; flex: none; } .vt-row:hover .cmpbtn, .vt-row .cmpbtn.on { opacity: 1; } .skel { display: inline-block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--bg-sunken), var(--bg-hover), var(--bg-sunken)); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .vt-empty { position: absolute; inset: 36px 0 0 0; } .minibtn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--fg-muted); cursor: pointer; } .minibtn:hover { color: var(--accent-text); border-color: var(--accent); } .minibtn.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .minibtn svg { width: 14px; height: 14px; } /* ------------------------------------------------------------------ drawer (details beside the list) */ .drawer { width: min(640px, 48vw); flex: 0 0 auto; border-left: 1px solid var(--border); background: var(--bg-elev); display: flex; flex-direction: column; min-height: 0; position: relative; animation: drawerIn .18s var(--ease); } @keyframes drawerIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } .drawer .dgrip { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; } .drawer .dgrip:hover { background: linear-gradient(90deg, transparent 3px, var(--accent) 3px, var(--accent) 5px, transparent 5px); } .dhead { display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); } .dhead .ttl { font-size: 19px; font-weight: 680; letter-spacing: -.02em; line-height: 1.25; } .dhead .sub { color: var(--fg-muted); font-size: 12.5px; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .dhead .acts { margin-left: auto; display: flex; gap: 4px; flex: none; } .tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; flex: none; } .tabs button { height: 40px; padding: 0 10px; border: 0; background: none; color: var(--fg-muted); font-weight: 560; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .tabs button:hover { color: var(--fg); } .tabs button.on { color: var(--fg); border-bottom-color: var(--accent); } .tabs .n { font-size: 11px; color: var(--fg-subtle); background: var(--bg-sunken); border-radius: 99px; padding: 0 6px; line-height: 17px; } .dbody { flex: 1 1 auto; overflow: auto; padding: 16px 18px 40px; } .back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--fg-muted); cursor: pointer; border: 0; background: none; padding: 0; margin-bottom: 6px; } .back-link:hover { color: var(--fg); } /* ------------------------------------------------------------------ item card */ .icard { border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--bg-elev), color-mix(in srgb, var(--bg-sunken) 55%, var(--bg-elev))); overflow: hidden; } .icard .ic-top { display: flex; gap: 14px; padding: 16px; align-items: center; } .icard .ic-name { font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; } .icard .ic-sub { color: var(--fg-muted); font-size: 12.5px; margin-top: 3px; } .icard .ic-flags { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 16px 12px; } .icard .ic-flags .badge { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; } .icard .ic-sec { padding: 12px 16px; border-top: 1px solid var(--border); } .icard .ic-line { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; margin: 2px 0; } .icard .ic-line .k { color: var(--fg-subtle); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 2px 10px; } .stat { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 4px 0; font-size: 13px; border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); } .stat .k { color: var(--fg-muted); font-size: 12px; white-space: nowrap; } .stat .v { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .stat .d { font-size: 11px; font-weight: 600; margin-left: 4px; } .effects .eff { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 3px 0; } .effects .eff .k { color: var(--fg-subtle); width: 86px; flex: none; font-size: 12px; } .effects .eff .v { color: var(--warn); font-weight: 600; } .ic-classes { display: flex; flex-wrap: wrap; gap: 4px; } .ic-classes span { font-size: 11px; font-weight: 650; padding: 2px 5px; border-radius: 5px; background: var(--bg-sunken); color: var(--fg-muted); letter-spacing: .03em; } .ic-classes span.all { background: var(--good-soft); color: var(--good); } /* ------------------------------------------------------------------ plain data tables */ table.data { width: 100%; border-collapse: collapse; font-size: 13px; } table.data th { text-align: left; font-size: 11.5px; font-weight: 620; color: var(--fg-subtle); padding: 7px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; background: var(--bg-elev); z-index: 1; } table.data th.n, table.data td.n { text-align: right; } table.data th.sortable { cursor: pointer; } table.data th.sortable:hover { color: var(--fg); } table.data td { padding: 7px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent); vertical-align: middle; } table.data tr.click { cursor: pointer; } table.data tr.click:hover td { background: var(--bg-hover); } table.data tr.off td { color: var(--fg-subtle); } table.data tr.off td:first-child { text-decoration: line-through; text-decoration-color: var(--fg-faint); } table.data td .namecell { display: flex; align-items: center; gap: 8px; } table.data td .namecell .eqi { width: 24px; height: 24px; border-radius: 5px; } table.data.compact td, table.data.compact th { padding: 5px 7px; } table.data tr.st-OK td:first-child, table.data tr.st-FAIL td:first-child, table.data tr.st-WARN td:first-child, table.data tr.st-INFO td:first-child { box-shadow: inset 3px 0 0 var(--c); } table.data tr.st-OK { --c: var(--good); } table.data tr.st-FAIL { --c: var(--bad); } table.data tr.st-WARN { --c: var(--warn); } table.data tr.st-INFO { --c: var(--fg-faint); } table.data tr.st-FAIL td { background: color-mix(in srgb, var(--bad-soft) 70%, transparent); } table.data tr.st-WARN td { background: color-mix(in srgb, var(--warn-soft) 60%, transparent); } table.data tr.sel td { background: var(--accent-soft) !important; } .pct { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; min-width: 92px; } .pct .bar { width: 38px; height: 5px; border-radius: 9px; background: var(--bg-sunken); overflow: hidden; } .pct .bar i { display: block; height: 100%; background: var(--accent); border-radius: 9px; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; } .kv .k { color: var(--fg-subtle); } /* stat table of a mob */ table.stats td.lbl { color: var(--fg-muted); } table.stats td.dbv { color: var(--fg-subtle); } table.stats td.now { font-weight: 650; } table.stats td.up { color: var(--bad); } table.stats td.down { color: var(--good); } /* ------------------------------------------------------------------ compare */ .cmp-tray { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px); animation: trayIn .2s var(--ease); } @keyframes trayIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } .cmp-tray .lbl { font-size: 12.5px; font-weight: 620; color: var(--fg-muted); white-space: nowrap; } .cmp-tray .items { display: flex; gap: 5px; overflow-x: auto; max-width: 56vw; } .cmp-tray .it { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 4px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font-size: 12.5px; white-space: nowrap; max-width: 200px; } .cmp-tray .it .eqi { width: 22px; height: 22px; border-radius: 5px; } .cmp-tray .it span { overflow: hidden; text-overflow: ellipsis; } .cmp-tray .it button { border: 0; background: none; color: var(--fg-subtle); cursor: pointer; padding: 0 2px; font-size: 14px; } .cmp-grid { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elev); } .cmp-grid table { border-collapse: separate; border-spacing: 0; font-size: 13px; } .cmp-grid th, .cmp-grid td { padding: 7px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; } .cmp-grid thead th { position: sticky; top: 0; background: var(--bg-elev); z-index: 2; vertical-align: top; text-align: left; min-width: 190px; } .cmp-grid tbody th { position: sticky; left: 0; background: var(--bg-elev); z-index: 1; text-align: left; font-weight: 520; color: var(--fg-muted); font-size: 12.5px; min-width: 150px; } .cmp-grid thead th:first-child { left: 0; z-index: 3; } .cmp-grid td { text-align: right; font-variant-numeric: tabular-nums; } .cmp-grid td.best { font-weight: 700; color: var(--good); background: color-mix(in srgb, var(--good-soft) 70%, transparent); } .cmp-grid td .d { font-size: 11px; margin-left: 6px; font-weight: 600; } .cmp-grid tr.grp th { background: var(--bg-sunken); color: var(--fg-subtle); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 650; } .cmp-grid tr.grp td { background: var(--bg-sunken); } .cmp-grid tr.same { display: none; } .cmp-grid.showsame tr.same { display: table-row; } .cmp-head { display: flex; flex-direction: column; gap: 6px; } .cmp-head .nm { display: flex; align-items: center; gap: 8px; font-weight: 650; white-space: normal; max-width: 220px; line-height: 1.25; } /* ------------------------------------------------------------------ home */ .hero { padding: 72px 24px 36px; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -40% -10% auto -10%; height: 420px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); pointer-events: none; } .hero h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 760; letter-spacing: -.035em; line-height: 1.05; position: relative; } .hero h1 .grad { background: linear-gradient(92deg, var(--accent), var(--t3) 60%, var(--t2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { color: var(--fg-muted); font-size: 16px; max-width: 620px; margin: 14px auto 26px; position: relative; } .hero .bigsearch { position: relative; max-width: 640px; margin: 0 auto; display: flex; align-items: center; height: 54px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--bg-elev); box-shadow: var(--shadow); padding: 0 12px 0 18px; gap: 10px; cursor: text; color: var(--fg-subtle); font-size: 16px; } .hero .bigsearch:hover { border-color: var(--accent); } .hero .bigsearch svg { width: 20px; height: 20px; } .stat-strip { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; margin-top: 34px; position: relative; } .stat-strip div { text-align: center; } .stat-strip b { display: block; font-size: 24px; font-weight: 720; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat-strip span { font-size: 12.5px; color: var(--fg-subtle); } .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; max-width: 1100px; margin: 18px auto 0; padding: 0 24px; } .tile { display: block; padding: 18px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-elev); color: var(--fg); transition: border-color .15s, transform .15s, box-shadow .15s; } .tile:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); } .tile .ti { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 12px; } .tile .ti svg { width: 19px; height: 19px; } .tile b { display: block; font-size: 15px; margin-bottom: 3px; } .tile span { color: var(--fg-muted); font-size: 13px; } /* zones grid */ .zgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; } .zcard { display: block; padding: 13px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-elev); color: var(--fg); transition: border-color .12s, box-shadow .12s; } .zcard:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow); } .zcard b { display: block; font-weight: 620; } .zcard .meta { display: flex; gap: 10px; font-size: 12px; color: var(--fg-subtle); margin-top: 4px; flex-wrap: wrap; } /* recipes */ .recipe { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); padding: 12px 14px; margin-bottom: 8px; } .recipe .rh { display: flex; align-items: center; gap: 10px; } .recipe .parts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } .recipe .parts .lbl { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 5px; } .itemref { display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px 3px 3px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font-size: 12.5px; margin: 0 5px 5px 0; color: var(--fg); cursor: pointer; } .itemref:hover { border-color: var(--accent); text-decoration: none; } .itemref .eqi { width: 22px; height: 22px; border-radius: 5px; } /* ------------------------------------------------------------------ popovers, palette, toasts, modal */ .pop { position: fixed; z-index: 60; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 200px; max-height: 70vh; overflow: auto; animation: popIn .12s var(--ease); } @keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } .pop .mi { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: 13px; } .pop .mi:hover { background: var(--bg-hover); } .pop .mh { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-subtle); padding: 8px 9px 4px; } .scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 70; animation: fade .15s; backdrop-filter: blur(2px); } @keyframes fade { from { opacity: 0; } } .palette { position: fixed; z-index: 71; left: 50%; top: 12vh; transform: translateX(-50%); width: min(680px, calc(100vw - 24px)); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; animation: popIn .14s var(--ease); } .palette .pin { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 56px; border-bottom: 1px solid var(--border); } .palette .pin svg { width: 19px; height: 19px; color: var(--fg-subtle); } .palette .pin input { flex: 1; border: 0; outline: 0; background: none; font-size: 16px; height: 100%; } .palette .pres { max-height: 60vh; overflow: auto; padding: 6px; } .palette .pgrp { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-subtle); padding: 10px 10px 5px; } .palette .pi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; } .palette .pi.on { background: var(--accent-soft); } .palette .pi .pm { margin-left: auto; font-size: 12px; color: var(--fg-subtle); white-space: nowrap; } .palette .pi .zi { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--bg-sunken); color: var(--fg-muted); flex: none; } .palette .pi .zi svg { width: 15px; height: 15px; } .palette .pfoot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--border); color: var(--fg-subtle); font-size: 12px; } .toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; } .toast { pointer-events: auto; max-width: 420px; padding: 10px 14px; border-radius: 11px; background: var(--fg); color: var(--bg); font-size: 13px; box-shadow: var(--shadow-lg); animation: popIn .16s var(--ease); white-space: pre-wrap; } .toast.bad { background: var(--bad); color: #fff; } .toast.good { background: var(--good); color: #04130a; } .modal { position: fixed; z-index: 72; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 24px)); max-height: 86vh; overflow: auto; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-lg); animation: popIn .14s var(--ease); } .modal .mh2 { padding: 18px 20px 6px; font-size: 16px; font-weight: 680; } .modal .mb { padding: 6px 20px 16px; color: var(--fg-muted); white-space: pre-wrap; } .modal .mf { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg-sunken); } /* ------------------------------------------------------------------ dev side */ .devshell { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; } .devnav { width: 212px; flex: none; border-right: 1px solid var(--border); background: var(--bg-elev); padding: 12px 8px; overflow-y: auto; } .devnav a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: var(--fg-muted); font-weight: 520; font-size: 13.5px; } .devnav a svg { width: 16px; height: 16px; flex: none; } .devnav a:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; } .devnav a.on { background: var(--bg-active); color: var(--fg); } .devnav .grp { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-subtle); padding: 14px 10px 6px; } .devnav .n { margin-left: auto; font-size: 11px; background: var(--bad); color: #fff; border-radius: 99px; padding: 0 6px; line-height: 17px; } .devmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; } .devpage { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px 24px 40px; } .devpage.flush { padding: 0; display: flex; flex-direction: column; } .dev-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .dev-h h2 { font-size: 20px; } .dev-h .sub { color: var(--fg-muted); font-size: 13px; } .devbar { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 34px; border-bottom: 1px solid var(--border); background: var(--bg-sunken); font-size: 12.5px; color: var(--fg-muted); flex: none; } .outdock { flex: none; border-top: 1px solid var(--border); background: var(--bg-elev); display: flex; flex-direction: column; height: 34px; transition: height .18s var(--ease); position: relative; } .outdock.open { height: var(--dock-h, 260px); } .outdock .oh { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; flex: none; font-size: 12.5px; cursor: pointer; user-select: none; } .outdock .oh .jl { color: var(--fg-muted); } .outdock .oh .jl.run { color: var(--accent-text); font-weight: 600; } .outdock pre { flex: 1 1 auto; margin: 0; overflow: auto; padding: 8px 14px 14px; background: #0c0c0f; color: #d5d5dc; font: 12px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; } .outdock pre .e { color: #ff8a8a; } .outdock pre .s { color: #9aa0ff; font-weight: 600; } .outdock pre .ok { color: #7ee2a0; } .outdock pre .t { color: #6d6d78; } .outdock .ogrip { position: absolute; top: -4px; left: 0; right: 0; height: 8px; cursor: row-resize; } .spin { width: 14px; height: 14px; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; flex: none; } @keyframes spin { to { transform: rotate(360deg); } } .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .form-row { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 10px; margin-bottom: 8px; } .form-row label { color: var(--fg-muted); font-size: 13px; } .notice { padding: 11px 14px; border-radius: var(--radius); background: var(--info-soft); border: 1px solid var(--border); font-size: 13px; color: var(--fg-muted); } .notice.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .notice.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; } .notice.good { background: var(--good-soft); color: var(--good); border-color: transparent; } .pre { font: 12px/1.55 var(--mono); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; overflow: auto; white-space: pre; max-height: 60vh; } .login-card { width: min(380px, calc(100vw - 32px)); margin: 10vh auto; padding: 26px; } .login-card h2 { margin-bottom: 4px; } .login-card .col { gap: 12px; margin-top: 18px; } .split { display: flex; flex: 1 1 auto; min-height: 0; } .split > .left { width: 320px; flex: none; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--bg-elev); } .split > .right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; } .list { overflow: auto; flex: 1 1 auto; } .list .li { padding: 7px 12px; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: 13px; } .list .li:hover { background: var(--bg-hover); } .list .li.on { background: var(--accent-soft); } .list .li .m { font-size: 11.5px; color: var(--fg-subtle); } .knob { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center; padding: 6px 0; } .knob input[type=range] { width: 100%; accent-color: var(--accent); } /* ------------------------------------------------------------------ small screens */ @media (max-width: 1100px) { .searchbtn { min-width: 0; } .searchbtn .grow, .searchbtn kbd { display: none; } .drawer { position: absolute; right: 0; top: 0; bottom: 0; width: min(640px, 100%) !important; z-index: 20; box-shadow: var(--shadow-lg); } } @media (max-width: 820px) { .nav { display: none; } .nav.open { display: flex; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; padding: 8px; background: var(--bg-elev); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .menu-toggle { display: inline-grid; } .status-pill .txt { display: none; } .filters { position: absolute; left: 0; top: 0; bottom: 0; z-index: 25; box-shadow: var(--shadow-lg); width: min(320px, 90vw); } .filters.closed { display: none; } .page-pad { padding: 18px 16px 50px; } .devnav { display: none; } .devnav.open { display: block; position: absolute; z-index: 25; top: 0; bottom: 0; box-shadow: var(--shadow-lg); } .grid2, .grid3 { grid-template-columns: 1fr; } .drawer { width: 100% !important; left: 0; } .dhead { padding: 14px; } .dhead .acts .btn { display: none; } .dbody { padding: 12px 12px 30px; } .recipe .parts { grid-template-columns: 1fr; } .split > .left { width: 100%; } .split.detail > .left { display: none; } .split:not(.detail) > .right { display: none; } .cmp-tray .items { max-width: 46vw; } } @media (min-width: 821px) { .filters.closed { display: none; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } svg.i14 { width: 14px; height: 14px; } .outdock .oh svg { width: 15px; height: 15px; flex: none; } .outdock .oh .jl { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .devbar svg { width: 15px; height: 15px; } .card-h svg { width: 16px; height: 16px; color: var(--fg-subtle); flex: none; } .btn .spin { width: 12px; height: 12px; } @media (max-width: 820px) { .devbar { overflow: hidden; gap: 8px; } .devbar > span:not(:first-of-type) { white-space: nowrap; } .outdock .oh { overflow: hidden; gap: 6px; } .outdock .oh a.btn, .outdock .oh .btn.ghost { display: none; } .devpage { padding: 14px 12px 30px; } } /* ---------------- Mythic page (vault P137) */ .mythic-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 16px 60px; } .mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; } .mcard { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elev); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .mcard.off { opacity: .6; } .mhead { display: flex; align-items: flex-start; gap: 10px; } .mhead .badge svg { width: 13px; height: 13px; } .mttl { font-weight: 650; font-size: 15px; line-height: 1.3; } .msub { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; } .mfacts { display: grid; gap: 4px; font-size: 13px; } .mfacts > div { display: flex; gap: 10px; } .mfacts .k { flex: 0 0 78px; color: var(--fg-subtle); font-size: 12px; padding-top: 1px; } .msigil { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--t3-soft); font-size: 12.5px; } .mnamed { display: flex; flex-wrap: wrap; gap: 5px; } .mnamed .chip svg { width: 12px; height: 12px; } .mnote { font-size: 12.5px; color: var(--fg-muted); display: flex; align-items: center; gap: 6px; } .mnote.warn { color: var(--warn); } .mnote.bad { color: var(--bad); } .mnote svg { flex: none; } .mtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; } .mtile { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); text-align: left; cursor: pointer; font: inherit; min-width: 0; } .mtile:hover { border-color: var(--border-strong); background: var(--bg-hover); } .mtile .eqi { flex: none; } .mtile .nm { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .mtile .sub { font-size: 11px; color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .mtile .col { display: flex; flex-direction: column; flex: 1 1 auto; } .mtable th.sorted { color: var(--fg); } @media (max-width: 820px) { .mgrid { grid-template-columns: 1fr; } .mythic-body { padding: 4px 10px 50px; } } /* ---------------- compare: fixed tiers, sized icons, wrapping text (vault P137) */ .cmp-head .nm svg { width: 18px; height: 18px; flex: none; color: var(--fg-subtle); } .cmp-head .nm svg.raid { color: var(--t2); } .cmp-grid td.txt { white-space: normal; max-width: 320px; min-width: 160px; text-align: left; line-height: 1.4; } .cmp-head .tierlbl { font-size: 11px; font-weight: 600; } .cmp-note { font-size: 12.5px; color: var(--fg-muted); margin: -6px 0 12px; } /* ---------------- Play card, patch notes (vault P137) */ .play-host { max-width: 1100px; margin: 8px auto 6px; padding: 0 24px; } .play-host:empty { display: none; } .play { margin: 0; padding: 20px 24px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elev); box-shadow: var(--shadow); } .play h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; } .play-l { flex: 1 1 420px; min-width: 0; } .play-r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; margin: 0 auto; } .play-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; color: var(--fg-muted); } .play-steps b { color: var(--fg); } .btn.lg { height: 44px; padding: 0 20px; font-size: 15px; border-radius: 12px; } .btn.lg svg { width: 18px; height: 18px; } .home-news { max-width: 1100px; margin: 28px auto 0; padding: 0 24px; } .home-news h2 { font-size: 17px; font-weight: 700; margin: 0 0 6px; } .pn { max-width: 900px; } .pn-tools { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 10px 0; display: grid; gap: 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .pn-tools .chips { display: flex; flex-wrap: wrap; gap: 6px; } .pn-tools .count { color: var(--fg-muted); font-size: 13px; white-space: nowrap; align-self: center; } .pn-rel { margin-top: 22px; } .pn-rel > h2 { font-size: 22px; font-weight: 720; letter-spacing: -.02em; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--accent); } .pn-intro { color: var(--fg-muted); margin: 6px 0 10px; } .pn-box { margin: 10px 0; line-height: 1.5; } .pn-sec h3 { font-size: 16px; font-weight: 680; margin: 18px 0 4px; } .pn-sec > p { margin: 0 0 6px; font-size: 13.5px; } .pn-notes { list-style: none; margin: 0; padding: 0; } .pn-note { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); } .pn-note:first-child { border-top: 0; } .pn-note h4 { margin: 0; font-size: 14.5px; font-weight: 650; } .pn-note p { margin: 2px 0 0; font-size: 13.5px; color: var(--fg-muted); line-height: 1.5; } .pn-note code, .play code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--bg-sunken); border: 1px solid var(--border); } .pn-tag { align-self: start; margin-top: 2px; text-align: center; font-size: 10.5px; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; border-radius: 5px; padding: 2px 0; } .pn-tag.t-new { color: var(--good); background: var(--good-soft); } .pn-tag.t-chg { color: var(--accent-text); background: var(--accent-soft); } .pn-tag.t-fix { color: var(--t3); background: var(--t3-soft); } .pn-tag.t-rem { color: var(--bad); background: var(--bad-soft); } @media (max-width: 560px) { .pn-note { grid-template-columns: 1fr; gap: 4px; } .pn-tag { justify-self: start; padding: 2px 8px; } .play { padding: 16px; } .play-host { padding: 0 14px; } .home-news { padding: 0 14px; } } /* ---------------- zone maps (vault P137) */ .zm { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-sunken); overflow: hidden; display: flex; flex-direction: column; --zm-hi: #f59e0b; --zm-named: #c084fc; --zm-mob: #60a5fa; } :root[data-theme="light"] .zm { --zm-mob: #2563eb; --zm-named: #9333ea; --zm-hi: #d97706; } .zm-canvas { flex: 1 1 auto; min-height: 0; width: 100%; display: block; cursor: grab; touch-action: none; } .zm-canvas:active { cursor: grabbing; } .zm-ctl { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; } .zm-ctl .iconbtn { background: var(--bg-elev); border: 1px solid var(--border); width: 30px; height: 30px; } .zm-ctl b { font-size: 16px; line-height: 1; } .zm-bar { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 10px; border-top: 1px solid var(--border); background: var(--bg-elev); font-size: 12.5px; } .zm-floor { display: flex; align-items: center; gap: 6px; } .zm-floor input[type=range] { width: 90px; } .zm-status { color: var(--fg-muted); } .zm-tip { position: absolute; display: none; z-index: 3; max-width: 280px; padding: 8px 10px; border-radius: 10px; background: var(--bg-elev); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); font-size: 12.5px; pointer-events: none; } .zm-tip.pinned { pointer-events: auto; } .zm-mob { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 2px 0; font: inherit; color: var(--fg); } button.zm-mob { cursor: pointer; } button.zm-mob:hover span:first-child { text-decoration: underline; } .zm-legend { display: flex; gap: 12px; font-size: 12px; color: var(--fg-muted); align-items: center; flex-wrap: wrap; } .zm-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; } /* zone page: the mob list beside the map (vault P137); stacked (map on top) when the page is narrow */ .zs-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .zs-tools { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg-elev); } .zs-tools .input-icon { min-width: 220px; max-width: 420px; } .zs-tools .count { color: var(--fg-muted); font-size: 13px; white-space: nowrap; } .zs-tools .zm-legend { margin-left: auto; } .zs { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .zs.nomap { grid-template-columns: minmax(0, 1fr); } .zs-list { min-width: 0; min-height: 0; display: flex; border-right: 1px solid var(--border); } .zs-map { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 10px; background: var(--bg); } .zs.stack { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 46%) minmax(0, 1fr); } .zs.stack .zs-map { grid-row: 1; padding: 8px 8px 6px; } .zs.stack .zs-list { grid-row: 2; border-right: 0; border-top: 1px solid var(--border); } .cmp-grid td.dcol, .cmp-grid th.dcol { background: color-mix(in srgb, var(--bg-sunken) 70%, var(--bg-elev)); border-left: 2px solid var(--border-strong); font-weight: 700; text-align: right; min-width: 120px; } .cmp-grid td.dcol.good { color: var(--good); } .cmp-grid td.dcol.bad { color: var(--bad); } /* item card in the game's order (vault P137) */ .icard .ic-key { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; } .icard .ic-key > div { display: flex; gap: 6px; align-items: baseline; } .icard .ic-key .k { color: var(--fg-subtle); font-size: 12px; font-weight: 600; letter-spacing: .03em; } .icard .ic-key .v { font-weight: 700; font-variant-numeric: tabular-nums; } .icard .ic-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 22px; align-items: start; } .icard .ic-col { display: flex; flex-direction: column; } .icard .stat .heroic { margin-left: 6px; color: var(--t2); } .icard .stat .heroic .v { color: var(--t2); font-weight: 650; } .effects .eff .ev { flex: 1 1 auto; min-width: 0; } .effects .eff .edesc { margin: 4px 0 2px; padding: 6px 10px; border-left: 2px solid var(--border-strong); font-size: 12.5px; color: var(--fg-muted); line-height: 1.45; } .effects .eff .edesc ul { margin: 2px 0 4px; padding-left: 16px; color: var(--fg); } .effects .eff .edesc > div:first-child:not(.subtle) { margin-bottom: 4px; color: var(--fg); } /* expansion toggles (vault P137) */ .expbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--bg-elev); } .expbar .lbl { font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-subtle); margin-right: 4px; } .expbar button { height: 28px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg); color: var(--fg-muted); font: inherit; font-size: 12.5px; font-weight: 560; cursor: pointer; } .expbar button:hover { border-color: var(--border-strong); color: var(--fg); } .expbar button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .page-pad .expbar:not(.compact) { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 14px; } .expbar.compact { padding: 6px 0 0; border: 0; background: none; gap: 4px; } .expbar.compact button { height: 24px; padding: 0 9px; font-size: 12px; }