/* Neon Flap styles (based on Hobby Horsing layout) */
:root{--bg:#04050a;--neon1:#7c5cff;--neon2:#00d4ff;--muted:#99b8d1}
*{box-sizing:border-box;margin:0;padding:0}

/* 80s Neon Arcade Background */
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
  color:#eaf6ff;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-height:100vh;
  padding-top:20px;
  background:linear-gradient(180deg,#0a0015,#1a0033 25%,#2d004d 50%,#1a0033 75%,#0a0015);
  position:relative;
  overflow-x:hidden;
  animation:bgPulse 10s ease-in-out infinite;
}

@keyframes bgPulse{
  0%,100%{background:linear-gradient(180deg,#0a0015,#1a0033 25%,#2d004d 50%,#1a0033 75%,#0a0015);}
  50%{background:linear-gradient(180deg,#150020,#2a0044 25%,#3d0066 50%,#2a0044 75%,#150020);}
}

/* Animated gradient background layer */
body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(180deg,#0a0015,#1a0033 25%,#2d004d 50%,#1a0033 75%,#0a0015);
  z-index:-3;
  animation:gradientShift 15s ease-in-out infinite;
}

@keyframes gradientShift{
  0%,100%{opacity:0.8;}
  50%{opacity:1;}
}

/* Retro grid perspective layer */
body::after{
  content:'';
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:60%;
  background-image:
    linear-gradient(0deg,transparent 24%,rgba(255,0,255,0.15) 25%,rgba(255,0,255,0.15) 26%,transparent 27%,transparent 74%,rgba(255,0,255,0.15) 75%,rgba(255,0,255,0.15) 76%,transparent 77%,transparent),
    linear-gradient(90deg,transparent 24%,rgba(0,255,255,0.15) 25%,rgba(0,255,255,0.15) 26%,transparent 27%,transparent 74%,rgba(0,255,255,0.15) 75%,rgba(0,255,255,0.15) 76%,transparent 77%,transparent);
  background-size:80px 80px;
  background-position:0 0;
  transform:perspective(500px) rotateX(60deg);
  transform-origin:bottom center;
  z-index:-2;
  animation:gridMove 3s linear infinite;
  opacity:0.5;
  pointer-events:none;
}

@keyframes gridMove{
  0%{background-position:0 0;}
  100%{background-position:0 80px;}
}

/* Neon stars layer */
.neon-stars{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
}

.neon-star{
  position:absolute;
  width:2px;
  height:2px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 6px rgba(255,255,255,0.8),0 0 12px rgba(124,92,255,0.6);
  animation:twinkle 3s ease-in-out infinite;
}

.neon-star:nth-child(even){
  animation-delay:1.5s;
  box-shadow:0 0 6px rgba(255,255,255,0.8),0 0 12px rgba(0,212,255,0.6);
}

@keyframes twinkle{
  0%,100%{opacity:0.3;transform:scale(1);}
  50%{opacity:1;transform:scale(1.5);}
}
.game-wrap{width:980px;max-width:95%;padding:14px;border-radius:12px;background:rgba(10,0,21,0.7);box-shadow:0 18px 60px rgba(124,92,255,0.4),0 0 100px rgba(0,212,255,0.2);border:1px solid rgba(124,92,255,0.4);backdrop-filter:blur(10px)}
.game-top{position:fixed;top:12px;left:12px;right:12px;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:12px}
.game-top .btn{padding:0.45rem 0.75rem;font-size:0.95rem;border-radius:8px}
.best-top{color:var(--muted);font-weight:800;background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.game-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.game-header h1{font-size:1.2rem;color:var(--neon1);text-shadow:0 10px 30px rgba(124,92,255,0.08)}
.score{color:var(--muted);font-weight:700}
#gameCanvas{width:100%;height:auto;background:rgba(5,6,12,0.85);border-radius:8px;display:block;margin:0 auto;box-shadow:0 12px 40px rgba(124,92,255,0.4),0 0 80px rgba(0,212,255,0.2);border:2px solid rgba(124,92,255,0.3)}
.controls{display:flex;gap:12px;justify-content:center;padding:10px;align-items:center}
.btn{background:linear-gradient(90deg,var(--neon1),var(--neon2));border:none;color:#021;padding:.55rem .9rem;border-radius:10px;cursor:pointer;font-weight:800}
.hs{color:var(--muted);font-weight:700}
.game-footer{color:var(--muted);text-align:center;padding:8px;font-size:.95rem;margin-top:6px}

/* Game Over Screen */
.game-over-screen{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  opacity:0;
  transition:opacity 0.4s ease-in-out;
  pointer-events:none;
}

.game-over-screen.visible{
  opacity:1;
  pointer-events:auto;
}

.game-over-content{
  text-align:center;
  padding:30px;
  animation:slideUp 0.5s ease-out;
}

@keyframes slideUp{
  from{transform:translateY(30px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}

.game-over-title{
  font-size:3rem;
  font-weight:900;
  background:linear-gradient(90deg,var(--neon1),var(--neon2));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:20px;
  text-shadow:0 0 30px rgba(124,92,255,0.5);
  animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.05);}
}

.medal-container{
  font-size:80px;
  margin:20px 0;
  animation:bounce 1s ease-out;
}

@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translateY(0);}
  40%{transform:translateY(-20px);}
  60%{transform:translateY(-10px);}
}

.stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin:25px 0;
}

.stat-box{
  background:rgba(124,92,255,0.1);
  border:2px solid rgba(124,92,255,0.3);
  border-radius:12px;
  padding:15px;
  box-shadow:0 4px 15px rgba(124,92,255,0.2);
}

.stat-label{
  color:var(--muted);
  font-size:0.9rem;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.stat-value{
  color:#fff;
  font-size:2.5rem;
  font-weight:900;
  text-shadow:0 0 20px rgba(124,92,255,0.6);
}

.performance-text{
  color:var(--neon2);
  font-size:1.2rem;
  font-weight:700;
  margin-top:15px;
  text-shadow:0 0 10px rgba(0,212,255,0.5);
}

/* Tutorial Overlay */
.tutorial-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(5px);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  z-index:100;
  animation:fadeIn 0.3s ease-out;
}

.tutorial-content{
  text-align:center;
  animation:bounce 2s ease-in-out infinite;
}

.tutorial-key{
  font-size:4rem;
  font-weight:900;
  background:linear-gradient(90deg,var(--neon1),var(--neon2));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:15px;
  filter:drop-shadow(0 0 20px rgba(124,92,255,0.8));
}

.tutorial-text{
  font-size:1.5rem;
  font-weight:700;
  color:#fff;
  margin-bottom:10px;
  text-shadow:0 0 15px rgba(0,212,255,0.6);
}

.tutorial-hint{
  color:var(--muted);
  font-size:1rem;
  font-style:italic;
}

/* Achievement Popup */
.achievement-popup{
  position:fixed;
  top:80px;
  right:20px;
  background:linear-gradient(135deg,rgba(124,92,255,0.95),rgba(0,212,255,0.95));
  border-radius:12px;
  padding:15px 20px;
  display:flex;
  align-items:center;
  gap:15px;
  box-shadow:0 8px 30px rgba(124,92,255,0.6),0 0 60px rgba(0,212,255,0.4);
  z-index:200;
  animation:slideInRight 0.5s ease-out,fadeOutRight 0.5s ease-in 2.5s;
  animation-fill-mode:forwards;
  max-width:300px;
}

@keyframes slideInRight{
  from{transform:translateX(400px);opacity:0;}
  to{transform:translateX(0);opacity:1;}
}

@keyframes fadeOutRight{
  from{transform:translateX(0);opacity:1;}
  to{transform:translateX(400px);opacity:0;}
}

.achievement-icon{
  font-size:2.5rem;
  animation:bounce 1s ease-out;
}

.achievement-content{
  flex:1;
}

.achievement-title{
  font-weight:900;
  font-size:1.1rem;
  color:#fff;
  margin-bottom:5px;
  text-shadow:0 2px 8px rgba(0,0,0,0.5);
}

.achievement-desc{
  font-size:0.9rem;
  color:rgba(255,255,255,0.9);
  text-shadow:0 1px 4px rgba(0,0,0,0.3);
}

.preview{position:relative;width:100%;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,rgba(0,0,0,0.4),rgba(0,0,0,0.35));display:block}
.preview img{width:100%;height:auto;display:block;object-fit:cover}
.preview-play{position:absolute;right:18px;bottom:18px;padding:12px 16px;border-radius:12px;font-weight:900;box-shadow:0 18px 60px rgba(124,92,255,0.16)}
@media (max-width:520px){.game-wrap{padding:10px}}

/* Mobile optimizations */
@media (max-width:768px){
  .game-wrap{
    max-width:100%;
    border-radius:0;
  }
  
  #gameCanvas{
    border-radius:0;
    touch-action:none;
  }
  
  .game-over-title{
    font-size:2rem;
  }
  
  .stat-value{
    font-size:2rem;
  }
  
  .tutorial-key{
    font-size:3rem;
  }
  
  .tutorial-text{
    font-size:1.2rem;
  }
}

@media (max-width:420px){
  .game-header h1{
    font-size:1rem;
  }
  
  .stats-grid{
    gap:10px;
  }
  
  .stat-box{
    padding:10px;
  }
}