/* base visual */
        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            overscroll-behavior: none;
            touch-action: none;
            background: #050606;
            color: #47ff6f;
            font-family: "Courier New", Courier, monospace;
        }

        body {
            display: grid;
            place-items: center;
            background:
                linear-gradient(90deg, #020303 0%, #080b0b 18%, #080b0b 82%, #020303 100%),
                repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 5px);
        }

        /* estrutura externa e area lateral */
        #stage {
            position: fixed;
            inset: 0;
            display: grid;
            grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
            align-items: center;
            justify-items: center;
            gap: clamp(14px, 2vw, 34px);
            padding: clamp(8px, 2.2vmin, 28px);
            background:
                linear-gradient(90deg, rgba(0,0,0,0.9), rgba(10,14,14,0.55) 22%, rgba(10,14,14,0.55) 78%, rgba(0,0,0,0.9)),
                repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 28px);
        }

        /* area jogavel em 4:3 */
        #cabinet {
            position: relative;
            grid-column: 2;
            width: min(calc(100vw - clamp(16px, 4.4vmin, 56px)), calc((100svh - clamp(16px, 4.4vmin, 56px)) * 4 / 3), 1120px);
            aspect-ratio: 4 / 3;
            background: #050805;
            border: clamp(5px, 0.9vmin, 10px) solid #151b18;
            outline: 1px solid rgba(76, 255, 112, 0.25);
            box-shadow:
                0 0 0 2px rgba(0,0,0,0.75),
                0 0 46px rgba(0,0,0,0.9),
                inset 0 0 34px rgba(68,255,90,0.08);
            overflow: hidden;
            isolation: isolate;
            touch-action: none;
        }

        .roadmap-panel {
            width: min(300px, 24vw);
            border: 1px solid rgba(71,255,111,0.52);
            background:
                linear-gradient(180deg, rgba(6,18,10,0.92), rgba(3,8,6,0.86)),
                repeating-linear-gradient(0deg, rgba(71,255,111,0.08) 0 1px, transparent 1px 8px);
            box-shadow: 0 0 24px rgba(0,0,0,0.72), inset 0 0 26px rgba(71,255,111,0.08);
            color: #bfffc0;
            padding: clamp(14px, 2vmin, 20px);
            pointer-events: none;
            text-shadow: 0 0 8px rgba(71,255,111,0.3);
        }

        .roadmap-panel-desktop {
            grid-column: 1;
            justify-self: end;
        }

        .roadmap-kicker {
            display: inline-flex;
            border: 1px solid rgba(255,243,106,0.55);
            color: #fff36a;
            padding: 3px 7px;
            font-size: clamp(10px, 1.2vmin, 12px);
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        .roadmap-panel h2 {
            color: #e7ffe6;
            font-size: clamp(18px, 2.2vmin, 24px);
            letter-spacing: 2px;
            text-shadow: 0 0 12px rgba(71,255,111,0.55);
        }

        .roadmap-divider {
            height: 1px;
            margin: 12px 0;
            background: linear-gradient(90deg, rgba(71,255,111,0.8), transparent);
        }

        .roadmap-item {
            display: grid;
            grid-template-columns: 34px 1fr;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid rgba(71,255,111,0.14);
        }

        .roadmap-item:last-child {
            border-bottom: 0;
        }

        .roadmap-marker {
            display: grid;
            place-items: center;
            width: 28px;
            height: 28px;
            border: 1px solid rgba(71,255,111,0.65);
            color: #68ff8b;
            font-size: 12px;
            font-weight: 700;
        }

        .roadmap-item strong {
            display: block;
            color: #dfffe2;
            font-size: clamp(12px, 1.45vmin, 15px);
            letter-spacing: 1px;
            margin-bottom: 4px;
        }

        .roadmap-item p {
            color: #95d99e;
            font-size: clamp(11px, 1.35vmin, 13px);
            line-height: 1.35;
        }

        .roadmap-panel-compact {
            display: none;
            width: 100%;
            pointer-events: none;
            text-align: left;
            padding: 12px;
        }

        .roadmap-mini-grid {
            display: grid;
            gap: 7px;
            color: #dfffe2;
            font-size: clamp(10px, 1.6vmin, 13px);
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        #cabinet::before {
            content: "";
            position: absolute;
            inset: 10px;
            border: 1px solid rgba(71,255,111,0.32);
            pointer-events: none;
            z-index: 7;
        }

        #cabinet::after {
            content: "www.eduardovoigt.com";
            position: absolute;
            left: 50%;
            bottom: 8px;
            transform: translateX(-50%);
            color: rgba(185,255,190,0.55);
            font-size: clamp(9px, 1.3vmin, 13px);
            letter-spacing: 2px;
            text-shadow: 0 0 8px rgba(71,255,111,0.45);
            pointer-events: none;
            z-index: 8;
        }

        canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            background: #151711;
            z-index: 1;
        }

        /* interface, menus e HUD */
        #ui-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 5;
        }

        #hud {
            position: absolute;
            top: clamp(14px, 2.2vmin, 22px);
            left: clamp(14px, 2.2vmin, 22px);
            right: clamp(14px, 2.2vmin, 22px);
            display: none;
            grid-template-columns: minmax(0, 1fr) minmax(150px, auto) minmax(156px, 1fr);
            align-items: start;
            gap: 12px;
            font-size: clamp(13px, 2.2vmin, 24px);
            font-weight: 700;
            line-height: 1.22;
            text-shadow: 2px 2px 0 #000, 0 0 10px rgba(70,255,105,0.35);
        }

        .hud-block {
            min-width: 0;
        }

        .mission-panel {
            justify-self: center;
            min-width: clamp(150px, 23vmin, 230px);
            text-align: center;
            color: #d8ffe0;
            font-size: clamp(11px, 1.75vmin, 18px);
            letter-spacing: 0.5px;
        }

        .missed-counter {
            color: #9effa8;
            transition: color 0.12s, text-shadow 0.12s, transform 0.12s;
        }

        .missed-counter.warning {
            color: #ff5555;
            text-shadow: 0 0 14px #ff3333, 2px 2px 0 #000;
            transform: scale(1.08);
        }

        .combo-text {
            min-height: 1.2em;
            color: #fff36a;
            font-size: clamp(12px, 1.8vmin, 20px);
            transition: transform 0.1s;
        }

        .combo-active {
            transform: scale(1.12);
            text-shadow: 0 0 12px #fff36a;
        }

        .weapon-panel {
            justify-self: end;
            width: clamp(156px, 28vmin, 260px);
            text-align: right;
        }

        .weapon-title {
            color: #bfffc0;
            font-size: clamp(10px, 1.45vmin, 16px);
            letter-spacing: 1px;
            margin-bottom: 5px;
        }

        .heat-row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            color: #d8ffe0;
            font-size: clamp(11px, 1.55vmin, 16px);
            margin-bottom: 3px;
        }

        .heat-shell {
            position: relative;
            height: clamp(10px, 1.6vmin, 16px);
            border: 1px solid rgba(191,255,192,0.7);
            background: rgba(0,0,0,0.72);
            box-shadow: inset 0 0 8px rgba(0,0,0,0.9), 0 0 12px rgba(70,255,105,0.2);
            overflow: hidden;
        }

        .heat-shell::after {
            content: "";
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(0,0,0,0.42) 16px 18px);
            pointer-events: none;
        }

        .heat-fill {
            width: 0%;
            height: 100%;
            background: linear-gradient(90deg, #2dff6a 0%, #f2e65b 58%, #ff533d 100%);
            box-shadow: 0 0 12px rgba(255,214,84,0.7);
            transition: width 0.08s linear;
        }

        .heat-fill.overheated {
            background: linear-gradient(90deg, #ff3838, #ff8a3d);
            animation: heatPulse 0.32s infinite alternate;
        }

        .heat-status {
            margin-top: 5px;
            font-size: clamp(11px, 1.7vmin, 17px);
            letter-spacing: 1px;
        }

        .heat-status.ready {
            color: #63ff88;
        }

        .heat-status.firing {
            color: #ffe66d;
        }

        .heat-status.overheated {
            color: #ff4a4a;
            text-shadow: 0 0 12px #ff2b2b, 2px 2px 0 #000;
        }

        .escape-warning {
            position: absolute;
            top: 18%;
            left: 50%;
            transform: translateX(-50%) scale(0.96);
            color: #ff5959;
            font-size: clamp(20px, 4.2vmin, 38px);
            font-weight: 700;
            letter-spacing: 2px;
            opacity: 0;
            text-align: center;
            text-shadow: 0 0 18px rgba(255,60,60,0.9), 3px 3px 0 #000;
            pointer-events: none;
            transition: opacity 0.12s, transform 0.12s;
        }

        .escape-warning.active {
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }

        .escape-warning.repair {
            color: #68ff8b;
            text-shadow: 0 0 18px rgba(80,255,116,0.9), 3px 3px 0 #000;
        }

        .high-score-note,
        .new-high-score {
            color: #fff36a;
            text-shadow: 0 0 10px rgba(255,243,106,0.65);
        }

        .demo-note {
            color: #9effa8;
            font-size: clamp(12px, 1.65vmin, 15px);
        }

        .new-high-score {
            display: none;
            font-weight: 700;
            letter-spacing: 1px;
        }

        .mobile-controls {
            display: none;
            align-items: flex-end;
            justify-content: space-between;
            gap: 16px;
            pointer-events: auto;
        }

        .mobile-move-controls {
            display: flex;
            gap: clamp(8px, 2vmin, 14px);
            pointer-events: auto;
        }

        .touch-control {
            width: clamp(68px, 15vmin, 108px);
            height: clamp(54px, 12vmin, 82px);
            border: 2px solid rgba(104,255,139,0.78);
            background: rgba(0, 20, 8, 0.58);
            color: #bfffc0;
            box-shadow: inset 0 0 16px rgba(71,255,111,0.12), 0 0 16px rgba(0,0,0,0.55);
            font-size: clamp(13px, 2.8vmin, 18px);
            line-height: 1;
            touch-action: none;
            pointer-events: auto;
            opacity: 0.88;
        }

        .fire-control {
            width: clamp(84px, 18vmin, 128px);
            border-color: rgba(255,230,109,0.85);
            color: #fff36a;
        }

        .touch-control.active,
        .touch-control:active {
            background: rgba(71,255,111,0.24);
            color: #ffffff;
            box-shadow: 0 0 20px rgba(71,255,111,0.55), inset 0 0 16px rgba(71,255,111,0.25);
            transform: translateY(1px);
        }

        .fire-control.active,
        .fire-control:active {
            background: rgba(255,230,109,0.24);
            box-shadow: 0 0 22px rgba(255,230,109,0.52), inset 0 0 16px rgba(255,230,109,0.2);
        }

        @keyframes heatPulse {
            from { filter: brightness(1); }
            to { filter: brightness(1.55); }
        }

        /* telas centrais */
        .screen {
            position: absolute;
            top: 50%;
            left: 50%;
            width: min(78%, 460px);
            min-width: 0;
            transform: translate(-50%, -50%);
            display: none;
            flex-direction: column;
            gap: clamp(12px, 2.2vmin, 20px);
            padding: clamp(22px, 4.5vmin, 40px);
            text-align: center;
            background: rgba(4, 13, 8, 0.91);
            border: 2px solid #47ff6f;
            box-shadow: 0 0 30px rgba(68,255,104,0.28), inset 0 0 24px rgba(68,255,104,0.08);
            pointer-events: auto;
        }

        .screen.active {
            display: flex;
        }

        h1,
        h2,
        p {
            margin: 0;
        }

        h1 {
            color: #e7ffe6;
            font-size: clamp(26px, 4.5vmin, 38px);
            letter-spacing: 2px;
            text-shadow: 0 0 12px #47ff6f;
        }

        h2 {
            color: #9effa8;
            font-size: clamp(16px, 2.6vmin, 24px);
        }

        p {
            color: #bfffc0;
            font-size: clamp(13px, 1.85vmin, 17px);
            line-height: 1.55;
        }

        button {
            width: 100%;
            border: 2px solid #47ff6f;
            padding: clamp(11px, 2.1vmin, 15px) 20px;
            background: rgba(0,0,0,0.25);
            color: #47ff6f;
            font-family: inherit;
            font-size: clamp(15px, 2.3vmin, 20px);
            font-weight: 700;
            letter-spacing: 1px;
            cursor: pointer;
            text-transform: uppercase;
            transition: background 0.2s, color 0.2s, box-shadow 0.2s;
        }

        button:hover,
        button:focus-visible {
            background: #47ff6f;
            color: #041006;
            box-shadow: 0 0 18px rgba(71,255,111,0.7);
            outline: none;
        }

        #restartBtn {
            border-color: #ff4444;
            color: #ff4444;
        }

        #restartBtn:hover,
        #restartBtn:focus-visible {
            background: #ff4444;
            color: #080000;
            box-shadow: 0 0 18px rgba(255,68,68,0.7);
        }

        /* vidro, varredura e mira */
        .overlay {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            opacity: 0.52;
            background:
                linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.28) 50%),
                linear-gradient(90deg, rgba(255,0,0,0.05), rgba(0,255,0,0.025), rgba(0,0,255,0.05));
            background-size: 100% 4px, 3px 100%;
            box-shadow: inset 0 0 110px rgba(0,0,0,0.92);
        }

        .overlay::before,
        .overlay::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid rgba(104,255,128,0.16);
        }

        .overlay::before {
            width: 34%;
            height: 34%;
        }

        .overlay::after {
            width: 1px;
            height: 88%;
            border-width: 0 0 0 1px;
        }

        .corner {
            position: absolute;
            width: clamp(28px, 5vmin, 48px);
            height: clamp(28px, 5vmin, 48px);
            z-index: 6;
            pointer-events: none;
            border-color: rgba(112,255,126,0.72);
            filter: drop-shadow(0 0 8px rgba(71,255,111,0.45));
        }

        .corner.tl { top: 18px; left: 18px; border-top: 2px solid; border-left: 2px solid; }
        .corner.tr { top: 18px; right: 18px; border-top: 2px solid; border-right: 2px solid; }
        .corner.bl { bottom: 18px; left: 18px; border-bottom: 2px solid; border-left: 2px solid; }
        .corner.br { bottom: 18px; right: 18px; border-bottom: 2px solid; border-right: 2px solid; }

        /* ajustes para telas */
        @media (max-width: 1799px), (max-height: 780px) {
            #stage {
                grid-template-columns: 1fr;
                gap: 0;
            }

            #cabinet {
                grid-column: 1;
            }

            .roadmap-panel-desktop {
                display: none;
            }

            .roadmap-panel-compact {
                display: block;
            }
        }

        /* controles de toque e HUD compacto */
        @media (hover: none), (pointer: coarse), (max-width: 900px) {
            #stage {
                grid-template-columns: 1fr;
                grid-template-rows: minmax(0, 1fr) auto;
                align-items: stretch;
                justify-items: center;
                gap: 8px;
                height: 100svh;
                padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom));
            }

            #cabinet {
                grid-column: 1;
                grid-row: 1;
                width: min(calc(100vw - 12px), calc((100svh - 126px) * 9 / 16));
                max-width: none;
                height: auto;
                max-height: calc(100svh - 126px);
                aspect-ratio: 9 / 16;
                border-width: 4px;
            }

            #cabinet::before {
                inset: 7px;
            }

            #cabinet::after {
                display: none;
            }

            #hud {
                top: 10px;
                left: 10px;
                right: 10px;
                grid-template-columns: minmax(0, 1fr) minmax(142px, 0.95fr);
                gap: 8px;
                font-size: clamp(11px, 2.8vmin, 16px);
            }

            .mission-panel {
                grid-column: 1;
                justify-self: start;
                text-align: left;
                min-width: 0;
                font-size: clamp(10px, 2.5vmin, 13px);
            }

            .weapon-panel {
                grid-column: 2;
                grid-row: 1 / span 2;
                width: min(42vw, 190px);
            }

            body.is-playing .mobile-controls {
                display: flex;
            }

            .mobile-controls {
                grid-column: 1;
                grid-row: 2;
                width: min(calc(100vw - 12px), 680px);
                min-height: 94px;
                align-items: center;
                padding: 8px 8px max(8px, env(safe-area-inset-bottom));
                border: 1px solid rgba(71,255,111,0.35);
                background:
                    linear-gradient(180deg, rgba(2,8,5,0.86), rgba(0,0,0,0.92)),
                    repeating-linear-gradient(90deg, rgba(71,255,111,0.07) 0 1px, transparent 1px 14px);
                box-shadow: inset 0 0 22px rgba(71,255,111,0.08), 0 0 20px rgba(0,0,0,0.7);
            }

            .screen {
                width: min(88%, 500px);
                max-height: calc(100% - 18px);
                gap: clamp(8px, 1.7vmin, 14px);
                padding: clamp(14px, 3.2vmin, 26px);
                overflow: hidden;
            }

            .roadmap-panel-compact {
                padding: 10px;
            }
        }

        @media (max-width: 620px) {
            #stage {
                padding: 6px;
            }

            #cabinet {
                width: min(calc(100vw - 12px), calc((100svh - 120px) * 9 / 16));
                max-height: calc(100svh - 120px);
            }

            .screen {
                width: min(90%, 420px);
                gap: 7px;
                padding: 14px;
            }

            h1 {
                font-size: clamp(20px, 5.2vmin, 28px);
            }

            h2 {
                font-size: clamp(13px, 3.4vmin, 18px);
            }

            p {
                font-size: clamp(11px, 2.9vmin, 14px);
            }

            .roadmap-mini-grid {
                gap: 4px;
                font-size: clamp(9px, 2.4vmin, 12px);
            }

            .mobile-controls {
                width: calc(100vw - 12px);
                min-height: 88px;
                gap: 10px;
            }

            .mobile-move-controls {
                gap: 8px;
            }

            .touch-control {
                width: clamp(72px, 23vw, 96px);
                height: 58px;
                padding: 8px 10px;
            }

            .fire-control {
                width: clamp(86px, 27vw, 112px);
            }
        }

        @media (max-height: 520px) and (hover: none), (max-height: 520px) and (pointer: coarse) {
            .roadmap-panel-compact {
                display: none;
            }

            .screen {
                gap: 8px;
                padding: 14px;
            }

            .touch-control {
                height: 48px;
            }
        }