/* kibbit.app — Kibbit's own world: the phosphor night of an old screen. Violet-black like the
   wall of his room, green that glows, scanlines, pixel type for everything big, stepped
   corners and hard shadows like a game from before, and a sky that twinkles behind it all. */

@font-face {
  font-family: "Pixelify Sans";
  src: url("../app/fonts/PixelifySans.ttf") format("truetype");
  font-display: swap;
}
/* Served from here, not from Google Fonts: a page that promises privacy doesn't tell a third
   party about every visit. Latin only, which covers Spanish and Portuguese (OFL, see fonts/). */
@font-face {
  font-family: "Silkscreen";
  src: url("fonts/silkscreen-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/space-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/space-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --void: #07060B;          /* the night outside the screen */
  --wall: #120F1C;          /* panels, like the planks of his room */
  --wall-2: #1B1626;        /* the room itself */
  --line: rgba(182, 252, 20, 0.16);
  --text: #F2EFFA;
  --text-2: rgba(242, 239, 250, 0.66);
  --green: #B6FC14;         /* phosphor, and Kibbit */
  --green-deep: #5C8A00;
  --glow: 0 0 18px rgba(182, 252, 20, 0.45);
  --amber: #FFB020;
  --sky: #6CC8FF;
  --cap: #5B6CFF;
  --pink: #E07A9A;
  /* The names the app's drawing kit reads its colours from (app/theme.js → kibbitColor). */
  --acid: #B6FC14;
  --ink: #000000;

  /* Titles in Silkscreen: Pixelify Sans's capital C read as an O and its 5 as an S
     ("Consiéntelo" looked like "Oonsiéntelo"). Pixelify stays only inside the room, the app's. */
  --pixel: "Silkscreen", ui-monospace, monospace;
  --chunky: "Silkscreen", "Pixelify Sans", ui-monospace, monospace;
  --body: "Space Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
  /* Corners cut in steps, like a pixel box. */
  --notch: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
                   100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%,
                   6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
  --notch-s: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
                     100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
                     4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));

  /* A pixel arrow for a cursor, and over anything you can click a green pointing hand, like
     an arcade's. */
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='36' viewBox='0 0 12 18' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM0 1h2v1H0zM0 2h1v1H0zM2 2h1v1H2zM0 3h1v1H0zM3 3h1v1H3zM0 4h1v1H0zM4 4h1v1H4zM0 5h1v1H0zM5 5h1v1H5zM0 6h1v1H0zM6 6h1v1H6zM0 7h1v1H0zM7 7h1v1H7zM0 8h1v1H0zM8 8h1v1H8zM0 9h1v1H0zM9 9h1v1H9zM0 10h1v1H0zM6 10h4v1H6zM0 11h1v1H0zM3 11h1v1H3zM6 11h1v1H6zM0 12h1v1H0zM2 12h1v1H2zM4 12h1v1H4zM7 12h1v1H7zM0 13h2v1H0zM4 13h1v1H4zM7 13h1v1H7zM5 14h1v1H5zM8 14h1v1H8zM5 15h1v1H5zM8 15h1v1H8zM6 16h2v1H6z' fill='%23000'/%3E%3Cpath d='M1 2h1v1H1zM1 3h2v1H1zM1 4h3v1H1zM1 5h4v1H1zM1 6h5v1H1zM1 7h6v1H1zM1 8h7v1H1zM1 9h8v1H1zM1 10h5v1H1zM1 11h2v1H1zM4 11h2v1H4zM1 12h1v1H1zM5 12h2v1H5zM5 13h2v1H5zM6 14h2v1H6zM6 15h2v1H6z' fill='%23F2EFFA'/%3E%3C/svg%3E") 0 0, auto;
  --cursor-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='32' viewBox='0 0 18 16' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v1H6zM7 0h1v1H7zM5 1h1v1H5zM8 1h1v1H8zM5 2h1v1H5zM8 2h1v1H8zM5 3h1v1H5zM8 3h1v1H8zM5 4h1v1H5zM8 4h1v1H8zM9 4h1v1H9zM10 4h1v1H10zM5 5h1v1H5zM8 5h1v1H8zM11 5h1v1H11zM12 5h1v1H12zM13 5h1v1H13zM5 6h1v1H5zM8 6h1v1H8zM11 6h1v1H11zM14 6h1v1H14zM15 6h1v1H15zM16 6h1v1H16zM2 7h1v1H2zM3 7h1v1H3zM5 7h1v1H5zM8 7h1v1H8zM11 7h1v1H11zM14 7h1v1H14zM17 7h1v1H17zM1 8h1v1H1zM4 8h1v1H4zM5 8h1v1H5zM17 8h1v1H17zM1 9h1v1H1zM5 9h1v1H5zM17 9h1v1H17zM2 10h1v1H2zM17 10h1v1H17zM3 11h1v1H3zM17 11h1v1H17zM3 12h1v1H3zM17 12h1v1H17zM4 13h1v1H4zM16 13h1v1H16zM5 14h1v1H5zM16 14h1v1H16zM5 15h1v1H5zM6 15h1v1H6zM7 15h1v1H7zM8 15h1v1H8zM9 15h1v1H9zM10 15h1v1H10zM11 15h1v1H11zM12 15h1v1H12zM13 15h1v1H13zM14 15h1v1H14zM15 15h1v1H15zM16 15h1v1H16z' fill='%23000'/%3E%3Cpath d='M6 1h1v1H6zM7 1h1v1H7zM6 2h1v1H6zM7 2h1v1H7zM6 3h1v1H6zM7 3h1v1H7zM6 4h1v1H6zM7 4h1v1H7zM6 5h1v1H6zM7 5h1v1H7zM9 5h1v1H9zM10 5h1v1H10zM6 6h1v1H6zM7 6h1v1H7zM9 6h1v1H9zM10 6h1v1H10zM12 6h1v1H12zM13 6h1v1H13zM6 7h1v1H6zM7 7h1v1H7zM9 7h1v1H9zM10 7h1v1H10zM12 7h1v1H12zM13 7h1v1H13zM15 7h1v1H15zM16 7h1v1H16zM2 8h1v1H2zM3 8h1v1H3zM6 8h1v1H6zM7 8h1v1H7zM8 8h1v1H8zM9 8h1v1H9zM10 8h1v1H10zM11 8h1v1H11zM12 8h1v1H12zM13 8h1v1H13zM14 8h1v1H14zM15 8h1v1H15zM16 8h1v1H16zM2 9h1v1H2zM3 9h1v1H3zM4 9h1v1H4zM6 9h1v1H6zM7 9h1v1H7zM8 9h1v1H8zM9 9h1v1H9zM10 9h1v1H10zM11 9h1v1H11zM12 9h1v1H12zM13 9h1v1H13zM14 9h1v1H14zM15 9h1v1H15zM16 9h1v1H16zM3 10h1v1H3zM4 10h1v1H4zM5 10h1v1H5zM6 10h1v1H6zM7 10h1v1H7zM8 10h1v1H8zM9 10h1v1H9zM10 10h1v1H10zM11 10h1v1H11zM12 10h1v1H12zM13 10h1v1H13zM14 10h1v1H14zM15 10h1v1H15zM16 10h1v1H16zM4 11h1v1H4zM5 11h1v1H5zM6 11h1v1H6zM7 11h1v1H7zM8 11h1v1H8zM9 11h1v1H9zM10 11h1v1H10zM11 11h1v1H11zM12 11h1v1H12zM13 11h1v1H13zM14 11h1v1H14zM15 11h1v1H15zM16 11h1v1H16zM4 12h1v1H4zM5 12h1v1H5zM6 12h1v1H6zM7 12h1v1H7zM8 12h1v1H8zM9 12h1v1H9zM10 12h1v1H10zM11 12h1v1H11zM12 12h1v1H12zM13 12h1v1H13zM14 12h1v1H14zM15 12h1v1H15zM16 12h1v1H16zM5 13h1v1H5zM6 13h1v1H6zM7 13h1v1H7zM8 13h1v1H8zM9 13h1v1H9zM10 13h1v1H10zM11 13h1v1H11zM12 13h1v1H12zM13 13h1v1H13zM14 13h1v1H14zM15 13h1v1H15zM6 14h1v1H6zM7 14h1v1H7zM8 14h1v1H8zM9 14h1v1H9zM10 14h1v1H10zM11 14h1v1H11zM12 14h1v1H12zM13 14h1v1H13zM14 14h1v1H14zM15 14h1v1H15z' fill='%23B6FC14'/%3E%3C/svg%3E") 13 0, pointer;
}

