/* Terminal — the chosen design. A retro-futuristic CRT: phosphor glow, scanlines,
   windowed panels, boot sequence. Motion lives in terminal.js; everything here
   still reads correctly with scripts off or reduced motion on. */
.t-terminal {
  --bg: #030705; --bg2: #07120b; --fg: #c6f6d3; --muted: #71b086; --line: #1c4830;
  --accent: #3dff8f; --amber: #ffb84a; --on-accent: #03120a;
  --g-ds: #6fd3ff; --g-is: #3dff8f; --g-eon: #d8ff5e; --g-wh: #ffb84a;
  --glow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
  --radius: 0px; --fs: 15.5px;
  --display: "VT323", "JetBrains Mono", ui-monospace, monospace;
  --body: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  padding-bottom: 30px;
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 480px at 50% -80px, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px);
  background-size: auto, 34px 34px, 34px 34px;
  background-repeat: no-repeat, repeat, repeat;
  scrollbar-color: var(--accent) #06110a; scrollbar-width: thin;
}
/* Each game gets its own phosphor: cyan, green, lime, amber */
.t-terminal[data-game="ds"] { --accent: var(--g-ds); }
.t-terminal[data-game="is"] { --accent: var(--g-is); }
.t-terminal[data-game="eon"] { --accent: var(--g-eon); }
.t-terminal[data-game="wh"] { --accent: var(--g-wh); }
.t-terminal [data-game] { --glow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }
.t-terminal ::selection { background: var(--accent); color: var(--on-accent); }

