/* Box cover artwork styles. The art itself is inline SVG from covers.js; this file positions it
   and adds one or two looping animations per cover. */
.cv { background: #1d1a14; }
.cv-art.cv-over, .cv-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.cv-art text { user-select: none; }
.cv-art:has(.cv-over) { z-index: 1; pointer-events: none; }
.cv-art [class] { transform-box: fill-box; transform-origin: center; }
.cv-chrome { pointer-events: none; }
.cv-price { animation: cvPrice 5s ease-in-out infinite; }
@keyframes cvPrice { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(6deg) scale(1.06); } }
.cv-pupils { animation: cvLook 5s ease-in-out infinite; }
.cv-pupils.cv-shifty { animation: cvShifty 2.6s ease-in-out infinite; }
@keyframes cvLook { 0%, 40%, 100% { transform: translate(0, 0); } 50%, 80% { transform: translate(-3px, 1px); } }
@keyframes cvShifty { 0%, 30% { transform: translateX(-5px); } 50%, 80% { transform: translateX(5px); } 100% { transform: translateX(-5px); } }
.cv-rays { animation: cvSpin 40s linear infinite; }
@keyframes cvSpin { to { transform: rotate(360deg); } }
.cv-bub { animation: cvBub 2.4s linear infinite; }
@keyframes cvBub { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-44px); opacity: 0; } }
.cv-sweat { animation: cvSweat 1.4s ease-in infinite; }
@keyframes cvSweat { 0% { transform: translate(0, -6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(6px, 14px); opacity: 0; } }

/* Deeds: bulldozer drives through, house goes over, windows flicker, cash drifts */
.cv-dozer { animation: cvDozer 9s linear infinite; }
@keyframes cvDozer { 0% { transform: translateX(-190px); } 100% { transform: translateX(380px); } }
.cv-wheel, .cv-spokes { transform-origin: center; }
.cv-spokes line { transform-box: fill-box; transform-origin: center; animation: cvSpin 1s linear infinite; }
.cv-puff { animation: cvPuff 1.2s ease-out infinite; }
@keyframes cvPuff { 0% { transform: translate(0, 0) scale(.6); opacity: 1; } 100% { transform: translate(-14px, -22px) scale(1.3); opacity: 0; } }
.cv-house { transform-origin: 100% 100%; animation: cvHouse 9s ease-in-out infinite; }
@keyframes cvHouse { 0%, 58% { transform: rotate(0deg); } 63% { transform: rotate(-4deg); } 72% { transform: rotate(82deg) translateX(10px); } 88% { transform: rotate(82deg) translateX(10px); } 92% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
.cv-notes { animation: cvFloatY 3.2s ease-in-out infinite; }
@keyframes cvFloatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.cv-windows { animation: cvFlicker 4s steps(2) infinite; }
@keyframes cvFlicker { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Shithead: crowned turd bobs, top card gets slapped down, stink lines rise */
.cv-crown { animation: cvBob 2.2s ease-in-out infinite; }
@keyframes cvBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(4deg); } }
.cv-slap { animation: cvSlap 3.2s ease-in infinite; }
@keyframes cvSlap { 0%, 55% { transform: translate(60px, -90px) rotate(30deg) scale(1.25); opacity: 0; } 62% { opacity: 1; } 70%, 100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } }
.cv-stink { animation: cvStink 2s ease-in-out infinite; }
@keyframes cvStink { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-6px); opacity: .9; } }

/* Who's That: four faces sit on the lineup board; the glass sweeps across them, the ? pops */
.cv-faces { position: absolute; left: 13%; top: 11%; width: 56%; height: 56%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; z-index: 1; pointer-events: none; }
.cv-faces .wt-face { width: 100%; height: 100%; background: #fff; border: 3px solid #1d1a14; border-radius: 10px; box-shadow: 3px 3px 0 #1d1a14; }
.cv-faces .wt-face:nth-child(2) { animation: cvDim 4.6s ease-in-out infinite; } .cv-faces .wt-face:nth-child(3) { animation: cvDim 4.6s ease-in-out infinite 2.3s; }
@keyframes cvDim { 0%, 100% { filter: none; } 45%, 65% { filter: grayscale(1) brightness(.75); } }
.cv-glass { animation: cvGlass 4.6s ease-in-out infinite; }
@keyframes cvGlass { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(88px, -6px); } 50% { transform: translate(90px, 96px); } 75% { transform: translate(-4px, 100px); } }
.cv-qburst { animation: cvPop 1.6s ease-in-out infinite; }
@keyframes cvPop { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.12) rotate(4deg); } }

