/* Optional atmosphere. Content remains visible before enhancement and with FX off. */
.arena-particles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 34px; padding: 8px 10px; border: 1px solid #424d32; border-radius: 7px; background: #202716d9; color: #d7fa45; font: 600 9px/1 var(--mono); letter-spacing: .045em; white-space: nowrap; cursor: pointer; }
.motion-toggle:hover:not(:disabled) { border-color: #9dab5b; background: #303b1f; }
.motion-toggle-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.motion-toggle[aria-pressed="false"] { background: #171b25d9; border-color: #3b4051; color: #a4aabc; }
.motion-toggle:disabled { cursor: default; }
.login-topbar .login-edition { margin-left: auto; }
.login-topbar .motion-toggle { margin-left: 18px; }
.switch-user-mark { display: none; }

.motion-enabled :is(.lobby-showcase, .arena-modes, .me-profile, .armory-intro, .armory-section-head, .screen-banner, .login-entry) { animation: arena-arrive .7s cubic-bezier(.16, 1, .3, 1) both; }
.motion-enabled :is(.arena-modes, .armory-section-head) { animation-delay: .08s; }
.motion-enabled .me-profile { animation-delay: .14s; }
@keyframes arena-arrive { from { opacity: .25; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

.motion-enabled .promo-card { animation: arena-hover 6s ease-in-out infinite; }
.motion-enabled .promo-card-back { animation-delay: -2.4s; animation-duration: 7.2s; }
@keyframes arena-hover { 0%, 100% { translate: 0 3px; } 50% { translate: 0 -6px; } }
.motion-enabled :is(.hero-tag i, .activity-dot, .login-edition i) { animation: arena-breathe 3.5s ease-in-out infinite; }
@keyframes arena-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.motion-enabled .arena-modes .mode-icon { transition: translate .2s ease; }
.motion-enabled .arena-modes a:hover .mode-icon { translate: 0 -3px; }
.motion-enabled .btn:not(:disabled):active { translate: 0 1px; }

.motion-enabled .operator-card:not(.opening):not(.revealed) { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .22s ease-out, border-color .2s, box-shadow .2s; }
.operator-card::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 30%), #f4ffd726, #cfacff0a 30%, transparent 62%); opacity: 0; transition: opacity .25s ease; }
.motion-enabled .operator-card.is-tilting:not(.opening):not(.revealed)::before { opacity: 1; }
.motion-suspended :is(.promo-card, .hero-tag i, .activity-dot, .login-edition i) { animation-play-state: paused !important; }
@media (max-width: 760px) {
  .motion-toggle { min-height: 32px; padding: 7px; gap: 4px; font-size: 8px; }
  .motion-toggle-dot { width: 4px; height: 4px; }
}
@media (max-width: 600px) { .login-topbar .login-edition { display: none; } }
@media (max-width: 480px) {
  body.hub .topbar-actions { gap: 6px; }
  body.hub .user-pill { display: none; }
  body.hub .switch-user { width: 32px; min-width: 32px; padding: 6px; }
  .switch-user-label { display: none; }
  .switch-user-mark { display: block; font-size: 19px; line-height: 1; }
}
@media (max-width: 380px) { .brand-wordmark { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .arena-particles { display: none; }
  .motion-enabled :is(.lobby-showcase, .arena-modes, .me-profile, .armory-intro, .armory-section-head, .screen-banner, .login-entry, .promo-card, .hero-tag i, .activity-dot, .login-edition i) { animation: none; }
  .motion-enabled .operator-card:not(.opening):not(.revealed) { transform: none; transition: none; }
  .operator-card::before { display: none; }
}