/* Okno walki turowej i efekty „game feel”. Wszystkie kolory z palety Endesga 64 (public/js/palette.js, STYLE.md §8):
   bez gradientów i rozmyć, ostre krawędzie, cienie tylko twarde (przesunięcie bez rozmycia). Ładowane po style.css – nadpisuje .cb-*. */

/* ------------------------------------------------ warstwa efektów ekranowych */
#fxLayer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; image-rendering: pixelated; }

/* ------------------------------------------------ pasek tury i licznik 15 s */
.cb-top { gap: 12px; margin-bottom: 10px; }
#cbRound { color: #92a1b9; font-size: 15px; }
#cbTurn { font-size: 20px; color: #f9e6cf; text-shadow: 2px 2px 0 #131313; }
#cbTurn.mine { color: #ffc825; animation: cbBlink 1s steps(2) infinite; }
@keyframes cbBlink { 50% { color: #ffeb57; } }
.cb-timer { position: relative; flex: 1; height: 20px; border: 2px solid #131313; background: #1c121c; box-shadow: 0 0 0 2px #5d2c28; overflow: hidden; }
#cbTimer { height: 100%; background: #ffa214; box-shadow: inset 0 3px 0 #ffc825, inset 0 -3px 0 #ed7614; transition: width .1s linear; }
#cbTimer.low { background: #ea323c; box-shadow: inset 0 3px 0 #f68187, inset 0 -3px 0 #c42430; animation: cbLow .5s steps(2) infinite; }
@keyframes cbLow { 50% { background: #c42430; } }
#cbSecs { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #f9e6cf; text-shadow: 2px 2px 0 #131313, -1px -1px 0 #131313, 1px -1px 0 #131313, -1px 1px 0 #131313; pointer-events: none; }

/* ------------------------------------------------ karty uczestników */
.cb-sides { align-items: flex-end; gap: 12px; }
.cb-side { align-items: flex-end; gap: 8px; }
#cbAllies { flex: 0 1 auto; max-width: 46%; }
#cbEnemies { flex: 1 1 0; }
.cb-vs { color: #5d5d5d; align-self: center; font-size: 22px; }
.cb-card {
  position: relative; flex: 0 0 136px; min-width: 0; padding: 4px 6px 6px; background: #1c121c; border: 2px solid #131313;
  box-shadow: 0 0 0 2px #5d2c28, 0 4px 0 2px #131313; text-align: center; transition: none;
}
.cb-card.k-elite { border-color: #131313; box-shadow: 0 0 0 2px #ffc825, 0 4px 0 2px #131313; }
.cb-card.k-boss, .cb-card.k-secret { flex-basis: 176px; border-color: #131313; box-shadow: 0 0 0 2px #ea323c, 0 4px 0 2px #131313; }
.cb-card.k-secret { box-shadow: 0 0 0 2px #db3ffd, 0 4px 0 2px #131313; }
.cb-card.k-titan { flex-basis: 232px; border-color: #131313; box-shadow: 0 0 0 2px #ff5000, 0 0 0 4px #131313, 0 6px 0 4px #131313; }
.cb-card.m { flex-basis: 108px; opacity: 1; }
#cbEnemies .cb-card { cursor: pointer; }
#cbEnemies .cb-card:hover:not(.out) { box-shadow: 0 0 0 2px #f5555d, 0 4px 0 2px #131313; }
/* aktywna postać: pulsująca żółta ramka + uniesienie o 2 px (strzałka nad głową jest w portrecie) */
.cb-card.active { transform: translateY(-4px); box-shadow: 0 0 0 2px #ffc825, 0 6px 0 2px #131313; animation: cbActive .8s steps(2) infinite; }
@keyframes cbActive { 50% { box-shadow: 0 0 0 2px #ffeb57, 0 6px 0 2px #131313; } }
.cb-card.target { box-shadow: 0 0 0 2px #f5555d, 0 4px 0 2px #131313; background: #391f21; }
.cb-card.ally-sel { box-shadow: 0 0 0 2px #5ac54f, 0 4px 0 2px #131313; background: #134c4c; }
.cb-card.out { opacity: 0.45; filter: grayscale(1); }
.cb-card.down { opacity: 0.6; filter: grayscale(0.7); }
.cb-port { display: flex; justify-content: center; align-items: flex-end; min-height: 30px; }
.cb-pc { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.cb-name { justify-content: space-between; align-items: baseline; font-size: 15px; font-weight: 400; margin: 2px 0 3px; }
.cb-name span { color: #f9e6cf; text-shadow: 1px 1px 0 #131313; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.cb-name small { color: #92a1b9; font-size: 13px; white-space: nowrap; }
.cb-card.me .cb-name span { color: #ffeb57; }
.cb-card.k-elite .cb-name span { color: #ffc825; }
.cb-card.k-boss .cb-name span, .cb-card.k-secret .cb-name span { color: #f5555d; }
.cb-card.k-titan .cb-name span { color: #ff5000; }
.cb-card.down .cb-name small { color: #ea323c; }

/* paski: HP (ty/drużyna zielony, przeciwnik czerwony) z „śladem” ostatniej straty, zasób (mana/energia/furia) */
.cbar { position: relative; height: 16px; margin-top: 3px; border: 2px solid #131313; background: #1c121c; overflow: hidden; }
.cbar .fill, .cbar .trail { position: absolute; left: 0; top: 0; bottom: 0; }
.cbar .trail { background: #ffeb57; transition: width .45s steps(9); }
.cbar .fill { transition: none; }
.cbar.hp.foe { background: #571c27; }
.cbar.hp.foe .fill { background: #ea323c; box-shadow: inset 0 3px 0 #f68187, inset 0 -3px 0 #c42430; }
.cbar.hp.friend { background: #134c4c; }
.cbar.hp.friend .fill { background: #5ac54f; box-shadow: inset 0 3px 0 #99e65f, inset 0 -3px 0 #33984b; }
.cbar .shield { position: absolute; left: 0; bottom: 0; height: 4px; background: #92a1b9; }
.cbar.shielded { border-color: #92a1b9; }
.cbar span { position: absolute; inset: 0; font-size: 13px; line-height: 12px; text-align: center; color: #f9e6cf; text-shadow: 1px 1px 0 #131313, -1px 0 0 #131313, 0 -1px 0 #131313; }
.cbar.res { height: 16px; background: #272727; }
.cbar.res span { line-height: 12px; font-size: 12px; letter-spacing: 0; }
.cbar.res-mana { background: #03193f; }
.cbar.res-mana .fill { background: #0098dc; box-shadow: inset 0 3px 0 #00cdf9, inset 0 -3px 0 #0069aa; }
.cbar.res-energy { background: #5d2c28; }
.cbar.res-energy .fill { background: #ffc825; box-shadow: inset 0 3px 0 #ffeb57, inset 0 -3px 0 #ed7614; }
.cbar.res-rage { background: #571c27; }
.cbar.res-rage .fill { background: #e07438; box-shadow: inset 0 3px 0 #ffa214, inset 0 -3px 0 #c64524; }
.cb-status { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.cb-status span { display: inline-flex; align-items: center; gap: 1px; padding: 0 2px; font-size: 12px; background: #131313; border: 1px solid #424c6e; }
.cb-status span.bad { border-color: #c42430; }
.cb-status span.good { border-color: #33984b; }

/* ------------------------------------------------ kolejność tur */
.cb-order { gap: 4px; margin: 10px 0 8px; min-height: 36px; font-size: 14px; }
.cb-order small { color: #92a1b9; margin-right: 4px; }
.chip { display: inline-flex; align-items: flex-end; justify-content: center; width: 34px; height: 30px; padding: 0 0 2px; border: 2px solid #131313; background: #1c121c; border-radius: 0; }
.chip canvas { image-rendering: pixelated; display: block; }
.chip.ally { box-shadow: 0 0 0 2px #33984b; }
.chip.foe { box-shadow: 0 0 0 2px #891e2b; }
.chip.me { background: #3b1443; }
.chip.now { box-shadow: 0 0 0 2px #ffc825, 0 0 0 4px #131313; background: #391f21; width: 40px; height: 34px; margin: 0 6px 0 2px; animation: cbActive .8s steps(2) infinite; }

/* ------------------------------------------------ przyciski umiejętności */
.cb-actions { gap: 8px; }
.ab-btn {
  position: relative; width: 82px; padding: 8px 2px 4px; gap: 2px; background: #391f21; border: 2px solid #131313; box-shadow: inset 0 3px 0 var(--el, #bf6f4a), inset 0 -4px 0 #1c121c, 0 0 0 2px #5d2c28, 0 3px 0 2px #131313;
  color: #f9e6cf; transition: none;
}
.ab-btn .ab-icon { display: flex; height: 36px; align-items: center; }
.ab-btn .ab-icon img { width: 32px; height: 32px; }
.ab-btn .ab-name { font-size: 14px; line-height: 1.05; min-height: 2em; display: flex; align-items: center; text-shadow: 1px 1px 0 #131313; }
.ab-btn .ab-key { left: 6px; top: 8px; font-size: 13px; color: #b4b4b4; text-shadow: 1px 1px 0 #131313; }
.ab-btn .ab-cost { font-size: 13px; color: #ffc825; text-shadow: 1px 1px 0 #131313; }
.ab-btn:hover:not(:disabled) { background: #5d2c28; transform: translateY(-2px); border-color: #131313; box-shadow: inset 0 3px 0 var(--el, #bf6f4a), inset 0 -4px 0 #391f21, 0 0 0 2px #ffc825, 0 5px 0 2px #131313; }
.ab-btn:active:not(:disabled) { transform: translateY(1px); }
/* stany: gotowa (jasna) / czeka na turę (przygaszona) / brak zasobu (czerwona) / odnowienie (szara z liczbą tur) */
.ab-btn.st-ready { background: #5d2c28; box-shadow: inset 0 3px 0 var(--el, #bf6f4a), inset 0 -4px 0 #391f21, 0 0 0 2px #bf6f4a, 0 3px 0 2px #131313; }
.ab-btn.st-wait { background: #272727; box-shadow: inset 0 3px 0 #5d5d5d, inset 0 -4px 0 #1b1b1b, 0 0 0 2px #3d3d3d, 0 3px 0 2px #131313; }
.ab-btn.st-wait .ab-icon, .ab-btn.st-wait .ab-name { opacity: 0.55; }
.ab-btn.st-lacks { background: #571c27; box-shadow: inset 0 3px 0 #891e2b, inset 0 -4px 0 #391f21, 0 0 0 2px #891e2b, 0 3px 0 2px #131313; }
.ab-btn.st-lacks .ab-icon, .ab-btn.st-lacks .ab-name { opacity: 0.5; }
.ab-btn.st-lacks .ab-cost { color: #ea323c; }
.ab-btn.st-cd { background: #1b1b1b; box-shadow: inset 0 3px 0 #3d3d3d, inset 0 -4px 0 #131313, 0 0 0 2px #3d3d3d, 0 3px 0 2px #131313; }
.ab-btn.st-cd .ab-icon img, .ab-btn.st-cd .ab-name { opacity: 0.35; }
.ab-btn:disabled { opacity: 1; cursor: default; }
.ab-btn .ab-cd { inset: 6px 50% auto auto; transform: translateX(50%); width: 34px; height: 34px; background: #131313; border: 2px solid #5d5d5d; font-size: 24px; color: #f9e6cf; }
.ab-btn.ms { border-color: #131313; }
.ab-btn.ms::after { content: ""; position: absolute; right: 4px; top: 7px; width: 6px; height: 6px; background: #ffc825; box-shadow: 0 0 0 2px #131313; }
.ab-btn.flee { background: #391f21; }
.ab-btn.auto.on { background: #134c4c; box-shadow: inset 0 3px 0 #0cf1ff, inset 0 -4px 0 #0c2e44, 0 0 0 2px #0cf1ff, 0 3px 0 2px #131313; }
.ab-btn.auto.on .ab-cost { color: #94fdff; }

/* ------------------------------------------------ dziennik */
.cb-log { background: #131313; border: 2px solid #3d3d3d; font-size: 14px; line-height: 1.25; }
.cb-log .round { color: #657392; }
.cb-log .mine { color: #ffc825; }
.cb-log .bad { color: #f5555d; }
.cb-log .good { color: #99e65f; }
.cb-log .die { color: #f389f5; }

/* ------------------------------------------------ banery (start walki, zwycięstwo, porażka, ucieczka) */
#cbBanner {
  top: 26%; padding: 4px 28px 8px; font-size: 52px; line-height: 1; letter-spacing: 2px; background: #1c121c; border: 4px solid #131313; box-shadow: 0 0 0 4px #ffc825, 8px 8px 0 4px #131313;
  color: #ffc825; text-shadow: 4px 4px 0 #131313; white-space: nowrap; transition: none; opacity: 0; transform: translate(-50%, -50%) scale(1);
}
#cbBanner.show { opacity: 1; }
#cbBanner.start { color: #f9e6cf; box-shadow: 0 0 0 4px #ea323c, 8px 8px 0 4px #131313; animation: cbStart .9s steps(6) both; }
@keyframes cbStart {
  0% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  45% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
#cbBanner.win { color: #ffc825; box-shadow: 0 0 0 4px #ffc825, 8px 8px 0 4px #131313; animation: cbWin .6s steps(5) both; }
@keyframes cbWin { 0% { transform: translate(-50%, -50%) scale(0.4); } 60% { transform: translate(-50%, -50%) scale(1.15); } 100% { transform: translate(-50%, -50%) scale(1); } }
#cbBanner.dead, #cbBanner.lose { color: #f5555d; box-shadow: 0 0 0 4px #891e2b, 8px 8px 0 4px #131313; animation: cbLose .8s steps(4) both; }
@keyframes cbLose { 0% { transform: translate(-50%, -80%) scale(1); } 100% { transform: translate(-50%, -50%) scale(1); } }
#cbBanner.fled { color: #94fdff; box-shadow: 0 0 0 4px #00cdf9, 8px 8px 0 4px #131313; animation: cbWin .5s steps(4) both; }

@media (max-width: 640px) {
  .cb-card { flex-basis: 104px; padding: 3px 4px 5px; }
  .cb-card.k-boss, .cb-card.k-secret { flex-basis: 140px; }
  .cb-card.k-titan { flex-basis: 170px; }
  .ab-btn { width: 66px; }
  .ab-btn .ab-name { font-size: 12px; }
  #cbBanner { font-size: 34px; padding: 4px 16px 6px; }
}

/* kolejka umiejętności w oknie walki: tylko podgląd, użyta w ostatniej turze świeci */
div.ab-btn { cursor: default; }
.ab-btn.used { transform: translateY(-4px); box-shadow: inset 0 3px 0 var(--el, #bf6f4a), inset 0 -4px 0 #391f21, 0 0 0 2px #ffc825, 0 5px 0 2px #131313; }
.cb-noskills { color: #b4b4b4; align-self: center; }