/* Chase: the ace legs it, the hand lunges, speed lines whip past */
.cv-runner { animation: cvRun .5s ease-in-out infinite; }
@keyframes cvRun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.cv-legL { transform-origin: 50% 10%; animation: cvLeg .5s ease-in-out infinite; }
.cv-legR { transform-origin: 50% 10%; animation: cvLeg .5s ease-in-out infinite reverse; }
@keyframes cvLeg { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(28deg); } }
.cv-armL { transform-origin: 100% 100%; animation: cvArm .5s ease-in-out infinite reverse; }
.cv-armR { transform-origin: 0 0; animation: cvArm .5s ease-in-out infinite; }
@keyframes cvArm { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
.cv-grab { animation: cvGrab 1.6s ease-in-out infinite; }
@keyframes cvGrab { 0%, 100% { transform: translateX(-26px) rotate(-6deg); } 40% { transform: translateX(26px) rotate(4deg); } 55% { transform: translateX(20px) rotate(4deg); } }
.cv-speed { animation: cvSpeed .6s linear infinite; }
@keyframes cvSpeed { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: .55; } 100% { transform: translateX(130px); opacity: 0; } }
.cv-cracked { animation: cvCrack 3s ease-in-out infinite; }
@keyframes cvCrack { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-6deg); } 90% { transform: rotate(6deg); } 95% { transform: rotate(-4deg); } }

/* Cheat: the nose grows, the burst slams in, the eyes in the dark blink */
.cv-nose { transform-origin: 0 50%; animation: cvNose 3.6s ease-in-out infinite; }
@keyframes cvNose { 0%, 20% { transform: scaleX(.18); } 55%, 70% { transform: scaleX(1); } 100% { transform: scaleX(.18); } }
.cv-burst { animation: cvBurst 3.6s ease-out infinite; }
@keyframes cvBurst { 0%, 45% { transform: scale(0) rotate(-7deg); opacity: 0; } 55% { transform: scale(1.15) rotate(-7deg); opacity: 1; } 62% { transform: scale(1) rotate(-7deg); } 92% { transform: scale(1) rotate(-7deg); opacity: 1; } 100% { transform: scale(0) rotate(-7deg); opacity: 0; } }
.cv-eyes-bg { animation: cvBlink 5s steps(1) infinite; }
@keyframes cvBlink { 0%, 100% { opacity: 1; } 48% { opacity: 1; } 50% { opacity: 0; } 54% { opacity: 1; } }

/* Spoons: panicky wobble, hands lunging in from both sides */
.cv-sp1, .cv-sp2, .cv-sp3 { transform-origin: 50% 90%; animation: cvWobble 1.1s ease-in-out infinite; }
.cv-sp2 { animation-delay: -.3s; } .cv-sp3 { animation-delay: -.6s; }
@keyframes cvWobble { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg) translateY(-6px); } }
.cv-handL { animation: cvHandL 1.5s ease-in-out infinite; }
@keyframes cvHandL { 0%, 100% { transform: translate(-30px, 20px); } 45% { transform: translate(20px, -10px); } }
.cv-handR { animation: cvHandR 1.5s ease-in-out infinite .5s; }
@keyframes cvHandR { 0%, 100% { transform: translate(30px, 20px); } 45% { transform: translate(-16px, -6px); } }
.cv-panic { animation: cvPanic .4s steps(2) infinite; }
@keyframes cvPanic { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* Grasser: tail wags, whiskers twitch, grass sways, the speech bubble bobs, sign rocks */
.cv-tail { transform-origin: 100% 100%; animation: cvTail 1.4s ease-in-out infinite; }
@keyframes cvTail { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.cv-whisk { animation: cvWhisk 1s ease-in-out infinite; transform-origin: 0 50%; }
@keyframes cvWhisk { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }
.cv-grassblades { transform-origin: 50% 100%; animation: cvSway 2.6s ease-in-out infinite; }
@keyframes cvSway { 0%, 100% { transform: skewX(-4deg); } 50% { transform: skewX(5deg); } }
.cv-bubble, .cv-bubble2, .cv-bubble3 { animation: cvBob 2.6s ease-in-out infinite; }
.cv-bubble3 { animation-delay: -1.3s; }
.cv-sign { transform-origin: 50% 100%; animation: cvRock 3s ease-in-out infinite; }
@keyframes cvRock { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* Eights: the big card wobbles, swap arrows spin, lid flaps, Draw-2 shuffles */
.cv-wob { animation: cvWob 3s ease-in-out infinite; }
@keyframes cvWob { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.03); } }
.cv-swap { animation: cvSpin 3s linear infinite; }
.cv-lid { transform-origin: 50% 0; animation: cvLid 2.4s ease-in-out infinite; }
@keyframes cvLid { 0%, 60%, 100% { transform: translateY(0) scaleY(1); } 75%, 85% { transform: translateY(-22px) scaleY(.3); } }
.cv-draw2 { animation: cvDraw 2s ease-in-out infinite; }
@keyframes cvDraw { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Skint: cigar smoke rises, the ghost peeks up and ducks */
.cv-smoke { animation: cvSmoke 2.4s ease-out infinite; }
@keyframes cvSmoke { 0% { transform: translate(0, 10px) scale(.7); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(10px, -34px) scale(1.2); opacity: 0; } }
.cv-ghost { animation: cvGhost 4s ease-in-out infinite; }
@keyframes cvGhost { 0%, 15%, 100% { transform: translateY(70px); } 30%, 70% { transform: translateY(0); } 85% { transform: translateY(70px); } }

/* Quiz: buzzers get smacked one at a time, the chalk scrawl wiggles */
.cv-bz1, .cv-bz2, .cv-bz3 { transform-origin: 50% 100%; animation: cvBuzz 2.7s ease-in infinite; }
.cv-bz2 { animation-delay: .9s; } .cv-bz3 { animation-delay: 1.8s; }
@keyframes cvBuzz { 0%, 70%, 100% { transform: scaleY(1); } 78% { transform: scaleY(.7); } 86% { transform: scaleY(1.06); } }
.cv-chalkwiggle { animation: cvPanic 1.2s steps(2) infinite; }

/* 110: cards fan out and settle, shamrocks turn */
.cv-f1, .cv-f2, .cv-f3, .cv-f4 { transform-origin: 50% 110%; animation: cvFan 4s ease-in-out infinite; }
.cv-f1 { --a: -6deg; } .cv-f2 { --a: -2deg; } .cv-f3 { --a: 2deg; } .cv-f4 { --a: 6deg; }
@keyframes cvFan { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(var(--a)) translateY(-8px); } }
.cv-sham1 { animation: cvSpinSlow 12s linear infinite; } .cv-sham2 { animation: cvSpinSlow 9s linear infinite reverse; }
@keyframes cvSpinSlow { to { transform: rotate(360deg); } }

/* Porkies: the nose grows, the pig's paper shakes, speech bubbles bob */
.cv-porkies .cv-nose { animation-duration: 4s; }
.cv-paper { transform-origin: 50% 50%; animation: cvPaper 1.2s ease-in-out infinite; }
@keyframes cvPaper { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg) translateY(-2px); } }

