/* ═══════════════════════════════════════════════════════════════════════
   Account / Discord-connect UI — login button, connect + account-creation
   modals, and the user profile shell. Matches the site's dark nebula theme
   (deep #141416 bars, translucent white borders, rounded corners).
   All DOM for these components is injected by js/account.js.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --acct-panel:    #1b1b20;
  --acct-panel-2:  #232329;
  --acct-line:     rgba(255, 255, 255, 0.10);
  --acct-line-2:   rgba(255, 255, 255, 0.18);
  --acct-text:     rgba(255, 255, 255, 0.92);
  --acct-dim:      rgba(255, 255, 255, 0.50);
  --acct-accent:   #69db7c;             /* same green used elsewhere */
  --discord:       #5865F2;
  --discord-hover: #4752c4;
  --acct-radius:   16px;
}

/* ─── Nav account button (sits right of the search bar) ─── */
.acct-nav-btn {
  flex-shrink: 0;
  margin-left: 14px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--acct-line);
  border-radius: 12px;
  color: var(--acct-text);
  font: 600 14px/1 system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .25s, border-color .25s, transform .12s;
}
.acct-nav-btn:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--acct-line-2); }
.acct-nav-btn:active { transform: scale(.96); }
.acct-nav-btn__discord-icon { width: 20px; height: 20px; flex-shrink: 0; }
.acct-nav-btn__label { display: inline; }

/* Logged-in variant: avatar + name */
.acct-nav-btn--user { padding: 0 12px 0 6px; gap: 8px; }
.acct-nav-btn__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: var(--acct-panel-2);
}
.acct-nav-btn__caret { width: 12px; height: 12px; opacity: .5; flex-shrink: 0; }

@media (max-width: 700px) {
  .acct-nav-btn { height: 38px; margin-left: 10px; padding: 0 11px; }
  .acct-nav-btn--collapse .acct-nav-btn__label { display: none; }   /* icon-only on phones */
  .acct-nav-btn--collapse { padding: 0 10px; }
  /* Signed-in chip → avatar only on mobile (username/caret would push the bar).
     Same button styling, but a round backing that hugs the circular avatar. */
  .acct-nav-btn--user .acct-nav-btn__label,
  .acct-nav-btn--user .acct-nav-btn__caret { display: none; }
  .acct-nav-btn--user {
    width: 38px;            /* = height → square footprint */
    padding: 0;
    border-radius: 50%;     /* circular backing instead of the rounded-rect */
    justify-content: center;
  }
}

/* ─── Account dropdown menu ─── */
.acct-menu {
  position: fixed;
  z-index: 360;
  min-width: 200px;
  background: var(--acct-panel);
  border: 1px solid var(--acct-line);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.acct-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.acct-menu__header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--acct-line);
  margin-bottom: 6px;
}
.acct-menu__header img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.acct-menu__name { font: 700 14px/1.2 system-ui; color: var(--acct-text); }
.acct-menu__tag { font: 500 12px/1.3 system-ui; color: var(--acct-dim); }
.acct-menu__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  background: none; border: none; border-radius: 9px;
  color: var(--acct-text); font: 500 14px/1 system-ui;
  text-align: left; cursor: pointer;
}
.acct-menu__item:hover { background: rgba(255, 255, 255, 0.06); }
.acct-menu__item--danger { color: #ff6b6b; }
.acct-menu__item svg { width: 17px; height: 17px; opacity: .8; }

/* ─── Modal scaffolding (shared by connect + create) ─── */
.acct-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(10, 10, 12, 0.62);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0; pointer-events: none;
  transition: opacity .28s cubic-bezier(.32, .72, 0, 1);
}
.acct-overlay.open { opacity: 1; pointer-events: auto; }

