/* SUPER INTELLIGENCE, 16-bit edition: the pixel UI kit (DESIGN.md is the contract).
 *
 * The whole game is drawn on a 640 x 360 pixel grid scaled up with hard edges, like a
 * Super Nintendo title screen at noon. The DOM screens follow it: `--px` is an "art pixel"
 * of the old 320 x 180 grid (js/main.js keeps it current) and `--fp`, one fine pixel, is
 * half of it: every line, border, notch and drop is a whole number of fine pixels.
 *
 *   surfaces   .px-panel (a window: Cloud, 1 fp ink frame, 2 fp drop, 2 fp Cloud Shade
 *              inside its bottom edge, 2 fp notched corners), .px-plate / .px-btn (a plate:
 *              1 fp frame, 1 fp drop, 1 fp notches), .px-btn.is-primary (the one Logo Red
 *              action per view), .is-current (the pop: gold, a 2 fp drop), .px-badge,
 *              .px-key, .px-tab (joins the panel under it), .px-row, .px-toggle, .px-slider
 *   type       Jersey 10 only, on its own grid: --t1 18.667 px (10 px capitals), --t15 28 px,
 *              --t2 37.333 px, --t3 56 px; one step bigger on 1080p and 1440p screens.
 *              Never bold: Jersey has one weight and synthetic bold smears it.
 *   sprites    <div class="px-fit"><img data-px></div>: js/screens/select.js pixelFit()
 *              sizes the art to a whole number of device pixels per art pixel.
 *
 * No border-radius, no blur, no soft shadows, no gradients except the sky bands (a
 * single-colour linear-gradient below is a solid block, used to set one ink pixel).
 */

:root {
  --px: 4px;                       /* CSS px per art pixel (js/main.js keeps it current) */
  --fp: calc(var(--px) / 2);       /* one fine pixel: lines, borders, notches, drops */
  --u: calc(var(--px) * 1);
  --tk: 1;                         /* the type step: 1.5 on 1080p, 2 on 1440p */

  /* DESIGN.md colours */
  --ink: #231d33;
  --night: #2e2c3d;
  --plum: #453749;
  --slate: #6a7b91;
  --stone: #a4afae;
  --cloud-shade: #c6dff2;
  --cloud: #eef5fc;
  --paper: #ffffff;
  --sky1: #3a8fcf;
  --sky2: #53b5e4;
  --sky3: #68c9ed;
  --sky4: #9fdcf2;
  --sky5: #c3ecf7;
  --grass1: #9fcf6a;
  --grass2: #75a073;
  --grass3: #4a886c;
  --grass4: #366b72;
  --red: #df1a1a;
  --red-hi: #ff5a4a;
  --red-deep: #6a2246;
  --gold: #ffd23f;
  --gold-hi: #fff3a6;
  --gold-deep: #c9851a;
  --p1: #e8323c;
  --p2: #2f6fe0;
  --p1-deep: #7a1a2e;
  --p2-deep: #1b2f6e;

  /* older names, still read by a few rules */
  --white: var(--paper);
  --ink-2: var(--night);
  --ink-3: var(--plum);
  --stone-2: #8f9c9c;
  --stone-3: var(--slate);
  --cloud-2: #dcebf8;
  --sky: var(--sky3);
  --sky-2: var(--sky2);
  --sky-3: var(--sky1);
  --sky-pale: var(--sky5);
  --grass-hi: var(--grass1);
  --grass: var(--grass2);
  --grass-2: var(--grass3);
  --grass-3: var(--grass4);
  --grass-deep: #25484f;

  /* one face: Jersey 10 (the old candy faces, Fredoka and Nunito, are gone from the DOM) */
  --font-pixel: 'Jersey 10', ui-monospace, monospace;
  --font-tiny: var(--font-pixel);
  --font-display: var(--font-pixel);
  --font-sans: var(--font-pixel);

  /* type on Jersey's grid (1/18.667 em): capitals of 10, 15, 20 and 30 px */
  --t1: calc(18.667px * var(--tk));
  --t15: calc(28px * var(--tk));
  --t2: calc(37.333px * var(--tk));
  --t3: calc(56px * var(--tk));
  --fs-small: var(--t1);
  --fs-tiny: var(--t1);
  --fs-menu: var(--t15);
  --fs-head: var(--t2);
}
@media (min-width: 1920px) and (min-height: 1080px) { :root { --tk: 1.5; } }
@media (min-width: 2560px) and (min-height: 1440px) { :root { --tk: 2; } }

