/* One non-interactive panda paw points at the real control. All sizes are CSS pixels. */
.guidance-status{position:absolute;z-index:12;top:12px;left:50%;transform:translateX(-50%);box-sizing:border-box;width:max-content;max-width:calc(100% - 32px);padding:9px 13px;margin:0;border:1px solid #f5dda0;border-radius:12px;background:#172c2bf2;color:#fff1cd;font:600 14px/1.35 system-ui,sans-serif;text-align:center;white-space:normal;pointer-events:none;box-shadow:0 3px 12px #0005}.guidance-status:empty{display:none}
.interaction{position:relative}
.interaction>.guidance-status{inset:0;transform:none;display:flex;align-items:center;justify-content:center;width:100%;height:100%;max-width:none;max-height:100%;padding:2px 8px;border-radius:8px;font-size:13px;line-height:1.2;box-shadow:none}
.interaction>.guidance-status:empty{display:none}
.interaction.guidance-strip-active>:not(.guidance-status){visibility:hidden}
.paw-guidance{position:relative;overflow:visible!important;outline:2px solid #f5dda0;outline-offset:2px}
.paw-guidance::after{content:"";position:absolute;z-index:8;pointer-events:none;width:30px;height:23px;left:auto;right:2px;top:-5px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='42' viewBox='0 0 56 42'%3E%3Cg stroke='%232f3b36' stroke-width='1.5' fill='%23f6dfab'%3E%3Cellipse cx='22' cy='20' rx='9' ry='7'/%3E%3Cellipse cx='10' cy='12' rx='4' ry='5' transform='rotate(-25 10 12)'/%3E%3Cellipse cx='18' cy='7' rx='4' ry='5'/%3E%3Cellipse cx='27' cy='7' rx='4' ry='5'/%3E%3Cellipse cx='35' cy='12' rx='4' ry='5' transform='rotate(25 35 12)'/%3E%3Cpath d='M42 22v12m-5-5 5 6 5-6' fill='none' stroke='%23f6dfab' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");filter:drop-shadow(0 1px 2px #102e2c);animation:panda-guide-tap 1.8s ease-in-out 3}
.paw-guidance[data-guide-key]:not([data-guide-key=""])::before{content:attr(data-guide-key);position:absolute;z-index:9;left:2px;bottom:2px;top:auto;pointer-events:none;min-width:18px;padding:0 3px;border:1px solid #f5dda0;border-radius:5px;background:#233c37;color:#fff1cd;font:600 11px/16px system-ui,sans-serif;white-space:nowrap}
.paw-guidance[data-guide-motion="move"]::after{animation:panda-guide-move 2s ease-in-out 3}
.paw-guidance[data-guide-motion="hold"]::after{animation:panda-guide-hold 2s ease-in-out 3}
.paw-guidance[data-guide-motion="still"]::after{animation:none}
.guidance-settings{border:1px solid #ddcc9755;border-radius:12px;padding:12px 16px;margin:18px 0;background:#ffffff05}
.guidance-settings label{display:flex;align-items:center;gap:10px;min-height:48px;font-size:14px}.guidance-settings input{width:22px;height:22px}.guidance-settings p{font-size:13px!important;line-height:1.5}.guidance-settings button{min-height:48px}
@keyframes panda-guide-tap{0%,35%,100%{transform:scale(1)}50%,70%{transform:scale(.84)}}
@keyframes panda-guide-move{0%,15%,100%{transform:translateX(-50px)}45%,65%{transform:translateX(-10px)}}
@keyframes panda-guide-hold{0%,15%,100%{transform:scale(1)}30%,80%{transform:scale(.84)}}
@media(prefers-reduced-motion:reduce){.paw-guidance::after{animation:none!important}}
@media(pointer:coarse),(max-width:620px){
 .in-game .play{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
 .in-game .interaction #context{font-size:13px;line-height:1.3}
 .in-game .hud .hud-friend b{font-size:13px!important;line-height:1.3}
 .in-game #objective{font-size:14px;line-height:1.3}
 .in-game .controls button,.in-game #touchControls button{font-size:13px;min-height:48px}
}

.touch-mode.is-playing .interaction #context{font-size:13px;line-height:1.3}.touch-mode.is-playing .interaction{flex-basis:44px;height:44px;min-height:44px}.touch-mode.is-playing #objective{font-size:17px;line-height:1.25}
@media(orientation:landscape) and (max-height:650px){.touch-mode.is-playing #play{grid-template-rows:54px minmax(0,1fr) 44px}.touch-mode.is-playing .interaction{height:44px;min-height:44px}}