/* ========================================
   HORNSTOWN IN-GAME UI CSS
   Modern theme specific styles for main game interface
   ======================================== */

/* Only apply to modern themes - variables are already defined in modern-theme.css */

/* ========================================
   MAIN GAME CONTAINER
   ======================================== */

:root[data-theme="modern"] html,
:root[data-theme="modern-light"] html,
:root[data-theme="modern"] body,
:root[data-theme="modern-light"] body {
    height: 100% !important;
    overflow: hidden !important;
    font-family: 'Crimson Text', serif !important;
    color: var(--text-primary) !important;
    background: transparent !important;
    transition: all 0.5s ease !important;
}

/* Hide legacy elements in modern theme */
:root[data-theme="modern"] #avatarContainer,
:root[data-theme="modern-light"] #avatarContainer,
:root[data-theme="modern"] #legacyStatusBar,
:root[data-theme="modern-light"] #legacyStatusBar,
:root[data-theme="modern"] #legacyNpcSidebar,
:root[data-theme="modern-light"] #legacyNpcSidebar,
:root[data-theme="modern"] #legacyFooter,
:root[data-theme="modern-light"] #legacyFooter,
:root[data-theme="modern"] #csheet,
:root[data-theme="modern-light"] #csheet,
:root[data-theme="modern"] #myModal2,
:root[data-theme="modern-light"] #myModal2 {
    display: none !important;
}

/* Hide legacy text container wrapper in modern theme */
:root[data-theme="modern"] #textContainer,
:root[data-theme="modern-light"] #textContainer {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Location picture - ensure it's visible in modern theme */
:root[data-theme="modern"] #locpicdiv,
:root[data-theme="modern-light"] #locpicdiv {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: transparent !important;
    opacity: 1 !important;
}

/* Location picture overlay - dark purple with blur */
:root[data-theme="modern"] .locpic-overlay,
:root[data-theme="modern-light"] .locpic-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: radial-gradient(circle at center, 
        rgba(54, 40, 54, 0.1) 0%, 
        rgba(54, 40, 54, 0.3) 30%, 
        rgba(54, 40, 54, 0.5) 60%, 
        rgba(54, 40, 54, 0.7) 100%) !important; /* Concentric gradient from center to edges */
    backdrop-filter: blur(3px) !important; /* Subtle blur effect */
    z-index: 2 !important;
    pointer-events: none !important;
    display: block !important;
}

:root[data-theme="modern"] #locpicdiv img,
:root[data-theme="modern-light"] #locpicdiv img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 1 !important;
}

/* Main container */
:root[data-theme="modern"] .game-container,
:root[data-theme="modern-light"] .game-container {
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background: transparent !important;
}

/* Background scene layer - HIDE in modern theme (use locpic instead) */
:root[data-theme="modern"] .background-layer,
:root[data-theme="modern-light"] .background-layer {
    display: none !important;
}

/* ========================================
   FALLING PARTICLES/PETALS
   ======================================== */

/* Particles - work for all themes */
.particles {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 5 !important; /* Above locpic-overlay (z-index: 2) but below content/sidebars */
}

:root[data-theme="modern"] .particles,
:root[data-theme="modern-light"] .particles {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 5 !important; /* Above locpic-overlay (z-index: 2) but below content/sidebars */
}

/* Particles - work for all themes */
.particle {
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    background: radial-gradient(circle, rgba(230, 184, 194, 0.6), transparent) !important;
    border-radius: 50% !important;
    animation-name: fall !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
}

:root[data-theme="modern"] .particle,
:root[data-theme="modern-light"] .particle {
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    background: radial-gradient(circle, rgba(230, 184, 194, 0.6), transparent) !important;
    border-radius: 50% !important;
    animation-name: fall !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
}

/* Petal particles - work for all themes */
.particle.petal {
    width: 12px !important;
    height: 16px !important;
    background: linear-gradient(135deg, rgba(230, 184, 194, 0.7), rgba(212, 145, 155, 0.5)) !important;
    border-radius: 50% 50% 50% 0 !important;
}

:root[data-theme="modern"] .particle.petal,
:root[data-theme="modern-light"] .particle.petal {
    width: 12px !important;
    height: 16px !important;
    background: linear-gradient(135deg, rgba(230, 184, 194, 0.7), rgba(212, 145, 155, 0.5)) !important;
    border-radius: 50% 50% 50% 0 !important;
}

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

/* Generate multiple particles with different delays and positions - SAME AS ORIGINAL HTML */
.particle:nth-child(1) { left: 5% !important; animation-duration: 15s !important; animation-delay: 0s !important; }
.particle:nth-child(2) { left: 15% !important; animation-duration: 18s !important; animation-delay: 2s !important; }
.particle:nth-child(3) { left: 25% !important; animation-duration: 20s !important; animation-delay: 4s !important; }
.particle:nth-child(4) { left: 35% !important; animation-duration: 16s !important; animation-delay: 1s !important; }
.particle:nth-child(5) { left: 45% !important; animation-duration: 19s !important; animation-delay: 3s !important; }
.particle:nth-child(6) { left: 55% !important; animation-duration: 17s !important; animation-delay: 5s !important; }
.particle:nth-child(7) { left: 65% !important; animation-duration: 21s !important; animation-delay: 2.5s !important; }
.particle:nth-child(8) { left: 75% !important; animation-duration: 16s !important; animation-delay: 4.5s !important; }
.particle:nth-child(9) { left: 85% !important; animation-duration: 18s !important; animation-delay: 1.5s !important; }
.particle:nth-child(10) { left: 95% !important; animation-duration: 20s !important; animation-delay: 3.5s !important; }
.particle:nth-child(11) { left: 10% !important; animation-duration: 22s !important; animation-delay: 6s !important; }
.particle:nth-child(12) { left: 30% !important; animation-duration: 17s !important; animation-delay: 7s !important; }
.particle:nth-child(13) { left: 50% !important; animation-duration: 19s !important; animation-delay: 5.5s !important; }
.particle:nth-child(14) { left: 70% !important; animation-duration: 21s !important; animation-delay: 6.5s !important; }
.particle:nth-child(15) { left: 90% !important; animation-duration: 18s !important; animation-delay: 8s !important; }

/* ========================================
   SHOP CARDS (outfit-card / shopBox)
   ======================================== */

/* Modern theme: Shop card container */
:root[data-theme="modern"] .shopBox,
:root[data-theme="modern-light"] .shopBox {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 15px !important;
    padding: 15px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    float: none !important;
    width: 220px !important;
    height: auto !important;
    min-height: 475px !important;
    margin: 12px !important;
    box-shadow: none !important;
    vertical-align: top !important;
}

:root[data-theme="modern"] .shopBox:hover,
:root[data-theme="modern-light"] .shopBox:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(155, 107, 155, 0.2) !important;
    border-color: var(--accent-purple) !important;
}

/* Modern theme: Shop image container (avatar) */
:root[data-theme="modern"] .shopImg,
:root[data-theme="modern-light"] .shopImg {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 750 / 1333 !important;
    background: linear-gradient(180deg, rgba(20, 10, 15, 0.8), rgba(30, 20, 25, 0.6)) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 15px 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(100, 70, 90, 0.3) !important;
    position: relative !important;
}

/* Avatar images inside shop card */
:root[data-theme="modern"] .shopImg img,
:root[data-theme="modern-light"] .shopImg img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Modern theme: Shop text container */
:root[data-theme="modern"] .shopTxt,
:root[data-theme="modern-light"] .shopTxt {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Shop text: Item name */
:root[data-theme="modern"] .shopTxt strong,
:root[data-theme="modern-light"] .shopTxt strong {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* Shop text: Price display */
:root[data-theme="modern"] .shopTxt strong + br + text(),
:root[data-theme="modern-light"] .shopTxt strong + br + text() {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--accent-purple) !important;
}

/* Shop text: Regular text (descriptions, status messages) */
:root[data-theme="modern"] .shopTxt,
:root[data-theme="modern-light"] .shopTxt {
    font-size: 0.9rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.4 !important;
}

/* Shop text: Links (Buy, Wear, etc.) */
:root[data-theme="modern"] .shopTxt a,
:root[data-theme="modern-light"] .shopTxt a {
    padding: 10px 20px !important;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
    color: white !important;
    border-radius: 10px !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    display: inline-block !important;
    margin-top: 8px !important;
    font-size: 0.95rem !important;
}

:root[data-theme="modern"] .shopTxt a:hover,
:root[data-theme="modern-light"] .shopTxt a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(155, 107, 155, 0.3) !important;
}

