/* The Capsule Pop (src/ui/capsule-pop.js, which sets every animation): a layer over the board that takes no pointer, no modal
   and no dimming. Flat, cel-shaded, crisp: white smoke with an ink edge, sharp rays, blue and gold sparks. No blur or bloom. */
.capPop{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden;contain:layout style}
.capPop[hidden]{display:none}
.capPop *{pointer-events:none}
.cpSpot{position:absolute;width:0;height:0;--cap:5rem;--item:4rem}
.cpSpot>*{position:absolute;left:0;top:0}
/* a cell of the picture sheet, the sheet moved behind its window */
.cpCell{width:var(--cap);height:var(--cap);margin:calc(var(--cap)/-2) 0 0 calc(var(--cap)/-2);overflow:hidden}
.cpCell img{display:block;height:100%;width:1200%;max-width:none}
/* the Capsule's own small picture, should the sheet not have come; the shells then stay away */
.cpIcon{width:var(--cap);height:var(--cap);margin:calc(var(--cap)/-2) 0 0 calc(var(--cap)/-2);opacity:0}
.capPop.noSheet .cpTop,.capPop.noSheet .cpBot,.capPop.noSheet .cpStar,.capPop.noSheet .cpGold{display:none}
/* it lands on its foot: it turns and squashes about there */
.cpWhole,.cpIcon{transform-origin:50% 90%}
/* both shells turn about the seam */
.cpTop,.cpBot{transform-origin:50% 50%}
.cpStar,.cpGold{width:calc(var(--cap)*1.5);height:calc(var(--cap)*1.5);margin:calc(var(--cap)*-.75) 0 0 calc(var(--cap)*-.75)}
/* the speed trail: a blue-white streak, its tail thin, above the falling Capsule */
.cpWind{width:calc(var(--cap)*.34);height:calc(var(--cap)*1.25);margin-left:calc(var(--cap)*-.17);margin-top:calc(var(--cap)*-1.25);transform-origin:50% 100%;background:linear-gradient(180deg,rgba(143,214,255,0),rgba(183,228,255,.75) 60%,#fff);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)}
/* what touches the ground: its shadow and a white ring spreading flat */
.cpShadow,.cpRing{width:calc(var(--cap)*.86);height:calc(var(--cap)*.24);margin-left:calc(var(--cap)*-.43);margin-top:calc(var(--cap)*.36);border-radius:50%}
.cpShadow{background:rgba(8,12,28,.55)}
.cpRing{border:.1875rem solid #fff;box-shadow:0 0 0 .0625rem rgba(27,35,71,.55)}
/* the impact's rays: flat wedges, cut off a little from the middle */
.cpRays{width:calc(var(--cap)*2.5);height:calc(var(--cap)*2.5);margin:calc(var(--cap)*-1.25) 0 0 calc(var(--cap)*-1.25);border-radius:50%;
  background:repeating-conic-gradient(from 7deg,#fff 0 5deg,transparent 5deg 22deg,#ffd55e 22deg 25deg,transparent 25deg 45deg);
  -webkit-mask:radial-gradient(circle,transparent 26%,#000 27%,#000 62%,transparent 70%);mask:radial-gradient(circle,transparent 26%,#000 27%,#000 62%,transparent 70%)}
/* the smoke: a white cloud shaded in one hard step, with an ink edge */
.cpPuff{width:calc(var(--cap)*.56);height:calc(var(--cap)*.56);margin:calc(var(--cap)*-.28) 0 0 calc(var(--cap)*-.28);border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff 62%,#d4e0f4 63%);box-shadow:0 0 0 .0625rem rgba(27,35,71,.55)}
.cpSpark{width:calc(var(--cap)*.2);height:calc(var(--cap)*.07);margin:calc(var(--cap)*-.035) 0 0 calc(var(--cap)*-.1);background:#8fd6ff;clip-path:polygon(0 50%,50% 0,100% 50%,50% 100%)}
.cpSpark.gold{background:#ffc94a}
/* the comic word */
.cpWord{font-family:var(--disp);font-weight:700;font-size:calc(var(--cap)*.46);line-height:1;letter-spacing:.02em;color:#fff;white-space:nowrap;margin-top:calc(var(--cap)*-.34);-webkit-text-stroke:.09375rem #1b2347;paint-order:stroke fill;text-shadow:.125rem .125rem 0 #ffb21f}
/* the component and its name */
.cpItem{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;border-radius:.625rem;background:rgba(14,20,44,.9);box-shadow:0 0 0 .125rem #ffe7a8,0 .25rem .75rem rgba(0,0,0,.5);opacity:0;transform-origin:50% 50%}
.cpItem img,.cpItem svg{width:88%;height:88%;object-fit:contain}
.cpDot{position:absolute;left:0;top:0;width:1.125rem;height:1.125rem;margin:-.5625rem 0 0 -.5625rem;border-radius:50%;background:#8fd6ff;box-shadow:0 0 0 .125rem rgba(255,255,255,.8);opacity:0}
.cpDot.gold{background:#ffc94a}
.cpCard{display:flex;flex-direction:column;align-items:center;gap:.0625rem;transform:translate(-50%,-50%);margin-top:calc(var(--cap)*.2);padding:.1875rem .625rem;border-radius:.5rem;background:rgba(14,20,44,.92);border:.0625rem solid rgba(255,231,168,.65);white-space:nowrap;line-height:1.1;opacity:0}
.cpCard b{font-family:var(--disp);font-weight:400;font-size:.9375rem;color:#fff}
.cpCard small{font-size:.6875rem;letter-spacing:.06em;font-weight:700;color:#ffc94a}
/* the slot keeps its picture back till the component lands in it */
.itSlot.popWait>*{opacity:0}
/* reduced motion: only the component and its name, still */
.capPop.reduced .cpShadow,.capPop.reduced .cpRing,.capPop.reduced .cpWind,.capPop.reduced .cpRays,.capPop.reduced .cpCell,.capPop.reduced .cpIcon,.capPop.reduced .cpPuff,.capPop.reduced .cpSpark,.capPop.reduced .cpWord,.capPop.reduced .cpDot{display:none}