/* Paper and character stay independent; foreground leaves use foliage physics. */
.wonder-advisor {
  --advisor-unit: 1px;
  position: relative;
  flex: none;
  width: calc(375 * var(--advisor-unit));
  height: calc(460 * var(--advisor-unit));
  margin-top: auto;
  margin-right: calc(-27 * var(--advisor-unit));
  isolation: isolate;
  pointer-events: none;
}
.advisor-cloud {
  position: absolute;
  z-index: 1;
  top: calc(24 * var(--advisor-unit));
  left: 0;
  width: 93%;
  aspect-ratio: 440 / 264;
  transform: translateY(20%) rotate(-8deg);
  transform-origin: 60% 80%;
  filter: drop-shadow(0 4px 5px #664b1320);
}
.advisor-cloud-sprite {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.advisor-cloud-content {
  position: absolute;
  /* Centre the group on the visible paper, above the overlapping head. */
  inset: 3% 12% 28% 12%;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--advisor-unit));
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: auto;
}
.advisor-bulb { width: calc(27 * var(--advisor-unit)); height: calc(29 * var(--advisor-unit)); flex: none; }
.advisor-cloud h2 {
  margin: 0;
  color: #7134b5;
  font-size: calc(23 * var(--advisor-unit));
  line-height: 1.15;
  font-weight: 1000;
  white-space: nowrap;
  text-align: center;
}
#advisor-tip {
  width: 100%;
  margin: 0;
  padding-bottom: 3px;
  color: #393b37;
  font-size: calc(18 * var(--advisor-unit));
  line-height: 1.2;
  font-weight: 650;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.advisor-controls { position: absolute; inset: 0; container-type: size; pointer-events: none; }
.advisor-controls button {
  /* Split the invisible hit areas halfway between the two SVG circle centres. */
  --advisor-control-cut: max(0px, calc(22px - 39 / 660 * 100cqh));
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px 12px;
  color: #617224;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
/* Centres of the first two circles in advisor-cloud.svg (440 × 330). */
#advisor-toggle { left: calc(37 / 440 * 100%); top: calc(256 / 330 * 100%); clip-path: inset(0 0 var(--advisor-control-cut) 0); }
#advisor-next { left: calc(65 / 440 * 100%); top: calc(295 / 330 * 100%); clip-path: inset(var(--advisor-control-cut) 0 0 0); }
.advisor-controls button:hover { color: #7134b5; background: transparent; }
.advisor-controls button:focus-visible { outline: 2px solid #7134b5; outline-offset: 0; }
.advisor-controls svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.advisor-resume-icon { display: none; }
.wonder-advisor[data-paused="true"] .advisor-pause-icon { display: none; }
.wonder-advisor[data-paused="true"] .advisor-resume-icon { display: block; }
.advisor-spark { position: absolute; top: 32%; left: 4%; width: 8%; height: 17%; fill: none; stroke: #acc72b; stroke-width: 6; stroke-linecap: round; }
.advisor-character {
  position: absolute;
  z-index: 2;
  width: 84%;
  right: -3%;
  bottom: -7%;
  aspect-ratio: 1;
  transform-origin: 55% 92%;
}
.advisor-character img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 55% 92%; user-select: none; pointer-events: none; }
.advisor-character__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}
.advisor-character__lid { opacity: 0; clip-path: inset(0 0 100% 0); }
@media (min-width: 1101px), (min-width: 1025px) and (min-height: 551px) {
  .advisor-character__face { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .advisor-character__face { display: none; }
}
.advisor-foreground {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  user-select: none;
}
.advisor-foreground img { position: absolute; height: auto; aspect-ratio: 1; pointer-events: none; user-select: none; }
.advisor-bush-left { width: 91%; left: 7%; bottom: -16%; transform: rotate(-74deg); }
.advisor-bush-right { width: 77%; right: -12%; bottom: -12%; transform: rotate(164deg); }
.advisor-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 1025px) {
  .tour-aside { top: calc(164 * var(--u)); }
  .wonder-advisor { --advisor-unit: var(--u); margin-bottom: calc(-24 * var(--u)); }
  /* Leave room for the new mascot's wider crown beside long translated tips. */
  .advisor-cloud { top: calc(8 * var(--advisor-unit)); }
  /* The speaking mascot replaces the secondary upper decoration. */
  .decor-mascot-extra { display: none; }
}
@media (min-width: 1025px) and (max-width: 1250px) {
  .wonder-advisor { width: calc(410 * var(--advisor-unit)); }
  .advisor-cloud { top: calc(-24 * var(--advisor-unit)); }
}
@media (max-width: 1024px), (max-width: 1100px) and (max-height: 550px) {
  .tour-aside {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    align-items: center;
    margin: -42px 0 0;
    padding: 0 24px 32px;
    overflow: clip;
    z-index: 4;
  }
  .tour-aside .tour-features { display: none; }
  .wonder-advisor {
    --advisor-unit: clamp(.76px, .245vw, 1px);
    width: min(100%, calc(410 * var(--advisor-unit)));
    height: calc(500 * var(--advisor-unit));
    margin: 0;
  }
  .advisor-cloud { top: calc(60 * var(--advisor-unit)); width: 100%; aspect-ratio: 440 / 312; }
  .advisor-cloud h2 { font-size: max(20px, calc(23 * var(--advisor-unit))); }
  #advisor-tip { font-size: max(16px, calc(18 * var(--advisor-unit))); }
  .advisor-character { width: 79%; bottom: -5%; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .advisor-controls button { transition: none; }
}