/* Shop text: Secondary link (e.g., "or" between Buy and Buy & Wear) */
:root[data-theme="modern"] .shopTxt a + text() + a,
:root[data-theme="modern-light"] .shopTxt a + text() + a {
    background: transparent !important;
    border: 1px solid var(--accent-purple) !important;
    color: var(--accent-purple) !important;
}

:root[data-theme="modern"] .shopTxt a + text() + a:hover,
:root[data-theme="modern-light"] .shopTxt a + text() + a:hover {
    background: rgba(155, 107, 155, 0.1) !important;
}

/* ========================================
   TOP STATUS BAR
   ======================================== */

:root[data-theme="modern"] .status-bar,
:root[data-theme="modern-light"] .status-bar {
    height: 65px !important;
    backdrop-filter: blur(15px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 30px !important;
    border-bottom: 2px solid var(--border-soft) !important;
    font-family: 'Quicksand', sans-serif !important;
    box-shadow: 0 2px 20px var(--shadow-soft) !important;
    z-index: 100 !important;
    position: relative !important;
}

/* Dark mode status bar (DEFAULT) */
:root[data-theme="modern"] .status-bar {
    background: linear-gradient(180deg, 
        rgba(26,17,24,0.95), 
        rgba(26,17,24,0.85)) !important;
}

/* Light mode status bar */
:root[data-theme="modern-light"] .status-bar {
    background: linear-gradient(180deg, 
        rgba(255,255,255,0.95), 
        rgba(255,255,255,0.8)) !important;
}

:root[data-theme="modern"] .status-left,
:root[data-theme="modern-light"] .status-left {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

:root[data-theme="modern"] .version-badge,
:root[data-theme="modern-light"] .version-badge {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
    color: white !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 15px var(--shadow-soft) !important;
}

:root[data-theme="modern"] .character-info,
:root[data-theme="modern-light"] .character-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 18px !important;
    border-radius: 25px !important;
    border: 1px solid var(--border-soft) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Dark mode character-info */
:root[data-theme="modern"] .character-info {
    background: rgba(255,255,255,0.08) !important;
}

:root[data-theme="modern"] .character-info:hover {
    background: rgba(200,162,200,0.2) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 0 20px var(--glow) !important;
}

/* Light mode character-info */
:root[data-theme="modern-light"] .character-info {
    background: rgba(255,255,255,0.5) !important;
}

:root[data-theme="modern-light"] .character-info:hover {
    background: rgba(200,162,200,0.3) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 0 20px var(--glow) !important;
}

:root[data-theme="modern"] .character-avatar,
:root[data-theme="modern-light"] .character-avatar {
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-weight: bold !important;
    box-shadow: 0 0 15px var(--glow) !important;
}

:root[data-theme="modern"] .character-name,
:root[data-theme="modern-light"] .character-name {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    font-size: 15px !important;
    font-family: 'Quicksand', sans-serif !important;
}

:root[data-theme="modern"] .character-age,
:root[data-theme="modern-light"] .character-age {
    color: var(--text-secondary) !important;
    font-size: 14px !important;
    font-family: 'Quicksand', sans-serif !important;
}

:root[data-theme="modern"] .status-center,
:root[data-theme="modern-light"] .status-center {
    display: flex !important;
    gap: 25px !important;
    align-items: center !important;
}

:root[data-theme="modern"] .status-item,
:root[data-theme="modern-light"] .status-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--text-secondary) !important;
    font-size: 14px !important;
    transition: color 0.3s !important;
    font-weight: 500 !important;
}

:root[data-theme="modern"] .status-item:hover,
:root[data-theme="modern-light"] .status-item:hover {
    color: var(--accent-purple) !important;
}

:root[data-theme="modern"] .status-right,
:root[data-theme="modern-light"] .status-right {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
}

:root[data-theme="modern"] .money-display,
:root[data-theme="modern-light"] .money-display {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 18px !important;
    background: linear-gradient(135deg, 
        rgba(255,215,0,0.15), 
        rgba(255,192,203,0.15)) !important;
    border: 1px solid rgba(255,215,0,0.25) !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
}

:root[data-theme="modern"] .money-amount,
:root[data-theme="modern-light"] .money-amount {
    color: #c49660 !important;
}

:root[data-theme="modern"][data-night-mode="true"] .money-amount,
:root[data-theme="modern-light"][data-night-mode="true"] .money-amount {
    color: #f0c674 !important;
}

:root[data-theme="modern"] .header-buttons,
:root[data-theme="modern-light"] .header-buttons {
    display: flex !important;
    gap: 10px !important;
}

:root[data-theme="modern"] .header-btn,
:root[data-theme="modern-light"] .header-btn {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    font-size: 20px !important;
}

/* Dark mode header buttons */
:root[data-theme="modern"] .header-btn {
    background: rgba(255,255,255,0.1) !important;
}

/* Light mode header buttons */
:root[data-theme="modern-light"] .header-btn {
    background: rgba(255,255,255,0.7) !important;
}

:root[data-theme="modern"] .header-btn:hover,
:root[data-theme="modern-light"] .header-btn:hover {
    transform: scale(1.1) rotate(20deg) !important;
    box-shadow: 0 0 20px var(--glow) !important;
}

/* ========================================
   MAIN CONTENT AREA - 3 COLUMN LAYOUT
   ======================================== */

:root[data-theme="modern"] .main-content,
:root[data-theme="modern-light"] .main-content {
    flex: 1 !important;
    display: flex !important;
    height: calc(100vh - 65px) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Left Sidebar - Player Avatar */
:root[data-theme="modern"] .left-sidebar,
:root[data-theme="modern-light"] .left-sidebar {
    width: 420px !important;
    position: absolute !important;
    top: 30px !important;
    left: 20px !important;
    bottom: auto !important;
    height: clamp(810px, 65vh, 1200px) !important;
    background: var(--bg-sidebar) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 20px !important;
    padding: 45px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-shadow: 0 10px 30px var(--shadow-soft) !important;
    z-index: 10 !important;
}

/* Right Sidebar - NPC Avatar */
:root[data-theme="modern"] .right-sidebar,
:root[data-theme="modern-light"] .right-sidebar {
    width: 420px !important;
    position: absolute !important;
    top: 30px !important;
    right: 20px !important;
    bottom: auto !important;
    height: clamp(810px, 65vh, 1200px) !important; /* Same height as left-sidebar */
    background: var(--bg-sidebar) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 20px !important;
    padding: 45px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-shadow: 0 10px 30px var(--shadow-soft) !important;
    z-index: 10 !important;
}

/* Character display in sidebars */
:root[data-theme="modern"] .sidebar-character,
:root[data-theme="modern-light"] .sidebar-character {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
}

:root[data-theme="modern"] .character-portrait,
:root[data-theme="modern-light"] .character-portrait {
    width: auto !important;
    height: calc(100% - 90px) !important;
    max-height: 650px !important;
    aspect-ratio: 750 / 1333 !important;
    background: transparent !important;
    border-radius: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 160px !important;
    box-shadow: 0 20px 40px var(--shadow-soft) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: visible !important;
}

/* Sidebar avatar container styling */
:root[data-theme="modern"] #playerAvatarSidebar,
:root[data-theme="modern-light"] #playerAvatarSidebar,
:root[data-theme="modern"] #npcAvatarSidebar,
:root[data-theme="modern-light"] #npcAvatarSidebar {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* Avatar images inside sidebar - centered and same size */
:root[data-theme="modern"] .character-portrait img,
:root[data-theme="modern-light"] .character-portrait img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

:root[data-theme="modern"] .character-portrait:hover,
:root[data-theme="modern-light"] .character-portrait:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 25px 50px var(--shadow-soft) !important;
}

:root[data-theme="modern"] .character-portrait.npc,
:root[data-theme="modern-light"] .character-portrait.npc {
    background: transparent !important;
}

/* Player controls with two buttons */
:root[data-theme="modern"] .player-controls,
:root[data-theme="modern-light"] .player-controls {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    background: var(--content-bg) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 30px !important;
    box-shadow: 0 5px 15px var(--shadow-soft) !important;
}

