/* ==========================================================================
   STAR TRADERS 64 — retro C64/CRT landing page
   Pure CSS, no frameworks, no external fonts. Palette = C64.
   ========================================================================== */

:root {
  --c64-bg:     #352879;
  --c64-border: #6c5eb5;
  --c64-light:  #a59ae0;
  --c64-white:  #ffffff;
  --c64-yellow: #d5df7c;
  --c64-green:  #9ad284;
  --c64-red:    #e08884;
  --c64-cyan:   #86d6dd;
  --c64-dark:   #241b54;   /* code background */
  --room:       #0d0a1f;   /* the dark room behind the monitor */
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas,
          "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 32px 12px 48px;
  background-color: var(--room);
  /* tiled starfield, two layers for a pseudo-random sky */
  background-image:
    radial-gradient(1px 1px at 25px 35px,  rgba(255,255,255,.7), transparent 1.5px),
    radial-gradient(1px 1px at 120px 90px, rgba(165,154,224,.8), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 200px 20px, rgba(134,214,221,.7), transparent 2px),
    radial-gradient(1px 1px at 80px 160px, rgba(255,255,255,.45), transparent 1.5px),
    radial-gradient(1px 1px at 170px 140px, rgba(213,223,124,.55), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 40px 110px, rgba(255,255,255,.35), transparent 2px);
  background-size: 240px 200px;
  color: var(--c64-light);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
}

::selection { background: var(--c64-yellow); color: var(--c64-bg); }

/* --------------------------------------------------------------------------
   The monitor: bezel + screen + CRT overlays
   -------------------------------------------------------------------------- */

.crt {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  border: 22px solid var(--c64-border);
  border-radius: 22px;
  background: var(--c64-bg);
  box-shadow:
    0 0 0 2px #241b54,
    0 0 70px rgba(108, 94, 181, .38),
    0 24px 80px rgba(0, 0, 0, .6);
  overflow: hidden;
}

.screen {
  position: relative;
  padding: 30px 36px 44px;
  border-radius: 12px;
}

/* rolling refresh band (very subtle, GPU-cheap transform) */
.crt::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -30%;
  height: 22%;
  background: linear-gradient(180deg,
    transparent,
    rgba(255, 255, 255, .035) 50%,
    transparent);
  pointer-events: none;
  z-index: 6;
  animation: crt-roll 9s linear infinite;
}

/* scanlines + vignette + faint phosphor flicker */
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  background:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .16) 0px,
      rgba(0, 0, 0, .16) 1px,
      transparent 1px,
      transparent 3px),
    radial-gradient(ellipse at center,
      transparent 58%,
      rgba(13, 10, 31, .42) 100%);
  animation: crt-flicker 4s steps(2) infinite;
}

@keyframes crt-roll {
  from { transform: translateY(0); }
  to   { transform: translateY(650%); }
}

@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: .94; }
}

/* --------------------------------------------------------------------------
   Boot sequence + blinking cursor
   -------------------------------------------------------------------------- */

.boot { margin-bottom: 26px; color: var(--c64-light); }
.boot p { margin: 0; min-height: 1.55em; }
.boot-head {
  color: var(--c64-white);
  text-align: center;
  letter-spacing: .08em;
  text-shadow: 0 0 8px rgba(255, 255, 255, .35);
}
.boot-sub { text-align: center; color: var(--c64-light); }
.boot-ready { margin-top: 1em !important; }
#boot-seq p { color: var(--c64-light); }

.cursor {
  display: inline-block;
  width: .62em;
  height: 1.05em;
  margin-left: 1px;
  background: currentColor;
  vertical-align: text-bottom;
  animation: blink 1.06s steps(1) infinite;
}

@keyframes blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   ASCII logo — C64 rainbow stripes clipped into block letters
   -------------------------------------------------------------------------- */

.logo {
  width: max-content;
  max-width: 100%;
  margin: 18px auto 6px;
  padding: 0;
  font-size: clamp(6px, 1.55vw, 13px);
  line-height: 1.12;
  color: var(--c64-light); /* fallback when background-clip: text is unsupported */
  filter: drop-shadow(0 0 10px rgba(213, 223, 124, .22));
  overflow-x: auto;
}

