/* combat.css — 战斗界面专属样式（Engine）。只用 style.css 的主题变量并给兜底。 */

.cb-screen {
  --c-paper: var(--paper, #efe4cc);
  --c-ink: var(--ink, #3a2a1c);
  --c-ink-soft: var(--ink-soft, #6b5640);
  --c-red: var(--raptor, #c8553d);
  --c-green: var(--armor, #6b8f4e);
  --c-blue: var(--wing, #4f7fa6);
  --c-amber: var(--amber, #d99a2b);
  --c-serif: var(--font-serif, "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif);
  --c-display: var(--font-display, var(--c-serif));
  padding: 0 !important;
  overflow: hidden;
}

.cb {
  --doom: 0;
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: grid;
  grid-template-rows: auto auto 1fr 250px;
  overflow: hidden;
  color: var(--c-ink);
  font-family: var(--c-serif);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- 天空：昼夜两套渐变交叉淡入 ---------- */
.cb-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cb-sky-day, .cb-sky-night { position: absolute; inset: 0; transition: opacity 1.2s ease; }
.cb-sky-day {
  background:
    radial-gradient(ellipse at 50% 115%, rgba(255, 240, 200, .9), transparent 60%),
    linear-gradient(180deg, #9fd0e0 0%, #cfe5d6 38%, #f2e3b8 70%, #e8cf98 100%);
}
.cb-sky-night {
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(120, 110, 190, .55), transparent 60%),
    linear-gradient(180deg, #0f1430 0%, #1e2552 45%, #3a3468 78%, #4b3a5a 100%);
}
.phase-night .cb-sky-day { opacity: 0; }
.phase-night .cb-sky-night { opacity: 1; }

.cb-stars { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.phase-night .cb-stars { opacity: 1; }
.cb-stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff6d8;
  animation: cb-twinkle 3s ease-in-out infinite;
}
.cb-stars i.big { width: 3px; height: 3px; box-shadow: 0 0 6px #fff6d8; }
@keyframes cb-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* 太阳和月亮挂在同一个大圆盘两端，每回合转 180°：一个沉下去，另一个升起来 */
.cb-orbit {
  position: absolute; left: 50%; top: 82%;
  width: 0; height: 0;
  transition: transform 1.3s cubic-bezier(.55, .05, .3, 1);
}
.cb-sun, .cb-moon {
  position: absolute; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
}
.cb-sun {
  transform: translateY(-62vh);
  background: radial-gradient(circle at 40% 40%, #fff7cf 0%, #ffd56a 45%, #f4a93b 100%);
  border: 4px solid var(--c-ink);
  box-shadow: 0 0 0 10px rgba(255, 214, 106, .25), 0 0 60px 20px rgba(255, 200, 90, .45);
}
.cb-moon {
  transform: translateY(62vh) rotate(180deg);
  background: radial-gradient(circle at 35% 35%, #fbf6e4 0%, #e3dcc2 60%, #b9b29a 100%);
  border: 4px solid var(--c-ink);
  box-shadow: 0 0 40px 12px rgba(220, 220, 255, .35);
}
.cb-moon::before, .cb-moon::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(120, 110, 90, .25);
}
.cb-moon::before { width: 18px; height: 18px; left: 22px; top: 26px; }
.cb-moon::after { width: 11px; height: 11px; left: 52px; top: 50px; }

/* 天火战：天空随倒计时泛红 */
.cb-doom {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 75% 0%, rgba(255, 90, 30, .85), rgba(140, 20, 10, .5) 45%, transparent 75%);
  opacity: calc(var(--doom) * .9);
  transition: opacity 1s ease;
  mix-blend-mode: multiply;
}
.cb-meteor-fight .cb-doom { animation: cb-doom-flicker 2.4s ease-in-out infinite; }
@keyframes cb-doom-flicker { 50% { filter: brightness(1.25); } }

.cb-hills { position: absolute; left: 0; right: 0; bottom: 210px; width: 100%; height: 26vh; }
.cb-hill-back { fill: #a9b980; stroke: var(--c-ink); stroke-width: 3; transition: fill 1.2s; }
.cb-hill-front { fill: #c9b27a; stroke: var(--c-ink); stroke-width: 3; transition: fill 1.2s; }
.phase-night .cb-hill-back { fill: #3c4466; }
.phase-night .cb-hill-front { fill: #4f4a63; }
.cb-sky::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 212px;
  background: linear-gradient(180deg, #c9b27a, #b49a64);
  border-top: 3px solid var(--c-ink);
  transition: background 1.2s;
}
.phase-night .cb-sky::after { background: linear-gradient(180deg, #4f4a63, #35324a); }

/* ---------- 顶部 ---------- */
.cb-hud { position: relative; z-index: 5; }
.cb-top {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 12px 0;
}
.cb-phasebar {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 16px; border: 3px solid var(--c-ink); border-radius: 999px;
  background: rgba(255, 249, 232, .9); box-shadow: 3px 3px 0 var(--c-ink);
  font-size: 15px; transition: background 1s, color 1s;
}
.phase-night .cb-phasebar { background: rgba(30, 34, 70, .88); color: #f2ead2; border-color: #f2ead2; box-shadow: 3px 3px 0 #0a0c1c; }
.cb-turn { font-weight: 700; letter-spacing: .05em; }
.cb-ph b { font-size: 16px; }
.cb-ph-now.day b { color: #c46a12; }
.cb-ph-now.night b { color: #ffe9a8; text-shadow: 0 0 8px rgba(255, 233, 168, .7); }
.cb-ph-next { opacity: .75; }
.cb-ph-arrow { opacity: .6; }

.cb-countdown {
  position: relative; z-index: 2;
  display: flex; align-items: baseline; gap: 12px; padding: 2px 26px 6px;
  background: radial-gradient(ellipse at 50% 60%, rgba(90, 14, 4, .88), rgba(60, 8, 2, .6) 70%, transparent 100%);
  border-radius: 18px;
  color: #fff3dc; text-shadow: 3px 3px 0 #3a1208, 0 0 24px rgba(255, 80, 20, .9);
  font-family: var(--c-display);
}
.cb-cd-label { font-size: 18px; letter-spacing: .3em; }
.cb-cd-num { font-size: 84px; line-height: .9; font-weight: 900; }
.cb-countdown.danger .cb-cd-num { color: #ffb08a; animation: cb-throb .9s ease-in-out infinite; }
.cb-countdown.cb-tick { animation: cb-tick .7s ease-out; }
@keyframes cb-throb { 50% { transform: scale(1.12); } }
@keyframes cb-tick { 0% { transform: scale(1.5); filter: brightness(2); } 100% { transform: none; } }

/* ---------- 战场 ---------- */
.cb-field {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(220px, 1fr) 60px minmax(300px, 1.6fr);
  align-items: end; padding: 0 4vw 26px;
}
.cb-side { display: flex; align-items: flex-end; justify-content: center; gap: 18px; min-height: 0; }
.cb-right { justify-content: space-evenly; }

.cb-ent {
  position: relative; display: flex; flex-direction: column; align-items: center;
  transition: opacity .5s, filter .3s, transform .2s;
}
.cb-fig { position: relative; z-index: 1; width: 210px; height: 190px; display: flex; align-items: flex-end; justify-content: center; }
.cb-fig svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(3px 4px 0 rgba(58, 42, 28, .25)); }
.cb-player .cb-fig { width: 250px; height: 220px; }
.cb-right[data-count="3"] .cb-fig { width: 170px; height: 160px; }
.cb-right .cb-ent { flex: 0 1 auto; min-width: 0; }
.cb-right[data-count="4"], .cb-right[data-count="5"], .cb-right[data-count="6"] { gap: 6px; }
.cb-right[data-count="4"] .cb-fig, .cb-right[data-count="5"] .cb-fig, .cb-right[data-count="6"] .cb-fig { width: 120px; height: 115px; }
.cb-right[data-count="4"] .cb-hpbar, .cb-right[data-count="5"] .cb-hpbar, .cb-right[data-count="6"] .cb-hpbar { width: 104px; }
.cb-right[data-count="4"] .cb-meteor .cb-fig, .cb-right[data-count="5"] .cb-meteor .cb-fig, .cb-right[data-count="6"] .cb-meteor .cb-fig { width: 200px; height: 200px; }
.cb-enemy.kind-boss .cb-fig { width: 260px; height: 230px; }
.cb-shadow {
  width: 70%; height: 14px; margin-top: -10px; border-radius: 50%;
  background: rgba(40, 25, 10, .28); transition: transform .4s, opacity .4s;
}
.cb-name {
  margin-top: 4px; font-weight: 700; font-size: 15px; padding: 1px 10px;
  background: rgba(255, 249, 232, .85); border: 2px solid var(--c-ink); border-radius: 6px;
}
.cb-name small { margin-left: 6px; font-weight: 400; font-size: 12px; opacity: .75; }
.cb-noct { color: #4b3a8a; }

.cb-bars { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.cb-hpbar {
  position: relative; width: 150px; height: 18px; border: 3px solid var(--c-ink); border-radius: 9px;
  background: #3a2a1c; overflow: hidden;
}
.cb-hpbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #e0664a, #b23a26); transition: width .35s ease; }
.cb-player .cb-hpbar i { background: linear-gradient(180deg, #8fc46a, #4f8a35); }
.cb-hpbar b { position: relative; display: block; text-align: center; font-size: 12px; line-height: 12px; color: #fff; text-shadow: 1px 1px 0 #000; }
.cb-block {
  display: none; align-items: center; justify-content: center; gap: 1px;
  min-width: 38px; height: 26px; padding: 0 4px; border: 3px solid var(--c-ink); border-radius: 8px 8px 14px 14px;
  background: #b9d3e6; font-size: 13px;
}
.cb-block.on { display: inline-flex; animation: cb-pop .3s ease-out; }
.cb-block i { font-style: normal; font-size: 12px; }
@keyframes cb-pop { 0% { transform: scale(1.5); } 100% { transform: none; } }

.cb-statuses { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 4px; max-width: 220px; min-height: 22px; }
.cb-status {
  display: inline-flex; align-items: center; gap: 2px; padding: 0 6px 0 4px; height: 22px;
  border: 2px solid var(--c-ink); border-radius: 11px; background: #fff7e2; font-size: 12px; cursor: help;
}
.cb-status i { font-style: normal; }
.st-bleed, .st-poison, .st-weak, .st-vuln { background: #f6d5c8; }
.st-dodge, .st-airborne { background: #d7e6f4; }
.st-strength, .st-rage, .st-thorns, .st-fortify { background: #f3e2b3; }

/* 意图 */
.cb-intent {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-bottom: 4px; min-height: 52px;
}
.cb-intent-main {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 6px;
  border: 3px solid var(--c-ink); border-radius: 999px; background: #fff7e2; box-shadow: 2px 2px 0 var(--c-ink);
  cursor: help; animation: cb-bob 2.2s ease-in-out infinite;
}
.cb-intent-icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; }
.cb-intent-icon svg { width: 100%; height: 100%; }
.cb-intent-emoji { font-size: 20px; }
.cb-intent-main b { font-size: 20px; font-family: var(--c-display); }
.it-attack .cb-intent-main b { color: #b23a26; }
.cb-intent.boosted .cb-intent-main {
  background: #2b2d5a; color: #ffe9a8; border-color: #ffe9a8;
  box-shadow: 0 0 0 3px rgba(255, 233, 168, .35), 0 0 22px 6px rgba(255, 220, 120, .65);
  animation: cb-bob 2.2s ease-in-out infinite, cb-glow 1.4s ease-in-out infinite;
}
.cb-intent.boosted .cb-intent-main b { color: #ffe9a8; }
.cb-intent-moon { font-size: 11px; color: #ffe9a8; background: #2b2d5a; padding: 0 6px; border-radius: 6px; }
@keyframes cb-glow { 50% { box-shadow: 0 0 0 5px rgba(255, 233, 168, .5), 0 0 34px 10px rgba(255, 220, 120, .85); } }
@keyframes cb-bob { 50% { transform: translateY(-3px); } }
.cb-intent-next {
  display: inline-flex; align-items: center; gap: 3px; padding: 0 8px; font-size: 11px;
  border: 2px dashed rgba(58, 42, 28, .6); border-radius: 999px; background: rgba(255, 247, 226, .7); opacity: .85; cursor: help;
}
.cb-intent-next .cb-intent-icon { width: 16px; height: 16px; }
.cb-intent-next .cb-intent-emoji { font-size: 12px; }
.cb-intent-next b { font-size: 12px; }
.cb-intent-next em { font-style: normal; }
.cb-intent-next.boosted { border-color: #6a5acd; color: #3a2f8a; background: rgba(230, 226, 255, .85); }
.phase-night .cb-intent-next { background: rgba(40, 44, 84, .8); color: #e8e2c8; border-color: rgba(232, 226, 200, .6); }

/* 天火战：日月让到左边，给倒计时腾出正中 */
.cb-meteor-fight .cb-orbit { left: 16%; }

/* 天火：随倒计时变大变红 */
.cb-meteor .cb-fig {
  --prog: 0;
  width: 240px; height: 240px;
  transform: scale(calc(.75 + var(--prog) * .75)) translateY(calc(var(--prog) * -10px));
  transform-origin: 50% 80%;
  filter: saturate(calc(1 + var(--prog))) hue-rotate(calc(var(--prog) * -18deg)) drop-shadow(0 0 calc(10px + var(--prog) * 40px) rgba(255, 90, 20, calc(.4 + var(--prog) * .5)));
  transition: transform 1s cubic-bezier(.3, 1.4, .5, 1), filter 1s;
  animation: cb-meteor-shake 3s ease-in-out infinite;
}
@keyframes cb-meteor-shake { 50% { translate: 0 -6px; } }
.cb-meteor .cb-shadow { background: rgba(255, 90, 20, calc(.2 + var(--doom) * .5)); width: calc(60% + var(--doom) * 40%); }

/* ---------- 底部：能量、牌堆、手牌 ---------- */
.cb-bottom {
  position: relative; z-index: 6;
  display: grid; grid-template-columns: 110px 80px 1fr 80px 150px; align-items: end;
  padding: 0 18px 14px;
}
.cb-energy { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 30px; }
.cb-energy label, .cb-pile label { font-size: 12px; color: #fff7e2; text-shadow: 1px 1px 0 var(--c-ink); }
.cb-orb {
  width: 82px; height: 82px; border-radius: 50%; border: 4px solid var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #f2b33d 55%, #b8661c);
  box-shadow: 0 0 0 4px rgba(255, 220, 120, .35), 0 0 24px rgba(255, 190, 70, .7), 4px 4px 0 var(--c-ink);
  font-family: var(--c-display);
}
.phase-night .cb-orb {
  background: radial-gradient(circle at 35% 30%, #f3f0ff, #9d8ef0 55%, #4b3c9c);
  box-shadow: 0 0 0 4px rgba(190, 180, 255, .3), 0 0 26px rgba(160, 140, 255, .8), 4px 4px 0 #0a0c1c;
}
.cb-orb b { font-size: 34px; color: #fff; text-shadow: 2px 2px 0 var(--c-ink); }
.cb-orb span { font-size: 16px; color: #fff; text-shadow: 1px 1px 0 var(--c-ink); }
.cb-orb.empty { filter: grayscale(.8) brightness(.8); }
.cb-orb.cb-deny { animation: cb-deny .4s; }

.cb-pile { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; padding-bottom: 26px; }
.cb-pilecard {
  width: 46px; height: 62px; display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: repeating-linear-gradient(45deg, #7a5a3a, #7a5a3a 6px, #6a4c30 6px, #6a4c30 12px);
  color: #f2e3b8; border: 3px solid var(--c-ink); border-radius: 6px; box-shadow: 3px 3px 0 var(--c-ink);
  transition: transform .15s;
}
.cb-pile:hover .cb-pilecard { transform: translateY(-4px); }
.cb-pile b { font-size: 18px; color: #fff7e2; text-shadow: 2px 2px 0 var(--c-ink); }

.cb-endwrap { display: flex; justify-content: center; padding-bottom: 34px; }
.cb-end {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 128px; padding: 10px 14px !important; font-size: 18px !important; font-family: var(--c-display);
}
.cb-end small { font-size: 12px; opacity: .8; }
.cb-end.cb-pulse { animation: cb-endpulse 1.3s ease-in-out infinite; }
@keyframes cb-endpulse { 50% { transform: scale(1.07); box-shadow: 0 0 0 6px rgba(255, 210, 110, .55); } }

/* 手牌扇形：每张卡的位置由 JS 写进 --x --y --r */
.cb-hand { position: relative; height: 230px; }
.cb-slot {
  --x: 0px; --y: 0px; --r: 0deg;
  position: absolute; left: 50%; bottom: 0;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  transform-origin: 50% 120%;
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.2), filter .2s, opacity .2s;
  cursor: pointer; touch-action: none;
}
.cb-slot .card { pointer-events: none; }
.cb-slot .card .kw, .cb-slot .card [data-tip] { pointer-events: auto; }
.cb-slot:hover, .cb-slot.cb-selected {
  z-index: 100 !important;
  transform: translate(var(--x), -46px) rotate(0deg) scale(1.28);
}
.cb-slot.cb-selected .card { outline: 4px solid var(--c-amber); outline-offset: 3px; box-shadow: 0 0 26px 6px rgba(255, 200, 80, .8); }
.cb-slot.cb-unplayable { filter: grayscale(.55) brightness(.82); }
.cb-slot.cb-unplayable:hover { transform: translate(var(--x), -24px) rotate(0deg) scale(1.15); }
.cb-slot.cb-playable .card { box-shadow: 0 0 0 2px rgba(255, 230, 150, .0); }
.cb-slot.cb-phase-on .card { box-shadow: 0 0 16px 4px rgba(255, 210, 100, .75); }
.phase-night .cb-slot.cb-phase-on .card { box-shadow: 0 0 18px 5px rgba(170, 150, 255, .85); }
.cb-phase-badge {
  position: absolute; z-index: 3; top: -12px; right: -8px; padding: 0 6px; height: 24px; line-height: 20px;
  border: 2px solid var(--c-ink); border-radius: 12px; font-size: 14px; background: #fff7e2;
}
.cb-phase-badge.on { background: #ffd66a; animation: cb-throb 1.6s ease-in-out infinite; }
.phase-night .cb-phase-badge.on { background: #b7a8ff; }
.cb-phase-badge.off { opacity: .55; }
.cb-slot.cb-dragging { opacity: .25; }
.cb-slot.cb-deny { animation: cb-deny .4s; }
.cb-slot.cb-grown .card { animation: cb-grow 1s ease-out; }
@keyframes cb-grow { 0% { filter: brightness(1.8) saturate(1.5); } 100% { filter: none; } }
@keyframes cb-deny {
  20% { translate: -8px 0; } 40% { translate: 8px 0; } 60% { translate: -5px 0; } 80% { translate: 5px 0; }
}
.cb-slot.cb-drawin { animation: cb-drawin .45s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes cb-drawin { from { opacity: 0; translate: -42vw 40px; rotate: -40deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.cb-hand.cb-discarding .cb-slot { transition: transform .26s ease-in, opacity .26s; transform: translate(42vw, 60px) rotate(30deg) scale(.6); opacity: 0; }

.cb-ghost {
  position: fixed; z-index: 1000; pointer-events: none; left: 0; top: 0;
  transform: translate(-50%, -60%) rotate(-4deg) scale(1.05);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .35);
}
.cb-flying {
  position: fixed !important; z-index: 1000; pointer-events: none; margin: 0 !important;
  transition: transform .45s cubic-bezier(.5, 0, .7, .4), opacity .45s ease-in;
}

/* 选目标 */
.cb-targeting .cb-enemy.cb-targetable { cursor: crosshair; }
.cb-targeting .cb-enemy.cb-targetable .cb-fig { animation: cb-target 1s ease-in-out infinite; }
.cb-enemy.cb-targetable:hover .cb-fig, .cb-enemy.cb-aim .cb-fig {
  filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 10px rgba(255, 80, 40, .95));
}
.cb-enemy.cb-targetable:hover::after, .cb-enemy.cb-aim::after {
  content: "◎"; position: absolute; z-index: 5; top: 40%; left: 50%; transform: translate(-50%, -50%);
  font-size: 64px; color: rgba(220, 50, 30, .85); pointer-events: none;
}
@keyframes cb-target { 50% { translate: 0 -4px; } }

/* ---------- 反馈动画 ---------- */
.cb-hit .cb-fig { animation: cb-hit .42s; }
.cb-hit-big .cb-fig { animation: cb-hit-big .5s; }
@keyframes cb-hit {
  0% { filter: brightness(2.2) sepia(1) hue-rotate(-30deg); translate: 0 0; }
  25% { translate: -10px 0; } 50% { translate: 8px 0; } 75% { translate: -4px 0; } 100% { filter: none; translate: 0 0; }
}
@keyframes cb-hit-big {
  0% { filter: brightness(2.6) sepia(1) hue-rotate(-30deg); translate: 0 0; scale: 1.06; }
  20% { translate: -16px 4px; } 45% { translate: 14px -2px; } 70% { translate: -7px 0; } 100% { filter: none; translate: 0 0; scale: 1; }
}
.cb-clank .cb-block { animation: cb-pop .3s; }
.cb-dodge .cb-fig { animation: cb-dodge .45s ease-out; }
@keyframes cb-dodge { 40% { translate: -36px -6px; opacity: .55; } 100% { translate: 0 0; opacity: 1; } }
.cb-lunge .cb-fig { animation: cb-lunge .5s cubic-bezier(.4, 0, .2, 1); }
@keyframes cb-lunge { 35% { translate: -70px 6px; } 100% { translate: 0 0; } }
.cb-act .cb-fig { animation: cb-act .5s ease-in-out; }
@keyframes cb-act { 40% { scale: 1.1; filter: brightness(1.3); } }
.cb-dying { opacity: 0 !important; filter: grayscale(1) blur(2px); transform: translateY(20px) scale(.9); transition: all .8s ease-in; }
.cb-ent.cb-airborne .cb-fig { translate: 0 -46px; transition: translate .4s ease-out; }
.cb-ent.cb-airborne .cb-shadow { transform: scale(.6); opacity: .5; }
.cb-swoop .cb-fig { animation: cb-swoop .6s cubic-bezier(.6, 0, .3, 1); }
@keyframes cb-swoop { 0% { translate: 0 -60px; } 45% { translate: 160px 10px; rotate: 12deg; } 100% { translate: 0 0; rotate: 0deg; } }
.cb-enemy.cb-swoop .cb-fig { animation-name: cb-swoop-left; }
@keyframes cb-swoop-left { 0% { translate: 0 -60px; } 45% { translate: -160px 10px; rotate: -12deg; } 100% { translate: 0 0; rotate: 0deg; } }
.cb.cb-quake { animation: cb-quake .35s; }
@keyframes cb-quake { 25% { translate: 0 6px; } 50% { translate: -4px -3px; } 75% { translate: 3px 2px; } }

.cb-bubble {
  position: absolute; z-index: 6; top: 30px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; white-space: nowrap; font-weight: 700;
  background: #fff7e2; border: 3px solid var(--c-ink); border-radius: 12px; box-shadow: 2px 2px 0 var(--c-ink);
  animation: cb-bubble 1.1s ease-out forwards;
}
.cb-bubble.night { background: #2b2d5a; color: #ffe9a8; border-color: #ffe9a8; }
@keyframes cb-bubble { 0% { opacity: 0; translate: 0 10px; } 15% { opacity: 1; translate: 0 0; } 80% { opacity: 1; } 100% { opacity: 0; translate: 0 -12px; } }

/* 飘字 */
.cb-fx { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.cb-float {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--c-display); font-weight: 900; font-size: 34px;
  color: #fff; -webkit-text-stroke: 1.5px var(--c-ink); text-shadow: 3px 3px 0 var(--c-ink);
  animation: cb-float 1.25s ease-out forwards;
}
.cb-float.dmg { color: #ff6a4a; font-size: 40px; }
.cb-float.tick { color: #c86ad8; font-size: 28px; }
.cb-float.thorns { color: #9ad86a; font-size: 26px; }
.cb-float.heal { color: #7ee07a; }
.cb-float.block { color: #9cc8ff; font-size: 24px; }
.cb-float.blocked { color: #d6dde6; font-size: 24px; }
.cb-float.dodge { color: #bfe6ff; font-size: 30px; }
.cb-float.status { color: #ffe08a; font-size: 18px; -webkit-text-stroke: 1px var(--c-ink); text-shadow: 2px 2px 0 var(--c-ink); }
.cb-float.status.down { color: #e0d0c0; }
.cb-float.passive { color: #ffd66a; font-size: 18px; -webkit-text-stroke: 1px var(--c-ink); }
@keyframes cb-float {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  70% { opacity: 1; transform: translate(-50%, -140%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(.95); }
}

/* 横幅 */
.cb-banner {
  position: absolute; z-index: 60; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.8);
  padding: 12px 46px; opacity: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--c-display); font-size: 42px; font-weight: 900; letter-spacing: .12em;
  color: #fff7e2; text-shadow: 3px 3px 0 var(--c-ink);
  background: rgba(58, 42, 28, .78); border-top: 4px solid #fff7e2; border-bottom: 4px solid #fff7e2;
  transition: opacity .25s, transform .3s cubic-bezier(.2, 1.4, .4, 1);
}
.cb-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cb-banner.phase.night { background: rgba(28, 30, 70, .85); color: #ffe9a8; }
.cb-banner.phase.day { background: rgba(196, 120, 30, .82); }
.cb-banner.win { background: rgba(70, 110, 50, .88); font-size: 56px; }
.cb-banner.lose { background: rgba(80, 20, 15, .88); }
.cb-banner.impact { background: rgba(140, 30, 10, .88); color: #ffe0b0; }
.cb-banner.summon { font-size: 26px; background: rgba(140, 50, 20, .8); }

/* 结局演出 */
.cb.cb-impact::before {
  content: ""; position: absolute; z-index: 55; pointer-events: none;
  left: 50%; top: 45%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #fff4d0 18%, #ffb050 38%, #ff5a20 58%, rgba(64, 10, 0, .95) 72%, rgba(64, 10, 0, 0) 74%);
  animation: cb-impact 2.4s cubic-bezier(.6, 0, .9, .5) forwards;
}
@keyframes cb-impact { 0% { opacity: 0; transform: scale(.05); } 35% { opacity: .9; } 85% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1.6); filter: brightness(2.5); } }
.cb.cb-impact .cb-meteor .cb-fig { transform: scale(4) translate(-20px, 40px); transition: transform 1.6s ease-in; }
.cb.cb-shatter .cb-meteor .cb-fig { animation: cb-shatter 1.6s ease-out forwards; }
@keyframes cb-shatter { 30% { filter: brightness(3); scale: 1.2; } 100% { opacity: 0; scale: 1.8; filter: brightness(4) blur(6px); } }
.cb.cb-fallen .cb-player .cb-fig { transition: all 1.2s; filter: grayscale(1); opacity: .4; rotate: 80deg; translate: 0 40px; }

.cb.cb-busy .cb-slot { cursor: default; }

/* ---------- 日志 ---------- */
.cb-log {
  position: absolute; z-index: 20; left: 12px; top: 130px; width: 34px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.cb-log.open { width: 280px; }
.cb-log-toggle {
  writing-mode: vertical-rl; padding: 10px 4px; font-family: var(--c-serif); font-size: 13px; cursor: pointer;
  background: #fff7e2; border: 2px solid var(--c-ink); border-radius: 0 8px 8px 0; box-shadow: 2px 2px 0 var(--c-ink);
}
.cb-log.open .cb-log-toggle { writing-mode: horizontal-tb; border-radius: 8px 8px 0 0; }
.cb-log-list {
  width: 100%; max-height: 30vh; overflow-y: auto; padding: 8px 10px;
  background: rgba(255, 249, 232, .94); border: 2px solid var(--c-ink); border-radius: 0 8px 8px 8px;
  font-size: 12.5px; line-height: 1.55; user-select: text; -webkit-user-select: text;
}
.cb-log-list p { margin: 0; }
.cb-log-turn { margin-top: 6px !important; font-weight: 700; color: var(--c-ink-soft); }

/* 牌堆弹窗 */
.cb-pile-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cb-pile-modal h3 { margin: 16px 0 8px; text-align: center; }

/* 兜底卡面（renderCard 不存在时） */
.cb-card-fallback {
  width: 130px; height: 180px; padding: 8px; border: 3px solid var(--c-ink); border-radius: 10px;
  background: #fff7e2; box-shadow: 3px 3px 0 var(--c-ink); font-size: 12px;
}
.cb-card-fallback .card-cost {
  position: absolute; top: -10px; left: -10px; width: 30px; height: 30px; border-radius: 50%;
  background: #f2b33d; border: 3px solid var(--c-ink); text-align: center; line-height: 24px; font-weight: 900;
}
.cb-card-fallback .card-name { font-weight: 700; font-size: 15px; text-align: center; margin: 6px 0; }

/* ---------- 窄屏 ---------- */
@media (max-width: 900px), (max-height: 720px) {
  .cb { grid-template-rows: auto auto 1fr 210px; }
  .cb-fig { width: 150px; height: 140px; }
  .cb-player .cb-fig { width: 170px; height: 160px; }
  .cb-enemy.kind-boss .cb-fig, .cb-meteor .cb-fig { width: 180px; height: 170px; }
  .cb-hand { height: 190px; }
  .cb-bottom { grid-template-columns: 84px 60px 1fr 60px 120px; padding: 0 8px 10px; }
  .cb-orb { width: 64px; height: 64px; }
  .cb-cd-num { font-size: 60px; }
  .cb-hills { bottom: 170px; }
  .cb-sky::after { height: 172px; }
  .cb-slot .card { transform: scale(.82); transform-origin: 50% 100%; }
}

/* 手牌尺寸由战斗屏自己定（扇形间距依赖它）；卡面外观仍归 style.css */
.cb-slot .card { width: 136px; height: 190px; box-sizing: border-box; overflow: hidden; }
.cb-slot .card .card-art svg { max-height: 64px; max-width: 100%; }