/* ===== Engagement animation: 3000 ms total (see components/engage-anim.js). Transforms + opacity only. =====
   0-15%   intro      (0-450ms)     dim + cards slide in toward centre
   15-35%  approach   (450-1050ms)   cards rush together, speed lines
   35-55%  impact     (1050-1650ms)  golden burst, rebound, (shake + sound from JS at 1050ms)
   55-75%  stats      (1650-2250ms) "4K VS 6M" pops in, numbers count up
   75-100% result     (2250-3000ms) friendly result line, then fade out */
.eng { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; font-family: var(--font-display, inherit); animation: eng-fade 3s linear both; --ew: clamp(110px, 12.5vw, 178px); }
@keyframes eng-fade { 0% { opacity: 0; } 8% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }
.eng-dim { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, rgba(35, 50, 120, .45), rgba(15, 22, 60, .7)); animation: eng-dim 3s ease both; }
@keyframes eng-dim { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 1; } }
.eng-title { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 900; letter-spacing: .08em; color: #fff; text-shadow: 0 3px 0 #e8590c, 0 0 18px rgba(255, 212, 92, .9); animation: eng-title 3s both; white-space: nowrap; }
@keyframes eng-title { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 10% { opacity: 1; transform: translateX(-50%) scale(1.08); } 16% { transform: translateX(-50%) scale(1); } 50% { opacity: 1; } 56% { opacity: 0; } 100% { opacity: 0; } }

.eng-stage { position: absolute; inset: 0; }
.eng-card, .eng-right .eng-card { position: absolute; left: 50%; top: 50%; width: var(--ew); animation: eng-card 3s cubic-bezier(.3, 1.1, .5, 1) both; will-change: transform; }
.eng-right { display: contents; }
.eng-card img { display: block; width: 100%; border-radius: 7%; aspect-ratio: 750 / 1039; object-fit: contain; background: #e8e2d4; border: 4px solid #fff; box-shadow: 0 0 0 4px #ffd45c, 0 0 30px 8px rgba(255, 212, 92, .75), 0 14px 30px rgba(0, 0, 0, .35); }
.eng-card.left { --dir: 1; } .eng-card.right { --dir: -1; }
.eng-card.right { --off: calc((var(--i) - (var(--cnt) - 1) / 2) * 5vh); }
.multi .eng-card.right { width: calc(var(--ew) * .82); }
.eng-badge { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); padding: 3px 14px; border-radius: 99px; font-weight: 900; font-size: 1.15rem; color: #fff; white-space: nowrap; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); }
.eng-badge.k { background: #3f7cff; } .eng-badge.m { background: #8b6cf0; }
@keyframes eng-card {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--dir) * -62vw), calc(-50% + var(--off, 0px))) scale(.7) rotate(calc(var(--dir) * -8deg)); }
  15%  { opacity: 1; transform: translate(calc(-50% + var(--dir) * -21vw), calc(-50% + var(--off, 0px))) scale(1) rotate(0); }
  35%  { opacity: 1; transform: translate(calc(-50% + var(--dir) * -6.6vw), calc(-50% + var(--off, 0px))) scale(1.14); }
  40%  { transform: translate(calc(-50% + var(--dir) * -8.8vw), calc(-50% + var(--off, 0px))) scale(1.2) rotate(calc(var(--dir) * -4deg)); }
  55%  { transform: translate(calc(-50% + var(--dir) * -21vw), calc(-50% + var(--off, 0px))) scale(1) rotate(0); }
  100% { opacity: 1; transform: translate(calc(-50% + var(--dir) * -21vw), calc(-50% + var(--off, 0px))) scale(1) rotate(0); }
}
.eng-card.out img { animation: eng-out 3s ease both; } /* forgotten characters gently fade at the result moment (the engine decided this) */
@keyframes eng-out { 0%, 74% { filter: none; } 82%, 100% { filter: grayscale(.8) brightness(.8); } }

