/* ════════════════════════════════════════════════════════════════
   Visitor Passport — Spirit Discovery System
   Quietly magical. Premium. Emotionally warm. Not a game.
   ════════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
  --vp-glass:      rgba(255, 255, 255, 0.70);
  --vp-glass-dk:   rgba(22, 24, 36, 0.84);
  --vp-border:     rgba(255, 255, 255, 0.78);
  --vp-border-dk:  rgba(255, 255, 255, 0.09);
  --vp-shadow:     0 8px 32px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05);
  --vp-shadow-lg:  0 20px 56px rgba(0,0,0,0.13), 0 4px 16px rgba(0,0,0,0.07);
  --vp-blur:       saturate(180%) blur(20px);
  --vp-radius:     16px;
  --vp-font:       "Inter", "SF Pro Text", -apple-system, sans-serif;
  --vp-ease:       cubic-bezier(0.32, 0, 0.08, 1);
  --vp-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --vp-progress-glow: rgba(140, 200, 255, 0);
}


/* ══════════════════════════════════════════════════════════════
   1. SPIRIT — base creature, shared DNA across all 6 worlds
   ══════════════════════════════════════════════════════════════ */

.vp-spirit {
  position: relative;
  width:  var(--s-w, 44px);
  height: var(--s-h, 37px);
  flex-shrink: 0;
  /* Fluffy asymmetric cloud shape */
  border-radius: 64% 72% 56% 68% / 70% 62% 66% 60%;
  background: radial-gradient(ellipse at 40% 34%,
    var(--s-hi,   rgba(220,238,255,0.97)),
    var(--s-base, rgba(170,210,255,0.90)) 56%,
    transparent 84%);
  box-shadow:
    0 0 var(--s-gr, 11px) var(--s-gs, 3px) var(--s-glow,  rgba(140,200,255,0.52)),
    0 0 calc(var(--s-gr,11px)*2.4) calc(var(--s-gs,3px)*2) var(--s-glow2, rgba(140,200,255,0.20));
  filter: blur(var(--s-blur, 1px));
  animation: vpSpiritFloat var(--s-dur, 4.4s) ease-in-out infinite;
  will-change: transform;
  transition: opacity 0.9s ease, filter 0.9s ease, box-shadow 0.9s ease;
}

/* ── Eyes: two tiny dots, closed when sleeping ── */
.vp-spirit::after {
  content: '';
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 1px;
  border-radius: 50%;
  /* open eyes — round dots */
  box-shadow:
    -4px 0 0 2.2px var(--s-eye, rgba(255,255,255,0.82)),
     4px 0 0 2.2px var(--s-eye, rgba(255,255,255,0.82));
  transition: box-shadow 0.7s ease;
}

/* ── Sleeping state — faint, blurred, barely moving ── */
.vp-spirit[data-state="sleeping"] {
  opacity: 0.16;
  filter: blur(2.8px) grayscale(0.45);
  animation-name:     vpSpiritSleep;
  animation-duration: 12s;
}
.vp-spirit[data-state="sleeping"]::after {
  /* closed eyes — thin hairlines */
  box-shadow:
    -3.5px 0 0 0.6px var(--s-eye, rgba(255,255,255,0.30)),
      3.5px 0 0 0.6px var(--s-eye, rgba(255,255,255,0.30));
}

/* ── Awake state ── */
.vp-spirit[data-state="awake"] {
  opacity: 1;
  filter: blur(var(--s-blur, 1px)) grayscale(0);
  animation-name:     vpSpiritFloat;
  animation-duration: var(--s-dur, 4.4s);
}

/* ── Awakening animation — eyes open, tiny bounce, particles ── */
.vp-spirit.vp-spirit--awakening {
  animation: vpSpiritAwaken 1.35s var(--vp-ease-out) forwards !important;
}
@keyframes vpSpiritAwaken {
  0%   { opacity: 0.16; filter: blur(2.8px) grayscale(0.45); transform: scale(0.88) translateY(4px);  }
  28%  { opacity: 0.68; filter: blur(1.2px) grayscale(0.10); transform: scale(1.12) translateY(-6px); }
  52%  { opacity: 1;    filter: blur(0.8px) grayscale(0);    transform: scale(0.94) translateY(2px);  }
  72%  { transform: scale(1.05) translateY(-2px); }
  88%  { transform: scale(0.98) translateY(0.5px); }
  100% { opacity: 1;    filter: blur(var(--s-blur,1px)) grayscale(0); transform: scale(1) translateY(0); }
}

/* Eye open during awakening (transition handles it via data-state flip) */

/* ── Idle float ── */
@keyframes vpSpiritFloat {
  0%   { transform: scale(1)    translateY(0)      rotate(0deg);    }
  20%  { transform: scale(1.05) translateY(-3.5px) rotate(0.9deg);  }
  45%  { transform: scale(0.95) translateY(2.5px)  rotate(-0.7deg); }
  70%  { transform: scale(1.03) translateY(-2px)   rotate(0.4deg);  }
  100% { transform: scale(1)    translateY(0)      rotate(0deg);    }
}
@keyframes vpSpiritSleep {
  0%, 100% { transform: scale(1)    translateY(0);      }
  50%       { transform: scale(1.01) translateY(-0.9px); }
}

/* ── Spirit micro-react on awaken (widget icon) ── */
.vp-spirit.vp-reacting {
  animation: vpSpiritReact 0.62s var(--vp-ease-out) forwards,
             vpSpiritFloat var(--s-dur,4.4s) 0.65s ease-in-out infinite !important;
}
@keyframes vpSpiritReact {
  0%   { transform: scale(1)    translateY(0);    }
  22%  { transform: scale(1.38) translateY(-6px); }
  52%  { transform: scale(0.88) translateY(3px);  }
  74%  { transform: scale(1.10) translateY(-1.5px); }
  100% { transform: scale(1)    translateY(0);    }
}


/* ══════════════════════════════════════════════════════════════
   2. WORLD PERSONALITY VARIANTS — same family, different aura
   ══════════════════════════════════════════════════════════════ */

/* Pre-homepage: pale cream — softest, almost breath-like */
.vp-spirit--pre {
  --s-base: rgba(245,242,234,0.94);
  --s-hi:   rgba(255,252,244,0.98);
  --s-glow: rgba(232,224,208,0.52);
  --s-glow2:rgba(210,204,190,0.18);
  --s-eye:  rgba(170,158,140,0.65);
  --s-dur:  6.2s;
  --s-blur: 1.4px;
  border-radius: 60% 74% 54% 70% / 68% 60% 68% 58%;
}

/* Homepage: warm blue — balanced, present, slightly luminous */
.vp-spirit--home {
  --s-base: rgba(175,212,252,0.92);
  --s-hi:   rgba(216,235,255,0.97);
  --s-glow: rgba(120,184,245,0.54);
  --s-glow2:rgba(100,165,235,0.20);
  --s-eye:  rgba(255,255,255,0.86);
  --s-dur:  4.2s;
  --s-blur: 0.9px;
}

/* SafeSteps: mint/teal — calm, quietly watching */
.vp-spirit--stepsafe {
  --s-base: rgba(160,226,198,0.90);
  --s-hi:   rgba(208,244,226,0.96);
  --s-glow: rgba(94,205,160,0.52);
  --s-glow2:rgba(74,186,142,0.18);
  --s-eye:  rgba(255,255,255,0.80);
  --s-dur:  5.0s;
  --s-blur: 1.0px;
}

/* Camera: cyan/blue — focused, precise, still warm */
.vp-spirit--camera {
  --s-base: rgba(152,206,244,0.91);
  --s-hi:   rgba(198,230,252,0.97);
  --s-glow: rgba(88,168,240,0.54);
  --s-glow2:rgba(68,152,228,0.20);
  --s-eye:  rgba(255,255,255,0.90);
  --s-dur:  3.8s;
  --s-blur: 0.6px;   /* slightly sharper presence */
  border-radius: 58% 68% 54% 64% / 62% 58% 60% 56%;
}

/* Yoguruto: peach/cream — soft joy, cozy warmth */
.vp-spirit--yoguruto {
  --s-base: rgba(244,206,182,0.92);
  --s-hi:   rgba(255,232,215,0.97);
  --s-glow: rgba(238,158,118,0.50);
  --s-glow2:rgba(220,138,98,0.18);
  --s-eye:  rgba(255,255,255,0.80);
  --s-dur:  5.4s;
  --s-blur: 1.2px;
  border-radius: 66% 74% 60% 72% / 72% 66% 70% 62%;
}

/* TU Sport: warm orange — kinetic, lively, slightly faster */
.vp-spirit--tusport {
  --s-base: rgba(248,216,148,0.92);
  --s-hi:   rgba(255,238,190,0.97);
  --s-glow: rgba(238,165,74,0.54);
  --s-glow2:rgba(220,145,54,0.20);
  --s-eye:  rgba(255,255,255,0.84);
  --s-dur:  3.2s;   /* faster energy */
  --s-blur: 0.7px;
}


/* ══════════════════════════════════════════════════════════════
   3. WELCOME OVERLAY (pre-homepage.html uses standalone page;
      these styles remain for the customize modal context)
   ══════════════════════════════════════════════════════════════ */

