/* リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 基本スタイル */
body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #000;
    color: #fff;
    overflow: hidden;
    cursor: url('../images/ui/cursor.png'), auto; /* カスタムカーソル */
}

/* 画面共通スタイル */
.screen {
    position: absolute;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: -webkit-fill-available;
    display: none;
}

.screen.active {
    display: block;
}

/* タイトル画面 */
#title-screen {
    position: relative;
    overflow: hidden;
}

/* 背景画像（ぼかし付きのcover版 - 一番後ろ） */
#title-screen::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    background-image: url('../images/backgrounds/Title.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(15px);
    z-index: -2;
}

/* メイン背景画像（contain版 - 中間） */
#title-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/backgrounds/Title.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* 暗いオーバーレイ */
#title-screen .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

/* パーティクルエフェクト */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(78, 205, 196, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 6s infinite linear;
}

.particle:nth-child(2n) {
    background: radial-gradient(circle, rgba(255, 107, 107, 0.6) 0%, transparent 70%);
    animation-duration: 8s;
}

.particle:nth-child(3n) {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    animation-duration: 10s;
    width: 2px;
    height: 2px;
}

@keyframes float {
    0% {
        transform: translateY(100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-10vh) translateX(100px) rotate(360deg);
        opacity: 0;
    }
}

/* キラキラエフェクト */
.sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: sparkle 1.5s ease-in-out;
    pointer-events: none;
    z-index: 1000;
}

@keyframes sparkle {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1) rotate(180deg);
        opacity: 1;
        box-shadow: 0 0 20px #fff;
    }
    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

#title-screen.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-container {
    text-align: center;
    position: relative;
    z-index: 2;
    margin-top: 350px; /* さらに下に移動してバランス調整 */
}

.title-logo {
    position: absolute;
    top: 45%; /* ロゴを画面中央付近に配置 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 600px;
    height: auto;
    z-index: 1;
    opacity: 0.9;
}

.game-title {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 30px rgba(78, 205, 196, 0.8);
    animation: titleGlow 3s ease-in-out infinite alternate;
    z-index: 2;
    position: relative;
}

@keyframes titleGlow {
    0% {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 30px rgba(78, 205, 196, 0.8);
    }
    100% {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 50px rgba(78, 205, 196, 1), 0 0 80px rgba(255, 107, 107, 0.6);
    }
}

.subtitle {
    font-size: 1.5rem;
    margin-bottom: 3rem;
    color: #ff6b6b;
}

.title-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* ボタンスタイル */
.btn {
    padding: 1.5rem 3rem;
    font-size: 1.8rem;
    border: none;
    border-radius: 8px;
    cursor: url('../images/ui/cursor-click.png'), pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    transform: translateY(0);
}


.btn-primary {
    background: transparent;
    color: #fff;
    border: none;
    font-size: 2.7rem !important;
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 20px rgba(78, 205, 196, 0.3),
        0 0 30px rgba(78, 205, 196, 0.2);
    font-weight: bold;
    letter-spacing: 2px;
    cursor: url('../images/ui/cursor-click.png'), pointer;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
    transform: scale(1) !important;
    transform-origin: 50% 50% !important;
    animation: gameStartPulse 2s ease-in-out infinite;
}

.btn-primary:hover {
    transform: scale(1.1) !important;
}

@keyframes gameStartPulse {
    0%, 100% {
        opacity: 0.7;
        text-shadow: 
            1px 1px 2px rgba(0, 0, 0, 0.8),
            0 0 10px rgba(255, 255, 255, 0.4),
            0 0 20px rgba(78, 205, 196, 0.2),
            0 0 30px rgba(78, 205, 196, 0.15);
    }
    50% {
        opacity: 1;
        text-shadow: 
            1px 1px 2px rgba(0, 0, 0, 0.8),
            0 0 12px rgba(255, 255, 255, 0.6),
            0 0 25px rgba(78, 205, 196, 0.4),
            0 0 35px rgba(78, 205, 196, 0.3);
    }
}

@keyframes gameStartPulseHover {
    0%, 100% {
        opacity: 0.6;
        text-shadow: 
            1px 1px 2px rgba(0, 0, 0, 0.8),
            0 0 15px rgba(255, 255, 255, 0.8),
            0 0 25px rgba(78, 205, 196, 0.6),
            0 0 35px rgba(78, 205, 196, 0.4);
    }
    50% {
        opacity: 1;
        text-shadow: 
            1px 1px 2px rgba(0, 0, 0, 0.8),
            0 0 20px rgba(255, 255, 255, 1),
            0 0 35px rgba(78, 205, 196, 0.8),
            0 0 50px rgba(78, 205, 196, 0.6);
    }
}

.btn-secondary {
    background: linear-gradient(135deg, #4ecdc4 0%, #45b7aa 100%);
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #45b7aa 0%, #26de81 100%);
    box-shadow: 0 8px 25px rgba(78, 205, 196, 0.6);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.3);
}

/* メイン画面 */
#main-screen {
    position: relative;
}

#main-screen.active {
    display: block;
}

