/* 点球模拟器 HUD 样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  user-select: none;
}

#game-container, #game-container canvas {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}

#hud { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#hud .hidden { display: none !important; }

/* ---------- 比分板 ---------- */
#scoreboard {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px; padding: 10px 26px; text-align: center; color: #fff;
  backdrop-filter: blur(4px);
}
#sb-names { font-size: 22px; font-weight: bold; letter-spacing: 1px; }
#sb-names .sb-player { color: #ffd54a; margin-right: 14px; }
#sb-names .sb-ai { color: #6ec6ff; margin-left: 14px; }
#sb-score { font-size: 26px; }
#sb-rounds { margin-top: 6px; font-size: 15px; letter-spacing: 3px; }
#sb-rounds .kick { margin: 0 2px; }
#sb-rounds .goal { color: #5eff5e; }
#sb-rounds .miss { color: #ff5e5e; }
#sb-rounds .pending { color: rgba(255,255,255,.35); }
#sb-rounds .sep { color: rgba(255,255,255,.4); margin: 0 8px; }

/* ---------- 中央信息 ---------- */
#message {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%,-50%);
  font-size: 64px; font-weight: bold; color: #fff;
  text-shadow: 0 0 18px rgba(0,0,0,.8), 0 4px 6px rgba(0,0,0,.6);
  white-space: nowrap;
}
#message.goal { color: #5eff5e; }
#message.save { color: #6ec6ff; }
#message.miss { color: #ff8a5e; }
#submessage {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%);
  font-size: 24px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.8);
  white-space: nowrap;
}

/* ---------- 蓄力条 ---------- */
#power-wrap {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  width: 340px; text-align: center;
}
#power-label { color: #fff; font-size: 15px; margin-bottom: 8px; text-shadow: 0 1px 4px #000; }
#power-bar {
  height: 22px; border-radius: 11px; overflow: hidden;
  background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.7);
}
#power-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #5eff5e, #ffe14a 55%, #ff5e3c);
  transition: none;
}

/* ---------- 守门提示 ---------- */
#keeper-hint {
  position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); border-radius: 10px; padding: 12px 22px;
  color: #fff; text-align: center;
}
.kh-title { font-size: 16px; font-weight: bold; margin-bottom: 8px; color: #ffd54a; }
.kh-grid { display: grid; grid-template-columns: repeat(3, 110px); gap: 4px 10px; font-size: 14px; }

/* ---------- 菜单 / 结算 ---------- */
#menu, #endscreen {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(0,40,10,.55), rgba(0,0,0,.88));
  pointer-events: auto;
}
#menu h1, #endscreen h1 {
  font-size: 58px; color: #fff; text-shadow: 0 0 24px rgba(94,255,94,.5);
  margin-bottom: 10px;
}
.menu-sub { color: #cfcfcf; font-size: 20px; margin-bottom: 44px; }
.menu-btn {
  display: block; width: 300px; margin: 12px 0; padding: 16px 0;
  font-size: 22px; font-weight: bold; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #2e7d32, #1b5e20);
  border: 2px solid rgba(255,255,255,.35); border-radius: 12px;
  transition: transform .12s, box-shadow .12s;
  pointer-events: auto;
}
.menu-btn:hover { transform: scale(1.05); box-shadow: 0 0 22px rgba(94,255,94,.45); }
.menu-btn-small { width: 220px; padding: 10px 0; font-size: 17px; background: linear-gradient(180deg, #546e7a, #263238); }
#btn-keeper { background: linear-gradient(180deg, #1565c0, #0d3c78); }
#btn-keeper:hover { box-shadow: 0 0 22px rgba(110,198,255,.45); }
.menu-tips { margin-top: 34px; color: #9e9e9e; font-size: 15px; }
#end-score { color: #ffd54a; font-size: 30px; margin: 8px 0 34px; }
#end-title.win { color: #5eff5e; }
#end-title.lose { color: #ff5e5e; }
#btn-tomenu { background: linear-gradient(180deg, #546e7a, #263238); }

/* ---------- 规则详解界面（条目6） ---------- */
#rules-screen {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.82); pointer-events: auto; z-index: 20;
}
.rules-panel {
  width: min(680px, 88%); max-height: 84%; overflow-y: auto;
  background: rgba(12,24,14,.95); border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px; padding: 26px 34px; color: #e8f0e8;
}
.rules-panel h2 { text-align: center; margin-bottom: 14px; color: #ffd54a; }
.rules-panel h3 { margin: 16px 0 6px; color: #7ee787; font-size: 19px; }
.rules-panel p { font-size: 14.5px; line-height: 1.75; margin: 5px 0; color: #d5ddd5; }
.rules-panel kbd {
  background: #263238; border: 1px solid #78909c; border-bottom-width: 3px;
  border-radius: 5px; padding: 1px 7px; font-family: inherit; font-size: 13.5px;
}
.rules-panel button { display: block; margin: 20px auto 0; }

/* ---------- 开局倒计时（条目7） ---------- */
#countdown {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); pointer-events: none;
}
#cd-number {
  font-size: 150px; font-weight: bold; color: #fff;
  text-shadow: 0 0 34px rgba(94,255,94,.75), 0 6px 10px rgba(0,0,0,.7);
  animation: cd-pop .9s ease-out infinite;
}
@keyframes cd-pop {
  0% { transform: scale(1.45); opacity: 0; }
  18% { transform: scale(1); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: scale(.92); opacity: 0; }
}
#cd-rules {
  margin-top: 8px; max-width: 620px; text-align: center;
  background: rgba(0,0,0,.6); border-radius: 12px; padding: 14px 26px;
  color: #fff; font-size: 17px; line-height: 1.8;
}
#cd-rules .cd-title { color: #ffd54a; font-weight: bold; font-size: 20px; }
#cd-rules kbd {
  background: #263238; border: 1px solid #78909c; border-bottom-width: 3px;
  border-radius: 5px; padding: 0 6px; font-size: 14px;
}

/* ---------- 投降按钮 ---------- */
#btn-surrender {
  position: absolute; top: 14px; left: 14px;
  height: 44px; padding: 0 16px; font-size: 16px; font-weight: bold;
  background: rgba(0,0,0,.55); color: #fff;
  border: 1px solid rgba(255,255,255,.3); border-radius: 22px;
  cursor: pointer; pointer-events: auto;
  transition: background .15s, border-color .15s;
}
#btn-surrender:hover { background: rgba(120,20,20,.75); }
#btn-surrender.confirm { background: rgba(180,30,30,.9); border-color: #ff8a80; }

/* ---------- 静音按钮 ---------- */
#btn-mute {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; font-size: 20px;
  background: rgba(0,0,0,.55); color: #fff;
  border: 1px solid rgba(255,255,255,.3); border-radius: 50%;
  cursor: pointer; pointer-events: auto;
}

/* ---------- 准星（射手模式） ---------- */
#hud.aiming { cursor: none; }