/* ════════════════════════════════════════════════════════════════
   WINR v25 — Audit hotfixes (2026-05-18)
   Riley's audit notes:
   • Auth modal can't be dismissed, doesn't fit, no entrance pulse
   • Inbox chats visible when logged out
   ════════════════════════════════════════════════════════════════ */

/* ── Auth overlay — clickable backdrop + entrance pulse ─────── */
.auth-overlay{
  /* Make it obvious the backdrop closes the modal */
  cursor:pointer;
  /* Smooth backdrop fade */
  transition:opacity 220ms ease;
  /* Ensure proper sizing on all viewports */
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow-y:auto
}
.auth-overlay .auth-modal,
.auth-overlay .dl-modal{
  cursor:default;
  /* Entrance pulse — soft scale-in like macOS */
  animation:v25AuthModalIn 360ms cubic-bezier(0.18, 0.89, 0.32, 1.18) both;
  /* Sizing: cap width, allow scroll if content overflows */
  max-width:440px;
  width:100%;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  /* Visible close affordance */
  position:relative
}

@keyframes v25AuthModalIn{
  0%   { opacity:0; transform:scale(0.94) translateY(8px) }
  60%  { opacity:1; transform:scale(1.01) translateY(-1px) }
  100% { opacity:1; transform:scale(1) translateY(0) }
}

/* Make sure the close button is always visible + tappable */
.auth-overlay .auth-close{
  position:absolute;
  top:14px;
  right:14px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:50%;
  color:rgba(255,255,255,0.7);
  cursor:pointer;
  z-index:5;
  transition:background 200ms ease,
             color 200ms ease,
             transform 200ms cubic-bezier(0.22, 1, 0.36, 1)
}
.auth-overlay .auth-close:hover{
  background:rgba(255,255,255,0.12);
  color:#FFFFFF;
  transform:scale(1.06)
}

/* Tighten the auth modal inner spacing so it doesn't overflow on shorter
   viewports (Riley reported "it doesn't fit right") */
.auth-overlay .auth-modal{
  padding:32px 28px 24px
}
@media (max-height:760px){
  .auth-overlay .auth-modal{
    padding:24px 24px 20px
  }
  .auth-overlay .auth-modal .auth-header{
    margin-bottom:16px
  }
  .auth-overlay .auth-winnr-splash{
    font-size:64px !important;
    letter-spacing:-4px !important;
    margin-bottom:12px !important
  }
}

/* ── Inbox container — when gated AND active, override Tony's 3-column
   DM grid so the auth-gate centers properly. Scoped to `.active` so
   navigate-away (which removes .active and sets display:none) wins.
   AUDIT HOTFIX: previously the !important overrode the nav-away
   display:none, leaving the gate visible on every other tab. */
.inbox-view.inbox-view--gated.active{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:calc(100vh - 80px);
  /* Override Tony's grid template so it doesn't anchor the gate to col 1 */
  grid-template-columns:none !important;
  padding:0
}
.inbox-view.inbox-view--gated.active > .inbox-auth-gate{
  width:100%;
  max-width:520px
}

/* ── Inbox — logged-out auth gate ────────────────────────────── */
.inbox-view .inbox-auth-gate{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 24px;
  min-height:60vh;
  text-align:center;
  position:relative
}
.inbox-view .inbox-auth-gate-card{
  background:var(--bg-card);
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  border:1px solid var(--border-card);
  border-radius:var(--radius-lg);
  padding:48px 36px;
  max-width:420px;
  width:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 32px 80px rgba(0,0,0,0.5);
  position:relative;
  overflow:hidden;
  animation:v25InboxGateRise 480ms cubic-bezier(0.22, 1, 0.36, 1) both
}
@keyframes v25InboxGateRise{
  from { opacity:0; transform:translateY(16px) scale(0.98) }
  to   { opacity:1; transform:translateY(0) scale(1) }
}
.inbox-view .inbox-auth-gate-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 65%);
  pointer-events:none;
  z-index:0
}
.inbox-view .inbox-auth-gate-icon{
  width:64px;
  height:64px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.18);
  border-radius:50%;
  color:#fff;
  position:relative;
  z-index:1;
  box-shadow:0 0 30px rgba(255,255,255,0.1)
}
.inbox-view .inbox-auth-gate h2{
  font-size:22px;
  font-weight:900;
  letter-spacing:-0.5px;
  color:var(--text-hi);
  margin:0 0 8px;
  position:relative;
  z-index:1
}
.inbox-view .inbox-auth-gate p{
  font-size:14px;
  color:var(--text-lo);
  line-height:1.55;
  margin:0 0 28px;
  position:relative;
  z-index:1
}
.inbox-view .inbox-auth-gate-ctas{
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  z-index:1
}
.inbox-view .inbox-auth-gate-cta{
  padding:14px 24px;
  font-size:14px;
  font-weight:700;
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:all var(--duration);
  border:none;
  letter-spacing:0.2px
}
.inbox-view .inbox-auth-gate-cta.primary{
  background:#FFFFFF;
  color:#000000;
  box-shadow:0 8px 24px rgba(255,255,255,0.18)
}
.inbox-view .inbox-auth-gate-cta.primary:hover{
  background:#F4F4F6;
  transform:translateY(-1px);
  box-shadow:0 12px 32px rgba(255,255,255,0.28)
}
.inbox-view .inbox-auth-gate-cta.ghost{
  background:transparent;
  color:var(--text-mid);
  border:1px solid var(--border-card)
}
.inbox-view .inbox-auth-gate-cta.ghost:hover{
  border-color:rgba(255,255,255,0.2);
  color:var(--text-hi);
  background:rgba(255,255,255,0.02)
}

/* ── About this Community card — breathe + scroll ────────────────
   Riley audit: "this info should be not so crammed and maybe we could
   scroll instead." Tony's cv-side-card stack stacks 6 metadata rows
   plus the description — feeling tight. Adds row spacing + a max-height
   with internal scroll for very-long descriptions. */
.community-lobby .cv-side-card{
  padding:22px 22px
}
.community-lobby .cv-side-card .cv-side-text{
  font-size:14px;
  line-height:1.6;
  margin-bottom:18px;
  color:rgba(255,255,255,0.78)
}
.community-lobby .cv-side-card .cv-meta-list{
  display:flex;
  flex-direction:column;
  gap:14px
}
.community-lobby .cv-side-card .cv-meta-list > *{
  padding:4px 0
}
.community-lobby .cv-side-card .cv-meta-key{
  font-size:11px;
  letter-spacing:1.4px;
  color:rgba(255,255,255,0.45);
  text-transform:uppercase
}
.community-lobby .cv-side-card .cv-meta-val{
  font-size:14px;
  font-weight:600;
  color:#FFFFFF;
  letter-spacing:-0.1px
}
/* If the About panel sits in the main content area and grows tall,
   cap it and let internal content scroll instead of pushing the page. */
.community-lobby .cv-main .cv-side-card{
  max-height:calc(100vh - 240px);
  overflow-y:auto;
  scrollbar-width:thin
}
.community-lobby .cv-main .cv-side-card::-webkit-scrollbar{
  width:6px
}
.community-lobby .cv-main .cv-side-card::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.12);
  border-radius:3px
}