:root { font-family: 'Comic Sans MS','Chalkboard SE',system-ui,sans-serif; color: white; background: #3a1040; }
body { margin: 0 auto; padding: 12px; max-width: 820px; text-align: center; }
h1 { margin: .2em; font-size: clamp(24px,6vw,40px); color: #7dff6a; text-shadow: 0 3px 0 #1a5c12, 0 0 18px #39ff14; letter-spacing: 2px; }
#tagline { margin: 0 0 8px; color: #ffc7e6; }
#hud { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
  font-size: clamp(14px,3.4vw,20px); font-weight: bold; background: #5b1a63; border: 3px solid #ff6fb3;
  border-radius: 14px; padding: 8px; margin: 0 auto 8px; max-width: 800px; box-sizing: border-box; }
#slime { color: #7dff6a; }
#vacuum-hp-wrap { max-width: 800px; margin: 0 auto 8px; }
#vacuum-hp-label { font-weight: bold; color: #ffb3c8; font-size: 14px; }
#vacuum-hp-bar { height: 14px; background: #331122; border: 2px solid #fff; border-radius: 999px; overflow: hidden; }
#vacuum-hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg,#ff2244,#ff8822); transition: width .15s; }
canvas { display: block; width: 100%; max-width: 800px; height: auto; aspect-ratio: 800/500; margin: 0 auto;
  background: #ff9ecd; border: 4px solid #fff; border-radius: 18px; touch-action: none; }
button { font: inherit; padding: 10px 18px; border: 0; border-radius: 12px; cursor: pointer; }
#againBtn { display: block; margin: 12px auto; padding: 14px 36px; font-size: 22px; font-weight: bold; font-family: inherit;
  background: #7dff6a; color: #0c3a08; border: 4px solid #fff; border-radius: 18px; box-shadow: 0 4px 0 #1a5c12; }
#againBtn[hidden] { display: none; }
#againBtn:active { transform: translateY(3px); box-shadow: none; }
#touchControls { display: none; width: min(100%,800px); margin: 8px auto 0; box-sizing: border-box;
  padding: 6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));
  gap: 8px; flex-wrap: wrap; justify-content: center; }
#touchControls button { min-width: 72px; min-height: 60px; border: 3px solid #fff; border-radius: 16px;
  background: #5b1a63; color: white; font: bold 18px system-ui; touch-action: none; user-select: none; -webkit-user-select: none; }
#touchControls button:active { background: #8e2a99; }
#touchShoot { background: #1f8a1f !important; flex-grow: 1; }
#help { font-size: clamp(12px,2.8vw,15px); max-width: 800px; margin: 8px auto; color: #ffe6f3; line-height: 1.5; padding: 0 8px; }
@media (hover:none) and (pointer:coarse) {
  #touchControls { display: flex; }
}
@media (hover:none) and (pointer:coarse) and (orientation:landscape) {
  h1 { margin: 0; font-size: 20px; }
  #tagline, #help { display: none; }
  canvas { width: min(100vw - 16px, calc((100dvh - 210px) * 8 / 5)); }
  #touchControls button { min-height: 48px; }
}
@media (max-width: 480px) { body { padding: 8px; } }