/* The glow stick button: a glow stick lying on a black page, and the button is the stick. The tube, the liquid,
   the glass vial inside and the light are drawn by script.js on two canvases (the stick, and the light it spills on
   the page around it); the words printed on the tube and the tick come from here. */
:root {
  --page: #000000;          /* the page */
  --plastic: #c6d0a5;       /* the tube, unlit: frosted plastic tinted by the dye inside */
  --clear: #e6ebdf;         /* the clear liquid in the glass vial */
  --glow: #d0ff3a;          /* the light, where the two liquids meet */
  --hot: #fbffe8;           /* where they meet hardest the light runs almost white */
  --ink: #121a08;           /* the words printed on the tube */
  --focus: #d0ff3a;         /* the ring of the keyboard's focus */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Unbounded Variable', 'Unbounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 72px 16px;
}

.stick {
  display: grid;
  justify-items: center;
}

/* the rig is what tilts under the pointer and what gets shaken: the stick and its light together */
.stick__rig {
  position: relative;
}

/* the light the stick spills on the page, blurred out around it */
.stick__halo {
  position: absolute;
  left: -64px;
  top: -64px;
  width: calc(100% + 128px);
  height: calc(100% + 128px);
  filter: blur(14px);
  pointer-events: none;
}

/* ---------------------------------------------------------------- the stick */
.stick__btn {
  position: relative;
  display: block;
  width: min(304px, calc(100vw - 32px));
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* the canvas reaches a little past the button, so the stick can bend */
.stick__tube {
  position: absolute;
  left: -12px;
  top: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  pointer-events: none;
}

.stick__btn[aria-busy='true'] {
  cursor: progress;
}

.stick__btn[aria-disabled='true']:not([aria-busy='true']) {
  cursor: default;
}

.stick__btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
}

html[data-using='pointer'] .stick__btn:focus-visible {
  outline: none;
}

/* a stick that cannot be used yet: dim and grey, the ink faded */
.stick__btn:disabled {
  cursor: not-allowed;
  filter: grayscale(1) brightness(0.62);
}

/* ---------------------------------------------------------------- the words */
/* a soft window over the stick: the words rolling out at the top and in at the bottom fade at its edges */
.stick__window {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 9px, #000 21px, #000 35px, transparent 47px);
  mask-image: linear-gradient(to bottom, transparent 9px, #000 21px, #000 35px, transparent 47px);
}

.stick__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 28px 1px;
  font-size: 14px;
  font-weight: 620;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: none;
}

.stick__words {
  position: relative;
  display: block;
}

/* every letter is its own box, so it can ride the curve of the stick when it bends */
.stick__words > span {
  display: inline-block;
  white-space: pre;
}

.stick__tick {
  display: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.stick__label[data-mode='done'] .stick__tick {
  display: block;
}

@media (max-width: 359px) {
  .stick__label {
    font-size: 13px;
  }
}