.acct-modal {
  width: 100%; max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--acct-panel);
  border: 1px solid var(--acct-line);
  border-radius: var(--acct-radius);
  padding: 30px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  transform: translateY(16px) scale(.97);
  transition: transform .32s cubic-bezier(.32, .72, 0, 1);
  scrollbar-width: none;
}
.acct-modal::-webkit-scrollbar { width: 0; }
.acct-overlay.open .acct-modal { transform: none; }
.acct-modal--wide { max-width: 520px; }

.acct-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06); border: none;
  color: var(--acct-dim); cursor: pointer; transition: background .2s, color .2s;
}
.acct-modal__close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.acct-modal__close svg { width: 16px; height: 16px; }

.acct-modal__title {
  font: 800 22px/1.2 system-ui; color: #fff;
  text-align: center; margin-bottom: 8px;
}
.acct-modal__sub {
  font: 400 14px/1.5 system-ui; color: var(--acct-dim);
  text-align: center; margin-bottom: 24px;
}

/* ─── Connect-Discord step ─── */
.acct-connect-art {
  width: 84px; height: 84px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 22px;
  background: linear-gradient(145deg, var(--discord), #7983f5);
  box-shadow: 0 12px 30px rgba(88, 101, 242, .45);
}
.acct-connect-art svg { width: 48px; height: 48px; color: #fff; }

.acct-btn-discord {
  width: 100%; height: 50px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--discord); border: none; border-radius: 12px;
  color: #fff; font: 700 15px/1 system-ui; cursor: pointer;
  transition: background .2s, transform .12s;
}
.acct-btn-discord:hover { background: var(--discord-hover); }
.acct-btn-discord:active { transform: scale(.98); }
.acct-btn-discord:disabled { opacity: .65; cursor: progress; }
.acct-btn-discord svg { width: 22px; height: 22px; }

.acct-fineprint {
  margin-top: 16px; text-align: center;
  font: 400 12px/1.5 system-ui; color: var(--acct-dim);
}

/* Guild-gate notice (not a member of the server) */
.acct-gate {
  margin-top: 18px; padding: 14px 16px;
  background: rgba(255, 107, 107, .08);
  border: 1px solid rgba(255, 107, 107, .3);
  border-radius: 12px;
  font: 500 13px/1.5 system-ui; color: #ffb4b4; text-align: center;
}
.acct-gate a { color: #fff; font-weight: 700; }

/* spinner */
.acct-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: acct-spin .7s linear infinite;
}
@keyframes acct-spin { to { transform: rotate(360deg); } }

/* ─── Account-creation: username ─── */
.acct-field { margin-bottom: 22px; }
.acct-label { display: block; font: 700 13px/1 system-ui; color: var(--acct-text); margin-bottom: 9px; }
.acct-input-wrap {
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--acct-line); border-radius: 12px;
  padding: 0 14px; height: 48px;
  transition: border-color .2s, box-shadow .2s;
}
.acct-input-wrap:focus-within { border-color: var(--acct-line-2); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
.acct-input-wrap.is-ok    { border-color: rgba(105, 219, 124, .6); }
.acct-input-wrap.is-bad   { border-color: rgba(255, 107, 107, .6); }
.acct-input-at { color: var(--acct-dim); font: 600 16px/1 system-ui; margin-right: 4px; }
.acct-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: #fff; font: 500 16px/1 system-ui; padding: 0;
}
.acct-input-status { width: 18px; height: 18px; flex-shrink: 0; }
.acct-hint { margin-top: 8px; font: 500 12px/1.4 system-ui; color: var(--acct-dim); min-height: 16px; }
.acct-hint.is-bad { color: #ff8f8f; }
.acct-hint.is-ok  { color: var(--acct-accent); }

/* ─── Account-creation: pfp picker ─── */
.acct-pfp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.acct-pfp-head .acct-label { margin-bottom: 0; }

/* Stop iOS double-tap-to-zoom on the account's tap targets. */
.acct-pfp,
.acct-nav-btn, .acct-create-btn, .acct-btn-discord, .acct-tab,
.acct-menu__item, .acct-modal__close, .acct-profile__back,
.acct-profile__edit, .acct-pfp-grid {
  touch-action: manipulation;
}

.acct-pfp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-width: 270px; margin: 0 auto;   /* cap tile size so avatars stay compact */
  align-items: center;                /* don't stretch tiles → keep them perfectly square (round circle) */
}
.acct-pfp {
  position: relative; aspect-ratio: 1;
  background: transparent;            /* the circle is baked into the PNG */
  border: 2px solid transparent; border-radius: 50%;
  cursor: pointer;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);   /* soft release back to rest */
  -webkit-tap-highlight-color: transparent;
}
.acct-pfp:hover {
  transform: scale(1.08);                       /* raise forward — grows slightly toward you */
  transition: transform .2s cubic-bezier(.34,1.1,.6,1);     /* responsive grow */
}

