/* 使用scoped会导致样式无法作用到实际 append 到 document.body 下的 DOM 节点 */
#float-btn {
  position: absolute;
  right: 0;
  top: 30px; /* 初始高度 */
  width: 30px;
  height: 50px;
  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: 40px; /* 留出浮动按钮与空隙距离 */
  top: 30px;
  height: 50px;
  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; /* 确保图片不会被压缩 */
}



/* 全局样式 */
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;
}
.app-container {
  height: 100vh;
  height: 100dvh; /* 自动避开工具栏 */
  width: 100%; 
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}


.live-feed[data-v-dea2fa74] {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8px;
  overflow: hidden;
}
.feed-header[data-v-dea2fa74] {
  font-size: 1rem;
  font-weight: 600;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
.status-dot[data-v-dea2fa74] {
  width: 8px;
  height: 8px;
  background: #27ffa5;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 8px #27ffa5;
}
.list-wrapper[data-v-dea2fa74] {
  padding: 6px; /* 统一在这里留出边框外扩的空间 */
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.bubble-list[data-v-dea2fa74] {
  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-dea2fa74] {
  margin-top: 4px; /* 保持与 gap 一致 */
}
.bubble[data-v-dea2fa74] {
  position: relative;
  padding: 6px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  backdrop-filter: blur(6px);
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.25s ease;
  /* background: rgba(255, 255, 255, 0.12); */
}
.bubble.normal[data-v-dea2fa74] {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}
.bubble.correct[data-v-dea2fa74] {
  background: linear-gradient(135deg, #32d2a7, #1cbf89);
  color: #0b3d2e;
  /* box-shadow: 0 6px 20px rgba(50, 210, 167, 0.45); */
}
.bubble.correct[data-v-dea2fa74] {
  animation: correct-pop-dea2fa74 0.6s ease-out;
}
@keyframes correct-pop-dea2fa74 {
0% {
    transform: scale(0.92);
}
60% {
    transform: scale(1.08);
}
100% {
    transform: scale(1);
}
}
.bubble.wrong[data-v-dea2fa74] {
  background: linear-gradient(135deg, #ff6b6b, #e03b3b);
  color: #fff;
  /* box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4); */
}
.bubble.wrong[data-v-dea2fa74] {
  animation: wrong-shake-dea2fa74 0.45s ease-in-out;
}
@keyframes wrong-shake-dea2fa74 {
0% {
    transform: translateX(0);
}
25% {
    transform: translateX(-6px);
}
50% {
    transform: translateX(6px);
}
75% {
    transform: translateX(-4px);
}
100% {
    transform: translateX(0);
}
}
.bubble.self[data-v-dea2fa74]::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-dea2fa74] {
  transition: transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}

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

/* 移动端专属布局 (建议 breakpoint 设为 992px 以下) */
@media (max-width: 992px) {
.bubble[data-v-dea2fa74] {
    font-size: 14px;
}
}


.page[data-v-4c713d2b] {
  min-height: 100%;
  background: #111827;
  color: #fff;
}
.game-layout[data-v-4c713d2b] {
  display: flex;
  flex-direction: row; /* 默认横排 */
  gap: 10px;
  width: 100%;
  max-width: 1280px;
  padding: 16px;
  height: 100vh; /* 设置固定高度使聊天区可滚动 */
  height: 100dvh; /* 自动避开工具栏 */
}

/* 消息区域 */
.chat-area[data-v-4c713d2b] {
  flex: 0 0 35%; /* 占据 35% 空间 */
  min-height: 200px;
  display: flex;
  flex-direction: column;

  background: #1f2937; /* #2d3748 #374151 */
  border-radius: 18px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.5);
  perspective: 1000px; /* 增加 3D 感 */
}

/* ===== Battle Area ===== */
.battle-area[data-v-4c713d2b] {
  flex: 0 0 65%;
  background: #0f172a;
  border-radius: 18px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  touch-action: manipulation; /* 只允许滚动和持续缩放（双指捏合），但禁用双击缩放 */
}
.question-block[data-v-4c713d2b] {
  text-align: center;
}
#question-cont[data-v-4c713d2b] {
  border: 2px solid #27ffa5;
  border-radius: 15px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.answer-cont[data-v-4c713d2b] {
  height: 48px; /* 或 min-height */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center;
  overflow: hidden; /* 防止溢出抖动 */
  font-size: 2rem;
  line-height: 1.15;
  white-space: nowrap;
}
#question[data-v-4c713d2b] {
  position: relative;
  font-size: 3rem;
  line-height: 1.1;
}
.prompt[data-v-4c713d2b] {
  text-align: center;
  font-size: 1rem;
}
.answer-cont span[data-v-4c713d2b] {
  font-weight: bold;
  color: #7dd3fc; /* 浅蓝 */
  text-shadow: 0 0 6px rgba(125, 211, 252, 0.4);
}
.answer-cont .correct[data-v-4c713d2b] {
  color: #27ffa5;
  text-shadow: 0 0 10px rgba(39, 255, 165, 0.65);
  animation: pop-4c713d2b 0.35s ease-out;
}
@keyframes pop-4c713d2b {
0% {
    transform: scale(0.95);
}
60% {
    transform: scale(1.08);
}
100% {
    transform: scale(1);
}
}
.answer-cont .wrong[data-v-4c713d2b] {
  color: #fb7185; /* 柔和红 */
  text-shadow: 0 0 8px rgba(251, 113, 133, 0.55);
  animation: shake-4c713d2b 0.4s ease;
}
@keyframes shake-4c713d2b {
0% {
    transform: translateX(0);
}
25% {
    transform: translateX(-3px);
}
50% {
    transform: translateX(3px);
}
75% {
    transform: translateX(-2px);
}
100% {
    transform: translateX(0);
}
}
.answer-bar[data-v-4c713d2b] {
  display: flex;
  justify-content: center;
}
.answer-bar.underline[data-v-4c713d2b] {
  gap: 4px;
}
.digit-line[data-v-4c713d2b] {
  width: 32px;
  height: 40px;
  border-bottom: 3px solid rgba(255, 255, 255, 0.3);
  text-align: center;
}
#progress-bar-cont[data-v-4c713d2b] {
  margin: 16px 0;
  height: 10px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
#progress-bar[data-v-4c713d2b] {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #09ff00, #eeff00, #f00);
  transform-origin: left;
  transition: transform 0.05s linear;
}

