:root{--sp:cubic-bezier(.3,1.5,.5,1)}
.enter{animation-fill-mode:backwards}
.btn-no{width:calc(160px * var(--ns,1));height:calc(68px * var(--ns,1));font-size:calc(24px * var(--ns,1));padding:0;white-space:nowrap;transition:width .35s var(--sp),height .35s var(--sp),font-size .35s var(--sp)}
.no-float{transition:left .32s var(--sp),top .32s var(--sp),width .35s var(--sp),height .35s var(--sp),font-size .35s var(--sp),background .3s,color .3s}
.no-float.spawn{animation:nospawn .6s var(--sp)}
@keyframes nospawn{0%{transform:scale(.2) rotate(-30deg)}
60%{transform:scale(1.15) rotate(8deg)}
100%{transform:none}}
.split-fx,.poof,.spark{position:fixed;z-index:30;width:0;height:0;pointer-events:none}
.split-fx i{position:absolute;left:-3px;top:-30px;width:6px;height:20px;border-radius:3px;background:#F2A93B;transform-origin:3px 30px;animation:ray .6s ease-out forwards}
.split-fx i:nth-child(2n){background:#C73A62}
.split-fx i:nth-child(1),.poof i:nth-child(1),.spark i:nth-child(1){--r:0deg}
.split-fx i:nth-child(2),.poof i:nth-child(2){--r:45deg}
.split-fx i:nth-child(3),.poof i:nth-child(3){--r:90deg}
.split-fx i:nth-child(4),.poof i:nth-child(4){--r:135deg}
.split-fx i:nth-child(5),.poof i:nth-child(5){--r:180deg}
.split-fx i:nth-child(6),.poof i:nth-child(6){--r:225deg}
.split-fx i:nth-child(7),.poof i:nth-child(7){--r:270deg}
.split-fx i:nth-child(8),.poof i:nth-child(8){--r:315deg}
@keyframes ray{0%{transform:rotate(var(--r)) translateY(0) scaleY(.3);opacity:1}
100%{transform:rotate(var(--r)) translateY(-30px) scaleY(1);opacity:0}}
.poof i{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;background:#FFFFFF;border:2.5px solid #2A1A1F;box-sizing:border-box;animation:puff .7s ease-out forwards}
@keyframes puff{0%{transform:rotate(var(--r)) translateY(0) scale(.5);opacity:1}
100%{transform:rotate(var(--r)) translateY(-34px) scale(1.3);opacity:0}}
.spark i{position:absolute;left:-10px;top:-10px;width:20px;height:20px;animation:spark .95s cubic-bezier(.2,.7,.3,1) forwards}
.spark svg{display:block;width:100%;height:100%}
@keyframes spark{0%{transform:rotate(var(--r)) translateY(0) scale(.2);opacity:1}
70%{opacity:1}
100%{transform:rotate(var(--r)) translateY(calc(var(--d) * -1)) scale(1);opacity:0}}
.no-float.giveup{animation:none;display:inline-flex;align-items:center;justify-content:center;overflow:visible}
.no-float.giveup .wflag{position:absolute;left:50%;bottom:calc(100% - 12px);width:48px;height:50px;margin-left:-10px;transform-origin:8px 46px;animation:flagup .5s var(--sp) both,flagwave .7s ease-in-out .5s 2}
.wflag .wf{transform-box:fill-box;transform-origin:0 50%;animation:cloth .45s ease-in-out infinite alternate}
@keyframes flagup{from{transform:translateY(26px) rotate(-30deg) scale(.4);opacity:0}
to{transform:none;opacity:1}}
@keyframes flagwave{0%,100%{transform:rotate(0)}
50%{transform:rotate(-14deg)}}
@keyframes cloth{from{transform:skewY(-7deg) scaleX(.94)}
to{transform:skewY(6deg) scaleX(1.05)}}
.no-float.turned{width:auto;height:64px;padding:0 30px;font-size:24px;letter-spacing:2px;background:#C73A62;color:#FFFFFF;animation:ring 1.1s ease-out infinite}
.no-float.turned:hover{background:#A92E51}
.no-float.flip{animation:noflip .6s ease-in-out}
@keyframes noflip{0%{transform:perspective(400px) rotateY(0)}
50%{transform:perspective(400px) rotateY(90deg) scale(1.08)}
100%{transform:perspective(400px) rotateY(0)}}
@keyframes nudge{0%,50%,100%{transform:translateY(0) scale(1)}
60%{transform:translateY(-16px) scale(1.05,.95)}
70%{transform:translateY(0) scale(.96,1.04)}
80%{transform:translateY(-7px)}
90%{transform:translateY(0)}}
.btn-yes.nudge{animation:nudge 1.6s ease-in-out infinite}
.btn-yes.hot.nudge{animation:nudge 1.6s ease-in-out infinite,ring 1.1s ease-out infinite}
.btn-yes.nudge::after{content:"按這裡就對了";position:absolute;left:50%;bottom:calc(100% + 14px);white-space:nowrap;padding:5px 14px;border-radius:999px;background:#2A1A1F;color:#FFFFFF;font-size:14px;font-weight:700;letter-spacing:1px;pointer-events:none;animation:tipIn .4s var(--sp) both}
@keyframes tipIn{from{opacity:0;transform:translate(-50%,8px) scale(.8)}
to{opacity:1;transform:translate(-50%,0)}}
.mochi-wrap{position:relative;display:flex;justify-content:center}
.mochi-btn{display:block;border:0;background:transparent;padding:0;cursor:pointer;border-radius:40%;transform-origin:50% 92%}
.mochi-btn .mochi{display:block}
.mochi-btn.boing{animation:boing .5s var(--sp)}
.mochi-btn.wake{animation:hop .55s var(--sp)}
@keyframes boing{0%{transform:scale(1)}
30%{transform:scale(1.12,.86)}
55%{transform:scale(.93,1.08)}
80%{transform:scale(1.03,.97)}
100%{transform:scale(1)}}
@keyframes hop{0%{transform:none}
35%{transform:translateY(-22px) scale(.95,1.06)}
65%{transform:translateY(0) scale(1.08,.92)}
100%{transform:none}}
.m-bubble{position:absolute;left:80%;bottom:74%;z-index:3;pointer-events:none}
.mb-in{display:block;position:relative;white-space:nowrap;padding:9px 16px;border:3px solid #2A1A1F;border-radius:18px 18px 18px 4px;background:#FFFFFF;box-shadow:0 4px 0 #2A1A1F;font-family:"LXGW WenKai TC","Kaiti TC","BiauKai","DFKai-SB","KaiTi","STKaiti","Kaiti SC","Songti TC","SimSun",serif;font-size:19px;font-weight:700;color:#2A1A1F;transform-origin:0 100%;opacity:0;transform:scale(.3)}
.m-bubble.on .mb-in{animation:bubIn .45s var(--sp) forwards}
.m-bubble.off .mb-in{animation:bubOut .25s ease-in forwards}
@keyframes bubIn{0%{opacity:0;transform:scale(.3) rotate(-8deg)}
100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes bubOut{from{opacity:1;transform:scale(1)}
to{opacity:0;transform:scale(.6) translateY(6px)}}
.mochi .st{opacity:0;transition:opacity .2s}
.mochi.m-sweat .st-sweat,.mochi.m-cry .st-cry,.mochi.m-shy .st-shy,.mochi.m-sleep .st-sleep,.mochi.m-happy .st-happy{opacity:1}
.mochi.m-cry .calm,.mochi.m-shy .calm,.mochi.m-sleep .calm,.mochi.m-happy .calm,.mochi.m-sweat .calm-m{opacity:0}
.mochi.shock .st{opacity:0}
.mochi .sw,.mochi .td,.mochi .zz,.mochi .hp,.mochi .frown{transform-box:fill-box;transform-origin:50% 50%}
.mochi .sw{animation:sweat 1.8s ease-in infinite}
.mochi .sw2{animation-delay:.9s}
@keyframes sweat{0%{transform:translateY(-4px) scale(.6);opacity:0}
15%{opacity:1;transform:translateY(0) scale(1)}
70%{opacity:1}
100%{transform:translateY(16px) scale(.9);opacity:0}}
.mochi .tear-s{stroke-dasharray:9 7;animation:tearflow .5s linear infinite}
@keyframes tearflow{to{stroke-dashoffset:-16}}
.mochi .td{animation:tdrop .9s ease-in infinite}
.mochi .td2{animation-delay:.45s}
@keyframes tdrop{0%{transform:translateY(0);opacity:1}
100%{transform:translateY(26px);opacity:0}}
.mochi .frown{animation:tremble .16s linear infinite alternate}
@keyframes tremble{from{transform:translateX(-.9px)}
to{transform:translateX(.9px)}}
.mochi.m-cry .mochi-body{animation:sob 1s ease-in-out infinite}
@keyframes sob{0%,50%,100%{transform:none}
25%{transform:translateY(2px) scale(1.02,.98)}
75%{transform:translateY(1.5px) scale(1.015,.985)}}
.mochi.m-sleep .mochi-body{animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}
50%{transform:scale(1.03,.97)}}
.mochi .snot{transform-box:fill-box;transform-origin:0 50%;animation:snot 3.4s ease-in-out infinite}
@keyframes snot{0%,100%{transform:scale(.35)}
50%{transform:scale(1.25)}}
.mochi .zz{opacity:0;animation:zz 2.7s ease-out infinite}
.mochi .zz2{animation-delay:.9s}
.mochi .zz3{animation-delay:1.8s}
@keyframes zz{0%{transform:translate(0,0) scale(.5);opacity:0}
20%{opacity:1}
100%{transform:translate(14px,-24px) scale(1.1);opacity:0}}
.mochi.m-shy .mochi-body{animation:shyturn .55s var(--sp) forwards}
@keyframes shyturn{0%{transform:none}
100%{transform:translateX(-7px) rotate(-8deg) scale(1.02)}}
.mochi.m-shy .hp{animation:hpop 1.8s ease-out both}
.mochi.m-shy .hp2{animation-delay:.25s}
.mochi.m-shy .hp3{animation-delay:.5s}
@keyframes hpop{0%{transform:translateY(10px) scale(0);opacity:0}
25%{transform:translateY(0) scale(1.25);opacity:1}
100%{transform:translateY(-34px) scale(.9);opacity:0}}
.mochi.m-happy .hp{animation:hfloat 3.2s ease-in-out infinite}
.mochi.m-happy .hp2{animation-delay:1.05s}
.mochi.m-happy .hp3{animation-delay:2.1s}
@keyframes hfloat{0%{transform:translateY(8px) scale(.4);opacity:0}
30%{opacity:1;transform:translateY(0) scale(1)}
100%{transform:translateY(-30px) scale(.8);opacity:0}}
.mochi.shock .mochi-body{animation:jolt .6s cubic-bezier(.3,1.6,.5,1)}
.hearts{transition:opacity .9s}
body.rainy .hearts{opacity:0}
.rain{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .9s;background:linear-gradient(180deg,rgba(120,150,195,.22),rgba(120,150,195,0) 72%)}
body.rainy .rain{opacity:1}
.rain i{position:absolute;top:-40px;display:block;animation:rainfall linear infinite}
.rain i.streak{width:2px;height:26px;border-radius:2px;background:linear-gradient(180deg,rgba(142,183,230,0),#8EB7E6)}
.rain svg{display:block;width:100%;height:auto}
@keyframes rainfall{0%{transform:translateY(-6vh)}
100%{transform:translateY(112vh)}}
.peek{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:0;z-index:20;width:130px;height:150px;pointer-events:none;transform:translateY(125%);transition:transform .4s cubic-bezier(.5,0,.6,.4)}
.peek.on{transform:none;transition:transform .5s var(--sp)}
.pk-win{position:absolute;left:5px;bottom:16px;width:120px;height:124px;overflow:hidden}
.pk-m{position:absolute;left:0;top:0;width:120px;height:124px;transform:translateY(100%);transition:transform .25s ease-in}
.peek.on .pk-m{transform:none;transition:transform .55s var(--sp) .15s}
.peek.bump .pk-m{animation:pkBump .45s var(--sp)}
@keyframes pkBump{0%{transform:none}
35%{transform:translateY(10px) scale(1.04,.94)}
70%{transform:translateY(-6px)}
100%{transform:none}}
.pk-ledge{position:absolute;left:0;bottom:0;width:130px;height:32px;display:block}
.pk-ledge .hand{transform-box:fill-box;transform-origin:50% 100%;transform:translateY(10px) scale(.6);transition:transform .2s}
.peek.on .pk-ledge .hand{transform:none;transition:transform .4s var(--sp) .45s}
.pk-bub{position:absolute;right:118px;bottom:26px;width:max-content;max-width:min(260px,calc(100vw - 150px));box-sizing:border-box;padding:10px 14px;border:3px solid #2A1A1F;border-radius:18px;background:#FFFFFF;box-shadow:0 4px 0 #2A1A1F;font-family:"LXGW WenKai TC","Kaiti TC","BiauKai","DFKai-SB","KaiTi","STKaiti","Kaiti SC","Songti TC","SimSun",serif;font-size:18px;font-weight:700;line-height:1.45;color:#2A1A1F;transform-origin:100% 80%;opacity:0;transform:scale(.3)}
.pk-bub::after{content:"";position:absolute;right:-11px;bottom:14px;width:14px;height:14px;box-sizing:border-box;background:#FFFFFF;border-top:3px solid #2A1A1F;border-right:3px solid #2A1A1F;transform:rotate(45deg) skew(10deg,10deg)}
.pk-bub.pop{animation:bubIn .45s var(--sp) forwards}
.peek:not(.on) .pk-bub{visibility:hidden}
.pk-acts{display:flex;gap:8px;flex-wrap:wrap}
.peek.has-acts .pk-acts{margin-top:8px}
.peek.has-acts .pk-bub{pointer-events:auto}
.pk-acts button{height:36px;padding:0 14px;border:2px solid #2A1A1F;border-radius:999px;background:#C73A62;color:#FFFFFF;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Source Han Sans TC","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 3px 0 #2A1A1F}
.pk-acts button.alt{background:#FFFFFF;color:#2A1A1F}
.pk-acts button:active{transform:translateY(2px);box-shadow:0 1px 0 #2A1A1F}
.pk-m .v{display:none}
.peek.pv-heart .v-heart,.peek.pv-beard .v-beard,.peek.pv-star .v-star,.peek.pv-think .v-think,.peek.pv-witch .v-witch,.peek.pv-santa .v-santa{display:inline}
.peek.pv-heart .v-e0,.peek.pv-beard .v-e0,.peek.pv-star .v-e0,.peek.pv-think .v-e0{display:none}
.pk-m .hx,.pk-m .sx,.pk-m .hat,.pk-m .beard,.pk-m .look{transform-box:fill-box;transform-origin:50% 50%}
.pk-m .hx{animation:beat .55s ease-in-out infinite}
.pk-m .sx{animation:starEye 1.2s ease-in-out infinite}
@keyframes starEye{0%,100%{transform:scale(1) rotate(0)}
50%{transform:scale(1.25) rotate(20deg)}}
.pk-m .look{animation:look 1.8s ease-in-out infinite}
@keyframes look{0%,40%{transform:translateX(-3px)}
50%,90%{transform:translateX(3px)}
100%{transform:translateX(-3px)}}
.peek.on .pk-m .beard{transform-origin:50% 0;animation:grow .9s var(--sp) .55s both}
@keyframes grow{from{transform:scaleY(0)}
to{transform:scaleY(1)}}
.peek.on .pk-m .hat{transform-origin:50% 100%;animation:hatpop .6s var(--sp) .6s both}
@keyframes hatpop{0%{transform:translateY(-30px) rotate(-20deg);opacity:0}
100%{transform:none;opacity:1}}
body.racing .beat{animation-duration:.55s}
body.racing #pick-has .bigheart{animation:beat .55s ease-in-out infinite}
.fx-layer{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .7s}
.fx-layer.on{opacity:1}
.fx-layer i{position:absolute;display:block}
.fx-layer svg{display:block;width:100%;height:auto}
.fx-snow{background:linear-gradient(180deg,rgba(157,188,224,.22),rgba(157,188,224,0) 65%)}
.fx-snow i{top:-30px;animation:snowfall linear infinite}
@keyframes snowfall{0%{transform:translate3d(0,-5vh,0) rotate(0)}
50%{transform:translate3d(var(--sx),52vh,0) rotate(180deg)}
100%{transform:translate3d(0,110vh,0) rotate(360deg)}}
.fx-hearts i{top:-40px;animation:heartfall linear infinite}
@keyframes heartfall{0%{transform:translate3d(0,-6vh,0) rotate(-20deg)}
100%{transform:translate3d(var(--sx),112vh,0) rotate(200deg)}}
.fx-ghost{background:linear-gradient(180deg,rgba(59,42,74,.14),rgba(59,42,74,0) 70%)}
.fx-ghost i{bottom:-70px;animation:ghostup ease-in-out infinite}
.fx-ghost svg{animation:wob 1.4s ease-in-out infinite alternate}
@keyframes ghostup{0%{transform:translate3d(0,0,0);opacity:0}
10%{opacity:.95}
50%{transform:translate3d(var(--sx),-55vh,0)}
90%{opacity:.95}
100%{transform:translate3d(0,-118vh,0);opacity:0}}
@keyframes wob{from{transform:rotate(-9deg)}
to{transform:rotate(9deg)}}
.wx{width:100%;max-width:300px;box-sizing:border-box;padding:10px 14px;border:2px solid #2A1A1F;border-radius:16px;background:#FFFFFF;display:flex;flex-direction:column;gap:6px}
.wx.pop{animation:wxIn .6s var(--sp)}
@keyframes wxIn{from{opacity:0;transform:translateY(12px) scale(.94)}
to{opacity:1;transform:none}}
.wx-top{display:flex;align-items:center;gap:10px}
.wx-ic{width:44px;height:44px;flex-shrink:0;overflow:visible}
.wx .ic{display:none}
.wx[data-icon=sun] .ic-sun,.wx[data-icon=snow] .ic-snow,.wx[data-icon=heart] .ic-heart,.wx[data-icon=ghost] .ic-ghost{display:inline}
.sun-rays,.snow-spin{transform-box:view-box;transform-origin:24px 24px;animation:spin 9s linear infinite}
.snow-spin{animation-duration:14s}
@keyframes spin{to{transform:rotate(360deg)}}
.ghost-bob{animation:gbob 2.2s ease-in-out infinite}
@keyframes gbob{0%,100%{transform:translateY(0)}
50%{transform:translateY(-3px)}}
.wx-body{min-width:0}
.wx-k{font-size:12px;font-weight:700;letter-spacing:3px;color:#8C1D40}
.wx-v{font-size:14px;font-weight:500;color:#2A1A1F;line-height:1.5}
.wx-v b{font-family:"Noto Serif TC","Songti TC","PMingLiU","Noto Serif CJK TC","Source Han Serif TC","Songti SC","SimSun","Noto Serif CJK SC",serif;font-size:18px;font-weight:900;color:#C73A62;font-variant-numeric:tabular-nums}
.wx-v i{font-style:normal;color:#D8C4C9;margin:0 3px}
.wx-p{white-space:nowrap}
.wx-cd{display:flex;align-items:center;gap:6px;padding-top:7px;border-top:2px dashed #F1DDD4;font-size:14px;color:#7A5C63;line-height:1.3}
.wx-cd b,.l-count b{font-family:"Noto Serif TC","Songti TC","PMingLiU","Noto Serif CJK TC","Source Han Serif TC","Songti SC","SimSun","Noto Serif CJK SC",serif;font-size:18px;font-weight:900;color:#2A1A1F;font-variant-numeric:tabular-nums;margin:0 2px}
.clock{width:20px;height:20px;flex-shrink:0}
.clock-m,.clock-h{transform-box:view-box;transform-origin:12px 12px;animation:spin 4s linear infinite}
.clock-h{animation-duration:48s}
.topbar{gap:12px}
.meter{position:relative;flex:0 1 300px;display:flex;align-items:center;gap:8px;min-width:0}
.mt-h{width:22px;height:22px;flex-shrink:0;transform-origin:center}
.meter.up .mt-h{animation:numpop .5s var(--sp)}
.meter.full .mt-h{animation:beat 1s ease-in-out infinite}
.mt-k{font-size:13px;font-weight:700;letter-spacing:2px;color:#8C1D40;white-space:nowrap}
.mt-bar{position:relative;flex:1;min-width:48px;height:12px;border:2px solid #2A1A1F;border-radius:999px;background:#FFFFFF;overflow:hidden}
.mt-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--lv,0%);border-radius:999px;background:linear-gradient(90deg,#F4A7B9,#C73A62);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.mt-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);background-size:220% 100%;animation:shine 1.8s linear infinite}
@keyframes shine{from{background-position:160% 0}
to{background-position:-60% 0}}
.meter.full .mt-bar{box-shadow:0 0 0 3px rgba(199,58,98,.22)}
.mt-v{min-width:3.1em;text-align:right;font-family:"Noto Serif TC","Songti TC","PMingLiU","Noto Serif CJK TC","Source Han Serif TC","Songti SC","SimSun","Noto Serif CJK SC",serif;font-size:16px;font-weight:900;color:#C73A62;font-variant-numeric:tabular-nums}
.mt-plus{position:absolute;right:0;top:-18px;font-size:13px;font-weight:900;color:#C73A62;pointer-events:none;animation:mtplus .95s ease-out forwards}
@keyframes mtplus{0%{opacity:0;transform:translateY(8px) scale(.6)}
25%{opacity:1;transform:translateY(0) scale(1.15)}
100%{opacity:0;transform:translateY(-14px)}}
.env-btn{position:relative}
.env-lock{position:absolute;left:50%;top:60.6%;width:17%;transform:translate(-50%,-58%);pointer-events:none;display:none}
.env-btn.locked .env-lock{display:block}
.env-btn.locked{cursor:not-allowed}
.env-btn.locked .env-svg{filter:saturate(.7) brightness(.97)}
.env-lock svg{display:block;width:100%;height:auto;overflow:visible}
.env-lock .shackle{transform-box:view-box;transform-origin:43px 34px;transition:transform .4s var(--sp)}
.env-lock.rattle{animation:rattle .45s ease-in-out}
@keyframes rattle{0%,100%{transform:translate(-50%,-58%) rotate(0)}
20%{transform:translate(-50%,-58%) rotate(-12deg)}
40%{transform:translate(-50%,-58%) rotate(10deg)}
60%{transform:translate(-50%,-58%) rotate(-7deg)}
80%{transform:translate(-50%,-58%) rotate(4deg)}}
.env-lock.open .shackle{transform:translateY(-9px) rotate(28deg)}
.env-lock.open{animation:lockdrop .55s ease-in .3s forwards}
@keyframes lockdrop{0%{transform:translate(-50%,-58%)}
100%{transform:translate(-50%,40%) rotate(24deg);opacity:0}}
.env-cap.shake{animation:shake .45s ease-in-out}
.env-cap.pop{animation:numpop .5s var(--sp)}