/* Story Mode CSS Styles - CACHE BUST v1755200000 - ULTRA PROFESSIONAL VISUAL NOVEL SYSTEM */

/* CACHE TEST - This rule proves new CSS is loaded */
#screen-story-mode {
    /* Add a visible indicator that new CSS is loaded */
    border-top: 3px solid rgba(255, 215, 0, 0.8) !important;
}

/* Fix scrollbar positioning - ensure all containers inside story mode don't create extra scrollbars */
#screen-story-mode * {
    box-sizing: border-box;
}

#screen-story-mode .chapter-list,
#screen-story-mode #chapter-selection-container,
#screen-story-mode #starter-deck-selection-container,
#screen-story-mode #chapter-info-container,
#screen-story-mode #deck-selection-container {
    overflow: visible !important;
    max-height: none !important;
}

/* Enhanced Story Victory Screen Styles */
.story-victory-modal .victory-content.story-victory {
    max-width: 750px;
    max-height: 85vh;
    overflow-y: auto;
    background: linear-gradient(135deg, #1a2332 0%, #2a3f5f 100%);
    border: 2px solid #4a90a4;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    position: relative;
}

/* Victory Particles Container */
.victory-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    border-radius: 15px;
}

/* Story Results Screen Enhancements */
.results-header.defeat-theme {
    background: linear-gradient(135deg, #3d1a1a 0%, #5a2a2a 100%);
    border-color: #8b4545;
}

.story-progress-reward {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: linear-gradient(135deg, #1a332a 0%, #2a5a3f 100%);
    border: 1px solid #4a8a60;
    border-radius: 8px;
    margin-bottom: 10px;
}

.story-progress-reward .reward-label {
    font-weight: bold;
    color: #ffffff;
}

.story-progress-reward .reward-value {
    font-size: 1.2em;
    font-weight: bold;
    color: #4CAF50;
}

.unlocked-content-section {
    margin-top: 15px;
    padding: 15px;
    background: linear-gradient(135deg, #332a1a 0%, #5a4a2a 100%);
    border: 1px solid #8a7a4a;
    border-radius: 8px;
}

.unlocked-content-section h4 {
    margin: 0 0 10px 0;
    color: #FFD700;
    text-align: center;
}

.unlocked-item {
    padding: 5px 10px;
    margin: 5px 0;
    background: rgba(255, 215, 0, 0.1);
    border-left: 3px solid #FFD700;
    color: #ffffff;
    border-radius: 4px;
}

.card-drop-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: linear-gradient(135deg, #1a2332 0%, #2a3f5f 100%);
    border: 2px solid #4a90a4;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin: 5px;
    width: 120px;
}

.card-drop-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 164, 0.3);
}

.card-drop-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 5px;
}

.card-drop-name {
    font-size: 0.9em;
    color: #ffffff;
    text-align: center;
    word-wrap: break-word;
}

/* Story Action Buttons */
#story-next-chapter.primary-button {
    background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
    border: 2px solid #66bb6a;
    color: #ffffff;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

#story-next-chapter.primary-button:hover {
    background: linear-gradient(135deg, #388e3c 0%, #66bb6a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
}

#story-try-again.primary-button {
    background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
    border: 2px solid #ef5350;
    color: #ffffff;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}

#story-try-again.primary-button:hover {
    background: linear-gradient(135deg, #e53935 0%, #ef5350 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(244, 67, 54, 0.4);
}

#story-replay-chapter,
#story-chapter-select,
#story-modify-deck {
    background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
    border: 2px solid #42a5f5;
    color: #ffffff;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 5px;
}

#story-replay-chapter:hover,
#story-chapter-select:hover,
#story-modify-deck:hover {
    background: linear-gradient(135deg, #1e88e5 0%, #42a5f5 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
}

/* Victory particles in results screen */
.results-container .victory-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Enhanced Card Preview Styles */
.reward-cards-section {
    margin-top: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(74, 144, 164, 0.2);
}

.reward-cards-section h5 {
    margin: 0 0 15px;
    color: #4a90a4;
    font-size: 1.1em;
    text-align: center;
}

.reward-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    justify-items: center;
}

.reward-card-preview {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 2px solid rgba(74, 144, 164, 0.3);
    border-radius: 10px;
    padding: 10px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    max-width: 140px;
}

.reward-card-preview:hover {
    transform: translateY(-5px) scale(1.05);
    border-color: #ffd700;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
}

.reward-card-preview.bonus-card {
    border-color: rgba(255, 107, 53, 0.4);
}

.reward-card-preview.bonus-card:hover {
    border-color: #ff6b35;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}

.reward-card-preview.story-card {
    border-color: rgba(76, 175, 80, 0.4);
}

.reward-card-preview.story-card:hover {
    border-color: #4caf50;
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
}

.card-preview-image {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.card-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.card-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.7) 100%);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.reward-card-preview:hover .card-preview-overlay {
    opacity: 1;
}

.card-preview-cost {
    background: rgba(255, 215, 0, 0.9);
    color: #000;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.card-preview-type {
    background: rgba(74, 144, 164, 0.9);
    color: #fff;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-preview-name {
    font-size: 0.85em;
    color: #fff;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.story-victory .victory-header {
    text-align: center;
    padding: 20px 20px 15px;
    background: linear-gradient(135deg, #2d5016 0%, #4a7c59 100%);
    border-radius: 15px 15px 0 0;
    border-bottom: 2px solid #4a90a4;
}

.story-victory .victory-header h2 {
    margin: 0 0 10px;
    font-size: 2.2em;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.story-victory .victory-header h3 {
    margin: 0 0 15px;
    font-size: 1.4em;
    color: #e8f4f8;
    font-weight: normal;
}

.story-victory .performance-rating {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.story-victory .performance-rating.excellent {
    background: linear-gradient(135deg, #ffd700, #ffed4a);
    color: #8b4513;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.story-victory .performance-rating.great {
    background: linear-gradient(135deg, #32cd32, #90ee90);
    color: #006400;
    box-shadow: 0 0 15px rgba(50, 205, 50, 0.5);
}

.story-victory .performance-rating.good {
    background: linear-gradient(135deg, #4169e1, #87ceeb);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(65, 105, 225, 0.5);
}

.story-victory .performance-rating.completed {
    background: linear-gradient(135deg, #9370db, #dda0dd);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(147, 112, 219, 0.5);
}

.story-victory .turn-summary {
    color: #b8d4da;
    font-style: italic;
    font-size: 1em;
}

.story-victory .rewards-section {
    padding: 20px;
}

.story-victory .rewards-section h3 {
    margin: 0 0 20px;
    font-size: 1.6em;
    color: #ffffff;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.story-victory .reward-category {
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(74, 144, 164, 0.3);
}

.story-victory .reward-category h4 {
    margin: 0 0 12px;
    color: #4a90a4;
    font-size: 1.2em;
    border-bottom: 1px solid rgba(74, 144, 164, 0.3);
    padding-bottom: 8px;
}

.story-victory .reward-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.story-victory .reward-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    border-left: 4px solid;
    font-size: 1em;
    font-weight: 500;
}

.story-victory .reward-item.coins {
    border-left-color: #ffd700;
    color: #ffeaa7;
}

.story-victory .reward-item.xp {
    border-left-color: #00b894;
    color: #7bed9f;
}

.story-victory .reward-item.card {
    border-left-color: #fd79a8;
    color: #fab1a0;
}

.story-victory .reward-total {
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(74, 144, 164, 0.2), rgba(74, 144, 164, 0.1));
    border-radius: 10px;
    border: 2px solid #4a90a4;
    text-align: center;
}

.story-victory .total-line {
    font-size: 1.3em;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.story-victory .victory-actions {
    padding: 20px;
    text-align: center;
    border-top: 1px solid rgba(74, 144, 164, 0.3);
}

.story-victory .continue-button {
    background: linear-gradient(135deg, #4a90a4, #2d5016);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.story-victory .continue-button:hover {
    background: linear-gradient(135deg, #5aa0b4, #3d6021);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Animation for victory screen appearance */
.story-victory-modal {
    animation: victoryAppear 0.5s ease-out;
}

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

/* Force all parent containers to not center when story mode is active */
body:has(#screen-story-mode.active),
body.story-mode-active,
#game-container:has(#screen-story-mode.active) {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* Main Story Mode Screen - ENHANCED PREMIUM DESIGN */
#screen-story-mode {
    /* Fixed positioning to be under universal bar */
    position: fixed;
    top: 60px; /* Account for universal bar height */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: calc(100vh - 60px); /* Subtract universal bar height */
    margin: 0;
    padding: 25px;
    background: 
        radial-gradient(ellipse at top, rgba(26, 26, 46, 0.9) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(15, 52, 96, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(22, 33, 62, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    transition: background 1.5s ease-in-out;
    /* Force flex layout starting at top */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    z-index: 1000;
    box-sizing: border-box;
}

#screen-story-mode::after {
    content: "";
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(33, 150, 243, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(76, 175, 80, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
    animation: ambientGlow 10s ease-in-out infinite alternate;
}

@keyframes ambientGlow {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
}

#screen-story-mode.active {
    display: flex !important;
}

/* Visual Novel Background Layer */
#screen-story-mode::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: 1;
    transition: opacity 1s ease-in-out;
}

#screen-story-mode > * {
    position: relative;
    z-index: 2;
}

/* Chapter Theme Backgrounds */
#screen-story-mode.theme-fire {
    background: linear-gradient(135deg, #2e1a1a 0%, #3e1621 50%, #460f34 100%);
}

#screen-story-mode.theme-water {
    background: linear-gradient(135deg, #1a2e2e 0%, #16213e 50%, #0f3460 100%);
}

#screen-story-mode.theme-earth {
    background: linear-gradient(135deg, #2e2e1a 0%, #3e3616 50%, #46340f 100%);
}

#screen-story-mode.theme-shadow {
    background: linear-gradient(135deg, #2e1a2e 0%, #3e1634 50%, #460f46 100%);
}

#screen-story-mode.theme-crossroads {
    background: linear-gradient(135deg, #1a1a2e 0%, #2e1a2e 25%, #1a2e1a 50%, #2e2e1a 75%, #2e1a1a 100%);
}

/* Exit Button */
#exit-story-mode {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
    font-size: 0.9em;
}

#exit-story-mode:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Starter Deck Selection - FIXED POSITIONING */
#starter-deck-selection-container {
    text-align: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 20px 40px;
    /* Force positioning at the top of story mode screen */
    margin-top: 0 !important;
    flex-shrink: 0;
    order: 1;
    position: relative;
    /* Visual styling */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-sizing: border-box;
    align-self: stretch;
}

/* Make sure it's shown when JavaScript sets display: block */
#starter-deck-selection-container[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
}

#starter-deck-selection-container h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#starter-deck-selection-container p {
    font-size: 1.2em;
    margin-bottom: 15px;
    line-height: 1.6;
    color: #e0e0e0;
}

.starter-deck-options {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

.starter-deck-option {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 30px;
    max-width: 400px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.starter-deck-option:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffd700;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.starter-deck-option h3 {
    color: #ffd700;
    font-size: 1.8em;
    margin-bottom: 15px;
}

.starter-deck-option p {
    color: #ccc;
    font-size: 1em;
    margin-bottom: 20px;
}

.select-starter-deck {
    background: linear-gradient(45deg, #ff6b35, #ff8e53);
    border: none;
    color: #fff;
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.select-starter-deck:hover {
    background: linear-gradient(45deg, #ff8e53, #ffab73);
    transform: scale(1.05);
}

/* Character Portraits */
.chapter-portrait {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #ffd700;
    object-fit: cover;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

.chapter-portrait:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}

/* Dialogue System Enhancements */
.dialogue-portrait {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #ffd700;
    object-fit: cover;
    margin-right: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

#dialogue-speaker {
    display: flex;
    align-items: center;
    color: #ffd700;
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.typing-text {
    position: relative;
    overflow: hidden;
}

.typing-text::after {
    content: '▎';
    display: inline-block;
    color: #ffd700;
    margin-left: 3px;
    animation: blink-caret 1s step-end infinite;
    font-weight: bold;
}

@keyframes blink-caret {
    from, to { opacity: 0; }
    50% { opacity: 1; }
}

/* Simplified text effects - voice-over friendly */
.dialogue-text-smooth {
    transition: opacity 0.3s ease-in-out;
}

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

/* Text shadow effects for better readability */
#dialogue-text, #dialogue-speaker {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), 
                 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Enhanced Chapter Selection with Progress Map - PREMIUM VISUAL DESIGN */
#chapter-selection-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 30px 40px;
    /* Force positioning at the top of story mode screen */
    position: relative;
    margin-top: 0 !important;
    margin-bottom: 30px;
    flex-shrink: 0;
    order: -1;
    /* Ensure it appears at top */
    align-self: stretch;
    /* Premium visual styling */
    background: linear-gradient(135deg, 
        rgba(26, 26, 46, 0.95) 0%, 
        rgba(22, 33, 62, 0.92) 50%, 
        rgba(15, 52, 96, 0.95) 100%);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: visible;
    box-sizing: border-box;
}

#chapter-selection-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 215, 0, 0.8) 20%, 
        rgba(255, 215, 0, 1) 50%, 
        rgba(255, 215, 0, 0.8) 80%, 
        transparent 100%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* When explicitly shown by JavaScript */
#chapter-selection-container.story-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Progress Overview Section */
.progress-overview {
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(74, 144, 164, 0.1), rgba(45, 80, 22, 0.1));
    border: 1px solid rgba(74, 144, 164, 0.3);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.progress-overview::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4a90a4, #2d5016, #4a90a4);
    animation: progressGlow 3s ease-in-out infinite;
}

@keyframes progressGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.progress-header h3 {
    color: #4a90a4;
    font-size: 1.8em;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.progress-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.progress-stats .stat {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.stat.completed {
    color: #4caf50;
    border-color: rgba(76, 175, 80, 0.5);
}

.stat.unlocked {
    color: #2196f3;
    border-color: rgba(33, 150, 243, 0.5);
}

.stat.percentage {
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.5);
}

.progress-bar-container {
    position: relative;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #2196f3, #ffd700);
    border-radius: 6px;
    transition: width 1s ease-out;
    position: relative;
}

.progress-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressShimmer 2s infinite;
}

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

.progress-milestones {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
    pointer-events: none;
}

.milestone {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.milestone.completed {
    background: #4caf50;
    border-color: #4caf50;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

/* Enhanced Chapter Items */
.chapter-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.chapter-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 25px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px;
    overflow: hidden;
    min-height: 120px;
}

.chapter-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chapter-item:hover::before {
    opacity: 1;
}

.chapter-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    position: relative;
}

.chapter-number .number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.chapter-number .number.completed {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    color: white;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
}

.chapter-number .number.unlocked {
    background: linear-gradient(135deg, #2196f3, #42a5f5);
    color: white;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);
}

.chapter-number .number.locked {
    background: rgba(158, 158, 158, 0.3);
    color: #999;
    border: 2px solid rgba(158, 158, 158, 0.5);
}

.chapter-number .chapter-text {
    font-size: 0.8em;
    color: #ccc;
    text-align: center;
}

.difficulty-indicator {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
}

.difficulty-stars {
    font-size: 1.2em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.chapter-portrait-container {
    position: relative;
    flex-shrink: 0;
}

.completion-overlay {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 3;
}

.chapter-rewards-preview {
    margin-top: 15px;
    padding: 12px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    border-left: 4px solid #ffd700;
}

.rewards-title {
    font-size: 0.9em;
    color: #ffd700;
    margin-bottom: 8px;
    font-weight: bold;
}

.rewards-items {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.rewards-items span {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.chapter-connector {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 30px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.chapter-connector.completed {
    background: linear-gradient(to bottom, #4caf50, #66bb6a);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
}

.chapter-connector.active {
    background: linear-gradient(to bottom, #2196f3, #42a5f5);
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.4);
}

.chapter-connector.locked {
    background: rgba(158, 158, 158, 0.3);
}

/* Chapter States */
.chapter-item.current {
    border-color: #ffd700;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
}

.chapter-item.current::after {
    content: "⚡";
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.5em;
    color: #ffd700;
    animation: currentChapterPulse 2s ease-in-out infinite;
}

@keyframes currentChapterPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.chapter-item.chapter-selecting {
    transform: scale(0.98);
    border-color: #4a90a4;
    box-shadow: 0 0 30px rgba(74, 144, 164, 0.5);
}

/* Theme-based Chapter Styling */
.chapter-item.theme-fire {
    border-left: 6px solid #ff6b35;
}

.chapter-item.theme-water {
    border-left: 6px solid #2196f3;
}

.chapter-item.theme-earth {
    border-left: 6px solid #8bc34a;
}

.chapter-item.theme-shadow {
    border-left: 6px solid #9c27b0;
}

.chapter-item.theme-crossroads {
    border-left: 6px solid #ff9800;
}

/* Make sure it's shown when JavaScript sets display: block */
#chapter-selection-container[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
}

#chapter-selection-container h2 {
    text-align: center;
    font-size: 3em;
    color: #ffd700;
    margin-bottom: 15px;
    font-weight: 800;
    text-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(255, 215, 0, 0.5),
        0 0 40px rgba(255, 215, 0, 0.3);
    letter-spacing: 1px;
    position: relative;
}

#chapter-selection-container h2::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 215, 0, 0.8), 
        transparent);
    border-radius: 2px;
}

#chapter-selection-container>p {
    text-align: center;
    font-size: 1.2em;
    color: #e0e0e0;
    margin-bottom: 40px;
}

.chapter-list {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    padding: 20px 0;
    width: 100%;
}

.chapter-item {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.chapter-item::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: left 0.6s ease;
    pointer-events: none;
}

.chapter-content {
    flex: 1;
}

/* Chapter 9 Special Choice UI */
.chapter-choice-container {
    margin-top: 30px;
    text-align: center;
}

.opponent-choices {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.opponent-choice {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    padding: 20px;
    max-width: 300px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}

.opponent-choice:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffd700;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.opponent-choice img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #ffd700;
    object-fit: cover;
    margin-bottom: 15px;
}

.opponent-choice h4 {
    color: #ffd700;
    font-size: 1.3em;
    margin-bottom: 10px;
}

.opponent-choice p {
    color: #ccc;
    font-size: 0.9em;
    margin-bottom: 15px;
}

.select-opponent {
    background: linear-gradient(45deg, #4caf50, #66bb6a);
    border: none;
    color: #fff;
    padding: 12px 25px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.select-opponent:hover {
    background: linear-gradient(45deg, #66bb6a, #81c784);
    transform: scale(1.05);
}

.chapter-item.unlocked:hover {
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.15) 0%, 
        rgba(255, 255, 255, 0.15) 50%, 
        rgba(255, 215, 0, 0.1) 100%);
    border-color: rgba(255, 215, 0, 0.6);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.chapter-item.unlocked:hover::before {
    left: 0;
}

.chapter-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(100, 100, 100, 0.1);
}

.chapter-item.completed {
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
}

.chapter-item h3 {
    color: #ffd700;
    font-size: 1.6em;
    margin-bottom: 12px;
    font-weight: 700;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(255, 215, 0, 0.3);
    letter-spacing: 0.5px;
}

.chapter-item p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 16px;
    line-height: 1.6;
    font-size: 1.05em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.chapter-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.9em;
}

.chapter-meta .opponent {
    color: #ff6b6b;
    font-weight: bold;
}

.chapter-meta .difficulty {
    color: #ffd700;
    font-weight: bold;
}

.chapter-meta .status.completed {
    color: #4caf50;
    font-weight: bold;
}

.chapter-meta .status.locked {
    color: #999;
}

/* Chapter Info - ENHANCED PRE-BATTLE SETUP */
#chapter-info-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 50px 40px;
    text-align: center;
    background: linear-gradient(135deg, 
        rgba(26, 26, 46, 0.95) 0%, 
        rgba(22, 33, 62, 0.92) 50%, 
        rgba(15, 52, 96, 0.95) 100%);
    border-radius: 20px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(255, 215, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    align-self: stretch;
}

#chapter-info-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 215, 0, 0.8) 25%, 
        rgba(255, 215, 0, 1) 50%, 
        rgba(255, 215, 0, 0.8) 75%, 
        transparent 100%);
    animation: chapterInfoGlow 3s ease-in-out infinite;
}

@keyframes chapterInfoGlow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

#chapter-info-container h2 {
    color: #ffd700;
    font-size: 2.8em;
    margin-bottom: 25px;
    font-weight: 800;
    text-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.7),
        0 0 15px rgba(255, 215, 0, 0.5),
        0 0 30px rgba(255, 215, 0, 0.3);
    letter-spacing: 1px;
    position: relative;
}

#chapter-info-container h2::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 215, 0, 0.8), 
        transparent);
    border-radius: 1px;
}

#chapter-info-container p {
    color: #e0e0e0;
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 20px;
}

#chapter-opponent,
#chapter-difficulty {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.08) 100%);
    padding: 20px;
    border-radius: 12px;
    margin: 15px 0;
    font-size: 1.2em;
    border: 2px solid rgba(255, 215, 0, 0.2);
    backdrop-filter: blur(5px);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

#chapter-opponent:hover,
#chapter-difficulty:hover {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        0 0 15px rgba(255, 215, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

#chapter-opponent span,
#chapter-difficulty span {
    color: #ffd700;
    font-weight: bold;
}

#chapter-rewards {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    text-align: left;
}

#chapter-rewards h4 {
    color: #ffd700;
    margin-bottom: 10px;
    font-size: 1.3em;
}

