/* The menu screens, 16-bit edition (loaded after the GROKFIGHT sheets and css/pixel.css):
   the title's DOM layer (menu, tools, the how-to and poll sheets), the VS pips, loading and
   results. DESIGN.md is the contract; the kit (panels, plates, badges) is css/pixel.css.
   The title and loading screens sit on their canvas's own grid: --s is the CSS px per art
   pixel the scene uses (set by the screen's script), so their type and borders line up. */

.pt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* the sky, as hard bands (the one gradient DESIGN.md allows); band edges land on whole
   fine pixels where round() is known */
:root {
  --sky-bands: linear-gradient(var(--sky1) 0 16%, var(--sky2) 16% 38%, var(--sky3) 38% 66%, var(--sky4) 66% 84%, var(--sky5) 84%);
}
@supports (width: round(10.5px, 2px)) {
  :root {
    --sky-bands: linear-gradient(var(--sky1) 0 round(16vh, 2px), var(--sky2) round(16vh, 2px) round(38vh, 2px),
      var(--sky3) round(38vh, 2px) round(66vh, 2px), var(--sky4) round(66vh, 2px) round(84vh, 2px), var(--sky5) round(84vh, 2px));
  }
}

/* ============================================================== title */
body[data-screen="title"] { background: var(--sky3); }
.pt-screen {
  --s: 4px;
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--sky3);
  font-family: var(--font-pixel);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pt-canvas { position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; }
.pt-menu { position: absolute; inset: 0; pointer-events: none; }
.pt-item {
  position: absolute;
  pointer-events: auto;
  appearance: none;
  margin: 0;
  padding: 0 calc(var(--s) * 3) 0 calc(var(--s) * 1);
  border: 0;
  background: none;
  font-family: var(--font-pixel);
  /* 8 art px capitals on an 11 px line: Jersey's capitals are 10/18.667 of its size */
  font-size: calc(var(--s) * 18.667 * 0.8 * var(--fk, 1));
  font-weight: 400;
  line-height: 1;
  color: var(--paper);
  white-space: nowrap;
  cursor: pointer;
  /* a fine-pixel ink outline and a drop, like the canvas's labels */
  --o: calc(var(--s) / 2);
  text-shadow: var(--o) 0 0 var(--ink), calc(var(--o) * -1) 0 0 var(--ink), 0 var(--o) 0 var(--ink), 0 calc(var(--o) * -1) 0 var(--ink), var(--o) var(--o) 0 var(--ink), calc(var(--o) * -1) var(--o) 0 var(--ink), var(--o) calc(var(--o) * -1) 0 var(--ink), calc(var(--o) * -1) calc(var(--o) * -1) 0 var(--ink), 0 calc(var(--o) * 3) 0 var(--ink);
}
.pt-item.is-current,
.pt-item:hover,
.pt-item:focus-visible { color: var(--gold); outline: none; }
/* the chosen line's hint: a Night plate on the grass */
.pt-hint {
  position: absolute;
  left: calc(var(--ox) + var(--cw) / 2);
  top: calc(var(--oy) + var(--ch) - var(--s) * 17);
  transform: translateX(-50%);
  margin: 0;
  padding: calc(var(--s) * 1.5) calc(var(--s) * 4) calc(var(--s) * 1);
  border: calc(var(--s) / 2) solid var(--ink);
  background: var(--night);
  color: var(--paper);
  box-shadow: inset 0 calc(var(--s) / 2) 0 var(--plum);
  font-family: var(--font-pixel);
  font-size: max(18.667px, calc(var(--s) * 18.667 * 0.5));
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  clip-path: polygon(calc(var(--s) / 2) 0, calc(100% - var(--s) / 2) 0, calc(100% - var(--s) / 2) calc(var(--s) / 2), 100% calc(var(--s) / 2),
    100% calc(100% - var(--s) / 2), calc(100% - var(--s) / 2) calc(100% - var(--s) / 2), calc(100% - var(--s) / 2) 100%,
    calc(var(--s) / 2) 100%, calc(var(--s) / 2) calc(100% - var(--s) / 2), 0 calc(100% - var(--s) / 2), 0 calc(var(--s) / 2), calc(var(--s) / 2) calc(var(--s) / 2));
}
.pt-hint:empty { display: none; }

