* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1035; font-family: "Segoe UI", system-ui, sans-serif; }
#scene { position: fixed; inset: 0; display: block; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; color: #f4e3c3; }
.hud-row { display: flex; gap: 10px; padding: 12px; }
.hud-chip { background: rgba(20,10,40,0.65); border: 1px solid rgba(46,232,200,0.5); border-radius: 8px; padding: 6px 12px; font-size: 14px; letter-spacing: 1px; }
.hud-chip b { color: #2ee8c8; font-size: 17px; margin-left: 6px; }
.hud-bar { position: absolute; left: 14px; width: 210px; display: flex; align-items: center; gap: 8px; }
.hud-bar:nth-of-type(2) { top: 62px; }
.hud-bar:nth-of-type(3) { top: 92px; }
.hud-bar-label { font-size: 11px; letter-spacing: 2px; width: 52px; color: #bfa98a; }
.hud-bar-track { flex: 1; height: 10px; background: rgba(20,10,40,0.65); border: 1px solid rgba(244,227,195,0.35); border-radius: 5px; overflow: hidden; }
#hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff5a4e, #ffd24a 60%, #2ee8c8); transition: width .18s; }
#fire-fill { height: 100%; width: 100%; background: #ffb347; transition: width .1s; }
#wave-banner { position: absolute; top: 18%; width: 100%; text-align: center; font-size: 42px; font-weight: 800; letter-spacing: 8px; color: #2ee8c8; text-shadow: 0 0 18px rgba(46,232,200,0.7); opacity: 0; transition: opacity .4s; }
#reticle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 26px; color: rgba(46,232,200,0.75); text-shadow: 0 0 10px rgba(46,232,200,0.6); }

/* Touch controls */
#touch-layer { display: none; position: fixed; inset: 0; z-index: 5; }
.tbtn { position: fixed; width: 62px; height: 62px; border-radius: 50%; border: 2px solid rgba(46,232,200,0.7); background: rgba(20,10,40,0.55); color: #2ee8c8; font-size: 20px; touch-action: none; user-select: none; -webkit-user-select: none; }
.tbtn:active { background: rgba(46,232,200,0.35); }
.tpad-up    { left: 44px; bottom: 130px; }
.tpad-down  { left: 44px; bottom: 58px; }
.tpad-left  { left: 116px; bottom: 94px; }
.tpad-right { left: 188px; bottom: 94px; }
.tpad-aiml  { right: 130px; bottom: 130px; }
.tpad-aimr  { right: 58px; bottom: 130px; }
.tpad-fire  { right: 48px; bottom: 48px; width: 84px; height: 84px; border-radius: 42px; font-size: 16px; font-weight: 800; border-color: #ffb347; color: #ffb347; }

/* Overlays */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12,6,26,0.72); z-index: 10; }
.overlay.hidden { display: none; }
.panel { background: linear-gradient(160deg, rgba(40,20,64,0.95), rgba(24,12,40,0.95)); border: 1px solid rgba(46,232,200,0.45); border-radius: 16px; padding: 34px 42px; max-width: 520px; text-align: center; color: #f4e3c3; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.panel h1 { font-size: 38px; letter-spacing: 6px; color: #2ee8c8; text-shadow: 0 0 24px rgba(46,232,200,0.5); }
.panel h2 { font-size: 30px; letter-spacing: 4px; color: #2ee8c8; }
.panel h2 { color: #2ee8c8; }
#overlay-lose .panel h2 { color: #ff6a5a; }
.tag { color: #d9a06b; margin: 8px 0 18px; font-style: italic; }
.howto { list-style: none; text-align: left; margin: 0 auto 22px; display: inline-block; }
.howto li { margin: 6px 0; font-size: 14.5px; }
.howto b { color: #2ee8c8; }
.big-btn { display: inline-block; padding: 14px 36px; font-size: 17px; font-weight: 800; letter-spacing: 2px; color: #10231f; background: linear-gradient(120deg, #2ee8c8, #7dffe0); border: none; border-radius: 10px; cursor: pointer; box-shadow: 0 6px 24px rgba(46,232,200,0.45); }
.big-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(46,232,200,0.6); }
@media (max-width: 640px) {
  .panel { padding: 22px; margin: 12px; }
  .panel h1 { font-size: 26px; }
  .hud-chip { font-size: 11px; padding: 4px 8px; }
  #reticle { display: none; }
}

#minimap { position: absolute; top: 12px; right: 12px; border: 1px solid rgba(46,232,200,0.4); border-radius: 10px; background: rgba(20,10,40,0.35); }
@media (max-width: 640px) { #minimap { width: 92px; height: 92px; top: 8px; right: 8px; } }