#rewards-list {
    list-style: none;
    padding: 0;
}

#rewards-list li {
    padding: 5px 0;
    color: #4caf50;
    font-weight: bold;
}

#rewards-list li:before {
    content: "✓ ";
    color: #4caf50;
    margin-right: 5px;
}

/* Deck Selection for Battle - PREMIUM DESIGN */
#deck-selection-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 50px 40px;
    background: linear-gradient(135deg, 
        rgba(26, 26, 46, 0.95) 0%, 
        rgba(22, 33, 62, 0.92) 50%, 
        rgba(15, 52, 96, 0.95) 100%);
    border-radius: 20px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(255, 215, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    align-self: stretch;
}

#deck-selection-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 215, 0, 0.8) 25%, 
        rgba(255, 215, 0, 1) 50%, 
        rgba(255, 215, 0, 0.8) 75%, 
        transparent 100%);
    animation: deckSelectionGlow 3s ease-in-out infinite;
}

@keyframes deckSelectionGlow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

#deck-selection-container h2 {
    text-align: center;
    color: #ffd700;
    font-size: 2.8em;
    margin-bottom: 15px;
    font-weight: 800;
    text-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.7),
        0 0 15px rgba(255, 215, 0, 0.5),
        0 0 30px rgba(255, 215, 0, 0.3);
    letter-spacing: 1px;
    position: relative;
}

#deck-selection-container h2::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 215, 0, 0.8), 
        transparent);
    border-radius: 2px;
}

#deck-selection-container>p {
    text-align: center;
    color: #e0e0e0;
    font-size: 1.2em;
    margin-bottom: 30px;
}

.deck-selection-list {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    padding: 25px 0;
    width: 100%;
}

.deck-option {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 6px 25px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.deck-option::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: left 0.6s ease;
    pointer-events: none;
}

.deck-option:hover {
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.15) 0%, 
        rgba(255, 255, 255, 0.18) 50%, 
        rgba(255, 215, 0, 0.1) 100%);
    border-color: rgba(255, 215, 0, 0.6);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.25),
        0 0 25px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.deck-option:hover::before {
    left: 0;
}

.deck-option h3 {
    color: #ffd700;
    margin-bottom: 15px;
    font-size: 1.6em;
    font-weight: 700;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(255, 215, 0, 0.3);
    letter-spacing: 0.5px;
}

.deck-option p {
    color: #ccc;
    margin-bottom: 15px;
}

.select-deck {
    background: linear-gradient(135deg, #4caf50, #66bb6a, #81c784);
    border: none;
    color: #fff;
    padding: 16px 30px;
    border-radius: 25px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 100%;
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 
        0 4px 15px rgba(76, 175, 80, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.select-deck::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.4s ease;
    transform: translate(-50%, -50%);
}

.select-deck:hover {
    background: linear-gradient(135deg, #66bb6a, #81c784, #a5d6a7);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 8px 25px rgba(76, 175, 80, 0.5),
        0 0 20px rgba(76, 175, 80, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.select-deck:hover::before {
    width: 300px;
    height: 300px;
}

/* Enhanced Visual Novel Dialogue System - CINEMATIC DESIGN */
#story-dialogue-area {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: 
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%),
        linear-gradient(135deg, rgba(26, 26, 46, 0.6), rgba(15, 52, 96, 0.6));
    backdrop-filter: blur(8px);
    z-index: 1500;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    animation: dialogueAreaFadeIn 0.5s ease-out;
    padding: 0;
}

@keyframes dialogueAreaFadeIn {
    from { 
        opacity: 0; 
        backdrop-filter: blur(0px);
    }
    to { 
        opacity: 1; 
        backdrop-filter: blur(20px);
    }
}

.dialogue-box {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 25px 40px;
    display: flex;
    align-items: center;
    gap: 25px;
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.95) 0%, 
        rgba(26, 26, 46, 0.92) 50%, 
        rgba(0, 0, 0, 0.95) 100%);
    border-radius: 0;
    border: none;
    border-top: 3px solid rgba(255, 215, 0, 0.8);
    box-shadow: 
        0 -10px 30px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    animation: dialogueBoxSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-height: 120px;
}

@keyframes dialogueBoxSlideUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dialogueBoxSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dialogue-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 215, 0, 0.8) 25%, 
        rgba(255, 215, 0, 1) 50%, 
        rgba(255, 215, 0, 0.8) 75%, 
        transparent 100%);
    animation: dialogueTopGlow 2s ease-in-out infinite alternate;
}

@keyframes dialogueTopGlow {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

/* Character Portrait Section */
.dialogue-portrait-container {
    flex-shrink: 0;
    position: relative;
}

.dialogue-portrait {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #ffd700;
    object-fit: cover;
    box-shadow: 
        0 4px 15px rgba(255, 215, 0, 0.5),
        0 0 10px rgba(255, 215, 0, 0.3),
        inset 0 0 0 2px rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
    background: linear-gradient(135deg, #2a2a4a, #1a1a3a);
    position: relative;
    animation: portraitPulse 3s ease-in-out infinite;
}

@keyframes portraitPulse {
    0%, 100% { 
        box-shadow: 
            0 10px 30px rgba(255, 215, 0, 0.5),
            0 0 20px rgba(255, 215, 0, 0.3),
            inset 0 0 0 2px rgba(255, 255, 255, 0.1);
    }
    50% { 
        box-shadow: 
            0 12px 35px rgba(255, 215, 0, 0.7),
            0 0 25px rgba(255, 215, 0, 0.5),
            inset 0 0 0 2px rgba(255, 255, 255, 0.2);
    }
}

.dialogue-portrait:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.6);
}

.dialogue-portrait.speaking {
    animation: portraitGlow 2s ease-in-out infinite alternate;
}

@keyframes portraitGlow {
    from { box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4); }
    to { box-shadow: 0 8px 35px rgba(255, 215, 0, 0.8); }
}

/* Text Content Section */
.dialogue-content {
    flex: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#dialogue-speaker {
    color: #ffd700;
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 12px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    gap: 10px;
}

#dialogue-speaker::before {
    content: "►";
    color: #ffd700;
    font-size: 0.8em;
    opacity: 0.7;
}

#dialogue-text {
    color: #fff;
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.08) 0%, 
        rgba(255, 255, 255, 0.03) 100%);
    padding: 20px 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-left: 4px solid #ffd700;
    flex: 1;
    position: relative;
    backdrop-filter: blur(8px);
    text-shadow: 
        1px 1px 3px rgba(0, 0, 0, 0.7),
        0 0 8px rgba(0, 0, 0, 0.3);
    min-height: 60px;
    display: flex;
    align-items: center;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.2);
    font-weight: 400;
    letter-spacing: 0.3px;
}

#dialogue-text::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
    border-radius: 15px;
    z-index: -1;
}

/* Continue Button - PREMIUM DESIGN */
#dialogue-continue-button {
    background: linear-gradient(135deg, #2196f3, #42a5f5, #64b5f6);
    border: none;
    color: #fff;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    align-self: flex-end;
    font-size: 1em;
    box-shadow: 
        0 4px 15px rgba(33, 150, 243, 0.4),
        0 0 15px rgba(33, 150, 243, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    margin-left: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

#dialogue-continue-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
}

#dialogue-continue-button:hover {
    background: linear-gradient(135deg, #42a5f5, #64b5f6, #90caf9);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 8px 25px rgba(33, 150, 243, 0.6),
        0 0 30px rgba(33, 150, 243, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#dialogue-continue-button:hover::before {
    width: 300px;
    height: 300px;
}

#dialogue-continue-button:active {
    transform: translateY(0);
}

/* Visual Novel Skip/Auto Controls */
.dialogue-controls {
    position: absolute;
    top: 15px;
    right: 20px;
    display: flex;
    gap: 10px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.dialogue-controls:hover {
    opacity: 1;
}

.dialogue-control-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dialogue-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .dialogue-box {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
        width: 95%;
    }
    
    .dialogue-portrait {
        width: 100px;
        height: 100px;
        align-self: center;
    }
    
    #dialogue-speaker {
        justify-content: center;
        font-size: 1.3em;
    }
    
    #dialogue-text {
        font-size: 1.1em;
        padding: 25px;
        min-height: 100px;
    }
    
    #dialogue-continue-button {
        align-self: center;
        padding: 15px 30px;
        font-size: 1.1em;
    }
}

/* Victory/Defeat Modals */
.story-victory-modal,
.story-defeat-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    animation: modalFadeIn 0.3s ease-out forwards;
}

.story-defeat-modal.defeat-entered {
    opacity: 1;
}

.story-defeat-modal.defeat-exiting {
    animation: modalFadeOut 0.3s ease-in forwards;
}

.victory-content,
.defeat-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #ffd700;
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    max-width: 500px;
    color: #fff;
    animation: modalSlideIn 0.3s ease-out;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.story-defeat-modal.defeat-entered .defeat-content {
    transform: scale(1);
}

/* Enhanced Defeat Screen Styles */
.defeat-content.enhanced-defeat {
    max-width: 600px;
    background: linear-gradient(135deg, #2a1a1a 0%, #3e1621 50%, #461634 100%);
    border: 2px solid #d32f2f;
    box-shadow: 0 20px 40px rgba(211, 47, 47, 0.3);
}

.defeat-header {
    margin-bottom: 25px;
    position: relative;
}

.defeat-icon {
    font-size: 4em;
    margin-bottom: 10px;
    opacity: 0.8;
    animation: defeatIconPulse 2s ease-in-out infinite;
}

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

.defeat-header h2 {
    color: #f44336;
    font-size: 2.2em;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.defeat-header h3 {
    color: #ffcdd2;
    font-size: 1.4em;
    font-weight: normal;
    margin-bottom: 0;
}

.defeat-message {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(211, 47, 47, 0.3);
}

.defeat-main {
    font-size: 1.1em;
    color: #fff;
    margin-bottom: 15px;
    line-height: 1.5;
}

.defeat-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 193, 7, 0.1);
    border-left: 4px solid #ffc107;
    padding: 12px;
    border-radius: 8px;
    margin-top: 15px;
}

