/* THE ARCADE — every machine is in attract mode. none of them have coins. */

@property --bar-hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

:root {
  --ar-bg: #0a0510;
  --ar-cab: #1c1024;
  --ar-cab-light: #2e1a3a;
}

body.arcade {
  background:
    radial-gradient(ellipse at 50% 0%, #2a1040 0%, transparent 60%),
    var(--ar-bg);
  color: #f0e6ff;
  min-height: 100vh;
  padding: 0 1.5rem 4rem;
  overflow-x: hidden;
}

/* the marquee — a chasing string of bulbs, classic theater-marquee
   timing: each bulb's animation-delay is offset by its own index */
.marquee {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 1.5rem 0 1rem;
  flex-wrap: wrap;
}
.bulb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a2a1a;
  box-shadow: 0 0 4px rgba(0,0,0,0.6);
  animation: chase 1.6s linear infinite;
  animation-delay: calc(var(--i) * 80ms);
}
@keyframes chase {
  0%, 80%, 100% { background: #3a2a1a; box-shadow: 0 0 4px rgba(0,0,0,0.6); }
  10% { background: #ffe62f; box-shadow: 0 0 10px 3px rgba(255, 230, 47, 0.9); }
}

.ar-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.ar-header h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.8rem;
  background: linear-gradient(90deg, #ff2fd6, #2fe0ff, #ffe62f, #ff2fd6);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: title-chase 6s linear infinite;
}
@keyframes title-chase {
  from { background-position: 0% 0; }
  to   { background-position: 300% 0; }
}
.ar-header p {
  max-width: 42ch;
  margin: 0.75rem auto 0;
  font-size: 0.8rem;
  opacity: 0.8;
}

.cabinets {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.cabinet {
  background: linear-gradient(180deg, var(--ar-cab-light), var(--ar-cab));
  border-radius: 10px 10px 4px 4px;
  padding: 14px 14px 20px;
  width: 220px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.screen {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 4px solid #0a0510;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.7);
  cursor: pointer;
}

/* screen 1 — SMPTE-ish color bars, cycling */
.screen.bars {
  background: linear-gradient(90deg,
    hsl(calc(var(--bar-hue) * 1deg) 90% 55%) 0 14.28%,
    hsl(calc(var(--bar-hue) * 1deg + 51deg) 90% 55%) 14.28% 28.56%,
    hsl(calc(var(--bar-hue) * 1deg + 102deg) 90% 55%) 28.56% 42.84%,
    hsl(calc(var(--bar-hue) * 1deg + 153deg) 90% 55%) 42.84% 57.12%,
    hsl(calc(var(--bar-hue) * 1deg + 204deg) 90% 55%) 57.12% 71.4%,
    hsl(calc(var(--bar-hue) * 1deg + 255deg) 90% 55%) 71.4% 85.68%,
    hsl(calc(var(--bar-hue) * 1deg + 306deg) 90% 55%) 85.68% 100%
  );
  animation: bar-cycle 4s linear infinite;
}
@keyframes bar-cycle {
  from { --bar-hue: 0; }
  to   { --bar-hue: 360; }
}

/* screen 2 — a shape bouncing corner to corner, changing color each
   time it touches a wall, the classic screensaver joke */
.screen.bounce {
  background: #05010a;
}
.bouncer {
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 3px;
  animation: bounce-x 3.1s ease-in-out infinite alternate, bounce-y 2.3s ease-in-out infinite alternate, bounce-color 5s steps(4) infinite;
}
@keyframes bounce-x { from { left: 4%; } to { left: 74%; } }
@keyframes bounce-y { from { top: 6%; } to { top: 68%; } }
@keyframes bounce-color {
  0%   { background: #ff2fd6; box-shadow: 0 0 14px 3px rgba(255,47,214,0.7); }
  25%  { background: #2fe0ff; box-shadow: 0 0 14px 3px rgba(47,224,255,0.7); }
  50%  { background: #ffe62f; box-shadow: 0 0 14px 3px rgba(255,230,47,0.7); }
  75%  { background: #6dff2f; box-shadow: 0 0 14px 3px rgba(109,255,47,0.7); }
  100% { background: #ff2fd6; box-shadow: 0 0 14px 3px rgba(255,47,214,0.7); }
}

/* screen 3 — a spinning checker, conic-gradient, same trick as the
   wallpaper room's checker swatch but animated */
.screen.checker {
  background: conic-gradient(#ff2fd6 90deg, #05010a 0 180deg, #ff2fd6 0 270deg, #05010a 0);
  background-size: 26px 26px;
  animation: checker-spin 6s linear infinite;
}
@keyframes checker-spin {
  from { background-position: 0 0; filter: hue-rotate(0deg); }
  to   { background-position: 26px 26px; filter: hue-rotate(360deg); }
}

.screen-label {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* the control panel — a joystick and three real-looking arcade buttons */
.controls {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.joystick {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0e6ff, #7a5cff 55%, #2a1876 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
  position: relative;
}
.joystick::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 4px;
  height: 10px;
  background: linear-gradient(180deg, #444, #111);
  transform: translateX(-50%);
}

.btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 3px rgba(0,0,0,0.6), inset 0 2px 2px rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.4);
  transition: transform 0.1s ease;
}
.btn:active {
  transform: translateY(1px) scale(0.94);
}
.btn.pressed {
  animation: btn-press 0.25s ease-out;
}
@keyframes btn-press {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(2px) scale(0.88); }
  100% { transform: translateY(0) scale(1); }
}
.btn.red    { background: radial-gradient(circle at 35% 30%, #ff9e9e, #e02020 60%, #7a0d0d 100%); }
.btn.yellow { background: radial-gradient(circle at 35% 30%, #fff3a0, #e0c020 60%, #7a5c0d 100%); }
.btn.blue   { background: radial-gradient(circle at 35% 30%, #a0d4ff, #2080e0 60%, #0d3c7a 100%); }

.ar-hint {
  max-width: 40ch;
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.7;
}