/* ================= INTERACTION FX (loaded last) ================= */

/* --- buttons: lift, glow, shine sweep, ripple --- */
.btn, .lp-cta, .mode-card, .tab { position: relative; overflow: hidden; isolation: isolate; }
.btn { transition: transform .18s cubic-bezier(.2,.9,.3,1.4), background .15s, border-color .15s, box-shadow .2s; }
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.96); transition-duration: .06s; }
.btn.primary:hover:not(:disabled) { box-shadow: 0 8px 28px rgba(245,197,66,.45), 0 0 0 1px rgba(255,230,150,.5) inset; }
.btn.ghost:hover:not(:disabled) { border-color: var(--gold); color: var(--gold2); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn::after, .lp-cta::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.38) 48%, rgba(255,255,255,.08) 55%, transparent 70%);
  transform: translateX(-130%); transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.btn:hover:not(:disabled)::after, .lp-cta:hover::after { transform: translateX(130%); }
.lp-cta.ghost::after { background: linear-gradient(115deg, transparent 30%, rgba(245,197,66,.25) 50%, transparent 70%); }

.ripple { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.45), rgba(255,255,255,0) 70%); transform: scale(0); animation: fxRipple .65s ease-out forwards; pointer-events: none; z-index: 0; }
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }

/* magnetic CTAs (fx.js sets --tx/--ty) */
.lp-cta, .btn.big { transform: translate(var(--tx, 0), var(--ty, 0)); transition: transform .25s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s, background .15s; }
.lp-cta:hover, .btn.big:hover:not(:disabled) { transform: translate(var(--tx, 0), var(--ty, 0)) translateY(-3px) scale(1.04); }
.lp-cta:active, .btn.big:active:not(:disabled) { transform: translate(var(--tx, 0), var(--ty, 0)) scale(.97); }
.lp-cta:hover span:not(.ripple) { animation: arrowNudge .7s ease-in-out infinite; }
@keyframes arrowNudge { 50% { transform: translateX(6px); } }

/* --- spotlight cards (fx.js sets --mx/--my) --- */
.mode-card, .lp-step, .lp-ai-card, .lp-board, .lp-rules, .stat, .hist { position: relative; }
.mode-card::before, .lp-step::before, .lp-ai-card::before, .lp-board::before, .lp-rules::before, .hist::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(245,197,66,.13), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.mode-card:hover::before, .lp-step:hover::before, .lp-ai-card:hover::before, .lp-board:hover::before, .lp-rules:hover::before, .hist:hover::before { opacity: 1; }
.mode-card > *:not(.ripple), .lp-ai-card > *, .lp-board > *, .lp-rules > * { position: relative; z-index: 1; }
.mode-card { transition: transform .25s cubic-bezier(.2,.9,.3,1.3), border-color .2s, box-shadow .25s; }
button.mode-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(245,197,66,.35), 0 0 40px rgba(245,197,66,.12); }
button.mode-card:active { transform: translateY(-1px) scale(.985); }
.mode-card:hover .mode-icon { animation: iconWiggle .7s ease; }
@keyframes iconWiggle { 20% { transform: rotate(-14deg) scale(1.2); } 45% { transform: rotate(10deg) scale(1.2); } 70% { transform: rotate(-5deg) scale(1.1); } }
.mode-icon { display: inline-block; transition: transform .2s; }
.stat { transition: transform .2s, background .2s; }
.stat:hover { transform: translateY(-2px); background: #1a1e26; }
.hist { transition: transform .2s, border-color .2s; }
.hist:hover { transform: translateX(4px); border-color: rgba(245,197,66,.35); }
.lp-ai-card, .lp-board, .lp-rules { transition: transform .25s, border-color .25s; }
.lp-ai-card:hover, .lp-board:hover, .lp-rules:hover { transform: translateY(-4px); border-color: rgba(245,197,66,.35); }
.lp-ai-card:hover .ai-emoji { animation: iconWiggle .7s ease; }
.tier { transition: transform .2s cubic-bezier(.2,.9,.3,1.4); cursor: default; }
.tier:hover { transform: translateY(-4px) scale(1.06); }

/* --- nav underline that grows from the center --- */
.topbar nav a, .lp-links a { position: relative; }
.topbar nav a::after, .lp-links a::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gold); transition: left .25s, right .25s; }
.topbar nav a:hover::after, .topbar nav a.active::after, .lp-links a:hover::after { left: 12px; right: 12px; }
.lp-links a:hover::after { left: 0; right: 0; }
.brand .logo { transition: transform .4s cubic-bezier(.2,.9,.3,1.5); }
.brand:hover .logo { transform: rotateY(360deg) scale(1.1); }

