* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #070b1f; font-family: "Segoe UI", "Trebuchet MS", system-ui, sans-serif; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; color: #dfeaff; }
#scoreboard {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(22px, 4vw, 34px); font-weight: 800; letter-spacing: 1px;
  background: rgba(9, 14, 40, 0.72); border: 1px solid rgba(53, 224, 255, 0.4);
  border-radius: 14px; padding: 8px 20px; text-shadow: 0 0 14px rgba(53, 224, 255, 0.6);
}
#score-you { color: #35e0ff; } #score-cpu { color: #ff5c7a; } #score-sep { color: #55709f; }
#clock { margin-left: 14px; color: #ffc94a; font-variant-numeric: tabular-nums; }
#labels { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); display: flex; gap: 92px; font-size: 12px; letter-spacing: 3px; color: #7e93c9; }
#toast {
  position: absolute; top: 22%; left: 50%; transform: translateX(-50%);
  font-size: clamp(18px, 3.4vw, 30px); font-weight: 800; color: #ffe08a;
  text-shadow: 0 0 18px rgba(255, 201, 74, 0.7); white-space: nowrap;
}
#reticle { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); }
#reticle-dot { width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(255, 224, 138, 0.85); box-shadow: 0 0 10px rgba(255, 224, 138, 0.5); }
#powerbar {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: min(340px, 60vw); height: 14px; border: 1px solid rgba(53, 224, 255, 0.55);
  border-radius: 8px; background: rgba(9, 14, 40, 0.65); overflow: hidden; transition: opacity 0.2s;
}
#power-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #35ffd2, #ffe08a, #ff5c7a); }
#powerbar::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1px;
  background: #fff; opacity: 0.9; box-shadow: 0 0 8px #fff;
}
.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(10, 16, 48, 0.82), rgba(4, 6, 20, 0.94));
  z-index: 10;
}
.panel {
  max-width: 640px; width: min(92vw, 640px); text-align: center; color: #dfeaff;
  background: rgba(12, 20, 52, 0.85); border: 1px solid rgba(53, 224, 255, 0.35);
  border-radius: 20px; padding: 34px 30px; box-shadow: 0 0 50px rgba(53, 224, 255, 0.18);
}
.panel h1 {
  font-size: clamp(30px, 7vw, 54px); letter-spacing: 4px; color: #35e0ff;
  text-shadow: 0 0 24px rgba(53, 224, 255, 0.65); margin-bottom: 10px;
}
.tag { color: #9fb4e8; margin-bottom: 18px; font-size: clamp(13px, 2.4vw, 16px); }
.howto { list-style: none; text-align: left; display: inline-block; margin-bottom: 22px; }
.howto li { margin: 7px 0; font-size: clamp(12px, 2.2vw, 15px); color: #c6d6f5; }
.howto b { color: #ffe08a; } .howto i { color: #ff8fb8; }
#btn-play, #btn-restart {
  pointer-events: auto; cursor: pointer; font-weight: 800; font-size: 20px; letter-spacing: 2px;
  color: #06122b; background: linear-gradient(135deg, #35ffd2, #35e0ff);
  border: none; border-radius: 14px; padding: 14px 42px;
  box-shadow: 0 0 30px rgba(53, 255, 210, 0.5); transition: transform 0.15s;
}
#btn-play:hover, #btn-restart:hover { transform: scale(1.06); }
#end { display: none; }
/* on-screen touch controls: hidden on desktop, active on touch devices */
#touch-aim, #touch-stick, #btn-shoot { display: none; }
@media (pointer: coarse), (max-width: 820px) and (hover: none) {
  #touch-aim { display: block; position: fixed; right: 0; top: 0; width: 55%; height: 100%; pointer-events: auto; touch-action: none; z-index: 5; }
  #touch-stick {
    display: block; position: fixed; left: 22px; bottom: 26px; width: 120px; height: 120px;
    border-radius: 50%; border: 2px solid rgba(53, 224, 255, 0.45); background: rgba(9, 14, 40, 0.45);
    pointer-events: auto; touch-action: none; z-index: 6;
  }
  #stick-nub {
    position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
    border-radius: 50%; background: rgba(53, 224, 255, 0.55); box-shadow: 0 0 16px rgba(53, 224, 255, 0.6);
  }
  #btn-shoot {
    display: block; position: fixed; right: 24px; bottom: 30px; width: 96px; height: 96px; border-radius: 50%;
    border: 2px solid rgba(255, 92, 122, 0.7); background: rgba(60, 12, 34, 0.6); color: #ffd9e3;
    font-weight: 800; font-size: 16px; letter-spacing: 1px; pointer-events: auto; touch-action: none; z-index: 6;
  }
  #btn-shoot small { font-weight: 400; font-size: 10px; color: #c98ba0; }
  #powerbar { bottom: 140px; }
  #labels { display: none; }
}