/* The tube: scanlines, vignette, slow refresh bar */
.t-terminal::before { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .24) 0 1px, transparent 1px 3px); }
.t-terminal::after { content: ""; position: fixed; inset: 0; z-index: 31; pointer-events: none; background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .5) 100%); animation: t-flicker 6s steps(1) infinite; }
.crt-bar { position: fixed; left: 0; right: 0; top: 0; height: 160px; z-index: 29; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 6%, transparent), transparent); animation: t-sweep 9s linear infinite; will-change: transform; }
@keyframes t-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .9; } 48% { opacity: 1; } 81% { opacity: .94; } 82% { opacity: 1; } }
@keyframes t-sweep { from { transform: translateY(-160px); } to { transform: translateY(100vh); } }
@keyframes t-blink { 50% { opacity: 0; } }
@keyframes t-glitch {
  0% { transform: translate(0); text-shadow: 2px 0 #ff2d6f, -2px 0 #2de2ff; }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); text-shadow: -2px 0 #ff2d6f, 2px 0 #2de2ff; }
  75% { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}
@keyframes t-on { 0% { opacity: 0; filter: brightness(3.5) saturate(.2); transform: scaleY(.02); } 45% { opacity: 1; transform: scaleY(1); } 100% { filter: none; transform: none; } }
@keyframes t-off { to { opacity: 0; transform: scaleY(.004); filter: brightness(4); } }

/* Type */
.t-terminal h1, .t-terminal h2, .t-terminal .game-title, .t-terminal .band p, .t-terminal .pager b, .t-terminal .nums b, .t-terminal .game-stats b, .t-terminal .contact .mail { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; }
.t-terminal h1, .t-terminal h2 { text-shadow: var(--glow); }
.t-terminal h2 { font-size: clamp(36px, 5vw, 68px); line-height: .92; }
.t-terminal h2::before { content: "> "; color: var(--accent); }
.t-terminal h3 { font: 800 17px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .02em; color: var(--accent); }
.t-terminal .kicker::before { content: "// "; }
.t-terminal a { text-decoration-style: dotted; }
/* No stranded words: paragraphs avoid a one-word last line, and headings may use the full width. */
.t-terminal p, .t-terminal li, .t-terminal dd, .t-terminal figcaption { text-wrap: pretty; }
.t-terminal .sec-head { max-width: none; }
.t-terminal .sec-head p { max-width: 66ch; }
.t-terminal strong { color: var(--accent); font-weight: 600; }

/* Header */
.t-terminal .head { background: rgba(3, 7, 5, .94); border-bottom-color: var(--line); box-shadow: 0 1px 24px -8px var(--accent); }
.t-terminal .brand { font: 800 15px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.t-terminal .brand span::after { content: "\2588"; margin-left: 6px; color: var(--accent); animation: t-blink 1.1s steps(1) infinite; }
.t-terminal .nav a { font-size: 13px; text-transform: uppercase; padding: 4px 6px; }
.t-terminal .nav a::before { content: "./"; color: var(--muted); }
.t-terminal .nav a:hover, .t-terminal .nav a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.t-terminal .nav a:hover::before, .t-terminal .nav a[aria-current="page"]::before { color: var(--on-accent); }

/* Buttons */
.t-terminal .btn { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 800; text-transform: uppercase; font-size: 13.5px; box-shadow: 0 0 22px -6px var(--accent); transition: box-shadow .2s, transform .1s; }
.t-terminal .btn::before { content: "[ "; }
.t-terminal .btn::after { content: " ]"; }
.t-terminal .btn:hover { box-shadow: 0 0 34px -2px var(--accent); }
.t-terminal .btn:active { transform: translateY(1px); }
.t-terminal .btn.alt { background: transparent; color: var(--accent); box-shadow: none; }
.t-terminal .btn.alt:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Windows */
.t-terminal .win, .t-terminal .game, .t-terminal .spec, .t-terminal .pillars > div, .t-terminal .steps > div, .t-terminal .duo > div { border: 1px solid var(--line); background: rgba(7, 18, 11, .86); box-shadow: 0 0 0 1px rgba(61, 255, 143, .05), 0 0 44px -18px var(--accent); transition: border-color .2s, box-shadow .2s; }
.t-terminal .game:hover, .t-terminal .pillars > div:hover, .t-terminal .steps > div:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 46px -10px var(--accent); }
.t-terminal .win-bar, .t-terminal .game-bar, .t-terminal .spec h3 { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--muted); font: 600 11.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.t-terminal .game-bar span:last-child, .t-terminal .win-bar span:last-child { color: var(--accent); }
.t-terminal .game-bar span:last-child::before { content: "\25CF  "; animation: t-blink 1.6s steps(1) infinite; }

/* Hero */
.t-terminal .hero { padding-top: clamp(36px, 6vw, 80px); }
.t-terminal .hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.t-terminal .hero .proc { margin-top: 10px; }
.t-terminal .display { font-size: clamp(48px, 7.6vw, 112px); line-height: .84; }
.t-terminal .display em { font-style: normal; color: var(--accent); text-shadow: 2px 0 rgba(255, 45, 111, .45), -2px 0 rgba(45, 226, 255, .45), 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent); }
/* Cursor drawn as a box the height of a capital letter, so it never reaches into the line above. */
.t-terminal .display::after { content: ""; display: inline-block; width: .4em; height: .56em; margin-left: .1em; vertical-align: baseline; background: var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); animation: t-blink 1s steps(1) infinite; }
.t-terminal .hero .lede { margin-top: 24px; font-size: 16.5px; }
.t-terminal .proc-head, .t-terminal .proc-row { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 6.4em 5.4em; gap: 10px; padding: 9px 12px; font-size: 13px; }
.t-terminal .proc-head { color: var(--muted); border-bottom: 1px dashed var(--line); font-size: 11.5px; letter-spacing: .1em; }
.t-terminal .proc-row { text-decoration: none; border-bottom: 1px dashed var(--line); color: var(--accent); }
.t-terminal .proc-row:last-of-type { border-bottom: 0; }
.t-terminal .proc-row span:nth-child(1), .t-terminal .proc-row span:nth-child(3) { color: var(--muted); }
.t-terminal .proc-row span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.t-terminal .proc-row:hover, .t-terminal .proc-row:focus-visible { background: var(--accent); color: var(--on-accent); }
.t-terminal .proc-row:hover span, .t-terminal .proc-row:focus-visible span { color: var(--on-accent); }
.t-terminal .proc-foot { padding: 9px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.t-terminal .proc-foot b { color: var(--accent); font-weight: 400; }

/* Game windows on the home page */
/* Two-by-two wall of monitors. Every card is the same build: title bar, a whole 16:9
   screenshot (never cropped), then text, with the labels and button pinned to the bottom
   so neighbouring cards line up. */
.t-terminal .games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.t-terminal .game { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.t-terminal .game:nth-child(n) .game-media { order: 0; }   /* picture always on top, never alternating */
.t-terminal .game-media { position: relative; flex: none; width: 100%; border-bottom: 1px solid var(--line); border-radius: 0; }
.t-terminal .game-media { background: #020503; }
.t-terminal .game-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: 50% 50%; filter: saturate(.92) contrast(1.03); transition: filter .25s, transform .5s; }
.t-terminal .game:hover .game-media img { filter: none; transform: scale(1.025); }
.t-terminal .game-body { display: flex; flex-direction: column; flex: 1; padding: 24px 28px 28px; container-type: inline-size; }
.t-terminal .game-blurb { flex: 1; text-wrap: wrap; }   /* lines fill normally; build.py ties the last four words together */
.t-terminal .game-link { align-self: flex-start; }
/* Even text on every card: title and subtitle share a line, the tag line is sized to the card
   so it stays on one line, and the three labels are rows (WORD  description) rather than
   narrow columns, so nothing breaks after one or two words. */
.t-terminal .game-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin-bottom: 6px; }
.t-terminal .game-head .game-title, .t-terminal .game-head .game-sub { margin: 0; }
.t-terminal .game-body .game-genre { font-size: clamp(9.5px, 2.5cqw, 12.5px); margin-bottom: 14px; text-wrap: balance; }
.t-terminal .game-body .game-hook { font-size: clamp(11px, 2.9cqw, 16px); text-wrap: balance; }
.t-terminal .game-body .game-stats { display: block; margin: 18px 0 20px; padding: 8px 0; }
.t-terminal .game-body .game-stats li { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 5px 0; }
.t-terminal .game-body .game-stats b { font-size: 30px; line-height: 1; }
.t-terminal .game-body .game-stats span { margin-top: 0; font-size: 13.5px; text-wrap: balance; }
@container (max-width: 400px) {
  .t-terminal .game-body .game-hook { font-size: 14.5px; }
  .t-terminal .game-body .game-stats li { grid-template-columns: 6.6em minmax(0, 1fr); gap: 10px; }
  .t-terminal .game-body .game-stats b { font-size: 27px; }
}
.t-terminal .game-no { display: none; }
.t-terminal .game-title { margin-top: 0; font-size: clamp(40px, 5vw, 70px); line-height: .9; color: var(--accent); text-shadow: var(--glow); }
.t-terminal .game-title a:hover { display: inline-block; animation: t-glitch .32s steps(2) 1; }
.t-terminal .game-sub { font: 400 14px/1.4 var(--mono); color: var(--fg); }
.t-terminal .game-genre { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; }
.t-terminal .game-hook { font-size: 1.06em; color: var(--fg); }
.t-terminal .game-hook::before { content: "\00BB  "; color: var(--accent); }
.t-terminal .game-blurb { color: var(--muted); }
.t-terminal .game-stats { padding: 14px 0; border-block: 1px dashed var(--line); }
.t-terminal .game-stats b { font-size: 38px; color: var(--accent); text-shadow: var(--glow); }
.t-terminal .game-link { display: inline-block; padding: 9px 12px; border: 1px solid var(--accent); color: var(--accent); text-decoration: none; text-transform: uppercase; font-size: 13px; font-weight: 800; }
.t-terminal .game-link:hover { background: var(--accent); color: var(--on-accent); }

/* Sections */
.t-terminal .sec { border-top: 1px dashed var(--line); }
.t-terminal .band { border-top: 1px dashed var(--line); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.t-terminal .band p { font-size: clamp(34px, 6.4vw, 96px); line-height: .9; max-width: 20ch; text-shadow: var(--glow); }
.t-terminal .band em { text-shadow: 2px 0 rgba(255, 45, 111, .45), -2px 0 rgba(45, 226, 255, .45), 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent); }
.t-terminal .pillars > div, .t-terminal .steps > div, .t-terminal .duo > div { padding: 20px; }
.t-terminal .steps > div::before { content: "STEP_0" counter(step); }
.t-terminal .pillars p, .t-terminal .steps p { color: var(--muted); }
.t-terminal .nums b { font-size: clamp(44px, 5.6vw, 80px); text-shadow: var(--glow); }
/* Three words centred in three equal columns, so different lengths still sit evenly apart. */
.t-terminal .nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t-terminal .nums li { padding-top: 10px; border-top: 1px dashed var(--line); text-align: center; }
.t-terminal .nums span { text-wrap: balance; }

/* Screens within the screen */
.t-terminal .shot a.zoom, .t-terminal .g-hero-media { position: relative; }
.t-terminal .shot a.zoom { border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.t-terminal .shot a.zoom::after, .t-terminal .game-media::after, .t-terminal .g-hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 4px), linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 40%); transition: opacity .25s; }
.t-terminal .shot a.zoom::before { content: "[ + ] ENHANCE"; position: absolute; left: 0; top: 0; z-index: 1; padding: 4px 8px; background: var(--accent); color: var(--on-accent); font: 800 11px/1.4 var(--mono); letter-spacing: .08em; opacity: 0; transition: opacity .2s; }
.t-terminal .shot a.zoom:hover, .t-terminal .shot a.zoom:focus-visible { border-color: var(--accent); box-shadow: 0 0 30px -8px var(--accent); }
.t-terminal .shot a.zoom:hover::after, .t-terminal .game:hover .game-media::after { opacity: 0; }
.t-terminal .shot a.zoom:hover::before, .t-terminal .shot a.zoom:focus-visible::before { opacity: 1; }
.t-terminal .g-hero-media img { border: 1px solid var(--line); box-shadow: 0 0 60px -20px var(--accent); }
.t-terminal .g-hero-media::after { inset: 0 var(--gut, clamp(18px, 4vw, 44px)); }
.t-terminal .tag { border-radius: 0; color: var(--accent); }
.t-terminal .cards img { border-radius: 0; border: 1px solid var(--line); }
.t-terminal .note { color: var(--muted); }

