/* 使用scoped会导致样式无法作用到实际 append 到 document.body 下的 DOM 节点 */
#float-btn {
  position: absolute;
  right: 0;
  top: 30px; /* 初始高度 */
  width: 40px;
  height: 60px;
  background: url(../../assets/img/8b816e522d1d6a46b75f.svg) no-repeat center / 12px;
  background-color: white;
  border-radius: 8px 0 0 8px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  border-right: none; /* 去掉右边框 */
  cursor: pointer;
  z-index: 9;
  touch-action: none;
  -webkit-tap-highlight-color: transparent; /* 去掉点击高亮 */
}

/* 遮罩层样式 */
.float-mask {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px; /* 按钮宽度加缓冲区 */
  height: 100%;
  z-index: 999;
  background: transparent;
  touch-action: none;
}
#menu-bar {
  position: absolute;
  right: 50px; /* 留出浮动按钮与空隙距离 */
  top: 30px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 0 16px;
  background-color: #fff;
  color: #333;
  border-radius: 8px;
  border: 1px solid #000;
  transition: opacity 0.3s;
  z-index: 9;
}
#menu-bar::before {
  content: "";
  position: absolute;
  right: -5px; /* 放在提示框的左侧 */
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-right: 1px solid #000;
  border-top: 1px solid #000;
  z-index: -1; /* 放在提示框下面 */
}
.menu-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000;
  font-size: 10px;
  padding: 4px 0;
}
.menu-option .icon {
  width: 22px;
  height: 22px;
  border: none;
  flex-shrink: 0; /* 确保图片不会被压缩 */
}

/* 移动端专属布局 */
@media (max-width: 1024px) {
#float-btn {
    width: 30px;
    height: 50px;
}
#menu-bar {
    right: 40px;
    height: 50px;
}
}


/* 全局样式 */
body,
html {
  margin: 0;
  padding: 0;
  height: 100%; /* 确保页面根元素继承浏览器窗口的高度 */
  overflow-y: scroll; /* 让页面可以滚动 */

  /* 禁用文字选中和长按弹出菜单 */
  -webkit-user-select: none; /* Chrome / Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none;
  -webkit-touch-callout: none; /* 禁止 iOS 长按弹出菜单 */
  overscroll-behavior: none; /* 禁止触发“橡皮筋”拉动效果 */
}
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
html {
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: normal;
  /* color: rgba(0, 0, 0, 0.87); */
  background: #111827;
}

/* pc端专属布局 */
@media (min-width: 1024px) {
html {
    background-color: #ffffff;
}
}
.app-container {
  height: 100vh;
  height: 100dvh; /* 自动避开工具栏 */
  width: 100%; 
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}


.container[data-v-4b180c07] {
  flex: 1; /* 让组件在 flex 容器中自动撑开 */
  height: 100%;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.message-list[data-v-4b180c07] {
  flex: 1;
  min-height: 0; /* 必须：允许内容收缩，产生内部滚动条 */
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 解决 iOS 滚动卡顿 */
  -webkit-overflow-scrolling: touch;
  /* background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); */
}
.msg-item[data-v-4b180c07] {
  font-size: 1.1rem;
  line-height: 1.4;
  width: 100%; /* 解决消息条目文字太长导致撑开宽度的问题 */
  max-width: 100%;
  word-break: break-all; /* 强制长单词/网址换行 */
  white-space: normal;
  box-sizing: border-box;
}
.msg-item.system[data-v-4b180c07] {
  color: #94a3b8;
}
.msg-item .user[data-v-4b180c07] {
  color: #38bdf8;
  margin-right: 4px;
}
.msg-item.self .msg[data-v-4b180c07] {
  color: #4ade80;
}
.chat-input[data-v-4b180c07] {
  padding: 8px;
}
.chat-input input[data-v-4b180c07] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  outline: none;
}

/* 移动端专属布局 */
@media (max-width: 1024px) {
.msg-item[data-v-4b180c07] {
    font-size: 0.9rem;
}
.msg-input[data-v-4b180c07] {
    font-size: 16px; /* 最小字体防止移动端放大 */
}
}


