/* === Landing Page Gate === */
.landing-gate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1410 50%, #0d0907 100%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.landing-gate.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.landing-content {
    text-align: center;
    max-width: 400px;
    padding: 2rem;
}

.landing-sigil {
    color: #5fb4a2;
    opacity: 0.6;
    margin-bottom: 1.5rem;
    animation: runeGlow 8s ease-in-out infinite;
}

.landing-sigil svg {
    display: inline-block;
}

.landing-title {
    font-family: 'Cinzel', serif;
    font-size: 2.8rem;
    font-weight: 600;
    color: #d4c5a9;
    letter-spacing: 0.15em;
    margin-bottom: 0.3rem;
    text-shadow: 0 0 30px rgba(95, 180, 162, 0.2);
}

.landing-subtitle {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 1rem;
    color: #8a7a66;
    margin-bottom: 3rem;
    letter-spacing: 0.05em;
}

.landing-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.landing-btn {
    font-family: 'IM Fell English', serif;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background: none;
    color: #d4c5a9;
}

.guest-btn {
    padding: 0.8rem 2.5rem;
    background: rgba(95, 180, 162, 0.1);
    border: 1px solid rgba(95, 180, 162, 0.3);
    border-radius: 4px;
    letter-spacing: 0.08em;
}

.guest-btn:hover {
    background: rgba(95, 180, 162, 0.2);
    border-color: rgba(95, 180, 162, 0.6);
    text-shadow: 0 0 10px rgba(95, 180, 162, 0.3);
}

.landing-divider {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1rem;
    margin: 0.5rem 0;
}

.landing-divider::before,
.landing-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(95, 180, 162, 0.15);
}

.landing-divider span {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    color: #5a4f40;
    font-size: 0.85rem;
}

