@media (max-width: 1100px) {
  .echo-hero { grid-template-columns: minmax(0, 1fr); }
  .echo-copy, .echo-fan, .echo-bar { min-width: 0; width: 100%; }
}
@media (max-width: 480px) {
  .echo-title { font-size: clamp(30px, 9vw, 40px); overflow-wrap: normal; }
  .echo-realm { flex-wrap: wrap; }
  .echo-realm-info { flex: 1; min-width: 0; }
  .echo-realm-status { margin-left: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .echo-fan.fan-waiting .fan-card,
  .echo-fan.fan-opening .fan-card { transition: none; }
  .echo-fan.fan-waiting .fan-card { opacity: 0; }
  .echo-fan.fan-opening .fan-card {
    opacity: 0;
    animation: fan-unfold 650ms cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: 1200ms;
    pointer-events: none;
  }
  .echo-fan.fan-opening .fan-2,
  .echo-fan.fan-opening .fan-4 { animation-delay: 550ms; }
  .echo-fan.fan-opening .fan-3 {
    animation: fan-center 550ms cubic-bezier(.22, 1, .36, 1) both;
  }
  .fan-1 { --fan-left: 0%; --fan-opacity: .75; }
  .fan-2 { --fan-left: 16.8%; --fan-opacity: .88; }
  .fan-4 { --fan-left: 56.5%; --fan-opacity: .88; }
  .fan-5 { --fan-left: 73%; --fan-opacity: .75; }
  .echo-fan.fan-waiting .echo-fan-caption { opacity: 0; }
  .echo-fan.fan-opening .echo-fan-caption { animation: fan-caption 450ms ease 1550ms both; }
}
@keyframes fan-center {
  from { opacity: 0; transform: translateY(22px) scale(.94); }
  to { opacity: 1; transform: rotate(var(--r)) translateY(var(--y)); }
}
@keyframes fan-unfold {
  from { left: 37.45%; opacity: 1; transform: rotate(0deg) translateY(-14px); }
  to { left: var(--fan-left); opacity: var(--fan-opacity); transform: rotate(var(--r)) translateY(var(--y)); }
}
@keyframes fan-caption {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}