/* 背景レイヤー */
.background-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* プレースホルダー - 背景 */
.background-placeholder {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.background-placeholder.mart_interior {
    background: url('../images/backgrounds/mart_interior.png') center/cover no-repeat, 
                linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
}

/* WebPサポート時 */
.webp .background-placeholder.mart_interior {
    background: url('../images/backgrounds/mart_interior.webp') center/cover no-repeat, 
                linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
}

.background-placeholder.mart_backyard {
    background-image: url('../images/backgrounds/mart_backyard.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.webp .background-placeholder.mart_backyard {
    background-image: url('../images/backgrounds/mart_backyard.webp');
}

.background-placeholder.city_street {
    background-image: url('../images/backgrounds/city_street.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.webp .background-placeholder.city_street {
    background-image: url('../images/backgrounds/city_street.webp');
}

.background-placeholder.fumacity_entrance {
    background-image: url('../images/backgrounds/fumacity_entrance.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-placeholder.fumacity_elevator {
    background-image: url('../images/backgrounds/fumacity_elevator.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-placeholder.fumacity_top {
    background-image: url('../images/backgrounds/fumacity_top.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-placeholder.fumacity_room {
    background-image: url('../images/backgrounds/fumacity_room.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-placeholder.city_train {
    background-image: url('../images/backgrounds/city_train.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-placeholder.shrine {
    background-image: url('../images/backgrounds/shrine.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-placeholder.shrine1 {
    background-image: url('../images/backgrounds/shrine1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-placeholder.underground {
    background-image: url('../images/backgrounds/underground_entrance.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-placeholder.underground_entrance {
    background-image: url('../images/backgrounds/underground_entrance.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-placeholder.underground_datacenter {
    background-image: url('../images/backgrounds/underground_datacenter.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-placeholder.underground_climax {
    background-image: url('../images/backgrounds/underground_climax.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-placeholder.underground_dataroom {
    background-image: url('../images/backgrounds/underground_dataroom.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background-placeholder.underground_tunnels {
    background-image: url('../images/backgrounds/underground_tunnels.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 暗転背景 */
.background-placeholder.black {
    background-color: #000;
}

/* キャラクターレイヤー */
.character-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
    z-index: 30; /* 光エフェクト(29)より前面に配置 */
}

.character-image {
    max-height: 100%;
    max-width: 80%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    transition: opacity 0.3s ease-in-out;
    transform-origin: bottom center;
}

/* キャラクターフェード用クラス */
.character-image.fade-out {
    opacity: 0;
}

.character-image.fade-in {
    opacity: 1;
}

/* プレースホルダー - キャラクター */
.character-placeholder {
    width: 200px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    border: 3px solid #fff;
    border-radius: 8px;
    opacity: 1;
    transform: translateY(0) scale(1);
    /* transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.character-placeholder.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: characterGlow 2s ease-in-out infinite alternate;
}

@keyframes characterGlow {
    0% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.1); }
    100% { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 255, 255, 0.2); }
}

.character-placeholder.sakuya {
    background-color: #ff6b6b;
}

.character-placeholder.nemu {
    background-color: #4ecdc4;
}

.character-placeholder.xiaolan {
    background-color: #45b7aa;
}

.character-placeholder.konga {
    background-color: #ff9f43;
}

.character-placeholder.kohaku {
    background-color: #a55eea;
}

.character-placeholder.ganzi {
    background-color: #576574;
}

.character-placeholder.atoza {
    background-color: #2c2c54;
}

.character-placeholder.enemy {
    background-color: #8b0000;
}

/* ローワーサード（場所表示） */
.location-display {
    position: absolute;
    top: 40px;
    left: 40px;
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 20;
    pointer-events: none;
}

.location-display.show {
    opacity: 1;
    transform: translateX(0);
}

.location-text {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    padding: 0.8rem 1.8rem;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.85) 0%, rgba(16, 33, 62, 0.9) 100%);
    border: 1px solid rgba(78, 205, 196, 0.4);
    border-left: 4px solid rgba(78, 205, 196, 0.8);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    min-width: 180px;
    text-align: left;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.location-text::before {
    content: '📍';
    margin-right: 8px;
    font-size: 1rem;
}

/* ルート分岐表示 - 忍ばないルート */
.location-display.route-loud {
    background: linear-gradient(135deg, 
        rgba(255, 69, 0, 0.95) 0%, 
        rgba(255, 140, 0, 0.9) 50%, 
        rgba(255, 215, 0, 0.85) 100%);
    border: 2px solid rgba(255, 140, 0, 0.9);
    box-shadow: 
        0 0 20px rgba(255, 69, 0, 0.6),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.location-display.route-loud .location-text {
    color: #ffffff;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-size: 1.1rem;
    border-left: 4px solid rgba(255, 140, 0, 0.9);
}

.location-display.route-loud .location-text::before {
    content: '🔥';
    margin-right: 8px;
    font-size: 1.2rem;
}

/* ルート分岐表示 - 忍ぶルート */
.location-display.route-quiet {
    background: linear-gradient(135deg, 
        rgba(75, 0, 130, 0.95) 0%, 
        rgba(138, 43, 226, 0.9) 50%, 
        rgba(147, 112, 219, 0.85) 100%);
    border: 2px solid rgba(138, 43, 226, 0.9);
    box-shadow: 
        0 0 20px rgba(138, 43, 226, 0.6),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.location-display.route-quiet .location-text {
    color: #ffffff;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-size: 1.1rem;
    border-left: 4px solid rgba(138, 43, 226, 0.9);
}

.location-display.route-quiet .location-text::before {
    content: '🌙';
    margin-right: 8px;
    font-size: 1.2rem;
}

/* ルート分岐表示 - シャオラン覚醒ルート */
.location-display.route-xiaolan {
    background: linear-gradient(135deg, 
        rgba(205, 101, 221, 0.95) 0%, 
        rgba(138, 67, 149, 0.9) 50%, 
        rgba(105, 51, 113, 0.85) 100%);
    border: 2px solid rgba(255, 20, 147, 0.9);
    box-shadow: 
        0 0 20px rgba(255, 20, 147, 0.6),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.location-display.route-xiaolan .location-text {
    color: #ffffff;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-size: 1.1rem;
    border-left: 4px solid rgba(255, 20, 147, 0.9);
}

.location-display.route-xiaolan .location-text::before {
    content: '🐼';
    margin-right: 8px;
    font-size: 1.2rem;
}

/* ルート分岐表示 - ネム頼りルート */
.location-display.route-nemu {
    background: linear-gradient(135deg, 
        rgba(200, 68, 110, 0.95) 0%, 
        rgba(164, 60, 93, 0.85) 50%, 
        rgba(137, 44, 74, 0.85) 100%);
    border: 2px solid rgba(0, 191, 255, 0.9);
    box-shadow: 
        0 0 20px rgba(0, 191, 255, 0.6),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.location-display.route-nemu .location-text {
    color: #ffffff;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-size: 1.1rem;
    border-left: 4px solid rgba(0, 191, 255, 0.9);
}

.location-display.route-nemu .location-text::before {
    content: '🎨';
    margin-right: 8px;
    font-size: 1.2rem;
}

/* 煙エフェクト - 改良版 */
.smoke-effect {
    position: absolute;
    width: 600px;  /* 400px → 600px に拡大 */
    height: 500px; /* 400px → 500px に拡大 */
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    z-index: 22;  /* キャラクター画像(20)の前面、テキストボックスの背面 */
    pointer-events: none;
}

/* 基本煙パーティクル - 白っぽくソフトに */
.smoke-particle {
    position: absolute;
    background: radial-gradient(circle at center, 
        rgba(220, 220, 220, 0.9) 0%, 
        rgba(200, 200, 200, 0.8) 20%,
        rgba(180, 180, 180, 0.6) 40%,
        rgba(160, 160, 160, 0.4) 60%,
        rgba(140, 140, 140, 0.2) 80%,
        rgba(120, 120, 120, 0) 100%);
    border-radius: 50%;
    filter: blur(3px);  /* ソフトな見た目にする */
    animation: smokeRise 0.875s ease-out forwards;
}

/* 濃い煙パーティクル - より白っぽく */
.smoke-particle-dense {
    position: absolute;
    background: radial-gradient(circle at center,
        rgba(240, 240, 240, 0.9) 0%,
        rgba(220, 220, 220, 0.8) 30%,
        rgba(200, 200, 200, 0.6) 60%,
        transparent 100%);
    border-radius: 50%;
    filter: blur(4px);  /* より強いブラー */
    animation: smokeBurst 0.7s ease-out forwards;
    --burst-x: 0;
    --burst-y: 0;
}

/* 横に広がる煙動作 */
@keyframes smokeBurst {
    0% {
        opacity: 0;
        transform: translateY(50px) translateX(0px) scale(0.2) rotate(0deg);
    }
    15% {
        opacity: 1;
        transform: translateY(calc(30px + var(--burst-y) * 0.3)) translateX(calc(var(--burst-x) * 0.3)) scale(0.6) rotate(30deg);
    }
    30% {
        opacity: 0.9;
        transform: translateY(calc(10px + var(--burst-y) * 0.6)) translateX(calc(var(--burst-x) * 0.6)) scale(1.1) rotate(90deg);
    }
    50% {
        opacity: 0.8;
        transform: translateY(calc(-10px + var(--burst-y))) translateX(calc(var(--burst-x))) scale(1.8) rotate(180deg);
    }
    75% {
        opacity: 0.4;
        transform: translateY(calc(-30px + var(--burst-y) * 1.5)) translateX(calc(var(--burst-x) * 1.5)) scale(2.5) rotate(270deg);
    }
    100% {
        opacity: 0;
        transform: translateY(calc(-60px + var(--burst-y) * 2)) translateX(calc(var(--burst-x) * 2)) scale(3.2) rotate(360deg);
    }
}

/* 上昇する煙動作 */
@keyframes smokeRise {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.3) rotate(0deg);
    }
    15% {
        opacity: 1;
        transform: translateY(60px) scale(0.7) rotate(45deg);
    }
    30% {
        opacity: 0.9;
        transform: translateY(20px) scale(1.2) rotate(90deg);
    }
    60% {
        opacity: 0.7;
        transform: translateY(-40px) scale(2.2) rotate(180deg);
    }
    85% {
        opacity: 0.3;
        transform: translateY(-120px) scale(3.5) rotate(270deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-200px) scale(4.5) rotate(360deg);
    }
}

/* 強化されたフラッシュ */
.smoke-flash {
    position: absolute;
    width: 180%;
    height: 180%;
    left: -40%;
    top: -40%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 25%, rgba(200, 200, 200, 0.4) 60%, transparent 80%);
    border-radius: 50%;
    opacity: 0;
    animation: flashIntense 0.15s ease-out;
}

@keyframes flashIntense {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    25% {
        opacity: 1;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.2);
    }
    75% {
        opacity: 0.6;
        transform: scale(1.8);
    }
    100% {
        opacity: 0;
        transform: scale(3);
    }
}

/* 大きな煙雲 - より白っぽく */
.smoke-cloud {
    position: absolute;
    background: radial-gradient(ellipse, rgba(250, 250, 250, 0.8) 0%, rgba(230, 230, 230, 0.7) 30%, rgba(210, 210, 210, 0.5) 60%, transparent 100%);
    border-radius: 50%;
    filter: blur(5px);
    animation: cloudExpand 0.75s ease-out forwards;
}

@keyframes cloudExpand {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    20% {
        opacity: 0.9;
        transform: scale(1);
    }
    40% {
        opacity: 0.8;
        transform: scale(1.8);
    }
    70% {
        opacity: 0.5;
        transform: scale(2.8);
    }
    100% {
        opacity: 0;
        transform: scale(4);
    }
}

/* 煙の波動エフェクト */
.smoke-wave {
    position: absolute;
    background: radial-gradient(ellipse 120% 80%, rgba(245, 245, 245, 0.6) 0%, rgba(225, 225, 225, 0.4) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(3px);
    animation: waveExpand 0.625s ease-out forwards;
}

/* 光エフェクト（まばゆい光） */
.light-effect {
    position: absolute;
    width: 800px;
    height: 600px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 22;  /* キャラクター画像の前面、テキストボックスの背面 */
    pointer-events: none;
}

/* 光のフラッシュエフェクト */
.light-flash {
    position: absolute;
    width: 200%;
    height: 200%;
    left: -50%;
    top: -50%;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 248, 180, 0.95) 15%, 
        rgba(255, 235, 120, 0.8) 30%, 
        rgba(255, 220, 60, 0.6) 50%, 
        rgba(255, 200, 0, 0.3) 70%, 
        transparent 90%);
    border-radius: 50%;
    opacity: 0;
    animation: lightFlashIntense 0.25s ease-out;
}

@keyframes lightFlashIntense {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

/* 光の波動エフェクト */
.light-wave {
    position: absolute;
    background: radial-gradient(ellipse 130% 70%, 
        rgba(255, 255, 255, 0.8) 0%, 
        rgba(255, 248, 180, 0.6) 25%, 
        rgba(255, 235, 120, 0.4) 50%, 
        transparent 80%);
    border-radius: 50%;
    filter: blur(2px);
    animation: lightWaveExpand 0.8s ease-out forwards;
}

@keyframes lightWaveExpand {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    30% {
        opacity: 0.9;
        transform: scale(1);
    }
    70% {
        opacity: 0.6;
        transform: scale(1.8);
    }
    100% {
        opacity: 0;
        transform: scale(3);
    }
}

/* 光のオーブエフェクト */
.light-orb {
    position: absolute;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 248, 180, 0.8) 20%, 
        rgba(255, 235, 120, 0.6) 40%, 
        rgba(255, 220, 60, 0.4) 60%, 
        transparent 80%);
    border-radius: 50%;
    filter: blur(4px);
    animation: lightOrbExpand 1s ease-out forwards;
}

@keyframes lightOrbExpand {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    25% {
        opacity: 1;
        transform: scale(1);
    }
    75% {
        opacity: 0.7;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(2.2);
    }
}

/* 光線エフェクト */
.light-ray {
    position: absolute;
    background: linear-gradient(45deg, 
        rgba(255, 255, 255, 0.8) 0%, 
        rgba(255, 248, 180, 0.6) 30%, 
        rgba(255, 235, 120, 0.4) 60%, 
        transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    animation: lightRayBurst 0.6s ease-out forwards;
}

@keyframes lightRayBurst {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(3);
    }
}

/* グリッチラインエフェクト */
.glitch-effect-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 35;
}

/* ノイズ付き走査線（ベース） */
.glitch-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.glitch-scanlines::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(255, 255, 255, 0.15) 1px,
        rgba(255, 255, 255, 0.15) 2px
    );
    animation: scanlineNoise 0.25s steps(10) infinite;
}

@keyframes scanlineNoise {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(10px);
    }
}

/* グリッチライン */
.glitch-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    opacity: 0;
    animation: glitchBurst 1s infinite;
}

.glitch-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.9) 45%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.9) 55%,
        transparent 100%
    );
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 1),
        0 0 30px rgba(0, 255, 255, 0.8),
        0 0 50px rgba(255, 255, 255, 0.6);
}

@keyframes glitchBurst {
    0%, 85%, 100% {
        opacity: 0;
        transform: translateX(0) scaleX(1);
    }
    87% {
        opacity: 1;
        top: 15%;
        transform: translateX(-2%) scaleX(1.05);
    }
    89% {
        opacity: 1;
        top: 45%;
        transform: translateX(1%) scaleX(0.98);
    }
    91% {
        opacity: 1;
        top: 70%;
        transform: translateX(-1%) scaleX(1.02);
    }
    93% {
        opacity: 1;
        top: 25%;
        transform: translateX(2%) scaleX(0.95);
    }
    95% {
        opacity: 0.8;
        top: 85%;
        transform: translateX(0) scaleX(1.1);
    }
    97% {
        opacity: 0.6;
        top: 50%;
        transform: translateX(-3%) scaleX(1);
    }
}

/* 追加のグリッチライン（タイミングをずらす） */
.glitch-line:nth-child(3) {
    height: 5px;
    animation-delay: 0.25s;
}

.glitch-line:nth-child(5) {
    height: 4px;
    animation-delay: 0.75s;
}

.glitch-line:nth-child(5)::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 0, 0.8) 45%,
        rgba(255, 255, 0, 1) 50%,
        rgba(255, 255, 0, 0.8) 55%,
        transparent 100%
    );
    box-shadow: 
        0 0 10px rgba(255, 255, 0, 1),
        0 0 20px rgba(255, 255, 0, 0.6),
        0 0 30px rgba(255, 255, 0, 0.4);
}

.glitch-line:nth-child(6) {
    height: 3px;
    animation-delay: 0.35s;
}

.glitch-line:nth-child(6)::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 100, 100, 0.9) 45%,
        rgba(255, 100, 100, 1) 50%,
        rgba(255, 100, 100, 0.9) 55%,
        transparent 100%
    );
    box-shadow: 
        0 0 8px rgba(255, 100, 100, 1),
        0 0 16px rgba(255, 100, 100, 0.7),
        0 0 24px rgba(255, 100, 100, 0.5);
}