/* NPC controls spacer - matches player-controls height for symmetry */
:root[data-theme="modern"] .npc-controls-spacer,
:root[data-theme="modern-light"] .npc-controls-spacer {
    height: 60px !important; /* Same height as player-controls (12px padding top + 12px padding bottom + 36px buttons) */
    width: 100% !important;
    /* Invisible spacer to maintain symmetry */
}

:root[data-theme="modern"] .player-name,
:root[data-theme="modern-light"] .player-name {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--text-primary) !important;
    font-family: 'Quicksand', sans-serif !important;
}

/* Clothing toggle button */
:root[data-theme="modern"] .clothing-toggle,
:root[data-theme="modern-light"] .clothing-toggle,
:root[data-theme="modern"] .avatar-mode-toggle,
:root[data-theme="modern-light"] .avatar-mode-toggle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
    border: 2px solid var(--border-soft) !important;
    color: white !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s !important;
    font-size: 18px !important;
    box-shadow: 0 3px 10px var(--shadow-soft) !important;
}

:root[data-theme="modern"] .clothing-toggle:hover,
:root[data-theme="modern-light"] .clothing-toggle:hover,
:root[data-theme="modern"] .avatar-mode-toggle:hover,
:root[data-theme="modern-light"] .avatar-mode-toggle:hover {
    transform: scale(1.15) rotate(180deg) !important;
    box-shadow: 0 0 20px var(--glow) !important;
}

/* Center Content Area */
:root[data-theme="modern"] .center-content,
:root[data-theme="modern-light"] .center-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 480px !important;
}

/* Story text area */
:root[data-theme="modern"] .story-container,
:root[data-theme="modern-light"] .story-container {
    position: absolute;
    bottom: 20px;
    left: 480px;
    right: 480px;
    height: auto;
    top: 30px;
    z-index: 5 !important;
    transition: all 0.3s ease;
}

:root[data-theme="modern"] .story-content,
:root[data-theme="modern-light"] .story-content {
    height: 100% !important;
    padding: 30px !important;
    padding-bottom: 60px !important;
    background: var(--content-bg) !important;
    border-radius: 25px 25px 0 0 !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: 0 -10px 30px var(--shadow-soft) !important;
    overflow-y: auto !important;
    backdrop-filter: blur(10px) !important;
    line-height: 1.8 !important; /* Increased line spacing */
    font-size: 24px !important; /* Increased base font size */
}

/* Dialogue text styling */
:root[data-theme="modern"] .dialogue-text,
:root[data-theme="modern-light"] .dialogue-text {
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: var(--text-primary) !important;
    margin-bottom: 30px !important;
    font-family: 'Crimson Text', serif !important;
    font-weight: 400 !important;
    transition: font-size 0.3s ease !important;
}

/* In-text links - applies to ALL links in game text, EXCEPT option buttons */
:root[data-theme="modern"] #textContent a:not(.option-btn a):not(.option-btn):not(.option-card a),
:root[data-theme="modern-light"] #textContent a:not(.option-btn a):not(.option-btn):not(.option-card a),
:root[data-theme="modern"] .dialogue-text a:not(.option-btn a):not(.option-btn):not(.option-card a),
:root[data-theme="modern-light"] .dialogue-text a:not(.option-btn a):not(.option-btn):not(.option-card a),
:root[data-theme="modern"] .choice-link,
:root[data-theme="modern-light"] .choice-link {
    color: var(--link-color) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    padding: 2px 6px !important;
    margin: 0 -2px !important;
    border-radius: 4px !important;
    background: var(--link-bg) !important;
    border-bottom: 1px solid transparent !important;
}

:root[data-theme="modern"] #textContent a:not(.option-btn a):not(.option-btn):not(.option-card a):hover,
:root[data-theme="modern-light"] #textContent a:not(.option-btn a):not(.option-btn):not(.option-card a):hover,
:root[data-theme="modern"] .dialogue-text a:not(.option-btn a):not(.option-btn):not(.option-card a):hover,
:root[data-theme="modern-light"] .dialogue-text a:not(.option-btn a):not(.option-btn):not(.option-card a):hover,
:root[data-theme="modern"] .choice-link:hover,
:root[data-theme="modern-light"] .choice-link:hover {
    color: var(--link-hover) !important;
    background: var(--link-bg-hover) !important;
    border-bottom-color: var(--link-hover) !important;
}

/* Special quote highlight */
:root[data-theme="modern"] .dialogue-highlight,
:root[data-theme="modern-light"] .dialogue-highlight {
    color: var(--accent-rose) !important;
    font-style: italic !important;
    display: block !important;
    margin: 20px 0 !important;
    padding: 15px 25px !important;
    border-left: 3px solid var(--accent-rose) !important;
    background: linear-gradient(90deg, 
        rgba(212,145,155,0.15), 
        transparent) !important;
    font-size: 0.95em !important;
    letter-spacing: 0.5px !important;
}

/* Choice paragraph */
:root[data-theme="modern"] .choice-paragraph,
:root[data-theme="modern-light"] .choice-paragraph {
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--border-soft) !important;
    line-height: 1.9 !important;
}

/* Dialogue options styling */
:root[data-theme="modern"] .dialogue-options,
:root[data-theme="modern-light"] .dialogue-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

:root[data-theme="modern"] .dialogue-option,
:root[data-theme="modern-light"] .dialogue-option {
    padding: 15px 25px !important;
    background: var(--link-bg) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 15px !important;
    color: var(--link-color) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

:root[data-theme="modern"] .dialogue-option:hover,
:root[data-theme="modern-light"] .dialogue-option:hover {
    background: var(--link-bg-hover) !important;
    transform: translateX(10px) !important;
    box-shadow: 0 5px 15px var(--shadow-soft) !important;
}

/* ========================================
   TEXT CONTROLS PANEL
   ======================================== */

:root[data-theme="modern"] .text-controls,
:root[data-theme="modern-light"] .text-controls {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 30px !important;
    border: 1px solid var(--border-soft) !important;
    z-index: 20 !important;
    box-shadow: 0 5px 20px var(--shadow-soft) !important;
}

/* Dark mode text-controls (DEFAULT) */
:root[data-theme="modern"] .text-controls {
    background: rgba(37,22,32,0.95) !important;
}

/* Light mode text-controls */
:root[data-theme="modern-light"] .text-controls {
    background: rgba(255,255,255,0.95) !important;
}

:root[data-theme="modern"] .control-btn,
:root[data-theme="modern-light"] .control-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid var(--border-soft) !important;
    background: var(--content-bg) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
}

:root[data-theme="modern"] .control-btn:hover,
:root[data-theme="modern-light"] .control-btn:hover {
    background: var(--accent-purple) !important;
    color: white !important;
    transform: scale(1.1) !important;
}

:root[data-theme="modern"] .control-btn.active,
:root[data-theme="modern-light"] .control-btn.active {
    background: var(--accent-purple) !important;
    color: white !important;
}

/* ========================================
   MOBILE SIDEBAR TOGGLE BUTTONS
   ======================================== */

/* Mobile sidebar toggle buttons - hidden by default */
:root[data-theme="modern"] .mobile-sidebar-toggles,
:root[data-theme="modern-light"] .mobile-sidebar-toggles {
    position: fixed !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    display: none !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    z-index: 1000 !important;
    pointer-events: none !important;
}

/* Show mobile sidebar toggles on mobile screens */
@media (max-width: 990px) {
    :root[data-theme="modern"] .mobile-sidebar-toggles,
    :root[data-theme="modern-light"] .mobile-sidebar-toggles {
        display: flex !important;
    }
}

:root[data-theme="modern"] .mobile-sidebar-toggle,
:root[data-theme="modern-light"] .mobile-sidebar-toggle {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
    border: 2px solid var(--border-soft) !important;
    color: white !important;
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 25px var(--shadow-soft) !important;
    pointer-events: auto !important;
    backdrop-filter: blur(10px) !important;
}

:root[data-theme="modern"] .mobile-sidebar-toggle:hover,
:root[data-theme="modern-light"] .mobile-sidebar-toggle:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 35px var(--shadow-soft) !important;
}

:root[data-theme="modern"] .mobile-sidebar-toggle.left,
:root[data-theme="modern-light"] .mobile-sidebar-toggle.left {
    margin-right: auto !important;
}

:root[data-theme="modern"] .mobile-sidebar-toggle.right,
:root[data-theme="modern-light"] .mobile-sidebar-toggle.right {
    margin-left: auto !important;
    background: linear-gradient(135deg, var(--accent-pink), var(--accent-rose)) !important;
}

