:root {
  --pm-glyph: 18px;
  --pm-glyph-sm: 15px;
  --pm-ic: 30px;
  --pm-ic-r: 9px;
  --pm-ic-bg: var(--accent-soft);
  --pm-ic-ink: var(--accent-ink);
  --pm-intro-gap: var(--sp-2);
  --pm-bar-top: calc(var(--stage-top, 118px) + var(--sp-1));
  --pm-bar-gap: 6px;
  --pm-bar-z: 11;
  --pm-bar-room: calc(100vw - 2 * (var(--rail-btn) + var(--sp-5)));
  --pm-bar-min: 40vw;
  --pm-bar-side: 0px;
  --pm-rail-clear: var(--sp-1);
  --pm-chip-h: 30px;
  --pm-chip-px: 11px;
  --pm-chip-pl: 8px;
  --pm-chip-gap: 6px;
  --pm-chip-fs: var(--fs-xs);
  --pm-chip-bg: var(--hud-glass);
  --pm-chip-ink: var(--hud-glass-ink);
  --pm-chip-line: var(--hud-glass-line);
  --pm-chip-shadow: var(--elev-1);
  --pm-chip-accent: var(--need-water);
  --pm-sip-lift: -2px;
  --pm-sip-t: 2.4s;
}

.pm-intro {
  margin: 0 0 var(--pm-intro-gap);
  color: var(--ink-soft);
  font-size: var(--fs-s);
  line-height: var(--lh);
}

.pm-row .pm-ic {
  width: var(--pm-ic);
  height: var(--pm-ic);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--pm-ic-r);
  background: var(--pm-ic-bg);
  color: var(--pm-ic-ink);
}

.pm-ic .i {
  --is: var(--pm-glyph);
}

.pm-bar {
  position: fixed;
  z-index: var(--pm-bar-z);
  left: 50%;
  top: var(--pm-bar-top);
  transform: translateX(-50%);
  --pm-bar-fit: max(var(--pm-bar-min), min(var(--pm-bar-room), calc(100vw - 2 * (var(--pm-bar-side) + var(--pm-rail-clear)))));
  width: max-content;
  max-width: var(--pm-bar-fit);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pm-bar-gap);
  pointer-events: none;
}

.pm-bar[hidden] {
  display: none;
}

.pm-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--pm-chip-gap);
  height: var(--pm-chip-h);
  padding: 0 var(--pm-chip-px) 0 var(--pm-chip-pl);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--pm-chip-bg);
  color: var(--pm-chip-ink);
  box-shadow: inset 0 0 0 1px var(--pm-chip-line), var(--pm-chip-shadow);
  font: inherit;
  font-size: var(--pm-chip-fs);
  font-weight: var(--fw-b);
  white-space: nowrap;
}

.pm-chip .i {
  --is: var(--pm-glyph-sm);
  color: var(--pm-chip-accent);
  animation: pm-sip var(--pm-sip-t) ease-in-out infinite;
}

.pm-btn {
  pointer-events: auto;
  cursor: pointer;
}

.pm-btn .i {
  animation: none;
}

.pm-solo {
  width: var(--pm-chip-h);
  padding: 0;
  justify-content: center;
}

.pm-solo::before {
  inset: calc((var(--pm-chip-h) - var(--target)) / 2);
}

.pm-btn::before {
  content: '';
  position: absolute;
  inset: calc((var(--pm-chip-h) - var(--target)) / 2) 0;
}

@media (max-width: 359px) {
  :root {
    --pm-bar-room: calc(100vw - 2 * (var(--rail-btn) + var(--sp-3)));
    --pm-chip-fs: var(--fs-2xs);
  }
}

@keyframes pm-sip {
  50% {
    transform: translateY(var(--pm-sip-lift));
  }
}

.reduce-motion .pm-chip .i {
  animation: none;
}