/* ——— The Village (js/screens/village.js, js/village-art.js) ———
   The village across the brook: a living scene, today's visitors, the
   projects, friends, a visitor's request card, the brick sheet, and the
   ribbon-cutting ceremony. Speedy Town's colors are at the bottom. */

.pill-btn {
  padding: 8px 16px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--lilac-soft);
  box-shadow: 0 4px 0 #dccdf6;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.pill-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #dccdf6; }

.vg { max-width: 1120px; margin: 0 auto; padding-bottom: 40px; }
.vg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.vg-head { display: flex; align-items: flex-end; gap: 12px; margin: 58px 4px 10px; }
/* Mid-size screens: the tools get their own row under the title. */
@media (max-width: 900px) {
  .vg-head { flex-wrap: wrap; }
  .vg-tools { width: 100%; justify-content: flex-start; }
}
.vg-say {
  position: absolute; z-index: 4; translate: -50% 0;
  max-width: 34cqw; padding: 0.5em 0.8em; border: 3px solid var(--outline); border-radius: 18px;
  background: #fff; font-size: clamp(13px, 1.65cqw, 22px); font-weight: 600; line-height: 1.25; text-align: center;
  animation: pop-in 0.35s var(--bounce);
}
.vg-say::after { content: ''; position: absolute; left: 50%; bottom: -11px; translate: -50% 0; border: 10px solid transparent; border-top-color: var(--outline); border-bottom: 0; }
.vg-mascot { flex: none; }
.vg-title { flex: 1; min-width: 0; }
.vg-title h1 { font-size: clamp(26px, 5vw, 42px); line-height: 1.05; }
.vg-sub { margin-top: 4px; font-size: clamp(14px, 2.2vw, 18px); font-weight: 600; color: var(--ink-soft); }
.vg-sub { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.vg-stat { white-space: nowrap; }
.vg-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* The scene: a stage with a fixed shape. Narrow screens scroll it sideways. */
.vg-stage {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 30px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vg-stage::-webkit-scrollbar { display: none; }
.vg-box {
  position: relative;
  width: max(100%, 580px);
  aspect-ratio: 1200 / 720;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 30px;
  background: #cfe9ff;
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(91, 58, 110, 0.12);
  container-type: inline-size;
}
.vg-scene, .vg-skylayer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vg-night .vg-skyrect { fill: url(#vg-nightsky); }

/* Day and night (also on Home's islet). */
.vg-moon, .vg-star, .vg-glow, .vg-lit { opacity: 0; transition: opacity 0.6s; }
.vg-night .vg-sun { opacity: 0; }
.vg-night .vg-moon, .vg-night .vg-star { opacity: 1; }
.vg-night .vg-star { transform-box: fill-box; transform-origin: center; animation: twinkle 1.8s ease-in-out infinite alternate; }
/* Night darkens the land with a tinted pane, not a filter (a filter over an
   animated scene would repaint all of it every frame). */
.vg-nightshade { position: absolute; inset: 0; pointer-events: none; background: rgba(30, 24, 92, 0.3); opacity: 0; transition: opacity 0.6s; }
.vg-night .vg-nightshade { opacity: 1; }
.vg-night.vg-box { background: #2a2a64; }
.vg-night .vg-project.built .vg-glow, .vg-night .vg-project.built .vg-lit,
.km-night .vg-glow, .km-night .vg-lit { opacity: 1; }
.vg-night .vg-glow { animation: vg-flicker 3.4s ease-in-out infinite; }
.vg-night .vg-win, .km-night .vg-win { fill: #ffe27a; filter: drop-shadow(0 0 5px #ffd54d); }
.vg-box.vg-flick .vg-glow, .vg-box.vg-flick .vg-lit { opacity: 1; animation: vg-blink 0.5s steps(2) 2; }

/* Things that move on their own. */
.vg-sails { animation: vg-spin 9s linear infinite; }
.vg-p-windmill.spin-fast .vg-sails { animation-duration: 0.9s; }
.vg-flag { transform-box: fill-box; animation: lp-flagwave 1.4s ease-in-out infinite alternate; }
.vg-water { animation: km-splash 1.2s ease-in-out infinite alternate; }
.vg-twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 1s ease-in-out infinite alternate; }
.vg-fairy { animation: vg-fairy 1.6s ease-in-out infinite alternate; }
.vg-ripples { animation: vg-flow 2.4s linear infinite; }
.vg-cloud { animation: vg-drift 26s ease-in-out infinite alternate; }
.vg-night .vg-cloud { opacity: 0.35; }
.vg-ferry { transform-box: fill-box; animation: vg-bob 2.6s ease-in-out infinite; }
.vg-neon { animation: vg-neon 2.2s steps(1) infinite; }
.vg-tarp { transform-box: fill-box; transform-origin: 50% 0; animation: vg-flap 2.6s ease-in-out infinite; }
.vg-cover-ribbon { animation: vg-ready 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }

/* The life layer: birds, butterflies, fireflies, chimney smoke. */
.vg-life { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vg-bird { position: absolute; left: -8%; width: 4.2%; animation: vg-fly var(--fly, 19s) linear infinite; animation-delay: calc(var(--i) * -6.5s); }
.vg-bird svg { display: block; width: 100%; animation: vg-flap-wings 0.45s ease-in-out infinite alternate; transform-origin: center; }
.vg-butterfly { position: absolute; font-size: 2.6cqw; animation: vg-flutter 7s ease-in-out infinite; animation-delay: var(--d); }
.vg-firefly {
  position: absolute; width: 0.7cqw; height: 0.7cqw; border-radius: 50%;
  background: #fff6a0; box-shadow: 0 0 1.2cqw 0.4cqw rgba(255, 240, 120, 0.8);
  animation: vg-firefly 4.4s ease-in-out infinite; animation-delay: var(--d);
}
.vg-smoke { position: absolute; width: 2cqw; height: 2cqw; }
.vg-smoke::before, .vg-smoke::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); animation: vg-smoke 3.6s ease-out infinite; animation-delay: var(--d);
}
.vg-smoke::after { animation-delay: calc(var(--d) + 1.8s); }

/* Tap targets on the drawing, and the people. */
.vg-hot { position: absolute; cursor: pointer; border-radius: 30px; }
.vg-nb, .vg-gather, .vg-marcher, .vg-bird, .vg-butterfly, .vg-firefly { will-change: transform; }
.vg-nb {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  transform-origin: 50% 100%;
  animation: vg-idle 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.8s);
  z-index: 2;
}
.vg-nb svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 0 rgba(91, 58, 110, 0.12)); }
.vg-nb.waiting .vn-arm { transform-box: fill-box; transform-origin: 20% 90%; animation: vg-wave 1.1s ease-in-out infinite alternate; }
.vg-nb.newcomer::before { content: '✨'; position: absolute; left: -6%; top: 6%; font-size: 3cqw; animation: twinkle 0.8s ease-in-out infinite alternate; }
.vg-nb-badge {
  position: absolute; left: 50%; top: -6%; translate: -50% 0;
  display: grid; place-items: center;
  width: 3.4cqw; height: 3.4cqw; min-width: 26px; min-height: 26px;
  border: 3px solid #fff; border-radius: 50%;
  background: var(--gold); color: #6b4300;
  font-size: clamp(15px, 2.2cqw, 26px); font-weight: 700;
  box-shadow: 0 3px 0 var(--gold-deep);
  animation: vg-badge 1s ease-in-out infinite;
}
.vg-nb.helped .vg-nb-badge { background: #fff; box-shadow: 0 3px 0 #f2c1d8; animation: none; }
.vg-nb-name {
  position: absolute; left: 50%; bottom: -3%; translate: -50% 0;
  padding: 0.1em 0.7em; border: 2.5px solid #fff; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); font-size: clamp(12px, 1.4cqw, 20px); font-weight: 700; white-space: nowrap;
}
.vg-nb.shuffle { animation: vg-shuffle 1.2s ease-in-out; }
.vg-nb.look svg { animation: vg-look 1.2s ease-in-out; }
.vg-nb.hello, .vg-friend.hop, .vg-nb.hop { animation: vg-hop 0.6s var(--bounce); }
.vn-blink { transform-box: fill-box; transform-origin: center; animation: vg-blinkeyes 4.5s infinite; }
.vn-tail { animation: vg-sway 2.2s ease-in-out infinite alternate; }

/* Signs: the ribbon to cut, "Ready tomorrow morning!", the bridge's brick meter. */
.vg-cut, .vg-sign, .vg-meter-chip { position: absolute; translate: -50% -50%; z-index: 3; white-space: nowrap; }
.vg-cut {
  padding: 0.5em 1.1em; border: 4px solid #fff; border-radius: 999px;
  background: linear-gradient(#ff7a95, #ff4d6d); color: #fff;
  font-size: clamp(15px, 2.1cqw, 26px); font-weight: 700;
  box-shadow: 0 5px 0 #c9304f, 0 10px 24px rgba(201, 48, 79, 0.35);
  animation: vg-badge 1.1s ease-in-out infinite;
}
.vg-sign {
  padding: 0.35em 0.9em; border: 3px solid #8a5a36; border-radius: 12px;
  background: #ffe9c4; color: #6b4a3a; font-size: clamp(12px, 1.5cqw, 20px); font-weight: 700;
  box-shadow: 0 4px 0 #c9874a; rotate: -3deg;
}
.vg-meter-chip {
  display: flex; align-items: center; gap: 8px; padding: 0.35em 0.9em;
  border: 3px solid #fff; border-radius: 999px; background: #fff;
  font-size: clamp(13px, 1.7cqw, 22px); font-weight: 700; box-shadow: 0 4px 0 #e2cfee, var(--shadow);
  animation: vg-badge 1.6s ease-in-out infinite;
}
.vg-mini-meter { width: 6cqw; min-width: 46px; height: 12px; border-radius: 999px; background: #efe6ff; overflow: hidden; border: 2px solid #c9a8ff; }
.vg-mini-meter i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a6b, #ffc53d); }

/* Then and Now: the day-one village wipes in, then back out. */
.vg-then { position: absolute; inset: 0; z-index: 5; clip-path: inset(0 100% 0 0); transition: clip-path 0.9s ease-in-out; }
.vg-then.in { clip-path: inset(0 0 0 0); }
.vg-then.out { clip-path: inset(0 0 0 100%); }
.vg-then svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vg-then::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 6px; background: #fff; box-shadow: 0 0 20px #fff; }
.vg-then-label {
  position: absolute; left: 50%; top: 8%; translate: -50% 0;
  padding: 0.3em 1em; border: 4px solid #fff; border-radius: 999px; background: var(--lilac); color: #fff;
  font-size: clamp(18px, 3cqw, 31px); font-weight: 700; box-shadow: var(--shadow);
}

/* ——— Alive: more life the more the village is rebuilt (js/village-life.js) ——— */
.vg-creatures { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vg-walker, .vg-duck, .vg-chicken { pointer-events: auto; cursor: pointer; }
.vg-walk-bob { animation: vg-walk 0.5s ease-in-out infinite alternate; }
.vg-duck-bob { animation: vg-paddle 1.8s ease-in-out infinite alternate; }
.vg-peck { transform-box: fill-box; transform-origin: 30% 100%; animation: vg-peck 2.6s ease-in-out infinite; }
.vg-duck-bob.hop, .vg-peck.hop { transform-box: fill-box; transform-origin: 50% 100%; animation: vg-critter-hop 0.5s var(--bounce); }
@keyframes vg-walk { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-5px) rotate(3deg); } }
@keyframes vg-paddle { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(2px) rotate(3deg); } }
@keyframes vg-peck { 0%, 60%, 100% { transform: rotate(0); } 68% { transform: rotate(28deg); } 76% { transform: rotate(0); } 84% { transform: rotate(26deg); } }
@keyframes vg-critter-hop { 40% { transform: translateY(-14px) scale(1.1); } }

/* The day's weather. */
.vg-overcast { position: absolute; inset: 0 0 35%; background: linear-gradient(rgba(110, 118, 150, 0.38), transparent); }
.vg-rain { position: absolute; inset: 0; background: linear-gradient(rgba(90, 100, 140, 0.18), rgba(90, 100, 140, 0.05)); }
.vg-drop {
  position: absolute; top: -8%; width: 0.18cqw; height: 3.2cqw; border-radius: 2px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.85)); rotate: 12deg;
  animation: vg-drop var(--s) linear infinite; animation-delay: var(--d); will-change: transform;
}
@keyframes vg-drop { to { transform: translate(-14cqh, 118cqh); } }
.vg-flake {
  position: absolute; top: -4%; width: calc(0.9cqw * var(--z)); aspect-ratio: 1; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0.6cqw rgba(255, 255, 255, 0.9); animation: vg-snow var(--s) linear infinite; animation-delay: var(--d); will-change: transform;
}
@keyframes vg-snow { 0% { transform: translate(0, 0); } 50% { transform: translate(3cqw, 55cqh); } 100% { transform: translate(-1cqw, 112cqh); } }
.vg-sky-arc {
  position: absolute; left: 12%; right: 12%; top: 10%; aspect-ratio: 2 / 1; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: 0.55;
  background: radial-gradient(ellipse at 50% 100%, transparent 54%, #b197fc 55%, #74c0fc 60%, #8ce99a 65%, #ffe066 70%, #ffa94d 75%, #ff6b6b 80%, transparent 81%);
  animation: vg-arc-in 3s ease both;
}
@keyframes vg-arc-in { from { opacity: 0; } }
.vg-night .vg-sky-arc { display: none; }

/* What the wind carries: dust and a tumbleweed in a sleepy village, flower
   petals and leaves in a lively one. */
.vg-dust {
  position: absolute; left: -5%; width: calc(1.4cqw * var(--z)); aspect-ratio: 1; border-radius: 50%;
  background: rgba(214, 190, 150, 0.55); filter: blur(1px);
  animation: vg-blow calc(var(--s) / var(--wind, 1)) linear infinite; animation-delay: var(--d); will-change: transform;
}
.vg-tumble { position: absolute; left: -8%; bottom: 14%; width: 4cqw; animation: vg-tumble calc(14s / var(--wind, 1)) linear infinite; will-change: transform; }
.vg-tumble svg { display: block; animation: vg-roll 1.1s linear infinite; }
.vg-petal {
  position: absolute; left: -4%; width: 0.9cqw; height: 0.6cqw; border-radius: 60% 0; background: var(--c);
  animation: vg-blow calc(var(--s) / var(--wind, 1)) linear infinite; animation-delay: var(--d); will-change: transform;
}
.vg-leaf {
  position: absolute; left: -4%; width: 1.3cqw; height: 0.7cqw; border-radius: 0 100%; background: var(--c);
  animation: vg-blow var(--s) linear infinite; animation-delay: var(--d); will-change: transform;
}
@keyframes vg-blow {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: 1; }
  30% { transform: translate(34cqw, -4cqh) rotate(220deg); } 60% { transform: translate(70cqw, 3cqh) rotate(430deg); }
  92% { opacity: 1; } 100% { transform: translate(112cqw, -2cqh) rotate(700deg); opacity: 0; }
}
@keyframes vg-tumble { 0% { transform: translate(0, 0); } 25% { transform: translate(28cqw, -2cqh); } 30% { transform: translate(34cqw, 0); } 55% { transform: translate(62cqw, -3cqh); } 60% { transform: translate(68cqw, 0); } 100% { transform: translate(118cqw, 0); } }
@keyframes vg-roll { to { rotate: 360deg; } }