/* tabs */
.tab { transition: color .2s, background .2s; }
.tab:hover:not(.active) { color: var(--text); background: rgba(255,255,255,.04); }
.tab.active { box-shadow: 0 2px 10px rgba(0,0,0,.3); }

/* inputs */
input { transition: border-color .2s, box-shadow .2s; }
input:focus { box-shadow: 0 0 0 3px rgba(245,197,66,.18); }

/* --- streak avatar glow --- */
.avatar.on-fire { border-color: #ff6a00; animation: fireRing 1.4s ease-in-out infinite; }
@keyframes fireRing { 0%, 100% { box-shadow: 0 0 0 2px rgba(255,106,0,.6), 0 0 14px rgba(238,9,121,.5); } 50% { box-shadow: 0 0 0 4px rgba(255,106,0,.8), 0 0 28px rgba(238,9,121,.7); } }

/* --- leaderboard rows stagger in --- */
table.lb tr { animation: lbRow .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); transition: background .15s; }
table.lb tr:hover td { background: rgba(255,255,255,.03); }
@keyframes lbRow { from { opacity: 0; transform: translateX(-18px); } }
.history .hist { animation: lbRow .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 40ms); }

/* --- game feel --- */
.cam.flash::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(255,223,126,.55), rgba(245,197,66,.15) 50%, transparent 75%); animation: camFlash .6s ease-out forwards; z-index: 4; }
@keyframes camFlash { from { opacity: 1; } to { opacity: 0; } }
.cam.final { animation: lastSeconds 1s ease-in-out infinite; }
@keyframes lastSeconds { 50% { box-shadow: 0 0 0 3px rgba(255,93,93,.55), inset 0 0 60px rgba(255,93,93,.25); } }
.feed li { transition: transform .15s; }
.feed li:hover { transform: translateY(-2px); }
.feed li.legendary-li { border-color: var(--gold); box-shadow: 0 0 14px rgba(245,197,66,.35); }

.fx-coin { position: fixed; z-index: 100; pointer-events: none; font: 900 24px Inter, sans-serif; color: var(--gold); text-shadow: 0 2px 8px rgba(0,0,0,.6); will-change: transform; }
.fx-coin.rain { z-index: 40; }

/* --- results --- */
.result-title { animation: stampIn .55s cubic-bezier(.2,.9,.3,1.35) both; }
@keyframes stampIn { from { opacity: 0; transform: scale(2.4) rotate(-6deg); filter: blur(6px); } }
.result-title.win { background: linear-gradient(100deg, #fff6d6, var(--gold) 40%, #fff6d6 60%, var(--gold)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: stampIn .55s cubic-bezier(.2,.9,.3,1.35) both, shimmer 3s linear .6s infinite; filter: drop-shadow(0 0 22px rgba(245,197,66,.4)); }
.result-sub { animation: fadeUp .5s .3s both; }
.record { position: relative; overflow: hidden; animation: fadeUp .5s both; }
.record:nth-child(2) { animation-delay: .1s; }
.record::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%); transform: translateX(-120%); animation: badgeShine 2.4s ease-in-out 1s infinite; }
@keyframes badgeShine { 60%, 100% { transform: translateX(120%); } }
.receipt { animation: receiptPrint .7s cubic-bezier(.2,.8,.2,1) both; transform-origin: top center; }
.receipt-wrap:nth-child(2) .receipt { animation-delay: .15s; }
.receipt-wrap { transition: transform .25s; }
.receipt-wrap:hover { transform: rotate(-.6deg) translateY(-3px); }
@keyframes receiptPrint { from { clip-path: inset(-40px -40px 100% -40px); transform: translateY(-14px); } to { clip-path: inset(-40px -40px -40px -40px); } }
.receipt .ln { animation: fadeUp .3s both; animation-delay: calc(.35s + var(--i, 0) * 60ms); }

/* toast + modals */
.toast:not(.hidden) { animation: toastIn .35s cubic-bezier(.2,.9,.3,1.3); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 20px) scale(.95); } }
.modal:not(.hidden) { animation: fadeBg .2s ease; }
@keyframes fadeBg { from { opacity: 0; } }
.modal:not(.hidden) .modal-card { animation: modalIn .3s cubic-bezier(.2,.9,.3,1.2); }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.96); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }

@media (hover: none) {
  .btn:hover:not(:disabled), button.mode-card:hover, .stat:hover, .hist:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}