/* ==========================================================================
   Flappy — game-specific styles
   Menu structure + buttons mirror the 2048 / battleship pattern.
   base.css provides tokens, reset, body font, .home-btn, .util-btns,
   .site-foot, reduced-motion.
   ========================================================================== */

/* ----- Layout ----- */

html, body { min-height: 100%; }

body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 16px;
  min-height: 100vh;
  overflow: hidden;
  background: #060611;
}

.app {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.top {
  width: 100%;
  text-align: center;
}
.top h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Hide the page header during gameplay (canvas takes the full viewport). */
body.in-game .top { display: none; }

/* ----- Decorative menu background: a few birds drifting ----- */

.menu-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
body.in-game .menu-bg { display: none; }

.bg-bird {
  position: absolute;
  opacity: 0.18;
  filter: drop-shadow(0 0 6px rgba(138, 124, 255, 0.18));
  animation: bird-drift linear infinite, bird-bob ease-in-out infinite;
  will-change: transform;
}
.bg-bird svg { display: block; }

@keyframes bird-drift {
  from { transform: translateX(-120px) translateY(0); }
  to   { transform: translateX(calc(100vw + 120px)) translateY(0); }
}
@keyframes bird-bob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: 18px; }
}

/* ----- Panels (verbatim from 2048) ----- */

