/* frontend/style.css */
body {
  position:static;
  margin: 0;
  overflow: hidden;
  background-color: #fff; /* 默认黑色背景 */
  color: white;
  font-family: 'Inter', sans-serif;
}

.container {
  position: absolute; /* 或尝试 position: absolute; */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction:column;
}

/* frontend/style.css */
.button-container {
  position: relative; /* 或尝试 position: absolute; */
  display: flex;
  width: 100vw;  /* 使用视口宽度 */
  max-width: 100%; /* 确保不超过父元素的宽度 */
  margin-top: auto;
  margin-bottom:100px;
  flex-direction:column;
  align-items:center;
  background-color: transparent;
  z-index:1;
}

.bets {
  position: absolute; /* 或尝试 position: absolute; */
  display: flex;
  top:30px;
  left:50%;
  transform: translateX(-50%); /* 将子元素向左移动自身宽度的一半 */
}

#cameraView {
  position:absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width:100%;
  object-fit: cover;
  z-index:-1;
}
#startButton, #captureButton {
  background-color: rgba(0, 140, 186, 0.7);
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  font-size: 1.2em;
  line-height: 80px; /* Ensure text is vertically centered */
  padding: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 1; /* Ensure above cameraView */
}
#loading {
  color: #ef4444;
  font-size: 20px;
  text-align: center;
  display: none;
  position: absolute; /* 绝对定位 */
  top: 50%;          /* 垂直居中（初步）*/
  left: 50%;         /* 水平居中 */
  transform: translate(-50%, -50%); /* 精确居中 */
  z-index: 2; /* 如果需要，确保在其他元素之上 */
}

#loader {
  position: absolute; /* 绝对定位 */
  display:none;
  top: 50%;          /* 垂直居中（初步）*/
  left: 50%;         /* 水平居中 */
  transform: translate(-50%, -50%); /* 精确居中 */
  height: 15px;
  aspect-ratio: 5;
  -webkit-mask: linear-gradient(90deg,#0000 ,#000 20% 80%,#0000);
  background: radial-gradient(closest-side at 37.5% 50%,#000 94%,#0000) 0/calc(80%/3) 100%;
  animation: l48 .75s infinite linear;
}

@keyframes l48 {
  100% {background-position: 36.36%}
}

#captureButton {
  display: none; /* "开始" 按钮初始显示 */
}
#startButton {
  display: block; /* "开始" 按钮初始显示 */
}

#startButton:active, #captureButton:active {
  background-color: rgba(0, 140, 186, 0.9);
  transform: scale(0.95);
}

.column {
  display: flex;
  flex-direction: column;
  margin-right:5px; /* Spacing between columns */
  height: 250px; /*  Add this line */
  justify-content: space-between; /* Add space between rows */
  display: block;
}

.row {
  display: flex;
  align-items: center;
  margin-bottom: 0px; /* Remove bottom margin from individual rows */
}

.number-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  margin-top:5px;
  color: white;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
.new-number-circle {
  width: 40px; /* 调整大小以匹配您的设计 */
  height: 40px;
  border-radius: 50%;
  background-color: #ef4444; /* 红色背景 */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em; /* 调整字体大小 */
  margin: 0 8px; /* 调整间距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
.new-special-number-circle {
  width: 40px; /* 调整大小以匹配您的设计 */
  height: 40px;
  border-radius: 50%;
  background-color: #3b82f6; /* 蓝色背景 */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em; /* 调整字体大小 */
  margin: 0 8px; /* 调整间距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

.red {
  background-color: #ef4444;
}

.gray-red {
  background-color: gray;
}

.blue {
  background-color: #3b82f6;
}

.gray-blue {
  background-color: gray;
}
.tips {
  position: absolute; /* 绝对定位 */
  top: 50%;          /* 垂直居中（初步）*/
  left: 50%;         /* 水平居中 */
  transform: translate(-50%, -50%); /* 精确居中 */
  width: fit-content;
  font-size: 40px;
  font-family: system-ui,sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #0000;
  -webkit-text-stroke: 1px #eb2e2e;
  background: 
    conic-gradient(from -135deg at 100% 50%,#eb2e2e 90deg,#0000 0) text no-repeat,
    conic-gradient(from -135deg at 1lh  50%,#0000 90deg,#eb2e2e 0) text no-repeat;
  animation: l6 2s linear infinite;
}
.tips:before {
  content: "还未开奖...";
}
@keyframes l6 {
  0%     {background-size: 0                200%;background-position:0 0   ,100% 0   }
  50%    {background-size: calc(60% + .5lh) 200%;background-position:0 0   ,100% 0   }
  50.01% {background-size: calc(60% + .5lh) 200%;background-position:0 100%,100% 100%}
  100%   {background-size: 0                200%;background-position:0 100%,100% 100%}
}