#vp-welcome-overlay {
  position: fixed; inset: 0; z-index: 9200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,243,250,0.94);
  backdrop-filter: saturate(160%) blur(28px);
  -webkit-backdrop-filter: saturate(160%) blur(28px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.65s var(--vp-ease);
  overflow: hidden;
}
#vp-welcome-overlay.vp-active  { opacity:1; pointer-events:auto; }
#vp-welcome-overlay.vp-leaving { opacity:0; pointer-events:none; transition-duration:0.55s; }

body.vp-welcome-active .page-shell {
  filter: blur(5px) brightness(0.96);
  transform: scale(0.985);
  pointer-events: none;
  transition: filter 0.7s var(--vp-ease), transform 0.7s var(--vp-ease);
}
body:not(.vp-welcome-active) .page-shell {
  filter: none; transform: scale(1);
  transition: filter 0.65s var(--vp-ease), transform 0.65s var(--vp-ease);
}

/* Ambient atmospheric particles */
.vp-welcome-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.vp-particle { position:absolute; border-radius:50%; animation:vpParticleFloat linear infinite; }
.vp-particle:nth-child(1) { width:190px;height:190px;left:6%;  top:10%; background:radial-gradient(circle,rgba(175,215,255,0.40),transparent 70%); animation-duration:30s; }
.vp-particle:nth-child(2) { width:150px;height:150px;right:8%; top:18%; background:radial-gradient(circle,rgba(205,182,255,0.32),transparent 70%); animation-duration:36s; animation-delay:-7s; }
.vp-particle:nth-child(3) { width:110px;height:110px;left:20%;bottom:16%;background:radial-gradient(circle,rgba(155,230,210,0.28),transparent 70%); animation-duration:24s; animation-delay:-11s; }
.vp-particle:nth-child(4) { width:230px;height:230px;right:4%;bottom:6%; background:radial-gradient(circle,rgba(198,216,255,0.24),transparent 70%); animation-duration:40s; animation-delay:-20s; }
.vp-particle:nth-child(5) { width: 90px;height: 90px;left:52%;top:5%;   background:radial-gradient(circle,rgba(238,198,255,0.30),transparent 70%); animation-duration:20s; animation-delay:-5s;  }
.vp-particle:nth-child(6) { width:130px;height:130px;left:3%; bottom:38%;background:radial-gradient(circle,rgba(178,218,255,0.24),transparent 70%); animation-duration:28s; animation-delay:-15s; }
@keyframes vpParticleFloat {
  0%   { transform:translate3d(0,0,0) scale(1); }
  25%  { transform:translate3d(14px,-18px,0) scale(1.04); }
  50%  { transform:translate3d(-20px,12px,0) scale(0.96); }
  75%  { transform:translate3d(10px,18px,0) scale(1.02); }
  100% { transform:translate3d(0,0,0) scale(1); }
}

.vp-welcome-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:44px 32px 36px; max-width:560px; width:calc(100% - 32px);
  animation:vpContentIn 0.75s 0.18s var(--vp-ease-out) both;
}
@keyframes vpContentIn {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.vp-welcome-mascot { margin-bottom:26px; }
.vp-welcome-title {
  font-family:var(--vp-font); font-size:clamp(22px,4vw,30px); font-weight:600;
  letter-spacing:-0.32px; color:#1d1d1f; margin:0 0 10px; line-height:1.18;
}
.vp-welcome-sub  { font-family:var(--vp-font); font-size:13.5px; color:rgba(0,0,0,0.52); line-height:1.56; max-width:310px; margin:0 0 5px; }
.vp-welcome-hint { font-family:var(--vp-font); font-size:11.5px; color:rgba(0,0,0,0.34); margin:0 0 28px; }


/* ── Passport selection cards ── */
.vp-passport-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
  width:100%; margin-bottom:24px;
}
.vp-passport-card {
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:9px; padding:10px 8px 12px; border-radius:14px;
  background:var(--vp-glass); border:1.5px solid var(--vp-border);
  box-shadow:var(--vp-shadow); backdrop-filter:var(--vp-blur);
  -webkit-backdrop-filter:var(--vp-blur);
  cursor:pointer; outline:none; user-select:none;
  transition:transform 0.24s var(--vp-ease-out), box-shadow 0.24s var(--vp-ease-out),
             border-color 0.24s ease, background 0.24s ease;
}
.vp-passport-card:hover { transform:translateY(-5px) scale(1.025); box-shadow:var(--vp-shadow-lg); }
.vp-passport-card.vp-selected {
  border-color:var(--pc-color,rgba(100,175,255,0.7));
  box-shadow:0 0 0 3px rgba(var(--pc-rgb,100,175,255),0.16),var(--vp-shadow-lg);
  transform:translateY(-3px) scale(1.015);
}
.vp-passport-card[data-style="aurora"]   { --pc-color:rgba(100,175,255,0.70); --pc-rgb:100,175,255; }
.vp-passport-card[data-style="midnight"] { --pc-color:rgba(140,128,200,0.70); --pc-rgb:140,128,200; background:rgba(28,30,48,0.78); border-color:rgba(255,255,255,0.10); }
.vp-passport-card[data-style="soft"]     { --pc-color:rgba(178,184,200,0.70); --pc-rgb:178,184,200; }
.vp-passport-card[data-style="pixel"]    { --pc-color:rgba(178,138,240,0.70); --pc-rgb:178,138,240; }
.vp-passport-card[data-style="stepsafe"] { --pc-color:rgba(94,205,160,0.70); --pc-rgb:94,205,160; }
.vp-passport-card[data-style="yogurt"]   { --pc-color:rgba(240,160,128,0.70); --pc-rgb:240,160,128; }
.vp-passport-card[data-style="midnight"] .vp-card-name { color:rgba(200,210,240,0.90); }
.vp-passport-card[data-style="midnight"] .vp-card-mood { color:rgba(160,170,212,0.62); }
.vp-passport-card.vp-selected::after {
  content:''; position:absolute; top:8px; right:8px; width:14px; height:14px;
  border-radius:50%; background:var(--pc-color,rgba(100,175,255,0.8));
  animation:vpCheckIn 0.3s var(--vp-ease-out) both;
}
@keyframes vpCheckIn {
  from { opacity:0; transform:scale(0.5); }
  to   { opacity:0.85; transform:scale(1); }
}
.vp-card-thumb {
  width:100%;
  aspect-ratio:1.613 / 1;
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,0.42);
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
}
.vp-card-thumb img {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.vp-card-name { font-family:var(--vp-font); font-size:11.5px; font-weight:600; color:rgba(0,0,0,0.78); letter-spacing:-0.05px; }
.vp-card-mood { font-family:var(--vp-font); font-size:10.5px; color:rgba(0,0,0,0.40); }

/* Buttons */
.vp-enter-btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 28px; border-radius:999px;
  background:#1d1d1f; color:#fff; font-family:var(--vp-font);
  font-size:13px; font-weight:600; letter-spacing:-0.1px;
  border:none; cursor:pointer; opacity:0.36; pointer-events:none;
  transition:opacity 0.32s ease, transform 0.2s ease, background 0.2s ease;
  margin-bottom:12px;
}
.vp-enter-btn:hover  { background:#2d2d2f; transform:translateY(-1px); }
.vp-enter-btn:active { transform:scale(0.97); }
.vp-enter-btn.vp-ready { opacity:1; pointer-events:auto; }
.vp-skip-link {
  font-family:var(--vp-font); font-size:12px; color:rgba(0,0,0,0.34);
  background:none; border:none; cursor:pointer; padding:4px 0;
  transition:color 0.18s ease;
}
.vp-skip-link:hover { color:rgba(0,0,0,0.58); }


/* ══════════════════════════════════════════════════════════════
   4. FLOATING PASSPORT WIDGET
   ══════════════════════════════════════════════════════════════ */

#vp-widget {
  position:fixed; bottom:24px; right:24px; z-index:800;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:8px; pointer-events:auto;
}
body.vp-entry-arriving #vp-widget {
  opacity:0;
  transform:translateY(10px) scale(0.94);
}
body.vp-entry-widget-ready #vp-widget {
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity 0.42s ease, transform 0.52s var(--vp-ease-out);
}
body.vp-entry-arriving .page-shell {
  opacity:0;
  transform:scale(1.02);
  filter:blur(8px);
}
body.vp-entry-widget-ready .page-shell {
  opacity:1;
  transform:scale(1);
  filter:blur(0);
  transition:opacity 0.78s ease, transform 0.9s var(--vp-ease-out), filter 0.9s ease;
}

/* Progression glow evolves as spirits awaken (0–6) */
#vp-widget[data-progress="0"] { --vp-progress-glow: rgba(140,200,255,0.00); }
#vp-widget[data-progress="1"] { --vp-progress-glow: rgba(140,200,255,0.05); }
#vp-widget[data-progress="2"] { --vp-progress-glow: rgba(140,200,255,0.10); }
#vp-widget[data-progress="3"] { --vp-progress-glow: rgba(140,200,255,0.15); }
#vp-widget[data-progress="4"] { --vp-progress-glow: rgba(140,200,255,0.20); }
#vp-widget[data-progress="5"] { --vp-progress-glow: rgba(140,200,255,0.27); }
#vp-widget[data-progress="6"] { --vp-progress-glow: rgba(140,200,255,0.36); }

