.inscription-charge-effect {
    position: fixed;
    inset: 0;
    z-index: 2280;
    pointer-events: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    opacity: 0;
    transition: opacity 140ms ease;
}

.inscription-charge-effect.is-visible {
    opacity: 1;
}

.inscription-charge-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 46%, rgba(125, 211, 252, 0.18), transparent 26%),
        radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.22), transparent 46%),
        rgba(2, 6, 23, 0.50);
    animation: inscriptionChargeBackdrop 1380ms ease-out forwards;
}

.inscription-charge-panel {
    position: relative;
    width: min(920px, 94vw);
    min-height: 390px;
    padding: 24px 30px 24px;
    border: 1px solid rgba(186, 230, 253, 0.48);
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 8%, rgba(224, 242, 254, 0.20), transparent 42%),
        linear-gradient(180deg, rgba(15, 35, 56, 0.74), rgba(5, 17, 32, 0.62));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 22px 70px rgba(2, 6, 23, 0.58),
        0 0 38px rgba(56, 189, 248, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    overflow: hidden;
    transform: translateY(12px) scale(0.96);
    opacity: 0;
    animation: inscriptionChargePanel 1380ms cubic-bezier(0.18, 0.88, 0.26, 1) forwards;
}

.inscription-charge-title {
    margin: 0;
    color: #f0f9ff;
    font-size: clamp(2.2rem, 6vw, 4.8rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.06em;
    text-shadow:
        0 0 12px rgba(56, 189, 248, 0.86),
        0 0 34px rgba(14, 165, 233, 0.56),
        0 6px 20px rgba(0, 0, 0, 0.74);
}

.inscription-charge-card-list {
    width: 100%;
    min-height: calc(var(--inscription-card-shell-height, 176px) + 18px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    perspective: 900px;
}

.inscription-charge-card-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--inscription-card-gap, 10px);
    width: 100%;
    max-width: 100%;
    min-height: calc(var(--inscription-card-shell-height, 176px) + 10px);
    overflow: visible;
}

.inscription-charge-card-shell {
    width: var(--inscription-card-shell-width, 124px);
    height: var(--inscription-card-shell-height, 176px);
    flex: 0 0 var(--inscription-card-shell-width, 124px);
    display: grid;
    place-items: center;
    position: relative;
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.44));
    opacity: 0;
    transform:
        translateY(18px)
        rotate(calc((var(--inscription-card-index) - ((var(--inscription-row-count) - 1) / 2)) * 1.35deg))
        scale(0.78);
    animation: inscriptionChargeCard 1380ms cubic-bezier(0.2, 0.86, 0.28, 1) forwards;
    animation-delay: calc(var(--inscription-card-global-index) * 28ms);
}

.inscription-charge-card-shell::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.98), transparent 28%),
        radial-gradient(circle at 50% 50%, #dff7ff 0%, #60d9ff 48%, #0ea5e9 100%);
    box-shadow:
        0 0 12px rgba(186, 230, 253, 0.94),
        0 0 28px rgba(14, 165, 233, 0.62);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
    animation: inscriptionChargeCardOrb 1380ms ease-out forwards;
    animation-delay: calc(var(--inscription-card-global-index) * 28ms);
}

.inscription-charge-card-shell > .card,
.inscription-charge-card-shell > .cg-card {
    cursor: default;
    pointer-events: none;
    transform: scale(var(--inscription-card-inner-scale, 0.92));
    transform-origin: center;
}

.inscription-charge-subtitle {
    min-height: 1.4em;
    margin: 0;
    color: rgba(224, 242, 254, 0.88);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.52);
    opacity: 0;
    animation: inscriptionChargeSubtitle 1380ms ease-out forwards;
}

.inscription-charge-droplet {
    position: fixed;
    z-index: 2290;
    width: 13px;
    height: 13px;
    border-radius: 999px 999px 999px 30%;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.96), transparent 28%),
        linear-gradient(135deg, #dff7ff, #38bdf8 50%, #0ea5e9);
    box-shadow:
        0 0 10px rgba(125, 211, 252, 0.86),
        0 0 22px rgba(14, 165, 233, 0.58);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45) rotate(45deg);
    animation: inscriptionChargeDroplet 580ms cubic-bezier(0.18, 0.9, 0.22, 1) forwards;
}

