/* Singularity Creative Group: site styles
   Colors are a first pass from the logo spec (background, tile, accent, muted). */
@font-face {
  font-family: "Press Start 2P";
  src: url("../assets/fonts/press-start-2p-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Body font: JetBrains Mono (SIL Open Font License 1.1, license text in assets/fonts) */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --bg: #15131f;
  --cream: #efe9d8;
  --accent: #ff6a3d;
  --muted: #8f8aa8;
  --line: #2c2940;
  --pixel: "Press Start 2P", ui-monospace, "SF Mono", Menlo, monospace;
  --body: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--cream);
  font: 1rem/1.7 var(--body);
}
a { color: var(--accent); }
a:hover { color: var(--cream); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--bg); padding: .75rem 1rem;
  font-family: var(--pixel); font-size: .7rem;
}
.skip:focus { left: 0; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Header and nav */
header.site {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; padding: 1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 2px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: .75rem;
  color: var(--cream); text-decoration: none;
  font-family: var(--pixel); font-size: .7rem; line-height: 1.5;
}
.brand img { width: 36px; height: auto; image-rendering: pixelated; }
header.site nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
header.site nav a {
  display: inline-block; padding: .6rem .25rem;
  color: var(--cream); text-decoration: none;
  font-family: var(--pixel); font-size: .65rem;
}
header.site nav a:hover { color: var(--accent); }
header.site nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }

/* Main and footer */
main {
  flex: 1; width: 100%; max-width: 62rem; margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
}
footer.site {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  padding: 1.5rem clamp(1rem, 4vw, 3rem);
  border-top: 2px solid var(--line); color: var(--muted); font-size: .9rem;
}
footer.site a { color: var(--cream); }
footer.site a:hover { color: var(--accent); }

h1, h2, h3 { font-family: var(--pixel); font-weight: 400; line-height: 1.5; }
h1 { font-size: clamp(1.05rem, 3.2vw, 1.75rem); margin: 0 0 1.5rem; }
h2 { font-size: clamp(.8rem, 2vw, 1.05rem); color: var(--accent); margin: 2.5rem 0 1rem; }
h3 { font-size: .85rem; margin: 0 0 .75rem; }
p { max-width: 42rem; margin: 0 0 1rem; }
.muted { color: var(--muted); }
.lede { font-size: 1.1rem; }

.badge {
  display: inline-block; margin-bottom: 1.5rem; padding: .5rem .75rem;
  border: 2px solid var(--accent); color: var(--accent);
  font-family: var(--pixel); font-size: .65rem;
}
.todo { border: 2px dashed var(--muted); padding: 1rem; color: var(--muted); max-width: 42rem; }

/* Buttons */
.btn {
  display: inline-block; padding: .9rem 1.1rem; border: 3px solid var(--accent);
  background: var(--accent); color: var(--bg); cursor: pointer; text-decoration: none;
  font-family: var(--pixel); font-size: .7rem; line-height: 1.4;
  max-width: 100%; overflow-wrap: anywhere;
}
.btn:hover { background: var(--cream); border-color: var(--cream); color: var(--bg); }
.btn.ghost { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Home doors and game cards */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 24rem)); gap: 1.5rem; margin-top: 2rem; }
@media (max-width: 30rem) { .doors { grid-template-columns: 1fr; } }
.door {
  display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem;
  border: 3px solid var(--cream); color: var(--cream); text-decoration: none;
  transition: transform .12s steps(2), box-shadow .12s steps(2), border-color .12s;
}
.door:hover { border-color: var(--accent); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--accent); color: var(--cream); }
.door h2 { margin: 0; }
.door p { margin: 0; }
.door img { width: 100%; height: auto; border: 2px solid var(--line); }
.door .go { margin-top: auto; font-family: var(--pixel); font-size: .65rem; color: var(--accent); }

/* Late Bus page */
.hero { display: grid; grid-template-columns: minmax(0, 22rem) 1fr; gap: 2rem 3rem; align-items: start; }
@media (max-width: 46rem) { .hero { grid-template-columns: 1fr; } }

/* Studio page */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem; }