/* THE POLL, HOW TO PLAY, SOUND: plates (css/pixel.css .px-btn) in the top-right corner */
.pt-tools {
  position: absolute;
  top: calc(var(--oy) + var(--s) * 3);
  right: calc(100% - var(--ox) - var(--cw) + var(--s) * 3);
  display: flex;
  gap: calc(var(--fp) * 4);
}
.pt-tool.px-btn { min-height: calc(var(--fp) * 20); padding-inline: calc(var(--fp) * 6); font-size: var(--t1); }
/* the X account and Buy $SUPER: the top-left corner (upright phones: under the logo) */
.pt-social {
  position: absolute;
  top: calc(var(--oy) + var(--s) * 3);
  left: calc(var(--ox) + var(--s) * 3);
  display: flex;
  gap: calc(var(--fp) * 4);
}
.pt-social .px-btn { text-transform: none; }
.pt-social .px-btn.is-buy { text-transform: uppercase; }
.pt-screen[data-portrait="1"] .pt-social { top: auto; bottom: calc(100% - var(--oy) - var(--ch) + var(--s) * 34 + 52px); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.pt-tool.px-btn[aria-pressed="true"] { background: var(--cloud-shade); color: var(--slate); }
@media (min-width: 1100px) and (min-height: 620px) {
  .pt-tool.px-btn { font-size: var(--t15); }
}
.pt-screen[data-portrait="1"] .pt-hint { top: calc(var(--oy) + var(--ch) - var(--s) * 20); font-size: max(18.667px, calc(var(--s) * 18.667 * 0.7)); }
.pt-screen[data-portrait="1"] .pt-tools {
  top: auto;
  bottom: calc(100% - var(--oy) - var(--ch) + var(--s) * 34);
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
.pt-screen[data-portrait="1"] .pt-tool.px-btn { white-space: nowrap; padding-inline: calc(var(--fp) * 4); }

/* ---------------------------------------------------------------- sheets */
/* how to play, the poll: a window over an ink wash (no blur) */
.pt-backdrop {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(35 29 51 / .72);
}
.pt-backdrop[hidden] { display: none; }
.pt-sheet {
  width: min(800px, 100%);
  max-height: min(90dvh, 920px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: calc(var(--fp) * 12) calc(var(--fp) * 12) 0;
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1.25;
  color: var(--ink);
  scrollbar-color: var(--slate) var(--cloud);
}
.pt-sheet-title {
  margin: 0 0 calc(var(--fp) * 6);
  color: var(--ink);
  text-shadow: none;
  font-size: var(--t2);
}
.pt-sheet-lead { max-width: 64ch; margin: 0 0 calc(var(--fp) * 6); color: var(--plum); }
.pt-sheet-sub {
  margin: calc(var(--fp) * 10) 0 calc(var(--fp) * 5);
  padding-bottom: calc(var(--fp) * 2);
  border-bottom: var(--fp) solid var(--cloud-shade);
  font-family: var(--font-pixel);
  font-size: var(--t15);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}
.pt-list, .pt-ups { margin: 0; padding: 0; list-style: none; }
.pt-list li { position: relative; margin: calc(var(--fp) * 3) 0; padding-left: calc(var(--fp) * 8); }
.pt-list li::before {
  content: "";
  position: absolute;
  left: var(--fp);
  top: .45em;
  width: calc(var(--fp) * 3);
  height: calc(var(--fp) * 3);
  background: var(--gold);
  box-shadow: 0 0 0 var(--fp) var(--ink);
}
.pt-list b { color: var(--ink); }
.pt-moves { columns: 2 280px; column-gap: calc(var(--fp) * 16); }
.pt-moves li { break-inside: avoid; }
.pt-note { margin: calc(var(--fp) * 5) 0; color: var(--plum); }
/* a key cap in running text */
.pt-sheet kbd,
.fight-pause .pause-hint kbd {
  display: inline-block;
  min-width: 1.35em;
  margin: 0 1px var(--fp);
  padding: var(--fp) calc(var(--fp) * 2) 0;
  border: var(--fp) solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 var(--fp) 0 var(--ink), inset 0 calc(var(--fp) * -1) 0 var(--stone);
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  vertical-align: baseline;
}
.pt-scroll { overflow-x: auto; }
.pt-keys { border-collapse: collapse; font-size: var(--t1); }
.pt-keys th, .pt-keys td { padding: calc(var(--fp) * 3) calc(var(--fp) * 6) calc(var(--fp) * 3) 0; border-bottom: var(--fp) dashed var(--cloud-shade); text-align: left; white-space: nowrap; }
.pt-keys tbody th { color: var(--plum); }
.pt-keys thead th { color: var(--slate); text-transform: uppercase; }
.pt-ups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: calc(var(--fp) * 6) calc(var(--fp) * 10); }
.pt-ups li { display: grid; grid-template-columns: calc(var(--fp) * 16) 1fr; column-gap: calc(var(--fp) * 4); align-items: start; line-height: 1.1; }
.pt-prop { grid-row: span 3; width: calc(var(--fp) * 16); height: calc(var(--fp) * 16); }
.pt-ups b { text-transform: uppercase; }
.pt-repo { grid-column: 2; color: var(--slate); }
.pt-desc { grid-column: 2; color: var(--plum); }
.pt-sheet-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--fp) * 6);
  margin: calc(var(--fp) * 8) calc(var(--fp) * -12) 0;
  padding: calc(var(--fp) * 6) calc(var(--fp) * 12) calc(var(--fp) * 8);
  border-top: var(--fp) solid var(--cloud-shade);
  background: var(--cloud);
}
.pt-sheet-actions .px-btn { text-decoration: none; }