.vp-widget-trigger {
  display:flex; align-items:center; gap:8px;
  height:48px; padding:0 14px 0 8px;
  border-radius:999px;
  background:rgba(255,255,255,0.76); border:1px solid rgba(255,255,255,0.82);
  box-shadow:var(--vp-shadow), 0 0 28px var(--vp-progress-glow);
  backdrop-filter:var(--vp-blur); -webkit-backdrop-filter:var(--vp-blur);
  cursor:pointer; user-select:none;
  transition:background 0.28s ease, box-shadow 0.8s ease, transform 0.18s ease;
}
.vp-widget-trigger:hover {
  transform:translateY(-1.5px);
  box-shadow:var(--vp-shadow-lg), 0 0 28px var(--vp-progress-glow);
}

/* The dock stays neutral; the selected card thumbnail carries the personality. */
#vp-widget[data-passport] .vp-widget-trigger {
  background:rgba(255,255,255,0.76);
  border-color:rgba(255,255,255,0.82);
}

.vp-widget-spirit { display:none; }
.vp-widget-card-thumb {
  width:46px;
  aspect-ratio:1.613 / 1;
  flex-shrink:0;
  border-radius:7px;
  overflow:hidden;
  background:rgba(255,255,255,0.52);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.72),
    0 6px 14px rgba(0,0,0,0.10);
  transform:translateZ(0);
}
.vp-widget-card-thumb img {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.vp-widget-name {
  max-width:72px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--vp-font);
  font-size:11px;
  font-weight:500;
  color:rgba(0,0,0,0.48);
  letter-spacing:0.02em;
  margin-left:-1px;
}

/* ── Progress dots ── */
.vp-dots { display:flex; align-items:center; gap:3.5px; }
.vp-dot {
  width:4.5px; height:4.5px; border-radius:50%;
  background:rgba(0,0,0,0.13);
  transition:background 0.5s ease, box-shadow 0.5s ease, transform 0.4s var(--vp-ease-out);
}
.vp-dot.vp-dot--filled {
  background:var(--dot-color, rgba(80,160,230,0.72));
  box-shadow:0 0 6px var(--dot-color, rgba(80,160,230,0.28));
  animation:vpDotPulse 3.8s ease-in-out infinite;
  animation-delay:var(--dot-delay,0s);
  transform:scale(1.1);
}
@keyframes vpDotPulse {
  0%, 100% { opacity:1;    transform:scale(1.1); }
  50%       { opacity:0.68; transform:scale(0.94); }
}
#vp-widget[data-passport="midnight"] .vp-dot { background:rgba(0,0,0,0.13); }


/* ── Expanded panel ── */
.vp-panel {
  width:296px; border-radius:var(--vp-radius);
  background:var(--vp-glass); border:1px solid var(--vp-border);
  box-shadow:var(--vp-shadow-lg); backdrop-filter:var(--vp-blur);
  -webkit-backdrop-filter:var(--vp-blur); overflow:visible;
  opacity:0; transform:scale(0.91) translateY(8px);
  transform-origin:bottom right; pointer-events:none;
  transition:opacity 0.28s var(--vp-ease-out), transform 0.28s var(--vp-ease-out);
}
.vp-panel:hover { cursor:pointer; }
#vp-widget.vp-expanded .vp-panel { opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }
#vp-widget[data-passport] .vp-panel {
  background:var(--vp-glass);
  border-color:var(--vp-border);
}


/* ── Homepage entry reveal from pre-homepage ── */
.vp-entry-reveal {
  position:fixed;
  inset:0;
  z-index:7600;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--entry-tint, #f5f5f7), white 18%) 0%, transparent 48%),
    rgba(255,255,255,0.46);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:opacity 0.32s ease, backdrop-filter 0.78s ease, -webkit-backdrop-filter 0.78s ease;
}
.vp-entry-reveal--visible {
  opacity:1;
}
.vp-entry-reveal--morph {
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
}
.vp-entry-reveal--leaving {
  opacity:0;
}
.vp-entry-card {
  width:min(420px, calc(100vw - 48px));
  aspect-ratio:1.613 / 1;
  border-radius:18px;
  overflow:hidden;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,0.18));
  transform:translate3d(0, 10px, 0) scale(1.02);
  opacity:0;
  transition:
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.38s ease,
    filter 0.78s ease;
}
.vp-entry-card img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.vp-entry-reveal--visible .vp-entry-card {
  opacity:1;
  transform:translate3d(0, 0, 0) scale(1);
}
.vp-entry-reveal--morph .vp-entry-card {
  opacity:0;
  transform:translate3d(var(--entry-x, 38vw), var(--entry-y, 34vh), 0) scale(0.18);
  filter:drop-shadow(0 10px 24px rgba(0,0,0,0.10));
}
.vp-entry-particles {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.vp-entry-particles span {
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  box-shadow:0 0 10px color-mix(in srgb, var(--entry-tint, #f5f5f7), white 12%);
  opacity:0;
  transform:translate(-50%, -50%);
}
.vp-entry-reveal--visible .vp-entry-particles span {
  animation:vpEntryParticle 0.9s cubic-bezier(0.16,1,0.3,1) both;
}
.vp-entry-particles span:nth-child(1) { --x:-120px; --y:-52px; animation-delay:0.08s; }
.vp-entry-particles span:nth-child(2) { --x:112px; --y:-42px; animation-delay:0.13s; }
.vp-entry-particles span:nth-child(3) { --x:-72px; --y:76px; animation-delay:0.18s; }
.vp-entry-particles span:nth-child(4) { --x:84px; --y:68px; animation-delay:0.23s; }
.vp-entry-particles span:nth-child(5) { --x:10px; --y:-104px; animation-delay:0.28s; }
@keyframes vpEntryParticle {
  0% { opacity:0; transform:translate(-50%, -50%) scale(0.72); }
  28% { opacity:0.82; }
  100% { opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.16); }
}

.vp-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 12px; border-bottom:1px solid rgba(0,0,0,0.055);
}
#vp-widget[data-passport="midnight"] .vp-panel-header { border-bottom-color:rgba(255,255,255,0.06); }
.vp-panel-title {
  font-family:var(--vp-font); font-size:11px; font-weight:600;
  color:rgba(0,0,0,0.55); letter-spacing:0.5px; text-transform:uppercase;
}
.vp-panel-count {
  font-family:var(--vp-font); font-size:11px; font-weight:500;
  color:rgba(0,0,0,0.36); background:rgba(0,0,0,0.055);
  padding:2px 9px; border-radius:999px;
  transition:color 0.4s ease, background 0.4s ease;
}
#vp-widget[data-passport="midnight"] .vp-panel-title { color:rgba(200,210,240,0.68); }
#vp-widget[data-passport="midnight"] .vp-panel-count { color:rgba(200,210,240,0.45); background:rgba(255,255,255,0.07); }

.vp-panel-body { padding:8px 12px 6px; display:flex; flex-direction:column; gap:2px; overflow:visible; }


/* ── Spirit slots in panel ── */
.vp-spirit-slot {
  position:relative;
  display:flex; align-items:center; gap:11px;
  padding:7px 8px; border-radius:10px;
  overflow:visible;
  transition:background 0.28s ease, box-shadow 0.32s var(--vp-ease-out);
  animation:vpSlotFloat 7.8s ease-in-out infinite;
  animation-delay:var(--slot-float-delay, 0s);
  will-change:transform;
}
.vp-spirit-slot:hover {
  background:rgba(255,255,255,0.48);
  box-shadow:0 8px 18px rgba(0,0,0,0.045), inset 0 0 0 1px rgba(255,255,255,0.34);
}
#vp-widget[data-passport="midnight"] .vp-spirit-slot:hover { background:rgba(255,255,255,0.05); }
@keyframes vpSlotFloat {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-1.8px); }
}

/* Spirit visual in panel — compact scale */
.vp-spirit-slot-orb {
  position:relative;
  z-index:2;
  flex-shrink:0; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
  transition:filter 0.5s ease;
}
.vp-mascot {
  position:relative;
  width:32px;
  height:32px;
  display:block;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.10));
  opacity:0.42;
  transform:translateY(1px) scale(0.92);
  transform-origin:center;
  transition:opacity 0.42s ease, filter 0.42s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.vp-mascot-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transition:opacity 0.38s ease, transform 0.38s var(--vp-ease-out);
}
.vp-mascot-hover { opacity:0; transform:translateY(1px) scale(0.98); }
.vp-spirit-slot:hover .vp-mascot,
.vp-spirit-slot--awake .vp-mascot {
  opacity:0.90;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,0.11));
  transform:translateY(0) scale(1);
}
.vp-spirit-slot:hover .vp-mascot {
  opacity:0.96;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,0.14));
  transform:translateY(-1px) scale(2);
}
.vp-spirit-slot:hover .vp-mascot-rest {
  opacity:0;
}
.vp-spirit-slot:hover .vp-mascot-hover {
  opacity:1;
  transform:translateY(0) scale(1);
}
.vp-spirit-slot--awake .vp-mascot-rest {
  opacity:1;
}
.vp-spirit-slot--awake .vp-mascot-hover {
  opacity:0;
}
.vp-spirit-slot--awake:hover .vp-mascot-rest {
  opacity:0;
}
.vp-spirit-slot--awake:hover .vp-mascot-hover {
  opacity:1;
  transform:translateY(0) scale(1);
}
.vp-spirit-slot--new .vp-mascot {
  animation:vpMascotDiscover 1.05s var(--vp-ease-out) both;
}
@keyframes vpMascotDiscover {
  0% { opacity:0.38; transform:translateY(4px) scale(0.86); filter:blur(1px) drop-shadow(0 4px 8px rgba(0,0,0,0.08)); }
  46% { opacity:1; transform:translateY(-4px) scale(1.10); }
  100% { opacity:0.94; transform:translateY(0) scale(1); filter:drop-shadow(0 8px 14px rgba(0,0,0,0.12)); }
}
.vp-spirit-slot-orb .vp-spirit {
  --s-w:  28px;
  --s-h:  24px;
  --s-gr: 7px;
  --s-gs: 2px;
}
.vp-spirit-slot-orb .vp-spirit::after {
  box-shadow:
    -3px 0 0 1.8px var(--s-eye, rgba(255,255,255,0.82)),
     3px 0 0 1.8px var(--s-eye, rgba(255,255,255,0.82));
}
.vp-spirit-slot-orb .vp-spirit[data-state="sleeping"]::after {
  box-shadow:
    -2.8px 0 0 0.5px var(--s-eye, rgba(255,255,255,0.28)),
     2.8px 0 0 0.5px var(--s-eye, rgba(255,255,255,0.28));
}

