/* arcade.garryhall.me — page-specific styles.
   Everything reusable (base, .card, .tag, header/footer, scrollbars) lives
   in app.css, shared verbatim with hub.garryhall.me and music.garryhall.me.
   The boot overlay and status bar are carried over from hub.css unchanged
   so all three sites share the same terminal entrance. What's new here is
   the cabinet: marquee, bezel + CRT, control panel and coin door, plus one
   fake title screen per game inside the CRT. */

/* reserve the status-bar's footprint from first paint so its fade-in
   never causes a reflow */
body {
  padding-bottom: 24px;
}

main {
  max-width: 720px;
  align-items: center;
}

/* ── header ── */

.mark {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.6));
}

/* same two-line break as hub: app.css's 0.55em letter-spacing can't fit
   "GARRYHALL // ARCADE" on one line at 360px */
.app-header h1 {
  font-size: clamp(1rem, 5.6vw, 26px);
}

.app-header h1 .title-line {
  display: block;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   Cabinet shell
   ═══════════════════════════════════════════════════════════════════════ */

/* sized so marquee + screen + controls fit a laptop viewport; the screen
   is 4:3, so width follows the height that's left after the chrome */
.cabinet {
  width: min(100%, 600px, calc((100dvh - 330px) * 1.25));
  min-width: min(100%, 300px);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px 22px 14px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%),
    linear-gradient(90deg, #0b1020, #121a30 50%, #0b1020);
  border: 1px solid rgba(0, 240, 255, 0.16);
  /* t-molding: cyan down the left side, magenta down the right */
  box-shadow:
    -3px 0 0 -1px rgba(0, 240, 255, 0.55),
    3px 0 0 -1px rgba(255, 45, 149, 0.55),
    -10px 0 24px -8px rgba(0, 240, 255, 0.35),
    10px 0 24px -8px rgba(255, 45, 149, 0.35),
    0 24px 60px rgba(0, 0, 0, 0.55);
}

/* ── marquee ── */

.marquee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 10px 10px 0;
  padding: 12px 10px;
  border-radius: 14px 14px 6px 6px;
  border: 1px solid rgba(123, 92, 255, 0.45);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 9px),
    radial-gradient(120% 140% at 50% 0%, rgba(123, 92, 255, 0.35), rgba(255, 45, 149, 0.12) 55%, rgba(10, 14, 23, 0.9));
  box-shadow: inset 0 0 22px rgba(123, 92, 255, 0.35), 0 0 18px rgba(123, 92, 255, 0.2);
}

.marquee-text {
  font-size: clamp(14px, 4.4vw, 22px);
  font-weight: 700;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: #fff;
  white-space: nowrap;
  text-shadow:
    0 0 4px #fff,
    0 0 10px var(--magenta),
    0 0 22px var(--magenta),
    0 0 40px rgba(255, 45, 149, 0.6);
  animation: neonHum 6s infinite;
}

.marquee-arrow {
  font-size: 12px;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  animation: caretBlink 1.2s step-end infinite;
}

.marquee-arrow:last-child {
  animation-delay: 0.6s;
}

/* an old tube catching: mostly steady, two quick dropouts per cycle */
@keyframes neonHum {
  0%, 18%, 22%, 61%, 63.5%, 100% { opacity: 1; }
  20% { opacity: 0.35; }
  62% { opacity: 0.55; }
}

/* ── bezel ── */

.bezel {
  margin: 10px;
  padding: clamp(12px, 3.4vw, 22px) clamp(12px, 3.4vw, 22px) 12px;
  border-radius: 14px;
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(0, 240, 255, 0.06), transparent 70%),
    #05070d;
  border: 1px solid rgba(0, 240, 255, 0.12);
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.015), inset 0 10px 30px rgba(0, 0, 0, 0.8);
}

/* ═══════════════════════════════════════════════════════════════════════
   CRT
   ═══════════════════════════════════════════════════════════════════════ */

.crt {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 6% / 8%;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 0 0 2px #000,
    0 0 0 3px rgba(0, 240, 255, 0.18),
    0 0 30px rgba(0, 240, 255, 0.18);
}

/* everything drawn "on the glass" sizes off this box (cqw), so each title
   screen scales as one picture from phone to desktop */
