/* authslot.css — the account control that sits on every page.
 *
 * One circle, two states, the same 38px either way so no topbar or header
 * reflows depending on who is looking at it:
 *
 *   signed in  → an <a> to /player wearing the player's avatar
 *   signed out → a blank <button> that opens a one-item "Sign in" popover
 *
 * Standalone on purpose. The four stylesheets this loads next to are mutually
 * exclusive (home.css is full-bleed, shop.css is a padded column, style.css is a
 * single card) and none of them could host this without being pulled onto pages
 * that don't want the rest of it.
 *
 * Colours: /player publishes the viewed player's palette as --theme-*, / uses
 * --accent, and shop.css/style.css have no custom properties at all — hence the
 * three-deep fallback chain, resolved once here so the rules below read plainly.
 * `var(--x, 116, 235, 213)` is legal: a var() fallback is everything after the
 * first comma, so the whole triple is the default.
 */

.auth-slot {
  --auth-accent: var(--theme-accent, var(--accent, #74ebd5));
  --auth-accent-2: var(--theme-accent-2, var(--accent-2, #9face6));
  --auth-on-accent: var(--theme-on-accent, var(--on-accent, #06232b));
  --auth-accent-rgb: var(--theme-accent-rgb, var(--accent-rgb, 116, 235, 213));

  /* The popover is positioned against this. */
  position: relative;
  display: flex;
  align-items: center;
  /* .topnav on / and .profile-nav on /player are both flex rows whose items are
     allowed to shrink; the circle is a fixed size and must not be squeezed. */
  flex: 0 0 auto;
}

/* Shared by both states, which is the point: the control is the same shape
   whether or not anyone is signed in.
   `!important` on padding/color is for `.topnav a` in home.css (0,1,1 — it
   out-specifies a bare class) and costs nothing anywhere else. */
.auth-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  /* The explicit box is defensive: style.css on /joinform styles bare `button`
     as a full-width gradient CTA with its own margin, and the signed-out state
     here is a real <button>. Every one of those declarations is overridden by a
     class, which outranks an element selector regardless of load order. */
  margin: 0;
  padding: 0 !important;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink, #eaf6ff) !important;
  text-decoration: none;
  /* Only transform, deliberately. On /player the accent below is rewritten when
     a theme is picked, and a transition running on a property derived from a
     custom property sticks on the old colour — see player.css. */
  transition: transform 0.15s ease;
  box-shadow: 0 0 0 2px rgba(var(--auth-accent-rgb), 0.5), 0 8px 20px rgba(0, 0, 0, 0.4);
}

.auth-avatar:hover {
  transform: translateY(-1px) scale(1.05);
}

.auth-avatar:focus-visible {
  outline: 2px solid var(--auth-accent);
  outline-offset: 3px;
}

.auth-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stand-in when the look cache has no avatar for this account. An initial, not
   the team logo the roster tiles fall back to: this slot identifies *you*, and a
   shared logo would make the control identical for everyone. */
.auth-initial {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--auth-on-accent);
  background: linear-gradient(135deg, var(--auth-accent), var(--auth-accent-2));
}

/* Signed out: blank. No name to show and no profile to point at, so the circle
   is an empty glass disc with a person glyph in it, and the ring stays neutral
   white rather than the accent so it doesn't read as an account that exists.

   "Blank" means no avatar, *not* low contrast. The first pass at this used a 9%
   fill and a 1px 22% hairline, which on the `/` topbar — 85%-opaque near-black,
   behind a blur — was faint enough to read as the control having disappeared
   rather than as an empty state. Keep these weights: the neutral-vs-accent ring
   is what distinguishes the two states, not how visible they are. */
.auth-avatar-empty {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45), 0 8px 20px rgba(0, 0, 0, 0.35);
}

.auth-avatar-empty:hover,
.auth-avatar-empty[aria-expanded='true'] {
  background: rgba(255, 255, 255, 0.32);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 10px 24px rgba(0, 0, 0, 0.45);
}

.auth-icon {
  font-size: 1.05rem;
  line-height: 1;
  opacity: 1;
}

/* The popover
   --------------------------------------------------------------------------
   Toggled by a class rather than `.hidden`, on purpose: `.hidden` is declared in
   three of the four stylesheets this sits beside, and player.css documents a bug
   where a single-class `display` rule loaded later beat `.hidden` and left a
   hidden element on screen. `.auth-menu.open` is two classes, so it wins over
   `.auth-menu` no matter what else is on the page. */
.auth-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: max-content;
  min-width: 190px;
  padding: 14px;
  text-align: center;
  border: 1px solid rgba(var(--auth-accent-rgb), 0.35);
  border-radius: 14px;
  background: rgba(16, 34, 44, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.auth-menu.open {
  display: block;
  animation: authMenuIn 0.16s ease both;
}

@keyframes authMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-menu-note {
  margin-bottom: 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(234, 246, 255, 0.7);
}

/* A full-width block so it reads as the popover's one action. `width: auto` and
   the explicit box are for style.css on /joinform, where the bare `button` rule
   is full-width and gradient-filled — this is an <a>, but the surrounding card
   sets its own type scale. */
.auth-menu-btn {
  display: block;
  width: auto;
  padding: 10px 18px !important;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: var(--auth-on-accent) !important;
  background: linear-gradient(90deg, var(--auth-accent), var(--auth-accent-2));
  background-size: 200% auto;
  transition: background-position 0.4s ease, transform 0.15s ease;
}

.auth-menu-btn:hover {
  background-position: right center;
  transform: translateY(-1px);
}

/* One breakpoint, and it applies everywhere. The landing page's topbar is the
   tight one — brand plus four items — and 34px is what it has room for. Because
   both states are the same circle there is nothing else to give up here; the
   old text pill needed two separate breakpoints to shed its label. */
@media (max-width: 620px) {
  .auth-avatar { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-avatar,
  .auth-menu,
  .auth-menu-btn {
    animation: none !important;
    transition: none !important;
  }
}