.live-feed[data-v-464017ca] {
  flex: 1; /* 让组件在 flex 容器中自动撑开 */
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8px;
  overflow: hidden;
}
.pager[data-v-464017ca] {
  flex: 1;
  overflow: hidden; /* 隐藏溢出的第二页 */
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.pager-track[data-v-464017ca] {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.page[data-v-464017ca] {
  flex: 0 0 100%; /* 每个页面宽度等于容器宽度，且不被压缩 */
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 禁止外层滚动 */
}

/* tab */
.feed-tabs[data-v-464017ca] {
  display: flex;
  justify-content: space-between; /* 左右分列 */
  align-items: center;
  padding: 0 12px;
  height: 36px; /* 固定高度，确保布局稳定 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tabs-left[data-v-464017ca] {
  display: flex;
  gap: 16px;
}
.feed-tabs span[data-v-464017ca] {
  opacity: 0.5;
  cursor: pointer;
  /* 去除移动端点击时的蓝色外框或高亮 */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.feed-tabs span.active[data-v-464017ca] {
  opacity: 1;
  font-weight: 600;
  color: #27ffa5;
}
.online-status[data-v-464017ca] {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.status-dot[data-v-464017ca] {
  width: 6px;
  height: 6px;
  background: #27ffa5;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 8px #27ffa5;
  animation: pulse-green-464017ca 2s infinite;
}
@keyframes pulse-green-464017ca {
0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(39, 255, 165, 0.7);
}
70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(39, 255, 165, 0);
}
100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(39, 255, 165, 0);
}
}
.list-wrapper[data-v-464017ca] {
  padding: 6px; /* 统一在这里留出边框外扩的空间 */
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.bubble-list[data-v-464017ca] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* 内部不再设 padding 和 overflow */
  padding: 0;
  overflow: visible;
  /* 内部滚动区允许局部回弹，但不会触发整个页面滚动 */
  overscroll-behavior-y: contain;
  /* 解决 iOS 滚动卡顿 */
  -webkit-overflow-scrolling: touch;
}

/* 消除不同列表之间的缝隙 */
.dynamic-part[data-v-464017ca] {
  margin-top: 4px; /* 保持与 gap 一致 */
}
.bubble[data-v-464017ca] {
  height: 32px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1.2;
  box-sizing: border-box;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.25s ease;
  border: 1px solid transparent;
}
.bubble .row-content[data-v-464017ca] {
  display: flex;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}
.bubble .row-content .text-body[data-v-464017ca] {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0; /* 允许内部元素截断 */
  overflow: hidden;
}
.bubble .row-content .rank[data-v-464017ca] {
  width: 28px;
  font-weight: 800;
  font-style: italic;
  color: #fbbf24;
  flex-shrink: 0;
}
.bubble .row-content .name[data-v-464017ca] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px; /* 限制最大长度 */
  font-weight: 500;
}
.bubble .row-content .small-name[data-v-464017ca] {
  font-size: 13px;
  opacity: 0.8;
  max-width: 80px;
}
.bubble .row-content .win-count[data-v-464017ca] {
  margin-left: auto; /* 自动将元素推向最右侧 */
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  color: rgba(255, 255, 255, 0.5);
}
.bubble .row-content .text-content[data-v-464017ca] {
  flex-shrink: 0;
  font-weight: bold;
  font-size: 18px;
  margin-left: 8px;
}
.bubble.normal[data-v-464017ca] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
}
.bubble.slow[data-v-464017ca] {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
  color: #fff;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
  /* animation: active-pulse 1.5s infinite; */
}
@keyframes active-pulse-464017ca {
0% {
    border-color: rgba(59, 130, 246, 0.4);
}
50% {
    border-color: rgba(59, 130, 246, 1);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}
100% {
    border-color: rgba(59, 130, 246, 0.4);
}
}
.bubble.correct[data-v-464017ca] {
  /* 使用透明度渐变，保留背景质感 */
  background: linear-gradient(
    135deg,
    rgba(50, 210, 167, 0.8),
    rgba(28, 191, 137, 0.8)
  );
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.bubble.correct[data-v-464017ca] {
  animation: correct-pop-464017ca 0.6s ease-out;
}
@keyframes correct-pop-464017ca {
0% {
    transform: scale(0.92);
}
60% {
    transform: scale(1.08);
}
100% {
    transform: scale(1);
}
}
.bubble.wrong[data-v-464017ca] {
  background: linear-gradient(
    135deg,
    rgba(255, 107, 107, 0.8),
    rgba(224, 59, 59, 0.8)
  );
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.bubble.wrong[data-v-464017ca] {
  animation: wrong-shake-464017ca 0.45s ease-in-out;
}
@keyframes wrong-shake-464017ca {
0% {
    transform: translateX(0);
}
25% {
    transform: translateX(-6px);
}
50% {
    transform: translateX(6px);
}
75% {
    transform: translateX(-4px);
}
100% {
    transform: translateX(0);
}
}
.bubble.self[data-v-464017ca]::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid rgba(255, 215, 0, 0.85);
  pointer-events: none;
}

/* .bubble.self {
  transform: scale(1.06);
  font-weight: 600;
} */

/* .bubble.self.correct::before {
  border-color: #fff;
}

.bubble.self.wrong::before {
  border-color: rgba(255, 255, 255, 0.9);
} */

/* FLIP 动画核心 */
.bubble-move[data-v-464017ca] {
  transition: transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 进入和离开动画：气泡弹出和消失 */
.bubble-enter-from[data-v-464017ca] {
  opacity: 0;
  transform: scale(0.5) translateY(-20px);
}
.bubble-leave-to[data-v-464017ca] {
  opacity: 0;
  transform: translateX(40px);
}
.bubble-leave-active[data-v-464017ca] {
  position: absolute; /* 离开时脱离文档流，让下方元素平滑上移 */
  width: 100%;
  transition: all 0.25s ease;
}

/* 移动端专属布局 */
@media (max-width: 1024px) {
.bubble[data-v-464017ca] {
    height: 32px;
    font-size: 14px;
    padding: 2px 10px;
}
.bubble .row-content .rank[data-v-464017ca] {
    width: 24px;
    font-size: 12px;
}
.bubble .row-content .text-content[data-v-464017ca] {
    font-size: 16px;
    margin-left: 6px;
}
.online-status[data-v-464017ca] {
    font-size: 12px;
}
}


/* 表情面板自适应高度 */
.emoji-chat-panel[data-v-1a81c842] {
  display: flex;
  flex-direction: column;
  background: #111827;
  border-radius: 12px;
  height: min(260px, 35vh);
  overflow: hidden;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
}

/* 顶部输入区 */
.input-preview-bar[data-v-1a81c842] {
  display: flex;
  padding: 6px 10px;
  gap: 10px;
  background: #0f172a;
  border-bottom: 1px solid #1f2937;
}
.preview-input[data-v-1a81c842] {
  flex: 1;
  background: #111827;
  border: 1px solid #1f2937;
  color: #e5e7eb;
  border-radius: 999px;
  padding: 0 16px;
  height: 34px;
  font-size: 16px;
}
.send-btn[data-v-1a81c842] {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border: none;
  height: 32px;
  padding: 0 14px;
  font-size: 14px;
  border-radius: 999px;
  font-weight: 600;
  transition: 0.2s;
}
.send-btn[data-v-1a81c842]:hover {
  filter: brightness(1.1);
}
.send-btn[data-v-1a81c842]:disabled {
  opacity: 0.4;
}

/* 表情区域 */
.emoji-grid-wrapper[data-v-1a81c842] {
  flex: 1;
  position: relative;
  overflow-y: auto;
  padding: 12px;
  /* 禁止滚动到边缘时的橡皮筋回弹特效 */
  overscroll-behavior-y: contain; 
  -webkit-overflow-scrolling: touch; /* 保证 iOS 滚动流畅，但配合 overscroll 使用 */
}
.emoji-grid[data-v-1a81c842] {
  display: grid;
  /* 使用 auto-fill 让浏览器根据宽度自动决定放多少个 */
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 10px;
  justify-content: center;
}
.emoji-item[data-v-1a81c842] {
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  cursor: pointer;
  border-radius: 10px;
  transition: 0.15s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.emoji-item[data-v-1a81c842]:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
.emoji-item[data-v-1a81c842]:active {
  transform: scale(1.15);
  background: rgba(255, 255, 255, 0.1);
}

/* 悬浮退格按钮 */
.floating-delete[data-v-1a81c842] {
  position: sticky;
  bottom: 6px;
  margin-left: auto;

  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1f2937;
  border: 1px solid #374151;
  color: #9ca3af;
  font-size: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: 0.2s;
  z-index: 5;
}
.floating-delete[data-v-1a81c842]:hover {
  color: white;
  background: #374151;
}
@media (max-width: 1024px) {
.emoji-chat-panel[data-v-1a81c842] {
    height: min(200px, 32vh);
}
.preview-input[data-v-1a81c842],
  .send-btn[data-v-1a81c842] {
    height: 32px;
}
}


.page[data-v-c043fb9c] {
  min-height: 100%;
  /* background: #111827; */
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
  color: #fff;
}
.game-layout[data-v-c043fb9c] {
  display: grid;
  /* 左右两边留出一样的固定宽度，中间 1fr 自动占据正中心 */
  /* grid-template-columns: 280px 1fr 280px; */
  grid-template-columns: 300px 1fr 200px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1400px; /* 稍微放宽一点，让 1fr 更有表现力 */
  margin: 0 auto;
  height: 100vh;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ===== 侧边区域 ===== */
.side-area[data-v-c043fb9c] {
  height: 80vh; /* 设定一个独立高度 */
  max-height: 700px; /* PC端不宜过高，保持精致感 */
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease; /* 增加平滑过渡 */
}
.side-area .livefeed[data-v-c043fb9c] {
  background: rgba(31, 41, 55, 0.5); /* 稍微更透明一点 */
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.side-area .chat[data-v-c043fb9c] {
  background: rgba(31, 41, 55, 0.8); /* 稍微深一点，让文字更清晰 */
  border-left: 2px solid rgba(39, 255, 165, 0.2); /* 给右侧加一个极细的侧边光线，呼应主题色 */
}
.livefeed-area[data-v-c043fb9c] {
  height: 80vh; /* 设定一个独立高度 */
  max-height: 700px; /* PC端不宜过高，保持精致感 */
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
  background: rgba(31, 41, 55, 0.5); /* 更透明一点 */
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.chat-area[data-v-c043fb9c] {
  height: 80vh;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
  padding: 12px;
  background: rgba(31, 41, 55, 0.8); /* 深一点，让文字更清晰 */
  border-left: 2px solid rgba(39, 255, 165, 0.2); /* 加一个极细的侧边光线，呼应主题色 */
}
.chat-tabs[data-v-c043fb9c] {
  display: flex;
  gap: 16px;
  padding: 0 12px;
}
.chat-tabs span[data-v-c043fb9c] {
  font-weight: 600;
  color: #27ffa5;
  cursor: pointer;
  /* 去除移动端点击时的蓝色外框或高亮 */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* ===== Battle Area ===== */
.battle-area[data-v-c043fb9c] {
  height: 65vh;
  max-height: 600px;
  background: #0f172a;
  border-radius: 18px;
  padding: 24px; /* PC 端内边距稍大 */
  display: flex;
  flex-direction: column;
  min-height: 0; /* 关键：强制容器可以收缩，不被内容撑破 */
  overflow: hidden; /* 确保超出圆角的部分被剪裁 */
  position: relative; /* 建立定位上下文 */
}
.main-block[data-v-c043fb9c] {
  flex: 0 0 auto; /* 不伸缩，由内容决定高度 */
  text-align: center;
}
.operation-block[data-v-c043fb9c] {
  flex: 1; /* 占据剩余所有高度 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 在剩余空间内垂直居中 */
  text-align: center;
}
#question-content[data-v-c043fb9c] {
  border: 2px solid #27ffa5;
  border-radius: 15px;
  padding: 16px;
  background: rgba(39, 255, 165, 0.05);
  display: flex;
  flex-direction: column;
}
.answer-content[data-v-c043fb9c] {
  height: 48px; /* 或 min-height */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center;
  font-size: 2rem;
  line-height: 1.15;
  white-space: nowrap;
  /* overflow: hidden;  */
}
#question[data-v-c043fb9c] {
  position: relative;
  font-size: 3rem;
  line-height: 1.1;
}
.prompt[data-v-c043fb9c] {
  text-align: center;
  font-size: 1rem;
}
.answer-content span[data-v-c043fb9c] {
  font-weight: bold;
  color: #7dd3fc; /* 浅蓝 */
  text-shadow: 0 0 6px rgba(125, 211, 252, 0.4);
}
.answer-content .correct[data-v-c043fb9c] {
  color: #27ffa5;
  text-shadow: 0 0 10px rgba(39, 255, 165, 0.65);
  animation: pop-c043fb9c 0.35s ease-out;
}
@keyframes pop-c043fb9c {
0% {
    transform: scale(0.95);
}
60% {
    transform: scale(1.08);
}
100% {
    transform: scale(1);
}
}
.answer-content .wrong[data-v-c043fb9c] {
  color: #fb7185; /* 柔和红 */
  text-shadow: 0 0 8px rgba(251, 113, 133, 0.55);
  animation: shake-c043fb9c 0.4s ease;
}
@keyframes shake-c043fb9c {
0% {
    transform: translateX(0);
}
25% {
    transform: translateX(-3px);
}
50% {
    transform: translateX(3px);
}
75% {
    transform: translateX(-2px);
}
100% {
    transform: translateX(0);
}
}
.answer-bar[data-v-c043fb9c] {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.digit-line[data-v-c043fb9c] {
  width: 32px;
  height: 40px;
  border-bottom: 3px solid rgba(255, 255, 255, 0.3);
  text-align: center;
}
.statistics[data-v-c043fb9c] {
  display: grid;
  /* 2列，每列占据可用空间的1倍 */
  grid-template-columns: 1fr 1fr;
  /* 确保容器有固定或最大的尺寸以便子元素可以计算百分比 */
  width: 100%;
  padding: 0 12px;
}
.statistics .stats-item[data-v-c043fb9c] {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.stats-icon[data-v-c043fb9c] {
  position: relative; /* 确保提示框相对于此容器定位 */
  display: flex;
  align-items: center;
}
.stats-icon .icon[data-v-c043fb9c] {
  width: 24px;
  height: 24px;
  border: none;
  margin: 0 8px;
  flex-shrink: 0; /* 确保图片不会被压缩 */
}
.statistics .stats-data[data-v-c043fb9c] {
  position: relative;
  display: flex;
  align-items: center;
}
.stats-val[data-v-c043fb9c] {
  font-weight: 400;
  line-height: 1.3;
  font-size: 1.6rem;
  line-height: 110%;
  margin: 2px 0;
  white-space: nowrap;
  overflow: hidden;
}
.stats-val.bonus[data-v-c043fb9c] {
  color: #00e1ff;
}
.stats-val.lives[data-v-c043fb9c] {
  color: #ff6961;
}

/* 提示框基本样式 */
.icon-msg[data-v-c043fb9c] {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  font-size: 0.8rem;

  /* 视觉样式 */
  background-color: #fff;
  color: #444;
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
  white-space: nowrap; /* 防止文本换行 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;

  /* 隐藏和动画 */
  opacity: 0;
  visibility: hidden; /* 使用 visibility 确保不占用点击空间 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 显示时的样式 */
.icon-msg.active[data-v-c043fb9c] {
  opacity: 1;
  visibility: visible;
}

/* 添加一个小箭头 */
.icon-msg[data-v-c043fb9c]::before {
  content: "";
  position: absolute;
  left: 50%; /* 水平定位到父元素（提示框）的中心 */
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-top: none;
  border-left: none;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  z-index: -1; /* 放在提示框下面 */
}
#progress-bar-cont[data-v-c043fb9c] {
  margin: 16px 0;
  height: 14px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
#progress-bar[data-v-c043fb9c] {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #09ff00, #eeff00, #f00);
  transform-origin: left;
  transition: transform 0.05s linear;
}

/* ===== Keyboard ===== */
.standard-keyboard[data-v-c043fb9c] {
  display: grid;
  /* 基础采用 5 列布局 */
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.standard-keyboard button[data-v-c043fb9c] {
  height: 38px;
  border-radius: 6px;
  font-size: 1rem;
  border: none;
  background: #1e293b;
  color: #f8fafc;
  transition: opacity 0.1s;
  /* 去除移动端点击时的蓝色外框或高亮 */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* 确保聚焦时不会保留 active 的透明度 */
.standard-keyboard button[data-v-c043fb9c]:focus {
  outline: none;
  /* 显式声明 focus 时透明度为 1，防止它卡在 0.6 */
  opacity: 1;
}
.standard-keyboard button[data-v-c043fb9c]:active {
  opacity: 0.6 !important;
}

/* 第三行特殊处理：让 OK 键占据最后两个格子的宽度 */
.btn-ok[data-v-c043fb9c] {
  grid-column: span 2;
  background: #059669 !important;
  color: #fff !important;
  font-size: 0.85rem !important;
}
.btn-del[data-v-c043fb9c] {
  background: #b91c1c !important;
  color: #fff !important;
  font-size: 0.75rem !important;
}
.spec-btn[data-v-c043fb9c] {
  font-size: 24px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.spec-btn[data-v-c043fb9c] {
  position: relative;
  font-size: 0; /* 隐藏原始字符 */
}
.spec-btn[data-v-c043fb9c]::before {
  content: attr(data-char);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

/* ===== buzz buttons ===== */
.buzz-btn[data-v-c043fb9c] {
  width: 100%;
  height: 64px;
  margin: 10px 0; /* 增加内边距扩张，视觉/手感更好 */
  position: relative;
  border-radius: 14px;
  font-size: 1.3rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, background 0.25s, box-shadow 0.25s;
}
.buzz-btn[data-v-c043fb9c] {
  /* 禁用浏览器默认的点击延迟和双击缩放逻辑 */
  touch-action: manipulation; 
  /* 禁止用户长按选中按钮文字 */
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* 隐形扩展点击区域 */
.buzz-btn[data-v-c043fb9c]::after {
  content: '';
  position: absolute;
  top: -10px;    /* 向上扩展 10px */
  bottom: -10px; /* 向下扩展 10px */
  left: 0;
  right: 0;
}
.buzz-btn[data-v-c043fb9c]:focus,
.buzz-btn[data-v-c043fb9c]:active {
  outline: none;
  box-shadow: none;
}
.buzz-btn.idle[data-v-c043fb9c] {
  background: linear-gradient(135deg, #fbbf24, #fb923c);
  box-shadow: 0 12px 26px rgba(251, 146, 60, 0.55);
  color: #1f2937;
  transition: all 0.1s; /* 响应要极快 */
}
.buzz-btn.idle[data-v-c043fb9c]:active {
  /* transform: scale(0.96); */
  transform: translateY(4px); /* 点击下沉感 */
  box-shadow: 0 6px 13px rgba(251, 146, 60, 0.55);
}
.buzz-btn.preparing[data-v-c043fb9c] {
  background: rgba(56, 189, 248, 0.25);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
  cursor: default;
  animation: pulse-c043fb9c 1.6s ease-in-out infinite;
}
@keyframes pulse-c043fb9c {
0% {
    opacity: 0.6;
}
50% {
    opacity: 1;
}
100% {
    opacity: 0.6;
}
}
.buzz-btn.waiting[data-v-c043fb9c] {
  background: #1f2937;
  color: #9ca3af;
  cursor: wait;
}
.buzz-btn.waiting[data-v-c043fb9c]::after {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid #9ca3af;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  margin-left: 8px;
  animation: spin-c043fb9c 0.8s linear infinite;
}
@keyframes spin-c043fb9c {
to {
    transform: rotate(360deg);
}
}
.buzz-btn.failed[data-v-c043fb9c],
.buzz-btn.error[data-v-c043fb9c] {
  background: linear-gradient(135deg, #ef4444, #7f1d1d);
  color: #fff;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
  animation: shake-c043fb9c 0.35s;
}
@keyframes shake-c043fb9c {
0% {
    transform: translateX(0);
}
25% {
    transform: translateX(-4px);
}
50% {
    transform: translateX(4px);
}
75% {
    transform: translateX(-3px);
}
100% {
    transform: translateX(0);
}
}
.buzz-btn.expired[data-v-c043fb9c] {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  cursor: not-allowed;
}
.buzz-btn.success[data-v-c043fb9c] {
  background: linear-gradient(135deg, #27ffa5, #10b981);
  color: #053b2f;
  box-shadow: 0 6px 18px rgba(39, 255, 165, 0.35);
  cursor: not-allowed;
}

/* ===== message input ===== */
.bottom-input[data-v-c043fb9c] {
  width: 100%;
  height: 44px;
  margin-top: 24px;
}
.proxy-input[data-v-c043fb9c],
.msg-input[data-v-c043fb9c] {
  width: 100%;
  height: 100%;
  padding: 0 14px;
  font-size: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
  outline: none;
}
.proxy-input[data-v-c043fb9c] {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #94a3b8;
}
.msg-input[data-v-c043fb9c]::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* 移动端专属布局 */
@media (max-width: 1024px) {
.page[data-v-c043fb9c] {
    padding: 0; /* 移除外边距，利用全屏空间 */
    overflow: hidden;
}
.game-layout[data-v-c043fb9c] {
    display: flex;
    flex-direction: column; /* 顶部动态 -> 中间题目 -> 底部交互 */
    height: 100vh; /* 回退方案 */
    height: 100dvh; /* 自动避开工具栏 */
    padding: 12px;
    gap: 10px;
}
.livefeed-area[data-v-c043fb9c] {
    flex: 0 0 35%;
    height: 35%;
    min-height: 0; /* 允许子项收缩到小于其内容宽度 */
    width: 100%;
}
.battle-area[data-v-c043fb9c] {
    flex: 1; /* 占据下方 65% 左右的空间 */
    height: auto;
    max-height: none;
    width: 100%;
    padding: 8px;
    touch-action: manipulation; /* 只允许滚动和持续缩放（双指捏合），但禁用双击缩放 */
}
#question-content[data-v-c043fb9c] {
    padding: 8px 16px;
    border-width: 1px;
}
#question[data-v-c043fb9c] {
    font-size: 2.1rem;
    line-height: 1;
    padding: 10px 0;
}
.prompt[data-v-c043fb9c] {
    font-size: 0.8rem;
}
.answer-content[data-v-c043fb9c] {
    font-size: 1.6rem;
    line-height: 1.15;
}
.answer-content span[data-v-c043fb9c] {
    text-shadow: 0 0 6px rgba(39, 255, 165, 0.5);
}
.digit-line[data-v-c043fb9c] {
    width: 26px;
    height: 36px;
}
.notice-text[data-v-c043fb9c] {
    padding: 10px 14px;
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);

    font-size: 14px;
}
.stats-val[data-v-c043fb9c] {
    font-size: 1.3rem;
}
#progress-bar-cont[data-v-c043fb9c] {
    height: 10px;
}
}

/* 视觉隐藏类，不可见但可被屏幕阅读器读取 */
.visually-hidden[data-v-c043fb9c] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px; /* 确保不占用任何空间 */
  overflow: hidden;
  clip: rect(0, 0, 0, 0); /* 旧版剪裁 */
  clip-path: inset(50%); /* 新版剪裁 */
  white-space: nowrap; /* 保持单行 */
  border: 0;
}


.page[data-v-3419364f] {
  height: 100%;
  background: #111827;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

/* 页面内容宽度 */
.content[data-v-3419364f] {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ====== Landing Card ====== */
.card[data-v-3419364f] {
  width: 100%;
  max-width: 640px;
  background: #1f2937;
  position: relative;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  transition: all 0.5s;
}
.logo-section[data-v-3419364f] {
  text-align: center;
  margin-bottom: 28px;
}
.logo[data-v-3419364f] {
  width: 160px; /* Logo 显示尺寸（可调整） */
  height: 160px;
  object-fit: contain; /* 避免图片被拉伸 */
  display: block;
  margin: 0 auto; /* 居中 */
}
.title[data-v-3419364f] {
  margin-top: 12px;
  color: #9ca3af;
  font-size: 20px;
  font-weight: 500;
}
.form-area[data-v-3419364f] {
  margin-bottom: 24px;
}
.label[data-v-3419364f] {
  font-size: 14px;
  color: #d1d5db;
  margin-bottom: 8px;
  display: block;
}
.input[data-v-3419364f] {
  width: 100%;
  padding: 12px 20px;
  text-align: center;
  background: #374151;
  border: 1px solid #4b5563;
  border-radius: 12px;
  color: #ffffff;
  font-size: 18px;
  outline: none;
}
.input-shake[data-v-3419364f] {
  animation: shake-3419364f 0.3s ease;
  border-color: #ff4d4f !important;
  box-shadow: 0 0 6px rgba(255, 77, 79, 0.6);
}
@keyframes shake-3419364f {
0% {
    transform: translateX(0);
}
20% {
    transform: translateX(-4px);
}
40% {
    transform: translateX(4px);
}
60% {
    transform: translateX(-4px);
}
80% {
    transform: translateX(4px);
}
100% {
    transform: translateX(0);
}
}

/* Start 按钮 */
.start-btn[data-v-3419364f] {
  width: 100%;
  padding: 14px;
  font-size: 20px;
  font-weight: bold;
  border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  box-shadow: 0 8px 18px rgba(234, 88, 12, 0.35);
  color: #111827;
  display: flex;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  border: none;
}
.start-btn.disabled[data-v-3419364f] {
  opacity: 0.5;
  cursor: not-allowed;
}
.start-icon[data-v-3419364f] {
  width: 24px;
  height: 24px;
}

/* --- 在线人数样式 --- */
.online-tag[data-v-3419364f] {
  position: absolute;
  top: 16px; /* 距离顶部的距离 */
  right: 16px; /* 距离右侧的距离 */
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(39, 255, 165, 0.08); /* 极淡的绿色背景 */
  border: 1px solid rgba(39, 255, 165, 0.2);
  padding: 4px 14px;
  border-radius: 20px;
  color: #27ffa5; /* 明亮的绿色主题色 */
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px; /* 与下方 Logo 的间距 */
  letter-spacing: 0.5px;
  transition: all 0.3s ease; /* 颜色切换时平滑过度 */
}

/* 呼吸灯圆点 */
.status-dot[data-v-3419364f] {
  width: 7px;
  height: 7px;
  background-color: #27ffa5;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 10px rgba(39, 255, 165, 0.8);
}

/* 呼吸光晕动画 */
.status-dot[data-v-3419364f]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  border-radius: 50%;
  animation: pulse-3419364f 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-3419364f {
0% {
    transform: scale(1);
    opacity: 0.8;
}
50% {
    transform: scale(2.5);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 0;
}
}
.is-checking[data-v-3419364f] {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.2);
}
.is-checking .status-dot[data-v-3419364f] {
  background-color: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
}

.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:flex}.vue-recycle-scroller__slot{flex:auto 0 0}.vue-recycle-scroller__item-wrapper{flex:1;box-sizing:border-box;overflow:hidden;position:relative}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{position:absolute;top:0;left:0;will-change:transform}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%}.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}

.leaderboard-container[data-v-74072eea] {
  background-color: #fff;
  height: 100%;
}
.leaderboard-content[data-v-74072eea] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.personal[data-v-74072eea] {
  /* 头部区域的高度由内容决定，或者设置固定高度 */
  padding: 16px;
  background-color: #111827;
  border-bottom: 1px solid #ccc;
  flex-shrink: 0; /* 防止头部被压缩 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nickname[data-v-74072eea] {
  color: #f9fafb;
  font-size: 1.4em;
  font-weight: bold;
}
.result[data-v-74072eea] {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 8px;
}
.result-item[data-v-74072eea] {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 1.1em;
  font-family: "Courier New", monospace; /* 等宽字体 */
  font-weight: bold;
  color: #f9fafb;
}
.result-tag[data-v-74072eea] {
  font-size: 0.9em;
  color: #00cc66;
}
/* 在 VirtualList 组件上应用样式 */
.virtual-list-container[data-v-74072eea] {
  flex-grow: 1; /* 让列表占据所有剩余空间 */
  overflow: hidden; /* 隐藏溢出内容，确保滚动只发生在列表内部 */
}
/* 注意：vue-virtual-scroller 的类名需要填满父容器 */
.scroller[data-v-74072eea] {
  height: 100% !important;
  overflow-y: auto !important;
}
/* 加载中UI样式 */
.loading-more[data-v-74072eea] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  color: #888;
}
/* 加载中的转圈特效 */
.spinner[data-v-74072eea] {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #333;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin-74072eea 1s linear infinite;
  margin-right: 10px;
}
@keyframes spin-74072eea {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
/* 列表条目 CSS 样式 ... */
.data-item[data-v-74072eea] {
  display: flex;
  align-items: center;
  height: 60px; /* 必须保证高度和 item-size 匹配 */
  padding: 0 10px;
  /* border-bottom: 1px solid #eee; */
}
.column-title[data-v-74072eea] {
  color: #888;
}
.personal-item[data-v-74072eea] {
  color: #f39c12;
}
.rank-tag[data-v-74072eea],
.like-tag[data-v-74072eea] {
  min-width: 50px;
  flex-shrink: 0; /* 防止被压缩 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rank[data-v-74072eea] {
  font-weight: bold;
}
.likes[data-v-74072eea] {
  font-size: 0.8em;
  color: #888;
}
/* 中间内容占据所有剩余空间 */
.user-content[data-v-74072eea] {
  flex-grow: 1;
  display: flex;
  min-width: 0; /* 允许内部元素缩小 */
  margin: 0 10px;
}
.user-name[data-v-74072eea],
.user-score[data-v-74072eea] {
  flex-grow: 1;
  flex-basis: 0; /* 确保平均分配 */
  overflow: hidden; /* 隐藏溢出内容 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.user-name[data-v-74072eea] {
  flex-grow: 7;
}
.user-score[data-v-74072eea] {
  text-align: center;
  flex-grow: 3;
}
.name[data-v-74072eea] {
  font-weight: 500;
}
.score[data-v-74072eea] {
  /* text-align: right; */
  font-weight: bold;
}
.icon[data-v-74072eea] {
  width: 18px;
  height: 18px;
  padding: 0;
}

/* 视觉隐藏类，不可见但可被屏幕阅读器读取 */
.visually-hidden[data-v-74072eea] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px; /* 确保不占用任何空间 */
  overflow: hidden;
  clip: rect(0, 0, 0, 0); /* 旧版剪裁 */
  clip-path: inset(50%); /* 新版剪裁 */
  white-space: nowrap; /* 保持单行 */
  border: 0;
}

/** 页面初始化加载时的等待样式 **/
/* 遮罩背景 */
.layer[data-v-74072eea] {
  position: fixed; /* 使用 fixed 确保遮罩覆盖整个视口 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 略微加深背景，提高可读性 */
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99; /* 确保它在最顶层 */
}

/* 模态框 - 简化为居中容器 */
.modal[data-v-74072eea] {
  border-radius: 12px;
  padding: 24px 32px; /* 增加内边距 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center; /* 居中内容 */
  font-family: sans-serif;
  background-color: #1f1f1f;
  color: #fff;
}

/* 新增：简洁的 CSS 旋转加载器 */
.loading-spinner[data-v-74072eea] {
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-left-color: #00cc66; /* 使用品牌色或醒目的颜色 */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: simple-spin-74072eea 1s linear infinite;
  margin-bottom: 10px;
}
@keyframes simple-spin-74072eea {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}

/* 保持 loading 文本样式，但调整 margin */
.lt[data-v-74072eea] {
  color: #fff;
  /* 移除 Roboto 字体依赖 */
  font-family: sans-serif;
  margin: 0; /* 清除不必要的 margin */
  text-align: center;
  font-weight: bold; /* 略微加粗 */
  letter-spacing: 2px;
  text-transform: uppercase;
}


.about-page[data-v-471b645c] {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px;
  font-family: Inter, system-ui;
  color: #f8fafc;
  background: #111827;
}

/* Hero */
.hero[data-v-471b645c] {
  text-align: center;
  margin-bottom: 28px;
}
.logo[data-v-471b645c] {
  width: 110px;
  opacity: 0.9;
}
.page-title[data-v-471b645c] {
  font-size: 24px;
  font-weight: 700;
  margin-top: 12px;
}
.lead[data-v-471b645c] {
  color: #cbd5e1;
  max-width: 760px;
  margin: 8px auto 0;
}
.btn[data-v-471b645c] {
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}
.btn.primary[data-v-471b645c] {
  background: linear-gradient(90deg, #f97316, #fb923c);
  color: #fff;
}
.btn.ghost[data-v-471b645c] {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
}

/* Cards */
.cards[data-v-471b645c] {
  margin-top: 26px;
  display: grid;
  gap: 16px;
}
.card[data-v-471b645c] {
  background: #1e293b;
  padding: 18px;
  border-radius: 12px;
  color: #e2e8f0;
}
.card h2[data-v-471b645c] {
  margin: 6px 0;
}
.card p[data-v-471b645c] {
  color: #cbd5e1;
}
.card .muted[data-v-471b645c] {
  color: #94a3b8;
  font-size: 14px;
}
.icon[data-v-471b645c] {
  width: 30px;
  margin-bottom: 6px;
}

/* How to play */
.how-to-play[data-v-471b645c] {
  margin-top: 26px;
  padding: 20px;
  background: #1e2530;
  border-radius: 12px;
}
.how-to-play h2[data-v-471b645c] {
  margin-bottom: 12px;
}
.how-to-play ol[data-v-471b645c] {
  color: #cbd5e1;
  padding-left: 20px;
}
.final-cta[data-v-471b645c] {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ready[data-v-471b645c] {
  font-weight: 600;
}
.btn.large[data-v-471b645c] {
  padding: 12px 24px;
}

/* Footer */
.promo[data-v-471b645c] {
  margin-top: 28px;
  text-align: center;
  font-weight: 600;
  color: #f1f5f9;
}

/* Responsive */
@media (min-width: 880px) {
.cards[data-v-471b645c] {
    grid-template-columns: repeat(3, 1fr);
}
}


.container[data-v-04b39453] {
  min-height: 100%;
  background: #111827;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
}
h1[data-v-04b39453] {
  font-size: 120px;
  font-weight: 900;
  margin: 0;
  letter-spacing: 10px;
}
.title[data-v-04b39453] {
  font-size: 28px;
  margin-top: 10px;
}
.desc[data-v-04b39453] {
  margin-top: 10px;
  max-width: 380px;
  color: #bbbbbb;
}
.btn[data-v-04b39453] {
  margin-top: 30px;
  padding: 12px 28px;
  background: #3b82f6;
  border-radius: 8px;
  font-size: 16px;
  color: white;
  text-decoration: none;
  transition: 0.2s;
}
.btn[data-v-04b39453]:hover {
  background: #2563eb;
}