/* =========================================================
   ACID UNO v7 — EFFECTS
   Smooth / Neon / Mobile
   ========================================================= */


/* =========================================================
   SCREEN FLASH
   ========================================================= */

.screenFlash {
  position: fixed;
  inset: 0;

  z-index: 9000;

  pointer-events: none;

  opacity: 0;

  background: rgba(255,255,255,.15);

  mix-blend-mode: screen;
}

.screenFlash.flash-green {
  animation: flashGreen .72s ease-out;
}

.screenFlash.flash-purple {
  animation: flashPurple .72s ease-out;
}

.screenFlash.flash-red {
  animation: flashRed .64s ease-out;
}

.screenFlash.flash-cyan {
  animation: flashCyan .68s ease-out;
}

@keyframes flashGreen {
  0% {
    opacity: 0;
  }

  18% {
    opacity: .34;
    background: rgba(183,255,36,.32);
  }

  100% {
    opacity: 0;
  }
}

@keyframes flashPurple {
  0% {
    opacity: 0;
  }

  18% {
    opacity: .34;
    background: rgba(190,55,255,.32);
  }

  100% {
    opacity: 0;
  }
}

@keyframes flashRed {
  0% {
    opacity: 0;
  }

  20% {
    opacity: .32;
    background: rgba(255,40,78,.3);
  }

  100% {
    opacity: 0;
  }
}

@keyframes flashCyan {
  0% {
    opacity: 0;
  }

  20% {
    opacity: .3;
    background: rgba(35,232,255,.28);
  }

  100% {
    opacity: 0;
  }
}


/* =========================================================
   IMPACT RING
   ========================================================= */

.impactRing {
  position: fixed;

  left: 50%;
  top: 50%;

  width: 75px;
  height: 75px;

  margin-left: -37px;
  margin-top: -37px;

  border-radius: 50%;

  border: 3px solid #fff;

  z-index: 8500;

  pointer-events: none;

  box-shadow:
    0 0 8px #fff,
    0 0 22px #20eaff,
    0 0 45px #8b3dff;
}

.impactRing.active {
  animation:
    impactRing .9s
    cubic-bezier(.16,.72,.24,1)
    forwards;
}

@keyframes impactRing {
  0% {
    opacity: 0;
    transform: scale(.45);
  }

  18% {
    opacity: .95;
  }

  100% {
    opacity: 0;
    transform: scale(4.2);
  }
}


/* =========================================================
   ACTION BANNER
   ========================================================= */

.actionBanner {
  position: fixed;

  left: 50%;
  top: 43%;

  transform:
    translate(-50%, -50%);

  z-index: 9500;

  min-width: 215px;

  padding: 17px 25px;

  border-radius: 22px;

  text-align: center;

  pointer-events: none;

  border:
    1px solid rgba(255,255,255,.5);

  background:
    linear-gradient(
      145deg,
      rgba(44,10,72,.96),
      rgba(9,3,17,.96)
    );

  box-shadow:
    0 0 8px rgba(255,255,255,.25),
    0 0 25px rgba(164,50,255,.62),
    0 0 60px rgba(255,35,215,.2),
    inset 0 0 25px rgba(255,255,255,.045);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.actionBanner.show {
  display: block !important;

  animation:
    bannerSmooth 1.25s
    cubic-bezier(.16,.8,.24,1)
    forwards;
}

.actionBannerIcon {
  margin-bottom: 3px;

  font-size: 27px;

  filter:
    drop-shadow(
      0 0 8px rgba(255,255,255,.5)
    );
}

.actionBannerText {
  font-size: 18px;
  font-weight: 1000;

  font-style: italic;

  letter-spacing: 1px;

  color: #fff;

  text-shadow:
    0 0 7px #fff,
    0 0 17px #ff2bd6,
    0 0 30px #8b3dff;
}

@keyframes bannerSmooth {
  0% {
    opacity: 0;

    transform:
      translate(-50%, -45%)
      scale(.82);

    filter: blur(6px);
  }

  18% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1.035);

    filter: blur(0);
  }

  30% {
    transform:
      translate(-50%, -50%)
      scale(1);
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -54%)
      scale(.97);
  }
}