.acct-pfp img {
  display: block;                     /* kill inline descender gap → tile stays square */
  width: 100%; height: 100%; object-fit: contain;    /* head only, nothing cropped */
}
/* Selection is shown by the green check badge alone — no circle behind the pfp. */

/* Green check badge, top-right — JS pops it in/out (resting states below). */
.acct-pfp__check {
  position: absolute; top: 2px; right: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--acct-accent);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0); transform-origin: center;
  pointer-events: none; z-index: 3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.acct-pfp__check svg { width: 13px; height: 13px; }
.acct-pfp.selected .acct-pfp__check { opacity: 1; transform: scale(1); }   /* resting (e.g. pre-selected on open) */

/* Discord avatar preview at the top of the create-profile step. */
.acct-create-avatar { display: flex; justify-content: center; margin-bottom: 14px; }
.acct-create-avatar img {
  width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--acct-line);
  background: var(--acct-panel);
}

.acct-create-btn {
  width: 100%; height: 50px; margin-top: 26px;
  background: var(--acct-accent); border: none; border-radius: 12px;
  color: #11210f; font: 800 15px/1 system-ui; cursor: pointer;
  transition: filter .2s, transform .12s, opacity .2s;
}
.acct-create-btn:hover { filter: brightness(1.06); }
.acct-create-btn:active { transform: scale(.98); }
.acct-create-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Destructive confirm button (disconnect/delete) + a plain text cancel under it. */
.acct-danger-btn { background: #ff6b6b; color: #2a0d0d; }
.acct-text-btn {
  width: 100%; margin-top: 10px; padding: 10px;
  background: none; border: none; cursor: pointer;
  color: var(--acct-dim); font: 600 13px/1 system-ui;
  transition: color .2s;
}
.acct-text-btn:hover { color: var(--acct-text); }

/* ─── Profile page ─── */
/* SEQUENCED transition (not a cross-fade) so the previous page's elements are
   never visible through the overlay:
   - opening: the page fades fully OUT first, THEN the opaque overlay fades in.
   - closing: the overlay fades OUT first, THEN the page fades back in.
   The delays below stagger the two so they never overlap. */
body > *:not(.acct-profile):not(.acct-overlay):not(.acct-menu) {
  transition: opacity .24s ease .26s;   /* closing: wait for overlay to leave, then fade in */
}
body.acct-profile-active > *:not(.acct-profile):not(.acct-overlay):not(.acct-menu) {
  /* !important beats the inline opacity/transition JS sets on the hero for its
     scroll-dissolve — otherwise the hero text wouldn't fade. Scoped to the
     active state, so the hero's own scroll behaviour is untouched once closed. */
  opacity: 0 !important; pointer-events: none;
  transition: opacity .24s ease !important;   /* opening: fade out immediately */
}
/* The account dropdown fades out in sync with the page (it's excluded above so
   its normal open/close timing stays intact when the profile isn't opening). */
body.acct-profile-active .acct-menu {
  opacity: 0 !important; pointer-events: none;
  transition: opacity .24s ease !important;
}

.acct-profile {
  position: fixed; inset: 0; z-index: 320;
  background: #141416;                  /* opaque — nothing shows through it */
  overflow-y: auto;
  overflow-x: hidden;               /* lock horizontal — no panning/drift */
  overscroll-behavior: none;        /* kill the iOS rubber-band bounce — no blank space */
  /* content starts below the fixed nav so nothing can scroll above it */
  padding-top: calc(env(safe-area-inset-top) + var(--nav-h));
  /* The container (and therefore the NAV BAR) is STATIC — it doesn't fade or
     move; it just becomes present after the page fades out. Only the elements
     inside animate (search fades in, back button pops in, body slides up). */
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear .24s;  /* closing: hide after inner anims finish */
}

/* In-overlay nav bar: logo + search + sign-out. Fixed (not sticky) so the iOS
   rubber-band bounce can't push it — and the content — above the top line. */
.acct-profile__nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 8;
  background: #141416;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: env(safe-area-inset-top);
}
.acct-profile__nav .site-nav__search { position: relative; }   /* anchor the results dropdown */
.acct-profile__results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--acct-panel); border: 1px solid var(--acct-line);
  border-radius: 12px; overflow: hidden; display: none; z-index: 7;
}
.acct-profile__results.open { display: block; }
.acct-profile__results a, .acct-profile__results a:visited { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--acct-text); text-decoration: none; }
.acct-profile__results a:hover { background: rgba(255, 255, 255, 0.06); }
.acct-profile__results img { width: 28px; height: 28px; border-radius: 50%; }
.acct-profile__results span { font: 700 .9rem/1 system-ui; }
/* opening: the static nav frame appears after the page has faded out (.26s) */
.acct-profile.open {
  visibility: visible; pointer-events: auto;
  transition: visibility 0s linear .26s;
}

