/*
 * 小宝游戏站 - 公共样式文件
 * 包含通用游戏组件样式
 * 
 * 使用指南:
 * - 必须保留以下UI结构: #navbar, .home-btn, .navbar-title, .overlay
 * - 必须引用公共样式: ../common/assets/css/game-ui.css
 * - 必须使用主页链接格式: <a href="../index.html" class="home-btn">🏠</a>
 * - 游戏独有逻辑只写在游戏目录内，不要影响其他游戏
 * - 分数实时显示在游戏画布右上角，不在导航栏中
 * - 游戏结束后只保留"重新开始"按钮与逻辑
 * - 游戏事件跟踪函数位于 ../utils.js，包括 trackGameStart, trackGameEnd, trackEvent
 */

/* CSS 变量定义 - 霓虹黑色 Liquid Glass 主题 */
:root{
  /* 霓虹黑色色彩系统 */
  --primary-color:#00f2ff;
  --secondary-color:#ff007f;
  --accent-color:#32D74B;
  --warning-color:#FF9500;
  
  /* 霓虹黑色背景 */
  --neon-black:#0a0a0a;
  --neon-dark:#1a1a1a;
  --neon-surface:#2a2a2a;
  --neon-glow:rgba(0,242,255,.3);
  --neon-glow-strong:rgba(0,242,255,.6);
  
  /* 玻璃态背景 - 霓虹黑色版 */
  --glass-bg:rgba(255,255,255,.08);
  --glass-bg-hover:rgba(20,20,20,.7);
  --glass-border:rgba(0,242,255,.3);
  --glass-border-hover:rgba(0,242,255,.5);
  
  /* 背景模糊 */
  --background-blur:blur(25px);
  --element-blur:blur(15px);
  --edge-blur:blur(5px);
  
  /* 文本颜色 */
  --text-primary:#ffffff;
  --text-secondary:#b3b3b3;
  --text-muted:#666666;
  
  /* 阴影效果 - 霓虹黑色版 */
  --shadow-soft:0 8px 32px rgba(0,0,0,.4);
  --shadow-medium:0 12px 48px rgba(0,0,0,.6);
  --shadow-strong:0 16px 64px rgba(0,0,0,.8);
  --neon-shadow:0 0 20px var(--neon-glow);
  --neon-shadow-strong:0 0 40px var(--neon-glow-strong);
  
  /* 动画曲线 */
  --ease-liquid:cubic-bezier(.4,0,.2,1);
  --ease-bounce:cubic-bezier(.68,-.55,.265,1.55);
}

/* 霓虹黑色 Liquid Glass 全局样式 */
body{
  margin:0;
  overflow-y:auto;
  overflow-x:hidden;
  background:radial-gradient(ellipse at center, 
    var(--neon-dark) 0%, 
    var(--neon-black) 50%, 
    #000000 100%);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  position:relative
}

/* 霓虹光晕背景层 */
body::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at 30% 30%, var(--neon-glow) 0%, transparent 40%),
              radial-gradient(circle at 70% 70%, rgba(255,0,127,.3) 0%, transparent 40%),
              radial-gradient(circle at 50% 20%, rgba(255,149,0,.2) 0%, transparent 30%);
  z-index:-1
}



/* 游戏画布 - 霓虹黑色 Liquid Glass 效果 */
canvas{
  background:var(--neon-black);
  backdrop-filter:var(--background-blur);
  -webkit-backdrop-filter:var(--background-blur);
  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:var(--glass-bg);
  backdrop-filter:var(--element-blur);
  -webkit-backdrop-filter:var(--element-blur);
  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:100;
  transition:all .3s var(--ease-liquid);
  pointer-events:none
}

#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
}

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



/* Liquid Glass 导航栏 - 滚动收缩效果 */
#navbar{
  position:fixed;
  top:20px;
  left:20px;
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--glass-bg);
  backdrop-filter:var(--element-blur);
  -webkit-backdrop-filter:var(--element-blur);
  border:1px solid var(--glass-border);
  border-radius:50px;
  padding:10px 20px;
  box-shadow:var(--shadow-soft), var(--neon-shadow);
  transition:all .4s var(--ease-liquid);
  z-index:1000;
  min-width: 130px;
}

#navbar.scrolled{
  padding:8px 10px;
  min-width: 48px;
  gap:0
}

#navbar .home-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  font-size: 24px;
  color: var(--primary-color);
  text-decoration:none;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 4px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform 0.2s var(--ease-liquid), color 0.2s ease;
  pointer-events: auto;
  flex-shrink: 0;
}

#navbar .home-btn:hover{
  transform: scale(1.15);
  color: var(--secondary-color);
}

#navbar .home-btn:active{
  transform: scale(0.95);
}

/* 主页图标已在HTML中直接定义 */
  
#navbar .navbar-title{
  display:flex;
  align-items:center;
  font-size:18px;
  font-weight:600;
  color:var(--primary-color);
  text-shadow:var(--neon-shadow);
  white-space:nowrap;
  flex-shrink:0;
  transition:opacity .3s var(--ease-liquid), width .3s var(--ease-liquid), margin .3s var(--ease-liquid), padding .3s var(--ease-liquid);
  overflow:hidden
}

#navbar.scrolled .navbar-title{
  opacity:0;
  width:0;
  margin:0;
  padding:0;
}

/* 以下为原代码剩余部分，未改动 */
.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;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:var(--text-primary);
  background:var(--glass-bg);
  backdrop-filter:var(--background-blur);
  -webkit-backdrop-filter:var(--background-blur);
  padding:32px;
  border-radius:50px;
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-strong), var(--neon-shadow-strong), inset 0 1px 0 rgba(255,255,255,.1);
  text-align:center;
  min-width:320px;
  max-width:90%;
  max-height:90vh;
  transition:all .4s var(--ease-liquid);
  transform:scale(.95);
  opacity:0;
  animation:fadeInScale .4s var(--ease-bounce) forwards
}

@keyframes fadeInScale{
  to{
    transform:scale(1);
    opacity:1
  }
}



.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){
  #ui{
    top:16px;
    left:16px;
    padding:12px 16px;
    font-size:14px
  }
  
  #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
  }
  
  #navbar .home-btn{
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
}

@media (max-width:480px){
  #ui{
    top:12px;
    left:12px;
    padding:10px 14px
  }
  
  #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
  }
  
  #navbar .home-btn{
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
}