:root{--backdrop-blur:blur(3px);--backdrop-filter:blur(3px);--blur-10:blur(10px);--shadow-base:0 4px 15px rgba(0,0,0,0.2);--shadow-backdrop:0 10px 15px var(--swal2-backdrop);--glass-shadow:0 4px 15px rgba(0,0,0,0.2);--border-radius-sm:5px;--border-radius-md:8px;--border-radius-lg:12px;--border-radius-xl:16px;--transition-base:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);--backdrop-bg:rgba(255,255,255,0.05);--glass-bg:rgba(255,255,255,0.05);--glass-border:1px solid rgba(255,255,255,0.6);--glass-outline:1px solid rgba(255,255,255,0.8);--glass-inset:inset 0 0 10px rgba(255,255,255,0.5);--overlay-bg:rgba(0,0,0,0.5);--text-color:#fff;--text-color-light:#e5d7ff;--text-shadow:2px 2px 4px #000;--glow-orange:0 0 20px var(--swal2-footer-border-color);--button-bg:linear-gradient(145deg,#2c2c5e,#1a1a3a);--button-border:4px double var(--swal2-footer-border-color);--gradient-purple-black:radial-gradient(circle at center,#7800ffa3,rgb(0 0 0));--icon-size-md:40px;--avatar-size:100px;--wheel-size:90%;--progress-bar-width:100%;--progress-bar-height:20px;--primary-color:#fd7e14;--border-color:#ffd700;--shadow-color:#ffd700;--background-color:#00aaff}
*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,textarea,[contenteditable="true"]{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}
body{touch-action:manipulation}
.container-fluid{max-width:100%}
.h-vh-100{height:100dvh;overflow:hidden;box-sizing:border-box}
.gap-1{gap:10px}
#index-section{display:flex;flex-direction:column;justify-content:space-between}
#header-section{flex:1;overflow:hidden}
.luckywheel-container{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;color:#fff;padding:10px;height:100%;background-image:url(/images/giftcode/giftcode.jpg);background-size:cover;background-position:center;background-repeat:no-repeat}
.luckywheel-history{display:flex;flex-direction:column}
.luckywheel-detail{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
.luckywheel-spin{position:relative;width:100%;max-width:var(--wheel-size);aspect-ratio:1 / 1;display:flex;justify-content:center;align-items:center}
.luckywheel-info{background:#fd7e1461;box-shadow:0 4px 15px rgba(253,126,20,0.3),inset 0 0 10px rgba(253,126,20,0.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(253,126,20,0.6);border-radius:10px 10px 0 0;display:flex;justify-content:center;align-items:center;padding:10px;gap:10px}
.luckywheel-content{height:100%;border-radius:0 0 10px 10px;background:var(--swal2-backdrop)}
.history-inner{display:flex;flex-direction:column;align-items:center;gap:10px}
.history-inner img{width:40px;aspect-ratio:1 / 1;object-fit:cover}
.wheel{width:100%;background:rgba(255,255,255,0.05);box-shadow:0 4px 15px rgba(0,0,0,0.2),inset 0 0 10px rgba(255,255,255,0.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,0.6);outline:1px solid rgba(255,255,255,0.8);border-radius:50%}
.luckywheel-left-img,.luckywheel-right-img,.luckywheel-center-img,.luckywheel-top-img{position:absolute;z-index:1}
.luckywheel-left-img{left:-40px;width:125px;bottom:0;filter:saturate(0.5)}
.luckywheel-right-img{right:-30px;width:130px;bottom:0;filter:saturate(0.5)}
.luckywheel-center-img{width:100px}
.luckywheel-top-img{width:50px;position:absolute;top:-36px}
.progress-bar{width:var(--progress-bar-width);height:var(--progress-bar-height);border-radius:10px;overflow:hidden;position:relative;background:rgba(255,255,255,0.15);box-shadow:0 4px 15px rgba(0,0,0,0.2),inset 0 0 10px rgba(255,255,255,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.6);outline:1px solid rgba(255,255,255,0.8)}
.progress{height:100%;background:var(--primary-color);width:0%;transition:width 0.02s linear;position:absolute;left:0;z-index:1;border-radius:0}
.progress-a{background:url('/images/svg/golden-ticket.svg') no-repeat center;background-size:contain;position:absolute;height:100%;width:5%;left:70%;z-index:0;background-color:#fd7e14}
.progress-past-a{height:100%;background:#00b7eb;width:0%;transition:width 0.02s linear;position:absolute;left:70%;z-index:1}
.progress-y{height:100%;background:var(--primary-color);width:0%;transition:width 0.02s linear;position:absolute;left:75%;z-index:1}
.divider{position:absolute;height:100%;width:2px;background:var(--text-color);left:70%;z-index:2}
.divider-after{position:absolute;height:100%;width:2px;background:var(--text-color);left:75%;z-index:2}
.spin-button{cursor:pointer;user-select:none;background:#fd7e1461;box-shadow:0 4px 15px rgba(253,126,20,0.3),inset 0 0 10px rgba(253,126,20,0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(253,126,20,0.6);outline:1px solid rgba(253,126,20,0.8);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:10px 20px;color:#fff;font-size:18px;font-weight:bold;text-transform:uppercase}
.spin-button.disabled{pointer-events:none;opacity:0.5}
.luckywheel-ticket{display:flex;align-items:center;gap:10px}
.luckywheel-ticket-daily{border-radius:5px;overflow:hidden;position:relative;box-shadow:0 4px 15px rgba(0,0,0,0.2),inset 0 0 10px rgba(255,255,255,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.6);outline:1px solid rgba(255,255,255,0.8);display:flex;align-items:center;padding:5px;cursor:pointer}
.luckywheel-ticket-daily img{width:30px}
.water-bottle-container{position:absolute;width:38px;height:62px;background:rgba(255,255,255,0.1);box-shadow:0 2px 6px rgba(0,0,0,0.2),inset 0 0 4px rgba(255,255,255,0.3);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,0.4);outline:1px solid rgba(255,255,255,0.6);border-radius:4px 4px 8px 8px;overflow:hidden;top:0;left:2px}
.water-bottle-container canvas{width:100%;height:100%}
.red .water{display:none}
.bottle{display:inline-block;width:42px;position:absolute;right:15px;top:60px}
.bottle:after{height:6px;width:42px;border-radius:19px/4px;box-shadow:0 0 2px -1px rgba(0,0,0,0.2),0 1px 4px -1px rgba(0,0,0,0.1);bottom:-3px;z-index:0}
.bottle.red:before{height:6px;width:42px;border-radius:19px/4px;box-shadow:0 1px 4px -1px rgba(0,204,255,0.3),0 1px 6px -1px rgba(0,204,255,0.4);bottom:-1px;z-index:0}
.bottle_top{height:13px;width:33px;position:relative;border:1px solid rgba(255,255,255,0.4);border-top:none;border-bottom:none;margin:0 auto;background:rgba(255,255,255,0.15)}
.bottle_top:after,.bottle_top:before{height:4px;width:33px;border-radius:19px/4px;border:1px solid rgba(255,255,255,0.4);border-bottom:1px solid rgba(255,255,255,0.5);border-top:1px solid rgba(255,255,255,0.3);left:0;box-shadow:0 0 3px rgba(255,255,255,0.4) inset}
.bottle_top:after{top:-3px;box-shadow:0 0 3px rgba(255,255,255,0.4) inset,0px 1px 1px -0px rgba(255,255,255,0.2)}
.bottle_top:before{top:10px;box-shadow:0 0 3px rgba(255,255,255,0.3) inset}
.bottle_neck{height:8px;width:26px;position:relative;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.4);border-top:none;border-bottom:none;margin:0 auto}
.bottle_neck:after,.bottle_neck:before{height:3px;width:26px;border-radius:13px/3px;border:1px solid rgba(255,255,255,0.4);border-top:none;left:0}
.bottle_neck:after{top:-2px;border:1px solid rgba(255,255,255,0.2);box-shadow:0 2px 1px -1px rgba(0,0,0,0.05)}
.bottle_neck:before{top:6px}
.bottle_main{height:63px;position:relative;width:41px;background:none;border:1px solid rgba(255,255,255,0.4);border-top:none;border-radius:4px}
.bottle_main:after,.bottle_main:before{height:5px;width:40px;border-radius:19px/4px;border:1px solid rgba(255,255,255,0.4);border-bottom:1px solid rgba(255,255,255,0.5);border-top:1px solid rgba(255,255,255,0.3);left:0}
.bottle_main:after{top:-3px;box-shadow:0 0 3px rgba(255,255,255,0.4) inset,0px 1px 1px -0px rgba(255,255,255,0.3),0px 0 1px rgba(0,0,0,0.05) inset,0px 0 3px rgba(255,255,255,0.5) inset,0px 0 1px rgba(0,0,0,0.1) inset}
.bottle_main:before{top:60px;box-shadow:0 0 3px rgba(255,255,255,0.5) inset,0px 0 1px rgba(0,0,0,0.1) inset}
.bottle_mouth{height:22px;width:18px;margin:0 auto;position:relative;background:none;border:1px solid rgba(0,0,0,0.04);border-top:none;border-bottom:none;background:linear-gradient(to right,rgba(255,255,255,0.2),rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(255,255,255,0.2));box-shadow:0 0 3px rgba(255,255,255,0.3)}
.bottle_mouth:after{height:3px;width:18px;border-radius:10px/3px;border:1px solid rgba(255,255,255,0.4);left:0;top:-2px;z-index:1;box-shadow:0 0 1px rgba(255,255,255,0.3)}
.bottle_inner{height:62px;width:92%;margin:0 auto;border-radius:4px 4px 8px 8px/4px;border:1px solid rgba(0,0,0,0.01);border-top:1px solid rgba(255,255,255,0.3);border-bottom-width:0;position:relative;box-shadow:0 0 1px rgba(255,255,255,0.4) inset,0px 0 3px rgba(255,255,255,0.5) inset,0px 0 2px rgba(255,255,255,0.4);top:0;overflow:hidden;display:flex;justify-content:space-around;align-items:center}
.bottle_inner canvas#waterCanvas{width:100%;height:100%;position:absolute;bottom:0;left:0}
.red .water{display:none}
.bottle_top .highlight{display:block;height:13px;width:8px;position:absolute;left:2px;top:2px;transform:skew(0deg,5deg);background:linear-gradient(to right,rgba(255,255,255,0.1),rgba(255,255,255,0.5) 4%,rgba(255,255,255,0.2) 98%,rgba(255,255,255,0))}
.bottle_top .highlight:after{height:13px;width:1px;left:-1px;top:0;transform:skew(0deg,5deg);background:rgba(255,255,255,0.2)}
.bottle_main .highlight{display:block;height:58px;width:10px;position:absolute;left:4px;top:3px;transform:skew(0deg,6deg);background:linear-gradient(to right,rgba(255,255,255,0.15),rgba(255,255,255,0.4) 4%,rgba(255,255,255,0.15) 98%,rgba(255,255,255,0));z-index:2}
.bottle_main .highlight:after{height:63px;width:2px;left:-3px;top:0;transform:skew(0deg,3deg);background:linear-gradient(to bottom,rgba(255,255,255,0.3),rgba(255,255,255,0) 80%)}
.bottle_neck .highlight{display:block;height:8px;width:10px;position:absolute;left:1px;top:3px;transform:skew(0deg,6deg);background:linear-gradient(to right,rgba(255,255,255,0.1),rgba(255,255,255,0.3) 4%,rgba(255,255,255,0.1) 98%,rgba(255,255,255,0))}
.luckywheel-reward-container{display:flex;justify-content:center;align-items:center;gap:20px;padding-top:10px}
.journey-reward-box{width:max-content;animation:glow 1s ease-in-out infinite;background:#e9ecef}
#luckywheelBody img{width:100%;height:auto}
.close{position:fixed;right:10px;top:10px;border:1px solid #ccc!important;margin:0 auto;padding:5px!important;border-radius:50%}
.table{color:#fff}
.modal-dialog{height:100%!important}
.modal-header{display:flex;justify-content:space-between;align-items:center}
.modal-header span{font-weight:bold;font-size:18px;text-transform:uppercase}
.swal2-styled:focus,.swal2-popup .swal2-styled:focus,.swal2-container button.swal2-styled:focus{outline:none!important;box-shadow:none!important;border:none!important}
.swal2-popup,.modal-content{border-radius:var(--border-radius-sm)!important;background:radial-gradient(circle at center,#7800ffa3,#000)!important;backdrop-filter:var(--backdrop-blur)!important;border:1px solid rgba(255,255,255,0.6)!important;color:#e5d7ff!important}
.swal2-styled.swal2-confirm,.swal2-styled.swal2-cancel{background:url(/images/arena/battle/vs-button.webp) center / 100% 100% no-repeat!important;padding:10px 24px!important;font-weight:900!important;text-transform:uppercase!important;text-shadow:var(--text-shadow)!important;color:var(--orange)!important;filter:drop-shadow(0 0 12px #ff6b0066)!important}
.swal2-styled.swal2-cancel{filter:grayscale(0.7) drop-shadow(0 0 8px #666)!important}
.swal2-backdrop-show{background:rgba(0,0,0,0.82)!important}
@media (max-width:576px){.luckywheel-spin{max-width:100%;padding:0 10px}.luckywheel-left-img{left:0;width:110px}.luckywheel-right-img{right:0;width:125px}.spin-button{padding:8px 16px;font-size:16px}}
@media (max-width:767px){.luckywheel-container{display:flex;flex-direction:column;gap:40px}.luckywheel-content{display:none!important}}
@media (min-width:1024px) and (max-width:1279px){.luckywheel-spin{width: 80%;}}
@media (min-width:1280px) {.luckywheel-spin{width: 60%;}}