/* ---------------------------------------------------------------- base */
/* Jersey 10 has one weight: the old candy look's bold (app.css sets 700 on body) would be
   faked by the browser, which smears the pixels. Nothing is bold, nothing is synthesised. */
body {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
  -webkit-font-smoothing: auto;
}
b, strong, h1, h2, h3, h4, h5, h6, th, dt, legend { font-weight: 400; }
/* the old candy look outlined its type with -webkit-text-stroke; pixel type never is */
body * { -webkit-text-stroke: 0 !important; }
/* and rounded its corners: no screen here has a round one (DESIGN.md "donts" 1) */
.wk-screen *, .wk-screen *::before, .wk-screen *::after,
.gf-options *, .gf-options *::before, .gf-options *::after,
.pr-screen *, .pr-screen *::before, .pr-screen *::after,
.pt-screen *, .pt-screen *::before, .pt-screen *::after,
.px-loading *, .px-vs *, .fight-pause *, .fight-tips * { border-radius: 0 !important; }
:focus-visible { outline: var(--fp) solid var(--gold); outline-offset: var(--fp); }
.px, .px * { box-sizing: border-box; }
.px-crisp, .px-crisp img, img.px-crisp, canvas.px-crisp {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* notched corners, cut on the fine grid (a stepped cut: no half pixels) */
.px-notch {
  clip-path: polygon(var(--fp) 0, calc(100% - var(--fp)) 0, calc(100% - var(--fp)) var(--fp), 100% var(--fp),
    100% calc(100% - var(--fp)), calc(100% - var(--fp)) calc(100% - var(--fp)), calc(100% - var(--fp)) 100%,
    var(--fp) 100%, var(--fp) calc(100% - var(--fp)), 0 calc(100% - var(--fp)), 0 var(--fp), var(--fp) var(--fp));
}

/* ---------------------------------------------------------------- type */
/* a screen title on the sky: white capitals, a one-pixel ink outline and a drop */
.px-title {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: var(--t2);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow:
    var(--fp) 0 0 var(--ink), calc(var(--fp) * -1) 0 0 var(--ink), 0 var(--fp) 0 var(--ink), 0 calc(var(--fp) * -1) 0 var(--ink),
    var(--fp) var(--fp) 0 var(--ink), calc(var(--fp) * -1) var(--fp) 0 var(--ink), var(--fp) calc(var(--fp) * -1) 0 var(--ink),
    calc(var(--fp) * -1) calc(var(--fp) * -1) 0 var(--ink), 0 calc(var(--fp) * 2) 0 var(--ink);
}
.px-label {
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}
.px-text {
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1.2;
  color: var(--ink);
}

/* ---------------------------------------------------------------- panel (a window) */
/* Cloud, a 1 fp ink frame whose bottom edge carries the 2 fp drop, the Cloud Shade band
   inside the bottom (the cartridge look), 2 fp stepped corners with the ink pixel that
   closes each top corner */
.px-panel {
  --pbg: var(--cloud);
  --pshade: var(--cloud-shade);
  position: relative;
  color: var(--ink);
  border: var(--fp) solid var(--ink);
  border-bottom-width: calc(var(--fp) * 3);
  background:
    linear-gradient(var(--ink) 0 0) left top / var(--fp) var(--fp) no-repeat padding-box,
    linear-gradient(var(--ink) 0 0) right top / var(--fp) var(--fp) no-repeat padding-box,
    var(--pbg);
  box-shadow: inset 0 calc(var(--fp) * -2) 0 var(--pshade);
  padding: calc(var(--fp) * 12);
  clip-path: polygon(
    calc(var(--fp) * 2) 0, calc(100% - var(--fp) * 2) 0, calc(100% - var(--fp) * 2) var(--fp), calc(100% - var(--fp)) var(--fp),
    calc(100% - var(--fp)) calc(var(--fp) * 2), 100% calc(var(--fp) * 2),
    100% calc(100% - var(--fp) * 2), calc(100% - var(--fp)) calc(100% - var(--fp) * 2), calc(100% - var(--fp)) calc(100% - var(--fp)),
    calc(100% - var(--fp) * 2) calc(100% - var(--fp)), calc(100% - var(--fp) * 2) 100%,
    calc(var(--fp) * 2) 100%, calc(var(--fp) * 2) calc(100% - var(--fp)), var(--fp) calc(100% - var(--fp)),
    var(--fp) calc(100% - var(--fp) * 2), 0 calc(100% - var(--fp) * 2),
    0 calc(var(--fp) * 2), var(--fp) calc(var(--fp) * 2), var(--fp) var(--fp), calc(var(--fp) * 2) var(--fp));
}
.px-panel.is-dark { --pbg: var(--night); --pshade: var(--ink); color: var(--paper); }

/* the same window drawn behind its content (on ::before), so nothing inside is clipped: a
   ribbon over the edge, a bar fixed to the screen. Not for a box that scrolls. */
.px-frame {
  --pbg: var(--cloud);
  --pshade: var(--cloud-shade);
  position: relative;
  isolation: isolate;
  color: var(--ink);
  border: var(--fp) solid transparent;
  border-bottom-width: calc(var(--fp) * 3);
  padding: calc(var(--fp) * 12);
}
.px-frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--fp) * -1) calc(var(--fp) * -1) calc(var(--fp) * -3);
  border: var(--fp) solid var(--ink);
  border-bottom-width: calc(var(--fp) * 3);
  background:
    linear-gradient(var(--ink) 0 0) left top / var(--fp) var(--fp) no-repeat padding-box,
    linear-gradient(var(--ink) 0 0) right top / var(--fp) var(--fp) no-repeat padding-box,
    var(--pbg);
  box-shadow: inset 0 calc(var(--fp) * -2) 0 var(--pshade);
  pointer-events: none;
  clip-path: polygon(
    calc(var(--fp) * 2) 0, calc(100% - var(--fp) * 2) 0, calc(100% - var(--fp) * 2) var(--fp), calc(100% - var(--fp)) var(--fp),
    calc(100% - var(--fp)) calc(var(--fp) * 2), 100% calc(var(--fp) * 2),
    100% calc(100% - var(--fp) * 2), calc(100% - var(--fp)) calc(100% - var(--fp) * 2), calc(100% - var(--fp)) calc(100% - var(--fp)),
    calc(100% - var(--fp) * 2) calc(100% - var(--fp)), calc(100% - var(--fp) * 2) 100%,
    calc(var(--fp) * 2) 100%, calc(var(--fp) * 2) calc(100% - var(--fp)), var(--fp) calc(100% - var(--fp)),
    var(--fp) calc(100% - var(--fp) * 2), 0 calc(100% - var(--fp) * 2),
    0 calc(var(--fp) * 2), var(--fp) calc(var(--fp) * 2), var(--fp) var(--fp), calc(var(--fp) * 2) var(--fp));
}
.px-frame.is-dark { --pbg: var(--night); --pshade: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- plates and buttons */
/* A plate: 1 fp ink frame, a 1 fp ink drop straight down, 1 fp stepped corners (the clip
   runs one fine pixel past the box so it keeps the drop, notched too). */
.px-plate,
.px-btn,
.px-badge,
.px-key {
  --drop: var(--fp);
  clip-path: polygon(var(--fp) 0, calc(100% - var(--fp)) 0, calc(100% - var(--fp)) var(--fp), 100% var(--fp),
    100% calc(100% + var(--drop) - var(--fp)), calc(100% - var(--fp)) calc(100% + var(--drop) - var(--fp)),
    calc(100% - var(--fp)) calc(100% + var(--drop)), var(--fp) calc(100% + var(--drop)),
    var(--fp) calc(100% + var(--drop) - var(--fp)), 0 calc(100% + var(--drop) - var(--fp)), 0 var(--fp), var(--fp) var(--fp));
}
.px-plate {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--fp) * 3);
  min-height: calc(var(--fp) * 14);
  padding: var(--fp) calc(var(--fp) * 5) 0;
  border: var(--fp) solid var(--ink);
  background: var(--plate, var(--paper));
  color: var(--ink);
  box-shadow: 0 var(--drop) 0 var(--ink);
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.px-btn {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--fp) * 4);
  min-height: calc(var(--fp) * 24);
  margin: 0;
  padding: var(--fp) calc(var(--fp) * 8) 0;
  border: var(--fp) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 var(--drop) 0 var(--ink), inset 0 calc(var(--fp) * -1) 0 var(--cloud-shade);
  font-family: var(--font-pixel);
  font-size: var(--t15);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  transform: none;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .px-btn:hover { background: var(--gold-hi); }
}
/* the pop: the current item rises a fine pixel on a 2 fp drop, in gold */
.px-btn.is-current,
.px-btn:focus-visible {
  --drop: calc(var(--fp) * 2);
  outline: none;
  background: var(--gold);
  box-shadow: 0 var(--drop) 0 var(--ink), inset 0 calc(var(--fp) * -1) 0 var(--gold-deep);
  transform: translateY(calc(var(--fp) * -1));
}
/* pressed: the drop is gone and the plate sits a fine pixel lower */
.px-btn:active {
  --drop: var(--fp);
  box-shadow: inset 0 calc(var(--fp) * -1) 0 var(--cloud-shade);
  transform: translateY(var(--fp));
}
.px-btn[disabled], .px-btn:disabled {
  --drop: var(--fp);
  background: var(--cloud);
  color: var(--stone);
  box-shadow: 0 var(--drop) 0 var(--ink);
  transform: none;
  cursor: default;
}
/* the one Logo Red action per view */
.px-btn.is-primary {
  background: var(--red);
  color: var(--paper);
  text-shadow: 0 var(--fp) 0 var(--red-deep);
  box-shadow: 0 var(--drop) 0 var(--ink), inset 0 calc(var(--fp) * -1) 0 var(--red-deep), inset 0 var(--fp) 0 var(--red-hi);
}
@media (hover: hover) {
  .px-btn.is-primary:hover { background: var(--red-hi); }
}
.px-btn.is-primary.is-current,
.px-btn.is-primary:focus-visible {
  background: var(--red);
  color: var(--gold-hi);
  box-shadow: 0 var(--drop) 0 var(--ink), inset 0 0 0 var(--fp) var(--gold), inset 0 calc(var(--fp) * -2) 0 var(--red-deep);
}
.px-btn.is-primary:active { box-shadow: inset 0 calc(var(--fp) * -1) 0 var(--red-deep); }
.px-btn.is-primary:disabled { background: var(--plum); color: var(--stone); text-shadow: none; box-shadow: 0 var(--drop) 0 var(--ink); }
/* a finger gets 44 CSS px, whatever the art pixel is */
@media (pointer: coarse), (max-width: 700px), (max-height: 540px) {
  .px-btn { min-height: max(44px, calc(var(--fp) * 24)); }
}

