/* Pocket pet (tama.js). The egg itself is a Blender sprite pair (img/o-tama, img/night/o-tama); everything here sits on it: LCD canvas + three hit areas. */
.obj.o-tama { cursor: grab; }
.obj.o-tama:active { cursor: grabbing; }
.obj.o-tama .cut.tm-n { opacity: 0; transition: opacity 1s ease-in-out; }
html.dark .obj.o-tama .cut.tm-n { opacity: 1; }
.obj.o-tama .tm-ui { position: absolute; inset: 0; display: block; }
.obj.o-tama .tm-lcd {
  position: absolute; display: block; image-rendering: pixelated; image-rendering: crisp-edges; mix-blend-mode: multiply; pointer-events: none;
  transform-origin: 50% 50%; opacity: .92;
}
html.dark .obj.o-tama .tm-lcd { opacity: .7; }
/* the three buttons: invisible padded hit areas over the rendered caps; a soft ring and a press-in show state */
.obj.o-tama .tm-b {
  position: absolute; display: block; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; font: inherit; color: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; transform-origin: 50% 50%;
  transition: transform .18s cubic-bezier(.3, 1.7, .5, 1);
}
.obj.o-tama .tm-b::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 10px 2px rgba(120, 90, 200, .45);
  transition: opacity .2s cubic-bezier(.16, 1, .3, 1);
}
.obj.o-tama .tm-b:hover::before { opacity: .7; }
.obj.o-tama .tm-b:focus-visible::before { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4b3ba8, 0 0 12px 3px rgba(120, 90, 200, .6); }
.obj.o-tama .tm-b:hover { transform: translateY(-1px) scale(1.06); }
.obj.o-tama .tm-b:active { transform: translateY(1px) scale(.9); transition-duration: .08s; }
.obj.o-tama .tm-b:active::before { opacity: 1; }
.obj.o-tama.tm-wake .lift { animation: tm-wake .62s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes tm-wake {
  0% { transform: none; } 22% { transform: translateY(-9px) scale(1.04) rotate(-2deg); } 48% { transform: translateY(1px) scale(.99) rotate(1.5deg); }
  72% { transform: translateY(-3px) scale(1.012) rotate(-.7deg); } 100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .obj.o-tama.tm-wake .lift { animation: none; }
  .obj.o-tama .tm-b, .obj.o-tama .tm-b::before { transition: none; }
}