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

  /* 禁用文字选中和长按弹出菜单 */
  -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; /* 禁止触发“橡皮筋”拉动效果 */
}
#app {
  height: 100%;
}
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: #0a0627;
}
.app-container {
  height: 100vh;
  height: 100dvh; /* 自动避开工具栏 */
  width: 100%; 
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  touch-action: none;
}


.center-modal[data-v-25180436] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  pointer-events: auto;
  background: rgba(5, 12, 27, 0.62);
  backdrop-filter: blur(7px) saturate(1.1);
}
.modal-content[data-v-25180436] {
  width: min(340px, 100%);
  box-sizing: border-box;
  color: #ffffff;
  padding: 31px 25px 29px;
  background: linear-gradient(155deg, rgba(48, 73, 101, 0.88), rgba(14, 29, 52, 0.94));
  border: 6px solid #ffad32;
  border-radius: 32px;
  box-shadow:
    inset 0 0 0 3px rgba(255, 244, 185, 0.22),
    0 10px 0 rgba(114, 55, 11, 0.72),
    0 20px 42px rgba(0, 0, 0, 0.48);
  text-align: center;
}
.loading-box[data-v-25180436] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.spinner[data-v-25180436] {
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  border: 8px solid rgba(125, 211, 252, 0.18);
  border-top-color: #7dd3fc;
  border-right-color: #35f034;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px rgba(7, 24, 41, 0.55),
    0 6px 0 rgba(10, 44, 56, 0.75),
    0 0 18px rgba(125, 211, 252, 0.3);
  animation: spin-25180436 0.9s linear infinite;
}
.loading-box p[data-v-25180436] {
  margin: 0;
  color: #fff5c7;
  font-size: 18px;
  line-height: 1.35;
}
.cartoon-text[data-v-25180436] {
  font-family: "Lilita One", "PingFang SC", "Microsoft YaHei", sans-serif;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    3px 3px 0 rgba(0, 0, 0, 0.72);
}
@keyframes spin-25180436 {
to {
    transform: rotate(360deg);
}
}
@media (max-width: 380px) {
.modal-content[data-v-25180436] {
    padding: 27px 18px 25px;
    border-radius: 28px;
}
.loading-box p[data-v-25180436] {
    font-size: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.spinner[data-v-25180436] {
    animation-duration: 2s;
}
}


.center-modal[data-v-c07942f4] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(5, 12, 27, 0.62);
  backdrop-filter: blur(7px) saturate(1.1);
}
.modal-content[data-v-c07942f4] {
  width: min(390px, 100%);
  box-sizing: border-box;
  padding: 29px 27px 27px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(48, 73, 101, 0.88), rgba(14, 29, 52, 0.94));
  border: 6px solid #ffad32;
  border-radius: 34px;
  text-align: center;
  color: #fff;
  box-shadow:
    inset 0 0 0 3px rgba(255, 244, 185, 0.22),
    0 10px 0 rgba(114, 55, 11, 0.72),
    0 20px 42px rgba(0, 0, 0, 0.48);
}
.modal-content h3[data-v-c07942f4] {
  margin: 0 0 25px;
  color: #fff5c7;
  font-size: 27px;
  line-height: 1.1;
}
.form-group[data-v-c07942f4] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.form-group input[data-v-c07942f4] {
  flex: 1;
  min-width: 0;
  height: 51px;
  box-sizing: border-box;
  padding: 0 18px;
  background: rgba(10, 24, 43, 0.78);
  border: 4px solid #7dd3fc;
  border-radius: 18px;
  color: #eaf8ff;
  outline: none;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
  text-shadow: none;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.35),
    0 5px 0 #175b73;
  transition: border-color 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.form-group input[data-v-c07942f4]::placeholder {
  color: rgba(229, 246, 255, 0.5);
}
.form-group input[data-v-c07942f4]:focus {
  border-color: #b8efff;
  filter: brightness(1.08);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.28),
    0 5px 0 #175b73,
    0 0 0 3px rgba(125, 211, 252, 0.2);
}
.form-group input[data-v-c07942f4]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.refresh-btn[data-v-c07942f4] {
  flex-shrink: 0;
  width: 51px;
  height: 51px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#42bff5, #2387c4);
  border: 4px solid #a6ebff;
  border-radius: 18px;
  box-shadow: 0 6px 0 #125274, 0 9px 14px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
}
.refresh-btn[data-v-c07942f4]:hover:not(:disabled) {
  filter: brightness(1.12);
}
.refresh-btn[data-v-c07942f4]:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #125274, 0 3px 6px rgba(0, 0, 0, 0.25);
}
.refresh-btn[data-v-c07942f4]:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}
.refresh-btn img[data-v-c07942f4] {
  width: 23px;
  height: 23px;
  display: block;
}
.refresh-btn img.spinning[data-v-c07942f4] {
  animation: spin-c07942f4 0.8s linear infinite;
}
.error-text[data-v-c07942f4] {
  margin: 15px 0 0;
  padding: 8px 10px;
  border: 2px solid rgba(255, 164, 142, 0.72);
  border-radius: 12px;
  background: rgba(132, 38, 31, 0.55);
  color: #ffd1c4;
  font-size: 14px;
}
.submit-btn[data-v-c07942f4] {
  margin-top: 24px;
  width: 100%;
  height: 53px;
  padding: 0 16px;
  background: linear-gradient(#ffbd44, #e77920);
  color: #fff8dc;
  border: 4px solid #ffe4a1;
  border-radius: 19px;
  box-shadow: 0 6px 0 #914111, 0 10px 16px rgba(0, 0, 0, 0.3);
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-shadow: none;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.submit-btn[data-v-c07942f4]:hover:not(:disabled) {
  filter: brightness(1.1);
}
.submit-btn[data-v-c07942f4]:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #914111, 0 3px 6px rgba(0, 0, 0, 0.25);
}
.submit-btn[data-v-c07942f4]:disabled {
  filter: grayscale(0.5);
  opacity: 0.48;
  cursor: not-allowed;
}
.refresh-btn[data-v-c07942f4]:focus-visible,
.submit-btn[data-v-c07942f4]:focus-visible {
  outline: 3px solid #7dd3fc;
  outline-offset: 3px;
}
.loading-wrapper[data-v-c07942f4] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini-spinner[data-v-c07942f4] {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-left-color: #ffffff;
  border-radius: 50%;
  animation: spin-c07942f4 0.8s linear infinite;
}
.cartoon-text[data-v-c07942f4] {
  font-family: "Lilita One", "PingFang SC", "Microsoft YaHei", sans-serif;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    3px 3px 0 rgba(0, 0, 0, 0.72);
}
@keyframes spin-c07942f4 {
to {
    transform: rotate(360deg);
}
}
@media (max-width: 420px) {
.modal-content[data-v-c07942f4] {
    padding: 24px 18px 23px;
    border-radius: 29px;
}
.modal-content h3[data-v-c07942f4] {
    font-size: 23px;
}
.form-group[data-v-c07942f4] {
    gap: 9px;
}
}
@media (prefers-reduced-motion: reduce) {
.refresh-btn[data-v-c07942f4],
  .submit-btn[data-v-c07942f4] {
    transition: none;
}
.refresh-btn img.spinning[data-v-c07942f4],
  .mini-spinner[data-v-c07942f4] {
    animation: none;
}
}


.hud-topbar[data-v-35db5a78] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 64px;
  padding: 11px 20px;
  box-sizing: border-box;
  display: flex;
  /* 【2026-08-24】在线人数控件也移到右侧，和菜单按钮一起靠右排列 */
  justify-content: flex-end;
  align-items: center;
  gap: 13px;
  background: none;

  /* 🔴 极为关键：这一大横条平时也是空气，只有左侧文字和右侧按钮能点 */
  pointer-events: none;
}

