/* Prompt Patrol Survivors — synthwave / cyberpunk arcade shell */

:root {
  --bg: #07001a;
  --bg-deep: #03000d;
  --ink: #f6e9ff;
  --muted: #c794ff;
  --neon-pink: #ff2bd6;
  --neon-cyan: #2bf3ff;
  --neon-yellow: #ffe85a;
  --neon-violet: #a45cff;
  --frame: rgba(255, 43, 214, 0.55);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: radial-gradient(ellipse at 50% 0%, #1a004d 0%, var(--bg) 45%, var(--bg-deep) 100%);
  color: var(--ink);
  font-family: "VT323", "Noto Sans KR", monospace;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* 지평선 그리드 — retrowave 분위기 */
.grid-horizon {
  position: fixed;
  inset: 50% 0 0 0;
  background:
    linear-gradient(transparent 0%, rgba(255, 43, 214, 0.18) 100%),
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 39px,
      rgba(43, 243, 255, 0.45) 39px,
      rgba(43, 243, 255, 0.45) 40px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 29px,
      rgba(43, 243, 255, 0.45) 29px,
      rgba(43, 243, 255, 0.45) 30px
    );
  transform: perspective(420px) rotateX(60deg);
  transform-origin: top;
  pointer-events: none;
  z-index: 0;
}

/* CRT 스캔라인 */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0.22) 4px
  );
}

.cabinet {
  position: relative;
  z-index: 2;
  width: min(1080px, calc(100% - 24px));
  margin: 24px auto;
  padding: 18px;
  border-radius: 6px;
  border: 2px solid var(--neon-pink);
  background: rgba(7, 0, 26, 0.78);
  box-shadow:
    0 0 0 4px rgba(255, 43, 214, 0.12),
    0 0 60px rgba(255, 43, 214, 0.35),
    inset 0 0 50px rgba(164, 92, 255, 0.18);
}

.marquee {
  text-align: center;
  padding: 6px 0 14px;
  border-bottom: 1px dashed rgba(255, 43, 214, 0.35);
  margin-bottom: 14px;
}

.marquee-sub {
  display: block;
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(43, 243, 255, 0.65);
  margin-bottom: 6px;
}

.marquee-title {
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1.1rem, 3.4vw, 2rem);
  letter-spacing: 0.04em;
  color: var(--neon-pink);
  text-shadow:
    0 0 6px rgba(255, 43, 214, 0.9),
    0 0 22px rgba(255, 43, 214, 0.55),
    -2px 0 0 rgba(43, 243, 255, 0.65),
    2px 0 0 rgba(255, 232, 90, 0.45);
}

/* HUD */
.hud {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid rgba(43, 243, 255, 0.32);
  background: rgba(0, 0, 0, 0.45);
}

.hud-cell {
  padding: 6px 8px;
  border: 1px solid rgba(255, 43, 214, 0.22);
  background: rgba(20, 0, 50, 0.6);
  font-family: "VT323", monospace;
  text-align: center;
}

.hud-cell span {
  display: block;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  letter-spacing: 0.15em;
  color: var(--neon-cyan);
  margin-bottom: 4px;
}

.hud-cell strong {
  display: block;
  font-size: 1.7rem;
  color: var(--ink);
  text-shadow: 0 0 6px rgba(43, 243, 255, 0.45);
}

.hud-best strong { color: var(--neon-yellow); text-shadow: 0 0 8px rgba(255, 232, 90, 0.6); }

/* Stage */
.stage-wrap {
  position: relative;
  border: 2px solid var(--neon-cyan);
  box-shadow:
    0 0 0 3px rgba(43, 243, 255, 0.18),
    0 0 40px rgba(43, 243, 255, 0.4);
  background: #02000a;
}

#game-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(ellipse at center, rgba(164, 92, 255, 0.18), transparent 60%),
    rgba(3, 0, 13, 0.92);
  backdrop-filter: blur(2px);
}

.hidden { display: none; }

.dialog {
  width: min(440px, 100%);
  padding: 22px 26px;
  text-align: center;
  border: 2px solid var(--neon-pink);
  background: rgba(15, 0, 35, 0.95);
  box-shadow: 0 0 30px rgba(255, 43, 214, 0.45);
}

.dialog-wide { width: min(760px, 100%); }

.eyebrow {
  margin: 0 0 8px;
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--neon-cyan);
}

.dialog h2 {
  margin: 0 0 14px;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1.4rem, 3.8vw, 2.4rem);
  line-height: 1.15;
  color: var(--neon-yellow);
  text-shadow:
    0 0 8px rgba(255, 232, 90, 0.7),
    -2px 0 0 rgba(255, 43, 214, 0.6),
    2px 0 0 rgba(43, 243, 255, 0.5);
}

.dialog-body {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.55;
}

.primary {
  min-width: 200px;
  padding: 12px 20px;
  border: 2px solid var(--neon-yellow);
  background: transparent;
  color: var(--neon-yellow);
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(255, 232, 90, 0.65);
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.primary:hover {
  background: var(--neon-yellow);
  color: #1a0033;
  text-shadow: none;
  transform: translateY(-1px);
}

/* 레벨업 카드들 */
.upgrade-list {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.upgrade-card {
  width: 100%;
  min-height: 170px;
  padding: 14px;
  border: 2px solid rgba(43, 243, 255, 0.45);
  background: rgba(8, 0, 24, 0.9);
  color: var(--ink);
  font-family: "VT323", "Noto Sans KR", monospace;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.upgrade-card:hover {
  border-color: var(--neon-pink);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(255, 43, 214, 0.5);
}

.upgrade-card strong {
  display: block;
  margin-bottom: 6px;
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--neon-pink);
}

.upgrade-card span {
  display: block;
  margin-top: 8px;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--neon-cyan);
}

/* Cabinet footer */
.cabinet-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(43, 243, 255, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
}

.blink { color: var(--neon-yellow); animation: blink 1.2s steps(2) infinite; }
.copy { color: var(--muted); opacity: 0.7; }

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

@media (max-width: 720px) {
  .cabinet { padding: 12px; }
  .hud { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hud-cell strong { font-size: 1.3rem; }
  .upgrade-list { grid-template-columns: 1fr; }
  .marquee-title { font-size: 1rem; }
  .cabinet-foot { font-size: 7px; }
}