*{
    box-sizing:border-box;
}

body{
    margin:0;
    overflow:hidden;
    background:#0b1020;
    font-family:Inter,Arial,sans-serif;
}

canvas{
    display:block;
    background:
        radial-gradient(circle at center,
        #1a2340 0%,
        #0b1020 70%);
}

#hudTop{
    position:absolute;
    top:clamp(8px, 3vh, 32px);
    left:50%;
    transform:translateX(-50%);
    width:100%;
    color:white;
    z-index:10;
    display:flex;
    flex-direction:column;
    gap:clamp(4px, 1vh, 8px);
    pointer-events:none;
}

#hudBar{
    position:absolute;
    bottom:clamp(8px, 3vh, 32px);
    left:50%;
    transform:translateX(-50%);
    width:100%;
    color:white;
    z-index:10;
    display:flex;
    flex-direction:column;
    gap:clamp(3px, 1vh, 6px);
    pointer-events:none;
}

#energyBar{
    position:relative;
    width:100%;
    height:clamp(6px, 1.5vh, 12px);
    background:rgba(255,255,255,.06);
    border-radius:999px;
    overflow:hidden;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.3), 0 0 30px rgba(56,189,248,.08);
}

.fill{
    height:100%;
    border-radius:999px;
    transition:width .15s linear, background .3s;
}

#energyFill{
    background:linear-gradient(90deg,#00ff88,#22d3ee);
}

#energyFill.low{
    background:linear-gradient(90deg,#f59e0b,#ef4444);
}

#energyFill.critical{
    background:linear-gradient(90deg,#ef4444,#dc2626);
    animation:energyPulse .6s ease-in-out infinite;
}

@keyframes energyPulse{
    0%,100%{opacity:1}
    50%{opacity:.4}
}

#energyPct{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    font-size:clamp(7px, 1.5vw, 9px);
    font-weight:600;
    color:rgba(255,255,255,.7);
    font-family:"Courier New",monospace;
    text-shadow:0 1px 3px rgba(0,0,0,.5);
}

#hudRow{
    display:flex;
    justify-content:space-between;
    width:100%;
}

#missionPanel{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
    padding:clamp(6px, 1.5vw, 10px) clamp(8px, 2.5vw, 14px);
    border-radius:clamp(8px, 2vw, 12px);
    backdrop-filter:blur(8px);
    min-width:140px;
    max-width:min(40vw, 280px);
}

#missionTitle{
    font-size:clamp(7px, 1.8vw, 9px);
    opacity:.4;
    letter-spacing:2px;
    font-family:"Courier New",monospace;
    margin-bottom:4px;
}

#missionText{
    font-size:clamp(10px, 2.5vw, 13px);
    line-height:1.4;
    min-height:20px;
}

.highlight{
    color:#22d3ee;
    font-weight:bold;
}

#cargoBadge{
    font-size:clamp(7px, 1.8vw, 9px);
    font-weight:700;
    letter-spacing:1px;
    padding:1px 6px;
    border-radius:3px;
    display:inline-block;
    margin-top:4px;
    opacity:0;
    transition:opacity .3s;
}

#cargoBadge.show{
    opacity:1;
    color:#00ff88;
    background:rgba(0,255,136,.1);
    border:1px solid rgba(0,255,136,.2);
}

#notification{
    margin-top:4px;
    font-size:clamp(8px, 2vw, 11px);
    color:rgba(255,255,255,.5);
    min-height:14px;
    transition:opacity .8s;
}

#notification.hidden{
    opacity:0;
}

#notification.stale{
    opacity:.2;
}

#statsPanel{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
    padding:clamp(6px, 1.5vw, 10px) clamp(10px, 3vw, 18px);
    border-radius:clamp(8px, 2vw, 12px);
    backdrop-filter:blur(8px);
    text-align:center;
    min-width:80px;
}

#statsPanel .labelHud{
    font-size:clamp(7px, 1.8vw, 9px);
    opacity:.4;
    letter-spacing:2px;
    font-family:"Courier New",monospace;
    margin-bottom:2px;
}

#score{
    font-size:clamp(16px, 5vw, 28px);
    font-weight:800;
    letter-spacing:-1px;
    line-height:1;
    transition:text-shadow .3s;
}

#score.glow{
    text-shadow:0 0 20px rgba(34,211,238,.3);
}

#highScoreHud{
    font-size:clamp(8px, 2vw, 10px);
    opacity:.4;
    margin-top:2px;
    font-family:"Courier New",monospace;
}

