body { margin:0; overflow:hidden; background:#0c0e12; touch-action:none; -webkit-tap-highlight-color:transparent; }
canvas { display:block; cursor:crosshair; }

#loading {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:#0c0e12; color:#c8d0d8; font:22px system-ui, sans-serif; z-index:200;
}
#loading.hidden { display:none; }

#lock-overlay {
    position:absolute; inset:0; z-index:190; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.45); pointer-events:none; transition:opacity 0.25s ease;
}
#lock-overlay.hidden { opacity:0; }
.lock-box {
    text-align:center; color:#e8ecf0; font:14px/1.5 system-ui, sans-serif;
    background:rgba(12,14,18,0.85); padding:18px 28px; border-radius:10px;
    border:1px solid rgba(255,255,255,0.12);
}
.lock-box b { display:block; font-size:18px; margin-bottom:6px; letter-spacing:0.04em; }
.lock-box span { color:#8a949e; font-size:12px; }

#crosshair {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:20px; height:20px; z-index:120; pointer-events:none; opacity:0;
    transition:opacity 0.15s ease;
}
#crosshair.visible { opacity:1; }
#crosshair span { position:absolute; background:rgba(255,255,255,0.92); }
.ch-top, .ch-bottom { width:2px; height:6px; left:9px; }
.ch-top { top:0; }
.ch-bottom { bottom:0; }
.ch-left, .ch-right { height:2px; width:6px; top:9px; }
.ch-left { left:0; }
.ch-right { right:0; }
.ch-dot {
    width:2px; height:2px; left:9px; top:9px;
    background:rgba(255,255,255,0.7);
}

#ui {
    position:absolute; top:max(10px, env(safe-area-inset-top)); left:max(10px, env(safe-area-inset-left));
    z-index:100; max-width:calc(100vw - 120px);
    background:rgba(0,0,0,0.5); color:#b8c0c8; padding:6px 10px; border-radius:6px;
    font:11px/1.4 system-ui, -apple-system, sans-serif; pointer-events:none;
}
#ui b { color:#e0e4e8; font-weight:600; }

#menu-btn {
    position:absolute; top:max(10px, env(safe-area-inset-top)); right:max(10px, env(safe-area-inset-right));
    z-index:150; width:40px; height:40px; border:0; border-radius:8px;
    background:rgba(0,0,0,0.55); color:#c8d0d8; font-size:18px; cursor:pointer;
    pointer-events:auto;
}
#menu-btn.active { background:rgba(40,48,56,0.95); color:#fff; }

#minimap-panel { display:none !important; }

#hud-panel {
    position:absolute; bottom:max(16px, env(safe-area-inset-bottom)); left:50%;
    transform:translateX(-50%); z-index:100;
    display:flex; gap:16px; align-items:center;
    background:rgba(0,0,0,0.45); color:#d0d8e0; padding:8px 16px; border-radius:6px;
    font:13px/1 monospace; pointer-events:none;
    border:1px solid rgba(255,255,255,0.08);
}
#hud-hp { color:#7ec8ff; font-weight:600; }
#hud-kills { color:#a8b0b8; }
#hud-ammo { color:#8a949e; }

