/* RXIE COMPONENT — appearance and animation */
.rxie {
  position: fixed;
  z-index: 18;
  left: 20px;
  top: auto;
  bottom: 32px;
  width: clamp(112px, 10vw, 148px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  filter: drop-shadow(0 20px 18px var(--rx-c-0-0-0-320));
  transition:
    left var(--rxie-travel-time, 3.8s) cubic-bezier(.45, .05, .55, .95),
    top var(--rxie-travel-time, 3.8s) cubic-bezier(.45, .05, .55, .95),
    opacity .35s ease,
    transform .35s cubic-bezier(.2, .9, .25, 1.25),
    filter .35s ease;
  transform-origin: 50% 100%;
  user-select: none;
  touch-action: none;
}

.rxie:focus-visible { outline: 3px solid var(--rx-c-56-225-207-1000); outline-offset: 4px; border-radius: 50%; }
.rxie:active { cursor: grabbing; }
.rxie.dragging { transition: none; }

.rxie.rxie-cycle-hidden {
  visibility: hidden;
  opacity: 0;
  transform: translateY(18px) scale(.82);
  pointer-events: none;
}

.rxie.rxie-save-celebration {
  z-index: 30;
  transform: scale(1.55);
  filter:
    drop-shadow(0 24px 22px var(--rx-c-0-0-0-380))
    drop-shadow(0 0 24px var(--rx-c-183-255-47-720));
}

.rxie canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.rxie-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.rxie.is-ready .rxie-fallback { display: none; }

/* Forge keeps every visible accent in the same fire/industrial family,
   including the mascot's normally cool blue and violet surfaces. */
html[data-theme="forge"] .rxie :is(canvas, .rxie-fallback) {
  filter: sepia(.88) saturate(1.85) hue-rotate(338deg) contrast(1.08);
}

.rxie-loading {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  color: var(--rx-c-157-165-198-1000);
  font-size: 11px;
  white-space: nowrap;
}

.rxie.is-ready .rxie-loading {
  display: none;
}

.rxie-menu {
  position: fixed;
  z-index: 19;
  display: none;
  width: 226px;
  padding: 10px;
  border: 1px solid var(--rx-c-255-255-255-100);
  border-radius: 17px;
  background: var(--rx-c-18-21-48-960);
  box-shadow: 0 22px 70px var(--rx-c-0-0-0-420);
  backdrop-filter: blur(18px);
}

.rxie-menu.open { display: grid; gap: 5px; animation: rxie-menu-in .18s ease-out; }
.rxie-menu__title { margin: 4px 8px 7px; color: var(--rx-c-157-165-198-1000); font-size: 12px; }
.rxie-menu button { padding: 10px 12px; color: var(--rx-c-247-248-255-1000); text-align: left; border: 0; border-radius: 11px; background: transparent; cursor: pointer; }
.rxie-menu button:hover, .rxie-menu button:focus-visible { outline: none; background: var(--rx-c-115-87-255-180); }

.rxie-toast {
  position: fixed;
  z-index: 19;
  right: 22px;
  bottom: 22px;
  max-width: min(320px, calc(100vw - 32px));
  padding: 11px 15px;
  border: 1px solid var(--rx-c-56-225-207-320);
  border-radius: 12px;
  background: var(--rx-c-8-25-49-950);
  color: var(--rx-c-232-251-255-1000);
  box-shadow: 0 16px 44px var(--rx-c-0-0-0-320);
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  transition: opacity .18s ease, translate .18s ease;
}

.rxie-toast.visible { opacity: 1; translate: 0 0; }

@keyframes rxie-menu-in {
  from { translate: 0 8px; scale: .97; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rxie, .rxie-menu.open { transition: none; animation: none; }
}

@media (max-width: 720px) {
  .rxie { width: 108px; left: 16px; top: auto; bottom: 86px; }
  .rxie-menu { width: min(226px, calc(100vw - 24px)); }
  .rxie-toast { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); }
}