.crt-inner {
  position: absolute;
  inset: 0;
  container-type: size;
  animation: crtFlicker 0.12s infinite;
}

/* power-on: the classic bright line that opens into a picture */
.js-power .crt-inner {
  transform: scale(1, 0.004);
  filter: brightness(4);
}

.crt.is-on .crt-inner {
  transform: none;
  filter: none;
  transition: transform 0.38s cubic-bezier(0.2, 0.9, 0.3, 1) 0.12s, filter 0.6s ease 0.2s;
}

/* scanlines, vignette, glass glare and a slow rolling refresh band —
   one layer above every slide so it never moves with the carousel */
.crt-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0.08) 50%, transparent 52%) 0 -100% / 100% 40% no-repeat,
    radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, 0.07), transparent 40%),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85), inset 0 0 6px rgba(0, 240, 255, 0.25);
  animation: crtRoll 7s linear infinite;
}

@keyframes crtRoll {
  from { background-position: 0 -60%, 0 0, 0 0, 0 0; }
  to { background-position: 0 260%, 0 0, 0 0, 0 0; }
}

@keyframes crtFlicker {
  0% { opacity: 0.97; }
  50% { opacity: 1; }
  100% { opacity: 0.985; }
}

/* channel-change snow, painted by JS for a beat on every switch */
.crt-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  image-rendering: pixelated;
}

.crt-static.is-on {
  opacity: 0.55;
}

.crt.is-glitch .crt-inner {
  animation: crtJitter 0.28s steps(2) 1;
}

@keyframes crtJitter {
  0% { transform: translateX(0); filter: none; }
  25% { transform: translateX(-1.2%) skewX(-1deg); filter: hue-rotate(40deg) saturate(1.6); }
  50% { transform: translateX(0.8%); filter: none; }
  75% { transform: translateX(-0.4%) skewX(0.6deg); filter: hue-rotate(-30deg); }
  100% { transform: translateX(0); filter: none; }
}

/* ── slides ── */

.slide {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  visibility: hidden;
  transform: translateX(100%);
  -webkit-user-drag: none;
}

.slide.is-active,
.slide.is-moving {
  visibility: visible;
}

.slide.is-active {
  transform: none;
}

.slide.is-animating {
  transition: transform 0.42s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slide:focus-visible {
  outline: none;
}

.crt:focus-within {
  box-shadow:
    0 0 0 2px #000,
    0 0 0 3px var(--cyan),
    0 0 30px rgba(0, 240, 255, 0.4);
}

.ts-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ts-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4cqh;
  padding: 5cqh 5cqw;
  text-align: center;
  pointer-events: none;
}

/* shared title-screen furniture: HUD across the top, blinking prompt,
   copyright line along the bottom */
.ts-hud {
  position: absolute;
  top: 4.5cqh;
  left: 7cqw;
  right: 7cqw;
  display: flex;
  justify-content: space-between;
  font-size: 3.2cqw;
  letter-spacing: 0.12em;
  color: #fff;
}

.ts-hud b {
  font-weight: 400;
  color: var(--slide-hud, var(--cyan));
}

.ts-blink {
  font-size: 4cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #fff;
  animation: caretBlink 1s step-end infinite;
}

.ts-foot {
  position: absolute;
  bottom: 5cqh;
  left: 0;
  right: 0;
  font-size: 2.6cqw;
  letter-spacing: 0.18em;
  color: rgba(232, 244, 255, 0.6);
}

/* ── 01 · MEGATON ── */

.ts-megaton {
  --slide-hud: #ffd23f;
  background: radial-gradient(90% 70% at 50% 100%, #5a0d00 0%, #1d0300 55%, #060000 100%);
}

/* rotating sunburst rays behind the blast */
.ts-burst {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 180cqw;
  height: 180cqw;
  margin: -90cqw 0 0 -90cqw;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 120, 0, 0.18) 0deg 7deg, transparent 7deg 18deg);
  mask-image: radial-gradient(circle, #000 10%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 62%);
  animation: burstSpin 40s linear infinite;
}

@keyframes burstSpin {
  to { transform: rotate(360deg); }
}

