:root {
  --wall: #0d0a12;
  --wall-2: #17111f;
  --ink: #efe8f5;
  --dim: #9d92ab;
  --pink: #ff4fa8;
  --cyan: #3ff0ff;
  --gold: #ffcc4d;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--wall); }
body {
  margin: 0; color: var(--ink); background:
    radial-gradient(1200px 500px at 50% -120px, rgba(255, 79, 168, .16), transparent 70%),
    radial-gradient(900px 400px at 85% 10%, rgba(63, 240, 255, .08), transparent 70%),
    linear-gradient(var(--wall-2), var(--wall) 600px);
  font: 15px/1.5 ui-monospace, Menlo, monospace; padding: 28px 16px 40px; min-height: 100vh;
}
a { color: inherit; }

/* The neon sign */
header { text-align: center; margin: 8px 0 26px; }
.sign {
  font: 400 clamp(30px, 9vw, 112px)/1 Monoton, ui-monospace, monospace; margin: 0; letter-spacing: .02em;
  color: #ffe6f4; text-shadow: 0 0 4px #fff, 0 0 12px var(--pink), 0 0 28px var(--pink), 0 0 60px rgba(255, 79, 168, .7);
}
.sign .a { color: #e6fdff; text-shadow: 0 0 4px #fff, 0 0 12px var(--cyan), 0 0 28px var(--cyan), 0 0 60px rgba(63, 240, 255, .6); animation: buzz 7s infinite; }
@keyframes buzz { 0%, 91%, 93%, 96%, 100% { opacity: 1; } 92%, 95% { opacity: .35; } }
.sub { font: 12px/1.6 'Press Start 2P', ui-monospace, monospace; color: var(--gold); margin: 18px 0 0; text-shadow: 0 0 8px rgba(255, 204, 77, .5); }

/* Filters, the same ones the arcade has */
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1200px; margin: 0 auto 12px; }
.chip {
  font: inherit; font-size: 13px; color: var(--ink); background: #221a2c; border: 1px solid #3b3048;
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.chip:hover { border-color: #75648a; }
.chip.on { background: var(--pink); border-color: var(--pink); color: #1a0710; box-shadow: 0 0 14px rgba(255, 79, 168, .55); }
.chip i { font-style: normal; opacity: .6; font-size: 11px; margin-left: 2px; }
#sorts { display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--dim); font-size: 13px; margin: 0 0 34px; }
#sorts span { opacity: .5; }
.sort { font: inherit; color: var(--dim); background: none; border: 0; padding: 2px 0; cursor: pointer; border-bottom: 1px solid transparent; }
.sort:hover { color: var(--ink); }
.sort.on { color: var(--cyan); border-bottom-color: var(--cyan); }

/* The floor: rows of cabinets */
main { max-width: 1200px; margin: 0 auto; }
ol {
  list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 230px)); justify-content: center; gap: 44px 30px;
}
li { position: relative; display: flex; flex-direction: column; align-items: center; container-type: inline-size; }
li[hidden] { display: none; }
li::after {   /* shadow on the carpet */
  content: ""; position: absolute; left: 4%; right: 4%; bottom: 30px; height: 26px; z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .85), transparent); transform: translateY(50%);
}
#empty { text-align: center; color: var(--dim); }

/* One cabinet. Everything is sized in cqw of its list item, which is the cabinet's width. */
.cab {
  --lit: hsl(var(--h) 95% 62%);
  --trim: hsl(var(--h) 90% 60%);
  position: relative; display: flex; flex-direction: column; width: 100%;
  text-decoration: none; padding: 0 5cqw; border-radius: 4cqw 4cqw 1cqw 1cqw;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 9%, transparent 91%, rgba(0, 0, 0, .45)),
    linear-gradient(rgba(255, 255, 255, .08), transparent 30%, rgba(0, 0, 0, .25)),
    var(--body);
  box-shadow: inset 1.3cqw 0 0 var(--trim), inset -1.3cqw 0 0 var(--trim), 0 0 0 1px rgba(0, 0, 0, .6);
  transition: transform .18s ease, filter .18s ease; outline: none;
}
.cab:hover, .cab:focus-visible { transform: translateY(-5px); }
.cab:focus-visible { box-shadow: inset 1.3cqw 0 0 var(--trim), inset -1.3cqw 0 0 var(--trim), 0 0 0 3px var(--cyan); }

