body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url('/IMG/choujiangbeij.jpg') no-repeat center center;
    background-size: cover;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* My Prizes */
.my-prizes {
    position: absolute;
    bottom: 20px;
    width: 90%;
    max-height: 150px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 50;
    text-align: center;
}

.my-prizes h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
}

.my-prizes ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.my-prizes li {
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #eee;
    padding: 5px 0;
}

.my-prizes li:last-child {
    border-bottom: none;
}

.lottery-wrapper {
    width: 90%;
    max-width: 310px;
    position: relative;
    top: 10px;
}

.turnplate {
    display: block;
    width: 100%;
    position: relative;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.turnplate canvas.item {
    width: 100%;
}

.turnplate .pointer {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
    margin-left: -30px;
    margin-top: -30px;
    z-index: 10;
    background: #ff4081;
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    line-height: 1.2;
    text-align: center;
}
.turnplate .pointer::after {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left: -8px;
    border-width: 0 8px 15px;
    border-style: solid;
    border-color: transparent transparent #ff4081;
}

/* Rotation Animation for Background Image */
@-webkit-keyframes rotate-bg {
    from { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); }
    to { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotate-bg {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.rotating-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vw;
    height: 150vw;
    max-width: 800px;
    max-height: 800px;
    -webkit-animation: rotate-bg 10s linear infinite;
    animation: rotate-bg 10s linear infinite;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
}

.result-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 80%;
    max-width: 300px;
}

/* 仅针对中奖信息填写的弹窗使用特定背景 */
.info-modal-content {
    background: url('/IMG/zhongjiangxinxi.png') no-repeat center center;
    background-size: 100% 100%;
    padding: 115px 20px 20px 20px; /* Top padding increased to 115px to move content down (visually background moves up) */
    border-radius: 10px;
    text-align: center;
    width: 80%;
    max-width: 310px; /* Increased by 10px from 300px */
    min-height: 310px; /* Increased by 10px from 300px */
    box-shadow: none;
    position: relative;
}

.info-modal-content h2 {
    display: none;
}

/* 兑奖需知弹窗特殊样式 */
#redemptionModal .modal-content {
    max-width: 90%;
    width: 90%;
}

.close-circle-btn {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 30px;
    height: 30px;
    background: red;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 10;
    border: 2px solid white;
}

#userInfoForm {
    text-align: center;
}

.form-input {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.form-btn {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    background-color: #ff5722;
    color: white;
}

/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #212121;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column; 
  gap: 5px; 
} 

.loading-text { 
  color: white; 
  font-size: 14pt; 
  font-weight: 600; 
  margin-left: 10px; 
} 

.dot { 
  margin-left: 3px; 
  animation: blink 1.5s infinite; 
} 
.dot:nth-child(2) { 
  animation-delay: 0.3s; 
} 

.dot:nth-child(3) { 
  animation-delay: 0.6s; 
} 

.loading-bar-background { 
  --height: 30px; 
  display: flex; 
  align-items: center; 
  box-sizing: border-box; 
  padding: 5px; 
  width: 200px; 
  height: var(--height); 
  background-color: #212121 /*change this*/; 
  box-shadow: #0c0c0c -2px 2px 4px 0px inset; 
  border-radius: calc(var(--height) / 2); 
} 

.loading-bar { 
  position: relative; 
  display: flex; 
  justify-content: center; 
  flex-direction: column; 
  --height: 20px; 
  width: 0%; 
  height: var(--height); 
  overflow: hidden; 
  background: rgb(222, 74, 15); 
  background: linear-gradient( 
    0deg, 
    rgba(222, 74, 15, 1) 0%, 
    rgba(249, 199, 79, 1) 100% 
  ); 
  border-radius: calc(var(--height) / 2); 
  animation: loading 4s ease-out infinite; 
} 

.white-bars-container { 
  position: absolute; 
  display: flex; 
  align-items: center; 
  gap: 18px; 
} 

.white-bar { 
  background: rgb(255, 255, 255); 
  background: linear-gradient( 
    -45deg, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0) 70% 
  ); 
  width: 10px; 
  height: 45px; 
  opacity: 0.3; 
  rotate: 45deg; 
} 

@keyframes loading { 
  0% { 
    width: 0; 
  } 
  80% { 
    width: 100%; 
  } 
  100% { 
    width: 100%; 
  } 
} 

@keyframes blink { 
  0%, 
  100% { 
    opacity: 0; 
  } 
  50% { 
    opacity: 1; 
  } 
}

.btn-warning {
    background-color: #faad14;
}

.info-modal-content #resultDescription {
    color: white !important; /* Force white color for description */
}

.info-modal-content #resultName {
    color: white !important; /* Force white color for prize name */
}

.modal-content img {
    max-width: 100px;
    margin: 10px 0;
}

.modal-content button {
    background: #ff5722;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

/* 活动说明弹窗样式 */
.activity-info-content {
    display: flex;
    flex-direction: column;
    padding: 0 !important; /* 覆盖 modal-content 的 padding */
    max-height: 80vh; /* 限制高度 */
    width: 90% !important; /* 稍微宽一点 */
    max-width: 400px !important;
    overflow: hidden;
    border-radius: 10px; /* 确保圆角 */
}

.activity-header {
    background-color: #d32f2f; /* 红色背景 */
    color: white; /* 白色字体 */
    padding: 10px 15px;
    text-align: center;
}

.activity-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.activity-text {
    text-align: justify; /* 强制两端对齐 */
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.activity-text p {
    text-indent: 2em; /* 段落首行缩进2字符 */
    margin: 5px 0;
}

.close-activity-bottom-btn {
    background-color: #d32f2f; /* 红色 */
    color: white;
    border: none;
    padding: 8px 40px;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}