.inscription-charge-opponent .inscription-charge-title {
    color: #e0f2fe;
}

@keyframes inscriptionChargeBackdrop {
    0% { opacity: 0; }
    12% { opacity: 1; }
    78% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes inscriptionChargePanel {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.94);
    }
    12% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    46% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
    68% {
        opacity: 1;
        transform: translateY(-4px) scale(0.84);
        filter: brightness(1.35) saturate(1.35);
    }
    86% {
        opacity: 0.46;
        transform: translateY(-10px) scale(0.72);
        filter: brightness(1.7) blur(2px);
    }
    100% {
        opacity: 0;
        transform: translateY(-16px) scale(0.68);
        filter: brightness(1.8) blur(5px);
    }
}

@keyframes inscriptionChargeCard {
    0% {
        opacity: 0;
        transform: translateY(24px) rotate(-2deg) scale(0.68);
    }
    18% {
        opacity: 1;
        transform:
            translateY(0)
            rotate(calc((var(--inscription-card-index) - ((var(--inscription-row-count) - 1) / 2)) * 1.35deg))
            scale(1);
    }
    48% {
        opacity: 1;
        transform:
            translateY(0)
            rotate(calc((var(--inscription-card-index) - ((var(--inscription-row-count) - 1) / 2)) * 1.35deg))
            scale(1);
        filter: brightness(1);
    }
    66% {
        opacity: 0.24;
        transform: translateY(-4px) rotate(0deg) scale(0.16);
        filter: brightness(2.2) blur(2px) saturate(1.8);
    }
    82% {
        opacity: 0;
        transform: translateY(-4px) rotate(0deg) scale(0.02);
        filter: brightness(2.5) blur(9px) saturate(1.9);
    }
    100% {
        opacity: 0;
        transform: translateY(-4px) rotate(0deg) scale(0.02);
    }
}

@keyframes inscriptionChargeCardOrb {
    0%, 56% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.18);
    }
    64% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.22);
    }
    72% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    82%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.82);
    }
}

@keyframes inscriptionChargeSubtitle {
    0%, 24% {
        opacity: 0;
        transform: translateY(8px);
    }
    36%, 68% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes inscriptionChargeDroplet {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.35) rotate(45deg);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.18) rotate(45deg);
    }
    78% {
        opacity: 1;
        transform: translate(calc(-50% + var(--drop-x)), calc(-50% + var(--drop-y))) scale(0.86) rotate(405deg);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--drop-x)), calc(-50% + var(--drop-y))) scale(1.42) rotate(405deg);
    }
}

@media (max-width: 640px) {
    .inscription-charge-panel {
        width: min(620px, 94vw);
        min-height: 360px;
        padding: 24px 20px 22px;
    }

    .inscription-charge-card-shell {
        width: min(var(--inscription-card-shell-width, 84px), 84px);
        height: min(var(--inscription-card-shell-height, 120px), 120px);
        flex-basis: min(var(--inscription-card-shell-width, 84px), 84px);
    }

    .inscription-charge-card-row {
        gap: 4px;
    }

    .inscription-charge-card-shell > .card,
    .inscription-charge-card-shell > .cg-card {
        transform: scale(min(var(--inscription-card-inner-scale, 0.62), 0.62));
    }
}

@media (prefers-reduced-motion: reduce) {
    .inscription-charge-effect,
    .inscription-charge-backdrop,
    .inscription-charge-panel,
    .inscription-charge-card-shell,
    .inscription-charge-card-shell::after,
    .inscription-charge-subtitle,
    .inscription-charge-droplet {
        animation-duration: 1ms;
        transition-duration: 1ms;
    }
}

.resource-recovery-effect {
    position: fixed;
    inset: 0;
    z-index: 2300;
    pointer-events: none;
    opacity: 0;
    transition: opacity 90ms ease;
}

.resource-recovery-effect.is-visible {
    opacity: 1;
}

.resource-recovery-anchor {
    position: fixed;
    left: var(--resource-x, 50vw);
    top: var(--resource-y, 50vh);
    width: 168px;
    height: 168px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
}