/* Mobile sidebar overlays */
:root[data-theme="modern"] .mobile-sidebar-overlay,
:root[data-theme="modern-light"] .mobile-sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(5px) !important;
    z-index: 2002 !important; /* Higher than panels (2001) */
    display: none !important;
    pointer-events: auto !important;
}

/* Overlay should not affect the sidebar panels */
:root[data-theme="modern"] .mobile-sidebar-overlay.active,
:root[data-theme="modern-light"] .mobile-sidebar-overlay.active {
    display: block !important;
}

/* Ensure panels are above overlay and not affected by blur */
:root[data-theme="modern"] .mobile-sidebar-panel,
:root[data-theme="modern-light"] .mobile-sidebar-panel {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: var(--bg-sidebar) !important;
    backdrop-filter: none !important; /* Remove blur from panels */
    border: 1px solid var(--border-soft) !important;
    z-index: 2003 !important; /* Above overlay */
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    overflow-y: auto !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

:root[data-theme="modern"] .mobile-sidebar-panel.right,
:root[data-theme="modern-light"] .mobile-sidebar-panel.right {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
}

:root[data-theme="modern"] .mobile-sidebar-panel.active,
:root[data-theme="modern-light"] .mobile-sidebar-panel.active {
    transform: translateX(0) !important;
}

:root[data-theme="modern"] .mobile-sidebar-close,
:root[data-theme="modern-light"] .mobile-sidebar-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--content-bg) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-primary) !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

:root[data-theme="modern"] .mobile-sidebar-close:hover,
:root[data-theme="modern-light"] .mobile-sidebar-close:hover {
    background: var(--accent-purple) !important;
    color: white !important;
    transform: scale(1.1) !important;
}

/* Mobile sidebar content positioning */
:root[data-theme="modern"] .mobile-sidebar-panel .sidebar-character,
:root[data-theme="modern-light"] .mobile-sidebar-panel .sidebar-character {
    width: 100% !important;
    max-width: 350px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
}

:root[data-theme="modern"] .mobile-sidebar-panel .character-portrait,
:root[data-theme="modern-light"] .mobile-sidebar-panel .character-portrait {
    width: 100% !important;
    height: 90vh !important; /* Increased from 60vh to 90vh (50% increase) */
    max-height: 750px !important; /* Increased from 500px to 750px (50% increase) */
    aspect-ratio: 750 / 1333 !important;
    background: transparent !important;
    border-radius: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 180px !important; /* Increased from 120px to 180px (50% increase) */
    color: var(--text-muted) !important;
    border: 2px dashed var(--border-soft) !important;
}

:root[data-theme="modern"] .mobile-sidebar-panel .character-portrait img,
:root[data-theme="modern-light"] .mobile-sidebar-panel .character-portrait img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* Hide mobile sidebar toggles on larger screens */
@media (min-width: 991px) {
    :root[data-theme="modern"] .mobile-sidebar-toggles,
    :root[data-theme="modern-light"] .mobile-sidebar-toggles {
        display: none !important;
    }
}

/* ========================================
   MOBILE SUPPORT
   ======================================== */

:root[data-theme="modern"] .mobile-character-btn,
:root[data-theme="modern-light"] .mobile-character-btn,
:root[data-theme="modern"] .mobile-menu-btn,
:root[data-theme="modern-light"] .mobile-menu-btn {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
    box-shadow: 0 10px 30px var(--shadow-soft) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    z-index: 1000 !important;
}

:root[data-theme="modern"] .mobile-character-btn:hover,
:root[data-theme="modern-light"] .mobile-character-btn:hover,
:root[data-theme="modern"] .mobile-menu-btn:hover,
:root[data-theme="modern-light"] .mobile-menu-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 15px 40px var(--shadow-soft) !important;
}

:root[data-theme="modern"] .mobile-menu-btn,
:root[data-theme="modern-light"] .mobile-menu-btn {
    bottom: 90px !important;
}

/* Tablet responsive */
@media (max-width: 1400px) {
    /* Make sidebars smaller instead of hiding them */
    :root[data-theme="modern"] .left-sidebar,
    :root[data-theme="modern-light"] .left-sidebar,
    :root[data-theme="modern"] .right-sidebar,
    :root[data-theme="modern-light"] .right-sidebar {
        width: 300px !important;
        padding: 30px 20px !important;
        height: clamp(600px, 50vh, 900px) !important;
    }
    
    :root[data-theme="modern"] .center-content,
    :root[data-theme="modern-light"] .center-content {
        padding: 0 20px !important;
    }
    
    :root[data-theme="modern"] .story-container,
    :root[data-theme="modern-light"] .story-container {
        left: 340px !important;
        right: 340px !important;
    }
    
    :root[data-theme="modern"] .character-portrait,
    :root[data-theme="modern-light"] .character-portrait {
        height: calc(100% - 60px) !important;
        max-height: 500px !important;
    }
    
    :root[data-theme="modern"] .mobile-character-btn,
    :root[data-theme="modern-light"] .mobile-character-btn,
    :root[data-theme="modern"] .mobile-menu-btn,
    :root[data-theme="modern-light"] .mobile-menu-btn {
        display: flex !important;
    }
}

@media (min-width: 1201px) {
    :root[data-theme="modern"] .mobile-character-btn,
    :root[data-theme="modern-light"] .mobile-character-btn,
    :root[data-theme="modern"] .mobile-menu-btn,
    :root[data-theme="modern-light"] .mobile-menu-btn {
        display: none !important;
    }
}

/* ========================================
   MODAL OVERLAY & ANIMATIONS
   ======================================== */

:root[data-theme="modern"] .modal-overlay,
:root[data-theme="modern-light"] .modal-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 999 !important;
    animation: fadeIn 0.3s ease !important;
}

:root[data-theme="modern"] .modal-overlay.active,
:root[data-theme="modern-light"] .modal-overlay.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

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

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

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* ========================================
   CHARACTER SHEET MODAL
   ======================================== */

:root[data-theme="modern"] .character-sheet,
:root[data-theme="modern-light"] .character-sheet {
    display: none !important;
    background: var(--content-bg) !important;
    border-radius: 20px !important;
    width: 900px !important;
    max-width: 90vw !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
    animation: slideIn 0.3s ease !important;
}

:root[data-theme="modern"] .character-sheet.active,
:root[data-theme="modern-light"] .character-sheet.active {
    display: flex !important;
    flex-direction: column !important;
}

:root[data-theme="modern"] .cs-header,
:root[data-theme="modern-light"] .cs-header {
    padding: 25px 30px !important;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

:root[data-theme="modern"] .cs-header-info,
:root[data-theme="modern-light"] .cs-header-info {
    color: white !important;
}

:root[data-theme="modern"] .cs-header-title,
:root[data-theme="modern-light"] .cs-header-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    font-family: 'Quicksand', sans-serif !important;
    margin-bottom: 4px !important;
}

:root[data-theme="modern"] .cs-header-subtitle,
:root[data-theme="modern-light"] .cs-header-subtitle {
    font-size: 14px !important;
    opacity: 0.9 !important;
}

/* ========================================
   GAME MENU MODAL
   ======================================== */

/* Modern theme - hide legacy modal wrappers */
:root[data-theme="modern"] #myModal .modal-content-outer,
:root[data-theme="modern-light"] #myModal .modal-content-outer {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    animation: none !important;
    position: static !important;
    top: auto !important;
}

:root[data-theme="modern"] #myModal .modal-content,
:root[data-theme="modern-light"] #myModal .modal-content {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    margin-top: 0 !important;
}

:root[data-theme="modern"] #myModal .close,
:root[data-theme="modern-light"] #myModal .close {
    display: none !important; /* Hide legacy close button */
}