.tip-icon {
    font-size: 1.5em;
    color: #ffc107;
}

.defeat-tip p {
    margin: 0;
    color: #fff3c4;
    font-size: 0.95em;
    font-style: italic;
}

.defeat-motivation {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 25px;
    border: 1px solid rgba(156, 39, 176, 0.3);
}

.motivation-text {
    font-size: 1em;
    color: #e1bee7;
    font-style: italic;
    margin: 0;
    line-height: 1.4;
}

.victory-content h2 {
    color: #4caf50;
    font-size: 2.5em;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.defeat-content h2 {
    color: #f44336;
    font-size: 2.5em;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.rewards-display {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.rewards-display h3 {
    color: #ffd700;
    margin-bottom: 15px;
}

.rewards-display ul {
    list-style: none;
    padding: 0;
}

.rewards-display li {
    color: #4caf50;
    font-weight: bold;
    padding: 5px 0;
}

.defeat-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.continue-button,
.retry-button,
.return-button {
    padding: 15px 30px;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1em;
}

.continue-button,
.retry-button {
    background: linear-gradient(45deg, #4caf50, #66bb6a);
    color: #fff;
}

.return-button.secondary {
    background: linear-gradient(45deg, #757575, #9e9e9e);
    color: #fff;
}

.continue-button:hover,
.retry-button:hover {
    background: linear-gradient(45deg, #66bb6a, #81c784);
    transform: scale(1.05);
}

.return-button:hover {
    background: linear-gradient(45deg, #9e9e9e, #bdbdbd);
    transform: scale(1.05);
}

/* Animations */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }

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

@keyframes modalFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(5px);
    }
}

@keyframes modalFadeOut {
    from {
        opacity: 1;
        backdrop-filter: blur(5px);
    }
    to {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

/* Back buttons */
#back-to-chapters,
#back-to-chapter-info {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

#back-to-chapters:hover,
#back-to-chapter-info:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Enhanced Story Transition Effects */
.story-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    backdrop-filter: blur(0px);
    overflow: hidden;
}

.story-transition-overlay.active {
    opacity: 1;
    backdrop-filter: blur(8px);
}

.story-transition-overlay.exiting {
    opacity: 0;
    backdrop-filter: blur(0px);
    transition: all 0.5s ease-out;
}

/* Theme-based transition overlays */
.story-transition-overlay.storyChapter {
    background: radial-gradient(circle, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.9) 100%);
}

.story-transition-overlay.battleStart {
    background: linear-gradient(45deg, rgba(139, 69, 19, 0.8), rgba(0, 0, 0, 0.9));
    animation: battlePulse 0.8s ease-in-out;
}

.story-transition-overlay.victoryReturn {
    background: radial-gradient(circle, rgba(76, 175, 80, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
}

/* Theme-specific overlay colors */
.story-transition-overlay.theme-fire {
    background: radial-gradient(circle, rgba(255, 107, 53, 0.4) 0%, rgba(139, 69, 19, 0.8) 70%, rgba(0, 0, 0, 0.9) 100%);
}

.story-transition-overlay.theme-water {
    background: radial-gradient(circle, rgba(33, 150, 243, 0.4) 0%, rgba(13, 71, 161, 0.8) 70%, rgba(0, 0, 0, 0.9) 100%);
}

.story-transition-overlay.theme-earth {
    background: radial-gradient(circle, rgba(139, 195, 74, 0.4) 0%, rgba(76, 175, 80, 0.8) 70%, rgba(0, 0, 0, 0.9) 100%);
}

.story-transition-overlay.theme-shadow {
    background: radial-gradient(circle, rgba(156, 39, 176, 0.4) 0%, rgba(74, 20, 140, 0.8) 70%, rgba(0, 0, 0, 0.9) 100%);
}

.story-transition-overlay.theme-crossroads {
    background: conic-gradient(from 0deg, 
        rgba(255, 107, 53, 0.3) 0deg, 
        rgba(33, 150, 243, 0.3) 90deg, 
        rgba(139, 195, 74, 0.3) 180deg, 
        rgba(156, 39, 176, 0.3) 270deg, 
        rgba(255, 107, 53, 0.3) 360deg),
        radial-gradient(circle, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
}

/* Transition particles */
.transition-particle {
    position: absolute;
    pointer-events: none;
    user-select: none;
    font-size: 1.5em;
    opacity: 0.8;
    z-index: 1;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-40px) rotate(180deg) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translateY(-80px) rotate(360deg) scale(0.8);
        opacity: 0;
    }
}

@keyframes battlePulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.02);
        filter: brightness(1.2);
    }
}

/* Scene transition compatibility */
.scene-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0,0,0,0.9), rgba(0,0,0,0.7));
    z-index: 2500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out;
}

.scene-transition-overlay.active {
    opacity: 1;
}

/* Enhanced screen transitions for story mode */
.screen.story-mode-screen {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.screen.story-chapter-entering {
    opacity: 0;
    transform: translateX(100px) scale(1.1);
}

.screen.story-chapter-exiting {
    opacity: 0;
    transform: translateX(-100px) scale(0.9);
}

.screen.battle-entering {
    opacity: 0;
    transform: scale(1.5) rotate(2deg);
}

.screen.battle-exiting {
    opacity: 0;
    transform: scale(0) rotate(-2deg);
}

.screen.victory-entering {
    opacity: 0;
    transform: translateY(30px) scale(1.05);
}

.screen.victory-exiting {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
}

/* Character Name Display Enhancements */
.character-intro-nameplate {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(45deg, rgba(255,215,0,0.9), rgba(255,215,0,0.7));
    color: #000;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 1.2em;
    box-shadow: 0 4px 15px rgba(255,215,0,0.3);
    z-index: 1600;
    opacity: 0;
    animation: nameplateFadeIn 1s ease-out 0.5s forwards;
}

@keyframes nameplateFadeIn {
    from { 
        opacity: 0; 
        transform: translateX(-50%) translateY(20px);
    }
    to { 
        opacity: 1; 
        transform: translateX(-50%) translateY(0);
    }
}

/* Enhanced Particle Effects */
.chapter-theme-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.fire-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #ff6b35, #ff8e53);
    border-radius: 50%;
    animation: fireFloat 4s infinite ease-in-out;
}

.water-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #2196f3, #42a5f5);
    border-radius: 50%;
    animation: waterFlow 5s infinite ease-in-out;
}

.earth-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, #8d6e63, #a1887f);
    border-radius: 50%;
    animation: earthSway 6s infinite ease-in-out;
}

@keyframes fireFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
    50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
}

@keyframes waterFlow {
    0%, 100% { transform: translateX(0px) translateY(0px); opacity: 0.6; }
    50% { transform: translateX(15px) translateY(-15px); opacity: 1; }
}

@keyframes earthSway {
    0%, 100% { transform: translateX(0px); opacity: 0.5; }
    50% { transform: translateX(-10px); opacity: 0.8; }
}

/* Enhanced Dialogue System */

/* Chapter Selection Enhancements */
.chapter-item:hover .chapter-portrait {
    transform: scale(1.15);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}

.chapter-unlock-animation {
    animation: unlockPulse 1s ease-out;
}

@keyframes unlockPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 215, 0, 0.7); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 215, 0, 0.7); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 215, 0, 0.7); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .starter-deck-options {
        flex-direction: column;
        align-items: center;
    }

    .starter-deck-option {
        max-width: 100%;
    }

    .chapter-list {
        grid-template-columns: 1fr;
    }

    .chapter-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .chapter-portrait {
        align-self: center;
    }

    .opponent-choices {
        flex-direction: column;
        align-items: center;
    }

    .opponent-choice {
        max-width: 250px;
    }

    .deck-selection-list {
        grid-template-columns: 1fr;
    }

    .defeat-actions {
        flex-direction: column;
    }

    #exit-story-mode {
        top: 10px;
        right: 10px;
        padding: 8px 15px;
        font-size: 0.9em;
    }

    .dialogue-portrait {
        width: 40px;
        height: 40px;
    }

    #dialogue-speaker {
        font-size: 1.1em;
    }

    #dialogue-text {
        font-size: 1em;
    }
}

/* ===== VOICE ACTING CONTROLS ===== */

/* Enhanced Dialogue Controls for Voice Acting */
.dialogue-control-btn {
    min-width: 60px;
    text-align: center;
}

/* Voice Control Buttons */
.dialogue-control-btn.voice-toggle {
    background: linear-gradient(135deg, #4a90a4, #2d5016);
}

.dialogue-control-btn.voice-toggle.disabled {
    background: rgba(139, 139, 139, 0.3);
    color: #999;
}

.dialogue-control-btn.voice-stop {
    background: linear-gradient(135deg, #d32f2f, #b71c1c);
}

.dialogue-control-btn.voice-replay {
    background: linear-gradient(135deg, #388e3c, #2e7d32);
}

/* Voice Volume Slider */
.voice-volume-container {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.voice-volume-slider {
    width: 80px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.voice-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #4a90a4;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.voice-volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #4a90a4;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Voice Status Indicator */
.voice-status-indicator {
    position: absolute;
    top: 10px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    color: #fff;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.voice-status-indicator.visible {
    opacity: 1;
    transform: translateY(0);
}

.voice-status-indicator.playing {
    background: linear-gradient(135deg, rgba(74, 144, 164, 0.9), rgba(45, 80, 22, 0.9));
}

.voice-status-indicator.error {
    background: linear-gradient(135deg, rgba(211, 47, 47, 0.9), rgba(183, 28, 28, 0.9));
}

/* Voice Status Icon Animation */
.voice-status-icon {
    font-size: 1.1em;
    animation: voicePulse 1.5s ease-in-out infinite alternate;
}

@keyframes voicePulse {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

/* ==========================================
   ULTRA PREMIUM VISUAL NOVEL TRANSFORMATION 
   30+ Professional Enhancements for Immersive Experience
   ========================================== */

/* 1. ATMOSPHERIC BACKGROUND SYSTEM WITH LAYERED PARALLAX */
.visual-novel-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    overflow: hidden;
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-layer {
    position: absolute;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-layer-1 { 
    z-index: -3; 
    animation: parallaxSlow 20s ease-in-out infinite alternate;
}

.bg-layer-2 { 
    z-index: -2; 
    opacity: 0.7;
    animation: parallaxMedium 15s ease-in-out infinite alternate;
}

.bg-layer-3 { 
    z-index: -1; 
    opacity: 0.4;
    animation: parallaxFast 10s ease-in-out infinite alternate;
}

@keyframes parallaxSlow {
    from { transform: translateX(-2%) translateY(-1%); }
    to { transform: translateX(2%) translateY(1%); }
}

@keyframes parallaxMedium {
    from { transform: translateX(-3%) translateY(-2%); }
    to { transform: translateX(3%) translateY(2%); }
}

@keyframes parallaxFast {
    from { transform: translateX(-5%) translateY(-3%); }
    to { transform: translateX(5%) translateY(3%); }
}

/* 2. PREMIUM ATMOSPHERIC OVERLAYS */
.atmosphere-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -5;
    pointer-events: none;
    transition: opacity 1.5s ease;
}

.atmosphere-overlay.dawn {
    background: radial-gradient(ellipse at center bottom, 
                rgba(255, 183, 77, 0.3) 0%, 
                rgba(255, 138, 101, 0.2) 25%, 
                rgba(74, 144, 226, 0.1) 70%, 
                transparent 100%);
}

.atmosphere-overlay.dusk {
    background: linear-gradient(to bottom,
                rgba(138, 43, 226, 0.2) 0%,
                rgba(74, 20, 140, 0.3) 50%,
                rgba(0, 0, 0, 0.4) 100%);
}

.atmosphere-overlay.night {
    background: radial-gradient(ellipse at center top,
                rgba(25, 25, 112, 0.4) 0%,
                rgba(0, 0, 0, 0.6) 70%,
                rgba(0, 0, 0, 0.8) 100%);
}

.atmosphere-overlay.mystical {
    background: conic-gradient(from 0deg at 50% 50%,
                rgba(138, 43, 226, 0.2) 0deg,
                rgba(74, 144, 226, 0.15) 90deg,
                rgba(233, 30, 99, 0.2) 180deg,
                rgba(156, 39, 176, 0.25) 270deg,
                rgba(138, 43, 226, 0.2) 360deg);
    animation: mysticalRotate 30s linear infinite;
}

@keyframes mysticalRotate {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
}

/* 3. ENHANCED CHARACTER PORTRAIT SYSTEM */
.character-display-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

.character-portrait-advanced {
    position: absolute;
    bottom: 0;
    width: 400px;
    height: 600px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

.character-portrait-advanced.left {
    left: -50px;
    transform-origin: bottom left;
}

.character-portrait-advanced.center {
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    height: 650px;
}

.character-portrait-advanced.right {
    right: -50px;
    transform-origin: bottom right;
}

.character-portrait-advanced.speaking {
    filter: drop-shadow(0 10px 30px rgba(255, 215, 0, 0.4))
            drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
    animation: characterPulse 2s ease-in-out infinite alternate;
}

.character-portrait-advanced.thinking {
    opacity: 0.7;
    filter: grayscale(20%) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}

@keyframes characterPulse {
    from { 
        transform: scale(1); 
        filter: drop-shadow(0 10px 30px rgba(255, 215, 0, 0.4))
                drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
    }
    to { 
        transform: scale(1.02); 
        filter: drop-shadow(0 12px 35px rgba(255, 215, 0, 0.6))
                drop-shadow(0 0 25px rgba(255, 215, 0, 0.5));
    }
}

/* 4. CINEMATIC DIALOGUE BOX - GLASS MORPHISM */
#story-dialogue-area {
    background: 
        linear-gradient(135deg, 
            rgba(0, 0, 0, 0.1) 0%, 
            rgba(25, 25, 60, 0.2) 50%,
            rgba(0, 0, 0, 0.3) 100%),
        radial-gradient(ellipse at center bottom,
            rgba(100, 150, 255, 0.1) 0%,
            transparent 70%);
    backdrop-filter: blur(20px) saturate(1.5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dialogue-box {
    background: 
        linear-gradient(135deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(15, 15, 40, 0.9) 25%,
            rgba(25, 25, 60, 0.85) 75%,
            rgba(0, 0, 0, 0.9) 100%),
        radial-gradient(ellipse at center,
            rgba(255, 215, 0, 0.05) 0%,
            transparent 60%);
    backdrop-filter: blur(25px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px 25px 0 0;
    box-shadow: 
        0 -10px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 100px rgba(100, 150, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.dialogue-box::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 215, 0, 0.4) 10%,
        rgba(100, 150, 255, 0.6) 50%,
        rgba(255, 215, 0, 0.4) 90%,
        transparent 100%);
    height: 3px;
    animation: dialogueShimmer 3s ease-in-out infinite;
}

@keyframes dialogueShimmer {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* 5. TYPEWRITER TEXT ANIMATION */
.typewriter-text {
    overflow: hidden;
    white-space: pre-wrap;
    animation: typewriterCursor 1s infinite;
}

.typewriter-text::after {
    content: '|';
    color: rgba(255, 215, 0, 0.8);
    animation: cursorBlink 1s infinite;
    margin-left: 2px;
}

.typewriter-text.complete::after {
    display: none;
}

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

.text-reveal {
    animation: textReveal 0.05s ease-in-out forwards;
    opacity: 0;
}

@keyframes textReveal {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 6. PREMIUM CHARACTER NAME DISPLAY */
#dialogue-speaker {
    position: relative;
    background: linear-gradient(135deg,
                rgba(255, 215, 0, 0.2) 0%,
                rgba(255, 215, 0, 0.1) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 15px 15px 0 0;
    padding: 12px 20px;
    margin: -25px -25px 15px -25px;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

#dialogue-speaker::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 215, 0, 0.3) 50%,
                transparent 100%);
    animation: nameShimmer 2s ease-in-out infinite;
}

@keyframes nameShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

#dialogue-speaker::after {
    content: '►';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 215, 0, 0.6);
    font-size: 0.8em;
    animation: speakerArrow 1.5s ease-in-out infinite;
}

@keyframes speakerArrow {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(3px); }
}

/* 7. ENHANCED DIALOGUE TEXT STYLING */
#dialogue-text {
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.03) 0%,
                rgba(100, 150, 255, 0.02) 50%,
                rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(100, 150, 255, 0.15);
    border-radius: 18px;
    padding: 25px 30px;
    font-size: 1.3em;
    line-height: 1.7;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    position: relative;
    overflow: hidden;
    min-height: 80px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(5px);
}

#dialogue-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom,
                rgba(255, 215, 0, 0.8) 0%,
                rgba(100, 150, 255, 0.6) 50%,
                rgba(255, 215, 0, 0.8) 100%);
    animation: textBorderPulse 2s ease-in-out infinite alternate;
}

@keyframes textBorderPulse {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

/* 8. PREMIUM CONTROL BUTTONS */
.visual-novel-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 12px;
    z-index: 100;
}

.vn-control-btn {
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(100, 150, 255, 0.1) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 12px 18px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    min-width: 70px;
    text-align: center;
}

.vn-control-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.4s ease;
    transform: translate(-50%, -50%);
}

.vn-control-btn:hover {
    background: linear-gradient(135deg,
                rgba(100, 150, 255, 0.3) 0%,
                rgba(138, 43, 226, 0.2) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(100, 150, 255, 0.3);
    border-color: rgba(100, 150, 255, 0.4);
}

.vn-control-btn:hover::before {
    width: 200px;
    height: 200px;
}

.vn-control-btn.active {
    background: linear-gradient(135deg,
                rgba(255, 215, 0, 0.3) 0%,
                rgba(255, 193, 7, 0.2) 100%);
    border-color: rgba(255, 215, 0, 0.5);
    color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* 9. ENHANCED CONTINUE BUTTON */
#dialogue-continue-button {
    background: linear-gradient(135deg,
                rgba(100, 150, 255, 0.9) 0%,
                rgba(74, 144, 226, 0.8) 50%,
                rgba(138, 43, 226, 0.9) 100%);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 15px 35px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 6px 20px rgba(100, 150, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#dialogue-continue-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.4) 50%,
                transparent 100%);
    transition: left 0.6s ease;
}

#dialogue-continue-button:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 12px 30px rgba(100, 150, 255, 0.6),
        0 0 40px rgba(138, 43, 226, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

#dialogue-continue-button:hover::before {
    left: 100%;
}

#dialogue-continue-button:active {
    transform: translateY(-2px) scale(1.02);
}

/* 10. AMBIENT PARTICLE SYSTEM */
.particle-system {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.story-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(255, 215, 0, 0.8) 0%,
                rgba(255, 215, 0, 0.3) 70%,
                transparent 100%);
    animation: particleFloat 8s linear infinite;
}

