@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap');

* { box-sizing: border-box; }
html,body { height:100%; margin:0; overflow-x: hidden; font-family: var(--font-body, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial); /* use main site purple tile background */ background: var(--purple-100); color: hsl(var(--foreground, 220 40% 13%)); }
main { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
h1 { margin: 8px 0 0 0; }

/* gradient page-title matching site branding */
h1.page-title {
  font-family:'Great Vibes', Georgia, 'Times New Roman', serif;
  font-weight:400;
  background:linear-gradient(90deg,var(--accent, #ff7a59),var(--blue-300, #6aa6ff));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.title-row { display:flex; align-items:center; gap:12px; }
.sound-toggle { background: transparent; border: 1px solid hsl(var(--border, 214 20% 90%)); padding:6px 8px; border-radius:8px; cursor:pointer; font-size:18px; line-height:1; }
.sound-toggle[aria-pressed="true"] { background: hsl(var(--primary, 195 100% 50%)); color: hsl(var(--primary-foreground, 0 0% 100%)); border-color: color-mix(in srgb, hsl(var(--primary, 195 100% 50%)) 35%, transparent); box-shadow: 0 4px 12px rgba(2,6,23,0.08) inset; }
.sparrow-img {
  width: 96px; /* scaled 1.5× (was 64px) */
  height: auto;
  vertical-align: middle;
  margin-left: 12px;
  object-fit: cover;
  object-position: 45% 28%; /* focus the crop on the bird */
  display: inline-block;
  background: transparent;
  /* tighter rectangular crop around the bird (responsive and easier to tweak) */
  clip-path: inset(6% 8% 6% 10% round 6px);
  -webkit-clip-path: inset(6% 8% 6% 10% round 6px);
  box-shadow: 0 3px 8px rgba(2,6,23,0.14);
}
@media (max-width:520px){
  .sparrow-img { width: 40px; margin-left: 6px; }
}
.game-wrap { position:relative; width:min(92vw, 480px); }
#gameCanvas { touch-action: manipulation; }
canvas { background: linear-gradient(hsl(var(--card, 0 0% 100%)), hsl(var(--muted, 210 15% 93%))); display:block; border:3px solid hsl(var(--border, 214 20% 90%)); border-radius:8px; width: 100%; height: auto; aspect-ratio: 3/4; }
#overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(6,30,60,0.68); }
#overlay.hidden { display:none; }
#overlayContent { background: linear-gradient(180deg, hsl(212 26% 12%), hsl(210 24% 8%)); color: #e8f3ff; padding:18px 22px; border-radius:10px; text-align:center; box-shadow: 0 12px 36px rgba(6,20,40,0.6), 0 2px 8px rgba(2,6,23,0.2) inset; border: 1px solid rgba(255,255,255,0.04); }
#submitArea { margin: 12px 0 8px; display:flex; gap:8px; justify-content:center; align-items:center; }
#nameInput {
  padding:8px 10px;
  border-radius:6px;
  border:1px solid hsl(var(--input, 214 20% 90%));
  background: hsl(var(--background, 210 20% 98%));
  color: hsl(var(--foreground, 220 40% 13%));
  width:140px;
  font-size:16px;
}
#nameInput::placeholder { color: hsl(var(--muted-foreground, 215 15% 47%)); }
#nameInput:focus {
  outline: 2px solid hsl(var(--ring, 18 90% 55%));
  outline-offset: 1px;
}
#submitScoreBtn { background: hsl(var(--primary, 195 100% 50%)); color: hsl(var(--primary-foreground, 0 0% 100%)); border:none; padding:8px 12px; border-radius:6px; cursor:pointer; font-weight:600; }
#submitScoreBtn[disabled] { opacity:0.6; cursor:not-allowed; }
.leaderboard { margin-top:8px; text-align:left; max-height:240px; overflow:auto; }
#leaderboard h3 { margin:6px 0 10px; font-size:16px; color: #dfefff; }
.leaderboard-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.leaderboard-list li { padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.06); display:flex; justify-content:space-between; align-items:center; background: linear-gradient(180deg, rgba(12,36,72,0.28), rgba(8,24,48,0.18)); box-shadow: 0 6px 20px rgba(4,12,24,0.45); transition: transform 160ms ease, box-shadow 160ms ease; }
.leaderboard-list li:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(4,12,24,0.55); }
.leaderboard-list li .entry-left { display:flex; align-items:center; gap:10px; }
.rank-badge { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:999px; font-size:13px; font-weight:700; color: #cfe9ff; background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); }
.leaderboard-list li .name { font-weight:600; color: #e8f3ff; display:inline-flex; align-items:center; gap:6px; }
.rank-crown { font-size:16px; line-height:1; }
.leaderboard-list li .score { font-weight:700; color: #fff; }
.leaderboard-list li.you { box-shadow: 0 0 0 2px color-mix(in srgb, hsl(var(--primary, 195 100% 50%)) 45%, transparent); }
.leaderboard-list li.podium-1 { background: linear-gradient(102deg, rgba(251,191,36,0.25), rgba(251,146,60,0.18)); border-color: rgba(251,191,36,0.45); }
.leaderboard-list li.podium-2 { background: linear-gradient(102deg, rgba(148,163,184,0.3), rgba(148,163,184,0.18)); border-color: rgba(148,163,184,0.45); }
.leaderboard-list li.podium-3 { background: linear-gradient(102deg, rgba(248,113,113,0.3), rgba(245,158,11,0.2)); border-color: rgba(245,158,11,0.45); }
.leaderboard-list li.podium-1 .rank-badge,
.leaderboard-list li.podium-1 .name,
.leaderboard-list li.podium-1 .score { color:#fff; border-color: rgba(251,191,36,0.65); }
.leaderboard-list li.podium-2 .rank-badge,
.leaderboard-list li.podium-2 .name,
.leaderboard-list li.podium-2 .score { color:#f8fafc; border-color: rgba(148,163,184,0.65); }
.leaderboard-list li.podium-3 .rank-badge,
.leaderboard-list li.podium-3 .name,
.leaderboard-list li.podium-3 .score { color:#fff7ee; border-color: rgba(248,113,113,0.65); }
.your-rank, #yourRank { margin-top:8px; font-size:13px; color:#556; }
.overlay-actions { margin-top:10px; }
#startBtn {
  padding:10px 16px;
  border-radius:10px;
  border: none;
  cursor: pointer;
  font-weight:700;
  color: #fff;
  background: linear-gradient(90deg, var(--accent, #ff7a59), var(--blue-300, #6aa6ff));
  box-shadow: 0 10px 30px rgba(47,102,255,0.12);
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 120ms ease;
}
#startBtn:hover{ transform: translateY(-3px); box-shadow: 0 20px 44px rgba(3,10,30,0.48); }
.hint { margin-top:6px; color: hsl(var(--muted-foreground, 215 15% 47%)); }
@media (max-width:520px){
  .hint { font-size: 12px; margin-top: 4px; line-height: 1.2; padding: 0 4px; }
}
@media (max-width:520px){
  /* Use a JS-updated --vh variable to avoid mobile browser address-bar sizing issues.
     Fallback to 100dvh where supported. */
  main { min-height: calc(var(--vh, 1vh) * 100); min-height: 100dvh; display: flex; flex-direction: column; }
  .game-wrap {
    width: min(100%, calc((var(--vh, 1vh) * 100 - 6rem) * 0.75));
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    margin: 0 auto;
    align-self: center;
  }
  canvas { width: 100%; height: auto; }
	#overlayContent { padding: 18px 20px; font-size: 16px; }
	#startBtn { padding: 14px 18px; font-size: 16px; }
}

/* Confetti styles */
#confetti { position: fixed; inset: 0; pointer-events: none; overflow: visible; z-index: 9999; }
.confetti-piece { position: absolute; width: 10px; height: 14px; opacity: 0.95; transform-origin: center; border-radius: 2px; will-change: transform, opacity; animation: confetti-fall 1200ms cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes confetti-fall {
  0% { transform: translateY(-20vh) rotate(0deg) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(120vh) rotate(720deg) scale(0.85); opacity: 0; }
}