:root[data-theme="modern"] .game-menu,
:root[data-theme="modern-light"] .game-menu {
    background: var(--content-bg) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    min-width: 300px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
    animation: slideIn 0.3s ease !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* Modern theme modal styling */
:root[data-theme="modern"] .modal,
:root[data-theme="modern-light"] .modal {
    display: none !important;
    position: fixed !important;
    z-index: 10000 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
    background-color: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(4px) !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Modal display will be controlled by JavaScript */

:root[data-theme="modern"] .game-menu.active,
:root[data-theme="modern-light"] .game-menu.active {
    display: block !important;
}


/* ========================================
   CHARACTER SHEET MODAL
   ======================================== */

:root[data-theme="modern"] .character-sheet,
:root[data-theme="modern-light"] .character-sheet {
    display: none !important;
    background: var(--content-bg) !important;
    border-radius: 20px !important;
    width: 900px !important;
    max-width: 90vw !important;
    height: 80vh !important;
    max-height: 80vh !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
    position: relative !important;
    z-index: 1000 !important;
}

:root[data-theme="modern"] .character-sheet.active,
:root[data-theme="modern-light"] .character-sheet.active {
    display: flex !important;
    flex-direction: column !important;
    animation: slideIn 0.3s ease !important;
}

/* Character Sheet Header */
:root[data-theme="modern"] .cs-header,
:root[data-theme="modern-light"] .cs-header {
    padding: 25px 30px !important;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

:root[data-theme="modern"] .cs-header-info,
:root[data-theme="modern-light"] .cs-header-info {
    color: white !important;
}

:root[data-theme="modern"] .cs-header-title,
:root[data-theme="modern-light"] .cs-header-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    font-family: 'Quicksand', sans-serif !important;
    margin-bottom: 4px !important;
}

:root[data-theme="modern"] .cs-header-subtitle,
:root[data-theme="modern-light"] .cs-header-subtitle {
    font-size: 14px !important;
    opacity: 0.9 !important;
}

/* ========================================
   HORNYZ APP - MODERN THEME
   ======================================== */

/* Hornyz Chat Container - Full Width for Chat View */
:root[data-theme="modern"] #theChat.hornyzChat,
:root[data-theme="modern-light"] #theChat.hornyzChat {
    background: var(--content-bg) !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px var(--shadow-soft) !important;
    width: 100% !important;
    height: 90vh !important;
    min-height: 800px !important;
    max-height: 90vh !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}

/* Chat Header */
:root[data-theme="modern"] #theChatHeader,
:root[data-theme="modern-light"] #theChatHeader {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
    color: white !important;
    padding: 20px 30px !important;
    text-align: center !important;
    font-size: 1.4em !important;
    font-weight: 600 !important;
    font-family: var(--font-family-primary) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    flex-shrink: 0 !important;
    border-radius: 20px 20px 0 0 !important;
}

:root[data-theme="modern"] #theChatHeader img,
:root[data-theme="modern-light"] #theChatHeader img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(255,255,255,0.3) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Chat Content Area */
:root[data-theme="modern"] #theChatContent,
:root[data-theme="modern-light"] #theChatContent {
    flex: 1 !important;
    overflow-y: auto !important;
    max-height: none !important;
    height: auto !important;
    padding: 25px !important;
    background: linear-gradient(180deg, 
        rgba(247, 247, 250, 0.3),
        rgba(235, 235, 240, 0.5)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

/* NPC Chat Bubble */
:root[data-theme="modern"] .npcChat,
:root[data-theme="modern-light"] .npcChat {
    background: rgba(230, 230, 235, 0.9) !important;
    color: #2c2c2e !important;
    padding: 12px 18px !important;
    border-radius: 18px 18px 18px 4px !important;
    max-width: 70% !important;
    width: fit-content !important;
    align-self: flex-start !important;
    margin: 8px 0 !important;
    font-size: 1.05em !important;
    line-height: 1.5 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    word-wrap: break-word !important;
}

/* Player Chat Bubble */
:root[data-theme="modern"] .playerChat,
:root[data-theme="modern-light"] .playerChat {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
    color: white !important;
    padding: 12px 18px !important;
    border-radius: 18px 18px 4px 18px !important;
    max-width: 70% !important;
    width: fit-content !important;
    align-self: flex-end !important;
    margin: 8px 0 !important;
    margin-left: auto !important;
    font-size: 1.05em !important;
    line-height: 1.5 !important;
    box-shadow: 0 2px 12px rgba(155, 107, 155, 0.3) !important;
    word-wrap: break-word !important;
}

/* "is typing..." indicator */
:root[data-theme="modern"] #lastNPCtext,
:root[data-theme="modern-light"] #lastNPCtext {
    color: var(--text-secondary) !important;
    font-style: italic !important;
    font-size: 0.95em !important;
    padding: 5px 15px !important;
    opacity: 0.8 !important;
}

/* Chat Answers Container */
:root[data-theme="modern"] #theChatAnswers,
:root[data-theme="modern-light"] #theChatAnswers {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid var(--border-soft) !important;
    border-radius: 0 0 20px 20px !important;
    padding: 25px 30px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: block !important;
    color: #5a3a5c !important;
    font-size: 1.05em !important;
    line-height: 1.6 !important;
}

/* Hide BR tags in modern chat answers */
:root[data-theme="modern"] #theChatAnswers br,
:root[data-theme="modern-light"] #theChatAnswers br {
    display: none !important;
}

/* Answer Links - NOT footer links */
:root[data-theme="modern"] #theChatAnswers > a,
:root[data-theme="modern-light"] #theChatAnswers > a {
    display: block !important;
    padding: 14px 20px !important;
    background: linear-gradient(135deg, 
        rgba(155, 107, 155, 0.15),
        rgba(230, 184, 194, 0.15)) !important;
    border: 1.5px solid rgba(155, 107, 155, 0.3) !important;
    border-radius: 12px !important;
    color: #4a2a4c !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    font-size: 1.15em !important;
    line-height: 1.5 !important;
    margin: 8px 0 !important;
}

:root[data-theme="modern"] #theChatAnswers > a:hover,
:root[data-theme="modern-light"] #theChatAnswers > a:hover {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateX(5px) !important;
    box-shadow: 0 4px 15px rgba(155, 107, 155, 0.3) !important;
}

/* Chat Footer - inline unmatch link */
:root[data-theme="modern"] #theChatAnswers .chatFooter,
:root[data-theme="modern-light"] #theChatAnswers .chatFooter {
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    font-size: 1em !important;
    color: #5a3a5c !important;
    line-height: 1.6 !important;
}

:root[data-theme="modern"] #theChatAnswers .unmatchLink a,
:root[data-theme="modern-light"] #theChatAnswers .unmatchLink a {
    display: inline !important;
    padding: 2px 0 !important;
    background: none !important;
    border: none !important;
    border-bottom: 2px solid #4a2a4c !important;
    border-radius: 0 !important;
    color: #4a2a4c !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    font-size: 1em !important;
    margin: 0 !important;
}

:root[data-theme="modern"] #theChatAnswers .unmatchLink a:hover,
:root[data-theme="modern-light"] #theChatAnswers .unmatchLink a:hover {
    background: none !important;
    color: var(--accent-pink) !important;
    border-bottom-color: var(--accent-pink) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Emoji images in chat */
:root[data-theme="modern"] #theChatContent img,
:root[data-theme="modern-light"] #theChatContent img {
    width: 28px !important;
    height: 28px !important;
    vertical-align: middle !important;
    margin: 0 2px !important;
}

/* End chat message */
:root[data-theme="modern"] .endChat,
:root[data-theme="modern-light"] .endChat {
    text-align: center !important;
    color: var(--text-secondary) !important;
    font-style: italic !important;
    padding: 15px !important;
    margin: 10px 0 !important;
    background: rgba(255,255,255,0.5) !important;
    border-radius: 12px !important;
    font-size: 1em !important;
}

/* Hide text controls on Hornyz page */
:root[data-theme="modern"] #theChat.hornyzChat ~ .text-controls,
:root[data-theme="modern-light"] #theChat.hornyzChat ~ .text-controls,
:root[data-theme="modern"] .text-controls:has(~ #theChat.hornyzChat),
:root[data-theme="modern-light"] .text-controls:has(~ #theChat.hornyzChat) {
    display: none !important;
}

/* Hide text controls inside or near hornyzChat */
:root[data-theme="modern"] #textContent:has(#theChat.hornyzChat) .text-controls,
:root[data-theme="modern-light"] #textContent:has(#theChat.hornyzChat) .text-controls {
    display: none !important;
}

/* Hornyz Cover Image Container */
:root[data-theme="modern"] #hornyzCoverInfo,
:root[data-theme="modern-light"] #hornyzCoverInfo {
    position: relative !important;
    width: 420px !important;
    max-width: 90% !important;
    height: 600px !important;
    margin: -600px auto 0 auto !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3) !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}

/* Hornyz Cover Image */
:root[data-theme="modern"] #hornyzCoverImage,
:root[data-theme="modern-light"] #hornyzCoverImage {
    position: relative !important;
    width: 420px !important;
    max-width: 90% !important;
    height: 600px !important;
    display: block !important;
    border-radius: 20px !important;
    border: none !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 0 !important;
}