.panel {
  width: 100%;
  background: linear-gradient(145deg, rgba(16, 20, 38, 0.95), #090c18 50%, #05060f 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 26px;
  padding: 20px 18px 18px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

[hidden] { display: none !important; }
.hidden { display: none !important; }

/* Menu panel — extra padding to feel more "menu" */
.menu-panel { padding: 32px 28px 28px; gap: 20px; position: relative; z-index: 1; }

/* Best + Coins cards side-by-side */
.menu-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.menu-highscore {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.hs-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Coin card — gold accent, no hover (it's display-only, not a button) */
.coin-card .coin-medallion {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 214, 110, 0.45);
  border-radius: 50%;
  filter: drop-shadow(0 0 8px rgba(255, 214, 110, 0.45));
}
.coin-card,
.coin-card:hover {
  cursor: default;
  transform: none !important;
}
.coin-value { color: #ffd66e !important; }

/* Ghost buttons under the Play button — two or three across */
.menu-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.menu-actions-row.menu-actions-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.menu-actions-row .ghost-btn { width: 100%; padding-left: 6px; padding-right: 6px; }
.hs-trophy {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.hs-trophy .icon { width: 19px; height: 19px; }
.hs-trophy:hover {
  color: #ffd166;
  border-color: rgba(255, 209, 102, 0.5);
  background: rgba(255, 209, 102, 0.08);
  transform: translateY(-1px);
}
.hs-trophy:active { transform: scale(0.95); }

/* Stats button — same shape/size as the trophy, sky-blue accent */
.hs-stats {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.hs-stats svg { width: 14px; height: 14px; }
.hs-stats:hover {
  color: #7dd3fc;
  border-color: rgba(125, 211, 252, 0.55);
  background: rgba(125, 211, 252, 0.08);
  transform: translateY(-1px);
}
.hs-stats:active { transform: scale(0.95); }

/* Stats overlay card */
.stats-card { max-width: 380px; }
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.stat-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-cell-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.stat-cell-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Global leaderboard overlay */
.lb-card {
  width: 100%;
  max-width: 320px;
  gap: 12px;
}
.lb-card h2 { font-size: 1.2rem; }
.lb-msg { margin: 0; }
.lb-card .lb-list { width: 100%; }

/* Score submit (death overlay) */
.lb-submit {
  display: flex;
  gap: 8px;
  width: 100%;
  /* Centers the lone sign-in button on the death overlay; the leaderboard
     row is unaffected since its input flexes to full width anyway. */
  justify-content: center;
}
.lb-submit input {
  flex: 1;
  min-width: 0;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: center;
  padding: 9px 14px;
  transition: border-color 0.2s;
}
.lb-submit input::placeholder { color: var(--muted); opacity: 0.6; }
.lb-submit input:focus {
  outline: none;
  border-color: var(--accent);
}
.lb-submit .primary-btn { padding: 9px 18px; font-size: 13px; }
.lb-submit-done {
  margin: 0;
  font-size: 0.85rem;
  color: var(--accent);
}

/* Account line at the bottom of the leaderboard overlay */
.lb-account {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.lb-account:empty { display: none; }
.lb-account-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lb-account-btn:hover { opacity: 0.8; }
.hs-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.hs-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: center;
}
.menu-actions .primary-btn { width: 100%; }
.menu-actions .ghost-btn   { width: 100%; }

.menu-hint {
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
  opacity: 0.6;
}
.menu-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  margin: 0 2px;
}

/* ----- Leaderboard (verbatim from 2048) ----- */

.menu-leaderboard {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lb-title {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: center;
}
.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  counter-reset: lb;
}
.lb-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 13px;
  counter-increment: lb;
}
.lb-list li::before {
  content: counter(lb);
  min-width: 18px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lb-list li:nth-child(1)::before { color: #ffd166; }
.lb-list li:nth-child(2)::before { color: #c0c8d8; }
.lb-list li:nth-child(3)::before { color: #d49a6a; }
.lb-list li.me {
  border-color: rgba(138, 124, 255, 0.5);
  background: var(--accent-soft);
}
.lb-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}
.lb-score {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ----- Buttons (verbatim from 2048) ----- */

.primary-btn {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: 11px 24px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.primary-btn:hover {
  background: rgba(138, 124, 255, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(138, 124, 255, 0.3);
}
.primary-btn:active { transform: scale(0.97); box-shadow: none; }

.ghost-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
}
.ghost-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.ghost-btn:active { transform: scale(0.97); }

/* ----- Game section: full-viewport canvas ----- */

#gameSection {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
#gameSection.hidden { display: none !important; }
#gameSection .canvas-wrap,
#gameSection .hud {
  pointer-events: auto;
}

.canvas-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(138, 124, 255, 0.06), transparent 60%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.04), transparent 50%),
    #060611;
}

canvas#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

/* Screen shake on death */
.canvas-wrap.shaking {
  animation: stage-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes stage-shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(3px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, 1px, 0); }
  40%, 60% { transform: translate3d(5px, -1px, 0); }
}

/* Death chromatic-aberration pulse — red/cyan offset drop-shadows around the canvas */
.canvas-wrap.death-ca {
  animation: death-ca-pulse 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes death-ca-pulse {
  0%   { filter: none; }
  18%  { filter:
           drop-shadow(4px 0 0 rgba(255, 60, 90, 0.85))
           drop-shadow(-4px 0 0 rgba(60, 220, 255, 0.85))
           contrast(1.1) saturate(1.25); }
  45%  { filter:
           drop-shadow(2px 0 0 rgba(255, 60, 90, 0.55))
           drop-shadow(-2px 0 0 rgba(60, 220, 255, 0.55))
           contrast(1.05); }
  100% { filter: none; }
}

/* Red flash on hit */
.canvas-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(255, 80, 110, 0.6);
  opacity: 0;
  transition: opacity 0.18s ease-out;
  mix-blend-mode: screen;
}
.canvas-wrap.flash::after { opacity: 1; }

/* ----- HUD (during gameplay) ----- */

.hud {
  position: absolute;
  top: 1.5rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 5;
  user-select: none;
}
.hud.hidden { opacity: 0; }

.hud-score {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 5.5rem);
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow:
    0 0 18px rgba(138, 124, 255, 0.55),
    0 0 38px rgba(138, 124, 255, 0.35),
    0 4px 0 rgba(0, 0, 0, 0.55);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hud-score.bump { transform: scale(1.25); }

.hud-best {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

/* ----- Overlays (death / pause) ----- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 22, 0.78);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
  animation: overlay-in 0.3s ease;
}
@keyframes overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.overlay-card {
  background: linear-gradient(145deg, #1a1c30, #0d0e1d);
  border: 1px solid rgba(138, 124, 255, 0.3);
  border-radius: 22px;
  padding: 28px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  box-shadow: 0 0 40px rgba(138, 124, 255, 0.2);
  max-width: 340px;
  animation: overlay-card-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes overlay-card-in {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.overlay-card h2 {
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.muted { color: var(--muted); font-size: 0.9rem; margin: 0; }
.muted strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* Two stat cards side-by-side, matching the menu's .menu-highscore box */
.death-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.death-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.death-stat.new-best {
  border-color: rgba(255, 214, 110, 0.6);
  background: rgba(255, 214, 110, 0.08);
  animation: best-pulse 1.2s ease-in-out 2;
}
.death-stat.new-best .hs-value { color: #ffd66e; }
@keyframes best-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 110, 0); }
  50%      { box-shadow: 0 0 18px 0 rgba(255, 214, 110, 0.35); }
}

.death-rank {
  font-size: 0.85rem;
  margin: 0;
}
.death-rank strong { color: var(--accent); }

.unlock-line {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(138, 124, 255, 0.18);
  border: 1px solid rgba(138, 124, 255, 0.5);
  color: #d8d2ff;
}

.overlay-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.overlay-actions .primary-btn,
.overlay-actions .ghost-btn { flex: 1; min-width: 120px; padding: 9px 16px; }

/* Tertiary text link inside the overlay-card, e.g. "Choose another bird" */
.overlay-link {
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 2px 6px;
  margin-top: 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.18);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.overlay-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ----- Skin picker modal ----- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  padding: 1rem;
  animation: overlay-in 0.25s ease;
}
.modal-overlay[hidden] { display: none; }

.modal {
  width: min(440px, 95vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.1rem 1rem;
  border-radius: 1.1rem;
  background: linear-gradient(145deg, #1a1c30, #0d0e1d);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.9),
    0 0 80px rgba(138, 124, 255, 0.15);
  animation: overlay-card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 10px;
}
.modal-coin-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 214, 110, 0.12);
  border: 1px solid rgba(255, 214, 110, 0.35);
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffd66e;
  font-variant-numeric: tabular-nums;
}
.modal-coin-balance .modal-coin-icon {
  font-size: 0.85rem;
  filter: drop-shadow(0 0 4px rgba(255, 214, 110, 0.5));
}

/* Milestones toggle (trophy) inside the modal header */
.modal-milestones-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.modal-milestones-btn:hover {
  color: #ffd166;
  border-color: rgba(255, 209, 102, 0.5);
  background: rgba(255, 209, 102, 0.08);
  transform: translateY(-1px);
}
.modal-milestones-btn .icon {
  width: 16px; height: 16px;
}
.modal-milestones-btn.active {
  color: #ffd166;
  border-color: #ffd166;
  background: rgba(255, 209, 102, 0.15);
}

/* Card pulse on buy — subtle, the cinematic moment is the center popup */
.skin-card.just-bought {
  animation: skin-buy-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 5;
}
@keyframes skin-buy-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); box-shadow: 0 0 30px rgba(255, 214, 110, 0.55); }
  100% { transform: scale(1); }
}

