.scene-draw{padding:24px 38px 24px;max-width:1160px;margin:auto}.happy-draw{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"copy play" "collection collection";column-gap:65px;max-width:1040px;margin:0 auto;text-align:center}.draw-panel-copy{grid-area:copy;align-self:center;padding:0 0 45px 35px;text-align:left}.draw-panel-copy h2{margin:0 0 24px;color:#95607e;font-size:42px;font-weight:400;line-height:1.7;letter-spacing:.07em}.draw-intro{margin:0;color:#a38096;font-size:13px;line-height:2.1;letter-spacing:.025em}.draw-aside{margin:27px 0 0;color:#c09eaf;font-size:11px;line-height:2.1}.draw-playground{grid-area:play;max-width:370px;width:100%;margin:0 auto}.draw-scene{position:relative;width:240px;max-width:100%;height:260px;margin:0 auto}.scene-ring{position:absolute;top:8px;left:8px;width:224px;height:224px;border:1px solid #e7bfd45c;border-radius:50%;background:radial-gradient(ellipse,#f7e2ee8c,transparent 69%)}.scene-ring::after{content:"";position:absolute;inset:12px;border:1px solid #f2d9e65e;border-radius:50%}.scene-branch{position:absolute;inset:0;width:100%;height:100%;color:#d0a5bb;opacity:.3}.fortune-vessel{position:absolute;inset:0;transform-origin:50% 90%}.bamboo-stick{position:absolute;z-index:1;top:calc(var(--top) * .8);left:var(--left);width:13px;height:143px;border:1px solid #d2a9bd;border-radius:5px 5px 1px 1px;background:linear-gradient(90deg,#f1d9e5,#fff5fa 45%,#edcedd);transform:rotate(var(--tilt));transform-origin:center bottom;box-shadow:1px 0 2px #a8719412}.bamboo-stick::before{content:"";position:absolute;top:8px;left:3px;right:3px;height:19px;border:1px solid #cd95b0;border-radius:2px;background:#e6b7cf80}.bamboo-stick::after{content:"";position:absolute;top:42px;left:5px;width:1px;height:61px;background:linear-gradient(#d4acc0,transparent)}.vessel-mouth{position:absolute;z-index:2;top:96px;left:67px;width:107px;height:20px;border:1px solid #be89a6;border-radius:50%;background:radial-gradient(ellipse,#bd8ca6,#e5bfd2)}.fortune-cylinder{position:absolute;z-index:3;top:106px;left:49px;width:145px;height:143px;border:1px solid #c895af;border-radius:32% 32% 41% 41% / 26% 26% 37% 37%;background-image:linear-gradient(95deg,#f9e6f0c9,#ecc5dcbd),url("peach-fan.jpg");background-size:cover,450px;background-position:center,78% 40%;box-shadow:inset 5px 0 17px #fff4f65c,inset -5px 0 13px #b16b9821}.fortune-cylinder::before{content:"";position:absolute;left:-3px;right:-3px;top:22px;height:5px;border:1px solid #c28b9f;border-radius:5px;background:#f0d7c0;box-shadow:0 2px 0 #ffffff50}.fortune-cylinder::after{content:"";position:absolute;right:-27px;top:16px;width:42px;height:27px;border:2px solid #cb94b2;border-radius:75% 14% 75% 15%;transform:rotate(-12deg);background:#f5dce85c}.vessel-label{position:absolute;top:45px;left:51px;width:34px;height:83px;padding:8px 5px;border:1px solid #cfa4bb7d;border-radius:4px;background:#fff3f9a6;color:#b07595;writing-mode:vertical-rl;font-size:17px;line-height:1.3;letter-spacing:.15em}.vessel-seal{position:absolute;right:20px;bottom:21px;width:20px;height:22px;border:1px solid #c28ca6;border-radius:2px;color:#b47b98;font-size:13px;line-height:20px;transform:rotate(-7deg)}.vessel-shadow{position:absolute;bottom:0;left:35px;width:174px;height:13px;border-radius:50%;background:radial-gradient(ellipse,#b57b9a20,transparent 68%)}.fortune-tray{display:grid;min-height:81px;place-items:center}.fortune-open{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:155px;min-height:78px;padding:7px 16px;border:0;border-radius:34px;background:transparent;color:#b57d9a;font-size:11px;letter-spacing:.16em;cursor:pointer;animation:slip-drop .65s ease-out both}.fortune-slip{display:flex;position:relative;align-items:center;justify-content:center;gap:14px;width:132px;height:35px;border:1px solid #d2a8be;border-radius:20px 4px 20px 4px;background:linear-gradient(#ffeff7,#f1d1e2);box-shadow:2px 3px 0 #b382a115;transform:rotate(-5deg)}.fortune-slip i{width:18px;height:21px;border:1px solid #cc9ab3;color:#bd88a3;font-size:12px;line-height:19px;font-style:normal}.fortune-slip b{color:#b67c99;font-size:13px;font-weight:400;letter-spacing:.12em}.draw-button{min-width:190px;border-radius:24px;background:#a05f85;border-color:#b97f9f;letter-spacing:.12em;font-size:13px}.draw-button:disabled{color:#b89faf;background:#f3e5ed;border-color:#e5cddd;box-shadow:none;cursor:default}.draw-status{min-height:36px;margin:10px 0 0;color:#b18b9f;font-size:11px;line-height:1.9;letter-spacing:.02em}.draw-last{min-height:40px;margin:0 0 5px;padding:8px 11px;border:0;background:transparent;color:#b1819c;font-size:11px;letter-spacing:.06em;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.draw-collection{grid-area:collection;max-width:900px;width:100%;margin:14px auto 0;padding:0 18px;border:1px solid #eddae4;border-radius:14px;background:#fff9fcab;text-align:left}.draw-collection>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;padding:9px 0;color:#a47592;list-style:none;font-size:13px;letter-spacing:.1em;cursor:pointer}.draw-collection>summary::-webkit-details-marker{display:none}.collection-count{flex-shrink:0;color:#c298b0;font-size:11px;letter-spacing:0}.collection-count::after{content:" +"}.draw-collection[open] .collection-count::after{content:" −"}.collection-empty{margin:0 0 18px;color:#b89aad;font-size:12px;line-height:1.9}.collection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}.collection-card{display:flex;width:100%;height:100%;min-height:115px;flex-direction:column;align-items:center;gap:9px;padding:15px 8px;border:1px solid #edd5e2;border-radius:32px 5px 32px 5px;background:#fff9fc;color:#ab7896;cursor:pointer;transition:transform .25s,border-color .25s}.collection-art{width:40px;height:40px}.collection-title{font-size:13px;line-height:1.7;letter-spacing:.08em;overflow-wrap:anywhere}.draw-storage-note{margin:16px 0;color:#b99aab;font-size:10px;line-height:1.9}.is-rolling .fortune-vessel{animation:pouch-sway .3s ease-in-out infinite}.is-rolling .bamboo-stick{animation:paper-rustle .3s ease-in-out infinite alternate}.is-rolling .bamboo-stick:nth-child(odd){animation-delay:-.14s}.draw-dialog{width:calc(100% - 30px);max-width:410px;max-height:92vh;max-height:92svh;padding:0;overflow:hidden;border:1px solid #e4bfd1;border-radius:16px;background:#fff8fb;color:#7d5d73;box-shadow:0 20px 70px #8b567233}.draw-dialog[open]{display:flex;flex-direction:column;animation:unfold .4s ease both}.draw-dialog::backdrop{background:#79556b66;backdrop-filter:blur(5px)}.draw-dialog>.dialog-close{position:absolute;z-index:2;top:6px;right:6px;background:#fff8fbcc}.draw-dialog-scroll{min-height:0;overflow:auto;overscroll-behavior:contain}.draw-result-card{--card-ink:#ac7494;--card-wash:#cf97b416;position:relative;padding:35px 28px 34px;text-align:center;background:radial-gradient(ellipse at 90% 5%,#f0d3e471,transparent 55%),#fff8fb}.draw-result-card::before{content:"";position:absolute;inset:14px;border:1px solid #e9cbdb;border-radius:90px 90px 4px 4px;pointer-events:none}.draw-result-card::after{content:"花";position:absolute;right:26px;bottom:23px;width:20px;height:23px;border:1px solid #ce9cb7;border-radius:2px;color:#bd86a4;font-size:13px;line-height:22px;transform:rotate(-5deg)}.draw-card-kicker{margin:0 0 10px;color:#bf95ad;font-size:11px;letter-spacing:.18em}.draw-card-number{display:inline-block;margin:0;padding:5px 9px;border-bottom:1px solid #e4bed2;color:#c18faa;font-family:var(--serif);font-size:11px;letter-spacing:.23em}.draw-card-art{display:block;width:110px;height:110px;margin:19px auto 17px}.art-wash{fill:var(--card-wash,#cf97b416);stroke:none}.art-lines{fill:none;stroke:var(--card-ink,#ac7494);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.draw-result-card h2{margin:0 0 17px;color:var(--card-ink);font-size:28px;line-height:1.6;letter-spacing:.15em;font-weight:400;overflow-wrap:anywhere}#draw-card-text{max-width:300px;margin:0 auto;color:#795e70;font-size:16px;line-height:2;text-align:left}.draw-card-footer{margin:26px 10px 0 0;color:#c09aac;font-size:10px;line-height:1.9;letter-spacing:.03em}.draw-result-actions{display:flex;gap:10px;flex-shrink:0;padding:13px 17px max(15px,env(safe-area-inset-bottom));border-top:1px solid #eed9e5}.draw-result-actions>button{flex:1;min-width:0}.draw-save{min-height:44px;padding:8px;border:1px solid #d9b6cc;border-radius:23px;background:transparent;color:#b1819e;font-size:12px;letter-spacing:.08em;cursor:pointer}.draw-result-actions .draw-again{border-color:#b97f9f;border-radius:23px;background:#a05f85;color:#fff9fc;letter-spacing:.08em;font-size:12px}.draw-save:disabled{opacity:.6;cursor:progress}.draw-image-save{margin:0 20px 15px}.draw-image-save summary{min-height:44px;padding:10px 0;text-align:center;color:#b78da6;font-size:11px;cursor:pointer}.draw-export-preview{display:block;width:100%;height:auto}.draw-export-status{margin:0 20px 14px;color:#b28ba2;font-size:11px;line-height:1.8;text-align:center}.draw-export-status:empty{display:none}.draw-button:focus-visible,.fortune-open:focus-visible,.draw-last:focus-visible,.collection-card:focus-visible,.draw-collection>summary:focus-visible,.draw-save:focus-visible,.draw-image-save>summary:focus-visible{outline:2px solid #c797b3;outline-offset:4px}
@keyframes pouch-sway{0%,100%{transform:rotate(-3deg) translateX(-2px)}50%{transform:rotate(3deg) translateX(2px)}}@keyframes paper-rustle{from{transform:translateY(0) rotate(var(--tilt))}to{transform:translateY(-7px) rotate(calc(var(--tilt) + 3deg))}}@keyframes slip-drop{0%{opacity:0;transform:translateY(-24px) rotate(-10deg)}70%{opacity:1;transform:translateY(3px) rotate(3deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@media(max-width:1000px) and (min-width:701px){.happy-draw{column-gap:30px}.draw-panel-copy{padding-left:5px}.draw-panel-copy h2{font-size:35px}}
@media(max-width:700px){.scene-draw{padding:20px 22px 25px}.happy-draw{display:block}.draw-panel-copy{padding:0 0 12px;text-align:center}.draw-panel-copy .eyebrow{font-size:10px;margin-bottom:10px}.draw-panel-copy h2{margin:0 0 10px;font-size:28px;line-height:1.6;letter-spacing:.04em}.draw-panel-copy h2 br{display:none}.draw-intro{font-size:11px;line-height:1.9}.draw-intro br{display:none}.draw-aside{display:none}.draw-playground{max-width:330px}.draw-scene{height:251px;margin-top:9px}.vessel-shadow{bottom:-8px}.fortune-tray{min-height:79px}.draw-status{font-size:10px;min-height:29px}.draw-last{min-height:36px;margin-bottom:0}.draw-collection{margin-top:8px;padding-right:14px;padding-left:14px;border-radius:12px}.draw-collection>summary{min-height:47px;font-size:12px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.collection-card{min-height:112px}.collection-title{font-size:12px}.draw-storage-note{font-size:10px}.draw-button{min-height:44px;font-size:12px}.draw-result-card{padding-right:24px;padding-left:24px}.draw-result-card h2{font-size:26px}}
@media(max-width:350px){.scene-draw{padding-right:18px;padding-left:18px}.draw-panel-copy h2{font-size:25px}.draw-result-card{padding-right:22px;padding-left:22px}.draw-result-card h2{font-size:24px}}
@media(hover:hover){.fortune-open:hover{background:#f1d8e52e}.collection-card:hover{border-color:#d4a3c0;transform:translateY(-2px)}}@media(prefers-reduced-motion:reduce){.happy-draw *, .draw-dialog, .draw-dialog *{animation:none!important;transition:none!important}}