/* --------------------------------------------------------------------------- ARS Maquette Web One. A licensed commercial typeface, so the files are NOT in this repo. Drop the licensed webfont into public/fonts/ using the names below and it takes effect with no further change; until then every rule that names it falls through to the next family in the stack, which is why it is listed first rather than swapped in. font-display:swap so text is readable while it loads instead of sitting invisible. --------------------------------------------------------------------------- */ @font-face { font-family: 'ARS Maquette Web One'; src: url('../fonts/ARSMaquetteWebOne-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'ARS Maquette Web One'; src: url('../fonts/ARSMaquetteWebOne-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'ARS Maquette Web One'; src: url('../fonts/ARSMaquetteWebOne-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================== globals.css — the platform design system. Every game-specific value arrives as a custom property set by (--t-accent, --t-bg-light, --t-font-head …). Nothing here knows the name of a game. The semantic tokens below are derived from those raw values with color-mix() so a single palette produces a full light *and* dark scale. ========================================================================== */ /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } ul[class], ol[class] { list-style: none; } img, svg, video { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ========================================================================== Theme scope — light/dark resolution. The scope element carries the raw game palette. Which half is live is decided here (never in JS), from [data-theme] on with prefers-color-scheme as the default. Nested scopes work because every rule targets .theme-scope. ========================================================================== */ .theme-scope { --paper: var(--t-bg-light, #fbfaf7); --ink: var(--t-text-light, #1a1712); --card: var(--t-card-light, #ffffff); --accent: var(--t-accent, #ff5a1f); --accent-2: var(--t-accent-2, #e14812); --radius: var(--t-radius, 14px); --font-head: var(--t-font-head, system-ui, sans-serif); --font-body: 'ARS Maquette Web One', var(--t-font-body, system-ui, sans-serif); --font-mono: var(--t-font-mono, monospace); /* derived scale — recomputes automatically when --paper/--ink flip */ --paper-2: color-mix(in srgb, var(--paper) 94%, var(--ink)); --paper-3: color-mix(in srgb, var(--paper) 88%, var(--ink)); --ink-2: color-mix(in srgb, var(--ink) 84%, var(--paper)); --ink-3: color-mix(in srgb, var(--ink) 62%, var(--paper)); --ink-4: color-mix(in srgb, var(--ink) 42%, var(--paper)); --rule: color-mix(in srgb, var(--ink) 14%, transparent); --rule-2: color-mix(in srgb, var(--ink) 7%, transparent); --card-edge: color-mix(in srgb, var(--ink) 12%, transparent); --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --accent-ink: #ffffff; --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent); --shadow: 0 4px 12px color-mix(in srgb, var(--ink) 10%, transparent); --shadow-lg: 0 14px 36px color-mix(in srgb, var(--ink) 16%, transparent); --shell: 1460px; --gutter: clamp(16px, 4vw, 32px); background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 19px; line-height: 1.753; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Dark by system preference, unless the reader explicitly chose light. */ @media (prefers-color-scheme: dark) { html:not([data-theme='light']) .theme-scope { --paper: var(--t-bg-dark, #14110e); --ink: var(--t-text-dark, #f4f1ea); --card: var(--t-card-dark, #211c17); --accent: color-mix(in srgb, var(--t-accent, #ff5a1f) 82%, #ffffff); --accent-2: color-mix(in srgb, var(--t-accent-2, #e14812) 70%, #ffffff); --paper-2: color-mix(in srgb, var(--paper) 92%, var(--ink)); --paper-3: color-mix(in srgb, var(--paper) 84%, var(--ink)); --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-ink: #12100d; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.6); } } /* Explicit reader choice always wins over the system preference. */ html[data-theme='dark'] .theme-scope { --paper: var(--t-bg-dark, #14110e); --ink: var(--t-text-dark, #f4f1ea); --card: var(--t-card-dark, #211c17); --accent: color-mix(in srgb, var(--t-accent, #ff5a1f) 82%, #ffffff); --accent-2: color-mix(in srgb, var(--t-accent-2, #e14812) 70%, #ffffff); --paper-2: color-mix(in srgb, var(--paper) 92%, var(--ink)); --paper-3: color-mix(in srgb, var(--paper) 84%, var(--ink)); --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-ink: #12100d; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.6); } html[data-theme='light'] .theme-scope { --paper: var(--t-bg-light, #fbfaf7); --ink: var(--t-text-light, #1a1712); --card: var(--t-card-light, #ffffff); --accent: var(--t-accent, #ff5a1f); --accent-2: var(--t-accent-2, #e14812); --accent-ink: #ffffff; } body { margin: 0; min-height: 100vh; background: var(--t-bg-light, #fbfaf7); overflow-x: hidden; } html[data-theme='dark'] body { background: var(--t-bg-dark, #14110e); } @media (prefers-color-scheme: dark) { html:not([data-theme='light']) body { background: var(--t-bg-dark, #14110e); } } .app-root { min-height: 100vh; display: flex; flex-direction: column; } .app-root > main { flex: 1; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .shell { max-width: var(--shell); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); width: 100%; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0; font-weight: 600; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- header / footer ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--paper-2); border-bottom: 1px solid var(--rule); } .site-header-inner { display: flex; align-items: center; gap: 24px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; } .brand { font-family: var(--font-head); font-weight: 700; font-size: 22px; letter-spacing: 0.02em; color: var(--ink); display: inline-flex; align-items: baseline; gap: 6px; } .brand:hover { color: var(--ink); text-decoration: none; } .brand-dot { width: 8px; height: 8px; background: var(--accent); display: inline-block; } .site-nav { display: flex; gap: 22px; flex: 1; min-width: 0; flex-wrap: wrap; } .site-nav a { font-size: 14px; font-weight: 500; color: var(--ink-2); } .site-nav a:hover { color: var(--ink); } .header-actions { display: flex; gap: 10px; align-items: center; } .preview-flag { font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 5px 10px; border-radius: 4px; } .theme-toggle { background: transparent; border: 1px solid var(--card-edge); padding: 8px 12px; color: var(--ink-2); cursor: pointer; font-size: 13px; font-weight: 500; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; } .theme-toggle:hover { color: var(--ink); background: var(--paper-3); } .breadcrumb { padding-top: 18px; font-size: 13px; color: var(--ink-3); } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .breadcrumb a { color: var(--ink-3); } .breadcrumb a:hover { color: var(--accent); } .breadcrumb .sep { margin: 0 6px; opacity: 0.5; } .breadcrumb [aria-current='page'] { color: var(--ink); font-weight: 500; } .site-footer { background: var(--paper-2); border-top: 1px solid var(--rule); margin-top: 48px; padding: 40px 0 32px; font-size: 13.5px; color: var(--ink-3); } .site-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; margin-bottom: 28px; } .site-footer h2 { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; } .site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 7px; } .site-footer a { color: var(--ink-3); } .site-footer a:hover { color: var(--accent); } .site-footer-base { border-top: 1px solid var(--rule-2); padding-top: 18px; font-size: 12.5px; color: var(--ink-4); } /* ---------- generic pieces ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 6px 11px; border-radius: 4px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--card-edge); background: var(--card); font-size: 12.5px; font-weight: 500; color: var(--ink-2); line-height: 1.3; } .chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); flex-shrink: 0; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .empty-state { border: 1px dashed var(--card-edge); border-radius: var(--radius); background: var(--card); padding: 40px 28px; text-align: center; color: var(--ink-3); margin: 24px 0 40px; } .empty-state h2 { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--ink); margin-bottom: 8px; } .empty-state p { font-size: 14px; max-width: 52ch; margin: 0 auto; } .placeholder-art { background: linear-gradient( 135deg, color-mix(in srgb, var(--ink) 82%, var(--paper)) 0%, color-mix(in srgb, var(--ink) 52%, var(--paper)) 100% ); color: color-mix(in srgb, var(--paper) 22%, transparent); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; letter-spacing: -0.04em; } /* ========================================================================== Hero — the treatment comes from data via [data-hero] on the theme scope. ========================================================================== */ .page-hero { padding-top: 30px; padding-bottom: 46px; border-bottom: 1px solid var(--rule); position: relative; } .theme-scope[data-hero='gradient'] .page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, var(--accent-soft) 0%, transparent 62%); pointer-events: none; z-index: 0; } .theme-scope[data-hero='solid'] .page-hero { background: var(--paper-2); } .page-hero > * { position: relative; z-index: 1; } .page-hero h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(38px, 5.4vw, 62px); line-height: 1.02; letter-spacing: -0.015em; color: var(--ink); margin: 14px 0 16px; } /* ---- editorial hero (badge · section label · split headline · standfirst) ---- */ .hero-flag { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .hero-badge { display: inline-flex; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 6px 11px; border-radius: 4px; white-space: nowrap; } .hero-section { font-size: 13.5px; color: var(--ink-3); letter-spacing: 0.01em; } .hero-headline { font-family: var(--font-head); font-weight: 700; font-size: clamp(40px, 5.8vw, 68px); line-height: 0.98; letter-spacing: -0.018em; color: var(--ink); margin: 0; max-width: 21ch; text-wrap: balance; } .hl-lead { color: var(--ink); } .hl-accent { color: var(--accent); } .hero-lede { font-size: 17.5px; color: var(--ink-2); max-width: 62ch; line-height: 1.62; margin-top: 20px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 56px; align-items: start; } .hero-meta { display: flex; flex-wrap: wrap; gap: 14px 46px; margin-top: 30px; } .hero-meta-item { display: flex; flex-direction: column; gap: 4px; } .hero-meta-item .lbl { font-family: var(--font-head); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; } .hero-meta-item .val { font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--ink); letter-spacing: 0.005em; margin: 0; font-variant-numeric: tabular-nums; } /* quick-reference infobox (directory) */ .game-panel { background: var(--card); border: 1px solid var(--card-edge); border-top: 3px solid var(--ink); border-radius: 4px; box-shadow: var(--shadow); overflow: hidden; } .game-panel-head { padding: 14px 18px; background: var(--paper-3); border-bottom: 1px solid var(--rule); font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: 0.015em; color: var(--ink); } .game-panel-body { padding: 2px 18px 6px; } .game-panel-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rule-2); font-size: 13.5px; } .game-panel-row:last-child { border-bottom: 0; } .game-panel-row .k { color: var(--ink-3); } .game-panel-row .v { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } /* ========================================================================== Directory ========================================================================== */ .dir-section { padding-top: 30px; } .section-label { display: flex; align-items: center; gap: 14px; font-family: var(--font-head); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); } /* ---- featured taxonomy: the one filter promoted to icon cards ---- */ .facet-cards { display: flex; flex-wrap: wrap; gap: 10px; } .facet-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 152px; min-height: 138px; padding: 14px 14px 12px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 10px; box-shadow: var(--shadow-sm); text-align: left; cursor: pointer; overflow: hidden; transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s; } .facet-card:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); } .facet-card-swatch { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper-3); color: var(--ink-3); font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: 0.05em; } .facet-card-label { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; line-height: 1.16; letter-spacing: 0.01em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .facet-card-count { margin-top: auto; padding-top: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); } .facet-card[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } .facet-card[aria-pressed='true']::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); } .facet-card[aria-pressed='true'] .facet-card-count { color: var(--accent); font-weight: 600; } .facet-card[aria-pressed='true'] .facet-card-swatch { border-color: var(--accent); } .facet-card:disabled { opacity: 0.42; cursor: not-allowed; } .facet-rows { display: flex; flex-direction: column; gap: 18px; } .facet { margin-bottom: 0; } .facet-pills { display: flex; flex-wrap: wrap; gap: 8px; } .facet-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--card-edge); color: var(--ink-2); padding: 7px 13px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 500; transition: border-color 0.15s, background 0.15s, color 0.15s; } .facet-pill:hover { border-color: var(--accent); color: var(--ink); } .facet-pill[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 600; } .facet-pill:disabled { opacity: 0.4; cursor: not-allowed; } .facet-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); } .facet-pill[aria-pressed='true'] .facet-count { color: var(--accent); } .control-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 26px 0 14px; } .cat-tabs { display: flex; border: 1px solid var(--card-edge); background: var(--card); overflow-x: auto; flex: 1 1 460px; min-width: 0; border-radius: 8px; box-shadow: var(--shadow-sm); } .cat-tab { background: transparent; border: 0; padding: 12px 16px; font-weight: 500; font-size: 14px; color: var(--ink-2); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; } .cat-tab:hover { color: var(--ink); background: var(--paper-3); } .cat-tab[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--accent); background: var(--paper-3); font-weight: 600; } .cat-tab .count { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); margin-left: 8px; } .cat-tab[aria-selected='true'] .count { color: var(--accent); } .dir-search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--card-edge); padding: 8px 12px; border-radius: 8px; min-width: 220px; flex: 1; } .dir-search input { background: transparent; border: 0; outline: none; flex: 1; min-width: 0; color: var(--ink); font-size: 14px; } .select-control { background: var(--card); border: 1px solid var(--card-edge); padding: 9px 12px; color: var(--ink); font-size: 14px; cursor: pointer; border-radius: 8px; } .view-toggle { display: flex; border: 1px solid var(--card-edge); background: var(--card); border-radius: 8px; overflow: hidden; } .view-btn { background: transparent; border: 0; padding: 9px 15px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-3); } .view-btn[aria-pressed='true'] { background: var(--ink); color: var(--paper); } .results-meta { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); padding: 2px 0 18px; } .results-meta .count { color: var(--ink); font-weight: 600; } .link-btn { background: transparent; border: 0; color: var(--accent); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 4px 2px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); gap: 20px; padding-bottom: 48px; list-style: none; } .entity-card { position: relative; background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .entity-card:hover, .entity-card:focus-within { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); } /* ---- card visual: artwork or a deliberate monogram plate ---- */ .entity-card-vis { aspect-ratio: 4 / 3; position: relative; overflow: hidden; width: 100%; border-bottom: 1px solid var(--rule); background-color: var(--paper-3); background-image: repeating-linear-gradient( 135deg, transparent 0 9px, color-mix(in srgb, var(--ink) 4%, transparent) 9px 10px ); } .entity-card-art { position: absolute; inset: 0; display: grid; place-items: center; } .entity-card-art img { width: 100%; height: 100%; object-fit: cover; } .entity-card-monogram { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); font-family: var(--font-head); font-weight: 700; font-size: 34px; letter-spacing: 0.05em; color: color-mix(in srgb, var(--ink) 40%, var(--paper)); } .entity-card-tier { position: absolute; top: 10px; left: 10px; z-index: 3; min-width: 30px; text-align: center; background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; } .entity-card-tier[data-top='true'] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .entity-card-tag { position: absolute; top: 10px; right: 10px; z-index: 3; max-width: 62%; display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 6px; box-shadow: var(--shadow-sm); padding: 5px 9px; font-size: 11.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .art-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--card-edge); background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; padding: 0; transition: background 0.15s, color 0.15s, border-color 0.15s; } .art-nav:hover { background: var(--card); border-color: var(--accent); color: var(--accent); } .art-nav.prev { left: 8px; } .art-nav.next { right: 8px; } .art-counter { position: absolute; right: 10px; bottom: 10px; z-index: 3; background: color-mix(in srgb, var(--card) 90%, transparent); border: 1px solid var(--card-edge); border-radius: 999px; padding: 3px 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); } .entity-card-view { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--card-edge); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); box-shadow: var(--shadow-sm); transition: background 0.15s, color 0.15s, border-color 0.15s; } .entity-card-view:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .entity-card-body { padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .entity-card-kicker { display: block; font-family: var(--font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); } .entity-card-name { display: block; font-family: var(--font-head); font-weight: 700; font-size: 21px; line-height: 1.1; letter-spacing: -0.005em; color: var(--ink); } .entity-card-name a { color: var(--ink); } .entity-card-name a:hover { color: var(--accent); text-decoration: none; } .entity-card-summary { font-size: 13px; color: var(--ink-3); line-height: 1.52; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .entity-card-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 12px 16px; margin: auto 0 0; padding-top: 13px; border-top: 1px solid var(--rule-2); } .entity-card-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .entity-card-field dd { margin: 0; } .entity-card-field .k { font-family: var(--font-head); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); } .entity-card-field .v { font-size: 13px; color: var(--ink); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } .entity-card-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--rule-2); background: var(--paper-2); font-family: var(--font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .entity-card-cta:hover { background: var(--paper-3); color: var(--accent); text-decoration: none; } .table-wrap { overflow-x: auto; border: 1px solid var(--card-edge); border-radius: var(--radius); background: var(--card); margin-bottom: 40px; } .dir-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; } .dir-table th { text-align: left; padding: 12px 16px; background: var(--paper-3); border-bottom: 1px solid var(--rule); font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .dir-table th button { background: transparent; border: 0; cursor: pointer; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 6px; padding: 0; } .dir-table th button:hover { color: var(--ink); } .dir-table th[aria-sort]:not([aria-sort='none']) button { color: var(--accent); } .dir-table td { padding: 12px 16px; border-bottom: 1px solid var(--rule-2); color: var(--ink-2); vertical-align: top; } .dir-table tbody tr:hover { background: var(--paper-3); } .dir-table .name-cell a { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--ink); } .dir-table .name-cell a:hover { color: var(--accent); } /* ========================================================================== Modal / lightbox ========================================================================== */ .modal-overlay { position: fixed; inset: 0; background: color-mix(in srgb, #000 62%, transparent); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 90; } .modal { background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(680px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; overflow: hidden; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--rule); background: var(--paper-2); } .modal-head h2 { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--ink); line-height: 1.15; } .modal-close { background: transparent; border: 1px solid var(--card-edge); color: var(--ink-2); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .modal-close:hover { border-color: var(--accent); color: var(--accent); } .modal-body { padding: 20px; overflow-y: auto; } .modal-foot { padding: 14px 20px; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; gap: 10px; background: var(--paper-2); } .btn-primary { background: var(--accent); color: var(--accent-ink); border: 0; padding: 10px 18px; border-radius: 8px; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .btn-primary:hover { background: var(--accent-2); color: var(--accent-ink); text-decoration: none; } .lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 14px; } .lightbox img { max-width: min(1100px, 100%); max-height: 76vh; object-fit: contain; border-radius: 8px; } .lightbox-caption { color: #fff; font-size: 13.5px; text-align: center; max-width: 70ch; } .lightbox-nav { display: flex; gap: 12px; align-items: center; } .lightbox-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } .lightbox-btn:hover { background: rgba(255, 255, 255, 0.22); } .lightbox-counter { color: rgba(255, 255, 255, 0.75); font-family: var(--font-mono); font-size: 12px; } /* ========================================================================== Detail article ========================================================================== */ .detail-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; } .detail-hero h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(40px, 6vw, 68px); line-height: 0.98; letter-spacing: -0.02em; color: var(--ink); margin: 14px 0 18px; } .detail-summary { font-size: 18.5px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; } .article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 52px; align-items: start; padding-top: 34px; padding-bottom: 48px; } .article-main { min-width: 0; } .article-side { min-width: 0; display: flex; flex-direction: column; gap: 20px; /* The rail must be able to grow past the viewport for sticky to have room to travel; without this the grid stretches it and position:sticky never fires. */ align-self: start; } /* Long-form article typography. These pages now run to 10,000+ words, and at that length the old settings stopped working: 16px text at 74ch is a wall, and a section that ended with nothing but 44px of air gave the reader no sense of where one topic stopped and the next began. The measure is tightened toward 68 characters, the scale is opened up so h2 / h3 / body are unmistakably three different levels, and each section is closed by a hairline rather than left to float. */ .wiki-section { margin-bottom: 52px; padding-bottom: 44px; border-bottom: 1px solid var(--rule); } .wiki-section:last-of-type { border-bottom: 0; } .wiki-section > h2 { font-family: var(--font-head); font-weight: 700; /* Was clamp(24px, 3vw, 30px) -- against 19px body that is not a heading, it is emphasised text. */ font-size: clamp(29px, 3.4vw, 38px); color: var(--ink); margin-bottom: 16px; line-height: 1.2; display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); letter-spacing: -0.01em; scroll-margin-top: 96px; } .wiki-section > h2::before { content: ''; width: 6px; height: 24px; background: var(--accent); border-radius: 2px; flex-shrink: 0; } .wiki-section h3 { font-family: var(--font-head); font-weight: 700; /* 21px sat two points above the body size and read as a bold paragraph. */ font-size: 25px; line-height: 1.25; color: var(--ink); margin: 38px 0 12px; letter-spacing: -0.005em; scroll-margin-top: 96px; } /* A short accent tick above each sub-heading: at this page length the reader needs a visible marker that a new part has started, without another rule competing with the section's own h2 underline. */ .wiki-section h3::before { content: ''; display: block; width: 26px; height: 3px; background: var(--accent); border-radius: 2px; margin-bottom: 12px; opacity: 0.85; } .wiki-section h3:first-child { margin-top: 4px; } .wiki-section p { color: var(--ink-2); line-height: 1.75; margin-bottom: 17px; font-size: 17px; max-width: 78ch; } /* The opening paragraph of a section sets its tone; giving it a touch more size separates it from the body without needing a second heading level. */ .wiki-section > p.lead, .wiki-section > .block-bare > p:first-child { font-size: 18.5px; color: var(--ink); } .wiki-section > ul, .wiki-section > ol { margin: 0 0 16px 22px; color: var(--ink-2); line-height: 1.75; font-size: 15.5px; max-width: 74ch; } .wiki-section li { margin-bottom: 6px; } .spoiler-tag { font-family: var(--font-head); font-weight: 700; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 4px; margin-left: auto; flex-shrink: 0; } .lead-para { font-size: 17.5px; color: var(--ink); font-weight: 500; line-height: 1.6; margin-bottom: 22px; padding: 18px 22px; background: var(--card); border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; max-width: none; } .fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 18px 0; list-style: none; } .fact-card { background: var(--card); border: 1px solid var(--card-edge); border-radius: 10px; padding: 15px 17px; } .fact-card .lbl { font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .fact-card .val { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--ink); line-height: 1.25; } .fact-card .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; } .row-list { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; list-style: none; } .row-item { display: flex; align-items: flex-start; gap: 14px; padding: 13px 17px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 10px; transition: border-color 0.15s; } .row-item:hover { border-color: var(--accent); } .row-num { font-family: var(--font-mono); font-weight: 600; font-size: 12px; color: var(--ink-4); flex-shrink: 0; min-width: 26px; padding-top: 2px; } .row-body { flex: 1; min-width: 0; } .row-title { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.3; } .row-detail { font-size: 13px; color: var(--ink-3); line-height: 1.55; margin-top: 4px; } .row-tag { font-family: var(--font-head); font-weight: 700; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 9px; border-radius: 4px; flex-shrink: 0; align-self: flex-start; } .pull-quote { padding: 22px 28px 22px 38px; margin: 26px 0; background: var(--paper-2); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; position: relative; } .pull-quote::before { content: '\201C'; position: absolute; top: -6px; left: 16px; font-family: var(--font-head); font-size: 74px; color: var(--accent); line-height: 1; font-weight: 700; opacity: 0.35; } .pull-quote p { font-family: var(--font-head); font-weight: 500; font-size: 19px; line-height: 1.42; color: var(--ink); font-style: italic; margin-bottom: 8px; position: relative; } .pull-quote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; } .quote-group-title { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 6px; } .callout { border: 1px solid var(--card-edge); border-left: 4px solid var(--accent); background: var(--card); border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 18px 0; } .callout .callout-title { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .callout p { margin: 0; font-size: 15px; } .callout[data-tone='warning'], .callout[data-tone='spoiler'] { border-left-color: var(--ink-3); background: var(--paper-2); } .callout[data-tone='warning'] .callout-title, .callout[data-tone='spoiler'] .callout-title { color: var(--ink-2); } .marker-list { list-style: none; margin: 14px 0; } .marker-list li { padding: 13px 0 13px 28px; border-bottom: 1px solid var(--rule-2); position: relative; line-height: 1.6; font-size: 15px; color: var(--ink-2); } .marker-list li::before { content: '\2605'; position: absolute; left: 0; top: 13px; color: var(--accent); font-size: 13px; } .marker-list li:last-child { border-bottom: 0; } .split-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 18px 0; } .split-col h3 { margin-top: 0; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .split-col ul { margin-left: 20px; color: var(--ink-2); line-height: 1.7; font-size: 15px; } .rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 14px 0 22px; list-style: none; } .rel-card { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 16px 18px; display: flex; gap: 13px; align-items: flex-start; transition: border-color 0.15s, transform 0.15s; } a.rel-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; } .rel-avatar { width: 42px; height: 42px; border-radius: 10px; font-size: 15px; flex-shrink: 0; } .rel-body { display: block; flex: 1; min-width: 0; } .rel-name { display: block; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 2px; line-height: 1.2; } .rel-role { display: block; font-size: 10.5px; color: var(--accent); font-family: var(--font-head); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 5px; } .rel-desc { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; } .rel-group-title { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); margin: 20px 0 4px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 18px 0; list-style: none; } .gallery-item { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; padding: 0; border: 1px solid var(--card-edge); background: var(--paper-3); cursor: pointer; width: 100%; font-size: 38px; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; } .gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; color: #fff; font-size: 11.5px; line-height: 1.35; padding: 20px 10px 8px; text-align: left; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78)); } .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; margin: 18px 0; box-shadow: var(--shadow); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .data-table-wrap { overflow-x: auto; border: 1px solid var(--card-edge); border-radius: 10px; margin: 18px 0; background: var(--card); } .data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; } .data-table th, .data-table td { padding: 11px 15px; text-align: left; border-bottom: 1px solid var(--rule-2); } .data-table th { background: var(--paper-3); font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .data-table td { color: var(--ink-2); } .data-table tbody th { background: transparent; color: var(--ink); font-size: 13px; letter-spacing: 0; text-transform: none; } .faq-item { border-bottom: 1px solid var(--rule-2); padding: 14px 0; } .faq-item:last-child { border-bottom: 0; } .faq-q { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 6px; } .faq-a { font-size: 15px; color: var(--ink-2); line-height: 1.65; margin: 0; } .source-list { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; } .source-list li { padding-left: 22px; position: relative; color: var(--ink-3); line-height: 1.5; } .source-list li::before { content: '\2197'; position: absolute; left: 0; color: var(--ink-4); } .source-official { font-family: var(--font-head); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-left: 6px; } /* ---------- infobox ---------- */ .infobox { background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .infobox-image { aspect-ratio: 4 / 5; position: relative; font-size: 96px; overflow: hidden; } .infobox-image img { width: 100%; height: 100%; object-fit: cover; } .infobox-title { background: var(--paper-2); padding: 13px 16px; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 8px; } .infobox-title::before { content: ''; width: 8px; height: 8px; background: var(--accent); border-radius: 2px; flex-shrink: 0; } .infobox-section-title { font-family: var(--font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding: 12px 16px 2px; } .infobox dl { margin: 0; } .infobox-row { display: flex; padding: 9px 16px; font-size: 13px; gap: 10px; align-items: flex-start; line-height: 1.45; border-bottom: 1px solid var(--rule-2); } .infobox-row:last-child { border-bottom: 0; } .infobox-row dt { flex: 0 0 88px; color: var(--ink-3); font-weight: 500; font-family: var(--font-head); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 2px; } .infobox-row dd { flex: 1; margin: 0; color: var(--ink); font-weight: 500; min-width: 0; } .infobox-terms { padding: 10px 16px 14px; display: flex; flex-wrap: wrap; gap: 6px; } /* ---------- table of contents ---------- */ .side-toc { position: sticky; top: 84px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 15px 13px; /* Room for the sticky site header plus a little breathing space, so a long contents list scrolls inside itself instead of running off screen. */ max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain; } .side-toc-title { font-family: var(--font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 11px; padding-bottom: 9px; border-bottom: 1px solid var(--rule); } .side-toc ol { list-style: none; counter-reset: toc; } .side-toc li { counter-increment: toc; } .side-toc a { display: flex; gap: 9px; padding: 7px 11px; font-size: 13px; color: var(--ink-3); border-radius: 7px; border-left: 2px solid transparent; line-height: 1.35; } .side-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); font-weight: 600; padding-top: 2px; } .side-toc a:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; } .side-toc a[aria-current='true'] { background: var(--accent-soft); color: var(--ink); font-weight: 600; border-left-color: var(--accent); } .side-toc a[aria-current='true']::before { color: var(--accent); } .pill-toc { display: none; position: sticky; top: 60px; z-index: 40; padding: 10px 0; background: var(--paper); } .pill-toc-toggle { display: inline-flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--card-edge); color: var(--ink); padding: 10px 16px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sm); max-width: 100%; } .pill-toc-active { padding-left: 10px; border-left: 1px solid var(--card-edge); color: var(--ink-3); font-weight: 500; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pill-toc-panel { position: absolute; top: calc(100% - 2px); left: 0; width: min(300px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px 8px; z-index: 3; max-height: 60vh; overflow-y: auto; } .pill-toc-panel ol { list-style: none; counter-reset: toc; } .pill-toc-panel li { counter-increment: toc; } .pill-toc-panel a { display: flex; gap: 9px; padding: 8px 11px; font-size: 13.5px; color: var(--ink-2); border-radius: 8px; line-height: 1.35; } .pill-toc-panel a:hover { background: var(--paper-3); text-decoration: none; } .pill-toc-panel a[aria-current='true'] { background: var(--accent-soft); font-weight: 600; color: var(--ink); } /* ---------- games index ---------- */ .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding: 24px 0 40px; list-style: none; } .game-card { display: block; background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); transition: transform 0.15s, border-color 0.15s; } .game-card:hover { transform: translateY(-2px); border-color: var(--accent); text-decoration: none; } .game-card h2 { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--ink); line-height: 1.15; margin-bottom: 8px; } .game-card p { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; } .prose-narrow { max-width: 70ch; padding: 26px 0 40px; } .prose-narrow p { color: var(--ink-2); line-height: 1.7; margin-bottom: 14px; } .prose-narrow h2 { font-family: var(--font-head); font-weight: 700; font-size: 26px; color: var(--ink); margin: 26px 0 12px; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1080px) { .hero-grid, .detail-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .article-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; } .article-side { order: -1; } .side-toc { display: none; } .pill-toc { display: block; } .infobox { position: static; max-width: 460px; margin-bottom: 28px; } } @media (max-width: 640px) { .theme-scope { font-size: 15.5px; } .site-nav { gap: 14px; order: 3; width: 100%; } .hero-meta { gap: 14px 24px; } .hero-meta-item .val { font-size: 19px; } .control-row { gap: 10px; } .facet-cards { gap: 8px; } .facet-card { width: calc(50% - 4px); min-height: 116px; } .dir-search { min-width: 100%; } .rel-grid, .fact-grid, .split-cols { grid-template-columns: minmax(0, 1fr); } .modal { max-height: 92vh; } } @media print { .site-header, .site-footer, .side-toc, .pill-toc, .breadcrumb { display: none !important; } } /* Backlink relation label — a muted chip beside the entity name, never glued to it. Kept distinct from .entity-link-note (which is a longer inline note). */ .entity-link-rel { margin-left: 0.5rem; padding: 0.05rem 0.4rem; border: 1px solid var(--rule, rgba(0, 0, 0, 0.14)); border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.02em; text-transform: lowercase; color: var(--ink-soft, #6b6459); white-space: nowrap; } /* ========================================================================== Showcase — /showcase. Every game and every collection on one page. Nothing here names a game: the visible differences between two cards come from the custom properties each emits (a game card is painted in its own --paper / --card / --accent) and from the counts and keys the plan data supplies. Adding a game adds a card; adding an entity type adds a row. ========================================================================== */ .showcase-section { padding-top: 26px; padding-bottom: 12px; } .showcase-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; list-style: none; padding: 0 0 34px; margin: 0; } /* The card IS a theme scope, so it carries the game's own paper colour. */ .showcase-game { height: 100%; border: 1px solid var(--card-edge); border-top: 3px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; overflow: hidden; } .showcase-game-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .showcase-swatch { width: 42px; height: 42px; flex-shrink: 0; border-radius: calc(var(--radius) / 2); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); box-shadow: 0 0 0 1px var(--card-edge); } .showcase-game-id { min-width: 0; } .showcase-game-title { font-family: var(--font-head); font-weight: 700; font-size: 19px; line-height: 1.2; color: var(--ink); margin: 0; } .showcase-game-title a { color: inherit; } .showcase-game-title a:hover { color: var(--accent); } .showcase-game-meta, .showcase-collection-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-4); margin: 5px 0 0; } /* URL segments are printed verbatim — they are the point of the page. */ .showcase-seg { font-family: var(--font-mono); font-size: 12px; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 6px; } .showcase-collection-list { list-style: none; display: grid; gap: 12px; padding: 0; margin: 0; } .showcase-collection { background: var(--card); border: 1px solid var(--card-edge); border-radius: calc(var(--radius) / 1.4); padding: 13px 14px; } .showcase-collection-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .showcase-collection-title { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; color: var(--ink); margin: 0; } .showcase-collection-title a { color: inherit; } .showcase-collection-title a:hover { color: var(--accent); } .showcase-count { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1; color: var(--accent); } .showcase-chip-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 10px; } .showcase-chip-label { font-family: var(--font-head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); min-width: 108px; } .showcase-chip-group .chip { font-size: 11.5px; padding: 3px 9px; background: var(--paper-2); } .chip.showcase-chip-muted { color: var(--ink-4); background: transparent; border-style: dashed; } .showcase-empty-inline { font-size: 12px; color: var(--ink-4); font-style: italic; } .showcase-note { font-size: 13px; color: var(--ink-3); margin: 0; } .showcase-entity-card .entity-card-body { padding-top: 16px; } .showcase-badges { margin: 0 0 9px; } @media (max-width: 700px) { .showcase-game-grid { grid-template-columns: minmax(0, 1fr); } .showcase-chip-label { min-width: 100%; } } /* ========================================================================== Guide & equipment blocks ========================================================================== Everything below serves the mission / weapon page shapes. It is styled once, here, against the same tokens as the rest of the platform, and inherits each game's palette through --accent / --paper / --ink like every other block. No rule in this file names a game or an entity type. ========================================================================== */ /* Body copy scales with the reader's text-size control; headings, chrome and tabular figures deliberately do not, so the page keeps its proportions. */ .theme-scope { --reader-scale: 1; } .wiki-section p, .wiki-section > ul, .wiki-section > ol, .takeaway, .req-body, .objective-body, .check-body, .fail-body, .phase-summary, .row-detail { font-size: calc(1em * var(--reader-scale, 1)); } /* ---------- inline entity links in prose ---------- */ /* Links in body copy read as links: accent colour AND an underline. These previously used --ink with a faint tinted border, which left the underline doing the work alone -- readable as emphasis, not as something clickable. Kept on var(--accent) rather than a literal orange so the per-game themes (Tekken's red, BG3's burnt orange) stay coherent, and so the dark-mode lightening already defined on the token carries over instead of leaving #ff5a1f to fail contrast on a dark ground. */ .inline-entity-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); transition: color 0.12s ease, text-decoration-color 0.12s ease; } .inline-entity-link:hover { color: var(--accent-2); text-decoration-color: var(--accent-2); text-decoration-thickness: 2px; } /* ---------- hoisted blocks (hero / rail) ---------- */ .block-bare { margin: 0; } .detail-hero .block-bare { margin-top: 22px; } /* ---------- eyebrow tag strip ---------- */ .tag-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-bottom: 12px; } .tag-strip-item { font-family: var(--font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .tag-strip-item + .tag-strip-item::before { content: "\00b7"; margin: 0 9px; color: var(--ink-4); } .detail-headline { font-family: var(--font-head); font-weight: 700; font-size: clamp(34px, 6vw, 62px); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 14px; } .detail-headline .hl-accent { color: var(--accent); } .detail-headline .hl-lead { color: var(--ink); } /* ---------- key takeaways ---------- */ .takeaway-intro { color: var(--ink-3); } .takeaway-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; max-width: 78ch; } .takeaway { position: relative; padding-left: 22px; color: var(--ink-2); line-height: 1.7; } .takeaway::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .takeaway-title { color: var(--ink); font-weight: 700; } .takeaway-jump { font-size: 0.92em; white-space: nowrap; } /* ---------- stat block ---------- */ .stat-block { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 1px; background: var(--card-edge); border: 1px solid var(--card-edge); border-radius: 10px; overflow: hidden; } .stat-block[data-layout="grid"] { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } /* The strip is the wide banner under a guide's standfirst: equal columns that collapse to a grid rather than shrinking each cell past legibility. */ .stat-block[data-layout="strip"] { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .stat-item { background: var(--card); padding: 14px 17px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .stat-item[data-emphasis="true"] .stat-value { color: var(--accent); } .stat-label { font-family: var(--font-head); font-weight: 700; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); } .stat-value { font-family: var(--font-head); font-weight: 700; font-size: 21px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .stat-unit { font-size: 11px; font-weight: 600; color: var(--ink-4); margin-left: 5px; letter-spacing: 0.02em; } .stat-bar { display: block; height: 4px; border-radius: 2px; background: var(--paper-3); overflow: hidden; margin-top: 2px; } .stat-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; } .stat-note { font-size: 12px; color: var(--ink-4); line-height: 1.45; } .stat-footnote { font-size: 13px; color: var(--ink-4); } /* ---------- requirements ---------- */ .req-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .req-item { display: flex; align-items: flex-start; gap: 13px; background: var(--card); border: 1px solid var(--card-edge); border-left: 3px solid var(--ink-4); border-radius: 8px; padding: 12px 15px; } .req-item[data-priority="required"] { border-left-color: var(--accent); } .req-item[data-priority="recommended"] { border-left-color: color-mix(in srgb, var(--accent) 50%, var(--paper)); } .req-flag { font-family: var(--font-head); font-weight: 700; font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; min-width: 86px; flex-shrink: 0; } .req-item[data-priority="required"] .req-flag { color: var(--accent); } .req-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .req-label { font-weight: 600; color: var(--ink); } .req-detail { color: var(--ink-3); font-size: 0.94em; line-height: 1.6; } /* ---------- objectives / checklist / failure ---------- */ .objective-list, .checklist, .fail-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: objective; } .objective, .check-item, .fail-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 8px; } .objective-mark { counter-increment: objective; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: var(--font-head); font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .objective-mark::before { content: counter(objective); } .check-box { flex-shrink: 0; width: 17px; height: 17px; border: 2px solid var(--ink-4); border-radius: 4px; margin-top: 3px; } .fail-mark { flex-shrink: 0; width: 17px; height: 17px; border-radius: 50%; margin-top: 3px; background: color-mix(in srgb, #c4452f 22%, var(--card)); border: 2px solid color-mix(in srgb, #c4452f 65%, var(--card)); } .objective-body, .check-body, .fail-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .objective-text, .check-text, .fail-title { color: var(--ink); font-weight: 500; line-height: 1.55; } .objective-detail, .check-note, .fail-detail { color: var(--ink-3); font-size: 0.92em; line-height: 1.6; } /* ---------- walkthrough step extras ---------- */ .walkthrough .row-item[data-checkpoint="true"] { border-left: 3px solid var(--accent); } .step-objective { font-family: var(--font-head); font-weight: 700; font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; } .step-aside { display: flex; align-items: baseline; gap: 9px; margin-top: 8px; padding: 8px 12px; border-radius: 6px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); background: var(--paper-2); border-left: 3px solid var(--ink-4); } .step-aside[data-kind="tip"] { border-left-color: color-mix(in srgb, var(--accent) 70%, var(--paper)); } .step-aside[data-kind="warning"] { border-left-color: #c4452f; } .step-aside-label { font-family: var(--font-head); font-weight: 700; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); flex-shrink: 0; } .step-aside[data-kind="warning"] .step-aside-label { color: #c4452f; } .row-tags { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; flex-shrink: 0; } .row-tag[data-tone="warn"] { color: #c4452f; background: color-mix(in srgb, #c4452f 14%, transparent); } .row-tag[data-tone="ok"] { color: #3f8b5f; background: color-mix(in srgb, #3f8b5f 14%, transparent); } /* ---------- encounter phases ---------- */ .phase-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .phase { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 17px 19px; } .phase-head { display: flex; align-items: flex-start; gap: 13px; } .phase-num { flex-shrink: 0; width: 27px; height: 27px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--font-head); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; } .phase-title-wrap { flex: 1; min-width: 0; } .wiki-section .phase-name { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); margin: 2px 0 0; } .phase-trigger { font-size: 12.5px; color: var(--ink-4); margin: 3px 0 0; } .phase-hp { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; flex-shrink: 0; } .wiki-section .phase-summary { margin: 12px 0 0; color: var(--ink-2); } .attack-list { list-style: none; margin: 13px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .attack { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 9px 13px; background: var(--paper-2); border-radius: 7px; font-size: 14px; line-height: 1.55; } .attack-name { font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--ink); width: 100%; } .attack-part { color: var(--ink-2); } .attack-part .k { font-family: var(--font-head); font-weight: 700; font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-4); margin-right: 5px; } .wiki-section .phase-tips { margin: 13px 0 0 4px; font-size: 14px; } /* ---------- progression rail ---------- */ .rail { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 17px 19px; margin: 18px 0; } .rail-trail { display: flex; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--ink-3); margin-bottom: 13px; } .rail-crumb:last-child { color: var(--ink); font-weight: 600; } .rail-sep { margin: 0 7px; color: var(--ink-4); } .rail-bar { display: block; height: 3px; border-radius: 2px; background: var(--paper-3); overflow: hidden; } .rail-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; } .rail-segments { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 9px; } .rail-segment { display: flex; flex-direction: column; } .rail-segment-label { font-family: var(--font-head); font-weight: 700; font-size: 11px; color: var(--ink-2); } .rail-segment-sub { font-size: 11px; color: var(--ink-4); } .rail-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .rail-step-inner { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 11px 13px; border: 1px solid var(--card-edge); border-radius: 9px; background: var(--paper-2); color: var(--ink); text-decoration: none; } a.rail-step-inner:hover { border-color: var(--accent); text-decoration: none; } .rail-step[data-current="true"] .rail-step-inner { border-color: var(--accent); background: var(--accent-soft); } .rail-step-num { font-family: var(--font-head); font-weight: 700; font-size: 10px; color: var(--ink-4); } .rail-step[data-current="true"] .rail-step-num { color: var(--accent); } .rail-step-name { font-family: var(--font-head); font-weight: 700; font-size: 13.5px; line-height: 1.25; color: var(--ink); } .rail-step-kind { font-family: var(--font-head); font-weight: 700; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .rail-step-note { font-size: 11.5px; color: var(--ink-4); line-height: 1.45; } .rail-caption { font-size: 12.5px; color: var(--ink-4); margin: 13px 0 0; } /* ---------- loadout options ---------- */ .loadout-group + .loadout-group { margin-top: 22px; } .wiki-section .loadout-group-title { margin-top: 0; } .loadout-group-note { color: var(--ink-3); font-size: 0.94em; } .loadout-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; } .loadout-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 15px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 9px; } .loadout-name { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--ink); } .loadout-effect { font-size: 13px; color: var(--ink-2); line-height: 1.55; } .loadout-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 2px; } .loadout-cost, .loadout-unlock { font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; } .loadout-cost { color: var(--accent); } .loadout-unlock { color: var(--ink-4); } /* Numeric table cells line up when they are tabular. */ .data-table .num-cell { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Strengths / weaknesses / best uses read better colour-keyed. */ .split-col[data-tone="good"] h3 { color: #3f8b5f; } .split-col[data-tone="bad"] h3 { color: #c4452f; } .split-col[data-tone="use"] h3 { color: var(--accent); } /* ========================================================================== Chrome: reading controls, quick-reference links, TOC filter, side rail card ========================================================================== */ .reading-controls { display: inline-flex; align-items: center; gap: 1px; background: var(--paper-2); border: 1px solid var(--card-edge); border-radius: 8px; padding: 2px; } .reading-btn { background: transparent; border: 0; color: var(--ink-2); font-family: var(--font-head); font-weight: 700; line-height: 1; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; } .reading-btn.is-reset { font-size: 14px; } .reading-btn:hover:not(:disabled) { background: var(--card); color: var(--accent); } .reading-btn:disabled { opacity: 0.4; cursor: default; } .game-panel-row .v.is-link { color: var(--ink); display: inline-flex; align-items: center; gap: 5px; } .game-panel-row .v.is-link:hover { color: var(--accent); text-decoration: none; } .link-arrow { font-size: 10px; color: var(--accent); } .side-toc-search { margin-bottom: 10px; } .side-toc-search input { width: 100%; background: var(--paper-2); border: 1px solid var(--card-edge); border-radius: 7px; color: var(--ink); font: inherit; font-size: 12.5px; padding: 6px 9px; } .side-toc-search input::placeholder { color: var(--ink-4); } .side-toc-empty { font-size: 12px; color: var(--ink-4); margin: 6px 2px; } .rail-card { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; overflow: hidden; margin-bottom: 16px; } .rail-card-head { font-family: var(--font-head); font-weight: 700; font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); padding: 12px 14px; border-bottom: 1px solid var(--rule); background: var(--paper-2); } .rail-card-body { padding: 10px 12px; } /* Inside the narrow rail the shared grids collapse to one column. */ .rail-card-body .rel-grid, .rail-card-body .entity-link-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; } .rail-card-body .rel-card { padding: 8px 10px; } .rail-card-body .rel-avatar { width: 30px; height: 30px; font-size: 11px; } /* ========================================================================== Slide-over drawer (directory quick view) ========================================================================== */ .drawer-overlay { position: fixed; inset: 0; background: color-mix(in srgb, #000 55%, transparent); display: flex; justify-content: flex-end; z-index: 90; } .drawer { background: var(--card); color: var(--ink); border-left: 1px solid var(--card-edge); box-shadow: var(--shadow-lg); width: min(620px, 100%); height: 100%; display: flex; flex-direction: column; overflow: hidden; } .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--rule); background: var(--paper-2); flex-shrink: 0; } .drawer-crumb { font-size: 12.5px; color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-body { padding: 20px; overflow-y: auto; flex: 1; } .drawer-foot { padding: 14px 20px; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; gap: 10px; background: var(--paper-2); flex-shrink: 0; } .quickview-top { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 18px; align-items: start; } .quickview-art { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--paper-3); display: flex; align-items: center; justify-content: center; } .quickview-art img { width: 100%; height: 100%; object-fit: cover; } .quickview-name { font-family: var(--font-head); font-weight: 700; font-size: clamp(24px, 4vw, 34px); line-height: 1.08; color: var(--ink); margin: 2px 0 10px; } .quickview-tier { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 6px 11px; border-radius: 6px; flex-shrink: 0; } .quickview-section { margin-top: 24px; } .quickview-section h3 { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 9px; padding-left: 11px; border-left: 4px solid var(--accent); line-height: 1.2; } .quickview-section p { color: var(--ink-2); line-height: 1.7; margin: 0; } .quickview-section .fact-grid { margin: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } @media (max-width: 620px) { .quickview-top { grid-template-columns: minmax(0, 1fr); } .quickview-tier { justify-self: start; } .req-item { flex-direction: column; gap: 6px; } .req-flag { min-width: 0; padding-top: 0; } } /* ========================================================================== Pull quotes and lead-in takeaways ========================================================================== */ /* Quotes used to sit in one block near the foot of the page, which on a long article is where they go unread. They are now dealt between sections, set against a tinted panel so the eye catches them while scrolling. */ .pull-quote { margin: 40px 0 44px; padding: 26px 30px; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 6px 6px 0; max-width: 78ch; } .pull-quote blockquote { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.45; color: var(--ink); font-style: italic; text-wrap: balance; } .pull-quote blockquote::before { content: '\201C'; color: var(--accent); font-size: 1.6em; line-height: 0; vertical-align: -0.28em; margin-right: 4px; } .pull-quote figcaption { margin-top: 14px; font-family: var(--font-head); font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3, var(--ink-2)); } /* Key takeaways lead the article, so they are framed rather than left to read as just another list. Keyed off data-block-type, which every section already carries. */ .article-main > .wiki-section[data-block-type='key_takeaways'] { padding: 24px 30px 28px; border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: 8px; background: var(--card); margin-bottom: 48px; } .article-main > .wiki-section[data-block-type='key_takeaways'] > h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; font-size: clamp(20px, 2.4vw, 24px); } .article-main > .wiki-section[data-block-type='key_takeaways'] .takeaway-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; max-width: none; } .article-main > .wiki-section[data-block-type='key_takeaways'] .takeaway { margin: 0; padding-left: 22px; position: relative; line-height: 1.62; font-size: 16.5px; color: var(--ink-2); } .article-main > .wiki-section[data-block-type='key_takeaways'] .takeaway::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .article-main > .wiki-section[data-block-type='key_takeaways'] .takeaway-title { color: var(--ink); } @media (max-width: 900px) { .pull-quote { padding: 20px 22px; margin: 30px 0 32px; } } /* ========================================================================== Article rail and anchor offsets ========================================================================== */ /* A TOC jump lands the heading under the sticky site header without this. Applied to sub-headings too, since sections now carry their own H3 anchors. */ .wiki-section > h2, .wiki-section h3[id] { scroll-margin-top: 96px; } /* Section cards: the reference layout separates each section on its own surface rather than running them together on the page ground. */ .article-main > .wiki-section { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 26px clamp(18px, 2.6vw, 34px) 30px; margin-bottom: 26px; } .article-main > .wiki-section > h2 { margin-top: 0; } /* The hairline that closed each section is redundant once they are cards. */ .article-main > .wiki-section:last-of-type { border-bottom: 1px solid var(--card-edge); } @media (max-width: 1100px) { .article-main > .wiki-section { padding: 22px 18px 26px; } } /* --------------------------------------------------------------------------- Verified weapon statistics. Rendered from the editorial spreadsheet, not from generated prose — the rule pack forbids the model from stating damage, fire rate, accuracy, range and reload, so these are the figures that fill that gap. --------------------------------------------------------------------------- */ .wstats-intro { color: var(--ink-2); max-width: 76ch; margin: 0 0 22px; } .wstats-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 42px; margin-bottom: 26px; } .wstat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; } .wstat-label { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2); } .wstat-value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); } .wstat-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; } .wstat-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .wstats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .wstats-card { border: 1px solid var(--card-edge); border-radius: 12px; background: var(--card); padding: 15px 17px; } .wstats-card-k { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .wstats-card-v { font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--ink); } /* Sidebar panel — the same figures grouped for scanning. */ .wstats-panel { margin-top: 18px; } .wstats-source { margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--card-edge); font-size: 12px; line-height: 1.5; color: var(--ink-3); } /* Same-class weapon comparison. Figures come from the same verified sheet as the Statistics section, so the table cannot disagree with the bars above it. */ .wcompare-wrap { overflow-x: auto; border: 1px solid var(--card-edge); border-radius: 12px; background: var(--card); } .wcompare-table { width: 100%; border-collapse: collapse; min-width: 620px; } .wcompare-table th, .wcompare-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--card-edge); font-variant-numeric: tabular-nums; } .wcompare-table thead th { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 5%, transparent); white-space: nowrap; } .wcompare-table tbody tr:last-child th, .wcompare-table tbody tr:last-child td { border-bottom: 0; } .wcompare-table tbody th { font-weight: 600; color: var(--ink); } /* The page's own weapon is the reference row, so it is tinted and never a link to itself. */ .wcompare-table tr.is-self th, .wcompare-table tr.is-self td { background: color-mix(in srgb, var(--accent) 8%, transparent); } .wcompare-table a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); } .wcompare-table a:hover { text-decoration-thickness: 2px; }