* { box-sizing: border-box; }
/* Pixelify Sans joins "fi" and "fl" into single glyphs that, this size, read as other letters
   ("final" came out as "anal"). Every `font:` shorthand quietly turns ligatures back on, so
   they're switched off here for everything, the way the app does it. */
*, *::before, *::after { font-synthesis: none; font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0 !important; }
/* Links inside the page scroll with fx.js, not the browser's smooth scrolling: that one gave
   up halfway on this page (the canvases redraw under it) and left you where you started. */
/* No sideways scrolling: the tilted marquee is wider than the screen on purpose, and on a
   phone that let the whole page slide left and right. Clipped on the root too, because a
   body's own clip doesn't reach the window's scrolling. (Clip, not hidden: hidden would make
   the page a scroll box of its own and break the sections that stay put while you scroll.) */
html { background: var(--void); overflow-x: clip; }
body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font: 400 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  cursor: var(--cursor);
  /* Pixelify joins "fi" and "fl" into glyphs that, small, read as other letters. */
  font-variant-ligatures: none;
}
a, button, summary, .cart { cursor: var(--cursor-hot); }
a { color: inherit; }
canvas, iframe, svg { display: block; }
/* The canvases are drawn one pixel per point (pixel.js): stretched on a Retina screen, they
   stay sharp squares instead of going soft. */