.glitch-line:nth-child(3)::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 0, 255, 0.8) 45%,
        rgba(255, 0, 255, 1) 50%,
        rgba(255, 0, 255, 0.8) 55%,
        transparent 100%
    );
    box-shadow: 
        0 0 20px rgba(255, 0, 255, 1),
        0 0 40px rgba(255, 0, 255, 0.6),
        0 0 60px rgba(255, 0, 255, 0.4);
}

.glitch-line:nth-child(4) {
    height: 2px;
    animation-delay: 1s;
}

.glitch-line:nth-child(4)::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 255, 255, 0.9) 45%,
        rgba(0, 255, 255, 1) 50%,
        rgba(0, 255, 255, 0.9) 55%,
        transparent 100%
    );
    box-shadow: 
        0 0 12px rgba(0, 255, 255, 1),
        0 0 24px rgba(0, 255, 255, 0.7),
        0 0 36px rgba(0, 255, 255, 0.5);
}

/* 画面の歪み効果 */
.distortion-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: distortionPulse 1s infinite;
    pointer-events: none;
}

@keyframes distortionPulse {
    0%, 85%, 100% {
        opacity: 0;
    }
    87%, 97% {
        opacity: 1;
        backdrop-filter: blur(2px) brightness(1.5) contrast(1.3);
    }
}

@keyframes waveExpand {
    0% {
        opacity: 0;
        transform: scaleX(0.3) scaleY(0.1);
    }
    30% {
        opacity: 0.8;
        transform: scaleX(1.5) scaleY(0.6);
    }
    70% {
        opacity: 0.4;
        transform: scaleX(3) scaleY(1.2);
    }
    100% {
        opacity: 0;
        transform: scaleX(5) scaleY(2);
    }
}


/* キャラクター名コンテナ */
.character-name-container {
    position: absolute;
    bottom: 245px;
    left: 2rem;
    z-index: 31;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.character-name-container.show {
    opacity: 1;
    transform: translateY(0);
}

/* テキストボックス */
.text-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.9) 100%);
    border-top: 3px solid #4ecdc4;
    padding: 2rem;
    height: 198px; /* min-heightから固定heightに変更 (220px - 10%) */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6), 0 0 40px rgba(78, 205, 196, 0.3);
    backdrop-filter: blur(8px);
    cursor: url('../images/ui/cursor-click.png'), pointer; /* クリック可能エリア用カーソル */
    z-index: 30;  /* 煙エフェクト(22)よりも前面に配置 */
    transition: all 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.text-box::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4ecdc4, #ff6b6b, #4ecdc4);
    background-size: 200% 100%;
    animation: borderFlow 3s ease-in-out infinite;
}