.mg-title {
  margin-top: 3cqh;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  font-size: 17cqw;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ffe14d;
  transform: perspective(40cqw) rotateX(14deg) skewX(-6deg);
  background: linear-gradient(180deg, #fff6b0 0%, #ffd23f 35%, #ff7a00 70%, #e01a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* drop-shadow (not text-shadow) so the extrusion survives the clipped fill */
  filter:
    drop-shadow(0 0.35cqw 0 #8a1200)
    drop-shadow(0 0.35cqw 0 #6a0d00)
    drop-shadow(0 0.35cqw 0 #4a0800)
    drop-shadow(0 0 3cqw rgba(255, 110, 0, 0.75));
  animation: megaShake 3.2s infinite;
}

/* a jolt each time a shockwave leaves the epicentre */
@keyframes megaShake {
  0%, 8%, 100% { translate: 0 0; }
  1% { translate: -0.6cqw 0.4cqw; }
  2.5% { translate: 0.5cqw -0.3cqw; }
  4% { translate: -0.3cqw 0.2cqw; }
  5.5% { translate: 0.2cqw 0; }
}

.mg-sub {
  font-size: 3cqw;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  color: #ff9a3c;
  text-shadow: 0 0 1.5cqw rgba(255, 90, 0, 0.8);
}

.ts-megaton .ts-blink {
  margin-top: 5cqh;
  color: #ffe14d;
}

/* ── 02 · SWARM ── */

.ts-swarm {
  --slide-hud: #b6ff3b;
  background: radial-gradient(80% 70% at 50% 40%, #07160a 0%, #020604 70%, #000 100%);
}

.sw-title {
  display: flex;
  gap: 2.4cqw;
  margin-top: 2cqh;
  font-size: 16cqw;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 0.55cqw #b6ff3b;
  filter: drop-shadow(0 0 1.6cqw rgba(182, 255, 59, 0.7));
}

/* each letter buzzes on its own beat, like it's about to take off */
.sw-title span {
  display: inline-block;
  animation: swBuzz 1.6s ease-in-out infinite;
}

.sw-title span:nth-child(2) { animation-delay: -0.3s; }
.sw-title span:nth-child(3) { animation-delay: -0.7s; -webkit-text-stroke-color: #ffe14d; }
.sw-title span:nth-child(4) { animation-delay: -1.1s; }
.sw-title span:nth-child(5) { animation-delay: -0.5s; }

@keyframes swBuzz {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(0.2cqw, -0.8cqh) rotate(-2deg); }
  40% { transform: translate(-0.2cqw, 0.4cqh) rotate(1.5deg); }
  60% { transform: translate(0.15cqw, -0.3cqh) rotate(-1deg); }
}

.sw-sub {
  font-size: 3cqw;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: #ffe14d;
}

.sw-table {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4cqh;
  margin-top: 1cqh;
  font-size: 2.9cqw;
  letter-spacing: 0.14em;
  color: rgba(232, 244, 255, 0.85);
}

.sw-table-head {
  align-self: center;
  margin-bottom: 0.6cqh;
  color: var(--cyan);
}

.bug {
  display: inline-block;
  width: 3cqw;
  height: 2.2cqw;
  margin-right: 1.6cqw;
  vertical-align: middle;
  background: currentColor;
  /* 5×4 pixel bugs, three shapes */
  clip-path: polygon(0 40%, 20% 40%, 20% 0, 40% 0, 40% 20%, 60% 20%, 60% 0, 80% 0, 80% 40%, 100% 40%, 100% 80%, 80% 80%, 80% 100%, 60% 100%, 60% 80%, 40% 80%, 40% 100%, 20% 100%, 20% 80%, 0 80%);
}

.bug-a { color: #b6ff3b; }
.bug-b { color: #ffe14d; clip-path: polygon(50% 0, 70% 30%, 100% 20%, 80% 60%, 100% 100%, 50% 80%, 0 100%, 20% 60%, 0 20%, 30% 30%); }
.bug-c { color: var(--magenta); clip-path: polygon(20% 0, 80% 0, 100% 30%, 100% 70%, 80% 100%, 60% 70%, 40% 70%, 20% 100%, 0 70%, 0 30%); }

.ts-swarm .ts-blink {
  margin-top: 2cqh;
  color: #b6ff3b;
}

/* ── 03 · NEON KLONDIKE ── */

.ts-klondike {
  --slide-hud: var(--magenta);
  background:
    radial-gradient(90% 80% at 50% 45%, #0b3a36 0%, #062420 55%, #020c0b 100%);
}

/* table edge: a neon rail around the felt */
.ts-klondike::before {
  content: "";
  position: absolute;
  inset: 4cqh 4cqw;
  border-radius: 3cqw;
  border: 0.4cqw solid rgba(255, 45, 149, 0.7);
  box-shadow: 0 0 2cqw rgba(255, 45, 149, 0.6), inset 0 0 2cqw rgba(255, 45, 149, 0.35);
}

.kl-suits {
  display: flex;
  gap: 4cqw;
  font-size: 5cqw;
  color: var(--cyan);
  text-shadow: 0 0 1.4cqw rgba(0, 240, 255, 0.8);
}

.kl-suits .red {
  color: var(--magenta);
  text-shadow: 0 0 1.4cqw rgba(255, 45, 149, 0.8);
}

/* tube-script sign hung above the block caps */
.kl-neon {
  margin-bottom: -5cqh;
  font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", Georgia, cursive;
  font-style: italic;
  font-size: 11cqw;
  line-height: 1;
  color: #fff;
  transform: rotate(-8deg) translateX(-14cqw);
  text-shadow:
    0 0 0.6cqw #fff,
    0 0 1.6cqw var(--magenta),
    0 0 3.4cqw var(--magenta),
    0 0 6cqw rgba(255, 45, 149, 0.7);
  animation: neonHum 4.5s infinite;
  position: relative;
  z-index: 1;
}

.kl-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 13cqw;
  line-height: 1;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  color: #e8fdff;
  text-shadow:
    0 0 0.8cqw #fff,
    0 0 2cqw var(--cyan),
    0 0 5cqw rgba(0, 240, 255, 0.6);
}

.kl-sub {
  font-size: 2.8cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: rgba(232, 244, 255, 0.75);
}

.ts-klondike .ts-blink {
  margin-top: 3cqh;
  color: #fff;
  text-shadow: 0 0 1.4cqw var(--magenta);
}

.ts-klondike .ts-foot {
  bottom: 8cqh;
}

/* ── 04 · CYBER TOWER ── */

.ts-tower {
  --slide-hud: #ffd23f;
  background: linear-gradient(180deg, #08001a 0%, #2a0650 34%, #8a1a7a 52%, #ff3d7f 58%, #10001e 58.2%, #05000d 100%);
}

/* striped synthwave sun sitting on the horizon */
.ct-sun {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 44cqw;
  height: 44cqw;
  margin-left: -22cqw;
  transform: translateY(-62%);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff27a 0%, #ffb33d 40%, #ff2d95 100%);
  mask-image: linear-gradient(180deg, #000 0 48%, transparent 48% 52%, #000 52% 60%, transparent 60% 65%, #000 65% 72%, transparent 72% 79%, #000 79% 84%, transparent 84% 92%, #000 92%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 48%, transparent 48% 52%, #000 52% 60%, transparent 60% 65%, #000 65% 72%, transparent 72% 79%, #000 79% 84%, transparent 84% 92%, #000 92%);
  filter: drop-shadow(0 0 4cqw rgba(255, 45, 149, 0.6));
}

.ts-tower .ts-layer {
  justify-content: flex-start;
  padding-top: 12cqh;
}

.ct-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-style: italic;
  line-height: 0.92;
  transform: skewX(-8deg);
}

/* chrome: sky above the horizon line, ground below it */
.ct-cyber,
.ct-tower {
  font-size: 15cqw;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffffff 0%, #b9f6ff 30%, #2a7bd8 49%, #0b0f2a 51%, #ff7bd0 70%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.2cqw rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 0.5cqw 0 #2a0650) drop-shadow(0 0 2.5cqw rgba(0, 240, 255, 0.55));
}

.ct-tower {
  font-size: 17cqw;
}

.ct-sub {
  margin-top: 1cqh;
  font-size: 2.8cqw;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--cyan);
  text-shadow: 0 0 1.2cqw rgba(0, 240, 255, 0.8);
}

.ts-tower .ts-blink {
  position: absolute;
  bottom: 9cqh;
  color: #ffd23f;
  text-shadow: 0 0 1.4cqw rgba(255, 210, 63, 0.8);
}

/* ── under-screen plate + game dots ── */

.bezel-plate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 0 4px;
}

.plate-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink);
}

.plate-name .caret {
  display: inline-block;
  width: 0.9em;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  animation: caretBlink 0.9s step-end infinite;
}

.plate-host {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
}

.dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.dot {
  width: 30px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.dot::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 9px;
  height: 4px;
  border-radius: 2px;
  background: rgba(125, 138, 165, 0.35);
  transition: background 0.2s, box-shadow 0.2s;
}

.dot:hover::after {
  background: rgba(0, 240, 255, 0.5);
}

.dot.is-active::after {
  background: var(--cyan);
  box-shadow: var(--glow-cyan);
}

.dot:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Control panel
   ═══════════════════════════════════════════════════════════════════════ */

.control-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 26px);
  margin: 0 10px;
  padding: 18px 12px 20px;
  border-radius: 10px 10px 4px 4px;
  /* angled deck: lighter front lip, darker towards the screen */
  background:
    linear-gradient(180deg, #070a14 0%, #121a30 70%, #1a2440 100%);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-bottom-color: rgba(0, 240, 255, 0.3);
  box-shadow: inset 0 8px 18px rgba(0, 0, 0, 0.6);
}

.arc-btn {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s, box-shadow 0.15s, filter 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.arc-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.arc-btn-dir {
  width: 48px;
  height: 48px;
  font-size: 15px;
  color: var(--cyan);
  background: radial-gradient(circle at 40% 32%, rgba(0, 240, 255, 0.35), rgba(0, 240, 255, 0.08) 60%, #05070d);
  border: 2px solid rgba(0, 240, 255, 0.6);
  box-shadow: 0 4px 0 #031820, 0 0 14px rgba(0, 240, 255, 0.35);
  text-shadow: var(--glow-cyan);
}

.arc-btn-dir:hover {
  box-shadow: 0 4px 0 #031820, 0 0 22px rgba(0, 240, 255, 0.6);
}

.arc-btn-start {
  width: 74px;
  height: 74px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: #fff;
  background: radial-gradient(circle at 40% 30%, #ff8cc6, var(--magenta) 45%, #8a0049 100%);
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 0 #4a0028, 0 0 22px rgba(255, 45, 149, 0.55);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  animation: startPulse 1.6s ease-in-out infinite;
}

.arc-btn-start:hover {
  filter: brightness(1.12);
}

@keyframes startPulse {
  0%, 100% { box-shadow: 0 6px 0 #4a0028, 0 0 16px rgba(255, 45, 149, 0.4); }
  50% { box-shadow: 0 6px 0 #4a0028, 0 0 34px rgba(255, 45, 149, 0.85); }
}

.arc-btn-dir:active,
.arc-btn-dir.is-pressed {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #031820, 0 0 22px rgba(0, 240, 255, 0.7);
}

.arc-btn-start:active,
.arc-btn-start.is-pressed {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #4a0028, 0 0 34px rgba(255, 45, 149, 0.9);
}

/* ── joystick ── */

.joystick {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.joy-base {
  position: absolute;
  inset: 14px 6px 4px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #1a2440 0%, #05070d 70%);
  border: 1px solid rgba(123, 92, 255, 0.5);
  box-shadow: 0 0 12px rgba(123, 92, 255, 0.35);
}

.joy-stick {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 8px;
  height: 34px;
  margin-left: -4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #3a4460, #9aa6c4 45%, #3a4460);
  transform-origin: 50% 100%;
  transition: transform 0.12s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.joy-ball {
  position: absolute;
  left: 50%;
  top: -16px;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9ccff, var(--violet) 50%, #2a1a6e);
  box-shadow: 0 0 14px rgba(123, 92, 255, 0.65);
}

.joystick.is-left .joy-stick { transform: rotate(-24deg); }
.joystick.is-right .joy-stick { transform: rotate(24deg); }

/* ── coin door ── */

.coin-door {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, #0a0e1a, #070a12);
  border: 1px solid rgba(125, 138, 165, 0.25);
}

.coin-slot {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 58px;
  height: 30px;
  padding-left: 9px;
  border-radius: 4px;
  background: #020308;
  border: 1px solid rgba(255, 45, 149, 0.55);
  box-shadow: inset 0 0 10px rgba(255, 45, 149, 0.4), 0 0 10px rgba(255, 45, 149, 0.25);
}

.coin-light {
  font-size: 10px;
  font-weight: 700;
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  position: relative;
}

/* the slot itself: a dark bar through the lit plate */
.coin-light::after {
  content: "";
  position: absolute;
  left: calc(100% + 9px);
  top: -5px;
  bottom: -5px;
  width: 3px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 45, 149, 0.4);
}

.coin-label {
  flex: 1;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(255, 45, 149, 0.5);
  animation: caretBlink 1.4s step-end infinite;
}

.coin-links {
  display: flex;
  gap: 8px;
}

.coin-links a {
  font-size: 9.5px;
  letter-spacing: 0.15em;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--cyan);
  text-decoration: none;
  transition: box-shadow 0.15s, background 0.15s;
}

.coin-links a:hover,
.coin-links a:focus-visible {
  background: rgba(0, 240, 255, 0.06);
  box-shadow: var(--glow-cyan);
  outline: none;
}

/* ── key hint ── */

.key-hint {
  margin: 4px 0 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(125, 138, 165, 0.7);
  text-align: center;
}

.key-hint kbd {
  font-family: inherit;
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(125, 138, 165, 0.4);
  color: var(--ink-dim);
}

@media (hover: none) {
  .key-hint {
    display: none;
  }
}

@media (max-width: 420px) {
  .coin-label {
    display: none;
  }

  .arc-btn-dir {
    width: 42px;
    height: 42px;
  }

  .arc-btn-start {
    width: 64px;
    height: 64px;
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Boot overlay + status bar — carried over from hub.css unchanged
   ═══════════════════════════════════════════════════════════════════════ */

#boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.35s ease;
}

#boot-overlay.is-collapsed {
  opacity: 0;
  pointer-events: none;
}

.boot-log-wrap {
  width: 100%;
  max-width: 460px;
}

.boot-log {
  font-size: 13px;
  line-height: 1.8;
}

.boot-log .line {
  display: flex;
  gap: 10px;
  color: var(--ink-dim);
  white-space: pre;
}

.boot-log .line.is-indent {
  padding-left: 1.5em;
}

.boot-log .line .path {
  flex: 1;
}

.boot-log .line .status {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
  opacity: 0;
  transition: opacity 0.15s;
}

.boot-log .line .status.is-shown {
  opacity: 1;
}

.boot-log .line.is-ready .path {
  color: var(--ink);
}

.boot-cursor {
  display: inline-block;
  width: 0.55em;
  margin-left: 2px;
  background: var(--cyan);
  box-shadow: var(--glow-cyan);
  animation: caretBlink 0.9s step-end infinite;
}

.boot-hint {
  margin-top: 18px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(125, 138, 165, 0.5);
  text-align: center;
}

@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

#status-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(10, 14, 23, 0.85);
  border-top: 1px solid rgba(0, 240, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#status-bar.is-active {
  opacity: 1;
}

.status-track {
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(125, 138, 165, 0.55);
  padding-left: 100%;
  animation: statusScroll 26s linear infinite;
}

.status-track.is-static {
  padding-left: 12px;
  animation: none;
}

@keyframes statusScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* reduced motion: a still picture — no flicker, roll, hum, blink or
   slide; switching games cuts straight to the next title screen */
@media (prefers-reduced-motion: reduce) {
  #boot-overlay {
    display: none;
    transition: none;
  }

  .boot-cursor,
  .status-track,
  .crt-inner,
  .crt-fx,
  .marquee-text,
  .marquee-arrow,
  .plate-name .caret,
  .ts-burst,
  .mg-title,
  .sw-title span,
  .kl-neon,
  .ts-blink,
  .arc-btn-start,
  .coin-label {
    animation: none;
  }

  #status-bar,
  .slide.is-animating,
  .joy-stick {
    transition: none;
  }
}