/* The arcade hall: a cozy room with one cabinet per mini game. arcade-hall.js builds the cabinets from CABINETS, and each
   one takes its colours from --cab-body, --cab-shade, --cab-trim, --cab-glow and --cab-screen. Cabinet sizes use cqi
   (1% of the cabinet's width), so a cabinet keeps its proportions at every width. */

.arcade-view, .screen.in-cabinet, .arcade-ticket { --ink: #1b1323; }

/* The room */
.arcade-view {
  position: relative;
  overflow: hidden;
  overflow: clip;
  border: 5px solid var(--ink);
  border-radius: 22px;
  background: #221930;
  box-shadow: 0 6px 0 #120c19, 0 18px 34px #2a1d3a40;
  isolation: isolate;
}
/* Fades the hall to dark while the view zooms into a cabinet's screen. */
.arcade-view::after { content: ''; position: absolute; inset: 0; z-index: 10; background: #07050b; opacity: 0; pointer-events: none; transition: opacity .28s ease-in .04s; }
.arcade-view.is-dark::after { opacity: 1; }
.arcade-room {
  position: relative;
  padding-top: 28px;
  background:
    radial-gradient(ellipse 55% 40% at 50% 0, #ffcf8a30, transparent 70%),
    radial-gradient(circle, #ffffff0b 1.5px, transparent 2.5px) 0 0 / 28px 28px,
    linear-gradient(#2c2142, #251b37 55%, #1d1529);
  transition: transform .32s cubic-bezier(.55, 0, .9, .45);
}
.arcade-room.is-zoomed { transform: translate(var(--zoom-x), var(--zoom-y)) scale(var(--zoom)); }
.arcade-room.is-busy .arcade-row { pointer-events: none; }
.arcade-view.is-instant .arcade-room, .arcade-view.is-instant::after { transition: none; }
.arcade-view.is-returning .arcade-room { transition: transform .5s cubic-bezier(.15, .7, .3, 1); }
.arcade-view.is-returning::after { transition: opacity .42s ease-out; }

/* Warm string lights along the ceiling. */
.arcade-bulbs {
  position: absolute;
  top: 4px;
  left: -8px;
  right: -8px;
  height: 22px;
  background:
    radial-gradient(circle at 50% 13px, #fff7d6 0 2.5px, #ffc65a 3.5px 4.5px, #ffc65a44 6px, transparent 10px) 0 0 / 36px 22px repeat-x,
    linear-gradient(#120d18, #120d18) 0 8px / 100% 2px no-repeat;
}

/* Neon signs on the back wall. */
.arcade-signs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 14px; padding: 10px 16px 0; }
.arcade-leaf {
  width: clamp(40px, 6vw, 54px);
  height: auto;
  overflow: visible;
  fill: none;
  stroke: #a6ffcb;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px #d8ffe8) drop-shadow(0 0 7px #31e88a) drop-shadow(0 0 16px #1fbf6c);
  animation: neon-hum 11s linear -4s infinite;
}
.arcade-neon {
  margin: 0 -.14em 0 0;
  color: #fff1f8;
  font: 900 clamp(36px, 7vw, 58px)/1.05 Nunito, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 0 2px #fff, 0 0 8px #ff6fb0, 0 0 18px #ff3d96, 0 0 38px #e0287c;
  animation: neon-hum 9s linear infinite;
}
.arcade-tagline { flex-basis: 100%; margin: 4px 0 0; color: #ffd9a3; font: 800 12px/1.3 Nunito, system-ui, sans-serif; letter-spacing: .2em; text-align: center; text-transform: uppercase; text-shadow: 0 0 8px #ffb35a88; }

/* The checkered floor recedes towards the wall; the cabinets stand on it. */
.arcade-floor { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 22%; overflow: hidden; border-top: 6px solid #150f1c; background: #8a3d27; perspective: 260px; perspective-origin: 50% -40%; }
.arcade-floor::before {
  content: '';
  position: absolute;
  left: -100%;
  right: -100%;
  bottom: 0;
  height: 420%;
  background: conic-gradient(#e6a75a 0 25%, #ad4a2e 0 50%, #e6a75a 0 75%, #ad4a2e 0) 50% 100% / 56px 56px;
  transform: rotateX(64deg);
  transform-origin: 50% 100%;
}
.arcade-floor::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#150f1cdd, #150f1c55 35%, transparent 75%), radial-gradient(ellipse 60% 120% at 50% 120%, #ffce8a3a, transparent 70%); }

/* The row of cabinets. It never squashes them: on narrow screens it scrolls sideways and snaps to each one. */
.arcade-row-wrap { position: relative; z-index: 1; }
.arcade-row {
  --gap: clamp(14px, 1.8vw, 22px);
  position: relative;
  display: flex;
  gap: var(--gap);
  padding: 30px clamp(14px, 3vw, 26px) 26px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(14px, 3vw, 26px);
  scrollbar-width: none;
}
.arcade-row::-webkit-scrollbar { display: none; }
.arcade-row > :first-child { margin-left: auto; }
.arcade-row > :last-child { margin-right: auto; }
.arcade-row.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px); mask-image: linear-gradient(90deg, transparent, #000 34px); }
.arcade-row.more-right { -webkit-mask-image: linear-gradient(270deg, transparent, #000 34px); mask-image: linear-gradient(270deg, transparent, #000 34px); }
.arcade-row.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, transparent, #000 34px calc(100% - 34px), transparent); }
.arcade-scroll { position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -19px; padding: 0 0 3px; border: 3px solid #1b1323; border-radius: 50%; background: #fff3d1; color: #3b2a4a; font: 900 24px/1 Nunito, system-ui, sans-serif; box-shadow: 0 3px 0 #1b1323; transition: opacity .2s; }
.arcade-scroll.prev { left: 6px; }
.arcade-scroll.next { right: 6px; }
.arcade-scroll:disabled { opacity: 0; pointer-events: none; }

.cab-spot { position: relative; flex: 0 0 clamp(150px, calc((100% - 3 * var(--gap)) / 4), 206px); container-type: inline-size; scroll-snap-align: center; }
/* Each machine casts its own coloured light on the wall behind it. */
.cab-spot::before { content: ''; position: absolute; z-index: -1; left: -10%; right: -10%; top: -14%; height: 72%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cab-glow) 26%, transparent), transparent); pointer-events: none; }

/* One cabinet */
.cab {
  --lit: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 5cqi 5cqi 2cqi 2cqi;
  background: none;
  color: #fff8e6;
  font: 800 max(10px, 5.4cqi)/1.2 Nunito, system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(calc(var(--lit) * -3cqi));
  transition: transform .28s cubic-bezier(.3, 1.5, .55, 1);
}
@media (hover: hover) { .cab:hover { --lit: 1; } }
.cab:focus-visible, .cab-spot.is-starting .cab { --lit: 1; }
.cab:focus-visible { outline: 4px solid #ffe27a; outline-offset: 6px; }
.cab:active { transform: translateY(-1cqi); transition-duration: .08s; }

/* The lit marquee on top. */
.cab-marquee {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 30cqi;
  padding: 2cqi 4cqi;
  border: 1.8cqi solid var(--ink);
  border-radius: 5cqi 5cqi 2cqi 2cqi;
  background: linear-gradient(#ffffff40, #fff0 45%), linear-gradient(var(--cab-trim), color-mix(in srgb, var(--cab-trim) 72%, var(--ink)));
  box-shadow: inset 0 0 0 .8cqi #ffffff40, 0 1.2cqi 0 var(--ink);
}
.cab-marquee::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 80% 75% at 50% 50%, #fff7d0b0, transparent 72%); opacity: calc(.45 + var(--lit) * .55); transition: opacity .3s; }
.cab-marquee::after { content: ''; position: absolute; inset: -1.8cqi; z-index: -1; border-radius: inherit; box-shadow: 0 0 8cqi 1.5cqi var(--cab-glow), 0 0 2cqi var(--cab-glow); opacity: calc(.32 + var(--lit) * .68); transition: opacity .3s; }
.cab-title {
  position: relative;
  max-width: min-content;
  color: #fffaf0;
  font: 900 max(15px, 10.6cqi)/.95 Nunito, system-ui, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-shadow:
    .8cqi 0 0 var(--ink), -.8cqi 0 0 var(--ink), 0 .8cqi 0 var(--ink), 0 -.8cqi 0 var(--ink),
    .6cqi .6cqi 0 var(--ink), -.6cqi .6cqi 0 var(--ink), .6cqi -.6cqi 0 var(--ink), -.6cqi -.6cqi 0 var(--ink),
    0 1.8cqi 0 var(--ink), 0 0 5cqi var(--cab-glow);
}

/* The cabinet body with T-moulding in the trim colour and side art. */
.cab-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 92%;
  padding-top: 3cqi;
  border: 1.8cqi solid var(--ink);
  border-top: 0;
  border-radius: 0 0 2cqi 2cqi;
  background: linear-gradient(90deg, var(--cab-shade) 0 4%, var(--cab-body) 12% 88%, var(--cab-shade) 96%);
  box-shadow: inset 1.2cqi 0 0 var(--cab-trim), inset -1.2cqi 0 0 var(--cab-trim);
}
.cab-side {
  position: absolute;
  top: 0;
  bottom: -1.8cqi;
  left: calc(100% + 1.8cqi);
  width: 6.5cqi;
  background:
    linear-gradient(90deg, #0003, #0007),
    linear-gradient(162deg, var(--cab-body) 0 30%, var(--cab-trim) 30% 40%, var(--cab-glow) 40% 44%, var(--cab-shade) 44% 66%, var(--cab-trim) 66% 71%, var(--cab-shade) 71%);
  clip-path: polygon(0 0, 100% 3cqi, 100% calc(100% - 2cqi), 0 100%);
}
.cab-grille { width: 46%; height: 4cqi; margin-bottom: 2.4cqi; border-radius: 2cqi; background: radial-gradient(circle, var(--ink) 0 .7cqi, transparent 1cqi) 0 0 / 3cqi 2cqi; opacity: .65; }

/* The screen, set into a dark bezel, with scanlines, a curved vignette and a soft glow. */
.cab-bezel {
  position: relative;
  display: block;
  width: 90%;
  padding: 3.6cqi;
  border-radius: 5cqi 5cqi 3cqi 3cqi;
  background: linear-gradient(#2c2335, #120d17 70%);
  box-shadow: inset 0 0 0 .8cqi #3b3146, inset 0 2cqi 3cqi #000a, 0 .8cqi 0 #ffffff1f;
}
.cab-bezel::after { content: ''; position: absolute; inset: 3.6cqi; border-radius: 6cqi / 8cqi; box-shadow: 0 0 6cqi .8cqi var(--cab-glow); opacity: calc(.2 + var(--lit) * .65); transition: opacity .3s; pointer-events: none; }
.cab-screen { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6cqi / 8cqi; background: var(--cab-screen); isolation: isolate; }
.cab-attract, .cab-attract .att { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cab-blurb {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 7cqi 7cqi 12cqi;
  background: color-mix(in srgb, var(--cab-screen) 86%, transparent);
  color: #fff4d6;
  font: 800 max(10.5px, 6.4cqi)/1.3 Nunito, system-ui, sans-serif;
  opacity: var(--lit);
  transition: opacity .25s;
}
.cab-hi, .cab-insert { position: absolute; z-index: 2; left: 0; right: 0; color: #fff6c8; font: 700 max(9px, 5.2cqi)/1 "Courier New", ui-monospace, monospace; letter-spacing: .12em; text-shadow: 0 0 2cqi var(--cab-glow), .4cqi .4cqi 0 #0008; }
.cab-hi { top: 5%; color: #ffe9a8; font-size: max(8px, 4.4cqi); }
.cab-insert { bottom: 6%; font-weight: 900; animation: insert-blink 1.1s steps(1) infinite; }
.cab-spot.is-low .cab-insert { color: #ffb4a8; }
.cab-ready { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; color: #fffbe6; font: 900 max(16px, 11cqi)/1 Nunito, system-ui, sans-serif; letter-spacing: .06em; text-shadow: 0 0 3cqi var(--cab-glow), 0 0 8cqi var(--cab-glow), .6cqi .6cqi 0 var(--ink); opacity: 0; }
.cab-screen::after { content: ''; position: absolute; inset: 0; z-index: 4; background: #fffdf2; opacity: 0; pointer-events: none; }
.cab-crt {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(150deg, #ffffff2e 0 14%, #fff0 30%),
    radial-gradient(ellipse 75% 70% at 50% 50%, #0000 55%, #000b 100%),
    repeating-linear-gradient(#0000 0 1px, #00000038 1px 3px);
  box-shadow: inset 0 0 3cqi #000c;
}

/* The control panel: a joystick and three buttons. */
.cab-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqi;
  width: calc(100% + 8cqi);
  height: 16cqi;
  margin-top: 3cqi;
  padding: 0 10cqi 3cqi;
  background: linear-gradient(color-mix(in srgb, var(--cab-shade) 65%, #fff 22%), var(--cab-shade) 75%);
  clip-path: polygon(8% 0, 92% 0, 100% 78%, 100% 100%, 0 100%, 0 78%);
}
.cab-panel::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3.4cqi; background: var(--ink); opacity: .85; }
.cab-stick { position: relative; width: 10cqi; height: 12cqi; margin-right: 3cqi; }
.cab-stick::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4cqi; border-radius: 50%; background: var(--ink); }
.cab-stick i { position: absolute; left: 50%; bottom: 2cqi; width: 1.8cqi; height: 7.5cqi; margin-left: -.9cqi; background: linear-gradient(90deg, #8d8597, #ddd7e3, #8d8597); transform: rotate(calc(var(--lit) * -16deg)); transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.cab-stick i::after { content: ''; position: absolute; left: 50%; top: -4.6cqi; width: 7cqi; height: 7cqi; margin-left: -3.5cqi; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffa 0 1cqi, transparent 2.4cqi), var(--cab-trim); box-shadow: inset 0 -1cqi 0 #0004, 0 0 0 .6cqi var(--ink); }
.cab-btn { --btn: #ff5d5d; width: 6.4cqi; height: 6.4cqi; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fffb 0 1cqi, transparent 2.2cqi), var(--btn); box-shadow: 0 1.2cqi 0 color-mix(in srgb, var(--btn) 50%, var(--ink)), 0 0 0 .6cqi var(--ink); }
.cab-btn:nth-child(3) { --btn: #ffd23f; transform: translateY(-1.6cqi); }
.cab-btn:nth-child(4) { --btn: #4cb8ff; }

/* Below the panel: the stat sticker and the coin door with its light and price plate. */
.cab-lower {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.4cqi;
  width: 100%;
  padding: 4cqi 3cqi 4.5cqi;
  background: linear-gradient(115deg, transparent 0 12%, var(--cab-trim) 12% 21%, transparent 21% 25%, var(--cab-glow) 25% 28%, transparent 28%);
}
.cab-sticker { padding: 1.2cqi 3cqi; border: .8cqi solid var(--ink); border-radius: 2.4cqi; background: #fffaf0; color: var(--ink); font: 900 max(10px, 5.6cqi)/1.15 Nunito, system-ui, sans-serif; white-space: nowrap; transform: rotate(-5deg); box-shadow: .8cqi .8cqi 0 #0003; }
.cab-door { position: relative; display: flex; align-items: center; gap: 3cqi; padding: 2.6cqi 3.4cqi; border-radius: 2.4cqi; background: linear-gradient(#433a4b, #241e2a); box-shadow: inset 0 0 0 .7cqi #5c5266, 0 0 0 .8cqi var(--ink), 0 1.2cqi 0 .8cqi #0005; }
.cab-slot { --slot: #6df08e; position: relative; width: 8cqi; height: 13cqi; border-radius: 1.6cqi; background: radial-gradient(ellipse at 50% 50%, #f4ffe8, var(--slot) 75%); box-shadow: inset 0 0 0 .6cqi #0004; transition: background .3s; }
.cab-slot::before { content: ''; position: absolute; left: 50%; top: 2.2cqi; bottom: 2.2cqi; width: 1.4cqi; margin-left: -.7cqi; border-radius: 1cqi; background: #120e16; }
.cab-slot::after { content: ''; position: absolute; inset: -1.4cqi; border-radius: 3cqi; box-shadow: 0 0 4cqi 1cqi var(--slot); opacity: .55; pointer-events: none; animation: slot-glow 2.4s ease-in-out infinite alternate; }
.cab-spot.is-low .cab-slot { --slot: #ff6b5e; }
.cab-price { display: grid; justify-items: center; padding: 1.4cqi 2.6cqi; border-radius: 1.6cqi; background: linear-gradient(#f7e2a4, #caa159); color: #3b2812; font: 900 max(11px, 6.8cqi)/1 Nunito, system-ui, sans-serif; white-space: nowrap; box-shadow: inset 0 0 0 .5cqi #fff4c8aa, 0 .6cqi 0 #0006; }
.cab-price small { margin-top: .8cqi; font: 900 max(7px, 3.4cqi)/1 Nunito, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.cab-coin { position: absolute; z-index: 2; left: 50%; top: -3cqi; width: 7cqi; height: 7cqi; margin-left: -3.5cqi; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff6c4 0 1.2cqi, #ffd34d 2.4cqi, #d99a1c 3.5cqi); box-shadow: 0 0 0 .5cqi #8a5a0a; opacity: 0; }
.cab-clink { position: absolute; z-index: 2; left: 50%; top: 50%; width: 0; height: 0; }
.cab-clink::before { content: ''; position: absolute; left: -6cqi; top: -6cqi; width: 12cqi; height: 12cqi; border: .8cqi solid #fff6c8; border-radius: 50%; opacity: 0; }
.cab-clink::after { content: 'clink!'; position: absolute; left: 5cqi; top: -10cqi; color: #fff6c8; font: 900 max(10px, 5.6cqi)/1 Nunito, system-ui, sans-serif; white-space: nowrap; text-shadow: 0 0 2cqi var(--cab-glow), .5cqi .5cqi 0 var(--ink); opacity: 0; }
.cab-kick { align-self: stretch; padding: 1.6cqi 0 1.2cqi; background: var(--ink); color: color-mix(in srgb, var(--cab-glow) 55%, transparent); font: 900 max(7px, 3.4cqi)/1 Nunito, system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase; }

/* The cabinet's shadow and the pool of light from its screen on the floor. */
.cab-shadow { position: absolute; z-index: -1; left: 2%; right: -6%; bottom: -3.5cqi; height: 9cqi; border-radius: 50%; background: radial-gradient(closest-side, #000a, transparent); transition: transform .28s, opacity .28s; }
.cab-shadow::before { content: ''; position: absolute; left: -6%; right: 0; top: -70%; bottom: -70%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cab-glow) 24%, transparent), transparent); }
@media (hover: hover) { .cab:hover ~ .cab-shadow { transform: scale(.88); opacity: .7; } }
.cab:focus-visible ~ .cab-shadow { transform: scale(.88); opacity: .7; }

/* The friendly message when a round cannot start. */
.cab-note {
  position: absolute;
  z-index: 4;
  left: 3%;
  right: 3%;
  bottom: 31cqi;
  margin: 0;
  padding: 2.6cqi 3.2cqi;
  border: .9cqi solid var(--ink);
  border-radius: 4cqi;
  background: #fff8e6;
  color: #4a2b2b;
  font: 800 max(11.5px, 5.8cqi)/1.35 Nunito, system-ui, sans-serif;
  text-align: center;
  box-shadow: 0 1.4cqi 0 var(--ink);
  animation: note-pop .28s cubic-bezier(.3, 1.6, .5, 1);
}
.cab-note::after { content: ''; position: absolute; left: 50%; bottom: -3.2cqi; width: 5cqi; height: 5cqi; margin-left: -2.5cqi; border: solid var(--ink); border-width: 0 .9cqi .9cqi 0; background: #fff8e6; transform: rotate(45deg); }
.cab-spot.is-denied .cab { animation: cab-nope .42s ease-out; }
.cab-spot.is-denied .cab-slot { animation: slot-deny .25s steps(1) 4; }

/* Play: a coin drops in with a clink, the screen flashes READY! and the view zooms in (arcade-hall.js). */
.cab-spot.is-starting .cab-coin { animation: coin-drop .4s cubic-bezier(.45, 0, .85, .55) forwards; }
.cab-spot.is-starting .cab-clink::before { animation: clink-ring .45s ease-out .34s both; }
.cab-spot.is-starting .cab-clink::after { animation: clink-word .6s ease-out .34s both; }
.cab-spot.is-starting .cab-slot::after { animation: slot-flash .4s ease-out .34s both; }
.cab-spot.is-starting .cab-screen::after { animation: screen-flash .22s ease-out .38s; }
.cab-spot.is-starting .cab-ready { animation: ready-blink .5s linear .42s forwards; }
.cab-spot.is-starting :is(.cab-attract, .cab-blurb, .cab-hi, .cab-insert) { opacity: 0; transition: opacity .08s .38s; animation: none; }

/* Attract mode: each screen plays a small loop themed to its game. */
.att :is(.att-apple, .att-basket, .att-lid, .att-card-back, .att-card-front, .att-hop, .att-rope, .att-hop-shadow, .att-ball) { transform-box: fill-box; transform-origin: 50% 50%; }
.att-apple { animation: att-apple 2.4s cubic-bezier(.5, 0, .75, .4) infinite; }
.att-basket { transform-origin: 50% 100%; animation: att-basket .8s ease-out -.48s infinite; }
.att-twinkle circle { animation: att-twinkle 2.6s ease-in-out infinite alternate; }
.att-twinkle circle:nth-child(2n) { animation-delay: -1.3s; }
.att-twinkle circle:nth-child(3n) { animation-duration: 3.4s; }
.att-lid { transform-origin: 50% 0; transform: scaleY(0); animation: att-blink 3.4s ease-in-out infinite; }
.att-card-back { animation: att-card-back 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * .55s); }
.att-card-front { transform: scaleX(0); animation: att-card-front 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * .55s); }
.att-hop { animation: att-hop .9s ease-in-out infinite; }
.att-rope { transform-origin: 50% 0; animation: att-rope .9s linear infinite; }
.att-hop-shadow { animation: att-hop-shadow .9s ease-in-out infinite; }
.att-lamp-on { opacity: 0; animation: att-lamp 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
.att-ball { animation: att-ball 1.2s cubic-bezier(.4, 0, .6, 1) infinite; }
@media (hover: none) { .cab-blurb { animation: blurb-cycle 11s ease-in-out infinite; } }

/* Cabinets scrolled out of view pause their loops. */
.cab-spot.is-offscreen * { animation-play-state: paused; }

@keyframes att-apple { 0% { opacity: 0; transform: translate(0, -4px); } 12%, 22% { opacity: 1; transform: none; } 70% { opacity: 1; transform: translate(var(--dx), 48px); } 80%, 100% { opacity: 0; transform: translate(var(--dx), 52px); } }
@keyframes att-basket { 0%, 60%, 100% { transform: none; } 72% { transform: translateY(1.5px) scaleY(.93); } }
@keyframes att-twinkle { from { opacity: .25; } to { opacity: 1; } }
@keyframes att-blink { 0%, 86%, 100% { transform: scaleY(0); } 90%, 93% { transform: scaleY(1); } }
@keyframes att-card-back { 0%, 18% { transform: none; } 24%, 70% { transform: scaleX(0); } 76%, 100% { transform: none; } }
@keyframes att-card-front { 0%, 24% { transform: scaleX(0); } 30%, 64% { transform: none; } 70%, 100% { transform: scaleX(0); } }
@keyframes att-hop { 0%, 100% { transform: translateY(-11px); } 50% { transform: none; } }
@keyframes att-rope { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-1); } }
@keyframes att-hop-shadow { 0%, 100% { transform: scale(.65); opacity: .25; } 50% { transform: none; opacity: .45; } }
@keyframes att-lamp { 0% { opacity: 0; } 8%, 62% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes att-ball { 0%, 100% { transform: translateY(-46px); } 50% { transform: none; } }
@keyframes blurb-cycle { 0%, 58% { opacity: 0; } 64%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes insert-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes neon-hum { 0%, 90%, 92%, 95%, 100% { opacity: 1; } 91% { opacity: .45; } 94% { opacity: .7; } }
@keyframes marquee-flicker { 0% { opacity: .5; } 12% { opacity: 1; } 22% { opacity: .45; } 36% { opacity: 1; } 50% { opacity: .7; } 64%, 100% { opacity: 1; } }
@keyframes slot-glow { from { opacity: .35; } to { opacity: .8; } }
@keyframes slot-deny { 0% { opacity: 1; } 50% { opacity: .25; } }
@keyframes slot-flash { 0% { opacity: 1; transform: scale(1.5); } 100% { opacity: .55; transform: none; } }
@keyframes note-pop { from { opacity: 0; transform: translateY(2cqi) scale(.9); } }
@keyframes cab-nope { 0%, 100% { transform: none; } 20% { transform: translateX(-2cqi) rotate(-1deg); } 40% { transform: translateX(2cqi) rotate(1deg); } 60% { transform: translateX(-1.2cqi); } 80% { transform: translateX(.8cqi); } }
@keyframes coin-drop { 0% { opacity: 0; transform: translateY(-9cqi); } 18% { opacity: 1; } 70% { opacity: 1; transform: translateY(2cqi) scaleX(.85); } 100% { opacity: 0; transform: translateY(5cqi) scaleX(.2); } }
@keyframes clink-ring { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }
@keyframes clink-word { 0% { opacity: 0; transform: translateY(1cqi) scale(.7); } 25% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-5cqi); } }
@keyframes screen-flash { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
@keyframes ready-blink { 0%, 30% { opacity: 1; } 31%, 50% { opacity: .15; } 51%, 100% { opacity: 1; } }

@media (hover: hover) {
  .cab:hover .cab-marquee::before, .cab:hover .cab-marquee::after { animation: marquee-flicker .6s linear; }
}
.cab:focus-visible .cab-marquee::before, .cab:focus-visible .cab-marquee::after { animation: marquee-flicker .6s linear; }

@media (max-width: 650px) {
  .arcade-view { border-width: 4px; border-radius: 18px; }
  .arcade-row { --gap: 20px; }
  .cab-spot { flex-basis: min(60vw, 220px); }
  .arcade-scroll { width: 34px; height: 34px; margin-top: -17px; font-size: 21px; }
}

/* A game opened from a cabinet plays inside a matching cabinet frame, with a lit marquee and an Exit button. */
/* The frame is drawn with inset shadows (trim, cabinet colour, an inked edge) around a dark bezel, so each game keeps
   its own panels and colours inside. */
.screen.in-cabinet {
  --rim: clamp(8px, 2vw, 18px);
  --pad: calc(var(--rim) + clamp(8px, 1.8vw, 16px));
  min-height: 0;
  margin-top: 26px;
  padding: 0 var(--pad) var(--pad);
  border: 5px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: #15101b;
  box-shadow:
    inset 5px 0 0 var(--cab-trim), inset -5px 0 0 var(--cab-trim), inset 0 -5px 0 var(--cab-shade),
    inset 0 0 0 var(--rim) var(--cab-body), inset 0 0 0 calc(var(--rim) + 4px) var(--ink),
    0 7px 0 var(--ink), 0 22px 36px #1b132340;
}
.cabinet-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 calc(-1 * var(--pad) - 5px) 10px;
  padding: 12px 14px 12px 22px;
  border: 5px solid var(--ink);
  border-radius: 20px 20px 6px 6px;
  background: radial-gradient(ellipse 70% 90% at 50% 50%, #fff7d0a0, transparent 72%), linear-gradient(var(--cab-trim), color-mix(in srgb, var(--cab-trim) 72%, var(--ink)));
  box-shadow: 0 0 28px color-mix(in srgb, var(--cab-glow) 70%, transparent), 0 5px 0 var(--ink);
}
.cabinet-top-title {
  flex: 1;
  min-width: 0;
  color: #fffaf0;
  font: 900 clamp(20px, 4vw, 32px)/1.05 Nunito, system-ui, sans-serif;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 6px 0 var(--ink), 0 0 18px var(--cab-glow);
}
.cabinet-exit { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 3px solid var(--ink); border-radius: 999px; background: #fff8e6; color: var(--ink); font: 900 14px/1 Nunito, system-ui, sans-serif; box-shadow: 0 4px 0 var(--ink); transition: transform .15s; }
.cabinet-exit:hover { background: #fff; transform: translateY(-1px); }
.cabinet-exit:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.cabinet-exit:focus-visible { outline: 4px solid #ffe27a; outline-offset: 3px; }
.cabinet-exit kbd { padding: 2px 6px; border-radius: 6px; background: var(--ink); color: #fff3cf; font: 800 11px/1.2 ui-monospace, monospace; }
@media (hover: none) { .cabinet-exit kbd { display: none; } }
.screen.in-cabinet > .section-heading { margin: 0 0 12px; padding: 4px 2px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.screen.in-cabinet > .section-heading :is(.eyebrow, h2) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.screen.in-cabinet > .section-heading p { color: #f2e2c4; font-size: 14px; }
.screen.in-cabinet .back-map { display: none; }
.screen.in-cabinet > .arcade-cabinet { max-width: none; margin: 0; border: 0; box-shadow: none; }
.screen.in-cabinet .arcade-marquee { display: none; }
.screen.cabinet-arriving { animation: cabinet-arrive .4s ease-out both; }
.screen.cabinet-arriving > :not(.cabinet-top, .section-heading) { animation: crt-on .55s cubic-bezier(.2, .8, .3, 1) .05s both; }
@keyframes cabinet-arrive { from { opacity: 0; transform: scale(.97); } }
@keyframes crt-on { 0% { opacity: 0; transform: scale(.75, .015); } 40% { opacity: 1; transform: scale(1, .03); } 100% { opacity: 1; transform: none; } }
@media (max-width: 650px) {
  .cabinet-top { padding: 10px 10px 10px 14px; }
  .cabinet-exit { padding: 8px 11px; font-size: 13px; }
  .screen.in-cabinet > .section-heading p { font-size: 13px; }
}

/* After a round: the result printed on an arcade ticket. */
.arcade-ticket { width: min(300px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 24px); padding: 0; border: 0; background: none; color: #4a2c1c; overflow: visible; }
.arcade-ticket::backdrop { background: #140d1cc4; }
.ticket-dispenser { position: relative; z-index: 2; height: 22px; margin: 0 -14px; border: 4px solid var(--ink); border-radius: 12px; background: linear-gradient(#54466a, #2b2236); box-shadow: 0 4px 0 var(--ink), 0 0 24px color-mix(in srgb, var(--cab-glow, #ffd36b) 55%, transparent); }
.ticket-dispenser::after { content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 3px; background: #0b080e; box-shadow: 0 1px 0 #ffffff26; }
.ticket-feed { margin: -10px 8px 0; padding-bottom: 6px; overflow: hidden; filter: drop-shadow(0 5px 0 #0003); }
.ticket-paper {
  padding: 26px 20px 28px;
  background: radial-gradient(circle at 50% 0, #fff3d0, transparent 70%), #ffdc9e;
  font: 700 14px/1.45 "Courier New", ui-monospace, monospace;
  text-align: center;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 51% repeat-x;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 51% repeat-x;
}
.ticket-brand { margin: 0 -20px 8px; padding: 5px; background: var(--cab-trim, #c2412d); color: #fffaf0; font: 900 11px/1.3 Nunito, system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.ticket-title { margin: 4px 0 10px; color: var(--ink); font: 900 22px/1.1 Nunito, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.ticket-lines { display: grid; gap: 5px; margin: 0; padding: 10px 0; border-block: 2px dashed #c98f57; }
.ticket-lines div { display: flex; align-items: baseline; gap: 6px; }
.ticket-lines dt { display: flex; flex: 1; gap: 6px; text-align: left; }
.ticket-lines dt::after { content: ''; flex: 1; border-bottom: 2px dotted #c98f57; transform: translateY(-4px); }
.ticket-lines dd { margin: 0; color: var(--ink); font-weight: 900; }
.ticket-note { display: grid; gap: 2px; margin: 10px 0 0; color: #c2412d; font-weight: 900; }
.ticket-stamp { margin: 10px 0 0; color: #8a6040; font-size: 11px; letter-spacing: .06em; }
.ticket-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.ticket-actions .text-button { background: #fff8e6; }
.arcade-ticket[open] .ticket-paper { animation: ticket-print .8s steps(10, end) both; }
.arcade-ticket[open] .ticket-actions { animation: ticket-fade .3s ease-out .75s both; }
@keyframes ticket-print { from { transform: translateY(-101%); } }
@keyframes ticket-fade { from { opacity: 0; } }

/* Reduced motion: no flicker, zoom, lift or attract loops; changes fade instead. */
@media (prefers-reduced-motion: reduce) {
  .arcade-neon, .arcade-leaf, .cab-insert, .cab-slot::after, .att *, .cab-marquee::before, .cab-marquee::after, .cab-spot.is-denied .cab, .cab-spot.is-denied .cab-slot { animation: none !important; }
  .cab, .cab:active, .cab-stick i { transform: none; }
  .cab:hover ~ .cab-shadow, .cab:focus-visible ~ .cab-shadow { transform: none; }
  .att-lamp-on { opacity: 1; }
  .cab-spot.is-starting .cab-coin { animation: ticket-fade .25s ease-out forwards; opacity: 1; }
  .cab-spot.is-starting .cab-clink::before, .cab-spot.is-starting .cab-clink::after, .cab-spot.is-starting .cab-slot::after, .cab-spot.is-starting .cab-screen::after { animation: none; }
  .cab-spot.is-starting .cab-ready { animation: none; opacity: 1; transition: opacity .2s .15s; }
  .cab-note { animation-name: ticket-fade; }
  .screen.cabinet-arriving, .screen.cabinet-arriving > :not(.cabinet-top, .section-heading) { animation: ticket-fade .3s ease-out both; }
  .arcade-ticket[open] .ticket-paper { animation: ticket-fade .3s ease-out both; }
  .arcade-ticket[open] .ticket-actions { animation: none; }
  @media (hover: none) { .cab-blurb { animation: none; opacity: 1; } }
}