/* BT Cards shared CSS (admin + frontend) */

/* Główny kontener kart — klasa .bt_cards */
.bt_cards { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; box-sizing: border-box; align-items: stretch; }
.bt_cards-wrapper * { box-sizing: border-box; }

/* Pojedyncza karta */
.bt_card { width: calc(33% - 10px); padding: 10px; border-radius: 6px; border: 1px solid #ffffff; background: rgba(0,0,0,0.25); display: flex; flex-direction: row; gap: 1rem; color: #fff; position: relative; }

/* Lewy pasek z kategoriami i napisem PILOT */
.bt_card .side { width: 78px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: .4rem; overflow: visible; }

/* Małe etykiety kategorii ułożone pionowo */
.small-cat { width: 68px; text-align: center; font-size: 10px; padding: 4px 6px; border-radius: 4px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #fff; line-height:1.1; letter-spacing: 0.3px; position: relative; z-index:2; }

/* Aktywna - z żółtą strzałką */
.small-cat.active { border-color: yellow; font-weight:700; color: yellow; }

/* pseudo-element strzałki */
.small-cat.active::after {
  content: "➤";
  position: absolute;
  right: -1.05rem;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  animation: arrow-bounce 1s infinite ease-in-out;
  font-size: 1rem;
  color: yellow;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  opacity: 0.98;
  pointer-events: none;
  z-index: 5;
}

@keyframes arrow-bounce {
  0%,100% { transform: translateY(-50%) translateX(0) rotate(180deg); opacity: 0.95; }
  50% { transform: translateY(-50%) translateX(6px) rotate(180deg); opacity: 1; }
}

/* Kolory podkładów */
.cat-very-bad { background: linear-gradient(180deg, rgba(123,0,0,1), rgba(123,0,0,0.06)); }
.cat-bad      { background: linear-gradient(180deg, rgba(211,84,0,1), rgba(211,84,0,0.06)); }
.cat-good     { background: linear-gradient(180deg, rgba(46,139,87,1), rgba(46,139,87,0.06)); }
.cat-very-good{ background: linear-gradient(180deg, rgba(30,144,255,1), rgba(255,215,0,0.06)); color:#fff; }

/* Główna treść karty po prawej — WYRAŹNA biała linia oddzielająca */
.bt_card .content { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding:0 1rem; border-left: 1px solid #ffffff; }

/* Tytuł, flavor, mechanics */
.bt_card .title { font-weight: 800; font-size: 1.1rem; }
.bt_card .flavor { font-size: 12px; margin-bottom: 2px; color: #fff; min-height: 34px; }
.bt_card .mechanics { font-size: 11px; line-height: 1.25; color: #fff; }

/* Numer karty */
.card-number { position: absolute; right: .2rem; top: .2rem; font-size: .7rem; color: #fff; background: rgba(0,0,0,.6); padding: .2rem .35rem; border-radius: 4px; border: 1px solid rgba(255,255,255,0.3); }

@media (max-width:900px) {
  .bt_card { width: calc(100% - 16px); }
  .side { width: 86px; }
}