/* ============================================================
   Maddie's Arcade
   A dark arcade hall: lit marquee overhead, a row of cabinets,
   neon carpet underfoot.
   ============================================================ */

:root {
  /* Palette */
  --void:          #120A2A;
  --carpet:        #1C0B3A;
  --cab-body:      #2A1358;
  --cab-edge:      #45219B;
  --neon-magenta:  #FF2E88;
  --neon-cyan:     #21E6FF;
  --marquee-amber: #FFC542;
  --paper:         #F3EEFF;
  --dim:           #9A86C8;

  /* Type */
  --display: 'Bungee', 'Trebuchet MS', sans-serif;
  --body:    'Space Grotesk', 'Segoe UI', sans-serif;
  --micro:   'Press Start 2P', 'Courier New', monospace;

  /* Rhythm */
  --gutter: clamp(16px, 4vw, 48px);
  --cab-w:  clamp(210px, 66vw, 268px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--void);
  color: var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 100;
  padding: 10px 18px;
  background: var(--marquee-amber);
  color: var(--void);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 0.15s ease;
}
.skip:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--neon-cyan);
  outline-offset: 4px;
}


/* ------------------------------------------------------------
   Marquee — the lit sign over the door
   ------------------------------------------------------------ */

.marquee {
  position: relative;
  flex: 0 0 auto;
  padding: 12px 0 13px;
  background:
    linear-gradient(180deg, #23104A 0%, #180B36 100%);
  border-bottom: 2px solid rgba(255, 197, 66, 0.28);
  box-shadow: 0 24px 60px -20px rgba(255, 197, 66, 0.22);
}

.marquee__bulbs {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 20px);
  padding: 0 var(--gutter);
  overflow: hidden;
}

.bulb {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 197, 66, 0.22);
  box-shadow: 0 0 0 rgba(255, 197, 66, 0);
  animation: chase 1.8s linear infinite;
}

@keyframes chase {
  0%, 82%  { background: rgba(255, 197, 66, 0.2);  box-shadow: 0 0 0 rgba(255, 197, 66, 0); }
  88%      { background: var(--marquee-amber);     box-shadow: 0 0 14px 2px rgba(255, 197, 66, 0.85); }
  100%     { background: rgba(255, 197, 66, 0.2);  box-shadow: 0 0 0 rgba(255, 197, 66, 0); }
}

.marquee__plate {
  padding: 10px var(--gutter) 11px;
  text-align: center;
}

.marquee__eyebrow,
.marquee__count {
  font-family: var(--micro);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-transform: uppercase;
}

.marquee__eyebrow { margin-bottom: 11px; }
.marquee__count   { margin-top: 11px; color: var(--neon-cyan); }

.marquee__logo {
  font-family: var(--display);
  font-size: clamp(1.7rem, 6vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: #FFF4DC;
  text-shadow:
    0 0 6px rgba(255, 197, 66, 0.9),
    0 0 22px rgba(255, 46, 136, 0.6),
    0 0 54px rgba(255, 46, 136, 0.35);
}


/* ------------------------------------------------------------
   The floor — cabinet row and carpet
   ------------------------------------------------------------ */

.floor {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(10px, 2.5vw, 28px) 0 0;
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 clamp(8px, 2vw, 20px);
}

.row__track {
  display: flex;
  align-items: flex-end;
  gap: clamp(18px, 3vw, 34px);
  flex: 1;
  min-width: 0;
  list-style: none;
  padding: 20px clamp(8px, 4vw, 40px) 28px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.row__track::-webkit-scrollbar { display: none; }

.row__track > li { scroll-snap-align: center; }

/* Nudge arrows */
.nudge {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(33, 230, 255, 0.35);
  border-radius: 50%;
  background: rgba(33, 230, 255, 0.06);
  color: var(--neon-cyan);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.2s ease;
}
.nudge:hover { background: rgba(33, 230, 255, 0.18); transform: scale(1.08); }
.nudge:disabled { opacity: 0.2; cursor: default; transform: none; }
.nudge[hidden] { display: none; }


/* ------------------------------------------------------------
   The cabinet — signature element
   ------------------------------------------------------------ */

.cabinet {
  position: relative;
  width: var(--cab-w);
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 18px 18px 6px 6px;
  padding: 12px 12px 0;
  background:
    linear-gradient(180deg, var(--cab-edge) 0%, var(--cab-body) 22%, #1B0C3C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 26px 40px -24px rgba(0, 0, 0, 0.9);
  transition: transform 0.22s cubic-bezier(.2,.9,.3,1), box-shadow 0.22s ease;
}

.cabinet:hover,
.cabinet:focus-visible {
  transform: translateY(-10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 34px 50px -26px rgba(0, 0, 0, 0.95),
    0 0 44px -6px rgba(255, 46, 136, 0.45);
}

/* Cabinet marquee — the game's logo plate */
.cabinet__marquee {
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(0.95rem, 3.4vw, 1.2rem);
  line-height: 1.1;
  color: #FFF6E2;
  background: linear-gradient(180deg, #3A1A6F, #2A1052);
  border: 1px solid rgba(255, 197, 66, 0.3);
  text-shadow: 0 0 10px var(--glow, rgba(255, 197, 66, 0.6));
  transition: box-shadow 0.22s ease, background 0.22s ease;
}

.cabinet:hover .cabinet__marquee,
.cabinet:focus-visible .cabinet__marquee {
  background: linear-gradient(180deg, #4A2189, #331362);
  box-shadow: 0 0 26px -4px var(--glow, rgba(255, 197, 66, 0.7));
}

/* CRT screen */
.cabinet__screen {
  position: relative;
  margin: 12px 0 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: #04121C;
  border: 6px solid #150A2E;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.7);
}

.cabinet__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Resting = attract mode: dimmed, but still clearly readable.
     Game art tends to be dark already, so don't take much away. */
  filter: brightness(0.9) saturate(0.95);
  transform: scale(1.02);
  transition: filter 0.28s ease, transform 0.4s ease;
}

.cabinet:hover .cabinet__screen img,
.cabinet:focus-visible .cabinet__screen img {
  filter: brightness(1.16) saturate(1.22);
  transform: scale(1.06);
}

/* Scanlines + curved glass */
.cabinet__screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px
  );
  pointer-events: none;
}

.cabinet__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 22% 8%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 46%),
    radial-gradient(120% 120% at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.42) 100%);
  pointer-events: none;
}