.sky, .hero-canvas, .origin-stage canvas, .free, .night { image-rendering: pixelated; }
::selection { background: var(--green); color: var(--void); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; }
.skip:focus { left: 8px; background: var(--green); color: var(--void); padding: 8px 12px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- The screen itself: stars behind, scanlines in front ---------- */
.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.16) 2px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
}

/* ---------- Boot: switched on like an old screen ---------- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  gap: 18px;
  background: var(--void);
  color: var(--green);
  font: 400 clamp(11px, 1.3vw, 14px)/1.8 var(--chunky);
  text-shadow: var(--glow);
}
.boot-log { margin: 0; min-height: 9em; white-space: pre-wrap; font: inherit; }
.boot-bar { width: min(360px, 70vw); height: 14px; border: 2px solid var(--green); padding: 2px; }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--green); }
/* Off: a flash, then the black folds away into a bright line across the middle. */
.boot.off { animation: boot-off 0.7s steps(10) forwards; }
@keyframes boot-off {
  0% { clip-path: inset(0 0 0 0); background: var(--void); }
  30% { clip-path: inset(0 0 0 0); background: #FFFFFF; color: transparent; text-shadow: none; }
  31% { clip-path: inset(49.6% 0 49.6% 0); background: #FFFFFF; color: transparent; }
  100% { clip-path: inset(50% 50% 50% 50%); background: #FFFFFF; color: transparent; }
}
.boot.gone { display: none; }

/* ---------- Energy bar: how far down you are ---------- */
.hp {
  position: fixed;
  left: var(--gutter);
  bottom: 18px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 10px var(--chunky);
  letter-spacing: 1px;
  color: var(--text-2);
}
.hp i {
  --p: 0;
  display: block;
  width: 120px;
  height: 12px;
  border: 2px solid var(--green);
  background: linear-gradient(to right, var(--green) calc(var(--p) * 100%), rgba(7, 6, 11, 0.8) 0);
}
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  .hp i { animation: hp-fill steps(20) both; animation-timeline: scroll(root); }
  @keyframes hp-fill { from { --p: 0; } to { --p: 1; } }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px var(--gutter) 24px;
  background: linear-gradient(to bottom, rgba(7, 6, 11, 0.92), rgba(7, 6, 11, 0));
}
.nav nav { display: flex; gap: 26px; margin-left: auto; }
.nav nav a {
  font: 400 11px var(--chunky);
  letter-spacing: 1px;
  text-decoration: none;
  color: var(--text-2);
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}
.nav nav a::before { content: "▶"; position: absolute; left: -14px; color: var(--green); opacity: 0; }
.nav nav a:hover { color: var(--green); }
.nav nav a:hover::before { opacity: 1; animation: nudge 0.5s steps(2) infinite; }
@keyframes nudge { 50% { translate: 3px 0; } }

/* ES · EN · PT, as small pixel keys; the one in use lit green. */
.langs { display: flex; gap: 2px; }
.langs button {
  all: unset;
  cursor: var(--cursor-hot);
  font: 400 10px var(--chunky);
  letter-spacing: 1px;
  padding: 6px 7px 5px;
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.langs button:hover { color: var(--green); }
.langs button.on { background: var(--green); color: var(--void); box-shadow: none; }
.langs button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 400 18px var(--pixel); text-decoration: none; }
.pix { display: inline-block; line-height: 0; }

/* ---------- Pixel buttons: a notched block on a hard shadow that presses down ---------- */
.px-btn {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--void);
  font: 400 14px var(--chunky);
  letter-spacing: 0.5px;
}
.px-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  translate: 5px 5px;
  background: var(--green-deep);
  clip-path: var(--notch);
}
.px-btn > span {
  position: relative;
  display: block;
  padding: 15px 24px 13px;
  background: var(--green);
  clip-path: var(--notch);
  transition: translate 0.08s steps(2);
}
.px-btn:hover > span { translate: -2px -2px; }
.px-btn:active > span { translate: 5px 5px; }
.px-btn.small { font-size: 11px; }
.px-btn.small > span { padding: 10px 14px 8px; }
.px-btn.big { font-size: 16px; }
.px-btn.big > span { padding: 20px 30px 18px; }
.px-btn.ghost { color: var(--text); }
.px-btn.ghost::before { background: rgba(182, 252, 20, 0.35); }
.px-btn.ghost > span { background: var(--wall); box-shadow: inset 0 0 0 2px var(--green); }
.px-btn[aria-disabled="true"] { cursor: var(--cursor); }
.px-btn[aria-disabled="true"]:hover > span, .px-btn[aria-disabled="true"]:active > span { translate: none; }
.ctas { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 30px; }

/* ---------- Common type ---------- */
.kicker { font: 400 12px var(--chunky); letter-spacing: 2px; color: var(--green); text-shadow: var(--glow); margin: 0 0 18px; }
.kicker::before { content: "■ "; }
.h2 {
  font: 400 clamp(30px, 5.2vw, 76px)/1.05 var(--pixel);
  letter-spacing: -0.01em;
  margin: 0 0 clamp(28px, 4vw, 48px);
  text-wrap: balance;
}
.intro { font-size: clamp(15px, 1.2vw, 17px); color: var(--text-2); max-width: 46em; margin: 0 0 clamp(32px, 5vw, 56px); }
/* While a heading decodes, the letters still scrambling glow green. */
.scramble { color: var(--green); text-shadow: var(--glow); }

