:root {
  --h: 270;
  --bg1: hsl(var(--h) 62% 19%);
  --bg2: hsl(calc(var(--h) + 70) 72% 18%);
  --blob1: hsl(calc(var(--h) + 60) 100% 62% / .35);
  --blob2: hsl(calc(var(--h) + 200) 78% 51% / .3);
  --blob3: hsl(calc(var(--h) + 150) 100% 62% / .25);
  --accent: hsl(calc(var(--h) + 150) 100% 62%);
  --shadow: hsl(calc(var(--h) + 60) 100% 62%);
  --text: #fff8e7;
}

* { box-sizing: border-box; }

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

body {
  background:
    radial-gradient(circle at 15% 20%, var(--blob1) 0 12%, transparent 13%),
    radial-gradient(circle at 85% 75%, var(--blob2) 0 10%, transparent 11%),
    radial-gradient(circle at 80% 15%, var(--blob3) 0 6%, transparent 7%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  background-color: var(--bg1);
  color: var(--text);
  font-family: "Trebuchet MS", "Comic Sans MS", system-ui, sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

main {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  text-align: center;
}

h1 {
  margin: 12px 0 0;
  font-size: clamp(1.4rem, 7vw, 2.4rem);
  letter-spacing: .06em;
  color: var(--accent);
  text-shadow: 3px 3px 0 var(--shadow), 5px 5px 0 rgba(0, 0, 0, .35);
}

.stage {
  position: relative;
  flex: 1;
  width: 100%;
  display: grid;
  place-items: center;
  min-height: 0;
}

.tube {
  grid-area: 1 / 1;
  height: min(44vh, 400px);
  aspect-ratio: 1315 / 1493;
  display: grid;
  place-items: center;
  --tilt: 0deg;
  transform: rotate(calc(-41.4deg + var(--tilt)));
}
.tube img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45));
  pointer-events: none;
}
.tube.groaning img { animation: wobble .12s linear infinite alternate; }

@keyframes wobble {
  from { transform: translateX(-2px); }
  to   { transform: translateX(2px); }
}

.status {
  min-height: 1.5em;
  margin: 8px 0 12px;
  font-size: 1.1rem;
}

.btn {
  font: inherit;
  font-weight: bold;
  color: #2a1250;
  background: #ffd23f;
  border: 3px solid #2a1250;
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--shadow);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
.btn[hidden] { display: none; }

.start {
  grid-area: 1 / 1;
  z-index: 1;
  width: 112px;
  height: 112px;
  font-size: 1.4rem;
  letter-spacing: .05em;
}

.sound {
  width: 72px;
  height: 72px;
  background: var(--accent);
}
.sound svg { width: 36px; height: 36px; }
.sound .icon-off,
.sound[aria-pressed="true"] .icon-on { display: none; }
.sound[aria-pressed="true"] .icon-off { display: block; }