/* ==========================================================================
   Values Vault – Free Values Card Sort
   Everything is scoped under .vv-sort-root so it can live inside any theme.
   ========================================================================== */

.vv-sort-root {
  --vv-pink: #e82063;
  --vv-pink-deep: #c9265c;
  --vv-teal: #65bec2;
  --vv-gold: #e0b021;
  --vv-ink: #2b2b2b;
  --vv-body: #404040;
  --vv-muted: #6f6f6f;
  --vv-line: #e4e0e3;
  --vv-panel: #ffffff;
  --vv-ground: linear-gradient(160deg, #fff7f9 0%, #f6fbfb 55%, #fbf8ef 100%);
  --vv-radius: 22px;
  --vv-card-w: clamp(168px, 44vw, 232px);
  --vv-shadow-card: 0 1px 2px rgba(20, 10, 20, .08), 0 14px 34px -14px rgba(20, 10, 30, .38);
  --vv-shadow-lift: 0 2px 4px rgba(20, 10, 20, .10), 0 34px 60px -18px rgba(20, 10, 30, .5);
  --vv-serif: 'Fraunces', Georgia, 'Times New Roman', serif; /* stands in for the deck's Moranga */
  --vv-card-ink: #231f20; /* the deck's dark lettering colour */
  --vv-ease-out: cubic-bezier(.16, 1, .3, 1);
  --vv-ease-spring: cubic-bezier(.34, 1.45, .5, 1);
  --vv-ease-in: cubic-bezier(.5, 0, .8, .4);

  /* Pile accents, least -> most important */
  --vv-p0: #a7a7a7;
  --vv-p1: #65bec2;
  --vv-p2: #e0b021;
  --vv-p3: #f0883a;
  --vv-p4: #e82063;

  position: relative;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--vv-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.vv-sort-root *, .vv-sort-root *::before, .vv-sort-root *::after { box-sizing: border-box; }
.vv-sort-root button { font: inherit; color: inherit; }
.vv-sort-root p { margin: 0; }

/* Text-colour guards. Cards and buttons are <button>s, so on the live site theme
   rules like `button { color: ... }` outrank single-class selectors and turn card
   and button text dark. These pin the intended colours against any theme. */
.vv-sort-root .vv-card, .vv-sort-root .vv-mini { color: #fff !important; }
.vv-sort-root .vv-card.is-light, .vv-sort-root .vv-mini.is-light { color: var(--vv-card-ink) !important; }
.vv-sort-root .vv-btn { color: #fff !important; }
.vv-sort-root .vv-btn--ghost { color: var(--vv-ink) !important; }
.vv-sort-root .vv-btn--ghost.is-armed { color: var(--vv-pink) !important; }
.vv-sort-root .vv-btn--link { color: var(--vv-muted) !important; }
.vv-sort-root .vv-btn--link:hover { color: var(--vv-ink) !important; }

/* Deck colours and artwork. Every card carries its exact print colour as --g (set
   inline by the script from data-color) and its illustration, extracted from the
   printed deck, as --art. Cards flagged data-ink="dark" get dark lettering. */
.vv-card, .vv-chip, .vv-mini, .vv-pile__stack i, .vv-theme, .vv-cta__deck i {
  --g: #999; /* fallback only; the real colour is inline */
}
.vv-sort-root [data-id="adventure"]       { --art: url(art/adventure.png); }
.vv-sort-root [data-id="fun"]             { --art: url(art/fun.png); }
.vv-sort-root [data-id="spontaneity"]     { --art: url(art/spontaneity.png); }
.vv-sort-root [data-id="compassion"]      { --art: url(art/compassion.png); }
.vv-sort-root [data-id="connection"]      { --art: url(art/connection.png); }
.vv-sort-root [data-id="family"]          { --art: url(art/family.png); }
.vv-sort-root [data-id="kindness"]        { --art: url(art/kindness.png); }
.vv-sort-root [data-id="communication"]   { --art: url(art/communication.png); }
.vv-sort-root [data-id="curiosity"]       { --art: url(art/curiosity.png); }
.vv-sort-root [data-id="independence"]    { --art: url(art/independence.png); }
.vv-sort-root [data-id="growth"]          { --art: url(art/growth.png); }
.vv-sort-root [data-id="health"]          { --art: url(art/health.png); }
.vv-sort-root [data-id="patience"]        { --art: url(art/patience.png); }
.vv-sort-root [data-id="resilience"]      { --art: url(art/resilience.png); }
.vv-sort-root [data-id="responsibility"]  { --art: url(art/responsibility.png); }
.vv-sort-root [data-id="hard-work"]       { --art: url(art/hard-work.png); }
.vv-sort-root [data-id="tradition"]       { --art: url(art/tradition.png); }
.vv-sort-root [data-id="safety"]          { --art: url(art/safety.png); }
.vv-sort-root [data-id="gratitude"]       { --art: url(art/gratitude.png); }
.vv-sort-root [data-id="spirituality"]    { --art: url(art/spirituality.png); }
.vv-sort-root [data-id="truth"]           { --art: url(art/truth.png); }
.vv-sort-root [data-id="authenticity"]    { --art: url(art/authenticity.png); }
.vv-sort-root [data-id="honesty"]         { --art: url(art/honesty.png); }
.vv-sort-root [data-id="integrity"]       { --art: url(art/integrity.png); }
.vv-sort-root [data-id="acceptance"]      { --art: url(art/acceptance.png); }
.vv-sort-root [data-id="inner-peace"]     { --art: url(art/inner-peace.png); }
.vv-sort-root [data-id="self-compassion"] { --art: url(art/self-compassion.png); }
.vv-sort-root [data-id="purpose"]         { --art: url(art/purpose.png); }
.vv-sort-root [data-id="creativity"]      { --art: url(art/creativity.png); }
.vv-sort-root [data-id="humor"]           { --art: url(art/humor.png); }

/* The server-rendered source list is hidden once the app boots */
.vv-sort-root.is-ready .vv-source { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vv-source { margin: 0 0 1rem; padding-left: 1.2em; columns: 2; column-gap: 2rem; }
.vv-source li { break-inside: avoid; margin: 0 0 .35em; }
.vv-source strong { color: var(--vv-ink); }

/* --------------------------------------------------------------------------
   App shell
   -------------------------------------------------------------------------- */
.vv-app {
  position: relative;
  background: var(--vv-ground);
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-radius);
  padding: clamp(16px, 3vw, 32px);
  min-height: 560px;
  isolation: isolate;
}
.vv-app::before {
  /* soft light bloom */
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 55%; border-radius: inherit;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255,255,255,.95), rgba(255,255,255,0));
  pointer-events: none; z-index: -1;
}
.vv-screen { animation: vv-screen-in .55s var(--vv-ease-out) both; }
.vv-screen.is-leaving { animation: vv-screen-out .28s var(--vv-ease-in) both; pointer-events: none; }
@keyframes vv-screen-in  { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes vv-screen-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px) scale(.99); } }