/* cartoon speed lines */
.eng-lines i { position: absolute; top: calc(8% + var(--n) * 10%); height: 7px; width: 34vw; border-radius: 7px; opacity: 0; animation: eng-line-l 3s ease-out both; animation-delay: calc(var(--n) * 7ms); }
.eng-lines i:nth-child(odd) { left: 0; background: linear-gradient(90deg, transparent, #fff 55%, #ffd45c); }
.eng-lines i:nth-child(even) { right: 0; background: linear-gradient(270deg, transparent, #fff 55%, #7fe9d6); animation-name: eng-line-r; }
@keyframes eng-line-l { 0%, 14% { opacity: 0; transform: translateX(-34vw); } 22% { opacity: .95; } 35% { opacity: 0; transform: translateX(20vw); } 100% { opacity: 0; } }
@keyframes eng-line-r { 0%, 14% { opacity: 0; transform: translateX(34vw); } 22% { opacity: .95; } 35% { opacity: 0; transform: translateX(-20vw); } 100% { opacity: 0; } }

/* golden impact burst + friendly sparkles (no violent imagery) */
.eng-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.eng-burst i { position: absolute; left: 0; top: 0; width: 44vmin; height: 44vmin; margin: -22vmin 0 0 -22vmin; opacity: 0; transform: scale(0);
  background: radial-gradient(circle, #fff 0 18%, #fff3b0 30%, #ffd45c 50%, #ff9f43 72%); clip-path: polygon(50% 0, 60% 30%, 95% 20%, 70% 45%, 100% 60%, 66% 66%, 75% 100%, 50% 76%, 25% 100%, 34% 66%, 0 60%, 30% 45%, 5% 20%, 40% 30%);
  animation: eng-burst 3s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes eng-burst { 0%, 34% { opacity: 0; transform: scale(0) rotate(0); } 37% { opacity: 1; transform: scale(.45) rotate(8deg); } 46% { opacity: 1; transform: scale(1.1) rotate(-6deg); } 56% { opacity: 0; transform: scale(1.4) rotate(0); } 100% { opacity: 0; } }
.eng-burst b { position: absolute; left: 0; top: 0; font-size: 2.2rem; color: #ffe27a; opacity: 0; text-shadow: 0 0 12px rgba(255, 255, 255, .9); animation: eng-spark 3s ease-out both; }
@keyframes eng-spark { 0%, 35% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(.3); } 40% { opacity: 1; } 56% { opacity: 0; transform: rotate(var(--a)) translateX(24vmin) scale(1.1); } 100% { opacity: 0; } }

/* stat comparison */
.eng-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; animation: eng-vs 3s cubic-bezier(.3, 1.4, .5, 1) both; width: 38vw; max-width: 92vw; }
.vsnames { color: #fff; font-weight: 900; font-size: clamp(.85rem, 1.6vw, 1.3rem); letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); margin-bottom: 6px; } .vsnames b { margin: 0 6px; }
.vsrow { display: flex; align-items: center; justify-content: center; gap: 14px; } .vsrow + .vsrow { margin-top: 8px; }
.vsrow .pill { font-size: clamp(1.5rem, 3.6vw, 2.8rem); font-weight: 900; color: #fff; padding: 2px 26px; border-radius: 99px; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.vsrow .pill.k { background: linear-gradient(#5b93ff, #3f7cff); } .vsrow .pill.m { background: linear-gradient(#a58bff, #8b6cf0); }
.vsrow .vs { font-size: clamp(1.3rem, 3vw, 2.2rem); color: #ffe27a; text-shadow: 0 3px 0 #e8590c; animation: eng-vs-beat 3s ease-in-out both; }
.vsrow.small .pill { font-size: clamp(1rem, 2vw, 1.5rem); padding: 0 16px; border-width: 3px; } .vsrow.small em { color: #fff; font-style: normal; font-weight: 800; font-size: .95rem; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
@keyframes eng-vs { 0%, 53% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 58% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 63% { transform: translate(-50%, -50%) scale(1); } 76% { opacity: 1; } 84% { opacity: 0; transform: translate(-50%, -64%) scale(.9); } 100% { opacity: 0; } }
@keyframes eng-vs-beat { 0%, 57% { transform: scale(1); } 62% { transform: scale(1.5) rotate(-6deg); } 68% { transform: scale(1); } 100% { transform: scale(1); } }

/* result */
.eng-result { position: absolute; left: 50%; top: 79%; transform: translate(-50%, -50%); text-align: center; background: linear-gradient(#fffbe0, #ffe27a); color: #5a3f00; border: 5px solid #fff; border-radius: 28px; padding: 12px 30px; box-shadow: 0 0 0 5px #ffd45c, 0 16px 40px rgba(0, 0, 0, .4); display: grid; gap: 2px; justify-items: center; max-width: 88vw; animation: eng-result 3s cubic-bezier(.3, 1.4, .5, 1) both; }
.eng-result .ri { font-size: 2.2rem; line-height: 1; } .eng-result strong { font-size: clamp(1.3rem, 3vw, 2.2rem); } .eng-result small { font-family: "Nunito", var(--font); font-weight: 800; font-size: .95rem; }
@keyframes eng-result { 0%, 74% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 85% { transform: translate(-50%, -50%) scale(1); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* subtle screen shake at impact (class toggled by the board for 400ms) */
.gamewrap.shaking .stage, .gamewrap.shaking .tray { animation: screenshake .4s ease-in-out; }
@keyframes screenshake { 0%, 100% { translate: 0 0; } 20% { translate: -4px 2px; } 40% { translate: 4px -2px; } 60% { translate: -3px -1px; } 80% { translate: 3px 1px; } }

/* REDUCED MOTION: same 3s story, but nothing moves, spins or shakes - only gentle fades.
   (Higher specificity + !important so the app-wide "kill all animation" rule does not make it vanish.) */
.eng.rm .eng-lines, .eng.rm .eng-burst { display: none; }
.eng.rm .eng-card { animation-name: eng-rm-card !important; }
.eng.rm .eng-card.left { transform: translate(calc(-50% - 21vw), -50%); } .eng.rm .eng-card.right { transform: translate(calc(-50% + 21vw), calc(-50% + var(--off, 0px))); }
.eng.rm .eng-title { animation-name: eng-rm-title !important; transform: translateX(-50%); }
.eng.rm .eng-vs { animation-name: eng-rm-vs !important; transform: translate(-50%, -50%); }
.eng.rm .eng-vs .vs { animation: none !important; }
.eng.rm .eng-result { animation-name: eng-rm-result !important; transform: translate(-50%, -50%); }
@keyframes eng-rm-card { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 1; } }
@keyframes eng-rm-title { 0% { opacity: 0; } 12% { opacity: 1; } 50% { opacity: 1; } 56% { opacity: 0; } 100% { opacity: 0; } }
@keyframes eng-rm-vs { 0%, 54% { opacity: 0; } 60% { opacity: 1; } 76% { opacity: 1; } 84% { opacity: 0; } 100% { opacity: 0; } }
@keyframes eng-rm-result { 0%, 74% { opacity: 0; } 82% { opacity: 1; } 100% { opacity: 1; } }
html.reduce-motion .eng.rm, html.reduce-motion .eng.rm * { animation-duration: 3s !important; animation-iteration-count: 1 !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .eng.rm, .eng.rm * { animation-duration: 3s !important; animation-iteration-count: 1 !important; } .gamewrap.shaking .stage, .gamewrap.shaking .tray { animation: none !important; } }
html.reduce-motion .gamewrap.shaking .stage, html.reduce-motion .gamewrap.shaking .tray { animation: none !important; }