:root {
  --ink: #f7ecff; --sun: #ffd166; --hot: #ff5d8f; --mint: #2ee6a8;
  --deep: #1a0f2e; --panel: rgba(26, 15, 46, 0.82);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--deep);
  font-family: system-ui, "Segoe UI", sans-serif; color: var(--ink); }
#game-canvas { position: fixed; inset: 0; display: block; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#scores {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px; align-items: center;
  background: var(--panel); border: 1px solid #ffffff22; border-radius: 14px;
  padding: 8px 16px; font-weight: 800; font-size: 20px; letter-spacing: 1px;
  box-shadow: 0 4px 18px #0006;
}
#scores .me { color: var(--mint); } #scores .foe { color: var(--hot); }
#timer { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--sun); }
#timer.low { color: #ff496c; animation: blink 0.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.4; } }
#powerWrap {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  width: min(340px, 70vw); height: 18px; border-radius: 9px;
  background: var(--panel); border: 1px solid #ffffff22; display: none;
  overflow: hidden;
}
#powerWrap.on { display: block; }
#powerZone { position: absolute; top: 0; bottom: 0; background: #2ee6a855; border-left: 2px solid var(--mint); border-right: 2px solid var(--mint); }
#powerFill { position: absolute; top: 0; bottom: 0; left: 0; width: 0%;
  background: linear-gradient(90deg, #7fb5ff, var(--sun)); }
#powerMark { position: absolute; top: -3px; bottom: -3px; width: 4px; background: #fff; }
#hint { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
  background: var(--panel); padding: 6px 14px; border-radius: 10px; font-size: 14px;
  border: 1px solid #ffffff22; white-space: nowrap; }
#toast {
  position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
  font-size: clamp(24px, 6vw, 44px); font-weight: 900; letter-spacing: 2px;
  color: var(--sun); text-shadow: 0 3px 20px #ff9f1c88; opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
}
#toast.show { opacity: 1; transform: translateX(-50%) scale(1.06); }
.overlay {
  position: fixed; inset: 0; display: flex; flex-direction: column; gap: 18px;
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(120% 90% at 50% 20%, #3b1f66ee, #120a20ee);
  z-index: 5; padding: 20px;
}
.overlay.hidden { display: none; }
.overlay h1 { font-size: clamp(34px, 8vw, 64px); letter-spacing: 3px;
  background: linear-gradient(90deg, var(--sun), var(--hot), var(--mint));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.overlay h2 { font-size: clamp(26px, 7vw, 52px); }
.overlay p { max-width: 560px; line-height: 1.55; color: #d8c9ee; font-size: 15px; }
.overlay kbd { background: #ffffff18; border: 1px solid #ffffff33; border-radius: 6px;
  padding: 1px 7px; font-family: inherit; font-size: 13px; }
.bigbtn {
  pointer-events: auto; cursor: pointer; border: none; border-radius: 14px;
  padding: 14px 34px; font-size: 20px; font-weight: 800; letter-spacing: 2px;
  color: #1a0f2e; background: linear-gradient(90deg, var(--sun), var(--mint));
  box-shadow: 0 6px 24px #2ee6a855;
}
.bigbtn:active { transform: translateY(2px); }
/* touch controls */
#stick {
  position: fixed; left: 18px; bottom: 18px; width: 116px; height: 116px;
  border-radius: 50%; background: #ffffff12; border: 2px solid #ffffff2a;
  z-index: 4; display: none; touch-action: none;
}
#knob { position: absolute; left: 50%; top: 50%; margin: -24px 0 0 -24px;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(180deg, var(--sun), var(--hot)); }
#btn-shoot {
  position: fixed; right: 18px; bottom: 24px; width: 92px; height: 92px;
  border-radius: 50%; z-index: 4; display: none;
  align-items: center; justify-content: center; font-weight: 900;
  letter-spacing: 1px; color: #1a0f2e; font-size: 16px;
  background: radial-gradient(circle at 32% 28%, var(--mint), #157f66);
  border: 2px solid #ffffff33; user-select: none; touch-action: none;
}
#btn-shoot:active { filter: brightness(1.25); }
@media (pointer: coarse) { #stick, #btn-shoot { display: flex; } #hint { display: none; } }
#fps { position: fixed; top: 8px; left: 10px; font-size: 12px; color: #ffffff66; z-index: 3; }