* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 8-bit 复古风格背景：星空渐变 + 像素网格 + 扫描线 */
body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 4px),
    radial-gradient(1200px 600px at 20% 0%, #2a2140 0%, transparent 60%),
    radial-gradient(900px 500px at 85% 100%, #14283a 0%, transparent 55%),
    linear-gradient(160deg, #1a1230 0%, #0e1428 55%, #0a0f1c 100%);
  color: #e6e9ef;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 20px 12px;
  background-attachment: fixed;
}

/* 顶部星空闪烁 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 15% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 12%, #ffd76a 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 30%, #7cc7ff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 8%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 90% 24%, #b48cf0 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 45%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 60%, #7cc7ff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 55%, #fff 50%, transparent 51%);
  opacity: 0.7;
  z-index: 0;
  animation: starTwinkle 4s ease-in-out infinite;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.8; }
}

#app {
  width: 100%;
  max-width: 1180px;
  position: relative;
  z-index: 1;
}

/* 标题栏：标题 + 音乐开关 */
.title-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.music-btn {
  font-size: 13px;
  padding: 4px 12px;
  background: #2a2140;
  color: #ffd76a;
  border-color: #6a5aa0;
}

h1 {
  text-align: center;
  font-size: 28px;
  letter-spacing: 3px;
  color: #ffd76a;
  text-shadow: 2px 2px 0 #4a3a2b, 4px 4px 0 rgba(0, 0, 0, 0.5);
  font-weight: 900;
  margin: 0;
}

.hidden {
  display: none !important;
}

.muted {
  color: #8b93a7;
  font-size: 14px;
  margin-top: 10px;
}

/* ---------- 大厅 ---------- */
#lobby {
  background: #1b2029;
  border: 1px solid #2a3040;
  border-radius: 10px;
  padding: 24px;
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}

.lobby-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

#roomInput {
  flex: 1;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #3a4256;
  background: #12151c;
  color: #e6e9ef;
  font-size: 15px;
}

#roomInput:focus {
  outline: none;
  border-color: #ffd76a;
}

/* ---------- P2P 直连 ---------- */
.lobby-divider {
  display: block;
  margin-top: 22px;
  color: #7b8396;
  font-size: 13px;
  letter-spacing: 1px;
}

#p2pHint {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
}

.p2p-box {
  text-align: left;
  color: #b9c0cf;
  font-size: 14px;
  line-height: 1.7;
}

.p2p-box .p2p-step {
  margin: 2px 0 6px;
}

.p2p-box .p2p-step strong {
  color: #ffd76a;
}

.p2p-code {
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  margin: 6px 0 10px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #3a4256;
  background: #12151c;
  color: #e6e9ef;
  font-family: Consolas, monospace;
  font-size: 12px;
  resize: vertical;
}

.p2p-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 4px 0 12px;
}

.btn {
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  background: #2a3040;
  color: #e6e9ef;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  background: #384059;
  transform: translateY(-2px);
}

.btn:active {
  transform: scale(0.94);
}

.btn.primary {
  background: #d9a528;
  color: #1b2029;
  font-weight: bold;
}

.btn.primary:hover {
  background: #f0ba3a;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.room-info {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  background: #0f1510;
  border: 1px solid #3f6b46;
  color: #9fe3a8;
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- 对战 ---------- */
#arena {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 14px;
}

