html, body { margin: 0; height: 100%; overflow: hidden; background: #05081a; font-family: "Segoe UI", system-ui, sans-serif; }
canvas { display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; color: #e6f4ff; }
#scoreboard { position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px; align-items: center; background: rgba(6, 12, 34, .78);
  border: 1px solid #2a3f7a; border-radius: 14px; padding: 8px 18px; backdrop-filter: blur(6px); }
.team { display: flex; flex-direction: column; align-items: center; font-size: 26px; font-weight: 700; }
.team .label { font-size: 10px; letter-spacing: 2px; opacity: .75; }
.you #score-p { color: #35f2ff; } .cpu #score-a { color: #ff5a92; }
#timer { font-size: 30px; font-weight: 800; color: #ffd23f; min-width: 52px; text-align: center; }
#timer.low { color: #ff5a5a; animation: pulse .6s infinite alternate; }
@keyframes pulse { to { opacity: .45; } }
#banner { position: absolute; top: 26%; width: 100%; text-align: center; font-size: clamp(26px, 5vw, 46px);
  font-weight: 800; letter-spacing: 3px; opacity: 0; transition: opacity .25s; text-shadow: 0 0 22px rgba(53,242,255,.45); }
#banner.show { opacity: 1; }
#power-wrap { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity .15s; }
#power-bar { width: 180px; height: 12px; border-radius: 6px; background: rgba(20,30,70,.85); border: 1px solid #2a3f7a; }
#power-fill { height: 100%; width: 0%; border-radius: 6px; background: linear-gradient(90deg, #2ee6ff, #ffd23f, #ff5a5a); }
#power-3 { color: #ffd23f; font-weight: 700; font-size: 13px; opacity: 0; }
#hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 11px;
  opacity: .55; white-space: nowrap; }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(3, 6, 18, .72); pointer-events: auto; }
.panel { text-align: center; padding: 30px 34px; border: 1px solid #2a3f7a; border-radius: 18px;
  background: rgba(10, 18, 44, .92); box-shadow: 0 0 60px rgba(46, 230, 255, .18); max-width: 480px; }
.panel h1 { margin: 0 0 10px; font-size: 40px; letter-spacing: 4px; color: #e6f4ff; }
.panel h1 span { color: #35f2ff; }
.panel p { font-size: 14px; line-height: 1.55; margin: 8px 0; }
.panel .keys { color: #9fb6e8; font-size: 12px; }
.panel button, .panel a { pointer-events: auto; margin-top: 14px; padding: 12px 38px; font-size: 18px;
  font-weight: 700; letter-spacing: 2px; color: #05101f; background: linear-gradient(180deg, #4ff3ff, #22b8d6);
  border: none; border-radius: 10px; cursor: pointer; }
#end-text { font-size: 34px; font-weight: 800; letter-spacing: 3px; }
#end-score { font-size: 26px; margin-top: 8px; color: #ffd23f; }
/* touch controls */
#joy { position: absolute; left: 18px; bottom: 18px; width: 128px; height: 128px; border-radius: 50%;
  background: rgba(20, 34, 80, .45); border: 2px solid rgba(53, 242, 255, .35); pointer-events: auto; touch-action: none; }
#joy-stick { position: absolute; left: 50%; top: 50%; margin: -28px; width: 56px; height: 56px;
  border-radius: 50%; background: rgba(53, 242, 255, .4); border: 1px solid #35f2ff; }
#shoot-btn { position: absolute; right: 22px; bottom: 26px; width: 104px; height: 104px; border-radius: 50%;
  font-size: 16px; font-weight: 800; letter-spacing: 1px; color: #05101f;
  background: radial-gradient(circle at 35% 30%, #ffd23f, #ff8a2a); border: 2px solid #ffd23f;
  pointer-events: auto; touch-action: none; box-shadow: 0 0 24px rgba(255, 138, 42, .5); }
@media (pointer: fine) { #joy, #shoot-btn { display: none; } #power-wrap { bottom: 56px; } }