/* ===== Cinematic "Acquired!" center popup =====
   A radial flare bursts from screen center, conic light rays sweep behind it,
   then the bird name lands in a gold panel with gradient text. Confetti dots
   fly outward from the center. */
.acquired-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  pointer-events: none;
  overflow: hidden;
}

/* Bright radial flare — feels like a flashbulb pop */
.acquired-flare {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  height: 1200px;
  margin: -600px 0 0 -600px;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 214, 110, 0.55) 12%,
    rgba(138, 124, 255, 0.25) 28%,
    rgba(0, 0, 0, 0) 55%);
  animation: acq-flare 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  mix-blend-mode: screen;
}
@keyframes acq-flare {
  0%   { opacity: 0; transform: scale(0.2); }
  18%  { opacity: 1; transform: scale(1.0); }
  60%  { opacity: 0.55; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.7); }
}

/* Conic shimmer rays rotating slowly behind the popup */
.acquired-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  background: conic-gradient(from 0deg,
    rgba(255, 214, 110, 0)   0deg,
    rgba(255, 214, 110, 0.55) 8deg,
    rgba(255, 214, 110, 0)   16deg,
    rgba(255, 214, 110, 0)   30deg,
    rgba(255, 255, 255, 0.45) 38deg,
    rgba(255, 214, 110, 0)   46deg,
    rgba(255, 214, 110, 0)   60deg,
    rgba(255, 214, 110, 0.55) 68deg,
    rgba(255, 214, 110, 0)   76deg,
    rgba(255, 214, 110, 0)   90deg,
    rgba(255, 255, 255, 0.45) 98deg,
    rgba(255, 214, 110, 0)   106deg,
    rgba(255, 214, 110, 0)   120deg,
    rgba(255, 214, 110, 0.55) 128deg,
    rgba(255, 214, 110, 0)   136deg,
    rgba(255, 214, 110, 0)   150deg,
    rgba(255, 255, 255, 0.45) 158deg,
    rgba(255, 214, 110, 0)   166deg,
    rgba(255, 214, 110, 0)   180deg,
    rgba(255, 214, 110, 0.55) 188deg,
    rgba(255, 214, 110, 0)   196deg,
    rgba(255, 214, 110, 0)   210deg,
    rgba(255, 255, 255, 0.45) 218deg,
    rgba(255, 214, 110, 0)   226deg,
    rgba(255, 214, 110, 0)   240deg,
    rgba(255, 214, 110, 0.55) 248deg,
    rgba(255, 214, 110, 0)   256deg,
    rgba(255, 214, 110, 0)   270deg,
    rgba(255, 255, 255, 0.45) 278deg,
    rgba(255, 214, 110, 0)   286deg,
    rgba(255, 214, 110, 0)   300deg,
    rgba(255, 214, 110, 0.55) 308deg,
    rgba(255, 214, 110, 0)   316deg,
    rgba(255, 214, 110, 0)   330deg,
    rgba(255, 255, 255, 0.45) 338deg,
    rgba(255, 214, 110, 0)   346deg,
    rgba(255, 214, 110, 0)   360deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 80px, black 220px, transparent 420px);
          mask-image: radial-gradient(circle, transparent 80px, black 220px, transparent 420px);
  animation: acq-rays 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  mix-blend-mode: screen;
}
@keyframes acq-rays {
  0%   { opacity: 0; transform: scale(0.4) rotate(-30deg); }
  25%  { opacity: 0.9; transform: scale(1.0) rotate(40deg); }
  100% { opacity: 0; transform: scale(1.4) rotate(220deg); }
}

