/* Spud & Root: the Game Room (home/game-room.html). Only that page loads this
   file, after site.css. A friend's 1990s game room: wood panelling, string
   lights, a plaid couch, and the recipe games as arcade machines. Every
   class starts with gr-. */

.gr-page {
  --panel: #8a5733;
  --panel-dark: #6e4325;
  --carpet: #b98a5c;
  --carpet-dark: #a27548;
  --baseboard: #5c3a20;
  --neon: #ff5fa2;
  --screen-ink: #1d1622;
  background: var(--panel-dark);
}

/* Wood panelling: planks with dark grooves, lit warm from the ceiling */
.gr-room,
.gr-arcade {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0, rgba(255, 196, 120, 0.22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0 3px, transparent 3px 88px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 22px, rgba(0, 0, 0, 0.05) 22px 41px, rgba(255, 255, 255, 0.03) 41px 66px, transparent 66px 88px),
    linear-gradient(var(--panel-dark), var(--panel));
  color: var(--cream);
}

/* ---------- The room ---------- */
.gr-room {
  position: relative;
  overflow: hidden;
}
.gr-lights {
  display: block;
  width: 100%;
  height: auto;
  min-height: 56px;
  aspect-ratio: 1200 / 70;
}
.gr-bulb {
  animation: gr-twinkle 3.2s ease-in-out infinite;
}
.gr-bulb:nth-of-type(5n + 2) {
  animation-delay: -0.8s;
}
.gr-bulb:nth-of-type(5n + 3) {
  animation-delay: -1.6s;
}
.gr-bulb:nth-of-type(5n + 4) {
  animation-delay: -2.4s;
}
.gr-bulb:nth-of-type(5n) {
  animation-delay: -1.2s;
}
@keyframes gr-twinkle {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(255, 230, 160, 0.9));
  }
  50% {
    opacity: 0.55;
    filter: none;
  }
}

.gr-intro {
  display: grid;
  gap: 28px;
  align-items: center;
  padding-top: clamp(4px, 2vw, 20px);
  padding-bottom: clamp(8px, 2vw, 16px);
}
@media (min-width: 820px) {
  .gr-intro {
    grid-template-columns: 1fr auto;
  }
}
.gr-intro__eyebrow {
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  line-height: 1.1;
  color: var(--logo-yellow);
  rotate: -2deg;
  transform-origin: 0 50%;
}
.gr-intro h1 {
  margin-top: 6px;
  font-size: clamp(2.6rem, 1.8rem + 4vw, 5rem);
  color: var(--cream);
  text-shadow: 4px 4px 0 var(--ink);
}
.gr-intro__lede {
  max-width: 34em;
  margin-top: 14px;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: #fbe9d0;
}

/* A note taped to the wall, on lined paper */
.gr-rules {
  position: relative;
  justify-self: start;
  width: min(100%, 290px);
  padding: 22px 24px 18px 34px;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 22px, rgba(255, 68, 56, 0.45) 22px 24px, transparent 24px),
    repeating-linear-gradient(transparent 0 29px, #b9d4ea 29px 31px),
    #fffdf5;
  background-position: 0 0, 0 14px, 0 0;
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
  rotate: 2deg;
  font-family: var(--font-script);
  font-size: 1.35rem;
  line-height: 31px;
}
@media (min-width: 820px) {
  .gr-rules {
    justify-self: end;
    margin-right: clamp(0px, 4vw, 40px);
  }
}
.gr-rules::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 96px;
  height: 26px;
  translate: -50% 0;
  rotate: -4deg;
  background: rgba(255, 248, 234, 0.7);
  border: 1.5px solid rgba(35, 31, 32, 0.25);
}
.gr-rules__title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 31px;
  color: var(--potato-red);
}
.gr-rules ol {
  margin: 0;
  padding-left: 1.2em;
}

/* The scene keeps its shape and stops growing on wide screens. On phones
   it has a minimum height and its sides are cropped. The floor is drawn
   far past the edges of the drawing, and overflow: visible lets it run the
   full width of the room either way. */
