body {
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #1a1a2e, #16213e, #0f1419);
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .card {
            width: 300px;
            height: 420px;
            background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
            border-radius: 12px;
            border: 2px solid #444;
            box-shadow: 0 8px 25px rgba(75, 0, 130, 0.3), 0 0 50px rgba(138, 43, 226, 0.1);
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 12px 35px rgba(75, 0, 130, 0.4), 0 0 70px rgba(138, 43, 226, 0.2);
        }

        .card-header {
            background: linear-gradient(90deg, #4B0082, #8A2BE2);
            padding: 8px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #333;
        }

        .card-name {
            color: white;
            font-weight: bold;
            font-size: 14px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
        }

        .mana-cost {
            display: flex;
            gap: 2px;
        }

        .mana-symbol {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            border: 1px solid #666;
        }

        .mana-blue {
            background: linear-gradient(45deg, #4444ff, #2222cc);
            color: white;
        }

        .mana-black {
            background: linear-gradient(45deg, #333333, #111111);
            color: white;
        }

        .mana-colorless {
            background: linear-gradient(45deg, #cccccc, #999999);
            color: black;
        }

        .card-image {
            height: 180px;
            background: 
                radial-gradient(circle at 20% 80%, rgba(75, 0, 130, 0.4), transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(25, 25, 112, 0.3), transparent 40%),
                linear-gradient(135deg, #000011, #001122, #002244, #111133);
            position: relative;
            border-bottom: 1px solid #333;
            overflow: hidden;
        }

        /* Digital/computer screen background */
        .screen-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background: 
                repeating-linear-gradient(90deg, 
                    transparent 0px, transparent 2px, 
                    rgba(0, 255, 0, 0.05) 2px, rgba(0, 255, 0, 0.05) 4px),
                repeating-linear-gradient(0deg, 
                    transparent 0px, transparent 2px, 
                    rgba(0, 255, 0, 0.03) 2px, rgba(0, 255, 0, 0.03) 4px);
            animation: screen-flicker 3s ease-in-out infinite;
        }

        /* Main troll figure */
        .troll {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(1.2);
            width: 100px;
            height: 80px;
            animation: troll-typing 2s ease-in-out infinite;
        }

        /* Troll body (hunched over computer) */
        .troll-body {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translateX(-50%);
            width: 35px;
            height: 25px;
            background: 
                radial-gradient(ellipse at 30% 40%, #2F2F2F, #1F1F1F, #0F0F0F);
            border-radius: 60% 40% 70% 50%;
            box-shadow: 
                0 0 15px rgba(75, 0, 130, 0.4),
                inset 2px 2px 6px rgba(255, 255, 255, 0.1);
        }

        /* Troll head */
        .troll-head {
            position: absolute;
            top: 25%;
            left: 45%;
            width: 20px;
            height: 18px;
            background: 
                radial-gradient(circle at 40% 30%, #3F3F3F, #2F2F2F, #1F1F1F);
            border-radius: 50% 60% 40% 50%;
            box-shadow: 
                0 0 10px rgba(75, 0, 130, 0.3),
                inset 1px 1px 3px rgba(255, 255, 255, 0.1);
        }

        /* Glowing eyes from screen light */
        .troll-eye {
            position: absolute;
            top: 35%;
            width: 3px;
            height: 3px;
            background: 
                radial-gradient(circle, #00ff00, #00cc00, #009900);
            border-radius: 50%;
            box-shadow: 0 0 8px #00ff00;
            animation: eye-glow 2s ease-in-out infinite;
        }

        .eye-left { left: 25%; }
        .eye-right { right: 25%; }

        /* Arms typing */
        .troll-arm {
            position: absolute;
            top: 45%;
            width: 12px;
            height: 4px;
            background: linear-gradient(90deg, #2F2F2F, #1F1F1F);
            border-radius: 50%;
            transform-origin: left center;
            animation: arm-type 1s ease-in-out infinite alternate;
        }

        .arm-left { left: 35%; transform: rotate(-20deg); }
        .arm-right { right: 35%; transform: rotate(20deg) scaleX(-1); animation-delay: 0.5s; }

        /* Computer/laptop */
        .laptop {
            position: absolute;
            bottom: 25%;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 8px;
            background: linear-gradient(90deg, #333, #222, #111);
            border-radius: 2px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        }

        /* Laptop screen */
        .laptop-screen {
            position: absolute;
            top: -15px;
            left: 5px;
            width: 50px;
            height: 12px;
            background: 
                linear-gradient(135deg, #001100, #002200, #003300);
            border: 1px solid #444;
            border-radius: 1px;
            box-shadow: 
                inset 0 0 10px rgba(0, 255, 0, 0.3),
                0 0 15px rgba(0, 255, 0, 0.2);
            animation: screen-text 3s linear infinite;
        }

        /* Fake text/code on screen */
        .laptop-screen::before {
            content: '>>FLAME ON';
            position: absolute;
            top: 2px;
            left: 2px;
            font-size: 4px;
            color: #00ff00;
            font-family: monospace;
            text-shadow: 0 0 3px #00ff00;
            animation: text-scroll 4s linear infinite;
        }

        /* WiFi/internet signals */
        .wifi-signal {
            position: absolute;
            top: 15%;
            right: 15%;
            width: 20px;
            height: 20px;
        }

        .signal-arc {
            position: absolute;
            border: 2px solid rgba(138, 43, 226, 0.6);
            border-radius: 50%;
            border-bottom: transparent;
            border-left: transparent;
            animation: signal-pulse 2s ease-in-out infinite;
        }

        .arc1 { width: 8px; height: 8px; top: 8px; left: 8px; }
        .arc2 { width: 12px; height: 12px; top: 6px; left: 6px; animation-delay: 0.3s; }
        .arc3 { width: 16px; height: 16px; top: 4px; left: 4px; animation-delay: 0.6s; }

        /* Toxic comments floating around */
        .toxic-comment {
            position: absolute;
            font-size: 6px;
            color: rgba(255, 0, 0, 0.7);
            font-family: monospace;
            text-shadow: 0 0 3px rgba(255, 0, 0, 0.8);
            animation: comment-float 5s ease-in-out infinite;
        }

        .comment1 { top: 20%; left: 10%; content: 'u mad bro?'; animation-delay: 0s; }
        .comment2 { top: 70%; right: 10%; content: 'git gud'; animation-delay: 2s; }
        .comment3 { top: 40%; left: 5%; content: 'FIRST!'; animation-delay: 4s; }

        .comment1::before { content: 'u mad bro?'; }
        .comment2::before { content: 'git gud'; }
        .comment3::before { content: 'FIRST!'; }

        /* Keyboard keys flying */
        .key {
            position: absolute;
            width: 6px;
            height: 6px;
            background: linear-gradient(45deg, #666, #444);
            border: 1px solid #333;
            border-radius: 1px;
            font-size: 4px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: key-fly 4s ease-in-out infinite;
        }

        .key1 { top: 60%; left: 20%; animation-delay: 0s; }
        .key2 { top: 30%; right: 25%; animation-delay: 1s; }
        .key3 { bottom: 40%; left: 80%; animation-delay: 2s; }

        .key1::before { content: 'W'; }
        .key2::before { content: 'T'; }
        .key3::before { content: 'F'; }

        /* Animations */
        @keyframes troll-typing {
            0%, 100% { transform: translate(-50%, -50%) scale(1.2) translateY(0px); }
            50% { transform: translate(-50%, -50%) scale(1.2) translateY(-2px); }
        }

        @keyframes screen-flicker {
            0%, 95%, 100% { opacity: 1; }
            97% { opacity: 0.8; }
        }

        @keyframes eye-glow {
            0%, 100% { box-shadow: 0 0 8px #00ff00; opacity: 1; }
            50% { box-shadow: 0 0 15px #00ff00; opacity: 0.8; }
        }

        @keyframes arm-type {
            0% { transform: rotate(-20deg); }
            100% { transform: rotate(-35deg); }
        }

        @keyframes screen-text {
            0%, 100% { box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.3), 0 0 15px rgba(0, 255, 0, 0.2); }
            50% { box-shadow: inset 0 0 15px rgba(0, 255, 0, 0.5), 0 0 25px rgba(0, 255, 0, 0.4); }
        }

        @keyframes text-scroll {
            0% { content: '>>FLAME ON'; }
            25% { content: '>>POSTING...'; }
            50% { content: '>>TRIGGERED'; }
            75% { content: '>>LOL OWNED'; }
            100% { content: '>>FLAME ON'; }
        }

        @keyframes signal-pulse {
            0%, 100% { opacity: 0.4; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.1); }
        }

        @keyframes comment-float {
            0%, 100% { opacity: 0; transform: translateY(0px) scale(0.8); }
            20%, 80% { opacity: 0.7; transform: translateY(-10px) scale(1); }
        }

        @keyframes key-fly {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }
            50% { transform: translateY(-15px) rotate(180deg); opacity: 1; }
        }

        .type-line {
            background: #333;
            padding: 6px 12px;
            color: white;
            font-size: 12px;
            font-weight: bold;
            border-bottom: 1px solid #444;
        }

        .card-text {
            padding: 12px;
            color: #ddd;
            font-size: 11px;
            line-height: 1.4;
            background: #222;
            flex-grow: 1;
        }

        .ability {
            margin-bottom: 8px;
        }

        .keyword {
            font-weight: bold;
            color: #8A2BE2;
        }

        .flavor-text {
            font-style: italic;
            color: #999;
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px solid #444;
        }

        .power-toughness {
            position: absolute;
            bottom: 8px;
            right: 12px;
            background: #444;
            border: 1px solid #666;
            padding: 4px 8px;
            border-radius: 4px;
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

        .set-info {
            position: absolute;
            bottom: 8px;
            left: 12px;
            font-size: 10px;
            color: #999;
        }