/* SHOCKER v60: 試合中カードモーション */
body.v45-battle-active {
    --v60-card-gold: #ffd968;
    --v60-card-fire: #ff5a22;
    --v60-card-blue: #69c8ff;
}

body.v45-battle-active #hand-zone > .card,
body.v45-battle-active #player-field > .card,
body.v45-battle-active #opponent-field > .card {
    will-change: transform, filter, opacity;
    transition:
        transform .22s cubic-bezier(.18,.82,.26,1.28),
        filter .2s ease,
        box-shadow .2s ease;
    transform-origin: 50% 72%;
    backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
    body.v45-battle-active #hand-zone > .card:hover:not(.selected-card),
    body.v45-battle-active #player-field > .card:hover:not(.selected-card),
    body.v45-battle-active #opponent-field > .card:hover:not(.selected-card) {
        transform: translateY(-7px) rotateZ(-1.2deg) scale(1.055);
        filter: brightness(1.12) saturate(1.1);
        box-shadow:
            0 12px 18px rgba(0,0,0,.48),
            0 0 18px rgba(255,217,104,.5);
        z-index: 70 !important;
    }
}

body.v45-battle-active .card.v60-card-pressing,
body.v45-battle-active .opponent-mini-card.v60-card-pressing {
    animation: v60CardTap .34s cubic-bezier(.16,.86,.24,1.35) both !important;
}

body.v45-battle-active .card.v60-enter-hand {
    animation: v60DealToHand .72s cubic-bezier(.12,.82,.2,1.12) both !important;
}

body.v45-battle-active .card.v60-enter-player-field {
    animation: v60DealToPlayerField .74s cubic-bezier(.12,.82,.2,1.12) both !important;
}

body.v45-battle-active .card.v60-enter-opponent-field {
    animation: v60DealToOpponentField .74s cubic-bezier(.12,.82,.2,1.12) both !important;
}

body.v45-battle-active .opponent-mini-card.v60-enter-opponent-hand {
    animation: v60DealToOpponentHand .62s cubic-bezier(.12,.82,.2,1.12) both !important;
}

body.v45-battle-active .card.v60-card-flip {
    animation: v60CardFlip .58s cubic-bezier(.18,.78,.22,1.15) both !important;
}

body.v45-battle-active .card.v60-selection-pulse {
    animation: v60SelectionPulse .52s cubic-bezier(.16,.84,.22,1.18) both !important;
}

.v60-card-arrival-flash,
.v60-selection-burst,
.v60-impact-burst,
.v60-impact-rays,
.v60-card-spark {
    position: fixed;
    z-index: 2147481000;
    pointer-events: none;
    will-change: transform, opacity, filter;
}

.v60-card-arrival-flash {
    border: 2px solid rgba(255,224,125,.88);
    border-radius: 10px;
    background:
        linear-gradient(115deg, transparent 20%, rgba(255,255,255,.58) 48%, transparent 72%);
    box-shadow:
        0 0 12px rgba(255,235,168,.9),
        0 0 30px rgba(255,126,31,.52);
    mix-blend-mode: screen;
    animation: v60ArrivalFlash .66s ease-out both;
}

.v60-selection-burst {
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid rgba(255,229,139,.98);
    border-radius: 50%;
    box-shadow:
        0 0 8px #fff6c8,
        0 0 24px rgba(255,176,47,.92);
    animation: v60SelectionRing .56s ease-out both;
}

.v60-card-spark {
    width: 5px;
    height: 28px;
    margin: -14px 0 0 -2px;
    border-radius: 999px;
    background: linear-gradient(to top, transparent, #fff9cf 42%, #ff9b26);
    box-shadow: 0 0 7px #ffcf5b;
    transform-origin: 50% 14px;
    animation: v60SparkFlight .58s cubic-bezier(.1,.72,.2,1) both;
}

.v60-impact-burst {
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fff 0 8%, #ffe66f 10% 20%, #ff5a1e 33%, transparent 67%);
    box-shadow:
        0 0 26px #fff0a0,
        0 0 58px #ff3a00;
    mix-blend-mode: screen;
    animation: v60ImpactBurst .5s ease-out both;
}

.v60-impact-rays {
    width: 210px;
    height: 210px;
    margin: -105px 0 0 -105px;
    border-radius: 50%;
    background:
        repeating-conic-gradient(
            from 4deg,
            rgba(255,245,190,.92) 0 2deg,
            transparent 2deg 15deg
        );
    -webkit-mask-image: radial-gradient(circle, transparent 0 16%, #000 28% 58%, transparent 78%);
    mask-image: radial-gradient(circle, transparent 0 16%, #000 28% 58%, transparent 78%);
    mix-blend-mode: screen;
    animation: v60ImpactRays .58s cubic-bezier(.1,.7,.18,1) both;
}

body.v60-impact-screen-flash::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147480000;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--v60-impact-x, 50%) var(--v60-impact-y, 50%),
            rgba(255,249,211,.55), rgba(255,73,18,.18) 22%, transparent 52%);
    animation: v60ScreenFlash .34s ease-out both;
}

@keyframes v60CardTap {
    0%   { transform: translateY(0) rotateZ(0) scale(1); filter: brightness(1); }
    28%  { transform: translateY(4px) rotateZ(-1.5deg) scale(.91); filter: brightness(.86); }
    66%  { transform: translateY(-8px) rotateZ(1.4deg) scale(1.09); filter: brightness(1.28) saturate(1.16); }
    100% { transform: translateY(0) rotateZ(0) scale(1); filter: brightness(1); }
}

