/* ==========================================================================
   pineapp.win - Arcade hall front page
   You are standing on the arcade floor at night, looking at the machines.
   Loaded after styles.css, only on index.html (body.arcade-page).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Tilt+Neon&display=swap');

.arcade-page {
  --room: #120a24;          /* the room after dark */
  --wall: #1c1038;          /* back wall */
  --carpet: #0c0a26;        /* navy arcade carpet */
  --plastic: #0b0716;       /* cabinet plastic */
  --neon-pink: #ff4fa3;
  --neon-cyan: #36e4ff;
  --neon-lime: #b6ff3b;
  --neon-sun: #ffd23f;
  --sign-text: #fff2fa;
  --copy: #cbbfe8;

  background: var(--room);
  background-image: none;
}

.arcade-page header {
  background: rgba(14, 8, 28, 0.86);
  border-bottom-color: #2a1b4d;
}

.arcade-page nav a { color: var(--copy); }
.arcade-page nav a:hover { color: var(--neon-cyan); }

/* --------------------------------------------------------------------------
   The room
   -------------------------------------------------------------------------- */
.hall {
  --floor-h: clamp(170px, 26vh, 250px);
  position: relative;
  min-height: calc(100vh - 78px);
  min-height: calc(100svh - 78px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(28px, 5vh, 56px);
}

.hall__ceiling,
.hall__wall,
.hall__floor {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -3;
  pointer-events: none;
}

/* Dark ceiling with a few recessed downlights */
.hall__ceiling {
  top: 0;
  height: 22%;
  background:
    radial-gradient(ellipse 10% 70% at 18% 0%, rgba(255, 210, 140, 0.16), transparent 70%),
    radial-gradient(ellipse 10% 70% at 50% 0%, rgba(255, 210, 140, 0.14), transparent 70%),
    radial-gradient(ellipse 10% 70% at 82% 0%, rgba(255, 210, 140, 0.16), transparent 70%),
    linear-gradient(180deg, #07040f 0%, transparent 100%);
  z-index: -2;
}

/* Back wall: panelled, lit from below by the machines */
.hall__wall {
  top: 0;
  bottom: var(--floor-h);
  background:
    radial-gradient(ellipse 34% 40% at 50% 18%, rgba(255, 79, 163, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(120, 60, 220, 0.28), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 139px, rgba(0, 0, 0, 0.28) 139px 141px, rgba(255, 255, 255, 0.025) 141px 142px),
    linear-gradient(180deg, #150b2c 0%, var(--wall) 70%, #241448 100%);
}

/* Neon baseboard where the wall meets the carpet */
.hall__wall::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--neon-pink);
  box-shadow: 0 0 10px var(--neon-pink), 0 0 30px rgba(255, 79, 163, 0.6), 0 -20px 60px rgba(255, 79, 163, 0.25);
  opacity: 0.75;
}

/* Carpet, seen in perspective */
.hall__floor {
  bottom: 0;
  height: var(--floor-h);
  overflow: hidden;
  perspective: 520px;
  perspective-origin: 50% 0%;
  background: #08061c;
}

.hall__floor::before {
  content: '';
  position: absolute;
  left: -60%;
  right: -60%;
  top: 0;
  height: 260%;
  transform-origin: 50% 0%;
  transform: rotateX(62deg);
  background-color: var(--carpet);
  /* classic cosmic arcade carpet: scattered confetti, rings and stars */
  background-image:
    radial-gradient(circle at 20% 30%, var(--neon-pink) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 60%, var(--neon-cyan) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 45% 80%, var(--neon-sun) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 15%, transparent 0 5px, var(--neon-lime) 5.5px 7px, transparent 7.5px),
    radial-gradient(circle at 10% 75%, transparent 0 4px, #8a5cff 4.5px 6px, transparent 6.5px),
    linear-gradient(35deg, transparent 47.5%, rgba(255, 79, 163, 0.28) 48% 49%, transparent 49.5%);
  background-size: 90px 90px, 70px 70px, 110px 110px, 130px 130px, 150px 150px, 120px 120px;
}

/* Darken the carpet toward the far wall and the near edge */
.hall__floor::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 6, 28, 0.88) 0%, rgba(8, 6, 28, 0.42) 35%, rgba(8, 6, 28, 0.6) 100%),
    radial-gradient(ellipse 70% 120% at 50% 0%, transparent 40%, rgba(4, 2, 12, 0.7) 100%);
}

/* --------------------------------------------------------------------------
   Neon sign on the wall
   -------------------------------------------------------------------------- */
.sign {
  text-align: center;
  padding: 0 6vw;
  max-width: 900px;
}

.sign__neon {
  margin: 0;
  font-family: 'Tilt Neon', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, min(7vw, 9vh), 5.4rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--sign-text);
  text-shadow:
    0 0 2px #fff,
    0 0 8px var(--neon-pink),
    0 0 18px var(--neon-pink),
    0 0 36px rgba(255, 79, 163, 0.85),
    0 0 72px rgba(255, 79, 163, 0.55);
  animation: signOn 1.4s steps(1, end) both;
}

.sign__line { display: block; }

/* One tube on an old sign never quite settles */
.sign__line--b {
  animation: tubeBuzz 9s linear 2.2s infinite;
}

.sign__copy {
  margin: clamp(12px, 2.4vh, 22px) auto 0;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.62rem, 1.1vw, 0.8rem);
  letter-spacing: 0.14em;
  line-height: 1.6;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(54, 228, 255, 0.6);
}