/* ===== Keyboard ===== */
.standard-keyboard[data-v-4c713d2b] {
  display: grid;
  /* 基础采用 5 列布局 */
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.standard-keyboard button[data-v-4c713d2b] {
  height: 38px;
  border-radius: 6px;
  font-size: 1rem;
  border: none;
  background: #1e293b;
  color: #f8fafc;
  transition: opacity 0.1s;
}

/* 第三行特殊处理：让 OK 键占据最后两个格子的宽度 */
.btn-ok[data-v-4c713d2b] {
  grid-column: span 2;
  background: #059669 !important;
  color: #fff !important;
  font-size: 0.85rem !important;
}
.btn-del[data-v-4c713d2b] {
  background: #b91c1c !important;
  color: #fff !important;
  font-size: 0.75rem !important;
}
.spec-btn[data-v-4c713d2b] {
  background: #334155 !important;
  color: #94a3b8 !important;
  font-size: 1.2rem !important;
}
.standard-keyboard button[data-v-4c713d2b]:active {
  opacity: 0.6;
}

/* ===== notice list ===== */
.notice-group[data-v-4c713d2b] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.notice-text[data-v-4c713d2b] {
  padding: 12px 14px;
  border-radius: 14px;

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

  font-size: 16px;
  text-align: center;
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  cursor: pointer;
  user-select: none;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.35);

  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* hover */
.notice-text[data-v-4c713d2b]:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.45);
}

/* active / click */
.notice-text[data-v-4c713d2b]:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* disabled 状态 */
.notice-text.disabled[data-v-4c713d2b] {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  transform: none;
}

