@charset "UTF-8";
/* CSS Document */

html, body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: #87CEEB; /* Sky blue background */
}

/* Container that stacks watermark, canvas, overlay */
#stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* --- NEW: SINIM watermark layer (behind canvas) --- */
.watermark {
  position: absolute;
  inset: 0;
  z-index: 0;              /* behind canvas */
  pointer-events: none;    /* let mouse pass through */
  background-color: transparent;

  /* Tiled SVG with rotated "SINIM" text.
     Encoded for safe inline data URL (notice %23 for #, %25 for %). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='160' viewBox='0 0 280 160'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23ffffff' fill-opacity='0.06' font-family='system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif' font-size='64' transform='rotate(-24 140 80)'%3ESINIM%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 340px 200px; /* tile size; make bigger/smaller to taste */
  background-position: 0 0;      /* shift if you want a different alignment */
}

/* Canvas is the middle layer */
#balloonCanvas {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
  background: transparent; /* keep canvas clear so watermark shows through */
}

/* Overlay sits above canvas */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* mouse goes through to canvas unless overridden */
}

/* Optional: items you want clickable can re-enable events */
.overlay .logo {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 120px;
  height: auto;
  pointer-events: auto; /* clickable if needed */
}

.overlay .hud {
  position: absolute;
  top: 16px;
  right: 16px;
  font: 600 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
}

/* DOM labels that track balloons */
.overlay .tag {
  position: absolute;
  transform: translate(-50%, -50%); /* center on its x,y */
  padding: .3rem .5rem;
  font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff;
  white-space: nowrap;
  background: rgba(0,0,0,.28);
  border-radius: .5rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}