.resource-recovery-sigil {
    position: relative;
    width: 86px;
    height: 86px;
    border-radius: 999px;
    opacity: 0;
    transform: scale(0.42) rotate(-18deg);
    animation: resourceRecoverySigil 960ms cubic-bezier(0.17, 0.86, 0.32, 1) forwards;
}

.resource-recovery-sigil::before,
.resource-recovery-sigil::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.resource-recovery-fusion-charge .resource-recovery-sigil {
    border: 2px solid rgba(189, 225, 255, 0.86);
    background:
        conic-gradient(from 0deg, rgba(56, 189, 248, 0.10), rgba(168, 85, 247, 0.78), rgba(34, 211, 238, 0.82), rgba(56, 189, 248, 0.10));
    box-shadow:
        0 0 18px rgba(34, 211, 238, 0.60),
        0 0 32px rgba(168, 85, 247, 0.42),
        inset 0 0 16px rgba(255, 255, 255, 0.22);
}

.resource-recovery-fusion-charge .resource-recovery-sigil::before {
    inset: 12px;
    border: 2px solid rgba(255, 255, 255, 0.70);
    animation: resourceFusionRing 760ms linear forwards;
}

.resource-recovery-fusion-charge .resource-recovery-sigil::after {
    inset: 27px;
    background: linear-gradient(135deg, #dff7ff, #38bdf8 45%, #a855f7);
    box-shadow: 0 0 18px rgba(125, 211, 252, 0.82);
}

.resource-recovery-inscription-charge .resource-recovery-sigil {
    border-radius: 18px;
    border: 2px solid rgba(255, 248, 214, 0.92);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(250, 204, 21, 0.78) 48%, rgba(217, 119, 6, 0.82));
    box-shadow:
        0 0 18px rgba(250, 204, 21, 0.58),
        0 0 30px rgba(255, 255, 255, 0.28),
        inset 0 0 18px rgba(255, 255, 255, 0.38);
}

.resource-recovery-inscription-charge .resource-recovery-sigil::before {
    inset: 15px;
    border: 2px solid rgba(120, 53, 15, 0.56);
    border-radius: 12px;
}

.resource-recovery-inscription-charge .resource-recovery-sigil::after {
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 14px rgba(255, 248, 214, 0.78);
}

.resource-recovery-label {
    position: absolute;
    left: 50%;
    top: 112px;
    min-width: 92px;
    padding: 5px 10px 6px;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 8px 20px rgba(2, 6, 23, 0.34);
    opacity: 0;
    transform: translate(-50%, 8px);
    animation: resourceRecoveryLabel 920ms ease-out forwards;
}

.resource-recovery-fusion-charge .resource-recovery-label {
    border-color: rgba(125, 211, 252, 0.42);
    color: #dff7ff;
}

.resource-recovery-inscription-charge .resource-recovery-label {
    border-color: rgba(250, 204, 21, 0.46);
    color: #fff7cc;
}

.resource-recovery-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    opacity: 0;
    transform:
        translate(-50%, -50%)
        rotate(var(--particle-angle))
        translateY(0)
        scale(0.6);
    animation: resourceRecoveryParticle 860ms cubic-bezier(0.16, 0.82, 0.26, 1) forwards;
    animation-delay: calc(var(--particle-index) * 18ms);
}

.resource-recovery-fusion-charge .resource-recovery-particle {
    background: #67e8f9;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.86);
}

.resource-recovery-inscription-charge .resource-recovery-particle {
    background: #fde68a;
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.82);
}

.place-rule-dot.is-resource-recovered {
    animation: resourceRecoveredDotPulse 980ms ease-out;
}

.place-rule-dot-orange.is-fusion-recovered {
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.52),
        0 0 13px rgba(251, 146, 60, 0.92),
        0 0 28px rgba(34, 211, 238, 0.52);
}

.place-rule-dot.is-inscription-recovered:not(.place-rule-dot-orange) {
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.46),
        0 0 12px rgba(250, 204, 21, 0.82),
        0 0 24px rgba(255, 255, 255, 0.34);
}