.gr-scene {
  display: block;
  width: min(100%, 1320px);
  height: auto;
  min-height: 240px;
  aspect-ratio: 1200 / 420;
  margin: 0 auto;
  overflow: visible;
}
.gr-scene__spud {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: gr-bob 2.4s ease-in-out infinite;
}
@keyframes gr-bob {
  0%, 100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg) translateY(-3px);
  }
}
.gr-tv-spud {
  animation: gr-hop 1.6s ease-in-out infinite;
}
@keyframes gr-hop {
  0%, 30%, 100% {
    transform: translate(0, 0);
  }
  45% {
    transform: translate(40px, -36px);
  }
  60% {
    transform: translate(72px, 0);
  }
  80% {
    transform: translate(72px, 0);
  }
}
.gr-tv-coins {
  animation: gr-blink 0.8s steps(2, jump-none) infinite;
}
.gr-tv-glare,
.gr-tv-light {
  animation: gr-flicker 4s linear infinite;
}
@keyframes gr-flicker {
  0%, 100% {
    opacity: 0.12;
  }
  20% {
    opacity: 0.2;
  }
  22% {
    opacity: 0.08;
  }
  60% {
    opacity: 0.16;
  }
}
.gr-led {
  animation: gr-blink 1.4s steps(2, jump-none) infinite;
}
.gr-lava {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.gr-lava--a {
  animation: gr-lava-a 9s ease-in-out infinite;
}
.gr-lava--b {
  animation: gr-lava-b 11s ease-in-out infinite;
}
@keyframes gr-lava-a {
  0%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  50% {
    transform: translateY(-60px) scale(0.8, 1.2);
  }
}
@keyframes gr-lava-b {
  0%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  50% {
    transform: translateY(40px) scale(1.2, 0.85);
  }
}
@keyframes gr-blink {
  50% {
    opacity: 0;
  }
}

/* ---------- The machines ---------- */
.gr-arcade {
  padding-top: clamp(28px, 5vw, 56px);
  border-top: 10px solid var(--baseboard);
}
.gr-arcade__head {
  text-align: center;
}
.gr-neon {
  display: inline-block;
  padding: 6px 26px 10px;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem);
  line-height: 1;
  color: #ffe3f0;
  text-shadow:
    0 0 4px #fff,
    0 0 10px var(--neon),
    0 0 22px var(--neon),
    0 0 44px var(--neon);
  border: 3px solid rgba(255, 227, 240, 0.85);
  border-radius: 18px;
  box-shadow:
    0 0 8px var(--neon),
    0 0 22px var(--neon),
    inset 0 0 12px var(--neon);
  background: rgba(35, 31, 32, 0.55);
  rotate: -2deg;
  animation: gr-neon 7s linear infinite;
}
@keyframes gr-neon {
  0%, 47%, 49.5%, 52%, 100% {
    opacity: 1;
  }
  48%, 51% {
    opacity: 0.55;
  }
}
.gr-arcade__sub {
  margin-top: 16px;
  font-size: 1.1rem;
  color: #fbe9d0;
}

/* The floor: rows of wall, baseboard and carpet, one per row of machines.
   Each row is --row tall, so the stripes line up with the rows. */
.gr-floor {
  --row: 31em;
  --carpet-h: 6.2em;
  margin-top: clamp(16px, 3vw, 28px);
  font-size: clamp(11px, 3.1vw, 16px);
  background:
    linear-gradient(
      to bottom,
      transparent 0 calc(var(--row) - var(--carpet-h) - 0.8em),
      var(--ink) calc(var(--row) - var(--carpet-h) - 0.8em) calc(var(--row) - var(--carpet-h) - 0.6em),
      var(--baseboard) calc(var(--row) - var(--carpet-h) - 0.6em) calc(var(--row) - var(--carpet-h)),
      var(--carpet-dark) calc(var(--row) - var(--carpet-h)) calc(var(--row) - var(--carpet-h) + 0.7em),
      var(--carpet) calc(var(--row) - var(--carpet-h) + 0.7em)
    )
    0 0 / 100% var(--row) repeat-y;
  position: relative;
}
/* Shag: speckles on the carpet only */
.gr-floor::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.16) 0 1.2px, transparent 1.6px) 0 0 / 9px 7px,
    radial-gradient(circle at 70% 60%, rgba(60, 30, 10, 0.2) 0 1.2px, transparent 1.6px) 0 0 / 7px 9px;
  -webkit-mask: linear-gradient(to bottom, transparent calc(var(--row) - var(--carpet-h)), #000 calc(var(--row) - var(--carpet-h))) 0 0 / 100% var(--row) repeat-y;
  mask: linear-gradient(to bottom, transparent calc(var(--row) - var(--carpet-h)), #000 calc(var(--row) - var(--carpet-h))) 0 0 / 100% var(--row) repeat-y;
}
.gr-cabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 60em;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.gr-cab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 14.6em;
  height: var(--row);
  padding-bottom: 2.1em;
  --cab-dark: color-mix(in srgb, var(--cab) 72%, var(--ink));
  --cab-light: color-mix(in srgb, var(--cab) 45%, white);
}
/* The machine's shadow on the carpet */
.gr-cab::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2.4em;
  width: 14.2em;
  height: 1.4em;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(35, 20, 10, 0.55), transparent);
}