.vv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vv-title { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 700; color: var(--vv-ink); margin: 0; line-height: 1.25; }
.vv-sub { color: var(--vv-muted); font-size: .92rem; margin-top: 4px; max-width: 60ch; }
.vv-step { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vv-pink); margin-bottom: 4px; }

.vv-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.vv-actions--end { justify-content: flex-end; }
.vv-actions--between { justify-content: space-between; }

/* Buttons */
.vv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 600; font-size: .95rem; line-height: 1; cursor: pointer; text-decoration: none;
  background: var(--vv-pink); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(232, 32, 99, .7);
  transition: transform .18s var(--vv-ease-out), box-shadow .18s, background .18s, opacity .18s;
  -webkit-tap-highlight-color: transparent;
}
.vv-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(232, 32, 99, .8); }
.vv-btn:active { transform: translateY(0) scale(.98); }
.vv-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.vv-btn:focus-visible { outline: 3px solid rgba(232,32,99,.35); outline-offset: 2px; }
.vv-btn--ghost { background: #fff; color: var(--vv-ink); border-color: var(--vv-line); box-shadow: none; }
.vv-btn--ghost:hover { box-shadow: 0 8px 18px -12px rgba(0,0,0,.3); border-color: #d2ccd0; }
.vv-btn--teal { background: var(--vv-teal); box-shadow: 0 8px 20px -10px rgba(101,190,194,.8); }
.vv-btn--sm { padding: 9px 14px; font-size: .84rem; }
.vv-btn--ghost.is-armed { border-color: var(--vv-pink); color: var(--vv-pink); background: #fff3f7; }
.vv-btn--link { background: none; border: 0; box-shadow: none; color: var(--vv-muted); padding: 8px 10px; text-decoration: underline; text-underline-offset: 3px; }
.vv-btn--link:hover { color: var(--vv-ink); transform: none; box-shadow: none; }
.vv-btn svg { width: 1.05em; height: 1.05em; }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.vv-card {
  position: relative;
  width: var(--vv-card-w);
  aspect-ratio: 5 / 7;
  border-radius: 14px;
  background: var(--g);
  color: #fff;
  box-shadow: var(--vv-shadow-card);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  transform-style: preserve-3d;
  will-change: transform;
  container-type: inline-size;
}
.vv-card.is-light { color: var(--vv-card-ink); }
.vv-card__art {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--art) center bottom / contain no-repeat;
}
/* Print geometry: 14pt margins, 22pt name, 9pt definition on a 180pt-wide card */
.vv-card__top { position: relative; z-index: 1; padding: 6.5% 8% 0; }
.vv-card__name {
  font-family: var(--vv-serif);
  font-weight: 600; font-size: clamp(1.05rem, 12cqw, 1.75rem); line-height: 1.08; letter-spacing: 0;
  overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto;
}
.vv-card__name.is-long { font-size: clamp(.92rem, 9.6cqw, 1.4rem); }
.vv-card__def { margin-top: .5em; font-size: clamp(.64rem, 5.2cqw, .84rem); line-height: 1.45; font-weight: 500; }
.vv-card__tag {
  position: absolute; left: 0; bottom: 7.5%; z-index: 1;
  display: inline-flex; align-items: center; max-width: 92%;
  border: 2px solid #fff; border-left: 0; border-radius: 0 999px 999px 0;
  padding: 3.2% 5% 3.2% 8%;
  font-size: clamp(.5rem, 4.4cqw, .66rem); font-weight: 600; letter-spacing: .08em; line-height: 1.1;
  text-transform: uppercase; white-space: nowrap;
}
.vv-card__tag b { font-weight: 700; margin-right: .8em; padding-right: .8em; border-right: 2px solid #fff; }
.vv-card__sheen {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  opacity: 0; transition: opacity .25s;
}
.vv-card.is-hover .vv-card__sheen, .vv-card.is-dragging .vv-card__sheen { opacity: 1; }
.vv-card::after {
  /* inner edge */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
}
.vv-card.is-dragging { box-shadow: var(--vv-shadow-lift); cursor: grabbing; z-index: 50; }
.vv-card.is-grabbable { cursor: grab; }

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */
.vv-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; min-height: 520px; }
.vv-intro__copy h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.15; color: var(--vv-ink); margin: 0 0 12px; font-weight: 800; }
.vv-intro__copy p { color: var(--vv-body); margin-bottom: 10px; max-width: 48ch; }
.vv-intro__steps { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; }
.vv-intro__steps li { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; }
.vv-intro__steps b { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--vv-line); font-size: .78rem; color: var(--vv-pink); }
.vv-intro__fan { position: relative; height: 340px; display: grid; place-items: center; perspective: 1200px; }
.vv-intro__fan .vv-card { position: absolute; --vv-card-w: clamp(150px, 20vw, 200px); transform-origin: 50% 130%; transform: rotate(var(--r)); box-shadow: var(--vv-shadow-card); animation: vv-fan-in .9s var(--vv-ease-spring) backwards; transition: transform .3s var(--vv-ease-out); }
.vv-intro__fan .vv-card:nth-child(1) { --r: -22deg; animation-delay: .05s; }
.vv-intro__fan .vv-card:nth-child(2) { --r: -11deg; animation-delay: .12s; }
.vv-intro__fan .vv-card:nth-child(3) { --r: 0deg;   animation-delay: .19s; }
.vv-intro__fan .vv-card:nth-child(4) { --r: 11deg;  animation-delay: .26s; }
.vv-intro__fan .vv-card:nth-child(5) { --r: 22deg;  animation-delay: .33s; }
@keyframes vv-fan-in { from { transform: translateY(60px) rotate(0deg); opacity: 0; } to { transform: translateY(0) rotate(var(--r)); opacity: 1; } }
.vv-intro__fan .vv-card:hover { transform: translateY(-14px) rotate(var(--r)); }
.vv-resume { margin-top: 14px; font-size: .88rem; color: var(--vv-muted); }
.vv-resume a { color: var(--vv-pink); font-weight: 600; text-decoration: none; }

