.hud {
                position: absolute;
                left: max(10px, env(safe-area-inset-left));
                right: max(10px, env(safe-area-inset-right));
                top: max(8px, env(safe-area-inset-top));
                display: grid;
                grid-template-columns: 1fr auto 1fr;
                gap: 10px;
                pointer-events: none;
                z-index: 5;
            }

            .hudBox {
                min-height: 42px;
                padding: 8px 12px;
                border-radius: 18px;
                background: var(--panel);
                box-shadow:
                    0 10px 24px rgba(30, 80, 110, 0.16),
                    inset 0 1px rgba(255, 255, 255, 0.8);
                backdrop-filter: blur(8px);
                display: flex;
                align-items: center;
                gap: 12px;
                font-weight: 900;
                text-shadow: 0 1px rgba(255, 255, 255, 0.6);
                overflow: hidden;
            }

            .hudBox.center {
                justify-content: center;
                font-size: clamp(18px, 3.1vw, 32px);
            }
            .hudBox.right {
                justify-content: flex-end;
            }
            .hudLabel {
                font-size: clamp(11px, 1.5vw, 14px);
                opacity: 0.72;
                font-weight: 800;
            }
            .hudValue {
                font-size: clamp(18px, 3vw, 30px);
                line-height: 1;
            }

            .meter {
                position: absolute;
                left: max(12px, env(safe-area-inset-left));
                top: calc(max(8px, env(safe-area-inset-top)) + 54px);
                width: min(280px, 38vw);
                height: 18px;
                border-radius: 999px;
                background: rgba(255, 255, 255, 0.65);
                box-shadow:
                    inset 0 3px 8px rgba(0, 0, 0, 0.12),
                    0 6px 16px rgba(30, 70, 110, 0.12);
                overflow: hidden;
                z-index: 5;
                pointer-events: none;
            }
            .meterFill {
                width: 0%;
                height: 100%;
                border-radius: inherit;
                background: linear-gradient(90deg, #56dca8, #ffe66b, #ff5b7f);
                transition: width 0.08s linear;
            }
            .meterText {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 11px;
                font-weight: 1000;
                color: #263f5b;
                text-shadow: 0 1px rgba(255, 255, 255, 0.75);
            }
            .meter.bump {
                animation: meterBump 0.18s ease-out;
            }

            .toast {
                position: absolute;
                left: 50%;
                top: 23%;
                transform: translate(-50%, -50%) scale(0.92);
                z-index: 8;
                padding: 12px 22px;
                border-radius: 20px;
                background: rgba(255, 255, 255, 0.9);
                color: #283e58;
                font-weight: 1000;
                font-size: clamp(18px, 3.2vw, 36px);
                box-shadow: 0 18px 40px rgba(40, 80, 120, 0.18);
                opacity: 0;
                pointer-events: none;
                transition:
                    opacity 0.18s,
                    transform 0.18s;
                white-space: nowrap;
            }
            .toast.show {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            .toast.fever {
                background: linear-gradient(135deg, #fff7a4, #ffc4dc, #b3f3ff);
                color: #7c3150;
            }
            .toast.buff {
                background: linear-gradient(135deg, #ff6b6b, #ff8e8e, #ffb3b3);
                color: #7a1a1a;
            }
            .toast.debuff {
                background: linear-gradient(135deg, #b388ff, #ce93d8, #e1bee7);
                color: #4a148c;
            }
            .toast.mission {
                background: linear-gradient(135deg, #ffd54f, #ffe082, #fff176);
                color: #5d4037;
            }

            .controls {
                position: absolute;
                inset: auto max(10px, env(safe-area-inset-right))
                    max(8px, env(safe-area-inset-bottom))
                    max(10px, env(safe-area-inset-left));
                height: clamp(92px, 22vh, 150px);
                z-index: 10;
                pointer-events: none;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
            }
            .stickArea {
                width: clamp(108px, 19vw, 154px);
                height: clamp(108px, 19vw, 154px);
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.34);
                border: 2px solid rgba(255, 255, 255, 0.55);
                box-shadow:
                    inset 0 5px 16px rgba(50, 90, 130, 0.16),
                    0 12px 28px rgba(28, 80, 118, 0.16);
                pointer-events: auto;
                position: relative;
                touch-action: none;
            }
            .stickKnob {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 48%;
                height: 48%;
                border-radius: 50%;
                background: linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.92),
                    rgba(164, 227, 255, 0.9)
                );
                transform: translate(-50%, -50%);
                box-shadow: 0 8px 18px rgba(30, 80, 120, 0.18);
            }
            .roundBtn {
                min-width: 0;
                width: clamp(70px, 11vw, 100px);
                height: clamp(70px, 11vw, 100px);
                border-radius: 50%;
                padding: 0;
                display: grid;
                place-items: center;
                font-size: clamp(15px, 2.1vw, 21px);
                line-height: 1.05;
            }
            .jumpBtn {
                background: linear-gradient(180deg, #78e3bc, #26bd8a);
                box-shadow:
                    0 9px 0 #159a6c,
                    0 14px 26px rgba(39, 190, 140, 0.25);
            }
            .dashBtn {
                width: clamp(84px, 13vw, 116px);
                height: clamp(84px, 13vw, 116px);
                background: linear-gradient(180deg, #ffcf5b, #ff8f2e);
                box-shadow:
                    0 10px 0 #d86d15,
                    0 16px 28px rgba(255, 143, 46, 0.28);
                color: #673b00;
            }
            .dashBtn.cool {
                filter: grayscale(0.4) brightness(0.9);
                opacity: 0.72;
            }

            @media (orientation: landscape) and (max-height: 430px) {
                .hud {
                    gap: 6px;
                    top: max(5px, env(safe-area-inset-top));
                    left: max(6px, env(safe-area-inset-left));
                    right: max(6px, env(safe-area-inset-right));
                }
                .hudBox {
                    min-height: 32px;
                    padding: 5px 8px;
                    border-radius: 14px;
                    gap: 8px;
                }
                .hudBox.center {
                    font-size: clamp(16px, 5vh, 22px);
                }
                .hudLabel {
                    font-size: clamp(9px, 2.6vh, 11px);
                }
                .hudValue {
                    font-size: clamp(15px, 4.6vh, 22px);
                }
                .meter {
                    top: calc(max(5px, env(safe-area-inset-top)) + 40px);
                    width: min(220px, 34vw);
                    height: 14px;
                }
                .meterText {
                    font-size: 9px;
                }
                .controls {
                    height: clamp(76px, 20vh, 104px);
                    inset: auto max(8px, env(safe-area-inset-right))
                        max(6px, env(safe-area-inset-bottom))
                        max(8px, env(safe-area-inset-left));
                }
                .stickArea {
                    width: clamp(82px, 18vh, 112px);
                    height: clamp(82px, 18vh, 112px);
                }
                .roundBtn {
                    width: clamp(56px, 15vh, 78px);
                    height: clamp(56px, 15vh, 78px);
                    font-size: clamp(12px, 3.5vh, 16px);
                }
                .dashBtn {
                    width: clamp(64px, 17vh, 88px);
                    height: clamp(64px, 17vh, 88px);
                }
                .actionBtns {
                    gap: 8px;
                }
                .toast {
                    top: 22%;
                    padding: 8px 14px;
                    font-size: clamp(15px, 5vh, 24px);
                }
            }