/* ============================================================== the Truth Social post */
.pt-sheet-poll { width: min(620px, 100%); }
.tp-card {
  margin: calc(var(--fp) * 6) 0 calc(var(--fp) * 2);
  padding: calc(var(--fp) * 8);
  border: var(--fp) solid var(--ink);
  background: var(--paper);
  box-shadow: 0 calc(var(--fp) * 2) 0 var(--ink);
  color: var(--ink);
  font-family: var(--font-pixel);
  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)) calc(100% + var(--fp) * 2),
    var(--fp) calc(100% + var(--fp) * 2), var(--fp) calc(100% + var(--fp)), 0 calc(100% + var(--fp)), 0 var(--fp), var(--fp) var(--fp));
}
.tp-head { display: flex; align-items: center; gap: calc(var(--fp) * 6); }
.tp-avatar {
  width: calc(var(--fp) * 20);
  height: calc(var(--fp) * 20);
  flex: none;
  border: var(--fp) solid var(--ink);
  background:
    linear-gradient(#2b3a8f 0 0) 0 0 / 45% 55% no-repeat,
    repeating-linear-gradient(#d8232a 0 calc(var(--fp) * 2), #ffffff calc(var(--fp) * 2) calc(var(--fp) * 4));
  image-rendering: pixelated;
}
.tp-who { line-height: 1.15; }
.tp-who b { font-size: var(--t1); font-weight: 400; }
.tp-who span { color: var(--slate); font-size: var(--t1); }
.tp-badge {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  vertical-align: -2px;
  background: #e0243a;
  clip-path: polygon(50% 0, 62% 12%, 80% 8%, 84% 26%, 100% 36%, 90% 52%, 100% 68%, 82% 76%, 78% 94%, 60% 88%, 50% 100%, 40% 88%, 22% 94%, 18% 76%, 0 68%, 10% 52%, 0 36%, 16% 26%, 20% 8%, 38% 12%);
}
.tp-text { margin: calc(var(--fp) * 6) 0; font-size: var(--t15); line-height: 1.1; }
.tp-poll { display: grid; gap: calc(var(--fp) * 3); }
.tp-opt {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: calc(var(--fp) * 17);
  padding: var(--fp) calc(var(--fp) * 6) 0;
  background: #1e1b38;
  color: var(--paper);
  font-size: var(--t1);
  overflow: hidden;
}
.tp-opt-fill { position: absolute; inset: 0 auto 0 0; width: var(--pct); background: #5a4df0; }
.tp-opt-label, .tp-opt-pct { position: relative; }
.tp-opt.is-win .tp-opt-label::after { content: " \2713"; }
.tp-meta { margin: calc(var(--fp) * 5) 0 calc(var(--fp) * 4); color: var(--slate); font-size: var(--t1); }
.tp-foot { display: flex; flex-wrap: wrap; gap: calc(var(--fp) * 3) calc(var(--fp) * 9); align-items: baseline; font-size: var(--t1); color: var(--slate); }
.tp-foot b { color: var(--ink); }
.tp-foot time { margin-left: auto; }

/* ============================================================== versus */
body[data-screen="vs"] { background: var(--ink); }
.px-vs { position: fixed; inset: 0; overflow: hidden; background: var(--ink); cursor: pointer; }
.px-vs-canvas { position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; }
/* arcade progress: one pip per fight on a Night plate at the bottom */
.px-vs-pips {
  position: absolute;
  left: 50%;
  bottom: calc(var(--fp) * 6);
  transform: translateX(-50%);
  font-family: var(--font-pixel);
  font-size: var(--t1);
}
.px-vs-pips .gf-vs-pips {
  display: flex;
  gap: calc(var(--fp) * 2);
  padding: calc(var(--fp) * 3);
  border: var(--fp) solid var(--ink);
  border-radius: 0;
  background: var(--night);
  box-shadow: 0 var(--fp) 0 var(--ink), inset 0 var(--fp) 0 var(--plum);
}
.px-vs-pips i {
  display: grid;
  place-items: center;
  width: calc(var(--fp) * 13);
  height: calc(var(--fp) * 13);
  padding-top: var(--fp);
  border: var(--fp) solid var(--ink);
  border-radius: 0;
  background: var(--cloud);
  color: var(--ink);
  font-style: normal;
  line-height: 1;
  box-shadow: none;
  animation: none;
}
.px-vs-pips i.done { background: var(--grass2); color: var(--paper); }
.px-vs-pips i.now { background: var(--gold); color: var(--ink); box-shadow: inset 0 calc(var(--fp) * -1) 0 var(--gold-deep); }
.px-vs-pips i.boss { background: var(--plum); color: var(--gold); }
.px-vs-pips i.boss.now { background: var(--gold); color: var(--red-deep); }

/* ============================================================== loading (the first paint too) */
body[data-screen="boot"],
body[data-screen="loading"] { background: var(--sky3); }
.px-loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(var(--sky1) 0 18%, var(--sky2) 18% 42%, var(--sky3) 42% 70%, var(--sky4) 70% 86%, var(--grass2) 86% 88%, var(--grass3) 88%);
  font-family: var(--font-pixel);
  color: var(--ink);
  cursor: pointer;
}
.px-loading .gf-loading-main { display: grid; justify-items: center; gap: calc(var(--fp) * 8); width: min(90vw, 720px); }
.px-logo-h { margin: 0; line-height: 0; }
.px-logo {
  display: block;
  width: min(86vw, 618px);
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.px-loading .gf-load { position: relative; width: min(80vw, calc(var(--fp) * 220)); }
/* the bar: the HUD's life bar, filling up */
/* after the user's mockup: a navy frame, a blue track with light chevrons, a yellow fill
   with light diagonal stripes (hard-edged SVG patterns, not gradients) */
.px-loading .gf-load-bar {
  --navy: #15205a;
  height: calc(var(--fp) * 14);
  padding: var(--fp);
  border: calc(var(--fp) * 2) solid var(--navy);
  border-radius: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%239fd0ff' fill-opacity='.55' d='M4 0h3v1H4zM5 1h3v1H5zM6 2h3v1H6zM7 3h3v1H7zM8 4h3v1H8zM9 5h3v1H9zM9 6h3v1H9zM8 7h3v1H8zM7 8h3v1H7zM6 9h3v1H6zM5 10h3v1H5zM4 11h3v1H4z'/%3E%3C/svg%3E") 0 0 / calc(var(--fp) * 12) 100% repeat-x,
    var(--p2);
  box-shadow: 0 calc(var(--fp) * 2) 0 var(--ink), inset 0 var(--fp) 0 #1b3a8a;
  overflow: hidden;
}
.px-loading .gf-load-fill {
  display: block;
  height: 100%;
  width: calc(var(--p) * 100%);
  border-radius: 0;
  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='%23fff3a6' d='M4 0h5v1H4zM3 1h5v1H3zM2 2h5v1H2zM1 3h5v1H1zM0 4h5v1H0zM15 4h1v1h-1zM14 5h2v1h-2zM0 5h4v1H0zM13 6h3v1h-3zM0 6h3v1H0zM12 7h4v1h-4zM0 7h2v1H0zM11 8h5v1h-5zM0 8h1v1H0zM10 9h5v1h-5zM9 10h5v1H9zM8 11h5v1H8zM7 12h5v1H7zM6 13h5v1H6zM5 14h5v1H5zM4 15h5v1H4z'/%3E%3C/svg%3E") 0 0 / calc(var(--fp) * 16) calc(var(--fp) * 16),
    var(--gold);
  box-shadow: inset 0 calc(var(--fp) * -2) 0 var(--gold-deep), inset calc(var(--fp) * -1) 0 0 #15205a;
}
.px-loading .gf-load-rider {
  position: absolute;
  top: calc(var(--fp) * -17);
  left: calc(var(--p) * 100% - var(--fp) * 8);
  width: calc(var(--fp) * 16);
  height: calc(var(--fp) * 16);
  image-rendering: pixelated;
}
.px-loading .gf-load-note {
  display: flex;
  align-items: center;
  gap: calc(var(--fp) * 6);
  margin: 0;
  font-family: var(--font-pixel);
  font-size: var(--t15);
  line-height: 1;
  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);
}
/* PRESS TO START: the one red action, blinking like an arcade attract screen */
.px-loading .gf-start {
  --drop: calc(var(--fp) * 2);
  appearance: none;
  margin-top: calc(var(--fp) * 2);
  padding: calc(var(--fp) * 6) calc(var(--fp) * 14) calc(var(--fp) * 5);
  border: var(--fp) solid var(--ink);
  border-radius: 0;
  background: var(--red);
  color: var(--paper);
  font-family: var(--font-pixel);
  font-size: var(--t2);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 var(--fp) 0 var(--red-deep);
  box-shadow: 0 var(--drop) 0 var(--ink), inset 0 calc(var(--fp) * -2) 0 var(--red-deep), inset 0 var(--fp) 0 var(--red-hi);
  cursor: pointer;
  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));
  animation: px-start-blink 1s steps(1) infinite;
}
.px-loading .gf-load-note::before, .px-loading .gf-load-note::after {
  content: "";
  width: calc(var(--fp) * 22);
  height: var(--fp);
  background: var(--paper);
  box-shadow: 0 var(--fp) 0 var(--ink), 0 calc(var(--fp) * -1) 0 var(--ink);
}
/* the mockup's button: a white line inside the red, a navy frame, an arrow */
.px-loading .gf-start {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--fp) * 6);
  border: calc(var(--fp) * 2) solid #15205a;
  box-shadow: 0 var(--drop) 0 var(--ink), inset 0 0 0 var(--fp) var(--paper), inset 0 calc(var(--fp) * -3) 0 var(--red-deep), inset 0 calc(var(--fp) * 2) 0 var(--red-hi);
}
.px-loading .gf-start::after {
  content: "";
  width: calc(var(--fp) * 5);
  height: calc(var(--fp) * 9);
  margin-top: calc(var(--fp) * -1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h1v9H0zM1 1h1v7H1zM2 2h1v5H2zM3 3h1v3H3zM4 4h1v1H4z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}
.px-loading .gf-start:focus-visible { outline: none; color: var(--gold-hi); }
@keyframes px-start-blink { 50% { background: var(--red-hi); } }
.px-loading .gf-social { position: absolute; z-index: 2; top: 12px; left: 12px; display: flex; gap: calc(var(--fp) * 4); }
.px-loading .gf-social .px-btn { min-height: calc(var(--fp) * 18); padding-inline: calc(var(--fp) * 5); font-size: var(--t1); text-transform: none; }
.px-loading .gf-social .px-btn.is-buy { text-transform: uppercase; }
.px-loading .gf-loading-foot {
  position: absolute;
  bottom: calc(var(--fp) * 8);
  left: 16px;
  right: 16px;
  margin: 0;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1.1;
  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);
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) { .px-loading .gf-start { animation: none; } }
/* with the scene painted: the scene has the logo and the cast; the bar and the start button
   move down onto the grass */