.story-particle.large {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle,
                rgba(100, 150, 255, 0.6) 0%,
                rgba(100, 150, 255, 0.2) 70%,
                transparent 100%);
    animation: particleFloatLarge 12s linear infinite;
}

.story-particle.magical {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle,
                rgba(138, 43, 226, 0.8) 0%,
                rgba(233, 30, 99, 0.4) 50%,
                transparent 100%);
    animation: particleSpiral 10s linear infinite;
}

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

@keyframes particleFloatLarge {
    0% {
        transform: translateY(100vh) translateX(0) scale(0.5);
        opacity: 0;
    }
    20% { opacity: 1; transform: translateY(80vh) translateX(20px) scale(1); }
    80% { opacity: 1; transform: translateY(20vh) translateX(-20px) scale(1); }
    100% {
        transform: translateY(-10vh) translateX(-40px) scale(0.5);
        opacity: 0;
    }
}

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

/* 11. SCENE TRANSITION SYSTEM */
.scene-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.scene-transition-overlay.fade-in {
    background: linear-gradient(45deg,
                rgba(0, 0, 0, 0.9) 0%,
                rgba(25, 25, 60, 0.7) 50%,
                rgba(0, 0, 0, 0.9) 100%);
    opacity: 1;
    pointer-events: all;
}

.scene-transition-overlay.fade-out {
    opacity: 0;
}

.transition-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    animation: transitionTextReveal 1.5s ease-in-out;
}

@keyframes transitionTextReveal {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(30px);
    }
    30%, 70% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-30px);
    }
}

/* 12. CHAPTER PROGRESS INDICATOR */
.chapter-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
                rgba(255, 215, 0, 0.8) 0%,
                rgba(100, 150, 255, 0.6) 50%,
                rgba(138, 43, 226, 0.8) 100%);
    width: 0%;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.8) 100%);
    animation: progressShine 2s ease-in-out infinite;
}

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

/* 13. DIALOGUE HISTORY PANEL */
.dialogue-history-panel {
    position: fixed;
    top: 80px;
    left: -400px;
    width: 380px;
    height: calc(100vh - 200px);
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.9) 0%,
                rgba(15, 15, 40, 0.95) 100%);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 20px 20px 0;
    box-shadow: 
        5px 0 30px rgba(0, 0, 0, 0.5),
        inset -1px 0 0 rgba(255, 215, 0, 0.2);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    overflow: hidden;
}

.dialogue-history-panel.open {
    left: 0;
}

.history-header {
    padding: 20px;
    background: linear-gradient(135deg,
                rgba(255, 215, 0, 0.15) 0%,
                rgba(100, 150, 255, 0.1) 100%);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-close {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.history-content {
    height: calc(100% - 80px);
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 215, 0, 0.3) transparent;
}

.history-entry {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease;
}

.history-entry:hover {
    background: rgba(255, 255, 255, 0.03);
}

.history-speaker {
    color: rgba(255, 215, 0, 0.9);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.history-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

/* 14. AUTO-PLAY SYSTEM */
.auto-play-controls {
    position: fixed;
    bottom: 140px;
    right: 20px;
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(25, 25, 60, 0.7) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 150;
}

.auto-play-controls.visible {
    opacity: 1;
    transform: translateX(0);
}

.auto-play-toggle {
    background: linear-gradient(135deg,
                rgba(76, 175, 80, 0.8) 0%,
                rgba(56, 142, 60, 0.7) 100%);
    border: 1px solid rgba(76, 175, 80, 0.5);
    border-radius: 10px;
    padding: 10px 15px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 80px;
}

.auto-play-toggle:hover {
    background: linear-gradient(135deg,
                rgba(76, 175, 80, 1) 0%,
                rgba(56, 142, 60, 0.9) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.auto-play-toggle.active {
    background: linear-gradient(135deg,
                rgba(255, 193, 7, 0.8) 0%,
                rgba(255, 152, 0, 0.7) 100%);
    border-color: rgba(255, 193, 7, 0.5);
}

.auto-play-speed {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
}

.speed-label {
    min-width: 45px;
    text-transform: uppercase;
    font-weight: 500;
}

.speed-slider {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: rgba(100, 150, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.speed-slider::-webkit-slider-thumb:hover {
    background: rgba(100, 150, 255, 1);
    transform: scale(1.2);
}

/* 15. VOICE INDICATOR ANIMATIONS */
.voice-indicator {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg,
                rgba(100, 150, 255, 0.8) 0%,
                rgba(138, 43, 226, 0.6) 100%);
    border: 1px solid rgba(100, 150, 255, 0.5);
    border-radius: 20px;
    padding: 8px 15px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 500;
    backdrop-filter: blur(10px);
}

.voice-indicator.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.voice-waveform {
    display: flex;
    align-items: center;
    gap: 2px;
}

.wave-bar {
    width: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    animation: waveAnimation 1.2s ease-in-out infinite;
}

.wave-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.wave-bar:nth-child(2) { height: 12px; animation-delay: 0.1s; }
.wave-bar:nth-child(3) { height: 6px; animation-delay: 0.2s; }
.wave-bar:nth-child(4) { height: 10px; animation-delay: 0.3s; }

@keyframes waveAnimation {
    0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* 16. BACKGROUND MUSIC CONTROLS */
.music-controls {
    position: fixed;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.7) 0%,
                rgba(25, 25, 60, 0.6) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0.7;
    transition: all 0.3s ease;
    z-index: 100;
}

.music-controls:hover {
    opacity: 1;
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(25, 25, 60, 0.7) 100%);
}

.music-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.music-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.music-toggle.playing {
    background: linear-gradient(135deg,
                rgba(76, 175, 80, 0.3) 0%,
                rgba(56, 142, 60, 0.2) 100%);
    border-color: rgba(76, 175, 80, 0.5);
    animation: musicPulse 2s ease-in-out infinite alternate;
}

@keyframes musicPulse {
    from { box-shadow: 0 0 10px rgba(76, 175, 80, 0.3); }
    to { box-shadow: 0 0 20px rgba(76, 175, 80, 0.6); }
}

.music-volume {
    width: 80px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.music-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: rgba(255, 215, 0, 0.9);
    border-radius: 50%;
    cursor: pointer;
}

/* 17. SAVE/LOAD SYSTEM UI */
.save-load-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.save-load-panel.open {
    opacity: 1;
    pointer-events: all;
}

.save-load-content {
    background: linear-gradient(135deg,
                rgba(15, 15, 40, 0.95) 0%,
                rgba(25, 25, 60, 0.9) 100%);
    border: 2px solid rgba(100, 150, 255, 0.3);
    border-radius: 20px;
    padding: 30px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.save-load-panel.open .save-load-content {
    transform: scale(1);
}

.save-load-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}

.save-load-title {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.save-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.save-slot {
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.05) 0%,
                rgba(100, 150, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

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

.save-slot:hover {
    background: linear-gradient(135deg,
                rgba(100, 150, 255, 0.1) 0%,
                rgba(138, 43, 226, 0.05) 100%);
    border-color: rgba(100, 150, 255, 0.3);
    transform: translateY(-2px);
}

.save-slot:hover::before {
    left: 100%;
}

.save-slot.empty {
    border-style: dashed;
    opacity: 0.6;
}

.slot-preview {
    width: 100%;
    height: 60px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.slot-info {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.slot-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-top: 5px;
}

/* 18. CHOICE SELECTION SYSTEM */
.choice-container {
    position: fixed;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    z-index: 200;
    opacity: 0;
    transform: translateX(-50%) translateY(50px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.choice-container.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.choice-prompt {
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.9) 0%,
                rgba(25, 25, 60, 0.8) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.choice-question {
    color: rgba(255, 215, 0, 0.9);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.choice-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.choice-option {
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.08) 0%,
                rgba(100, 150, 255, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    padding: 20px 25px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-align: center;
    backdrop-filter: blur(10px);
}

.choice-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
                transparent 0%,
                rgba(100, 150, 255, 0.2) 50%,
                transparent 100%);
    transition: left 0.6s ease;
}

.choice-option:hover {
    background: linear-gradient(135deg,
                rgba(100, 150, 255, 0.2) 0%,
                rgba(138, 43, 226, 0.15) 100%);
    border-color: rgba(100, 150, 255, 0.4);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 8px 25px rgba(100, 150, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

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

.choice-option.selected {
    background: linear-gradient(135deg,
                rgba(255, 215, 0, 0.3) 0%,
                rgba(255, 193, 7, 0.2) 100%);
    border-color: rgba(255, 215, 0, 0.6);
    animation: choiceSelected 0.5s ease;
}

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

/* 19. CHARACTER EMOTION OVERLAY EFFECTS */
.emotion-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.emotion-overlay.happy {
    background: radial-gradient(ellipse at center,
                rgba(255, 215, 0, 0.1) 0%,
                rgba(255, 193, 7, 0.05) 30%,
                transparent 70%);
    animation: happyPulse 2s ease-in-out infinite alternate;
}

.emotion-overlay.sad {
    background: linear-gradient(to bottom,
                rgba(74, 144, 226, 0.1) 0%,
                rgba(63, 81, 181, 0.15) 50%,
                transparent 100%);
    animation: sadRain 3s linear infinite;
}

.emotion-overlay.angry {
    background: radial-gradient(ellipse at center,
                rgba(244, 67, 54, 0.15) 0%,
                rgba(211, 47, 47, 0.1) 40%,
                transparent 70%);
    animation: angryFlicker 0.3s ease-in-out infinite;
}

.emotion-overlay.mysterious {
    background: conic-gradient(from 0deg at 50% 50%,
                rgba(138, 43, 226, 0.1) 0deg,
                rgba(156, 39, 176, 0.15) 120deg,
                rgba(233, 30, 99, 0.1) 240deg,
                rgba(138, 43, 226, 0.1) 360deg);
    animation: mysteriousSwirl 8s linear infinite;
}

@keyframes happyPulse {
    from { opacity: 0.3; }
    to { opacity: 0.6; }
}

@keyframes sadRain {
    0% { transform: translateY(-10px); opacity: 0.2; }
    100% { transform: translateY(10px); opacity: 0.4; }
}

@keyframes angryFlicker {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.4; }
}

@keyframes mysteriousSwirl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 20. SCREEN SHAKE AND IMPACT EFFECTS */
.screen-shake {
    animation: screenShake 0.5s ease-in-out;
}

.screen-shake.intense {
    animation: screenShakeIntense 0.8s ease-in-out;
}

@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-5px); }
    20% { transform: translateX(5px); }
    30% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    50% { transform: translateX(-2px); }
    60% { transform: translateX(2px); }
    70% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
    90% { transform: translateX(0); }
}

@keyframes screenShakeIntense {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-8px, 2px); }
    20% { transform: translate(8px, -2px); }
    30% { transform: translate(-6px, -2px); }
    40% { transform: translate(6px, 2px); }
    50% { transform: translate(-4px, 2px); }
    60% { transform: translate(4px, -2px); }
    70% { transform: translate(-2px, -1px); }
    80% { transform: translate(2px, 1px); }
    90% { transform: translate(-1px, 0); }
}

.impact-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    animation: impactFlash 0.2s ease-out;
}

@keyframes impactFlash {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* 21. WEATHER AND ENVIRONMENTAL EFFECTS */
.weather-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.rain-effect {
    background: linear-gradient(180deg,
                transparent 0%,
                rgba(74, 144, 226, 0.1) 50%,
                transparent 100%);
    animation: rainFall 1s linear infinite;
}

.rain-drop {
    position: absolute;
    width: 2px;
    height: 15px;
    background: linear-gradient(to bottom,
                transparent 0%,
                rgba(74, 144, 226, 0.6) 100%);
    border-radius: 0 0 2px 2px;
    animation: rainDrop 0.8s linear infinite;
}

@keyframes rainFall {
    0% { transform: translateY(-10px); opacity: 0.3; }
    100% { transform: translateY(10px); opacity: 0.1; }
}

@keyframes rainDrop {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

.snow-effect {
    background: radial-gradient(ellipse at center,
                rgba(255, 255, 255, 0.05) 0%,
                transparent 70%);
}

.snowflake {
    position: absolute;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    animation: snowFall 8s linear infinite;
}

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

.wind-effect {
    background: linear-gradient(45deg,
                rgba(255, 255, 255, 0.03) 0%,
                transparent 50%,
                rgba(255, 255, 255, 0.03) 100%);
    animation: windBlow 4s ease-in-out infinite alternate;
}

@keyframes windBlow {
    0% { transform: translateX(-20px); }
    100% { transform: translateX(20px); }
}

/* 22. DIALOGUE SPEED AND FONT CONTROLS */
.text-controls-panel {
    position: fixed;
    top: 80px;
    right: -250px;
    width: 230px;
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.9) 0%,
                rgba(15, 15, 40, 0.95) 100%);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px 0 0 20px;
    padding: 20px;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
}

.text-controls-panel.open {
    right: 0;
}

.text-control-group {
    margin-bottom: 20px;
}

.text-control-label {
    color: rgba(255, 215, 0, 0.9);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.text-speed-slider,
.font-size-slider {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.text-speed-slider::-webkit-slider-thumb,
.font-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg,
                rgba(100, 150, 255, 0.9) 0%,
                rgba(138, 43, 226, 0.7) 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(100, 150, 255, 0.4);
    transition: all 0.3s ease;
}

.text-speed-slider::-webkit-slider-thumb:hover,
.font-size-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(100, 150, 255, 0.6);
}

.text-preset-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.preset-btn {
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.08) 0%,
                rgba(100, 150, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.preset-btn:hover {
    background: linear-gradient(135deg,
                rgba(100, 150, 255, 0.2) 0%,
                rgba(138, 43, 226, 0.1) 100%);
    border-color: rgba(100, 150, 255, 0.3);
    color: #ffffff;
}

.preset-btn.active {
    background: linear-gradient(135deg,
                rgba(255, 215, 0, 0.3) 0%,
                rgba(255, 193, 7, 0.2) 100%);
    border-color: rgba(255, 215, 0, 0.5);
    color: #ffffff;
}

/* 23. CHARACTER RELATIONSHIP METERS */
.relationship-panel {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(25, 25, 60, 0.7) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 15px;
    max-width: 280px;
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.relationship-panel.visible {
    opacity: 1;
    transform: translateX(0);
}

.relationship-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.relationship-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.5);
    background-size: cover;
    background-position: center;
}

.relationship-info {
    flex: 1;
}

.relationship-name {
    color: rgba(255, 215, 0, 0.9);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
}

.relationship-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.relationship-fill {
    height: 100%;
    background: linear-gradient(90deg,
                rgba(244, 67, 54, 0.8) 0%,
                rgba(255, 193, 7, 0.8) 50%,
                rgba(76, 175, 80, 0.8) 100%);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.relationship-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    animation: relationshipShine 2s ease-in-out infinite;
}

@keyframes relationshipShine {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* 24. SCENE GALLERY PREVIEW */
.scene-gallery-trigger {
    position: fixed;
    bottom: 20px;
    right: 80px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg,
                rgba(138, 43, 226, 0.8) 0%,
                rgba(156, 39, 176, 0.6) 100%);
    border: 2px solid rgba(138, 43, 226, 0.5);
    border-radius: 50%;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.scene-gallery-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
}

/* 25. ACHIEVEMENT NOTIFICATIONS */
.achievement-notification {
    position: fixed;
    top: -100px;
    right: 20px;
    width: 320px;
    background: linear-gradient(135deg,
                rgba(76, 175, 80, 0.9) 0%,
                rgba(56, 142, 60, 0.8) 100%);
    border: 2px solid rgba(76, 175, 80, 0.6);
    border-radius: 15px;
    padding: 20px;
    color: #ffffff;
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1500;
}

.achievement-notification.show {
    top: 80px;
    animation: achievementPulse 0.6s ease;
}

.achievement-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.achievement-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    animation: achievementIconSpin 2s linear infinite;
}

.achievement-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.achievement-description {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.4;
    margin: 0;
}

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

@keyframes achievementIconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 26. ACCESSIBILITY FEATURES */
.accessibility-panel {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100vh;
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.95) 0%,
                rgba(15, 15, 40, 0.9) 100%);
    backdrop-filter: blur(25px);
    border-left: 2px solid rgba(100, 150, 255, 0.3);
    padding: 30px 20px;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1200;
    overflow-y: auto;
}

