/* ==========================================================
   Kernel Bender — shared styles
   html[data-theme="modern"]  (default, HUD look)
   html[data-theme="retro"]   (1990s RTS style)
   ========================================================== */

@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/PressStart2P-Regular.ttf") format("truetype");
  font-display: swap;
}

/* ---------- Modern (default) ---------- */
:root {
  --bg: #05080b;
  --panel: #0f1720;
  --raised: #16222f;
  --fg: #d8e2ec;
  --muted: #93a3b4;
  --usa: #39c6ff;
  --china: #ffa21f;
  --warn: #ffb43a;
  --red: #ff5050;
  --line: #22313f;
  --radius: 4px;
  --sans: "Bahnschrift", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background:
    linear-gradient(rgba(57,198,255,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(57,198,255,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg);
  color: var(--fg);
  font: 17px/1.6 var(--sans);
}
main { flex: 1; padding-top: 2.5rem; padding-bottom: 4rem; }
.wrap { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--usa); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--warn); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.15; font-weight: 700; letter-spacing: .01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 0 0 .75rem; }
h2 { font-size: 1.3rem; margin: 0 0 .5rem; }
h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
.muted { color: var(--muted); }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--warn); color: #000; padding: .5rem 1rem; z-index: 10; }
.skip-link:focus { left: 1rem; top: 1rem; }
.retro-only { display: none; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(5,8,11,.88);
  position: sticky; top: 0; z-index: 5;
}
.header-inner { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: .75rem 0; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--fg); text-decoration: none; white-space: nowrap; }
/* Logo: both copies are in the markup; the theme decides which one shows. */
.logo-modern, .logo-modern img { display: block; }
.logo-retro { display: none; }
.brand-logo { width: 52px; height: 52px; }
.brand-word { font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .12em; }
nav { margin-left: auto; }
.nav-list { list-style: none; display: flex; gap: .15rem; margin: 0; padding: 0; flex-wrap: wrap; }
.nav-list a {
  display: block; padding: .4rem .7rem; color: var(--muted); text-decoration: none;
  font: 600 .85rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em;
}
.nav-list a:hover { color: var(--fg); }
.nav-list a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--usa); }

.theme-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  font: 600 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .05em;
  padding: .5rem .7rem; border-radius: var(--radius); cursor: pointer;
  background: var(--panel); color: var(--muted); border: 1px solid var(--line);
}
.theme-toggle:hover { border-color: var(--warn); }
.tt-sep { opacity: .5; }
.theme-toggle[aria-pressed="false"] .tt-modern,
.theme-toggle[aria-pressed="true"] .tt-retro { color: var(--warn); }

/* Hero */
.eyebrow {
  font: 600 .78rem/1 var(--mono); color: var(--warn); text-transform: uppercase; letter-spacing: .16em; margin: 0 0 1rem;
}
.eyebrow::before { content: "// "; color: var(--muted); }
.t-main { display: block; }
.t-sub { display: block; font-size: .5em; color: var(--usa); font-weight: 600; letter-spacing: .06em; margin-top: .4rem; text-transform: uppercase; }
.tagline { font: 600 1.05rem/1.4 var(--mono); color: var(--china); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .05em; }
.lead { font-size: 1.12rem; color: var(--fg); max-width: 62ch; }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: center; padding: 1rem 0 3rem; }
.cta-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }

