/* Shared design system — loaded last on every page so it overrides older one-off styles.
   Flat, confident buttons: solid fills, 12px radius, no glossy gradients or chunky bottom borders. */
:root {
  --ui-ink: #111827; --ui-ink-2: #4b5563; --ui-line: #e5e7eb; --ui-surface: #ffffff; --ui-bg: #f3f5f9;
  --ui-primary: #2563eb; --ui-primary-d: #1d4ed8; --ui-gold: #f5b301; --ui-gold-d: #d99a00;
  --ui-green: #16a34a; --ui-red: #e5484d; --ui-teal: #0ea5a4;
  --ui-r: 12px; --ui-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 12px rgba(17, 24, 39, 0.06);
}
body { font-family: 'Gilroy', 'M PLUS 1p', 'Segoe UI', system-ui, sans-serif; letter-spacing: 0.01em; }

/* ---------- buttons ---------- */
.pill, .btn, .sbtn, .lvlup, .activate, .g-actions button, .end-btn, .act.primary, .buy-prem {
  border-radius: var(--ui-r) !important; font-weight: 700 !important; letter-spacing: 0 !important; text-shadow: none !important;
  -webkit-text-stroke: 0 !important; transition: background-color 0.15s, transform 0.12s, box-shadow 0.15s, opacity 0.15s !important; animation: none;
}
.pill, .btn-blue, .sbtn.primary, .g-next, .act.primary { background: var(--ui-primary) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3) !important; border: 0 !important; }
.pill:hover:not(:disabled), .btn-blue:hover, .sbtn.primary:hover, .g-next:hover { background: var(--ui-primary-d) !important; transform: none !important; filter: none !important; }
.pill:active:not(:disabled), .btn:active, .sbtn:active, .lvlup:active, .activate:active { transform: scale(0.98) !important; }
.pill.ghost, .btn-ghost, .g-skip, .sbtn:not(.primary) { background: var(--ui-surface) !important; color: var(--ui-ink) !important; box-shadow: inset 0 0 0 1px var(--ui-line) !important; }
.btn-yellow, .buy-prem { background: var(--ui-gold) !important; color: #3b2a00 !important; box-shadow: none !important; }
.btn-red { background: #fff !important; color: var(--ui-red) !important; box-shadow: inset 0 0 0 1px #f5c2c4 !important; }
.pill:disabled { opacity: 0.45 !important; }

/* ---------- surfaces ---------- */
.lvl em { background: var(--ui-primary) !important; }
.lvl i span { background: var(--ui-primary) !important; }
.g-bubble > b { color: var(--ui-primary) !important; }

/* ---------- the big play button: solid, no purple ---------- */
.play-btn { background: #f0503c !important; box-shadow: 0 8px 20px rgba(240, 80, 60, 0.28) !important; border-radius: 18px !important; }
.play-btn::after { opacity: 0.5; }

/* ---------- lobby tiles: no purple ---------- */
.t-pass { background: linear-gradient(160deg, rgba(14, 165, 164, 0.55), rgba(12, 120, 140, 0.94) 70%), url('../assets/ui/tiles/pass.webp') 70% center / cover !important; box-shadow: 0 10px 24px rgba(12, 120, 140, 0.25) !important; }
.t-gift { background: linear-gradient(160deg, rgba(255, 140, 120, 0.5), rgba(230, 72, 100, 0.92) 70%), url('../assets/ui/tiles/gift.webp') 70% center / cover !important; box-shadow: 0 10px 24px rgba(230, 72, 100, 0.25) !important; }
.t-missions { background: linear-gradient(160deg, rgba(255, 170, 60, 0.5), rgba(238, 120, 20, 0.92) 70%), url('../assets/ui/tiles/missions.webp') 70% center / cover !important; box-shadow: 0 10px 24px rgba(238, 120, 20, 0.25) !important; }

/* ---------- motion defaults: everything eases in ---------- */
@media (prefers-reduced-motion: no-preference) {
  .row, .listing, .cc, .reward, .pr, .ev, .rank, .set-row, .gem-pack, .chapter { animation: uiIn 0.4s cubic-bezier(.2,.9,.3,1) both; }
  .listing:nth-child(n), .row:nth-child(n), .cc:nth-child(n) { animation-delay: calc(min(var(--n, 0), 12) * 0.03s); }
}
@keyframes uiIn { from { opacity: 0; transform: translateY(10px); } }