/* Hornyz Cover Text (bottom overlay - always visible) */
:root[data-theme="modern"] #hornyzCoverText,
:root[data-theme="modern-light"] #hornyzCoverText {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.7) 50%, transparent) !important;
    color: white !important;
    padding: 40px 20px 20px 20px !important;
    font-size: 1.5em !important;
    font-family: var(--font-family-secondary) !important;
    font-weight: 600 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 100 !important;
    pointer-events: none !important;
}

/* Info icon in cover text */
:root[data-theme="modern"] #hornyzCoverText img,
:root[data-theme="modern-light"] #hornyzCoverText img {
    height: 24px !important;
    opacity: 1 !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
    pointer-events: all !important;
    cursor: help !important;
}

/* Hornyz Cover Description (hover overlay) */
:root[data-theme="modern"] #hornyzCoverDesc,
:root[data-theme="modern-light"] #hornyzCoverDesc {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 75% !important;
    background: linear-gradient(
        to top,
        rgba(20, 20, 30, 0.98) 0%,
        rgba(30, 25, 40, 0.96) 40%,
        rgba(40, 35, 50, 0.92) 70%,
        rgba(50, 45, 60, 0.85) 85%,
        rgba(60, 55, 70, 0.6) 95%,
        transparent 100%
    ) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
    color: white !important;
    padding: 40px 25px 25px 25px !important;
    font-size: 0.95em !important;
    line-height: 1.6 !important;
    text-align: left !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    overflow-y: auto !important;
    z-index: 200 !important;
    border-radius: 0 0 20px 20px !important;
    pointer-events: none !important;
}

/* Show description on hover */
:root[data-theme="modern"] #hornyzCoverInfo:hover #hornyzCoverDesc,
:root[data-theme="modern-light"] #hornyzCoverInfo:hover #hornyzCoverDesc {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

/* Hide bottom text when showing description */
:root[data-theme="modern"] #hornyzCoverInfo:hover #hornyzCoverText,
:root[data-theme="modern-light"] #hornyzCoverInfo:hover #hornyzCoverText {
    opacity: 0 !important;
}

/* Description title */
:root[data-theme="modern"] #hornyzCoverDesc > div:first-child,
:root[data-theme="modern-light"] #hornyzCoverDesc > div:first-child {
    font-size: 1.4em !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    color: white !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}

/* Description text shadow for readability */
:root[data-theme="modern"] #hornyzCoverDesc,
:root[data-theme="modern-light"] #hornyzCoverDesc {
    text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
}

/* Hornyz Buttons Container */
:root[data-theme="modern"] .hornyzButtonContainer,
:root[data-theme="modern-light"] .hornyzButtonContainer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 60px !important;
    margin-top: 40px !important;
    width: 100% !important;
}

/* Hornyz Button (X and Check) */
:root[data-theme="modern"] .hornyzButton,
:root[data-theme="modern-light"] .hornyzButton {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
    box-sizing: border-box !important;
}

/* Red X Button */
:root[data-theme="modern"] .hornyzButton.no,
:root[data-theme="modern-light"] .hornyzButton.no {
    background: linear-gradient(135deg, #ff4757, #ee5a6f) !important;
    border: 4px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3), 
                inset 0 0 0 2px rgba(255, 71, 87, 0.5) !important;
}