/* Newly awakened — spirit draws in */
.vp-spirit-slot--new .vp-spirit {
  animation: vpSpiritAwaken 1.0s var(--vp-ease-out) forwards !important;
}

.vp-spirit-info {
  flex:1; min-width:0;
  transition:transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), filter 0.34s ease;
}
.vp-spirit-slot:hover .vp-spirit-info {
  transform:translateY(-1px);
  filter:drop-shadow(0 3px 8px rgba(0,0,0,0.06));
}
.vp-spirit-label {
  font-family:var(--vp-font); font-size:12.5px; font-weight:500; line-height:1.2;
  color:rgba(0,0,0,0.38); transition:color 0.5s ease;
}
.vp-spirit-status {
  font-family:var(--vp-font); font-size:11px; font-weight:400; margin-top:2px;
  color:rgba(0,0,0,0.24); letter-spacing:0.5px; transition:color 0.5s ease;
}
.vp-spirit-slot--awake .vp-spirit-label { color:rgba(0,0,0,0.86); }
.vp-spirit-slot--awake .vp-spirit-status {
  color:rgba(0,0,0,0.48);
  opacity: 0.85;
}
/* Midnight text */
#vp-widget[data-passport="midnight"] .vp-spirit-label  { color:rgba(200,210,240,0.42); }
#vp-widget[data-passport="midnight"] .vp-spirit-status { color:rgba(200,210,240,0.22); }
#vp-widget[data-passport="midnight"] .vp-spirit-slot--awake .vp-spirit-label  { color:rgba(220,228,255,0.92); }
#vp-widget[data-passport="midnight"] .vp-spirit-slot--awake .vp-spirit-status { color:rgba(0,0,0,0.48); opacity:0.85; }

/* Panel footer */
.vp-panel-footer {
  padding:6px 16px 12px;
  border-top:1px solid rgba(0,0,0,0.04);
  text-align:center;
}
#vp-widget[data-passport="midnight"] .vp-panel-footer { border-top-color:rgba(255,255,255,0.05); }
.vp-panel-customize-btn {
  background:none; border:none; cursor:pointer;
  font-family:var(--vp-font); font-size:10.5px; font-weight:400;
  color:rgba(0,0,0,0.28); letter-spacing:0.25px;
  padding:4px 8px; border-radius:6px;
  transition:color 0.18s ease, background 0.18s ease;
}
.vp-panel-customize-btn:hover { color:rgba(0,0,0,0.52); background:rgba(0,0,0,0.04); }
#vp-widget[data-passport="midnight"] .vp-panel-customize-btn { color:rgba(200,210,240,0.30); }
#vp-widget[data-passport="midnight"] .vp-panel-customize-btn:hover { color:rgba(200,210,240,0.55); background:rgba(255,255,255,0.05); }


/* ══════════════════════════════════════════════════════════════
   5. WIDGET PULSE (spirit unlock feedback)
   ══════════════════════════════════════════════════════════════ */

#vp-widget.vp-pulse .vp-widget-trigger {
  animation: vpWidgetPulse 2s ease-out forwards;
}
@keyframes vpWidgetPulse {
  0%   { box-shadow:var(--vp-shadow), 0 0 28px var(--vp-progress-glow); }
  25%  { box-shadow:0 0 0 5px rgba(140,200,255,0.20), 0 0 0 10px rgba(140,200,255,0.09), var(--vp-shadow-lg), 0 0 36px rgba(140,200,255,0.22); }
  70%  { box-shadow:0 0 0 3px rgba(140,200,255,0.11), var(--vp-shadow-lg), 0 0 28px var(--vp-progress-glow); }
  100% { box-shadow:var(--vp-shadow), 0 0 28px var(--vp-progress-glow); }
}
#vp-widget[data-passport="midnight"].vp-pulse .vp-widget-trigger {
  animation: vpWidgetPulseDark 2s ease-out forwards;
}
@keyframes vpWidgetPulseDark {
  0%   { box-shadow:var(--vp-shadow), 0 0 28px var(--vp-progress-glow); }
  25%  { box-shadow:0 0 0 5px rgba(180,170,240,0.18), 0 0 0 10px rgba(180,170,240,0.08), var(--vp-shadow-lg); }
  70%  { box-shadow:0 0 0 3px rgba(180,170,240,0.10), var(--vp-shadow-lg); }
  100% { box-shadow:var(--vp-shadow), 0 0 28px var(--vp-progress-glow); }
}


/* ══════════════════════════════════════════════════════════════
   6. TOAST — spirit awakening notification
   ══════════════════════════════════════════════════════════════ */

.vp-toast {
  position:fixed; bottom:80px; right:24px; z-index:900;
  display:flex; align-items:center; gap:12px;
  padding:12px 18px 12px 14px; border-radius:14px;
  background:var(--vp-glass); border:1px solid var(--vp-border);
  box-shadow:var(--vp-shadow-lg); backdrop-filter:var(--vp-blur);
  -webkit-backdrop-filter:var(--vp-blur); max-width:265px;
  pointer-events:none; overflow:hidden;
  opacity:0; transform:translateY(10px) scale(0.95);
  transition:opacity 0.32s var(--vp-ease-out), transform 0.32s var(--vp-ease-out);
}
.vp-toast.vp-toast--visible { opacity:1; transform:translateY(0) scale(1); }
.vp-toast::before {
  content:''; position:absolute; left:0; top:10px; bottom:10px;
  width:3.5px; border-radius:0 2px 2px 0;
  background:var(--toast-color, rgba(120,185,255,0.8));
}
.vp-toast::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.18) 50%,transparent 70%);
  transform:translateX(-100%); animation:vpToastShimmer 0.9s 0.25s ease forwards;
}
@keyframes vpToastShimmer { to { transform:translateX(200%); } }

/* Mascot visual in toast — same source as check-in rows */
.vp-toast-spirit {
  flex-shrink:0; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
}
.vp-toast-spirit .vp-mascot {
  width:38px;
  height:38px;
  opacity:1;
  transform:translateY(0) scale(1);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,0.12));
  animation:vpMascotDiscover 1.05s var(--vp-ease-out) both;
}
.vp-toast-spirit .vp-mascot-rest {
  opacity:0;
}
.vp-toast-spirit .vp-mascot-hover {
  opacity:1;
  transform:translateY(0) scale(1);
}

.vp-toast-text { flex:1; }
.vp-toast-label { font-family:var(--vp-font); font-size:13px; font-weight:600; color:rgba(0,0,0,0.84); line-height:1.2; }
.vp-toast-sub   { font-family:var(--vp-font); font-size:11px; color:rgba(0,0,0,0.40); margin-top:2px; letter-spacing:0.2px; }


/* ══════════════════════════════════════════════════════════════
   7. PARTICLE BURST
   ══════════════════════════════════════════════════════════════ */

.vp-particle-burst {
  position:fixed; width:5px; height:5px; border-radius:50%;
  pointer-events:none; z-index:1001; transform-origin:center;
  animation:vpBurstFly 0.88s ease-out both; will-change:transform,opacity;
}
@keyframes vpBurstFly {
  0%   { opacity:0.88; transform:rotate(var(--angle)) translateX(3px) scale(1); }
  100% { opacity:0;    transform:rotate(var(--angle)) translateX(var(--dist)) scale(0.12); }
}


/* ══════════════════════════════════════════════════════════════
   8. GATHERING PARTICLES (final ending)
   ══════════════════════════════════════════════════════════════ */

.vp-gather-particle {
  position:fixed; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle,rgba(210,225,255,0.94),rgba(160,195,255,0.48));
  box-shadow:0 0 8px rgba(160,195,255,0.50);
  pointer-events:none; z-index:7900;
  animation:vpGatherFloat ease-in both; will-change:transform,opacity;
}
@keyframes vpGatherFloat {
  0%   { opacity:0;    transform:translate(0,0) scale(1.2); }
  14%  { opacity:0.74; }
  78%  { opacity:0.48; }
  100% { opacity:0;    transform:translate(var(--tx,0px),var(--ty,0px)) scale(0.18); }
}