/* C64 rainbow stripes clipped into the letters where supported */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .logo {
    background: linear-gradient(180deg,
      var(--c64-red)    0%   19%,
      var(--c64-yellow) 19%  38%,
      var(--c64-green)  38%  60%,
      var(--c64-cyan)   60%  80%,
      var(--c64-light)  80% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.tagline {
  text-align: center;
  color: var(--c64-cyan);
  margin: 4px 0 24px;
  letter-spacing: .06em;
  text-shadow: 0 0 8px rgba(134, 214, 221, .35);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Hero, CTA buttons, mini-nav
   -------------------------------------------------------------------------- */

.hero { margin: 0 auto 18px; max-width: 62ch; text-align: center; }
.hero strong { color: var(--c64-white); }
.hero em { color: var(--c64-yellow); font-style: normal; }

.cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 26px 0 10px;
}

.btn {
  display: block;
  padding: 16px 14px;
  border: 3px solid var(--c64-yellow);
  color: var(--c64-yellow);
  background: rgba(213, 223, 124, .06);
  text-align: center;
  text-decoration: none;
  letter-spacing: .08em;
  font-weight: bold;
  box-shadow: 5px 5px 0 var(--c64-dark);
  text-shadow: 0 0 8px rgba(213, 223, 124, .4);
  transition: transform .08s ease-out;
}
.btn small { display: block; font-weight: normal; letter-spacing: 0; color: var(--c64-light); text-shadow: none; margin-top: 4px; }
.btn:hover, .btn:focus-visible {
  background: var(--c64-yellow);
  color: var(--c64-bg);
  text-shadow: none;
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--c64-dark);
  outline: none;
}
.btn:hover small, .btn:focus-visible small { color: var(--c64-bg); }

.btn-cyan { border-color: var(--c64-cyan); color: var(--c64-cyan); background: rgba(134, 214, 221, .06); text-shadow: 0 0 8px rgba(134, 214, 221, .4); }
.btn-cyan:hover, .btn-cyan:focus-visible { background: var(--c64-cyan); color: var(--c64-bg); }

.mini-nav {
  text-align: center;
  margin: 14px 0 8px;
  font-size: .9em;
  letter-spacing: .04em;
}
.mini-nav a { color: var(--c64-light); text-decoration: none; padding: 2px 6px; }
.mini-nav a:hover { background: var(--c64-light); color: var(--c64-bg); }

/* --------------------------------------------------------------------------
   Generic content
   -------------------------------------------------------------------------- */

a { color: var(--c64-cyan); }
a:hover { color: var(--c64-white); }

h2 {
  margin: 52px 0 16px;
  padding: 6px 12px;
  background: var(--c64-light);
  color: var(--c64-bg);
  font-size: 1.05em;
  letter-spacing: .12em;
  box-shadow: 5px 5px 0 var(--c64-dark);
  text-transform: uppercase;
}
h2 .ln { color: var(--c64-bg); opacity: .55; margin-right: .6em; }

h3 { color: var(--c64-white); font-size: 1em; letter-spacing: .08em; margin: 26px 0 8px; }

p code, li code, td code {
  background: var(--c64-dark);
  color: var(--c64-green);
  padding: 1px 6px;
  border-radius: 3px;
}

pre {
  background: var(--c64-dark);
  color: var(--c64-green);
  border-left: 4px solid var(--c64-green);
  padding: 14px 16px;
  overflow-x: auto;
  border-radius: 0 4px 4px 0;
  font-size: .92em;
  line-height: 1.5;
  font-family: var(--mono);
}
pre .cmt { color: var(--c64-light); }
pre .str { color: var(--c64-yellow); }

/* The one URL vibe coders feed to their AI — make it unmissable. */
pre.skill-url {
  color: var(--c64-yellow);
  border: 2px dashed var(--c64-yellow);
  text-align: center;
  font-size: 1.05em;
  padding: 14px 10px;
  overflow-x: auto;
}

pre.map-art {
  background: transparent;
  border: none;
  color: var(--c64-light);
  width: max-content;
  margin: 10px auto;
  font-size: .95em;
  text-shadow: 0 0 6px rgba(165, 154, 224, .35);
}
.map-art .pl { color: var(--c64-white); font-weight: bold; }
.map-art .st { color: var(--c64-yellow); }

pre.lvl-art {
  background: transparent;
  border: none;
  color: var(--c64-cyan);
  width: max-content;
  max-width: 100%;
  margin: 14px auto;
}
.lvl-art .live-c { color: var(--c64-green); }
.lvl-art .soon-c { color: var(--c64-yellow); }

table { border-collapse: collapse; width: 100%; margin: 12px 0; }
td, th { border: 1px solid var(--c64-border); padding: 7px 11px; text-align: left; vertical-align: top; }
th { color: var(--c64-bg); background: var(--c64-light); letter-spacing: .05em; }
td code { white-space: nowrap; }

ul { padding-left: 1.4em; }
li { margin: 5px 0; }
li::marker { color: var(--c64-yellow); }

.badge {
  display: inline-block;
  padding: 0 8px;
  font-size: .82em;
  font-weight: bold;
  letter-spacing: .06em;
  white-space: nowrap;
}
.b-live { background: var(--c64-green); color: var(--c64-bg); }
.b-soon { background: var(--c64-yellow); color: var(--c64-bg); }

.warn {
  border: 2px solid var(--c64-red);
  background: rgba(224, 136, 132, .08);
  color: var(--c64-white);
  padding: 10px 14px;
  margin: 14px 0;
}
.warn strong { color: var(--c64-red); }

/* live status box */
.live {
  border: 2px solid var(--c64-green);
  background: rgba(154, 210, 132, .06);
  padding: 12px 16px;
  margin: 18px 0 6px;
  color: var(--c64-white);
  box-shadow: 0 0 18px rgba(154, 210, 132, .12);
}
.live .live-label { color: var(--c64-green); font-weight: bold; letter-spacing: .08em; }
.live .err { color: var(--c64-red); }

/* footer */
footer {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 2px solid var(--c64-border);
  color: var(--c64-light);
  font-size: .9em;
}
footer .ready { color: var(--c64-white); margin-top: 14px; font-size: 1.15rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  body { padding: 12px 6px 28px; font-size: 15px; }
  .crt { border-width: 10px; border-radius: 12px; }
  .screen { padding: 18px 14px 30px; }
  .cta { grid-template-columns: 1fr; }
  h2 { letter-spacing: .06em; }
  pre { font-size: .85em; }
  pre.map-art { font-size: .8em; }
  td code { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Reduced motion: no flicker, no roll, no blink, no typewriter (JS checks too)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .crt::before, .crt::after { animation: none; }
  .cursor { animation: none; opacity: 1; }
  .btn { transition: none; }
}