#gamepadBadge{
    font-size:clamp(7px, 1.8vw, 9px);
    margin-top:4px;
    opacity:0;
    transition:opacity .4s;
    font-family:"Courier New",monospace;
    letter-spacing:1px;
    color:#22d3ee;
}
#gamepadBadge.show{
    opacity:.6;
}
#velocimeter{
    font-size:clamp(8px, 2vw, 10px);
    opacity:.35;
    margin-top:4px;
    font-family:"Courier New",monospace;
    letter-spacing:1px;
}

#hudBottom{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:clamp(8px, 2vw, 20px);
    font-size:clamp(7px, 1.8vw, 10px);
    opacity:.3;
    font-family:"Courier New",monospace;
}

#pickupCount{
    order:0;
}

#hudBottom #controls{
    order:1;
    color:inherit;
    font-size:inherit;
    letter-spacing:1px;
    transition:opacity .8s;
    pointer-events:none;
}

#hudBottom #controls.hidden{
    opacity:0;
}

#hudBottom .ctrl-sep{
    margin:0 clamp(4px, 1.5vw, 8px);
    opacity:.4;
}

#difficultyBadge{
    order:2;
    padding:1px clamp(4px, 1.5vw, 8px);
    border-radius:3px;
    background:rgba(255,255,255,.05);
    letter-spacing:1px;
}

#gameover{
    position:absolute;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    background:rgba(0,0,0,.85);
    color:white;
    z-index:50;
    text-align:center;
}

#gameover h1{
    font-size:clamp(22px, 8vw, 56px);
    margin:0;
    font-weight:800;
    letter-spacing:clamp(3px, 1vw, 6px);
    background:linear-gradient(180deg,#ff4444,#cc0000);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    text-shadow:none;
    animation:gameoverPulse 1.5s ease-in-out infinite;
}

@keyframes gameoverPulse{
    0%,100%{opacity:1}
    50%{opacity:.6}
}

#gameover .sub{
    font-size:clamp(10px, 2.5vw, 14px);
    opacity:.5;
    letter-spacing:clamp(2px, 1vw, 3px);
    text-transform:uppercase;
    margin:clamp(3px, 1vh, 6px) 0 clamp(2px, 0.5vh, 4px);
    font-family:"Courier New",monospace;
}

#gameover .stat{
    font-size:clamp(11px, 2.5vw, 15px);
    opacity:.7;
    margin:2px 0;
}

#gameover .recorde{
    font-size:clamp(14px, 4vw, 22px);
    font-weight:700;
    letter-spacing:2px;
    background:linear-gradient(90deg,#22d3ee,#39ff14);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    margin:clamp(6px, 2vh, 12px) 0;
}

#gameover .recorde.old{
    font-size:clamp(11px, 3vw, 16px);
    opacity:.5;
    background:none;
    -webkit-text-fill-color:rgba(255,255,255,.5);
    color:rgba(255,255,255,.5);
}

button{
    border:none;
    cursor:pointer;
    font-family:inherit;
    transition:transform .2s, box-shadow .2s;
}
button:hover{
    transform:scale(1.04);
}

.btn-primary{
    background:linear-gradient(135deg,#22d3ee,#39ff14);
    color:#0b1020;
    font-weight:700;
    letter-spacing:2px;
    border-radius:clamp(8px, 2vw, 14px);
    padding:clamp(8px, 2vh, 14px) clamp(16px, 4vw, 24px);
    font-size:clamp(12px, 3vw, 16px);
    box-shadow:0 0 0 rgba(57,255,20,0);
}
.btn-primary:hover{
    box-shadow:0 0 30px rgba(57,255,20,.35);
}

#restartBtn{
    margin-top:clamp(10px, 3vh, 20px);
}

#statsPanel .hudBtns{
    margin-top:clamp(4px, 1vh, 8px);
    display:flex;
    justify-content:center;
    gap:clamp(6px, 1.5vw, 10px);
    pointer-events:auto;
}

#statsPanel .hudBtns button{
    all:unset;
    cursor:pointer;
    font-size:clamp(12px, 3vw, 16px);
    opacity:.35;
    transition:opacity .2s;
}

#statsPanel .hudBtns button:hover{
    opacity:.7;
}

#statsPanel .hudBtns button.muted{
    opacity:.2;
}

#settingsMenu{
    position:absolute;
    top:clamp(60px, 10vh, 80px);
    right:clamp(10px, 2vw, 20px);
    width:min(88vw, 260px);
    background:rgba(15,20,35,.95);
    border:1px solid rgba(255,255,255,.08);
    border-radius:clamp(12px, 3vw, 20px);
    padding:clamp(12px, 2vh, 18px);
    color:white;
    display:none;
    z-index:30;
    backdrop-filter:blur(20px);
}

