/* ========================================
 * 保留旧的#game-score样式（向后兼容）
 * 新游戏请使用.hud-container系统
 * ======================================== */



/* 游戏核心区域 - 保证在首屏垂直居中与弹窗对齐 */
.game-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  /* 禁止容器被压缩 */
}




/* 游戏画布 - 霓虹黑色 Liquid Glass 效果 */
canvas {
  background: #000;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  will-change: transform, backdrop-filter;
  transform: translateZ(0);
  border: 1px solid var(--glass-border);
  border-radius: 0px;
  box-shadow: var(--shadow-medium), var(--neon-shadow), inset 0 1px 0 rgba(255, 255, 255, .1);
  max-width: 100%;
  max-height: 100%;
  transition: all .3s var(--ease-liquid);
  position: relative;
  overflow: hidden
}


/* 游戏内实时分数显示 */
#game-score {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  padding: 12px 24px;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  box-shadow: var(--shadow-soft), var(--neon-shadow);
  z-index: 3000;
  transition: all .3s var(--ease-liquid);
  pointer-events: none;
  align-items: baseline;
  display: inline-flex
}


#game-score:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-medium), var(--neon-shadow-strong)
}


#game-score .score-label {
  color: var(--text-secondary);
  font-size: 14px;
  margin-right: 8px;
  vertical-align: baseline
}


#game-score .score-value {
  color: var(--primary-color);
  font-size: 24px;
  font-weight: 700;
  text-shadow: var(--neon-shadow);
  vertical-align: baseline
}


/* ========================================
 * 统一HUD系统 - 新版本
 * ========================================
 * 规则：
 * 1. 标签固定12px，灰色（--text-secondary）
 * 2. 数值固定28px，颜色可配置
 * 3. 垂直布局：标签在上，数值在下
 * 4. 圆角：25px
 * 5. 第一行最多3个指标，第二行自动缩小25%
 */

/* HUD整体容器 - 一个玻璃态容器包裹所有指标 */
.hud-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  will-change: transform, backdrop-filter;
  transform: translateZ(0);
  border: 1px solid var(--glass-border);
  border-radius: 25px;
  box-shadow: var(--shadow-soft), var(--neon-shadow);
  z-index: 3000;
  pointer-events: none;
  transition: all 0.3s var(--ease-liquid);
}


.hud-container:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-medium), var(--neon-shadow-strong);
}


/* HUD行通用样式 - 改为grid列布局 */
.hud-row {
  display: contents;
}


/* 第一行：主HUD（最多3个指标） */
.hud-row-primary {
  display: contents;
}


/* 第二行：次级HUD（自动缩小25%） */
.hud-row-secondary {
  display: contents;
}


.hud-row-secondary .hud-label {
  font-size: 9px;
}


.hud-row-secondary .hud-value {
  font-size: 21px;
}


/* 单个HUD项目 - 无独立背景 */
.hud-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 60px;
  text-align: center;
}


/* 次级HUD列（缩小25%） */
.hud-column-secondary {
  opacity: 0.85;
}


.hud-column-secondary .hud-label {
  font-size: 9px;
}


.hud-column-secondary .hud-value {
  font-size: 21px;
}


/* HUD标签 - 固定12px，灰色 */
.hud-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-align: center;
}


/* HUD数值 - 固定28px，颜色可配置 */
.hud-value {
  font-size: 28px;
  color: var(--primary-color);
  font-weight: 700;
  text-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
  text-align: center;
  line-height: 1;
}


/* HUD数值颜色变体 */
.hud-value.hud-primary {
  color: var(--primary-color);
  text-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
}


.hud-value.hud-secondary {
  color: var(--secondary-color);
  text-shadow: 0 0 20px rgba(255, 0, 127, 0.5);
}


.hud-value.hud-accent {
  color: var(--accent-color);
  text-shadow: 0 0 20px rgba(50, 215, 75, 0.5);
}


.hud-value.hud-warning {
  color: var(--warning-color);
  text-shadow: 0 0 20px rgba(255, 149, 0, 0.5);
}