.px-load-scene { position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; }
.px-loading.has-scene { background: var(--sky3); }
.px-loading.has-scene .px-logo-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.px-loading.has-scene { padding: 16px 16px max(10px, env(safe-area-inset-bottom)); }
.px-loading.has-scene .gf-load { padding-top: 0; }
.px-loading.has-scene .gf-loading-main { position: relative; align-self: end; margin-bottom: max(46px, 7vh); gap: calc(var(--fp) * 6); }
.px-loading.has-scene .gf-load-rider { display: none; }
.px-loading.has-scene .gf-loading-foot { z-index: 1; }
/* a phone on its side: a tighter block, low on the grass, clear of the hero on the hill */
@media (max-height: 540px) and (orientation: landscape) {
  .px-loading.has-scene .gf-loading-main { margin-bottom: 30px; gap: 4px; }
  .px-loading .gf-load-bar { height: 16px; }
  .px-loading .gf-load-note { font-size: var(--t1); }
  .px-loading .gf-start { margin-top: 2px; padding: 6px 22px 4px; font-size: var(--t15); }
}

/* ============================================================== results */
/* The winner on their own colour, big and on whole pixels; the name, the rounds and the
   numbers beside them; the next move along the bottom, the red one on the right. */
body[data-screen="results"] { background: var(--sky1); }
.gf-results.pr-screen {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: max(calc(var(--fp) * 10), env(safe-area-inset-top)) max(calc(var(--fp) * 10), env(safe-area-inset-right)) max(calc(var(--fp) * 10), env(safe-area-inset-bottom)) max(calc(var(--fp) * 10), env(safe-area-inset-left));
  background: var(--sky-bands);
  background-color: var(--sky3);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-pixel);
  overflow-x: clip;
}
.pr-main {
  display: grid;
  justify-items: center;
  gap: calc(var(--fp) * 8);
  width: min(100%, 1120px);
}
/* CONTINUE? / YOU BEAT THE ARCADE: a call over the sky */
.pr-head {
  margin: 0;
  font-size: var(--t3);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--gold);
  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) * 3) 0 var(--ink);
}
.pr-head.is-continue { color: var(--red); animation: pr-blink 1.1s steps(1) infinite; }
@keyframes pr-blink { 60% { color: var(--red-hi); } }