/* ══════════════════════════════════════════════════════════════
   9. FINAL ENDING SEQUENCE — 6 spirits, cinematic
   ══════════════════════════════════════════════════════════════ */

/* Atmosphere shift */
body.vp-atmosphere-shift::after {
  content:''; position:fixed; inset:0; z-index:7800;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(190,215,255,0.08),transparent 70%);
  pointer-events:none;
  animation:vpAtmosphereShimmer 2.4s ease-in-out both;
}
@keyframes vpAtmosphereShimmer {
  0%  { opacity:0; } 40% { opacity:1; } 100% { opacity:0.35; }
}
body.vp-final-bloom .ambient-blob {
  opacity:0.54 !important; filter:blur(44px) !important;
  transition:opacity 2.2s ease, filter 2.2s ease !important;
}

/* Ending container */
#vp-ending {
  position:fixed; inset:0; z-index:8000;
  pointer-events:none; opacity:0;
  overflow:hidden;
  transition:opacity 1.0s var(--vp-ease);
}
#vp-ending.vp-ending--active  { opacity:1; }
#vp-ending.vp-ending--leaving { opacity:0; transition-duration:1.45s; }

/* ── Backdrop — pure white, no tint ── */
#vp-ending::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:#ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.8s ease;
}
/* Theme variants — all pure white */
#vp-ending[data-passport="soft"]::before,
#vp-ending[data-passport="pixel"]::before,
#vp-ending[data-passport="stepsafe"]::before,
#vp-ending[data-passport="yogurt"]::before { background:#ffffff; }

#vp-ending.vp-ending--flash::before { filter:brightness(1.10); }

.vp-ending-orbit {
  position:absolute; left:50%; top:50%;
  width:min(520px, 82vw);
  height:min(360px, 56vw);
  transform:translate(-50%, -50%);
  transform-origin:center;
  z-index:2;
  transition:opacity 0.9s ease, filter 1.2s ease, transform 1.2s var(--vp-ease-out);
}
#vp-ending.vp-ending--orbiting .vp-ending-orbit {
  animation:vpEndingOrbit 8.5s linear infinite;
}
#vp-ending.vp-ending--flash .vp-ending-orbit,
#vp-ending.vp-ending--video .vp-ending-orbit {
  opacity:0;
  filter:blur(10px);
  transform:translate(-50%, -50%) scale(0.72);
  animation:none;
}
@keyframes vpEndingOrbit {
  from { transform:translate(-50%, -50%) rotate(0deg); }
  to   { transform:translate(-50%, -50%) rotate(360deg); }
}

/* ── Spirit entities in ending — positioned via wrapper ── */
.vp-ending-spirit {
  position:absolute; left:50%; top:50%;
  opacity:0;
  transform:translate(-50%,-50%) translate(0px,0px) scale(0.6);
  transition:
    opacity  1.1s var(--vp-ease-out),
    transform 1.5s var(--vp-ease-out);
  transition-delay: var(--e-delay, 0s);
}
#vp-ending.vp-ending--active .vp-ending-spirit {
  opacity:1;
  transform:translate(-50%,-50%) translate(0px,0px) scale(0.86);
}
/* Spread phase: each spirit drifts to its orbit position */
#vp-ending.vp-ending--spread .vp-ending-spirit {
  opacity:1;
  transform:translate(-50%,-50%) translate(var(--e-x,0px),var(--e-y,0px)) scale(1);
  animation:vpEndingSpiritFloat 4.8s ease-in-out infinite;
  animation-delay:calc(var(--e-delay,0s) * 2);
}
/* Gather phase: spirits drift inward */
#vp-ending.vp-ending--gather .vp-ending-spirit {
  transform:translate(-50%,-50%)
    translate(calc(var(--e-x,0px)*0.11), calc(var(--e-y,0px)*0.11))
    scale(0.76);
  transition-duration: 2.2s;
  transition-delay: calc(var(--e-delay,0s) * 0.5);
  animation:none;
}
/* Dismiss phase: spirits drift outward and fade */
#vp-ending.vp-ending--leaving .vp-ending-spirit {
  opacity:0;
}
@keyframes vpEndingSpiritFloat {
  0%, 100% { margin-top:0; }
  50% { margin-top:-7px; }
}

/* Spirits in ending are larger */
#vp-ending .vp-spirit {
  --s-w:  52px;
  --s-h:  44px;
  --s-gr: 14px;
  --s-gs: 5px;
  animation-duration:5.6s;
}
#vp-ending .vp-spirit::after {
  box-shadow:
    -5px 0 0 2.5px var(--s-eye, rgba(255,255,255,0.84)),
     5px 0 0 2.5px var(--s-eye, rgba(255,255,255,0.84));
}

/* Synchronized glow pulse — all spirits pulse together */
#vp-ending.vp-ending--sync .vp-spirit[data-state="awake"] {
  animation: vpSpiritFloat var(--s-dur,4.4s) ease-in-out infinite,
             vpSpiritSyncGlow 2.8s ease-in-out infinite !important;
  animation-delay: 0s, var(--e-delay,0s) !important;
}
@keyframes vpSpiritSyncGlow {
  0%, 100% { box-shadow:
    0 0 var(--s-gr,14px) var(--s-gs,5px) var(--s-glow,rgba(140,200,255,0.50)),
    0 0 calc(var(--s-gr,14px)*2.4) calc(var(--s-gs,5px)*2) var(--s-glow2,rgba(140,200,255,0.18)); }
  50%       { box-shadow:
    0 0 calc(var(--s-gr,14px)*2.2) calc(var(--s-gs,5px)*1.8) var(--s-glow,rgba(140,200,255,0.82)),
    0 0 calc(var(--s-gr,14px)*4)   calc(var(--s-gs,5px)*3.5) var(--s-glow2,rgba(140,200,255,0.32)); }
}

.vp-ending-glow {
  position:absolute; left:50%; top:50%; z-index:1;
  width:120px; height:120px;
  border-radius:50%;
  opacity:0;
  transform:translate(-50%, -50%) scale(0.5);
  background:radial-gradient(circle, rgba(255,255,255,0.98) 0%, rgba(255,245,210,0.74) 28%, rgba(210,228,255,0.28) 56%, transparent 74%);
  filter:blur(8px);
  transition:opacity 1.2s ease, transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), filter 1.8s ease;
}
#vp-ending.vp-ending--spread .vp-ending-glow { opacity:0.46; transform:translate(-50%, -50%) scale(1.3); }
#vp-ending.vp-ending--gather .vp-ending-glow { opacity:0.86; transform:translate(-50%, -50%) scale(2.35); filter:blur(14px); }
#vp-ending.vp-ending--flash  .vp-ending-glow { opacity:1;    transform:translate(-50%, -50%) scale(7.4);  filter:blur(20px); }
#vp-ending.vp-ending--video  .vp-ending-glow { opacity:0;    transition-duration:0.8s; }

.vp-ending-flash {
  position:absolute; inset:-10%; z-index:3;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.98), rgba(255,255,255,0.66) 34%, rgba(255,255,255,0.0) 72%);
  opacity:0;
  filter:blur(10px);
  transition:opacity 1.05s ease, filter 1.05s ease;
}
#vp-ending.vp-ending--flash .vp-ending-flash { opacity:1; filter:blur(3px); }
#vp-ending.vp-ending--video .vp-ending-flash { opacity:0; transition-duration:1.2s; }

.vp-ending-sparkles {
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.7s ease;
}
#vp-ending.vp-ending--spread .vp-ending-sparkles,
#vp-ending.vp-ending--gather .vp-ending-sparkles { opacity:1; }
.vp-ending-sparkles span {
  position:absolute;
  left:var(--spark-x, 50%);
  top:var(--spark-y, 50%);
  width:3px; height:3px;
  border-radius:50%;
  background:rgba(220,205,255,0.90);
  box-shadow:0 0 8px rgba(210,195,255,0.55);
  opacity:0;
  animation:vpEndingSparkle 2.6s ease-in-out infinite;
  animation-delay:var(--spark-delay,0s);
}
@keyframes vpEndingSparkle {
  0%, 100% { opacity:0; transform:translate3d(0, 8px, 0) scale(0.34); }
  42% { opacity:0.78; transform:translate3d(6px, -10px, 0) scale(1); }
  70% { opacity:0.36; transform:translate3d(-5px, -18px, 0) scale(0.62); }
}

/* ── Video stage: rounded, soft, centered ── */
.vp-ending-video-stage {
  position:absolute; left:50%; top:50%; z-index:4;
  width:min(400px, 58vw);
  border-radius:28px;
  overflow:hidden;
  transform:translate(-50%, -46%) scale(0.96);
  opacity:0;
  transition:opacity 1.0s var(--vp-ease-out), transform 1.0s var(--vp-ease-out), filter 1.0s ease;
  filter:blur(8px);
}
#vp-ending.vp-ending--video .vp-ending-video-stage {
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
  filter:blur(0);
}

/* ── Video: clean, looping, softly breathing ── */
.vp-ending-video {
  width:100%;
  height:auto;
  display:block;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  animation:vpVideoBreath 5.2s ease-in-out infinite;
}
@keyframes vpVideoBreath {
  0%,100% { transform:translateY(0) scale(1); }
  50%     { transform:translateY(-5px) scale(1.008); }
}

