/* --- Instruction Manual Styles --- */

#manual-trigger {
    transform-origin: bottom center;
    opacity: 1 !important;
}

#manual-trigger > div {
    background-color: #334155; /* Solid default color */
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: inset -2px 0 5px rgba(0,0,0,0.5), 
                inset 2px 0 5px rgba(255,255,255,0.1),
                0 10px 15px rgba(0,0,0,0.4); /* Move shadow here */
}

#manual-trigger:hover > div {
    box-shadow: inset -2px 0 5px rgba(0,0,0,0.5), 
                inset 2px 0 5px rgba(255,255,255,0.1),
                0 15px 25px rgba(0,0,0,0.6);
}

.manual-page {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    min-height: 400px;
    background-color: #ffffff;
    color: #1a1a1a;
    border: 2px solid rgba(0,0,0,0.1);
}

/* Blueprint Page */
.manual-page[data-manual-theme='blueprint'] {
    background-color: #002b5c;
    color: #ffffff;
    border: 3px double #ffffff;
    font-family: 'Space Mono', monospace;
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Arcade Page */
.manual-page[data-manual-theme='arcade'] {
    background-color: #000000;
    color: #ff00ff;
    border: 2px solid #00f2ff;
    font-family: 'Silkscreen', cursive;
    box-shadow: inset 0 0 30px rgba(255, 0, 255, 0.2), 0 0 20px rgba(0, 242, 255, 0.2);
}
.manual-page[data-manual-theme='arcade']::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 5;
}

/* OS Page */
.manual-page[data-manual-theme='os'] {
    background-color: #c0c0c0;
    color: #000000;
    border: 4px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    font-family: 'IBM Plex Mono', monospace;
}

/* Papercraft Page */
.manual-page[data-manual-theme='papercraft'] {
    background-color: #f4eee1;
    color: #333333;
    border: 2px solid #333;
    font-family: 'Special Elite', cursive;
    background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
}

/* Woodgrain Page */
.manual-page[data-manual-theme='woodgrain'] {
    background-color: #fdf5e6;
    color: #1a0f00;
    border: 4px solid #1a0f00;
    font-family: "DM Serif Display", serif;
    background-image: linear-gradient(to bottom, transparent 95%, rgba(0,0,0,0.02) 100%);
    background-size: 100% 30px;
}

/* Candy Page */
.manual-page[data-manual-theme='candy'] {
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
    backdrop-filter: blur(10px);
    color: #1a1a1a;
    border: 3px solid #ffffff;
    border-radius: 2rem;
    box-shadow: 0 10px 30px rgba(0, 210, 255, 0.2);
    font-family: "Comfortaa", cursive;
}

/* Brick Page */
.manual-page[data-manual-theme='brick'] {
    background-color: #8bac0f;
    color: #0f380f;
    border: 4px solid #0f380f;
    font-family: "DotGothic16", monospace;
    image-rendering: pixelated;
}

/* Cube Page */
.manual-page[data-manual-theme='cube'] {
    background-color: #ffffff;
    color: #1a1a1a;
    border: 6px solid #ff4500;
    border-radius: 3rem;
    box-shadow: 10px 10px 0px #4b0082;
    font-family: "Archivo Black", sans-serif;
}

/* Legacy Page */
.manual-page[data-manual-theme='legacy'] {
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #ffffff;
    font-family: "JetBrains Mono", monospace;
}

/* Hydraulic Page */
.manual-page[data-manual-theme='hydraulic'] {
    background-color: #374151;
    color: #fbbf24;
    border: 4px solid #111827;
    font-family: "Arial Black", Gadget, sans-serif;
    background-image: 
        linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.05) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
}

/* Overgrown Page */
.manual-page[data-manual-theme='overgrown'] {
    background-color: #1a2421;
    color: #d1dace;
    border: 2px solid #3d4a44;
    font-family: 'Cormorant Garamond', serif;
    background-image: radial-gradient(circle at 50% 50%, rgba(74, 222, 128, 0.05) 0%, transparent 100%);
}