#settingsMenu h3{
    margin-top:0;
    font-size:clamp(12px, 2.5vw, 16px);
}

.settingOption{
    display:flex;
    align-items:center;
    gap:clamp(6px, 1.5vw, 10px);
    margin:clamp(8px, 1.5vh, 14px) 0;
    font-size:clamp(11px, 2vw, 14px);
}

.settingOption input{
    accent-color:#38bdf8;
}

#menu{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(11,16,32,.85);
    z-index:100;
}

.menu-content{
    text-align:center;
    color:white;
    max-width:min(85vw, 420px);
    padding:0 clamp(12px, 4vw, 24px);
}

.menu-title{
    font-size:clamp(26px, 8vw, 56px);
    font-weight:800;
    margin:0;
    letter-spacing:-1px;
    background:linear-gradient(135deg,#22d3ee,#39ff14);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.menu-subtitle{
    font-size:clamp(12px, 3vw, 18px);
    opacity:.5;
    letter-spacing:clamp(2px, 1vw, 4px);
    text-transform:uppercase;
    margin:clamp(2px, 0.5vh, 4px) 0 clamp(8px, 2vh, 16px);
}

.menu-desc{
    font-size:clamp(11px, 2.5vw, 15px);
    opacity:.7;
    margin:0 0 clamp(12px, 3vh, 28px);
    line-height:1.5;
}

.menu-difficulty{
    margin-bottom:clamp(12px, 3vh, 28px);
}

.menu-diff-label{
    font-size:clamp(9px, 2vw, 12px);
    opacity:.5;
    letter-spacing:2px;
    text-transform:uppercase;
    margin:0 0 clamp(4px, 1vh, 10px);
}

.menu-options{
    display:flex;
    gap:clamp(4px, 1.5vw, 8px);
    justify-content:center;
    flex-wrap:wrap;
}

.menu-opt{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(2px, 0.5vw, 4px);
    cursor:pointer;
    padding:clamp(4px, 1.5vw, 8px) clamp(6px, 2.5vw, 14px);
    border-radius:clamp(6px, 1.5vw, 10px);
    background:rgba(255,255,255,.06);
    transition:.2s;
}

.menu-opt:hover{
    background:rgba(255,255,255,.12);
}

.menu-opt input{
    accent-color:#39ff14;
}

.menu-opt span{
    font-size:clamp(10px, 2.5vw, 13px);
    opacity:.8;
}

#startBtn{
    background:linear-gradient(135deg,#22d3ee,#39ff14);
    color:#0b1020;
    font-size:clamp(13px, 3vw, 18px);
    font-weight:700;
    padding:clamp(10px, 2vh, 16px) clamp(24px, 8vw, 48px);
    border-radius:clamp(8px, 2vw, 14px);
    letter-spacing:2px;
}
#startBtn:hover{
    box-shadow:0 0 30px rgba(57,255,20,.35);
}

.menu-controls{
    margin-top:clamp(8px, 2vh, 20px);
    font-size:clamp(9px, 2vw, 13px);
    opacity:.4;
}

#vignette{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:5;
    opacity:0;
    transition:opacity .5s;
    box-shadow:inset 0 0 120px 20px rgba(220,38,38,.5);
}

#vignette.show{
    opacity:1;
    animation:vignettePulse 1s ease-in-out infinite;
}

@keyframes vignettePulse{
    0%,100%{box-shadow:inset 0 0 100px 10px rgba(220,38,38,.4)}
    50%{box-shadow:inset 0 0 140px 30px rgba(220,38,38,.6)}
}

#heatGlow{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:4;
    opacity:0;
    transition:opacity .3s;
    box-shadow:inset 0 0 150px 50px rgba(255,100,0,.4);
}

#heatGlow.show{
    opacity:1;
}

#toast{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(.8);
    color:white;
    font-size:32px;
    font-weight:800;
    letter-spacing:3px;
    pointer-events:none;
    z-index:15;
    opacity:0;
    transition:opacity .3s, transform .3s;
    text-shadow:0 0 30px rgba(0,255,136,.5);
}

#turboBarWrapper{
    display:flex;
    align-items:center;
    gap:clamp(4px, 1.5vw, 8px);
    margin-top:2px;
}
#turboLabel{
    font-size:clamp(6px, 1.5vw, 8px);
    letter-spacing:2px;
    font-family:"Courier New",monospace;
    opacity:.35;
    min-width:clamp(24px, 8vw, 38px);
}
#turboBar{
    flex:1;
    height:clamp(4px, 1vh, 6px);
    background:rgba(255,255,255,.06);
    border-radius:999px;
    overflow:hidden;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}
