@font-face {
    font-family: 'Comic Sans MS';
    src:
        local('Comic Sans MS'),
        url('/static/fonts/Comic Sans MS.ttf') format('truetype'),
        url('/static/fonts/Comic Sans MS.woff') format('woff');
    font-weight: normal;
}
:root {
  --main-color: rgb(196, 194, 216);
  --main-color-light: rgb(210, 207, 230);
}
body {
    font-family: 'Comic Sans MS','Arial',sans-serif;
    background-color: rgb(23,23,25);
    margin: 0;
    padding: 0;
}
h1, h2{
    color: var(--main-color-light);
}
p {
    color: var(--main-color);
}
button {
    font-family: 'Comic Sans MS','Arial',sans-serif;
    outline: none;
}
img {
    user-select: none;
    pointer-events: auto;
}
label {
    color: var(--main-color);
}
#version {
    position: absolute;
    z-index: 99;
    top: 0px;
    right: 5px;
    margin: 0;
    color: rgb(35,35,37);
}
#online {
    position: absolute;
    z-index: 99;
    top: 0px;
    left: 5px;
    margin: 0;
    color: rgb(55,55,60);
}
/* Временное уведомление */
#notif {
    display: none;
    position: absolute;
    font-size: 16px;
    background-color: rgb(15,15,17);
    margin: 0;
    top: 20px;
    left: 20px;
}
/* Анимация исчезновения уведомления */
#notif.anim {animation: dissapear 3.03s 1 linear;}
@keyframes dissapear {
    80% { opacity: 1; top: 20px;}
    100% { opacity: 0; top: 5px;}
}
/* Заголовок страницы */
.pageHeader{
    width: 100%;
    left: 0;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 5px;
    background-color: rgb(15,15,17);
}
/* менюшка снизу с 5 кнопками */
.menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgb(15,15,17);
    padding: 10px 0;
}
.menuContent {
    width: min(100%, 600px);
    display: flex;
    justify-content: space-around;
    margin-left: auto;
    margin-right: auto;
}
#your_info p {
    margin-top: 10px;
    margin-bottom: 10px;
}
#your_info img {
    margin-top: 10px;
}
.score {
    font-size: 22px;
    margin-top: 10px;
    margin-bottom: 10px;
}
/* кнопка в меню */
.mainTab {
    color: var(--main-color);
    background-color: transparent;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
}
.mainTab img {
    width: 35px;
    height: 35px;
    margin-bottom: 5px;
}
/* содержимое вкладок */
.content {
    display: none;
}
.content {
    text-align: center;
    font-size: 18px;
}
/* содержимое выбранной вкладки */
.content.selected {
    display: block;
}
/* главная кнопка */
#clickButton{
    width: min(68%, 550px);
    height: min(68%, 550px);
    padding: 0;
    background-color: transparent;
    border: none;
}
#clickButton img{
    width: 100%;
    height: 100%;
}
#clickButton:active{
    animation: wobbly 120ms 1 ease-in-out;
}
@keyframes wobbly {
    0% { transform:scale(1);}
    50% { transform:scale(0.86);}
    100% { transform:scale(1);}
}
#clickButton img:hover {
    transform:scale(0.98);
}
/* Вкладки в топе и в магазине */
.tab-button{
    margin-left: 10px;
    width: clamp(0px, 27%, 190px);
    height: 40px;
    background-color: rgb(15,15,17);
    color: var(--main-color);
    font-size: clamp(12px, 3.8vw, 20px);
    border: none;
    border-bottom: 2px solid transparent;
}
.tabs{
    position: sticky;
    background: rgb(23,23,25);
    align-items:center;
    justify-content:center;
    top: 0;
    width: 100%;
    z-index: 10;
}
/* содержимое вкладок в топе и в магазине */
.tab, .Ttab {
    display: none;
}
.tab.active, .Ttab.active {
    display: block;
}
/* кнопка выбранной вкладки */
.tab-button.active {
    border-color: var(--main-color);
}
/* информация о типе улучшений улучшений */
.UgroupInfo {
    margin-right: 10%;
    margin-left: 10%;
    font-size: 17px;
}
/* улучшение */
.upgrades{
    display: flex;
    color: white;
    font-size: 16px;
    width: min(80%, 500px);
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(13,13,15);
    border-left: 3px solid rgb(146, 144, 176);
    text-align: left;
    margin-bottom: 20px;
}
.upgrades p {
    color: var(--main-color-light);
}
/* информация об улучшении (название, стоимость, скорость) */
.upgrades .Uinfo{
    margin-top: 10px;
    margin-left: 20px;
}
.upgrades .Uinfo p{
    margin-bottom: 6px;
    margin-top: 0px;
}
/* кнопка улучшения */
.upgrades .Uupgrade{
    background-color: transparent;
    border: none;
    margin-left: auto;
    margin-right: 10px;
}
.upgrades .Uupgrade img{
    width: 70px;
    height: 70px;
    opacity: 85%;
}
.upgrades .Uupgrade:active{
    animation: uwobbly 200ms 1 linear forwards;
}
@keyframes uwobbly {
    0% {}
    50% { margin-top: -20px; transform:scale(1.1);}
    100% {}
}
.upgrades .Uupgrade img:hover{
    opacity: 100%;
}
/* список топ игроков */
.toplist {
    color: var(--main-color);
    width: min(88%, 550px);
    margin-left: auto;
    margin-right: auto;
    counter-reset: my-counter;
    list-style-type: none;
    padding: 0;
}
/* элемент списка */
.toplist li {
    counter-increment: my-counter;
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #888;
}
.toplist li::before {
    content: counter(my-counter) ". ";
}
.toplist li p {
    margin: 0;
}
.toplist li p:nth-child(1) {
    margin-left: 10px;
}
.toplist li p:nth-last-child(1) {
    margin-left: auto;
}
/* форма для передачи койнов */
.form_container {
    max-width: 400px;
    margin: 20px auto;
}
.form_label {
    display: block;
    margin-bottom: 8px;
}
.form_input {
    background-color: #ddd;
    width: 80%;
    padding: 8px;
    font-size: 16px;
    margin-bottom: 16px;
    border-radius: 10px;
}
.form_button {
    background-color: #5b5;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
/* мини игры */
.mg_img {
    width: 30px;
    height: 30px;
}
#mg_info {
    width: min(80%, 400px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-left: auto;
    margin-right: auto;
}
#mg_info p {
    margin-top: 5px;
    margin-bottom: 3px;
}
.team1, .team2 {
    display: flex;
    gap: 10px;
}
.team2 {
    margin-left: auto;
}
#amount_team1 {
    border-top: 4px solid rgb(200,60,60);
}
#amount_team2 {
    border-top: 4px solid rgb(70,70,210);
}
#line_indicator {
    width: min(80%, 400px);
    height: 5px;
    background: rgb(190,10,20);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    /*box-shadow: 0 0 10px #fff;*/
}
#mg_general_info {
    font-size: 16px;
}