/*!
 * Bootstrap Docs (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 * For details, see https://creativecommons.org/licenses/by/3.0/.
 */
 :root {
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;

    --cell-brdr-radius: 83px;
    --cell-height: 136px;
    --cell-width: 123px;
    --cell-width-lg: 185px;
    --cell-height-lg: 8vw;
}

body{
    overflow-x: hidden;
    overflow-y: hidden;
}


.preloader{
    width: 100%; 
    height: 100%; 
    background: rgb(114,114,114);
    background: radial-gradient(circle, rgba(114,114,114,1) 0%, rgba(92,92,92,1) 75%, rgb(66, 66, 66) 100%);
    overflow: hidden; 
    position: fixed; 
    z-index: 1000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rules-modal{
    z-index: 1000001;
}




















/* animations for player cards */
/* Fade In & Slide Out Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(50px); }
}
.fade-in { animation: fadeIn 1s ease;}
.slide-out { animation: slideOut 1s ease; }

/* Flip & Rotate Out Animations */
@keyframes flipIn {
    from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
    to { transform: perspective(400px) rotateY(0deg); opacity: 1; }
}
@keyframes rotateOut {
    from { transform: perspective(400px) rotateY(0deg); opacity: 1; }
    to { transform: perspective(400px) rotateY(90deg); opacity: 0; }
}
.flip-in { animation: flipIn 1s ease; }
.rotate-out { animation: rotateOut 1s ease; }

/* Zoom In & Shrink Out Animations */
@keyframes zoomIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes shrinkOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0); opacity: 0; }
}
.zoom-in {  animation: zoomIn 1s ease; }
.shrink-out {  animation: shrinkOut 1s ease; }
  
/* Elastic Entry & Squeeze Out Animations */
@keyframes elasticIn {
    from { transform: scale(0.2) translateY(50px); opacity: 0; }
    60% { transform: scale(1.2) translateY(-10px); }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes squeezeOut {
    from { transform: scale(1) translateY(0); opacity: 1; }
    60% { transform: scale(1.2) translateY(-10px); }
    to { transform: scale(0.2) translateY(50px); opacity: 0; }
}
.elastic-in { animation: elasticIn 1s ease; }
.squeeze-out { animation: squeezeOut 1s ease; }
  
/* Swing In & Drop Out Animations */
@keyframes swingIn {
    from { transform: rotateZ(-10deg); opacity: 0; transform-origin: top left; }
    50% { transform: rotateZ(10deg); }
    to { transform: rotateZ(0deg); opacity: 1; transform-origin: top left; }
}
@keyframes dropOut {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
}
.swing-in { animation: swingIn 1s ease; }
.drop-out { animation: dropOut 1s ease; }

/* Класс для анимации пульсации */
.pulse {
    animation: pulseAnimation 2s infinite;
  }
  
  @keyframes pulseAnimation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
  
  /* Класс для анимации увеличения */
  .grow {
    animation: growAnimation 2s forwards;
  }
  
  @keyframes growAnimation {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.5);
    }
  }
  
  /* Класс для анимации уменьшения */
  .shrink {
    animation: shrinkAnimation 2s forwards;
  }
  
  @keyframes shrinkAnimation {
    from {
      transform: scale(1.5);
    }
    to {
      transform: scale(1);
    }
  }
  

@media (min-width: 1300px) {
    html {
      font-size: 100%; 
    }
  }
  
  @media (max-width: 1199px) {
    html {
      font-size: 70%; 
    }
  }
  
  @media (max-width: 768px) {
    html {
      font-size: 80%; 
    }
  }
  
  @media (max-width: 576px) {
    html {
      font-size: 70%; 
    }
  }












/* Кастомные модальные окна */
/* ======= Токены палитры и размеров ======= */
:root{
  --m-ink: #031113;      /* основной текст */
  --m-muted: #9FBEC9;    /* вторичный текст/иконки */
  --m-accent: #43D9FB;   /* акцент (циан) */
  --m-surface: #ffffff;  /* фон карточки */
  --m-radius: 15px;      /* общий радиус */
}

/* ======= Обёртка модалки ======= */
.modal.modal-custom .modal-dialog{
  max-width: 500px;
}

.modal.modal-custom .modal-content{
  --pad-x: 40px;
  --pad-y: 30px;
  position: relative;
  border: 0;
  border-radius: var(--m-radius);
  background: var(--m-surface);
  box-shadow: 0 15px 40px rgba(0,0,0,.15);
  overflow: hidden;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--m-ink);
}

