@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&family=Noto+Sans+JP:wght@400;700&display=swap');

:root {
    --primary: #4facfe;
    --primary-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --bg-dark: #0b0c15;
    --bg-panel: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #ffffff;
    --text-sub: #a0a0b0;
    --danger: #ff6b6b;
    --success: #4ecdc4;
    --warning: #f5af19;
    --shadow-glow: 0 0 15px rgba(79, 172, 254, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    /* システムメニューをグローバルで禁止 */
}

img {
    -webkit-user-drag: none;
    /* 画像のドラッグを禁止 */
    -webkit-touch-callout: none;
    /* 画像の長押しメニューを禁止 */
    user-select: none;
    -webkit-user-select: none;
}

body {
    font-family: 'Outfit', 'Noto Sans JP', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* ローディングオーバーレイ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-overlay.hidden {
    display: none;
}

.loading-content {
    text-align: center;
    color: var(--text-main);
}

.loading-content p {
    margin-top: 16px;
    font-size: 14px;
    color: var(--text-sub);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(79, 172, 254, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#game-container {
    max-width: 430px;
    margin: 0 auto;
    height: 100dvh;
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(11, 12, 21, 0.8);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.screen {
    display: none;
    padding: 24px;
    height: 100%;
    overflow: hidden;
    animation: fadeIn 0.4s ease-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Overlay to ensure text readability */
    z-index: 0;
}

.screen>* {
    position: relative;
    z-index: 1;
}

.screen.active {
    display: flex;
    flex-direction: column;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Modal Styles (Enhanced) */
#modal-title {
    margin-bottom: 16px;
    font-size: 20px;
    color: var(--primary);
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}

#modal-body {
    margin-bottom: 20px;
    line-height: 1.6;
    color: #eee;
    text-align: left;
    word-break: break-word;
}

/* Character Target Selection (Custom Modal) */
#target-select-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.target-char-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
}

.target-char-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.target-char-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 8px;
    border: 2px solid #555;
    object-fit: cover;
}

.target-char-info {
    width: 100%;
    text-align: center;
}

.target-char-name {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
}

/* Item Modal Center Close */
#item-modal .btn-primary {
    margin: 16px auto 0;
    display: block !important;
    /* Force block to center */
    width: auto;
    min-width: 120px;
}

/* Enhance Screen Buttons */
.btn-plus,
.btn-minus {
    width: 40px;
    height: 30px;
    border-radius: 6px;
    border: none;
    font-weight: 900;
    cursor: pointer;
    margin: 0 2px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: 0.2s;
}

.btn-plus {
    background: #00f2fe !important;
    background: linear-gradient(to bottom, #4facfe, #00f2fe) !important;
    box-shadow: 0 2px 4px rgba(79, 172, 254, 0.4);
}

.btn-plus:active {
    transform: translateY(1px);
    box-shadow: none;
}

.btn-minus {
    background: #ff6b6b !important;
    background: linear-gradient(to bottom, #ff6b6b, #ee5253) !important;
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.4);
}

.btn-minus:active {
    transform: translateY(1px);
    box-shadow: none;
}

.hidden {
    display: none !important;
}

/* Typography */
h1,
h2,
h3 {
    font-weight: 700;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Buttons */
.btn-primary {
    background: var(--primary-gradient);
    border: none;
    color: #fff;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 20px -5px rgba(79, 172, 254, 0.4);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Prevent text selection or cursor issues if needed */
}

/* Add spacing for H2 in Reward Screen */
#reward-screen h2 {
    margin-bottom: 8px;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: 0.3s;
}

.btn-primary:active {
    transform: scale(0.96);
}

.btn-primary:disabled {
    background: #333;
    box-shadow: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5253 100%);
    border: none;
    color: #fff;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 10px 20px -5px rgba(255, 107, 107, 0.4);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px -5px rgba(255, 107, 107, 0.6);
}

/* Title Screen */
#title-screen {
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url('img/bg/bg_title.png');
}

#title-screen h1 {
    font-size: clamp(32px, 11vw, 48px);
    white-space: nowrap;
    /* Slightly larger */
    margin-bottom: 24px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    /* Restore gradient var if needed, or keeping similar */
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(79, 172, 254, 0.6)) drop-shadow(0 0 30px rgba(79, 172, 254, 0.4));
    animation: title-gradient 3s ease infinite;
}

@keyframes title-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

#title-screen .btn-primary,
#title-screen .btn-danger {
    width: 240px;
    /* Fixed width for consistency */
    display: block;
    /* Stack vertically */
    margin: 0 auto;
    /* Center */
}

#continue-btn {
    margin-top: 16px;
}

#title-screen .subtitle {
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* 難易度選択 */
.difficulty-selector {
    margin: 0 auto 30px auto;
    width: 280px;
    text-align: left;
}

.difficulty-selector label {
    display: block;
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.difficulty-dropdown {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(79, 172, 254, 0.3);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
}

.difficulty-dropdown:hover {
    border-color: rgba(79, 172, 254, 0.6);
    background: rgba(255, 255, 255, 0.15);
}

.difficulty-dropdown:focus {
    outline: none;
    border-color: #4facfe;
    box-shadow: 0 0 10px rgba(79, 172, 254, 0.4);
}

.difficulty-dropdown option {
    background: #1a1a2e;
    color: #fff;
}

.difficulty-description {
    margin-top: 12px;
    padding: 12px;
    font-size: 13px;
    color: #ddd;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border-left: 3px solid #4facfe;
    line-height: 1.6;
}

/* Party Screen */
#party-screen {
    padding-bottom: 30px;
    height: 100%;
}

.party-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.party-header h2 {
    text-align: center;
    font-size: 24px;
    margin: 0;
}

.back-btn {
    position: absolute;
    left: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.6);
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.5);
}

.back-btn:active {
    transform: scale(0.95);
}

#party-screen h2 {
    text-align: center;
    margin-bottom: 24px;
    font-size: 24px;
}

.description-text {
    text-align: center;
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 12px;
}

/* Filter Dropdown */
.filter-container {
    margin-bottom: 16px;
    padding: 0 8px;
    display: flex;
    gap: 12px;
    align-items: center;
}

#party-filter,
#party-sort {
    flex: 1;
    padding: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
    outline: none;
}

#character-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    overflow-y: auto;
    padding: 4px;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-content: start;
}

#character-list::-webkit-scrollbar {
    display: none;
}

.character-card {
    background: #444;
    /* Solid gray */
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 8px 4px;
    text-align: center;
    transition: all 0.2s;
    position: relative;
    cursor: pointer;
}

.character-card.selecting {
    background: #556;
    /* Slightly lighter solid for selection state */
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(79, 172, 254, 0.4);
    transform: scale(1.05);
}

.character-card.selected {
    background: #4a5a6a;
    /* Distinct solid color for in-party */
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(79, 172, 254, 0.2);
}

.character-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    margin-bottom: 4px;
    background: #222;
}

.character-card.selected img {
    border-color: var(--primary);
}

.character-card .char-type-label {
    font-size: 8px;
    color: var(--primary);
    margin-bottom: 2px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.character-card .char-name {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: visible;
    white-space: nowrap;
}

.character-card .char-type {
    font-size: 10px;
    color: var(--text-sub);
}

/* Party Divider */
.party-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0 12px;
    position: relative;
    width: 100%;
}

.party-divider::before,
.party-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.party-divider span {
    padding: 0 12px;
    font-size: 10px;
    color: var(--text-sub);
    letter-spacing: 0.1em;
    font-weight: 700;
}

#party-slots {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-shrink: 0;
    justify-content: center;
}

.slot-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.party-slot {
    width: 80px;
    height: 105px;
    background: linear-gradient(145deg, #2b3a4a, #222e3b);
    border: 1px dashed #556c80;
    border-radius: 12px;
    padding: 8px 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    transition: all 0.2s;
    flex: 0 0 auto;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.party-slot.available {
    border-color: var(--primary);
    background: linear-gradient(145deg, #3a4b5d, #2f3e4d);
    box-shadow: 0 0 15px rgba(79, 172, 254, 0.25);
}

.party-slot.filled {
    border-style: solid;
    border-color: var(--primary);
    background: linear-gradient(145deg, #34495e, #2c3e50);
}

.slot-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.slot-role-label {
    font-size: 8px;
    color: var(--primary);
    margin-bottom: 2px;
    font-weight: 700;
}

.slot-char-name {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: visible;
    white-space: nowrap;
    margin-top: auto;
    /* Push to bottom if needed, or just let flow */
    margin-bottom: 4px;
}

/* Position label is now outside, update margin */
.position-label {
    font-size: 10px;
    color: var(--text-sub);
    margin-bottom: 6px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Note: Party screen shares generic bg or title bg if needed, or keeping transparent/dark */
#party-screen {
    background-image: url('img/bg/bg_title.png');
    /* Reuse title or generic */
}

/* Map Screen */
#map-screen {
    background-image: url('img/bg/bg_map.png');
}

#map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    margin-bottom: 16px;
    font-weight: 700;
}

#node-map {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* ノードマップ：分岐マップのコンテナ game.jsで生成 */
    align-items: center;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 40px 20px;
    scroll-behavior: smooth;
}

/* Branching Map Container within #node-map */
.layers-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* 分岐マップレイヤーコンテナ */
    width: 100%;
    z-index: 1;
    /* SVG郢ｧ蛹ｻ・願叉・ｽ */
}

/* 各レイヤーの行 */
.map-layer-row {
    display: flex;
    justify-content: center;
    /* 中央揃え */
    align-items: center;
    width: 100%;
    position: relative;
    height: 60px;
    /* 高さ固定 */
}

.map-node {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: var(--bg-panel);
    border: 2px solid var(--glass-border);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: absolute;
    /* absolute配置のノードの基準位置。game.jsの計算ロジックでは div 自体の配置座標を指定するが、ここでは flexbox で整列させるため position: relative としている */
    /* game.jsでの計算ロジックでは div 自体の配置座標を指定するが、ここでは flexbox で整列させるため position: relative としている */
    position: relative;
    margin: 0 15px;
    /* ノード間の左右マージン */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* ノードタイプ別スタイル */
.node-type-battle {
    background: radial-gradient(circle, #333, #111);
    border-color: #666;
}

.node-type-elite {
    background: radial-gradient(circle, #5a1a1a, #2a0a0a);
    border-color: #ff4444;
}

.node-type-rest {
    background: radial-gradient(circle, #5a4a1a, #2a1a0a);
    border-color: #ffaa44;
}

.node-type-event {
    background: radial-gradient(circle, #1a3a5a, #0a1a2a);
    border-color: #44aaff;
}

.node-type-treasure {
    background: radial-gradient(circle, #5a5a1a, #2a2a0a);
    border-color: #ffff44;
}

.node-type-shop {
    background: radial-gradient(circle, #4a4a2a, #2a2a0a);
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.node-type-boss {
    width: 80px !important;
    height: 80px !important;
    font-size: 40px !important;
    background: radial-gradient(circle, #4a0a4a, #2a0a2a);
    border-color: #ff44ff;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
}

/* 進行可能ノードスタイル */
.map-node.available {
    border-color: #ffd700;
    cursor: pointer;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    animation: pulseGold 1.5s infinite;
}

.map-node.available:hover {
    transform: scale(1.2);
}

.map-node.completed {
    filter: grayscale(100%);
    opacity: 0.6;
    border-style: dashed;
}

.map-node.locked {
    opacity: 0.4;
    filter: brightness(0.7);
}

@keyframes pulseGold {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

#party-status-bar {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    /* Vertical layout */
    gap: 8px;
    border-top: 1px solid var(--glass-border);
    position: relative;
}

.controls-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* Align items vertically */
    width: 100%;
}

#gold-display {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: auto;
    /* Push to left */
    font-weight: 700;
    color: var(--warning);
    font-size: 16px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(245, 175, 25, 0.3);
    white-space: nowrap;
}

#gold-display .gold-icon {
    font-size: 14px;
}

#gold-display .gold-amount {
    font-family: 'Outfit', sans-serif;
}

.members-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

/* コントロールボタン共通スタイル */
.control-btn {
    color: #fff;
    padding: 6px 8px;
    /* パディングを縮小 */
    border-radius: 8px;
    font-size: 11px;
    /* フォントサイズを少し縮小 */
    cursor: pointer;
    transition: 0.2s;
    min-width: 48px;
    /* 最小幅を縮小 */
    margin-left: 6px;
    /* マージンを縮小 */
    white-space: nowrap;
    /* 改行禁止 */
    flex-shrink: 0;
}

#home-btn {
    background: rgba(78, 205, 196, 0.2);
    border: 1px solid var(--success);
}

#home-btn:hover {
    background: rgba(78, 205, 196, 0.4);
}

#skill-btn {
    background: rgba(167, 139, 250, 0.2);
    border: 1px solid #a78bfa;
}

#skill-btn:hover {
    background: rgba(167, 139, 250, 0.4);
}

#item-btn {
    background: rgba(79, 172, 254, 0.2);
    border: 1px solid var(--primary);
}

#item-btn:hover {
    background: rgba(79, 172, 254, 0.4);
}


/* 所持金表示 */
#gold-display {
    display: flex;
    align-items: center;
    gap: 2px;
    background: linear-gradient(135deg, rgba(245, 175, 25, 0.15) 0%, rgba(241, 39, 17, 0.1) 100%);
    border: 1px solid rgba(245, 175, 25, 0.4);
    border-radius: 8px;
    padding: 6px 12px;
    margin-right: auto;
    font-weight: 700;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

#gold-display .gold-icon {
    color: var(--warning);
    font-size: 16px;
}

#gold-display .gold-amount {
    color: #fff;
    min-width: 40px;
}

.party-member-status {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: 0.2s;
}

.party-member-status:hover {
    background: rgba(255, 255, 255, 0.05);
}

.party-member-status img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--glass-border);
    background: #222;
}

.party-member-status .hp-mp-text {
    font-size: 10px;
    color: var(--text-sub);
}

.party-member-status .name {
    font-size: 11px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Battle Screen */
#battle-screen {
    padding: 12px 16px 0 16px;
    /* 上の空白を少し詰め、下のコマンドエリアに任せる */
    gap: 8px;
    /* 要素間の隙間を少し詰める */
    background-image: url('img/bg/bg_battle.png');
}

#battle-log {
    height: 56px;
    /* 3行分に固定 */
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 4px 8px;
    overflow-y: auto;
    font-size: 11px;
    /* 文字を少し小さくして3行分入りやすくする */
    margin-bottom: 4px;
    scrollbar-width: thin;
    flex-shrink: 0;
    /* ログが潰されないように保護 */
}

#enemy-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    min-height: 130px;
}

/* VS Divider */
.vs-divider {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 4px 0;
}