/* Intro gate (only exists when JavaScript is on and the intro has not been seen this session) */
#gate { display: none; }
.js:not(.no-gate) #gate {
  position: absolute; inset: 0; z-index: 6; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3cqw; padding: 3cqw; text-align: center; background: #08070c;
  animation: crt-on .55s ease-out both;
}
#gate[hidden] { display: none !important; }
@keyframes crt-on { 0% { transform: scaleY(.02); filter: brightness(4); } 60% { transform: scaleY(1); filter: brightness(2); } 100% { transform: none; filter: none; } }

#logo { --px: min(4.6cqw, 5.4cqh); position: relative; width: calc(var(--px) * 5); height: calc(var(--px) * 7); }
.px { position: absolute; left: 0; top: 0; width: var(--px); height: var(--px); background: var(--cream); opacity: 0; }
#gate.running .px { opacity: 1; }
.px-accent { left: calc(var(--px) * 2); top: calc(var(--px) * 3); background: var(--accent); opacity: .35; animation: pulse 1.2s steps(2) infinite; }
#gate.running .px-accent { animation: none; }
@keyframes pulse { 50% { opacity: 1; } }
#gate-ring {
  position: absolute; left: calc(var(--px) * 2.5); top: calc(var(--px) * 3.5);
  width: var(--px); height: var(--px); transform: translate(-50%, -50%);
  border: 4px solid var(--accent); opacity: 0; pointer-events: none;
}
#gate-name {
  min-height: 4cqw; margin: 0; max-width: none;
  font-family: var(--pixel); font-size: max(8px, 2.3cqw); line-height: 1.6; color: var(--cream);
}
.cursor { display: inline-block; width: .7em; height: 1em; margin-left: .15em; vertical-align: -.1em; background: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
#gate-start { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5cqw 2cqw; }
#gate .btn { font-size: max(9px, 2cqw); padding: 1.4cqw 2.2cqw; border-width: 2px; }

@media (prefers-reduced-motion: reduce) {
  .door, .px-accent, .cursor, .screen::after, .tv-screen::after, #gate { animation: none; transition: none; }
}

/* Title screen + CRT overlay */
.screen { position: relative; container-type: inline-size; border: 3px solid var(--cream); background: #000; overflow: hidden; }
.screen img { display: block; width: 100%; height: auto; }
.screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
  box-shadow: inset 0 0 6cqw rgba(255,106,61,.25);
  animation: crt-flicker 6s steps(1) infinite;
}
.crt-off .screen::after { display: none; }
@keyframes crt-flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .85; } 95% { opacity: 1; } 97% { opacity: .9; } }

/* The home page is a TV: the frame is one small image cut into corners and edge tiles (9-slice) that stretches to any window */
body.home { overflow: hidden; min-height: 100vh; min-height: 100dvh; }
body.home main { max-width: none; padding: 0; display: block; }
.tv { --bz: clamp(30px, 7.5vmin, 96px); --u: calc(var(--bz) / 70); position: fixed; inset: 0; background: #0b0a0f; }
.tv-screen {
  position: absolute; left: calc(var(--u) * 66); right: calc(var(--u) * 68); top: calc(var(--u) * 73); bottom: calc(var(--u) * 77);
  container-type: size; overflow: hidden; background: #000; clip-path: inset(0 round calc(var(--u) * 105));
}
.tv-frame { --c: calc(var(--u) * 338); position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.tv-frame i { position: absolute; display: block; background-repeat: no-repeat; background-size: 100% 100%; }
.tv-frame .t { left: calc(var(--c) - 1px); right: calc(var(--c) - 1px); top: 0; height: var(--c); background-image: url("../assets/tv/f-t.webp"); background-size: auto 100%; background-repeat: round no-repeat; }
.tv-frame .b { left: calc(var(--c) - 1px); right: calc(var(--c) - 1px); bottom: 0; height: var(--c); background-image: url("../assets/tv/f-b.webp"); background-size: auto 100%; background-repeat: round no-repeat; }
.tv-frame .l { top: calc(var(--c) - 1px); bottom: calc(var(--c) - 1px); left: 0; width: var(--c); background-image: url("../assets/tv/f-l.webp"); background-size: 100% auto; background-repeat: no-repeat round; }
.tv-frame .r { top: calc(var(--c) - 1px); bottom: calc(var(--c) - 1px); right: 0; width: var(--c); background-image: url("../assets/tv/f-r.webp"); background-size: 100% auto; background-repeat: no-repeat round; }
.tv-frame .tl { left: 0; top: 0; width: var(--c); height: var(--c); background-image: url("../assets/tv/f-tl.webp"); }
.tv-frame .tr { right: 0; top: 0; width: var(--c); height: var(--c); background-image: url("../assets/tv/f-tr.webp"); }
.tv-frame .bl { left: 0; bottom: 0; width: var(--c); height: var(--c); background-image: url("../assets/tv/f-bl.webp"); }
.tv-frame .br { right: 0; bottom: 0; width: var(--c); height: var(--c); background-image: url("../assets/tv/f-br.webp"); }
.tv-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.2) 0, rgba(0,0,0,.2) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%),
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 30%);
  box-shadow: inset 0 0 6cqw rgba(255,106,61,.25);
  animation: crt-flicker 6s steps(1) infinite;
}
.crt-off .tv-screen::after { display: none; }

