/* ============================================================
 * 牌战 · Card Duel —— 样式
 *
 * 美术方向：涂鸦 / 手绘贴纸
 *   暗色墙面 + 纸质感卡牌 + 3px 厚黑描边 + 喷漆霓虹色
 *   颜色只表达状态，不做装饰：
 *     青 = 我方   品红 = 敌方   荧光黄 = 当前这一手
 *     橙 = 伤害   绿 = 成功格挡
 *
 * 布局对应 UI 示意图：
 *   敌方行： 敌方牌堆 | 敌方手牌（明牌） | 敌方血条
 *   战场：   敌方出牌区 / ── 战线（交锋带）── / 我方牌区
 *   我方行： 我方血条 | 我方手牌（明牌） | 我方牌堆
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* 作者样式里的 display 会盖掉 UA 对 [hidden] 的 display:none，这里显式兜底 */
[hidden] { display: none !important; }

:root {
  /* ---- 喷漆色板 ---- */
  --wall: #14161c;
  --wall-2: #0b0d12;
  --ink: #0a0c10;          /* 描边黑 */
  --paper: #f5f1e6;
  --paper-2: #e4ddcb;
  --mine: #22e0ff;
  --theirs: #ff2d6f;
  --neon: #ffe600;
  --hit: #ff8a1f;
  --guard: #35ff9e;
  --text: #eef3fa;
  --dim: #8b98ab;

  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);
  --stroke: 3px;           /* 统一描边粗细 */

  --font-hand: "KaiTi", "楷体", "STKaiti", "Kaiti SC", "Comic Sans MS", cursive;
  --font-ui: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  /* ---- 尺寸（沿用已验证的布局数值）---- */
  --hand-w: clamp(56px, 9.8vh, 96px);
  --hand-h: calc(var(--hand-w) * 1.42);
  --ehand-w: clamp(48px, 7.6vh, 76px);
  --ehand-h: calc(var(--ehand-w) * 1.42);
  --slot-w: clamp(64px, 11.4vh, 116px);
  --slot-h: calc(var(--slot-w) * 1.4);
  --eslot-w: clamp(52px, 9.4vh, 96px);
  --eslot-h: calc(var(--eslot-w) * 1.4);
  --hp-w: clamp(160px, 22vh, 250px);
  --pile-w: clamp(34px, 4.6vh, 46px);
  --pile-h: calc(var(--pile-w) * 1.42);
}

html, body { height: 100%; margin: 0; }

body {
  /* 暗墙 + 极淡的练习本网格 + 顶部环境光 */
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(34, 224, 255, .10) 0%, transparent 62%),
    radial-gradient(120% 80% at 50% 110%, rgba(255, 45, 111, .08) 0%, transparent 60%),
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 36px 100%,
    var(--wall);
  color: var(--text);
  font: 14px/1.45 var(--font-ui);
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

.app { position: relative; height: 100dvh; display: flex; flex-direction: column; }

/* three.js 特效层：铺满 app，跟着屏幕震动一起晃 */
.fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 压在拟声词之上（clash 是 20）：刀光要飞过字面才有"砍过去"的感觉。
     加色混合只提亮不遮挡，白字厚描边仍然清晰。HUD 是 30，仍在最上层。 */
  z-index: 22;
}

/* ===================== 战场 ===================== */

.arena {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(4px, 1vh, 14px);
  padding: clamp(8px, 1.6vh, 20px) clamp(12px, 2vw, 32px);
}

.band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(10px, 2vw, 32px);
}

