/* dizzylabs.ca
   one column on a tiled starfield. pixel font for headings (same one as the logo),
   plain old verdana for everything you actually read. no frameworks. */

@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  --void: #0e0b16;      /* behind the stars */
  --panel: #000;        /* the page itself, black like the logo */
  --edge: #3b2d63;      /* borders */
  --ink: #fff1e8;       /* the cream from the logo */
  --dim: #b4abc4;
  --link: #c3a6ff;
  --visited: #a48ce0;
  --purple: #9b4dff;    /* the spiral */
  --gold: #ffec27;      /* digbit yellow */
  --px: "Silkscreen", "Courier New", monospace;
  --body: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
  --mono: "Courier New", Courier, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding-block: 24px 40px;
  padding-inline: 16px;
  background: var(--void) url("/img/stars.png");
  color: var(--ink);
  font: 15px/1.65 var(--body);
}

.page {
  max-width: 680px;
  margin: 0 auto;
  background: var(--panel);
  border: 2px solid var(--edge);
  padding: 22px 28px 26px;
}

img { max-width: 100%; height: auto; }
.px, .shots img, .banner, .intro { image-rendering: pixelated; }

/* ---- links: underlined, purple, the way they used to be ---- */
a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { background: var(--purple); color: #fff; text-decoration: none; }
a:focus-visible { outline: 2px dashed var(--gold); outline-offset: 2px; }
a:has(img):hover { background: none; }

/* ---- top of every page ---- */
.top { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.top:visited { color: var(--ink); }
.top img { width: 32px; height: 32px; image-rendering: pixelated; }
.top span { font: 400 20px/1 var(--px); letter-spacing: 1px; }
.top span b { font-weight: 400; color: var(--purple); }
.top:hover { background: none; color: var(--ink); }

.intro { display: block; margin: 0 auto 6px; width: 342px; }

.menu {
  font: 400 13px/1 var(--px);
  margin: 16px 0 6px;
  padding: 9px 0;
  border-top: 2px dotted var(--edge);
  border-bottom: 2px dotted var(--edge);
  color: var(--dim);
  word-spacing: 2px;
}
.menu a, .menu strong { padding: 2px 3px; }
.menu strong { color: var(--gold); font-weight: 400; }

/* ---- type ---- */
h1, h2, h3 { font-family: var(--px); font-weight: 400; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 26px; margin: 22px 0 10px; color: var(--ink); }
h2 { font-size: 16px; margin: 30px 0 8px; color: var(--purple); }
h2::before { content: "> "; color: var(--edge); }
p { margin: 0 0 12px; }
small, .note { font-size: 12px; color: var(--dim); }

ul { padding-left: 22px; margin: 0 0 12px; list-style: square; }
li { margin: 3px 0; }
li::marker { color: var(--gold); }

hr { border: 0; border-top: 2px dotted var(--edge); margin: 26px 0; }

.new {
  font: 400 10px/1 var(--px); color: #000; background: var(--gold);
  padding: 2px 4px; margin-left: 6px; vertical-align: 2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { background: transparent; color: var(--gold); } }

.crumbs { font-size: 12px; color: var(--dim); margin: 14px 0 0; }

/* ---- the dev log ---- */
.log { list-style: none; padding: 0; margin: 0 0 10px; font-size: 14px; }
.log li { display: flex; gap: 12px; padding: 3px 0; border-bottom: 1px dashed #2a2240; }
.log code { font: 13px/1.65 var(--mono); color: var(--gold); flex: none; width: 70px; }
.log span { min-width: 0; }

/* ---- tables ---- */
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { border: 1px solid var(--edge); padding: 6px 9px; text-align: left; vertical-align: top; }
th { font: 400 12px/1.4 var(--px); color: var(--dim); background: #120f1c; }
td img { width: 48px; height: 48px; }
.games td:last-child { white-space: nowrap; }
td img { display: block; image-rendering: pixelated; }

/* ---- pictures ---- */
.banner { display: block; border: 2px solid var(--edge); margin: 16px 0 6px; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 6px; }
.shots a { display: block; line-height: 0; border: 2px solid var(--edge); }
.shots a:hover { border-color: var(--gold); }

/* ---- footer ---- */
.foot {
  margin-top: 30px; padding-top: 12px; border-top: 2px dotted var(--edge);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: 11px; color: var(--dim);
}
.foot img { width: 88px; height: 31px; image-rendering: pixelated; display: block; }

@media (max-width: 560px) {
  body { font-size: 15px; padding-block: 12px 24px; }
  .page { padding: 16px 16px 20px; }
  .shots { grid-template-columns: 1fr; }
  .intro { width: 260px; }
  .log li { flex-direction: column; gap: 0; }
  /* the games table turns into a stack on phones */
  .games tr:first-child { display: none; }
  .games, .games tbody, .games tr, .games td { display: block; width: 100%; }
  .games tr { border: 1px solid var(--edge); padding: 10px 12px; }
  .games td { border: 0; padding: 2px 0; }
  .games td[data-label]::before { content: attr(data-label) ": "; font: 400 11px var(--px); color: var(--dim); }
}
@media (prefers-reduced-motion: reduce) {
  .new, .hazard, .pod { animation: none !important; }
}

/* the "it's out!" box on the DIGBIT page */
.getit { border: 2px dashed var(--gold); padding: 10px 14px; margin: 4px 0 16px; }
.getit strong { color: var(--gold); }