.accessibility-panel.open {
    right: 0;
}

.accessibility-option {
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.accessibility-label {
    color: rgba(255, 215, 0, 0.9);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.accessibility-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    margin-bottom: 12px;
    line-height: 1.4;
}

.accessibility-toggle {
    width: 50px;
    height: 26px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.accessibility-toggle.active {
    background: linear-gradient(135deg,
                rgba(76, 175, 80, 0.8) 0%,
                rgba(56, 142, 60, 0.6) 100%);
}

.accessibility-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.accessibility-toggle.active::after {
    left: 26px;
}

/* 27. MOBILE RESPONSIVE ENHANCEMENTS */
@media (max-width: 768px) {
    .visual-novel-controls {
        top: 10px;
        right: 10px;
        gap: 8px;
    }
    
    .vn-control-btn {
        padding: 8px 12px;
        font-size: 12px;
        min-width: 50px;
    }
    
    .dialogue-history-panel {
        width: 100vw;
        left: -100vw;
        top: 0;
        height: 100vh;
        border-radius: 0;
    }
    
    .choice-container {
        width: 95%;
        bottom: 150px;
    }
    
    .choice-option {
        padding: 15px 20px;
        font-size: 14px;
    }
    
    .character-portrait-advanced {
        width: 300px;
        height: 450px;
    }
    
    .character-portrait-advanced.center {
        width: 350px;
        height: 500px;
    }
    
    .music-controls {
        top: 10px;
        left: 10px;
        padding: 8px;
        gap: 8px;
    }
    
    .auto-play-controls {
        bottom: 120px;
        right: 10px;
        padding: 12px;
    }
    
    .relationship-panel {
        bottom: 10px;
        left: 10px;
        max-width: 250px;
    }
    
    .achievement-notification {
        width: 280px;
        right: 10px;
        top: 60px;
    }
    
    .text-controls-panel {
        width: 100vw;
        right: -100vw;
        top: 0;
        height: 100vh;
        border-radius: 0;
    }
}

/* 28. DYNAMIC LIGHTING EFFECTS */
.character-lighting {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity 1s ease;
}

.character-lighting.active {
    opacity: 1;
}

.light-spotlight {
    background: radial-gradient(ellipse at center,
                rgba(255, 255, 255, 0.2) 0%,
                rgba(255, 255, 255, 0.1) 30%,
                transparent 70%);
    animation: lightFlicker 3s ease-in-out infinite alternate;
}

.light-sunset {
    background: linear-gradient(135deg,
                rgba(255, 183, 77, 0.15) 0%,
                rgba(255, 138, 101, 0.1) 50%,
                transparent 100%);
}

.light-moonlight {
    background: radial-gradient(ellipse at center top,
                rgba(173, 216, 230, 0.2) 0%,
                rgba(135, 206, 235, 0.1) 40%,
                transparent 80%);
}

@keyframes lightFlicker {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* 29. CONTEXTUAL SOUND EFFECT TRIGGERS */
.sound-trigger {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(100, 150, 255, 0.3);
    border: 2px solid rgba(100, 150, 255, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: soundRipple 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes soundRipple {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* 30. FULL-SCREEN MODE TOGGLE */
.fullscreen-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 2000;
}

.fullscreen-toggle:hover {
    background: rgba(100, 150, 255, 0.3);
    border-color: rgba(100, 150, 255, 0.5);
    transform: scale(1.1);
}

/* 31. KEYBOARD SHORTCUTS OVERLAY */
.shortcuts-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.9) 0%,
                rgba(15, 15, 40, 0.95) 100%);
    backdrop-filter: blur(25px);
    border: 2px solid rgba(100, 150, 255, 0.3);
    border-radius: 20px;
    padding: 30px;
    color: #ffffff;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 500px;
}

.shortcuts-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.shortcuts-title {
    color: rgba(255, 215, 0, 0.9);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shortcut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.shortcut-key {
    background: rgba(100, 150, 255, 0.2);
    border: 1px solid rgba(100, 150, 255, 0.4);
    border-radius: 6px;
    padding: 4px 8px;
    font-family: monospace;
    font-size: 14px;
    font-weight: 600;
}

.shortcut-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

/* 32. VISUAL NOVEL SETTINGS PANEL */
.vn-settings-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-settings-panel.open {
    opacity: 1;
    pointer-events: all;
}

.vn-settings-content {
    background: linear-gradient(135deg,
                rgba(15, 15, 40, 0.95) 0%,
                rgba(25, 25, 60, 0.9) 100%);
    border: 2px solid rgba(100, 150, 255, 0.3);
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-settings-panel.open .vn-settings-content {
    transform: scale(1);
}

.settings-section {
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-section-title {
    color: rgba(255, 215, 0, 0.9);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.setting-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
}

.setting-control {
    min-width: 120px;
    display: flex;
    justify-content: flex-end;
}

/* 33. SCENE MEMORY/FLASHBACK EFFECTS */
.flashback-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(45deg,
                rgba(138, 43, 226, 0.3) 0%,
                rgba(156, 39, 176, 0.2) 50%,
                rgba(138, 43, 226, 0.3) 100%);
    z-index: 8;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
    filter: sepia(20%) saturate(0.8);
}

.flashback-overlay.active {
    opacity: 1;
    animation: flashbackPulse 4s ease-in-out infinite alternate;
}

@keyframes flashbackPulse {
    0% { 
        filter: sepia(20%) saturate(0.8) brightness(0.9);
        opacity: 0.7;
    }
    100% { 
        filter: sepia(30%) saturate(0.6) brightness(1.1);
        opacity: 1;
    }
}

.memory-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at center,
                transparent 0%,
                rgba(138, 43, 226, 0.4) 50%,
                rgba(0, 0, 0, 0.8) 100%);
    z-index: 9000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.memory-transition.active {
    opacity: 1;
    animation: memorySwirl 3s ease-in-out;
}

@keyframes memorySwirl {
    0% { transform: scale(0.5) rotate(0deg); }
    50% { transform: scale(1.2) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}

/* 11. CHARACTER VOICE INDICATOR ANIMATIONS */
.vn-voice-indicator {
    position: absolute;
    top: -40px;
    left: 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg,
                rgba(120, 119, 198, 0.9) 0%,
                rgba(162, 155, 254, 0.8) 100%);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateY(10px);
    animation: voiceAppear 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 250;
}

.vn-voice-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    position: relative;
}

.vn-voice-waves {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.vn-voice-wave {
    width: 3px;
    background: linear-gradient(to top, #7877c6, #a29bfe);
    border-radius: 2px;
    animation: voiceWave 0.8s infinite ease-in-out;
}

.vn-voice-wave:nth-child(1) {
    height: 8px;
    animation-delay: 0s;
}

.vn-voice-wave:nth-child(2) {
    height: 12px;
    animation-delay: 0.1s;
}

.vn-voice-wave:nth-child(3) {
    height: 16px;
    animation-delay: 0.2s;
}

.vn-voice-wave:nth-child(4) {
    height: 12px;
    animation-delay: 0.3s;
}

@keyframes voiceAppear {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes voiceWave {
    0%, 100% {
        transform: scaleY(0.4);
        opacity: 0.6;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.vn-voice-text {
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: 500;
}

.vn-voice-indicator.speaking {
    animation: voicePulse 2s infinite ease-in-out;
}

@keyframes voicePulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(120, 119, 198, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(120, 119, 198, 0.6);
    }
}

/* 12. IMMERSIVE BACKGROUND MUSIC CONTROLS */
.vn-music-controls {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 200;
}

.vn-music-toggle {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(25, 25, 60, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(120, 119, 198, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.vn-music-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
                transparent 0%,
                rgba(120, 119, 198, 0.3) 50%,
                transparent 100%);
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-music-toggle:hover::before {
    left: 100%;
}

.vn-music-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(120, 119, 198, 0.5);
    border-color: rgba(120, 119, 198, 0.6);
}

.vn-music-icon {
    font-size: 20px;
    color: #7877c6;
    z-index: 1;
    transition: color 0.3s ease;
}

.vn-music-toggle.playing .vn-music-icon {
    color: #a29bfe;
    animation: musicPulse 2s infinite ease-in-out;
}

@keyframes musicPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.vn-volume-slider {
    width: 50px;
    height: 120px;
    background: linear-gradient(180deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(25, 25, 60, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(120, 119, 198, 0.3);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.vn-volume-slider.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.vn-volume-track {
    width: 4px;
    height: 80px;
    background: rgba(120, 119, 198, 0.3);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.vn-volume-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top,
                #7877c6 0%,
                #a29bfe 100%);
    border-radius: 2px;
    height: 70%;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-volume-handle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: #a29bfe;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(120, 119, 198, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    bottom: 70%;
    margin-bottom: -6px;
}

.vn-volume-handle:hover {
    transform: translateX(-50%) scale(1.2);
    box-shadow: 0 4px 15px rgba(120, 119, 198, 0.6);
}

/* 13. SAVE/LOAD SYSTEM UI INTEGRATION */
.vn-save-system {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 10px;
    z-index: 200;
}

.vn-save-button, .vn-load-button {
    padding: 10px 20px;
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(25, 25, 60, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(120, 119, 198, 0.3);
    border-radius: 15px;
    color: #e2e2e2;
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.vn-save-button::before, .vn-load-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
                transparent 0%,
                rgba(120, 119, 198, 0.2) 50%,
                transparent 100%);
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-save-button:hover::before, .vn-load-button:hover::before {
    left: 100%;
}

.vn-save-button:hover, .vn-load-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(120, 119, 198, 0.3);
    border-color: rgba(120, 119, 198, 0.6);
}

.vn-save-button:active, .vn-load-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(120, 119, 198, 0.2);
}

.vn-save-icon, .vn-load-icon {
    margin-right: 8px;
    font-size: 14px;
}

/* Save/Load Modal Overlay */
.vn-save-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-save-modal.visible {
    opacity: 1;
    visibility: visible;
}

.vn-save-panel {
    width: 600px;
    max-height: 70vh;
    background: linear-gradient(135deg,
                rgba(15, 15, 40, 0.95) 0%,
                rgba(25, 25, 60, 0.95) 100%);
    backdrop-filter: blur(25px);
    border-radius: 20px;
    border: 1px solid rgba(120, 119, 198, 0.3);
    padding: 30px;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-save-modal.visible .vn-save-panel {
    transform: scale(1);
}

.vn-save-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.vn-save-slot {
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.6) 0%,
                rgba(25, 25, 60, 0.8) 100%);
    border-radius: 15px;
    border: 1px solid rgba(120, 119, 198, 0.2);
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-save-slot:hover {
    border-color: rgba(120, 119, 198, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(120, 119, 198, 0.2);
}

.vn-save-slot.empty {
    border: 2px dashed rgba(120, 119, 198, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    color: rgba(120, 119, 198, 0.6);
    font-family: 'Playfair Display', serif;
    font-size: 14px;
}

.vn-save-preview {
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    color: #e2e2e2;
}

.vn-save-chapter {
    color: #7877c6;
    font-weight: 600;
    margin-bottom: 5px;
}

.vn-save-date {
    color: #a0a0a0;
    font-size: 10px;
    margin-top: 5px;
}

/* 15. CHOICE SELECTION SYSTEM WITH BRANCHING */
.vn-choices-container {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 80%;
    z-index: 300;
    opacity: 0;
    transform: translateX(-50%) translateY(50px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-choices-container.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.vn-choice-option {
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.9) 0%,
                rgba(25, 25, 60, 0.95) 50%,
                rgba(40, 40, 80, 0.9) 100%);
    backdrop-filter: blur(25px);
    border: 2px solid rgba(120, 119, 198, 0.3);
    border-radius: 20px;
    padding: 20px 30px;
    color: #e2e2e2;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-align: center;
    min-width: 300px;
}

.vn-choice-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
                transparent 0%,
                rgba(120, 119, 198, 0.3) 50%,
                transparent 100%);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.vn-choice-option:hover {
    transform: scale(1.05) translateY(-5px);
    border-color: rgba(120, 119, 198, 0.7);
    box-shadow: 0 10px 30px rgba(120, 119, 198, 0.4);
    background: linear-gradient(135deg,
                rgba(25, 25, 60, 0.95) 0%,
                rgba(40, 40, 80, 0.95) 50%,
                rgba(60, 60, 100, 0.9) 100%);
}

.vn-choice-option:active {
    transform: scale(0.98) translateY(-2px);
    box-shadow: 0 5px 15px rgba(120, 119, 198, 0.3);
}

.vn-choice-number {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #7877c6, #a29bfe);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    font-weight: bold;
    margin-right: 15px;
    color: #ffffff;
}

.vn-choice-text {
    display: inline;
}

.vn-choice-consequence {
    display: block;
    font-size: 12px;
    color: #a0a0a0;
    margin-top: 8px;
    font-style: italic;
    opacity: 0.8;
}

/* Choice Selection Animation */
.vn-choice-option.selecting {
    animation: choiceSelect 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    border-color: #fd79a8;
    box-shadow: 0 0 30px rgba(253, 121, 168, 0.6);
}

@keyframes choiceSelect {
    0% {
        transform: scale(1.05) translateY(-5px);
    }
    50% {
        transform: scale(1.1) translateY(-10px);
        background: linear-gradient(135deg,
                    rgba(253, 121, 168, 0.9) 0%,
                    rgba(162, 155, 254, 0.9) 100%);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 0;
    }
}

/* 16. CHARACTER EMOTION OVERLAY EFFECTS */
.vn-emotion-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 150;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-emotion-overlay.visible {
    opacity: 1;
}

.vn-emotion-overlay.happy {
    background: radial-gradient(circle at center,
                transparent 0%,
                rgba(255, 223, 0, 0.1) 30%,
                rgba(255, 193, 7, 0.2) 60%,
                transparent 100%);
    animation: happyPulse 2s infinite ease-in-out;
}

.vn-emotion-overlay.sad {
    background: radial-gradient(circle at center,
                transparent 0%,
                rgba(59, 130, 246, 0.1) 30%,
                rgba(37, 99, 235, 0.15) 60%,
                transparent 100%);
    animation: sadRipple 3s infinite ease-in-out;
}

.vn-emotion-overlay.angry {
    background: radial-gradient(circle at center,
                transparent 0%,
                rgba(239, 68, 68, 0.15) 30%,
                rgba(220, 38, 38, 0.2) 60%,
                transparent 100%);
    animation: angerFlicker 1.5s infinite ease-in-out;
}

.vn-emotion-overlay.surprised {
    background: radial-gradient(circle at center,
                transparent 0%,
                rgba(168, 85, 247, 0.1) 30%,
                rgba(147, 51, 234, 0.15) 60%,
                transparent 100%);
    animation: surpriseBurst 0.5s ease-out;
}

.vn-emotion-overlay.love {
    background: radial-gradient(circle at center,
                transparent 0%,
                rgba(253, 121, 168, 0.1) 30%,
                rgba(244, 63, 94, 0.15) 60%,
                transparent 100%);
    animation: loveGlow 2.5s infinite ease-in-out;
}

@keyframes happyPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.6; }
}

@keyframes sadRipple {
    0% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.2); opacity: 0.4; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes angerFlicker {
    0%, 100% { opacity: 0.2; }
    10%, 30%, 50%, 70%, 90% { opacity: 0.5; }
    20%, 40%, 60%, 80% { opacity: 0.1; }
}

@keyframes surpriseBurst {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.3); opacity: 0.8; }
    100% { transform: scale(1); opacity: 0.3; }
}

@keyframes loveGlow {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    33% { transform: scale(1.05); opacity: 0.4; }
    66% { transform: scale(1.1); opacity: 0.6; }
}

/* Emotion Particles */
.vn-emotion-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.vn-emotion-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat 3s infinite linear;
}

.vn-emotion-particles.happy .vn-emotion-particle {
    background: radial-gradient(circle, #ffd700, #ffb347);
    animation-duration: 2s;
}

.vn-emotion-particles.love .vn-emotion-particle {
    background: radial-gradient(circle, #ff69b4, #ff1493);
    animation-duration: 2.5s;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(90vh) translateX(10px) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateY(10vh) translateX(-10px) scale(0.8);
    }
    100% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
}

/* 17. SCREEN SHAKE AND IMPACT EFFECTS */
.vn-screen-shake {
    animation: screenShake 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-screen-shake.intense {
    animation: screenShakeIntense 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-screen-shake.subtle {
    animation: screenShakeSubtle 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-3px) translateY(2px); }
    20% { transform: translateX(3px) translateY(-2px); }
    30% { transform: translateX(-2px) translateY(3px); }
    40% { transform: translateX(2px) translateY(-1px); }
    50% { transform: translateX(-1px) translateY(2px); }
    60% { transform: translateX(3px) translateY(-3px); }
    70% { transform: translateX(-3px) translateY(1px); }
    80% { transform: translateX(2px) translateY(-2px); }
    90% { transform: translateX(-1px) translateY(1px); }
}

@keyframes screenShakeIntense {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-8px) translateY(6px) rotate(0.5deg); }
    20% { transform: translateX(8px) translateY(-6px) rotate(-0.5deg); }
    30% { transform: translateX(-6px) translateY(8px) rotate(0.3deg); }
    40% { transform: translateX(6px) translateY(-4px) rotate(-0.3deg); }
    50% { transform: translateX(-4px) translateY(6px) rotate(0.2deg); }
    60% { transform: translateX(8px) translateY(-8px) rotate(-0.4deg); }
    70% { transform: translateX(-8px) translateY(4px) rotate(0.4deg); }
    80% { transform: translateX(6px) translateY(-6px) rotate(-0.2deg); }
    90% { transform: translateX(-2px) translateY(2px) rotate(0.1deg); }
}

@keyframes screenShakeSubtle {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px) translateY(1px); }
    50% { transform: translateX(1px) translateY(-1px); }
    75% { transform: translateX(-1px) translateY(-1px); }
}

/* Impact Flash Effects */
.vn-impact-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
}

.vn-impact-flash.white {
    background: radial-gradient(circle at center,
                rgba(255, 255, 255, 0.9) 0%,
                rgba(255, 255, 255, 0.5) 50%,
                transparent 100%);
    animation: flashWhite 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-impact-flash.red {
    background: radial-gradient(circle at center,
                rgba(239, 68, 68, 0.8) 0%,
                rgba(220, 38, 38, 0.4) 50%,
                transparent 100%);
    animation: flashRed 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

@keyframes flashRed {
    0% { opacity: 0; }
    20% { opacity: 0.8; }
    100% { opacity: 0; }
}

/* 18. WEATHER AND ENVIRONMENTAL EFFECTS */
.vn-weather-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

/* Rain Effect */
.vn-rain {
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.1) 80%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.05) 60%, transparent 100%);
    background-size: 2px 100px, 3px 80px;
    background-position: 0 0, 25px 0;
    animation: rainFall 1s linear infinite;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.vn-rain.active {
    opacity: 0.7;
}

@keyframes rainFall {
    0% { background-position: 0 -100px, 25px -80px; }
    100% { background-position: 0 100vh, 25px calc(100vh + 80px); }
}

/* Snow Effect */
.vn-snow {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.vn-snow.active {
    opacity: 1;
}

.vn-snowflake {
    position: absolute;
    top: -10px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1em;
    animation: snowFall linear infinite;
}

@keyframes snowFall {
    0% {
        transform: translateY(-100px) translateX(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 100px)) translateX(100px) rotate(360deg);
        opacity: 0.3;
    }
}

/* Fog Effect */
.vn-fog {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,
                transparent 0%,
                rgba(200, 200, 255, 0.1) 25%,
                rgba(180, 180, 220, 0.15) 50%,
                rgba(200, 200, 255, 0.1) 75%,
                transparent 100%);
    background-size: 200% 200%;
    animation: fogDrift 20s infinite linear;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.vn-fog.active {
    opacity: 0.6;
}

@keyframes fogDrift {
    0% { background-position: 0% 0%; }
    25% { background-position: 100% 25%; }
    50% { background-position: 0% 50%; }
    75% { background-position: 100% 75%; }
    100% { background-position: 0% 100%; }
}

/* Lightning Effect */
.vn-lightning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(45deg,
                rgba(255, 255, 255, 0.9) 0%,
                rgba(200, 200, 255, 0.7) 50%,
                rgba(255, 255, 255, 0.9) 100%);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
}