.pr-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "art info" "art actions";
  gap: calc(var(--fp) * 10) calc(var(--fp) * 14);
  width: 100%;
  padding: calc(var(--fp) * 10);
}

/* the winner's panel (css/pixel.css .px-hero): their colour, a crisp weave, a floor */
.pr-art {
  --floor: calc(var(--fp) * 18);
  grid-area: art;
  min-height: calc(var(--fp) * 190);
}
.pr-side { position: absolute; top: calc(var(--fp) * 5); left: calc(var(--fp) * 5); z-index: 1; }

.pr-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--fp) * 6);
  min-width: 0;
  padding-top: calc(var(--fp) * 2);
}
.pr-kicker { margin: 0; color: var(--slate); font-size: var(--t1); line-height: 1; text-transform: uppercase; }
.pr-name {
  margin: calc(var(--fp) * -2) 0 0;
  max-width: 100%;
  font-size: var(--t3);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.pr-tags { display: flex; flex-wrap: wrap; gap: calc(var(--fp) * 4); margin: 0; }
.pr-say { max-width: 52ch; margin: 0; color: var(--plum); font-size: var(--t1); line-height: 1.2; }

/* arcade: a gold star for every fight cleared */
.pr-road { display: flex; flex-wrap: wrap; gap: calc(var(--fp) * 2); }
.pr-road-star { display: block; line-height: 0; }
.pr-star { display: block; width: calc(var(--fp) * 13); height: calc(var(--fp) * 12); }
.pr-road .pr-star { width: calc(var(--fp) * 13 * 2); height: calc(var(--fp) * 12 * 2); }
.pr-star-e { fill: var(--ink); }
.pr-star-t, .pr-star-b { fill: var(--plum); }
.pr-road-star.is-won .pr-star-t, .pr-perfect .pr-star-t { fill: var(--gold-hi); }
.pr-road-star.is-won .pr-star-b, .pr-perfect .pr-star-b { fill: var(--gold); }

/* the rounds: R1 [1P] K.O. */
.pr-rounds { display: flex; flex-wrap: wrap; gap: calc(var(--fp) * 4) calc(var(--fp) * 10); margin: 0; padding: 0; list-style: none; }
.pr-round { display: flex; align-items: center; gap: calc(var(--fp) * 3); font-size: var(--t1); line-height: 1; }
.pr-rn { color: var(--slate); }
.pr-how { color: var(--slate); text-transform: uppercase; }
.pr-perfect { gap: calc(var(--fp) * 2); padding-left: calc(var(--fp) * 2); }
.pr-perfect .pr-star { width: calc(var(--fp) * 13); height: calc(var(--fp) * 12); }

/* the numbers, like a scoreboard */
.pr-nums { display: flex; flex-wrap: wrap; gap: calc(var(--fp) * 4) 0; margin: 0; }
.pr-num { display: grid; gap: var(--fp); padding: 0 calc(var(--fp) * 10) 0 0; margin-right: calc(var(--fp) * 10); border-right: var(--fp) dashed var(--cloud-shade); }
.pr-num:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.pr-num dt { display: flex; align-items: center; gap: calc(var(--fp) * 2); color: var(--slate); font-size: var(--t1); line-height: 1; text-transform: uppercase; }
.pr-num dd { margin: 0; color: var(--ink); font-size: var(--t2); line-height: 1; }
.pr-num dd small { color: var(--slate); font-size: var(--t1); text-transform: uppercase; }
.pr-num .pr-prop { --ring: 1px; --ink: 1px; --drop: 1px; width: calc(var(--fp) * 12); height: calc(var(--fp) * 12); }

/* arcade: who is next */
.pr-next {
  display: flex;
  align-items: center;
  gap: calc(var(--fp) * 8);
  align-self: stretch;
  padding: calc(var(--fp) * 4) calc(var(--fp) * 6) calc(var(--fp) * 4) calc(var(--fp) * 4);
  border: var(--fp) solid var(--ink);
  background: var(--paper);
  box-shadow: 0 var(--fp) 0 var(--ink);
}
.pr-next-face {
  position: relative;
  flex: none;
  width: calc(var(--fp) * 40);
  height: calc(var(--fp) * 40);
  border: var(--fp) solid var(--ink);
  background: var(--hero, var(--sky2));
}
.pr-next-body { display: grid; gap: calc(var(--fp) * 2); min-width: 0; }
.pr-next-body p { margin: 0; line-height: 1; }
.pr-next-label { color: var(--slate); font-size: var(--t1); text-transform: uppercase; }
.pr-next-name { font-size: var(--t15); text-transform: uppercase; }
.pr-next-step { color: var(--plum); font-size: var(--t1); }

/* post the win: a plate, and what happens when you press it */
.pr-share { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--fp) * 3) calc(var(--fp) * 8); margin-top: auto; }
.pr-share-btn.px-btn { min-height: calc(var(--fp) * 20); padding-inline: calc(var(--fp) * 6); font-size: var(--t1); }
.pr-cam { display: block; width: calc(var(--fp) * 10); height: calc(var(--fp) * 7); fill: currentColor; }
.pr-note { margin: 0; color: var(--slate); font-size: var(--t1); line-height: 1.1; }

