/* Game previews (src/components/GamePreview.astro): a memory board and a little maze in the middle of a game.
   Inside any .gp-host (a Let's play card, the postcard on a printable page), hover or keyboard focus plays them. */
.pl-mz .w{fill:none;stroke:var(--ink);stroke-width:.16;stroke-linecap:round;stroke-linejoin:round}
.pl-mz .t{fill:none;stroke:#ff85d5;stroke-width:.42;stroke-linecap:round;stroke-linejoin:round}
.pl-mz{display:block;width:100%;height:100%;overflow:visible}
/* memory: a game under way, like the maze card: a 3 x 3 board, a place left by a pair already taken (dashed), the rest face down.
   a pair just found, both cards up. On hover the pair cheers, then a miss turns up, shakes and turns back */
.pl-mm{position:absolute;inset:12%;display:grid;grid-template-columns:repeat(3,1fr);gap:6%;align-content:center}
.mm{display:block;aspect-ratio:1;perspective:500px}
.mm.gone{border:2px dashed #20242826;border-radius:16%}
.mm .in{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d}
.mm u{position:absolute;inset:0;border-radius:16%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 1px 2px #2024281a,0 6px 12px -6px #20242840}
/* card back, simpler than in the game so it reads at this size: deeper lavender, a white rim and one white plus */
.mm .bk{background:#c9bdf5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' d='M43.88 33h12.24v10.88h10.88v12.24h-10.88v10.88h-12.24v-10.88h-10.88v-12.24h10.88z'/%3E%3C/svg%3E") center/100% 100%;box-shadow:inset 0 0 0 3px #fff,0 1px 2px #2024281a,0 6px 12px -6px #20242840}
.mm .fc{transform:rotateY(180deg);background:#fff}
.mm .fc img{width:100%;height:100%;display:block}
/* face-up cards get the same white rim as the backs, so they don't melt into the lavender (drawn over the picture) */
.mm .fc::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px #fff}
.mm.pa .in,.mm.pb .in{transform:rotateY(180deg)}
.gp-host:hover .mm.pa .in,.gp-host:focus-within .mm.pa .in{animation:mm-cheer .45s cubic-bezier(.3,1.5,.5,1) .1s}
.gp-host:hover .mm.pb .in,.gp-host:focus-within .mm.pb .in{animation:mm-cheer .45s cubic-bezier(.3,1.5,.5,1) .25s}
.gp-host:hover .mm.ma .in,.gp-host:focus-within .mm.ma .in{animation:mm-miss 1.5s ease .95s forwards}
.gp-host:hover .mm.mb .in,.gp-host:focus-within .mm.mb .in{animation:mm-miss 1.5s ease 1.3s forwards}
@keyframes mm-cheer{0%,100%{transform:rotateY(180deg) scale(1)}45%{transform:rotateY(180deg) scale(1.14)}}
@keyframes mm-miss{0%{transform:none}20%,62%{transform:rotateY(180deg)}68%{transform:rotateY(180deg) translateX(-6%)}74%{transform:rotateY(180deg) translateX(6%)}80%{transform:rotateY(180deg)}100%{transform:none}}
/* maze: an on-screen game, not a printed sheet; on hover Cubi walks the way to Mini and the pink line follows */
.pl-mz{width:74%;height:auto}
.pl-mz .t{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .2s}
.pl-mz .cubi{transform:translate(1.5px,5.55px)}
.gp-host:hover .pl-mz .t,.gp-host:focus-within .pl-mz .t{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s linear}
.gp-host:hover .pl-mz .cubi,.gp-host:focus-within .pl-mz .cubi{animation:pl-walk 1.8s linear forwards}
.gp-host:hover .pl-mz .mini,.gp-host:focus-within .pl-mz .mini{animation:pl-cheer .5s cubic-bezier(.3,1.5,.5,1) 1.8s 2 alternate}
/* the corners of the way, timed by length (total 14.05 cells) */
@keyframes pl-walk{
  0%{transform:translate(1.5px,5.55px)}7.5%{transform:translate(1.5px,4.5px)}21.7%{transform:translate(3.5px,4.5px)}
  35.9%{transform:translate(3.5px,2.5px)}50.1%{transform:translate(5.5px,2.5px)}57.2%{transform:translate(5.5px,1.5px)}
  78.6%{transform:translate(2.5px,1.5px)}85.7%{transform:translate(2.5px,.5px)}100%{transform:translate(4.5px,.5px)}}
@keyframes pl-cheer{to{transform:translateY(-.25px)}}
/* yarn: two pairs joined, on hover the other two threads run from ball to ball, one after the other */
.pl-yw{display:block;width:74%;height:auto;overflow:visible}
.pl-yw .sq{fill:#fffcf3}
.pl-yw .t{fill:none;stroke-width:.32;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .2s}
.pl-yw .t.j{stroke-dashoffset:0}
.pl-yw .b{stroke:var(--ink);stroke-width:.06}
.gp-host:hover .pl-yw .t,.gp-host:focus-within .pl-yw .t{stroke-dashoffset:0;transition:stroke-dashoffset .9s ease-in-out}
.gp-host:hover .pl-yw .t:nth-of-type(4),.gp-host:focus-within .pl-yw .t:nth-of-type(4){transition-delay:.8s}
@media(prefers-reduced-motion:reduce){
  .gp-host:hover .pl-yw .t{transition:none}
  .gp-host:hover .pl-mz .cubi,.gp-host:hover .pl-mz .mini,.gp-host:hover .mm .in{animation:none}
  .gp-host:hover .pl-mz .t{transition:none}
}