/* =========================================================
   FLYING CARD
   ========================================================= */

.flyingCard {
  transform-origin: 50% 50%;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  perspective: 900px;

  will-change:
    transform,
    opacity,
    filter;
}


/*
   Карта игрока:
   не "выстреливает", а мягко доезжает
   последние сантиметры после отпускания.
*/

.flyingCard.player-flight {
  transition:
    transform
      .68s
      cubic-bezier(.14,.72,.18,1),
    opacity
      .45s ease,
    filter
      .5s ease;
}


/*
   Карта бота движется чуть медленнее,
   чтобы человек успевал увидеть действие.
*/

.flyingCard.bot-flight {
  transition:
    transform
      .82s
      cubic-bezier(.14,.7,.18,1),
    opacity
      .5s ease,
    filter
      .5s ease;
}


/* =========================================================
   DRAW CARD
   ========================================================= */

.flyingCard.draw-flight {
  transition:
    transform
      .72s
      cubic-bezier(.17,.75,.18,1),
    opacity
      .42s ease;
}


/* =========================================================
   CARD LANDING
   ========================================================= */

.flyingCard.landing {
  animation:
    cardLanding .52s
    cubic-bezier(.16,.74,.25,1)
    forwards;
}

@keyframes cardLanding {
  0% {
    filter:
      brightness(1.35)
      drop-shadow(
        0 0 18px rgba(255,255,255,.6)
      );
  }

  35% {
    transform:
      scale(1.055);

    filter:
      brightness(1.2)
      drop-shadow(
        0 0 11px rgba(40,234,255,.5)
      );
  }

  100% {
    transform:
      scale(1);

    filter:
      brightness(1);
  }
}


/* =========================================================
   PLAYER CARD RETURN
   ========================================================= */

.handCard.returning {
  transition:
    transform
      .62s
      cubic-bezier(.18,.88,.25,1.08),
    filter
      .38s ease !important;
}


/*
   Неверная карта мягко покачивается,
   а не резко трясётся.
*/

.handCard.invalid-return {
  animation:
    invalidReturn .52s
    ease-in-out;
}

@keyframes invalidReturn {
  0%,
  100% {
    filter: brightness(1);
  }

  35% {
    filter:
      brightness(.83)
      drop-shadow(
        0 0 10px rgba(255,49,88,.7)
      );
  }

  65% {
    filter:
      brightness(.92)
      drop-shadow(
        0 0 5px rgba(255,49,88,.4)
      );
  }
}


/* =========================================================
   DRAG LIFT
   ========================================================= */

.handCard.dragging {
  animation:
    dragLift .2s
    ease-out both;
}

@keyframes dragLift {
  from {
    filter:
      brightness(1)
      drop-shadow(
        0 8px 8px rgba(0,0,0,.25)
      );
  }

  to {
    filter:
      brightness(1.12)
      saturate(1.1)
      drop-shadow(
        0 22px 18px rgba(0,0,0,.48)
      );
  }
}


/* =========================================================
   DROP ZONE PULSE
   ========================================================= */

#center.drop-hover::after {
  content: "";

  position: absolute;

  inset: -22px;

  border-radius: 58px;

  pointer-events: none;

  border:
    1px solid rgba(183,255,36,.38);

  animation:
    dropPulse 1.05s
    ease-in-out infinite;
}

@keyframes dropPulse {
  0%,
  100% {
    opacity: .18;

    transform:
      scale(.94);
  }

  50% {
    opacity: .75;

    transform:
      scale(1.035);
  }
}


/* =========================================================
   TABLE IMPACT
   ========================================================= */

.tableInner.card-impact {
  animation:
    tableImpact .72s
    cubic-bezier(.17,.76,.22,1);
}

@keyframes tableImpact {
  0% {
    filter: brightness(1);
  }

  22% {
    filter:
      brightness(1.28)
      saturate(1.18);
  }

  100% {
    filter:
      brightness(1)
      saturate(1);
  }
}


