.character-stage {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(300px, 1.25fr);
  align-items: center;
  min-height: 440px;
  margin: 20px 0;
  padding: 30px;
  border: 1px solid #d8e6ee;
  border-radius: 30px;
  background: radial-gradient(circle at 78% 28%, #d9f5ff 0, transparent 33%), linear-gradient(135deg, #fffdf7, #eef8ff);
  box-shadow: 0 18px 45px #193a5214;
}

.character-copy { position: relative; z-index: 2; }
.character-copy h2 { font-size: clamp(1.55rem, 4vw, 2.3rem); line-height: 1.35; margin: 6px 0 12px; }
.character-copy p:last-child { color: #587087; }
.character-stage model-viewer { width: 100%; height: 390px; --poster-color: transparent; }
.character-poster { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.character-poster small { max-width: 260px; color: #61798b; }
.character-orbit { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(145deg, #fff, #dff3ff); box-shadow: 0 14px 35px #3386c833; color: #3386c8; font-size: 2.4rem; animation: float-character 2.6s ease-in-out infinite; }
.character-load-button { padding: 13px 21px; }
.character-load-button:disabled { cursor: wait; opacity: .72; }
.character-status { grid-column: 1 / -1; min-height: 1.7em; margin: 0; text-align: center; color: #4a6b82; font-size: .88rem; }

@keyframes float-character { 50% { transform: translateY(-9px) rotate(8deg); } }

@media (max-width: 700px) {
  .character-stage { display: block; padding: 24px 18px; }
  .character-copy { text-align: center; }
  .character-stage model-viewer { height: 360px; }
  .character-status { margin-top: 4px; }
}