.vs-divider::before,
.vs-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.vs-divider span {
    padding: 0 16px;
    font-size: 16px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    letter-spacing: 0.2em;
}

#ally-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    min-height: 115px;
}

.battle-unit {
    position: relative;
    transition: transform 0.2s;
    width: 100px;
    /* Wider for name */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    /* Card-like styling */
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--glass-border);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Enemy/Ally Distinction */
.battle-unit[data-enemy-index] {
    background: linear-gradient(145deg, rgba(80, 20, 20, 0.7), rgba(40, 10, 10, 0.7));
    border-color: #ff6b6b;
}

.battle-unit[data-ally-index] {
    background: linear-gradient(145deg, rgba(20, 40, 80, 0.7), rgba(10, 20, 40, 0.7));
    border-color: #4facfe;
}

.battle-unit img {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

    /* Rich Frame for Image */
    border: 2px solid #aaa;
}

.unit-name {
    font-size: 10px;
    /* Smaller text */
    margin-top: 4px;
    white-space: nowrap;
    /* Prevent wrapping if possible, or allow it but with smaller font */
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px #000;
}

.battle-unit.selected img {
    border-color: var(--warning);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(245, 175, 25, 0.3);
}

.battle-unit.target img {
    border-color: var(--danger);
    animation: shake 0.4s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.battle-unit.dead {
    opacity: 0.5;
    filter: grayscale(1);
    transform: scale(0.9);
}

/* Battle Effects */
.battle-impact-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    pointer-events: none;
    z-index: 100;
    animation: impactPulse 0.3s ease-out;
}

.battle-impact-effect img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes impactPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}

/* Flash Effects */
.flash-white {
    animation: flashWhite 0.3s ease-out;
}

.flash-yellow {
    animation: flashYellow 0.3s ease-out;
}

.flash-blue {
    animation: flashBlue 0.3s ease-out;
}

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

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

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

.flash-gold {
    animation: flashGold 0.3s ease-out;
}

@keyframes flashWhite {

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

    50% {
        filter: brightness(3) drop-shadow(0 0 10px #fff);
    }
}

@keyframes flashYellow {

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

    50% {
        filter: brightness(2.5) drop-shadow(0 0 15px #ffd700);
    }
}

@keyframes flashBlue {

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

    50% {
        filter: brightness(2.5) drop-shadow(0 0 15px #4facfe);
    }
}

@keyframes flashRed {

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

    50% {
        filter: brightness(2.5) drop-shadow(0 0 15px #ff6b6b);
    }
}

@keyframes flashPurple {

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

    50% {
        filter: brightness(2.5) drop-shadow(0 0 15px #a29bfe);
    }
}

@keyframes flashGreen {

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

    50% {
        filter: brightness(2.5) drop-shadow(0 0 15px #4ecdc4);
    }
}

@keyframes flashGold {

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

    50% {
        filter: brightness(2.5) drop-shadow(0 0 20px #ffd700);
    }
}

/* Buff/Debuff Effect Icons */
.effect-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: 900;
    pointer-events: none;
    z-index: 100;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.effect-icon.buff-up {
    color: #ff6b6b;
    animation: buffUp 0.6s ease-out;
}

.effect-icon.debuff-down {
    color: #4facfe;
    animation: debuffDown 0.6s ease-out;
}

.effect-icon.heal {
    color: #4ecdc4;
    animation: healPulse 0.6s ease-out;
}

.effect-icon.revive {
    color: #ffd700;
    animation: reviveSpin 0.8s ease-out;
}

.effect-icon.shield {
    color: #c0c0c0;
    animation: shieldFade 0.5s ease-out;
}

.effect-icon.status {
    animation: statusBlink 0.6s ease-out;
}

@keyframes buffUp {
    0% {
        transform: translate(-50%, 20%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -80%);
        opacity: 0;
    }
}

@keyframes debuffDown {
    0% {
        transform: translate(-50%, -80%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 20%);
        opacity: 0;
    }
}

@keyframes healPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

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

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@keyframes reviveSpin {
    0% {
        transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5) rotate(360deg);
        opacity: 0;
    }
}

@keyframes shieldFade {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@keyframes statusBlink {

    0%,
    100% {
        opacity: 0;
    }

    25%,
    75% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Critical Effect */
.critical-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 64px;
    font-weight: 900;
    color: #ffd700;
    text-shadow:
        0 0 10px #000,
        0 0 20px #ffd700,
        0 0 30px #ffd700;
    pointer-events: none;
    z-index: 200;
    animation: criticalPop 0.6s ease-out;
}

@keyframes criticalPop {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

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

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* Screen Flash for Critical */
.screen-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 150;
    animation: screenFlash 0.4s ease-out;
}

.screen-flash.flash-critical {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
}

@keyframes screenFlash {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* Bars */
.unit-hp-bar,
.unit-mp-bar,
.hp-bar,
.mp-bar {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.unit-hp-bar {
    height: 14px;
    /* Increased from 6px */
    margin-top: 6px;
    position: relative;
}

.unit-mp-bar {
    height: 12px;
    /* Increased from 4px */
    margin-top: 3px;
    position: relative;
}

.bar-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    line-height: 1;
    z-index: 2;
}

.hp-bar {
    height: 6px;
    margin: 3px 0;
}

.mp-bar {
    height: 4px;
}

.fill {
    height: 100%;
    transition: width 1.0s cubic-bezier(0.22, 1, 0.36, 1);
    /* 1秒かけて滑らかに減少 */
}

/* 状態異常バッジの配色設定 */
.status-ailment.poison {
    background: #a333c8;
    color: #fff;
}

.status-ailment.paralysis,
.status-ailment.stun {
    background: #fbbd08;
    color: #000;
}

.status-ailment.silence {
    background: #1b1c1d;
    color: #fff;
}

.status-ailment.burn {
    background: #db2828;
    color: #fff;
}

.status-ailment.taunt {
    background: #f5af19;
    color: #000;
}

.status-ailment.defending {
    background: #2185d0;
    color: #fff;
}

.status-ailment.regen {
    background: #21ba45;
    color: #fff;
}

.status-ailment.damageReduction {
    background: #2c3e50;
    color: #fff;
}

/* 防御：洗練されたシールドエフェクト */
.shield-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border: 4px solid #4facfe;
    border-radius: 50%;
    background: rgba(79, 172, 254, 0.2);
    box-shadow: 0 0 20px #4facfe, inset 0 0 20px #4facfe;
    pointer-events: none;
    z-index: 100;
    animation: shield-expand-fade 0.8s ease-out forwards;
}

@keyframes shield-expand-fade {
    0% {
        transform: translate(-50%, -50%) scale(0.6);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

/* ダメージポップアップのバネ挙動 */
.damage-popup {
    position: absolute;
    font-weight: 900;
    font-size: 28px;
    color: #ff6b6b;
    text-shadow: 0 2px 4px #000;
    animation: spring-up 1.0s forwards;
    z-index: 200;
}

.damage-popup.critical {
    color: #ffd700;
    font-size: 36px;
    text-shadow: 0 0 10px #ff0000, 0 2px 4px #000;
}

@keyframes spring-up {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

    20% {
        transform: translateY(-30px) scale(1.2);
        opacity: 1;
    }

    40% {
        transform: translateY(-25px) scale(0.9);
    }

    60% {
        transform: translateY(-28px) scale(1.0);
    }

    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}

.unit-hp-bar .fill,
.hp-bar .fill {
    background: var(--secondary-gradient);
}

.unit-mp-bar .fill,
.mp-bar .fill {
    background: var(--primary-gradient);
}

/* バフ/デバフ表示（オーバーレイ）：回避判定失敗時などに使用 */
.buff-overlay {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    z-index: 10;
    pointer-events: none;
}

.buff-item,
.debuff-item {
    font-size: 8px;
    font-weight: 700;
    padding: 1px 3px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.buff-item {
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.5);
}

.debuff-item {
    color: #4facfe;
    border: 1px solid rgba(79, 172, 254, 0.5);
}

/* 状態異常アイコン表示エリア（旧実装互換） */
.status-ailments {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 4px;
    height: 20px;
}

.status-ailment {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(245, 175, 25, 0.9);
    color: #000;
}

/* Command Area */
#command-area {
    background: rgba(20, 20, 30, 0.9);
    border-top: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    border-radius: 20px 20px 0 0;
    padding: 8px 16px max(12px, env(safe-area-inset-bottom));
    /* 上下余白を確保しつつセーフエリアを確保 */
    margin: 0 -16px 0 -16px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    z-index: 10;
    flex-shrink: 0;
}

#character-commands {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    /* 間隔を等分に */
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    /* 縦パディングを確保 */
    border-radius: 12px;
}

.char-command-slot {
    font-size: 11px;
    flex: 1;
    text-align: center;
    padding: 6px;
    border-radius: 8px;
    opacity: 0.5;
    transition: 0.3s;
}

.char-command-slot.active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary);
    font-weight: 700;
}

#action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 8px;
}

.action-btn {
    background: linear-gradient(145deg, rgba(50, 60, 80, 0.9), rgba(30, 35, 45, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 12px;
    /* 縦を大幅に細く、横は余裕を持たせる */
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    /* 文字サイズを維持 */
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
}

.action-btn:hover {
    background: linear-gradient(145deg, rgba(70, 80, 100, 0.9), rgba(40, 45, 55, 0.9));
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(79, 172, 254, 0.3);
    transform: translateY(-2px);
}

.action-btn:active {
    transform: scale(0.96);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(100%);
    box-shadow: none;
    pointer-events: none;
}


/* Turn Execution Controls */
#execute-turn-btn {
    background: linear-gradient(135deg, #FF512F 0%, #DD2476 100%);
    color: #fff;
    font-weight: bold;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    visibility: hidden;
    /* 予約スペースを確保しつつ隠す */
}

.btn-prominent {
    animation: pulse-glow 1s infinite alternate;
    box-shadow: 0 0 15px rgba(255, 81, 47, 0.8) !important;
    border: 1px solid #fff !important;
    /* Fixed width to prevent layout jump */
    /* transform: scale(1.05); Removed to prevent visual overlap or perceived shift */
}

@keyframes pulse-glow {
    from {
        box-shadow: 0 0 10px rgba(255, 81, 47, 0.6);
    }

    to {
        box-shadow: 0 0 25px rgba(255, 81, 47, 1);
    }
}

.faded-out {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(100%);
    transition: 0.3s;
}

/* Event & Reward Screen Layout Fixes */
#reward-screen,
#rest-screen,
#event-screen,
#treasure-screen,
#gameover-screen,
#clear-screen {
    display: none;
    /* Default hidden */
}

#reward-screen.active,
#rest-screen.active,
#event-screen.active,
#treasure-screen.active,
#gameover-screen.active,
#clear-screen.active {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    /* Center content vertically */
}

/* Modals & Overlays */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.3s;
}

.modal-content {
    background: #161824;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 24px;
    width: 100%;
    max-width: 340px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: translateY(0);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#modal-actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 20px;
}

#modal-actions button {
    flex: 1;
    min-width: 0;
    padding: 12px 2px !important;
    font-size: 14px !important;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Toast */
#toast-container {
    position: fixed;
    top: 40px;
    /* safe area consideration */
    right: 0;
    left: auto;
    transform: none;
    z-index: 2000;
    width: auto;
    max-width: 400px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 0;
}

.toast {
    background: rgba(22, 24, 36, 0.90);
    backdrop-filter: blur(10px);
    border-left: 4px solid var(--success);
    /* Default to success/item color or use variable */
    color: #fff;
    padding: 12px 24px;
    margin-bottom: 10px;
    border-radius: 8px 0 0 8px;
    box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.5);
    font-size: 14px;
    font-weight: 700;
    animation: slideInRight 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    position: relative;
    margin-right: -4px;
    /* Hide right border radius part slightly or aligns perfectly */
}

/* Specific styling for item toast if needed, but generic is fine */
.toast.success {
    border-color: var(--success);
}

.toast.info {
    border-color: var(--primary);
}

.toast.hiding {
    animation: slideOutRight 0.3s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(110%);
        opacity: 0;
    }
}

/* Reward & Event Screens */
#reward-screen.active {
    background-image: url('img/bg/bg_battle.png');
    justify-content: flex-start !important;
    padding: 16px 12px 5px 12px !important;
}

/* Rich Header Style */
#reward-character-name {
    width: 100%;
    text-align: center;
    padding: 8px 0;
    margin-top: 5px !important;
    margin-bottom: 5px !important;

    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.85), transparent);
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);

    color: #ffd700;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    position: relative;
    /* Ensure it doesn't shift */
    flex-shrink: 0;
}

#reward-sp-info {
    text-align: center;
    margin-bottom: 8px;
    color: var(--warning);
    font-weight: 700;
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 16px;
    border-radius: 12px;
    align-self: center;
    /* Center in flex column */
}

/* Opaque container for party icons */
#reward-party-status {
    background: rgba(20, 20, 25, 0.95);
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 10px;
    min-height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    /* Spckのバグ対策：勝手に折り返さないよう制御 */
}

/* 報酬画面内のキャラカード専用の安定化設定 */
#reward-party-status .party-member-status {
    flex: 0 0 95px;
    height: auto;
    overflow: visible;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0;
    padding: 4px;
}

#reward-party-status .party-member-status img {
    width: 42px;
    height: 42px;
    margin-bottom: 4px;
}

#reward-options {
    flex: 1;
    overflow-y: auto;
    min-height: auto;
    /* 選択肢の最小高さを確保し、数が減っても上部が動かないようにする */
}

.reward-option,
.event-btn,
.treasure-btn,
.rest-btn {
    background: rgba(30, 30, 35, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s;
    text-align: left;
    margin-bottom: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.reward-option:hover,
.event-btn:hover,
.treasure-btn:hover,
.rest-btn:hover {
    border-color: var(--primary);
    background: rgba(40, 40, 50, 0.95);
    /* transform removed to prevent layout shift/clipping */
}

.reward-title {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.reward-desc,
.skill-desc {
    font-size: 12px;
    color: var(--text-sub);
}

/* Animations & Effects */
.damage-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    font-size: 32px;
    color: var(--danger);
    text-shadow: 0 2px 4px #000;
    animation: spring-pop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    z-index: 200;
    pointer-events: none;
    white-space: nowrap;
}

.damage-popup.heal {
    color: var(--success);
    text-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
}

.damage-popup.mp-heal {
    color: #d000ff;
    text-shadow: 0 0 10px rgba(208, 0, 255, 0.5);
}

@keyframes spring-pop {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    40% {
        transform: translate(-50%, -100%) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -150%) scale(1.0);
        opacity: 0;
    }
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-40px) scale(1.2);
        opacity: 0;
    }
}