/* Ink-Wash Page */
.manual-page[data-manual-theme='inkwash'] {
    background-color: #f2f0e9;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
    font-family: 'ZCOOL XiaoWei', serif;
    background-image: url('https://www.transparenttextures.com/patterns/parchment.png');
}

/* Hero Page */
.manual-page[data-manual-theme='hero'] {
    background-color: #ffffff;
    color: #000000;
    border: 4px solid #000;
    font-family: 'Balsamiq Sans', cursive;
    background-image: radial-gradient(rgba(0,0,0,0.05) 2px, transparent 2px);
    background-size: 15px 15px;
}

/* Navigator Page */
.manual-page[data-manual-theme='navigator'] {
    background-color: #0b0e14;
    color: #00f2ff;
    border: 1px solid #1e90ff;
    font-family: 'Audiowide', cursive;
    background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    box-shadow: inset 0 0 30px rgba(0, 242, 255, 0.1);
}

/* Spectrum Page */
.manual-page[data-manual-theme='spectrum'] {
    background-color: #000;
    color: #fff;
    border: 2px solid #fff;
    font-family: 'JetBrains Mono', monospace;
    background-image: linear-gradient(90deg, rgba(255,0,255,0.1) 50%, transparent 50%), linear-gradient(rgba(0,255,255,0.1) 50%, transparent 50%);
    background-size: 32px 32px;
}

/* Famicom Page */
.manual-page[data-manual-theme='famicom'] {
    background-color: #f2f0e9;
    color: #991b1b;
    border: 4px solid #991b1b;
    box-shadow: inset 0 0 0 2px #ffde00;
    font-family: 'DotGothic16', sans-serif;
}

/* Web-1.0 Page */
.manual-page[data-manual-theme='web1'] {
    background-color: #c0c0c0;
    color: #000;
    border: 2px solid !important;
    border-color: #fff #808080 #808080 #fff !important;
    font-family: 'Cormorant Garamond', serif;
}

/* Game Gear Page */
.manual-page[data-manual-theme='gamegear'] {
    background-color: #111827;
    color: #3b82f6;
    border: 2px solid #a855f7;
    font-family: 'Exo 2', sans-serif;
    box-shadow: inset 0 0 30px rgba(168, 85, 247, 0.2);
}


/* Obsidian Page */
.manual-page[data-manual-theme='obsidian'] {
    background-color: #0a0a0a;
    color: #e0e0e0;
    border: 1px solid #222;
    border-left: 4px solid #ff6600;
    font-family: 'Chakra Petch', sans-serif;
}

/* Future Page */
.manual-page[data-manual-theme='future'] {
    background-color: #ffffff;
    color: #1a1a1a;
    border: 1px solid rgba(0,0,0,0.1);
    font-family: 'Inter', sans-serif;
}

/* Virtual Page */
.manual-page[data-manual-theme='virtual'] {
    background-color: #000000;
    color: #ff0000;
    border: 2px solid #ff0000;
    font-family: 'DotGothic16', sans-serif;
    background-image: repeating-linear-gradient(transparent 0px, transparent 2px, rgba(255, 0, 0, 0.05) 2px, rgba(255, 0, 0, 0.05) 4px);
}