/* --------------------------------------------------------------------------
   Sort screen
   -------------------------------------------------------------------------- */
.vv-sort { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; min-height: 540px; }
.vv-sort__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vv-progress { flex: 1; display: flex; align-items: center; gap: 12px; font-size: .84rem; color: var(--vv-muted); font-weight: 500; white-space: nowrap; }
.vv-progress__bar { flex: 1; height: 6px; border-radius: 999px; background: #ebe6ea; overflow: hidden; }
.vv-progress__fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--vv-teal), var(--vv-pink)); transition: width .45s var(--vv-ease-out); }

.vv-stage { position: relative; z-index: 10; display: grid; place-items: center; height: clamp(300px, 52vh, 380px); perspective: 1100px; }
.vv-deck { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.vv-deck .vv-card { position: absolute; }
.vv-deck .vv-card:nth-child(1) { transform: translateY(22px) scale(.92); opacity: .55; }
.vv-deck .vv-card:nth-child(2) { transform: translateY(11px) scale(.96); opacity: .8; }
.vv-float { position: absolute; inset: 0; display: grid; place-items: center; animation: vv-float 4.5s ease-in-out infinite; }
.vv-float.is-still { animation-play-state: paused; }
@keyframes vv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.vv-current { position: relative; z-index: 5; }
.vv-current.is-entering { animation: vv-card-enter .55s var(--vv-ease-spring) backwards; }
@keyframes vv-card-enter { from { transform: rotateY(-88deg) translateY(10px) scale(.96); opacity: .5; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }

/* Card back, used for the cards waiting behind the current one: the real Core Edition back */
.vv-card--back { background: #0d0d0d url(art/card-back.png) center / cover no-repeat; }
.vv-card--back::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.vv-hint { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: .8rem; color: var(--vv-muted); pointer-events: none; transition: opacity .3s; }
.vv-hint.is-hidden { opacity: 0; }
.vv-stage__done { text-align: center; max-width: 34ch; }
.vv-stage__done h3 { margin: 0 0 6px; color: var(--vv-ink); }

.vv-scale { display: flex; justify-content: space-between; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #a39da1; padding: 0 4px; margin: 4px 0 6px; }
.vv-piles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.vv-pile {
  --pc: var(--vv-p2);
  position: relative;
  border: 2px dashed #d8d2d6; border-radius: 16px; background: rgba(255,255,255,.75);
  padding: 12px 6px 10px; min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  cursor: pointer; text-align: center;
  transition: transform .2s var(--vv-ease-out), border-color .2s, background .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.vv-pile[data-index="0"] { --pc: var(--vv-p0); }
.vv-pile[data-index="1"] { --pc: var(--vv-p1); }
.vv-pile[data-index="2"] { --pc: var(--vv-p2); }
.vv-pile[data-index="3"] { --pc: var(--vv-p3); }
.vv-pile[data-index="4"] { --pc: var(--vv-p4); }
.vv-pile:hover { border-color: var(--pc); transform: translateY(-2px); }
.vv-pile:focus-visible { outline: 3px solid color-mix(in srgb, var(--pc) 40%, transparent); outline-offset: 2px; }
.vv-pile.is-over { border-style: solid; border-color: var(--pc); background: color-mix(in srgb, var(--pc) 10%, #fff); transform: translateY(-6px) scale(1.05); box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--pc) 70%, transparent); }
.vv-pile.is-bump { animation: vv-bump .45s var(--vv-ease-spring); }
@keyframes vv-bump { 0% { transform: scale(1); } 35% { transform: scale(1.09) translateY(-4px); } 100% { transform: scale(1); } }
.vv-pile__label { font-size: .78rem; font-weight: 600; color: var(--vv-ink); line-height: 1.15; }
.vv-pile__label small { display: block; font-weight: 500; color: var(--vv-muted); font-size: .68rem; }
.vv-pile__count {
  position: absolute; top: 6px; right: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--pc); color: #fff; font-size: .74rem; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.3); opacity: 0; transform: scale(.4); transition: transform .25s var(--vv-ease-spring), opacity .2s;
}
.vv-pile__count.is-on { opacity: 1; transform: scale(1); }
.vv-pile__count.is-pop { animation: vv-pop .35s var(--vv-ease-spring); }
@keyframes vv-pop { 50% { transform: scale(1.35); } }
.vv-pile__stack { position: relative; width: 34px; height: 30px; }
.vv-pile__stack i { position: absolute; left: 50%; bottom: 0; width: 26px; height: 34px; margin-left: -13px; border-radius: 4px; background: var(--g); box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 0 0 1px rgba(0,0,0,.06); transform-origin: 50% 90%; }
.vv-pile__stack i:nth-child(1) { transform: rotate(-8deg) translateY(2px); }
.vv-pile__stack i:nth-child(2) { transform: rotate(4deg); }
.vv-pile__stack i:nth-child(3) { transform: rotate(-2deg) translateY(-2px); }
.vv-pile__key { position: absolute; top: 6px; left: 8px; font-size: .62rem; color: #b9b3b7; font-weight: 600; }

/* --------------------------------------------------------------------------
   Chips (zoomed-out cards)
   -------------------------------------------------------------------------- */
.vv-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 7px; border-radius: 999px;
  background: #fff; border: 1px solid var(--vv-line);
  font-size: .84rem; font-weight: 500; color: var(--vv-ink); line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  user-select: none; -webkit-user-select: none; touch-action: none;
  cursor: grab; transition: box-shadow .2s, transform .2s var(--vv-ease-out), border-color .2s;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
.vv-chip::before { content: ""; width: 12px; height: 16px; border-radius: 3px; background: var(--g); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); flex: 0 0 auto; }
.vv-chip:hover { border-color: #cfc8cd; box-shadow: 0 6px 14px -8px rgba(0,0,0,.3); }
.vv-chip.is-dragging { cursor: grabbing; z-index: 60; box-shadow: var(--vv-shadow-lift); position: relative; }
.vv-chip.is-new { animation: vv-chip-in .45s var(--vv-ease-spring) backwards; }
@keyframes vv-chip-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.vv-chip--static { cursor: default; }
.vv-chip--static:hover { box-shadow: 0 1px 2px rgba(0,0,0,.05); border-color: var(--vv-line); }

/* --------------------------------------------------------------------------
   Review (zoomed-out sort)
   -------------------------------------------------------------------------- */
.vv-review { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.vv-col { --pc: var(--vv-p2); background: rgba(255,255,255,.7); border: 2px solid transparent; border-radius: 16px; padding: 10px; min-height: 200px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s, background .2s, transform .2s var(--vv-ease-out); }
.vv-col[data-index="0"] { --pc: var(--vv-p0); }
.vv-col[data-index="1"] { --pc: var(--vv-p1); }
.vv-col[data-index="2"] { --pc: var(--vv-p2); }
.vv-col[data-index="3"] { --pc: var(--vv-p3); }
.vv-col[data-index="4"] { --pc: var(--vv-p4); }
.vv-col.is-over { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 8%, #fff); }
.vv-col.is-flash { animation: vv-flash .6s ease-out; }
@keyframes vv-flash { 0% { background: color-mix(in srgb, var(--pc) 18%, #fff); } 100% { background: rgba(255,255,255,.7); } }
.vv-col__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 8px; border-bottom: 3px solid var(--pc); }
.vv-col__label { font-size: .8rem; font-weight: 700; color: var(--vv-ink); line-height: 1.15; }
.vv-col__count { font-size: .72rem; font-weight: 700; color: var(--pc); }
.vv-col__body { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; flex: 1; }
.vv-col__empty { font-size: .76rem; color: #b6b0b4; font-style: italic; padding: 4px 2px; }

/* move popover */
.vv-pop { position: absolute; z-index: 80; background: #fff; border: 1px solid var(--vv-line); border-radius: 14px; padding: 8px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.4); display: grid; gap: 4px; min-width: 190px; animation: vv-pop-in .2s var(--vv-ease-out) both; }
@keyframes vv-pop-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.vv-pop__title { font-size: .72rem; color: var(--vv-muted); padding: 4px 8px 2px; }
.vv-pop button { --pc: var(--vv-p2); display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-size: .86rem; }
.vv-pop button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pc); }
.vv-pop button[data-index="0"] { --pc: var(--vv-p0); }
.vv-pop button[data-index="1"] { --pc: var(--vv-p1); }
.vv-pop button[data-index="2"] { --pc: var(--vv-p2); }
.vv-pop button[data-index="3"] { --pc: var(--vv-p3); }
.vv-pop button[data-index="4"] { --pc: var(--vv-p4); }
.vv-pop button:hover { background: #f6f2f5; }
.vv-pop button.is-current { font-weight: 700; background: #fbf5f8; }

/* --------------------------------------------------------------------------
   Narrow (choose top 10) & mini cards
   -------------------------------------------------------------------------- */
.vv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.vv-mini {
  position: relative; aspect-ratio: 5 / 7; border-radius: 10px; background: var(--g); color: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 20px -12px rgba(0,0,0,.35);
  border: 0; padding: 0; text-align: left; cursor: pointer; display: flex; flex-direction: column;
  transition: transform .22s var(--vv-ease-out), box-shadow .22s;
  -webkit-tap-highlight-color: transparent; will-change: transform;
  user-select: none; -webkit-user-select: none;
  container-type: inline-size;
}
.vv-mini.is-light { color: var(--vv-card-ink); }
.vv-mini__art { position: absolute; inset: 0; pointer-events: none; background: var(--art) center bottom / contain no-repeat; }
.vv-mini__name { position: relative; margin: 8% 9% 0; padding-right: 16%; font-family: var(--vv-serif); font-weight: 600; font-size: clamp(.78rem, 11cqw, .95rem); line-height: 1.08; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.vv-mini__name.is-long { font-size: clamp(.58rem, 8.4cqw, .82rem); }
.vv-mini__def { position: relative; margin: .45em 9% 0; font-size: clamp(.56rem, 5.4cqw, .68rem); line-height: 1.35; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.vv-mini:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 18px 28px -14px rgba(0,0,0,.4); }
.vv-mini:focus-visible { outline: 3px solid rgba(232,32,99,.35); outline-offset: 2px; }
.vv-mini__check { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--vv-pink); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); transform: scale(0); transition: transform .25s var(--vv-ease-spring); }
.vv-mini__check svg { width: 14px; height: 14px; }
.vv-mini.is-selected { transform: translateY(-6px); box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--vv-pink), 0 18px 30px -14px rgba(232,32,99,.5); }
.vv-mini.is-selected .vv-mini__check { transform: scale(1); }
.vv-mini.is-dim { opacity: .55; }
.vv-mini.is-shake { animation: vv-shake .35s; }
@keyframes vv-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.vv-mini--drag { cursor: grab; touch-action: none; }
.vv-mini--drag.is-dragging { cursor: grabbing; z-index: 60; box-shadow: var(--vv-shadow-lift); }
.vv-counter { font-weight: 700; color: var(--vv-ink); font-variant-numeric: tabular-nums; }
.vv-counter.is-done { color: var(--vv-pink); }
.vv-note { font-size: .84rem; color: var(--vv-muted); background: #fff; border: 1px solid var(--vv-line); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   Rank (top 5)
   -------------------------------------------------------------------------- */
.vv-rank { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 22px; align-items: start; }
.vv-slots { display: grid; gap: 10px; }
.vv-slot {
  --pc: var(--vv-pink);
  position: relative; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 12px;
  min-height: 64px; padding: 6px 10px 6px 8px; border-radius: 16px;
  border: 2px dashed #d8d2d6; background: rgba(255,255,255,.7);
  transition: border-color .2s, background .2s, transform .2s var(--vv-ease-out), box-shadow .2s;
}
.vv-slot__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(150deg, var(--vv-gold), #f0c84a); box-shadow: 0 3px 8px -2px rgba(224,176,33,.7); font-size: .95rem; }
.vv-slot[data-index="0"] .vv-slot__n { background: linear-gradient(150deg, var(--vv-pink), #ff6f9e); box-shadow: 0 3px 8px -2px rgba(232,32,99,.7); }
.vv-slot__empty { font-size: .8rem; color: #b6b0b4; font-style: italic; }
.vv-slot.is-over { border-style: solid; border-color: var(--pc); background: #fff3f7; transform: scale(1.02); }
.vv-slot.is-filled { border-style: solid; border-color: #eee9ec; background: #fff; box-shadow: 0 6px 16px -12px rgba(0,0,0,.3); }
.vv-slot .vv-chip { font-size: .95rem; padding: 8px 12px 8px 8px; }
.vv-slot .vv-chip::before { width: 14px; height: 19px; }
.vv-slot__remove { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: 0; background: #f3eff2; color: var(--vv-muted); cursor: pointer; display: grid; place-items: center; font-size: 1rem; line-height: 1; }
.vv-slot__remove:hover { background: #ffe1ea; color: var(--vv-pink); }
.vv-hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.vv-hand__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--vv-muted); font-weight: 600; margin-bottom: 8px; }
.vv-hand .vv-mini { aspect-ratio: 5 / 5.2; }
.vv-hand .vv-mini__def { display: none; }
.vv-hand__empty { grid-column: 1 / -1; font-size: .84rem; color: var(--vv-muted); font-style: italic; padding: 14px; text-align: center; background: rgba(255,255,255,.6); border-radius: 12px; }

/* --------------------------------------------------------------------------
   Reflect
   -------------------------------------------------------------------------- */
.vv-reflect { display: grid; gap: 16px; max-width: 720px; }
.vv-field label { display: block; font-weight: 600; color: var(--vv-ink); margin-bottom: 6px; font-size: .95rem; }
.vv-field textarea, .vv-input {
  width: 100%; font: inherit; font-size: .95rem; color: var(--vv-ink);
  padding: 12px 14px; border-radius: 14px; border: 2px solid var(--vv-line); background: #fff;
  transition: border-color .2s, box-shadow .2s; resize: vertical; min-height: 88px;
}
.vv-input { min-height: 0; }
.vv-field textarea:focus, .vv-input:focus { outline: none; border-color: var(--vv-teal); box-shadow: 0 0 0 4px rgba(101,190,194,.2); }
.vv-top5-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */
.vv-results { display: grid; gap: 26px; }
.vv-results__date { font-size: .84rem; color: var(--vv-muted); }
.vv-top5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.vv-top5__item { position: relative; perspective: 900px; display: flex; }
/* Results cards keep the printed 5:7 shape but may grow with a long definition */
.vv-top5__item .vv-card { --vv-card-w: 100%; aspect-ratio: auto; flex: 1; min-height: 250px; box-shadow: var(--vv-shadow-card); animation: vv-reveal .7s var(--vv-ease-out) both; animation-delay: calc(var(--i) * .12s); }
@keyframes vv-reveal { from { transform: rotateY(-70deg) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.vv-top5__n { position: absolute; top: -12px; left: -8px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(150deg, var(--vv-gold), #f0c84a); box-shadow: 0 4px 10px -2px rgba(0,0,0,.35); animation: vv-pop-badge .5s var(--vv-ease-spring) both; animation-delay: calc(var(--i) * .12s + .35s); }
.vv-top5__item:first-child .vv-top5__n { background: linear-gradient(150deg, var(--vv-pink), #ff6f9e); }
@keyframes vv-pop-badge { from { transform: scale(0); } to { transform: scale(1); } }
.vv-section h3 { font-size: 1.02rem; color: var(--vv-ink); margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.vv-section h3 small { font-weight: 500; color: var(--vv-muted); font-size: .8rem; }
.vv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vv-overview { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.vv-overview .vv-col { min-height: 120px; padding: 8px; }
.vv-overview .vv-chip { font-size: .76rem; padding: 4px 8px 4px 5px; }
.vv-overview .vv-chip::before { width: 9px; height: 12px; }
.vv-themes { display: grid; gap: 6px; max-width: 520px; }
.vv-theme { display: grid; grid-template-columns: 150px 1fr 28px; align-items: center; gap: 10px; font-size: .84rem; }
.vv-theme__bar { height: 10px; border-radius: 999px; background: #eee9ec; overflow: hidden; }
.vv-theme__fill { height: 100%; width: 0; border-radius: inherit; background: var(--g); transition: width .8s var(--vv-ease-out); }
.vv-theme__n { text-align: right; font-weight: 700; color: var(--vv-ink); font-variant-numeric: tabular-nums; }
.vv-reflections { display: grid; gap: 12px; }
.vv-reflections q { display: block; font-weight: 600; color: var(--vv-ink); font-size: .9rem; quotes: none; margin-bottom: 2px; }
.vv-reflections p { white-space: pre-wrap; font-size: .92rem; }

.vv-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.75); border: 1px solid var(--vv-line); }
.vv-toolbar__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--vv-muted); font-weight: 600; width: 100%; }
.vv-toast { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); background: var(--vv-ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: .86rem; opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--vv-ease-out); z-index: 90; white-space: nowrap; }
.vv-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

.vv-email { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--vv-line); }
.vv-email h3 { margin: 0; }
.vv-email__row { display: flex; gap: 8px; flex-wrap: wrap; }
.vv-email__row .vv-input { flex: 1 1 220px; }
.vv-check { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--vv-body); cursor: pointer; }
.vv-check input { margin-top: 3px; accent-color: var(--vv-pink); width: 16px; height: 16px; }
.vv-email__status { font-size: .86rem; min-height: 1.3em; }
.vv-email__status.is-ok { color: #2f8a3a; }
.vv-email__status.is-err { color: var(--vv-pink-deep); }
.vv-email__fine { font-size: .74rem; color: #9a9498; }
.vv-hp { position: absolute; left: -9999px; }

.vv-cta { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 20px; border-radius: 18px; background: linear-gradient(135deg, #fff, #fff4f8); border: 1px solid #f5d6e1; }
.vv-cta__deck { position: relative; width: 64px; height: 76px; }
.vv-cta__deck i { position: absolute; inset: 0; border-radius: 8px; background: #0d0d0d url(art/card-back.png) center / cover no-repeat; box-shadow: 0 2px 6px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.12); transform-origin: 50% 100%; }
.vv-cta__deck i:nth-child(1) { transform: rotate(-12deg); }
.vv-cta__deck i:nth-child(2) { transform: rotate(-2deg); }
.vv-cta__deck i:nth-child(3) { transform: rotate(8deg); }
.vv-cta h3 { margin: 0 0 3px; font-size: 1rem; color: var(--vv-ink); }
.vv-cta p { font-size: .88rem; color: var(--vv-body); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .vv-intro { grid-template-columns: 1fr; min-height: 0; }
  .vv-intro__fan { height: 250px; order: -1; }
  .vv-intro__fan .vv-card { --vv-card-w: 130px; }
  .vv-rank { grid-template-columns: 1fr; }
  .vv-top5 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .vv-review, .vv-overview { grid-template-columns: 1fr; }
  .vv-col { min-height: 0; flex-direction: column; }
  .vv-review { display: flex; flex-direction: column-reverse; }
  .vv-review .vv-col { order: 0; }
  .vv-cta { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
@media (max-width: 520px) {
  .vv-app { padding: 14px 12px 18px; border-radius: 18px; }
  .vv-stage { height: clamp(280px, 48vh, 340px); }
  .vv-piles { gap: 5px; }
  .vv-pile { padding: 10px 3px 8px; min-height: 84px; border-radius: 12px; }
  .vv-pile__label { font-size: .68rem; }
  .vv-pile__label small { display: none; }
  .vv-pile__key { display: none; }
  .vv-pile__stack { width: 26px; height: 24px; }
  .vv-pile__stack i { width: 20px; height: 26px; margin-left: -10px; }
  .vv-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .vv-mini__def { -webkit-line-clamp: 3; }
  .vv-hand { grid-template-columns: repeat(3, 1fr); }
  .vv-top5 { grid-template-columns: repeat(2, 1fr); }
  .vv-toolbar { padding: 12px; }
  .vv-toolbar .vv-btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vv-sort-root *, .vv-sort-root *::before, .vv-sort-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .vv-float { animation: none; }
}

/* --------------------------------------------------------------------------
   Print (Save as PDF)
   -------------------------------------------------------------------------- */
@media print {
  body * { visibility: hidden; }
  .vv-sort-root, .vv-sort-root * { visibility: visible; }
  .vv-sort-root { position: absolute; left: 0; top: 0; width: 100%; }
  .vv-source, .vv-toolbar, .vv-email, .vv-cta, .vv-toast, .vv-print-hide { display: none !important; }
  .vv-app { background: #fff; border: 0; padding: 0; min-height: 0; }
  .vv-top5 { grid-template-columns: repeat(5, 1fr); }
  .vv-top5__item .vv-card, .vv-top5__n { animation: none !important; }
  .vv-overview { grid-template-columns: repeat(5, 1fr); }
  .vv-card, .vv-chip, .vv-col, .vv-mini { box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --------------------------------------------------------------------------
   Theme collision guard. The values-vault theme's site.css styles its blog
   cards as .vv-card and loads after this sheet, repainting sort cards white
   (background/border/height/radius). Pin the properties it touches.
   -------------------------------------------------------------------------- */
.vv-sort-root .vv-card {
  background: var(--g) !important;
  border: 0 !important;
  border-radius: 14px !important;
  height: auto !important;
  gap: 0 !important;
}
.vv-sort-root .vv-card--back {
  background: #0d0d0d url(art/card-back.png) center / cover no-repeat !important;
}