.loader{position:fixed;inset:0;z-index:1000;background:var(--blue-700);overflow:hidden;transition:opacity .5s ease;cursor:pointer}
.loader,.kv{-webkit-user-select:none;user-select:none}
.loader-skip{position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom,0px));margin:0;z-index:2;color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;text-align:center;opacity:0;animation:loader-skip-in .6s ease-out 1.2s forwards}
@keyframes loader-skip-in{to{opacity:.7}}
.loader .snow{inset:0}
.loader.is-done{opacity:0;pointer-events:none}
.skip-loader .loader{display:none}.skip-loader body.is-loading{overflow:auto}
.loader-stage{position:absolute;left:50%;top:50%;width:1440px;height:700px;transform:translate(-50%,-50%) scale(var(--ls))}
.loader-logo{position:absolute;left:520px;top:242px;width:400px;height:216px;opacity:0;transition:opacity .6s ease}
.loader.phase-logo .loader-logo{opacity:1}
.loader-scene{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;translate:0 var(--ly,0px)}
.loader.phase-scene .loader-scene{opacity:1}
.loader-tree{position:absolute;left:334px;top:19px;width:801px;max-width:none;z-index:3}
.loader-message{position:absolute;left:555px;top:317px;width:330px;max-width:none;z-index:4}
.loader-hand{position:absolute;max-width:none;opacity:0}
.hand-orange,.hand-cat,.hand-pink{z-index:5;--from:-72px}
.hand-santa,.hand-woman,.hand-child{z-index:6;--from:56px}
.hand-santa{left:795px;top:143px;width:497px}
.hand-woman{left:843px;top:-18px;width:289px}
.hand-child{left:827px;top:423px;width:352px}
.hand-orange{left:241px;top:-43px;width:340px}
.hand-pink{left:191px;top:387px;width:366px}
.hand-cat{left:226px;top:171px;width:385px}
.loader.phase-scene .hand-santa{animation:hand-in .6s cubic-bezier(.22,1,.36,1) .533s both}
.loader.phase-scene .hand-woman{animation:hand-in .6s cubic-bezier(.22,1,.36,1) .653s both}
.loader.phase-scene .hand-child{animation:hand-in .6s cubic-bezier(.22,1,.36,1) .773s both}
.loader.phase-scene .hand-orange{animation:hand-in .55s cubic-bezier(.16,1,.3,1) .533s both}
.loader.phase-scene .hand-cat{animation:hand-in .55s cubic-bezier(.16,1,.3,1) .613s both}
.loader.phase-scene .hand-pink{animation:hand-in .55s cubic-bezier(.16,1,.3,1) .693s both}
@keyframes hand-in{from{opacity:0;translate:var(--from) 0}to{opacity:1;translate:0 0}}
@media(max-width:700px){
 .loader-stage{width:375px;height:667px}
 .loader-logo{left:47.5px;top:257.9px;width:280px;height:151.2px}
 .loader-tree{left:-186px;top:28px;width:748px}
 .loader-message{left:80px;top:267px;width:216px}
 .hand-orange,.hand-cat,.hand-pink{--from:-38px}
 .hand-santa,.hand-woman,.hand-child{--from:30px}
 .hand-santa{left:241px;top:189px;width:265px}
 .hand-woman{left:243px;top:115px;width:154px}
 .hand-child{left:241px;top:361px;width:188px}
 .hand-orange{left:-45px;top:108px;width:181px}
 .hand-pink{left:-30px;top:372px;width:192px}
 .hand-cat{left:-82px;top:216px;width:205px}
}

