/* biome-ignore-all lint/style/noDescendingSpecificity: the keys are layered on purpose, a base rule per kit piece and its hover and press after it; reordering by specificity would split each key from its states. */
/* Paco 21 Studio site. Written 2026-10-04 (ancestor df3517feb), restyled 2026-10-05 (ancestor 6b49136b7) on the
   owner's word: "drop the vanta fog background, add a simple background instead. Make the buttons and everything
   have the same style as our slots UI". So the page is a flat navy and wears Ape Wreckage's own kit: its gold and
   navy keys and card frames (games/monkey_express/assets/src/ui.rules.*, nine sliced through border-image, in
   ui/), its stamped Barlow Condensed 900 italic titles (cream, a navy outline, a navy drop), and its palette,
   sampled from the win screens. Still: no gradient anywhere, no coloured stripe down a card's left edge, flat
   fills only.
   Corrected the same day (ancestor 684d82a36), the owner: "the UI u copied is an older version, the current buttons
   are more cartoonish, pull the latest buttons visuals". The engine's ui.rules.* pictures were the port's older kit;
   the live game's menus wear monkey-express/frontend/src/art/buy-calm (bc-*.png, "E3", owner 2026-09-26): flat
   faces, a heavy ink line, a cream edge, one hard cel shadow, round corners. ui/ now holds those, sliced exactly as
   the game's infoPanel.css and buyMenu.css slice them (keys "0 60 fill / 0 .625H", cards "48 fill", wells "40
   fill"), and the titles are the game's: Barlow Condensed 900 upright, cream, a thin ink edge and a hard drop. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow_condensed_400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow_condensed_500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow_condensed_700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow_condensed_900.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

:root {
  --page: #111725;
  --page_2: #0c111c;
  --navy_edge: #121827;
  --navy: #222738;
  --navy_deep: #181c29;
  --maroon: #8b2639;
  --peach: #ffbc7a;
  --gold: #f0ad69;
  --cream: #fbf3e3;
  --cream_dim: #a9b3c3;
  --line: #27314a;
  --font: "Barlow Condensed", "Arial Narrow", sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
/* The wallpaper (2026-10-06, ancestor c6118fc6f), the owner: "add distinctive art to the background, right now its just
   a monochroma". Our slots' own symbols, tone on tone over the flat navy (tools/make_background.py). It lies on the
   body and scrolls with it, so it runs on unbroken from section to section; the darker sections lay a flat shade over
   it instead of a colour of their own. */
body {
  margin: 0;
  background: var(--page) url("media/bg_symbols.webp") 0 0 / 1440px repeat;
  color: var(--cream);
  font: 400 19px / 1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
body.welcome_open {
  overflow: hidden;
}
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--peach);
  outline-offset: 3px;
}
::selection {
  background: var(--maroon);
  color: var(--cream);
}
[hidden] {
  /* biome-ignore lint/complexity/noImportantStyles: hidden must beat every display a component sets */
  display: none !important;
}

.visually_hidden,
.trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  background: var(--cream);
  color: var(--navy_edge);
  padding: 10px 14px;
  font-weight: 700;
}
.skip:focus {
  top: 12px;
}

/* The game's lettering (uiCel.css): cream, a thin ink edge, one hard drop straight down. */
.stamp,
.hero_title,
.sec_title,
.contact_title,
.promo_title,
.free_big,
.soon_name {
  font-family: var(--font);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--cream);
  -webkit-text-stroke: 0.05em var(--navy_edge);
  paint-order: stroke fill;
  text-shadow: 0 0.06em 0 var(--navy_edge);
}

/* ---------- keys: the slot's own buttons ---------- */
/* Keys: the game's bc-btn pictures (320 x 96), their round ends kept whole at any width: .625 of the key's height
   each side, as buyMenu.css sizes them. The face sits above the hard shadow, so the words ride 7% high.
   WHY three layers and not border-image (2026-10-05, ancestor 4aa77ffd3): the owner saw "2 black lines on the sides
   of the text on the yellow button". The art is one flat gold across its slices (sampled); the lines were the
   browser's seams between border-image slices at fractional sizes (the popup's keys are sized by the stage scale).
   So each key is cut into a left cap, a middle and a right cap (ui/key_<skin>_l/_m/_r.webp, cut at x 60 and 260),
   and the middle runs 3 px under each cap, where the caps are solid: there is no edge left to open. */