.gr-cab__machine {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 13em;
  margin-bottom: 1.6em;
  color: var(--ink);
  text-decoration: none;
  transition: translate 0.25s var(--ease-spring);
}
.gr-cab__machine:hover {
  translate: 0 -0.25em;
}
.gr-cab__machine:focus-visible {
  outline-offset: 6px;
  border-radius: 10px;
}

/* The lit sign on top */
.gr-cab__marquee {
  display: grid;
  place-items: center;
  height: 3.6em;
  margin: 0 -0.3em;
  padding: 0.3em 0.7em;
  background: radial-gradient(ellipse at 50% 35%, #fff 0, var(--cab-light) 55%, var(--cab) 100%);
  border: 3px solid var(--ink);
  border-radius: 0.7em 0.7em 0.25em 0.25em;
  box-shadow:
    inset 0 0 0.9em rgba(255, 255, 255, 0.85),
    0 0 1.4em color-mix(in srgb, var(--cab) 60%, transparent);
  transition: box-shadow 0.25s;
}
.gr-cab__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
}
.gr-cab__machine:hover .gr-cab__marquee,
.gr-cab__machine:focus-visible .gr-cab__marquee {
  box-shadow:
    inset 0 0 1.2em #fff,
    0 0 2.4em var(--cab);
}

/* The painted cabinet around the screen, with stripes down it: a speaker
   grille, the screen (a picture of the game, from gameroom-screens.mjs),
   and the "Press start" strip under it */
.gr-cab__body {
  display: block;
  padding: 0.7em 0.5em 0.75em;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 0.55em, transparent 0.55em calc(100% - 0.55em), rgba(0, 0, 0, 0.2) calc(100% - 0.55em)),
    repeating-linear-gradient(-58deg, transparent 0 1.1em, rgba(255, 255, 255, 0.2) 1.1em 1.6em),
    var(--cab);
  border: 3px solid var(--ink);
  border-top: 0;
}
.gr-cab__grille {
  display: block;
  height: 1.3em;
  margin: 0 1.6em 0.65em;
  background:
    radial-gradient(circle, var(--ink) 0 0.13em, transparent 0.15em) 0 0 / 0.5em 0.42em,
    var(--cab-dark);
  border: 2px solid var(--ink);
  border-radius: 0.4em;
}
.gr-cab__screen {
  position: relative;
  display: block;
  padding: 0.3em;
  background: #111;
  border: 3px solid var(--ink);
  border-radius: 0.5em;
  overflow: hidden;
}
.gr-cab__screen img {
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 161;
  object-fit: cover;
  border-radius: 0.7em / 1em;
  transition: filter 0.25s;
}
/* Scanlines and the curve of the glass */
.gr-cab__screen::after {
  content: "";
  position: absolute;
  inset: 0.3em;
  border-radius: 0.7em / 1em;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.2), transparent 40%),
    repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.1) 2px 3px);
  box-shadow: inset 0 0 0.9em rgba(0, 0, 0, 0.45);
}
.gr-cab__machine:hover .gr-cab__screen img,
.gr-cab__machine:focus-visible .gr-cab__screen img {
  filter: saturate(1.2) brightness(1.06);
}
.gr-cab__start {
  display: block;
  margin: 0.6em 0.4em 0;
  padding: 0.3em 0 0.35em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82em;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--logo-yellow);
  text-shadow: 0 0 8px rgba(255, 222, 0, 0.8);
  background: #1d1622;
  border: 2px solid var(--ink);
  border-radius: 0.35em;
  animation: gr-blink 1.2s steps(2, jump-none) infinite;
}
.gr-cab__machine:hover .gr-cab__start,
.gr-cab__machine:focus-visible .gr-cab__start {
  animation-duration: 0.4s;
}