.landing-login {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.landing-input {
    flex: 1;
    padding: 0.6rem 1rem;
    font-family: 'IM Fell English', serif;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(95, 180, 162, 0.15);
    border-radius: 4px;
    color: #d4c5a9;
    outline: none;
    transition: border-color 0.3s ease;
}

.landing-input::placeholder {
    color: #5a4f40;
    font-style: italic;
}

.landing-input:focus {
    border-color: rgba(95, 180, 162, 0.4);
}

.login-btn {
    padding: 0.6rem 1.5rem;
    border: 1px solid rgba(95, 180, 162, 0.15);
    border-radius: 4px;
    font-size: 0.95rem;
}

.login-btn:hover {
    border-color: rgba(95, 180, 162, 0.4);
    text-shadow: 0 0 10px rgba(95, 180, 162, 0.3);
}

.landing-error {
    color: #8b4444;
    font-size: 0.85rem;
    font-style: italic;
    min-height: 1.2em;
}

/* Access control: grey out restricted tomes for guests (don't remove them) */
body.guest-mode .tome-restricted {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

body.guest-mode .tome-restricted .tome-spine {
    color: #9a8a7a;
    text-shadow: none;
    border-left-color: #4a3a2a;
    box-shadow: 
        inset -2px 0 6px rgba(0,0,0,0.5),
        2px 2px 6px rgba(0,0,0,0.5);
    position: relative;
}

/* Friend-locked tomes: visible but show lock cursor */
.tome-locked {
    cursor: pointer;
    position: relative;
}

.tome-locked .tome-spine {
    position: relative;
}

.tome-locked .tome-spine::after {
    content: '🔒';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    opacity: 0.7;
    filter: grayscale(0.5);
}

/* Friend Code Modal */
.friend-code-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 8, 6, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.friend-code-modal.hidden {
    display: none;
}

.friend-code-content {
    text-align: center;
    max-width: 360px;
    padding: 2rem;
}

.friend-code-sigil {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
}

.friend-code-content h2 {
    font-family: 'Cinzel', serif;
    color: #c4a265;
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
}

.friend-code-subtitle {
    color: #8a7a6a;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.friend-code-input {
    width: 100%;
    padding: 0.7rem 1rem;
    background: rgba(30, 25, 18, 0.8);
    border: 1px solid #4a3a2a;
    color: #c4a265;
    font-family: 'IM Fell English', serif;
    font-size: 1rem;
    text-align: center;
    border-radius: 4px;
    outline: none;
    margin-bottom: 1rem;
}

.friend-code-input:focus {
    border-color: #c4a265;
    box-shadow: 0 0 8px rgba(196, 162, 101, 0.2);
}

.friend-code-input::placeholder {
    color: #6a5a4a;
    font-style: italic;
}

.friend-code-buttons {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    margin-bottom: 0.8rem;
}

.friend-code-btn {
    padding: 0.5rem 1.2rem;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    border: 1px solid #4a3a2a;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.friend-code-btn.submit {
    background: rgba(196, 162, 101, 0.15);
    color: #c4a265;
}

.friend-code-btn.submit:hover {
    background: rgba(196, 162, 101, 0.3);
    border-color: #c4a265;
}

.friend-code-btn.cancel {
    background: transparent;
    color: #8a7a6a;
}

.friend-code-btn.cancel:hover {
    color: #c4a265;
}

.friend-code-error {
    color: #a05050;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.85rem;
    min-height: 1.2em;
}

/* Bookend images for restricted tomes — pending design choice */

body.guest-mode .quick-capture,
body.guest-mode .glow-btn,
body.guest-mode #captureBtn,
body.guest-mode #songCaptureBtn,
body.guest-mode #bitCaptureBtn,
body.guest-mode #comicCaptureBtn,
body.guest-mode #poemCaptureBtn,
body.guest-mode #mediaCaptureBtn,
body.guest-mode #newEntryBtn,
body.guest-mode .detail-actions,
body.guest-mode .image-controls,
body.guest-mode .add-subtask,
body.guest-mode .add-link,
body.guest-mode .pain-log-controls {
    display: none !important;
}

/* Guest mode: inputs look read-only but remain interactive for scrolling/selecting */
body.guest-mode .detail-view input,
body.guest-mode .detail-view select,
body.guest-mode .detail-view textarea {
    opacity: 0.85;
    caret-color: transparent;
}

/* Hide the logout slot for guests (they see landing page to re-enter) */
body.guest-mode .tome-logout-slot {
    display: flex;
}

/* Logout button — looks like a decor tome but clickable */
.logout-decor {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.logout-decor .logout-spine {
    font-family: 'IM Fell English', serif;
    font-size: 0.85rem;
    color: #5fb4a2;
    /* Enhanced text shadow for logout button over background image */
    text-shadow: 
        0 0 8px rgba(95, 180, 162, 0.9),
        0 0 16px rgba(95, 180, 162, 0.6),
        0 0 24px rgba(0, 0, 0, 0.9),
        1px 1px 3px rgba(0, 0, 0, 0.8),
        -1px -1px 3px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.06em;
    text-shadow: 0 0 8px rgba(95, 180, 162, 0.5);
    border-color: #5a8a7a !important;
    border-left-color: #5fb4a2 !important;
    box-shadow: 
        inset -2px 0 6px rgba(0,0,0,0.5),
        2px 2px 6px rgba(0,0,0,0.5),
        0 0 10px rgba(95, 180, 162, 0.25) !important;
}

.logout-decor:hover {
    transform: translateX(6px) rotate(2deg) !important;
    filter: brightness(1.3) !important;
    z-index: 10 !important;
}

.logout-decor:hover .logout-spine {
    color: #e85a4a;
    text-shadow: 0 0 10px rgba(200, 80, 60, 0.6);
}

/* Logout visible for ALL users — guests need it to leave */
body.guest-mode .logout-decor {
    pointer-events: auto;
    opacity: 1;
}

body.guest-mode .logout-decor:hover {
    transform: translateX(6px) rotate(2deg) !important;
    filter: brightness(1.3) !important;
    z-index: 10 !important;
}

/* === The Arcane Study === */
/* ACCENT COLOR: Teal (#5fb4a2) - replacing the former yellow */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === Background Runes === */
.rune-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.rune {
    position: absolute;
    font-size: 5rem;
    color: #2a1510;
    opacity: 0.2;
    animation: runeGlow 8s ease-in-out infinite;
}

.rune.sigil {
    width: 80px;
    height: 100px;
    font-size: unset;
}

.rune.sigil.paimon {
    width: 100px;
    height: 85px;
}

.rune.sigil.wide {
    width: 90px;
    height: 70px;
}

/* Stagger the animations */
.rune:nth-child(1) { animation-delay: 0s; }
.rune:nth-child(2) { animation-delay: 1.5s; }
.rune:nth-child(3) { animation-delay: 3s; }
.rune:nth-child(4) { animation-delay: 4.5s; }
.rune:nth-child(5) { animation-delay: 6s; }
.rune:nth-child(6) { animation-delay: 2s; }
.rune:nth-child(7) { animation-delay: 5s; }
.rune:nth-child(8) { animation-delay: 7s; }
.rune:nth-child(9) { animation-delay: 3.5s; }

@keyframes runeGlow {
    0%, 100% {
        color: #2a1510;
        opacity: 0.15;
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        color: #8b0000;
        opacity: 0.85;
        filter: 
            drop-shadow(0 0 8px rgba(139, 0, 0, 0.8))
            drop-shadow(0 0 20px rgba(139, 0, 0, 0.5))
            drop-shadow(0 0 35px rgba(139, 0, 0, 0.3));
    }
}

body {
    font-family: 'IM Fell English', serif;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1410 100%);
    color: #d4c5a9;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

.arcane-study {
    position: relative;
    min-height: 100vh;
    padding: 2rem;
    z-index: 1;
}

/* === Tome Shelf Navigation (Bookcase Grid) === */
.tome-shelf {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, min-content);
    grid-template-rows: repeat(9, 11.111%);
    z-index: 100;
    /* Bookcase back panel */
    background: linear-gradient(90deg, 
        #1a0f08 0%, 
        #2a1810 40%, 
        #1f130c 100%);
    border-right: 5px solid #3d2416;
    box-shadow: 
        inset -15px 0 30px rgba(0,0,0,0.6),
        8px 0 30px rgba(0,0,0,0.8),
        inset 0 15px 25px rgba(0,0,0,0.5),
        inset 0 -15px 25px rgba(0,0,0,0.5);
}

/* Responsive sizing for different screens */
@media (max-height: 900px) {
    .tome-shelf {
        width: auto;
    }
    .tome-spine {
        font-size: 0.65rem;
        padding: 0.4rem 0.25rem;
        border-left-width: 3px;
    }
}

@media (min-height: 901px) {
    .tome-spine {
        font-size: 0.75rem;
    }
}

.tome {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Navigable tomes - brighter edges */
.tome[data-workspace] .tome-spine {
    border-left-color: #7a9a85;
    box-shadow: 
        inset -2px 0 8px rgba(0,0,0,0.5),
        3px 3px 8px rgba(0,0,0,0.6),
        0 0 8px rgba(95, 180, 162, 0.2);
}

.tome[data-workspace]:hover {
    transform: translateX(6px) rotate(2deg);
    filter: brightness(1.3);
    z-index: 10;
}

.tome[data-workspace].active {
    transform: translateX(10px) rotate(1deg) scale(1.08);
    filter: brightness(1.4) drop-shadow(0 0 12px rgba(200, 80, 60, 0.8));
    z-index: 11;
}

.tome[data-workspace].active .tome-spine {
    color: #e85a4a;
    text-shadow: 0 0 10px rgba(200, 80, 60, 0.6);
    border-color: #8a4035;
    border-left-color: #c45a4a;
}

/* Decorative tomes - slightly dimmer, no interaction */
.tome.decor {
    cursor: default;
    opacity: 0.9;
}

.tome.decor:hover {
    transform: none;
    filter: none;
}

.tome.decor .tome-spine.rune {
    font-family: 'Segoe UI Symbol', 'Noto Sans Runic', serif;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: #5a7a6a;
    text-shadow: none;
    border-left-color: #3a2a1a;
    animation: runeTextPulse 6s ease-in-out infinite;
}

/* Stagger the rune text animations */
.tome.decor:nth-child(1) .tome-spine.rune { animation-delay: 0s; }
.tome.decor:nth-child(2) .tome-spine.rune { animation-delay: 0.8s; }
.tome.decor:nth-child(3) .tome-spine.rune { animation-delay: 1.6s; }
.tome.decor:nth-child(4) .tome-spine.rune { animation-delay: 2.4s; }
.tome.decor:nth-child(5) .tome-spine.rune { animation-delay: 3.2s; }
.tome.decor:nth-child(6) .tome-spine.rune { animation-delay: 0.5s; }
.tome.decor:nth-child(7) .tome-spine.rune { animation-delay: 1.3s; }
.tome.decor:nth-child(8) .tome-spine.rune { animation-delay: 2.1s; }

@keyframes runeTextPulse {
    0%, 100% {
        opacity: 0.5;
        text-shadow: none;
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 4px rgba(90, 122, 106, 0.4);
    }
}

/* Spine image backgrounds - replace gradients with photorealistic book spines */
.tome-spine.spine-tree {
    background: url('./uploads/spines/regular-tree.png') center center/cover no-repeat;
}

.tome-spine.spine-serpent {
    background: url('./uploads/spines/regular-serpent.png') center center/cover no-repeat;
}

.tome-spine.spine-alchemical {
    background: url('./uploads/spines/regular-alchemical.png') center center/cover no-repeat;
}

.tome-spine.spine-pentagram {
    background: url('./uploads/spines/regular-pentagram.png') center center/cover no-repeat;
}

/* Locked spine images for restricted tomes - override regular spine backgrounds */
.tome-restricted .tome-spine.spine-locked-1,
.tome-restricted .tome-spine.spine-locked-2 {
    /* Override any regular spine background */
    background-image: none;
}

.tome-restricted .tome-spine.spine-locked-1 {
    background: url('./uploads/spines/locked-1.png') center center/cover no-repeat;
}

.tome-restricted .tome-spine.spine-locked-2 {
    background: url('./uploads/spines/locked-2.png') center center/cover no-repeat;
}

/* For restricted tomes that don't have specific locked spine classes, use locked-1 as default */
.tome-restricted .tome-spine:not(.spine-locked-1):not(.spine-locked-2) {
    background: url('./uploads/spines/locked-2.png') center center/cover no-repeat;
}

/* Base tome spine styles */
.tome-spine {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    /* Default fallback background (will be overridden by spine classes) */
    background: linear-gradient(90deg, #2a1810 0%, #3d2416 50%, #2a1810 100%);
    border: 2px solid #4a3520;
    border-left: 4px solid #5a4530;
    border-bottom: 2px solid #3a2515;
    padding: 0.5rem 0.3rem;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #5fb4a2;
    /* Enhanced text shadow for better readability over photorealistic backgrounds */
    text-shadow: 
        0 0 8px rgba(95, 180, 162, 0.8),
        0 0 16px rgba(0, 0, 0, 0.9),
        1px 1px 2px rgba(0, 0, 0, 0.8),
        -1px -1px 2px rgba(0, 0, 0, 0.8);
    box-shadow: 
        inset -2px 0 6px rgba(0,0,0,0.5),
        2px 2px 6px rgba(0,0,0,0.5);
    border-radius: 2px;
}

/* === Workspace Container === */
.workspace-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 40px 0 180px;
}

@media (max-height: 900px) {
    .workspace-container {
        padding: 0 30px 0 150px;
    }
}

/* === Mobile Menu Toggle === */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 200;
    width: 45px;
    height: 45px;
    background: rgba(26, 15, 8, 0.95);
    border: 2px solid #5fb4a2;
    border-radius: 6px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.mobile-menu-toggle span {
    width: 22px;
    height: 2px;
    background: #5fb4a2;
    border-radius: 1px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* === Mobile Responsive Design === */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .tome-shelf {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 150;
    }
    
    .tome-shelf.visible {
        transform: translateX(0);
        box-shadow: 
            inset -15px 0 30px rgba(0,0,0,0.6),
            8px 0 30px rgba(0,0,0,0.8),
            inset 0 15px 25px rgba(0,0,0,0.5),
            inset 0 -15px 25px rgba(0,0,0,0.5),
            100px 0 200px rgba(0,0,0,0.4); /* Overlay shadow */
    }
    
    .workspace-container {
        padding: 0 20px;
        width: 100%;
        padding-top: 80px; /* Space for mobile toggle button */
    }
    
    /* Add overlay when menu is open */
    body.mobile-menu-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 140;
    }
}

@media (max-width: 480px) {
    .workspace-container {
        padding: 0 15px;
        padding-top: 80px;
    }
    
    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
    }
    
    .mobile-menu-toggle span {
        width: 18px;
    }
}

.workspace {
    display: none;
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
}

.workspace.active {
    display: block;
}

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

/* === Workspace Header === */
.workspace-header {
    margin-bottom: 3rem;
    text-align: center;
}

.workspace-header h1 {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    font-weight: 600;
    color: #5fb4a2;
    text-shadow: 
        0 0 20px rgba(95, 180, 162, 0.4),
        0 0 40px rgba(95, 180, 162, 0.2);
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
}

/* === Quick Capture === */
.quick-capture {
    display: flex;
    gap: 0.75rem;
    max-width: 800px;
    margin: 0 auto;
}

.quick-capture input {
    flex: 1;
    padding: 1rem 1.5rem;
    background: rgba(42, 24, 16, 0.6);
    border: 2px solid #4a3520;
    border-radius: 4px;
    color: #d4c5a9;
    font-family: 'IM Fell English', serif;
    font-size: 1rem;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
}

.quick-capture input:focus {
    outline: none;
    border-color: #5fb4a2;
    box-shadow: 
        inset 0 2px 8px rgba(0,0,0,0.4),
        0 0 15px rgba(95, 180, 162, 0.3);
}

.quick-capture input::placeholder {
    color: #6a5a4a;
    font-style: italic;
}

.quick-capture button,
.glow-btn {
    padding: 1rem 1.75rem;
    background: linear-gradient(135deg, #3d2416 0%, #2a1810 100%);
    border: 2px solid #5fb4a2;
    border-radius: 4px;
    color: #5fb4a2;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 10px rgba(95, 180, 162, 0.3),
        inset 0 1px 3px rgba(255,255,255,0.1);
}

.quick-capture button:hover,
.glow-btn:hover {
    background: linear-gradient(135deg, #4d3426 0%, #3a2820 100%);
    box-shadow: 
        0 0 20px rgba(95, 180, 162, 0.5),
        inset 0 1px 3px rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

/* === Comedy Tabs === */
.comedy-tabs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.comedy-tab {
    padding: 0.75rem 2rem;
    background: rgba(42, 24, 16, 0.6);
    border: 2px solid #4a3520;
    border-radius: 4px;
    color: #b8a888;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.comedy-tab:hover {
    border-color: #5fb4a2;
    color: #5fb4a2;
}

.comedy-tab.active {
    background: rgba(95, 180, 162, 0.15);
    border-color: #5fb4a2;
    color: #5fb4a2;
    box-shadow: 0 0 15px rgba(95, 180, 162, 0.3);
}

.comedy-section {
    display: none;
}

.comedy-section.active {
    display: block;
}

/* === Projects Columns === */
.columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    width: 100%;
}

.column {
    background: linear-gradient(135deg, rgba(26, 20, 16, 0.7) 0%, rgba(42, 24, 16, 0.5) 100%);
    border: 2px solid #3a2a1a;
    border-radius: 8px;
    padding: 1.5rem;
    min-height: 400px;
    box-shadow: 
        0 4px 20px rgba(0,0,0,0.5),
        inset 0 0 30px rgba(95, 180, 162, 0.05);
}

/* Special styling for The Crypt */
.column[data-section="archive"] {
    background: linear-gradient(135deg, rgba(15, 12, 10, 0.9) 0%, rgba(25, 18, 14, 0.8) 100%);
    border-color: #2a2218;
    box-shadow: 
        0 4px 20px rgba(0,0,0,0.7),
        inset 0 0 40px rgba(0, 0, 0, 0.4);
}

.column[data-section="archive"] h2 {
    color: #888;
    text-shadow: 
        0 0 10px rgba(100, 100, 100, 0.3),
        2px 2px 4px rgba(0,0,0,0.9);
}

.column h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #5fb4a2;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 1;
    text-shadow: 
        0 0 15px rgba(95, 180, 162, 0.5),
        2px 2px 4px rgba(0,0,0,0.8);
    border-bottom: 2px solid rgba(95, 180, 162, 0.3);
    padding-bottom: 0.5rem;
}

/* Specific section headers */
.column[data-section="capture"] h2::before { content: "⚠ "; }
.column[data-section="active"] h2::before { content: "⚔ "; }
.column[data-section="queue"] h2::before { content: "👁 "; }
.column[data-section="archive"] h2::before { content: "💀 "; }

/* === Items (Enemy Threat Cards) === */
.items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.item {
    background: linear-gradient(135deg, rgba(30, 20, 15, 0.95) 0%, rgba(40, 25, 18, 0.9) 100%);
    padding: 1.25rem;
    border-radius: 6px;
    border: 2px solid #4a3520;
    border-left: 4px solid #8a4a4a;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 
        0 3px 12px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(95, 180, 162, 0.1);
    overflow: visible;
}

.item::before {
    content: "⚠ THREAT";
    position: absolute;
    top: -8px;
    left: 10px;
    background: #2a1810;
    padding: 2px 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    color: #5fb4a2;
    border: 1px solid #4a3520;
    border-radius: 3px;
    letter-spacing: 0.1em;
}

.item:hover {
    background: linear-gradient(135deg, rgba(40, 28, 20, 0.95) 0%, rgba(50, 35, 25, 0.9) 100%);
    border-left-color: #5fb4a2;
    box-shadow: 
        0 4px 16px rgba(0,0,0,0.6),
        0 0 20px rgba(95, 180, 162, 0.3),
        inset 0 1px 0 rgba(95, 180, 162, 0.2);
    transform: translateY(-2px);
}

/* Damage states */
.item.damaged-light::after {
    content: "⚔";
    position: absolute;
    top: 50%;
    right: 15px;
    font-size: 1.5rem;
    transform: rotate(45deg);
    opacity: 0.8;
    filter: drop-shadow(2px 2px 3px rgba(139, 0, 0, 0.6));
}

.item.damaged-medium {
    border-left-color: #a05050;
    background: linear-gradient(135deg, rgba(35, 20, 15, 0.95) 0%, rgba(45, 25, 18, 0.9) 100%);
}

.item.damaged-medium::after {
    content: "⚔⚠";
    position: absolute;
    top: 30%;
    right: 10px;
    font-size: 1.3rem;
    opacity: 0.9;
    filter: drop-shadow(2px 2px 4px rgba(139, 0, 0, 0.7));
}

.item.damaged-heavy {
    border-left-color: #c05858;
    background: linear-gradient(135deg, rgba(40, 18, 15, 0.95) 0%, rgba(50, 22, 16, 0.9) 100%);
    box-shadow: 
        0 3px 12px rgba(139, 0, 0, 0.4),
        inset 0 0 20px rgba(139, 0, 0, 0.15);
}

.item.damaged-heavy::after {
    content: "⚔⚠🔥";
    position: absolute;
    top: 20%;
    right: 8px;
    font-size: 1.2rem;
    opacity: 1;
    filter: drop-shadow(2px 2px 5px rgba(200, 50, 0, 0.8));
}

.item.defeated {
    opacity: 0.6;
    border-left-color: #666;
    background: linear-gradient(135deg, rgba(20, 15, 12, 0.8) 0%, rgba(25, 18, 14, 0.7) 100%);
}

.item.defeated::before {
    content: "💀 SLAIN";
    background: #1a1210;
    color: #888;
}

.item.defeated::after {
    content: "💀";
    position: absolute;
    top: 50%;
    right: 15px;
    font-size: 2rem;
    transform: translateY(-50%);
    opacity: 0.5;
}

.item-content {
    margin-bottom: 0.75rem;
    word-wrap: break-word;
    color: #d4c5a9;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding-right: 60px;
}

.item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    opacity: 0.7;
}

.item-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tag {
    background: rgba(95, 180, 162, 0.15);
    border: 1px solid rgba(95, 180, 162, 0.3);
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    font-size: 0.75rem;
    color: #5fb4a2;
}

.item-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.item:hover .item-actions {
    opacity: 1;
}

.move-btn {
    background: rgba(42, 24, 16, 0.9);
    border: 1px solid #5fb4a2;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    color: #5fb4a2;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.move-btn:hover {
    background: rgba(95, 180, 162, 0.2);
    box-shadow: 0 0 8px rgba(95, 180, 162, 0.4);
}

/* === Song/Journal/Bit/Comic Lists === */
.journal-entries, .bit-list, .comic-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Songs: tracklist layout */
.song-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.song-list .songs-main,
.song-list .songs-scraps {
    display: flex;
    flex-direction: column;
}

.songs-scraps-header {
    font-family: 'Cinzel', serif;
    color: #6a5a4a;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1.5rem 0 0.5rem 0;
    border-top: 1px solid #3a2a1a;
    margin-top: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.songs-scraps-header:hover {
    color: #8a7a6a;
}

.songs-scraps.collapsed .song-item {
    display: none;
}

/* Song items: compact tracklist rows */
.song-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(58, 42, 26, 0.5);
    cursor: pointer;
    transition: background 0.15s ease;
}

.song-item:hover {
    background: rgba(95, 180, 162, 0.06);
}

.song-item .track-num {
    font-family: monospace;
    font-size: 0.75rem;
    color: #5a4a3a;
    min-width: 1.5rem;
    text-align: right;
}

.song-item h3 {
    font-family: 'Cinzel', serif;
    color: #d4c4a8;
    font-size: 0.95rem;
    margin: 0;
    flex-shrink: 0;
}

.song-item:hover h3 {
    color: #5fb4a2;
}

.song-item .song-preview {
    font-family: 'IM Fell English', serif;
    font-size: 0.8rem;
    color: #6a5a4a;
    font-style: italic;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-item .item-tags {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* Other list items keep the card style */
.journal-item, .bit-item, .comic-item {
    background: rgba(42, 30, 20, 0.6);
    padding: 1.5rem;
    border: 2px solid #3a2a1a;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.journal-item:hover, .bit-item:hover, .comic-item:hover {
    border-color: #5fb4a2;
    box-shadow: 
        0 4px 15px rgba(0,0,0,0.3),
        0 0 20px rgba(95, 180, 162, 0.3);
    transform: translateY(-4px);
}

.journal-item h3, .bit-item h3, .comic-item h3 {
    font-family: 'Cinzel', serif;
    color: #5fb4a2;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.journal-item .date {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-bottom: 0.75rem;
}

.journal-item .preview {
    opacity: 0.85;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Journal entries need more breathing room */
.journal-entries {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.journal-item {
    padding: 2rem;
}

/* Comic Status Badges */
.comic-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    font-family: 'Cinzel', serif;
}

.comic-status.status-idea {
    background: rgba(150, 150, 150, 0.2);
    color: #aaa;
    border: 1px solid #666;
}

.comic-status.status-scripted {
    background: rgba(95, 180, 162, 0.2);
    color: #5fb4a2;
    border: 1px solid #5fb4a2;
}

.comic-status.status-in-progress {
    background: rgba(180, 150, 95, 0.2);
    color: #b4a05f;
    border: 1px solid #b4a05f;
}

.comic-status.status-complete {
    background: rgba(95, 180, 120, 0.2);
    color: #5fb478;
    border: 1px solid #5fb478;
}

/* === Modals === */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 8, 5, 0.9);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.modal.hidden {
    display: none;
}

.detail-view {
    background: linear-gradient(135deg, #1a1410 0%, #2a1c14 100%);
    border: 3px solid #4a3520;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 
        0 20px 60px rgba(0,0,0,0.8),
        0 0 40px rgba(95, 180, 162, 0.2),
        inset 0 0 60px rgba(95, 180, 162, 0.05);
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;
    border-bottom: 2px solid #3a2a1a;
}

/* Poem modal: tighter layout */
.poem-detail .detail-header {
    padding: 1rem 2rem;
}

.poem-detail .detail-content {
    padding: 1rem 2rem;
}

.detail-title {
    flex: 1;
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 400;
    background: transparent;
    border: none;
    color: #5fb4a2;
    padding: 0.5rem;
}

.detail-title:focus {
    outline: none;
    background: rgba(42, 30, 20, 0.4);
    border-radius: 4px;
}

.close-btn {
    background: transparent;
    border: none;
    color: #8a7a6a;
    font-size: 3rem;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #5fb4a2;
    text-shadow: 0 0 15px rgba(95, 180, 162, 0.5);
}

.detail-content {
    padding: 2rem;
}

.detail-section {
    margin-bottom: 2rem;
}

.detail-section h3 {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5fb4a2;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.detail-section textarea {
    width: 100%;
    min-height: 200px;
    padding: 1rem;
    background: rgba(26, 20, 16, 0.6);
    border: 2px solid #3a2a1a;
    border-radius: 4px;
    color: #d4c5a9;
    font-family: 'IM Fell English', serif;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
}

.detail-section textarea:focus {
    outline: none;
    border-color: #5fb4a2;
    box-shadow: 
        inset 0 2px 8px rgba(0,0,0,0.4),
        0 0 15px rgba(95, 180, 162, 0.2);
}

.detail-section input[type="text"],
.detail-section select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(26, 20, 16, 0.6);
    border: 2px solid #3a2a1a;
    border-radius: 4px;
    color: #d4c5a9;
    font-family: 'IM Fell English', serif;
    font-size: 1rem;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
}

.detail-section select {
    cursor: pointer;
    font-family: 'Cinzel', serif;
}

.detail-section select option {
    background: #2a1810;
    color: #d4c5a9;
}

.detail-section input[type="text"]:focus,
.detail-section select:focus {
    outline: none;
    border-color: #5fb4a2;
    box-shadow: 
        inset 0 2px 8px rgba(0,0,0,0.4),
        0 0 15px rgba(95, 180, 162, 0.2);
}

/* === Subtasks & Links === */
.subtask-item, .link-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(42, 30, 20, 0.4);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.subtask-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #5fb4a2;
}

.subtask-item span, .link-item a {
    flex: 1;
    color: #d4c5a9;
}

.link-item a {
    color: #8bc4b8;
    text-decoration: none;
}

.link-item a:hover {
    text-decoration: underline;
    color: #5fb4a2;
}

.subtask-item.completed span {
    text-decoration: line-through;
    opacity: 0.5;
}

.remove-btn {
    background: transparent;
    border: none;
    color: #8a7a6a;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s;
}

.remove-btn:hover {
    color: #c75050;
}

.add-subtask, .add-link {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.add-subtask input,
.add-link input {
    flex: 1;
}

.add-subtask button,
.add-link button {
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #3d2416 0%, #2a1810 100%);
    border: 1px solid #5fb4a2;
    border-radius: 4px;
    color: #5fb4a2;
    cursor: pointer;
    transition: all 0.2s;
}

.add-subtask button:hover,
.add-link button:hover {
    background: rgba(95, 180, 162, 0.2);
    box-shadow: 0 0 10px rgba(95, 180, 162, 0.3);
}

/* === Detail Actions === */
.detail-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    border-top: 2px solid #3a2a1a;
    flex-wrap: wrap;
    gap: 1rem;
}

.move-section {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.move-section label {
    color: #8a7a6a;
    font-size: 0.9rem;
    font-family: 'Cinzel', serif;
}

.move-to-btn {
    padding: 0.5rem 1rem;
    background: rgba(42, 24, 16, 0.6);
    border: 1px solid #4a3520;
    border-radius: 4px;
    color: #d4c5a9;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: 'Cinzel', serif;
    transition: all 0.2s;
}

.move-to-btn:hover {
    background: rgba(95, 180, 162, 0.15);
    border-color: #5fb4a2;
}

.move-to-btn.current {
    background: rgba(95, 180, 162, 0.2);
    border-color: #5fb4a2;
    color: #5fb4a2;
}

.action-buttons {
    display: flex;
    gap: 0.75rem;
}

.primary-btn, .danger-btn {
    padding: 0.75rem 2rem;
    border: 2px solid;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Cinzel', serif;
    transition: all 0.3s ease;
}

.primary-btn {
    background: linear-gradient(135deg, #2a4a3d 0%, #1a3a2d 100%);
    border-color: #5fb4a2;
    box-shadow: 0 0 10px rgba(95, 180, 162, 0.3);
}

.primary-btn:hover {
    background: linear-gradient(135deg, #3a5a4d 0%, #2a4a3d 100%);
    box-shadow: 0 0 20px rgba(95, 180, 162, 0.5);
    transform: translateY(-2px);
}

.danger-btn {
    background: linear-gradient(135deg, #4a2a2a 0%, #3a1a1a 100%);
    border-color: #9a5a5a;
    box-shadow: 0 0 10px rgba(154, 90, 90, 0.3);
}

.danger-btn:hover {
    background: linear-gradient(135deg, #5a3a3a 0%, #4a2a2a 100%);
    box-shadow: 0 0 20px rgba(154, 90, 90, 0.5);
    transform: translateY(-2px);
}

/* === Scrollbars === */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(26, 20, 16, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(95, 180, 162, 0.3);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(95, 180, 162, 0.5);
}


/* === Image Upload Controls === */
.image-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.upload-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.upload-btn {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #3d2416 0%, #2a1810 100%);
    border: 2px solid #5fb4a2;
    border-radius: 4px;
    color: #5fb4a2;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-btn:hover {
    background: rgba(95, 180, 162, 0.2);
    box-shadow: 0 0 15px rgba(95, 180, 162, 0.4);
    transform: translateY(-2px);
}

.upload-btn.uploading {
    opacity: 0.6;
    cursor: wait;
}

#uploadStatus {
    font-size: 0.9rem;
    color: #8a7a6a;
    font-style: italic;
}

#uploadStatus.success {
    color: #5fb478;
}

#uploadStatus.error {
    color: #c75050;
}

.or-divider {
    display: block;
    text-align: center;
    color: #6a5a4a;
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

.url-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* === Image Preview in List === */
.image-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(42, 30, 20, 0.4);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.image-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #4a3520;
}

.image-item .image-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.image-item .image-title {
    color: #d4c5a9;
    font-weight: 500;
}

.image-item .image-url {
    color: #8bc4b8;
    font-size: 0.8rem;
    text-decoration: none;
    word-break: break-all;
}

.image-item .image-url:hover {
    text-decoration: underline;
    color: #5fb4a2;
}


/* === Comic Cards Grid === */
.comic-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

.comic-card {
    background: linear-gradient(135deg, #2a1810 0%, #1a0f0a 100%);
    border: 1px solid #4a3520;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.comic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(95, 180, 162, 0.2);
    border-color: #5fb4a2;
}

.comic-preview {
    width: 100%;
    aspect-ratio: 1 / 1.2;
    overflow: hidden;
    background: #1a0f0a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comic-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #1a0f0a;
}

.comic-placeholder {
    color: #6a5a4a;
    font-style: italic;
    font-size: 0.9rem;
    text-align: center;
    padding: 2rem;
}

.comic-info {
    padding: 1rem;
    border-top: 1px solid #3a2515;
}

.comic-info h3 {
    margin: 0 0 0.5rem 0;
    color: #d4c5a9;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
}

.comic-status {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

.comic-status.status-idea {
    background: rgba(128, 128, 128, 0.3);
    color: #aaa;
}

.comic-status.status-scripted {
    background: rgba(95, 180, 162, 0.2);
    color: #5fb4a2;
}

.comic-status.status-in-progress {
    background: rgba(212, 175, 55, 0.2);
    color: #d4af37;
}

.comic-status.status-complete {
    background: rgba(95, 180, 120, 0.2);
    color: #5fb478;
}


/* === HEALTH WORKSPACE === */

/* Health Tabs */
.health-tabs {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.health-tab {
    background: transparent;
    border: 1px solid #4a3520;
    color: #b8a888;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.health-tab:hover {
    border-color: #5fb4a2;
    color: #d4c5a9;
}

.health-tab.active {
    background: rgba(95, 180, 162, 0.2);
    border-color: #5fb4a2;
    color: #5fb4a2;
}

.health-section {
    display: none;
    padding: 1.5rem 0;
}

.health-section.active {
    display: block;
}


/* Pain Log Section */
.pain-log-controls {
    background: rgba(42, 24, 16, 0.6);
    border: 1px solid #4a3520;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.quick-pain-entry {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.quick-pain-entry label {
    color: #d4c5a9;
    font-family: 'Cinzel', serif;
}

.pain-slider-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pain-slider-container input[type="range"] {
    -webkit-appearance: none;
    width: 150px;
    height: 8px;
    background: linear-gradient(to right, #5fb478, #d4af37, #c45a5a);
    border-radius: 4px;
    outline: none;
}

.pain-slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #d4c5a9;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #2a1810;
}

#painLevelDisplay, #painLevelEditDisplay {
    font-size: 1.5rem;
    font-weight: bold;
    color: #d4af37;
    min-width: 2rem;
    text-align: center;
}

.quick-pain-entry input[type="text"] {
    flex: 1;
    min-width: 200px;
}

#logPainBtn {
    background: linear-gradient(135deg, #5fb4a2, #3d8577);
    border: none;
    color: #1a0f0a;
    padding: 0.75rem 1.5rem;
    font-family: 'Cinzel', serif;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

#logPainBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(95, 180, 162, 0.3);
}


/* Pain Log Entries */
.pain-log-entries {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pain-entry {
    background: rgba(42, 24, 16, 0.5);
    border: 1px solid #3a2515;
    border-radius: 6px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pain-entry:hover {
    border-color: #5fb4a2;
    background: rgba(42, 24, 16, 0.7);
}

.pain-entry-level {
    font-size: 1.5rem;
    font-weight: bold;
    min-width: 3rem;
    text-align: center;
    padding: 0.5rem;
    border-radius: 4px;
}

.pain-entry-level.low { background: rgba(95, 180, 120, 0.3); color: #5fb478; }
.pain-entry-level.medium { background: rgba(212, 175, 55, 0.3); color: #d4af37; }
.pain-entry-level.high { background: rgba(196, 90, 90, 0.3); color: #c45a5a; }

.pain-entry-content {
    flex: 1;
}

.pain-entry-date {
    color: #8a7a6a;
    font-size: 0.85rem;
}

.pain-entry-note {
    color: #d4c5a9;
    margin-top: 0.25rem;
}


/* Routine Section */
.routine-date {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: #d4c5a9;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #3a2515;
}

.routine-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.routine-category {
    background: rgba(42, 24, 16, 0.5);
    border: 1px solid #3a2515;
    border-radius: 8px;
    padding: 1rem;
}

.routine-category h3 {
    color: #d4c5a9;
    font-family: 'Cinzel', serif;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #3a2515;
}

.routine-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: #b8a888;
}

.routine-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #5fb4a2;
    cursor: pointer;
}

.routine-item.checked {
    text-decoration: line-through;
    opacity: 0.6;
}

.routine-item label {
    cursor: pointer;
    flex: 1;
}


/* Reference Section */
.reference-content {
    background: rgba(42, 24, 16, 0.5);
    border: 1px solid #3a2515;
    border-radius: 8px;
    padding: 2rem;
    color: #b8a888;
    line-height: 1.8;
    max-height: 70vh;
    overflow-y: auto;
}

.reference-content h1, .reference-content h2, .reference-content h3 {
    color: #d4c5a9;
    font-family: 'Cinzel', serif;
    margin-top: 1.5rem;
}

.reference-content h1 { font-size: 1.5rem; }
.reference-content h2 { font-size: 1.3rem; color: #5fb4a2; }
.reference-content h3 { font-size: 1.1rem; }

.reference-content hr {
    border: none;
    border-top: 1px solid #4a3520;
    margin: 1.5rem 0;
}

.reference-content strong {
    color: #d4c5a9;
}

.reference-content ul, .reference-content ol {
    padding-left: 1.5rem;
}

.reference-content li {
    margin: 0.5rem 0;
}

/* Pain Detail Modal */
.pain-detail {
    max-width: 500px;
}


/* ======================= */
/* Poetry Section Styles   */
/* ======================= */

/* Poem Gallery */
.poem-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
}

.poem-card {
    background: rgba(42, 24, 16, 0.6);
    border: 1px solid #3a2515;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.poem-card:hover {
    transform: translateY(-4px);
    border-color: #5fb4a2;
    box-shadow: 0 8px 24px rgba(95, 180, 162, 0.15);
}

.poem-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid #3a2515;
}

.poem-card-image.placeholder {
    background: linear-gradient(135deg, #2a1810 0%, #1a0f08 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #4a3520;
}

.poem-card-content {
    padding: 1rem;
}

.poem-card-title {
    font-family: 'Cinzel', serif;
    color: #d4c5a9;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.poem-card-preview {
    color: #8a7a5a;
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
}

.poem-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

.poem-card-tags .tag {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: rgba(95, 180, 162, 0.15);
    border: 1px solid rgba(95, 180, 162, 0.3);
    border-radius: 10px;
    color: #5fb4a2;
}

/* Poem with image overlay option */
.poem-card.with-overlay .poem-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(10, 5, 2, 0.95));
    padding: 2rem 1rem 1rem;
}

.poem-card.with-overlay .poem-card-image {
    height: 300px;
}

/* Poem Detail Modal */
.poem-detail {
    max-width: 700px;
}

/* Song lyrics textarea — needs more room */
.song-detail #songLyrics {
    min-height: 400px;
}

.poem-content-section textarea {
    min-height: 300px;
    font-family: 'IM Fell English', serif;
    font-size: 1.1rem;
    line-height: 1.8;
    white-space: pre-wrap;
}

.poem-image-preview {
    margin-bottom: 1rem;
}

.poem-image-preview img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #3a2515;
}

.poem-image-preview.empty {
    display: none;
}


/* === Tome Divider === */
.tome-divider {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(95, 180, 162, 0.3), transparent);
    margin: 0.75rem auto;
}

/* === About Me Section === */
.about-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.about-hero {
    margin-bottom: 2.5rem;
    text-align: center;
}

.about-hero-img {
    width: 100%;
    max-width: 800px;
    border-radius: 8px;
    opacity: 0.85;
    border: 1px solid rgba(95, 180, 162, 0.15);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
    transition: opacity 0.5s ease;
}

.about-hero-img:hover {
    opacity: 1;
}

.about-preface {
    text-align: center;
    margin-bottom: 3rem;
    padding: 1.5rem;
    background: rgba(42, 30, 20, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(95, 180, 162, 0.2);
}

.preface-quote {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 1.3rem;
    color: #8a7a6a;
    margin: 0;
}

.about-section {
    margin-bottom: 4rem;
}

.prose-content {
    font-size: 1.15rem;
    line-height: 1.9;
}

.prose-content p {
    margin-bottom: 1.5rem;
    text-indent: 0;
}

.chronicler {
    font-style: italic;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(26, 20, 16, 0.6) 0%, rgba(42, 24, 16, 0.4) 100%);
    border-left: 3px solid rgba(95, 180, 162, 0.4);
    border-radius: 0 8px 8px 0;
}

.chronicler-conclusion {
    font-style: normal;
    font-weight: 600;
    color: #5fb4a2;
    text-shadow: 0 0 20px rgba(95, 180, 162, 0.3);
    margin-bottom: 0 !important;
}

/* Mourning Section */
.mourning-section {
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(15, 10, 8, 0.8) 0%, rgba(25, 15, 12, 0.6) 100%);
    border: 1px solid rgba(95, 180, 162, 0.15);
    border-radius: 12px;
    margin-top: 4rem;
}

.mourning-section h2 {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: #5fb4a2;
    text-align: center;
    margin-bottom: 2rem;
    text-shadow: 0 0 30px rgba(95, 180, 162, 0.4);
}

.mourning {
    text-align: center;
}

.mourning p {
    text-indent: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.mourning-opening {
    font-size: 1.4rem;
    color: #5fb4a2;
    font-weight: 600;
    margin-bottom: 2rem !important;
}

.mourning-closing {
    font-size: 1.3rem;
    color: #5fb4a2;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0 !important;
    text-shadow: 0 0 20px rgba(95, 180, 162, 0.4);
}

/* === Escapism Section === */
.workspace-subtitle {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: #8a7a6a;
    margin-top: -1rem;
    margin-bottom: 2rem;
}

.wip-notice {
    background: rgba(196, 162, 101, 0.1);
    border: 1px solid rgba(196, 162, 101, 0.3);
    border-radius: 6px;
    padding: 0.6rem 1rem;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: #c4a265;
    margin-bottom: 1.5rem;
}

.escapism-container {
    max-width: 1200px;
    margin: 0 auto;
}

.escapism-tabs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.escapism-tab {
    padding: 0.75rem 2rem;
    background: rgba(42, 24, 16, 0.6);
    border: 2px solid #4a3520;
    border-radius: 4px;
    color: #b8a888;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.escapism-tab:hover {
    border-color: #5fb4a2;
    color: #5fb4a2;
}

.escapism-tab.active {
    background: rgba(95, 180, 162, 0.15);
    border-color: #5fb4a2;
    color: #5fb4a2;
    box-shadow: 0 0 15px rgba(95, 180, 162, 0.3);
}

.escapism-section {
    display: none;
}

.escapism-section.active {
    display: block;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.media-card {
    background: rgba(42, 30, 20, 0.6);
    padding: 1.5rem;
    border: 2px solid #3a2a1a;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.media-card:hover {
    border-color: #5fb4a2;
    box-shadow: 
        0 4px 15px rgba(0,0,0,0.3),
        0 0 20px rgba(95, 180, 162, 0.3);
    transform: translateY(-4px);
}

.media-card h3 {
    font-family: 'Cinzel', serif;
    color: #5fb4a2;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.media-card .creator {
    font-size: 0.9rem;
    color: #8a7a6a;
    margin-bottom: 0.75rem;
}

.media-card .notes {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.85;
}

/* === Donations Section === */
.donations-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.donations-section {
    margin-bottom: 3rem;
    padding: 2rem;
    background: rgba(42, 30, 20, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(95, 180, 162, 0.15);
}

.donations-section h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: #5fb4a2;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 15px rgba(95, 180, 162, 0.3);
}

.donation-links {
    text-align: center;
    padding: 2rem;
}

.donation-placeholder {
    color: #6a5a4a;
    font-style: italic;
}

.transparency-list {
    list-style: none;
    padding: 0;
}

.transparency-list li {
    padding: 0.75rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.transparency-list li::before {
    content: "◆";
    position: absolute;
    left: 0;
    color: #5fb4a2;
    font-size: 0.7rem;
}

/* Scrying Workspace */
.scrying-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

.scrying-status {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(42, 30, 20, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(95, 180, 162, 0.1);
}

.status-label {
    color: #6a5a4a;
    margin-right: 0.5rem;
}

.status-time {
    color: #5fb4a2;
    font-family: 'Cinzel', serif;
}

.scrying-feed {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.scrying-empty {
    text-align: center;
    color: #6a5a4a;
    font-style: italic;
    padding: 3rem;
}

.scrying-entry {
    background: rgba(42, 30, 20, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(95, 180, 162, 0.15);
    padding: 1.5rem;
    transition: border-color 0.3s ease;
}

.scrying-entry:hover {
    border-color: rgba(95, 180, 162, 0.35);
}

.scrying-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.scrying-entry-header h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: #5fb4a2;
    margin: 0;
}

.scrying-entry-header time {
    color: #6a5a4a;
    font-size: 0.85rem;
}

.scrying-entry-content {
    color: #e8d8c4;
    line-height: 1.7;
}

.scrying-entry-content p {
    margin-bottom: 0.75rem;
}

.scrying-entry-content ul {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}

.scrying-entry-content li {
    margin-bottom: 0.5rem;
}

.scrying-entry-sources {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(95, 180, 162, 0.1);
    font-size: 0.85rem;
    color: #6a5a4a;
}

/* ========== POETRY FILTER ========== */
.poetry-filter {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.filter-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #3a2a1a;
    padding: 0.5rem 0.75rem;
    color: #d4c4a8;
    font-family: 'IM Fell English', serif;
    font-size: 0.85rem;
    border-radius: 4px;
}

.filter-select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #3a2a1a;
    padding: 0.5rem 0.75rem;
    color: #d4c4a8;
    font-family: 'IM Fell English', serif;
    font-size: 0.85rem;
    border-radius: 4px;
    min-width: 120px;
}

.filter-input::placeholder { color: #6a5a4a; }
.filter-input:focus, .filter-select:focus {
    outline: none;
    border-color: #5fb4a2;
}

/* ========== DONATION LINKS ========== */
.donation-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #3a2a1a;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.donation-method.coming-soon {
    opacity: 0.6;
}

.donation-icon {
    font-size: 1.5rem;
}

.donation-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.donation-info strong {
    color: #5fb4a2;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
}

.donation-info a {
    color: #d4c4a8;
    text-decoration: none;
    font-size: 0.9rem;
}

.donation-info a:hover {
    color: #5fb4a2;
}

.donation-email {
    color: #8a7a6a;
    font-size: 0.8rem;
    font-family: monospace;
}

.donation-note {
    color: #8a7a6a;
    font-size: 0.85rem;
    font-style: italic;
}

/* ========== COMEDY BITS - SMALLER TEXT ========== */
.bit-item h3 {
    font-size: 0.95rem;
}

.bit-item {
    padding: 0.75rem 1rem;
}

/* Comedy joke tag styling */
.bit-item.is-joke {
    border-left: 2px solid #5fb4a2;
    opacity: 0.85;
}

.bit-item .joke-badge {
    font-size: 0.7rem;
    color: #5fb4a2;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-left: 0.5rem;
}

/* ========== ESCAPISM MEDIA CARDS ========== */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.media-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid #3a2a1a;
    border-radius: 6px;
    padding: 1rem;
    transition: border-color 0.2s ease;
}

.media-card:hover {
    border-color: #5fb4a2;
}

.media-title {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: #d4c4a8;
    margin: 0 0 0.25rem 0;
}

.media-year {
    font-size: 0.75rem;
    color: #6a5a4a;
}

.media-note {
    font-family: 'IM Fell English', serif;
    font-size: 0.8rem;
    color: #8a7a6a;
    margin: 0.4rem 0 0.25rem 0;
    font-style: italic;
}

/* ========== PROJECTS PORTFOLIO ========== */
.projects-portfolio {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.project-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #3a2a1a;
    border-radius: 8px;
    padding: 2rem;
}

.project-card.featured {
    border-color: #5fb4a2;
    border-width: 2px;
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-header h2 {
    font-family: 'Cinzel', serif;
    color: #5fb4a2;
    font-size: 1.4rem;
    margin: 0;
}

.project-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-family: 'IM Fell English', serif;
    letter-spacing: 0.05em;
}

.project-status.active {
    background: rgba(95, 180, 162, 0.15);
    color: #5fb4a2;
    border: 1px solid rgba(95, 180, 162, 0.3);
}

.project-status.previous {
    background: rgba(138, 122, 102, 0.15);
    color: #8a7a66;
    border: 1px solid rgba(138, 122, 102, 0.3);
}

.project-tagline {
    font-family: 'IM Fell English', serif;
    font-size: 1.05rem;
    color: #d4c4a8;
    font-style: italic;
    margin: 0 0 1.25rem 0;
}

.project-description p {
    font-family: 'IM Fell English', serif;
    color: #b0a090;
    line-height: 1.7;
    margin: 0 0 0.75rem 0;
}

.project-features h3,
.project-press h3,
.project-contact h3 {
    font-family: 'Cinzel', serif;
    color: #d4c4a8;
    font-size: 0.95rem;
    margin: 1.25rem 0 0.5rem 0;
}

.project-features ul {
    list-style: none;
    padding: 0;
}

.project-features li {
    font-family: 'IM Fell English', serif;
    color: #b0a090;
    padding: 0.3rem 0;
    padding-left: 1.25rem;
    position: relative;
}

.project-features li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: #5fb4a2;
    font-size: 0.6rem;
    top: 0.5rem;
}

.project-screenshots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.project-screenshot {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #3a2a1a;
    cursor: pointer;
    transition: border-color 0.2s;
}

.project-screenshot:hover {
    border-color: #5fb4a2;
}

.project-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.project-link {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(95, 180, 162, 0.1);
    border: 1px solid rgba(95, 180, 162, 0.3);
    border-radius: 6px;
    color: #5fb4a2;
    text-decoration: none;
    font-family: 'IM Fell English', serif;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.project-link:hover {
    background: rgba(95, 180, 162, 0.2);
}

.project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.meta-item {
    font-size: 0.75rem;
    color: #6a5a4a;
    font-family: monospace;
    padding: 0.2rem 0.6rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.project-contact p {
    font-family: 'IM Fell English', serif;
    color: #b0a090;
    margin: 0.25rem 0;
}

.contact-email a {
    color: #5fb4a2;
    text-decoration: none;
}

.contact-email a:hover {
    text-decoration: underline;
}

.press-link {
    color: #d4c4a8;
    text-decoration: none;
    font-family: 'IM Fell English', serif;
    font-size: 0.95rem;
}

.press-link:hover {
    color: #5fb4a2;
}

/* === COPY PROTECTION === */
.copy-protected {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.guest-mode .copy-protected textarea,
.guest-mode .copy-protected input {
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* === LOCKED BITS === */
.locked-bit {
    opacity: 0.45;
    filter: grayscale(0.6);
    cursor: not-allowed !important;
    position: relative;
}

.locked-bit:hover {
    opacity: 0.6;
    filter: grayscale(0.3);
}

.locked-bit .lock-icon {
    margin-right: 6px;
    font-size: 0.85em;
}

.locked-bit h3 {
    color: #7a6a5a !important;
}

/* Locked overlay modal */
.locked-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.locked-modal {
    background: #1a1208;
    border: 1px solid #3a2a1a;
    border-radius: 8px;
    padding: 2rem;
    max-width: 400px;
    text-align: center;
    color: #c4a882;
    font-family: 'IM Fell English', serif;
}

.locked-modal h3 {
    color: #e8d5b7;
    margin-bottom: 0.8rem;
}

.locked-modal p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

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

.locked-patreon-btn {
    background: #ff424d;
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-family: 'IM Fell English', serif;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.locked-patreon-btn:hover {
    background: #e03540;
}

.locked-buttons button {
    background: #2a1a0a;
    color: #c4a882;
    border: 1px solid #3a2a1a;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'IM Fell English', serif;
    font-size: 0.95rem;
}

.locked-buttons button:hover {
    background: #3a2a1a;
}

/* === ABOUT PAGE - PROFESSIONAL HEADER === */
.about-professional {
    background: linear-gradient(135deg, #1a1208 0%, #2a1a0a 100%);
    border: 1px solid #3a2a1a;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.about-professional h2 {
    color: #e8d5b7;
    font-family: 'IM Fell English', serif;
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

.about-professional p {
    color: #c4a882;
    line-height: 1.7;
    margin-bottom: 0.8rem;
}

.about-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.about-skill-card {
    background: rgba(95, 180, 162, 0.08);
    border: 1px solid rgba(95, 180, 162, 0.2);
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
}

.about-skill-card .skill-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.about-skill-card h4 {
    color: #5fb4a2;
    font-family: 'IM Fell English', serif;
    margin-bottom: 0.3rem;
}

.about-skill-card p {
    color: #8a7a6a;
    font-size: 0.85rem;
    margin: 0;
}

.about-contact {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #3a2a1a;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.about-contact a {
    color: #5fb4a2;
    text-decoration: none;
    font-family: 'IM Fell English', serif;
    transition: color 0.2s;
}

.about-contact a:hover {
    color: #7fd4c2;
}


/* ====================================================================
   MANUSCRIPT REDESIGN v1  —  appended 20260427_192510
   Direction: pages from a tome, not cards on a dashboard.
   Bookshelf nav + landing gate + per-tome theming all preserved.
   ==================================================================== */

/* --- Workspace header: top rule + fleuron + illuminated title --- */
.workspace .workspace-header {
    text-align: center;
    margin: 2.2rem 0 2.4rem 0;
    padding-top: 32px;
    border-top: 1px solid #5a4530;
    position: relative;
}

.workspace .workspace-header::before {
    content: '\2766';   /* ❦ floral heart fleuron */
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1410 100%);
    color: #8a7560;
    padding: 0 14px;
    font-size: 18px;
    line-height: 1;
}

.workspace .workspace-header h1 {
    font-family: 'Cinzel', serif;
    font-size: 2.2rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.42em !important;
    color: #c4a265 !important;
    text-transform: uppercase;
    padding-left: 0.42em;
    text-shadow: none !important;
    margin: 0 0 0.4rem 0 !important;
}

/* New element — italic subtitle under the title */
.workspace .workspace-subtitle {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    color: #8a7560;
    font-size: 0.95rem;
    margin: 0;
    letter-spacing: 0.04em;
    text-align: center;
}

/* --- Bottom folio mark — every workspace closes with this --- */
.workspace::after {
    content: '\00b7  \00b7  \00b7';   /* three middle dots */
    display: block;
    text-align: center;
    color: #8a7560;
    font-size: 1rem;
    letter-spacing: 0.5em;
    padding-left: 0.5em;
    margin: 3.5rem 0 1.5rem 0;
    opacity: 0.55;
}

/* --- Modal text contrast bump (small accessibility win) --- */
.detail-section textarea,
.detail-section input[type="text"],
.detail-section select {
    color: #e8dcc4;
    border-color: #5a4530;
}

.detail-section textarea::placeholder,
.detail-section input[type="text"]::placeholder {
    color: #8a7560;
}

.quick-capture input::placeholder {
    color: #8a7560;
}

/* --- About: prose treatment + drop cap on first paragraph --- */
#workspace-about .about-professional {
    max-width: 680px;
    margin: 0 auto;
}

#workspace-about .about-professional p {
    font-family: 'IM Fell English', serif;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #d4c5a9;
    margin-bottom: 1.1rem;
}

#workspace-about .about-professional > p:first-of-type::first-letter {
    font-family: 'Cinzel', serif;
    font-size: 4.2rem;
    line-height: 0.85;
    float: left;
    color: #c4a265;
    padding: 0.35rem 0.75rem 0 0;
    font-weight: 400;
}

#workspace-about .about-professional > h2 {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: #c4a265;
    text-transform: uppercase;
    text-align: center;
    margin: 2.5rem 0 1.5rem 0;
    padding-left: 0.32em;
    text-shadow: none;
    border-bottom: none;
}

/* --- Songs: cards become ledger entries --- */
.songs-main {
    max-width: 720px;
    margin: 0 auto;
}

.song-item {
    display: grid !important;
    grid-template-columns: 26px 1fr auto !important;
    column-gap: 14px !important;
    row-gap: 4px !important;
    align-items: baseline !important;
    padding: 14px 4px !important;
    border: none !important;
    border-bottom: 0.5px solid #2a2014 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.15s ease;
}

.song-item:hover {
    background: rgba(196, 162, 101, 0.05) !important;
    transform: none !important;
}

.song-item::before {
    content: '\25b9';   /* ▹ white right-pointing triangle */
    color: #8a7560;
    font-size: 0.95rem;
    grid-column: 1;
    grid-row: 1;
    align-self: baseline;
    line-height: 1.45;
    transition: color 0.15s ease;
}

.song-item:hover::before {
    color: #c4a265;
}

.song-item .track-num {
    grid-column: 3;
    grid-row: 1;
    color: #8a7560 !important;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.95rem !important;
    text-align: right;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.song-item h3 {
    grid-column: 2;
    grid-row: 1;
    color: #d4c5a9 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: none !important;
    line-height: 1.4 !important;
}

.song-item .song-preview {
    grid-column: 2;
    grid-row: 2;
    font-family: 'IM Fell English', serif !important;
    font-style: italic;
    color: #8a7560 !important;
    font-size: 0.88rem !important;
}

.song-item .item-tags {
    grid-column: 2;
    grid-row: 3;
    display: inline-block !important;
    margin: 0 !important;
}

.song-item .item-tags .tag {
    background: none !important;
    border: none !important;
    color: #8a7560 !important;
    font-family: 'IM Fell English', serif !important;
    font-style: italic;
    font-size: 0.85rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: inline !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.song-item .item-tags .tag:not(:last-child)::after {
    content: ' \00b7 ';   /* · middle dot */
    color: #8a7560;
}

/* Songs: scraps section gets soft fleuron break and dimmer entries */
.songs-scraps {
    max-width: 720px;
    margin: 1.5rem auto 0 auto;
    padding-top: 1.5rem;
    border-top: 1px solid #2a2014;
}

.songs-scraps-header {
    text-align: center;
    color: #6a5a4a !important;
    font-family: 'IM Fell English', serif !important;
    font-style: italic;
    font-size: 0.9rem !important;
    background: none !important;
    border: none !important;
    padding: 0 0 0.8rem 0 !important;
    cursor: pointer;
    letter-spacing: 0.05em;
}

.songs-scraps .song-item h3 {
    color: #8a7560 !important;
    font-style: italic;
}

.songs-scraps .song-item::before {
    content: '\00b7' !important;   /* simple middle dot for scraps */
    color: #6a5a4a !important;
    font-size: 1.2rem !important;
}

/* ==================================================================
   END MANUSCRIPT REDESIGN v1
   ================================================================== */


/* ====================================================================
   COMIC READER  —  added 20260427_194209
   ==================================================================== */

.comic-reader {
    background: #14100a;
    border: 1px solid #3a2a1a;
    width: 95%;
    max-width: 960px;
    max-height: 92vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.85),
        0 0 40px rgba(196, 162, 101, 0.08);
}

.comic-reader-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 0.5px solid #3a2a1a;
    flex-shrink: 0;
    background: #1a1208;
}

.comic-reader-header h2 {
    font-family: 'Cinzel', serif;
    color: #c4a265;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    margin: 0;
    text-transform: uppercase;
    padding-left: 0.12em;
}

.comic-reader-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.comic-reader-edit {
    background: transparent;
    border: 1px solid #5a4530;
    color: #8a7560;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: all 0.2s ease;
}

.comic-reader-edit:hover {
    color: #c4a265;
    border-color: #c4a265;
    box-shadow: 0 0 8px rgba(196, 162, 101, 0.2);
}

.comic-reader-edit.hidden {
    display: none;
}

.comic-reader .close-btn {
    color: #8a7560;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    padding: 0 0.5rem;
    transition: color 0.2s;
}

.comic-reader .close-btn:hover {
    color: #c4a265;
}

.comic-reader-images {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: #0a0806;
}

.comic-reader-image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.comic-reader-empty {
    color: #6a5a4a;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    text-align: center;
    padding: 4rem 2rem;
    font-size: 1.05rem;
}

@media (max-width: 768px) {
    .comic-reader {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    .comic-reader-images {
        padding: 1rem 0.5rem;
    }
}

/* ====================================================================
   LANDING GATE — bg + snow override  20260427_232655
   ==================================================================== */
.landing-gate {
    background:
        linear-gradient(180deg, rgba(5,5,10,0.7) 0%, rgba(10,8,5,0.6) 40%, rgba(5,5,10,0.8) 100%),
        url('/uploads/wizard-tower-bg.png') center center / cover no-repeat;
    overflow: hidden;
}
.landing-content { position: relative; z-index: 2; }

.snow-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.snowflake {
    position: absolute;
    top: -10px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    animation: snowfall linear infinite;
}
@keyframes snowfall {
    0%   { transform: translateY(-10px) translateX(0px) rotate(0deg); opacity: 1; }
    25%  { transform: translateY(25vh) translateX(15px) rotate(90deg); }
    50%  { transform: translateY(50vh) translateX(-10px) rotate(180deg); }
    75%  { transform: translateY(75vh) translateX(20px) rotate(270deg); }
    100% { transform: translateY(105vh) translateX(-5px) rotate(360deg); opacity: 0.3; }
}


/* ====================================================================
   ABOUT WORKSPACE BACKGROUND  —  added 20260427_233604
   ==================================================================== */

#workspace-about {
    position: relative;
}

#workspace-about::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        linear-gradient(180deg, rgba(5,5,10,0.7) 0%, rgba(10,8,5,0.6) 40%, rgba(5,5,10,0.8) 100%),
        url('/uploads/arcana-bookshelf.png') center center / cover no-repeat;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
}

/* Make sure the content sits above the bg layer */
#workspace-about > * {
    position: relative;
    z-index: 1;
}