/* All live additions are out of flow: encounter changes cannot resize the jaw. */
.bug-focus,
.bug-victories {
  display: none;
  pointer-events: none;
}
.bug-focus[hidden],
.bug-victories[hidden],
.bug-session-results[hidden] {
  display: none !important;
}
.bug-live-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.bug-focus-art,
.bug-trophy-art,
.bug-result-art {
  position: relative;
  display: block;
}
.bug-victories {
  position: absolute;
  top: 0;
  left: 0;
  right: 54px;
  height: 44px;
  align-items: center;
  gap: 5px;
  visibility: hidden;
}
.coach-card.brushing-focused .app-header > .bug-victories {
  display: flex;
  visibility: visible;
}
.bug-trophy {
  position: relative;
  display: block;
  flex: 0 0 32px;
  height: 36px;
  border-radius: 12px;
  background: #143c4566;
}
.bug-trophy-art {
  width: 32px;
  height: 32px;
}
.bug-trophy b {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #beffae;
  font-size: 10px;
  line-height: 12px;
}
.bug-session-results {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #33536b;
  border-radius: 16px;
  background: #0b1c2d;
}
.bug-session-results > h2 {
  margin: 0 0 12px;
  font-size: 18px;
  color: #e8f8fc;
}
.bug-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bug-result-grid article {
  min-width: 0;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 35%, #236072, #112a3b 75%);
  text-align: center;
  padding: 8px;
}
.bug-result-art {
  width: 100%;
  height: 110px;
}
.bug-result-grid h3 {
  margin: 4px 0;
  font-size: 15px;
  color: #ecfbff;
}
.bug-result-grid p {
  margin: 0 0 4px;
  color: #ffe49a;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
@media (max-width: 599px), (min-width: 600px) and (max-height: 500px) {
  .bug-focus {
    display: block;
    position: absolute;
    inset: 0 0 -24px;
    --portrait-size: 76px;
    z-index: 3;
  }
  .bug-focus-art {
    position: absolute;
    right: 0;
    top: 0;
    width: var(--portrait-size);
    height: var(--portrait-size);
    border-radius: 18px;
    background: radial-gradient(ellipse, #28717b80, transparent 72%);
  }
  .bug-focus-copy {
    position: absolute;
    left: 0;
    right: calc(var(--portrait-size) + 10px);
    top: calc(100% - 24px);
    color: #eaf9ff;
    font-size: 11px;
    line-height: 12px;
    text-align: left;
  }
  .bug-focus-copy strong,
  .bug-focus-copy > span {
    display: block;
  }
  .bug-focus-copy strong {
    color: #ffe8a4;
    font-weight: 700;
  }
  .bug-focus-copy > span {
    font-weight: 500;
  }
  .bug-focus progress {
    appearance: none;
    position: absolute;
    right: 5px;
    top: calc(var(--portrait-size) - 3px);
    width: calc(var(--portrait-size) - 10px);
    height: 4px;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #284959;
    color: #abf6b6;
  }
  .bug-focus progress::-webkit-progress-bar {
    background: #284959;
  }
  .bug-focus progress::-webkit-progress-value {
    background: #abf6b6;
  }
  .bug-focus progress::-moz-progress-bar {
    background: #abf6b6;
  }
  .has-bug-focus .bug-encounter-instruction.species-instruction {
    visibility: hidden;
  }
  .has-bug-focus .zone-status strong {
    padding-right: 86px;
  }
  .has-bug-focus .tooth-progress {
    padding-right: 86px;
  }
  .has-bug-focus .technique-cue {
    right: 86px;
    bottom: 4px;
  }
  .bug-focus[data-outcome="resolved"] .bug-focus-art {
    background: radial-gradient(ellipse, #80c95e66, transparent 74%);
  }
  .bug-focus[data-outcome="missed"] .bug-focus-art {
    opacity: 0.55;
  }
  .profile-view .bug-focus {
    display: none;
  }
}
@media (max-width: 350px) {
  .bug-focus {
    --portrait-size: 64px;
  }
  .has-bug-focus .zone-status strong,
  .has-bug-focus .tooth-progress {
    padding-right: 74px;
  }
  .has-bug-focus .technique-cue {
    right: 74px;
  }
  .bug-trophy {
    flex-basis: 28px;
  }
  .bug-trophy-art {
    width: 28px;
    height: 32px;
  }
  .bug-victories {
    gap: 4px;
  }
}
@media (min-width: 600px) and (max-height: 500px) {
  .bug-focus {
    --portrait-size: 64px;
  }
  .has-bug-focus .zone-status strong,
  .has-bug-focus .tooth-progress {
    padding-right: 74px;
  }
  .has-bug-focus .technique-cue {
    right: 74px;
  }
  .bug-victories {
    gap: 3px;
  }
  .bug-trophy {
    flex-basis: 26px;
  }
  .bug-trophy-art {
    width: 26px;
    height: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bug-focus *,
  .bug-victories *,
  .bug-session-results * {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 599px), (min-width: 600px) and (max-height: 500px) {
  .position-status .technique-cue {
    transition: none;
  }
}

@media (max-width: 599px), (min-width: 600px) and (max-height: 500px) {
  .ordinary-bug-session {
    padding-bottom: calc(2px + var(--bug-copy-extra, 0px));
  }
  .bug-focus-copy {
    top: calc(100% - 24px - var(--bug-copy-extra, 0px));
  }
}
@media (min-width: 600px) and (max-height: 500px) {
  .ordinary-bug-session {
    margin-bottom: 24px;
  }
}

@media (max-width: 599px), (min-width: 600px) and (max-height: 500px) {
  .has-bug-focus .technique-cue {
    bottom: calc(4px + var(--bug-copy-extra, 0px));
  }
}

/* Tooth indicators keep the base 22×24 size and 5px spacing in every state.
   Compact the secondary diamond cue instead of changing the teeth. */
@media (max-width: 380px),
  (min-width: 600px) and (max-width: 820px) and (max-height: 500px) {
  .has-bug-focus .technique-cue {
    gap: 3px;
  }
  .has-bug-focus .technique-cue .combo-pips {
    gap: 2px;
  }
  .has-bug-focus .technique-cue .combo-pips i {
    width: 3px;
    height: 3px;
  }
}
@media (min-width: 600px) and (max-width: 820px) and (max-height: 500px) {
  .has-bug-focus .technique-cue {
    top: 68px;
    bottom: auto;
    right: 0;
    min-height: 14px;
  }
  .has-bug-focus .technique-cue .mini-diamond {
    flex-basis: 12px;
    width: 12px;
    height: 14px;
  }
}