* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  /* Expose device safe-area insets so the canvas HUD can avoid the notch / home bar. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
html, body {
  width: 100%; height: 100%;
  background: #05030f;
  overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: #cfe9ff;
}
#wrap {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
canvas {
  display: block;
  touch-action: none;
  cursor: crosshair;
  box-shadow: 0 0 90px rgba(120,40,200,0.3);
  border-radius: 4px;
  image-rendering: optimizeSpeed;
}

/* PWA install button — shown only when the browser offers an install prompt */
#installBtn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 7px 14px;
  font: bold 13px "Trebuchet MS", system-ui, sans-serif;
  letter-spacing: 0.5px;
  color: #d8feff;
  background: rgba(16, 8, 38, 0.82);
  border: 1.5px solid #5ff0ff;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(95, 240, 255, 0.45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(2px);
}
#installBtn:hover { background: rgba(40, 20, 70, 0.9); box-shadow: 0 0 20px rgba(95, 240, 255, 0.7); }
#installBtn:active { transform: translateX(-50%) scale(0.96); }
#installBtn[hidden] { display: none; }