/* ── Inner elements animate within the static nav/frame ──────────────────────
   NOTE: the "from" (hidden) states are scoped under .acct-profile so they only
   affect the overlay — the public profile page (profile.php) reuses these same
   .acct-profile__* classes standalone and must stay fully visible there. */
/* Body content (banner + the avatar/tabs/empty block) fades and slides up. */
.acct-profile .acct-profile__banner { opacity: 0; transition: opacity .2s ease; }
.acct-profile .acct-profile__inner  { opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.acct-profile.open .acct-profile__banner { opacity: 1; transition: opacity .4s ease .26s; }
.acct-profile.open .acct-profile__inner  {
  opacity: 1; transform: none;
  transition: opacity .4s ease .3s, transform .5s cubic-bezier(.22, 1, .36, 1) .3s;
}
/* Search bar fades in. */
.acct-profile .site-nav__search { opacity: 0; transition: opacity .2s ease; }
.acct-profile.open .site-nav__search { opacity: 1; transition: opacity .4s ease .3s; }
/* Back button pops in (slight overshoot). */
.acct-profile .acct-profile__back { opacity: 0; transform: scale(.4); transition: opacity .15s ease, transform .15s ease; }
.acct-profile.open .acct-profile__back {
  opacity: 1; transform: scale(1);
  transition: opacity .25s ease .34s, transform .4s cubic-bezier(.34, 1.56, .64, 1) .34s;
}

.acct-profile__banner {
  /* Per-user profile banner. Override per profile later via an inline style:
     <div class="acct-profile__banner" style="--profile-banner:url(...)">.
     Defaults to a test banner until a default/user banner system exists. */
  --profile-banner: url(https://cdn.shinies.io/banners/nightparade.png);
  height: 200px;
  background-color: #141416;
  /* image, with a bottom fade so it blends into the page below the banner */
  background-image:
    linear-gradient(to bottom, rgba(20, 20, 22, 0) 45%, #141416 100%),
    var(--profile-banner);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  position: relative; overflow: hidden;
}

.acct-profile__inner { max-width: 860px; margin: 0 auto; padding: 0 24px 80px; }

.acct-profile__head {
  display: flex; align-items: flex-end; gap: 22px;
  margin-top: -64px; margin-bottom: 30px; position: relative; z-index: 1;
}
.acct-profile__avatar {
  width: 132px; height: 132px; border-radius: 50%;
  border: 5px solid #141416; background: var(--acct-panel-2);
  object-fit: cover; flex-shrink: 0;
}
.acct-profile__id { padding-bottom: 8px; }
.acct-profile__username { font: 900 28px/1.1 system-ui; color: #fff; }
.acct-profile__tag { font: 500 14px/1.4 system-ui; color: var(--acct-dim); margin-top: 4px; }

.acct-profile__back {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--acct-line);
  color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, border-color .2s;
}
.acct-profile__back:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.acct-profile__back svg { width: 18px; height: 18px; }

.acct-profile__edit {
  margin-left: auto; align-self: center;
  padding: 10px 18px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--acct-line);
  color: var(--acct-text); font: 700 13px/1 system-ui; cursor: pointer;
  transition: background .2s;
}
.acct-profile__edit:hover { background: rgba(255, 255, 255, 0.11); }

.acct-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--acct-line);
  margin-bottom: 28px;
  overflow-x: auto;                 /* tabs scroll within the strip, never clip the page */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* hide the scrollbar (Firefox) */
}
.acct-tabs::-webkit-scrollbar { display: none; }   /* hide the scrollbar (WebKit) */
.acct-tab {
  flex-shrink: 0; white-space: nowrap;             /* tabs never squish or wrap */
  padding: 13px 18px; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--acct-dim); font: 700 14px/1 system-ui; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.acct-tab.active { color: #fff; border-bottom-color: var(--acct-accent); }
.acct-tab:disabled { opacity: .45; cursor: not-allowed; }
.acct-tab .acct-soon {
  font: 700 9px/1 system-ui; letter-spacing: .04em;
  background: rgba(255, 255, 255, 0.1); color: var(--acct-dim);
  padding: 3px 5px; border-radius: 5px; margin-left: 6px; vertical-align: middle;
}

.acct-empty {
  text-align: center; padding: 70px 20px; color: var(--acct-dim);
}
.acct-empty__icon {
  width: 56px; height: 56px; margin: 0 auto 16px; opacity: .4;
}
.acct-empty__title { font: 800 17px/1.3 system-ui; color: var(--acct-text); margin-bottom: 6px; }
.acct-empty__text { font: 400 14px/1.6 system-ui; max-width: 360px; margin: 0 auto; }

@media (max-width: 560px) {
  /* Keep the modal a compact, centred rounded card — never a full-height strip. */
  .acct-overlay { align-items: center; padding: 24px 16px; }
  .acct-modal {
    padding: 24px 18px; border-radius: 22px;
    max-height: calc(100dvh - 48px);
  }
  .acct-modal__sub { margin-bottom: 20px; }
  .acct-pfp-grid { max-width: 240px; gap: 8px; }
  .acct-pfp img { padding: 5px; }
  .acct-create-btn { margin-top: 20px; }
  .acct-profile__inner { padding: 0 18px 60px; }     /* tighter, symmetric side padding */
  .acct-profile__head { flex-wrap: wrap; gap: 16px; }
  .acct-profile__avatar { width: 104px; height: 104px; }
  .acct-profile__username { font-size: 23px; }
  .acct-profile__id { min-width: 0; }                /* let it shrink so the tag can't push width */
  .acct-profile__tag { overflow-wrap: anywhere; }    /* long Discord names wrap, never overflow */
  .acct-profile__edit { margin-left: 0; }
  .acct-tabs { gap: 2px; }
  .acct-tab { padding: 12px 13px; }                  /* slightly tighter so all tabs fit */
  .acct-tab .acct-soon { margin-left: 4px; padding: 2px 4px; }
}