.pr-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: calc(var(--fp) * 6);
  padding-bottom: var(--fp);
}
.pr-actions .px-btn { min-width: calc(var(--fp) * 56); }
.pr-actions .px-btn.is-primary { min-width: calc(var(--fp) * 80); min-height: calc(var(--fp) * 28); font-size: var(--t2); }

/* a phone on its side: the same two columns, tighter, as tall as the screen; the bio gives way */
@media (max-height: 540px) and (min-width: 600px) {
  .gf-results.pr-screen { place-items: start center; }
  .pr-card { gap: calc(var(--fp) * 6) calc(var(--fp) * 10); padding: calc(var(--fp) * 8); }
  .pr-screen:not([data-state]) .pr-card { min-height: calc(100dvh - var(--fp) * 20 - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  /* (under CONTINUE? or YOU BEAT THE ARCADE: the rest of the screen) */
  .pr-screen[data-state] .pr-card { min-height: calc(100dvh - var(--fp) * 28 - var(--t2) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .pr-art { min-height: 0; }
  .pr-info { gap: calc(var(--fp) * 5); }
  .pr-name { font-size: var(--t2); }
  .pr-say { display: none; }
  .pr-road .pr-star { width: calc(var(--fp) * 13); height: calc(var(--fp) * 12); }
  .pr-next { padding-block: calc(var(--fp) * 2); }
  .pr-head { font-size: var(--t2); }
  .pr-num dd { font-size: var(--t15); }
  .pr-actions .px-btn { min-width: 0; }
  .pr-actions .px-btn.is-primary { min-width: calc(var(--fp) * 72); font-size: var(--t15); }
}

/* phones held upright: one column, the next move pinned to the bottom */
@media (max-width: 599px) {
  .gf-results.pr-screen {
    place-items: start center;
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }
  .pr-main { gap: calc(var(--fp) * 6); }
  .pr-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "art" "info";
    padding: calc(var(--fp) * 8);
  }
  .pr-art { min-height: 0; height: clamp(250px, 38dvh, 420px); }
  .pr-name { font-size: var(--t3); }
  .pr-say { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .pr-actions {
    position: fixed;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--fp) * 5);
    padding: calc(var(--fp) * 6) max(calc(var(--fp) * 8), env(safe-area-inset-right)) max(calc(var(--fp) * 8), env(safe-area-inset-bottom)) max(calc(var(--fp) * 8), env(safe-area-inset-left));
    border-top: var(--fp) solid var(--ink);
    background: var(--night);
    box-shadow: inset 0 var(--fp) 0 var(--plum);
  }
  .pr-actions .px-btn { min-width: 0; min-height: 48px; }
  .pr-actions .px-btn.is-primary { grid-column: 1 / -1; order: -1; min-height: 60px; }
  .pr-actions:has(> .px-btn:nth-child(2):last-child) .px-btn { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-head.is-continue { animation: none; }
}