/* The pets' page interface (theme/pets/ui.mjs): the name pill on hover, like WorkAdventure's name tags, and the owner's
   menu in the HUD's dark material. Fixed to the viewport and moved by transform only; the pill never takes the pointer. */
.kpet-pill, .kpet-menu {
  position: fixed; left: 0; top: 0; z-index: 2147483000;
  font-family: var(--k-font, 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  -webkit-font-smoothing: antialiased;
}
.kpet-pill {
  padding: 2px 9px 3px; border-radius: 9999px; background: rgba(20, 26, 38, .88); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 18px; letter-spacing: .01em; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 160ms cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 2px 8px rgba(0, 0, 0, .28);
}
.kpet-pill.kpet-on { opacity: 1; }
.kpet-pill[data-named="false"] { color: #d6deea; font-weight: 500; }
.kpet-menu {
  min-width: 168px; max-width: 240px; padding: 6px; border-radius: var(--k-radius-menu, 12px);
  background: var(--k-surface, #03051a); color: var(--k-fg, #f0f5fb); border: 1px solid var(--k-border-subtle, #2d3746);
  box-shadow: var(--k-shadow, 0 8px 32px rgba(0, 0, 0, .32)); opacity: 0;
  transition: opacity 160ms cubic-bezier(.16, 1, .3, 1);
}
.kpet-menu.kpet-on { opacity: 1; }
.kpet-title {
  margin: 2px 8px 6px; font-size: 12px; font-weight: 700; color: var(--k-fg-2, #b4bdcc);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpet-item {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--k-radius-row, 6px);
  background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.kpet-item:hover, .kpet-item:focus-visible { background: var(--k-hover, #1f3349); outline: none; }
.kpet-item:focus-visible { box-shadow: 0 0 0 2px var(--k-accent, #53ffc8) inset; }
.kpet-name { display: grid; gap: 6px; padding: 4px 6px 6px; }
.kpet-label { font-size: 12px; font-weight: 700; color: var(--k-fg-2, #b4bdcc); }
.kpet-input {
  height: 34px; padding: 0 10px; border-radius: var(--k-radius-inner, 8px); border: 1px solid var(--k-border, #3e4858);
  background: var(--k-card, #0e2236); color: var(--k-fg, #f0f5fb); font: inherit; font-size: 14px; font-weight: 600;
}
.kpet-input:focus { outline: none; border-color: var(--k-accent, #53ffc8); box-shadow: 0 0 0 2px rgba(83, 255, 200, .25); }
.kpet-input[aria-invalid="true"] { border-color: var(--k-error, #e8594e); }
.kpet-hint { margin: 0; font-size: 12px; color: var(--k-fg-muted, #98a3b3); }
.kpet-hint.kpet-error { color: var(--k-error, #e8594e); }
.kpet-row { display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; }
.kpet-ghost, .kpet-save {
  height: 32px; padding: 0 12px; border-radius: var(--k-radius-inner, 8px); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; border: 1px solid transparent;
}
.kpet-ghost { background: transparent; color: var(--k-fg-2, #b4bdcc); border-color: var(--k-border, #3e4858); }
.kpet-save { background: var(--k-accent, #53ffc8); color: var(--k-on-accent, #1a1f1e); }
.kpet-ghost:focus-visible, .kpet-save:focus-visible { outline: 2px solid var(--k-accent, #53ffc8); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .kpet-pill, .kpet-menu { transition: none; } }
html.k-leve .kpet-pill, html.k-leve .kpet-menu { transition: none; }