/* 是一个CSS声明，用于定义文档的字符编码。这里指定的是UTF-8字符编码。 */
@charset "utf-8";

/* 设置body */
body {font-size: 12px;font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;background-color: #efefef;max-width: 750px;}
/* 版心 */
.w {margin: 0 auto;max-width: 750px;box-sizing: border-box;overflow: hidden;height: 100vh;padding: 0;position: relative;}

/* 音乐播放器 */
.music-icon {position: fixed;right: 15px;top: 15px; width: 30px;height: 30px;z-index: 999;display: -webkit-box;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center; -webkit-box-sizing: border-box;box-sizing: border-box;border: 1px solid #fff;border-radius: 50%;-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);background: rgba(0, 0, 0, .3);box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);-webkit-transform-origin: top right;transform-origin: top right;}
.music-icon .iconfont {width: 20px;height: 20px;color: #fff;text-align: center;-webkit-animation: rotate-music 3s linear infinite;animation: rotate-music 3s linear infinite;-webkit-animation-play-state: paused;animation-play-state: paused}
@-webkit-keyframes rotate-music {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg)}to {-webkit-transform: rotate(1turn);transform: rotate(1turn)}}
@keyframes rotate-music {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg)}to {-webkit-transform: rotate(1turn);transform: rotate(1turn)}}