.btn,
.bar_nav .bar_cta,
.hero_now_tag,
.soon_tag,
.chip span {
  --h: 56px;
  --cap: calc(var(--h) * 0.625);
  --key_l: url("ui/key_ink_l.webp");
  --key_m: url("ui/key_ink_m.webp");
  --key_r: url("ui/key_ink_r.webp");
  background:
    var(--key_l) left center / var(--cap) 100% no-repeat,
    var(--key_r) right center / var(--cap) 100% no-repeat,
    var(--key_m) center / calc(100% - 2 * var(--cap) + 6px) 100% no-repeat;
  border: 0;
}
.btn_solid,
.bar_nav .bar_cta,
.hero_now_tag,
.chip input:checked + span {
  --key_l: url("ui/key_gold_l.webp");
  --key_m: url("ui/key_gold_m.webp");
  --key_r: url("ui/key_gold_r.webp");
}
.soon_tag {
  --key_l: url("ui/key_special_l.webp");
  --key_m: url("ui/key_special_m.webp");
  --key_r: url("ui/key_special_r.webp");
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h);
  padding: 0 calc(var(--cap) + 6px) calc(var(--h) * 0.07);
  font: 900 19px / 1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  color: var(--cream);
  -webkit-text-stroke: 1.2px var(--navy_edge);
  paint-order: stroke fill;
  text-shadow: 0 1.5px 0 var(--navy_edge);
}

/* The keys spring, as the game's do (frontend/src/uiCel.css, "the keys spring", copied with its numbers): pointing
   at a key boings it up and settles it a little proud, pressing squeezes it. Long keys move a third as much (--cel_k),
   round keys the full amount. Only the independent scale moves, so a key's own translate (the arrows are centred
   by one) is never fought over. The owner, 2026-10-05: "these buttons should be animated have hover effects". */
.btn,
.bar_nav .bar_cta,
.chip span,
.welcome_arrow,
.welcome_close {
  --cel_k: 0.3;
  transition:
    filter 0.15s,
    scale 0.18s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.welcome_arrow,
.welcome_close {
  --cel_k: 1;
}
:is(.btn, .bar_nav .bar_cta, .welcome_arrow, .welcome_close):hover,
.chip:hover span {
  scale: calc(1 + 0.08 * var(--cel_k));
  filter: brightness(1.08);
  animation: cel_boing 0.45s ease-out;
}
:is(.btn, .bar_nav .bar_cta, .welcome_arrow, .welcome_close):active,
.chip:active span {
  scale: calc(1 - 0.12 * var(--cel_k));
  animation: none;
  transition-duration: 0.05s;
}
@keyframes cel_boing {
  /* ends on the hover pose */
  0% {
    scale: 1;
  }
  28% {
    scale: calc(1 + 0.16 * var(--cel_k));
  }
  52% {
    scale: calc(1 - 0.03 * var(--cel_k));
  }
  76% {
    scale: calc(1 + 0.11 * var(--cel_k));
  }
  100% {
    scale: calc(1 + 0.08 * var(--cel_k));
  }
}

/* ---------- top bar ---------- */
.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--gutter);
  transition: background-color 0.2s;
}
.bar_solid {
  background: var(--navy_edge);
}
.bar_brand img {
  height: 36px;
  width: auto;
}
.bar_nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 32px);
}
.bar_nav a {
  text-decoration: none;
  text-transform: uppercase;
  font: 900 17px / 1 var(--font);
  letter-spacing: 0.06em;
  color: var(--cream_dim);
}
.bar_nav a:hover {
  color: var(--cream);
}
.bar_nav .bar_cta {
  --h: 48px;
  display: inline-flex;
  align-items: center;
  height: var(--h);
  padding: 0 calc(var(--cap) + 2px) calc(var(--h) * 0.07);
  color: var(--cream);
  -webkit-text-stroke: 1.2px var(--navy_edge);
  paint-order: stroke fill;
  text-shadow: 0 1.5px 0 var(--navy_edge);
}

