* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #1a1030; font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; }
#wrap { position: fixed; inset: 0; }
#game-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui .hud { position: absolute; inset: 0; }
.hud-scores { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; }
.score-box { font-size: 26px; font-weight: 800; padding: 6px 16px; border-radius: 12px; background: rgba(20,12,38,0.86); letter-spacing: 1px; }
.score-box.you { color: #7fa4ff; border-bottom: 3px solid #4d7cfe; }
.score-box.ai { color: #d9a6ff; border-bottom: 3px solid #b14dff; }
.score-vs { color: rgba(255,243,224,0.5); font-size: 18px; }
.hud-timer { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); font-size: 30px; font-weight: 700; color: #fff3e0; background: rgba(20,12,38,0.7); padding: 2px 14px; border-radius: 10px; }
.hud-timer.low { color: #ff6b6b; animation: blink 0.7s infinite alternate; }
@keyframes blink { from { opacity: 1; } to { opacity: 0.55; } }
.hud-msg { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); font-size: 30px; font-weight: 800; color: #ffd166; text-shadow: 0 2px 12px rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.25s; white-space: nowrap; }
.hud-msg.show { opacity: 1; }
.power-wrap { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 220px; height: 14px; border-radius: 8px; background: rgba(20,12,38,0.75); border: 2px solid rgba(255,243,224,0.4); }
.power-fill { height: 100%; width: 0%; border-radius: 6px; background: linear-gradient(90deg, #2ec4b6, #ffd166, #ff4d4d); transition: width 0.05s linear; }
.power-fill.ready { box-shadow: 0 0 14px #ffd166; }
.arc-tag { position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%); font-size: 14px; letter-spacing: 2px; color: rgba(255,243,224,0.55); font-weight: 700; }
.arc-tag.gold { color: #ffd166; }
.hud-hint { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(255,243,224,0.55); white-space: nowrap; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,8,32,0.78); pointer-events: auto; }
.overlay.hidden { display: none; }
.card { text-align: center; max-width: 480px; padding: 26px 30px; border-radius: 18px; background: rgba(20,12,38,0.92); border: 1px solid rgba(255,209,102,0.4); box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
.card h2 { font-size: 44px; letter-spacing: 4px; color: #ffd166; text-shadow: 0 0 22px rgba(255,120,80,0.6); }
.card h2.win { color: #6df0c2; } .card h2.lose { color: #ff6b81; }
.card .blurb { color: #fff3e0; margin: 10px 0 14px; font-size: 16px; }
.howto { list-style: none; color: rgba(255,243,224,0.85); text-align: left; font-size: 14px; line-height: 1.7; margin-bottom: 18px; }
.howto b { color: #ffd166; }
.btn { pointer-events: auto; cursor: pointer; border: none; border-radius: 12px; padding: 14px 34px; font-size: 18px; font-weight: 800; letter-spacing: 2px; color: #1a1030; background: linear-gradient(135deg, #ffd166, #ff8f3c); box-shadow: 0 6px 20px rgba(255,143,60,0.45); }
.btn:hover { transform: translateY(-2px); }
.btn.link { display: inline-block; margin-top: 12px; margin-left: 10px; text-decoration: none; font-size: 13px; padding: 10px 18px; background: rgba(255,243,224,0.14); color: #fff3e0; box-shadow: none; }
.btn.big { margin-top: 4px; }
.tc-stick { position: absolute; left: 22px; bottom: 22px; width: 120px; height: 120px; border-radius: 50%; background: rgba(20,12,38,0.45); border: 2px solid rgba(255,243,224,0.35); pointer-events: auto; touch-action: none; }
.tc-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: rgba(255,209,102,0.75); }
.tc-aim { position: absolute; right: 0; top: 0; width: 58%; height: 100%; pointer-events: auto; touch-action: none; }
.tc-shoot { position: absolute; right: 24px; bottom: 30px; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,143,60,0.8); color: #1a1030; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; pointer-events: auto; border: 3px solid rgba(255,243,224,0.6); touch-action: none; user-select: none; }
@media (max-width: 640px) {
  .score-box { font-size: 19px; padding: 4px 10px; }
  .hud-timer { font-size: 22px; top: 52px; }
  .power-wrap { width: 150px; bottom: 140px; }
  .arc-tag { bottom: 158px; }
  .hud-hint { display: none; }
  .card h2 { font-size: 32px; }
  .tc-shoot { width: 82px; height: 82px; }
}