* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #12102a;
  font-family: "Segoe UI", system-ui, sans-serif; color: #f5e7cf; }
#stage { position: fixed; inset: 0; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#hud { position: absolute; inset: 0; pointer-events: none; }
#hud-top { position: absolute; top: 10px; left: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.hud-chip { background: rgba(18, 14, 40, .62); border: 1px solid rgba(255, 190, 90, .35);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; letter-spacing: .08em; }
.hud-chip b { color: #ffcf6e; font-size: 15px; margin-left: 4px; }

#hp-wrap { position: absolute; top: 10px; right: 12px; display: flex; align-items: center; gap: 8px; }
#hp-label { font-size: 12px; letter-spacing: .12em; opacity: .85; }
#bar-hp { width: 170px; height: 14px; background: rgba(18,14,40,.62);
  border: 1px solid rgba(255,190,90,.35); border-radius: 7px; overflow: hidden; }
#bar-hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #e2553f, #ffb347);
  transition: width .25s; }

#reload-bar { position: absolute; bottom: 118px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 6px; background: rgba(18,14,40,.6); border-radius: 3px; }
#reload-fill { height: 100%; width: 0%; background: #8fd3a8; border-radius: 3px; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
  transform: translate(-50%, -50%); opacity: .85; }
#crosshair span { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  margin: -3px; background: #ffd97a; border-radius: 50%; box-shadow: 0 0 8px #ff9a3c; }
#crosshair i { position: absolute; inset: 0; border: 2px solid rgba(255,217,122,.8);
  border-radius: 50%; clip-path: polygon(0 0,100% 0,100% 32%,68% 32%,68% 68%,32% 68%,32% 100%,0 100%); }

#hurt-flash { position: absolute; inset: 0; background: radial-gradient(circle, transparent 55%, rgba(226,60,40,.55));
  opacity: 0; }
#hurt-flash.go { animation: hurt .5s ease-out; }
@keyframes hurt { 0% { opacity: 1; } 100% { opacity: 0; } }

#hud-msg { position: absolute; top: 18%; left: 50%; transform: translateX(-50%);
  font-size: clamp(20px, 4vw, 34px); letter-spacing: .18em; color: #ffd97a;
  text-shadow: 0 2px 12px rgba(0,0,0,.7); opacity: 0; transition: opacity .4s; }
#hud-msg.go { opacity: 1; }

#touch-controls { position: absolute; bottom: 14px; left: 0; right: 0; display: flex;
  justify-content: space-between; align-items: flex-end; padding: 0 14px; pointer-events: none; }
.tc-left { display: grid; grid-template-columns: 56px 64px 56px; grid-template-rows: 52px 52px;
  gap: 6px; pointer-events: auto; }
.tc-left .wide { grid-column: 2; }
#t-left { grid-area: 2/1; } #t-right { grid-area: 2/3; }
.tbtn { pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none;
  background: rgba(24,20,52,.55); border: 1px solid rgba(255,190,90,.45); color: #ffd97a;
  border-radius: 12px; font-size: 20px; }
.tbtn.on { background: rgba(255,180,80,.5); }
.tbtn.fire { width: 92px; height: 92px; border-radius: 50%; font-size: 17px; letter-spacing: .1em;
  background: rgba(120,40,30,.55); border: 2px solid rgba(255,150,90,.6); pointer-events: auto; }

.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 8, 26, .72); backdrop-filter: blur(3px); pointer-events: auto; }
.overlay.hide { display: none; }
.panel { max-width: 620px; width: calc(100% - 32px); text-align: center; padding: 28px 22px;
  background: rgba(24, 18, 46, .85); border: 1px solid rgba(255, 190, 90, .4); border-radius: 16px; }
.panel h1 { font-size: clamp(34px, 8vw, 64px); letter-spacing: .12em; color: #ffcf6e;
  text-shadow: 0 0 24px rgba(255, 140, 60, .5); }
.panel h2 { font-size: clamp(26px, 6vw, 44px); letter-spacing: .1em; }
.panel h2.win { color: #9fe2b0; } .panel h2.lose { color: #ff7a5c; }
.panel .tag { margin-top: 6px; color: #d9c39a; font-style: italic; }
.how { margin: 18px 0; text-align: left; font-size: 14px; line-height: 1.8; color: #e8d8b8; }
.how b { color: #ffcf6e; }
.big-btn { display: inline-block; margin-top: 10px; padding: 14px 34px; font-size: 17px;
  letter-spacing: .12em; color: #1c1230; background: linear-gradient(180deg, #ffd97a, #ff9a3c);
  border: none; border-radius: 12px; cursor: pointer; font-weight: 700; }
.big-btn:active, .big-btn:hover { filter: brightness(1.15); }

@media (max-width: 640px) {
  #bar-hp { width: 110px; }
  #tc-left { grid-template-columns: 48px 56px 48px; }
}
@media (pointer: fine) { #touch-controls { display: none; } }