/* ---------- hero ---------- */
/* Tightened 2026-10-07 (ancestor 05bef9a9c), the owner: "too much separation from the top and the start of the content
   and also too much sepparation Released Games". The hero no longer fills the screen (it was min-height 100svh with
   its content centred, so the words sat far below the bar): it starts just under the bar, and the sections and their
   heads breathe less. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 40px;
  padding: 92px var(--gutter) 104px;
}
.eyebrow {
  margin: 0 0 22px;
  font: 900 16px / 1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--peach);
}
.eyebrow_dim {
  color: var(--cream_dim);
}
.hero_title {
  margin: 0;
  font-size: clamp(60px, 8vw, 132px);
  line-height: 0.9;
}
.hero_red {
  color: var(--peach);
}
.hero_lede {
  max-width: 34em;
  margin: 30px 0 34px;
  font-size: 21px;
  color: #d8cdb3;
}
.hero_actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Ape Wreckage's loading screen logo, as the player sees it there (tools/make_paco_logo.py), upright like it. */
.hero_mark {
  margin: 0;
  justify-self: center;
  width: min(100%, 480px, 64svh);
}

.hero_now {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  text-decoration: none;
  padding: 10px 0;
  border-top: 2px solid var(--line);
}
.hero_now_tag {
  --h: 32px;
  display: inline-flex;
  align-items: center;
  height: var(--h);
  padding: 0 calc(var(--cap) + 2px) calc(var(--h) * 0.07);
  font: 900 14px / 1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream);
  -webkit-text-stroke: 1px var(--navy_edge);
  paint-order: stroke fill;
}
.hero_now_name {
  font: 900 26px / 1 var(--font);
  text-transform: uppercase;
}
.hero_now_facts {
  color: var(--cream_dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
}
.hero_now_facts i {
  font-style: normal;
  color: var(--peach);
  padding: 0 4px;
}
.hero_now:hover .hero_now_name {
  color: var(--peach);
}

/* ---------- sections ---------- */
.sec {
  position: relative;
  padding: clamp(48px, 6vw, 88px) var(--gutter);
}
/* the first section follows the hero's own bottom line, so it needs little room of its own */
#floor {
  padding-top: clamp(24px, 3vw, 40px);
}
.sec_ink {
  background: none;
}
.sec_ink2 {
  background: rgb(4 7 14 / 0.38);
}

.sec_head {
  display: grid;
  grid-template-columns: 1fr minmax(0, 420px);
  align-items: end;
  gap: 10px 26px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.sec_title {
  margin: 0;
  font-size: clamp(46px, 6vw, 88px);
  line-height: 0.95;
}
.sec_note {
  margin: 0;
  color: var(--cream_dim);
  font-size: 18px;
}

/* The game's card (bc-card): an ink plate, a cream edge, round corners, a hard shadow on the right and below. */
.framed,
.promo,
.form,
.spec,
.soon {
  border: 0 solid transparent;
  border-width: 22px;
  border-image: url("ui/card.webp") 48 fill / 22px / 0 stretch;
}

/* ---------- 01 the floor ---------- */
.game {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
}
.game_screen {
  position: relative;
}
.game_video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--navy_edge);
  border: 0 solid transparent;
  border-width: 26px;
  border-image: url("ui/sheet.webp") 80 fill / 26px / 0 stretch;
}
.game_toggle {
  position: absolute;
  left: 40px;
  top: 40px;
  --h: 40px;
  font-size: 14px;
}
.game_toggle[data-state="paused"] .game_toggle_pause,
.game_toggle[data-state="playing"] .game_toggle_play {
  display: none;
}
.game_caption {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--cream_dim);
  max-width: 46em;
}

