/* SHOCKER_V57_CHARACTER_ABILITY_NAME_CINEMATIC */

#duel-cinematic.type-character-ability {
    color: var(--ability-cinematic-gem, #f3d778) !important;
}

#duel-cinematic.type-character-ability .duel-vignette {
    background:
        radial-gradient(circle at center, var(--ability-cinematic-glow, rgba(255, 215, 100, .32)) 0%, rgba(12, 8, 16, .7) 46%, rgba(0, 0, 0, .98) 100%),
        linear-gradient(135deg, rgba(5, 5, 12, .98), rgba(20, 10, 23, .96)) !important;
}

#duel-cinematic.type-character-ability .duel-panel {
    width: min(96vw, 1120px) !important;
    padding: clamp(26px, 5vh, 52px) clamp(14px, 4vw, 46px) !important;
    border-top: 3px solid var(--ability-cinematic-gem, #f3d778) !important;
    border-bottom: 3px solid var(--ability-cinematic-gem, #f3d778) !important;
    background:
        linear-gradient(90deg, transparent, rgba(0, 0, 0, .91) 9%, rgba(8, 7, 14, .97) 50%, rgba(0, 0, 0, .91) 91%, transparent) !important;
    box-shadow:
        0 0 58px var(--ability-cinematic-glow, rgba(255, 215, 100, .5)),
        inset 0 0 32px rgba(255, 255, 255, .06) !important;
    animation: v57AbilityPanel 2.35s cubic-bezier(.16, .84, .2, 1) both !important;
}

#duel-cinematic.type-character-ability .duel-kicker {
    color: #fff2cf !important;
    font-size: clamp(12px, 2.8vw, 20px) !important;
    font-weight: 700;
    letter-spacing: .34em !important;
    text-shadow: 0 0 12px var(--ability-cinematic-glow, rgba(255, 215, 100, .6));
}

#duel-cinematic.type-character-ability .duel-main {
    box-sizing: border-box;
    max-width: 100%;
    margin: clamp(12px, 2.2vh, 22px) auto 0 !important;
    color: var(--ability-cinematic-gem, #f3d778) !important;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif !important;
    font-size: clamp(42px, 9.2vw, 108px) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: .09em !important;
    overflow-wrap: anywhere;
    text-shadow:
        0 4px 0 rgba(0, 0, 0, .95),
        0 0 18px var(--ability-cinematic-gem, #f3d778),
        0 0 48px var(--ability-cinematic-glow, rgba(255, 215, 100, .82)) !important;
    animation: v57AbilityName 2.35s cubic-bezier(.14, .86, .2, 1) both !important;
}

#duel-cinematic.type-character-ability.v57-long-technique .duel-main {
    font-size: clamp(34px, 7.6vw, 88px) !important;
    letter-spacing: .055em !important;
}

#duel-cinematic.type-character-ability .duel-sub {
    margin-top: clamp(13px, 2.4vh, 24px) !important;
    color: #fff5df !important;
    font-size: clamp(14px, 3.2vw, 24px) !important;
    font-weight: 700;
    letter-spacing: .12em !important;
    text-shadow: 0 2px 6px #000;
}

#duel-cinematic.type-character-ability .duel-symbol {
    color: var(--ability-cinematic-gem, #f3d778) !important;
    opacity: .11;
    filter: blur(1px) drop-shadow(0 0 26px var(--ability-cinematic-glow, rgba(255, 215, 100, .7)));
}

#duel-cinematic.type-character-ability.ability-trump .duel-flash {
    background: #fff0ca;
}

#duel-cinematic.type-character-ability.ability-awaken .duel-flash {
    background: var(--ability-cinematic-gem, #ffffff);
}

@keyframes v57AbilityPanel {
    0% { opacity: 0; transform: skewX(-7deg) scale(.72); filter: blur(15px); }
    17% { opacity: 1; transform: skewX(-7deg) scale(1.045); filter: blur(0); }
    28%, 74% { opacity: 1; transform: skewX(-7deg) scale(1); }
    100% { opacity: 0; transform: skewX(-7deg) scale(1.06); filter: blur(5px); }
}

@keyframes v57AbilityName {
    0% { opacity: 0; transform: scale(1.42); filter: blur(18px); letter-spacing: .28em; }
    19% { opacity: 1; transform: scale(.94); filter: blur(0); }
    31%, 76% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.09); filter: blur(5px); }
}

@media (max-width: 520px) {
    #duel-cinematic.type-character-ability .duel-panel {
        padding: 28px 9px 31px !important;
    }

    #duel-cinematic.type-character-ability .duel-main {
        font-size: clamp(36px, 11vw, 62px) !important;
        letter-spacing: .055em !important;
    }

    #duel-cinematic.type-character-ability.v57-long-technique .duel-main {
        font-size: clamp(30px, 9.2vw, 50px) !important;
    }
}