#agenp-stage { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.agen { position: absolute; left: 0; top: 0; width: 136px; height: 186px; pointer-events: auto; cursor: pointer; }
.agen .limbs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.agen .limbs .draw {
  fill: none;
  stroke: var(--limb);
  stroke-width: 7.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.agen .limbs .shoe { fill: #f6f7fb; }
.agen .limbs .sole { fill: var(--shoe); }
.agen .head { position: absolute; left: 22px; top: 2px; width: 92px; height: 92px; z-index: 3; }
.agen .head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.agen .head .shut { opacity: 0; }
.agen .shadow { position: absolute; left: 34px; bottom: 6px; width: 68px; height: 10px; background: radial-gradient(ellipse, rgba(0,0,0,.38), transparent 70%); z-index: 0; }
.visual.agenp { height: 148px; overflow: hidden; margin: 6px 0 0; }
.visual.agenp img { width: 124px; height: 124px; max-width: 124px; max-height: 124px; }
.card.c5 { --glow: rgba(155,108,255,.34); --accent: #9b6cff; }
.dock {
  position: fixed;
  z-index: 80;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.dock .sw {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  background: rgba(10, 14, 22, .82);
  border: 1px solid rgba(255,255,255,.14);
  color: #f3f6fa;
  font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.dock .sw input { position: absolute; opacity: 0; pointer-events: none; }
.dock .knob {
  width: 34px; height: 20px; border-radius: 999px; background: #2a3142; position: relative; flex: none;
}
.dock .knob i {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .2s ease;
}
.dock .sw input:checked + .knob { background: #1aa37a; }
.dock .sw input:checked + .knob i { transform: translateX(14px); }
.dock .pick {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 999px;
  background: rgba(10, 14, 22, .82);
  border: 1px solid rgba(255,255,255,.14);
  color: #f3f6fa;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.dock .step {
  width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer;
  background: #2a3142; color: #fff; font: 700 16px/1 -apple-system, sans-serif;
}
.dock #agenCount { min-width: 10px; text-align: center; font-size: 13px; }
.dock .dots { display: flex; gap: 4px; }
.dock .swatch {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
  background: var(--c); opacity: .35;
}
.dock .swatch.on { opacity: 1; border-color: #fff; }
@media (max-width: 700px) {
  .dock { flex-wrap: wrap; max-width: calc(100vw - 16px); justify-content: flex-end; }
  .agen { width: 78px; height: 108px; }
  .agen .head { left: 12px; top: 1px; width: 54px; height: 54px; }
  .visual.agenp { height: 116px; }
  .visual.agenp img { width: 100px; height: 100px; max-width: 100px; max-height: 100px; }
}