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

        body {
            font-family: 'Cinzel', serif;
            min-height: 100vh;
            color: #d4d0c8;
            overflow-x: hidden;
            background: #0a0908;
        }

        /* Deep mountain stone background */
        .mountain-hall {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                /* Ambient forge glow from below */
                radial-gradient(ellipse 120% 40% at 50% 110%, rgba(255, 100, 30, 0.15) 0%, transparent 60%),
                /* Torch light from sides */
                radial-gradient(ellipse at 5% 30%, rgba(255, 150, 50, 0.08) 0%, transparent 40%),
                radial-gradient(ellipse at 95% 30%, rgba(255, 150, 50, 0.08) 0%, transparent 40%),
                /* Base stone gradient */
                linear-gradient(180deg,
                    #1a1815 0%,
                    #252220 20%,
                    #1f1c1a 40%,
                    #181614 60%,
                    #1a1512 80%,
                    #0d0b0a 100%);
            z-index: -3;
        }

        /* Rough stone texture overlay */
        .stone-texture {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                /* Large stone blocks */
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 120px,
                    rgba(0,0,0,0.3) 120px,
                    rgba(0,0,0,0.1) 123px,
                    transparent 126px
                ),
                repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 200px,
                    rgba(0,0,0,0.2) 200px,
                    rgba(0,0,0,0.05) 204px,
                    transparent 208px
                ),
                /* Stone grain */
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            opacity: 0.15;
            z-index: -2;
            pointer-events: none;
        }

        /* Metal beam accents */
        .metal-beams {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .beam-horizontal {
            position: absolute;
            width: 100%;
            height: 20px;
            background: linear-gradient(180deg,
                #3a3632 0%,
                #4a4540 15%,
                #2a2825 50%,
                #1a1815 85%,
                #0a0908 100%);
            box-shadow:
                0 3px 10px rgba(0,0,0,0.8),
                inset 0 1px 0 rgba(255,255,255,0.1),
                inset 0 -1px 0 rgba(0,0,0,0.5);
        }

        .beam-horizontal.top { top: 80px; }
        .beam-horizontal.bottom { bottom: 40px; }

        /* Rivets on beams */
        .rivet {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%,
                #5a5550 0%,
                #3a3530 40%,
                #2a2520 70%,
                #1a1510 100%);
            box-shadow:
                inset 0 1px 2px rgba(255,255,255,0.2),
                inset 0 -1px 2px rgba(0,0,0,0.5),
                0 2px 4px rgba(0,0,0,0.6);
            top: 4px;
        }

        /* Forge ember particles */
        .embers {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
            overflow: hidden;
        }

        .ember {
            position: absolute;
            width: 4px;
            height: 4px;
            background: radial-gradient(circle, #ff6a00 0%, #ff4500 50%, transparent 100%);
            border-radius: 50%;
            bottom: -10px;
            animation: rise 6s infinite ease-out;
            box-shadow: 0 0 6px #ff4500, 0 0 12px rgba(255, 100, 0, 0.5);
        }

        @keyframes rise {
            0% {
                transform: translateY(0) translateX(0) scale(1);
                opacity: 1;
            }
            50% {
                opacity: 0.8;
            }
            100% {
                transform: translateY(-100vh) translateX(var(--drift)) scale(0.3);
                opacity: 0;
            }
        }

        /* Torch flame effect */
        .torch {
            position: fixed;
            width: 60px;
            height: 120px;
            z-index: 5;
        }

        .torch.left {
            left: 30px;
            top: 150px;
        }

        .torch.right {
            right: 30px;
            top: 150px;
        }

        .torch-bracket {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 60px;
            background: linear-gradient(90deg,
                #2a2520 0%,
                #4a4540 30%,
                #5a5550 50%,
                #4a4540 70%,
                #2a2520 100%);
            border-radius: 3px;
            box-shadow: 2px 2px 8px rgba(0,0,0,0.8);
        }

        .flame-container {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 60px;
        }

        .flame {
            position: absolute;
            bottom: 0;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            animation: flicker 0.5s infinite alternate;
        }

        .flame.outer {
            width: 40px;
            height: 55px;
            left: 0;
            background: radial-gradient(ellipse at 50% 90%,
                #ff6a00 0%,
                #ff4500 30%,
                #cc2200 60%,
                transparent 100%);
            filter: blur(2px);
        }

        .flame.middle {
            width: 30px;
            height: 45px;
            left: 5px;
            background: radial-gradient(ellipse at 50% 85%,
                #ffaa00 0%,
                #ff7700 40%,
                #ff4500 70%,
                transparent 100%);
            animation-delay: 0.1s;
        }

        .flame.inner {
            width: 18px;
            height: 30px;
            left: 11px;
            background: radial-gradient(ellipse at 50% 80%,
                #ffffcc 0%,
                #ffdd66 30%,
                #ffaa00 60%,
                transparent 100%);
            animation-delay: 0.2s;
        }

        @keyframes flicker {
            0% { transform: scaleX(1) scaleY(1) translateY(0); }
            25% { transform: scaleX(0.95) scaleY(1.02) translateY(-2px); }
            50% { transform: scaleX(1.02) scaleY(0.98) translateY(-1px); }
            75% { transform: scaleX(0.98) scaleY(1.03) translateY(-3px); }
            100% { transform: scaleX(1.01) scaleY(0.97) translateY(-1px); }
        }

        .torch-glow {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: radial-gradient(circle,
                rgba(255, 120, 40, 0.3) 0%,
                rgba(255, 80, 20, 0.1) 40%,
                transparent 70%);
            top: -60px;
            left: -70px;
            animation: glow 2s infinite ease-in-out;
            pointer-events: none;
        }

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

        /* Main container */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 120px 40px 80px;
            position: relative;
            z-index: 2;
        }

        /* Main header - carved stone banner */
        .header-banner {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

        .stone-banner {
            display: inline-block;
            padding: 30px 80px;
            background: linear-gradient(180deg,
                #3a3530 0%,
                #4a4540 10%,
                #3a3530 30%,
                #2a2520 70%,
                #1a1510 100%);
            border-radius: 8px;
            position: relative;
            box-shadow:
                0 8px 32px rgba(0,0,0,0.8),
                inset 0 2px 4px rgba(255,255,255,0.1),
                inset 0 -4px 8px rgba(0,0,0,0.4);
        }

        /* Decorative corner brackets */
        .stone-banner::before,
        .stone-banner::after {
            content: '';
            position: absolute;
            width: 40px;
            height: 40px;
            border: 4px solid #8b7355;
            box-shadow:
                inset 0 0 6px rgba(0,0,0,0.5),
                0 0 8px rgba(0,0,0,0.4);
        }

        .stone-banner::before {
            top: 10px;
            left: 10px;
            border-right: none;
            border-bottom: none;
            border-radius: 4px 0 0 0;
        }

        .stone-banner::after {
            top: 10px;
            right: 10px;
            border-left: none;
            border-bottom: none;
            border-radius: 0 4px 0 0;
        }

        .corner-bracket-bl,
        .corner-bracket-br {
            position: absolute;
            width: 40px;
            height: 40px;
            border: 4px solid #8b7355;
            box-shadow:
                inset 0 0 6px rgba(0,0,0,0.5),
                0 0 8px rgba(0,0,0,0.4);
        }

        .corner-bracket-bl {
            bottom: 10px;
            left: 10px;
            border-right: none;
            border-top: none;
            border-radius: 0 0 0 4px;
        }

        .corner-bracket-br {
            bottom: 10px;
            right: 10px;
            border-left: none;
            border-top: none;
            border-radius: 0 0 4px 0;
        }

        h1 {
            font-family: 'Cinzel Decorative', serif;
            font-size: 3em;
            font-weight: 700;
            color: transparent;
            background: linear-gradient(180deg,
                #fff8e8 0%,
                #ffe4a0 15%,
                #ffcc44 30%,
                #ff9922 50%,
                #ff6600 70%,
                #dd3300 90%,
                #aa1100 100%);
            -webkit-background-clip: text;
            background-clip: text;
            text-shadow:
                0 0 10px rgba(255, 200, 100, 1),
                0 0 20px rgba(255, 150, 50, 0.9),
                0 0 40px rgba(255, 100, 30, 0.8),
                0 0 60px rgba(255, 80, 20, 0.6),
                0 0 80px rgba(255, 50, 10, 0.5),
                0 0 120px rgba(255, 30, 0, 0.4),
                2px 2px 4px rgba(0,0,0,0.8);
            letter-spacing: 4px;
            animation: headerGlow 2s ease-in-out infinite alternate;
        }

        @keyframes headerGlow {
            0% {
                text-shadow:
                    0 0 10px rgba(255, 200, 100, 1),
                    0 0 20px rgba(255, 150, 50, 0.9),
                    0 0 40px rgba(255, 100, 30, 0.8),
                    0 0 60px rgba(255, 80, 20, 0.6),
                    0 0 80px rgba(255, 50, 10, 0.5),
                    0 0 120px rgba(255, 30, 0, 0.4),
                    2px 2px 4px rgba(0,0,0,0.8);
                filter: brightness(1);
            }
            100% {
                text-shadow:
                    0 0 15px rgba(255, 220, 120, 1),
                    0 0 30px rgba(255, 180, 80, 1),
                    0 0 50px rgba(255, 130, 50, 0.9),
                    0 0 80px rgba(255, 100, 40, 0.7),
                    0 0 100px rgba(255, 70, 20, 0.6),
                    0 0 150px rgba(255, 40, 10, 0.5),
                    2px 2px 4px rgba(0,0,0,0.8);
                filter: brightness(1.1);
            }
        }


        .subtitle {
            font-family: 'Metamorphous', serif;
            font-size: 1.2em;
            color: transparent;
            background: linear-gradient(180deg,
                #ffeecc 0%,
                #ffcc66 30%,
                #ff9933 60%,
                #ff6600 100%);
            -webkit-background-clip: text;
            background-clip: text;
            margin-top: 15px;
            letter-spacing: 6px;
            text-transform: uppercase;
            text-shadow:
                0 0 8px rgba(255, 180, 80, 0.9),
                0 0 15px rgba(255, 130, 50, 0.7),
                0 0 30px rgba(255, 100, 30, 0.5),
                0 0 50px rgba(255, 60, 10, 0.4),
                0 2px 4px rgba(0,0,0,0.6);
            animation: subtitleGlow 2.5s ease-in-out infinite alternate;
        }

        @keyframes subtitleGlow {
            0% {
                text-shadow:
                    0 0 8px rgba(255, 180, 80, 0.9),
                    0 0 15px rgba(255, 130, 50, 0.7),
                    0 0 30px rgba(255, 100, 30, 0.5),
                    0 0 50px rgba(255, 60, 10, 0.4),
                    0 2px 4px rgba(0,0,0,0.6);
            }
            100% {
                text-shadow:
                    0 0 12px rgba(255, 200, 100, 1),
                    0 0 25px rgba(255, 160, 70, 0.9),
                    0 0 40px rgba(255, 120, 50, 0.7),
                    0 0 60px rgba(255, 80, 20, 0.5),
                    0 2px 4px rgba(0,0,0,0.6);
            }
        }

        /* Rune decorations */
        .runes {
            margin-top: 20px;
            font-size: 1.5em;
            letter-spacing: 15px;
            color: transparent;
            background: linear-gradient(180deg,
                #ffd080 0%,
                #ff9944 40%,
                #ff6622 70%,
                #cc3300 100%);
            -webkit-background-clip: text;
            background-clip: text;
            text-shadow:
                0 0 10px rgba(255, 150, 50, 0.8),
                0 0 20px rgba(255, 100, 30, 0.6),
                0 0 40px rgba(255, 60, 10, 0.4);
            animation: runeGlow 3s ease-in-out infinite alternate;
        }

        @keyframes runeGlow {
            0% {
                text-shadow:
                    0 0 10px rgba(255, 150, 50, 0.8),
                    0 0 20px rgba(255, 100, 30, 0.6),
                    0 0 40px rgba(255, 60, 10, 0.4);
            }
            100% {
                text-shadow:
                    0 0 15px rgba(255, 180, 80, 1),
                    0 0 30px rgba(255, 130, 50, 0.8),
                    0 0 50px rgba(255, 80, 20, 0.6);
            }
        }

        /* Description text */
        .description {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 60px;
            font-family: 'Cinzel', serif;
            font-size: 1.1em;
            line-height: 1.8;
            color: #a09080;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        /* Tools section */
        .tools-section {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 40px;
            padding: 20px;
        }

        /* Individual tool plaque */
        .tool-plaque {
            position: relative;
            width: 320px;
            text-decoration: none;
            transition: transform 0.3s ease;
        }

        .tool-plaque:hover {
            transform: translateY(-8px);
        }

        /* Bronze/iron plaque base */
        .plaque-base {
            background: linear-gradient(160deg,
                #5a4a3a 0%,
                #6b5a48 10%,
                #7a6a55 20%,
                #6b5a48 35%,
                #5a4a3a 50%,
                #4a3a2a 65%,
                #5a4a3a 80%,
                #4a3a2a 100%);
            border-radius: 12px;
            padding: 25px;
            position: relative;
            box-shadow:
                0 12px 40px rgba(0,0,0,0.7),
                0 4px 12px rgba(0,0,0,0.5),
                inset 0 2px 4px rgba(255,255,255,0.15),
                inset 0 -2px 6px rgba(0,0,0,0.4);
        }

        /* Hammered metal texture overlay */
        .plaque-base::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            opacity: 0.08;
            border-radius: 12px;
            pointer-events: none;
        }

        /* Decorative border with rivets */
        .plaque-border {
            border: 3px solid #8b7355;
            border-radius: 8px;
            padding: 20px;
            position: relative;
            background: linear-gradient(180deg,
                rgba(30, 25, 20, 0.9) 0%,
                rgba(40, 35, 28, 0.95) 50%,
                rgba(25, 20, 15, 0.9) 100%);
            box-shadow:
                inset 0 0 20px rgba(0,0,0,0.5),
                inset 0 2px 4px rgba(255,255,255,0.05);
        }

        /* Corner rivets for plaque */
        .plaque-rivet {
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%,
                #8b7a65 0%,
                #6b5a48 30%,
                #5a4a38 60%,
                #4a3a28 100%);
            box-shadow:
                inset 0 2px 3px rgba(255,255,255,0.3),
                inset 0 -2px 3px rgba(0,0,0,0.4),
                0 3px 6px rgba(0,0,0,0.6);
        }

        .plaque-rivet.tl { top: -8px; left: -8px; }
        .plaque-rivet.tr { top: -8px; right: -8px; }
        .plaque-rivet.bl { bottom: -8px; left: -8px; }
        .plaque-rivet.br { bottom: -8px; right: -8px; }

        /* Tool icon area */
        .tool-icon {
            text-align: center;
            margin-bottom: 15px;
            font-size: 3.5em;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
        }

        /* Tool title - engraved look */
        .tool-title {
            font-family: 'Cinzel Decorative', serif;
            font-size: 1.4em;
            font-weight: 600;
            text-align: center;
            color: #d4a574;
            text-shadow:
                1px 1px 2px rgba(0,0,0,0.8),
                0 0 20px rgba(255, 150, 80, 0.2);
            margin-bottom: 10px;
            letter-spacing: 2px;
        }

        /* Tool description */
        .tool-desc {
            font-family: 'Cinzel', serif;
            font-size: 0.9em;
            text-align: center;
            color: #9a8a7a;
            line-height: 1.6;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        /* Hover glow effect */
        .tool-plaque:hover .plaque-base {
            box-shadow:
                0 16px 50px rgba(0,0,0,0.8),
                0 6px 16px rgba(0,0,0,0.6),
                0 0 40px rgba(255, 120, 50, 0.15),
                inset 0 2px 4px rgba(255,255,255,0.2),
                inset 0 -2px 6px rgba(0,0,0,0.4);
        }

        .tool-plaque:hover .tool-title {
            color: #e8c090;
            text-shadow:
                1px 1px 2px rgba(0,0,0,0.8),
                0 0 30px rgba(255, 180, 100, 0.4);
        }

        /* Hanging chains for plaques */
        .chain {
            position: absolute;
            top: -30px;
            width: 8px;
            height: 35px;
            background: linear-gradient(90deg,
                #3a3530 0%,
                #5a5550 30%,
                #6a6560 50%,
                #5a5550 70%,
                #3a3530 100%);
            border-radius: 4px;
            box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
        }

        .chain.left { left: 40px; }
        .chain.right { right: 40px; }

        .chain::before,
        .chain::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 10px;
            border: 3px solid #4a4540;
            border-radius: 50%;
            left: -3px;
            background: transparent;
        }

        .chain::before { top: -5px; }
        .chain::after { bottom: -5px; }

        /* Footer anvil decoration */
        .footer {
            text-align: center;
            margin-top: 80px;
            padding: 40px;
            position: relative;
        }

        .anvil-icon {
            font-size: 4em;
            filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
            margin-bottom: 20px;
        }

        .footer-text {
            font-family: 'Metamorphous', serif;
            font-size: 0.9em;
            color: #6b5a48;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .container {
                padding: 100px 20px 60px;
            }

            h1 {
                font-size: 2em;
            }

            .stone-banner {
                padding: 20px 40px;
            }

            .torch {
                display: none;
            }

            .tool-plaque {
                width: 280px;
            }

            .beam-horizontal {
                display: none;
            }
        }

        /* Coming soon badge */
        .coming-soon {
            position: absolute;
            top: 15px;
            right: -10px;
            background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
            color: #d4a574;
            font-family: 'Cinzel', serif;
            font-size: 0.7em;
            padding: 4px 12px;
            border-radius: 3px;
            transform: rotate(15deg);
            box-shadow: 0 2px 8px rgba(0,0,0,0.5);
            letter-spacing: 1px;
        }

        /* Drow Sign - shadowy sneak sign */
        .drow-sign {
            position: relative;
            width: 320px;
            text-decoration: none;
            transition: transform 0.3s ease;
        }

        .drow-sign:hover {
            transform: translateY(-8px);
        }

        .shadow-wisps {
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            background: radial-gradient(ellipse at center,
                rgba(124, 58, 237, 0.08) 0%,
                transparent 70%);
            pointer-events: none;
            animation: shadowPulse 4s ease-in-out infinite;
        }

        @keyframes shadowPulse {
            0%, 100% { opacity: 0.6; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.05); }
        }

        .sign-body {
            position: relative;
        }

        /* Spider silk threads holding the sign */
        .spider-silk {
            position: absolute;
            top: -40px;
            width: 2px;
            height: 45px;
            background: linear-gradient(180deg,
                transparent 0%,
                rgba(200, 200, 220, 0.3) 20%,
                rgba(200, 200, 220, 0.5) 50%,
                rgba(200, 200, 220, 0.3) 80%,
                transparent 100%);
            box-shadow: 0 0 4px rgba(200, 200, 220, 0.3);
        }

        .spider-silk.left { left: 50px; transform: rotate(-5deg); }
        .spider-silk.right { right: 50px; transform: rotate(5deg); }

        .spider-silk::before {
            content: '';
            position: absolute;
            top: 0;
            left: -3px;
            width: 8px;
            height: 8px;
            background: radial-gradient(circle,
                rgba(200, 200, 220, 0.4) 0%,
                transparent 70%);
            border-radius: 50%;
        }

        /* Obsidian surface - the sign itself */
        .obsidian-surface {
            background: linear-gradient(160deg,
                #15151f 0%,
                #1a1a28 10%,
                #12121a 30%,
                #0d0d14 50%,
                #15151f 70%,
                #0a0a10 100%);
            border-radius: 8px;
            padding: 20px;
            position: relative;
            border: 2px solid #2a2a40;
            box-shadow:
                0 12px 40px rgba(0,0,0,0.8),
                0 0 30px rgba(124, 58, 237, 0.1),
                inset 0 1px 2px rgba(255,255,255,0.05),
                inset 0 -2px 4px rgba(0,0,0,0.5);
        }

        /* Violet rune markers at corners */
        .violet-rune {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: radial-gradient(circle at 40% 40%,
                #a855f7 0%,
                #7c3aed 40%,
                #4c1d95 70%,
                #2d1056 100%);
            box-shadow:
                0 0 8px rgba(168, 85, 247, 0.6),
                0 0 16px rgba(124, 58, 237, 0.3),
                inset 0 1px 2px rgba(255,255,255,0.3);
            animation: runeFlicker 3s ease-in-out infinite;
        }

        .violet-rune.tl { top: 10px; left: 10px; animation-delay: 0s; }
        .violet-rune.tr { top: 10px; right: 10px; animation-delay: 0.5s; }
        .violet-rune.bl { bottom: 10px; left: 10px; animation-delay: 1s; }
        .violet-rune.br { bottom: 10px; right: 10px; animation-delay: 1.5s; }

        @keyframes runeFlicker {
            0%, 100% { opacity: 0.7; box-shadow: 0 0 8px rgba(168, 85, 247, 0.6), 0 0 16px rgba(124, 58, 237, 0.3); }
            50% { opacity: 1; box-shadow: 0 0 12px rgba(168, 85, 247, 0.9), 0 0 24px rgba(124, 58, 237, 0.5); }
        }

        /* Drow icon */
        .drow-icon {
            text-align: center;
            margin-bottom: 15px;
            font-size: 3.5em;
            filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.5))
                    drop-shadow(0 4px 8px rgba(0,0,0,0.6));
        }

        /* Drow title - ethereal glow */
        .drow-title {
            font-family: 'Cinzel Decorative', serif;
            font-size: 1.4em;
            font-weight: 600;
            text-align: center;
            color: #c4b5fd;
            text-shadow:
                0 0 10px rgba(168, 85, 247, 0.5),
                0 0 20px rgba(124, 58, 237, 0.3),
                1px 1px 2px rgba(0,0,0,0.8);
            margin-bottom: 10px;
            letter-spacing: 2px;
        }

        /* Drow description */
        .drow-desc {
            font-family: 'Cinzel', serif;
            font-size: 0.9em;
            text-align: center;
            color: #8b82a8;
            line-height: 1.6;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        /* Hover effects for drow sign */
        .drow-sign:hover .obsidian-surface {
            border-color: #4c1d95;
            box-shadow:
                0 16px 50px rgba(0,0,0,0.9),
                0 0 50px rgba(124, 58, 237, 0.2),
                0 0 80px rgba(168, 85, 247, 0.1),
                inset 0 1px 2px rgba(255,255,255,0.08),
                inset 0 -2px 4px rgba(0,0,0,0.5);
        }

        .drow-sign:hover .drow-title {
            color: #e9d5ff;
            text-shadow:
                0 0 15px rgba(168, 85, 247, 0.8),
                0 0 30px rgba(124, 58, 237, 0.5),
                1px 1px 2px rgba(0,0,0,0.8);
        }

        .drow-sign:hover .violet-rune {
            animation: runeFlickerFast 0.5s ease-in-out infinite;
        }

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

        /* Responsive for drow sign */
        @media (max-width: 768px) {
            .drow-sign {
                width: 280px;
            }
        }