/* Selection Panels (Target, Skill, Item) */
#target-selection,
#skill-selection,
#item-selection {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #11121d;
    padding: 20px;
    padding-bottom: 80px;
    z-index: 100;
    animation: fadeIn 0.2s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
}

/* Horizontal Target Selection Overrides */
#target-selection {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
}

/* 対象選択画面: キャラカードと戻るボタンの隙間を詰める */
#target-selection .btn-cancel {
    margin-top: 2px;
}

/* スキル選択画面: タイトルを上に寄せ、隙間を詰める */
#skill-selection {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
}

#skill-selection .skill-btn {
    margin-bottom: 4px;
}

#skill-selection .btn-cancel {
    margin-top: 2px;
}

.target-container {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    flex-shrink: 0;
}

.target-btn {
    width: 100px;
    /* Fixed width for cards */
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--glass-border);
    padding: 8px;
    margin-bottom: 0;
    /* Margin handled by gap */
    border-radius: 8px;
    color: #fff;
    text-align: center;
    /* Center text */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: 0.2s;
}

.target-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(79, 172, 254, 0.3);
}

.target-btn img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #aaa;
}

.target-btn span {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px #000;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skill-btn,
.item-btn {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 12px;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.target-btn:active,
.skill-btn:active,
.item-btn:active {
    background: rgba(79, 172, 254, 0.2);
}

.btn-cancel {
    background: transparent;
    border: 1px solid #555;
    color: #fff;
    padding: 12px;
    width: 100%;
    border-radius: 12px;
    margin-top: 10px;
}

/* スキル詳細・ボタンのレイアウト調整 */
.skill-btn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* 名称と説明の間の隙間を詰める */
    padding: 6px 12px;
    /* スキルボタンも縦を大幅に圧縮 */
}

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 2px;
}

.skill-name {
    font-weight: 700;
    font-size: 13px;
    /* わずかに小さくして一行の収まりを良くする */
    color: #fff;
}

.skill-cost {
    font-size: 12px;
    color: var(--primary);
    font-weight: 700;
    background: rgba(79, 172, 254, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.skill-body {
    width: 100%;
    text-align: left;
}

.skill-desc {
    font-size: 11px;
    color: var(--text-sub);
    white-space: normal;
    line-height: 1.4;
    display: block;
}

/* Character Detail Modal */
.character-detail {
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.close-btn:hover {
    color: var(--text-main);
}

.detail-content {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.detail-image {
    flex-shrink: 0;
}

.detail-image img {
    width: 120px;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--glass-border);
}

.detail-stats {
    flex: 1;
    font-size: 13px;
}

.detail-type {
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 12px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.stat-label {
    color: var(--text-sub);
}

.stat-value {
    font-weight: 700;
}

.stat-change {
    color: var(--success);
}

.stat-change.down {
    color: var(--danger);
}

.detail-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-border);
}

.detail-section h4 {
    font-size: 14px;
    color: var(--primary);
    margin-bottom: 8px;
}

.skill-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
}

.skill-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.skill-item-name {
    font-weight: 700;
    font-size: 13px;
}

.skill-item-cost {
    font-size: 11px;
    color: var(--primary);
}

.skill-item-desc {
    font-size: 11px;
    color: var(--text-sub);
    line-height: 1.4;
}

.status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.status-tag {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
}

.status-tag.buff {
    color: var(--success);
    border: 1px solid var(--success);
}

.status-tag.debuff {
    color: var(--danger);
    border: 1px solid var(--danger);
}

.status-tag.ailment {
    color: var(--warning);
    border: 1px solid var(--warning);
}

/* Item Modal */
.item-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.item-entry:hover {
    background: rgba(79, 172, 254, 0.1);
    border-color: var(--primary);
}

.item-entry.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.item-entry.disabled:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--glass-border);
}

.item-info {
    flex: 1;
}

.item-name {
    font-weight: 700;
    margin-bottom: 2px;
}

.item-desc {
    font-size: 11px;
    color: var(--text-sub);
}

.item-count {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

/* Event Screen Styles */
#event-screen {
    background-image: url('img/bg/bg_map.png');
    /* 背景画像 */
    background-size: cover;
    background-position: center;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    /* コンテンツが長い場合のスクロール */
}

#event-screen.active {
    display: flex;
}

/* Rest Screen Styles */
#rest-screen {
    background-image: url('img/bg/bg_map.png');
    background-size: cover;
    background-position: center;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#rest-screen.active {
    display: flex;
}

#rest-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    width: 100%;
}

.rest-btn {
    padding: 20px;
    background: linear-gradient(145deg, rgba(80, 40, 40, 0.9), rgba(45, 25, 25, 0.9));
    border: 1px solid rgba(255, 107, 107, 0.3);
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.rest-btn:hover {
    background: linear-gradient(145deg, rgba(100, 50, 50, 0.9), rgba(55, 30, 30, 0.9));
    border-color: var(--danger);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 107, 107, 0.2);
}

.event-content {
    background: rgba(11, 12, 18, 0.85);
    /* 読みやすいように半透明の背景 */
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(5px);
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

#event-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* ボタン間隔 */
    margin-top: 24px;
    width: 100%;
}

.event-btn {
    padding: 16px;
    text-align: left;
    line-height: 1.5;
    background: linear-gradient(145deg, rgba(50, 60, 80, 0.9), rgba(30, 35, 45, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.event-btn:hover {
    background: linear-gradient(145deg, rgba(70, 80, 100, 0.9), rgba(40, 45, 55, 0.9));
    border-color: var(--primary);
    transform: translateX(2px);
    box-shadow: 0 4px 8px rgba(79, 172, 254, 0.2);
}

/* Party Status Bar (Map & Rest) */
.party-status-bar,
#party-status-bar,
#rest-party-status {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    /* in case of many members on small screens */
}

/* Old wrapper - keep just in case but container flex handles layout */
.members-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.party-member-status {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    min-width: 85px;
    max-width: 110px;
    cursor: pointer;
}

.party-member-status img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 8px;
    border: 2px solid #fff;
}

.hp-mp-text {
    font-size: 10px;
    color: #eee;
    margin: 2px 0;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    font-weight: 700;
}

/* アクティブユニットの点滅表示 */
.battle-unit.active-unit {
    border-color: var(--warning) !important;
    animation: unit-blink 1.5s infinite alternate ease-in-out;
    box-shadow: 0 0 15px rgba(245, 175, 25, 0.5);
}

@keyframes unit-blink {
    from {
        border-color: var(--primary);
    }

    to {
        border-color: var(--warning);
    }
}

/* ボタンの表示制御 */
#execute-turn-btn.visible {
    visibility: visible !important;
}

.char-command-slot svg {
    display: block;
    margin: 0 auto;
}

/* === 汎用バトルエフェクト === */

.vfx-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    pointer-events: none;
    z-index: 150;
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode: plus-lighter;
    /* 合成モードで光を強調 */
}

.vfx-container-fullscreen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 行動中のユニットの強調アニメーション */
.battle-unit.acting {
    border-color: #ffd700 !important;
    box-shadow: 0 0 15px #ffd700, inset 0 0 10px #ffd700 !important;
    animation: acting-pulse 1s infinite alternate ease-in-out;
    z-index: 50;
}

@keyframes acting-pulse {
    from {
        filter: brightness(1) drop-shadow(0 0 5px #ffd700);
    }

    to {
        filter: brightness(1.3) drop-shadow(0 0 15px #ffd700);
    }
}

/* ダメージポップアップのプロ版アニメーション */
.damage-popup {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    font-size: 38px;
    color: #ff4757;
    text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 71, 87, 0.5);
    animation: pro-spring-pop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    z-index: 200;
    pointer-events: none;
}

@keyframes pro-spring-pop {
    0% {
        transform: translate(-50%, 0) scale(0.3);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -40px) scale(1.3);
        opacity: 1;
    }

    40% {
        transform: translate(-50%, -35px) scale(0.9);
    }

    60% {
        transform: translate(-50%, -38px) scale(1.0);
    }

    100% {
        transform: translate(-50%, -80px);
        opacity: 0;
    }
}

/* 鋭い斬撃エフェクト */
.vfx-slash-pro {
    position: absolute;
    width: 150%;
    height: 8px;
    background: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%);
    filter: blur(1px) drop-shadow(0 0 10px #ff6b6b);
    transform: rotate(var(--r)) scaleX(0);
    animation: slash-pro-anim 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slash-pro-anim {
    0% {
        transform: rotate(var(--r)) scaleX(0) skewX(45deg);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: rotate(var(--r)) scaleX(1.2) skewX(45deg);
        opacity: 0;
    }
}

/* 魔法陣SVGの出現アニメーション */
.vfx-magic-circle-pro {
    position: absolute;
    width: 140px;
    height: 140px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%234facfe' stroke-width='1' stroke-dasharray='5 2'/%3E%3Ccircle cx='50' cy='50' r='38' fill='none' stroke='%234facfe' stroke-width='2'/%3E%3Cpath d='M50 5 L55 45 L95 50 L55 55 L50 95 L45 55 L5 50 L45 45 Z' fill='%234facfe' opacity='0.3'/%3E%3C/svg%3E") center/contain no-repeat;
    animation: magic-circle-anim 0.7s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes magic-circle-anim {
    0% {
        transform: scale(0.2) rotate(-180deg);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: scale(1.3) rotate(0deg);
        opacity: 0;
    }
}

/* スキル「岩石落とし」のような岩の突き上げ */
.vfx-rock-pro {
    position: absolute;
    bottom: 20px;
    width: 40px;
    height: 100px;
    background: #8b5e3c;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    /* 三角形は下向き */
    filter: brightness(var(--b)) drop-shadow(0 0 5px #000);
    transform: translateX(var(--x)) scaleY(0);
    animation: rock-pro-anim 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--d);
}

@keyframes rock-pro-anim {
    0% {
        transform: translateX(var(--x)) scaleY(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateX(var(--x)) scaleY(1.4);
        opacity: 0;
    }
}

/* 画面反転エフェクト */
.void-invert {
    animation: void-flash 0.8s ease-in-out;
}

@keyframes void-flash {
    0% {
        filter: invert(0);
    }

    50% {
        filter: invert(1) hue-rotate(180deg);
    }

    100% {
        filter: invert(0);
    }
}

/* === キャラ固有技エフェクト === */

/* 治癒スキル「スターダスト」：星屑の輝き（強化版） */
.vfx-stardust {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160, 216, 239, 0.4) 0%, transparent 70%);
    box-shadow: 0 0 30px rgba(79, 172, 254, 0.3);
    /* アニメーション時間を1.2sに長くし、光がゆっくり広がるように調整 */
    animation: stardust-spin 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 散らばる星の粒子 */
.vfx-star-particle {
    position: absolute;
    font-size: 30px;
    color: #a0d8ef;
    text-shadow: 0 0 15px #4facfe, 0 0 30px #fff;
    opacity: 0;
    pointer-events: none;
    /* 光を放ちながら舞い上がるアニメーション */
    animation: star-particle-anim 1.3s ease-out forwards;
    animation-delay: var(--delay);
}

@keyframes star-particle-anim {
    0% {
        transform: rotate(var(--angle)) translateY(0) scale(0.3) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: rotate(var(--angle)) translateY(-30px) scale(1.1) rotate(45deg);
    }

    100% {
        transform: rotate(var(--angle)) translateY(-90px) scale(0.6) rotate(360deg);
        opacity: 0;
    }
}

@keyframes stardust-spin {
    0% {
        transform: scale(0.3) rotate(0deg);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: scale(2.5) rotate(180deg);
        opacity: 0;
    }
}

@keyframes stardust-orbit {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translateY(-40px) scale(1.5);
        opacity: 0;
    }
}

/* スキル「スカイバースト」：光の柱とスターバースト（強化版） */
.vfx-sky-burst {
    position: absolute;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #fff 0%, #4facfe 30%, transparent 70%);
    border-radius: 50%;
    mix-blend-mode: screen;
    /* 1.0sかけてゆっくりと広がる */
    animation: sky-burst-anim 1.0s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.vfx-sky-cross {
    position: absolute;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.vfx-sky-cross::before,
.vfx-sky-cross::after {
    content: '';
    position: absolute;
    background: #fff;
    box-shadow: 0 0 30px #00f2fe, 0 0 60px #fff;
    animation: sky-cross-anim 1.0s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.vfx-sky-cross::before {
    width: 100%;
    height: 2px;
}

/* 横線 */
.vfx-sky-cross::after {
    width: 2px;
    height: 100%;
}

/* 縦線 */

@keyframes sky-burst-anim {
    0% {
        transform: scale(0);
        opacity: 0;
        filter: brightness(5);
    }

    10% {
        transform: scale(0.8);
        opacity: 1;
    }

    /* 最初の一瞬 */
    25% {
        transform: scale(0.7);
        filter: brightness(3);
    }

    /* エフェクトの収縮・広がり */
    50% {
        transform: scale(3.5);
        opacity: 1;
        filter: brightness(2);
    }

    /* 最大拡大 */
    100% {
        transform: scale(4.5);
        opacity: 0;
        filter: brightness(1);
    }

    /* 消滅 */
}

@keyframes sky-cross-anim {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    15% {
        opacity: 1;
        transform: scale(1.8);
    }

    /* 瞬時に拡大 */
    45% {
        transform: scale(1.6);
        opacity: 0.8;
    }

    /* 中間での収縮 */
    100% {
        transform: scale(2.2);
        opacity: 0;
    }

    /* ゆっくりと消える */
}

/* 画面揺れエフェクト */
.screen-shake {
    animation: shake-anim 0.3s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake-anim {

    10%,
    90% {
        transform: translate3d(-2px, -1px, 0);
    }

    20%,
    80% {
        transform: translate3d(4px, 2px, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-6px, -3px, 0);
    }

    40%,
    60% {
        transform: translate3d(6px, 3px, 0);
    }
}

/* 超高速連撃用の細かい揺れ */
.screen-shake-rapid {
    animation: shake-rapid-anim 0.15s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake-rapid-anim {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(-3px, 2px, 0);
    }

    50% {
        transform: translate3d(3px, -2px, 0);
    }

    75% {
        transform: translate3d(-2px, -2px, 0);
    }
}

/* スタープラチナ（空条承太郎）：超高速ラッシュ */
.vfx-star-platinum-rush {
    position: absolute;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.vfx-punch-trail {
    position: absolute;
    width: 120px;
    height: 80px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 215, 0, 0.8) 20%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 215, 0, 0.8) 80%,
            transparent 100%);
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.8),
        0 0 40px rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: rotate(var(--angle, 0deg)) translateX(-50px);
    animation: punch-trail-anim 0.1s ease-out forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}

@keyframes punch-trail-anim {
    0% {
        opacity: 0;
        transform: rotate(var(--angle, 0deg)) translateX(-50px) scale(0.3);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(var(--angle, 0deg)) translateX(20px) scale(1.5);
    }
}

.vfx-star-platinum-impact {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 215, 0, 0.6) 30%,
            rgba(255, 165, 0, 0.3) 60%,
            transparent 100%);
    border-radius: 50%;
    animation: star-impact-anim 0.1s ease-out forwards;
    mix-blend-mode: screen;
}

