body { margin:0; overflow:hidden; background:#000; font-family:monospace; color:#0f3; }
canvas { display:block; cursor:crosshair; }

/* ── HUD ── */
#ui { position:absolute; top:10px; left:12px; font-size:18px; text-shadow:0 0 6px #000; pointer-events:none; z-index:10; }
#ammo { position:absolute; bottom:20px; right:20px; font-size:22px; text-shadow:0 0 6px #000; pointer-events:none; z-index:10; }
#gunName { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); font-size:16px; color:#0f3; text-shadow:0 0 8px #0f3; pointer-events:none; z-index:10; }
#instructions { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); font-size:13px; opacity:0.8; pointer-events:none; z-index:10; white-space:nowrap; }
#scoreCoins { position:absolute; top:10px; right:12px; font-size:18px; text-shadow:0 0 6px #000; pointer-events:none; z-index:10; color:#ffd700; }
#dmg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:15; opacity:0; background:rgba(200,0,0,0.35); transition:opacity 0.15s; }

/* ── Overlay (start / game over) ── */
#overlay { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; z-index:20; background:rgba(0,0,0,0.75); }
#overlay h1 { color:#f00; font-size:52px; margin:0; text-shadow:0 0 20px #f00; }
#overlay p  { color:#0f3; font-size:22px; }
#overlay button { background:#0f3; color:#000; border:none; padding:12px 30px; font-size:20px; cursor:pointer; font-family:monospace; margin-top:10px; }
#overlay button:hover { background:#0a0; }

/* ── Shop ── */
#shop {
    display:none;
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:30;
    background:rgba(0,8,0,0.97);
    border:2px solid #0f3;
    box-shadow:0 0 40px #0f3a;
    padding:24px 30px;
    min-width:780px;
    max-height:85vh;
    overflow-y:auto;
    font-family:monospace;
}
#shop h2 { color:#0f3; text-align:center; margin:0 0 6px; font-size:26px; text-shadow:0 0 12px #0f3; }
#shop .subtitle { color:#0a0; text-align:center; font-size:13px; margin-bottom:18px; }

.gun-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

.gun-card { border:1px solid #0f3; padding:12px; background:rgba(0,20,0,0.8); cursor:pointer; transition:background 0.15s, box-shadow 0.15s; position:relative; }
.gun-card:hover { background:rgba(0,50,0,0.9); box-shadow:0 0 14px #0f3a; }
.gun-card.owned { border-color:#ffd700; }
.gun-card.owned:hover { background:rgba(30,25,0,0.9); box-shadow:0 0 14px #ffd700a0; }
.gun-card.equipped { border-color:#00cfff; background:rgba(0,20,40,0.9); }

.gun-name { color:#0f3; font-size:15px; font-weight:bold; margin-bottom:4px; }
.gun-card.owned .gun-name { color:#ffd700; }
.gun-card.equipped .gun-name { color:#00cfff; }
.gun-stats { font-size:11px; color:#0a0; line-height:1.6; }
.gun-price { color:#ffd700; font-size:13px; margin-top:6px; }

.gun-badge { position:absolute; top:6px; right:8px; font-size:10px; padding:2px 6px; border-radius:3px; font-weight:bold; }
.badge-owned    { background:#ffd700; color:#000; }
.badge-equipped { background:#00cfff; color:#000; }
.badge-locked   { background:#333;    color:#aaa; }

.shop-close { display:block; margin:18px auto 0; background:#0f3; color:#000; border:none; padding:8px 28px; font-size:16px; cursor:pointer; font-family:monospace; }
.shop-close:hover { background:#0a0; }
.shop-hint { text-align:center; font-size:12px; color:#0a0; margin-top:10px; opacity:0.7; }

.shop-nav { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:16px; }
.shop-nav button { background:transparent; color:#0f3; border:1px solid #0f3; padding:6px 18px; font-size:15px; cursor:pointer; font-family:monospace; transition:background 0.15s; }
.shop-nav button:hover:not(:disabled) { background:rgba(0,255,51,0.15); }
.shop-nav button:disabled { opacity:0.28; cursor:default; }
.shop-page-label { color:#0a0; font-size:14px; min-width:80px; text-align:center; }

/* ── Supplies bar ── */
.supplies-bar { display:flex; gap:12px; margin-bottom:18px; align-items:stretch; }
.supply-card { flex:1; border:1px solid #0a4a0a; padding:12px 10px; background:rgba(0,15,0,0.85); text-align:center; cursor:pointer; transition:background 0.15s, box-shadow 0.15s; position:relative; }
.supply-card:hover { background:rgba(0,40,0,0.95); box-shadow:0 0 12px #0f3a; }
.supply-card.cant-afford { opacity:0.45; cursor:not-allowed; }
.supply-card .supply-icon  { font-size:22px; display:block; margin-bottom:4px; }
.supply-card .supply-name  { color:#0f3; font-size:13px; font-weight:bold; }
.supply-card .supply-desc  { color:#0a0; font-size:10px; margin-top:3px; line-height:1.4; }
.supply-card .supply-price { color:#ffd700; font-size:13px; margin-top:6px; font-weight:bold; }
.supply-card.health-card { border-color:#a00; }
.supply-card.health-card:hover { box-shadow:0 0 12px #f004; }
.supply-card.health-card .supply-name { color:#f55; }

.supplies-label { color:#0a5; font-size:11px; text-transform:uppercase; letter-spacing:2px; text-align:center; margin-bottom:8px; border-bottom:1px solid #0a3; padding-bottom:6px; }

/* ── Settings panel ── */
#settings {
    display:none;
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:30;
    background:rgba(0,8,0,0.97);
    border:2px solid #0f3;
    box-shadow:0 0 40px #0f3a;
    padding:30px 40px;
    min-width:360px;
    font-family:monospace;
    color:#0f3;
}