@keyframes borderFlow {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 0%; }
}

.text-box:hover {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.95) 100%);
    border-top-color: #ff6b6b;
}

.character-name {
    font-size: 1.6rem;
    color: #fff;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.9) 0%, rgba(69, 183, 170, 0.8) 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px 12px 0 0;
    backdrop-filter: blur(5px);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.4);
    position: relative;
    min-width: 150px;
    text-align: center;
    transition: all 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* animation: nameGlow 2.5s ease-in-out infinite alternate; */
}

@keyframes nameGlow {
    0% {
        box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.4), 0 0 30px rgba(78, 205, 196, 0.4);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(78, 205, 196, 0.8);
    }
    100% {
        box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.6), 0 0 50px rgba(78, 205, 196, 0.8);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 40px rgba(78, 205, 196, 1);
    }
}

.character-name::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 8px solid rgba(78, 205, 196, 0.8);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.dialogue-text {
    font-size: 1.4rem;
    line-height: 1.9;
    min-height: 120px;
    color: #f8f9fa;
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); */
    font-weight: 500;
    letter-spacing: 0.5px;
    padding-top: 0.5rem;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.dialogue-text.show {
    opacity: 1;
    transform: translateY(0);
}

/* .dialogue-text.typing animation removed for performance optimization */

/* キャラクター感情アニメーション */
.emotion-normal {
    animation: breathing 3s ease-in-out infinite;
}

/* 強調アニメーション実行中は呼吸アニメーションを無効化 */
.emotion-normal.text-exclamation {
    animation: emphasis 0.4s ease-out forwards !important;
}

/* text-exclamation単体でも強調アニメーションを実行 */
.text-exclamation {
    animation: emphasis 0.4s ease-out forwards !important;
}

@keyframes breathing {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.01) translateY(-2.5px); }
}

.emotion-happy {
    animation: bounce 0.6s ease-out;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    50% { transform: translateY(-5px); }
    75% { transform: translateY(-7.5px); }
}

.emotion-surprised {
    animation: surprise 0.5s ease-out;
}

@keyframes surprise {
    0% { transform: scale(1) translateY(0); }
    50% { transform: scale(0.975) translateY(5px); }
    100% { transform: scale(1) translateY(0); }
}

.emotion-sad, .emotion-resigned {
    animation: droop 0.8s ease-out forwards;
}

@keyframes droop {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(5px) rotate(-1deg); }
}

.emotion-angry, .emotion-frustrated {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-2.5px); }
    40% { transform: translateX(2.5px); }
    60% { transform: translateX(-1.5px); }
    80% { transform: translateX(1.5px); }
}

.emotion-excited {
    animation: excite 0.6s ease-out;
}

@keyframes excite {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.emotion-worried {
    animation: tremble 2s ease-in-out infinite;
}

.emotion-scared, .emotion-panicked {
    animation: breathing 3s ease-in-out infinite;
}

@keyframes tremble {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-0.5px); }
    20% { transform: translateX(0.5px); }
    30% { transform: translateX(-0.5px); }
    40% { transform: translateX(0.5px); }
    50% { transform: translateX(-0.5px); }
    60% { transform: translateX(0.5px); }
    70% { transform: translateX(-0.5px); }
    80% { transform: translateX(0.5px); }
    90% { transform: translateX(-0.5px); }
}

@keyframes thinking-sway {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-4px) rotate(-1deg); }
    50% { transform: translateX(0) rotate(0deg); }
    75% { transform: translateX(4px) rotate(1deg); }
}

.emotion-thinking {
    animation: thinking-sway 4s ease-in-out infinite;
}

.emotion-contemplating, .emotion-thoughtful {
    animation: breathing 3s ease-in-out infinite;
}

@keyframes ponder {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(10px) rotate(2deg); }
}

.emotion-proud, .emotion-satisfied {
    animation: chest-out 1s ease-out;
}

@keyframes chest-out {
    0% { transform: scale(1); }
    50% { transform: scale(1.025) translateY(-2.5px); }
    100% { transform: scale(1.015) translateY(-1.5px); }
}

.emotion-impressed {
    animation: nod-approval 0.8s ease-out;
}

@keyframes nod-approval {
    0% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-5px) scale(1.01); }
    50% { transform: translateY(2.5px) scale(1.005); }
    75% { transform: translateY(-2.5px) scale(1.005); }
    100% { transform: translateY(0) scale(1); }
}

/* テキスト解析アニメーション */
/* .text-exclamation は .emotion-normal.text-exclamation で定義済み */

@keyframes emphasis {
    0% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.075) translateY(-5px); }
    100% { transform: scale(1) translateY(0); }
}

.text-question {
    animation: tilt 0.6s ease-in-out;
}

@keyframes tilt {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2.5deg); }
    75% { transform: rotate(2.5deg); }
}

.text-thinking {
    animation: look-away 1s ease-in-out;
}

@keyframes look-away {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(15px); }
}

.text-laughing {
    animation: laugh 0.8s ease-in-out;
}

@keyframes laugh {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-1deg) scale(1.01); }
    50% { transform: rotate(1deg) scale(1.01); }
    75% { transform: rotate(-0.5deg) scale(1.005); }
}

.text-surprised {
    animation: jump-back 0.5s ease-out;
}

@keyframes jump-back {
    0% { transform: translateY(0); }
    50% { transform: translateY(-7.5px) scale(0.99); }
    100% { transform: translateY(0) scale(1); }
}

.text-troubled {
    animation: sway 2s ease-in-out;
}

@keyframes sway {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    33% { transform: translateX(-5px) rotate(-0.5deg); }
    66% { transform: translateX(5px) rotate(0.5deg); }
}

/* プレースホルダー用アニメーション調整 */
.character-placeholder.emotion-normal {
    animation: placeholder-breathing 3s ease-in-out infinite;
}

@keyframes placeholder-breathing {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}

.character-placeholder.emotion-happy {
    animation: placeholder-bounce 0.6s ease-out;
}

@keyframes placeholder-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* @keyframes textGlow {
    0% { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 5px rgba(78, 205, 196, 0.3); }
    100% { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 15px rgba(78, 205, 196, 0.6); }
} */

.next-indicator {
    position: absolute;
    bottom: 1.5rem;
    right: 2rem;
    animation: pulse 2s ease-in-out infinite;
    font-size: 1.2rem;
    color: #4ecdc4;
    text-shadow: 0 0 20px rgba(78, 205, 196, 0.8);
    transform: scale(1);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 20px rgba(78, 205, 196, 0.8);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
        text-shadow: 0 0 30px rgba(78, 205, 196, 1), 0 0 40px rgba(255, 255, 255, 0.3);
    }
}

.back-button {
    position: absolute;
    bottom: 0.5rem;
    left: 2rem;
    background: rgba(78, 205, 196, 0.9);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(78, 205, 196, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    position: relative;
    overflow: hidden;
}

.back-button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg);
    transition: transform 0.6s ease;
}

.back-button:hover::before {
    transform: rotate(45deg) translate(50%, 50%);
}

.back-button:hover {
    background: linear-gradient(135deg, rgba(255, 107, 107, 1) 0%, rgba(255, 82, 82, 0.95) 100%);
    transform: scale(1.1) translateX(-5px);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.back-button:active {
    transform: scale(0.95) translateX(-3px);
}

.back-button:disabled {
    background: linear-gradient(135deg, rgba(128, 128, 128, 0.6) 0%, rgba(96, 96, 96, 0.5) 100%);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    transform: none;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 選択肢 */
.choices-container {
    position: absolute;
    bottom: 340px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    z-index: 100;
}

.choice-button {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.95) 0%, rgba(69, 183, 170, 0.9) 100%);
    color: #fff;
    padding: 1.2rem 3rem;
    border: 3px solid transparent;
    border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7aa, #ff6b6b) 1;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 500px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(78, 205, 196, 0.3);
    backdrop-filter: blur(5px);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-50px) scale(0.9);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.choice-button.show {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.choice-button.show:nth-child(1) { animation-delay: 0.1s; }
.choice-button.show:nth-child(2) { animation-delay: 0.2s; }
.choice-button.show:nth-child(3) { animation-delay: 0.3s; }
.choice-button.show:nth-child(4) { animation-delay: 0.4s; }

.choice-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), rgba(255, 107, 107, 0.3), rgba(78, 205, 196, 0.3), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.choice-button::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7aa, #ff6b6b, #ff6b6b);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: rainbowBorder 3s linear infinite;
}

