/* Outfit font for modern dashboard feel */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

* { box-sizing: border-box; }
html,body,#game-wrap { height: 100%; margin:0; overflow: hidden; background: #000; }
body { font-family: 'Outfit', sans-serif; color: #dbeafe; }

#game-wrap { position: relative; display:flex; align-items:center; justify-content:center; }
canvas { width: 100%; height: 100vh; display:block; touch-action: none; user-select: none; }

#hud { position: absolute; left: 12px; top: 12px; display:flex; gap:8px; align-items:center; z-index:10; }
#score { background: rgba(255,255,255,0.06); padding: 8px 16px; border-radius: 12px; font-weight:700; color:#7cfffb; border: 1px solid rgba(124,255,251,0.2); backdrop-filter: blur(4px); }

#muteBtn { background: rgba(255,255,255,0.05); border: none; padding:8px; border-radius:8px; color:#fff; cursor:pointer; }
#volumeSlider { width:100px; height:6px; background:rgba(255,255,255,0.1); border-radius:6px; }

/* Overlay & Panel */
#overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; backdrop-filter: blur(10px); z-index:80; }
.hidden { display:none; }
.panel { background: rgba(10,15,30,0.85); padding:40px 32px; border-radius:24px; border: 1px solid rgba(255,110,199,0.4); box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 0 20px rgba(255,110,199,0.1); text-align:center; min-width:340px; backdrop-filter: blur(16px); }
.panel h1 { color:#ff6ec7; margin:0 0 12px; font-size:36px; text-transform:uppercase; letter-spacing:4px; text-shadow: 0 0 15px rgba(255,110,199,0.6); }
#finalScore { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 24px; letter-spacing: 2px; }

.controls { display: flex; flex-direction: column; gap: 12px; margin-bottom: 0px; }
.controls input { padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,0.15); background:rgba(0,0,0,0.5); color:#fff; width:100%; font-size: 16px; font-family: 'Outfit', sans-serif; transition: 0.2s; outline: none; }
.controls input:focus { border-color: #1bd1d8; box-shadow: 0 0 10px rgba(27,209,216,0.3); }

.neon-btn { padding:14px 24px; border-radius:12px; border:none; color:#fff; font-weight:700; font-size: 16px; cursor:pointer; font-family: 'Outfit', sans-serif; transition: 0.2s transform, 0.2s box-shadow; text-transform: uppercase; letter-spacing: 1px; }
.neon-btn:hover { transform: translateY(-3px); }
.neon-btn:active { transform: translateY(1px); }

.pink-btn { background: #ff6ec7; color: #fff; box-shadow: 0 6px 0 #cc0088, 0 15px 20px rgba(255,110,199,0.3); }
.pink-btn:active { box-shadow: 0 2px 0 #cc0088; }
.cyan-btn { background: #1bd1d8; color: #012; box-shadow: 0 6px 0 #0f7a7e, 0 15px 20px rgba(27,209,216,0.3); }
.cyan-btn:active { box-shadow: 0 2px 0 #0f7a7e; }
.gray-btn { background: #445; color: #bbc; box-shadow: 0 6px 0 #223; }
.gray-btn:active { box-shadow: 0 2px 0 #223; }

.leaderboard-link { color: #1bd1d8; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 1px; transition: 0.2s; }
.leaderboard-link:hover { color: #fff; text-shadow: 0 0 10px #1bd1d8; }

.actions { display: flex; gap: 12px; justify-content: center; }
.actions .neon-btn { flex: 1; }
/* Premium Start Screen */
.start-screen { position:absolute; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at center, #0B1220 0%, #000 100%); overflow:hidden; }

/* Scrolling Grid Animation */
.start-screen::before {
  content: ""; position:absolute; inset:0;
  background-image: 
    linear-gradient(rgba(27,209,216,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,209,216,0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: center bottom;
  perspective: 500px;
  transform: rotateX(45deg) translateY(0);
  animation: gridScroll 10s linear infinite;
  z-index: 1;
}

@keyframes gridScroll {
  from { transform: rotateX(45deg) translateY(0); }
  to { transform: rotateX(45deg) translateY(50px); }
}

.menu-container { position:relative; z-index: 10; width:100%; max-width:900px; padding:20px; text-align:center; }

.logo-title { 
  font-size: 80px; font-weight: 700; margin: 0; color: #7cfffb;
  text-shadow: 0 0 10px rgba(124,255,251,0.5), 0 0 30px rgba(124,255,251,0.3);
  letter-spacing: -4px;
  animation: titlePulse 3s ease-in-out infinite alternate;
}
@keyframes titlePulse { from { opacity: 0.9; } to { opacity: 1; scale: 1.02; text-shadow: 0 0 20px rgba(124,255,251,0.7); } }

.logo-subtitle { color: rgba(207,232,247,0.7); margin-bottom: 40px; font-size: 20px; letter-spacing: 4px; text-transform: uppercase; }

.level-grid { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }

.level-card { 
  background: rgba(255,255,255,0.03); 
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 24px; min-width: 220px;
  backdrop-filter: blur(12px);
  transition: 0.3s cubic-bezier(0.2, 0, 0.2, 1);
  display:flex; flex-direction:column; align-items:center;
}
.level-card:hover:not(.locked) {
  transform: translateY(-10px) scale(1.05);
  background: rgba(27,209,216,0.08); border-color: #1bd1d8;
  box-shadow: 0 10px 40px rgba(27,209,216,0.2);
}

.level-num { font-size: 14px; opacity:0.6; margin-bottom: 8px; font-weight: 700; }
.level-name { font-size: 24px; margin-bottom: 24px; font-weight: 700; color: #fff; }

.start-btn { 
  width:100%; padding: 14px; border-radius: 12px; border:none; 
  background: #1bd1d8; color: #012; font-weight: 700; font-size: 16px;
  cursor:pointer; box-shadow: 0 4px 0 #0f7a7e; transition: 0.1s;
}
.start-btn:active { transform: translateY(4px); box-shadow: 0 0px 0 #0f7a7e; }

.locked { opacity: 0.5; filter: grayscale(1); }
.locked-btn { background: #334; color: #889; box-shadow: 0 4px 0 #112; }

/* Mobile tap hint — visible only on touch devices */
.tap-hint {
  display: none; text-align: center; margin-top: 1.5rem;
  color: rgba(124,255,251,0.5); font-size: 14px; letter-spacing: 3px;
  animation: tapPulse 2s ease-in-out infinite;
}
@media (hover: none) and (pointer: coarse) {
  .tap-hint { display: block; }
}
@keyframes tapPulse {
  0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; }
}