/* A little magic once it's nearly finished. */
.vg-magic {
  position: absolute; width: 1.1cqw; aspect-ratio: 1;
  background: radial-gradient(circle, #fff 0 20%, #fff2a8 35%, transparent 70%);
  animation: vg-rise var(--s) ease-in infinite; animation-delay: var(--d); will-change: transform, opacity;
}
.vg-magic::before { content: ''; position: absolute; inset: -60%; background: conic-gradient(from 45deg, transparent 0 10%, rgba(255, 246, 194, 0.9) 12%, transparent 14% 35%, rgba(255, 246, 194, 0.9) 37%, transparent 39% 60%, rgba(255, 246, 194, 0.9) 62%, transparent 64% 85%, rgba(255, 246, 194, 0.9) 87%, transparent 89%); border-radius: 50%; }
@keyframes vg-rise { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(2cqw, -22cqh) scale(1.1); opacity: 0; } }
.vg-floatheart { position: absolute; bottom: 10%; font-size: 1.8cqw; animation: vg-heartfloat 10s ease-in infinite; animation-delay: var(--d); will-change: transform, opacity; }
@keyframes vg-heartfloat { 0% { transform: translate(0, 0) rotate(-10deg); opacity: 0; } 15% { opacity: 0.9; } 50% { transform: translate(3cqw, -30cqh) rotate(10deg); } 100% { transform: translate(-2cqw, -62cqh) rotate(-8deg); opacity: 0; } }
.vg-shooting {
  position: absolute; top: 8%; left: 70%; width: 9cqw; height: 0.25cqw; border-radius: 99px;
  background: linear-gradient(90deg, transparent, #fff6c2); opacity: 0; rotate: -24deg;
  animation: vg-shoot 9s ease-in infinite;
}
.vg-shooting.two { top: 16%; left: 40%; animation-delay: -4.6s; animation-duration: 13s; }
@keyframes vg-shoot { 0%, 86% { opacity: 0; transform: translateX(0); } 88% { opacity: 1; } 96% { opacity: 0; transform: translateX(-26cqw); } 100% { opacity: 0; } }
.vg-flock { position: absolute; top: 12%; left: -14%; display: grid; grid-template-columns: repeat(3, 2.4cqw); gap: 0.4cqw 0.8cqw; animation: vg-fly 26s linear infinite; animation-delay: -8s; }
.vg-flock svg { display: block; width: 100%; animation: vg-flap-wings 0.5s ease-in-out infinite alternate; }
.vg-flock svg:nth-child(2) { translate: 0 1.4cqw; } .vg-flock svg:nth-child(4) { translate: 0 2.4cqw; } .vg-flock svg:nth-child(3) { translate: 0 0.6cqw; }

/* ——— Tap a place and it plays (js/village-play.js) ——— */
.vg-box .vg-project.built, .vg-box .vg-wish { cursor: pointer; }
.vg-fig { position: absolute; z-index: 3; width: 3.4cqw; translate: -50% -100%; pointer-events: none; }
.vg-fig svg { display: block; width: 100%; overflow: visible; }
.vg-run { animation: vg-run 3.4s cubic-bezier(0.3, 0, 0.7, 1) both; will-change: transform, opacity; }
.vg-hop { display: block; animation: vg-hop 0.32s ease-in-out infinite alternate; }
.vg-hop.left svg { scale: -1 1; }
.vg-wheel { transform-box: fill-box; transform-origin: center; animation: vg-roll 0.6s linear infinite; }
.vg-sail { width: 5cqw; animation-duration: 5s; }
.vg-up { animation: vg-up 3.6s ease-out both; will-change: transform, opacity; }
.vg-homepop { width: 6cqw; transform-origin: 50% 100%; animation: vg-homepop 3s var(--bounce) both; }
.vg-beam {
  width: 40cqw; height: 40cqw; translate: -50% -50%;
  background: conic-gradient(from 0deg, rgba(255, 243, 166, 0.75), transparent 8%, transparent 92%, rgba(255, 243, 166, 0.75));
  border-radius: 50%; mask: radial-gradient(circle, #000 0 45%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 0 45%, transparent 70%);
  animation: vg-beam 3s ease-in-out both;
}
@keyframes vg-run { 0% { transform: translateX(0) scale(0.3); opacity: 0; } 10% { transform: translateX(calc(var(--dx) * 0.06)) scale(1); opacity: 1; } 82% { opacity: 1; } 100% { transform: translateX(var(--dx)) scale(0.9); opacity: 0; } }
@keyframes vg-hop { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-22%) rotate(4deg); } }
@keyframes vg-up { 0% { transform: translate(0, 0) scale(0.3); opacity: 0; } 12% { transform: translate(0, -2cqw) scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(var(--dx), -26cqw) rotate(12deg); opacity: 0; } }
@keyframes vg-homepop { 0% { transform: scale(0) translateY(20%); } 20% { transform: scale(1.1); } 30%, 80% { transform: scale(1) rotate(0); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(6deg); } 100% { transform: scale(0); opacity: 0; } }
@keyframes vg-beam { 0% { opacity: 0; rotate: 0deg; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; rotate: 720deg; } }
.vg-project.vg-m-jump, .vg-project.vg-m-wiggle, .vg-project.vg-m-ring, .vg-project.vg-m-spin, .vg-wish.vg-m-jump { transform-box: fill-box; transform-origin: 50% 100%; }
.vg-project.vg-m-jump { animation: vg-m-jump 0.8s var(--bounce); }
.vg-project.vg-m-wiggle { animation: vg-m-wiggle 0.5s ease-in-out; }
.vg-project.vg-m-ring { animation: vg-m-ring 1.1s ease-in-out; }
.vg-project.vg-m-spin { animation: vg-m-spin 1.2s var(--bounce); }
.vg-project.vg-m-rainbow { animation: vg-m-rainbow 1.6s linear; }
@keyframes vg-m-jump { 30% { transform: translateY(-4%) scale(1.04, 0.97); } 55% { transform: translateY(0) scale(0.97, 1.03); } }
@keyframes vg-m-wiggle { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes vg-m-ring { 10%, 30%, 50%, 70% { transform: rotate(-3deg); } 20%, 40%, 60%, 80% { transform: rotate(3deg); } }
@keyframes vg-m-spin { 40% { transform: scale(1.06) rotate(-3deg); } 70% { transform: scale(0.98) rotate(2deg); } }
@keyframes vg-m-rainbow { to { filter: hue-rotate(360deg) saturate(1.5); } }

/* ——— Full screen: the village fills the window, the UI floats ———
   The world keeps its 1200 × 720 shape and covers the window (taller than
   wide windows pan sideways: swipe, drag, or the mouse wheel). The title,
   a dock, and the sheets float above it, like a game's HUD. */
.view-village { animation: fade-in 0.5s ease; } /* no transform: the village is fixed to the window */
.vg.vg-imm { position: fixed; inset: 0; z-index: 0; max-width: none; margin: 0; padding: 0; overflow: hidden; background: #cfe9ff; }
.vg-imm .vg-stage { position: absolute; inset: 0; border-radius: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; cursor: grab; }
.vg-imm .vg-stage.dragging { cursor: grabbing; user-select: none; }
.vg-imm .vg-box {
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: auto; height: max(100%, 60vw); aspect-ratio: 1200 / 720;
  border: 0; border-radius: 0; box-shadow: none;
}
.vg-hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.vg-hud .vg-head, .vg-hud .vg-dock { pointer-events: auto; }
.vg-glass, .vg-imm .vg-head, .vg-dock {
  border: 3px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 34px rgba(91, 58, 110, 0.2), inset 0 -3px 0 rgba(220, 205, 246, 0.5);
}
.vg-imm .vg-head {
  position: absolute; top: calc(env(safe-area-inset-top) + 80px); left: max(16px, env(safe-area-inset-left));
  max-width: min(600px, calc(100% - 24px)); margin: 0; padding: 8px 16px 10px 8px;
  flex-wrap: wrap; align-items: center; gap: 4px 10px; border-radius: 26px;
  animation: vg-hud-in 0.6s var(--bounce) both 0.15s;
}
.vg-imm .vg-title h1 { font-size: clamp(20px, 2.8vw, 30px); }
.vg-imm .vg-sub { margin-top: 0; font-size: 15px; }
.vg-imm .vg-tools { width: 100%; justify-content: flex-start; gap: 6px; }
.vg-imm .vg-tools:empty { display: none; }
/* The buddy's speech hangs below the title chip (the top bar is above it). */
.vg-imm .vg-mascot { flex: none; position: relative; }
.vg-imm .vg-mascot .mascot-bubble { top: 92%; bottom: auto; left: 8px; max-width: min(320px, 70vw); transform-origin: 12% 0; }
.vg-imm .vg-mascot .mascot-bubble::after { top: -11px; bottom: auto; rotate: 180deg; }
.vg-imm .vg-tools .pill-btn { font-size: 14px; padding: 4px 12px; border-width: 2px; box-shadow: 0 3px 0 #dccdf6; }

.vg-dock {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 14px); translate: -50% 0;
  display: flex; gap: 6px; padding: 6px; border-radius: 30px;
  animation: vg-dock-in 0.6s var(--bounce) both 0.3s;
}
.vg-dock-btn {
  position: relative; display: grid; justify-items: center; gap: 1px; min-width: 86px; padding: 8px 14px 6px;
  border: 0; border-radius: 24px; background: transparent; color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background 0.2s, transform 0.25s var(--bounce);
}
.vg-dock-ic { font-size: 30px; line-height: 1.1; transition: transform 0.3s var(--bounce); }
.vg-dock-btn:hover .vg-dock-ic { transform: translateY(-4px) scale(1.1) rotate(-6deg); }
.vg-dock-btn:active { transform: scale(0.92); }
.vg-dock-btn.on { background: var(--lilac-soft); box-shadow: inset 0 0 0 3px #fff; }
.vg-dock-btn.on .vg-dock-ic { transform: translateY(-2px) scale(1.06); }
.vg-badge {
  position: absolute; top: 0; right: 8px; min-width: 24px; height: 24px; padding: 0 6px;
  border: 2px solid #fff; border-radius: 999px; background: #ff4d7d; color: #fff;
  font-size: 13px; line-height: 20px; box-shadow: 0 3px 8px rgba(255, 77, 125, 0.4);
  animation: vg-badge 1.6s ease-in-out infinite;
}
@keyframes vg-badge { 0%, 100% { scale: 1; } 50% { scale: 1.16; } }
@keyframes vg-hud-in { from { opacity: 0; translate: 0 -24px; } }
@keyframes vg-dock-in { from { opacity: 0; translate: -50% 40px; } }

.vg-hud .vg-sheet {
  position: absolute; top: calc(env(safe-area-inset-top) + 80px); right: max(16px, env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom) + 110px); width: min(460px, calc(100% - 24px));
  overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px 14px;
  border: 3px solid #fff; border-radius: 30px; background: rgba(255, 248, 252, 0.95);
  box-shadow: 0 18px 44px rgba(91, 58, 110, 0.28);
  opacity: 0; visibility: hidden; pointer-events: none; translate: 48px 0; scale: 0.97;
  transition: opacity 0.2s, translate 0.35s var(--bounce), scale 0.35s var(--bounce), visibility 0s 0.35s;
}
.vg-hud .vg-sheet.open {
  opacity: 1; visibility: visible; pointer-events: auto; translate: 0 0; scale: 1;
  transition: opacity 0.2s, translate 0.4s var(--bounce), scale 0.4s var(--bounce);
}
.vg-sheet .vg-panel { display: none; padding: 6px 4px; border: 0; background: none; box-shadow: none; }
.vg-sheet[data-open='visitors'] .vg-visitors, .vg-sheet[data-open='projects'] .vg-projects, .vg-sheet[data-open='friends'] .vg-friends { display: block; }
.vg-sheet .vg-panel h2 { padding-right: 52px; }
.vg-sheet-x { position: sticky; top: 0; float: right; z-index: 3; width: 44px; height: 44px; margin-bottom: -44px; font-size: 18px; }
.vg-sheet .vg-flist { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

.vg-pan-hint {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 132px); translate: -50% 0;
  padding: 8px 16px; border: 3px solid #fff; border-radius: 999px; background: rgba(91, 58, 110, 0.78); color: #fff;
  font-size: 15px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
/* More to see: an arrow on each edge that has more, and a bar showing where you are. */
.vg-pan-arrow {
  position: absolute; top: 50%; z-index: 1; width: 58px; height: 58px; margin-top: -29px; padding: 0 0 4px;
  display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%;
  background: rgba(255, 255, 255, 0.86); color: var(--pink-deep); font-size: 44px; font-weight: 700; line-height: 1;
  box-shadow: 0 8px 22px rgba(91, 58, 110, 0.25); pointer-events: auto;
}
.vg-pan-arrow[hidden] { display: none; }
.vg-pan-arrow.left { left: max(12px, env(safe-area-inset-left)); animation: vg-nudge-l 1.6s ease-in-out infinite; }
.vg-pan-arrow.right { right: max(12px, env(safe-area-inset-right)); animation: vg-nudge-r 1.6s ease-in-out infinite; }
.vg-pan-arrow:active { scale: 0.9; }
@keyframes vg-nudge-l { 0%, 100% { translate: 0 0; } 50% { translate: -6px 0; } }
@keyframes vg-nudge-r { 0%, 100% { translate: 0 0; } 50% { translate: 6px 0; } }
.vg-hud:has(.vg-sheet.open) .vg-pan-arrow { display: none; }
.vg-pan-bar {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 104px); translate: -50% 0;
  width: min(240px, 56%); height: 18px; border: 3px solid #fff; border-radius: 999px;
  background: rgba(91, 58, 110, 0.32); box-shadow: 0 4px 12px rgba(91, 58, 110, 0.18); pointer-events: auto; cursor: pointer;
}
.vg-pan-bar[hidden] { display: none; }
.vg-pan-bar i { position: absolute; top: 0; bottom: 0; min-width: 24px; border-radius: 999px; background: var(--pink); transition: left 0.08s linear; }
.vg-pan-bar::before { content: ''; position: absolute; inset: -8px 0; } /* a bigger target for small fingers */
@media (prefers-reduced-motion: reduce) { .vg-pan-arrow { animation: none; } }
.vg-pan-hint.show { opacity: 1; animation: vg-hint 1.4s ease-in-out infinite; }
@keyframes vg-hint { 0%, 100% { translate: -54% 0; } 50% { translate: -46% 0; } }

/* Phones: the title is a compact chip, the sheets slide up from the dock. */
@media (max-width: 760px) {
  .vg-imm .vg-head { top: calc(env(safe-area-inset-top) + 72px); padding: 4px 12px 6px 4px; }
  .vg-imm .vg-head .vg-mascot { display: block; width: 52px; height: 52px; }
  .vg-imm .vg-head .vg-mascot .mascot { scale: 0.72; transform-origin: 0 50%; }
  .vg-imm .vg-title h1 { font-size: 20px; }
  .vg-imm .vg-sub { font-size: 13px; }
  .vg-hud .vg-sheet {
    top: auto; left: 8px; right: 8px; width: auto; bottom: calc(env(safe-area-inset-bottom) + 100px);
    max-height: calc(100dvh - env(safe-area-inset-top) - 190px); translate: 0 60px;
  }
  .vg-dock-btn { min-width: 76px; padding: 6px 10px 4px; font-size: 13px; }
  .vg-dock-ic { font-size: 26px; }
}

/* Short screens (a phone on its side): the dock stands up on the right, the
   title chip slims down, and the sheets open beside the dock. */
@media (max-height: 520px) {
  .vg-imm .vg-head { top: calc(env(safe-area-inset-top) + 64px); padding: 4px 12px 4px 4px; }
  .vg-imm .vg-sub, .vg-imm .vg-tools { display: none; }
  .vg-imm .vg-title h1 { font-size: 18px; }
  .vg-imm .vg-head .vg-mascot { display: block; width: 44px; height: 44px; }
  .vg-imm .vg-head .vg-mascot .mascot { scale: 0.6; transform-origin: 0 50%; }
  .vg-dock { left: auto; right: calc(env(safe-area-inset-right) + 10px); bottom: calc(env(safe-area-inset-bottom) + 10px); translate: none; flex-direction: column; gap: 2px; padding: 4px; border-radius: 24px; animation-name: fade-in; }
  .vg-dock-btn { min-width: 0; padding: 6px 8px 4px; }
  .vg-dock-label { font-size: 11px; }
  .vg-dock-ic { font-size: 22px; }
  .vg-badge { right: 0; }
  .vg-hud .vg-sheet {
    top: calc(env(safe-area-inset-top) + 64px); bottom: calc(env(safe-area-inset-bottom) + 10px); left: auto;
    right: calc(env(safe-area-inset-right) + 92px); width: min(420px, calc(100% - 110px)); max-height: none; translate: 40px 0;
  }
  .vg-pan-hint { bottom: calc(env(safe-area-inset-bottom) + 40px); }
  .vg-pan-bar { bottom: calc(env(safe-area-inset-bottom) + 14px); }
  .vg-pan-arrow.right { right: calc(env(safe-area-inset-right) + 96px); }
}

/* ——— Panels ——— */
.vg-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.vg-friends { grid-column: 1 / -1; }
.vg-panel { padding: 18px; border: 4px solid #fff; border-radius: 26px; background: var(--card); box-shadow: var(--shadow); }
.vg-panel h2 { font-size: 22px; margin-bottom: 10px; }
.vg-note { margin-top: 10px; font-weight: 600; color: var(--ink-soft); }
.vg-cards { display: grid; gap: 10px; }
.vg-card-nb {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; text-align: left;
  border: 3px solid #fff; border-radius: 22px; background: #fff8fc; box-shadow: 0 4px 0 #f0d8ea;
  transition: transform 0.15s var(--bounce);
}
.vg-card-nb:not(:disabled):hover { transform: translateY(-2px) scale(1.01); }
.vg-card-nb:not(:disabled):active { transform: translateY(2px); }
.vg-card-nb.away { opacity: 0.7; cursor: default; }
.vg-card-nb.helped { background: #f2fff8; box-shadow: 0 4px 0 #c6ecd8; }
.vg-card-art { width: 70px; flex: none; }
.vg-card-art svg { display: block; width: 100%; }
.vg-card-nb:not(.helped):not(.away) .vg-card-art svg { animation: vg-idle 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.vg-card-text { display: grid; gap: 2px; }
.vg-card-name { font-size: 19px; font-weight: 700; }
.vg-card-text b { font-size: 15px; }
.vg-card-text .need { color: #e0408a; }
.vg-card-text .ok { color: var(--mint-deep); }
.vg-card-text .soon { color: var(--ink-soft); }

/* Friendship hearts: each fills in thirds, from the bottom up. */
.vg-hearts { display: inline-flex; gap: 2px; }
.vg-heart { position: relative; display: inline-block; font-size: 18px; line-height: 1; }
.vg-heart::before { content: '🤍'; opacity: 0.85; }
.vg-heart > span { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path 0.7s var(--bounce); }
.vg-heart.f1 > span { clip-path: inset(62% 0 0 0); }
.vg-heart.f2 > span { clip-path: inset(36% 0 0 0); }
.vg-heart.f3 > span { clip-path: inset(0 0 0 0); }
.vg-heart.sm { font-size: 14px; }
.vg-heart.big { font-size: clamp(30px, 6vw, 42px); }
.vg-heart.grow { animation: bump 0.6s var(--bounce); }

.vg-plist { display: grid; gap: 10px; }
.vg-pcard { padding: 12px 14px; border: 3px solid #fff; border-radius: 20px; background: #fffaf2; box-shadow: 0 4px 0 #f2dfc4; }
.vg-pcard.s-locked, .vg-pcard.s-gated { background: #f7f4fa; box-shadow: 0 4px 0 #e4dcec; }
.vg-pcard.s-ribbon { background: #fff2f5; box-shadow: 0 4px 0 #ffc2d0; animation: vg-badge 1.6s ease-in-out infinite; }
.vg-pcard.s-done { background: #f2fff8; box-shadow: 0 4px 0 #c6ecd8; }
.vg-pcard.bump { animation: bump 0.5s var(--bounce); }
.vg-pcard-top { display: flex; align-items: center; gap: 10px; }
.vg-pcard-top > span:nth-child(2) { flex: 1; display: grid; }
.vg-pcard-top b { font-size: 18px; }
.vg-pcard-top small { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.vg-picon { font-size: 30px; }
.vg-pips { display: flex; gap: 4px; }
.vg-pip { width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #d9c7ea; background: #fff; }
.vg-pip.on { background: var(--gold); border-color: var(--gold-deep); }
.vg-pip.busy { background: repeating-linear-gradient(45deg, #ffd08f 0 3px, #fff 3px 6px); border-color: #e09a00; }
.vg-why { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.vg-meter {
  position: relative; height: 26px; margin: 10px 0 8px; border: 3px solid #fff; border-radius: 999px;
  background: #f1e8f7; box-shadow: inset 0 2px 0 rgba(91, 58, 110, 0.08); overflow: hidden;
}
.vg-meter > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ff9a6b, #ffc53d); border-radius: 999px; transition: width 0.6s var(--bounce); }
.vg-meter > i.add { background: repeating-linear-gradient(45deg, #ffd56b 0 8px, #fff1b8 8px 16px); border-radius: 0; opacity: 0.9; }
.vg-meter > span { position: relative; display: block; text-align: center; font-size: 14px; font-weight: 700; line-height: 20px; }
.vg-meter.big { height: 34px; }
.vg-meter.big > span { line-height: 28px; font-size: 16px; }
.vg-addbtn, .vg-cutbtn { width: 100%; padding: 10px; font-size: 17px; }

.vg-flist { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.vg-friend {
  display: grid; justify-items: center; gap: 3px; padding: 10px 6px; border: 3px solid #fff; border-radius: 20px;
  background: #fff8fc; box-shadow: 0 4px 0 #f0d8ea;
}
.vg-friend.ghost { background: #f4f0f8; box-shadow: 0 4px 0 #e4dcec; }
.vg-friend.ghost svg { filter: brightness(0) opacity(0.18); }
.vg-friend-art { width: 74px; }
.vg-friend-art svg { display: block; width: 100%; }
.vg-friend b { font-size: 16px; }
.vg-friend small { font-size: 14px; color: var(--ink-soft); font-weight: 600; }

/* ——— A visitor's request ——— */
.vg-req-overlay { align-items: flex-start; overflow-y: auto; padding: 14px; }
.vg-req {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) 1.4fr;
  grid-template-areas: 'who card' 'who input';
  gap: 14px 20px;
  width: min(980px, 100%);
  margin: auto;
  padding: 20px;
  border: 5px solid #fff;
  border-radius: 32px;
  background: linear-gradient(#fffaf2, #fff3fa);
  box-shadow: 0 20px 60px rgba(60, 20, 80, 0.3);
  animation: pop-in 0.35s var(--bounce);
}
.vg-close { position: absolute; top: 10px; left: 10px; z-index: 3; }
.vg-req-who { grid-area: who; display: grid; justify-items: center; align-content: start; gap: 8px; padding-top: 18px; }
.vg-req-art { width: min(220px, 100%); transform-origin: 50% 100%; }
.vg-req-art svg { display: block; width: 100%; }
.vg-req-art.hello { animation: vg-hop 0.7s var(--bounce); }
.vg-req-art.talk { animation: vg-talk 0.6s ease-in-out; }
.vg-req-art.think { animation: vg-think 0.9s ease-in-out; }
.vg-req-art.cheer { animation: vg-cheer 0.9s var(--bounce) 2; }
.vg-req-name { display: grid; justify-items: center; gap: 2px; }
.vg-req-name b { font-size: 21px; }
.vg-bubble {
  position: relative; max-width: 300px; padding: 12px 16px; border: 3px solid var(--outline);
  border-radius: 20px; background: #fff; font-size: 17px; font-weight: 600; line-height: 1.3;
}
.vg-bubble::before { content: ''; position: absolute; left: 50%; top: -12px; translate: -50% 0; border: 10px solid transparent; border-bottom-color: var(--outline); border-top: 0; }
.vg-qcard {
  grid-area: card; position: relative; padding: 18px 70px 18px 20px;
  border: 4px solid #fff; border-radius: 26px; background: #fff; box-shadow: 0 6px 0 #f0d8ea, var(--shadow);
}
.vg-q { font-size: clamp(20px, 2.9vw, 27px); font-weight: 600; line-height: 1.35; }
.vg-frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: 0.82em; line-height: 1; margin: 0 0.12em; }
.vg-frac > span:first-child { border-bottom: 2.5px solid currentColor; padding: 0 0.12em 0.06em; }
.vg-frac > span:last-child { padding-top: 0.06em; }
.vg-pic { display: flex; justify-content: center; margin-top: 12px; overflow-x: auto; }
.vg-pic .vp { max-width: 100%; height: auto; max-height: 230px; }
.vg-pic .vp-clock { width: 170px; }
.vg-pic .vp-pie { width: 140px; }
.vg-ans { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-size: clamp(26px, 4vw, 38px); font-weight: 700; }
.vg-box-ans {
  min-width: 2.6em; padding: 0.05em 0.4em; border: 4px dashed #d7b9ef; border-radius: 18px;
  background: #faf5ff; text-align: center; color: var(--lilac-deep);
}
.vg-box-ans.typing { border-style: solid; border-color: var(--lilac); color: var(--ink); }
.vg-box-ans.reveal { border-color: var(--gold); color: var(--gold-deep); }
.vg-box-ans.nudge { animation: shake 0.4s; }
.vg-ans .unit, .vg-ans .pre { color: var(--ink-soft); font-size: 0.7em; }
.vg-help { margin-top: 14px; padding: 12px; border-radius: 18px; background: #fff8e3; border: 3px dashed #f2d28a; animation: pop-in 0.4s var(--bounce); }
.vg-help .steps { margin: 6px 0 0; }
.vg-reveal { margin-top: 8px; font-size: 18px; font-weight: 600; }
.vg-input { grid-area: input; }
/* The player stands with the neighbor, under the speech bubble: never over the keys. */
.vg-hero { justify-self: center; margin-top: 6px; pointer-events: auto; }

.vg-pad { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(54px, 8vh, 74px); }
.vg-pad.money { grid-template-columns: repeat(7, 1fr); grid-auto-rows: clamp(50px, 7.5vh, 70px); }
.vg-pad .key { grid-area: auto; aspect-ratio: auto; font-size: clamp(24px, 4vw, 36px); }
.vg-pad.money .k-ok { grid-column: span 2; }
.vg-pad .k-del { --k: #fff; --kd: #ead7ee; color: var(--ink-soft); }
.vg-pad .k-ok { --k: #6fdcb8; --kd: #22a37f; color: #fff; grid-column: span 1; }
.vg-pad .k-dot { --k: #fff; --kd: #ead7ee; }

.vg-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vg-choice {
  min-height: 70px; padding: 10px; border: 4px solid #fff; border-radius: 22px;
  background: #f6f0ff; box-shadow: 0 5px 0 #dccdf6; font-size: clamp(20px, 3vw, 28px); font-weight: 700;
  transition: transform 0.12s var(--bounce);
}
.vg-choice:hover { transform: translateY(-2px); }
.vg-choice:active { transform: translateY(3px); box-shadow: 0 2px 0 #dccdf6; }
.vg-choices.pics .vg-choice { display: grid; place-items: center; }
.vg-choices.pics .vp-clock { width: min(150px, 30vw); }
.vg-choices.pics .vp-pie { width: min(120px, 26vw); }
.vg-choice.crossed { opacity: 0.35; filter: grayscale(1); }
.vg-choice.right { background: #c9f7e4; box-shadow: 0 5px 0 #22a37f; animation: pop-big 0.4s var(--bounce); }
.vg-choice.pulse { outline: 5px solid var(--gold); outline-offset: 3px; animation: pulse 0.9s ease-in-out infinite; }
.vg-choice.shake { animation: shake 0.4s; }

.vg-paid { display: flex; align-items: center; gap: 10px; min-height: 72px; margin-bottom: 10px; padding: 8px 12px; border: 3px dashed #d7b9ef; border-radius: 20px; background: #faf5ff; }
.vg-paid.nudge { animation: shake 0.4s; }
.vg-paid-label { font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.vg-paid-coins { flex: 1; overflow-x: auto; }
.vg-paid-coins .vp-coins { height: 54px; width: auto; }
.vg-paid-coins i { color: var(--ink-soft); }
.vg-paid-sum { font-size: 24px; font-weight: 700; color: #e0408a; }
.vg-tray { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.vg-coinbtn { padding: 4px; border: 4px solid #fff; border-radius: 50%; background: #fff7e8; box-shadow: 0 5px 0 #f2dfc4; aspect-ratio: 1; }
.vg-coinbtn svg { display: block; width: 100%; height: 100%; }
.vg-coinbtn.tap { animation: bump 0.35s var(--bounce); }
.vg-coinbtn.pulse { outline: 5px solid var(--gold); outline-offset: 2px; animation: pulse 0.9s ease-in-out infinite; }
.vg-tray .key { aspect-ratio: 1; font-size: 30px; }
.vg-tray .k-del { --k: #fff; --kd: #ead7ee; }
.vg-tray .k-ok { --k: #6fdcb8; --kd: #22a37f; color: #fff; }

.vg-thanks { display: grid; justify-items: center; gap: 10px; padding: 16px; border-radius: 24px; background: #fff; border: 4px solid #fff; box-shadow: var(--shadow); text-align: center; animation: pop-in 0.4s var(--bounce); }
.vg-tip { font-size: 20px; font-weight: 600; }
.vg-newheart { font-size: 20px; font-weight: 700; color: #e0408a; animation: pop-in 0.5s var(--bounce) 0.4s backwards; }
.vg-up { font-size: 17px; font-weight: 600; color: var(--lilac-deep); }
.vg-keepsake { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 20px; background: linear-gradient(#fff6d6, #ffe8f2); border: 3px solid #fff; box-shadow: 0 4px 0 #f2d28a; text-align: left; }
.vg-keepsake small { display: block; font-weight: 600; color: var(--ink-soft); }
.vg-ks-emoji { font-size: 44px; }
.vg-keepsake.gift { animation: vg-gift 0.9s var(--bounce); }
.vg-welcome { font-size: 20px; padding: 12px 28px; }

.vg-letter {
  margin-top: 12px; padding: 14px 18px; max-height: 280px; overflow-y: auto;
  border: 2px solid #e8dcc4; border-radius: 8px; background: repeating-linear-gradient(0deg, #fffdf6 0 25px, #f3ecd8 25px 26px);
  font-family: Georgia, 'Times New Roman', serif; font-size: 17px; line-height: 26px; color: #4a3a3a; rotate: -0.4deg;
}
.vg-letter mark { background: #fff0a6; border-radius: 4px; padding: 1px 2px; box-shadow: 0 0 0 3px #fff0a6; }
.vg-lq { margin-top: 12px; font-size: 19px; font-weight: 600; }
.vg-explain { font-size: 18px; font-weight: 600; line-height: 1.35; }
.vg-hands { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.vg-hands-clock .vp-clock { width: min(220px, 50vw); }
.vg-hands-ctl { display: grid; gap: 12px; }
.vg-hands-row { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.vg-hands-row b { min-width: 6.5em; }
.vg-hands-row .round-btn { font-size: 26px; }
.vg-hands-ok.pulse { animation: pulse 0.9s ease-in-out infinite; }
.vg-market { margin: 4px 0 10px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(90deg, #fff1c4, #ffe0ee); font-weight: 600; animation: pop-in 0.5s var(--bounce); }
.vg-tag { padding: 0.05em 0.5em; border-radius: 999px; background: #ffe08f; font-size: 0.7em; font-style: normal; font-weight: 700; }
.vg-sub2 { margin: 14px 0 8px; font-size: 18px; }
.vg-pcard.cottage { background: #fff6fb; }
.vg-nb.resident { animation-duration: 3.2s; }
.vg-nb.resident svg { filter: drop-shadow(0 4px 0 rgba(91, 58, 110, 0.1)); }
.vg-boat { animation: vg-bob 2.8s ease-in-out infinite; transform-box: fill-box; }
.vg-bell { animation: km-ring 5s ease-in-out infinite; }
.vg-notes text, .vg-band text { animation: vg-noteup 2.4s ease-in-out infinite; transform-box: fill-box; }
.vg-swing { animation: vg-swingit 2.4s ease-in-out infinite alternate; }
.vg-kite { animation: vg-bob 3s ease-in-out infinite; transform-box: fill-box; }
.vg-duck { animation: vg-shuffle 5s ease-in-out infinite; }
.vg-bees { animation: vg-flutter 4s ease-in-out infinite; }
@keyframes vg-noteup { 0%, 100% { translate: 0 0; opacity: 0.6; } 50% { translate: 4px -10px; opacity: 1; } }
@keyframes vg-swingit { from { rotate: -14deg; } to { rotate: 14deg; } }

/* The brick sheet. */
.vg-bricks { text-align: center; }
.vg-bricks-icon { font-size: 64px; line-height: 1; animation: vg-idle 2.4s ease-in-out infinite; }
.vg-bricks-tier { font-weight: 600; color: var(--ink-soft); }
.vg-stepper { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.vg-stepper .round-btn { font-size: 30px; font-weight: 700; }
.vg-stepper .round-btn:disabled { opacity: 0.35; }
.vg-n { min-width: 2.2ch; font-size: 42px; }
.vg-math { margin-top: 8px; font-size: 21px !important; font-weight: 600; color: var(--ink) !important; }
.vg-have { font-size: 15px !important; }

/* The Village News. */
.vg-scrap { max-width: 620px; }
.vg-scrap-list { display: grid; gap: 14px; max-height: 60vh; overflow-y: auto; margin-top: 14px; padding: 4px; }
.vg-paper {
  padding: 14px 18px; border: 3px solid #e8dcc4; border-radius: 6px; text-align: left;
  background: repeating-linear-gradient(0deg, #fffdf6 0 23px, #f6efdd 23px 24px);
  box-shadow: 0 6px 16px rgba(91, 58, 110, 0.15); rotate: -0.6deg; font-family: Georgia, 'Times New Roman', serif;
}
.vg-paper:nth-child(even) { rotate: 0.8deg; }
.vg-paper-mast { margin: 0 0 6px !important; padding-bottom: 4px; border-bottom: 3px double #6b4a3a; font-size: 13px !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b4a3a !important; }
.vg-paper h3 { font-size: clamp(22px, 3.6vw, 30px); line-height: 1.1; color: #3b2a2a; }
.vg-paper p { margin-top: 6px; font-size: 17px; color: #5a4a4a; }
.vg-paper .pill-btn { margin-top: 10px; font-family: var(--font); }
.vg-paper.fly { animation: vg-paper-in 0.9s var(--bounce) both; max-width: 520px; }

/* ——— The ribbon-cutting ——— */
.vg-show { z-index: 60; background: rgba(30, 16, 50, 0.72); align-items: center; flex-direction: column; gap: 14px; padding: 12px; }
.vg-show-stage { position: relative; display: grid; justify-items: center; gap: 12px; width: 100%; }
.vg-show-box {
  position: relative; width: min(96vw, 1100px, (100dvh - 210px) * 1200 / 720); aspect-ratio: 1200 / 720;
  overflow: hidden; border: 5px solid #fff; border-radius: 30px; background: #cfe9ff; container-type: inline-size;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
/* One wrapper carries the camera (a single composited transform); the new
   village fades in over the old, and a ring of light sweeps out from the site. */
.vg-zoom { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform 1.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.vg-layer, .vg-crowd, .vg-spot { position: absolute; inset: 0; }
.vg-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vg-show.gather .vg-zoom { transform: translate(var(--gx), var(--gy)) scale(1.4); }
.vg-show.party .vg-zoom { transform: translate(var(--px), var(--py)) scale(1.18); }
.vg-layer.b { opacity: 0; transition: opacity 1.3s ease; will-change: opacity; }
.vg-show.change .vg-layer.b { opacity: 1; }
.vg-wave {
  position: absolute; left: var(--sx); top: var(--sy); width: 30%; aspect-ratio: 1; translate: -50% -50%; scale: 0; opacity: 0;
  border-radius: 50%; border: 0.8cqw solid rgba(255, 255, 255, 0.95); box-shadow: 0 0 3cqw 1cqw rgba(255, 240, 160, 0.9), inset 0 0 3cqw 1cqw rgba(255, 240, 160, 0.7);
  pointer-events: none; will-change: scale, opacity;
}
.vg-show.change .vg-wave { animation: vg-wave 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) forwards; }
@keyframes vg-wave { 0% { scale: 0; opacity: 1; } 70% { opacity: 0.9; } 100% { scale: 7; opacity: 0; } }
.vg-show .vg-layer.b .vg-piece:not(.pop) { opacity: 1; }
.vg-show .vg-layer.b .vg-piece.pop { transform-box: fill-box; transform-origin: 50% 100%; animation: vg-piece 0.55s var(--bounce) both; }
.vg-spot { pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--sx) var(--sy), transparent 0 13%, rgba(20, 10, 40, 0.72) 30%); transition: opacity 0.8s, transform 1.6s; }
.vg-show.roll .vg-spot { opacity: 1; }
.vg-show.size-small .vg-spot { background: radial-gradient(circle at var(--sx) var(--sy), transparent 0 22%, rgba(20, 10, 40, 0.4) 45%); }
.vg-show.change .vg-spot { opacity: 0; }
.vg-show.roll .vg-layer.a .vg-tarp { animation-duration: 0.5s; }
.vg-show.roll .vg-layer.a .vg-cover { animation: vg-shiver 0.12s linear infinite; transform-box: fill-box; }
.vg-gather { position: absolute; z-index: 2; transform-origin: 50% 100%; translate: var(--from) 0; transition: translate 1.5s cubic-bezier(0.3, 0.7, 0.4, 1); transition-delay: calc(var(--i) * 0.15s); }
.vg-gather svg { display: block; width: 100%; animation: vg-walk 0.4s ease-in-out infinite alternate; }
.vg-show.gather .vg-gather { translate: 0 0; }
.vg-show.roll .vg-gather svg { animation: vg-bounce 0.5s ease-in-out infinite alternate; }
.vg-show.party .vg-gather svg { animation: vg-cheer 0.7s var(--bounce) infinite; animation-delay: calc(var(--i) * 0.1s); }
.vg-show-ui { display: grid; justify-items: center; gap: 10px; min-height: 130px; color: #fff; text-align: center; }
.vg-show-title { font-size: clamp(22px, 4vw, 34px); font-weight: 700; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.vg-pull { display: grid; justify-items: center; gap: 6px; font-size: 20px; font-weight: 700; }
.vg-tap-ribbon { font-size: 24px; padding: 14px 32px; animation: pulse 0.8s ease-in-out infinite; }
.vg-pull-cord { position: relative; width: 12px; height: 70px; border-radius: 6px; background: linear-gradient(#ff7a95, #ff4d6d); box-shadow: 0 0 0 3px #fff; }
.vg-pull-handle {
  position: absolute; left: 50%; bottom: -46px; translate: -50% 0;
  width: 76px; height: 76px; border: 4px solid #fff; border-radius: 50%;
  background: #ff4d6d; font-size: 40px; touch-action: none; cursor: grab;
  box-shadow: 0 6px 0 #c9304f, 0 0 0 0 rgba(255, 255, 255, 0.6);
  animation: vg-tug 1.1s ease-in-out infinite; transition: transform 0.12s;
}
.vg-pull p { margin-top: 50px; }
.vg-after { display: grid; justify-items: center; gap: 12px; }
.vg-news-chip { padding: 8px 18px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; animation: pop-in 0.5s var(--bounce); }
.vg-done { font-size: 22px; padding: 12px 34px; }
.vg-skip { position: fixed; top: 14px; right: 14px; z-index: 2; }
.vg-show.still .vg-zoom { transition: none; transform: none !important; }
.vg-show.still .vg-wave { display: none; }

/* The album's Neighbors page. */
.ab-neighbor svg { display: block; width: 100%; height: auto; }
.ab-neighbor.ghost svg { filter: brightness(0) opacity(0.18); }

/* The finale: the time-lapse, the parade across the bridge, the thank-you scroll. */
.vg-finale .vg-layer.tl .vg-piece.pop { transform-box: fill-box; transform-origin: 50% 100%; animation: vg-piece 0.5s var(--bounce) both; }
.vg-finale .vg-then-label { z-index: 3; transition: none; }
.vg-parade { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.vg-marcher { position: absolute; left: 0; bottom: 26%; width: 9%; animation: vg-march 7s linear both; animation-delay: calc(var(--i) * 0.35s); }
.vg-marcher svg { display: block; width: 100%; animation: vg-walk 0.35s ease-in-out infinite alternate; }
.vg-scroll {
  max-width: 520px; padding: 18px 24px; border-radius: 16px; color: #4a3a3a; text-align: center;
  background: linear-gradient(#fff8e6, #ffeccc); border: 4px solid #e8c48e; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  font-family: Georgia, 'Times New Roman', serif; animation: vg-paper-in 1s var(--bounce) both;
}
.vg-scroll h3 { font-family: var(--font); font-size: clamp(26px, 5vw, 40px); color: #c27c00; }
.vg-scroll p { font-size: 17px; margin-top: 6px; }
.vg-scroll-top { font-size: 26px; letter-spacing: 4px; }
.vg-key { font-size: 76px; line-height: 1.1; animation: vg-cheer 1s var(--bounce) infinite; filter: drop-shadow(0 0 18px #ffd54d); }
@keyframes vg-march { from { translate: -10vw 0; } to { translate: 105cqw 0; } }

/* ——— Home: the islet in the sky ——— */
.km-village .km-art { translate: 0 0; animation: vg-float 5.5s ease-in-out infinite; }
.km-village .km-sign { --accent: #ffd6a8; --accent-deep: #d46a2a; }
.km-village .vg-waver { animation: vg-waver 1.4s ease-in-out infinite alternate; transform-box: fill-box; }

/* Under fog until its goals are met (js/village.js villageGoals): the island
   goes soft and gray, clouds drift over it, and a lock sits on top. When the
   goals are met the clouds roll apart (.km-unfog) and the color comes back. */
.km-fog .km-art { filter: grayscale(.6) blur(.6px) brightness(1.05); transition: filter 1.1s ease; }
.km-fog.km-unfog .km-art { filter: none; }
.vg-fog { position: absolute; inset: 4% 0 18%; pointer-events: none; }
.vg-fog i {
  position: absolute; width: 36%; aspect-ratio: 2.4; border-radius: 999px; background: #fff; opacity: .7;
  box-shadow: 0 0 12px 6px #fff; animation: vg-fog-drift 7s ease-in-out infinite alternate;
  transition: translate 1.1s ease-in, opacity 1.1s ease-in;
}
.vg-fog i:nth-child(1) { left: 0; top: 18%; }
.vg-fog i:nth-child(2) { right: 0; top: 8%; animation-delay: -2s; }
.vg-fog i:nth-child(3) { left: 14%; top: 52%; animation-delay: -4s; }
.vg-fog i:nth-child(4) { right: 6%; top: 56%; width: 30%; animation-delay: -1s; }
.vg-fog b {
  position: absolute; left: 50%; top: 40%; translate: -50% -50%; font-size: clamp(26px, 4cqw, 44px);
  filter: drop-shadow(0 3px 0 rgb(0 0 0 / .15)); transition: scale .4s var(--bounce, ease), opacity .4s ease;
}
.km-unfog .vg-fog i:nth-child(odd) { translate: -60% 0; opacity: 0; }
.km-unfog .vg-fog i:nth-child(even) { translate: 60% 0; opacity: 0; }
.km-unfog .vg-fog b { scale: 1.6; opacity: 0; }
@keyframes vg-fog-drift { from { translate: -4% 0; } to { translate: 4% 0; } }

/* The gate card: a peek at the island under fog, and the three goals. */
.vg-gate-art { position: relative; display: block; width: min(240px, 60vw); }
.vg-gate-islet { display: block; width: 100%; height: auto; filter: grayscale(.6) blur(.6px); }
.vg-gate-art .vg-fog b { font-size: 40px; }
.vg-goals { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; text-align: left; }
.vg-goal {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px;
  background: var(--lilac-soft); color: var(--ink); font-weight: 700;
}
.vg-goal.done { background: #dff6ec; }
.vg-goal-icon { font-size: 28px; line-height: 1; }
.vg-goal-text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.vg-goal-bar { display: block; height: 8px; border-radius: 999px; background: #fff; overflow: hidden; }
.vg-goal-bar span { display: block; height: 100%; border-radius: inherit; background: var(--lilac); }
.vg-goal.done .vg-goal-bar span { background: var(--mint); }
.vg-goal-n { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* On the tall island the village sits to the left: its bridge points right, at the kingdom. */
@media (orientation: portrait) {
  .km-village .vg-islet { scale: -1 1; }
}

@container (max-width: 520px) {
  .vg-nb-name { display: none; }
}
@media (max-width: 760px) {
  .vg-panels { grid-template-columns: 1fr; }
  .vg-req { grid-template-columns: 1fr; grid-template-areas: 'who' 'card' 'input'; padding: 14px; }
  .vg-req-who { grid-template-columns: 96px 1fr; justify-items: start; align-items: center; padding-top: 30px; }
  .vg-req-art { width: 96px; grid-row: span 2; }
  .vg-bubble { font-size: 15px; }
  .vg-bubble::before { left: -12px; top: 50%; translate: 0 -50%; border: 10px solid transparent; border-right-color: var(--outline); border-left: 0; }
  .vg-qcard { padding: 14px 60px 14px 14px; }
  .vg-tray { grid-template-columns: repeat(4, 1fr); }
  .vg-pad, .vg-pad.money { grid-template-columns: repeat(4, 1fr); }
  .vg-pad.money .k-ok { grid-column: auto; }
  .vg-hero { display: none; }
  .vg-head .vg-mascot { display: none; }
  .vg-head { flex-wrap: wrap; margin-top: 40px; }
  .vg-tools { width: 100%; justify-content: flex-start; }
  .vg-tools .pill-btn { font-size: 15px; padding: 6px 12px; }
}

@keyframes vg-spin { to { transform: rotate(360deg); } }
@keyframes vg-flicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.82; } 50% { opacity: 0.95; } }
@keyframes vg-blink { 50% { opacity: 0; } }
@keyframes vg-fairy { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes vg-flow { from { translate: 0 -10px; } to { translate: 0 10px; } }
@keyframes vg-drift { from { translate: -30px 0; } to { translate: 40px 0; } }
@keyframes vg-bob { 0%, 100% { translate: 0 0; rotate: -1.5deg; } 50% { translate: 0 4px; rotate: 1.5deg; } }
@keyframes vg-neon { 0%, 70%, 74%, 100% { opacity: 1; } 72% { opacity: 0.4; } }
@keyframes vg-flap { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(-1.5deg) scaleY(1.01); } }
@keyframes vg-ready { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes vg-fly { from { translate: 0 0; } 50% { translate: 60cqw -3cqw; } to { translate: 120cqw 1cqw; } }
@keyframes vg-flap-wings { from { transform: scaleY(1); } to { transform: scaleY(0.4); } }
@keyframes vg-flutter { 0%, 100% { translate: 0 0; rotate: -8deg; } 25% { translate: 5cqw -3cqw; rotate: 10deg; } 50% { translate: 9cqw 1cqw; rotate: -6deg; } 75% { translate: 3cqw 3cqw; rotate: 8deg; } }
@keyframes vg-firefly { 0%, 100% { opacity: 0.2; translate: 0 0; } 50% { opacity: 1; translate: 2cqw -2cqw; } }
@keyframes vg-smoke { from { opacity: 0.8; transform: translate(0, 0) scale(0.6); } to { opacity: 0; transform: translate(1.5cqw, -6cqw) scale(2.2); } }
@keyframes vg-idle { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-1.5%) scaleY(1.015); } }
@keyframes vg-wave { from { transform: rotate(-6deg); } to { transform: rotate(12deg); } }
@keyframes vg-badge { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }
@keyframes vg-shuffle { 0%, 100% { translate: 0 0; } 30% { translate: -2.5% 0; } 60% { translate: 2% -2%; } }
@keyframes vg-look { 0%, 100% { transform: scaleX(1); } 40%, 60% { transform: scaleX(-1); } }
@keyframes vg-hop { 0% { translate: 0 0; } 35% { translate: 0 -14%; } 60% { translate: 0 0; scale: 1.06 0.94; } 100% { scale: 1; } }
@keyframes vg-blinkeyes { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes vg-sway { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes vg-talk { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg) scaleY(1.03); } 75% { transform: rotate(3deg); } }
@keyframes vg-think { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg) translateX(-4px); } }
@keyframes vg-cheer { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-16%) scale(1.06, 0.96); } }
@keyframes vg-gift { 0% { transform: scale(0.3) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.15) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes vg-paper-in { from { transform: translateY(60vh) rotate(-30deg) scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vg-tarp-off { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 30% { transform: translate(0, -6%) rotate(-3deg); } 100% { transform: translate(40%, -140%) rotate(28deg) scale(0.6); opacity: 0; } }
@keyframes vg-piece { 0% { transform: scale(0) translateY(20px); opacity: 0; } 60% { transform: scale(1.12) translateY(-4px); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes vg-shiver { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes vg-walk { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-4%) rotate(3deg); } }
@keyframes vg-bounce { from { transform: translateY(0); } to { transform: translateY(-6%); } }
@keyframes vg-tug { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
@keyframes vg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.5%; } }
@keyframes vg-waver { from { rotate: -6deg; } to { rotate: 6deg; } }

/* ——— Phase 3: Family Builds in the sky, festivals, Pre-K pictures, visits ——— */
.vg-sky-bob { animation: vg-sky-bob 6s ease-in-out infinite alternate; will-change: transform; }
.vg-sky-rise { animation: vg-sky-rise 9s ease-in-out infinite alternate; will-change: transform; }
.vg-sky-sway { transform-box: fill-box; animation: vg-sky-sway 3.2s ease-in-out infinite alternate; will-change: transform; }
.vg-sky-rainbow { opacity: 0.85; }
.vg-night .vg-sky-rainbow { opacity: 0.35; }
.vg-skyglow { opacity: 0.35; }
.vg-night .vg-skyglow { opacity: 1; animation: vg-flicker 3s ease-in-out infinite; }
.vg-burst { transform-box: fill-box; transform-origin: center; animation: vg-burst 3.3s ease-out infinite; will-change: transform, opacity; }
.vg-flutter { transform-box: fill-box; transform-origin: 50% 0; animation: vg-pennant 2.2s ease-in-out infinite alternate; }
.vg-fest-glow { opacity: 0.4; }
.vg-night .vg-fest-glow { opacity: 1; animation: vg-flicker 2.6s ease-in-out infinite; }
@keyframes vg-sky-bob { from { transform: translateY(-6px); } to { transform: translateY(8px) rotate(1deg); } }
@keyframes vg-sky-rise { from { transform: translate(-4px, 10px); } to { transform: translate(5px, -14px); } }
@keyframes vg-sky-sway { from { transform: rotate(-7deg); } to { transform: rotate(6deg) translateY(-6px); } }
@keyframes vg-burst { 0%, 8% { transform: scale(0.1); opacity: 0; } 22% { transform: scale(1); opacity: 1; } 55% { transform: scale(1.12); opacity: 0.9; } 75%, 100% { transform: scale(1.2); opacity: 0; } }
@keyframes vg-pennant { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }

.vg-meter.fam > i.seg { position: absolute; top: 0; bottom: 0; border-radius: 0; border-right: 2px solid #fff; transition: width 0.6s var(--bounce); }
.vg-meter.fam > i.seg:first-child { border-radius: 999px 0 0 999px; }
.vg-givers { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 2px 0 8px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.vg-givers span { display: inline-flex; align-items: center; gap: 5px; }
.vg-givers i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(91, 58, 110, 0.25); }
.vg-famcard { background: linear-gradient(160deg, #fff 55%, #f1e8ff); }
.vg-show-by { margin-top: 4px; font-size: clamp(14px, 2.4vw, 18px); font-weight: 700; color: #fff; text-shadow: 0 2px 0 rgba(59, 33, 72, 0.5); }

/* Pre-K: Toyland's pictures on the request card. */
.vg-pick { display: grid; place-items: center; min-height: 120px; padding: 44px 0 6px; }
.vg-pick.solved .pk-slot { animation: pop-big 0.45s var(--bounce); }
.vg-input .choices.vg-pk { width: 100%; }
.vg-input .choices.vg-pk .choice { min-height: clamp(96px, 16vh, 140px); }

/* Visiting family. */
.vg-famrow { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 14px 0; }
.vg-famwho { display: grid; justify-items: center; gap: 4px; min-width: 120px; padding: 12px; border: 3px solid #eadff7; border-radius: 22px; background: #fff; font: inherit; color: var(--ink); cursor: pointer; box-shadow: 0 5px 0 #e3d6f3; }
.vg-famwho:active { transform: translateY(3px); box-shadow: 0 2px 0 #e3d6f3; }
.vg-fam-face { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #f7f0ff; overflow: hidden; font-size: 40px; }
.vg-fam-face svg { width: 100%; height: 100%; }
.vg-visit { padding: 12px; }
.vg-visit-card { width: min(980px, 100%); max-height: 100%; overflow: auto; padding: 14px; border-radius: 30px; background: #fff; box-shadow: var(--shadow); animation: pop-in 0.35s var(--bounce); }
.vg-visit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.vg-visit-head h2 { flex: 1; font-size: clamp(20px, 4vw, 30px); }
.vg-visit-head .vg-fam-face { width: 52px; height: 52px; font-size: 32px; }
.vg-visit-head .vg-close { position: static; flex: none; }
.vg-visit-box { position: relative; aspect-ratio: 1200 / 720; overflow: hidden; border: 4px solid #fff; border-radius: 24px; background: #cfe9ff; box-shadow: inset 0 0 0 2px rgba(91, 58, 110, 0.12); container-type: inline-size; }
.vg-visit-box .vg-nb { pointer-events: none; }
.vg-visit-stats { margin: 10px 0 4px; text-align: center; font-weight: 700; color: var(--ink-soft); }
.vg-leaveheart { animation: pulse 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .vg-sky-bob, .vg-sky-rise, .vg-sky-sway, .vg-burst, .vg-flutter, .vg-fest-glow, .vg-skyglow, .vg-leaveheart, .vg-badge, .vg-pan-hint, .vg-imm .vg-head, .vg-dock,
  .vg-walk-bob, .vg-duck-bob, .vg-peck, .vg-flock, .vg-flock svg, .vg-tumble, .vg-tumble svg, .vg-sky-arc { animation: none !important; }
  .vg-drop, .vg-flake, .vg-dust, .vg-petal, .vg-leaf, .vg-magic, .vg-floatheart, .vg-shooting, .vg-tumble, .vg-flock { display: none; }
  .vg-hop, .vg-wheel, .vg-project.vg-m-jump, .vg-project.vg-m-wiggle, .vg-project.vg-m-ring, .vg-project.vg-m-spin, .vg-project.vg-m-rainbow { animation: none !important; }
  .vg-burst { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .vg-sails, .vg-flag, .vg-water, .vg-twinkle, .vg-fairy, .vg-ripples, .vg-cloud, .vg-ferry, .vg-neon, .vg-tarp, .vg-cover-ribbon,
  .vg-bird, .vg-bird svg, .vg-butterfly, .vg-firefly, .vg-smoke::before, .vg-smoke::after, .vg-nb, .vg-nb-badge, .vn-blink, .vn-tail,
  .vg-nb.waiting .vn-arm, .vg-cut, .vg-meter-chip, .km-village .km-art, .km-village .vg-waver, .vg-card-art svg, .vg-fog i { animation: none !important; }
}

/* ——— Speedy Town: Maple Street ——— */
html[data-theme='town'] .vg-box { background: #bfe3ff; }
html[data-theme='town'] .vg-sign { border-color: #2f3a5c; background: #ffcc33; color: #2f3a5c; box-shadow: 0 4px 0 #c29400; }
html[data-theme='town'] .vg-pip.on { background: #4b8df0; border-color: #2f6ad6; }
html[data-theme='town'] .vg-meter > i:not(.add) { background: linear-gradient(90deg, #4b8df0, #5cc773); }