/* the game's X account and the $SUPER buy button (js/links.js socialLinks) */
.px-btn.is-x { background: #0f1419; color: #ffffff; box-shadow: 0 var(--drop) 0 var(--ink), inset 0 calc(var(--fp) * -1) 0 #000000; }
.px-btn.is-buy { background: var(--gold); color: var(--ink); box-shadow: 0 var(--drop) 0 var(--ink), inset 0 calc(var(--fp) * -1) 0 var(--gold-deep), inset 0 var(--fp) 0 var(--gold-hi); }
@media (hover: hover) {
  .px-btn.is-x:hover { background: #2a3138; }
  .px-btn.is-buy:hover { background: var(--gold-hi); }
}
.px-btn.is-x .x-logo { display: block; flex: none; width: .82em; height: .82em; margin-top: -0.12em; fill: currentColor; }
.px-btn.is-buy .buy-coin { display: block; flex: none; width: calc(var(--fp) * 8); height: calc(var(--fp) * 8); margin-top: calc(var(--fp) * -1); }
.px-btn.is-x, .px-btn.is-buy { text-decoration: none; }

/* a small plate: gold for "this one", or the hero's own colour (--hero) */
.px-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--fp) * 2);
  min-height: calc(var(--fp) * 12);
  padding: var(--fp) calc(var(--fp) * 4) 0;
  border: var(--fp) solid var(--ink);
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 var(--drop) 0 var(--ink);
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.px-badge.is-hero { background: var(--hero, var(--p2)); color: var(--paper); text-shadow: 0 var(--fp) 0 var(--ink); }
.px-badge.is-paper { background: var(--paper); }
.px-badge.is-p1 { background: var(--p1); color: var(--paper); text-shadow: 0 var(--fp) 0 var(--ink); }
.px-badge.is-p2 { background: var(--p2); color: var(--paper); text-shadow: 0 var(--fp) 0 var(--ink); }
.px-badge.is-cpu { background: var(--slate); color: var(--paper); text-shadow: 0 var(--fp) 0 var(--ink); }

