/* All The Files — one stylesheet. Dark is a night-sky console, light is off-white paper; both have one yellow accent. */

@font-face {
  font-family: "Press Start 2P";
  src: url("/fonts/press-start-2p-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #0d0b1f;
  --panel: #18163a;
  --ink: #f4f1e8;
  --muted: #9a97bd;
  --outline: #05040f;
  --edge: #3a3770;
  --accent: #fcd838;
  --shade: #8a7420;
  --sprite-line: #c9c6e6;
  --sprite: #2c2966;
  --sprite-shade: #4a4790;
  --scan: rgba(0, 0, 0, 0.18);
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --text: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f1ea;
    --panel: #fffdf7;
    --ink: #1a1830;
    --muted: #6b6880;
    --outline: #1a1830;
    --edge: #cfcbdc;
    --accent: #d9a400;
    --shade: #1a1830;
    --sprite-line: #1a1830;
    --sprite: #dedbe8;
    --sprite-shade: #9a97b0;
    --scan: rgba(26, 24, 48, 0.035);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0 16px;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.45 var(--text);
  -webkit-font-smoothing: none;
}

.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--scan) 2px 4px);
}

a { color: inherit; }

/* ---- title screen ---- */

.title {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 0 8px;
  text-align: center;
}

.hud {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 22px;
  font: 9px/1.6 var(--pixel);
  color: var(--muted);
}
.hud b { color: var(--ink); font-weight: normal; }

h1 {
  margin: 0;
  font: clamp(22px, 6vw, 40px)/1.2 var(--pixel);
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--outline), 5px 5px 0 var(--edge);
}
h1 span { display: inline-block; }
h1 span:nth-child(3) { color: var(--accent); }

.tagline {
  margin: 16px 0 0;
  font: 10px/1.6 var(--pixel);
  color: var(--muted);
}

.start {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 4px;
  font: 10px/1 var(--pixel);
  text-decoration: none;
  text-transform: uppercase;
  animation: blink 1.1s steps(1) infinite;
}
.start:hover, .start:focus-visible { animation: none; color: var(--accent); outline: none; }

@keyframes blink { 50% { opacity: 0; } }

/* ---- worlds ---- */

main { max-width: 1080px; margin: 0 auto; }

.world { margin: 26px 0 0; }

h2 {
  margin: 0 0 12px;
  font: 10px/1.6 var(--pixel);
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
h2::after { content: ""; flex: 1; border-bottom: 3px dotted var(--edge); }
.level { color: var(--muted); }

.cards {
  list-style: none;
  margin: 0;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 12px;
}

.card {
  --frame: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--panel);
  text-decoration: none;
  box-shadow: var(--frame);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
.card:hover, .card:focus-visible {
  outline: none;
  transform: translate(-3px, -3px);
  --edge: var(--accent);
  box-shadow: var(--frame), 6px 6px 0 0 var(--shade);
}
.card:active { transform: translate(0, 0); box-shadow: var(--frame); }

.art { position: relative; flex: none; width: 36px; }
.sprite { display: block; width: 36px; height: auto; margin: 0 auto; }
.sprite[viewBox$=" 12 11"], .sprite[viewBox$=" 11 11"] { width: 30px; }
.mystery .sprite { animation: bob 1.2s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.pA { fill: var(--sprite-line); }
.card:hover .pA, .card:focus-visible .pA, .mystery .pA { fill: var(--outline); }
.pB { fill: var(--sprite-shade); }
.pC { fill: var(--sprite); }
.card:hover .pC, .card:focus-visible .pC, .mystery .pC { fill: var(--accent); }
.card:hover .pB, .card:focus-visible .pB, .mystery .pB { fill: var(--shade); }

.tag {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  font: 6px/1 var(--pixel);
  color: var(--sprite-line);
}
.card:hover .tag, .card:focus-visible .tag { color: var(--outline); }

.name {
  font: 9px/1.6 var(--pixel);
  text-transform: uppercase;
}
.cursor { display: inline-block; width: 0; visibility: hidden; color: var(--accent); }
.card:hover .cursor, .card:focus-visible .cursor {
  visibility: visible;
  width: auto;
  margin-right: 6px;
  animation: blink 0.8s steps(1) infinite;
}

/* ---- contact ---- */

.dialog {
  max-width: 460px;
  margin: 64px auto;
  padding: 24px 22px;
  background: var(--panel);
  box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge);
  text-align: center;
}
.dialog .level { margin: 0; font: 9px/1.6 var(--pixel); text-transform: uppercase; }
.dialog h1 { margin: 10px 0 18px; font-size: 22px; }
.dialog p { margin: 12px 0; }
.dialog .cta { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px 0; }
.dialog .cta .sprite { width: 28px; margin: 0; animation: bob 1.2s steps(2) infinite; }
.dialog .cta .pA { fill: var(--outline); }
.dialog .cta .pB { fill: var(--shade); }
.dialog .cta .pC { fill: var(--accent); }
.js-email { font: 10px/1.6 var(--pixel); color: var(--ink); text-decoration: underline 3px var(--accent); text-underline-offset: 5px; word-break: break-all; }
.dialog .small { font-size: 11px; color: var(--muted); }
.back { font: 9px/1.6 var(--pixel); text-decoration: none; text-transform: uppercase; color: var(--muted); }
.back:hover, .back:focus-visible { color: var(--accent); }

/* ---- footer ---- */

footer {
  max-width: 880px;
  margin: 32px auto 0;
  padding: 0 0 28px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
}
footer p { margin: 8px 0; }

kbd, #sound {
  display: inline-block;
  min-width: 22px;
  margin: 0 2px;
  padding: 4px 5px;
  font: 8px/1 var(--pixel);
  color: var(--ink);
  background: var(--panel);
  border: 0;
  box-shadow: 0 -2px 0 0 var(--edge), 0 2px 0 0 var(--edge), -2px 0 0 0 var(--edge), 2px 0 0 0 var(--edge);
}
#sound { margin-left: 8px; cursor: pointer; text-transform: uppercase; }
#sound[aria-pressed="true"] { color: var(--bg); background: var(--accent); }

/* ---- the code ---- */

.oneup {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 20;
  transform: translate(-50%, -50%);
  padding: 16px 22px;
  font: clamp(14px, 4vw, 22px)/1.4 var(--pixel);
  text-align: center;
  color: var(--accent);
  background: var(--outline);
  box-shadow: 0 0 0 3px var(--accent);
  visibility: hidden;
}
.oneup.show { visibility: visible; animation: blink 0.4s steps(1) 4; }
body.konami h1 span { animation: rainbow 0.6s steps(1) infinite; }
@keyframes rainbow {
  0% { color: #ff5a4f; } 16% { color: #fca044; } 33% { color: #fcd838; }
  50% { color: #b8f818; } 66% { color: #3cbcfc; } 83% { color: #f878f8; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Buy Me a Coffee ---- */
/* The widget script sets inline styles on its button, so these need !important. The popup is BMC's own iframe and can't be styled. */

#bmc-wbtn {
  border-radius: 0 !important;
  background: var(--panel) !important;
  box-shadow: 0 -3px 0 0 var(--accent), 0 3px 0 0 var(--accent), -3px 0 0 0 var(--accent), 3px 0 0 0 var(--accent), 6px 6px 0 0 var(--outline) !important;
}
#bmc-wbtn:hover { background: var(--accent) !important; }
#bmc-wbtn svg path { fill: var(--ink); }