@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap");

:root {
  --bg: #0d0221;
  --bg2: #170a33;
  --cyan: #00fff9;
  --magenta: #ff2e97;
  --yellow: #ffe700;
  --purple: #7b2ff7;
  --green: #39ff14;
  --text: #f5f5f5;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "VT323", monospace;
  overflow: hidden;
}

img, canvas { image-rendering: pixelated; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* CRT scanline + vignette overlay */
.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  background:
    repeating-linear-gradient(rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.25) 3px, rgba(0,0,0,0) 4px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: multiply;
}

/* ---------- header ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 12px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  border-bottom: 3px solid var(--purple);
  box-shadow: 0 0 20px rgba(123, 47, 247, 0.6);
  z-index: 10;
}

.logo {
  font-family: "Press Start 2P", monospace;
  font-size: 20px;
  color: var(--yellow);
  text-shadow: 0 0 6px var(--yellow), 3px 3px 0 var(--magenta);
  letter-spacing: 1px;
}

.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar-right .pixel-btn {
  height: 34px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pixel-btn {
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  color: var(--bg);
  background: var(--cyan);
  border: none;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000, 0 0 10px rgba(0,255,249,0.6);
  image-rendering: pixelated;
}
.pixel-btn:hover { filter: brightness(1.15); }
.pixel-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.pixel-btn.off { background: #555; box-shadow: 3px 3px 0 #000; }
.pixel-btn.small { font-size: 9px; padding: 8px 10px; }

.back-link {
  background: var(--yellow);
  box-shadow: 3px 3px 0 #000, 0 0 10px rgba(255, 231, 0, 0.6);
  width: 34px;
  padding: 0;
}
.back-link canvas {
  width: 18px;
  height: 18px;
}

/* ---------- hallway ---------- */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hallway {
  display: flex;
  align-items: center;
  position: relative;
  padding: 20px 0;
}

.nav-arrow {
  font-family: "Press Start 2P", monospace;
  font-size: 22px;
  background: rgba(23, 10, 51, 0.85);
  color: var(--yellow);
  border: 2px solid var(--yellow);
  cursor: pointer;
  padding: 14px 10px;
  z-index: 5;
  flex-shrink: 0;
}
.nav-arrow:hover { background: var(--yellow); color: var(--bg); }

.cabinets-track {
  display: flex;
  gap: 56px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 20px calc(50vw - 130px);
  align-items: flex-end;
}
.cabinets-track::-webkit-scrollbar { display: none; }

.cabinet {
  flex-shrink: 0;
  width: 260px;
  scroll-snap-align: center;
  background: linear-gradient(180deg, #2a1a52, #150a2e);
  border: 4px solid #000;
  outline: 2px solid var(--purple);
  padding: 14px;
  cursor: pointer;
  opacity: 0.5;
  transform: scale(0.82);
  transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
  filter: grayscale(0.4);
}
.cabinet:focus { outline: 2px solid var(--cyan); }
.cabinet.active {
  opacity: 1;
  transform: scale(1.08);
  filter: grayscale(0);
  box-shadow: 0 0 35px rgba(0, 255, 249, 0.55), 0 0 70px rgba(255, 46, 151, 0.35);
  z-index: 2;
}

.marquee {
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  text-align: center;
  color: var(--bg);
  background: var(--yellow);
  padding: 8px 4px;
  margin-bottom: 10px;
  box-shadow: 0 0 12px var(--yellow);
}

.screen {
  background: #000;
  border: 3px solid #444;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
.screen canvas.preview {
  width: 192px;
  height: 144px;
  background: #0d0221;
}
.insert-coin {
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  color: var(--magenta);
  animation: blink 1s steps(1) infinite;
}
.cabinet.active .insert-coin { display: none; }
.play-hint {
  display: none;
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  text-align: center;
  line-height: 1.6;
  color: var(--green);
  text-shadow: 0 0 6px var(--green);
}
.cabinet.active .play-hint { display: block; animation: blink 1.2s steps(1) infinite; }

@keyframes blink { 50% { opacity: 0; } }

.cabinet-info {
  font-size: 15px;
  text-align: center;
  color: var(--cyan);
  margin-top: 10px;
  min-height: 20px;
}

/* ---------- floor ---------- */
.floor {
  height: 90px;
  background-image:
    repeating-linear-gradient(90deg, #1a0e38 0 40px, #24123f 40px 80px),
    linear-gradient(180deg, rgba(123,47,247,0.25), transparent);
  border-top: 3px solid var(--purple);
  transform: perspective(220px) rotateX(35deg);
  transform-origin: top;
  box-shadow: 0 0 30px rgba(123, 47, 247, 0.5) inset;
}

/* ---------- overlays shared ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 1, 15, 0.92);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overlay.hidden { display: none; }

/* ---------- game modal ---------- */
.modal-cabinet {
  background: linear-gradient(180deg, #2a1a52, #150a2e);
  border: 5px solid #000;
  outline: 3px solid var(--purple);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 0 50px rgba(123,47,247,0.6);
}
.modal-marquee {
  font-family: "Press Start 2P", monospace;
  font-size: 16px;
  color: var(--bg);
  background: var(--yellow);
  padding: 10px 20px;
  box-shadow: 0 0 14px var(--yellow);
}
#gameCanvas {
  background: #000;
  border: 3px solid #444;
  width: min(640px, 88vw);
  height: min(480px, 66vh);
}
.modal-hud {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 20px;
  color: var(--cyan);
}
#gameMessage { color: var(--green); }
#gameMessage.game-over { color: var(--magenta); animation: blink 0.8s steps(1) infinite; }

@media (max-width: 640px) {
  .cabinet { width: 220px; }
  .logo { font-size: 14px; }
}