/* The spinning top: a cream wall, an oak table and a beech top painted in tomato, mustard, teal and cobalt. */
:root {
  --wall: #f3e8d6;          /* the wall behind the table */
  --wall-stripe: #ecdcc4;   /* the faint stripes of the wallpaper */
  --table: #c58c55;         /* the oak table */
  --table-dark: #9c6537;    /* the joints and the grain of the table */
  --ink: #2b2320;           /* the words, and the black rings on the top */
  --wood: #ebcb9d;          /* the bare beech of the top */
  --paint-red: #d8442c;     /* the top: tomato red */
  --paint-yellow: #f2b62e;  /* the top: mustard */
  --paint-teal: #1c8c86;    /* the top: teal (with the mustard it melts into green) */
  --paint-blue: #2f5fb3;    /* the top: cobalt */
  --cream: #f7eddb;         /* the top: the cream ground under the patterns */
  --steel: #a9b0b5;         /* the steel tip */
  --string: #f4e4c4;        /* the twine */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--wall);
  color: var(--ink);
  font-family: 'Fraunces Variable', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background: var(--wall);
  user-select: none;
  -webkit-user-select: none;
}

.room,
.toy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.shop {
  position: absolute;
  left: clamp(20px, 6vw, 96px);
  top: clamp(24px, 9vh, 96px);
  width: min(30rem, 40vw);
  z-index: 2;
  pointer-events: none;
}

.shop__name {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}

.shop__name span {
  font-weight: 400;
  font-style: italic;
  opacity: 0.7;
  margin-left: 0.35em;
}

.shop__title {
  margin: 0;
  font-size: clamp(2.6rem, 6.2vw, 5.6rem);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
}

/* every letter in two spans: the outer one for the entrance, the inner one for the hum */
.shop__title .w {
  display: inline-block;
  white-space: nowrap;
}

.shop__title .l {
  display: inline-block;
  transform-origin: 50% 90%;
}

.shop__title .li {
  display: inline-block;
}

.shop__line {
  margin: 1.2rem 0 0;
  max-width: 24rem;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.45;
  font-weight: 400;
  font-variation-settings: 'SOFT' 50, 'opsz' 14;
}

.meter {
  position: absolute;
  right: clamp(20px, 5vw, 72px);
  top: clamp(24px, 9vh, 96px);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.meter__value {
  display: inline-block;
  min-width: 4ch;
  text-align: right;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 600;
  font-variation-settings: 'SOFT' 100, 'opsz' 72;
}

.meter__unit {
  font-size: 0.95rem;
  font-style: italic;
  opacity: 0.7;
}

.hint {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 5vh, 44px);
  z-index: 2;
  margin: 0;
  translate: -50% 0;
  pointer-events: none;
}

.hint__pill {
  display: inline-block;
  padding: 0.55em 1.1em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
}

.catch {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.catch:focus {
  outline: none;
}

.catch:focus-visible {
  outline: 3px solid var(--paint-blue);
  outline-offset: -6px;
}

@media (max-width: 700px) {
  .shop {
    width: auto;
    right: 20px;
    left: 20px;
    top: 28px;
  }

  .shop__title {
    font-size: clamp(2.4rem, 12vw, 3.4rem);
  }

  .shop__line {
    font-size: 0.98rem;
    max-width: 22rem;
  }

  .meter {
    top: auto;
    right: 20px;
    bottom: 22px;
  }

  .hint {
    left: 20px;
    translate: none;
    bottom: 22px;
  }

  .hint__pill {
    font-size: 0.88rem;
  }
}