/* 在线人数 */
.online-counter[data-v-35db5a78] {
  min-height: 42px;
  box-sizing: border-box;
  padding: 5px 13px;
  border: 3px solid #ffad32;
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(55, 82, 112, 0.84), rgba(17, 34, 59, 0.9));
  color: #fff5c7;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 244, 185, 0.16),
    0 5px 0 #87370f,
    0 8px 14px rgba(0, 0, 0, 0.25);
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.pulse-dot[data-v-35db5a78] {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: #35f034;
  border: 2px solid rgba(224, 255, 224, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(53, 240, 52, 0.85);
  animation: online-pulse-35db5a78 1.4s ease-in-out infinite alternate;
}
.count-num[data-v-35db5a78] {
  color: #7dd3fc;
  font-size: 20px;
  line-height: 1;
}
.counter-label[data-v-35db5a78],
.counter-unit[data-v-35db5a78] {
  white-space: nowrap;
}

/* 独立卡通图标按钮；顶部容器本身完全透明，pointer-events 只在按钮上恢复。 */
.menu-toggle-btn[data-v-35db5a78] {
  width: 46px;
  height: 42px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, rgba(55, 82, 112, 0.9), rgba(17, 34, 59, 0.94));
  border: 3px solid #ffad32;
  border-radius: 15px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 244, 185, 0.16),
    0 5px 0 #87370f,
    0 8px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
  pointer-events: auto;
}
.menu-toggle-btn[data-v-35db5a78]:hover {
  filter: brightness(1.13);
}
.menu-toggle-btn[data-v-35db5a78]:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 0 0 2px rgba(255, 244, 185, 0.2),
    0 1px 0 #87370f,
    0 3px 6px rgba(0, 0, 0, 0.22);
}
.menu-toggle-btn[data-v-35db5a78]:focus-visible {
  outline: 3px solid #7dd3fc;
  outline-offset: 3px;
}
.menu-toggle-btn img[data-v-35db5a78] {
  width: 25px;
  height: 25px;
  display: block;
}