/* Centered popup card with the bird name */
.acquired-popup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 56px 22px;
  background: linear-gradient(180deg, rgba(20, 22, 46, 0.97), rgba(8, 10, 24, 0.97));
  border: 2px solid rgba(255, 214, 110, 0.85);
  border-radius: 18px;
  box-shadow:
    0 0 60px rgba(255, 214, 110, 0.55),
    0 0 200px rgba(138, 124, 255, 0.45),
    0 24px 48px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation:
    acq-popup-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    acq-popup-out 0.5s ease 1.2s forwards;
}

/* Hero bird canvas inside the popup */
.acquired-bird {
  display: block;
  width: 180px;
  height: 120px;
  filter: drop-shadow(0 0 28px rgba(255, 214, 110, 0.55));
  animation: acq-bird-float 1.5s ease-in-out infinite;
}
@keyframes acq-bird-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.acquired-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ffd66e;
  text-shadow: 0 0 12px rgba(255, 214, 110, 0.85);
}
.acquired-name {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffffff 0%, #ffe58e 50%, #ff9d2f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 214, 110, 0.7));
  white-space: nowrap;
}
@keyframes acq-popup-in {
  0%   { opacity: 0; transform: scale(0.4) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.08) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes acq-popup-out {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12) translateY(-30px); }
}