.vn-lightning.strike {
    animation: lightningStrike 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes lightningStrike {
    0% { opacity: 0; }
    10% { opacity: 1; }
    20% { opacity: 0; }
    30% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

/* Wind Leaves Effect */
.vn-wind-leaves {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.vn-wind-leaves.active {
    opacity: 1;
}

.vn-leaf {
    position: absolute;
    font-size: 20px;
    color: rgba(139, 69, 19, 0.7);
    animation: leafBlow 8s linear infinite;
}

@keyframes leafBlow {
    0% {
        transform: translateX(-50px) translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateX(calc(100vw + 50px)) translateY(-50px) rotate(720deg);
        opacity: 0;
    }
}

/* 19. DIALOGUE SPEED AND FONT SIZE CONTROLS */
.vn-text-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 200;
}

.vn-control-panel {
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(25, 25, 60, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(120, 119, 198, 0.3);
    border-radius: 15px;
    padding: 15px;
    min-width: 200px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.vn-control-panel.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.vn-control-group {
    margin-bottom: 15px;
}

.vn-control-group:last-child {
    margin-bottom: 0;
}

.vn-control-label {
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    color: #7877c6;
    margin-bottom: 8px;
    display: block;
}

.vn-slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vn-slider {
    flex: 1;
    height: 4px;
    background: rgba(120, 119, 198, 0.3);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.vn-slider-fill {
    height: 100%;
    background: linear-gradient(90deg, #7877c6, #a29bfe);
    border-radius: 2px;
    width: 50%;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.vn-slider-handle {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #a29bfe;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(120, 119, 198, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-slider-handle:hover {
    transform: translateY(-50%) scale(1.2);
    box-shadow: 0 4px 15px rgba(120, 119, 198, 0.6);
}

.vn-control-value {
    font-family: 'Playfair Display', serif;
    font-size: 11px;
    color: #e2e2e2;
    min-width: 30px;
    text-align: center;
}

.vn-settings-toggle {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(25, 25, 60, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(120, 119, 198, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    align-self: flex-end;
}

.vn-settings-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(120, 119, 198, 0.5);
    border-color: rgba(120, 119, 198, 0.6);
}

.vn-settings-icon {
    font-size: 16px;
    color: #7877c6;
}

/* 20. CHARACTER RELATIONSHIP METERS */
.vn-relationship-panel {
    position: absolute;
    top: 80px;
    left: 20px;
    width: 250px;
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(25, 25, 60, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(120, 119, 198, 0.3);
    border-radius: 15px;
    padding: 20px;
    z-index: 200;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.vn-relationship-panel.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.vn-relationship-header {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: #7877c6;
    margin-bottom: 15px;
    text-align: center;
}

.vn-relationship-item {
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(120, 119, 198, 0.2);
}

.vn-relationship-character {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.vn-character-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7877c6, #a29bfe);
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.vn-character-name {
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    color: #e2e2e2;
    flex: 1;
}

.vn-relationship-level {
    font-size: 10px;
    color: #a0a0a0;
}

.vn-relationship-bar {
    width: 100%;
    height: 6px;
    background: rgba(120, 119, 198, 0.3);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
}

.vn-relationship-fill {
    height: 100%;
    background: linear-gradient(90deg,
                #ef4444 0%,    /* Hostile */
                #f97316 20%,   /* Unfriendly */
                #eab308 40%,   /* Neutral */
                #22c55e 60%,   /* Friendly */
                #3b82f6 80%,   /* Close */
                #8b5cf6 100%); /* Romance */
    width: 0%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.vn-relationship-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.4) 50%,
                transparent 100%);
    animation: relationshipShine 2s infinite linear;
}

@keyframes relationshipShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* 21. SCENE GALLERY AND REPLAY SYSTEM */
.vn-gallery-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-gallery-panel.visible {
    opacity: 1;
    visibility: visible;
}

.vn-gallery-header {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    color: #7877c6;
    margin-bottom: 30px;
    text-align: center;
}

.vn-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1200px;
    width: 100%;
    overflow-y: auto;
    max-height: 70vh;
    padding: 20px;
}

.vn-scene-card {
    background: linear-gradient(135deg,
                rgba(25, 25, 60, 0.9) 0%,
                rgba(40, 40, 80, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(120, 119, 198, 0.3);
    border-radius: 15px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.vn-scene-card:hover {
    transform: translateY(-5px);
    border-color: rgba(120, 119, 198, 0.6);
    box-shadow: 0 10px 30px rgba(120, 119, 198, 0.3);
}

.vn-scene-thumbnail {
    width: 100%;
    height: 150px;
    background: linear-gradient(45deg,
                rgba(120, 119, 198, 0.3) 0%,
                rgba(162, 155, 254, 0.3) 100%);
    border-radius: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgba(120, 119, 198, 0.6);
}

.vn-scene-title {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: #e2e2e2;
    margin-bottom: 8px;
}

.vn-scene-description {
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    color: #a0a0a0;
    line-height: 1.4;
    margin-bottom: 10px;
}

.vn-scene-stats {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #7877c6;
}

.vn-scene-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.vn-scene-card.locked::after {
    content: '🔒';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: rgba(120, 119, 198, 0.8);
}

/* 22. ACHIEVEMENT NOTIFICATIONS FOR STORY PROGRESS */
.vn-achievement-notification {
    position: fixed;
    top: 20px;
    right: -400px;
    width: 350px;
    background: linear-gradient(135deg,
                rgba(25, 25, 60, 0.95) 0%,
                rgba(40, 40, 80, 0.95) 100%);
    backdrop-filter: blur(25px);
    border: 2px solid rgba(120, 119, 198, 0.5);
    border-radius: 15px;
    padding: 20px;
    z-index: 9999;
    transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(120, 119, 198, 0.3);
}

.vn-achievement-notification.visible {
    right: 20px;
}

.vn-achievement-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.vn-achievement-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700, #ffb347);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 15px;
    animation: achievementGlow 2s infinite ease-in-out;
}

@keyframes achievementGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.6); }
}

.vn-achievement-text {
    flex: 1;
}

.vn-achievement-title {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: #ffd700;
    margin-bottom: 4px;
}

.vn-achievement-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    color: #e2e2e2;
}

.vn-achievement-description {
    font-family: 'Playfair Display', serif;
    font-size: 11px;
    color: #a0a0a0;
    margin-top: 8px;
    line-height: 1.3;
}

.vn-achievement-progress {
    margin-top: 10px;
}

.vn-achievement-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 215, 0, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.vn-achievement-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ffb347);
    width: 0%;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 23. ACCESSIBILITY FEATURES FOR VISUAL NOVEL */
.vn-accessibility {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
}

.vn-screen-reader-text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.vn-high-contrast {
    filter: contrast(150%) brightness(120%);
}

.vn-reduce-motion * {
    animation-duration: 0.1s !important;
    transition-duration: 0.1s !important;
}

.vn-large-text .dialogue-text {
    font-size: 20px !important;
    line-height: 1.6 !important;
}

.vn-focus-indicator:focus {
    outline: 3px solid #ffd700;
    outline-offset: 2px;
    border-radius: 4px;
}

.vn-accessibility-panel {
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.95) 0%,
                rgba(25, 25, 60, 0.95) 100%);
    backdrop-filter: blur(25px);
    border: 2px solid rgba(120, 119, 198, 0.5);
    border-radius: 15px;
    padding: 20px;
    min-width: 300px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.vn-accessibility-panel.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.vn-accessibility-option {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    color: #e2e2e2;
}

.vn-accessibility-checkbox {
    width: 18px;
    height: 18px;
    background: transparent;
    border: 2px solid rgba(120, 119, 198, 0.5);
    border-radius: 3px;
    margin-right: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.vn-accessibility-checkbox.checked {
    background: linear-gradient(135deg, #7877c6, #a29bfe);
    border-color: #a29bfe;
}

.vn-accessibility-checkbox.checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
}

/* 24. MOBILE-RESPONSIVE VISUAL NOVEL LAYOUT */
@media screen and (max-width: 768px) {
    .visual-novel-container {
        padding: 10px;
    }

    .dialogue-box {
        bottom: 10px;
        left: 10px;
        right: 10px;
        padding: 20px;
        border-radius: 15px 15px 0 0;
    }

    .character-portrait {
        width: 200px;
        height: 250px;
    }

    .character-name-display {
        font-size: 18px;
        padding: 8px 15px;
    }

    .dialogue-text {
        font-size: 16px;
        line-height: 1.5;
    }

    .vn-control-buttons {
        flex-direction: column;
        gap: 8px;
        padding: 15px;
    }

    .vn-control-button {
        width: 100%;
        padding: 12px;
        font-size: 14px;
    }

    .vn-choices-container {
        bottom: 200px;
        max-width: 90%;
        gap: 12px;
    }

    .vn-choice-option {
        padding: 15px 20px;
        font-size: 14px;
        min-width: auto;
    }

    .vn-progress-container,
    .vn-save-system,
    .vn-relationship-panel {
        display: none;
    }

    .vn-text-controls {
        position: fixed;
        bottom: 10px;
        right: 10px;
    }

    .vn-music-controls {
        bottom: 10px;
        left: 10px;
    }

    .vn-gallery-panel {
        padding: 20px 10px;
    }

    .vn-gallery-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .vn-scene-card {
        padding: 15px;
    }
}

@media screen and (max-width: 480px) {
    .dialogue-box {
        padding: 15px;
    }

    .character-portrait {
        width: 150px;
        height: 200px;
    }

    .dialogue-text {
        font-size: 14px;
    }

    .vn-choice-option {
        padding: 12px 15px;
        font-size: 13px;
    }

    .vn-achievement-notification {
        width: 280px;
        padding: 15px;
    }
}

/* 25. SUBTITLE AND CLOSED CAPTION SYSTEM */
.vn-subtitles {
    position: fixed;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
    z-index: 500;
    pointer-events: none;
}

.vn-subtitle-text {
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.9) 0%,
                rgba(25, 25, 60, 0.95) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(120, 119, 198, 0.3);
    border-radius: 10px;
    padding: 12px 20px;
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    text-align: center;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.vn-subtitle-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.vn-caption-speaker {
    color: #7877c6;
    font-weight: 600;
    margin-bottom: 4px;
}

.vn-sound-indication {
    font-style: italic;
    color: #a29bfe;
    font-size: 14px;
}

/* 26. DYNAMIC LIGHTING EFFECTS ON CHARACTERS */
.character-lighting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 140;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.character-lighting.visible {
    opacity: 1;
}

.character-lighting.warm {
    background: radial-gradient(ellipse at 30% 30%,
                rgba(255, 140, 0, 0.15) 0%,
                rgba(255, 165, 0, 0.1) 40%,
                transparent 70%);
    animation: warmFlicker 3s infinite ease-in-out;
}

.character-lighting.cool {
    background: radial-gradient(ellipse at 70% 30%,
                rgba(100, 149, 237, 0.15) 0%,
                rgba(135, 206, 250, 0.1) 40%,
                transparent 70%);
    animation: coolShimmer 4s infinite ease-in-out;
}

.character-lighting.dramatic {
    background: linear-gradient(45deg,
                rgba(0, 0, 0, 0.3) 0%,
                transparent 30%,
                rgba(255, 255, 255, 0.1) 70%,
                transparent 100%);
    animation: dramaticSweep 5s infinite linear;
}

@keyframes warmFlicker {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes coolShimmer {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes dramaticSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 27. CONTEXTUAL SOUND EFFECT TRIGGERS */
.vn-sound-visualizer {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 60px;
    height: 40px;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-sound-visualizer.active {
    opacity: 0.7;
}

.vn-sound-bar {
    width: 4px;
    background: linear-gradient(to top,
                rgba(120, 119, 198, 0.8) 0%,
                rgba(162, 155, 254, 0.9) 100%);
    border-radius: 2px;
    display: inline-block;
    margin-right: 2px;
    animation: soundPulse 0.5s infinite ease-in-out;
}

.vn-sound-bar:nth-child(1) { height: 10px; animation-delay: 0s; }
.vn-sound-bar:nth-child(2) { height: 20px; animation-delay: 0.1s; }
.vn-sound-bar:nth-child(3) { height: 35px; animation-delay: 0.2s; }
.vn-sound-bar:nth-child(4) { height: 25px; animation-delay: 0.3s; }
.vn-sound-bar:nth-child(5) { height: 15px; animation-delay: 0.4s; }

@keyframes soundPulse {
    0%, 100% { transform: scaleY(0.3); opacity: 0.5; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* 28. FULL-SCREEN MODE TOGGLE FOR IMMERSION */
.vn-fullscreen-toggle {
    position: fixed;
    top: 20px;
    right: 280px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(25, 25, 60, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(120, 119, 198, 0.3);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
}

.vn-fullscreen-toggle:hover {
    transform: scale(1.05);
    border-color: rgba(120, 119, 198, 0.6);
    box-shadow: 0 5px 20px rgba(120, 119, 198, 0.3);
}

.vn-fullscreen-icon {
    font-size: 20px;
    color: #7877c6;
}

.visual-novel-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background: #000;
}

.visual-novel-container.fullscreen .vn-fullscreen-toggle {
    top: 20px;
    right: 20px;
}

/* 29. KEYBOARD SHORTCUTS FOR NAVIGATION */
.vn-shortcuts-hint {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(25, 25, 60, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(120, 119, 198, 0.3);
    border-radius: 10px;
    padding: 8px 15px;
    font-family: 'Playfair Display', serif;
    font-size: 11px;
    color: #a0a0a0;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-shortcuts-hint.visible {
    opacity: 0.7;
}

.vn-shortcut-key {
    background: rgba(120, 119, 198, 0.3);
    border-radius: 3px;
    padding: 2px 6px;
    margin: 0 2px;
    color: #7877c6;
    font-weight: 600;
}

/* 30. VISUAL NOVEL SETTINGS PANEL */
.vn-settings-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    max-height: 80vh;
    background: linear-gradient(135deg,
                rgba(15, 15, 40, 0.95) 0%,
                rgba(25, 25, 60, 0.95) 100%);
    backdrop-filter: blur(25px);
    border: 2px solid rgba(120, 119, 198, 0.5);
    border-radius: 20px;
    padding: 30px;
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.9);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.vn-settings-panel.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.vn-settings-header {
    font-family: 'Cinzel', serif;
    font-size: 24px;
    color: #7877c6;
    text-align: center;
    margin-bottom: 30px;
}

.vn-settings-section {
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    border: 1px solid rgba(120, 119, 198, 0.2);
}

.vn-settings-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: #a29bfe;
    margin-bottom: 15px;
}

.vn-settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.vn-settings-row:last-child {
    margin-bottom: 0;
}

.vn-settings-label {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    color: #e2e2e2;
    flex: 1;
}

.vn-settings-control {
    flex: 0 0 200px;
}

.vn-settings-button {
    background: linear-gradient(135deg,
                rgba(120, 119, 198, 0.8) 0%,
                rgba(162, 155, 254, 0.8) 100%);
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-settings-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(120, 119, 198, 0.4);
}

.vn-settings-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ff4444;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-settings-close:hover {
    background: rgba(255, 0, 0, 0.3);
    transform: scale(1.1);
}

/* 31. CHARACTER INTRODUCTION SEQUENCES */
.vn-character-intro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at center,
                rgba(0, 0, 0, 0.7) 0%,
                rgba(0, 0, 0, 0.9) 100%);
    backdrop-filter: blur(15px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-character-intro.visible {
    opacity: 1;
    visibility: visible;
}

.vn-intro-content {
    text-align: center;
    max-width: 800px;
    padding: 40px;
    transform: translateY(50px);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.vn-character-intro.visible .vn-intro-content {
    transform: translateY(0);
}

.vn-intro-portrait {
    width: 300px;
    height: 400px;
    background: linear-gradient(135deg,
                rgba(120, 119, 198, 0.3) 0%,
                rgba(162, 155, 254, 0.3) 100%);
    border: 3px solid rgba(120, 119, 198, 0.6);
    border-radius: 20px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 120px;
    color: rgba(120, 119, 198, 0.8);
    animation: portraitGlow 3s infinite ease-in-out;
}

@keyframes portraitGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(120, 119, 198, 0.3); }
    50% { box-shadow: 0 0 40px rgba(120, 119, 198, 0.6); }
}

.vn-intro-name {
    font-family: 'Cinzel', serif;
    font-size: 36px;
    color: #7877c6;
    margin-bottom: 15px;
    animation: nameReveal 2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes nameReveal {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.vn-intro-title {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: #a29bfe;
    margin-bottom: 20px;
    font-style: italic;
    animation: titleFade 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes titleFade {
    0% { opacity: 0; }
    60% { opacity: 0; }
    100% { opacity: 1; }
}

.vn-intro-description {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: #e2e2e2;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 30px;
    animation: descriptionSlide 3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes descriptionSlide {
    0% { opacity: 0; transform: translateX(-50px); }
    70% { opacity: 0; transform: translateX(-50px); }
    100% { opacity: 1; transform: translateX(0); }
}

.vn-intro-continue {
    background: linear-gradient(135deg,
                rgba(120, 119, 198, 0.8) 0%,
                rgba(162, 155, 254, 0.8) 100%);
    border: 2px solid rgba(120, 119, 198, 0.6);
    border-radius: 15px;
    padding: 15px 30px;
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: continueGlow 1s infinite ease-in-out 3s;
}

.vn-intro-continue:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(120, 119, 198, 0.5);
}

@keyframes continueGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(120, 119, 198, 0.3); }
    50% { box-shadow: 0 0 25px rgba(120, 119, 198, 0.7); }
}

/* 32. SCENE MEMORY/FLASHBACK EFFECTS - ENHANCED */
.memory-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at center,
                transparent 0%,
                rgba(138, 43, 226, 0.2) 30%,
                rgba(75, 0, 130, 0.4) 70%,
                rgba(0, 0, 0, 0.8) 100%);
    z-index: 8000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.memory-overlay.active {
    opacity: 1;
    animation: memoryPulse 4s ease-in-out infinite;
}

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

.memory-vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse 60% 40% at center,
                transparent 0%,
                transparent 50%,
                rgba(138, 43, 226, 0.3) 80%,
                rgba(0, 0, 0, 0.9) 100%);
    z-index: 8500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.memory-vignette.active {
    opacity: 1;
}

.memory-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 8200;
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.memory-particles.active {
    opacity: 1;
}

.memory-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.8), transparent);
    border-radius: 50%;
    animation: memoryFloat 6s infinite linear;
}

@keyframes memoryFloat {
    0% {
        transform: translateY(100vh) translateX(0) scale(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(90vh) translateX(20px) scale(1) rotate(45deg);
    }
    90% {
        opacity: 0.8;
        transform: translateY(10vh) translateX(-20px) scale(0.5) rotate(315deg);
    }
    100% {
        transform: translateY(-10vh) translateX(0) scale(0) rotate(360deg);
        opacity: 0;
    }
}

/* ===================================== */
/* ULTRA PROFESSIONAL VISUAL NOVEL ENHANCEMENTS */
/* 34+ MAJOR UPGRADES - REFERENCE IMAGE MATCH */
/* ===================================== */

/* 34. ULTRA PREMIUM CHARACTER PORTRAIT SYSTEM */
.character-portrait-ultra {
    position: absolute;
    bottom: -20px;
    width: 420px;
    height: 650px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 15;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.7))
            drop-shadow(0 0 25px rgba(255, 255, 255, 0.1));
    transform-style: preserve-3d;
}

.character-portrait-ultra.left {
    left: -40px;
    transform: translateX(-10px) scale(1.05) rotateY(5deg);
}

.character-portrait-ultra.center {
    left: 50%;
    transform: translateX(-50%) scale(1.1);
    width: 480px;
    height: 720px;
    z-index: 20;
}

.character-portrait-ultra.right {
    right: -40px;
    transform: translateX(10px) scale(1.05) rotateY(-5deg);
}

.character-portrait-ultra.speaking {
    filter: drop-shadow(0 20px 50px rgba(255, 200, 100, 0.6))
            drop-shadow(0 0 30px rgba(255, 235, 150, 0.4))
            drop-shadow(0 5px 15px rgba(0, 0, 0, 0.8));
    animation: speakingGlow 1.5s ease-in-out infinite alternate;
    transform: scale(1.08) translateY(-5px);
}

.character-portrait-ultra.thinking {
    opacity: 0.65;
    filter: grayscale(30%) 
            drop-shadow(0 15px 35px rgba(0, 0, 0, 0.8))
            drop-shadow(0 0 20px rgba(100, 100, 150, 0.3));
    animation: thoughtfulBreathing 3s ease-in-out infinite;
}

@keyframes speakingGlow {
    0% { 
        filter: drop-shadow(0 20px 50px rgba(255, 200, 100, 0.4))
                drop-shadow(0 0 25px rgba(255, 235, 150, 0.3))
                drop-shadow(0 5px 15px rgba(0, 0, 0, 0.8)); 
    }
    100% { 
        filter: drop-shadow(0 25px 60px rgba(255, 200, 100, 0.8))
                drop-shadow(0 0 40px rgba(255, 235, 150, 0.6))
                drop-shadow(0 8px 20px rgba(0, 0, 0, 0.9)); 
    }
}

@keyframes thoughtfulBreathing {
    0%, 100% { 
        transform: scale(1.02) translateY(0px);
        opacity: 0.65; 
    }
    50% { 
        transform: scale(1.03) translateY(-2px);
        opacity: 0.7; 
    }
}

/* 35. PROFESSIONAL DIALOGUE BOX SYSTEM WITH ORNATE BORDERS */
.dialogue-box-premium {
    position: fixed;
    bottom: 40px;
    left: 60px;
    right: 60px;
    min-height: 180px;
    background: 
        linear-gradient(135deg,
            rgba(12, 16, 35, 0.95) 0%,
            rgba(25, 35, 60, 0.98) 25%,
            rgba(35, 50, 85, 0.95) 75%,
            rgba(20, 25, 45, 0.98) 100%);
    backdrop-filter: blur(35px) saturate(2.2) brightness(1.1);
    border: 3px solid transparent;
    border-radius: 20px 20px 8px 8px;
    padding: 35px 45px 30px 45px;
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.8),
        0 10px 30px rgba(0, 0, 0, 0.6),
        inset 0 2px 8px rgba(255, 255, 255, 0.15),
        inset 0 -2px 8px rgba(0, 0, 0, 0.3);
    z-index: 25;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dialogue-box-premium::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg,
        rgba(255, 215, 100, 0.8) 0%,
        rgba(200, 180, 255, 0.9) 25%,
        rgba(150, 200, 255, 0.8) 50%,
        rgba(255, 200, 150, 0.9) 75%,
        rgba(255, 215, 100, 0.8) 100%);
    border-radius: 23px 23px 11px 11px;
    z-index: -1;
    animation: borderGlow 3s ease-in-out infinite alternate;
}

.dialogue-box-premium::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 15px;
    right: 15px;
    bottom: 8px;
    background: 
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%),
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(200, 220, 255, 0.1) 0%, transparent 40%);
    border-radius: 15px 15px 5px 5px;
    pointer-events: none;
    z-index: 1;
}