#dash-panel {
    position:absolute; z-index:140; pointer-events:auto;
    background:rgba(10,12,16,0.94); color:#e0e4e8; border-radius:10px;
    font:12px/1.5 system-ui, sans-serif;
    display:flex; flex-direction:column; gap:4px;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 8px 32px rgba(0,0,0,0.6);
    transition:transform 0.25s ease, opacity 0.2s ease;
}
#dash-panel b { color:#fff; display:block; margin-bottom:2px; font-size:13px; }
.dash-section {
    display:block; margin:6px 0 2px; font-size:10px; letter-spacing:0.08em;
    text-transform:uppercase; color:#6a727c;
}
.dash-scroll {
    overflow-y:auto; max-height:140px; padding-right:2px;
    scrollbar-width:thin; scrollbar-color:#3a4048 transparent;
}
.dash-btn {
    display:block; width:100%; padding:8px 10px; margin:2px 0;
    background:#1a1e24; color:#c8d0d8; border:1px solid #2a3038; border-radius:6px;
    cursor:pointer; font-size:12px; text-align:left;
}
.dash-btn:hover { background:#242a32; color:#fff; }
.dash-btn.active { background:#2a3848; color:#7ec8ff; border-color:#4a6888; }
.dash-btn:disabled { opacity:0.5; cursor:wait; }
.dash-empty { color:#6a727c; font-size:11px; padding:4px 0; }

.cam-btn {
    display:block; width:100%; padding:8px 10px; margin:2px 0;
    background:#1a1e24; color:#c8d0d8; border:1px solid #2a3038; border-radius:6px;
    cursor:pointer; font-size:12px; text-align:left;
}
.cam-btn.active { background:#2a3848; color:#7ec8ff; border-color:#4a6888; }

.diff-row { display:flex; gap:4px; margin:4px 0; }
.diff-btn { flex:1; text-align:center; padding:6px 4px; font-size:10px; }
.diff-btn.active { color:#7ec8ff; border-color:#4a6888; }

.counter-row { display:flex; align-items:center; gap:6px; margin:4px 0; }
.counter-btn {
    width:36px; height:36px; border-radius:6px; border:1px solid #2a3038;
    background:#1a1e24; color:#fff; font-size:20px; cursor:pointer;
}
.counter-btn:hover { background:#242a32; }
.counter-value { flex:1; text-align:center; font:14px monospace; color:#8a949e; }

#hotbar-panel { display:none !important; }

#mobile-controls {
    position:absolute; bottom:0; left:0; right:0; display:none; z-index:180;
    pointer-events:none; padding-bottom:max(12px, env(safe-area-inset-bottom));
}

.joy-container {
    position:absolute; bottom:max(20px, env(safe-area-inset-bottom));
    left:max(16px, env(safe-area-inset-left));
    width:130px; height:130px;
    background:rgba(255,255,255,0.06); border:2px solid rgba(255,255,255,0.18);
    border-radius:50%; pointer-events:auto;
}
#joystick {
    position:absolute; top:50%; left:50%; width:54px; height:54px;
    background:rgba(200,208,216,0.85); border-radius:50%; transform:translate(-50%,-50%);
    box-shadow:0 4px 14px rgba(0,0,0,0.45);
}

.mobile-actions {
    position:absolute; bottom:max(18px, env(safe-area-inset-bottom));
    right:max(14px, env(safe-area-inset-right));
    display:flex; align-items:flex-end; gap:10px; pointer-events:none;
}
.action-btn {
    border:0; border-radius:50%; pointer-events:auto;
    display:flex; align-items:center; justify-content:center;
    font-weight:bold; color:#0c0e12;
    box-shadow:0 4px 16px rgba(0,0,0,0.45);
    transition:transform 0.1s ease, background 0.1s ease;
}
.action-btn:active { transform:scale(0.92); }
.jump-btn {
    width:68px; height:68px; font-size:22px;
    background:rgba(200,208,216,0.9); border:3px solid rgba(255,255,255,0.5);
}
.shoot-btn {
    width:64px; height:64px; font-size:28px;
    background:rgba(220,80,80,0.9); border:3px solid rgba(255,255,255,0.5);
    color:#fff;
}
.sprint-btn {
    width:52px; height:52px; font-size:18px;
    background:rgba(120,160,200,0.85); border:3px solid rgba(255,255,255,0.4);
}
.sprint-btn.active { background:rgba(80,140,200,0.95); transform:scale(1.05); }

.desktop-hints { color:#6a727c; }
.desktop-only { display:inline; }

@media (min-width: 721px) {
    #dash-panel {
        top:12px; right:58px; bottom:auto; left:auto;
        width:min(200px, 26vw); max-height:min(70vh, 520px);
        padding:12px 14px; opacity:1; transform:none;
    }
    #dash-panel:not(.open) {
        opacity:0; pointer-events:none; transform:translateY(-8px);
    }
    #dash-panel.open { opacity:1; pointer-events:auto; transform:none; }

    #hud-panel { bottom:16px; }
    #menu-btn { top:12px; right:12px; }
}

@media (max-width: 720px) {
    .desktop-hints, .desktop-only { display:none !important; }

    #ui { font-size:11px; padding:6px 10px; max-width:calc(100vw - 100px); }
    #crosshair.visible { opacity:0.85; }

    #dash-panel {
        left:0; right:0; bottom:0; top:auto;
        width:auto; max-height:min(72vh, 480px);
        padding:16px 16px max(20px, env(safe-area-inset-bottom));
        border-radius:12px 12px 0 0;
        transform:translateY(105%);
        opacity:1;
    }
    #dash-panel.open { transform:translateY(0); }

    #hud-panel {
        bottom:max(148px, calc(env(safe-area-inset-bottom) + 136px));
        font-size:11px; padding:6px 12px; gap:10px;
    }

    #mobile-controls { display:block; }
}