/* Confetti — gold and purple dots fly outward from center */
.acquired-confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
}
.acquired-confetti span {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  --tx: 0px;
  --ty: 0px;
  --rot: 0deg;
  background: #ffd66e;
  animation: acq-confetti 1.6s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
.acquired-confetti span:nth-child(odd)  { background: #b08aff; }
.acquired-confetti span:nth-child(4n)   { background: #fff; }
.acquired-confetti span:nth-child(5n+2) { background: #ff7a9a; }
@keyframes acq-confetti {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
}

/* "OWNED" badge for shop skins you've bought (replaces price) */
.skin-card.owned-shop {
  border-color: rgba(138, 124, 255, 0.45);
}
.skin-card.owned-shop::after {
  content: none;
}
.skin-card.owned-shop .skin-req {
  color: var(--muted);
}
.skin-card.owned-shop.selected .skin-req {
  color: #d8d2ff;
}
.modal-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
}
.modal-close {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.modal-close .icon {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.modal-sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 12px;
}

/* ===== Milestones progression list =====
   Distinct from the card grid — feels like an achievement track. */
.milestones-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 65vh;
  overflow-y: auto;
  padding: 2px 2px 4px;
}

.milestone-current {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 209, 102, 0.12), rgba(255, 209, 102, 0.04));
  border: 1px solid rgba(255, 209, 102, 0.35);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ffd166;
  margin-bottom: 4px;
}
.milestone-current strong {
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  margin-left: 2px;
}
.milestone-current .ms-best-icon {
  font-size: 1rem;
  filter: drop-shadow(0 0 4px rgba(255, 214, 110, 0.5));
}

.milestone-item {
  display: grid;
  grid-template-columns: 56px 60px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  text-align: left;
}
.milestone-item.earned {
  border-color: rgba(138, 124, 255, 0.4);
  background: rgba(138, 124, 255, 0.07);
}
.milestone-item.next {
  border-color: rgba(255, 209, 102, 0.55);
  background: rgba(255, 209, 102, 0.08);
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.15);
}
.milestone-item.locked {
  opacity: 0.55;
}

.milestone-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.milestone-score-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1px;
}
.milestone-score-value {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.milestone-item.earned .milestone-score-value { color: #d8d2ff; }
.milestone-item.next   .milestone-score-value { color: #ffd166; }

.milestone-bird {
  display: block;
  width: 60px;
  height: 44px;
  margin: 0 auto;
  filter: drop-shadow(0 0 6px rgba(138, 124, 255, 0.25));
}

.milestone-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.milestone-item.locked .milestone-name { color: var(--muted); }
.milestone-sub {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 1px;
}
.milestone-item.next .milestone-sub { color: #ffd166; }

.milestone-status {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 999px;
}
.milestone-item.earned .milestone-status {
  background: rgba(138, 124, 255, 0.22);
  color: #d8d2ff;
}
.milestone-item.locked .milestone-status {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}
.milestone-item.next .milestone-status {
  background: rgba(255, 209, 102, 0.22);
  color: #ffd166;
}

.skin-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 36px 12px;
  color: var(--text);
}
.skin-grid-empty p {
  margin: 0;
  font-size: 0.95rem;
}
.skin-grid-empty p + p {
  margin-top: 6px;
}
.skin-grid-empty .muted strong {
  color: var(--accent);
  font-weight: 700;
}

.skin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  overflow-y: auto;
  padding: 4px;
}

.skin-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
  text-align: center;
}
.skin-card:hover:not(.locked) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(138, 124, 255, 0.4);
  transform: translateY(-1px);
}
.skin-card.selected {
  background: rgba(138, 124, 255, 0.18);
  border-color: rgba(138, 124, 255, 0.7);
  box-shadow: 0 0 18px rgba(138, 124, 255, 0.35);
}
.skin-card.locked { cursor: default; opacity: 0.55; }
.skin-card canvas { width: 96px; height: 72px; display: block; }
.skin-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}
.skin-req {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.skin-card.selected .skin-req { color: #d8d2ff; }
.skin-card.locked .skin-req { color: #ff8aa3; }
.skin-card.selected::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 8px;
  width: 18px; height: 18px;
  background: linear-gradient(180deg, #9b8aff, #5a47e0);
  border-radius: 999px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.skin-card.locked::after {
  content: "🔒";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.85rem;
  filter: grayscale(0.5);
}

/* Shop skin — affordable: yellow tinted, hover affordance preserved */
.skin-card.shop {
  opacity: 1;
  border-color: rgba(255, 214, 110, 0.35);
}
.skin-card.shop:hover {
  background: rgba(255, 214, 110, 0.08);
  border-color: rgba(255, 214, 110, 0.7);
}
.skin-card.shop::after {
  content: "🪙";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.85rem;
  filter: none;
}
.skin-card.shop .skin-req {
  color: #ffd66e;
  font-weight: 700;
}
.skin-card.shop .coin-dot {
  color: #ffd66e;
  margin-right: 3px;
}

/* Shop skin — too expensive: dimmed, not clickable */
.skin-card.shop.poor {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: rgba(255, 80, 110, 0.3);
}
.skin-card.shop.poor:hover {
  background: rgba(255, 255, 255, 0.03);
  transform: none;
}
.skin-card.shop.poor .skin-req {
  color: #ff8aa3;
}

/* The HTML hidden attribute would normally render the empty meta-pill as a tiny
   empty box; force display:none when the attribute is present. */
[id="metaUnlock"][hidden] { display: none !important; }

/* ----- Score celebrations: milestone toast + new-best flash ----- */

/* Milestone toast — pops in dead-center on score 10/25/50/... */
.milestone-toast {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  pointer-events: none;
  z-index: 55;
  text-align: center;
  opacity: 0;
  filter: drop-shadow(0 0 22px rgba(255, 214, 110, 0.65));
}
.milestone-toast.show {
  animation: milestone-pop 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.milestone-toast-num {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #ffe58e 55%, #ff9d2f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 0 32px rgba(255, 214, 110, 0.45);
}
.milestone-toast-label {
  margin-top: 4px;
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffd66e;
  text-shadow: 0 0 14px rgba(255, 214, 110, 0.7);
}
@keyframes milestone-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-6deg); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1) translateY(-26px); }
}

/* NEW BEST corner banner — flashes when you cross your previous all-time best */
.newbest-flash {
  position: fixed;
  top: 7%;
  right: 18px;
  pointer-events: none;
  z-index: 55;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #9b8aff, #5a47e0);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(90, 71, 224, 0.55), 0 0 22px rgba(155, 138, 255, 0.5);
  opacity: 0;
  transform: translateX(40px);
}
.newbest-flash.show {
  animation: newbest-slide 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes newbest-slide {
  0%   { opacity: 0; transform: translateX(40px) scale(0.85); }
  10%  { opacity: 1; transform: translateX(0) scale(1.08); }
  22%  { opacity: 1; transform: translateX(0) scale(1); }
  82%  { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(40px) scale(1); }
}

/* Mini shake on milestone — subtler than the death shake */
.canvas-wrap.mini-shake {
  animation: mini-shake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes mini-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 1px, 0); }
  40%, 60% { transform: translate3d(3px, -1px, 0); }
}

