@import url('./fonts.css');


:root {
   --border-color-default: var(--tg-theme-hint-color, #c0c0c0);
   --border-color-focus: var(--tg-theme-link-color, #2cabf5);
   --label-color-default: var(--tg-theme-hint-color, #999);
   --label-color-focus: var(--tg-theme-link-color, #2cabf5);
   --text-color: var(--tg-theme-text-color, #000000);
   --bg-color: var(--tg-theme-secondary-bg-color, #ffffff);
}

body {
   color: var(--tg-theme-text-color);
   background: var(--tg-theme-secondary-bg-color);
   flex-direction: column;
   align-items: center;
   font-size: 16px;
   font-family: 'SF Pro Display', 'Arial', sans-serif;

   box-sizing: content-box;
   user-select: none;

}

a {
   color: var(--tg-theme-link-color);
}

.hint{
   color: var(--tg-theme-hint-color);
}

.link{
   color: var(--tg-theme-link-color);
}

img {
   transition: opacity 100ms ease-out;
   user-drag: none;
   -webkit-user-drag: none;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}

/* Bubbles */

.main__bubbles{
   position:absolute;
   width:100%;
   height: 100%;
   z-index:-1;
   overflow:hidden;
   top:0;
   left:0;
}
.bubble{
   position: absolute;
   bottom:-100px;
   width:40px;
   height: 40px;
   background-image: url('../images/arz_games.png');
   background-size: contain;
   background-repeat: no-repeat;
   opacity: 0.3;
   animation: rise 25s infinite ease-in;
}
.bubble:nth-child(1){
   width:40px;
   left:10%;
   animation-duration:8s;
}
.bubble:nth-child(2){
   width:20px;
   animation-duration:8s;
   animation-delay:1s;
}
.bubble:nth-child(3){
   width:50px;
   left:35%;
   animation-duration:10s;
   animation-delay:2s;
}
.bubble:nth-child(4){
   width:80px;
   left:50%;
   animation-duration:14s;
   animation-delay:0s;
}
.bubble:nth-child(5){
   width:35px;
   left:55%;
   animation-duration:9s;
   animation-delay:1s;
}
.bubble:nth-child(6){
   width:45px;
   left:65%;
   animation-duration:11s;
   animation-delay:3s;
}
.bubble:nth-child(7){
   width:90px;
   left:70%;
   animation-duration:15s;
   animation-delay:2s;
}
.bubble:nth-child(8){
   width:25px;
   left:80%;
   animation-duration:9s;
   animation-delay:2s;
}
.bubble:nth-child(9){
   width:15px;
   left:70%;
   animation-duration:12s;
   animation-delay:1s;
}
.bubble:nth-child(10){
   width:90px;
   height:90px;
   left:25%;
   animation-duration:13s;
   animation-delay:4s;
}
@keyframes rise{
0%{
   bottom:-100px;
   transform:translateX(0);
}
50%{
   transform:translate(100px);
}
100%{
   bottom:1080px;
   transform:translateX(-200px);
}
}


/* MAIN BLOCK */

.main {
   margin: 0 0.25em;
}

.main--card {
   display: flex;
   flex-direction: column;
   margin: 0;
   width: 100%;
   margin-bottom: 1.5em;;
}

.main--card-title {
   display: block;
   color: var(--tg-theme-hint-color);
   text-transform: uppercase;
   margin-bottom: 0.5em;
   margin-left: 1em;
   font-size: 18px;
}

.main--card-description {
   background-color: var(--tg-theme-bg-color);
   border-radius: 10px;
   padding: 1.5em;

   box-sizing: content-box;
   
}

.main--card-user {
   background-color: var(--tg-theme-bg-color);
   border-radius: 10px;
   padding: .75em 1.5em;
   box-sizing: content-box;
   margin-bottom: .5em;

   display: flex;
   align-items: center;
   justify-content: space-between;
}

.main--card-user.me {
   background-color: rgba(255, 217, 0, 0.342);
   border-radius: 10px;
   padding: .75em 1.5em;
   box-sizing: content-box;
   margin-bottom: .5em;

   display: flex;
   align-items: center;
   justify-content: space-between;
}

.main--card-user img {
   border-radius: 100%;
}

.main--card-user-name {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   align-items: start;
   justify-content: center;

}

.user-info {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
}

.main--card-user-name p {
   margin: 0;
   padding: 0;

   margin-left: 1.5em;
}

.place {
   justify-self: flex-end;
   padding: .3em .8em;
   background-color: var(--tg-theme-secondary-bg-color);

   border-radius: 10px;
   opacity: .5;
}

.main--header {
   display: flex;
   flex-direction: column;

   align-items: center;
   justify-content: center;

   margin-bottom: 1em;

   text-align: center;
}

.main--header-title {
   font-size: 1.5em;
   font-weight: 800;
   text-transform: uppercase;

   margin: 0 0 .2em 0;
}

.main--header-ending {
   font-size: .8em;
   text-transform: uppercase;
   opacity: .5;
   margin: 0;
}

.main--header-description {
   margin: 0;
}

/* Новый дизайн конкурса */

.contest-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   max-width: 100%;
   margin-bottom: 1.5em;
   box-sizing: border-box;
}

.contest-gif-block {
   width: 100%;
   max-width: 100%;
   background-color: transparent;
   border-radius: 12px;
   padding: 3em 2em;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1em;
   box-sizing: border-box;
}

.contest-gif {
   max-width: 200px;
   max-height: 200px;
   width: 100%;
   height: auto;
}

.contest-actions {
   width: 100%;
   max-width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0.75em;
   margin-bottom: 1em;
   box-sizing: border-box;
}

.contest-btn {
   width: 100%;
   max-width: 100%;
   padding: 1em 1em;
   border-radius: 12px;
   font-size: 0.95em;
   font-weight: 600;
   text-transform: uppercase;
   text-align: center;
   transition: all 200ms ease-out;
   letter-spacing: 0.5px;
   user-select: none;
   box-sizing: border-box;
   word-wrap: break-word;
}

.contest-btn-primary {
   background-color: var(--tg-theme-button-color);
   color: var(--tg-theme-button-text-color);
}

.contest-btn-secondary {
   background-color: var(--tg-theme-bg-color);
   color: var(--tg-theme-text-color);
   border: 1px solid var(--tg-theme-hint-color);
   opacity: 0.8;
}

.contest-btn-disabled {
   opacity: 0.5;
   pointer-events: none;
}

.contest-btn-boost {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
}

.contest-btn-boost-disabled {
   background: var(--tg-theme-bg-color);
   color: var(--tg-theme-hint-color);
   opacity: 0.5;
   pointer-events: none;
}

.contest-booster-info {
   text-align: center;
   font-size: 1.05em;
   color: var(--tg-theme-text-color);
   margin-bottom: 1.5em;
   line-height: 1.5;
   opacity: 0.85;
   font-weight: 500;
}

.contest-stats {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0.5em;
   align-items: flex-start;
   padding-left: 1em;
}

.contest-stat-item {
   color: var(--tg-theme-hint-color);
   font-size: 18px;
   text-align: left;
   text-transform: uppercase;
   display: block;
}



.main--empty {
   display: flex;

   flex-direction: column;

   align-items: center;
   justify-content: space-between;

   min-height: 97vh;
   margin-bottom: 0;
}

.main--empty-first_child {
   display: flex;
   flex-direction: column;

   align-items: center;
   justify-content: center;

}

/* TEXT */

.text-center {
   text-align: center;
}

/* BUTTON */

.btn {
   margin: 0;
   width: 100%;
   padding: .5em 0;
   border-radius: 10px;
   font-size: 1em;
   text-shadow: none;
   background-color: var(--tg-theme-button-color);
   color: var(--tg-theme-button-text-color);
   text-transform: uppercase;
   font-weight: 600;
   text-align: center;

   margin-bottom: 10px;

   user-select: none;
   transition: background-color 200ms ease-out;
}

.btn-disabled {
   background-color: var(--tg-theme-bg-color);
   color: var(--tg-theme-button-text-color);
   opacity: .8;
}

.btn-copy {
   padding: .2em 0;
   opacity: .5;
   border-radius: 5px;
}

.d-none {
   display: none;
}

.error-message {
   background-color: var(--tg-theme-destructive-text-color);
   border-radius: 10px;
   padding: .5em 0;

   opacity: .7;

   margin-bottom: 1em;
}

/* INPUT */

.input-group {
   position: relative;
}

input {
   width: 90vw;
   padding: 8px; 
   font-size: 16px;
   border: 1.5px solid var(--border-color-default);
   border-radius: 8px;
   background-color: var(--bg-color);
   color: var(--text-color);
   outline: none;
   box-sizing: border-box;
   transition: border-color 0.3s ease;
   text-align: center;
   line-height: 1.4;
}

input:focus {
   border-color: var(--border-color-focus);
}

label {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   font-size: 16px;
   color: var(--label-color-default);
   background-color: var(--bg-color);
   padding: 0 4px;
   pointer-events: none;
   transition: all 0.2s ease;
   text-align: center;
}

input:focus + label,
input:not(:placeholder-shown) + label {
   top: -25px;
   left: 12px;
   transform: none;
   font-size: 16px;
   color: var(--label-color-focus);
   text-align: left;
}

.text-danger {
   color: var(--tg-theme-destructive-text-color);
}