* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; user-select: none; }
#app canvas { display: block; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

#topleft { position: absolute; top: 14px; left: 16px; }
#money { font-size: 34px; font-weight: 800; color: #3ee06c; text-shadow: 0 2px 0 #06210d, 0 0 14px rgba(0,0,0,.9); font-family: 'Arial Narrow', Impact, sans-serif; letter-spacing: 1px; }
#collected { margin-top: 2px; font-size: 16px; color: #ffd54a; text-shadow: 0 1px 3px #000; font-weight: 700; }
#collected .lbl { color: #cfd4da; font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }

#wanted { position: absolute; top: 16px; right: 18px; text-align: right; }
#wanted i { font-style: normal; font-size: 26px; color: rgba(255,255,255,.18); text-shadow: 0 1px 2px #000; margin-left: 2px; }
#wanted i.on { color: #ffcf3d; text-shadow: 0 0 10px rgba(255,180,0,.9), 0 1px 2px #000; animation: pulse 0.8s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.15); } }

#clock { position: absolute; top: 52px; right: 18px; color: #fff; font-size: 15px; font-weight: 700; text-shadow: 0 1px 3px #000; opacity: .85; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); }
#crosshair i { position: absolute; background: rgba(255,255,255,.85); box-shadow: 0 0 3px #000; }
#crosshair i:nth-child(1) { left: 10px; top: 0; width: 2px; height: 6px; }
#crosshair i:nth-child(2) { left: 10px; bottom: 0; width: 2px; height: 6px; }
#crosshair i:nth-child(3) { top: 10px; left: 0; width: 6px; height: 2px; }
#crosshair i:nth-child(4) { top: 10px; right: 0; width: 6px; height: 2px; }

#mission { position: absolute; top: 76px; left: 16px; max-width: 340px; color: #e8ecf2; font-size: 14px; background: rgba(8,12,18,.55); border-left: 3px solid #ffcf3d; padding: 8px 12px; border-radius: 0 6px 6px 0; backdrop-filter: blur(3px); }
#mission .grn { color: #3ee06c; font-weight: 700; }

#prompt { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); color: #fff; font-size: 20px; font-weight: 800; letter-spacing: 2px; text-shadow: 0 2px 6px #000; }

#mapwrap { position: absolute; left: 16px; bottom: 16px; }
#minimap { border-radius: 12px; border: 3px solid rgba(10,14,20,.9); box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 6px 24px rgba(0,0,0,.6); display: block; background: #1d2126; }
#healthwrap { margin-top: 6px; height: 7px; width: 210px; background: rgba(8,12,18,.7); border-radius: 4px; overflow: hidden; }
#healthbar { height: 100%; width: 100%; background: linear-gradient(90deg, #2ecc71, #7bed9f); transition: width .15s; }

#hurt { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(160,0,0,.75) 100%); }

#start { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #1a2740 0%, #05070d 75%); }
.panel { text-align: center; color: #fff; padding: 40px 60px; }
.panel h1 { font-family: Impact, 'Arial Narrow', sans-serif; font-size: 92px; letter-spacing: 4px; color: #ffcf3d; text-shadow: 0 4px 0 #6b4a00, 0 0 60px rgba(255,160,40,.5); }
.panel h1 span { color: #35c4ff; text-shadow: 0 4px 0 #034a68, 0 0 60px rgba(40,180,255,.5); margin-left: 14px; }
.tag { margin-top: 10px; color: #9fb0c6; font-size: 17px; font-style: italic; }
.tag.small { font-size: 13px; margin-top: 26px; }
.keys { display: flex; gap: 26px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.keys div { display: flex; flex-direction: column; gap: 4px; }
.keys b { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); border-bottom-width: 3px; border-radius: 6px; padding: 6px 12px; font-size: 14px; letter-spacing: 1px; }
.keys span { color: #8a97a8; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
#playbtn { margin-top: 38px; padding: 16px 54px; font-size: 20px; font-weight: 800; letter-spacing: 3px; border: none; border-radius: 8px; cursor: pointer; color: #10141a; background: linear-gradient(180deg, #ffe27a, #ffbe1e); box-shadow: 0 6px 0 #9c6f00, 0 10px 30px rgba(255,180,30,.4); }
#playbtn:hover { filter: brightness(1.1); transform: translateY(-1px); }
#playbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #9c6f00; }

#pause { position: fixed; inset: 0; z-index: 15; display: none; align-items: center; justify-content: center; background: rgba(4,6,10,.55); color: #fff; font-size: 26px; font-weight: 800; letter-spacing: 3px; cursor: pointer; text-shadow: 0 2px 8px #000; }

#wasted { position: fixed; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(40,0,0,.0); opacity: 0; pointer-events: none; transition: opacity .5s; }
#wasted.show { opacity: 1; background: rgba(30,0,0,.55); backdrop-filter: grayscale(1) blur(2px); }
#wasted h2 { font-family: Georgia, serif; font-size: 84px; letter-spacing: 14px; color: #b81d1d; text-shadow: 0 0 40px rgba(255,0,0,.7); font-weight: 900; }
#wasted .sub { color: #ccc; margin-top: 8px; font-size: 15px; letter-spacing: 2px; }

#toast { position: fixed; top: 14%; left: 50%; transform: translate(-50%, -20px); z-index: 10; padding: 12px 30px; background: rgba(8,12,18,.85); border: 1px solid rgba(255,207,61,.6); color: #ffe9a8; font-size: 19px; font-weight: 800; letter-spacing: 2px; border-radius: 8px; opacity: 0; transition: all .25s; pointer-events: none; text-shadow: 0 1px 3px #000; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }