/* ===== NEON THEME ===== */
:root {
  --bg: #07070f;
  --text: #00ffff;
  --header-bg: rgba(7,7,15,0.85);
  --accent: #ff00ff;
  --slot-border: rgba(0,255,255,0.25);
  --card-face: #12122a;
  --card-shadow: 0 0 12px rgba(0,255,255,0.3);
}

body {
  font-family: 'Orbitron', sans-serif;
  background: radial-gradient(ellipse at 50% 0%, #1a1040 0%, #07070f 70%);
}

header {
  border-bottom: 1px solid rgba(255,0,255,0.4);
  box-shadow: 0 4px 30px rgba(255,0,255,0.15);
}
header h1 {
  color: #ff00ff;
  text-shadow: 0 0 8px #ff00ff, 0 0 20px rgba(255,0,255,0.5);
}

select, .btn {
  border-color: rgba(0,255,255,0.5);
  background: rgba(0,255,255,0.08);
  color: #00ffff;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
}
select:hover, .btn:hover { box-shadow: 0 0 10px rgba(0,255,255,0.4); }
.btn-new { background: rgba(255,0,255,0.3); border-color: #ff00ff; color: #fff; }
.btn-new:hover { background: rgba(255,0,255,0.5); box-shadow: 0 0 15px rgba(255,0,255,0.5); }

.card.face {
  background: #12122a;
  border: 1px solid rgba(0,255,255,0.3);
  box-shadow: 0 0 10px rgba(0,255,255,0.2);
}
.card.face.red { color: #ff00ff; text-shadow: 0 0 6px rgba(255,0,255,0.6); }
.card.face.black { color: #00ffff; text-shadow: 0 0 6px rgba(0,255,255,0.6); }

.card.back {
  background-image: url('../../assets/neon_back.png');
  border: 1px solid #ff00ff;
  box-shadow: 0 0 15px rgba(255,0,255,0.4);
}

.card.dragging { box-shadow: 0 0 25px rgba(0,255,255,0.6) !important; }

.completed-card {
  background: rgba(0,255,255,0.15);
  border-color: #00ffff;
  box-shadow: 0 0 8px rgba(0,255,255,0.4);
}

.info-bar span { color: #00ffff; }

.win-overlay h2 {
  color: #00ffff;
  text-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0,255,255,0.5);
}