:root{--pink:#ffafcc;--pink2:#ffc8dd;--lav:#cdb4db;--txt:#7a3e6b;--bg:#fff5fa}
*{box-sizing:border-box}body{margin:0;font-family:'Mali',sans-serif;color:var(--txt);background:linear-gradient(160deg,#ffe5ef,#efe2ff);min-height:100vh}
header{text-align:center;padding:30px 12px 10px}h1{margin:0;font-size:2.1rem}h1::before,h1::after{content:" 💗 "}
nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px;position:sticky;top:0}
nav a{background:#fff;padding:6px 14px;min-height:40px;display:inline-flex;align-items:center;border-radius:999px;text-decoration:none;color:var(--txt);box-shadow:0 3px 0 var(--lav)}
main{max-width:960px;margin:auto;padding:12px}.card{background:#fffd;border-radius:28px;padding:22px;margin:20px 0;box-shadow:0 8px 24px #cdb4db66;border:3px dashed var(--pink2)}
h2{margin-top:0}.sub{opacity:.8}.clock{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.clock div{background:linear-gradient(var(--pink2),var(--lav));border-radius:20px;padding:14px 4px;text-align:center}.clock b{display:block;font-size:2rem;color:#fff;text-shadow:0 2px 0 #b5678f}
.next,.games{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.mini{background:var(--bg);border-radius:20px;padding:14px;text-align:center;margin-top:12px}
.btn{display:inline-block;border:0;background:var(--pink);color:#fff;font:inherit;font-weight:700;padding:10px 18px;border-radius:999px;cursor:pointer;box-shadow:0 4px 0 #e07aa5;margin:6px}.btn:active{transform:translateY(3px);box-shadow:none}.small{padding:5px 12px;font-size:.85rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:10px}.grid figure{margin:0;position:relative;cursor:pointer}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;transition:.2s}.grid img:hover{transform:scale(1.05) rotate(-2deg)}.grid figcaption{font-size:.85rem;text-align:center}
.del{position:absolute;top:4px;right:4px;border:0;background:#fff;border-radius:50%;width:26px;height:26px;cursor:pointer}
#lightbox{position:fixed;inset:0;background:#4a1f3fdd;display:none;align-items:center;justify-content:center;z-index:9}#lightbox.on{display:flex}
#lightbox img{max-width:80vw;max-height:75vh;border-radius:20px;border:6px solid #fff}#lightbox figcaption{color:#fff;text-align:center}
#lightbox button{background:#fff;border:0;font-size:1.6rem;border-radius:50%;width:44px;height:44px;margin:8px;cursor:pointer;color:var(--txt)}#lbClose{position:absolute;top:10px;right:10px}
form{display:grid;gap:8px}input,textarea{font:inherit;padding:10px;border-radius:14px;border:2px solid var(--pink2)}
#tl{list-style:none;padding:0;border-left:4px dotted var(--pink);margin-left:10px}#tl li{position:relative;margin:16px 0 16px 18px;background:var(--bg);padding:12px;border-radius:18px}
#tl li::before{content:"💗";position:absolute;left:-32px;top:10px}#tl img{max-width:160px;border-radius:12px;display:block;margin-top:6px}.date{font-size:.85rem;opacity:.8}
.choice{display:block;width:100%;text-align:left;background:#fff;border:2px solid var(--lav);border-radius:16px;padding:10px;margin:6px 0;font:inherit;color:inherit;cursor:pointer}.choice:hover{background:var(--pink2)}
.gacha{position:relative;height:160px;width:140px;margin:auto}.dome{width:140px;height:110px;border-radius:70px 70px 10px 10px;background:radial-gradient(circle at 30% 30%,#fff,#e6d6ff);border:4px solid var(--lav);font-size:1.4rem;display:flex;flex-wrap:wrap;align-content:center;justify-content:center}
.dome.shake{animation:shake .15s 6}@keyframes shake{50%{transform:rotate(6deg)}}
.capsule{position:absolute;bottom:0;left:50px;width:40px;height:40px;border-radius:50%;background:linear-gradient(var(--pink) 50%,#fff 50%);border:3px solid #e07aa5;opacity:0}.capsule.drop{animation:drop .8s forwards}@keyframes drop{0%{opacity:1;transform:translateY(-60px)}70%{transform:translateY(0) scale(1.2)}100%{opacity:1;transform:scale(1)}}
.scratch{position:relative;width:260px;height:140px;margin:auto}#scratchPrize{position:absolute;inset:0;background:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700}#scratchCv{position:absolute;inset:0;border-radius:16px;touch-action:none;cursor:crosshair}
.prize{text-align:center;font-size:1.3rem;font-weight:700;min-height:1.6em}.prize.pop{animation:pop .5s}@keyframes pop{0%{transform:scale(.3)}80%{transform:scale(1.2)}}
#history{max-height:180px;overflow:auto}.match{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:340px;margin:auto}
.mc{aspect-ratio:1;border-radius:14px;background:var(--lav);font-size:1.8rem;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}.mc span{visibility:hidden}.mc.open{background:#fff}.mc.open span{visibility:visible}.mc.done{background:var(--pink2)}
footer{text-align:center;padding:20px}
.heart{position:fixed;bottom:-30px;pointer-events:none;animation:float 4s linear forwards;font-size:1.4rem;z-index:5}@keyframes float{to{transform:translateY(-110vh);opacity:0}}
@media(max-width:600px){.next,.games{grid-template-columns:1fr}.clock b{font-size:1.4rem}h1{font-size:1.5rem}}
/* ===== แอนิเมชันเพิ่มเติม ===== */
#bgHearts{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#bgHearts span{position:absolute;bottom:-40px;opacity:.35;animation:bgfloat linear infinite;will-change:transform}
@keyframes bgfloat{to{transform:translateY(-115vh) rotate(25deg)}}
header,main,footer{position:relative;z-index:1}
.btn,nav a{transition:transform .2s cubic-bezier(.3,1.8,.5,1)}.btn:hover,nav a:hover{transform:scale(1.08) rotate(-2deg);animation:wiggle .4s}
@keyframes wiggle{25%{transform:scale(1.08) rotate(3deg)}75%{transform:scale(1.08) rotate(-3deg)}}
.card{transition:transform .3s,box-shadow .3s}.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px #cdb4db99}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s cubic-bezier(.2,1.4,.5,1)}.reveal.in{opacity:1;transform:none}
.clock div{animation:pulse 2s ease-in-out infinite}.clock div:nth-child(2){animation-delay:.2s}.clock div:nth-child(3){animation-delay:.4s}.clock div:nth-child(4){animation-delay:.6s}
@keyframes pulse{50%{transform:scale(1.06);box-shadow:0 0 18px #ffafcc}}
h1{animation:bob 3s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-6px)}}
#lightbox{display:flex;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}#lightbox.on{opacity:1;visibility:visible}
#lightbox figure{transform:scale(.8);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}#lightbox.on figure{transform:scale(1)}
.confetti{position:fixed;pointer-events:none;z-index:20;font-size:1.3rem;animation:burst 1.2s ease-out forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.mc{transition:transform .3s}.mc.open{transform:rotateY(180deg)}.mc.open span{transform:rotateY(180deg);display:inline-block}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}#bgHearts,.heart,.confetti{display:none}}
#musicBtn{position:fixed;right:16px;bottom:16px;z-index:30;width:54px;height:54px;border-radius:50%;border:3px solid #fff;background:linear-gradient(var(--pink),var(--lav));font-size:1.5rem;cursor:pointer;box-shadow:0 6px 16px #b5678f66;animation:bob 2.5s ease-in-out infinite}
#musicBtn.off{filter:grayscale(.6);animation:none}#musicBtn:hover{transform:scale(1.12)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;color:#fff;font-size:.8rem;font-weight:700;vertical-align:middle}
.badge.common{background:#ff8fb8}.badge.rare{background:#a77bdb}.badge.legendary{background:linear-gradient(90deg,#f5b301,#ffd86b,#f5b301);color:#6b4a00;box-shadow:0 0 10px #f5b301}
.prize.r-rare{color:#8a55c9}.prize.r-legendary{color:#b07d00;border-radius:20px;padding:10px;animation:rainbow 2s linear infinite,pop .5s}
#scratchPrize.r-legendary{animation:rainbow 2s linear infinite}#scratchPrize.r-rare{box-shadow:inset 0 0 0 4px #a77bdb}
@keyframes rainbow{0%{box-shadow:0 0 18px 4px #ff6b9d}25%{box-shadow:0 0 18px 4px #ffd86b}50%{box-shadow:0 0 18px 4px #6bffb8}75%{box-shadow:0 0 18px 4px #6bb8ff}100%{box-shadow:0 0 18px 4px #c56bff}}
.capsule.cap-legendary.drop{animation:drop .8s forwards,rainbow 1.5s linear infinite .8s}
.teaser{text-align:center}.teaser-cat{font-size:4rem;animation:bob 2s ease-in-out infinite}.btn.big{font-size:1.3rem;padding:14px 30px}
.pulse{animation:pls 1.4s ease-in-out infinite}@keyframes pls{50%{transform:scale(1.08);box-shadow:0 4px 0 #e07aa5,0 0 0 10px #ffafcc55}}
@media (prefers-reduced-motion:reduce){.pulse,.teaser-cat{animation:none}}
.exp{font-size:.8rem;font-weight:600;opacity:.8;margin-top:2px}li .exp{display:inline}#history li.expired{filter:grayscale(1);opacity:.5;text-decoration:line-through}
/* ===== คลาวด์: หน้าใส่รหัส + แถบอัปโหลด ===== */
#gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ffd6e8,#e6d4ff,#d4ecff);transition:opacity .4s}#gate.bye{opacity:0}
.gateCard{background:#fff;border-radius:30px;padding:26px 22px;width:min(88vw,360px);text-align:center;box-shadow:0 14px 40px #b98bd066;border:4px solid #ffc8dd;animation:popIn .5s cubic-bezier(.3,1.6,.5,1)}
.gateCard.shake{animation:shakeX .45s}@keyframes shakeX{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}@keyframes popIn{from{opacity:0;transform:scale(.8)}}
.gateCat{font-size:3.4rem;animation:bob 2.2s ease-in-out infinite}.gateCard h2{margin:.2em 0;color:#d4559a}.gateCard input{width:100%;margin:10px 0;text-align:center;font-size:1.1rem}
.gateWho .chip{font:inherit;border:2px solid #cdb4db;background:#fff;color:#7a3e6b;border-radius:999px;padding:8px 18px;margin:4px;cursor:pointer}.gateWho .chip.on{background:#ffafcc;border-color:#ffafcc;color:#fff}
.gateErr{color:#e0559a;min-height:1.2em;font-weight:700}
#upBar{position:fixed;left:50%;top:12px;z-index:90;width:min(90vw,380px);transform:translate(-50%,-140%);transition:transform .35s cubic-bezier(.3,1.5,.5,1);background:#fff;border-radius:20px;padding:10px 14px 16px;box-shadow:0 8px 24px #b98bd077;text-align:center;font-weight:700;color:#7a3e6b}
#upBar.on{transform:translate(-50%,0)}.upTrack{position:relative;height:12px;border-radius:99px;background:#f3e8f7;margin-top:10px;container-type:inline-size}
.upFill{position:absolute;inset:0;border-radius:99px;background:linear-gradient(90deg,#ffafcc,#cdb4db);transform-origin:left;transform:scaleX(0);transition:transform .2s}
.upCat{position:absolute;top:-14px;left:-12px;font-size:1.4rem;transition:left .2s;animation:bob .5s ease-in-out infinite}
.grid figure.new{animation:popIn .6s cubic-bezier(.3,1.7,.5,1)}.by{position:absolute;left:6px;top:6px;background:#fffd;border-radius:99px;padding:1px 8px;font-size:.75rem}
.cloudTag{display:inline-block;font-size:.8rem;background:#e6f7ee;color:#2f8a5b;border-radius:99px;padding:2px 10px;margin-left:6px;vertical-align:middle}

.gPrev{display:block;width:130px;margin:0 auto;animation:gpv 1.8s ease-in-out infinite}.gPrev svg{width:100%;display:block}@keyframes gpv{50%{transform:translateY(-8px) rotate(-3deg)}}
#bdays{margin-top:10px}
@media (prefers-reduced-motion:reduce){.gPrev{animation:none}}

.vhFile{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}.fileBtn{position:relative}.btn.alt{background:#b9a3e3;box-shadow:0 4px 0 #8f78c4}.upRow{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.kindRow{display:flex;flex-wrap:wrap;gap:4px}.chip{font:inherit;border:2px solid var(--pink2);background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer}.chip.on{background:var(--pink);color:#fff;border-color:var(--pink)}
.pickBox{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pickBox img{width:72px;height:72px;object-fit:cover;border-radius:14px;border:3px solid #fff;box-shadow:0 2px 8px #0002}
#pickSheet{position:fixed;inset:0;z-index:80;background:#0006;display:none;align-items:flex-end;justify-content:center}#pickSheet.on{display:flex}
.psCard{background:#fff;width:min(560px,100%);max-height:80dvh;overflow:auto;border-radius:24px 24px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));text-align:center;animation:psUp .25s ease}
@keyframes psUp{from{transform:translateY(40px);opacity:0}}.psGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin:8px 0}.psGrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;cursor:pointer;border:3px solid transparent}.psGrid img:active{border-color:var(--pink)}
.kTag{font-size:.75rem;background:var(--pink2);border-radius:999px;padding:1px 8px;margin-left:4px}
/* v6.0 ทางลัดหน้าแรก */
.qp{padding:12px!important}.qpRhythm{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;background:linear-gradient(135deg,#ff6fa5,#a46bff);border:3px solid #2a1f2d;border-radius:20px;padding:14px 18px;box-shadow:0 5px 0 #2a1f2d;animation:qpG 2.4s ease-in-out infinite}
.qpRhythm:active{transform:translateY(3px);box-shadow:0 2px 0 #2a1f2d}.qpIc{font-size:2.6rem;line-height:1}.qpTx b{display:block;font-size:1.45rem}.qpTx small{font-size:.95rem;opacity:.95}
.qpRow{display:flex;gap:8px;margin-top:10px}.qpRow a{flex:1;text-align:center;text-decoration:none;font-weight:700;color:#4a2340;background:#fff;border:3px solid #2a1f2d;border-radius:14px;padding:8px 4px;box-shadow:0 3px 0 #2a1f2d;white-space:nowrap}
@keyframes qpG{50%{filter:brightness(1.12)}}@media (prefers-reduced-motion:reduce){.qpRhythm{animation:none}}
/* v6.2.1 ขยายพื้นที่แตะปุ่มเล็ก (ไม่เปลี่ยนหน้าตา) */#clearHist,#pName,#phase,#who,#panelH{position:relative}#clearHist::after,#pName::after,#phase::after,#who::after,#panelH::after{content:"";position:absolute;inset:-8px -4px}
@supports (height:100dvh){body{min-height:100dvh}}