/* Modern Reset/Base */
        body {
            margin: 0;
            padding: 0;
            background-color: #0d0d12; /* Darker background for contrast */
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 50px; /* Space for the fixed bar */
            font-family: 'Montserrat', sans-serif; /* Modern, clean font */
        }

        /* --- Active Prediction Bar Styles (New Futuristic Neon Design) --- */
        #newActivePredictionBar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            top: 20px; /* Slightly lower to accommodate shadow/glow */
            left: 50%;
            transform: translateY(-150%) translateX(-50%); /* Start higher for animation */
            padding: 10px 18px; /* Slightly larger padding */
            background: radial-gradient(circle at top left, rgba(25, 25, 35, 0.98), rgba(15, 15, 20, 0.95)); /* Deeper, more complex background */
            backdrop-filter: blur(16px) brightness(1.1); /* Stronger blur, slightly brighter */
            -webkit-backdrop-filter: blur(16px) brightness(1.1);
            color: #e0f7fa; /* Light cyan for primary text */
            border-radius: 18px; /* More rounded corners */
            box-shadow:
                0 0 5px rgba(0, 255, 255, 0.2), /* Subtle cyan glow */
                0 0 15px rgba(0, 255, 255, 0.1),
                0 8px 30px rgba(0, 0, 0, 0.6), /* Deeper overall shadow */
                inset 0 0 8px rgba(0, 255, 255, 0.05), /* Inner glow */
                inset 0 0 0 1px rgba(0, 255, 255, 0.03); /* Inner border highlight */
            font-family: 'Orbitron', -apple-system, system-ui, sans-serif; /* Techy font */
            z-index: 2147483640;
            border: 1px solid rgba(0, 255, 255, 0.3); /* Cyan border */
            opacity: 0;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); /* Smoother, more dramatic entry */
            max-width: 95%; /* Slightly more flexible width */
            width: auto;
            box-sizing: border-box;
            animation: breathe 8s infinite alternate ease-in-out; /* Subtle breathing animation */
        }
        #newActivePredictionBar * {
            box-sizing: border-box;
        }
        #newActivePredictionBar.visible {
            opacity: 1;
            transform: translateY(0) translateX(-50%);
        }

        /* Section Wrappers */
        .pred-wrapper {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 8px; /* Increased gap */
            overflow: hidden;
            flex: 1;
            min-width: 0;
        }

        /* Live Indicator */
        .live-indicator {
            display: flex;
            align-items: center;
            gap: 6px; /* Slightly larger gap */
            padding-right: 12px;
            margin-right: 8px;
            border-right: 1px solid rgba(0, 255, 255, 0.15); /* Cyan border */
            flex-shrink: 0;
            position: relative;
        }
        .live-indicator::after {
            content: '';
            position: absolute;
            right: -1px;
            top: 50%;
            height: 80%; /* Taller separator */
            width: 2px; /* Thicker separator */
            background: linear-gradient(to bottom, transparent, rgba(0, 255, 255, 0.5), transparent); /* Cyan gradient */
            transform: translateY(-50%);
        }
        .live-dot {
            width: 7px; /* Larger dot */
            height: 7px;
            background: radial-gradient(circle at center, #ff4757, #cc0011); /* Deeper red */
            box-shadow: 0 0 8px rgba(255, 71, 87, 0.6), 0 0 20px rgba(255, 71, 87, 0.4); /* Stronger glow */
            border-radius: 50%;
            animation: pulse 1.2s infinite ease-out; /* Faster pulse */
        }
        .live-text {
            font-size: 10px; /* Slightly larger text */
            font-weight: 700;
            color: #ff4757;
            letter-spacing: 0.8px; /* More spacing */
            text-transform: uppercase;
            position: relative;
            text-shadow: 0 0 5px rgba(255, 71, 87, 0.7); /* Neon text shadow */
        }
        .live-text::after {
            content: '';
            position: absolute;
            bottom: -2px; /* Lower line */
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(255, 71, 87, 0.6), transparent); /* Red gradient line */
        }

        /* Game Info */
        .game-info {
            display: flex;
            flex-direction: column;
            padding: 0 10px; /* Increased padding */
            line-height: 1.3;
            border-right: 1px solid rgba(0, 255, 255, 0.15); /* Cyan border */
            margin-right: 8px;
            white-space: nowrap;
            flex-shrink: 1;
            min-width: 0;
            max-width: 35%; /* Slightly more width */
            position: relative;
        }
        .game-info::after {
            content: '';
            position: absolute;
            right: -1px;
            top: 50%;
            height: 80%; /* Taller separator */
            width: 2px; /* Thicker separator */
            background: linear-gradient(to bottom, transparent, rgba(0, 255, 255, 0.5), transparent); /* Cyan gradient */
            transform: translateY(-50%);
        }
        .game-type {
            font-size: 10px; /* Slightly larger */
            font-weight: 700;
            color: #e0f7fa; /* Light cyan */
            letter-spacing: 0.5px;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: 0 0 8px rgba(0, 255, 255, 0.5); /* Cyan text glow */
            animation: glowing 3s infinite alternate ease-in-out; /* Subtle text glow */
        }
        .issue-number {
            font-size: 9px; /* Slightly larger */
            font-weight: 600; /* Bolder */
            color: rgba(128, 255, 255, 0.8); /* Lighter cyan */
            letter-spacing: 0.8px; /* More spacing */
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Timer */
        .timer {
            display: flex;
            align-items: center;
            padding: 0 8px; /* Increased padding */
            margin-right: 8px;
            border-right: 1px solid rgba(0, 255, 255, 0.15); /* Cyan border */
            gap: 4px; /* Larger gap */
            position: relative;
            flex-shrink: 0;
            max-width: 80px; /* Wider timer area */
        }
        .timer::after {
            content: '';
            position: absolute;
            right: -1px;
            top: 50%;
            height: 80%; /* Taller separator */
            width: 2px; /* Thicker separator */
            background: linear-gradient(to bottom, transparent, rgba(0, 255, 255, 0.5), transparent); /* Cyan gradient */
            transform: translateY(-50%);
        }
        .timer::before {
            content: '';
            position: absolute;
            top: -4px; /* Larger inner border */
            bottom: -4px;
            left: -4px;
            right: -4px;
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.08), rgba(0, 255, 255, 0.02)); /* Subtle inner fill */
            border-radius: 12px; /* More rounded */
            z-index: -1;
            box-shadow:
                inset 0 0 15px rgba(0, 255, 255, 0.08), /* Inner glow */
                0 0 5px rgba(0, 255, 255, 0.1); /* Outer subtle glow */
            border: 1px solid rgba(0, 255, 255, 0.2); /* Cyan border */
            animation: border-pulse 4s infinite alternate ease-in-out; /* Pulsating border */
        }
        .timer-icon {
            width: 12px; /* Larger icon */
            height: 12px;
            fill: #e0f7fa; /* Light cyan */
            opacity: 0.9;
            filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5)); /* Cyan shadow */
        }
        .time-left {
            font-family: 'Orbitron', monospace; /* Monospace for numbers */
            font-size: 13px; /* Larger, more prominent */
            font-weight: 700;
            color: #e0f7fa; /* Light cyan */
            letter-spacing: 0.5px;
            font-variant-numeric: tabular-nums;
            min-width: 35px; /* Wider min-width */
            text-align: center;
            text-shadow: 0 0 8px rgba(0, 255, 255, 0.7); /* Neon text shadow */
            position: relative;
        }
        .time-left::after {
            content: '';
            position: absolute;
            bottom: -2px; /* Lower line */
            left: 50%;
            width: 80%;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(224, 247, 250, 0.4), transparent); /* Light cyan gradient line */
            transform: translateX(-50%);
        }
        .timer-emphasis .time-left {
            animation: urgent 0.6s infinite alternate; /* Faster, more distinct urgency */
            color: #ff6b6b; /* Red */
            text-shadow: 0 0 12px rgba(255, 107, 107, 0.8), 0 0 20px rgba(255, 107, 107, 0.5); /* Stronger red glow */
        }
        .timer-emphasis .timer-icon {
            fill: #ff6b6b;
            animation: urgent 0.6s infinite alternate;
            filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.6));
        }

        /* Prediction Details */
        .prediction-details {
            display: flex;
            align-items: center;
            padding-left: 12px; /* Increased padding */
            gap: 8px; /* Larger gap */
            flex-grow: 1;
            flex-shrink: 1;
            min-width: 0;
            overflow: hidden;
        }
        .prediction-number {
            display: none !important; /* Keep hidden */
        }
        .prediction-size {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px; /* Slightly larger */
            font-weight: 700;
            color: #ffffff; /* White text for contrast */
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 5px 12px; /* More padding */
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(0, 150, 200, 0.1)); /* Cyan to dark blue gradient */
            border-radius: 12px; /* More rounded */
            box-shadow:
                0 0 10px rgba(0, 255, 255, 0.4), /* Outer cyan glow */
                0 4px 12px rgba(0, 0, 0, 0.4),
                inset 0 1px 3px rgba(255, 255, 255, 0.2), /* Inner highlight */
                0 0 0 1px rgba(0, 255, 255, 0.3); /* Subtle outer border */
            border: 1px solid rgba(0, 255, 255, 0.4); /* Cyan border */
            white-space: nowrap;
            flex-shrink: 0;
            line-height: 1.2;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.6); /* White text glow */
            animation: glowing 3s infinite alternate ease-in-out; /* Subtle text glow */
        }

        /* Close Button */
        .close-pred-bar {
            padding: 5px; /* Larger padding */
            margin-left: 10px;
            cursor: pointer;
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 200, 200, 0.1)); /* Cyan gradient */
            border: 1px solid rgba(0, 255, 255, 0.3); /* Cyan border */
            color: rgba(224, 247, 250, 0.8); /* Light cyan */
            line-height: 0;
            border-radius: 50%;
            transition: all 0.3s ease-out; /* Faster transition */
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow:
                0 0 8px rgba(0, 255, 255, 0.3), /* Cyan glow */
                0 2px 12px rgba(0, 0, 0, 0.3),
                inset 0 1px rgba(255, 255, 255, 0.15); /* Inner highlight */
            min-width: 22px; /* Larger button */
            min-height: 22px;
            width: 22px;
            height: 22px;
        }
        .close-pred-bar:hover {
            color: #ffffff; /* White on hover */
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(0, 200, 200, 0.15)); /* Stronger gradient */
            transform: scale(1.15) rotate(90deg); /* More dramatic scale and rotate */
            box-shadow:
                0 0 15px rgba(0, 255, 255, 0.6),
                0 0 25px rgba(0, 255, 255, 0.4),
                inset 0 1px 3px rgba(255, 255, 255, 0.2);
        }
        .close-pred-bar svg {
            width: 10px; /* Larger SVG */
            height: 10px;
            stroke-width: 2.5; /* Thicker stroke */
        }

        /* Game Selector Button */
        .game-selector {
            display: flex;
            align-items: center;
            margin-left: 10px;
            border: 1px solid rgba(0, 255, 255, 0.3); /* Cyan border */
            border-radius: 12px; /* More rounded */
            overflow: hidden;
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.08), rgba(0, 150, 150, 0.03)); /* Subtle gradient */
            box-shadow:
                inset 0 1px 4px rgba(0, 0, 0, 0.3),
                0 0 5px rgba(0, 255, 255, 0.1); /* Subtle outer glow */
            flex-shrink: 0;
        }
        .game-selector button {
            background: transparent;
            border: none;
            color: rgba(224, 247, 250, 0.7); /* Light cyan */
            padding: 6px 12px; /* More padding */
            font-family: 'Montserrat', sans-serif;
            font-size: 10px; /* Slightly larger */
            font-weight: 600;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.25s ease-in-out; /* Smoother transition */
            white-space: nowrap;
            text-shadow: 0 0 3px rgba(0, 255, 255, 0.3); /* Subtle cyan text glow */
        }
        .game-selector button:hover:not(.active-game) {
            background: rgba(0, 255, 255, 0.12); /* Brighter cyan on hover */
            color: #ffffff; /* White on hover */
            box-shadow: inset 0 0 8px rgba(0, 255, 255, 0.1); /* Inner glow */
        }
        .game-selector button.active-game {
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.4), rgba(0, 200, 200, 0.2)); /* Stronger active gradient */
            color: #ffffff; /* White */
            box-shadow:
                inset 0 0 10px rgba(0, 255, 255, 0.3), /* Stronger inner glow */
                0 0 12px rgba(0, 255, 255, 0.4); /* Outer glow */
            font-weight: 700;
            text-shadow: 0 0 8px rgba(0, 255, 255, 0.8); /* Stronger active text glow */
            border: 1px solid rgba(0, 255, 255, 0.5); /* Clearer active border */
            position: relative; /* For z-index if needed */
        }
        .game-selector button:first-child {
            border-right: 1px solid rgba(0, 255, 255, 0.2); /* Cyan separator */
        }

        /* --- Movable Logo Styles --- */
        #movableLogo {
            display: none; /* Hidden by default */
            position: fixed;
            width: 55px; /* Size of the logo */
            height: 55px;
            border-radius: 50%;
            cursor: grab;
            user-select: none;
            background-size: cover;
            background-position: center;
            background-image: url('logo.jpg'); /* Your logo image */
            box-shadow:
                0 0 10px rgba(0, 255, 255, 0.6), /* Strong neon glow */
                0 0 25px rgba(0, 255, 255, 0.4),
                0 4px 15px rgba(0, 0, 0, 0.5),
                inset 0 0 15px rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(0, 255, 255, 0.7); /* Prominent border */
            z-index: 2147483640; /* Same as prediction bar, or higher if preferred */
            transition: transform 0.1s ease-out, box-shadow 0.3s ease-in-out; /* Smooth movement and hover */
            animation: pulse-logo 2s infinite alternate ease-in-out; /* Subtle pulse animation */
            left: 20px; /* Default initial position */
            bottom: 20px;
        }

        #movableLogo:active {
            cursor: grabbing;
            box-shadow:
                0 0 20px rgba(0, 255, 255, 0.9), /* Intense glow when dragging */
                0 0 40px rgba(0, 255, 255, 0.6),
                0 8px 25px rgba(0, 0, 0, 0.7),
                inset 0 0 25px rgba(255, 255, 255, 0.2);
        }
        #movableLogo.dragging {
            transition: none; /* Disable transition during drag */
        }
        #movableLogo:hover {
             box-shadow:
                0 0 15px rgba(0, 255, 255, 0.8), /* Brighter glow on hover */
                0 0 30px rgba(0, 255, 255, 0.5),
                0 4px 18px rgba(0, 0, 0, 0.6),
                inset 0 0 20px rgba(255, 255, 255, 0.15);
        }

        /* --- Keyframe Animations --- */
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.4); } /* Stronger pulse */
        }
        @keyframes urgent {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.18); opacity: 0.8; } /* More pronounced urgency */
        }
        @keyframes border-pulse {
            0%, 100% { box-shadow: inset 0 0 15px rgba(0, 255, 255, 0.08), 0 0 5px rgba(0, 255, 255, 0.1); border-color: rgba(0, 255, 255, 0.2); }
            50% { box-shadow: inset 0 0 25px rgba(0, 255, 255, 0.15), 0 0 10px rgba(0, 255, 255, 0.25); border-color: rgba(0, 255, 255, 0.4); }
        }
        @keyframes glowing {
            0%, 100% { text-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
            50% { text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 15px rgba(0, 255, 255, 0.3); }
        }
        @keyframes breathe {
            0%, 100% { transform: translateY(-50%) translateX(-50%) scale(1); }
            50% { transform: translateY(-50%) translateX(-50%) scale(1.01); }
        }
        @keyframes pulse-logo {
            0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 0 25px rgba(0, 255, 255, 0.4), 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.1); border-color: rgba(0, 255, 255, 0.7); }
            50% { box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 0 30px rgba(0, 255, 255, 0.5), 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.15); border-color: rgba(0, 255, 255, 0.9); }
        }


        /* --- Responsive Adjustments --- */
        @media screen and (max-width: 768px) {
            #newActivePredictionBar {
                padding: 8px 15px;
                border-radius: 16px;
                top: 15px;
            }
            .pred-wrapper {
                gap: 6px;
            }
            .live-indicator, .game-info, .timer {
                padding-right: 10px;
                margin-right: 6px;
            }
            .live-indicator::after, .game-info::after, .timer::after {
                height: 70%;
            }
            .live-dot {
                width: 6px; height: 6px;
            }
            .live-text {
                font-size: 9px;
                letter-spacing: 0.6px;
            }
            .game-type {
                font-size: 9px;
            }
            .issue-number {
                font-size: 8px;
            }
            .timer {
                gap: 3px;
                padding: 0 6px;
                max-width: 70px;
            }
            .timer-icon {
                width: 10px; height: 10px;
            }
            .time-left {
                font-size: 12px;
                min-width: 32px;
            }
            .prediction-details {
                gap: 6px;
                padding-left: 10px;
            }
            .prediction-size {
                padding: 4px 10px;
                font-size: 9px;
            }
            .close-pred-bar {
                margin-left: 8px;
                min-width: 20px; min-height: 20px; width: 20px; height: 20px;
            }
            .close-pred-bar svg {
                width: 9px; height: 9px;
            }
            .game-selector {
                margin-left: 8px;
            }
            .game-selector button {
                padding: 5px 10px;
                font-size: 9px;
            }
            #movableLogo {
                width: 50px;
                height: 50px;
            }
        }

        @media screen and (max-width: 480px) {
            #newActivePredictionBar {
                padding: 6px 12px;
                border-radius: 14px;
                top: 10px;
                max-width: 98%;
            }
            .pred-wrapper {
                gap: 4px;
            }
            .live-indicator, .game-info, .timer {
                padding-right: 8px;
                margin-right: 4px;
            }
            .live-indicator::after, .game-info::after, .timer::after {
                height: 60%;
                width: 1.5px;
            }
            .live-dot {
                width: 5px; height: 5px;
            }
            .live-text {
                font-size: 8px;
                letter-spacing: 0.5px;
            }
            .game-info {
                max-width: 40%; /* Allow game info to be slightly wider */
            }
            .game-type {
                font-size: 8px;
            }
            .issue-number {
                font-size: 7px;
            }
            .timer {
                gap: 2px;
                padding: 0 5px;
                max-width: 60px;
            }
            .timer-icon {
                width: 9px; height: 9px;
            }
            .time-left {
                font-size: 11px;
                min-width: 28px;
            }
            .prediction-details {
                gap: 4px;
                padding-left: 8px;
            }
            .prediction-size {
                padding: 3px 8px;
                font-size: 8px;
            }
            .close-pred-bar {
                margin-left: 6px;
                min-width: 18px; min-height: 18px; width: 18px; height: 18px;
                padding: 4px;
            }
            .close-pred-bar svg {
                width: 8px; height: 8px;
            }
            .game-selector {
                margin-left: 6px;
            }
            .game-selector button {
                padding: 4px 8px;
                font-size: 8px;
            }
            #movableLogo {
                width: 45px;
                height: 45px;
            }
        }

        @media screen and (max-width: 374px) {
            #newActivePredictionBar {
                padding: 5px 10px;
                border-radius: 12px;
            }
            .live-indicator, .game-info, .timer {
                padding-right: 6px;
                margin-right: 3px;
            }
            .live-indicator::after, .game-info::after, .timer::after {
                height: 50%;
                width: 1px;
            }
            .live-dot {
                width: 4px; height: 4px;
            }
            .live-text {
                font-size: 7px;
                letter-spacing: 0.4px;
            }
            .game-info {
                max-width: 35%; /* Adjust again for smaller screens */
            }
            .game-type {
                font-size: 7px;
            }
            .issue-number {
                font-size: 6px;
            }
            .timer {
                padding: 0 4px;
                max-width: 50px;
            }
            .timer-icon {
                width: 8px; height: 8px;
            }
            .time-left {
                font-size: 10px;
                min-width: 26px;
            }
            .prediction-details {
                padding-left: 6px;
                gap: 3px;
            }
            .prediction-size {
                padding: 2px 6px;
                font-size: 7px;
            }
            .close-pred-bar {
                margin-left: 5px;
                min-width: 16px; min-height: 16px; width: 16px; height: 16px;
                padding: 3px;
            }
            .close-pred-bar svg {
                width: 7px; height: 7px;
            }
            .game-selector {
                margin-left: 5px;
            }
            .game-selector button {
                padding: 3px 6px;
                font-size: 7px;
            }
            #movableLogo {
                width: 40px;
                height: 40px;
            }
        }

        /* Ultra-small screen support */
        @media screen and (max-width: 320px) {
            #newActivePredictionBar {
                padding: 4px 8px;
                max-width: 99%;
            }
            .pred-wrapper {
                gap: 2px;
            }
            .live-indicator, .game-info, .timer {
                padding-right: 4px;
                margin-right: 2px;
            }
            .game-info {
                max-width: 30%;
            }
            .timer {
                max-width: 45px;
                padding: 0 3px;
            }
            .timer::before {
                top: -3px; bottom: -3px; left: -3px; right: -3px;
                border-radius: 10px;
            }
            .prediction-details {
                padding-left: 4px;
                gap: 2px;
            }
            .prediction-size {
                padding: 1px 5px;
            }
            .close-pred-bar {
                margin-left: 4px;
                min-width: 14px; min-height: 14px; width: 14px; height: 14px;
                padding: 2px;
            }
            .close-pred-bar svg {
                width: 6px; height: 6px;
            }
            .game-selector {
                margin-left: 4px;
            }
            .game-selector button {
                padding: 2px 5px;
            }
            #movableLogo {
                width: 35px;
                height: 35px;
            }
        }


        /* Confetti CSS (Enhanced for futuristic look) */
        .confetti-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 2147483641; /* Above the prediction bar */
        }
        .confetti {
            position: absolute;
            width: 8px; /* Base size */
            height: 8px;
            background-color: #f00; /* Default color */
            animation: confetti-fall linear forwards;
            opacity: 0;
            border-radius: 2px; /* Small squares/rectangles */
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Subtle glow */
        }

        @keyframes confetti-fall {
            0% {
                transform: translate(var(--x-start), var(--y-start)) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(var(--x-end), var(--y-end)) rotateX(720deg) rotateY(720deg) rotateZ(720deg) scale(0.3); /* 3D rotation */
                opacity: 0;
            }
        }

        /* Toast Notification (Enhanced) */
        .toast {
            position: fixed;
            bottom: 30px; /* Slightly higher */
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, rgba(30, 30, 45, 0.95), rgba(15, 15, 25, 0.98)); /* Darker, gradient background */
            color: #e0f7fa; /* Light cyan text */
            padding: 12px 25px; /* More padding */
            border-radius: 12px; /* More rounded */
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.6s ease-in-out, transform 0.4s ease-out; /* Smoother transitions */
            box-shadow:
                0 6px 20px rgba(0,0,0,0.4),
                0 0 15px rgba(0, 255, 255, 0.3); /* Cyan glow */
            border: 1px solid rgba(0, 255, 255, 0.2); /* Cyan border */
            font-family: 'Montserrat', sans-serif;
            font-size: 14px;
            text-align: center;
        }
        .toast.visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
       /*webview*/
       #web-view-container {
    position: fixed;
    top: 60px; /* Below the prediction bar */
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    z-index: 2147483639; /* Just below the prediction bar */
    border: none;
    background: white;
}
#web-view {
    width: 100%;
    height: 100%;
    border: none;
}
#web-view-controls {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 2147483640;
    display: flex;
    gap: 8px;
}
#web-view-controls button {
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: all 0.2s;
}
#web-view-controls button:hover {
    background: rgba(0,0,0,0.9);
    transform: scale(1.1);
}
/* Media queries for responsiveness also affect these elements */