*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{background-image:url(https://websource-meiyi.oss-cn-hangzhou.aliyuncs.com/website/%E8%B4%9D%E5%A3%B3%E6%8A%BD%E5%A5%96%E6%B4%BB%E5%8A%A8/%E6%B5%B7%E6%B4%8B%E4%B8%BB%E9%A2%98%E8%83%8C%E6%99%AF.png);background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex}#app{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.start-screen{flex-direction:column;align-items:center;gap:30px;animation:.5s fadeIn;display:flex}@keyframes fadeIn{to{opacity:1}}.title{color:#fff;text-shadow:0 4px 20px #0000004d,0 0 40px #ffffff4d;letter-spacing:2px;font-size:48px;font-weight:800;animation:2s infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.main-button{color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:3px;background:linear-gradient(135deg,#ff6b6b 0%,#ff8e53 100%);border:none;border-radius:60px;padding:24px 80px;font-size:28px;font-weight:700;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 10px 40px #ff6b6b66,0 0 #ff6b6b66}.main-button:before{content:"";background:#ffffff4d;border-radius:50%;width:0;height:0;transition:width .6s,height .6s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.main-button:hover:before{width:300px;height:300px}.main-button:hover{transform:translateY(-4px)scale(1.05);box-shadow:0 15px 50px #ff6b6b80,0 0 0 20px #ff6b6b33}.main-button:active{transform:translateY(-2px)scale(1.02)}.fullscreen-overlay{z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.3s zoomIn;display:none;position:fixed;top:0;left:0}.fullscreen-overlay:before{content:"";opacity:0;pointer-events:none;z-index:999;background:#00000080;width:100%;height:100%;animation:.5s .3s forwards fadeIn;position:absolute;top:0;left:0}@keyframes zoomIn{0%{opacity:0}to{opacity:1}}.fullscreen-overlay.active{display:flex}.frame-container{z-index:1001;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative}.video-player{object-fit:contain;filter:drop-shadow(0 20px 60px #00000080);width:auto;max-width:90vw;height:auto;max-height:90vh;animation:1s ease-in-out 4s infinite winPulse;display:block}@media (max-width:768px),(orientation:portrait){.video-player{max-width:85vw;max-height:80vh}}@keyframes winPulse{0%,to{filter:drop-shadow(0 20px 60px #00000080);transform:scale(1)}50%{filter:drop-shadow(0 30px 80px #ffd70099);transform:scale(1.02)}}.particles{pointer-events:none;z-index:1001;width:100%;height:100%;position:fixed;top:0;left:0}.particle{background:radial-gradient(circle,gold 0%,#0000 70%);border-radius:50%;width:10px;height:10px;animation:3s linear infinite particleFall;position:absolute}@keyframes particleFall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}.close-button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;z-index:1002;background:#fff3;border:2px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;transition:all .3s;display:flex;position:fixed;top:30px;right:30px}.close-button:hover{background:#ffffff4d;transform:rotate(90deg)scale(1.1)}.close-button:before,.close-button:after{content:"";background:#fff;border-radius:2px;width:30px;height:3px;position:absolute}.close-button:before{transform:rotate(45deg)}.close-button:after{transform:rotate(-45deg)}.bubbles-container{pointer-events:none;z-index:1;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.bubble{opacity:.8;background-position:50%;background-repeat:no-repeat;background-size:contain;animation-timing-function:ease-in-out;animation-iteration-count:infinite;position:absolute}.shells-container{pointer-events:auto;z-index:0;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.shell{cursor:pointer;pointer-events:auto;backface-visibility:hidden;-webkit-font-smoothing:antialiased;background-position:50%;background-repeat:no-repeat;background-size:contain;transition:transform .3s ease-out,filter .3s ease-out;animation-timing-function:ease-in-out;animation-iteration-count:infinite;position:absolute}.shell.opened{cursor:default;filter:brightness(1.1);animation-play-state:paused}.shell.opened:hover{filter:brightness(1.1)!important;transform:none!important}.shell.selected{z-index:100;animation-play-state:paused!important;transform:scale(1.15)rotate(0)!important}.coupon-container{z-index:1003;opacity:0;flex-direction:column;align-items:center;gap:30px;transition:transform .6s ease-out,opacity .4s ease-out;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}.coupon-container.show{opacity:1;transform:translate(-50%,-50%)scale(1)}.coupon-image{filter:drop-shadow(0 10px 40px #00000080);cursor:pointer;width:min(500px,80vw);height:auto;transition:transform .3s;animation:2s ease-in-out infinite couponFloat}.coupon-image:hover{transform:scale(1.05)}.claim-button{color:#fff;cursor:pointer;pointer-events:auto;background:linear-gradient(135deg,#ff6b6b 0%,#ff8e53 100%);border:none;border-radius:50px;padding:20px 60px;font-size:24px;font-weight:700;transition:all .3s;animation:2s ease-in-out infinite buttonPulse;box-shadow:0 10px 40px #ff6b6b66}.claim-button:hover{transform:translateY(-3px)scale(1.05);box-shadow:0 15px 50px #ff6b6b80}.claim-button:active{transform:translateY(-1px)scale(1.02)}@keyframes buttonPulse{0%,to{box-shadow:0 10px 40px #ff6b6b66}50%{box-shadow:0 10px 50px #ff6b6b99}}@keyframes couponFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes shellSwingNear{0%,to{transform:rotate(0)translateY(0)}25%{transform:rotate(5deg)translateY(-5px)}50%{transform:rotate(-3deg)translateY(3px)}75%{transform:rotate(2deg)translateY(-2px)}}@keyframes shellSwingMid{0%,to{transform:rotate(0)translateY(0)}50%{transform:rotate(3deg)translateY(-3px)}}@keyframes shellSwingFar{0%,to{transform:rotate(0)translateY(0)scale(1)}50%{transform:rotate(2deg)translateY(-1px)scale(1.02)}}@keyframes bubbleFloat1{0%{opacity:.6;transform:translate(0)rotate(0)}25%{opacity:.9;transform:translate(20px,-30px)rotate(90deg)}50%{opacity:.7;transform:translate(-10px,-60px)rotate(180deg)}75%{opacity:.8;transform:translate(30px,-40px)rotate(270deg)}to{opacity:.6;transform:translate(0)rotate(360deg)}}@keyframes bubbleFloat2{0%{opacity:.5;transform:translate(0)rotate(0)scale(1)}33%{opacity:.8;transform:translate(-25px,-40px)rotate(-120deg)scale(1.1)}66%{opacity:.6;transform:translate(15px,-70px)rotate(120deg)scale(.9)}to{opacity:.5;transform:translate(0)rotate(0)scale(1)}}@keyframes bubbleFloat3{0%{opacity:.4;transform:translate(0)rotate(0)}20%{opacity:.7;transform:translate(40px,-50px)rotate(72deg)}40%{opacity:.5;transform:translate(-20px,-80px)rotate(144deg)}60%{opacity:.8;transform:translate(35px,-60px)rotate(216deg)}80%{opacity:.6;transform:translate(-15px,-30px)rotate(288deg)}to{opacity:.4;transform:translate(0)rotate(360deg)}}.ocean-wave{pointer-events:none;z-index:2;background:linear-gradient(#0000 0%,#0096c81a 30%,#0078b433 60%,#0064964d 100%);width:200%;height:200px;animation:8s ease-in-out infinite waveMotion;position:fixed;bottom:0;left:0}.ocean-wave:before{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,120 350,0 600,60 C850,120 1050,0 1200,60 L1200,120 L0,120 Z' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E") 0 0/50% 100%;width:100%;height:30px;animation:4s linear infinite waveSurface;position:absolute;top:0;left:0}@keyframes waveMotion{0%,to{transform:translate(0)translateY(0)}25%{transform:translate(-5%)translateY(-10px)}50%{transform:translate(-10%)translateY(0)}75%{transform:translate(-5%)translateY(10px)}}@keyframes waveSurface{0%{background-position-x:0}to{background-position-x:100%}}@media (max-width:768px),(orientation:portrait){.title{font-size:32px}.main-button{padding:20px 60px;font-size:24px}.close-button{width:50px;height:50px;top:20px;right:20px}.coupon-image{width:min(400px,75vw)}.claim-button{padding:16px 48px;font-size:20px}.shell.selected{z-index:100;animation-play-state:paused!important;transform:scale(1.15)rotate(0)!important}}@media (max-width:480px){.coupon-image{width:min(350px,70vw)}.claim-button{padding:14px 40px;font-size:18px}.video-player{max-width:95vw;max-height:75vh}}.my-coupons-button{cursor:pointer;z-index:100;width:80px;height:80px;transition:transform .3s;animation:2s ease-in-out infinite buttonBounce;position:fixed;top:20px;right:20px}.my-coupons-button:hover{transform:scale(1.1)}.my-coupons-button img{object-fit:contain;filter:drop-shadow(0 4px 12px #0000004d);width:100%;height:100%}@keyframes buttonBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.clear-data-button{cursor:pointer;z-index:100;width:60px;height:60px;transition:transform .3s;position:fixed;top:20px;left:20px}.clear-data-button:hover{transform:scale(1.1)}.clear-data-button img{object-fit:contain;filter:drop-shadow(0 4px 12px #0000004d);width:100%;height:100%}.qrcode-display{z-index:100;width:100px;height:100px;animation:2s ease-in-out infinite buttonBounce;position:fixed;bottom:20px;right:20px}.qrcode-display img{object-fit:contain;filter:drop-shadow(0 4px 12px #0000004d);width:100%;height:100%}.coupons-modal{z-index:2000;background:#000c;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.3s fadeIn;display:flex;position:fixed;top:0;left:0}.coupons-modal-content{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:30px;width:90%;max-width:600px;max-height:80vh;padding:40px;animation:.3s slideUp;overflow-y:auto;box-shadow:0 20px 60px #00000080}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.coupons-modal-header{color:#fff;justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.coupons-modal-header h2{margin:0;font-size:32px;font-weight:800}.coupons-modal-header .close-button{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:50%;width:40px;height:40px;font-size:24px;transition:all .3s}.coupons-modal-header .close-button:hover{background:#ffffff4d;transform:rotate(90deg)}.coupons-list{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.coupon-item{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;cursor:pointer;background:#ffffff26;border:2px solid #0000;border-radius:20px;padding:25px;transition:all .3s}.coupon-item.collected{cursor:pointer;background:#ffffff40;border-color:#ffffff4d}.coupon-item.collected:hover{background:#ffffff59;transform:translateY(-5px)scale(1.05);box-shadow:0 10px 30px #0000004d}.coupon-item.locked{opacity:.5;cursor:not-allowed}.coupon-status{margin-bottom:10px;font-size:40px}.coupon-info{color:#fff;font-size:16px;font-weight:600}.qrcode-modal{z-index:3000;background:#000000e6;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.3s fadeIn;display:flex;position:fixed;top:0;left:0}.qrcode-modal-content{text-align:center;background:#fff;border-radius:30px;width:90%;max-width:400px;padding:50px;animation:.3s scaleIn;position:relative}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.qrcode-modal-content .close-button{color:#333;cursor:pointer;background:#f0f0f0;border:none;border-radius:50%;width:40px;height:40px;font-size:24px;transition:all .3s;position:absolute;top:15px;right:15px}.qrcode-modal-content .close-button:hover{background:#e0e0e0;transform:rotate(90deg)}.qrcode-modal-content h3{color:#333;margin:0 0 30px;font-size:28px;font-weight:800}.qrcode-container{background:#fff;border-radius:20px;margin-bottom:20px;padding:20px;box-shadow:0 10px 40px #0000001a}.qrcode-image{object-fit:contain;width:250px;height:250px}.qrcode-tip{color:#666;margin:0;font-size:16px}@media (max-width:768px),(orientation:portrait){.my-coupons-button{width:60px;height:60px;top:15px;right:15px}.clear-data-button{width:50px;height:50px;top:15px;left:15px}.qrcode-display{width:80px;height:80px;bottom:15px;right:15px}.coupons-modal-content{padding:30px 20px}.coupons-modal-header h2{font-size:24px}.coupons-list{grid-template-columns:repeat(3,1fr);gap:12px}.coupon-item{padding:15px 10px}.coupon-status{margin-bottom:8px;font-size:30px}.coupon-info{font-size:12px}.qrcode-modal-content{padding:30px 20px}.qrcode-modal-content h3{font-size:22px}.qrcode-image{width:200px;height:200px}.qrcode-tip{font-size:14px}}@media (max-width:480px){.coupons-list{grid-template-columns:repeat(3,1fr);gap:8px}.coupon-item{padding:10px 5px}.coupon-status{font-size:24px}.coupon-info{font-size:11px}}