.marquee {
  margin: 0 -3cqw; height: 24cqw; display: grid; place-items: center; text-align: center; padding: 0 5cqw;
  border-radius: 3cqw 3cqw 0 0; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(255, 255, 255, .5), transparent 60%),
    linear-gradient(hsl(var(--h) 85% 58%), hsl(var(--h) 80% 38%));
  box-shadow: inset 0 0 0 1.2cqw #111, inset 0 0 6cqw rgba(0, 0, 0, .35), 0 0 6cqw hsl(var(--h) 90% 55% / .35);
}
.marquee span {
  font: 400 var(--fs)/1.25 'Press Start 2P', ui-monospace, monospace; color: #fff; letter-spacing: .02em;
  text-shadow: .5cqw .5cqw 0 hsl(var(--h) 80% 22%), 0 0 3cqw rgba(255, 255, 255, .6);
}
.grille {
  height: 6cqw; margin: 0 4cqw;
  background: repeating-linear-gradient(90deg, #0c0c0c 0 2.4cqw, transparent 2.4cqw 4.4cqw) center / 60% 1.6cqw no-repeat, #1a1a1a;
}
.bezel {
  padding: 5cqw 5cqw 6cqw; background: linear-gradient(#141414, #050505);
  box-shadow: inset 0 1.5cqw 3cqw rgba(0, 0, 0, .8);
}
.screen {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000;
  border-radius: 5cqw / 6cqw; box-shadow: 0 0 0 1cqw #222, 0 0 7cqw hsl(var(--h) 90% 60% / .25);
}
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: saturate(1.15) contrast(1.05); transition: filter .2s; }
.screen .attract { display: none; }
.screen.no-art img { display: none; }
.screen.no-art .attract { display: flex; }
.screen::after {   /* scanlines + curvature */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    repeating-linear-gradient(rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, .65));
}
.glass {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 30%, transparent 45%);
}
.cab:hover .screen img, .cab:focus-visible .screen img { filter: saturate(1.3) contrast(1.1) brightness(1.12); }

