.orb-companion {
  --pet-cape-light: #5b3898;
  --pet-cape-mid: #17246d;
  --pet-cape-dark: #442882;
  --pet-cape-fold: #8462bd;
  --pet-hat-light: #6545a6;
  --pet-hat-mid: #172275;
  --pet-hat-dark: #382680;
  --pet-hat-band: #31235e;
  --pet-brim-light: #8870c6;
  --pet-brim-mid: #43318a;
  --pet-brim-dark: #17194e;
  --pet-shell-light: #a6d0ff;
  --pet-shell-mid: #5889fa;
  --pet-shell-dark: #3154c6;
  --pet-arm: #5e88f2;
  --pet-foot: #4268dc;
  --pet-outline: #1b2d77;
  --pet-face: #101938;
  --pet-face-edge: #273889;
  --pet-eye: #b8fbff;
  --pet-crystal-light: #fff6c9;
  --pet-crystal-mid: #86eaff;
  --pet-crystal-dark: #7557d4;
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 52%;
  width: clamp(86px, 11vw, 146px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: left 1.1s cubic-bezier(.22,.68,.22,1), top 1.1s cubic-bezier(.22,.68,.22,1), width 1.1s ease;
  pointer-events: none;
  filter: drop-shadow(0 12px 18px #0009) drop-shadow(0 0 20px #3a91ff55);
}

.journey-orb .orb-companion {
  top: 53%;
  width: clamp(88px, 12vw, 132px);
}

.fortune-avatar-stage.has-lessons .orb-companion {
  z-index: 2;
  left: 50%;
  top: 64%;
  width: clamp(98px, 10vw, 130px);
}

#fortuneView.voice-first.is-preparing:has(#tarotArea:not(.hidden), #handUploadArea:not(.hidden)) .orb-companion {
  top: 17%;
  width: clamp(82px, 9vw, 112px);
}

.fortune-avatar-stage.has-lessons .orb-companion-foot--left {
  animation: companion-step .26s ease-in-out 4 alternate;
}
.fortune-avatar-stage.has-lessons .orb-companion-foot--right {
  animation: companion-step .26s ease-in-out .13s 4 alternate-reverse;
}

.orb-companion-sprite {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
  animation: companion-float 3.6s ease-in-out infinite;
}
.companion-eyes {
  transform-origin: center 98px;
  animation: companion-svg-blink 6s ease-in-out infinite;
}
.companion-mouth-open { opacity: 0; }
.fortune-avatar-stage.is-speaking .companion-mouth-smile {
  animation: companion-mouth-smile .42s steps(1, end) infinite;
}
.fortune-avatar-stage.is-speaking .companion-mouth-open {
  animation: companion-mouth-open .42s steps(1, end) infinite;
}
.fortune-avatar-stage.is-thinking .companion-cloak {
  animation: companion-cloak-sway 1.7s ease-in-out infinite alternate;
}
@keyframes companion-svg-blink { 0%, 44%, 47%, 100% { transform: scaleY(1); } 45%, 46% { transform: scaleY(.12); } }
@keyframes companion-mouth-smile { 0%, 44%, 100% { opacity: 1; } 45%, 85% { opacity: 0; } }
@keyframes companion-mouth-open { 0%, 44%, 100% { opacity: 0; } 45%, 85% { opacity: 1; } }
@keyframes companion-cloak-sway { to { transform: rotate(2deg); transform-origin: 100px 132px; } }

.orb-companion-sprite span,
.orb-companion-sprite i { position: absolute; display: block; box-sizing: border-box; }
.orb-companion-glow {
  inset: 15%;
  border-radius: 50%;
  background: #4a97ff55;
  filter: blur(22px);
}
.orb-companion-cape {
  z-index: 1;
  top: 57%; left: 18%; width: 64%; height: 39%;
  border-radius: 42% 42% 22% 22%;
  background: #17195e;
}
.orb-companion-cape::before,
.orb-companion-cape::after {
  content: "";
  position: absolute;
  top: 3%; width: 62%; height: 105%;
  border: 2px solid #eebf70;
  background: radial-gradient(circle at 52% 38%, #f6cc74 0 1px, transparent 2px),
    linear-gradient(155deg, #553ca1, #1b206a 65%, #403092);
  background-size: 23px 29px, auto;
  box-shadow: inset 0 -5px #ad71ae, 0 5px 9px #10164088;
}
.orb-companion-cape::before {
  left: -25%;
  border-radius: 75% 10% 40% 70%;
  transform: rotate(10deg);
}
.orb-companion-cape::after {
  right: -25%;
  border-radius: 10% 75% 70% 40%;
  transform: rotate(-10deg);
}
.orb-companion-hood {
  z-index: 4;
  top: -21%; left: 7%; width: 86%; height: 38%;
}
.orb-companion-hood::before {
  content: "";
  position: absolute;
  inset: 0 5% 4%;
  background: radial-gradient(circle at 20% 70%, #ffdf87 0 2px, transparent 3px),
    radial-gradient(circle at 78% 62%, #ffdf87 0 1px, transparent 2px),
    linear-gradient(140deg, #6952b9, #182478 55%, #372789);
  background-size: 26px 23px, 19px 27px, auto;
  clip-path: polygon(50% 0, 61% 17%, 79% 48%, 100% 100%, 0 100%, 21% 48%, 39% 17%);
  filter: drop-shadow(0 4px 5px #0d145477);
}
.orb-companion-hood::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 15%;
  border: 2px solid #f4c875;
  border-radius: 50%;
  background: linear-gradient(#6a4bb4, #262276);
  box-shadow: 0 3px 5px #0d145477;
}
.orb-companion-moon {
  z-index: 1;
  top: 39%; left: 44%; width: 12%; height: 24%;
  border-radius: 50%;
  box-shadow: -4px 1px 0 1px #f8d784;
  transform: rotate(-27deg);
}
.orb-companion-head {
  z-index: 3;
  top: 4%; left: 12%; width: 76%; height: 64%;
  border: 3px solid #091b4b;
  border-radius: 36% 38% 31% 33%;
  background: linear-gradient(140deg, #83bdff 4%, #477cf0 51%, #2645bb 100%);
  box-shadow: inset 7px 5px #b0daff55, inset -6px -7px #071e8f77, 0 0 0 3px #5597ff44;
  image-rendering: pixelated;
}
.orb-companion-head::before,
.orb-companion-head::after {
  content: ""; position: absolute; top: 10%; width: 19%; height: 36%;
  border-radius: 35%; background: #4779ee; border: 2px solid #12276c;
}
.orb-companion-head::before { left: -14%; transform: rotate(-12deg); }
.orb-companion-head::after { right: -14%; transform: rotate(12deg); }
.orb-companion-face {
  inset: 22% 15% 18%; border: 3px solid #13235e;
  border-radius: 24%; background: #101b3c;
  box-shadow: inset 0 4px 9px #050b26;
}
.orb-companion-face::before,
.orb-companion-face::after {
  content: "";
  position: absolute;
  top: 62%;
  width: 17%;
  height: 8%;
  border-radius: 50%;
  background: #ff9fc3;
  opacity: .55;
  filter: blur(2px);
}
.orb-companion-face::before { left: 8%; }
.orb-companion-face::after { right: 8%; }
.orb-companion-eye {
  top: 30%; width: 25%; height: 21%;
  border: 3px solid #aefaff;
  border-bottom: 0;
  border-radius: 60% 60% 0 0 / 100% 100% 0 0;
  background: transparent;
  filter: drop-shadow(0 0 4px #52eaff);
  animation: companion-blink 6s ease-in-out infinite;
}
.orb-companion-eye::after {
  content: "";
  position: absolute;
  top: -3px; left: 25%; width: 30%; height: 3px;
  border-radius: 50%; background: #fff;
}
.orb-companion-eye:first-child { left: 14%; transform: rotate(-6deg); }
.orb-companion-eye:nth-child(2) { right: 14%; transform: rotate(6deg); }
.orb-companion-mouth {
  bottom: 18%; left: 40%; width: 20%; height: 15%;
  border-bottom: 3px solid #a9faff;
  border-radius: 0 0 50% 50%;
  filter: drop-shadow(0 0 3px #52eaff);
}
.orb-companion-body {
  z-index: 2; top: 63%; left: 30%; width: 40%; height: 27%;
  border: 3px solid #13266d; border-radius: 27% 27% 36% 36%;
  background: linear-gradient(130deg, #739eff, #3c62df);
  box-shadow: inset -5px -4px #2039a6;
}
.orb-companion-sigil {
  top: 29%; left: 37%; width: 26%; height: 25%;
  border: 2px solid #b1f8ff; border-left: 0; border-radius: 0 50% 50% 0;
  filter: drop-shadow(0 0 4px #8afaff);
}
.orb-companion-clasp {
  z-index: 5;
  top: 65%; left: 44%; width: 12%; height: 12%;
  border: 2px solid #f9d88e;
  border-radius: 50%;
  background: radial-gradient(circle, #f7f1a3 0 18%, #284bb3 24% 65%, #d9a84b 70%);
  box-shadow: 0 0 8px #f9d88eaa;
}
.orb-companion-arm {
  z-index: 1; top: 67%; width: 15%; height: 21%;
  border: 3px solid #142565; border-radius: 40%;
  background: #426feb; transform-origin: top center;
}
.orb-companion-arm--left { left: 21%; transform: rotate(22deg); }
.orb-companion-arm--right { right: 21%; transform: rotate(-22deg); }
.orb-companion-foot {
  top: 85%; width: 16%; height: 12%; z-index: 1;
  border: 3px solid #142565; border-radius: 24% 24% 35% 35%;
  background: #3f67e2;
}
.orb-companion-foot--left { left: 33%; }
.orb-companion-foot--right { right: 33%; }
.orb-companion-crystal {
  z-index: 6;
  top: 56%; left: -6%; width: 38%; height: 38%;
  border: 2px solid #f8d89a;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 25%, #fff 0 7%, transparent 13%),
    radial-gradient(circle at 60% 60%, #e7b7ff, #7edcff 48%, #7156d9 78%);
  box-shadow: inset -4px -6px 9px #3b319788, 0 0 12px #84eaffbb;
}
.orb-companion-crystal::after {
  content: "✦";
  position: absolute;
  top: 22%; left: 33%;
  color: #fff4b7;
  font-size: clamp(17px, 2.5vw, 32px);
  text-shadow: 0 0 7px #fff;
}

.fortune-avatar-stage.is-listening .orb-companion-sprite { animation-duration: 2.3s; }
.fortune-avatar-stage.is-listening .orb-companion-eye { background: transparent; }
.fortune-avatar-stage.is-thinking .orb-companion-sprite { animation: companion-think 1.7s ease-in-out infinite; }
.fortune-avatar-stage.is-thinking .orb-companion-glow { background: #74caff88; }
.fortune-avatar-stage.is-speaking .orb-companion-sprite { animation: companion-talk .48s ease-in-out infinite alternate; }
.fortune-avatar-stage.is-speaking .orb-companion-mouth {
  bottom: 13%; left: 42%; width: 16%; height: 19%;
  border: 2px solid #a9faff; border-radius: 45%; background: #182c5d;
  animation: companion-mouth .24s steps(2, end) infinite alternate;
}
.fortune-avatar-stage.is-speaking .orb-companion-arm--left { animation: companion-wave .7s ease-in-out infinite alternate; }
.fortune-avatar-stage.is-speaking .orb-companion-arm--right { animation: companion-wave .7s ease-in-out -.35s infinite alternate-reverse; }

@keyframes companion-float { 50% { transform: translateY(-6%); } }
@keyframes companion-think { 50% { transform: translateY(-4%) rotate(5deg); } }
@keyframes companion-talk { to { transform: translateY(-4%) scale(1.035); } }
@keyframes companion-mouth { to { height: 9%; bottom: 18%; } }
@keyframes companion-wave { to { transform: rotate(40deg); } }
@keyframes companion-step { to { transform: translateY(-27%) rotate(12deg); } }
@keyframes companion-blink { 0%, 44%, 47%, 100% { scale: 1; } 45%, 46% { scale: 1 .2; } }

@media (max-width: 700px) {
  .orb-companion { top: 48%; width: clamp(76px, 24vw, 112px); }
  .journey-orb .orb-companion { top: 54%; width: clamp(72px, 22vw, 100px); }
  .fortune-avatar-stage.has-lessons .orb-companion { left: 50%; top: 71%; width: 88px; }
  #fortuneView.voice-first.is-preparing:has(#tarotArea:not(.hidden), #handUploadArea:not(.hidden)) .orb-companion {
    top: 12%; width: 72px;
  }
}
@media (max-height: 600px) {
  .fortune-avatar-stage.has-lessons .orb-companion { left: 50%; top: 70%; width: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .orb-companion { transition: none !important; }
  .orb-companion-sprite, .companion-eyes, .companion-mouth-smile, .companion-mouth-open, .companion-cloak { animation: none !important; }
}