/* Shared "Back to your AirBridge Universe" button -- 2026-08-22, Kerry: the
   same circular infinity-mark button already used in Photo Slots
   (apps/web/src/styles.css and apps/admin/src/admin.css both have their
   own copy of this exact button, in their own app-specific colors) should
   be the universal way back to ceri.html from anywhere a tile launches
   into. This file is the shared, app-neutral version of that button's
   markup/CSS -- one definition instead of re-copying it into every app.

   Two things stay per-app rather than living here:
   1) The icon path -- each app references its own local copy (relative to
      wherever the including page lives), not one shared image, matching
      Photo Slots' existing pattern.
   2) The click behavior -- see universe-exit-button.js's comment for why
      that's opt-in via data-universe-exit rather than automatic.

   Default (no modifier) matches Photo Slots' apps/web dark/gold theme,
   the same theme as ceri.html/ceri-launcher.css. Add
   .universe-exit-button--light for a light-background host (App Creator,
   or anything matching Photo Slots' apps/admin maroon theme) -- mirrors
   admin.css's own light variant colors 1:1. */
.universe-exit-button {
  width: 52px;
  height: 52px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.universe-exit-ring {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 9px;
  border-radius: 50%;
  background: rgba(35, 25, 38, 0.55);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(247, 215, 136, 0.55);
}
.universe-exit-ring img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.universe-exit-button:hover .universe-exit-ring,
.universe-exit-button:focus-visible .universe-exit-ring {
  background: rgba(35, 25, 38, 0.78);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 0 0 3px #f7d788;
}
.universe-exit-button:active { transform: scale(0.94); }
.universe-exit-button:focus-visible { outline: none; }
.universe-exit-button[hidden] { display: none; }

/* Light-theme variant -- matches Photo Slots' apps/admin maroon palette
   (#7b2d58), for hosting pages with a light/cream background like App
   Creator instead of ceri.html's dark theme. */
.universe-exit-button--light .universe-exit-ring {
  background: rgba(123, 45, 88, 0.08);
  box-shadow: 0 0 0 2px rgba(123, 45, 88, 0.4);
}
.universe-exit-button--light:hover .universe-exit-ring,
.universe-exit-button--light:focus-visible .universe-exit-ring {
  background: rgba(123, 45, 88, 0.16);
  box-shadow: 0 0 0 3px #7b2d58;
}

/* Floating placement -- opt-in via .universe-exit-button--floating for a
   page with no existing header/toolbar slot to sit inline in (App
   Creator's own pages). ceri.html's Discover-panel copy stays inline in
   its existing .ceri-launcher-head row instead, so it does NOT use this
   modifier. Top-left, clear of Photo Slots' own bottom-right dock
   (.universe-exit-button's inline order:6 there) and of typical
   top-right close/account controls, so this doesn't collide with either
   convention if a future app has both. */
.universe-exit-button--floating {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 500;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}