/* Attract screen, for games whose front page is not a title page */
.attract {
  position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqw; text-align: center;
  background:
    radial-gradient(1px 1px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 78% 14%, #fff, transparent),
    radial-gradient(1px 1px at 30% 82%, #fff, transparent), radial-gradient(1px 1px at 88% 70%, #fff, transparent),
    radial-gradient(1px 1px at 55% 40%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(90% 70% at 50% 100%, hsl(var(--h) 90% 35%), transparent 70%),
    linear-gradient(#050310, hsl(calc(var(--h) + 40) 70% 12%));
}
.attract b {
  font: 400 var(--fs)/1.2 'Press Start 2P', ui-monospace, monospace; color: hsl(var(--h) 100% 78%);
  text-shadow: .45cqw .45cqw 0 hsl(var(--h) 90% 30%), 0 0 2.5cqw hsl(var(--h) 100% 60%);
}
.attract em {
  font: normal 400 3.4cqw/1 'Press Start 2P', ui-monospace, monospace; color: #fff; margin-top: 3.5cqw;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Control panel: a sloped deck with a stick and three buttons */
.panel {
  position: relative; height: 15cqw; margin: 0 -6cqw;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  background: linear-gradient(#2a2a2a, #111);
}
.panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(hsl(var(--h) 60% 40% / .35), transparent); }
.stick { position: absolute; left: 20%; top: 20%; width: 1.8cqw; height: 7.5cqw; background: linear-gradient(90deg, #666, #ccc, #555); border-radius: 1cqw; transform-origin: 50% 100%; transition: transform .18s; }
.stick::before { content: ""; position: absolute; left: 50%; top: -3cqw; width: 6.5cqw; height: 6.5cqw; margin-left: -3.25cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a9a, #d8141f 55%, #6e0006); }
.stick::after { content: ""; position: absolute; left: 50%; bottom: -1.6cqw; width: 8cqw; height: 3cqw; margin-left: -4cqw; border-radius: 50%; background: #000; z-index: -1; }
.btn { position: absolute; top: 40%; width: 6cqw; height: 4.4cqw; border-radius: 50%; box-shadow: 0 1.2cqw 0 rgba(0, 0, 0, .7); transition: transform .12s, box-shadow .12s; }
.btn:nth-of-type(1) { left: 52%; background: radial-gradient(circle at 40% 30%, #fff6a8, #f2c400 60%, #8a6d00); }
.btn:nth-of-type(2) { left: 64%; top: 30%; background: radial-gradient(circle at 40% 30%, #b6f3ff, #16b8e0 60%, #0b5c70); }
.btn:nth-of-type(3) { left: 76%; top: 40%; background: radial-gradient(circle at 40% 30%, #ffc2e3, #ff3d9a 60%, #7a0c44); }
.cab:hover .stick { transform: rotate(-14deg); }
.cab:hover .btn:nth-of-type(2) { transform: translateY(.8cqw); box-shadow: 0 .4cqw 0 rgba(0, 0, 0, .7); }
.lip { height: 4cqw; margin: 0 -6cqw; background: linear-gradient(#0b0b0b, #262626); border-top: .6cqw solid var(--trim); }

/* Coin door and kick plate */
.door { height: 56cqw; display: grid; place-items: center; }
.coins {
  width: 36cqw; height: 30cqw; border-radius: 1.5cqw; display: flex; justify-content: center; align-items: center; gap: 5cqw;
  background: linear-gradient(135deg, #9a9a9a, #4b4b4b 45%, #7d7d7d); box-shadow: inset 0 0 0 .8cqw #2d2d2d, 0 1cqw 2cqw rgba(0, 0, 0, .5);
}
.coins i {
  width: 9cqw; height: 13cqw; border-radius: 1cqw; background: linear-gradient(#1a0000, #3a0000); position: relative;
  box-shadow: inset 0 0 0 .6cqw #222, 0 0 3cqw rgba(255, 40, 40, .5);
}
.coins i::after { content: ""; position: absolute; left: 50%; top: 22%; width: 1cqw; height: 5cqw; margin-left: -.5cqw; background: #ff3b3b; box-shadow: 0 0 2cqw #ff3b3b; border-radius: .5cqw; animation: coin 2.4s infinite; }
.coins i:nth-child(2)::after { animation-delay: 1.2s; }
@keyframes coin { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.kick { height: 7cqw; margin: 0 -5cqw; background: #0a0a0a; border-radius: 0 0 1cqw 1cqw; }

.new {
  position: absolute; top: -3.5cqw; right: -4cqw; z-index: 4; transform: rotate(10deg);
  font: 400 4.2cqw/1 'Press Start 2P', ui-monospace, monospace; color: #1a1200; background: var(--gold);
  padding: 2cqw 2.6cqw; border-radius: 1cqw; box-shadow: 0 0 4cqw rgba(255, 204, 77, .7);
}

.plaque { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--dim); text-align: center; }

footer { max-width: 1200px; margin: 64px auto 0; padding-top: 18px; border-top: 1px solid #2c2336; color: var(--dim); font-size: 12px; }
footer p { margin: 0 0 8px; }
footer a:hover { color: var(--pink); }

@media (max-width: 520px) {
  body { padding-top: 20px; }
  ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .sub { font-size: 10px; }
  .plaque { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .sign .a, .attract em, .coins i::after { animation: none; }
  .cab, .stick, .btn { transition: none; }
}