.fighter {
  flex: 1;
  background: #1b2029;
  border: 1px solid #2a3040;
  border-radius: 10px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.vs {
  align-self: center;
  font-size: 26px;
  font-weight: bold;
  color: #ff6b6b;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.6);
}

/* 结算条：居中战报 + 右侧双方行动图标说明 */
.settlement {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #141821;
  border: 1px solid #2a3040;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  min-height: 48px;
}

.settle-text {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: #e6e9ef;
  white-space: pre-line;
  max-height: 92px;
  overflow-y: auto;
}

.settle-acts {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.settle-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

.settle-act .ico {
  width: 16px;
  height: 16px;
}

.settle-act .act-name {
  font-weight: bold;
}

.settle-act .act-desc {
  color: #8b93a7;
}

.settle-act.me .act-name { color: #7cc7ff; }
.settle-act.opp .act-name { color: #ff8b7c; }

.fname {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.fname.me {
  color: #7cc7ff;
}

.fname.opp {
  color: #ff8b7c;
}

.hpbar {
  position: relative;
  height: 22px;
  background: #2a3040;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}

.hpfill {
  height: 100%;
  background: linear-gradient(90deg, #3aa05a, #59d47b);
  transition: width 0.4s ease;
}

.hpfill.low {
  background: linear-gradient(90deg, #c0392b, #e74c3c);
  animation: lowPulse 1.1s ease-in-out infinite;
}

.hptext {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.stat {
  font-size: 14px;
  color: #b9c0cf;
  line-height: 1.7;
}

.stat b {
  color: #e6e9ef;
}

/* 属性区：图标 + 数值条 */
.stat-zone {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.statbar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.statbar .ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.statbar b {
  min-width: 22px;
  text-align: right;
  font-size: 15px;
  color: #e6e9ef;
}

.statbar.atk b { color: #ff8b7c; }
.statbar.def b { color: #7cc7ff; }

.sbar {
  flex: 1;
  height: 8px;
  background: #2a3040;
  border-radius: 4px;
  overflow: hidden;
}

.sbar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.statbar.atk .sbar i { background: linear-gradient(90deg, #e0533f, #ff8b7c); }
.statbar.def .sbar i { background: linear-gradient(90deg, #3f7ad6, #7cc7ff); }

/* 卡牌展示 */
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.card-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #12151c;
  border: 1px solid #2a3040;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 13px;
  font-weight: bold;
  color: #b9c0cf;
}

.card-chip .ico {
  width: 15px;
  height: 15px;
}

.card-chip.atk { color: #ff8b7c; border-color: #5a3b36; }
.card-chip.def { color: #7cc7ff; border-color: #35475e; }
.card-chip.enh { color: #ffd76a; border-color: #5a4d2b; }
.card-chip.steal { color: #b48cf0; border-color: #4a3a5e; }
.card-chip.perfect {
  color: #9fe3a8;
  border-color: #3f6b46;
  background: #0f1510;
}

.buffs {
  margin-top: 8px;
  font-size: 13px;
  color: #ffd76a;
  line-height: 1.6;
  min-height: 20px;
}

.buff-chip {
  display: inline-block;
  background: #3a3040;
  border-radius: 4px;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
}

/* 新增buff：弹出 + 金光 */
.buff-chip.fresh {
  background: #4a3a2b;
  color: #ffd76a;
  animation: buffPop 0.5s ease;
}

/* 对手保密buff：虚化 + 问号风格 */
.buff-chip.secret {
  background: #2b2b33;
  color: #9aa0b0;
  border: 1px dashed #565d70;
  font-style: italic;
}

.buff-chip.secret.fresh {
  background: #33333d;
  color: #c0c6d8;
  animation: buffPop 0.5s ease;
}

@keyframes buffPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- 状态 / 日志 / 行动 ---------- */
.status {
  text-align: center;
  font-size: 15px;
  color: #ffd76a;
  margin-bottom: 10px;
  min-height: 22px;
}

/* 三栏布局：左日志 / 中对战 / 右图例 */
.game-layout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.game-main {
  flex: 1;
  min-width: 0;
}

.log {
  flex: 0 0 220px;
  background: #12151c;
  border: 1px solid #2a3040;
  border-radius: 8px;
  padding: 12px;
  height: 480px;
  max-height: 70vh;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 0;
  position: sticky;
  top: 12px;
}

/* 右侧图例：图标含义说明列表 */
.legend {
  flex: 0 0 200px;
  background: #1b2029;
  border: 1px solid #2a3040;
  border-radius: 10px;
  padding: 14px;
  position: sticky;
  top: 12px;
}

.legend-title {
  font-size: 14px;
  font-weight: bold;
  color: #ffd76a;
  margin-bottom: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #222838;
}

.legend-item:last-child {
  border-bottom: none;
}

.legend-item .ico {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.legend-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.legend-txt b {
  font-size: 13px;
  color: #e6e9ef;
}

.legend-txt span {
  font-size: 12px;
  color: #8b93a7;
  line-height: 1.4;
}

.log .turn-divider {
  color: #5b6478;
  margin: 6px 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  min-height: 46px;
}

.actions .btn {
  min-width: 90px;
  font-size: 15px;
}

/* 行动卡牌：四个选项以卡牌形式呈现 */
.card-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 96px;
  min-height: 84px;
  padding: 8px 6px 6px;
  border-radius: 8px;
  border: 2px solid #2a3040;
  background: linear-gradient(180deg, #232a38 0%, #1b2029 100%);
  color: #e6e9ef;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.card-btn .card-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}

.card-btn .card-ico svg {
  width: 30px;
  height: 30px;
}

.card-btn .card-label {
  font-size: 14px;
  line-height: 1.2;
}

.card-btn::after {
  content: attr(data-count);
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  background: #ff6b6b;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.card-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.card-btn:active {
  transform: scale(0.94);
}

.card-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.card-btn.atk { border-color: #5a3b36; }
.card-btn.def { border-color: #35475e; }
.card-btn.enh { border-color: #5a4d2b; }
.card-btn.steal { border-color: #4a3a5e; }
.card-btn.atk .card-label { color: #ff8b7c; }
.card-btn.def .card-label { color: #7cc7ff; }
.card-btn.enh .card-label { color: #ffd76a; }
.card-btn.steal .card-label { color: #b48cf0; }

/* 跳过：独立按钮，与卡牌区分 */
.skip-btn {
  align-self: center;
  background: #3a3040;
  border: 1px dashed #6a5aa0;
}

.skip-btn:hover {
  background: #4a3a5e;
}

/* 行动卡牌逐张弹入 */
.card-btn {
  animation: popIn 0.28s ease backwards;
}
.actions .card-btn:nth-child(1) { animation-delay: 0s; }
.actions .card-btn:nth-child(2) { animation-delay: 0.05s; }
.actions .card-btn:nth-child(3) { animation-delay: 0.1s; }
.actions .card-btn:nth-child(4) { animation-delay: 0.15s; }
.actions .skip-btn { animation-delay: 0.2s; }

/* 回合倒计时：居中显示，固定不移动，带标签文字 */
.timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.timer-label {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #e6e9f0;
}

.timer-text {
  min-width: 52px;
  text-align: center;
  font-size: 34px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: #59d47b;
  text-shadow: 0 0 12px rgba(89, 212, 123, 0.55);
}

.timer-text.urgent {
  color: #ff6b6b;
  text-shadow: 0 0 12px rgba(255, 107, 107, 0.6);
  animation: lowPulse 0.6s ease-in-out infinite;
}

/* 卡牌风格弹窗选项 */
.card-opt {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 96px;
  min-height: 96px;
  padding: 8px 6px;
  border-radius: 8px;
  border: 2px solid #2a3040;
  background: linear-gradient(180deg, #232a38 0%, #1b2029 100%);
  color: #e6e9ef;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.card-opt .card-opt-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.card-opt .card-opt-ico svg {
  width: 26px;
  height: 26px;
}

.card-opt .card-opt-desc {
  font-size: 11px;
  font-weight: normal;
  color: #8b93a7;
  line-height: 1.3;
}

.card-opt:hover {
  transform: translateY(-3px);
  border-color: #ffd76a;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.card-opt:active {
  transform: scale(0.94);
}

.card-opt.atk { border-color: #5a3b36; }
.card-opt.def { border-color: #35475e; }
.card-opt.enh { border-color: #5a4d2b; }
.card-opt .card-opt-label.atk { color: #ff8b7c; }
.card-opt .card-opt-label.def { color: #7cc7ff; }
.card-opt .card-opt-label.enh { color: #ffd76a; }

/* 卡牌选项弹入 */
.card-opt {
  animation: popIn 0.28s ease backwards;
}
.card-opt-row .card-opt:nth-child(1) { animation-delay: 0s; }
.card-opt-row .card-opt:nth-child(2) { animation-delay: 0.05s; }
.card-opt-row .card-opt:nth-child(3) { animation-delay: 0.1s; }
.card-opt-row .card-opt:nth-child(4) { animation-delay: 0.15s; }

/* ---------- 弹窗 ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.overlay-box {
  background: #1b2029;
  border: 1px solid #3a4256;
  border-radius: 12px;
  padding: 24px;
  max-width: 580px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  margin: auto;
}

.overlay-box h2 {
  color: #ffd76a;
  margin-bottom: 12px;
  font-size: 20px;
}

.overlay-box .desc {
  color: #b9c0cf;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 16px;
  white-space: pre-line;
}

.overlay-box .opt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.overlay-box .opt-row .btn {
  min-width: 96px;
}

.result-big {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 18px;
}

/* 游戏说明正文 */
.help {
  text-align: left;
  color: #b9c0cf;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 16px;
}

.help p {
  margin: 0 0 10px;
}

.help h3 {
  color: #ffd76a;
  font-size: 15px;
  margin: 16px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #2a3040;
}

.help b {
  color: #ffd76a;
}

/* ==================== 动效 ==================== */

/* 行动按钮逐颗弹入 */
.actions .btn {
  animation: popIn 0.28s ease backwards;
}
.actions .btn:nth-child(1) { animation-delay: 0s; }
.actions .btn:nth-child(2) { animation-delay: 0.04s; }
.actions .btn:nth-child(3) { animation-delay: 0.08s; }
.actions .btn:nth-child(4) { animation-delay: 0.12s; }
.actions .btn:nth-child(5) { animation-delay: 0.16s; }

@keyframes popIn {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

/* 受击：面板抖动 + 红闪 */
.fighter.hit {
  animation: shake 0.4s ease;
}

.fighter.hit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 80, 80, 0.35);
  border-radius: 10px;
  animation: hitFlash 0.45s ease forwards;
  pointer-events: none;
  z-index: 3;
}

@keyframes hitFlash {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* 伤害飘字（弹出 + 上浮） */
.dmg-num {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  font-size: 42px;
  font-weight: bold;
  color: #ff6b6b;
  text-shadow: 0 0 14px rgba(255, 107, 107, 0.9);
  pointer-events: none;
  z-index: 5;
  animation: dmgFloat 2s ease-out forwards;
}

@keyframes dmgFloat {
  0% { opacity: 1; transform: translate(-50%, 0) scale(1.6); }
  15% { transform: translate(-50%, -8px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}

/* 回合状态闪烁 */
.status.status-flash {
  animation: statusFlash 0.5s ease;
}

@keyframes statusFlash {
  0% { transform: scale(1.08); color: #fff; }
  100% { transform: scale(1); }
}

/* 日志行淡入 */
.log .log-line {
  animation: logIn 0.3s ease;
}

@keyframes logIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* 弹窗进出 */
.overlay {
  animation: overlayIn 0.25s ease;
}

@keyframes overlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.overlay-box {
  animation: boxIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes boxIn {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 低血脉动 */
@keyframes lowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* 结算大字弹出 */
.result-big {
  animation: resultPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes resultPop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ==================== 火柴人 ==================== */
.fighter-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.stickman-zone {
  height: 356px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.stickman {
  height: 356px;
  width: auto;
  display: block;
  overflow: visible;
}

/* 对手：左右镜像，使双方火柴人面对面 */
.stickman.flip {
  transform: scaleX(-1);
}

.stickman .fig {
  transform-box: view-box;
  transform-origin: 60px 140px;
}

/* 手臂绕肩部旋转（SVG 视口坐标） */
.stickman .arm-r,
.stickman .arm-l {
  transform-box: view-box;
  transform-origin: 60px 46px;
}

.stickman .shield {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}

/* 待机：轻微呼吸 + 手臂小幅摆动，更生动 */
.stickman.idle .fig {
  animation: idleBob 2.4s ease-in-out infinite;
}

@keyframes idleBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.stickman.idle .arm-r {
  animation: idleArmSway 2.4s ease-in-out infinite;
}

.stickman.idle .arm-l {
  animation: idleArmSway 2.4s ease-in-out infinite reverse;
}

@keyframes idleArmSway {
  0%, 100% { transform: rotate(2deg); }
  50% { transform: rotate(-3deg); }
}

/* 攻击：挥剑（举过头顶再劈下） */
.stickman.attack .arm-r {
  animation: attackSwing 0.55s ease;
}

@keyframes attackSwing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-150deg); }
  55% { transform: rotate(-40deg); }
  75% { transform: rotate(-20deg); }
  100% { transform: rotate(0deg); }
}

/* 攻击buff专属动作：暴怒一击 = 重斧式蓄力猛劈 */
.stickman.attack.rage .arm-r {
  animation: rageSmash 0.7s cubic-bezier(0.33, 0, 0, 1);
}

@keyframes rageSmash {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-175deg); }
  58% { transform: rotate(-28deg); }
  80% { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
}

.stickman.attack.rage .fig {
  animation: rageBody 0.7s ease;
}

@keyframes rageBody {
  0% { transform: scale(1); filter: none; }
  30% { transform: scale(1.09); filter: drop-shadow(0 0 7px #ff6b6b); }
  55% { transform: scale(1.02); filter: drop-shadow(0 0 12px #ff6b6b); }
  100% { transform: scale(1); filter: none; }
}

/* 攻击buff专属动作：破甲突袭 = 快速前刺连击 */
.stickman.attack.shatter .arm-r {
  animation: shatterThrust 0.5s ease;
}

@keyframes shatterThrust {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-34deg); }
  35% { transform: rotate(30deg); }
  50% { transform: rotate(-20deg); }
  65% { transform: rotate(26deg); }
  85% { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}

/* 攻击buff专属动作：迎头痛击 = 双刀连斩 */
.stickman.attack.clash .arm-r {
  animation: clashSlash 0.6s ease;
}

@keyframes clashSlash {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(-150deg); }
  35% { transform: rotate(-30deg); }
  50% { transform: rotate(-140deg); }
  70% { transform: rotate(-25deg); }
  100% { transform: rotate(0deg); }
}

/* 防御：把盾朝对面的方向举起（盾臂向内挥到身前挡住攻击） */
.stickman.defend .arm-l {
  animation: defendRaise 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes defendRaise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-120deg); }
}

/* 偷取：伸手抓取 */
.stickman.steal .arm-r {
  animation: stealReach 0.6s ease;
}

@keyframes stealReach {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(-60deg); }
  100% { transform: rotate(0deg); }
}

/* 强化：金光护体 */
.stickman.enhance .fig {
  animation: enhanceGlow 0.8s ease;
}

@keyframes enhanceGlow {
  0% { filter: drop-shadow(0 0 2px #ffd76a); transform: scale(1); }
  50% { filter: drop-shadow(0 0 12px #ffd76a); transform: scale(1.06); }
  100% { filter: drop-shadow(0 0 2px #ffd76a); transform: scale(1); }
}

/* 跳过：垂头丧气 */
.stickman.giveup .fig {
  animation: giveupSlump 0.6s ease forwards;
}

@keyframes giveupSlump {
  0% { transform: translateY(0); }
  60% { transform: translateY(6px); }
  100% { transform: translateY(6px); }
}

.stickman.giveup .arm-r,
.stickman.giveup .arm-l {
  animation: giveupArms 0.6s ease forwards;
}

@keyframes giveupArms {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(18deg); }
}

/* 冲锋：攻击方朝对手方向猛冲（先快后带过冲的力量感曲线） */
.stickman-zone.lunge {
  animation: chargeLunge 0.55s cubic-bezier(0.33, 0, 0, 1);
}

@keyframes chargeLunge {
  0% { transform: translateX(0); }
  40% { transform: translateX(var(--cd, 0px)); }
  55% { transform: translateX(calc(var(--cd, 0px) * 1.06)); }
  75% { transform: translateX(calc(var(--cd, 0px) * 0.96)); }
  100% { transform: translateX(0); }
}

/* 冲锋落位后再挥剑，形成“冲刺-出招”的先后节奏 */
.stickman-zone.lunge .stickman.attack .arm-r {
  animation-delay: 0.3s;
}

/* 窄屏缩小火柴人，保证左右布局不挤；三栏改上下堆叠 */
@media (max-width: 720px) {
  .stickman-zone {
    height: 224px;
  }
  .stickman {
    height: 224px;
  }
  .game-layout {
    flex-direction: column;
  }
  .log {
    flex-basis: auto;
    width: 100%;
    height: 180px;
    position: static;
  }
  .legend {
    flex-basis: auto;
    width: 100%;
    position: static;
  }
}

/* 系统偏好减少动效时，关闭全部动画 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}