/* ── Ambient drifting pastel magic stars ── */
.vp-magical-stars {
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.8s ease;
}
#vp-ending.vp-ending--video .vp-magical-stars { opacity:1; }
.vp-magical-stars span {
  position:absolute;
  width:var(--sz,4px); height:var(--sz,4px);
  border-radius:50%;
  background:var(--col,rgba(255,210,200,0.68));
  box-shadow:0 0 7px var(--col,rgba(255,210,200,0.48));
  opacity:0;
  left:var(--lx,50%); top:var(--ly,50%);
  animation:vpMagicStarFloat var(--dur,9s) ease-in-out infinite var(--del,0s);
}
@keyframes vpMagicStarFloat {
  0%,100% { opacity:0;    transform:translateY(0) scale(0.5); }
  22%     { opacity:0.70; }
  55%     { opacity:0.46; transform:translateY(-20px) scale(1.1); }
  80%     { opacity:0.18; transform:translateY(-32px) scale(0.6); }
}

/* ── Sparkle trail — Disney comet cursor ── */
.vp-spark-trail {
  position:absolute;
  width:36px; height:36px;
  z-index:6;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%);
  /* left/top driven by JS rAF arc animation — no CSS transition here */
  transition: opacity 0.44s ease;
}
.vp-spark-trail--active { opacity:1; }

/* ── Glitter particle (spawned dynamically by JS) ── */
.vp-glitter-p {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:7;
}

.vp-spark-trail-core {
  position:absolute; inset:-6px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,242,218,0.98) 0%,
    rgba(255,215,235,0.76) 36%,
    rgba(215,195,255,0.42) 62%,
    transparent 78%);
  filter:blur(4px);
  animation:vpTrailPulse 1.0s ease-in-out infinite;
}
@keyframes vpTrailPulse {
  0%,100% { transform:scale(1);   opacity:0.84; }
  50%     { transform:scale(1.8); opacity:1; }
}

/* Burst when trail arrives at a text */
.vp-spark-trail--burst .vp-spark-trail-core {
  animation:vpTrailBurst 0.80s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes vpTrailBurst {
  0%   { transform:scale(1);   opacity:0.86; }
  35%  { transform:scale(3.2); opacity:1; filter:blur(2px); }
  100% { transform:scale(1.4); opacity:0.72; filter:blur(4px); }
}

/* ── Magical floating texts ── */
.vp-magical-texts {
  position:absolute; inset:0;
  z-index:5;
  pointer-events:none;
}

.vp-magical-text {
  position:absolute;
  opacity:0;
  filter:blur(7px);
  transition:opacity 1.0s cubic-bezier(0.22,1,0.36,1),
             filter  1.0s cubic-bezier(0.22,1,0.36,1);
}

/* ── Text positions ── */
.vp-magical-text--top {
  top:5%; left:50%; transform:translateX(-50%);
  width:auto; max-width:min(520px,72vw); text-align:center;
}
.vp-magical-text--left {
  left:2%; top:50%; transform:translateY(-50%);
  width:auto; max-width:min(260px,26vw); text-align:right;
}
.vp-magical-text--right {
  right:2%; top:50%; transform:translateY(-50%);
  width:auto; max-width:min(260px,26vw); text-align:left;
}
.vp-magical-text--bottom {
  bottom:5%; left:50%; transform:translateX(-50%);
  width:auto; max-width:min(520px,72vw); text-align:center;
}

/* visible state — blur lifts, gentle float begins */
.vp-magical-text--visible { opacity:1; filter:blur(0); }
.vp-magical-text--visible.vp-magical-text--top,
.vp-magical-text--visible.vp-magical-text--bottom {
  animation:vpMTextFloatVert 6.2s ease-in-out infinite;
}
.vp-magical-text--visible.vp-magical-text--left,
.vp-magical-text--visible.vp-magical-text--right {
  animation:vpMTextFloatSide 6.8s ease-in-out infinite;
}
@keyframes vpMTextFloatVert {
  0%,100% { margin-top:0; }
  50%     { margin-top:-9px; }
}
@keyframes vpMTextFloatSide {
  0%,100% { margin-top:0; }
  50%     { margin-top:-7px; }
}

/* ── Individual text lines — no browser auto-wrap ── */
.vp-mtext-line {
  display:block;
  white-space:nowrap;
}

/* ── Base magical text ── */
.vp-mtext-body {
  display:block;
  position:relative;
  font-family:'Quicksand', 'M PLUS Rounded 1c', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  font-size:clamp(21px, 3.4vw, 34px);
  font-weight:600;
  line-height:1.55;
  color:rgba(52,32,62,0.84);
  text-shadow:
    0 0 14px rgba(190,155,255,0.50),
    0 0 32px rgba(255,175,205,0.28);
  letter-spacing:0.01em;
}

/* Soft breathing aura behind each text block — tied to the text, not the scene */
.vp-magical-text--visible .vp-mtext-body::before {
  content:'';
  position:absolute;
  inset:-18px -28px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(208,188,255,0.18) 0%, transparent 68%);
  filter:blur(14px);
  pointer-events:none;
  z-index:-1;
  animation:vpTextAuraPulse 4.2s ease-in-out infinite;
}
@keyframes vpTextAuraPulse {
  0%,100% { opacity:0.65; transform:scale(1); }
  50%     { opacity:1;    transform:scale(1.10); }
}

/* ── Per-language refinements ── */

/* English — airy, generous spacing */
.vp-mtext-body--en {
  font-size:clamp(21px, 3.2vw, 32px);
  line-height:1.65;
  letter-spacing:0.02em;
}

/* Chinese — balanced, compact, clean */
.vp-mtext-body--zh {
  font-size:clamp(20px, 3.0vw, 30px);
  line-height:1.52;
  letter-spacing:0.04em;
}

/* Japanese — refined, tighter tracking */
.vp-mtext-body--ja {
  font-size:clamp(17px, 2.4vw, 24px);
  line-height:1.72;
  letter-spacing:0.06em;
  font-weight:500;
}

/* Thai — extra breathing room for tall glyphs */
.vp-mtext-body--th {
  font-size:clamp(19px, 2.8vw, 28px);
  line-height:1.90;
  letter-spacing:0.01em;
}

/* ── Organic floating aura — replaces static blobs ── */
.vp-magical-aura {
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity 2.6s ease;
}
#vp-ending.vp-ending--video .vp-magical-aura { opacity:1; }

.vp-aura-b1, .vp-aura-b2, .vp-aura-b3 {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
/* Lavender — drifts upper-left, slow and wide */
.vp-aura-b1 {
  width:52%; height:46%;
  left:18%; top:16%;
  background:radial-gradient(circle, rgba(218,198,255,0.28) 0%, rgba(200,185,255,0.10) 50%, transparent 72%);
  filter:blur(42px);
  animation:vpAuraBlob1 9.4s ease-in-out infinite;
}
/* Pink blush — drifts lower-right, medium */
.vp-aura-b2 {
  width:44%; height:38%;
  left:42%; top:44%;
  background:radial-gradient(circle, rgba(255,198,218,0.24) 0%, rgba(255,185,205,0.08) 52%, transparent 72%);
  filter:blur(38px);
  animation:vpAuraBlob2 11.2s ease-in-out infinite 2.4s;
}
/* Sky blue — drifts bottom, gentle pulse */
.vp-aura-b3 {
  width:40%; height:48%;
  left:28%; top:52%;
  background:radial-gradient(circle, rgba(192,215,255,0.20) 0%, rgba(178,205,255,0.07) 50%, transparent 70%);
  filter:blur(46px);
  animation:vpAuraBlob3 8.6s ease-in-out infinite 5.1s;
}
@keyframes vpAuraBlob1 {
  0%,100% { transform:translate(0,0) scale(1);     opacity:0.72; }
  34%     { transform:translate(-22px,-18px) scale(1.12); opacity:1; }
  68%     { transform:translate(16px,12px)  scale(0.88); opacity:0.52; }
}
@keyframes vpAuraBlob2 {
  0%,100% { transform:translate(0,0) scale(1);     opacity:0.58; }
  42%     { transform:translate(20px,-16px) scale(1.14); opacity:0.90; }
  76%     { transform:translate(-14px,18px) scale(0.86); opacity:0.42; }
}
@keyframes vpAuraBlob3 {
  0%,100% { transform:translate(0,0) scale(1);     opacity:0.50; }
  30%     { transform:translate(14px,-10px) scale(1.10); opacity:0.78; }
  62%     { transform:translate(-18px,14px) scale(0.92); opacity:0.36; }
}

/* ── Mobile: vertical magical flow ── */
@media (max-width:640px) {
  .vp-magical-texts {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    padding-bottom:22px;
    gap:10px;
  }
  .vp-magical-text {
    position:static !important;
    transform:none !important;
    width:min(320px,88vw) !important;
    text-align:center !important;
    word-break:normal !important;
  }
  .vp-mtext-body,
  .vp-magical-text--left  .vp-mtext-body,
  .vp-magical-text--right .vp-mtext-body {
    font-size:clamp(18px,5.5vw,26px) !important;
  }
  .vp-magical-text--visible.vp-magical-text--top,
  .vp-magical-text--visible.vp-magical-text--left,
  .vp-magical-text--visible.vp-magical-text--right,
  .vp-magical-text--visible.vp-magical-text--bottom {
    animation:vpMTextFloatVert 6.2s ease-in-out infinite !important;
  }
}

/* ── Ending scene RWD — tablet (641–900px) ── */
@media (max-width:900px) and (min-width:641px) {
  .vp-ending-video-stage {
    width: min(340px, 72vw);
    top: 46%;
  }
}

/* ── Ending scene RWD — mobile (≤640px) ── */
@media (max-width:640px) {
  /* Video: large, centered, pushed upward to leave room for stacked texts */
  .vp-ending-video-stage {
    width: min(88vw, 360px);
    top: 36%;
    border-radius: 18px;
  }
  #vp-ending.vp-ending--video .vp-ending-video-stage {
    transform: translate(-50%, -50%) scale(1);
  }
  /* Calm breathing on mobile — less movement to avoid layout shift */
  .vp-ending-video {
    animation: vpVideoBreathMobile 5.2s ease-in-out infinite;
  }
  @keyframes vpVideoBreathMobile {
    0%,100% { transform: translateY(0) scale(1); }
    50%     { transform: translateY(-3px) scale(1.004); }
  }
  /* Text stack: sits below the video */
  .vp-magical-texts {
    justify-content: flex-end;
    padding-bottom: 18px;
  }
  /* Shrink text slightly on small phones */
  .vp-mtext-body--en,
  .vp-mtext-body--zh,
  .vp-mtext-body--th,
  .vp-mtext-body--ja {
    font-size: clamp(14px, 4.2vw, 20px) !important;
    line-height: 1.55 !important;
  }
  /* Smaller spark trail on mobile */
  .vp-spark-trail { width: 24px; height: 24px; }
}

