/* The familiar uses a narrow strip above, never over, the footer lettering. */
.familiar {
  position: fixed;
  inset: auto 0 40px;
  height: 74px;
  z-index: 8;
  pointer-events: none;
  color: #9fe4df;
  transition: bottom 0.25s ease;
}
html.term-open .familiar {
  bottom: min(46vh, 420px);
  bottom: min(46dvh, 420px);
  z-index: 55;
}
html.egg-playing .familiar {
  transition: none;
}
@media (max-width: 767px) {
  html.term-open .familiar {
    bottom: 58vh;
    bottom: 58dvh;
  }
}
.familiar[hidden] { display: none; }
.familiar__pet {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  border-radius: 16px;
}
.familiar__pet:focus-visible { outline: 2px solid #d2fdff; outline-offset: 3px; }
.familiar__pet svg { display: block; width: 80px; height: 62px; }
.familiar__shell { fill: #122a37; stroke: currentColor; stroke-width: 2; }
.familiar__seam { fill: none; stroke: #3a6474; stroke-width: 1.5; }
.familiar__eye { fill: #70ddd4; stroke: #d2fdff; stroke-width: 1; }
.familiar__shine { fill: #f0ffff; }
.familiar__legs { opacity: 0.9; }
.familiar__legs-a, .familiar__legs-b { transform-origin: 40px 40px; }
.familiar__pet.is-walking svg { animation: familiar-bob 0.48s ease-in-out infinite alternate; }
.familiar__pet.is-facing-left.is-walking svg { animation: familiar-bob-left 0.48s ease-in-out infinite alternate; }
.familiar__pet.is-walking .familiar__legs-a { animation: familiar-stride 0.24s ease-in-out infinite alternate; }
.familiar__pet.is-walking .familiar__legs-b { animation: familiar-stride 0.24s ease-in-out -0.24s infinite alternate; }
.familiar__pet.is-facing-left svg { transform: scaleX(-1); }
.familiar__pet.is-petted .familiar__eye { fill: #ffd27a; }
@keyframes familiar-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-2.5px); }
}
@keyframes familiar-bob-left {
  from { transform: scaleX(-1) translateY(0); }
  to { transform: scaleX(-1) translateY(-2.5px); }
}
@keyframes familiar-stride {
  from { transform: translateY(-1.8px); }
  to { transform: translateY(1.8px); }
}
.familiar__rune { position: absolute; top: -5px; right: 3px; opacity: 0; font-size: 18px; color: #efd091; transition: opacity 0.2s ease; }
.familiar.has-rune .familiar__rune { opacity: 1; }
.familiar__bubble {
  position: absolute;
  left: 16px;
  right: auto;
  bottom: 68px;
  max-width: min(260px, calc(100vw - 32px));
  padding: 4px 8px;
  background: rgba(6, 16, 25, 0.92);
  border: 1px solid rgba(112, 221, 212, 0.35);
  border-radius: 4px;
  color: #b7dedf;
  font: 10px/1.5 ui-monospace, monospace;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(2, 6, 13, 0.75);
}
.familiar__bubble:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .familiar { transition: none; }
  .familiar__pet { transform: translateX(24px) !important; }
  .familiar__pet.is-walking svg,
  .familiar__pet.is-facing-left.is-walking svg,
  .familiar__pet.is-walking .familiar__legs-a,
  .familiar__pet.is-walking .familiar__legs-b { animation: none; }
}