/* 文本框开关关闭时压暗整个键帽。 */
.menu-toggle-btn.is-off[data-v-35db5a78] {
  filter: grayscale(0.8) brightness(0.7);
  opacity: 0.62;
}
.cartoon-number[data-v-35db5a78] {
  font-family: "Righteous", cursive;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    3px 3px 0 rgba(0, 0, 0, 0.7);
}
@keyframes online-pulse-35db5a78 {
from {
    transform: scale(0.9);
    opacity: 0.72;
}
to {
    transform: scale(1.08);
    opacity: 1;
}
}
@media (max-width: 480px) {
.hud-topbar[data-v-35db5a78] {
    padding: 9px 10px;
    gap: 8px;
}
.online-counter[data-v-35db5a78] {
    padding: 5px 9px;
    gap: 5px;
}
.counter-label[data-v-35db5a78] {
    display: none;
}
.menu-toggle-btn[data-v-35db5a78] {
    width: 42px;
    height: 39px;
    padding: 6px;
}
}
@media (prefers-reduced-motion: reduce) {
.pulse-dot[data-v-35db5a78] {
    animation: none;
}
.menu-toggle-btn[data-v-35db5a78] {
    transition: none;
}
}


.match-overlay[data-v-3426077e] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(5, 12, 27, 0.62);
  backdrop-filter: blur(7px) saturate(1.1);
  pointer-events: auto;
  color: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.match-card[data-v-3426077e] {
  width: min(380px, 100%);
  box-sizing: border-box;
  padding: 27px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(48, 73, 101, 0.88), rgba(14, 29, 52, 0.94));
  border: 6px solid #ffad32;
  border-radius: 34px;
  box-shadow:
    inset 0 0 0 3px rgba(255, 244, 185, 0.22),
    0 10px 0 rgba(114, 55, 11, 0.72),
    0 20px 42px rgba(0, 0, 0, 0.48);
  text-align: center;
}
.match-header h3[data-v-3426077e] {
  margin: 0 0 22px;
  color: #fff5c7;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: 0.5px;
}
.text-success[data-v-3426077e] {
  color: #69f58c !important;
  animation: success-pulse-3426077e 1s ease-in-out infinite alternate;
}
.radar-spinner[data-v-3426077e] {
  position: relative;
  width: 66px;
  height: 66px;
  margin: 0 auto 17px;
  border-radius: 50%;
  background: radial-gradient(circle, #7dd3fc 0 7%, rgba(125, 211, 252, 0.2) 8% 22%, transparent 23%);
}
.circle[data-v-3426077e] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 3px solid #7dd3fc;
  border-radius: 50%;
  opacity: 0;
  animation: radar-3426077e 2s linear infinite;
}
.link-1[data-v-3426077e] {
  animation-delay: 0s;
}
.link-2[data-v-3426077e] {
  animation-delay: 0.6s;
}
.link-3[data-v-3426077e] {
  animation-delay: 1.2s;
}
@keyframes radar-3426077e {
0% {
    transform: scale(0.2);
    opacity: 1;
}
100% {
    transform: scale(1.5);
    opacity: 0;
}
}
.player-count-box[data-v-3426077e] {
  margin-bottom: 8px;
  font-size: 40px;
  line-height: 1;
}
.current-count[data-v-3426077e] {
  color: #7dd3fc;
}
.divider[data-v-3426077e] {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.55);
}
.target-count[data-v-3426077e] {
  color: #fff5c7;
}
.tip-text[data-v-3426077e] {
  margin: 0 0 25px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65);
}
.success-status p[data-v-3426077e] {
  color: #fff5c7;
  font-size: 17px;
}
.success-loader[data-v-3426077e] {
  width: 48px;
  height: 48px;
  margin: 20px auto;
  box-sizing: border-box;
  border: 6px solid rgba(105, 245, 140, 0.18);
  border-top-color: #69f58c;
  border-radius: 50%;
  animation: spin-3426077e 0.8s linear infinite;
}
@keyframes spin-3426077e {
to { transform: rotate(360deg);
}
}
.match-footer[data-v-3426077e] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.btn[data-v-3426077e] {
  width: 100%;
  height: 51px;
  padding: 0 16px;
  border: 4px solid;
  border-radius: 18px;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
}
.btn-primary[data-v-3426077e] {
  color: #eefbff;
  background: linear-gradient(#42bff5, #2387c4);
  border-color: #a6ebff;
  box-shadow: 0 6px 0 #125274, 0 9px 14px rgba(0, 0, 0, 0.3);
}
.btn-danger[data-v-3426077e] {
  color: #fff2e7;
  background: linear-gradient(#f06b55, #ba382f);
  border-color: #ffc2a8;
  box-shadow: 0 6px 0 #702019, 0 9px 14px rgba(0, 0, 0, 0.3);
}
.btn[data-v-3426077e]:hover {
  filter: brightness(1.1);
}
.btn[data-v-3426077e]:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 rgba(50, 20, 10, 0.9), 0 3px 6px rgba(0, 0, 0, 0.25);
}
.btn[data-v-3426077e]:focus-visible {
  outline: 3px solid #7dd3fc;
  outline-offset: 3px;
}
.btn-secondary[data-v-3426077e] {
  background: #16a085;
  color: white;
}
.lock-tip[data-v-3426077e] {
  color: #69f58c;
  font-size: 15px;
}
.cartoon-text[data-v-3426077e] {
  font-family: "Lilita One", "PingFang SC", "Microsoft YaHei", sans-serif;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    3px 3px 0 rgba(0, 0, 0, 0.72);
}
.cartoon-number[data-v-3426077e] {
  font-family: "Righteous", cursive;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    4px 4px 0 rgba(0, 0, 0, 0.72);
}
@keyframes success-pulse-3426077e {
from { transform: scale(0.98);
}
to { transform: scale(1.04);
}
}
@media (max-width: 420px) {
.match-card[data-v-3426077e] {
    padding: 22px 19px;
    border-radius: 29px;
}
.match-header h3[data-v-3426077e] {
    font-size: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.circle[data-v-3426077e],
  .success-loader[data-v-3426077e],
  .text-success[data-v-3426077e] {
    animation: none;
}
.btn[data-v-3426077e] {
    transition: none;
}
}


.keyboard-grid[data-v-c895184e] {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  pointer-events: auto; /* 恢复实体交互 */
  display: grid;
  grid-template-columns: repeat(3, 64px);
  justify-content: center;
  justify-items: center;
  column-gap: 18px;
  row-gap: 13px;
}
.key-btn[data-v-c895184e] {
  width: 64px;
  height: 54px;
  padding: 0;
  border: 4px solid #ffad32;
  border-radius: 19px;
  background: linear-gradient(155deg, rgba(55, 82, 112, 0.9), rgba(17, 34, 59, 0.94));
  color: #fff5c7;
  font-family: "Righteous", cursive;
  font-size: 25px;
  font-weight: normal;
  line-height: 1;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    3px 3px 0 rgba(0, 0, 0, 0.75);
  box-shadow:
    inset 0 0 0 2px rgba(255, 244, 185, 0.18),
    0 6px 0 #87370f,
    0 9px 14px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    filter 0.12s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.key-btn[data-v-c895184e]:hover:not(:disabled) {
  filter: brightness(1.13);
}

/* 按压反馈动效 */
.key-btn[data-v-c895184e]:active:not(:disabled) {
  transform: translateY(5px) scale(0.98);
  box-shadow:
    inset 0 0 0 2px rgba(255, 244, 185, 0.22),
    0 1px 0 #87370f,
    0 3px 6px rgba(0, 0, 0, 0.25);
}
.key-btn[data-v-c895184e]:focus-visible {
  outline: 3px solid #7dd3fc;
  outline-offset: 3px;
}
.key-btn[data-v-c895184e]:disabled {
  opacity: 0.46;
  cursor: default;
}

/* 特殊按键 */
.special-key[data-v-c895184e] {
  border-color: #67d9ff;
  color: #7dd3fc;
  box-shadow:
    inset 0 0 0 2px rgba(210, 246, 255, 0.18),
    0 6px 0 #175b73,
    0 9px 14px rgba(0, 0, 0, 0.28);
}
.special-key[data-v-c895184e]:active:not(:disabled) {
  box-shadow:
    inset 0 0 0 2px rgba(210, 246, 255, 0.22),
    0 1px 0 #175b73,
    0 3px 6px rgba(0, 0, 0, 0.25);
}

/* 被抢答（claimed）时按钮的视觉反馈——面板背景框已经去掉，这条规则直接挂在
   .keyboard-grid.claimed 的子选择器下，效果和原来一致。 */
.keyboard-grid.claimed .key-btn[data-v-c895184e] {
  color: #ffcf84;
  background: linear-gradient(155deg, rgba(102, 67, 45, 0.9), rgba(54, 34, 27, 0.94));
  border-color: #ff9a3d;
  font-size: 25px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 228, 189, 0.16),
    0 6px 0 #6f2d13;
}
.keyboard-grid.claimed .key-btn[data-v-c895184e]:disabled {
  opacity: 1;
}
@media (max-width: 360px) {
.keyboard-grid[data-v-c895184e] {
    grid-template-columns: repeat(3, 58px);
    column-gap: 14px;
    row-gap: 12px;
}
.key-btn[data-v-c895184e] {
    width: 58px;
    height: 50px;
    border-radius: 17px;
    font-size: 23px;
}
}
@media (prefers-reduced-motion: reduce) {
.key-btn[data-v-c895184e] {
    transition: none;
}
}


.battle-controls[data-v-808668d2] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  pointer-events: none;
}
.display-container[data-v-808668d2] {
  width: 100%;
  max-width: 400px;
  height: 142px;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  pointer-events: auto; /* 恢复实体交互 */
  overflow: hidden;
  background: linear-gradient(155deg, rgba(48, 73, 101, 0.72), rgba(14, 29, 52, 0.8));
  backdrop-filter: blur(7px) saturate(1.15);
  border: 6px solid #ffad32;
  border-radius: 32px;
  padding: 10px 14px;
  box-shadow:
    inset 0 0 0 3px rgba(255, 244, 185, 0.25),
    0 10px 0 rgba(114, 55, 11, 0.65),
    0 18px 34px rgba(0, 0, 0, 0.35);
}
.ready-panel[data-v-808668d2] {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clock-face[data-v-808668d2] {
  position: absolute;
  left: 2px;
  top: 50%;
  width: 82px;
  height: 82px;
  overflow: hidden;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #122439;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.38));
}
.clock-image[data-v-808668d2],
.clock-sweep[data-v-808668d2] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.clock-image[data-v-808668d2] {
  object-fit: contain;
}

/* 旋转的扇形遮罩会循环擦掉一小段圆环和刻度。扇形前沿使用多段透明度，
   因而不是生硬地整块消失，而是带一小段渐变过渡。 */
.clock-sweep[data-v-808668d2] {
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(
    from -20deg,
    transparent 0deg 230deg,
    rgba(18, 36, 57, 0.16) 248deg,
    rgba(18, 36, 57, 0.7) 282deg,
    #122439 310deg 360deg
  );
  animation: clock-ring-hide-808668d2 1.4s linear infinite;
}
.clock-number.cartoon-number[data-v-808668d2] {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  min-width: 2.8em;
  transform: translate(-50%, -50%);
  color: #35f034;
  font-size: 27px;
  line-height: 1;
  text-align: center;
  text-shadow:
    -1px -1px 0 #092e0c,
    1px -1px 0 #092e0c,
    -1px 1px 0 #092e0c,
    1px 1px 0 #092e0c,
    3px 3px 0 rgba(0, 0, 0, 0.75);
}
.ready-message[data-v-808668d2] {
  font-size: clamp(27px, 4vw, 38px);
  line-height: 1;
  color: #fff5c7;
  text-align: center;
  animation: ready-pop-808668d2 0.55s cubic-bezier(0.2, 1.5, 0.45, 1) both;
}
.ready-message.cartoon-text[data-v-808668d2] {
  color: #fff5c7;
}
.ready-message.go[data-v-808668d2] {
  color: #ffdf3d;
  transform: rotate(-2deg);
}
.question-box[data-v-808668d2] {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3px;
  padding: 13px 52px 1px;
  border-radius: 15px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.question-box.claimed[data-v-808668d2] {
  background: rgba(255, 152, 0, 0.42);
  box-shadow: inset 0 0 0 2px rgba(255, 193, 7, 0.9);
}
.question-note[data-v-808668d2] {
  position: absolute;
  z-index: 2;
  top: -6px;
  left: 22px;
  min-width: 58px;
  height: 32px;
  box-sizing: border-box;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #9c5b17;
  border-top: 0;
  border-radius: 0 0 13px 13px;
  background: linear-gradient(#ffe178, #f4ad30);
  box-shadow: 0 4px 0 rgba(91, 43, 9, 0.55);
  color: #38200d;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: none;
}
.question-text[data-v-808668d2] {
  flex: 0 1 auto;
  font-size: 34px;
  color: #fff;
  text-align: center;
}
.skip-button[data-v-808668d2] {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 34px;
  height: 34px;
  padding: 3px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: #ef7d2c;
  box-shadow: 0 4px 0 #87370f;
  cursor: pointer;
  transform: translateY(-42%);
}
.skip-button img[data-v-808668d2],
.backspace-button img[data-v-808668d2] {
  display: block;
  width: 100%;
  height: 100%;
}
.answer-row[data-v-808668d2] {
  position: relative;
  min-height: 35px;
  padding: 0 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.answer-slots[data-v-808668d2] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
}
.answer-slot[data-v-808668d2] {
  width: 30px;
  height: 29px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 3px solid rgba(255, 255, 255, 0.82);
}
.answer-digit.cartoon-number[data-v-808668d2] {
  color: #7dd3fc;
  font-size: 23px;
  line-height: 1;
  text-shadow:
    -1px -1px 0 #12364e,
    1px -1px 0 #12364e,
    -1px 1px 0 #12364e,
    1px 1px 0 #12364e,
    2px 2px 0 rgba(0, 0, 0, 0.65);
}
.answer-row.claimed .answer-slot[data-v-808668d2] {
  border-bottom-color: #ffb252;
}
.answer-row.claimed .answer-digit.cartoon-number[data-v-808668d2] {
  color: #ffb252;
}
.backspace-button[data-v-808668d2] {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 34px;
  height: 30px;
  padding: 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.48));
  transform: translateY(-50%);
}
.backspace-button[data-v-808668d2]:disabled,
.skip-button[data-v-808668d2]:disabled {
  opacity: 0.42;
  cursor: default;
}
.cartoon-text[data-v-808668d2] {
  font-family: "Lilita One", cursive;
  color: #fff;

  /* 技巧：用多重 shadow 模拟 */
  /* 第一层：全方位的边框 */
  /* 第二层：右下方的实心深色影子 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000, 4px 4px 0 #000000; /* 真正的实心影子 */
}
.cartoon-number[data-v-808668d2] {
  font-family: "Righteous", cursive;
  color: #fff;

  /* 技巧：用多重 shadow 模拟 */
  /* 第一层：全方位的边框 */
  /* 第二层：右下方的实心深色影子 */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000, 4px 4px 0 #000000; /* 真正的实心影子 */
}
@keyframes clock-ring-hide-808668d2 {
to {
    transform: rotate(360deg);
}
}
@keyframes ready-pop-808668d2 {
from {
    opacity: 0;
    transform: scale(0.65) rotate(-4deg);
}
to {
    opacity: 1;
    transform: scale(1) rotate(0);
}
}
@media (max-width: 360px) {
.display-container[data-v-808668d2] {
    padding: 8px 10px;
}
.clock-face[data-v-808668d2] {
    left: 0;
    width: 68px;
    height: 68px;
}
.clock-number.cartoon-number[data-v-808668d2] {
    font-size: 23px;
}
.ready-message[data-v-808668d2] {
    font-size: 28px;
}
.question-box[data-v-808668d2],
  .answer-row[data-v-808668d2] {
    padding-left: 44px;
    padding-right: 44px;
}
.question-text[data-v-808668d2] {
    font-size: 28px;
}
.answer-slot[data-v-808668d2] {
    width: 27px;
}
.skip-button[data-v-808668d2],
  .backspace-button[data-v-808668d2] {
    right: 6px;
}
}
@media (prefers-reduced-motion: reduce) {
.clock-sweep[data-v-808668d2],
  .ready-message[data-v-808668d2] {
    animation: none;
}
}



/* 🔴 核心：外层包裹全屏透明，禁止拦截任何点击，把手势留给底下的 Pixi */
.battle-overlay[data-v-7a74b112] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* 【2026-08-24】原来是 space-between（题面顶部、键盘贴底），改成
     flex-start + gap：键盘整体上移，紧跟在题面展示区下方，不再贴着屏幕底边。 */
  justify-content: flex-start;
  gap: 20px;
  padding: 40px 20px;
  box-sizing: border-box;
  pointer-events: none;
  /* 【2026-08-25】字体从等宽的 Courier New 换成 Google Fonts 的 Righteous——
     一个圆润加粗的展示型字体，字重只有 400 一档（Righteous 本身没有 bold
     字重，题面/按钮上原有的 font-weight: bold 会退化成浏览器合成粗体，效果
     仍然清晰，只是不是字体自带的真实粗体）。字体文件本身在
     frontend/public/index.html 的 <head> 里用 <link> 引入，这里只声明
     font-family 名字；cursive 是 Google Fonts 官方给这类手写/展示风格字体
     建议的通用回退关键字，再加一层 sans-serif 兜底，避免字体一时加载不出来
     时退化成过于随意的手写体。这一条设在 .battle-overlay 上，靠 CSS 继承
     统一影响 BattleDisplay.vue 和 BattleKeyboard.vue 两个子组件渲染的所有
     文字，两边都不需要单独设置。 */
  font-family: "Righteous", cursive, sans-serif;
}


.result-overlay[data-v-f3651ede] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(5, 12, 27, 0.68);
  backdrop-filter: blur(9px) saturate(1.12);
  pointer-events: auto;
  color: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.result-card[data-v-f3651ede] {
  width: min(560px, 100%);
  max-height: 88vh;
  box-sizing: border-box;
  padding: 28px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(48, 73, 101, 0.9), rgba(14, 29, 52, 0.96));
  border: 6px solid #ffad32;
  border-radius: 34px;
  box-shadow:
    inset 0 0 0 3px rgba(255, 244, 185, 0.22),
    0 10px 0 rgba(114, 55, 11, 0.72),
    0 22px 48px rgba(0, 0, 0, 0.52);
  display: flex;
  flex-direction: column;
}
.result-header[data-v-f3651ede] {
  text-align: center;
  margin-bottom: 21px;
}
.result-header h2[data-v-f3651ede] {
  font-size: 39px;
  font-weight: normal;
  line-height: 1;
  margin: 0;
  letter-spacing: 1px;
}
.text-win[data-v-f3651ede] {
  color: #ffdf3d;
}
.text-lose[data-v-f3651ede] {
  color: #ff7a68;
}
.subtitle[data-v-f3651ede] {
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}
.result-body[data-v-f3651ede] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 7px;
  scrollbar-color: #ffad32 rgba(0, 0, 0, 0.2);
  scrollbar-width: thin;
}
.report-container[data-v-f3651ede] {
  padding: 10px;
  margin-bottom: 20px;
  background: rgba(7, 20, 38, 0.58);
  border: 3px solid rgba(125, 211, 252, 0.68);
  border-radius: 18px;
  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
}
.table-header[data-v-f3651ede],
.table-row[data-v-f3651ede] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 8px;
  font-size: 13px;
}
.table-header[data-v-f3651ede] {
  margin-bottom: 5px;
  border-radius: 10px;
  background: rgba(125, 211, 252, 0.12);
  color: #bcecff;
  font-weight: 700;
}
.table-row[data-v-f3651ede] {
  margin-top: 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}