@keyframes borderGlow {
    0% { 
        opacity: 0.6; 
        transform: scale(1); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1.005); 
    }
}

/* 36. ULTRA SOPHISTICATED NAMEPLATE DESIGN */
.character-nameplate-premium {
    position: absolute;
    top: -25px;
    left: 30px;
    background: 
        linear-gradient(135deg,
            rgba(255, 215, 100, 0.95) 0%,
            rgba(255, 200, 80, 0.98) 50%,
            rgba(255, 235, 120, 0.95) 100%);
    color: rgba(20, 15, 35, 0.95);
    padding: 12px 28px;
    border-radius: 15px 15px 0 0;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.5),
        0 3px 12px rgba(255, 215, 100, 0.4),
        inset 0 2px 6px rgba(255, 255, 255, 0.4),
        inset 0 -1px 3px rgba(200, 150, 50, 0.3);
    border: 2px solid rgba(255, 235, 150, 0.8);
    z-index: 30;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(0);
}

.character-nameplate-premium::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg,
        rgba(255, 235, 150, 0.9) 0%,
        rgba(255, 215, 100, 0.95) 50%,
        rgba(255, 240, 160, 0.9) 100%);
    border-radius: 17px 17px 2px 2px;
    z-index: -1;
    animation: nameplateShine 4s ease-in-out infinite;
}