/* Game page */
.t-terminal .g-hero .display { font-size: clamp(60px, 12vw, 184px); }
.t-terminal .g-hero .display::before { content: "> "; color: var(--accent); }
.t-terminal .g-sub { font: 400 clamp(15px, 1.8vw, 20px)/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.t-terminal .g-hero .lede::before { content: "\00BB  "; color: var(--accent); }
.t-terminal .chips span { border-radius: 0; border-color: var(--line); }
.t-terminal .spec h3 { margin: 0; }
.t-terminal .spec h3 span { color: var(--accent); }
.t-terminal .spec dl > div { border-top: 1px dashed var(--line); transition: background .15s; }
.t-terminal .spec dl > div:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.t-terminal .feature h3 { font: 400 clamp(32px, 3.8vw, 52px)/.92 var(--display); letter-spacing: .03em; text-shadow: var(--glow); }
.t-terminal .feature .no::before { content: "0x"; }
.t-terminal .ticks li { padding-left: 4.4em; }
.t-terminal .ticks li::before { content: "[ OK ]"; color: var(--accent); font-weight: 600; }
.t-terminal .log li { padding-left: 4.6em; border-top-style: dashed; transition: background .15s; }
.t-terminal .log li:last-child { border-bottom-style: dashed; }
.t-terminal .log li::before { content: "[" counter(log, decimal-leading-zero) "]"; left: .6em; }
.t-terminal .log li:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.t-terminal th, .t-terminal td { border-top-style: dashed; }
.t-terminal tbody tr:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.t-terminal .pager { border-top-style: dashed; }
.t-terminal .pager b { font-size: clamp(30px, 4vw, 56px); color: var(--accent); }
.t-terminal .contact .mail { font-size: clamp(26px, 5.4vw, 80px); color: var(--accent); text-shadow: var(--glow); }
.t-terminal .foot { border-top-style: dashed; padding-bottom: 40px; }

/* Injected by terminal.js: status bar, command line, boot screen, reveals */
.statusbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; justify-content: space-between; gap: 18px; padding: 6px 14px; border-top: 1px solid var(--line); background: #051009; color: var(--muted); font: 400 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.statusbar b { color: var(--accent); font-weight: 400; }
.statusbar .sb-scroll { color: var(--accent); white-space: pre; }
.cli .win { max-width: 880px; }
.cli-out { max-height: 260px; overflow-y: auto; padding: 12px 14px 0; font-size: 14px; white-space: pre-wrap; }
.cli-out div { margin-bottom: 4px; }
.cli-out .cmd { color: var(--muted); }
.cli-out a { color: var(--accent); }
.cli-form { display: flex; align-items: center; gap: 10px; padding: 10px 14px 14px; }
.cli-form label { color: var(--accent); font-size: 14px; white-space: nowrap; }
.cli-form input { flex: 1; min-width: 0; padding: 4px 0; border: 0; outline: 0; background: none; color: var(--fg); caret-color: var(--accent); font: 400 14px/1.5 var(--mono); }
.cli-form:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
.bootscreen { position: fixed; inset: 0; z-index: 80; background: #020503; overflow: hidden; cursor: pointer; transform-origin: 50% 50%; }
.bootscreen::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .6) 100%); }
.bootscreen pre { position: absolute; left: 0; top: 0; margin: 0; font: 400 10px/1 var(--mono); white-space: pre; }
.boot-dim { color: rgba(61, 255, 143, .3); }
.bootscreen .boot-lit { color: #8dffbd; font-weight: 800; text-shadow: 0 0 6px rgba(61, 255, 143, .95), 0 0 20px rgba(61, 255, 143, .55); }
.boot-tag { position: absolute; left: 0; right: 0; z-index: 1; padding: 0 16px; text-align: center; color: var(--accent); font: 600 clamp(11px, 1.5vw, 17px)/1.4 var(--mono); letter-spacing: .32em; text-shadow: 0 0 10px rgba(61, 255, 143, .7); }
.boot-tag:not(:empty)::after { content: "\2588"; margin-left: .3em; animation: t-blink .7s steps(1) infinite; }
.bootscreen.off { animation: t-off .68s ease-in forwards; }
.bootscreen small { position: absolute; right: 5vw; bottom: 5vh; z-index: 1; color: var(--muted); font: 400 12px/1.4 var(--mono); }
.booted main { animation: t-on 1.2s ease-out 1; transform-origin: 50% 30vh; }
.rv { opacity: 0; transform: translateY(18px); }
.rv.in { opacity: 1; transform: none; transition: opacity 1s ease, transform 1s ease; transition-delay: var(--d, 0ms); }

@media (max-width: 900px) {
  .t-terminal .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .t-terminal .hero .proc { margin-top: 0; }
  .t-terminal .games { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .t-terminal .proc-head, .t-terminal .proc-row { grid-template-columns: 2.6em minmax(0, 1fr) 5.2em; }
  .t-terminal .proc-head span:nth-child(3), .t-terminal .proc-row span:nth-child(3) { display: none; }
  .t-terminal .game-body { padding: 20px 18px; }
  .t-terminal .nums { gap: 10px; }
  .t-terminal .nums b { font-size: 34px; }
  .statusbar .sb-left { display: none; }
  .statusbar { justify-content: center; }
  .cli-form label { font-size: 12.5px; }
}