:root[data-theme="modern"] .hornyzButton.no:hover,
:root[data-theme="modern-light"] .hornyzButton.no:hover {
    background: linear-gradient(135deg, #ff3838, #ff4757) !important;
    transform: scale(1.15) rotate(-5deg) !important;
    box-shadow: 0 15px 40px rgba(255, 71, 87, 0.6),
                inset 0 0 0 2px rgba(255, 71, 87, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Green Check Button */
:root[data-theme="modern"] .hornyzButton.yes,
:root[data-theme="modern-light"] .hornyzButton.yes {
    background: linear-gradient(135deg, #26de81, #20bf6b) !important;
    border: 4px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(38, 222, 129, 0.3),
                inset 0 0 0 2px rgba(38, 222, 129, 0.5) !important;
}

:root[data-theme="modern"] .hornyzButton.yes:hover,
:root[data-theme="modern-light"] .hornyzButton.yes:hover {
    background: linear-gradient(135deg, #20bf6b, #26de81) !important;
    transform: scale(1.15) rotate(5deg) !important;
    box-shadow: 0 15px 40px rgba(38, 222, 129, 0.6),
                inset 0 0 0 2px rgba(38, 222, 129, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Button SVG Icons */
:root[data-theme="modern"] .hornyzButton svg,
:root[data-theme="modern-light"] .hornyzButton svg {
    width: 45px !important;
    height: 45px !important;
    fill: none !important;
    stroke: white !important;
    stroke-width: 4 !important;
    stroke-linecap: round !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}

/* Hide old button images in modern theme */
:root[data-theme="modern"] .hornyzButtonImg,
:root[data-theme="modern-light"] .hornyzButtonImg {
    display: none !important;
}

/* ========================================
   PHONE ALERT - MODERN THEME
   ======================================== */

/* Modern phone alert box */
:root[data-theme="modern"] .alert,
:root[data-theme="modern-light"] .alert {
    position: relative !important;
    padding: 20px 25px !important;
    background: linear-gradient(135deg, 
        rgba(155, 107, 155, 0.15),
        rgba(230, 184, 194, 0.15)) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    border: 1px solid var(--border-soft) !important;
    border-left: 4px solid var(--accent-purple) !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    margin-bottom: 20px !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
    animation: slideInAlert 0.4s ease-out !important;
}

:root[data-theme="modern"] .alert:hover,
:root[data-theme="modern-light"] .alert:hover {
    transform: translateX(5px) !important;
    box-shadow: 0 12px 35px rgba(155, 107, 155, 0.25) !important;
    border-left-width: 6px !important;
}

/* Phone icon in alert */
:root[data-theme="modern"] .alert img[src*="phoneIcon"],
:root[data-theme="modern-light"] .alert img[src*="phoneIcon"] {
    width: 48px !important;
    height: 48px !important;
    float: none !important;
    margin: 0 !important;
    filter: drop-shadow(0 2px 8px rgba(155, 107, 155, 0.4)) !important;
    flex-shrink: 0 !important;
}

/* Alert text content */
:root[data-theme="modern"] .alert > *:not(img):not(.closebtn),
:root[data-theme="modern-light"] .alert > *:not(img):not(.closebtn) {
    flex: 1 !important;
    line-height: 1.6 !important;
    font-family: var(--font-family-primary) !important;
}

/* Close button in alert */
:root[data-theme="modern"] .alert .closebtn,
:root[data-theme="modern-light"] .alert .closebtn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.1) !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    opacity: 0.7 !important;
    border: none !important;
}

:root[data-theme="modern"] .alert .closebtn:hover,
:root[data-theme="modern-light"] .alert .closebtn:hover {
    background: rgba(255, 71, 87, 0.2) !important;
    color: #ff4757 !important;
    opacity: 1 !important;
    transform: rotate(90deg) !important;
}

/* Links in alert */
:root[data-theme="modern"] .alert a,
:root[data-theme="modern-light"] .alert a {
    color: var(--accent-purple) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}

:root[data-theme="modern"] .alert a:hover,
:root[data-theme="modern-light"] .alert a:hover {
    color: var(--accent-pink) !important;
    border-bottom-color: var(--accent-pink) !important;
}

/* Slide in animation */
@keyframes slideInAlert {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Character Sheet Tabs - EXACT HTML DESIGN COPY-PASTE */
:root[data-theme="modern"] .cs-tabs,
:root[data-theme="modern-light"] .cs-tabs {
    display: flex;
    background: rgba(200,162,200,0.05);
    border-bottom: 1px solid var(--border-soft);
}

:root[data-theme="modern"] .cs-tab,
:root[data-theme="modern-light"] .cs-tab {
    flex: 1;
    padding: 15px 20px;
    text-align: center;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s;
    background: transparent;
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: 0px !important; /* Override components.css border-radius: 30px */
}

:root[data-theme="modern"] .cs-tab:hover,
:root[data-theme="modern-light"] .cs-tab:hover {
    background: rgba(200,162,200,0.1);
    color: var(--text-primary);
}

:root[data-theme="modern"] .cs-tab.active,
:root[data-theme="modern-light"] .cs-tab.active {
    color: var(--accent-purple);
    border-bottom-color: var(--accent-purple);
    background: rgba(200,162,200,0.08);
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    outline: none !important; /* Remove focus outline */
}

:root[data-theme="modern"] .cs-tab:focus,
:root[data-theme="modern-light"] .cs-tab:focus {
    outline: none !important; /* Remove focus outline */
}

/* Character Sheet Content */
:root[data-theme="modern"] .cs-content,
:root[data-theme="modern-light"] .cs-content {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 30px 35px !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

:root[data-theme="modern"] .cs-tab-content,
:root[data-theme="modern-light"] .cs-tab-content {
    display: none !important;
}

:root[data-theme="modern"] .cs-tab-content.active,
:root[data-theme="modern-light"] .cs-tab-content.active {
    display: block !important;
}

/* Stat Categories */
:root[data-theme="modern"] .stat-category,
:root[data-theme="modern-light"] .stat-category {
    margin-bottom: 25px !important;
}

:root[data-theme="modern"] .stat-category-title,
:root[data-theme="modern-light"] .stat-category-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--accent-purple) !important;
    margin-bottom: 15px !important;
    font-family: 'Quicksand', sans-serif !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--border-soft) !important;
}

/* Stat Rows */
:root[data-theme="modern"] .stat-row,
:root[data-theme="modern-light"] .stat-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(200,162,200,0.1) !important;
}

:root[data-theme="modern"] .stat-row:last-child,
:root[data-theme="modern-light"] .stat-row:last-child {
    border-bottom: none !important;
}

:root[data-theme="modern"] .stat-name,
:root[data-theme="modern-light"] .stat-name {
    font-size: 16px !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

:root[data-theme="modern"] .stat-value,
:root[data-theme="modern-light"] .stat-value {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 15px !important;
    color: var(--text-secondary) !important;
}

/* Stat Bars - DISABLED (alignment issues) */
:root[data-theme="modern"] .stat-bar,
:root[data-theme="modern-light"] .stat-bar {
    display: none !important;
    /* width: 120px !important;
    height: 8px !important;
    background: rgba(200,162,200,0.2) !important;
    border-radius: 10px !important;
    overflow: hidden !important; */
}

:root[data-theme="modern"] .stat-bar-fill,
:root[data-theme="modern-light"] .stat-bar-fill {
    display: none !important;
    /* height: 100% !important;
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-pink)) !important;
    border-radius: 10px !important;
    transition: width 0.3s ease !important; */
}

:root[data-theme="modern"] .stat-description,
:root[data-theme="modern-light"] .stat-description {
    font-style: italic !important;
    color: var(--text-light) !important;
    font-size: 13px !important;
}

/* Experience Lists */
:root[data-theme="modern"] .experience-list,
:root[data-theme="modern-light"] .experience-list {
    margin-top: 10px !important;
}

:root[data-theme="modern"] .experience-item,
:root[data-theme="modern-light"] .experience-item {
    padding: 8px 0 !important;
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
}

:root[data-theme="modern"] .experience-item strong,
:root[data-theme="modern-light"] .experience-item strong {
    color: var(--text-primary) !important;
}

/* Never Grid */
:root[data-theme="modern"] .never-grid,
:root[data-theme="modern-light"] .never-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

:root[data-theme="modern"] .never-item,
:root[data-theme="modern-light"] .never-item {
    padding: 8px 12px !important;
    background: rgba(200,162,200,0.08) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-soft) !important;
}

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

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

:root[data-theme="modern"] .menu-header,
:root[data-theme="modern-light"] .menu-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid var(--border-soft) !important;
}

:root[data-theme="modern"] .menu-title,
:root[data-theme="modern-light"] .menu-title {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

:root[data-theme="modern"] .menu-close,
:root[data-theme="modern-light"] .menu-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid var(--border-soft) !important;
    background: transparent !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s !important;
    color: var(--text-secondary) !important;
    font-size: 20px !important;
}

:root[data-theme="modern"] .menu-close:hover,
:root[data-theme="modern-light"] .menu-close:hover {
    background: var(--accent-rose) !important;
    color: white !important;
    transform: rotate(90deg) !important;
}

:root[data-theme="modern"] .menu-items,
:root[data-theme="modern-light"] .menu-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

:root[data-theme="modern"] .menu-item,
:root[data-theme="modern-light"] .menu-item {
    padding: 12px 20px !important;
    background: linear-gradient(135deg, 
        rgba(200,162,200,0.05), 
        rgba(230,184,194,0.05)) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 15px !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 16px !important;
    color: var(--text-primary) !important;
    text-align: center !important;
}

:root[data-theme="modern"] .menu-item:hover,
:root[data-theme="modern-light"] .menu-item:hover {
    background: linear-gradient(135deg, 
        var(--accent-purple), 
        var(--accent-pink)) !important;
    color: white !important;
    transform: translateX(5px) !important;
    box-shadow: 0 5px 15px var(--shadow-soft) !important;
}

:root[data-theme="modern"] .menu-item.patreon,
:root[data-theme="modern-light"] .menu-item.patreon {
    background: linear-gradient(135deg, #f96854, #ff6b9d) !important;
    color: white !important;
    font-weight: 600 !important;
}

:root[data-theme="modern"] .menu-item.patreon:hover,
:root[data-theme="modern-light"] .menu-item.patreon:hover {
    background: linear-gradient(135deg, #ff7865, #ff7cae) !important;
    transform: translateX(5px) scale(1.02) !important;
}

/* ========================================
   CUSTOM SCROLLBAR - AUTO-HIDE
   ======================================== */

:root[data-theme="modern"] .story-content,
:root[data-theme="modern-light"] .story-content,
:root[data-theme="modern"] .cs-content,
:root[data-theme="modern-light"] .cs-content {
    scrollbar-width: thin !important;
    scrollbar-color: transparent transparent !important;
    transition: scrollbar-color 0.3s ease !important;
}

:root[data-theme="modern"] .story-content:hover,
:root[data-theme="modern-light"] .story-content:hover,
:root[data-theme="modern"] .story-content:active,
:root[data-theme="modern-light"] .story-content:active,
:root[data-theme="modern"] .cs-content:hover,
:root[data-theme="modern-light"] .cs-content:hover,
:root[data-theme="modern"] .cs-content:active,
:root[data-theme="modern-light"] .cs-content:active {
    scrollbar-color: var(--accent-purple) transparent !important;
}

:root[data-theme="modern"] .story-content::-webkit-scrollbar,
:root[data-theme="modern-light"] .story-content::-webkit-scrollbar,
:root[data-theme="modern"] .cs-content::-webkit-scrollbar,
:root[data-theme="modern-light"] .cs-content::-webkit-scrollbar {
    width: 6px !important;
}

:root[data-theme="modern"] .story-content::-webkit-scrollbar-track,
:root[data-theme="modern-light"] .story-content::-webkit-scrollbar-track,
:root[data-theme="modern"] .cs-content::-webkit-scrollbar-track,
:root[data-theme="modern-light"] .cs-content::-webkit-scrollbar-track {
    background: transparent !important;
    margin: 25px 0 !important;
}

:root[data-theme="modern"] .story-content::-webkit-scrollbar-thumb,
:root[data-theme="modern-light"] .story-content::-webkit-scrollbar-thumb,
:root[data-theme="modern"] .cs-content::-webkit-scrollbar-thumb,
:root[data-theme="modern-light"] .cs-content::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-radius: 10px !important;
    transition: background 0.3s ease !important;
}

:root[data-theme="modern"] .story-content:hover::-webkit-scrollbar-thumb,
:root[data-theme="modern-light"] .story-content:hover::-webkit-scrollbar-thumb,
:root[data-theme="modern"] .story-content:active::-webkit-scrollbar-thumb,
:root[data-theme="modern-light"] .story-content:active::-webkit-scrollbar-thumb,
:root[data-theme="modern"] .cs-content:hover::-webkit-scrollbar-thumb,
:root[data-theme="modern-light"] .cs-content:hover::-webkit-scrollbar-thumb,
:root[data-theme="modern"] .cs-content:active::-webkit-scrollbar-thumb,
:root[data-theme="modern-light"] .cs-content:active::-webkit-scrollbar-thumb {
    background: rgba(200, 162, 200, 0.5) !important;
}

:root[data-theme="modern"] .story-content::-webkit-scrollbar-thumb:hover,
:root[data-theme="modern-light"] .story-content::-webkit-scrollbar-thumb:hover,
:root[data-theme="modern"] .cs-content::-webkit-scrollbar-thumb:hover,
:root[data-theme="modern-light"] .cs-content::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 162, 200, 0.7) !important;
}

/* ========================================
   MOBILE CHARACTER VIEWER
   ======================================== */

:root[data-theme="modern"] .mobile-character-btn.player,
:root[data-theme="modern-light"] .mobile-character-btn.player {
    right: 90px !important;
}

:root[data-theme="modern"] .mobile-character-btn.npc,
:root[data-theme="modern-light"] .mobile-character-btn.npc {
    right: 20px !important;
    background: linear-gradient(135deg, var(--accent-pink), var(--accent-rose)) !important;
}

:root[data-theme="modern"] .mobile-character-overlay,
:root[data-theme="modern-light"] .mobile-character-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--modal-bg) !important;
    z-index: 250 !important;
    animation: fadeIn 0.3s ease !important;
}