@keyframes resourceRecoverySigil {
    0% {
        opacity: 0;
        transform: scale(0.38) rotate(-20deg);
        filter: brightness(1);
    }
    18% {
        opacity: 1;
        transform: scale(1.16) rotate(0deg);
        filter: brightness(1.25);
    }
    48% {
        opacity: 1;
        transform: scale(0.94) rotate(0deg);
        filter: brightness(1.05);
    }
    78% {
        opacity: 0.84;
        transform: scale(0.68) rotate(12deg);
        filter: brightness(1.55) blur(0.2px);
    }
    100% {
        opacity: 0;
        transform: scale(0.26) rotate(24deg);
        filter: brightness(1.8) blur(3px);
    }
}

@keyframes resourceFusionRing {
    0% { transform: rotate(0deg) scale(0.82); }
    100% { transform: rotate(360deg) scale(1.18); }
}

@keyframes resourceRecoveryLabel {
    0%, 18% {
        opacity: 0;
        transform: translate(-50%, 10px);
    }
    34%, 72% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -7px);
    }
}

@keyframes resourceRecoveryParticle {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(var(--particle-angle))
            translateY(0)
            scale(0.45);
    }
    18% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(var(--particle-angle))
            translateY(-36px)
            scale(1);
    }
    76% {
        opacity: 0.82;
        transform:
            translate(-50%, -50%)
            rotate(var(--particle-angle))
            translateY(-58px)
            scale(0.74);
    }
    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(var(--particle-angle))
            translateY(-72px)
            scale(0.22);
    }
}

@keyframes resourceRecoveredDotPulse {
    0% { transform: scale(0.82); }
    22% { transform: scale(1.34); }
    54% { transform: scale(1); }
    78% { transform: scale(1.16); }
    100% { transform: scale(1); }
}

@media (max-width: 640px) {
    .resource-recovery-anchor {
        width: 132px;
        height: 132px;
    }

    .resource-recovery-sigil {
        width: 68px;
        height: 68px;
    }

    .resource-recovery-label {
        top: 91px;
        min-width: 82px;
        font-size: 0.82rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .resource-recovery-effect,
    .resource-recovery-sigil,
    .resource-recovery-sigil::before,
    .resource-recovery-label,
    .resource-recovery-particle,
    .place-rule-dot.is-resource-recovered {
        animation-duration: 1ms;
        transition-duration: 1ms;
    }
}

.act-effect-block-effect,
.ongoing-effect-trigger {
    position: fixed;
    inset: 0;
    z-index: 2360;
    pointer-events: none;
    opacity: 0;
    transition: opacity 80ms ease;
}

.act-effect-block-effect.is-visible,
.ongoing-effect-trigger.is-visible {
    opacity: 1;
}

.act-effect-block-anchor {
    position: fixed;
    left: var(--block-x, 50vw);
    top: var(--block-y, 50vh);
    width: 190px;
    height: 170px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
}

.act-effect-block-shield {
    position: relative;
    width: 104px;
    height: 118px;
    clip-path: polygon(50% 0, 92% 18%, 84% 72%, 50% 100%, 16% 72%, 8% 18%);
    background:
        linear-gradient(145deg, rgba(240, 249, 255, 0.96), rgba(125, 211, 252, 0.72) 38%, rgba(37, 99, 235, 0.84));
    border: 2px solid rgba(219, 234, 254, 0.86);
    box-shadow:
        0 0 18px rgba(125, 211, 252, 0.78),
        0 0 34px rgba(59, 130, 246, 0.38),
        inset 0 0 20px rgba(255, 255, 255, 0.30);
    opacity: 0;
    transform: scale(0.55);
    animation: actEffectBlockShield 920ms cubic-bezier(0.16, 0.86, 0.28, 1) forwards;
}

.act-effect-block-shield::before,
.act-effect-block-shield::after {
    content: "";
    position: absolute;
    inset: 12px;
    clip-path: inherit;
    border: 2px solid rgba(255, 255, 255, 0.56);
}

.act-effect-block-shield::after {
    inset: 36px 28px 30px;
    background: rgba(255, 255, 255, 0.78);
    border: 0;
    filter: blur(0.2px);
}

.act-effect-block-title,
.act-effect-block-subtitle {
    position: absolute;
    left: 50%;
    text-align: center;
    color: #eff6ff;
    text-shadow: 0 2px 8px rgba(15, 23, 42, 0.78);
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
    animation: actEffectBlockText 880ms ease-out forwards;
}

.act-effect-block-title {
    top: 112px;
    min-width: 118px;
    padding: 5px 12px 6px;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.50);
    background: rgba(15, 23, 42, 0.78);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1;
}

