:root {
  /* Mirror (oval) geometry */
  --oval-cx: 50%;
  --oval-cy: 50%;
  --oval-rx: 18vw;
  --oval-ry: 35vh;

  /* Sticker size range */
  --tag-min: 70px;
  --tag-max: 180px;
}

/* page + base */
html, body { height: 100%; }
body {
  margin: 0;
  background: rgb(255, 0, 4); /* fallback color */
  font-family: Arial, sans-serif;
  color: #fff;
}

/* wall background */
.wall {
  position: relative;
  width: 100%;
  height: 100%;
  background: center/cover no-repeat var(--wall-image, url("bathroom/bathroom_orangegreen.png"));
  overflow: hidden;
}

/* Sticker layer sits below text */
.tags-layer {
  position: absolute;
  inset: 0;
  pointer-events: auto; /* allow hover */
  z-index: 1;
}

.tag {
  position: absolute;
  will-change: transform, left, top, width;
  user-select: none;
  pointer-events: auto; /* allow hover */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  transform-origin: center center;
  opacity: 1;
}

/* ---------- HEADLINE ---------- */
.headline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: white;
  z-index: 5;                    /* above stickers */
  width: 100%;
  opacity: 0;                    /* start hidden */
  transition: opacity 250ms ease;/* fade in */
  pointer-events: auto;          /* allow clicks (for the link) */
}

/* load-time reveal */
.bg-ready .headline { opacity: 1; }

.headline h1 {
  /* Use Atkinson Hyperlegible Mono for header if loaded in HTML */
  font-family: 'Atkinson Hyperlegible Mono', monospace;
  font-weight: 400;
  font-size: 2.5rem;
  margin: 0.5rem 0;
}

/* default paragraph size under headline */
.headline p {
  font-family: 'Atkinson Hyperlegible Mono', monospace;
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0.25rem 0;
  text-transform: none;          /* keep “tag the wall.” lowercase */
}

/* Make headline links clickable + underline on hover */
.headline a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.headline a:hover { text-decoration: underline; }

/* ---------- SMALL LINK (under the headline) ---------- */
/* Put this <p> INSIDE .headline in your HTML */
.headline .small-link {
  font-family: 'Atkinson Hyperlegible Mono', monospace;
  font-weight: 400;
  font-size: 14px !important;    /* force smaller size than .headline p */
  line-height: 1.2;
  margin-top: 8px;
  color: inherit;
  text-transform: none !important;
  position: static !important;   /* ensure normal flow/centering */
  display: block;
}

.headline .small-link a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.headline .small-link a:hover { text-decoration: underline; }

/* Keep the period clean (not underlined) — place the dot OUTSIDE the <a> */
.no-underline { text-decoration: none; }

/* ---------- TOOLTIPS ON TAGS ---------- */
/* Tooltip styling using data-tip */
.tag[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -8px);   /* fixed position – no animation */
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font: 12px/1.2 Arial, sans-serif;
  white-space: pre;                   /* preserves newlines */
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;      /* fade only */
  z-index: 5;

  /* removed black background & shadow */
  background: transparent;
  box-shadow: none;

  /* readability */
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.tag[data-tip]:hover::after {
  opacity: 1;                         /* only fade in */
}

/* Optional debug oval */
.mirror-oval {
  position: absolute;
  left: calc(var(--oval-cx));
  top: calc(var(--oval-cy));
  width: calc(2 * var(--oval-rx));
  height: calc(2 * var(--oval-ry));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  outline: 2px dashed rgba(255,255,255,.8);
  background: transparent;            /* was rgba(0,0,0,.15) */
  pointer-events: none;
  z-index: 3;
}
.hidden { display: none; }

/* ---------- FLOATING GLOBAL TOOLTIP ---------- */
.hover-tip {
  position: fixed;
  left: 0; top: 0;
  transform: translate(-9999px, -9999px);
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font: 12px/1.2 Arial, sans-serif;
  white-space: pre;        /* preserve newlines */
  pointer-events: none;    /* don't steal the hover */
  z-index: 9999;
  opacity: 0;

  /* removed black background & shadow */
  background: transparent;
  box-shadow: none;

  /* readability */
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}