.btn {
  display: inline-block; padding: .75rem 1.2rem; border-radius: var(--radius); cursor: pointer;
  font: 700 .9rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  border: 1px solid var(--line); color: var(--fg); background: var(--raised);
}
.btn:hover { border-color: var(--usa); }
.btn-primary { background: var(--usa); border-color: var(--usa); color: #021018; }
.btn-primary:hover { filter: brightness(1.1); }

/* Panels / art */
.panel, .card, .art, .video-slot {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.panel { padding: 1.75rem; }
.art { margin: 0; overflow: hidden; }
.art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #000; }
.hero-art .art img { aspect-ratio: 16 / 9; }
.art figcaption { padding: .55rem .8rem; font: .8rem/1.4 var(--mono); color: var(--muted); display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.draft { color: var(--warn); text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }
.frame { position: relative; box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(0,0,0,.5); }
.frame::before, .frame::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--usa); z-index: 1; pointer-events: none;
}
.frame::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.frame::after { top: 6px; right: 6px; border-left: 0; border-bottom: 0; border-color: var(--china); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 3rem; }
.card { padding: 1.2rem 1.35rem; border-top: 2px solid var(--line); }
.card.usa { border-top-color: var(--usa); }
.card.china { border-top-color: var(--china); }
.card h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
.card p { margin: 0; color: var(--muted); }

.page-head { margin-bottom: 1.75rem; }
.prose { max-width: 70ch; }
.section-title {
  font: 700 .95rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--fg);
  margin: 3rem 0 1rem; display: flex; align-items: center; gap: .75rem;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.game-body .lead { margin-top: 0; }
.features { padding-left: 1.2rem; }
.features li { margin: .35rem 0; }
.features li::marker { color: var(--usa); }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0; }
.side { background: var(--raised); padding: 1rem 1.2rem; border-left: 3px solid var(--usa); border-radius: var(--radius); }
.side.china { border-left-color: var(--china); }
.side.usa h3 { color: var(--usa); }
.side.china h3 { color: var(--china); }
.side p { margin: 0; color: var(--muted); }
.setting { font-size: .95rem; color: var(--muted); border-left: 2px solid var(--warn); padding-left: .9rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }

