<app-participants class="animate__zoomInDown animate__animated">

</app-participants>
<div class="container">
    <div class="row row-cols-1">
      <div class="rule-block">
        <div class="col h-100 d-flex align-items-center" *ngIf="currentRule">
            <h1 [@fadeInAnimation]="currentRule">{{ currentRule}}</h1>
          </div>
        </div>
    </div>
    <div class="row">
      <div class="col">
      <h1>Карты в игре</h1>
      </div>
    </div>
    <div class="d-flex flew-row mt-3">
          <div class="card text-white bg-olive mb-3" #stolePrizeCard>
              <img src="../../../assets/cards/StolePrizeCard.png" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Украсть приз</h5>
                <p class="card-text">Если тебе требуется пояснять эту карточку - то игра не для тебя, налей себе алкоголь и побольше.</p>
            </div>
          </div>
          <div class="card text-white bg-secondary mb-3" style="max-width: 18rem;" #shitCard>
            <img src="../../../assets/cards/ShitCard.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Говнокарта</h5>
              <p class="card-text">Можно подкинуть еще один вопрос игроку, который правильно ответил.</p>
            </div>
          </div>
          <div class="card text-white bg-success mb-3" style="max-width: 18rem;" #luckyCard>
            <img src="../../../assets/cards/LuckyCard.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Лаки-карта</h5>
              <p class="card-text">Увеличивает шанс получения приза.</p>
            </div>
          </div>
          <div class="card text-white bg-red mb-3" style="max-width: 18rem;" #avoidPenaltyCard>
            <img src="../../../assets/cards/AvoidPenaltyCard.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Избежать наказания</h5>
              <p class="card-text">Позволяет тебе позорно убежать от исполнения наказания.</p>
            </div>
          </div>
          <div class="card text-white bg-yellow mb-3" style="max-width: 18rem;" #doubleTreasureCard>
            <img src="../../../assets/cards/DoubleTreasureCard.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Удвоить приз</h5>
              <p class="card-text">Редкая карта, позволяет получить сразу 2 приза вместо одного.</p>
            </div>
          </div>
        <div class="card text-white bg-brown mb-3" style="max-width: 18rem;" #banPlayerCard>
            <img src="../../../assets/cards/BanPlayer.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Заблокировать игрока</h5>
                <p class="card-text">Запрещает игроку давать ответы в следующих двух раундах</p>
            </div>
        </div>
        </div>
    </div>
<app-skrepa *ngIf="showScrepa" [text]="screpaText">
</app-skrepa>