/* ---------- 1. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding: 0 var(--gutter) clamp(72px, 11vh, 130px);
  overflow: hidden;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-copy { position: relative; max-width: 780px; margin: 0 auto; text-align: center; pointer-events: none; }
.hero-copy .ctas { justify-content: center; pointer-events: auto; }
.tag { font: 400 clamp(17px, 2.3vw, 30px)/1.3 var(--pixel); margin: 0 0 16px; min-height: 1.2em; }
.caret { color: var(--green); animation: blink 1s steps(1) infinite; }
/* Typed and decoding text (fx.js): the final words hold the space, invisible; what's being
   written sits on top of them. */
.tw { display: inline-grid; }
.tw > * { grid-area: 1 / 1; }
.tw-full, .tw-full * { color: transparent !important; text-shadow: none !important; }
.tw-now { pointer-events: none; }
@keyframes blink { 50% { opacity: 0; } }
.hero-sub { color: var(--text-2); margin: 0 auto; max-width: 38em; font-size: 15px; }
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  margin: 0;
  font: 400 10px var(--chunky);
  letter-spacing: 2px;
  color: var(--text-2);
}
.scroll-hint b { display: inline-block; color: var(--green); animation: bob 1.2s steps(2) infinite; }
@keyframes bob { 50% { translate: 0 4px; } }

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--green);
  color: var(--void);
  rotate: -2deg;
  margin: 0 -3vw;
  padding: 14px 0 10px;
  box-shadow: 0 6px 0 var(--green-deep);
}
.marquee-track { display: flex; gap: 28px; width: max-content; font: 400 clamp(22px, 3vw, 40px) var(--chunky); white-space: nowrap; will-change: transform; }
.marquee-track i { font-style: normal; }

/* ---------- 2. Origin: pinned while the story plays ---------- */
.origin { position: relative; height: 520vh; margin-top: 12vh; }
.origin-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.origin-stage canvas { width: 100%; height: 100%; }
.chapter-count { position: absolute; right: var(--gutter); top: 88px; font: 400 12px var(--chunky); color: var(--text-2); }
.chapter-count b { color: var(--green); font-weight: 400; text-shadow: var(--glow); }
.dialog {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 6vh, 56px);
  translate: -50% 0;
  width: min(760px, calc(100% - 2 * var(--gutter)));
  padding: 18px 24px 20px;
  background: rgba(7, 6, 11, 0.92);
  clip-path: var(--notch);
  box-shadow: inset 0 0 0 3px var(--green);
}
.dialog-who { margin: 0 0 6px; font: 400 11px var(--chunky); color: var(--green); letter-spacing: 1px; }
.dialog-text { margin: 0; font: 700 clamp(16px, 1.7vw, 22px)/1.45 var(--body); min-height: 2.7em; }
.dialog-text::after { content: "▼"; display: inline-block; margin-left: 10px; font-size: 0.6em; color: var(--green); animation: bob 0.8s steps(2) infinite; }

/* In the sections that play while you scroll: a reminder that down is the way forward (a
   story told sideways invites a swipe to the side). It fades out on the last stretch. */
.keep-scrolling {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  z-index: 3;
  margin: 0;
  padding: 7px 12px 6px;
  font: 400 10px var(--chunky);
  letter-spacing: 2px;
  color: var(--text);
  background: rgba(7, 6, 11, 0.8);
  clip-path: var(--notch-s);
  box-shadow: inset 0 0 0 2px var(--line);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s steps(3);
}
.keep-scrolling b { display: inline-block; color: var(--green); animation: bob 1.2s steps(2) infinite; }
.keep-scrolling.done { opacity: 0; }
.origin-stage .keep-scrolling { top: 84px; }
.does-stage .keep-scrolling { bottom: 20px; }

/* ---------- 3. The live room ---------- */
.room-sec { padding: clamp(56px, 7vw, 104px) 0; }
.room-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.room-frame { padding: 10px; background: var(--wall); clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--line); }
.room { position: relative; margin: 0 auto; overflow: hidden; background: var(--wall-2); }
.room iframe { position: absolute; left: -24px; top: -30px; border: 0; background: transparent; transform-origin: 0 0; }

.bubble {
  position: absolute;
  z-index: 5;
  max-width: 280px;
  padding: 9px 13px 10px;
  background: rgba(18, 16, 28, 0.97);
  clip-path: var(--notch-s);
  box-shadow: inset 0 0 0 2px var(--green);
  color: var(--text);
  font: 700 14px/1.4 var(--body);
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.2s steps(3), translate 0.2s steps(3);
  pointer-events: none;
}
.bubble.on { opacity: 1; translate: 0 0; }
.bubble b { color: var(--green); font-weight: 500; }

