/* ============================================================
   Бой на кубиках (книга-игра) — экран схватки.
   Порт дизайн-прототипа Design ("Бой в гавани").
   Единицы cqw = 1% ширины 16:9-контейнера .combat-stage
   (container-type:size). Все @keyframes с префиксом cbt-,
   чтобы не конфликтовать с анимациями игры (kb/charIn/fadeUp).
   ============================================================ */

#combat-root {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: #000;
  place-items: center;
  overflow: hidden;
}
#combat-root.show { display: grid; }

/* 16:9-сцена во весь вьюпорт с леттербоксом; cqw = 1% её ширины */
.combat-stage {
  position: relative;
  width: min(100vw, 177.78vh);
  height: min(56.25vw, 100vh);
  background: #0f0d0a;
  overflow: hidden;
  container-type: size;
  font-family: 'EB Garamond', Georgia, serif;
  color: #e6d3a3;
}

/* ---- Анимации (все cqw-зависимые тайминги как в прототипе) ---- */
@keyframes cbtKb { from { transform: scale(1.03); } to { transform: scale(1.1) translate(-1%, -0.6%); } }
@keyframes cbtCharIn { from { opacity: 0; transform: translateY(3%); } to { opacity: 1; transform: translateY(0); } }
@keyframes cbtFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cbtGlowPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes cbtTumble { 0% { transform: rotate(-8deg) translateY(-.3cqw); } 25% { transform: rotate(6deg) translateY(.2cqw); } 50% { transform: rotate(-5deg) translateY(-.25cqw); } 75% { transform: rotate(9deg) translateY(.15cqw); } 100% { transform: rotate(-8deg) translateY(-.3cqw); } }
@keyframes cbtSettleDie { 0% { transform: scale(1.35) rotate(9deg); } 55% { transform: scale(.94) rotate(-2deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes cbtShakeHit { 0% { transform: none; } 12% { transform: translate(-.8cqw,.35cqw); } 28% { transform: translate(.65cqw,-.4cqw); } 45% { transform: translate(-.45cqw,.2cqw); } 62% { transform: translate(.3cqw,-.15cqw); } 80% { transform: translate(-.15cqw,.08cqw); } 100% { transform: none; } }
@keyframes cbtVigFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cbtSpriteHit { 0% { filter: brightness(2.4) contrast(1.2) sepia(.35); } 100% { filter: brightness(.92) contrast(1.05); } }
@keyframes cbtLungeL { 0% { transform: none; } 30% { transform: translateX(3.2cqw); } 100% { transform: none; } }
@keyframes cbtLungeR { 0% { transform: none; } 30% { transform: translateX(-3.2cqw); } 100% { transform: none; } }
@keyframes cbtDmgFloat { 0% { opacity: 0; transform: translateY(.5cqw) scale(.7); } 18% { opacity: 1; transform: translateY(0) scale(1.18); } 70% { opacity: 1; transform: translateY(-1.8cqw) scale(1); } 100% { opacity: 0; transform: translateY(-3.2cqw) scale(.95); } }
@keyframes cbtLuckPulse { 0%,100% { border-color: rgba(200,154,62,.55); box-shadow: 0 0 2.5cqw rgba(200,154,62,.15),0 2cqw 6cqw rgba(0,0,0,.75); } 50% { border-color: rgba(236,217,168,.95); box-shadow: 0 0 4.5cqw rgba(200,154,62,.4),0 2cqw 6cqw rgba(0,0,0,.75); } }
@keyframes cbtVerdictIn { 0% { opacity: 0; transform: scale(1.6); letter-spacing: .7em; } 100% { opacity: 1; transform: scale(1); letter-spacing: .4em; } }

/* ---- Ховеры (в прототипе style-hover; выносим в классы) ---- */
.cbt-cta { transition: all .25s; }
.cbt-cta:hover { background: rgba(177,80,46,.34) !important; border-color: #d98a6a !important; }
.cbt-leave { transition: color .2s; }
.cbt-leave:hover { color: #ecd9a8 !important; }
.cbt-stance { transition: all .2s; }
.cbt-stance:hover { background: rgba(200,154,62,.14) !important; border-color: #c89a3e !important; color: #ecd9a8 !important; }
.cbt-stance.press:hover { background: rgba(177,80,46,.18) !important; border-color: #d98a6a !important; }
.cbt-next { transition: color .2s; }
.cbt-next:hover { color: #ecd9a8 !important; }
.cbt-luck-try { transition: all .2s; }
.cbt-luck-try:hover { background: rgba(200,154,62,.32) !important; }
.cbt-luck-accept { transition: all .2s; }
.cbt-luck-accept:hover { border-color: rgba(200,154,62,.7) !important; color: #ecd9a8 !important; }
.cbt-luck-close { transition: all .2s; }
.cbt-luck-close:hover { background: rgba(200,154,62,.26) !important; }
.cbt-end { transition: all .25s; }
.cbt-end.gold:hover { background: rgba(200,154,62,.26) !important; }
.cbt-end.terra:hover { background: rgba(177,80,46,.3) !important; }

/* --- групповой бой 1–3 --- */
@keyframes fallAway { to { opacity: 0; transform: translateY(6%) rotate(4deg); filter: grayscale(1) brightness(.3); } }
@keyframes targetRing { 0%,100% { box-shadow: 0 0 0 rgba(200,154,62,0), 0 1.4cqw 3cqw rgba(0,0,0,.6); } 50% { box-shadow: 0 0 1.6cqw rgba(200,154,62,.55), 0 1.4cqw 3cqw rgba(0,0,0,.6); } }
@keyframes ledgerIn { from { opacity: 0; transform: translateX(-.8cqw); } to { opacity: 1; transform: none; } }