/* Cogignition Arcade splash — synthwave purple + gold, pixel lettering. */

@font-face {
  font-family: "Press Start 2P";
  src: url("/fonts/pressstart2p.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg0: #11002b;
  --bg1: #2a0552;
  --purple: #b026ff;
  --magenta: #ff2bd6;
  --gold: #ffd447;
  --gold-soft: #ffe98a;
  --ink: #f3e9ff;
}

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

html, body { min-height: 100%; }
body {
  font-family: "Press Start 2P", ui-monospace, monospace;
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 50% -10%, #3a0a6b 0%, var(--bg1) 38%, var(--bg0) 78%);
  overflow-x: hidden;
  position: relative;
  display: flex;
  justify-content: center;
}

/* synthwave perspective grid floor */
.floor {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 240vw;
  height: 52vh;
  transform: translateX(-50%) perspective(40vh) rotateX(62deg);
  transform-origin: bottom center;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(5vw - 2px), rgba(255, 43, 214, 0.55) calc(5vw - 2px) 5vw),
    repeating-linear-gradient(0deg, transparent 0 calc(5vh - 2px), rgba(255, 212, 71, 0.45) calc(5vh - 2px) 5vh);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
          mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: scroll 1.6s linear infinite;
  z-index: 0;
}
@keyframes scroll { from { background-position-y: 0, 0; } to { background-position-y: 0, 5vh; } }

/* CRT scanlines over everything */
.scanlines {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.22) 50%);
  background-size: 100% 4px;
}

.cab {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 880px;
  padding: 64px 24px 96px;
  text-align: center;
}

.eyebrow {
  font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--gold-soft); opacity: 0.85; margin-bottom: 26px;
}

.marquee {
  font-size: clamp(38px, 11vw, 104px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gold);
  -webkit-text-stroke: 2px #7a1500;
  text-shadow:
    0 0 6px var(--gold-soft),
    0 0 18px var(--magenta),
    0 0 36px var(--purple),
    0 6px 0 #8a2a00;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { text-shadow: 0 0 6px var(--gold-soft), 0 0 18px var(--magenta), 0 0 36px var(--purple), 0 6px 0 #8a2a00; }
  50%      { text-shadow: 0 0 10px var(--gold-soft), 0 0 30px var(--magenta), 0 0 60px var(--purple), 0 6px 0 #8a2a00; }
}

.coin {
  margin: 26px 0 48px;
  font-size: clamp(9px, 2.2vw, 13px);
  color: var(--ink);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0.2; } }

/* game cabinets */
.games {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
}

.game {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  text-decoration: none;
  color: var(--ink);
  background: rgba(40, 6, 78, 0.6);
  border: 3px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 43, 214, 0.4), 0 0 22px rgba(176, 38, 255, 0.35);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.game:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 0 0 1px var(--magenta), 0 0 34px rgba(255, 212, 71, 0.55), 0 0 60px rgba(176, 38, 255, 0.55);
}
.game__screen {
  display: block;
  border: 2px solid rgba(255, 212, 71, 0.5);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 1200 / 630;
}
.game__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game__title { font-size: 14px; color: var(--gold); letter-spacing: 0.04em; }
.game__play { font-size: 10px; color: var(--magenta); letter-spacing: 0.08em; }

/* coming-soon placeholder */
.game--soon { cursor: default; opacity: 0.55; border-style: dashed; }
.game--soon:hover { transform: none; box-shadow: 0 0 0 1px rgba(255, 43, 214, 0.4), 0 0 22px rgba(176, 38, 255, 0.35); }
.game__screen--soon {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1200 / 630; font-size: 40px; color: var(--gold-soft);
}

.back { margin-top: 56px; }
.back a { color: var(--gold-soft); font-size: 10px; text-decoration: none; letter-spacing: 0.06em; opacity: 0.8; }
.back a:hover { color: var(--gold); text-decoration: underline; }

@media (max-width: 480px) {
  .cab { padding: 44px 16px 72px; }
}