.orders-title { margin: 0; font: 400 21px var(--pixel); }
.orders-help { margin: 4px 0 18px; color: var(--text-2); font-size: 14px; }
.order-list { display: grid; gap: 10px; }
.order-list button {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 12px 16px 12px 36px;
  background: var(--wall);
  clip-path: var(--notch-s);
  position: relative;
  cursor: var(--cursor-hot);
  transition: background 0.12s steps(2);
}
.order-list button::before { content: "▶"; position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--green); opacity: 0; }
.order-list button:hover, .order-list button:focus-visible { background: #221C33; outline: none; }
.order-list button:hover::before, .order-list button:focus-visible::before { opacity: 1; animation: nudge 0.5s steps(2) infinite; }
.order-list button.on { background: var(--green); color: var(--void); }
.order-list button.on::before { opacity: 1; color: var(--void); }
.order-list .ic { grid-row: 1 / 3; line-height: 0; }
.order-list b { font: 400 14px var(--pixel); }
.order-list small { font-size: 12px; color: var(--text-2); }
.order-list button.on small { color: rgba(7, 6, 11, 0.7); }

/* ---------- 4. What he does: sideways while you scroll down ---------- */
.does { position: relative; height: 440vh; }
/* One column as wide as the screen: the rail inside it is as wide as all its cards, and slides. */
.does-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; grid-template-columns: 100%; padding-top: 96px; }
.does-head .h2 { margin-bottom: 0; font-size: clamp(36px, 5vw, 72px); }
.rail { display: flex; width: max-content; gap: clamp(20px, 3vw, 40px); align-items: center; padding: 0 var(--gutter); will-change: transform; }
.card {
  flex: 0 0 min(80vw, 560px);
  background: var(--wall);
  clip-path: var(--notch);
  padding: 18px 18px 22px;
  position: relative;
  transition: background 0.2s steps(3), scale 0.3s steps(4);
  scale: 0.94;
}
.card.on { background: #1F1930; box-shadow: inset 0 0 0 3px var(--green); scale: 1; }
.card-screen { position: relative; aspect-ratio: 2 / 1; background: var(--wall-2); clip-path: var(--notch-s); }
/* The stills are drawn one pixel per point (site.js) and stay sharp squares when stretched. */
.card-screen canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.card-n { position: absolute; top: 26px; right: 28px; font: 400 44px var(--chunky); color: rgba(242, 239, 250, 0.1); z-index: 1; }
.card.on .card-n { color: var(--green); text-shadow: var(--glow); }
.card h3 { margin: 18px 4px 6px; font: 400 19px/1.25 var(--pixel); }
.card p { margin: 0 4px; color: var(--text-2); font-size: 14px; }
.rail-count { position: absolute; right: var(--gutter); bottom: 24px; font: 400 12px var(--chunky); color: var(--text-2); }
.rail-count b { color: var(--green); font-weight: 400; }

/* ---------- 5. Privacy: cartridges and a terminal ---------- */
.privacy { padding: clamp(56px, 7vw, 104px) 0; }
.carts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); margin-bottom: clamp(56px, 8vw, 96px); }
/* A game cartridge: grip ridges on top, a label in its colour, and it pops up when you point. */
.cart {
  position: relative;
  padding: 34px 18px 22px;
  background: #2A2440;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: translate 0.15s steps(3), rotate 0.15s steps(3);
}
.cart::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 18px;
  right: 40px;
  height: 12px;
  background: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.35) 0 4px, transparent 4px 8px);
}
.cart:hover { translate: 0 -10px; rotate: -1.5deg; }
.cart-label { background: var(--c); color: var(--void); padding: 16px 16px 18px; clip-path: var(--notch-s); }
.cart-label p { margin: 0 0 6px; font: 400 10px var(--chunky); letter-spacing: 1px; }
.cart-label h3 { margin: 0; font: 400 18px/1.25 var(--pixel); }
.cart-text { margin: 16px 2px 0; color: var(--text-2); font-size: 14px; }

