html, body { height: 100%; margin: 0; }
/* Neon theme base */
body { background: radial-gradient(1200px 800px at 50% 0%, #0b1020 0%, #080a12 50%, #0a0f1e 100%); font-family: system-ui, sans-serif; color: #cfd8dc; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#minimap { position: fixed; right: 16px; top: 16px; width: 240px; height: 160px; background: rgba(8,12,20,.6); border: 2px solid rgba(0,255,213,.4); border-radius: 8px; box-shadow: 0 0 16px rgba(0,255,213,.25); }
#chatBox { position: fixed; right: 16px; bottom: 16px; width: 280px; max-height: 220px; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: rgba(14,18,28,.80); border: 2px solid rgba(0,255,213,.35); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,255,213,.18), 0 0 0 1px rgba(0,255,213,.25) inset; z-index: 1100; }
#chatMessages { overflow-y: auto; max-height: 140px; padding-right: 6px; font-size: 13px; line-height: 1.3; }
#chatMessages .msg { margin-bottom: 6px; }
#chatMessages .name { color: #00ffd5; font-weight: 700; }
#chatMessages .text { color: #cfd8dc; }
#chatForm { display: flex; gap: 6px; }
#chatInput { flex: 1; padding: 6px 8px; font-size: 13px; background: rgba(0,0,0,.35); color: #cfd8dc; border: 1px solid rgba(0,255,213,.35); border-radius: 8px; }
#chatSend { padding: 6px 10px; font-size: 13px; cursor: pointer; color: #00ffd5; background: rgba(8,12,20,.6); border: 1px solid rgba(0,255,213,.5); border-radius: 8px; box-shadow: 0 0 10px rgba(0,255,213,.35); }
#chatSend:hover { box-shadow: 0 0 14px rgba(0,255,213,.6); filter: brightness(1.05); }
#chatBox.hidden { display: none; }
#hud { position: fixed; left: 12px; top: 12px; color: #00ffd5; font-weight: 700; display: flex; gap: 12px; align-items: center; text-shadow: 0 0 8px rgba(0,255,213,.6); }
#health { width: 320px; height: 20px; background: rgba(0,0,0,.6); border: 2px solid #00ffd5; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 10px rgba(0,255,213,.2), 0 0 12px rgba(0,255,213,.35); }
#healthFill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff006a, #00ffd5 50%, #7cff00 90%); box-shadow: 0 0 18px rgba(0,255,213,.25); }
#ammo { background: rgba(8,12,20,.6); padding: 6px 12px; border-radius: 16px; border: 1px solid rgba(0,255,213,.5); box-shadow: 0 0 10px rgba(0,255,213,.4); }
#overlay { position: fixed; inset:0; backdrop-filter: blur(4px); display: grid; place-items: center; }
.panel { background: rgba(14,18,28,.92); padding: 24px; border-radius: 12px; box-shadow: 0 8px 42px rgba(0,255,213,.18), 0 0 0 2px rgba(0,255,213,.25) inset; text-align: center; border: 2px solid rgba(0,255,213,.35); }
.panel h1 { margin: 0 0 12px; }
.panel input { padding: 8px 12px; font-size: 16px; margin-bottom: 8px; background: rgba(0,0,0,.35); color: #cfd8dc; border: 1px solid rgba(0,255,213,.4); border-radius: 8px; box-shadow: 0 0 10px rgba(0,255,213,.2) inset; }
.panel input.invalid { border-color: #ff006a; outline: none; box-shadow: 0 0 10px rgba(255,0,106,.3) inset; }
.panel .error { color: #ff006a; font-size: 12px; margin: 4px 0 8px; text-shadow: 0 0 6px rgba(255,0,106,.45); }
.panel button { padding: 8px 12px; font-size: 16px; cursor: pointer; color: #00ffd5; background: rgba(8,12,20,.6); border: 1px solid rgba(0,255,213,.5); border-radius: 10px; box-shadow: 0 0 14px rgba(0,255,213,.4); }
.panel button:hover { box-shadow: 0 0 18px rgba(0,255,213,.6); filter: brightness(1.1); }
.howto { text-align: left; margin-top: 12px; }
.howto h2 { margin: 10px 0 6px; font-size: 18px; }
.howto ul { margin: 0; padding-left: 18px; line-height: 1.5; }
.credits { margin-top: 12px; }
.credits .twitch { display: inline-flex; align-items: center; gap: 8px; color: #00ffd5; text-decoration: none; font-weight: 700; text-shadow: 0 0 8px rgba(0,255,213,.6); }
.credits .twitch:hover { text-decoration: underline; }
.credits .ticon { vertical-align: middle; }
.nameLabel { font: 14px system-ui; fill: #e0f7fa; stroke: #00ffd5; }

/* Music controls overlay */
#music .music-toggle { padding: 6px 10px; font-size: 14px; cursor: pointer; color: #00ffd5; background: rgba(8,12,20,.6); border: 1px solid rgba(0,255,213,.5); border-radius: 16px; box-shadow: 0 0 12px rgba(0,255,213,.35); }
#music .music-toggle:hover { box-shadow: 0 0 18px rgba(0,255,213,.6); filter: brightness(1.05); }
#music .music-panel { margin-top: 8px; align-items: center; gap: 10px; background: rgba(14,18,28,.8); border: 1px solid rgba(0,255,213,.35); border-radius: 12px; padding: 8px 10px; box-shadow: 0 8px 24px rgba(0,255,213,.18), 0 0 0 1px rgba(0,255,213,.25) inset; display: none; }
#music .music-panel[hidden] { display: none !important; }
#music .music-panel:not([hidden]) { display: flex; }
#music .music-row { display: flex; align-items: center; gap: 8px; color: #00ffd5; font-weight: 700; text-shadow: 0 0 8px rgba(0,255,213,.6); }
#music input[type=range] { width: 160px; }
#music .music-btn { padding: 6px 10px; font-size: 14px; cursor: pointer; color: #00ffd5; background: rgba(8,12,20,.6); border: 1px solid rgba(0,255,213,.5); border-radius: 10px; box-shadow: 0 0 12px rgba(0,255,213,.35); }
#music .music-btn:hover { box-shadow: 0 0 18px rgba(0,255,213,.6); filter: brightness(1.05); }