@keyframes star-impact-anim {
    0% {
        transform: scale(0.2);
        opacity: 0;
        filter: brightness(5);
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
        filter: brightness(3);
    }

    100% {
        transform: scale(0.8);
        opacity: 0;
        filter: brightness(1);
    }
}

/* クレイジー・D（東方仗助）：クリスタル・リペア */
.vfx-crazy-diamond {
    position: absolute;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(255, 192, 203, 0.5) 0%, transparent 75%);
    z-index: 100;
}

/* 最終的にSVGによるDiamond形状を適用 */
.vfx-crazy-diamond::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300f2fe' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat;
    width: 130px;
    height: 130px;
    transform: translate(-50%, -50%) scale(0);
    filter: drop-shadow(0 0 15px #00f2fe) brightness(1.2);
    mix-blend-mode: screen;
    /* 破片が集まる中盤(0.4s)から表示開始、最後は弾けて消える */
    animation: crystal-heart-form 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards;
}

@keyframes heal-heart-pop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

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

    100% {
        transform: translate(-50%, -50%) scale(1.0);
        opacity: 0;
    }
}

/* 不足していたアニメーション定義を追加 */
@keyframes heal-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
        filter: brightness(1);
    }

    100% {
        transform: scale(1.1);
        opacity: 1;
        filter: brightness(1.3);
    }
}

/* 堕天龍鳳凰縛（津島善子）：強化版 */
.vfx-fallen-bind {
    position: absolute;
    width: 300px;
    height: 300px;
}

.vfx-dark-aura {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(139, 0, 139, 0.4) 0%, transparent 70%);
    animation: dark-pulse 0.4s ease-out forwards;
}

@keyframes dark-pulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

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

.vfx-chain {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 10px;
    background: linear-gradient(90deg, transparent, #9b59b6 20%, #d946ef 50%, #9b59b6 80%, transparent);
    filter: drop-shadow(0 0 15px #9b59b6) drop-shadow(0 0 25px #d946ef);
    transform-origin: center center;
    animation: chain-spiral 0.6s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes chain-spiral {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scale(0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    70% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scale(1.1);
        opacity: 1;
    }

    85% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scale(1);
        opacity: 0.7;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scale(0.7);
        opacity: 0;
    }
}

.vfx-purple-lightning {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.6) 0%, transparent 50%);
    filter: drop-shadow(0 0 20px #a855f7);
    animation: lightning-flash 0.3s 0.9s ease-out forwards;
    opacity: 0;
}

@keyframes lightning-flash {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* はどうだん（ルカリオ）：強化版 */
.vfx-aura-charge-actor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #fff 0%, #4facfe 40%, #00f2fe 70%, transparent 90%);
    border-radius: 50%;
    filter: drop-shadow(0 0 25px #4facfe) drop-shadow(0 0 40px #00f2fe);
    animation: aura-actor-charge 0.5s ease-out forwards;
}

@keyframes aura-actor-charge {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }

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

    100% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
}

.vfx-aura-charge-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 3px solid rgba(79, 172, 254, 0.7);
    border-radius: 50%;
    filter: drop-shadow(0 0 15px #4facfe);
    animation: aura-charge-ring-pulse 0.6s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes aura-charge-ring-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

.vfx-aura-sphere {
    position: absolute;
    width: 250px;
    height: 250px;
}

.vfx-aura-sphere-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #fff 0%, #4facfe 30%, #00f2fe 60%, transparent 100%);
    border-radius: 50%;
    filter: drop-shadow(0 0 30px #4facfe);
    animation: aura-charge 0.5s ease-out forwards, aura-pulse 0.3s 0.5s ease-in-out infinite;
}

@keyframes aura-charge {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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

@keyframes aura-pulse {

    0%,
    100% {
        filter: brightness(1) drop-shadow(0 0 30px #4facfe);
    }

    50% {
        filter: brightness(1.3) drop-shadow(0 0 40px #00f2fe);
    }
}

.vfx-aura-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border: 3px solid rgba(79, 172, 254, 0.6);
    border-radius: 50%;
    animation: aura-ring-rotate 0.8s linear infinite, aura-ring-expand 1.3s ease-out forwards;
    animation-delay: var(--delay);
    transform-origin: center;
}

@keyframes aura-ring-rotate {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle));
    }

    100% {
        transform: translate(-50%, -50%) rotate(calc(var(--angle) + 360deg));
    }
}

@keyframes aura-ring-expand {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

.vfx-aura-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 2px solid rgba(79, 172, 254, 0.4);
    border-radius: 50%;
    animation: aura-ripple-wave 0.6s 0.7s ease-out forwards;
}

@keyframes aura-ripple-wave {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.vfx-aura-impact {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(79, 172, 254, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    filter: drop-shadow(0 0 40px #4facfe);
    animation: aura-impact-burst 0.3s 1s ease-out forwards;
    opacity: 0;
}

@keyframes aura-impact-burst {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* スカーレットストーム（優木せつ菜）：多層爆発と閃光 */
.vfx-scarlet-storm {
    position: absolute;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 爆発の多層レイヤー */
.vfx-explosion-layer {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: explosion-burst 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.vfx-explosion-layer.inner {
    width: 100px;
    height: 100px;
    background: #fff;
    box-shadow: 0 0 40px #fff;
    z-index: 3;
    animation-delay: 0.1s;
}

.vfx-explosion-layer.mid {
    width: 200px;
    height: 200px;
    background: #ff8c00;
    box-shadow: 0 0 60px #ff4500;
    z-index: 2;
    animation-delay: 0.05s;
}

.vfx-explosion-layer.outer {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #ff4500, #800000, #000);
    filter: blur(10px);
    z-index: 1;
}

/* 放射状の閃光 */
.vfx-flare {
    position: absolute;
    width: 400px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    transform: rotate(var(--r));
    opacity: 0;
    animation: flare-flash 0.6s ease-out forwards;
    animation-delay: 0.1s;
}

@keyframes explosion-burst {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

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

@keyframes flare-flash {
    0% {
        transform: rotate(var(--r)) scaleX(0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: rotate(var(--r)) scaleX(1.5);
        opacity: 0;
    }
}

.vfx-flame:nth-child(1) {
    transform: translate(-50%, -100%) rotate(0deg);
}

.vfx-flame:nth-child(2) {
    transform: translate(-50%, -100%) rotate(72deg);
    animation-delay: 0.05s;
}

.vfx-flame:nth-child(3) {
    transform: translate(-50%, -100%) rotate(144deg);
    animation-delay: 0.1s;
}

.vfx-flame:nth-child(4) {
    transform: translate(-50%, -100%) rotate(216deg);
    animation-delay: 0.15s;
}

.vfx-flame:nth-child(5) {
    transform: translate(-50%, -100%) rotate(288deg);
    animation-delay: 0.2s;
}

@keyframes scarlet-spin {
    0% {
        transform: scale(0.3) rotate(0deg);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: scale(2.0) rotate(180deg);
        opacity: 0;
    }
}

@keyframes flame-dance {
    0% {
        transform: translate(-50%, -100%) scale(0.5);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -100%) scale(2.0) translateY(-40px);
        opacity: 0;
    }
}

/* フュージョンクラスト（セラス）：蘇生強化版 */
.vfx-fusion-crust {
    position: absolute;
    width: 300px;
    height: 300px;
}

.vfx-blood-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 3px solid #dc2626;
    border-radius: 50%;
    box-shadow: 0 0 20px #dc2626, inset 0 0 20px rgba(220, 38, 38, 0.3);
    animation: blood-circle-expand 0.5s ease-out forwards;
}

@keyframes blood-circle-expand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1) rotate(180deg);
    }
}

.vfx-blood-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #ef4444, #dc2626);
    border-radius: 50%;
    filter: drop-shadow(0 0 8px #dc2626);
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(100px);
    animation: blood-converge 0.5s ease-in forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes blood-converge {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(100px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0);
        opacity: 0;
    }
}

.vfx-revival-cross {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    animation: revival-cross-appear 0.4s 0.9s ease-out forwards;
    opacity: 0;
}

.vfx-revival-cross::before,
.vfx-revival-cross::after {
    content: '';
    position: absolute;
    background: linear-gradient(to right, transparent, #dc2626, #fff, #dc2626, transparent);
    filter: drop-shadow(0 0 15px #fff);
}

.vfx-revival-cross::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    transform: translateY(-50%);
}

.vfx-revival-cross::after {
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    transform: translateX(-50%);
}

@keyframes revival-cross-appear {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}

.vfx-revival-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.4) 0%, transparent 70%);
    filter: drop-shadow(0 0 30px #dc2626);
    animation: revival-glow-pulse 0.5s 1.2s ease-out forwards;
    opacity: 0;
}

@keyframes revival-glow-pulse {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 0.8;
    }

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

/* ドシャット（黒尾鉄朗）：防御強化版 */
.vfx-doshatto {
    position: absolute;
    width: 280px;
    height: 280px;
}

.vfx-metal-wall {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 220px;
    background: linear-gradient(135deg, #a8a29e 0%, #e7e5e4 40%, #f5f5f4 50%, #e7e5e4 60%, #a8a29e 100%);
    border: 6px solid #78716c;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(120, 113, 108, 0.9), inset 0 0 25px rgba(255, 255, 255, 0.5);
    animation: wall-rise 0.4s ease-out forwards;
    opacity: 0;
}

@keyframes wall-rise {
    0% {
        transform: translate(-50%, 20%) scaleY(0);
        opacity: 0;
    }

    60% {
        transform: translate(-50%, -50%) scaleY(1.15);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scaleY(1);
        opacity: 1;
    }
}

.vfx-hex-barrier {
    position: absolute;
    width: 50px;
    height: 58px;
    background: rgba(251, 191, 36, 0.5);
    border: 3px solid #f59e0b;
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
    filter: drop-shadow(0 0 12px #f59e0b) drop-shadow(0 0 20px #fbbf24);
    animation: hex-appear 0.4s ease-out forwards;
    animation-delay: calc(0.5s + var(--delay));
    opacity: 0;
}

/* 各六角形の配置を個別に設定 */
.vfx-hex-barrier:nth-child(2) {
    top: 50%;
    left: 50%;
}

.vfx-hex-barrier:nth-child(3) {
    top: 50%;
    left: calc(50% - 60px);
}

.vfx-hex-barrier:nth-child(4) {
    top: 50%;
    left: calc(50% + 60px);
}

.vfx-hex-barrier:nth-child(5) {
    top: calc(50% - 60px);
    left: 50%;
}

.vfx-hex-barrier:nth-child(6) {
    top: calc(50% + 60px);
    left: 50%;
}

.vfx-hex-barrier:nth-child(7) {
    top: calc(50% - 45px);
    left: calc(50% - 45px);
}

.vfx-hex-barrier:nth-child(8) {
    top: calc(50% - 45px);
    left: calc(50% + 45px);
}

@keyframes hex-appear {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 0;
    }

    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
    }

    100% {
        transform: translate(-50%, -50%) scale(1) rotate(180deg);
        opacity: 0.8;
    }
}

.vfx-counter-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.6) 0%, rgba(220, 38, 38, 0.4) 40%, transparent 70%);
    border-radius: 50%;
    filter: drop-shadow(0 0 35px #ef4444) drop-shadow(0 0 50px #dc2626);
    animation: counter-flame 0.5s 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes counter-flame {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }

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

    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.7;
    }
}

/* デロリエラン（若菜四季）：MP回復強化版 */
.vfx-delorieran {
    position: absolute;
    width: 320px;
    height: 320px;
}

.vfx-mp-particle {
    position: absolute;
    top: -60px;
    left: calc(50% + var(--x));
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #fff 0%, #c084fc 40%, #a855f7 70%, #7c3aed);
    border-radius: 50%;
    filter: drop-shadow(0 0 12px #a855f7) drop-shadow(0 0 20px #c084fc);
    animation: mp-particle-fall 0.8s ease-in forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes mp-particle-fall {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: translateY(20px) scale(1);
    }

    100% {
        transform: translateY(200px) scale(0.7);
        opacity: 0;
    }
}

.vfx-music-note {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 32px;
    font-weight: bold;
    color: #c084fc;
    text-shadow: 0 0 15px #a855f7, 0 0 25px #c084fc;
    filter: drop-shadow(0 0 12px #fff);
    animation: note-dance 0.6s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes note-dance {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(60px) scale(0);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(140px) translateY(-40px) rotate(360deg) scale(1.5);
        opacity: 0;
    }
}

.vfx-mp-pillar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 350px;
    background: linear-gradient(to right,
            transparent 0%,
            rgba(192, 132, 252, 0.3) 20%,
            rgba(168, 85, 247, 0.7) 40%,
            rgba(168, 85, 247, 0.9) 50%,
            rgba(168, 85, 247, 0.7) 60%,
            rgba(192, 132, 252, 0.3) 80%,
            transparent 100%);
    filter: drop-shadow(0 0 40px #a855f7) drop-shadow(0 0 60px #c084fc);
    animation: mp-pillar-rise 0.5s 0.7s ease-out forwards;
    opacity: 0;
}

@keyframes mp-pillar-rise {
    0% {
        transform: translate(-50%, 20%) scaleY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scaleY(1.1);
    }

    100% {
        transform: translate(-50%, -50%) scaleY(1);
        opacity: 0;
    }
}

/* 穿天氷壁（轟焦凍）：強化版 */
.vfx-ice-wall {
    position: absolute;
    width: 300px;
    height: 300px;
}

.vfx-ice-growth {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 60px;
    background: radial-gradient(ellipse at bottom, rgba(135, 206, 235, 0.4) 0%, transparent 70%);
    filter: drop-shadow(0 0 15px #87ceeb);
    animation: ice-ground-growth 0.4s ease-out forwards;
}

@keyframes ice-ground-growth {
    0% {
        transform: translateX(-50%) scaleX(0);
        opacity: 0;
    }

    100% {
        transform: translateX(-50%) scaleX(1);
        opacity: 0.8;
    }
}

.vfx-ice-pillar {
    position: absolute;
    bottom: 0;
    left: calc(14.28% * var(--index));
    width: 35px;
    height: calc(120px + var(--index) * 15px - abs(var(--index) - 3) * 20px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(186, 230, 253, 0.85) 40%, rgba(56, 189, 248, 0.7) 100%);
    clip-path: polygon(50% 0%, 75% 15%, 90% 30%, 100% 100%, 0% 100%, 10% 30%, 25% 15%);
    border-top: 2px solid rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 0 12px #38bdf8);
    animation: ice-wall-rise 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--delay);
    transform-origin: bottom;
}

@keyframes ice-wall-rise {
    0% {
        transform: scaleY(0) scaleX(0.8);
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: scaleY(1.1) scaleX(1);
    }
}

.vfx-ice-shard {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 20px;
    background: linear-gradient(135deg, #fff 0%, #38bdf8 100%);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    filter: drop-shadow(0 0 6px #38bdf8);
    transform: translate(-50%, -50%) rotate(var(--angle));
    animation: ice-shard-burst 0.4s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes ice-shard-burst {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-80px);
        opacity: 0;
    }
}

.vfx-ice-mist {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(186, 230, 253, 0.3) 0%, transparent 70%);
    filter: blur(8px) drop-shadow(0 0 20px #38bdf8);
    animation: ice-mist-spread 0.5s 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes ice-mist-spread {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

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

/* 雷切（はたけカカシ）：SVGによる連結雷撃（突き上げ・強化版） */
.vfx-raikiri-arc {
    position: absolute;
    bottom: -50px;
    left: 50%;
    width: 150px;
    /* 少し太い */
    height: 350px;
    /* 少し長い */
    transform: translateX(-50%);
    filter: drop-shadow(0 0 10px #00bfff) drop-shadow(0 0 20px #ffffff) drop-shadow(0 0 40px #00bfff);
    /* 発光強化 */
    z-index: 10;
}

.raikiri-shape {
    fill: #e0ffff;
    filter: drop-shadow(0 0 5px #00bfff);
    clip-path: inset(100% 0 0 0);
    /* 下から上へワイプ用初期値 */
    animation: raikiri-wipe 0.15s linear forwards;
    /* 超高速ワイプ */
}

.raikiri-shape.branch {
    fill: #87cefa;
    animation-delay: 0.05s;
}

@keyframes raikiri-wipe {
    0% {
        clip-path: inset(100% 0 0 0);
        opacity: 1;
    }

    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* フェードアウトアニメーションはJavaScriptでクラス付与、または別途定義 */
.vfx-raikiri-arc.fade-out .raikiri-shape {
    transition: opacity 0.3s;
    opacity: 0;
}

/* インパクト時の衝撃波 */
.vfx-raikiri-impact {
    position: absolute;
    top: 20px;
    /* 突き上げの到達点付近 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, #00bfff, transparent);
    box-shadow: 0 0 50px #fff, 0 0 100px #00bfff;
    opacity: 0;
    animation: raikiri-impact-burst 0.5s ease-out 0.4s forwards;
    /* 0.4s時点から発生 */
}

@keyframes raikiri-flash-arc {
    0% {
        stroke-dashoffset: 800;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        stroke-dashoffset: 0;
        opacity: 1;
        stroke-width: 10;
        /* 最も太い */
        filter: brightness(2.0);
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0;
        stroke-width: 4;
    }
}

@keyframes raikiri-impact-burst {
    0% {
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(4.0);
        opacity: 0;
    }
}



/* 抹消（相澤消太）：強化版 */
.vfx-erasure {
    position: absolute;
    width: 300px;
    height: 300px;
}

.vfx-erasure-eye {
    position: absolute;
    top: 30%;
    width: 50px;
    height: 25px;
    background: radial-gradient(ellipse, #ff0000 0%, #dc2626 40%, transparent 70%);
    border-radius: 50%;
    filter: drop-shadow(0 0 30px #ff0000);
    animation: erasure-eye-open 0.3s ease-out forwards;
}

.vfx-erasure-eye.left {
    left: 20%;
}

.vfx-erasure-eye.right {
    left: 60%;
}

@keyframes erasure-eye-open {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }

    50% {
        transform: scaleY(1.2);
        opacity: 1;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.vfx-erasure-beam {
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(239, 68, 68, 0.3) 30%,
            rgba(220, 38, 38, 0.5) 50%,
            rgba(239, 68, 68, 0.3) 70%,
            transparent 100%);
    filter: drop-shadow(0 0 20px #dc2626);
    animation: erasure-beam-fire 0.3s 0.3s ease-out forwards;
    opacity: 0;
}

@keyframes erasure-beam-fire {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
    }

    100% {
        opacity: 0.6;
        transform: scaleY(1);
    }
}

.vfx-erasure-band {
    position: absolute;
    top: calc(70% + var(--index) * 15px);
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg, transparent, #d4d4d4 20%, #a3a3a3 50%, #d4d4d4 80%, transparent);
    filter: drop-shadow(0 0 8px #a3a3a3);
    animation: erasure-wrap 0.3s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes erasure-wrap {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        opacity: 0.8;
    }
}

.vfx-grayscale-filter {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(115, 115, 115, 0.4) 0%, transparent 70%);
    filter: grayscale(1) contrast(0.8);
    animation: grayscale-spread 0.3s 0.9s ease-out forwards;
    opacity: 0;
}

@keyframes grayscale-spread {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

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

/* Solitude Rain（桜坂しずく）：強化版 */
.vfx-solitude-rain {
    position: absolute;
    width: 300px;
    height: 300px;
    overflow: visible;
}

.vfx-rain-cloud {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(75, 85, 99, 0.6), rgba(55, 65, 81, 0.3));
    border-radius: 50%;
    filter: blur(8px) drop-shadow(0 0 10px rgba(75, 85, 99, 0.4));
    animation: cloud-appear 0.4s ease-out forwards;
}

@keyframes cloud-appear {
    0% {
        transform: translateX(-50%) scaleX(0);
        opacity: 0;
    }

    100% {
        transform: translateX(-50%) scaleX(1);
        opacity: 0.8;
    }
}

.vfx-raindrop {
    position: absolute;
    top: 20px;
    left: calc(50% + var(--x));
    width: 3px;
    height: 50px;
    background: linear-gradient(to bottom, transparent, #a855f7 40%, #d946ef);
    filter: drop-shadow(0 0 6px #a855f7);
    animation: poison-rain-fall var(--duration) linear forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes poison-rain-fall {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translateY(200px);
        opacity: 0.6;
    }
}

.vfx-poison-puddle {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 30px;
    background: radial-gradient(ellipse, rgba(168, 85, 247, 0.5) 0%, rgba(217, 70, 239, 0.3) 50%, transparent 80%);
    border-radius: 50%;
    filter: blur(4px);
    animation: puddle-spread 0.5s 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes puddle-spread {
    0% {
        transform: translateX(-50%) scaleX(0);
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: translateX(-50%) scaleX(1);
        opacity: 0.6;
    }
}

.vfx-poison-mist {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;
    background: radial-gradient(ellipse at bottom, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
    filter: blur(10px);
    animation: mist-rise 0.5s 1.1s ease-out forwards;
    opacity: 0;
}

@keyframes mist-rise {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
}

@keyframes rain-fall-old {
    to {
        transform: translateY(300px);
        opacity: 0;
    }
}


/* === ボス固有技エフェクト === */

/* バイキンパンチ（ばいきんまん）：紫の殴打衝撃 */
.vfx-baikin-punch {
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(128, 0, 128, 0.7) 0%, transparent 60%);
    border-radius: 50%;
    animation: baikin-impact 0.5s ease-out forwards;
}

.vfx-baikin-punch::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    border: 8px solid rgba(128, 0, 128, 0.5);
    border-radius: 50%;
    animation: baikin-ring 0.5s ease-out forwards;
}

@keyframes baikin-impact {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

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

@keyframes baikin-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }

    30% {
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.0);
        opacity: 0;
    }
}

/* 毒液噴射（ギギネブラ）：緑の毒霧 */
.vfx-poison-spray {
    position: absolute;
    width: 300px;
    height: 210px;
}

.vfx-poison-cloud {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(50, 205, 50, 0.6), transparent);
    filter: blur(5px);
    animation: poison-expand 0.7s ease-out forwards;
}

.vfx-poison-cloud:nth-child(1) {
    width: 120px;
    height: 90px;
    top: 20%;
    left: 10%;
}

.vfx-poison-cloud:nth-child(2) {
    width: 150px;
    height: 100px;
    top: 30%;
    left: 40%;
    animation-delay: 0.1s;
}

.vfx-poison-cloud:nth-child(3) {
    width: 100px;
    height: 80px;
    top: 50%;
    left: 60%;
    animation-delay: 0.2s;
}

@keyframes poison-expand {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    30% {
        opacity: 0.8;
    }

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

/* 草薙の剣（大蛇丸）：緑の蛇エフェクト */
.vfx-kusanagi {
    position: absolute;
    width: 240px;
    height: 120px;
}

.vfx-snake {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 24px;
    background: linear-gradient(90deg, #228b22, #32cd32, #228b22);
    filter: drop-shadow(0 0 15px #32cd32);
    border-radius: 50%;
    animation: snake-slither 0.5s ease-out forwards;
}

.vfx-snake::before {
    content: '';
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 20px solid #32cd32;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

@keyframes snake-slither {
    0% {
        transform: translateX(-100%) scaleX(0.5);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translateX(50%) scaleX(1);
        opacity: 0;
    }
}

/* 呪霊操術（夏油傑）：黒い呪霊シルエット */
.vfx-cursed-spirit {
    position: absolute;
    width: 160px;
    height: 180px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.8) 30%, transparent 70%);
    filter: drop-shadow(0 0 25px #000);
    animation: spirit-manifest 0.6s ease-out forwards;
}

.vfx-cursed-spirit::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 30%;
    width: 25px;
    height: 25px;
    background: #ff0000;
    border-radius: 50%;
    filter: drop-shadow(0 0 15px #ff0000);
}

.vfx-cursed-spirit::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 30%;
    width: 25px;
    height: 25px;
    background: #ff0000;
    border-radius: 50%;
    filter: drop-shadow(0 0 15px #ff0000);
}

@keyframes spirit-manifest {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    70% {
        transform: scale(1.2);
    }

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

/* デスボール（フリーザ）：赤黒い球体 */
.vfx-death-ball {
    position: absolute;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, #ff0000 0%, #800000 40%, #000 70%);
    border-radius: 50%;
    filter: drop-shadow(0 0 40px #ff0000);
    animation: death-ball-anim 0.7s ease-out forwards;
}

.vfx-death-ball::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -50%);
    border: 5px solid rgba(255, 0, 0, 0.5);
    border-radius: 50%;
    animation: death-ring 0.7s ease-out forwards;
}

@keyframes death-ball-anim {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

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

@keyframes death-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    30% {
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(3.0);
        opacity: 0;
    }
}

/* ザ・ワールド（ディオ）：時を止める演出 */
.vfx-za-warudo {
    position: absolute;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    animation: time-stop 0.8s ease-out forwards;
}

.vfx-za-warudo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    border: 6px solid #ffd700;
    border-radius: 50%;
    filter: drop-shadow(0 0 20px #ffd700);
}

.vfx-za-warudo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 50px;
    background: #ffd700;
    transform-origin: bottom center;
    transform: translate(-50%, -100%);
    animation: clock-hand 0.8s ease-out forwards;
}

@keyframes time-stop {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    60% {
        transform: scale(1.2);
    }

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

@keyframes clock-hand {
    0% {
        transform: translate(-50%, -100%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -100%) rotate(360deg);
    }
}

/* 鏡花水月（藍染惣右介）：鏡のような反射 */
.vfx-kyoka-suigetsu {
    position: absolute;
    width: 200px;
    height: 260px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(200, 200, 255, 0.2), rgba(255, 255, 255, 0.3));
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    filter: drop-shadow(0 0 25px rgba(200, 200, 255, 0.5));
    animation: mirror-shimmer 0.7s ease-out forwards;
}

.vfx-kyoka-suigetsu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
    animation: mirror-shine 0.5s ease-out forwards;
}

@keyframes mirror-shimmer {
    0% {
        transform: scale(0.5) rotateY(90deg);
        opacity: 0;
    }

    30% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }

    100% {
        transform: scale(1.2) rotateY(-10deg);
        opacity: 0;
    }
}

@keyframes mirror-shine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* フォトンゲイザー（ネクロズマ）：光の柱 */
.vfx-photon-geyser {
    position: absolute;
    width: 140px;
    height: 400px;
    background: linear-gradient(to top, transparent, rgba(255, 255, 200, 0.9), #fff, rgba(255, 255, 200, 0.9), transparent);
    filter: blur(4px) drop-shadow(0 0 40px #ffd700);
    animation: photon-burst 0.6s ease-out forwards;
}

@keyframes photon-burst {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: scaleY(1);
        opacity: 0;
    }
}

/* グランドスラム（バスターハンド）：白い手形衝撃 */
.vfx-grand-slam {
    position: absolute;
    width: 220px;
    height: 260px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill='white' d='M50 10 L60 50 L90 60 L60 70 L50 110 L40 70 L10 60 L40 50 Z'/%3E%3C/svg%3E") center/contain no-repeat;
    filter: drop-shadow(0 0 30px #fff);
    animation: slam-impact 0.5s ease-out forwards;
}

@keyframes slam-impact {
    0% {
        transform: scale(0.3) translateY(-50px);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    50% {
        transform: scale(1.3) translateY(0);
    }

    100% {
        transform: scale(1.8) translateY(10px);
        opacity: 0;
    }
}

/* 崩壊（死柄木弔）：ひび割れ演出 */
.vfx-decay {
    position: absolute;
    width: 240px;
    height: 240px;
}

.vfx-crack {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 90px;
    background: linear-gradient(to bottom, #888, #444);
    transform-origin: top center;
    animation: crack-spread 0.4s ease-out forwards;
}

.vfx-crack:nth-child(1) {
    transform: translate(-50%, 0) rotate(0deg);
}

.vfx-crack:nth-child(2) {
    transform: translate(-50%, 0) rotate(45deg);
    animation-delay: 0.05s;
}

.vfx-crack:nth-child(3) {
    transform: translate(-50%, 0) rotate(90deg);
    animation-delay: 0.1s;
}

.vfx-crack:nth-child(4) {
    transform: translate(-50%, 0) rotate(135deg);
    animation-delay: 0.15s;
}

.vfx-crack:nth-child(5) {
    transform: translate(-50%, 0) rotate(180deg);
    animation-delay: 0.2s;
}

.vfx-crack:nth-child(6) {
    transform: translate(-50%, 0) rotate(225deg);
    animation-delay: 0.25s;
}

.vfx-crack:nth-child(7) {
    transform: translate(-50%, 0) rotate(270deg);
    animation-delay: 0.3s;
}

.vfx-crack:nth-child(8) {
    transform: translate(-50%, 0) rotate(315deg);
    animation-delay: 0.35s;
}

@keyframes crack-spread {
    0% {
        transform: translate(-50%, 0) scaleY(0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 0) scaleY(1);
        opacity: 0;
    }
}

/* クッパブレス（クッパ）：オレンジの炎 */
.vfx-koopa-breath {
    position: absolute;
    width: 180px;
    height: 100px;
}

.vfx-fire-stream {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(90deg, #ff6b00, #ffa500, #ffcc00, transparent);
    border-radius: 50% 100% 100% 50%;
    filter: blur(3px) drop-shadow(0 0 20px #ff6b00);
    animation: fire-breath 0.6s ease-out forwards;
}

.vfx-fire-stream::before,
.vfx-fire-stream::after {
    content: '';
    position: absolute;
    left: 0;
    width: 80%;
    height: 20px;
    background: linear-gradient(90deg, #ff6b00, #ffa500, transparent);
    border-radius: 50%;
    filter: blur(2px);
    animation: fire-wave 0.5s ease-out forwards;
}

.vfx-fire-stream::before {
    top: -15px;
}

.vfx-fire-stream::after {
    bottom: -15px;
    animation-delay: 0.1s;
}

@keyframes fire-breath {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: scaleX(1.2);
        opacity: 0;
    }
}

@keyframes fire-wave {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }

    30% {
        opacity: 0.8;
    }

    100% {
        transform: scaleX(1);
        opacity: 0;
    }
}

/* シールドオーラ（防御・バフ系共通） */
.shield-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* カードが縦長でも楕円にならないよう固定ピクセルを指定 */
    width: 145px;
    height: 145px;
    border: 4px solid #4facfe;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 172, 254, 0.2) 0%, transparent 70%);
    filter: drop-shadow(0 0 15px #4facfe);
    animation: shield-pulse 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 100;
}

@keyframes shield-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    70% {
        transform: translate(-50%, -50%) scale(1.1);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* フラッシュエフェクト（色違い追加） */
.flash-gold {
    animation: flash-gold-anim 0.3s ease-out;
}

@keyframes flash-gold-anim {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(2) drop-shadow(0 0 20px #ffd700);
    }

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

.flash-purple {
    animation: flash-purple-anim 0.3s ease-out;
}

@keyframes flash-purple-anim {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.5) drop-shadow(0 0 20px #9b59b6);
    }

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

/* 被弾時の2連フラッシュ（フリッカー）演出 */
.flash-flicker-white {
    animation: flash-flicker-white-anim 0.25s ease-out;
}

@keyframes flash-flicker-white-anim {

    0%,
    40%,
    100% {
        filter: brightness(1);
    }

    20%,
    70% {
        filter: brightness(3) drop-shadow(0 0 15px #fff);
    }
}

/* 強化画面レイアウト */
.enhance-layout {
    max-width: 500px;
    width: 95%;
    margin-top: 15px;
}

.enhance-char-tabs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}

.enhance-tab-btn {
    padding: 5px;
    border: 2px solid transparent;
    border-radius: 8px;
    opacity: 0.6;
    cursor: pointer;
    transition: 0.2s;
}

.enhance-tab-btn.active {
    border-color: var(--primary);
    opacity: 1;
    transform: scale(1.1);
}

.enhance-tab-btn img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    object-fit: cover;
}

/* Enhance Screen Styles */
.enhance-layout {
    width: 100%;
}

.enhance-char-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.enhance-tab-btn {
    cursor: pointer;
    transition: 0.2s;
    opacity: 0.6;
}

.enhance-tab-btn.active {
    opacity: 1;
    transform: scale(1.1);
}

.enhance-tab-btn img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #444;
    /* Default border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.enhance-tab-btn.active img {
    border-color: var(--primary);
    /* Gold/Primary border for active */
    box-shadow: 0 0 15px rgba(79, 172, 254, 0.5);
}

.enhance-stat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.enhance-stat-item {
    display: grid;
    grid-template-columns: 40px 45px minmax(0, 1fr) auto;
    /* Label | Base (Right) | Flexible Delta | Buttons */
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
    gap: 0px;
    width: 100%;
    box-sizing: border-box;
}

.stat-label {
    font-weight: bold;
    color: #ccc;
    text-align: left;
    padding-left: 2px;
}

.stat-val-base {
    text-align: right;
    font-weight: bold;
    padding-right: 2px;
    /* Gap before Delta */
}

.stat-val-delta {
    text-align: left;
    font-weight: bold;
    color: var(--success);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    padding-left: 2px;
}

/* .stat-values and .stat-delta removed/replaced by above */

.enhance-btns {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    /* Align buttons to right */
}

.enhance-btns button {
    display: flex;
    align-items: center;
    justify-content: center;
    /* width/height defined in btn-plus/minus styles */
}

/* アイテム入れ替え */
.item-swap-grid {
    display: grid;
    gap: 10px;
    margin-top: 15px;
}

.item-swap-card {
    background: rgba(255, 255, 255, 0.08);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    text-align: left;
}

.item-swap-card:hover {
    background: rgba(255, 64, 129, 0.15);
    border-color: var(--primary);
}

.item-swap-card strong {
    color: var(--primary);
    display: block;
    margin-bottom: 4px;
}

.item-swap-card.new-item {
    border-color: var(--warning);
    background: rgba(245, 175, 25, 0.05);
}

/* 強化画面ボタン配色（＋は赤、－は青） */
.btn-plus {
    width: 32px !important;
    color: #fff !important;
    background: linear-gradient(to bottom, #ff6b6b, #ee5253) !important;
    border: none !important;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.4);
}

.btn-minus {
    width: 32px !important;
    color: #fff !important;
    background: linear-gradient(to bottom, #2b5876, #4e4376) !important;
    /* Dark Blue */
    border: none !important;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(60, 80, 150, 0.4);
}

/* マップ画面・強化ボタンを他と統一 */
#enhance-btn {
    background: rgba(245, 175, 25, 0.2);
    border: 1px solid var(--warning);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
    margin-left: 8px;
}

#enhance-btn:hover {
    background: rgba(245, 175, 25, 0.4);
}

/* モーダル内のボタン配置を均等にするための調整 */
#modal-actions .btn-primary {
    box-shadow: none !important;
    border: 1px solid transparent !important;
}

#modal-actions button {
    margin: 0;
    /* 念のためのマージンリセット */
}

/* --- New Map Styles (Boss Preview & Grid Layout Support) --- */

.boss-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: linear-gradient(to bottom, rgba(50, 0, 0, 0.8), rgba(20, 0, 0, 0.6));
    border-bottom: 1px solid #ff4444;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(5px);
    margin-bottom: 10px;
}

.boss-label {
    font-size: 10px;
    color: #ff6b6b;
    letter-spacing: 0.3em;
    margin-bottom: 4px;
    font-weight: 700;
    text-transform: uppercase;
}

.boss-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.boss-mini-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ff4444;
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.6);
    background: #000;
}

.boss-info span {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
}

.boss-node-img {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

/* Map Node States */
.map-node.skipped {
    opacity: 0.15;
    filter: grayscale(100%);
    transform: scale(0.8);
    border-color: #444;
}

/* Unreachable nodes (grayed out but visible) */
.map-node.unreachable {
    opacity: 0.4;
    filter: grayscale(100%);
    pointer-events: none;
}

/* Reachable (Future) nodes - default state is bright, so no special class needed */
/* but we can ensure brightness */
.map-node:not(.unreachable):not(.completed):not(.skipped) {
    opacity: 1;
    filter: none;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.map-node.locked {
    /* Legacy keeping just in case, similar to unreachable */
    opacity: 0.4;
    filter: grayscale(100%);
    pointer-events: none;
}

/* Override existing margins if using grid */
/* Override existing margins if using grid */
.branching-map .map-layer-row {
    height: auto;
    /* Let it size by content + gap */
    min-height: 60px;
    margin-bottom: 30px;
    /* Vertical spacing between layers */

    /* Ensure the grid itself is centered if it doesn't take full width, though repeat(4, 1fr) usually does. */
    /* Add padding to simulate "centering" logic if lanes are skewed. */
}



/* Ensure container has scroll space for the boss header */
#node-map {
    padding-top: 0;
    /* Boss header is sticky or at top */
}

/* Shop Screen */
#shop-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    /* Scrollable content area */
    flex: 1;
    overflow-y: auto;
    padding-bottom: 80px;
    /* Space for fixed bottom button if needed */
}

#shop-screen {
    /*
       Normally screens are display: none via .screen class.
       We must not override it unless valid.
       So default is inherited from .screen (none).
       Only when active do we set flex.
    */
    flex-direction: column;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    /* Background Update */
    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url('img/bg/bg_shop.png') no-repeat center center;
    background-size: cover;
    background-color: #1a0b1a;
}

#shop-screen.active {
    display: flex;
}

#shop-screen .shop-title {
    font-family: 'Zen Antique', serif;
    font-size: 28px;
    color: #d4af37;
    /* Metallic Gold */
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    border-bottom: 2px solid #554;
    padding-bottom: 10px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

#leave-shop-btn {
    /* Ensure button is always visible or accessible */
    margin-top: auto;
    flex-shrink: 0;
    z-index: 10;
}

.shop-section {
    width: 100%;
}

.shop-section-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--highlight);
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.shop-item {
    background: rgba(10, 10, 20, 0.7);
    /* Increased transparency */
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px;
    /* Compact padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    min-height: 100px;
    /* Reduced height constraint */
}

.shop-item h4 {
    margin: 2px 0 4px 0;
    font-size: 13px;
    /* Smaller font */
    color: #fff;
    font-weight: bold;
}

.shop-item p {
    font-size: 11px;
    /* Smaller description */
    color: #ccc;
    margin: 0 0 4px 0;
    line-height: 1.2;
    flex-grow: 1;
}

.shop-price {
    font-size: 14px;
    color: var(--warning);
    font-weight: bold;
    margin-top: auto;
}

.shop-item:hover:not(.purchased) {
    transform: translateY(-2px);
    border-color: var(--highlight);
    background: rgba(50, 50, 60, 0.9);
}

.shop-item.purchased {
    opacity: 0.5;
    filter: grayscale(100%);
    cursor: default;
    pointer-events: none;
}

.shop-item.too-expensive {
    border-color: var(--danger);
    opacity: 0.8;
}

.shop-item h4 {
    margin: 5px 0;
    font-size: 14px;
    color: #fff;
}

.shop-item p {
    font-size: 11px;
    color: var(--text-sub);
    margin-bottom: 8px;
    line-height: 1.3;
}

.shop-price {
    margin-top: auto;
    font-weight: bold;
    color: var(--warning);
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 8px;
    border-radius: 4px;
}

/* --- クレイジー・D 破片アニメーション --- */
.vfx-diamond-shard {
    position: absolute;
    width: var(--size);
    height: calc(var(--size) * 1.5);
    background: linear-gradient(135deg, #fff, #00f2fe, #ff69b4);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    opacity: 0;
    top: 50%;
    left: 50%;
    filter: drop-shadow(0 0 5px #00f2fe);
    animation: shard-converge 0.6s ease-in forwards;
    animation-delay: var(--delay);
}

@keyframes shard-converge {
    0% {
        transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) rotate(180deg) scale(1);
    }

    /* 収束（修復）の動き */
    100% {
        transform: translate(0, 0) rotate(720deg) scale(0);
        opacity: 0;
    }
}

@keyframes crystal-heart-form {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        filter: brightness(5);
    }

    /* 0.4s + 0.4s = 0.8s (全体の中盤) で最大化 */
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
        filter: brightness(2);
    }

    /* 1.0s付近で一度落ち着く */
    80% {
        transform: translate(-50%, -50%) scale(1.0);
        opacity: 1;
        filter: brightness(1.2);
    }

    /* 1.2sで光となって霧散する */
    100% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
        filter: brightness(5);
    }
}

/* =========================================
   Game Over Modal (Rich Style)
   ========================================= */
.gameover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(50, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: overlayFadeIn 2s ease-out forwards;
}

@keyframes overlayFadeIn {
    from {
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
    }

    to {
        background: radial-gradient(circle, rgba(50, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.95) 100%);
        backdrop-filter: blur(5px);
    }
}

.gameover-content {
    text-align: center;
    position: relative;
    padding: 40px;
    border-top: 2px solid rgba(255, 50, 50, 0.3);
    border-bottom: 2px solid rgba(255, 50, 50, 0.3);
    background: linear-gradient(90deg, transparent 0%, rgba(20, 0, 0, 0.8) 50%, transparent 100%);
}

.gameover-title {
    font-family: serif;
    font-size: 48px;
    font-weight: 700;
    color: #e0e0e0;
    letter-spacing: 0.2em;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
    margin-bottom: 16px;
    animation: textGlitch 3s infinite alternate;
}

@keyframes textGlitch {
    0% {
        text-shadow: 2px 2px 10px rgba(255, 0, 0, 0.8);
        transform: skew(0deg);
    }

    20% {
        text-shadow: -2px -2px 10px rgba(255, 0, 0, 0.8);
        transform: skew(-2deg);
    }

    40% {
        text-shadow: 2px -2px 10px rgba(255, 0, 0, 0.8);
        transform: skew(2deg);
    }

    100% {
        text-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
        transform: skew(0deg);
    }
}

.gameover-divider {
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ff4444, transparent);
    margin: 0 auto 24px;
    opacity: 0.7;
}