.game_logo {
  width: min(100%, 440px);
  margin: -6px 0 18px -8px;
}
.game_pitch {
  margin: 0 0 24px;
  font-size: 20px;
  color: #d8cdb3;
}
.spec {
  margin: 0 0 28px;
  padding: 4px 6px;
}
.spec div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.spec div:last-child {
  border-bottom: 0;
}
.spec dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 14px;
  font-weight: 700;
  color: var(--cream_dim);
  padding-top: 3px;
}
.spec dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
}
.game_actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- coming soon ---------- */
.soon_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.soon {
  display: grid;
  gap: 12px;
  padding: 0 0 6px;
}
.soon_shot {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 3px solid var(--navy_edge);
}
.soon_name {
  margin: 0;
  font-size: 30px;
  line-height: 1;
}
.soon_line {
  margin: 4px 0 0;
  color: var(--cream_dim);
  font-size: 17px;
}
.soon_tag {
  justify-self: start;
  --h: 32px;
  display: inline-flex;
  align-items: center;
  height: var(--h);
  padding: 0 calc(var(--cap) + 2px) calc(var(--h) * 0.07);
  font: 900 13px / 1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream);
  -webkit-text-stroke: 1px var(--navy_edge);
  paint-order: stroke fill;
}

/* ---------- promotions ---------- */
/* Since 2026-10-06 the promotions are the admin panel's (site.js builds one card each): any number, any mix, so a
   plain grid; a raffle's ticket and a free rounds panel take a whole row. */
.promos {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
}
.promo_kicker {
  display: block;
  margin-bottom: 12px;
  font: 900 15px / 1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--peach);
}
.promo_when {
  margin: 18px 0 0;
  font: 900 16px / 1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream_dim);
}
.promo_when b {
  color: var(--peach);
  font-size: 22px;
}
.promo_facts {
  margin: 16px 0 0;
}
.promo_facts div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.promo_facts dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 14px;
  font-weight: 700;
  color: var(--cream_dim);
}
.promo_facts dd {
  margin: 0;
  font-weight: 700;
}
.promo_prizes {
  margin: 16px 0 0;
  padding: 0 0 0 1.3em;
  font-weight: 700;
}
.promo_prizes li {
  padding: 3px 0;
}
.promo_prizes li::marker {
  color: var(--peach);
}
.promo {
  padding: 8px 10px;
}
.promo_title {
  margin: 0 0 10px;
  font-size: 36px;
  line-height: 1;
}
.promo_body {
  margin: 0;
  color: #d0c5aa;
  font-size: 18px;
}

/* Raffle: the panel is a ticket in the slot's peach, a navy outline and a torn stub. */
.promo_raffle {
  grid-column: 1 / -1;
  padding: 0;
  border: 0;
  border-image: none;
}
.ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  height: 100%;
  min-height: 240px;
  background: var(--peach);
  color: var(--navy_edge);
  border: 6px solid var(--navy_edge);
  box-shadow: 0 8px 0 var(--navy_edge);
}
.ticket .promo_title {
  color: var(--cream);
}
.ticket .promo_body {
  color: #3b2a22;
  font-weight: 500;
}
.ticket_main {
  padding: 28px 32px;
}
.ticket_kicker {
  display: block;
  margin-bottom: 14px;
  font: 900 15px / 1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--maroon);
}
.ticket_stub {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border-left: 4px dashed var(--navy_edge);
  text-align: center;
  background: var(--cream);
}
.ticket_stub::before,
.ticket_stub::after {
  content: "";
  position: absolute;
  left: -16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--page_2);
  border: 6px solid var(--navy_edge);
}
.ticket_stub::before {
  top: -20px;
}
.ticket_stub::after {
  bottom: -20px;
}
.ticket_stub_label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: #6a5a48;
}
.ticket_clock {
  margin: 0;
  font: 900 18px / 1.2 var(--font);
  color: var(--navy_edge);
  white-space: nowrap;
}
.ticket_clock b {
  font-weight: 900;
  color: var(--maroon);
  font-size: 34px;
}