@keyframes rainbowBorder {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.choice-button:hover {
    background: linear-gradient(135deg, rgba(78, 205, 196, 1) 0%, rgba(69, 183, 170, 0.95) 100%);
    transform: translateX(15px) scale(1.05);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 40px rgba(78, 205, 196, 0.8);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 255, 255, 0.8);
}

.choice-button:hover::after {
    opacity: 1;
}

.choice-button:hover::before {
    left: 100%;
}

.choice-button:active {
    transform: translateX(10px) scale(1.02);
}

/* 設定画面 */
#settings-screen {
    background-color: rgba(0, 0, 0, 0.9);
}

#settings-screen.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* モバイル専用音声ボタンはデスクトップでは非表示 */
.mobile-audio-control {
    display: none !important;
}

/* 1025px以上の画面では確実に非表示 */
@media screen and (min-width: 1025px) {
    .mobile-audio-control {
        display: none !important;
    }
}

.settings-container {
    background-color: rgba(26, 26, 46, 0.95);
    padding: 2.5rem 3rem;
    border-radius: 16px;
    min-width: 450px;
    text-align: center;
}

.settings-container h2 {
    margin-bottom: 2rem;
    text-align: center;
}

.setting-item {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
}


.setting-item label {
    flex: 1;
    white-space: nowrap;
    min-width: 120px;
}

.setting-item input[type="range"] {
    flex: 2;
}

.setting-item select {
    flex: 2;
    padding: 0.5rem;
    background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
    color: #fff;
    border: 2px solid #4ecdc4;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(78, 205, 196, 0.2);
    transition: all 0.3s ease;
}

.setting-item select:focus {
    outline: none;
    border-color: #ff6b6b;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 107, 107, 0.4);
    transform: scale(1.02);
}

/* 設定画面の戻るボタン */
#settings-back {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    width: auto;
    display: inline-block;
    margin-top: 1rem;
    cursor: url('../images/ui/cursor-click.png'), pointer;
}

/* 謎解き画面 */
.puzzle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    padding: 2rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* 4桁コードパズル用背景 */
.puzzle-container.code-puzzle {
    background-image: url('../images/backgrounds/Quiz1.png');
}

/* 順番パズル用背景 */
.puzzle-container.sequence-puzzle {
    background-image: url('../images/backgrounds/Quiz2.png');
}

.puzzle-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 0;
}

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

/* 謎解き関連のボタン */
.digit-button,
.diary-check-button,
.puzzle-modal-button,
.back-button {
    cursor: url('../images/ui/cursor-click.png'), pointer !important;
}