.act-effect-block-subtitle {
    top: 142px;
    width: min(240px, 74vw);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    color: #dbeafe;
}

.act-effect-block-spark {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 7px;
    height: 18px;
    border-radius: 999px;
    background: #bfdbfe;
    box-shadow: 0 0 10px rgba(147, 197, 253, 0.90);
    opacity: 0;
    transform:
        translate(-50%, -50%)
        rotate(var(--spark-angle))
        translateY(0)
        scaleY(0.4);
    animation: actEffectBlockSpark 780ms cubic-bezier(0.16, 0.82, 0.26, 1) forwards;
    animation-delay: calc(var(--spark-index) * 20ms);
}

.place-field.is-act-effect-blocked,
.place-field.is-ongoing-effect-triggered {
    animation: ongoingEffectFieldPulse 820ms ease-out;
}

.place-field.is-act-effect-blocked {
    box-shadow:
        0 0 0 2px rgba(191, 219, 254, 0.64),
        0 0 28px rgba(59, 130, 246, 0.36);
}

.ongoing-effect-anchor {
    position: fixed;
    left: var(--ongoing-x, 50vw);
    top: var(--ongoing-y, 50vh);
    width: 168px;
    height: 132px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
}

.ongoing-effect-ring {
    position: absolute;
    width: 86px;
    height: 86px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    opacity: 0;
    transform: scale(0.38);
    animation: ongoingEffectRing 720ms cubic-bezier(0.15, 0.88, 0.28, 1) forwards;
}

.ongoing-effect-mark {
    position: relative;
    min-width: 58px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(15, 23, 42, 0.60);
    opacity: 0;
    transform: translateY(6px) scale(0.7);
    animation: ongoingEffectMark 700ms ease-out forwards;
}

.ongoing-effect-title,
.ongoing-effect-source {
    position: absolute;
    left: 50%;
    text-align: center;
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
    animation: ongoingEffectText 720ms ease-out forwards;
}

.ongoing-effect-title {
    top: 86px;
    min-width: 112px;
    padding: 5px 10px 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.80);
    color: #f8fafc;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.58);
}

.ongoing-effect-source {
    top: 115px;
    width: min(210px, 70vw);
    color: rgba(248, 250, 252, 0.88);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.62);
}

.ongoing-effect-draw .ongoing-effect-ring {
    background: radial-gradient(circle, rgba(186, 230, 253, 0.26), rgba(14, 165, 233, 0.18) 48%, transparent 68%);
    border-color: rgba(125, 211, 252, 0.76);
    box-shadow: 0 0 22px rgba(14, 165, 233, 0.52);
}