@keyframes signOn {
  0%   { opacity: 0.08; text-shadow: none; }
  12%  { opacity: 1; }
  18%  { opacity: 0.15; text-shadow: none; }
  30%  { opacity: 1; }
  36%  { opacity: 0.3; text-shadow: none; }
  48%, 100% { opacity: 1; }
}

@keyframes tubeBuzz {
  0%, 93%, 95%, 97%, 100% { opacity: 1; }
  94%, 96% { opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   The row of machines
   -------------------------------------------------------------------------- */
.aisle {
  /* 1em = one cabinet unit; a cabinet is 16em wide. Scales with viewport height. */
  font-size: clamp(9px, min(1.42vh, 0.88vw), 14.5px);
  margin-top: auto;
  margin-bottom: calc(var(--floor-h) * 0.42);
  padding-top: 3.5em;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2.6em;
  position: relative;
  z-index: 1;
}

.cab {
  --d: 0s;
  position: relative;
  width: 16em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.changer { --d: 0.85s; }
.cab:nth-child(2) { --d: 1.05s; }
.cab:nth-child(3) { --d: 1.3s; }
.cab:nth-child(4) { --d: 1.55s; }
.cab:nth-child(5) { --d: 1.8s; }
.cab:nth-child(6) { --d: 2.05s; }

/* Backlit marquee on top */
.cab__marquee {
  width: calc(100% + 1.2em);
  height: 5em;
  display: grid;
  place-items: center;
  border-radius: 0.5em 0.5em 0.15em 0.15em;
  border: 0.25em solid var(--plastic);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%),
    radial-gradient(ellipse at 50% 50%, #fff 0%, var(--glow) 70%);
  box-shadow:
    0 0 1.2em rgba(var(--glow-rgb), 0.75),
    0 -1em 3.5em rgba(var(--glow-rgb), 0.35);
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}

.cab__title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.82em;
  line-height: 1.45;
  text-align: center;
  color: #160b2b;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Screen surround, cabinet sides trimmed in coloured T-molding */
.cab__bezel {
  width: 100%;
  height: 15.5em;
  padding: 1.1em;
  background:
    linear-gradient(90deg, #05030b 0 0.7em, transparent 0.7em calc(100% - 0.7em), #05030b calc(100% - 0.7em)),
    linear-gradient(180deg, #1a1230, var(--plastic));
  box-shadow:
    inset 0.22em 0 0 var(--glow),
    inset -0.22em 0 0 var(--glow),
    inset 0 0 2em rgba(0, 0, 0, 0.8);
  display: block;
}

/* CRT */
.cab__screen {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1.1em / 1.4em;
  background: radial-gradient(ellipse at 50% 45%, #0d1b33 0%, #04060f 85%);
  box-shadow:
    0 0 0 0.25em #000,
    0 0 1.6em rgba(var(--glow-rgb), 0.45),
    inset 0 0 2.2em rgba(0, 0, 0, 0.9);
  transition: filter 0.3s ease;
}

/* Scanlines + glass curvature highlight */
.cab__screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 30% 12%, rgba(255, 255, 255, 0.12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0 2px, transparent 2px 4px);
  border-radius: inherit;
  z-index: 5;
}

/* Power-on flash for each screen, staggered across the row */
.cab__screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 6;
  pointer-events: none;
  transform: scaleY(0);
  animation: crtFlash 0.55s ease-out var(--d) both;
}

.attract,
.cab__start,
.cab__soon-text {
  animation: crtOn 0.5s ease-out var(--d) both;
}

@keyframes crtFlash {
  0%   { transform: scaleY(0.004) scaleX(0); opacity: 1; }
  35%  { transform: scaleY(0.004) scaleX(1); opacity: 1; }
  60%  { transform: scaleY(1) scaleX(1); opacity: 0.6; }
  100% { transform: scaleY(1); opacity: 0; }
}

@keyframes crtOn {
  0%, 40% { opacity: 0; }
  100% { opacity: 1; }
}

.cab__start {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62em;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 0 0.6em var(--glow);
  z-index: 4;
}

.cab__start {
  animation: crtOn 0.5s ease-out var(--d) both, blink 1.6s steps(1, end) calc(var(--d) + 0.5s) infinite;
}

@keyframes blink {
  0%, 60% { visibility: visible; }
  61%, 100% { visibility: hidden; }
}

/* Control panel: sloped, wider than the cabinet */
.cab__panel {
  position: relative;
  width: calc(100% + 1.6em);
  height: 3.6em;
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, #2a1f47 0%, #170f2c 70%, #0b0716 100%);
  border-top: 0.2em solid var(--glow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1em;
}

.stick {
  position: relative;
  width: 2em;
  height: 1.1em;
  border-radius: 50%;
  background: #05030b;
  margin-right: 1.2em;
}

.stick::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 45%;
  width: 0.35em;
  height: 1.5em;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #666, #ddd, #555);
  border-radius: 0.2em;
}

.stick::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1.4em;
  width: 1.3em;
  height: 1.3em;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--neon-pink) 30%, #8a0f4d 100%);
}

.cab--pendulum .stick::after { background: radial-gradient(circle at 35% 30%, #fff 0%, var(--neon-sun) 30%, #8a5d00 100%); }
.cab--edge .stick::after { background: radial-gradient(circle at 35% 30%, #fff 0%, var(--neon-cyan) 30%, #035e75 100%); }

.pbtn {
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--glow) 35%, rgba(0, 0, 0, 0.6) 100%);
  box-shadow: 0 0.2em 0 #05030b, 0 0 0.6em rgba(var(--glow-rgb), 0.6);
}

.pbtn--b {
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--neon-pink) 35%, rgba(0, 0, 0, 0.6) 100%);
  box-shadow: 0 0.2em 0 #05030b, 0 0 0.6em rgba(255, 79, 163, 0.6);
}

/* Lower body with coin door */
.cab__body {
  width: 100%;
  height: 10em;
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, #05030b 0 0.7em, transparent 0.7em calc(100% - 0.7em), #05030b calc(100% - 0.7em)),
    linear-gradient(180deg, #120b24 0%, #08050f 100%);
  box-shadow:
    inset 0.22em 0 0 var(--glow),
    inset -0.22em 0 0 var(--glow),
    0 1.2em 1.4em -0.6em rgba(0, 0, 0, 0.9);
  border-radius: 0 0 0.2em 0.2em;
}

.coin-door {
  width: 5.4em;
  height: 6.2em;
  border-radius: 0.3em;
  background: linear-gradient(180deg, #34304a, #1c192b);
  border: 0.12em solid #4a4566;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
}

.coin-slot {
  width: 1.2em;
  height: 2em;
  border-radius: 0.2em;
  background: #ff2d4f;
  box-shadow: 0 0 0.8em #ff2d4f, inset 0 0 0 0.35em #b3001f;
  position: relative;
}

.coin-slot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0.4em;
  bottom: 0.4em;
  width: 0.14em;
  transform: translateX(-50%);
  background: #1a0006;
}

.coin-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.42em;
  line-height: 1.3;
  color: #ffd7de;
  text-align: center;
  letter-spacing: 0.04em;
}

/* Light the machine throws onto the carpet */
.cab__pool {
  position: absolute;
  left: 50%;
  top: calc(100% - 1.4em);
  width: 26em;
  height: 9em;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--glow-rgb), 0.38) 0%, rgba(var(--glow-rgb), 0.12) 40%, transparent 70%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s ease;
  animation: crtOn 0.6s ease-out var(--d) both;
}