.battlefield {
  position: relative;   /* 交锋表现的定位基准 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1.2vh, 14px);
}

.zone-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }

.zone__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--dim);
  min-height: 20px;
}

.zone__cap { white-space: nowrap; }
.zone__tools { display: flex; gap: 6px; }

.mini {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 7px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: #232833;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--ink);
  transition: translate .1s, box-shadow .1s, opacity .15s;
}
.mini:hover:not(:disabled) { translate: 0 -1px; box-shadow: 0 3px 0 var(--ink); }
.mini:active:not(:disabled) { translate: 0 1px; box-shadow: 0 1px 0 var(--ink); }
.mini:disabled { opacity: .35; cursor: not-allowed; }

/* 战线同时也是交锋带 —— 要有实际高度才放得下拟声词 */
.battleline {
  position: relative;
  width: min(780px, 64vw);
  height: clamp(84px, 10.6vh, 112px);
  display: grid;
  place-items: center;
}

.battleline::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(10, 12, 16, .9) 12%, rgba(255, 255, 255, .16) 50%, rgba(10, 12, 16, .9) 88%, transparent);
}

/* ===================== 交锋表现（战场正中） =====================
 * 竖向：上方的牌压下来、下方的牌顶上去，撞在中线上。
 * 不再画"左圆圈右圆圈"——牌自己就是打手，位置本身就是信息。
 * ============================================================ */

.clash {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
}

.clash.is-playing { animation: clashPop .9s cubic-bezier(.2, .9, .3, 1.1) both; }

@keyframes clashPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.28) rotate(-18deg); }
  8%   { opacity: 1; transform: translate(-50%, -50%) scale(1.46) rotate(8deg); }
  16%  { opacity: 1; transform: translate(-50%, -50%) scale(.93) rotate(-4deg); }
  24%  { opacity: 1; transform: translate(-50%, -50%) scale(1.07) rotate(2deg); }
  32%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  74%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -64%) scale(1.06) rotate(0deg); }
}

/* 撞击帧的爆闪：横向拉的椭圆，正好对应"上下两物相撞" */
.clash__burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 12px;
  margin: -6px 0 0 -11px;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--burst, #fff) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  pointer-events: none;
}
/* WebGL 生效时由 three.js 负责爆闪，CSS 这层就退位（两套都上会闪两次） */
body:not(.has-webgl) .clash.is-playing .clash__burst { animation: clashBurst .5s ease-out both; }

@keyframes clashBurst {
  0%   { opacity: .95; transform: scale(.3); }
  100% { opacity: 0; transform: scale(13, 7); }
}

/* 拟声词：手写体 + 超粗描边 + 背后的漫画星芒。
   paint-order 很关键，不然中文的描边会从内侧把笔画糊掉 */
.clash__word {
  position: relative;
  z-index: 1;
  font-family: var(--font-hand);
  font-size: clamp(34px, 4.9vh, 60px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  color: #fffdf7;
  -webkit-text-stroke: 7px var(--ink);
  paint-order: stroke fill;
  rotate: -7deg;
  text-shadow: 0 6px 0 rgba(0, 0, 0, .45);
}

/* 漫画爆炸星芒（8 角星），颜色跟着这一手的音色走 */
.clash__word::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 146%;
  height: 176%;
  transform: translate(-50%, -50%);
  background: var(--tone, var(--neon));
  clip-path: polygon(
    50% 0%, 62.6% 19.5%, 85.4% 14.6%, 80.5% 37.4%, 100% 50%,
    80.5% 62.6%, 85.4% 85.4%, 62.6% 80.5%, 50% 100%, 37.4% 80.5%,
    14.6% 85.4%, 19.5% 62.6%, 0% 50%, 19.5% 37.4%, 14.6% 14.6%, 37.4% 19.5%
  );
  z-index: -1;
  opacity: .96;
}

.clash__sub {
  position: relative;
  z-index: 2;           /* 压在星芒上面，别被盖住 */
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 12px;
  border-radius: 999px;
  white-space: nowrap;
  color: #171a21;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  rotate: 2deg;
}

/* ---- 四种结果各自的音色与爆闪颜色 ---- */

