.app-header.has-charger {
  grid-template-columns: repeat(5, 44px);
}
.charger-panel {
  max-height: 85dvh;
  overflow: auto;
  overflow-wrap: anywhere;
}
.charger-panel label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.charger-panel input {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.charger-panel button {
  white-space: normal;
}
.adventure-progress {
  display: grid;
  gap: 8px;
  text-align: left;
  min-width: 0;
  overflow-wrap: anywhere;
}
.adventure-progress[hidden],
.sr-adventure[hidden],
.sa-unlocks[hidden] {
  display: none;
}
.adventure-progress small,
.sa-energy,
.sa-label {
  color: #b5d4df;
}
.adventure-progress > span {
  font-size: 0.9em;
}
.adventure-progress progress {
  appearance: none;
  display: block;
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #071c2e;
  color: #83efd0;
  accent-color: #83efd0;
}
.adventure-progress progress::-webkit-progress-bar {
  background: #071c2e;
}
.adventure-progress progress::-webkit-progress-value {
  background: #83efd0;
  border-radius: 20px;
}
.adventure-progress progress::-moz-progress-bar {
  background: #83efd0;
  border-radius: 20px;
}
.charger-goal {
  margin: 16px 0;
  padding: 14px;
  background: #0b2935;
  border: 1px solid #376571;
  border-radius: 16px;
  color: #e7fff9;
}
.sr-adventure {
  display: grid;
  gap: 12px;
  margin: 20px 0;
  padding: 18px;
  border: 1px solid #446174;
  border-radius: 20px;
  background: #102434;
  color: #edfaff;
  text-align: left;
  overflow-wrap: anywhere;
}
.sr-adventure.is-success {
  border-color: #4eae9a;
  background: linear-gradient(135deg, #133d41, #102434);
}
.sa-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 800;
}
.sa-outcome {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sa-outcome h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}
.sa-icon {
  font-size: 26px;
  color: #9df6d9;
}
.sa-reward {
  font-size: 21px;
}
.sa-energy {
  font-size: 12px;
  line-height: 1.5;
}
.sa-unlock {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #071f30;
}
.sa-effect-sample {
  flex: 0 0 60px;
  text-align: center;
  font-size: 23px;
  color: #a7ffe0;
}
.sa-effect-sample[data-effect="brush-gold"] {
  color: #ffdf83;
}
.sa-effect-sample[data-effect="brush-aurora"] {
  color: #cea7ff;
  text-shadow:
    -5px 0 #85f4e5,
    5px 0 #f8a0e6;
  font-size: 40px;
}
.sa-effects {
  justify-self: start;
  min-height: 44px;
}
.sa-celebrate {
  animation: adventure-unlock 600ms ease-out;
}
@keyframes adventure-unlock {
  from {
    box-shadow: 0 0 24px #9df6d988;
  }
  to {
    box-shadow: 0 0 0 transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sa-celebrate {
    animation: none;
  }
}
.sugar-bug {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 18;
  pointer-events: none;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
}
.bug-encounter-instruction {
  /* The position and tooth marker provide the visible instruction. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.sugar-bug-marker {
  position: absolute;
  z-index: 18;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 3px solid #ffdf00;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #111;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.sugar-bug.on-tooth-bug {
  width: 24px;
  height: 24px;
}
.on-tooth-bug .sugar-bug-body {
  background: radial-gradient(circle at 30% 20%, #ff8379, #ed302f 60%, #a61126);
}
.on-tooth-bug .sugar-bug-face {
  left: 5px;
  top: 12px;
}
.on-tooth-bug .sugar-bug-health {
  left: -4px;
  top: -11px;
  width: 32px;
  height: 7px;
  padding: 1px;
}
.on-tooth-bug .sugar-bug-health > span {
  background: #ff5162;
}
.sugar-bug-outcome.on-tooth-reward {
  width: 88px;
  font-size: 11px;
}
.sugar-bug-body {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 44% 44% 38% 38%;
  background: linear-gradient(to bottom, #ffdf00 50%, #111 50%);
  box-shadow:
    -4px 3px 0 -2px #fff,
    4px 3px 0 -2px #fff,
    0 0 0 1px #111,
    0 3px 6px #0009;
  scale: 1 calc(0.85 + var(--bug-health, 1) * 0.15);
  transform-origin: center bottom;
  transition: scale 80ms linear;
  animation: bug-enter 200ms ease-out;
}
.sugar-bug-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 34% 37%,
      #291734 0 2px,
      #fff 2.5px 4px,
      transparent 4.5px
    ),
    radial-gradient(
      ellipse at 70% 37%,
      #291734 0 2px,
      #fff 2.5px 4px,
      transparent 4.5px
    );
}
.sugar-bug-face {
  position: absolute;
  width: 10px;
  height: 5px;
  left: 9px;
  top: 17px;
  border-bottom: 2px solid #fff;
  border-radius: 0 0 50% 50%;
}
.sugar-bug-health {
  position: absolute;
  box-sizing: border-box;
  left: 44px;
  top: 12px;
  width: 44px;
  height: 9px;
  padding: 2px;
  border: 1px solid #f7dcff;
  border-radius: 5px;
  background: #23182d;
  box-shadow: 0 1px 4px #0009;
  overflow: hidden;
}
.sugar-bug-health > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: #ffdf00;
  transform: scaleX(var(--bug-health, 1));
  transform-origin: left;
  transition: transform 80ms linear;
}
.sugar-bug.is-brushed {
  animation: bug-contact 160ms ease-out infinite;
}
.sugar-bug.is-brushed .sugar-bug-body {
  border-color: #fff;
  filter: brightness(1.12);
}
.sugar-bug.is-resolved .sugar-bug-health,
.sugar-bug.is-escaped .sugar-bug-health {
  display: none;
}
.sugar-bug.is-resolved {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  animation: energy-foam 300ms ease-out both;
}
.sugar-bug.is-resolved .sugar-bug-body {
  display: none;
}
.sugar-bug.is-resolved::before {
  content: "";
  position: absolute;
  inset: -9px;
  background:
    radial-gradient(circle at 20% 25%, #baffed 0 5px, transparent 6px),
    radial-gradient(circle at 75% 20%, white 0 4px, transparent 5px),
    radial-gradient(circle at 50% 55%, #baffed 0 7px, transparent 8px),
    radial-gradient(circle at 15% 80%, white 0 3px, transparent 4px),
    radial-gradient(circle at 85% 75%, #baffed 0 5px, transparent 6px);
}
.sugar-bug.is-escaped {
  animation: bug-escape 300ms ease-in both;
}
.sugar-bug-outcome {
  position: absolute;
  z-index: 21;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 2px;
  box-sizing: border-box;
  width: 100px;
  max-width: 100%;
  padding: 2px;
  border: 2px solid #91ffdc;
  border-radius: 18px;
  background: #082a33;
  color: #c5ffee;
  box-shadow: 0 0 24px #56edc64d;
  pointer-events: none;
  text-align: center;
  font:
    700 10px/1.2 system-ui,
    sans-serif;
}
.sugar-bug-outcome[hidden] {
  display: none;
}
.sugar-bug-outcome-icon {
  color: #91ffdc;
  font-size: 18px;
  line-height: 1;
}
.sugar-bug-outcome.is-missed {
  /* The escape animation shares this row for its first 300ms. */
  left: 38px;
  transform: translateY(-50%);
  width: 62px;
  background: #252735;
  border-color: #ccb793;
  color: #f0dfc2;
  box-shadow: none;
}
.sugar-bug-outcome.is-missed .sugar-bug-outcome-icon {
  color: #ccb793;
  display: none;
}
.brush-effect {
  position: absolute;
  pointer-events: none;
  width: 25px;
  height: 25px;
  top: 35%;
  left: 40%;
  border: 2px solid #a7ffe0;
  border-radius: 50%;
  opacity: 0.7;
}
.brush-effect::before,
.brush-effect::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid #a7ffe0;
  border-radius: 50%;
  left: -10px;
  top: 5px;
}
.brush-effect::after {
  left: 24px;
  top: 20px;
}
.brush-effect[data-effect="brush-gold"] {
  border: none;
  color: #ffdf83;
}
.brush-effect[data-effect="brush-gold"]::before,
.brush-effect[data-effect="brush-gold"]::after {
  content: "✧";
  border: none;
  width: 14px;
  height: 14px;
  font-size: 18px;
}
.brush-effect[data-effect="brush-gold"]::after {
  content: "✦";
  font-size: 12px;
}
.brush-effect[data-effect="brush-aurora"] {
  border: none;
  width: 32px;
  height: 10px;
  background: linear-gradient(
    90deg,
    transparent,
    #bba7ff80,
    #85f4e599,
    #f8a0e6aa
  );
  border-radius: 50%;
}
.brush-effect[data-effect="brush-aurora"]::before,
.brush-effect[data-effect="brush-aurora"]::after {
  display: none;
}
.brushing .brush-effect {
  animation: brush-effect-turn 2s linear infinite;
}
@keyframes energy-foam {
  to {
    opacity: 0;
    transform: scale(1.8);
  }
}
@keyframes bug-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bug-contact {
  50% {
    filter: brightness(1.3);
  }
}
@keyframes bug-escape {
  to {
    opacity: 0;
    transform: translate(16px, -12px);
  }
}
@keyframes brush-effect-turn {
  to {
    rotate: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sugar-bug-body {
    animation: none;
    transition: none;
  }
  .sugar-bug.is-resolved,
  .sugar-bug.is-escaped,
  .sugar-bug.is-brushed {
    animation: none;
    opacity: 1;
  }
  .sugar-bug-health > span {
    transition: none;
  }
  .brushing .brush-effect {
    animation: none;
  }
}

/* Ordinary v6 characters: decorative raster sprites never capture input. */
.ordinary-bug-sprite {
  display: none;
  pointer-events: none;
}
.species-bug .sugar-bug-body {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  scale: 1;
}
.species-bug .sugar-bug-face,
.species-bug .sugar-bug-body::before,
.species-bug .sugar-bug-body::after {
  display: none;
}
.species-bug .ordinary-bug-sprite {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px #082532);
}
.species-bug .ordinary-bug-sprite + .ordinary-bug-sprite {
  display: none;
}
.species-bug[data-phase="copy-one"] .ordinary-bug-sprite,
.species-bug[data-phase="copy-two"] .ordinary-bug-sprite {
  inset: 15% auto auto 0;
  width: 55%;
  height: 70%;
}
.species-bug[data-phase="copy-one"] .ordinary-bug-sprite + .ordinary-bug-sprite,
.species-bug[data-phase="copy-two"]
  .ordinary-bug-sprite
  + .ordinary-bug-sprite {
  display: block;
  left: 45%;
}
.species-bug[data-phase="copy-two"] .ordinary-bug-sprite:first-of-type {
  visibility: hidden;
}
.species-bug[data-phase="hidden"] .ordinary-bug-sprite {
  opacity: 0.3;
  filter: sepia(0.6);
}
.species-bug[data-phase="threads"]::after {
  content: "";
  position: absolute;
  inset: 30% 0 15%;
  border-top: 2px solid #eadcff;
  border-bottom: 2px solid #eadcff;
  background: linear-gradient(
    40deg,
    transparent 46%,
    #eadcff 48% 52%,
    transparent 54%
  );
  pointer-events: none;
}
.species-bug .sugar-bug-health {
  left: 50%;
  top: -9px;
  width: 28px;
  transform: translateX(-50%);
}
.species-target-marker {
  /* The legacy solid dark ring is not part of the v6 target marker. */
  box-shadow: none;
  width: 25px;
  height: 25px;
  border-width: 2px;
  border-style: dashed;
  z-index: 17;
}
.bug-encounter-instruction.species-instruction {
  clip-path: none;
  width: 98%;
  height: auto;
  overflow: visible;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  padding: 2px 4px;
  border: 1px solid #89bdcf;
  border-radius: 9px;
  background: #092332f2;
  color: #fff4d5;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  z-index: 19;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .species-bug,
  .species-bug *,
  .species-bug::after {
    animation: none !important;
    transition: none !important;
  }
}