.ongoing-effect-draw .ongoing-effect-mark {
    background: linear-gradient(135deg, #0284c7, #22d3ee);
    border: 1px solid rgba(186, 230, 253, 0.72);
}

.ongoing-effect-inscription .ongoing-effect-ring {
    background: radial-gradient(circle, rgba(254, 240, 138, 0.28), rgba(34, 197, 94, 0.18) 48%, transparent 68%);
    border-color: rgba(190, 242, 100, 0.74);
    box-shadow: 0 0 22px rgba(34, 197, 94, 0.46);
}

.ongoing-effect-inscription .ongoing-effect-mark {
    background: linear-gradient(135deg, #16a34a, #facc15);
    border: 1px solid rgba(254, 240, 138, 0.76);
}

.ongoing-effect-block .ongoing-effect-ring {
    background: radial-gradient(circle, rgba(254, 202, 202, 0.24), rgba(239, 68, 68, 0.18) 48%, transparent 68%);
    border-color: rgba(252, 165, 165, 0.72);
    box-shadow: 0 0 22px rgba(239, 68, 68, 0.48);
}

.ongoing-effect-block .ongoing-effect-mark {
    background: linear-gradient(135deg, #b91c1c, #f97316);
    border: 1px solid rgba(254, 202, 202, 0.72);
}

.ongoing-effect-neutral .ongoing-effect-ring {
    background: radial-gradient(circle, rgba(226, 232, 240, 0.22), rgba(100, 116, 139, 0.18) 48%, transparent 68%);
    border-color: rgba(203, 213, 225, 0.70);
    box-shadow: 0 0 22px rgba(148, 163, 184, 0.42);
}

.ongoing-effect-neutral .ongoing-effect-mark {
    background: linear-gradient(135deg, #475569, #94a3b8);
    border: 1px solid rgba(226, 232, 240, 0.68);
}

.place-field.is-ongoing-effect-block {
    box-shadow:
        0 0 0 2px rgba(252, 165, 165, 0.58),
        0 0 28px rgba(239, 68, 68, 0.30);
}

@keyframes actEffectBlockShield {
    0% {
        opacity: 0;
        transform: scale(0.48) rotate(-8deg);
        filter: brightness(1);
    }
    22% {
        opacity: 1;
        transform: scale(1.14) rotate(0deg);
        filter: brightness(1.35);
    }
    62% {
        opacity: 1;
        transform: scale(0.98) rotate(0deg);
        filter: brightness(1.08);
    }
    100% {
        opacity: 0;
        transform: scale(0.72) rotate(8deg);
        filter: brightness(1.55) blur(1.4px);
    }
}

@keyframes actEffectBlockText {
    0%, 16% {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }
    30%, 74% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-6px);
    }
}

@keyframes actEffectBlockSpark {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(var(--spark-angle))
            translateY(0)
            scaleY(0.35);
    }
    28% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(var(--spark-angle))
            translateY(-48px)
            scaleY(1);
    }
    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(var(--spark-angle))
            translateY(-78px)
            scaleY(0.22);
    }
}

@keyframes ongoingEffectRing {
    0% {
        opacity: 0;
        transform: scale(0.38);
    }
    24% {
        opacity: 1;
        transform: scale(1.1);
    }
    58% {
        opacity: 0.88;
        transform: scale(0.92);
    }
    100% {
        opacity: 0;
        transform: scale(1.42);
    }
}

@keyframes ongoingEffectMark {
    0%, 10% {
        opacity: 0;
        transform: translateY(8px) scale(0.68);
    }
    28%, 70% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px) scale(0.84);
    }
}

@keyframes ongoingEffectText {
    0%, 20% {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }
    36%, 72% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-6px);
    }
}

@keyframes ongoingEffectFieldPulse {
    0% { transform: scale(0.992); }
    28% { transform: scale(1.012); }
    100% { transform: scale(1); }
}

@media (max-width: 640px) {
    .act-effect-block-anchor {
        width: 156px;
        height: 146px;
    }

    .act-effect-block-shield {
        width: 82px;
        height: 94px;
    }

    .act-effect-block-title {
        top: 91px;
        font-size: 0.84rem;
    }

    .act-effect-block-subtitle {
        top: 119px;
        font-size: 0.68rem;
    }

    .ongoing-effect-anchor {
        width: 138px;
        height: 116px;
    }

    .ongoing-effect-ring {
        width: 70px;
        height: 70px;
    }

    .ongoing-effect-mark {
        min-width: 50px;
        height: 30px;
        font-size: 0.66rem;
    }

    .ongoing-effect-title {
        top: 76px;
        min-width: 96px;
        font-size: 0.74rem;
    }

    .ongoing-effect-source {
        top: 103px;
        font-size: 0.64rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .act-effect-block-effect,
    .act-effect-block-shield,
    .act-effect-block-title,
    .act-effect-block-subtitle,
    .act-effect-block-spark,
    .ongoing-effect-trigger,
    .ongoing-effect-ring,
    .ongoing-effect-mark,
    .ongoing-effect-title,
    .ongoing-effect-source,
    .place-field.is-act-effect-blocked,
    .place-field.is-ongoing-effect-triggered {
        animation-duration: 1ms;
        transition-duration: 1ms;
    }
}