.puzzle-question {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    margin-top: -1rem;
    text-align: center;
    line-height: 1.4;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.puzzle-hints {
    margin-bottom: 2rem;
    max-width: 600px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.hint-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hint-label {
    background-color: #4ecdc4;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    min-width: 60px;
    text-align: center;
    padding: 0.5rem;
    border-radius: 4px;
}

.hint-content {
    flex: 1;
    padding: 1rem;
    background-color: rgba(26, 26, 46, 0.8);
    border-radius: 8px;
}

.hint-number {
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* 4桁コード入力 */
.code-input-container {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.digit-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.digit-button {
    width: 40px;
    height: 30px;
    background-color: #4ecdc4;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.digit-button:hover {
    background-color: #45b7aa;
    transform: scale(1.1);
}

.digit-button:active {
    transform: scale(0.95);
}

.digit-input {
    font-size: 2rem;
    padding: 0.8rem;
    width: 60px;
    height: 80px;
    text-align: center;
    background-color: #16213e;
    color: #fff;
    border: 2px solid #4ecdc4;
    border-radius: 8px;
    font-weight: bold;
}

.digit-input:focus {
    outline: none;
    border-color: #ff6b6b;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
}

.code-submit-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.puzzle-submit-btn {
    background-color: #e57b19 !important;
    color: white !important;
    text-shadow: none !important;
    font-size: 1.2rem !important;
    padding: 0.8rem 2rem !important;
    letter-spacing: 1px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.puzzle-submit-btn:hover {
    background-color: #d66b0d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(229, 123, 25, 0.3) !important;
}

/* 順番パズルのアクションボタンコンテナ */
.sequence-action-buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.sequence-action-buttons .btn {
    min-width: 120px;
    font-size: 1.2rem !important;
    padding: 0.8rem 2rem !important;
    letter-spacing: 1px !important;
}

/* 順番パズル */
.sequence-puzzle-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.sequence-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.diary-check-button {
    padding: 1rem 2rem;
    font-size: 1.3rem;
    background-color: #a55eea;
    color: #fff;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
    font-weight: bold;
    position: relative;
    animation: diaryButtonGlow 2s ease-in-out infinite;
    box-shadow: 
        0 0 20px rgba(165, 94, 234, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2);
}

@keyframes diaryButtonGlow {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(165, 94, 234, 0.3),
            0 4px 8px rgba(0, 0, 0, 0.2);
        border-color: transparent;
    }
    50% {
        box-shadow: 
            0 0 30px rgba(165, 94, 234, 0.6),
            0 0 50px rgba(165, 94, 234, 0.3),
            0 4px 12px rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 255, 255, 0.3);
    }
}

.diary-check-button:hover {
    background-color: #9c88ff;
    transform: translateY(-2px);
    animation: none;
    box-shadow: 
        0 0 40px rgba(156, 136, 255, 0.8),
        0 0 60px rgba(156, 136, 255, 0.4),
        0 6px 16px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
}

.sequence-button {
    width: 120px;
    height: 120px;
    font-size: 3rem;
    background-color: #16213e;
    border: 2px solid #4ecdc4;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sequence-button:hover {
    background-color: #1f2f4f;
    transform: scale(1.05);
}

.sequence-button.selected {
    background-color: #4ecdc4;
    color: #000;
}

.sequence-display {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    min-height: 60px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.sequence-item {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #16213e;
    border: 2px solid #4ecdc4;
    border-radius: 8px;
    font-size: 2rem;
}

.puzzle-result {
    margin-top: 2rem;
    font-size: 1.2rem;
    text-align: center;
}

.puzzle-result.success {
    color: #4ecdc4;
}

.puzzle-result.failure {
    color: #ff6b6b;
}

/* パズル用モーダル */
.puzzle-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: modalFadeIn 0.3s ease;
}

.puzzle-modal.show {
    display: flex;
}

.puzzle-modal-content {
    background-color: #1a1a2e;
    padding: 2rem 3rem;
    border-radius: 16px;
    border: 3px solid #4ecdc4;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.3s ease;
}

.puzzle-modal-content.success {
    border-color: #4ecdc4;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d4a22 100%);
}

.puzzle-modal-content.failure {
    border-color: #ff6b6b;
    background: linear-gradient(135deg, #1a1a2e 0%, #4a2222 100%);
}

.puzzle-modal-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.puzzle-modal-title.success {
    color: #4ecdc4;
}

.puzzle-modal-title.failure {
    color: #ff6b6b;
}

.puzzle-modal-message {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.puzzle-modal-button {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.puzzle-modal-button.success {
    background-color: #4ecdc4;
    color: #fff;
}

.puzzle-modal-button.success:hover {
    background-color: #45b7aa;
    transform: translateY(-2px);
}

.puzzle-modal-button.failure {
    background-color: #ff6b6b;
    color: #fff;
}

.puzzle-modal-button.failure:hover {
    background-color: #ff5252;
    transform: translateY(-2px);
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideIn {
    from { 
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 絵日記モーダル */
.diary-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2500;
    animation: modalFadeIn 0.3s ease;
}

.diary-modal.show {
    display: flex;
}

.diary-modal-content {
    background: linear-gradient(135deg, #2d1b69 0%, #11998e 100%);
    padding: 1.5rem;
    border-radius: 20px;
    border: 3px solid #a55eea;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
    animation: modalSlideIn 0.3s ease;
}

.diary-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 0.8rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.diary-pages {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.diary-page {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 2px solid #a55eea;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.diary-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.diary-text {
    color: #2d1b69;
    font-size: 1rem;
    font-weight: bold;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.diary-sequence-hint {
    background: linear-gradient(45deg, #ffeaa7 0%, #fab1a0 100%);
    padding: 0.6rem;
    border-radius: 10px;
    margin: 0.8rem 0;
    text-align: center;
    color: #2d3436;
    font-weight: bold;
    font-size: 0.95rem;
    border: 2px solid #fdcb6e;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.diary-close-button {
    width: 100%;
    padding: 0.8rem;
    font-size: 1.1rem;
    background-color: #a55eea;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.diary-close-button:hover {
    background-color: #9c88ff;
    transform: translateY(-2px);
}

/* クレジット画面 */
.credits-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #0f0f23 0%, #1e1e3e 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.credits-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/backgrounds/Ending.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: creditsBgFadeIn 3s ease-in-out 4s forwards;
    z-index: 0;
}

.credits-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    animation: creditsBgFadeIn 3s ease-in-out 4s forwards;
    z-index: 1;
}

@keyframes creditsBgFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.credits-content {
    position: relative;
    width: 80%;
    max-width: 800px;
    padding: 50px 0;
    text-align: center;
    animation: creditsRoll 45s linear forwards;
    z-index: 2;
}

@keyframes creditsRoll {
    0% {
        transform: translateY(calc(50vh + 50%));
    }
    100% {
        transform: translateY(calc(-50vh - 100%));
    }
}

.credits-section {
    margin-bottom: 6rem;
    opacity: 1;
}



.credits-section h2 {
    font-size: 2rem;
    color: #4ecdc4;
    margin-bottom: 1rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(78, 205, 196, 0.3);
}

.credits-section p {
    font-size: 1.3rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.credits-subsection {
    margin-bottom: 3rem;
    opacity: 1;
}


.credits-subsection h3 {
    font-size: 1.1rem;
    color: #a55eea;
    margin-bottom: 0.5rem;
    font-weight: normal;
    text-align: center;
}

.credits-subsection p {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
}

.credits-final-thanks {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid rgba(165, 94, 234, 0.3);
}

.credits-final-thanks p {
    font-size: 1.4rem;
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.credits-disclaimer {
    margin-top: 8rem;
    padding-top: 3rem;
    border-top: 2px solid rgba(78, 205, 196, 0.3);
    position: relative;
}

.credits-disclaimer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: rgba(78, 205, 196, 0.6);
}

.credits-disclaimer h2 {
    font-size: 1.6rem;
    color: #ffffff;
    text-shadow: none;
}

.credits-disclaimer p {
    font-size: 1.1rem;
    color: #cccccc;
    line-height: 1.8;
}

/* 免責事項表示 */
.disclaimer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f0f23 0%, #1e1e3e 100%);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
}

.disclaimer-overlay.show {
    display: flex;
    opacity: 1;
}

.disclaimer-overlay.fade-out {
    animation: disclaimerBgFadeOut 0.6s ease-in-out forwards;
}

.disclaimer-content {
    text-align: center;
    color: #ffffff;
    max-width: 600px;
    padding: 0 2rem;
    opacity: 0;
}

.disclaimer-content.show {
    animation: disclaimerTextFadeInOut 2.4s ease-in-out forwards;
}

.disclaimer-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    margin: 0.5rem 0;
    font-weight: 400;
}

@keyframes disclaimerTextFadeInOut {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes disclaimerBgFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* 「おしまい」専用オーバーレイ */
.credits-ending-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
}
.credits-ending-overlay.show {
    pointer-events: auto;
    cursor: pointer;
}

.credits-ending-overlay.show {
    animation: endingAppear 3s ease-out forwards;
}

.credits-ending-overlay h1 {
    font-size: 4rem;
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    text-align: center;
    transform: scale(0.5);
    opacity: 0;
}

@keyframes endingAppear {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    20%, 100% {
        opacity: 1;
    }
}

.credits-ending-overlay.show h1 {
    animation: endingTextAppear 3s ease-out forwards;
}

@keyframes endingTextAppear {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.credits-ending-overlay.show h1 {
    animation: endingTextAppear 3s ease-out forwards, endingGlow 2s ease-in-out infinite alternate 1s;
}

@keyframes endingGlow {
    0% {
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    }
}

/* クレジットへのフェードトランジション */
.fade-to-credits-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f0f23 0%, #1e1e3e 100%);
    opacity: 0;
    z-index: 1000;
    animation: fadeToCredits 3s ease-in-out forwards;
}

@keyframes fadeToCredits {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* クレジット画面のフェードイン */
/* クレジット画面のフェードインは削除（事前表示のため不要） */

/* シーン切り替えトランジション効果 */
/* シンプルな横スライドトランジション - 背景とキャラクターのみ */
.scene-transition-slide .background-layer.scene-current,
.scene-transition-slide .character-layer.scene-current {
    animation: slideOut 1.2s ease-in-out forwards;
    z-index: 2;
}

.scene-transition-slide .background-layer.scene-next,
.scene-transition-slide .character-layer.scene-next {
    animation: slideIn 1.2s ease-in-out forwards;
    z-index: 1;
}

/* シンプルな横スライドアニメーション */
@keyframes slideOut {
    from { 
        transform: translateX(0); 
        opacity: 1;
    }
    to { 
        transform: translateX(-100%); 
        opacity: 1;
    }
}

@keyframes slideIn {
    from { 
        transform: translateX(100%);
        opacity: 1;
    }
    to { 
        transform: translateX(0);
        opacity: 1;
    }
}

/* 流体モーション（元のバージョン） */
.scene-transition-fluid .screen.scene-current,
.scene-transition-fluid .background-layer.scene-current {
    animation: fluidOut 1s ease-in-out forwards;
}

.scene-transition-fluid .screen.scene-next,
.scene-transition-fluid .background-layer.scene-next {
    animation: fluidIn 1s ease-in-out forwards;
}

@keyframes fluidOut {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        opacity: 1;
    }
    50% {
        clip-path: polygon(0% 0%, 60% 0%, 50% 50%, 60% 100%, 0% 100%);
        opacity: 0.7;
    }
    100% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
        opacity: 0;
    }
}

@keyframes fluidIn {
    0% {
        opacity: 0;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* GPUアクセラレーション */
.scene-transition-slide .background-layer,
.scene-transition-slide .character-layer,
.scene-transition-fluid .screen,
.scene-transition-fluid .background-layer,
.scene-transition-fluid-fast .screen,
.scene-transition-fluid-fast .background-layer {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 別バージョン：超高速版（0.6秒） */

/* 獣キャラクター専用：左からスライドイン */
.character-image.slide-in-left {
    animation: slideInFromLeft 0.8s ease-out forwards;
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
.scene-transition-fluid-fast .screen.scene-current,
.scene-transition-fluid-fast .background-layer.scene-current {
    animation: fluidUltraFastOut 0.6s ease-in-out forwards;
}

@keyframes fluidUltraFastOut {
    0% {
        clip-path: circle(150% at 100% 50%);
        opacity: 1;
    }
    50% {
        clip-path: circle(75% at 50% 50%);
        opacity: 0.8;
    }
    100% {
        clip-path: circle(0% at 0% 50%);
        opacity: 0;
    }
}

.scene-transition-fluid-fast .screen.scene-next,
.scene-transition-fluid-fast .background-layer.scene-next {
    animation: fluidUltraFastIn 0.6s ease-out forwards;
}

@keyframes fluidUltraFastIn {
    0%, 30% {
        opacity: 0;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* GPUアクセラレーション */
.scene-transition-fluid .screen,
.scene-transition-fluid .background-layer,
.scene-transition-fluid-fast .screen,
.scene-transition-fluid-fast .background-layer {
    will-change: clip-path, opacity, filter, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 通常のフェード効果 */
.scene-transition-fade .screen.scene-current {
    animation: fadeOut 1s ease-in-out forwards;
}

.scene-transition-fade .screen.scene-next {
    animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 常時表示ボタン（設定・デバッグ） */
.fixed-buttons {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 1000;
    flex-direction: row-reverse; /* 設定を右、デバッグを左に */
}

.debug-toggle,
.settings-toggle {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(78, 205, 196, 0.8);
    color: #4ECDC4;
    padding: 10px;
    border-radius: 50%;
    cursor: url('../images/ui/cursor-click.png'), pointer;
    font-size: 20px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.debug-toggle:hover,
.settings-toggle:hover {
    background: rgba(78, 205, 196, 0.2);
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* デバッグメニュー */
.debug-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 999;
    overflow-y: auto;
    border-left: 2px solid rgba(78, 205, 196, 0.8);
}

.debug-menu.active {
    transform: translateX(0);
}

.debug-panel {
    padding: 20px;
    width: 100%;
    height: 100%;
    display: block;
}

.debug-panel h3 {
    color: #fff;
    margin: 0 0 15px 0;
    font-size: 16px;
    text-align: center;
    border-bottom: 1px solid #666;
    padding-bottom: 10px;
}

.scene-skip-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skip-btn {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    transition: all 0.2s ease;
}

.skip-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #999;
    transform: translateX(3px);
}

.skip-btn:active {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(1px);
}

/* 戦闘エフェクト */
.battle-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
}

/* 刀の斬撃線エフェクト */
.slash-line {
    position: absolute;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.9) 20%, 
        rgba(200, 220, 255, 0.8) 50%, 
        rgba(255, 255, 255, 0.9) 80%, 
        transparent 100%);
    border-radius: 2px;
    opacity: 0;
    transform-origin: center;
    animation: slashStrike 0.3s ease-out forwards;
}

@keyframes slashStrike {
    0% {
        opacity: 0;
        transform: scale(0.5, 0.2);
        filter: blur(2px);
    }
    30% {
        opacity: 1;
        transform: scale(1, 1);
        filter: blur(0px);
    }
    100% {
        opacity: 0;
        transform: scale(1.2, 0.8);
        filter: blur(1px);
    }
}

/* 打撃の衝撃波エフェクト */
.impact-wave {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(255, 200, 100, 0.8) 0%, 
        rgba(255, 150, 50, 0.6) 30%, 
        rgba(255, 100, 0, 0.3) 60%, 
        transparent 80%);
    opacity: 0;
    animation: impactExpand 0.4s ease-out forwards;
}

@keyframes impactExpand {
    0% {
        opacity: 0;
        transform: scale(0.1);
        filter: blur(3px);
    }
    50% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }
    100% {
        opacity: 0;
        transform: scale(2.5);
        filter: blur(2px);
    }
}

/* 戦闘パーティクル */
.battle-particle {
    position: absolute;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 200, 150, 0.7) 50%, 
        transparent 100%);
    border-radius: 50%;
    opacity: 0;
    animation: particleFly 0.6s ease-out forwards;
}

@keyframes particleFly {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    20% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* 集中線エフェクト */
.speed-line {
    position: absolute;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.6) 50%, 
        transparent 100%);
    opacity: 0;
    animation: speedLineRush 0.2s ease-out forwards;
}

@keyframes speedLineRush {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(1.5);
    }
}

/* 火花エフェクト */
.spark-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
}

/* 火花の閃光 */
.spark-flash {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 255, 100, 0.8) 30%, 
        rgba(255, 150, 0, 0.5) 60%, 
        transparent 80%);
    border-radius: 50%;
    opacity: 0;
    animation: sparkFlash 0.3s ease-out forwards;
}

@keyframes sparkFlash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

/* 火花パーティクル */
.spark-particle {
    position: absolute;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 200, 0, 0.8) 50%, 
        transparent 100%);
    border-radius: 50%;
    opacity: 0;
    animation: sparkFly 0.6s ease-out forwards;
    transform: translate(-50%, -50%);
}

@keyframes sparkFly {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(0.3);
    }
}

/* 電気の線 */
.spark-line {
    position: absolute;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 255, 100, 0.7) 50%, 
        transparent 100%);
    opacity: 0;
    animation: sparkLine 0.2s ease-out forwards;
    transform-origin: top center;
}

