* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            font-family: "MS Sans Serif", sans-serif;
            font-size: 14px;
            overflow: hidden;
            cursor: default;
        }

        /* Mobile Media Queries - Game Boy Color Theme */
        @media (max-width: 768px) {
            body {
                font-size: 11px;
                overflow: hidden;
                background: #8b956d;
                padding-top: env(safe-area-inset-top);
                padding-bottom: env(safe-area-inset-bottom);
            }
        }


        /* Windows 95 Desktop Background */
        .desktop {
            width: 100vw;
            height: 100vh;
            background-color: #008080;
            position: relative;
        }

        /* Game Boy Color Mobile Design */
        @media (max-width: 768px) {
            .desktop {
                background: linear-gradient(135deg, #9bbc0f 0%, #8bac0f 100%);
                height: 100vh;
                height: 100dvh;
                overflow-y: auto;
                overflow-x: hidden;
                padding: calc(30px + env(safe-area-inset-top)) 16px calc(45px + env(safe-area-inset-bottom)) 16px;
                border-radius: 16px;
                border: 4px solid #566c3b;
                margin: 0;
                box-shadow:
                    inset 0 0 0 1px #8b956d,
                    inset 0 0 0 3px #1e2761,
                    0 0 30px rgba(0,0,0,0.3),
                    0 8px 32px rgba(0,0,0,0.2);
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                gap: 8px;
                -webkit-overflow-scrolling: touch;
            }

            .desktop::before {
                content: "";
                position: absolute;
                top: calc(-10px - env(safe-area-inset-top));
                left: 50%;
                transform: translateX(-50%);
                width: 80px;
                height: calc(4px + env(safe-area-inset-top));
                background: #1e2761;
                border-radius: 2px;
                box-shadow: inset 0 1px 0 #8b956d;
            }

            .desktop::after {
                content: "GAME BOY COLOR";
                position: absolute;
                bottom: -25px;
                left: 50%;
                transform: translateX(-50%);
                color: #1e2761;
                font-size: 8px;
                font-weight: bold;
                letter-spacing: 1px;
                font-family: monospace;
            }

            /* Game Boy Style Info Bar */
            .gameboy-info-bar {
                position: fixed;
                bottom: env(safe-area-inset-bottom);
                left: 0;
                right: 0;
                height: 40px;
                background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
                border-top: 2px solid #333;
                z-index: 999;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 16px;
                font-family: monospace;
                font-weight: bold;
                box-shadow: 
                    inset 0 1px 0 #333,
                    0 -4px 12px rgba(0,0,0,0.4);
                text-transform: uppercase;
            }

            .info-title {
                color: #9bbc0f;
                font-size: 9px;
                letter-spacing: 0.5px;
                text-shadow: 0 0 8px rgba(155, 188, 15, 0.6);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 70%;
            }

            .info-status {
                color: #ff6b6b;
                font-size: 8px;
                letter-spacing: 0.5px;
                opacity: 0.8;
                animation: blink 2s infinite;
                cursor: pointer;
                transition: all 0.2s ease;
            }

            .info-status:hover {
                color: #ffffff;
                text-shadow: 0 0 10px #ff6b6b;
                transform: scale(1.1);
            }

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

        /* Desktop Icons */
        .desktop-icon {
            position: absolute;
            width: 100px;
            text-align: center;
            padding: 8px;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.1s ease;
        }

        .desktop-icon:hover {
            background-color: rgba(0, 0, 128, 0.3);
            outline: 1px dotted #000080;
            transform: scale(1.05);
        }

        .desktop-icon.selected {
            background-color: #000080;
            color: white;
        }

        .desktop-icon img {
            width: 48px;
            height: 48px;
            margin-bottom: 5px;
            image-rendering: pixelated;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        /* Mobile Game Boy Color Style Icons */
        @media (max-width: 768px) {
            .desktop-icon {
                position: relative !important;
                width: 100%;
                max-width: 280px;
                margin: 4px auto;
                background: #0f380f;
                border: 3px solid #1e2761;
                border-radius: 12px;
                padding: 12px 18px;
                color: #9bbc0f;
                font-size: 11px;
                font-weight: bold;
                font-family: monospace;
                box-shadow: 
                    0 3px 0 #8b956d,
                    0 6px 12px rgba(0,0,0,0.4),
                    inset 0 2px 0 #306230,
                    0 0 0 1px rgba(155, 188, 15, 0.2);
                display: flex;
                align-items: center;
                gap: 15px;
                text-align: left;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                text-transform: uppercase;
                letter-spacing: 0.8px;
                transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
                backdrop-filter: blur(1px);
            }

            .desktop-icon:hover {
                background: #306230;
                outline: none;
                transform: translateY(-2px) scale(1.02);
                box-shadow: 
                    0 5px 0 #8b956d,
                    0 10px 20px rgba(0,0,0,0.5),
                    inset 0 2px 0 #9bbc0f,
                    0 0 20px rgba(155, 188, 15, 0.3);
                color: #ffffff;
                border-color: #9bbc0f;
            }

            .desktop-icon.selected {
                background: #8b956d;
                color: #1e2761;
                box-shadow: 
                    0 1px 0 #566c3b,
                    0 2px 6px rgba(0,0,0,0.4),
                    inset 0 1px 0 #ffffff;
            }

            .desktop-icon img {
                width: 24px;
                height: 24px;
                margin: 0;
                filter: brightness(0) saturate(100%) invert(66%) sepia(28%) saturate(1563%) hue-rotate(58deg) brightness(89%) contrast(86%);
                flex-shrink: 0;
            }

            .desktop-icon:hover img {
                filter: brightness(0) saturate(100%) invert(100%);
            }

            .desktop-icon span {
                flex: 1;
                text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
            }
        }

        /* Windows */


        .window-header {
            background: linear-gradient(to right, #000080, #1084d0);
            color: white;
            padding: 2px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: move;
        }

        .window-header.inactive {
            background: linear-gradient(to right, #808080, #b5b5b5);
        }

        /* Mobile Game Boy Color Window Header */
        @media (max-width: 768px) {
            .window-header {
                background: #8b956d;
                padding: 8px 12px;
                border-radius: 4px 4px 0 0;
                cursor: default;
                color: #1e2761;
                font-family: monospace;
                font-weight: bold;
                font-size: 10px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                box-shadow: 
                    0 2px 0 #566c3b,
                    inset 0 1px 0 #ffffff;
                border-bottom: 2px solid #1e2761;
            }

            .window-header.inactive {
                background: #566c3b;
                color: #8b956d;
            }
        }

        .window-title {
            font-weight: bold;
            font-size: 13px;
            padding-left: 3px;
        }

        .window-controls {
            display: flex;
            gap: 2px;
        }

        .window-button {
            width: 18px;
            height: 16px;
            background-color: #c0c0c0;
            border: 1px solid;
            border-color: #ffffff #000000 #000000 #ffffff;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .window-button:active {
            border-color: #000000 #ffffff #ffffff #000000;
        }

        /* Mobile Game Boy Color Window Buttons */
        @media (max-width: 768px) {
            .window-button {
                width: 32px;
                height: 32px;
                background: #8b956d;
                border: 2px solid #1e2761;
                border-radius: 4px;
                font-size: 14px;
                font-weight: bold;
                color: #1e2761;
                box-shadow:
                    0 2px 0 #566c3b,
                    inset 0 1px 0 #ffffff;
            }

            .window-button:active {
                border-color: #1e2761;
                box-shadow:
                    0 1px 0 #566c3b,
                    inset 0 1px 2px rgba(0,0,0,0.4);
                transform: translateY(1px);
            }
        }

        .window-content {
            padding: 10px;
            background-color: white;
            border: 2px inset #c0c0c0;
            margin: 2px;
            min-height: 200px;
            overflow: auto;
            flex: 1;
        }

        /* Mobile Game Boy Color Window Content */
        @media (max-width: 768px) {
            .window-content {
                background: #0f380f;
                border: none;
                border-radius: 0 0 4px 4px;
                margin: 0;
                padding: 12px;
                color: #9bbc0f;
                overflow-y: auto;
                flex: 1;
                font-family: monospace;
                font-size: 9px;
                line-height: 1.4;
                box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
            }

            .window-content h1, 
            .window-content h2, 
            .window-content h3 {
                color: #8b956d;
                text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
                text-transform: uppercase;
                letter-spacing: 1px;
            }

            .window-content a {
                color: #306230;
                text-decoration: none;
                font-weight: bold;
                text-transform: uppercase;
            }

            .window-content a:visited {
                color: #566c3b;
            }

            .window-content a:hover {
                color: #ffffff;
                background: #306230;
                padding: 1px 2px;
            }
        }

        .window {
            position: absolute !important;
            display: none;
            flex-direction: column;
            min-width: 200px;
            min-height: 150px;
            background-color: #c0c0c0;
            border: 2px solid;
            border-color: #ffffff #808080 #808080 #ffffff;
            box-shadow: 1px 1px 0 0 #000;
            top: auto;
            left: auto;
            margin: 0;
            transform: none;
        }

        /* Mobile Game Boy Color Style Windows */
        @media (max-width: 768px) {
            .window {
                position: fixed !important;
                top: calc(40px + env(safe-area-inset-top)) !important;
                left: 15px !important;
                right: 15px !important;
                bottom: calc(50px + env(safe-area-inset-bottom)) !important;
                width: auto !important;
                height: auto !important;
                background: #0f380f;
                border: 4px solid #1e2761;
                border-radius: 8px;
                box-shadow: 
                    0 0 0 2px #8b956d,
                    0 4px 16px rgba(0,0,0,0.6),
                    inset 0 1px 0 #306230;
                color: #9bbc0f;
                font-family: monospace;
            }
        }

        .window[style*="display: flex"], .window.open {
            display: flex;
        }

        /* Menu Bar */
        .menu-bar {
            background-color: #c0c0c0;
            border-bottom: 1px solid #000000;
            padding: 2px 4px;
            display: flex;
            gap: 10px;
        }

        .menu-item {
            padding: 4px 8px;
            cursor: pointer;
            font-size: 13px;
        }

        .menu-item {
            position: relative;
        }

        .menu-item:hover {
            background-color: #000080;
            color: white;
        }

        /* Dropdown menu styles */
        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #c0c0c0;
            border: 2px solid;
            border-color: #ffffff #808080 #808080 #ffffff;
            box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            min-width: 120px;
            z-index: 1001;
            display: none;
        }

        .dropdown-menu.show {
            display: block;
        }

        .dropdown-item {
            padding: 4px 12px;
            cursor: pointer;
            white-space: nowrap;
            font-size: 11px;
            border-bottom: 1px solid #808080;
        }

        .dropdown-item:last-child {
            border-bottom: none;
        }

        .dropdown-item:hover {
            background-color: #000080;
            color: white;
        }

        .dropdown-item.disabled {
            color: #808080;
            cursor: default;
        }

        .dropdown-item.disabled:hover {
            background-color: transparent;
            color: #808080;
        }

        .dropdown-separator {
            height: 1px;
            background-color: #808080;
            margin: 2px 0;
        }

        /* Mobile Game Boy Color Menu Bar */
        @media (max-width: 768px) {
            .menu-bar {
                background: #8b956d;
                border-bottom: 2px solid #1e2761;
                padding: 8px 12px;
                gap: 12px;
                border-radius: 4px 4px 0 0;
            }

            .menu-item {
                padding: 8px 12px;
                font-size: 10px;
                font-weight: bold;
                color: #1e2761;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                border-radius: 4px;
                transition: all 0.2s ease;
            }

            .menu-item:hover,
            .menu-item:active {
                background: #306230;
                color: #9bbc0f;
            }

            .dropdown-menu {
                background: #0f380f;
                border: 3px solid #1e2761;
                border-radius: 6px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.6);
                min-width: 140px;
            }

            .dropdown-item {
                padding: 10px 14px;
                font-size: 9px;
                font-weight: bold;
                color: #9bbc0f;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                border-bottom: 1px solid #1e2761;
            }

            .dropdown-item:hover {
                background: #306230;
                color: #ffffff;
            }

            .dropdown-item.disabled {
                color: #566c3b;
            }

            .dropdown-item.disabled:hover {
                background: transparent;
                color: #566c3b;
            }
        }

        /* Taskbar */
        .taskbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            background-color: #c0c0c0;
            border-top: 2px solid #ffffff;
            display: flex;
            align-items: center;
            z-index: 1000;
        }

        /* Hide taskbar on mobile */
        @media (max-width: 768px) {
            .taskbar {
                display: none;
            }
        }

        /* Start Button */
        .start-button {
            height: 34px;
            padding: 0 10px;
            margin: 3px;
            background-color: #c0c0c0;
            border: 2px solid;
            border-color: #ffffff #808080 #808080 #ffffff;
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: bold;
            cursor: pointer;
            font-size: 15px;
        }

        /* Mobile Game Boy Color Start Button */
        @media (max-width: 768px) {
            .start-button {
                height: 32px;
                background: #0f380f;
                border: 3px solid #1e2761;
                border-radius: 6px;
                color: #9bbc0f;
                font-size: 10px;
                font-weight: bold;
                font-family: monospace;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                box-shadow: 
                    0 2px 0 #566c3b,
                    0 4px 8px rgba(0,0,0,0.4),
                    inset 0 1px 0 #306230;
                text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
            }

            .start-button:active {
                border-color: #1e2761;
                transform: translateY(1px);
                box-shadow: 
                    0 1px 0 #566c3b,
                    0 2px 4px rgba(0,0,0,0.5),
                    inset 0 1px 0 #306230;
            }

            .start-button:hover {
                background: #306230;
                color: #ffffff;
            }
        }

        .start-button:active {
            border-color: #808080 #ffffff #ffffff #808080;
        }

        .start-button img {
            width: 20px;
            height: 20px;
        }

        /* Start Menu */
        .start-menu {
            position: absolute;
            bottom: 36px;
            left: 0;
            background-color: #c0c0c0;
            border: 2px solid;
            border-color: #ffffff #808080 #808080 #ffffff;
            width: 240px;
            display: none;
            z-index: 999;
        }

        .start-menu.open {
            display: block;
        }

        .start-menu-header {
            background: linear-gradient(to bottom, #000080, #1084d0);
            color: white;
            padding: 8px;
            font-weight: bold;
            writing-mode: vertical-lr;
            text-orientation: mixed;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 30px;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #taskbar-windows {
            display: flex;
            align-items: center;
            gap: 1px;
            flex-wrap: nowrap;
            overflow-x: auto;
        }

        .start-menu-items {
            margin-left: 30px;
            padding: 4px;
        }

        .start-menu-item {
            padding: 10px 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
        }

        .start-menu-item:hover {
            background-color: #000080;
            color: white;
        }

        .start-menu-item img {
            width: 24px;
            height: 24px;
        }

        .separator {
            height: 1px;
            background-color: #808080;
            margin: 2px 4px;
        }

        /* Mobile Game Boy Color Start Menu */
        @media (max-width: 768px) {
            .start-menu {
                position: fixed;
                bottom: calc(40px + env(safe-area-inset-bottom));
                left: 15px;
                right: 15px;
                width: auto;
                max-height: 60vh;
                background: #0f380f;
                border: 4px solid #1e2761;
                border-radius: 8px;
                box-shadow:
                    0 0 0 2px #8b956d,
                    0 6px 20px rgba(0,0,0,0.7);
                overflow-y: auto;
            }

            .start-menu-header {
                writing-mode: horizontal-tb;
                position: relative;
                width: 100%;
                height: auto;
                background: #8b956d;
                color: #1e2761;
                font-size: 12px;
                padding: 10px 12px;
                text-transform: uppercase;
                letter-spacing: 1px;
                font-family: monospace;
                border-bottom: 2px solid #1e2761;
            }

            .start-menu-items {
                margin-left: 0;
                padding: 8px;
            }

            .start-menu-item {
                padding: 14px 16px;
                font-size: 11px;
                font-weight: bold;
                color: #9bbc0f;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                border-radius: 4px;
                margin-bottom: 4px;
                background: rgba(48, 98, 48, 0.3);
            }

            .start-menu-item:hover {
                background: #306230;
                color: #ffffff;
            }

            .start-menu-item img {
                filter: brightness(0) saturate(100%) invert(66%) sepia(28%) saturate(1563%) hue-rotate(58deg) brightness(89%) contrast(86%);
            }

            .separator {
                background-color: #1e2761;
                margin: 6px 0;
            }
        }

        /* Task buttons */
        .task-button {
            height: 26px;
            padding: 0 10px;
            margin: 2px;
            background-color: #c0c0c0;
            border: 2px solid;
            border-color: #ffffff #808080 #808080 #ffffff;
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            font-size: 13px;
        }

        .task-button.active {
            background-color: #dfdfdf;
            border-color: #808080 #ffffff #ffffff #808080;
            font-weight: bold;
        }

        /* Clock */
        .clock {
            margin-left: auto;
            margin-right: 4px;
            padding: 0 8px;
            border: 1px inset #c0c0c0;
            height: 26px;
            display: flex;
            align-items: center;
            font-size: 13px;
        }

        /* Button styles */
        .button {
            background-color: #c0c0c0;
            border: 2px solid;
            border-color: #ffffff #808080 #808080 #ffffff;
            padding: 8px 15px;
            cursor: pointer;
            font-size: 13px;
            font-family: "MS Sans Serif", sans-serif;
        }

        .button:active {
            border-color: #808080 #ffffff #ffffff #808080;
        }

        /* Mobile Game Boy Color Button Styles */
        @media (max-width: 768px) {
            .button {
                background: #306230;
                border: 2px solid #1e2761;
                border-radius: 4px;
                color: #9bbc0f;
                font-size: 9px;
                font-weight: bold;
                font-family: monospace;
                padding: 8px 12px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                box-shadow: 
                    0 2px 0 #8b956d,
                    0 3px 6px rgba(0,0,0,0.4),
                    inset 0 1px 0 #9bbc0f;
                text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
                transition: all 0.1s ease;
            }

            .button:active {
                border-color: #1e2761;
                transform: translateY(1px);
                box-shadow: 
                    0 1px 0 #8b956d,
                    0 2px 4px rgba(0,0,0,0.5),
                    inset 0 1px 0 #9bbc0f;
            }

            .button:hover {
                background: #9bbc0f;
                color: #0f380f;
                text-shadow: none;
            }
        }

        /* Text input */
        .text-input {
            border: 2px inset #c0c0c0;
            background-color: white;
            padding: 4px;
            font-family: "MS Sans Serif", sans-serif;
            font-size: 13px;
        }

        /* Mobile Game Boy Color Text Input */
        @media (max-width: 768px) {
            .text-input {
                background: #0f380f;
                border: 2px solid #1e2761;
                border-radius: 4px;
                color: #9bbc0f;
                font-size: 10px;
                font-family: monospace;
                padding: 6px 8px;
                box-shadow: 
                    inset 0 2px 4px rgba(0,0,0,0.5),
                    inset 0 1px 0 #306230;
            }

            .text-input:focus {
                outline: none;
                border-color: #8b956d;
                background: #306230;
                box-shadow: 
                    inset 0 2px 4px rgba(0,0,0,0.5),
                    0 0 0 1px #9bbc0f;
                color: #ffffff;
            }

            .text-input::placeholder {
                color: #566c3b;
            }
        }

        /* Icon Base64 - Using emoji as placeholders */
        .icon-manuscript::before {
            content: "📖";
            font-size: 24px;
        }

        .icon-folder::before {
            content: "📁";
            font-size: 24px;
        }

        .icon-notepad::before {
            content: "📝";
            font-size: 24px;
        }

        .icon-dice::before {
            content: "🎲";
            font-size: 24px;
        }

        .icon-map::before {
            content: "🗺️";
            font-size: 24px;
        }

        .icon-mail::before {
            content: "📧";
            font-size: 24px;
        }

        .icon-coffee::before {
            content: "☕";
            font-size: 24px;
        }

        .icon-character::before {
            content: "🧙";
            font-size: 24px;
        }

        .icon-start::before {
            content: "⊞";
            font-size: 14px;
        }

        .icon-sword::before {
            content: "⚔️";
            font-size: 24px;
        }

        /* Links */
        a {
            color: #0000FF;
            text-decoration: underline;
            cursor: pointer;
        }

        a:visited {
            color: #800080;
        }

        /* Special text styling */
        .manuscript-text {
            font-family: "Courier New", monospace;
            font-size: 12px;
            line-height: 1.6;
            white-space: pre-wrap;
        }

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

        .platform-list li {
            padding: 5px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .platform-list li::before {
            content: "▸";
            color: #000080;
        }

        /* Dungeon Mapper styles */
        .dungeon-tool.active {
            background-color: #000080;
            color: white;
            border-color: #000000 #ffffff #ffffff #000000;
        }

        .dungeon-tool:hover {
            background-color: #dfdfdf;
        }

        /* Platform button styles */
        .platform-btn {
            transition: all 0.1s ease;
        }

        .platform-btn:hover {
            background-color: #000080;
            color: white;
            transform: scale(1.02);
        }

        .platform-btn:active {
            transform: scale(0.98);
        }

        /* Loading state */
        .loading-content {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .loading-content::before {
            content: "⏳";
            font-size: 24px;
            display: block;
            margin-bottom: 10px;
        }

        /* Character Creator styles */
        .stat-modifier {
            font-size: 9px;
            color: #666;
            margin-top: 2px;
        }

        .final-score {
            font-size: 11px;
            font-weight: bold;
            color: #000080;
            margin-top: 2px;
        }

        .stat-input {
            margin: 2px 0;
        }

        #character-details {
            font-size: 10px;
            line-height: 1.4;
        }

        #racial-abilities, #class-features {
            max-height: 100px;
            overflow-y: auto;
        }

        .ability-item {
            margin-bottom: 8px;
            padding: 4px;
            background: #f9f9f9;
            border: 1px solid #ddd;
        }

        .ability-name {
            font-weight: bold;
            color: #000080;
        }

        .ability-desc {
            font-size: 9px;
            color: #333;
            margin-top: 2px;
        }

        /* Window resize handles */
        .window {
            position: relative;
        }

        .resize-handle {
            position: absolute;
            background: transparent;
        }

        .resize-handle-n {
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            cursor: n-resize;
        }

        .resize-handle-s {
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            cursor: s-resize;
        }

        .resize-handle-e {
            top: 0;
            right: 0;
            bottom: 0;
            width: 4px;
            cursor: e-resize;
        }

        .resize-handle-w {
            top: 0;
            left: 0;
            bottom: 0;
            width: 4px;
            cursor: w-resize;
        }

        .resize-handle-ne {
            top: 0;
            right: 0;
            width: 8px;
            height: 8px;
            cursor: ne-resize;
        }

        .resize-handle-nw {
            top: 0;
            left: 0;
            width: 8px;
            height: 8px;
            cursor: nw-resize;
        }

        .resize-handle-se {
            bottom: 0;
            right: 0;
            width: 8px;
            height: 8px;
            cursor: se-resize;
        }

        .resize-handle-sw {
            bottom: 0;
            left: 0;
            width: 8px;
            height: 8px;
            cursor: sw-resize;
        }

        /* Visual resize indicator in bottom-right corner */
        .window::after {
            content: "";
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 12px;
            height: 12px;
            background: linear-gradient(
                -45deg,
                transparent 0px,
                transparent 2px,
                #808080 2px,
                #808080 3px,
                transparent 3px,
                transparent 5px,
                #808080 5px,
                #808080 6px,
                transparent 6px,
                transparent 8px,
                #808080 8px,
                #808080 9px,
                transparent 9px
            );
            pointer-events: none;
        }

        .window.resizing {
            user-select: none;
        }

        /* D&D Dice Roller Styles */
        .stat-block {
            text-align: center;
            padding: 10px;
            border: 1px solid #808080;
            background: white;
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .stat-block:hover {
            background: #f0f0f0;
            border-color: #000080;
        }

        .stat-block strong {
            display: block;
            font-size: 11px;
            color: #000080;
            margin-bottom: 5px;
        }

        .stat-display {
            font-size: 24px;
            font-weight: bold;
            color: #000;
            margin: 5px 0;
            min-height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dice-animation {
            font-size: 12px;
            color: #666;
            min-height: 20px;
            font-family: monospace;
        }

        /* Dice Rolling Animation */
        @keyframes diceRoll {
            0% { transform: rotate(0deg) scale(1); }
            25% { transform: rotate(90deg) scale(1.1); }
            50% { transform: rotate(180deg) scale(1.2); }
            75% { transform: rotate(270deg) scale(1.1); }
            100% { transform: rotate(360deg) scale(1); }
        }

        @keyframes statGlow {
            0% { 
                background: white;
                box-shadow: none;
            }
            50% { 
                background: #ffffcc;
                box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
            }
            100% { 
                background: white;
                box-shadow: none;
            }
        }

        .stat-block.rolling {
            animation: statGlow 0.6s ease-in-out;
        }

        .dice-animation.rolling {
            color: #ff6600;
            font-weight: bold;
        }

        .stat-display.new-result {
            animation: statGlow 1s ease-in-out;
            color: #008000;
        }

        /* Rolling log styles */
        .rolling-log {
            scrollbar-width: thin;
            scrollbar-color: #00ff00 #000;
        }

        .rolling-log::-webkit-scrollbar {
            width: 12px;
        }

        .rolling-log::-webkit-scrollbar-track {
            background: #000;
        }

        .rolling-log::-webkit-scrollbar-thumb {
            background: #00ff00;
            border-radius: 2px;
        }

        /* High/Low stat highlighting */
        .stat-display.high-stat {
            color: #008000;
            font-weight: bold;
        }

        .stat-display.low-stat {
            color: #cc0000;
        }

        .stat-display.exceptional-stat {
            color: #000080;
            text-shadow: 0 0 3px rgba(0, 0, 255, 0.3);
        }

        /* Hide Game Boy Info Bar on desktop */
        .gameboy-info-bar {
            display: none;
        }

        /* Hide dice roller on mobile */
        @media (max-width: 768px) {
            .desktop-icon[data-window="diceroller"] {
                display: none !important;
            }
        }

        /* Show Game Boy Info Bar on mobile */
        @media (max-width: 768px) {
            .gameboy-info-bar {
                display: flex !important;
            }

            /* Space Invaders Game Styles */
            .space-invaders-game {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: #0f380f;
                z-index: 10000;
                display: none;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)) 20px;
                font-family: monospace;
            }

            .space-invaders-game.active {
                display: flex;
            }

            .game-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                max-width: 280px;
                color: #9bbc0f;
                font-size: 10px;
                font-weight: bold;
                text-transform: uppercase;
                letter-spacing: 1px;
                margin-bottom: 10px;
            }

            .game-title {
                text-shadow: 0 0 8px rgba(155, 188, 15, 0.6);
            }

            .game-score {
                color: #ff6b6b;
                font-size: 8px;
            }

            #game-canvas {
                border: 3px solid #1e2761;
                border-radius: 8px;
                background: #000;
                box-shadow: 
                    0 0 0 2px #8b956d,
                    0 4px 16px rgba(0,0,0,0.6),
                    inset 0 2px 0 #306230;
                image-rendering: pixelated;
            }

            .game-controls {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                max-width: 280px;
                margin-top: 15px;
                gap: 10px;
            }

            .game-btn {
                background: #306230;
                border: 2px solid #1e2761;
                border-radius: 8px;
                color: #9bbc0f;
                font-size: 18px;
                font-weight: bold;
                padding: 12px 16px;
                cursor: pointer;
                box-shadow: 
                    0 3px 0 #8b956d,
                    0 6px 12px rgba(0,0,0,0.4),
                    inset 0 2px 0 #9bbc0f;
                transition: all 0.1s ease;
                user-select: none;
                touch-action: manipulation;
            }

            .game-btn:active {
                transform: translateY(2px);
                box-shadow: 
                    0 1px 0 #8b956d,
                    0 3px 6px rgba(0,0,0,0.5),
                    inset 0 1px 0 #9bbc0f;
            }

            #shoot-btn {
                flex: 1;
                max-width: 80px;
            }

            .game-exit-btn {
                background: #8b956d;
                border: 2px solid #1e2761;
                border-radius: 6px;
                color: #1e2761;
                font-size: 8px;
                font-weight: bold;
                font-family: monospace;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                padding: 8px 12px;
                cursor: pointer;
                margin-top: 15px;
                box-shadow: 
                    0 2px 0 #566c3b,
                    0 4px 8px rgba(0,0,0,0.3);
                transition: all 0.1s ease;
            }

            .game-exit-btn:active {
                transform: translateY(1px);
                box-shadow: 
                    0 1px 0 #566c3b,
                    0 2px 4px rgba(0,0,0,0.4);
            }
        }

        /* Game Boy Color Mobile Screen Effect */
        @media (max-width: 768px) {
            /* Add LCD dot matrix effect */
            .desktop::before {
                content: "";
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image: 
                    repeating-linear-gradient(
                        0deg,
                        transparent,
                        transparent 1px,
                        rgba(139, 149, 109, 0.1) 1px,
                        rgba(139, 149, 109, 0.1) 2px
                    ),
                    repeating-linear-gradient(
                        90deg,
                        transparent,
                        transparent 1px,
                        rgba(139, 149, 109, 0.1) 1px,
                        rgba(139, 149, 109, 0.1) 2px
                    );
                pointer-events: none;
                z-index: 10000;
            }

            /* Remove old button labels since we have info bar now */

            /* Add power LED indicator */
            body::after {
                content: "●";
                position: fixed;
                top: calc(18px + env(safe-area-inset-top));
                right: 18px;
                color: #ff0000;
                font-size: 6px;
                z-index: 10001;
                animation: powerLED 3s ease-in-out infinite alternate;
                text-shadow: 0 0 3px #ff0000;
            }

            @keyframes powerLED {
                0% { opacity: 0.5; }
                100% { opacity: 1; }
            }

            /* Hide all desktop icons except book platforms, support, chapter updates and contact */
            .desktop-icon:not([data-url*="wattpad"]):not([data-url*="tapas"]):not([data-url*="royalroad"]):not([data-url*="archiveofourown"]):not([data-url*="getinkspired"]):not([data-url*="scribblehub"]):not([data-window="kofi"]):not([data-window="news"]):not([data-window="mail"]) {
                display: none;
            }
        }

        /* Soul Color Quiz Styles - Windows 95 Theme */
        .quiz-section {
            display: none;
        }

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

        .quiz-option {
            background: #c0c0c0;
            border: 2px solid;
            border-color: #ffffff #808080 #808080 #ffffff;
            padding: 12px 15px;
            margin: 8px 0;
            cursor: pointer;
            transition: all 0.1s;
        }

        .quiz-option:hover {
            background: #dfdfdf;
            border-color: #000080 #ffffff #ffffff #000080;
        }

        .quiz-option:active {
            border-color: #808080 #ffffff #ffffff #808080;
        }

        .quiz-option.divine {
            border-left: 4px solid #FFD700;
        }

        .quiz-option.corrupted {
            border-left: 4px solid #8B0000;
        }

        .quiz-option-text {
            font-weight: bold;
            margin-bottom: 4px;
        }

        .quiz-option-detail {
            font-size: 11px;
            color: #666;
            font-style: italic;
        }

        /* Mobile Game Boy Color Quiz Styles */
        @media (max-width: 768px) {
            .quiz-option {
                background: #0f380f;
                border: 3px solid #1e2761;
                border-radius: 8px;
                color: #9bbc0f;
                font-family: monospace;
                font-size: 10px;
                padding: 10px 12px;
            }

            .quiz-option:hover {
                background: #306230;
                border-color: #9bbc0f;
                color: #ffffff;
            }

            .quiz-option.divine {
                border-left: 4px solid #FFD700;
            }

            .quiz-option.corrupted {
                border-left: 4px solid #FF6B6B;
            }

            .quiz-option-text {
                color: #9bbc0f;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .quiz-option-detail {
                color: #566c3b;
                font-size: 8px;
            }

            #soul-color-display {
                width: 150px !important;
                height: 150px !important;
                border: 3px solid #1e2761 !important;
                box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important;
            }
        }