/* 移动端专属布局 (建议 breakpoint 设为 992px 以下) */
@media (max-width: 992px) {
.page[data-v-4c713d2b] {
    padding: 0; /* 移除外边距，利用全屏空间 */
    overflow: hidden;
}
.game-layout[data-v-4c713d2b] {
    flex-direction: column; /* 顶部动态 -> 中间题目 -> 底部交互 */
}
#question-cont[data-v-4c713d2b] {
    padding: 8px 16px;
    border-width: 1px;
}
#question[data-v-4c713d2b] {
    font-size: 2.1rem;
    line-height: 1;
    padding: 10px 0;
}
.prompt[data-v-4c713d2b] {
    font-size: 0.8rem;
}
.answer-cont[data-v-4c713d2b] {
    font-size: 1.6rem;
    line-height: 1.15;
}
.answer-cont span[data-v-4c713d2b] {
    text-shadow: 0 0 6px rgba(39, 255, 165, 0.5);
}
.digit-line[data-v-4c713d2b] {
    width: 26px;
    height: 36px;
}
.notice-text[data-v-4c713d2b] {
    padding: 10px 14px;
    border-radius: 14px;

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

    font-size: 14px;
}
}

/* 视觉隐藏类，不可见但可被屏幕阅读器读取 */
.visually-hidden[data-v-4c713d2b] {
  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-7a588243] {
  height: 100%;
  background: #111827;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

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

/* ====== Landing Card ====== */
.card[data-v-7a588243] {
  width: 100%;
  max-width: 640px;
  background: #1f2937;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  transition: all 0.5s;
}
.logo-section[data-v-7a588243] {
  text-align: center;
  margin-bottom: 28px;
}
.logo[data-v-7a588243] {
  width: 160px;         /* Logo 显示尺寸（可调整） */
  height: 160px;        
  object-fit: contain;  /* 避免图片被拉伸 */
  display: block;
  margin: 0 auto;       /* 居中 */
}
.title[data-v-7a588243] {
  margin-top: 12px;
  color: #9ca3af;
  font-size: 20px;
  font-weight: 500;
}
.form-area[data-v-7a588243] {
  margin-bottom: 24px;
}
.label[data-v-7a588243] {
  font-size: 14px;
  color: #d1d5db;
  margin-bottom: 8px;
  display: block;
}
.input[data-v-7a588243] {
  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-7a588243] {
  animation: shake-7a588243 0.3s ease;
  border-color: #ff4d4f !important;
  box-shadow: 0 0 6px rgba(255, 77, 79, 0.6);
}
@keyframes shake-7a588243 {
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-7a588243] {
  width: 100%;
  padding: 14px;
  font-size: 20px;
  font-weight: bold;
  border-radius: 12px;
  background: linear-gradient(to right, #fbbf24, #f97316);
  color: #111827;
  display: flex;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 20px rgba(255,138,92,0.4);
  cursor: pointer;
  border: none;
}
.start-btn.disabled[data-v-7a588243] {
  opacity: 0.5;
  cursor: not-allowed;
}
.start-icon[data-v-7a588243] {
  width: 24px;
  height: 24px;
}


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

/* 视觉隐藏类，不可见但可被屏幕阅读器读取 */
.visually-hidden[data-v-5ceec134] {
  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-5ceec134] {
  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-5ceec134] {
  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-5ceec134] {
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-left-color: #00CC66; /* 使用品牌色或醒目的颜色 */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: simple-spin-5ceec134 1s linear infinite;
  margin-bottom: 10px;
}
@keyframes simple-spin-5ceec134 {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}

/* 保持 loading 文本样式，但调整 margin */
.lt[data-v-5ceec134] {
  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-f5e9e72c] {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px;
  font-family: Inter, system-ui;
  color: #f8fafc;
  background: #111827;
}

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

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

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

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

/* Responsive */
@media (min-width: 880px) {
.cards[data-v-f5e9e72c] {
    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;
}