.gameover-message {
    font-family: serif;
    font-size: 16px;
    color: #bbb;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
}

.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 12px 32px;
    font-size: 14px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

.btn-ghost::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: 0.5s;
}

.btn-ghost:hover {
    border-color: #ff4444;
    color: #ff4444;
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
    background: rgba(20, 0, 0, 0.6);
}

.btn-ghost:hover::before {
    left: 100%;
}

/* Shop Screen Styles (Revised) */
#shop-screen {
    background-image: url('img/bg/bg_shop.png');
    background-size: cover;
    background-position: center;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

#shop-screen.active {
    display: flex;
}

.shop-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.shop-header-row h2 {
    margin: 0;
    /* Remove default margin to align with gold */
}

#shop-gold-display {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

#shop-container {
    width: 100%;
    max-width: 800px;
}

/* Event Descriptions */
.event-desc {
    font-size: 0.85em;
    color: var(--text-sub);
    display: block;
    margin-top: 4px;
}

.success-rate {
    font-size: 0.85em;
    color: var(--success);
    display: block;
    margin-top: 2px;
}

/* =========================================
   Victory Modal (Rich Style)
   ========================================= */
.victory-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(30, 50, 0, 0.4) 0%, rgba(0, 0, 0, 0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: victoryOverlayFadeIn 2s ease-out forwards;
}