.my-row[data-v-f3651ede] {
  background: rgba(255, 193, 61, 0.13);
  box-shadow: inset 0 0 0 2px rgba(255, 211, 105, 0.4);
}
.col-q[data-v-f3651ede] {
  width: 30%;
  text-align: left;
}
.col-p[data-v-f3651ede] {
  width: 30%;
  text-align: left;
}
.col-a[data-v-f3651ede] {
  width: 20%;
  text-align: center;
}
.col-s[data-v-f3651ede] {
  width: 20%;
  text-align: right;
}
.font-mono[data-v-f3651ede] {
  font-family: "Righteous", monospace;
  font-size: 16px;
}
.text-bold[data-v-f3651ede] {
  font-weight: bold;
}
.result-mark[data-v-f3651ede] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.result-icon[data-v-f3651ede] {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.38));
}
.player-badge[data-v-f3651ede] {
  display: inline-block;
  max-width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  background: #34495e;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me-badge[data-v-f3651ede] {
  border-color: #ffd469;
  background: #b76523;
  font-weight: 700;
}
.scoreboard[data-v-f3651ede] {
  padding: 15px;
  background: rgba(7, 20, 38, 0.5);
  border: 3px solid rgba(255, 173, 50, 0.65);
  border-radius: 18px;
}
.scoreboard h4[data-v-f3651ede] {
  margin: 0 0 14px;
  color: #ffdf3d;
  font-size: 18px;
  text-align: left;
}
.score-grid[data-v-f3651ede] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}
.score-item[data-v-f3651ede] {
  min-width: 0;
  padding: 10px 11px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.score-item.high-light[data-v-f3651ede] {
  border-color: rgba(255, 211, 105, 0.72);
  background: rgba(255, 193, 61, 0.14);
}
.rank-name[data-v-f3651ede] {
  min-width: 0;
  overflow: hidden;
  color: #d4e4ef;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.high-light .rank-name[data-v-f3651ede] {
  color: #fff;
  font-weight: 700;
}
.rank-score[data-v-f3651ede] {
  flex-shrink: 0;
  color: #7dd3fc;
  font-weight: normal;
}
.result-footer[data-v-f3651ede] {
  margin-top: 23px;
  display: flex;
  gap: 16px;
}
.btn[data-v-f3651ede] {
  flex: 1;
  height: 51px;
  padding: 0 12px;
  border: 4px solid;
  border-radius: 18px;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
}
.btn-quit[data-v-f3651ede] {
  color: #fff2e7;
  background: linear-gradient(#f06b55, #ba382f);
  border-color: #ffc2a8;
  box-shadow: 0 6px 0 #702019, 0 9px 14px rgba(0, 0, 0, 0.3);
}
.btn-rematch[data-v-f3651ede] {
  color: #effff3;
  background: linear-gradient(#58dc7b, #259d4b);
  border-color: #afffc0;
  box-shadow: 0 6px 0 #14602d, 0 9px 14px rgba(0, 0, 0, 0.3);
}
.btn[data-v-f3651ede]:hover {
  filter: brightness(1.1);
}
.btn[data-v-f3651ede]:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 rgba(29, 60, 28, 0.9), 0 3px 6px rgba(0, 0, 0, 0.25);
}
.btn[data-v-f3651ede]:focus-visible {
  outline: 3px solid #7dd3fc;
  outline-offset: 3px;
}
.cartoon-text[data-v-f3651ede] {
  font-family: "Lilita One", "PingFang SC", "Microsoft YaHei", sans-serif;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    4px 4px 0 rgba(0, 0, 0, 0.72);
}
.cartoon-number[data-v-f3651ede] {
  font-family: "Righteous", cursive;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    3px 3px 0 rgba(0, 0, 0, 0.72);
}
@media (max-width: 600px) {
.result-card[data-v-f3651ede] {
    padding: 23px 18px 20px;
    border-radius: 29px;
}
.result-header h2[data-v-f3651ede] {
    font-size: 31px;
}
.table-header[data-v-f3651ede],
  .table-row[data-v-f3651ede] {
    padding: 9px 5px;
    font-size: 11px;
}
.result-icon[data-v-f3651ede] {
    width: 26px;
    height: 26px;
}
.score-grid[data-v-f3651ede] {
    grid-template-columns: 1fr;
}
.result-footer[data-v-f3651ede] {
    gap: 11px;
}
.btn[data-v-f3651ede] {
    font-size: 14px;
}
}
@media (max-width: 380px) {
.result-overlay[data-v-f3651ede] {
    padding: 12px;
}
.result-card[data-v-f3651ede] {
    padding-left: 12px;
    padding-right: 12px;
}
.result-footer[data-v-f3651ede] {
    flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
.btn[data-v-f3651ede] {
    transition: none;
}
}


.app-container[data-v-a74e0194] {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
#canvas-holder[data-v-a74e0194] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
#canvas-holder[data-v-a74e0194] canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.ui-layer[data-v-a74e0194] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


.container[data-v-0e77973a] {
  min-height: 100%;
  background: #0a0627;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
}
h1[data-v-0e77973a] {
  font-size: 120px;
  font-weight: 900;
  margin: 0;
  letter-spacing: 10px;
}
.title[data-v-0e77973a] {
  font-size: 28px;
  margin-top: 10px;
}
.desc[data-v-0e77973a] {
  margin-top: 10px;
  max-width: 380px;
  color: #bbbbbb;
}
.btn[data-v-0e77973a] {
  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-0e77973a]:hover {
  background: #2563eb;
}

/* 只是注册字体，不会改变任何现有文字 */

@font-face {
    font-family: 'Lilita One'; 
    src: url(../../assets/fonts/LilitaOne-Regular.a18bd34b65dfbf061a31.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
    /* 关键：swap 模式能确保文字立即显示（用兜底字体），避免白屏 */
    /* 如果宁愿白屏也不想看字体跳变，可以用 block */
    font-display: block; 
}

@font-face {
    font-family: 'Righteous'; 
    src: url(../../assets/fonts/Righteous-Regular.fd0110471f2228c1808a.ttf) format('truetype');
    font-weight: normal; /* 同一族字体可以通过 weight 区分 */
    font-style: normal;
}

@font-face {
    font-family: 'WendyOne'; 
    src: url(../../assets/fonts/WendyOne-Regular.72675f990f30baa8535f.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LuckiestGuy'; 
    src: url(../../assets/fonts/LuckiestGuy-Regular.04dea529d3802106e6d7.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Candal'; 
    src: url(../../assets/fonts/Candal-Regular.ea3d3fcf4fdcd65fabb1.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}