/* --- スキルカットイン演出 --- */
    #cut-in-overlay {
        position: fixed;
        inset: 0;
        z-index: 12050;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.12s linear;
        font-family: var(--font-ui);
        --cut-in-theme: var(--seki-s);
    }
    #cut-in-overlay.active {
        opacity: 1;
    }
    #cut-in-overlay.attr-s {
        --cut-in-theme: var(--seki-s);
    }
    #cut-in-overlay.attr-e {
        --cut-in-theme: var(--seki-e);
    }
    #cut-in-overlay.attr-k {
        --cut-in-theme: var(--seki-k);
    }

    #cut-in-overlay > svg {
        position: absolute;
        width: 0;
        height: 0;
    }
    #cut-in-canvas,
    #cut-in-scanlines,
    #cut-in-metadata,
    #cut-in-fx {
        position: absolute;
        inset: 0;
    }
    #cut-in-canvas {
        z-index: 0;
    }
    #cut-in-scanlines {
        z-index: 5;
        opacity: 0.58;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.26) 51%);
        background-size: 100% 4px;
    }
    #cut-in-metadata {
        z-index: 8;
        opacity: 0.5;
        mix-blend-mode: screen;
        font-family: var(--font-ui);
        font-size: 10px;
        color: var(--cut-in-theme);
        overflow: hidden;
    }
    .cut-in-meta-group {
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 2px;
        letter-spacing: 0.03em;
    }
    .cut-in-meta-top-left {
        top: 20px;
        left: 20px;
    }
    .cut-in-meta-top-right {
        top: 20px;
        right: 20px;
        text-align: right;
    }
    .cut-in-meta-bot-left {
        bottom: 20px;
        left: 20px;
    }
    .cut-in-meta-bot-right {
        bottom: 20px;
        right: 20px;
        text-align: right;
    }
    .cut-in-meta-log-scroll {
        top: 10%;
        left: 2%;
        width: 210px;
        height: 80%;
        overflow: hidden;
        opacity: 0.38;
        mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    }
    .cut-in-meta-log-content {
        white-space: pre;
        line-height: 1.2;
        animation: cutInMetaScrollUp 8s linear infinite;
    }
    .cut-in-meta-log-scroll-2 {
        top: 15%;
        left: 15%;
        width: 165px;
        height: 70%;
        overflow: hidden;
        opacity: 0.2;
        font-size: 8px;
        mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    }
    .cut-in-meta-log-content-2 {
        white-space: pre;
        line-height: 1.2;
        animation: cutInMetaScrollUp 12s linear infinite;
    }
    .cut-in-meta-hex {
        top: 5%;
        right: 2%;
        writing-mode: vertical-rl;
        opacity: 0.28;
        letter-spacing: 2px;
        font-size: 9px;
        height: 90%;
        mask-image: linear-gradient(to bottom, transparent, black, transparent);
    }
    .cut-in-meta-hex-content {
        white-space: pre;
        animation: cutInMetaScrollDown 25s linear infinite;
    }
    .cut-in-meta-system-scroll {
        top: 20%;
        right: 8%;
        width: 180px;
        height: 60%;
        overflow: hidden;
        opacity: 0.25;
        text-align: right;
        mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    }
    .cut-in-meta-system-content {
        white-space: pre;
        line-height: 1.4;
        animation: cutInMetaScrollUp 10s linear infinite;
    }
    .cut-in-meta-stream {
        position: absolute;
        white-space: nowrap;
        opacity: 0.35;
        font-size: 11px;
        letter-spacing: 1px;
    }
    .cut-in-meta-stream-top {
        top: 5px;
        left: 0;
        animation: cutInMetaDriftRight 40s linear infinite;
    }
    .cut-in-meta-stream-bottom {
        bottom: 5px;
        left: 0;
        animation: cutInMetaDriftLeft 40s linear infinite;
    }
    .cut-in-meta-bg-code {
        position: absolute;
        top: 0;
        left: 20%;
        width: 60%;
        height: 100%;
        opacity: 0.05;
        font-size: 12px;
        overflow: hidden;
        mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    }
    .cut-in-meta-bg-code-content {
        white-space: pre;
        animation: cutInMetaScrollUp 30s linear infinite;
    }
    @keyframes cutInMetaScrollUp {
        0% { transform: translateY(0); }
        100% { transform: translateY(-50%); }
    }
    @keyframes cutInMetaScrollDown {
        0% { transform: translateY(-50%); }
        100% { transform: translateY(0); }
    }
    @keyframes cutInMetaDriftRight {
        0% { transform: translateX(-50%); }
        100% { transform: translateX(0); }
    }
    @keyframes cutInMetaDriftLeft {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    #cut-in-slit {
        position: relative;
        z-index: 20;
        width: min(180vw, 1500px);
        height: clamp(220px, 35vh, 350px);
        display: flex;
        align-items: center;
        overflow: hidden;
        opacity: 0;
        transform: rotate(-4deg);
        background: rgba(5, 12, 25, 0.95);
        border-top: 2px solid var(--cut-in-theme);
        border-bottom: 2px solid var(--cut-in-theme);
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.82), inset 0 0 50px var(--cut-in-theme);
        backdrop-filter: blur(10px);
    }
    #cut-in-overlay.attr-s.active #cut-in-slit {
        animation: cutInSEntrance 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    }
    #cut-in-overlay.attr-e.active #cut-in-slit {
        animation: cutInEEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    #cut-in-overlay.attr-k.active #cut-in-slit {
        animation: cutInKEntrance 0.3s steps(5) forwards;
    }
    #cut-in-overlay.attr-k.active::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 15;
        background: #000;
        animation: cutInKBlackout 0.3s forwards;
    }
    @keyframes cutInSEntrance {
        0% { opacity: 0; transform: rotate(-4deg) scaleY(0.1); filter: blur(10px); }
        100% { opacity: 1; transform: rotate(-4deg) scaleY(1); filter: blur(0); }
    }
    @keyframes cutInEEntrance {
        0% { opacity: 0; transform: rotate(-4deg) translateX(150%) skewX(-30deg); }
        70% { transform: rotate(-4deg) translateX(-5%) skewX(5deg); }
        100% { opacity: 1; transform: rotate(-4deg) translateX(0) skewX(0); }
    }
    @keyframes cutInKEntrance {
        0% { opacity: 0; transform: rotate(0deg) scale(1.5); }
        50% { opacity: 0.5; transform: rotate(-6deg) scale(0.9); filter: invert(1); }
        100% { opacity: 1; transform: rotate(-4deg) scale(1); filter: none; }
    }
    @keyframes cutInKBlackout {
        0% { opacity: 0; }
        10% { opacity: 1; }
        80% { opacity: 1; }
        100% { opacity: 0; }
    }

    #cut-in-overlay.impact-pulse {
        animation: cutInShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }
    #cut-in-overlay.impact-pulse #cut-in-slit {
        filter: url(#cut-in-rgb-shift) brightness(1.35);
    }
    @keyframes cutInShake {
        0% { transform: translate(0, 0); }
        10% { transform: translate(-5px, -2px); }
        20% { transform: translate(5px, 2px); }
        30% { transform: translate(-7px, 0); }
        40% { transform: translate(7px, 0); }
        100% { transform: translate(0, 0); }
    }

    #cut-in-role-image-wrap {
        position: absolute;
        left: 8%;
        bottom: -35%;
        height: 150%;
        z-index: 10;
        transform: rotate(4deg);
        filter: drop-shadow(0 0 30px var(--cut-in-theme));
        opacity: 1;
        transition: opacity 0.2s ease;
    }
    #cut-in-role-image-wrap.is-hidden {
        opacity: 0;
    }
    #cut-in-role-img {
        width: auto;
        height: 100%;
        object-fit: contain;
    }
    #cut-in-info {
        position: relative;
        z-index: 20;
        margin-left: 45%;
        width: 50%;
        transform: rotate(4deg);
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    #cut-in-tags {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        margin-bottom: 10px;
    }
    #cut-in-role-name {
        background: var(--cut-in-theme);
        color: #000;
        padding: 5px 30px;
        font-family: var(--font-ui);
        font-size: clamp(24px, 5vw, 40px);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
        clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 0% 100%);
        box-shadow: 0 0 30px var(--cut-in-theme);
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
    #cut-in-player-name {
        padding-left: 5px;
        font-size: clamp(14px, 3vw, 20px);
        font-family: var(--font-ui);
        font-weight: bold;
        letter-spacing: 0.06em;
        opacity: 0.9;
        color: #eff6ff;
        text-shadow: 0 0 5px var(--cut-in-theme);
    }
    #cut-in-skill-names {
        text-align: left;
    }
    #cut-in-skill-eng {
        margin: 0;
        line-height: 0.9;
        white-space: nowrap;
        font-family: var(--font-ui);
        font-size: clamp(40px, 8vw, 70px);
        font-weight: 900;
        letter-spacing: 2px;
        color: #ffffff;
        text-shadow: 0 0 30px var(--cut-in-theme);
    }
    #cut-in-skill-jp {
        margin: 5px 0 0 5px;
        white-space: nowrap;
        font-family: var(--font-ui);
        font-size: clamp(18px, 4vw, 30px);
        font-weight: 700;
        letter-spacing: 0.12em;
        color: var(--cut-in-theme);
        text-shadow: 0 0 14px rgba(255, 255, 255, 0.15);
    }

    #cut-in-fx {
        z-index: 12;
        opacity: 0;
        transition: opacity 0.3s;
    }
    #cut-in-overlay.active #cut-in-fx {
        opacity: 1;
    }
    #cut-in-overlay.attr-s #cut-in-fx {
        background: radial-gradient(circle at center, rgba(0, 234, 255, 0.1) 0%, transparent 70%);
    }
    #cut-in-overlay.attr-s #cut-in-fx::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 150vh;
        height: 150vh;
        border: 2px dashed rgba(0, 234, 255, 0.3);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background:
            radial-gradient(transparent 60%, rgba(0, 234, 255, 0.2) 61%, transparent 62%),
            radial-gradient(transparent 40%, rgba(0, 234, 255, 0.2) 41%, transparent 42%);
        animation: cutInSOrbitSpin 20s linear infinite;
    }
    #cut-in-overlay.attr-s #cut-in-fx::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vh;
        height: 100vh;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        mix-blend-mode: overlay;
        background: conic-gradient(from 0deg, transparent 0deg, rgba(0, 234, 255, 0.5) 20deg, transparent 40deg);
        animation: cutInSScanSpin 4s linear infinite;
    }
    @keyframes cutInSOrbitSpin {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
    }
    @keyframes cutInSScanSpin {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
    }

    #cut-in-overlay.attr-e #cut-in-fx {
        mix-blend-mode: screen;
        background: radial-gradient(circle at center, rgba(0, 255, 106, 0.05) 0%, transparent 80%);
    }
    #cut-in-overlay.attr-e #cut-in-fx::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 100%;
        background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 106, 0.1) 20%, rgba(0, 255, 106, 0.3) 25%, rgba(0, 255, 106, 0.1) 30%, transparent 50%);
        background-size: 50% 100%;
        animation: cutInELiquidFlow 3s linear infinite;
    }
    #cut-in-overlay.attr-e #cut-in-fx::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: blur(2px);
        background: repeating-linear-gradient(0deg, transparent, transparent 48%, rgba(0, 255, 106, 0.1) 50%, transparent 52%);
        background-size: 100% 200%;
        animation: cutInEPulse 4s ease-in-out infinite;
    }
    @keyframes cutInELiquidFlow {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    @keyframes cutInEPulse {
        0% { background-position: 0 0; opacity: 0.3; }
        50% { opacity: 0.6; }
        100% { background-position: 0 100%; opacity: 0.3; }
    }

    #cut-in-overlay.attr-k #cut-in-fx {
        opacity: 0.8;
        mix-blend-mode: screen;
        background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255, 0, 0, 0.6) 30deg, transparent 60deg, transparent 180deg, rgba(255, 0, 0, 0.6) 210deg, transparent 240deg);
        animation: cutInKSiren 1s linear infinite;
    }
    #cut-in-overlay.attr-k #cut-in-fx::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: repeating-linear-gradient(transparent, transparent 2px, rgba(0, 0, 0, 0.5) 3px, transparent 4px);
        animation: cutInKNoise 0.2s steps(10) infinite;
    }
    #cut-in-overlay.attr-k.active::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 50;
        pointer-events: none;
        box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.8);
        animation: cutInKFlash 0.1s infinite alternate;
    }
    @keyframes cutInKSiren {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    @keyframes cutInKNoise {
        0% { transform: translate(0, 0); }
        100% { transform: translate(10px, 10px); }
    }
    @keyframes cutInKFlash {
        0% { opacity: 0.3; }
        100% { opacity: 0.7; }
    }

    @media (max-width: 768px) {
        #cut-in-slit {
            width: 200%;
            height: 350px;
        }
        #cut-in-role-image-wrap {
            left: -10%;
            bottom: 0;
            height: 110%;
            opacity: 0.3;
        }
        #cut-in-info {
            margin-left: 10%;
            width: 85%;
        }
        #cut-in-role-name {
            font-size: 28px;
            padding: 5px 20px;
        }
    }

    #visual-overlay {
        font-family: var(--font-ui);
    }
    

    /* ▼▼▼ 追加：皇帝パネル用の輝きアニメーション ▼▼▼ */
    @keyframes goldShine {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    @keyframes goldPulse {
        0% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
        100% { box-shadow: 0 0 30px rgba(255, 215, 0, 1.0), 0 0 10px #fff; }
    }