/* Live Wire's EXISTING 261 x 338 mascot, posed with CSS only.
 * The corner meets source pixel (162, 167). Keep the sizing ratios together.
 * Stacking: original body (0), opaque live card (1), original hands (2).
 * Decorative layers are inert to pointer input and never change the city-search DOM.
 */
.area-directory-scene {
  --corner-mascot-size: 216px;
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding-top: calc(var(--corner-mascot-size) * .639847);
  padding-right: calc(var(--corner-mascot-size) * .37931);
}
.area-directory-scene > .area-directory {
  position: relative;
  z-index: 1;
  background: #fcfbf8; /* Opaque: the torso must be genuinely hidden behind the card. */
  min-width: 0;
  overflow-wrap: break-word;
}
.area-mascot-layer {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--corner-mascot-size);
  height: calc(var(--corner-mascot-size) * 1.08);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.area-mascot-layer img {
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
  transform-origin: 62.068966% 49.408284%;
  transform: rotate(-12deg);
}
.area-mascot-back {
  z-index: 0;
}
.area-mascot-back img {
  /* Keep the original face, sunglasses, prongs, torso and pointing arm.
     Hide the lightning prop and legs, rather than inventing replacement artwork. */
  clip-path: polygon(27% 0,85% 0,85% 51%,91% 54%,91% 65%,79% 67%,78% 73%,69% 75%,32% 75%,32% 62%,28% 53%,28% 37%);
}
.area-mascot-point,
.area-mascot-grip {
  z-index: 2;
}
.area-mascot-point img {
  /* The existing downward-pointing hand reaches in front of the right edge. */
  clip-path: polygon(65% 55%,78% 53%,88% 53%,91% 57%,90% 64%,79% 67%,79% 71%,73% 73%,68% 70%,68% 64%,64% 62%);
}
.area-mascot-grip img {
  /* Rotate only the original curled fingers onto the horizontal top edge. */
  clip-path: polygon(6.897% 44.083%,11.111% 41.420%,13.793% 40.237%,15.709% 41.124%,17.625% 42.604%,17.625% 44.083%,16.092% 45.266%,13.027% 46.154%,11.111% 46.154%,10.728% 47.633%,13.027% 47.633%,14.943% 48.521%,16.092% 49.704%,16.092% 50.888%,14.559% 51.775%,13.027% 51.775%,12.261% 52.663%,14.176% 52.663%,14.943% 53.254%,14.943% 54.438%,13.410% 55.325%,12.261% 55.325%,12.261% 56.805%,9.579% 56.213%,8.046% 55.621%,6.897% 54.438%,6.513% 52.663%,6.513% 51.479%,6.513% 50.296%,7.280% 49.112%,6.513% 47.633%,6.130% 46.154%,6.130% 44.970%);
  transform-origin: 11.494253% 49.408284%;
  transform: translateX(32.56705%) rotate(90deg);
}
.area-mascot-caption {
  position: absolute;
  z-index: 1;
  top: calc(var(--corner-mascot-size) * .23);
  right: calc(var(--corner-mascot-size) * .84);
  margin: 0;
  color: var(--red-dark);
  font-size: 31px;
  transform: rotate(-7deg);
  pointer-events: none;
  user-select: none;
}
.area-mascot-caption .marker-line {
  width: 82%;
  height: 4px;
  margin-top: 6px;
}
@media (max-width: 1100px) {
  .area-directory-scene { --corner-mascot-size: 190px; }
  .area-mascot-caption { font-size: 28px; }
}
@media (max-width: 900px) and (min-width: 641px) {
  .area-directory-scene { --corner-mascot-size: 206px; }
}
@media (max-width: 640px) {
  .area-directory-scene { --corner-mascot-size: 160px; }
  .area-directory-scene > .area-directory { padding: 25px 19px 16px; }
  .area-mascot-caption { font-size: 27px; }
  .area-directory-scene #city-search { font-size: 16px; }
}
@media (max-width: 374px) {
  .area-directory-scene { --corner-mascot-size: 136px; }
  .area-directory-scene > .area-directory { padding-inline: 15px; }
  .area-mascot-caption { font-size: 24px; }
}
@media print {
  .area-mascot-layer,
  .area-mascot-caption { display: none !important; }
  .area-directory-scene { padding: 0; }
}