.kv{position:relative;overflow:hidden;background:var(--blue-700);height:calc(712px * var(--s));isolation:isolate}
.kv-stage{position:absolute;top:0;left:50%;width:1440px;height:700px;transform:translateX(-50%) scale(var(--s));transform-origin:50% 0}
.kv .snow{left:-1000px;top:0;width:3440px;height:100%;z-index:4}
.kv-stage>*{position:absolute}
.kv-forest{left:-137px;top:48px;width:1720px;max-width:none;z-index:3}
.kv-snowflake{left:1216px;top:60px;width:15px;z-index:4}
.tree-column{inset:0;z-index:5;pointer-events:none}
.tree{position:absolute;left:520px;top:16px;width:1127.7px;height:1011px;pointer-events:auto;touch-action:manipulation}
.tree-art{position:absolute;left:0;top:-2.97%;width:100%;height:102.97%;max-width:none;pointer-events:none}
.slot-layer,.stamp-layer,#hand-action-layer{position:absolute;inset:0;pointer-events:none}
.tree-front{inset:0;z-index:12;pointer-events:none}.tree-front .tree{pointer-events:none}
.slot{position:absolute;aspect-ratio:360/374;pointer-events:auto;transition:filter .18s var(--ease)}
.slot-base{position:absolute;inset:0;width:100%;height:100%}
.slot-inner{position:absolute;inset:0;transform-origin:50% 6%}
.slot.is-new .slot-inner{animation:orn-swing 1s ease-out .15s both}
.slot.is-new .toy-art{animation:toy-bounce .6s cubic-bezier(.34,1.56,.64,1) .15s both}
@keyframes orn-swing{0%{rotate:0deg}20%{rotate:9deg}42%{rotate:-6deg}62%{rotate:3.5deg}80%{rotate:-1.5deg}100%{rotate:0deg}}
@keyframes toy-bounce{0%{scale:.4;opacity:0}60%{scale:1.12;opacity:1}100%{scale:1;opacity:1}}
.kv.is-complete .slot-inner{animation:orn-shine .7s ease-out calc(.45s + var(--ci,0) * .1s) both}
@keyframes orn-shine{0%,100%{filter:none;scale:1}40%{filter:brightness(1.25) drop-shadow(0 0 14px #fff3aa);scale:1.08}}
.star-burst{position:absolute;left:49.9%;top:2.2%;width:24%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,rgba(255,250,210,.95) 0,rgba(255,214,90,.6) 22%,rgba(255,200,61,.18) 48%,rgba(255,200,61,0) 70%);mix-blend-mode:screen;animation:star-burst 1.6s ease-out .3s both}
@keyframes star-burst{0%{opacity:0;scale:.3}25%{opacity:1;scale:1.1}55%{opacity:.85;scale:.95}100%{opacity:0;scale:1.3}}
.kv.is-complete .finish-btn{animation:finish-bounce .8s cubic-bezier(.34,1.56,.64,1) 1.1s both}
@keyframes finish-bounce{0%,100%{scale:1}30%{scale:1.14}55%{scale:.96}75%{scale:1.04}}
.slot{--orn-toy:72%}
.slot .toy-art{position:absolute;left:50%;top:59%;width:calc(var(--orn-toy) * var(--orn-fit,1));height:auto;aspect-ratio:1;transform:translate(calc(-50% + var(--orn-dx,0%)),calc(-50% + var(--orn-dy,0%)));object-fit:contain}
.slot.highlight{filter:drop-shadow(0 0 10px #fff3aa)}
.slot:focus-visible{border-radius:50%;outline-color:var(--green-800);outline-offset:-10px;box-shadow:none}
.free-stamp{position:absolute;transform:translate(-50%,-50%);width:17%;aspect-ratio:1;pointer-events:auto}.free-stamp img{width:100%;height:100%;object-fit:contain}
.kv-sparkles{left:756px;top:130px;width:679px;height:434px;z-index:6;pointer-events:none}
.kv-sparkles img{position:absolute}

.kv-hanging{left:0;top:0;width:1440px;height:700px;z-index:7;pointer-events:none;translate:0 -220px}
.kv-hanging>*{position:absolute;max-width:none}
.hang{transform-origin:50% 0}
.hang-white{left:731px;top:-19px;width:45px}
.hang-stripe{left:798px;top:-57px;width:45px;--swing:1.6deg}
.hang-yellow{left:857px;top:-61px;width:46px;--swing:-1.3deg}
.hang-green{left:1284px;top:-56px;width:44px;--swing:1.8deg}
.hang-flake{width:15px}
.saved-btn{left:1351px;top:-16px;width:50px;height:226px;pointer-events:auto}
.saved-btn img{position:absolute;left:-2px;top:-43px;width:53px;max-width:none}
.saved-btn span{position:absolute;left:24px;top:194px;transform:translateX(-50%);font-size:max(11px,calc(10px / var(--s)));font-weight:700;line-height:1.2;color:var(--neutral-200);white-space:nowrap;text-align:center}

.intro{left:218px;top:104px;width:360px;z-index:11;display:flex;flex-direction:column;align-items:center}
.brand-logo{width:360px;height:194px}
.logo-box{display:block;position:relative}
.logo-box img{position:absolute;left:-4.4%;top:-2.62%;width:104.4%;height:102.22%;max-width:none}
.kv-actions{display:flex;gap:32px;justify-content:center;padding:32px 0}
.kv-action{display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;font-size:max(14px,calc(10px / var(--s)));font-weight:700;line-height:1;white-space:nowrap;transition:transform .2s var(--ease)}
.kv-action img{width:48px;height:48px}
.kv-action:hover{transform:translateY(-2px)}
.sound-wrap{position:relative;display:flex}.sound-wrap>.sound-btn{flex:1}
.sound-btn .sound-on{display:none}.sound-btn[aria-pressed=true] .sound-on{display:block}.sound-btn[aria-pressed=true] .sound-off{display:none}
.sound-btn img{border-radius:50%}
.sound-tip{position:absolute;left:50%;top:calc(100% + 34px);transform:translateX(-50%);z-index:13;padding:10px 18px;border-radius:12px;background:#0a3a60;filter:drop-shadow(1px 0 0 #9db0bf) drop-shadow(-1px 0 0 #9db0bf) drop-shadow(0 1px 0 #9db0bf) drop-shadow(0 -1px 0 #9db0bf) drop-shadow(0 4px 7px rgba(0,0,0,.28));color:#fff;font-size:max(13px,calc(12px / var(--s)));font-weight:500;line-height:1.5;text-align:center;white-space:nowrap;cursor:pointer;opacity:0;visibility:hidden}
.sound-tip b{display:block;font-weight:500}
.sound-tip img{display:none}
.sound-tip::before{content:"";position:absolute;left:calc(50% - 8px);top:-8px;width:16px;height:9px;background:#0a3a60;clip-path:polygon(50% 0,100% 100%,0 100%)}
.kv.is-started:not(.tip-done) .sound-tip{visibility:visible;animation:msg-in .45s ease-out calc(var(--kv-wait) + .3s) both}
.kv.tip-done .sound-tip{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.sound-btn{--ring:18px}
.kv.is-started:not(.tip-done) .sound-btn img{animation:sound-ring 1.9s ease-out calc(var(--kv-wait) + .3s) infinite}
@keyframes sound-ring{0%{box-shadow:0 0 0 0 rgba(255,200,61,1)}70%,100%{box-shadow:0 0 0 var(--ring) rgba(255,200,61,0)}}

.kv-message{left:1081px;top:438px;width:max(229px,calc(196px / var(--s)));transform:translateX(-50%);z-index:12;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px 24px;border-radius:20px;background:var(--gold-200);filter:drop-shadow(0 4px 2px rgba(0,0,0,.25));color:var(--body-dark);font-size:max(16px,calc(14px / var(--s)));font-weight:700;line-height:1.5;white-space:nowrap;opacity:0;pointer-events:none;--msg-in:.73s;--bobs:3}
.kv-message.bp-pc{width:max-content}
.kv-message.bp-sp{display:none}
.kv-message small{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:6px;font-size:max(11px,.75em);font-weight:500;line-height:1.4;color:color-mix(in srgb,var(--body-dark) 75%,var(--gold-200))}
.kv-message-share{width:1.15em;height:1.15em;flex:none;background:currentColor;-webkit-mask:url(../img/icon-share.svg) center/contain no-repeat;mask:url(../img/icon-share.svg) center/contain no-repeat}
.kv-message>img{position:absolute;left:calc(50% - 20px);top:calc(100% - 4px);width:40px;height:14px;transform:scaleY(-1)}
.finish-btn{left:1081px;top:482px;translate:-50% 0;z-index:8;min-width:240px;min-height:50px;padding:12px 32px;border-radius:999px;background:var(--red-400);filter:drop-shadow(0 4px 0 var(--red-700));color:#fff;font-size:max(16px,calc(12px / var(--s)));font-weight:800;line-height:1.5;white-space:nowrap;transition:transform .2s var(--ease),opacity .3s}
.finish-btn{padding-block:8px}.finish-btn small{display:flex;align-items:center;justify-content:center;gap:4px;font-size:.75em;font-weight:700;line-height:1.4}
.finish-btn small img{width:1.15em;height:1.15em;flex:none}
.finish-btn:hover{transform:translateY(-2px)}.finish-btn:active{transform:translateY(2px)}
.shuffle-btn{left:1244px;top:486px;translate:-50% 0;z-index:10;display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-size:max(11px,calc(10px / var(--s)));font-weight:700;line-height:1.5;transition:opacity .3s}
.shuffle-btn{white-space:nowrap}.shuffle-btn img{width:24px;height:20px}
.kv:not(.msg-done) .finish-btn,.kv:not(.msg-done) .shuffle-btn{opacity:0;visibility:hidden}

.kv-slider{left:0;top:620px;width:1440px;height:179px;z-index:9}
.kv-slider-bg{position:absolute;left:-100px;top:-1px;width:1796px;max-width:none}
.tray{position:absolute;left:0;right:0;top:-66px;display:flex;justify-content:center;gap:24px;padding:12px 0}
.toy{position:relative;flex:none;width:134px;height:134px;transform:translateY(var(--toy-y,0)) rotate(var(--toy-tilt,0deg));cursor:grab}
.toy::before{content:"";position:absolute;inset:0;border-radius:16px;background:var(--neutral-100);box-shadow:0 2px 3px rgba(0,0,0,.29),14px -4px 20px rgba(0,0,0,.25)}
.toy::after{content:"";position:absolute;inset:2.99% 2.24% 2.24% 2.99%;border:2px dashed var(--red-200);border-radius:13px}
.toy .toy-ribbon{position:absolute;left:26.87%;top:-10.07%;width:47.5%;height:auto;z-index:1}
.toy .toy-art{position:absolute;left:50%;top:50%;width:80%;height:80%;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 3.6px 2.4px rgba(107,69,38,.17));z-index:2}
.toy{transition:translate .22s var(--ease)}.toy:hover,.toy:focus-visible{translate:0 -5px}
.toy:active{cursor:grabbing}
.toy.toy-pop{animation:toy-pop-in .4s var(--ease) both;animation-delay:var(--pop-delay,0ms)}
@keyframes toy-pop-in{0%{opacity:0;transform:translateY(calc(var(--toy-y,0px) + 16px)) rotate(var(--toy-tilt,0deg)) scale(.6)}65%{opacity:1;transform:translateY(calc(var(--toy-y,0px) - 3px)) rotate(var(--toy-tilt,0deg)) scale(1.06)}100%{opacity:1;transform:translateY(var(--toy-y,0px)) rotate(var(--toy-tilt,0deg)) scale(1)}}
.kv::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(40px * var(--s));background:#eff6fa;z-index:0}

.kv{--kv-wait:.9s}
.kv.is-started .slot{animation:orn-in .62s linear var(--od,0s) both}
@keyframes orn-in{0%{opacity:0;translate:0 var(--orn-y,-32px);animation-timing-function:cubic-bezier(.16,1,.3,1)}62%{opacity:1;translate:0 calc(var(--orn-y,-32px) * -.156);animation-timing-function:ease-out}82%{translate:0 calc(var(--orn-y,-32px) * .0625);animation-timing-function:ease-out}100%{opacity:1;translate:0 0}}
.kv.is-started .kv-hanging{animation:hang-drop 1.02s calc(.51s + var(--kv-wait)) both}
@keyframes hang-drop{0%{translate:0 -220px;animation-timing-function:cubic-bezier(.48,0,.82,.72)}51%{translate:0 0;animation-timing-function:cubic-bezier(.08,.68,.22,1)}66.7%{translate:0 -22px;animation-timing-function:ease-in-out}81.4%{translate:0 0;animation-timing-function:cubic-bezier(.08,.68,.22,1)}91.2%{translate:0 -6px;animation-timing-function:ease-out}100%{translate:0 0}}
.kv.is-started .hang-stripe,.kv.is-started .hang-yellow,.kv.is-started .hang-green{animation:swing .9s ease-in-out infinite alternate}
@keyframes swing{from{rotate:calc(var(--swing) * -1)}to{rotate:var(--swing)}}
.kv.is-started .kv-message{animation:msg-in .45s ease-out calc(var(--msg-in) + var(--kv-wait)) both,msg-bob .6s ease-in-out calc(var(--msg-in) + var(--kv-wait) + .75s) var(--bobs)}
.kv.msg-done .kv-message{animation:none;opacity:0;transition:opacity .3s}
@keyframes msg-in{from{opacity:0}to{opacity:1}}
@keyframes msg-bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
.kv-sparkles img{opacity:0}
.kv.is-started .kv-sparkles img{animation:spark-pop .45s ease-out calc(var(--d) + var(--kv-wait)) both,spark-twinkle var(--tw,6s) ease-in-out calc(var(--twd,2s) + var(--kv-wait)) infinite}
@keyframes spark-twinkle{0%,82%,100%{opacity:1;scale:1}87%{opacity:1;scale:1.45}92%{opacity:.45;scale:.8}96%{opacity:1;scale:1.1}}
.kv.is-started .hang-flake,.kv.is-started .kv-snowflake{animation:flake-spin 10s linear var(--fd,0s) infinite,flake-glow 4.5s ease-in-out var(--fd,0s) infinite}
@keyframes flake-spin{to{rotate:360deg}}
@keyframes flake-glow{0%,100%{opacity:1;scale:1}50%{opacity:.55;scale:.85}}
@keyframes spark-pop{0%{opacity:0;scale:.72}40%{opacity:1;scale:1.24}70%{opacity:.58;scale:.94}100%{opacity:1;scale:1}}

@media(max-width:700px){
 .kv{height:calc(655px * var(--s))}
 .kv-stage{width:375px;height:643px}
 .kv .snow{left:-600px;width:1575px}
 .kv-forest{left:-79px;top:112px;width:533px}
 .tree{left:-172.1px;top:148.7px;width:721.1px;height:646.5px}
 .kv-sparkles{left:11px;top:169px;width:345px;height:377px}
 .kv-hanging{width:375px;height:643px}
 .saved-btn{left:309px;top:-18px}
 .intro{display:contents}
 .brand-logo{position:absolute;left:88px;top:32px;width:200px;height:108px;z-index:8}
 .kv-actions{position:absolute;left:8px;top:20px;z-index:11;flex-direction:column;gap:12px;padding:0}
 .kv-action{gap:6px;font-size:11px}.kv-action img{width:32px;height:32px}
 .sound-tip{left:calc(100% + 10px);top:8px;transform:none;padding:10px 24px;border-radius:12px;font-size:13px;line-height:1.5;text-align:left;max-width:calc(100vw - 100px)}
 .sound-tip::before{left:-8px;top:calc(50% - 8px);width:9px;height:16px;clip-path:polygon(0 50%,100% 0,100% 100%)}
 .sound-btn{--ring:10px}
 .kv-message{left:187.5px;top:444px;padding:12px 20px;border-radius:18px;font-size:15px;--msg-in:.41s;--bobs:6}
 .kv-message>img{left:calc(50% - 18px);width:36px;height:12px}
 .kv-message.bp-sp{display:flex}
 .slot{--orn-y:-20px}
 .finish-btn{left:188px;top:477px;min-width:200px;min-height:44px;padding:8px 24px;z-index:11}
 .shuffle-btn{left:338px;top:485px}
 .kv-slider{top:603px;width:375px;height:30px}
 .kv-slider-bg{left:-145.5px;top:-8px;width:667px}
 .tray{top:-54px;justify-content:flex-start;gap:15px;padding:12px 9px 16px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
 .tray::-webkit-scrollbar{display:none}
 .toy{width:88px;height:88px}
 .toy::before{border-radius:11px}.toy::after{border-radius:9px;border-width:1.5px}
 .kv::before{display:none}
}

.toast{position:fixed;inset:auto auto 50% 50%;margin:0;border:0;z-index:70;transform:translate(-50%,50%) scale(.96);max-width:calc(100% - 32px);width:max-content;padding:8px 16px;background:var(--gold-200);color:var(--body-dark);border-radius:16px;font-size:14px;font-weight:700;line-height:1.5;text-align:center;white-space:pre-line;filter:drop-shadow(0 4px 2px rgba(0,0,0,.25));opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.visible{opacity:1;transform:translate(-50%,50%) scale(1)}
.toast.is-big{padding:9px 20px;font-size:16px}

.drag-ghost{position:fixed;z-index:60;pointer-events:none;width:104px;height:104px;transform:translate(-50%,-50%)}
.drag-ghost>img{position:absolute;width:62%;height:62%;right:0;top:42%;object-fit:contain;filter:drop-shadow(0 3px 3px #00302033)}
.drag-hand{position:absolute;width:190px;left:calc(50% - 159px);top:-18px}.drag-hand img{width:100%;height:auto}
.hand-placing{position:absolute;width:104px;height:104px;transform:translate(-50%,-50%);pointer-events:none;z-index:3;opacity:0;animation:place-hand 1s var(--ease) both}
.hand-placing .drag-hand img{transform:none}
@media(max-width:700px){.hand-placing .drag-hand{width:152px;left:calc(50% - 127.2px);top:-14.4px}}
@keyframes place-hand{0%{opacity:0;translate:-25px 35px}17.5%,68.5%{opacity:1;translate:0 0}100%{opacity:0;translate:-20px 35px}}
.sparkle{position:absolute;font-size:30px;color:var(--gold-200);pointer-events:none;animation:sparkle .7s ease-out both}
@keyframes sparkle{0%{opacity:0;scale:.6}40%{opacity:1;scale:1}100%{opacity:0;scale:1.15}}

.modal-hand{--modal-w:440px}
.hand-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hand-choice{height:121px;border-radius:16px;background:var(--neutral-200);display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:16px;color:var(--green-600);font-size:12px;font-weight:800;white-space:nowrap}
.hand-choice img{width:64px;height:64px}
.hand-choice[aria-pressed=true]{background:var(--green-100);border:2px solid var(--green-600);padding-top:14px}

.modal-help{--modal-w:760px}
.help-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.help-list li{display:flex;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:2px dashed var(--green-200)}
.help-no{flex:none;width:20px;height:20px;border-radius:50%;background:var(--red-400);color:#fff;font-size:14px;font-weight:700;line-height:1;display:grid;place-items:center}
.help-list p{flex:1;font-size:14px;line-height:1.5}
.help-list .nowrap{white-space:nowrap}
.help-list img{flex:none;border-radius:8px;object-fit:cover}
.help-note{font-size:12px;margin-top:-8px}
@media(max-width:700px){.help-list{grid-template-columns:1fr}.help-list li{gap:8px}}

.modal-saved{--modal-w:760px}
.modal-saved .modal-card{gap:16px}
.saved-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.saved-item{display:flex;align-items:flex-start;gap:16px;padding-bottom:24px;border-bottom:2px dashed var(--green-200)}
.saved-info{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.saved-info img{width:20px;flex:none}
.saved-info strong{display:block;font-size:18px;font-weight:700;overflow-wrap:anywhere}
.saved-info small{display:block;font-size:11px;color:var(--green-300);margin-top:2px}
.saved-actions{display:flex;gap:8px;justify-content:flex-end;flex:none}
.saved-actions button{border-radius:8px;padding:8px 32px;font-size:14px;font-weight:700;line-height:1.5;color:var(--green-600)}
.saved-actions .saved-load{background:var(--gold-200)}
.saved-actions .saved-view{border:1px solid var(--green-200)}
.saved-actions .saved-delete{padding:0;width:37px;height:34px}.saved-actions .saved-delete img{width:37px;height:34px}
.empty-message{font-size:14px;line-height:2;padding:8px 0;text-align:center}
@media(max-width:700px){
 .modal-saved .modal-card{gap:8px}
 .saved-list{gap:16px;border-top:2px dashed var(--green-200);padding-top:16px}
 .saved-item{flex-direction:column;gap:12px;padding-bottom:16px}.saved-info{width:100%}
 .saved-actions{width:100%}.saved-actions button{font-size:12px}
}

.modal-result{--modal-w:940px}
.modal-result .modal-card{gap:16px}
.result-body{display:flex;gap:24px;align-items:flex-start}
.result-share{flex:none;width:320px;display:flex;flex-direction:column;gap:16px}
.preview-wrap{width:100%;aspect-ratio:1;border-radius:14px;background:var(--blue-700);overflow:hidden;display:grid;place-items:center}
.preview-wrap img{width:100%;height:100%;object-fit:cover;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.loading{font-size:13px;padding:20px;line-height:1.8;color:#fff;text-align:center}
.result-form{display:flex;flex-direction:column;gap:8px}
.form-label{font-size:12px;font-weight:800;color:var(--red-400);text-align:center}
.form-label span{white-space:nowrap}
.result-form input{width:100%;background:#fff;border:2px solid var(--red-400);border-radius:8px;padding:12px;font-size:16px;font-weight:700;color:var(--body-dark)}
.result-form input:focus{outline:0;box-shadow:none;border-color:var(--red-700)}
.result-form input::placeholder{color:var(--green-300)}
#save-favorite-btn{width:100%;font-size:16px}
.modal-result .btn{font-weight:700}
.export-actions{display:flex;gap:8px}.export-actions .btn{flex:1;min-width:0}
.share-note{position:relative;margin:8px 0 16px;padding:10px 12px;border-radius:12px;background:var(--green-100);font-size:13px;line-height:1.6;color:var(--green-600);text-align:center}
.share-note::before{content:"";position:absolute;left:calc(25% - 2px);top:-8px;translate:-50% 0;border:8px solid transparent;border-top:0;border-bottom-color:var(--green-100)}
@media(max-width:340px){.share-note{font-size:12px}}
.lineup{flex:1;align-self:stretch;min-width:0;padding:0 0 16px;display:flex;flex-direction:column;gap:8px}
.lineup h3{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--green-600);color:#fff;border-radius:8px;font-size:18px;font-weight:800;line-height:1.4;text-align:center;padding:8px 0;white-space:nowrap}
.lineup-sparkle{flex:none;width:22px;height:22px;background:url(../img/sparkle.svg) 0 100%/13px auto no-repeat,url(../img/sparkle.svg) 100% 0/8px auto no-repeat,url(../img/sparkle.svg) 85% 100%/6px auto no-repeat}
.lineup-sparkle.is-r{scale:-1 1}
.lineup-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lineup-item{padding:16px 0;display:flex;align-items:center;gap:16px;border-bottom:2px dashed var(--green-200)}
.lineup-item>img{width:48px;height:48px;flex:none;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(107,69,38,.17))}
.lineup-body{display:contents}
.lineup-name{flex:1;min-width:0;font-size:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lineup-actions{display:flex;gap:4px;flex:none}
.lineup-actions a{display:inline-flex;align-items:center;justify-content:center;gap:2px;padding:8px 8px 8px 12px;border-radius:8px;color:#fff;font-size:12px;font-weight:700;line-height:1.5;text-decoration:none;white-space:nowrap}
.lineup-actions img{width:10px;height:10px;margin:3px}
.lineup-buy{background:var(--red-500)}.lineup-detail{background:var(--green-600)}
@media(max-width:700px){
 .modal-result{padding:32px 20px 24px}
 .result-body{flex-direction:column;gap:16px}
 .result-share{width:100%}
 .preview-wrap{border-radius:16px}
 #save-favorite-btn{font-size:14px}
 .lineup{width:100%;padding:16px 0}
 .lineup h3{background:none;color:var(--green-600);border-radius:0;font-size:16px;padding:8px 0;border-bottom:2px dashed var(--green-200)}
 .lineup-list{gap:0}
 .lineup-item{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px 12px;padding:16px 0}
 .lineup-name{font-size:13px;font-weight:500}
 .lineup-actions{grid-column:1/-1}
 .lineup-actions a{flex:1;min-width:0;position:relative;padding:10px 32px;line-height:1}
 .lineup-actions img{position:absolute;right:11px;top:50%;margin:0;translate:0 -50%}
}

@media(min-width:701px) and (max-width:1023px) and (orientation:portrait){
 .kv{height:calc(980px * var(--s))}
 .kv-stage{width:768px;height:980px}
 .kv .snow{left:-1300px;width:3368px}
 .kv-forest.bp-pc{left:-420px;top:360px}
 .kv-snowflake{left:640px;top:70px}
 .tree{left:52.5px;top:140px;width:1000px;height:897px}
 .kv-sparkles{left:0;top:0;width:768px;height:980px}
 .kv-hanging{width:768px;height:980px}
 .hang-white{left:330px;top:-30px}.hang-stripe{left:395px;top:-62px}.hang-yellow{left:450px;top:-66px}.hang-green{left:600px;top:-60px}
 .hang-flake{display:none}
 .saved-btn{left:692px;top:-30px}
 .intro{left:44px;top:145px;width:290px}
 .brand-logo{width:270px;height:146px}
 .kv-actions{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:20px;padding:24px 0;translate:-20px 0}
 .kv-actions>.sound-wrap{order:1}.kv-actions>#reset-tree-btn{order:2}
 .kv-action{font-size:13px;gap:10px}.kv-action img{width:44px;height:44px}
 .sound-tip{left:-8px;top:calc(100% + 14px);transform:none}.sound-tip::before{left:22px}
 .finish-btn{left:534.3px;top:709px;min-width:220px}
 .kv-message{left:534.3px;top:665px}
 .shuffle-btn{left:710.3px;top:715.6px}
 .kv-slider{top:880px;width:768px}
 .kv-slider-bg{left:-514px}
 .tray{top:-74px;justify-content:flex-start;gap:16px;padding:12px 16px 16px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
 .tray::-webkit-scrollbar{display:none}
 .toy{width:120px;height:120px}
 .kv::before{height:calc(40px * var(--s))}
}

.tray-nav{display:none}
@media(max-width:1023px) and (orientation:portrait),(max-width:700px){
 .tray{left:var(--tray-left,0);right:auto;width:var(--tray-width,100%)}
 .tray>.toy:first-child{margin-left:auto}.tray>.toy:last-child{margin-right:auto}
}
@media(min-width:701px) and (max-width:1023px) and (orientation:portrait){
 .tray-nav:not([hidden]){display:block;position:absolute;left:var(--tray-left,0);width:var(--tray-width,100%);top:-18px;height:0;z-index:3;pointer-events:none}
 .tray-arrow{position:absolute;top:0;width:32px;height:32px;border-radius:50%;background:var(--red-500);box-shadow:0 4px 4px rgba(0,0,0,.16);font-size:0;pointer-events:auto;transition:opacity .2s}
 .tray-arrow::before,.tray-arrow::after{content:"";position:absolute;left:11px;top:14.5px;width:10px;height:3px;border-radius:1.5px;background:var(--neutral-100);transform-origin:8.5px 50%}
 .tray-arrow::before{rotate:45deg}.tray-arrow::after{rotate:-45deg}
 .tray-arrow#tray-prev{left:8px;scale:-1 1}.tray-arrow#tray-next{right:8px}
 .tray-arrow:disabled{opacity:0;pointer-events:none}
}

@media(min-width:701px) and (max-width:959px){
 .result-body{flex-direction:column}.result-share{width:100%}.lineup{width:100%}
 .preview-wrap{max-width:480px;margin:0 auto}
}

@media(prefers-reduced-motion:reduce){
 .kv-hanging{translate:0 0}.kv-sparkles img{opacity:1}.slot{opacity:1;translate:0 0}
 .kv:not(.msg-done) .kv-message{opacity:1}
 .kv.is-started:not(.tip-done) .sound-tip{opacity:1}
 .kv.is-started:not(.tip-done) .sound-btn img{box-shadow:0 0 0 3px rgba(255,200,61,1)}
 .hand-placing{display:none}
 .loader-hand{opacity:1}
}