/* ----- World transition toast ----- */
.world-toast {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  pointer-events: none;
  z-index: 60;
  font-family: var(--font-sans);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 24px var(--accent),
    0 0 48px rgba(138, 124, 255, 0.5),
    0 4px 0 rgba(0, 0, 0, 0.5);
  opacity: 0;
  user-select: none;
}
.world-toast.show {
  animation: world-toast 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes world-toast {
  0%   { opacity: 0; transform: translateX(-50%) translateY(18px) scale(0.92); }
  18%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  28%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  78%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(1.08); }
}

/* ----- Util buttons (top-right) — match site-wide .util-btns ----- */
/* base.css already defines .util-btns / .util-btn; only adjust icon size here */
.util-btn .icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.util-btn[aria-pressed="true"] .icon { opacity: 0.45; }

/* The settings gear is only meaningful while a run is in progress —
   on the menu the player already has full control of every choice. */
body:not(.in-game) #settingsBtn { display: none; }

/* Pause-overlay kbd hint */
.muted kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-mono);
  font-size: 11px;
  margin: 0 2px;
  color: var(--text);
}

/* ----- Responsive ----- */

@media (max-width: 600px) {
  body { padding: 12px 10px; }
  .app { gap: 12px; }
  .top h1 { font-size: 1.4rem; }
  .panel { padding: 14px 12px 12px; border-radius: 18px; }
  .menu-panel { padding: 24px 18px 20px; gap: 16px; }
  .menu-hint { font-size: 0.65rem; }
  .primary-btn { padding: 10px 20px; font-size: 13px; }
  .overlay-card { padding: 22px 24px; border-radius: 18px; }
  .overlay-card h2 { font-size: 1.3rem; }
  .skin-grid { grid-template-columns: repeat(2, 1fr); }
}