@keyframes v60DealToHand {
    0%   { opacity: 0; transform: perspective(680px) translate3d(118px,78px,0) rotateY(88deg) rotateZ(18deg) scale(.58); filter: blur(3px) brightness(1.8); }
    58%  { opacity: 1; transform: perspective(680px) translate3d(-8px,-15px,0) rotateY(-9deg) rotateZ(-5deg) scale(1.13); filter: blur(0) brightness(1.28); }
    78%  { transform: perspective(680px) translate3d(4px,4px,0) rotateY(3deg) rotateZ(2deg) scale(.98); }
    100% { opacity: 1; transform: perspective(680px) translate3d(0,0,0) rotateY(0) rotateZ(0) scale(1); filter: none; }
}

@keyframes v60DealToPlayerField {
    0%   { opacity: 0; transform: perspective(720px) translate3d(-145px,88px,0) rotateX(42deg) rotateY(-82deg) rotateZ(-18deg) scale(.54); filter: blur(3px) brightness(1.8); }
    60%  { opacity: 1; transform: perspective(720px) translate3d(10px,-9px,0) rotateX(-5deg) rotateY(8deg) rotateZ(4deg) scale(1.14); filter: blur(0) brightness(1.3); }
    80%  { transform: perspective(720px) translate3d(-3px,3px,0) rotateX(2deg) rotateY(-3deg) rotateZ(-1deg) scale(.98); }
    100% { opacity: 1; transform: perspective(720px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) scale(1); filter: none; }
}

@keyframes v60DealToOpponentField {
    0%   { opacity: 0; transform: perspective(720px) translate3d(145px,-88px,0) rotateX(-42deg) rotateY(82deg) rotateZ(18deg) scale(.54); filter: blur(3px) brightness(1.8); }
    60%  { opacity: 1; transform: perspective(720px) translate3d(-10px,9px,0) rotateX(5deg) rotateY(-8deg) rotateZ(-4deg) scale(1.14); filter: blur(0) brightness(1.3); }
    80%  { transform: perspective(720px) translate3d(3px,-3px,0) rotateX(-2deg) rotateY(3deg) rotateZ(1deg) scale(.98); }
    100% { opacity: 1; transform: perspective(720px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) scale(1); filter: none; }
}

@keyframes v60DealToOpponentHand {
    0%   { opacity: 0; transform: translate3d(0,-54px,0) rotate(-16deg) scale(.62); filter: blur(2px) brightness(1.6); }
    64%  { opacity: 1; transform: translate3d(0,7px,0) rotate(4deg) scale(1.12); filter: blur(0) brightness(1.2); }
    100% { opacity: 1; filter: none; }
}

@keyframes v60CardFlip {
    0%   { transform: perspective(720px) rotateY(0) translateY(0) scale(1); filter: brightness(1); }
    46%  { transform: perspective(720px) rotateY(94deg) translateY(-9px) scale(1.12); filter: brightness(2.15) drop-shadow(0 0 15px #ffe187); }
    54%  { transform: perspective(720px) rotateY(266deg) translateY(-9px) scale(1.12); filter: brightness(2.15) drop-shadow(0 0 15px #ffe187); }
    100% { transform: perspective(720px) rotateY(360deg) translateY(0) scale(1); filter: brightness(1); }
}

@keyframes v60SelectionPulse {
    0%   { transform: translateY(0) scale(1); filter: brightness(1); }
    42%  { transform: translateY(-11px) rotateZ(-2deg) scale(1.13); filter: brightness(1.45) drop-shadow(0 0 14px #ffd85f); }
    72%  { transform: translateY(-5px) rotateZ(1deg) scale(1.04); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes v60ArrivalFlash {
    0%   { opacity: 0; transform: scale(.58) rotate(-8deg); filter: blur(4px); }
    35%  { opacity: .95; transform: scale(1.12) rotate(2deg); filter: blur(0); }
    100% { opacity: 0; transform: scale(1.34) rotate(5deg); }
}

@keyframes v60SelectionRing {
    0%   { opacity: 1; transform: scale(.35); }
    100% { opacity: 0; transform: scale(5.2); }
}

@keyframes v60SparkFlight {
    0%   { opacity: 1; transform: rotate(var(--v60-angle)) translateY(0) scaleY(.35); }
    100% { opacity: 0; transform: rotate(var(--v60-angle)) translateY(-72px) scaleY(1.25); }
}

@keyframes v60ImpactBurst {
    0%   { opacity: 0; transform: scale(.18) rotate(0deg); }
    22%  { opacity: 1; transform: scale(1.35) rotate(24deg); }
    100% { opacity: 0; transform: scale(4.8) rotate(78deg); }
}

@keyframes v60ImpactRays {
    0%   { opacity: 0; transform: scale(.18) rotate(-18deg); }
    28%  { opacity: .95; transform: scale(.72) rotate(5deg); }
    100% { opacity: 0; transform: scale(1.62) rotate(32deg); }
}

@keyframes v60ScreenFlash {
    0%   { opacity: .95; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.v45-battle-active .card,
    body.v45-battle-active .opponent-mini-card,
    .v60-card-arrival-flash,
    .v60-selection-burst,
    .v60-impact-burst,
    .v60-impact-rays,
    .v60-card-spark,
    body.v60-impact-screen-flash::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}