@keyframes sparkLine {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }
    50% {
        opacity: 1;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform: scaleY(1);
    }
}

/* 激しい火花エフェクト */
.intense-spark-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
}

/* 激しい火花の閃光 */
.intense-spark-flash {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 255, 150, 0.9) 20%, 
        rgba(255, 200, 0, 0.8) 40%, 
        rgba(255, 100, 0, 0.6) 60%,
        transparent 80%);
    border-radius: 50%;
    opacity: 0;
    animation: intenseSparkFlash 0.4s ease-out forwards;
}

@keyframes intenseSparkFlash {
    0% {
        opacity: 0;
        transform: scale(0.3);
        filter: brightness(3);
    }
    30% {
        opacity: 1;
        transform: scale(1.8);
        filter: brightness(2.5);
    }
    70% {
        opacity: 0.8;
        transform: scale(2.5);
        filter: brightness(2);
    }
    100% {
        opacity: 0;
        transform: scale(3.5);
        filter: brightness(1);
    }
}

/* 激しい火花パーティクル */
.intense-spark-particle {
    position: absolute;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 220, 0, 0.9) 30%, 
        rgba(255, 150, 0, 0.7) 60%,
        transparent 80%);
    border-radius: 50%;
    opacity: 0;
    animation: intenseSparkParticle 0.8s ease-out forwards;
}

@keyframes intenseSparkParticle {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* 激しい火花の電撃線 */
.intense-spark-line {
    position: absolute;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 255, 255, 1) 20%,
        rgba(255, 200, 0, 0.9) 50%,
        rgba(255, 100, 0, 0.8) 80%,
        transparent 100%);
    height: 3px;
    border-radius: 2px;
    opacity: 0;
    animation: intenseSparkLine 0.5s ease-out forwards;
    filter: blur(0.5px);
}

@keyframes intenseSparkLine {
    0% {
        opacity: 0;
        transform: scaleX(0);
        filter: brightness(2) blur(0.5px);
    }
    30% {
        opacity: 1;
        transform: scaleX(1);
        filter: brightness(3) blur(0.2px);
    }
    70% {
        opacity: 0.8;
        transform: scaleX(1.1);
        filter: brightness(2.5) blur(0.3px);
    }
    100% {
        opacity: 0;
        transform: scaleX(1.2);
        filter: brightness(1) blur(0.5px);
    }
}

/* 封印解除エフェクト */
.seal-release-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 28;
    pointer-events: none;
    overflow: hidden;
}

/* 中心の核となる光 */
.seal-core-light {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%,
        rgba(200, 255, 255, 0.9) 30%,
        rgba(150, 220, 255, 0.7) 60%,
        rgba(100, 180, 255, 0.5) 80%,
        transparent 100%);
    border-radius: 50%;
    animation: sealCoreLight 0.5s ease-in-out forwards;
}

@keyframes sealCoreLight {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
        filter: brightness(2);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: brightness(3);
    }
    60% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.2);
        filter: brightness(2.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
        filter: brightness(1);
    }
}

/* 拡散する光の輪 */
.seal-light-ring {
    position: absolute;
    border: 2px solid rgba(200, 255, 255, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: sealLightRing 0.5s ease-out forwards;
}

@keyframes sealLightRing {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
        border-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0 0 20px rgba(200, 255, 255, 0.8);
    }
    30% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0.8);
        border-color: rgba(200, 255, 255, 0.7);
        box-shadow: 0 0 30px rgba(150, 220, 255, 0.6);
    }
    70% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1.2);
        border-color: rgba(150, 220, 255, 0.5);
        box-shadow: 0 0 40px rgba(100, 180, 255, 0.4);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.8);
        border-color: rgba(100, 180, 255, 0.2);
        box-shadow: 0 0 50px rgba(50, 150, 255, 0.2);
    }
}


/* 光の文様（光線） */
.seal-light-ray {
    position: absolute;
    width: 8px;
    height: 300px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(200, 255, 255, 0.8) 20%,
        rgba(150, 220, 255, 0.6) 50%,
        rgba(100, 180, 255, 0.4) 80%,
        transparent 100%);
    transform-origin: top center;
    border-radius: 2px;
    opacity: 0;
    animation: sealLightRay 0.5s ease-out forwards;
    filter: blur(1px);
}