.term { background: #0B0A10; clip-path: var(--notch); box-shadow: inset 0 0 0 3px #2A2440; max-width: 980px; }
.term-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #2A2440; font: 400 10px var(--chunky); color: var(--text-2); }
.term-bar i { width: 10px; height: 10px; background: var(--text-2); }
.term-bar i:nth-child(1) { background: #FF5C5C; }
.term-bar i:nth-child(2) { background: var(--amber); }
.term-bar i:nth-child(3) { background: var(--green); }
.term-bar span { margin-left: 8px; }
.term-body { padding: 22px 24px 26px; font-size: 15px; min-height: 17em; }
.term-body p { margin: 0 0 10px; }
.term-body .cmd { color: var(--green); text-shadow: var(--glow); }
.term-body .line { color: var(--text-2); }
.term-body .line b { color: var(--green); font-weight: 700; margin-right: 8px; }
.term-body .blink { animation: blink 1s steps(1) infinite; }

/* ---------- 6. Price ---------- */
.price { padding: clamp(56px, 7vw, 104px) 0; }
.free { width: 100%; height: clamp(150px, 24vw, 340px); }
.price-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-top: 28px; }
.price-copy { margin: 0; font-size: clamp(15px, 1.2vw, 17px); color: var(--text-2); }
.price-cta { text-align: right; }
.fine { margin: 18px 0 0; font-size: 12px; color: var(--text-2); }

/* ---------- 7. Apoya a Kibbit ---------- */
.support { padding: clamp(56px, 7vw, 104px) 0; }
.price-copy a { color: var(--green); text-underline-offset: 3px; }
.support-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.support-stage { padding: 12px; background: var(--wall); clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--line); }
/* The room, drawn by the app at a whole number of pixels and blown up crisp (support.js). */
.support-room { position: relative; margin: 0 auto; overflow: hidden; background: var(--wall-2); }
.support-room iframe { position: absolute; left: 0; top: 0; border: 0; background: transparent; transform-origin: 0 0; }
.support-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 2px 12px; }
.support-lore { margin: 0; font-size: 13px; color: var(--text-2); min-height: 2.6em; }
.support-lore b { color: var(--green); font: 400 13px var(--pixel); }
.support-hours { display: flex; gap: 2px; flex-shrink: 0; }
.support-hours button, .style-grid button {
  all: unset; box-sizing: border-box; cursor: var(--cursor-hot);
  font: 400 10px var(--chunky); letter-spacing: 1px; color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.support-hours button { padding: 7px 9px 6px; }
.support-hours button.on { background: var(--green); color: var(--void); box-shadow: none; }
.support-hours button:focus-visible, .style-grid button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.style-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.style-grid button { display: grid; gap: 6px; padding: 4px 4px 7px; text-align: center; line-height: 1.3; }
.style-grid button img { width: 100%; aspect-ratio: 60 / 35; image-rendering: pixelated; background: var(--wall-2); }
.style-grid button:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--green); }
.style-grid button.on { color: var(--green); box-shadow: inset 0 0 0 2px var(--green), 0 0 18px rgba(182, 252, 20, 0.25); }

.perks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.perks li { padding: 14px 16px 16px 40px; background: var(--wall); clip-path: var(--notch-s); position: relative; }
.perks li::before { content: "✦"; position: absolute; left: 16px; top: 14px; color: var(--green); text-shadow: var(--glow); }
.perks .perk-future { box-shadow: inset 0 0 0 2px var(--green); }
.perks .perk-future::before { content: "★"; }
.perks b { display: block; font: 400 16px/1.3 var(--pixel); margin-bottom: 4px; }
.perks span { color: var(--text-2); font-size: 13px; }
.support-price { margin: 0 0 18px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.support-price b { font: 400 38px/1 var(--pixel); color: var(--green); text-shadow: var(--glow); }
.support-price span { color: var(--text-2); font: 400 11px var(--chunky); letter-spacing: 1px; }

.support-sub { margin: -8px 0 18px; color: var(--text-2); font-size: 14px; }
.support-h3 { margin: clamp(48px, 6vw, 72px) 0 18px; font: 400 clamp(20px, 2.4vw, 28px) var(--pixel); }
/* The skins: him big, wearing the one picked, with its story; the rest to pick from. */
.skin-stage { display: grid; grid-template-columns: minmax(200px, 0.8fr) minmax(0, 2fr); gap: clamp(18px, 3vw, 36px); align-items: center;
              padding: clamp(16px, 2vw, 24px); background: var(--wall); clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--line); }
.skin-hero { display: grid; place-items: center; aspect-ratio: 1; background: radial-gradient(circle at 50% 60%, #221C33, var(--wall-2) 70%); clip-path: var(--notch-s); }
.skin-hero canvas { width: 62%; height: auto; aspect-ratio: 12 / 11; image-rendering: pixelated; }
.skin-story { margin: 0 0 14px; min-height: 3.6em; color: var(--text-2); font-size: 14px; }
.skin-story b { display: block; margin-bottom: 4px; font: 400 clamp(18px, 2vw, 24px)/1.2 var(--pixel); color: var(--green); text-shadow: var(--glow); }
.skin-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.skin-row button { all: unset; box-sizing: border-box; cursor: var(--cursor-hot); display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px;
                   box-shadow: inset 0 0 0 1px var(--line); text-align: center; font-size: 10px; line-height: 1.2; color: var(--text-2); }
.skin-row button:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--green); }
.skin-row button.on { color: var(--green); box-shadow: inset 0 0 0 2px var(--green), 0 0 18px rgba(182, 252, 20, 0.25); }
.skin-row button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.skin-row canvas { width: 36px; height: 33px; image-rendering: pixelated; }