/* --------------------------------------------------------------------------
   Attract-mode screens
   -------------------------------------------------------------------------- */
.attract {
  position: absolute;
  inset: 0;
  display: block;
}

/* Chrono Pendulum: a bob swings past a target ring */
.attract--pendulum { --arm: 54%; }

.pend__pivot {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 0.9em;
  height: 0.9em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0.6em var(--neon-cyan);
}

.pend__arm,
.pend__target {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 0;
  height: var(--arm);
  transform-origin: 50% 0;
}

.pend__arm {
  border-left: 0.16em solid rgba(214, 248, 255, 0.85);
  margin-left: -0.08em;
  animation: swing 2.6s ease-in-out infinite alternate;
}

.pend__bob {
  position: absolute;
  left: 50%;
  bottom: -1.05em;
  width: 2.1em;
  height: 2.1em;
  margin-left: -1.13em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--neon-cyan) 45%, #046b85 100%);
  box-shadow: 0 0 1em var(--neon-cyan), 0 0 2.4em rgba(54, 228, 255, 0.5);
}

.pend__target { transform: rotate(-18deg); }

.pend__ring {
  position: absolute;
  left: 0;
  bottom: -1.5em;
  width: 3em;
  height: 3em;
  margin-left: -1.5em;
  border-radius: 50%;
  border: 0.18em dashed var(--neon-sun);
  box-shadow: 0 0 0.8em rgba(255, 210, 63, 0.6);
  animation: ringPulse 2.6s ease-in-out infinite;
}

