/* People on the map (SPEC-v3.1 B.3): the player figures, their cream name tags, the gold ring on your own,
   the floating emotes, the emote bar, the watching count and the Step into town pill. Loaded after
   styles.css; it only adds classes of its own (.player, .ply, .meply, .emf, kt*) and touches nothing else. */

/* ---- the figure: person-sized, between a visitor and a resident -------------------------------------- */
.actor.player .body { width: 42px; height: 50px; left: -21px; top: -52px; }
.actor.player.walking .body { animation: bob .34s ease-in-out infinite; }
.actor.player.walking.flip .body { animation-name: bobf; }
.actor.meply .fig::before {
  content: ''; position: absolute; left: -20px; top: -9px; width: 40px; height: 15px; border-radius: 50%;
  border: 3px solid var(--gold); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 1.5px var(--ink);
}

/* ---- the cream tag with the little person ------------------------------------------------------------- */
.tag.ply { background: #ffeecb; font-size: 11.5px; gap: 3px; }
.tag.ply .pglyph { width: 10px; height: 10px; flex: none; opacity: .72; }
.tag.ply.meply { box-shadow: 0 0 0 2.5px var(--gold), 0 0 0 4.5px var(--ink); }
.tag.ply.aimed { outline: 3px dashed var(--gold); outline-offset: 2px; }
.tag.ply.mini:not(:hover) .pglyph { display: none; }
.label:has(.tag.meply) { z-index: 3; }

/* ---- emotes float up from the sender and fade; a small copy lands on the target ----------------------- */
.emf { z-index: 5; }
.emotef {
  position: absolute; left: 0; top: -62px; transform: translate(-50%, 0); pointer-events: none;
  font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(42, 27, 46, .45));
  animation: ktfloat 1.2s ease-out forwards;
}
.emotef.small { font-size: 15px; top: -46px; animation-duration: .9s; }
.emotef.still, .emotef.still.small { animation: ktstill 0.9s linear forwards; }
@keyframes ktfloat {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.55); }
  14% { opacity: 1; transform: translate(-50%, -6px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(.95); }
}
@keyframes ktstill { 0% { opacity: .95; } 80% { opacity: .95; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .emotef, .emotef.small { animation: ktstill 0.9s linear forwards; } }

/* ---- HUD: the watching count and the step pill -------------------------------------------------------- */
/* both stay hidden until the server has shown it speaks presence (players.js reveals them) */
#stepBtn[hidden], .ktwatch[hidden] { display: none; }
.ktwatch { color: var(--text); }
#stepBtn { background: var(--gold); color: var(--ink); }
#stepBtn.on { background: var(--card2); color: var(--gold); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* ---- the emote bar, bottom-centre while you are in town ----------------------------------------------- */
/* our display rules out-rank the UA's [hidden] { display: none }, so say it ourselves */
#ktEmoteBar[hidden], #ktPhrases[hidden], #ktEmoteBar .aim[hidden] { display: none; }
#ktEmoteBar {
  position: fixed; bottom: 58px; left: 50%; transform: translateX(-50%); z-index: 45;
  display: flex; align-items: center; gap: 2px; padding: 5px 7px;
  background: var(--bg2); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink);
}
@media (min-width: 761px) { body:not(.panel-closed) #ktEmoteBar { left: calc((100% - var(--panel-w) - var(--gap)) / 2); } }
#ktEmoteBar .emo {
  width: 36px; height: 36px; border-radius: 999px; font-size: 19px; line-height: 1;
  display: grid; place-items: center;
}
#ktEmoteBar .emo:hover { background: var(--card2); }
#ktEmoteBar .emo:active { transform: translateY(1px); }
#ktEmoteBar .emo.talk { border-left: 2px solid var(--line); border-radius: 0 999px 999px 0; padding-left: 4px; margin-left: 3px; width: 40px; }
#ktEmoteBar .aim { display: inline-flex; align-items: center; gap: 3px; margin: 0 4px 0 6px; font: 600 12px var(--display); color: var(--gold); max-width: 150px; }
#ktEmoteBar .aim b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#ktEmoteBar .aim-x { width: 18px; height: 18px; border-radius: 50%; background: var(--card2); color: var(--text); font-size: 12px; line-height: 1; display: grid; place-items: center; }

#ktPhrases {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(2, minmax(104px, 1fr)); gap: 6px; padding: 8px;
  background: var(--bg2); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink);
}
#ktPhrases .ph {
  border: 2px solid var(--ink); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
  font: 600 12.5px var(--display); background: var(--card); color: var(--text); box-shadow: 0 2px 0 var(--ink);
}
#ktPhrases .ph:hover { background: var(--card2); }
#ktPhrases .ph:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }

@media (max-width: 760px) {
  /* On a phone the place chips sit just above the collapsed sheet (bottom: --sheet + 8px, ~25px tall) and the
     Bubbles / Whole town column holds the bottom-right, so the bar docks bottom-LEFT above the chips band:
     clear of the chips, clear of that column, and on a very narrow screen the aim chip wraps instead of
     overflowing. While the sheet is open it covers the map and the chips hide, so the bar yields with them
     rather than floating over the feed. */
  #ktEmoteBar {
    left: var(--gap, 8px); transform: none; bottom: calc(var(--sheet, 46px) + 42px);
    padding: 4px 6px; max-width: calc(100vw - 16px); flex-wrap: wrap;
  }
  body:not(.panel-closed) #ktEmoteBar { display: none; }
  #ktEmoteBar .emo { width: 32px; height: 32px; font-size: 17px; }
  #ktEmoteBar .aim { max-width: 90px; }
}