.companion-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
  contain: layout style;
}

.companion-layer[hidden] { display: none; }

.companion-character {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  padding: 0;
  border: 0;
  background: none;
  color: #b9ffff;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  transform-origin: 50% 94%;
}

.companion-character:focus,
.companion-character:focus-visible {
  outline: none;
}

.companion-character[data-dragging="true"] { cursor: grabbing; }
.companion-art {
  position: absolute;
  inset: 0;
  background-image: url('./milo-atlas.png');
  background-size: 400% 300%;
  background-repeat: no-repeat;
  image-rendering: auto;
  transform-origin: 50% 94%;
  pointer-events: none;
}

.companion-face {
  position: absolute;
  left: 31%;
  top: 26%;
  width: 38%;
  height: 21%;
  overflow: visible;
  pointer-events: none;
  color: #b6fffc;
}

.companion-eyes {
  transform-origin: center;
  transition: transform 130ms ease;
}

.companion-face path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.companion-face .companion-mouth { stroke-width: 2.3; }
.companion-face .companion-cheeks {
  stroke: #ada6ef;
  stroke-width: 3;
  opacity: .55;
}
.companion-character[data-expression="cute"] .companion-eyes path {
  fill: currentColor;
  stroke-width: 1.5;
}
.companion-character[data-expression="hearts"] .companion-eyes path,
.companion-character[data-expression="excited"] .companion-eyes path {
  fill: currentColor;
  stroke-width: 1.4;
}

.companion-grapple,
.companion-gun {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.companion-grapple[hidden],
.companion-gun[hidden] { display: none; }
.companion-gun { shape-rendering: crispEdges; }
.companion-hook { shape-rendering: crispEdges; }
.companion-cord-edge,
.companion-cord {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.companion-cord-edge { stroke: #152344; stroke-width: 3; }
.companion-cord { stroke: #8cc6fb; stroke-width: 1.25; }

@media (prefers-reduced-motion: reduce) {
  .companion-eyes { transition: none; }
}