/* ---------------------------------------------------------------- tabs */
/* a plate with notched top corners; the open one is the panel's colour and covers the
   panel's top edge, so it joins the window under it */
.px-tabs { display: flex; gap: var(--fp); flex-wrap: wrap; align-items: flex-end; }
.px-tab {
  appearance: none;
  position: relative;
  margin: 0;
  padding: calc(var(--fp) * 3) calc(var(--fp) * 6) calc(var(--fp) * 2);
  border: var(--fp) solid var(--ink);
  border-bottom-width: 0;
  background: var(--cloud-shade);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: var(--t15);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(var(--fp) 0, calc(100% - var(--fp)) 0, calc(100% - var(--fp)) var(--fp), 100% var(--fp),
    100% 100%, 0 100%, 0 var(--fp), var(--fp) var(--fp));
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .px-tab:hover { background: var(--gold-hi); }
}
.px-tab[aria-selected="true"] {
  z-index: 1;
  margin-bottom: calc(var(--fp) * -1);
  padding-bottom: calc(var(--fp) * 3);
  background: var(--cloud);
}
.px-tab:focus-visible { outline: none; background: var(--gold); }
.px-tab.is-focus { background: var(--gold); }

/* ---------------------------------------------------------------- rows (label + control) */
.px-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--fp) * 8);
  min-height: calc(var(--fp) * 24);
  padding: calc(var(--fp) * 2) calc(var(--fp) * 4);
  border-bottom: var(--fp) dashed var(--cloud-shade);
}
.px-row.is-focus, .px-row:focus-within { background: var(--gold-hi); }