/* =========================================================
   PENALTY
   ========================================================= */

.penalty.penalty-hit {
  animation:
    penaltyHit .92s
    cubic-bezier(.16,.75,.2,1);
}

@keyframes penaltyHit {
  0% {
    transform:
      translateX(-50%)
      scale(.8);

    opacity: .2;
  }

  24% {
    transform:
      translateX(-50%)
      scale(1.12);

    opacity: 1;
  }

  42% {
    transform:
      translateX(-50%)
      scale(.98);
  }

  100% {
    transform:
      translateX(-50%)
      scale(1);
  }
}


/* =========================================================
   SPECIAL CARD EFFECT
   ========================================================= */

#game.special-effect {
  animation:
    specialGlow .95s ease-out;
}

@keyframes specialGlow {
  0% {
    filter: brightness(1);
  }

  25% {
    filter:
      brightness(1.18)
      saturate(1.22);
  }

  100% {
    filter:
      brightness(1)
      saturate(1);
  }
}


/* =========================================================
   WILD COLOR BURST
   ========================================================= */

#game.wild-burst::after {
  content: "";

  position: fixed;
  inset: -35%;

  z-index: 8000;

  pointer-events: none;

  background:
    conic-gradient(
      from 0deg,
      rgba(255,49,88,.3),
      rgba(255,232,61,.25),
      rgba(72,255,119,.25),
      rgba(50,168,255,.28),
      rgba(255,43,214,.28),
      rgba(255,49,88,.3)
    );

  animation:
    wildBurst .95s ease-out forwards;

  mix-blend-mode: screen;
}

@keyframes wildBurst {
  0% {
    opacity: 0;

    transform:
      scale(.3)
      rotate(-35deg);
  }

  25% {
    opacity: .4;
  }

  100% {
    opacity: 0;

    transform:
      scale(1.3)
      rotate(30deg);
  }
}


/* =========================================================
   TURN TRANSITION
   ========================================================= */

.turnGlow.active {
  animation:
    turnWake .9s
    cubic-bezier(.16,.8,.2,1);
}

@keyframes turnWake {
  0% {
    opacity: 0;
    transform:
      translateX(-50%)
      scale(.75);
  }

  45% {
    opacity: .9;
  }

  100% {
    transform:
      translateX(-50%)
      scale(1);

    opacity: 1;
  }
}


/* =========================================================
   BOT THINKING
   ========================================================= */

.botAvatar.thinking {
  animation:
    botThinking 1.25s
    ease-in-out infinite;
}

@keyframes botThinking {
  0%,
  100% {
    transform: translateY(0);

    box-shadow:
      0 0 12px rgba(32,234,255,.2);
  }

  50% {
    transform: translateY(-3px);

    box-shadow:
      0 0 22px rgba(32,234,255,.5),
      0 0 35px rgba(139,61,255,.25);
  }
}


/* =========================================================
   BOT CARDS RESPONSE
   ========================================================= */

.botCards.bot-active {
  animation:
    botCardsWake .75s ease-out;
}

@keyframes botCardsWake {
  0% {
    filter: brightness(.8);
  }

  45% {
    filter:
      brightness(1.28)
      drop-shadow(
        0 0 10px rgba(32,234,255,.32)
      );
  }

  100% {
    filter: brightness(1);
  }
}


/* =========================================================
   ROBOT FINGER
   ========================================================= */

.robotFinger {
  position: fixed;

  width: 115px;
  height: 155px;

  z-index: 11000;

  pointer-events: none;

  transform-origin: 50% 100%;

  filter:
    drop-shadow(
      0 12px 10px rgba(0,0,0,.45)
    )
    drop-shadow(
      0 0 10px rgba(32,234,255,.25)
    );
}

.robotPalm {
  position: absolute;

  width: 62px;
  height: 75px;

  left: 25px;
  bottom: 0;

  border-radius:
    23px 23px 18px 18px;

  background:
    linear-gradient(
      145deg,
      #cdd5e0,
      #626d7e 45%,
      #222a36 100%
    );

  border:
    2px solid rgba(255,255,255,.5);

  box-shadow:
    inset 8px 8px 15px rgba(255,255,255,.2),
    inset -8px -10px 18px rgba(0,0,0,.35);
}

