/* UI-only motion. Keep the simulation, canvas and pointer coordinates untouched. */
:root {
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-settle: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ui-fast: 160ms;
  --ui-duration: 280ms;
}

button,
.quick-tower-choice,
.tower-btn,
.mini-stat,
.leaderboard-entry,
input,
select {
  transition: background-color var(--ui-fast) ease,
    color var(--ui-fast) ease,
    border-color var(--ui-fast) ease,
    box-shadow var(--ui-duration) var(--ui-ease),
    opacity var(--ui-fast) ease,
    translate var(--ui-duration) var(--ui-ease),
    scale var(--ui-duration) var(--ui-ease);
}

/* Independent transforms preserve existing positioning and selection effects. */
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):not(.is-disabled):not(.is-level-disabled):hover {
    translate: 0 -1px;
  }

  :is(.level-card, .daily-level-grid button):not(:disabled):not(.is-locked):hover {
    translate: 0 -3px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 8px 20px rgb(0 0 0 / 16%);
  }

  .tower-btn:not(:disabled):not(.is-level-disabled):hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tower-accent, var(--accent)) 45%, transparent);
  }
}

button:not(:disabled):not(.is-disabled):active {
  translate: 0 1px;
  scale: 0.97;
  transition-duration: 70ms;
}

button:disabled,
button.is-disabled,
button.is-level-disabled {
  translate: none;
  scale: 1;
}

button:focus-visible,
.leaderboard-entry:focus-visible,
.leaderboard-tab-select:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

:is(.score-popup-input, .account-popup-input):focus-visible {
  border-bottom-color: var(--accent-strong);
  box-shadow: 0 2px 0 var(--accent-strong);
}

.mini-stat-value,
.gold-meter-value,
.score-popup-value,
.leaderboard-score {
  font-variant-numeric: tabular-nums;
}

/* Quiet selection markers, rather than continuously pulsing controls. */
.leaderboard-tab {
  position: relative;
}

.leaderboard-tab::after {
  content: '';
  position: absolute;
  inset: auto 12px 0;
  height: 2px;
  background: var(--accent-strong);
  pointer-events: none;
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity var(--ui-fast) ease, transform var(--ui-duration) var(--ui-ease);
}

.leaderboard-tab.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.tower-btn::after {
  transition: opacity var(--ui-duration) ease, transform 360ms var(--ui-ease);
}

.gold-meter-pips span {
  transition: background-color 220ms ease, box-shadow 220ms ease;
}

.gold-meter-value {
  transition: color 220ms ease;
}

/* Surface depth is reserved for floating UI, keeping the board uncluttered. */
.score-popup,
.account-popup,
.quick-tower-picker,
.creep-tooltip {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%),
    0 12px 40px rgb(0 0 0 / 28%), 0 2px 8px rgb(0 0 0 / 16%);
}

.score-popup,
.account-popup {
  pointer-events: none;
  translate: 0 10px;
  scale: 0.975;
  transition: opacity 180ms ease,
    translate 320ms var(--ui-ease),
    scale 320ms var(--ui-ease),
    visibility 0s linear 320ms;
}

.score-popup.visible,
.account-popup.visible {
  pointer-events: auto;
  translate: 0 0;
  scale: 1;
  transition-delay: 0s;
}

/* Children with explicit pointer-events must also stop intercepting on exit. */
.score-popup:not(.visible) *,
.account-popup:not(.visible) * {
  pointer-events: none;
}

.score-popup-progress span {
  transform-origin: left;
  transition: width 500ms var(--ui-ease), background-color 240ms ease;
}

@keyframes ui-reveal {
  from { opacity: 0; translate: 0 7px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes ui-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* A distinct name restarts the persistent topbar when the screen changes. */
@keyframes ui-menu-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ui-score-reveal {
  from { opacity: 0; translate: 0 5px; scale: 0.96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes ui-progress-reveal {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {
  /* No transforms on ancestors of fixed-position tooltips and menus. */
  body:not(.app-hidden) .stream-topbar {
    animation: ui-fade 320ms ease backwards;
  }

  body:not(.app-hidden) .level-select-mode .stream-topbar {
    animation-name: ui-menu-fade;
  }

  body:not(.app-hidden) .stream-footer {
    animation: ui-fade 400ms 50ms ease both;
  }

  /* Fade the complete board, including labels, without moving its hit targets. */
  body:not(.app-hidden) .game-panel:not(.level-select-mode) .field-shell {
    animation: ui-fade 480ms 80ms var(--ui-ease) backwards;
  }

  /* Wait for the app reveal, and stagger in visual order (tutorial moves last). */
  body:not(.app-hidden) .levels-menu.visible .levels-section {
    animation-name: ui-reveal;
    animation-duration: 380ms;
    animation-timing-function: var(--ui-ease);
    animation-fill-mode: backwards;
  }

  .levels-menu.visible .levels-section:nth-of-type(2) { animation-delay: 40ms; }
  .levels-menu.visible .levels-section:nth-of-type(3) { animation-delay: 80ms; }
  .levels-menu.visible .levels-section:nth-of-type(4) { animation-delay: 120ms; }

  body:not(.app-hidden) .levels-menu.visible.is-tutorial-complete #recommendedSection { animation-delay: 0ms; }
  body:not(.app-hidden) .levels-menu.visible.is-tutorial-complete #dailySection { animation-delay: 40ms; }
  body:not(.app-hidden) .levels-menu.visible.is-tutorial-complete #challengeSection { animation-delay: 80ms; }
  body:not(.app-hidden) .levels-menu.visible.is-tutorial-complete #tutorialSection { animation-delay: 120ms; }

  .quick-tower-picker,
  .creep-tooltip.visible,
  .developer-menu.visible:not(.is-editor-visible) {
    animation: ui-reveal 200ms var(--ui-ease) backwards;
  }

  .leaderboard-entry {
    animation: ui-reveal 300ms var(--ui-ease) backwards;
  }

  .leaderboard-entry:nth-child(2) { animation-delay: 25ms; }
  .leaderboard-entry:nth-child(3) { animation-delay: 50ms; }
  .leaderboard-entry:nth-child(4) { animation-delay: 75ms; }
  .leaderboard-entry:nth-child(n + 5) { animation-delay: 100ms; }

  .score-popup.visible .score-popup-value {
    animation: ui-score-reveal 480ms 60ms var(--ui-ease) backwards;
  }

  .score-popup.visible :is(.score-popup-goal, .score-popup-detail, .score-popup-field, .score-popup-actions),
  .account-popup.visible :is(.account-popup-field, .account-popup-actions) {
    animation: ui-reveal 360ms 100ms var(--ui-ease) backwards;
  }

  .score-popup.visible .score-popup-progress span {
    animation: ui-progress-reveal 650ms 120ms var(--ui-ease) backwards;
  }

  #mobileLeaderboardDialog[open] {
    animation: ui-reveal 320ms var(--ui-ease) backwards;
  }

  #mobileLeaderboardDialog[open]::backdrop {
    animation: ui-fade 240ms ease backwards;
  }
}

/* Short fades only when motion is reduced; retain animationend cleanup for gold. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  button,
  .score-popup,
  .account-popup {
    translate: none !important;
    scale: 1 !important;
  }
}