:root[data-theme="modern"] .mobile-character-overlay.active,
:root[data-theme="modern-light"] .mobile-character-overlay.active {
    display: block !important;
}

:root[data-theme="modern"] .mobile-character-container,
:root[data-theme="modern-light"] .mobile-character-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--content-bg) !important;
    overflow-y: auto !important;
    animation: slideInUp 0.3s ease !important;
}

:root[data-theme="modern"] .mobile-character-header,
:root[data-theme="modern-light"] .mobile-character-header {
    padding: 20px !important;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid var(--border-soft) !important;
}

:root[data-theme="modern"] .mobile-character-title,
:root[data-theme="modern-light"] .mobile-character-title {
    color: white !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    font-family: 'Quicksand', sans-serif !important;
}

:root[data-theme="modern"] .mobile-character-close,
:root[data-theme="modern-light"] .mobile-character-close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    color: white !important;
    font-size: 24px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s !important;
}

:root[data-theme="modern"] .mobile-character-close:hover,
:root[data-theme="modern-light"] .mobile-character-close:hover {
    background: rgba(255,255,255,0.3) !important;
    transform: rotate(90deg) !important;
}

:root[data-theme="modern"] .mobile-character-content,
:root[data-theme="modern-light"] .mobile-character-content {
    flex: 1 !important;
    padding: 30px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
}

:root[data-theme="modern"] .mobile-character-card,
:root[data-theme="modern-light"] .mobile-character-card {
    background: var(--bg-sidebar) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 20px !important;
    padding: 30px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-shadow: 0 10px 30px var(--shadow-soft) !important;
}


@media screen and (max-width: 990px) {
    /* Hide sidebars on mobile */
    :root[data-theme="modern"] .left-sidebar,
    :root[data-theme="modern-light"] .left-sidebar,
    :root[data-theme="modern"] .right-sidebar,
    :root[data-theme="modern-light"] .right-sidebar {
        display: none !important;
    }
    
    /* Full width content on mobile */
    :root[data-theme="modern"] .center-content,
    :root[data-theme="modern-light"] .center-content {
        padding: 0 20px !important;
    }
    
    :root[data-theme="modern"] .story-container,
    :root[data-theme="modern-light"] .story-container {
        left: 20px !important;
        right: 20px !important;
    }

    /* Show mobile character buttons */
    :root[data-theme="modern"] .mobile-character-btn,
    :root[data-theme="modern-light"] .mobile-character-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Expand center content to full width */
    :root[data-theme="modern"] .center-content,
    :root[data-theme="modern-light"] .center-content {
        padding: 0 20px !important;
    }

    :root[data-theme="modern"] .story-container,
    :root[data-theme="modern-light"] .story-container {
        left: 20px !important;
        right: 20px !important;
    }

    /* Adjust status bar for smaller screens */
    :root[data-theme="modern"] .status-bar,
    :root[data-theme="modern-light"] .status-bar {
        padding: 0 15px !important;
    }

    :root[data-theme="modern"] .status-center,
    :root[data-theme="modern-light"] .status-center {
        display: none !important;
    }

    :root[data-theme="modern"] .character-info,
    :root[data-theme="modern-light"] .character-info {
        padding: 6px 12px !important;
    }

    :root[data-theme="modern"] .character-avatar,
    :root[data-theme="modern-light"] .character-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    :root[data-theme="modern"] .version-badge,
    :root[data-theme="modern-light"] .version-badge {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }

    :root[data-theme="modern"] .header-btn,
    :root[data-theme="modern-light"] .header-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
    }
}

@media screen and (max-width: 640px) {
    /* Further mobile optimizations */
    :root[data-theme="modern"] .status-bar,
    :root[data-theme="modern-light"] .status-bar {
        height: 60px !important;
        padding: 0 10px !important;
    }

    :root[data-theme="modern"] .status-left,
    :root[data-theme="modern-light"] .status-left {
        gap: 10px !important;
    }

    :root[data-theme="modern"] .character-name,
    :root[data-theme="modern-light"] .character-name {
        font-size: 14px !important;
    }

    :root[data-theme="modern"] .character-age,
    :root[data-theme="modern-light"] .character-age {
        display: none !important;
    }

    :root[data-theme="modern"] .money-display,
    :root[data-theme="modern-light"] .money-display {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }

    :root[data-theme="modern"] .header-buttons,
    :root[data-theme="modern-light"] .header-buttons {
        gap: 6px !important;
    }

    :root[data-theme="modern"] .header-btn,
    :root[data-theme="modern-light"] .header-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    :root[data-theme="modern"] .story-content,
    :root[data-theme="modern-light"] .story-content {
        padding: 20px !important;
        font-size: 16px !important;
    }

    :root[data-theme="modern"] .dialogue-text,
    :root[data-theme="modern-light"] .dialogue-text {
        font-size: 16px !important;
    }

    :root[data-theme="modern"] .text-controls,
    :root[data-theme="modern-light"] .text-controls {
        bottom: 15px !important;
        padding: 6px 10px !important;
        gap: 6px !important;
    }

    :root[data-theme="modern"] .control-btn,
    :root[data-theme="modern-light"] .control-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    :root[data-theme="modern"] .mobile-character-btn,
    :root[data-theme="modern-light"] .mobile-character-btn {
        bottom: 70px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 22px !important;
    }

    :root[data-theme="modern"] .mobile-character-btn.player,
    :root[data-theme="modern-light"] .mobile-character-btn.player {
        right: 75px !important;
    }

    :root[data-theme="modern"] .mobile-character-btn.npc,
    :root[data-theme="modern-light"] .mobile-character-btn.npc {
        right: 15px !important;
    }

    /* Character sheet modal adjustments */
    :root[data-theme="modern"] .character-sheet,
    :root[data-theme="modern-light"] .character-sheet,
    :root[data-theme="modern"] .game-menu,
    :root[data-theme="modern-light"] .game-menu {
        width: 95vw !important;
        max-height: 90vh !important;
    }

    :root[data-theme="modern"] .cs-header,
    :root[data-theme="modern-light"] .cs-header,
    :root[data-theme="modern"] .menu-header,
    :root[data-theme="modern-light"] .menu-header {
        padding: 20px !important;
    }

    :root[data-theme="modern"] .cs-header-title,
    :root[data-theme="modern-light"] .cs-header-title,
    :root[data-theme="modern"] .menu-title,
    :root[data-theme="modern-light"] .menu-title {
        font-size: 20px !important;
    }

    /* Character sheet modal adjustments */
    :root[data-theme="modern"] .character-sheet,
    :root[data-theme="modern-light"] .character-sheet {
        width: 95vw !important;
        max-height: 90vh !important;
    }

    :root[data-theme="modern"] .cs-tabs,
    :root[data-theme="modern-light"] .cs-tabs {
        font-size: 14px !important;
    }

    :root[data-theme="modern"] .cs-tab,
    :root[data-theme="modern-light"] .cs-tab {
        padding: 12px 10px !important;
        font-size: 14px !important;
    }

    :root[data-theme="modern"] .cs-content,
    :root[data-theme="modern-light"] .cs-content {
        padding: 20px !important;
    }

    :root[data-theme="modern"] .stat-bar,
    :root[data-theme="modern-light"] .stat-bar {
        width: 80px !important;
    }

    :root[data-theme="modern"] .never-grid,
    :root[data-theme="modern-light"] .never-grid {
        grid-template-columns: 1fr !important;
    }
}