.scene { position: absolute; inset: 0; background: #b87a45; }
.scene .kraft { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); container-type: size; width: min(100cqw, 125cqh); aspect-ratio: 100 / 80; }
.p { position: absolute; left: calc(var(--l) * 1cqw); top: calc(var(--t) * 1cqw); width: calc(var(--w) * 1cqw); }
.p-s { z-index: 3; }
.egg { display: block; cursor: pointer; }
.egg:hover img { filter: brightness(1.12) drop-shadow(0 0 .6cqw rgba(255,255,255,.6)); }
.p img { display: block; width: 100%; height: auto; user-select: none; }
.p-logo { --l: 24; --t: 2; --w: 52; }
.p-star-big { --l: 7; --t: 6; --w: 11; }
.p-star-small { --l: 21; --t: 15; --w: 6.5; }
.p-s { --l: 82; --t: 5; --w: 10.5; }
.p-bolt { --l: 5; --t: 24; --w: 11; }
.p-lines-left { --l: 17.5; --t: 26; --w: 7; }
.p-lines-right { --l: 78; --t: 25; --w: 9; }
.p-star-right { --l: 87; --t: 24; --w: 7; }
.p-red { --l: 67; --t: 38; --w: 28; }
.p-soon { --l: 4; --t: 47; --w: 18; }
.menu { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 2; left: 35cqw; top: 56cqw; width: 30cqw; }
.togs { position: absolute; left: 72cqw; top: 64cqw; display: flex; gap: 1.5cqw; z-index: 3; }
@media (orientation: portrait) {
  .board { width: min(100cqw, calc(100cqh / 1.58)); aspect-ratio: 100 / 158; }
  .p-logo { --l: 9; --t: 8; --w: 82; }
  .p-star-big { --l: 3; --t: 3; --w: 13; }
  .p-star-small { --l: 62; --t: 5; --w: 9; }
  .p-s { --l: 80; --t: 5; --w: 14; }
  .p-bolt { --l: 4; --t: 80; --w: 11; }
  .p-lines-left { --l: 1; --t: 50; --w: 9; }
  .p-lines-right { --l: 90; --t: 52; --w: 9; }
  .p-star-right { --l: 71; --t: 82; --w: 9; }
  .p-red { --l: 36; --t: 96; --w: 58; }
  .p-soon { --l: 5; --t: 108; --w: 24; }
  .menu { left: 18cqw; top: 133cqw; width: 64cqw; }
  .togs { left: 6cqw; top: 148cqw; }
}
.menu li { margin: 0 0 .5cqw; padding: 0; }
.mi {
  display: flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box;
  width: 100%; min-height: max(6.4cqw, 24px); padding: 0; border: 0; background: transparent; cursor: pointer;
  color: #1b2a4a; text-decoration: none; text-transform: uppercase;
  font-family: var(--pixel); font-size: max(3.3cqw, 10px); line-height: 1; letter-spacing: .05em;
}
.mi .cur { position: absolute; left: 2.5cqw; visibility: hidden; }
.mi.is-sel, .mi:hover, .mi:focus-visible { background: #1b2a4a; color: var(--cream); }
.mi.is-sel .cur, .mi:hover .cur, .mi:focus-visible .cur { visibility: visible; color: var(--accent); }
.mi:focus-visible { outline: 3px solid var(--cream); outline-offset: -4px; }
.tog {
  min-width: 24px; min-height: 24px; padding: .8cqw 1.4cqw; cursor: pointer;
  background: rgba(27,42,74,.85); color: var(--cream); border: 2px solid var(--cream);
  font-family: var(--pixel); font-size: max(2cqw, 8px); line-height: 1;
}
.tog[aria-pressed="false"] { color: #8a8fa6; border-color: #8a8fa6; text-decoration: line-through; }
.tog:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hint { font-size: .9rem; }
html:not(.js) .js-only { display: none; }

dialog { background: var(--bg); color: var(--cream); border: 3px solid var(--cream); outline: 3px solid var(--accent); outline-offset: -9px; padding: 1.75rem 1.5rem; max-width: min(26rem, 92vw); text-align: center; }
dialog::backdrop { background: rgba(0,0,0,.75); }
dialog h2 { margin-top: 0; }
.mailbox { border: 3px solid var(--cream); padding: .9rem 1rem; margin: 1rem 0; overflow-wrap: anywhere; }
.credits-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-bottom: 0; }

@media (max-width: 40rem) {
  body.home header.site { gap: .25rem 1rem; padding-block: .4rem; }
  body.home header.site nav a { padding: .35rem .2rem; font-size: .58rem; }
  body.home nav ul { gap: 0 .75rem; }
  body.home footer.site { font-size: .72rem; gap: .15rem 1rem; padding-block: .4rem; }
}

.credit-line {
  position: absolute; z-index: 5; margin: 0; left: 50%; bottom: 1.6cqh; transform: translateX(-50%);
  width: max-content; max-width: 80%; text-align: center; color: #1b2a4a;
  font-family: var(--body); font-size: max(10px, 1.25cqw); line-height: 1.2;
}
.credit-line a { color: #1b2a4a; font-weight: 700; text-underline-offset: 3px; }
.credit-line a:hover, .credit-line a:focus-visible { color: #8a2b0e; }

.soon {
  margin: 0; padding: 1.4cqw 1.2cqw; text-align: center; text-transform: uppercase;
  font-family: var(--pixel); font-size: max(2.5cqw, 8px); line-height: 1.5; letter-spacing: .04em;
  color: #1b2a4a; background: #f6c82b; border: .6cqw solid #1b2a4a; box-shadow: .8cqw .8cqw 0 rgba(27,42,74,.35);
  transform: rotate(-5deg);
}
@media (orientation: portrait) { .soon { font-size: max(3.2cqw, 8px); } }

/* Secret room: the gray dot (a nod to Warren Robinett's Adventure, 1979) */
.dot { position: absolute; left: calc(92 * 1cqw); top: calc(70 * 1cqw); width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border: 0; background: none; cursor: default; z-index: 3; }
.dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(5px, .55cqw); height: max(5px, .55cqw); transform: translate(-50%, -50%); background: #8a8a8a; }
@media (orientation: portrait) { .dot { left: calc(90 * 1cqw); top: calc(141 * 1cqw); } }
dialog.secret { cursor: pointer; position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; box-sizing: border-box; background: #000; border: clamp(12px, 3vmin, 28px) solid var(--accent); outline: 0; padding: 4vmin; }
dialog.secret[open] { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5vmin; }
dialog.secret::backdrop { background: #000; }
.s-by, .s-name { font-family: var(--pixel); margin: 0; text-align: center; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0; line-height: 1.25; }
.s-by { color: #d8d8d8; font-size: min(3.4vh, 7vw); }
.s-name { font-size: min(4.6vh, 9vw); animation: s-colors 2.4s steps(1) infinite; }
@keyframes s-colors { 0% { color: #ff4d4d; } 16.6% { color: #ffb02e; } 33.3% { color: #f6e84a; } 50% { color: #4de27a; } 66.6% { color: #4db8ff; } 83.3% { color: #c27bff; } }
@media (prefers-reduced-motion: reduce) { .s-name { animation: none; color: #f6e84a; } }
html.crt-off .s-name { }

/* Phones and tablets: keep the scanlines still. A big animated overlay beside the frame made some phone browsers drop the frame. */
@media (hover: none) and (pointer: coarse) { .tv-screen::after { animation: none; } }