/* Shared look for every page of the site: the tutorial (inlined into
   template.html by build.py), the project homepage and the game page.
   Colours are the Comet 64 palette, light and dark. */
:root {
  --paper: #eef0f6;
  --sheet: #ffffff;
  --ink: #1d1b2e;
  --ink-soft: #4c4966;
  --rule: #d4d6e4;
  --accent: #352879;      /* the Comet's border blue */
  --accent-2: #6c5eb5;    /* light blue */
  --code-bg: #f4f4fa;
  --code-ink: #26233d;
  --tok-k: #6f3d86; --tok-t: #2b6f80; --tok-s: #5f6f12; --tok-n: #8a4a12;
  --tok-c: #7b7894; --tok-f: #352879; --tok-b: #9a3b2b;
  /* callout hues (Comet palette, tuned per theme) */
  --c-blue: #352879; --c-green: #3f7a2a; --c-yellow: #7a6a05; --c-cyan: #1f6f80;
  --c-purple: #6f3d86; --c-grey: #55525f; --c-red: #9a3b2b; --c-orange: #8a4a12;
  --c-brown: #6a4a20; --c-lblue: #5546a8;
  --tint: 7%;
  --display: "Bungee", "Arial Black", Impact, sans-serif;
  --body: "Literata", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111020; --sheet: #17162a; --ink: #e6e4f2; --ink-soft: #a9a6c4; --rule: #2e2c48;
    --accent: #a99cf0; --accent-2: #8a7de0; --code-bg: #0e0d1c; --code-ink: #dcdaf0;
    --tok-k: #d09ae8; --tok-t: #7fd0e0; --tok-s: #c3d27a; --tok-n: #e8a56a; --tok-c: #7f7c9c; --tok-f: #b5aaf5; --tok-b: #f08a74;
    --c-blue: #9d90f0; --c-green: #8fd07a; --c-yellow: #d8c860; --c-cyan: #72c8d8; --c-purple: #cf9ae6;
    --c-grey: #a6a3b8; --c-red: #f0907a; --c-orange: #f0a868; --c-brown: #d2a870; --c-lblue: #a99cf0;
    --tint: 12%; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111020; --sheet: #17162a; --ink: #e6e4f2; --ink-soft: #a9a6c4; --rule: #2e2c48;
  --accent: #a99cf0; --accent-2: #8a7de0; --code-bg: #0e0d1c; --code-ink: #dcdaf0;
  --tok-k: #d09ae8; --tok-t: #7fd0e0; --tok-s: #c3d27a; --tok-n: #e8a56a; --tok-c: #7f7c9c; --tok-f: #b5aaf5; --tok-b: #f08a74;
  --c-blue: #9d90f0; --c-green: #8fd07a; --c-yellow: #d8c860; --c-cyan: #72c8d8; --c-purple: #cf9ae6;
  --c-grey: #a6a3b8; --c-red: #f0907a; --c-orange: #f0a868; --c-brown: #d2a870; --c-lblue: #a99cf0;
  --tint: 12%; color-scheme: dark;
}

html { scroll-padding-top: 16px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--body); }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible, canvas:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }

.brand { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.brand-top { font: 400 .7rem/1 var(--display); letter-spacing: .14em; color: var(--ink-soft); }
.brand-name { font: 400 1.45rem/1.05 var(--display); color: var(--accent); }
.brand-sub { font: 600 .78rem/1.3 var(--mono); color: var(--ink-soft); }
.play { border-radius: 14px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.play-head { display: flex; flex-direction: column; gap: 6px; }
.play-eyebrow { font: 400 .72rem/1 var(--display); letter-spacing: .14em; color: var(--ink-soft); }
.play-title { margin: 0; font: 400 1.4rem/1.1 var(--display); color: var(--accent); }
.play-note { margin: 0; color: var(--ink-soft); font-size: .92rem; max-width: 62ch; }
.crt { position: relative; background: #352879; padding: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 384 / 272; max-width: 100%; }
.crt canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; background: #352879; }
.power { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; font: 400 1rem/1 var(--display); letter-spacing: .1em; color: #352879; background: #b8c76f; border: 0; border-radius: 8px; padding: 14px 22px 12px; cursor: pointer; box-shadow: 0 4px 0 #6f4f25; }
.power:hover { background: #c9d880; }
.power:active { transform: translateY(2px); box-shadow: 0 2px 0 #6f4f25; }
.play-status { margin: 0; font: .78rem/1.4 var(--mono); color: var(--ink-soft); min-height: 1.4em; }

.site-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 .72rem/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.site-nav a { color: var(--ink-soft); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }