/* 玩法預覽小動畫（首頁入口卡＋各遊戲 ? 玩法框共用；markup 在 shared.js 的 Dino.previews） */
.pv{position:relative;flex:none;width:124px;height:96px;border-radius:14px;overflow:hidden;background:#fffdf6;box-shadow:inset 0 0 0 2px rgba(0,0,0,.06),0 2px 0 rgba(0,0,0,.08)}

/* 找圖片：聽 duck → 4 張圖 → 點中 → 蓋章（3.2s 循環） */
.pv-match .say{position:absolute;left:50%;top:50%;margin:-11px 0 0 -30px;z-index:2;display:flex;align-items:center;gap:3px;padding:2px 7px 2px 4px;border-radius:99px;background:#2b7751;color:#fff;font:900 12px/1.4 "Naikai",ui-rounded,system-ui,sans-serif;transform-origin:0 50%;animation:pvSay 3.2s infinite}
.pv-match .say i{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#fff;color:#2b7751;font-style:normal;font-size:8px}
.pv-match .grid{position:absolute;inset:6px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4px}
.pv-match .grid b{position:relative;display:grid;place-items:center;border-radius:8px;background:#fff;box-shadow:0 2px 0 #d7c79d;animation:pvTile 3.2s infinite}
.pv-match .grid b:nth-child(2){animation-delay:.05s}.pv-match .grid b:nth-child(3){animation-delay:.1s}.pv-match .grid b:nth-child(4){animation-delay:.15s}
.pv-match .grid img{height:88%;width:auto;max-width:90%}
.pv-match .grid b.ok{animation:pvTile 3.2s infinite,pvOk 3.2s infinite}
.pv-match .grid b.ok::after{content:"";position:absolute;inset:-3px;border:3px solid #4fb577;border-radius:10px;opacity:0;animation:pvRing 3.2s infinite}
.pv .tap{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 0 3px rgba(43,119,81,.55),0 3px 6px rgba(0,0,0,.25);opacity:0;pointer-events:none}
.pv-match .tap{animation:pvTapMatch 3.2s infinite}
.pv .seal{position:absolute;right:5px;top:4px;width:30px;height:30px;border:2px solid #c8452f;border-radius:50%;color:#c8452f;display:grid;place-items:center;font:1000 8px/1 "Naikai",ui-rounded,system-ui,sans-serif;background:rgba(255,250,240,.9);opacity:0;animation:pvSeal 3.2s infinite}
@keyframes pvSay{0%,3%{transform:scale(0)}10%{transform:scale(1.25)}16%,24%{transform:scale(1.1)}32%,100%{transform:translate(-26px,-30px) scale(0)}}
@keyframes pvTile{0%,22%{transform:translateY(10px) scale(.7);opacity:0}32%,92%{transform:none;opacity:1}100%{opacity:0}}
@keyframes pvTapMatch{0%,38%{opacity:0;left:110%;top:120%}50%{opacity:1;left:30px;top:26px}56%{transform:scale(.7)}62%{transform:scale(1);opacity:1}72%,100%{opacity:0;left:30px;top:26px}}
@keyframes pvOk{0%,55%{background:#fff}62%,92%{background:#e3f6d9}}
@keyframes pvRing{0%,55%{opacity:0;transform:scale(1.3)}62%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes pvSeal{0%,66%{opacity:0;transform:scale(2) rotate(-25deg)}72%,92%{opacity:1;transform:rotate(-12deg)}100%{opacity:0}}

/* 注音送信：信封「ㄩˊ」飛進魚的郵箱（3.2s 循環） */
.pv-mail .letter{position:absolute;left:50%;top:8px;width:46px;height:30px;margin-left:-23px;border-radius:4px;background:#fffaf0;box-shadow:0 2px 0 #d9c38f,0 4px 8px rgba(0,0,0,.12);display:grid;place-items:center;font:900 13px/1 "Naikai",ui-rounded,system-ui,sans-serif;color:#18583e;animation:pvLetter 3.2s infinite}
.pv-mail .letter::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:linear-gradient(to bottom right,transparent 49%,#ead7a6 50%) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent 49%,#ead7a6 50%) right/50% 100% no-repeat;opacity:.7}
.pv-mail .letter span{position:relative}
.pv-mail .boxes{position:absolute;left:6px;right:6px;bottom:6px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.pv-mail .boxes b{position:relative;height:46px;border-radius:9px 9px 6px 6px;background:#e2573b;box-shadow:inset 0 -5px 0 rgba(0,0,0,.15);display:grid;place-items:end center;padding-bottom:4px}
.pv-mail .boxes b:nth-child(2){background:#4f8fd6}.pv-mail .boxes b:nth-child(3){background:#f0b43c}
.pv-mail .boxes b::before{content:"";position:absolute;left:22%;right:22%;top:6px;height:4px;border-radius:2px;background:rgba(0,0,0,.35)}
.pv-mail .boxes img{width:26px;height:26px;border-radius:6px;background:#fff;padding:2px}
.pv-mail .boxes b.ok{animation:pvBoxOk 3.2s infinite}
.pv-mail .tap{animation:pvTapMail 3.2s infinite}
@keyframes pvLetter{0%,6%{transform:translateY(-40px) rotate(-10deg);opacity:0}16%,36%{transform:none;opacity:1}44%{transform:translateY(-4px) scale(1.06)}64%{transform:translate(-37px,40px) scale(.45) rotate(-8deg);opacity:1}70%,100%{transform:translate(-37px,44px) scale(.3);opacity:0}}
@keyframes pvTapMail{0%,26%{opacity:0;left:110%;top:120%}36%{opacity:1;left:62px;top:24px}42%{transform:scale(.7)}48%{transform:scale(1);opacity:1}56%,100%{opacity:0;left:24px;top:62px}}
@keyframes pvBoxOk{0%,64%{transform:none}70%{transform:translateY(-6px) scale(1.08)}78%{transform:translateY(2px)}84%,100%{transform:none}}
.pv-mail .seal{left:5px;right:auto}

/* 郵差翻翻樂：藍聲音信翻開♫ → 米色圖片信翻開鴨子 → 兩封發亮蓋章（3.2s 循環） */
.pv-flip .cards{position:absolute;inset:7px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:5px}
.pv-flip .cards b{position:relative;display:grid;place-items:center;border-radius:7px;background:#4f8fd6;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15)}
.pv-flip .cards b.pic{background:#ecd6a4}
.pv-flip .cards i{display:grid;place-items:center;width:100%;height:100%;border-radius:7px;background:#fffdf6;color:#2b6fb8;font:900 20px/1 "Naikai",ui-rounded,system-ui,sans-serif;font-style:normal;opacity:0}
.pv-flip .cards img{height:80%;width:auto;max-width:90%;min-height:0}
.pv-flip .snd.ok{animation:pvFlipA 3.2s infinite}.pv-flip .snd.ok i{animation:pvFaceA 3.2s infinite}
.pv-flip .pic.ok{animation:pvFlipB 3.2s infinite}.pv-flip .pic.ok i{animation:pvFaceB 3.2s infinite}
.pv-flip .tap{animation:pvTapFlip 3.2s infinite}
@keyframes pvFlipA{0%,14%{transform:none}20%{transform:scaleX(0)}26%{transform:none}62%{box-shadow:none}68%,90%{box-shadow:0 0 0 3px #4fb577}100%{box-shadow:none}}
@keyframes pvFaceA{0%,20%{opacity:0}21%,92%{opacity:1}100%{opacity:0}}
@keyframes pvFlipB{0%,44%{transform:none}50%{transform:scaleX(0)}56%{transform:none}62%{box-shadow:none}68%,90%{box-shadow:0 0 0 3px #4fb577}100%{box-shadow:none}}
@keyframes pvFaceB{0%,50%{opacity:0}51%,92%{opacity:1}100%{opacity:0}}
@keyframes pvTapFlip{0%,6%{opacity:0;left:110%;top:120%}14%{opacity:1;left:32px;top:24px}18%{transform:scale(.7)}22%{transform:scale(1)}36%{left:32px;top:24px;opacity:1}44%{left:90px;top:68px}48%{transform:scale(.7)}52%{transform:scale(1);opacity:1}60%,100%{opacity:0;left:90px;top:68px}}

/* 注音輸送帶：郵票在輸送帶上走 → 點中「ㄩ」→ 飛進魚的注音格（3.2s 循環） */
.pv-belt .word{position:absolute;left:8px;right:8px;top:7px;height:40px;display:flex;align-items:center;justify-content:center;gap:6px}
.pv-belt .word img{height:36px;width:auto;border-radius:6px;background:#fff;padding:2px}
.pv-belt .slot{display:grid;place-items:center;width:28px;height:28px;border:2px dashed #9c7fb0;border-radius:6px;background:#fff;color:transparent;font:900 17px/1 "Naikai",ui-rounded,system-ui,sans-serif;animation:pvSlot 3.2s infinite}
.pv-belt .word em{margin-left:-4px;color:#6a4b80;font:900 15px/1 "Naikai",ui-rounded,system-ui,sans-serif;font-style:normal}
.pv-belt .belt{position:absolute;left:0;right:0;bottom:6px;height:34px;overflow:hidden;background:repeating-linear-gradient(90deg,#5b6470 0 8px,#4c545f 8px 16px);box-shadow:inset 0 3px 0 rgba(0,0,0,.2)}
.pv-belt .run{position:absolute;left:0;top:4px;display:flex;gap:8px;animation:pvRun 3.2s linear infinite}
.pv-belt .run b{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:5px;background:#fff7e0;color:#18583e;font:900 15px/1 "Naikai",ui-rounded,system-ui,sans-serif;box-shadow:0 2px 0 #c9a666}
.pv-belt .run b.ok{animation:pvGrab 3.2s infinite}
.pv-belt .tap{animation:pvTapBelt 3.2s infinite}
@keyframes pvRun{from{transform:translateX(30px)}to{transform:translateX(-40px)}}
@keyframes pvGrab{0%,40%{opacity:1;transform:none}52%{opacity:0;transform:translateY(-30px) scale(.8)}100%{opacity:0}}
@keyframes pvSlot{0%,50%{color:transparent;background:#fff;border-style:dashed}56%,92%{color:#18583e;background:#d9f2d0;border-style:solid;border-color:#4fb577}100%{color:transparent}}
@keyframes pvTapBelt{0%,24%{opacity:0;left:110%;top:120%}36%{opacity:1;left:46px;top:68px}40%{transform:scale(.7)}44%{transform:scale(1);opacity:1}52%,100%{opacity:0;left:46px;top:68px}}

/* 郵差走小路：路慢慢變綠、伊奇沿路走到郵筒 */
.pv-path{background:#eaf4dc}
.pv-path svg{position:absolute;inset:0;width:100%;height:100%}
.pv-path .road{fill:none;stroke:#f3dca6;stroke-width:16;stroke-linecap:round}
.pv-path .trail{fill:none;stroke:#7fd48a;stroke-width:7;stroke-linecap:round;stroke-dasharray:100 101;stroke-dashoffset:100;animation:pvTrail 3.2s linear infinite}
.pv-path .star{fill:#ffd23f;stroke:#c98a12;stroke-width:1.5;stroke-linejoin:round}
.pv-path .box rect{fill:#e0473a;stroke:#8e2620;stroke-width:1.5}
.pv-path .box .post{fill:#8e5a2b;stroke:none}
@keyframes pvTrail{0%,15%{stroke-dashoffset:100}85%,100%{stroke-dashoffset:0}}
/* 接信大郵袋：信封掉進推車、襪子掉到旁邊 */
.pv-catch{background:linear-gradient(#a9dcf6,#e3f5fc 70%,#7cc46a 70% 100%)}
.pv-catch .env{position:absolute;top:-18px;width:22px;height:15px;border-radius:3px;background:#e8574a;border:2px solid #9b3229;animation:pvFall 2.4s ease-in infinite}
.pv-catch .env::before{content:"";position:absolute;inset:0;background:#f5a49c;clip-path:polygon(0 0,100% 0,50% 60%)}
.pv-catch .e1{left:50px}
.pv-catch .e2{left:50px;animation-delay:1.2s}
.pv-catch .junk{position:absolute;left:96px;top:-22px;width:22px;height:22px;mix-blend-mode:multiply;animation:pvJunk 2.4s ease-in .6s infinite}
.pv-catch .cart{position:absolute;left:36px;bottom:4px;width:50px;height:52px}
.pv-catch .who{position:absolute;left:50%;bottom:20px;height:34px;transform:translateX(-50%)}
.pv-catch .car{position:absolute;left:0;bottom:0;width:50px}
@keyframes pvFall{0%{transform:translateY(0);opacity:1}55%{transform:translateY(66px);opacity:1}62%,100%{transform:translateY(70px);opacity:0}}
@keyframes pvJunk{0%{transform:translateY(0) rotate(0)}70%,100%{transform:translateY(120px) rotate(160deg)}}

/* 預覽：草地上一顆蛋搖一搖 → 蹦出蔬菜卡、殼碎、蓋 OK 章；旁邊干擾蛋孵出襪子打叉 */
.pv-egg{background:url(assets/egg/meadow.webp) 50% 100%/cover}
.pv-egg .nest{position:absolute;bottom:6px;width:54px;height:30px;background:url(assets/egg/nest.webp) center/100% 100% no-repeat}
.pv-egg .rim{position:absolute;bottom:6px;width:54px;height:30px;z-index:3;background:url(assets/egg/nest_front.webp) center/100% 100% no-repeat}
.pv-egg .n1{left:6px}.pv-egg .n2{left:64px}
.pv-egg .egg{position:absolute;bottom:14px;width:30px;height:38px;z-index:2;background:url(assets/egg/egg.webp) center bottom/contain no-repeat;transform-origin:50% 95%}
.pv-egg .g1{left:18px;animation:pvEggHatch 3.2s infinite}
.pv-egg .g2{left:76px;animation:pvEggWobble 3.2s infinite}
.pv-egg .card{position:absolute;bottom:26px;width:34px;height:34px;z-index:1;display:grid;place-items:center;border:2px solid #ead9b2;border-radius:8px;background:#fffef8;box-shadow:0 2px 0 #c9ad78;opacity:0}
.pv-egg .card img{width:84%;height:84%;object-fit:contain}
.pv-egg .c1{left:16px;animation:pvCardUp 3.2s infinite}
.pv-egg .c2{left:74px;animation:pvCardPeek 3.2s infinite}
.pv-egg .x{position:absolute;left:84px;bottom:46px;z-index:4;color:#d32f2f;font:1000 18px/1 "Naikai",ui-rounded,system-ui,sans-serif;opacity:0;animation:pvX 3.2s infinite}
.pv-egg .tap{position:absolute;left:30px;top:34px;z-index:5;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 0 3px rgba(232,87,74,.6);opacity:0;animation:pvTapEgg 3.2s infinite}
@keyframes pvEggHatch{0%,8%{transform:none;opacity:1}12%{transform:rotate(-12deg)}16%{transform:rotate(12deg)}20%{transform:rotate(-8deg)}24%{transform:translateY(-4px) scale(1.08,.9);opacity:1}30%,100%{transform:translateY(6px) scale(.4);opacity:0}}
@keyframes pvCardUp{0%,24%{opacity:0;transform:translateY(16px) scale(.5)}34%{opacity:1;transform:translateY(-12px) scale(1.1)}40%,62%{opacity:1;transform:translateY(-8px) scale(1)}70%,100%{opacity:0;transform:translateY(-36px) scale(.5)}}
@keyframes pvEggWobble{0%,40%{transform:none}44%{transform:rotate(-10deg)}48%{transform:rotate(10deg)}52%{transform:none}}
@keyframes pvCardPeek{0%,52%{opacity:0;transform:translateY(16px) scale(.5)}60%,80%{opacity:1;transform:translateY(-8px) scale(1)}88%,100%{opacity:0;transform:translateY(16px) scale(.5)}}
@keyframes pvX{0%,64%{opacity:0;transform:scale(.4)}70%,82%{opacity:1;transform:scale(1.2)}90%,100%{opacity:0}}
@keyframes pvTapEgg{0%,26%{opacity:0;transform:scale(1.4)}32%{opacity:1;transform:scale(.8)}40%,100%{opacity:0;transform:scale(.8)}}
.game-choice.is-egg .pv{background-color:#fff0e4}
@media(prefers-reduced-motion:reduce){.pv-egg .c1{opacity:1;transform:translateY(-8px)}.pv-egg .g1{opacity:0}.new-tag{animation:none}}
/* 包裹拼拼樂預覽：草地 3×2 空格，恐龍站一格，兩個紙箱輪流滑進來補滿 */
.pv-pack{background:#cfe9b4}
.pv-pack .lawn{position:absolute;left:20px;top:16px;display:grid;grid-template-columns:repeat(3,28px);grid-template-rows:repeat(2,28px);gap:2px}
.pv-pack .lawn i{border-radius:6px;background:#8fcf6e;box-shadow:inset 0 -4px 0 #5ea956}
.pv-pack .dino{position:absolute;left:18px;top:6px;height:36px;z-index:2;filter:drop-shadow(0 2px 0 #0003)}
.pv-pack .pbox{position:absolute;width:26px;height:26px;z-index:3;border-radius:5px;background:linear-gradient(#e9c58a,#cf9f5c);box-shadow:inset 0 -4px 0 #b07f3f,0 2px 2px #0003}
.pv-pack .pbox::after{content:"";position:absolute;left:10px;top:0;bottom:0;width:6px;background:#ffeec1cc}
.pv-pack .pbox .env{position:absolute;left:4px;top:7px;z-index:1;width:18px;height:12px;border-radius:2px;background:#fffaf0;box-shadow:0 1px 0 #0003}
.pv-pack .b1{left:51px;top:17px;animation:pvBox1 3.2s infinite}
.pv-pack .b2{left:81px;top:47px;animation:pvBox2 3.2s infinite}
@keyframes pvBox1{0%,8%{transform:translate(52px,-30px) rotate(12deg);opacity:0}14%{opacity:1}30%,100%{transform:none;opacity:1}}
@keyframes pvBox2{0%,30%{transform:translate(30px,40px) rotate(-12deg);opacity:0}36%{opacity:1}52%,100%{transform:none;opacity:1}}

/* 預覽：草地土塊上 ㄇ 溝，手指照筆順挖（挖過變深）→ 化石出土 → 化石卡冒出、小恐龍跳；3.2s 循環 */
.pv-dig{background:url(assets/egg/meadow.webp) 50% 100%/cover}
.pv-dig svg{display:block;width:100%;height:100%}
.pv-dig .soil{fill:#d9a468}.pv-dig .grass{fill:#7cb35a}
.pv-dig path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pv-dig .groove path{stroke:#fff6e0;stroke-width:13}.pv-dig .groove-in path{stroke:#e6b981;stroke-width:10}
.pv-dig .dug{stroke:#6e4024;stroke-width:10;stroke-dasharray:100;stroke-dashoffset:100}
.pv-dig .d1{animation:pvDig1 3.2s linear infinite}.pv-dig .d2{animation:pvDig2 3.2s linear infinite}
.pv-dig .bone{opacity:0;animation:pvDigBone 3.2s infinite}
.pv-dig .bo{stroke:#b99a6c;stroke-width:8}.pv-dig .bi{stroke:#f6ead2;stroke-width:5}
.pv-dig .flag path{stroke:#9b5f34;stroke-width:1.6}.pv-dig .flag .cloth{fill:#e8574a;stroke:none}.pv-dig .flag{animation:pvDigFlag 3.2s infinite}
.pv-dig .tap{fill:rgba(255,255,255,.85);stroke:rgba(232,87,74,.7);stroke-width:3;opacity:0;animation:pvDigTap 3.2s infinite}
.pv-dig .kong{transform-box:fill-box;transform-origin:50% 100%;animation:pvDigHop 3.2s infinite}
.pv-dig .fcard{transform:translate(104px,30px) scale(0);animation:pvDigCard 3.2s infinite}
.pv-dig .fcard rect{fill:#fffaf0;stroke:#b99a6c;stroke-width:2.5}
.pv-dig .fcard text{text-anchor:middle;fill:#3d2a14;font:900 19px/1 "Naikai",ui-rounded,system-ui,sans-serif}
@keyframes pvDig1{0%,4%{stroke-dashoffset:100}26%,90%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:100}}
@keyframes pvDig2{0%,30%{stroke-dashoffset:100}56%,90%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:100}}
@keyframes pvDigTap{0%{opacity:0;transform:translate(30px,44px)}4%{opacity:1;transform:translate(30px,44px)}26%{opacity:1;transform:translate(30px,80px)}28%{opacity:0;transform:translate(30px,80px)}29%{opacity:0;transform:translate(30px,44px)}30%{opacity:1;transform:translate(30px,44px)}42%{transform:translate(66px,44px)}54%{opacity:1;transform:translate(66px,78px)}58%,100%{opacity:0;transform:translate(60px,82px)}}
@keyframes pvDigFlag{0%,26%{opacity:1}27%,100%{opacity:0}}
@keyframes pvDigBone{0%,58%{opacity:0}66%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes pvDigCard{0%,62%{transform:translate(104px,30px) scale(0)}70%{transform:translate(104px,24px) scale(1.15)}75%,90%{transform:translate(104px,26px) scale(1)}96%,100%{transform:translate(104px,30px) scale(0)}}
@keyframes pvDigHop{0%,62%,78%,100%{transform:none}68%{transform:translateY(-8px) scale(1.04,.96)}}
@media(prefers-reduced-motion:reduce){.pv-dig .dug{stroke-dashoffset:0}.pv-dig .bone{opacity:1}.pv-dig .fcard{transform:translate(104px,26px)}}