/* Videos */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.video-grid--featured { grid-template-columns: minmax(0, 720px); }
.video-slot { margin: 0; overflow: hidden; }
.video-slot figcaption { padding: .55rem .8rem; font: .85rem/1.4 var(--mono); color: var(--muted); }
.video-frame { position: relative; background: #000; }
.video-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-placeholder { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.video-poster { width: 100%; height: 100%; object-fit: cover; opacity: .35; filter: grayscale(.4); }
.video-soon {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; text-align: center; padding: 1rem;
}
.video-soon strong { font: 700 1.1rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--warn); }
.video-soon span { font: .75rem/1.4 var(--mono); color: var(--fg); }
.lofi-source { display: none; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .sides { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .header-inner { gap: .6rem; }
  nav { margin-left: 0; order: 3; width: 100%; }
  .theme-toggle { margin-left: auto; }
  .brand-word { font-size: .95rem; }
  .brand-logo { width: 44px; height: 44px; }
  .panel { padding: 1.2rem; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font: .85rem/1.5 var(--mono); }
.footer-inner { padding: 1.5rem 0; }
.site-footer p { margin: .25rem 0; }

/* ==========================================================
   1990s RTS style theme: chunky bevels, olive/steel, bitmap type
   ========================================================== */
html[data-theme="retro"] {
  --r-olive: #4b5320;
  --r-olive-d: #343a16;
  --r-olive-l: #6b7535;
  --r-steel: #8a949c;
  --r-steel-l: #b9c1c7;
  --r-steel-d: #4d555b;
  --r-ink: #111;
  --r-hi: #e7ecef;
  --r-amber: #ffcc33;
  --r-green: #7cff4f;
  color-scheme: light;
}
html[data-theme="retro"] .retro-only { display: block; }
html[data-theme="retro"] body {
  font: 15px/1.55 "Courier New", Courier, monospace;
  color: var(--r-ink);
  /* 90s tiled wallpaper: dimmed, 16-colour logo shields (tools/make_logo_assets.py) */
  background-color: #24280f;
  background-image: url("assets/img/logo/tile-retro.png");
  background-repeat: repeat;
  background-size: 128px 128px;
}
html[data-theme="retro"] main {
  background: var(--r-steel-l);
  border: 4px solid; border-color: var(--r-hi) var(--r-steel-d) var(--r-steel-d) var(--r-hi);
  box-shadow: 0 0 0 2px #000;
  margin-top: 1rem; margin-bottom: 1rem; padding: 1.5rem 1.6rem 2rem;
}
html[data-theme="retro"] h1, html[data-theme="retro"] h2, html[data-theme="retro"] h3,
html[data-theme="retro"] .brand-word,
html[data-theme="retro"] .theme-toggle, html[data-theme="retro"] .construction,
html[data-theme="retro"] .counter-digits, html[data-theme="retro"] .badge,
html[data-theme="retro"] .nav-list a, html[data-theme="retro"] .btn,
html[data-theme="retro"] .now-playing, html[data-theme="retro"] .video-soon strong,
html[data-theme="retro"] .tagline, html[data-theme="retro"] .section-title,
html[data-theme="retro"] .eyebrow {
  font-family: "Press Start 2P", "Courier New", monospace; letter-spacing: 0; font-weight: 400;
}
html[data-theme="retro"] h1 { font-size: clamp(1rem, 2.8vw, 1.6rem); line-height: 1.5; color: var(--r-olive-d); text-shadow: 2px 2px 0 var(--r-hi); }
html[data-theme="retro"] .t-sub { font-size: .55em; color: #7a2a00; text-shadow: none; text-transform: uppercase; }
html[data-theme="retro"] h2 { font-size: .8rem; line-height: 1.6; color: var(--r-olive-d); }
html[data-theme="retro"] h3 { font-size: .7rem; line-height: 1.6; }
html[data-theme="retro"] .eyebrow { font-size: .6rem; color: #7a2a00; }
html[data-theme="retro"] .eyebrow::before { content: "> "; color: var(--r-olive-d); }
html[data-theme="retro"] .tagline { font-size: .65rem; line-height: 1.8; color: var(--r-ink); background: var(--r-amber); display: inline-block; padding: .35rem .5rem; border: 2px solid #000; }
html[data-theme="retro"] .lead, html[data-theme="retro"] .muted,
html[data-theme="retro"] .card p, html[data-theme="retro"] .side p, html[data-theme="retro"] .setting { color: var(--r-ink); }
html[data-theme="retro"] .lead { font-size: 1rem; }
html[data-theme="retro"] a { color: #0000cc; text-decoration: underline; }
html[data-theme="retro"] a:visited { color: #551a8b; }
html[data-theme="retro"] :focus-visible { outline: 3px dashed #000; outline-offset: 2px; }

html[data-theme="retro"] .site-header {
  position: static; background: var(--r-steel-d);
  border-bottom: 4px solid; border-color: #000;
}
html[data-theme="retro"] .logo-modern { display: none; }
html[data-theme="retro"] .logo-retro { display: block; }
html[data-theme="retro"] .brand-logo { width: 64px; height: 64px; image-rendering: pixelated; image-rendering: crisp-edges; }
html[data-theme="retro"] .brand-word { color: var(--r-amber); font-size: .8rem; text-shadow: 2px 2px 0 #000; }
html[data-theme="retro"] .nav-list a { color: var(--r-hi); font-size: .6rem; text-decoration: underline; padding: .5rem .55rem; }
html[data-theme="retro"] .nav-list a:hover { background: var(--r-olive); }
html[data-theme="retro"] .nav-list a[aria-current="page"] { background: #000; color: var(--r-green); box-shadow: none; }

/* Chunky bevels */
html[data-theme="retro"] .theme-toggle, html[data-theme="retro"] .btn {
  background: var(--r-steel); color: #000; border-radius: 0; text-decoration: none; text-transform: none;
  border: 4px solid; border-color: var(--r-hi) var(--r-steel-d) var(--r-steel-d) var(--r-hi);
  box-shadow: 0 0 0 2px #000; font-size: .6rem; line-height: 1.4; padding: .65rem .8rem;
}
html[data-theme="retro"] .theme-toggle { font-size: .55rem; }
html[data-theme="retro"] .theme-toggle .tt-opt { color: #333; }
html[data-theme="retro"] .theme-toggle[aria-pressed="true"] .tt-retro { color: #000; background: var(--r-amber); padding: .1rem .2rem; }
html[data-theme="retro"] .theme-toggle:active, html[data-theme="retro"] .btn:active { border-color: var(--r-steel-d) var(--r-hi) var(--r-hi) var(--r-steel-d); }
html[data-theme="retro"] .btn-primary { background: var(--r-amber); }
html[data-theme="retro"] .btn:visited { color: #000; }
html[data-theme="retro"] .btn:hover { filter: none; background: var(--r-hi); }

/* Marquee (CSS only) */
html[data-theme="retro"] .marquee {
  overflow: hidden; white-space: nowrap; background: #000; color: var(--r-green);
  font: bold .95rem/2 "Courier New", monospace; border-bottom: 2px solid var(--r-olive-l);
}
.marquee-track { display: inline-flex; animation: kb-marquee 26s linear infinite; }
.marquee-track span { padding-right: 3rem; }
@keyframes kb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Under construction */
html[data-theme="retro"] .construction {
  text-align: center; font-size: .65rem; line-height: 1.6; padding: .7rem; color: #000;
  background:
    linear-gradient(var(--r-amber), var(--r-amber)) center / min(440px, 88%) 70% no-repeat,
    repeating-linear-gradient(-45deg, var(--r-amber) 0 18px, #000 18px 36px);
}
.cone { color: #a00000; }

/* Panels */
html[data-theme="retro"] .panel, html[data-theme="retro"] .card, html[data-theme="retro"] .art,
html[data-theme="retro"] .side, html[data-theme="retro"] .video-slot {
  background: var(--r-steel); border-radius: 0;
  border: 4px solid; border-color: var(--r-hi) var(--r-steel-d) var(--r-steel-d) var(--r-hi);
  box-shadow: 0 0 0 2px #000;
}
html[data-theme="retro"] .card { border-top-width: 4px; }
html[data-theme="retro"] .card.usa h2 { color: #003a66; }
html[data-theme="retro"] .card.china h2 { color: #6b3a00; }
html[data-theme="retro"] .side.usa h3 { color: #003a66; }
html[data-theme="retro"] .side.china h3 { color: #6b3a00; }
html[data-theme="retro"] .art img { image-rendering: pixelated; border-bottom: 2px solid #000; }
html[data-theme="retro"] .art figcaption, html[data-theme="retro"] .video-slot figcaption { color: #000; font-family: "Courier New", monospace; font-weight: bold; }
html[data-theme="retro"] .draft { color: #7a2a00; }
html[data-theme="retro"] .frame { box-shadow: 0 0 0 2px #000; }
html[data-theme="retro"] .frame::before, html[data-theme="retro"] .frame::after { display: none; }
html[data-theme="retro"] .section-title { font-size: .75rem; color: #000; }
html[data-theme="retro"] .section-title::after { height: 4px; background: var(--r-steel-d); }
html[data-theme="retro"] .features li::marker { color: #000; }
html[data-theme="retro"] .features { list-style: square; }
html[data-theme="retro"] .setting { border-left: 4px solid var(--r-olive); }

/* Retro video: TV-monitor frame, 4:3, letterboxed */
html[data-theme="retro"] .video-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 360px)); }
html[data-theme="retro"] .video-grid--featured { grid-template-columns: minmax(0, 420px); }
html[data-theme="retro"] .video-slot { padding: 14px 14px 0; background: var(--r-steel-d); }
html[data-theme="retro"] .video-frame {
  aspect-ratio: 4 / 3; border-radius: 18px / 14px; overflow: hidden;
  border: 6px solid #1b1e20; box-shadow: inset 0 0 30px rgba(0,0,0,.9), 0 0 0 2px #000;
  display: flex; align-items: center; justify-content: center;
}
html[data-theme="retro"] .video-frame video { aspect-ratio: auto; width: 100%; height: 100%; object-fit: contain; }
html[data-theme="retro"] .video-placeholder { aspect-ratio: 4 / 3; width: 100%; }
html[data-theme="retro"] .video-poster { image-rendering: pixelated; opacity: .3; filter: grayscale(1) contrast(1.4); }
html[data-theme="retro"] .video-placeholder::after,
.lofi-scanlines {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
}
html[data-theme="retro"] .video-soon strong { font-size: .7rem; line-height: 1.6; color: var(--r-green); text-shadow: 0 0 6px rgba(124,255,79,.6); }
html[data-theme="retro"] .video-soon span { color: var(--r-hi); font-family: "Courier New", monospace; }
html[data-theme="retro"] .video-slot figcaption { color: var(--r-hi); padding: .6rem .2rem .7rem; }
html[data-theme="retro"] .now-playing {
  position: absolute; top: 8px; left: 10px; z-index: 2; font-size: .5rem; line-height: 1;
  color: var(--r-green); background: rgba(0,0,0,.7); padding: .3rem .4rem;
  animation: kb-blink 1.2s steps(2, start) infinite;
}
@keyframes kb-blink { to { visibility: hidden; } }
.lofi { width: 100%; height: 100%; display: flex; flex-direction: column; }
.lofi-screen { position: relative; flex: 1; background: #000; display: flex; align-items: center; justify-content: center; min-height: 0; }
.lofi-canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; cursor: pointer; }
.lofi-controls { display: flex; gap: .4rem; align-items: center; padding: .4rem; background: #1b1e20; }
html[data-theme="retro"] .lofi-btn { font-size: .5rem; padding: .4rem .5rem; }
.lofi-time { margin-left: auto; color: var(--r-green, #7cff4f); font: bold .8rem/1 "Courier New", monospace; }

/* Retro footer widgets */
html[data-theme="retro"] .site-footer {
  border-top: 4px solid #000; color: var(--r-hi); text-align: center; font-family: "Courier New", monospace;
  background: rgba(0,0,0,.78); /* solid backing so footer text stays readable over the tiled wallpaper */
}
html[data-theme="retro"] .site-footer a { color: var(--r-amber); }
html[data-theme="retro"] .site-footer a:visited { color: #ffe08a; }
html[data-theme="retro"] .retro-widgets p { margin: .6rem 0; }
html[data-theme="retro"] .counter-digits {
  display: inline-block; background: #000; color: var(--r-green); padding: .25rem .45rem;
  border: 3px solid; border-color: var(--r-steel-d) var(--r-hi) var(--r-hi) var(--r-steel-d); font-size: .75rem; letter-spacing: .15em;
}
html[data-theme="retro"] .guestbook { font-weight: bold; font-size: 1.05rem; }
html[data-theme="retro"] .badge {
  display: inline-block; font-size: .5rem; line-height: 1.6; padding: .45rem .6rem; color: #000; background: var(--r-steel-l);
  border: 3px solid; border-color: var(--r-hi) var(--r-steel-d) var(--r-steel-d) var(--r-hi);
}
html[data-theme="retro"] .site-footer small { color: #dfe5d0; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, html[data-theme="retro"] .now-playing { animation: none; }
  html[data-theme="retro"] .marquee { white-space: normal; text-align: center; }
  .marquee-track span + span { display: none; }
}

/* ---------- Faction tiles (Games): USA blue, China red, both themes ---------- */
.side.usa { background: linear-gradient(180deg, #0f2f57 0%, #0b2240 100%); border: 1px solid #2f6fb8; border-left: 4px solid #4da3ff; }
.side.china { background: linear-gradient(180deg, #5a1414 0%, #3f0d0d 100%); border: 1px solid #b83a3a; border-left: 4px solid #ff5a5a; }
.side.usa h3 { color: #8cc8ff; }
.side.china h3 { color: #ff9a9a; }
.side.usa p, .side.china p { color: #eef3f8; }
.side.usa p strong, .side.china p strong { color: #fff; }

html[data-theme="retro"] .side.usa,
html[data-theme="retro"] .side.china { border-radius: 0; border: 3px solid; }
html[data-theme="retro"] .side.usa { background: #1c3f9e; border-color: #6f8fe6 #0a1c4d #0a1c4d #6f8fe6; }
html[data-theme="retro"] .side.china { background: #9e1c1c; border-color: #e66f6f #4d0a0a #4d0a0a #e66f6f; }
html[data-theme="retro"] .side.usa h3,
html[data-theme="retro"] .side.china h3 { color: #ffcc33; text-shadow: 2px 2px 0 #000; }
html[data-theme="retro"] .side.usa p,
html[data-theme="retro"] .side.china p,
html[data-theme="retro"] .side.usa p strong,
html[data-theme="retro"] .side.china p strong { color: #fff; }