/* 人物全息舱：环绕、磁吸装配、三色点亮与微电流。 */
.mecha-field {
  isolation: isolate;
  overflow: hidden;
  border-radius: 15px;
  background: radial-gradient(ellipse at 50% 45%, #f8fcff 0, #e5eff6 62%, #dbe8f1 100%);
}
.mecha-field .mecha-master {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.mecha-field:after { display: none; }
.holo-ring {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 0;
  width: 82%;
  height: 72%;
  border: 1px solid rgba(70, 157, 202, .24);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-7deg);
  box-shadow: inset 0 0 22px rgba(88, 190, 229, .05), 0 0 16px rgba(88, 190, 229, .05);
  animation: holoBreath 6s ease-in-out infinite;
}
.holo-ring.ring-b {
  width: 69%;
  height: 84%;
  border-style: dashed;
  border-color: rgba(161, 123, 50, .17);
  transform: translate(-50%, -50%) rotate(12deg);
  animation-delay: -3s;
}
.mecha-field.assembling .holo-ring,
.mecha-field.assembled .holo-ring { opacity: 0; animation: none; }
.part {
  --depth-scale: 1;
  --depth-opacity: 1;
  z-index: 3;
  width: 100px;
  padding: 4px 5px 5px;
  border: 1px solid rgba(102, 175, 208, .44);
  border-radius: 12px;
  background: rgba(242, 250, 255, .68);
  box-shadow: 0 5px 20px rgba(30, 94, 133, .10), inset 0 0 12px rgba(255, 255, 255, .7);
  backdrop-filter: blur(4px);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  animation: stationaryFloat 5.2s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  transition: border-color .18s, background .18s, box-shadow .18s;
  will-change: transform;
}
.part:hover {
  border-color: rgba(47, 158, 207, .85);
  background: rgba(249, 253, 255, .90);
  box-shadow: 0 7px 24px rgba(40, 145, 193, .23), inset 0 0 14px #fff;
}
.part img { height: 60px; filter: drop-shadow(0 4px 5px rgba(21, 59, 88, .16)); }
.part span { font-size: 9px; }
.part small { font-size: 7px; }
.part.selected {
  border-color: var(--gold);
  background: rgba(255, 253, 247, .88);
  box-shadow: 0 0 0 2px rgba(184, 147, 63, .12), 0 7px 24px rgba(161, 123, 50, .22);
  animation: stationaryFloat 5.2s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}
.part.selected:after {
  content: "已锁定";
  padding: 1px 4px;
  background: #9a7732;
  font-size: 6px;
}
.part.blocked { filter: saturate(.48); opacity: calc(var(--depth-opacity, 1) * .55); }
.mecha-field.starting .part.selected { animation: none; }
.mecha-field.assembled .part,
.mecha-field.assembled .part.selected { opacity: 0; pointer-events: none; animation: none; }
.neural-grid,
.electric-system {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.neural-grid { z-index: 4; opacity: 0; }
.neural-path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 18;
  filter: drop-shadow(0 0 4px currentColor);
}
.neural-path.blue { stroke: #66d9ff; color: #66d9ff; }
.neural-path.green { stroke: #72e4b3; color: #72e4b3; }
.neural-path.violet { stroke: #c5a3ff; color: #c5a3ff; }
.mecha-field.starting .neural-grid { opacity: .85; }
.mecha-field.starting .neural-path { animation: converge var(--startup, 3.2s) ease-in-out 1; }
.scan-beam {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  z-index: 6;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #79ddff 23%, #d5f8ff 50%, #a88aff 77%, transparent);
  box-shadow: 0 0 12px #6ed8ff, 0 5px 20px rgba(103, 213, 255, .45);
}
.mecha-field.starting .scan-beam { animation: scanBeam var(--startup, 3.2s) ease-in-out 1; }
.mecha-field.starting .mecha-master { animation: personaCharge var(--startup, 3.2s) ease-in-out 1; }
.ability-burst { z-index: 7; }
.visor-system { display: none; }
.mecha-field.assembled .visor-system { opacity: 1; }
.visor-halo {
  position: absolute;
  left: 48.5%;
  top: 10.5%;
  width: 7%;
  height: 8%;
  border-radius: 50%;
  background: conic-gradient(from 30deg, rgba(70, 206, 255, .65), rgba(101, 237, 180, .55), rgba(189, 142, 255, .68), rgba(70, 206, 255, .65));
  filter: blur(5px);
  mix-blend-mode: screen;
  animation: visorBreath 5s ease-in-out infinite;
}
.visor-light {
  position: absolute;
  top: 14.2%;
  width: .55%;
  height: 2.2%;
  border-radius: 99px;
  opacity: .88;
  mix-blend-mode: screen;
  animation: visorLight 4.8s ease-in-out infinite;
}
.visor-light.blue { left: 50.0%; background: #8eeaff; box-shadow: 0 0 5px 2px #42cfff; }
.visor-light.green { left: 50.8%; background: #a1f7ce; box-shadow: 0 0 5px 2px #56dca2; }
.visor-light.violet { left: 51.6%; background: #e0c4ff; box-shadow: 0 0 5px 2px #b07aeb; }
.electric-system { display: none; }
.mecha-field.assembled .electric-system { opacity: 1; }
.current-path {
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3 26;
  filter: drop-shadow(0 0 3px currentColor);
  animation: currentFlow 6s linear infinite, currentPulse 8s ease-in-out infinite;
}
.current-path.blue { stroke: #83e5ff; color: #62d8ff; }
.current-path.green { stroke: #8ce7bd; color: #62d8a0; animation-delay: -2.2s; }
.current-path.violet { stroke: #c8a9f3; color: #b18ae4; animation-delay: -4.6s; }
.core-pulse {
  position: absolute;
  left: 48.3%;
  top: 25.2%;
  z-index: 5;
  width: 3.6%;
  aspect-ratio: 1;
  border: 1px solid rgba(133, 231, 255, .7);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(96, 216, 255, .35), inset 0 0 8px rgba(96, 216, 255, .25);
}
.mecha-field.assembled .core-pulse { animation: coreBreathe 4.6s ease-in-out infinite; }
@keyframes holoBreath {
  0%, 100% { opacity: .45; filter: brightness(.95); }
  50% { opacity: .9; filter: brightness(1.12); }
}
@keyframes converge {
  0%, 12% { stroke-dashoffset: 160; opacity: 0; }
  35% { opacity: .9; }
  76% { stroke-dashoffset: 0; opacity: .75; }
  100% { stroke-dashoffset: -80; opacity: 0; }
}
@keyframes scanBeam {
  0%, 8% { top: 5%; opacity: 0; }
  20% { opacity: .9; }
  70% { top: 91%; opacity: .8; }
  88%, 100% { top: 96%; opacity: 0; }
}
@keyframes personaCharge {
  0%, 100% { filter: none; }
  48% { filter: brightness(1.08) saturate(1.08); }
}
@keyframes stationaryFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(-2px) scale(1); }
  50% { transform: translate(-50%, -50%) translateY(3px) scale(1); }
}
@keyframes visorBreath {
  0%, 100% { opacity: .28; transform: scale(.94); }
  50% { opacity: .58; transform: scale(1.08); }
}
@keyframes visorLight {
  0%, 100% { opacity: .65; filter: brightness(.9); }
  50% { opacity: 1; filter: brightness(1.3); }
}
@keyframes currentFlow { to { stroke-dashoffset: -180; } }
@keyframes currentPulse {
  0%, 100% { opacity: .12; }
  42%, 55% { opacity: .68; }
  70% { opacity: .24; }
}
@keyframes coreBreathe {
  0%, 100% { opacity: .18; transform: scale(.86); }
  50% { opacity: .75; transform: scale(1.18); }
}
@media (max-width: 720px) {
  .mecha-field { display: block; aspect-ratio: 4 / 5; }
  .mecha-field .mecha-master { object-fit: cover; }
  .suit-piece { height: 100%; aspect-ratio: auto; object-fit: cover; }
  .part {
    position: absolute;
    width: 72px;
    padding: 2px 3px 3px;
    transform: translate(-50%, -50%) scale(1);
    animation: stationaryFloat 5.2s ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
  }
  .part img { height: 40px; }
  .part span { font-size: 8px; }
  .part small { display: none; }
  .part.selected:after { font-size: 5px; right: 1px; top: 1px; }
  .mecha-field.starting .part.selected { animation: none; }
  .mecha-field.assembled .part.selected { animation: none; opacity: 0; }
  .holo-ring { width: 90%; height: 66%; }
  .holo-ring.ring-b { width: 76%; height: 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .holo-ring, .part, .neural-path, .scan-beam, .visor-halo, .visor-light, .current-path, .core-pulse {
    animation: none !important;
  }
  .mecha-field.assembled .core-pulse { opacity: .45; }
  .mecha-field.assembled .electric-system { opacity: .45; }
}