/*
  Scrubbed: the four things this game does differently on the page. The
  Thrust button is the one you hold all round, so it's bigger than the lean
  buttons; the fuel meter says when it's running low, with a pulse; a tall
  phone keeps the joke and the numbers between stages; and the title's pool
  of shade sits lower, because the cover's fire is under the words.
  Everything else is the kit's (games/kit/kit.css).
*/
body[data-game="scrubbed"] .kit-pad[data-key="up"] { width: 5.25rem; height: 5.25rem; }
body[data-game="scrubbed"] .kit-pad[data-key="up"] .kit-pad-face { font-size: 1.05rem; }
body[data-game="scrubbed"] .scrubbed-fuel .kit-meter-bar { width: 5.5rem; }
body[data-game="scrubbed"] .scrubbed-fuel.is-low .kit-meter-label { color: var(--paper); }
@media (prefers-reduced-motion: no-preference) {
  body[data-game="scrubbed"] .scrubbed-fuel.is-low .kit-meter-bar > span { animation: kit-pulse 0.35s ease-in-out infinite alternate; }
}

/* On a narrow screen his stream fills a top corner, so the stamps land
   just under it rather than across it */
@container kit (max-width: 440px) {
  body[data-game="scrubbed"] .kit-callouts { inset: 15.5rem 0 auto; }
}

/* Between stages, a tall phone (the round goes full-window) has room for
   the joke and the numbers, which the kit leaves out on narrow screens */
@container kit (max-width: 440px) and (min-height: 600px) {
  body[data-game="scrubbed"] .kit-inter .kit-line { display: block; }
  body[data-game="scrubbed"] .kit-inter .kit-stats { display: flex; }
}

/* The cover's barge and fire sit under the title's words: a deeper, lower pool of shade */
body[data-game="scrubbed"] .kit-title {
  background: radial-gradient(ellipse 72% 58% at 50% 62%, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.45) 72%, rgba(0, 0, 0, 0.18));
}