/* DB Quacks — shared styling for the static SEO landing pages.
 * Mirrors the in-app retro-arcade identity: Press Start 2P + VT323 (served
 * same-origin from /fonts), the two-tone pixel wordmark, arcade-button CTAs
 * with a stepped cyan glow, and a subtle CRT scanline overlay. Self-contained
 * (no CDN / no external requests) so it works under the app's CSP. */

@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/press-start-2p-v16-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VT323';
  src: url('/fonts/vt323-v18-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0b1121; /* deep cabinet blue-black */
  --panel: #0e1730; /* inset panel */
  --ink: #d3deea; /* body text */
  --dim: #8ba0b8; /* secondary text */
  --cyan: #22d3ee;
  --cyan-soft: #67e8f9;
  --magenta: #ff36ff;
  --green: #39ff5a; /* editor output green */
  --yellow: #ffd23f;
  --pixel: 'Press Start 2P', ui-monospace, monospace;
  --term: 'VT323', ui-monospace, 'Courier New', monospace;
  --code: 'Consolas', 'Monaco', 'Ubuntu Mono', monospace;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(ellipse 80% 45% at 50% -5%, rgba(34, 211, 238, 0.12), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 105%, rgba(255, 54, 255, 0.07), transparent 70%), var(--bg);
  color: var(--ink);
  font-family: var(--term);
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.4rem);
  line-height: 1.45;
  min-height: 100vh;
}

/* Static CRT scanline overlay — decorative, never blocks interaction. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px
  );
  mix-blend-mode: multiply;
}

.cabinet {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 1rem + 5vw, 4rem) 1.25rem 3.5rem;
}

/* Coin-op marquee eyebrow */
.eyebrow {
  font-family: var(--pixel);
  font-size: clamp(0.5rem, 0.42rem + 0.35vw, 0.68rem);
  letter-spacing: 0.22em;
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(34, 211, 238, 0.6);
  margin: 0 0 1.4rem;
  text-transform: uppercase;
}
.eyebrow .flick {
  color: var(--yellow);
}

/* Two-tone pixel wordmark headline (DB / QUACKS treatment) */
h1.wordmark {
  font-family: var(--pixel);
  font-size: clamp(1.5rem, 0.9rem + 4.6vw, 3rem);
  line-height: 1.16;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 1.2rem;
  word-break: break-word;
}
.wordmark .wm-a {
  color: var(--magenta);
  text-shadow:
    2px 2px 0 #900a90,
    4px 4px 0 #000;
}
.wordmark .wm-b {
  color: var(--cyan);
  text-shadow:
    2px 2px 0 #0a6a7a,
    4px 4px 0 #000;
}
/* Keyword-rich continuation of the H1, in the readable terminal face. */
.wordmark .wm-tail {
  display: block;
  font-family: var(--term);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--dim);
  text-shadow: none;
  margin-top: 0.7rem;
}

/* Terminal-prompt lead line */
.lead {
  font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.7rem);
  color: var(--ink);
  margin: 0 0 1.8rem;
}
.lead::before {
  content: '> ';
  color: var(--green);
  text-shadow: 0 0 6px rgba(57, 255, 90, 0.5);
}

/* Everything below is scoped to .cabinet (the landing-page hero + article
 * content) — NOT global element selectors. The header and footer are
 * SSR'd from the real app components and live outside .cabinet (siblings of
 * <main>), so a bare `a {}`/`ul {}`/`li {}` here would otherwise bleed onto
 * that injected chrome (e.g. an unwanted underline under the logo, or bogus
 * ▸ bullets on the footer's link list) and defeat the whole point of reusing
 * the real markup. */

.cabinet h2 {
  font-family: var(--term);
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.15;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 2.6rem 0 0.7rem;
}
.cabinet h2::before {
  content: '▚ ';
  color: var(--magenta);
}

.cabinet p {
  margin: 0 0 1rem;
}

.cabinet a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 211, 238, 0.4);
}
.cabinet a:hover {
  color: var(--cyan-soft);
  border-bottom-color: var(--cyan-soft);
}

.cabinet ul {
  padding-left: 0;
  list-style: none;
}
.cabinet li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}
.cabinet li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--cyan);
}
.cabinet li strong {
  color: var(--yellow);
  font-weight: 400;
}

.cabinet code {
  font-family: var(--code);
  font-size: 0.82em;
  background: var(--panel);
  border: 1px solid rgba(34, 211, 238, 0.25);
  padding: 0.05em 0.4em;
  border-radius: 3px;
  color: var(--cyan-soft);
}

.cabinet em {
  color: var(--dim);
  font-style: normal;
}

/* Arcade-button CTA — mirrors the in-app .arcade-btn (stepped hover glow). */
.cta {
  display: inline-block;
  font-family: var(--pixel);
  font-size: clamp(0.68rem, 0.58rem + 0.35vw, 0.82rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cyan);
  background: #111827;
  border: 2px solid var(--cyan);
  border-radius: 2px;
  padding: 0.95em 1.4em;
  margin: 0.6rem 0 1.6rem;
  image-rendering: pixelated;
  transition: all 0.15s step-end;
}
.cta:hover {
  background: #1e3a8a;
  color: var(--cyan-soft);
  box-shadow:
    0 0 10px rgba(34, 211, 238, 0.8),
    inset 0 0 10px rgba(34, 211, 238, 0.6);
  text-shadow: 0 0 5px var(--cyan);
}

/* Related + footer */
.related {
  margin-top: 3rem;
  border-top: 2px solid rgba(34, 211, 238, 0.2);
  padding-top: 1.4rem;
}

/* The header and footer chrome are NOT styled here. <!--SITE-HEADER--> and
 * <!--SITE-FOOTER--> are placeholders filled in at build time by
 * scripts/prerender-static-chrome.ts, which server-renders the app's own
 * <StaticSiteHeader> and <SiteFooter staticMode> components and links the
 * app's real compiled CSS bundle (<!--APP-CSS-->) — so this chrome is
 * generated from the same source as the live app and can't drift from it.
 * The one static-only addition: hide the native <details> disclosure
 * triangle on the [.] menu (the live app has no equivalent to duplicate). */
summary.arcade-btn {
  list-style: none;
}
summary.arcade-btn::-webkit-details-marker {
  display: none;
}
summary.arcade-btn::marker {
  content: '';
}

/* Accessibility */
a:focus-visible,
.cta:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cta {
    transition: none;
  }
}