/* The furniture: each piece in its corner of the room, as the room draws it. */
.furniture { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.furniture figure { margin: 0; padding: 8px 8px 12px; background: var(--wall); clip-path: var(--notch-s); }
.furniture img { display: block; width: 100%; aspect-ratio: 4 / 3; image-rendering: pixelated; background: var(--wall-2); margin-bottom: 10px; }
.furniture b { display: block; font: 400 13px/1.3 var(--pixel); margin-bottom: 4px; }
.furniture span { display: block; font-size: 12px; color: var(--text-2); line-height: 1.35; }

.plant-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.plant-row figure { margin: 0; padding: 12px 6px 10px; background: var(--wall); clip-path: var(--notch-s); text-align: center; }
.plant-row canvas { margin: 0 auto 8px; image-rendering: pixelated; width: 64px; height: 48px; }
.plant-row figcaption { font-size: 11px; color: var(--text-2); line-height: 1.25; }

.tip { margin-top: clamp(48px, 6vw, 72px); padding: clamp(22px, 3vw, 36px); background: #151120; clip-path: var(--notch); box-shadow: inset 0 0 0 3px #2A2440;
       display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 40px; align-items: center; }
.tip-copy .kicker { margin-bottom: 10px; }
.tip-copy h3 { margin: 0 0 10px; font: 400 clamp(21px, 2.4vw, 30px)/1.2 var(--pixel); }
.tip-copy p:last-child { margin: 0; color: var(--text-2); font-size: 14px; }
.tip-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tip-card { display: grid; justify-items: center; gap: 6px; padding: 18px 8px 16px; background: var(--wall); clip-path: var(--notch-s); text-decoration: none; text-align: center;
            transition: translate 0.12s steps(2), background 0.12s steps(2); }
.tip-card .ic { line-height: 0; }
.tip-card b { font: 400 14px/1.25 var(--pixel); }
.tip-card small { font: 400 12px var(--chunky); color: var(--green); letter-spacing: 1px; }
a.tip-card[href]:hover { translate: 0 -6px; background: #221C33; }
.tip-card:not([href]) { cursor: var(--cursor); opacity: 0.7; }
.tip-fine { grid-column: 1 / -1; margin: 0; }

/* ---------- 8. FAQ: game dialogs ---------- */
.faq { padding: clamp(56px, 7vw, 104px) 0 clamp(80px, 10vw, 140px); }
.qs { display: grid; gap: 12px; max-width: 920px; }
.qs details { background: var(--wall); clip-path: var(--notch-s); }
.qs summary { list-style: none; padding: 20px 56px 20px 22px; position: relative; font: 400 clamp(14px, 1.3vw, 17px)/1.45 var(--pixel); }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "▶"; position: absolute; right: 22px; top: 50%; translate: 0 -50%; color: var(--green); transition: rotate 0.15s steps(2); }
.qs details[open] summary::after { rotate: 90deg; }
.qs details[open] { box-shadow: inset 0 0 0 3px var(--green); }
.qs summary:hover { color: var(--green); }
.qs details p { margin: 0; padding: 0 22px 22px; color: var(--text-2); }

/* The studio's wordmark: ">_ PageDraft Studio", in its own type, lighting up green. */
.pds { display: inline-flex; align-items: baseline; gap: 0.3em; font: 700 1em "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.01em;
       padding: 0.1em 0.35em; margin: -0.1em -0.35em; border-radius: 3px; transition: background 0.15s ease, color 0.15s ease; }
.pds-prompt { font-family: ui-monospace, Menlo, monospace; font-weight: 800; letter-spacing: -0.08em; }
.pds-link { text-decoration: none; color: var(--text); }
.pds-link:hover .pds, .pds-link:focus-visible .pds { background: var(--green); color: var(--void); }
.pds-link:focus-visible { outline: none; }

/* ---------- 8. Good night ---------- */
.foot { position: relative; overflow: hidden; padding-top: clamp(140px, 20vw, 260px); }
.night { position: absolute; inset: 0; width: 100%; height: 100%; }
.foot-in { position: relative; }
.goodnight { font: 400 clamp(40px, 8.5vw, 132px)/1 var(--pixel); margin: 0 0 clamp(40px, 8vw, 96px); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 28px 0 64px; border-top: 2px dashed var(--line); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
.foot-links a { color: var(--text-2); text-underline-offset: 3px; }
.foot-links a:hover { color: var(--green); }
.foot .made { margin: 0 0 0 auto; color: var(--text-2); font-size: 14px; }
.foot .made .pds { margin-left: 0.2em; }
.foot .copy { margin: 0; width: 100%; color: var(--text-2); font-size: 12px; }

/* ---------- Things arriving as you scroll: in steps, like a game ----------
   fx.js adds .in when each one comes into view. (Scroll timelines in CSS did this before,
   but Safari sometimes left them stuck at the start: the room's frame and the questions
   stayed invisible.) */
@media (prefers-reduced-motion: no-preference) {
  .reveal, .reveal-pop { opacity: 0; translate: 0 32px; transition: opacity 0.5s steps(5), translate 0.5s steps(5), scale 0.5s steps(5); }
  .reveal-pop { scale: 0.9; }
  .reveal.in, .reveal-pop.in { opacity: 1; translate: 0 0; scale: 1; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 980px) {
  .room-grid, .price-row, .support-grid, .tip { grid-template-columns: minmax(0, 1fr); }
  .style-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .skin-stage { grid-template-columns: minmax(0, 1fr); }
  .skin-hero { max-width: 260px; width: 100%; margin: 0 auto; }
  .furniture { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .price-cta { text-align: left; }
  .carts { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- The phone menu: a game's pause screen ---------- */
.menu-btn {
  all: unset;
  display: none;
  cursor: var(--cursor-hot);
  width: 44px;
  height: 40px;
  place-items: center;
  color: var(--green);
  background: var(--wall);
  box-shadow: inset 0 0 0 2px var(--green), 3px 3px 0 var(--green-deep);
  clip-path: var(--notch-s);
}
.menu-btn svg { fill: currentColor; }
.menu-btn .cross, .menu-btn[aria-expanded="true"] .bars { display: none; }
.menu-btn[aria-expanded="true"] .cross { display: block; }
.menu-btn:active { translate: 2px 2px; }
.menu-btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.menu {
  position: fixed;
  inset: 0;
  z-index: 45;                                   /* under the bar, so ✕ stays at hand */
  display: flex;
  flex-direction: column;
  padding: 104px var(--gutter) 32px;
  background: var(--void);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu-kicker {
  margin: 0 0 22px;
  font: 400 12px var(--chunky);
  letter-spacing: 3px;
  color: var(--green);
  text-shadow: var(--glow);
}
.menu-kicker::before { content: "■ "; }
.menu nav { display: grid; gap: 4px; }
.menu nav a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0 10px 30px;
  font: 400 clamp(22px, 6.5vw, 34px)/1.15 var(--pixel);
  color: var(--text);
  text-decoration: none;
}
.menu nav a b { font: 400 11px var(--chunky); letter-spacing: 1px; color: var(--text-2); min-width: 2ch; }
.menu nav a::before { content: "▶"; position: absolute; left: 0; top: 50%; translate: 0 -50%; font-size: 18px; color: var(--green); opacity: 0; }
.menu nav a:hover, .menu nav a:focus-visible { color: var(--green); outline: none; }
.menu nav a:hover::before, .menu nav a:focus-visible::before { opacity: 1; animation: nudge 0.5s steps(2) infinite; }
.menu-foot {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 2px dashed var(--line);
}
.menu-foot .langs button { font-size: 12px; padding: 9px 11px 8px; }
.menu-foot .pix { animation: bob 1.2s steps(2) infinite; }

/* Switching on: a bright line across the middle that opens into the screen, and then the
   options arrive one by one, as the boot at the top of the page does it backwards. */
@media (prefers-reduced-motion: no-preference) {
  .menu.on { animation: menu-on 0.32s steps(8) both; }
  .menu.on nav a, .menu.on .menu-kicker { animation: menu-item 0.3s steps(4) both; }
  .menu.on .menu-kicker { animation-delay: 0.18s; }
  .menu.on nav a:nth-child(1) { animation-delay: 0.22s; }
  .menu.on nav a:nth-child(2) { animation-delay: 0.26s; }
  .menu.on nav a:nth-child(3) { animation-delay: 0.30s; }
  .menu.on nav a:nth-child(4) { animation-delay: 0.34s; }
  .menu.on nav a:nth-child(5) { animation-delay: 0.38s; }
  .menu.on nav a:nth-child(6) { animation-delay: 0.42s; }
  .menu.on nav a:nth-child(7) { animation-delay: 0.46s; }
  .menu.off { animation: menu-off 0.22s steps(6) both; }
}
@keyframes menu-on {
  0% { clip-path: inset(49.6% 0 49.6% 0); background: #FFFFFF; }
  35% { clip-path: inset(49.6% 0 49.6% 0); background: #FFFFFF; }
  36% { clip-path: inset(49.6% 0 49.6% 0); background: var(--void); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes menu-off {
  0% { clip-path: inset(0 0 0 0); }
  70% { clip-path: inset(49.6% 0 49.6% 0); background: #FFFFFF; }
  100% { clip-path: inset(50% 50% 50% 50%); background: #FFFFFF; }
}
@keyframes menu-item { from { opacity: 0; translate: -24px 0; } to { opacity: 1; translate: 0 0; } }

/* Below this the bar's links don't fit on one line: they move into the menu. */
@media (max-width: 1000px) {
  .nav nav { display: none; }
  .nav .langs { margin-left: auto; }
  .menu-btn { display: grid; }
}
@media (max-width: 760px) {
  .hp { display: none; }
  .origin { height: 440vh; }
}
/* On a phone the bar keeps Kibbit, Descargar and the menu; the languages go inside it. */
@media (max-width: 560px) {
  .nav { gap: 12px; }
  .nav .langs { display: none; }
  .nav .px-btn { margin-left: auto; }
}
/* The menu is only for narrow screens: if the window grows while it's open, it steps aside. */
@media (min-width: 1001px) {
  .menu { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .boot { display: none; }
  .scroll-hint b, .keep-scrolling b, .dialog-text::after, .caret, .term-body .blink, .nav nav a:hover::before, .menu nav a::before, .menu-foot .pix { animation: none; }
}