.character-nameplate-premium:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.6),
        0 5px 18px rgba(255, 215, 100, 0.6),
        inset 0 3px 8px rgba(255, 255, 255, 0.5);
}

@keyframes nameplateShine {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* 37. ADVANCED TYPOGRAPHY AND TEXT PRESENTATION */
.dialogue-text-premium {
    font-family: 'Crimson Text', 'Libre Baskerville', 'Georgia', serif;
    font-size: 19px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.8),
        0 1px 3px rgba(0, 0, 0, 0.6);
    margin: 0;
    padding: 8px 0;
    position: relative;
    z-index: 10;
    letter-spacing: 0.3px;
    word-spacing: 1px;
}

.dialogue-text-premium::selection {
    background: rgba(255, 215, 100, 0.4);
    color: white;
}

.dialogue-text-premium.typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: typewriterEffect 2s steps(50, end);
}

@keyframes typewriterEffect {
    from { width: 0; }
    to { width: 100%; }
}

/* 38. CINEMATIC LIGHTING AND SHADOW SYSTEMS */
.visual-novel-lighting {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    background: 
        radial-gradient(circle at 30% 40%, rgba(255, 200, 100, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(150, 180, 255, 0.1) 0%, transparent 45%),
        linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    mix-blend-mode: overlay;
    animation: atmosphericShift 8s ease-in-out infinite alternate;
}

@keyframes atmosphericShift {
    0% { 
        opacity: 0.6;
        filter: hue-rotate(0deg) saturate(1.2); 
    }
    100% { 
        opacity: 0.8;
        filter: hue-rotate(10deg) saturate(1.4); 
    }
}

/* 39. PREMIUM BACKGROUND SYSTEM WITH PARALLAX DEPTH */
.visual-novel-background-ultra {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -15;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: contrast(1.1) saturate(1.3) brightness(0.9);
    transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.visual-novel-background-ultra::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, 
            rgba(0, 0, 0, 0.2) 0%, 
            rgba(20, 30, 60, 0.3) 50%, 
            rgba(0, 0, 0, 0.4) 100%);
    mix-blend-mode: multiply;
}

.visual-novel-background-ultra::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 60%),
        radial-gradient(circle at 20% 80%, rgba(100, 150, 255, 0.08) 0%, transparent 50%);
    animation: backgroundBreathing 6s ease-in-out infinite alternate;
}

@keyframes backgroundBreathing {
    0% { opacity: 0.5; }
    100% { opacity: 0.8; }
}

/* 40. ENHANCED CONTROL BUTTONS WITH PREMIUM STYLING */
.story-control-btn-premium {
    background: 
        linear-gradient(135deg,
            rgba(60, 80, 120, 0.9) 0%,
            rgba(80, 100, 150, 0.95) 50%,
            rgba(100, 120, 180, 0.9) 100%);
    border: 2px solid rgba(150, 170, 220, 0.6);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.95);
    padding: 12px 20px;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 3px 10px rgba(60, 80, 120, 0.3),
        inset 0 1px 4px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.story-control-btn-premium::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 50%, 
        transparent 100%);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.story-control-btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 5px 15px rgba(60, 80, 120, 0.4),
        inset 0 2px 6px rgba(255, 255, 255, 0.3);
    border-color: rgba(180, 200, 250, 0.8);
}

.story-control-btn-premium:hover::before {
    left: 100%;
}

.story-control-btn-premium:active {
    transform: translateY(0);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(60, 80, 120, 0.3),
        inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* 41. PARTICLE EFFECTS AND AMBIENT ANIMATIONS */
.story-particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 8;
    overflow: hidden;
}

.story-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    animation: floatingParticle 15s linear infinite;
}

.story-particle:nth-child(odd) {
    background: radial-gradient(circle, rgba(255, 215, 150, 0.6) 0%, transparent 70%);
    animation-duration: 12s;
}

.story-particle:nth-child(3n) {
    background: radial-gradient(circle, rgba(200, 220, 255, 0.7) 0%, transparent 70%);
    animation-duration: 18s;
    width: 3px;
    height: 3px;
}

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

/* 42. MOOD-BASED COLOR THEMING SYSTEM */
.story-mood-romantic {
    --primary-glow: rgba(255, 150, 200, 0.6);
    --secondary-glow: rgba(255, 200, 220, 0.4);
    --accent-color: rgba(255, 180, 210, 0.8);
}

.story-mood-mysterious {
    --primary-glow: rgba(120, 100, 255, 0.6);
    --secondary-glow: rgba(150, 130, 255, 0.4);
    --accent-color: rgba(135, 115, 255, 0.8);
}

.story-mood-dramatic {
    --primary-glow: rgba(255, 100, 100, 0.6);
    --secondary-glow: rgba(255, 150, 120, 0.4);
    --accent-color: rgba(255, 120, 110, 0.8);
}

.story-mood-peaceful {
    --primary-glow: rgba(150, 255, 200, 0.6);
    --secondary-glow: rgba(200, 255, 220, 0.4);
    --accent-color: rgba(170, 255, 210, 0.8);
}

/* 43. ADVANCED SCENE TRANSITION EFFECTS */
.scene-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #000000 0%, #1a1a2e 50%, #000000 100%);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scene-transition-overlay.active {
    opacity: 1;
    visibility: visible;
}

.scene-transition-overlay::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 3px solid transparent;
    border-top-color: rgba(255, 215, 100, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: sceneTransitionSpin 1.5s linear infinite;
}

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

/* 44. DEPTH OF FIELD AND FOCUS EFFECTS */
.visual-novel-depth-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 50% 60%, transparent 30%, rgba(0, 0, 0, 0.2) 80%);
    backdrop-filter: blur(0px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 12;
    pointer-events: none;
}

.visual-novel-depth-blur.focused {
    backdrop-filter: blur(2px);
    background: 
        radial-gradient(circle at 50% 60%, transparent 25%, rgba(0, 0, 0, 0.3) 75%);
}

/* 45. ENHANCED TEXT EFFECTS AND ANIMATIONS */
.dialogue-text-enhanced {
    position: relative;
    display: inline-block;
}

.dialogue-text-enhanced.emphasis {
    animation: textEmphasis 0.6s ease-out;
    color: rgba(255, 215, 100, 0.95);
    text-shadow: 
        0 3px 10px rgba(255, 215, 100, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.8);
}

.dialogue-text-enhanced.whisper {
    font-style: italic;
    opacity: 0.8;
    font-size: 0.9em;
    animation: whisperEffect 2s ease-in-out infinite alternate;
}

.dialogue-text-enhanced.shout {
    font-weight: bold;
    font-size: 1.1em;
    color: rgba(255, 180, 100, 0.95);
    animation: shoutEffect 0.3s ease-out;
    text-shadow: 
        0 3px 12px rgba(255, 180, 100, 0.8),
        0 2px 6px rgba(0, 0, 0, 0.9);
}

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

@keyframes whisperEffect {
    0% { opacity: 0.6; }
    100% { opacity: 0.9; }
}

@keyframes shoutEffect {
    0% { transform: scale(1); }
    30% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* 46. PROFESSIONAL AUDIO VISUAL INDICATORS */
.audio-visual-indicator {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 15px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    z-index: 35;
}

.sound-wave {
    width: 4px;
    height: 20px;
    background: rgba(255, 215, 100, 0.8);
    border-radius: 2px;
    animation: soundWave 1.2s ease-in-out infinite alternate;
}

.sound-wave:nth-child(2) { animation-delay: 0.1s; }
.sound-wave:nth-child(3) { animation-delay: 0.2s; }
.sound-wave:nth-child(4) { animation-delay: 0.3s; }

@keyframes soundWave {
    0% { height: 8px; opacity: 0.5; }
    100% { height: 20px; opacity: 1; }
}

/* 47. CINEMATIC LETTERBOX EFFECTS */
.cinematic-letterbox {
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 30;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cinematic-letterbox.top {
    top: 0;
}

.cinematic-letterbox.bottom {
    bottom: 0;
    background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.8) 100%);
}

.cinematic-letterbox.active {
    height: 120px;
}

/* 48. ENHANCED CHOICE SYSTEM STYLING */
.story-choice-container {
    position: absolute;
    bottom: 250px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 40;
    min-width: 400px;
}

.story-choice-btn {
    background: 
        linear-gradient(135deg,
            rgba(40, 60, 100, 0.9) 0%,
            rgba(60, 80, 130, 0.95) 50%,
            rgba(80, 100, 160, 0.9) 100%);
    border: 2px solid rgba(120, 140, 200, 0.6);
    border-radius: 15px;
    color: rgba(255, 255, 255, 0.95);
    padding: 18px 25px;
    font-family: 'Crimson Text', serif;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(40, 60, 100, 0.3),
        inset 0 2px 6px rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.story-choice-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom,
        rgba(255, 215, 100, 0.8) 0%,
        rgba(255, 180, 120, 0.9) 100%);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.story-choice-btn:hover {
    transform: translateX(10px);
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.5),
        0 6px 18px rgba(40, 60, 100, 0.4),
        inset 0 3px 8px rgba(255, 255, 255, 0.2);
    border-color: rgba(150, 170, 230, 0.8);
}

.story-choice-btn:hover::before {
    transform: scaleY(1);
}

/* 49. ADVANCED SAVE/LOAD VISUAL FEEDBACK */
.save-load-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: 
        linear-gradient(135deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(20, 30, 50, 0.95) 100%);
    border: 2px solid rgba(255, 215, 100, 0.8);
    border-radius: 20px;
    padding: 30px 40px;
    color: rgba(255, 255, 255, 0.95);
    font-family: 'Cinzel', serif;
    font-size: 18px;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.7),
        0 10px 25px rgba(255, 215, 100, 0.3);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.save-load-indicator.active {
    opacity: 1;
    visibility: visible;
    animation: saveLoadPulse 2s ease-in-out;
}

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

/* 50. ULTRA RESPONSIVE DESIGN ENHANCEMENTS */
@media (max-width: 1400px) {
    .character-portrait-ultra {
        width: 380px;
        height: 580px;
    }
    
    .character-portrait-ultra.center {
        width: 420px;
        height: 640px;
    }
    
    .dialogue-box-premium {
        left: 40px;
        right: 40px;
        min-height: 160px;
        padding: 30px 35px 25px 35px;
    }
}

@media (max-width: 1200px) {
    .character-portrait-ultra {
        width: 340px;
        height: 520px;
    }
    
    .character-portrait-ultra.center {
        width: 380px;
        height: 580px;
    }
    
    .dialogue-text-premium {
        font-size: 17px;
        line-height: 1.6;
    }
    
    .story-choice-container {
        min-width: 350px;
        bottom: 220px;
    }
}

@media (max-width: 980px) {
    .character-portrait-ultra {
        width: 300px;
        height: 460px;
    }
    
    .character-portrait-ultra.center {
        width: 340px;
        height: 520px;
    }
    
    .dialogue-box-premium {
        left: 20px;
        right: 20px;
        bottom: 20px;
        padding: 25px 30px 20px 30px;
    }
    
    .character-nameplate-premium {
        font-size: 16px;
        padding: 10px 22px;
    }
}

@media (max-width: 768px) {
    .character-portrait-ultra {
        width: 250px;
        height: 380px;
        bottom: 0;
    }
    
    .character-portrait-ultra.center {
        width: 280px;
        height: 420px;
    }
    
    .character-portrait-ultra.left {
        left: -30px;
    }
    
    .character-portrait-ultra.right {
        right: -30px;
    }
    
    .dialogue-box-premium {
        min-height: 140px;
        padding: 20px 25px 18px 25px;
        border-radius: 15px 15px 5px 5px;
    }
    
    .dialogue-text-premium {
        font-size: 16px;
        line-height: 1.5;
    }
    
    .story-choice-container {
        min-width: 300px;
        bottom: 180px;
    }
    
    .story-choice-btn {
        padding: 15px 20px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .character-portrait-ultra {
        width: 200px;
        height: 300px;
    }
    
    .character-portrait-ultra.center {
        width: 220px;
        height: 330px;
    }
    
    .dialogue-box-premium {
        left: 10px;
        right: 10px;
        bottom: 10px;
        min-height: 120px;
        padding: 18px 20px 15px 20px;
        border-radius: 12px 12px 4px 4px;
    }
    
    .character-nameplate-premium {
        font-size: 14px;
        padding: 8px 18px;
        left: 20px;
    }
    
    .dialogue-text-premium {
        font-size: 15px;
        line-height: 1.4;
    }
    
    .story-choice-container {
        min-width: 280px;
        bottom: 150px;
    }
}