/* Quest Page */
.manual-page[data-manual-theme='quest'] {
    background: linear-gradient(to bottom, #0000ff, #000080);
    color: #ffffff;
    border: 3px double #ffffff;
    font-family: 'Pixelify Sans', cursive;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
}

/* Genesis Page */
.manual-page[data-manual-theme='genesis'] {
    background-color: #1a1a1a;
    color: #00f2ff;
    border: 2px solid #00f2ff;
    font-family: 'Exo 2', sans-serif;
    background-image: linear-gradient(45deg, rgba(30, 58, 138, 0.1) 25%, transparent 25%, transparent 50%, rgba(30, 58, 138, 0.1) 50%, rgba(30, 58, 138, 0.1) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
}

/* Spectrum Page */
.manual-page[data-manual-theme='spectrum'] {
    background-color: #000;
    color: #fff;
    border: 2px solid #fff;
    font-family: 'JetBrains Mono', monospace;
    background-image: linear-gradient(90deg, rgba(255,0,255,0.1) 50%, transparent 50%), linear-gradient(rgba(0,255,255,0.1) 50%, transparent 50%);
    background-size: 32px 32px;
}

/* Famicom Page */
.manual-page[data-manual-theme='famicom'] {
    background-color: #f2f0e9;
    color: #991b1b;
    border: 4px solid #991b1b;
    box-shadow: inset 0 0 0 2px #ffde00;
    font-family: 'DotGothic16', sans-serif;
}

/* Game Gear Page */
.manual-page[data-manual-theme='gamegear'] {
    background-color: #111827;
    color: #3b82f6;
    border: 2px solid #a855f7;
    font-family: 'Exo 2', sans-serif;
    box-shadow: inset 0 0 30px rgba(168, 85, 247, 0.2);
}

/* Manga Page */
.manual-page[data-manual-theme='manga'] {
    background-color: #ffffff;
    color: #000000;
    border: 4px solid #000;
    font-family: 'Balsamiq Sans', cursive;
    background-image: linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.05) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
}

/* Museum Page */
.manual-page[data-manual-theme='museum'] {
    background-color: #ffffff;
    color: #1a1a1a;
    border: 1px solid #d4af37;
    font-family: 'Cormorant Garamond', serif;
}

/* Craft Page */
.manual-page[data-manual-theme='craft'] {
    background-color: #3b82f6;
    color: #ffffff;
    border: 4px dashed #ffffff;
    font-family: 'Comfortaa', cursive;
}

/* Street Page */
.manual-page[data-manual-theme='street'] {
    background-color: #111827;
    color: #22c55e;
    border: 3px solid #22c55e;
    font-family: 'Archivo Black', sans-serif;
}

/* Noir Page */
.manual-page[data-manual-theme='noir'] {
    background-color: #000000;
    color: #e5e5e5;
    border: 1px solid #404040;
    font-family: 'JetBrains Mono', monospace;
}

/* Tokyo Page */
.manual-page[data-manual-theme='tokyo'] {
    background-color: #000000;
    color: #f0abfc;
    border: 2px solid #d946ef;
    font-family: 'DotGothic16', sans-serif;
    box-shadow: inset 0 0 30px rgba(217, 70, 239, 0.2);
}

#manual-modal {
    z-index: 150;
    overflow-y: auto;
}

#manual-modal-container {
    width: 100%;
    max-width: 56rem; /* max-w-4xl */
    display: flex;
    gap: 1rem;
    position: relative;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    #manual-modal-container {
        flex-direction: column;
        max-width: 100%;
        aspect-ratio: auto !important;
    }
    .manual-page {
        min-height: auto;
        padding: 1.5rem !important;
    }
    #manual-page-right:empty, #manual-content-right:empty {
        display: none;
    }
}

/* Theme specific overrides for the Manual object */
[data-theme='blueprint'] #manual-trigger > div {
    background-color: #002b5c !important;
    border-color: #ffffff !important;
    border-style: double !important;
}

[data-theme='arcade'] #manual-trigger > div {
    background-color: #000 !important;
    border-color: #00f2ff !important;
    box-shadow: 0 0 15px #ff00ff !important;
}

[data-theme='os'] #manual-trigger > div {
    background-color: #c0c0c0 !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    border-radius: 0 !important;
}

[data-theme='papercraft'] #manual-trigger > div {
    background-color: #f4eee1 !important;
    background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png') !important;
    border-color: #333 !important;
    border-radius: 0 !important;
}

[data-theme='woodgrain'] #manual-trigger > div {
    background-color: #5c4033 !important;
    border-color: #1a0f00 !important;
    border-bottom-width: 4px !important;
}