/* a key cap: the key's name on a raised Paper cap with a 2 fp Stone bottom */
.px-key {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--fp) * 28);
  height: calc(var(--fp) * 20);
  padding: 0 calc(var(--fp) * 4);
  border: var(--fp) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 var(--drop) 0 var(--ink), inset 0 calc(var(--fp) * -2) 0 var(--stone);
  cursor: pointer;
}
.px-key.is-listening { background: var(--gold); animation: px-blink 0.5s steps(1) infinite; }
@keyframes px-blink { 50% { background: var(--paper); } }

/* on / off */
.px-toggle {
  appearance: none;
  display: inline-flex;
  border: var(--fp) solid var(--ink);
  background: var(--night);
  padding: 0;
  cursor: pointer;
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1;
  box-shadow: 0 var(--fp) 0 var(--ink);
}
.px-toggle > span { padding: calc(var(--fp) * 4) calc(var(--fp) * 6) calc(var(--fp) * 3); color: var(--stone); }
.px-toggle[aria-checked="true"] > span:first-child,
.px-toggle[aria-checked="false"] > span:last-child { background: var(--gold); color: var(--ink); box-shadow: inset 0 calc(var(--fp) * -1) 0 var(--gold-deep); }

/* a stepped slider: N blocks, the filled ones gold */
.px-slider { display: inline-flex; gap: var(--fp); align-items: center; }
.px-slider > i {
  display: block;
  width: calc(var(--fp) * 8);
  height: calc(var(--fp) * 12);
  background: var(--cloud-shade);
  border: var(--fp) solid var(--ink);
}
.px-slider > i.on { background: var(--gold); box-shadow: inset 0 calc(var(--fp) * -2) 0 var(--gold-deep), inset 0 var(--fp) 0 var(--gold-hi); }

