/* ════════════════════════════════════════════════════════════════
   WINR v33 — Membership pass card
   Echoes the onboarding pass language. --acc = owner accent,
   --emblem = the member's emblem glow. Additive; remove to revert.
   ════════════════════════════════════════════════════════════════ */
.v33-pass{
  --acc:#fff; --emblem:#fff;
  position:relative; overflow:hidden;
  width:100%; max-width:300px; margin:0 auto;
  padding:20px 20px 16px; border-radius:18px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%),
    linear-gradient(160deg, rgba(20,21,26,0.96), rgba(10,11,14,0.98));
  border:1px solid color-mix(in srgb, var(--acc) 40%, rgba(255,255,255,0.1));
  box-shadow:0 24px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08),
             0 0 36px color-mix(in srgb, var(--acc) 22%, transparent);
  animation:v33PassIn .6s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes v33PassIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }

/* holo shine sweep */
.v33-pass-shine{
  position:absolute; top:0; left:-60%; width:50%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  transform:skewX(-18deg); animation:v33Shine 4.5s ease-in-out 0.6s infinite;
  pointer-events:none;
}
@keyframes v33Shine{ 0%,100%{ left:-60%; } 45%,55%{ left:130%; } }

.v33-pass-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; position:relative; z-index:1; }
.v33-pass-eyebrow{ font-size:9.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:color-mix(in srgb, var(--acc) 60%, #fff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v33-pass-founding{
  flex:0 0 auto; font-size:8.5px; font-weight:900; letter-spacing:.7px; text-transform:uppercase;
  color:#0b0b0e; background:var(--acc); padding:3px 8px; border-radius:999px;
  box-shadow:0 0 14px color-mix(in srgb, var(--acc) 60%, transparent);
}

.v33-pass-emblem{
  position:relative; z-index:1; width:56px; height:56px; margin:18px auto 14px;
  color:var(--emblem); filter:drop-shadow(0 0 14px color-mix(in srgb, var(--emblem) 70%, transparent));
  animation:v33Breathe 3.4s ease-in-out infinite;
}
.v33-pass-emblem svg{ width:100%; height:100%; }
@keyframes v33Breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }

.v33-pass-name{ position:relative; z-index:1; text-align:center; font-size:18px; font-weight:900; letter-spacing:-0.3px; color:#fff; }

.v33-pass-foot{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.08); }
.v33-pass-no{ font-size:15px; font-weight:900; letter-spacing:1px; color:#fff; font-variant-numeric:tabular-nums; }
.v33-pass-since{ font-size:10.5px; color:var(--text-lo, #71717A); }

/* standalone preview overlay (demo + future "view my pass") */
.v33-pass-preview{ position:fixed; inset:0; z-index:1500; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,0.66); backdrop-filter:blur(6px); }
.v33-pass-preview-inner{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.v33-pass-preview-x{ padding:9px 22px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#fff; font-size:13px; font-weight:700; cursor:pointer; }
.v33-pass-preview-x:hover{ background:rgba(255,255,255,0.12); }

/* inside the checkout success state, give the pass some room */
.v32-state-success .v33-pass{ margin-bottom:6px; animation-delay:.05s; }