/* Walk mode. Owner: J47. The button sits above Pocket and Sit, Talk to its left; the joystick stays bottom left. */
.walk-btn {
  position: absolute;
  right: calc(env(safe-area-inset-right) + 14px);
  bottom: calc(env(safe-area-inset-bottom) + 104px);
  z-index: 20;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(251, 240, 226, .92);
  box-shadow: 0 0 0 2px rgba(251, 240, 226, .75), 0 6px 18px rgba(74, 63, 74, .16);
  pointer-events: auto;
  cursor: pointer;
  transition: background-color .2s ease;
}
.walk-btn { flex-direction: column; gap: 1px; color: #4a3f4a; font-family: var(--font); }
.walk-btn-word { font-size: 11px; font-weight: 700; line-height: 1; }
.walk-btn:hover { background: #fff6e8; }
.walk-btn[aria-pressed="true"] { background: #ffe9ae; }

.walk-talk {
  position: absolute;
  right: calc(env(safe-area-inset-right) + 82px);
  bottom: calc(env(safe-area-inset-bottom) + 104px);
  z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 84px; min-height: 56px; max-width: 150px;
  padding: 6px 16px;
  border: 0; border-radius: 26px;
  background: #fff4c8;
  color: var(--ink);
  font-family: var(--font);
  box-shadow: 0 0 0 2px #ffd877, 0 6px 18px rgba(74, 63, 74, .18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.walk-talk.show {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
.walk-talk-word { font-size: 18px; font-weight: 700; line-height: 1.1; }
.walk-talk-name {
  font-size: 12px; line-height: 1.2; opacity: .75;
  max-width: 118px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.walk-talk-name:empty { display: none; }

.walk-sparkle {
  position: absolute;
  left: 0; top: 0;
  z-index: 10;
  width: 26px; height: 26px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.walk-sparkle svg {
  display: block;
  filter: drop-shadow(0 0 5px rgba(255, 216, 119, .8));
  animation: walk-twinkle 2.2s ease-in-out infinite;
}
.walk-sparkle.show { opacity: 1; }
.walk-sparkle.calm svg { animation: none; }
@keyframes walk-twinkle {
  0%, 100% { transform: scale(.82) rotate(0deg); opacity: .78; }
  50% { transform: scale(1) rotate(10deg); opacity: 1; }
}

.walk-veil {
  position: absolute; inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}

#ui.title-on .walk-btn, #ui.title-on .walk-talk, #ui.title-on .walk-sparkle { opacity: 0; visibility: hidden; pointer-events: none; }

.walk-btn:focus-visible, .walk-talk:focus-visible { outline: 3px solid #b77a9b; outline-offset: 2px; }

/* Closer and further, for anyone who would rather press a button */
.zoom-pill {
  position: absolute;
  right: calc(env(safe-area-inset-right) + 14px);
  bottom: calc(env(safe-area-inset-bottom) + 176px);
  z-index: 20;
  display: flex; flex-direction: column;
  width: 56px;
  border-radius: 28px;
  background: rgba(251, 240, 226, .92);
  box-shadow: 0 0 0 2px rgba(251, 240, 226, .75), 0 6px 18px rgba(74, 63, 74, .16);
  pointer-events: auto;
  overflow: hidden;
}
.zoom-pill button {
  width: 56px; height: 48px; padding: 0; border: 0; background: none;
  color: var(--ink); font: 700 26px/1 var(--font); cursor: pointer;
}
.zoom-pill button:hover { background: #fff6e8; }

.walk-hint {
  position: absolute;
  left: 50%; top: calc(env(safe-area-inset-top) + 84px);
  transform: translate(-50%, -8px);
  z-index: 25;
  display: none; flex-direction: column; gap: 5px;
  width: min(330px, calc(100vw - 32px));
  padding: 14px 18px;
  border-radius: 20px;
  background: rgba(251, 240, 226, .96);
  box-shadow: 0 8px 24px rgba(74, 63, 74, .18);
  color: var(--ink); font: 500 15px/1.3 var(--font);
  pointer-events: auto;
}
.walk-hint.show { display: flex; transform: translate(-50%, 0); }
.walk-hint b { font-size: 17px; }
.walk-hint button {
  align-self: flex-end; margin-top: 4px; min-height: 40px; padding: 0 18px;
  border: 0; border-radius: 20px; background: #fff4c8; color: var(--ink);
  font: 700 15px/1 var(--font); cursor: pointer;
}