#turboFill{
    height:100%;
    width:0%;
    border-radius:999px;
    background:linear-gradient(90deg,#22d3ee,#00ffff);
    transition:width .15s linear;
}
#turboStatus{
    font-size:clamp(6px, 1.5vw, 8px);
    font-family:"Courier New",monospace;
    letter-spacing:1px;
    min-width:clamp(30px, 8vw, 48px);
    text-align:right;
    transition:color .3s;
}
#turboStatus.turbo-inactive{
    opacity:.3;
}
#turboStatus.turbo-active{
    opacity:1;
    color:#00ffff;
    text-shadow:0 0 10px rgba(0,255,255,.5);
    animation:turboPulse .3s ease-in-out infinite;
}
#turboStatus.turbo-ready{
    opacity:.8;
    color:#22d3ee;
}
@keyframes turboPulse{
    0%,100%{opacity:1}
    50%{opacity:.6}
}
#toast.show{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

@media (max-width:520px){
    #hudRow{
        flex-direction:column;
        align-items:stretch;
        gap:4px;
    }
    #missionPanel{
        max-width:none;
        width:100%;
        padding:clamp(4px, 1vw, 8px) clamp(6px, 2vw, 10px);
    }
    #statsPanel{
        max-width:none;
        width:100%;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
        gap:clamp(4px, 1vw, 8px);
        padding:clamp(4px, 1vw, 8px) clamp(6px, 2vw, 10px);
    }
    #statsPanel .labelHud{
        width:100%;
    }
    #highScoreHud{
        width:100%;
    }
    #gameover h1{
        font-size:clamp(18px, 6vw, 32px);
    }
    #settingsMenu{
        left:50%;
        transform:translateX(-50%);
        right:auto;
        top:clamp(50px, 8vh, 70px);
    }
    .menu-opt{
        flex:1 1 35%;
    }
}

@media (min-width:641px){
    #hudTop{
        pointer-events:none;
        transform:none;
        left:auto;
    }
    #hudRow{
        height:calc(100vh - 80px);
        align-items:center;
    }
    #missionPanel{
        position:fixed;
        left:clamp(8px, 2vw, 24px);
        top:50%;
        transform:translateY(-50%);
        max-width:min(28vw, 260px);
        z-index:11;
    }
    #statsPanel{
        position:fixed;
        right:clamp(8px, 2vw, 24px);
        top:50%;
        transform:translateY(-50%);
        max-width:min(26vw, 200px);
        z-index:11;
    }
    #hudBar{
        max-width:min(50vw, 460px);
    }
    #hudBottom{
        gap:clamp(4px, 1.5vw, 12px);
    }
    #notification{
        display:none;
    }
}

@media (max-height:500px){
    #hudTop{
        top:clamp(4px, 1.5vh, 12px);
    }
    #hudBar{
        bottom:clamp(4px, 1.5vh, 12px);
    }
    #missionPanel{
        padding:clamp(3px, 1vh, 6px) clamp(6px, 1.5vw, 10px);
        max-width:200px;
        min-width:auto;
    }
    #missionText{
        font-size:clamp(8px, 1.5vh, 11px);
        min-height:14px;
    }
    #statsPanel{
        padding:clamp(3px, 1vh, 6px) clamp(8px, 2vw, 12px);
        min-width:auto;
    }
    #score{
        font-size:clamp(12px, 2.5vh, 18px);
    }
    #energyPct{
        font-size:clamp(5px, 1.2vh, 7px);
    }
    #energyBar{
        height:clamp(4px, 1vh, 8px);
    }
    #turboBar{
        height:clamp(3px, 0.7vh, 5px);
    }
    #turboLabel,#turboStatus{
        font-size:clamp(5px, 1.2vh, 7px);
    }
    #hudBottom{
        font-size:clamp(6px, 1.2vh, 8px);
        gap:clamp(4px, 1vh, 10px);
    }
    #gameover h1{
        font-size:clamp(16px, 5vh, 30px);
    }
    .btn-primary{
        padding:clamp(6px, 1.5vh, 10px) clamp(12px, 3vw, 18px);
        font-size:clamp(10px, 2vh, 13px);
    }
    #startBtn{
        padding:clamp(8px, 1.5vh, 12px) clamp(20px, 5vw, 32px);
        font-size:clamp(11px, 2vh, 14px);
    }
}