/* Shared terminal-theme chrome for idlegames.win.
   Page-specific styles live inline in each page; this file holds the common
   tokens, base typography, header and footer used across every page. */

/* Self-hosted JetBrains Mono (latin, woff2) — no render-blocking CDN request.
   Files in fonts/, copied from @fontsource. font-display:swap keeps text
   visible during load. */
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/jetbrains-mono-500.woff2") format("woff2"); }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/jetbrains-mono-700.woff2") format("woff2"); }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:800; font-display:swap; src:url("/fonts/jetbrains-mono-800.woff2") format("woff2"); }

:root{
  --bg:#f1ecdd; --paper:#f7f3e8; --ink:#221f17; --ink-2:#5a5341; --ink-3:#8c846d;
  --line:#cfc6ac; --line-2:#e0d8c2;
  --green:oklch(0.52 0.15 150); --green-soft:oklch(0.9 0.06 150); --amber:oklch(0.62 0.14 70);
  --red:oklch(0.55 0.18 25);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:repeating-linear-gradient(0deg, transparent 0 27px, rgba(34,31,23,.018) 27px 28px);
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 22px; }

/* header */
header{ border-bottom:2px solid var(--ink); background:var(--paper); position:sticky; top:0; z-index:50; }
.hbar{ display:flex; align-items:center; gap:20px; padding:14px 22px; max-width:1100px; margin:0 auto; }
.brand{ font-weight:800; font-size:19px; letter-spacing:-.02em; display:flex; align-items:center; }
.brand .b{ background:var(--ink); color:var(--paper); padding:2px 7px; }
.brand .g{ color:var(--green); }
.topnav{ display:flex; gap:16px; font-size:13.5px; flex-shrink:0; }
.topnav a{ color:var(--ink-2); padding-bottom:2px; border-bottom:2px solid transparent; }
.topnav a:hover, .topnav a.on{ color:var(--ink); border-color:var(--green); }
.cursor{ display:inline-block; width:9px; height:17px; background:var(--green); margin-left:5px; animation:blink 1.1s steps(1) infinite; transform:translateY(2px); }
@keyframes blink{ 50%{ opacity:0; } }
.hbar .sp{ flex:1; }
.backlink{ font-size:13px; color:var(--ink-3); }
.backlink:hover{ color:var(--green); }

/* footer */
footer{ border-top:2px solid var(--ink); background:var(--paper); }
footer .wrap{ padding:26px 22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; color:var(--ink-3); font-size:12.5px; }
footer a:hover{ color:var(--green); }