/* ── Very small phones (≤400px) ── */
@media (max-width:400px) {
  .vp-ending-video-stage {
    width: 90vw;
    top: 34%;
    border-radius: 14px;
  }
  .vp-ending-orbit { width:86vw; height:62vw; }
  #vp-ending .vp-spirit { --s-w:36px; --s-h:30px; --s-gr:10px; --s-gs:3px; }
}


/* ══════════════════════════════════════════════════════════════
   10. CUSTOMIZATION MODAL
   ══════════════════════════════════════════════════════════════ */

#vp-customize-modal {
  position:fixed; inset:0; z-index:8600;
  display:flex; align-items:center; justify-content:center;
  background:rgba(242,244,250,0.55);
  backdrop-filter:saturate(140%) blur(18px);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  opacity:0; pointer-events:none; transition:opacity 0.28s ease;
}
#vp-customize-modal.vp-active { opacity:1; pointer-events:auto; }
.vp-customize-inner {
  background:rgba(255,255,255,0.86); border:1px solid rgba(255,255,255,0.90);
  box-shadow:0 28px 80px rgba(0,0,0,0.14),0 6px 20px rgba(0,0,0,0.07);
  backdrop-filter:var(--vp-blur); -webkit-backdrop-filter:var(--vp-blur);
  border-radius:20px; padding:28px 24px 24px;
  max-width:560px; width:calc(100% - 48px);
  animation:vpCustomizeIn 0.3s var(--vp-ease-out) both;
}
@keyframes vpCustomizeIn {
  from { opacity:0; transform:scale(0.95) translateY(10px); }
  to   { opacity:1; transform:scale(1)    translateY(0); }
}
.vp-customize-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;
}
.vp-customize-title {
  font-family:var(--vp-font); font-size:16px; font-weight:600;
  color:rgba(0,0,0,0.82); letter-spacing:-0.15px;
}
.vp-customize-close {
  width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,0.06);
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:15px; line-height:1; color:rgba(0,0,0,0.46);
  transition:background 0.18s ease, color 0.18s ease;
}
.vp-customize-close:hover { background:rgba(0,0,0,0.10); color:rgba(0,0,0,0.70); }
.vp-customize-confirm { width:100%; margin-top:20px; margin-bottom:0; }