/* 互砍：橙红星芒，最大的爆炸 */
.clash.is-hit { --burst: #ffb347; --tone: var(--hit); }
.clash.is-hit .clash__sub { background: #ffd9b0; }

/* 我方吃亏：冷蓝，歪向另一边 */
.clash.is-mine { --burst: #7fd4ff; --tone: #2f9fd0; }
.clash.is-mine .clash__word { rotate: 7deg; }
.clash.is-mine .clash__sub { background: #cfe9fb; }

/* 我方得手：绿 */
.clash.is-guard { --burst: #7dffbe; --tone: #1fbe74; }
.clash.is-guard .clash__word { rotate: -5deg; }
.clash.is-guard .clash__sub { background: #cdf7e0; }

/* 两边都在举盾：故意做得最弱 —— 星芒小一圈、金色发闷、回弹也软 */
.clash.is-dull { --burst: #d7c08a; --tone: #a8925f; }
.clash.is-dull .clash__word {
  font-size: clamp(22px, 3.1vh, 36px);
  -webkit-text-stroke-width: 5px;
  rotate: 3deg;
}
.clash.is-dull .clash__word::before { width: 138%; height: 172%; }
.clash.is-dull .clash__sub { background: #ece2c6; }
.clash.is-dull.is-playing { animation-duration: 1.05s; }

/* ===================== 血条 ===================== */

.hp {
  position: relative;   /* 飘字的定位基准 */
  width: var(--hp-w);
  padding: 8px 11px 11px;
  border: var(--stroke) solid var(--ink);
  border-radius: 11px;
  background: linear-gradient(178deg, #fffdf7, var(--paper) 55%, var(--paper-2));
  box-shadow: 0 5px 0 var(--ink), 0 9px 18px rgba(0, 0, 0, .55);
  color: #171a21;
}

/* 手贴上去的轻微歪斜 */
.hp--enemy { justify-self: end; rotate: .8deg; }
.hp--player { justify-self: start; rotate: -.8deg; }

.hp__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.hp__name { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #4a515f; }
.hp--enemy .hp__name { color: #c02a55; }
.hp--player .hp__name { color: #12809c; }

.hp__armor {
  font-size: 12px;
  font-weight: 800;
  color: #0d3d52;
  background: #b9ecff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0 7px;
}

.hp__num { margin-left: auto; font-size: 12px; color: #6b7385; font-weight: 700; }
.hp__num b { font-size: 20px; color: #12151b; font-variant-numeric: tabular-nums; }

.hp__track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: #cdc6b4;
  border: 2px solid var(--ink);
  overflow: hidden;
}

.hp__fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  transition: width .38s cubic-bezier(.22, .8, .28, 1);
}

.hp--player .hp__fill { background: linear-gradient(90deg, #12a9cc, var(--mine)); }
.hp--enemy .hp__fill { background: linear-gradient(90deg, #c2184d, var(--theirs)); }

.hp.is-low .hp__fill { animation: pulse .9s ease-in-out infinite; }
.hp.is-low .hp__num b { color: #c2184d; }
.hp.is-hit { animation: hpShake .42s cubic-bezier(.36, .07, .19, .97); }

@keyframes pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.5); }
}

@keyframes hpShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  45%      { transform: translateX(6px); }
  70%      { transform: translateX(-3px); }
}

/* ===================== 飘字（手写数字） ===================== */

.popup {
  position: absolute;
  left: 50%;
  top: -14px;
  font-family: var(--font-hand);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  animation: popUp 1.15s cubic-bezier(.2, .8, .3, 1) forwards;
}

.popup--damage { color: var(--hit); }
.popup--armor  { color: var(--mine); }
.popup--heal   { color: var(--guard); }
.popup--block  { color: #9ad9f8; font-size: 17px; }

@keyframes popUp {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--shift, 0px)), 10px) scale(.6) rotate(-8deg); }
  22%  { opacity: 1; transform: translate(calc(-50% + var(--shift, 0px)), -14px) scale(1.2) rotate(4deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--shift, 0px)), -52px) scale(1) rotate(-2deg); }
}

/* ===================== 牌堆 ===================== */

.pile { display: flex; align-items: center; gap: 10px; }
.pile__stack { position: relative; width: var(--pile-w); height: var(--pile-h); flex: none; }

.pile__stack i {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: 2px solid var(--ink);
  background:
    repeating-linear-gradient(45deg, rgba(10, 12, 16, .22) 0 4px, transparent 4px 8px),
    linear-gradient(160deg, #cfc7b3, #a49b85);
  box-shadow: 0 3px 0 var(--ink);
}

.pile__stack i:nth-child(1) { transform: translate(-7px, -7px) rotate(-4deg); opacity: .45; }
.pile__stack i:nth-child(2) { transform: translate(-3.5px, -3.5px) rotate(-2deg); opacity: .75; }
.pile__stack i:nth-child(3) { transform: none; }

.pile__meta { display: flex; flex-direction: column; gap: 2px; }
.pile__label { font-size: 12px; letter-spacing: .1em; color: var(--dim); white-space: nowrap; }
.pile__nums { font-size: 11px; color: rgba(139, 152, 171, .85); white-space: nowrap; }
.pile__nums b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ===================== 卡牌（纸贴纸） ===================== */

.card {
  position: relative;
  /* 独立变换属性：和下面各处的 transform 互不打架 */
  rotate: var(--tilt, 0deg);
  border: var(--stroke) solid var(--ink);
  border-radius: 9px;
  background: linear-gradient(176deg, #fffdf7, var(--paper) 58%, var(--paper-2));
  box-shadow: 0 4px 0 var(--ink), 0 8px 16px rgba(0, 0, 0, .5);
  color: #171a21;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 5px 4px;
  /* transform 留给 3D 翻转，translate/scale/rotate 走独立属性，互不打架 */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .22s ease, translate .16s ease, scale .16s ease, box-shadow .16s ease, opacity .2s;
}

/* 顶部状态色带 */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--kind, #9aa3b2);
  border-bottom: 2px solid var(--ink);
}

.card__cost {
  position: absolute;
  top: 5px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: #fffdf7;
  background: var(--ink);
}

.card__glyph { font-size: 1.3em; line-height: 1.15; margin-top: 13px; }
.card__name {
  font-family: var(--font-hand);
  font-size: .84em;
  font-weight: 900;
  letter-spacing: .05em;
  margin-top: 1px;
  color: #12151b;
}
.card__text {
  font-size: .56em;
  line-height: 1.25;
  color: #5c6473;
  text-align: center;
  padding: 0 3px 3px;
  margin-top: auto;
  min-height: 0;
  overflow: hidden;
}

.card--attack { --kind: var(--hit); }
.card--defend { --kind: var(--mine); }
.card--skill  { --kind: var(--guard); }

/* 敌方在准备期锁定的顺序：喷漆斜纹的背面 */
.card--hidden {
  background:
    repeating-linear-gradient(45deg, rgba(255, 45, 111, .3) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #2b1420, #180d14);
  border-color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}

/* 手牌 */
.card--hand { width: var(--hand-w); height: var(--hand-h); font-size: calc(var(--hand-w) * .2); cursor: default; }
.hand--enemy .card { width: var(--ehand-w); height: var(--ehand-h); font-size: calc(var(--ehand-w) * .2); }

.card--hand.is-playable { cursor: pointer; }
.card--hand.is-playable:hover {
  translate: 0 -12px;
  scale: 1.07;
  box-shadow: 0 5px 0 var(--ink), 0 16px 28px rgba(0, 0, 0, .6), 0 0 0 3px var(--neon);
  z-index: 5;
}
.card--hand.is-locked { opacity: .5; filter: grayscale(.6); }

/* 出牌区里的牌 */
.card--slot { width: var(--slot-w); height: var(--slot-h); font-size: calc(var(--slot-w) * .2); }
.zone--enemy .card--slot { width: var(--eslot-w); height: var(--eslot-h); font-size: calc(var(--eslot-w) * .2); }

.card--slot.is-editable { cursor: grab; }
.card--slot.is-editable:hover {
  translate: 0 -10px;
  scale: 1.05;
  box-shadow: 0 5px 0 var(--ink), 0 14px 24px rgba(0, 0, 0, .6), 0 0 0 3px var(--neon);
  z-index: 5;
}

/* 拖拽排序 */
.card.is-dragging { opacity: .35; }
.card.is-drop { box-shadow: 0 4px 0 var(--ink), 0 0 0 4px var(--neon); }

/* 结算高亮：正在打出的这一手 / 已经打完的 */
.card.is-active {
  translate: 0 -8px;
  scale: 1.08;
  box-shadow: 0 5px 0 var(--ink), 0 0 0 3px var(--neon), 0 0 26px rgba(255, 230, 0, .5);
  z-index: 6;
}
.card.is-done { opacity: .38; filter: saturate(.4); }

/* 双方正在交锋的那张牌都朝中线探出去，并且在 3D 里朝对手前倾 */
#playerZone .card.is-active { translate: 0 -8px; transform: rotateX(15deg); }
#enemyZone  .card.is-active { translate: 0 8px;  transform: rotateX(-15deg); }

/* 正在格挡的牌立起来，像把盾竖在身前 */
#playerZone .card.is-guarding { transform: rotateX(28deg) scale(1.05); }
#enemyZone  .card.is-guarding { transform: rotateX(-28deg) scale(1.05); }

/* 幻化：牌闪一下缩掉，把位置让给兵器；兵器散场后再淡回来 */
.card.is-morphed {
  opacity: 0;
  scale: .22;
  filter: brightness(2.8) saturate(0);
  transition: opacity .13s ease, scale .16s cubic-bezier(.5, 0, .9, .4), filter .13s ease;
}

/* 攻击：冲向中线再弹回来 */
@keyframes cardStrikeUp {
  0%   { translate: 0 -8px; scale: 1.08; }
  28%  { translate: 0 -34px; scale: 1.18; }
  54%  { translate: 0 2px; scale: 1.02; }
  76%  { translate: 0 -13px; scale: 1.09; }
  100% { translate: 0 -8px; scale: 1.08; }
}
@keyframes cardStrikeDown {
  0%   { translate: 0 8px; scale: 1.08; }
  28%  { translate: 0 28px; scale: 1.18; }
  54%  { translate: 0 -2px; scale: 1.02; }
  76%  { translate: 0 12px; scale: 1.09; }
  100% { translate: 0 8px; scale: 1.08; }
}

#playerZone .card.is-striking { animation: cardStrikeUp .56s cubic-bezier(.3, .7, .35, 1) both; }
#enemyZone  .card.is-striking { animation: cardStrikeDown .56s cubic-bezier(.3, .7, .35, 1) both; }

/* 格挡：盾面荡开一圈光环 */
@keyframes cardGuard {
  0%   { box-shadow: 0 4px 0 var(--ink), 0 0 0 0 rgba(34, 224, 255, .95); }
  50%  { box-shadow: 0 4px 0 var(--ink), 0 0 0 13px rgba(34, 224, 255, 0); }
  100% { box-shadow: 0 4px 0 var(--ink), 0 0 0 0 rgba(34, 224, 255, 0); }
}
.card--slot.is-guarding { animation: cardGuard .62s ease-out both; }

/* 位置微调按钮 */
.card__move {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  opacity: 0;
  transition: opacity .15s;
}
.card--slot.is-editable:hover .card__move { opacity: 1; }

.mv {
  flex: 1;
  border: 0;
  border-top: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 3px 0;
  cursor: pointer;
}
.mv:hover { background: var(--neon); color: #12151b; }

/* ===================== 手牌区 ===================== */

.hand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, .7vw, 10px);
  perspective: 1000px;   /* 手牌翻转的透视 */
}
.hand--enemy { min-height: var(--ehand-h); }
.hand--player { min-height: var(--hand-h); align-items: flex-end; }

/* ===================== 出牌区 ===================== */

.zone {
  perspective: 1400px;   /* 结算时牌的立体前倾/立起 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1vw, 14px);
  padding: clamp(4px, .8vh, 10px) clamp(10px, 1.6vw, 22px);
  border-radius: 14px;
  border: 3px dashed rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .022);
  min-height: calc(var(--slot-h) + 20px);
}

.zone--enemy { border-color: rgba(255, 45, 111, .26); min-height: calc(var(--eslot-h) + 20px); }
.zone--player { border-color: rgba(34, 224, 255, .28); }

.slot {
  width: var(--slot-w);
  height: var(--slot-h);
  border-radius: 9px;
  border: 3px dashed rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .015);
}
.zone--enemy .slot { width: var(--eslot-w); height: var(--eslot-h); }

/* ===================== 入场动画 ===================== */

@keyframes cardIn {
  from { opacity: 0; translate: 0 16px; scale: .82; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}
.card.is-enter { animation: cardIn .24s cubic-bezier(.2, .9, .3, 1.25) both; }

/* ===================== HUD ===================== */

.hud {
  position: relative;
  z-index: 30;          /* 压在特效层上面 */
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 24px);
  padding: 10px clamp(12px, 2vw, 32px);
  border-top: var(--stroke) solid var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .35));
  backdrop-filter: blur(6px);
}

.hud__group { display: flex; align-items: center; gap: 8px; }
.hud__key { font-size: 11px; letter-spacing: .14em; color: var(--dim); }
.hud__val { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.hud__val--small { font-size: 12px; font-weight: 700; color: var(--dim); }
.hud__spacer { flex: 1; }

.hud__hint {
  font-size: 12px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud__phase {
  font-family: var(--font-hand);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 2px 13px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: #171a21;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--ink);
  rotate: -1.5deg;
}

.hud__phase.is-prep    { background: var(--neon); }
.hud__phase.is-resolve { background: #bfeeff; }
.hud__phase.is-over    { background: #ffd0a8; }

.pips { display: flex; gap: 4px; }

.pip {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: #cdc6b4;
}
.pip.is-full { background: var(--neon); }

/* ===================== 按钮（贴纸） ===================== */

.btn {
  font: inherit;
  font-family: var(--font-hand);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 6px 16px;
  border-radius: 9px;
  border: var(--stroke) solid var(--ink);
  background: var(--paper);
  color: #12151b;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
  transition: translate .1s, box-shadow .1s, opacity .15s;
  white-space: nowrap;
}

.btn:hover:not(:disabled) { translate: 0 -1px; box-shadow: 0 4px 0 var(--ink); }
.btn:active:not(:disabled) { translate: 0 2px; box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .35; cursor: not-allowed; }

.btn--primary { background: var(--neon); }
.btn--lg { font-size: 18px; padding: 10px 30px; }

/* ===================== 反馈分层 =====================
 * 掉血 → 数字留在战场 + 血条闪白抖 + 屏幕震  （唯一惊动血条和屏幕的事件）
 * 格挡 → 血条零反应，反馈全在战场上的那面盾
 * 濒死 → 视野最外缘常驻淡红（情绪压强，不是事件）
 * 致命 → 全屏红闪（因为稀缺，所以有力）
 * ================================================== */

.flylayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 28;
}

/* 伤害数字：出生在撞击点，朝受伤那一侧弹出 */
.bnum {
  position: absolute;
  translate: -50% -50%;
  font-family: var(--font-hand);
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(0, 0, 0, .5);
  animation: bnumPop .95s cubic-bezier(.2, .85, .3, 1) forwards;
}

.bnum--player { color: var(--mine); }    /* 我掉血 → 青色 */
.bnum--enemy  { color: var(--theirs); }  /* 敌方掉血 → 品红 */

@keyframes bnumPop {
  0%   { opacity: 0; transform: translateY(0) scale(.4) rotate(-12deg); }
  14%  { opacity: 1; transform: translate(0, calc(var(--push) * .55)) scale(1.55) rotate(6deg); }
  30%  { opacity: 1; transform: translate(0, var(--push)) scale(1.02) rotate(-2deg); }
  74%  { opacity: 1; transform: translate(0, var(--push)) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(0, calc(var(--push) * .7)) scale(.85) rotate(0deg); }
}

/* 血条：只有真掉血才闪白（格挡、护甲、回血都不闪） */
.hp::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.hp.is-hit::after { animation: hpFlash .34s ease-out; }

@keyframes hpFlash {
  0%   { opacity: .8; }
  100% { opacity: 0; }
}

/* 濒死：只走视野最外缘，不抢战场中心的戏 */
.dread {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 24;
  animation: dreadBreath 2.6s ease-in-out infinite;
}
.dread--mine {
  background: radial-gradient(125% 58% at 50% 118%, rgba(255, 45, 111, .38), transparent 68%);
}
/* 人眼对屏幕上缘更敏感，敌方那侧压暗一点，免得喧宾夺主 */
.dread--theirs {
  background: radial-gradient(125% 58% at 50% -18%, rgba(255, 45, 111, .29), transparent 68%);
}
@keyframes dreadBreath {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* 致命一击：全屏红闪。前面几十次挨打都没红，这一下才有分量 */
.lethal {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 29;
  background: radial-gradient(120% 88% at 50% 50%, rgba(255, 45, 111, .30), rgba(255, 45, 111, .66));
  opacity: 0;
}
.lethal.is-on { animation: lethalFlash .8s ease-out both; }

@keyframes lethalFlash {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===================== 回合开场横幅 ===================== */

.roundbanner {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  z-index: 26;          /* 在特效层之上、HUD 之下 */
  opacity: 0;
}

.roundbanner.is-play { animation: bannerSlam 1.1s cubic-bezier(.2, .9, .3, 1.05) both; }

/* 从大到小"砸"进来，再轻轻弹一下 —— 比淡入有气势得多 */
@keyframes bannerSlam {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(2.5) rotate(-10deg); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(.93) rotate(3deg); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(-1.5deg); }
  28%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  74%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -64%) scale(.96) rotate(0deg); }
}

.roundbanner__word {
  font-family: var(--font-hand);
  font-size: clamp(34px, 5.2vh, 62px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  color: #fffdf7;
  -webkit-text-stroke: 7px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(0, 0, 0, .5);
}

.roundbanner__sub {
  font-size: 13px;
  font-weight: 800;
  padding: 2px 13px;
  border-radius: 999px;
  color: #171a21;
  background: var(--neon);
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  rotate: 2deg;
}

/* ===================== 战斗日志 ===================== */

.log {
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 84vw);
  /* 底部留出 HUD 高度，否则会挡住"确定出牌"点不到 */
  height: calc(100dvh - var(--hud-h, 58px));
  background: rgba(10, 13, 18, .97);
  border-left: var(--stroke) solid var(--ink);
  backdrop-filter: blur(10px);
  transform: translateX(101%);
  transition: transform .26s cubic-bezier(.3, .8, .3, 1);
  display: flex;
  flex-direction: column;
  z-index: 40;
}

.log.is-open { transform: none; }

.log__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 12px 16px;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--dim);
  border-bottom: 2px solid var(--ink);
}

.log__close {
  font: inherit;
  font-size: 15px;
  line-height: 1;
  width: 26px; height: 26px;
  border-radius: 7px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: #12151b;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--ink);
}
.log__close:hover { background: var(--neon); }

.log__list {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 10px 14px 24px;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.6;
}

.log__item { padding: 3px 0; color: #b9c6d6; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.log__item--turn   { color: var(--neon); font-weight: 800; letter-spacing: .06em; margin-top: 6px; }
.log__item--step   { color: #d7c08a; margin-top: 4px; }
.log__item--player { color: #9ad9f8; }
.log__item--enemy  { color: #ff9ab8; }
.log__item--damage { color: #ffb4af; }
.log__item--armor  { color: #9fd0ff; }
.log__item--heal   { color: #86efac; }
.log__item--warn   { color: #d9c07a; }

/* ===================== 规则（一页草稿纸） ===================== */

.help {
  position: fixed;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  width: min(620px, 92vw);
  max-height: 64dvh;
  overflow-y: auto;
  padding: 18px 22px;
  border-radius: 12px;
  border: var(--stroke) solid var(--ink);
  background: linear-gradient(178deg, #fffdf7, var(--paper) 60%, var(--paper-2));
  color: #171a21;
  box-shadow: 0 8px 0 var(--ink), 0 20px 50px rgba(0, 0, 0, .7);
  rotate: -.6deg;
  z-index: 45;
  font-size: 13px;
}

.help h3 {
  margin: 0 0 8px;
  font-family: var(--font-hand);
  font-size: 17px;
  letter-spacing: .08em;
  color: #12151b;
}
.help h3:not(:first-child) { margin-top: 18px; }
.help ol, .help ul { margin: 0; padding-left: 20px; color: #3c434f; line-height: 1.8; }
.help b { color: #12151b; }

.help table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #3c434f;
}
.help th, .help td { border: 2px solid var(--ink); padding: 6px 10px; text-align: center; }
.help th { color: #12151b; font-weight: 800; background: rgba(10, 12, 16, .07); }
.help .t-win   { color: #0f7a4a; font-weight: 800; }
.help .t-lose  { color: #b3202f; font-weight: 800; }
.help .t-trade { color: #a35a00; font-weight: 800; }
.help .t-draw  { color: #6b7385; }

/* ===================== 结算浮层 ===================== */

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 12, .78);
  backdrop-filter: blur(4px);
  z-index: 60;
}

.overlay__card {
  text-align: center;
  padding: 34px 52px;
  border-radius: 14px;
  border: var(--stroke) solid var(--ink);
  background: linear-gradient(178deg, #fffdf7, var(--paper) 60%, var(--paper-2));
  color: #171a21;
  box-shadow: 0 10px 0 var(--ink), 0 30px 70px rgba(0, 0, 0, .75);
  rotate: 1deg;
  animation: cardIn .3s cubic-bezier(.2, .9, .3, 1.2) both;
}

/* 结算印章：像盖上去的一枚印 */
.overlay__stamp {
  width: 86px;
  height: 86px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-hand);
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  color: #c2184d;
  border: 5px solid currentColor;
  rotate: -13deg;
  opacity: .92;
  animation: stampIn .38s cubic-bezier(.2, 1.1, .3, 1.2) both;
}

.overlay__stamp.is-win  { color: #12809c; }
.overlay__stamp.is-lose { color: #c2184d; }

@keyframes stampIn {
  0%   { opacity: 0; transform: scale(2.6) rotate(-30deg); }
  60%  { opacity: .95; transform: scale(.92) rotate(-11deg); }
  100% { opacity: .92; transform: scale(1) rotate(-13deg); }
}

.overlay__title {
  margin: 0 0 10px;
  font-family: var(--font-hand);
  font-size: 46px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #12151b;
}
.overlay__title.is-win  { color: #12809c; }
.overlay__title.is-lose { color: #c2184d; }
.overlay__sub { margin: 0 0 22px; color: #4a515f; font-weight: 700; }

/* ===================== 掉血时整块战场震一下 ===================== */

@keyframes shakeScreen {
  0%, 100% { transform: translate(0, 0); }
  18% { transform: translate(-5px, 3px); }
  38% { transform: translate(5px, -3px); }
  58% { transform: translate(-3px, -2px); }
  78% { transform: translate(2px, 2px); }
}
body.is-shaking .app { animation: shakeScreen .32s ease-out; }