@keyframes victoryOverlayFadeIn {
    from {
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
    }

    to {
        background: radial-gradient(circle, rgba(30, 50, 0, 0.4) 0%, rgba(0, 0, 0, 0.95) 100%);
        backdrop-filter: blur(5px);
    }
}

.victory-content {
    text-align: center;
    position: relative;
    padding: 50px 60px;
    border-top: 2px solid rgba(255, 215, 0, 0.5);
    border-bottom: 2px solid rgba(255, 215, 0, 0.5);
    background: linear-gradient(90deg, transparent 0%, rgba(30, 20, 0, 0.8) 50%, transparent 100%);
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.3);
}

.victory-title {
    font-family: serif;
    font-size: 40px;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 0.15em;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.6),
        0 0 30px rgba(255, 215, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: 20px;
    animation: victoryGlow 2s ease-in-out infinite alternate;
}

@keyframes victoryGlow {
    0% {
        text-shadow:
            0 0 10px rgba(255, 215, 0, 0.8),
            0 0 20px rgba(255, 215, 0, 0.6),
            0 0 30px rgba(255, 215, 0, 0.4),
            2px 2px 4px rgba(0, 0, 0, 0.8);
        transform: scale(1);
    }

    50% {
        text-shadow:
            0 0 15px rgba(255, 215, 0, 1),
            0 0 30px rgba(255, 215, 0, 0.8),
            0 0 45px rgba(255, 215, 0, 0.6),
            2px 2px 4px rgba(0, 0, 0, 0.8);
        transform: scale(1.05);
    }

    100% {
        text-shadow:
            0 0 10px rgba(255, 215, 0, 0.8),
            0 0 20px rgba(255, 215, 0, 0.6),
            0 0 30px rgba(255, 215, 0, 0.4),
            2px 2px 4px rgba(0, 0, 0, 0.8);
        transform: scale(1);
    }
}

.victory-divider {
    width: 300px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, #00ff00, #ffd700, transparent);
    margin: 0 auto 30px;
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.victory-message {
    font-family: serif;
    font-size: 18px;
    color: #e8e8e8;
    margin-bottom: 50px;
    letter-spacing: 0.1em;
    line-height: 1.8;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.victory-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-victory {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.1));
    border: 2px solid rgba(255, 215, 0, 0.6);
    color: #ffd700;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
    position: relative;
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.3),
        inset 0 0 20px rgba(255, 215, 0, 0.1);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
}

.btn-victory:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.2));
    border-color: rgba(255, 215, 0, 0.9);
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.6),
        inset 0 0 30px rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
    color: #fff;
}

/* ========================================
   Cグループ: 味方固有技 新規エフェクト
   ======================================== */

/* 神避（シャンクス）：覇気の斬撃 */
.vfx-divine-departure {
    position: absolute;
    width: 350px;
    height: 350px;
}

.vfx-haki-aura {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(139, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 70%);
    filter: drop-shadow(0 0 30px rgba(139, 0, 0, 0.8));
    animation: haki-charge 0.4s ease-out forwards;
}

@keyframes haki-charge {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        opacity: 0.9;
    }

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

.vfx-haki-slash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 6px;
    background: linear-gradient(90deg, transparent, rgba(139, 0, 0, 0.8) 10%, rgba(220, 38, 38, 1) 50%, rgba(139, 0, 0, 0.8) 90%, transparent);
    filter: drop-shadow(0 0 15px #dc2626);
    transform-origin: center;
    animation: haki-slash-appear 0.3s 0.4s ease-out forwards;
    opacity: 0;
}

.vfx-haki-slash.slash1 {
    transform: translate(-50%, -50%) rotate(-30deg);
}

.vfx-haki-slash.slash2 {
    transform: translate(-50%, -50%) rotate(30deg);
    animation-delay: 0.45s;
}

@keyframes haki-slash-appear {
    0% {
        transform: translate(-50%, -50%) rotate(var(--base-rotation, 0deg)) scaleX(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--base-rotation, 0deg)) scaleX(1.2);
        opacity: 0.8;
    }
}

