/* TIPS Royale v30.8.31 - card effects (additive; loads last).
   1 trump cards in your hand: a soft gold sheen glides across them
   2 the card that wins the trick lights up and pops before the trick flies to the winner
   3 a played card lands with a small "slam" and a shadow
   4 aces: a little gold glitter (v30.8.32: on the classic card face again)
   5 the back: a richer gold pattern around the TIPS Royale logo
   6 desktop (mouse): a card in your hand lifts and tilts a little under the pointer
   Everything that moves is switched off with "reduce motion". */

/* v30.8.32: the classic card face is back (the v30.8.30 faces confused the players);
   the cards still carry the class royal-card for these effects. */
.playcard.royal-card,.handcard.royal-card{position:relative}
.royal-card{overflow:hidden}

/* ---------- 1 trump sheen ---------- */
.handcard.royal-card.trump-card{
  border-color:#d9a83a!important;
}
.handcard.royal-card.trump-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(115deg,
    rgba(255,236,170,0) 35%,
    rgba(255,236,170,.65) 48%,
    rgba(255,255,255,.85) 50%,
    rgba(255,236,170,.65) 52%,
    rgba(255,236,170,0) 65%);
  background-size:300% 100%;
  background-position:120% 0;
  mix-blend-mode:screen;
  animation:tipsTrumpSheen 3.2s ease-in-out infinite;
}
@keyframes tipsTrumpSheen{
  0%{background-position:120% 0}
  55%,100%{background-position:-20% 0}
}

/* ---------- 2 the winning card ---------- */
.trick .slot.trick-winner-glow .playcard.royal-card{
  animation:tipsWinnerPop .55s cubic-bezier(.2,.9,.3,1.25) both;
  box-shadow:0 0 0 2px #ffd36b,0 0 18px 4px rgba(255,205,90,.75),0 8px 18px rgba(0,0,0,.45)!important;
  z-index:3;
}
.trick .slot.trick-winner-glow{z-index:3}
.trick-fly-card.trick-winner-card{
  box-shadow:0 0 0 2px #ffd36b,0 0 16px 3px rgba(255,205,90,.7)!important;
}
@keyframes tipsWinnerPop{
  0%{transform:scale(1)}
  45%{transform:scale(1.16) translateY(-4%)}
  100%{transform:scale(1.08) translateY(-2%)}
}

/* ---------- 3 the landing slam ---------- */
.trick .slot.card-landed .playcard.royal-card{
  animation:tipsCardSlam .42s cubic-bezier(.25,.8,.3,1.1) both;
}
@keyframes tipsCardSlam{
  0%{transform:scale(1.14) rotate(-2deg);box-shadow:0 14px 22px rgba(0,0,0,.45)}
  55%{transform:scale(.95) rotate(.5deg);box-shadow:0 1px 3px rgba(0,0,0,.55)}
  100%{transform:scale(1) rotate(0);box-shadow:0 5px 11px rgba(0,0,0,.30)}
}

/* ---------- 4 aces: a little gold glitter ---------- */
.royal-card .rc-spark{
  position:absolute;
  width:16%;
  aspect-ratio:1;
  background:#ffe9a0;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 2px rgba(255,190,40,.95));
  opacity:0;
  pointer-events:none;
  animation:tipsSpark 2.6s ease-in-out infinite;
  z-index:2;
}
.royal-card .rc-s1{left:14%;top:16%}
.royal-card .rc-s2{right:12%;top:44%;animation-delay:.9s;width:12%}
.royal-card .rc-s3{left:24%;bottom:12%;animation-delay:1.7s;width:13%}
@keyframes tipsSpark{
  0%,100%{opacity:0;transform:scale(.3) rotate(0)}
  15%{opacity:1;transform:scale(1) rotate(45deg)}
  35%{opacity:0;transform:scale(.4) rotate(90deg)}
}

/* ---------- 5 the back ---------- */
.hand .handcard.card-hidden,
.poker-stage .deal-card,
.poker-stage .deal-deck span{
  background:
    url('/tips-royale-logo.png') center / 72% auto no-repeat,
    radial-gradient(circle at 50% 50%,rgba(22,71,115,0) 0 38%,rgba(4,18,34,.55) 100%),
    repeating-linear-gradient(45deg,rgba(232,196,104,.16) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-45deg,rgba(232,196,104,.16) 0 1px,transparent 1px 7px),
    radial-gradient(circle,#1a5288,#0a2742)!important;
  border-color:#d4a938!important;
}
/* the hand card shows the logo through its own span: keep only the pattern on the button */
.hand .handcard.card-hidden{
  background:
    radial-gradient(circle at 50% 50%,rgba(22,71,115,0) 0 38%,rgba(4,18,34,.55) 100%),
    repeating-linear-gradient(45deg,rgba(232,196,104,.16) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-45deg,rgba(232,196,104,.16) 0 1px,transparent 1px 7px),
    radial-gradient(circle,#1a5288,#0a2742)!important;
}
/* thin gold frame and gold corner ornaments inside it */
.hand .handcard.card-hidden::before,
.poker-stage .deal-card::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(232,196,104,.65);
  border-radius:5px;
  pointer-events:none;
}
.hand .handcard.card-hidden::after,
.poker-stage .deal-card::after{
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  background:
    radial-gradient(circle at 0 0,#e8c468 0 2px,transparent 2.6px),
    radial-gradient(circle at 100% 0,#e8c468 0 2px,transparent 2.6px),
    radial-gradient(circle at 0 100%,#e8c468 0 2px,transparent 2.6px),
    radial-gradient(circle at 100% 100%,#e8c468 0 2px,transparent 2.6px);
}

/* ---------- 6 desktop: lift and tilt under the pointer ---------- */
@media (hover:hover) and (pointer:fine){
  .hand .handcard.royal-card{
    transition:translate .16s ease,rotate .16s ease,box-shadow .16s ease;
  }
  .hand .handcard.royal-card:not(.illegal):hover{
    translate:0 -10px;
    rotate:-2.5deg;
    box-shadow:0 14px 22px rgba(0,0,0,.45);
    z-index:5;
  }
}

/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion:reduce){
  .handcard.royal-card.trump-card::after{animation:none;background:linear-gradient(115deg,rgba(255,236,170,0) 40%,rgba(255,236,170,.35) 50%,rgba(255,236,170,0) 60%)}
  .trick .slot.trick-winner-glow .playcard.royal-card,
  .trick .slot.card-landed .playcard.royal-card{animation:none}
  .royal-card .rc-spark{animation:none;opacity:0}
  .hand .handcard.royal-card{transition:none}
}