@keyframes sealLightRay {
    0% {
        opacity: 0;
        transform: scale(0.2, 0.1);
        filter: brightness(2) blur(2px);
    }
    30% {
        opacity: 0.8;
        transform: scale(1, 0.6);
        filter: brightness(1.8) blur(1px);
    }
    70% {
        opacity: 0.6;
        transform: scale(1.1, 1);
        filter: brightness(1.5) blur(0.5px);
    }
    100% {
        opacity: 0;
        transform: scale(1.2, 1.2);
        filter: brightness(1) blur(1px);
    }
}

/* 絵巻光エフェクト */
.scroll-light-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20; /* キャラクター画像の背面に配置 */
    pointer-events: none;
    overflow: hidden;
}

/* 絵巻の光源（中央下部） */
.scroll-core-light {
    position: absolute;
    width: 150px;
    height: 300px;
    left: 50%;
    bottom: 30%;
    transform: translateX(-50%);
    background: linear-gradient(to top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 250, 200, 0.9) 30%,
        rgba(255, 240, 150, 0.8) 60%,
        rgba(255, 220, 100, 0.6) 80%,
        transparent 100%);
    border-radius: 75px;
    animation: scrollCoreLight 2s ease-in-out infinite;
    box-shadow: 0 0 75px rgba(255, 240, 150, 0.8);
}

/* 光の拡散輪 */
.scroll-light-ring {
    position: absolute;
    border: 3px solid rgba(255, 240, 150, 0.7);
    border-radius: 50%;
    transform: translate(-50%, 50%);
    opacity: 0;
    animation: scrollLightRing 1s ease-out forwards;
    box-shadow: 0 0 40px rgba(255, 240, 150, 0.6);
}

/* 上向きの光の柱 */
.scroll-light-beam {
    position: absolute;
    width: 15px;
    height: 500px;
    background: linear-gradient(to top,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 250, 200, 0.8) 30%,
        rgba(255, 240, 150, 0.6) 60%,
        rgba(255, 220, 100, 0.4) 80%,
        transparent 100%);
    transform: translateX(-50%);
    border-radius: 7px;
    opacity: 0;
    animation: scrollLightBeam 1.5s ease-out forwards;
    filter: blur(1px);
}

/* 光の粒子 */
.scroll-light-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(255, 240, 150, 0.9);
    border-radius: 50%;
    opacity: 0;
    animation: scrollLightParticle 2s ease-out forwards;
    box-shadow: 0 0 20px rgba(255, 240, 150, 0.8);
}

/* アニメーション定義 */
@keyframes scrollCoreLight {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 0 75px rgba(255, 240, 150, 0.8);
    }
    50% {
        transform: translateX(-50%) scale(1.1);
        box-shadow: 0 0 125px rgba(255, 240, 150, 1);
    }
}

@keyframes scrollLightRing {
    0% {
        opacity: 0;
        transform: translate(-50%, 50%) scale(0.2);
        border-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 50px rgba(255, 240, 150, 0.9);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, 50%) scale(1);
        border-color: rgba(255, 240, 150, 0.7);
        box-shadow: 0 0 100px rgba(255, 240, 150, 0.6);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 50%) scale(1.2);
        border-color: rgba(255, 220, 100, 0.3);
        box-shadow: 0 0 150px rgba(255, 240, 150, 0.3);
    }
}

@keyframes scrollLightBeam {
    0% {
        opacity: 0;
        height: 0;
        filter: blur(2px);
    }
    30% {
        opacity: 1;
        height: 500px;
        filter: blur(1px);
    }
    100% {
        opacity: 0;
        height: 500px;
        filter: blur(2px);
    }
}

@keyframes scrollLightParticle {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translateY(-250px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-500px) scale(0.3);
    }
}

/* 精霊動物解放エフェクト */
.spirit-animals-liberation-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
}

/* 精霊動物の回転軸 */
.spirit-rotator {
    animation: spiritRotation 2.5s ease-in-out forwards;
    opacity: 0;
}

/* 精霊動物のメインシルエット */
.spirit-animal {
    opacity: 1;
    filter: drop-shadow(0 0 15px currentColor);
    animation: spiritAnimalPulse 0.3s ease-in-out infinite alternate;
}

/* 精霊の軌跡 */
.spirit-trail {
    animation: spiritTrailRotation 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* 精霊の粒子 */
.spirit-particle {
    opacity: 0;
    animation: spiritParticleRotation 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* 解放の光の環 */
.liberation-circle {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 3px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: liberationCircle 1s ease-in-out forwards 1.25s;
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
}

/* 浄化の光 */
.purification-light {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 240, 200, 0.6) 30%,
        rgba(255, 200, 150, 0.4) 60%,
        transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: purificationLight 1s ease-in-out forwards 1.5s;
}

/* 最終解放の粒子 */
.final-liberation-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    opacity: 0;
    animation: finalLiberationParticle 1s ease-out forwards;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

/* 新しいアニメーション定義 */
@keyframes spiritRotation {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.5);
    }
    10% {
        opacity: 1;
        transform: rotate(36deg) scale(1);
    }
    90% {
        opacity: 1;
        transform: rotate(324deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: rotate(360deg) scale(0);
    }
}

@keyframes spiritAnimalPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes spiritTrailRotation {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    20% {
        opacity: 0.8;
        transform: scaleX(0.5);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
    80% {
        opacity: 0.6;
        transform: scaleX(0.8);
    }
    100% {
        opacity: 0;
        transform: scaleX(0);
    }
}

@keyframes spiritParticleRotation {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    25% {
        opacity: 1;
        transform: scale(1.2);
    }
    50% {
        opacity: 1;
        transform: scale(1) translate(10px, -10px);
    }
    75% {
        opacity: 0.7;
        transform: scale(0.8) translate(20px, -20px);
    }
    100% {
        opacity: 0;
        transform: scale(0) translate(30px, -30px);
    }
}

/* 各動物専用の回転アニメーション */
.spirit-rotator-panda {
    animation: spiritRotation 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
}

.spirit-rotator-unicorn {
    animation: spiritRotationUnicorn 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
}

.spirit-rotator-turtle {
    animation: spiritRotationTurtle 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
}

.spirit-rotator-fox {
    animation: spiritRotationFox 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
}

/* ユニコーン - 90度オフセット */
@keyframes spiritRotationUnicorn {
    0% {
        opacity: 0;
        transform: rotate(90deg) scale(0.5);
    }
    10% {
        opacity: 1;
        transform: rotate(126deg) scale(1);
    }
    90% {
        opacity: 1;
        transform: rotate(414deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: rotate(450deg) scale(0);
    }
}

/* 亀 - 180度オフセット */
@keyframes spiritRotationTurtle {
    0% {
        opacity: 0;
        transform: rotate(180deg) scale(0.5);
    }
    10% {
        opacity: 1;
        transform: rotate(216deg) scale(1);
    }
    90% {
        opacity: 1;
        transform: rotate(504deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: rotate(540deg) scale(0);
    }
}

/* 狐 - 270度オフセット */
@keyframes spiritRotationFox {
    0% {
        opacity: 0;
        transform: rotate(270deg) scale(0.5);
    }
    10% {
        opacity: 1;
        transform: rotate(306deg) scale(1);
    }
    90% {
        opacity: 1;
        transform: rotate(594deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: rotate(630deg) scale(0);
    }
}


@keyframes liberationCircle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
        box-shadow: 0 0 60px rgba(255, 255, 255, 0.3);
    }
}

@keyframes purificationLight {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

@keyframes finalLiberationParticle {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    30% {
        opacity: 1;
        transform: scale(1);
    }
    70% {
        opacity: 0.8;
        transform: scale(1.2) translateY(-50px);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) translateY(-150px);
    }
}

/* モーダルのスタイル */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f0f23 0%, #1e1e3e 100%);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(78, 205, 196, 0.5);
    border-radius: 15px;
    padding: 2.5rem;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(78, 205, 196, 0.3);
    animation: modalAppear 0.3s ease-out;
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-content h2 {
    color: #4ecdc4;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    text-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
}

.modal-content p {
    color: #fff;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.modal-hint {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #4ecdc4;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 5px;
}

.modal-hint small {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.modal-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.modal-btn {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
}

.modal-btn-primary {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a3aa 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
}

.modal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 205, 196, 0.5);
}

.modal-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}