/* ======= Шапка ======= */
.modal.modal-custom .modal-header{
  border-bottom: 0;
  padding: var(--pad-y) var(--pad-x) 0 var(--pad-x);
  border-bottom: 0;
}

.modal.modal-custom .modal-title{
    color: #031113;
    font-size: 22px;
    font-family: Montserrat;
    font-weight: 700;
    line-height: 32px;
    white-space: normal;
    word-wrap: break-word;
    padding-right: 20px;
}

/* ======= Тело ======= */
.modal.modal-custom .modal-body{
  padding: 20px var(--pad-x) 10px var(--pad-x);
}

.modal.modal-custom .modal-message{
  margin: 16px 0 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--m-ink);
}

/* ======= Футер / кнопки ======= */
.modal.modal-custom .modal-footer{
  padding: 24px var(--pad-x) var(--pad-y) var(--pad-x);
  justify-content: flex-start;
  border-top: 0;
  display: flex;
  gap: 12px;
}

/* Кнопка-акцент «Да, удалить» (тёмный фон, циановый текст) */
.modal.modal-custom .btn-action{
  margin: 0;
  height: 50px;
  padding: 13px 20px;
  border-radius: var(--m-radius);
  background: var(--m-ink);
  color: var(--m-accent);
  border: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.modal.modal-custom .btn-action:hover{ filter: brightness(1.05); }
.modal.modal-custom .btn-action:active{ filter: brightness(0.95); }

.modal.modal-custom .btn-ghost{
  height: 50px;
  padding: 13px 20px;
  border-radius: var(--m-radius);
  background: transparent;
  color: var(--m-ink);
  border: 1px solid var(--m-muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.modal.modal-custom .btn-ghost:hover{
    background: rgba(159,190,201,.15);
}

.modal-backdrop {
  background: #031113;
}
.modal-backdrop.show {
  opacity: 0.8 !important;
}

@media (max-width: 576px){
  .modal.modal-custom .modal-dialog{ margin: 1rem; }
  .modal.modal-custom .modal-footer{ flex-direction: column; }
  .modal.modal-custom .btn-action,
  .modal.modal-custom .btn-ghost{ width: 100%; }
}

/* === Крестик для всех .modal.modal-custom === */
.modal.modal-custom .btn-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 6px;
  opacity: 1;

  background: url("/static/img/cross-normal.bc6f0e76a399.svg") center/100% 100% no-repeat;
  background-color: transparent;
  cursor: pointer;
  transition: transform .2s ease;
}
.modal.modal-custom .btn-close:hover,
.modal.modal-custom .btn-close:focus-visible {
  background-image: url("/static/img/cross-hover.c972d5e2b829.svg");
  transform: scale(1.05);
}

@media (max-width: 576px){
  .modal.modal-custom .modal-dialog{
    margin: 0.75rem;
  }

  /* уменьшаем внутренние отступы и радиус */
  .modal.modal-custom .modal-content{
    --pad-x: 20px;
    --pad-y: 20px;
    border-radius: 12px;
  }

  .modal.modal-custom .modal-header{
    padding: var(--pad-y) var(--pad-x) 0 var(--pad-x);
  }

  .modal.modal-custom .modal-body{
    padding: 14px var(--pad-x) 8px var(--pad-x);
  }

  .modal.modal-custom .modal-footer{
    padding: 14px var(--pad-x) var(--pad-y) var(--pad-x);
    flex-direction: column;
    gap: 8px;
  }

  /* текст поменьше */
  .modal.modal-custom .modal-title{
    font-size: 18px;
    line-height: 26px;
  }

  .modal.modal-custom .modal-message{
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;
  }

  /* кнопки компактнее и на всю ширину */
  .modal.modal-custom .btn-action,
  .modal.modal-custom .btn-ghost{
    width: 100%;
    height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 20px;
  }

  /* крестик тоже уменьшим, чтобы не ел место */
  .modal.modal-custom .btn-close {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
  }
}

/* Совсем маленькие экраны (узкие телефоны) */
@media (max-width: 360px){
  .modal.modal-custom .modal-dialog{
    margin: 0.5rem;
  }

  .modal.modal-custom .modal-content{
    --pad-x: 16px;
    --pad-y: 16px;
    border-radius: 10px;
  }

  .modal.modal-custom .modal-title{
    font-size: 16px;
    line-height: 22px;
  }

  .modal.modal-custom .modal-message{
    font-size: 13px;
    line-height: 18px;
  }

  .modal.modal-custom .btn-action,
  .modal.modal-custom .btn-ghost{
    height: 40px;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 18px;
  }
}