/* Bezel strip below the screen */
.cabinet__bezel {
  padding: 10px 2px 12px;
  text-align: center;
}

.cabinet__tagline {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--dim);
}

/* Control panel */
.cabinet__panel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 -12px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #120727, #0C0520);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.joystick {
  flex: 0 0 auto;
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FF6FAE, var(--neon-magenta) 60%, #A8104F);
}
.joystick::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 4px; height: 10px;
  transform: translateX(-50%);
  background: #4A3E6B;
  border-radius: 0 0 2px 2px;
}

.buttons { display: flex; gap: 7px; }
.buttons i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--btn, var(--neon-cyan));
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.45);
}
.buttons i:nth-child(2) { --btn: var(--marquee-amber); }
.buttons i:nth-child(3) { --btn: var(--neon-magenta); }

.cabinet__cta {
  margin-left: auto;
  font-family: var(--micro);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--marquee-amber);
}


/* Empty slot — where the next game goes */
.cabinet--slot {
  background: linear-gradient(180deg, #1E0F3E 0%, #150A2E 100%);
  box-shadow: inset 0 0 0 1px rgba(154, 134, 200, 0.16);
  cursor: default;
}
.cabinet--slot:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(154, 134, 200, 0.16); }
.cabinet--slot .cabinet__marquee {
  background: none;
  border: 1px dashed rgba(154, 134, 200, 0.32);
  color: var(--dim);
  text-shadow: none;
}
.cabinet--slot .cabinet__screen {
  background: #0B0520;
  display: grid;
  place-items: center;
}
.cabinet--slot .cabinet__screen::after { background: none; }
.cabinet--slot .slot__note {
  font-family: var(--micro);
  font-size: 9px;
  line-height: 1.9;
  color: rgba(154, 134, 200, 0.6);
  text-align: center;
  padding: 0 18px;
}
.cabinet--slot .cabinet__panel { opacity: 0.35; }


/* ------------------------------------------------------------
   Arcade carpet
   ------------------------------------------------------------ */

.carpet {
  flex: 0 0 auto;
  height: clamp(52px, 9vh, 96px);
  background-color: var(--carpet);
  background-image:
    repeating-linear-gradient( 62deg, rgba(255, 46, 136, 0.16) 0 4px, transparent 4px 34px),
    repeating-linear-gradient(-62deg, rgba(33, 230, 255, 0.14) 0 4px, transparent 4px 42px),
    repeating-linear-gradient(  0deg, rgba(255, 197, 66, 0.10) 0 3px, transparent 3px 56px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
}


/* ------------------------------------------------------------
   Credits
   ------------------------------------------------------------ */

.credits {
  flex: 0 0 auto;
  padding: 14px var(--gutter) 20px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--dim);
}


/* ------------------------------------------------------------
   Preferences
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bulb { animation: none; background: rgba(255, 197, 66, 0.55); }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

@media (max-width: 620px) {
  .nudge { display: none; }
  .row__track { scroll-snap-type: x mandatory; padding-inline: 16px; }
}