/* Cyberpunk theme, lifted from the approved demo (themes/4-cyberpunk.html). Linked last on every
   page so it overrides the family stylesheets. Works without JS; js/cyber.js adds glitch data-text. */

@font-face {font-family:"Orbitron";font-weight:500 700;font-display:swap;src:url("../fonts/orbitron-latin.woff2") format("woff2")}
@font-face {font-family:"Rajdhani";font-weight:400;font-display:swap;src:url("../fonts/rajdhani-400-latin.woff2") format("woff2")}
@font-face {font-family:"Rajdhani";font-weight:500;font-display:swap;src:url("../fonts/rajdhani-500-latin.woff2") format("woff2")}
@font-face {font-family:"Rajdhani";font-weight:600;font-display:swap;src:url("../fonts/rajdhani-600-latin.woff2") format("woff2")}
@font-face {font-family:"Rajdhani";font-weight:700;font-display:swap;src:url("../fonts/rajdhani-700-latin.woff2") format("woff2")}
@font-face {font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2")}
@font-face {font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2")}

/* Tokens (demo values) */
:root,:root[data-theme] {--bg:#0a0514;--bg-2: #140824;--ink:#e8f7ff;--muted:#9aa0c8;--cyan:#00f0ff;--mag:#ff2bd6;--line:rgba(0,240,255,.22);--cy-accent:var(--cyan);--cy-accent-2: var(--mag);--cy-floor:rgba(0,240,255,.22);--cy-card:rgba(20,8,36,.78);--cy-display:Orbitron,sans-serif;--cy-body:Rajdhani,system-ui,sans-serif;--cy-mono:"IBM Plex Mono",monospace; /* home.css family */ --bg-raise:var(--bg-2);--text:var(--ink);--text-2: var(--muted);--text-3: var(--muted);--serif:var(--cy-display);--mono:var(--cy-mono); /* blog (main.css) family + quiz */ --background:var(--bg);--background-secondary:var(--bg-2);--background-tertiary:#1c0d33;--background-elevated:#28134a;--foreground:var(--ink);--foreground-secondary:var(--muted);--foreground-tertiary:var(--muted);--accent-light:rgba(0,240,255,.16);--accent-lighter:rgba(0,240,255,.06);--accent-dark:#00d0de;--accent-darker:#00b4c0;--secondary-accent:var(--mag);--secondary-accent-light:rgba(255,43,214,.16);--font-sans:var(--cy-body);--font-serif:var(--cy-body);--font-mono:var(--cy-mono);--blog-surface:var(--cy-card);--blog-surface-soft:#1c0d33;--blog-border:var(--line);--blog-border-strong:rgba(0,240,255,.4);color-scheme:dark}
/* Values game/showcase CSS sets on <body>; recomputed there so per-game accents resolve. */
:root,:root[data-theme],:root body[class] {--bg:#0a0514;--bar:rgba(10,5,20,.9);--ink:#e8f7ff;--muted:#9aa0c8;--rule:var(--line);--accent:var(--cy-accent);--on-accent:#05010a;--link:var(--cy-accent);--sans:var(--cy-body);--display:var(--cy-display);--paper:var(--cy-card);--paper-ink:var(--ink);--paper-link:var(--cy-accent)}

/* Per-game accents, drawn from each game's existing CSS and art. */
html:root [data-game="aeon"] {--cy-blob:#ff2ea6;--cy-accent:#ff7ad6;--cy-accent-2: #7ef6ff;--cy-floor:rgba(255,62,184,.24)}
html:root [data-game="fickle"] {--cy-blob:#3c6eb8;--cy-accent:#9ec0ff;--cy-accent-2: #8ee7f2;--cy-floor:rgba(60,110,184,.32)}
html:root [data-game="city"] {--cy-blob:#8a5a32;--cy-accent:#f0c27a;--cy-accent-2: #d7a15a;--cy-floor:rgba(215,161,90,.2)}
html:root [data-game] {--accent:var(--cy-accent);--link:var(--cy-accent);--paper-link:var(--cy-accent);--line:color-mix(in srgb,var(--cy-accent) 26%,transparent);--rule:var(--line)}

/* Base */
html:root {background:var(--bg)}
:root body {background:transparent;color:var(--ink);font-family:var(--cy-body);line-height:1.45;overflow-x:hidden}
:root body :is(h1,h2) {font-family:var(--cy-display);font-weight:700;font-style:normal;text-transform:uppercase;letter-spacing:.01em;line-height:1.12}
:root body h3 {font-family:var(--cy-body);font-weight:700;font-style:normal;letter-spacing:.01em;line-height:1.2}
::selection {background:var(--cy-accent-2);color:#05010a}
:focus-visible {outline:2px solid var(--cy-accent) !important;outline-offset:3px}

/* Scanlines + vignette, perspective floor, glow blobs: all CSS, behind content, never catching taps. */
html::after {content:"";position:fixed;inset:0;z-index:80;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.5) 100%);mix-blend-mode:multiply}
:root body::before {content:"";position:fixed;left:-10%;right:-10%;bottom:-8%;height:58vh;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--cy-floor) 1px,transparent 1px),linear-gradient(90deg,var(--cy-floor) 1px,transparent 1px);background-size:60px 60px;transform:perspective(500px) rotateX(60deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 80%);mask-image:linear-gradient(to top,#000 0%,transparent 80%);animation:cy-gridscroll 12s linear infinite}
:root body::after {content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle 300px at calc(100% - 130px) 130px,color-mix(in srgb,var(--cy-blob,var(--mag)) 35%,transparent),transparent 100%),radial-gradient(circle 260px at 100px calc(90% - 180px),color-mix(in srgb,var(--cy-accent) 22%,transparent),transparent 100%)}
@keyframes cy-gridscroll {from {background-position:0 0} to {background-position:0 60px}}
@keyframes cy-flicker {0%, 19%, 21%, 23%, 80%, 100% {opacity:1} 20%, 22%, 81% {opacity:.15}}
@keyframes cy-shake {
  0%,100% {transform:none;text-shadow:2px 0 var(--cyan),-2px 0 var(--mag)}
  25% {transform:translate(-1px,1px)}
  50% {transform:translate(1px,-1px)}
  75% {transform:translate(-1px,0)}
}
@keyframes cy-slash {from {transform:translateX(-60%)} to {transform:translateX(60%)}}

/* RGB glitch (js/cyber.js adds .cy-glitch + data-text) */
.cy-glitch {position:relative}
.cy-glitch:not(#_)::before,.cy-glitch:not(#_)::after {content:attr(data-text);display:block;position:absolute;left:0;top:0;width:100%;height:auto;margin:0;overflow:hidden;pointer-events:none;opacity:0;background:none;border:0}
.cy-glitch:hover {animation:cy-shake .3s linear}
.cy-glitch:not(#_):hover::before {opacity:.85;color:var(--cyan);transform:translate(-3px,0);clip-path:inset(0 0 55% 0);mix-blend-mode:screen}
.cy-glitch:not(#_):hover::after {opacity:.85;color:var(--mag);transform:translate(3px,0);clip-path:inset(55% 0 0 0);mix-blend-mode:screen}

/* SIGNAL / LIVE logo */
:is(.wordmark,.bar .mark,.blog-topbar-home):not(#_) {font-family:var(--cy-display);font-weight:700;font-style:normal;font-size:15px;letter-spacing:.04em;text-transform:uppercase;line-height:1.2;color:var(--ink);text-decoration:none}
:is(.wordmark,.bar .mark,.blog-topbar-home,.chess-page .top h1,.legal-container,#landing > .container)::before {content:"SIGNAL / LIVE";content:"SIGNAL / LIVE" / "";display:block;font:400 10px/1.2 var(--cy-mono);color:var(--cy-accent-2);letter-spacing:.18em;text-transform:uppercase;margin-bottom:3px;animation:cy-flicker 4.5s step-end infinite}
.blog-topbar-home:not(#_) {display:inline-grid;grid-template-columns:auto auto;align-items:center;column-gap:6px}
.blog-topbar-home::before {grid-column:1 / -1}

/* Bars (home .mast, games .bar, blog topbar) */
/* No backdrop-filter on .mast/.bar: it would trap the fixed mobile nav inside the bar. */
:root :is(.mast,.bar,.blog-topbar) {background:rgba(10,5,20,.94);border-top:0;border-bottom:1px solid var(--line)}
/* Game, support and privacy pages: the sticky bar is fully opaque so content never shows through it. */
:root .bar {background:#0a0514}
.mast {height:auto;min-height:var(--mast)}
.mast-inner {min-height:var(--mast);padding-top:10px;padding-bottom:10px}
:is(.mast,.bar) .nav a:not(#_) {font-family:var(--cy-body);font-size:16px;font-weight:600;font-variant:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:0}
:is(.mast,.bar) .nav a:not(#_):is(:hover,.active,[aria-current]) {color:var(--cy-accent);text-shadow:0 0 10px var(--cy-accent)}
.mast .nav {gap:2px 18px}
@media (min-width: 1081px) {
  .mast .nav {gap:2px 14px;flex-wrap:nowrap}
  .mast .nav a:not(#_) {font-size:14px;letter-spacing:.06em;white-space:nowrap}
  .mast-ext span {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
.mast-ext:hover {color:var(--cy-accent);border-bottom-color:var(--cy-accent)}
/* Dark only: the light/dark toggle has nothing to switch. */
#theme-toggle {display:none !important}
@media (max-width: 1080px) {
  :root .mast .nav {background:rgba(10,5,20,.97)}
  .mast .nav a:not(#_) {font-size:1.3rem;padding:12px 0;border-bottom:1px solid var(--line)}
}
@media (max-width: 860px) {
  :root .bar .nav {background:#0a0514}
  .bar-actions {margin-left:auto}
  .bar .nav a:not(#_) {font-size:1.3rem;padding:12px 0;border-bottom:1px solid var(--line)}
}

/* Kickers, tags, captions (IBM Plex Mono) */
.hero-name:not(#_) {font:400 11px/1.4 var(--cy-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
:is(.kicker,.sec-index,.log-tag,.pub-year,.date,.soon,.coming,.org-title,.product-meta,.model-meta,.floor,.readout dt,.report dt,.plate dt,.blog-header-label,.featured-badge,.blog-post-category,.blog-post-meta,.author-bio-label,.network-ad-label,.fen small):not(#_) {font-family:var(--cy-mono);font-size:10px;font-weight:400;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--cy-accent);opacity:1}
.product-meta a:not(#_) {font-family:var(--cy-mono);font-size:10px;color:var(--cy-accent-2)}
.stack h3:not(#_) {font-family:var(--cy-mono);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--cy-accent)}
:is(.portrait figcaption):not(#_) {background:none;padding:0;margin-top:10px;font:400 11px/1.4 var(--cy-mono);color:var(--cyan);letter-spacing:.1em;text-transform:uppercase}

/* Buttons (.btn = cyan solid, ghost = magenta outline) */
:root :is(main,#maincontent) .btn:not(#_) {display:inline-flex;align-items:center;gap:8px;min-height:0;padding:10px 18px;font-family:var(--cy-body);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:0;line-height:1.2}
:root .btn-solid:not(#_) {background:var(--cy-accent);color:#05010a;border:1px solid var(--cy-accent);box-shadow:0 0 18px color-mix(in srgb,var(--cy-accent) 45%,transparent)}
:root .btn-line:not(#_) {background:transparent;color:var(--cy-accent-2);border:1px solid var(--cy-accent-2);box-shadow:0 0 12px color-mix(in srgb,var(--cy-accent-2) 30%,transparent)}
:root .btn:not(#_):hover:not([aria-disabled="true"]) {filter:brightness(1.1)}
/* "Coming soon to Steam" labels (js/steam.js swaps them for links): full-strength colours, dashed edge. */
:root .btn[aria-disabled="true"]:not(#_) {opacity:1;border-style:dashed;box-shadow:none;filter:none;cursor:not-allowed}
:root .btn-line[aria-disabled="true"]:not(#_) {padding:10px 18px}
.models-foot .btn-line,.hero-cta .btn-line {padding:10px 18px}

/* Home hero */
:root .hero {background:transparent;overflow:visible;padding:24px 0 0}
.hero-copy::before {display:none}
.hero-layout {grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;min-height:calc(100vh - 200px);padding:24px 0 56px}
:root .hero h1 {font-size:clamp(28px,3.6vw,52px);line-height:1.12;letter-spacing:.01em;font-weight:700}
:root .h1-cont {display:inline;font-style:normal;font-weight:700}
.lead {margin-top:20px;color:var(--muted);font-size:18px;max-width:40em;line-height:1.45}
.hero-cta {gap:12px;margin-top:28px}
.hub-line,.hub-line a {color:var(--muted)}
.hub-line strong {font-family:var(--cy-display);color:var(--cyan);font-size:1rem}
.social a {color:var(--muted)}
.social a:hover {color:var(--cyan);filter:drop-shadow(0 0 6px var(--cyan))}
.portrait {margin:0}
.portrait::before {display:none}
.portrait picture {display:block;position:relative;overflow:hidden;aspect-ratio:1;border:1px solid var(--cyan);box-shadow:0 0 0 1px var(--mag),0 0 40px rgba(0,240,255,.2)}
.portrait picture::after {content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(120deg,transparent 40%,rgba(0,240,255,.12) 50%,transparent 60%);animation:cy-slash 5s linear infinite}
:root .portrait img {border:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.1) saturate(1.1)}

/* Stats */
:root .facts {grid-template-columns:repeat(4,1fr);gap:12px;background:none;border:0;margin:0 0 88px}
:root .facts > div {display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:16px;border:1px solid var(--line);background:rgba(20,8,36,.75)}
:root .facts dd {font-family:var(--cy-display);font-size:24px;font-weight:700;color:var(--cyan);letter-spacing:0}
:root .facts dt {margin:0;font-size:14px;color:var(--muted)}

/* Sections */
:root .section {border-top:0;padding:24px 0 88px}
:root .page-intro {padding-top:48px;padding-bottom:8px}
.section-head {margin-bottom:22px;align-items:baseline}
:root .section-head :is(h1,h2),:root .legal h2 {font-size:22px;letter-spacing:.06em}
:root .section-head h1 {font-size:clamp(28px,3.6vw,52px);letter-spacing:.01em}
:is(.section-sub,.fine,.lead-sm,.about-p,.legal,.product-support,.note) a {color:var(--cyan)}
.note em {font-family:inherit;font-style:italic;color:var(--ink)}

/* Cards: every list row from the old folio becomes a demo .card. */
:root :is(.feature,.entry,.model-lead,.model-row,.log-row,.edu-grid .card,.pub,.stack > div,.product-index > li,.product,.game-home > li,.billboard,.tile,.play,.lower-third,.city-body,.plate,.doc,.blog-post,.blog-post-featured,.author-bio,.blog-post-toc,.legal-container,.network-ad) {background:var(--cy-card);border:1px solid var(--line);border-radius:0;box-shadow:none;padding:20px;transition:border-color .15s,box-shadow .15s,transform .15s}
:root :is(.entry,.model-row,.log-row,.edu-grid .card,.pub,.stack > div,.product-index > li,.product,.game-home > li,.billboard,.tile,.blog-post,.blog-post-featured):hover {border-color:var(--cy-accent-2);box-shadow:0 0 24px color-mix(in srgb,var(--cy-accent-2) 22%,transparent),inset 0 0 24px rgba(0,240,255,.05);transform:translateY(-3px)}
:root :is(.entry-list,.model-index,.log,.pubs,.catalog,.game-home) {border-top:0;display:grid;gap:14px;margin-top:14px}
:root .model-lead {margin-bottom:0}
:root .stack {border-top:0;padding-top:0;gap:14px}
:root .product-index {border-top:0;gap:14px}
:root .product-index > li:is(:nth-child(odd),:nth-child(even)) {padding:16px 20px;border:1px solid var(--line)}
:root .product-index > li:hover {border-color:var(--cy-accent-2)}
:root .product-index > li > a {font-family:var(--cy-body);font-weight:700;font-size:20px}
:root :is(.entry,.model-row,.log-row,.card,.pub,.product,.game-home li,.feature,.model-lead) :is(p,.blurb,.log-body p,.muted) {color:var(--muted)}
:root :is(.entry,.model-row,.log-row,.card,.pub,.product,.game-home li,.feature,.model-lead,.contact-list,.org-links) h3 {font-size:22px;margin-bottom:6px}
:root :is(.model-lead,.model-row,.card,.pub,.product,.game-home li) h3 a:hover {color:var(--cy-accent);text-shadow:0 0 10px var(--cy-accent)}
:root :is(.metrics span,.log-fig strong,.product-price strong) {font-family:var(--cy-display);color:var(--cyan);font-size:22px;letter-spacing:0}
.steps li::marker {color:var(--cyan);font-family:var(--cy-mono)}
summary {color:var(--cyan);font-family:var(--cy-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.pub-link,.pubs-more {color:var(--mag);font-family:var(--cy-mono);font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.game-home img {border:1px solid var(--line)}
.org-links a:hover,.contact-list a:hover,.contact-list a:hover .icon {color:var(--cyan)}

/* Footer (demo footer.site) */
:root footer,:root .footer {background:transparent;border-top:1px solid var(--line);padding:28px 0 48px;margin-top:0;color:var(--muted);font-size:14px;position:relative}
:root .footer {padding-left:0;padding-right:0}
.bar ~ main + .footer .footer-inner,.games-index .footer .footer-inner {width:min(1120px,calc(100% - 48px));margin:0 auto}
:root :is(footer,.footer) a {color:var(--muted);text-decoration:none;border-bottom:0}
:root :is(footer,.footer) a:hover {color:var(--cyan)}
:root footer p {color:var(--muted)}

/* Blog (main.css family) */
:root .blog-page,:root .blog-page #maincontent {background:transparent}
:root #blog-header {border-bottom:1px solid var(--line)}
:root #blog-header h1,:root #blog-post-header h1 {font-family:var(--cy-display);font-weight:700;letter-spacing:.01em;color:var(--ink);font-size:clamp(28px,3.6vw,52px)}
:root .blog-post-full :is(h2,h3) {font-family:var(--cy-display);font-weight:700;color:var(--ink)}
:root .blog-post-full h3 {font-size:1.15rem}
:root .blog-post-full :is(p,li) {font-family:var(--cy-body);font-size:1.2rem;color:var(--ink)}
:root .blog-post-full :is(code,pre) {font-family:var(--cy-mono);background:#140824;border:1px solid var(--line);color:var(--ink)}
:root .blog-post-full blockquote {border-left:2px solid var(--mag);color:var(--muted)}
:root .blog-grid {display:grid;gap:14px}
:root #featured-slot {margin-bottom:14px}
:root .blog-post-content {padding:0}
:root :is(.blog-post,.blog-post-featured) h2 {font-family:var(--cy-body);font-weight:700;text-transform:none;font-size:22px;letter-spacing:.01em}
:root .blog-post-featured h2 {font-size:26px}
:root :is(.blog-post,.blog-post-featured) h2 a:hover {color:var(--cyan);text-shadow:0 0 10px var(--cyan)}
:root .blog-post-tags .tag {font-family:var(--cy-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
:root .read-more {color:var(--mag);border-bottom-color:var(--mag);font-family:var(--cy-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
:root .category-filter {font-family:var(--cy-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
:root .category-filter:hover {color:var(--cyan);border-bottom-color:var(--cyan)}
:root .category-filter.active {color:var(--cyan);border-bottom-color:var(--cyan);text-shadow:0 0 10px var(--cyan)}
:root .blog-post-toc-link {color:var(--muted)}
:root .blog-post-toc-link:is(:hover,.is-active) {color:var(--cyan)}
:root .reading-progress {background:linear-gradient(90deg,var(--cyan),var(--mag))}
:root .blog-post-image-full {border-color:var(--cyan);box-shadow:0 0 0 1px var(--mag),0 0 40px rgba(0,240,255,.2)}
:root .author-bio-links a {color:var(--cyan)}
:root .footer-links a {color:var(--muted)}
:root .footer-links a:hover {color:var(--cyan)}

/* Games */
:root .stage {background:transparent}
.aeon .stage::after {display:none}
.tower {background:repeating-linear-gradient(to bottom,transparent 0 34px,var(--cy-accent) 34px 37px,transparent 37px 46px);box-shadow:16px 0 0 color-mix(in srgb,var(--cy-accent-2) 28%,transparent);opacity:.7}
:root .aeon-marquee img,:root :is(.billboard-art,.fickle-art,.city-art) img {box-shadow:0 0 0 1px var(--cy-accent-2),0 0 40px color-mix(in srgb,var(--cy-accent) 25%,transparent);border:1px solid var(--cy-accent)}
:root .aeon-marquee .coming {background:var(--bg)}
:root .lower-third {border-color:var(--cy-accent);box-shadow:0 0 0 1px var(--cy-accent-2),0 0 40px color-mix(in srgb,var(--cy-accent) 20%,transparent)}
:root :is(.lede,.lower-third .lede,.city .lede,.fickle .lede) {color:var(--muted);font-family:var(--cy-body);font-size:18px}
:root :is(.missing,.note,.city .note,.fickle .missing,.city .missing) {color:var(--muted);border-color:var(--line)}
:root .climb section {border-top-color:var(--line)}
:root .climb h2 {font-size:14px;letter-spacing:.12em}
:root .readout dd,:root .report dd,:root .plate dd {font-family:var(--cy-body);font-size:1.2rem;font-weight:600;color:var(--ink)}
:root .aeon h1,:root .lower-third h1 {font-size:clamp(1.4rem,3vw,2rem)}
/* Fickle */
:root .fickle .stage {background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;color:var(--ink)}
:root .fickle h1 {font-size:clamp(3rem,13vw,8.5rem);line-height:.95;letter-spacing:.02em;color:var(--ink);text-shadow:0 0 24px color-mix(in srgb,var(--cy-accent) 45%,transparent)}
:root .fickle h1 em {font-style:normal;color:var(--cy-accent)}
:root .ink-shadow {color:color-mix(in srgb,var(--cy-accent-2) 35%,transparent);left:8px;top:8px;text-shadow:none}
:root .fickle .coming {color:var(--cy-accent)}
:root .fickle-word {border-right-color:var(--line)}
:root .fickle-word p {color:var(--muted)}
:root .plate {color:var(--ink)}
:root .plate h2 {font-family:var(--cy-display);font-size:14px;letter-spacing:.12em}
:root .plate a {color:var(--cy-accent)}
/* City */
:root .horizon {background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--bg-2) 70%,transparent) 42%,color-mix(in srgb,var(--cy-accent-2) 38%,transparent) 68%,transparent 68.4%)}
:root .haze {background:linear-gradient(transparent,color-mix(in srgb,var(--cy-accent-2) 24%,transparent))}
:root .skyline span {background:#05020c;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--cy-accent) 40%,transparent)}
:root .horizon-inner::before {background:linear-gradient(90deg,rgba(10,5,20,.92) 0 62%,rgba(10,5,20,.35) 88%,transparent)}
:root :is(.horizon,.city-body) {color:var(--ink)}
:root :is(.horizon,.city-body) a {color:var(--cy-accent)}
:root .city h1 {font-size:clamp(2.6rem,8vw,6rem);line-height:.95}
:root .city h1 span {font-style:normal}
:root .horizon-rule {background:var(--cy-accent);box-shadow:0 0 12px var(--cy-accent)}
:root .city-body {box-shadow:0 0 0 1px color-mix(in srgb,var(--cy-accent-2) 50%,transparent),0 0 40px color-mix(in srgb,var(--cy-accent) 15%,transparent)}
:root :is(.report,.report div) {border-color:var(--line)}
/* Doc pages (support / privacy) */
:root .doc h1 {font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.12}
:root .doc h2 {font-size:1.1rem;letter-spacing:.06em}
:root .doc :is(p,li) {color:var(--muted)}
:root .doc strong {color:var(--ink)}
:root .doc a {color:var(--cy-accent)}
:root .draft-banner {background:transparent;color:var(--cy-accent-2);border:1px dashed var(--cy-accent-2)}
/* Showcase (games/index.html) */
:root :is(.billboard,.tile) {padding:0;overflow:hidden;color:var(--ink)}
:root :is(.billboard-bar,.tile-bar) {background:transparent;color:var(--ink);padding:12px 14px 16px}
:root :is(.billboard,.tile,.play) h2 {font-size:22px;font-family:var(--cy-body);text-transform:none;letter-spacing:.01em;margin:4px 0 6px}
:root :is(.billboard,.tile) h2 a {color:var(--ink)}
:root :is(.billboard,.tile) h2 a:hover {color:var(--cy-accent);text-decoration:none}
:root :is(.blurb,.meta,.play p) {color:var(--muted);opacity:1}
:root .play {color:var(--ink)}
:root :is(.billboard-art,.fickle-art,.city-art) {background:var(--bg-2)}
:root :is(.billboard-art,.fickle-art,.city-art) img {border:0;box-shadow:none}
.showcase .duo {gap:14px;margin-top:14px}

/* Chess (keep the board's own squares for legibility) */
.chess-page {color:var(--ink)}
.chess-page .top h1 {font-size:clamp(28px,3.6vw,52px)}
.chess-page .home,.chess-privacy a {color:var(--muted);border-bottom:1px solid var(--line);font-family:var(--cy-body);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.chess-page .home:hover,.chess-privacy a:hover {color:var(--cyan)}
.chess-page .status {background:var(--cy-card);border-left:4px solid var(--cyan);font-family:var(--cy-display);font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.chess-page .status.check {border-left-color:var(--mag);color:#ffd6f6}
.chess-page .board-frame {background:var(--bg-2);border:1px solid var(--cyan);box-shadow:0 0 0 1px var(--mag),0 0 40px rgba(0,240,255,.2);padding:12px}
.chess-page :is(.fen,.history,.engine) {background:var(--cy-card);border:1px solid var(--line);color:var(--ink)}
.chess-page :is(.history strong,label) {font-family:var(--cy-body);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.chess-page #fenString,.chess-page .history {font-family:var(--cy-mono)}
.chess-page :is(select,.move-entry) {background:#140824;color:var(--ink);border:1px solid var(--line);font-family:var(--cy-body);font-size:1.05rem;border-radius:0}
.chess-page button:not(.fen) {background:transparent;color:var(--cyan);border:1px solid var(--cyan);font-family:var(--cy-body);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px}
.chess-page button:not(.fen):hover {background:rgba(0,240,255,.12)}
.chess-page .promo {background:var(--bg-2);color:var(--ink);border:1px solid var(--mag)}

/* Legal pages on layout.css */
.legal-container {color:var(--ink);font-family:var(--cy-body);font-size:1.1rem;margin:48px auto;position:relative}
.legal-container :is(p,li) {color:var(--muted)}
.legal-container h1 {font-size:clamp(28px,3.6vw,52px)}
.legal-container h2 {font-size:1.1rem;letter-spacing:.06em}
.legal-container .updated {color:var(--cyan);font-family:var(--cy-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.legal-container a {color:var(--cyan)}
.legal-container strong {color:var(--ink)}

/* CompTIA quiz: tokens do most of it */
#landing > .container::before {text-align:center}
:root #landing h1 {font-size:clamp(28px,3.6vw,52px)}

/* Responsive */
@media (max-width: 860px) {
  .hero-layout {grid-template-columns:1fr;min-height:0;gap:24px}
  :root .facts {grid-template-columns:1fr 1fr;margin-bottom:56px}
  :root .product-index {grid-template-columns:1fr}
}
@media (max-width: 480px) {
  :root .facts {grid-template-columns:1fr}
  :root .entry,:root .model-row,:root .log-row,:root .pub,:root .product {padding:16px}
}

/* Issue tracker links (PR #47): "Report a bug" / "See known issues" on support pages render as accent buttons; game-page button reuses .btn-line. */
:root .doc ul:has(a[href*="-issues/issues"]) {list-style:none;padding:0;margin:14px 0 6px;display:flex;flex-wrap:wrap;gap:10px}
:root .doc ul:has(a[href*="-issues/issues"]) > li {margin:0;padding:0}
:root .doc ul:has(a[href*="-issues/issues"]) > li::before,:root .doc ul:has(a[href*="-issues/issues"]) > li::marker {content:none}
:root .doc a[href*="-issues/issues"]:not(#_) {display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;font:700 13px/1.2 var(--cy-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid var(--cy-accent-2);color:var(--cy-accent-2);background:transparent;box-shadow:0 0 12px color-mix(in srgb,var(--cy-accent-2) 30%,transparent);max-width:100%;transition:box-shadow .15s,background-color .15s}
:root .doc a[href$="/issues/new/choose"]:not(#_) {background:var(--cy-accent);border-color:var(--cy-accent);color:#05010a;box-shadow:0 0 16px color-mix(in srgb,var(--cy-accent) 45%,transparent)}
:root .doc a[href*="-issues/issues"]:not(#_):hover {box-shadow:0 0 22px color-mix(in srgb,var(--cy-accent-2) 55%,transparent)}
:root .doc a[href$="/issues/new/choose"]:not(#_):hover {box-shadow:0 0 24px color-mix(in srgb,var(--cy-accent) 65%,transparent)}
:root .doc .todo {color:var(--cy-accent-2);font-family:var(--cy-mono);font-size:.85em;letter-spacing:.08em}
:root .actions .btn {max-width:100%}

/* Reduced motion: static floor, no flicker, no glitch */
@media (prefers-reduced-motion: reduce) {
  :root body::before, .portrait picture::after,
  :is(.wordmark,.bar .mark,.blog-topbar-home,.chess-page .top h1,.legal-container,#landing > .container)::before {animation:none !important}
  .cy-glitch:hover {animation:none !important}
  :root .doc a[href*="-issues/issues"] {transition:none}
  .cy-glitch:not(#_):hover::before,.cy-glitch:not(#_):hover::after {opacity:0}
  :root :is(.entry,.model-row,.log-row,.edu-grid .card,.pub,.stack > div,.product-index > li,.product,.game-home > li,.billboard,.tile,.blog-post,.blog-post-featured):hover {transform:none}
}

/* Cards that sit on top of art need a solid face so text stays legible. */
:root :is(.lower-third,.city-body) {background:rgba(20,8,36,.96)}
:root .doc code {overflow-wrap:anywhere}