/*
  PHANTOM BLADE ZERO TOOLS / INK LEDGER DESIGN SYSTEM v1
  Independent original typography + geometry. No game images or logos.
  Single forced color scheme: dark. No prefers-color-scheme override.
  Fonts: Roboto Condensed + IBM Plex Mono (two primary families), Inter for body. All bundled locally.
  All HTML is pre-rendered and functional to read with scripts disabled.
*/
@font-face { font-family:'Roboto Condensed'; src:url('./fonts/RobotoCondensed-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto Condensed'; src:url('./fonts/RobotoCondensed-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto Condensed'; src:url('./fonts/RobotoCondensed-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('./fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('./fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('./fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('./fonts/Inter-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('./fonts/Inter-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('./fonts/Inter-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
:root {
  color-scheme: dark;
  --ink: #101210;
  --ink-deep: #0B0D0C;
  --panel: #191B18;
  --panel-light: #20221F;
  --panel-red: #241A19;
  --cream: #F3F0E9;
  --secondary: #C4BDB3;
  --muted: #A7A095;
  --muted-dim: #8D8980;
  --line: #343631;
  --line-faint: #2A2C29;
  --red: #EA655B;
  --red-bright: #FF786D;
  --red-deep: #B33D37;
  --jade: #99C9B1;
  --good: #B7DAC4;
  --bad: #ED918B;
  --font-display: 'Roboto Condensed', 'Liberation Sans Narrow', 'DejaVu Sans Condensed', sans-serif;
  --font-mono: 'IBM Plex Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
  --font-body: Inter, 'Helvetica Neue', Arial, sans-serif;
  --shell: 1200px;
  --pad: 40px;
  --r: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--cream); font: 400 15px/1.58 var(--font-body); -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: absolute; top: 117px; left: 0; right: 0; height: 400px; z-index: 0; pointer-events: none; background: repeating-linear-gradient(90deg,transparent 0, transparent calc(25% - 1px),rgba(255,255,255,.025) calc(25% - 1px),rgba(255,255,255,.025) 25%); opacity:.5; }
::selection { background: var(--red); color: var(--ink-deep); }
a { color: var(--cream); text-decoration: none; }
a:hover { color: var(--red-bright); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, [tabindex='0']:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
h1,h2,h3 { margin: 0; text-wrap: balance; }
strong { font-weight: 700; }
[hidden] { display: none !important; }
.shell { position: relative; margin-inline:auto; width: min(var(--shell),calc(100% - var(--pad)*2)); min-width:0; }
.skip-link { position: fixed; z-index:999; left:12px; top:-80px; padding:10px 18px; background:var(--red); color:#090909; font-weight:bold; }
.skip-link:focus { top:12px; }
.top-tape { background: var(--red); color: #1B1110; border-bottom: 1px solid var(--red); height: 28px; }
.tape-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; font:600 9px/1 var(--font-mono); letter-spacing:.095em; }
.tape-inner strong { color:#18100f; }
.tape-mark { display:inline-block; vertical-align:middle; width:9px; height:9px; background:#211513; clip-path:polygon(22% 0,100% 0,78% 100%,0 100%); margin-right:6px; }
.tape-split { padding-inline:10px; opacity:.45; }
.site-header { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom: 1px solid var(--line); }
.identity { display:flex; gap:11px; flex-shrink:0; align-items:center; color:var(--cream); }
.identity-mark { object-fit:contain; }
.identity-type { display:flex; flex-direction:column; line-height:1; }
.identity-type b { display:block; font-family:var(--font-display); font-size:24px; letter-spacing:.025em; line-height:.98; white-space:nowrap; }
.identity-type b em { font-style:normal; color:var(--red); }
.identity-type small { display:block; font:500 9px/1 var(--font-mono); letter-spacing:.17em; margin-top:7px; color:var(--muted); }
.nav { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.nav a { padding:11px 13px 12px; font:600 11px/1 var(--font-mono); letter-spacing:.02em; color:var(--secondary); border-bottom:2px solid transparent; }
.nav a:hover, .nav a[aria-current='page'] { color:var(--cream); border-bottom-color:var(--red); }
main { min-width:0; padding-bottom:80px; }
.hero { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(160px,.55fr); gap:36px; position:relative; padding:41px 0 32px; border-bottom:1px solid var(--line); }
.hero-copy { min-width:0; }
.eyebrow, .section-index, .foot-eyebrow { margin:0; font:600 11px/1.5 var(--font-mono); letter-spacing:.115em; color:var(--red-bright); }
.eyebrow-rule { display:inline-block; width:21px; height:1px; background:var(--red); vertical-align:middle; margin-right:11px; }
h1 { margin-top:16px; max-width:830px; font:700 clamp(46px,5.05vw,69px)/.95 var(--font-display); letter-spacing:.012em; text-transform:uppercase; }
.intro { font-size:14px; max-width:700px; color:var(--secondary); margin-top:21px; line-height:1.75; }
.intro strong { color:var(--cream); }
.hero-aside { position:relative; overflow:hidden; border-left:1px solid var(--line); display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; min-height:205px; }
.hero-seal { z-index:2; display:block; align-self:flex-end; color:var(--muted); font:600 10px/1.3 var(--font-mono); padding-top:2px; }
.blade-decoration { position:absolute; width:220px; height:210px; right:15px; top:5px; background:transparent; transform:skewX(-8deg); }
.blade-decoration::before { content:''; position:absolute; left:35%; top:12px; width:15px; height:188px; transform:rotate(38deg); background:var(--red); clip-path:polygon(0 0,100% 0,100% 77%,15% 100%,0 98%); }
.blade-decoration::after { content:''; position:absolute; left:45%; top:14px; width:1px; height:230px; transform:rotate(38deg); transform-origin:top; background:var(--cream); box-shadow:-35px 8px 0 var(--line); opacity:.52; }
.hero-kanji { position:relative; align-self:flex-end; width:200px; text-align:right; font:600 9px/1.3 var(--font-mono); letter-spacing:.13em; color:var(--muted); padding-bottom:4px; }
.snapshot-panel, .data-hero { display:grid; grid-template-columns:minmax(0,1.07fr) minmax(0,1fr); gap:0; border:1px solid var(--line); margin-top:28px; }
.live-panel, .data-big { position:relative; min-width:0; padding:25px 31px 21px; background:var(--panel-red); overflow:hidden; }
.live-panel::after, .data-big::after { content:''; position:absolute; right:-10px; bottom:-45px; width:125px; height:125px; border:1px solid rgba(234,101,91,.12); border-radius:50%; pointer-events:none; }
.live-top { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.live-tag, .small-index, .primary-label, .checked, .primary-bottom, .stat-label, .source-note, .stat-tag, .counter-note { font-family:var(--font-mono); }
.live-tag { color:var(--red-bright); font-size:10px; font-weight:600; letter-spacing:.065em; }
.red-pulse { display:inline-block; background:var(--red); vertical-align:middle; width:6px; height:6px; border-radius:50%; margin:0 8px 2px 0; box-shadow:0 0 0 3px rgba(234,101,91,.13); }
.small-index { color:var(--muted); font-size:10px; white-space:nowrap; }
.primary-label { color:var(--secondary); font-size:12px; font-weight:600; letter-spacing:.15em; margin-top:31px; }
.huge-number { font-family:var(--font-display); font-weight:700; font-size:clamp(100px,10.1vw,145px); letter-spacing:-.013em; line-height:.93; font-variant-numeric:tabular-nums; margin:0 -3px; }
.huge-number.huge-text { font-size:clamp(58px,6.4vw,95px); line-height:1.13; letter-spacing:-.015em; margin-top:12px; margin-bottom:14px; }
.checked { display:flex; align-items:center; gap:8px; color:var(--cream); font-size:11px; letter-spacing:.03em; margin-top:12px; }
.checked time { font-weight:600; }
.signal-dash { width:15px; height:1px; background:var(--red); flex:none; }
.primary-bottom { border-top:1px solid rgba(255,255,255,.13); padding-top:15px; margin-top:23px; display:flex; justify-content:space-between; gap:10px; color:var(--muted); font:500 10px/1.6 var(--font-mono); }
.primary-bottom a { color:var(--cream); text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:4px; }
.overview-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); min-width:0; }
.stat { background:var(--panel); padding:23px 20px 19px; border-left:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0; display:flex; flex-direction:column; }
.stat:nth-last-child(-n+2) { border-bottom:0; }
.stat-label { color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.055em; white-space:normal; }
.stat-value { font:700 clamp(30px,3.25vw,49px)/1.07 var(--font-display); margin:9px 0 3px; letter-spacing:.005em; overflow-wrap:anywhere; }
.stat-text .stat-value { font-size:clamp(25px,2.48vw,37px); margin-top:15px; }
.stat-tag { font-size:9px; color:var(--muted); letter-spacing:.02em; }
.source-note { font:500 9px/1.5 var(--font-mono); color:var(--muted); margin-top:auto; padding-top:12px; }
.source-note a { color:var(--secondary); border-bottom:1px solid var(--line); }
.snapshot-footnote, .scope-alert { background:var(--ink-deep); padding:13px 17px; border:1px solid var(--line); border-top:0; color:var(--muted); font:400 11px/1.75 var(--font-mono); }
.snapshot-footnote b { color:var(--red-bright); margin-right:7px; }
.snapshot-footnote em { font-style:normal; color:var(--cream); }
.snapshot-footnote a { text-decoration:underline; text-underline-offset:3px; color:var(--cream); }
.ad-slot { border:1px dashed #3C3F3A; display:flex; align-items:center; justify-content:center; gap:11px; color:#989B94; background:repeating-linear-gradient(-45deg,transparent,transparent 7px,rgba(255,255,255,.016) 8px); }
.ad-slot span { font:600 10px/1.1 var(--font-mono); letter-spacing:.16em; }
.ad-slot small { font:400 10px/1.2 var(--font-mono); color:var(--muted-dim); }
.ad-inline { height:72px; margin-top:24px; }
.ad-sidebar { min-height:250px; padding:20px 16px; flex-direction:column; }
.section { margin-top:76px; min-width:0; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; }
.section-head h2 { font:700 clamp(31px,3.15vw,43px)/1.02 var(--font-display); letter-spacing:.008em; text-transform:uppercase; margin-top:9px; }
.section-head p:not(.section-index) { color:var(--secondary); font-size:13px; line-height:1.7; margin-top:9px; }
.text-link { font:600 11px/1.3 var(--font-mono); color:var(--cream); letter-spacing:.04em; text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:5px; white-space:nowrap; padding-bottom:4px; }
.tool-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.tool-card { min-width:0; min-height:293px; padding:21px 21px 22px; background:var(--panel); display:flex; flex-direction:column; align-items:flex-start; color:var(--cream); transition:background 160ms ease; }
.tool-card:hover, .tool-card:focus-visible { background:#242623; color:var(--cream); }
.tool-top { width:100%; display:flex; justify-content:space-between; align-items:center; font:600 11px/1 var(--font-mono); }
.tool-number { color:var(--red-bright); }
.tool-arrow { color:var(--secondary); font-size:20px; font-weight:400; }
.tool-glyph { position:relative; width:48px; height:41px; margin:24px 0 13px; display:block; }
.glyph-chart { background:linear-gradient(110deg,transparent 45%,transparent 45%); }
.glyph-chart::before { content:''; position:absolute; inset:7px 0 4px; border-left:1px solid #777D74; border-bottom:1px solid #777D74; }
.glyph-chart::after { content:''; position:absolute; left:9px; top:12px; width:40px; height:20px; border-top:3px solid var(--red); transform:skewY(-17deg); clip-path:polygon(0 35%,30% 70%,57% 10%,100% 40%,100% 70%,50% 34%,30% 100%,0 62%); background:var(--red); }
.glyph-trophy::before { content:''; position:absolute; left:12px; top:6px; width:25px; height:28px; border:2px solid var(--red); border-radius:2px 2px 14px 14px; }
.glyph-trophy::after { content:''; position:absolute; left:23px; top:31px; width:3px; height:11px; background:var(--red); box-shadow:-9px 10px 0 -1px var(--red),9px 10px 0 -1px var(--red); }
.glyph-cpu::before { content:''; position:absolute; left:8px; top:5px; width:30px; height:30px; border:2px solid var(--red); box-shadow: inset 0 0 0 6px var(--panel), inset 0 0 0 7px var(--red); }
.glyph-cpu::after { content:''; position:absolute; top:0; left:17px; height:41px; width:1px; background:var(--muted); box-shadow:10px 0 var(--muted); opacity:.65; }
.glyph-review::before { content:''; position:absolute; inset:1px 0 0 2px; border-left:2px solid var(--red); border-bottom:2px solid var(--red); }
.glyph-review::after { content:''; position:absolute; left:10px; top:8px; width:5px; height:17px; background:var(--muted); box-shadow:12px -5px 0 var(--red),24px -1px 0 var(--muted); }
.tool-card strong { font:700 30px/.98 var(--font-display); letter-spacing:.015em; text-transform:uppercase; }
.tool-description { font-size:12px; line-height:1.65; color:var(--secondary); margin-top:13px; min-height:40px; }
.tool-cta { font:600 10px/1.3 var(--font-mono); letter-spacing:.04em; color:var(--red-bright); margin-top:auto; padding-top:19px; }
.release-section { display:grid; grid-template-columns:minmax(0,1fr) 266px; gap:28px; align-items:start; }
.release-left { min-width:0; }
.rail-info { border:1px solid var(--line); border-top:0; padding:20px; }
.rail-info span { font:600 10px var(--font-mono); color:var(--red-bright); }
.rail-info p { margin-top:13px; color:var(--secondary); font-size:12px; line-height:1.7; }
.scroll-box { overflow-x:auto; max-width:100%; border:1px solid var(--line); scrollbar-color:var(--red-deep) var(--panel); scrollbar-width:thin; }
.data-table { width:100%; border-collapse:collapse; border-spacing:0; table-layout:auto; text-align:left; font-size:13px; }
.data-table caption { caption-side:bottom; text-align:left; background:var(--ink-deep); padding:12px 17px; color:var(--muted); font:400 10px/1.65 var(--font-mono); border-top:1px solid var(--line); }
.data-table caption a { color:var(--cream); text-decoration:underline; text-underline-offset:3px; }
.data-table thead { background:#242621; }
.data-table th, .data-table td { padding:15px 16px; border-bottom:1px solid var(--line-faint); vertical-align:middle; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom:0; }
.data-table thead th { white-space:nowrap; color:var(--muted); font:600 10px/1.4 var(--font-mono); letter-spacing:.06em; }
.data-table tbody th { font:600 10px/1.45 var(--font-mono); letter-spacing:.025em; color:var(--secondary); }
.data-table tbody td { color:var(--cream); }
.data-table tbody tr:nth-child(odd) { background:var(--panel); }
.data-table tbody tr:nth-child(even) { background:#151714; }
.data-table tbody tr:hover { background:#242622; }
.data-table td a { color:var(--red-bright); font:600 10px/1.3 var(--font-mono); white-space:nowrap; }
.facts-table th { width:165px; }
.facts-table td:last-child { text-align:right; }
.facts-table td:nth-child(2) { font-weight:600; }
.or { color:var(--muted); font:500 10px/1.8 var(--font-mono); }
.requirements-table { min-width:650px; }
.requirements-table td { line-height:1.65; }
.requirements-table th:first-child { width:140px; }
.fineprint { color:var(--muted); font:400 11px/1.7 var(--font-mono); margin-top:11px; }
.picker { background:var(--panel); border:1px solid var(--line); margin-top:27px; display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr); gap:0; }
.picker-copy { border-right:1px solid var(--line); padding:25px 26px; }
.tool-badge { color:var(--red-bright); font:600 10px/1.4 var(--font-mono); letter-spacing:.07em; }
.picker-copy h3 { font:700 32px/1 var(--font-display); text-transform:uppercase; margin-top:14px; }
.picker-copy p { color:var(--secondary); margin-top:13px; font-size:12px; line-height:1.72; }
.picker-copy p em { color:var(--cream); font-style:normal; }
.picker-form { padding:26px 25px; display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; }
.picker-form label, .filterbar label { display:flex; flex-direction:column; gap:9px; font:600 10px/1.3 var(--font-mono); color:var(--secondary); letter-spacing:.045em; min-width:0; }
select, input[type='search'] { appearance:none; -webkit-appearance:none; background:var(--ink-deep); color:var(--cream); border:1px solid #5B5B55; border-radius:0; height:42px; width:100%; min-width:0; padding:0 35px 0 12px; font:500 12px/1.3 var(--font-body); }
select { background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8"%3E%3Cpath d="m1 1 6 6 6-6" fill="none" stroke="%23F3F0E9" stroke-width="1.5"/%3E%3C/svg%3E'); background-repeat:no-repeat; background-position:right 12px center; }
input[type='search'] { padding-right:12px; }
input::placeholder { color:#99958D; }
.button { min-height:42px; display:inline-flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 15px; font:600 10px/1.2 var(--font-mono); letter-spacing:.035em; text-align:left; border:1px solid var(--red); transition:background-color .15s ease,color .15s ease; }
.button-red { background:var(--red); color:#151110; }
.button-red:hover { background:var(--red-bright); color:#141110; }
.picker-form .button { grid-column:1/-1; }
.picker-result { grid-column:1/-1; border-top:1px solid var(--line); display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:12px 25px; font:400 10px/1.55 var(--font-mono); color:var(--secondary); }
.result-pill { font:600 10px/1.1 var(--font-mono); letter-spacing:.05em; padding:8px 10px; border:1px solid var(--line); white-space:nowrap; }
.result-idle { color:var(--secondary); }
.result-recommended { color:#14221A; background:var(--good); border-color:var(--good); }
.result-minimum { color:#271813; background:#E9C3A0; border-color:#E9C3A0; }
.result-below { color:#1D0D0B; background:var(--bad); border-color:var(--bad); }
.result-unknown { color:var(--cream); border-color:var(--muted); }
.faq-grid { border-top:1px solid var(--line); }
.faq-grid details { border-bottom:1px solid var(--line); }
.faq-grid summary { list-style:none; display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding:20px 0; gap:20px; font:600 15px/1.4 var(--font-body); }
.faq-grid summary::-webkit-details-marker { display:none; }
.faq-grid summary::after { content:'+'; flex:none; color:var(--red-bright); font:400 24px/1 var(--font-mono); }
.faq-grid details[open] summary::after { content:'−'; }
.faq-grid details p { max-width:820px; color:var(--secondary); font-size:13px; padding:0 42px 21px 0; }
.faq-grid details a { color:var(--red-bright); text-decoration:underline; text-underline-offset:3px; }
.footer { background:var(--ink-deep); border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:1.65fr 1fr .65fr; gap:65px; padding-top:49px; padding-bottom:46px; }
.foot-eyebrow { font-size:10px; }
.byline { margin-top:15px; font:700 25px/1 var(--font-display); letter-spacing:.025em; }
.footer-copy { font-size:12px; color:var(--secondary); max-width:370px; margin-top:12px; line-height:1.7; }
.source-links { list-style:none; margin:17px 0 0; padding:0; }
.source-links li { margin-bottom:10px; }
.source-links a { color:var(--secondary); font-size:12px; text-decoration:underline; text-decoration-color:#5A5C57; text-underline-offset:4px; }
.source-links a:hover { color:var(--red-bright); }
.foot-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:18px; padding-bottom:24px; font:400 10px/1.6 var(--font-mono); color:var(--muted); }
.foot-bottom p:first-child { color:var(--cream); }
/* DATA TEMPLATE: shared by /player-count and /reviews */
.page-data .hero, .page-trophies .hero, .page-pc .hero { padding-top:33px; padding-bottom:27px; }
.page-data h1, .page-trophies h1, .page-pc h1 { font-size:clamp(41px,4.42vw,61px); }
.page-data .intro, .page-trophies .intro, .page-pc .intro { margin-top:15px; }
.page-data .hero-aside, .page-trophies .hero-aside, .page-pc .hero-aside { min-height:158px; }
.data-hero { margin-top:22px; grid-template-columns:minmax(0,1.65fr) minmax(0,.65fr); }
.data-big { padding:23px 28px 19px; }
.data-big .primary-label { margin-top:17px; }
.data-big .huge-number { font-size:clamp(90px,10vw,134px); }
.data-mini { display:grid; grid-template-rows:1fr 1fr; min-width:0; }
.metric-tile { display:flex; flex-direction:column; justify-content:center; gap:4px; padding:17px 24px; background:var(--panel); border-left:1px solid var(--line); border-bottom:1px solid var(--line); }
.metric-tile:last-child { border-bottom:0; }
.metric-tile label { font:600 10px/1.4 var(--font-mono); color:var(--muted); }
.metric-tile strong { font:700 clamp(34px,3.55vw,49px)/1.02 var(--font-display); }
.metric-tile small { font:400 10px/1.5 var(--font-mono); color:var(--secondary); }
.metric-tile a { color:var(--red-bright); font:600 9px/1.4 var(--font-mono); text-decoration:underline; text-underline-offset:3px; }
.scope-alert { display:grid; grid-template-columns:200px 1fr; gap:14px; border-top:0; }
.scope-alert strong { color:var(--red-bright); font:600 10px/1.4 var(--font-mono); letter-spacing:.035em; }
.scope-alert p { color:var(--secondary); }
.scope-alert p strong { color:var(--cream); font:inherit; }
.page-data .section { margin-top:58px; }
.chart-shell { min-width:0; padding:19px 23px 16px; background:var(--panel); border:1px solid var(--line); }
.chart-toolbar { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.chart-caption { display:flex; flex-wrap:wrap; gap:9px; align-items:center; font:600 11px/1.5 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
.chart-square { width:10px; height:10px; background:var(--red); flex:none; }
.chart-mode { margin-left:12px; color:#111; background:#F0C2A7; font:600 9px/1.3 var(--font-mono); padding:4px 7px; }
.segment { display:flex; border:1px solid #62645C; }
.segment button { background:var(--ink-deep); color:var(--secondary); min-width:52px; padding:8px 10px; border:0; border-right:1px solid #62645C; font:600 10px/1 var(--font-mono); }
.segment button:last-child { border-right:0; }
.segment button.active { color:#16100F; background:var(--red); }
.chart-canvas { height:280px; margin:18px 0 5px; position:relative; border-bottom:1px solid #73726B; }
.chart-canvas svg { width:100%; height:100%; overflow:visible; }
.gridline { stroke:#3F413C; stroke-width:1; fill:none; vector-effect:non-scaling-stroke; }
.gridline.vertical { stroke:#323531; stroke-dasharray:3 9; }
.chart-watermark { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%) rotate(-12deg); width:max-content; max-width:85%; text-align:center; pointer-events:none; color:rgba(243,240,233,.38); font:700 clamp(18px,3vw,31px)/1.3 var(--font-display); letter-spacing:.13em; }
.chart-axis { display:flex; justify-content:space-between; gap:15px; color:var(--muted); font:400 9px/1.5 var(--font-mono); }
.chart-axis span:nth-child(2) { color:var(--red-bright); text-align:center; }
.muted { color:var(--muted); font-size:11px; }
.method-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); gap:1px; background:var(--line); }
.method-grid article { background:var(--panel); padding:24px 23px; }
.method-grid article span { color:var(--red-bright); font:600 10px/1.4 var(--font-mono); letter-spacing:.03em; }
.method-grid h3 { font:700 29px/1.05 var(--font-display); margin-top:13px; text-transform:uppercase; }
.method-grid p { margin-top:13px; font-size:12px; color:var(--secondary); line-height:1.75; }
.page-data .data-table { min-width:640px; }
/* ACHIEVEMENT TEMPLATE */
.trophy-summary { display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); border:1px solid var(--line); margin-top:22px; }
.achievement-counter { padding:22px 27px; background:var(--panel-red); }
.progress-main { display:flex; align-items:baseline; gap:8px; margin-top:5px; }
.progress-main strong { font:700 85px/.95 var(--font-display); font-variant-numeric:tabular-nums; }
.progress-main span { font:600 36px/1 var(--font-display); color:var(--secondary); }
.progress-main em { font:700 12px/1 var(--font-mono); color:var(--red-bright); font-style:normal; }
.progress-track { height:5px; width:100%; background:#46403A; margin-top:11px; }
.progress-track i { display:block; height:100%; background:var(--red); transition:width .2s ease; }
.counter-note { margin-top:11px; font-size:10px; color:var(--muted); }
.counter-note strong { color:var(--cream); }
.snapshot-date { display:flex; justify-content:flex-start; align-items:center; gap:23px; background:var(--panel); border-left:1px solid var(--line); padding:24px 24px; }
.trophy-seal { width:82px; height:82px; border:1px solid var(--red); color:var(--red-bright); display:flex; justify-content:center; align-items:center; font:700 59px/1 var(--font-display); flex:none; transform:rotate(-5deg); }
.snapshot-date div { display:flex; flex-direction:column; gap:6px; }
.snapshot-date b { font:700 24px/1.1 var(--font-display); }
.snapshot-date a { font:600 10px/1.5 var(--font-mono); color:var(--red-bright); text-decoration:underline; text-underline-offset:3px; }
.snapshot-date small { color:var(--muted); font:400 9px/1.6 var(--font-mono); }
.snapshot-date small a { font:inherit; }
.page-trophies .section { margin-top:52px; }
.filterbar { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.82fr) minmax(0,.8fr) auto; gap:13px; padding:19px; background:var(--panel); border:1px solid var(--line); align-items:end; }
.filterbar .button-outline { background:transparent; color:var(--cream); border-color:var(--line); justify-content:center; font-size:10px; padding-inline:12px; white-space:nowrap; }
.filterbar .button-outline:hover { border-color:var(--red); color:var(--red-bright); }
.list-meta { display:flex; justify-content:space-between; gap:18px; padding:14px 2px 9px; color:var(--secondary); font:500 10px/1.5 var(--font-mono); }
.list-meta strong { color:var(--red-bright); }
.achievement-table { min-width:790px; }
.achievement-table thead th:first-child { width:60px; text-align:center; }
.achievement-table thead th:nth-child(2) { width:43%; }
.achievement-table thead th:nth-child(4) { white-space:normal; }
.achievement-table td { padding:12px 15px; }
.tick-cell { text-align:center; }
.tick { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; cursor:pointer; position:relative; }
.tick input { appearance:none; margin:0; width:22px; height:22px; border:1px solid #77786F; border-radius:0; background:var(--ink-deep); cursor:pointer; }
.tick input:checked { border-color:var(--red); background:var(--red); }
.tick input:checked + span::after { content:''; position:absolute; width:11px; height:6px; border-left:2px solid #140B0B; border-bottom:2px solid #140B0B; transform:rotate(-45deg); top:17px; left:16px; }
.tick input:focus-visible { outline-offset:4px; }
.achievement-info { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.achievement-icon { width:31px; height:31px; border:1px solid #5C5951; background:#242520; flex:none; position:relative; }
.achievement-icon::before { content:''; position:absolute; top:4px; left:13px; width:4px; height:22px; background:var(--red); transform:rotate(37deg); }
.achievement-icon::after { content:''; position:absolute; top:12px; left:5px; width:21px; height:1px; background:var(--cream); transform:rotate(-24deg); opacity:.6; }
.achievement-name, .spoiler-unmasked { font:700 18px/1.12 var(--font-display); }
.achievement-description, .spoiler-desc { color:var(--secondary); font-size:11px; line-height:1.5; margin-top:4px; }
.spoiler { min-width:0; }
.spoiler summary { display:list-item; list-style:none; cursor:pointer; }
.spoiler summary::-webkit-details-marker { display:none; }
.spoiler-screen { display:inline-flex; align-items:center; font:600 11px/1.5 var(--font-mono); color:#F0B4AF; background:#4A2927; padding:4px 9px; }
.spoiler-unmasked { display:none; }
.spoiler[open] .spoiler-screen { display:none; }
.spoiler[open] .spoiler-unmasked { display:inline; }
.spoiler-desc { display:none; }
.spoiler[open] .spoiler-desc { display:block; }
.category-pill { white-space:nowrap; color:var(--secondary); font:500 10px/1.5 var(--font-mono); }
.percent-cell { font:600 15px/1 var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rarity-bar { height:4px; background:#3F413B; min-width:80px; width:100%; }
.rarity-bar i { background:var(--red); display:block; height:100%; }
.empty-filter { padding:25px; background:var(--panel); border:1px solid var(--line); color:var(--secondary); }
/* PC SPECS TEMPLATE */
.pc-stat-rail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); margin-top:22px; background:var(--line); gap:1px; }
.pc-stat-rail > div { min-width:0; padding:21px 23px 24px; background:var(--panel-red); display:flex; flex-direction:column; gap:5px; }
.pc-stat-rail span { color:var(--red-bright); font:600 10px/1.5 var(--font-mono); }
.pc-stat-rail strong { font:700 40px/1 var(--font-display); }
.pc-stat-rail small { color:var(--secondary); font:400 11px/1.5 var(--font-mono); }
.source-banner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:14px 18px; border:1px solid var(--line); border-top:0; background:var(--ink-deep); font:600 10px/1.4 var(--font-mono); }
.source-banner span { color:var(--muted); }
.source-banner a { color:var(--red-bright); text-decoration:underline; text-underline-offset:3px; }
.page-pc .section { margin-top:58px; }
@media (max-width:1100px) {
  :root { --pad:28px; }
  .nav a { padding-inline:8px; }
  .stat { padding-inline:15px; }
  .tool-card { padding-inline:17px; }
  .tool-card strong { font-size:27px; }
  .filterbar { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .search-label { grid-column:auto; }
  .filterbar button { grid-column:1/-1; }
}
@media (max-width:800px) {
  :root { --pad:22px; }
  .site-header { align-items:flex-start; flex-wrap:wrap; padding-block:17px 0; gap:8px; }
  .identity { margin-bottom:5px; }
  .nav { width:100%; justify-content:space-between; flex-wrap:nowrap; gap:0; }
  .nav a { padding:13px 6px; font-size:10px; white-space:nowrap; }
  .hero { grid-template-columns:minmax(0,1fr) 135px; gap:16px; padding-top:31px; }
  .hero-aside { min-height:190px; }
  .blade-decoration { right:-59px; }
  h1 { font-size:clamp(43px,6.4vw,58px); }
  .snapshot-panel { grid-template-columns:1fr; }
  .overview-stats { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:1fr; }
  .stat, .stat:nth-last-child(-n+2) { border-left:1px solid var(--line); border-bottom:0; }
  .stat:first-child { border-left:0; }
  .stat-value { font-size:32px; }
  .stat-text .stat-value { font-size:26px; }
  .stat { min-height:149px; }
  .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .release-section { grid-template-columns:1fr; }
  .sidebar-rail { display:none; }
  .picker { grid-template-columns:1fr; }
  .picker-copy { border-right:0; border-bottom:1px solid var(--line); }
  .method-grid { grid-template-columns:1fr; }
  .method-grid article { min-height:0; }
  .footer-grid { gap:20px; }
  .data-hero { grid-template-columns:minmax(0,1fr) minmax(200px,.65fr); }
  .page-data .hero, .page-trophies .hero, .page-pc .hero { grid-template-columns:1fr 120px; }
  .filterbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pc-stat-rail strong { font-size:31px; }
}
@media (max-width:540px) {
  :root { --pad:16px; }
  body { font-size:14px; }
  body::before { top:104px; }
  .top-tape { height:25px; }
  .tape-inner { font-size:9px; white-space:nowrap; }
  .tape-inner span:last-child { display:none; }
  .site-header { min-height:78px; padding-top:13px; gap:3px; }
  .identity-mark { width:35px; height:35px; }
  .identity-type b { font-size:20px; }
  .identity-type small { font-size:9px; margin-top:6px; }
  .nav { margin-top:3px; }
  .nav a { font-size:11px; padding:12px 3px 10px; }
  .hero, .page-data .hero, .page-trophies .hero, .page-pc .hero { display:block; padding:24px 0 20px; }
  .hero-aside, .page-data .hero-aside, .page-trophies .hero-aside, .page-pc .hero-aside { display:none; }
  .eyebrow { font-size:10px; }
  .eyebrow-rule { width:15px; margin-right:7px; }
  h1, .page-data h1, .page-trophies h1, .page-pc h1 { font-size:clamp(32px,9.35vw,39px); line-height:.97; letter-spacing:0; margin-top:12px; max-width:100%; }
  .intro { font-size:15px; line-height:1.55; margin-top:11px; }
  .page-data .intro, .page-trophies .intro, .page-pc .intro { margin-top:10px; }
  .snapshot-panel, .data-hero { margin-top:16px; }
  .live-panel, .data-big { padding:17px 18px 17px; }
  .live-top { gap:7px; }
  .live-tag { font-size:10px; }
  .small-index { font-size:10px; }
  .primary-label { font-size:10px; margin-top:19px; }
  .huge-number { font-size:92px; line-height:.92; margin-top:4px; }
  .data-big .huge-number { font-size:92px; }
  .data-big .huge-text, .huge-number.huge-text { font-size:53px; }
  .checked { font-size:11px; margin-top:8px; gap:6px; }
  .primary-bottom { font-size:10px; padding-top:11px; margin-top:17px; }
  .snapshot-panel { display:block; }
  .overview-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat, .stat:nth-last-child(-n+2) { min-height:155px; border-left:0; border-top:1px solid var(--line); border-bottom:0; padding:14px 13px; }
  .stat:nth-child(even) { border-left:1px solid var(--line); }
  .stat-label { font-size:10px; }
  .stat-value { font-size:34px; }
  .stat-text .stat-value { font-size:29px; }
  .source-note { font-size:10px; }
  .stat-tag { font-size:10px; }
  .snapshot-footnote { font-size:11px; line-height:1.7; padding:10px 12px; }
  .ad-inline { margin-top:17px; height:63px; gap:5px; flex-direction:column; }
  .ad-slot span { font-size:9px; }
  .ad-slot small { font-size:8px; }
  .section, .page-data .section, .page-trophies .section, .page-pc .section { margin-top:46px; }
  .section-head { margin-bottom:16px; gap:8px; }
  .section-head h2 { font-size:32px; }
  .section-head p:not(.section-index) { font-size:14px; }
  .section-index { font-size:10px; }
  .text-link { font-size:11px; }
  .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tool-card { min-height:258px; padding:14px 13px; }
  .tool-glyph { margin:21px 0 11px; transform:scale(.83); transform-origin:left center; }
  .tool-card strong { font-size:24px; }
  .tool-description { font-size:12px; line-height:1.55; }
  .tool-cta { font-size:10px; }
  .data-table { font-size:13px; }
  .data-table th, .data-table td { padding:13px 12px; }
  .facts-table { min-width:480px; }
  .data-table caption { font-size:11px; }
  .picker-copy { padding:19px 18px; }
  .picker-form { grid-template-columns:1fr; padding:20px 18px; }
  .picker-form .button { grid-column:1; }
  .picker-result { padding:13px 18px; }
  .faq-grid summary { font-size:13px; }
  .faq-grid details p { font-size:11px; padding-right:15px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:27px; padding-top:34px; padding-bottom:28px; }
  .footer-grid > div:first-child { grid-column:1/-1; }
  .footer-copy { max-width:350px; }
  .foot-bottom { flex-direction:column; gap:4px; font-size:10px; }
  /* Ensure H1 + main number + checked time are above first 844px viewport on a 390px phone. */
  .data-hero { display:block; }
  .data-big { padding:17px 18px 15px; }
  .data-big .primary-label { margin-top:16px; }
  .data-mini { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; }
  .metric-tile { padding:12px 13px; border-top:1px solid var(--line); border-bottom:0; }
  .metric-tile:first-child { border-left:0; }
  .metric-tile strong { font-size:29px; }
  .metric-tile label { font-size:10px; }
  .scope-alert { grid-template-columns:1fr; gap:6px; padding:12px; font-size:12px; }
  .chart-shell { padding:14px 12px; }
  .chart-toolbar { align-items:flex-start; flex-direction:column; gap:13px; }
  .chart-caption { font-size:10px; }
  .chart-mode { font-size:8px; margin-left:2px; }
  .chart-canvas { height:220px; }
  .chart-axis { font-size:8px; }
  .chart-axis span:nth-child(2) { display:none; }
  .method-grid article { padding:18px; }
  .method-grid h3 { font-size:27px; }
  .trophy-summary { display:block; }
  .achievement-counter { padding:17px 19px; }
  .progress-main strong { font-size:72px; }
  .progress-main span { font-size:29px; }
  .snapshot-date { border-left:0; border-top:1px solid var(--line); padding:13px 19px; gap:16px; }
  .trophy-seal { width:57px; height:57px; font-size:40px; }
  .snapshot-date b { font-size:20px; }
  .filterbar { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; gap:12px; }
  .search-label { grid-column:1/-1; }
  .filterbar label { font-size:9px; }
  .filterbar button { grid-column:1/-1; }
  .list-meta { flex-direction:column; gap:2px; font-size:10px; }
  .pc-stat-rail { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pc-stat-rail > div { padding:16px; }
  .pc-stat-rail > div:last-child { grid-column:1/-1; }
  .pc-stat-rail strong { font-size:32px; }
  .source-banner { padding:12px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}
/* Optional snapshot fetch stays visibly honest if the API is not connected. */
.refresh-row { margin-top:11px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-height:16px; }
.refresh-link { display:inline; padding:0; margin:0; border:0; background:none; color:var(--red-bright); font:600 9px/1.4 var(--font-mono); letter-spacing:.065em; text-decoration:underline; text-underline-offset:3px; }
.refresh-link:disabled { opacity:.65; cursor:progress; }
.refresh-row [data-refresh-status] { font:400 9px/1.4 var(--font-mono); color:var(--secondary); }
.coffee { color:var(--muted); font-size:12px; }
/* Sidebar reservations live below the primary above-the-fold answer on every template. */
.data-chart-layout, .achievements-layout, .specs-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 248px; gap: 23px; align-items: start;
}
.data-chart-layout > :first-child, .achievements-layout > :first-child, .specs-layout > :first-child { min-width:0; }
.achievements-layout .ad-sidebar { height:255px; }
.data-chart-layout .ad-sidebar { height:250px; }
.specs-layout .ad-sidebar { height:250px; }
@media (max-width: 980px) {
  .data-chart-layout, .achievements-layout, .specs-layout { grid-template-columns: minmax(0,1fr); }
}
.source-date{color:var(--muted,#a99f92);font-size:.85em}
/* Round 3: mobile readability floor — explanatory text ~14px, labels/controls 12px. */
@media (max-width:540px) {
  .faq-grid details p, .achievement-description, .spoiler-desc, .scope-alert p, .snapshot-footnote, .picker-result, .pc-stat-rail small, .metric-tile small, .counter-note, .snapshot-date small, .muted, .fineprint { font-size:14px; line-height:1.6; }
  .filterbar label, .refresh-link, .refresh-row [data-refresh-status], .metric-tile a, .chart-axis, .source-note, .stat-tag, .list-meta, .data-table thead th, .data-table tbody th, .category-pill, .data-table caption, .snapshot-date a, .chart-mode, .button, .result-pill, .scope-alert strong, .primary-bottom, .tool-cta, .foot-bottom, .swipe-cue, .source-date { font-size:12px; }
}
@media (max-width:540px) {
  /* Short numeric tables fit the phone width instead of scrolling. */
  .page-data .data-table:not(.requirements-table):not(.achievement-table) { min-width:0; width:100%; }
  .page-data .data-table:not(.requirements-table):not(.achievement-table) th, .page-data .data-table:not(.requirements-table):not(.achievement-table) td { padding-left:8px; padding-right:8px; }
}
@media (max-width:540px) {
  .data-table:not(.requirements-table):not(.achievement-table) thead th { white-space:normal; }
  .data-table:not(.requirements-table):not(.achievement-table) .category-pill { white-space:normal; }
  .data-table:not(.requirements-table):not(.achievement-table) th, .data-table:not(.requirements-table):not(.achievement-table) td { padding-left:7px; padding-right:7px; }
}
@media (max-width:540px) { .facts-table { min-width:0; } }
/* 11/11: mobile floor for the remaining mono labels (were 9-11px) and stacked tables instead of sideways scroll. */
@media (max-width:540px) {
  .section-index, .foot-eyebrow, .eyebrow, .stat-label, .tool-number, .or, .text-link, .small-index, .primary-label, .checked, .checked time, .chart-caption, .small, .meta, .chart-shell summary, .prose summary, .live-tag, .tag, .data-table td a, .rail-box span, .rail-box small, .rail-info span, .pc-stat-rail span, .metric-tile label, .tool-badge, .picker-form label, .identity-type small, .tape-inner, .ad-label, .snapshot-date b, .data-table td small, main small, .method-grid article span, .filterbar .button-outline { font-size:12px; }
  .nav a { font-size:12px; }
  .tool-description, .rail-info p, .picker-copy p, .footer-copy, .source-links a, .section-head p:not(.section-index), .data-table { font-size:14px; }
  /* Requirement tables: one block per component, each tier labelled. */
  .data-table.requirements-table { min-width:0; width:100%; }
  .requirements-table thead { display:none; }
  .requirements-table tbody, .requirements-table tr { display:block; }
  .requirements-table tr { border-top:1px solid var(--line); padding:10px 12px 12px; }
  .requirements-table tbody th { display:block; padding:0 0 6px; border:0; font-size:12px; color:var(--red-bright); }
  .requirements-table td { display:block; position:relative; min-height:50px; padding:5px 0 5px 40%; border:0; white-space:normal; }
  .requirements-table td::before { content:attr(data-label); position:absolute; left:0; top:7px; width:36%; color:var(--muted); font:600 12px/1.45 var(--font-mono); letter-spacing:.03em; }
  /* Achievement checklist: tick | name, with type + rate on the line below. */
  .data-table.achievement-table { min-width:0; width:100%; }
  .achievement-table thead { display:none; }
  .achievement-table tbody { display:block; }
  .achievement-table tr { display:grid; grid-template-columns:44px minmax(0,1fr) auto; column-gap:8px; align-items:center; padding:10px 8px 12px; border-top:1px solid var(--line); }
  .achievement-table tr[hidden] { display:none; }
  .achievement-table td { padding:0; border:0; }
  .achievement-table td.tick-cell { grid-row:1 / span 2; align-self:start; }
  .achievement-table td:nth-child(2) { grid-column:2 / -1; }
  .achievement-table td:nth-child(3) { grid-column:2; margin-top:8px; }
  .achievement-table td:nth-child(4) { grid-column:3; margin-top:8px; text-align:right; min-width:96px; }
  .achievement-table td:nth-child(5) { grid-column:3; text-align:right; font-size:12px; }
  .achievement-table td:nth-child(5)::before { content:"Δ "; color:var(--muted); }
  .achievement-table .achievement-icon { display:none; }
  .achievement-table .rarity-bar { min-width:0; margin-top:5px; }
}