.task_bar {
  display: block;
  height: 12px;
  background: var(--navy_edge);
  border: 2px solid var(--navy_edge);
}
.task_bar i {
  display: block;
  height: 100%;
  width: calc(var(--v) * 100%);
}
.tasks {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.task {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 18px;
}
.task_box {
  width: 22px;
  height: 22px;
  border: 3px solid var(--cream_dim);
  background: var(--navy_edge);
  position: relative;
}
.task_done {
  color: var(--cream_dim);
}
.task_done .task_box {
  background: var(--peach);
  border-color: var(--navy_edge);
}
.task_done .task_box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 11px;
  border: solid var(--navy_edge);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.task_count {
  font: 900 18px / 1 var(--font);
  color: var(--peach);
}
.task_pay {
  font: 900 15px / 1 var(--font);
  color: var(--cream);
  text-transform: uppercase;
}

.promo_free {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding: 4px 20px;
}
.free_big {
  font-size: clamp(96px, 11vw, 150px);
  line-height: 0.85;
  color: var(--peach);
}
.promo_free .promo_body {
  max-width: 34em;
}

/* ---------- 04 contact ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}
.contact_side {
  position: sticky;
  top: 120px;
}
.contact_title {
  margin: 22px 0 18px;
  font-size: clamp(54px, 7vw, 104px);
  line-height: 0.92;
}
.contact_lede {
  margin: 0 0 22px;
  font-size: 21px;
  color: #d8cdb3;
  max-width: 24em;
}
.contact_mail {
  margin: 0;
  color: var(--cream_dim);
}
.contact_mail a {
  color: var(--peach);
  text-underline-offset: 5px;
}

.form {
  padding: 10px 12px 14px;
  display: grid;
  gap: 22px;
}
.form_label {
  display: block;
  margin-bottom: 8px;
  font: 900 15px / 1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream_dim);
}
.form_label i {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}
.form_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field input,
.field textarea {
  width: 100%;
  display: block;
  color: var(--cream);
  font: 500 20px / 1.4 var(--font);
  background: none;
  border: 0 solid transparent;
  border-width: 14px;
  border-image: url("ui/well.webp") 40 fill / 14px / 0 stretch;
  padding: 0 2px;
  border-radius: 0;
}
.field textarea {
  resize: vertical;
  min-height: 130px;
}
.field input:focus,
.field textarea:focus {
  outline: 3px solid var(--peach);
  outline-offset: 2px;
}
.field [aria-invalid="true"] {
  outline: 3px solid #e2574c;
  outline-offset: 2px;
}

.form_topics {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.form_topics legend {
  padding: 0;
  margin-bottom: 10px;
}
.chip {
  position: relative;
  cursor: pointer;
}
.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  font: 900 16px / 1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cream_dim);
  --h: 40px;
  display: flex;
  align-items: center;
  height: var(--h);
  padding: 0 calc(var(--cap) + 2px) calc(var(--h) * 0.07);
}
.chip:hover span {
  color: var(--cream);
}
.chip input:checked + span {
  color: var(--cream);
  -webkit-text-stroke: 1px var(--navy_edge);
  paint-order: stroke fill;
}
.chip input:focus-visible + span {
  outline: 3px solid var(--peach);
  outline-offset: 2px;
}

.form_end {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.form_status {
  margin: 0;
  font-size: 17px;
  color: var(--cream_dim);
}
.form_status[data-kind="error"] {
  color: #ff8a80;
}
.form_status[data-kind="ok"] {
  color: var(--peach);
}

/* ---------- footer ---------- */
.foot {
  background: var(--navy_edge);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px 40px;
  padding: 34px var(--gutter);
}
.foot_mark {
  width: 120px;
  height: auto;
}
.foot_age,
.foot_small {
  margin: 0;
  font-size: 16px;
  color: var(--cream_dim);
}
.foot_age b {
  background: var(--maroon);
  padding: 2px 6px;
  margin-right: 6px;
  color: var(--cream);
}
.foot_replay {
  margin-left: 10px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--peach);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---------- the welcome popups ----------
   The canvas draws the Marrow plate; .welcome_body is placed by popup_player.js over the plate's still middle, in
   the plate's own scale (--k), and its words only appear once the plate has landed. */
.welcome {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(9, 11, 18, 0.86);
}
.welcome_stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* The dialog spans the window; each popup's words (.pane) are laid on their plate every frame by popup_player.js,
   from the popup bone of the baked Marrow frame, so they ride the intro and the carousel's slides. Only the middle
   pane takes clicks. */
.welcome_body {
  position: absolute;
  inset: 0;
  --k: 1;
  font-size: calc(30px * var(--k));
  pointer-events: none;
}
.welcome_body .pane {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.welcome_body .pane.is_live {
  pointer-events: auto;
}
.welcome_close {
  position: absolute;
  translate: -50% -50%;
  pointer-events: auto;
  width: calc(84px * var(--k));
  height: calc(84px * var(--k));
  min-width: 36px;
  min-height: 36px;
  background: url("ui/key_close.webp") center / contain no-repeat;
  border: 0;
  cursor: pointer;
}
.pane {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  overflow: auto;
  padding: 0.2em 0.3em;
}
.pane_lede {
  margin: 0;
  font: 900 1.25em / 1.05 var(--font);
  text-transform: uppercase;
  color: var(--peach);
}
.pane_rows,
.pane_tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1em;
}
.pane_rows li {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 0.8em;
  padding: 0.38em 0;
  border-bottom: 1px solid var(--line);
}
.pane_rows b,
.pane_tasks b {
  font: 900 1em / 1.2 var(--font);
  text-transform: uppercase;
  color: var(--cream);
}
.pane_rows span {
  color: #d8cdb3;
  line-height: 1.25;
}
.pane_tasks li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8em;
  padding: 0.4em 0;
  border-bottom: 1px solid var(--line);
}
.pane_tasks .task_bar {
  height: 0.5em;
}
.pane_tasks i {
  background: var(--peach);
}
.pane_tasks em {
  font: 900 0.8em / 1 var(--font);
  color: var(--peach);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: right;
}
.pane_game {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9em;
  align-items: center;
}
.pane_shot {
  width: 100%;
  border: 0.25em solid var(--navy_edge);
}
.pane_logo {
  width: 100%;
}
.pane_facts {
  margin: 0.3em 0;
  font: 900 0.9em / 1.2 var(--font);
  text-transform: uppercase;
  color: var(--peach);
}
.pane_note {
  margin: 0;
  color: #d8cdb3;
  line-height: 1.3;
}
.pane_keys {
  margin-top: auto;
  display: flex;
  justify-content: center;
}
.pane_keys .btn_big {
  font-size: 22px;
  --h: 64px;
  min-width: 280px;
}
/* the carousel's arrows: the kit's minus key with an arrowhead (tools/make_arrow_keys.py), placed by popup_player.js */
.welcome_arrow {
  position: absolute;
  z-index: 2;
  width: calc(96px * var(--k, 1));
  height: calc(96px * var(--k, 1));
  min-width: 48px;
  min-height: 48px;
  translate: -50% -50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: center / contain no-repeat;
}
.welcome_arrow_prev {
  background-image: url("ui/key_left.webp");
}
.welcome_arrow_next {
  background-image: url("ui/key_right.webp");
}

