:root {
  --paper: #fff3ee;          /* the shop wall */
  --stripe: #ffe4dd;         /* the candy stripes on the wall */
  --gum: #ff6fae;            /* the gum */
  --gum-deep: #d93d7c;       /* the rim of a bubble and the pop */
  --film: #ff9ccb;           /* the thin film of a bubble */
  --shadow: #a3245a;         /* the shadow under the gum */
  --ink: #5c1834;            /* the shop's writing */
  --ink-soft: #9a4d6d;
}

* { box-sizing: border-box; margin: 0; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(217, 61, 124, 0.08) 100%),
    repeating-linear-gradient(135deg, var(--paper) 0 34px, var(--stripe) 34px 68px);
  color: var(--ink);
  font-family: 'Fredoka Variable', 'Arial Rounded MT Bold', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* on a phone a finger drags the gum instead of moving the page */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.shop {
  position: relative;
  height: 100%;
}

.shop__top {
  position: absolute;
  inset: clamp(20px, 4vh, 40px) 16px auto;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}

.shop__brand {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 650;
  letter-spacing: 0.01em;
}

.shop__line {
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 450;
  color: var(--ink-soft);
}

/* the real title is read, not seen: the svg draws it */
.shop__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gum {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.gum__body text {
  font-family: 'Fredoka Variable', 'Arial Rounded MT Bold', system-ui, sans-serif;
  font-weight: 700;
  fill: var(--gum);
  stroke: var(--gum);
  stroke-linejoin: round;
}

.gum__body circle { fill: var(--gum); }
.gum__body path { fill: var(--gum); }
.gum__body .shred { fill: none; stroke: var(--gum); stroke-linecap: round; }

.film-in { stop-color: var(--film); stop-opacity: 0.32; }
.film-mid { stop-color: var(--film); stop-opacity: 0.5; }
.film-out { stop-color: var(--gum); stop-opacity: 0.82; }

.bubble__film { fill: url(#gum-film); }
.bubble__rim { fill: none; stroke: var(--gum-deep); stroke-opacity: 0.35; }
.bubble__shine { fill: none; stroke: #ffffff; stroke-linecap: round; }
.burst { fill: none; stroke: var(--gum-deep); stroke-linecap: round; }

.shop__hint {
  position: absolute;
  inset: auto 16px clamp(22px, 5vh, 44px);
  text-align: center;
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 500;
  color: var(--ink-soft);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .shop__hint { opacity: 1; }
}