:root {
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --motion-fast: 160ms;
  --motion-med: 280ms;
  --motion-slow: 520ms;
}

/* Smooth everything that benefits from it without animating layout itself. */
button, a, input, .auth-card, .hero-card, .action-card, .host-card, .summary-card,
.category, .category-head, .challenge-row, .leader-row, .album-item, .payment-gate,
.profile-chip, .theme-toggle, .feature-chip, .pill, .prize-chip, .pool-strip,
.story-launch, .modal, .modal-backdrop, .bottom-nav button, .file-label {
  transition-timing-function: var(--ease-out) !important;
}

button, a, .action-card, .host-card, .challenge-row, .leader-row, .album-item,
.profile-chip, .file-label, .bottom-nav button {
  transition-property: transform, opacity, background-color, border-color, box-shadow, color;
  transition-duration: var(--motion-fast);
}

.surface-enter { animation: surfaceEnter var(--motion-med) var(--ease-out) both; }
.modal-backdrop { animation: backdropIn var(--motion-fast) ease both; }
.modal-enter { animation: modalIn var(--motion-med) var(--ease-out) both; transform-origin: 50% 85%; }
.modal-backdrop.leaving { animation: backdropOut var(--motion-fast) ease both; }

.action-card:hover, .host-card:hover, .album-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent), var(--line) 60%); }
.challenge-row:hover { transform: translateX(2px); }
.leader-row { transition-duration: var(--motion-med); }
.leader-row:hover { transform: translateY(-1px); }
.bottom-nav button:active, .btn:active, .icon-btn:active, .profile-chip:active { transform: scale(.97); }
.category .challenge-list { overflow: hidden; transition: grid-template-rows var(--motion-med) var(--ease-out), opacity var(--motion-med) ease; }
.category-head .chev { transition: transform var(--motion-med) var(--ease-out); }

.party-safety {
  margin: 14px 0 20px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warning), transparent 70%);
  border-radius: 15px;
  background: color-mix(in srgb, var(--warning), transparent 92%);
  color: color-mix(in srgb, var(--warning), var(--text) 42%);
  font-size: .82rem;
  line-height: 1.45;
}

.micro-legal, .legal-inline, .global-legal {
  color: var(--soft);
  font-size: .73rem;
  line-height: 1.45;
}
.micro-legal { text-align: center; margin: 16px 0 0; }
.micro-legal a, .legal-inline a, .global-legal a { color: var(--muted); text-decoration: none; font-weight: 750; }
.micro-legal a:hover, .legal-inline a:hover, .global-legal a:hover { color: var(--text); }
.legal-inline { display: flex; gap: 14px; margin: 14px 0; }
.global-legal { position: relative; z-index: 2; text-align: center; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
.global-legal span { opacity: .6; padding: 0 7px; }
.game-shell + .global-legal { display: none; }

.payment-gate.prize-glow {
  position: relative;
  overflow: hidden;
}
.payment-gate.prize-glow::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  right: -90px;
  top: -90px;
  background: radial-gradient(circle, rgba(245,196,81,.19), transparent 68%);
  pointer-events: none;
}
.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  margin: 12px 0;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2), transparent 16%);
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
  cursor: pointer;
}
.terms-check input { margin-top: 2px; accent-color: var(--accent); }
.terms-check a { color: var(--text); font-weight: 760; }

.pool-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 2px 0 18px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb,var(--surface-2),transparent 7%), color-mix(in srgb,var(--surface-solid),transparent 10%));
  box-shadow: var(--shadow-soft);
}
.pool-strip > div { padding: 10px 11px; border-radius: 13px; background: color-mix(in srgb, var(--surface-3), transparent 18%); }
.pool-strip span { display: block; color: var(--soft); font-size: .67rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; margin-bottom: 5px; }
.pool-strip strong { font-size: 1rem; }
.pool-strip .pool-net { background: linear-gradient(130deg, color-mix(in srgb,var(--accent),transparent 84%), color-mix(in srgb,var(--accent-2),transparent 88%)); }
.pool-strip .pool-net strong { color: color-mix(in srgb,var(--gold),var(--text) 30%); }

.leader-score { display: flex !important; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 86px; }
.leader-score > strong { font-size: .98rem; }
.leader-score > span { color: var(--soft); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.prize-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 23px;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold), transparent 86%);
  border: 1px solid color-mix(in srgb, var(--gold), transparent 68%);
  color: color-mix(in srgb, var(--gold), var(--text) 18%);
  font-style: normal;
  font-size: .67rem;
  font-weight: 900;
  white-space: nowrap;
  animation: prizeBreathe 2.8s ease-in-out infinite;
}

.card-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fee-pill { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: color-mix(in srgb,var(--gold),transparent 86%); border: 1px solid color-mix(in srgb,var(--gold),transparent 72%); color: color-mix(in srgb,var(--gold),var(--text) 25%); font-size: .68rem; font-weight: 900; }
.mini-stats { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.mini-stats span { padding: 6px 9px; border-radius: 999px; background: var(--track); color: var(--muted); font-size: .72rem; font-weight: 760; }
.locked-note { color: var(--soft); font-size: .76rem; font-weight: 760; margin-top: 12px; }

.prize-mode-toggle { margin: 0 0 16px; }
.prize-modal { max-width: 520px; }
.prize-modal #prize-fields { display: grid; gap: 10px; }
.prize-field { grid-template-columns: 88px 1fr; align-items: center; }
.prize-field label { margin: 0; }
.prize-input-wrap { position: relative; }
.prize-input-wrap > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--soft); font-weight: 800; z-index: 1; }
.prize-input-wrap input { padding-left: 32px; }
.smart-explain { display: grid; gap: 6px; padding: 15px; border-radius: 16px; border: 1px solid color-mix(in srgb,var(--accent),transparent 76%); background: color-mix(in srgb,var(--accent),transparent 92%); }
.smart-explain span { color: var(--muted); line-height: 1.45; font-size: .82rem; }
.prize-preview { margin: 14px 0; padding: 13px; border-radius: 16px; background: color-mix(in srgb,var(--surface-3),transparent 12%); border: 1px solid var(--line); }
.preview-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 2px 10px; color: var(--muted); font-size: .78rem; }
.preview-head strong { color: var(--text); }

.payout-card { border-color: color-mix(in srgb,var(--success),transparent 72%); background: linear-gradient(145deg,color-mix(in srgb,var(--success),transparent 94%),color-mix(in srgb,var(--surface-solid),transparent 4%)); }
.deep-link-note { margin-top: 10px; padding: 9px 10px; border-radius: 12px; background: color-mix(in srgb,var(--success),transparent 91%); color: color-mix(in srgb,var(--success),var(--text) 35%); font-size: .78rem; font-weight: 760; }

.toast { transform: translateY(8px) scale(.98); opacity: 0; transition: transform var(--motion-med) var(--ease-out), opacity var(--motion-fast) ease !important; }
.toast.show { transform: translateY(0) scale(1); opacity: 1; }

@keyframes surfaceEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes prizeBreathe { 0%,100% { box-shadow: 0 0 0 rgba(245,196,81,0); } 50% { box-shadow: 0 0 18px rgba(245,196,81,.12); } }

@media (max-width: 620px) {
  .pool-strip { grid-template-columns: 1fr 1fr; }
  .pool-strip .pool-net { grid-column: 1 / -1; }
  .prize-field { grid-template-columns: 70px 1fr; }
  .leader-row { grid-template-columns: 38px minmax(0,1fr) auto !important; }
  .leader-score { min-width: 76px; }
  .prize-chip { font-size: .61rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}