/* The friend approaches the original answer. That exact glyph rests in the hand. */
.hf-roamer-away{visibility:hidden!important;pointer-events:none!important}
.el-game.hf-has-helper{position:relative;isolation:isolate}
.el-game .hf-helper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;margin:0 auto 8px;min-width:0;color:var(--mlw-muted,#596d76);pointer-events:none}
.el-game .hf-tip{width:100%;margin:0!important;font-size:12px;font-weight:650;line-height:1.35;text-align:center}
.hf-transfer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}
.hf-walker{position:absolute;left:0;top:0;display:block;width:var(--hf-width);height:var(--hf-height);transform:scale(1);transition:left .9s linear,top .9s linear,transform .9s linear;will-change:left,top,transform;transform-origin:0 0}
.hf-walker:before{content:"";position:absolute;left:25%;top:90.3%;width:51%;height:5%;border-radius:50%;background:radial-gradient(ellipse,#39434b32 0%,#39434b12 54%,transparent 76%);transform-origin:center;animation:hfGroundContact .32s ease-in-out infinite}
.hf-body,.hf-facing,.hf-figure{position:absolute;inset:0;display:block;transform-origin:50% 91%}.hf-facing{transform:scaleX(var(--hf-face,1))}.hf-figure>svg{display:block;width:100%;height:100%;max-width:none!important;overflow:visible}
.hf-figure>.roam-body{display:block;position:absolute;inset:0;width:100%;height:100%;transform:none!important;animation:none!important}.hf-figure>.roam-body>svg{display:block;width:100%;height:100%;max-width:none!important;overflow:visible}
.hf-figure .jf-native-figure>ellipse:first-child{opacity:0}
.hf-held-object{overflow:visible;pointer-events:none}
/* Only the body turns. Counter-turning the real glyph keeps every letter and
   number readable, including on the walk to the left edge of the picture. */
.hf-token{display:flex;width:100%;height:100%;align-items:center;justify-content:center;transform:scaleX(var(--hf-face,1));transform-origin:center;filter:drop-shadow(0 1px 0 #ffffffbb)}
.hf-held-glyph{display:grid!important;place-items:center!important;flex:none!important;max-width:none!important;min-width:0!important;min-height:0!important;animation:none!important;transform:none!important;opacity:1!important}
/* Other choices paint over the passing friend and remain fully usable. */
.el-answers>button:not(.hf-source-waiting){position:relative;z-index:4}
.hf-has-helper .el-help,.hf-has-helper .el-typing,.hf-has-helper .el-gather,.hf-has-helper .el-actions,.hf-has-helper .el-object{position:relative;z-index:4}
.el-answers>button.hf-source-waiting{pointer-events:none;opacity:1!important;background:#f7f2e780!important;box-shadow:none!important;border-color:#c7c4c780!important}
.el-answers>button.hf-source-empty{visibility:hidden}
.hf-crossing .hf-body,.hf-approaching .hf-body,.hf-walking-away .hf-body,.hf-leaving .hf-body{animation:hfFootsteps .32s ease-in-out infinite}
.hf-crossing .jf-left-foot,.hf-approaching .jf-left-foot,.hf-walking-away .jf-left-foot,.hf-leaving .jf-left-foot{animation:hfLeftStep .32s ease-in-out infinite}
.hf-crossing .jf-right-foot,.hf-approaching .jf-right-foot,.hf-walking-away .jf-right-foot,.hf-leaving .jf-right-foot{animation:hfRightStep .32s ease-in-out infinite}
.hf-walker[data-who="bello"] .jf-left-arm{animation:hfDogStep .32s ease-in-out infinite}
.hf-walker[data-who="bello"] .jf-tail{animation:hfTailWag .45s ease-in-out infinite;transform-origin:102px 102px}
.hf-walker[data-who="bello"] .jf-right-ear,.hf-walker[data-who="bello"] .jf-left-ear{animation:hfEarFollow .32s ease-in-out infinite}
.hf-reaching .hf-body{animation:hfAnticipation .31s ease-out both}
.hf-approaching .jf-eye{translate:1px -.6px}
.hf-picked-up:not(.hf-walking-away) .jf-eye{animation:hfLookDown .35s ease-out both}
.hf-holding .jf-contact-arms{animation:none!important;transform:none!important}
.hf-picked-up:not(.hf-walking-away) .hf-body{animation:hfGentleNod .35s ease-in-out}
.hf-walking-away .hf-walker,.hf-leaving .hf-walker{transition:left 1.15s linear,top 1.15s linear,transform 1.15s linear}
.hf-static .hf-walker{transition:none}
@keyframes hfFootsteps{0%,100%{translate:0 0;rotate:-1deg;scale:1.01 .992}25%{translate:0 -1px;rotate:0;scale:1 .998}50%{translate:0 0;rotate:1deg;scale:1.01 .992}75%{translate:0 -1px;rotate:0;scale:1 .998}}
@keyframes hfLeftStep{0%,100%{transform:translate(-1px,0) rotate(-6deg)}25%{transform:translate(1px,-2px) rotate(10deg)}50%,75%{transform:translate(2px,0) rotate(5deg)}}
@keyframes hfRightStep{0%,100%{transform:translate(2px,0) rotate(5deg)}50%{transform:translate(-1px,0) rotate(-6deg)}75%{transform:translate(1px,-2px) rotate(10deg)}}
@keyframes hfDogStep{0%,100%{transform:translate(1px,0) rotate(3deg)}50%{transform:translate(-1px,-1px) rotate(-4deg)}}
@keyframes hfGroundContact{0%,50%,100%{scale:1 1;opacity:.9}25%,75%{scale:.91 .8;opacity:.7}}
@keyframes hfTailWag{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
@keyframes hfEarFollow{0%,100%{rotate:-2deg}50%{rotate:2deg}}
@keyframes hfAnticipation{0%{rotate:0;scale:1}70%{rotate:3deg;scale:1.015 .985}100%{rotate:0;scale:1}}
@keyframes hfGentleNod{0%{scale:1}45%{scale:1.015 .98;translate:0 1px}100%{scale:1;translate:0 0}}
@keyframes hfLookDown{0%{translate:1px 0}50%{translate:.5px 1px}100%{translate:0 .4px}}
@media(min-width:950px){.el-game.hf-has-helper .hf-helper{grid-column:2;grid-row:5}.el-game.hf-has-helper .el-help{grid-row:6}.el-game.hf-has-helper .el-typing{grid-row:7}}
@media(min-width:1800px){.el-game .hf-tip{font-size:15px}}
@media(max-width:620px){.el-game .hf-tip{font-size:12px}.el-game .hf-helper{margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){.hf-transfer *{animation:none!important;transition:none!important}}
body.motion-off .hf-transfer *{animation:none!important;transition:none!important}
@media print{.hf-helper,.hf-transfer{display:none!important}}