/* Visible foot position is anchored to the clearing, independent of PNG padding. */
.map-play{position:absolute;z-index:6;left:24.5%;bottom:46.9%;width:6.96%;height:auto;aspect-ratio:874/727;display:block;background:none;border:0;padding:0;line-height:0;animation:none!important;transform:none!important;transition:none!important}
.map-play img{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none;animation:none!important;transform:none!important;transition:none!important}
.map-play-bubble{position:absolute;left:50%;top:-8px;transform:translate(-50%,-100%);display:block;white-space:nowrap;color:#52634e;background:#fffbed;border:2px solid #52634e;border-radius:18px 21px 17px 20px;padding:5px 11px;font:400 12px/1.35 var(--display);letter-spacing:-.02em;animation:soki-bubble-float 3.4s ease-in-out infinite}
.map-play-bubble::after{content:'';position:absolute;left:43%;bottom:-6px;width:8px;height:8px;background:#fffbed;border-right:2px solid #52634e;border-bottom:2px solid #52634e;border-bottom-right-radius:2px;transform:rotate(45deg)}
@keyframes soki-bubble-float{0%,100%{transform:translate(-50%,-100%) translateY(0)}50%{transform:translate(-50%,-100%) translateY(-3px)}}
.map-play:focus-visible{outline:2px solid #52634e;outline-offset:6px;border-radius:40%}
.header nav .play-nav{display:inline-block;font-size:.875rem;font-weight:600;line-height:1.5;padding:10px 0;border-bottom:2px solid transparent;white-space:nowrap}
.header nav .play-nav:hover{border-color:var(--ink)}
/* A 64px character is the desktop reference: scale the complete bubble with it. */
@media(min-width:701px){
  .map-play{container-type:inline-size}
  .map-play-bubble{top:-.666667em;font-size:18.75cqw;border-width:.25em;border-radius:1.5em 1.75em 1.416667em 1.666667em;padding:.333333em .833333em;animation-name:soki-bubble-float-desktop}
  .map-play-bubble::after{width:.666667em;height:.666667em;border-width:.25em;bottom:-.583333em;border-bottom-right-radius:.166667em}
  @keyframes soki-bubble-float-desktop{0%,100%{transform:translate(-50%,-100%) translateY(0)}50%{transform:translate(-50%,-100%) translateY(-.25em)}}
}
@media(max-width:1000px){.header nav .play-nav{font-size:.8125rem}}
@media(max-width:700px){.map-play-bubble{font-size:10px;top:-5px;padding:4px 8px;border-width:1.8px}.map-play-bubble::after{width:6px;height:6px;bottom:-5px;border-width:1.8px}.header nav .play-nav{padding:12px;font-size:14px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.map-play-bubble{animation:none}}
