body,html{margin:0;padding:0;width:100%;height:100%;background-color:#000;color:#fff;font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;overflow:hidden;-webkit-tap-highlight-color:transparent}#app{width:100%;min-height:100vh;min-height:100dvh;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center}.page{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box;padding:20px;opacity:0;transform:scale(.8);transition:opacity .5s ease-in-out,transform .5s ease-in-out;overflow-x:hidden;overflow-y:auto}#page3{overflow-y:hidden}#page4{overflow-y:hidden}.page.active{display:flex;opacity:1;transform:scale(1)}.page.fade-out{opacity:0;transform:scale(1.2)}.btn{padding:10px 25px;margin:10px;font-size:16px;cursor:pointer;border:none;border-radius:25px;background:linear-gradient(135deg,#6e8efb,#a777e3);color:#fff;font-weight:700;transition:transform .2s,opacity .2s,box-shadow .2s;outline:0;-webkit-user-select:none;user-select:none}.btn:focus-visible{box-shadow:0 0 0 3px rgba(110,142,251,.6)}.btn:active{transform:scale(.95)}.btn:hover{opacity:.9}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:#888}.btn-warning{background:#f7b733}#page1{justify-content:center;align-items:center;overflow:hidden;padding:0}.video-wrapper{position:relative;width:100vw;height:100vh;container-type:inline-size;overflow:hidden}@supports (aspect-ratio:1 / 1){.video-wrapper{width:100dvw;height:auto;aspect-ratio:16/9;max-height:100dvh}}@supports (aspect-ratio:1 / 1){@media (min-aspect-ratio:16/9){.video-wrapper{width:auto;height:100dvh;max-width:100dvw}}}.bg-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.backdrop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);aspect-ratio:16/9;width:100dvw;max-height:100dvh;container-type:inline-size}@media (min-aspect-ratio:16/9){.backdrop{width:auto;height:100dvh;max-width:100dvw}}.bg-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.kuang-img{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:clamp(240px,48cqi,880px);height:auto;z-index:1;pointer-events:none}.mengban-img{position:absolute;top:39%;left:50.2%;transform:translate(-50%,-50%);width:clamp(213px,42.5cqi,785px);height:auto;z-index:2;pointer-events:none}.kaka-mengban-img{position:absolute;top:41%;left:23%;transform:translate(-50%,-50%);width:clamp(100px,18cqi,330px);height:auto;z-index:2;pointer-events:none}.wenzi-img{position:absolute;top:70%;left:23%;transform:translate(-50%,-50%);width:clamp(80px,14cqi,260px);height:auto;z-index:2;pointer-events:none}.player-mengban-img{position:absolute;top:41.8%;left:61%;transform:translate(-50%,-50%);width:clamp(257px,46.3cqi,846px);height:auto;z-index:1;pointer-events:none;opacity:0}.player-photo{position:absolute;top:41.8%;left:61%;transform:translate(-50%,-50%);width:clamp(257px,46.3cqi,846px);aspect-ratio:990/534;object-fit:contain;z-index:2;pointer-events:none;opacity:0}.result-photo{position:absolute;top:39%;left:50.2%;transform:translate(-50%,-50%);width:clamp(213px,42.5cqi,785px);aspect-ratio:918/690;object-fit:contain;z-index:3;pointer-events:none}.page4-loading{position:absolute;top:39%;left:50.2%;transform:translate(-50%,-50%);width:clamp(213px,42.5cqi,785px);z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,3cqi,18px);pointer-events:none}.page4-loading.visible{display:flex}.page4-loading-text{color:rgba(255,255,255,.85);font-size:clamp(11px, 2.2cqi, 16px);letter-spacing:2px;text-shadow:0 0 10px rgba(167,119,227,.5);line-height:1.8;text-align:center}.page4-loading-subtext{font-size:clamp(10px, 1.8cqi, 13px);color:rgba(255,255,255,.6);letter-spacing:1px}.backdrop .overlay-logo{position:absolute;top:clamp(6px,1.5%,14px);left:clamp(6px,1.5%,14px);width:clamp(120px,20cqi,380px);height:auto;pointer-events:none}.backdrop .overlay-actions{position:absolute;top:clamp(6px,1.5%,14px);right:clamp(6px,1.5%,14px);display:flex;gap:clamp(4px,.5cqi,10px)}.overlay-btn{padding:0;margin:0;background:0 0;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s cubic-bezier(.34, 1.56, .64, 1),filter .2s ease;position:relative;overflow:visible}.overlay-btn:hover{transform:scale(1.15);filter:drop-shadow(0 0 8px rgba(255, 255, 255, .6))}.overlay-btn:active{transform:scale(.82);filter:drop-shadow(0 0 14px rgba(255, 255, 255, .85));transition:transform .1s ease,filter .1s ease}.overlay-btn img{display:block;height:clamp(36px,6vw,64px);height:clamp(36px,6cqi,64px);width:auto;transition:transform .2s ease}.overlay-btn:hover img{transform:rotate(5deg)}.overlay-btn:active img{transform:rotate(-3deg) scale(.9)}.video-wrapper .overlay-logo{position:absolute;top:clamp(6px,1.5%,14px);left:clamp(6px,1.5%,14px);width:clamp(120px,20vw,380px);width:clamp(120px,20cqi,380px);height:auto;z-index:2;pointer-events:none}.video-wrapper .overlay-actions{position:absolute;top:clamp(6px,1.5%,14px);right:clamp(6px,1.5%,14px);display:flex;gap:clamp(4px,.5cqi,10px);z-index:2}.btn-entry{position:absolute;bottom:1%;right:1%;transform:rotate(-5deg);z-index:10;padding:0;margin:0;background:0 0;border:none;border-radius:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .25s cubic-bezier(.34, 1.56, .64, 1),filter .25s ease;animation:btn-entry-breathe 2.8s ease-in-out infinite}.btn-entry img{display:block;width:clamp(160px,40vw,800px);width:clamp(160px,40cqi,800px);height:auto}.btn-entry:hover{transform:rotate(-3deg) scale(1.08);filter:brightness(1.2) drop-shadow(0 0 12px rgba(167, 119, 227, .7));animation:none}.btn-entry:active{transform:rotate(-6deg) scale(.92);filter:brightness(1.35) drop-shadow(0 0 20px rgba(167, 119, 227, .95));transition:transform 80ms ease,filter 80ms ease}.btn-entry:focus-visible{box-shadow:0 0 0 3px rgba(167,119,227,.6)}@keyframes btn-entry-breathe{0%,100%{transform:rotate(-5deg) scale(1);filter:brightness(1) drop-shadow(0 0 4px rgba(255, 255, 255, .15))}50%{transform:rotate(-4.5deg) scale(1.04);filter:brightness(1.08) drop-shadow(0 0 10px rgba(167, 119, 227, .35))}}.ripple-effect{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:ripple-expand .6s ease-out forwards;pointer-events:none}.ripple-effect.ripple-dark{background:rgba(167,119,227,.5)}@keyframes ripple-expand{to{transform:scale(4);opacity:0}}.style-container{position:absolute;bottom:4cqi;left:13%;right:15%;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;z-index:5}@media (min-width:1600px){.style-container{left:15%}}.btn-choice{position:relative;padding:0;margin:0;background:0 0;border:none;border-radius:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .25s cubic-bezier(.34, 1.56, .64, 1),filter .25s ease;animation:btn-choice-breathe 2.8s ease-in-out infinite}.btn-choice img{display:block;width:clamp(80px,20cqi,400px);height:auto}.btn-choice:hover{animation:none;transform:scale(1.08);filter:brightness(1.2) drop-shadow(0 0 12px rgba(167, 119, 227, .7))}.btn-choice.selected{filter:brightness(1.15) drop-shadow(0 0 8px rgba(167, 119, 227, .6))}.btn-choice:active{transform:scale(.92);filter:brightness(1.35) drop-shadow(0 0 20px rgba(167, 119, 227, .95));transition:transform 80ms ease,filter 80ms ease}.btn-choice:focus-visible{outline:2px solid rgba(167,119,227,.6);outline-offset:2px}@keyframes btn-choice-breathe{0%,100%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 4px rgba(255, 255, 255, .15))}50%{transform:scale(1.04);filter:brightness(1.08) drop-shadow(0 0 10px rgba(167, 119, 227, .35))}}.btn-choice.fankui-btn{position:absolute;bottom:clamp(16px,3.5cqi,36px);right:0;margin-right:0;z-index:110;pointer-events:auto;transform-origin:right bottom}.btn-choice.fankui-btn img{pointer-events:none}.save-msg-img{position:absolute;bottom:calc(clamp(16px,3.5cqi,36px) + 10px);right:calc(50% - (clamp(97px,17.5cqi,320px) * 3 + clamp(12px,3cqi,40px) * 2)/ 2);width:clamp(50px,9cqi,165px);height:auto;z-index:5;pointer-events:none;visibility:hidden}.add-btn-wrapper{position:absolute;top:41.8%;left:61%;transform:translate(-50%,-50%);z-index:5;pointer-events:auto}.add-btn-wrapper .btn-choice img{width:clamp(30px,5.5cqi,105px)}.generate-btn-wrapper{position:absolute;top:87%;left:59%;transform:translate(-50%,-50%);z-index:5;pointer-events:auto}.generate-btn-wrapper .btn-choice img{width:clamp(122px,22cqi,403px)}.result-actions{position:absolute;top:85%;left:50%;transform:translate(-50%,-50%);display:flex;gap:clamp(12px,3cqi,40px);z-index:5}.result-actions .btn-choice img{width:clamp(97px,17.5cqi,320px)}.upload-layout{display:flex;flex-direction:row;flex-wrap:wrap;gap:30px 50px;align-items:center;justify-content:center;margin-bottom:30px}.upload-layout .section-label{text-align:center;margin-bottom:8px;font-size:14px;color:#ccc}.upload-box{width:200px;height:250px;border:2px dashed #a777e3;border-radius:10px;display:flex;justify-content:center;align-items:center;flex-direction:column;cursor:pointer;position:relative;background:rgba(0,0,0,.3);transition:border-color .3s,background .3s;overflow:hidden}.upload-box:focus-within,.upload-box:hover{border-color:#6e8efb;background:rgba(110,142,251,.1)}.upload-box.has-error{border-color:#e74c3c;background:rgba(231,76,60,.1);animation:shake .4s ease-in-out}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}.upload-box img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:none}.upload-text{position:absolute;text-align:center;color:#ccc;pointer-events:none;font-size:14px;line-height:1.6}#page3-selected-img{width:200px;height:250px;object-fit:cover;border-radius:10px;background:rgba(255,255,255,.05)}.bottom-actions{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}#result-img{width:640px;max-width:90vw;aspect-ratio:16/9;object-fit:contain;border-radius:10px;border:3px solid #fff;margin-bottom:20px;background:rgba(255,255,255,.05)}#splash-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:99999;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;transition:opacity .5s ease-out}#splash-screen.fade-out{opacity:0;pointer-events:none}.splash-spinner{width:52px;height:52px;border:4px solid rgba(159,47,87,.2);border-top-color:#9f2f57;border-radius:50%;animation:spin .8s linear infinite}.splash-text{color:#ccc;font-size:14px;opacity:.8;margin:0;letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 8px rgba(159,47,87,.4)}.splash-bar-track{width:260px;height:20px;background:#1a1418;border:3px solid #4a3a42;border-radius:6px;overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 0 10px rgba(159,47,87,.25);position:relative}.splash-bar-track::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(90deg,transparent,transparent 23px,rgba(0,0,0,.5) 23px,rgba(0,0,0,.5) 25px);z-index:2;pointer-events:none;border-radius:4px}.splash-bar-fill{width:0%;height:100%;background:repeating-linear-gradient(90deg,#ff4470 0,#e8385e 11px,#9f2f57 11px,#6b1530 12px,#9f2f57 12px,#e8385e 13px,#e8385e 23px,#9f2f57 23px,#6b1530 24px,#9f2f57 24px,#ff4470 25px);border-radius:4px;transition:width .4s steps(10);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);position:relative}.splash-bar-fill::after{content:'';position:absolute;top:3px;left:4px;right:4px;height:5px;background:rgba(255,255,255,.18);border-radius:3px}.loading-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:9999;flex-direction:column;justify-content:center;align-items:center;gap:20px}.loading-overlay.visible{display:flex}.spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:#a777e3;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:#fff;font-size:16px;letter-spacing:.5px}.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#fff;padding:12px 28px;border-radius:25px;font-size:14px;z-index:10000;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}.toast.visible{opacity:1}.toast.error{background:rgba(231,76,60,.9)}.toast.success{background:rgba(46,204,113,.9)}@media screen and (max-width:768px){.page{padding:16px}.upload-box{width:160px;height:200px}#page3-selected-img{width:160px;height:200px}.upload-layout{flex-direction:column;gap:20px}}@media screen and (max-width:480px){.upload-box{width:140px;height:180px}#page3-selected-img{width:140px;height:180px}.bottom-actions{flex-direction:column;gap:12px}}@media screen and (max-height:500px){.page{padding:8px 16px;justify-content:flex-start;padding-top:12px}.page h2{margin:4px 0;font-size:16px}.btn{padding:6px 18px;margin:4px;font-size:13px}.upload-layout{gap:20px;margin-bottom:8px}.upload-layout .section-label{font-size:11px;margin-bottom:4px}.upload-box{width:110px;height:130px}.upload-text{font-size:11px}#page3-selected-img{width:110px;height:130px}#result-img{width:400px;max-width:60vw;max-height:40vh;border-width:2px;margin-bottom:6px}.bottom-actions{gap:8px}.spinner{width:32px;height:32px;border-width:3px}.loading-text{font-size:13px}.toast{top:8px;padding:8px 20px;font-size:12px}.preview-close{top:8px;right:16px;font-size:28px}}.orientation-tip{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);z-index:10001;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center}.orientation-tip.visible{display:flex!important}.orientation-icon{font-size:56px;margin-bottom:8px;animation:rotate-hint 1.5s ease-in-out infinite}@keyframes rotate-hint{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}.orientation-tip p{color:#fff;font-size:18px;margin:0;opacity:.9}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;padding-top:8%}.modal-box{position:relative;width:100%;max-width:clamp(520px,55vw,720px);container-type:inline-size}.modal-bg{position:relative;width:100%}.modal-bg-img{width:100%;height:auto;display:block}.modal-close{position:absolute;bottom:100%;left:100%;transform:translate(-8px,12px);z-index:2;background:0 0;border:none;cursor:pointer;padding:0;width:8cqi;min-width:28px;max-width:48px;transition:transform .15s}.modal-close:hover{transform:translate(-8px,12px) scale(1.15)}.modal-close img{width:100%;height:auto;display:block}.modal-content{position:absolute;top:12%;left:10%;right:8%;bottom:22%;display:flex;flex-direction:column;overflow:hidden}.modal-body{flex:1;overflow-y:auto;padding:0 8px}.share-body{display:flex;flex-direction:column;align-items:center;justify-content:center}.share-msg{font-size:clamp(13px, 3cqi, 18px);color:#fff;font-weight:700;text-align:center;padding:10px 10px 0;margin:0}.share-icons{display:flex;justify-content:center;align-items:center;gap:clamp(12px,4cqi,24px);margin-top:clamp(40px,10cqi,60px);padding-bottom:20px}.share-icon-btn{display:block;width:clamp(36px,8cqi,52px);height:clamp(36px,8cqi,52px);flex-shrink:0;cursor:pointer;transition:transform .2s}.share-icon-btn:hover{transform:scale(1.1)}.share-icon-btn:active{transform:scale(.9)}.share-icon-btn img{width:100%;height:100%;display:block}.rules-scroll-area{display:flex;height:100%;overflow:hidden}.rules-scroll-content{flex:1;overflow-y:auto;padding:0 8px 0 12px;scrollbar-width:none}.rules-scroll-content::-webkit-scrollbar{display:none}.rules-list{margin:0;padding:0 0 0 20px;color:#fff;font-size:clamp(12px, 2.5cqi, 15px);line-height:1.8;font-weight:500}.rules-list li{margin-bottom:6px}.rules-scrollbar{flex-shrink:0;width:16px;padding:0 4px}.rules-scrollbar-track{position:relative;width:100%;height:100%;background:url('https://update.3dbuyu.com/images/worldcup/public/huadongdi.png') repeat-y top center;background-size:auto}.rules-scrollbar-thumb{position:absolute;top:0;left:0;right:0;min-height:30px;background:url('https://update.3dbuyu.com/images/worldcup/public/huadong.png') no-repeat top center;background-size:auto;cursor:pointer;transition:opacity .15s}.rules-scrollbar-thumb:hover{opacity:.85}.image-preview{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);z-index:10002;justify-content:center;align-items:center;cursor:zoom-out}.image-preview.visible{display:flex}.image-preview img{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:4px;cursor:default}.preview-close{position:absolute;top:16px;right:24px;font-size:36px;color:#fff;cursor:pointer;z-index:1;opacity:.7;transition:opacity .2s;line-height:1;user-select:none}.preview-close:hover{opacity:1}.site-footer{position:absolute;bottom:0;left:0;width:100%;z-index:100;color:rgba(255,255,255,.75);font-size:11px;line-height:1.5;text-align:center;padding:6px 10px;box-sizing:border-box;text-shadow:0 1px 3px rgba(0,0,0,.6);background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.3),transparent);pointer-events:none}.site-footer a{color:rgba(255,255,255,.75);text-decoration:none;white-space:nowrap;pointer-events:auto}.site-footer a:hover{color:#a777e3}.footer-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.footer-line:first-child{display:inline-block;width:auto}.footer-game-tip{font-size:10px;opacity:.6}#agreement-modal{z-index:99999;display:none}.agreement-title{font-size:clamp(18px, 5cqi, 26px);font-weight:700;color:#fff;text-align:center;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.5);flex-shrink:0}.agreement-text{font-size:clamp(12px, 3.2cqi, 15px);color:#fff;line-height:1.9;text-align:left;width:100%}.agreement-text p{margin:6px 0}.agreement-section-title{font-weight:700;font-size:clamp(14px, 3.5cqi, 17px);color:#fff;margin-top:16px!important;margin-bottom:8px!important}.agreement-check-label{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;margin-top:20px}.agreement-check-label input[type=checkbox]{width:clamp(16px,3.5cqi,20px);height:clamp(16px,3.5cqi,20px);accent-color:#a777e3;cursor:pointer;flex-shrink:0}.agreement-check-text{font-size:clamp(12px, 3cqi, 15px);color:#fff}.ghs-icon{display:inline-block;vertical-align:middle;height:14px;width:auto;margin-right:2px;filter:brightness(0) invert(1);opacity:.75}@media screen and (max-width:768px){.site-footer{font-size:9px;padding:4px 6px;line-height:1.4}.footer-game-tip{font-size:8px}.ghs-icon{height:11px}}@media screen and (max-height:500px){.site-footer{font-size:9px;padding:3px 6px;line-height:1.3}.footer-game-tip{font-size:8px}.ghs-icon{height:10px}}@media screen and (max-aspect-ratio:9/16) and (max-width:480px){.video-wrapper{aspect-ratio:auto;width:100dvw;max-width:100vw}.btn-choice img,.btn-entry img{max-width:90%;height:auto}}@media screen and (max-width:480px) and (min-aspect-ratio:1/1.5){.style-container{gap:15px}.overlay-actions{gap:clamp(2px,2vw,8px)}}