/* Review Atlas night layer. Loaded last, over Asta's build: Volibar tokens (night, bone, gold, blue), Newsreader 300 as the display face, mono caps for labels and buttons, key art dimmed to plates. Two colour keys, never the same hue for both: - sentiment uses Steam's own review colours (praise blue, complaint red-brown, comparison tan), on the hero cards and in every chart; - game identity is a tone: For the King = ink (bone at night), For the King II = gold. Every surface and text token has a light and a dark value. Day is the default; the header switcher (data-theme on ) chooses night, and night is the header's navy across the whole page, not a neutral black. */ @font-face{font-family:'Newsreader';src:url('/assets/newsreader.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap} :root{ --night:#0b0f1a;--night-2:#0f1522;--bone:#ecedf0;--bone-soft:#b9c0cf;--bone-mute:#9aa3b5;--rule-night:rgba(236,237,240,.14); --gold:#d4a012;--gold-soft:#e0b04a;--gold-text:#a67c0f;--blue:#5486e0;--blue-soft:#7ba1e8; --praise:#66c0f4;--praise-text:#2f7fc0;--complaint:#a34c25;--meta:#b9a074;--meta-text:#8a7040; --font-display:'Newsreader',Georgia,'Times New Roman',serif; --c-paper:#f4f1ea;--c-paper-2:#ece8de;--c-panel:#fbf9f3;--c-ink:#15161a;--c-ink-soft:#2b2d33;--c-muted:#6b6d72;--c-rule:#cfcbbf;--c-rule-soft:#e2ded3; --game-0:#15161a;--game-1:#d4a012;--game-0-text:#15161a;--game-1-text:#a67c0f; --heat-color:#2f7fc0; color-scheme:light; } :root[data-theme="dark"]{ --c-paper:#0b0f1a;--c-paper-2:#0f1522;--c-panel:#111827;--c-ink:#ecedf0;--c-ink-soft:#d5d8de;--c-muted:#8e96a8;--c-rule:rgba(236,237,240,.16);--c-rule-soft:rgba(236,237,240,.08); --game-0:#ecedf0;--game-1:#e0b04a;--game-0-text:#ecedf0;--game-1-text:#e0b04a; --praise-text:#66c0f4;--meta-text:#b9a074;--gold-text:#e0b04a; --heat-color:#66c0f4; color-scheme:dark; } /* Asta's chart grammar names the two games --green and --rust. */ :root,.atlas-page,.atlas-theme-landscape{--paper:var(--c-paper);--paper-2:var(--c-paper-2);--panel:var(--c-panel);--ink:var(--c-ink);--ink-soft:var(--c-ink-soft);--muted:var(--c-muted);--rule:var(--c-rule);--rule-soft:var(--c-rule-soft);--green:var(--game-0);--rust:var(--game-1)} /* ---- Type ---------------------------------------------------------- */ h1,h2,h3,.wordmark,.steam-copy h1,.hp-intro h2,.hp-inspector h3,.hp-edition-copy h3,.hp-find h2,.hp-demo-wordmark,.lens h3,.cover-title,.quote-summary .price,dialog h2,.featured-game strong,.page-head h1{font-family:var(--font-display);font-weight:300;font-variation-settings:'opsz' 72;letter-spacing:-.02em} .wordmark,.hp-demo-wordmark{font-weight:400;letter-spacing:-.01em;font-size:24px} .brand-icon{color:var(--gold);font-size:26px} .eyebrow,.steam-eyebrow,.hp-kicker,.hp-snapshot,.hp-demo-wordmark>span,.hp-inspector-top,.hp-price>span,.hp-review-peek>div,.hp-spark-title,.hp-spark-caption,.steam-bottom>a>span,.steam-bottom>div>span,.cover-series,.cover-bottom,.section-index,.folio{font-family:var(--font-mono);font-weight:500;letter-spacing:.16em;text-transform:uppercase} .eyebrow{font-size:12px;letter-spacing:.2em;color:var(--muted)} nav{font:500 12px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;gap:26px} nav a[aria-current]{text-decoration:none;color:var(--ink)} nav button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit} .nav-cta[aria-current]{color:var(--paper)} .button,.nav-cta,.hp-edition-action .button,.button.blue{font:600 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;border-radius:2px;gap:14px;padding:0 22px;min-height:52px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:var(--ink);border:1px solid var(--ink);color:var(--paper)} .nav-cta{min-height:44px;padding:0 18px;gap:18px} .hp-edition-action .button{padding:0 16px;font-size:11px;letter-spacing:.12em} .button:hover,.nav-cta:hover,.button.blue:hover,.hp-edition-action .button:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--paper)} .button.outline{background:transparent;color:inherit;border-color:var(--ink)} .button.outline:hover{background:var(--paper-2);color:var(--ink)} .text-link{border-color:var(--ink)} /* the day / night switcher in the header */ .mode-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);border-radius:2px;padding:0 10px;min-height:32px;color:var(--muted);background:transparent;font:500 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer} .mode-toggle:hover{color:var(--ink);border-color:var(--ink)} .mode-toggle i{width:10px;height:10px;border-radius:50%;border:1px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)} .steam-experience>header .mode-toggle,.atlas-page>header .mode-toggle{border-color:rgba(236,237,240,.25);color:var(--bone-mute)} .steam-experience>header .mode-toggle:hover,.atlas-page>header .mode-toggle:hover{color:var(--bone);border-color:var(--bone)} /* ---- Hero ---------------------------------------------------------- */ .steam-opening,.steam-sticky{background:var(--night);color:var(--bone)} .steam-experience>header{background:linear-gradient(180deg,rgba(11,15,26,.92),rgba(11,15,26,.5));border-color:var(--rule-night);color:var(--bone)} .steam-experience>header nav a:not(.nav-cta),.steam-experience>header nav button:not(.mode-toggle){color:var(--bone-mute)} .steam-experience>header .wordmark{color:var(--bone)} .steam-experience>header nav a:hover,.steam-experience>header nav button:hover{color:var(--bone)} .steam-experience>header .nav-cta{background:transparent;border:1px solid rgba(236,237,240,.5);color:var(--bone)} .steam-experience>header .nav-cta:hover{background:var(--bone);color:var(--night)} .steam-shade{background:linear-gradient(90deg,#0b0f1a 0%,#0b0f1af2 24%,#0b0f1acc 40%,#0b0f1a66 58%,#0b0f1a26 90%),linear-gradient(0deg,#0b0f1aee 0%,transparent 22%,transparent 78%,#0b0f1a73 100%)} /* hairline frame with gold corner ticks, as on the Fable artboard */ .steam-sticky::after{content:'';position:absolute;inset:24px;z-index:3;pointer-events:none;border:1px solid var(--rule-night);background-image:linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold));background-size:14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px,14px 1px,1px 14px;background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;background-repeat:no-repeat} .steam-eyebrow{font-size:12px;letter-spacing:.24em;color:var(--gold);display:flex;align-items:center;gap:14px} .steam-eyebrow::before{content:'';width:28px;height:1px;background:var(--gold)} .steam-copy{max-width:760px} .steam-copy h1{font-size:clamp(46px,5.1vw,76px);line-height:1.02;letter-spacing:-.02em;color:var(--bone);text-wrap:pretty} .steam-copy h1 .mute{color:var(--bone-mute)} .steam-copy>p{color:var(--bone-soft);font-size:17px;line-height:1.55;max-width:420px} .steam-actions .button{background:var(--bone);border-color:var(--bone);color:var(--night)} .steam-actions .button:hover{background:#fff;border-color:#fff;color:var(--night)} .steam-secondary{font:500 12px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);border-bottom:1px solid rgba(236,237,240,.35);padding-bottom:6px} .steam-secondary:hover{text-decoration:none;border-color:var(--bone)} .steam-bottom{border-top:1px solid var(--rule-night)} .steam-bottom>a>span,.steam-bottom>div>span{font-size:10px;letter-spacing:.12em;color:var(--bone-mute)} .steam-bottom>a>strong{color:var(--bone);font-weight:400;font-size:15px} .steam-motion{border:1px solid rgba(236,237,240,.25);color:var(--bone-soft);font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;padding:8px 11px;border-radius:2px} /* the plates: art dimmed, the score and the count carry the card */ .steam-game{background:var(--night-2);border:1px solid var(--rule-night);border-radius:2px;box-shadow:0 18px 40px rgba(0,0,0,.45)} .steam-game img{filter:saturate(.6) brightness(.66) contrast(1.05)} .steam-game-score{background:var(--night-2);color:var(--bone);padding:16px 18px 14px;align-items:flex-end} /* Steam's own review-summary colours: positive #66c0f4, mixed #b9a074, negative #a34c25 */ .steam-game-score>div>strong{font:500 34px/1 var(--font-sans);letter-spacing:-.03em;color:var(--praise);font-variant-numeric:tabular-nums} .steam-game[data-band=mixed] .steam-game-score>div>strong{color:var(--meta)} .steam-game[data-band=negative] .steam-game-score>div>strong{color:var(--complaint)} .steam-game-score strong small{display:block;font:500 10px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:inherit;opacity:.85;margin:8px 0 0} .steam-game-score>div>span{margin-top:5px} .steam-game-score>div>span{font:500 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-mute);margin-top:9px} .negative-share{font:500 16px/1.2 var(--font-sans);letter-spacing:-.02em;color:var(--complaint)} .negative-share small{font:500 9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#7e8189;margin-top:4px} .steam-score-line{height:3px;background:var(--complaint)} .steam-score-line i{background:var(--praise)} @media(min-width:1700px){.steam-game-score>div>strong{font-size:38px}} @media(max-width:1100px){.steam-game-score>div>strong{font-size:28px}} @media(max-width:700px){.steam-copy h1{font-size:clamp(38px,10vw,48px)}.steam-game-score>div>strong{font-size:22px}.steam-game-score>div>span{font-size:9px}.negative-share{font-size:13px}.steam-shade{background:linear-gradient(90deg,#0b0f1aeb 0%,#0b0f1ad4 50%,#0b0f1a70 100%),linear-gradient(0deg,#0b0f1afc 0%,transparent 30%,transparent 75%,#0b0f1a80)}.steam-opening:after{background:var(--night)}.steam-sticky::after{inset:14px}} /* ---- Paper body ---------------------------------------------------- */ .home-product{--hp-ink:var(--ink);--hp-faint:var(--muted);--hp-line:var(--rule);--hp-paper:var(--paper)} .hp-kicker{font-size:11px;color:var(--muted)}.hp-kicker>span{color:var(--muted);opacity:.8} .hp-intro-right p,.hp-chart-heading p,.hp-chart-foot,.hp-live-hint,.hp-edition-copy p,.hp-edition-action small,.hp-news>div>span:last-child,.hp-find-copy>p,.hp-price>small,.hp-method{color:var(--muted)} .hp-intro-right a{border-color:var(--ink)} .hp-demo{background:var(--panel);border:1px solid var(--rule);border-radius:2px;box-shadow:none} .hp-demo-top{background:var(--paper-2);border-color:var(--rule)} .hp-demo-wordmark>span,.hp-snapshot{font-size:10px;letter-spacing:.14em;color:var(--muted)} .hp-toolbar,.hp-game-heads,.hp-chart-foot{border-color:var(--rule-soft)} .hp-language-pills button{color:var(--muted);border-radius:2px} .hp-language-pills button[aria-pressed=true]{background:var(--paper);border-color:var(--rule);color:var(--ink);box-shadow:none} .hp-language-pills button:hover{background:var(--paper-2)} .hp-live-hint i{background:var(--praise-text)} .hp-plot-key i{background:var(--praise)}.hp-plot-key i:nth-of-type(2){background:var(--complaint)} .hp-game-heads strong,.hp-chart-heading h3{color:var(--ink)} .hp-chart-foot a,.hp-method a,.hp-atlas-links,.hp-game-heads button:hover{color:var(--ink)} .hp-game-heads button{color:var(--muted)} .hp-flow-rail{stroke:var(--rule)} .hp-inspector{background:var(--night-2);color:var(--bone);border-left:1px solid rgba(236,237,240,.1)} .hp-inspector-top{color:var(--bone-mute);font-size:10px;letter-spacing:.14em} .hp-inspector h3{font-size:28px} .hp-definition{color:var(--bone-soft)} .hp-metrics button{border-top:1px solid rgba(236,237,240,.18)} .hp-metrics button>span{color:var(--bone-soft)}.hp-metrics small{color:#8e929b} .hp-metrics strong{font-weight:300;font-family:var(--font-display);font-variation-settings:'opsz' 72;letter-spacing:-.02em;font-size:36px} .hp-metrics button:first-child strong{color:var(--bone)}.hp-metrics button:last-child strong{color:var(--gold-soft)} .hp-spark-line.game-0{stroke:var(--bone)}.hp-spark-line.game-1{stroke:var(--gold-soft)} .hp-spark-title,.hp-spark-caption,.hp-spark-note{color:#8e929b}.hp-spark-axis{fill:#8e929b}.hp-spark-grid{stroke:rgba(236,237,240,.12)} .hp-spark-title,.hp-spark-caption{font-size:9px;letter-spacing:.12em} .hp-review-peek{border-color:rgba(236,237,240,.18)} .hp-review-peek>div,.hp-review-peek>small{color:#8e929b}.hp-review-peek>div{font-size:9px;letter-spacing:.12em} .hp-review-peek p{color:#d5d8de}.hp-review-peek button{color:var(--bone)} .hp-method{background:var(--paper-2);border-color:var(--rule)} .hp-edition-art img{border-color:var(--panel);box-shadow:0 8px 18px rgba(0,0,0,.15)} .hp-news{border-color:var(--rule)}.hp-news-icon{color:var(--gold)} .hp-find{background:var(--paper-2);border-top:1px solid var(--rule)} .hp-price>span{font-size:11px;color:var(--muted)} .hp-price>strong{font:300 46px var(--font-display);font-variation-settings:'opsz' 72;letter-spacing:-.02em} /* ---- Shared chrome: quote page, dialogs, footer -------------------- */ body{background:var(--paper);color:var(--ink)} header{border-color:var(--rule)} .page-head{border-color:var(--rule)}.page-head p{color:var(--muted)} .quote-summary{background:var(--paper-2);border-top:2px solid var(--ink)} .quote-summary .price{letter-spacing:-.02em} .input-row input,input[type=search],.library-controls input,select{border-color:var(--rule);background:var(--panel);color:var(--ink);border-radius:2px} .hp-search-input,.hp-search-input input{background:var(--panel);color:var(--ink);border-color:var(--rule)} .input-row input:focus,input[type=search]:focus{border-color:var(--ink);outline:none} :focus-visible{outline-color:var(--blue)} .newsletter-float{background:var(--night-2);color:var(--bone);border:1px solid rgba(236,237,240,.2);box-shadow:0 12px 32px rgba(0,0,0,.35);border-radius:2px;font:500 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase} .newsletter-float .float-description{color:var(--bone-mute);text-transform:none;letter-spacing:0;font:13px var(--font-sans)} dialog{border-radius:2px;background:var(--paper);color:var(--ink);border-color:var(--rule);box-shadow:0 30px 100px rgba(0,0,0,.35)} dialog::backdrop{background:rgba(11,15,26,.85)} dialog p,.form-note,.evidence-count{color:var(--muted)} .review .recommend{color:var(--praise-text)}.review .recommend.negative{color:var(--complaint)} .review-tags span{border-color:var(--rule);border-radius:2px} footer{border-color:var(--rule)}footer span,footer>a:last-child{color:var(--muted)} /* ==== The atlas ===================================================== */ .atlas-page{--green:var(--game-0);--rust:var(--game-1);background:var(--paper);color:var(--ink)} .atlas-page h1,.atlas-page h2,.atlas-page h3{font-family:var(--font-sans);font-weight:500;letter-spacing:-.02em} /* header band and the cover: night, like the site hero */ .atlas-page>header{background:var(--night);border-bottom:1px solid var(--rule-night);color:var(--bone)} .atlas-page>header .wordmark{color:var(--bone)} .atlas-page>header nav a:not(.nav-cta),.atlas-page>header nav button:not(.mode-toggle){color:var(--bone-mute)} .atlas-page>header nav a:hover,.atlas-page>header nav button:hover{color:var(--bone)} .atlas-page>header .nav-cta{background:transparent;border:1px solid rgba(236,237,240,.5);color:var(--bone)} .atlas-page>header .nav-cta:hover{background:var(--bone);color:var(--night)} .atlas-page .report-cover{background:var(--night);color:var(--bone);border-bottom:1px solid var(--rule-night);padding:34px 3% 30px!important;align-items:flex-end} .atlas-page .report-cover .eyebrow{font:500 12px var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px} .atlas-page .report-cover .eyebrow::before{content:'';width:28px;height:1px;background:var(--gold)} .atlas-page .report-cover h1{font:300 44px/1.05 var(--font-display)!important;font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--bone);margin:14px 0 8px} .atlas-page .report-cover h1 .comparison-separator{color:var(--bone-mute)} .atlas-page .report-cover p{font:500 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-mute)} .atlas-page .cover-note,.atlas-page .cover-note .text-link{color:var(--bone);border-color:rgba(236,237,240,.4);font:500 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase} .atlas-page .cover-note p{color:var(--bone-mute)} /* tabs, filters, scope line */ .atlas-page .report-nav{border-color:var(--rule);gap:30px} .atlas-page .report-nav button{font:500 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom-width:2px;padding:20px 0 16px} .atlas-page .report-nav button.active{color:var(--ink);border-bottom-color:var(--ink);font-weight:600} .atlas-page .filter-bar label{font:500 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .atlas-page select,.atlas-page .filter-bar select{background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:2px} option{background:var(--panel);color:var(--ink)} .atlas-page .viz-heading h2,.atlas-page .viz-panel h2,.atlas-page .viz-panel h3,.atlas-page .trend-heading h3{color:var(--ink)} .atlas-page .scope-line{color:var(--muted)}.atlas-page .scope-line button{color:var(--ink);border-color:var(--muted)} .atlas-page .subtle-button{color:var(--ink);border-color:var(--rule)} .workspace-heading h2{font:300 30px/1.1 var(--font-display);font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--ink)} .workspace-heading p{color:var(--muted)} .series-key i,.series-name:before{background:var(--game-0);border-radius:50%} .series-key span:last-child i,.series-name.game-1:before{background:var(--game-1);border-radius:1px} .series-name{color:var(--ink)} /* panels */ .viz-panel,.comparison-canvas,.comparison-inspector,.landscape-panel,.atlas-page .chart-surface{background:var(--panel);border:1px solid var(--rule);border-radius:2px;box-shadow:none} .viz-heading h2{color:var(--ink)}.viz-heading p,.chart-footnote{color:var(--muted)} .text-action{color:var(--ink)} .segmented{border-color:var(--rule);border-radius:2px} .segmented button{color:var(--muted);font:500 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase} .segmented button[aria-pressed=true]{background:var(--ink);color:var(--paper);font-weight:600;border-radius:1px} .segmented button:hover{background:var(--paper-2)} .segmented button[aria-pressed=true]:hover{background:var(--ink)} .sort-control{color:var(--muted)} .rank-row:nth-child(even){background:var(--paper-2)} .rank-marks{background:repeating-linear-gradient(90deg,var(--rule-soft) 0 1px,transparent 1px 25%)!important} .rank-label small{color:var(--muted)} .rank-value{color:var(--ink)} .grid-line{stroke:var(--rule-soft)} /* recommendations: two big Steam-coloured numbers, the Steam bar beneath */ .recommendation-profiles{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:10px} .recommendation-profile+.recommendation-profile{margin-top:0} .recommendation-profile>div:first-child{flex-direction:column;align-items:flex-start;gap:10px} .recommendation-profile .series-name{font:500 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .rate-number{font:300 64px/1 var(--font-display);font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--praise-text)} .rate-band{height:4px;background:transparent;margin:14px 0 10px;border-radius:0} .rate-band button:first-child{background:var(--praise)!important} .rate-band button:last-child{background:var(--complaint)} .rate-labels{font:500 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .rate-labels .small-evidence{color:var(--muted)} /* trends */ .high-fidelity-chart text,.trend-workspace .high-fidelity-chart .axis-label,.landscape-scroll text{fill:var(--muted);font-family:var(--font-mono);font-size:11px} .high-fidelity-chart .year-label{fill:var(--ink);font-weight:500} .high-fidelity-chart .volume-title{font-size:9px;letter-spacing:.14em;fill:var(--muted)} .trend-series-line{stroke-width:2.2} .trend-end-label{font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase} .trend-scale-strip,.trend-adaptation-note,.trend-sparse-notice,.trend-selection-help{background:var(--paper-2);color:var(--muted);border-radius:2px} .trend-scale-strip strong,.trend-sparse-notice strong{color:var(--ink)} .inspected-value strong{font:300 34px var(--font-display);font-variation-settings:'opsz' 72;letter-spacing:-.02em} .inspected-game{border-color:var(--rule)} .volume-legend i{background:var(--praise)}.volume-legend>span:nth-child(2) i{background:var(--complaint)} .trend-scale-toast{background:var(--night-2);color:var(--bone);border-radius:2px} /* rank flow: the band carries the share; no underline bars */ .flow-share{display:none} .flow-connection{stroke:var(--rule);stroke-width:var(--w,1.25)} .flow-connection.selected,.flow-connection.highlighted{stroke-width:calc(var(--w,1.25) + 1.6)} .flow-game{fill:var(--ink);font:500 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase} .flow-label{fill:var(--ink)}.flow-rank,.flow-value{fill:var(--muted);font-family:var(--font-mono)} .flow-theme.selected .flow-label-hit{fill:var(--paper-2)}.flow-theme.highlighted .flow-label-hit{fill:var(--paper-2)} .flow-theme:focus-visible .flow-label-hit{stroke:var(--blue)} .flow-help{color:var(--muted)} .delta-summary{color:var(--ink)} .inspector-kicker{font:500 10px var(--font-mono);letter-spacing:.14em;color:var(--muted)} .inspector-definition h3{font:300 26px var(--font-display);font-variation-settings:'opsz' 72;letter-spacing:-.02em} .inspector-metric strong{font:300 34px var(--font-display);font-variation-settings:'opsz' 72;letter-spacing:-.02em} .inspector-trend,.inspector-review{border-color:var(--rule)} .selected-insight{background:var(--paper-2);color:var(--ink)} /* theme map */ .landscape-key>span:before{background:var(--praise)} .landscape-key>span:nth-child(2):before{background:var(--complaint)} .landscape-key>span:nth-child(3):before{background:var(--meta)} .landscape-scroll .landscape-axis{fill:var(--ink);font-family:var(--font-sans);font-size:12px} .landscape-scroll .landscape-label{fill:var(--ink);stroke:var(--panel);font-family:var(--font-sans);font-size:12px} .landscape-scroll .equality-label{fill:var(--muted)} /* language matrix */ .matrix-head{color:var(--muted)} .matrix-language,.matrix-count{color:var(--ink)} .heat-cell{background:color-mix(in srgb,var(--heat-color) calc(var(--heat)*100%),var(--paper-2));color:var(--ink);border-radius:2px} .heat-cell:hover{outline:2px solid var(--ink)} .heatmap-legend{color:var(--muted)} .heatmap-legend i{background:linear-gradient(90deg,var(--paper-2),var(--heat-color))} .volume-track button:first-child{background:var(--praise)}.volume-track button:last-child{background:var(--complaint)} /* library */ .library-count{color:var(--muted)} .review{border-color:var(--rule)} /* method */ .method-copy h2,.method-copy h3{color:var(--ink)} .taxonomy-caveat{color:var(--muted)} /* ==== The mosaic panel (theme-landscape.css) ========================= */ .atlas-theme-landscape{--atl-ink:var(--bone);--atl-muted:var(--bone-mute);--atl-rule:rgba(236,237,240,.12);background:var(--night);border:1px solid var(--rule-night);border-radius:2px} .atl-top{background:none;border-bottom:0} .atl-kicker{font:500 11px var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px} .atl-kicker::before{content:'';width:22px;height:1px;background:var(--gold)} .atl-top h2{font:300 36px/1.05 var(--font-display);font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--bone)} .atl-top p{color:var(--bone-soft)} .atl-key{color:var(--bone-mute)} .atl-swatch{border-radius:1px} .atl-swatch.atl-praise{background:var(--praise)}.atl-swatch.atl-complaint{background:var(--complaint)}.atl-swatch.atl-meta{background:var(--meta)} .atl-groups button{color:var(--bone-mute);border-radius:2px;font:500 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase} .atl-groups button:hover{background:rgba(236,237,240,.06)} .atl-groups button[aria-pressed=true]{background:var(--bone);color:var(--night);border-color:var(--bone)} .atl-selects label,.atl-reading label{color:var(--bone-mute);font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase} .atl-selects select,.atl-reading select{background:var(--night-2);color:var(--bone);border:1px solid rgba(236,237,240,.25);border-radius:2px} .atl-selects option,.atl-reading option{background:var(--night-2);color:var(--bone)} .atl-reading p{color:var(--bone-mute)} .atl-map-area{background:var(--night)} .atl-tile-inner{background:color-mix(in srgb,var(--praise) 30%,var(--night-2));border:1px solid rgba(236,237,240,.1);border-radius:2px} .atl-tile.atl-complaint .atl-tile-inner{background:color-mix(in srgb,var(--complaint) 58%,var(--night-2));border-color:rgba(236,237,240,.1)} .atl-tile.atl-meta .atl-tile-inner{background:color-mix(in srgb,var(--meta) 36%,var(--night-2));border-color:rgba(236,237,240,.1)} .atl-tile:hover .atl-tile-inner{border-color:rgba(236,237,240,.6);filter:brightness(1.1)} .atl-tile.is-selected .atl-tile-inner{border:2px solid var(--gold);background:color-mix(in srgb,var(--praise) 42%,var(--night-2));box-shadow:none} .atl-tile.is-selected.atl-complaint .atl-tile-inner{background:color-mix(in srgb,var(--complaint) 72%,var(--night-2))} .atl-tile.is-selected.atl-meta .atl-tile-inner{background:color-mix(in srgb,var(--meta) 50%,var(--night-2))} .atl-tile.is-large .atl-tile-inner{background-image:none} .atl-tile-label{color:var(--bone)} .atl-tile-count{font:300 22px/1.1 var(--font-display);font-variation-settings:'opsz' 72;letter-spacing:-.01em;color:var(--bone)} .atl-tile.is-large .atl-tile-count{font-size:52px} .atl-tile-count small,.atl-tile.is-large .atl-tile-count small{font:500 9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-mute)} .atl-tile-caption{color:var(--bone-mute)} .atl-tile-stat small{color:var(--bone-mute)}.atl-tile-stat b{font:300 20px var(--font-display);color:var(--bone)} .atl-tile-track{background:rgba(236,237,240,.12);height:2px} .atl-game-0{background:var(--bone)}.atl-game-1{background:var(--gold-soft)} .atl-map-note,.atl-mini-key,.atl-mini-key small{color:var(--bone-mute)} .atl-directory{color:var(--bone-mute)} .atl-directory summary>span{color:var(--bone-mute)} .atl-directory button{color:var(--bone-soft);border-color:rgba(236,237,240,.1)} .atl-directory button>span:last-child{color:var(--bone-mute)} .atl-directory button:hover,.atl-directory button[aria-pressed=true]{color:var(--gold-soft)} .atl-detail{background:var(--night-2);border-left:1px solid rgba(236,237,240,.1)} .atl-detail-kicker{font:500 10px var(--font-mono);letter-spacing:.14em;color:var(--bone-mute)} .atl-detail h3{font:300 34px/1.05 var(--font-display);font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--bone)} .atl-definition{color:var(--bone-soft)} .atl-caveat{color:var(--bone-soft);border-left-color:var(--gold)} .atl-metric-name{color:var(--bone-mute);font:500 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase} .atl-game-metrics strong{font:300 48px/1.05 var(--font-display);font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--bone)} .atl-game-metrics button:nth-child(2) strong{color:var(--gold-soft)} .atl-metric-bar{background:rgba(236,237,240,.12);height:2px} .atl-game-metrics small{color:var(--bone-mute)} .atl-game-metrics button{border-top-color:rgba(236,237,240,.12)} .atl-detail .button,.atl-detail button.button{background:var(--bone);border-color:var(--bone);color:var(--night)} /* ==== Feedback controls: colour mode and three display faces ========= */ /* Chosen from the header switcher or the Tweaks panel, remembered per browser, and mirrored into the URL (?mode=night&face=sans) so a look can be shared as a link. */ @font-face{font-family:'Instrument Serif';src:url('/assets/instrument-serif.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} html[data-face="instrument"]{--font-display:'Instrument Serif',Georgia,'Times New Roman',serif} html[data-face="sans"]{--font-display:'Atlas','DM Sans',-apple-system,BlinkMacSystemFont,sans-serif} html[data-face="sans"] .steam-copy h1,html[data-face="sans"] .hp-intro h2,html[data-face="sans"] .page-head h1{letter-spacing:-.03em} .tweaks{position:fixed;left:22px;bottom:20px;z-index:12;font:500 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase} .tweaks-toggle{background:var(--night-2);color:var(--bone);border:1px solid rgba(236,237,240,.2);border-radius:2px;padding:12px 14px;display:inline-flex;gap:10px;align-items:center;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;box-shadow:0 5px 20px rgba(0,0,0,.25)} .tweaks-toggle i{width:10px;height:10px;border-radius:50%;border:1px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)} .tweaks-panel{display:none;margin-bottom:8px;background:var(--night-2);color:var(--bone);border:1px solid rgba(236,237,240,.2);border-radius:2px;padding:14px 16px 16px;min-width:250px;box-shadow:0 12px 32px rgba(0,0,0,.35)} .tweaks.is-open .tweaks-panel{display:block} .tweaks-row{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}.tweaks-row:last-child{margin-bottom:0} .tweaks-row>span{color:var(--bone-mute);font-size:10px} .tweaks-options{display:flex;gap:4px;flex-wrap:wrap} .tweaks-options button{background:transparent;color:var(--bone-mute);border:1px solid rgba(236,237,240,.2);border-radius:2px;padding:8px 10px;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer} .tweaks-options button:hover{color:var(--bone);border-color:var(--bone)} .tweaks-options button[aria-pressed=true]{background:var(--bone);color:var(--night);border-color:var(--bone)} .tweaks-note{margin:12px 0 0;font:11px var(--font-sans);letter-spacing:0;text-transform:none;color:var(--bone-mute);max-width:250px} @media(max-width:700px){.tweaks{left:12px;bottom:12px}.tweaks-toggle{padding:10px 12px}.newsletter-float{bottom:64px}}