@keyframes swing {
  from { transform: rotate(34deg); }
  to   { transform: rotate(-34deg); }
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* Edge Rush: four paddles, one per side; the ball ricochets between them */
.attract--edge {
  inset: 13% 13% 22% 13%;
  border: 1px solid rgba(182, 255, 59, 0.22);
  background:
    linear-gradient(rgba(182, 255, 59, 0.07) 1px, transparent 1px) 0 0 / 1.4em 1.4em,
    linear-gradient(90deg, rgba(182, 255, 59, 0.07) 1px, transparent 1px) 0 0 / 1.4em 1.4em;
}

.edge__tile {
  position: absolute;
  border-radius: 1em;
  background: rgba(54, 228, 255, 0.45);
  animation: 3.2s ease-in-out infinite;
}

/* Four paddles, each stuck to its own side, sliding to meet the ball */
.edge__tile--t, .edge__tile--b { width: 30%; height: 4.5%; margin-left: -15%; }
.edge__tile--l, .edge__tile--r { height: 30%; width: 4.5%; margin-top: -15%; }
.edge__tile--t { top: 2.5%; animation-name: padT; }
.edge__tile--b { bottom: 2.5%; animation-name: padB; }
.edge__tile--l { left: 2.5%; animation-name: padL; }
.edge__tile--r { right: 2.5%; animation-name: padR; }

.edge__ball {
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  margin: -0.55em 0 0 -0.55em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0.6em var(--neon-lime), 0 0 1.4em var(--neon-lime);
  animation: ricochet 3.2s linear infinite;
}

@keyframes ricochet {
  0%   { left: 12%; top: 46%; }
  25%  { left: 47%; top: 12%; }
  50%  { left: 88%; top: 60%; }
  75%  { left: 56%; top: 88%; }
  100% { left: 12%; top: 46%; }
}

/* Each paddle lights up (it's the one being steered) as it slides into place, then hits */
@keyframes padT {
  0%, 6%    { left: 72%; background: rgba(54, 228, 255, 0.45); box-shadow: none; }
  10%, 25%  { background: var(--neon-lime); box-shadow: 0 0 0.9em var(--neon-lime); }
  22%, 100% { left: 47%; }
  32%       { background: rgba(54, 228, 255, 0.45); box-shadow: none; }
}
@keyframes padR {
  0%, 31%   { top: 30%; background: rgba(54, 228, 255, 0.45); box-shadow: none; }
  35%, 50%  { background: var(--neon-lime); box-shadow: 0 0 0.9em var(--neon-lime); }
  47%, 100% { top: 60%; }
  57%       { background: rgba(54, 228, 255, 0.45); box-shadow: none; }
}
@keyframes padB {
  0%, 56%   { left: 28%; background: rgba(54, 228, 255, 0.45); box-shadow: none; }
  60%, 75%  { background: var(--neon-lime); box-shadow: 0 0 0.9em var(--neon-lime); }
  72%, 100% { left: 56%; }
  82%       { background: rgba(54, 228, 255, 0.45); box-shadow: none; }
}
@keyframes padL {
  0%        { top: 46%; background: var(--neon-lime); box-shadow: 0 0 0.9em var(--neon-lime); }
  7%, 81%   { background: rgba(54, 228, 255, 0.45); box-shadow: none; }
  15%, 80%  { top: 72%; }
  85%, 100% { background: var(--neon-lime); box-shadow: 0 0 0.9em var(--neon-lime); }
  97%, 100% { top: 46%; }
}


/* Hoop Rush: a ball arcs up and drops through the net */
.attract--hoop { --ball: 2.3em; }

.hoop__board {
  position: absolute;
  left: 50%;
  top: 9%;
  width: 46%;
  height: 32%;
  transform: translateX(-50%);
  border: 0.22em solid rgba(255, 255, 255, 0.85);
  border-radius: 0.2em;
  background: rgba(120, 160, 255, 0.08);
  box-shadow: 0 0 0.8em rgba(255, 255, 255, 0.25);
}

.hoop__board::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 40%;
  height: 34%;
  transform: translateX(-50%);
  border: 0.18em solid #ff7a1f;
}

.hoop__rim {
  position: absolute;
  left: 50%;
  top: 41%;
  width: 30%;
  height: 0.9em;
  transform: translateX(-50%);
  border: 0.24em solid #ff5b1c;
  border-radius: 50%;
  box-shadow: 0 0 0.7em rgba(255, 91, 28, 0.7);
  z-index: 3;
}

.hoop__net {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 28%;
  height: 20%;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  background:
    repeating-linear-gradient(60deg, rgba(240, 240, 248, 0.75) 0 1px, transparent 1px 0.55em),
    repeating-linear-gradient(-60deg, rgba(240, 240, 248, 0.75) 0 1px, transparent 1px 0.55em);
  transform-origin: 50% 0;
  animation: netSwish 2.4s ease-out infinite;
  z-index: 2;
}

.hoop__ball {
  position: absolute;
  width: var(--ball);
  height: var(--ball);
  margin: calc(var(--ball) / -2) 0 0 calc(var(--ball) / -2);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 47%, rgba(30, 14, 6, 0.85) 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(30, 14, 6, 0.85) 47% 53%, transparent 53%),
    radial-gradient(circle at 35% 30%, #ffb07a 0%, #e8661f 45%, #8e3508 100%);
  box-shadow: 0 0 0.9em rgba(255, 140, 40, 0.55);
  animation: shot 2.4s linear infinite;
  z-index: 1;
}

/* Up from the bottom left, over the rim, down through the net */
@keyframes shot {
  0%   { left: 14%; top: 92%; opacity: 0; transform: rotate(0deg); animation-timing-function: ease-out; }
  6%   { opacity: 1; }
  38%  { left: 40%; top: 14%; transform: rotate(200deg); animation-timing-function: ease-in; }
  56%  { left: 50%; top: 36%; transform: rotate(300deg); animation-timing-function: linear; }
  70%  { left: 50%; top: 62%; opacity: 1; transform: rotate(340deg); }
  78%, 100% { left: 50%; top: 74%; opacity: 0; transform: rotate(360deg); }
}

@keyframes netSwish {
  0%, 54%, 100% { transform: translateX(-50%) scaleY(1); }
  62% { transform: translateX(-50%) scaleY(1.22) scaleX(0.9); }
  72% { transform: translateX(-50%) scaleY(0.96); }
}

.cab--hoop .stick::after { background: radial-gradient(circle at 35% 30%, #fff 0%, #ff7a1f 30%, #8a2d00 100%); }


/* Hedgie Bonk: hedgehogs pop out of holes, the hammer finds them */
.hb__field {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 46%;
  bottom: 16%;
  border-radius: 0.6em;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 246, 214, 0.5) 0 0.12em, transparent 0.16em) 0 0 / 2.2em 2.2em,
    linear-gradient(180deg, #2f9a4c, #1f6e36);
  box-shadow: inset 0 0 0 0.2em #ffcf33;
}

.hb__hole {
  position: absolute;
  top: 34%;
  width: 24%;
  height: 34%;
  overflow: hidden;
  z-index: 2;
}

/* the dark hole the hog rises out of */
.hb__hole::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 26%;
  border-radius: 50%;
  background: #050205;
  box-shadow: 0 0 0 0.16em #241a1e;
  z-index: -1;
}

