/* Monsters Exam Quest: the card moments. The one 3D card, pack opening, after opening, and growing.
   Ported from the canvas card3d, packs2/packs3 and the moment boards in screens.py. */

[data-if][hidden]{display:none!important}

/* The one 3D card */
.c3-wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vw,30px)}
.c3{position:relative;width:var(--cw,380px);max-width:100%;aspect-ratio:1795/2400;perspective:1100px;touch-action:none;cursor:grab;border-radius:3.5%;outline-offset:8px}
.c3.is-spinning{cursor:grabbing}
.c3-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.c3.is-spinning .c3-flip{transition:none}
/* A pack's card sways a little until first touched, then holds where it was (no jump) while she spins it */
.c3-sway{position:absolute;inset:0;transform-style:preserve-3d;animation:c3-sway 4.6s ease-in-out infinite}
.c3.is-touched .c3-sway{animation-play-state:paused}
@keyframes c3-sway{0%,100%{transform:rotateY(-9deg) rotateX(2deg)}50%{transform:rotateY(9deg) rotateX(-2deg)}}
.c3-slice{position:absolute;inset:0;border-radius:3.5%;background:linear-gradient(90deg,#7a5a22 0%,#f3dc9a 28%,#a67a30 55%,#f6e2a8 80%,#7a5a22 100%)}
.c3-face{position:absolute;inset:0;width:100%;height:100%;border-radius:3.5%;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 1px rgba(255,240,200,.55);user-select:none;-webkit-user-drag:none;object-fit:contain}
.c3-back{transform:rotateY(180deg) translateZ(var(--ct,2.4px))}
.c3-front{transform:translateZ(var(--ct,2.4px))}
.c3-shade{position:absolute;inset:0;border-radius:3.5%;background:#04081a;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:0}
.c3-shade-f{transform:translateZ(calc(var(--ct,2.4px) + .1px))}
.c3-shade-b{transform:rotateY(180deg) translateZ(calc(var(--ct,2.4px) + .1px))}
.c3-sheen{position:absolute;inset:0;border-radius:3.5%;transform:translateZ(calc(var(--ct,2.4px) + .2px));backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,246,214,.24) 48%,rgba(190,170,255,.08) 54%,rgba(255,255,255,0) 64%);background-size:250% 100%}
.c3-ground{position:absolute;left:12%;right:12%;bottom:-7%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
.c3-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;padding:8px 14px;border-radius:22px;background:rgba(5,10,25,.62);box-shadow:0 0 24px 10px rgba(5,10,25,.5)}
.c3-tools span{font:500 16px var(--fD);color:#e9ecf7}
.c3-tools .mq-btn2 span{font:inherit;color:inherit}

@media (prefers-reduced-motion:reduce){.c3-flip{transition:none}.c3-sway{animation:none}}

/* Pack opening (the PackSealed, PackTearing, PackCard, PackDuplicate and PackAll boards): the whole screen. The shrine for the
   sealed pack, the tearing and all the cards together; each card on its own in its own habitat. */
body[data-mode="moment"] #app{padding-top:0}
body[data-route="pack"] #app,body[data-route="found"] #app{max-width:none;padding:0}
.po{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;min-height:100dvh;overflow:hidden;color:var(--ivory)}
.po-title{position:relative;padding:54px var(--gut) 0;text-align:center}
.po-h{margin:0;font:700 clamp(34px,4vw,46px)/1.1 var(--fH);letter-spacing:-.01em;text-shadow:0 3px 22px rgba(5,8,23,.95),0 1px 3px rgba(5,8,23,.8)}
.po-h:focus{outline:0}
.po-moment{position:relative;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:var(--s4);width:100%;padding-bottom:52px}
.po-glow{position:absolute;left:50%;top:44%;width:min(820px,140vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(232,196,106,.22),rgba(232,196,106,.03) 48%,rgba(232,196,106,0) 68%);pointer-events:none;z-index:-1}
.po-main{display:flex;align-items:center;justify-content:center;padding:var(--s4) 0 var(--s3);width:100%}
/* The stage keeps the pack art's 2:3 shape. It is sized by width, so a short screen scrolls instead of squashing it. */
.po-stage{position:relative;width:min(300px,68vw,40vh);min-width:200px;aspect-ratio:2/3;perspective:1400px;animation:po-arrive .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes po-arrive{from{transform:translateY(24px) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
.po-controls{display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.po-ctl{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.po-hint{margin:0;font:400 19px/1.35 var(--fD);color:#c9d2ee}
.po-small{margin:0;font:400 15px/1.4 var(--fD);color:#a9b4dc}
.po-go{margin-top:22px;min-height:72px;display:inline-flex;align-items:center;justify-content:center;padding:0 48px;border:1px solid rgba(255,255,255,.8);border-radius:22px;background:linear-gradient(180deg,#fff,#e7ebf7 78%,#d3daee);color:var(--ink);font:700 26px/1.2 var(--fD);cursor:pointer;box-shadow:inset 0 1px #fff,0 5px 0 rgba(72,82,122,.5);transition:transform 110ms,box-shadow 150ms}
.po-go:hover,.pk-go:hover{box-shadow:inset 0 1px #fff,0 5px 0 rgba(72,82,122,.5),0 0 0 6px rgba(255,255,255,.28),0 18px 34px -18px rgba(0,0,0,.9)}
.po-go:active,.pk-go:active{transform:translateY(2px)}
.po-ctl[data-if="isBusy"] .po-hint{font:700 30px/1.2 var(--fD);color:var(--ivory);text-shadow:0 2px 18px rgba(11,18,54,.9)}
.po-msg{margin:0;padding:8px 14px;border-radius:var(--rK);background:var(--laterTint);color:var(--later);font:700 17px var(--fD);text-align:center}
.po-msg:empty{display:none}
.po-unsaved{margin:var(--s3) var(--gut) 0}

/* ---- The free first pack (StartFreePack): the same shrine and pack, with How to play's strip across the top at step 3, a gold FREE tag
   on the pack's right side (it turns with the pack, and goes once the strip is pulled), and the words that say it costs nothing. */
.po-steps{align-self:stretch;width:100%}
.po--free .po-title{padding-top:30px}
.po--free .po-h{font-size:clamp(36px,4.6vw,52px);line-height:1.04;text-wrap:balance}
/* The strip and the extra line take room, so the pack gives a little on a short screen (the button stays on the first screen). */
.po--free .po-stage{width:min(300px,68vw,34vh)}
.po-tag{position:absolute;left:82%;top:51%;display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:linear-gradient(180deg,#ffe9ad,#f1cc70 72%,#e9ba5f);color:var(--ink);font:800 26px/1 var(--fN);letter-spacing:.07em;box-shadow:inset 0 2px #fff6d2,0 14px 26px -10px rgba(0,0,0,.85);transform:translateZ(8px) rotate(10deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none;user-select:none;transition:opacity .25s ease}
.po-stage:not(.ph-sealed):not(.ph-dragging) .po-tag{opacity:0}
.po-note{margin:0;font:600 20px/1.35 var(--fD);color:var(--ivory);text-shadow:0 2px 12px rgba(5,8,23,.95)}
.po--free .po-hint{font-size:17px;text-shadow:0 2px 12px rgba(5,8,23,.95)}
@media (max-width:639px){.po--free .po-stage{width:min(280px,64vw,36vh)}.po--free .po-title{padding-top:22px}.po-tag{min-height:40px;padding:0 16px;font-size:22px}}
@media (max-width:359px){.po-tag{left:78%;min-height:36px;padding:0 13px;font-size:19px}}

/* ---- After the reveal: one card at a time (PackCard, PackDuplicate), in its own habitat with its element's glow */
.po-final{width:100%;flex:1 1 auto;display:flex;flex-direction:column}
.pk-step{flex:1 1 auto;width:100%;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;padding:30px clamp(16px,4.4vw,56px) 40px}
.pk-step>.ui-scene{z-index:-1}
.pk-step>.ui-scene .ui-scene-img{object-position:center 40%}
.pk-step>.ui-scene .ui-scene-img.is-in{opacity:.5}
.pk-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(96deg,rgba(5,8,23,.52) 0%,rgba(5,8,23,.2) 26%,rgba(6,12,30,.66) 58%,rgba(6,12,30,.88) 100%),linear-gradient(180deg,rgba(5,8,23,.6) 0%,rgba(5,8,23,0) 22%,rgba(5,8,23,0) 72%,rgba(5,8,23,.78) 100%)}
.pk-glow{position:absolute;left:34%;top:48%;z-index:-1;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at center,var(--glow) 0%,rgba(255,255,255,0) 58%);opacity:.42}
.pk-top{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px}
.pk-count{margin:0;font:700 15px/1.2 var(--fD);letter-spacing:.04em;text-transform:uppercase;color:#c9d2ee;text-shadow:0 2px 12px rgba(5,8,23,.9)}
.pk-type{position:absolute;right:0;top:50%;margin:0;transform:translateY(-50%)}
.pk-ghost{gap:10px}
.pk-ghost svg{width:20px;height:20px;color:var(--gold2);stroke-width:2.6}
.pk-type .mq-type{min-height:42px;padding:8px 16px 8px 9px;background:rgba(5,8,23,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.pk-body{flex:1 1 auto;display:flex;align-items:center;gap:56px;margin-top:16px}
.pk-card{flex:0 0 auto;perspective:1400px;animation:pk-in .7s cubic-bezier(.2,1.3,.35,1) both}
@keyframes pk-in{from{transform:rotateY(42deg) translateY(28px);opacity:0}to{transform:none;opacity:1}}
.pk-rig{position:relative;width:min(420px,38vw);border-radius:15px;overflow:hidden;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform 140ms ease-out;box-shadow:0 32px 42px -18px rgba(0,0,0,.92)}
.pk-rig .po-flat{width:100%;box-shadow:none;border-radius:0}
.pk-foil{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(112deg,rgba(255,255,255,0) 34%,rgba(214,255,247,.5) 45%,rgba(255,214,246,.42) 52%,rgba(255,247,200,.38) 58%,rgba(255,255,255,0) 70%);transform:translateX(var(--fx,0px));transition:transform 140ms ease-out}
.pk-gloss{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:var(--go,.22);background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 58%);transition:opacity 140ms ease-out}
.pk-info{flex:1 1 auto;min-width:0;animation:pk-up .55s cubic-bezier(.2,.9,.3,1) .3s both}
@keyframes pk-up{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
.pk-meta{margin:0;font:400 16px/1.4 var(--fD);color:#fff;text-shadow:0 1px 12px rgba(5,8,23,.95),0 0 3px rgba(5,8,23,.8)}
.pk-h{margin:10px 0 0;max-width:16ch;font:700 clamp(36px,4vw,50px)/1.03 var(--fH);letter-spacing:-.012em}
.pk-h:focus{outline:0}
.pk-line{margin:14px 0 0;max-width:34ch;font:400 19px/1.5 var(--fD);color:#fff;text-shadow:0 1px 12px rgba(5,8,23,.95),0 0 3px rgba(5,8,23,.8)}
.pk-more{margin:26px 0 0;display:inline-flex;align-items:center;gap:11px;padding:11px 18px;border-radius:999px;background:rgba(232,196,106,.14);box-shadow:inset 0 0 0 1px rgba(246,220,149,.45);font:700 17px/1.2 var(--fD);color:var(--gold2)}
.pk-more img{width:20px;height:27px;object-fit:contain}
.pk-act{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.pk-go{min-height:68px;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:0 44px;border:1px solid rgba(255,255,255,.8);border-radius:22px;background:linear-gradient(180deg,#fff,#e7ebf7 78%,#d3daee);color:var(--ink);font:700 23px/1.2 var(--fD);cursor:pointer;box-shadow:inset 0 1px #fff,0 5px 0 rgba(72,82,122,.5);transition:transform 110ms,box-shadow 150ms}
.pk-go svg{width:22px;height:22px}
.pk-ghost{min-height:68px;display:inline-flex;align-items:center;padding:0 26px;border:0;border-radius:12px;background:none;box-shadow:inset 0 0 0 1px rgba(169,180,220,.45);color:#c9d2ee;font:600 18px/1.2 var(--fD);cursor:pointer;transition:background 130ms}
.pk-ghost:hover{background:rgba(255,250,240,.13)}
/* ---- One card at a time (the "Opening it" board, Jon 26 Oct): each card on its own over its habitat, face up to spin, its words,
   Next card. The cards stack in one screen-high box, so the next can come up while the last is dealt aside. Sized so the card, its
   words and the button share one screen. */
.pk-steps{position:relative;height:100dvh;min-height:520px;overflow:hidden}
.pk-one{position:absolute;inset:0;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:44px var(--gut) 26px;text-align:center}
.pk-one.is-in{animation:pk-one-in .45s ease both}
@keyframes pk-one-in{from{opacity:0}to{opacity:1}}
.pk-one>.ui-scene{z-index:-1}
.pk-one>.ui-scene .ui-scene-img{object-position:center 40%}
.pk-one>.ui-scene .ui-scene-img.is-in{opacity:.55}
.pk-one-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,23,.7) 0%,rgba(5,8,23,.12) 22%,rgba(5,8,23,.2) 58%,rgba(5,8,23,.9) 100%)}
.pk-one-glow{position:absolute;left:50%;top:38%;z-index:-1;width:min(960px,180vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--glow) 0%,rgba(255,255,255,0) 60%);opacity:.42}
.pk-one-bloom{position:absolute;left:50%;top:38%;z-index:-1;width:min(820px,160vw);aspect-ratio:1;margin:0;transform:translate(-50%,-50%) scale(.2);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,246,216,.6) 0%,rgba(255,246,216,0) 62%);opacity:0}
.pk-one.is-in .pk-one-bloom{animation:pk-bloom 1000ms cubic-bezier(.2,.7,.3,1) 380ms both}
@keyframes pk-bloom{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.4);opacity:0}}
.pk-one-card{position:relative;z-index:2;flex:none;width:min(330px,74vw,calc((100dvh - 350px) * .748));min-width:170px}
.pk-one-card .c3,.pk-trio-c .c3,.pk-pick-c .c3{--cw:100%}
.pk-one-card .c3-face{filter:drop-shadow(0 26px 30px rgba(0,0,0,.8))}
.pk-one-say{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.pk-one.is-in .pk-one-say{animation:pk-say 460ms cubic-bezier(.2,1.2,.4,1) 520ms both}
@keyframes pk-say{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.pk-one-type{margin:0}
.pk-one-type .mq-type{min-height:42px;padding:6px 16px 6px 6px;background:rgba(5,8,23,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.pk-one-say .pk-h{margin:10px auto 0;max-width:20ch;font-size:clamp(30px,4vw,44px);line-height:1.05;text-shadow:0 3px 22px rgba(5,8,23,.95)}
.pk-one-say .pk-meta{margin-top:6px;color:#c9d2ee}
.pk-one-tip{margin:0;font:400 15px/1.3 var(--fD);color:#a9b4dc;text-shadow:0 1px 10px rgba(5,8,23,.95)}
.pk-one-tip.is-gone{visibility:hidden}
.pk-one-act{position:relative;z-index:2;margin:0}
/* the words and the way on come once the card is out (later for the first, which rises out of the pack) */
.pk-one.is-in .pk-one-tip,.pk-one.is-in .pk-one-act{animation:pk-say 420ms ease 620ms both}
.pk-one.is-first .pk-one-say{animation-delay:900ms}
.pk-one.is-first .pk-one-tip,.pk-one.is-first .pk-one-act{animation-delay:1050ms}
/* light as each card arrives: sparks fly out from it (more, and coloured, for a rare one) */
.pk-one-sparks{position:absolute;left:50%;top:50%;z-index:-1;width:0;height:0;pointer-events:none;--far:220px}
.pk-one-sparks i{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff6d8;box-shadow:0 0 12px #ffe9ad;opacity:0}
.pk-one-sparks i:nth-child(1){--dx:0.00;--dy:-0.70}.pk-one-sparks i:nth-child(2){--dx:0.45;--dy:-0.78}.pk-one-sparks i:nth-child(3){--dx:0.96;--dy:-0.55}.pk-one-sparks i:nth-child(4){--dx:0.70;--dy:0.00}.pk-one-sparks i:nth-child(5){--dx:0.78;--dy:0.45}.pk-one-sparks i:nth-child(6){--dx:0.55;--dy:0.96}.pk-one-sparks i:nth-child(7){--dx:0.00;--dy:0.70}.pk-one-sparks i:nth-child(8){--dx:-0.45;--dy:0.78}.pk-one-sparks i:nth-child(9){--dx:-0.96;--dy:0.55}.pk-one-sparks i:nth-child(10){--dx:-0.70;--dy:0.00}.pk-one-sparks i:nth-child(11){--dx:-0.78;--dy:-0.45}.pk-one-sparks i:nth-child(12){--dx:-0.55;--dy:-0.96}
.pk-one.is-in .pk-one-sparks i{animation:pk-spark 900ms cubic-bezier(.15,.8,.3,1) 600ms both}
.pk-one-sparks i:nth-child(4n+2){animation-delay:630ms!important}.pk-one-sparks i:nth-child(4n+3){animation-delay:660ms!important}.pk-one-sparks i:nth-child(4n){animation-delay:690ms!important}
@keyframes pk-spark{0%{transform:translate(0,0) scale(1.4);opacity:1}100%{transform:translate(calc(var(--dx) * var(--far)),calc(var(--dy) * var(--far))) scale(.2);opacity:0}}
/* a rare card (the board's third card): its edge lights, a sheen runs across it, a ring of light spreads out, a badge pops above.
   Super rare is rainbow; ultra rare (Singapore gold) is gold and the biggest. They sit over the card as it arrives, then fade. */
.pk-one.is-sr{--glow:rgba(199,146,255,.6);--rare-ring:rgba(199,146,255,.7);--rare-edge:0 0 0 4px rgba(255,255,255,.85),0 0 34px 8px rgba(199,146,255,.7),0 0 70px 20px rgba(124,243,196,.4);
  --rare-sheen:linear-gradient(110deg,rgba(255,255,255,0) 32%,rgba(255,122,168,.6) 42%,rgba(255,211,107,.6) 48%,rgba(124,243,196,.6) 54%,rgba(127,182,255,.6) 60%,rgba(199,146,255,.6) 66%,rgba(255,255,255,0) 74%);
  --rare-badge:linear-gradient(90deg,#ff7aa8,#ffd36b,#7cf3c4,#7fb6ff,#c792ff);--rare-ink:#1a0f3a}
.pk-one.is-ur{--glow:rgba(255,201,74,.75);--rare-ring:rgba(255,201,74,.8);--rare-edge:0 0 0 4px #ffe7a0,0 0 40px 10px rgba(255,201,74,.85),0 0 90px 30px rgba(232,179,58,.5);
  --rare-sheen:linear-gradient(110deg,rgba(255,255,255,0) 35%,rgba(255,231,160,.85) 48%,rgba(255,255,255,.9) 52%,rgba(255,201,74,.7) 58%,rgba(255,255,255,0) 70%);
  --rare-badge:linear-gradient(180deg,#fff1c2,#e8b33a 70%,#c8901f);--rare-ink:#2a1b02}
.pk-one.is-sr .pk-one-sparks{--far:340px}.pk-one.is-ur .pk-one-sparks{--far:420px}
.pk-one.is-sr .pk-one-sparks i:nth-child(5n+1){background:#ff7aa8;box-shadow:0 0 12px #ff7aa8}.pk-one.is-sr .pk-one-sparks i:nth-child(5n+2){background:#ffd36b;box-shadow:0 0 12px #ffd36b}
.pk-one.is-sr .pk-one-sparks i:nth-child(5n+3){background:#7cf3c4;box-shadow:0 0 12px #7cf3c4}.pk-one.is-sr .pk-one-sparks i:nth-child(5n+4){background:#7fb6ff;box-shadow:0 0 12px #7fb6ff}
.pk-one.is-sr .pk-one-sparks i:nth-child(5n){background:#c792ff;box-shadow:0 0 12px #c792ff}
.pk-one.is-ur .pk-one-sparks i:nth-child(odd){background:#ffc94a;box-shadow:0 0 14px #ffc94a}
.pk-one-edge,.pk-one-sheen{position:absolute;inset:0;z-index:3;border-radius:3.5%;pointer-events:none;opacity:0}
.pk-one-edge{box-shadow:var(--rare-edge)}
.pk-one-sheen{background-image:var(--rare-sheen);background-size:300% 100%;background-position:120% 0;mix-blend-mode:screen}
.pk-one.is-in .pk-one-edge{animation:pk-edge 2.6s ease-out 700ms both}
.pk-one.is-in .pk-one-sheen{animation:pk-sheen 1.6s ease-in-out 700ms both}
@keyframes pk-edge{0%{opacity:0}25%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes pk-sheen{0%{background-position:120% 0;opacity:1}80%{opacity:1}100%{background-position:-40% 0;opacity:0}}
.pk-one-ring{position:absolute;left:50%;top:50%;z-index:-1;width:160%;aspect-ratio:1;margin:0;transform:translate(-50%,-50%) scale(.4);border-radius:50%;border:4px solid var(--rare-ring);pointer-events:none;opacity:0}
.pk-one.is-in .pk-one-ring{animation:pk-ring 900ms ease-out 700ms both}
@keyframes pk-ring{from{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(-50%,-50%) scale(1.7);opacity:0}}
.pk-one-badge{position:absolute;left:50%;top:-12px;z-index:4;margin:0;transform:translate(-50%,-100%);white-space:nowrap;pointer-events:none}
.pk-one-badge span{display:inline-block;padding:8px 22px;border-radius:999px;background:var(--rare-badge);color:var(--rare-ink);font:800 22px/1.2 var(--fD);letter-spacing:.03em;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.pk-one.is-in .pk-one-badge span{animation:pk-pop 520ms cubic-bezier(.2,1.5,.4,1) 760ms both}
@keyframes pk-pop{from{transform:translateY(16px) scale(.7);opacity:0}to{transform:none;opacity:1}}
.pk-one.is-sr .pk-one-card,.pk-one.is-ur .pk-one-card{margin-top:22px}
/* the tear lights up in the colour of the best card inside (PackSealed, PackTearing) */
.po[data-rare="sr"] .po-crack polyline,.po[data-rare="sr"] .po-open path:first-child{stroke:#f3ddff}
.po[data-rare="sr"] .po-crack,.po[data-rare="sr"] .po-open{filter:drop-shadow(0 0 6px #ff7aa8) drop-shadow(0 0 12px #7cf3c4) drop-shadow(0 0 18px #c792ff);animation:po-rainbow 1.6s linear infinite}
@keyframes po-rainbow{from{filter:drop-shadow(0 0 6px #ff7aa8) drop-shadow(0 0 12px #7cf3c4) drop-shadow(0 0 18px #c792ff) hue-rotate(0deg)}to{filter:drop-shadow(0 0 6px #ff7aa8) drop-shadow(0 0 12px #7cf3c4) drop-shadow(0 0 18px #c792ff) hue-rotate(360deg)}}
.po[data-rare="ur"] .po-crack polyline,.po[data-rare="ur"] .po-open path:first-child{stroke:#ffe7a0}
.po[data-rare="ur"] .po-crack,.po[data-rare="ur"] .po-open{filter:drop-shadow(0 0 8px #ffc94a) drop-shadow(0 0 18px #e8b33a)}
/* ---- All three (the board's end; All three on a phone): back in the shrine, each a 3D card with its name, the rarest in the middle
   and a little bigger. A tap opens it up close; a drag spins it. */
.pk-all{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;min-height:100dvh;box-sizing:border-box;padding:46px var(--gut) 48px;text-align:center}
.pk-all-h{margin:0;font:700 clamp(32px,4vw,46px)/1.1 var(--fH);letter-spacing:-.012em;text-shadow:0 3px 22px rgba(5,8,23,.95),0 1px 3px rgba(5,8,23,.8)}
.pk-all-h:focus{outline:0}
.pk-all-sub{margin:10px 0 0;font:400 19px/1.4 var(--fD);color:#fff;text-shadow:0 1px 12px rgba(5,8,23,.95),0 0 3px rgba(5,8,23,.8)}
.pk-trio{flex:1 1 auto;margin:30px 0 0;padding:0;list-style:none;display:flex;align-items:center;justify-content:center;gap:clamp(16px,3.6vw,46px)}
.pk-trio-i{display:flex;flex-direction:column;align-items:center;gap:20px;animation:pk-trio-deal .6s cubic-bezier(.2,1.3,.35,1) both}
.pk-trio-i:nth-child(2){animation-delay:.14s}.pk-trio-i:nth-child(3){animation-delay:.28s}
@keyframes pk-trio-deal{from{transform:translateY(46px) scale(.84);opacity:0}to{transform:none;opacity:1}}
.pk-trio-c{width:min(280px,21.9vw,calc((100dvh - 330px) * .75 * .85))}
.pk-trio-i.is-mid .pk-trio-c{width:min(330px,25.8vw,calc((100dvh - 330px) * .75))}
.pk-trio-c .c3-face{filter:drop-shadow(0 24px 30px rgba(0,0,0,.85))}
.pk-trio-n{margin:0;font:700 19px/1.2 var(--fD);text-shadow:0 2px 12px rgba(5,8,23,.9)}
.pk-all-act{margin:34px 0 0}
/* ---- Who's your buddy? (StartPickBuddy), the free pack's last view in place of PackAll: How to play's strip at step 4, the three cards
   (tap one and it lifts with a gold tick, no rim, while the others step back, dimmed), its habitat behind, and the gold way on.
   Each card's habitat is drawn, one over another on a dark base, and the chosen one fades in, so the scene never flashes navy. */
.pk-pick{flex:1 1 auto;width:100%;display:flex;flex-direction:column}
.pk-pick-bg{position:absolute;inset:0;z-index:-1;background:#050817;pointer-events:none}
.pk-pick>.ui-scene{z-index:-1;background:none;opacity:0;transition:opacity .4s ease}
.pk-pick>.ui-scene.is-on{opacity:1}
.pk-pick>.ui-scene .ui-scene-img{object-position:center 42%}
.pk-pick>.ui-scene .ui-scene-img.is-in{opacity:.62}
.pk-pick-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,23,.86) 0%,rgba(5,8,23,.36) 26%,rgba(5,8,23,.46) 62%,#050817 100%)}
.pk-pick-glow{position:absolute;left:50%;top:50%;z-index:-1;width:1000px;height:520px;margin:-260px 0 0 -500px;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,rgba(232,196,106,.16) 0%,rgba(232,196,106,0) 68%)}
.pk-pick-main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px clamp(16px,4vw,48px) 48px;text-align:center}
.pk-pick-h{margin:0;font:700 clamp(36px,4.6vw,52px)/1.04 var(--fH);letter-spacing:-.012em;text-shadow:0 3px 20px rgba(5,8,23,.95);text-wrap:balance}
.pk-pick-h:focus{outline:0}
/* White rather than the board's #c9d2ee, as .pk-line is: over the brightest habitats (Ice) the paler shade fell to 4.2:1. */
.pk-pick-sub{margin:12px 0 0;font:400 20px/1.35 var(--fD);color:#fff;text-shadow:0 1px 12px rgba(5,8,23,.95),0 0 3px rgba(5,8,23,.8)}
.pk-pick-row{margin-top:62px;display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,44px)}
/* The board's clamp(100px,22vw,246px), held to three across under 360px wide and, when the screen is short, to a height that keeps
   the way on (shown once one is picked) on the first screen. */
.pk-pick-c{position:relative;z-index:1;flex:none;width:min(max(100px,22vw),246px,calc((100vw - 60px) / 3),max(100px,calc((100dvh - 420px) * .68)));aspect-ratio:1795/2400;border-radius:12px;
  transform:rotate(var(--lean,0deg)) scale(.95);box-shadow:0 22px 34px -18px rgba(0,0,0,.95);transition:transform 320ms cubic-bezier(.25,1.3,.4,1),filter 240ms,opacity 240ms}
/* the middle card sits lifted until one is picked; then the picked one lifts and the other two step back */
.pk-pick-c[data-i="1"]{z-index:3;transform:translateY(-14px) scale(1.04)}
.pk-pick[data-picked] .pk-pick-c{z-index:1;transform:rotate(var(--lean,0deg)) scale(.86);opacity:.5;filter:saturate(.55) brightness(.8)}
.pk-pick[data-picked] .pk-pick-c.is-on{z-index:4;transform:translateY(-16px) scale(1.08);opacity:1;filter:none}
@media (hover:hover){.pk-pick:not([data-picked]) .pk-pick-c:hover{z-index:4;transform:translateY(-16px) scale(1.04)}.pk-pick[data-picked] .pk-pick-c:not(.is-on):hover{opacity:1;filter:none}}
.pk-pick-tick{position:absolute;top:-16px;right:-16px;z-index:5;width:48px;height:48px;border-radius:50%;display:none;align-items:center;justify-content:center;pointer-events:none;
  background:linear-gradient(180deg,var(--goldHi),var(--goldBody) 72%,var(--goldLow));color:var(--ink);box-shadow:0 0 0 3px #050817,0 6px 18px rgba(240,182,74,.55)}
.pk-pick-tick svg{width:26px;height:26px;stroke-width:3.4}
.pk-pick-c.is-on .pk-pick-tick{display:flex;animation:pk-pop 360ms cubic-bezier(.2,1.5,.4,1) both}
@keyframes pk-pop{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
.pk-pick-act{margin:46px 0 0;width:100%;max-width:480px;animation:pk-rise 320ms cubic-bezier(.2,1.2,.4,1) both}
.pk-pick-act[hidden]{display:none}
.pk-pick-go{width:100%;min-height:64px;font-size:21px}
@keyframes pk-rise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.pk-pick-c .c3:focus-visible,.pk-trio-c .c3:focus-visible,.pk-one-card .c3:focus-visible{outline:3px solid #ffd65c;outline-offset:6px}
.pk-go:focus-visible,.pk-ghost:focus-visible,.po-go:focus-visible{outline:3px solid #ffd65c;outline-offset:4px}
@media (max-width:899px){
.pk-body{flex-direction:column;align-items:center;gap:26px;text-align:center}
.pk-rig{width:min(340px,74vw)}
.pk-h,.pk-line{margin-left:auto;margin-right:auto}
.pk-act{justify-content:center}
.pk-glow{left:50%;top:38%}
}
@media (max-width:639px){
.po-title{padding-top:36px}
/* All three on a phone (its board): the rarest on top, the other two side by side under it */
.pk-all{padding:26px var(--gut) 20px}
.pk-all-sub{font-size:16px}
.pk-trio{display:grid;grid-template-columns:auto auto;grid-template-areas:"m m" "a b";justify-content:center;align-content:center;gap:12px 22px;margin-top:16px}
.pk-trio-i{gap:8px}.pk-trio-i.is-mid{grid-area:m}
.pk-trio-c{width:min(150px,38vw,calc((100dvh - 330px) * .31))}
.pk-trio-i.is-mid .pk-trio-c{width:min(214px,55vw,calc((100dvh - 330px) * .44))}
.pk-trio-n{font-size:16px}
.pk-all-act{margin-top:16px;align-self:stretch}.pk-all-act .pk-go{width:100%}
.pk-pick-tick{width:36px;height:36px;top:-12px;right:-12px}.pk-pick-tick svg{width:20px;height:20px}
.pk-pick-act{margin-top:34px;max-width:none}
.pk-one{padding-top:30px;gap:12px}
.pk-one-act{align-self:stretch}.pk-one-act .pk-go{width:100%}
.pk-step{padding-top:20px}
.pk-type{position:static;transform:none;margin-left:auto}
.pk-top{justify-content:space-between}
.pk-act>*{flex:1 1 100%}
.po-go{padding:0 32px;font-size:23px}
}
@media (prefers-reduced-motion:reduce){
.pk-card,.pk-info,.pk-one.is-in,.pk-one-say,.pk-one-tip,.pk-one-act,.pk-one-bloom,.pk-one-sparks i,.pk-one-ring,.pk-one-sheen,.pk-one-edge,.pk-one-badge span,.pk-trio-i,.pk-pick-tick,.pk-pick-act,.po[data-rare] .po-crack,.po[data-rare] .po-open,.po-stage.is-dropping,.po-stage.is-holding .po-spin{animation:none!important}
.pk-rig,.pk-foil,.pk-gloss,.po-go,.pk-go,.pk-pick-c,.pk-pick>.ui-scene{transition:none}
}
/* The revealed card, flat at its real shape */
.po-flat{display:block;width:min(400px,78vw);height:auto;aspect-ratio:1795/2400;border-radius:3.5%;object-fit:contain}
@media (max-width:639px){.po-stage{width:min(280px,64vw,36vh)}}

/* Pack opening: the 3D pack, its foil and the card inside (ported from the canvas packs2/packs3) */

.po-spin{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.25,.8,.3,1),scale .26s ease-out}
/* held: the pack trembles and swells as the tear line fills (Jon, 26 Oct) */
.po-stage.is-holding .po-spin{scale:1.06;transition:transform .5s cubic-bezier(.25,.8,.3,1),scale .9s linear;animation:po-hold .11s linear infinite}
@keyframes po-hold{0%,100%{translate:0 0}25%{translate:-2px 1px}50%{translate:2px -1px}75%{translate:1px 2px}}
/* as the first card rises, the pack sinks under it, so the card comes up out of its top; then the empty pack drops away */
.po-stage.is-dropping{animation:po-drop 1.05s cubic-bezier(.45,0,.55,1) both}
@keyframes po-drop{0%{transform:none}45%{transform:translateY(36%);opacity:1}100%{transform:translateY(80vh) rotate(7deg);opacity:0}}
/* The hand-off: while the first card rises out of the pack, its screen is already drawn underneath (the pack stays on top), and the
   words above and below the pack fade. Both keep their places, so nothing jumps when the pack goes. */
.po.is-handoff .po-final{position:absolute;left:0;top:0;width:100%;z-index:0}
.po.is-handoff .po-moment{z-index:1;pointer-events:none}
.po.is-handoff .po-title,.po.is-handoff .po-controls{opacity:0;transition:opacity .25s ease}
/* isolation keeps the foil's blend layers inside the pack, so the scene behind never shows through it */
.po-side{position:absolute;inset:0;isolation:isolate;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(5px)}
.po-backside{transform:rotateY(180deg) translateZ(5px)}
.po-slab{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;transition:transform .65s cubic-bezier(.3,.7,.3,1),opacity .28s ease}
.po-slice{position:absolute;inset:0;-webkit-mask:url(mq/pack/pack-front-640.webp) center/100% 100% no-repeat;mask:url(mq/pack/pack-front-640.webp) center/100% 100% no-repeat;background:linear-gradient(90deg,#4f5361 0%,#e9e5da 18%,#9a9eab 42%,#f4efe3 64%,#7d818f 86%,#4f5361 100%)}
.po-shade{position:absolute;inset:0;pointer-events:none;background:#04081a;-webkit-mask:url(mq/pack/pack-front-640.webp) center/100% 100% no-repeat;mask:url(mq/pack/pack-front-640.webp) center/100% 100% no-repeat}
.po-ground{position:absolute;left:10%;right:10%;top:96%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none;transition:transform .5s cubic-bezier(.25,.8,.3,1),opacity .3s ease}
.po-layer{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.po-wrap{transition:transform .65s cubic-bezier(.3,.7,.3,1),opacity .28s ease}
.po-strip{transition:opacity .3s ease}
.ph-dragging .po-strip{transition:none}
.ph-flying .po-strip,.ph-revealed .po-strip{transition:transform .36s cubic-bezier(.4,0,.6,1),opacity .36s ease}
.ph-tearing .po-open,.ph-sealed .po-open{transition:none}
.po-open{transition:transform .65s cubic-bezier(.3,.7,.3,1),opacity .16s ease}
.ph-dragging .po-open{transition:none}
.po-mouth{transform-origin:50% 13%;transition:transform .4s cubic-bezier(.3,.7,.3,1),opacity .16s ease}
.po-foil{position:absolute;inset:0;pointer-events:none;-webkit-mask:url(mq/pack/pack-front-640.webp) center/100% 100% no-repeat;mask:url(mq/pack/pack-front-640.webp) center/100% 100% no-repeat}
.po-holo{background:linear-gradient(115deg,#ff4fb4 0%,#3fb8ff 14%,#5dffa0 28%,#ffe14d 42%,#ff7a4d 56%,#a46bff 70%,#3fb8ff 84%,#ff4fb4 100%);background-size:260% 260%;mix-blend-mode:overlay}
.po-glare{mix-blend-mode:soft-light}
.po-sweep{background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,250,232,.95) 49%,rgba(220,230,255,.6) 52%,rgba(255,255,255,0) 60%);background-size:320% 100%;mix-blend-mode:overlay;-webkit-mask:url(mq/pack/pack-front-640.webp) center/100% 100% no-repeat,linear-gradient(180deg,#000 0,#000 13%,rgba(0,0,0,.3) 19%,rgba(0,0,0,.3) 87%,#000 92%,#000 100%);-webkit-mask-composite:source-in;mask:url(mq/pack/pack-front-640.webp) center/100% 100% no-repeat,linear-gradient(180deg,#000 0,#000 13%,rgba(0,0,0,.3) 19%,rgba(0,0,0,.3) 87%,#000 92%,#000 100%);mask-composite:intersect}
.po-sweep-b{-webkit-mask:url(mq/pack/pack-back-640.webp) center/100% 100% no-repeat,linear-gradient(180deg,#000 0,#000 13%,rgba(0,0,0,.3) 19%,rgba(0,0,0,.3) 87%,#000 92%,#000 100%);-webkit-mask-composite:source-in;mask:url(mq/pack/pack-back-640.webp) center/100% 100% no-repeat,linear-gradient(180deg,#000 0,#000 13%,rgba(0,0,0,.3) 19%,rgba(0,0,0,.3) 87%,#000 92%,#000 100%);mask-composite:intersect}
.po-gem{position:absolute;width:13%;aspect-ratio:1;margin:-6.5% 0 0 -6.5%;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .25s cubic-bezier(.2,1.6,.4,1);background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,240,180,.75) 30%,rgba(255,220,120,0) 70%);mix-blend-mode:screen}
.po-gem.is-lit{opacity:1;transform:scale(1)}
.po-gem.is-flare{opacity:1;transform:scale(2.6);background:radial-gradient(circle,rgba(255,255,255,1) 0%,var(--po-flare,rgba(255,240,180,.9)) 28%,rgba(255,255,255,0) 70%)}
.po-crack{filter:drop-shadow(0 0 6px #ffe9a8) drop-shadow(0 0 14px #ffd36b)}
.ph-sealed .po-crack{animation:po-pulse 1.4s ease-in-out 4}
@keyframes po-pulse{0%,100%{opacity:.55}50%{opacity:1}}
.po-hint-dot{position:absolute;top:12.9%;left:8%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 0 10px rgba(255,255,255,.28),0 4px 12px rgba(0,0,0,.35);pointer-events:none;animation:po-hint 2.2s ease-in-out infinite both}
@keyframes po-hint{0%{left:8%;opacity:0}15%{opacity:1}75%{left:74%;opacity:1}100%{left:79%;opacity:0}}
.po-tremble{animation:po-tremble .12s linear 12}
@keyframes po-tremble{0%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}100%{transform:translate(0,0)}}
/* the swipe starts anywhere on the pack, a little beyond its edges too */
.po-hit{position:absolute;inset:-8% -14%;width:auto;height:auto;padding:0;border:0;background:transparent;border-radius:6%;touch-action:none;cursor:grab}
.po-seal{position:absolute;left:0;right:0;top:0;height:18%;padding:0;border:0;background:transparent;touch-action:none;cursor:grab}
.po-seal.is-off{pointer-events:none}
.ph-dragging .po-seal{cursor:grabbing}
@media (prefers-reduced-motion:reduce){.po-stage,.po-hint-dot,.po-tremble,.ph-sealed .po-crack{animation:none}.po-wrap,.po-strip,.po-spin,.po-gem,.po-mouth,.po-open{transition:opacity .2s ease}}

/* A card found earlier (#found/<id> after a reload): the same card view as the end of the pack, without the pack */
.mo{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100dvh;overflow:hidden;color:var(--ivory);background:#050817}
/* Shown straight away: it is not a second reveal */
.mo .pk-card,.mo .pk-info{animation:none}
.mo-card{display:flex;justify-content:center;--cw:min(380px,72vw)}
.mo-card-in{position:relative}

/* ---- The shrine the pack opens in. The art is painted; the light is live, because beams seam
   badly in a video loop and a still shrine looks dead. Five shafts on clocks that never line up
   (13/17/11/19/15s are coprime enough that the pattern does not visibly repeat), motes drifting
   up through them, and a slow breath in the glow behind the pack. */
.po-shrine{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.po-shrine-img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;filter:brightness(.82) saturate(.95) contrast(1.05)}
.po-shrine-dim{position:absolute;inset:0;background:radial-gradient(85% 62% at 50% 36%,rgba(7,11,34,0),rgba(7,11,34,.30) 72%,rgba(7,11,34,.62)),linear-gradient(180deg,rgba(7,11,34,.30) 0,rgba(7,11,34,.06) 26%,rgba(7,11,34,.22) 58%,rgba(7,11,34,.84) 100%)}
/* The words sit straight on the shrine. The image is darkened and desaturated enough to carry
   them, with a soft shadow on the text rather than a slab behind it. */
.po-controls{position:relative;text-shadow:0 2px 10px rgba(3,6,20,.9),0 1px 3px rgba(3,6,20,.85)}
.po-shaft{position:absolute;top:-12%;width:14%;height:128%;transform-origin:50% 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,238,196,.46),rgba(255,238,196,.14) 46%,rgba(255,238,196,0) 82%);
  filter:blur(7px);opacity:.6;animation:po-shaft-breathe 15s ease-in-out infinite}
.po-shaft-1{left:12%;transform:rotate(9deg);animation-duration:13s}
.po-shaft-2{left:29%;transform:rotate(5deg);animation-duration:17s;animation-delay:-4s;opacity:.38}
.po-shaft-3{left:46%;width:19%;transform:rotate(0deg);animation-duration:11s;animation-delay:-7s;opacity:.58}
.po-shaft-4{left:66%;transform:rotate(-5deg);animation-duration:19s;animation-delay:-2s;opacity:.42}
.po-shaft-5{left:82%;transform:rotate(-9deg);animation-duration:15s;animation-delay:-9s;opacity:.34}
@keyframes po-shaft-breathe{0%,100%{opacity:.30;transform-origin:50% 0}50%{opacity:.62}}
.po-mote{position:absolute;bottom:-6%;border-radius:50%;background:radial-gradient(circle,rgba(255,232,170,.95),rgba(255,200,110,0) 70%);
  animation-name:po-mote-rise;animation-timing-function:linear;animation-iteration-count:infinite;pointer-events:none}
@keyframes po-mote-rise{
  0%{transform:translate(0,0) scale(.6);opacity:0}
  12%{opacity:.85}
  80%{opacity:.5}
  100%{transform:translate(var(--drift),-108vh) scale(1);opacity:0}
}
.po-mote-1{left:34.5%;width:2.2px;height:2.2px;animation-delay:-2.1s;animation-duration:18.8s;--drift:3px}
.po-mote-2{left:38.2%;width:2.1px;height:2.1px;animation-delay:-0.8s;animation-duration:17.1s;--drift:-5px}
.po-mote-3{left:12.1%;width:4.5px;height:4.5px;animation-delay:-1.3s;animation-duration:16.1s;--drift:-30px}
.po-mote-4{left:25.6%;width:3.7px;height:3.7px;animation-delay:-8.8s;animation-duration:22.4s;--drift:-8px}
.po-mote-5{left:91.9%;width:2.9px;height:2.9px;animation-delay:-0.7s;animation-duration:21.3s;--drift:-28px}
.po-mote-6{left:16.4%;width:2.5px;height:2.5px;animation-delay:-4.3s;animation-duration:20.8s;--drift:7px}
.po-mote-7{left:62.2%;width:2.2px;height:2.2px;animation-delay:-5.2s;animation-duration:17.6s;--drift:-35px}
.po-mote-8{left:24.1%;width:2.9px;height:2.9px;animation-delay:-9.5s;animation-duration:16.1s;--drift:7px}
.po-mote-9{left:45.9%;width:4.1px;height:4.1px;animation-delay:-4.2s;animation-duration:20.5s;--drift:-20px}
.po-mote-10{left:56.5%;width:4.2px;height:4.2px;animation-delay:-7.4s;animation-duration:21.5s;--drift:-17px}
.po-mote-11{left:92.3%;width:4.3px;height:4.3px;animation-delay:-1.7s;animation-duration:16.0s;--drift:-28px}
.po-mote-12{left:49.0%;width:4.3px;height:4.3px;animation-delay:-0.5s;animation-duration:19.0s;--drift:6px}
.po-mote-13{left:83.0%;width:3.8px;height:3.8px;animation-delay:-4.4s;animation-duration:19.3s;--drift:6px}
.po-mote-14{left:46.1%;width:3.4px;height:3.4px;animation-delay:-11.8s;animation-duration:22.3s;--drift:13px}
.po-mote-15{left:11.3%;width:5.0px;height:5.0px;animation-delay:-9.8s;animation-duration:18.8s;--drift:26px}
.po-mote-16{left:31.0%;width:2.1px;height:2.1px;animation-delay:-5.4s;animation-duration:19.0s;--drift:-3px}
/* The glow behind the pack breathes with the shafts rather than sitting still. */
.po-glow{animation:po-glow-breathe 9s ease-in-out infinite}
@keyframes po-glow-breathe{0%,100%{opacity:.78;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
/* Reduced motion: the shrine stays, lit and still. Nothing moves. */
@media (prefers-reduced-motion:reduce){
  .po-shaft,.po-mote,.po-glow{animation:none}
  .po-mote{display:none}
  .po-shaft{opacity:.42}
}
@media (max-width:639px){.po-shrine-img{object-position:50% 42%}.po-shaft{filter:blur(5px)}}