.vfx-haki-bolt {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 80px;
    background: linear-gradient(to bottom, transparent, #fbbf24, #fff, #fbbf24, transparent);
    filter: drop-shadow(0 0 10px #fbbf24);
    transform: translate(-50%, -50%) rotate(var(--angle));
    animation: haki-bolt-flash 0.2s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes haki-bolt-flash {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scaleY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scaleY(1);
        opacity: 0;
    }
}

.vfx-haki-shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 3px solid rgba(220, 38, 38, 0.6);
    border-radius: 50%;
    filter: drop-shadow(0 0 20px #dc2626);
    animation: haki-shockwave-expand 0.5s 0.7s ease-out forwards;
    opacity: 0;
}

@keyframes haki-shockwave-expand {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    30% {
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* キョダイマックス（カメックス）：巨大化 */
.vfx-gmax {
    position: absolute;
    width: 450px;
    height: 450px;
}

.vfx-gmax-crack {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 6px;
    background: linear-gradient(90deg, transparent, #b91c1c 20%, #dc2626 40%, #ef4444 50%, #dc2626 60%, #b91c1c 80%, transparent);
    filter: drop-shadow(0 0 15px #dc2626) drop-shadow(0 0 25px #ef4444);
    animation: gmax-crack-split 0.5s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes gmax-crack-split {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(0);
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scaleX(1.2);
        opacity: 0.9;
    }
}

.vfx-gmax-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(127, 29, 29, 0.8) 0%, rgba(0, 0, 0, 0.5) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(15px) drop-shadow(0 0 30px rgba(127, 29, 29, 0.8));
    animation: gmax-shadow-grow 0.6s 0.6s ease-out forwards;
    opacity: 0;
}

@keyframes gmax-shadow-grow {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0.7;
    }
}

.vfx-gmax-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    border: 6px solid rgba(239, 68, 68, 0.8);
    border-radius: 50%;
    filter: drop-shadow(0 0 35px #ef4444) drop-shadow(0 0 50px #dc2626);
    animation: gmax-wave-expand 0.7s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes gmax-wave-expand {
    0% {
        transform: translate(-50%, -50%) scale(calc(0.3 * var(--scale)));
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(calc(2.5 * var(--scale)));
        opacity: 0;
    }
}

.vfx-gmax-lightning {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 130px;
    background: linear-gradient(to bottom, #fde047 0%, #fbbf24 20%, #fff 50%, #fbbf24 80%, #fde047 100%);
    filter: drop-shadow(0 0 18px #fbbf24) drop-shadow(0 0 30px #fde047);
    animation: gmax-lightning-strike 0.25s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes gmax-lightning-strike {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scaleY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scaleY(1);
        opacity: 0;
    }
}

/* こいかぜ（高垣楓）：優しい風の回復 */
.vfx-koikaze {
    position: absolute;
    width: 300px;
    height: 300px;
}

.vfx-wind-wave {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: var(--height);
    background: linear-gradient(90deg, transparent, rgba(134, 239, 172, 0.4), transparent);
    filter: blur(2px) drop-shadow(0 0 10px #86efac);
    transform: translateY(-50%);
    animation: wind-flow 0.6s ease-in-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes wind-flow {
    0% {
        transform: translateY(-50%) translateX(-100%);
        opacity: 0;
    }

    50% {
        opacity: 0.7;
    }

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

.vfx-sakura-petal {
    position: absolute;
    top: 30%;
    left: calc(50% + var(--x));
    width: 12px;
    height: 12px;
    background: radial-gradient(ellipse, #fff 0%, #fecdd3 60%, #fda4af);
    border-radius: 50% 0 50% 0;
    filter: drop-shadow(0 0 6px #fecdd3);
    transform: rotate(var(--rotation));
    animation: petal-float 0.7s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes petal-float {
    0% {
        transform: translateY(-20px) rotate(var(--rotation));
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translateY(100px) rotate(calc(var(--rotation) + 180deg));
        opacity: 0;
    }
}

.vfx-heal-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(134, 239, 172, 0.4) 0%, transparent 70%);
    filter: drop-shadow(0 0 30px #86efac);
    animation: heal-pulse 0.4s 0.7s ease-out forwards;
    opacity: 0;
}

@keyframes heal-pulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

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

/* 吸い込み（カービィ）：状態異常浄化 */
.vfx-inhale {
    position: absolute;
    width: 300px;
    height: 300px;
}

.vfx-inhale-spiral {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--size);
    height: var(--size);
    border: 3px solid rgba(236, 72, 153, 0.6);
    border-radius: 50%;
    border-style: dashed;
    filter: drop-shadow(0 0 15px #ec4899);
    animation: inhale-spin 0.6s linear infinite, inhale-shrink 0.5s ease-in forwards;
    animation-delay: var(--delay);
}

@keyframes inhale-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes inhale-shrink {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }
}

.vfx-status-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--color);
    border-radius: 50%;
    filter: drop-shadow(0 0 8px var(--color));
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(100px);
    animation: status-suck 0.5s ease-in forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes status-suck {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(100px);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(0);
        opacity: 0;
    }
}

.vfx-purify-light {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
    border-radius: 50%;
    filter: drop-shadow(0 0 30px #fff);
    animation: purify-flash 0.3s 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes purify-flash {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

.vfx-sparkle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    filter: drop-shadow(0 0 8px #fbbf24);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(80px);
    animation: sparkle-burst 0.4s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes sparkle-burst {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(50px) scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(120px) scale(1.2);
        opacity: 0;
    }
}

/* シャイニートルネード（マリ）：金色の竜巻 */
.vfx-shiny-tornado {
    position: absolute;
    width: 320px;
    height: 320px;
}

.vfx-tornado-particle {
    position: absolute;
    bottom: calc(50% + var(--y));
    left: 50%;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #fff 0%, #fbbf24 40%, #f59e0b 80%);
    border-radius: 50%;
    filter: drop-shadow(0 0 10px #fbbf24) drop-shadow(0 0 18px #fde047);
    animation: tornado-spiral 0.8s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes tornado-spiral {
    0% {
        transform: translate(-50%, 0) rotate(var(--angle)) translateX(20px);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 0) rotate(calc(var(--angle) + 720deg)) translateX(80px);
        opacity: 0;
    }
}

.vfx-tornado-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.7) 0%, rgba(245, 158, 11, 0.5) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(6px) drop-shadow(0 0 35px #fbbf24) drop-shadow(0 0 50px #fde047);
    animation: tornado-core-pulse 0.4s ease-out forwards;
}

@keyframes tornado-core-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

.vfx-tornado-burst {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #fbbf24, #f59e0b);
    border-radius: 50%;
    filter: drop-shadow(0 0 10px #fbbf24);
    transform: translate(-50%, -50%) rotate(var(--angle));
    animation: tornado-burst-fly 0.4s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes tornado-burst-fly {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(120px);
        opacity: 0;
    }
}

/* 滅びの爆裂疾風弾（青眼の白龍）：青白ビーム */
.vfx-burst-stream {
    position: absolute;
    width: 380px;
    height: 380px;
}

.vfx-burst-charge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #fff 0%, #93c5fd 30%, #3b82f6 50%, #1e3a8a 75%, transparent 90%);
    border-radius: 50%;
    box-shadow: 0 0 40px #3b82f6, 0 0 60px #93c5fd, inset 0 0 30px rgba(255, 255, 255, 0.8);
    animation: burst-charge-grow 0.5s ease-out forwards;
}

@keyframes burst-charge-grow {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }

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

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

.vfx-burst-beam-line {
    position: fixed;
    top: 0;
    left: 50%;
    width: 120px;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(59, 130, 246, 0.7) 0%,
            rgba(147, 197, 253, 1) 20%,
            rgba(255, 255, 255, 1) 50%,
            rgba(147, 197, 253, 1) 80%,
            rgba(59, 130, 246, 0.7) 100%);
    filter: drop-shadow(0 0 40px #3b82f6) drop-shadow(0 0 60px #93c5fd) drop-shadow(0 0 80px #fff);
    box-shadow: 0 0 50px #3b82f6, 0 0 80px #93c5fd, inset 0 0 30px rgba(255, 255, 255, 0.9);
    animation: burst-beam-shoot 0.4s 0.5s ease-out forwards;
    opacity: 0;
    z-index: 180;
    transform: translateX(-50%);
}

@keyframes burst-beam-shoot {
    0% {
        transform: translateX(-50%) scaleY(0);
        opacity: 0;
    }

    30% {
        opacity: 1;
        transform: translateX(-50%) scaleY(1);
    }

    70% {
        opacity: 1;
        transform: translateX(-50%) scaleY(1);
    }

    100% {
        transform: translateX(-50%) scaleY(0.8);
        opacity: 0;
    }
}

.vfx-burst-explosion {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 1) 0%,
            rgba(147, 197, 253, 0.95) 20%,
            rgba(59, 130, 246, 0.85) 40%,
            rgba(30, 58, 138, 0.6) 70%,
            transparent 90%);
    border-radius: 50%;
    filter: drop-shadow(0 0 40px #3b82f6) drop-shadow(0 0 60px #93c5fd);
    animation: burst-explosion-grow 0.5s 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes burst-explosion-grow {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }

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

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

.vfx-beam-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #fff, #3b82f6);
    border-radius: 50%;
    filter: drop-shadow(0 0 8px #3b82f6);
    transform: translate(-50%, -50%) rotate(var(--angle));
    animation: beam-particle-orbit 0.6s linear infinite, beam-particle-appear 0.3s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes beam-particle-orbit {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(40px);
    }

    100% {
        transform: translate(-50%, -50%) rotate(calc(var(--angle) + 360deg)) translateX(40px);
    }
}

@keyframes beam-particle-appear {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.vfx-burst-cross {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    animation: burst-cross-explode 0.5s 0.8s ease-out forwards;
    opacity: 0;
}

.vfx-burst-cross::before,
.vfx-burst-cross::after {
    content: '';
    position: absolute;
    background: linear-gradient(to right, transparent, #fff, #3b82f6, #fff, transparent);
    filter: drop-shadow(0 0 20px #fff);
}

.vfx-burst-cross::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 6px;
    transform: translateY(-50%);
}

.vfx-burst-cross::after {
    top: 0;
    left: 50%;
    width: 6px;
    height: 100%;
    transform: translateX(-50%);
}

@keyframes burst-cross-explode {
    0% {
        transform: translateX(-50%) scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) scale(1.5);
        opacity: 0;
    }
}

/* 鳳梨磔（マルコ）：不死鳥の青い炎 */
.vfx-pineapple-stake {
    position: absolute;
    width: 300px;
    height: 300px;
}

.vfx-phoenix-feather {
    position: absolute;
    top: 10%;
    left: calc(50% + var(--x));
    width: 25px;
    height: 60px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(147, 197, 253, 0.6) 50%, rgba(59, 130, 246, 0.4) 100%);
    clip-path: polygon(50% 0%, 70% 30%, 100% 100%, 50% 80%, 0% 100%, 30% 30%);
    filter: drop-shadow(0 0 12px #3b82f6);
    animation: feather-fall 0.6s ease-in forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes feather-fall {
    0% {
        transform: translateY(-30px) rotate(0deg);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translateY(150px) rotate(180deg);
        opacity: 0.6;
    }
}

.vfx-blue-flame-particle {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #93c5fd, #3b82f6);
    border-radius: 50%;
    filter: drop-shadow(0 0 10px #3b82f6);
    transform: translate(-50%, -50%) rotate(var(--angle));
    animation: blue-flame-spread 0.4s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes blue-flame-spread {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(80px);
        opacity: 0;
    }
}

.vfx-phoenix-heal {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(147, 197, 253, 0.4) 0%, transparent 70%);
    filter: drop-shadow(0 0 30px #3b82f6);
    animation: phoenix-heal-glow 0.5s 0.7s ease-out forwards;
    opacity: 0;
}

@keyframes phoenix-heal-glow {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

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

/* ビッグライト（ドラえもん）：光の拡散 */
.vfx-big-light {
    position: absolute;
    width: 350px;
    height: 350px;
}

.vfx-light-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(147, 197, 253, 0.9) 30%, rgba(59, 130, 246, 0.7) 60%, transparent 80%);
    border-radius: 50%;
    box-shadow: 0 0 40px #3b82f6, 0 0 60px #93c5fd, inset 0 0 30px rgba(255, 255, 255, 0.8);
    animation: light-ring-pulse 0.5s ease-out forwards;
}

@keyframes light-ring-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }

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

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

.vfx-light-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #fff 0%, #93c5fd 50%, #3b82f6 80%);
    border-radius: 50%;
    filter: drop-shadow(0 0 12px #3b82f6) drop-shadow(0 0 20px #93c5fd);
    animation: light-particle-fly 0.7s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes light-particle-fly {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(30px);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(170px) scale(1.5);
        opacity: 0;
    }
}

.vfx-light-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    border: 5px solid rgba(59, 130, 246, 0.7);
    border-radius: 50%;
    filter: drop-shadow(0 0 25px #3b82f6) drop-shadow(0 0 40px #93c5fd);
    animation: light-ripple-expand 0.7s 0.4s ease-out forwards;
    opacity: 0;
}

@keyframes light-ripple-expand {
    0% {
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.vfx-power-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, transparent 70%);
    filter: drop-shadow(0 0 30px #fbbf24);
    animation: power-aura-rise 0.3s 0.7s ease-out forwards;
    opacity: 0;
}

@keyframes power-aura-rise {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: scale(1.3);
        opacity: 0.6;
    }
}

/* ジュドラジルム（フリーレン）：破滅の雷 */
.vfx-judrajim {
    position: absolute;
    width: 400px;
    height: 400px;
}

.vfx-thunder-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    border: 6px solid rgba(168, 85, 247, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 35px rgba(168, 85, 247, 1),
        0 0 50px rgba(217, 70, 239, 0.8),
        inset 0 0 35px rgba(168, 85, 247, 0.5);
    animation: thunder-circle-spin 0.6s linear infinite, thunder-circle-appear 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes thunder-circle-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes thunder-circle-appear {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }

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

.vfx-thunder-bolt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 200px;
    animation: thunder-bolt-strike 0.4s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

.thunder-shape {
    fill: url(#thunderGradient);
    filter: drop-shadow(0 0 20px #a855f7) drop-shadow(0 0 40px #d946ef) drop-shadow(0 0 60px #c084fc);
}

.vfx-thunder-bolt svg {
    width: 100%;
    height: 100%;
}

@keyframes thunder-bolt-strike {
    0% {
        transform: translate(-50%, -150%) translateX(var(--x)) scale(0.8);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -80%) translateX(var(--x)) scale(1);
        opacity: 1;
    }

    40% {
        transform: translate(-50%, -50%) translateX(var(--x)) scale(1.2);
        opacity: 1;
    }

    70% {
        transform: translate(-50%, -50%) translateX(var(--x)) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) translateX(var(--x)) scale(1.1);
        opacity: 0;
    }
}

.vfx-electric-spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 100px;
    background: linear-gradient(to bottom,
            transparent 0%,
            #c084fc 10%,
            #a855f7 30%,
            #fff 50%,
            #a855f7 70%,
            #c084fc 90%,
            transparent 100%);
    filter: drop-shadow(0 0 15px #a855f7) drop-shadow(0 0 25px #d946ef);
    animation: electric-spark-flash 0.3s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes electric-spark-flash {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scaleY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scaleY(1.2);
        opacity: 0;
    }
}

/* はどうだん等の飛翔体アニメーション */
.vfx-projectile-up {
    animation: projectile-up 0.5s ease-out forwards !important;
}

.vfx-projectile-down {
    animation: projectile-down 0.5s ease-out forwards !important;
}

@keyframes projectile-up {
    0% {
        transform: translate(-50%, 200%) scale(0.5);
        opacity: 0;
    }

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

@keyframes projectile-down {
    0% {
        transform: translate(-50%, -300%) scale(0.5);
        opacity: 0;
    }

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


/* Aura Sphere VFX */
.vfx-aura-sphere {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    pointer-events: none;
}

.vfx-projectile-dynamic {
    animation: projectile-dynamic 0.5s ease-out forwards !important;
}

@keyframes projectile-dynamic {
    0% {
        transform: translate(calc(-50% + var(--start-x)), calc(-50% + var(--start-y))) scale(0.5);
        opacity: 0;
    }

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


/* Blue-Eyes Burst Stream VFX */
.vfx-burst-charge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #fff, #60a5fa, #2563eb);
    border-radius: 50%;
    filter: drop-shadow(0 0 15px #3b82f6);
    animation: burst-charge 1s ease-in forwards;
    opacity: 0;
}

@keyframes burst-charge {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

.vfx-burst-beam-line {
    position: absolute;
    top: var(--y1);
    left: var(--x1);
    width: var(--length);
    height: 60px;
    transform-origin: left center;
    transform: translateY(-50%) rotate(var(--angle)) scaleX(0);
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(96, 165, 250, 1) 5%,
            rgba(37, 99, 235, 1) 50%,
            rgba(147, 197, 253, 1) 95%,
            rgba(255, 255, 255, 0) 100%);
    border-radius: 30px;
    filter: drop-shadow(0 0 15px #3b82f6);
    z-index: 1000;
    pointer-events: none;
    animation: burst-beam-shoot 0.4s ease-out forwards 1s;
    opacity: 0;
}

@keyframes burst-beam-shoot {
    0% {
        transform: translateY(-50%) rotate(var(--angle)) scaleX(0);
        opacity: 1;
    }

    50% {
        transform: translateY(-50%) rotate(var(--angle)) scaleX(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-50%) rotate(var(--angle)) scaleX(1);
        opacity: 0;
    }
}

.vfx-burst-stream {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    pointer-events: none;
}

.vfx-burst-stream-global {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1001;
}

.vfx-burst-explosion {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #fff, #93c5fd, transparent 70%);
    opacity: 0;
    animation: burst-explosion 0.5s ease-out forwards 1.2s;
}

@keyframes burst-explosion {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

.vfx-beam-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 50px;
    background: linear-gradient(to bottom, transparent, #fff 30%, #fff 70%, transparent);
    filter: drop-shadow(0 0 8px #60a5fa);
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle));
    animation: beam-particle-spin 0.6s ease-out forwards 1.2s;
    border-radius: 100%;
}

@keyframes beam-particle-spin {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scale(0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(calc(var(--angle) + 180deg)) scale(1.2);
        opacity: 0;
    }
}

.vfx-burst-cross {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 8px;
    background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0;
    box-shadow: 0 0 20px #60a5fa;
    animation: burst-cross 0.5s ease-out forwards 1.3s;
}

.vfx-burst-cross::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 300px;
    background: linear-gradient(180deg, transparent, #fff 20%, #fff 80%, transparent);
    transform: translate(-50%, -50%);
}

@keyframes burst-cross {
    0% {
        transform: translate(-50%, -50%) rotate(45deg) scale(0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) rotate(225deg) scale(1.5);
        opacity: 0;
    }
}

/* Kuroo Doshatto VFX */
.vfx-doshatto {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1000;
}

.vfx-metal-wall {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 100px;
    background: linear-gradient(180deg, rgba(80, 80, 80, 0.9), rgba(30, 30, 30, 0.95));
    border: 3px solid #a0a0a0;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.2);
    animation: metal-wall-rise 0.5s ease-out forwards;
    opacity: 0;
}

.vfx-metal-wall::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
    pointer-events: none;
}

@keyframes metal-wall-rise {
    0% {
        transform: translate(-50%, 0%) scaleY(0);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scaleY(1);
        opacity: 1;
    }
}

.vfx-hex-barrier {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 37px;
    /* hex aspect ratio */
    background: rgba(200, 200, 200, 0.3);
    border: 1px solid #fff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: 0 0 5px #fff;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: hex-appear 0.4s ease-out forwards;
    animation-delay: var(--delay);
}

/* Hexagon positioning pattern (Scaled down) */
.vfx-hex-barrier:nth-child(2) {
    margin-top: -32px;
}

.vfx-hex-barrier:nth-child(3) {
    margin-top: 32px;
}

.vfx-hex-barrier:nth-child(4) {
    margin-left: -28px;
    margin-top: -16px;
}

.vfx-hex-barrier:nth-child(5) {
    margin-left: 28px;
    margin-top: -16px;
}

.vfx-hex-barrier:nth-child(6) {
    margin-left: -28px;
    margin-top: 16px;
}

.vfx-hex-barrier:nth-child(7) {
    margin-left: 28px;
    margin-top: 16px;
}

@keyframes hex-appear {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
}

.vfx-counter-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%);
    mix-blend-mode: screen;
    animation: counter-aura-pulse 1.5s infinite ease-in-out;
}

@keyframes counter-aura-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }
}

/* Mobile Fixes */
@media (max-width: 400px) {
    #character-list {
        gap: 4px;
    }

    .screen {
        padding: 16px;
    }

    .character-card img {
        width: 50px;
        height: 50px;
    }
}

/* ========================================
   マップスキルモーダル（改善版）
   ======================================== */

.skill-screen-layout {
    width: 100%;
    height: 480px;
    /* 固定高さ */
    display: flex;
    flex-direction: column;
}

/* キャラ一覧（詳細カード形式） */
.skill-char-list-container {
    display: flex;
    gap: 8px;
    padding: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
    overflow-x: visible;
    flex-shrink: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

/* キャラカード */
.skill-char-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px;
    width: 80px;
    /* 幅広げる */
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
    opacity: 0.6;
    flex-shrink: 0;
}

.skill-char-card:hover {
    background: rgba(255, 255, 255, 0.1);
    opacity: 0.8;
}

.skill-char-card.active {
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
    background: rgba(79, 172, 254, 0.1);
    opacity: 1;
    /* transformなし */
}

.skill-char-status-text {
    font-size: 10px;
    color: #eee;
    margin-top: 2px;
    line-height: 1.2;
    white-space: nowrap;
}

.skill-char-card.dead {
    filter: grayscale(1);
    border-color: #555;
    opacity: 0.4;
}

.skill-char-card img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 4px;
    object-fit: cover;
    border: 2px solid transparent;
}

.skill-char-card.active img {
    border-color: var(--primary);
}

/* ミニバー (HP/MP) */
.skill-char-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}

.mini-bar-bg {
    background: rgba(255, 255, 255, 0.1);
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
}

.mini-bar-bg .hp-fill {
    background: #ff6b6b;
    height: 100%;
    transition: width 0.3s;
}

.mini-bar-bg .mp-fill {
    background: #4facfe;
    height: 100%;
    transition: width 0.3s;
}

.map-skill-list {
    flex: 1;
    /* 残りの高さを埋める */
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px;
    box-sizing: border-box;
}

.skill-msg-empty {
    padding: 24px;
    text-align: center;
    color: #888;
    font-size: 12px;
    margin-top: 40px;
}

/* スキル項目（戦闘画面風） */
.map-skill-item {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    margin-bottom: 8px;
    border-radius: 6px;
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.map-skill-item:last-child {
    margin-bottom: 0;
}

.map-skill-item:hover:not(.disabled) {
    background: rgba(79, 172, 254, 0.15);
    border-color: var(--primary);
    /* transform削除 - 右にずれる問題を防止 */
}

.map-skill-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(1);
}

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.skill-name {
    font-weight: bold;
    font-size: 14px;
    color: #fff;
}

.skill-cost {
    font-size: 12px;
    color: #4facfe;
    font-family: monospace;
}

.skill-body {
    font-size: 11px;
    color: #ccc;
}

.skill-row-main {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.skill-name {
    font-weight: bold;
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.unique-badge {
    background: var(--warning);
    color: #000;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
}

.skill-cost {
    font-size: 11px;
    color: var(--primary);
    font-weight: bold;
}

.skill-desc {
    font-size: 10px;
    color: #aaa;
    line-height: 1.3;
}

/* ターゲット選択（縦リスト・視認性重視） */
.skill-target-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.target-select-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.target-select-card:hover {
    background: rgba(255, 255, 255, 0.1);
}

.target-select-card.valid-target:hover {
    border-color: var(--success);
    background: rgba(46, 204, 113, 0.1);
}

.target-select-card.invalid-target {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.target-select-card img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.target-info {
    flex: 1;
}

.target-name {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
}

.target-bars-mini {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}

.bar-row .label {
    width: 14px;
    text-align: left;
    color: #888;
}

.bar-row .val {
    width: 30px;
    text-align: right;
    color: #aaa;
}

.bar-bg {
    flex: 1;
    height: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    overflow: hidden;
}

.hp-fill {
    background: #ff6b6b;
    height: 100%;
}

.mp-fill {
    background: #4facfe;
    height: 100%;
}

/* ========================================
   遊び方モーダル
   ======================================== */
.howto-modal-content {
    max-width: 90%;
    width: 360px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.howto-content {
    flex: 1;
    overflow-y: auto;
    text-align: left;
    padding: 16px 0;
    font-size: 13px;
    line-height: 1.6;
}

.howto-section {
    margin-bottom: 20px;
}

.howto-section h4 {
    color: var(--primary);
    font-size: 14px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(79, 172, 254, 0.3);
}

.howto-section p {
    color: var(--text-sub);
    margin-bottom: 8px;
}

.howto-section ul {
    margin-left: 16px;
    color: var(--text-sub);
}

.howto-section li {
    margin-bottom: 4px;
}

.howto-formula {
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
    color: #ccc;
    margin: 8px 0;
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 12px 32px;
    border-radius: 30px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-secondary:hover {
    background: rgba(79, 172, 254, 0.1);
}