.hb__hole--a { left: 10%; }
.hb__hole--b { left: 38%; }
.hb__hole--c { left: 66%; }

.hb__hog {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 10%;
  height: 72%;
  border-radius: 50% 50% 42% 42%;
  background:
    radial-gradient(circle at 36% 58%, #0e0806 0 5%, transparent 6%),
    radial-gradient(circle at 64% 58%, #0e0806 0 5%, transparent 6%),
    radial-gradient(circle at 50% 72%, #0e0806 0 6%, transparent 7%),
    radial-gradient(ellipse 46% 40% at 50% 66%, #f1d0a3 0 98%, transparent 100%),
    repeating-conic-gradient(from 0deg at 50% 70%, #3a2416 0 7deg, #6b4429 7deg 14deg);
  transform: translateY(110%);
  animation: 3s ease-out infinite;
}

.hb__hole--a .hb__hog { animation-name: hogA; }
.hb__hole--b .hb__hog { animation-name: hogB; }
.hb__hole--c .hb__hog { animation-name: hogC; }

@keyframes hogA {
  0%   { transform: translateY(110%); }
  6%, 16% { transform: translateY(0); }
  18%  { transform: translateY(0) scaleY(0.55); }
  26%, 100% { transform: translateY(110%); }
}
@keyframes hogB {
  0%, 66% { transform: translateY(110%); }
  72%, 82% { transform: translateY(0); }
  84%  { transform: translateY(0) scaleY(0.55); }
  92%, 100% { transform: translateY(110%); }
}
@keyframes hogC {
  0%, 33% { transform: translateY(110%); }
  39%, 49% { transform: translateY(0); }
  51%  { transform: translateY(0) scaleY(0.55); }
  59%, 100% { transform: translateY(110%); }
}

/* Plastic hammer: hovers, then bonks the hog that's up */
.hb__hammer {
  position: absolute;
  top: 24%;
  width: 3.6em;
  height: 1.6em;
  margin-left: -1.8em;
  border-radius: 0.5em;
  background: repeating-linear-gradient(90deg, #ea2430 0 0.5em, #ff4b52 0.5em 0.8em);
  box-shadow: inset 0 0 0 0.18em #ffd23a;
  transform-origin: 50% -275%;
  animation: hammerBonk 3s ease-in-out infinite;
  z-index: 3;
}

.hb__hammer::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0.45em;
  height: 4.4em;
  margin-left: -0.22em;
  border-radius: 0.2em;
  background: linear-gradient(0deg, #ffd23a, #e0b020 70%, #2a7bff 70%);
}

@keyframes hammerBonk {
  0%       { left: 50%; transform: rotate(24deg); }
  10%      { left: 22%; transform: rotate(24deg); }
  16%      { left: 22%; transform: rotate(-6deg) translateY(1.4em); }
  22%      { left: 22%; transform: rotate(24deg); }
  43%      { left: 78%; transform: rotate(24deg); }
  49%      { left: 78%; transform: rotate(-6deg) translateY(1.4em); }
  55%      { left: 78%; transform: rotate(24deg); }
  76%      { left: 50%; transform: rotate(24deg); }
  82%      { left: 50%; transform: rotate(-6deg) translateY(1.4em); }
  88%, 100% { left: 50%; transform: rotate(24deg); }
}

.cab--hedgie .stick::after { background: radial-gradient(circle at 35% 30%, #fff 0%, #ffcf33 30%, #8a6a00 100%); }


/* Water Ring Toss: bubbles rise, rings drift up and drop onto the pegs */
.wr__water {
  position: absolute;
  inset: 8% 8% 18% 8%;
  border-radius: 0.6em;
  background: linear-gradient(180deg, #8fe9ee 0%, #27a8bb 100%);
  box-shadow: inset 0 0 0 0.2em rgba(255, 255, 255, 0.5);
}

.wr__peg {
  position: absolute;
  bottom: 22%;
  width: 0.45em;
  height: 38%;
  margin-left: -0.22em;
  border-radius: 0.3em 0.3em 0 0;
  background: linear-gradient(90deg, #d9eef0, #fff, #a9cfd4);
  z-index: 2;
}

.wr__peg--l { left: 36%; }
.wr__peg--r { left: 64%; }

.wr__ring {
  position: absolute;
  width: 2.6em;
  height: 0.8em;
  margin: -0.4em 0 0 -1.3em;
  border-radius: 50%;
  border: 0.32em solid var(--c);
  box-shadow: inset 0 -0.08em 0 rgba(0, 0, 0, 0.25);
  z-index: 3;
  animation: 3.6s ease-in-out infinite;
}

.wr__ring--a { --c: #ffd23f; animation-name: ringA; }
.wr__ring--b { --c: #ff4d6d; animation-name: ringB; }
.wr__ring--c { --c: #6fd24a; animation-name: ringC; }

/* lifted by the bubbles, tumbling, then settling on a peg */
@keyframes ringA {
  0%   { left: 22%; top: 74%; transform: rotate(30deg); }
  30%  { left: 30%; top: 26%; transform: rotate(-20deg); }
  48%  { left: 36%; top: 38%; transform: rotate(0deg); }
  70%, 92% { left: 36%; top: 72%; transform: rotate(0deg); }
  100% { left: 22%; top: 74%; transform: rotate(30deg); }
}
@keyframes ringB {
  0%   { left: 78%; top: 72%; transform: rotate(-25deg); }
  35%  { left: 70%; top: 22%; transform: rotate(15deg); }
  55%  { left: 64%; top: 36%; transform: rotate(0deg); }
  75%, 92% { left: 64%; top: 72%; transform: rotate(0deg); }
  100% { left: 78%; top: 72%; transform: rotate(-25deg); }
}
@keyframes ringC {
  0%   { left: 50%; top: 70%; transform: rotate(10deg); }
  40%  { left: 46%; top: 30%; transform: rotate(60deg); }
  70%  { left: 54%; top: 50%; transform: rotate(-30deg); }
  100% { left: 50%; top: 70%; transform: rotate(10deg); }
}

.wr__bubbles {
  position: absolute;
  inset: 10% 10% 20% 10%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 0.12em, transparent 0.18em) 0.4em 0 / 2.1em 2.4em,
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 0.08em, transparent 0.14em) 1.3em 0.9em / 1.7em 2em;
  animation: bubblesUp 1.6s linear infinite;
  opacity: 0.8;
  z-index: 1;
}

@keyframes bubblesUp {
  from { background-position: 0.4em 0, 1.3em 0.9em; }
  to   { background-position: 0.4em -2.4em, 1.3em -1.1em; }
}

.cab--rings .stick::after { background: radial-gradient(circle at 35% 30%, #fff 0%, #ff86b0 30%, #8a1f4a 100%); }

/* Coming soon: a screen of static */
.attract--static {
  opacity: 0.5;
  background:
    repeating-radial-gradient(circle at 17% 32%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 73% 61%, rgba(255, 79, 163, 0.5) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 41% 87%, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 2px);
  background-size: 37px 41px, 53px 29px, 23px 31px;
  animation: crtOn 0.5s ease-out var(--d) both, staticNoise 0.35s steps(4) infinite;
}

@keyframes staticNoise {
  0%   { background-position: 0 0, 0 0, 0 0; }
  25%  { background-position: 11px 7px, -13px 9px, 5px -8px; }
  50%  { background-position: -9px 13px, 7px -11px, -12px 4px; }
  75%  { background-position: 14px -5px, -6px -14px, 9px 12px; }
  100% { background-position: 0 0, 0 0, 0 0; }
}

.cab__soon-text {
  isolation: isolate;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.66em;
  line-height: 1.6;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 0.6em var(--neon-pink), 0 0 2px #000;
  z-index: 4;
}

.cab__soon-text::before {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  top: 38%;
  bottom: 38%;
  background: rgba(10, 4, 20, 0.82);
  border: 1px solid rgba(255, 79, 163, 0.5);
  z-index: -1;
}

.cab--soon {
  cursor: default;
  filter: saturate(0.75) brightness(0.82);
}

/* --------------------------------------------------------------------------
   Walking up to a machine
   -------------------------------------------------------------------------- */
.cab:not(.cab--soon):hover,
.cab:not(.cab--soon):focus-visible {
  transform: translateY(-0.5em) scale(1.035);
}

.cab:not(.cab--soon):hover .cab__marquee,
.cab:not(.cab--soon):focus-visible .cab__marquee {
  filter: brightness(1.15);
  box-shadow: 0 0 1.8em rgba(var(--glow-rgb), 1), 0 -1.4em 5em rgba(var(--glow-rgb), 0.6);
}

.cab:not(.cab--soon):hover .cab__screen,
.cab:not(.cab--soon):focus-visible .cab__screen {
  filter: brightness(1.25) saturate(1.2);
}

.cab:not(.cab--soon):hover .cab__start,
.cab:not(.cab--soon):focus-visible .cab__start {
  animation: blink 0.5s steps(1, end) infinite;
  color: var(--neon-sun);
}

.cab:not(.cab--soon):hover .cab__pool,
.cab:not(.cab--soon):focus-visible .cab__pool {
  transform: translateX(-50%) scale(1.2);
}

.cab:focus-visible .cab__bezel {
  outline: 0.25em solid var(--neon-sun);
  outline-offset: 0.5em;
}

/* Coin dropped: screen flashes, machine dips */
.cab.is-coined .cab__screen { animation: coinFlash 0.35s ease-out; }
.cab.is-coined { transform: translateY(0.2em) scale(1.02); }

@keyframes coinFlash {
  0% { filter: brightness(3) saturate(0); }
  100% { filter: brightness(1.25); }
}

/* --------------------------------------------------------------------------
   Coin machine (change machine by the entrance)
   -------------------------------------------------------------------------- */
.changer {
  position: relative;
  width: 12.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.changer .cab__marquee { height: 4.2em; }
.changer .cab__title { font-size: 0.95em; letter-spacing: 0.12em; }

/* Brushed-metal front panel */
.changer__face {
  width: 100%;
  height: 19.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 1.2em 0.9em;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #3a3550 0%, #24203a 55%, #1a1630 100%);
  box-shadow:
    inset 0.22em 0 0 var(--glow),
    inset -0.22em 0 0 var(--glow),
    inset 0 0 1.4em rgba(0, 0, 0, 0.6);
}

/* LED readout */
.changer__display {
  width: 100%;
  height: 3.2em;
  display: grid;
  place-items: center;
  border-radius: 0.3em;
  background: #120404;
  box-shadow: inset 0 0 0.8em #000, 0 0 0 0.2em #0b0716;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85em;
  letter-spacing: 0.12em;
  color: #ff5a3c;
  text-shadow: 0 0 0.5em rgba(255, 90, 60, 0.9);
  animation: crtOn 0.5s ease-out var(--d) both;
}

.changer__display.win { color: #ffd23f; text-shadow: 0 0 0.6em rgba(255, 210, 63, 0.95); }
.changer__display.jackpot { animation: jackpot 0.25s steps(1, end) 6; }

@keyframes jackpot { 50% { color: #fff; background: #3a1d00; } }

/* The big push button */
.changer__btn {
  position: relative;
  width: 6.6em;
  height: 6.6em;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(circle at 50% 55%, #0b0716 60%, #2b2540 61%, #0b0716 72%);
  -webkit-tap-highlight-color: transparent;
}

.changer__btn-cap {
  position: absolute;
  inset: 0.7em;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff6c8 0%, var(--neon-sun) 32%, #c98a00 100%);
  box-shadow: 0 0.55em 0 #7a5200, 0 0.6em 1.4em rgba(0, 0, 0, 0.6), 0 0 1.6em rgba(255, 210, 63, 0.55);
  transform: translateY(-0.45em);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.changer__btn:hover .changer__btn-cap { filter: brightness(1.08); }
.changer__btn:active .changer__btn-cap,
.changer__btn.is-pressed .changer__btn-cap {
  transform: translateY(0);
  box-shadow: 0 0.1em 0 #7a5200, 0 0 2.2em rgba(255, 210, 63, 0.8);
}

.changer__btn:focus-visible { outline: 0.25em solid var(--neon-sun); outline-offset: 0.35em; }
.changer__btn:disabled { cursor: progress; }

.changer__plate {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.48em;
  line-height: 1.7;
  text-align: center;
  color: #e9e2ff;
  padding: 0.7em 1em;
  border-radius: 0.3em;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 210, 63, 0.4);
}

/* Coin chute and tray */
.changer__chute {
  position: relative;
  width: 100%;
  height: 10em;
  background: linear-gradient(180deg, #1b1630 0%, #0c0918 100%);
  box-shadow:
    inset 0.22em 0 0 var(--glow),
    inset -0.22em 0 0 var(--glow),
    0 1.2em 1.4em -0.6em rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.changer__mouth {
  margin-top: 1.2em;
  width: 5em;
  height: 1.3em;
  border-radius: 0.3em;
  background: #000;
  box-shadow: inset 0 0.4em 0.6em rgba(0, 0, 0, 0.9), 0 0 0 0.25em #3a3550;
}

.changer__tray {
  position: relative;
  margin-top: 2.2em;
  width: 8.4em;
  height: 3.6em;
  border-radius: 0 0 1.2em 1.2em;
  background: linear-gradient(180deg, #0a0712 0%, #221c38 100%);
  box-shadow: inset 0 0.6em 0.8em rgba(0, 0, 0, 0.9), 0 0 0 0.25em #3a3550;
  overflow: visible;
}

/* A dispensed coin: falls from the mouth into the tray, then flies off to the counter */
.drop-coin {
  position: absolute;
  left: var(--x, 50%);
  bottom: 0.5em;
  width: 1.7em;
  height: 1.7em;
  margin-left: -0.85em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8 0%, #ffd23f 38%, #c98a00 100%);
  box-shadow: inset 0 0 0 0.18em #e8a800, 0 0 0.7em rgba(255, 210, 63, 0.7);
  animation: coinFall 0.42s cubic-bezier(0.5, 0, 0.75, 1) both;
  z-index: 3;
}

.drop-coin.collect { animation: coinCollect 0.55s ease-in forwards; }

@keyframes coinFall {
  0%   { transform: translateY(-5.4em) scaleX(0.35); opacity: 0; }
  15%  { opacity: 1; }
  80%  { transform: translateY(0) scaleX(1); }
  90%  { transform: translateY(-0.35em) scaleX(1); }
  100% { transform: translateY(0) scaleX(1); }
}

@keyframes coinCollect {
  to { transform: translateY(-14em) scale(0.5); opacity: 0; }
}

/* Wallet not empty: the button is dimmed and the machine refuses */
.changer.locked .changer__btn-cap { filter: saturate(0.35) brightness(0.7); box-shadow: 0 0.55em 0 #4a3a10, 0 0.6em 1.4em rgba(0, 0, 0, 0.6); }
.changer.locked .changer__display { color: #8a5a50; text-shadow: none; }
.changer.refuse { animation: refuse 0.35s; }

/* Out of coins: the machine calls for attention */
.changer.call .changer__btn-cap { animation: callPulse 0.5s ease-in-out 4; }
.changer.call .cab__marquee { filter: brightness(1.25); }

@keyframes callPulse {
  50% { box-shadow: 0 0.55em 0 #7a5200, 0 0 3em rgba(255, 210, 63, 1), 0 0 0 0.5em rgba(255, 210, 63, 0.35); }
}

/* A cabinet with no coin: slot flashes, machine shakes */
.cab.no-coin { animation: refuse 0.35s; }
.cab.no-coin .coin-slot { animation: slotFlash 0.2s steps(1, end) 4; }

@keyframes refuse {
  25% { transform: translateX(-0.35em); }
  50% { transform: translateX(0.3em); }
  75% { transform: translateX(-0.2em); }
}

@keyframes slotFlash { 50% { background: #fff; box-shadow: 0 0 1.4em #ff2d4f; } }

/* Coin going into a cabinet's slot */
.slot-coin {
  position: absolute;
  left: 50%;
  top: -2.4em;
  width: 1.5em;
  height: 1.5em;
  margin-left: -0.75em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8 0%, #ffd23f 38%, #c98a00 100%);
  box-shadow: inset 0 0 0 0.16em #e8a800, 0 0 0.6em rgba(255, 210, 63, 0.7);
  animation: intoSlot 0.36s ease-in forwards;
  pointer-events: none;
}

.coin-door { position: relative; }

@keyframes intoSlot {
  0%   { transform: translateY(0) scaleX(1); opacity: 1; }
  70%  { transform: translateY(2.6em) scaleX(0.25); opacity: 1; }
  100% { transform: translateY(3em) scaleX(0.15); opacity: 0; }
}

/* Message line under the machines */
.hall-toast {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 12px);
  margin: 0;
  max-width: min(92vw, 520px);
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(14, 8, 28, 0.92);
  border: 1px solid rgba(255, 210, 63, 0.5);
  color: #ffe58a;
  font: 400 0.62rem/1.6 'Press Start 2P', monospace;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5;
}

.hall-toast.show { opacity: 1; transform: translate(-50%, 0); }

.arcade-page nav .coin-chip { color: #ffe58a; }
.arcade-page nav .coin-chip:hover { color: #fff3c4; }

/* --------------------------------------------------------------------------
   People on the floor, watching
   -------------------------------------------------------------------------- */
.crowd {
  position: absolute;
  inset: auto 0 0 0;
  height: min(36vh, 300px);
  pointer-events: none;
  z-index: 2;
}

.onlooker {
  position: absolute;
  bottom: -2%;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 -0.2em 1.2em rgba(0, 0, 0, 0.6));
}

/* Standing at the edges of the room, just in front of the row (never over the coin tray) */
.onlooker--l { left: -60px; height: 80%; }
.onlooker--r { right: -60px; height: 88%; }

/* --------------------------------------------------------------------------
   Rest of the page, tinted to match the room
   -------------------------------------------------------------------------- */
.arcade-page .ad-slot {
  margin: 0;
  padding: 0 6vw;
  border-color: #2a1b4d;
  background: #0d0720;
  color: #6f6394;
}

.arcade-page .about {
  background: #170d2e;
  border-color: #2a1b4d;
}

.arcade-page .about-subtext { color: var(--copy); }
.arcade-page .about-subtext a { color: var(--neon-cyan); }

.arcade-page footer {
  background: var(--room);
  border-top-color: #2a1b4d;
}

/* --------------------------------------------------------------------------
   Smaller screens: walk down the aisle by swiping
   -------------------------------------------------------------------------- */
@media (max-width: 1700px) {
  .crowd { display: none; }
}

@media (max-width: 820px) {
  .hall {
    --floor-h: 190px;
    min-height: 0;
    padding-top: 30px;
  }

  .aisle {
    font-size: 12px;
    width: 100%;
    justify-content: flex-start;
    gap: 2.6em;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 2.2em calc(50% - 8em) 0;
    margin-top: 18px;
    margin-bottom: 70px;
  }

  .aisle::-webkit-scrollbar { display: none; }

  .cab,
  .changer {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  .cab__pool { width: 20em; }

  /* A scrolling row clips wide glows, so keep the marquee glow tight here */
  .cab__marquee,
  .cab:not(.cab--soon):hover .cab__marquee,
  .cab:not(.cab--soon):focus-visible .cab__marquee {
    box-shadow: 0 0 1em rgba(var(--glow-rgb), 0.8);
  }
}

@media (max-width: 380px) {
  .aisle { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Reduced motion: lights on, nothing moving
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sign__neon,
  .sign__line--b,
  .cab__screen::before,
  .attract,
  .attract--static,
  .cab__start,
  .cab__soon-text,
  .cab__pool,
  .pend__arm,
  .pend__ring,
  .hoop__ball,
  .hoop__net,
  .hb__hog,
  .hb__hammer,
  .wr__ring,
  .wr__bubbles,
  .edge__ball,
  .edge__tile {
    animation: none !important;
  }

  .cab__screen::before { display: none; }
  .pend__arm { transform: rotate(18deg); }
  .edge__ball { left: 47%; top: 11%; }
  .hoop__ball { left: 50%; top: 30%; }
  .hb__hole--b .hb__hog { transform: translateY(0); }
  .hb__hammer { left: 50%; transform: rotate(24deg); }
  .wr__ring--a { left: 36%; top: 72%; }
  .wr__ring--b { left: 64%; top: 72%; }
  .wr__ring--c { left: 50%; top: 40%; }
  .edge__tile--t { left: 47%; background: var(--neon-lime); }
  .edge__tile--b { left: 56%; }
  .edge__tile--l { top: 46%; }
  .edge__tile--r { top: 60%; }
  .cab { transition: none; }
  .drop-coin, .slot-coin, .changer__display { animation-duration: 0.01s !important; }
  .cab.no-coin, .changer.call .changer__btn-cap, .changer.refuse { animation: none; }
}