/* =============================================
   flappy.css — Advanced Flappy Bird Styles
   Mini Games Hub
   ============================================= */

/* ---- Canvas wrapper glow override ---- */
.flappy-canvas-wrap {
  border-color: rgba(168,255,62,0.35) !important;
  box-shadow: 0 0 60px rgba(168,255,62,0.15), 0 20px 60px rgba(0,0,0,0.6) !important;
  cursor: pointer;
  width: fit-content;
  margin: 0 auto;
}
.flappy-canvas-wrap:hover {
  box-shadow: 0 0 80px rgba(168,255,62,0.28), var(--shadow-xl) !important;
}

/* Make canvas responsive */
#canvas {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  image-rendering: auto;
}

/* ---- Accent stat card ---- */
.flappy-accent {
  border-color: rgba(168,255,62,0.4) !important;
  background: rgba(168,255,62,0.07) !important;
}
.flappy-accent .stat-card-value {
  color: #a8ff3e !important;
  text-shadow: 0 0 16px rgba(168,255,62,0.5) !important;
}

/* ---- Difficulty selector ---- */
.flappy-diff-selector {
  display: flex;
  gap: var(--space-1);
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: 3px;
}
.flappy-diff-selector .diff-btn {
  padding: var(--space-1) var(--space-3);
  font-size: 0.7rem;
}

/* ---- Bird bounce animation on overlay ---- */
.flappy-bounce {
  animation: flappyBob 1s ease-in-out infinite !important;
}
@keyframes flappyBob {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-14px) rotate(5deg); }
}

/* ---- Medal key in overlay ---- */
.flappy-medal-key {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-4);
}
.medal-item {
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--clr-border);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

/* ---- Tap hint (mobile only) ---- */
.flappy-tap-hint {
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  text-align: center;
  display: none;
}

/* ---- Combo pop animation ---- */
@keyframes comboPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); color: #a8ff3e; text-shadow: 0 0 20px rgba(168,255,62,0.8); }
  100% { transform: scale(1); }
}
.combo-pop { animation: comboPop 0.35s cubic-bezier(0.34,1.56,0.64,1); }

/* ---- Overlay title accent ---- */
#start-screen .overlay-title {
  background: linear-gradient(135deg, #a8ff3e, #00d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .flappy-tap-hint { display: block; }
  .flappy-diff-selector .diff-btn { padding: 4px 8px; font-size: 0.65rem; }
}

@media (max-width: 420px) {
  #canvas { max-width: 100%; }
  .flappy-canvas-wrap { width: 100%; }
}