.robotJoint {
  position: absolute;

  width: 23px;
  height: 23px;

  left: 19px;
  top: 18px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #28efff 0%,
      #1b98b0 35%,
      #26303a 42%,
      #111820 100%
    );

  border:
    2px solid #9ba6b4;

  box-shadow:
    0 0 9px rgba(32,234,255,.85);
}

.robotIndex {
  position: absolute;

  width: 22px;
  height: 90px;

  left: 19px;
  top: -72px;

  border-radius:
    14px 14px 10px 10px;

  background:
    linear-gradient(
      90deg,
      #465160,
      #d1d8df 42%,
      #687482 70%,
      #2b3440
    );

  border:
    1px solid rgba(255,255,255,.5);

  transform-origin: 50% 100%;
}

.robotIndex::before {
  content: "";

  position: absolute;

  left: 3px;
  right: 3px;
  top: 35px;

  height: 4px;

  border-radius: 4px;

  background:
    rgba(20,30,40,.7);

  box-shadow:
    0 0 5px rgba(32,234,255,.3);
}


/* =========================================================
   ROBOT FINGER MOTION
   ========================================================= */

.robotFinger.robot-enter {
  animation:
    robotEnter 1.25s
    cubic-bezier(.17,.74,.22,1)
    forwards;
}

@keyframes robotEnter {
  0% {
    opacity: 0;

    transform:
      translate(60px, 110px)
      rotate(18deg)
      scale(.82);
  }

  30% {
    opacity: 1;
  }

  70% {
    transform:
      translate(0, 0)
      rotate(-5deg)
      scale(1);
  }

  100% {
    opacity: 1;

    transform:
      translate(0, 4px)
      rotate(-3deg)
      scale(.98);
  }
}

.robotFinger.robot-tap .robotIndex {
  animation:
    robotTap .5s
    cubic-bezier(.2,.75,.25,1);
}

@keyframes robotTap {
  0%,
  100% {
    transform:
      rotate(0deg)
      translateY(0);
  }

  50% {
    transform:
      rotate(7deg)
      translateY(8px);
  }
}

.robotFinger.robot-leave {
  animation:
    robotLeave .8s
    ease-in forwards;
}

@keyframes robotLeave {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;

    transform:
      translate(80px, 120px)
      rotate(20deg)
      scale(.8);
  }
}


/* =========================================================
   DRAG TUTORIAL HINT
   ========================================================= */

.dragHint {
  position: fixed;

  left: 50%;
  bottom:
    calc(
      env(safe-area-inset-bottom, 0px)
      + 182px
    );

  transform:
    translateX(-50%);

  z-index: 4000;

  padding: 7px 11px;

  border-radius: 999px;

  pointer-events: none;

  white-space: nowrap;

  font-size: 8px;
  font-weight: 850;

  letter-spacing: .8px;

  color:
    rgba(255,255,255,.65);

  background:
    rgba(8,4,15,.72);

  border:
    1px solid rgba(32,234,255,.22);

  opacity: 0;
}

.dragHint.show {
  animation:
    hintAppear 3.5s ease forwards;
}

@keyframes hintAppear {
  0% {
    opacity: 0;

    transform:
      translateX(-50%)
      translateY(7px);
  }

  15%,
  70% {
    opacity: 1;

    transform:
      translateX(-50%)
      translateY(0);
  }

  100% {
    opacity: 0;
  }
}


/* =========================================================
   GENTLER GENERAL MOTION
   ========================================================= */

#game.animating .handCard:not(.dragging) {
  transition-duration: .55s;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media
(prefers-reduced-motion: reduce) {

  .screenFlash,
  .impactRing,
  .actionBanner,
  .robotFinger {
    animation-duration: .45s !important;
  }

  .flyingCard.player-flight,
  .flyingCard.bot-flight,
  .flyingCard.draw-flight {
    transition-duration: .45s;
  }

}