/* The control panel: a joystick and two buttons */
.gr-cab__deck {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.7em;
  margin: 0 -0.5em;
  padding: 0 1.4em 0 1.9em;
  background: linear-gradient(#3a3340, #231f20);
  border: 3px solid var(--ink);
  border-radius: 0.45em 0.45em 0.2em 0.2em;
  box-shadow: inset 0 0.25em 0 rgba(255, 255, 255, 0.12);
}
.gr-cab__stick {
  position: relative;
  width: 0.35em;
  height: 1.5em;
  margin-top: -1.1em;
  background: #cfcdd6;
  border: 2px solid var(--ink);
  border-radius: 0.2em;
  transform-origin: 50% 100%;
}
.gr-cab__stick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.8em;
  width: 1.2em;
  height: 1.2em;
  translate: -50% 0;
  background: radial-gradient(circle at 35% 30%, #ff9a92, var(--potato-red) 55%);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.gr-cab__machine:hover .gr-cab__stick {
  animation: gr-waggle 0.5s ease-in-out infinite alternate;
}
@keyframes gr-waggle {
  from {
    rotate: -16deg;
  }
  to {
    rotate: 16deg;
  }
}
.gr-cab__btns {
  display: flex;
  gap: 0.45em;
}
.gr-cab__btns i {
  width: 1em;
  height: 1em;
  background: radial-gradient(circle at 35% 30%, #fff8c2, var(--logo-yellow) 60%);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 0.15em 0 var(--ink);
}
.gr-cab__btns i + i {
  background: radial-gradient(circle at 35% 30%, #dfffa0, var(--logo-green) 60%);
}

/* Below the controls: the coin door */
.gr-cab__base {
  display: grid;
  place-items: center;
  height: 6.4em;
  margin: 0 0.15em;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 0.55em, transparent 0.55em calc(100% - 0.55em), rgba(0, 0, 0, 0.2) calc(100% - 0.55em)),
    var(--cab-dark);
  border: 3px solid var(--ink);
  border-top: 0;
  border-bottom-width: 0.7em;
  border-radius: 0 0 0.2em 0.2em;
}
.gr-cab__coin {
  display: flex;
  gap: 0.35em;
  padding: 0.55em 0.5em;
  background: #3a3a3d;
  border: 2px solid var(--ink);
  border-radius: 0.25em;
}
.gr-cab__coin i {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 2.6em;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 0.62em;
  color: #fff;
  background:
    linear-gradient(transparent 0 0.5em, #111 0.5em 1.4em, transparent 1.4em),
    radial-gradient(circle, #ff6b5f, #c8261c);
  background-size: 0.3em 100%, 100% 100%;
  background-position: 50% 0, 0 0;
  background-repeat: no-repeat;
  border: 1.5px solid var(--ink);
  border-radius: 0.2em;
  padding-top: 1.2em;
  box-shadow: 0 0 0.6em rgba(255, 68, 56, 0.7);
}

/* The brass nameplate in front of each machine */
.gr-cab__plaque {
  position: absolute;
  bottom: 0.6em;
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 8px);
  padding: 3px 18px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.15;
  text-align: center;
  color: #3a2a10;
  background: linear-gradient(#fbe7a1, #e2b54a 48%, #c99628 52%, #e8c165);
  border: 2px solid var(--ink);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 3px 0 var(--ink);
}
/* Two little screws */
.gr-cab__plaque::before,
.gr-cab__plaque::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 5px;
  height: 5px;
  translate: 0 -50%;
  background: radial-gradient(circle at 35% 35%, #fff4c8, #8a6418);
  border: 1px solid #5a3f0c;
  border-radius: 50%;
}
.gr-cab__plaque::after {
  left: auto;
  right: 6px;
}
.gr-cab__from {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.gr-cab__plaque a {
  color: inherit;
  text-decoration-thickness: 1.5px;
}
@media (max-width: 560px) {
  .gr-cab__plaque {
    padding: 2px 14px 3px;
    font-size: 0.72rem;
  }
  .gr-cab__from {
    font-size: 0.56rem;
  }
}

/* The next machine, still under a sheet, with its marquee glowing through */
.gr-cab__covered {
  position: relative;
  width: 13.6em;
  height: 24.7em;
  margin-bottom: 1.6em;
  transform-origin: 50% 100%;
}
.gr-cab__covered svg {
  display: block;
  width: 100%;
  height: 100%;
}
.gr-cab__glow {
  animation: gr-glow 3s ease-in-out infinite;
}
@keyframes gr-glow {
  50% {
    opacity: 0.35;
  }
}
.gr-cab--soon:hover .gr-cab__covered {
  animation: gr-sway 1.2s ease-in-out infinite alternate;
}
@keyframes gr-sway {
  from {
    rotate: -1deg;
  }
  to {
    rotate: 1deg;
  }
}
/* A luggage tag tied on at the controls */
.gr-cab__tag {
  position: absolute;
  top: 63%;
  left: 52%;
  padding: 0.45em 0.8em 0.5em 1.4em;
  font-family: var(--font-script);
  font-size: 1.15em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  background:
    radial-gradient(circle at 0.65em 50%, var(--ink) 0 0.16em, #f7f0e1 0.17em 0.3em, transparent 0.31em),
    #d9a35a;
  border: 2px solid var(--ink);
  border-radius: 0.2em 0.35em 0.35em 0.2em;
  clip-path: polygon(0.7em 0, 100% 0, 100% 100%, 0.7em 100%, 0 50%);
  rotate: 12deg;
  transform-origin: 0 50%;
  box-shadow: 2px 2px 0 rgba(35, 31, 32, 0.4);
}
.gr-cab__tag::before {
  content: "";
  position: absolute;
  left: -1.6em;
  top: 50%;
  width: 1.7em;
  border-top: 2px solid var(--ink);
}

/* The free tokens: a dish of them on a little table by the door, under a
   sign on a stick. gameroom.js shows it (it's hidden without JavaScript,
   when the machines need no tokens). */
.gr-cab[hidden] {
  display: none;
}
.gr-tokens {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 13em;
  margin-bottom: 1.6em;
}
/* A token, face on: gold, with a stamped ring and S&R in the middle */
.gr-tokens__heap i,
.gr-tokens__fly i,
.gr-play__token {
  background:
    radial-gradient(circle, transparent 0 52%, rgba(122, 78, 0, 0.55) 53% 58%, transparent 59%),
    radial-gradient(circle at 35% 30%, #fff6b0, #ffd23a 45%, #d99a12 100%);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.gr-tokens__sign {
  position: relative;
  z-index: 1;
  width: 11em;
  padding: 0.6em 0.6em 0.7em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: #fffdf5;
  border: 3px solid var(--ink);
  border-radius: 0.4em;
  outline: 2px dashed var(--potato-red);
  outline-offset: -0.45em;
  box-shadow: 0.25em 0.25em 0 rgba(35, 31, 32, 0.4);
  rotate: -3deg;
}
.gr-tokens__free {
  display: block;
  font-size: 2em;
  line-height: 1;
  color: var(--potato-red);
  text-shadow: 0.06em 0.06em 0 var(--logo-yellow);
}
.gr-tokens__help {
  display: block;
  margin-top: 0.3em;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.15em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--russet-text);
}
.gr-tokens__post {
  width: 0.6em;
  height: 3.4em;
  margin-top: -0.3em;
  background: linear-gradient(90deg, #c9944f, #7a4a28);
  border: 2px solid var(--ink);
  border-top: 0;
}
/* The dish, with its heap of tokens lying flat */
.gr-tokens__dish {
  position: relative;
  z-index: 1;
  width: 9em;
  height: 3.6em;
  margin-top: -2em;
  padding: 0;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.gr-tokens__dish::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.7em;
  background:
    radial-gradient(ellipse 50% 0.6em at 50% 0, rgba(0, 0, 0, 0.35), transparent),
    linear-gradient(#e85c4f, #b2362a);
  border: 3px solid var(--ink);
  border-radius: 0.3em 0.3em 4.5em 4.5em / 0.3em 0.3em 1.6em 1.6em;
}
.gr-tokens__dish:focus-visible {
  outline-offset: 6px;
  border-radius: 10px;
}
.gr-tokens__heap {
  position: absolute;
  inset: 0;
}
.gr-tokens__heap i {
  position: absolute;
  width: 2.2em;
  height: 1.1em;
  border-width: 1.5px;
  transition: translate 0.2s var(--ease-spring);
}
.gr-tokens__heap i:nth-child(1) { left: 0.6em; top: 1.4em; }
.gr-tokens__heap i:nth-child(2) { left: 2.4em; top: 1.2em; }
.gr-tokens__heap i:nth-child(3) { left: 4.3em; top: 1.3em; }
.gr-tokens__heap i:nth-child(4) { left: 6.1em; top: 1.4em; }
.gr-tokens__heap i:nth-child(5) { left: 1.5em; top: 0.7em; }
.gr-tokens__heap i:nth-child(6) { left: 3.4em; top: 0.5em; }
.gr-tokens__heap i:nth-child(7) { left: 5.2em; top: 0.7em; }
.gr-tokens__heap i:nth-child(8) { left: 2.5em; top: 0; }
.gr-tokens__heap i:nth-child(9) { left: 4.3em; top: -0.1em; }
.gr-tokens__dish:hover .gr-tokens__heap i:nth-child(9),
.gr-tokens__dish:focus-visible .gr-tokens__heap i:nth-child(9) {
  translate: 0 -0.5em;
}
.gr-tokens__dish:active .gr-tokens__heap i:nth-child(9) {
  translate: 0 -0.9em;
}
/* Taking one: the heap gives a little, and its top token is topped up */
.gr-tokens__dish.is-take .gr-tokens__heap {
  animation: gr-settle 0.25s ease-out;
}
@keyframes gr-settle {
  40% {
    translate: 0 0.15em;
  }
}
.gr-tokens__dish.is-take .gr-tokens__heap i:last-child {
  animation: gr-refill 0.6s var(--ease-spring);
}
@keyframes gr-refill {
  0%, 50% {
    opacity: 0;
    scale: 0.3;
  }
}
/* The token you took, on its way to your pocket (gameroom.js moves it) */
.gr-tokens__fly {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 2.2em;
  height: 2.2em;
  perspective: 10em;
  pointer-events: none;
}
.gr-tokens__fly i {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0.8em rgba(255, 222, 0, 0.8);
  animation: gr-spin 0.3s linear infinite;
}
@keyframes gr-spin {
  to {
    transform: rotateY(360deg);
  }
}
/* "+1" off the card as it lands */
.gr-tokens__plus {
  position: absolute;
  z-index: 3;
  translate: -50% -50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6em;
  color: var(--logo-yellow);
  text-shadow:
    0.08em 0.08em 0 var(--ink),
    0 0 0.4em rgba(255, 222, 0, 0.8);
  pointer-events: none;
  animation: gr-plus 0.8s ease-out forwards;
}
@keyframes gr-plus {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translateY(-0.8em) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-2.4em) scale(1);
  }
}
.gr-tokens__dish.is-full {
  animation: gr-shake 0.4s;
}
.gr-tokens__table {
  position: relative;
  width: 12em;
  height: 10em;
  margin-top: -0.6em;
}
/* The top, seen a little from above, and two legs */
.gr-tokens__table::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1.4em;
  background: linear-gradient(#a36c3e 0 55%, #7a4a28 55%);
  border: 3px solid var(--ink);
  border-radius: 0.4em;
}
.gr-tokens__table i {
  position: absolute;
  top: 1.2em;
  bottom: 0;
  left: 1.1em;
  width: 0.9em;
  background: linear-gradient(90deg, #a36c3e, #6e4325);
  border: 3px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 0.2em 0.2em;
}
.gr-tokens__table i + i {
  left: auto;
  right: 1.1em;
}
.gr-cab--tokens .gr-cab__plaque.is-bump {
  animation: gr-bump 0.3s var(--ease-spring);
}
@keyframes gr-bump {
  40% {
    scale: 1.14;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 3px 0 var(--ink),
      0 0 1em 0.2em rgba(255, 222, 0, 0.85);
  }
}
/* Sent back from a machine with no tokens: the table lights up */
.gr-cab--tokens.is-calling .gr-tokens__sign {
  animation: gr-call 0.6s ease-in-out 4;
}
@keyframes gr-call {
  50% {
    box-shadow:
      0.25em 0.25em 0 rgba(35, 31, 32, 0.4),
      0 0 1.5em 0.4em var(--logo-yellow);
  }
}
@keyframes gr-shake {
  20%, 60% {
    translate: -0.3em 0;
  }
  40%, 80% {
    translate: 0.3em 0;
  }
}

/* The end of the room: a note and the doormat on the way out */
.gr-arcade__foot {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 26px var(--gutter) clamp(40px, 6vw, 64px);
  text-align: center;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.16) 0 1.2px, transparent 1.6px) 0 0 / 9px 7px,
    radial-gradient(circle at 70% 60%, rgba(60, 30, 10, 0.2) 0 1.2px, transparent 1.6px) 0 0 / 7px 9px,
    var(--carpet);
}
.gr-arcade__note {
  max-width: 30em;
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  line-height: 1.2;
  color: var(--ink);
}
.gr-mat {
  padding: 18px clamp(28px, 6vw, 56px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3a2410;
  background:
    repeating-linear-gradient(90deg, rgba(60, 30, 10, 0.18) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 4px),
    #c9944f;
  border: 3px solid var(--ink);
  border-radius: 8px;
  outline: 3px dashed rgba(58, 36, 16, 0.55);
  outline-offset: -12px;
  box-shadow: 0 5px 0 rgba(35, 31, 32, 0.45);
}

/* ---------- Playing a machine ---------- */
html.gr-playing {
  overflow: hidden;
}
.gr-play {
  width: min(880px, 100vw - 20px);
  max-width: none;
  height: min(100dvh - 20px, 920px);
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  color: var(--ink);
}
.gr-play::backdrop {
  background: rgba(30, 16, 8, 0.8);
}
.gr-play[open] {
  animation: gr-roll-in 0.35s var(--ease-spring);
}
@keyframes gr-roll-in {
  from {
    opacity: 0;
    translate: 0 30px;
    scale: 0.96;
  }
}
.gr-play__cab {
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 10px, transparent 10px calc(100% - 10px), rgba(0, 0, 0, 0.2) calc(100% - 10px)),
    repeating-linear-gradient(-58deg, transparent 0 22px, rgba(255, 255, 255, 0.18) 22px 32px),
    var(--cab, var(--potato-gold));
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.gr-play__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  background: radial-gradient(ellipse at 50% 30%, #fff 0, color-mix(in srgb, var(--cab, var(--potato-gold)) 45%, white) 60%, var(--cab, var(--potato-gold)) 100%);
  border-bottom: 3px solid var(--ink);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.85);
}
.gr-play__title {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
}
.gr-play__close {
  flex: none;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 rgba(35, 31, 32, 0.35);
  cursor: pointer;
}
.gr-play__close:hover {
  background: #3a3340;
}
.gr-play__bezel {
  flex: 1;
  min-height: 0;
  padding: clamp(8px, 2vw, 16px);
}
.gr-play__screen {
  position: relative;
  height: 100%;
  background: var(--screen-ink);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 0 0 6px #0d0a10;
  overflow: hidden;
}
.gr-play__screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
}
.gr-play__screen[data-state="on"] iframe {
  opacity: 1;
  animation: gr-power-on 0.45s ease-out;
}
@keyframes gr-power-on {
  0% {
    transform: scale(0.6, 0.01);
    filter: brightness(4);
  }
  45% {
    transform: scale(1, 0.01);
    filter: brightness(3);
  }
  100% {
    transform: scale(1, 1);
    filter: brightness(1);
  }
}
.gr-play__boot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 1.5vw, 2rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-yellow);
  text-shadow: 0 0 12px rgba(255, 222, 0, 0.7);
  animation: gr-blink 0.9s steps(2, jump-none) infinite;
}
.gr-play__screen:not([data-state="boot"]) .gr-play__boot {
  display: none;
}
/* The coin door, on the screen until a token goes in */
.gr-play__coin {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.5vh, 22px);
  padding: 16px;
  text-align: center;
  overflow: auto;
}
.gr-play__screen[data-state="coin"] .gr-play__coin {
  display: flex;
}
.gr-play__insert {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-yellow);
  text-shadow: 0 0 12px rgba(255, 222, 0, 0.7);
  animation: gr-blink 0.9s steps(2, jump-none) infinite;
}
.gr-play__insert.is-out {
  color: #ff8a80;
  text-shadow: 0 0 12px rgba(255, 68, 56, 0.7);
  animation: none;
}
.gr-play__slot {
  padding: 0;
  font: inherit;
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.gr-play__slot:focus-visible {
  outline: 3px solid var(--logo-yellow);
  outline-offset: 6px;
}
/* A steel door with four screws, and the lit slot plate */
.gr-play__door {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: clamp(150px, 26vh, 200px);
  padding: 22px 0 18px;
  background:
    radial-gradient(circle at 12px 12px, #8d8a94 0 3px, var(--ink) 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 12px) 12px, #8d8a94 0 3px, var(--ink) 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at 12px calc(100% - 12px), #8d8a94 0 3px, var(--ink) 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #8d8a94 0 3px, var(--ink) 3.5px 4.5px, transparent 5px),
    linear-gradient(160deg, #6a6670, #3a3a3d 60%, #2a282d);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    0 0 0 5px #0d0a10;
}
.gr-play__plate {
  position: relative;
  display: grid;
  place-items: center;
  width: 44%;
  aspect-ratio: 3 / 4;
  background: radial-gradient(circle, #ff6b5f, #c8261c);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(255, 68, 56, 0.75);
  transition: box-shadow 0.2s, filter 0.2s;
}
.gr-play__slot:hover .gr-play__plate,
.gr-play__slot:focus-visible .gr-play__plate {
  filter: brightness(1.15);
  box-shadow: 0 0 30px rgba(255, 68, 56, 1);
}
.gr-play__mouth {
  width: 14%;
  height: 62%;
  background: #111;
  border: 2px solid #3a0e0a;
  border-radius: 3px;
  box-shadow: inset 0 0 6px #000;
}
.gr-play__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e9e6ef;
}
/* The token, dropped into the slot when you pay */
.gr-play__token {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  opacity: 0;
  pointer-events: none;
}
.gr-play__slot.is-paying .gr-play__token {
  animation: gr-drop 0.55s ease-in forwards;
}
@keyframes gr-drop {
  0% {
    opacity: 1;
    transform: translateY(-70px) scaleX(1);
  }
  55% {
    opacity: 1;
    transform: translateY(10px) scaleX(1);
  }
  80% {
    opacity: 1;
    transform: translateY(16px) scaleX(0.12);
  }
  100% {
    opacity: 0;
    transform: translateY(40px) scaleX(0.12) scaleY(0.2);
  }
}
.gr-play__slot.is-paying .gr-play__plate {
  filter: brightness(1.4);
}
.gr-play__slot.is-empty .gr-play__door {
  animation: gr-shake 0.4s;
}
.gr-play__pocket {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: #fbe9d0;
}
.gr-play__fetch {
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  background: var(--logo-yellow);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.gr-play__fetch:hover {
  background: #fff07a;
}
.gr-play__fetch[hidden] {
  display: none;
}
.gr-play__from {
  padding: 0 18px 12px;
  font-size: 0.95rem;
  color: var(--ink);
}
.gr-play__from a {
  font-weight: 700;
}
@media (max-width: 600px) {
  .gr-play {
    width: 100vw;
    height: 100dvh;
  }
  .gr-play__cab {
    border-radius: 0;
    border-width: 0;
    box-shadow: none;
  }
  .gr-play__bezel {
    padding: 6px;
  }
  .gr-play__close {
    padding: 7px 12px;
    font-size: 0.85rem;
  }
}

/* ---------- The window shade ----------
   A slider over the window: drag the shade up or down (gameroom.js) */
.gr-shade-hit {
  position: absolute;
  z-index: 1;
  border-radius: 6px;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.gr-shade-hit.is-dragging {
  cursor: grabbing;
}
.gr-shade-hit:focus {
  outline: none;
}
.gr-shade-hit:focus-visible {
  outline: 3px solid var(--potato-gold);
  outline-offset: 2px;
}

/* ---------- The lava lamp ----------
   A button kept over the lamp wherever it is: pick it up and shake it
   (gameroom.js) */
.gr-lamp-hit {
  position: absolute;
  z-index: 1;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.gr-lamp-hit.is-held {
  cursor: grabbing;
}
.gr-lamp-hit:focus {
  outline: none;
}
.gr-lamp-hit:focus-visible {
  outline: 3px solid var(--potato-gold);
  outline-offset: 2px;
}

/* ---------- The TV ----------
   Invisible buttons over the TV, the console and the controller sit you
   down at it (gameroom.js). Nothing shows they're there. */
.gr-tv-hit {
  position: absolute;
  z-index: 1;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.gr-tv-hit:focus {
  outline: none;
}
.gr-tv-hit:focus-visible {
  outline: 3px solid var(--potato-gold);
  outline-offset: 2px;
}
.gr-tv {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.gr-tv[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.gr-tv::backdrop {
  background: rgba(20, 12, 8, 0.9);
  animation: gr-fade-in 0.5s ease-out;
}
@keyframes gr-fade-in {
  from {
    opacity: 0;
  }
}
/* The TV, as big as it'll go with room for the button under it */
.gr-tv__set {
  position: relative;
  flex: none;
  width: min(100%, 980px, (100dvh - 110px) * 258 / 230);
  aspect-ratio: 258 / 230;
  transform-origin: 0 0;
}
.gr-tv__set svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Its screen, from the drawing: 168 by 108 at 503, 146 */
.gr-tv__screen {
  position: absolute;
  left: 9.69%;
  top: 42.61%;
  width: 65.12%;
  height: 46.96%;
  border-radius: 9.5% / 14.8%;
  overflow: hidden;
  background: #231f20;
}
.gr-tv__screen:focus-visible {
  /* Focused only so the keys reach the game, never by tabbing */
  outline: none;
  box-shadow: none;
}
.gr-tv__screen canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* Scan lines and a little glass */
.gr-tv__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.12), transparent 55%),
    repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.12) 2px 3px);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.gr-tv__quit {
  flex: none;
  padding: 8px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  animation: gr-fade-in 0.3s 0.5s ease-out backwards;
}
.gr-tv__quit:hover {
  background: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .gr-bulb,
  .gr-scene__spud,
  .gr-tv-spud,
  .gr-tv-coins,
  .gr-tv-glare,
  .gr-tv-light,
  .gr-led,
  .gr-lava,
  .gr-neon,
  .gr-cab__start,
  .gr-cab__glow,
  .gr-cab--soon:hover .gr-cab__covered,
  .gr-cab__machine:hover .gr-cab__stick,
  .gr-play[open],
  .gr-tv::backdrop,
  .gr-tv__quit,
  .gr-play__screen[data-state="on"] iframe,
  .gr-play__boot,
  .gr-play__insert,
  .gr-play__slot.is-empty .gr-play__door,
  .gr-tokens__dish.is-full,
  .gr-tokens__dish.is-take .gr-tokens__heap,
  .gr-tokens__dish.is-take .gr-tokens__heap i:last-child,
  .gr-cab--tokens .gr-cab__plaque.is-bump,
  .gr-cab--tokens.is-calling .gr-tokens__sign {
    animation: none;
  }
  .gr-cab__machine,
  .gr-tokens__heap i {
    transition: none;
  }
  .gr-cab__machine:hover {
    translate: none;
  }
}