/* Immersive card selection portal */
#vp-customize-modal.vp-card-portal {
  background:rgba(246,247,250,0.78);
  overflow:hidden;
}
.vp-card-portal .vp-portal-atm {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.vp-card-portal .vp-portal-atm span {
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--portal-color, 178,184,200),0.26), transparent 68%);
  animation:vpPortalFloat 18s ease-in-out infinite;
}
.vp-card-portal .vp-portal-atm span:nth-child(1) { width:320px;height:320px;left:4%;top:8%; }
.vp-card-portal .vp-portal-atm span:nth-child(2) { width:240px;height:240px;right:7%;top:10%;animation-delay:-4s; }
.vp-card-portal .vp-portal-atm span:nth-child(3) { width:190px;height:190px;left:18%;bottom:12%;animation-delay:-8s; }
.vp-card-portal .vp-portal-atm span:nth-child(4) { width:340px;height:340px;right:3%;bottom:4%;animation-delay:-12s; }
.vp-card-portal .vp-portal-atm span:nth-child(5) { width:130px;height:130px;left:50%;top:4%;animation-delay:-6s; }
@keyframes vpPortalFloat {
  0%, 100% { transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(18px,-16px,0) scale(1.04); }
}
.vp-portal-close {
  position:absolute;
  top:22px;
  right:22px;
  z-index:3;
}
.vp-portal-content {
  position:relative;
  z-index:1;
  width:100%;
  max-width:760px;
  min-height:min(620px, calc(100vh - 56px));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:44px 18px 34px;
  animation:vpPortalIn 0.42s var(--vp-ease-out) both;
}
@keyframes vpPortalIn {
  from { opacity:0; transform:translateY(14px) scale(0.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.vp-portal-heading {
  text-align:center;
  margin-bottom:22px;
}
.vp-portal-title {
  font-family:var(--vp-font);
  font-size:clamp(19px, 3vw, 25px);
  font-weight:600;
  color:rgba(29,29,31,0.84);
  letter-spacing:-0.24px;
}
.vp-portal-sub {
  margin-top:7px;
  font-family:var(--vp-font);
  font-size:12.5px;
  color:rgba(0,0,0,0.44);
}
.vp-portal-carousel {
  position:relative;
  width:100%;
  height:190px;
}
.vp-portal-card {
  position:absolute;
  left:50%;
  top:50%;
  cursor:pointer;
  user-select:none;
  outline:none;
  transition:transform 0.72s cubic-bezier(0.16,1,0.3,1), opacity 0.72s cubic-bezier(0.16,1,0.3,1);
}
.vp-portal-card-float {
  width:280px;
  aspect-ratio:1.613 / 1;
  animation:vpPortalCardFloat 5.8s ease-in-out infinite;
}
@keyframes vpPortalCardFloat {
  0%, 100% { transform:translateY(0) rotate(0deg); }
  50% { transform:translateY(-5px) rotate(0.45deg); }
}
.vp-portal-card-inner {
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform 0.86s cubic-bezier(0.22,1,0.36,1);
}
.vp-card-portal:not(.vp-portal-resetting-flip) .vp-portal-card--active:hover .vp-portal-card-inner,
.vp-card-portal:not(.vp-portal-resetting-flip) .vp-portal-card--active:focus-within .vp-portal-card-inner {
  transform:rotateY(180deg);
}
.vp-portal-resetting-flip .vp-portal-card-inner {
  transform:rotateY(0deg) !important;
}
.vp-portal-card-face {
  position:absolute;
  inset:0;
  border-radius:14px;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,0.16), 0 4px 14px rgba(0,0,0,0.08);
}
.vp-portal-card-back { transform:rotateY(180deg); }
.vp-portal-card-face img {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.vp-card-nameplate {
  position:absolute;
  left:20px;
  top:var(--name-y, 52%);
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  min-width:25%;
  max-width:34%;
  padding:0;
  border-radius:0;
  font-family:var(--vp-font);
  font-size:clamp(9px, 1.8vw, 12px);
  font-weight:500;
  line-height:1.1;
  letter-spacing:0.10em;
  color:var(--name-color, rgba(70,44,58,0.58));
  background:transparent;
  text-shadow:0 1px 8px rgba(255,255,255,0.38);
  text-align:left;
  pointer-events:none;
}
.vp-card-nameplate-kicker {
  font-size:0.72em;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  opacity:0.58;
}
.vp-card-nameplate-value {
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:1.18em;
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0.92;
  margin-top:8px;
}
.vp-card-nameplate-value + .vp-card-nameplate-kicker { margin-top:20px; }
.vp-card-nameplate-date {
  font-size:0.98em;
  letter-spacing:0.10em;
  opacity:0.82;
  margin-top:8px;
}
.vp-portal-card--active {
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  z-index:4;
}
.vp-portal-card--prev {
  transform:translate(calc(-50% - 210px), -50%) scale(0.78) perspective(700px) rotateY(7deg);
  opacity:0.56;
  z-index:2;
}
.vp-portal-card--next {
  transform:translate(calc(-50% + 210px), -50%) scale(0.78) perspective(700px) rotateY(-7deg);
  opacity:0.56;
  z-index:2;
}
.vp-portal-card--hidden {
  transform:translate(-50%,-50%) scale(0.70);
  opacity:0;
  pointer-events:none;
}
.vp-portal-card.vp-selected .vp-portal-card-front {
  box-shadow:
    0 22px 58px rgba(0,0,0,0.18),
    0 0 0 2px rgba(var(--portal-color,178,184,200),0.50),
    0 0 28px rgba(var(--portal-color,178,184,200),0.22);
}
.vp-portal-label {
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:38px;
  gap:3px;
  margin-top:10px;
  font-family:var(--vp-font);
}
.vp-portal-label-name {
  font-size:15px;
  font-weight:600;
  color:rgba(0,0,0,0.78);
}
.vp-portal-label-mood {
  font-size:11.5px;
  color:rgba(0,0,0,0.36);
}
.vp-portal-dots {
  display:flex;
  align-items:center;
  gap:8px;
  margin:16px 0 22px;
}
.vp-portal-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  border:none;
  padding:0;
  background:rgba(0,0,0,0.18);
  cursor:pointer;
  transition:width 0.35s ease, background 0.3s ease;
}
.vp-portal-dot--active {
  width:18px;
  border-radius:3px;
  background:rgba(0,0,0,0.54);
}


/* ══════════════════════════════════════════════════════════════
   SELECTED CARD OVERLAY + STAMP MOMENT
   ══════════════════════════════════════════════════════════════ */

#vp-card-overlay,
#vp-stamp-card {
  position:fixed;
  inset:0;
  z-index:8700;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
#vp-card-overlay {
  background:rgba(242,244,250,0.58);
  backdrop-filter:saturate(150%) blur(24px);
  -webkit-backdrop-filter:saturate(150%) blur(24px);
  opacity:0;
  transition:opacity 0.42s ease;
  pointer-events:none;
}
#vp-card-overlay.vp-card-overlay--active {
  opacity:1;
  pointer-events:auto;
}
.vp-card-overlay-shell {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  transform:translateY(14px) scale(0.96);
  opacity:0;
  transition:opacity 0.52s var(--vp-ease-out), transform 0.52s var(--vp-ease-out);
}
#vp-card-overlay.vp-card-overlay--active .vp-card-overlay-shell {
  opacity:1;
  transform:translateY(0) scale(1);
}
.vp-selected-card {
  width:min(520px, calc(100vw - 44px));
  aspect-ratio:1.613 / 1;
  perspective:1400px;
  filter:drop-shadow(0 28px 48px rgba(0,0,0,0.18));
}
.vp-selected-card-inner {
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
#vp-card-overlay.vp-card-overlay--flipped .vp-selected-card-inner,
#vp-stamp-card .vp-selected-card-inner {
  transform:rotateY(180deg);
}
.vp-selected-card-face {
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,0.22);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.72),
    0 0 38px rgba(var(--pc-rgb, 140, 200, 255), 0.20);
}
.vp-selected-card-back { transform:rotateY(180deg); }
.vp-selected-card-face img {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.vp-selected-card .vp-card-nameplate {
  font-size:clamp(10px, 2vw, 15px);
}
.vp-card-overlay-count {
  font-family:var(--vp-font);
  font-size:12px;
  font-weight:500;
  color:rgba(29,29,31,0.52);
  padding:7px 13px;
  border-radius:999px;
  background:rgba(255,255,255,0.58);
  border:1px solid rgba(255,255,255,0.78);
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
}
.vp-card-stamps {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.vp-card-stamp-slot {
  position:absolute;
  left:var(--slot-x);
  top:var(--slot-y);
  width:var(--slot-w);
  height:var(--slot-h);
  transform:translate(-50%, -50%);
  border-radius:18%;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  background:transparent;
  opacity:0;
}
.vp-card-stamp-slot--discovered {
  opacity:0.92;
  border-color:color-mix(in srgb, var(--stamp-color), white 32%);
  background:radial-gradient(circle, color-mix(in srgb, var(--stamp-color), white 38%), color-mix(in srgb, var(--stamp-color), transparent 32%));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.42) inset,
    0 0 min(2.4vw, 18px) color-mix(in srgb, var(--stamp-color), transparent 52%);
}
.vp-card-stamp-mark {
  position:relative;
  width:54%;
  height:54%;
  display:block;
  font-size:0;
}
.vp-card-stamp-mark::before {
  content:'';
  position:absolute;
  left:50%;
  top:48%;
  width:42%;
  height:68%;
  border-right:min(0.42vw, 4px) solid rgba(255,255,255,0.94);
  border-bottom:min(0.42vw, 4px) solid rgba(255,255,255,0.94);
  transform:translate(-50%, -50%) rotate(42deg);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.14));
}
#vp-stamp-card {
  inset:auto 22px 82px auto;
  width:min(290px, calc(100vw - 44px));
  aspect-ratio:1.613 / 1;
  justify-content:flex-end;
  align-items:flex-end;
  opacity:0;
  transform:translateY(12px) scale(0.94);
  transition:opacity 0.38s ease, transform 0.45s var(--vp-ease-out);
}
#vp-stamp-card.vp-stamp-card--active {
  opacity:1;
  transform:translateY(0) scale(1);
}
#vp-stamp-card .vp-selected-card {
  width:100%;
}
#vp-stamp-card.vp-stamp-card--mark .vp-selected-card {
  animation:vpCardReceiveStamp 0.82s var(--vp-ease-out) both;
}
#vp-stamp-card.vp-stamp-card--mark .vp-card-stamp-slot--current {
  animation:vpStampLands 0.78s var(--vp-ease-out) both;
}
#vp-stamp-card.vp-stamp-card--mark .vp-selected-card-back::after {
  content:'';
  position:absolute;
  left:var(--active-slot-x);
  top:var(--active-slot-y);
  width:var(--active-slot-w);
  height:var(--active-slot-h);
  border-radius:22%;
  background:radial-gradient(circle, color-mix(in srgb, var(--stamp-color), transparent 58%), transparent 68%);
  opacity:0;
  transform:translate(-50%, -50%) scale(0.82);
  animation:vpStampGlow 0.88s ease-out both;
  pointer-events:none;
}
.vp-stamp-particles {
  position:absolute;
  left:var(--active-slot-x);
  top:var(--active-slot-y);
  width:var(--active-slot-w);
  height:var(--active-slot-h);
  transform:translate(-50%, -50%);
  pointer-events:none;
  opacity:0;
}
#vp-stamp-card.vp-stamp-card--mark .vp-stamp-particles {
  opacity:1;
}
.vp-stamp-particles span {
  position:absolute;
  left:50%;
  top:50%;
  width:min(0.62vw, 5px);
  height:min(0.62vw, 5px);
  border-radius:50%;
  background:color-mix(in srgb, var(--stamp-color), white 24%);
  box-shadow:0 0 8px color-mix(in srgb, var(--stamp-color), transparent 40%);
  opacity:0;
  transform:translate(-50%, -50%);
  animation:vpStampParticle 0.74s ease-out both;
}
.vp-stamp-particles span:nth-child(1) { --px:-72%; --py:-38%; animation-delay:0.08s; }
.vp-stamp-particles span:nth-child(2) { --px: 70%; --py:-30%; animation-delay:0.12s; }
.vp-stamp-particles span:nth-child(3) { --px:-54%; --py: 52%; animation-delay:0.16s; }
.vp-stamp-particles span:nth-child(4) { --px: 58%; --py: 46%; animation-delay:0.20s; }
@keyframes vpCardReceiveStamp {
  0% { transform:translateY(0) scale(1); }
  34% { transform:translateY(2px) scale(0.985); }
  58% { transform:translateY(-4px) scale(1.018); }
  100% { transform:translateY(0) scale(1); }
}
@keyframes vpStampLands {
  0% { opacity:0; transform:translate(-50%, -68%) scale(1.55); filter:blur(1px); }
  42% { opacity:1; transform:translate(-50%, -48%) scale(0.92); filter:blur(0); }
  70% { transform:translate(-50%, -52%) scale(1.08); }
  100% { opacity:0.96; transform:translate(-50%, -50%) scale(1); }
}
@keyframes vpStampGlow {
  0% { opacity:0; transform:translate(-50%, -50%) scale(0.82); }
  38% { opacity:1; }
  100% { opacity:0; transform:translate(-50%, -50%) scale(1.16); }
}
@keyframes vpStampParticle {
  0% { opacity:0; transform:translate(-50%, -50%) scale(0.6); }
  34% { opacity:0.78; }
  100% { opacity:0; transform:translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(0.18); }
}


/* ══════════════════════════════════════════════════════════════
   11. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .vp-passport-grid   { grid-template-columns:repeat(2,1fr); }
  .vp-welcome-content { padding:32px 18px 28px; }
  #vp-widget          { bottom:16px; right:16px; }
  .vp-widget-card-thumb { width:42px; }
  .vp-toast           { right:16px; bottom:72px; max-width:calc(100vw - 80px); }
  .vp-panel           { width:calc(100vw - 32px); max-width:296px; }
  .vp-customize-inner { padding:22px 18px 20px; }
  .vp-portal-content { min-height:calc(100vh - 32px); padding:46px 14px 26px; }
  .vp-portal-carousel { height:160px; }
  .vp-portal-card-float { width:min(230px, 66vw); }
  .vp-portal-card--prev { transform:translate(calc(-50% - 155px), -50%) scale(0.76) perspective(700px) rotateY(6deg); }
  .vp-portal-card--next { transform:translate(calc(-50% + 155px), -50%) scale(0.76) perspective(700px) rotateY(-6deg); }
  #vp-stamp-card { right:16px; bottom:74px; width:min(250px, calc(100vw - 32px)); }
}