.steampunk-arena {
            height: 200px;
            background: radial-gradient(circle at 50% 50%, #3e2723 0%, #1b0000 100%);
            box-shadow: inset 0 0 30px rgba(0,0,0,0.9);
            position: relative;
            overflow: hidden;
            border: 6px solid #8d6e63;
            border-radius: 12px;
        }

        /* Bánh răng xoay */
        .gear-bg {
            position: absolute;
            font-size: 5rem;
            color: #bcaaa4;
            opacity: 0.3;
            z-index: 1;
        }
        .gear-1 { left: -10%; top: -20%; animation: spin-right 10s linear infinite; }
        .gear-2 { right: -5%; bottom: -30%; font-size: 8rem; animation: spin-left 15s linear infinite; }
        
        @keyframes spin-right { 100% { transform: rotate(360deg); } }
        @keyframes spin-left { 100% { transform: rotate(-360deg); } }

        /* Cổng dịch chuyển (Portal) */
        .portal-item {
            position: absolute;
            left: 40%;
            top: 15%;
            font-size: 6rem;
            z-index: 2;
            transition: all 0.5s ease;
            filter: drop-shadow(0 0 10px #00e5ff);
            animation: portal-spin 5s linear infinite;
        }
        @keyframes portal-spin {
            0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 10px #00e5ff); }
            50% { transform: rotate(180deg) scale(1.1); filter: drop-shadow(0 0 25px #00e5ff); }
            100% { transform: rotate(360deg) scale(1); filter: drop-shadow(0 0 10px #00e5ff); }
        }

        /* Hoạt ảnh Portal hút vào khi đúng */
        .portal-warp {
            animation: warp-drive 1s ease-in forwards;
        }
        @keyframes warp-drive {
            0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 20px #00e5ff) brightness(1); }
            50% { transform: scale(2) rotate(360deg); filter: drop-shadow(0 0 50px #ffffff) brightness(2); }
            100% { transform: scale(0) rotate(720deg); opacity: 0; }
        }

        /* Tàu thời gian */
        .time-machine {
            position: absolute;
            left: 10%;
            top: 40%;
            font-size: 3rem;
            z-index: 3;
            transition: all 0.5s ease;
            filter: drop-shadow(2px 5px 5px rgba(0,0,0,0.6));
        }

        /* Tàu bị hút vào Portal */
        .fly-into-portal {
            animation: suck-in 0.8s ease-in forwards;
        }
        @keyframes suck-in {
            0% { left: 10%; top: 40%; transform: scale(1) rotate(0deg); }
            100% { left: 45%; top: 30%; transform: scale(0.2) rotate(360deg); opacity: 0; }
        }

        /* Rung lắc kẹt bánh răng khi sai */
        .shake-error { animation: gear-jam 0.4s infinite; filter: sepia(1) hue-rotate(-50deg) saturate(5) !important; }
        @keyframes gear-jam {
            0% { transform: translate(0) rotate(0); }
            25% { transform: translate(-5px, 5px) rotate(-5deg); }
            50% { transform: translate(5px, -5px) rotate(5deg); }
            75% { transform: translate(-5px, -5px) rotate(-5deg); }
            100% { transform: translate(0) rotate(0); }
        }

        .min-h-75 { min-height: 90px; }
        .hl-num { color: #00e5ff; font-weight: 900; font-size: 1.2em; text-shadow: 0 0 5px #00e5ff; }