[data-theme='candy'] #manual-trigger > div {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 1rem !important;
    border-color: #fff !important;
}

[data-theme='brick'] #manual-trigger > div {
    background-color: #306230 !important;
    border-color: #0f380f !important;
    image-rendering: pixelated;
}

[data-theme='cube'] #manual-trigger > div {
    background-color: #ff4500 !important;
    border-radius: 1rem !important;
    border: 4px solid #ffffff !important;
}

[data-theme='legacy'] #manual-trigger > div {
    background-color: #000 !important;
    border: 1px solid #fff !important;
    border-radius: 0 !important;
}

[data-theme='overgrown'] #manual-trigger > div {
    background-color: #1a2421 !important;
    border-color: #3d4a44 !important;
    box-shadow: inset -2px 0 5px rgba(0,0,0,0.5), 0 10px 15px rgba(0,0,0,0.4);
}

[data-theme='inkwash'] #manual-trigger > div {
    background-color: #e8e4d9 !important;
    border-color: #1a1a1a !important;
    border-radius: 0 !important;
    background-image: url('https://www.transparenttextures.com/patterns/parchment.png') !important;
}

[data-theme='hero'] #manual-trigger > div {
    background-color: #ff0000 !important;
    border-color: #000 !important;
    border-width: 3px !important;
}

[data-theme='navigator'] #manual-trigger > div {
    background-color: #05070a !important;
    border-color: #1e90ff !important;
    box-shadow: 0 0 15px rgba(30, 144, 255, 0.3) !important;
}

[data-theme='virtual'] #manual-trigger > div {
    background-color: #000 !important;
    border-color: #ff0000 !important;
    box-shadow: 0 0 10px #ff0000 !important;
}

[data-theme='quest'] #manual-trigger > div {
    background: linear-gradient(to bottom, #0000ff, #000080) !important;
    border-color: #ffffff !important;
    border-style: double !important;
}

[data-theme='genesis'] #manual-trigger > div {
    background-color: #1a1a1a !important;
    border-color: #00f2ff !important;
}

[data-theme='spectrum'] #manual-trigger > div {
    background-color: #000 !important;
    border-color: #fff !important;
    border-right: 4px solid #ff00ff !important;
}

[data-theme='famicom'] #manual-trigger > div {
    background-color: #f2f0e9 !important;
    border-color: #991b1b !important;
    box-shadow: inset 0 0 0 2px #ffde00, 0 10px 15px rgba(0,0,0,0.2);
}

[data-theme='web1'] #manual-trigger > div {
    background-color: #c0c0c0 !important;
    border: 2px solid !important;
    border-color: #fff #808080 #808080 #fff !important;
    border-radius: 0 !important;
}

[data-theme='gamegear'] #manual-trigger > div {
    background-color: #111827 !important;
    border-color: #3b82f6 !important;
    border-radius: 1rem !important;
}

[data-theme='manga'] #manual-trigger > div {
    background-color: #ffffff !important;
    border: 4px solid #000 !important;
}

[data-theme='museum'] #manual-trigger > div {
    background-color: #ffffff !important;
    border-color: #d4af37 !important;
}

[data-theme='craft'] #manual-trigger > div {
    background-color: #3b82f6 !important;
    border-color: #ffffff !important;
    border-style: dashed !important;
}

[data-theme='street'] #manual-trigger > div {
    background-color: #111827 !important;
    border-color: #22c55e !important;
    transform: rotate(-2deg);
}

[data-theme='noir'] #manual-trigger > div {
    background-color: #000 !important;
    border-color: #404040 !important;
}

[data-theme='tokyo'] #manual-trigger > div {
    background-color: #000 !important;
    border-color: #d946ef !important;
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.3) !important;
}

/* Page Texture Mixins */
.paper-texture {
    pointer-events: none;
}

/* Text Accent Utility */
.text-accent {
    transition: color 0.5s ease;
}

/* Page Navigation Animation */
#manual-content-left, #manual-content-right {
    animation: page-fade 0.4s ease-out;
}

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