/* ==========================================================================
   Dino Run — endless runner. base.css handles tokens, reset, Inter font,
   .home-btn, .util-btns, focus-visible, reduced-motion, site footer.
   ========================================================================== */

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

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

.app {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.top { width: 100%; text-align: center; }
.top h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.top h1.fade-out { opacity: 0; transform: translateY(-8px); }
.top h1.fade-in { animation: title-in 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes title-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Panels */
.panel {
  width: 100%;
  background: linear-gradient(145deg, rgba(18, 18, 18, 0.95), var(--bg) 50%, var(--bg-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 20px 18px 18px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
[hidden] { display: none !important; }
.hidden { display: none !important; }

.panel.show-anim { animation: panel-in 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.panel.show-anim > * { animation: child-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.panel.show-anim > *:nth-child(1) { animation-delay: 0.05s; }
.panel.show-anim > *:nth-child(2) { animation-delay: 0.1s; }
.panel.show-anim > *:nth-child(3) { animation-delay: 0.15s; }
@keyframes panel-in {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes child-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Menu — narrow + centered (the game panel stays wide for the run) */
.menu-panel { align-self: center; }
.menu-highscore {
  padding: 12px 28px;
  display: flex;
  gap: 16px; }
.hs-text { display: flex; gap: 6px; }
.hs-value {
  font-variant-numeric: tabular-nums; }
.menu-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.menu-actions .primary-btn { width: 100%; }
.menu-actions .ghost-btn { width: 100%; }

/* HUD */
.hud {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 720px;
  padding: 0 4px;
}
.hud-score { font-size: 0.85rem; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-score .score-bump { animation: score-pop 0.3s ease; }
@keyframes score-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); color: var(--accent); }
  100% { transform: scale(1); }
}
.hud-score span { display: inline-block; }
.hud-label {
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-right: 6px;
}

/* Stage / canvas */
.stage {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  touch-action: none;
}
#canvas { display: block; width: 100%; height: auto; }
.ctrl-hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  font-size: 0.72rem;
  color: var(--muted);
  background: rgba(9, 9, 9, 0.55);
  padding: 4px 12px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.ctrl-hint.gone { opacity: 0; }

/* Buttons */
.primary-btn {
  padding: 11px 24px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease; }
.ghost-btn {
  padding: 0 14px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
  display: inline-flex;
  min-height: 38px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.icon-btn .icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 9, 9, 0.78);
  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 {
  position: relative;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  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); }
.muted { color: var(--muted); font-size: 0.9rem; }
.overlay-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 600px) {
  body { padding: 12px 10px; }
  .app { gap: 12px; }
  .top h1 { font-size: 1.4rem; }
  .panel { padding: 14px 12px 12px; }
  .ctrl-hint { font-size: 0.66rem; }
  .primary-btn { padding: 10px 20px; }
  .overlay-card { padding: 22px 24px; }
  .overlay-card h2 { font-size: 1.3rem; }
}
.util-btn[hidden] { display: none; }

/* --- Coins --- */
.coin-dot { color: #ffd166; }
.hud-coins { color: #ffd166; }
.coin-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffd166;
  font-variant-numeric: tabular-nums;
}
.hs-trophy {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.12s ease; }
.hs-trophy svg { width: 19px; height: 19px; }
/* ====================================================================
   Flappy-style meta-game UI (ported): menu cards, stats, shop modal,
   skin grid, milestones. Generic + token-based, lifted from /games/flappy/.
   ==================================================================== */
/* Best + Coins cards side-by-side */
.menu-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.menu-highscore {
  padding: 12px 14px;
  display: flex;
  gap: 10px; }
.hs-text { display: flex; gap: 6px; }
/* Coin card — gold accent, no hover (it's display-only, not a button) */
.coin-card .coin-medallion {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0; border-radius: 50%;
}
.coin-card,
.coin-card:hover {
  cursor: default;
  transform: none !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;
  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; }

/* 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; }

/* 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;
}
/* 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;
}
@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: 4px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #d8d2ff;
}

.overlay-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  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);
  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: var(--panel-raised);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9);
  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: 4px;
  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(255, 255, 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(21, 21, 21, 0.97), rgba(9, 9, 9, 0.97));
  border: 2px solid rgba(255, 214, 110, 0.85);
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(255, 214, 110, 0.55), 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(255, 255, 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: 4px;
  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(255, 255, 255, 0.4);
  background: rgba(255, 255, 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(255, 255, 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: 4px;
}
.milestone-item.earned .milestone-status {
  background: rgba(255, 255, 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(255, 255, 255, 0.4);
  transform: translateY(-1px);
}
.skin-card.selected {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: none;
}
.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: 4px;
  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); }
}