/* Liar: spotlight sweeps, the guilty one shakes and sweats, votes flutter, arrow bounces */
.cv-spot { transform-origin: 50% 0; animation: cvSpot 4s ease-in-out infinite; }
@keyframes cvSpot { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }
.cv-sweaty { animation: cvShake .25s linear infinite; }
@keyframes cvShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.cv-arrow { animation: cvArrow 1s ease-in-out infinite; }
@keyframes cvArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
.cv-votes { animation: cvFloatY 2.4s ease-in-out infinite; }

/* Ian: one eyebrow goes up, the plane crosses the window, the NO stamp slams, mood badge pops */
.cv-browL { transform-origin: 0 50%; animation: cvBrow 2.4s ease-in-out infinite; }
@keyframes cvBrow { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 70%, 88% { transform: translateY(-7px) rotate(-14deg); } }
.cv-plane { animation: cvPlane 7s linear infinite; }
@keyframes cvPlane { 0% { transform: translate(-80px, 14px); } 100% { transform: translate(110px, -10px); } }
.cv-cloud { animation: cvCloud 7s linear infinite; }
@keyframes cvCloud { 0% { transform: translateX(50px); } 100% { transform: translateX(-70px); } }
.cv-stamp { animation: cvStamp 3s ease-out infinite; }
@keyframes cvStamp { 0%, 30% { transform: scale(2.2); opacity: 0; } 40% { transform: scale(1); opacity: 1; } 44% { transform: scale(1.06); } 48%, 100% { transform: scale(1); opacity: 1; } }
.cv-ianmood { position: absolute; left: 15%; top: 34%; width: 64px; height: 60px; z-index: 1; display: grid; place-items: center; align-content: center; gap: 0; background: #ffb703; border: 3px solid #1d1a14; border-radius: 10px; box-shadow: 3px 3px 0 #1d1a14; transform: rotate(4deg); pointer-events: none; }
.cv-ianmood b { font-family: Nunito, sans-serif; font-size: 9px; letter-spacing: .14em; color: #1d1a14; line-height: 1; }
.cv-ianface { font-size: 30px; line-height: 1; display: block; }
.cv-ianface.pop { animation: cvMoodPop .3s ease-out; }
@keyframes cvMoodPop { from { transform: scale(.4) rotate(-20deg); } to { transform: scale(1) rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  .cv-art *, .cv-faces .wt-face, .cv-ianface { animation: none !important; }
  .cv-nose { transform: scaleX(1); }
  .cv-burst { transform: scale(1) rotate(-7deg); opacity: 1; }
  .cv-stamp { opacity: 1; }
  .cv-dozer { transform: translateX(60px); }
}