/* 主容器 */
.container {width: 100%; height: 100%;overflow: hidden;background: linear-gradient(to bottom, #ff4d4d, #ffb6c1);background-image: url(https://bhcar.oss-cn-beijing.aliyuncs.com/images/20260202/cbc2764bf3a46aa895787dc0b1af880d.jpg);background-size: cover;background-position: center;background-repeat: no-repeat;position: relative;}

.xy_wrap {position: absolute;bottom: 15px;left: 15px;right: 15px;background-image: url(../images/xyk.png);background-size: 95%;background-position: center;background-repeat: no-repeat;height: auto;box-sizing: border-box;padding: 0 15px;padding-top: 90px;padding-bottom: 15px;}
.xy_wrap .mySwiper {height: 244.5px;width: 100%;}
.xy_wrap .mySwiper .swiper-slide {width: 110px;}
.xy_wrap .mySwiper .swiper-slide .box {width: 100%;height: 100%;background-image: url(../images/xy.png);background-size: cover;background-repeat: no-repeat;background-position: center;background-repeat: no-repeat;display: flex;justify-content: center;align-items: center;padding-bottom: 15px;overflow: hidden;box-sizing: border-box;padding-right: 10px;}
.xy_wrap .mySwiper .swiper-slide .box h2 {writing-mode: vertical-rl;font-size: 18px;letter-spacing: 4px;font-weight: bold;color: #f63538;text-orientation: mixed;}
.xy_wrap .mySwiper .swiper-slide.active .box {background-image: url(../images/xzxy.png);}

.xy_wrap .btn {display: flex;justify-content: center;align-items: center;height: 64px;overflow: hidden;width: 100%;position: relative;}
.xy_wrap .btn img {width: 214px;height: 100%;object-fit: cover;cursor: pointer;} 

/* 烟花动画效果 */
.firework {position: absolute;width: 10px;height: 10px;border-radius: 50%;pointer-events: none;z-index:99;}

/* 遮罩层 */
.popup-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: none;justify-content: center;align-items: center;z-index: 1000;opacity: 0;transition: opacity 0.6s ease;}
/* 弹窗显示时的样式 */
.popup-overlay.active {display: flex;opacity: 1;}
.popup-overlay.active .popup-container {transform: scale(1) rotate(0deg);}
.popup-content {text-align: center;background: linear-gradient(to bottom, #fff9e6 0%, #fff4d6 100%);position: relative;overflow: hidden;height: 69vh;width: 69vw;}
.popup-content img {width: 100%;display: block;}
/* 关闭按钮 */
.close-btn {position: absolute;top: 15px;right: 15px;width: 34px;height: 34px;background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;display: flex;justify-content: center;align-items: center;cursor: pointer;transition: all 0.4s ease;font-size: 24px;color: white;font-weight: bold;z-index: 10;border: 2px solid white;}
.close-btn span {font-size: 20px;}

 /* 按钮容器 */
.button-container {display: flex;justify-content: space-between;margin-top: 30px;gap: 15px;}
.popup-btn {flex: 1;padding: 16px 0;border: none;border-radius: 50px;font-size: 20px;font-weight: bold;cursor: pointer;transition: all 0.4s ease;position: relative;overflow: hidden;text-align: center;}
.save-btn {background: linear-gradient(to bottom, #ff762d, #fe1225);color: white;}
.lottery-btn {background: linear-gradient(to bottom, #fbd081, #ffe0a6);color: #9f2600;text-decoration: none;}

 /* 图片进入动画 */
@keyframes flipIn {0% {opacity: 0;transform: rotateY(90deg) scale(0.8);} 70% {transform: rotateY(-10deg) scale(1.05);}
100% {opacity: 1;transform: rotateY(0deg) scale(1);}}
 /* 应用图片进入动画 */
.popup-overlay.active .popup-content img {animation: flipIn 1s ease-out;}

/* 抽奖界面 */
.cj_wrap {margin: 0 auto;max-width: 750px;box-sizing: border-box;overflow: hidden;min-height: 160vh;padding: 0;position: relative;background-image: url(https://bhcar.oss-cn-beijing.aliyuncs.com/images/20260202/abc5e8f79829e1cd53b2c3b3c7f92359.jpg);background-size: cover;background-position: center;background-repeat: no-repeat;}

/* 规则 */
.cj_gz_wrap {position: absolute;bottom: 5%;height: 18%;left: 15px;right: 15px;border-radius: 15px;overflow: hidden;display: flex;flex-direction: column;}
.gz_head_bg {position: absolute;left: 0;top: 0;width: 100%;height: auto;z-index: 0;}
.gz_head_bg img {width: 100%;height: 100%;object-fit: cover;display: none;}
.gz_head_bg img:first-child {display: block;}
.cj_gz_head {height: 25%;width: 100%;display: flex;align-items: center;position: relative;z-index: 1;}
.cj_gz_head .gz_btn {flex: 1;height: 100%;display: flex;justify-content: center;align-items: center;color: #5c0503;box-sizing: border-box;font-size: 0px;font-weight: bold;}
.cj_gz_content {flex: 1;width: 100%;display: none;overflow-y: auto;background-color: #fff;position: relative;z-index: 1;}
.cj_gz_content .tip{font-size: 14px;text-align: center;color: #000000;z-index: 1;height: 40px;display: flex;align-items: center;justify-content: center;}
.table_wrap {border-radius: 10px;margin:12px;margin-top: 0;border: 2px solid #fdf3e4;}
.table_wrap .table_cell {background-color: #fdf3e4;height: 40px;display: grid;grid-template-columns: 1fr 3fr 1fr;line-height: 40px;font-size: 14px;text-align: center;}
.table_wrap .table_cell:nth-child(2n) {background-color: #fff;}
.ui-cont{line-height: 240%; font-size: 12px; font-family:"PingFang SC", "Microsoft YaHei","Helvetica Neue",Helvetica,"Hiragino Sans GB",Arial,sans-serif !important;padding: 12px;}
.ui-cont p,.ui-cont div{font-family:"PingFang SC", "Microsoft YaHei","Helvetica Neue",Helvetica,"Hiragino Sans GB",Arial,sans-serif !important;line-height: 240%; font-size: 12px;}
.ui-cont img,.ui-cont input{ max-width: 100% !important; height: auto !important; border-radius: 4px; display: block; margin: 0 auto;}

/* 大转盘容器 */
.canvas_box {position: absolute;margin: 0 auto;overflow: hidden;bottom: 24%;left: 50%;border-radius: 50%;height: 320px;width: 320px;transform: translateX(-50%);}
.canvas_box .can {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
#canvas_bg {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
.canvas_ani {animation: loading 90s linear 0s infinite;}
@keyframes loading {0% {transform: rotate(0deg);}50% {transform: rotate(180deg);}100% {transform: rotate(360deg);}}
#pointer_but {position: absolute;left: 50%;top: 50%;display: block;width: 60px;height: 60px;margin: -30px 0 0 -30px;object-fit: contain;}

/* 中奖记录 */
.zj_record_btn {position: fixed;right: 0;top: 30px; height: 30px;width: 80px;background-color: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;border-radius: 15px 0px 0px 15px;font-size: 14px;color: #fff;text-decoration: none;}
 /* 头部样式 */
.record-header {text-align: center;padding: 15px;background: rgba(255, 255, 255, 0.9);border-radius: 15px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);margin: 15px;}
.record-header h1 {color: #e74c3c;margin-bottom: 10px;}
/* 筛选标签样式 */
.filter-tabs {display: flex;justify-content: center;margin-bottom: 25px;background: white;border-radius: 12px;padding: 10px;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);margin: 0 15px;display: none;}
.filter-tab {padding: 8px 20px;margin: 0 5px;border-radius: 20px;cursor: pointer;transition: all 0.3s ease;}
.filter-tab.active {background: #3498db;color: white;}
.record-list {display: flex;flex-direction: column;gap: 15px;margin: 15px;}

.record-item {background: white;border-radius: 12px;padding: 10px;display: flex;align-items: center;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);transition: transform 0.3s ease, box-shadow 0.3s ease;position: relative;overflow: hidden;}
.record-item:hover {transform: translateY(-3px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}
.record-item.win::before {content: '';position: absolute;left: 0;top: 0;height: 100%;width: 5px;background: linear-gradient(to bottom, #ff9a00, #ff5e62);}
.record-item.nowin::before {content: '';position: absolute;left: 0;top: 0;height: 100%;width: 5px;background: #95a5a6;}
.prize-icon {width: 60px;height: 60px;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-right: 10px;font-size: 24px;color: white;overflow: hidden;}
.prize-icon img {width: 100%;height: 100%;object-fit: contain;}
.prize-info {flex: 1;}
.prize-name {font-size: 14px;font-weight: bold;margin-bottom: 5px;}
.prize-time {color: #7f8c8d;font-size: 12px;}
.prize-status {padding: 5px 12px;border-radius: 20px;font-size: 12px;font-weight: bold;}       
.prize-status.pending {background: #fff3cd;color: #856404;}
.prize-status.received {background: #d4edda;color: #155724;}
.record-item.win .prize-icon {background-color: #e74c3c;}
.record-item.nowin .prize-icon {background-color: #95a5a6;}
.record-item.wind .prize-icon {background-color: #3498db;}

/* 二维码弹窗遮罩层 */
.modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);display: none;justify-content: center;align-items: center;z-index: 1000;opacity: 0;transition: opacity 0.3s ease;}   
.modal-overlay.active {display: flex;opacity: 1;}
/* 弹窗内容 */
.modal-content {background: white;border-radius: 20px;padding: 30px;max-width: 320px;width: 90%;text-align: center;
transform: scale(0.7);opacity: 0;transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);position: relative;}
.modal-overlay.active .modal-content {transform: scale(1);opacity: 1;}
.modal-overlay .close-btn {position: absolute;top: 15px;right: 20px;background: none;border: none;font-size: 2rem;color: #95a5a6;cursor: pointer;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: all 0.2s ease;}
.modal-overlay .close-btn:hover {background: #f5f5f5;color: #e74c3c;}
.qrcode-title {font-size: 1.4rem;color: #2c3e50;margin-bottom: 20px;font-weight: 600;}
.qrcode-container {width: 200px;height: 200px;margin: 0 auto 20px;padding: 10px;background: white;border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}
.qrcode-image {width: 100%;height: 100%;object-fit: contain;}
.qrcode-desc {color: #7f8c8d;font-size: 0.9rem;line-height: 1.5;}