/* The first screen: two illustrated choices and a few game pieces drifting behind */
.vd-app .lc-entry { position: relative; isolation: isolate; }
.vd-app .lc-entry-choices .lc-entry-card { background: linear-gradient(180deg, #fff, #fbf4e6); transition: transform 180ms var(--vd-ease), box-shadow 180ms; }
.vd-app .lc-entry-choices .lc-entry-online { background: linear-gradient(180deg, #fff, #eaf5ef); }
.vd-app .lc-entry-choices .lc-entry-card:hover { transform: translateY(-3px); }
.vd-app .lc-entry-choices .lc-entry-card:active { transform: scale(.98); }
.vd-app .lc-entry-choices .lc-entry-card:focus-visible { outline: 3px solid #486baf; outline-offset: 3px; }
.vd-app .lc-art { width: 132px; height: auto; flex: none; overflow: visible; }
.vd-app .lc-entry-choices .lc-entry-card strong { font-weight: 700; }
@media (min-width: 720px) { .vd-app .lc-entry-choices .lc-entry-card { padding: 26px 20px 28px; gap: 16px; } .vd-app .lc-art { width: 100%; max-width: 230px; } }

.vd-app .lc-floaters { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.vd-app .lc-float { position: absolute; opacity: .55; }
.vd-app .lc-float-1 { width: 44px; left: 7%; top: 14%; transform: rotate(-14deg); }
.vd-app .lc-float-2 { width: 36px; right: 9%; top: 10%; transform: rotate(12deg); }
.vd-app .lc-float-3 { width: 30px; left: 12%; bottom: 14%; transform: rotate(8deg); }
.vd-app .lc-float-4 { width: 34px; right: 14%; bottom: 18%; }
.vd-app .lc-float-5 { width: 28px; left: 46%; top: 3%; transform: rotate(20deg); opacity: .4; }

@media (prefers-reduced-motion: no-preference) {
  .vd-app .lc-entry h1 { animation: entry-rise 600ms var(--vd-ease) both; }
  .vd-app .lc-entry-choices .lc-entry-card { animation: entry-rise 600ms var(--vd-ease) both; }
  .vd-app .lc-entry-choices .lc-entry-local { animation-delay: 90ms; }
  .vd-app .lc-entry-choices .lc-entry-online { animation-delay: 170ms; }
  .vd-app .lc-float { animation: entry-drift 9s ease-in-out infinite alternate; }
  .vd-app .lc-float-2 { animation-duration: 11s; animation-delay: -3s; }
  .vd-app .lc-float-3 { animation-duration: 10s; animation-delay: -6s; }
  .vd-app .lc-float-4 { animation-duration: 12s; animation-delay: -2s; }
  .vd-app .lc-float-5 { animation-duration: 8s; animation-delay: -5s; }

  .vd-app .art-die, .vd-app .art-card, .vd-app .art-phone, .vd-app .art-ph, .vd-app .art-player, .vd-app .art-ping { transform-box: fill-box; transform-origin: center; }
  .vd-app .art-die { animation: art-pass 4.4s ease-in-out infinite; }
  .vd-app .art-phone { animation: art-bob 2.2s ease-in-out infinite; }
  .vd-app .art-p1 { animation: art-nod 4.4s ease-in-out infinite; }
  .vd-app .art-p2 { animation: art-nod 4.4s ease-in-out -2.2s infinite; }
  .vd-app .lc-entry-choices .lc-entry-card:hover .art-die { animation-duration: 2.6s; }

  .vd-app .art-ph { animation: art-bob 2.6s ease-in-out infinite; }
  .vd-app .art-ph2 { animation-delay: -.9s; }
  .vd-app .art-ph3 { animation-delay: -1.7s; }
  .vd-app .art-link { animation: art-flow 1.4s linear infinite; }
  .vd-app .art-link-2 { animation-direction: reverse; }
  .vd-app .art-ping { animation: art-ping 2.6s ease-out infinite; }
  .vd-app .art-ping-2 { animation-delay: 1.3s; }
  .vd-app .art-card { animation: art-deal 4.4s ease-in-out infinite; }
}
@keyframes entry-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes entry-drift { from { translate: 0 0; rotate: 0deg; } to { translate: 10px -16px; rotate: 10deg; } }
@keyframes art-bob { 50% { transform: translateY(-4px); } }
@keyframes art-nod { 0%, 40%, 100% { transform: scale(1); } 46% { transform: scale(1.06) translateY(-2px); } 56% { transform: scale(1); } }
@keyframes art-flow { to { stroke-dashoffset: -22; } }
@keyframes art-ping { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes art-pass {
  0% { transform: translate(0, 0) rotate(0); }
  12% { transform: translate(0, 0) rotate(0); }
  31% { transform: translate(86px, -34px) rotate(200deg); }
  50% { transform: translate(144px, 0) rotate(360deg); }
  62% { transform: translate(144px, 0) rotate(360deg); }
  81% { transform: translate(86px, -34px) rotate(560deg); }
  100% { transform: translate(0, 0) rotate(720deg); }
}
@keyframes art-deal {
  0% { transform: translate(52px, 70px) rotate(-12deg) scale(.4); opacity: 0; }
  8% { opacity: 1; }
  45% { transform: translate(110px, 26px) rotate(10deg) scale(1); opacity: 1; }
  80% { transform: translate(168px, 70px) rotate(-8deg) scale(.5); opacity: 1; }
  100% { transform: translate(168px, 70px) rotate(0) scale(.2); opacity: 0; }
}
.vd-app .art-card { opacity: 0; }