/* ---------- smaller screens ---------- */
@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 96px;
    padding-bottom: 150px;
  }
  .hero_mark {
    grid-row: 1;
    width: min(76%, 380px);
  }
  .sec_head {
    grid-template-columns: 1fr;
  }
  .game {
    grid-template-columns: 1fr;
  }
  .contact {
    grid-template-columns: 1fr;
  }
  .contact_side {
    position: static;
  }
  .foot {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  body {
    font-size: 18px;
  }
  .bar_nav a:not(.bar_cta) {
    display: none;
  }
  .soon_list {
    grid-template-columns: 1fr;
  }
  .ticket {
    grid-template-columns: 1fr;
  }
  .ticket_stub {
    border-left: 0;
    border-top: 4px dashed var(--navy_edge);
  }
  .ticket_stub::before,
  .ticket_stub::after {
    display: none;
  }
  .form_row {
    grid-template-columns: 1fr;
  }
  .promo_free {
    flex-direction: column;
    align-items: flex-start;
  }
  .welcome_body {
    font-size: max(12px, calc(26px * var(--k)));
  }
  .pane_rows li {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pane_game {
    grid-template-columns: 1fr;
  }
  .pane_shot {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    /* biome-ignore lint/complexity/noImportantStyles: reduced motion must beat every transition on the page */
    transition: none !important;
  }
}