.hud-value.hud-gold {
  color: #ffd93d;
  text-shadow: 0 0 20px rgba(255, 217, 61, 0.5);
}


.hud-value.hud-white {
  color: var(--text-primary);
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
@media (max-width: 768px) {

  .hud-container {
    top: 16px;
    right: 16px;
    padding: 12px 16px;
    gap: 12px;
  }

  .hud-label {
    font-size: 11px;
  }

  .hud-value {
    font-size: 24px;
  }

  .hud-column-secondary .hud-label {
    font-size: 8.25px;
  }

  .hud-column-secondary .hud-value {
    font-size: 18px;
  }
}
@media (max-width: 480px) {

  .hud-container {
    top: 12px;
    right: 12px;
    padding: 10px 14px;
    gap: 10px;
  }

  .hud-label {
    font-size: 10px;
  }

  .hud-value {
    font-size: 20px;
  }

  .hud-column-secondary .hud-label {
    font-size: 7.5px;
  }

  .hud-column-secondary .hud-value {
    font-size: 15px;
  }
}


/* 以下为原代码剩余部分，未改动 */
.game-instructions {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 16px 0;
  line-height: 1.6;
  font-weight: 400
}


.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center
}




.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    will-change: transform, backdrop-filter;
    transform: translate(-50%, -50%) translateZ(0) scale(.95);
    padding: 32px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-strong), var(--neon-shadow-strong), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(255, 255, 255, 0.2);
    text-align: center;
    min-width: 320px;
    max-width: 90%;
    max-height: 90vh;
    transition: all .4s var(--ease-liquid);
    transform: translate(-50%, -50%) scale(.95);
    opacity: 0;
    animation: fadeInScale .4s var(--ease-bounce) forwards
  }




.overlay button {
  margin-top: 20px;
  padding: 12px 28px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.3s;
  color: var(--neon-black);
  font-size: 16px;
  background: var(--primary-color);
  border: none;
  overflow: hidden
}


.overlay button:hover {
  transform: scale(1.05);
  box-shadow: var(--neon-shadow);
}


.overlay button:active {
  transform: scale(1.0);
}


.overlay button.secondary {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-primary);
  border: 1px solid rgba(148, 163, 184, 0.35);
}


.overlay button.secondary:hover {
  background: rgba(148, 163, 184, 0.35);
  transform: scale(1.04);
}


.overlay button.danger {
  background: rgba(255, 0, 127, 0.2);
  color: var(--text-primary);
  border: 1px solid rgba(255, 0, 127, 0.45);
}


.overlay button.danger:hover {
  background: rgba(255, 0, 127, 0.3);
  transform: scale(1.04);
}


.overlay input {
  margin-top: 15px;
  padding: 12px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  border-radius: 50px;
  text-align: center;
  outline: none;
  transition: all .2s ease;
  font-size: 14px;
  width: 100%;
  max-width: 250px;
  backdrop-filter: var(--element-blur);
  -webkit-backdrop-filter: var(--element-blur);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3), var(--shadow-soft)
}


.overlay input:focus {
  border-color: var(--primary-color);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3), 0 0 0 2px rgba(0, 242, 255, .2)
}


.overlay input::placeholder {
  color: var(--text-muted)
}
@media (max-width:768px) {


  #game-score {
    top: 16px;
    right: 16px;
    padding: 10px 20px;
    font-size: 18px
  }

  #game-score .score-label {
    font-size: 12px;
    margin-right: 6px
  }

  #game-score .score-value {
    font-size: 20px
  }

  canvas {
    border-radius: 0px;
    margin: 16px
  }

  .overlay {
    padding: 24px;
    border-radius: 50px;
    min-width: 280px
  }
}
@media (max-width:480px) {


  #game-score {
    top: 12px;
    right: 12px;
    padding: 8px 16px;
    font-size: 16px
  }

  #game-score .score-label {
    font-size: 11px;
    margin-right: 4px
  }

  #game-score .score-value {
    font-size: 18px
  }

  .overlay {
    padding: 20px;
    border-radius: 50px;
    min-width: 260px
  }
}