/* ---------------------------------------------------------------- sprites */
/* a box for a pixel sprite: js/screens/select.js pixelFit() gives the <img data-px> a whole
   number of device pixels per art pixel, as big as fits; it stands on the box's floor */
.px-fit { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.px-fit > img {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.px-fit.is-middle > img { top: 0; bottom: auto; }

/* a hero's panel: their colour (--hero) with a crisp diagonal weave, an ink frame and a
   floor to stand on; the sprite goes in a .px-fit inside */
.px-hero {
  position: relative;
  overflow: hidden;
  border: var(--fp) solid var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' fill-opacity='.13' d='M0 0h5v1h-5zM15 0h1v1h-1zM0 1h4v1h-4zM14 1h2v1h-2zM0 2h3v1h-3zM13 2h3v1h-3zM0 3h2v1h-2zM12 3h4v1h-4zM0 4h1v1h-1zM11 4h5v1h-5zM10 5h6v1h-6zM9 6h6v1h-6zM8 7h6v1h-6zM7 8h6v1h-6zM6 9h6v1h-6zM5 10h6v1h-6zM4 11h6v1h-6zM3 12h6v1h-6zM2 13h6v1h-6zM1 14h6v1h-6zM0 15h6v1h-6z'/%3E%3C/svg%3E") 0 0 / calc(var(--fp) * 16) calc(var(--fp) * 16),
    var(--hero, var(--sky2));
}
.px-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--floor, calc(var(--fp) * 14));
  border-top: var(--fp) solid var(--ink);
  background: color-mix(in srgb, var(--hero, var(--sky2)) 58%, var(--ink));
  box-shadow: inset 0 var(--fp) 0 color-mix(in srgb, var(--hero, var(--sky2)) 78%, var(--paper));
}
.px-hero > .px-fit { inset: calc(var(--fp) * 6) calc(var(--fp) * 4) calc(var(--floor, calc(var(--fp) * 14)) - var(--fp) * 5); overflow: visible; }
/* the one that won, or was picked: a gold line inside the frame */
.px-hero.is-won { box-shadow: inset 0 0 0 var(--fp) var(--gold); }

/* the boot card (a failed boot, no JavaScript): a plain window too */
.boot-card {
  border: var(--fp) solid var(--ink);
  border-radius: 0;
  background: var(--cloud);
  color: var(--ink);
  box-shadow: 0 calc(var(--fp) * 2) 0 var(--ink);
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: var(--t1);
}
.boot-card small { font-size: var(--t1); color: var(--slate); }

@media (prefers-reduced-motion: reduce) {
  .px-key.is-listening { animation: none; }
}