/* ═══ ARCADE CRM — Login Page Styles ═══ */
body {
  background: #0a0a12;
  color: #e8e8f0;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  position: relative;
  overflow: hidden;
}

/* ─── 팩맨 미로 배경 ─── */
.maze-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('/img/pacman-maze.svg') no-repeat center center;
  background-size: cover; opacity: 0.3;
}
.maze-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 20%, rgba(10,10,18,0.5) 50%, #0a0a12 85%);
}

/* CRT 스캔라인 */
.scanline {
  pointer-events: none; position: fixed; inset: 0; z-index: 10;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px);
}
.crt-glow {
  pointer-events: none; position: fixed; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at 50% 50%, rgba(100,100,255,0.03) 0%, transparent 70%);
}
.crt-curve {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  border-radius: 8px; box-shadow: inset 0 0 80px rgba(0,0,0,0.3);
}

/* 애니메이션 */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.cursor-blink { animation: blink 1s step-end infinite; }

@keyframes boot-up {
  0%   { opacity: 0; transform: scale(0.97); filter: brightness(2); }
  40%  { opacity: 1; filter: brightness(1.3); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
.boot-anim { animation: boot-up 0.6s ease-out; }

/* 글로우 타이틀 */
.glow-gold {
  font-family: 'Press Start 2P', monospace; color: #FFD700;
  text-shadow: 0 0 10px rgba(255,215,0,0.7), 0 0 30px rgba(255,215,0,0.4), 0 0 60px rgba(255,215,0,0.15), 0 0 100px rgba(255,215,0,0.05);
}

/* 플레이어 카드 */
.player-card {
  background: #14142e; border: 2px solid #2a2a5a; border-radius: 0.6rem;
  transition: all 0.25s; position: relative; overflow: hidden;
}
.player-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,215,0,0.02) 0%, transparent 50%); pointer-events: none;
}
.player-card:hover {
  border-color: #FFD700;
  box-shadow: 0 0 20px rgba(255,215,0,0.15), 0 0 40px rgba(255,215,0,0.05), inset 0 0 20px rgba(255,215,0,0.03);
  transform: translateY(-2px);
}
.player-card:active { transform: translateY(0); box-shadow: 0 0 10px rgba(255,215,0,0.2), inset 0 0 15px rgba(255,215,0,0.05); }
.player-card:hover .player-arrow { color: #FFD700; transform: translateX(3px); text-shadow: 0 0 8px rgba(255,215,0,0.5); }
.player-card:hover .player-name { color: #FFD700; text-shadow: 0 0 8px rgba(255,215,0,0.3); }
.player-arrow { color: #444; transition: all 0.25s; }

/* 역할 뱃지 */
.role-master { background: #ff79c6; color: #0a0a12; font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: 0.08em; box-shadow: 0 0 8px rgba(255,121,198,0.3); }
.role-admin { background: #FFD700; color: #0a0a12; font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: 0.08em; box-shadow: 0 0 8px rgba(255,215,0,0.3); }
.role-coach { background: rgba(0,212,255,0.1); color: #00d4ff; border: 1px solid rgba(0,212,255,0.3); font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: 0.08em; text-shadow: 0 0 6px rgba(0,212,255,0.3); }

.error-banner { background: rgba(255,71,87,0.08); border: 1px solid rgba(255,71,87,0.3); color: #ff4757; box-shadow: 0 0 15px rgba(255,71,87,0.08); }

/* 네온 보더 프레임 */
.neon-frame { position: relative; }
.neon-frame::before { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 1px solid rgba(255,215,0,0.08); border-radius: 0.85rem; pointer-events: none; }
.neon-frame::after { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border: 1px solid rgba(255,215,0,0.03); border-radius: 1rem; pointer-events: none; }

/* ─── 팩맨 애니메이션 ─── */
.pacman-scene { position: relative; width: 100%; height: 40px; overflow: hidden; margin-bottom: 1rem; }

@keyframes pacman-move { 0% { left: -40px; } 100% { left: calc(100% + 40px); } }
@keyframes pacman-chomp {
  0%   { clip-path: polygon(100% 50%, 100% 0%, 0% 0%, 0% 100%, 100% 100%); }
  50%  { clip-path: polygon(100% 50%, 100% 15%, 0% 0%, 0% 100%, 100% 85%); }
  100% { clip-path: polygon(100% 50%, 100% 0%, 0% 0%, 0% 100%, 100% 100%); }
}
.pacman {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; background: #FFD700; border-radius: 50%;
  animation: pacman-move 8s linear infinite, pacman-chomp 0.3s ease infinite;
  z-index: 3; box-shadow: 0 0 12px rgba(255,215,0,0.4);
}

@keyframes ghost-move { 0% { left: -80px; } 100% { left: calc(100% + 80px); } }
@keyframes ghost-wobble {
  0%, 100% { transform: translateY(-50%) scaleX(1); }
  25% { transform: translateY(-52%) scaleX(0.97); }
  75% { transform: translateY(-48%) scaleX(1.03); }
}
.ghost {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 28px;
  animation: ghost-move 8s linear infinite 0.6s, ghost-wobble 0.4s ease infinite;
  z-index: 2; filter: drop-shadow(0 0 6px rgba(255,68,68,0.4));
}
.ghost svg { width: 100%; height: 100%; }

.pac-dots {
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  display: flex; justify-content: center; gap: 18px; z-index: 1;
}
.pac-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,215,0,0.25); box-shadow: 0 0 3px rgba(255,215,0,0.2); }
.pac-dot.big { width: 8px; height: 8px; background: rgba(255,215,0,0.5); animation: blink 0.8s ease infinite; box-shadow: 0 0 8px rgba(255,215,0,0.3); }